refactor: connect button and add some icons (#33)

* chore: format icons svg to react component

* feat(icons): fomat icons in svg

* ci(icons): fix ci issue by add an alias

* chore(icons): ci issues

* feat(common): add chains config

* feat(icons): more filled icons

* refactor(web3): connect button

* refactor(web3): connect button

* ci(web3): fix ci issues

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "conventionalCommits.scopes": ["workspace", "web3", "icons"]
+  "conventionalCommits.scopes": ["workspace", "web3", "icons", "common"]
 }

packages/common/src/chains.ts

@@ -0,0 +1,31 @@
+import type { Chain } from './types';
+
+export const mainnet: Chain = {
+  id: 1,
+  name: 'Ethereum',
+  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
+};
+
+export const polygon: Chain = {
+  id: 137,
+  name: 'Polygon',
+  nativeCurrency: { name: 'MATIC', symbol: 'MATIC', decimals: 18 },
+};
+
+export const bsc: Chain = {
+  id: 56,
+  name: 'BNB Smart Chain',
+  nativeCurrency: { decimals: 18, name: 'BNB', symbol: 'BNB' },
+};
+
+export const arbitrum: Chain = {
+  id: 42_161,
+  name: 'Arbitrum One',
+  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
+};
+
+export const optimism: Chain = {
+  id: 10,
+  name: 'OP Mainnet',
+  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
+};

packages/common/src/index.ts

@@ -1,4 +1,5 @@
 export * from './types';
+export * as chains from './chains';
 export * from './wallets/index';
 export * from './providers';
 export * from './utils';

packages/common/src/types.ts

@@ -7,6 +7,18 @@ export enum Chains {
   bitcoin = 'bitcoin:',
 }
 
+export interface Chain {
+  id: number;
+  name: string;
+  rpcHttpUrl?: string;
+  blockExplorerUrl?: string;
+  nativeCurrency?: {
+    decimals: number;
+    name: string;
+    symbol: string;
+  };
+}
+
 export enum Wallets {
   MetaMask = 'MetaMask',
   WalletConnect = 'WalletConnect',
@@ -50,5 +62,5 @@ export interface WalletProviderFactory {
 }
 
 export interface JsonRpcProvider {
-  getRpcUrl(chain: Chains): string;
+  getRpcUrl: (chain: Chains) => string;
 }

packages/icons/src/components/arbitrum-filled.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import AntdIcon from '@ant-design/icons';
+import { ReactComponent as SVGComponent } from '../svgs/arbitrum-filled.svg';
+import { type IconBaseProps } from '@ant-design/icons/lib/components/Icon';
+
+export const ArbitrumFilled = React.forwardRef<HTMLSpanElement, IconBaseProps>((props, ref) => (
+  <AntdIcon {...props} ref={ref} component={SVGComponent} />
+));
+ArbitrumFilled.displayName = 'ArbitrumFilled';

packages/icons/src/components/bitcoin-filled.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import AntdIcon from '@ant-design/icons';
+import { ReactComponent as SVGComponent } from '../svgs/bitcoin-filled.svg';
+import { type IconBaseProps } from '@ant-design/icons/lib/components/Icon';
+
+export const BitcoinFilled = React.forwardRef<HTMLSpanElement, IconBaseProps>((props, ref) => (
+  <AntdIcon {...props} ref={ref} component={SVGComponent} />
+));
+BitcoinFilled.displayName = 'BitcoinFilled';

packages/icons/src/components/bsc-filled.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import AntdIcon from '@ant-design/icons';
+import { ReactComponent as SVGComponent } from '../svgs/bsc-filled.svg';
+import { type IconBaseProps } from '@ant-design/icons/lib/components/Icon';
+
+export const BSCFilled = React.forwardRef<HTMLSpanElement, IconBaseProps>((props, ref) => (
+  <AntdIcon {...props} ref={ref} component={SVGComponent} />
+));
+BSCFilled.displayName = 'BSCFilled';

packages/icons/src/components/ethereum-filled.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import AntdIcon from '@ant-design/icons';
+import { ReactComponent as SVGComponent } from '../svgs/ethereum-filled.svg';
+import { type IconBaseProps } from '@ant-design/icons/lib/components/Icon';
+
+export const EthereumFilled = React.forwardRef<HTMLSpanElement, IconBaseProps>((props, ref) => (
+  <AntdIcon {...props} ref={ref} component={SVGComponent} />
+));
+EthereumFilled.displayName = 'EthereumFilled';

packages/icons/src/components/optimism-filled.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import AntdIcon from '@ant-design/icons';
+import { ReactComponent as SVGComponent } from '../svgs/optimism-filled.svg';
+import { type IconBaseProps } from '@ant-design/icons/lib/components/Icon';
+
+export const OptimismFilled = React.forwardRef<HTMLSpanElement, IconBaseProps>((props, ref) => (
+  <AntdIcon {...props} ref={ref} component={SVGComponent} />
+));
+OptimismFilled.displayName = 'OptimismFilled';

packages/icons/src/components/polygon-filled.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import AntdIcon from '@ant-design/icons';
+import { ReactComponent as SVGComponent } from '../svgs/polygon-filled.svg';
+import { type IconBaseProps } from '@ant-design/icons/lib/components/Icon';
+
+export const PolygonFilled = React.forwardRef<HTMLSpanElement, IconBaseProps>((props, ref) => (
+  <AntdIcon {...props} ref={ref} component={SVGComponent} />
+));
+PolygonFilled.displayName = 'PolygonFilled';

packages/icons/src/index.tsx

@@ -1,5 +1,11 @@
+export * from './components/arbitrum-filled';
+export * from './components/bitcoin-filled';
 export * from './components/bitcoin';
+export * from './components/bsc-filled';
+export * from './components/ethereum-filled';
 export * from './components/ethereum';
+export * from './components/optimism-filled';
+export * from './components/polygon-filled';
 export * from './components/usdt';
 export * from './components/wallet';