+
@@ -47,7 +48,7 @@ export function ChainSelectField({ name, label, chainIds, onChange, disabled }:
onClick={onClick}
>
-
+
{getChainDisplayName(field.value, true)}
diff --git a/src/features/chains/ChainSelectModal.tsx b/src/features/chains/ChainSelectModal.tsx
index 0668ae9..ff9f7ab 100644
--- a/src/features/chains/ChainSelectModal.tsx
+++ b/src/features/chains/ChainSelectModal.tsx
@@ -1,4 +1,5 @@
-import { ChainIcon } from '../../components/icons/ChainIcon';
+import { ChainLogo } from '@hyperlane-xyz/widgets';
+
import { Modal } from '../../components/layout/Modal';
import { getChainDisplayName, getChainMetadata } from './metadata';
@@ -32,7 +33,7 @@ export function ChainSelectListModal({
className="py-1.5 px-2 text-sm flex items-center rounded hover:bg-gray-100 active:bg-gray-200 transition-all duration-200"
onClick={onSelectChain(c.id)}
>
-
+
{getChainDisplayName(c.id, true)}
))}
@@ -69,7 +70,7 @@ export function ChainSelectListModal({
// className="py-1.5 px-2 text-sm flex items-center rounded hover:bg-gray-100 active:bg-gray-200 transition-all duration-200"
// onClick={onSelectChain(c.id)}
// >
-//
+//
//
{getChainDisplayName(c.id, true)}
//
// ))}
@@ -82,7 +83,7 @@ export function ChainSelectListModal({
// className="py-1.5 px-2 text-sm flex items-center rounded hover:bg-gray-100 active:bg-gray-200 transition-all duration-200"
// onClick={onSelectChain(c.id)}
// >
-//
+//
//
{getChainDisplayName(c.id, true)}
//
// ))}
diff --git a/src/features/chains/metadata.ts b/src/features/chains/metadata.ts
index 1e58829..c3271ce 100644
--- a/src/features/chains/metadata.ts
+++ b/src/features/chains/metadata.ts
@@ -1,6 +1,6 @@
-import type { Chain as WagmiChain } from '@wagmi/chains';
+import type { Chain as WagmiChain } from '@wagmi/core';
-import { ChainMetadata, chainIdToMetadata, objMap, wagmiChainMetadata } from '@hyperlane-xyz/sdk';
+import { ChainMetadata, chainIdToMetadata, objMap } from '@hyperlane-xyz/sdk';
import CustomChainConfig from '../../consts/chains.json';
@@ -41,9 +41,9 @@ export function getChainDisplayName(chainId?: number, shortName = false): string
}
// Metadata formatted for use in Wagmi config
-export function getWagmiChainConfig() {
+export function getWagmiChainConfig(): WagmiChain[] {
return Object.values({
- ...wagmiChainMetadata,
+ ...objMap(chainIdToMetadata, toWagmiConfig),
...objMap(chainIdToCustomConfig as Record
, toWagmiConfig),
});
}
@@ -55,7 +55,10 @@ function toWagmiConfig(_: any, metadata: ChainMetadata): WagmiChain {
name: metadata.displayName,
network: metadata.name as string,
nativeCurrency: metadata.nativeToken,
- rpcUrls: { default: { http: [metadata.publicRpcUrls[0].http] } },
+ rpcUrls: {
+ default: { http: [metadata.publicRpcUrls[0].http] },
+ public: { http: [metadata.publicRpcUrls[0].http] },
+ },
blockExplorers: metadata.blockExplorers.length
? {
default: {
diff --git a/src/features/tokens/routes.ts b/src/features/tokens/routes.ts
index 62173ab..d99a17c 100644
--- a/src/features/tokens/routes.ts
+++ b/src/features/tokens/routes.ts
@@ -4,6 +4,7 @@ import { useMemo } from 'react';
import { utils } from '@hyperlane-xyz/utils';
import { areAddressesEqual, isValidAddress, normalizeAddress } from '../../utils/addresses';
+import { logger } from '../../utils/logger';
import { getHypErc20CollateralContract } from '../contracts/hypErc20';
import { getProvider } from '../providers';
@@ -138,23 +139,28 @@ export function useTokenRoutes() {
} = useQuery(
['token-routes'],
async () => {
+ logger.info('Searching for token routes');
const tokens: ListedTokenWithHypTokens[] = [];
for (const token of getAllTokens()) {
+ logger.info('Inspecting token:', token.symbol);
const provider = getProvider(token.chainId);
const collateralContract = getHypErc20CollateralContract(
token.hypCollateralAddress,
provider,
);
+ logger.info('Fetching connected domains');
const domains = await collateralContract.domains();
-
- const hypTokens: Array<{ chainId: number; address: Address }> = [];
- // TODO parallelization here would be good, either with RPC batching or just promise.all, but
- // avoiding it for now due to limitations of public RPC providers
- for (const chainId of domains) {
- const hypTokenAddrBytes = await collateralContract.routers(chainId);
- const hypTokenAddr = utils.bytes32ToAddress(hypTokenAddrBytes);
- hypTokens.push({ chainId, address: normalizeAddress(hypTokenAddr) });
- }
+ logger.info(`Found ${domains.length} connected domains:`, domains);
+
+ logger.info('Getting domain router address');
+ const hypTokenByteAddressesP = domains.map((d) => collateralContract.routers(d));
+ const hypTokenByteAddresses = await Promise.all(hypTokenByteAddressesP);
+ const hypTokenAddresses = hypTokenByteAddresses.map((b) => utils.bytes32ToAddress(b));
+ logger.info(`Addresses found:`, hypTokenAddresses);
+ const hypTokens = hypTokenAddresses.map((addr, i) => ({
+ chainId: domains[i],
+ address: normalizeAddress(addr),
+ }));
tokens.push({ ...token, hypTokens });
}
diff --git a/src/features/transfer/TransferTokenCard.tsx b/src/features/transfer/TransferTokenCard.tsx
index cd8ceec..6b61a97 100644
--- a/src/features/transfer/TransferTokenCard.tsx
+++ b/src/features/transfer/TransferTokenCard.tsx
@@ -1,6 +1,7 @@
// import { IconButton } from '../../components/buttons/IconButton';
+import { WideChevron } from '@hyperlane-xyz/widgets';
+
import { Spinner } from '../../components/animation/Spinner';
-import { HyperlaneWideChevron } from '../../components/icons/HyperlaneChevron';
import { Card } from '../../components/layout/Card';
import { useTokenRoutes } from '../tokens/routes';
@@ -13,7 +14,7 @@ export function TransferTokenCard() {
return (
-
+
Send Tokens
diff --git a/src/features/transfer/TransferTokenForm.tsx b/src/features/transfer/TransferTokenForm.tsx
index 049e78f..1b75409 100644
--- a/src/features/transfer/TransferTokenForm.tsx
+++ b/src/features/transfer/TransferTokenForm.tsx
@@ -3,11 +3,12 @@ import { Form, Formik, useFormikContext } from 'formik';
import { useMemo, useState } from 'react';
import { useAccount } from 'wagmi';
+import { WideChevron } from '@hyperlane-xyz/widgets';
+
import { ConnectAwareSubmitButton } from '../../components/buttons/ConnectAwareSubmitButton';
import { IconButton } from '../../components/buttons/IconButton';
import { SolidButton } from '../../components/buttons/SolidButton';
import { ChevronIcon } from '../../components/icons/Chevron';
-import { HyperlaneChevron } from '../../components/icons/HyperlaneChevron';
import { TextField } from '../../components/input/TextField';
import { config } from '../../consts/config';
import SwapIcon from '../../images/icons/swap.svg';
@@ -40,6 +41,8 @@ export function TransferTokenForm({ tokenRoutes }: { tokenRoutes: RoutesMap }) {
// Flag for if form is in input vs review mode
const [isReview, setIsReview] = useState(false);
+ // Flag for if loading modal is open (visible)
+ const [isModalOpen, setIsModalOpen] = useState(false);
const onSubmitForm = (values: TransferFormValues) => {
logger.debug('Reviewing transfer form values:', JSON.stringify(values));
@@ -77,15 +80,17 @@ export function TransferTokenForm({ tokenRoutes }: { tokenRoutes: RoutesMap }) {
return {};
};
+ const onStartTransactions = () => {
+ setIsModalOpen(true);
+ };
const onDoneTransactions = () => {
setIsReview(false);
// Consider clearing form inputs here
};
- const {
- isLoading: isTransferLoading,
- dismissIsLoading,
- triggerTransactions,
- } = useTokenTransfer(onDoneTransactions);
+ const { triggerTransactions, originTxHash } = useTokenTransfer(
+ onStartTransactions,
+ onDoneTransactions,
+ );
return (
@@ -106,15 +111,28 @@ export function TransferTokenForm({ tokenRoutes }: { tokenRoutes: RoutesMap }) {
/>
@@ -206,9 +224,10 @@ export function TransferTokenForm({ tokenRoutes }: { tokenRoutes: RoutesMap }) {
)}
setIsModalOpen(false)}
tokenRoutes={tokenRoutes}
+ originTxHash={originTxHash}
/>
)}
diff --git a/src/features/transfer/TransferTransactionsModal.tsx b/src/features/transfer/TransferTransactionsModal.tsx
index 9dda69d..935dd92 100644
--- a/src/features/transfer/TransferTransactionsModal.tsx
+++ b/src/features/transfer/TransferTransactionsModal.tsx
@@ -1,8 +1,13 @@
import { useFormikContext } from 'formik';
import { useAccount } from 'wagmi';
+import { chainIdToMetadata } from '@hyperlane-xyz/sdk';
+import { MessageStatus, MessageTimeline, useMessageTimeline } from '@hyperlane-xyz/widgets';
+
import { Spinner } from '../../components/animation/Spinner';
import { Modal } from '../../components/layout/Modal';
+import { links } from '../../consts/links';
+import { trimLeading0x } from '../../utils/addresses';
import { RouteType, RoutesMap, getTokenRoute } from '../tokens/routes';
import { TransferFormValues } from './types';
@@ -11,13 +16,16 @@ export function TransferTransactionsModal({
isOpen,
close,
tokenRoutes,
+ originTxHash,
}: {
isOpen: boolean;
close: () => void;
tokenRoutes: RoutesMap;
+ originTxHash: string | null;
}) {
const { address, isConnected, connector } = useAccount();
const isAccountReady = !!(address && isConnected && connector);
+ const connectorName = connector?.name || 'wallet';
const {
values: { sourceChainId, destinationChainId, tokenAddress },
@@ -25,25 +33,112 @@ export function TransferTransactionsModal({
const route = getTokenRoute(sourceChainId, destinationChainId, tokenAddress, tokenRoutes);
const requiresApprove = route?.type === RouteType.NativeToRemote;
+ const isPermisionlessRoute = !(
+ chainIdToMetadata[sourceChainId] && chainIdToMetadata[destinationChainId]
+ );
+
+ return (
+
+ {isPermisionlessRoute ? (
+
+ ) : (
+
+ )}
+
+ );
+}
+
+function Timeline({
+ isAccountReady,
+ requiresApprove,
+ connectorName,
+ originTxHash,
+}: {
+ isAccountReady: boolean;
+ requiresApprove: boolean;
+ connectorName: string;
+ originTxHash: string | null;
+}) {
+ const { stage, timings, message } = useMessageTimeline({
+ originTxHash: originTxHash || undefined,
+ });
return (
-
-
-
- {isAccountReady ? (
- <>
-
- {requiresApprove
- ? 'Attempting to send two transactions: Approve and TransferRemote'
- : 'Attempting to send transaction: TransferRemote'}
-
-
{`Sign with ${connector.name} to proceed`}
-
- ) : (
+
+
+ {isAccountReady ? (
+ <>
- Please connect wallet to proceed
+ {requiresApprove
+ ? 'Attempting to send two transactions: Approve and TransferRemote'
+ : 'Attempting to send transaction: TransferRemote'}
- )}
-
-
+
{`Sign with ${connectorName} to proceed`}
+
+ ) : (
+
+ Please connect wallet to proceed
+
+ )}
+ {message && (
+
+ Open Transaction in Hyperlane Explorer
+
+ )}
+
+
+ {isAccountReady ? (
+ <>
+
+ {requiresApprove
+ ? 'Attempting to send two transactions: Approve and TransferRemote'
+ : 'Attempting to send transaction: TransferRemote'}
+
+
{`Sign with ${connectorName} to proceed`}
+
+ ) : (
+
+ Please connect wallet to proceed
+
+ )}
+