add review trade step

components/swap/JupiterRoutes.tsx

@@ -7,8 +7,9 @@ import mangoStore, { CLUSTER } from '../../store/state'
 import RoutesModal from './RoutesModal'
 import RouteFeeInfo from './RouteFeeInfo'
 import { TokenInfo } from '../../types/jupiter'
-import Button from '../shared/Button'
+import Button, { IconButton } from '../shared/Button'
 import Loading from '../shared/Loading'
+import { XIcon } from '@heroicons/react/solid'
 
 type JupiterRoutesProps = {
   inputToken: string
@@ -18,6 +19,7 @@ type JupiterRoutesProps = {
   submitting: boolean
   handleSwap: (x: TransactionInstruction[]) => void
   setAmountOut: (x?: number) => void
+  onClose: () => void
 }
 
 const parseJupiterRoute = async (
@@ -54,6 +56,7 @@ const JupiterRoutes = ({
   handleSwap,
   submitting,
   setAmountOut,
+  onClose,
 }: JupiterRoutesProps) => {
   const [jupiter, setJupiter] = useState<Jupiter>()
   const [routes, setRoutes] = useState<RouteInfo[]>()
@@ -61,7 +64,6 @@ const JupiterRoutes = ({
   const [showRoutesModal, setShowRoutesModal] = useState(false)
   const [outputTokenInfo, setOutputTokenInfo] = useState<TokenInfo>()
   const mangoAccount = mangoStore((s) => s.mangoAccount)
-  const connected = mangoStore((s) => s.connected)
 
   const onSwap = async () => {
     if (!jupiter || !selectedRoute) return
@@ -134,45 +136,47 @@ const JupiterRoutes = ({
     loadRoutes()
   }, [inputToken, outputToken, jupiter, slippage, amountIn])
 
-  return (
-    <div className="mt-6">
-      <div className="flex justify-center">
+  return routes?.length && selectedRoute && outputTokenInfo ? (
+    <div>
+      <>
+        <IconButton className="absolute top-2 left-2" onClick={onClose}>
+          <XIcon className="h-5 w-5" />
+        </IconButton>
+        <RouteFeeInfo
+          selectedRoute={selectedRoute}
+          amountIn={amountIn}
+          amountOut={toUiDecimals(
+            selectedRoute.outAmount,
+            outputTokenInfo.decimals
+          )}
+          inputTokenSymbol={inputToken}
+          outputTokenInfo={outputTokenInfo}
+          showRoutesModal={() => setShowRoutesModal(true)}
+        />
+        {showRoutesModal ? (
+          <RoutesModal
+            show={showRoutesModal}
+            onClose={() => setShowRoutesModal(false)}
+            setSelectedRoute={setSelectedRoute}
+            selectedRoute={selectedRoute}
+            routes={routes}
+            inputTokenSymbol={inputToken}
+            outputTokenInfo={outputTokenInfo}
+          />
+        ) : null}
+      </>
+      <div className="mt-6 flex justify-center">
         <Button
           onClick={onSwap}
           className="flex w-full justify-center py-3 text-lg"
-          disabled={!connected}
         >
           {submitting ? <Loading className="mr-2 h-5 w-5" /> : null}
-          {connected ? 'Swap' : 'Connect wallet'}
+          Confirm Trade
         </Button>
       </div>
-      {routes?.length && selectedRoute && outputTokenInfo ? (
-        <>
-          <RouteFeeInfo
-            selectedRoute={selectedRoute}
-            amountIn={amountIn}
-            amountOut={toUiDecimals(
-              selectedRoute.outAmount,
-              outputTokenInfo.decimals
-            )}
-            inputTokenSymbol={inputToken}
-            outputTokenInfo={outputTokenInfo}
-            showRoutesModal={() => setShowRoutesModal(true)}
-          />
-          {showRoutesModal ? (
-            <RoutesModal
-              show={showRoutesModal}
-              onClose={() => setShowRoutesModal(false)}
-              setSelectedRoute={setSelectedRoute}
-              selectedRoute={selectedRoute}
-              routes={routes}
-              inputTokenSymbol={inputToken}
-              outputTokenInfo={outputTokenInfo}
-            />
-          ) : null}
-        </>
-      ) : null}
     </div>
+  ) : (
+    <Loading />
   )
 }
 

components/swap/RouteFeeInfo.tsx

@@ -49,7 +49,7 @@ const RouteFeeInfo = ({
   }, [selectedRoute, connected])
 
   return (
-    <div className="mt-6 space-y-2 px-1 text-xs text-th-fgd-4">
+    <div className="space-y-2 px-1 text-xs text-th-fgd-4">
       <div className="mb-4 flex items-center justify-between">
         <div className="text-sm font-bold text-th-fgd-1">Swap Details</div>
       </div>

components/swap/Swap.tsx

@@ -1,6 +1,6 @@
 import { useState, ChangeEvent, useCallback, Fragment, useEffect } from 'react'
 import { TransactionInstruction } from '@solana/web3.js'
-import { ArrowDownIcon } from '@heroicons/react/solid'
+import { ArrowDownIcon, XIcon } from '@heroicons/react/solid'
 import mangoStore from '../../store/state'
 import ContentBox from '../shared/ContentBox'
 import { notify } from '../../utils/notifications'
@@ -14,7 +14,7 @@ import { useTranslation } from 'next-i18next'
 import SelectToken from './SelectToken'
 import { Transition } from '@headlessui/react'
 import Switch from '../forms/Switch'
-import { LinkButton } from '../shared/Button'
+import Button, { IconButton, LinkButton } from '../shared/Button'
 import ButtonGroup from '../forms/ButtonGroup'
 
 const Swap = () => {
@@ -28,10 +28,12 @@ const Swap = () => {
   const [showTokenSelect, setShowTokenSelect] = useState('')
   const [useMargin, setUseMargin] = useState(true)
   const [sizePercentage, setSizePercentage] = useState('')
+  const [showConfirm, setShowConfirm] = useState(false)
   const [slippage, setSlippage] = useState(0.1)
   const debouncedAmountIn = useDebounce(amountIn, 400)
   const set = mangoStore.getState().set
   const tokens = mangoStore((s) => s.jupiterTokens)
+  const connected = mangoStore((s) => s.connected)
 
   const handleAmountInChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
@@ -121,7 +123,29 @@ const Swap = () => {
   }
 
   return (
-    <ContentBox showBackground className="relative">
+    <ContentBox showBackground className="relative overflow-hidden">
+      <Transition
+        appear={true}
+        className="thin-scroll absolute top-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-2 p-6 pb-0"
+        show={showConfirm}
+        enter="transition-all ease-in duration-500"
+        enterFrom="transform translate-x-full"
+        enterTo="transform translate-x-0"
+        leave="transition-all ease-out duration-500"
+        leaveFrom="transform translate-x-0"
+        leaveTo="transform translate-x-full"
+      >
+        <JupiterRoutes
+          inputToken={inputToken}
+          onClose={() => setShowConfirm(false)}
+          outputToken={outputToken}
+          amountIn={parseFloat(debouncedAmountIn)}
+          slippage={slippage}
+          handleSwap={handleSwap}
+          submitting={submitting}
+          setAmountOut={setAmountOut}
+        />
+      </Transition>
       <Transition
         appear={true}
         className="thin-scroll absolute bottom-0 left-0 z-20 h-full overflow-auto bg-th-bkg-2 p-6 pb-0"
@@ -234,15 +258,13 @@ const Swap = () => {
           />
         </>
       ) : null}
-      <JupiterRoutes
-        inputToken={inputToken}
-        outputToken={outputToken}
-        amountIn={parseFloat(debouncedAmountIn)}
-        slippage={slippage}
-        handleSwap={handleSwap}
-        submitting={submitting}
-        setAmountOut={setAmountOut}
-      />
+      <Button
+        onClick={() => setShowConfirm(true)}
+        className="mt-6 flex w-full justify-center py-3 text-lg"
+        disabled={!connected}
+      >
+        {connected ? 'Review Trade' : 'Connect wallet'}
+      </Button>
     </ContentBox>
   )
 }