Feature/804 full token name (#806)

Closes #804 labels were sliced throughout the app, full labels left in tooltips
gnosis · Oct 30, 2021 · 54801d4 · 54801d4
1 parent bdb5de9
commit 54801d4
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 25 deletions.
diff --git a/src/components/auction/Claimer/index.tsx b/src/components/auction/Claimer/index.tsx
@@ -12,7 +12,7 @@ import {
 import { useWalletModalToggle } from '../../../state/application/hooks'
 import { DerivedAuctionInfo, useDerivedClaimInfo } from '../../../state/orderPlacement/hooks'
 import { AuctionIdentifier } from '../../../state/orderPlacement/reducer'
-import { getTokenDisplay, isTokenWETH, isTokenXDAI } from '../../../utils'
+import { getFullTokenDisplay, isTokenWETH, isTokenXDAI } from '../../../utils'
 import { Button } from '../../buttons/Button'
 import { ButtonAnchor } from '../../buttons/ButtonAnchor'
 import { ButtonType } from '../../buttons/buttonStylingTypes'
@@ -122,7 +122,7 @@ const Claimer: React.FC<Props> = (props) => {
         setUserConfirmedTx(false)
       })
 
-  const biddingTokenDisplay = useMemo(() => getTokenDisplay(biddingToken, chainId), [
+  const biddingTokenDisplay = useMemo(() => getFullTokenDisplay(biddingToken, chainId), [
     biddingToken,
     chainId,
   ])
@@ -137,11 +137,15 @@ const Claimer: React.FC<Props> = (props) => {
     [biddingTokenDisplay],
   )
 
-  const auctioningTokenDisplay = useMemo(() => getTokenDisplay(auctioningToken, chainId), [
+  const biddingTokenDisplayCut = biddingTokenDisplayWrapped.slice(0, 7)
+
+  const auctioningTokenDisplay = useMemo(() => getFullTokenDisplay(auctioningToken, chainId), [
     auctioningToken,
     chainId,
   ])
 
+  const auctioningTokenDisplayCut = auctioningTokenDisplay.slice(0, 7)
+
   const isLoading = useMemo(
     () =>
       (account && isDerivedClaimInfoLoading) || !claimableBiddingToken || !claimableAuctioningToken,
@@ -196,7 +200,7 @@ const Claimer: React.FC<Props> = (props) => {
                         symbol: biddingTokenDisplay,
                       }}
                     />
-                    <Text>{biddingTokenDisplayWrapped}</Text>
+                    <Text>{biddingTokenDisplayCut}</Text>
                     {showUnwrapButton && (
                       <span
                         className={`tooltipComponent`}
@@ -246,7 +250,7 @@ const Claimer: React.FC<Props> = (props) => {
                         symbol: auctioningTokenDisplay,
                       }}
                     />
-                    <Text>{auctioningTokenDisplay}</Text>
+                    <Text>{auctioningTokenDisplayCut}</Text>
                   </>
                 ) : (
                   '-'

diff --git a/src/components/auction/OrderPlacement/index.tsx b/src/components/auction/OrderPlacement/index.tsx
@@ -25,7 +25,7 @@ import { useTokenBalancesTreatWETHAsETH } from '../../../state/wallet/hooks'
 import {
   ChainId,
   EASY_AUCTION_NETWORKS,
-  getTokenDisplay,
+  getFullTokenDisplay,
   isTokenWETH,
   isTokenXDAI,
 } from '../../../utils'
@@ -222,11 +222,11 @@ const OrderPlacement: React.FC<OrderPlacementProps> = (props) => {
   }
 
   const pendingText = `Placing order`
-  const biddingTokenDisplay = useMemo(() => getTokenDisplay(biddingToken, chainId), [
+  const biddingTokenDisplay = useMemo(() => getFullTokenDisplay(biddingToken, chainId), [
     biddingToken,
     chainId,
   ])
-  const auctioningTokenDisplay = useMemo(() => getTokenDisplay(auctioningToken, chainId), [
+  const auctioningTokenDisplay = useMemo(() => getFullTokenDisplay(auctioningToken, chainId), [
     auctioningToken,
     chainId,
   ])

diff --git a/src/components/auctions/AuctionInfoCard/index.tsx b/src/components/auctions/AuctionInfoCard/index.tsx
@@ -214,9 +214,8 @@ const AuctionInfoCard: React.FC<Props> = (props) => {
     }, 1000)
     return () => clearInterval(interval)
   }, [endTimeTimestamp])
-  const sliceLabel = (label) => {
-    return label.slice(0, 7)
-  }
+  const auctionSymbolBiddingToken = auctionInfo.symbolBiddingToken.slice(0, 7)
+  const auctionSymbolAuctioningToken = auctionInfo.symbolAuctioningToken.slice(0, 7)
   return (
     <Wrapper
       to={`/auction?auctionId=${auctionInfo.auctionId}&chainId=${Number(
@@ -226,8 +225,7 @@ const AuctionInfoCard: React.FC<Props> = (props) => {
     >
       <Top>
         <Tokens>
-          {sliceLabel(auctionInfo.symbolAuctioningToken)} /&nbsp;
-          {sliceLabel(auctionInfo.symbolBiddingToken)}
+          {auctionSymbolAuctioningToken} / {auctionSymbolBiddingToken}
         </Tokens>
         <Badge>{timeLeft && timeLeft > -1 ? formatSeconds(timeLeft) : '-'}</Badge>
       </Top>
@@ -248,13 +246,13 @@ const AuctionInfoCard: React.FC<Props> = (props) => {
           <span title={auctionInfo.order.volume + ' ' + auctionInfo.symbolAuctioningToken}>
             {abbreviation(auctionInfo.order.volume.toFixed(2)) + ` `}
           </span>
-          {sliceLabel(auctionInfo.symbolAuctioningToken)}
+          {auctionSymbolAuctioningToken}
         </Selling>
         <CurrentPrice>
           Current price:{' '}
-          {`${abbreviation(auctionInfo.currentClearingPrice.toString())} ${sliceLabel(
-            auctionInfo.symbolBiddingToken,
-          )} per ${sliceLabel(auctionInfo.symbolAuctioningToken)}`}
+          {`${abbreviation(
+            auctionInfo.currentClearingPrice.toString(),
+          )} ${auctionSymbolBiddingToken} per ${auctionSymbolAuctioningToken}`}
         </CurrentPrice>
       </Details>
       <Bottom>

diff --git a/src/components/token/UnregisteredToken/index.tsx b/src/components/token/UnregisteredToken/index.tsx
@@ -47,9 +47,8 @@ export const UnregisteredToken: React.FC<Props> = (props) => {
   const { size, symbol, ...restProps } = props
   const timestamp = React.useMemo(() => Date.now(), [])
   const tooltipId = `tooltip_${symbol}_${size}_${timestamp}`
-  const sliceLabel = (label) => {
-    return label.slice(0, 7)
-  }
+  const cuttedSymbol = symbol.slice(0, 7)
+
   return (
     <Wrapper
       data-for={tooltipId}
@@ -60,7 +59,7 @@ export const UnregisteredToken: React.FC<Props> = (props) => {
       {...restProps}
     >
       <Icon />
-      <Badge size={size}>{sliceLabel(symbol)}</Badge>
+      <Badge size={size}>{cuttedSymbol}</Badge>
       <ReactTooltip
         arrowColor={'#001429'}
         backgroundColor={'#001429'}

diff --git a/src/pages/Overview/index.tsx b/src/pages/Overview/index.tsx
@@ -68,7 +68,7 @@ const OverviewCommon = ({ allAuctions }: OverviewProps) => {
   allAuctionsSorted?.forEach((item) => {
     tableData.push({
       auctionId: `#${item.auctionId}`,
-      buying: item.symbolBiddingToken,
+      buying: item.symbolBiddingToken.slice(0, 7),
       chainId: getChainName(Number(item.chainId)),
       chevron: <Chevron />,
       date: (
@@ -85,7 +85,8 @@ const OverviewCommon = ({ allAuctions }: OverviewProps) => {
       ) : (
         'No'
       ),
-      selling: item.symbolAuctioningToken == 'WXDAI' ? 'XDAI' : item.symbolAuctioningToken,
+      selling:
+        item.symbolAuctioningToken == 'WXDAI' ? 'XDAI' : item.symbolAuctioningToken.slice(0, 7),
       status: new Date(item.endTimeTimestamp * 1000) > new Date() ? 'Ongoing' : 'Ended',
       symbol: (
         <DoubleLogo

diff --git a/src/state/orderPlacement/hooks.ts b/src/state/orderPlacement/hooks.ts
@@ -16,7 +16,7 @@ import { AuctionInfoDetail, useAuctionDetails } from '../../hooks/useAuctionDeta
 import { ClaimState } from '../../hooks/useClaimOrderCallback'
 import { useContract } from '../../hooks/useContract'
 import { useClearingPriceInfo } from '../../hooks/useCurrentClearingOrderAndVolumeCallback'
-import { ChainId, EASY_AUCTION_NETWORKS, getTokenDisplay, isTimeout } from '../../utils'
+import { ChainId, EASY_AUCTION_NETWORKS, getFullTokenDisplay, isTimeout } from '../../utils'
 import { getLogger } from '../../utils/logger'
 import { convertPriceIntoBuyAndSellAmount, getInverse } from '../../utils/prices'
 import { calculateTimeLeft } from '../../utils/tools'
@@ -241,7 +241,7 @@ export const useGetOrderPlacementError = (
     balanceIn &&
     amountIn &&
     balanceIn.lessThan(amountIn) &&
-    `Insufficient ${getTokenDisplay(amountIn.token, chainId)}` + ' balance.'
+    `Insufficient ${getFullTokenDisplay(amountIn.token, chainId)}` + ' balance.'
 
   const messageHigherInitialPrice = `Price must be higher than ${derivedAuctionInfo?.initialPrice?.toSignificant(
     5,

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -193,6 +193,13 @@ export function getTokenDisplay(token: Token, chainId: ChainId): string {
   )
 }
 
+// Always return a non-undefined token display
+export function getFullTokenDisplay(token: Token, chainId: ChainId): string {
+  if (isTokenXDAI(token.address, chainId)) return `XDAI`
+  if (isTokenWETH(token.address, chainId)) return `ETH`
+  return token?.symbol || token?.name || token?.address || '🤔'
+}
+
 export function isTokenXDAI(tokenAddress?: string, chainId?: ChainId): boolean {
   return !!tokenAddress && !!chainId && tokenAddress == WETH[chainId].address && chainId === 100
 }