Skip to main content

Finnie Wallet

Banner

Integrate your dApp with Finnie wallet

useFinnie

To integrate with Finnie use the useFinnie hook and import it is as easy as:

import { useFinnie } from "components/finnie";

useFinnie hook exports many variables and helpers to integrate with Finnie.

const {
state: {
connectFinnie,
disconnectFinnie,
walletAddress,
walletBalance,
isFinnieConnected,
isLoading,
isError,
},
} = useFinnie();

connectFinnie a function to call to try to connect to Finnie. e.g:

<button onClick={connectFinnie}>Connect to finnie</button>

When connectFinnie succeed you'll have:

  1. Your Finnie address in walletAddress
  2. Both your KOII and Arweave balance in walletBalance
  3. isFinnieConnected set to true

When connectFinnie fail you'll have:

  1. isError set to false
  2. isFinnieConnected set to false

When you're still in the process of connecting to Finnie you'll have isLoading set to true

e.g:

import { useFinnie } from "components/finnie";

function Component() {
const {
state: {
connectFinnie,
isLoading,
isError,
walletAddress,
isFinnieConnected,
},
} = useFinnie();

return (
<>
<button onClick={connectFinnie}>
{isLoading
? "Connecting..."
: isFinnieConnected
? "Connected ✓"
: "Connect to finnie"}
</button>

{isFinnieConnected && (
<p>
Connected. Your wallet address is: <code>{walletAddress}</code>
</p>
)}

{isError && <p>An error occurred while connecting to finnie.</p>}
</>
);
}

Calling disconnectFinnie will disconnect the connection to Finnie.

Finnie Wallet API

When you're connected to Finnie, you can interact with any Finnie exposed API. e.g: The sendKoiiTip function inside api/finnie.ts used to send KOII from your wallet to another address.

export const sendKoiiTip = async (artistAddress: string, amount: number) => {
const extension = window.koiiWallet;
return await extension.sendKoii(artistAddress, amount);
};