External wallet signers

npm install @reown/appkit @reown/appkit-adapter-wagmi @tanstack/react-query @rhinestone/sdk viem wagmi@2

'use client'

import { createAppKit } from '@reown/appkit/react'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { arbitrum, base, mainnet } from '@reown/appkit/networks'

const projectId = process.env.NEXT_PUBLIC_REOWN_PROJECT_ID!

export const wagmiAdapter = new WagmiAdapter({
  networks: [mainnet, arbitrum, base],
  projectId,
})

createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, arbitrum, base],
  projectId,
  metadata: {
    name: 'Your app',
    description: 'Your app description',
    url: 'https://app.example.com',
    icons: ['https://app.example.com/icon.png'],
  },
})

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 { useWalletClient } from 'wagmi'
import { walletClientToAccount } from '@rhinestone/sdk/utils'
import { rhinestone } from './rhinestone'

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

  async function connect() {
    if (!walletClient) return

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

    console.log(account.getAddress())
  }

  return (
    <>
      <w3m-button />
      <button disabled={!walletClient} onClick={connect}>
        Create account
      </button>
    </>
  )
}