From this comment, we might want to introduce the types for parachain staking pallet, and others that we might benefit from.
For this we need to increment the pendulum.js dependency to the latest, and add the typing where needed.

• Hide the collator box and staking reward box on /collators
• Link the collators to their polkadot.js links
• Add a beta version tag to the portal

As a PEN/AMPE holder, I should be unlock my unvested tokens from the Portal.

As a stable coin holder on Stellar network, I want to bridge my tokens to Amplitude.

Acceptance criteria

• On \bridge
• At top of the page show warning
  • Currently in beta mode. Transactions are capped to $9999.
• Show Issue and Redeem tab.
• In Issue. Show Input field and a dropdown next to it
  • Input field to enter the amount of tokens to be bridged.
  • Dropdown to select the token tickers.
• Below this show Checkbox. Called as Manually select vault. This would be by default unchecked.
• If checked. Show a dropdown below with the list of vaults available.
• Should be able to select one of the vault from the dropdown.
• Next show the amount of tokens and the token ticker to be received on Amplitude
• Show transaction fee. Show detailed view of all fees when hovered over the i icon.
• At the bottom show Confirm button. On click opens-up a pop-up.
• In pop-up
  • Show the amount of tokens and token name to be bridged
  • Countdown timer. Starting from 24:00:00
  • Address to where tokens should be sent/transferred.
  • Recipient address
  • Button at the bottom of the pop-up. I've made this transfer
• On clicking I've made this transfer pop-up closes.
• Then transfer can be tracked on the \transfer page

Notes

• Following ticket is written based on assumptions that vaults and fee structure are not defined.
• Tokens to be considered in the dropdown are USD, MXN, BRL.
• Tokens received on the Amplitude side should be added prefix "a". For ex. aUSD.
• Input field - Inputs only until two decimals allowed.
• Fee breakdown and values.
  • Issue fee 0.15%. Paid in wrapped token
  • Security deposit 0.50%. Paid in PEN

Wireframe

Will update once ready

Technical consideration

To be filled in by the tech-team.

As a 0xAmber user i should be able to to track and manage the pool deposits and withdrawals.

Acceptance criteria

• Tracking the pools
• Deposit UI for adding tokens in the pool
• Withdrawal UI for removing tokens from the pool

Currently the portal is connected to rpc.pendulumchain.tech. Update it to rpc-amplitude.pendulumchain.tech.

As a user connected with a wallet, show on /dashboard my $AMPE balance (no historic data)

In this version, only the current $AMPE balance is shown, no other graphs or similar

As a portal user, i should be able to see the new branding/design for Pendulum and Amplitude.

Acceptance criteria

• Show the side menu with all the items from the wireframe
• Show dapp version and runtime on the side bar
• Show the current block number in Network
• Show all the social logos
• Show the links to Terms, Privacy and Wiki
• Show the connect wallet button.
• Show the new Pendulum logo
• All the colours, fonts and UI Kits can be found in the Figma file linked in this ticket.

Wireframe

https://www.figma.com/file/5up5sghcttBogehUq4255i/App?node-id=608%3A696&t=4xmrWwmOcyeowwD8-0

Terms

As a Spacewalk bridge tester, I want to test the complete flow of the bridge UI with dummy data.

Acceptance criteria

This version will use dummy data, which is defined in this ticket.

Add a notice: "This is a showcase prototype using dummy data. Spacewalk bridge is still in development."

Bridge input form (general UI)

• On /bridge, show bridge UI (see wireframes below)
  • Direction of bridge is by default from Stellar to Amplitude
• Bridge UI has 3 sections
  • On bridge/issue: the Issue (from Stellar to Amplitude)
  • On bridge/redeem: the Redeem (from Amplitude to Stellar)
  • On bridge/transfers: a list of pending/completed transfers

Issue (Stellar to Amplitude UX)

• In From section:
  • show "From Stellar" as read only text
  • show Input field to enter token amount (allow same amount of decimals as all other number fields on app)
  • show Dropdown to select tokens (see hardcoded token list below)
• In To section:
  • show "To Amplitude" as read only text
  • show Received amount
• Show button Bridge below the input form
  • Clicking on this opens a pop-up
• In pop-up, show:
  • name of selected Stellar token
  • Exact amount to send on Stellar network (e.g. 10 USDC)
  • A timer (counting down from 24:00:00)
  • The From Stellar address
  • The To Amplitude address
  • I've made the transfer button, which closes the pop-up
• On close, show the Transfers list with the state of the transfer as Pending

Redeem (Amplitude to Stellar UX)

• In From section.
  • show "From Amplitude" as read only text
  • show Input field to enter token amount (allow same amount of decimals as all other number fields on app)
  • show Dropdown to select tokens. (see hardcoded token list below)
• In To section.
  • show "To Stellar" as read only text
  • show Received amount
  • show Input field to enter Stellar address.
• Show Bridge button.
  • Clicking on it would execute the transfer.
• After execution, show the Transfers list with the state of the transfer as Pending

Transfers

• Show the list of transfers with following parameters
  • Time
  • Amount
  • Transaction ID
  • Type
  • Status

Tokens to show in the issue dropdown

• USDC
• TZS
• BRL

Tokens to show in the redeem dropdown

• sUSDC
• sTZS
• sBRL

Terms used in the wireframe

• From: The network on which user has funds or wishes to bridge from
• To: The network on which user wants the funds or wishes to bridge to
• Received amount: The amount user would receive if the transaction is successful. For simplicity same as entered amount
• Time: Time when the transaction was executed.
• Amount: Amount of the transaction done
• Transaction ID: ID of the transaction. In issue Stellar ID, In redeem Amplitude ID.
• Type: Type of transfer. Issue or Redeem.
• Status: Pending, Completed and Failed.

Notes and assumptions

• All dynamic elements are highlighted in the wireframe. eg Input field, Dropdown and Buttons.
• The timer countdown would start as soon as the bridge button is clicked.

Issue wireframe

Pop-up wireframe

Redeem wireframe

Transfer wireframe

As $AMPE holder, I want to see the list of collators that are active on the network.

Acceptance criteria

Collator dashboard

• On /collators
  • In a container show available AMPE balance
• Show list of collators below the container with the details
  • Collator name
  • Total staked
  • Delegators
  • APY
  • Delegated amount
• Show Delegate button in front of each list item

Terms used in the wireframe

• Available balance: User's AMPEBalance
• Total staked: Amount of tokens that are locked on that collator
• Delegated: Amount of tokens staked by the user on that specific collator
• Delegators: Number of delegators that have delegated to that collator
• APY: % of rewards the user would get for his delegated amount

Notes

• All data is read only. Except buttons and input field. Which are explicitly mentioned.
• Attaching Low fidelity wireframes for more context.

Wireframe

https://www.figma.com/file/XLIKffEYnK9autHMM1YgA3/Flows?node-id=0%3A1&t=rDjECzvp3Y8Zm7gV-0

Technical considerations

• data to fetch from the chain
  • the list of collators
    • returned by api.query.parachainStaking.candidatePool.entries()
    • this returns an array (the list of collators), where every member has is an array with two entries of the form [key, value]
    • the key contains the address of the collator, extract it using key.args[0].toHuman()
    • the value contains the remaining information, extract it using value.unwrap(), this returns an object with the members
      • total: this is the total staking amount of the collator, display in column "Total staked" (see below for how to display amounts)
      • delegators: an array containing information about the delegators for this collator, you only need to get the length of this array to display the number of delegators
      • each member of the delegators array contains an entry owner and amount
        • if there is an owner entry that is equal to the account of the user, then display the amount in the "Delegated" column (see below for how to display amounts)
  • the APY
    • is the same for every collator and only needs to be queried once
    • returned by api.query.parachainStaking.inflationConfig()
    • this returns an object info, the APY is then info.collator.rewardRate.annual.toHuman()
• all amounts are raw amounts (i.e., scaled by 1_000_000_000_000) and stored in a big number object
  • it is important not to convert this into a number directly as this will lead to data loss, instead it should be converted as Number(amount.divn(1000000).divn(1000)) / 1000
  • this will create a number with three decimal precision
• Additional documentation wrt to pallet can be found here
  • Internal docs
  • Pallet code documentation

As a Subwallet user, I want to connect the SubWallet to portal.

Acceptance criteria

• On /Dashboard
• Clicking on Connect wallet opens a pop-up
• In pop-up show
  • SubWallet as an option
  • Clicking on SubWallet
    • Show all account's from SubWallet
    • I should be able to select one account from the list.
• On account selection. Show selected account on top right corner.

Notes

• We are using the Talisman components for wallet connect flow.

Technical considerations

• Following packages to be used for the integration
  • https://www.npmjs.com/package/@talismn/connect-wallets
  • https://www.npmjs.com/package/@talismn/connect-components
  • https://www.npmjs.com/package/@talismn/connect-ui

Describe the bug

User cannot see the estimated rewards.

Reproduction

Steps to reproduce the behavior:

1. Go to /collator
2. See the claim section. It does not show the estimated rewards
3. This is the problem on both version Pendulum and Amplitude.

Expected behavior

If the user has delegated tokens to a collators, he must be able to see the estimated rewards that he is going to recieve.

Screenshots

Desktop (please complete the following information):

• OS: iOS
• Browser Chrome and safari both

As a wrapped stable coin holder on Amplitude network, I want to bridge my tokens back to Stellar.

Acceptance criteria

• On \bridge
• At top of the page show warning
  • Currently in beta mode. Transactions are capped to $9999.
• Show Issue and Redeem tab.
• In Redeem. Show Input field and a dropdown next to it
  • Input field to enter the amount of tokens to be bridged.
  • Dropdown to select the token tickers.
• Below this show one more input field. To enter Stellar address.
• Next show the amount of tokens and the token ticker to be received on Stellar
• At the bottom show Confirm button. On click opens-up a pop-up.
• In pop-up
  • Show tokens redeemed and their value in dollars.
  • Show the stellar address the tokens are sent to.
  • At the bottom of pop-up show button View Progress
• On clicking View Progress pop-up closes and directs you the particular transfer on \transfer

Notes

• Following ticket is written based on assumptions that vaults and fee structure are not defined.
• Input field - Inputs only until two decimals allowed.

Wireframe

Will update once ready

Technical consideration

To be filled in by the tech-team.

As a crowdloan contributor, I should be able to claim my rewards from the portal

Acceptance criteria

• On \dashboard
• Show a container with Crowdloan rewards as heading.
• Under this show token distribution in two categories
  • Transferrable
  • Vested

on /amm:

• 1. Swap. Including confirm swap pop-up
• 2. Add liquidity

Add readme file to the repo with local setup instructions and other relevant docs

As a Stellar and Amplitude user, I should be able to track the status of my transfers on spacewalk.

Acceptance criteria

• On \transfers
• Show two categories Issue Requests and Redeem Requests.
• Show list of previous transfers under Issue and Redeem respectively.
• Show following information in the list.
  • Date and time
  • Amount
  • Stellar transaction
  • Status (Completed, Pending and Failed)
• On clicking any of the list item.
  • Show a new page with additional details of the transaction.
    • Parachain block
    • Destination address
    • Vault account
    • Stellar transaction ID (Only for issue requests)
    • Received amount of tokens (only if status completed)

Wireframe

Will update once ready

Technical consideration

To be filled in by the tech-team.

The governance option on the navbar should be redirected to this link https://amplitude.polkassembly.io/

Collators table should include pagination, as shown in the designs:

Technical considerations

• There's a related PR that includes a paginated Table (see #64).
• Replace the <table> component in Collators.tsx with the paginated component

As a portal user, I should accept the T&Cs before connecting and using it.

Add icon to the governance option in the navbar showing that it is a external link.

Svg:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style="fill:#000"><path d="M19.98 2.99a1 1 0 0 0-.11.01H15a1 1 0 1 0 0 2h2.586l-9.293 9.293a1 1 0 1 0 1.414 1.414L19 6.414V9a1 1 0 1 0 2 0V4.127a1 1 0 0 0-1.02-1.137zM5 3c-1.093 0-2 .907-2 2v14c0 1.093.907 2 2 2h14c1.093 0 2-.907 2-2v-6a1 1 0 1 0-2 0v6H5V5h6a1 1 0 1 0 0-2H5z"/></svg>

As a portal user, I should be able to switch between portal version's using a dropdown.

Describe the bug

On the collator dashboard i see side scroll and the collator heading overlaps other headings

Reproduction

Steps to reproduce the behavior:

1. Go to /collator on portal
2. Scroll left and right
3. You will see the collator heading overlaps over other heading

Expected behavior

There should be no overlap of the headings over each other and also no side scroll, ideally the user should be able to see the entire table without scrolling.

Screenshots

Desktop (please complete the following information):

• OS: iOS
• Browser both chrome[111.0.5563.64] and safari[16.1]

As a AMPE holder, i should be able to see the AMPE balance in my wallet on the dashboard

Acceptance criteria

• on /dashboard
• If the wallet is connected show AMPE balance on the dashboard.

Note

• This functionality was present before the rebranding.

Describe the bug

On the Pendulum version of the portal, i am not able to see my delegation on the table and also the Delegate button is not disabled even after i have delegated to one of the collator.

Reproduction

Steps to reproduce the behavior:

1. Go to /collator
2. Delegate to one of the collator
3. After delegation you can still see the Delegate button is enabled

Expected behavior

The delegate button should be disabled if the user had delegated to one of the collator and also user should be able to see his delegation on the table(this is related to this #80 )

Screenshots

<img width=“915” alt=“Screenshot 2023-03-14 at 12 59 10 PM” src=“https://user-images.githubusercontent.com/52105313/224926760-4ae9416c-aceb-4623-9dcf-50f6a6b485ac.png”>

Desktop (please complete the following information):

• OS: iOS
• Browser both chrome[111.0.5563.64] and safari[16.1]

On /collators:

• Show rewards earned
• Show AMPE delegation and balance
• List of all collator live on the network (see https://polkadot.js.org/apps/?rpc=wss%3A%2F%2Fpencol-kus-01.pendulumchain.tech#/collators)
• Ability to delegate tokens.

1. As a user when i select an item from the Portal side menu. The selection should turn green.

Current behaviour

Expected behaviour

As a developer/tester, I'd like to connect to Foucoco, the Rococo testnet version of Amplitude/Pendulum, so I can try out new features in a safe way.

• On route portal.pendulumchain.org/foucoco/, connect to the Foucoco
• Following endpoints are available:

As a 0xAmber user i should be able to add and remove liquidity from the backstop pool

Acceptance criteria

• Show deposit in backstop pool UI
• Show withdrawal in backstop pool UI

As $AMPE holder, I want to delegate my tokens to a collator.

Acceptance criteria

Delegate tokens

• On \collators
• Clicking on the Delegate button in front of each collator item opens a pop-up
• In pop-up show:
  • Address of the collator
  • Min delegation amount
  • APY
  • Available AMPE
  • Show Input field to enter the amount of tokens.
    • If input value less than min. delegation amount show error. Error message Below min. delegation
    • If input value greater than Available AMPE amount show error. Error message Insufficient balance
    • If input value has more than two decimals show error. Error message Incorrect input. Only two decimals
• Show Delegate button. On click.
  • Show confirmation window.
  • On clicking confirm Initiate the on-chain transaction using connected wallet.
• After accepting the transaction from wallet.
  • if delegation is successful Show successful delegated pop-up
  • If delegation fails show delegation failed pop-up

Terms used in the wireframe

• Available AMPE: User’s AMPE Balance
• APY: % of rewards the user would get for his delegated amount
• Min. delegation: The minimum amount a user could delegate

Notes

• All data is read only. Except buttons and input field. Which are explicitly mentioned.
• The user state should be stored in local storage.

Wireframe -> Entire flow

https://www.figma.com/file/XLIKffEYnK9autHMM1YgA3/Flows?node-id=0%3A1&t=mZaYUhKzV4gedc0U-0

Technical considerations

• Request information
  • min delegation amount: api.consts.parachainStaking.minDelegatorStake (again, this needs to be converted to an AMPE amount)
  • APY
    • returned by api.query.parachainStaking.inflationConfig()
    • this returns an object info, the APY is then info.delegator.rewardRate.annual.toHuman() (be careful, don't use collator but delegator here)
  • available AMPE
    • query via api.query.system.account(<delegator address (the user)>)
    • returns an object account, then the available AMPE is account.data.free (again, this needs to be converted to an AMPE amount)
• How to execute the delegation
  • api.tx.parachainStaking.joinDelegators, this function takes two arguments
    • the address of the collator
    • the amount the user wants to stake
      • important, this is the raw(!) AMPE amount, i.e., it needs to be 1E12 times larger than the amount the user actually entered
      • here we assume that the user can only specify at most two decimals
      • in order to treat this correctly without numerical errors:
        • multiply the entered value with 100 (this should then be an integer because the user can only enter at most two decimals)
        • round the result to an integer via Math.round (which is still required because of numerical imprecision)
        • convert the resulting integer to a string
        • append the string "0000000000" (which is 12 - 2 = 10 times the digit "0")
  • this transaction then needs to be signed (through a connected wallet) and submitted to the cain
• live update about whether the transaction was successful: see here

As a stablecoin holder, I must be able to swap my stablecoins using 0xAmber swap UI.

Acceptance criteria

• In side-menu under /0xAmber
• Show a submenu Swap
• User should be able to swap his stablecoin to another one.

Wireframe

https://www.figma.com/file/5up5sghcttBogehUq4255i/App?node-id=995%3A866&t=PlifogyiiotFPIgN-0

As a portal user, I should be able to see the Portal T&Cs

Acceptance criteria

• In the side bar navigation.
• Terms should be linked to https://pendulumchain.org/legal/portal-terms-and-conditions

After connecting a wallet to the portal, and reloading the page, the wallet is automatically disconnected.

Steps to reproduce the behavior:

1. Connect a wallet
2. Check that your balance is something
3. Reload the page
4. Check that your wallet is not connected anymore and shows no balance or other functionality related to it.

The expected behavior would be to have the wallet persistent after reloading the page.

Proposed solution:
We should save the global state to (and load it from) local storage. We should also add a way of disconnecting the wallet.

Add appropriate release version to sidebar

As a holder of DOT/KSM i should be able transfer my tokens to Pendulum/Amplitude.

Acceptance criteria

• On \cross-chain
• Show a dropdown to select the token to transfer
• Then show a input field to enter the amount of tokens
• Next show two more dropdowns
  • Source chain
  • Destination chain.
• Show a button called as Transfer
• On click open a confirmation pop-up
• In pop-up show
  • Amount of tokens and the token name to be transferred
  • Source chain
  • Destination chain
  • Destination address
  • Fees
  • Confirm button
• On clicking Confirm the on-chain transaction to be executed.

Note

• For ex. I select Polkadot in the source chain dropdown then in the destination chain dropdown i must only see other options apart from Polkadot.

Wireframe

Technical Considerations

As a portal user, I should be able to see the Pendulum version of the portal when i go to portal.pendulumchain.org

Acceptance criteria

• On typing portal.pendulumchain.org in the browser url input
• I should be directed to this https://portal.pendulumchain.org/pendulum/dashboard
• Currently it directs to the Amplitude version which is not expected

Describe the bug

Currently the governance link on Pendulum version directs to this https://amplitude.polkassembly.io/

Reproduction

Steps to reproduce the behavior:

1. Go to https://portal.pendulumchain.org/pendulum/dashboard
2. Click on Governance in the side menu
3. It redirects to https://amplitude.polkassembly.io/

Expected behavior

Clicking on Governance should redirect to https://pendulum.polkassembly.io/

Not able to see AMPE balance.

Attaching screenshots for reference.

As a portal user, I must be able to see the collator list with new branding/design

Acceptance criteria

• Show two containers on the top of the collator list page
  • one for collator balance and undelegation time
  • other for claiming staking rewards
• Below these containers show the collator list with following headings
  • Collator
  • Total staked
  • Delegators
  • APY
  • My staked
• All designs/branding can be found in the wireframe attached below.

Wireframe

https://www.figma.com/file/XLIKffEYnK9autHMM1YgA3/Flows?node-id=86%3A299&t=wC9J2NkPZrSzvaHO-4

As a portal user, I should not be able to see AMM and Bridge in the side menu.

Acceptance criteria

• Dont show AMM and Bridge in the side menu
• Both the features should be accessible by typing /amm or /bridge in the url path.

As a portal user, I should be able to see the upcoming features in the side menu with a coming soon tag.

Acceptance criteria

• Show Amber, Bridge, Cross-chain options in the side menu
• Add coming soon tag to them
• Make them disabled, they should only be visible but not accessible.

As a user accessing the Pendulum Portal via the default URL, I should be directed to the "production" network: Pendulum.

TC

• When accessing https://portal.pendulumchain.org, the route should default to https://portal.pendulumchain.org/pendulum (not /amplitude)

In order to prepare for the v0.1 release, some features should be disabled/hidden:

• 1. Hide Pendulum network from network switcher dropdown and footer
• 2. Hide AMM and Bridge navigation items (route can remain)
• 3. Hide delegate buttons on collators

As a portal user, I should be able to distinguish the foucoco version of the portal from others.

• Use only rpc.pendulumchain.tech as a provider, since every time the connect() method is called in the API, it is switching the provider, so even if we add collators as second options, they will be selected often (code)
• Extract & rename mainAddres (to userAddress or something similar) from this line
• Unharcode prefix in this line. The prefix can be obtained from here. But if we don't wanna fetch that file (and prefix shouldn't change) then at least we need to define a different prefix for when we connect to Pendulum, and in general a prefix based on the name of the chain.
• Usually a // FIXME comment will include the ticket to fix the issue, but here or here it looks the other way around either remove the FIXME or create a ticket to fix it.
• remove @ts-ignore and fix the type reference here

Disclaimer: I used vscode feature -> Copy as -> Remote file url. I was standing on master. If master changed from that moment, lines may not match.

As a portal visitor, I should be able to see the dashboard and the promotions campaign.

Acceptance criteria

Promotions tab

• On /dashboard
  • Show promotions container on top of the portfolio container.
  • Show provided banners in this container
  • Banner should change every 5 secs.
  • Show action button for these banners

Wireframe

Add the following links (only) to the footer:

• Terms
• Privacy
• Wiki

As $AMPE holder, I want to undelegate my tokens from a collator.

Acceptance criteria

Undelegate tokens

• On \collators
• In the Collators container show
  • Unlock amount
  • Unlock time
• Show 'Undelegate' button next to delegated amount. Only show this button when tokens are delegated
• Clicking on this Undelegate opens a pop-up
• In pop-up show:
  • Address of the collator
  • Delegated amount
  • Show Input field to enter the amount of tokens.
    • If input value greater than delegated amount amount show error. Error message Amount Incorrect
    • If input value has more than two decimals show error. Error message Incorrect input. Only two decimals
    • Show all error messages below input field in red color.
• Show Undelegate button. On click.
  • Initiate the on-chain transaction using connected wallet.
    • On transaction failed
      • Show "Failed" pop-up
    • On transaction successful
      • if Input amount == Delegation amount
        • On transaction successful
          • Show "Successful" pop-up
          • Enable Delegate buttons of all collators and disable the Undelegate from this specific collator.
          • Amount delegated will be unlocked after 7 days from the time of transaction execution
          • Update the unlock amount in the top container of the dashboard with input amount.
          • Update the unlock time in the top container to 7 days from the time of transaction and start a countdown.

Terms used in the wireframe

• Available balance: User’s AMPE Balance
• Delegated amount: The amount delegated by the user to that collator

Notes

• All data is read only. Except buttons and input field. Which are explicitly mentioned.

Wireframe

https://www.figma.com/file/XLIKffEYnK9autHMM1YgA3/Flows?node-id=0%3A1&t=RWBKfzuRcngaIfGY-0

Technical considerations

Most of the technical consideration in issue 26 is also relevant for this issue.

Additionally:

• request information
  • determine whether the user is currently already delegating to any of the collators
    • api.query.parachainStaking.delegatorState(<user account address>)
    • this returns an object value, which contains a Boolean value.isSome
    • if value.isSome is true, then the user is currently delegating, if it is false, then the user is currently not delegating
  • the currently delegated amount and who the user is delegating to
    • if for the above value isSome is true, then you can call value.unwrap()
    • this will return an object with two members
      • owner: the address of the collator the user is delegating to, display nicely with toHuman (i.e., value.unwrap().owner.toHuman())
      • amount: the delegation amount, be aware that this is the raw amount again