Transfer Redesign handover - (1) Desktop design

[Jarsen136]

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

Needs Design check

• @exezbcz please review

Context

• Closes Transfer Redesign handover - (1) Desktop design #6464

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

• My DOT address: Payout

Screenshot 📸

• My fix has changed UI

/dot/transfer?redesign=true
/ksm/transfer?redesign=true

Copilot Summary

🤖 Generated by Copilot at d2c862a

This pull request introduces a new version of the Transfer component, which allows users to send NFTs to multiple recipients, choose different units, and generate a pay me link. The new component is styled with CSS and has English translations. A feature flag is added to switch between the new and old versions of the transfer page. A utility function is added to convert balance values to USD.

🤖 Generated by Copilot at d2c862a

We added a new Transfer component
With features to make it more potent
It can send to a bunch
And show USD crunch
With calculateBalanceUsdValue content

[kodabot]

WARNING @Jarsen136 PR for issue #6464 which isn't assigned to you. Please be warned that this PR may get rejected if there's another assignee for issue #6464

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	ff787c3
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64ccea8d690c4500086a5b9d
😎 Deploy Preview	https://deploy-preview-6486--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 major overhaul of the Transfer.vue component in a Vue application, which is related to the cryptocurrency transfer feature. Changes include a redesigned UI, improved interactivity, and support for multilingual UI. Crucial components such as BalanceInput and ReadOnlyBalaceInput were replaced by NeoInput and several new computed properties and methods were introduced.

A new TabItem.vue file was modified, with changes primarily focused on component properties and the addition of new styling rules. Moreover, an A/B testing implementation has been introduced in the transfer.vue file, where a redesign boolean flag dictates whether the new Transfer component or the old TransferOld one is used.

There is also an addition of a new calculation function calculateBalanceUsdValue added to balance.ts in the utils/format/ folder, which calculates the USD balance value based upon a specific value and decimals.

Lastly, a fresh block of English translations related to transfers was added to the locales/en.json file, involving phrases like "Recipient", "Sender", "Send same amount", and others. These additions and modifications contribute to enhancing the user interface and functionality of the application.

[Jarsen136]

@daiagi Thanks for your comment. I have updated them. Could you pls review again ?

[prury]

i think amount increment could be 0.01 instead of 0.001

add recipient only works after i add an amount:

add.recipient.mp4

follow up for those? :

[exezbcz]

artist submission from me 🎨

As @prury mentioned, there is no delete button once you add a recipient, I think it was written somewhere that it's intentionally?

[Jarsen136]

I would make a follow-up issue:

Display estimated transaction fees on different networks

[prury]

I would make a follow-up issue:

Display estimated transaction fees on different networks

will open

[prury]

Pending problems from Exez image:
Continue button height: 50px
Continue button disabled when no recipients filled

for the other ones I've found i will open another issue

[Jarsen136]

Pending problems from Exez image: Continue button height: 50px Continue button disabled when no recipients filled

Fixed

[prury]

Continue button disabled when no recipients filled

it works, but is still buggy, will add to #6529

[exezbcz]

yup, works for me, good job!

[daiagi]

some smol things

plus there seems to be an issue with balance not showing up

[yangwao]

I would merge it if so, we will be doing plenty of follow-ups, no worries 😄

[codeclimate]

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

View more on Code Climate.

[Jarsen136]

some smol things

plus there seems to be an issue with balance not showing up

It's not related to this PR. There seems some magic in the preview environment. The account balance on stmn network could not be fetched correctly on the env. I found the bug also appeals in other preview env.

for example https://deploy-preview-6501--koda-canary.netlify.app/stmn/transfer

On canary env the bug is disappear.

[yangwao]

pay 50 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $50 @ 4.97 USD/DOT ~ 10.06 $DOT
🧗 16SjUbGKSdjCdWTy3NNT3JxbRVGGqD4mwkHpc6BD9U2Rp29Z
🔗 0x60ab92fa2f00927b21137d2b3e007aa565ee278a9d95a32296d45cca0fc4ed9c

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