From 75e48fefe46ddc9067447f5f3612f5ed7565083b Mon Sep 17 00:00:00 2001
From: bartosz-lipinski <264380+bartosz-lipinski@users.noreply.github.com>
Date: Tue, 9 Mar 2021 00:01:12 -0600
Subject: [PATCH] feat: add blockchain logos

---
 packages/bridge/public/blockchains/ETH.svg    |  10 ++++++++
 .../bridge/public/blockchains/solana.webp     | Bin 0 -> 1214 bytes
 .../src/components/TokenDisplay/index.tsx     |  14 +++++++++--
 .../src/components/TokenDisplay/style.less    |  23 ++++++++++++++++++
 .../bridge/src/components/Transfer/index.tsx  |  14 ++++++++---
 packages/bridge/src/models/bridge/transfer.ts |   2 --
 6 files changed, 55 insertions(+), 8 deletions(-)
 create mode 100644 packages/bridge/public/blockchains/ETH.svg
 create mode 100644 packages/bridge/public/blockchains/solana.webp
 create mode 100644 packages/bridge/src/components/TokenDisplay/style.less

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 @@
+<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>
diff --git a/packages/bridge/public/blockchains/solana.webp b/packages/bridge/public/blockchains/solana.webp
new file mode 100644
index 0000000000000000000000000000000000000000..e96608387180ee4523abdf6d7133fd802e76a7ea
GIT binary patch
literal 1214
zcmex=<NpH&0WUXCHwH#V1_nkTWcYuZ!I^=TnT3UgnH5N|va+(V^Kh^O0Y5i4CyyY%
zkdPq1prEjrjJU9fl&GMfgrbC$tgO7eys)^Eijtg)jGVk2$Ph-LR(3XaJ`N5(IT1k-
zIg-Ku0}O&33`Pt_%#2D5OoEKef{g!<FvtVl$;t=@3{b$x#LNP8B?l)LH&DS=0R|>U
zW@aX!`+*(+s;&jfGq4D<3Mm>ovIz$!vMUve7&T5@$f4}C@t|nX#SbdRNkvVZTw>x9
zl2WQ_>Kd9_CZ=ZQ7M51dF0O9w9-dyoA)#U65s^{JDXD4c8JStdC8cHM6_r)ZEv;?s
z9i3g1CQq3<ZTgIvvlcC0vUJ(<6)RV5+Pr1!w(UE1?mBe%$kAiRPn<k;>GGAU*RJ2V
zdF$b$$4{O<d;a3(tB;>PfBE|D`;VW$K>lK6V1{@LNJ2b@<}X2@znFm0!om*n7b8<S
z5Hkz1uqqm|2{{I`Cl(4T88vc<I89u*@gS$NanJ|Rq@s&lVk#yNRX>8f2KE_o9%~}Y
zXK;@p{B?_ghnW!=dCY<g_6$ER@0GO*d>w5k`r+NiN4dTwZ^cf&TgNqBi-R$wRAnB+
zugjj>Q#8E{{DR6njxIf0rSL=lqrjI7kN-0qI8py&RlyJSj}reG&IsB6;c5TR(6y@M
z$#!?1%|0S^S{vg{DldF{HhFK^Jk1};kM((8ykGs=DyHmP$E%)4uhbQ1Jm6tdxi0?x
z+UBg|p*+4aE|xDnJ<I)G<cb9PTq(0$pZ3FgO~rZl4?FFoKiF<t%yW6;q%Rx8r}RIx
zH+WcGn|(}s*N?zQ>ji(*M`q{po$?LRZt$6=V94k2`?1VQxqWl9mvcQ@rI&W~x8#+j
zQX8L4+WF@6WBYE~ebR^jGt~G0XAliq-&?2q?ME*A-~SBue_~VCAF-GJ_9L~d{y|Xv
zM^mjD*B`C_8C>?g`DX;=zVe$=KP$fc5A&fTPd3zldZvHvKf|-i`eXZrD-K6p54wC*
zOn>R$xr}W`(vz6%{xhh&Q~!PQ+uOLxAJ;ejiTfztvB&x0#J{^gyo=S%eHyPFFu`+1
zQDw{oHtA*jlHb?MtXJA&nZEPY15K?EWnV|PyJCkk7IhtYBX>mV3xB(v-Q^m^<tMry
zJ}j=(7Sug|t8CKTDZI-W>b5>VGAmShhuZeT*XME;AAJ3?{>-(hnL*P{%58VnSs${0
z7Cret12g-720{P${(}CW(^P<wcJV*Mk?^*EY(0OoH$IoxzGpw{Ki4Zq&MiOsQ+el)
z=^urIKF*nVDET+vZ22?OR;#@||M$6tbpLV*`MCvK0`Kj}3Y{8h>3et1w+&MQT~ioc
LMFNm9`~RB&uom<O

literal 0
HcmV?d00001

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