Reown WalletConnect

apps/main/src/hooks/useObservable.ts

@@ -23,7 +23,9 @@ export const useObservable = <T>(
   useEffect(() => {
     if (!enabled || !isObservable(observable)) return
 
-    const sub = observable.subscribe(onUpdateRef.current)
+    const sub = observable.subscribe((data) => {
+      onUpdateRef.current?.(data)
+    })
 
     return () => {
       sub.unsubscribe()

packages/web3-connect/package.json

@@ -14,11 +14,12 @@
   "dependencies": {
     "@galacticcouncil/ui": "*",
     "@galacticcouncil/utils": "*",
-    "i18next": "^23.16.4",
-    "react-i18next": "^15.7.3",
     "@mysten/wallet-standard": "^0.19.9",
+    "@reown/appkit": "^1.8.19",
     "@solana/web3.js": "^1.98.0",
     "@tanstack/react-query": "^5.59.15",
+    "i18next": "^23.16.4",
+    "react-i18next": "^15.7.3",
     "viem": "^2.30.0"
   }
 }

packages/web3-connect/src/components/provider/ProviderButton.tsx

@@ -59,20 +59,25 @@ export const ProviderButton: React.FC<ProviderButtonProps> = ({
   const { logo, title, installed, provider } = walletData
   const modes = getWalletModesByProviderType(provider)
 
+  const isHybridWallet = [WalletMode.Substrate, WalletMode.EVM].every((mode) =>
+    modes.includes(mode),
+  )
+
   const content = (
     <>
       <Box sx={{ position: "relative" }}>
         <img sx={{ size: "xl" }} src={logo} alt={title} />
-        {modes.filter(hasModeIcon).map((mode) => (
-          <Box
-            sx={{ position: "absolute", bottom: -4, right: -4 }}
-            borderRadius="full"
-            bg={getToken("surfaces.themeBasePalette.background")}
-            key={mode}
-          >
-            <img sx={{ size: "xs" }} src={getWalletModeIcon(mode)} />
-          </Box>
-        ))}
+        {!isHybridWallet &&
+          modes.filter(hasModeIcon).map((mode) => (
+            <Box
+              sx={{ position: "absolute", bottom: -4, right: -4 }}
+              borderRadius="full"
+              bg={getToken("surfaces.themeBasePalette.background")}
+              key={mode}
+            >
+              <img sx={{ size: "xs" }} src={getWalletModeIcon(mode)} />
+            </Box>
+          ))}
       </Box>
       <Text fs={["p5", "p4"]} align="center" mt="base">
         {title}

packages/web3-connect/src/components/provider/ProviderConnectAll.tsx

@@ -2,18 +2,23 @@ import { useTranslation } from "react-i18next"
 import { isNot, prop } from "remeda"
 
 import { SProviderButton } from "@/components/provider/ProviderButton.styled"
+import { WalletProviderType } from "@/config/providers"
 import { COMPATIBLE_WALLET_PROVIDERS, useWeb3Enable } from "@/hooks"
 import { Wallet } from "@/types/wallet"
 
 type Props = {
   installed: Wallet[]
 }
 
+const CONNECT_ALL_BLACKLIST = [WalletProviderType.WalletConnect]
+
 export const ProviderConnectAll: React.FC<Props> = ({ installed }) => {
   const { t } = useTranslation()
   const { enable } = useWeb3Enable({ disconnectOnError: true })
-  const installedCompatible = installed.filter(({ provider }) =>
-    COMPATIBLE_WALLET_PROVIDERS.includes(provider),
+  const installedCompatible = installed.filter(
+    ({ provider }) =>
+      COMPATIBLE_WALLET_PROVIDERS.includes(provider) &&
+      !CONNECT_ALL_BLACKLIST.includes(provider),
   )
 
   const disabledCompatible = installedCompatible.filter(isNot(prop("enabled")))

packages/web3-connect/src/config/providers.ts

@@ -26,7 +26,6 @@ export enum WalletProviderType {
   Slush = "slush",
   Suiet = "suiet",
   WalletConnect = "walletconnect",
-  WalletConnectEvm = "walletconnect-evm",
 }
 
 export const isWalletProviderType = (
@@ -50,7 +49,7 @@ export const EVM_PROVIDERS: WalletProviderType[] = [
   WalletProviderType.TrustWallet,
   WalletProviderType.BraveWallet,
   WalletProviderType.RabbyWallet,
-  WalletProviderType.WalletConnectEvm,
+  WalletProviderType.WalletConnect,
 ]
 
 export const SUBSTRATE_PROVIDERS: WalletProviderType[] = [

packages/web3-connect/src/config/wallet.ts

@@ -1,5 +1,7 @@
 export const WALLET_DAPP_NAME = "Hydration"
 
+export const REOWN_PROJECT_ID = "265a3fea03b46c14a46a201fbd6c552e"
+
 export enum WalletProviderStatus {
   Connected = "connected",
   Pending = "pending",

packages/web3-connect/src/hooks/useWeb3Enable.ts

@@ -12,7 +12,7 @@ import {
 } from "@/components/address-book/AddressBook.store"
 import { WalletProviderType } from "@/config/providers"
 import { useWeb3Connect, WalletProviderStatus } from "@/hooks/useWeb3Connect"
-import { BaseWalletError } from "@/utils/errors"
+import { BaseWalletError, UserRejectedError } from "@/utils/errors"
 import { toStoredAccount } from "@/utils/wallet"
 import { getWallet } from "@/wallets"
 
@@ -58,9 +58,10 @@ export const useWeb3Enable = (options: UseWeb3EnableOptions = {}) => {
       addToAddressBook(addresses)
     },
     onError: (error, type) => {
-      if (options.disconnectOnError) {
+      if (options.disconnectOnError || error instanceof UserRejectedError) {
         return disconnect(type)
       }
+
       setStatus(type, WalletProviderStatus.Error)
       if (error instanceof BaseWalletError) {
         setError(error.message)

packages/web3-connect/src/signers/EthereumSigner.ts

@@ -151,7 +151,7 @@ export class EthereumSigner {
     const newChainId = evmClient.chain.id
 
     if (prevChainId !== newChainId) {
-      this.publicClient = evmClient.getProvider()
+      this.publicClient = evmClient.getProvider() as PublicClient
     }
 
     await this.walletClient.switchChain({ id: evmClient.chain.id })

packages/web3-connect/src/utils/errors.ts

@@ -23,3 +23,8 @@ export class NotInstalledError extends BaseWalletError {
   readonly name = "NotInstalledError"
   readonly message = `${this.wallet.title} could not be enabled. Refresh the browser if ${this.wallet.title} is already installed.`
 }
+
+export class UserRejectedError extends BaseWalletError {
+  readonly name = "UserRejectedError"
+  readonly message = `${this.wallet.title} was rejected by the user.`
+}

packages/web3-connect/src/wallets/ReownWalletConnect/AppKit.ts

@@ -0,0 +1,26 @@
+import { type AppKit, createAppKit } from "@reown/appkit"
+
+import { REOWN_PROJECT_ID } from "@/config/wallet"
+
+import { EVM_NETWORKS, hydration, SUBSTRATE_NETWORKS } from "./networks"
+
+export class AppKitSingleton {
+  private static instance: AppKit | undefined
+
+  static getInstance(): AppKit {
+    if (!AppKitSingleton.instance) {
+      AppKitSingleton.instance = createAppKit({
+        projectId: REOWN_PROJECT_ID,
+        networks: [hydration, ...SUBSTRATE_NETWORKS, ...EVM_NETWORKS],
+        universalProviderConfigOverride: {
+          methods: {
+            polkadot: ["polkadot_signTransaction", "polkadot_signMessage"],
+          },
+        },
+        showWallets: false,
+        allWallets: "HIDE",
+      })
+    }
+    return AppKitSingleton.instance
+  }
+}