@huma-finance/widgets 0.0.8 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.8",
+  "version": "0.0.11",
   "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.8",
-    "@huma-finance/shared": "^0.0.8",
+    "@huma-finance/sdk": "^0.0.11",
+    "@huma-finance/shared": "^0.0.11",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -191,5 +191,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "d9e7878a7b163ccc5b29959eb8a0fbb73c988244"
+  "gitHead": "12afb4430fa58ad8403bde9aadb52c7ddb1f048c"
 }

package/src/components/Activity.tsx

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

@@ -1,113 +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}
-    />
-  )
-}
+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}
+    />
+  )
+}