# WalletProvider

import { WalletProvider } from '@tezos...';
import { KukaiConnector } from '@tezos...';
import { BeaconConnector } from '@tezos...';

const net=... //this in future could become an array of supported chains

const settings = {
    connectors:[
        new KukaiConnector({ net }),
        new BeaconConnector({ 
            net,
            options:{
                ...
            }
        }),
    ]
}

export default function App() {
  return (
    <WalletProvider settings={settings}>
      <Example />
    </WalletProvider>
  );
}

import { useAccount } from '@tezos...';

export default function Example() {
    const {isConnected} = useAccount()   
    return isConnected ? <AuthenticatedExample /> : <UnauthenticatedExample />      
}

import { useConnect } from '@tezos...';

export default function UnauthenticatedExample() {
    const {connect, connectors, isConnecting} = useConnect()   
    return isConnecting ? <Spinner /> : 
        <div>
          {connectors.map((connector) => (
            <button
              disabled={!connector.ready}
              key={connector.id}
              onClick={() => connect({ connector })}
            >
              {connector.name}
              {!connector.ready && ' (unsupported)'}        
            </button>
        </div>      
}

import { useAccount, useDisconnect, useSend } from '@tezos...';

export default function AuthenticatedExample() {
    const { address, connector} = useAccount() 
    const { disconnect } = useDisconnect()
    const { data, isIdle, isError, isLoading, isSuccess, send } = useSend({
    kind: 'transaction',
    destination: 'tz1NBvY7qUedReRcYx8gqV34c8fUuks8o8Nr',
    amount: '10000'
    })
    return (
      <div>     
        <div>{address}</div>
        <div>Connected to {connector.name}</div>
        <button onClick={disconnect}>Disconnect</button>
        {isIdle && (
            <button disabled={loading} onClick={() => send()}>
              Donate to Dario
            </button>
          )}
          {isLoading && <div>Check Wallet</div>}
          {isSuccess && <div>Transaction: {JSON.stringify(data)}</div>}
          {isError && <div>Error sending transaction</div>}
      </div>
    )
        
}