hyperlane-xyz / hyperlane-warp-ui-template Goto Github PK

View Code? Open in Web Editor NEW

126.0 126.0 89.0 5.43 MB

A web app template for building Hyperlane Warp Route UIs

Home Page: https://hyperlane-warp-template.vercel.app

License: Other

JavaScript 4.48% TypeScript 91.64% CSS 3.88%

hyperlane interchain route template warp

hyperlane-warp-ui-template's People

Contributors

Stargazers

Watchers

Forkers

0xminer11 fachebot aditya-manit vinhyenvodoi98 gaurangtorvekar jacobpdn007 gnujoow nicodfs 0xweb30 jamalmdawar oguzutku1745 orb3-protocol hexaonelabs marcinspro nidz-the-fact nithish72312002 paulbalaji im-testers farhadfarhadian 34btc66 naazart ugrs2 redonao zynnevahar sirrhoneyy ltyu sinirlibiber ymm15 kevkevsmth q6crypto notional-labs hyprnetwork wangxiansheng00668 kongtoubaofu dabao8888 koreanselca farassasikin dehmyjss twiterfame wussav1 ardisssroland cacaemanurin kirlosaymn wangliusen wangduoyu0001 beaul0 hasdrid ogmoonboi mrsahilshaikh noqcks saeed76a atrama2 joyokon devzi1la avenbreaks jetr1x edaeray muzaffersaylan 0nch41n dieutx ashkan1987 pantea110 sertacbirdal sin3sin rollquaye many-things mmurrs anomalyfi ibrahimebci ramazanebci pinargulsen sinashariffi alexbharley molecula451 sunoukmun decentrio zkfarmoor nickmura mehmetebci 0xazdi turleshin bianyuanop jumpsre retrosoftlabs

hyperlane-warp-ui-template's Issues

Update to latest Wagmi + Rainbowkit

We're stuck on older versions for Ethers V5 support.
We'd need to adapt the SDK txs for Viem, as that's what newer Wagmi versions require.

Improves Warp UI wallet connection experience

Upgrade Wagmi, Viem, Cosmos-kit, and Solana libs

Replace Wagmi, Viem, and RainbowKit with v2 versions
Upgrade cosmos-kit to latest for bug fixes
Consider upgrading other cosmos libs such as cosmjs (may cause issues for injective patch)
Upgrade @solana/* libs for bug fixes

Preferably, these upgrades are made in unison with upgrades for the SDK's libs to avoid duplicate versions getting bundled.

Related, see discussion here: #153 (comment)

Handle USDT approval quirks

From USDT's contract code in etherscan:

    function approve(address _spender, uint _value) public onlyPayloadSize(2 * 32) {

        // To change the approve amount you first have to reduce the addresses`
        //  allowance to zero by calling `approve(_spender, 0)` if it is not
        //  already 0 to mitigate the race condition described here:
        //  https://github.com/ethereum/EIPs/issues/20#issuecomment-263524729
        require(!((_value != 0) && (allowed[msg.sender][_spender] != 0)));

        allowed[msg.sender][_spender] = _value;
        Approval(msg.sender, _spender, _value);
    }

Due to this quirk, there's an edge case we aren't currently covering. If a user does the approve tx and then following transfer tx isn't successful, the lingering approval amount can cause problems (unless the user retries the transfer with the exact same amount right away, in which case the previous approval will get used).

Epic: Reduce Warp UI tech debt

Patterns
5 points of complexity with lots of branching:

Balance checking
IGP quoting
Input validation
Transfer crafting
Adapter Factory

Rossy's Questions:

VMs: Are there new protocols that will not fit in the EVM, Solana, Cosmos buckets? e.g. adjacent to EVM like zkSync or Move or Fuel
ISM: Changes to gas: native chain token(s), token(s) for IGP, token you're transferring, token you're receiving (wrapping)
Warp Ui needs to understand which token is collateral vs synthetic in the context of multi-collateral

Architecture & Design
Schedule meeting with Nam, Rossy, Yorke, Avi, Paul to discuss

Make warp UI resilient to RPC failures during init (whole app fails)
Refactor balance checking to be more flexible
Refactor AdapterFactory to be smarter
Handle IBC nuances at Adapter layer
Handle Cosmos naked vs wasm divide better
Migrate logic from 4 pain points above in to adapters
Consider moving some IGP determination logic into the adapters
Consider removing NFT support (it's evm-only and maybe broken anyway)
Consider refactor of Route model

Diagram:
https://docs.google.com/drawings/d/1eeOlLwfHQtcJ1b2gSYkyWvXf3vZz6QmrJxOVa5nrC1Q/edit?usp=sharing

Completed

Refactor IGP related code: #98
Add support for async form validation

Tasks

Beta Give feedback

Investigate & prototype WarpCore engine #116

warp-UI
https://github.com/hyperlane-xyz/issues/issues/956
Implement WarpCore engine #129

warp-UI
Use WarpCore in CLI send transfer command hyperlane-monorepo#3259

CLI dx warp-route
Options

Warp UI: More recipient address validation

Prevent users from sending to recipient addresses that don't match the expected address format of the destination chain (e.g. an evm address to neutron, different cosmos chains with same address but different prefix)

Add Warp UI Testing Guide to Runbook

Tasks

Beta Give feedback

Create QA Guide for Hyperlane India to test (browsers/mobile, wallets)
Create funding process for QAing - Avi & Jon - deprioritize
Options

Deprioritized

E2E (keyfunding, fork)

Message signed on the wrong chain

Context

A user ended up signing a warp route transfer intended from inEVM on zkSync ⁠[discord]

Investigation

As per zksync and etherscan this happened a few times on other chains as well.

@jmrossy suspects imperfect wallet switching behavior within https://github.com/wevm/wagmi for this.

Potential Solutions

Some workarounds are:

adding more explicit wallet chain checks after switching (possibly hacky)
upgrading to wagmi 2
Possibly more user prompts to make sure that they are signing on the right chain (unfortunately wallets don't indicate the presence of calldata for a call to a non-existing contract)

Research UX approach for address confirmation

Context

We've seen tx where the address is sent to an address the user hasn't intended
Examples:

Wallets intercepting each other and ends up in another wallet, e.g. #85 Trust Wallet, Pontem
WalletConnect multiple accounts + wagmi choosing not the one
wagmi bug to not switch chains (zksync to arbitrum) #148

Solution Design

Rossy to explore different UX/IxD approaches and review other interchain defi apps. Considering removing self and/or adding more explicit confirmations around addresses.

Improve handling of Injective RPC flakiness

Add direct Ledger wallet support, including for Injective

This was originally included in the wallet list but disabled during the big Ledger hack a few months ago.
Recommend doing this task first: #173
And then adding Ledger to the wallet lists (see CosmosWalletContext and EvmWalletContext).

As for Injective support, that needs more investigation. The custom tx format patch applied to cosmjs may interfere with Ledger integration via cosmos-kit.

Rectify Routes on test inj bridge to inevm

Review the routes to select test tokens to enable bridge on injective testnet from inj to inevm as shown below.

Implement `WarpCore` engine

Building on research in #116 and Discord discussion decision

Improve wallet presentation in sidebar

Sentry error sampling rate doesn't seem to work

Despite very low sentry sample rates, the monthly error quotas are burned through quickly. Typically after 5-10 days in a month.

We should reach out to Sentry support to confirm and hopefully resolve the filter issue

Support NPM package-based chain and token logos

The Warp UI prod instances should be able to operate without any runtime queries to Github. This is needed to avoid the IP rate limiting but is also desirable for security.

Pre-req: hyperlane-xyz/hyperlane-registry#118

Support for notification banner and/or remote route disabling

Chain and Token fields should be smarter

Current behavior:

Chain fields: When a user selects a from/to chain, the other field still allows them to select any other chain, even if there's no warp route with that combination.

Token field: The token field shows only the tokens for the selected chains.

Desired behavior:

Chain fields: When one chain field set, the other field shows still shows all chains but invalid options are disabled (greyed out).

Token field: The token field always shows all tokens but invalid options (based on to/from chains) are disabled (greyed out)

Warp Route UI NFT support

The WarpRoute UI currently only works with HypERC20 and HypErc20Collateral. This ticket encapsulates the work neccessary to support the NFT versions of these contracts

Bug report: next build for Warp UI

Bug report from community dev:

Vercel deploy doesn't work when attempting to run ‘next build’ on a fresh Warp ui template, seems like a known bug with next.js where that version of @types/react package doesn't register and it keeps telling you to reinstall.

Downgrading to 18.0.1 resolved it, but still got ‘unknown error’ when attempting deploy to Vercel.

Investigate speed up for warp ui route fetching

Warp route UI should support HypNative

Investigate & prototype `WarpCore` engine

see parent issue for reducing warp ui tech debt

to be reviewed by yorke, kunal, paul

Max button seamlessly accounts for gas

Calculate both local and interchain gas
Subtract gas from max amount - dynamic updating when quotes change
Communicating to users the breakdown of their total amount minus gas
Storing in the tx history

Add xERC20 token standard support to WarpCore

Context

We are adding support for open token standards, including xERC20 and Bridged USDC hyperlane-xyz/hyperlane-monorepo#3486

Task

Based on the smart contract changes in hyperlane-xyz/hyperlane-monorepo#3618

We need to add first-class support in our tooling, including deployment via SDK/CLI and the Warp UI.
Update deploy warp route & warp UI docs as well as example files

False Positive Tick Mark for Failed Transactions in Bridge History

Issue Description
After a transaction fails on the bridge, the transaction history still shows a tick mark indicating a successful transaction.

Steps to Reproduce:

Initiate a transaction on the bridge.
Ensure the transaction fails ( beacause I selected the max TIAN token of Neutron Chain I forget to left some token to use as gas fee).
Check the bridge history and observe the tick mark.

Expected Behavior:
The history should accurately reflect the status of the transaction. If a transaction fails, it should show a failure status (e.g., a cross mark or an error symbol) instead of a tick mark.

Link ( https://www.mintscan.io/neutron/tx/EEADD7ADD119461913B2A82E30BCEC68A4024DEC9BDC5C24C1CE85C61674B403 )

Additional Information:

Browser: Chrome 114.0.5735.199
Network: Neturon to Celestia
Other Context: Any other information that might be relevant, such as any recent updates or changes to the system before the issue occurred.

Suggestion:

To address this issue, I think it would be beneficial to:

-Double-check the transaction status from the backend or blockchain before updating the UI to make sure it reflects the actual outcome.
-Improve error handling so that failed transactions show a clear failure status (maybe a cross mark or an error icon) instead of a tick mark.
-Update the UI to make it easier to differentiate between successful and failed transactions with different colors or icons.
-Provide users with more detailed notifications when a transaction fails, explaining what went wrong and how they can fix it.
-Ensure thorough testing to confirm that the issue is resolved and the transaction history is accurate.
ThankYou

https://hyperlane-warp-template.vercel.app/ is broken

Report: issue connecting to Metamask in Firefox

Investigate issue reported with wallet connection in Firefox.
Likely related to MetaMask/detect-provider#31 and MetaMask/metamask-extension#3133 which have caused issues in the past for Next apps with CSP

Support OKX wallet / explicitly surface Keplr errors

Someone in Discord was having intermittent issues with Keplr wallet. They also had the OKX wallet installed. Sometimes when trying to connect to Keplr, the OKX wallet would silently take precedence. The addresses in the side panel would relate to the OKX wallet addresses despite saying "Keplr" on them. We should:

Either explicitly support the OKX wallets / show them on the right side as "OKX" and surface to the user there was an error with Keplr
Just surface errors connecting to Keplr and have the user try again

Context

Persist transfer history to local storage

Current behavior:

The tx history data stored in the zustand store is not persisted.

Desired behavior:

Persist and rehydrate the transfer state to browser local storage for a semi-durable history of the user's transfers from the UI. We must also expand the transfer data in the zustand store (and storage) to include the following (which will be required for #31):

The form values (chains, token, amount, recipient)
The the origin chain tx hash
The time + date

Create new wallet flyout menu

Current behavior:

The transfer history is somewhat accessible from the transfer modal (TransfersStatusModal)
The WalletControlBar and TransfersStatusBar are two separate dropdown components in the Header.
The WalletControlBar is always visible but the TransfersStatusBar shows once a transfer has been initiated.

Desired behavior:

Merge TransfersStatusBar and WalletControlBar into a new flyout menu similar to the wallet menu on app.uniswap.org

See mockups below or the Figma file here.

Note: Ignore the fonts in the Figma/mockups, just a bug. Use the existing fonts in the tailwind theme.

IGP fees displayed in UI

Atm, there's no indication in the UI what the IGP fees will be / what they are
Originally, if IGP fees exceeded the user balance, then it would just say that some error occurred when signing. As a hack in #60, I put a check when submitting a tx that would show a very ugly toast with some basic info
We should add a section in the IGP in the review tx details card
This is most important for the EVM. We should still have the ability to support Sealevel ofc via adapters, but for now we can consider just hardcoding an estimated amount

Enable deeplinking to transfers

#30 and #31 are prerequisites

Current behavior:

No way to access transfer details directly via a link

Desired behavior:

Transfer data is encoded into a URL and deep-links auto-display the transfer details modal. This must work for both the user that initiated the transfer and users that did not.

IBC transfer failures from Neutron

https://discord.com/channels/935678348330434570/1264865399082586142

Improve visibility into transactions processing

State of Transaction

Current state of tx
Estimated time to completion, e.g. Stargate

Timeline Widget

Current behavior:
For most chains, the TransfersStatusModal shows a Timeline widget

Desired behavior:

Two improvements are needed:

The individual segments of the timeline should clickable external links to the corresponding transaction on the target chain's block explorer (example tx page.
The results from the useMessageTimeline hook (see Timeline in TransfersStatusModal) should be cached when the message is confirmed to be delivered so we don't re-request that data each time.

Item 1 will require changes to the timeline widget, which is in a separate repo here:
https://github.com/hyperlane-xyz/hyperlane-widgets - we may want to move this into monorepo

Use the multiProvider's method to get the explorer tx link.

Avoid recklesslyUnprepared mode in wagmi tx prep

https://github.com/hyperlane-xyz/hyperlane-warp-ui-template/blob/nambrot/use-token-decimals/src/features/transfer/useTokenTransfer.ts#L78

Error loading site

There is an error with loading the site. The following message is displayed:

inue-button" class="outline-button">{continue-button}<div id="continue-always-wrapper"><label for="continue-always" id="continue-always-text" class="checkbox-container"><span id="block-continue-always" style="margin-left: 10px;">{continue-always} <input type="checkbox" id="continue-always" name="continue-always"/> <span class="checkmark"><div class="divider"><section class="rounded-card" id="upgrade-protection" style="display: none;"><div id="upgrade-protection-details"><h3 id="block-level-up">{block-level-up}

<span id="block-level-up-info">{block-level-up-info}
<a href="https://malwarebytes.com/premium?guard=1&utm_source=BGreco&utm_medium=block_page\" target="_blank" id="block-level-up-info-link" class="link">{block-level-up-info-link} <span id="block-level-up-info-contd">{block-level-up-info-contd}

<a href="https://malwarebytes.com/premium?guard=1&utm_source=BGreco&utm_medium=block_page\" target="_blank" id="block-get-started" class="outline-button">{block-get-started}<picture id="upgrade-protection-image"><source srcset="../assets/level-up-illustration-dark.svg" media="(prefers-color-scheme: dark)"><img src="../assets/level-up-illustration.svg" alt="Level up illustration"/><section id="learn-more"><img src="../assets/tooltip-black.svg" alt="Learn more icon"/>

<span id="block-learn-more">{block-learn-more} <a target="_blank" id="block-learn-more-link" href="https://www.malwarebytes.com/cybersecurity\" class="link">{block-learn-more-link}

"Self" address should not fall back to using the `cosmos` prefix

There can sometimes be an issue e.g. getting the Neutron address, which then results in the Cosmos-prefixed address being used instead. This could happen because:

The SelfButton address is retrieved here https://github.com/hyperlane-xyz/hyperlane-warp-ui-template/blob/neutron/src/features/transfer/TransferTokenForm.tsx#L390
which uses this logic https://github.com/hyperlane-xyz/hyperlane-warp-ui-template/blob/neutron/src/features/wallet/hooks.tsx#L137-L152
which gets a list of accounts from useAccounts, which iiuc tries to get an address for each Cosmos chain in this call https://github.com/hyperlane-xyz/hyperlane-warp-ui-template/blob/neutron/src/features/wallet/hooks.tsx#L88. This includes cosmoshub in the addresses, and if it's unable to get an address for a chain then it's just skipped. Something must've happened here with the Neutron address, where the Neutron address wasn't able to be retreived. This is consistent with there being no neutron wallet address on the SideBarMenu as shown in https://discord.com/channels/935678348330434570/935678477246554132/1175864482430451722
Back in the logic for deciding what address to use for Self, we fallback to the first address if we can't find an address for the desired chain. The first address must be the cosmoshub one https://github.com/hyperlane-xyz/hyperlane-warp-ui-template/blob/neutron/src/features/wallet/hooks.tsx#L146-L151

Some suggestions:

Maybe just outright give an error and tell them to refresh? or retry if we get errors?
If we're confident that simply converting an address with a bech32 prefix like "cosmos" into one with the correct bech32 prefix is 100% safe, we could consider doing this

Can't find my bridged Tia.n on Arbitrum

Transactoin is completed. Can't see my tokens on any chain anymore.
Here is the tx: 65D4DC5B6A7F026241663FA7D038905A987786EFD1E91BE02EE55C60EB4D54BF

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.