Account unification - avatar selection #975

bobo-k2 · 2023-10-16T08:59:31Z

Pull Request Summary

This PR implements an option to select a NFT as unified account icon

Send me a message with your evm address do I can mint some test NFTs for your

Check list

* Fix for provider not set or invalid error * Don't use gas station on Shibuya * fix: disabled transaction speed ui for Shibuya EVM (#971) --------- Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>

* Lockdrop logic removed * more lockdrop removed (#957) * fix: fetch dApps staking data after changing accounts (#955) * fix: fetch staked dapps data for EVM wallets * fix: clean up * fix: position for page column * Account unification (#925) * Unification service skeleton * Started with unify account implementation * Unifiy account implemented - not working * It works * Error handling * Mapped accounts getter functions * Set identity logic (#931) * Create and update identity * Update identity works * NFT metadata fetch * Account unification batch call * Comment * Native asset transfer support for unified accounts (#938) * Native token transfer * Use unified SS50 for dApps staking * getIdentity fix * Update NFT repo to use Token API endpoints * Update test call * feat: added AccountUnification modal (#935) * feat: added AccountUnification modal * Add UI modals for account unification * refactor: ModalConnectWallet * Remove the wallet connect section on the user account modal * Add type * Add NFT select modal * Add unify accounts icon button on the asset page * Add dark theme, replace tailwind css to pure css * remove body tag from style * Replace rem to px * Add styles for mobile screens * Add static texts * Adjust styles * Update help * feat: implemented logic in the ‘account unification’ modal (#936) * feat: load the evm account from metamask * feat: checks the staking info * refactor: clean up * feat: added close modal in step 2 * feat: removed account name input * rollback: account name * feat: added XC20 tokens which are required to transfer to unified account * feat: updated 'accountName' logic * feat: added jazzicon in Step 3 * adjust class naming rule * clean up * test: refactor useAccountUnification.ts * fix: allow AU on local node * test: refactor useAccountUnification.ts (2) * test: refactor useAccountUnification.ts (3) * Fix media query * Use i18n * Add help texts using i18n --------- Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com> * Fix for reading staking data from UA (#942) * Fix for reading staking data from UA * Removed unnecessary store read * Account unification call refactoring * Adjust the checkbox position * UA logic integration (#943) * Basic integration implemented * Disable submit button on action * Rename from Step to AuStep * use i18n * add the emojis to i18 file * feat: transfer XC20 tokens to the unified SS58 account (#944) * feat: transfer XC20 tokens to unified SS58 account * feat: transfer XC20 tokens to unified SS58 account (2) * feat: added XCM tokens on shibuya * feat: added XCM tokens on shibuya (2) * refactor: clean up * fix: updated receiving faucet account * Accounts - show UA name and modal (#948) * fix: account unification modals (#953) * fix: connect MetaMask after users click connect button * fix: updated words * feat: added a check input for sending submit transaction * fix: words * fix: getMappedNativeAddress and getMappedEvmAddress functions * Fix for breaking changes on Shibuya (#958) * Moonfit added (#937) (#939) * Uplift to the latest Quasar version (#940) * feat: updated XCM with equilibrium to V3 (#946) * fix: let space wrap and height grow for cards in banner (#947) * let space wrap and height grow * minimum width added, aligned bottom * Remove lockdrop (#951) * hotfix: update the hotfix branch (#920) * fix: rollback * fix: update ci yml files * Lockdrop switch removed * Removed toggleEvmWalletSchema --------- Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com> * fix: fetch dApps staking data after changing accounts (#955) * fix: fetch staked dapps data for EVM wallets * fix: clean up * fix: position for page column * Methods naming fix top match the latest runtime upgrade --------- Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com> Co-authored-by: Gregory Luneau <greg@astar.network> * Display unification costs (#959) * Display unification costs * Limit account length * fix: updated sending ERC20 tokens logic and displaying the destination balance for EVM address (considering deducting staked amount) * fix: odd space issue * Display and edit unified account (#963) * Display unified account details * Edit unified account * Cleanup * Update src/components/header/modals/account-unification/AuStep3.vue Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com> --------- Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com> --------- Co-authored-by: impelcrypto <impelcrypto@gmail.com> Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com> Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com> Co-authored-by: Gregory Luneau <greg@astar.network> * Fix for provider not set or invalid error (#970) * Fix for provider not set or invalid error * Don't use gas station on Shibuya * fix: disabled transaction speed ui for Shibuya EVM (#971) --------- Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com> --------- Co-authored-by: Gregory Luneau <greg@astar.network> Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com> Co-authored-by: impelcrypto <impelcrypto@gmail.com> Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>

* add snap to native wallet options * Compilation errors fix * Fix for compilation errors fix * snap utils * no extra line * inject * extension listed * 3rd time is the charm * feat: updated UI logic for the MetaMask snap (#941) * fix: connect to metamask snap smoothly * fix: allow the snap only on Shibuya, moved snapUtils to the snap module * fix: updated loading animation * fix: display accounts after users add Astar and Polkadot Snap (#949) * fix: enable MetaMask snap only in dev mode (#952) * remove console logs * remove unused code * remove unused ethereum provider * Update ModalConnectWallet.vue * Update useAccount.ts * fix: enable snap in staging * fix: build error * using astar npm * correct snapId --------- Co-authored-by: Bobo <bobo.kovacevic@gmail.com> Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com> Co-authored-by: impelcrypto <impelcrypto@gmail.com>

* Lockdrop logic removed * more lockdrop removed (#957) * fix: fetch dApps staking data after changing accounts (#955) * fix: fetch staked dapps data for EVM wallets * fix: clean up * fix: position for page column * Account unification (#925) * Unification service skeleton * Started with unify account implementation * Unifiy account implemented - not working * It works * Error handling * Mapped accounts getter functions * Set identity logic (#931) * Create and update identity * Update identity works * NFT metadata fetch * Account unification batch call * Comment * Native asset transfer support for unified accounts (#938) * Native token transfer * Use unified SS50 for dApps staking * getIdentity fix * Update NFT repo to use Token API endpoints * Update test call * feat: added AccountUnification modal (#935) * feat: added AccountUnification modal * Add UI modals for account unification * refactor: ModalConnectWallet * Remove the wallet connect section on the user account modal * Add type * Add NFT select modal * Add unify accounts icon button on the asset page * Add dark theme, replace tailwind css to pure css * remove body tag from style * Replace rem to px * Add styles for mobile screens * Add static texts * Adjust styles * Update help * feat: implemented logic in the ‘account unification’ modal (#936) * feat: load the evm account from metamask * feat: checks the staking info * refactor: clean up * feat: added close modal in step 2 * feat: removed account name input * rollback: account name * feat: added XC20 tokens which are required to transfer to unified account * feat: updated 'accountName' logic * feat: added jazzicon in Step 3 * adjust class naming rule * clean up * test: refactor useAccountUnification.ts * fix: allow AU on local node * test: refactor useAccountUnification.ts (2) * test: refactor useAccountUnification.ts (3) * Fix media query * Use i18n * Add help texts using i18n --------- Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com> * Fix for reading staking data from UA (#942) * Fix for reading staking data from UA * Removed unnecessary store read * Account unification call refactoring * Adjust the checkbox position * UA logic integration (#943) * Basic integration implemented * Disable submit button on action * Rename from Step to AuStep * use i18n * add the emojis to i18 file * feat: transfer XC20 tokens to the unified SS58 account (#944) * feat: transfer XC20 tokens to unified SS58 account * feat: transfer XC20 tokens to unified SS58 account (2) * feat: added XCM tokens on shibuya * feat: added XCM tokens on shibuya (2) * refactor: clean up * fix: updated receiving faucet account * Accounts - show UA name and modal (#948) * fix: account unification modals (#953) * fix: connect MetaMask after users click connect button * fix: updated words * feat: added a check input for sending submit transaction * fix: words * fix: getMappedNativeAddress and getMappedEvmAddress functions * Fix for breaking changes on Shibuya (#958) * Moonfit added (#937) (#939) * Uplift to the latest Quasar version (#940) * feat: updated XCM with equilibrium to V3 (#946) * fix: let space wrap and height grow for cards in banner (#947) * let space wrap and height grow * minimum width added, aligned bottom * Remove lockdrop (#951) * hotfix: update the hotfix branch (#920) * fix: rollback * fix: update ci yml files * Lockdrop switch removed * Removed toggleEvmWalletSchema --------- Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com> * fix: fetch dApps staking data after changing accounts (#955) * fix: fetch staked dapps data for EVM wallets * fix: clean up * fix: position for page column * Methods naming fix top match the latest runtime upgrade --------- Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com> Co-authored-by: Gregory Luneau <greg@astar.network> * Display unification costs (#959) * Display unification costs * Limit account length * fix: updated sending ERC20 tokens logic and displaying the destination balance for EVM address (considering deducting staked amount) * fix: odd space issue * Display and edit unified account (#963) * Display unified account details * Edit unified account * Cleanup * Update src/components/header/modals/account-unification/AuStep3.vue Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com> --------- Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com> --------- Co-authored-by: impelcrypto <impelcrypto@gmail.com> Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com> Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com> Co-authored-by: Gregory Luneau <greg@astar.network> * Fix for provider not set or invalid error (#970) * Fix for provider not set or invalid error * Don't use gas station on Shibuya * fix: disabled transaction speed ui for Shibuya EVM (#971) --------- Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com> --------- Co-authored-by: Gregory Luneau <greg@astar.network> Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com> Co-authored-by: impelcrypto <impelcrypto@gmail.com> Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>

* add snap to native wallet options * Compilation errors fix * Fix for compilation errors fix * snap utils * no extra line * inject * extension listed * 3rd time is the charm * feat: updated UI logic for the MetaMask snap (#941) * fix: connect to metamask snap smoothly * fix: allow the snap only on Shibuya, moved snapUtils to the snap module * fix: updated loading animation * fix: display accounts after users add Astar and Polkadot Snap (#949) * fix: enable MetaMask snap only in dev mode (#952) * remove console logs * remove unused code * remove unused ethereum provider * Update ModalConnectWallet.vue * Update useAccount.ts * fix: enable snap in staging * fix: build error * using astar npm * correct snapId --------- Co-authored-by: Bobo <bobo.kovacevic@gmail.com> Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com> Co-authored-by: impelcrypto <impelcrypto@gmail.com>

github-actions · 2023-10-16T14:10:13Z

Visit the preview URL for this PR (updated for commit 8858cfc):

https://astar-apps--pr975-feat-au-nft-avatar-45tl7b7u.web.app

_{(expires Tue, 31 Oct 2023 06:54:27 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: dd76fe72958fe2910fef9d53f0b4539b82b849db}

impelcrypto · 2023-10-16T17:26:34Z

@bobo-k2
Please send some NFTs to 0x4184C9f4dF0Ab75F3A8ab337Fc07BDF7b17a7918. Thanks.

src/components/header/modals/account-unification/SelectNft.vue

src/components/header/modals/ModalAccountUnification.vue

bobo-k2 · 2023-10-16T19:20:44Z

0x4184C9f4dF0Ab75F3A8ab337Fc07BDF7b17a7918

Sent

impelcrypto · 2023-10-17T07:10:21Z

Perhaps display some words (like 'loading...') while fetching the NFTs?

impelcrypto · 2023-10-17T07:11:29Z

Let's display something like 'There are no NFTs found' if the account doesn't have NFTs.

bobo-k2 · 2023-10-17T08:45:39Z

Let's display something like 'There are no NFTs found' if the account doesn't have NFTs.

There is a message if no NFTs. In case above there is something found, but it looks wrong. Please share details how to reproduce the error (evm address)

bobo-k2 · 2023-10-17T08:48:21Z

Perhaps display some words (like 'loading...') while fetching the NFTs?

Fetching NFTs metadata from API is fast. Loading images into browser can take some time, because NFT images are quite big. Since this is under a browser control I will see if I can do something. There should be some events on img tag

impelcrypto · 2023-10-17T14:49:00Z

There is a message if no NFTs. In case above there is something found, but it looks wrong. Please share details how to reproduce the error (evm address)

hmm... I can't reproduce the issue again.

Yes, this is good!

gluneau · 2023-10-18T02:44:52Z

Editing an existing Unified account when there is no NFT chosen yet.

gluneau

LGTM except for the comment about the NFT picture not showing up on edit.

bobo-k2 · 2023-10-19T06:58:52Z

LGTM except for the comment about the NFT picture not showing up on edit.

Thanks for the review. Fixed the issue in c4cb432

bobo-k2 added 7 commits October 13, 2023 08:29

useNft hook

97eee52

Select and display NFT avatar

6e3a6cc

Read avatar url

064fc6d

Avatar selection done

693ec42

Removed Bluez url

305c882

Code cleanup and refactoring

73bc1b8

Show avatar on unification overview

9aa84a1

bobo-k2 requested review from impelcrypto, Kahonnohak and gluneau October 16, 2023 13:41

bobo-k2 and others added 7 commits October 16, 2023 15:47

Fix for provider not set or invalid error (#970)

8e8b492

* Fix for provider not set or invalid error * Don't use gas station on Shibuya * fix: disabled transaction speed ui for Shibuya EVM (#971) --------- Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>

Merge branch 'main' into feat/au-nft-avatar

c069478

Merge

81fc304

bobo-k2 marked this pull request as ready for review October 16, 2023 14:13

Removed unused variables

acffba3

impelcrypto requested changes Oct 16, 2023

View reviewed changes

src/components/header/modals/account-unification/SelectNft.vue Show resolved Hide resolved

src/components/header/modals/ModalAccountUnification.vue Outdated Show resolved Hide resolved

Enum for unification steps

63a6481

impelcrypto self-requested a review October 17, 2023 14:52

impelcrypto approved these changes Oct 17, 2023

View reviewed changes

gluneau approved these changes Oct 18, 2023

View reviewed changes

Bug fix for avatar broken image

c4cb432

Merge branch 'main' into feat/au-nft-avatar

8858cfc

bobo-k2 merged commit ba55301 into main Oct 24, 2023
6 checks passed

bobo-k2 deleted the feat/au-nft-avatar branch October 24, 2023 10:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Account unification - avatar selection #975

Account unification - avatar selection #975

bobo-k2 commented Oct 16, 2023 •

edited

Loading

github-actions bot commented Oct 16, 2023 •

edited

Loading

impelcrypto commented Oct 16, 2023 •

edited

Loading

bobo-k2 commented Oct 16, 2023

impelcrypto commented Oct 17, 2023

impelcrypto commented Oct 17, 2023

bobo-k2 commented Oct 17, 2023

bobo-k2 commented Oct 17, 2023

impelcrypto commented Oct 17, 2023

gluneau commented Oct 18, 2023

gluneau left a comment

bobo-k2 commented Oct 19, 2023

Account unification - avatar selection #975

Account unification - avatar selection #975

Conversation

bobo-k2 commented Oct 16, 2023 • edited Loading

github-actions bot commented Oct 16, 2023 • edited Loading

impelcrypto commented Oct 16, 2023 • edited Loading

bobo-k2 commented Oct 16, 2023

impelcrypto commented Oct 17, 2023

impelcrypto commented Oct 17, 2023

bobo-k2 commented Oct 17, 2023

bobo-k2 commented Oct 17, 2023

impelcrypto commented Oct 17, 2023

gluneau commented Oct 18, 2023

gluneau left a comment

Choose a reason for hiding this comment

bobo-k2 commented Oct 19, 2023

bobo-k2 commented Oct 16, 2023 •

edited

Loading

github-actions bot commented Oct 16, 2023 •

edited

Loading

impelcrypto commented Oct 16, 2023 •

edited

Loading