Revamp connect wallet flow and design - Githubissues

pendulum-chain / portal

The Pendulum/Amplitude portal UI

GNU General Public License v3.0

1 stars 1 forks source link

Revamp connect wallet flow and design #498

Open Sharqiewicz opened 2 weeks ago

Sharqiewicz commented 2 weeks ago

What:

Show "Connect Wallet" option on the top right corner of Portal
on clicking "Connect Wallet"
- Show a modal to with all the wallet options
- User should be able to select one of the options
- on selecting, show all the available accounts from selected wallet that the user wants to connect
- User should be able to select one option our of the available wallets
- on successful connection show the "Wallet Connected" pop-up
- on closing the pop-up on the top right corner the user should be able to see the connected account
Unhappy Path
- If the user does not have the available wallet option and selects one option
- Show "Extension not installed" pop-up error
- "Download polkadot.js extension here." clicking on here show redirect to the installation page of the extension
- Links shared in the notes section
- Once the user installs, on clicking "Reconnect" redirect the user to the wallet options modal for the selection.

How:

Wallet Connect Modal:

Create a new modal for wallet connection.
📜 Display default wallets (Talisman, SubWallet, PolkadotJS, Metamask, WalletConnect, NovaWallet (mobile only)).
🧩 Show additional wallets if they are installed by the user.
⚙️ Unified account selection flow:
- 1. Choose Wallet
- 1. Display available accounts
- 1. Select an account

Refactoring:

🔄 Refactor NovaWallet connection into a hook.
🔄 Refactor Metamask connection into a hook.
🔧 Create useWalletConnection hook for managing wallet connections (excluding WalletConnect which retains its previous implementation).

Mobile fixes

🛠️ fix ChainSelector (user was not able to select the chain)
🔄 React-DaisyUI Dropdown implementation is not working. I replaced it with normal DaisyUI implementation.

⚠️ all of the Dropdown usage should be replaced i.e. in AssetSelector (now in GET AMPE/PEN user is not able to select assets)

UI Adjustments:

hide "Insufficient funds to execute transactions" tooltip on mobile
hide ChainSelector chain name on mobile (only logo will be displayed)

PR Summary is still being created...

netlify[bot] commented 2 weeks ago

Deploy Preview for rococo-souffle-a625f5 ready!

Name	Link
Latest commit	2047fcd89b16225bf65e37068325e705cc506bcb
Latest deploy log	https://app.netlify.com/sites/rococo-souffle-a625f5/deploys/6684680821c34200085a104f
Deploy Preview	https://deploy-preview-498--rococo-souffle-a625f5.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.