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

package/src/components/SuperfluidFactoring/SuperfluidUpcomingList.tsx

@@ -6,7 +6,7 @@ import {
   PoolInfoType,
   toBigNumber,
 } from '@huma-finance/shared'
-import { Button } from '@mui/material'
+import { Button, useTheme } from '@mui/material'
 import { useWeb3React } from '@web3-react/core'
 import React, { useCallback, useEffect, useState } from 'react'
 
@@ -100,6 +100,7 @@ export function SuperfluidUpcomingList({
   loading,
   handleGetPaid,
 }: Props): React.ReactElement {
+  const theme = useTheme()
   const { account, isActive } = useWeb3React()
   const [streams, setStreams] = useState<StreamItem[] | undefined>()
   const { data } = useQuery<{ streams: Stream[] }>(GET_RECEIVED_STREAMS, {
@@ -154,7 +155,7 @@ export function SuperfluidUpcomingList({
           type='link'
           size='small'
           variant='contained'
-          sx={{ marginTop: '20px' }}
+          sx={{ marginTop: theme.spacing(2) }}
           href='https://app.superfluid.finance/'
           target='_blank'
         >

package/src/components/SuperfluidFactoring/index.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mui/material'
+import { Box, useTheme } from '@mui/material'
 import { useWeb3React } from '@web3-react/core'
 import {
   CreditEvent,
@@ -17,6 +17,7 @@ import { SuperfluidFactoredList } from './SuperfluidFactoredList'
 import { StreamItem, SuperfluidUpcomingList } from './SuperfluidUpcomingList'
 
 export function SuperfluidFactoring(): React.ReactElement {
+  const theme = useTheme()
   const poolName = POOL_NAME.Superfluid
   const { chainId } = useWeb3React()
   const {
@@ -37,7 +38,7 @@ export function SuperfluidFactoring(): React.ReactElement {
   return (
     <Box css={styles.wrapper}>
       <Box css={styles.title}>Stream Factoring</Box>
-      <Box css={styles.description} marginBottom='47px'>
+      <Box css={styles.description} marginBottom={theme.spacing(6)}>
         {PoolMap.Stream[poolName]?.borrowDesc}
       </Box>
       {poolInfo && (

package/src/components/TxDoneModal.tsx

@@ -29,20 +29,20 @@ export function TxDoneModal({
     `,
     header: css`
       ${theme.cssMixins.rowHCentered};
-      margin-top: -5px;
+      margin-top: ${theme.spacing(-0.5)};
     `,
     content: css`
       ${theme.cssMixins.colVCentered};
       font-family: 'Uni-Neue-Regular';
       font-size: 18px;
       color: #423b46;
-      margin-top: 64px;
+      margin-top: ${theme.spacing(8)};
       text-align: center;
     `,
     check: css`
       width: 100%;
       ${theme.cssMixins.rowHCentered};
-      margin-top: 82px;
+      margin-top: ${theme.spacing(10)};
     `,
     doneButton: css`
       width: 100%;
@@ -67,7 +67,7 @@ export function TxDoneModal({
       </Box>
       <Box css={styles.content}>
         {content.map((item) => (
-          <Box sx={{ marginTop: '10px' }} key={item}>
+          <Box sx={{ marginTop: theme.spacing(1) }} key={item}>
             {item}
           </Box>
         ))}

package/src/components/WidgetWrapper.tsx

@@ -3,6 +3,7 @@ import { useAtom } from 'jotai'
 import { useResetAtom } from 'jotai/utils'
 import React, { useCallback, useEffect } from 'react'
 
+import { useTheme } from '@mui/material'
 import { useAppDispatch, useAppSelector } from '../hooks/useRedux'
 import { resetState, setError } from '../store/widgets.reducers'
 import { selectWidgetState } from '../store/widgets.selectors'
@@ -27,6 +28,7 @@ export function WidgetWrapper({
   handleSuccess,
   children,
 }: WCProps<Props>): React.ReactElement | null {
+  const theme = useTheme()
   const dispatch = useAppDispatch()
   const { step } = useAppSelector(selectWidgetState)
   const [{ state, failReason, txReceipt }] = useAtom(sendTxAtom)
@@ -63,7 +65,7 @@ export function WidgetWrapper({
       overflowY='auto'
       onClose={handleCloseModal}
       width='480px'
-      padding='30px 40px'
+      padding={theme.spacing(4, 5)}
       disableBackdropClick
     >
       <HumaModalHeader onClose={handleCloseModal} height={0} />

package/src/components/WrapperModal.tsx

@@ -23,11 +23,11 @@ export function WrapperModal({
       ${theme.cssMixins.rowHCentered};
       font-family: 'Uni-Neue-Bold';
       font-size: 20px;
-      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;

package/src/components/humaModal/HumaModal.tsx

@@ -23,7 +23,7 @@ export function HumaModal({
   overflow,
   overflowY,
   width = '480px',
-  padding = '30px',
+  padding = '32px',
   disableBackdropClick = false,
 }: HumaModalType): React.ReactElement {
   const { isXsSize } = useMQ()

package/src/hooks/useEA.ts

@@ -1,4 +1,5 @@
 import {
+  checkIsDev,
   EAPayload,
   EARejectionError,
   EARejectMessage,
@@ -11,7 +12,6 @@ import { useCallback } from 'react'
 
 import { setApproval, setError } from '../store/widgets.reducers'
 import { WIDGET_STEP } from '../store/widgets.store'
-import { envUtil } from '../utils/env'
 import { useAppDispatch } from './useRedux'
 
 const useEA = () => {
@@ -21,16 +21,12 @@ const useEA = () => {
     isWalletOwnershipVerificationRequired,
     isWalletOwnershipVerified,
     setError: setAuthError,
-  } = useAuthErrorHandling(envUtil.checkIsDev())
+  } = useAuthErrorHandling(checkIsDev())
 
   const checkingEA = useCallback(
     async (payload: EAPayload, nextStep: WIDGET_STEP) => {
       try {
-        const result = await EAService.approve(
-          payload,
-          chainId!,
-          envUtil.checkIsDev(),
-        )
+        const result = await EAService.approve(payload, chainId!, checkIsDev())
         dispatch(setApproval({ ...result, nextStep }))
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (e: any) {

package/src/hooks/useNotifi.ts

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react'
 import {
+  checkIsDev,
   doesChainSupportNotifi,
   getBlockchainConfigFromChain,
 } from '@huma-finance/shared'
 import { newFrontendClient } from '@notifi-network/notifi-frontend-client'
-import { envUtil } from '../utils/env'
 
 export const useIsFirstTimeNotifiUser = (
   account: string | undefined,
@@ -18,7 +18,7 @@ export const useIsFirstTimeNotifiUser = (
         const client = newFrontendClient({
           account: { publicKey: account },
           tenantId: 'humadapp',
-          env: envUtil.checkIsDev() ? 'Development' : 'Production',
+          env: checkIsDev() ? 'Development' : 'Production',
           walletBlockchain: getBlockchainConfigFromChain(chainId),
         })
 
@@ -59,7 +59,7 @@ export const useDoesChainSupportNotifi = (
     const checkNotifiChainSupported = async () => {
       if (account != null && chainId != null) {
         setNotifiChainSupported(
-          doesChainSupportNotifi(chainId, envUtil.checkIsDev(), account),
+          doesChainSupportNotifi(chainId, checkIsDev(), account),
         )
       }
     }

package/src/utils/env.ts

@@ -1,8 +0,0 @@
-const checkIsDev = () =>
-  window.location.hostname.startsWith('dev') ||
-  window.location.hostname.startsWith('deploy-preview') ||
-  process.env.NODE_ENV === 'development'
-
-export const envUtil = {
-  checkIsDev,
-}