refactor: merge Token types (#7)

* refactor: merge Token types

* fix test

apps/aptos/components/Card/index.tsx

@@ -0,0 +1,9 @@
+import { AtomBox, AtomBoxProps } from '@pancakeswap/ui'
+
+const Card = (props: AtomBoxProps) => <AtomBox width="100%" padding="20px" borderRadius="default" {...props} />
+
+export const LightCard = (props: AtomBoxProps) => <AtomBox border="1" backgroundColor="backgroundAlt" {...props} />
+export const LightGreyCard = (props: AtomBoxProps) => <AtomBox border="1" backgroundColor="background" {...props} />
+export const GreyCard = (props: AtomBoxProps) => <AtomBox backgroundColor="dropdown" {...props} />
+
+export default Card

apps/aptos/components/Logo/CurrencyLogo.tsx

@@ -0,0 +1,52 @@
+import { ChainId, Currency, Token } from '@pancakeswap/sdk'
+import { BinanceIcon } from '@pancakeswap/uikit'
+import { useMemo } from 'react'
+import { WrappedTokenInfo } from '@pancakeswap/tokens'
+import styled from 'styled-components'
+import { useHttpLocations } from '@pancakeswap/hooks'
+import Logo from './Logo'
+
+const getTokenLogoURL = (token?: Token) => null
+
+const StyledLogo = styled(Logo)<{ size: string }>`
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+  border-radius: 50%;
+`
+
+export function CurrencyLogo({
+  currency,
+  size = '24px',
+  style,
+}: {
+  currency?: Currency
+  size?: string
+  style?: React.CSSProperties
+}) {
+  const uriLocations = useHttpLocations(currency instanceof WrappedTokenInfo ? currency.logoURI : undefined)
+
+  const srcs: string[] = useMemo(() => {
+    if (currency?.isNative) return []
+
+    if (currency?.isToken) {
+      const tokenLogoURL = getTokenLogoURL(currency)
+
+      if (currency instanceof WrappedTokenInfo) {
+        if (!tokenLogoURL) return [...uriLocations]
+        return [...uriLocations, tokenLogoURL]
+      }
+      if (!tokenLogoURL) return []
+      return [tokenLogoURL]
+    }
+    return []
+  }, [currency, uriLocations])
+
+  if (currency?.isNative) {
+    if (currency.chainId === ChainId.BSC) {
+      return <BinanceIcon width={size} style={style} />
+    }
+    return <StyledLogo size={size} srcs={[`/images/chains/${currency.chainId}.png`]} width={size} style={style} />
+  }
+
+  return <StyledLogo size={size} srcs={srcs} alt={`${currency?.symbol ?? 'token'} logo`} style={style} />
+}

apps/aptos/components/Logo/ListLogo.tsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+import { useHttpLocations } from '@pancakeswap/hooks'
+import Logo from './Logo'
+
+const StyledListLogo = styled(Logo)<{ size: string }>`
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+`
+
+export function ListLogo({
+  logoURI,
+  style,
+  size = '24px',
+  alt,
+}: {
+  logoURI: string
+  size?: string
+  style?: React.CSSProperties
+  alt?: string
+}) {
+  const srcs: string[] = useHttpLocations(logoURI)
+
+  return <StyledListLogo alt={alt} size={size} srcs={srcs} style={style} />
+}

apps/aptos/components/Logo/Logo.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react'
+import { HelpIcon } from '@pancakeswap/uikit'
+
+export const BAD_SRCS: { [imageSrc: string]: true } = {}
+
+export interface LogoProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  srcs: string[]
+}
+
+/**
+ * Renders an image by sequentially trying a list of URIs, and then eventually a fallback triangle alert
+ */
+const Logo: React.FC<React.PropsWithChildren<LogoProps>> = ({ srcs, alt, ...rest }) => {
+  const [, refresh] = useState<number>(0)
+
+  const src: string | undefined = srcs.find((s) => !BAD_SRCS[s])
+
+  if (src) {
+    return (
+      <img
+        {...rest}
+        alt={alt}
+        src={src}
+        onError={() => {
+          if (src) BAD_SRCS[src] = true
+          refresh((i) => i + 1)
+        }}
+      />
+    )
+  }
+
+  return <HelpIcon {...rest} />
+}
+
+export default Logo

apps/aptos/components/Logo/index.ts

@@ -0,0 +1,2 @@
+export * from './CurrencyLogo'
+export * from './ListLogo'

apps/aptos/components/SearchModal/CommonBases.tsx

@@ -0,0 +1,97 @@
+import { ChainId, Currency, Token } from '@pancakeswap/sdk'
+import { Text, QuestionHelper, AutoColumn, AutoRow } from '@pancakeswap/uikit'
+import styled from 'styled-components'
+import useNativeCurrency from 'hooks/useNativeCurrency'
+import { useTranslation } from '@pancakeswap/localization'
+
+import { SUGGESTED_BASES } from 'config/constants/exchange'
+// import { CurrencyLogo } from '../Logo'
+import { CommonBasesType } from './types'
+
+const ButtonWrapper = styled.div`
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 10px;
+`
+
+const BaseWrapper = styled.div<{ disable?: boolean }>`
+  border: 1px solid ${({ theme, disable }) => (disable ? 'transparent' : theme.colors.dropdown)};
+  border-radius: 10px;
+  display: flex;
+  padding: 6px;
+  align-items: center;
+  :hover {
+    cursor: ${({ disable }) => !disable && 'pointer'};
+    background-color: ${({ theme, disable }) => !disable && theme.colors.background};
+  }
+  background-color: ${({ theme, disable }) => disable && theme.colors.dropdown};
+  opacity: ${({ disable }) => disable && '0.4'};
+`
+
+const RowWrapper = styled.div`
+  white-space: nowrap;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  &::-webkit-scrollbar {
+    display: none;
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+`
+
+export default function CommonBases({
+  chainId,
+  onSelect,
+  selectedCurrency,
+  commonBasesType,
+}: {
+  chainId?: ChainId
+  commonBasesType
+  selectedCurrency?: Currency | null
+  onSelect: (currency: Currency) => void
+}) {
+  const native = useNativeCurrency()
+  const { t } = useTranslation()
+  const pinTokenDescText = commonBasesType === CommonBasesType.SWAP_LIMITORDER ? t('Common tokens') : t('Common bases')
+
+  return (
+    <AutoColumn gap="md">
+      <AutoRow>
+        <Text fontSize="14px">{pinTokenDescText}</Text>
+        {commonBasesType === CommonBasesType.LIQUIDITY && (
+          <QuestionHelper text={t('These tokens are commonly paired with other tokens.')} ml="4px" />
+        )}
+      </AutoRow>
+      <RowWrapper>
+        <ButtonWrapper>
+          <BaseWrapper
+            onClick={() => {
+              if (!selectedCurrency || !selectedCurrency.isNative) {
+                onSelect(native)
+              }
+            }}
+            disable={selectedCurrency?.isNative}
+          >
+            {/* TODO: aptos logo */}
+            {/* <CurrencyLogo currency={native} style={{ marginRight: 8 }} /> */}
+            <Text>{native?.symbol}</Text>
+          </BaseWrapper>
+        </ButtonWrapper>
+        {(chainId ? SUGGESTED_BASES[chainId] || [] : []).map((token: Token) => {
+          const selected = selectedCurrency?.equals(token)
+          return (
+            <ButtonWrapper>
+              <BaseWrapper onClick={() => !selected && onSelect(token)} disable={selected} key={token.address}>
+                {/* TODO: aptos logo */}
+                {/* <CurrencyLogo currency={token} style={{ marginRight: 8, borderRadius: '50%' }} /> */}
+                <Text>{token.symbol}</Text>
+              </BaseWrapper>
+            </ButtonWrapper>
+          )
+        })}
+      </RowWrapper>
+    </AutoColumn>
+  )
+}