@huma-finance/widgets 0.0.31 → 0.0.33

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>
+  )
+}

package/src/components/CreditLine/borrow/1-Evaluation.tsx

@@ -1,157 +1,157 @@
-import { Box, Button, css, Typography, useTheme } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import { PoolInfoType } from '@huma-finance/shared'
-import React, { useEffect, useState } from 'react'
-
-import useEA from '../../../hooks/useEA'
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setStep } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { CheckCircleIcon, CheckGreenIcon } from '../../icons'
-import spinner from '../../icons/spinner.gif'
-
-type Props = {
-  poolInfo: PoolInfoType
-  handleApprove: () => void
-}
-
-export function Evaluation({
-  poolInfo,
-  handleApprove,
-}: Props): React.ReactElement {
-  const theme = useTheme()
-  const { checkingEA } = useEA()
-  const dispatch = useAppDispatch()
-  const { account, chainId } = useWeb3React()
-  const [status, setStatus] = useState<'checking' | 'success'>('checking')
-
-  useEffect(() => {
-    const fetchData = async () => {
-      if (account && chainId) {
-        await checkingEA(
-          {
-            poolAddress: poolInfo.pool,
-            borrowerWalletAddress: account,
-          },
-          WIDGET_STEP.Evaluation,
-        )
-        handleApprove()
-        setStatus('success')
-      }
-    }
-    fetchData()
-  }, [
-    account,
-    chainId,
-    checkingEA,
-    handleApprove,
-    poolInfo.assetAddress,
-    poolInfo.pool,
-  ])
-
-  const styles = {
-    wrapper: css`
-      height: 518px;
-      position: relative;
-    `,
-    header: css`
-      ${theme.cssMixins.rowHCentered};
-      margin-top: -5px;
-    `,
-    content: css`
-      ${theme.cssMixins.rowHCentered};
-      margin-top: 30px;
-      font-family: 'Uni-Neue-Regular';
-      font-size: 16px;
-      line-height: 24px;
-      color: #49505b;
-      margin-bottom: 65px;
-    `,
-    checkWrapper: css`
-      ${theme.cssMixins.rowVCentered}
-      width: 100%;
-      height: 72px;
-      background: #f9f8fa;
-      border-radius: 4px;
-      font-family: 'Uni-Neue-Regular';
-      font-size: 16px;
-      color: #49505b;
-    `,
-    checkIcon: css`
-      ${theme.cssMixins.rowCentered}
-      width: 105px;
-      height: 100%;
-
-      & > img {
-        max-width: 100%;
-        max-height: 100%;
-      }
-    `,
-    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 goToNextStep = () => {
-    dispatch(setStep(WIDGET_STEP.ChooseAmount))
-  }
-
-  return (
-    <Box css={styles.wrapper}>
-      <Typography variant='h6' css={styles.header}>
-        Borrow
-      </Typography>
-      <Box css={styles.content}>
-        Looks like it’s your first time around here. Let’s see if you qualify...
-      </Box>
-      <Box css={styles.checkWrapper} sx={{ marginBottom: '16px' }}>
-        <Box css={styles.checkIcon}>
-          {status === 'checking' && <img src={spinner} alt='loading...' />}
-          {status === 'success' && <CheckGreenIcon />}
-        </Box>
-        <Box>Checking your income</Box>
-      </Box>
-      <Box css={styles.checkWrapper}>
-        <Box css={styles.checkIcon}>
-          {status === 'checking' && <img src={spinner} alt='loading...' />}
-          {status === 'success' && <CheckGreenIcon />}
-        </Box>
-        <Box>Checking other qualifications</Box>
-      </Box>
-      {status === 'success' && (
-        <>
-          <Box css={styles.congratsWrapper}>
-            <CheckCircleIcon />
-            <Box sx={{ marginLeft: '16px' }}>
-              Congrats, you are qualified to borrow
-            </Box>
-          </Box>
-          <Box css={styles.bottom}>
-            <Button variant='contained' onClick={goToNextStep}>
-              CONTINUE TO BORROW
-            </Button>
-          </Box>
-        </>
-      )}
-    </Box>
-  )
-}
+import { Box, Button, css, Typography, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import { PoolInfoType } from '@huma-finance/shared'
+import React, { useEffect, useState } from 'react'
+
+import useEA from '../../../hooks/useEA'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { CheckCircleIcon, CheckGreenIcon } from '../../icons'
+import spinner from '../../icons/spinner.gif'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleApprove: () => void
+}
+
+export function Evaluation({
+  poolInfo,
+  handleApprove,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const { checkingEA } = useEA()
+  const dispatch = useAppDispatch()
+  const { account, chainId } = useWeb3React()
+  const [status, setStatus] = useState<'checking' | 'success'>('checking')
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (account && chainId) {
+        await checkingEA(
+          {
+            poolAddress: poolInfo.pool,
+            borrowerWalletAddress: account,
+          },
+          WIDGET_STEP.Evaluation,
+        )
+        handleApprove()
+        setStatus('success')
+      }
+    }
+    fetchData()
+  }, [
+    account,
+    chainId,
+    checkingEA,
+    handleApprove,
+    poolInfo.assetAddress,
+    poolInfo.pool,
+  ])
+
+  const styles = {
+    wrapper: css`
+      height: 518px;
+      position: relative;
+    `,
+    header: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: -5px;
+    `,
+    content: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: 30px;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      line-height: 24px;
+      color: #49505b;
+      margin-bottom: 65px;
+    `,
+    checkWrapper: css`
+      ${theme.cssMixins.rowVCentered}
+      width: 100%;
+      height: 72px;
+      background: #f9f8fa;
+      border-radius: 4px;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      color: #49505b;
+    `,
+    checkIcon: css`
+      ${theme.cssMixins.rowCentered}
+      width: 105px;
+      height: 100%;
+
+      & > img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    `,
+    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 goToNextStep = () => {
+    dispatch(setStep(WIDGET_STEP.ChooseAmount))
+  }
+
+  return (
+    <Box css={styles.wrapper}>
+      <Typography variant='h6' css={styles.header}>
+        Borrow
+      </Typography>
+      <Box css={styles.content}>
+        Looks like it’s your first time around here. Let’s see if you qualify...
+      </Box>
+      <Box css={styles.checkWrapper} sx={{ marginBottom: '16px' }}>
+        <Box css={styles.checkIcon}>
+          {status === 'checking' && <img src={spinner} alt='loading...' />}
+          {status === 'success' && <CheckGreenIcon />}
+        </Box>
+        <Box>Checking your income</Box>
+      </Box>
+      <Box css={styles.checkWrapper}>
+        <Box css={styles.checkIcon}>
+          {status === 'checking' && <img src={spinner} alt='loading...' />}
+          {status === 'success' && <CheckGreenIcon />}
+        </Box>
+        <Box>Checking other qualifications</Box>
+      </Box>
+      {status === 'success' && (
+        <>
+          <Box css={styles.congratsWrapper}>
+            <CheckCircleIcon />
+            <Box sx={{ marginLeft: '16px' }}>
+              Congrats, you are qualified to borrow
+            </Box>
+          </Box>
+          <Box css={styles.bottom}>
+            <Button variant='contained' onClick={goToNextStep}>
+              CONTINUE TO BORROW
+            </Button>
+          </Box>
+        </>
+      )}
+    </Box>
+  )
+}