Para

npm install @getpara/react-sdk @tanstack/react-query @rhinestone/sdk@3.0.0 viem

'use client'

import { Environment, ParaProvider } from '@getpara/react-sdk'
import '@getpara/react-sdk/styles.css'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient()

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={{
          apiKey: process.env.NEXT_PUBLIC_PARA_API_KEY!,
          env: Environment.BETA,
        }}
      >
        {children}
      </ParaProvider>
    </QueryClientProvider>
  )
}

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 { useWallet } from '@getpara/react-sdk'
import { useViemAccount } from '@getpara/react-sdk/evm/hooks'
import { wrapParaAccount } from '@rhinestone/sdk/evm'
import { rhinestone } from './rhinestone'

export function ConnectRhinestoneButton() {
  const { data: wallet } = useWallet()
  const { viemAccount } = useViemAccount()

  async function connect() {
    if (!viemAccount || !wallet?.id) return

    const owner = wrapParaAccount(viemAccount, wallet.id)
    const account = await rhinestone.createAccount({
      evm: { owners: { type: 'ecdsa', accounts: [owner] } },
    })

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

  return <button onClick={connect}>Create account</button>
}