@huma-finance/widgets 0.0.6-alpha.0

package/src/cosmos/SDKTesting.fixture.tsx

@@ -0,0 +1,507 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable react/jsx-boolean-value */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useState } from 'react'
+import {
+  EAService,
+  useCreditRecordDetails,
+  useReceivableFactoringPoolContract,
+  mintReceivableWithMetadata,
+  queryForMetadata,
+} from '@huma-finance/sdk'
+import { POOL_NAME, POOL_TYPE } from '@huma-finance/shared'
+import { useAccount } from 'wagmi'
+import { ethers, getDefaultProvider } from 'ethers'
+import { Web3Provider } from '@ethersproject/providers'
+
+import { WalletWrapper } from './WalletWrapper'
+
+const TEST_PRIVATE_KEY =
+  '66667f446ba85d3e9e8fc0d0ce195e49089de15178ff7a42fe3e78ac3c3ad85c'
+
+function Fixture() {
+  const { address, connector } = useAccount()
+  const [chainId, setChainId] = useState(0)
+  const [signer, setSigner] = useState<Web3Provider | null>(null)
+
+  // useCreditRecordDetails
+  const [userAddress, setUserAddress] = useState('')
+  const [poolName, setPoolName] = useState<POOL_NAME>(POOL_NAME.RequestNetwork)
+  const [poolType, setPoolType] = useState<POOL_TYPE>(POOL_TYPE.Invoice)
+  const [creditRecordDetails, refreshCreditRecordDetails] =
+    useCreditRecordDetails(
+      userAddress,
+      getDefaultProvider(),
+      chainId,
+      poolName,
+      poolType,
+    )
+
+  // mintReceivableWithMetadata
+  const [recipientAddress, setRecipientAddress] = useState(address)
+  const [receivableAmount, setReceivableAmount] = useState(100)
+  const [maturityDate, setMaturityDate] = useState(Date.now())
+  const [paymentMethod, setPaymentMethod] = useState(0)
+  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 [mintResult, setMintResult] = useState<any>('')
+
+  // useReceivableFactoringPoolContract
+  const poolContract = useReceivableFactoringPoolContract(
+    signer!,
+    chainId,
+    POOL_NAME.RequestNetwork,
+  )
+
+  // EAService.approve
+  const [borrowerAddress, setBorrowerAddress] = useState('')
+  const [receivableAddress, setReceivableAddress] = useState(
+    '0xC2AC172a293d68f548ea343414584aA37eb29Dcd',
+  )
+  const [receivableParam, setReceivableParam] = useState('')
+  const [approveResult, setApproveResult] = useState<any>('')
+
+  const [queryResult, setQueryResult] = useState<any>('')
+
+  useEffect(() => {
+    ;(async () => {
+      if (address && connector && window.ethereum) {
+        setChainId(await connector.getChainId())
+        setRecipientAddress(address)
+        const tmp = new ethers.providers.Web3Provider(window.ethereum)
+        setSigner(tmp)
+      }
+    })()
+  }, [address, connector])
+
+  const handleRefreshCreditRecordDetailsSubmit = (event: any) => {
+    event.preventDefault()
+    refreshCreditRecordDetails()
+  }
+
+  const handleEAApproveSubmit = async (event: any) => {
+    event.preventDefault()
+    try {
+      const data = await EAService.approve(
+        {
+          poolAddress: poolContract!.address,
+          borrowerWalletAddress: borrowerAddress,
+          receivableAddress,
+          receivableParam,
+        },
+        5,
+      )
+      setApproveResult('Success')
+      console.log(data)
+    } catch (error) {
+      setApproveResult('Failed')
+      console.log(error)
+    }
+  }
+
+  const handleMintReceivableWithMetadataSubmit = async (event: any) => {
+    event.preventDefault()
+
+    if (signer === null) return
+
+    try {
+      const data = await mintReceivableWithMetadata(
+        signer,
+        TEST_PRIVATE_KEY,
+        chainId,
+        address!,
+        poolName,
+        poolType,
+        receivableAmount,
+        maturityDate,
+        paymentMethod,
+        JSON.parse(metadata),
+        internalID,
+        [],
+      )
+      setMintResult(`Success, Tx Hash: ${data.transactionHash}`)
+      console.log(data)
+    } catch (error) {
+      setMintResult(`Failed, check console for errors`)
+      console.log(error)
+    }
+  }
+
+  const queryARWeaveSubmit = async (event: any) => {
+    event.preventDefault()
+
+    if (address == null) return
+
+    try {
+      const data = await queryForMetadata(
+        chainId,
+        poolName,
+        poolType,
+        address,
+        internalID,
+      )
+      setQueryResult(data)
+      console.log(data)
+    } catch (error) {
+      setQueryResult(`Failed, check console for errors`)
+      console.log(error)
+    }
+  }
+
+  return (
+    <div
+      style={{
+        fontFamily: 'Helvetica',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '15px',
+      }}
+    >
+      <div
+        style={{
+          border: '1px solid gray',
+          padding: '0px 10px 20px 10px',
+          borderRadius: '10px',
+        }}
+      >
+        <h3>Test useCreditRecordDetails</h3>
+        <form
+          onSubmit={handleRefreshCreditRecordDetailsSubmit}
+          style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}
+        >
+          <label>
+            Network: <input disabled type='text' defaultValue='Goerli' />
+          </label>
+          <br />
+          <label>
+            User Address:
+            <input
+              type='text'
+              value={userAddress}
+              onChange={(event: any) => {
+                setUserAddress(event.target.value)
+              }}
+            />
+          </label>
+          <br />
+          <label>
+            Pool Name:
+            <select
+              name='pool_name'
+              value={poolName}
+              onChange={(event: any) => {
+                setPoolName(event.target.value)
+              }}
+            >
+              <option value='RequestNetwork'>RequestNetwork</option>
+              <option value='HumaCreditLine'>HumaCreditLine</option>
+              <option value='Superfluid'>Superfluid</option>
+              <option value='Jia'>Jia</option>
+            </select>
+          </label>
+          <br />
+          <label>
+            Pool Type:
+            <select
+              name='pool_type'
+              value={poolType}
+              onChange={(event: any) => {
+                setPoolType(event.target.value)
+              }}
+            >
+              <option value='Invoice'>Invoice</option>
+              <option value='CreditLine'>CreditLine</option>
+              <option value='Stream'>Stream</option>
+            </select>
+          </label>
+          <br />
+          <button type='submit' style={{ width: 'fit-content' }}>
+            Get Credit Record Details
+          </button>
+        </form>
+        {creditRecordDetails && (
+          <div>
+            <h2>Credit Record Details:</h2>
+            <ul>aprInBps: {creditRecordDetails.aprInBps}</ul>
+            <ul>correction: {creditRecordDetails.correction.toString()}</ul>
+            <ul>creditLimit: {creditRecordDetails.creditLimit.toString()}</ul>
+            <ul>
+              defaultAmount: {creditRecordDetails.defaultAmount.toString()}
+            </ul>
+            <ul>dueDate: {creditRecordDetails.dueDate.toString()}</ul>
+            <ul>
+              feesAndInterestDue:{' '}
+              {creditRecordDetails.feesAndInterestDue.toString()}
+            </ul>
+            <ul>intervalInDays: {creditRecordDetails.intervalInDays}</ul>
+            <ul>missedPeriods: {creditRecordDetails.missedPeriods}</ul>
+            <ul>remainingPeriods: {creditRecordDetails.remainingPeriods}</ul>
+            <ul>state: {creditRecordDetails.state}</ul>
+            <ul>totalDue: {creditRecordDetails.totalDue.toString()}</ul>
+            <ul>
+              unbilledPrincipal:{' '}
+              {creditRecordDetails.unbilledPrincipal.toString()}
+            </ul>
+          </div>
+        )}
+      </div>
+      <div
+        style={{
+          border: '1px solid gray',
+          padding: '0px 10px 20px 10px',
+          borderRadius: '10px',
+        }}
+      >
+        <h3>Test useReceivableFactoringPoolContract</h3>
+        {poolContract?.address}
+      </div>
+      <div
+        style={{
+          border: '1px solid gray',
+          padding: '0px 10px 20px 10px',
+          borderRadius: '10px',
+        }}
+      >
+        <form
+          onSubmit={handleEAApproveSubmit}
+          style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}
+        >
+          <h3>Test EAService.approve</h3>
+          <label>
+            Borrower Address:
+            <input
+              type='text'
+              value={borrowerAddress}
+              onChange={(event: any) => {
+                setBorrowerAddress(event.target.value)
+              }}
+            />
+          </label>
+          <br />
+          <label>
+            Receivable Address:
+            <input
+              type='text'
+              value={receivableAddress}
+              onChange={(event: any) => {
+                setReceivableAddress(event.target.value)
+              }}
+            />
+          </label>
+          <br />
+          <label>
+            Receivable Parameter (Token ID):
+            <input
+              type='text'
+              value={receivableParam}
+              onChange={(event: any) => {
+                setReceivableParam(event.target.value)
+              }}
+            />
+          </label>
+          <br />
+          <button type='submit' style={{ width: 'fit-content' }}>
+            Get Credit Record Details
+          </button>
+        </form>
+        {approveResult}
+      </div>
+      <div
+        style={{
+          border: '1px solid gray',
+          padding: '0px 10px 20px 10px',
+          borderRadius: '10px',
+        }}
+      >
+        <form
+          onSubmit={handleMintReceivableWithMetadataSubmit}
+          style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}
+        >
+          <h3>Test mintReceivableWithMetadata</h3>
+          <label>
+            Recipient Address:
+            <input
+              type='text'
+              value={recipientAddress}
+              onChange={(event: any) => {
+                setRecipientAddress(event.target.value)
+              }}
+            />
+          </label>
+          <br />
+          <label>
+            Pool Name:
+            <select
+              name='pool_name'
+              value={poolName}
+              onChange={(event: any) => {
+                setPoolName(event.target.value)
+              }}
+            >
+              <option value='RequestNetwork'>RequestNetwork</option>
+              <option value='HumaCreditLine'>HumaCreditLine</option>
+              <option value='Superfluid'>Superfluid</option>
+              <option value='Jia'>Jia</option>
+            </select>
+          </label>
+          <br />
+          <label>
+            Pool Type:
+            <select
+              name='pool_type'
+              value={poolType}
+              onChange={(event: any) => {
+                setPoolType(event.target.value)
+              }}
+            >
+              <option value='Invoice'>Invoice</option>
+              <option value='CreditLine'>CreditLine</option>
+              <option value='Stream'>Stream</option>
+            </select>
+          </label>
+          <br />
+          <label>
+            Receivable Amount:
+            <input
+              type='text'
+              value={receivableAmount}
+              onChange={(event: any) => {
+                setReceivableAmount(event.target.value)
+              }}
+            />
+          </label>
+          <label>
+            Maturity Date:
+            <input
+              type='text'
+              value={maturityDate}
+              onChange={(event: any) => {
+                setMaturityDate(event.target.value)
+              }}
+            />
+          </label>
+          <br />
+          <label>
+            Payment Method:
+            <select
+              name='payment_method'
+              value={paymentMethod}
+              onChange={(event: any) => {
+                setPaymentMethod(event.target.value)
+              }}
+            >
+              <option value='0'>Declarative</option>
+              <option value='1'>Payable</option>
+            </select>
+          </label>
+          <br />
+          <label>
+            Metadata:
+            <input
+              type='text'
+              value={metadata}
+              onChange={(event: any) => {
+                setMetadata(event.target.value)
+              }}
+            />
+          </label>
+          <br />
+          <label>
+            Internal ID (For querying through ARWeave):
+            <input
+              type='text'
+              value={internalID}
+              onChange={(event: any) => {
+                setInternalID(event.target.value)
+              }}
+            />
+          </label>
+          <button type='submit' style={{ width: 'fit-content' }}>
+            Mint Receivable With Metadata
+          </button>
+          <br />
+          {mintResult}
+        </form>
+        {approveResult}
+      </div>
+      <div
+        style={{
+          border: '1px solid gray',
+          padding: '0px 10px 20px 10px',
+          borderRadius: '10px',
+        }}
+      >
+        <h3>Test queryForMetadata</h3>
+        <form
+          onSubmit={queryARWeaveSubmit}
+          style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}
+        >
+          <label>
+            Transaction sender:
+            <input type='text' value={address} disabled />
+          </label>
+          <br />
+          <label>
+            Pool Name:
+            <select
+              name='pool_name'
+              value={poolName}
+              onChange={(event: any) => {
+                setPoolName(event.target.value)
+              }}
+            >
+              <option value='RequestNetwork'>RequestNetwork</option>
+              <option value='HumaCreditLine'>HumaCreditLine</option>
+              <option value='Superfluid'>Superfluid</option>
+              <option value='Jia'>Jia</option>
+            </select>
+          </label>
+          <br />
+          <label>
+            Pool Type:
+            <select
+              name='pool_type'
+              value={poolType}
+              onChange={(event: any) => {
+                setPoolType(event.target.value)
+              }}
+            >
+              <option value='Invoice'>Invoice</option>
+              <option value='CreditLine'>CreditLine</option>
+              <option value='Stream'>Stream</option>
+            </select>
+          </label>
+          <label>
+            Internal ID (For querying through ARWeave):
+            <input
+              type='text'
+              value={internalID}
+              onChange={(event: any) => {
+                setInternalID(event.target.value)
+              }}
+            />
+          </label>
+          <br />
+          <button type='submit' style={{ width: 'fit-content' }}>
+            Query Metadata
+          </button>
+          <br />
+          <a
+            href={`https://arweave.net/${queryResult}`}
+            target='_blank'
+            rel='noreferrer'
+          >
+            {queryResult}
+          </a>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export default (
+  <WalletWrapper>
+    <Fixture />
+  </WalletWrapper>
+)

package/src/cosmos/SuperfluidFactoringBorrow.fixture.tsx

@@ -0,0 +1,12 @@
+import { SuperfluidFactoringWidget } from '..'
+import { WalletWrapper } from './WalletWrapper'
+
+function Fixture() {
+  return <SuperfluidFactoringWidget />
+}
+
+export default (
+  <WalletWrapper>
+    <Fixture />
+  </WalletWrapper>
+)

package/src/cosmos/WalletWrapper.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { Button } from '@mui/material'
+import { getDefaultClient } from 'connectkit'
+import {
+  createClient,
+  goerli,
+  useAccount,
+  useConnect,
+  useDisconnect,
+  WagmiConfig,
+} from 'wagmi'
+import { InjectedConnector } from 'wagmi/connectors/injected'
+
+const client = createClient(
+  getDefaultClient({
+    autoConnect: true,
+    appName: 'huma widget',
+    chains: [goerli],
+  }),
+)
+
+export function WalletWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <WagmiConfig client={client}>
+      <Profile />
+      {children}
+    </WagmiConfig>
+  )
+}
+
+function Profile() {
+  const { address, isConnected } = useAccount()
+  const { connect } = useConnect({
+    connector: new InjectedConnector(),
+  })
+  const { disconnect } = useDisconnect()
+
+  if (isConnected)
+    return (
+      <div>
+        Account: {address}
+        <Button variant='contained' onClick={() => disconnect()}>
+          Disconnect
+        </Button>
+      </div>
+    )
+  return (
+    <Button variant='contained' onClick={() => connect()}>
+      Connect Wallet
+    </Button>
+  )
+}