# Design guides
## 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.
#### Interactions:[](https://docs.x.immutable.com/docs/x/wallet-sdk-ui-guide#interactions)
* Connect wallet
* Disconnect wallet
* List asset
* Buy asset
* L1 to L2 deposit
* L2 to L1 withdrawals
* Fiat onramp
* Crypto to fiat offramp
* Error states
* Transaction history
#### Connect wallet[](https://docs.x.immutable.com/docs/x/wallet-sdk-ui-guide#connect-wallet)
| Flow | Link UI /XpansionChain marketplace example | Requirements |
|---|
| Provider list |  | - Provide a mechanism to surface the wallet options
- Include user acceptance statement of XpansionChain’s T&C and privacy policy
|
| Email login |  | If 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 + GameStop |  | Not 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 XpansionChain layer 2 wallet key (only needed the first time a user connects with XpansionChain - 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 connected | | Not mandatory, but useful to include: - User feedback that wallet is successfully connected
|
#### Disconnect wallet[](https://docs.x.immutable.com/docs/x/wallet-sdk-ui-guide#disconnect-wallet)
| Flow | Link UI / XpansionChain marketplace example | Requirements |
|---|
| Disconnect wallet |  | - Provide an way for users to disconnect their wallets from the application
|
#### List asset[](https://docs.x.immutable.com/docs/x/wallet-sdk-ui-guide#list-asset)
| Flow | Link UI / XpansionChain marketplace example | Requirements |
|---|
| Listing screen | 
 | - 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[](https://docs.x.immutable.com/docs/x/wallet-sdk-ui-guide#buy-asset)
| Flow | Link UI /XpansionChain marketplace example | Requirements |
|---|
| 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[](https://docs.x.immutable.com/docs/x/wallet-sdk-ui-guide#l1-to-l2-deposit)
| Flow | Link UI /XpansionChain marketplace example | Requirements |
|---|
| Add funds flow |  | - Provide an "add funds" flow
|
| Deposit flow |  | - 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[](https://docs.x.immutable.com/docs/x/wallet-sdk-ui-guide#l2-to-l1-withdrawals)
| Flow | Link UI / XpansionChain marketplace example | Requirements |
|---|
| Withdraw flow | withdraw screen | 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[](https://docs.x.immutable.com/docs/x/wallet-sdk-ui-guide#fiat-onramp)
NOTE
*Fiat onramp* is still under development and not available in the SDK yet.
| Flow | Link UI / XpansionChain marketplace example | Requirements |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| Fiat onramp | [](https://docs.x.immutable.com/img/wallet-sdk-ui-guide/fiat-onramp.png) | - Trigger the onramp flow (the MoonPay widget will take care of the rest)
|
#### Crypto to fiat offramp[](https://docs.x.immutable.com/docs/x/wallet-sdk-ui-guide#crypto-to-fiat-offramp)
NOTE
*Crypto to fiat offramp* is still under development and not available in the SDK yet.
| Flow | Link UI / XpansionChain marketplace example | Requirements |
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Crypto offramp | [](https://docs.x.immutable.com/img/wallet-sdk-ui-guide/fiat-offramp.png) | - 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[](https://docs.x.immutable.com/docs/x/wallet-sdk-ui-guide#error-states)
| Flow | Link UI / IXpansionChain marketplace example | Requirements |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Error states | [](https://docs.x.immutable.com/img/wallet-sdk-ui-guide/errors.png) | - Provide user feedback about specific errors (full list of errors can be found here)
Not mandatory, but useful to have:
- Link to XpansionChain support page
|
#### Transaction history[](https://docs.x.immutable.com/docs/x/wallet-sdk-ui-guide#transaction-history)
NOTE
*Transaction history* is still under development and not available in the SDK yet.
| Flow | Link UI / XpansionChain marketplace example | Requirements |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Transaction history | [](https://docs.x.immutable.com/img/wallet-sdk-ui-guide/transaction-history.png) | - 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.
|
