Feat/add sui chain support

package.json

@@ -22,13 +22,15 @@
     "@ledgerhq/connect-kit-loader": "1.1.8",
     "@ledgerhq/wallet-api-client": "^1.2.0",
     "@ledgerhq/wallet-api-client-react": "^1.1.1",
+    "@mysten/sui": "^1.34.0",
     "@nucypher/nucypher-contracts": "0.23.0",
     "@reduxjs/toolkit": "^1.6.1",
     "@rehooks/local-storage": "^2.4.4",
     "@sentry/react": "^7.33.0",
     "@sentry/tracing": "^7.33.0",
     "@starknet-react/chains": "^3.1.3",
     "@starknet-react/core": "^3.7.4",
+    "@suiet/wallet-kit": "^0.5.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/App.tsx

@@ -67,6 +67,7 @@ import { useGoogleTagManager } from "./hooks/google-tag-manager"
 import { hexToNumber, isSameChainNameOrId } from "./networks/utils"
 import { walletConnected } from "./store/account"
 import { useIsActive } from "./hooks/useIsActive"
+import SuiWalletProvider from "./contexts/SuiWalletProvider"
 
 const Web3EventHandlerComponent = () => {
   useSubscribeToVendingMachineContractEvents()
@@ -271,19 +272,21 @@ const App: FC = () => {
     <Router basename={`${process.env.PUBLIC_URL}`}>
       <Web3ReactProvider getLibrary={getLibrary}>
         <LedgerLiveAppProvider>
-          <StarknetWalletProvider>
-            <ThresholdProvider>
-              <ReduxProvider store={reduxStore}>
-                <ChakraProvider theme={theme}>
-                  <TokenContextProvider>
-                    <Web3EventHandlerComponent />
-                    <ModalRoot />
-                    <AppBody />
-                  </TokenContextProvider>
-                </ChakraProvider>
-              </ReduxProvider>
-            </ThresholdProvider>
-          </StarknetWalletProvider>
+          <SuiWalletProvider>
+            <StarknetWalletProvider>
+              <ThresholdProvider>
+                <ReduxProvider store={reduxStore}>
+                  <ChakraProvider theme={theme}>
+                    <TokenContextProvider>
+                      <Web3EventHandlerComponent />
+                      <ModalRoot />
+                      <AppBody />
+                    </TokenContextProvider>
+                  </ChakraProvider>
+                </ReduxProvider>
+              </ThresholdProvider>
+            </StarknetWalletProvider>
+          </SuiWalletProvider>
         </LedgerLiveAppProvider>
       </Web3ReactProvider>
     </Router>

src/components/Modal/SelectWalletModal/ConnectSui.tsx

@@ -0,0 +1,21 @@
+import { FC } from "react"
+import { WalletConnectionModalBase } from "./components"
+import SuiWalletList from "./SuiWalletList"
+import { SuiIcon } from "../../../static/icons/Sui"
+
+const ConnectSui: FC<{
+  goBack: () => void
+  closeModal: () => void
+}> = ({ goBack, closeModal }) => (
+  <WalletConnectionModalBase
+    goBack={goBack}
+    closeModal={closeModal}
+    WalletIcon={SuiIcon}
+    title="Sui"
+    subTitle="Connect by choosing one of the available wallets."
+  >
+    <SuiWalletList closeModal={closeModal} />
+  </WalletConnectionModalBase>
+)
+
+export default ConnectSui

src/components/Modal/SelectWalletModal/SuiWalletList.tsx

@@ -0,0 +1,53 @@
+import { useWallet } from "@suiet/wallet-kit"
+import { FC, useMemo } from "react"
+import { VStack, Button, Image, Text } from "@chakra-ui/react"
+import { BaseModalProps } from "../../../types"
+
+const SuiWalletList: FC<BaseModalProps> = ({ closeModal }) => {
+  const { select, configuredWallets, detectedWallets } = useWallet()
+
+  const supportedWallets = useMemo(
+    () => [...configuredWallets, ...detectedWallets],
+    [configuredWallets, detectedWallets]
+  )
+
+  const onSelectWallet = async (wallet: any) => {
+    if (!wallet.installed) {
+      window.open(wallet.downloadUrl.browserExtension, "_blank")
+      return
+    }
+
+    try {
+      await select(wallet.name)
+      closeModal()
+    } catch (error) {
+      console.error("Failed to connect wallet:", error)
+    }
+  }
+
+  return (
+    <VStack spacing={4} w="full">
+      {supportedWallets.map((wallet: any) => {
+        return (
+          <Button
+            key={wallet.name}
+            w="full"
+            h="auto"
+            py={4}
+            px={6}
+            variant="outline"
+            onClick={() => onSelectWallet(wallet)}
+            justifyContent="space-between"
+          >
+            <Text fontSize="lg" fontWeight="bold">
+              {wallet.name}
+            </Text>
+            <Image src={wallet.iconUrl} boxSize="32px" alt={wallet.name} />
+          </Button>
+        )
+      })}
+    </VStack>
+  )
+}
+
+export default SuiWalletList

src/components/Modal/SelectWalletModal/index.tsx

@@ -3,6 +3,7 @@ import { useWeb3React } from "@web3-react/core"
 import { MetaMaskIcon } from "../../../static/icons/MetaMask"
 import { Taho } from "../../../static/icons/Taho"
 import { WalletConnectIcon } from "../../../static/icons/WalletConect"
+import { SuiIcon } from "../../../static/icons/Sui"
 import InitialWalletSelection from "./InitialSelection"
 import { FC, useState } from "react"
 import ConnectMetamask from "./ConnectMetamask"
@@ -22,6 +23,7 @@ import { LedgerDark } from "../../../static/icons/LedgerDark"
 import { ConnectStarknetDirect } from "./ConnectStarknetDirect"
 import { StarknetIcon } from "../../../static/icons/Starknet"
 import { featureFlags } from "../../../constants"
+import ConnectSui from "./ConnectSui"
 
 const starknetWalletOption: WalletOption = {
   id: WalletType.Starknet,
@@ -78,6 +80,14 @@ const baseWalletOptions: WalletOption[] = [
       dark: CoinbaseWallet,
     },
   },
+  {
+    id: WalletType.Sui,
+    title: "Sui",
+    icon: {
+      light: SuiIcon,
+      dark: SuiIcon,
+    },
+  },
 ]
 
 // Include all wallet options including StarkNet
@@ -106,7 +116,6 @@ const SelectWalletModal: FC<BaseModalProps> = () => {
         <H5>Connect a Wallet</H5>
       </ModalHeader>
       <ModalCloseButton />
-
       {walletToConnect === null ? (
         <InitialWalletSelection
           walletOptions={walletOptions}
@@ -141,6 +150,8 @@ const ConnectWallet: FC<{
       return <ConnectLedgerLive goBack={goBack} closeModal={onClose} />
     case WalletType.Starknet:
       return <ConnectStarknetDirect goBack={goBack} closeModal={onClose} />
+    case WalletType.Sui:
+      return <ConnectSui goBack={goBack} closeModal={onClose} />
     default:
       return <></>
   }

src/components/Navbar/NavbarComponent.tsx

@@ -12,6 +12,7 @@ import {
 import { Routes, Route, Link, useMatch } from "react-router-dom"
 import WalletConnectionAlert from "./WalletConnectionAlert"
 import TrmWalletScreeningAlert from "./TrmWalletScreeningAlert"
+import SuiNetworkAlert from "./SuiNetworkAlert"
 import HamburgerButton from "./HamburgerButton"
 import DarkModeSwitcher from "./DarkModeSwitcher"
 import AccountButton from "./AccountButton"
@@ -81,6 +82,7 @@ const NavbarComponent: FC<NavbarComponentProps> = ({
           maxWidth={{ base: "38rem", xl: "100%" }}
           alignItems={"flex-end"}
         >
+          <SuiNetworkAlert />
           <TrmWalletScreeningAlert />
           <WalletConnectionAlert {...{ account, chainId }} />
         </VStack>

src/components/Navbar/SuiNetworkAlert.tsx

@@ -0,0 +1,92 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  CloseButton,
+} from "@chakra-ui/react"
+import { FC, useEffect, useState } from "react"
+import { useWallet } from "@suiet/wallet-kit"
+import { getEthereumDefaultProviderChainId } from "../../utils/getEnvVariable"
+import { isMainnetChainId } from "../../networks/utils"
+
+const SuiNetworkAlert: FC = () => {
+  const { connected, chain, chains, name: walletName } = useWallet()
+  const [hideAlert, setHideAlert] = useState(true)
+  const [alertDescription, setAlertDescription] = useState("")
+
+  const isMainnet = isMainnetChainId(getEthereumDefaultProviderChainId())
+  const targetChainId = isMainnet ? "sui:mainnet" : "sui:testnet"
+  const targetChainName = isMainnet ? "Mainnet" : "Testnet"
+
+  useEffect(() => {
+    // Debug logging
+    if (connected && chain) {
+      console.log("[SuiNetworkAlert] Connected to SUI wallet:", {
+        walletName,
+        currentChainId: chain.id,
+        currentChainName: chain.name,
+        targetChainId,
+        targetChainName,
+        availableChains: chains.map((c) => ({ id: c.id, name: c.name })),
+      })
+    }
+
+    if (!connected || !chain) {
+      setHideAlert(true)
+      return
+    }
+
+    // Check if it's the unknown network case
+    if (chain.id === "unknown:unknown") {
+      console.warn("[SuiNetworkAlert] SUI wallet on unknown network")
+      setAlertDescription(
+        `Unable to detect your SUI wallet network. Please ensure ${
+          walletName || "your wallet"
+        } is connected to ${targetChainName}.`
+      )
+      setHideAlert(false)
+      return
+    }
+
+    // Check if on wrong network
+    const isCorrectChain = chain.id === targetChainId
+    if (!isCorrectChain) {
+      console.warn("[SuiNetworkAlert] SUI wallet on wrong network", {
+        current: chain.id,
+        expected: targetChainId,
+      })
+      setAlertDescription(
+        `Your SUI wallet is connected to ${
+          chain.name || "an incorrect"
+        } network. Please switch to ${targetChainName} in your ${
+          walletName || "wallet"
+        } settings.`
+      )
+      setHideAlert(false)
+      return
+    }
+
+    // Connected to correct network
+    console.log("[SuiNetworkAlert] SUI wallet on correct network")
+    setHideAlert(true)
+  }, [connected, chain, chains, targetChainId, targetChainName, walletName])
+
+  const resetAlert = () => {
+    setHideAlert(true)
+    setAlertDescription("")
+  }
+
+  if (hideAlert || !connected) {
+    return null
+  }
+
+  return (
+    <Alert status="warning" variant="solid" w="fit-content" maxW="500px">
+      <AlertIcon alignSelf="center" />
+      <AlertDescription fontSize="sm">{alertDescription}</AlertDescription>
+      <CloseButton onClick={resetAlert} ml={2} />
+    </Alert>
+  )
+}
+
+export default SuiNetworkAlert

src/contexts/SuiWalletProvider.tsx

@@ -0,0 +1,32 @@
+import {
+  SuietWallet,
+  SuiWallet,
+  MartianWallet,
+  NightlyWallet,
+  WalletProvider,
+  DefaultChains,
+  SuiTestnetChain,
+  SuiMainnetChain,
+} from "@suiet/wallet-kit"
+import { FC, ReactNode } from "react"
+import { getEthereumDefaultProviderChainId } from "../utils/getEnvVariable"
+import { isMainnetChainId } from "../networks/utils"
+interface SuiWalletProviderProps {
+  children: ReactNode
+}
+
+const SuiWalletProvider: FC<SuiWalletProviderProps> = ({ children }) => {
+  const defaultWallets = [SuietWallet, SuiWallet, MartianWallet, NightlyWallet]
+  const isMainnet = isMainnetChainId(getEthereumDefaultProviderChainId())
+
+  return (
+    <WalletProvider
+      chains={isMainnet ? [SuiMainnetChain] : [SuiTestnetChain]}
+      defaultWallets={defaultWallets}
+    >
+      {children}
+    </WalletProvider>
+  )
+}
+
+export default SuiWalletProvider

src/enums/web3.ts

@@ -12,4 +12,9 @@ export enum WalletType {
   Coinbase = "COINBASE",
   LedgerLive = "LEDGER_LIVE",
   Starknet = "STARKNET",
+  Sui = "SUI",
+}
+
+export const WALLETS: { [key: string]: WalletType } = {
+  // ... existing code ...
 }