@huma-finance/widgets 0.0.43-beta.108 → 0.0.43-beta.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.43-beta.108+d2daf86",
+  "version": "0.0.43-beta.112+6bf486b",
   "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.43-beta.108+d2daf86",
-    "@huma-finance/shared": "^0.0.42",
+    "@huma-finance/sdk": "^0.0.43-beta.112+6bf486b",
+    "@huma-finance/shared": "^0.0.43-beta.112+6bf486b",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -192,5 +192,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "d2daf869597daff75dab649142fa62ea6bfc70c1"
+  "gitHead": "6bf486be701344cfbb3a6c8aa6b662d64c3ba096"
 }

package/src/components/Activity.tsx

@@ -8,7 +8,7 @@ import {
   timeUtil,
   useMQ,
 } from '@huma-finance/shared'
-import { Box, css } from '@mui/material'
+import { Box, css, useTheme } from '@mui/material'
 import { useWeb3React } from '@web3-react/core'
 import { useEffect, useState } from 'react'
 
@@ -64,6 +64,7 @@ export function Activity({
   poolInfo,
   targetEvents,
 }: Props): React.ReactElement | null {
+  const theme = useTheme()
   const { account } = useWeb3React()
   const { decimals } = poolInfo.poolUnderlyingToken
   const [events, setEvents] = useState<ActivityDataType[] | undefined>()
@@ -80,9 +81,9 @@ export function Activity({
 
   const getPadding = () => {
     if (isSmSize) {
-      return '16px 24px'
+      return theme.spacing(2, 3)
     }
-    return '33px 48px'
+    return theme.spacing(4, 6)
   }
 
   useEffect(() => {
@@ -101,13 +102,13 @@ export function Activity({
 
   const styles = {
     wrapper: css`
-      margin-top: 71px;
+      margin-top: ${theme.spacing(9)};
     `,
     title: css`
       font-family: 'Uni-Neue-Black';
       font-size: 24px;
       color: #6b6572;
-      margin-bottom: 14px;
+      margin-bottom: ${theme.spacing(2)};
     `,
     tableWrapper: css`
       background: #ffffff;

package/src/components/ApproveAllowanceModal.tsx

@@ -61,17 +61,17 @@ export function ApproveAllowanceModal({
   const styles = {
     iconWrapper: css`
       ${theme.cssMixins.rowCentered};
-      margin-top: 50px;
+      margin-top: ${theme.spacing(6)};
       & > img {
         width: 220px;
       }
     `,
     description: css`
-      margin-top: 34px;
+      margin-top: ${theme.spacing(4)};
       font-family: 'Uni-Neue-Regular';
       font-size: 16px;
       color: #a8a1b2;
-      padding: 0 12px;
+      padding: ${theme.spacing(0, 1)};
     `,
   }
 

package/src/components/ChainSupportProvider.tsx

@@ -1,4 +1,5 @@
 import { supportedChainId } from '@huma-finance/shared'
+import { useTheme } from '@mui/material'
 import { useWeb3React } from '@web3-react/core'
 import { useEffect, useState } from 'react'
 
@@ -9,6 +10,7 @@ import { HumaModal, HumaModalHeader } from './humaModal'
 export function ChainSupportProvider({
   children,
 }: WCProps): React.ReactElement | null {
+  const theme = useTheme()
   const { chainId } = useWeb3React()
   const chainSupported = !!supportedChainId(chainId)
   const [chainNotSupportedOpen, setChainNotSupportedOpen] = useState(false)
@@ -35,7 +37,7 @@ export function ChainSupportProvider({
       overflowY='auto'
       onClose={handleClose}
       width='480px'
-      padding='30px 40px'
+      padding={theme.spacing(4, 5)}
       disableBackdropClick
     >
       <HumaModalHeader onClose={handleClose} height={0} />

package/src/components/ChooseAmountModal.tsx

@@ -67,7 +67,7 @@ export function ChooseAmountModal({
       font-family: 'Uni-Neue-Regular';
       font-size: 16px;
       color: #a8a1b2;
-      margin-top: 16px;
+      margin-top: ${theme.spacing(2)};
     `,
     chosenAmountWrapper: css`
       ${theme.cssMixins.rowCentered};
@@ -76,8 +76,8 @@ export function ChooseAmountModal({
       -webkit-text-fill-color: transparent;
       font-weight: 700;
       font-size: 32px;
-      margin-bottom: 10px;
-      margin-top: 30px;
+      margin-bottom: ${theme.spacing(1)};
+      margin-top: ${theme.spacing(4)};
     `,
     chosenAmount: css`
       font-family: 'Inter-Bold';
@@ -85,12 +85,12 @@ export function ChooseAmountModal({
     `,
     chosenAmountSymbol: css`
       font-size: 75%;
-      margin-left: 5px;
+      margin-left: ${theme.spacing(0.5)};
       letter-spacing: 0.1px;
     `,
     inputAmountWrapper: css`
-      margin-bottom: 10px;
-      margin-top: 30px;
+      margin-bottom: ${theme.spacing(1)};
+      margin-top: ${theme.spacing(4)};
     `,
     inputAmount: css`
       ${theme.cssMixins.rowSpaceBetweened};
@@ -103,11 +103,11 @@ export function ChooseAmountModal({
     `,
     amountAvailable: css`
       ${theme.cssMixins.rowVCentered};
-      margin-top: 5px;
-      margin-bottom: 100px;
+      margin-top: ${theme.spacing(0.5)};
+      margin-bottom: ${theme.spacing(12)};
       font-size: 16px;
       & > svg {
-        margin-right: 5px;
+        margin-right: ${theme.spacing(0.5)};
       }
     `,
     tokenIcon: {
@@ -123,7 +123,7 @@ export function ChooseAmountModal({
         font-size: 24px;
       }
       & > svg:first-of-type {
-        margin-bottom: -10px;
+        margin-bottom: ${theme.spacing(-1)};
       }
     `,
     input: css`
@@ -131,7 +131,7 @@ export function ChooseAmountModal({
       -webkit-text-fill-color: ${theme.palette.primary.main};
     `,
     slider: css`
-      margin-bottom: 54px;
+      margin-bottom: ${theme.spacing(7)};
       &.MuiSlider-root {
         height: 8px !important;
         color: #e9e9e9;
@@ -158,7 +158,7 @@ export function ChooseAmountModal({
       color: #423b46;
     `,
     divider: css`
-      margin: 16px 0;
+      margin: ${theme.spacing(2, 0)};
       background: #49505b;
       border-color: #e9e3f1;
     `,
@@ -166,18 +166,18 @@ export function ChooseAmountModal({
       font-family: 'Uni-Neue-Bold';
       width: 100%;
       position: absolute;
-      bottom: ${isXsSize ? 20 : 0}px;
+      bottom: ${theme.spacing(isXsSize ? 2 : 0)};
     `,
     terms: css`
       ${theme.cssMixins.rowHCentered};
       font-weight: 400;
       font-size: 12px;
       color: #a8a1b2;
-      margin-top: 8px;
+      margin-top: ${theme.spacing(1)};
       letter-spacing: 0px;
       width: 100%;
       position: absolute;
-      bottom: -22px;
+      bottom: ${theme.spacing(-3)};
     `,
   }
 

package/src/components/ConfirmTransferModal.tsx

@@ -33,17 +33,17 @@ export function ConfirmTransferModal({
     `,
     header: css`
       ${theme.cssMixins.rowHCentered};
-      margin-top: -5px;
+      margin-top: ${theme.spacing(-0.5)};
     `,
     description: css`
       font-family: 'Uni-Neue-Regular';
       font-size: 16px;
       color: #49505b;
-      margin-top: 30px;
+      margin-top: ${theme.spacing(4)};
       text-align: center;
     `,
     transferWrapper: css`
-      margin-top: 75px;
+      margin-top: ${theme.spacing(9)};
     `,
     transfer: css`
       font-family: 'Uni-Neue-Regular';
@@ -55,8 +55,8 @@ export function ConfirmTransferModal({
       font-weight: 500;
       font-size: 16px;
       color: #49505b;
-      padding: 24px 20px;
-      margin-bottom: 9px;
+      padding: ${theme.spacing(3, 2)};
+      margin-bottom: ${theme.spacing(1)};
       position: relative;
       box-sizing: border-box;
     `,
@@ -108,7 +108,7 @@ export function ConfirmTransferModal({
     `,
     usdcIcon: css`
       width: 22px;
-      margin-right: 20px;
+      margin-right: ${theme.spacing(2)};
       & > path:first-of-type {
         fill: #76707e;
       }
@@ -124,7 +124,9 @@ export function ConfirmTransferModal({
       <Box css={styles.transferWrapper}>
         <Box css={styles.transfer}>
           <Box css={styles.transferItem}>
-            <ReceiptIcon css={{ width: '24px', marginRight: '20px' }} />
+            <ReceiptIcon
+              css={{ width: '24px', marginRight: theme.spacing(2) }}
+            />
             {items[0].leftText}
           </Box>
           <ArrowForwardIosIcon

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

@@ -62,16 +62,16 @@ export function Evaluation({
     `,
     header: css`
       ${theme.cssMixins.rowHCentered};
-      margin-top: -5px;
+      margin-top: ${theme.spacing(-0.5)};
     `,
     content: css`
       ${theme.cssMixins.rowHCentered};
-      margin-top: 30px;
+      margin-top: ${theme.spacing(4)};
       font-family: 'Uni-Neue-Regular';
       font-size: 16px;
       line-height: 24px;
       color: #49505b;
-      margin-bottom: 65px;
+      margin-bottom: ${theme.spacing(8)};
     `,
     checkWrapper: css`
       ${theme.cssMixins.rowVCentered}
@@ -96,9 +96,9 @@ export function Evaluation({
     congratsWrapper: css`
       font-family: 'Uni-Neue-Regular';
       font-size: 16px;
-      padding: 0 16px;
+      padding: ${theme.spacing(0, 2)};
       ${theme.cssMixins.rowVCentered}
-      margin-top: 60px;
+      margin-top: ${theme.spacing(8)};
       height: 52px;
       background: linear-gradient(
           0deg,

package/src/components/ErrorModal.tsx

@@ -40,12 +40,12 @@ export function ErrorModal({
     `,
     header: css`
       ${theme.cssMixins.rowHCentered};
-      margin-top: -5px;
+      margin-top: ${theme.spacing(-0.5)};
     `,
     sorry: css`
       ${theme.cssMixins.rowHCentered};
-      margin-top: 100px;
-      margin-right: 30px;
+      margin-top: ${theme.spacing(12)};
+      margin-right: ${theme.spacing(4)};
       & > img {
         width: 170px;
       }
@@ -54,7 +54,7 @@ export function ErrorModal({
       box-sizing: border-box;
       width: 100%;
       display: inline-table;
-      padding: 16px 0;
+      padding: ${theme.spacing(2, 0)};
       background: linear-gradient(
           0deg,
           rgba(255, 255, 255, 0.9),
@@ -63,23 +63,23 @@ export function ErrorModal({
         #d32f2f;
       border-radius: 4px;
       position: relative;
-      margin-top: 72px;
+      margin-top: ${theme.spacing(9)};
       height: 79px;
     `,
     errorIcon: css`
       position: absolute;
       font-size: 20px;
       color: #d32f2f;
-      margin: 0 15px;
+      margin: ${theme.spacing(0, 2)};
     `,
     messageWrapper: css`
       color: #541313;
       font-family: 'Uni-Neue-Regular';
       font-size: 16px;
-      padding-left: 50px;
+      padding-left: ${theme.spacing(6)};
     `,
     errorMessage: css`
-      margin-top: 4px;
+      margin-top: ${theme.spacing(0.5)};
       font-size: 14px;
       font-family: 'Uni-Neue-Regular';
       color: #541313;
@@ -90,7 +90,7 @@ export function ErrorModal({
       -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;
-      margin-right: 20px;
+      margin-right: ${theme.spacing(2)};
     `,
     okButton: css`
       & .MuiButtonBase-root {

package/src/components/Factoring/FactoredList.tsx

@@ -77,9 +77,9 @@ export function FactoredList<T>({
 
   const getPadding = () => {
     if (isMdSize) {
-      return '0 8px 8px 8px'
+      return theme.spacing(0, 1, 1, 1)
     }
-    return '0 16px 16px 16px'
+    return theme.spacing(0, 2, 2, 2)
   }
 
   const styles = {
@@ -87,7 +87,7 @@ export function FactoredList<T>({
       font-family: 'Uni-Neue-Black';
       color: ${theme.palette.text.primary};
       font-size: 24px;
-      margin-bottom: 16px;
+      margin-bottom: ${theme.spacing(2)};
     `,
     description: css`
       font-family: 'Uni-Neue-Regular';
@@ -95,7 +95,7 @@ export function FactoredList<T>({
       font-size: 1rem;
     `,
     tableWrapper: css`
-      margin-top: 24px;
+      margin-top: ${theme.spacing(3)};
       padding: ${getPadding()};
       background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
       border: 1px solid #ffffff;
@@ -106,14 +106,14 @@ export function FactoredList<T>({
       width: calc(100% - 30px);
       position: absolute;
       top: 0;
-      left: 15px;
+      left: ${theme.spacing(2)};
     `,
   }
 
   return (
     <Box>
       <Box css={styles.title}>Factored {title}</Box>
-      <Box css={styles.description} marginBottom='47px'>
+      <Box css={styles.description} marginBottom={theme.spacing(6)}>
         {!isActive && (
           <Box component='span'>
             Please connect wallet to check your factored {title.toLowerCase()}.

package/src/components/Factoring/UpcomingList.tsx

@@ -30,9 +30,9 @@ export function UpcomingList<T>({
 
   const getPadding = () => {
     if (isMdSize) {
-      return '0 8px 8px 8px'
+      return theme.spacing(0, 1, 1, 1)
     }
-    return '0 16px 16px 16px'
+    return theme.spacing(0, 2, 2, 2)
   }
 
   const styles = {
@@ -40,7 +40,7 @@ export function UpcomingList<T>({
       font-family: 'Uni-Neue-Black';
       color: ${theme.palette.text.primary};
       font-size: 24px;
-      margin-bottom: 16px;
+      margin-bottom: ${theme.spacing(2)};
     `,
     description: css`
       font-family: 'Uni-Neue-Regular';
@@ -48,7 +48,7 @@ export function UpcomingList<T>({
       font-size: 1rem;
     `,
     tableWrapper: css`
-      margin-top: 24px;
+      margin-top: ${theme.spacing(3)};
       padding: ${getPadding()};
       background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
       border: 1px solid #ffffff;
@@ -59,14 +59,14 @@ export function UpcomingList<T>({
       width: calc(100% - 30px);
       position: absolute;
       top: 0;
-      left: 15px;
+      left: ${theme.spacing(2)};
     `,
   }
 
   return (
     <Box>
       <Box css={styles.title}>{title}</Box>
-      <Box css={styles.description} marginBottom='47px'>
+      <Box css={styles.description} marginBottom={theme.spacing(6)}>
         {!isActive && <Box component='span'>{connectWalletDesc}</Box>}
         {isActive && !items?.length && <Box>{noItemDesc}</Box>}
         {isActive && !!items?.length && (

package/src/components/HumaSnackBar.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react'
-import { Alert, Box, Snackbar } from '@mui/material'
+import { Alert, Box, Snackbar, useTheme } from '@mui/material'
 
 type Props = {
   open: boolean
@@ -18,18 +18,20 @@ export function HumaSnackBar({
   severity,
   onClose,
 }: Props) {
+  const theme = useTheme()
+
   const styles = {
     snackbar: css`
-      margin-top: 80px;
+      margin-top: ${theme.spacing(10)};
     `,
     alert: css`
       max-width: 400px;
-      padding: 20px 35px 20px 20px;
+      padding: ${theme.spacing(2, 4, 2, 2)};
       border-radius: 16px;
       overflow: hidden;
     `,
     title: css`
-      margin-bottom: 10px;
+      margin-bottom: ${theme.spacing(1)};
       font-size: 16px;
       font-family: 'Uni-Neue-Bold';
     `,

package/src/components/HumaTable.tsx

@@ -49,7 +49,7 @@ export function HumaTable<T>({
       display: flex;
       flex-direction: column;
       align-items: center;
-      margin-top: 20px;
+      margin-top: ${theme.spacing(2)};
       font-family: 'Uni-Neue-Regular';
       font-size: 14px;
     `,
@@ -132,7 +132,7 @@ export function HumaTable<T>({
                           sx={{
                             display: 'flex',
                             alignItems: 'center',
-                            marginLeft: index ? '12px' : '0',
+                            marginLeft: theme.spacing(index ? 1 : 0),
                           }}
                         >
                           {row[column.dataIndex]}
@@ -144,7 +144,7 @@ export function HumaTable<T>({
                           sx={{
                             display: 'flex',
                             alignItems: 'center',
-                            marginLeft: index ? '12px' : '0',
+                            marginLeft: theme.spacing(index ? 1 : 0),
                             lineHeight: 0,
                             height: 0,
                           }}
@@ -187,7 +187,7 @@ export function HumaTable<T>({
             MenuProps: {
               sx: {
                 '.MuiTablePagination-menuItem': {
-                  padding: '4px 0',
+                  padding: theme.spacing(1, 0),
                   display: 'flex',
                   justifyContent: 'center',
                   fontSize: '14px',

package/src/components/Lend/supply/1-Evaluation/EvaluationEA.tsx

@@ -29,15 +29,15 @@ export function EvaluationEA({
   const styles = {
     iconWrapper: css`
       ${theme.cssMixins.rowCentered};
-      margin-top: 65px;
+      margin-top: ${theme.spacing(8)};
       & > img {
         width: 144px;
       }
     `,
     description: css`
       ${theme.cssMixins.rowCentered};
-      margin-top: 82px;
-      padding: 0 20px;
+      margin-top: ${theme.spacing(10)};
+      padding: ${theme.spacing(0, 2)};
       font-family: 'Uni-Neue-Regular';
       font-size: 16px;
       color: #a8a1b2;

package/src/components/Lend/supply/1-Evaluation/EvaluationKYC.tsx

@@ -1,5 +1,6 @@
 import {
   CHAINS,
+  checkIsDev,
   configUtil,
   DocSignatureStatus,
   IdentityService,
@@ -15,7 +16,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { useAppDispatch } from '../../../../hooks/useRedux'
 import { setError } from '../../../../store/widgets.reducers'
-import { envUtil } from '../../../../utils/env'
 import { BottomButton } from '../../../BottomButton'
 import { HumaSnackBar } from '../../../HumaSnackBar'
 import { ApproveLenderImg } from '../../../images'
@@ -84,7 +84,7 @@ export function EvaluationKYC({
 }: Props): React.ReactElement | null {
   const theme = useTheme()
   const dispatch = useAppDispatch()
-  const isDev = envUtil.checkIsDev()
+  const isDev = checkIsDev()
   const { account, chainId } = useWeb3React()
   const { kycProvider, code, kycPool } = useParamsSearch()
   const { isWalletOwnershipVerified, setError: setAuthError } =
@@ -103,15 +103,15 @@ export function EvaluationKYC({
   const styles = {
     iconWrapper: css`
       ${theme.cssMixins.rowCentered};
-      margin-top: 65px;
+      margin-top: ${theme.spacing(8)};
       & > img {
         width: 144px;
       }
     `,
     description: css`
       ${theme.cssMixins.rowCentered};
-      margin-top: 82px;
-      padding: 0 20px;
+      margin-top: ${theme.spacing(10)};
+      padding: ${theme.spacing(0, 2)};
       font-family: 'Uni-Neue-Regular';
       font-size: 16px;
       color: #a8a1b2;

package/src/components/Notifi/NotifiSubscriptionModal.tsx

@@ -11,6 +11,7 @@ import {
   BroadcastEventTypeItem,
 } from '@notifi-network/notifi-frontend-client'
 import {
+  checkIsDev,
   getBlockchainConfigFromChain,
   txAtom,
   getNotifiDappId,
@@ -28,7 +29,6 @@ import Email from '@mui/icons-material/Email'
 import { useResetAtom } from 'jotai/utils'
 
 import { WrapperModal } from '../WrapperModal'
-import { envUtil } from '../../utils/env'
 import { BottomButton } from '../BottomButton'
 import { LoadingModal } from '../LoadingModal'
 import { CheckIcon } from '../icons'
@@ -111,8 +111,8 @@ export function NotifiSubscriptionModal({
       if (account != null && chainId != null) {
         const client = newFrontendClient({
           account: { publicKey: account },
-          tenantId: getNotifiDappId(envUtil.checkIsDev()),
-          env: envUtil.checkIsDev() ? 'Development' : 'Production',
+          tenantId: getNotifiDappId(checkIsDev()),
+          env: checkIsDev() ? 'Development' : 'Production',
           walletBlockchain: getBlockchainConfigFromChain(chainId),
         })
 
@@ -193,7 +193,7 @@ export function NotifiSubscriptionModal({
       font-family: 'Uni-Neue-Regular';
       font-size: 16px;
       color: #a8a1b2;
-      margin-top: 48px;
+      margin-top: ${theme.spacing(6)};
     `,
     inputField: css`
       width: 90%;
@@ -204,12 +204,12 @@ export function NotifiSubscriptionModal({
     `,
     header: css`
       ${theme.cssMixins.rowHCentered};
-      margin-top: -5px;
+      margin-top: ${theme.spacing(-0.5)};
     `,
     check: css`
       width: 100%;
       ${theme.cssMixins.rowHCentered};
-      margin-top: 82px;
+      margin-top: ${theme.spacing(10)};
     `,
   }
 
@@ -235,7 +235,7 @@ export function NotifiSubscriptionModal({
 
   return (
     <WrapperModal title='Connect Your Email'>
-      <Typography variant='body2' margin='12px 0'>
+      <Typography variant='body2' margin={theme.spacing(1, 0)}>
         Connect your wallet to receive important emails about your account
       </Typography>
       <Box css={styles.inputWrapper}>

package/src/components/SignIn.tsx

@@ -11,24 +11,24 @@ export function SignIn(): React.ReactElement {
     `,
     header: css`
       ${theme.cssMixins.rowHCentered};
-      margin-top: -5px;
+      margin-top: ${theme.spacing(-0.5)};
     `,
     icon: css`
       ${theme.cssMixins.rowHCentered};
-      margin-top: 100px;
-      margin-right: 30px;
+      margin-top: ${theme.spacing(12)};
+      margin-right: ${theme.spacing(4)};
       & > img {
         width: 170px;
       }
     `,
     content: css`
       ${theme.cssMixins.rowHCentered};
-      margin-top: 30px;
+      margin-top: ${theme.spacing(4)};
       font-family: 'Uni-Neue-Regular';
       font-size: 16px;
       line-height: 24px;
       color: #49505b;
-      margin-bottom: 65px;
+      margin-bottom: ${theme.spacing(8)};
     `,
   }