Feat/transaction success dialog (#1792)

* initial success dialog changes

* reset kubb to prod

* fix build errors use preview

* remove unused chainId

* return new response for status code

* original tx confirmation turned off on leverage

* add emojis

* revamp netbalance fetching

* change modal title to only show if theres a value

* revert to production api in kubb

* use render url, seems like index one is cached

* add proper entry price and remove border

* keep the original failed transaction window

* fix linting

* dont show review if navigating away

* show loading modal too upon mobile as well

* remove unnecessary array fallback in usebalances

* dont allow closing the modal if the recent trade is in pending state

* fix state popping

* state machine trade modal handling

* handle non-leverage token successful trades

* fix transaction modal loader lightmode

* revert loading skeleton changes

* remove trade-atom

* remove TradeMachineStates

* fix missig quote reference

* reset data if we get back to idle

* reset state before closing

* reset context tweaks

* remove the death on loss

* light ic-gray400 on tradeload

* remove long15x

* disable user zoom

* lint fix

* add overflow hidden to light effect wrap

* use api changes that return position immediately

* reset api to prod in kubb

* mitigate clientside exception on history being undefined

* reset position too in case of closing the modal

Author: surewht

package-lock.json

@@ -51,6 +51,7 @@
     "framer-motion": "11.2.6",
     "jotai": "2.12.0",
     "jotai-utils": "0.0.0",
+    "jotai-xstate": "0.6.1",
     "lodash": "4.17.21",
     "next": "14.2.13",
     "react": "^18.2.0",
@@ -59,6 +60,7 @@
     "react-loading-skeleton": "3.5.0",
     "tailwind-merge": "2.5.2",
     "use-debounce": "^10.0.1",
+    "xstate": "5.19.2",
     "viem": "2.23.6",
     "wagmi": "2.14.12"
   },

package.json

@@ -8,10 +8,10 @@ import mapKeys from 'lodash/mapKeys'
 import { NextRequest, NextResponse } from 'next/server'
 import { Address } from 'viem'
 
+import { calculateAverageEntryPrice } from '@/app/leverage/utils/fetch-leverage-token-prices'
 import {
   GetApiV2UserAddressPositionsQueryParamsChainIdEnum as ApiChainId,
   getApiV2UserAddressPositions,
-  GetApiV2UserAddressPositions200,
 } from '@/gen'
 
 type TokenTransferRequest = {
@@ -53,44 +53,6 @@ const mapCoingeckoIdToSymbol = (id: string) => {
   }
 }
 
-const calculateAverageEntryPrice = (
-  positions: GetApiV2UserAddressPositions200,
-) => {
-  const grouped = positions.reduce(
-    (acc, position) => {
-      if (
-        position.trade &&
-        position.metrics &&
-        position.trade.transactionType === 'buy'
-      ) {
-        const tokenAddress = position.metrics.tokenAddress
-
-        if (!acc[tokenAddress]) {
-          acc[tokenAddress] = { sum: 0, count: 0 }
-        }
-
-        acc[tokenAddress].sum +=
-          (position.trade.underlyingAssetUnitPrice ?? 0) *
-          (position.metrics.totalPurchaseSize ?? 0)
-        acc[tokenAddress].count += position.metrics.totalPurchaseSize ?? 0
-      }
-      return acc
-    },
-    {} as Record<string, { sum: number; count: number }>,
-  )
-
-  const averages = Object.keys(grouped).reduce(
-    (acc, tokenAddress) => {
-      acc[tokenAddress] =
-        grouped[tokenAddress].sum / grouped[tokenAddress].count
-      return acc
-    },
-    {} as Record<string, number>,
-  )
-
-  return averages
-}
-
 export async function POST(req: NextRequest) {
   try {
     const { user, chainId } = (await req.json()) as TokenTransferRequest

src/app/api/leverage/history/route.ts

@@ -1,4 +1,4 @@
-import { NextRequest, NextResponse } from 'next/server'
+import { NextRequest } from 'next/server'
 
 import {
   postApiV2Trade,
@@ -10,18 +10,21 @@ export async function POST(req: NextRequest) {
   const trade: PostApiV2TradeMutationRequest = await req.json()
 
   if (!trade) {
-    return NextResponse.json(
-      { error: 'Bad Request: Missing Parameters.' },
+    return new Response(
+      JSON.stringify({ error: 'Bad Request: Missing Parameters.' }),
       { status: 400 },
     )
   }
 
   try {
     const res = await postApiV2Trade(trade)
-    return NextResponse.json(res.data, { status: res.status })
+
+    return new Response(JSON.stringify(res.data), { status: res.status })
   } catch (e) {
-    return NextResponse.json(
-      { error: (e as PostApiV2TradeMutation['Errors']).message },
+    return new Response(
+      JSON.stringify({
+        error: (e as PostApiV2TradeMutation['Errors']).message,
+      }),
       { status: 500 },
     )
   }

src/app/api/user/trade/route.ts

@@ -1,11 +1,13 @@
 'use client'
 
+import { useAtom } from 'jotai'
 import { useCallback, useEffect } from 'react'
 
 import { Summary } from '@/app/earn/components/earn-widget/components/summary'
 import { supportedNetworks } from '@/app/earn/constants'
 import { useEarnContext } from '@/app/earn/provider'
 import { useQueryParams } from '@/app/earn/use-query-params'
+import { tradeMachineAtom } from '@/app/store/trade-machine'
 import { Receive } from '@/components/receive'
 import { BuySellSelector } from '@/components/selectors/buy-sell-selector'
 import { Settings } from '@/components/settings'
@@ -43,7 +45,6 @@ export function EarnWidget() {
     inputValue,
     isMinting,
     outputTokens,
-    transactionReview,
     onChangeInputTokenAmount,
     onSelectInputToken,
     onSelectOutputToken,
@@ -73,11 +74,8 @@ export function EarnWidget() {
     onOpen: onOpenSelectOutputToken,
     onClose: onCloseSelectOutputToken,
   } = useDisclosure()
-  const {
-    isOpen: isTransactionReviewOpen,
-    onOpen: onOpenTransactionReview,
-    onClose: onCloseTransactionReview,
-  } = useDisclosure()
+
+  const [tradeState, sendTradeEvent] = useAtom(tradeMachineAtom)
 
   const {
     auto: autoSlippage,
@@ -97,6 +95,14 @@ export function EarnWidget() {
     setSlippageForToken(isMinting ? outputToken.symbol : inputToken.symbol)
   }, [inputToken, isMinting, outputToken, setSlippageForToken])
 
+  useEffect(() => {
+    if (tradeState.matches('reset')) {
+      reset()
+      resetData()
+      sendTradeEvent({ type: 'RESET_DONE' })
+    }
+  }, [tradeState, reset, resetData, sendTradeEvent])
+
   return (
     <div className='earn-widget flex h-fit flex-col gap-3 rounded-lg px-4 py-6 lg:ml-auto'>
       <div className='flex justify-between'>
@@ -143,7 +149,7 @@ export function EarnWidget() {
         buttonLabelOverrides={{
           [TradeButtonState.default]: 'Review Transaction',
         }}
-        onOpenTransactionReview={onOpenTransactionReview}
+        onOpenTransactionReview={() => sendTradeEvent({ type: 'REVIEW' })}
         onRefetchQuote={() => {}}
       />
       <SelectTokenModal
@@ -168,17 +174,13 @@ export function EarnWidget() {
         tokens={outputTokens}
         showNetworks={isMinting}
       />
-      {transactionReview && (
-        <TransactionReviewModal
-          isOpen={isTransactionReviewOpen}
-          onClose={() => {
-            reset()
-            resetData()
-            onCloseTransactionReview()
-          }}
-          transactionReview={transactionReview}
-        />
-      )}
+      <TransactionReviewModal
+        onClose={() => {
+          reset()
+          resetData()
+          sendTradeEvent({ type: 'CLOSE' })
+        }}
+      />
     </div>
   )
 }

src/app/earn/components/earn-widget/index.tsx

@@ -13,12 +13,10 @@ import { isAddress } from 'viem'
 import { base } from 'viem/chains'
 
 import { useQueryParams } from '@/app/earn/use-query-params'
-import { TransactionReview } from '@/components/swap/components/transaction-review/types'
 import { ETH, Token } from '@/constants/tokens'
 import { TokenBalance, useBalances } from '@/lib/hooks/use-balance'
 import { QuoteResult } from '@/lib/hooks/use-best-quote/types'
 import { useNetwork } from '@/lib/hooks/use-network'
-import { usePrepareTransactionReview } from '@/lib/hooks/use-prepare-transaction-review'
 import { useQuoteResult } from '@/lib/hooks/use-quote-result'
 import { useWallet } from '@/lib/hooks/use-wallet'
 import { useSlippage } from '@/lib/providers/slippage'
@@ -54,7 +52,6 @@ interface Context {
   isFetchingQuote: boolean
   isFetchingStats: boolean
   quoteResult: QuoteResult | null
-  transactionReview: TransactionReview | null
   onChangeInputTokenAmount: (input: string) => void
   onSelectIndexToken: (tokenSymbol: string, chainId: number) => void
   onSelectInputToken: (tokenSymbol: string, chainId: number) => void
@@ -82,7 +79,6 @@ export const EarnContext = createContext<Context>({
   isFetchingQuote: false,
   isFetchingStats: true,
   quoteResult: null,
-  transactionReview: null,
   onChangeInputTokenAmount: () => {},
   onSelectIndexToken: () => {},
   onSelectInputToken: () => {},
@@ -168,10 +164,6 @@ export function EarnProvider(props: { children: any }) {
     inputValue,
     slippage,
   })
-  const transactionReview = usePrepareTransactionReview(
-    isFetchingQuote,
-    quoteResult,
-  )
 
   const {
     data: { apy, nav, tvl },
@@ -329,7 +321,6 @@ export function EarnProvider(props: { children: any }) {
         isFetchingQuote,
         isFetchingStats: isFetchingLatestStats || isFetchingApyStats,
         quoteResult,
-        transactionReview,
         onChangeInputTokenAmount,
         onSelectIndexToken,
         onSelectInputToken,

src/app/earn/provider.tsx

@@ -1,3 +1,5 @@
+import { Viewport } from 'next'
+
 import { MavaScript } from '@/components/external/mava-script'
 import { SafaryScript } from '@/components/external/safary-script'
 import './globals.css'
@@ -14,7 +16,8 @@ export const metadata = {
   type: 'website',
 }
 
-export const viewport = {
+export const viewport: Viewport = {
+  userScalable: false,
   themeColor: '#000000',
 }