From 57e612bda8bdaeb1b0aefd760bde11d71949ce5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rui=20Sim=C3=A3o?= <rui.daniel.simao@gmail.com>
Date: Mon, 19 Feb 2024 17:32:00 +0000
Subject: [PATCH] refactor(components): add logoUrl to token input

---
 .../src/TokenInput/FixedTokenInput.tsx        | 19 ++++++--
 .../src/TokenInput/TokenAdornment.tsx         | 44 +++++--------------
 .../src/TokenInput/TokenInput.style.tsx       |  9 +++-
 .../src/TokenInput/TokenListItem.tsx          | 11 +++--
 .../components/src/TokenInput/TokenSelect.tsx | 13 +++---
 .../stories/FixedTokenInput.stories.tsx       | 33 ++------------
 .../stories/SelectableTokenInput.stories.tsx  | 12 +++--
 7 files changed, 56 insertions(+), 85 deletions(-)

diff --git a/packages/components/src/TokenInput/FixedTokenInput.tsx b/packages/components/src/TokenInput/FixedTokenInput.tsx
index 48089f093..97c7860bd 100644
--- a/packages/components/src/TokenInput/FixedTokenInput.tsx
+++ b/packages/components/src/TokenInput/FixedTokenInput.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, forwardRef } from 'react';
 
-import { TokenAdornment, TokenTicker } from './TokenAdornment';
+import { TokenAdornment } from './TokenAdornment';
 import { BaseTokenInput, BaseTokenInputProps } from './BaseTokenInput';
 import { TokenInputBalance } from './TokenInputBalance';
 
@@ -9,7 +9,8 @@ type Props = {
   humanBalance?: string | number;
   balanceLabel?: ReactNode;
   onClickBalance?: (balance: string | number) => void;
-  ticker: TokenTicker;
+  ticker: string;
+  logoUrl: string;
 };
 
 type InheritAttrs = Omit<BaseTokenInputProps, keyof Props>;
@@ -18,7 +19,17 @@ type FixedTokenInputProps = Props & InheritAttrs;
 
 const FixedTokenInput = forwardRef<HTMLInputElement, FixedTokenInputProps>(
   (
-    { balance: balanceProp, humanBalance, balanceLabel, onClickBalance, ticker: tickerProp, isDisabled, id, ...props },
+    {
+      balance: balanceProp,
+      humanBalance,
+      balanceLabel,
+      onClickBalance,
+      ticker: tickerProp,
+      logoUrl,
+      isDisabled,
+      id,
+      ...props
+    },
     ref
   ): JSX.Element => {
     const balance = balanceProp !== undefined && (
@@ -36,7 +47,7 @@ const FixedTokenInput = forwardRef<HTMLInputElement, FixedTokenInputProps>(
       <BaseTokenInput
         ref={ref}
         balance={balance}
-        endAdornment={<TokenAdornment ticker={tickerProp} />}
+        endAdornment={<TokenAdornment logoUrl={logoUrl} ticker={tickerProp} />}
         id={id}
         isDisabled={isDisabled}
         {...props}
diff --git a/packages/components/src/TokenInput/TokenAdornment.tsx b/packages/components/src/TokenInput/TokenAdornment.tsx
index 5b7f5de73..09e1d31d6 100644
--- a/packages/components/src/TokenInput/TokenAdornment.tsx
+++ b/packages/components/src/TokenInput/TokenAdornment.tsx
@@ -1,46 +1,22 @@
-import { useMemo } from 'react';
-
-import { CoinIcon } from '../CoinIcon';
 import { FlexProps } from '../Flex';
 
-import { StyledTicker, StyledTokenAdornment } from './TokenInput.style';
-
-type SingleToken = string;
-
-type MultiToken = { text: string; icons: string[] };
-
-type TokenTicker = SingleToken | MultiToken;
+import { StyledTicker, StyledTokenAdornment, StyledTokenImg } from './TokenInput.style';
 
 type Props = {
-  ticker?: TokenTicker;
+  ticker: string;
+  logoUrl: string;
 };
 
 type NativeAttrs = Omit<FlexProps, keyof Props>;
 
 type TokenAdornmentProps = Props & NativeAttrs;
 
-const TokenAdornment = ({ ticker = '', ...props }: TokenAdornmentProps): JSX.Element => {
-  const { tickerText, tickers } = useMemo(() => {
-    if (typeof ticker === 'object') {
-      return {
-        tickerText: ticker.text,
-        tickers: ticker.icons
-      };
-    }
-
-    return {
-      tickerText: ticker,
-      tickers: undefined
-    };
-  }, [ticker]);
-
-  return (
-    <StyledTokenAdornment {...props} alignItems='center' gap='spacing1' justifyContent='space-evenly'>
-      <CoinIcon ticker={tickerText} tickers={tickers} />
-      <StyledTicker>{tickerText}</StyledTicker>
-    </StyledTokenAdornment>
-  );
-};
+const TokenAdornment = ({ ticker, logoUrl, ...props }: TokenAdornmentProps): JSX.Element => (
+  <StyledTokenAdornment {...props} alignItems='center' gap='spacing1' justifyContent='space-evenly'>
+    <StyledTokenImg alt={ticker} src={logoUrl} />
+    <StyledTicker>{ticker}</StyledTicker>
+  </StyledTokenAdornment>
+);
 
 export { TokenAdornment };
-export type { TokenAdornmentProps, TokenTicker };
+export type { TokenAdornmentProps };
diff --git a/packages/components/src/TokenInput/TokenInput.style.tsx b/packages/components/src/TokenInput/TokenInput.style.tsx
index 14abc59b2..3f34b5d67 100644
--- a/packages/components/src/TokenInput/TokenInput.style.tsx
+++ b/packages/components/src/TokenInput/TokenInput.style.tsx
@@ -42,6 +42,12 @@ const StyledTokenAdornment = styled(Flex)`
   overflow: hidden;
 `;
 
+const StyledTokenImg = styled.img`
+  height: ${theme.spacing.spacing6};
+  width: ${theme.spacing.spacing6};
+  border-radius: ${theme.rounded.full};
+`;
+
 const StyledTokenSelect = styled(StyledTrigger)`
   background-color: ${theme.tokenInput.endAdornment.bg};
   opacity: ${({ $isDisabled }) => $isDisabled && 0.5};
@@ -99,5 +105,6 @@ export {
   StyledBalance,
   StyledBalanceLabel,
   StyledTokenSelect,
-  StyledUSDAdornment
+  StyledUSDAdornment,
+  StyledTokenImg
 };
diff --git a/packages/components/src/TokenInput/TokenListItem.tsx b/packages/components/src/TokenInput/TokenListItem.tsx
index 33745a61f..99d87f197 100644
--- a/packages/components/src/TokenInput/TokenListItem.tsx
+++ b/packages/components/src/TokenInput/TokenListItem.tsx
@@ -1,24 +1,23 @@
 import { useCurrencyFormatter } from '@interlay/hooks';
 
-import { CoinIcon } from '../CoinIcon';
 import { Flex } from '../Flex';
 import { useSelectModalContext } from '../Select/SelectModalContext';
 import { Span } from '../Text';
 
-import { StyledListItemLabel, StyledListTokenWrapper } from './TokenInput.style';
+import { StyledListItemLabel, StyledListTokenWrapper, StyledTokenImg } from './TokenInput.style';
 import { TokenData } from './TokenSelect';
 
 type TokenListItemProps = { isDisabled?: boolean } & TokenData;
 
-const TokenListItem = ({ balance, balanceUSD, value, tickers, isDisabled }: TokenListItemProps): JSX.Element => {
-  const isSelected = useSelectModalContext().selectedItem?.key === value && !isDisabled;
+const TokenListItem = ({ balance, balanceUSD, ticker, logoUrl, isDisabled }: TokenListItemProps): JSX.Element => {
+  const isSelected = useSelectModalContext().selectedItem?.key === ticker && !isDisabled;
   const format = useCurrencyFormatter();
 
   return (
     <>
       <StyledListTokenWrapper alignItems='center' flex='1' gap='spacing2'>
-        <CoinIcon size={tickers ? 'lg' : 'md'} ticker={value} tickers={tickers} />
-        <StyledListItemLabel $isSelected={isSelected}>{value}</StyledListItemLabel>
+        <StyledTokenImg alt={ticker} src={logoUrl} />
+        <StyledListItemLabel $isSelected={isSelected}>{ticker}</StyledListItemLabel>
       </StyledListTokenWrapper>
       <Flex alignItems='flex-end' direction='column' flex='0' gap='spacing2'>
         <StyledListItemLabel $isSelected={isSelected}>{balance}</StyledListItemLabel>
diff --git a/packages/components/src/TokenInput/TokenSelect.tsx b/packages/components/src/TokenInput/TokenSelect.tsx
index 204cda0e1..7f063c033 100644
--- a/packages/components/src/TokenInput/TokenSelect.tsx
+++ b/packages/components/src/TokenInput/TokenSelect.tsx
@@ -1,23 +1,22 @@
 import { mergeProps } from '@react-aria/utils';
 
-import { CoinIcon } from '../CoinIcon';
 import { Flex } from '../Flex';
 import { Item, Select, ModalSelectProps } from '../Select';
 import { Span } from '../Text';
 
-import { StyledTicker, StyledTokenSelect } from './TokenInput.style';
+import { StyledTicker, StyledTokenImg, StyledTokenSelect } from './TokenInput.style';
 import { TokenListItem } from './TokenListItem';
 
 const Value = ({ data }: { data: TokenData }) => (
   <Flex alignItems='center' gap='spacing1' justifyContent='space-evenly'>
-    <CoinIcon size={data.tickers ? 'lg' : 'md'} ticker={data.value} tickers={data.tickers} />
-    <StyledTicker>{data.value}</StyledTicker>
+    <StyledTokenImg alt={data.ticker} src={data.logoUrl} />
+    <StyledTicker>{data.ticker}</StyledTicker>
   </Flex>
 );
 
 type TokenData = {
-  value: string;
-  tickers?: string[];
+  ticker: string;
+  logoUrl: string;
   balance: string | number;
   balanceUSD: number;
 };
@@ -35,7 +34,7 @@ const TokenSelect = ({ modalProps, ...props }: TokenSelectProps): JSX.Element =>
     type='modal'
   >
     {(data: TokenData) => (
-      <Item key={data.value} textValue={data.value}>
+      <Item key={data.ticker} textValue={data.ticker}>
         <TokenListItem {...data} />
       </Item>
     )}
diff --git a/packages/components/src/TokenInput/stories/FixedTokenInput.stories.tsx b/packages/components/src/TokenInput/stories/FixedTokenInput.stories.tsx
index 09382d30f..c44c2cf5f 100644
--- a/packages/components/src/TokenInput/stories/FixedTokenInput.stories.tsx
+++ b/packages/components/src/TokenInput/stories/FixedTokenInput.stories.tsx
@@ -14,31 +14,16 @@ export default {
     ticker: { control: 'select', options: Object.keys(coins) }
   },
   args: {
+    ticker: 'ETH',
+    logoUrl: 'https://ethereum-optimism.github.io/data/ETH/logo.svg',
     label: 'Amount'
   }
 } as Meta<typeof TokenInput>;
 
-export const Default: StoryObj<TokenInputProps> = {
-  args: {
-    ticker: 'BTC'
-  }
-};
-
-export const UnknownTicker: StoryObj<TokenInputProps> = {
-  args: {
-    ticker: 'ABCD'
-  }
-};
-
-export const MultiTokenTicker: StoryObj<TokenInputProps> = {
-  args: {
-    ticker: { text: 'LP Token', icons: ['BTC', 'ETH', 'USDT'] }
-  }
-};
+export const Default: StoryObj<TokenInputProps> = {};
 
 export const DefaultValue: StoryObj<TokenInputProps> = {
   args: {
-    ticker: 'BTC',
     defaultValue: '10'
   }
 };
@@ -52,15 +37,12 @@ const ControlledComponent = ({ value, valueUSD: valueUSDProp, ...args }: TokenIn
 };
 
 export const Controlled: StoryObj<TokenInputProps> = {
-  args: {
-    ticker: 'BTC'
-  },
+  args: {},
   render: ControlledComponent
 };
 
 export const WithValueUSD: StoryObj<TokenInputProps> = {
   args: {
-    ticker: 'BTC',
     valueUSD: 0
   },
   render: ControlledComponent
@@ -68,14 +50,12 @@ export const WithValueUSD: StoryObj<TokenInputProps> = {
 
 export const WithBalance: StoryObj<TokenInputProps> = {
   args: {
-    ticker: 'BTC',
     balance: '10'
   }
 };
 
 export const WithHumanBalance: StoryObj<TokenInputProps> = {
   args: {
-    ticker: 'BTC',
     balance: '10.901231231',
     humanBalance: '11'
   }
@@ -83,7 +63,6 @@ export const WithHumanBalance: StoryObj<TokenInputProps> = {
 
 export const WithCustomBalanceLabel: StoryObj<TokenInputProps> = {
   args: {
-    ticker: 'BTC',
     balance: '10',
     balanceLabel: 'Available'
   }
@@ -91,28 +70,24 @@ export const WithCustomBalanceLabel: StoryObj<TokenInputProps> = {
 
 export const WithDescription: StoryObj<TokenInputProps> = {
   args: {
-    ticker: 'BTC',
     description: 'Please enter your amount'
   }
 };
 
 export const WithErrorMessage: StoryObj<TokenInputProps> = {
   args: {
-    ticker: 'BTC',
     errorMessage: 'Please enter your amount'
   }
 };
 
 export const WithMultipleErrorMessage: StoryObj<TokenInputProps> = {
   args: {
-    ticker: 'BTC',
     errorMessage: ['Please enter your amount', 'Please enter your amount']
   }
 };
 
 export const Disabled: StoryObj<TokenInputProps> = {
   args: {
-    ticker: 'BTC',
     isDisabled: true
   }
 };
diff --git a/packages/components/src/TokenInput/stories/SelectableTokenInput.stories.tsx b/packages/components/src/TokenInput/stories/SelectableTokenInput.stories.tsx
index dd0d4e941..9df5f49ad 100644
--- a/packages/components/src/TokenInput/stories/SelectableTokenInput.stories.tsx
+++ b/packages/components/src/TokenInput/stories/SelectableTokenInput.stories.tsx
@@ -6,10 +6,14 @@ import * as coins from '../../../../icons/coin/src';
 import { TokenInput, TokenInputProps } from '..';
 
 const items = [
-  { balance: 1, value: 'BTC', balanceUSD: 10000 },
-  { balance: 2, value: 'ETH', balanceUSD: 900 },
-  { balance: 500, value: 'USDT', balanceUSD: 500 },
-  { balance: 120, value: 'LP Token', tickers: ['BTC', 'ETH', 'USDT'], balanceUSD: 230 }
+  { balance: 2, ticker: 'ETH', logoUrl: 'https://ethereum-optimism.github.io/data/ETH/logo.svg', balanceUSD: 900 },
+  { balance: 500, ticker: 'USDT', logoUrl: 'https://ethereum-optimism.github.io/data/USDT/logo.png', balanceUSD: 500 },
+  {
+    balance: 100,
+    ticker: 'USDC',
+    logoUrl: 'https://ethereum-optimism.github.io/data/BridgedUSDC/logo.png',
+    balanceUSD: 100
+  }
 ];
 
 export default {