Skip to main content

UI guide for implementing user wallet interactions

This guide is aimed at providing clarity on the minimum requirements when implementing user wallet connections and interactions.

Previously, applications using the Link SDK did not have to worry about this because the Link SDK provided an opinionated UI that implemented our best practices. Now, when using the Core SDK with the Wallet SDK, applications may need to implement their own design. Other than the must-haves outlined in this guide, the rest is up the application.

User interactions

Connect wallet

FlowLink UI / Immutable marketplace exampleRequirements
Provider listProvider List
  • Provide a mechanism to surface the wallet options
  • Include user acceptance statement of Immutable’s T&C and privacy policy
Email loginEmail LoginIf an application chooses to provide the email wallet (provided by Magic) as an option, it must:
  • Provide a field for the user to enter their email address
  • Include Magic’s T&C and privacy policy
MetaMask + GameStopSignature RequestNot mandatory, but useful to include:
  • An explanation of why there are multiple signature requests from the non-custodial wallet for:
    • Connecting to a user wallet
    • Requesting for the user's signature
    • Setting up an Immutable X layer 2 wallet key (only needed the first time a user connects with Immutable X - this is user registration)
  • If MetaMask and GameStop are both provided as wallet options, explain that having both plugins at the same time can create wallet connection issues (more information available here)
Wallet connectedNot mandatory, but useful to include:
  • User feedback that wallet is successfully connected

Disconnect wallet

FlowLink UI / Immutable marketplace exampleRequirements
Disconnect walletDisconnect Wallet
  • Provide an way for users to disconnect their wallets from the application

List asset

FlowLink UI / Immutable marketplace exampleRequirements
Listing screenList asset 1
List asset 2
  • Enable the user to input their listing price
  • Enable the user to select their listing currency (if multiple options are provided)
  • Provide breakdown of any maker and taker fees that apply
Not mandatory, but useful to have:
  • Processing indicator when the user has initiated listing an asset and the transaction has not yet completed
  • Feedback when an asset has successfully been listed

Buy asset

FlowLink UI / Immutable marketplace exampleRequirements
Asset screenBuy Asset Screen
  • Display the purchase price
  • Display the purchase currency
  • Provide breakdown of any maker and taker fees that apply
Not mandatory, but useful to have:
  • User feedback that purchase was successful
  • Send users to an "add funds" flow if they have insufficient funds

L1 to L2 deposit

FlowLink UI / Immutable marketplace exampleRequirements
Add funds flowAdd Funds
  • Provide an "add funds" flow
Deposit flowDeposit Screen
  • Provide a field for the user to input the currency type
  • Provide a field for the user to input the amount they want to deposit
Not mandatory, but useful to have:
  • Icons representing different currency types
  • Available L1 balance to be deposited
  • Feedback when a deposit is successful

L2 to L1 withdrawals

FlowLink UI / Immutable marketplace exampleRequirements
Withdraw flowWithdraw Screen
Withdraw Confirmation
Partner must
  • Surface withdrawal flow
  • Collect currency type (assuming multiple currencies available to be withdrawn)
  • Collect amount to be withdrawn
Useful to have:
  • Icon for different currency types
  • Available L2 balance to be deposited
  • Notice that withdrawal will require L1 gas to be paid
  • Notice that withdrawal has 2 stage: preparation & execution of withdrawal (more information available here)

Fiat onramp

note

Fiat onramp is still under development and not available in the SDK yet.

FlowLink UI / Immutable marketplace exampleRequirements
Fiat onrampAdd Funds
  • Trigger the onramp flow (the Moonpay widget will take care of the rest)

Crypto to fiat offramp

note

Crypto to fiat offramp is still under development and not available in the SDK yet.

FlowLink UI / Immutable marketplace exampleRequirements
Crypto offrampWithdraw to bank account
  • Trigger the offramp flow (the Moonpay widget will take care of the rest)
Not mandatory, but useful to have:
  • A note informing the user that the Moonpay offramp is only available to users in the US, UK, and EU.

Error states

FlowLink UI / Immutable marketplace exampleRequirements
Error statesError screens
  • Provide user feedback about specific errors (full list of errors can be found here)
Not mandatory, but useful to have:
  • Link to Immutable support page

Transaction history

note

Transaction history is still under development and not available in the SDK yet.

FlowLink UI / Immutable marketplace exampleRequirements
Transaction historyTransaction history screen
  • Provide users with the ability to view their transaction history
  • For each transaction, they must provide information about the transaction ID, asset details, type of transaction and the costs involved.