@huma-finance/widgets 0.0.6-alpha.0

package/README.md

@@ -0,0 +1,48 @@
+# Huma Widgets
+
+The `@huma-finance/widgets` package is an [npm package](https://www.npmjs.com/package/@huma-finance/widgets) of React components used to provide subsets of the Huma Finance Protocol functionality in a small user interface element for:
+
+- Invoice factoring borrow and payment
+- Credit line borrow and payment
+- Lend supply and withdraw
+- Superfluid stream borrow
+
+## Installation
+
+Install the widgets library via `npm` or `yarn`.
+
+```js
+yarn add @huma-finance/widgets
+```
+
+```js
+npm i --save @huma-finance/widgets
+```
+
+## Adding Widget to Your App
+
+```jsx
+import { InvoiceFactoringBorrowWidget } from '@huma-finance/widgets'
+
+export const InvoiceFactoringBorrowPage = () => {
+  return (
+    <InvoiceFactoringBorrowWidget
+      poolName='pool name'
+      poolType='pool type'
+      tokenId={tokenId}
+      handleClose={handleClose}
+    />
+  )
+}
+```
+
+## Documentation
+
+For documentation on the different widgets offered please refer to the [API](API.md)
+
+## Example Usage
+
+To see how the Huma widgets can be used, feel free to use our interactive example under src/cosmos.
+
+1. Run `yarn cosmos`
+2. Open up `localhost:8000` in your browser and choose the fixture to test

package/babel.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  compact: false,
+  presets: [
+    '@babel/preset-env',
+    [
+      '@babel/preset-react',
+      {
+        importSource: '@emotion/react',
+        runtime: 'automatic',
+      },
+    ],
+    ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
+  ],
+  plugins: ['@babel/plugin-transform-runtime', '@emotion'],
+}

package/config-overrides.js

@@ -0,0 +1,9 @@
+const { addBabelPlugin, addBabelPreset, override } = require('customize-cra')
+
+module.exports = override(
+  addBabelPlugin('@emotion/babel-plugin'),
+  addBabelPreset([
+    '@babel/preset-react',
+    { importSource: '@emotion/react', runtime: 'automatic' },
+  ]),
+)

package/cosmos.config.json

@@ -0,0 +1,7 @@
+{
+  "watchDirs": ["src/cosmos"],
+  "webpack": {
+    "overridePath": "webpack.cosmos.js"
+  },
+  "port": 8000
+}

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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,76 @@
+// ***********************************************************
+// 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

@@ -0,0 +1,142 @@
+/**
+ * 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

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

package/cypress/utils/index.ts

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,20 @@
+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/dist/assets/output-15e10f9f.css

@@ -0,0 +1,44 @@
+@font-face {
+  font-family: 'Recoleta-Medium';
+  src: local("Recoleta-Medium"), url(./fonts/Recoleta/Recoleta-Medium.otf) format("truetype");
+  font-weight: 500; }
+
+@font-face {
+  font-family: 'Roboto-Medium';
+  src: local("Roboto-Medium"), url(./fonts/Roboto/Roboto-Medium.ttf) format("truetype");
+  font-weight: 500; }
+
+@font-face {
+  font-family: 'Roboto-Regular';
+  src: local("Roboto-Regular"), url(./fonts/Roboto/Roboto-Regular.ttf) format("truetype");
+  font-weight: 400; }
+
+@font-face {
+  font-family: 'Inter-Bold';
+  src: local("Inter-Bold"), url(./fonts/Inter/Inter-Bold.ttf) format("truetype");
+  font-weight: 700; }
+
+@font-face {
+  font-family: 'Inter-Medium';
+  src: local("Inter-Medium"), url(./fonts/Inter/Inter-Medium.ttf) format("truetype");
+  font-weight: 500; }
+
+@font-face {
+  font-family: 'Inter-Regular';
+  src: local("Inter-Regular"), url(./fonts/Inter/Inter-Regular.ttf) format("truetype");
+  font-weight: 400; }
+
+@font-face {
+  font-family: 'Uni-Neue-Black';
+  src: local("Uni-Neue-Black"), url(./fonts/UniNeue/UniNeue-Black.ttf) format("truetype");
+  font-weight: 800; }
+
+@font-face {
+  font-family: 'Uni-Neue-Bold';
+  src: local("Uni-Neue-Bold"), url(./fonts/UniNeue/UniNeue-Bold.ttf) format("truetype");
+  font-weight: 700; }
+
+@font-face {
+  font-family: 'Uni-Neue-Regular';
+  src: local("Uni-Neue-Regular"), url(./fonts/UniNeue/UniNeue-Regular.ttf) format("truetype");
+  font-weight: 400; }

package/dist/cjs/assets/output-15e10f9f.css

@@ -0,0 +1,44 @@
+@font-face {
+  font-family: 'Recoleta-Medium';
+  src: local("Recoleta-Medium"), url(./fonts/Recoleta/Recoleta-Medium.otf) format("truetype");
+  font-weight: 500; }
+
+@font-face {
+  font-family: 'Roboto-Medium';
+  src: local("Roboto-Medium"), url(./fonts/Roboto/Roboto-Medium.ttf) format("truetype");
+  font-weight: 500; }
+
+@font-face {
+  font-family: 'Roboto-Regular';
+  src: local("Roboto-Regular"), url(./fonts/Roboto/Roboto-Regular.ttf) format("truetype");
+  font-weight: 400; }
+
+@font-face {
+  font-family: 'Inter-Bold';
+  src: local("Inter-Bold"), url(./fonts/Inter/Inter-Bold.ttf) format("truetype");
+  font-weight: 700; }
+
+@font-face {
+  font-family: 'Inter-Medium';
+  src: local("Inter-Medium"), url(./fonts/Inter/Inter-Medium.ttf) format("truetype");
+  font-weight: 500; }
+
+@font-face {
+  font-family: 'Inter-Regular';
+  src: local("Inter-Regular"), url(./fonts/Inter/Inter-Regular.ttf) format("truetype");
+  font-weight: 400; }
+
+@font-face {
+  font-family: 'Uni-Neue-Black';
+  src: local("Uni-Neue-Black"), url(./fonts/UniNeue/UniNeue-Black.ttf) format("truetype");
+  font-weight: 800; }
+
+@font-face {
+  font-family: 'Uni-Neue-Bold';
+  src: local("Uni-Neue-Bold"), url(./fonts/UniNeue/UniNeue-Bold.ttf) format("truetype");
+  font-weight: 700; }
+
+@font-face {
+  font-family: 'Uni-Neue-Regular';
+  src: local("Uni-Neue-Regular"), url(./fonts/UniNeue/UniNeue-Regular.ttf) format("truetype");
+  font-weight: 400; }