diff --git a/client-react-hooks/package.json b/client-react-hooks/package.json index 79199f5..ac3ccaf 100644 --- a/client-react-hooks/package.json +++ b/client-react-hooks/package.json @@ -2,7 +2,7 @@ "name": "@nillion/client-react-hooks", "license": "MIT", "author": "devsupport@nillion.com", - "version": "0.2.1", + "version": "0.3.0-rc.0", "homepage": "https://nillion.pub/client-ts", "repository": { "type": "git", diff --git a/client-react-hooks/src/create-client.ts b/client-react-hooks/src/create-client.ts index 378948d..30ee879 100644 --- a/client-react-hooks/src/create-client.ts +++ b/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; diff --git a/client-react-hooks/src/index.ts b/client-react-hooks/src/index.ts index c575729..da56088 100644 --- a/client-react-hooks/src/index.ts +++ b/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"; diff --git a/client-react-hooks/src/use-nil-account-balance.ts b/client-react-hooks/src/use-nil-account-balance.ts new file mode 100644 index 0000000..c2e226c --- /dev/null +++ b/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; + +export const useNilAccountBalance = (): UseNilAccountBalance => { + const { client } = useNillion(); + + const mutationFn = async (): Promise => { + const response = await client.payer.accountBalance(); + return response.balance; + }; + + const mutate = useMutation({ + mutationFn, + }); + + return { + execute: (): void => { + mutate.mutate(); + }, + executeAsync: async (): Promise => mutate.mutateAsync(), + ...nilHookBaseResult(mutate), + }; +}; diff --git a/client-react-hooks/src/use-nil-add-funds.ts b/client-react-hooks/src/use-nil-add-funds.ts new file mode 100644 index 0000000..40c82dc --- /dev/null +++ b/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; + +export const useNilAddFunds = (): UseNilAddFunds => { + const { client } = useNillion(); + + const mutationFn = async (args: ExecuteArgs): Promise => { + await client.payer.addFunds(args.amount); + }; + + const mutate = useMutation({ + mutationFn, + }); + + return { + execute: (args: ExecuteArgs): void => { + mutate.mutate(args); + }, + executeAsync: async (args: ExecuteArgs): Promise => + mutate.mutateAsync(args), + ...nilHookBaseResult(mutate), + }; +}; diff --git a/examples-nextjs/app/components/account-balance.tsx b/examples-nextjs/app/components/account-balance.tsx new file mode 100644 index 0000000..7780c15 --- /dev/null +++ b/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 ( +
+

Account Balance

+
    +
  1. Status: {mutation.status}
  2. +
  3. Result: {data}
  4. +
+ +
+ ); +}; diff --git a/examples-nextjs/app/components/add-funds.tsx b/examples-nextjs/app/components/add-funds.tsx new file mode 100644 index 0000000..b1d4034 --- /dev/null +++ b/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 ( +
+

Add Funds

+
    +
  1. Status: {mutation.status}
  2. +
  3. Result: {result}
  4. +
+ +
+ ); +}; diff --git a/examples-nextjs/app/page.tsx b/examples-nextjs/app/page.tsx index ceb8fb3..2e4a8ad 100644 --- a/examples-nextjs/app/page.tsx +++ b/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 ( + + diff --git a/examples-nextjs/package.json b/examples-nextjs/package.json index 24e61d5..bec6355 100644 --- a/examples-nextjs/package.json +++ b/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",