@huma-finance/widgets 0.0.73-beta.950 → 0.0.73-beta.954

package/dist/src/components/CreditLine/stellarBorrow/1-ChooseAmount.d.ts

@@ -0,0 +1,8 @@
+import { StellarPoolInfo } from '../../../../../huma-shared/src';
+import { default as React } from 'react';
+type Props = {
+    poolInfo: StellarPoolInfo;
+    creditAvailable: number;
+};
+export declare function ChooseAmount({ poolInfo, creditAvailable, }: Props): React.ReactElement | null;
+export {};

package/dist/src/components/CreditLine/stellarBorrow/2-ApproveAllowance.d.ts

@@ -0,0 +1,7 @@
+import { StellarPoolInfo } from '../../../../../huma-shared/src';
+import { default as React } from 'react';
+type Props = {
+    poolInfo: StellarPoolInfo;
+};
+export declare function ApproveAllowance({ poolInfo, }: Props): React.ReactElement | null;
+export {};

package/dist/src/components/CreditLine/stellarBorrow/3-Transfer.d.ts

@@ -0,0 +1,7 @@
+import { StellarPoolInfo } from '../../../../../huma-shared/src';
+import { default as React } from 'react';
+type Props = {
+    poolInfo: StellarPoolInfo;
+};
+export declare function Transfer({ poolInfo }: Props): React.ReactElement | null;
+export {};

package/dist/src/components/CreditLine/stellarBorrow/4-Success.d.ts

@@ -0,0 +1,10 @@
+import { CloseModalOptions, StellarPoolInfo } from '../../../../../huma-shared/src';
+import { default as React } from 'react';
+import { StellarPoolState } from '../../../../../huma-web-shared/src';
+type Props = {
+    poolInfo: StellarPoolInfo;
+    poolState: StellarPoolState;
+    handleAction: (options?: CloseModalOptions) => void;
+};
+export declare function Success({ poolInfo, poolState, handleAction, }: Props): React.ReactElement;
+export {};

package/dist/src/components/CreditLine/stellarBorrow/index.d.ts

@@ -0,0 +1,18 @@
+import { CloseModalOptions, StellarPoolInfo } from '../../../../../huma-shared/src';
+import { StellarPoolState } from '../../../../../huma-web-shared/src';
+import { default as React } from 'react';
+/**
+ * Stellar pool borrow widget props
+ * @typedef {Object} StellarBorrowProps
+ * @property {StellarPoolInfo} poolInfo The metadata of the pool.
+ * @property {StellarPoolState} poolState The current state config of the pool.
+ * @property {function((CloseModalOptions|undefined)):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 StellarBorrowProps {
+    poolInfo: StellarPoolInfo;
+    poolState: StellarPoolState;
+    handleClose: (options?: CloseModalOptions) => void;
+    handleSuccess?: () => void;
+}
+export declare function StellarBorrow({ poolInfo, poolState, handleClose, handleSuccess, }: StellarBorrowProps): React.ReactElement | null;

package/dist/src/index.d.ts

@@ -24,6 +24,7 @@ import { LendWithdrawProps } from './components/Lend/withdraw';
 import { LendWithdrawPropsV2 } from './components/Lend/withdrawV2';
 import { ReceivableBackedCreditLineBorrowPropsV2 } from './components/ReceivableBackedCreditLine/borrow';
 import { ReceivableBackedCreditLinePaymentPropsV2 } from './components/ReceivableBackedCreditLine/payment';
+import { StellarBorrowProps } from './components/CreditLine/stellarBorrow';
 /**
  * Mapping of your JSON-RPC connections indexed by chainId
  * @typedef {Object} JsonRpcConnectionMap
@@ -371,6 +372,17 @@ type StellarLendSupplyWidgetProps = StellarLendSupplyProps & GenericWidgetProps;
  * @param {StellarLendSupplyWidgetProps} props - Widget props
  */
 export declare function StellarLendSupplyWidget(props: StellarLendSupplyWidgetProps): import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * Borrow widget props for Stellar pools
+ * @typedef {Object} StellarLendSupplyWidgetProps
+ */
+type StellarBorrowWidgetProps = StellarBorrowProps & GenericWidgetProps;
+/**
+ * Borrow widget for Stellar pools
+ *
+ * @param {StellarBorrowWidgetProps} props - Widget props
+ */
+export declare function StellarBorrowWidget(props: StellarBorrowWidgetProps): import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * Lend pool supply widget props for Solana pools
  * @typedef {Object} SolanaEnableAutoRedemptionWidgetProps

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.73-beta.950+6da832c",
+  "version": "0.0.73-beta.954+dbbe72e",
   "publishConfig": {
     "access": "public"
   },
@@ -22,9 +22,9 @@
     "@ethersproject/contracts": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.73-beta.950+6da832c",
-    "@huma-finance/shared": "^0.0.73-beta.950+6da832c",
-    "@huma-finance/web-shared": "^0.0.73-beta.950+6da832c",
+    "@huma-finance/sdk": "^0.0.73-beta.954+dbbe72e",
+    "@huma-finance/shared": "^0.0.73-beta.954+dbbe72e",
+    "@huma-finance/web-shared": "^0.0.73-beta.954+dbbe72e",
     "@mui/x-date-pickers": "^5.0.7",
     "@notifi-network/notifi-frontend-client": "^1.1.2",
     "@notifi-network/notifi-react": "^1.1.2",
@@ -159,7 +159,8 @@
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@ethersproject/providers": "5.7.2",
-    "@huma-finance/soroban-tranche-vault": "0.0.18",
+    "@huma-finance/soroban-sep41": "0.0.23",
+    "@huma-finance/soroban-tranche-vault": "0.0.23",
     "@mui/icons-material": "^5.3.0",
     "@mui/material": "^5.0.6",
     "@mui/styles": "^5.0.2",
@@ -170,6 +171,7 @@
     "@solana/wallet-adapter-react": "0.15.35",
     "@solana/web3.js": "^1.95.3",
     "@soroban-react/core": "^9.3.0",
+    "@stellar/stellar-sdk": "13.0.0",
     "@vitejs/plugin-react": "4.3.4",
     "arweave": "^1.10.0",
     "bs58": "6.0.0",
@@ -188,5 +190,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "6da832ca26191b75c24a62dce5ae7e1b5929fbd0"
+  "gitHead": "dbbe72e2b42c554da0f293a33a22a7cd6d9d93ba"
 }

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

@@ -0,0 +1,45 @@
+import { formatNumber, StellarPoolInfo } from '@huma-finance/shared'
+import React, { useState } from 'react'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { setStep, setSupplyAmount } from '../../../store/widgets.reducers'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { InputAmountModal } from '../../InputAmountModal'
+
+type Props = {
+  poolInfo: StellarPoolInfo
+  creditAvailable: number
+}
+
+export function ChooseAmount({
+  poolInfo,
+  creditAvailable,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { symbol } = poolInfo.underlyingToken
+  const [currentAmount, setCurrentAmount] = useState<number | string>(0)
+
+  const handleChangeAmount = (newAmount: number) => {
+    setCurrentAmount(newAmount)
+    dispatch(setSupplyAmount(Number(newAmount)))
+  }
+
+  const handleAction = () => {
+    dispatch(setStep(WIDGET_STEP.ApproveAllowance))
+  }
+
+  return (
+    <InputAmountModal
+      title='Borrow'
+      subTitle='Choose Amount'
+      tokenSymbol={symbol}
+      currentAmount={currentAmount}
+      handleChangeAmount={handleChangeAmount}
+      maxAmount={creditAvailable}
+      maxAmountTitle={`${String(
+        formatNumber(creditAvailable),
+      )} ${symbol} Available`}
+      handleAction={handleAction}
+      actionText='BORROW'
+    />
+  )
+}

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

@@ -0,0 +1,119 @@
+import { STELLAR_CHAINS_INFO, StellarPoolInfo } from '@huma-finance/shared'
+import { Box, css, useTheme } from '@mui/material'
+import { Client as Sep41TokenClient } from '@huma-finance/soroban-sep41'
+import React, { useCallback, useContext, useState } from 'react'
+
+import { rpc, xdr } from '@stellar/stellar-sdk'
+import {
+  fetchStellarPoolSentinel,
+  getClientCommonParams,
+  StellarConnectionContext,
+} from '@huma-finance/web-shared'
+import { WrapperModal } from '../../WrapperModal'
+import { AutoPaybackImg } from '../../images'
+import { BottomButton } from '../../BottomButton'
+import { StellarTxSendModal } from '../../StellarTxSendModal'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { setStep } from '../../../store/widgets.reducers'
+import { useAppDispatch } from '../../../hooks/useRedux'
+import { LoadingModal } from '../../LoadingModal'
+
+type Props = {
+  poolInfo: StellarPoolInfo
+}
+
+export function ApproveAllowance({
+  poolInfo,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const theme = useTheme()
+  const { address: stellarAddress } = useContext(StellarConnectionContext)
+  const { symbol, decimals } = poolInfo.underlyingToken
+  const [tx, setTx] = useState<xdr.Transaction | null>(null)
+  const [loadingTx, setLoadingTx] = useState(false)
+
+  const styles = {
+    iconWrapper: css`
+      ${theme.cssMixins.rowCentered};
+      margin-top: ${theme.spacing(6)};
+      & > img {
+        width: 220px;
+      }
+    `,
+    description: css`
+      margin-top: ${theme.spacing(4)};
+      font-weight: 400;
+      font-size: 16px;
+      color: ${theme.palette.text.secondary};
+      padding: ${theme.spacing(0, 1)};
+    `,
+  }
+
+  const handleSuccess = useCallback(async () => {
+    dispatch(setStep(WIDGET_STEP.Transfer))
+  }, [dispatch])
+
+  const sendIncreaseAllowance = useCallback(async () => {
+    if (!stellarAddress) {
+      return
+    }
+    setLoadingTx(true)
+
+    const sentinelAddress = await fetchStellarPoolSentinel(
+      poolInfo,
+      stellarAddress,
+    )
+
+    const chainMetadata = STELLAR_CHAINS_INFO[poolInfo.chainId]
+    const server = new rpc.Server(chainMetadata.rpc, {
+      allowHttp: true,
+    })
+    const latestLedger = await server.getLatestLedger()
+    const advanceLedgerNum = 3_000_000
+
+    const client = new Sep41TokenClient({
+      publicKey: stellarAddress,
+      contractId: poolInfo.underlyingToken.address,
+      ...getClientCommonParams(chainMetadata, stellarAddress),
+    })
+    const tx = await client.approve({
+      from: stellarAddress,
+      spender: sentinelAddress,
+      amount: BigInt(1_000_000_000) * BigInt(10) ** BigInt(decimals),
+      expiration_ledger: latestLedger.sequence + advanceLedgerNum,
+    })
+    setTx(tx)
+    setLoadingTx(false)
+  }, [decimals, poolInfo, stellarAddress])
+
+  if (loadingTx) {
+    return (
+      <LoadingModal
+        title='Generating Approval Transaction'
+        description='Loading...'
+      />
+    )
+  }
+
+  if (!tx) {
+    return (
+      <WrapperModal
+        title='Auto Payback'
+        subTitle='Approve token allowance to enable autopayments.'
+      >
+        <Box css={styles.iconWrapper}>
+          <img src={AutoPaybackImg} alt='auto-payback' />
+        </Box>
+        <Box css={styles.description}>
+          This allowance transaction allows our automation to make minimum
+          payments automatically on your behalf.
+        </Box>
+        <BottomButton variant='contained' onClick={sendIncreaseAllowance}>
+          APPROVE {symbol} PAYMENTS
+        </BottomButton>
+      </WrapperModal>
+    )
+  }
+
+  return <StellarTxSendModal tx={tx} handleSuccess={handleSuccess} />
+}

package/src/components/CreditLine/stellarBorrow/3-Transfer.tsx

@@ -0,0 +1,61 @@
+import {
+  STELLAR_CHAINS_INFO,
+  StellarPoolInfo,
+  tokenDecimalUtils,
+} from '@huma-finance/shared'
+import AssembledTransaction from '@stellar/stellar-sdk'
+import { Client as PoolCreditClient } from '@huma-finance/soroban-pool-credit'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
+
+import {
+  getClientCommonParams,
+  StellarConnectionContext,
+} from '@huma-finance/web-shared'
+import { useAppDispatch, useAppSelector } from '../../../hooks/useRedux'
+import { setStep } from '../../../store/widgets.reducers'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { WIDGET_STEP } from '../../../store/widgets.store'
+import { StellarTxSendModal } from '../../StellarTxSendModal'
+
+type Props = {
+  poolInfo: StellarPoolInfo
+}
+
+export function Transfer({ poolInfo }: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const [tx, setTx] = useState<typeof AssembledTransaction | null>(null)
+  const { address: stellarAddress } = useContext(StellarConnectionContext)
+  const { supplyAmount } = useAppSelector(selectWidgetState)
+  const { decimals } = poolInfo.underlyingToken
+  const supplyBigNumber = tokenDecimalUtils.parseUnits(
+    String(supplyAmount),
+    decimals,
+  )
+
+  const handleSuccess = useCallback(async () => {
+    dispatch(setStep(WIDGET_STEP.Done))
+  }, [dispatch])
+
+  useEffect(() => {
+    async function getTx() {
+      if (!stellarAddress) {
+        return
+      }
+
+      const chainMetadata = STELLAR_CHAINS_INFO[poolInfo.chainId]
+      const poolClient = new PoolCreditClient({
+        publicKey: stellarAddress,
+        contractId: poolInfo.poolCredit,
+        ...getClientCommonParams(chainMetadata, stellarAddress),
+      })
+      const tx = await poolClient.drawdown({
+        borrower: stellarAddress,
+        amount: supplyBigNumber,
+      })
+      setTx(tx)
+    }
+    getTx()
+  }, [poolInfo, stellarAddress, supplyBigNumber])
+
+  return <StellarTxSendModal tx={tx} handleSuccess={handleSuccess} />
+}

package/src/components/CreditLine/stellarBorrow/4-Success.tsx

@@ -0,0 +1,46 @@
+import {
+  CloseModalOptions,
+  formatNumber,
+  StellarPoolInfo,
+  timeUtil,
+} from '@huma-finance/shared'
+import React, { useCallback } from 'react'
+import { StellarPoolState } from '@huma-finance/web-shared'
+import { useAppSelector } from '../../../hooks/useRedux'
+import { selectWidgetState } from '../../../store/widgets.selectors'
+import { StellarTxDoneModal } from '../../StellarTxDoneModal'
+
+type Props = {
+  poolInfo: StellarPoolInfo
+  poolState: StellarPoolState
+  handleAction: (options?: CloseModalOptions) => void
+}
+
+export function Success({
+  poolInfo,
+  poolState,
+  handleAction,
+}: Props): React.ReactElement {
+  const { supplyAmount, txHash } = useAppSelector(selectWidgetState)
+  const { symbol } = poolInfo.underlyingToken
+  const dueDate = timeUtil.timestampToLL(poolState.epochEndTime)
+
+  const content = [
+    `${formatNumber(supplyAmount)} ${symbol} is now in your wallet.`,
+    `Note: your payment will be automatically deducted on ${dueDate}.`,
+  ]
+
+  const handleUserAction = useCallback(() => {
+    handleAction({ isSuccess: true })
+  }, [handleAction])
+
+  return (
+    <StellarTxDoneModal
+      chainId={poolInfo.chainId}
+      handleAction={handleUserAction}
+      content={content}
+      txHash={txHash}
+      buttonText='DONE'
+    />
+  )
+}

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

@@ -0,0 +1,100 @@
+import { CloseModalOptions, StellarPoolInfo } from '@huma-finance/shared'
+import {
+  StellarConnectionContext,
+  StellarPoolState,
+  useStellarBorrower,
+} from '@huma-finance/web-shared'
+import React, { useContext, 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 { ChooseAmount } from './1-ChooseAmount'
+import { ApproveAllowance } from './2-ApproveAllowance'
+import { Transfer } from './3-Transfer'
+import { Success } from './4-Success'
+
+/**
+ * Stellar pool borrow widget props
+ * @typedef {Object} StellarBorrowProps
+ * @property {StellarPoolInfo} poolInfo The metadata of the pool.
+ * @property {StellarPoolState} poolState The current state config of the pool.
+ * @property {function((CloseModalOptions|undefined)):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 StellarBorrowProps {
+  poolInfo: StellarPoolInfo
+  poolState: StellarPoolState
+  handleClose: (options?: CloseModalOptions) => void
+  handleSuccess?: () => void
+}
+
+export function StellarBorrow({
+  poolInfo,
+  poolState,
+  handleClose,
+  handleSuccess,
+}: StellarBorrowProps): React.ReactElement | null {
+  const title = 'Borrow'
+  const dispatch = useDispatch()
+  const { address: stellarAddress } = useContext(StellarConnectionContext)
+  const { creditAvailable, isLoadingStellarBorrower } = useStellarBorrower(
+    stellarAddress,
+    poolInfo,
+  )
+  const { step, errorMessage } = useAppSelector(selectWidgetState)
+
+  useEffect(() => {
+    if (!step && !isLoadingStellarBorrower) {
+      dispatch(setStep(WIDGET_STEP.ChooseAmount))
+    }
+  }, [dispatch, handleClose, poolInfo, step, isLoadingStellarBorrower])
+
+  if (isLoadingStellarBorrower) {
+    return (
+      <WidgetWrapper
+        isOpen
+        isLoading
+        loadingTitle={title}
+        handleClose={handleClose}
+        handleSuccess={handleSuccess}
+      />
+    )
+  }
+
+  return (
+    <WidgetWrapper
+      isOpen
+      loadingTitle={title}
+      handleClose={handleClose}
+      handleSuccess={handleSuccess}
+    >
+      {step === WIDGET_STEP.ChooseAmount && (
+        <ChooseAmount poolInfo={poolInfo} creditAvailable={creditAvailable} />
+      )}
+      {step === WIDGET_STEP.ApproveAllowance && (
+        <ApproveAllowance poolInfo={poolInfo} />
+      )}
+      {step === WIDGET_STEP.Transfer && <Transfer poolInfo={poolInfo} />}
+      {step === WIDGET_STEP.Done && (
+        <Success
+          poolInfo={poolInfo}
+          poolState={poolState}
+          handleAction={handleClose}
+        />
+      )}
+      {step === WIDGET_STEP.Error && (
+        <ErrorModal
+          title={title}
+          errorReason='Sorry there was an error'
+          errorMessage={errorMessage}
+          handleOk={handleClose}
+        />
+      )}
+    </WidgetWrapper>
+  )
+}

package/src/index.tsx

@@ -101,6 +101,10 @@ import { SuperfluidFactoring } from './components/SuperfluidFactoring'
 import { store } from './store'
 import { themeHuma } from './theme'
 import { WCProps } from './utilTypes'
+import {
+  StellarBorrow,
+  StellarBorrowProps,
+} from './components/CreditLine/stellarBorrow'
 
 /**
  * Mapping of your JSON-RPC connections indexed by chainId
@@ -709,6 +713,25 @@ export function StellarLendSupplyWidget(props: StellarLendSupplyWidgetProps) {
   )
 }
 
+/**
+ * Borrow widget props for Stellar pools
+ * @typedef {Object} StellarLendSupplyWidgetProps
+ */
+type StellarBorrowWidgetProps = StellarBorrowProps & GenericWidgetProps
+
+/**
+ * Borrow widget for Stellar pools
+ *
+ * @param {StellarBorrowWidgetProps} props - Widget props
+ */
+export function StellarBorrowWidget(props: StellarBorrowWidgetProps) {
+  return (
+    <GenericWidget {...props}>
+      <StellarBorrow {...props} />
+    </GenericWidget>
+  )
+}
+
 /**
  * Lend pool supply widget props for Solana pools
  * @typedef {Object} SolanaEnableAutoRedemptionWidgetProps