@huma-finance/widgets 0.0.29 → 0.0.31

package/src/components/ApproveAllowanceModal.tsx

@@ -1,121 +1,121 @@
-import { MaxUint256 } from '@ethersproject/constants'
-import { Box, css, useTheme } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import { BigNumber } from 'ethers'
-import {
-  PoolInfoType,
-  sendTxAtom,
-  txAtom,
-  TxStateType,
-  useMount,
-  usePoolUnderlyingTokenContract,
-} from '@huma-finance/shared'
-import { useAtom } from 'jotai'
-import { useResetAtom } from 'jotai/utils'
-import React, { useCallback, useEffect } from 'react'
-
-import { BottomButton } from './BottomButton'
-import { AutoPaybackIcon } from './icons'
-import { LoadingModal } from './LoadingModal'
-import { ViewOnExplorer } from './ViewOnExplorer'
-import { WrapperModal } from './WrapperModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-  showAutoPayback?: boolean
-  allowanceAmount?: BigNumber | string
-  spender?: string
-  handleSuccess: () => void
-}
-
-export function ApproveAllowanceModal({
-  poolInfo,
-  showAutoPayback = false,
-  allowanceAmount,
-  spender,
-  handleSuccess,
-}: Props): React.ReactElement | null {
-  const theme = useTheme()
-  const { provider } = useWeb3React()
-  const { poolUnderlyingToken } = poolInfo
-  const { symbol } = poolUnderlyingToken
-  const poolUnderlyingTokenContract = usePoolUnderlyingTokenContract(
-    poolInfo.poolName,
-    poolInfo.poolType,
-  )
-  const reset = useResetAtom(txAtom)
-  const [{ state, txHash }, send] = useAtom(sendTxAtom)
-  const waitingForAccept = state === TxStateType.New
-
-  useEffect(() => {
-    if (state === TxStateType.Success) {
-      reset()
-      handleSuccess()
-    }
-  }, [handleSuccess, reset, state, symbol])
-
-  const styles = {
-    iconWrapper: css`
-      ${theme.cssMixins.rowCentered};
-      margin-top: 30px;
-    `,
-    description: css`
-      margin-top: 14px;
-      font-family: 'Uni-Neue-Regular';
-      font-size: 16px;
-      color: #a8a1b2;
-      padding: 0 12px;
-    `,
-  }
-
-  const sendApprove = useCallback(() => {
-    send({
-      contract: poolUnderlyingTokenContract!,
-      method: 'approve',
-      params: [spender ?? poolInfo.pool, allowanceAmount ?? MaxUint256],
-      provider,
-    })
-  }, [
-    allowanceAmount,
-    poolInfo.pool,
-    poolUnderlyingTokenContract,
-    provider,
-    send,
-    spender,
-  ])
-
-  useMount(() => {
-    if (!showAutoPayback) {
-      sendApprove()
-    }
-  })
-
-  if (showAutoPayback && waitingForAccept) {
-    return (
-      <WrapperModal
-        title='Auto Payback'
-        subTitle='Enable auto payback and never miss payments. You only need to do it once.'
-      >
-        <Box css={styles.iconWrapper}>
-          <AutoPaybackIcon />
-        </Box>
-        <Box css={styles.description}>
-          This allowance transaction removes the need to confirm follow up{' '}
-          {symbol} transactions. Gas is on us.
-        </Box>
-        <BottomButton variant='contained' onClick={sendApprove}>
-          APPROVE {symbol} PAYMENTS
-        </BottomButton>
-      </WrapperModal>
-    )
-  }
-
-  return (
-    <LoadingModal
-      title={`Approve ${symbol}`}
-      description='Waiting for approval confirmation...'
-    >
-      <ViewOnExplorer txHash={txHash} />
-    </LoadingModal>
-  )
-}
+import { MaxUint256 } from '@ethersproject/constants'
+import { Box, css, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import { BigNumber } from 'ethers'
+import {
+  PoolInfoType,
+  sendTxAtom,
+  txAtom,
+  TxStateType,
+  useMount,
+  usePoolUnderlyingTokenContract,
+} from '@huma-finance/shared'
+import { useAtom } from 'jotai'
+import { useResetAtom } from 'jotai/utils'
+import React, { useCallback, useEffect } from 'react'
+
+import { BottomButton } from './BottomButton'
+import { AutoPaybackIcon } from './icons'
+import { LoadingModal } from './LoadingModal'
+import { ViewOnExplorer } from './ViewOnExplorer'
+import { WrapperModal } from './WrapperModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  showAutoPayback?: boolean
+  allowanceAmount?: BigNumber | string
+  spender?: string
+  handleSuccess: () => void
+}
+
+export function ApproveAllowanceModal({
+  poolInfo,
+  showAutoPayback = false,
+  allowanceAmount,
+  spender,
+  handleSuccess,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+  const { provider } = useWeb3React()
+  const { poolUnderlyingToken } = poolInfo
+  const { symbol } = poolUnderlyingToken
+  const poolUnderlyingTokenContract = usePoolUnderlyingTokenContract(
+    poolInfo.poolName,
+    poolInfo.poolType,
+  )
+  const reset = useResetAtom(txAtom)
+  const [{ state, txHash }, send] = useAtom(sendTxAtom)
+  const waitingForAccept = state === TxStateType.New
+
+  useEffect(() => {
+    if (state === TxStateType.Success) {
+      reset()
+      handleSuccess()
+    }
+  }, [handleSuccess, reset, state, symbol])
+
+  const styles = {
+    iconWrapper: css`
+      ${theme.cssMixins.rowCentered};
+      margin-top: 30px;
+    `,
+    description: css`
+      margin-top: 14px;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      color: #a8a1b2;
+      padding: 0 12px;
+    `,
+  }
+
+  const sendApprove = useCallback(() => {
+    send({
+      contract: poolUnderlyingTokenContract!,
+      method: 'approve',
+      params: [spender ?? poolInfo.pool, allowanceAmount ?? MaxUint256],
+      provider,
+    })
+  }, [
+    allowanceAmount,
+    poolInfo.pool,
+    poolUnderlyingTokenContract,
+    provider,
+    send,
+    spender,
+  ])
+
+  useMount(() => {
+    if (!showAutoPayback) {
+      sendApprove()
+    }
+  })
+
+  if (showAutoPayback && waitingForAccept) {
+    return (
+      <WrapperModal
+        title='Auto Payback'
+        subTitle='Enable auto payback and never miss payments. You only need to do it once.'
+      >
+        <Box css={styles.iconWrapper}>
+          <AutoPaybackIcon />
+        </Box>
+        <Box css={styles.description}>
+          This allowance transaction removes the need to confirm follow up{' '}
+          {symbol} transactions. Gas is on us.
+        </Box>
+        <BottomButton variant='contained' onClick={sendApprove}>
+          APPROVE {symbol} PAYMENTS
+        </BottomButton>
+      </WrapperModal>
+    )
+  }
+
+  return (
+    <LoadingModal
+      title={`Approve ${symbol}`}
+      description='Waiting for approval confirmation...'
+    >
+      <ViewOnExplorer txHash={txHash} />
+    </LoadingModal>
+  )
+}

package/src/components/BottomButton.tsx

@@ -1,33 +1,33 @@
-import { Box, Button, css } from '@mui/material'
-import React from 'react'
-
-import { WCProps } from '../utilTypes'
-
-type Props = {
-  variant: 'contained' | 'outlined'
-  disabled?: boolean
-  onClick?: () => void
-}
-
-export function BottomButton({
-  variant,
-  disabled = false,
-  onClick,
-  children,
-}: WCProps<Props>): React.ReactElement {
-  const styles = css`
-    & .MuiButtonBase-root {
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-    }
-  `
-
-  return (
-    <Box css={styles}>
-      <Button variant={variant} onClick={onClick} disabled={disabled}>
-        {children}
-      </Button>
-    </Box>
-  )
-}
+import { Box, Button, css } from '@mui/material'
+import React from 'react'
+
+import { WCProps } from '../utilTypes'
+
+type Props = {
+  variant: 'contained' | 'outlined'
+  disabled?: boolean
+  onClick?: () => void
+}
+
+export function BottomButton({
+  variant,
+  disabled = false,
+  onClick,
+  children,
+}: WCProps<Props>): React.ReactElement {
+  const styles = css`
+    & .MuiButtonBase-root {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+    }
+  `
+
+  return (
+    <Box css={styles}>
+      <Button variant={variant} onClick={onClick} disabled={disabled}>
+        {children}
+      </Button>
+    </Box>
+  )
+}

package/src/components/ChainNotSupportedModal.tsx

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

package/src/components/ConfirmTransferModal.tsx

@@ -1,153 +1,153 @@
-import { combineStyles } from '@huma-finance/shared'
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
-import { Box, Button, css, Typography, useTheme } from '@mui/material'
-import React from 'react'
-
-import { ReceiptIcon, UsdcIcon } from './icons'
-
-type Props = {
-  title: string
-  description: string
-  items: [
-    { leftText: string; rightText: string },
-    { leftText: string; rightText: string },
-  ]
-  actionText: string
-  handleAction: () => void
-}
-
-export function ConfirmTransferModal({
-  title,
-  description,
-  items,
-  actionText,
-  handleAction,
-}: Props): React.ReactElement | null {
-  const theme = useTheme()
-
-  const styles = {
-    wrapper: css`
-      height: 518px;
-      position: relative;
-      ${theme.cssMixins.colStretch};
-    `,
-    header: css`
-      ${theme.cssMixins.rowHCentered};
-      margin-top: -5px;
-    `,
-    description: css`
-      font-family: 'Uni-Neue-Regular';
-      font-size: 16px;
-      color: #49505b;
-      margin-top: 30px;
-      text-align: center;
-    `,
-    transferWrapper: css`
-      margin-top: 75px;
-    `,
-    transfer: css`
-      font-family: 'Uni-Neue-Regular';
-      ${theme.cssMixins.rowSpaceBetweened}
-      ${theme.cssMixins.rowVCentered}
-      height: 72px;
-      background: #f9f8fa;
-      border-radius: 4px;
-      font-weight: 500;
-      font-size: 16px;
-      color: #49505b;
-      padding: 24px 20px;
-      margin-bottom: 9px;
-      position: relative;
-      box-sizing: border-box;
-    `,
-    transferItem: css`
-      ${theme.cssMixins.rowVCentered}
-    `,
-    arrow: css`
-      @keyframes bounceAlpha {
-        0% {
-          opacity: 1;
-          transform: translateX(0px) scale(1);
-        }
-        25% {
-          opacity: 0;
-          transform: translateX(10px) scale(0.9);
-        }
-        26% {
-          opacity: 0;
-          transform: translateX(-10px) scale(0.9);
-        }
-        55% {
-          opacity: 1;
-          transform: translateX(0px) scale(1);
-        }
-      }
-      animation-name: bounceAlpha;
-      animation-duration: 1.4s;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
-
-      color: #b246ff;
-      position: absolute;
-      margin: auto;
-      top: 0;
-      left: calc(15% + 36px);
-      bottom: 0;
-      right: 0;
-      width: 16px;
-      height: 16px;
-    `,
-    arrowFirst: css`
-      left: calc(15% + 20px);
-      animation-delay: 0.2s;
-    `,
-    okButton: css`
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-    `,
-    usdcIcon: css`
-      width: 22px;
-      margin-right: 20px;
-      & > path:first-of-type {
-        fill: #76707e;
-      }
-    `,
-  }
-
-  return (
-    <Box css={styles.wrapper}>
-      <Typography variant='h6' css={styles.header}>
-        {title}
-      </Typography>
-      <Box css={styles.description}>{description}</Box>
-      <Box css={styles.transferWrapper}>
-        <Box css={styles.transfer}>
-          <Box css={styles.transferItem}>
-            <ReceiptIcon css={{ width: '24px', marginRight: '20px' }} />
-            {items[0].leftText}
-          </Box>
-          <ArrowForwardIosIcon
-            css={combineStyles([styles.arrow, styles.arrowFirst])}
-          />
-          <ArrowForwardIosIcon css={styles.arrow} />
-          <Box>{items[0].rightText}</Box>
-        </Box>
-        <Box css={styles.transfer}>
-          <Box css={styles.transferItem}>
-            <UsdcIcon css={styles.usdcIcon} />
-            {items[1].leftText}
-          </Box>
-          <ArrowForwardIosIcon
-            css={combineStyles([styles.arrow, styles.arrowFirst])}
-          />
-          <ArrowForwardIosIcon css={styles.arrow} />
-          <Box>{items[1].rightText}</Box>
-        </Box>
-      </Box>
-      <Button variant='contained' css={styles.okButton} onClick={handleAction}>
-        {actionText}
-      </Button>
-    </Box>
-  )
-}
+import { combineStyles } from '@huma-finance/shared'
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
+import { Box, Button, css, Typography, useTheme } from '@mui/material'
+import React from 'react'
+
+import { ReceiptIcon, UsdcIcon } from './icons'
+
+type Props = {
+  title: string
+  description: string
+  items: [
+    { leftText: string; rightText: string },
+    { leftText: string; rightText: string },
+  ]
+  actionText: string
+  handleAction: () => void
+}
+
+export function ConfirmTransferModal({
+  title,
+  description,
+  items,
+  actionText,
+  handleAction,
+}: Props): React.ReactElement | null {
+  const theme = useTheme()
+
+  const styles = {
+    wrapper: css`
+      height: 518px;
+      position: relative;
+      ${theme.cssMixins.colStretch};
+    `,
+    header: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: -5px;
+    `,
+    description: css`
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      color: #49505b;
+      margin-top: 30px;
+      text-align: center;
+    `,
+    transferWrapper: css`
+      margin-top: 75px;
+    `,
+    transfer: css`
+      font-family: 'Uni-Neue-Regular';
+      ${theme.cssMixins.rowSpaceBetweened}
+      ${theme.cssMixins.rowVCentered}
+      height: 72px;
+      background: #f9f8fa;
+      border-radius: 4px;
+      font-weight: 500;
+      font-size: 16px;
+      color: #49505b;
+      padding: 24px 20px;
+      margin-bottom: 9px;
+      position: relative;
+      box-sizing: border-box;
+    `,
+    transferItem: css`
+      ${theme.cssMixins.rowVCentered}
+    `,
+    arrow: css`
+      @keyframes bounceAlpha {
+        0% {
+          opacity: 1;
+          transform: translateX(0px) scale(1);
+        }
+        25% {
+          opacity: 0;
+          transform: translateX(10px) scale(0.9);
+        }
+        26% {
+          opacity: 0;
+          transform: translateX(-10px) scale(0.9);
+        }
+        55% {
+          opacity: 1;
+          transform: translateX(0px) scale(1);
+        }
+      }
+      animation-name: bounceAlpha;
+      animation-duration: 1.4s;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+
+      color: #b246ff;
+      position: absolute;
+      margin: auto;
+      top: 0;
+      left: calc(15% + 36px);
+      bottom: 0;
+      right: 0;
+      width: 16px;
+      height: 16px;
+    `,
+    arrowFirst: css`
+      left: calc(15% + 20px);
+      animation-delay: 0.2s;
+    `,
+    okButton: css`
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+    `,
+    usdcIcon: css`
+      width: 22px;
+      margin-right: 20px;
+      & > path:first-of-type {
+        fill: #76707e;
+      }
+    `,
+  }
+
+  return (
+    <Box css={styles.wrapper}>
+      <Typography variant='h6' css={styles.header}>
+        {title}
+      </Typography>
+      <Box css={styles.description}>{description}</Box>
+      <Box css={styles.transferWrapper}>
+        <Box css={styles.transfer}>
+          <Box css={styles.transferItem}>
+            <ReceiptIcon css={{ width: '24px', marginRight: '20px' }} />
+            {items[0].leftText}
+          </Box>
+          <ArrowForwardIosIcon
+            css={combineStyles([styles.arrow, styles.arrowFirst])}
+          />
+          <ArrowForwardIosIcon css={styles.arrow} />
+          <Box>{items[0].rightText}</Box>
+        </Box>
+        <Box css={styles.transfer}>
+          <Box css={styles.transferItem}>
+            <UsdcIcon css={styles.usdcIcon} />
+            {items[1].leftText}
+          </Box>
+          <ArrowForwardIosIcon
+            css={combineStyles([styles.arrow, styles.arrowFirst])}
+          />
+          <ArrowForwardIosIcon css={styles.arrow} />
+          <Box>{items[1].rightText}</Box>
+        </Box>
+      </Box>
+      <Button variant='contained' css={styles.okButton} onClick={handleAction}>
+        {actionText}
+      </Button>
+    </Box>
+  )
+}