feat: add ChromeColorful icon (#188)

* feat: add ChromeColorful icon * refactor: use ChromeColorful icon and remove useless constants --------- Co-authored-by: yutingzhao1991 <[email protected]>
ant-design · Dec 7, 2023 · 1bb5c2e · 1bb5c2e
1 parent 11df8dd
commit 1bb5c2e
Show file tree

Hide file tree

Showing 12 changed files with 55 additions and 80 deletions.
diff --git a/packages/assets/src/wallets/meta-mask.tsx b/packages/assets/src/wallets/meta-mask.tsx
@@ -1,5 +1,5 @@
 import type { WalletMetadata } from '@ant-design/web3-common';
-import { MetaMaskColorful } from '@ant-design/web3-icons';
+import { MetaMaskColorful, ChromeColorful } from '@ant-design/web3-icons';
 
 export const metadata_MetaMask: WalletMetadata = {
   icon: <MetaMaskColorful />,
@@ -11,8 +11,7 @@ export const metadata_MetaMask: WalletMetadata = {
   extensions: [
     {
       key: 'Chrome',
-      browserIcon:
-        'https://github.com/ant-design/ant-design/assets/10286961/0d4e4ac7-8f89-4147-a06a-de72c02e85cb',
+      browserIcon: <ChromeColorful />,
       browserName: 'Chrome',
       link: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',
       description: 'Access your wallet right from your favorite web browser.',

diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts
@@ -78,7 +78,7 @@ export type WalletExtensionItem = {
    * @desc 浏览器扩展程序的图标
    * @descEn Icon of browser extension
    */
-  browserIcon: string;
+  browserIcon: React.ReactNode | string;
   /**
    * @desc 浏览器扩展程序的名称
    * @descEn Name of browser extension

diff --git a/packages/icons/src/components/chrome-colorful.tsx b/packages/icons/src/components/chrome-colorful.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import AntdIcon from '@ant-design/icons';
+import { ReactComponent as SVGComponent } from '../svgs/chrome-colorful.svg';
+import { type IconBaseProps } from '@ant-design/icons/lib/components/Icon';
+
+export const ChromeColorful = React.forwardRef<HTMLSpanElement, IconBaseProps>((props, ref) => (
+  <AntdIcon {...props} ref={ref} component={SVGComponent} />
+));
+
+ChromeColorful.displayName = 'ChromeColorful';
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
@@ -19,3 +19,4 @@ export * from './components/usdt-circle-filled';
 export * from './components/sui-colorful';
 export * from './components/sui-filled';
 export * from './components/sui-circle-filled';
+export * from './components/chrome-colorful';
diff --git a/packages/icons/src/svgs/chrome-colorful.svg b/packages/icons/src/svgs/chrome-colorful.svg
diff --git a/packages/web3/src/connect-modal/components/WalletCard.tsx b/packages/web3/src/connect-modal/components/WalletCard.tsx
@@ -49,7 +49,13 @@ const WalletCard: React.FC = () => {
         {selectedExtension && (
           <CardItem
             link={selectedExtension.link}
-            icon={<img src={selectedExtension.browserIcon} />}
+            icon={
+              typeof selectedExtension.browserIcon === 'string' ? (
+                <img src={selectedExtension.browserIcon} />
+              ) : (
+                selectedExtension.browserIcon
+              )
+            }
             title={`${selectedWallet!.name} for ${selectedExtension.browserName}`}
             desc={selectedExtension.description}
           />

diff --git a/packages/web3/src/connector/demos/basic.tsx b/packages/web3/src/connector/demos/basic.tsx
@@ -1,27 +1,13 @@
 import React from 'react';
 import type { Account } from '@ant-design/web3';
+import { metadata_MetaMask, metadata_WalletConnect } from '@ant-design/web3-assets';
 import { Connector, ConnectButton } from '@ant-design/web3';
 
 const App: React.FC = () => {
   const [account, setAccount] = React.useState<Account>();
   return (
     <Connector
-      availableWallets={[
-        {
-          name: 'MetaMask',
-          remark: 'Easy-to-use browser extension.',
-          extensions: [
-            {
-              key: 'Chrome',
-              browserIcon:
-                'https://github.com/ant-design/ant-design/assets/10286961/0d4e4ac7-8f89-4147-a06a-de72c02e85cb',
-              browserName: 'Chrome',
-              link: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',
-              description: 'Access your wallet right from your favorite web browser.',
-            },
-          ],
-        },
-      ]}
+      availableWallets={[metadata_MetaMask, metadata_WalletConnect]}
       connect={async () =>
         new Promise((resolve) => {
           setTimeout(() => {

diff --git a/packages/web3/src/connector/demos/custom-trigger.tsx b/packages/web3/src/connector/demos/custom-trigger.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Account, ConnectorTriggerProps } from '@ant-design/web3';
+import { metadata_MetaMask, metadata_WalletConnect } from '@ant-design/web3-assets';
 import { Connector } from '@ant-design/web3';
 import { Typography } from 'antd';
 
@@ -16,22 +17,7 @@ const App: React.FC = () => {
   const [account, setAccount] = React.useState<Account>();
   return (
     <Connector
-      availableWallets={[
-        {
-          name: 'MetaMask',
-          remark: 'Easy-to-use browser extension.',
-          extensions: [
-            {
-              key: 'Chrome',
-              browserIcon:
-                'https://github.com/ant-design/ant-design/assets/10286961/0d4e4ac7-8f89-4147-a06a-de72c02e85cb',
-              browserName: 'Chrome',
-              link: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',
-              description: 'Access your wallet right from your favorite web browser.',
-            },
-          ],
-        },
-      ]}
+      availableWallets={[metadata_MetaMask, metadata_WalletConnect]}
       connect={async () =>
         new Promise((resolve) => {
           setTimeout(() => {

diff --git a/packages/web3/src/constants/index.ts b/packages/web3/src/constants/index.ts
diff --git a/packages/web3/src/constants/presets.ts b/packages/web3/src/constants/presets.ts
diff --git a/packages/web3/src/icons/demos/colorful.tsx b/packages/web3/src/icons/demos/colorful.tsx
@@ -12,6 +12,7 @@ import {
   WalletColorful,
   WalletWhiteColorful,
   SuiColorful,
+  ChromeColorful,
 } from '@ant-design/web3-icons';
 import { Space } from 'antd';
 
@@ -40,6 +41,7 @@ const App: React.FC = () => {
         }}
       />
       <SuiColorful style={style} />
+      <ChromeColorful style={style} />
     </Space>
   );
 };

diff --git a/packages/web3/src/index.ts b/packages/web3/src/index.ts
@@ -5,7 +5,6 @@ export * from './address';
 export * from './browser-link';
 export * from './nft-image';
 export * from './nft-card';
-export * from './constants';
 export * from './hooks';
 export * from './web3-config-provider';