@huma-finance/widgets 0.0.6-alpha.0

package/src/cosmos/CreditLineBorrow.fixture.tsx

@@ -0,0 +1,85 @@
+/* eslint-disable react/jsx-boolean-value */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Box, Button } from '@mui/material'
+import { ethers } from 'ethers'
+import { useEffect, useState } from 'react'
+
+import { useAccount } from 'wagmi'
+import { CreditLineBorrowWidget } from '..'
+import { getInjectedMetamask } from './utils'
+import { WalletWrapper } from './WalletWrapper'
+
+function Fixture() {
+  const [showModal, setShowModal] = useState(false)
+  const [showModalRandom, setShowModalRandom] = useState(false)
+  const [testPrivateKeyRandom, setTestPrivateKeyRandom] = useState<string>()
+  const [testAccountRandom, setTestAccountRandom] = useState<string>()
+  const { isConnected } = useAccount()
+  const PoolAddress = '0xA22D20FB0c9980fb96A9B0B5679C061aeAf5dDE4'
+
+  useEffect(() => {
+    const wallet = ethers.Wallet.createRandom()
+    setTestPrivateKeyRandom(wallet.privateKey)
+    setTestAccountRandom(wallet.address)
+  }, [])
+
+  const handleBorrow = () => {
+    setShowModal(true)
+  }
+
+  const handleBorrowRandom = () => {
+    // @ts-ignore
+    window.ethereum = getInjectedMetamask(testPrivateKeyRandom)
+    setShowModalRandom(true)
+  }
+
+  const handleApprove = () => {}
+
+  const handleClose = () => {
+    setShowModal(false)
+    setShowModalRandom(false)
+    window.ethereum = undefined
+  }
+
+  return (
+    <>
+      <Box>Pool: {PoolAddress}</Box>
+      <Box>Pool Name: HumaCreditLine</Box>
+      <Button
+        variant='contained'
+        onClick={handleBorrow}
+        disabled={!isConnected}
+      >
+        Borrow Without EA Check
+      </Button>
+      {showModal && (
+        <CreditLineBorrowWidget
+          poolName='HumaCreditLine'
+          poolType='CreditLine'
+          handleClose={handleClose}
+          handleApprove={handleApprove}
+        />
+      )}
+      <Box marginTop={5}>Account: {testAccountRandom}</Box>
+      <Box>Pool: {PoolAddress}</Box>
+      <Box>Pool Name: HumaCreditLine</Box>
+      <Button variant='contained' onClick={handleBorrowRandom}>
+        Borrow With EA Check
+      </Button>
+      {showModalRandom && (
+        <CreditLineBorrowWidget
+          poolName='HumaCreditLine'
+          poolType='CreditLine'
+          handleClose={handleClose}
+          handleApprove={handleApprove}
+        />
+      )}
+    </>
+  )
+}
+
+export default (
+  <WalletWrapper>
+    <Fixture />
+  </WalletWrapper>
+)

package/src/cosmos/CreditLinePayment.fixture.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable react/jsx-boolean-value */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Box, Button } from '@mui/material'
+import { useState } from 'react'
+
+import { useAccount } from 'wagmi'
+import { CreditLinePaymentWidget } from '..'
+import { WalletWrapper } from './WalletWrapper'
+
+function Fixture() {
+  const [showModal, setShowModal] = useState(false)
+  const { isConnected } = useAccount()
+  const PoolAddress = '0xA22D20FB0c9980fb96A9B0B5679C061aeAf5dDE4'
+
+  const handlePayment = () => {
+    setShowModal(true)
+  }
+
+  const handleClose = () => {
+    setShowModal(false)
+  }
+
+  return (
+    <>
+      <Box>Pool: {PoolAddress}</Box>
+      <Box>Pool Name: HumaCreditLine</Box>
+      <Button
+        variant='contained'
+        onClick={handlePayment}
+        disabled={!isConnected}
+      >
+        Make Payment
+      </Button>
+      {showModal && (
+        <CreditLinePaymentWidget
+          poolName='HumaCreditLine'
+          poolType='CreditLine'
+          handleClose={handleClose}
+        />
+      )}
+    </>
+  )
+}
+
+export default (
+  <WalletWrapper>
+    <Fixture />
+  </WalletWrapper>
+)

package/src/cosmos/InvoiceFactoringBorrow.fixture.tsx

@@ -0,0 +1,111 @@
+/* eslint-disable react/jsx-boolean-value */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Box, Button } from '@mui/material'
+import { BigNumber } from 'ethers'
+import { useState } from 'react'
+import { useAccount, useContractRead } from 'wagmi'
+
+import { InvoiceFactoringBorrowWidget } from '..'
+import InvoiceNFTAbi from './abis/InvoiceNFT.json'
+import RFPoolAbi from './abis/ReceivableFactoringPool.json'
+import { WalletWrapper } from './WalletWrapper'
+
+function Fixture() {
+  const [showModal, setShowModal] = useState(false)
+  const [tokenId, setTokenId] = useState<string>()
+  const [paymentMade, setPaymentMade] = useState<'loading' | 'true' | 'false'>(
+    'loading',
+  )
+  const NFTAddress = '0xC2AC172a293d68f548ea343414584aA37eb29Dcd'
+  const PoolAddress = '0x11672c0bBFF498c72BC2200f42461c0414855042'
+  const { address } = useAccount()
+
+  useContractRead({
+    address: NFTAddress,
+    abi: InvoiceNFTAbi,
+    functionName: 'getTokenIds',
+    args: [address],
+    onSuccess(tokenIds: BigNumber[]) {
+      if (tokenIds.length) {
+        setTokenId(tokenIds[tokenIds.length - 1].toString())
+      } else {
+        setTokenId('empty')
+      }
+    },
+  })
+
+  useContractRead({
+    address: PoolAddress,
+    abi: RFPoolAbi,
+    functionName: 'creditRecordMapping',
+    args: [address],
+    onSuccess(creditRecord: any) {
+      if (creditRecord.state > 2) {
+        setPaymentMade('false')
+      } else {
+        setPaymentMade('true')
+      }
+    },
+  })
+
+  const handleClose = () => {
+    setShowModal(false)
+  }
+
+  if (!tokenId || paymentMade === 'loading') {
+    return <div>Loading token id and making payment...</div>
+  }
+
+  if (tokenId === 'empty') {
+    return (
+      <>
+        <div>Please create invoice first.</div>
+        <Button
+          type='link'
+          variant='contained'
+          href={
+            process.env.REACT_APP_CREATE_INVOICE_URL ??
+            'https://huma-request-apps-create.netlify.app/'
+          }
+          target='_blank'
+        >
+          CREATE INVOICE
+        </Button>
+      </>
+    )
+  }
+
+  if (paymentMade === 'false') {
+    return (
+      <div>
+        Please go to InvoiceFactoringPayment Fixture to make the payment first.
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <Box>Pool: {PoolAddress}</Box>
+      <Box>NFT: {NFTAddress}</Box>
+      <Box>Pool Name: RequestNetwork</Box>
+      <Box>Token Id: {tokenId}</Box>
+      <Button variant='contained' onClick={() => setShowModal(true)}>
+        Get Paid Now
+      </Button>
+      {showModal && (
+        <InvoiceFactoringBorrowWidget
+          poolName='RequestNetwork'
+          poolType='Invoice'
+          tokenId={tokenId}
+          handleClose={handleClose}
+        />
+      )}
+    </>
+  )
+}
+
+export default (
+  <WalletWrapper>
+    <Fixture />
+  </WalletWrapper>
+)

package/src/cosmos/InvoiceFactoringPayment.fixture.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable react/jsx-boolean-value */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Box, Button } from '@mui/material'
+import { useState } from 'react'
+import { useAccount, useContractRead } from 'wagmi'
+
+import { InvoiceFactoringPaymentWidget } from '..'
+import RFPoolAbi from './abis/ReceivableFactoringPool.json'
+import { WalletWrapper } from './WalletWrapper'
+
+function Fixture() {
+  const [showModal, setShowModal] = useState(false)
+  const [isInDebt, setIsInDebt] = useState(false)
+  const { address } = useAccount()
+  const PoolAddress = '0x11672c0bBFF498c72BC2200f42461c0414855042'
+
+  useContractRead({
+    address: PoolAddress,
+    abi: RFPoolAbi,
+    functionName: 'creditRecordMapping',
+    args: [address],
+    onSuccess(creditRecord: any) {
+      if (creditRecord.state > 2) {
+        setIsInDebt(true)
+      }
+    },
+  })
+
+  const handleClose = () => {
+    setShowModal(false)
+  }
+
+  if (!isInDebt) {
+    return (
+      <>
+        <Box>Pool: {PoolAddress}</Box>
+        <Box>Pool Name: RequestNetwork</Box>
+        <Button variant='contained' disabled>
+          Not in state to make payment
+        </Button>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <Box>Pool: {PoolAddress}</Box>
+      <Box>Pool Name: RequestNetwork</Box>
+      <Button variant='contained' onClick={() => setShowModal(true)}>
+        Make Payment
+      </Button>
+      {showModal && (
+        <InvoiceFactoringPaymentWidget
+          poolName='RequestNetwork'
+          poolType='Invoice'
+          handleClose={handleClose}
+        />
+      )}
+    </>
+  )
+}
+
+export default (
+  <WalletWrapper>
+    <Fixture />
+  </WalletWrapper>
+)

package/src/cosmos/LendSupply.fixture.tsx

@@ -0,0 +1,75 @@
+/* eslint-disable react/jsx-boolean-value */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Box, Button } from '@mui/material'
+import { ethers } from 'ethers'
+import { useEffect, useState } from 'react'
+
+import { LendSupplyWidget } from '..'
+import { getInjectedMetamask } from './utils'
+import { WalletWrapper } from './WalletWrapper'
+
+function Fixture() {
+  const [showModal, setShowModal] = useState(false)
+  const [showModalRandom, setShowModalRandom] = useState(false)
+  const [testPrivateKeyRandom, setTestPrivateKeyRandom] = useState<string>()
+  const [testAccountRandom, setTestAccountRandom] = useState<string>()
+  const PoolAddress = '0xA22D20FB0c9980fb96A9B0B5679C061aeAf5dDE4'
+
+  useEffect(() => {
+    const wallet = ethers.Wallet.createRandom()
+    setTestPrivateKeyRandom(wallet.privateKey)
+    setTestAccountRandom(wallet.address)
+  }, [])
+
+  const handleSupply = () => {
+    setShowModal(true)
+  }
+
+  const handleSupplyRandom = () => {
+    // @ts-ignore
+    window.ethereum = getInjectedMetamask(testPrivateKeyRandom)
+    setShowModalRandom(true)
+  }
+
+  const handleClose = () => {
+    setShowModal(false)
+    setShowModalRandom(false)
+    window.ethereum = undefined
+  }
+
+  return (
+    <>
+      <Box>Pool: {PoolAddress}</Box>
+      <Box>Pool Name: HumaCreditLine</Box>
+      <Button variant='contained' onClick={handleSupply}>
+        Supply Without EA Check
+      </Button>
+      {showModal && (
+        <LendSupplyWidget
+          poolName='HumaCreditLine'
+          poolType='CreditLine'
+          handleClose={handleClose}
+        />
+      )}
+      <Box marginTop={5}>Account: {testAccountRandom}</Box>
+      <Box>Pool: {PoolAddress}</Box>
+      <Box>Pool Name: HumaCreditLine</Box>
+      <Button variant='contained' onClick={handleSupplyRandom}>
+        Supply With EA Check
+      </Button>
+      {showModalRandom && (
+        <LendSupplyWidget
+          poolName='HumaCreditLine'
+          poolType='CreditLine'
+          handleClose={handleClose}
+        />
+      )}
+    </>
+  )
+}
+
+export default (
+  <WalletWrapper>
+    <Fixture />
+  </WalletWrapper>
+)

package/src/cosmos/LendWithdraw.fixture.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable react/jsx-boolean-value */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Box, Button } from '@mui/material'
+import { useState } from 'react'
+
+import { LendWithdrawWidget } from '..'
+import { WalletWrapper } from './WalletWrapper'
+
+function Fixture() {
+  const [showModal, setShowModal] = useState(false)
+  const PoolAddress = '0xA22D20FB0c9980fb96A9B0B5679C061aeAf5dDE4'
+
+  const handleSupply = () => {
+    setShowModal(true)
+  }
+
+  const handleClose = () => {
+    setShowModal(false)
+  }
+
+  return (
+    <>
+      <Box>Pool: {PoolAddress}</Box>
+      <Box>Pool Name: HumaCreditLine</Box>
+      <Button variant='contained' onClick={handleSupply}>
+        Withdraw
+      </Button>
+      {showModal && (
+        <LendWithdrawWidget
+          poolName='HumaCreditLine'
+          poolType='CreditLine'
+          handleClose={handleClose}
+        />
+      )}
+    </>
+  )
+}
+
+export default (
+  <WalletWrapper>
+    <Fixture />
+  </WalletWrapper>
+)