Example
Below is a full example which uses RainbowKit for the wallet connection and Wagmi 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;
Last modified 2mo ago