fuellabs / fuels-portal Goto Github PK

Objective:

make sure transaction list reacts well when account is changed inside fuel wallet
In order to reach this we want to think on scenarios that could tested making sure UX is good and stable.

Implementation:

this is my suggestion, but other scenarios can be introduced:

• When setup the test env, create 2 more accounts in the fuel wallet
• When connect to fuel wallet, connect only account 1 and account 2
• Keep executing all tests and transactions in account 1
• On this way we have:
  • account 1 - connected and has transactions
  • account 2 - connected but has no transactions
  • account 3 - not connected
• After finishing other tests (deposit, withdraw etc..), add this last test:
  • test.step("Check if transaction list reacts well to fuel wallet changes")
    • should change between accounts in the wallet and check transaction list response
      • change to account 1 should enable loading + show transactions made before
      • change to account 2 should enable loading + show empty feedback
      • change to account 3 should show "connect your wallet" (but without going to loading)

For users with multiple (many) txs they hit the rate limit of 10 requests/s for each IP. We need to implement a way to replace fetch with something that has a rate limit to queue the requests, with minimal changes.

Objective

Ensure UX experience is good and stable

Implementation

• assets showing even if accounts are disconnected
• Internal loading of dialog
• select withdraw, go to transactions, and go back to the bridge. Validate withdraw is showing correctly
• Stepper (Time left showing)
• Loading status of tx items (avoid blinking)
• data is cached correctly (done status)
• wallet still connected after refreshing

When scrolling, the header doesn't have a background.

I think the second image looks better than the first (current) one. It's subjective but putting up the suggestion.

Current

Suggestion

Note:

• Header content is slightly further to the sides
• No bridge name / heading
• Bridge / History toggle is centered
• Overall bridge menu is lower on the page

We need to refactor the test-utils package in the wallet so it can be used in other frontend projects.

Improvements:

• refactor the package to make it class based instead of a file of functions?
• add account
• add network
• make the functions more robust (ex: work even when the wallet page is not at the default page)

This issue should;

• Create a connect button to connect to Fuel Wallet
• Open a modal to select the wallet provider
• Add hooks to work with the data from the connected accounts

FRO-5

User Story: As an end user, I shall be able to connect my Ethereum account(s) and switch between them to easily interact with the platform using my preferred wallet provider and account.

Acceptance Criteria:

1. If no account is connected, a "Connect Wallet" button should be displayed.
2. When the "Connect Wallet" button is clicked, a popup should appear listing the main Ethereum wallet providers.
3. Users should be able to select a wallet provider and connect multiple accounts.
4. After connecting an account, the "Connect Wallet" button should be replaced with a button displaying the current address.
5. When the current address button is clicked, a popup should open, allowing users to switch between connected accounts.
6. The popup should also include a button to connect more accounts.
7. The ETH Network Component should utilize the Wagmi library to support multiple wallet providers simultaneously.
8. The base component should abstract the layout to be reused for the Fuel Network Component.

ConnectNetwork/idle - Fuel Portal Product Board (Figma)

If a user attempts to deposit an erc20 token to fuel with no eth on the fuel side they will get an error "not enough resources to fit…". The error message instead should be something like "Error: erc20 deposit requires eth on Fuel. Please faucet/deposit eth into your fuel wallet.

I started to experience an issue on the current version, with an account connected with a transaction on the history already cached, if I refresh the page the history is not loaded and the screen is stuck empty.

This may be a misunderstanding, perhaps it's only meant to add it to only MetaMask.

When I try to add the TKN to my wallet it only gets added to MetaMask.

This may be related to the following issue: ref #203

On the bridge deposit and withdrawal there are too many first action buttons.

Problem:

As a user I'm confused which one to click first (as there are three highlighted potential actions).

Potential Solution:

Highlight the first connect button for each flow, then disable the others until the first required connect action is completed.

This way the user has less to think about when they come to the flow.

Further Idea:

The last connect button should just be the final deposit / withdraw button disabled, having it as a third connect button in the initial state seems confusing.

make the loading state on the tx list be active for a 200 ms minimum. This will avoid blinking loading too fast and allow us to include loading in the e2e tests again

We should use the wallet test-utils package for testing in the bridge.

FRO-1

As the design system is being updated need to implement the new changes on the Bridge UI, changing the layout wrapper component.

nav-white - Fuel Portal Product Board (Figma)

FRO-12

User Story: As a user, I shall be able to track the progress of my deposit through a series of processing steps, so that I am aware of the status of my deposit until it is completed.

Acceptance Criteria:

1. Each processing step should have three statuses: open, pending, and complete.
2. The following steps should be displayed with their respective statuses:
   1. Receiving Deposit:
      1. Open: Before the deposit is submitted.
      2. Pending: When the transaction is pending confirmations on the ETH Network.
      3. Complete: Transaction has confirmations on the ETH Network.
   2. Settlement:
      1. Open: Before the previous step is complete.
      2. Pending: When the previous step is complete, and now we are in the 15-minute waiting period.
      3. Complete: When the message is received on the Fuel Network side.
   3. Confirm transaction (Automatic):
      1. Open: Before the previous step is complete.
      2. Pending: After the previous step is complete.
      3. Complete: After the message is relayed on the Fuel Network and the assets are transferred to the receiver account on Fuel.
   4. Receive funds (Automatic):
      1. Open: Before the previous step is complete.
      2. Pending: After the previous step is complete.
      3. Complete: When the amount is received in the account on Fuel.

Additional Requirements:

1. For tracking ETH transactions, use the ETH provider to query events and transaction IDs, as well as the ETH Account address.
2. For tracking Fuel transactions, use the Fuel Network GraphQL or, if needed, build an indexer.

Frame 34321 - Fuel Portal Product Board (Figma)

Create the base layout with the following;

• Colors

• Header

  • Logo
  • Links
  • Account Button (just a mock button)
  • Settings Icon

• Router render

  • Active link based on router
  • Content router render

  Figma: https://www.figma.com/file/hfXiD4CKj4quG2ro9pbRW1/Launch-Portal?node-id=404-96077&t=UT5cTKfJJbdFY1yo-4

show the overall portal steps
Deposit -> Withdraw

The tx machine is skipping over getReceipts bc the tx is marked as done.

FRO-13

User Story: As a user, I shall be able to withdraw ETH to the Ethereum Network, so that I can move my assets out of the Fuel ecosystem and utilize them elsewhere.

Acceptance Criteria:

1. The button on the form should display different states based on the form's current status: a. Connect Fuel Wallet: When no Fuel account is connected. b. Connect ETH Wallet: When no ETH account is connected. c. Pick Asset and Amount: When no Asset or Amount is inserted. d. Insufficient Funds: When the inserted amount is bigger than the Fuel Account balance. e. Withdraw Asset: When all requirements are met.
2. The withdrawal script should be executed with the user-selected amount upon clicking withdraw.
3. Display a warning below the amount input: "You will need to have ETH on the Account on Ethereum Network to pay for the confirmation transaction."
4. After user approval, the Withdraw Processing Steps Component should be displayed.
5. Users should see a warning below the entire form with the text: "Withdraw can take up to 7 days to be available back to Ethereum. Learn more about our architecture and security in our docs."

Frame 106 - Fuel Portal Product Board (Figma)

Preview deposit tx details.

• estimate gas from ETH
• amount received on Fuel
• eta of transfer (start with 10min hardcode)

Should change the stepper text after completion

Add a button directing to a Typeform allowing new project submissions

We currently use the wallet sdk isConnected function to check if the current account is connected, but this is not what that function does.

We cannot bridge the TKN to Fuel.

When approving the following error occurs so the bridge is stuck.

FRO-10

User Story: As a user, I shall be able to deposit ETH on the Fuel network so that I can utilize my assets within the Fuel ecosystem.

Acceptance Criteria:

1. The button on the form should display different texts based on the form's current state:

   a. Connect ETH Wallet: When no ETH account is connected.

   b. Connect Fuel Wallet: When no Fuel account is connected.

   c. Pick Asset and Amount: When no Asset or Amount is inserted.

   d. Insufficient Funds: When the inserted amount is bigger than the ETH Account balance.

   e. Bridge Asset: When all requirements are met.

2. Upon clicking deposit, a transaction should be created to the FuelPortal contract, executing the deposit script with the user-selected amount.

3. After user approval, the Processing Steps Component should be displayed.

4. Users should see a warning below the form with the text: "Any assets deposited to Fuel takes 7 days to withdraw back to Ethereum. Learn more about our architecture and security in our docs."

Additional Requirements:

1. The deposit script can be found in the scripts folder; all contract IDs should be placed in environment variables.
2. If possible, gas cost estimation should use ETH gas estimation; if not, this part can be removed.

Frame 106 - Fuel Portal Product Board (Figma)

As a new user that wants to use the bridge I must install 2 non-custodial wallets.

• A wallet of my choice for Ethereum (MetaMask)
• A wallet of my choice for Fuel (official Fuel wallet)

Upon successful installation of the wallets I would like to connect the wallets to the bridge.
In order to connect I click the respective "connect <wallet>" buttons.

The same pop-up to install wallets comes up because the site has not recognized that I have installed the wallets. In order to make the feature work as expected I had to refresh the page.

Upon refreshing the page clicking the "connect <wallet>" button prompted the pop-ups requesting connection and thus behaving as expected.

Private Zenhub Image

The current AmountInput does not support showing the asset information. The idea here is to add a button inside the input to enable the feature the click on the button to open a selector.

The Input should follow the swayswap style;

Add to the button;

• Button with icon and symbol
• If not asset is passed not show the button
• If the Input is disabled, the button should be disabled
• If not onClickAsset is passed, the button is disabled
• Add props to the component
  • onClickAsset?:
  • asset?:

FRO-3

Preview tx details

• estimate gas on fuel
• amount received on eth
• estimate gas on eth
• eta transfer (start with hardcoded estimate 10min)

Should change stepper text after completion

This issue should;

• Create a connect button to connect to ETH wallets
• Use wagmi as a lib for connecting multiple accounts
• Open a modal to select the wallet provider
• Add hooks to work with the data from the connected accounts

Show the current address selected for the operation
Have an arrow dropdown that enables to switch to other accounts - on the bottom show the link to connect other accounts

Prepare the repo to run the entire fuel environment with bridge and L1.
Ref.: https://github.com/FuelLabs/fuel-dev-env

Avoid the first request by caching it if the transaction is "settled".

when blocked by issue is fixed, we will be able to replace the DAheight workaround and use the endpoint, which will be more safe. on that way we can detect if the message for the depositNonce was arrived on fuel side, even if it's spent
Linear -> FRO-484

Blocked by FuelLabs/fuel-core#1323

avoid first request by caching it if transaction is "settled"

One word adjustment.

The text says that the wallet is not "detected" which has a different implication from not being "connected".

I think it would be better to change "detected" to "connected" here.

FRO-14

User Story: As a user, I shall be able to track the progress of my withdrawal through a series of processing steps so that I am aware of the status of my withdraw until it is completed.

Acceptance Criteria:

1. Each processing step should have three statuses: open, pending, and complete.
2. The following steps should be displayed with their respective statuses:
   1. Submit Withdrawal:
      • Open: Before the withdrawal is submitted.
      • Pending: When the transaction is pending confirmations on the Fuel Network.
      • Complete: Transaction has confirmations on the Fuel Network.
   2. Withdrawal Settlement:
      • Open: Before the previous step is complete.
      • Pending: When the previous step is complete, we are in the 7-day waiting period.
      • Complete: When the message is received on the ETH Network side.
   3. Confirm transaction (Manual):
      • Open: Before the previous step is complete.
      • Pending: After the previous step is complete, the user must manually confirm the transaction.
      • Complete: After the message is relayed on the ETH Network, the assets are transferred to the receiver account on ETH.
      • User Interaction: When the Confirm transaction step is open, the user should be able to click on a "Confirm transaction" button that will execute the relay transaction on the Ethereum Network.
   4. Receive funds (Automatic):
      • Open: Before the previous step is complete.
      • Pending: After the previous step is complete and the transaction for confirmation is pending confirmation.
      • Complete: When the transaction is confirmed, and the amount is received in the account on ETH.

Additional Requirements:

1. For tracking ETH transactions, use the ETH provider to query events and transaction IDs, as well as the ETH Account address.
2. For tracking Fuel transactions, use the Fuel Network GraphQL or, if needed, build an indexer.

Frame 34321 - Fuel Portal Product Board (Figma)