Example Code
Overview
This example demonstrates how to implement hybrid flow into a browser dapps developed with TypeScript or JavaScript. For a insight into the flow, see the diagram.
Initialization
import { HeadlessClient } from '@sky-mavis/waypoint/headless';
export const headlessClient = HeadlessClient.create({
chainId: 2021
});
User delegation authorization
This is the step 1.2 in the flow. The user must authorize the dapp to interact with their keyless wallet.
import { delegationAuthorize } from '@sky-mavis/waypoint';
export const handleDelegationAuthorize = async () => {
return delegationAuthorize({
scopes: ['openid', 'wallet', 'email', 'profile'],
mode: 'popup',
clientId: '9b577a44-ce2f-44b2-a59d-dfcadfd1a93b'
});
};
Live Editor
function Authorize() { const [connectedAddress, setConnectedAddress] = useState(null); const handleAuthorizeWithRonin = async () => { const result = await handleDelegationAuthorize(); if (result) { setConnectedAddress(result.address); // Save the waypoint token to client storage window.sessionStorage.setItem('WAYPOINT:TOKEN', result.token); window.localStorage.setItem('WAYPOINT:CLIENTSHARD', result.clientShard); // Connect to user's keyless wallet await headlessClient.connect({ waypointToken: result.token, clientShard: result.clientShard }); console.log('Waypoint token:', result.token); console.log('Client shard:', result.clientShard); } }; if (!connectedAddress) return ( <Button label='Delegation Authorize with Ronin Waypoint' onClick={handleAuthorizeWithRonin} /> ); return ( <LayoutBox> <span> You have authorized with Ronin Waypoint with address: {connectedAddress} </span> <b>See your waypoint token and client shard in the browser console</b> </LayoutBox> ); }
Result
Loading...
Interact with the user's keyless wallet
Sign a message
Signs plain text messages with the user's wallet.
Live Editor
function PersonalSign() { const [message, setMessage] = useState(null); const [result, setResult] = useState(null); const handleSign = async () => { if (!headlessClient.isSignable()) return alert('Delegation authorize your wallet first!'); const provider = headlessClient.getProvider(); const web3Provider = new ethers.providers.Web3Provider(provider); const signature = await web3Provider.getSigner().signMessage(message); setResult(signature); }; return ( <LayoutBox> <Input value={message} onChange={e => setMessage(e.target.value)} placeholder="Sign everything with Ronin Waypoint..." /> <Button label="Sign message" onClick={handleSign} /> {result && <p>{`Signature: ${result}`}</p>} </LayoutBox> ); }
Result
Loading...
Make a transaction: Activate Atia's Blessing
Sends a transaction to the Atia Shrine smart contract to activate the "Atia's Blessing" feature in Axie Infinity games.
Live Editor
function ActivateAtia() { const handleActivate = async () => { if (!headlessClient.isSignable()) return alert('Delegation authorize your wallet first!'); const provider = headlessClient.getProvider(); const web3Provider = new ethers.providers.Web3Provider(provider); const accounts = await web3Provider.listAccounts(); const contract = new ethers.Contract( Atia_ADDRESS, activateAtiaABI, web3Provider.getSigner(), ); try { await contract.activateStreak(accounts[0]); alert(`Atia's Blessing activated!`); } catch (error) { alert(error); } }; return <Button label={`Activate Atia's Blessing`} onClick={handleActivate} />; }
Result
Loading...