@huma-finance/widgets 0.0.42-beta.99 → 0.0.43-beta.107

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.42-beta.99+bb1e255",
+  "version": "0.0.43-beta.107+ae2881a",
   "publishConfig": {
     "access": "public"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/00labs/huma-dapp.git"
+    "url": "git+https://github.com/00labs/huma-js.git"
   },
   "types": "dist/index.d.ts",
   "main": "dist/cjs/index.cjs",
@@ -30,8 +30,8 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.42-beta.99+bb1e255",
-    "@huma-finance/shared": "^0.0.42-beta.99+bb1e255",
+    "@huma-finance/sdk": "^0.0.42",
+    "@huma-finance/shared": "^0.0.42",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -83,12 +83,10 @@
     "prebuild": "tsc -p tsconfig.build.json",
     "build": "rollup -c",
     "cosmos": "cosmos",
+    "prettier": "prettier --write \"src/**/*.{js,ts,tsx,graphql}\"",
     "lint": "eslint --max-warnings=0 \"src/**/*.{js,ts,tsx,graphql}\"",
-    "lint-staged": "lint-staged",
-    "e2e": "cypress run --config baseUrl=http://localhost:8000 --headed --browser chrome --e2e",
     "generateDocs": "jsdoc2md --files \"src/**/*.tsx\" --configure ./jsdoc2md.json > API.md",
-    "contracts:compile:abi": "typechain --target ethers-v5 --out-dir src/abis/types \"./src/abis/**/*.json\"",
-    "prettier": "prettier --write \"src/**/*.{js,ts,tsx,graphql}\""
+    "lint-staged": "lint-staged"
   },
   "husky": {
     "hooks": {
@@ -96,7 +94,7 @@
     }
   },
   "lint-staged": {
-    "src/**/*.{js,ts,tsx,css,sass,less,graphql}": [
+    "src/**/*.{js,ts,tsx,css,graphql}": [
       "yarn generateDocs",
       "eslint --fix --max-warnings=0",
       "prettier --write",
@@ -194,5 +192,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "bb1e255865acc0a78dfb78454165676b88582d4d"
+  "gitHead": "ae2881aabdb5cd4d64592773477a2c943a397738"
 }

package/src/components/ChainSupportProvider.tsx

@@ -0,0 +1,50 @@
+import { supportedChainId } from '@huma-finance/shared'
+import { useWeb3React } from '@web3-react/core'
+import { useEffect, useState } from 'react'
+
+import { WCProps } from '../utilTypes'
+import { ErrorModal } from './ErrorModal'
+import { HumaModal, HumaModalHeader } from './humaModal'
+
+export function ChainSupportProvider({
+  children,
+}: WCProps): React.ReactElement | null {
+  const { chainId } = useWeb3React()
+  const chainSupported = !!supportedChainId(chainId)
+  const [chainNotSupportedOpen, setChainNotSupportedOpen] = useState(false)
+
+  useEffect(() => {
+    setChainNotSupportedOpen(!chainSupported)
+  }, [chainSupported])
+
+  const handleClose = () => {
+    setChainNotSupportedOpen(false)
+  }
+
+  if (!chainId) {
+    return null
+  }
+
+  if (chainSupported) {
+    return children as React.ReactElement
+  }
+
+  return (
+    <HumaModal
+      isOpen={chainNotSupportedOpen}
+      overflowY='auto'
+      onClose={handleClose}
+      width='480px'
+      padding='30px 40px'
+      disableBackdropClick
+    >
+      <HumaModalHeader onClose={handleClose} height={0} />
+      <ErrorModal
+        title='Network Not Supported'
+        errorReason='Please switch to a supported network.'
+        handleOk={handleClose}
+        okText='Close'
+      />
+    </HumaModal>
+  )
+}

package/src/index.tsx

@@ -4,16 +4,13 @@ import { JsonRpcProvider } from '@ethersproject/providers'
 import {
   Provider as Web3Provider,
   ProviderProps as Web3Props,
-  supportedChainId,
 } from '@huma-finance/shared'
 import { ThemeProvider } from '@mui/material'
 import { Provider as Eip1193Provider } from '@web3-react/types'
 import { Provider as AtomProvider } from 'jotai'
-import { useCallback, useEffect, useState } from 'react'
 import { Provider as ReduxProvider } from 'react-redux'
 
-import { useWeb3React } from '@web3-react/core'
-import { ChainNotSupportedModal } from './components/ChainNotSupportedModal'
+import { ChainSupportProvider } from './components/ChainSupportProvider'
 import {
   CreditLineApprove,
   CreditLineApproveProps,
@@ -55,7 +52,7 @@ type JsonRpcConnectionMap = {
  * @typedef {Object} WidgetProps
  * @property {desiredChainId|undefined} desiredChainId Optional desired chain id, will trigger the switch network action if different from the current chain id
  * @property {JsonRpcConnectionMap|undefined} jsonRpcUrlMap Optional mapping of your JSON-RPC connections indexed by chainId
- * @property {Eip1193Provider|JsonRpcProviderl} provider EIP-1193 provider or JsonRpc Provider
+ * @property {Eip1193Provider|JsonRpcProvider} provider EIP-1193 provider or JsonRpc Provider
  */
 type WidgetProps = {
   handleClose?: () => void
@@ -66,41 +63,14 @@ type WidgetProps = {
 
 function Widget(props: WCProps<WidgetProps>) {
   const { children } = props
-  const { chainId } = useWeb3React()
-
-  const chainSupported = !!supportedChainId(chainId)
-  const [chainNotSupportedOpen, setChainNotSupportedOpen] = useState(false)
-
-  useEffect(() => {
-    if (chainSupported) {
-      setChainNotSupportedOpen(false)
-    } else {
-      setChainNotSupportedOpen(true)
-    }
-  }, [chainSupported])
-
-  const handleCloseCallback = useCallback(() => {
-    setChainNotSupportedOpen(false)
-  }, [])
-
-  if (!chainSupported) {
-    return (
-      <ThemeProvider theme={themeHuma}>
-        <ReduxProvider store={store}>
-          <ChainNotSupportedModal
-            isOpen={chainNotSupportedOpen}
-            handleClose={handleCloseCallback}
-          />
-        </ReduxProvider>
-      </ThemeProvider>
-    )
-  }
 
   return (
     <ThemeProvider theme={themeHuma}>
       <ReduxProvider store={store}>
         <Web3Provider {...(props as Web3Props)}>
-          <AtomProvider>{children}</AtomProvider>
+          <AtomProvider>
+            <ChainSupportProvider>{children}</ChainSupportProvider>
+          </AtomProvider>
         </Web3Provider>
       </ReduxProvider>
     </ThemeProvider>

package/cypress/e2e/01-invoice-factoring-borrow.test.ts

@@ -1,62 +0,0 @@
-import '@testing-library/cypress/add-commands'
-import 'cypress-iframe'
-
-import {
-  addressForTx,
-  INVOICE_AMOUNT,
-  INVOICE_FACTORED_AMOUNT,
-  INVOICE_FEES,
-  ONE_MINUTE,
-  TWO_MINUTES,
-} from '../utils'
-
-describe('Invoice factoring recurring borrow', () => {
-  it('Create RN request', () => {
-    cy.visit(Cypress.env('E2E_TEST_RN_CREATE_BASE_URL'))
-    cy.findByText('Metamask', { timeout: ONE_MINUTE }).click()
-    cy.get('input[name="amount"]').type(String(INVOICE_AMOUNT))
-    cy.get('input[name="payer"]').type(addressForTx)
-    cy.get('button').contains('Create a request').click()
-    cy.findAllByText('Request for payment from', {
-      timeout: TWO_MINUTES,
-    }).should('exist')
-  })
-
-  it('Should get paid 80 USDC for an invoice factoring of 100 USDC value', () => {
-    cy.visit('/')
-    cy.findByText('InvoiceFactoringBorrow', { timeout: ONE_MINUTE }).click()
-    const receivedUSDC = INVOICE_FACTORED_AMOUNT - INVOICE_FEES
-    const remainedUSDC = INVOICE_AMOUNT - INVOICE_FACTORED_AMOUNT
-    const chooseAmountModalIncrementIcon = '.choose-amount-modal-increment-icon'
-    const txDoneModalCloseButton = '.transaction-done-modal-close-btn'
-
-    // click the increment icon each time will increment 1 usdc
-    for (let i = 0; i < INVOICE_FACTORED_AMOUNT; i++) {
-      cy.iframe()
-        .find(chooseAmountModalIncrementIcon, { timeout: TWO_MINUTES })
-        .click()
-    }
-
-    cy.iframe().find('button').contains('ACCEPT TERMS').click()
-    cy.iframe().find('div').contains(`${receivedUSDC} USDC`).should('exist')
-    cy.iframe().find('button').contains('APPROVE TRANSFER').click()
-
-    // wait 2 minutes for transaction to be successful
-    cy.iframe()
-      .find(txDoneModalCloseButton, {
-        timeout: TWO_MINUTES,
-      })
-      .should('be.visible')
-
-    cy.iframe()
-      .find('div')
-      .contains(`${receivedUSDC} USDC is now in your wallet.`)
-      .should('exist')
-    cy.iframe()
-      .find('div')
-      .contains(
-        `The remaining ${remainedUSDC} USDC will be sent to your wallet when the invoice is paid.`,
-      )
-      .should('exist')
-  })
-})

package/cypress/support/e2e.ts

@@ -1,76 +0,0 @@
-// ***********************************************************
-// This file is processed and loaded automatically before your test files.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.ts using ES2015 syntax:
-import { injectedForApprove, injectedForTx } from './ethereum'
-import assert = require('assert')
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace Cypress {
-    interface ApplicationWindow {
-      ethereum: typeof injectedForTx
-    }
-    interface VisitOptions {
-      serviceWorker?: true
-    }
-  }
-}
-
-// sets up the injected provider to be a mock ethereum provider with the given mnemonic/index
-// eslint-disable-next-line no-undef
-Cypress.Commands.overwrite(
-  'visit',
-  (
-    original,
-    url: string | Partial<Cypress.VisitOptions>,
-    options?: Partial<Cypress.VisitOptions>,
-  ) => {
-    assert(typeof url === 'string')
-
-    cy.intercept(
-      '/service-worker.js',
-      options?.serviceWorker ? undefined : { statusCode: 404 },
-    ).then(() => {
-      original({
-        ...options,
-        url:
-          url.startsWith('/') && url.length > 2 && !url.startsWith('/#')
-            ? `/#${url}`
-            : url,
-        onBeforeLoad(win) {
-          options?.onBeforeLoad?.(win)
-          win.localStorage.clear()
-          win.localStorage.setItem(
-            'redux_localstorage_simple_user',
-            '{"selectedWallet":"INJECTED"}',
-          )
-
-          win.ethereum = injectedForTx
-          if (url.endsWith('type=newWallet')) {
-            win.ethereum = injectedForApprove
-          }
-        },
-      })
-    })
-  },
-)
-
-beforeEach(() => {
-  // Infura security policies are based on Origin headers.
-  // These are stripped by cypress because chromeWebSecurity === false; this adds them back in.
-  cy.intercept(/infura.io/, (res) => {
-    res.headers['origin'] = Cypress.config().baseUrl!
-    res.continue()
-  })
-})
-
-Cypress.on('uncaught:exception', (_err, _runnable) => {
-  // returning false here prevents Cypress from
-  // failing the test
-  return false
-})

package/cypress/support/ethereum.ts

@@ -1,142 +0,0 @@
-/**
- * Updates cy.visit() to include an injected window.ethereum provider.
- */
-import { Eip1193Bridge } from '@ethersproject/experimental/lib/eip1193-bridge'
-import { ethers } from 'ethers'
-import { deepCopy } from 'ethers/lib/utils'
-
-import {
-  addressForApprove,
-  addressForTx,
-  provider,
-  signerForApprove,
-  signerForTx,
-} from '../utils'
-
-class MetamaskBridge extends Eip1193Bridge {
-  private walletAddress: string
-
-  constructor(
-    signer: ethers.Signer,
-    provider: ethers.providers.Provider,
-    walletAddress: string,
-  ) {
-    super(signer, provider)
-    this.walletAddress = walletAddress
-  }
-
-  chainId = 5
-
-  async sendAsync(...args: any[]) {
-    console.debug('sendAsync called', ...args)
-    return this.send(...args)
-  }
-  async send(...args: any[]) {
-    console.debug('send called', ...args)
-    const isCallbackForm =
-      typeof args[0] === 'object' && typeof args[1] === 'function'
-    let callback
-    let method
-    let params
-    if (isCallbackForm) {
-      callback = args[1]
-      method = args[0].method
-      params = args[0].params
-    } else {
-      method = args[0]
-      params = args[1]
-    }
-    if (method === 'eth_requestAccounts' || method === 'eth_accounts') {
-      if (isCallbackForm) {
-        callback({ result: [this.walletAddress] })
-      } else {
-        return Promise.resolve([this.walletAddress])
-      }
-    }
-    if (method === 'eth_chainId') {
-      if (isCallbackForm) {
-        callback(null, { result: '0x5' })
-      } else {
-        return Promise.resolve('0x5')
-      }
-    }
-    // Eip1193Bridge only supports eth_sign
-    // address is the first param for eth_sign
-    if (method === 'personal_sign') {
-      method = 'eth_sign'
-      const [data, address] = deepCopy(params)
-      params[0] = address
-      params[1] = data
-    }
-    try {
-      // Please refer to: https://github.com/ethers-io/ethers.js/issues/1683
-      // If from is present on eth_call it errors, removing it makes the library set
-      // from as the connected wallet which works fine
-      if (params && params.length && method === 'eth_call') {
-        if (params[0].from) {
-          delete params[0].from
-        }
-        if (params[0].gas) {
-          delete params[0].gas
-        }
-      }
-
-      let result
-      // For sending a transaction if we call send it will error
-      // as it wants gasLimit in sendTransaction but hexlify sets the property gas
-      // to gasLimit which makes sensd transaction error.
-      // This have taken the code from the super method for sendTransaction and altered
-      // it slightly to make it work with the gas limit issues.
-      if (
-        params &&
-        params.length &&
-        params[0].from &&
-        method === 'eth_sendTransaction'
-      ) {
-        // Hexlify will not take gas, must be gasLimit, set this property to be gasLimit
-        params[0].gasLimit = params[0].gas
-        delete params[0].gas
-        // If from is present on eth_sendTransaction it errors, removing it makes the library set
-        // from as the connected wallet which works fine
-        delete params[0].from
-        const req = ethers.providers.JsonRpcProvider.hexlifyTransaction(
-          params[0],
-        )
-        // Hexlify sets the gasLimit property to be gas again and send transaction requires gasLimit
-        req.gasLimit = req.gas
-        delete req.gas
-        // Send the transaction
-        const tx = await this.signer.sendTransaction(req)
-        result = tx.hash
-      } else {
-        // All other transactions the base class works for
-        result = await super.send(method, params)
-      }
-      console.debug('result received', method, params, result)
-      if (isCallbackForm) {
-        callback(null, { result })
-      } else {
-        return result
-      }
-    } catch (error) {
-      console.log(error)
-      if (isCallbackForm) {
-        callback(error, null)
-      } else {
-        throw error
-      }
-    }
-  }
-}
-
-export const injectedForTx = new MetamaskBridge(
-  signerForTx,
-  provider,
-  addressForTx,
-)
-
-export const injectedForApprove = new MetamaskBridge(
-  signerForApprove,
-  provider,
-  addressForApprove,
-)

package/cypress/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "strict": true,
-    "target": "es5",
-    "lib": ["es5", "dom"],
-    "types": ["cypress"]
-  },
-  "include": ["**/*.ts"]
-}

package/cypress/utils/index.ts

@@ -1,54 +0,0 @@
-import { JsonRpcProvider } from '@ethersproject/providers'
-import { Wallet } from '@ethersproject/wallet'
-import { ethers } from 'ethers'
-
-export const ONE_SECOND = 1 * 1000
-export const THREE_SECONDS = 3 * 1000
-export const FIVE_SECONDS = 5 * 1000
-export const TEN_SECONDS = 10 * 1000
-export const TWENTY_SECONDS = 20 * 1000
-export const ONE_MINUTE = 60 * 1000
-export const TWO_MINUTES = 120 * 1000
-export const INVOICE_AMOUNT = 100
-export const INVOICE_FACTORED_AMOUNT = 80
-export const INVOICE_FEES = 8
-
-const chain = { name: 'Goerli', chainId: 5 }
-const infuraKey = Cypress.env('E2E_TEST_INFURA_GOERLI')
-export const provider = new JsonRpcProvider(infuraKey, chain)
-
-export const privateKeyForTx = Cypress.env('E2E_TEST_PRIVATE_KEY')
-export const addressForTx = new Wallet(privateKeyForTx).address
-export const signerForTx = new Wallet(privateKeyForTx, provider)
-
-const wallet = ethers.Wallet.createRandom()
-export const addressForApprove = wallet.address
-export const signerForApprove = new Wallet(wallet.privateKey, provider)
-
-export const toNumber = (text: string) => {
-  return Number(text.replace('$', '').replace(/,/g, '').replace('%', ''))
-}
-
-export const getWalletAddressAbbr = (address: string) => {
-  if (!address) {
-    return address
-  }
-  const { length } = address
-  return `${address.slice(0, 6)}...${address.slice(length - 4, length)}`
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const isEmpty = (value: undefined | null | any) =>
-  value === undefined || value === null
-
-const formatter = new Intl.NumberFormat('en-US', {
-  style: 'currency',
-  currency: 'USD',
-})
-
-export const formatMoney = (num: number | string | undefined) => {
-  if (isEmpty(num) || Number.isNaN(num)) {
-    return num
-  }
-  return formatter.format(Number(num))
-}

package/cypress.config.ts

@@ -1,20 +0,0 @@
-import { defineConfig } from 'cypress'
-
-export default defineConfig({
-  projectId: 'yq9qu9',
-  videoUploadOnPasses: false,
-  defaultCommandTimeout: 10000,
-  chromeWebSecurity: false,
-  e2e: {
-    testIsolation: false,
-    setupNodeEvents(on, config) {
-      return {
-        ...config,
-        // Only enable Chrome.
-        // Electron (the default) has issues injecting window.ethereum before pageload, so it is not viable.
-        browsers: config.browsers.filter(({ name }) => name === 'chrome'),
-      }
-    },
-    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
-  },
-})

package/src/components/ChainNotSupportedModal.tsx

@@ -1,33 +0,0 @@
-import React from 'react'
-
-import { ErrorModal } from './ErrorModal'
-import { HumaModal, HumaModalHeader } from './humaModal'
-
-type Props = {
-  handleClose: () => void
-  isOpen: boolean
-}
-
-export function ChainNotSupportedModal({
-  handleClose,
-  isOpen,
-}: Props): React.ReactElement | null {
-  return (
-    <HumaModal
-      isOpen={isOpen}
-      overflowY='auto'
-      onClose={handleClose}
-      width='480px'
-      padding='30px 40px'
-      disableBackdropClick
-    >
-      <HumaModalHeader onClose={handleClose} height={0} />
-      <ErrorModal
-        title='Network Not Supported'
-        errorReason='Please switch to a supported network.'
-        handleOk={handleClose}
-        okText='Close'
-      />
-    </HumaModal>
-  )
-}