fix: Merge gist version of upProvider

components/Donate.tsx

@@ -1,27 +1,28 @@
 /**
  * A component that facilitates LYX token transfers to a specified LUKSO address.
- * 
+ *
  * @component
  * @param {Object} props - Component props
  * @param {string} [props.selectedAddress] - Optional hex address of the donation recipient.
  *                                          If not provided, uses the first address from context.
- * 
+ *
  * Features:
  * - Amount validation (${minAmount}-${maxAmount} LYX)
  * - Integration with UP Browser wallet
  * - Recipient profile display using LuksoProfile
  * - Real-time amount validation
- * 
+ *
  * @requires useUpProvider - Hook for UP Browser wallet integration
  * @requires LuksoProfile - Component for displaying LUKSO profile information
  * @requires viem - For handling blockchain transactions
  */
-'use client';
+"use client";
 
-import { useCallback, useEffect, useState } from 'react';
-import { parseUnits } from 'viem';
-import { useUpProvider } from './upProvider';
-import { LuksoProfile } from './LuksoProfile';
+import { useCallback, useEffect, useState } from "react";
+import { parseUnits } from "viem";
+import { useUpProvider } from "./upProvider";
+import { LuksoProfile } from "./LuksoProfile";
+import { waitForTransactionReceipt } from "viem/actions";
 
 const minAmount = 1.0;
 const maxAmount = 1000;
@@ -34,7 +35,7 @@ export function Donate({ selectedAddress }: DonateProps) {
   const { client, accounts, contextAccounts, walletConnected } =
     useUpProvider();
   const [amount, setAmount] = useState<number>(minAmount);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
   const recipientAddress = selectedAddress || contextAccounts[0];
   const [isLoading, setIsLoading] = useState(false);
 
@@ -44,7 +45,7 @@ export function Donate({ selectedAddress }: DonateProps) {
     } else if (value > maxAmount) {
       setError(`Amount cannot exceed ${maxAmount} LYX.`);
     } else {
-      setError('');
+      setError("");
     }
     setAmount(value);
   }, []);
@@ -53,7 +54,7 @@ export function Donate({ selectedAddress }: DonateProps) {
     validateAmount(amount);
   }, [amount, validateAmount]);
 
-  const sendToken = async () => {
+  const sendToken = useCallback(async () => {
     if (!client || !walletConnected || !amount) {
       return;
     }
@@ -64,19 +65,29 @@ export function Donate({ selectedAddress }: DonateProps) {
         account: accounts[0] as `0x${string}`,
         to: recipientAddress as `0x${string}`,
         value: parseUnits(amount.toString(), 18),
+        chain: client.chain,
       });
 
       // Wait for transaction confirmation
-      await client.waitForTransactionReceipt({ hash: tx });
-      
+      await waitForTransactionReceipt(client, { hash: tx });
+
       // Reset amount after successful transaction
       setAmount(minAmount);
     } catch (err) {
-      console.error('Transaction failed:', err);
+      console.error("Transaction failed:", err);
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [accounts, amount, client, recipientAddress, walletConnected]);
+
+  const sendTokenKeyPress = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        sendToken();
+      }
+    },
+    [sendToken]
+  );
 
   const handleOnInput = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -88,7 +99,6 @@ export function Donate({ selectedAddress }: DonateProps) {
 
   return (
     <div className="w-full bg-white/80 backdrop-blur-md rounded-2xl">
-
       <div className="rounded-xl">
         <div className="flex flex-row items-center justify-center gap-2">
           <LuksoProfile address={recipientAddress} />
@@ -107,12 +117,13 @@ export function Donate({ selectedAddress }: DonateProps) {
             is-full-width
             is-disabled={!walletConnected}
             className="mt-2"
-          ></lukso-input>
+          />
           {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
         </div>
 
         <lukso-button
           onClick={sendToken}
+          onKeyPress={sendTokenKeyPress}
           variant="primary"
           size="medium"
           className="mt-2"

components/upProvider.tsx

@@ -14,16 +14,26 @@
  * - selectedAddress: Currently selected address for transactions
  * - isSearching: Loading state indicator
  */
-'use client';
+"use client";
 
-import { createClientUPProvider } from "@lukso/up-provider";
+import {
+  createClientUPProvider,
+  type UPClientProvider,
+} from "@lukso/up-provider";
 import { createWalletClient, custom } from "viem";
 import { lukso, luksoTestnet } from "viem/chains";
-import { createContext, useContext, useEffect, useState, ReactNode } from "react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+  useMemo,
+} from "react";
 
 interface UpProviderContext {
-  provider: any;
-  client: any;
+  provider: UPClientProvider | null;
+  client: ReturnType<typeof createWalletClient> | null;
   chainId: number;
   accounts: Array<`0x${string}`>;
   contextAccounts: Array<`0x${string}`>;
@@ -36,7 +46,8 @@ interface UpProviderContext {
 
 const UpContext = createContext<UpProviderContext | undefined>(undefined);
 
-const provider = typeof window !== "undefined" ? createClientUPProvider() : null;
+const provider =
+  typeof window !== "undefined" ? createClientUPProvider() : null;
 
 export function useUpProvider() {
   const context = useContext(UpContext);
@@ -53,20 +64,26 @@ interface UpProviderProps {
 export function UpProvider({ children }: UpProviderProps) {
   const [chainId, setChainId] = useState<number>(0);
   const [accounts, setAccounts] = useState<Array<`0x${string}`>>([]);
-  const [contextAccounts, setContextAccounts] = useState<Array<`0x${string}`>>([]);
+  const [contextAccounts, setContextAccounts] = useState<Array<`0x${string}`>>(
+    []
+  );
   const [walletConnected, setWalletConnected] = useState(false);
-  const [selectedAddress, setSelectedAddress] = useState<`0x${string}` | null>(null);
+  const [selectedAddress, setSelectedAddress] = useState<`0x${string}` | null>(
+    null
+  );
   const [isSearching, setIsSearching] = useState(false);
+  const [account] = accounts ?? [];
+  const [contextAccount] = contextAccounts ?? [];
 
-  const client = (() => {
+  const client = useMemo(() => {
     if (provider && chainId) {
       return createWalletClient({
         chain: chainId === 42 ? lukso : luksoTestnet,
         transport: custom(provider),
       });
     }
     return null;
-  })();
+  }, [chainId]);
 
   useEffect(() => {
     let mounted = true;
@@ -75,18 +92,21 @@ export function UpProvider({ children }: UpProviderProps) {
       try {
         if (!client || !provider) return;
 
-        const _chainId = (await client.getChainId()) as number;
+        const _accounts = (await provider.request(
+          "eth_accounts",
+          []
+        )) as Array<`0x${string}`>;
         if (!mounted) return;
-        setChainId(_chainId);
+        setAccounts(_accounts);
 
-        const _accounts = (await client.getAddresses()) as Array<`0x${string}`>;
+        const _chainId = (await provider.request("eth_chainId")) as number;
         if (!mounted) return;
-        setAccounts(_accounts);
+        setChainId(_chainId);
 
         const _contextAccounts = provider.contextAccounts;
         if (!mounted) return;
         setContextAccounts(_contextAccounts);
-        setWalletConnected(_accounts.length > 0 && _contextAccounts.length > 0);
+        setWalletConnected(_accounts[0] != null && _contextAccounts[0] != null);
       } catch (error) {
         console.error(error);
       }
@@ -97,12 +117,12 @@ export function UpProvider({ children }: UpProviderProps) {
     if (provider) {
       const accountsChanged = (_accounts: Array<`0x${string}`>) => {
         setAccounts(_accounts);
-        setWalletConnected(_accounts.length > 0 && contextAccounts.length > 0);
+        setWalletConnected(_accounts[0] != null && contextAccount != null);
       };
 
       const contextAccountsChanged = (_accounts: Array<`0x${string}`>) => {
         setContextAccounts(_accounts);
-        setWalletConnected(accounts.length > 0 && _accounts.length > 0);
+        setWalletConnected(account != null && _accounts[0] != null);
       };
 
       const chainChanged = (_chainId: number) => {
@@ -116,30 +136,48 @@ export function UpProvider({ children }: UpProviderProps) {
       return () => {
         mounted = false;
         provider.removeListener("accountsChanged", accountsChanged);
-        provider.removeListener("contextAccountsChanged", contextAccountsChanged);
+        provider.removeListener(
+          "contextAccountsChanged",
+          contextAccountsChanged
+        );
         provider.removeListener("chainChanged", chainChanged);
       };
     }
-  }, [client, accounts.length, contextAccounts.length]);
-
+    // If you want to be responsive to account changes
+    // you also need to look at the first account rather
+    // then the length or the whole array. Unfortunately react doesn't properly
+    // look at array values like vue or knockout.
+  }, [client, account, contextAccount]);
+
+  // There has to be a useMemo to make sure the context object doesn't change on every
+  // render.
+  const data = useMemo(() => {
+    return {
+      provider,
+      client,
+      chainId,
+      accounts,
+      contextAccounts,
+      walletConnected,
+      selectedAddress,
+      setSelectedAddress,
+      isSearching,
+      setIsSearching,
+    };
+  }, [
+    client,
+    chainId,
+    accounts,
+    contextAccounts,
+    walletConnected,
+    selectedAddress,
+    isSearching,
+  ]);
   return (
-    <UpContext.Provider
-      value={{
-        provider,
-        client,
-        chainId,
-        accounts,
-        contextAccounts,
-        walletConnected,
-        selectedAddress,
-        setSelectedAddress,
-        isSearching,
-        setIsSearching,
-      }}
-    >
+    <UpContext.Provider value={data}>
       <div className="min-h-screen flex items-center justify-center">
         {children}
       </div>
     </UpContext.Provider>
   );
-} 
+}