@huma-finance/widgets 0.0.34 → 0.0.36

package/jsdoc2md.json

@@ -1,20 +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"
-    ]
-  }
-}
+{
+  "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

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "publishConfig": {
     "access": "public"
   },
@@ -30,8 +30,8 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.34",
-    "@huma-finance/shared": "^0.0.34",
+    "@huma-finance/sdk": "^0.0.36",
+    "@huma-finance/shared": "^0.0.36",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -83,6 +83,7 @@
     "prebuild": "tsc -p tsconfig.build.json",
     "build": "rollup -c",
     "cosmos": "cosmos",
+    "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",
@@ -192,5 +193,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "9aad8249313cd694493941fba4c78e3365e37af2"
+  "gitHead": "caf50f604219c37f37e17d519aae730144798a11"
 }

package/public/index.html

@@ -1,40 +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>
+<!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

@@ -1,25 +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"
-}
+{
+  "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

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

package/rollup.config.js

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

@@ -1,132 +1,128 @@
-import { gql, useQuery } from '@apollo/client'
-import {
-  CreditEvent,
-  CreditEventText,
-  downScale,
-  isEmpty,
-  PoolInfoType,
-  timeUtil,
-  useMQ,
-} from '@huma-finance/shared'
-import { Box, css } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-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',
-    action: (record: { amount: string }) => {
-      if (isEmpty(record.amount) || Number.isNaN(record.amount)) {
-        return ''
-      }
-      return Number(record.amount).toFixed(2)
-    },
-  },
-  { 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>
-  )
-}
+import { gql, useQuery } from '@apollo/client'
+import {
+  CreditEvent,
+  CreditEventText,
+  downScale,
+  isEmpty,
+  PoolInfoType,
+  timeUtil,
+  useMQ,
+} from '@huma-finance/shared'
+import { Box, css } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+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' },
+  {
+    title: 'Amount',
+    action: (record: { amount: string }) => {
+      if (isEmpty(record.amount) || Number.isNaN(record.amount)) {
+        return ''
+      }
+      return Number(record.amount).toFixed(2)
+    },
+  },
+  { 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()};
+    `,
+  }
+
+  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/ApolloWrapper.tsx

@@ -1,15 +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>
-}
+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>
+}