feat: Auto teleport V1

[hassnian]

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
• [x] Feature
• [ ] Refactoring

Context

⚠️WIP ⚠️

• [x] Closes #7643
• [x] Closes #7718

Did your issue had any of the "$" label on it?

• [x] Fill up your DOT address: Payout

Community participation

• [x] Are you at KodaDot Discord?

Screenshot 📸

• [x] My fix has changed something on UI;

Copilot Summary

🤖 Generated by Copilot at c55e671

This pull request improves the functionality and user experience of the NFT gallery by adding support for cross-chain transfers of NFTs and displaying multiple balances for different chains and tokens. It introduces new composables, components, and utils to handle the logic and UI for auto teleport, multi balance, and teleport routes. It also simplifies and refactors some existing code in MultipleBalances.vue and Teleport.vue.

🤖 Generated by Copilot at c55e671

We are the masters of the chains, we teleport with ease We balance all the assets, we use the composables We create the components, we improve the UI We are the kodadot rockers, we code with Vue and TS

[kodabot]

SUCCESS @hassnian PR for issue #7643 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[netlify[bot]]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	bf629cf57efc67800b7e64b8cdfeeaaf7cf912cb
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/654ccbab05a0bd00080ee0fa
😎 Deploy Preview	https://deploy-preview-7711--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 configuration.

[reviewpad[bot]]

AI-Generated Summary: This pull request introduces several modifications and functionality across eight different files. Modifications include implementation of functions related to balance checks in multiple chains and auto-teleport feature. Significant changes are also found within the teleport files, including expansions to the enumerations for chains and allowed transitions. New functions including 'calculateUsd', 'getBalance', and 'fetchMultipleBalance' are created for balance calculations. Additionally, the creation of 'AutoTeleportActionButton.vue', 'useAutoTeleport.ts', and 'useMultiBalance.ts' extend the application's functionality. Some existing code blocks have been reduced or noticeably modified, such as the switch block within 'getBalance' function within 'useBalance.ts' and removal of 'getBalance' implementation in 'MultipleBalances.vue'.

[exezbcz]

ready for first round 👀

[hassnian]

@exezbcz almost done, had a busy week with something else , I expect to finish this weekend and have it ready by monday, want to refactor some things and just need to added it in all the other modals

so this should be added for every modal where you spend tokens , transfer , offer , buy , list (?), right, etc ?

another question when bridging assets , should you bridge all of them or only needed (amount to spend + fees )

[exezbcz]

or only needed

only needed

almost done, had a busy week with something else , I expect to finish this weekend and have it ready by monday, want to refactor some things and just need to added it in all the other modals

nice!

so this should be added for every modal where you spend tokens , transfer , offer , buy , list (?), right, etc ?

yes, its mainly for actions on assethubs

[exezbcz]

actually bought nft through the autoteleport, will post some feedback today/tomorrow 🔥

looking really nice sir

[hassnian]

@exezbcz

for transfers show the auto teleport be here , ie auto teleport -> bridge -> funds -> confirm trasnfer (step 3) ? and then -> show confirm modal

kinda makes no sense right ? not sure

or inside the confirm modal ?

[exezbcz]

@hassnian you can skip the transfer for now, I'll create a design and flow for these. You can take the followup too once created 🚀

[hassnian]

atm bsx seems to be down I can't add the auto teleport to the offer , will do as soon as possible , also I've noticed some small issues, that will fix ASAP

but I think its time for a first round

@kodadot/qa-guild @exezbcz 👀

@roiLeo one thing that I noticed is that I ended up having all the logic of the auto teleport inside the button itself , I could have the modals outside but seems to me that the same code will be duplicated, not sure , will be waiting for your review :D

thanks guys

[exezbcz]

Feedback

here we go

First

• I think it will be nice to make the auto teleport turned on by default
• after you enter the confirmation modal
• the blurred shape is bit off - could you check figma please
• this icon to grey

Onboard screen

• good, but the icons did not load for me

• the main heading should be 25px bold text

Signing

• remove the "networks" from quotes, that was intended as placeholder

• place the icon close and aligned with the text - as in designs

• grey loading circles please

• it also does not detect the state correctly - I haven't signed anything and its already in the pending state

• buy nft button active before the green checks are displayed

buy nft

• I will put this step automatically for signing, so user does not have to click the button twice. So, from checking funds it will automatically go to buying nft step

• this state is not correct
• the subheading should be visible after you are on the step - not before
• before that, the subheading is not there

again, the transaction is pending even without me signing the transaction.

this is nice, good job!

done

• one thing i missed in the designs is to add view tx hyperlink to the buying nft transaction too

ad modal and some styles

• the top part should be fixed, and the rest scrolls, as it is with the mass listing

subheadings: these subheadings to 12px font, please

---

End

once again, really nice job! This is all I found in a pretty big issue. We will do some follow-ups, too.

feel free to dm me on telegram if something is not clear

[prury]

that's a lot of work @hassnian! congrats!

playwright detection(when the user has no funds on a chain):

will be conducting proper tests as soon as i can

[prury]

• Learn More button on Welcome page doesn't go anywhere(probably intended)

• Cannot click on tool tip link because it disappears when i hover to it:

First round of testing - bought an NFT from myself on AHK teleporting funds from Kusama

https://github.com/kodadot/nft-gallery/assets/36627808/0f3c5ec8-8683-45a4-a7bb-6f3a771d94dc

• signing steps went smooth and accordingly
• TX link redirects to proper sub scan link
• retry on the teleport transaction works
• retry on buy still to be tested
• i was unable to close the modal because at the end, the checking funds never really got the check mark, but the buy transaction was completed properly

not in the video(before starting): i know loading balances takes some time, but in this case, checking funds when clicking buy its taking a looot of time, it may even make the user give up doing the whole thing.

https://github.com/kodadot/nft-gallery/assets/36627808/f6ec6cfb-b74e-49a9-bdcf-3cfe875d761f

[hassnian]

requested changes are fixed

missing , create nft and collections , will do asap

// currently, on rmrk we need to list price manually nft creation on rmrk seems to have an extra step what should happen here ?

offer -> has old flow of slider button

[exezbcz]

offer -> has old flow of slider button

• https://github.com/kodadot/nft-gallery/issues/6476

[exezbcz]

nft creation on rmrk seems to have an extra step what should happen here ?

in the signing modal or?

if there is additional step then yes

[prury]

Attempt at buying RMRK2 NFT with funds being teleported from Kusama Asset Hub (was not able to):

https://github.com/kodadot/nft-gallery/assets/36627808/b7e3a940-ee3e-4abd-a9df-492b21d21178

https://github.com/kodadot/nft-gallery/assets/36627808/d893cd43-3890-4a00-96a0-24a6b11edfa0

[hassnian]

Attempt at buying RMRK2 NFT with funds being teleported from Kusama Asset Hub (was not able to):

Rmrk2.with.funds.from.Assethub.mp4 second.attempt.mp4

seems like it couldn't connect with bsx, bsx seems to be down a lot

[hassnian]

@prury give me a day or two i've had to change some stuff to accommodate for nft and collection creation and you might end up retesting buy and list , i'll ping you giving you the green light

[prury]

Attempt at buying RMRK2 NFT with funds being teleported from Kusama Asset Hub (was not able to): Rmrk2.with.funds.from.Assethub.mp4 second.attempt.mp4

seems like it couldn't connect with bsx, bsx seems to be down a lot

yes...ugh, haha

[prury]

@prury give me a day or two i've had to change some stuff to accommodate for nft and collection creation and you might end up retesting buy and list , i'll ping you giving you the green light

take your time my dude! allright

[hassnian]

@prury feel free to test , list , buy , mint nft , mint collection

[yangwao]

Is it ready for review & merge? As it's quite big, appreciate that @hassnian and quite long out there 😄

[hassnian]

Is it ready for review & merge?

As it's quite big, appreciate that @hassnian and quite long out there 😄

yes, as far as i can tell

[prury]

Some tests: Buy now on RMRK1, having almost 0 balance on Kusama, and $3 on Ahk: ✔️ https://github.com/kodadot/nft-gallery/assets/36627808/6b787e69-b4d6-47e9-b4be-94a0f6ce80c2

---

Listing on RMRK2 having almost 0 balance on Kusama, and $2 on Ahk: ❌

---

Create NFT on RMRK2, having almost 0 balance on Kusama and $3 on Ahk: ✔️
https://github.com/kodadot/nft-gallery/assets/36627808/75799eaa-b5aa-44a5-a23a-30e9f9e2ba04

---

Buy now on Assethub: ✔️ https://github.com/kodadot/nft-gallery/assets/36627808/1ee75f24-92da-4fd7-9a7d-ab40cf7a6631

---

Listing on Ahk: ❌ (reduced my assethub balance to: ) - teleport occurs but listing does not https://github.com/kodadot/nft-gallery/assets/36627808/f136c701-1614-495f-9479-0c7bf5775cb3

Second try: ❌ https://github.com/kodadot/nft-gallery/assets/36627808/1f0a476c-3545-4325-91f9-92bcf9c4843f https://assethub-kusama.subscan.io/tx/0x19aac0a9c95e1af819ad9e5d6ef468d923c2c6eaf3000ca07afc4541c243266f

---

Collection Creation on RMRK2 Teleporting funds from KusamaHub ❌ https://github.com/kodadot/nft-gallery/assets/36627808/140ba138-3530-4d56-9d96-4f411a077b8f I think the second fee that is somehow higher is not being put into account

---

Create NFT on Assethub teleporting funds from Kusama ✔️ https://github.com/kodadot/nft-gallery/assets/36627808/a1157602-c928-44c7-93cc-4f02ac6f64af

---

Create NFT on RMRK with listing, teleporting funds from KusamaHub ✔️ https://github.com/kodadot/nft-gallery/assets/36627808/544397d5-22d8-4c29-9982-c540ad74cf7e

---

Observations:

• Balances on sidebar take a lot more longer to load in this deployed version if compared to canary
• make sure that #7958 affects the final calculation(can be a followup)

[hassnian]

@prury try now thanks

[prury]

@prury try now thanks

will be doing a properly analysis on my morning, got caught in some stuff today, but i edited some rmrk stuff on my previous mesage

[yangwao]

wow, I noticed this, congratulations @hassnian ! waiting for green checks for approval and paying out )

[prury]

https://github.com/kodadot/nft-gallery/pull/7711#issuecomment-1796963324 updated

@yangwao if you want me to test auto-teleport on Polkadot Asset Hub, please fund the following account for collection and nft creation: 1CBmjqJvV1ha8BPQ5JAXGEzeJBLmGHNG9gYg96eC1dnjH5W

[yangwao]

@yangwao if you want me to test auto-teleport on Polkadot Asset Hub, please fund the following account for collection and nft creation: 1CBmjqJvV1ha8BPQ5JAXGEzeJBLmGHNG9gYg96eC1dnjH5W

done

• https://polkadot.subscan.io/extrinsic/0x2cbd270c05859c6b8ea64b889b148965103337c00b47080f8187bcf5c0e9bb4b

[codeclimate[bot]]

Code Climate has analyzed commit bf629cf5 and detected 10 issues on this pull request.

Here's the issue category breakdown:

Category	Count
Complexity	4
Duplication	6

View more on Code Climate.

[sonarcloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[hassnian]

@prury

• listing should be fixed
• collection creation

Second try: ❌ https://github.com/kodadot/nft-gallery/assets/36627808/1f0a476c-3545-4325-91f9-92bcf9c4843f https://assethub-kusama.subscan.io/tx/0x19aac0a9c95e1af819ad9e5d6ef468d923c2c6eaf3000ca07afc4541c243266f

i get the same error on canary not sure why , any idea @kodadot/internal (check video 👆),

already checked txFee and collectionTotalDeposit

1 thing is: this link should point to the transaction, currently, it points to the block

can do that on follow up or when I'm back

fyi, got something to do and will be afk for a couple of days , will be back on Monday maybe earlier

[yangwao]

can do that on follow up or when I'm back

yes, I'm gonna test it myself and would be pro merging it as I sense some dragons might appear or some edge cases over time.

[yangwao]

Noticed a few errors on the sidelines, but probably unrelated, as everything has worked for me

[yangwao]

lot of effort and worked perfectly, looking forward! pay 230 usd

[yangwao]

😍 Perfect, I’ve sent the payout 💵 $230 @ 5.13 USD/DOT ~ 44.834 $DOT 🧗 13QUj3pZyFNfYj4AM336hRdyLQbevj5H3sR4PKmLEXLdwZhh 🔗 0x10eb2d33b999f723c67a57c261bfda92098f2d043d01f91dfce555d6436531c9

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

[yangwao]

@prury if there is something, let's create follow up, for me buying worked and that was primary goal for this one, happy to learn if there any bugs in follow up isues