diff --git a/.changeset/grumpy-games-fly.md b/.changeset/grumpy-games-fly.md new file mode 100644 index 0000000000..e1d0cde782 --- /dev/null +++ b/.changeset/grumpy-games-fly.md @@ -0,0 +1,62 @@ +--- +'@reown/appkit-wallet-button': patch +'@reown/appkit': patch +'@reown/appkit-adapter-bitcoin': patch +'@reown/appkit-adapter-ethers': patch +'@reown/appkit-adapter-ethers5': patch +'@reown/appkit-adapter-solana': patch +'@reown/appkit-adapter-wagmi': patch +'@reown/appkit-utils': patch +'@reown/appkit-cdn': patch +'@reown/appkit-cli': patch +'@reown/appkit-common': 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 `createAppKitWalletButton` function to `@reown/appkit-wallet-button` package for easier implementation of the Wallet Button feature without relying solely on hooks. + +**Example usage** + +```tsx +import { useEffect, useState } from 'react' +import { createAppKitWalletButton } from '@reown/appkit-wallet-button' + +const appKitWalletButton = createAppKitWalletButton() + +export function YourApp() { + const [isReady, setIsReady] = useState(false) + + useEffect(() => { + // Check if Wallet Buttons are ready + if (appKitWalletButton.isReady()) { + setIsReady(true) + } else { + // Subscribe to ready state changes + appKitWalletButton.subscribeIsReady(state => { + setIsReady(state.isReady) + }) + } + }, [appKitWalletButton]) + + return ( + <> + + {' '} + + + ) +} +``` \ No newline at end of file diff --git a/examples/html-wagmi-wallet-button/CHANGELOG.md b/examples/html-wagmi-wallet-button/CHANGELOG.md new file mode 100644 index 0000000000..cc36d3a874 --- /dev/null +++ b/examples/html-wagmi-wallet-button/CHANGELOG.md @@ -0,0 +1,170 @@ +# @examples/html-ethers + +## 1.0.6 + +### Patch Changes + +- [#2970](https://github.com/reown-com/appkit/pull/2970) [`e6a36a7`](https://github.com/reown-com/appkit/commit/e6a36a746e85ced1f89fc1d7227e25df1559f063) Thanks [@magiziz](https://github.com/magiziz)! - Introducing debug mode. This is useful for seeing UI alerts while debugging. + + **Example usage** + + ```ts + import { WagmiAdapter } from '@reown/appkit-adapter-wagmi' + import { mainnet } from '@reown/appkit/networks' + import { createAppKit } from '@reown/appkit/react' + + const wagmiAdapter = new WagmiAdapter({ + ssr: true, + networks: [mainnet], + projectId: 'YOUR_PROJECT_ID' + }) + + const modal = createAppKit({ + adapters: [wagmiAdapter], + networks: [mainnet], + projectId: 'YOUR_PROJECT_ID', + debug: true // Optional - defaults to false + }) + ``` + +- [#2984](https://github.com/reown-com/appkit/pull/2984) [`b5444bd`](https://github.com/reown-com/appkit/commit/b5444bdd454d370cf3f17267d457cd46de10a5b9) Thanks [@magiziz](https://github.com/magiziz)! - Changed logger imports to not cause the webpack bundler to throw a CommonJS module error. + +- [#2974](https://github.com/reown-com/appkit/pull/2974) [`0563711`](https://github.com/reown-com/appkit/commit/05637111aba940af5f46215336268294675322fd) Thanks [@magiziz](https://github.com/magiziz)! - Added create wallet flow in connect modal + +- Updated dependencies [[`e6a36a7`](https://github.com/reown-com/appkit/commit/e6a36a746e85ced1f89fc1d7227e25df1559f063), [`b5444bd`](https://github.com/reown-com/appkit/commit/b5444bdd454d370cf3f17267d457cd46de10a5b9), [`0563711`](https://github.com/reown-com/appkit/commit/05637111aba940af5f46215336268294675322fd)]: + - @reown/appkit-adapter-ethers@1.0.6 + - @reown/appkit@1.0.6 + +## 1.0.5 + +### Patch Changes + +- [#2872](https://github.com/reown-com/appkit/pull/2872) [`f5dc9fa`](https://github.com/reown-com/appkit/commit/f5dc9fa1ec5c853f0ee7edbeb0aa6f053bdc5513) Thanks [@zoruka](https://github.com/zoruka)! - Get correct data from session namespaces and set it for approved caip networks data on UniversalProvider usage" + +- [#2937](https://github.com/reown-com/appkit/pull/2937) [`97dd79d`](https://github.com/reown-com/appkit/commit/97dd79df711201d5b7450fb10544f063975e6cb6) Thanks [@enesozturk](https://github.com/enesozturk)! - Updates adapter packages dependency managements + +- [#2919](https://github.com/reown-com/appkit/pull/2919) [`e2bacfd`](https://github.com/reown-com/appkit/commit/e2bacfd0aaa9a83060d3181678c42dd9cc90293b) Thanks [@zoruka](https://github.com/zoruka)! - Adds batched call for solana_signAllTransactions RPC call on Solana WalletConnectProvider + +- [#2872](https://github.com/reown-com/appkit/pull/2872) [`f5dc9fa`](https://github.com/reown-com/appkit/commit/f5dc9fa1ec5c853f0ee7edbeb0aa6f053bdc5513) Thanks [@zoruka](https://github.com/zoruka)! - Implement the correct logic for getting available networks when using universal provider + +- [#2927](https://github.com/reown-com/appkit/pull/2927) [`865320c`](https://github.com/reown-com/appkit/commit/865320c709bb76a61ec88c786c6b2a354c8b4b8b) Thanks [@enesozturk](https://github.com/enesozturk)! - Refactors setting active CAIP address and aligns ethers5 adapter with ethers + +- [#2920](https://github.com/reown-com/appkit/pull/2920) [`eeb9207`](https://github.com/reown-com/appkit/commit/eeb92079b4bb37d2cb9db68f51bcdeb87bd83af3) Thanks [@ignaciosantise](https://github.com/ignaciosantise)! - fix: use usdt abi for usdt transactions + +- [#2916](https://github.com/reown-com/appkit/pull/2916) [`cc35726`](https://github.com/reown-com/appkit/commit/cc357269ec04c6372c50d3bf00c674bfe182128b) Thanks [@ignaciosantise](https://github.com/ignaciosantise)! - fix: override ens profile picture if resolved + +- [#2934](https://github.com/reown-com/appkit/pull/2934) [`6faa782`](https://github.com/reown-com/appkit/commit/6faa7829c73b98430f1d8873bd9caf6c90046f2e) Thanks [@enesozturk](https://github.com/enesozturk)! - Fixes swap amount calculation to prevent floating numbers + +- [#2947](https://github.com/reown-com/appkit/pull/2947) [`bad570a`](https://github.com/reown-com/appkit/commit/bad570a9806785854cea4573cfb1e5bfb4e4a8fb) Thanks [@magiziz](https://github.com/magiziz)! - Replaced multi-account screen with single account screen when only one account is connected + +- [#2944](https://github.com/reown-com/appkit/pull/2944) [`8baf998`](https://github.com/reown-com/appkit/commit/8baf998133d0bbab4f87f15a0337d4b1452912d7) Thanks [@tomiir](https://github.com/tomiir)! - Fix issue where wagmis useDisconnect hook would not disconnect appkit internally + +- Updated dependencies [[`f5dc9fa`](https://github.com/reown-com/appkit/commit/f5dc9fa1ec5c853f0ee7edbeb0aa6f053bdc5513), [`97dd79d`](https://github.com/reown-com/appkit/commit/97dd79df711201d5b7450fb10544f063975e6cb6), [`e2bacfd`](https://github.com/reown-com/appkit/commit/e2bacfd0aaa9a83060d3181678c42dd9cc90293b), [`f5dc9fa`](https://github.com/reown-com/appkit/commit/f5dc9fa1ec5c853f0ee7edbeb0aa6f053bdc5513), [`865320c`](https://github.com/reown-com/appkit/commit/865320c709bb76a61ec88c786c6b2a354c8b4b8b), [`eeb9207`](https://github.com/reown-com/appkit/commit/eeb92079b4bb37d2cb9db68f51bcdeb87bd83af3), [`cc35726`](https://github.com/reown-com/appkit/commit/cc357269ec04c6372c50d3bf00c674bfe182128b), [`6faa782`](https://github.com/reown-com/appkit/commit/6faa7829c73b98430f1d8873bd9caf6c90046f2e), [`bad570a`](https://github.com/reown-com/appkit/commit/bad570a9806785854cea4573cfb1e5bfb4e4a8fb), [`8baf998`](https://github.com/reown-com/appkit/commit/8baf998133d0bbab4f87f15a0337d4b1452912d7)]: + - @reown/appkit@1.0.5 + - @reown/appkit-adapter-ethers@1.0.5 + +## 1.0.4 + +### Patch Changes + +- [#2907](https://github.com/reown-com/appkit/pull/2907) [`b35af73`](https://github.com/reown-com/appkit/commit/b35af73dde9c46142741bd153e9e7105c077cfbd) Thanks [@tomiir](https://github.com/tomiir)! - Fixes issue where featured wallet ids were being filtered out if their connector was present but not displayed. eg. SDK Connectors. + +- [#2882](https://github.com/reown-com/appkit/pull/2882) [`aaa22cf`](https://github.com/reown-com/appkit/commit/aaa22cfdb620d44da52466c1cc9270ad88f4c81b) Thanks [@magiziz](https://github.com/magiziz)! - Fixed deep link not working after connecting a wallet + +- Updated dependencies [[`b35af73`](https://github.com/reown-com/appkit/commit/b35af73dde9c46142741bd153e9e7105c077cfbd), [`aaa22cf`](https://github.com/reown-com/appkit/commit/aaa22cfdb620d44da52466c1cc9270ad88f4c81b)]: + - @reown/appkit-adapter-ethers@1.0.4 + - @reown/appkit@1.0.4 + +## 1.0.3 + +### Patch Changes + +- [#2897](https://github.com/reown-com/appkit/pull/2897) [`fb20e46`](https://github.com/reown-com/appkit/commit/fb20e461ee6745b83d9cdf5051fc4c674e0d793d) Thanks [@tomiir](https://github.com/tomiir)! - Makes SDKType param optional + +- [#2889](https://github.com/reown-com/appkit/pull/2889) [`dc7b895`](https://github.com/reown-com/appkit/commit/dc7b89527e4dd3c4602db69491be5bc03a9c52d3) Thanks [@svenvoskamp](https://github.com/svenvoskamp)! - Update siweParams with AppKit chains + +- [#2888](https://github.com/reown-com/appkit/pull/2888) [`1086727`](https://github.com/reown-com/appkit/commit/1086727e024bafbbebe0059635c4d8728a7fb6b9) Thanks [@enesozturk](https://github.com/enesozturk)! - Updates active network state management and local storage controls + +- Updated dependencies [[`fb20e46`](https://github.com/reown-com/appkit/commit/fb20e461ee6745b83d9cdf5051fc4c674e0d793d), [`dc7b895`](https://github.com/reown-com/appkit/commit/dc7b89527e4dd3c4602db69491be5bc03a9c52d3), [`1086727`](https://github.com/reown-com/appkit/commit/1086727e024bafbbebe0059635c4d8728a7fb6b9)]: + - @reown/appkit-adapter-ethers@1.0.3 + - @reown/appkit@1.0.3 + +## 1.0.2 + +### Patch Changes + +- [#2881](https://github.com/reown-com/appkit/pull/2881) [`a632159`](https://github.com/reown-com/appkit/commit/a6321595e4c910215e552119be69dc1486efb240) Thanks [@tomiir](https://github.com/tomiir)! - Fixes issue where wagmi would not reconnect on an active session + +- [#2867](https://github.com/reown-com/appkit/pull/2867) [`48ad644`](https://github.com/reown-com/appkit/commit/48ad6444ca8f5a53cc2669e961492e62f32c0687) Thanks [@zoruka](https://github.com/zoruka)! - Refactors solana network and account syncing logic to clean up the code and fix missing project id for solana connection + +- [#2879](https://github.com/reown-com/appkit/pull/2879) [`babb413`](https://github.com/reown-com/appkit/commit/babb4133ddff939061b788c3115b9d988b6e3ce2) Thanks [@zoruka](https://github.com/zoruka)! - Add Solana CoinbaseWalletProvider to allow connecting with coinbase extension + +- [#2881](https://github.com/reown-com/appkit/pull/2881) [`a632159`](https://github.com/reown-com/appkit/commit/a6321595e4c910215e552119be69dc1486efb240) Thanks [@tomiir](https://github.com/tomiir)! - Fixes wrong wagmi authConnector name causing issues when merging multiple authConnectors + +- [#2861](https://github.com/reown-com/appkit/pull/2861) [`a181a19`](https://github.com/reown-com/appkit/commit/a181a19a017053df646e9ae6e1ffa77b1deac1d1) Thanks [@enesozturk](https://github.com/enesozturk)! - Updates the localstorage keys + +- Updated dependencies [[`a632159`](https://github.com/reown-com/appkit/commit/a6321595e4c910215e552119be69dc1486efb240), [`48ad644`](https://github.com/reown-com/appkit/commit/48ad6444ca8f5a53cc2669e961492e62f32c0687), [`babb413`](https://github.com/reown-com/appkit/commit/babb4133ddff939061b788c3115b9d988b6e3ce2), [`a632159`](https://github.com/reown-com/appkit/commit/a6321595e4c910215e552119be69dc1486efb240), [`a181a19`](https://github.com/reown-com/appkit/commit/a181a19a017053df646e9ae6e1ffa77b1deac1d1)]: + - @reown/appkit-adapter-ethers@1.0.2 + - @reown/appkit@1.0.2 + +## 1.0.1 + +### Patch Changes + +- [#54](https://github.com/WalletConnect/web3modal/pull/54) [`dc6dd8d`](https://github.com/WalletConnect/web3modal/commit/dc6dd8d37cbe79ae3b0bcaf7bdace1fe6ad11b09) Thanks [@tomiir](https://github.com/tomiir)! - Makes packages public + +- Updated dependencies [[`dc6dd8d`](https://github.com/WalletConnect/web3modal/commit/dc6dd8d37cbe79ae3b0bcaf7bdace1fe6ad11b09)]: + - @reown/appkit-adapter-ethers@1.0.1 + - @reown/appkit@1.0.1 + +## 1.0.0 + +### Major Changes + +- [#53](https://github.com/WalletConnect/web3modal/pull/53) [`f4a378d`](https://github.com/WalletConnect/web3modal/commit/f4a378de8bf67f296ab5cc2d730533e7362ba36a) Thanks [@tomiir](https://github.com/tomiir)! - Reown v1.0.0 + +### Patch Changes + +- [#49](https://github.com/WalletConnect/web3modal/pull/49) [`e678965`](https://github.com/WalletConnect/web3modal/commit/e67896504762ea2220aaedb3202077eec83fdc7f) Thanks [@enesozturk](https://github.com/enesozturk)! - Updates prop names, adapter names, network exported path name + +- [#52](https://github.com/WalletConnect/web3modal/pull/52) [`3d62df8`](https://github.com/WalletConnect/web3modal/commit/3d62df8e0f29977ee82f96f17fbbac66f39ae6a6) Thanks [@zoruka](https://github.com/zoruka)! - Fix network availability and wagmi reconnect + +- Updated dependencies [[`e678965`](https://github.com/WalletConnect/web3modal/commit/e67896504762ea2220aaedb3202077eec83fdc7f), [`3d62df8`](https://github.com/WalletConnect/web3modal/commit/3d62df8e0f29977ee82f96f17fbbac66f39ae6a6), [`f4a378d`](https://github.com/WalletConnect/web3modal/commit/f4a378de8bf67f296ab5cc2d730533e7362ba36a)]: + - @reown/appkit-adapter-ethers@1.0.0 + - @reown/appkit@1.0.0 + +## 0.0.5 + +### Patch Changes + +- [#45](https://github.com/WalletConnect/web3modal/pull/45) [`395398c`](https://github.com/WalletConnect/web3modal/commit/395398c7c943142776da2ea8011205e600d8ab86) Thanks [@enesozturk](https://github.com/enesozturk)! - Updates RPC urls project id query params dynamically + +- [#46](https://github.com/WalletConnect/web3modal/pull/46) [`756ab0d`](https://github.com/WalletConnect/web3modal/commit/756ab0d9f7b86abc6b1a4831197058176618d9ef) Thanks [@enesozturk](https://github.com/enesozturk)! - Updates sdk type and sdk version values + +- [#42](https://github.com/WalletConnect/web3modal/pull/42) [`8c90093`](https://github.com/WalletConnect/web3modal/commit/8c90093f724dc1ba4e86f7101fac8772b58fae04) Thanks [@tomiir](https://github.com/tomiir)! - Fix circular dependency in OptionsController + +- Updated dependencies [[`395398c`](https://github.com/WalletConnect/web3modal/commit/395398c7c943142776da2ea8011205e600d8ab86), [`756ab0d`](https://github.com/WalletConnect/web3modal/commit/756ab0d9f7b86abc6b1a4831197058176618d9ef), [`8c90093`](https://github.com/WalletConnect/web3modal/commit/8c90093f724dc1ba4e86f7101fac8772b58fae04)]: + - @reown/appkit@0.0.5 + - @reown/appkit-adapter-ethers@0.0.5 + +## 0.0.4 + +### Patch Changes + +- [#38](https://github.com/WalletConnect/web3modal/pull/38) [`89fb054`](https://github.com/WalletConnect/web3modal/commit/89fb054d7e2513b80940c73101dc395e7ea2694b) Thanks [@tomiir](https://github.com/tomiir)! - Base reown package rename setup. + +- Updated dependencies [[`89fb054`](https://github.com/WalletConnect/web3modal/commit/89fb054d7e2513b80940c73101dc395e7ea2694b)]: + - @reown/appkit-adapter-ethers@0.0.4 + - @reown/appkit@0.0.4 + +## 0.0.3 + +### Patch Changes + +- [#28](https://github.com/WalletConnect/web3modal/pull/28) [`91d0296`](https://github.com/WalletConnect/web3modal/commit/91d02963cbe3c2d06b74801b519ce23dd30ff797) Thanks [@tomiir](https://github.com/tomiir)! - Package setup. Reset Changelogs + +- [#12](https://github.com/WalletConnect/web3modal/pull/12) [`51eff9f`](https://github.com/WalletConnect/web3modal/commit/51eff9f82c296b0ba2b5ab33af92a1fa54a77f7a) Thanks [@tomiir](https://github.com/tomiir)! - Adds test vitest.workspace file + +- Updated dependencies [[`91d0296`](https://github.com/WalletConnect/web3modal/commit/91d02963cbe3c2d06b74801b519ce23dd30ff797), [`51eff9f`](https://github.com/WalletConnect/web3modal/commit/51eff9f82c296b0ba2b5ab33af92a1fa54a77f7a)]: + - @reown/appkit-adapter-ethers@0.0.3 + - @reown/appkit@0.0.3 diff --git a/examples/html-wagmi-wallet-button/index.html b/examples/html-wagmi-wallet-button/index.html new file mode 100644 index 0000000000..f4bf22c24a --- /dev/null +++ b/examples/html-wagmi-wallet-button/index.html @@ -0,0 +1,54 @@ + + + + + + HTML Wagmi Example + + + + + + +
+
+ + AppKit +
+ +

HTML AppKit Wallet Button Example

+ +
+ + +
+ +
+ + + + + +
+
+ + + diff --git a/examples/html-wagmi-wallet-button/package.json b/examples/html-wagmi-wallet-button/package.json new file mode 100644 index 0000000000..74681bc9b0 --- /dev/null +++ b/examples/html-wagmi-wallet-button/package.json @@ -0,0 +1,18 @@ +{ + "name": "@examples/html-wagmi-wallet-button", + "private": true, + "version": "1.2.0", + "scripts": { + "dev": "vite --port 3011", + "build": "vite build" + }, + "dependencies": { + "@reown/appkit-adapter-wagmi": "workspace:*", + "@reown/appkit": "workspace:*", + "@reown/appkit-wallet-button": "workspace:*", + "ethers": "6.13.2" + }, + "devDependencies": { + "vite": "5.2.11" + } +} diff --git a/examples/html-wagmi-wallet-button/public/appkit-logo.png b/examples/html-wagmi-wallet-button/public/appkit-logo.png new file mode 100644 index 0000000000..f0a3b7efba Binary files /dev/null and b/examples/html-wagmi-wallet-button/public/appkit-logo.png differ diff --git a/examples/html-wagmi-wallet-button/public/favicon-dark.png b/examples/html-wagmi-wallet-button/public/favicon-dark.png new file mode 100644 index 0000000000..d7401fd740 Binary files /dev/null and b/examples/html-wagmi-wallet-button/public/favicon-dark.png differ diff --git a/examples/html-wagmi-wallet-button/public/favicon.png b/examples/html-wagmi-wallet-button/public/favicon.png new file mode 100644 index 0000000000..f5c062b69c Binary files /dev/null and b/examples/html-wagmi-wallet-button/public/favicon.png differ diff --git a/examples/html-wagmi-wallet-button/public/reown-logo-white.png b/examples/html-wagmi-wallet-button/public/reown-logo-white.png new file mode 100644 index 0000000000..f2a67f92b1 Binary files /dev/null and b/examples/html-wagmi-wallet-button/public/reown-logo-white.png differ diff --git a/examples/html-wagmi-wallet-button/public/reown-logo.png b/examples/html-wagmi-wallet-button/public/reown-logo.png new file mode 100644 index 0000000000..4799cc246f Binary files /dev/null and b/examples/html-wagmi-wallet-button/public/reown-logo.png differ diff --git a/examples/html-wagmi-wallet-button/src/main.css b/examples/html-wagmi-wallet-button/src/main.css new file mode 100644 index 0000000000..001b138299 --- /dev/null +++ b/examples/html-wagmi-wallet-button/src/main.css @@ -0,0 +1,269 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); + +:root { + --apkt-background-primary: hsl(0 0% 100%); + --apkt-background-invert: hsl(0 0% 13%); + --apkt-foreground-accent-primary-010: rgba(9, 136, 240, 0.1); + --apkt-border: hsl(0 0% 91%); + --apkt-border-secondary: hsl(0 0% 82%); + --apkt-text-primary: hsl(0 0% 13%); + --apkt-text-accent-primary: rgba(9, 136, 240, 1); + --apkt-text-secondary: hsl(0 0% 60%); + --apkt-border-sm: 8px; + --page-background-image-color: hsl(0, 0%, 87%); +} + +.dark { + --apkt-background-primary: hsl(0 0% 13%); + --apkt-background-invert: hsl(0 0% 100%); + --apkt-border: hsl(0 0% 16%); + --apkt-border-secondary: hsl(0, 0%, 22%); + --apkt-text-primary: hsl(0 0% 100%); + --apkt-text-secondary: hsl(0 0% 60%); + --page-background-image-color: hsl(0deg 0% 17.25%); +} + +html, +body { + max-width: 100vw; + overflow-x: hidden; +} + +body { + color: var(--apkt-text-primary); + background: var(--apkt-background-primary); + font-family: + 'Inter', + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + Oxygen, + Ubuntu, + Cantarell, + 'Open Sans', + 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +::selection { + background: rgba(0, 0, 0, 0.1); +} + +.dark { + ::selection { + background: rgba(255, 255, 255, 0.1); + } +} + +img { + user-drag: none; + user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; +} + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +a { + color: inherit; + text-decoration: none; +} + +@media (prefers-color-scheme: dark) { + html { + color-scheme: dark; + } +} + +button { + display: inline-flex; + font-size: 14px; + padding: 1rem 1.5rem; + justify-content: center; + align-items: center; + gap: 0.5rem; + border-radius: 16px; + background: var(--apkt-foreground-accent-primary-010); + color: var(--apkt-text-accent-primary); + border: none; + transition: border-radius 0.3s ease; + will-change: border-radius; +} + +button:hover { + border-radius: var(--radius-extra-radius-4, 24px); +} + +button:active { + box-shadow: 0px 0px 0px 4px rgba(9, 136, 240, 0.4); +} + +h1 { + margin: 20px; +} + +pre { + white-space: pre-wrap; /* Wrap text */ + word-wrap: break-word; /* Break long words */ + font-family: 'JetBrains Mono', monospace; +} + +a { + display: inline-flex; + padding: 0px; + justify-content: center; + align-items: center; + color: var(--apkt-text-secondary); +} + +a:active { + color: var(--apkt-text-primary); +} + +a:focus { + color: var(--apkt-text-accent-primary); +} + +a:hover { + text-decoration-line: underline; + text-decoration-style: solid; + text-decoration-skip-ink: none; + text-decoration-thickness: auto; + text-underline-offset: auto; +} + +a:disabled { + opacity: 0.3; +} + +.page-title { + color: var(--apkt-text-secondary); + text-align: center; +} + +.page-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 24px; + padding: 2rem 1rem; + max-width: 1200px; + width: 100%; + margin: 0 auto; +} + +.logo-container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 8px; +} + +.logo-container { + flex-direction: row; +} + +.appkit-buttons-container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: var(--apkt-spacing-2, 8px); + flex-wrap: wrap; + + width: 100%; + border: 1px solid var(--apkt-border-secondary); + border-radius: var(--apkt-border-sm); + padding: var(--apkt-spacing-2, 8px); + min-height: 200px; + + background-image: radial-gradient(var(--page-background-image-color) 1px, #ffffff00 1px); + background-size: 16px 16px; + background-position: -16px -8px; +} + +.action-button-list { + display: flex; + flex-direction: flex; + align-items: center; + justify-content: center; + gap: var(--apkt-spacing-2, 8px); + flex-wrap: wrap; +} + +.code-container-wrapper { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 16px; + max-width: 1200px; + width: 100%; + margin: 0 auto; +} + +.code-container { + border: 1px solid var(--apkt-border-secondary); + border-radius: var(--apkt-border-sm); + padding: var(--apkt-spacing-4, 8px); + margin: 0px; + width: 100%; +} + +.code-container-title { + font-size: 1.25rem; + font-weight: bold; + margin-bottom: 10px; + padding: 0.25rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid var(--apkt-border-secondary); + font-family: 'JetBrains Mono', monospace; +} + +.code-container-content { + font-size: 14px; + line-height: 1.5; + height: 250px; + overflow: auto; +} + +.footer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8px; + flex-wrap: wrap; +} + +.warning { + color: var(--apkt-text-secondary); + font-size: 12px; +} + +appkit-button.disconnected { + display: none; +} + +button:disabled { + opacity: 0.5; +} + +@media screen and (max-width: 768px) { + .logo-container { + flex-direction: column; + } + + .code-container-wrapper { + grid-template-columns: 1fr; + } +} diff --git a/examples/html-wagmi-wallet-button/src/main.js b/examples/html-wagmi-wallet-button/src/main.js new file mode 100644 index 0000000000..54e41b0084 --- /dev/null +++ b/examples/html-wagmi-wallet-button/src/main.js @@ -0,0 +1,115 @@ +import { createAppKit } from '@reown/appkit' +import { WagmiAdapter } from '@reown/appkit-adapter-wagmi' +import { createAppKitWalletButton } from '@reown/appkit-wallet-button' +import { mainnet, polygon } from '@reown/appkit/networks' + +// Get projectId +export const projectId = import.meta.env.VITE_PROJECT_ID || 'b56e18d47c72ab683b10814fe9495694' // this is a public projectId only to use on localhost + +const networks = [mainnet, polygon] +const walletButtons = ['google', 'metamask', 'walletConnect'] + +// Create adapter +const wagmiAdapter = new WagmiAdapter({ + networks, + projectId +}) + +// Instantiate AppKit +const modal = createAppKit({ + adapters: [wagmiAdapter], + networks, + projectId, + themeMode: 'light', + features: { + analytics: true + }, + metadata: { + name: 'AppKit HTML Wallet Button Example', + description: 'AppKit HTML Wallet Button Example', + url: 'https://reown.com/appkit', + icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4'] + } +}) + +// State objects +let themeState = { themeMode: 'light', themeVariables: {} } + +// Helper functions +function disableAllWalletButtons() { + walletButtons.forEach(wallet => { + const connectButton = document.getElementById(`connect-${wallet}`) + connectButton.setAttribute('disabled', 'true') + }) +} + +function enableAllWalletButtons() { + walletButtons.forEach(wallet => { + const connectButton = document.getElementById(`connect-${wallet}`) + connectButton.removeAttribute('disabled') + }) +} + +const updateTheme = mode => { + document.documentElement.setAttribute('data-theme', mode) + document.body.className = mode + + // Update logo based on theme + const reownLogo = document.getElementById('reown-logo') + if (reownLogo) { + reownLogo.src = mode === 'dark' ? '/reown-logo-white.png' : '/reown-logo.png' + } +} + +// Subscribe for account change event +modal.subscribeAccount(state => { + if (state.isConnected) { + const appKitButton = document.querySelector('appkit-button') + appKitButton.classList.remove('disconnected') + disableAllWalletButtons() + } else { + const appKitButton = document.querySelector('appkit-button') + appKitButton.classList.add('disconnected') + enableAllWalletButtons() + } +}) + +// Create AppKit Wallet Button +const appKitWalletButton = createAppKitWalletButton() + +if (!appKitWalletButton.isReady()) { + disableAllWalletButtons() +} + +// Subscribe to wallet button state changes +appKitWalletButton.subscribeIsReady(({ isReady }) => { + if (isReady) { + enableAllWalletButtons() + } +}) + +// Wallet Button event listeners +walletButtons.forEach(wallet => { + document.getElementById(`connect-${wallet}`)?.addEventListener('click', () => { + appKitWalletButton + .connect(wallet) + .then(data => { + console.log('connected', data) + }) + .catch(err => { + console.log('error connecting', err) + }) + }) +}) + +// Button event listeners +document.getElementById('toggle-theme')?.addEventListener('click', () => { + const newTheme = themeState.themeMode === 'dark' ? 'light' : 'dark' + modal.setThemeMode(newTheme) + themeState = { ...themeState, themeMode: newTheme } + updateTheme(newTheme) +}) + +document.getElementById('disconnect')?.addEventListener('click', () => { + modal.disconnect() +}) diff --git a/packages/wallet-button/exports/index.ts b/packages/wallet-button/exports/index.ts index 6c30eb0c6b..ce587a6a53 100644 --- a/packages/wallet-button/exports/index.ts +++ b/packages/wallet-button/exports/index.ts @@ -1,3 +1,18 @@ +import { AppKitWalletButton } from '../src/client.js' + +// -- Components ------------------------------------------------------------ export * from '../src/scaffold-ui/appkit-wallet-button/index.js' +// -- Types ------------------------------------------------------------ export type { Wallet } from '../src/utils/TypeUtil.js' + +// -- Utils & Other ----------------------------------------------------- +let walletButton: AppKitWalletButton | undefined = undefined + +export function createAppKitWalletButton() { + if (!walletButton) { + walletButton = new AppKitWalletButton() + } + + return walletButton +} diff --git a/packages/wallet-button/src/client.ts b/packages/wallet-button/src/client.ts new file mode 100644 index 0000000000..e112ce973e --- /dev/null +++ b/packages/wallet-button/src/client.ts @@ -0,0 +1,54 @@ +import { type Connector, ConnectorController } from '@reown/appkit-core' + +import { ApiController } from './controllers/ApiController.js' +import { WalletButtonController } from './controllers/WalletButtonController.js' +import { ConnectorUtil } from './utils/ConnectorUtil.js' +import { ConstantsUtil } from './utils/ConstantsUtil.js' +import type { SocialProvider, Wallet } from './utils/TypeUtil.js' +import { WalletUtil } from './utils/WalletUtil.js' + +export class AppKitWalletButton { + constructor() { + if (!this.isReady()) { + ApiController.fetchWalletButtons() + } + } + + public isReady() { + return WalletButtonController.state.ready + } + + public subscribeIsReady(callback: ({ isReady }: { isReady: boolean }) => void) { + ApiController.subscribeKey('walletButtons', val => { + if (val.length) { + callback({ isReady: true }) + } else { + callback({ isReady: false }) + } + }) + } + + async connect(wallet: Wallet) { + const connectors = ConnectorController.state.connectors + + if (ConstantsUtil.Socials.some(social => social === wallet)) { + return ConnectorUtil.connectSocial(wallet as SocialProvider) + } + + const walletButton = WalletUtil.getWalletButton(wallet) + + const connector = walletButton + ? ConnectorController.getConnector(walletButton.id, walletButton.rdns) + : undefined + + if (connector) { + return ConnectorUtil.connectExternal(connector) + } + + return ConnectorUtil.connectWalletConnect({ + walletConnect: wallet === 'walletConnect', + connector: connectors.find(c => c.id === 'walletConnect') as Connector | undefined, + wallet: walletButton + }) + } +} diff --git a/packages/wallet-button/src/tests/client.test.ts b/packages/wallet-button/src/tests/client.test.ts new file mode 100644 index 0000000000..8746aa358f --- /dev/null +++ b/packages/wallet-button/src/tests/client.test.ts @@ -0,0 +1,115 @@ +import { afterEach, beforeAll, describe, expect, test, vi } from 'vitest' + +import type { ParsedCaipAddress } from '@reown/appkit-common' +import { type Connector, ConnectorController, type WcWallet } from '@reown/appkit-core' + +import { AppKitWalletButton } from '../client' +import { ApiController } from '../controllers/ApiController' +import { WalletButtonController } from '../controllers/WalletButtonController' +import { ConnectorUtil } from '../utils/ConnectorUtil' +import { WalletUtil } from '../utils/WalletUtil' + +// -- Constants ------------------------------------------------------------ +const METAMASK_CONNECTOR = { + id: 'metamask', + name: 'MetaMask' +} as Connector + +const WC_CONNECTOR = { + id: 'walletConnect', + name: 'WalletConnect' +} as Connector + +const PARSED_CAIP_ADDRESS = { + address: '0x123', + chainId: 1, + chainNamespace: 'eip155' +} as ParsedCaipAddress + +describe('AppKitWalletButton', () => { + beforeAll(() => { + vi.spyOn(ConnectorUtil, 'connectSocial').mockImplementation(async () => PARSED_CAIP_ADDRESS) + vi.spyOn(ConnectorUtil, 'connectExternal').mockImplementation(async () => PARSED_CAIP_ADDRESS) + vi.spyOn(ConnectorUtil, 'connectWalletConnect').mockImplementation( + async () => PARSED_CAIP_ADDRESS + ) + }) + + afterEach(() => { + vi.clearAllMocks() + }) + + test('it should fetch wallet buttons if not ready', () => { + vi.spyOn(ApiController, 'fetchWalletButtons') + vi.spyOn(WalletButtonController, 'state', 'get').mockReturnValue({ + ...WalletButtonController.state, + ready: false + }) + + // Initialize wallet button + new AppKitWalletButton() + + expect(ApiController.fetchWalletButtons).toHaveBeenCalled() + }) + + test('it should subscribe to ready event', async () => { + const subscribeIsReady = vi.fn() + + // Initialize wallet button + const appKitWalletButton = new AppKitWalletButton() + + appKitWalletButton.subscribeIsReady(subscribeIsReady) + + ApiController.state.walletButtons = [{ id: 'metamask' } as WcWallet] + + // Wait for state to update + await new Promise(resolve => setTimeout(resolve, 100)) + + expect(subscribeIsReady).toHaveBeenCalled() + }) + + test('it should connect to google (social)', () => { + // Initialize wallet button + const appKitWalletButton = new AppKitWalletButton() + + appKitWalletButton.connect('google') + expect(ConnectorUtil.connectSocial).toHaveBeenCalledWith('google') + }) + + test('it should connect to metamask (external)', () => { + vi.spyOn(WalletUtil, 'getWalletButton').mockReturnValue({ + id: 'metamask', + rdns: 'metamask.io' + } as unknown as WcWallet) + vi.spyOn(ConnectorController, 'getConnector').mockReturnValue(METAMASK_CONNECTOR) + + // Initialize wallet button + const appKitWalletButton = new AppKitWalletButton() + + appKitWalletButton.connect('metamask') + expect(ConnectorUtil.connectExternal).toHaveBeenCalledWith(METAMASK_CONNECTOR) + }) + + test('it should connect to walletConnect (QR Code)', () => { + vi.spyOn(WalletUtil, 'getWalletButton').mockReturnValue({ + id: 'walletConnect' + } as unknown as WcWallet) + vi.spyOn(ConnectorController, 'getConnector').mockReturnValue(undefined) + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [WC_CONNECTOR] as Connector[] + }) + + // Initialize wallet button + const appKitWalletButton = new AppKitWalletButton() + + appKitWalletButton.connect('walletConnect') + expect(ConnectorUtil.connectWalletConnect).toHaveBeenCalledWith({ + walletConnect: true, + connector: WC_CONNECTOR, + wallet: { + id: 'walletConnect' + } + }) + }) +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 53456619f7..b2f9f6bfeb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -569,6 +569,25 @@ importers: specifier: 5.2.11 version: 5.2.11(@types/node@20.11.5)(lightningcss@1.28.2)(terser@5.37.0) + examples/html-wagmi-wallet-button: + dependencies: + '@reown/appkit': + specifier: workspace:* + version: link:../../packages/appkit + '@reown/appkit-adapter-wagmi': + specifier: workspace:* + version: link:../../packages/adapters/wagmi + '@reown/appkit-wallet-button': + specifier: workspace:* + version: link:../../packages/wallet-button + ethers: + specifier: 6.13.2 + version: 6.13.2(bufferutil@4.0.9)(utf-8-validate@5.0.10) + devDependencies: + vite: + specifier: 5.2.11 + version: 5.2.11(@types/node@20.11.5)(lightningcss@1.28.2)(terser@5.37.0) + examples/next-solana-app-router: dependencies: '@reown/appkit': @@ -39921,8 +39940,8 @@ snapshots: webauthn-p256@0.0.10: dependencies: - '@noble/curves': 1.6.0 - '@noble/hashes': 1.5.0 + '@noble/curves': 1.8.0 + '@noble/hashes': 1.7.0 webauthn-p256@0.0.2: dependencies: