How to Use

On any page you want to use the wallet properties, import useWallet from @aptos-labs/wallet-adapter-react:

In the demo, we present how to implement the wallet button by importing the status of the wallet connection


import { useWallet } from "@aptos-labs/wallet-adapter-react";
export const WalletButtons = () => {
const { wallets, connected, disconnect, isLoading } = useWallet();
if (connected) {
return (
<div className="flex flex-row">
<div className={cn(buttonStyles, "hover:bg-blue-700 btn-small")} onClick={disconnect}>
Disconnect
</div>
</div>
);
}
if (isLoading || !wallets[0]) {
return <div className={cn(buttonStyles, "opacity-50 cursor-not-allowed")}>Loading...</div>;
}
return <WalletView wallet={wallets[0]} />;
};

Also performing transaction. In the Aptogotchi demo, we interact with the wallet to add health points of the animal.


const { account, network, signAndSubmitTransaction } = useWallet();
const response = await signAndSubmitTransaction({
sender: account.address,
data: {
function: `${NEXT_PUBLIC_CONTRACT_ADDRESS}::main::feed`,
typeArguments: [],
functionArguments: [NEXT_PUBLIC_ENERGY_INCREASE],
},
});
await aptosClient.waitForTransaction({ transactionHash: response.hash });
setPet((pet) => {
if (!pet) return pet;
if (pet.energy_points + Number(NEXT_PUBLIC_ENERGY_INCREASE) > Number(NEXT_PUBLIC_ENERGY_CAP))
return pet;
return {
...pet,
energy_points: pet.energy_points + Number(NEXT_PUBLIC_ENERGY_INCREASE),
};
});

You can then use the exported properties:


const {
connect,
account,
network,
connected,
disconnect,
wallet,
wallets,
signAndSubmitTransaction,
signTransaction,
signMessage,
} = useWallet();

Finally, use the examples on the package README file to build more functionality into your dapps.