Wallet Integration

TaskOn Widget React currently provides built-in EVM wallet integration.

Default Behavior

If you do not provide a custom adapter, the SDK uses its built-in wallet picker flow:


<TaskOnProvider
  config={{
    clientId: "YOUR_CLIENT_ID",
  }}
>
  {children}
</TaskOnProvider>

Custom EVM Adapter

You can plug in your own adapter through walletConfig.evmAdapter:


import type { WalletAdapter } from "@taskon/widget-react/core";
 
const myAdapter: WalletAdapter = {
  connect: async () => "0x...",
  disconnect: async () => {},
  signMessage: async () => "0x-signature",
  getAddress: () => "0x...",
};
 
<TaskOnProvider
  config={{
    clientId: "YOUR_CLIENT_ID",
    walletConfig: {
      evmAdapter: myAdapter,
    },
  }}
>
  {children}
</TaskOnProvider>

Keep the adapter reference stable in React (for example with useMemo) so wallet state is not reset by re-creating adapter objects on every render:


import { useMemo } from "react";
import type { WalletAdapter } from "@taskon/widget-react/core";
 
function App() {
  const evmAdapter = useMemo<WalletAdapter>(() => createMyAdapter(), []);
 
  return (
    <TaskOnProvider
      config={{
        clientId: "YOUR_CLIENT_ID",
        walletConfig: { evmAdapter },
      }}
    >
      {children}
    </TaskOnProvider>
  );
}

Wallet Hooks

Use hooks from @taskon/widget-react/core:


import { useEvmWallet } from "@taskon/widget-react/core";
 
function ConnectWalletButton() {
  const { address, isConnected, connect, disconnect } = useEvmWallet();
 
  if (isConnected) {
    return <button onClick={() => void disconnect()}>{address}</button>;
  }
 
  return <button onClick={() => void connect()}>Connect Wallet</button>;
}

WalletConnect Project ID

For production wallet flows, set your own WalletConnect project ID:


<TaskOnProvider
  config={{
    clientId: "YOUR_CLIENT_ID",
    walletConnectProjectId: "YOUR_WALLETCONNECT_PROJECT_ID",
  }}
>
  {children}
</TaskOnProvider>