@huma-finance/widgets 0.0.11 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "publishConfig": {
     "access": "public"
   },
@@ -30,8 +30,8 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.11",
-    "@huma-finance/shared": "^0.0.11",
+    "@huma-finance/sdk": "^0.0.12",
+    "@huma-finance/shared": "^0.0.12",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -191,5 +191,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "12afb4430fa58ad8403bde9aadb52c7ddb1f048c"
+  "gitHead": "475917ee813766459198232d0cdf8b6e671b9e7d"
 }

package/src/components/ChooseAmountModal.tsx

@@ -10,7 +10,7 @@ import {
   useTheme,
 } from '@mui/material'
 import { useMQ } from '@huma-finance/shared'
-import React from 'react'
+import React, { useState } from 'react'
 
 import { IconType } from '../utilTypes'
 import { WrapperModal } from './WrapperModal'
@@ -56,6 +56,7 @@ export function ChooseAmountModal({
 }: Props): React.ReactElement {
   const theme = useTheme()
   const { isXsSize } = useMQ()
+  const [inputTouched, setInputTouched] = useState(false)
 
   const styles = {
     subTitle: css`
@@ -187,6 +188,7 @@ export function ChooseAmountModal({
   const handleInputChange = (
     event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
   ) => {
+    setInputTouched(true)
     // @ts-ignore
     handleChangeAmount(event.target.value)
   }
@@ -254,7 +256,7 @@ export function ChooseAmountModal({
             </Box>
           </Box>
           <Slider
-            max={sliderMax}
+            max={Number(sliderMax)}
             min={0}
             css={styles.slider}
             aria-label='Amount'
@@ -269,8 +271,9 @@ export function ChooseAmountModal({
             <Input
               css={styles.inputField}
               type='number'
-              value={currentAmount}
+              value={!inputTouched && currentAmount === 0 ? '' : currentAmount}
               onChange={handleInputChange}
+              placeholder='0'
             />
             <Button
               variant='contained'
@@ -301,7 +304,11 @@ export function ChooseAmountModal({
         variant='contained'
         css={styles.okButton}
         onClick={handleAction}
-        disabled={currentAmount === 0 || currentAmount > sliderMax}
+        disabled={
+          !currentAmount ||
+          Number(currentAmount) <= 0 ||
+          Number(currentAmount) > Number(sliderMax)
+        }
       >
         {actionText.toUpperCase()}
       </Button>

package/src/components/CreditLine/borrow/3-ChooseAmount.tsx

@@ -1,10 +1,8 @@
-import { useWeb3React } from '@web3-react/core'
 import {
   AccountStats,
   PoolInfoType,
   upScale,
   useCLFeeManager,
-  useCLPoolAllowance,
 } from '@huma-finance/shared'
 import React, { useCallback, useState } from 'react'
 
@@ -23,10 +21,8 @@ export function ChooseAmount({
   accountStats,
 }: Props): React.ReactElement | null {
   const dispatch = useAppDispatch()
-  const { account } = useWeb3React()
   const { poolUnderlyingToken } = poolInfo
   const { symbol, decimals } = poolUnderlyingToken
-  const { approved } = useCLPoolAllowance(poolInfo.poolName, account)
   const { getFeesCharged } = useCLFeeManager(poolInfo.poolName)
   const [chargedFees, setChargedFees] = useState(0)
   const [currentAmount, setCurrentAmount] = useState(0)
@@ -42,9 +38,7 @@ export function ChooseAmount({
   )
 
   const handleAction = useCallback(() => {
-    const nextStep = approved
-      ? WIDGET_STEP.Transfer
-      : WIDGET_STEP.ApproveAllowance
+    const nextStep = WIDGET_STEP.Transfer
     dispatch(
       setBorrowInfo({
         borrowAmount: currentAmount,
@@ -53,7 +47,7 @@ export function ChooseAmount({
         nextStep,
       }),
     )
-  }, [approved, chargedFees, currentAmount, decimals, dispatch])
+  }, [chargedFees, currentAmount, decimals, dispatch])
 
   return (
     <ChooseAmountModal

package/src/components/CreditLine/borrow/{5-Transfer.tsx → 4-Transfer.tsx}

@@ -1,6 +1,13 @@
-import { PoolInfoType } from '@huma-finance/shared'
+import {
+  PoolInfoType,
+  toBigNumber,
+  txAtom,
+  useCLPoolAllowance,
+} from '@huma-finance/shared'
 import React, { useCallback } from 'react'
 
+import { useResetAtom } from 'jotai/utils'
+import { useWeb3React } from '@web3-react/core'
 import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
 import { setStep } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
@@ -13,11 +20,18 @@ type Props = {
 
 export function Transfer({ poolInfo }: Props): React.ReactElement {
   const dispatch = useAppDispatch()
+  const reset = useResetAtom(txAtom)
+  const { account } = useWeb3React()
   const { borrowAmountBN } = useAppSelector(selectWidgetState)
+  const { allowance } = useCLPoolAllowance(poolInfo.poolName, account)
 
   const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Done))
-  }, [dispatch])
+    reset()
+    const nextStep = allowance.gte(toBigNumber(borrowAmountBN!))
+      ? WIDGET_STEP.Done
+      : WIDGET_STEP.ApproveAllowance
+    dispatch(setStep(nextStep))
+  }, [allowance, borrowAmountBN, dispatch, reset])
 
   return (
     <TxSendModal

package/src/components/CreditLine/borrow/{4-ApproveAllowance.tsx → 5-ApproveAllowance.tsx}

@@ -16,7 +16,7 @@ export function ApproveAllowance({
   const dispatch = useAppDispatch()
 
   const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Transfer))
+    dispatch(setStep(WIDGET_STEP.Done))
   }, [dispatch])
 
   return (

package/src/components/CreditLine/borrow/index.tsx

@@ -18,8 +18,8 @@ import { WidgetWrapper } from '../../WidgetWrapper'
 import { Evaluation } from './1-Evaluation'
 import { AllowList } from './2-AllowList'
 import { ChooseAmount } from './3-ChooseAmount'
-import { ApproveAllowance } from './4-ApproveAllowance'
-import { Transfer } from './5-Transfer'
+import { ApproveAllowance } from './5-ApproveAllowance'
+import { Transfer } from './4-Transfer'
 import { Success } from './6-Success'
 
 /**

package/src/cosmos/SDKTesting.fixture.tsx

@@ -24,17 +24,10 @@ function Fixture() {
   const [chainId, setChainId] = useState(0)
   const [signer, setSigner] = useState<Web3Provider | null>(null)
 
-  if (TEST_PRIVATE_KEY === 'REPLACE_WITH_YOUR_PRIVATE_KEY') {
-    console.error('Please replace TEST_PRIVATE_KEY with your own private key')
-  }
-  if (INFURA_PROVIDER_KEY === 'REPLACE_WITH_YOUR_INFURA_PROVIDER_KEY') {
-    console.error('Please replace INFURA_PROVIDER_KEY with your own key')
-  }
-
   // useCreditRecordDetails
   const [userAddress, setUserAddress] = useState('')
-  const [poolName, setPoolName] = useState<POOL_NAME>(POOL_NAME.RequestNetwork)
-  const [poolType, setPoolType] = useState<POOL_TYPE>(POOL_TYPE.Invoice)
+  const [poolName, setPoolName] = useState<POOL_NAME>(POOL_NAME.HumaCreditLine)
+  const [poolType, setPoolType] = useState<POOL_TYPE>(POOL_TYPE.CreditLine)
   const provider = new JsonRpcProvider(
     `https://goerli.infura.io/v3/${INFURA_PROVIDER_KEY}`,
     {
@@ -51,15 +44,15 @@ function Fixture() {
   const [maturityDate, setMaturityDate] = useState(Date.now())
   const [metadata, setMetadata] = useState(JSON.stringify({ exampleKey: 1 }))
   // Used to set an example tag on the metadata uploaded to ARweave which we can use to query by later
-  const [internalID, setInternalID] = useState('3')
+  const [referenceId, setReferenceId] = useState('3')
   const [mintResult, setMintResult] = useState<any>('')
 
   // usePoolContract
   const poolContract = usePoolContract(
     signer!,
     chainId,
-    POOL_NAME.RequestNetwork,
-    POOL_TYPE.Invoice,
+    POOL_NAME.HumaCreditLine,
+    POOL_TYPE.CreditLine,
   )
 
   // EAService.approve
@@ -125,7 +118,7 @@ function Fixture() {
         receivableAmount,
         maturityDate,
         JSON.parse(metadata),
-        internalID,
+        referenceId,
         [],
       )
       const txResult = await data.wait()
@@ -145,10 +138,8 @@ function Fixture() {
     try {
       const data = await ARWeaveService.queryForMetadata(
         chainId,
-        poolName,
-        poolType,
         address,
-        internalID,
+        referenceId,
       )
       setQueryResult(data)
       console.log(data)
@@ -177,6 +168,27 @@ function Fixture() {
     }
   }
 
+  const [paymentAmount, setPaymentAmount] = useState<number>(0)
+  const [paymentResult, setPaymentResult] = useState<string>('')
+  const declarePaymentSubmit = async (event: any) => {
+    event.preventDefault()
+
+    try {
+      const data =
+        await ReceivableService.declareReceivablePaymentByReferenceId(
+          signer?.getSigner()!,
+          referenceId,
+          paymentAmount,
+        )
+      const txResult = await data.wait()
+      setPaymentResult(`Success, Tx Hash: ${txResult.transactionHash}`)
+      console.log(data)
+    } catch (error) {
+      setPaymentResult(`Failed, check console for errors`)
+      console.log(error)
+    }
+  }
+
   return (
     <div
       style={{
@@ -427,9 +439,9 @@ function Fixture() {
             Reference ID (For querying through ARWeave):
             <input
               type='text'
-              value={internalID}
+              value={referenceId}
               onChange={(event: any) => {
-                setInternalID(event.target.value)
+                setReferenceId(event.target.value)
               }}
             />
           </label>
@@ -492,9 +504,9 @@ function Fixture() {
             Reference ID (For querying through ARWeave):
             <input
               type='text'
-              value={internalID}
+              value={referenceId}
               onChange={(event: any) => {
-                setInternalID(event.target.value)
+                setReferenceId(event.target.value)
               }}
             />
           </label>
@@ -519,7 +531,53 @@ function Fixture() {
           borderRadius: '10px',
         }}
       >
-        <h3>Example 5. Prefund ARWeave</h3>
+        <h3>Example 5. Declare payment for Receivable by reference ID</h3>
+        <form
+          onSubmit={declarePaymentSubmit}
+          style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}
+        >
+          <label>
+            Transaction sender:
+            <input type='text' value={address} disabled />
+          </label>
+          <br />
+          <label>
+            Reference ID (For querying through ARWeave):
+            <input
+              type='text'
+              value={referenceId}
+              onChange={(event: any) => {
+                setReferenceId(event.target.value)
+              }}
+            />
+          </label>
+          <br />
+          <label>
+            Payment Amount:
+            <input
+              type='text'
+              value={paymentAmount}
+              onChange={(event: any) => {
+                setPaymentAmount(event.target.value)
+              }}
+            />
+          </label>
+          <br />
+          <button type='submit' style={{ width: 'fit-content' }}>
+            Declare Payment
+          </button>
+          <br />
+          {paymentResult}
+        </form>
+      </div>
+      <div
+        style={{
+          border: '1px solid gray',
+          padding: '0px 10px 20px 10px',
+          borderRadius: '10px',
+        }}
+      >
+        <h3>Example 6. Prefund ARWeave</h3>
         <form
           onSubmit={prefundARWeaveSubmit}
           style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}