contract events for ui updates to pledge display

.gitignore

@@ -39,3 +39,6 @@ yarn-error.log*
 # Rust contract build
 /target
 /target-tiny
+
+*.sublime-project
+*.sublime-workspace

Cargo.toml

@@ -15,29 +15,11 @@ panic = "abort"
 codegen-units = 1
 lto = true
 
-[workspace.dependencies.soroban-env-common]
-version = "0.0.15"
-
-[workspace.dependencies.soroban-env-guest]
-version = "0.0.15"
-
-[workspace.dependencies.soroban-env-macros]
-version = "0.0.15"
-
-[workspace.dependencies.soroban-env-host]
-version = "0.0.15"
-
-[workspace.dependencies.soroban-native-sdk-macros]
-version = "0.0.15"
-
-[workspace.dependencies.soroban-spec]
-version = "0.7.0"
-
 [workspace.dependencies.soroban-sdk]
 version = "0.7.0"
+git = "https://github.com/stellar/rs-soroban-sdk"
+rev = "29b505cf95f2fd4fbe639fdb163b606c44920837"
+
+
 
-[workspace.dependencies.soroban-sdk-macros]
-version = "0.7.0"
 
-[workspace.dependencies.stellar-xdr]
-version = "0.0.15"

Makefile

@@ -1,22 +1,23 @@
 all: check build test
 
 export RUSTFLAGS=-Dwarnings -Dclippy::all -Dclippy::pedantic
+CARGO_BUILD_TARGET?=wasm32-unknown-unknown
 
 test: fmt
 	cargo test
 
 build: fmt
-	cargo build --target wasm32-unknown-unknown --release
-	cd target/wasm32-unknown-unknown/release/ && \
+	cargo build --target $(CARGO_BUILD_TARGET) --no-default-features --release
+	cd target/$(CARGO_BUILD_TARGET)/release/ && \
 		for i in *.wasm ; do \
 			ls -l "$$i"; \
 		done
 
 build-optimized: fmt
-	CARGO_TARGET_DIR=target-tiny cargo +nightly build --target wasm32-unknown-unknown --release \
+	CARGO_TARGET_DIR=target-tiny cargo +nightly build --target $(CARGO_BUILD_TARGET) --release \
 		-Z build-std=std,panic_abort \
 		-Z build-std-features=panic_immediate_abort
-	cd target-tiny/wasm32-unknown-unknown/release/ && \
+	cd target-tiny/$(CARGO_BUILD_TARGET)/release/ && \
 		for i in *.wasm ; do \
 			wasm-opt -Oz "$$i" -o "$$i.tmp" && mv "$$i.tmp" "$$i"; \
 			ls -l "$$i"; \
@@ -27,7 +28,7 @@ build-docker:
 
 check: fmt
 	cargo clippy --all-targets
-	cargo clippy --release --target wasm32-unknown-unknown
+	cargo clippy --release --target $(CARGO_BUILD_TARGET)
 
 watch:
 	cargo watch --clear --watch-when-idle --shell '$(MAKE)'

README.md

@@ -124,6 +124,5 @@ the user's freighter wallet, as well as some React hooks to talk to a
 soroban-rpc server (e.g. `soroban-cli serve`), to fetch data and send
 transactions.
 
-Data from contracts is fetched using the `useContractValue` hook in
-`./wallet/hooks/useContractValue.tsx`. Transactions are submitted to the network
-using the `useSendTransactions` hook in `./wallet/hooks/useSendTransaction.tsx`.
+Data from contracts is fetched using the `useContractValue` hook from @soroban-react/contracts. Transactions are submitted to the network
+using the `useSendTransaction` from @soroban-react/contracts.

components/ProviderExample.tsx

@@ -1,20 +1,22 @@
 import React from 'react'
 import {SorobanReactProvider} from '@soroban-react/core';
+import {SorobanEventsProvider} from '@soroban-react/events';
 import {futurenet, sandbox, standalone} from '@soroban-react/chains';
 import {freighter} from '@soroban-react/freighter';
 import {ChainMetadata, Connector} from "@soroban-react/types";
 
 const chains: ChainMetadata[] = [sandbox, standalone, futurenet];
-const connectors: Connector[] = [freighter()]
-
-
+const connectors: Connector[] = [freighter()];
+
   export default function ProviderExample({children}:{children: React.ReactNode}) {
     return (
       <SorobanReactProvider
         chains={chains}
         appName={"Example Stellar App"}
         connectors={connectors}>
+          <SorobanEventsProvider>
           {children}
+        </SorobanEventsProvider>
       </SorobanReactProvider>
     )
   }

components/molecules/deposits/index.tsx

@@ -22,7 +22,7 @@ export interface IDepositsProps {
 export function Deposits(props: IDepositsProps) {
   const useLoadDeposits = (): ContractValueType => {
     return useContractValue({
-      contractId: Constants.CrowdfundId,
+      contractId: props.idCrowdfund,
       method: 'balance',
       params: [new SorobanClient.Address(props.address).toScVal()],
       sorobanContext: useSorobanReact()

components/organisms/pledge/index.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react'
+import React, { FunctionComponent, useState, useRef } from 'react'
 import { Card, ConnectButton, Loading, ProgressBar } from '../../atoms'
 import styles from './style.module.css'
 import { Spacer } from '../../atoms/spacer'
@@ -7,17 +7,20 @@ import {
   useAccount,
   useNetwork,
 } from '../../../wallet'
+import BigNumber from 'bignumber.js'
 import { useContractValue } from '@soroban-react/contracts'
 import * as SorobanClient from 'soroban-client'
 import { Deposits, FormPledge } from '../../molecules'
 import * as convert from '../../../convert'
 import { Constants } from '../../../shared/constants'
 import { useSorobanReact } from '@soroban-react/core'
+import { useSorobanEvents, EventSubscription } from '@soroban-react/events'
 let xdr = SorobanClient.xdr
 
 const Pledge: FunctionComponent = () => {
   const { data: account } = useAccount()
   const { activeChain } = useNetwork()
+  const sorobanEventsContext = useSorobanEvents()
 
   const networkPassphrase = activeChain?.networkPassphrase ?? ''
 
@@ -64,9 +67,8 @@ const Pledge: FunctionComponent = () => {
     method: 'target',
     sorobanContext
   })
-
+ 
   // Convert the result ScVals to js types
-  const tokenBalance = convert.scvalToBigNumber(token.balance.result)
   const tokenDecimals =
     token.decimals.result && (token.decimals.result?.u32() ?? 7)
   const tokenName =
@@ -82,7 +84,20 @@ const Pledge: FunctionComponent = () => {
       ) * 1000
     )
   const targetAmount = convert.scvalToBigNumber(targetAmountXdr.result)
-
+
+  // hook or event go through same state to update ui
+  const [tokenBalance, setTokenBalance] = useState<BigNumber>(BigNumber(0))
+  const [targetReached, setTargetReached] = useState<boolean>(false)
+
+  React.useEffect(() => {
+    // hook is providing data, let it update the ui model, 
+    // events will update these later also
+    const tokenBalance = convert.scvalToBigNumber(token.balance.result)
+    const targetAmount = convert.scvalToBigNumber(targetAmountXdr.result)
+    setTokenBalance(tokenBalance)
+    setTargetReached(tokenBalance.gte(targetAmount))
+  }, [token.balance, targetAmountXdr]);
+
   const isLoading = (): boolean | undefined => {
     return (
       token.balance.loading ||
@@ -93,12 +108,42 @@ const Pledge: FunctionComponent = () => {
     )
   }
 
+  const crowdfundPledgedEventSubscription: EventSubscription = useRef({
+      contractId: Constants.CrowdfundId, 
+      topics: ['pledged_amount_changed'], 
+      cb: (event: SorobanClient.SorobanRpc.EventResponse): void => {
+        let eventTokenBalance = xdr.ScVal.fromXDR(Buffer.from(event.value.xdr, 'base64'))
+        setTokenBalance(convert.scvalToBigNumber(eventTokenBalance))
+      }, 
+      id: Math.random()});
+
+  const crowdfundTargetReachedSubscription: EventSubscription = useRef({
+      contractId: Constants.CrowdfundId, 
+      topics: ['target_reached'], 
+      cb: (event: SorobanClient.SorobanRpc.EventResponse): void => {
+        setTargetReached(true)
+      }, 
+      id: Math.random()});
+
+  React.useEffect(() => {
+    const pledgedSubId = sorobanEventsContext.subscribe(crowdfundPledgedEventSubscription)
+    const reachedSubId = sorobanEventsContext.subscribe(crowdfundTargetReachedSubscription)
+
+    return () => {
+      sorobanEventsContext.unsubscribe(pledgedSubId);
+      sorobanEventsContext.unsubscribe(reachedSubId);
+    }
+  }, [sorobanEventsContext]);
+
   return (
     <Card>
       {isLoading() ? (
         <Loading size={64} />
       ) : (
         <>
+          {targetReached && (
+            <h6>SUCCESSFUL CAMPAIGN !!</h6>
+          )}
           <h6>PLEDGED</h6>
           <div className={styles.pledgeAmount}>
             {Utils.formatAmount(tokenBalance, tokenDecimals)} {tokenSymbol}