Docs
  • What We Do
  • Supported Countries, Payment Methods, and Cryptocurrencies
  • Getting Started
  • Integration Guides
    • API
      • Required Headers
      • Create a User
      • Assign a Deposit Address
      • KYC
      • Link and Verify a Bank Account
        • Re-link Bank Account
        • Update Bank Account
        • Delete Bank Account
      • Transaction Limits
      • Buy Crypto (ACH)
      • Transaction Monitoring
      • Transaction History
    • React Native
      • Installation
      • Session Token and Wallet Signing
      • Preset Order Details
      • Example
      • Reference
      • Release History
      • User experience
        • Sign up
        • Sign in
        • Buy crypto
        • Settings & activity
    • React JS (Beta)
      • Installation
      • Session Token and Wallet Signing
      • Preset Orders
      • Callbacks
      • Theming
      • Example
      • Reference
      • Release History
  • API Reference
    • Endpoints
      • Auth
        • Crypto Wallet
        • Email OTP
        • SMS OTP
      • Activity
      • Bank
      • Client
      • Config
      • Crypto
      • Users
      • Wallets
      • Webhook Registrations
    • Custom Headers
    • Error Codes
    • Types Glossary
    • Postman
    • Open API Specification
    • Webhooks
  • Design Reference
    • UI/UX Starter kit
    • UI Requirements
  • Guides
    • Sandbox Testing
    • User Authentication
    • Link a new Signing Wallet to an Existing User
    • Plaid Bank Linking
      • Plaid OAuth Support
    • Client Dashboard (Alpha)
  • User Support Reference
    • User Account Flags
      • KYC Review
      • Transaction Processing
      • NSFs and Returned Payments
      • Fraud
    • Transactional Emails
Powered by GitBook
On this page

Was this helpful?

  1. Integration Guides
  2. React JS (Beta)

Example

PreviousThemingNextReference

Last updated 1 year ago

Was this helpful?

Below is a full example which uses for the wallet connection and for the wallet signing. However you can use which ever wallet connection library you would like.

import React, {useCallback, useEffect, useState} from 'react';
import './App.css';
import {RatioButton, RatioPresetOrder} from "@ratio.me/ratiokit-react";
import '@rainbow-me/rainbowkit/styles.css';
import {ConnectButton} from '@rainbow-me/rainbowkit';
import {useAccount, useNetwork, useSignMessage} from 'wagmi';


export const clientId = "YOUR-CLIENT-ID";
export const clientSecret = "YOUR_CLIENT_SECRET";

function App() {
    const {address, isConnected} = useAccount()
    const {chain} = useNetwork()
    const {signMessageAsync} = useSignMessage()

    const fetchSessionToken = useCallback(async (): Promise<string | null> => {
        try {
            const requestHeaders: HeadersInit = new Headers();
            requestHeaders.set('Content-Type', 'application/json');
            requestHeaders.set('your-client-id',    clientId || '');
            requestHeaders.set('your-client-secret', clientSecret || '');
            let sessionTokenResponse = await fetch(
                'https://api.yourdomain.com/ratio/client/sessions',
                {
                    method: 'POST',
                    headers: requestHeaders,
                    body: JSON.stringify({
                        signingAddress: address,
                        depositAddress: address,
                        signingNetwork: chain?.name.toUpperCase(),
                    }),
                }
            );

            let data = await sessionTokenResponse.json();
            return data.id;
        } catch (e) {
            console.error(e);
        }
        return null;
    },[address, isConnected, chain])

    return (
      <div>
          {isConnected ? (
              <RatioButton 
                  text={'Buy with Ratio'}
                  fetchSessionToken={async () => {
                       if(isConnected){
                           return await fetchSessionToken()
                       }
                       return null
                  }}
                  signingCallback={async (challenge:string) => {
                       return await signMessageAsync({
                           message: challenge,
                       })
                   }}
                  presetOrder={{
                    fiatAmount: fiatAmount,
                    cryptoCurrency: selectedCurrency,
                 } as RatioPresetOrder}
              />): null }
              <ConnectButton/>
      </div>
  );
}

export default App;
RainbowKit
Wagmi