feat: add a new chain

packages/extension-base/src/background/handlers/State.ts

@@ -169,8 +169,12 @@ export default class State {
 
     // retrieve previously set authorizations
     chrome.storage.local.get(AUTH_URLS_KEY, (res) => {
-      // @ts-ignore
-      this.#authUrls = JSON.parse(res?.[AUTH_URLS_KEY] as string || {}) as AuthUrls;
+      try {
+        this.#authUrls = JSON.parse(res?.[AUTH_URLS_KEY] as string || '{}') as AuthUrls;
+      } catch (error) {
+        console.error('Error parsing stored auth URLs:', error);
+        this.#authUrls = {};
+      }
     });
   }
 

packages/extension-polkagate/src/assets/icons/index.ts

@@ -3,21 +3,16 @@
 
 // @ts-nocheck
 
-export { default as assetHub } from './assetHub.svg';
 export { default as auctionBlack } from './auctionBlack.svg';
 export { default as auctionRed } from './auctionRed.svg';
 export { default as auctionWhite } from './auctionWhite.svg';
-export { default as BTC } from './BTC.svg';
 export { default as checkBox } from './checkBox.svg';
 export { default as checkedBox } from './checkedBox.svg';
 export { default as controllerSettingBlack } from './controllerSettingBlack.svg';
 export { default as controllerSettingWhite } from './controllerSettingWhite.svg';
 export { default as crowdloanHomeBlack } from './crowdloanHomeBlack.svg';
 export { default as crowdloanHomeRed } from './crowdloanHomeRed.svg';
 export { default as crowdloanHomeWhite } from './crowdloanHomeWhite.svg';
-export { default as DAI } from './DAI.svg';
-export { default as lcDOT } from './lcDOT.svg';
-export { default as LDOT } from './LDOT.svg';
 export { default as ms } from './ms.svg';
 export { default as msGreen } from './msGreen.svg';
 export { default as msWarning } from './msWarning.svg';
@@ -37,5 +32,3 @@ export { default as stashSettingWhite } from './stashSettingWhite.svg';
 export { default as subId } from './subId.svg';
 export { default as subscan } from './subscan.svg';
 export { default as upload } from './upload.png';
-export { default as USDC } from './USDC.svg';
-export { default as USDT } from './USDT.svg';

packages/extension-polkagate/src/assets/img/index.ts

@@ -0,0 +1,5 @@
+// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// @ts-nocheck
+export { default as endpointUrlPng } from './endpoint.png';

packages/extension-polkagate/src/assets/logos/index.ts

@@ -1,9 +1,9 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
-export { default as logoWhite } from './pg-w.svg';
-export { default as logoPink } from './pg-p.svg';
-export { default as logoBlack } from './pg-b.svg';
-export { default as logoMotionLight } from './logoMotionLight.gif';
+//@ts-nocheck
 export { default as logoMotionDark } from './logoMotionDark.gif';
+export { default as logoMotionLight } from './logoMotionLight.gif';
+export { default as logoBlack } from './pg-b.svg';
+export { default as logoPink } from './pg-p.svg';
+export { default as logoWhite } from './pg-w.svg';

packages/extension-polkagate/src/components/AssetIcon.tsx → packages/extension-polkagate/src/components/AssetDualLogo.tsx

@@ -13,7 +13,7 @@ interface Props {
   baseLogoSize?: string;
 }
 
-export default function AssetIcon ({ asset, assetSize = '40px', baseLogo, baseLogoSize = '20px' }: Props): React.ReactElement {
+export default function AssetDualLogo ({ asset, assetSize = '40px', baseLogo, baseLogoSize = '20px' }: Props): React.ReactElement {
   return (
     <Grid container sx={{ position: 'relative', width: 'fit-content' }}>
       <Avatar

packages/extension-polkagate/src/components/AssetLogo.tsx

@@ -0,0 +1,46 @@
+// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useContext } from 'react';
+
+import { sanitizeChainName } from '../util/utils';
+import AssetDualLogo from './AssetDualLogo';
+import ChainLogo from './ChainLogo';
+import { GenesisHashOptionsContext } from './contexts';
+
+interface Props {
+  assetSize?: string;
+  baseTokenSize?: string;
+  chainName?: string;
+  genesisHash?: string | undefined;
+  logo?: string | undefined;
+  subLogo: string | undefined;
+}
+
+function AssetLogo ({ assetSize = '25px', baseTokenSize, chainName, genesisHash, logo, subLogo }: Props): React.ReactElement<Props> {
+  const options = useContext(GenesisHashOptionsContext);
+
+  const foundChainName = options.find((chain) => chain.value === genesisHash)?.text;
+  const _chainName = sanitizeChainName(foundChainName || chainName);
+
+  return (
+    <>
+      { subLogo && logo
+        ? <AssetDualLogo
+          asset={logo}
+          assetSize={assetSize}
+          baseLogo={subLogo}
+          baseLogoSize={baseTokenSize}
+        />
+        : <ChainLogo
+          chainName={_chainName}
+          genesisHash={genesisHash}
+          logo={logo || subLogo}
+          size={Number(assetSize.replace('px', ''))}
+        />
+      }
+    </>
+  );
+}
+
+export default React.memo(AssetLogo);