feat: sui

advanced/dapps/react-dapp-v2/package.json

@@ -26,11 +26,12 @@
     "@walletconnect/core": "^2.19.1",
     "@walletconnect/encoding": "^1.0.1",
     "@walletconnect/jsonrpc-utils": "^1.0.8",
-    "@walletconnect/sign-client": "2.20.1",
+    "@walletconnect/universal-provider": "2.20.1",
     "@walletconnect/types": "2.20.1",
     "@walletconnect/utils": "2.20.1",
-    "@web3modal/standalone": "2.4.3",
+    "@reown/appkit": "1.7.5",
     "axios": "^1.0.0",
+    "@mysten/sui": "^1.29.1",
     "bitcoinjs-lib": "^6.1.5",
     "bitcoinjs-message": "^2.2.0",
     "blockies-ts": "^1.0.0",
@@ -62,13 +63,13 @@
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
     "@types/styled-components": "^5.1.34",
-    "eslint": "8.21.0",
+    "eslint": "9.26.0",
     "eslint-config-next": "14.2.25",
     "eslint-plugin-package-json": "^0.13.1",
     "jsonc-eslint-parser": "^2.4.0",
     "pino-pretty": "^13.0.0",
     "prettier": "^2.8.8",
-    "typescript": "^4.7.4"
+    "typescript": "5.8.3"
   },
   "pnpm": {
     "overrides": {
@@ -104,7 +105,15 @@
       "semver@>=7.0.0 <7.5.2": ">=7.5.2",
       "next@>=9.5.5 <14.2.15": ">=14.2.15",
       "ansi-html@<0.0.8": ">=0.0.8",
-      "axios@<1.8.2": ">=1.8.2"
+      "axios@<1.8.2": ">=1.8.2",
+      "@walletconnect/core@": ">=2.20.2",
+      "@walletconnect/encoding@": ">=1.0.1",
+      "@walletconnect/jsonrpc-utils@": ">=1.0.8",
+      "@walletconnect/types@": ">=2.20.2",
+      "@walletconnect/universal-provider@": ">=2.20.2",
+      "@walletconnect/sign-client@": ">=2.20.2",
+      "@walletconnect/utils@": ">=2.20.2",
+      "@walletconnect/ethereum-provider@": ">=2.20.2"
     }
   }
 }

advanced/dapps/react-dapp-v2/src/chains/index.ts

@@ -10,6 +10,7 @@ import * as tron from "./tron";
 import * as tezos from "./tezos";
 import * as kadena from "./kadena";
 import * as bip122 from "./bip122";
+import * as sui from "./sui";
 
 import { ChainMetadata, ChainRequestRender } from "../helpers";
 
@@ -36,6 +37,8 @@ export function getChainMetadata(chainId: string): ChainMetadata {
       return tezos.getChainMetadata(chainId);
     case "bip122":
       return bip122.getChainMetadata(chainId);
+    case "sui":
+      return sui.getChainMetadata(chainId);
     default:
       throw new Error(`No metadata handler for namespace ${namespace}`);
   }

advanced/dapps/react-dapp-v2/src/chains/sui.ts

@@ -0,0 +1,53 @@
+import { NamespaceMetadata, ChainMetadata, ChainsMap } from "../helpers";
+
+export const SUI_MAINNET = "mainnet";
+export const SUI_TESTNET = "testnet";
+export const SUI_DEVNET = "devnet";
+
+export const SuiChainData: ChainsMap = {
+  [SUI_MAINNET]: {
+    id: `sui:${SUI_MAINNET}`,
+    name: "SUI Mainnet",
+    rpc: [],
+    slip44: 0,
+    testnet: false,
+  },
+  [SUI_TESTNET]: {
+    id: `sui:${SUI_TESTNET}`,
+    name: "SUI Testnet",
+    rpc: [],
+    slip44: 0,
+    testnet: true,
+  },
+  [SUI_DEVNET]: {
+    id: `sui:${SUI_DEVNET}`,
+    name: "SUI Devnet",
+    rpc: [],
+    slip44: 0,
+    testnet: true,
+  },
+};
+
+export const SuiMetadata: NamespaceMetadata = {
+  [SUI_MAINNET]: {
+    logo: "/assets/sui.png",
+    rgb: "6, 135, 245",
+  },
+  [SUI_TESTNET]: {
+    logo: "/assets/sui.png",
+    rgb: "6, 135, 245",
+  },
+  [SUI_DEVNET]: {
+    logo: "/assets/sui.png",
+    rgb: "6, 135, 245",
+  },
+};
+
+export function getChainMetadata(chainId: string): ChainMetadata {
+  const reference = chainId.split(":")[1];
+  const metadata = SuiMetadata[reference];
+  if (typeof metadata === "undefined") {
+    throw new Error(`No chain metadata found for chainId: ${chainId}`);
+  }
+  return metadata;
+}

advanced/dapps/react-dapp-v2/src/components/Button.tsx

@@ -109,6 +109,7 @@ const SButton = styled.button<ButtonStyleProps>`
 const Button = (props: ButtonProps) => (
   <SButton
     {...props}
+    onClick={props.onClick}
     type={props.type}
     outline={props.outline}
     color={props.color}

advanced/dapps/react-dapp-v2/src/components/Column.tsx

@@ -27,16 +27,7 @@ const SColumn = styled.div<ColumnStyleProps>`
 
 const Column = (props: ColumnProps) => {
   const { children, spanHeight, maxWidth, center } = props;
-  return (
-    <SColumn
-      {...props}
-      spanHeight={spanHeight}
-      maxWidth={maxWidth}
-      center={center}
-    >
-      {children}
-    </SColumn>
-  );
+  return <SColumn {...props}>{children}</SColumn>;
 };
 
 Column.propTypes = {

advanced/dapps/react-dapp-v2/src/constants/default.ts

@@ -20,6 +20,7 @@ export const DEFAULT_MAIN_CHAINS = [
   "tezos:mainnet",
   "kadena:mainnet01",
   "bip122:000000000019d6689c085ae165831e93",
+  "sui:mainnet",
 ];
 
 export const DEFAULT_TEST_CHAINS = [
@@ -40,6 +41,8 @@ export const DEFAULT_TEST_CHAINS = [
   "tezos:testnet",
   "kadena:testnet04",
   "bip122:000000000933ea01ad0ee984209779ba",
+  "sui:testnet",
+  "sui:devnet",
 ];
 
 export const DEFAULT_CHAINS = [...DEFAULT_MAIN_CHAINS, ...DEFAULT_TEST_CHAINS];
@@ -287,6 +290,20 @@ export enum DEFAULT_BIP122_EVENTS {
   BIP122_ADDRESS_CHANGED = "bip122_addressesChanged",
 }
 
+/**
+ * SUI
+ */
+export enum DEFAULT_SUI_METHODS {
+  SUI_SIGN_TRANSACTION = "sui_signTransaction",
+  SUI_SIGN_AND_EXECUTE_TRANSACTION = "sui_signAndExecuteTransaction",
+  SUI_SIGN_PERSONAL_MESSAGE = "sui_signPersonalMessage",
+}
+
+export enum DEFAULT_SUI_EVENTS {
+  SUI_ACCOUNTS_CHANGED = "sui_accountsChanged",
+  SUI_CHAIN_CHANGED = "sui_chainChanged",
+}
+
 export const REGIONALIZED_RELAYER_ENDPOINTS: RelayerType[] = [
   {
     value: DEFAULT_RELAY_URL,

advanced/dapps/react-dapp-v2/src/contexts/ChainDataContext.tsx

@@ -17,6 +17,7 @@ import { EIP155ChainData } from "../chains/eip155";
 import { TezosChainData } from "../chains/tezos";
 import { KadenaChainData } from "../chains/kadena";
 import { BtcChainData } from "../chains/bip122";
+import { SuiChainData } from "../chains/sui";
 
 /**
  * Types
@@ -77,6 +78,9 @@ export function ChainDataContextProvider({
           case "bip122":
             chains = BtcChainData;
             break;
+          case "sui":
+            chains = SuiChainData;
+            break;
           default:
             console.error("Unknown chain namespace: ", namespace);
         }