Refactor React components and update dependencies

examples/react-provider/src/AddNote.tsx

@@ -1,5 +1,4 @@
-import { useUpdateCall } from "@ic-reactor/react"
-import { Backend } from "App"
+import { useNoteUpdateCall } from "NoteActor"
 import { useState } from "react"
 
 interface AddNoteProps {
@@ -9,7 +8,7 @@ interface AddNoteProps {
 const AddNote: React.FC<AddNoteProps> = ({ publicKey }) => {
   const [input, setInput] = useState("")
 
-  const { call, data, loading, error } = useUpdateCall<Backend>({
+  const { call, data, loading, error } = useNoteUpdateCall({
     functionName: "add_simple_note",
     args: [publicKey, input],
   })

examples/react-provider/src/App.tsx

@@ -1,52 +1,31 @@
 import Login from "Login"
 import Notes from "Notes"
 import AddNote from "./AddNote"
-import { backend } from "declarations/candid"
-import { AgentProvider, ActorProvider, useQueryCall } from "@ic-reactor/react"
+import { AgentProvider, ActorProvider } from "@ic-reactor/react"
+import { NoteActorProvider } from "NoteActor"
+import { ICPLedger } from "IcpBalance"
+import { ICPTransfer } from "IcpTransfer"
 
 const publicKey = crypto.getRandomValues(new Uint8Array(48))
 
-export type Backend = typeof backend
-
 const App = () => {
   return (
     <AgentProvider>
       <Login />
       {/*  idlFactory can be fetched from the network if you not provide it */}
-      <ActorProvider canisterId="ryjl3-tyaaa-aaaaa-aaaba-cai">
+      <ActorProvider
+        canisterId="ryjl3-tyaaa-aaaaa-aaaba-cai"
+        loadingComponent={<div>Loading Icp Ledger...</div>}
+      >
         <ICPLedger />
+        <ICPTransfer />
       </ActorProvider>
-      <ActorProvider canisterId="xeka7-ryaaa-aaaal-qb57a-cai">
+      <NoteActorProvider loadingComponent={<div>Loading Note Actor...</div>}>
         <Notes publicKey={publicKey} />
         <AddNote publicKey={publicKey} />
-      </ActorProvider>
+      </NoteActorProvider>
     </AgentProvider>
   )
 }
 
 export default App
-
-const ICPLedger = () => {
-  const { call, data, loading, error } = useQueryCall({
-    functionName: "name",
-  })
-
-  return (
-    <div>
-      <h2>Test:</h2>
-      <div>
-        Loading: {loading.toString()}
-        <br />
-        Error: {error?.toString()}
-        <br />
-        Data:{" "}
-        {data
-          ? JSON.stringify(data, (_, v) =>
-              typeof v === "bigint" ? v.toString() : v
-            )
-          : null}
-      </div>
-      <button onClick={call}>Get Name</button>
-    </div>
-  )
-}

examples/react-provider/src/IcpBalance.tsx

@@ -0,0 +1,29 @@
+import { useQueryCall, useUserPrincipal } from "@ic-reactor/react"
+
+export const ICPLedger = () => {
+  const principal = useUserPrincipal()
+
+  const { call, data, loading, error } = useQueryCall({
+    functionName: "icrc1_balance_of",
+    args: [{ owner: principal, subaccount: [] }],
+  })
+
+  return (
+    <div>
+      <h2>ICP Balance:</h2>
+      <div>
+        Loading: {loading.toString()}
+        <br />
+        Error: {error?.toString()}
+        <br />
+        balance:{" "}
+        {data !== undefined
+          ? JSON.stringify(data, (_, v) =>
+              typeof v === "bigint" ? v.toString() : v
+            )
+          : null}
+      </div>
+      <button onClick={call}>Get Balance</button>
+    </div>
+  )
+}

examples/react-provider/src/IcpTransfer.tsx

@@ -0,0 +1,62 @@
+import { Principal } from "@dfinity/principal"
+import { useUpdateCall } from "@ic-reactor/react"
+import { useState } from "react"
+
+export const ICPTransfer = () => {
+  const [principal, setPrincipal] = useState("")
+  const [amount, setAmount] = useState("")
+
+  const { call, data, loading, error } = useUpdateCall({
+    functionName: "icrc1_transfer",
+  })
+
+  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    call([
+      {
+        to: {
+          owner: Principal.fromText(principal),
+          subaccount: [],
+        },
+        amount: BigInt(amount),
+        fee: [],
+        memo: [],
+        created_at_time: [],
+        from_subaccount: [],
+      },
+    ])
+  }
+
+  return (
+    <div>
+      <h2>Transfer:</h2>
+      <div>
+        Loading: {loading.toString()}
+        <br />
+        Error: {error?.toString()}
+        <br />
+        response:{" "}
+        {data
+          ? JSON.stringify(data, (_, v) =>
+              typeof v === "bigint" ? v.toString() : v
+            )
+          : null}
+      </div>
+      <form onSubmit={onSubmit}>
+        <input
+          type="text"
+          value={principal}
+          name="principal"
+          onChange={(e) => setPrincipal(e.target.value)}
+        />
+        <input
+          type="text"
+          value={amount}
+          name="amount"
+          onChange={(e) => setAmount(e.target.value)}
+        />
+        <button>Transfer</button>
+      </form>
+    </div>
+  )
+}

examples/react-provider/src/Login.tsx

@@ -67,7 +67,14 @@ const Login = () => {
         </div>
       ) : (
         <div>
-          <button onClick={() => login()} disabled={authenticating}>
+          <button
+            onClick={() =>
+              login({
+                identityProvider: "https://identity.ic0.app",
+              })
+            }
+            disabled={authenticating}
+          >
             Login
           </button>
         </div>

examples/react-provider/src/NoteActor.ts

@@ -0,0 +1,12 @@
+import { createActorContext } from "@ic-reactor/react"
+import { backend } from "declarations/candid"
+
+export type Backend = typeof backend
+
+export const {
+  ActorProvider: NoteActorProvider,
+  useQueryCall: useNoteQueryCall,
+  useUpdateCall: useNoteUpdateCall,
+} = createActorContext<Backend>({
+  canisterId: "xeka7-ryaaa-aaaal-qb57a-cai",
+})

examples/react-provider/src/Notes.tsx

@@ -1,12 +1,11 @@
-import { useQueryCall } from "@ic-reactor/react"
-import { Backend } from "App"
+import { useNoteQueryCall } from "NoteActor"
 
 interface NoteProps {
   publicKey: Uint8Array
 }
 
 const Notes: React.FC<NoteProps> = ({ publicKey }) => {
-  const { call, data, loading, error } = useQueryCall({
+  const { call, data, loading, error } = useNoteQueryCall({
     functionName: "user_simple_notes",
     args: [publicKey],
     refetchInterval: 10000,