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

package/src/components/SolanaTxDoneModal.tsx

@@ -0,0 +1,119 @@
+import { Box, Button, css, Typography, useTheme } from '@mui/material'
+import React, { useCallback } from 'react'
+
+import { SolanaChainEnum } from '@huma-finance/shared'
+import { useAppDispatch } from '../hooks/useRedux'
+import { resetState } from '../store/widgets.reducers'
+import { CheckIcon } from './icons'
+import { SolanaViewOnExplorer } from './SolanaViewOnExplorer'
+
+type Props = {
+  content: string[]
+  subContent?: string[]
+  buttonText?: string
+  solanaSignature?: string
+  chainId?: SolanaChainEnum
+  handleAction: () => void
+}
+
+export function SolanaTxDoneModal({
+  content,
+  subContent,
+  handleAction,
+  solanaSignature,
+  chainId,
+  buttonText,
+}: 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}>
+        {solanaSignature && chainId && (
+          <SolanaViewOnExplorer signature={solanaSignature} chainId={chainId} />
+        )}
+        <Button
+          className='transaction-done-modal-close-btn'
+          variant='contained'
+          fullWidth
+          onClick={handleCloseModal}
+        >
+          {!buttonText ? 'DONE' : buttonText}
+        </Button>
+      </Box>
+    </Box>
+  )
+}

package/src/components/SolanaTxSendModal.tsx

@@ -0,0 +1,61 @@
+import { SolanaChainEnum } from '@huma-finance/shared'
+import React, { useEffect, useState } from 'react'
+
+import { useConnection, useWallet } from '@solana/wallet-adapter-react'
+import { Transaction } from '@solana/web3.js'
+import { setError, setSolanaSignature } from '../store/widgets.reducers'
+import { LoadingModal } from './LoadingModal'
+import { SolanaViewOnExplorer } from './SolanaViewOnExplorer'
+import { useAppDispatch } from '../hooks/useRedux'
+
+type Props = {
+  chainId: SolanaChainEnum
+  tx?: Transaction
+  handleSuccess: () => void
+}
+
+export function SolanaTxSendModal({
+  chainId,
+  tx,
+  handleSuccess,
+}: Props): React.ReactElement | null {
+  const dispatch = useAppDispatch()
+  const { sendTransaction } = useWallet()
+  const { connection } = useConnection()
+  const [signature, setSignature] = useState<string>('')
+
+  useEffect(() => {
+    async function sendTx() {
+      if (!connection || !tx) {
+        return
+      }
+
+      try {
+        const latestBlockHash = await connection.getLatestBlockhash()
+        const signature = await sendTransaction(tx, connection)
+        setSignature(signature)
+        dispatch(setSolanaSignature(signature))
+
+        await connection.confirmTransaction({
+          blockhash: latestBlockHash.blockhash,
+          lastValidBlockHeight: latestBlockHash.lastValidBlockHeight,
+          signature,
+        })
+        handleSuccess()
+      } catch (error: unknown) {
+        const err = error as Error
+        dispatch(setError({ errorMessage: err?.message || '' }))
+      }
+    }
+    sendTx()
+  }, [connection, dispatch, handleSuccess, sendTransaction, tx])
+
+  return (
+    <LoadingModal
+      title='Transaction Pending'
+      description='Waiting for confirmation...'
+    >
+      <SolanaViewOnExplorer chainId={chainId} signature={signature} />
+    </LoadingModal>
+  )
+}

package/src/components/SolanaViewOnExplorer.tsx

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

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

package/src/index.tsx

@@ -73,6 +73,26 @@ 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'
 
 /**
@@ -534,4 +554,123 @@ 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,6 +32,7 @@ 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
@@ -102,6 +103,9 @@ export const widgetSlice = createSlice({
     setMultisend: (state, { payload }: PayloadAction<MultisendPayload>) => {
       state.multisend = payload
     },
+    setSolanaSignature: (state, { payload }: PayloadAction<string>) => {
+      state.solanaSignature = payload
+    },
     setError: (
       state,
       {
@@ -130,6 +134,7 @@ export const {
   setWithdrawShares,
   setRedeemAmount,
   setRedeemShares,
+  setSolanaSignature,
 } = widgetSlice.actions
 
 export default widgetSlice.reducer

package/src/store/widgets.store.ts

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