@huma-finance/widgets 0.0.6-alpha.0

package/jsdoc2md.json

@@ -0,0 +1,20 @@
+{
+  "source": {
+    "includePattern": ".+\\.ts(doc|x)?$",
+    "excludePattern": ".+\\.(test|spec).ts"
+  },
+  "plugins": ["plugins/markdown", "jsdoc-babel"],
+  "babel": {
+    "extensions": ["ts", "tsx"],
+    "ignore": ["**/*.(test|spec).ts"],
+    "babelrc": false,
+    "presets": [
+      ["@babel/preset-env", { "targets": { "node": true } }],
+      "@babel/preset-typescript"
+    ],
+    "plugins": [
+      "@babel/proposal-class-properties",
+      "@babel/proposal-object-rest-spread"
+    ]
+  }
+}

package/package.json

@@ -0,0 +1,193 @@
+{
+  "name": "@huma-finance/widgets",
+  "version": "0.0.6-alpha.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/00labs/huma-dapp.git"
+  },
+  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/cjs/index.cjs"
+    }
+  },
+  "dependencies": {
+    "@apollo/client": "^3.7.2",
+    "@coinbase/wallet-sdk": "^3.5.3",
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
+    "@ethersproject/address": "^5.7.0",
+    "@ethersproject/bignumber": "^5.6.0",
+    "@ethersproject/constants": "^5.7.0",
+    "@ethersproject/contracts": "^5.7.0",
+    "@ethersproject/experimental": "^5.7.0",
+    "@ethersproject/providers": "^5.6.0",
+    "@ethersproject/units": "^5.6.0",
+    "@mui/icons-material": "^5.3.0",
+    "@mui/material": "^5.0.6",
+    "@mui/styles": "^5.0.2",
+    "@mui/system": "^5.0.6",
+    "@mui/x-date-pickers": "^5.0.7",
+    "@reduxjs/toolkit": "^1.8.6",
+    "@types/utf8": "^3.0.1",
+    "@walletconnect/ethereum-provider": "1.8.0",
+    "@walletconnect/jsonrpc-http-connection": "^1.0.3",
+    "@walletconnect/jsonrpc-provider": "^1.0.5",
+    "@web3-react/coinbase-wallet": "8.0.34-beta.0",
+    "@web3-react/core": "8.0.35-beta.0",
+    "@web3-react/eip1193": "8.0.26-beta.0",
+    "@web3-react/empty": "8.0.20-beta.0",
+    "@web3-react/gnosis-safe": "8.0.6-beta.0",
+    "@web3-react/metamask": "8.0.28-beta.0",
+    "@web3-react/network": "8.0.27-beta.0",
+    "@web3-react/types": "8.0.20-beta.0",
+    "@web3-react/url": "8.0.25-beta.0",
+    "@web3-react/walletconnect": "8.0.35-beta.0",
+    "buffer": "^6.0.3",
+    "customize-cra": "^1.0.0",
+    "dayjs": "^1.11.6",
+    "encoding": "^0.1.13",
+    "ethers": "^5.7.2",
+    "formik": "^2.2.9",
+    "graphql": "^16.6.0",
+    "history": "^5.3.0",
+    "jotai": "^1.13.1",
+    "moment": "^2.29.4",
+    "qrcode": "^1.5.1",
+    "query-string": "^7.1.1",
+    "react": "^18.2.0",
+    "react-app-rewired": "^2.2.1",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.4",
+    "react-router": "^5.2.1",
+    "react-router-dom": "^5.3.0",
+    "react-scripts": "5.0.1",
+    "tslib": "^2.5.0",
+    "typescript": "^4.8.4",
+    "utf8": "^3.0.0",
+    "web-vitals": "^2.1.4",
+    "yup": "^0.32.11"
+  },
+  "scripts": {
+    "start": "tsc -w",
+    "prebuild": "tsc -p tsconfig.build.json",
+    "build": "rollup -c",
+    "cosmos": "cosmos",
+    "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\""
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "git add . && lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,ts,tsx,css,sass,less,graphql}": [
+      "eslint --fix --max-warnings=0",
+      "prettier --write",
+      "git add ."
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
+    "@babel/plugin-transform-runtime": "^7.21.0",
+    "@babel/preset-react": "^7.14.5",
+    "@emotion/babel-plugin": "^11.10.2",
+    "@emotion/babel-preset-css-prop": "^11.2.0",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-inject": "^5.0.3",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@rollup/plugin-url": "^8.0.1",
+    "@sentry/webpack-plugin": "^1.20.0",
+    "@svgr/rollup": "^6.5.1",
+    "@svgr/webpack": "^6.5.1",
+    "@testing-library/cypress": "^9.0.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@typechain/ethers-v5": "^10.1.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^17.0.45",
+    "@types/qrcode": "^1.5.0",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-router-dom": "^5.3.2",
+    "@types/testing-library__cypress": "^5.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.41.0",
+    "assert": "^2.0.0",
+    "browserify-zlib": "^0.2.0",
+    "buffer": "^6.0.3",
+    "connectkit": "^1.2.2",
+    "crypto-browserify": "^3.12.0",
+    "cypress": "^12.9.0",
+    "cypress-iframe": "^1.0.1",
+    "dotenv": "^16.0.3",
+    "eslint": "^8.2.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jest": "^27.1.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "file-loader": "^6.2.0",
+    "husky": "^8.0.0",
+    "jsdoc": "^4.0.2",
+    "jsdoc-babel": "^0.5.0",
+    "jsdoc-to-markdown": "^8.0.0",
+    "lint-staged": "^10.5.4",
+    "node-sass": "^8.0.0",
+    "path-browserify": "^1.0.1",
+    "prettier": "^2.7.1",
+    "react-cosmos": "^5.7.2",
+    "rollup-plugin-dts": "^5.2.0",
+    "rollup-plugin-node-externals": "^5.1.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-polyfill-node": "^0.12.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^4.0.0",
+    "stream-browserify": "^3.0.0",
+    "typechain": "^8.1.0",
+    "url-loader": "^4.1.1",
+    "wagmi": "^0.12.10"
+  },
+  "peerDependencies": {
+    "ethers": "^5.6.1",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "react-redux": ">=7.2.2",
+    "redux": ">=4.1.2"
+  },
+  "optionalDependencies": {
+    "encoding": "^0.1.13"
+  },
+  "gitHead": "0b1feed2400122e9c08f33e803f941ac48013a65"
+}

package/public/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Income backed DeFi for the 99%" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Huma Finance</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/rollup.config.js

@@ -0,0 +1,81 @@
+const { babel } = require('@rollup/plugin-babel')
+const commonjs = require('@rollup/plugin-commonjs')
+const inject = require('@rollup/plugin-inject')
+const json = require('@rollup/plugin-json')
+const { nodeResolve: resolve } = require('@rollup/plugin-node-resolve')
+const { default: dts } = require('rollup-plugin-dts')
+const url = require('@rollup/plugin-url')
+const svgr = require('@svgr/rollup')
+const externals = require('rollup-plugin-node-externals')
+const sass = require('rollup-plugin-scss')
+
+const EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx']
+
+const transpile = {
+  input: 'src/index.tsx',
+  external: (source) => {
+    return source.startsWith('@ethersproject/')
+  },
+  plugins: [
+    externals({
+      exclude: [/\.json$/, /\.css$/],
+      deps: true,
+      peerDeps: true,
+    }),
+    resolve({ extensions: EXTENSIONS }),
+    json(),
+    url({ include: ['**/*.png', '**/*.svg', '**/*.gif'], limit: Infinity }),
+    svgr({ jsxRuntime: 'automatic' }),
+    sass(),
+    commonjs(),
+
+    babel({
+      babelHelpers: 'runtime',
+      extensions: EXTENSIONS,
+    }),
+    inject({ React: 'react' }),
+  ],
+  onwarn: (warning, warn) => {
+    if (warning.code === 'UNUSED_EXTERNAL_IMPORT') return
+    if (warning.code === 'THIS_IS_UNDEFINED') return
+    if (warning.code === 'CIRCULAR_DEPENDENCY') return
+
+    warn(warning)
+    console.log(warning.loc, '\n')
+  },
+}
+
+const esm = {
+  ...transpile,
+  output: {
+    file: 'dist/index.js',
+    format: 'esm',
+    sourcemap: true,
+  },
+}
+
+const cjs = {
+  ...transpile,
+  output: {
+    dir: 'dist/cjs',
+    entryFileNames: '[name].cjs',
+    chunkFileNames: '[name]-[hash].cjs',
+    format: 'cjs',
+    sourcemap: true,
+  },
+  watch: false,
+}
+
+const types = {
+  input: 'dts/index.d.ts',
+  output: { file: 'dist/index.d.ts' },
+  external: (source) =>
+    source.endsWith('.css') || source.endsWith('/external.d.ts'),
+  plugins: [dts({ compilerOptions: { baseUrl: 'dts' } })],
+  watch: false,
+}
+
+const config = [esm, cjs, types]
+config.config = { ...esm, output: { ...esm.output, sourcemap: true } }
+
+module.exports = config

package/src/components/Activity.tsx

@@ -0,0 +1,123 @@
+import { gql, useQuery } from '@apollo/client'
+import { Box, css } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import {
+  CreditEvent,
+  CreditEventText,
+  downScale,
+  PoolInfoType,
+  timeUtil,
+  useMQ,
+} from '@huma-finance/shared'
+import { useEffect, useState } from 'react'
+
+import { HumaTable } from './HumaTable'
+
+const GET_ACTIVITY = gql`
+  query GetCreditLineActivity($pool: String!, $owner: String!, $event: [Int]!) {
+    creditEvents(
+      where: { pool: $pool, owner: $owner, event_in: $event }
+      orderBy: timestamp
+      orderDirection: desc
+    ) {
+      id
+      amount
+      timestamp
+      owner
+      pool
+      event
+    }
+  }
+`
+
+type Props = {
+  poolInfo: PoolInfoType
+  targetEvents: CreditEvent[]
+}
+
+type ActivityDataType = {
+  id: string
+  owner: string
+  pool: string
+  timestamp: string
+  amount: string
+  event: number
+  eventText: string | undefined
+}
+
+const columns = [
+  { title: 'Action', dataIndex: 'eventText', noSeparator: true },
+  { title: 'Amount', dataIndex: 'amount' },
+  { title: 'Date', dataIndex: 'timestamp' },
+]
+
+export function Activity({
+  poolInfo,
+  targetEvents,
+}: Props): React.ReactElement | null {
+  const { account } = useWeb3React()
+  const { decimals } = poolInfo.poolUnderlyingToken
+  const [events, setEvents] = useState<ActivityDataType[] | undefined>()
+  const { data } = useQuery<{
+    creditEvents: ActivityDataType[]
+  }>(GET_ACTIVITY, {
+    variables: {
+      pool: poolInfo.pool,
+      owner: account,
+      event: targetEvents,
+    },
+  })
+  const { isSmSize } = useMQ()
+
+  const getPadding = () => {
+    if (isSmSize) {
+      return '16px 24px'
+    }
+    return '33px 48px'
+  }
+
+  useEffect(() => {
+    if (!data?.creditEvents) {
+      return
+    }
+    const result = data.creditEvents.map((item) => {
+      const event = JSON.parse(JSON.stringify(item)) as ActivityDataType
+      event.eventText = CreditEventText[item.event]
+      event.amount = downScale(event.amount, decimals)
+      event.timestamp = timeUtil.timestampToLL(Number(event.timestamp))
+      return event
+    })
+    setEvents(result)
+  }, [data?.creditEvents, decimals])
+
+  const styles = {
+    wrapper: css`
+      margin-top: 71px;
+    `,
+    title: css`
+      font-family: 'Uni-Neue-Black';
+      font-size: 24px;
+      color: #6b6572;
+      margin-bottom: 14px;
+    `,
+    tableWrapper: css`
+      background: #ffffff;
+      box-shadow: 0px 4px 40px 8px rgba(0, 0, 0, 0.04);
+      border-radius: 24px;
+      padding: ${getPadding()};
+    `,
+  }
+
+  if (!events) {
+    return null
+  }
+
+  return (
+    <Box css={styles.wrapper}>
+      <Box css={styles.title}>Recent Activity</Box>
+      <Box css={styles.tableWrapper}>
+        <HumaTable columns={columns} rows={events} hideRowsPerPage={isSmSize} />
+      </Box>
+    </Box>
+  )
+}

package/src/components/AllowListModal.tsx

@@ -0,0 +1,113 @@
+import { Box, Button, css, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import {
+  EARejectMessageWithAllowList,
+  EARejectReason,
+  EAService,
+  PoolInfoType,
+} from '@huma-finance/shared'
+import React, { useCallback, useState } from 'react'
+
+import { CustomError } from '../utilTypes'
+import { ErrorModal } from './ErrorModal'
+import { CheckCircleIcon } from './icons'
+import { LoadingModal } from './LoadingModal'
+import { WrapperModal } from './WrapperModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleSuccess: () => void
+  handleError: (errorMessage: string) => void
+}
+
+export function AllowListModal({
+  poolInfo,
+  handleSuccess,
+  handleError,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const { account } = useWeb3React()
+  const [status, setStatus] = useState<
+    'notApproved' | 'approving' | 'approved'
+  >('notApproved')
+
+  const styles = {
+    congratsWrapper: css`
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      padding: 0 16px;
+      ${theme.cssMixins.rowVCentered}
+      margin-top: 60px;
+      height: 52px;
+      background: linear-gradient(
+          0deg,
+          rgba(255, 255, 255, 0.9),
+          rgba(255, 255, 255, 0.9)
+        ),
+        #2e7d32;
+      border-radius: 4px;
+    `,
+    bottom: css`
+      & .MuiButtonBase-root {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+      }
+    `,
+  }
+
+  const addToAllowList = useCallback(async () => {
+    try {
+      setStatus('approving')
+      await EAService.addToAllowList(account!, poolInfo.pool)
+      setStatus('approved')
+    } catch (e) {
+      const error = e as CustomError
+      handleError(error.message)
+    }
+  }, [account, handleError, poolInfo.pool])
+
+  const continueToBorrow = () => {
+    handleSuccess()
+  }
+
+  if (status === 'approving') {
+    return (
+      <LoadingModal
+        title='Add To Allowlist'
+        description='Waiting for approval confirmation...'
+      />
+    )
+  }
+
+  if (status === 'approved') {
+    return (
+      <WrapperModal title='Add To Allowlist'>
+        <>
+          <Box css={styles.congratsWrapper}>
+            <CheckCircleIcon />
+            <Box sx={{ marginLeft: '6px' }}>
+              Congrats, you have been added to the allowlist
+            </Box>
+          </Box>
+          <Box css={styles.bottom}>
+            <Button variant='contained' onClick={continueToBorrow}>
+              CONTINUE TO BORROW
+            </Button>
+          </Box>
+        </>
+      </WrapperModal>
+    )
+  }
+
+  return (
+    <ErrorModal
+      title='Application Not Approved'
+      errorReason={EARejectReason}
+      errorMessage={EARejectMessageWithAllowList}
+      handleOk={addToAllowList}
+      okText='ADD ME TO ALLOWLIST'
+      shouldResetState={false}
+    />
+  )
+}

package/src/components/ApolloWrapper.tsx

@@ -0,0 +1,15 @@
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'
+
+import { WCProps } from '../utilTypes'
+
+export function ApolloWrapper({
+  uri,
+  children,
+}: WCProps<{ uri: string }>): React.ReactElement | null {
+  const client = new ApolloClient({
+    uri,
+    cache: new InMemoryCache(),
+  })
+
+  return <ApolloProvider client={client}>{children}</ApolloProvider>
+}