feat: add blockchain logos

packages/bridge/public/blockchains/ETH.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26">
+    <g fill="none">
+        <path fill="#343434" d="M7.978 0L7.804 0.592 7.804 17.78 7.978 17.954 15.957 13.238z" transform="translate(4.875)"/>
+        <path fill="#8C8C8C" d="M7.978 0L0 13.238 7.978 17.954 7.978 9.612z" transform="translate(4.875)"/>
+        <path fill="#3C3C3B" d="M7.978 19.465L7.88 19.585 7.88 25.707 7.978 25.994 15.962 14.751z" transform="translate(4.875)"/>
+        <path fill="#8C8C8C" d="M7.978 25.994L7.978 19.465 0 14.751z" transform="translate(4.875)"/>
+        <path fill="#141414" d="M7.978 17.954L15.957 13.238 7.978 9.612z" transform="translate(4.875)"/>
+        <path fill="#393939" d="M0 13.238L7.978 17.954 7.978 9.612z" transform="translate(4.875)"/>
+    </g>
+</svg>

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 <div className="token-chain-logo">
+      <img className="token-logo" alt="" src={token?.logoURI} />
+      <img className="chain-logo" alt="" src={chain === ASSET_CHAIN.Ethereum ? '/blockchains/ETH.svg' : '/blockchains/solana.webp'} />
+  </div>;
 }

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;
+}

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<TransferRequest>({
     // TODO: update based on selected asset
     from: ASSET_CHAIN.Ethereum,
@@ -88,11 +89,16 @@ export const Transfer = () => {
           }, [setActiveSteps]);
 
           return <div>
-              <div>
+              <div style={{ display: 'flex' }}>
                 <div>
-                  <h6>{`ETH Mainnet -> Solana Mainnet`}</h6>
+                  <h5>{`ETH Mainnet -> Solana Mainnet`}</h5>
                   <h2>{formatAmount(request.amount || 0, 2)} {request.info?.name}</h2>
                 </div>
+                <div style={{ display: 'flex', marginLeft: 'auto', marginRight: 10 }}>
+                  <TokenDisplay asset={request.asset} chain={request.from} token={tokenMap.get(request.asset || '')} />
+                  <span style={{ margin: 15 }}>{'➔'}</span>
+                  <TokenDisplay asset={request.asset} chain={request.toChain} token={tokenMap.get(request.asset || '')} />
+                </div>
               </div>
               <div style={{ textAlign: 'left', display: 'flex', flexDirection: 'column' }}>
               {(() => {
@@ -119,7 +125,7 @@ export const Transfer = () => {
           description: <NotificationContent />,
           className: 'custom-class',
           style: {
-            width: 600,
+            width: 500,
           },
         });
 

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[] = [];