Use Domino with Reown AppKit

Let members sign in to Domino with the wallet they connect through Reown AppKit, WalletConnect included, and link more wallets the same way.

If your app connects wallets with Reown AppKit, members can sign in to Domino with the wallet AppKit connected, including mobile wallets over WalletConnect. AppKit gives your server no token to check, so members sign Domino's own message instead: the signature signs them in and proves the wallet.

This is wallet sign-in, which Domino offers with its own member sign-in in a Domino-hosted app. An app with its own login uses app login instead, and members link their AppKit wallets as in step 3.

Before you start

Wallet sign-in on. In Console, open Settings → Sign-in and check EVM under Wallet sign-in, plus Solana if AppKit connects Solana wallets. Each environment has its own setting.
AppKit set up. Your app creates AppKit with its Reown project ID and the EVM or Solana adapter, as Reown's documentation shows.

Connect AppKit

Wrap the connected wallet in a signer

AppKit's useAppKitProvider returns the connected wallet's provider. An EVM provider is an EIP-1193 provider, so pass it to evmSigner. A Solana provider fits solanaSigner with a small wrapper:

import {
  evmSigner,
  solanaSigner,
  type Eip1193Provider,
} from "@domino-sdk/relay/browser"

// From @reown/appkit/react: useAppKitProvider("eip155").walletProvider.
declare const evmProvider: Eip1193Provider

// From useAppKitProvider("solana").walletProvider.
declare const solanaProvider: {
  publicKey?: { toBase58(): string }
  signMessage(message: Uint8Array): Promise<Uint8Array>
}

export const evm = evmSigner(evmProvider, { name: "WalletConnect" })

export const solana = solanaSigner({
  connect: async () => ({ publicKey: solanaProvider.publicKey }),
  publicKey: solanaProvider.publicKey,
  signMessage: (message) => solanaProvider.signMessage(message),
})

AppKit opens its own modal to connect; call open() from useAppKit() first if useAppKitAccount().isConnected is false.

Pass the signer to useSignIn().withWallet. The member's wallet shows Domino's message for your app's domain, which states that it authorizes no transaction or transfer.

import { useSignIn } from "@domino-sdk/relay/react"
import type { WalletSigner } from "@domino-sdk/relay"

export function SignInWithAppKit({ signer }: { signer: WalletSigner }) {
  const signIn = useSignIn()

  return (
    <>
      <button disabled={signIn.isPending} onClick={() => void signIn.withWallet(signer)}>
        Sign in with your wallet
      </button>
      {signIn.error && <p role="alert">{signIn.error.message}</p>}
    </>
  )
}

A new address creates a new member, and the same wallet signs them in again later. RelayProvider signs the member out when the EVM wallet switches to another account or disconnects, as wallet sign-in describes.

Link more wallets

A signed-in member links another wallet the same way, with useWallets().link(signer). A wallet linked by signature is proved, so it appears in a leaderboard's payout list, and the wallet a member signed in with is in it too.

import { useWallets } from "@domino-sdk/relay/react"
import type { WalletSigner } from "@domino-sdk/relay"

export function LinkWithAppKit({ signer }: { signer: WalletSigner }) {
  const { link, isPending, actionError } = useWallets()

  return (
    <>
      <button disabled={isPending} onClick={() => link(signer)}>
        Link this wallet
      </button>
      {actionError && <p role="alert">{actionError.message}</p>}
    </>
  )
}

A member can link 5 wallets per chain family, besides the ones they sign in with. Smart-contract wallets, such as Base Account (formerly Coinbase Smart Wallet), sign in and link this way too: Domino checks their signature on the chain the wallet is on.

Check it

Connect a wallet with AppKit, sign in, and check that the app shows the member's Domino quests.
Connect a phone wallet over WalletConnect and sign in with it.
In Console, open the member's page and check that Wallets lists the wallet.

Where next

Wallets

wallet quests, limits and what operators see.

Host your app

Domino-hosted apps and their member sign-in.