feat: new teleport page

[newraina]

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

• Closes Teleport v2 improvements  #7363
• Requires deployment <snek/rubick/worker>

Before submitting pull request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality

Optional

• I've tested it at </ksm/collection>
• I've tested PR on mobile
• I've written unit tests 🧪
• I've found edge cases

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

• Fill up your DOT address: Payout

Community participation

• Are you at KodaDot Ecosystem Telegram?

Screenshot 📸

• My fix has changed something on UI; a screenshot is best to understand changes for others.

Copilot Summary

🤖 Generated by Copilot at 44b9d94

This pull request enhances the teleport feature by adding new components, icons, input fields and localization strings. It modifies the Teleport.vue component and its related files, such as NetworkDropdown.vue, locales/en.json and utils/chain.ts. The goal is to improve the user interface and experience of teleporting assets across networks.

🤖 Generated by Copilot at 44b9d94

To teleport assets with ease
We added some dropdowns and keys
NetworkDropdown.vue
And locales/en.json too
And some icons for networks like dot and kusama

[kodabot]

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

[netlify]

✅ Deploy Preview for koda-canary ready!

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

AI-Generated Summary: This pull request introduces a new teleport page to the existing site code. It involves a substantial update to the Teleport.vue file, which defines the layout and functionality of the site's teleport feature. This update includes the addition of a NetworkDropdown.vue file and SVG icons for chain networks featuring in the teleport ability. The NetworkDropdown file creates a dropdown-select feature for users to specify their desired network for the teleport feature, with associated SVG icons for these networks.

The modifications also include additions to the locales/en.json file to reflect new text labels like "source chain", "destination", "asset amount", etc., to be displayed on the teleport page. Furthermore, the chain.ts utility file has been updated to include Polkadot network in the chain icon mappings.

Overall, 252 insertions were added and 93 deletions made, with components/teleport/NetworkDropdown.vue and public/teleport/arrow.svg were newly created.

[exezbcz]

hello! thank you for this pr

some things I saw right away

• only display networks possible to teleport to

dark mode needs some work

[newraina]

@exezbcz fixed. It was a draft PR yesterday, you can review it again now

[prury]

small thing on firefox:

apart from that works nicely!

[exezbcz]

nice job! works for me, just the few little things prury mentioned

I will probably create a small followup, feel free to pickup that as well 🚀

[roiLeo]

Otherwise lgtm

note: divider is not full width on mobile

[newraina]

@roiLeo

note: divider is not full width on mobile

it's on purpose. The dividing line in the design isn't full width:

[roiLeo]

it's on purpose. The dividing line in the design isn't full width:

noted! weird but ok

[newraina]

@prury

small thing on firefox:

Made a little change, now on my Firefox:

[exezbcz]

@roiLeo lel, yeah you can make it full width, I think its because I resized the auto layout and left it like this.

my bad

[codeclimate]

Code Climate has analyzed commit b553e9c and detected 2 issues on this pull request.

Here's the issue category breakdown:

Category	Count
Duplication	2

View more on Code Climate.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.8% Duplication

[newraina]

@roiLeo lel, yeah you can make it full width, I think its because I resized the auto layout and left it like this.

@exezbcz oh I thought it was a special design. fixed

[yangwao]

Thanks!
pay 70 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $70 @ 4.99 USD/DOT ~ 14.028 $DOT
🧗 1CAv6Zq3yVxL3eKhC94GWTWVwp1w4jZbqeZ6wXx1rPAhrce
🔗 0x89bf0f748361aaaf445dd7349596fe75937af5216ea7b04bb07a17e5f4a73cd7

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