Solana wallets

package.json

@@ -68,6 +68,7 @@
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
+    "@solana/web3.js": "^1.98.0",
     "@talismn/connect-wallets": "^1.2.5",
     "@tanstack/react-location": "^3.7.4",
     "@tanstack/react-query": "^4.14.5",

src/i18n/locales/en/translations.json

@@ -446,6 +446,7 @@
   "walletConnect.provider.disconnect": "Disconnect",
   "walletConnect.provider.connectAll": "Connect all",
   "walletConnect.provider.mode.substrate": "Polkadot",
+  "walletConnect.provider.mode.solana": "Solana",
   "walletConnect.provider.mode.evm": "EVM",
   "walletConnect.provider.mode.all": "All",
   "walletConnect.provider.section.installed": "Installed & recently used",

src/polkadot.d.ts

@@ -1,5 +1,6 @@
 import { InjectedWindowProvider } from "@polkadot/extension-inject/types"
 import { MetaMaskLikeProvider } from "utils/metamask"
+import { SolanaWalletProvider } from "utils/solana"
 
 import BigNumber from "bignumber.js"
 
@@ -20,7 +21,9 @@ declare global {
     SubWallet?: MetaMaskLikeProvider
     phantom?: {
       ethereum: MetaMaskLikeProvider
+      solana: SolanaWalletProvider
     }
+    solflare?: SolanaWalletProvider
     injectedWeb3?: Record<string, InjectedWindowProvider>
     walletExtension?: { isNovaWallet?: boolean }
   }

src/sections/web3-connect/Web3Connect.utils.ts

@@ -49,6 +49,7 @@ import {
 } from "sections/web3-connect/types"
 import {
   EVM_PROVIDERS,
+  SOLANA_PROVIDERS,
   WalletProviderType,
 } from "sections/web3-connect/constants/providers"
 import { useAddressStore } from "components/AddressBook/AddressBook.utils"
@@ -60,6 +61,8 @@ import { chainsMap } from "@galacticcouncil/xcm-cfg"
 import { EvmChain } from "@galacticcouncil/xcm-core"
 import { MetadataStore } from "@galacticcouncil/ui"
 import { create } from "zustand"
+import { safeConvertSolanaAddressToSS58 } from "utils/solana"
+import { HYDRADX_SS58_PREFIX } from "@galacticcouncil/sdk"
 export type { WalletProvider } from "./wallets"
 export { WalletProviderType, getSupportedWallets }
 
@@ -541,14 +544,22 @@ function mapWalletAccount({
   genesisHash,
 }: WalletAccount) {
   const isEvm = isEvmAddress(address)
+  const isSolana =
+    wallet &&
+    SOLANA_PROVIDERS.includes(wallet.extensionName as WalletProviderType)
 
   const chainInfo = genesisHashToChain(genesisHash)
 
   return {
-    address: isEvm ? new H160(address).toAccount() : address,
-    displayAddress: isEvm
-      ? address
-      : safeConvertAddressSS58(address, chainInfo.prefix) || address,
+    address: isEvm
+      ? new H160(address).toAccount()
+      : isSolana
+        ? safeConvertSolanaAddressToSS58(address, HYDRADX_SS58_PREFIX)
+        : address,
+    displayAddress:
+      isEvm || isSolana
+        ? address
+        : safeConvertAddressSS58(address, chainInfo.prefix) || address,
     genesisHash,
     name: name ?? "",
     provider: normalizeProviderType(wallet!),
@@ -572,6 +583,11 @@ export function getWalletModeIcon(mode: WalletMode) {
       return MetadataStore.getInstance().asset("polkadot", "0", "0")
     }
 
+    if (mode === WalletMode.Solana) {
+      // @TODO: update with our own icon
+      return "https://assets.coingecko.com/coins/images/4128/standard/solana.png?1718769756"
+    }
+
     return ""
   } catch (e) {}
 }

src/sections/web3-connect/accounts/Web3ConnectAccountList.tsx

@@ -6,6 +6,7 @@ import {
 } from "sections/web3-connect/Web3Connect.utils"
 import {
   Account,
+  PROVIDERS_BY_WALLET_MODE,
   useWeb3ConnectStore,
   WalletMode,
 } from "sections/web3-connect/store/useWeb3ConnectStore"
@@ -29,7 +30,6 @@ import { Alert } from "components/Alert/Alert"
 import { EVM_PROVIDERS } from "sections/web3-connect/constants/providers"
 import { Web3ConnectModeFilter } from "sections/web3-connect/modal/Web3ConnectModeFilter"
 import { useShallow } from "hooks/useShallow"
-import { isEvmAccount } from "utils/evm"
 import BigNumber from "bignumber.js"
 
 const getAccountComponentByType = (type: WalletProviderType | null) => {
@@ -107,12 +107,13 @@ export const Web3ConnectAccountList: FC<{
       : accounts
 
     let filtered = searched
-    if (filter === WalletMode.EVM) {
-      filtered = searched.filter(({ address }) => isEvmAccount(address))
-    }
 
-    if (filter === WalletMode.Substrate) {
-      filtered = searched.filter(({ address }) => !isEvmAccount(address))
+    const filteredProviders = PROVIDERS_BY_WALLET_MODE[filter]
+
+    if (filteredProviders.length > 0) {
+      filtered = searched.filter(({ provider }) =>
+        filteredProviders.includes(provider),
+      )
     }
 
     return filtered.sort((a, b) => {

src/sections/web3-connect/constants/providers.ts

@@ -9,6 +9,7 @@ export enum WalletProviderType {
   TrustWallet = "trustwallet",
   BraveWallet = "bravewallet",
   Phantom = "phantom",
+  Solflare = "solflare",
   Enkrypt = "enkrypt",
   MantaWallet = "manta-wallet-js",
   FearlessWallet = "fearless-wallet",
@@ -33,7 +34,6 @@ export const EVM_PROVIDERS: WalletProviderType[] = [
   WalletProviderType.SubwalletEvm,
   //WalletProviderType.TrustWallet,
   WalletProviderType.BraveWallet,
-  WalletProviderType.Phantom,
   WalletProviderType.WalletConnectEvm,
 ]
 
@@ -55,6 +55,11 @@ export const SUBSTRATE_H160_PROVIDERS: WalletProviderType[] = [
   WalletProviderType.Talisman,
 ]
 
+export const SOLANA_PROVIDERS: WalletProviderType[] = [
+  WalletProviderType.Phantom,
+  WalletProviderType.Solflare,
+]
+
 export const ALTERNATIVE_PROVIDERS: WalletProviderType[] = [
   WalletProviderType.ExternalWallet,
 ]

src/sections/web3-connect/modal/Web3ConnectModeFilter.tsx

@@ -4,7 +4,11 @@ import { useTranslation } from "react-i18next"
 import { WalletMode } from "sections/web3-connect/store/useWeb3ConnectStore"
 import { getWalletModeIcon } from "sections/web3-connect/Web3Connect.utils"
 
-const WALLET_MODES = [WalletMode.Substrate, WalletMode.EVM] as const
+const WALLET_MODES = [
+  WalletMode.Substrate,
+  WalletMode.EVM,
+  WalletMode.Solana,
+] as const
 
 export type Web3ConnectModeFilterProps = {
   active: WalletMode

src/sections/web3-connect/providers/Web3ConnectProviders.tsx

@@ -14,6 +14,7 @@ import {
   DESKTOP_ONLY_PROVIDERS,
   EVM_PROVIDERS,
   MOBILE_ONLY_PROVIDERS,
+  SOLANA_PROVIDERS,
   SUBSTRATE_H160_PROVIDERS,
   SUBSTRATE_PROVIDERS,
 } from "sections/web3-connect/constants/providers"
@@ -48,6 +49,7 @@ const useWalletProviders = (mode: WalletMode, chain?: string) => {
 
     const isDefaultMode = mode === WalletMode.Default
     const isEvmMode = mode === WalletMode.EVM
+    const isSolanaMode = mode === WalletMode.Solana
     const isSubstrateMode = mode === WalletMode.Substrate
     const isSubstrateEvmMode = mode === WalletMode.SubstrateEVM
     const isSubstrateH160Mode = mode === WalletMode.SubstrateH160
@@ -71,12 +73,15 @@ const useWalletProviders = (mode: WalletMode, chain?: string) => {
           provider.type,
         )
 
+        const isSolanaProvider = SOLANA_PROVIDERS.includes(provider.type)
+
         const byMode =
           isDefaultMode ||
           isSubstrateEvmMode ||
           (isEvmMode && isEvmProvider) ||
           (isSubstrateMode && isSubstrateProvider) ||
-          (isSubstrateH160Mode && isSubstrateH160Provider)
+          (isSubstrateH160Mode && isSubstrateH160Provider) ||
+          (isSolanaMode && isSolanaProvider)
 
         const byWalletConnect =
           isSubstrateMode && provider.type === "walletconnect" && chain

src/sections/web3-connect/store/useWeb3ConnectStore.ts

@@ -4,6 +4,7 @@ import { persist } from "zustand/middleware"
 import { omit } from "utils/rx"
 import {
   EVM_PROVIDERS,
+  SOLANA_PROVIDERS,
   SUBSTRATE_H160_PROVIDERS,
   SUBSTRATE_PROVIDERS,
 } from "sections/web3-connect/constants/providers"
@@ -21,6 +22,19 @@ export enum WalletMode {
   Substrate = "substrate",
   SubstrateEVM = "substrate-evm",
   SubstrateH160 = "substrate-h160",
+  Solana = "solana",
+}
+
+export const PROVIDERS_BY_WALLET_MODE: Record<
+  WalletMode,
+  WalletProviderType[]
+> = {
+  [WalletMode.Default]: [],
+  [WalletMode.EVM]: EVM_PROVIDERS,
+  [WalletMode.Substrate]: SUBSTRATE_PROVIDERS,
+  [WalletMode.SubstrateEVM]: [...SUBSTRATE_PROVIDERS, ...EVM_PROVIDERS],
+  [WalletMode.SubstrateH160]: SUBSTRATE_H160_PROVIDERS,
+  [WalletMode.Solana]: SOLANA_PROVIDERS,
 }
 
 export type Account = {
@@ -114,20 +128,10 @@ export const useWeb3ConnectStore = create<WalletProviderStore>()(
         }
 
         return providers.filter(({ type }) => {
-          if (mode === WalletMode.EVM) {
-            return EVM_PROVIDERS.includes(type)
-          }
-
-          if (mode === WalletMode.Substrate) {
-            return SUBSTRATE_PROVIDERS.includes(type)
-          }
-
-          if (mode === WalletMode.SubstrateH160) {
-            return SUBSTRATE_H160_PROVIDERS.includes(type)
-          }
+          const providers = PROVIDERS_BY_WALLET_MODE[mode]
 
-          if (mode === WalletMode.SubstrateEVM) {
-            return [...EVM_PROVIDERS, ...SUBSTRATE_PROVIDERS].includes(type)
+          if (providers.length > 0) {
+            return providers.includes(type)
           }
 
           return true

src/sections/web3-connect/wallets/Phantom.ts

@@ -1,21 +1,22 @@
-import { isPhantom } from "utils/metamask"
-import { MetaMask } from "./MetaMask"
+import PhantomLogo from "assets/icons/PhantomLogo.svg"
 import { WalletProviderType } from "sections/web3-connect/constants/providers"
+import { isPhantom } from "utils/solana"
+import { Solflare } from "./Solflare"
 
-export class Phantom extends MetaMask {
+export class Phantom extends Solflare {
   extensionName = WalletProviderType.Phantom
   title = "Phantom"
-  installUrl = ""
+  installUrl = "https://phantom.com/download"
   logo = {
-    src: "",
-    alt: "Subwallet Logo",
+    src: PhantomLogo,
+    alt: "Phantom Logo",
   }
 
   get installed() {
-    return isPhantom(window?.phantom?.ethereum)
+    return isPhantom(window?.phantom?.solana)
   }
 
   get rawExtension() {
-    return window?.phantom?.ethereum
+    return window?.phantom?.solana
   }
 }

src/sections/web3-connect/wallets/Solflare.ts

@@ -0,0 +1,93 @@
+import { SubscriptionFn, Wallet, WalletAccount } from "@talismn/connect-wallets"
+import SolflareLogo from "assets/icons/SolflareLogo.svg"
+import { WalletProviderType } from "sections/web3-connect/constants/providers"
+import { shortenAccountAddress } from "utils/formatting"
+import { isSolflare, SolanaWalletProvider } from "utils/solana"
+
+export class Solflare implements Wallet {
+  extensionName = WalletProviderType.Solflare
+  title = "Solflare"
+  installUrl = "https://solflare.com"
+  logo = {
+    src: SolflareLogo,
+    alt: "Solflare Logo",
+  }
+
+  _extension: SolanaWalletProvider | undefined
+  // @TODO: implement signer and update to proper type
+  _signer: any
+
+  _accounts: WalletAccount[] = []
+
+  get installed() {
+    return isSolflare(window?.solflare)
+  }
+
+  get rawExtension() {
+    return window?.solflare
+  }
+
+  get extension() {
+    return this._extension
+  }
+
+  get signer() {
+    return this._signer
+  }
+
+  transformError = (err: Error): Error => {
+    return new Error(err.message)
+  }
+
+  enable = async (dappName: string) => {
+    if (!dappName) {
+      throw new Error("MissingParamsError: Dapp name is required.")
+    }
+
+    if (!this.rawExtension) return
+
+    const wallet = this.rawExtension
+
+    try {
+      const connection = await wallet.connect()
+      const publicKey = connection?.publicKey || wallet.publicKey
+      if (!publicKey) return
+
+      const address = publicKey.toBase58()
+
+      this.setAccounts([
+        {
+          address,
+          source: this.extensionName,
+          name: shortenAccountAddress(address),
+          wallet: this,
+          signer: this.signer,
+        },
+      ])
+
+      this._extension = wallet
+    } catch (err: any) {
+      throw this.transformError(err as Error)
+    }
+  }
+
+  setAccounts = (accounts: WalletAccount[]) => {
+    this._accounts = accounts
+  }
+
+  getAccounts = async (): Promise<WalletAccount[]> => {
+    return this._accounts
+  }
+
+  subscribeAccounts = async (callback?: SubscriptionFn) => {
+    if (!this._extension) {
+      throw new Error(
+        `The 'Wallet.enable(dappname)' function should be called first.`,
+      )
+    }
+
+    // @TODO: implement account change if possible
+  }
+
+  unsubscribe = () => {}
+}