chore(examples): update rainbowkit and dynamic examples

examples/dynamic/README.md

@@ -1,50 +1,33 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+# LI.FI Widget + Dynamic Example
+This project shows an example of how to use the LI.FI Widget with the Dynamic wallet
+
+## Requirements
+1. [An Environment ID]('https://app.dynamic.xyz/dashboard/developer')
+
+## Installation
+1. Clone this repo
+2. Install dependencies `pnpm install`
+
+## Configuration
+Update the `environment-id` prop on `<DynamicContextProvider />` with yours
+
+## Run
+Start the app by running `pnpm dev`
+
+## Using chains from LI.FI
+This example fetches a list of chains from LI.FI using the `useAvailableChains` hook, and they are passed to the Dynamic component.
+
+## Syncing connectors and adapters
+### EVM
+The widget uses the wagmi library to interact with wallets, Dynamic supports the wagmi connecter, and we keep both libraries in sync by calling the 
+`useSyncWagmiConfig` in the `WalletProvider`
+
+### Solana
+The widget uses the solana library to manage solana wallets. We use a hook from dynamic to watch for the active solana wallet, and connect or disconnect.
+
+### Embedded Solana Wallets
+The Dynamic embedded solana wallet is a wrapper around [TurnKey Solana Wallet](https://github.com/tkhq/sdk/tree/main/packages/solana), and both libraries doesn't have adapters that implement the [solana wallet standard](https://github.com/anza-xyz/wallet-adapter/blob/master/WALLET.md). 
+
+This example in `./src/adapters/dynamic` implements an Adapter based on the standard for the Dynamic Embedded solana (Turnkey) wallet.
+After the adapter in initialized, the Solana Provider automatically works with the embedded wallet. 
+

examples/dynamic/package.json

@@ -9,23 +9,31 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dynamic-labs/bitcoin": "^3.9.13",
-    "@dynamic-labs/ethereum": "^3.9.13",
-    "@dynamic-labs/sdk-react-core": "^3.9.13",
-    "@dynamic-labs/solana": "^3.9.13",
-    "@dynamic-labs/wagmi-connector": "^3.9.13",
+    "@dynamic-labs/bitcoin": "^4.9.2",
+    "@dynamic-labs/ethereum": "^4.9.2",
+    "@dynamic-labs/sdk-react-core": "^4.9.2",
+    "@dynamic-labs/solana": "^4.9.2",
+    "@dynamic-labs/solana-core": "^4.9.2",
+    "@dynamic-labs/wagmi-connector": "^4.9.2",
+    "@dynamic-labs/embedded-wallet-solana": "^4.9.2",
     "@lifi/wallet-management": "workspace:^",
     "@lifi/widget": "workspace:^",
     "@mui/material": "^6.4.8",
     "@solana/wallet-adapter-base": "^0.9.24",
     "@solana/wallet-adapter-react": "^0.15.36",
+    "@solana/wallet-adapter-wallets": "^0.19.32",
+    "@solana/wallet-standard-features": "^1.3.0",
+    "@wallet-standard/base": "^1.1.0",
+    "@wallet-standard/features": "^1.1.0",
     "@solana/web3.js": "^1.98.0",
     "@tanstack/react-query": "^5.68.0",
     "mitt": "^3.0.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "viem": "^2.23.12",
-    "wagmi": "^2.14.15"
+    "vite-plugin-env-compatible": "^2.0.1",
+    "wagmi": "^2.14.15",
+    "bs58": "^6.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.11",

examples/dynamic/src/App.tsx

@@ -1,3 +1,8 @@
+import {
+  useDynamicContext,
+  useIsLoggedIn,
+  useReinitialize,
+} from '@dynamic-labs/sdk-react-core'
 import { ChainId, LiFiWidget } from '@lifi/widget'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { WalletHeader } from './components/WalletHeader'
@@ -9,28 +14,46 @@ export function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <WalletProvider>
-        <WalletHeader />
-        <LiFiWidget
-          integrator="vite-example"
-          config={{
-            theme: {
-              container: {
-                border: '1px solid rgb(234, 234, 234)',
-                borderRadius: '16px',
-              },
-            },
-            sdkConfig: {
-              rpcUrls: {
-                [ChainId.SOL]: [
-                  // Replace with your private Solana RPC
-                  'https://chaotic-restless-putty.solana-mainnet.quiknode.pro/',
-                  'https://dacey-pp61jd-fast-mainnet.helius-rpc.com/',
-                ],
-              },
-            },
-          }}
-        />
+        <Main />
       </WalletProvider>
     </QueryClientProvider>
   )
 }
+
+export function Main() {
+  const { setShowAuthFlow } = useDynamicContext()
+  const isLoggedIn = useIsLoggedIn()
+  const reInitialize = useReinitialize()
+
+  const handleOnConnect = async () =>
+    isLoggedIn ? reInitialize() : setShowAuthFlow(true)
+
+  return (
+    <>
+      <WalletHeader />
+      <LiFiWidget
+        integrator="vite-example"
+        config={{
+          walletConfig: {
+            onConnect: handleOnConnect,
+          },
+          theme: {
+            container: {
+              border: '1px solid rgb(234, 234, 234)',
+              borderRadius: '16px',
+            },
+          },
+          sdkConfig: {
+            rpcUrls: {
+              [ChainId.SOL]: [
+                // Replace with your private Solana RPC
+                'https://chaotic-restless-putty.solana-mainnet.quiknode.pro/',
+                'https://dacey-pp61jd-fast-mainnet.helius-rpc.com/',
+              ],
+            },
+          },
+        }}
+      />
+    </>
+  )
+}

examples/dynamic/src/adapters/dynamic/account.ts

@@ -0,0 +1,67 @@
+// This is copied with modification from @wallet-standard/wallet
+
+import {
+  SolanaSignAndSendTransaction,
+  SolanaSignMessage,
+  SolanaSignTransaction,
+} from '@solana/wallet-standard-features'
+import type { WalletAccount } from '@wallet-standard/base'
+import { SOLANA_CHAINS } from './solana.js'
+
+const chains = SOLANA_CHAINS
+const features = [
+  SolanaSignAndSendTransaction,
+  SolanaSignTransaction,
+  SolanaSignMessage,
+] as const
+
+export class TurnkeyHDWalletAccount implements WalletAccount {
+  readonly #address: WalletAccount['address']
+  readonly #publicKey: WalletAccount['publicKey']
+  readonly #chains: WalletAccount['chains']
+  readonly #features: WalletAccount['features']
+  readonly #label: WalletAccount['label']
+  readonly #icon: WalletAccount['icon']
+
+  get address() {
+    return this.#address
+  }
+
+  get publicKey() {
+    return this.#publicKey.slice()
+  }
+
+  get chains() {
+    return this.#chains.slice()
+  }
+
+  get features() {
+    return this.#features.slice()
+  }
+
+  get label() {
+    return this.#label
+  }
+
+  get icon() {
+    return this.#icon
+  }
+
+  constructor({
+    address,
+    publicKey,
+    label,
+    icon,
+  }: Omit<WalletAccount, 'chains' | 'features'>) {
+    if (new.target === TurnkeyHDWalletAccount) {
+      Object.freeze(this)
+    }
+
+    this.#address = address
+    this.#publicKey = publicKey
+    this.#chains = chains
+    this.#features = features
+    this.#label = label
+    this.#icon = icon
+  }
+}

examples/dynamic/src/adapters/dynamic/icon.ts

@@ -0,0 +1,4 @@
+import type { WalletIcon } from '@wallet-standard/base'
+
+export const icon: WalletIcon =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgwIiBoZWlnaHQ9IjI4MCIgdmlld0JveD0iMCAwIDI4MCAyODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8xNTY5OF8zMjA5KSI+CjxtYXNrIGlkPSJtYXNrMF8xNTY5OF8zMjA5IiBzdHlsZT0ibWFzay10eXBlOmx1bWluYW5jZSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIyODAiPgo8cGF0aCBkPSJNMjgwIDBIMFYyODBIMjgwVjBaIiBmaWxsPSJ3aGl0ZSIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfMTU2OThfMzIwOSkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEyMy41MjEgMzkuODA4NUMxMTMuMTc1IDI5LjEzNzkgMTA1LjY5OSAyMy40OTQ2IDk2LjgzNTMgMjIuMzA5NkM5NC45NjU3IDIyLjA1OTYgOTMuMDc5IDIxLjk2MDggOTEuMTkzNSAyMi4wMTRDNzguMjk0NiAyMi4zNzgxIDY3LjI5NzkgMzIuMjc2NSA0NS4zMDQ2IDUyLjA3MzNDMTYuODQ0NCA3Ny42OTEzIDIuNjE0MjMgOTAuNTAwMiAwLjQwMDcwOCAxMDcuMDQ2QzAuMDc3MTQ3MSAxMDkuNDY1IC0wLjA1MDgwNzEgMTExLjkwNiAwLjAxODA5MzUgMTE0LjM0NUMwLjE0MzUzMiAxMTguNzg2IDEuMTQzMDkgMTIzLjA1MiAzLjAyNTYzIDEyNy40NTlDNC40MDE5MSAxMjkuOTEgNS44ODM2OCAxMzEuNDY1IDcuMzYwMDYgMTMyLjI2N0M5LjQ4Mjg4IDEzMy40MiAxNy4wODcxIDEzNS41MjcgMzUuNjc1IDExOC43NjdDNDUuNDExNSAxMDkuOTg4IDY4LjQ1NjUgODkuMjgyOSA5My40MjY1IDY2Ljg0ODZMOTMuNDM2NiA2Ni44Mzk1QzEwMy4zOTkgNTcuODg4NCAxMTMuNjY4IDQ4LjY2MjIgMTIzLjUyMSAzOS44MDg1Wk0xNy41MzY1IDE0OS45NDlDMTkuMzc2NiAxNTIuMzMxIDIwLjg5OTMgMTU0LjIwNyAyMS41MTA0IDE1NC44TDIxLjczMjEgMTU0LjYwNkwyMS41MDc2IDE1NC44MDhMNjkuMTIzNCAyMDguMTA0Qzk4LjQzOTEgMjQwLjkxOCAxMTMuMDk3IDI1Ny4zMjQgMTMyLjQxMiAyNTguNDQxQzE1MS43MjYgMjU5LjU1NyAxNjguMTc3IDI0NC45NDggMjAxLjA4IDIxNS43M0wyNDEuNzI3IDE3OS42MzRDMjY2LjY5MSAxNTcuNDY2IDI3OS4xNzIgMTQ2LjM4MiAyNzkuOTYxIDEzMS43NzFDMjgwLjc1IDExNy4xNiAyNjkuNTM0IDEwNC43OTcgMjQ3LjEwMyA4MC4wNzIxTDI0Ny4xMDIgODAuMDcxOUwyMzAuMTQ3IDYxLjM4MzFDMjA4LjAyMSAzNi45OTUzIDE5Ni45NTkgMjQuODAxNSAxODIuNDkyIDI0LjA1ODlDMTcxLjg4NyAyMy41MTQ2IDE2Mi40NzEgMjkuMjc5NSAxNDguNTQ0IDQxLjA2MUMxMzQuOTIxIDUzLjMwNjggMTE5LjcgNjYuOTgyIDEwNS4xNDIgODAuMDYyTDEwNS4xMzUgODAuMDY4MkM4MC4xODE4IDEwMi40ODggNTcuMTc1OSAxMjMuMTU3IDQ3LjUwMDMgMTMxLjg4MkMzNi40ODQ2IDE0MS44MTQgMjYuNDkwMyAxNDcuODY1IDE3LjUzNjUgMTQ5Ljk0OVoiIGZpbGw9IiM0Nzc5RkYiLz4KPC9nPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzE1Njk4XzMyMDkiPgo8cmVjdCB3aWR0aD0iMjgwIiBoZWlnaHQ9IjI4MCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K' as const

examples/dynamic/src/adapters/dynamic/index.ts

@@ -0,0 +1 @@
+export * from './initialize.js'

examples/dynamic/src/adapters/dynamic/initialize.ts

@@ -0,0 +1,32 @@
+import type { ISolana } from '@dynamic-labs/solana-core'
+import { PublicKey } from '@solana/web3.js'
+import { registerWallet } from './register.js'
+import { TurnkeyHDWallet } from './wallet.js'
+import type { TurnkeyHD } from './window.js'
+
+function adaptToTurnkeyHD(wallet: ISolana): TurnkeyHD {
+  return {
+    publicKey: wallet.publicKey
+      ? new PublicKey(wallet.publicKey.toBytes())
+      : null,
+    async connect() {
+      const result = await wallet.connect()
+      if (!result?.publicKey) {
+        throw new Error('Failed to connect')
+      }
+      return { publicKey: new PublicKey(result.publicKey) }
+    },
+    on: (event, listener) => wallet?.on?.(event, listener),
+    off: (event, listener) => wallet?.off?.(event, listener),
+    signTransaction: (txn) => wallet.signTransaction(txn),
+    signMessage: (message) => wallet.signMessage(message),
+    disconnect: () => wallet.disconnect(),
+    signAllTransactions: (txns) => wallet.signAllTransactions(txns),
+    signAndSendTransaction: (txn, options) =>
+      wallet.signAndSendTransaction(txn, options),
+  }
+}
+
+export function initialize(turnkeyHD: ISolana): void {
+  registerWallet(new TurnkeyHDWallet(adaptToTurnkeyHD(turnkeyHD)))
+}

examples/dynamic/src/adapters/dynamic/register.ts

@@ -0,0 +1,84 @@
+// This is copied from @wallet-standard/wallet
+
+import type {
+  DEPRECATED_WalletsWindow,
+  Wallet,
+  WalletEventsWindow,
+  WindowRegisterWalletEvent,
+  WindowRegisterWalletEventCallback,
+} from '@wallet-standard/base'
+
+export function registerWallet(wallet: Wallet): void {
+  const callback: WindowRegisterWalletEventCallback = ({ register }) =>
+    register(wallet)
+  try {
+    ;(window as WalletEventsWindow).dispatchEvent(
+      new RegisterWalletEvent(callback)
+    )
+  } catch (error) {
+    console.error(
+      'wallet-standard:register-wallet event could not be dispatched\n',
+      error
+    )
+  }
+  try {
+    ;(window as WalletEventsWindow).addEventListener(
+      'wallet-standard:app-ready',
+      ({ detail: api }) => callback(api)
+    )
+  } catch (error) {
+    console.error(
+      'wallet-standard:app-ready event listener could not be added\n',
+      error
+    )
+  }
+}
+
+class RegisterWalletEvent extends Event implements WindowRegisterWalletEvent {
+  readonly #detail: WindowRegisterWalletEventCallback
+
+  get detail() {
+    return this.#detail
+  }
+
+  get type() {
+    return 'wallet-standard:register-wallet' as const
+  }
+
+  constructor(callback: WindowRegisterWalletEventCallback) {
+    super('wallet-standard:register-wallet', {
+      bubbles: false,
+      cancelable: false,
+      composed: false,
+    })
+    this.#detail = callback
+  }
+
+  /** @deprecated */
+  preventDefault(): never {
+    throw new Error('preventDefault cannot be called')
+  }
+
+  /** @deprecated */
+  stopImmediatePropagation(): never {
+    throw new Error('stopImmediatePropagation cannot be called')
+  }
+
+  /** @deprecated */
+  stopPropagation(): never {
+    throw new Error('stopPropagation cannot be called')
+  }
+}
+
+/** @deprecated */
+export function DEPRECATED_registerWallet(wallet: Wallet): void {
+  registerWallet(wallet)
+  try {
+    // biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
+    ;((window as DEPRECATED_WalletsWindow).navigator.wallets ||= []).push(
+      ({ register }) => register(wallet)
+    )
+  } catch (error) {
+    console.error('window.navigator.wallets could not be pushed\n', error)
+  }
+}