feat: sui

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

@@ -23,7 +23,6 @@
     "@noble/hashes": "^1.8.0",
     "@noble/secp256k1": "^2.2.3",
     "@polkadot/util-crypto": "^10.1.2",
-    "@reown/appkit": "1.7.5",
     "@solana/web3.js": "^1.36.0",
     "@stacks/network": "^7.0.2",
     "@stacks/transactions": "^7.0.6",
@@ -33,7 +32,9 @@
     "@walletconnect/types": "2.20.1",
     "@walletconnect/universal-provider": "2.20.1",
     "@walletconnect/utils": "2.20.1",
+    "@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",
@@ -109,7 +110,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 * as stacks from "./stacks";
 
 import { ChainMetadata, ChainRequestRender } from "../helpers";
@@ -37,6 +38,8 @@ export function getChainMetadata(chainId: string): ChainMetadata {
       return tezos.getChainMetadata(chainId);
     case "bip122":
       return bip122.getChainMetadata(chainId);
+    case "sui":
+      return sui.getChainMetadata(chainId);
     case "stacks":
       return stacks.getChainMetadata(chainId);
     default:

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/Asset.tsx

@@ -13,7 +13,7 @@ const kadenaLogo = getChainMetadata("kadena:testnet04").logo;
 const btcLogo = getChainMetadata(
   "bip122:000000000933ea01ad0ee984209779ba"
 ).logo;
-
+const suiLogo = getChainMetadata("sui:mainnet").logo;
 const SAsset = styled.div`
   width: 100%;
   padding: 20px;
@@ -53,6 +53,8 @@ function getAssetIcon(asset: AssetData): JSX.Element {
       return <Icon src={kadenaLogo} />;
     case "btc":
       return <Icon src={btcLogo} />;
+    case "sui":
+      return <Icon src={suiLogo} />;
     default:
       return <Icon src={"/assets/eth20.svg"} />;
   }
@@ -72,7 +74,7 @@ const Asset = (props: AssetProps) => {
       </SAssetLeft>
       <SAssetRight>
         <SAssetBalance>
-          {fromWad(asset.balance || "0")} {asset.symbol}
+          {fromWad(asset.balance || "0", asset.decimals)} {asset.symbol}
         </SAssetBalance>
       </SAssetRight>
     </SAsset>

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",
   "stacks:1",
 ];
 
@@ -41,6 +42,8 @@ export const DEFAULT_TEST_CHAINS = [
   "tezos:testnet",
   "kadena:testnet04",
   "bip122:000000000933ea01ad0ee984209779ba",
+  "sui:testnet",
+  "sui:devnet",
   "stacks:2147483648",
 ];
 
@@ -304,6 +307,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";
 import { StacksChainData } from "../chains/stacks";
 
 /**
@@ -78,6 +79,9 @@ export function ChainDataContextProvider({
           case "bip122":
             chains = BtcChainData;
             break;
+          case "sui":
+            chains = SuiChainData;
+            break;
           case "stacks":
             chains = StacksChainData;
             break;