Todo for designer based on user feedback on Discord channel

The change value should be updated to the percentage change between the latest NAV and the oldest nav for a specific timeframe.

For example: 1D timeframe change is (latestNAV - dailyTimeframeOldestNav)/dailyTimeframeOldestNav * 100

Currently, MyAssetCard show amount and total using toFixed.

Update the display using tokenBalanceFormatter

Current: User need to click to open the dropdown menu
Expected: This dropdown menu should be shown while hovering.

It should be zero

This issue can be reproduced by accessing the Product Detail Page via Safari/Chrome on iOS.
When we tap the price or asset card, a blue border box will be shown like this:

Safari:

Chrome:

Currently it only support Metamask, we should support wallet connect to at the minimum.

change /invest to /products

Check the amount first before submitting the tx

Fix broken links on the homepage, esp in the feature cards

The Risedle USDC Vault page should contains the following information:

1. APY History
2. Total available cash
3. Utilization rate history

We need to create new service to record all the data first, so FE team can simply query the data.

Green

• Stroke: #18794E
• Background: linear-gradient(180deg, rgba(37, 208, 171, 0.4) 0%, rgba(37, 208, 171, 0) 100%)
• Opacity: 20%

Red:

• TBD

Currently there is no disconnect button on mobile menu:

• Add disconnect button below the docs menu
• Disconnect button only show up when the user wallet is connected

The existing open graph looks a bit flat. I try to make it more standout 🙂

The assets can be grabbed in here: https://drive.google.com/file/d/1E1VOSfb7BjM-pR7QiJk1276l7HOmY-du/view?usp=sharing

When I'm interacting with an action that triggers a toast, the toast won't disappear until I reload the page. Is the duration already set up in the component?

The current product detail page is very simple.

We can add more information such as:

1. Available to mint
2. Nav history price
3. The total managed collateral and its cap (similar to Ribbon finance vault)
4. Information about rebalancing etc

Currently, leveraged token chart is loading data from two different sources:

1. The latest NAV data from the chain https://github.com/risedle/interface/blob/v1/components/v1/MarketDetailPage/LeveragedTokenChart.tsx#L24
2. Historical NAV data from the snapshot API https://github.com/risedle/interface/blob/v1/components/v1/MarketDetailPage/LeveragedTokenChart.tsx#L27

The current approach is using the following step:

1. If the (1) and (2) data is error or loading, then display skeleton chart https://github.com/risedle/interface/blob/v1/components/v1/MarketDetailPage/LeveragedTokenChart.tsx#L57
2. Otherwise display the data.

It have a few drawbacks:

1. Skeleton might show too long if the network is slow
2. If one of the source is error, it will display the skeleton forever.

To solve this, we need to separate the loading information.

Instead of using one UI states variable showSkeleton, we can use different UI states variable:

1. For NAV: navResponse.isLoading, navResponse.data, navResponse.error
2. For Chart: data.loading, data.data, data.error

If data (2) is loaded first, then we display the chart directly instead of waiting data (1) to resolve.

Here is the visualiation before & after:

Description

When user connect their wallet and if their wallet is connected to unsupported network, the user should be redirected to /networks to select the network.

When user click one of the network, user's wallet should pop up and prompt user to switch the network.

Minor update, Product icon. Asset can be grabbed in here:

• https://www.figma.com/file/t4BnIO0LHqk10vmKZ4kRV4/Website-%E2%80%93-1.0?node-id=585%3A20439

Currently, if user is connected via WalletConnect, they cannot switch network automatically due to behaviour of WalletConnect. If the user click "Switch Network" it will toast an error.

Here is what we want to achieve:

1. When user click the swtich network, it will display new QR code.
2. When user scan the QR code, user will automatically switched to the network

When the user click three-dots button (top right conner).

The user should be able to see the following links:

1. Twitter
2. Discord
3. Documentation

Current version:

Expected version:

Create branch based on v1 branch and send PR to v1 branch

Maybe related to above, when I followed the below steps, UI showed strange behaviour as shown in below gif.

1. Cancel mint transaction
2. Close the Mint page
3. Re-open the mint page
4. Set the input amount using the slider
5. Click Mint
   ryu_hashi

The "not enough balance" should work on the following form:

1. MintForm
2. RedeemForm
3. DepositForm
4. WithdrawForm

The user should be able to see the 30d price change from the /invest page.

To do this, we need to create new service called risedle-price-history so the FE team can simply query the data.

Change /lend to /vault

When u have connected your wallet you will see the following:

If you click disconnect, your wallet will be disconnected.

But if you refresh the page, your account is still connected.

The wallet should be disconnected.

Suggestion, can we create entrance animation like this for every popup in the Risedle Interface?

Prototype Playground:

• https://www.figma.com/proto/t4BnIO0LHqk10vmKZ4kRV4/Website-%E2%80%93-1.0?node-id=1009%3A31926&viewport=360%2C48%2C0.26&scaling=scale-down&starting-point-node-id=1548%3A59883&show-proto-sidebar=1

For library I think we can use this https://motion.dev/ for animating component

Already provided the portfolio page design in Figma.
The data that will be shown are:

• Overall Asset
• The leverage token asset section
• The vault token asset section

Each asset will have this:

• Amount (how many tokens they hold)
• Value (how much the token is valued in USD
• Return (Shown in USD value)

Expected desktop:

Design file:
Portfolio page design

Update the tooltip timestamp format to 20 Jan 2022, 9:00 PM

Minor update for popup/dropdown menu component. The update:

• Rounded: adjusted to 8px
• States for Hover, Pressed, etc
• On desktop: Show menu on hover (current, user need to click it)

Design component can be seen here:

• https://www.figma.com/file/t4BnIO0LHqk10vmKZ4kRV4/Website-%E2%80%93-1.0?node-id=1546%3A52432

Prototype Playground:

• https://www.figma.com/proto/t4BnIO0LHqk10vmKZ4kRV4/Website-%E2%80%93-1.0?node-id=486%3A18639&viewport=288%2C48%2C0.16&scaling=min-zoom&starting-point-node-id=797%3A29583&show-proto-sidebar=1

Currently it display the underlying amount using toFixed, update to use tokenBalanceFormatter

The new contract support minting ETHRISE using ETH directly.

Update the ETHRISE minting page to use ETH.

Currently ConnectWalletMobile component uses headless-ui. Migrate it to use radix-ui.

Here is the example of usage: https://github.com/risedle/interface/blob/v1/components/v1/MarketDetailPage/ButtonMintOrRedeem.tsx

When the link is clicked, it should open new tab

When DepositForm component is mounted, we fetch the following onchain data:

1. The USDC balance of the user source
2. The USDC to rvUSDC exchange rate source

Currently this fetching process is blocking the whole form.

If the balance data is loaded, I think we can savely load the form then display exchange rate calculation as loading.

Github actions that run prettier --check and npm run deploy on every merge request.

Report from our community:

Hi, on Mint page, when I chose "MAX", the input amount became invisible. I think the font colour become the same colour as background as shown below. When I manually moved the slider, it worked fine.
ryu_hashi

This form need to be checked:

1. MintForm
2. RedeemForm
3. DepositForm
4. RedeemForm

Currently ConnectWalletDesktop component uses headless-ui. Migrate it to use radix-ui.

Here is the example of usage: https://github.com/risedle/interface/blob/v1/components/v1/MarketDetailPage/ButtonMintOrRedeem.tsx

I also noticed that when I cancel the first mint transaction, then mint again(keeping the mint window open), the second transaction became very slow, meaning it took very long time until the metamask showed up(it was not slow for first mint)
ryu_hashi

This need to be checked:

1. MintForm
2. RedeemForm
3. DepositForm
4. WithdrawForm

More obvious

In the Changes section, we add USD equals value. In the current version, we just show the percentage.

Here's the expected design:

When the user click three-dots button (top right conner).

The user should be able to see theme switcher.

Description

User should be able to switch to supported networks:

1. Kovan
2. Arbitrum Mainnet

How it works

When user click the network name:

the user should directed to /networks.

/networks contains a list of networks.

When user click one of the network, the network wallet should be switched to that network.

Scenario that can make minting process failed:

1. Total available USDC supply is not enough
2. There is high slippage when converting USDC to the collateral token

Scenario that can make redeeming process failed:

1. There is high slippage when converting collateral token to USDC

Scenario that can make depoist USDC process failed:

1. Cap is reached

Scenario that can make redeeming USDC process failed:

1. There is no available cash

In the My Asset section, we add Return and Return Total Value.

• Return: Show profit/loss percentage
• Return total value: Show profit/loss in USD value

Expected:

Figma Link:
Product Detail Page design

Latest design improvement for transactions modal.

background:

• Users find it hard to use the transaction modals
• There's a new case that need to be handled for the gOHMRISE.

Figma:
https://www.figma.com/file/t4BnIO0LHqk10vmKZ4kRV4/Website-%E2%80%93-1.0?node-id=1791%3A152042

When user:

1. Mint leverage token
2. Redeem leverage token
3. Deposit USDC
4. Redeem rvUSDC

They should be able to quickly fill the amount form using pre-defined button.

Here is the example from Abracadabra