feat: transfer redesign for mobile

[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

• Feature
• Refactoring

Needs Design check

• @exezbcz please review
• @kodadot/qa-guild please review

Context

• Closes Transfer Redesign handover - (4) Mobile Redesign #6468
• Closes Transfer Redesign handover #6460
• Remove old transfer page and ?redesign=true

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

• My DOT address: Payout

Screenshot 📸

• My fix has changed UI

Copilot Summary

🤖 Generated by Copilot at 0bdf37f

Improved the responsiveness and design of the transfer feature for NFTs. Refactored the Transfer and TransferConfirmModal components and added flex layout and mobile detection. Enhanced the NeoModal component to accept multiple custom classes. Removed the old transfer design from the TransferPage component.

🤖 Generated by Copilot at 0bdf37f

We are the masters of the NFT
We transfer them with style and speed
We adapt to any device or screen
We are the kings of the Transfer component

[kodabot]

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

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	c57ab6d
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64df6c73a99d3e00088721a6
😎 Deploy Preview	https://deploy-preview-6764--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.

[kodabot]

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

[reviewpad]

AI-Generated Summary: This pull request reflects significant alterations in several files which aim to improve mobile responsiveness and amend layout requirements, primarily focusing on the transfer components.

The file 'TransferOld.vue', used for fund transfers functionality, has been completely removed, necessitating a refactoring of these features into another section if still required. Meanwhile, 'NeoModal.vue' has seen adjustable CSS classes introduced to add versatility to modal content displays.

The 'Transfer.vue' file underwent modifications for mobile-friendly adjustments along with the addition of mobile-related attributes/classes. There has also been a noticeable redesign of the transfer component and removal of references to 'TransferOld'.

In 'TransferConfirmModal.vue', additional mobile property was introduced along with modifications in styles, class assignments, and the handling of mobile views. Lastly, in 'transfer.vue', redundancies were removed, alterations were made in layout and scripts, and the older design was replaced with a newer, more definitive version. Overall, these changes seem to greatly improve mobile responsiveness and usability.

[prury]

looks nice! let's go

i believe this button doesn't have this square around it

4 recipients but showing only 2 (they show if you scroll down, but there's a blank/dark space over them)

will leave design details for Exez

[yangwao]

Koda has own song 🎶 now

[exezbcz]

i believe this button doesn't have this square around it

We can either remove completely or just remove the drop shadow - general rule - it is in container that has drop shadow -> no drop shadow on elements inside

[Jarsen136]

4 recipients but showing only 2 (they show if you scroll down, but there's a blank/dark space over them)

✅ Fixed

i believe this button doesn't have this square around it
We can either remove completely or just remove the drop shadow - general rule - it is in container that has drop shadow -> no drop shadow on elements inside

✅ Done

[roiLeo]

You really like <span /> hehe

[yangwao]

so I'm dispatching payrolls with new UI ? 👀

[exezbcz]

Hellooooo

remove stroke on sides

• modal background full height, even covering the navbar

• is there an available fund check? I should not be able to send this transaction
  

otherwise good! thanks

[yangwao]

hmm, usd missing?

[codeclimate]

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

View more on Code Climate.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
1.5% Duplication

[Jarsen136]

is there an available fund check? I should not be able to send this transaction

hmm, usd missing?

✅ Fixed. The bug comes from some recent merging : )

[Jarsen136]

remove stroke on sides

✅ Done

• modal background full height, even covering the navbar

updated

I cannot manage to make some elements cover navbar for the current layout. How about a higher mobile modal?

[yangwao]

How about a higher mobile modal?

for me yes
cc @exezbcz

[exezbcz]

@Jarsen136 I think that does not solve the issue; I would not make it that high, maybe a bit smaller, and it will work - it is the default modal height or?

thanks!

cc @EthVlad

[Jarsen136]

@Jarsen136 I think that does not solve the issue; I would not make it that high, maybe a bit smaller, and it will work - it is the default modal height or?

thanks!

The default max height of NeoModal component is 80% of the viewport. Actually, we do not have a common modal style for mobile device. Could you tell me what kind of issue you are concerned about based on the current design?

Current implementation

[exezbcz]

@Jarsen136 okay good, we can always change it, thanks!

[yangwao]

pay 100 usd

let's go!

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $100 @ 4.52 USD/DOT ~ 22.124 $DOT
🧗 16SjUbGKSdjCdWTy3NNT3JxbRVGGqD4mwkHpc6BD9U2Rp29Z
🔗 0x382b67cebc16c43673460a925c5d86cb5dc5a451f9a3b9f10a542d9a6b8a5baa

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

[EthVlad]

I cannot manage to make some elements cover navbar for the current layout. How about a higher mobile modal?

What do you mean by higher mobile modal? I think that covering 80% is good enough if we could darken the navbar same way as the background. Like here in design, so we focus users attention to modal only. Also user should not be able to access the navbar here.

He could only tap outside the modal to close it but not trigger any other action. User can close is therefore 3 ways: tap outside modal, tap close button, maybe swipe down the modal with their finger (if possible).

[yangwao]

so I'm dispatching payrolls with new UI ? 👀

the answer is no because we have missing dialogue

• Copy to successful transaction in Transfer #6856