diff --git a/packages/bridge/public/blockchains/ETH.svg b/packages/bridge/public/blockchains/ETH.svg new file mode 100644 index 0000000..dffd071 --- /dev/null +++ b/packages/bridge/public/blockchains/ETH.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/bridge/public/blockchains/solana.webp b/packages/bridge/public/blockchains/solana.webp new file mode 100644 index 0000000..e966083 Binary files /dev/null and b/packages/bridge/public/blockchains/solana.webp differ diff --git a/packages/bridge/src/components/TokenDisplay/index.tsx b/packages/bridge/src/components/TokenDisplay/index.tsx index e2d31b0..ab55bc7 100644 --- a/packages/bridge/src/components/TokenDisplay/index.tsx +++ b/packages/bridge/src/components/TokenDisplay/index.tsx @@ -1,5 +1,15 @@ +import { useConnectionConfig } from '@oyster/common'; +import { TokenInfo } from '@solana/spl-token-registry'; +import { debug } from 'console'; +import React from 'react'; +import { useEthereum } from '../../contexts'; import { ASSET_CHAIN } from "../../models/bridge/constants"; +import './style.less'; -export const TokenDisplay = ({ asset, chain }: { asset: string, chain: ASSET_CHAIN }) => { - return ''; +export const TokenDisplay = ({ asset, chain, token }: { asset?: string, chain?: ASSET_CHAIN, token?: TokenInfo }) => { + + return
+ + +
; } diff --git a/packages/bridge/src/components/TokenDisplay/style.less b/packages/bridge/src/components/TokenDisplay/style.less new file mode 100644 index 0000000..7650a1f --- /dev/null +++ b/packages/bridge/src/components/TokenDisplay/style.less @@ -0,0 +1,23 @@ +.token-chain-logo { + position: relative +} + +.token-logo { + border: 1px solid hsla(0,0%,50.2%,.5); + border-radius: 50px; + background: #fff; + width: 50px; + height: 50px; + padding: 2px; +} + +.chain-logo { + order: 1px solid hsla(0, 0%, 50.2%, 0.5); + border-radius: 20px; + position: absolute; + background: #fff; + width: 30px; + height: 30px; + bottom: 9px; + right: -5px; +} diff --git a/packages/bridge/src/components/Transfer/index.tsx b/packages/bridge/src/components/Transfer/index.tsx index 497c201..7f417e8 100644 --- a/packages/bridge/src/components/Transfer/index.tsx +++ b/packages/bridge/src/components/Transfer/index.tsx @@ -13,6 +13,7 @@ import { BigNumber } from 'ethers/utils'; import { Erc20Factory } from '../../contracts/Erc20Factory'; import { ProgressUpdate, transfer, TransferRequest } from '../../models/bridge'; import { useEthereum } from '../../contexts'; +import { TokenDisplay } from './../TokenDisplay'; const { useConnection } = contexts.Connection; const { useWallet } = contexts.Wallet; @@ -32,7 +33,7 @@ export const typeToIcon = (type: string, isLast: boolean) => { export const Transfer = () => { const connection = useConnection(); const { wallet } = useWallet(); - const { provider } = useEthereum(); + const { provider, tokenMap } = useEthereum(); const [request, setRequest] = useState({ // TODO: update based on selected asset from: ASSET_CHAIN.Ethereum, @@ -88,11 +89,16 @@ export const Transfer = () => { }, [setActiveSteps]); return
-
+
-
{`ETH Mainnet -> Solana Mainnet`}
+
{`ETH Mainnet -> Solana Mainnet`}

{formatAmount(request.amount || 0, 2)} {request.info?.name}

+
+ + {'➔'} + +
{(() => { @@ -119,7 +125,7 @@ export const Transfer = () => { description: , className: 'custom-class', style: { - width: 600, + width: 500, }, }); diff --git a/packages/bridge/src/models/bridge/transfer.ts b/packages/bridge/src/models/bridge/transfer.ts index 5748d1a..a0e3ff5 100644 --- a/packages/bridge/src/models/bridge/transfer.ts +++ b/packages/bridge/src/models/bridge/transfer.ts @@ -144,7 +144,6 @@ export const transfer = async ( ) )[0]; - console.log('Recipient: ', recipient.toBase58()); request.recipient = recipient.toBuffer(); const accounts = await getMultipleAccounts( @@ -152,7 +151,6 @@ export const transfer = async ( [mintKey.toBase58(), recipient.toBase58()], 'single', ); - debugger; const instructions: TransactionInstruction[] = []; const signers: Account[] = [];