Dynamic

npm install @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector @tanstack/react-query @rhinestone/sdk@3.0.0 viem wagmi@2

'use client'

import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core'
import { EthereumWalletConnectors } from '@dynamic-labs/ethereum'
import { DynamicWagmiConnector } from '@dynamic-labs/wagmi-connector'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { createConfig, WagmiProvider } from 'wagmi'
import { http } from 'viem'
import { arbitrum, base } from 'viem/chains'

const queryClient = new QueryClient()
const wagmiConfig = createConfig({
  chains: [arbitrum, base],
  multiInjectedProviderDiscovery: false,
  transports: {
    [arbitrum.id]: http(),
    [base.id]: http(),
  },
})

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <DynamicContextProvider
      settings={{
        environmentId: process.env.NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID!,
        walletConnectors: [EthereumWalletConnectors],
      }}
    >
      <WagmiProvider config={wagmiConfig}>
        <QueryClientProvider client={queryClient}>
          <DynamicWagmiConnector>{children}</DynamicWagmiConnector>
        </QueryClientProvider>
      </WagmiProvider>
    </DynamicContextProvider>
  )
}

import { RhinestoneSDK } from '@rhinestone/sdk'

export const rhinestone = new RhinestoneSDK({
  auth: {
    mode: 'experimental_jwt',
    accessToken: async () => {
      const response = await fetch('/api/auth/access-token', {
        credentials: 'include',
      })
      if (!response.ok) throw new Error('Unable to authenticate with Rhinestone')
      return ((await response.json()) as { token: string }).token
    },
  },
})

import { useDynamicContext } from '@dynamic-labs/sdk-react-core'
import { useWalletClient } from 'wagmi'
import { walletClientToAccount } from '@rhinestone/sdk/evm'
import { rhinestone } from './rhinestone'

export function ConnectRhinestoneButton() {
  const { setShowAuthFlow } = useDynamicContext()
  const { data: walletClient } = useWalletClient()

  async function connect() {
    if (!walletClient) {
      setShowAuthFlow(true)
      return
    }

    const owner = walletClientToAccount(walletClient)
    const account = await rhinestone.createAccount({
      evm: { owners: { type: 'ecdsa', accounts: [owner] } },
    })

    console.log(account.getAddress('evm'))
  }

  return <button onClick={connect}>Connect with Dynamic</button>
}