Aptos

Introduction

Here is an example of how to use @aptos-labs/wallet-adapter-react and wallet plugins to support the various wallets in the Aptos ecosystem with the wormhole-kit.

Installation

npm install @zktx.io/wormhole-kit petra-plugin-wallet-adapter petra-plugin-wallet-adapter

yarn add @zktx.io/wormhole-kit petra-plugin-wallet-adapter petra-plugin-wallet-adapter

Set up providers

// index.tsx

import { StrictMode } from 'react';

import { AptosWalletAdapterProvider } from '@aptos-labs/wallet-adapter-react';
import { WhProvider } from '@zktx.io/wormhole-kit';
import { SnackbarProvider } from 'notistack';
import { PetraWallet } from 'petra-plugin-wallet-adapter';
import { createRoot } from 'react-dom/client';

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <StrictMode>
    <WhProvider
      network="Testnet"
      chains={['Sui', 'Sepolia', 'Solana', 'Aptos', 'Celo', 'Polygon']}
      config={{
        chains: {
          Ethereum: {
            rpc: 'https://eth-goerli.public.blastapi.io',
          },
          Polygon: {
            rpc: 'https://polygon-mumbai.api.onfinality.io/public',
          },
        },
      }}
      mode="dark"
    >
      <SnackbarProvider
        anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
      />
      <AptosWalletAdapterProvider
        plugins={[new PetraWallet()]}
        autoConnect={true}
        onError={(error) => {
          console.log('error', error);
        }}
      >
        <App />
      </AptosWalletAdapterProvider>
    </WhProvider>
  </StrictMode>,
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Use Components

Transfer Asset Modal

    // import { useWallet } from '@aptos-labs/wallet-adapter-react';
    // const { connect, account, signAndSubmitTransaction } = useWallet();
    <WhTransferModal
      chain="Aptos"
      token={'0x1::aptos_coin::AptosCoin'}
      address={account.address}
      trigger={<button>Transfer</button>}
      handleUnsignedTxs={handleUnsignedTxs}
    />

Redeem Asset Modal

    // import { useWallet } from '@aptos-labs/wallet-adapter-react';
    // const { connect, account, signAndSubmitTransaction } = useWallet();
    <WhRedeemModal
      chain="Aptos"
      address={account.address}
      trigger={<button>Redeem</button>}
      handleUnsignedTxs={handleUnsignedTxs}
    />

Sign Transaction

// import { useWallet } from '@aptos-labs/wallet-adapter-react';
// const { connect, account, signAndSubmitTransaction } = useWallet();
const handleUnsignedTxs = async (unsignedTxs: IUnsignedTx[]): Promise<void> => {
  try {
    if (account) {
      const unsignedTx = unsignedTxs[0];
      if (unsignedTx) {
        const response = await signAndSubmitTransaction({
          data: {
            function: unsignedTx.function,
            typeArguments: unsignedTx.type_arguments,
            functionArguments: unsignedTx.arguments,
          },
        });
        enqueueSnackbar(response.hash, {
          variant: "success",
        });
      } else {
        enqueueSnackbar("Empty Transactions", {
          variant: "error",
        });
      }
    }
  } catch (error) {
    enqueueSnackbar(`${error}`, {
      variant: "error",
    });
  }
};

Github

Demo