feat: bitcoin wallet buttons (#3876)

.changeset/smart-glasses-raise.md

@@ -0,0 +1,23 @@
+---
+'@reown/appkit-adapter-bitcoin': patch
+'@reown/appkit-wallet-button': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-common': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-core': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+---
+
+Added bitcoin support for wallet buttons

apps/laboratory/src/components/AppKitWalletButtons.tsx

@@ -98,6 +98,7 @@ function WalletButtonHooks({ wallets }: WalletButtonHooksProps) {
     const isWalletConnect = wallet === 'walletConnect'
 
     const isWalletButtonDisabled = !isWalletConnect && !isSocial && !isReady
+    const shouldCapitlize = wallet === 'okx'
 
     return (
       <Button
@@ -110,7 +111,7 @@ function WalletButtonHooks({ wallets }: WalletButtonHooksProps) {
         size="md"
         isLoading={isPending && pendingWallet === wallet}
         isDisabled={Boolean(caipAddress) || isWalletButtonDisabled}
-        textTransform="capitalize"
+        textTransform={shouldCapitlize ? 'uppercase' : 'capitalize'}
         data-testid={`wallet-button-hook-${wallet}`}
       >
         {wallet}

apps/laboratory/src/pages/library/bitcoin-wallet-button.tsx

@@ -0,0 +1,37 @@
+import { BitcoinAdapter } from '@reown/appkit-adapter-bitcoin'
+import { type CaipNetwork, createAppKit } from '@reown/appkit/react'
+
+import { AppKitButtons } from '../../components/AppKitButtons'
+import { AppKitWalletButtons } from '../../components/AppKitWalletButtons'
+import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { ThemeStore } from '../../utils/StoreUtil'
+
+const networks = ConstantsUtil.BitcoinNetworks
+
+const bitcoinAdapter = new BitcoinAdapter({
+  networks: networks as CaipNetwork[],
+  projectId: ConstantsUtil.ProjectId
+})
+
+const modal = createAppKit({
+  adapters: [bitcoinAdapter],
+  networks,
+  projectId: ConstantsUtil.ProjectId,
+  features: {
+    analytics: true,
+    email: false,
+    socials: []
+  },
+  metadata: ConstantsUtil.Metadata
+})
+
+ThemeStore.setModal(modal)
+
+export default function Wagmi() {
+  return (
+    <>
+      <AppKitButtons />
+      <AppKitWalletButtons wallets={ConstantsUtil.BitcoinWalletButtons} />
+    </>
+  )
+}

apps/laboratory/src/utils/ConstantsUtil.ts

@@ -172,6 +172,7 @@ export const ConstantsUtil = {
     'backpack',
     'frontier'
   ] as Wallet[],
+  BitcoinWalletButtons: ['walletConnect', 'xverse', 'leather', 'okx', 'phantom'] as Wallet[],
   Socials: [
     'google',
     'github',

apps/laboratory/src/utils/DataUtil.ts

@@ -199,6 +199,11 @@ export const bitcoinSdkOptions: SdkOption[] = [
     title: 'Default',
     link: '/library/bitcoin',
     description: 'Basic configuration using bitcoin as a driving library'
+  },
+  {
+    title: 'Wallet Button',
+    link: '/library/bitcoin-wallet-button',
+    description: 'Configuration using bitcoin with wallet buttons'
   }
 ]
 

packages/adapters/bitcoin/package.json

@@ -28,6 +28,7 @@
     "@reown/appkit": "workspace:*",
     "@reown/appkit-common": "workspace:*",
     "@reown/appkit-core": "workspace:*",
+    "@reown/appkit-utils": "workspace:*",
     "@wallet-standard/app": "1.1.0",
     "@wallet-standard/base": "1.1.0",
     "@walletconnect/universal-provider": "2.18.0",

packages/adapters/bitcoin/src/connectors/OKXConnector.ts

@@ -1,5 +1,6 @@
-import type { CaipNetwork } from '@reown/appkit-common'
+import { type CaipNetwork, ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common'
 import { CoreHelperUtil, type RequestArguments } from '@reown/appkit-core'
+import { PresetsUtil } from '@reown/appkit-utils'
 import { bitcoin } from '@reown/appkit/networks'
 
 import { MethodNotSupportedError } from '../errors/MethodNotSupportedError.js'
@@ -12,6 +13,8 @@ export class OKXConnector extends ProviderEventEmitter implements BitcoinConnect
   public readonly name = 'OKX Wallet'
   public readonly chain = 'bip122'
   public readonly type = 'ANNOUNCED'
+  public readonly explorerId =
+    PresetsUtil.ConnectorExplorerIds[CommonConstantsUtil.CONNECTOR_ID.OKX]
   public readonly imageUrl: string
 
   public readonly provider = this

packages/adapters/bitcoin/src/connectors/SatsConnectConnector.ts

@@ -15,6 +15,7 @@ import {
 import type { CaipNetwork } from '@reown/appkit-common'
 import { CoreHelperUtil } from '@reown/appkit-core'
 import type { RequestArguments } from '@reown/appkit-core'
+import { PresetsUtil } from '@reown/appkit-utils'
 
 import type { BitcoinConnector } from '../utils/BitcoinConnector.js'
 import { ProviderEventEmitter } from '../utils/ProviderEventEmitter.js'
@@ -50,6 +51,10 @@ export class SatsConnectConnector extends ProviderEventEmitter implements Bitcoi
     return this.wallet.name
   }
 
+  public get explorerId(): string | undefined {
+    return PresetsUtil.ConnectorExplorerIds[this.wallet.name]
+  }
+
   public get imageUrl(): string {
     return this.wallet.icon
   }

packages/adapters/bitcoin/src/connectors/WalletStandardConnector.ts

@@ -3,6 +3,7 @@ import type { Wallet, WalletWithFeatures } from '@wallet-standard/base'
 
 import type { CaipNetwork } from '@reown/appkit-common'
 import type { Provider, RequestArguments } from '@reown/appkit-core'
+import { PresetsUtil } from '@reown/appkit-utils'
 import { bitcoin, bitcoinTestnet } from '@reown/appkit/networks'
 
 import { MethodNotSupportedError } from '../errors/MethodNotSupportedError.js'
@@ -40,6 +41,10 @@ export class WalletStandardConnector extends ProviderEventEmitter implements Bit
     return this.wallet.icon
   }
 
+  public get explorerId(): string | undefined {
+    return PresetsUtil.ConnectorExplorerIds[this.name]
+  }
+
   public get chains() {
     return this.wallet.chains
       .map(chainId =>

packages/appkit-utils/src/ConstantsUtil.ts

@@ -11,6 +11,8 @@ export const ConstantsUtil = {
   BACKPACK_CONNECTOR_NAME: 'Backpack',
   BITGET_CONNECTOR_NAME: 'Bitget Wallet',
   FRONTIER_CONNECTOR_NAME: 'Frontier',
+  XVERSE_CONNECTOR_NAME: 'Xverse Wallet',
+  LEATHER_CONNECTOR_NAME: 'Leather',
 
   EIP155: 'eip155' as ChainNamespace,
   ADD_CHAIN_METHOD: 'wallet_addEthereumChain',

packages/appkit-utils/src/PresetsUtil.ts

@@ -13,6 +13,8 @@ export const PresetsUtil = {
       '225affb176778569276e484e1b92637ad061b01e13a048b35a9d280c3b58970f',
     [CommonConstantsUtil.CONNECTOR_ID.LEDGER]:
       '19177a98252e07ddfc9af2083ba8e07ef627cb6103467ffebb3f8f4205fd7927',
+    [CommonConstantsUtil.CONNECTOR_ID.OKX]:
+      '971e689d0a5be527bac79629b4ee9b925e82208e5168b733496a09c0faed0709',
 
     /* Connector names */
     [ConstantsUtil.METMASK_CONNECTOR_NAME]:
@@ -32,7 +34,11 @@ export const PresetsUtil = {
     [ConstantsUtil.BITGET_CONNECTOR_NAME]:
       '38f5d18bd8522c244bdd70cb4a68e0e718865155811c043f052fb9f1c51de662',
     [ConstantsUtil.FRONTIER_CONNECTOR_NAME]:
-      '85db431492aa2e8672e93f4ea7acf10c88b97b867b0d373107af63dc4880f041'
+      '85db431492aa2e8672e93f4ea7acf10c88b97b867b0d373107af63dc4880f041',
+    [ConstantsUtil.XVERSE_CONNECTOR_NAME]:
+      '2a87d74ae02e10bdd1f51f7ce6c4e1cc53cd5f2c0b6b5ad0d7b3007d2b13de7b',
+    [ConstantsUtil.LEATHER_CONNECTOR_NAME]:
+      '483afe1df1df63daf313109971ff3ef8356ddf1cc4e45877d205eee0b7893a13'
   } as Record<string, string>,
   NetworkImageIds: {
     // Ethereum

packages/common/src/utils/ConstantsUtil.ts

@@ -15,6 +15,7 @@ export const ConstantsUtil = {
     COINBASE_SDK: 'coinbaseWalletSDK',
     SAFE: 'safe',
     LEDGER: 'ledger',
+    OKX: 'okx',
     EIP6963: 'eip6963',
     AUTH: 'ID_AUTH'
   },

packages/wallet-button/src/utils/ConstantsUtil.ts

@@ -34,6 +34,8 @@ export const ConstantsUtil = {
     coin98: '2a3c89040ac3b723a1972a33a125b1db11e258a6975d3a61252cd64e6ea5ea01',
     'magic-eden': '8b830a2b724a9c3fbab63af6f55ed29c9dfa8a55e732dc88c80a196a2ba136c6',
     backpack: '2bd8c14e035c2d48f184aaa168559e86b0e3433228d3c4075900a221785019b0',
-    frontier: '85db431492aa2e8672e93f4ea7acf10c88b97b867b0d373107af63dc4880f041'
+    frontier: '85db431492aa2e8672e93f4ea7acf10c88b97b867b0d373107af63dc4880f041',
+    xverse: '2a87d74ae02e10bdd1f51f7ce6c4e1cc53cd5f2c0b6b5ad0d7b3007d2b13de7b',
+    leather: '483afe1df1df63daf313109971ff3ef8356ddf1cc4e45877d205eee0b7893a13'
   } as const
 }