varan-connect/example/src/App.tsx

import { useState } from 'react';
import './App.css'
import { GearApi } from '@gear-js/api';

const RAW_TRANSACTION = '0xd10204680359836ffbbdaee026cac6008a4c1f68e9fee5fc2949e0ab3ac3f478b7446a8a0dd90114506f6b657220526567697374657218506c617965724cd84143c22eb3da602607c1bd992dbd6db170e21d1b45b99278dbca78831af7028be58d11229c7b53a181793ada6c38754c3b30cc27cb607741d99e7bbadc7c687d165102b787e3e17957eee3435455613ff857a91389b1ae0a24e0618f1afcd6266268020000000000000000000000000000000000000001'

function App() {
  const varanWallet = window.injectedWeb3?.varan;
  const [data, setData] = useState<string>('');
  const [isConnected, setIsConnected] = useState<boolean>(false);
  const [signature, setSignature] = useState<string>('');
  const connect = async () => {
    const connection = await varanWallet?.connect?.('current');
    console.log('[VARANINJECT] connection', connection);
    setIsConnected(true);
  }

  const checkData = async () => {
    const data = await varanWallet.connect?.('current');
    console.log('[VARANINJECT] data', data);
    if (data) {
      data.accounts.get().then(accounts => {
        setData(JSON.stringify(accounts, null, 2));
      });
    }
  }

  const test = async () => {
    const extension = await varanWallet.enable?.('current');
    const address = (await extension?.accounts.get())?.[0].address;
    if (!address) {
      console.log('[VARANINJECT] address not found');
      return;
    }
    const apiPromise = new GearApi({ providerAddress: 'wss://rpc.vara.network' });
    await apiPromise.isReady;
    const tx = apiPromise.balance.transfer('kGgMeagrS8yiLMech46HKYGBti5bxyQ5VrRYyD2EgTDvY9jj2', 100)
    console.log('[VARANINJECT] tx', tx);
    // @ts-expect-error - signer is not typed
    const result = await tx.signAndSend(address, { signer: extension?.signer })
    console.log('[VARANINJECT] result', result);
    console.log('[VARANINJECT] result toHuman', result.toHuman());
  }

  const signTransaction = async () => {
    const extension = await varanWallet.enable?.('current');
    const address = (await extension?.accounts.get())?.[0].address;
    if (!address) {
      console.log('[VARANINJECT] address not found');
      return;
    }
    const signature = await extension?.signer?.signRaw?.({
      address: address,
      data: RAW_TRANSACTION,
      type: 'bytes',
    });
    console.log('[VARANINJECT] signature', signature);
    setSignature(signature?.signature || '');
  }

  const disconnect = async () => {
    localStorage.removeItem('VARAN_WALLET');
    window.location.reload();
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
      {isConnected && <button onClick={disconnect}>Disconnect</button>}
      {!isConnected && <button onClick={connect}>Connect</button>}
      <div>Is Connected: {isConnected ? 'Yes' : 'No'}</div>
      <button onClick={checkData}>Check Data</button>
      <div>DATA</div>
      <pre>{data}</pre>
      <button onClick={test}>Test</button>
      {isConnected && 
      <>
          <button onClick={signTransaction}>Sign Transaction</button>
          <div>SIGNATURE</div>
          <pre>{signature}</pre>
        </>
      }
    </div>
  )
}

export default App