feat: add BTC and ETH as currency (#1563)

* feat: add BTC and ETH as currency closes #1552 * chore: updat news
PolkaGate · Sep 29, 2024 · 8b57127 · 8b57127
1 parent e3b096a
commit 8b57127
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 7 deletions.
diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/components/CurrencyItem.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/components/CurrencyItem.tsx
@@ -5,6 +5,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 * as flags from 'country-flag-icons/string/3x2';
 import React, { useMemo } from 'react';
 
@@ -18,6 +19,15 @@ function CurrencyItem ({ currency, onclick }: Props): React.ReactElement {
 
   const flagSVG = useMemo(() => {
     const countryCode = currency.code.slice(0, 2).toUpperCase();
+
+    if (currency.code === 'BTC') {
+      return assetsBtcSVG;
+    }
+
+    if (currency.code === 'ETH') {
+      return assetsEthSVG;
+    }
+
     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
@@ -1,9 +1,10 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 /* eslint-disable react/jsx-max-props-per-line */
 
+import type { CurrencyItemType } from '../partials/Currency';
+
 import { ArrowForwardIosRounded as ArrowForwardIosRoundedIcon } from '@mui/icons-material';
 import { Collapse, Grid, useTheme } from '@mui/material';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
@@ -12,7 +13,6 @@ import { CurrencyContext, InputFilter } from '../../../components';
 import { setStorage } from '../../../components/Loading';
 import { useTranslation } from '../../../hooks';
 import { CURRENCY_LIST } from '../../../util/currencyList';
-import { CurrencyItemType } from '../partials/Currency';
 import CurrencyItem from './CurrencyItem';
 
 interface Props {
@@ -21,7 +21,9 @@ interface Props {
   setCurrencyToShow: React.Dispatch<React.SetStateAction<string | undefined>>;
 }
 
-function CurrencySwitch({ anchorEl, setAnchorEl, setCurrencyToShow }: Props): React.ReactElement {
+const DEFAULT_CURRENCIES_TO_SHOW = 5;
+
+function CurrencySwitch ({ anchorEl, setAnchorEl, setCurrencyToShow }: Props): React.ReactElement {
   const theme = useTheme();
   const { t } = useTranslation();
   const { setCurrency } = useContext(CurrencyContext);
@@ -67,7 +69,7 @@ function CurrencySwitch({ anchorEl, setAnchorEl, setCurrencyToShow }: Props): Re
 
   return (
     <Grid container item sx={{ maxHeight: '550px', overflow: 'hidden', overflowY: 'scroll', transition: 'height 5000ms ease-in-out', width: '230px' }}>
-      {[...CURRENCY_LIST.slice(0, 3)].map((item, index) => (
+      {[...CURRENCY_LIST.slice(0, DEFAULT_CURRENCIES_TO_SHOW)].map((item, index) => (
         <CurrencyItem
           currency={item}
           key={index}

diff --git a/packages/extension-polkagate/src/popup/home/news.ts b/packages/extension-polkagate/src/popup/home/news.ts
@@ -10,10 +10,11 @@ export interface News {
 
 export const news: News[] = [
   {
-    version: '0.12.0',
+    version: '0.14.0',
     notes: [
-      'Add Your Chain: If your favorite chain isn’t available in the extension, you can now add it yourself using an RPC endpoint address.',
-      'Auto Mode Remote Node: RPCs are now automatically selected based on your location and latency, ensuring optimal performance.',
+      'Add Your Chain: If your favorite chain isn’t available in the extension, you can now add it manually using an RPC endpoint address.',
+      'BTC and ETH as currency: View your token balance equivalent in BTC, ETH, and other fiat currencies.',
+      'Auto Mode Remote Node: RPCs are now automatically selected based on your location and latency, for optimal performance.',
       'Auto Metadata Update: Metadata updates automatically in the background on supported chains, eliminating the need for manual updates.'
     ]
   },

diff --git a/packages/extension-polkagate/src/util/currencyList.tsx b/packages/extension-polkagate/src/util/currencyList.tsx
@@ -17,6 +17,18 @@ export const CURRENCY_LIST = [
     currency: 'Pound',
     sign: '£'
   },
+  {
+    code: 'BTC',
+    country: 'Bitcoin',
+    currency: 'BTC',
+    sign: '₿'
+  },
+  {
+    code: 'ETH',
+    country: 'Ethereum',
+    currency: 'ETH',
+    sign: 'Ξ'
+  },
   {
     code: 'AED',
     country: 'Emirates',