feat: multi chain balances #6019

preschian · 2023-05-17T09:56:33Z

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

Bugfix
Feature
Refactoring

Context

Related feat: multi chain balances #6019
Related Balance bug on rmrk2 #5838
Related Zero balance on kusama/rmrk2 #5986
Related Multi-chain assets in wallet dialog #4865
Related Checking your balance is confusing for people who are not familiar with KodaDot #5850

Had issue bounty label?

Fill up your KSM address: Payout

Todo

for now, every time we open the sidebar there it always shows the skeleton component. will try to improve that in the next PR

Copilot Summary

`🤖 Generated by Copilot at 18988f4`

This pull request adds a new feature to show the balances of different tokens and chains for the connected wallet. It introduces a new component MultipleBalances.vue that queries and displays the balances using the Polkadot API and the fiat store. It also updates the existing component WalletAsset.vue to use the new component and to hide the total value when not on the snek prefix.

`🤖 Generated by Copilot at 18988f4`

Sing, O Muse, of the cunning coder who devised
A wondrous component, MultipleBalances.vue,
To show the wealth of tokens and chains that he prized,
And query the Polkadot API for the true.

netlify · 2023-05-17T09:56:40Z

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/6468cb10b16cbf217cf304d0
😎 Deploy Preview	https://deploy-preview-6019--koda-canary.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 settings.

reviewpad · 2023-05-17T09:57:28Z

AI-Generated Summary: This pull request introduces a new feature for displaying multi-chain balances, adds a new MultipleBalances.vue component, and makes changes to the WalletAsset.vue component. In the new component, available balances for Kusama, Statemine, and Basilisk chains are fetched and displayed in rows with their respective Token and USD values.

In the WalletAsset.vue component, conditions are updated to display the new MultipleBalances component when the chain is not Snek and the total value section is displayed only for the Snek chain. The import and usage of AccountBalance are replaced with MultipleBalances.

reviewpad · 2023-05-17T09:57:29Z

Reviewpad Report

⚠️ Warnings

Please link an issue to the pull request

preschian · 2023-05-17T10:05:25Z

hi @yangwao @exezbcz @JustLuuuu, need your feedback about multi-chain balances in this PR. Is it better like this? I change the text from Network to Chain in this PR and use the full chain name. to distinguish between kusama as a token or chain. mostly, take inspiration from sub.id website

yangwao · 2023-05-17T10:08:08Z

. Is it better like this?

if it would be stable I'm okay with it 😉

preschian · 2023-05-17T10:13:53Z

Todo

for now, every time we open the sidebar there it always shows the skeleton component. will try to improve that in the next PR

roiLeo

It doesn't work for me.

On kusama: should show only availableBalance
How are you going to handle /snek balance?

I'd be happy to help you, since this morning I've been banging my head with #5838 as I can't manage to have identityStore.auth.balance reactive (won't update on page)

preschian · 2023-05-17T10:17:24Z

On kusama: should show only availableBalance

could you give me your address with sub.id link? I will check it. for now, should show free balance only

How are you going to handle /snek balance?

for now, snek is still unchanged, still using the old component. I think we need to distinguish main and test network/chain

I'd be happy to help you

sure, since I'm actually still new interact directly with chain/polkadot API stuff

roiLeo · 2023-05-17T10:19:34Z

On kusama: should show only availableBalance

could you give me your address with sub.id link? I will check it. for now, should show free balance only

https://github.com/kodadot/packages/blob/53bfd21bda439c8b2fda4cfd1347c85a5d80a4fb/sub-api/src/common/query.ts#L8

How are you going to handle /snek balance?

for now, snek is still unchanged, still using the old component. I think we need to distinguish main and test network/chain

alright

exezbcz · 2023-05-17T10:20:30Z

Yes! much better, thank you

ad styling, I would maybe make the column names 12 px in k-grey for both light modes

like here:

preschian · 2023-05-17T10:21:08Z

kodadot/packages@53bfd21/sub-api/src/common/query.ts#L8

oohh thanks, will update that 🙏

roiLeo

would it be possible to store (or fetch) balance values in pinia auth.balance state? So it would be easier to access between components

…-chain-balances

preschian · 2023-05-17T10:29:14Z

would it be possible to store (or fetch) balance values in pinia auth.balance state? So it would be easier to access between components

let me check, didn't check the store yet for balance stuff

JustLuuuu · 2023-05-17T10:42:06Z

Love it!

preschian · 2023-05-17T11:20:30Z

would it be possible to store (or fetch) balance values in pinia auth.balance state? So it would be easier to access between components

I just modified a little bit on onMounted section, so it still fetches and store to the auth.balance. seems like this is the root cause of sometimes the balance zero e5f092a

roiLeo · 2023-05-17T11:25:11Z

I just modified a little bit on onMounted section, so it still fetches and store to the auth.balance. seems like this is the root cause of sometimes the balance zero e5f092a

I've already tried that but it didn't worked for me, idk why but know it work wtf.
This morning, on first fetch it would show 0 balance on rmr2 but in console I had the value from store...

yangwao · 2023-05-17T11:58:03Z

viki did meanwhile, if something can be reused?

🩹 Temp fix for balance issue #6021

components/balance/MultipleBalances.vue

daiagi · 2023-05-17T12:03:27Z

more of a feature request, but can we highlight / make bold the token used for paying? (on Basilisk)

overall great stuff. love it

preschian · 2023-05-17T12:12:18Z

more of a feature request, but can we highlight / make bold the token used for paying? (on Basilisk)

for this, how do I know the token is being used for transactions on Basilisk? cc @vikiival @roiLeo

roiLeo · 2023-05-17T12:14:36Z

more of a feature request, but can we highlight / make bold the token used for paying? (on Basilisk)

for this, how do I know the token is being used for transactions on Basilisk?

getAssetIdByAccount

check out

nft-gallery/components/bsx/Create/utils.ts

Lines 29 to 49 in 0ea86c3

    
           export const getFeesToken = async (): Promise<Token> => { 
        
             const { apiInstance } = useApi() 
        
             const { accountId } = useAuth() 
        
             const { $consola } = useNuxtApp() 
        
             const bsxTokenId = '0' 
        
             try { 
        
               const api = await apiInstance.value 
        
               //this function returns 
        
               // '0' if paying in bsx (on Basilisk and Snek) 
        
               // '1' if paying in ksm (on basilisk) 
        
               // '5' if paying in ksm (on Snek) 
        
               const tokenId = await getAssetIdByAccount(api, accountId.value) 
        
               return tokenId === bsxTokenId ? 'BSX' : 'KSM' 
        
             } catch (e) { 
        
               $consola.log(e) 
        
             } 
        
             return 'BSX' 
        
           }

vikiival · 2023-05-17T12:37:51Z

components/balance/MultipleBalances.vue

+async function getBalance(chainName, token = 'KSM', tokenId = 0) {
+  const currentAddress = accountId.value
+  const prefix = mapToPrefix[chainName]
+  const chain = CHAINS[prefix]
+
+  const publicKey = decodeAddress(currentAddress)
+  const prefixAddress = encodeAddress(publicKey, chain.ss58Format)
+  const wsProvider = new WsProvider(ENDPOINT_MAP[prefix])
+
+  const api = await ApiPromise.create({
+    provider: wsProvider,
+  })
+
+  let currentBalance
+
+  if (tokenId) {
+    const balance = await api.query.tokens.accounts(prefixAddress, tokenId)
+    currentBalance = format(
+      (balance as PalletBalancesAccountData).free,
+      chain.tokenDecimals,
+      false
+    )
+  } else {
+    const balance = await balanceOf(api, prefixAddress)
+    currentBalance = format(balance, chain.tokenDecimals, false)
+  }
+
+  const balance = delimiter(currentBalance)
+  const usd = calculateUsd(balance, token)
+
+  availableChains[chainName].push({
+    token,
+    balance,
+    usd,
+  })
+  totalUsd.value.push(usd)
+
+  await wsProvider.disconnect()


Try to leverage the identity store imo

yes, on the Todo section, I'm planning to store them in the store to improve the skeleton. the question is, should I make a new state or use the existing state balance? because the existing balance is a kinda different format with multi-chain assets. need feedback btw cc @vikiival @roiLeo @Jarsen136 @daiagi

in the existing balance state, is using prefix: balance format
so, it will store like this

ksm: 1, rmrk: 1, bsx: 1, stmn: 1, total: 4

in the multi-chain assets, because of ksm (rmrk2) and rmrk using the same chain (Kusama). I'm thinking to store them like this

kusama: 1, basilisk: 1, statemime: 1, total: 3

Do as you like we will apply new format where it's needed.
Keep in mind we'll need something simple to access in order to check if account has sufficient funds to buy/makeOffer on item (it was pretty easy with urlPrefix)

But I would like to know if we will loose snek balance with this changes?

But I would like to know if we will loose snek balance with this changes?

identity store and snek are so far still untouched in this PR, it should show the balance with existing components. ref: https://github.com/kodadot/nft-gallery/pull/6019/files#diff-88e8e60a0e3064ffe92b5025e2fc8fda186fbaa66718474a9142cfd1af489262R17-R18

but, lmk if you found something strange on snek wallet

vikiival

I would leverage more identity store

daiagi · 2023-05-17T13:05:55Z

I guess this is not what you meant to do

preschian · 2023-05-17T13:11:34Z

more of a feature request, but can we highlight / make bold the token used for paying? (on Basilisk)
I guess this is not what you meant to do

seems like we need to ask the @kodadot/design-squad how to deliver this, wdyt? to make it clear

…-chain-balances

exezbcz · 2023-05-17T14:53:23Z

@preschian, just to be sure, do you mean asset to pay the transactions or buying nfts in general?

daiagi · 2023-05-17T15:12:21Z

@exezbcz the asset used for paying for transactions on Basilisk (ksm or bsx)

Jarsen136

lgtm

exezbcz · 2023-05-17T15:43:50Z

@daiagi Okay, I am not 100% sure whether we should highlight it somehow. If it isn't explicitly mentioned, the user could be confused about what that means. I can think of some possible solutions, but it's against the concept of a smart and simple asset view.

Profile sidebar simplifications // Smart & Simple Assets #5820

It would require additional tooltips etc.; that is not what we want.

I could mention this in the signing modal.

I can create a follow-up issue with p5, and I may come up with another, more innovative solution.

codeclimate · 2023-05-20T09:26:02Z

Code Climate has analyzed commit 32f443e and detected 0 issues on this pull request.

View more on Code Climate.

yangwao · 2023-05-20T13:29:25Z

I would try but https://deploy-preview-6019--koda-canary.netlify.app/

let me retry

yangwao · 2023-05-20T13:35:59Z

I'm good, works

yangwao · 2023-05-20T13:42:52Z

pay 80 usd

I like fresh take and all others contributing to discussion!

probably continue in

feat: set multi chain balances in stores #6052

yangwao · 2023-05-20T13:43:07Z

😍 Perfect, I’ve sent the payout
💵 $80 @ 25.6 USD/KSM ~ 3.125 $KSM
🧗 DY4SQF2iD456tH89aQtz5wv1EV3BbSW8wKKuMcwbmXaj1pM
🔗 0x7911bee1678741be63c420089f97770cf42b3bff3cab5c2504141e4b2c87498e

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues

feat: multi chain balances

18988f4

reviewpad bot added the medium Pull request is medium label May 17, 2023

roiLeo reviewed May 17, 2023

View reviewed changes

preschian marked this pull request as ready for review May 17, 2023 10:20

preschian requested a review from a team as a code owner May 17, 2023 10:20

preschian requested review from daiagi and Jarsen136 and removed request for a team May 17, 2023 10:20

reviewpad bot added the waiting-for-review label May 17, 2023

roiLeo reviewed May 17, 2023

View reviewed changes

Merge branch 'main' of github.com:kodadot/nft-gallery into feat/multi…

bd859fb

…-chain-balances

preschian marked this pull request as draft May 17, 2023 10:37

fix: available balance only

6d8b92f

fix: add await to fetchBalance

e5f092a

preschian added 2 commits May 17, 2023 18:34

fix: style and parallel requests

920ca7f

fix: use currentAddress

4003148

fix: use has-text-grey instead

d4548ec

daiagi reviewed May 17, 2023

View reviewed changes

components/balance/MultipleBalances.vue Outdated Show resolved Hide resolved

components/balance/MultipleBalances.vue Outdated Show resolved Hide resolved

components/balance/MultipleBalances.vue Outdated Show resolved Hide resolved

vikiival reviewed May 17, 2023

View reviewed changes

vikiival requested changes May 17, 2023

View reviewed changes

fix: translation, map ksm token id, unused import, selected chain bold

79e725e

preschian added 2 commits May 17, 2023 20:13

Merge branch 'main' of github.com:kodadot/nft-gallery into feat/multi…

74ea554

…-chain-balances

fix: remove highlight for now

322ae71

daiagi approved these changes May 17, 2023

View reviewed changes

Jarsen136 approved these changes May 17, 2023

View reviewed changes

exezbcz mentioned this pull request May 17, 2023

Display active fee currency in smart asset preview #6032

Open

Merge branch 'main' into feat/multi-chain-balances

32f443e

yangwao merged commit d3746c1 into main May 20, 2023
19 checks passed

yangwao deleted the feat/multi-chain-balances branch May 20, 2023 13:43

yangwao added S-works-for-me-✅ qa-guild has tested PR from end user perspective and functionality worked paid pull-request has been paid labels May 20, 2023

roiLeo mentioned this pull request May 21, 2023

fetch multi chain Balance from pinia store #6059

Closed

feat: multi chain balances #6019

feat: multi chain balances #6019

Conversation

preschian commented May 17, 2023 • edited by yangwao

PR Type

Context

Had issue bounty label?

Todo

Copilot Summary

🤖 Generated by Copilot at 18988f4

🤖 Generated by Copilot at 18988f4

netlify bot commented May 17, 2023 • edited

✅ Deploy Preview for koda-canary ready!

reviewpad bot commented May 17, 2023

reviewpad bot commented May 17, 2023

preschian commented May 17, 2023 • edited

yangwao commented May 17, 2023

preschian commented May 17, 2023

Todo

roiLeo left a comment

Choose a reason for hiding this comment

preschian commented May 17, 2023 • edited

roiLeo commented May 17, 2023

exezbcz commented May 17, 2023

preschian commented May 17, 2023

roiLeo left a comment

Choose a reason for hiding this comment

preschian commented May 17, 2023

JustLuuuu commented May 17, 2023

preschian commented May 17, 2023

roiLeo commented May 17, 2023

yangwao commented May 17, 2023

daiagi commented May 17, 2023 • edited

preschian commented May 17, 2023

roiLeo commented May 17, 2023 • edited

vikiival May 17, 2023

Choose a reason for hiding this comment

preschian May 17, 2023

Choose a reason for hiding this comment

roiLeo May 17, 2023

Choose a reason for hiding this comment

preschian May 17, 2023

Choose a reason for hiding this comment

vikiival left a comment

Choose a reason for hiding this comment

daiagi commented May 17, 2023

preschian commented May 17, 2023

exezbcz commented May 17, 2023

daiagi commented May 17, 2023

Jarsen136 left a comment

Choose a reason for hiding this comment

exezbcz commented May 17, 2023 • edited by yangwao

codeclimate bot commented May 20, 2023

yangwao commented May 20, 2023

yangwao commented May 20, 2023

yangwao commented May 20, 2023

yangwao commented May 20, 2023

preschian commented May 17, 2023 •

edited by yangwao

`🤖 Generated by Copilot at 18988f4`

`🤖 Generated by Copilot at 18988f4`

netlify bot commented May 17, 2023 •

edited

preschian commented May 17, 2023 •

edited

preschian commented May 17, 2023 •

edited

daiagi commented May 17, 2023 •

edited

roiLeo commented May 17, 2023 •

edited

exezbcz commented May 17, 2023 •

edited by yangwao