Merge pull request #64 from NillionNetwork/feat/top-up-payment-hooks

feat: add hooks for top-up payments operations

client-react-hooks/package.json

@@ -2,7 +2,7 @@
   "name": "@nillion/client-react-hooks",
   "license": "MIT",
   "author": "[email protected]",
-  "version": "0.2.1",
+  "version": "0.3.0-rc.0",
   "homepage": "https://nillion.pub/client-ts",
   "repository": {
     "type": "git",

client-react-hooks/src/create-client.ts

@@ -2,23 +2,26 @@ import type { OfflineSigner } from "@cosmjs/proto-signing";
 import type { Keplr } from "@keplr-wallet/types";
 import { VmClientBuilder } from "@nillion/client-vms";
 import { createSignerFromKey } from "@nillion/client-vms";
+import type { PaymentMode } from "@nillion/client-vms";
 
 export type TestnetOptions = {
   network: "testnet";
   seed: string;
   keplr: Keplr;
+  paymentMode?: PaymentMode;
 };
 
 export type DevnetOptions = {
   network: "devnet";
   seed?: string;
   signer?: Keplr | OfflineSigner;
+  paymentMode?: PaymentMode;
 };
 
 type Options = DevnetOptions | TestnetOptions;
 
 const DevnetConfig = {
-  bootnodeUrl: "http://127.0.0.1:37939",
+  bootnodeUrl: "http://127.0.0.1:43207",
   chainUrl: "http://127.0.0.1:48102",
   chainId: "nillion-chain-devnet",
   seed: "user-devnet-seed",
@@ -33,7 +36,7 @@ const TestnetConfig = {
 };
 
 export async function createClient(options: Options) {
-  const builder = new VmClientBuilder();
+  const builder = new VmClientBuilder(options.paymentMode);
   switch (options.network.toLowerCase()) {
     case "devnet": {
       const config = options as DevnetOptions;

client-react-hooks/src/index.ts

@@ -1,6 +1,8 @@
 export { NillionProvider } from "./nillion-provider";
 export { createClient } from "./create-client";
 export { getKeplr } from "./keplr";
+export { useNilAccountBalance } from "./use-nil-account-balance";
+export { useNilAddFunds } from "./use-nil-add-funds";
 export { useNilDeleteValues } from "./use-nil-delete-values";
 export { useNilInvokeCompute } from "./use-nil-invoke-compute";
 export { useNilOverwritePermissions } from "./use-nil-overwrite-permissions";

client-react-hooks/src/use-nil-account-balance.ts

@@ -0,0 +1,29 @@
+import { useMutation } from "@tanstack/react-query";
+import { type UseNilHook, nilHookBaseResult } from "./nil-hook-base";
+import { useNillion } from "./use-nillion";
+
+type ExecuteArgs = undefined;
+type ExecuteResult = bigint;
+
+type UseNilAccountBalance = UseNilHook<ExecuteArgs, ExecuteResult>;
+
+export const useNilAccountBalance = (): UseNilAccountBalance => {
+  const { client } = useNillion();
+
+  const mutationFn = async (): Promise<ExecuteResult> => {
+    const response = await client.payer.accountBalance();
+    return response.balance;
+  };
+
+  const mutate = useMutation({
+    mutationFn,
+  });
+
+  return {
+    execute: (): void => {
+      mutate.mutate();
+    },
+    executeAsync: async (): Promise<ExecuteResult> => mutate.mutateAsync(),
+    ...nilHookBaseResult(mutate),
+  };
+};

client-react-hooks/src/use-nil-add-funds.ts

@@ -0,0 +1,31 @@
+import { useMutation } from "@tanstack/react-query";
+import { type UseNilHook, nilHookBaseResult } from "./nil-hook-base";
+import { useNillion } from "./use-nillion";
+
+type ExecuteArgs = {
+  amount: bigint;
+};
+type ExecuteResult = undefined;
+
+type UseNilAddFunds = UseNilHook<ExecuteArgs, ExecuteResult>;
+
+export const useNilAddFunds = (): UseNilAddFunds => {
+  const { client } = useNillion();
+
+  const mutationFn = async (args: ExecuteArgs): Promise<ExecuteResult> => {
+    await client.payer.addFunds(args.amount);
+  };
+
+  const mutate = useMutation({
+    mutationFn,
+  });
+
+  return {
+    execute: (args: ExecuteArgs): void => {
+      mutate.mutate(args);
+    },
+    executeAsync: async (args: ExecuteArgs): Promise<ExecuteResult> =>
+      mutate.mutateAsync(args),
+    ...nilHookBaseResult(mutate),
+  };
+};

examples-nextjs/app/components/account-balance.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useNilAccountBalance } from "@nillion/client-react-hooks";
+import type { FC } from "react";
+
+export const AccountBalance: FC = () => {
+  const mutation = useNilAccountBalance();
+
+  let data = "";
+  if (mutation.isSuccess) {
+    // stringify cannot handle BigInts
+    data = JSON.stringify(mutation.data, (_, v) =>
+      typeof v === "bigint" ? v.toString() : v,
+    );
+  } else if (mutation.isError) {
+    data = mutation.error.message;
+  }
+
+  return (
+    <div>
+      <h2>Account Balance</h2>
+      <ol>
+        <li>Status: {mutation.status}</li>
+        <li>Result: {data}</li>
+      </ol>
+      <button type="button" onClick={(): void => mutation.execute()}>
+        Execute
+      </button>
+    </div>
+  );
+};

examples-nextjs/app/components/add-funds.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useNilAddFunds } from "@nillion/client-react-hooks";
+import type { FC } from "react";
+
+export const AddFunds: FC = () => {
+  const mutation = useNilAddFunds();
+
+  let result = "";
+  if (mutation.isSuccess) {
+    result = "Account has been funded";
+  } else if (mutation.isError) {
+    result = mutation.error.message;
+  }
+
+  const args = { amount: BigInt(10) };
+
+  return (
+    <div>
+      <h2>Add Funds</h2>
+      <ol>
+        <li>Status: {mutation.status}</li>
+        <li>Result: {result}</li>
+      </ol>
+      <button type="button" onClick={(): void => mutation.execute(args)}>
+        Execute
+      </button>
+    </div>
+  );
+};

examples-nextjs/app/page.tsx

@@ -7,6 +7,8 @@ import {
 } from "@nillion/client-react-hooks";
 import type { VmClient } from "@nillion/client-vms";
 import { useEffect, useState } from "react";
+import { AccountBalance } from "#/components/account-balance";
+import { AddFunds } from "#/components/add-funds";
 import { DeleteValues } from "#/components/delete-values";
 import { InvokeCompute } from "#/components/invoke-compute";
 import { OverwritePermissions } from "#/components/overwrite-permissions";
@@ -41,6 +43,8 @@ export default function Home() {
   return (
     <NillionProvider client={client}>
       <PoolStatus />
+      <AccountBalance />
+      <AddFunds />
       <StoreValues />
       <RetrieveValues />
       <UpdateValues />

examples-nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nillion/examples-nextjs",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
     "dev": "next dev",