add bitcoin logo

Author: naman-flexpool

src/pages/MinerDashboard/Header/AccountHeader.tsx

@@ -13,6 +13,10 @@ import { getChecksumByTicker } from 'src/utils/validators/checksum';
 import { MinerSettingsModal } from '../Settings/MinerSettings.modal';
 import { Button } from 'src/components/Button';
 import useMinerDetailsQuery from '@/hooks/api/useMinerDetailsQuery';
+import {
+  extractAddressFromBTCAddress,
+  isBTCAddress,
+} from '@/utils/validators/btcWalletAddress';
 
 const rotate = keyframes`
   from {
@@ -97,6 +101,15 @@ const Memo = styled.div`
   padding: 10px;
 `;
 
+const CoinLogo = styled(Img)`
+  z-index: 1;
+`;
+
+const BitcoinLogo = styled(Img)`
+  margin-left: -20px;
+  z-index: 0;
+`;
+
 export const AccountHeader: React.FC<{
   coin?: ApiPoolCoin;
   address: string;
@@ -129,23 +142,34 @@ export const AccountHeader: React.FC<{
   if (coin) {
     addressText = getChecksumByTicker(coin.ticker)(address);
 
-    if (addressText && (coin.ticker as string) === 'iron') {
-      const parsedRes = parseIronAddressWithMemo(addressText);
-      addressText = parsedRes.address;
-      ironMemo = parsedRes.memo;
+    if (addressText) {
+      if ((coin.ticker as string) === 'iron') {
+        const parsedRes = parseIronAddressWithMemo(addressText);
+        addressText = parsedRes.address;
+        ironMemo = parsedRes.memo;
+      }
     }
   }
 
   return (
     <Wrap paddingShort>
       <AddressContainer>
         {coin ? (
-          <Img src={getCoinIconUrl(coin.ticker)} alt={`${coin.name} logo`} />
+          <React.Fragment>
+            <CoinLogo
+              src={getCoinIconUrl(coin.ticker)}
+              alt={`${coin.name} logo`}
+            />
+            {isBTCAddress(addressText) && (
+              <BitcoinLogo src={getCoinIconUrl('btc')} alt={`btc logo`} />
+            )}
+          </React.Fragment>
         ) : (
           <CoinIconSkeleton />
         )}
+
         <Address href={getCoinLink('wallet', address, coinName)}>
-          {addressText}
+          {extractAddressFromBTCAddress(addressText || '')}
         </Address>
         {ironMemo && <Memo>{ironMemo}</Memo>}
         <CopyButton text={addressText || ''} />

src/utils/validators/btcWalletAddress.ts

@@ -0,0 +1,14 @@
+export const isBTCAddress = (address: string | null) => {
+  if (address == null) {
+    return false
+  }
+
+  return address.toLowerCase().startsWith("btc:")
+}
+
+export const extractAddressFromBTCAddress = (address: string) => {
+  if (!isBTCAddress(address)) {
+    return address
+  }
+  return address.slice(4)
+}

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,10 +24,19 @@
     "inlineSources": true,
     "sourceRoot": "/",
     "noImplicitAny": false,
-     "paths": {
-      "@/*": ["src/*"]
-    }
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "incremental": true
   },
-  "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ]
 }