From 1b3753c5fd168e6d0124d3ac1f69c028798b6cef Mon Sep 17 00:00:00 2001 From: Ed Mazurek Date: Fri, 10 Nov 2023 18:05:36 +0200 Subject: [PATCH] Bridge page: Style updates (#123) * Brige page: style updates * Bridge page: improve styling --- pages/[id]/bridge.tsx | 152 ++++++++++++++++++++---------------------- 1 file changed, 74 insertions(+), 78 deletions(-) diff --git a/pages/[id]/bridge.tsx b/pages/[id]/bridge.tsx index 5bac531..d0a7003 100644 --- a/pages/[id]/bridge.tsx +++ b/pages/[id]/bridge.tsx @@ -7,7 +7,7 @@ import { useState } from 'react'; import { formatUnits, maxUint256, parseAbi, parseUnits } from 'viem'; import { classNames } from '@/util'; import { ZERO_ADDRESS } from '@/util/constants'; -import { ArrowLongRightIcon } from '@heroicons/react/20/solid'; +import { ArrowLongDownIcon } from '@heroicons/react/20/solid'; import { useBalances } from '@/hooks/useBalances'; import { useFees } from '@/hooks/useFees'; import { useAccount, useContractRead, useNetwork } from 'wagmi'; @@ -210,98 +210,47 @@ const Bridge = () => { Cross Chain Voting: Bridge -
- +
+
{/* Top row */} -
+
{/* Source data */} -
-

From

-
{source.chain.name}
-
- Balance -
-
- {mounted && source.token ? source.token.formatted : '0.00'}{' '} -
- {mounted && source.token ? source.token.symbol : 'Token'} -
- {`${source.token?.symbol} - {source.chain.id === 420 && ( - <> -
🗳️
- {`${source.chain.name} - - )} -
-
-
- + {/* Switch direction button */} -
- +
{/* Target data */} -
-

To

-
{target.chain.name}
-
- Balance -
-
- {mounted && target.token ? target.token.formatted : '0.00'}{' '} -
- {mounted && target.token ? target.token.symbol : 'Token'} -
- {`${target.token?.symbol} - {target.chain.id === 420 && ( - <> -
🗳️
- {`${source.chain.name} - - )} -
-
-
+
{/* Bottom row: Input form */} -
+
-
{ {errorReason} 

-
+
Wormhole relayer fee @@ -412,4 +361,51 @@ const Bridge = () => { ); }; +export const BalanceBox = ({ + chainName, + formattedBalance, + tokenSymbol, + tokenLogo, + chainLogo, + isFV, + label, +}: { + chainName: string; + formattedBalance?: string; + tokenSymbol?: string; + tokenLogo: string; + chainLogo?: string; + isFV: boolean; + label: 'From' | 'To'; +}) => { + const mounted = useHasMounted(); + return !mounted ? undefined : ( +
+
+ +
{chainName}
+
+
+ +
+
+ {`${tokenSymbol} + {isFV &&
🗳️
} + {chainLogo && ( + {`${chainName} + )} +
+ {formattedBalance || '0.00'}
{tokenSymbol || 'Token'}
+
+
+
+ ); +}; + export default Bridge;