feat: add Polkadot as currency (#1581)

closes #1578
PolkaGate · Oct 6, 2024 · 6435c62 · 6435c62
1 parent 350d1af
commit 6435c62
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 21 deletions.
diff --git a/packages/extension-polkagate/src/components/FormatPrice.tsx b/packages/extension-polkagate/src/components/FormatPrice.tsx
@@ -7,6 +7,7 @@ import { Grid, Skeleton, Typography } from '@mui/material';
 import React, { useMemo } from 'react';
 
 import { useCurrency } from '../hooks';
+import { ASSETS_AS_CURRENCY_LIST } from '../util/currencyList';
 import { amountToHuman } from '../util/utils';
 
 interface Props {
@@ -68,7 +69,7 @@ function FormatPrice ({ amount, decimalPoint = 2, decimals, fontSize, fontWeight
   }, [amount, decimals, num, price]);
 
   const _decimalPoint = useMemo(() => {
-    if (currency?.code && ['ETH', 'BTC'].includes(currency.code)) {
+    if (currency?.code && ASSETS_AS_CURRENCY_LIST.includes(currency.code)) {
       return DECIMAL_POINTS_FOR_CRYPTO_AS_CURRENCY;
     }
 

diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/components/CurrencyItem.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/components/CurrencyItem.tsx
@@ -6,6 +6,7 @@ import type { CurrencyItemType } from '../partials/Currency';
 
 import { Box, Grid, Typography, useTheme } from '@mui/material';
 import { assetsBtcSVG, assetsEthSVG } from '@polkagate/apps-config/ui/logos/assets';
+import { chainsPolkadotCircleSVG } from '@polkagate/apps-config/ui/logos/chains';
 import * as flags from 'country-flag-icons/string/3x2';
 import React, { useMemo } from 'react';
 
@@ -28,6 +29,10 @@ function CurrencyItem ({ currency, onclick }: Props): React.ReactElement {
       return assetsEthSVG;
     }
 
+    if (currency.code === 'DOT') {
+      return chainsPolkadotCircleSVG;
+    }
+
     const svg = (flags as Record<string, string>)[countryCode];
 
     if (svg) {

diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/components/CurrencySwitch.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/components/CurrencySwitch.tsx
@@ -18,10 +18,10 @@ import CurrencyItem from './CurrencyItem';
 interface Props {
   anchorEl: HTMLButtonElement | null;
   setAnchorEl: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
-  setCurrencyToShow: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setCurrencyToShow: React.Dispatch<React.SetStateAction<CurrencyItemType | undefined>>;
 }
 
-const DEFAULT_CURRENCIES_TO_SHOW = 5;
+const DEFAULT_CURRENCIES_TO_SHOW = 6;
 
 function CurrencySwitch ({ anchorEl, setAnchorEl, setCurrencyToShow }: Props): React.ReactElement {
   const theme = useTheme();
@@ -42,7 +42,7 @@ function CurrencySwitch ({ anchorEl, setAnchorEl, setCurrencyToShow }: Props): R
   const changeCurrency = useCallback((currency: CurrencyItemType) => {
     setAnchorEl(null);
     setCurrency(currency);
-    setCurrencyToShow(currency.sign);
+    setCurrencyToShow(currency);
     setStorage('currency', currency).catch(console.error);
   }, [setAnchorEl, setCurrency, setCurrencyToShow]);
 
@@ -99,7 +99,7 @@ function CurrencySwitch ({ anchorEl, setAnchorEl, setCurrencyToShow }: Props): R
             value={searchKeyword ?? ''}
           />
         </Grid>
-        {[...(searchedCurrency ?? CURRENCY_LIST.slice(3))].map((item, index) => (
+        {[...(searchedCurrency ?? CURRENCY_LIST.slice(DEFAULT_CURRENCIES_TO_SHOW))].map((item, index) => (
           <CurrencyItem
             currency={item}
             key={index}

diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx
@@ -6,6 +6,7 @@
 import { Grid, Popover, Typography, useTheme } from '@mui/material';
 import React, { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 
+import Infotip2 from '../../../components/Infotip2';
 import { getStorage } from '../../../components/Loading';
 import CurrencySwitch from '../components/CurrencySwitch';
 
@@ -19,7 +20,7 @@ export interface CurrencyItemType {
 export default function Currency (): React.ReactElement {
   const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-  const [currencyToShow, setCurrencyToShow] = useState<string | undefined>();
+  const [currencyToShow, setCurrencyToShow] = useState<CurrencyItemType | undefined>();
 
   const textColor = useMemo(() => theme.palette.mode === 'dark' ? theme.palette.text.primary : theme.palette.text.secondary, [theme.palette.mode, theme.palette.text.primary, theme.palette.text.secondary]);
 
@@ -29,7 +30,7 @@ export default function Currency (): React.ReactElement {
     }
 
     getStorage('currency').then((res) => {
-      setCurrencyToShow((res as CurrencyItemType)?.sign || '$');
+      setCurrencyToShow((res as CurrencyItemType));
     }).catch(console.error);
   }, [currencyToShow]);
 
@@ -47,9 +48,11 @@ export default function Currency (): React.ReactElement {
   return (
     <>
       <Grid alignItems='center' aria-describedby={id} component='button' container direction='column' item justifyContent='center' onClick={onCurrencyClick} sx={{ bgcolor: 'transparent', border: '1px solid', borderColor: 'secondary.light', borderRadius: '5px', cursor: 'pointer', height: '42px', minWidth: '42px', p: '2px 6px', position: 'relative', width: 'fit-content' }}>
-        <Typography color={textColor} fontSize='25px' fontWeight={600}>
-          {currencyToShow}
-        </Typography>
+        <Infotip2 text={currencyToShow?.currency}>
+          <Typography color={textColor} fontSize='25px' fontWeight={600}>
+            {currencyToShow?.sign || '$'}
+          </Typography>
+        </Infotip2>
       </Grid>
       <Popover
         PaperProps={{

diff --git a/packages/extension-polkagate/src/hooks/useCurrency.ts b/packages/extension-polkagate/src/hooks/useCurrency.ts
@@ -7,7 +7,7 @@ import { useContext, useEffect } from 'react';
 
 import { CurrencyContext } from '../components';
 import { getStorage, watchStorage } from '../components/Loading';
-import { USD_CURRENCY } from '../util/constants';
+import { USD_CURRENCY } from '../util/currencyList';
 
 /**
  * @description

diff --git a/packages/extension-polkagate/src/util/constants.tsx b/packages/extension-polkagate/src/util/constants.tsx
@@ -220,13 +220,6 @@ export const REGISTRARS_LIST: { addresses: string[]; index: number; name: string
 export const NO_PASS_PERIOD = 30 * 60 * 1000; // in ms, the duration of time we do not ask user for password after a successful login
 export const MAYBE_LATER_PERIOD = 5 * 60 * 1000; // ms
 
-export const USD_CURRENCY = {
-  code: 'USD',
-  country: 'United States',
-  currency: 'Dollar',
-  sign: '$'
-};
-
 export const FULLSCREEN_WIDTH = '900px';
 export const ALLOWED_URL_ON_RESET_PASSWORD = ['/account/restore-json', '/account/import-seed', '/account/import-raw-seed', '/forgot-password', '/reset-wallet'];
 

diff --git a/packages/extension-polkagate/src/util/currencyList.tsx b/packages/extension-polkagate/src/util/currencyList.tsx
@@ -1,7 +1,14 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { USD_CURRENCY } from './constants';
+export const ASSETS_AS_CURRENCY_LIST = ['BTC', 'ETH', 'DOT'];
+
+export const USD_CURRENCY = {
+  code: 'USD',
+  country: 'United States',
+  currency: 'Dollar',
+  sign: '$'
+};
 
 export const CURRENCY_LIST = [
   USD_CURRENCY,
@@ -20,15 +27,21 @@ export const CURRENCY_LIST = [
   {
     code: 'BTC',
     country: 'Bitcoin',
-    currency: 'BTC',
+    currency: 'Bitcoin',
     sign: '₿'
   },
   {
     code: 'ETH',
     country: 'Ethereum',
-    currency: 'ETH',
+    currency: 'Ethereum',
     sign: 'Ξ'
   },
+  {
+    code: 'DOT',
+    country: 'Polkadot',
+    currency: 'Polkadot',
+    sign: '𝒫'
+  },
   {
     code: 'AED',
     country: 'Emirates',