@huma-finance/widgets 0.0.62-beta.719 → 0.0.62-beta.721

package/src/components/Lend/supplyV2/3-ChooseAmount.tsx

@@ -111,7 +111,7 @@ export function ChooseAmount({
     <InputAmountModal
       title='Enter Amount'
       subTitle={`Depositing to ${
-        isUniTranche ? 'uni tranche' : selectedTranche
+        isUniTranche ? 'uni' : selectedTranche
       } tranche`}
       tokenSymbol={symbol}
       currentAmount={currentAmount}

package/src/components/StellarTxDoneModal.tsx

@@ -0,0 +1,119 @@
+import { Box, Button, css, Typography, useTheme } from '@mui/material'
+import React, { useCallback } from 'react'
+
+import { StellarChainEnum } from '@huma-finance/shared'
+import { useAppDispatch } from '../hooks/useRedux'
+import { resetState } from '../store/widgets.reducers'
+import { CheckIcon } from './icons'
+import { StellarViewOnExplorer } from './StellarViewOnExplorer'
+
+type Props = {
+  chainId: StellarChainEnum
+  content: string[]
+  subContent?: string[]
+  buttonText?: string
+  txHash?: string
+  handleAction: () => void
+}
+
+export function StellarTxDoneModal({
+  chainId,
+  content,
+  subContent,
+  txHash,
+  buttonText,
+  handleAction,
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const dispatch = useAppDispatch()
+
+  const styles = {
+    wrapper: css`
+      height: 518px;
+      position: relative;
+    `,
+    header: css`
+      ${theme.cssMixins.rowHCentered};
+      margin-top: ${theme.spacing(-0.5)};
+    `,
+    content: css`
+      ${theme.cssMixins.colVCentered};
+      font-weight: ${subContent ? 700 : 400};
+      font-size: 18px;
+      color: ${theme.palette.text.secondary};
+      margin-top: ${theme.spacing(8)};
+      text-align: center;
+    `,
+    subContent: css`
+      ${theme.cssMixins.colVCentered};
+      font-weight: 400;
+      font-size: 18px;
+      color: ${theme.palette.text.primary};
+      margin-top: ${theme.spacing(2)};
+      text-align: center;
+    `,
+    check: css`
+      width: 100%;
+      ${theme.cssMixins.rowHCentered};
+      margin-top: ${theme.spacing(10)};
+    `,
+    bottomButtonGroup: css`
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      display: flex;
+      row-gap: ${theme.spacing(1)};
+      column-gap: ${theme.spacing(1)};
+
+      button {
+        height: 40px;
+        margin-top: ${theme.spacing(1)};
+      }
+    `,
+  }
+
+  const handleCloseModal = useCallback(() => {
+    dispatch(resetState())
+    handleAction()
+  }, [dispatch, handleAction])
+
+  return (
+    <Box css={styles.wrapper}>
+      <Typography variant='h6' css={styles.header}>
+        Transaction Completed
+      </Typography>
+      <Box css={styles.check}>
+        <CheckIcon />
+      </Box>
+      <Box css={styles.content}>
+        {content.map((item) => (
+          <Box sx={{ marginTop: theme.spacing(1) }} key={item}>
+            {item}
+          </Box>
+        ))}
+      </Box>
+      {subContent && (
+        <Box css={styles.subContent}>
+          {subContent.map((item) => (
+            <Box sx={{ marginTop: theme.spacing(1) }} key={item}>
+              {item}
+            </Box>
+          ))}
+        </Box>
+      )}
+      <Box css={styles.bottomButtonGroup}>
+        {txHash && chainId && (
+          <StellarViewOnExplorer chainId={chainId} txHash={txHash} />
+        )}
+        <Button
+          className='transaction-done-modal-close-btn'
+          variant='contained'
+          fullWidth
+          onClick={handleCloseModal}
+        >
+          {!buttonText ? 'DONE' : buttonText}
+        </Button>
+      </Box>
+    </Box>
+  )
+}

package/src/components/StellarTxSendModal.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect } from 'react'
+import AssembledTransaction from '@stellar/stellar-sdk'
+import { useAppDispatch } from '../hooks/useRedux'
+import { setError, setTxHash } from '../store/widgets.reducers'
+import { LoadingModal } from './LoadingModal'
+
+type Props = {
+  tx?: typeof AssembledTransaction
+  handleSuccess: () => void
+}
+
+export function StellarTxSendModal({
+  tx,
+  handleSuccess,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    async function sendTx() {
+      if (!tx) {
+        return
+      }
+
+      try {
+        const txResult = await tx.signAndSend()
+        const { hash } = txResult.sendTransactionResponse
+        dispatch(setTxHash(hash))
+        handleSuccess()
+      } catch (error: unknown) {
+        const err = error as Error
+        dispatch(setError({ errorMessage: err?.message || '' }))
+      }
+    }
+    sendTx()
+  }, [dispatch, handleSuccess, tx])
+
+  return (
+    <LoadingModal
+      title='Transaction Pending'
+      description='Waiting for confirmation...'
+    />
+  )
+}

package/src/components/StellarViewOnExplorer.tsx

@@ -0,0 +1,29 @@
+import { Box, Button } from '@mui/material'
+import {
+  getStellarExplorerUrl,
+  openInNewTab,
+  StellarChainEnum,
+} from '@huma-finance/shared'
+import React from 'react'
+
+type Props = {
+  chainId: StellarChainEnum
+  txHash: string
+}
+
+export function StellarViewOnExplorer({
+  chainId,
+  txHash,
+}: Props): React.ReactElement | null {
+  const link = getStellarExplorerUrl(chainId, txHash)
+
+  if (!link) {
+    return null
+  }
+
+  return (
+    <Button fullWidth variant='outlined' onClick={() => openInNewTab(link)}>
+      <Box component='span'>VIEW ON EXPLORER</Box>
+    </Button>
+  )
+}

package/src/index.tsx

@@ -90,6 +90,10 @@ import {
   SolanaPaymentProps,
 } from './components/CreditLine/solanaPayment'
 import { NotifiContextWrapper } from './components/Notifi/NotifiContextWrapper'
+import {
+  StellarLendSupply,
+  StellarLendSupplyProps,
+} from './components/Lend/stellarSupply'
 import {
   SolanaEnableAutoRedemption,
   SolanaEnableAutoRedemptionProps,
@@ -554,13 +558,13 @@ export function ReceivableBackedCreditLinePaymentWidgetV2(
 
 /**
  * Object representing the props passed to Solana widgets
- * @typedef {Object} SolanaWidgetProps
+ * @typedef {Object} GenericWidgetProps
  */
-type SolanaWidgetProps = {
+type GenericWidgetProps = {
   handleClose?: () => void
 }
 
-function SolanaWidget(props: WCProps<SolanaWidgetProps>) {
+function GenericWidget(props: WCProps<GenericWidgetProps>) {
   const { children } = props
 
   return (
@@ -574,7 +578,7 @@ function SolanaWidget(props: WCProps<SolanaWidgetProps>) {
  * Lend pool supply widget props for Solana pools
  * @typedef {Object} SolanaLendSupplyWidgetProps
  */
-type SolanaLendSupplyWidgetProps = SolanaLendSupplyProps & SolanaWidgetProps
+type SolanaLendSupplyWidgetProps = SolanaLendSupplyProps & GenericWidgetProps
 
 /**
  * Lend pool supply widget for Solana pools
@@ -583,9 +587,9 @@ type SolanaLendSupplyWidgetProps = SolanaLendSupplyProps & SolanaWidgetProps
  */
 export function SolanaLendSupplyWidget(props: SolanaLendSupplyWidgetProps) {
   return (
-    <SolanaWidget {...props}>
+    <GenericWidget {...props}>
       <SolanaLendSupply {...props} />
-    </SolanaWidget>
+    </GenericWidget>
   )
 }
 
@@ -594,7 +598,7 @@ export function SolanaLendSupplyWidget(props: SolanaLendSupplyWidgetProps) {
  * @typedef {Object} SolanaLendAddRedemptionWidgetProps
  */
 type SolanaLendAddRedemptionWidgetProps = SolanaLendAddRedemptionProps &
-  SolanaWidgetProps
+  GenericWidgetProps
 
 /**
  * Lend pool supply widget for Solana pools
@@ -605,9 +609,9 @@ export function SolanaLendAddRedemptionWidget(
   props: SolanaLendAddRedemptionWidgetProps,
 ) {
   return (
-    <SolanaWidget {...props}>
+    <GenericWidget {...props}>
       <SolanaLendAddRedemption {...props} />
-    </SolanaWidget>
+    </GenericWidget>
   )
 }
 
@@ -616,7 +620,7 @@ export function SolanaLendAddRedemptionWidget(
  * @typedef {Object} SolanaLendCancelRedemptionWidgetProps
  */
 type SolanaLendCancelRedemptionWidgetProps = SolanaLendCancelRedemptionProps &
-  SolanaWidgetProps
+  GenericWidgetProps
 
 /**
  * Lend pool supply widget for Solana pools
@@ -627,9 +631,9 @@ export function SolanaLendCancelRedemptionWidget(
   props: SolanaLendCancelRedemptionWidgetProps,
 ) {
   return (
-    <SolanaWidget {...props}>
+    <GenericWidget {...props}>
       <SolanaLendCancelRedemption {...props} />
-    </SolanaWidget>
+    </GenericWidget>
   )
 }
 
@@ -637,7 +641,7 @@ export function SolanaLendCancelRedemptionWidget(
  * Lend pool supply widget props for Solana pools
  * @typedef {Object} SolanaBorrowWidgetProps
  */
-type SolanaBorrowWidgetProps = SolanaBorrowProps & SolanaWidgetProps
+type SolanaBorrowWidgetProps = SolanaBorrowProps & GenericWidgetProps
 
 /**
  * Lend pool supply widget for Solana pools
@@ -646,9 +650,9 @@ type SolanaBorrowWidgetProps = SolanaBorrowProps & SolanaWidgetProps
  */
 export function SolanaBorrowWidget(props: SolanaBorrowWidgetProps) {
   return (
-    <SolanaWidget {...props}>
+    <GenericWidget {...props}>
       <SolanaBorrow {...props} />
-    </SolanaWidget>
+    </GenericWidget>
   )
 }
 
@@ -656,7 +660,7 @@ export function SolanaBorrowWidget(props: SolanaBorrowWidgetProps) {
  * Lend pool supply widget props for Solana pools
  * @typedef {Object} SolanaPaymentWidgetProps
  */
-type SolanaPaymentWidgetProps = SolanaPaymentProps & SolanaWidgetProps
+type SolanaPaymentWidgetProps = SolanaPaymentProps & GenericWidgetProps
 
 /**
  * Lend pool supply widget for Solana pools
@@ -665,9 +669,28 @@ type SolanaPaymentWidgetProps = SolanaPaymentProps & SolanaWidgetProps
  */
 export function SolanaPaymentWidget(props: SolanaPaymentWidgetProps) {
   return (
-    <SolanaWidget {...props}>
+    <GenericWidget {...props}>
       <SolanaPayment {...props} />
-    </SolanaWidget>
+    </GenericWidget>
+  )
+}
+
+/**
+ * Lend pool supply widget props for Stellar pools
+ * @typedef {Object} StellarLendSupplyWidgetProps
+ */
+type StellarLendSupplyWidgetProps = StellarLendSupplyProps & GenericWidgetProps
+
+/**
+ * Lend pool supply widget for Stellar pools
+ *
+ * @param {StellarLendSupplyWidgetProps} props - Widget props
+ */
+export function StellarLendSupplyWidget(props: StellarLendSupplyWidgetProps) {
+  return (
+    <GenericWidget {...props}>
+      <StellarLendSupply {...props} />
+    </GenericWidget>
   )
 }
 
@@ -676,7 +699,7 @@ export function SolanaPaymentWidget(props: SolanaPaymentWidgetProps) {
  * @typedef {Object} SolanaEnableAutoRedemptionWidgetProps
  */
 type SolanaEnableAutoRedemptionWidgetProps = SolanaEnableAutoRedemptionProps &
-  SolanaWidgetProps
+  GenericWidgetProps
 
 /**
  * Lend pool supply widget for Solana pools
@@ -687,9 +710,9 @@ export function SolanaEnableAutoRedemptionWidget(
   props: SolanaEnableAutoRedemptionWidgetProps,
 ) {
   return (
-    <SolanaWidget {...props}>
+    <GenericWidget {...props}>
       <SolanaEnableAutoRedemption {...props} />
-    </SolanaWidget>
+    </GenericWidget>
   )
 }
 

package/src/store/widgets.reducers.ts

@@ -33,6 +33,7 @@ export const widgetSlice = createSlice({
       state.redeemAmount = undefined
       state.redeemShares = undefined
       state.solanaSignature = undefined
+      state.txHash = undefined
     },
     setStep: (state, { payload }: PayloadAction<WIDGET_STEP>) => {
       state.step = payload
@@ -106,6 +107,9 @@ export const widgetSlice = createSlice({
     setSolanaSignature: (state, { payload }: PayloadAction<string>) => {
       state.solanaSignature = payload
     },
+    setTxHash: (state, { payload }: PayloadAction<string>) => {
+      state.txHash = payload
+    },
     setPointsAccumulated: (
       state,
       { payload }: PayloadAction<number | undefined>,
@@ -141,6 +145,7 @@ export const {
   setRedeemAmount,
   setRedeemShares,
   setSolanaSignature,
+  setTxHash,
   setPointsAccumulated,
 } = widgetSlice.actions
 

package/src/store/widgets.store.ts

@@ -60,6 +60,7 @@ export type WidgetState = {
   multisend?: MultisendPayload
   solanaSignature?: string
   pointsAccumulated?: number
+  txHash?: string
 }
 
 export const initialWidgetState: WidgetState = {}