@huma-finance/widgets 0.0.31 → 0.0.33

package/src/components/Lend/withdraw/4-Success.tsx

@@ -1,49 +1,49 @@
-import { useWeb3React } from '@web3-react/core'
-import {
-  decodeLogs,
-  downScale,
-  formatMoney,
-  PoolInfoType,
-  sendTxAtom,
-} from '@huma-finance/shared'
-import transferAbi from '@huma-finance/shared/dist/abis/Transfer.json'
-import { useAtom } from 'jotai'
-import React, { useEffect, useState } from 'react'
-
-import { TxDoneModal } from '../../TxDoneModal'
-
-type Props = {
-  poolInfo: PoolInfoType
-  handleAction: () => void
-}
-
-export function Success({ poolInfo, handleAction }: Props): React.ReactElement {
-  const { account } = useWeb3React()
-  const { poolUnderlyingToken } = poolInfo
-  const [{ txReceipt }] = useAtom(sendTxAtom)
-  const { symbol, decimals, address } = poolUnderlyingToken
-  const [withdrawAmount, setWithdrawAmount] = useState<string | undefined>()
-
-  useEffect(() => {
-    if (txReceipt) {
-      const events = decodeLogs(txReceipt.logs, transferAbi)
-      if (events) {
-        events.forEach((event) => {
-          const { from, to, value } = event.args
-          if (
-            from.toLowerCase() === poolInfo.pool.toLowerCase() &&
-            to.toLowerCase() === account?.toLowerCase()
-          ) {
-            setWithdrawAmount(downScale(value.toString(), decimals))
-          }
-        })
-      }
-    }
-  }, [account, address, decimals, poolInfo.pool, txReceipt])
-
-  const content = [
-    `You successfully withdrawn ${formatMoney(withdrawAmount)} ${symbol}.`,
-  ]
-
-  return <TxDoneModal handleAction={handleAction} content={content} />
-}
+import { useWeb3React } from '@web3-react/core'
+import {
+  decodeLogs,
+  downScale,
+  formatMoney,
+  PoolInfoType,
+  sendTxAtom,
+} from '@huma-finance/shared'
+import transferAbi from '@huma-finance/shared/dist/abis/Transfer.json'
+import { useAtom } from 'jotai'
+import React, { useEffect, useState } from 'react'
+
+import { TxDoneModal } from '../../TxDoneModal'
+
+type Props = {
+  poolInfo: PoolInfoType
+  handleAction: () => void
+}
+
+export function Success({ poolInfo, handleAction }: Props): React.ReactElement {
+  const { account } = useWeb3React()
+  const { poolUnderlyingToken } = poolInfo
+  const [{ txReceipt }] = useAtom(sendTxAtom)
+  const { symbol, decimals, address } = poolUnderlyingToken
+  const [withdrawAmount, setWithdrawAmount] = useState<string | undefined>()
+
+  useEffect(() => {
+    if (txReceipt) {
+      const events = decodeLogs(txReceipt.logs, transferAbi)
+      if (events) {
+        events.forEach((event) => {
+          const { from, to, value } = event.args
+          if (
+            from.toLowerCase() === poolInfo.pool.toLowerCase() &&
+            to.toLowerCase() === account?.toLowerCase()
+          ) {
+            setWithdrawAmount(downScale(value.toString(), decimals))
+          }
+        })
+      }
+    }
+  }, [account, address, decimals, poolInfo.pool, txReceipt])
+
+  const content = [
+    `You successfully withdrawn ${formatMoney(withdrawAmount)} ${symbol}.`,
+  ]
+
+  return <TxDoneModal handleAction={handleAction} content={content} />
+}

package/src/components/Lend/withdraw/index.tsx

@@ -1,101 +1,101 @@
-import { useWeb3React } from '@web3-react/core'
-import {
-  POOL_NAME,
-  POOL_TYPE,
-  useLenderPosition,
-  usePoolInfo,
-} from '@huma-finance/shared'
-import React, { useCallback, useEffect } from 'react'
-import { useDispatch } from 'react-redux'
-
-import { useAppSelector } from '../../../hooks/useRedux'
-import { setStep } from '../../../store/widgets.reducers'
-import { selectWidgetState } from '../../../store/widgets.selectors'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { ErrorModal } from '../../ErrorModal'
-import { WidgetWrapper } from '../../WidgetWrapper'
-import { CheckWithdrawable } from './1-CheckWithdrawble'
-import { ChooseAmount } from './2-ChooseAmount'
-import { Transfer } from './3-Transfer'
-import { Success } from './4-Success'
-
-/**
- * Lend pool withdraw props
- * @typedef {Object} LendWithdrawProps
- * @property {POOL_NAME} poolName The name of the pool.
- * @property {POOL_TYPE} poolType The type of the pool.
- * @property {function():void} handleClose Function to notify to close the widget modal when user clicks the 'x' close button.
- * @property {function((number|undefined)):void|undefined} handleSuccess Optional function to notify that the lending pool withdraw action is successful.
- */
-export type LendWithdrawProps = {
-  poolName: keyof typeof POOL_NAME
-  poolType: keyof typeof POOL_TYPE
-  handleClose: () => void
-  handleSuccess?: (blockNumber?: number) => void
-}
-
-export function LendWithdraw({
-  poolName: poolNameStr,
-  poolType: poolTypeStr,
-  handleClose,
-  handleSuccess,
-}: LendWithdrawProps): React.ReactElement | null {
-  const dispatch = useDispatch()
-  const { account } = useWeb3React()
-  const poolName = POOL_NAME[poolNameStr]
-  const poolType = POOL_TYPE[poolTypeStr]
-  const poolInfo = usePoolInfo(poolName, poolType)
-  const { step, errorMessage } = useAppSelector(selectWidgetState)
-  const [lenderPosition, refreshLenderPosition] = useLenderPosition(
-    poolName,
-    poolType,
-    account,
-  )
-
-  useEffect(() => {
-    if (!step && lenderPosition) {
-      dispatch(setStep(WIDGET_STEP.CheckWithdrawable))
-    }
-  }, [dispatch, lenderPosition, step])
-
-  const handleWithdrawSuccess = useCallback(
-    (blockNumber: number) => {
-      refreshLenderPosition()
-      if (handleSuccess) {
-        handleSuccess(blockNumber)
-      }
-    },
-    [handleSuccess, refreshLenderPosition],
-  )
-
-  if (!poolInfo) {
-    return null
-  }
-
-  return (
-    <WidgetWrapper
-      isOpen
-      handleClose={handleClose}
-      handleSuccess={handleWithdrawSuccess}
-    >
-      {(!step || step === WIDGET_STEP.CheckWithdrawable) && (
-        <CheckWithdrawable poolInfo={poolInfo} handleClose={handleClose} />
-      )}
-      {step === WIDGET_STEP.ChooseAmount && (
-        <ChooseAmount poolInfo={poolInfo} lenderPosition={lenderPosition!} />
-      )}
-      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
-      {step === WIDGET_STEP.Done && (
-        <Success poolInfo={poolInfo} handleAction={handleClose} />
-      )}
-      {step === WIDGET_STEP.Error && (
-        <ErrorModal
-          title='Withdraw'
-          errorReason='Sorry there was an error'
-          errorMessage={errorMessage}
-          handleOk={handleClose}
-        />
-      )}
-    </WidgetWrapper>
-  )
-}
+import { useWeb3React } from '@web3-react/core'
+import {
+  POOL_NAME,
+  POOL_TYPE,
+  useLenderPosition,
+  usePoolInfo,
+} from '@huma-finance/shared'
+import React, { useCallback, useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+
+import { useAppSelector } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { ErrorModal } from '../../ErrorModal'
+import { WidgetWrapper } from '../../WidgetWrapper'
+import { CheckWithdrawable } from './1-CheckWithdrawble'
+import { ChooseAmount } from './2-ChooseAmount'
+import { Transfer } from './3-Transfer'
+import { Success } from './4-Success'
+
+/**
+ * Lend pool withdraw props
+ * @typedef {Object} LendWithdrawProps
+ * @property {POOL_NAME} poolName The name of the pool.
+ * @property {POOL_TYPE} poolType The type of the pool.
+ * @property {function():void} handleClose Function to notify to close the widget modal when user clicks the 'x' close button.
+ * @property {function((number|undefined)):void|undefined} handleSuccess Optional function to notify that the lending pool withdraw action is successful.
+ */
+export type LendWithdrawProps = {
+  poolName: keyof typeof POOL_NAME
+  poolType: keyof typeof POOL_TYPE
+  handleClose: () => void
+  handleSuccess?: (blockNumber?: number) => void
+}
+
+export function LendWithdraw({
+  poolName: poolNameStr,
+  poolType: poolTypeStr,
+  handleClose,
+  handleSuccess,
+}: LendWithdrawProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { account } = useWeb3React()
+  const poolName = POOL_NAME[poolNameStr]
+  const poolType = POOL_TYPE[poolTypeStr]
+  const poolInfo = usePoolInfo(poolName, poolType)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const [lenderPosition, refreshLenderPosition] = useLenderPosition(
+    poolName,
+    poolType,
+    account,
+  )
+
+  useEffect(() => {
+    if (!step && lenderPosition) {
+      dispatch(setStep(WIDGET_STEP.CheckWithdrawable))
+    }
+  }, [dispatch, lenderPosition, step])
+
+  const handleWithdrawSuccess = useCallback(
+    (blockNumber: number) => {
+      refreshLenderPosition()
+      if (handleSuccess) {
+        handleSuccess(blockNumber)
+      }
+    },
+    [handleSuccess, refreshLenderPosition],
+  )
+
+  if (!poolInfo) {
+    return null
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      handleClose={handleClose}
+      handleSuccess={handleWithdrawSuccess}
+    >
+      {(!step || step === WIDGET_STEP.CheckWithdrawable) && (
+        <CheckWithdrawable poolInfo={poolInfo} handleClose={handleClose} />
+      )}
+      {step === WIDGET_STEP.ChooseAmount && (
+        <ChooseAmount poolInfo={poolInfo} lenderPosition={lenderPosition!} />
+      )}
+      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
+      {step === WIDGET_STEP.Done && (
+        <Success poolInfo={poolInfo} handleAction={handleClose} />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title='Withdraw'
+          errorReason='Sorry there was an error'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/components/LoadingModal.tsx

@@ -1,49 +1,49 @@
-import { Box, css, useTheme } from '@mui/material'
-import React from 'react'
-import { HumaLoading } from './HumaLoading'
-
-import { WrapperModal } from './WrapperModal'
-
-type Props = {
-  title: string
-  description?: string
-  hideLoader?: boolean
-  children?: React.ReactNode
-}
-
-export function LoadingModal({
-  title,
-  description,
-  hideLoader = false,
-  children,
-}: Props): React.ReactElement {
-  const theme = useTheme()
-
-  const styles = {
-    loader: css`
-      width: 100%;
-      ${theme.cssMixins.rowHCentered};
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-    `,
-    bottom: css`
-      & .MuiButtonBase-root {
-        width: 100%;
-        position: absolute;
-        bottom: 0;
-      }
-    `,
-  }
-
-  return (
-    <WrapperModal title={title} subTitle={description}>
-      {!hideLoader && (
-        <Box css={styles.loader}>
-          <HumaLoading />
-        </Box>
-      )}
-      <Box css={styles.bottom}>{children}</Box>
-    </WrapperModal>
-  )
-}
+import { Box, css, useTheme } from '@mui/material'
+import React from 'react'
+import { HumaLoading } from './HumaLoading'
+
+import { WrapperModal } from './WrapperModal'
+
+type Props = {
+  title: string
+  description?: string
+  hideLoader?: boolean
+  children?: React.ReactNode
+}
+
+export function LoadingModal({
+  title,
+  description,
+  hideLoader = false,
+  children,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+
+  const styles = {
+    loader: css`
+      width: 100%;
+      ${theme.cssMixins.rowHCentered};
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    `,
+    bottom: css`
+      & .MuiButtonBase-root {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+      }
+    `,
+  }
+
+  return (
+    <WrapperModal title={title} subTitle={description}>
+      {!hideLoader && (
+        <Box css={styles.loader}>
+          <HumaLoading />
+        </Box>
+      )}
+      <Box css={styles.bottom}>{children}</Box>
+    </WrapperModal>
+  )
+}

package/src/components/Notifi/NotifiSubscriptionModal.tsx

@@ -0,0 +1,264 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { useWeb3React } from '@web3-react/core'
+import {
+  NotifiFrontendClient,
+  newFrontendClient,
+  Uint8SignMessageFunction,
+  SignMessageParams,
+  CardConfigItemV1,
+  DirectPushEventTypeItem,
+  EventTypeItem,
+  BroadcastEventTypeItem,
+} from '@notifi-network/notifi-frontend-client'
+import { getBlockchainConfigFromChain, txAtom } from '@huma-finance/shared'
+import { ethers } from 'ethers'
+import {
+  Box,
+  Input,
+  InputAdornment,
+  Typography,
+  css,
+  useTheme,
+} from '@mui/material'
+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'
+import { resetState } from '../../store/widgets.reducers'
+import { useAppDispatch } from '../../hooks/useRedux'
+
+type Props = {
+  handleSuccess: () => void
+}
+
+function getIdFromEventType(eventType: EventTypeItem): string {
+  if (eventType.type === 'directPush') {
+    const directPushEventType = eventType as DirectPushEventTypeItem
+    return (
+      directPushEventType.directPushId as {
+        value: string
+      }
+    ).value
+  }
+  if (eventType.type === 'broadcast') {
+    const broadcastEventType = eventType as BroadcastEventTypeItem
+    return (
+      broadcastEventType.broadcastId as {
+        value: string
+      }
+    ).value
+  }
+
+  return ''
+}
+
+async function fetchEventTypes(
+  notifiClient: NotifiFrontendClient,
+): Promise<(EventTypeItem & { enabled: boolean })[]> {
+  const subscribedAlerts = await notifiClient.getAlerts()
+
+  const subscriptionConfig = (await notifiClient.fetchSubscriptionCard({
+    id: process.env.REACT_APP_NOTIFI_CONFIG_ID ?? '',
+    type: 'SUBSCRIPTION_CARD',
+  })) as CardConfigItemV1
+
+  const eventTypes = subscriptionConfig?.eventTypes?.map(
+    (eventType): EventTypeItem & { enabled: boolean } => {
+      const eventTypeId = getIdFromEventType(eventType)
+      let enabled = false
+      // Check whether the user is subscribed to the event
+      const subscribedAlert = subscribedAlerts?.find(
+        (alert) => alert.filterOptions.indexOf(eventTypeId) >= 0,
+      )
+
+      if (subscribedAlert) {
+        enabled = true
+      }
+
+      return {
+        ...eventType,
+        enabled,
+      }
+    },
+  )
+
+  return eventTypes
+}
+
+export function NotifiSubscriptionModal({
+  handleSuccess,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const reset = useResetAtom(txAtom)
+  const dispatch = useAppDispatch()
+  const { account, chainId, provider } = useWeb3React()
+  const [notifiClient, setNotifiClient] = useState<NotifiFrontendClient>()
+  const [showSuccessScreen, setShowSuccessScreen] = useState<boolean>(false)
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [emailAddress, setEmailAddress] = useState<string>()
+  const [emailValid, setEmailValid] = useState<boolean>()
+
+  useEffect(() => {
+    const initializeClient = async () => {
+      if (account != null && chainId != null) {
+        const client = newFrontendClient({
+          account: { publicKey: account },
+          tenantId: 'humadapp',
+          env: envUtil.checkIsDev() ? 'Development' : 'Production',
+          walletBlockchain: getBlockchainConfigFromChain(chainId),
+        })
+
+        await client.initialize()
+
+        setNotifiClient(client)
+      }
+    }
+
+    initializeClient()
+  }, [account, chainId])
+
+  const signMessage: Uint8SignMessageFunction = async (
+    message: Uint8Array,
+  ): Promise<Uint8Array> => {
+    const signer = provider!.getSigner()
+    const signature = await signer.signMessage(Buffer.from(message))
+    return ethers.utils.arrayify(signature)
+  }
+
+  const handleEmailAddressChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    setEmailValid(emailRegex.test(event.target.value ?? ''))
+    setEmailAddress(event.target.value)
+  }
+
+  const logInAndSubscribe = async (): Promise<void> => {
+    if (notifiClient != null && chainId != null) {
+      setIsLoading(true)
+
+      // Ask user to sign a message to authenticate
+      try {
+        await notifiClient.logIn({
+          walletBlockchain: getBlockchainConfigFromChain(chainId),
+          signMessage,
+        } as SignMessageParams)
+      } catch (e) {
+        setIsLoading(false)
+        return
+      }
+
+      // Fetch all event types
+      const fetchedEventTypes = await fetchEventTypes(notifiClient)
+
+      //   Authorize this email address for this wallet
+      await notifiClient.ensureTargetGroup({
+        name: 'Default',
+        emailAddress: emailAddress!,
+      })
+
+      // Intentionally running this in serial because the Notifi ensureAlert can't handle
+      // multiple calls. Notified their team to fix this.
+      // eslint-disable-next-line no-restricted-syntax
+      for (const eventType of fetchedEventTypes) {
+        // eslint-disable-next-line no-await-in-loop
+        await notifiClient.ensureAlert({
+          eventType,
+          inputs: {},
+        })
+      }
+
+      setShowSuccessScreen(true)
+      setIsLoading(false)
+    }
+  }
+
+  const handleCloseModal = useCallback(() => {
+    reset()
+    dispatch(resetState())
+    handleSuccess()
+  }, [dispatch, handleSuccess, reset])
+
+  const styles = {
+    disclaimer: css`
+      ${theme.cssMixins.rowCentered};
+      font-family: 'Uni-Neue-Regular';
+      font-size: 16px;
+      color: #a8a1b2;
+      margin-top: 48px;
+    `,
+    inputField: css`
+      width: 90%;
+      font-size: 16px;
+    `,
+    inputWrapper: css`
+      width: 100%;
+    `,
+    header: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: -5px;
+    `,
+    check: css`
+      width: 100%;
+      ${theme.cssMixins.rowHCentered};
+      margin-top: 82px;
+    `,
+  }
+
+  if (isLoading) {
+    return <LoadingModal title='Notifications' />
+  }
+
+  if (showSuccessScreen) {
+    return (
+      <WrapperModal
+        title='Success'
+        subTitle='You successfully connected your email'
+      >
+        <Box css={styles.check}>
+          <CheckIcon />
+        </Box>
+        <BottomButton variant='contained' onClick={handleCloseModal}>
+          DONE
+        </BottomButton>
+      </WrapperModal>
+    )
+  }
+
+  return (
+    <WrapperModal title='Connect Your Email'>
+      <Typography variant='body2' margin='12px 0'>
+        Connect your wallet to receive important emails about your account
+      </Typography>
+      <Box css={styles.inputWrapper}>
+        <Input
+          css={styles.inputField}
+          type='email'
+          value={emailAddress}
+          onChange={handleEmailAddressChange}
+          placeholder='youremail@example.com'
+          startAdornment={
+            <InputAdornment position='start'>
+              <Email />
+            </InputAdornment>
+          }
+        />
+      </Box>
+      <Box css={styles.disclaimer}>
+        You can adjust these settings at any time by clicking the alert icon in
+        the header
+      </Box>
+      <BottomButton
+        variant='contained'
+        onClick={logInAndSubscribe}
+        disabled={!emailValid || isLoading}
+      >
+        CONNECT WALLET
+      </BottomButton>
+    </WrapperModal>
+  )
+}