Add swap preview compact version

helium · Jul 25, 2024 · df3d153 · df3d153
1 parent 0a5b237
commit df3d153
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 3 deletions.
diff --git a/src/features/swaps/SwapScreen.tsx b/src/features/swaps/SwapScreen.tsx
@@ -591,7 +591,7 @@ const SwapScreen = () => {
   )
 
   const handleSwapTokens = useCallback(async () => {
-    if (connection && currentAccount?.solanaAddress) {
+    if (connection && currentAccount?.solanaAddress && inputMint) {
       try {
         setSwapping(true)
 
@@ -624,7 +624,15 @@ const SwapScreen = () => {
           if (!swapTxn) {
             throw new Error(t('errors.swap.tx'))
           }
-          await submitJupiterSwap(swapTxn)
+
+          await submitJupiterSwap({
+            inputMint,
+            inputAmount,
+            outputMint,
+            outputAmount,
+            minReceived,
+            swapTxn,
+          })
         }
 
         setSwapping(false)
@@ -646,6 +654,7 @@ const SwapScreen = () => {
     inputAmount,
     outputMint,
     outputAmount,
+    minReceived,
     navigation,
     submitTreasurySwap,
     submitMintDataCredits,

diff --git a/src/hooks/useSubmitTxn.tsx b/src/hooks/useSubmitTxn.tsx
@@ -14,6 +14,7 @@ import * as solUtils from '@utils/solanaUtils'
 import BN from 'bn.js'
 import React, { useCallback } from 'react'
 import { ellipsizeAddress } from '@utils/accountUtils'
+import { SwapPreview } from '../solana/SwapPreview'
 import { CollectablePreview } from '../solana/CollectablePreview'
 import { MessagePreview } from '../solana/MessagePreview'
 import { PaymentPreivew } from '../solana/PaymentPreview'
@@ -182,7 +183,21 @@ export default () => {
   )
 
   const submitJupiterSwap = useCallback(
-    async (swapTxn: VersionedTransaction) => {
+    async ({
+      inputMint,
+      inputAmount,
+      outputMint,
+      outputAmount,
+      minReceived,
+      swapTxn,
+    }: {
+      inputMint: PublicKey
+      inputAmount: number
+      outputMint: PublicKey
+      outputAmount: number
+      minReceived: number
+      swapTxn: VersionedTransaction
+    }) => {
       if (!currentAccount || !anchorProvider || !walletSignBottomSheetRef) {
         throw new Error(t('errors.account'))
       }
@@ -196,6 +211,17 @@ export default () => {
         message: t('transactions.signSwapTxn'),
         serializedTxs: [Buffer.from(serializedTx)],
         suppressWarnings: true,
+        renderer: () => (
+          <SwapPreview
+            {...{
+              inputMint,
+              inputAmount,
+              outputMint,
+              outputAmount,
+              minReceived,
+            }}
+          />
+        ),
       })
 
       if (!decision) {

diff --git a/src/solana/SwapPreview.tsx b/src/solana/SwapPreview.tsx
@@ -0,0 +1,101 @@
+import Send from '@assets/images/send.svg'
+import Receive from '@assets/images/receive.svg'
+import Box from '@components/Box'
+import CircleLoader from '@components/CircleLoader'
+import { Pill } from '@components/Pill'
+import Text from '@components/Text'
+import TokenIcon from '@components/TokenIcon'
+import { useMint } from '@helium/helium-react-hooks'
+import { useMetaplexMetadata } from '@hooks/useMetaplexMetadata'
+import { PublicKey } from '@solana/web3.js'
+import React from 'react'
+
+interface ISwapPreviewProps {
+  inputMint: PublicKey
+  inputAmount: number
+  outputMint: PublicKey
+  outputAmount: number
+  minReceived: number
+}
+
+export const SwapPreview = ({
+  inputMint,
+  inputAmount,
+  outputMint,
+  outputAmount,
+  minReceived,
+}: ISwapPreviewProps) => {
+  const outputDecimals = useMint(outputMint)?.info?.decimals
+  const {
+    loading: loadingInputMintMetadata,
+    symbol: inputMintSymbol,
+    json: inputMintJson,
+  } = useMetaplexMetadata(inputMint)
+  const {
+    loading: loadingOutputMintMetadata,
+    symbol: outputMintSymbol,
+    json: outputMintJson,
+  } = useMetaplexMetadata(outputMint)
+
+  return (
+    <Box
+      backgroundColor="surface"
+      borderRadius="l"
+      mt="m"
+      px="m"
+      py="ms"
+      {...{ gap: 8 }}
+    >
+      {loadingInputMintMetadata || loadingOutputMintMetadata ? (
+        <CircleLoader />
+      ) : (
+        <>
+          <Box
+            justifyContent="space-between"
+            flexDirection="row"
+            alignItems="center"
+          >
+            <Box flexDirection="row" alignItems="center" {...{ gap: 4 }}>
+              {inputMintJson ? (
+                <TokenIcon img={inputMintJson.image} size={30} />
+              ) : null}
+              <Text variant="body1">{inputMintSymbol}</Text>
+            </Box>
+            <Box flexDirection="row" alignItems="center">
+              <Pill text={inputAmount.toString()} Icon={Send} color="blue" />
+            </Box>
+          </Box>
+          <Box
+            justifyContent="space-between"
+            flexDirection="row"
+            alignItems="center"
+          >
+            <Box flexDirection="row" alignItems="center" {...{ gap: 4 }}>
+              {outputMintJson ? (
+                <TokenIcon img={outputMintJson.image} size={30} />
+              ) : null}
+              <Text variant="body1">{outputMintSymbol}</Text>
+            </Box>
+            <Box flexDirection="row" alignItems="center">
+              <Pill
+                text={outputAmount.toString()}
+                Icon={Receive}
+                color="green"
+              />
+            </Box>
+          </Box>
+          <Box
+            flexDirection="row"
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            <Text variant="body2">Min Recieved due to slippage:</Text>
+            <Text variant="body2" color="green500">
+              {`~${minReceived.toFixed(outputDecimals)}`}
+            </Text>
+          </Box>
+        </>
+      )}
+    </Box>
+  )
+}