Use transaction.toJSON() as argument to csprclick.send()

Use correct contract hash for testnet.
Remove csprclick event listeners when App is unmounted.

Author: davidatwhiletrue

client/public/config.js

@@ -1,7 +1,7 @@
 const config = {
   donation_contract_package_hash:
-    "ca0f4eedc84e03b6bc39ce664ef05dff00a96214194e706d50bfc43d84124035",
-  donation_api_url: "http://localhost:4000",
+    "c447e9d334a710bc3e0a47cbea854c269e41637d7b9aa9d37a745596f651ed7a",
+  donation_api_url: "https://donation-demo-api.casper.network",
   cspr_click_app_name: "Donation Demo",
   cspr_click_app_id: "csprclick-template",
   cspr_click_providers: ['casper-wallet', 'ledger', 'metamask-snap'],

client/src/App.tsx

@@ -18,14 +18,25 @@ const MainSection = styled.section(({ theme }) =>
 const App = () => {
   const clickRef = useClickRef();
   const [themeMode, setThemeMode] = useState<ThemeModeType>(ThemeModeType.light);
-  const [activeAccount, setActiveAccount] = useState<AccountType | null>(null);
+  const [connectedAccount, setConnectedAccount] = useState<AccountType | null>(null);
   const [refetchSignal, setRefetchSignal] = useState<number>(0);
 
   useEffect(() => {
-    clickRef?.on('csprclick:signed_in', (evt: any) => setActiveAccount(evt.account));
-    clickRef?.on('csprclick:switched_account', (evt: any) => setActiveAccount(evt.account));
-    clickRef?.on('csprclick:signed_out', () => setActiveAccount(null));
-    clickRef?.on('csprclick:switched_account', () => setActiveAccount(null));
+    if (!clickRef) return;
+
+    const handleSignedIn = (evt: any) => setConnectedAccount(evt.account);
+    const handleSwitchedAccount = (evt: any) => setConnectedAccount(evt.account);
+    const handleSignedOut = () => setConnectedAccount(null);
+
+    clickRef.on('csprclick:signed_in', handleSignedIn);
+    clickRef.on('csprclick:switched_account', handleSwitchedAccount);
+    clickRef.on('csprclick:signed_out', handleSignedOut);
+
+    return () => {
+      clickRef.off('csprclick:signed_in', handleSignedIn);
+      clickRef.off('csprclick:switched_account', handleSwitchedAccount);
+      clickRef.off('csprclick:signed_out', handleSignedOut);
+    };
   }, [clickRef?.on]);
 
   return (
@@ -38,7 +49,7 @@ const App = () => {
       />
       <Container>
         <HeroSection
-          isConnected={!!activeAccount}
+          isConnected={!!connectedAccount}
           onUpdateTipsList={() => setRefetchSignal(Date.now())}
         />
         <MainSection>

client/src/components/hero-section/index.tsx

@@ -60,7 +60,7 @@ export const HeroSection: React.FC<WelcomeProps> = ({ isConnected, onUpdateTipsL
 
     setModalScreen('loading');
 
-    clickRef?.send(tipTransaction, sender, onStatusUpdate).catch((err: any) => {
+    clickRef?.send(tipTransaction.toJSON() as object, sender, onStatusUpdate).catch((err: any) => {
       setModalScreen('error');
       alert('Error: ' + err);
     });

client/src/utils/tip-transaction.ts

@@ -5,11 +5,11 @@ import {
   Hash,
   PublicKey,
   SessionBuilder,
-  TransactionWrapper
+  Transaction,
 } from 'casper-js-sdk';
 import { getProxyWasm } from '@/api';
 
-export const buildTipTransaction = async (sender: string, amount: string, message: string) => {
+export const buildTipTransaction = async (sender: string, amount: string, message: string): Promise<Transaction> => {
   const contractWasm = await getProxyWasm();
 
   const tipArgs = Args.fromMap({
@@ -33,17 +33,11 @@ export const buildTipTransaction = async (sender: string, amount: string, messag
     args: serializedArgs
   });
 
-  const sessionTransaction = new SessionBuilder()
+  return new SessionBuilder()
     .from(PublicKey.fromHex(sender))
     .runtimeArgs(args)
     .wasm(contractWasm)
     .payment(Number.parseInt(config.transaction_payment, 10))
     .chainName(window.csprclick?.chainName!)
     .build();
-
-  return {
-    transaction: {
-      Version1: sessionTransaction.toJSON()
-    }
-  };
 };