@huma-finance/widgets 0.0.62-beta.631 → 0.0.62-beta.633

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.62-beta.631+5e2c988",
+  "version": "0.0.62-beta.633+de08f40",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "dependencies": {
     "@apollo/client": "^3.7.2",
     "@coinbase/wallet-sdk": "^3.5.3",
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/bignumber": "^5.6.0",
     "@ethersproject/bytes": "^5.7.0",
@@ -29,9 +31,9 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.6.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.62-beta.631+5e2c988",
-    "@huma-finance/shared": "^0.0.62-beta.631+5e2c988",
-    "@huma-finance/web-shared": "^0.0.62-beta.631+5e2c988",
+    "@huma-finance/sdk": "^0.0.62-beta.633+de08f40",
+    "@huma-finance/shared": "^0.0.61",
+    "@huma-finance/web-shared": "^0.0.61",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -76,7 +78,7 @@
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.1",
     "tslib": "^2.5.0",
-    "typescript": "^5.0.0",
+    "typescript": "^4.8.4",
     "utf8": "^3.0.0",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"
@@ -186,18 +188,6 @@
     "wagmi": "^0.12.10"
   },
   "peerDependencies": {
-    "@coral-xyz/anchor": "^0.30.1",
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
-    "@mui/icons-material": "^5.3.0",
-    "@mui/material": "^5.0.6",
-    "@mui/styles": "^5.0.2",
-    "@mui/system": "^5.0.6",
-    "@mui/x-date-pickers": "^5.0.7",
-    "@solana/spl-token": "^0.4.8",
-    "@solana/wallet-adapter-base": "^0.9.23",
-    "@solana/wallet-adapter-react": "^0.15.35",
-    "@solana/web3.js": "^1.95.3",
     "ethers": "^5.6.1",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
@@ -207,5 +197,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "5e2c98866579b41a5f89c603211b4ec11d9a78da"
+  "gitHead": "de08f401ed13fbb79a89ccb48e066ad217d6d1bc"
 }

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

@@ -45,7 +45,6 @@ export function ChooseAmount({
     ethers.utils.formatUnits(payoffAmountBN, decimals),
   )
 
-  // TODO: Remove redundant useEffect
   useEffect(() => {
     setCurrentAmount(totalDueAmount)
   }, [totalDueAmount])

package/src/components/InputAmountModal.tsx

@@ -20,7 +20,6 @@ type Props = {
   tokenSymbol: string
   suffix?: string
   currentAmount: number | string
-  minimumAmount?: number
   maxAmount: number | string
   maxAmountText?: string
   maxAmountTitle?: string
@@ -36,7 +35,6 @@ export function InputAmountModal({
   tokenSymbol,
   suffix: defaultSuffix,
   currentAmount,
-  minimumAmount,
   maxAmount,
   maxAmountText = 'MAX',
   maxAmountTitle,
@@ -93,7 +91,6 @@ export function InputAmountModal({
       font-size: 13px;
       line-height: 22px;
       letter-spacing: 0.46px;
-      white-space: nowrap;
     `,
     info: css`
       color: ${theme.palette.text.secondary};
@@ -128,9 +125,6 @@ export function InputAmountModal({
     if (!isEmpty(maxAmount) && Number(currentAmount) > Number(maxAmount)) {
       return true
     }
-    if (!isEmpty(minimumAmount) && Number(currentAmount) < minimumAmount!) {
-      return true
-    }
     return false
   }
 
@@ -163,6 +157,7 @@ export function InputAmountModal({
           />
         </Box>
       </Box>
+
       {infos && (
         <Box>
           {infos.map((info) => (
@@ -172,13 +167,7 @@ export function InputAmountModal({
           ))}
         </Box>
       )}
-      {!!minimumAmount && minimumAmount > 0 && (
-        <Box>
-          <Typography css={styles.info} key='minDeposit'>
-            Minimum deposit: {minimumAmount} {tokenSymbol}
-          </Typography>
-        </Box>
-      )}
+
       <BottomButton
         variant='contained'
         onClick={handleAction}

package/src/components/Lend/supplyV2/6-Success.tsx

@@ -90,13 +90,13 @@ export function Success({
   ]
 
   const getSubContent = () => {
-    const lockupEndTime = dayjs()
+    const redemptionTime = dayjs()
       .add(lpConfig.withdrawalLockoutPeriodInDays, 'day')
       .date(1)
-    const withdrawTime = lockupEndTime.add(1, 'month')
+    const withdrawTime = redemptionTime.add(1, 'month')
     return [
       `You can begin submitting redemption requests on ${timeUtil.timestampToLL(
-        lockupEndTime.unix(),
+        redemptionTime.unix(),
       )}, which can be redeemed starting ${timeUtil.timestampToLL(
         withdrawTime.unix(),
       )}.`,

package/src/components/WidgetWrapper.tsx

@@ -31,7 +31,7 @@ export function WidgetWrapper({
 }: WCProps<Props>): React.ReactElement | null {
   const theme = useTheme()
   const dispatch = useAppDispatch()
-  const { step, solanaSignature } = useAppSelector(selectWidgetState)
+  const { step } = useAppSelector(selectWidgetState)
   const [{ state, failReason, txReceipt }] = useAtom(sendTxAtom)
   const reset = useResetAtom(txAtom)
 
@@ -42,14 +42,12 @@ export function WidgetWrapper({
   }, [dispatch, failReason, state])
 
   useEffect(() => {
-    if (step === WIDGET_STEP.Done && (txReceipt || solanaSignature)) {
-      if (handleSuccess && txReceipt) {
+    if (step === WIDGET_STEP.Done && txReceipt) {
+      if (handleSuccess) {
         handleSuccess(txReceipt.blockNumber)
-      } else if (handleSuccess && solanaSignature) {
-        handleSuccess(0) // solana tx doesn't have block number
       }
     }
-  }, [handleSuccess, solanaSignature, step, txReceipt])
+  }, [handleSuccess, step, txReceipt])
 
   const handleCloseModal = useCallback(() => {
     reset()

package/src/index.tsx

@@ -73,26 +73,6 @@ 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 {
-  SolanaPayment,
-  SolanaPaymentProps,
-} from './components/CreditLine/solanaPayment'
 import { NotifiContextWrapper } from './components/Notifi/NotifiContextWrapper'
 
 /**
@@ -554,123 +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
- */
-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
- */
-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
- */
-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
- */
-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>
-  )
-}
-
-/**
- * Lend pool supply widget props for Solana pools
- * @typedef {Object} SolanaPaymentWidgetProps
- */
-type SolanaPaymentWidgetProps = SolanaPaymentProps & SolanaWidgetProps
-
-/**
- * Lend pool supply widget for Solana pools
- *
- * @param {SolanaPaymentWidgetProps} props - Widget props
- */
-export function SolanaPaymentWidget(props: SolanaPaymentWidgetProps) {
-  return (
-    <SolanaWidget {...props}>
-      <SolanaPayment {...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/components/CreditLine/solanaBorrow/1-ChooseAmount.tsx

@@ -1,67 +0,0 @@
-import {
-  formatNumber,
-  SolanaPoolInfo,
-  SolanaTokenUtils,
-} from '@huma-finance/shared'
-import { CreditConfigAccount } from '@huma-finance/web-shared'
-import React, { useCallback, useMemo, useState } from 'react'
-
-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
-}
-
-export function ChooseAmount({
-  poolInfo,
-  creditConfigAccount,
-}: Props): React.ReactElement {
-  const dispatch = useAppDispatch()
-  const { symbol, decimals } = poolInfo.underlyingMint
-  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(() => {
-    const borrowAmountBN = SolanaTokenUtils.parseUnits(
-      String(currentAmount),
-      decimals,
-    )
-    dispatch(
-      setBorrowInfo({
-        borrowAmount: currentAmount,
-        borrowAmountBN: JSON.parse(borrowAmountBN.toString()),
-        chargedFees: 0,
-        nextStep: WIDGET_STEP.Transfer,
-      }),
-    )
-  }, [currentAmount, decimals, dispatch])
-
-  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-Transfer.tsx

@@ -1,159 +0,0 @@
-import {
-  getCreditAccounts,
-  getSentinelAddress,
-  getTokenAccounts,
-  SolanaPoolInfo,
-  SolanaTokenUtils,
-} from '@huma-finance/shared'
-import React, { useCallback, useEffect, useState } from 'react'
-
-import {
-  ASSOCIATED_TOKEN_PROGRAM_ID,
-  createApproveCheckedInstruction,
-  createAssociatedTokenAccountInstruction,
-  getAccount,
-  TOKEN_2022_PROGRAM_ID,
-  TokenAccountNotFoundError,
-  TokenInvalidAccountOwnerError,
-} from '@solana/spl-token'
-import { useConnection, useWallet } from '@solana/wallet-adapter-react'
-import { PublicKey, Transaction } from '@solana/web3.js'
-import { useHumaProgram } from '@huma-finance/web-shared'
-import { BN } from '@coral-xyz/anchor'
-import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
-import { SolanaTxSendModal } from '../../SolanaTxSendModal'
-import { setStep } from '../../../store/widgets.reducers'
-import { WIDGET_STEP } from '../../../store/widgets.store'
-import { selectWidgetState } from '../../../store/widgets.selectors'
-
-type Props = {
-  poolInfo: SolanaPoolInfo
-}
-
-export function Transfer({ poolInfo }: Props): React.ReactElement | null {
-  const dispatch = useAppDispatch()
-  const { wallet, publicKey } = useWallet()
-  const sentinel = getSentinelAddress(poolInfo.chainId)
-  const { connection } = useConnection()
-  const [transaction, setTransaction] = useState<Transaction>()
-  const program = useHumaProgram(poolInfo.chainId)
-  const { borrowAmountBN: borrowAmountBNJson } =
-    useAppSelector(selectWidgetState)
-
-  const handleSuccess = useCallback(() => {
-    dispatch(setStep(WIDGET_STEP.Done))
-  }, [dispatch])
-
-  useEffect(() => {
-    async function getTx() {
-      if (!wallet || !publicKey || !connection) {
-        return
-      }
-
-      const { underlyingTokenATA } = getTokenAccounts(poolInfo, publicKey)
-      const tx = new Transaction()
-
-      // Create user token account if it doesn't exist
-      let tokenAccount
-      try {
-        tokenAccount = await getAccount(
-          connection,
-          underlyingTokenATA,
-          undefined,
-          TOKEN_2022_PROGRAM_ID,
-        )
-      } catch (error: unknown) {
-        // TokenAccountNotFoundError can be possible if the associated address has already received some lamports,
-        // becoming a system account. Assuming program derived addressing is safe, this is the only case for the
-        // TokenInvalidAccountOwnerError in this code path.
-        if (
-          error instanceof TokenAccountNotFoundError ||
-          error instanceof TokenInvalidAccountOwnerError
-        ) {
-          // As this isn't atomic, it's possible others can create associated accounts meanwhile.
-          tx.add(
-            createAssociatedTokenAccountInstruction(
-              publicKey,
-              underlyingTokenATA,
-              publicKey,
-              new PublicKey(poolInfo.underlyingMint.address),
-              TOKEN_2022_PROGRAM_ID,
-              ASSOCIATED_TOKEN_PROGRAM_ID,
-            ),
-          )
-        }
-      }
-
-      // Approve allowance to the sentinel if the account is new or delegated amount is not enough
-      const borrowAmountBN = new BN(borrowAmountBNJson?.toString() ?? '0')
-      if (
-        !tokenAccount ||
-        borrowAmountBN.gt(new BN(tokenAccount.delegatedAmount.toString())) ||
-        tokenAccount.delegate?.toString() !== sentinel
-      ) {
-        tx.add(
-          createApproveCheckedInstruction(
-            underlyingTokenATA,
-            new PublicKey(poolInfo.underlyingMint.address),
-            new PublicKey(sentinel), // delegate
-            publicKey, // owner of the wallet
-            BigInt(
-              SolanaTokenUtils.parseUnits(
-                '100000000000', // 100 billion
-                poolInfo.underlyingMint.decimals,
-              ).toString(),
-            ), // amount
-            poolInfo.underlyingMint.decimals,
-            undefined, // multiSigners
-            TOKEN_2022_PROGRAM_ID,
-          ),
-        )
-      }
-
-      const { creditConfigAccount, creditStateAccount } = getCreditAccounts(
-        poolInfo,
-        publicKey,
-      )
-      // borrowAmountBNJson is stored as a raw number string in this flow
-      const programTx = await program.methods
-        .drawdown(borrowAmountBN)
-        .accountsPartial({
-          borrower: publicKey,
-          humaConfig: poolInfo.humaConfig,
-          poolConfig: poolInfo.poolConfig,
-          poolState: poolInfo.poolState,
-          creditConfig: creditConfigAccount,
-          creditState: creditStateAccount,
-          poolAuthority: poolInfo.poolAuthority,
-          underlyingMint: poolInfo.underlyingMint.address,
-          poolUnderlyingToken: poolInfo.poolUnderlyingTokenAccount,
-          borrowerUnderlyingToken: underlyingTokenATA,
-          tokenProgram: TOKEN_2022_PROGRAM_ID,
-        })
-        .transaction()
-      tx.add(programTx)
-
-      setTransaction(tx)
-    }
-    getTx()
-  }, [
-    borrowAmountBNJson,
-    connection,
-    dispatch,
-    poolInfo,
-    poolInfo.underlyingMint.address,
-    poolInfo.underlyingMint.decimals,
-    program.methods,
-    publicKey,
-    sentinel,
-    wallet,
-  ])
-
-  return (
-    <SolanaTxSendModal
-      tx={transaction}
-      chainId={poolInfo.chainId}
-      handleSuccess={handleSuccess}
-    />
-  )
-}

package/src/components/CreditLine/solanaBorrow/3-Done.tsx

@@ -1,38 +0,0 @@
-import { formatNumber, SolanaPoolInfo, timeUtil } from '@huma-finance/shared'
-import React from 'react'
-
-import { SolanaPoolState } from '@huma-finance/web-shared'
-import { useAppSelector } from '../../../hooks/useRedux'
-import { selectWidgetState } from '../../../store/widgets.selectors'
-import { SolanaTxDoneModal } from '../../SolanaTxDoneModal'
-
-type Props = {
-  poolInfo: SolanaPoolInfo
-  poolState: SolanaPoolState
-  handleAction: () => void
-}
-
-export function Done({
-  poolInfo,
-  poolState,
-  handleAction,
-}: Props): React.ReactElement {
-  const { borrowAmount, solanaSignature } = useAppSelector(selectWidgetState)
-  const { symbol } = poolInfo.underlyingMint
-  const dueDate = timeUtil.timestampToLL(poolState.epochEndTime)
-
-  const content = [
-    `${formatNumber(borrowAmount)} ${symbol} is now in your wallet.`,
-    `Note: your first automatic payment will occur after ${dueDate}.`,
-  ]
-
-  return (
-    <SolanaTxDoneModal
-      handleAction={handleAction}
-      content={content}
-      chainId={poolInfo.chainId}
-      solanaSignature={solanaSignature}
-      buttonText='DONE'
-    />
-  )
-}