feat: Support Sui (#1024)

* feat: add Sui adapter

* chore: update dep

* chore: changeset

* chore: fix dep

* fix: remove unused code

* chore: dep

* fix: deps

* feat: improve props

* docs: update demos

* chore: update deps

* docs(sui): Readme

* add tests

* feat: merge queryClient

* udpate demos

* typo

* docs: update

* rename

* Update

* add test cases

* add test of queryclient

* test

* docs: add queryClient demo

* docs: api doc

* en doc

* feat(assets): add sui wallet metadata

* feat: support wallets prop

* Update packages/web3/src/sui/index.md

Co-authored-by: thinkasany <[email protected]>

* fix: update browser link

* cointype

* chore: update lock

* add Suiet wallet metadata

* merge master

* feat: add sui token

* refactor: use SUI token

* chore: replace @mysten/sui with @mysten/sui.js

* fix lock file

* improve wallet connect

* update lock

* merge package

* chore: update lock file

* chore: update lock

---------

Co-authored-by: thinkasany <[email protected]>

.changeset/hip-comics-invite.md

@@ -0,0 +1,6 @@
+---
+'@ant-design/web3-sui': major
+'@ant-design/web3-common': minor
+---
+
+feat: Add Sui adapter

package.json

@@ -101,10 +101,15 @@
     "@ant-design/web3-ethers": "workspace:*",
     "@ant-design/web3-icons": "workspace:*",
     "@ant-design/web3-solana": "workspace:*",
+    "@ant-design/web3-sui": "workspace:*",
     "@ant-design/web3-ton": "workspace:*",
     "@ant-design/web3-wagmi": "workspace:*",
+    "@mysten/dapp-kit": "^0.14.11",
+    "@mysten/sui": "^1.4.0",
     "@solana/wallet-adapter-coinbase": "^0.1.19",
     "@solana/wallet-adapter-trust": "^0.1.13",
+    "@tanstack/query-sync-storage-persister": "^5.51.9",
+    "@tanstack/react-query-persist-client": "^5.51.11",
     "@tanstack/react-query": "^5.51.11",
     "antd": "^5.20.1",
     "antd-style": "^3.6.2",

packages/assets/src/tokens/index.ts

@@ -1,3 +1,4 @@
 export * from './eth';
 export * from './usdc';
 export * from './usdt';
+export * from './sui';

packages/assets/src/tokens/sui.tsx

@@ -0,0 +1,10 @@
+import type { Token } from '@ant-design/web3-common';
+import { SuiColorful } from '@ant-design/web3-icons';
+
+export const SUI: Token = {
+  name: 'Sui',
+  symbol: 'SUI',
+  decimal: 9,
+  icon: <SuiColorful />,
+  availableChains: [],
+};

packages/assets/src/wallets/index.ts

@@ -11,3 +11,5 @@ export * from './unisat-wallet';
 export * from './backpack';
 export * from './trust';
 export * from './mobile-wallet';
+export * from './sui-wallet';
+export * from './suiet';

packages/assets/src/wallets/sui-wallet.tsx

@@ -0,0 +1,20 @@
+import type { WalletMetadata } from '@ant-design/web3-common';
+import { ChromeCircleColorful, SuiColorful } from '@ant-design/web3-icons';
+
+export const metadata_SuiWallet: WalletMetadata = {
+  name: 'Sui Wallet',
+  remark: 'Sui Wallet',
+  icon: <SuiColorful />,
+  app: {
+    link: 'https://suiwallet.com/',
+  },
+  extensions: [
+    {
+      key: 'Chrome',
+      browserIcon: <ChromeCircleColorful />,
+      browserName: 'Chrome',
+      link: 'https://chromewebstore.google.com/detail/sui-wallet/opcgpfmipidbgpenhmajoajpbobppdil',
+      description: 'Access your wallet right from your favorite web browser.',
+    },
+  ],
+};

packages/assets/src/wallets/suiet.tsx

@@ -0,0 +1,20 @@
+import type { WalletMetadata } from '@ant-design/web3-common';
+import { ChromeCircleColorful, SuietColorful } from '@ant-design/web3-icons';
+
+export const metadata_Suiet: WalletMetadata = {
+  name: 'Suiet',
+  remark: 'Suiet Wallet',
+  icon: <SuietColorful />,
+  app: {
+    link: 'https://suiet.app/',
+  },
+  extensions: [
+    {
+      key: 'Chrome',
+      browserIcon: <ChromeCircleColorful />,
+      browserName: 'Chrome',
+      link: 'https://chromewebstore.google.com/detail/suiet-sui-wallet/khpkpbbcccdmmclmpigdgddabeilkdpd',
+      description: 'Access your wallet right from your favorite web browser.',
+    },
+  ],
+};

packages/common/src/types.ts

@@ -27,6 +27,13 @@ export enum SolanaChainIds {
   Testnet = 4,
 }
 
+export enum SuiChainIds {
+  Mainnet = 1,
+  Testnet = 2,
+  Devnet = 3,
+  Localnet = 4,
+}
+
 export type BrowserLinkType = 'address' | 'transaction';
 
 export type BalanceMetadata = {
@@ -50,6 +57,11 @@ export enum ChainType {
    * Bitcoin chain
    */
   Bitcoin = 'Bitcoin',
+
+  /**
+   * Sui chain
+   */
+  Sui = 'Sui',
 }
 
 export interface Chain {
@@ -71,7 +83,7 @@ export interface NFTMetadata {
   description?: string;
   image?: string;
   dna?: string;
-  edition?: number;
+  edition?: string | number;
   date?: number;
   attributes?: {
     trait_type?: string;
@@ -109,6 +121,7 @@ export interface UniversalWeb3ProviderInterface {
 }
 
 export interface Wallet extends WalletMetadata {
+  _standardWallet?: any;
   hasWalletReady?: () => Promise<boolean>;
   hasExtensionInstalled?: () => Promise<boolean>;
   getQrCode?: () => Promise<{ uri: string }>;

packages/sui/.fatherrc.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from 'father';
+
+export default defineConfig({
+  extends: '../../.fatherrc.base.ts',
+});

packages/sui/README.md

@@ -0,0 +1,35 @@
+# @ant-design/web3-solana
+
+This package provides a [Sui](https://sui.io) adapter for [@ant-design/web3](https://www.npmjs.com/package/@ant-design/web3).
+
+## Installation
+
+```bash
+npm install @ant-design/web3 @ant-design/web3-sui --save
+```
+
+## Usage
+
+```tsx
+import { ConnectButton, Connector } from '@ant-design/web3';
+import { SuiWallet, SuiWeb3ConfigProvider } from '@ant-design/web3-sui';
+
+const App: React.FC = () => {
+  return (
+    <SuiWeb3ConfigProvider>
+      <Connector>
+        <ConnectButton />
+      </Connector>
+    </SuiWeb3ConfigProvider>
+  );
+};
+
+export default App;
+```
+
+For more examples, refer to [Sui - Ant Design Web3](https://web3.ant.design/components/sui).
+
+## Documentation
+
+- For more information, visit [Ant Design Web3](https://web3.ant.design).
+- For an introduction to Sui, visit [Sui](https://sui.io).

packages/sui/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@ant-design/web3-sui",
+  "version": "0.0.0",
+  "main": "dist/lib/index.js",
+  "module": "dist/esm/index.js",
+  "typings": "dist/esm/index.d.ts",
+  "exports": {
+    "import": "./dist/esm/index.js",
+    "require": "./dist/lib/index.js",
+    "types": "./dist/esm/index.d.ts"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "keywords": [
+    "ant",
+    "component",
+    "components",
+    "design",
+    "framework",
+    "frontend",
+    "react",
+    "react-component",
+    "ui",
+    "web3",
+    "sui"
+  ],
+  "homepage": "https://web3.ant.design",
+  "bugs": {
+    "url": "https://github.com/ant-design/ant-design-web3/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ant-design/ant-design-web3"
+  },
+  "scripts": {
+    "dev": "father dev",
+    "build": "father build"
+  },
+  "dependencies": {
+    "@ant-design/web3-assets": "workspace:*",
+    "@ant-design/web3-common": "workspace:*",
+    "debug": "^4.3.4"
+  },
+  "devDependencies": {
+    "@mysten/dapp-kit": "^0.14.11",
+    "@mysten/sui": "^1.4.0",
+    "@tanstack/react-query": "^5.40.1",
+    "@types/debug": "^4.1.12",
+    "father": "^4.4.4",
+    "typescript": "^5.5.2"
+  },
+  "peerDependencies": {
+    "@mysten/dapp-kit": "^0.14.11",
+    "@mysten/sui": "^1.4.0",
+    "@tanstack/react-query": "^5.40.1"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "Firefox ESR",
+    "> 1%",
+    "ie >= 11"
+  ]
+}

packages/sui/src/chain.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { Chain } from '@ant-design/web3-common';
+import { createGetBrowserLink, SuiChainIds } from '@ant-design/web3-common';
+import { SuiColorful } from '@ant-design/web3-icons';
+import { SUI_DECIMALS } from '@mysten/sui/utils';
+
+export interface SuiChain extends Chain {
+  id: SuiChainIds;
+  network: 'mainnet' | 'testnet' | 'devnet' | 'localnet';
+}
+
+export const suiMainnet: SuiChain = {
+  id: SuiChainIds.Mainnet,
+  name: 'Sui',
+  network: 'mainnet',
+  icon: <SuiColorful />,
+  browser: {
+    icon: <SuiColorful />,
+    getBrowserLink: createGetBrowserLink('https://suiscan.xyz/mainnet'),
+  },
+  nativeCurrency: { name: 'Sui', symbol: 'SUI', decimals: SUI_DECIMALS },
+};
+
+export const suiTestnet: SuiChain = {
+  id: SuiChainIds.Testnet,
+  name: 'Sui Testnet',
+  network: 'testnet',
+  icon: <SuiColorful />,
+  browser: {
+    icon: <SuiColorful />,
+    getBrowserLink: createGetBrowserLink('https://suiscan.xyz/testnet'),
+  },
+  nativeCurrency: { name: 'Sui', symbol: 'SUI', decimals: SUI_DECIMALS },
+};
+
+export const suiDevnet: SuiChain = {
+  id: SuiChainIds.Devnet,
+  name: 'Sui Devnet',
+  network: 'devnet',
+  icon: <SuiColorful />,
+  browser: {
+    icon: <SuiColorful />,
+    getBrowserLink: createGetBrowserLink('https://suiscan.xyz/devnet'),
+  },
+  nativeCurrency: { name: 'Sui', symbol: 'SUI', decimals: SUI_DECIMALS },
+};
+
+export const suiLocalnet: SuiChain = {
+  id: SuiChainIds.Localnet,
+  name: 'Sui Localnet',
+  network: 'localnet',
+  icon: <SuiColorful />,
+  browser: {
+    icon: <SuiColorful />,
+  },
+  nativeCurrency: { name: 'Sui', symbol: 'SUI', decimals: SUI_DECIMALS },
+};

packages/sui/src/index.ts

@@ -0,0 +1,4 @@
+export * from './chain';
+export * from './sui-provider';
+export * from './wallets/built-in';
+export * from './wallets/factory';

packages/sui/src/sui-provider/__tests__/account.test.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { ConnectButton, Connector } from '@ant-design/web3';
+import { fireEvent } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { SuiWeb3ConfigProvider } from '../../';
+import { xrender } from './utils';
+
+describe('SuiWeb3ConfigProvider basic tests', () => {
+  const mockedDatas = vi.hoisted(() => {
+    return {
+      // fake address
+      shortAddress: '0xa123...y123',
+      address: '0xa123a123b123b123____a00aaf10c9c283aae9498684218____x123x123y123y123',
+      sns: 'fakesns.sui',
+    };
+  });
+
+  vi.mock('@mysten/dapp-kit', async () => {
+    const originModules = await vi.importActual('@mysten/dapp-kit');
+
+    return {
+      ...originModules,
+      useCurrentAccount: () => {
+        return {
+          address: mockedDatas.address,
+        };
+      },
+      useResolveSuiNSName: (address?: string) => {
+        const sns = address ? mockedDatas.sns : undefined;
+
+        return { data: sns };
+      },
+    };
+  });
+
+  it('available get account info', async () => {
+    const App = () => {
+      return (
+        <SuiWeb3ConfigProvider>
+          <Connector>
+            <ConnectButton />
+          </Connector>
+        </SuiWeb3ConfigProvider>
+      );
+    };
+
+    const { selector } = xrender(App);
+
+    const connectBtn = selector('.ant-web3-connect-button');
+
+    expect(connectBtn?.textContent).toBe(mockedDatas.shortAddress);
+    fireEvent.click(connectBtn!);
+
+    await vi.waitFor(() => {
+      const addressInfo = selector('.ant-web3-connect-button-profile-modal .ant-web3-address');
+      expect(addressInfo?.textContent).toBe(mockedDatas.address);
+    });
+  });
+
+  it('available get sns info', async () => {
+    const App = () => {
+      return (
+        <SuiWeb3ConfigProvider sns>
+          <Connector>
+            <ConnectButton />
+          </Connector>
+        </SuiWeb3ConfigProvider>
+      );
+    };
+
+    const { selector } = xrender(App);
+
+    const connectBtn = selector('.ant-web3-connect-button');
+
+    expect(connectBtn?.textContent).toBe(mockedDatas.sns);
+    fireEvent.click(connectBtn!);
+
+    await vi.waitFor(() => {
+      const addressInfo = selector('.ant-web3-connect-button-profile-modal .ant-web3-address');
+      expect(addressInfo?.textContent).toBe(mockedDatas.address);
+    });
+  });
+});