Use @soroban-react/contracts library (#79)

* use docker image for soroban 0.3.3 * fix amounts to mint and deposit, swap order btyes * Clear dependencies in README * use useContractValue from @soroban-react/contracts * add yarn.lock * package-lock.json and yarn.lock to support both npm and yarn * use useSendTransaction from @soroban-react/contracts library * Delete yarn.lock * Code style * use @soroban-reactv3.2.1 and @soroban-react/[email protected] in order to support single asset * fix bug while merging * fix bug: add sorobanContext to useSendTransaction when Minting Co-authored-by: Marcos Oliva <[email protected]> Co-authored-by: Paul Bellamy <[email protected]> Co-authored-by: Paul Bellamy <[email protected]>
spotlight301 · Jan 10, 2023 · b5d628e · b5d628e
1 parent 08a51cd
commit b5d628e
Show file tree

Hide file tree

Showing 8 changed files with 3,985 additions and 351 deletions.
diff --git a/components/molecules/deposits/index.tsx b/components/molecules/deposits/index.tsx
@@ -8,9 +8,10 @@ import * as convert from '../../../convert'
 import { Constants } from '../../../shared/constants'
 import { accountIdentifier } from '../../../shared/identifiers'
 import {
-  ContractValue,
+  ContractValueType,
   useContractValue,
-} from '../../../wallet'
+} from '@soroban-react/contracts'
+import { useSorobanReact } from '@soroban-react/core'
 
 export interface IDepositsProps {
   address: string
@@ -21,14 +22,15 @@ export interface IDepositsProps {
 }
 
 export function Deposits(props: IDepositsProps) {
-  const useLoadDeposits = (): ContractValue => {
-    return useContractValue(
-      Constants.CrowdfundId,
-      'balance',
-      accountIdentifier(
+  const useLoadDeposits = (): ContractValueType => {
+    return useContractValue({
+      contractId: Constants.CrowdfundId,
+      method: 'balance',
+      params: [accountIdentifier(
         SorobanClient.StrKey.decodeEd25519PublicKey(props.address)
-      )
-    )
+      )],
+      sorobanContext: useSorobanReact()
+    })
   }
 
   let yourDepositsXdr = useLoadDeposits()

diff --git a/components/molecules/form-pledge/index.tsx b/components/molecules/form-pledge/index.tsx
@@ -2,10 +2,10 @@ import React, { FunctionComponent, useState } from 'react'
 import { AmountInput, Button, Checkbox } from '../../atoms'
 import { TransactionModal } from '../../molecules/transaction-modal'
 import styles from './style.module.css'
+import { useContractValue, useSendTransaction } from '@soroban-react/contracts'
+import { useSorobanReact } from '@soroban-react/core'
 import {
-  useContractValue,
   useNetwork,
-  useSendTransaction,
 } from '../../../wallet'
 import * as SorobanClient from 'soroban-client'
 import BigNumber from 'bignumber.js'
@@ -33,6 +33,7 @@ export interface IResultSubmit {
 }
 
 const FormPledge: FunctionComponent<IFormPledgeProps> = props => {
+
   const [amount, setAmount] = useState<number>()
   const [resultSubmit, setResultSubmit] = useState<IResultSubmit | undefined>()
   const [input, setInput] = useState('')
@@ -44,12 +45,13 @@ const FormPledge: FunctionComponent<IFormPledgeProps> = props => {
   )
 
   const spender = contractIdentifier(Buffer.from(props.crowdfundId, 'hex'))
-  const allowanceScval = useContractValue(
-    props.tokenId,
-    'allowance',
-    user,
-    spender
-  )
+  const sorobanContext = useSorobanReact()
+  const allowanceScval = useContractValue({
+    contractId: props.tokenId,
+    method: 'allowance',
+    params: [user, spender],
+    sorobanContext
+  })
   const allowance = convert.scvalToBigNumber(allowanceScval.result)
   const parsedAmount = BigNumber(amount || 0)
 
@@ -100,11 +102,12 @@ const FormPledge: FunctionComponent<IFormPledgeProps> = props => {
           nonce,
           spender,
           amountScVal
-        ))
+        ), {sorobanContext})
       }
 
       // Deposit the tokens
-      let result = await sendTransaction(contractTransaction(
+      let result = await sendTransaction(
+        contractTransaction(
           props.networkPassphrase,
           source,
           props.crowdfundId,
@@ -113,8 +116,9 @@ const FormPledge: FunctionComponent<IFormPledgeProps> = props => {
             SorobanClient.StrKey.decodeEd25519PublicKey(props.account)
           ),
           amountScVal
-        ))
-
+        ),
+        {sorobanContext}
+      )
       setResultSubmit({
         status: 'success',
         scVal: result,
@@ -235,7 +239,6 @@ const FormPledge: FunctionComponent<IFormPledgeProps> = props => {
     const networkPassphrase = activeChain?.networkPassphrase ?? ''
 
     const { sendTransaction } = useSendTransaction()
-
     const amount = BigNumber(100)
 
     return (
@@ -271,6 +274,7 @@ const FormPledge: FunctionComponent<IFormPledgeProps> = props => {
             b.asset_code == symbol && b.asset_issuer == Constants.TokenAdmin
           )).length === 0) {
             try {
+              console.log("sorobanContext: ", sorobanContext)
               const trustlineResult = await sendTransaction(
                 new SorobanClient.TransactionBuilder(walletSource, {
                   networkPassphrase,
@@ -286,7 +290,9 @@ const FormPledge: FunctionComponent<IFormPledgeProps> = props => {
                   timeout: 60 * 1000, // should be enough time to approve the tx
                   skipAddingFootprint: true, // classic = no footprint
                   // omit `secretKey` to have Freighter prompt for signing
-                }
+                  // hence, we need to explicit the sorobanContext
+                  sorobanContext
+                },
               )
               console.debug(trustlineResult)
             } catch (err) {
@@ -312,6 +318,7 @@ const FormPledge: FunctionComponent<IFormPledgeProps> = props => {
                 timeout: 10 * 1000,
                 skipAddingFootprint: true,
                 secretKey: Constants.TokenAdminSecretKey,
+                sorobanContext
               }
             )
             console.debug(paymentResult)

diff --git a/components/organisms/pledge/index.tsx b/components/organisms/pledge/index.tsx
@@ -4,11 +4,10 @@ import styles from './style.module.css'
 import { Spacer } from '../../atoms/spacer'
 import { Utils } from '../../../shared/utils'
 import {
-  ContractValue,
   useAccount,
-  useContractValue,
   useNetwork,
 } from '../../../wallet'
+import { ContractValueType, useContractValue } from '@soroban-react/contracts'
 import * as SorobanClient from 'soroban-client'
 import { Deposits, FormPledge } from '../../molecules'
 import * as convert from '../../../convert'
@@ -17,6 +16,7 @@ import {
   accountIdentifier,
   contractIdentifier,
 } from '../../../shared/identifiers'
+import { useSorobanReact } from '@soroban-react/core'
 let xdr = SorobanClient.xdr
 
 const Pledge: FunctionComponent = () => {
@@ -25,24 +25,55 @@ const Pledge: FunctionComponent = () => {
 
   const networkPassphrase = activeChain?.networkPassphrase ?? ''
 
+  const sorobanContext = useSorobanReact()
   // Call the contract rpcs to fetch values
   const useLoadToken = (): any => {
     return {
-      balance: useContractValue(
-        Constants.TokenId,
-        'balance',
-        contractIdentifier(Buffer.from(Constants.CrowdfundId, 'hex'))
-      ),
-      decimals: useContractValue(Constants.TokenId, 'decimals'),
-      name: useContractValue(Constants.TokenId, 'name'),
-      symbol: useContractValue(Constants.TokenId, 'symbol')
+      balance: useContractValue({ 
+        contractId: Constants.TokenId,
+        method: 'balance',
+        params: [contractIdentifier(Buffer.from(Constants.CrowdfundId, 'hex'))],
+        sorobanContext
+      }),
+
+      decimals: useContractValue({ 
+        contractId: Constants.TokenId,
+        method: 'decimals',
+        sorobanContext
+      }),
+
+      name: useContractValue({ 
+        contractId: Constants.TokenId,
+        method: 'name',
+        sorobanContext
+      }),
+
+      symbol: useContractValue({ 
+        contractId: Constants.TokenId,
+        method: 'symbol',
+        sorobanContext
+      }),
     }
   }
 
   let token = useLoadToken()
-  let deadline = useContractValue(Constants.CrowdfundId, 'deadline')
-  let started = useContractValue(Constants.CrowdfundId, 'started')
-  let targetAmountXdr = useContractValue(Constants.CrowdfundId, 'target')
+  let deadline = useContractValue({ 
+    contractId: Constants.CrowdfundId,
+    method: 'deadline',
+    sorobanContext
+  })
+
+  let started = useContractValue({ 
+    contractId: Constants.CrowdfundId,
+    method: 'started',
+    sorobanContext
+  })
+
+  let targetAmountXdr = useContractValue({ 
+    contractId: Constants.CrowdfundId,
+    method: 'target',
+    sorobanContext
+  })
 
   // Convert the result ScVals to js types
   const tokenBalance = convert.scvalToBigNumber(token.balance.result)