@huma-finance/widgets 0.0.10 → 0.0.12

package/src/components/TxDoneModal.tsx

@@ -1,83 +1,83 @@
-import { Box, Button, css, Typography, useTheme } from '@mui/material'
-import { txAtom } from '@huma-finance/shared'
-import { useResetAtom } from 'jotai/utils'
-import React, { useCallback } from 'react'
-
-import { useAppDispatch } from '../hooks/useRedux'
-import { resetState } from '../store/widgets.reducers'
-import { CheckIcon } from './icons'
-
-type Props = {
-  content: string[]
-  handleAction: () => void
-}
-
-export function TxDoneModal({
-  content,
-  handleAction,
-}: Props): React.ReactElement {
-  const theme = useTheme()
-  const dispatch = useAppDispatch()
-  const reset = useResetAtom(txAtom)
-
-  const styles = {
-    wrapper: css`
-      height: 518px;
-      position: relative;
-    `,
-    header: css`
-      ${theme.cssMixins.rowHCentered};
-      margin-top: -5px;
-    `,
-    content: css`
-      ${theme.cssMixins.colVCentered};
-      font-family: 'Uni-Neue-Regular';
-      font-size: 18px;
-      color: #423b46;
-      margin-top: 64px;
-      text-align: center;
-    `,
-    check: css`
-      width: 100%;
-      ${theme.cssMixins.rowHCentered};
-      margin-top: 82px;
-    `,
-    doneButton: css`
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-    `,
-  }
-
-  const handleCloseModal = useCallback(() => {
-    reset()
-    dispatch(resetState())
-    handleAction()
-  }, [dispatch, handleAction, reset])
-
-  return (
-    <Box css={styles.wrapper}>
-      <Typography variant='h6' css={styles.header}>
-        Transaction Completed
-      </Typography>
-      <Box css={styles.check}>
-        <CheckIcon />
-      </Box>
-      <Box css={styles.content}>
-        {content.map((item) => (
-          <Box sx={{ marginTop: '10px' }} key={item}>
-            {item}
-          </Box>
-        ))}
-      </Box>
-      <Button
-        className='transaction-done-modal-close-btn'
-        variant='contained'
-        css={styles.doneButton}
-        onClick={handleCloseModal}
-      >
-        DONE
-      </Button>
-    </Box>
-  )
-}
+import { Box, Button, css, Typography, useTheme } from '@mui/material'
+import { txAtom } from '@huma-finance/shared'
+import { useResetAtom } from 'jotai/utils'
+import React, { useCallback } from 'react'
+
+import { useAppDispatch } from '../hooks/useRedux'
+import { resetState } from '../store/widgets.reducers'
+import { CheckIcon } from './icons'
+
+type Props = {
+  content: string[]
+  handleAction: () => void
+}
+
+export function TxDoneModal({
+  content,
+  handleAction,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+  const reset = useResetAtom(txAtom)
+
+  const styles = {
+    wrapper: css`
+      height: 518px;
+      position: relative;
+    `,
+    header: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: -5px;
+    `,
+    content: css`
+      ${theme.cssMixins.colVCentered};
+      font-family: 'Uni-Neue-Regular';
+      font-size: 18px;
+      color: #423b46;
+      margin-top: 64px;
+      text-align: center;
+    `,
+    check: css`
+      width: 100%;
+      ${theme.cssMixins.rowHCentered};
+      margin-top: 82px;
+    `,
+    doneButton: css`
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+    `,
+  }
+
+  const handleCloseModal = useCallback(() => {
+    reset()
+    dispatch(resetState())
+    handleAction()
+  }, [dispatch, handleAction, reset])
+
+  return (
+    <Box css={styles.wrapper}>
+      <Typography variant='h6' css={styles.header}>
+        Transaction Completed
+      </Typography>
+      <Box css={styles.check}>
+        <CheckIcon />
+      </Box>
+      <Box css={styles.content}>
+        {content.map((item) => (
+          <Box sx={{ marginTop: '10px' }} key={item}>
+            {item}
+          </Box>
+        ))}
+      </Box>
+      <Button
+        className='transaction-done-modal-close-btn'
+        variant='contained'
+        css={styles.doneButton}
+        onClick={handleCloseModal}
+      >
+        DONE
+      </Button>
+    </Box>
+  )
+}

package/src/components/TxSendModal.tsx

@@ -1,59 +1,59 @@
-import { useWeb3React } from '@web3-react/core'
-import { Contract } from 'ethers'
-import {
-  PoolInfoType,
-  sendTxAtom,
-  TxStateType,
-  useMount,
-  usePoolContract,
-} from '@huma-finance/shared'
-import { useAtom } from 'jotai'
-import React, { useEffect } from 'react'
-
-import { useAppDispatch } from '../hooks/useRedux'
-import { LoadingModal } from './LoadingModal'
-import { ViewOnExplorer } from './ViewOnExplorer'
-
-type Props = {
-  poolInfo: PoolInfoType
-  method: string
-  params: unknown[]
-  title?: string
-  contract?: Contract
-  handleSuccess?: () => void
-}
-
-export function TxSendModal({
-  poolInfo,
-  title,
-  method,
-  params,
-  contract,
-  handleSuccess,
-}: Props): React.ReactElement {
-  const dispatch = useAppDispatch()
-  const { provider } = useWeb3React()
-  const poolContract = usePoolContract(poolInfo.poolName, poolInfo.poolType)
-  const [{ state, txHash }, send] = useAtom(sendTxAtom)
-
-  useEffect(() => {
-    if (state === TxStateType.Success) {
-      if (handleSuccess) {
-        handleSuccess()
-      }
-    }
-  }, [dispatch, handleSuccess, state])
-
-  useMount(() => {
-    send({ contract: contract ?? poolContract!, method, params, provider })
-  })
-
-  return (
-    <LoadingModal
-      title={title ?? 'Transaction Pending'}
-      description='Waiting for confirmation...'
-    >
-      <ViewOnExplorer txHash={txHash} />
-    </LoadingModal>
-  )
-}
+import { useWeb3React } from '@web3-react/core'
+import { Contract } from 'ethers'
+import {
+  PoolInfoType,
+  sendTxAtom,
+  TxStateType,
+  useMount,
+  usePoolContract,
+} from '@huma-finance/shared'
+import { useAtom } from 'jotai'
+import React, { useEffect } from 'react'
+
+import { useAppDispatch } from '../hooks/useRedux'
+import { LoadingModal } from './LoadingModal'
+import { ViewOnExplorer } from './ViewOnExplorer'
+
+type Props = {
+  poolInfo: PoolInfoType
+  method: string
+  params: unknown[]
+  title?: string
+  contract?: Contract
+  handleSuccess?: () => void
+}
+
+export function TxSendModal({
+  poolInfo,
+  title,
+  method,
+  params,
+  contract,
+  handleSuccess,
+}: Props): React.ReactElement {
+  const dispatch = useAppDispatch()
+  const { provider } = useWeb3React()
+  const poolContract = usePoolContract(poolInfo.poolName, poolInfo.poolType)
+  const [{ state, txHash }, send] = useAtom(sendTxAtom)
+
+  useEffect(() => {
+    if (state === TxStateType.Success) {
+      if (handleSuccess) {
+        handleSuccess()
+      }
+    }
+  }, [dispatch, handleSuccess, state])
+
+  useMount(() => {
+    send({ contract: contract ?? poolContract!, method, params, provider })
+  })
+
+  return (
+    <LoadingModal
+      title={title ?? 'Transaction Pending'}
+      description='Waiting for confirmation...'
+    >
+      <ViewOnExplorer txHash={txHash} />
+    </LoadingModal>
+  )
+}

package/src/components/ViewOnExplorer.tsx

@@ -1,26 +1,26 @@
-import { Box, Button } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import { CHAINS, openInNewTab } from '@huma-finance/shared'
-import React from 'react'
-
-type Props = {
-  txHash: string
-}
-
-export function ViewOnExplorer({ txHash }: Props): React.ReactElement | null {
-  const { chainId } = useWeb3React()
-  const chain = chainId ? CHAINS[chainId] : null
-
-  if (!txHash || !chain) {
-    return null
-  }
-
-  return (
-    <Button
-      variant='outlined'
-      onClick={() => openInNewTab(`${chain.explorer}/${txHash}`)}
-    >
-      <Box component='span'>VIEW ON EXPLORER</Box>
-    </Button>
-  )
-}
+import { Box, Button } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import { CHAINS, openInNewTab } from '@huma-finance/shared'
+import React from 'react'
+
+type Props = {
+  txHash: string
+}
+
+export function ViewOnExplorer({ txHash }: Props): React.ReactElement | null {
+  const { chainId } = useWeb3React()
+  const chain = chainId ? CHAINS[chainId] : null
+
+  if (!txHash || !chain) {
+    return null
+  }
+
+  return (
+    <Button
+      variant='outlined'
+      onClick={() => openInNewTab(`${chain.explorer}/${txHash}`)}
+    >
+      <Box component='span'>VIEW ON EXPLORER</Box>
+    </Button>
+  )
+}

package/src/components/WidgetWrapper.tsx

@@ -1,74 +1,74 @@
-import { isTxFailed, sendTxAtom, txAtom } from '@huma-finance/shared'
-import { useAtom } from 'jotai'
-import { useResetAtom } from 'jotai/utils'
-import React, { useCallback, useEffect } from 'react'
-
-import { useAppDispatch, useAppSelector } from '../hooks/useRedux'
-import { resetState, setError } from '../store/widgets.reducers'
-import { selectWidgetState } from '../store/widgets.selectors'
-import { WIDGET_STEP } from '../store/widgets.store'
-import { WCProps } from '../utilTypes'
-import { HumaModal, HumaModalHeader } from './humaModal'
-import { LoadingModal } from './LoadingModal'
-
-type Props = {
-  isOpen: boolean
-  isLoading?: boolean
-  loadingTitle?: string
-  handleClose: () => void
-  handleSuccess?: (blockNumber: number) => void
-}
-
-export function WidgetWrapper({
-  isOpen,
-  isLoading = false,
-  loadingTitle = '',
-  handleClose,
-  handleSuccess,
-  children,
-}: WCProps<Props>): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { step } = useAppSelector(selectWidgetState)
-  const [{ state, failReason, txReceipt }] = useAtom(sendTxAtom)
-  const reset = useResetAtom(txAtom)
-
-  useEffect(() => {
-    if (isTxFailed(state) && failReason) {
-      dispatch(setError({ errorMessage: failReason }))
-    }
-  }, [dispatch, failReason, state])
-
-  useEffect(() => {
-    if (step === WIDGET_STEP.Done && txReceipt) {
-      if (handleSuccess) {
-        handleSuccess(txReceipt.blockNumber)
-      }
-    }
-  }, [handleSuccess, step, txReceipt])
-
-  const handleCloseModal = useCallback(() => {
-    reset()
-    dispatch(resetState())
-    handleClose()
-  }, [dispatch, handleClose, reset])
-
-  // when close modal, return null to make sure all the states are reset
-  if (!isOpen) {
-    return null
-  }
-
-  return (
-    <HumaModal
-      isOpen={isOpen}
-      overflowY='auto'
-      onClose={handleCloseModal}
-      width='480px'
-      padding='30px 40px'
-      disableBackdropClick
-    >
-      <HumaModalHeader onClose={handleCloseModal} height={0} />
-      {isLoading && <LoadingModal title={loadingTitle} />}
-      {!isLoading && children}
-    </HumaModal>
-  )
-}
+import { isTxFailed, sendTxAtom, txAtom } from '@huma-finance/shared'
+import { useAtom } from 'jotai'
+import { useResetAtom } from 'jotai/utils'
+import React, { useCallback, useEffect } from 'react'
+
+import { useAppDispatch, useAppSelector } from '../hooks/useRedux'
+import { resetState, setError } from '../store/widgets.reducers'
+import { selectWidgetState } from '../store/widgets.selectors'
+import { WIDGET_STEP } from '../store/widgets.store'
+import { WCProps } from '../utilTypes'
+import { HumaModal, HumaModalHeader } from './humaModal'
+import { LoadingModal } from './LoadingModal'
+
+type Props = {
+  isOpen: boolean
+  isLoading?: boolean
+  loadingTitle?: string
+  handleClose: () => void
+  handleSuccess?: (blockNumber: number) => void
+}
+
+export function WidgetWrapper({
+  isOpen,
+  isLoading = false,
+  loadingTitle = '',
+  handleClose,
+  handleSuccess,
+  children,
+}: WCProps<Props>): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { step } = useAppSelector(selectWidgetState)
+  const [{ state, failReason, txReceipt }] = useAtom(sendTxAtom)
+  const reset = useResetAtom(txAtom)
+
+  useEffect(() => {
+    if (isTxFailed(state) && failReason) {
+      dispatch(setError({ errorMessage: failReason }))
+    }
+  }, [dispatch, failReason, state])
+
+  useEffect(() => {
+    if (step === WIDGET_STEP.Done && txReceipt) {
+      if (handleSuccess) {
+        handleSuccess(txReceipt.blockNumber)
+      }
+    }
+  }, [handleSuccess, step, txReceipt])
+
+  const handleCloseModal = useCallback(() => {
+    reset()
+    dispatch(resetState())
+    handleClose()
+  }, [dispatch, handleClose, reset])
+
+  // when close modal, return null to make sure all the states are reset
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <HumaModal
+      isOpen={isOpen}
+      overflowY='auto'
+      onClose={handleCloseModal}
+      width='480px'
+      padding='30px 40px'
+      disableBackdropClick
+    >
+      <HumaModalHeader onClose={handleCloseModal} height={0} />
+      {isLoading && <LoadingModal title={loadingTitle} />}
+      {!isLoading && children}
+    </HumaModal>
+  )
+}

package/src/components/WrapperModal.tsx

@@ -1,54 +1,54 @@
-import { Box, css, Typography, useTheme } from '@mui/material'
-import React from 'react'
-
-type Props = {
-  title: string
-  subTitle?: string | React.ReactNode
-  children: React.ReactNode
-}
-
-export function WrapperModal({
-  title,
-  subTitle,
-  children,
-}: Props): React.ReactElement {
-  const theme = useTheme()
-
-  const styles = {
-    wrapper: css`
-      height: 518px;
-      position: relative;
-    `,
-    header: css`
-      ${theme.cssMixins.rowHCentered};
-      font-family: 'Uni-Neue-Bold';
-      font-size: 20px;
-      margin-top: -5px;
-    `,
-    content: css`
-      ${theme.cssMixins.rowHCentered};
-      margin-top: 30px;
-      font-family: 'Uni-Neue-Regular';
-      font-size: 16px;
-      line-height: 24px;
-      color: #49505b;
-    `,
-    bottom: css`
-      & .MuiButtonBase-root {
-        width: 100%;
-        position: absolute;
-        bottom: 0;
-      }
-    `,
-  }
-
-  return (
-    <Box css={styles.wrapper}>
-      <Typography variant='h6' css={styles.header}>
-        {title}
-      </Typography>
-      {subTitle && <Box css={styles.content}>{subTitle}</Box>}
-      {children}
-    </Box>
-  )
-}
+import { Box, css, Typography, useTheme } from '@mui/material'
+import React from 'react'
+
+type Props = {
+  title: string
+  subTitle?: string | React.ReactNode
+  children: React.ReactNode
+}
+
+export function WrapperModal({
+  title,
+  subTitle,
+  children,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+
+  const styles = {
+    wrapper: css`
+      height: 518px;
+      position: relative;
+    `,
+    header: css`
+      ${theme.cssMixins.rowHCentered};
+      font-family: 'Uni-Neue-Bold';
+      font-size: 20px;
+      margin-top: -5px;
+    `,
+    content: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: 30px;
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      line-height: 24px;
+      color: #49505b;
+    `,
+    bottom: css`
+      & .MuiButtonBase-root {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+      }
+    `,
+  }
+
+  return (
+    <Box css={styles.wrapper}>
+      <Typography variant='h6' css={styles.header}>
+        {title}
+      </Typography>
+      {subTitle && <Box css={styles.content}>{subTitle}</Box>}
+      {children}
+    </Box>
+  )
+}

package/src/components/buttons/TableActionButton.tsx

@@ -1,36 +1,36 @@
-import { Box, Button, css } from '@mui/material'
-
-type Props = {
-  title: string
-  className?: string
-  handleClick: () => void
-  disabled?: boolean
-}
-
-export function TableActionButton({
-  title,
-  className,
-  handleClick,
-  disabled = false,
-}: Props): React.ReactElement {
-  const styles = css`
-    border: none;
-    padding: 0;
-    background: ${disabled ? 'unset !important' : 'inherit'};
-    &:hover {
-      border: none;
-    }
-  `
-
-  return (
-    <Button
-      className={className}
-      variant={disabled ? undefined : 'outlined'}
-      onClick={handleClick}
-      css={styles}
-      disabled={disabled}
-    >
-      <Box>{title}</Box>
-    </Button>
-  )
-}
+import { Box, Button, css } from '@mui/material'
+
+type Props = {
+  title: string
+  className?: string
+  handleClick: () => void
+  disabled?: boolean
+}
+
+export function TableActionButton({
+  title,
+  className,
+  handleClick,
+  disabled = false,
+}: Props): React.ReactElement {
+  const styles = css`
+    border: none;
+    padding: 0;
+    background: ${disabled ? 'unset !important' : 'inherit'};
+    &:hover {
+      border: none;
+    }
+  `
+
+  return (
+    <Button
+      className={className}
+      variant={disabled ? undefined : 'outlined'}
+      onClick={handleClick}
+      css={styles}
+      disabled={disabled}
+    >
+      <Box>{title}</Box>
+    </Button>
+  )
+}

package/src/components/buttons/index.ts

@@ -1 +1 @@
-export * from './TableActionButton'
+export * from './TableActionButton'