@huma-finance/widgets 0.0.62-beta.612 → 0.0.62-beta.616

package/src/index.tsx

@@ -73,22 +73,7 @@ import { SuperfluidFactoring } from './components/SuperfluidFactoring'
 import { store } from './store'
 import { themeHuma } from './theme'
 import { WCProps } from './utilTypes'
-import {
-  SolanaLendSupply,
-  SolanaLendSupplyProps,
-} from './components/Lend/solanaSupply'
-import {
-  SolanaLendAddRedemption,
-  SolanaLendAddRedemptionProps,
-} from './components/Lend/solanaAddRedemption'
-import {
-  SolanaLendCancelRedemption,
-  SolanaLendCancelRedemptionProps,
-} from './components/Lend/solanaCancelRedemption'
-import {
-  SolanaBorrow,
-  SolanaBorrowProps,
-} from './components/CreditLine/solanaBorrow'
+import { NotifiContextWrapper } from './components/Notifi/NotifiContextWrapper'
 
 /**
  * Mapping of your JSON-RPC connections indexed by chainId
@@ -132,7 +117,11 @@ function Widget(props: WCProps<WidgetProps>) {
       <ReduxProvider store={store}>
         <Web3Provider {...(props as Web3Props)} defaultChainId={chainId}>
           <AtomProvider>
-            <ChainSupportProvider>{children}</ChainSupportProvider>
+            <ChainSupportProvider>
+              <NotifiContextWrapper chainId={chainId}>
+                {children}
+              </NotifiContextWrapper>
+            </ChainSupportProvider>
           </AtomProvider>
         </Web3Provider>
       </ReduxProvider>
@@ -545,110 +534,4 @@ export function ReceivableBackedCreditLinePaymentWidgetV2(
   )
 }
 
-/**
- * Object representing the props passed to Solana widgets
- * @typedef {Object} SolanaWidgetProps
- */
-type SolanaWidgetProps = {
-  handleClose?: () => void
-}
-
-function SolanaWidget(props: WCProps<SolanaWidgetProps>) {
-  const { children } = props
-
-  return (
-    <ThemeProvider theme={themeHuma}>
-      <ReduxProvider store={store}>{children}</ReduxProvider>
-    </ThemeProvider>
-  )
-}
-
-/**
- * Lend pool supply widget props for Solana pools
- * @typedef {Object} SolanaLendSupplyWidgetProps
- * @property {SolanaLendSupplyProps} SolanaLendSupplyProps - Specific widget props
- * @property {SolanaWidgetProps} SolanaWidgetProps - Widget general props.
- */
-type SolanaLendSupplyWidgetProps = SolanaLendSupplyProps & SolanaWidgetProps
-
-/**
- * Lend pool supply widget for Solana pools
- *
- * @param {SolanaLendSupplyWidgetProps} props - Widget props
- */
-export function SolanaLendSupplyWidget(props: SolanaLendSupplyWidgetProps) {
-  return (
-    <SolanaWidget {...props}>
-      <SolanaLendSupply {...props} />
-    </SolanaWidget>
-  )
-}
-
-/**
- * Lend pool supply widget props for Solana pools
- * @typedef {Object} SolanaLendAddRedemptionWidgetProps
- * @property {SolanaLendSupplyProps} SolanaLendSupplyProps - Specific widget props
- * @property {SolanaWidgetProps} SolanaWidgetProps - Widget general props.
- */
-type SolanaLendAddRedemptionWidgetProps = SolanaLendAddRedemptionProps &
-  SolanaWidgetProps
-
-/**
- * Lend pool supply widget for Solana pools
- *
- * @param {SolanaLendAddRedemptionWidgetProps} props - Widget props
- */
-export function SolanaLendAddRedemptionWidget(
-  props: SolanaLendAddRedemptionWidgetProps,
-) {
-  return (
-    <SolanaWidget {...props}>
-      <SolanaLendAddRedemption {...props} />
-    </SolanaWidget>
-  )
-}
-
-/**
- * Lend pool supply widget props for Solana pools
- * @typedef {Object} SolanaLendCancelRedemptionWidgetProps
- * @property {SolanaLendSupplyProps} SolanaLendSupplyProps - Specific widget props
- * @property {SolanaWidgetProps} SolanaWidgetProps - Widget general props.
- */
-type SolanaLendCancelRedemptionWidgetProps = SolanaLendCancelRedemptionProps &
-  SolanaWidgetProps
-
-/**
- * Lend pool supply widget for Solana pools
- *
- * @param {SolanaLendCancelRedemptionWidgetProps} props - Widget props
- */
-export function SolanaLendCancelRedemptionWidget(
-  props: SolanaLendCancelRedemptionWidgetProps,
-) {
-  return (
-    <SolanaWidget {...props}>
-      <SolanaLendCancelRedemption {...props} />
-    </SolanaWidget>
-  )
-}
-
-/**
- * Lend pool supply widget props for Solana pools
- * @typedef {Object} SolanaBorrowWidgetProps
- * @property {SolanaLendSupplyProps} SolanaLendSupplyProps - Specific widget props
- * @property {SolanaWidgetProps} SolanaWidgetProps - Widget general props.
- */
-type SolanaBorrowWidgetProps = SolanaBorrowProps & SolanaWidgetProps
-
-/**
- * Lend pool supply widget for Solana pools
- *
- * @param {SolanaBorrowWidgetProps} props - Widget props
- */
-export function SolanaBorrowWidget(props: SolanaBorrowWidgetProps) {
-  return (
-    <SolanaWidget {...props}>
-      <SolanaBorrow {...props} />
-    </SolanaWidget>
-  )
-}
+export * from './components/Notifi/NotifiContextWrapper'

package/src/store/widgets.reducers.ts

@@ -32,7 +32,6 @@ export const widgetSlice = createSlice({
       state.withdrawShares = undefined
       state.redeemAmount = undefined
       state.redeemShares = undefined
-      state.solanaSignature = undefined
     },
     setStep: (state, { payload }: PayloadAction<WIDGET_STEP>) => {
       state.step = payload
@@ -103,9 +102,6 @@ export const widgetSlice = createSlice({
     setMultisend: (state, { payload }: PayloadAction<MultisendPayload>) => {
       state.multisend = payload
     },
-    setSolanaSignature: (state, { payload }: PayloadAction<string>) => {
-      state.solanaSignature = payload
-    },
     setError: (
       state,
       {
@@ -134,7 +130,6 @@ export const {
   setWithdrawShares,
   setRedeemAmount,
   setRedeemShares,
-  setSolanaSignature,
 } = widgetSlice.actions
 
 export default widgetSlice.reducer

package/src/store/widgets.store.ts

@@ -58,7 +58,6 @@ export type WidgetState = {
   tokenId?: string
   stream?: WidgetStream
   multisend?: MultisendPayload
-  solanaSignature?: string
 }
 
 export const initialWidgetState: WidgetState = {}

package/src/theme/coreThemeConstants.ts

@@ -3,7 +3,7 @@ export const coreThemeConstants = {
     md: 4,
   },
   fontFamily: [
-    'Roboto',
+    'Red-Hat-Display',
     '-apple-system',
     'BlinkMacSystemFont',
     '"Segoe UI"',

package/src/components/CreditLine/solanaBorrow/1-ChooseAmount.tsx

@@ -1,86 +0,0 @@
-import {
-  formatNumber,
-  getSentinelAddress,
-  SolanaPoolInfo,
-  SolanaTokenUtils,
-} from '@huma-finance/shared'
-import { CreditConfigAccount } from '@huma-finance/web-shared'
-import React, { useCallback, useMemo, useState } from 'react'
-
-import { BN } from '@coral-xyz/anchor'
-import { Account } from '@solana/spl-token'
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setBorrowInfo } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { InputAmountModal } from '../../InputAmountModal'
-
-type Props = {
-  poolInfo: SolanaPoolInfo
-  creditConfigAccount: CreditConfigAccount
-  tokenAccount: Account
-}
-
-export function ChooseAmount({
-  poolInfo,
-  creditConfigAccount,
-  tokenAccount,
-}: Props): React.ReactElement {
-  const dispatch = useAppDispatch()
-  const { symbol, decimals } = poolInfo.underlyingMint
-  const sentinel = useMemo(
-    () => getSentinelAddress(poolInfo.chainId),
-    [poolInfo.chainId],
-  )
-  const [currentAmount, setCurrentAmount] = useState<number>(0)
-  const creditAvailable = useMemo(
-    () =>
-      SolanaTokenUtils.formatUnits(
-        creditConfigAccount.creditAvailable,
-        decimals,
-      ),
-    [creditConfigAccount.creditAvailable, decimals],
-  )
-
-  const handleChangeAmount = (newAmount: number) => {
-    setCurrentAmount(newAmount)
-  }
-
-  const handleAction = useCallback(() => {
-    if (!tokenAccount) {
-      return
-    }
-
-    const borrowAmountBN = SolanaTokenUtils.parseUnits(
-      String(currentAmount),
-      decimals,
-    )
-    const nextStep =
-      borrowAmountBN.gt(new BN(tokenAccount.delegatedAmount)) ||
-      tokenAccount.delegate?.toString() !== sentinel
-        ? WIDGET_STEP.ApproveAllowance
-        : WIDGET_STEP.Transfer
-
-    dispatch(
-      setBorrowInfo({
-        borrowAmount: currentAmount,
-        borrowAmountBN,
-        chargedFees: 0,
-        nextStep,
-      }),
-    )
-  }, [currentAmount, decimals, dispatch, sentinel, tokenAccount])
-
-  return (
-    <InputAmountModal
-      title='Borrow'
-      subTitle='Choose Amount'
-      tokenSymbol={symbol}
-      currentAmount={currentAmount}
-      handleChangeAmount={handleChangeAmount}
-      maxAmount={creditAvailable}
-      infos={[`${String(formatNumber(creditAvailable))} ${symbol} Available`]}
-      handleAction={handleAction}
-      actionText='BORROW'
-    />
-  )
-}

package/src/components/CreditLine/solanaBorrow/2-ApproveAllowance.tsx

@@ -1,87 +0,0 @@
-import {
-  getSentinelAddress,
-  SolanaPoolInfo,
-  SolanaTokenUtils,
-} from '@huma-finance/shared'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-
-import {
-  Account,
-  createApproveCheckedInstruction,
-  TOKEN_2022_PROGRAM_ID,
-} from '@solana/spl-token'
-import { useConnection, useWallet } from '@solana/wallet-adapter-react'
-import { PublicKey, Transaction } from '@solana/web3.js'
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { SolanaTxSendModal } from '../../SolanaTxSendModal'
-import { setStep } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-
-type Props = {
-  poolInfo: SolanaPoolInfo
-  tokenAccount: Account
-}
-
-export function ApproveAllowance({
-  poolInfo,
-  tokenAccount,
-}: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { wallet, publicKey, sendTransaction, signTransaction } = useWallet()
-  const sentinel = useMemo(
-    () => getSentinelAddress(poolInfo.chainId),
-    [poolInfo.chainId],
-  )
-  const { connection } = useConnection()
-  const [transaction, setTransaction] = useState<Transaction>()
-
-  const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Transfer))
-  }, [dispatch])
-
-  useEffect(() => {
-    async function getTx() {
-      if (!wallet || !publicKey || !connection || !signTransaction) {
-        return
-      }
-
-      const tx = new Transaction().add(
-        createApproveCheckedInstruction(
-          tokenAccount.address,
-          new PublicKey(poolInfo.underlyingMint.address),
-          new PublicKey(sentinel), // delegate
-          publicKey, // owner of the wallet
-          SolanaTokenUtils.parseUnits(
-            '100000000000', // 100 billion
-            poolInfo.underlyingMint.decimals,
-          ), // amount
-          poolInfo.underlyingMint.decimals,
-          undefined, // multiSigners
-          TOKEN_2022_PROGRAM_ID,
-        ),
-      )
-
-      setTransaction(tx)
-    }
-    getTx()
-  }, [
-    connection,
-    dispatch,
-    poolInfo.underlyingMint.address,
-    poolInfo.underlyingMint.decimals,
-    publicKey,
-    sendTransaction,
-    sentinel,
-    signTransaction,
-    tokenAccount.address,
-    wallet,
-  ])
-
-  return (
-    <SolanaTxSendModal
-      tx={transaction}
-      chainId={poolInfo.chainId}
-      handleSuccess={handleSuccess}
-    />
-  )
-}

package/src/components/CreditLine/solanaBorrow/index.tsx

@@ -1,96 +0,0 @@
-import { SolanaPoolInfo } from '@huma-finance/shared'
-import {
-  useBorrowerAccounts,
-  usePoolUnderlyingTokenAccount,
-} from '@huma-finance/web-shared'
-import React, { useEffect } from 'react'
-import { useDispatch } from 'react-redux'
-
-import { useAppSelector } from '../../../hooks/useRedux'
-import { selectWidgetState } from '../../../store/widgets.selectors'
-import { WidgetWrapper } from '../../WidgetWrapper'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { setStep } from '../../../store/widgets.reducers'
-import { ErrorModal } from '../../ErrorModal'
-import { ChooseAmount } from './1-ChooseAmount'
-import { ApproveAllowance } from './2-ApproveAllowance'
-
-/**
- * Lend pool supply props
- * @typedef {Object} SolanaBorrowProps
- * @property {SolanaPoolInfo} poolInfo The metadata of the pool.
- * @property {SolanaPoolState} poolState The current state config of the pool. * @property {function():void} handleClose Function to notify to close the widget modal when user clicks the 'x' close button.
- * @property {function():void|undefined} handleSuccess Optional function to notify that the lending pool supply action is successful.
- */
-export interface SolanaBorrowProps {
-  poolInfo: SolanaPoolInfo
-  handleClose: () => void
-  handleSuccess?: () => void
-}
-
-export function SolanaBorrow({
-  poolInfo,
-  handleClose,
-  handleSuccess,
-}: SolanaBorrowProps): React.ReactElement | null {
-  const dispatch = useDispatch()
-  const { creditConfigAccount, loading: isLoadingBorrowerAccounts } =
-    useBorrowerAccounts(poolInfo.chainId, poolInfo.poolName)
-  const { account: tokenAccount, loading: isLoadingTokenAccounts } =
-    usePoolUnderlyingTokenAccount(poolInfo)
-  const { step, errorMessage } = useAppSelector(selectWidgetState)
-  useEffect(() => {
-    if (!step) {
-      dispatch(setStep(WIDGET_STEP.ChooseAmount))
-    }
-  }, [dispatch, step])
-
-  const title = 'Redemption'
-  if (isLoadingBorrowerAccounts || isLoadingTokenAccounts) {
-    return (
-      <WidgetWrapper
-        isOpen
-        isLoading
-        loadingTitle={title}
-        handleClose={handleClose}
-        handleSuccess={handleSuccess}
-      />
-    )
-  }
-
-  return (
-    <WidgetWrapper
-      isOpen
-      loadingTitle={title}
-      handleClose={handleClose}
-      handleSuccess={handleSuccess}
-    >
-      {step === WIDGET_STEP.ChooseAmount &&
-        creditConfigAccount &&
-        tokenAccount && (
-          <ChooseAmount
-            poolInfo={poolInfo}
-            creditConfigAccount={creditConfigAccount}
-            tokenAccount={tokenAccount}
-          />
-        )}
-      {step === WIDGET_STEP.ApproveAllowance && tokenAccount && (
-        <ApproveAllowance poolInfo={poolInfo} tokenAccount={tokenAccount} />
-      )}
-      {/* {step === WIDGET_STEP.Transfer && selectedTranche && (
-        <Transfer poolInfo={poolInfo} selectedTranche={selectedTranche} />
-      )}
-      {step === WIDGET_STEP.Done && (
-        <Done poolInfo={poolInfo} handleAction={handleClose} />
-      )} */}
-      {step === WIDGET_STEP.Error && (
-        <ErrorModal
-          title={title}
-          errorReason='Sorry there was an error'
-          errorMessage={errorMessage}
-          handleOk={handleClose}
-        />
-      )}
-    </WidgetWrapper>
-  )
-}

package/src/components/Lend/solanaAddRedemption/1-ChooseTranche.tsx

@@ -1,114 +0,0 @@
-import { TrancheType } from '@huma-finance/shared'
-import {
-  css,
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Radio,
-  RadioGroup,
-  useTheme,
-} from '@mui/material'
-import React from 'react'
-
-import { useAppDispatch } from '../../../hooks/useRedux'
-import { setStep } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { BottomButton } from '../../BottomButton'
-import { WrapperModal } from '../../WrapperModal'
-
-type Props = {
-  selectedTranche: TrancheType | undefined
-  changeTranche: (tranche: TrancheType) => void
-}
-
-export function ChooseTranche({
-  selectedTranche,
-  changeTranche,
-}: Props): React.ReactElement | null {
-  const theme = useTheme()
-  const dispatch = useAppDispatch()
-
-  const styles = {
-    subTitle: css`
-      color: ${theme.palette.text.primary} !important;
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 150%;
-      letter-spacing: 0.15px;
-      margin-top: ${theme.spacing(5)};
-      margin-left: ${theme.spacing(2)};
-    `,
-    radioGroup: css`
-      margin-left: ${theme.spacing(3)};
-      margin-top: ${theme.spacing(3)};
-    `,
-    formControl: css`
-      margin-bottom: ${theme.spacing(1)};
-
-      .MuiFormControlLabel-label {
-        color: ${theme.palette.text.primary};
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 150%;
-        letter-spacing: 0.15px;
-      }
-    `,
-  }
-
-  const handleNext = () => {
-    dispatch(setStep(WIDGET_STEP.ChooseAmount))
-  }
-
-  const items: {
-    label: string
-    value: TrancheType
-  }[] = [
-    {
-      label: 'Senior',
-      value: 'senior',
-    },
-    {
-      label: 'Junior',
-      value: 'junior',
-    },
-  ]
-
-  return (
-    <WrapperModal title='Redemption'>
-      <FormControl>
-        <FormLabel css={styles.subTitle}>Select Tranche Type</FormLabel>
-        <RadioGroup
-          aria-labelledby='buttons-group-label'
-          name='radio-buttons-group'
-          css={styles.radioGroup}
-          onChange={(e) => changeTranche(e.target.value as TrancheType)}
-        >
-          {items.map((item) => (
-            <FormControlLabel
-              key={item.label}
-              value={item.value}
-              control={
-                <Radio
-                  sx={{
-                    '& .MuiSvgIcon-root': {
-                      fontSize: 24,
-                    },
-                  }}
-                />
-              }
-              label={item.label}
-              css={styles.formControl}
-            />
-          ))}
-        </RadioGroup>
-      </FormControl>
-      <BottomButton
-        variant='contained'
-        disabled={!selectedTranche}
-        onClick={handleNext}
-      >
-        NEXT
-      </BottomButton>
-    </WrapperModal>
-  )
-}