@huma-finance/widgets 0.0.62-beta.622 → 0.0.62-beta.627

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

@@ -0,0 +1,83 @@
+import { SolanaPoolInfo } from '@huma-finance/shared'
+import { useBorrowerAccounts } 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 { Transfer } from './2-Transfer'
+import { Done } from './3-Done'
+
+/**
+ * Lend pool supply props
+ * @typedef {Object} SolanaPaymentProps
+ * @property {SolanaPoolInfo} poolInfo The metadata of the pool.
+ * @property {function():void|undefined} handleSuccess Optional function to notify that the lending pool supply action is successful.
+ */
+export interface SolanaPaymentProps {
+  poolInfo: SolanaPoolInfo
+  handleClose: () => void
+  handleSuccess?: () => void
+}
+
+export function SolanaPayment({
+  poolInfo,
+  handleClose,
+  handleSuccess,
+}: SolanaPaymentProps): React.ReactElement | null {
+  const dispatch = useDispatch()
+  const { creditStateAccount, loading: isLoadingBorrowerAccounts } =
+    useBorrowerAccounts(poolInfo.chainId, poolInfo.poolName)
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+  useEffect(() => {
+    if (!step) {
+      dispatch(setStep(WIDGET_STEP.ChooseAmount))
+    }
+  }, [dispatch, step])
+
+  const title = 'Make Payment'
+  if (isLoadingBorrowerAccounts) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle={title}
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle={title}
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ChooseAmount && creditStateAccount && (
+        <ChooseAmount
+          poolInfo={poolInfo}
+          creditStateAccount={creditStateAccount}
+        />
+      )}
+      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
+      {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/InputAmountModal.tsx

@@ -93,6 +93,7 @@ export function InputAmountModal({
       font-size: 13px;
       line-height: 22px;
       letter-spacing: 0.46px;
+      white-space: nowrap;
     `,
     info: css`
       color: ${theme.palette.text.secondary};

package/src/index.tsx

@@ -89,6 +89,10 @@ import {
   SolanaBorrow,
   SolanaBorrowProps,
 } from './components/CreditLine/solanaBorrow'
+import {
+  SolanaPayment,
+  SolanaPaymentProps,
+} from './components/CreditLine/solanaPayment'
 
 /**
  * Mapping of your JSON-RPC connections indexed by chainId
@@ -566,8 +570,6 @@ function SolanaWidget(props: WCProps<SolanaWidgetProps>) {
 /**
  * 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
 
@@ -587,8 +589,6 @@ export function SolanaLendSupplyWidget(props: SolanaLendSupplyWidgetProps) {
 /**
  * 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
@@ -611,8 +611,6 @@ export function SolanaLendAddRedemptionWidget(
 /**
  * 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
@@ -635,8 +633,6 @@ export function SolanaLendCancelRedemptionWidget(
 /**
  * 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
 
@@ -652,3 +648,22 @@ export function SolanaBorrowWidget(props: SolanaBorrowWidgetProps) {
     </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>
+  )
+}

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

@@ -1,89 +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
-          BigInt(
-            SolanaTokenUtils.parseUnits(
-              '100000000000', // 100 billion
-              poolInfo.underlyingMint.decimals,
-            ).toString(),
-          ), // 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}
-    />
-  )
-}