Skip to main content

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...