Redesign of Transfer

[yangwao]

I guess is around clock 😅

https://beta.kodadot.xyz/transfer

Things we would like to keep

• 7d average price of particular asset (we plan to have KSM, USDT, DOT, BSX just for example)
• who is making transfer - address + identity best for recognition
• balance of particular address -- maybe warning there is not enough assets on address
• insert address -- this can work if we want to input someone else KSM address and generate link on their behalf but also primarily for users who generating payment links so we can process them
• amount in cryptoasset and USD amount
• actionables buttons like submit, copy reward me link (if generating link for myself), copy payment link (if I generated payment requests on someone else behalf, other address I don't own)
• after transaction - view transaction on blockexplorer like SubScan and copy link to proof receiving party their rewards is on the way

• new things coming into

• right now we have batch where we have more addresses with same amount, I would like to extend it with more addresses BUT different amount per address, plus it can generate link on this batch transfer as it it's something recurring

How it looks like on https://kodadot.xyz/transfer (usable 😅)

so copy payment link it is sometimes there 🤔

We will sort out fields bit

• batch transfer add will keep
• add option to add custom value for each address and generate links for that
• make it less confusing for people who are using copy reward me link
• add address on someone else behalf so copy payment link (this fn was there but seems gone?)
• mobile friendly would be best

Ref

• 5322

[kodabot]

ASSIGNED - @VladoTheBoi 🔒 LOCKED -> Thursday, April 13th 2023, 14:14:19 UTC -> 24 hours

[kodabot]

ASSIGNMENT EXPIRED - @VladoTheBoi has been unassigned.

[EthVlad]

So I've got some mobile designs ready for feedback if any. You can send multiple people the same amount. By default I though it would be set to USD as its easier for calculations, but I left the crypto asset as well as still, you are sending KSM tokens and not USD itself. Options to create a payment template (payment link) would be in top right "more" button - I am still thinking about other ways where I could put this option.

I also added the option to set different amounts to multiple accounts. I am still deciding which variant I want to go (more inclined to the 1st variant as its more mobile friendly but takes up more space when adding multiple recipients). Any preferences here?

I would also like to include confirmation dialog with all important information before you really confirm and submit the tx. - WIP

[yangwao]

I think it's good, yet only thing I'm unsure is if we should go for comma or dot at decimal separator

• https://en.wikipedia.org/wiki/Decimal_separator?useskin=vector

Also I would put probably Transfer in separate row and KSM with amount in next line to be more spacious. exchange rate I would keep probably same color, it's feels like it's going down with price

Variant 1 is probably better to see more from address. Yet probably is missing in Total amount of KSM (and multicurrency in future like USDT will be there)

I found is missing where you will see resolved identity of address.

I might see issue when u decide to change sender, but that could be pulled from menu I guess, but would be nice to be easy but that could be for later iteration.

Other than is great start!

Maybe @helloitsdamsky can have some feedback if he is missing something critical

[EthVlad]

I can see that current transfer is using dot. Found this comparison. Would probably go either Danish/Finnish way or GB/US. Wdyt?

Also I would put probably Transfer in separate row and KSM with amount in next line to be more spacious. exchange rate I would keep probably same color, it's feels like it's going down with price

Yes the color of the price was meant to indicate 7d or 1d avg price change of KSM. Red = down, Green = up. If not needed can be black as well. Something like this?

I agree, variant 1 has better overview and you are less likely to make some mistakes.

I found is missing where you will see resolved identity of address.

You mean to see an identity of address when you insert the address into the recipient field?

• i guess we could also add like a contact list where you would create needed contacts which could then be suggested when you type in the address/name of the contact? or is entering the address enough and simply displaying the identity of an address?

I might see issue when u decide to change sender, but that could be pulled from menu I guess, but would be nice to be easy but that could be for later iteration.

What use case would this be exactly? You mean swithing to a different wallet/account?

[exezbcz]

What use case would this be exactly? You mean swithing to a different wallet/account?

The option/button to change the account is not essential. It is good to have the context of the account you are signed in with, IMO. - its already there.

Another thing is the nonconnected state. Once #5820 gets merged, there will only be a button to get to the screen if you log in, but what if the user receives a direct link somehow? Do you know if the connect sidebar displays right away?

[JustLuuuu]

Correct me, but I don't see copy reward me link option in your new design - will it be added? We still need that :))

With decimals, I would go for a dot (.), a comma is used for example in Slovakia and its not that popular.

[EthVlad]

Correct me, but I don't see copy reward me link option in your new design - will it be added? We still need that :))

It will I am counting on it :)) but I want to ask, would you prefer it to be on this screen right away or is ok to place it into the "more" button at the top right?

With decimals, I would go for a dot (.), a comma is used for example in Slovakia and its not that popular.

So dot "." for decimals and comma "," for thousands?

[JustLuuuu]

It will I am counting on it :)) but I want to ask, would you prefer it to be on this screen right away or is ok to place it into the "more" button at the top right?

more button is enough i believe - this feature is not used that much by users, mostly by us :))

So dot "." for decimals and comma "," for thousands?

exactly 🔥

[roiLeo]

I can see that current transfer is using dot. Found this comparison. Would probably go either Danish/Finnish way or GB/US. Wdyt?

Why Dannish/Finnish and not French? 😡

Or we can show numbers/date/time depending on the device language.

[EthVlad]

Why Dannish/Finnish and not French? 😡

I mean, French way is the same as our Czech way, so I wouldn't mind as well :D The question is whats would be considered as a most common way based on our user base.

But hey, if we can make this personalised, it might be an alternative as well. This would mean to have 3 ways to display (English, Spanish/German and French)

But for simlicity, I would prefer to have it one way.

[EthVlad]

Which flow regarding selecting what asset you want to you think would work better? Also is it possible to go with the Flow 2 when selecting different assets on different parachains/blockchains?

[exezbcz]

@VladoTheBoi I think the second flow works better

[roiLeo]

Same! small preference for flow 2 which seems to me more practical. Flow 1 design is looking good, but user will have to "change page" each time he would like to make a new transfer.

[EthVlad]

Thanks! Flow 2 it is then 🔥

[roiLeo]

Hello @VladoTheBoi where can we find design?

[EthVlad]

Hello @VladoTheBoi where can we find design?

Hi Leo, I am finishing some last touches. For the meantime, you can check here and follow up with any questions.

One thing tho I want to ask is whether its possible to create more of a "native" mobile look for modal. And have it like this below:

[EthVlad]

@kodadot/internal-dev I have a question regarding sending tx. Not sure what is the current gas fees situation on KSM or other parachains, but I guess it would be nice to offer the user option to speed up the tx in case its taking long time in confirmation? Are these cases of long confirmations / low initial gas fees frequent?

[daiagi]

@EthVlad i am not sure if increasing fees is an option on polkadot current fees are vanishingly low: in the example below fee for mint + list for sell is less then 1 cent

https://statemine.subscan.io/extrinsic/4720367-2

[EthVlad]

@daiagi I know, I checked myself but thats why I ask. Whether there were occasions when this could be handy high volatility periods of parachains (that I am not aware of). Its a minor thing, I will keep it in the figma if we ever want to implement this.

Also, can the tx be canceled when in confirmation?

And any comments on the mobile modal view? @roiLeo @daiagi

[daiagi]

i also prefer the 2nd design a few questions:

1. what is the content of the "3 dots" menu?

2. keep in mind that we can have different identities / no identity between chains, i.e in your example when switching to ksm the name "yangwao" could change

3. the transition between "same amount" / "different amounts" looks problematic to me, things disappear, things change width and titles. i would rethink that. for me it would make sense to use the "different amounts" design throughout, with only first field enabled, and enable for edit the rest of the amount fields when the switch is on

4. i am not sure can we calculate/ estimate network fees, can we @vikiival? edit: ok. we can: inclusion_fee

5. in the mobile design the bsx is cut, obviously it will need to move to second row or some other design choice, please clarify that in the figma file

[EthVlad]

i also prefer the 2nd design

Which one? Not sure to what are you reffering to.

1. what is the content of the "3 dots" menu?

Yes this one I didnt put in there, it would be just a small dropdown menu, with few options (pay me link, create recurring payment)

2. keep in mind that we can have different identities / no identity between chains, i.e in your example when switching to ksm the name "yangwao" could change

In that case, we would display the wallet address

3. the transition between "same amount" / "different amounts" looks problematic to me, things disappear, things change width and titles. i would rethink that. for me it would make sense to use the "different amounts" design throughout, with only first field enabled, and enable for edit the rest of the amount fields when the switch is on

Is it that problematic? This could be just an instant animation where the layout would change.

5. in the mobile design the bsx is cut, obviously it will need to move to second row or some other design choice, please clarify that in the figma file

The idea was that this area would be horizontaly scrollable (as we wont have that many different currencies as of rn)

[daiagi]

Which one? Not sure to what are you reffering to.

flow 2

Is it that problematic? This could be just an instant animation where the layout would change.

i admit that i am not a UX person so my opinion on the matter may have limited value but still , as a user i would expect flipping of a switch to maybe show/ hide 1 element, or to enable/disable fields changing layout seems to me confusing especially that the field of "amount to transfer" changes to "display currency" but occupies the same space seems confusing to me

[EthVlad]

I get the point. I mean there probably is no issue with leaving it in "Different amounts" by default and removing the enable button. This would also save one problem I had regarding the display units . The only difference would be that you would have to manually write down the amount which is not such a big deal in the end I think. It could look like this:

[EthVlad]

@daiagi So I've made the changes to the whole flow. Check it out here and let me know some further questions :)

[EthVlad]

Final design can be found here.

Feel free to grab.

[yangwao]

Continue to

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