EVM bridge with design

[cloudflare-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	79d5ff5
Status:	✅  Deploy successful!
Preview URL:	https://3428fb69.wallet-2tl.pages.dev
Branch Preview URL:	https://evm-bridge-with-design.wallet-2tl.pages.dev

View logs

[aaroncox]

When loading the page without metamask, it says transfer failed.

The design we landed on should show the interface with a "connect to metamask" button when the EVM is selected.

[aaroncox]

The dropdowns shouldn't just be basic dropdowns.

They were supposed to be a popup that displays the possible transfer options, including more than just EVM - like in the future, REX and IBC.

[aaroncox]

Few other notes:

• I believe we landed on calling this section "Transfer", not "EVM Bridge".
• Subtitle and description on the page should be "Transfer tokens between your accounts".
• The "Continue" button should be disabled if metamask isn't connected.
• The spacing/formatting on the confirmation screen is narrow and doesn't match the design.
• Clicking "Entire Balance" doesn't enable the "Continue" button.
• Switching the value of the originating dropdown shouldn't automatically set destination value, it should empty it.
• Switching the active account should reset the entire form.

[aaroncox]

With an unconnected wallet, I'm still able to proceed even though the button is disabled.

That button probably shouldn't let me click it!

[aaroncox]

Can we change the URL?

It's currently /evm/swap. It should probably be /transfer.

The "Send & Receive" tokens page is /transfer at the moment though, so maybe that should just be /send?

[aaroncox]

The transfer confirmation screen from EVM -> EOS lost its styles

Should be this, but probably without the "edit" buttons

[aaroncox]

The "finished" screen is also unstyled

Should be

[aaroncox]

We need to rework how fees are done.

I had 0 EOS on my native balance and entered transfer "1.0000 EOS" from the EVM to my native account, and this was the result:

I only received the 0.9968. The result should have been that I now have 1.0000 EOS in my native account and the fee should have been deducted from the EVM balance. The end goal is that whatever the user types in as the amount to transfer, is the amount that is transferred, plus the fee.

I assume this also needs to be fixed on the EOS side 🤔

[aaroncox]

We need cache busting of some kind on balances after you perform a transfer.

I just performed a "transfer entire balance to EVM" and refreshed the page multiple times, and my balance still shows as

[aaroncox]

When transferring from Native -> EVM, you're presented with this screne:

This is a different screen than if you went from EVM -> Native. I don't think they should be different. It should be the same as shown here, with a "new transfer" button that takes you back to the transfer screen.

[dafuga]

The transfer confirmation screen from EVM -> EOS lost its styles

Should be this, but probably without the "edit" buttons

Yeah, my bad, I'll put a border with radius like in the design.

You are ok with the values that are displayed though, right? I don't know if we need to show the memo field and I also think that the fee and received amounts are pretty important.

[dafuga]

We need cache busting of some kind on balances after you perform a transfer.

I just performed a "transfer entire balance to EVM" and refreshed the page multiple times, and my balance still shows as

I think it might be because it takes a while for the balance to get updated. If you leave the page opened for a bit, does the correct balance end up being displayed?

[dafuga]

The "finished" screen is also unstyled

Should be

That's because the native -> evm transaction uses the common TxFollower component which we can't use for evm -> native transactions. I can make an EvmTxFollower component that looks similar to the native one, but it will be a bit different.

[dafuga]

We need to rework how fees are done.

I had 0 EOS on my native balance and entered transfer "1.0000 EOS" from the EVM to my native account, and this was the result:

I only received the 0.9968. The result should have been that I now have 1.0000 EOS in my native account and the fee should have been deducted from the EVM balance. The end goal is that whatever the user types in as the amount to transfer, is the amount that is transferred, plus the fee.

I assume this also needs to be fixed on the EOS side 🤔

I actually started off doing it this way, but it didn't work in situations where the entire balance is transferred because some amount needs to be left over to pay the transfer fees 😄 One option would be to calculate the fee on the form page and deduct it from the maximum amount that the user can withdraw. I figured that that could be confusing for some users though which is why I opted for the current implementation (which is also simpler to implement).

[aaroncox]

Yeah, my bad, I'll put a border with radius like in the design.

You are ok with the values that are displayed though, right? I don't know if we need to show the memo field and I also think that the fee and received amounts are pretty important.

Yeah, I think the values are probably fine. It's just purely the styles here, being the border, spacing, fonts, etc. It looks completely unstyled at the moment

[aaroncox]

I think it might be because it takes a while for the balance to get updated. If you leave the page opened for a bit, does the correct balance end up being displayed?

I thought we actually had caching somewhere in Unicove to prevent spamming the APIs, and we had some way to invalidate that 🤔

Not sure though now that you say this. It does eventually update, it just takes like 15-30 seconds or something

[aaroncox]

That's because the native -> evm transaction uses the common TxFollower component which we can't use for evm -> native transactions. I can make an EvmTxFollower component that looks similar to the native one, but it will be a bit different.

My main concern was that it's just completely unstyled. The design has a specific look to it that we should make the EvmTxFollower match

[aaroncox]

I actually started off doing it this way, but it didn't work in situations where the entire balance is transferred because some amount needs to be left over to pay the transfer fees 😄 One option would be to calculate the fee on the form page and deduct it from the maximum amount that the user can withdraw. I figured that that could be confusing for some users though which is why I opted for the current implementation (which is also simpler to implement).

Calculating on the form field when the user clicks "Send entire balance" is probably the cleanest way to make both scenarios work 🤔

Maybe what we need is on the right side of the form, we show a status change, that then shows the total. So below the "to" field it then shows:

• Amount Received
• Fee
• Total transferred

Then that "total transferred" field will match the entire balance, and the amount received will be accurate.

However when a user inputs a specific number (1 for example), it'll show:

• Amount Received: 1
• Fee: 0.0120
• Total transferred: 1.0120

[aaroncox]

Whenever I first load into the page with a fresh session, I get errors. This is a browser without metamask, but we should still handle this since just loading into an error isn't a good experience.

[aaroncox]

When typing in an amount greater than my balance from EVM to Native, simply by typing it throws an error and pulls me away from the form. Typing shouldn't cause this error to appear like that.