Passage by CoinList Integration

'use client'

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ParaProvider } from '@getpara/react-sdk'
import { ClientId, CoinListProvider, RedirectUri } from '@coinlist-co/react'
import type { ClientConfig } from '@coinlist-co/react'
import '@getpara/react-sdk/styles.css'

const queryClient = new QueryClient()

const coinlistConfig: ClientConfig = {
  clientId: ClientId(process.env.NEXT_PUBLIC_COINLIST_CLIENT_ID!),
  redirectUri: RedirectUri(process.env.NEXT_PUBLIC_COINLIST_REDIRECT_URI!),
  // The browser never sees a refresh token or the client secret. It asks your
  // backend for a short-lived access token, and the backend refreshes it.
  getAccessToken: async () => {
    const res = await fetch('/api/coinlist/oauth/access-token', {
      credentials: 'include',
    })
    if (res.status === 204) return null
    if (!res.ok) throw new Error('GET /api/coinlist/oauth/access-token failed')
    const data = (await res.json()) as { value: string; expiresAt: string }
    return { value: data.value, expiresAt: new Date(data.expiresAt) }
  },
}

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={{ apiKey: process.env.NEXT_PUBLIC_PARA_API_KEY! }}
        config={{ appName: 'Your App' }}
        fallback={<Loading />}
      >
        <CoinListProvider config={coinlistConfig}>{children}</CoinListProvider>
      </ParaProvider>
    </QueryClientProvider>
  )
}

import type { NextResponse } from 'next/server'
import type { CoinListServer } from '@coinlist-co/react/server'
import { createCoinListServer } from '@coinlist-co/react/server'
import { ClientId, ClientSecret, RedirectUri } from '@coinlist-co/react/universal'
import { createSessionCookiesStore } from './session-store'

export function coinListServer(outgoingResponse: NextResponse): CoinListServer {
  return createCoinListServer({
    clientId: ClientId(process.env.NEXT_PUBLIC_COINLIST_CLIENT_ID!),
    clientSecret: ClientSecret(process.env.COINLIST_CLIENT_SECRET!),
    redirectUri: RedirectUri(process.env.NEXT_PUBLIC_COINLIST_REDIRECT_URI!),
    sessionStore: createSessionCookiesStore(outgoingResponse),
  })
}

import { NextResponse } from 'next/server'
import { AuthorizationCode, CodeVerifier } from '@coinlist-co/react/universal'
import { coinListServer } from '@/lib/coinlist-server'

export async function POST(req: Request) {
  const { code, codeVerifier } = await req.json()
  if (typeof code !== 'string' || typeof codeVerifier !== 'string') {
    return NextResponse.json({ error: 'missing_fields' }, { status: 400 })
  }

  const response = NextResponse.json({ ok: true })
  await coinListServer(response).auth.completeOAuth({
    code: AuthorizationCode(code),
    codeVerifier: CodeVerifier(codeVerifier),
  })
  return response
}

import { NextResponse } from 'next/server'
import { coinListServer } from '@/lib/coinlist-server'
import { copyCookiesFromTo } from '@/lib/session-store'

export async function GET() {
  // A scratch response for the SDK to write a refreshed session cookie onto.
  const cookieSink = new NextResponse(null, { status: 204 })
  const token = await coinListServer(cookieSink).auth.getAccessToken()
  if (token == null) {
    return cookieSink
  }

  const response = NextResponse.json({
    value: token.value,
    expiresAt: token.expiresAt.toISOString(),
  })
  // Carry any refreshed cookie over to the response the browser receives.
  copyCookiesFromTo(cookieSink, response)
  return response
}

import { NextResponse } from 'next/server'
import { coinListServer } from '@/lib/coinlist-server'

export async function POST() {
  const response = NextResponse.json({ ok: true })
  await coinListServer(response).auth.logout()
  return response
}

'use client'

import { useCompleteOAuth } from '@coinlist-co/react'
import { useRouter } from 'next/navigation'

export default function CoinListCallbackPage() {
  const router = useRouter()

  useCompleteOAuth({
    async postOAuthComplete({ code, codeVerifier }) {
      const res = await fetch('/api/coinlist/oauth/complete', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ code, codeVerifier }),
      })
      return res.ok
    },
    onFailure: (reason) => router.replace(`/?error=${encodeURIComponent(reason)}`),
    onSuccess: () => router.replace('/'),
  })

  return <p>Completing sign-in…</p>
}

import { useMemo } from 'react'
import { useParaViemAccount } from '@getpara/react-sdk'
import type { EvmWallet } from '@coinlist-co/react'
import {
  EvmWalletAddress,
  type EthereumChain,
} from '@coinlist-co/react/universal'
import {
  type Chain,
  createPublicClient,
  createWalletClient,
  encodeFunctionData,
  http,
} from 'viem'
import { base, baseSepolia, mainnet, sepolia } from 'viem/chains'

// `Record<EthereumChain, Chain>` is total on purpose. The day the SDK models a
// new chain, this table fails to compile until you decide what it maps to.
const CHAINS: Record<EthereumChain, Chain> = {
  ethereum_mainnet: mainnet,
  ethereum_sepolia: sepolia,
  base_mainnet: base,
  base_sepolia: baseSepolia,
}

// Your own RPC endpoints, per chain. An undefined entry falls back to the
// chain's public RPC.
const RPC_URLS: Partial<Record<EthereumChain, string>> = {
  ethereum_sepolia: process.env.NEXT_PUBLIC_SEPOLIA_RPC_URL,
}

const rpcUrlFor = (chain: EthereumChain): string | undefined => RPC_URLS[chain]

/**
 * Adapts the Para embedded wallet to Passage's `EvmWallet` seam.
 *
 * Para exposes the embedded wallet as a viem `LocalAccount`, so there is no
 * chain to "switch" the way an injected wallet would need. The adapter just
 * builds a client pointed at whichever chain the SDK asks for on each call.
 *
 * Errors are deliberately NOT caught. The Passage SDK classifies whatever the
 * wallet throws into a typed WalletError (user_rejected, insufficient_funds,
 * contract_reverted, timeout), and translating them here would lose that.
 */
export function useParaEvmWallet(): {
  wallet: EvmWallet | null
  isLoading: boolean
} {
  const { viemAccount, isLoading } = useParaViemAccount()

  const wallet = useMemo(() => {
    if (!viemAccount) return null

    const clientsFor = (chain: EthereumChain) => {
      const viemChain = CHAINS[chain]
      if (!viemChain) throw new Error(`Unsupported chain: ${chain}`)
      const transport = http(rpcUrlFor(chain))
      return {
        wallet: createWalletClient({
          account: viemAccount,
          chain: viemChain,
          transport,
        }),
        public: createPublicClient({ chain: viemChain, transport }),
      }
    }

    return {
      address: EvmWalletAddress(viemAccount.address),

      signMessage: (message) => viemAccount.signMessage({ message }),

      async writeContract({ abi, address, functionName, args, value, chain }) {
        const { wallet } = clientsFor(chain)
        return wallet.sendTransaction({
          to: address,
          data: encodeFunctionData({ abi, functionName, args }),
          ...(value !== undefined ? { value } : {}),
        })
      },

      // Backend-encoded calldata goes out verbatim. Re-encoding would break
      // the signature the contract verifies over the exact arguments inside.
      async broadcastRawTx({ to, data, chain }) {
        const { wallet } = clientsFor(chain)
        return wallet.sendTransaction({ to, data })
      },

      awaitTx: (hash, chain) =>
        clientsFor(chain).public.waitForTransactionReceipt({ hash }),
    } satisfies EvmWallet
  }, [viemAccount])

  return { wallet, isLoading }
}

import {
  type EthereumChain,
  EvmContractAddress,
  TOKEN_REGISTRY,
  USDC_SYMBOL,
} from '@coinlist-co/react/universal'

// Where orders execute. It has to be a chain the offer settles on, which
// `offer.swapContracts` lists. Switch to 'ethereum_mainnet' when you go live.
export const CHAIN: EthereumChain = 'ethereum_sepolia'

// The stablecoin users pay with. TOKEN_REGISTRY knows the ERC-20 metadata
// and the per-chain address for USDC and USDT, so no address is hardcoded.
export const USDC = TOKEN_REGISTRY.erc20(USDC_SYMBOL)
export const USDC_ADDRESS = TOKEN_REGISTRY.contractAddress(USDC_SYMBOL, CHAIN)

// Token sales only: the contract that pulls the payment, meaning the
// `approve()` spender. This is the one address not carried on the offer, and
// Passage provides it during onboarding.
export const FUNDING_CONTRACT_ADDRESS = EvmContractAddress(
  'YOUR_FUNDING_CONTRACT_ADDRESS',
)