Skip to content

Commit

Permalink
Bridge page: Style updates (#123)
Browse files Browse the repository at this point in the history 
* Brige page: style updates

* Bridge page: improve styling
  • Loading branch information
@wildmolasses
wildmolasses authored Nov 10, 2023
1 parent 8e32265 commit 1b3753c
Showing 1 changed file with 74 additions and 78 deletions.
152 changes: 74 additions & 78 deletions pages/[id]/bridge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -210,98 +210,47 @@ const Bridge = () => {
<Head>
<title>Cross Chain Voting: Bridge</title>
</Head>
<div className="flex flex-row justify-center align-center items-top content-center">
<CardWithHeader header={'Bridge tokens'} className="w-full lg:max-w-2xl m-5">
<div className="flex flex-row max-w-lg w-full justify-center align-center items-top content-center mx-auto">
<CardWithHeader header={'Bridge tokens'} className="w-full m-5">
<div className="flex flex-col">
{/* Top row */}
<div className="flex flex-row justify-between items-center">
<div className="flex flex-col justify-between items-center">
{/* Source data */}
<div className="relative flex flex-grow w-32 flex-col rounded-lg bg-gray-100 px-6 py-5 shadow-sm">
<h3 className="gray-600 font-bold">From</h3>
<div>{source.chain.name}</div>
<div className="mt-3">
<span className="gray-600 font-bold">Balance</span>
<br />
<div className="items-center flex">
{mounted && source.token ? source.token.formatted : '0.00'}{' '}
<div className="ml-5 gray-600 font-bold">
{mounted && source.token ? source.token.symbol : 'Token'}
</div>
<Image
className="ml-2"
src={source.tokenLogo}
width={40}
height={40}
alt={`${source.token?.symbol} logo`}
/>
{source.chain.id === 420 && (
<>
<div className="flex justify-end -ml-3 -mb-8 z-10">🗳️</div>
<Image
className="-ml-12 -mt-8"
src={source.chainLogo}
width={16}
height={16}
alt={`${source.chain.name} logo`}
/>
</>
)}
</div>
</div>
</div>

<BalanceBox
label="From"
chainName={source.chain.name}
tokenLogo={source.tokenLogo}
formattedBalance={source.token?.formatted}
chainLogo={source.chainLogo}
tokenSymbol={source.token?.symbol}
isFV={bridgeTarget === BridgeTarget.L1}
/>
{/* Switch direction button */}
<div className="grow-0 mx-5 flex flex-col items-center">
<ArrowLongRightIcon className="h-10 w-10 text-gray-400" />
<div className="grow-0 flex flex-col items-center">
<button
type="button"
className="mt-2 rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
className="my-4 rounded-full bg-white px-3 py-3 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
onClick={handleSwitchDirection}
>
Switch Direction
<ArrowLongDownIcon className="h-5 w-5 text-gray-400" />
</button>
</div>
{/* Target data */}
<div className="mt-3 relative flex flex-grow w-32 flex-col rounded-lg border bg-gray-100 px-6 py-5 shadow-sm">
<h3 className="gray-600 font-bold">To</h3>
<div>{target.chain.name}</div>
<div className="mt-3">
<span className="gray-600 font-bold">Balance</span>
<br />
<div className="items-center flex">
{mounted && target.token ? target.token.formatted : '0.00'}{' '}
<div className="ml-5 gray-600 font-bold">
{mounted && target.token ? target.token.symbol : 'Token'}
</div>
<Image
className="ml-2 w-10"
src={target.tokenLogo}
width={40}
height={40}
alt={`${target.token?.symbol} logo`}
/>
{target.chain.id === 420 && (
<>
<div className="flex justify-end -ml-3 -mb-8 z-10">🗳️</div>
<Image
className="w-4 -ml-12 -mt-8"
src={target.chainLogo}
width={16}
height={16}
alt={`${source.chain.name} logo`}
/>
</>
)}
</div>
</div>
</div>
<BalanceBox
label="To"
chainName={target.chain.name}
tokenLogo={target.tokenLogo}
formattedBalance={target.token?.formatted}
chainLogo={target.chainLogo}
tokenSymbol={target.token?.symbol}
isFV={bridgeTarget === BridgeTarget.L2}
/>
</div>
{/* Bottom row: Input form */}
<div className="m-4">
<div className="mt-7 mx-2">
<label htmlFor="amount" className="block text-sm font-medium leading-6 text-gray-900">
Amount
</label>

<div className="relative mt-2 rounded-md shadow-sm">
<input
type="number"
Expand Down Expand Up @@ -338,7 +287,7 @@ const Bridge = () => {
{errorReason}&nbsp;
</p>

<div>
<div className="my-6">
<span className="block text-sm font-medium leading-6 text-gray-900">
Wormhole relayer fee
</span>
Expand Down Expand Up @@ -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 : (
<div className="flex flex-row items-center px-5 justify-between w-full rounded-lg bg-gray-50 py-9 shadow-md h-32">
<div className="flex flex-col justify-between h-full">
<label className="gray-600 font-bold text-sm">{label}</label>
<div>{chainName}</div>
</div>
<div className="flex flex-col justify-between h-full">
<label className="gray-600 font-bold text-sm">Balance</label>
<div className="items-center flex ml-2">
<div className="relative mr-3">
<Image src={tokenLogo} width={24} height={24} alt={`${tokenSymbol} logo`} />
{isFV && <div className="absolute -right-1 -bottom-2 text-sm">🗳️</div>}
{chainLogo && (
<Image
className="absolute -top-1 -left-2"
src={chainLogo}
width={14}
height={14}
alt={`${chainName} logo`}
/>
)}
</div>
{formattedBalance || '0.00'} <div className="ml-5 gray-600">{tokenSymbol || 'Token'}</div>
</div>
</div>
</div>
);
};

export default Bridge;

0 comments on commit 1b3753c

Please sign in to comment.