feature: add tooltip to asset cell (#1345)

* feature: add tooltip to asset cell * fix: typo * wip: ReactNode tooltip so that we can pass in link * feature: add fee asset tooltip * update text link component * fix: revert changes to text links * revert changes to text links * fix: maintain compatibility with existing text links * use correct location variable * fix: remove log * fix: tooltip const
interlay · Jun 30, 2023 · 6f8afd8 · 6f8afd8 · vercel · Jun 30, 2023
1 parent fadf8ba
commit 6f8afd8
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 8 deletions.
diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json
@@ -638,6 +638,7 @@
   },
   "wallet": {
     "available_assets": "Available assets",
+    "get_asset": "Get {{token}}",
     "no_assets_available": "No assets available",
     "total_governance_locked": "Total {{token}} Locked",
     "available_to_stake": "Available to stake",

diff --git a/src/component-library/TextLink/TextLink.tsx b/src/component-library/TextLink/TextLink.tsx
@@ -20,9 +20,11 @@ type TextLinkProps = Props & NativeAttrs;
 // TODO: merge this with CTALink
 const TextLink = forwardRef<HTMLAnchorElement, TextLinkProps>(
   ({ color = 'primary', external, to, underlined, size, weight, icon, children, ...props }, ref): JSX.Element => {
+    const location = typeof to === 'string' ? { pathname: to as string } : to;
+
     const linkProps: TextLinkProps = external
-      ? { to: { pathname: to as string }, target: '_blank', rel: 'noreferrer' }
-      : { to };
+      ? { to: location, target: '_blank', rel: 'noreferrer' }
+      : { to: location };
 
     return (
       <BaseTextLink

diff --git a/src/components/DataGrid/AssetCell.tsx b/src/components/DataGrid/AssetCell.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 
-import { CoinIcon, Flex, FlexProps, FontSize, IconSize, Span } from '@/component-library';
+import { InformationCircle } from '@/assets/icons';
+import { CoinIcon, Flex, FlexProps, FontSize, IconSize, Span, Tooltip } from '@/component-library';
 
 import { StyledCellTag } from './DataGrid.style';
 
@@ -10,19 +11,25 @@ type Props = {
   size?: IconSize;
   textSize?: FontSize;
   tag?: ReactNode;
+  tooltip?: ReactNode;
 };
 
 type InheritAttrs = Omit<FlexProps, keyof Props>;
 
 type AssetCellProps = Props & InheritAttrs;
 
-const AssetCell = ({ ticker, tickers, size, tag, textSize = 's', ...props }: AssetCellProps): JSX.Element => (
+const AssetCell = ({ ticker, tickers, size, tag, textSize = 's', tooltip, ...props }: AssetCellProps): JSX.Element => (
   <Flex gap='spacing2' alignItems='center' {...props}>
     <CoinIcon ticker={ticker} tickers={tickers} size={size || (tickers ? 'lg' : 'md')} />
     <Span size={textSize} weight='bold'>
       {ticker}
     </Span>
     {tag && <StyledCellTag>{tag}</StyledCellTag>}
+    {tooltip && (
+      <Tooltip label={tooltip}>
+        <InformationCircle size='s' />
+      </Tooltip>
+    )}
   </Flex>
 );
 

diff --git a/src/config/links.ts b/src/config/links.ts
@@ -11,6 +11,7 @@ const INTERLAY_TERMS_AND_CONDITIONS_LINK =
 const KINTSUGI_TERMS_AND_CONDITIONS_LINK =
   'https://github.com/interlay/terms/blob/master/kintsugi-dapp-terms-of-use.pdf';
 const INTERLAY_USE_WRAPPED_CURRENCY_LINK = 'https://docs.interlay.io/#/interlay/earn-with-ibtc';
+const INTERLAY_GET_ASSETS_LINK = 'https://docs.interlay.io/#/guides/assets';
 const KINTSUGI_USE_WRAPPED_CURRENCY_LINK = 'https://docs.interlay.io/#/kintsugi/Earn-With-kBTC';
 const INTERLAY_GOVERNANCE_LINK = 'https://interlay.subsquare.io/';
 const KINTSUGI_GOVERNANCE_LINK = 'https://kintsugi.subsquare.io';
@@ -35,6 +36,7 @@ export {
   INTERLAY_DOCS_LINK,
   INTERLAY_DOS_AND_DONTS_DOCS_LINK,
   INTERLAY_EMAIL_LINK,
+  INTERLAY_GET_ASSETS_LINK,
   INTERLAY_GITHUB_LINK,
   INTERLAY_GOVERNANCE_LINK,
   INTERLAY_SUBSCAN_LINK,

diff --git a/src/config/relay-chains.tsx b/src/config/relay-chains.tsx
@@ -41,6 +41,7 @@ import { ReactComponent as KintsugiLogoWithTextIcon } from '@/assets/img/kintsug
 import { ReactComponent as KusamaLogoIcon } from '@/assets/img/kusama-logo.svg';
 import {
   INTERLAY_CROWDLOAN_LINK,
+  INTERLAY_DOCS_LINK,
   INTERLAY_GOVERNANCE_LINK,
   INTERLAY_SUBSCAN_LINK,
   INTERLAY_TERMS_AND_CONDITIONS_LINK,
@@ -68,6 +69,7 @@ let TERMS_AND_CONDITIONS_LINK: string;
 let USE_WRAPPED_CURRENCY_LINK: string;
 let GOVERNANCE_LINK: string;
 let SUBSCAN_LINK: string;
+let DOCS_LINK: string;
 let WRAPPED_TOKEN: WrappedCurrency;
 let RELAY_CHAIN_NATIVE_TOKEN: RelayChainNativeToken;
 let GOVERNANCE_TOKEN: GovernanceCurrency;
@@ -133,6 +135,7 @@ switch (process.env.REACT_APP_RELAY_CHAIN_NAME) {
     USE_WRAPPED_CURRENCY_LINK = INTERLAY_USE_WRAPPED_CURRENCY_LINK;
     GOVERNANCE_LINK = INTERLAY_GOVERNANCE_LINK;
     SUBSCAN_LINK = INTERLAY_SUBSCAN_LINK;
+    DOCS_LINK = INTERLAY_DOCS_LINK;
     WRAPPED_TOKEN = InterBtc;
     RELAY_CHAIN_NATIVE_TOKEN = Polkadot;
     GOVERNANCE_TOKEN = Interlay;
@@ -179,6 +182,7 @@ switch (process.env.REACT_APP_RELAY_CHAIN_NAME) {
     USE_WRAPPED_CURRENCY_LINK = KINTSUGI_USE_WRAPPED_CURRENCY_LINK;
     GOVERNANCE_LINK = KINTSUGI_GOVERNANCE_LINK;
     SUBSCAN_LINK = KINTSUGI_SUBSCAN_LINK;
+    DOCS_LINK = INTERLAY_DOCS_LINK;
     WRAPPED_TOKEN = KBtc;
     RELAY_CHAIN_NATIVE_TOKEN = Kusama;
     GOVERNANCE_TOKEN = Kintsugi;
@@ -234,6 +238,7 @@ export {
   BRIDGE_PARACHAIN_NAME,
   BridgeParachainLogoIcon,
   CROWDLOAN_LINK,
+  DOCS_LINK,
   GOVERNANCE_LINK,
   GOVERNANCE_TOKEN,
   GOVERNANCE_TOKEN_SYMBOL,

diff --git a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx
@@ -3,12 +3,13 @@ import { ReactNode, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { convertMonetaryAmountToValueInUSD, formatUSD } from '@/common/utils/utils';
-import { P, Switch, theme } from '@/component-library';
+import { P, Switch, TextLink, theme } from '@/component-library';
 import { useMediaQuery } from '@/component-library/utils/use-media-query';
 import { Cell } from '@/components';
 import { AssetCell, DataGrid } from '@/components/DataGrid';
 import { GOVERNANCE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains';
 import { FEE_TICKERS } from '@/utils/constants/currency';
+import { EXTERNAL_QUERY_PARAMETERS } from '@/utils/constants/links';
 import { getCoinIconProps } from '@/utils/helpers/coin-icon';
 import { getTokenPrice } from '@/utils/helpers/prices';
 import { BalanceData } from '@/utils/hooks/api/tokens/use-get-balances';
@@ -17,6 +18,8 @@ import { useGetVestingData } from '@/utils/hooks/api/use-get-vesting-data';
 
 import { ActionsCell } from './ActionsCell';
 
+const queryString = require('query-string');
+
 enum AvailableAssetsColumns {
   ASSET = 'asset',
   PRICE = 'price',
@@ -43,22 +46,43 @@ const AvailableAssetsTable = ({ balances, pooledTickers }: AvailableAssetsTableP
   const { data: vestingData } = useGetVestingData();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
+  const isFeeToken = (ticker: string) => FEE_TICKERS.includes(ticker);
+
   const [showAllBalances, setShowAllBalances] = useState(false);
 
   const rows: AvailableAssetsRows[] = useMemo(() => {
     const data = balances ? Object.values(balances) : [];
+
     const filteredData = showAllBalances
       ? data
-      : data.filter((balance) => FEE_TICKERS.includes(balance.currency.ticker) || !balance.transferable.isZero());
+      : data.filter((balance) => isFeeToken(balance.currency.ticker) || !balance.transferable.isZero());
 
     return filteredData.map(
       ({ currency, transferable }): AvailableAssetsRows => {
+        const tooltip = isFeeToken(currency.ticker) && (
+          <TextLink
+            color='secondary'
+            size='s'
+            external
+            icon
+            to={{
+              pathname: 'https://docs.interlay.io/#/guides/assets',
+              search: queryString.stringify({
+                [EXTERNAL_QUERY_PARAMETERS.DOCS.ASSET.ID]: currency.ticker.toLowerCase()
+              })
+            }}
+          >
+            {t('wallet.get_asset', { token: currency.ticker })}
+          </TextLink>
+        );
+
         const asset = (
           <AssetCell
             size={isMobile ? 'xl2' : undefined}
             textSize={isMobile ? 'base' : undefined}
             marginBottom={isMobile ? 'spacing4' : undefined}
             {...getCoinIconProps(currency)}
+            tooltip={tooltip}
           />
         );
 
@@ -103,7 +127,7 @@ const AvailableAssetsTable = ({ balances, pooledTickers }: AvailableAssetsTableP
         };
       }
     );
-  }, [balances, showAllBalances, isMobile, prices, pooledTickers, vestingData?.isClaimable]);
+  }, [balances, showAllBalances, isMobile, prices, pooledTickers, vestingData?.isClaimable, t]);
 
   const actions = (
     <Switch isSelected={showAllBalances} onChange={(e) => setShowAllBalances(e.target.checked)}>

diff --git a/src/utils/constants/links.ts b/src/utils/constants/links.ts
@@ -1,5 +1,5 @@
 import { BANXA_LINK } from '@/config/links';
-import { SUBSCAN_LINK } from '@/config/relay-chains';
+import { DOCS_LINK, SUBSCAN_LINK } from '@/config/relay-chains';
 
 const URL_PARAMETERS = Object.freeze({
   VAULT: {
@@ -48,6 +48,9 @@ const EXTERNAL_URL_PARAMETERS = Object.freeze({
 
 const EXTERNAL_PAGES = Object.freeze({
   BANXA: `${BANXA_LINK}`,
+  DOCS: {
+    ASSETS: `${DOCS_LINK}/#/guides/assets`
+  },
   SUBSCAN: {
     BLOCKS: `${SUBSCAN_LINK}/block`,
     BLOCK: `${SUBSCAN_LINK}/block/:${EXTERNAL_URL_PARAMETERS.SUBSCAN.BLOCK.HASH}`,
@@ -74,6 +77,11 @@ const EXTERNAL_QUERY_PARAMETERS = Object.freeze({
     WALLET_ADDRESS: 'walletAddress',
     FIAT_TYPE: 'fiatType',
     COIN_TYPE: 'coinType'
+  },
+  DOCS: {
+    ASSET: {
+      ID: 'id'
+    }
   }
 });