From 9e02369ed9ca7795e813e57a68d1c4e0ee9c3f2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sehyun=20Chung=20=E2=9C=8C=EF=B8=8E?=
 <41171808+sehyunc@users.noreply.github.com>
Date: Thu, 19 Oct 2023 18:46:44 -0700
Subject: [PATCH] testnet: Integrate wallet locks and show error for full
 orderbook error

---
 .../steppers/order-stepper/order-stepper.tsx  | 26 +++++++-
 .../order-stepper/steps/confirm-step.tsx      | 20 +++++-
 .../order-stepper/steps/error-step.tsx        | 64 +++++++++++++++++++
 .../order-stepper/steps/loading-step.tsx      |  5 +-
 .../contexts/Order/order-context.tsx          |  8 ++-
 testnet.renegade.fi/package.json              |  2 +-
 testnet.renegade.fi/yarn.lock                 |  8 ++-
 7 files changed, 119 insertions(+), 14 deletions(-)
 create mode 100644 testnet.renegade.fi/components/steppers/order-stepper/steps/error-step.tsx

diff --git a/testnet.renegade.fi/components/steppers/order-stepper/order-stepper.tsx b/testnet.renegade.fi/components/steppers/order-stepper/order-stepper.tsx
index 27c50f7f..3b05129a 100644
--- a/testnet.renegade.fi/components/steppers/order-stepper/order-stepper.tsx
+++ b/testnet.renegade.fi/components/steppers/order-stepper/order-stepper.tsx
@@ -1,7 +1,9 @@
-import React, { createContext, useContext, useState } from "react"
+import React, { createContext, useContext, useEffect, useState } from "react"
 import { useRenegade } from "@/contexts/Renegade/renegade-context"
 import { Fade, Flex, Modal, ModalContent, ModalOverlay } from "@chakra-ui/react"
 
+import { ErrorStep } from "@/components/steppers/order-stepper/steps/error-step"
+
 import { ConfirmStep } from "./steps/confirm-step"
 import { ExitStep } from "./steps/exit-step"
 import { LoadingStep } from "./steps/loading-step"
@@ -41,6 +43,12 @@ const OrderStepperInner = () => {
           >
             {step === Step.EXIT && <ExitStep />}
           </Fade>
+          <Fade
+            transition={{ enter: { duration: 0.25 } }}
+            in={step === Step.ERROR}
+          >
+            {step === Step.ERROR && <ErrorStep />}
+          </Fade>
         </Flex>
       </ModalContent>
     </Modal>
@@ -59,13 +67,21 @@ export enum Step {
   DEFAULT,
   LOADING,
   EXIT,
+  ERROR,
+}
+
+export enum ErrorType {
+  ORDERBOOK_FULL = "ORDERBOOK_FULL",
+  WALLET_LOCKED = "WALLET_LOCKED",
 }
 
 interface StepperContextType {
+  error?: ErrorType
   midpoint: number
   onBack: () => void
   onClose: () => void
   onNext: () => void
+  setError: (error: ErrorType) => void
   setMidpoint: (midpoint: number) => void
   setStep: (step: Step) => void
   step: Step
@@ -76,6 +92,7 @@ const StepperContext = createContext<StepperContextType>({
   onBack: () => {},
   onClose: () => {},
   onNext: () => {},
+  setError: () => {},
   setMidpoint: () => {},
   setStep: () => {},
   step: Step.DEFAULT,
@@ -93,6 +110,7 @@ const StepperProvider = ({
   const [step, setStep] = useState(Step.DEFAULT)
   const [midpoint, setMidpoint] = useState(0)
   const { setTask } = useRenegade()
+  const [error, setError] = useState<ErrorType>()
 
   const handleNext = () => {
     setStep(step + 1)
@@ -108,13 +126,19 @@ const StepperProvider = ({
     onClose()
   }
 
+  useEffect(() => {
+    if (error) setStep(Step.ERROR)
+  }, [error])
+
   return (
     <StepperContext.Provider
       value={{
+        error,
         midpoint,
         onBack: handleBack,
         onClose: handleClose,
         onNext: handleNext,
+        setError,
         setMidpoint,
         setStep,
         step,
diff --git a/testnet.renegade.fi/components/steppers/order-stepper/steps/confirm-step.tsx b/testnet.renegade.fi/components/steppers/order-stepper/steps/confirm-step.tsx
index df65a0a4..b73afb36 100644
--- a/testnet.renegade.fi/components/steppers/order-stepper/steps/confirm-step.tsx
+++ b/testnet.renegade.fi/components/steppers/order-stepper/steps/confirm-step.tsx
@@ -14,10 +14,10 @@ import {
 } from "@chakra-ui/react"
 import { Exchange, PriceReport } from "@renegade-fi/renegade-js"
 
-import { useStepper } from "../order-stepper"
+import { ErrorType, useStepper } from "../order-stepper"
 
 export function ConfirmStep() {
-  const { setMidpoint, onNext } = useStepper()
+  const { setMidpoint, onNext, setError } = useStepper()
   const { getPriceData } = useExchange()
   const { baseTicker, baseTokenAmount, direction, onPlaceOrder, quoteTicker } =
     useOrder()
@@ -103,7 +103,21 @@ export function ConfirmStep() {
               throw new Error("No current price report")
             }
             setMidpoint(currentPriceReport.midpointPrice || 0)
-            onPlaceOrder().then(() => onNext())
+            onPlaceOrder()
+              .then(() => onNext())
+              .catch((e) => {
+                if (
+                  e.message ===
+                  "RenegadeError: The maximum number of active, unmatched orders has been reached."
+                ) {
+                  setError(ErrorType.ORDERBOOK_FULL)
+                } else if (
+                  e.message ===
+                  "RenegadeError: The relayer returned a non-200 response. wallet update already in progress"
+                ) {
+                  setError(ErrorType.WALLET_LOCKED)
+                }
+              })
           }}
         >
           <HStack spacing="4px">
diff --git a/testnet.renegade.fi/components/steppers/order-stepper/steps/error-step.tsx b/testnet.renegade.fi/components/steppers/order-stepper/steps/error-step.tsx
new file mode 100644
index 00000000..53773fe5
--- /dev/null
+++ b/testnet.renegade.fi/components/steppers/order-stepper/steps/error-step.tsx
@@ -0,0 +1,64 @@
+import { Button, Flex, ModalBody, Text } from "@chakra-ui/react"
+
+import { ErrorType, useStepper } from "../order-stepper"
+
+export function ErrorStep() {
+  const { onClose, error } = useStepper()
+  const title = {
+    [ErrorType.ORDERBOOK_FULL]: "Orderbook full",
+    [ErrorType.WALLET_LOCKED]: "Wallet locked",
+    "": "",
+  }[error || ""]
+  const content = {
+    [ErrorType.ORDERBOOK_FULL]:
+      "You can only have 5 orders in the orderbook at a time. Please cancel an existing order to make room for this one.",
+    [ErrorType.WALLET_LOCKED]: "Please wait for the ongoing task to complete.",
+    "": "",
+  }[error || ""]
+
+  return (
+    <>
+      <ModalBody>
+        <Flex
+          alignItems="center"
+          justifyContent="center"
+          flexDirection="column"
+          gap="12"
+          textAlign="center"
+        >
+          <Text
+            color="white.50"
+            fontFamily="Favorit Extended"
+            fontSize="1.3em"
+            fontWeight="200"
+          >
+            {title}
+          </Text>
+          {/* TODO: Make this general error modal */}
+          <Text fontSize="0.9em">{content}</Text>
+          <Button
+            padding="20px"
+            color="white.80"
+            fontSize="1.2em"
+            fontWeight="200"
+            borderWidth="thin"
+            borderColor="white.40"
+            borderRadius="100px"
+            _hover={{
+              borderColor: "white.60",
+              color: "white",
+            }}
+            _focus={{
+              backgroundColor: "transparent",
+            }}
+            transition="0.15s"
+            backgroundColor="transparent"
+            onClick={onClose}
+          >
+            Close
+          </Button>
+        </Flex>
+      </ModalBody>
+    </>
+  )
+}
diff --git a/testnet.renegade.fi/components/steppers/order-stepper/steps/loading-step.tsx b/testnet.renegade.fi/components/steppers/order-stepper/steps/loading-step.tsx
index 72743384..59040717 100644
--- a/testnet.renegade.fi/components/steppers/order-stepper/steps/loading-step.tsx
+++ b/testnet.renegade.fi/components/steppers/order-stepper/steps/loading-step.tsx
@@ -9,10 +9,7 @@ export function LoadingStep() {
   const { onNext } = useStepper()
   const { taskState, taskType } = useRenegade()
   useEffect(() => {
-    if (
-      taskType === TaskType.PlaceOrder &&
-      taskState === TaskState.UpdatingValidityProofs
-    ) {
+    if (taskType === TaskType.PlaceOrder && taskState === TaskState.Completed) {
       onNext()
     }
   }, [onNext, taskState, taskType])
diff --git a/testnet.renegade.fi/contexts/Order/order-context.tsx b/testnet.renegade.fi/contexts/Order/order-context.tsx
index 87194700..c6b5a102 100644
--- a/testnet.renegade.fi/contexts/Order/order-context.tsx
+++ b/testnet.renegade.fi/contexts/Order/order-context.tsx
@@ -175,9 +175,13 @@ function OrderProvider({ children }: OrderProviderProps) {
       type: "midpoint",
       amount: BigInt(baseTokenAmount),
     })
-    renegade.task
-      .placeOrder(accountId, order)
+    return renegade.task
+      .modifyOrPlaceOrder(accountId, order)
       .then(([taskId]) => setTask(taskId, TaskType.PlaceOrder))
+      .catch((e) => {
+        console.log("🚀 ~ handlePlaceOrder ~ e:", e.message)
+        throw new Error(e)
+      })
   }, [accountId, baseTicker, baseTokenAmount, direction, quoteTicker, setTask])
 
   const handleSetDirection = useCallback((direction: Direction) => {
diff --git a/testnet.renegade.fi/package.json b/testnet.renegade.fi/package.json
index 114be006..bfd7328b 100644
--- a/testnet.renegade.fi/package.json
+++ b/testnet.renegade.fi/package.json
@@ -22,7 +22,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@react-hook/window-size": "3.0.7",
-    "@renegade-fi/renegade-js": "../../renegade-js",
+    "@renegade-fi/renegade-js": "^0.3.8",
     "@t3-oss/env-nextjs": "^0.6.0",
     "connectkit": "^1.4.0",
     "dayjs": "^1.11.10",
diff --git a/testnet.renegade.fi/yarn.lock b/testnet.renegade.fi/yarn.lock
index c961eafe..177d6802 100644
--- a/testnet.renegade.fi/yarn.lock
+++ b/testnet.renegade.fi/yarn.lock
@@ -1478,9 +1478,9 @@
   dependencies:
     "@noble/hashes" "1.3.2"
 
-"@noble/ed25519@https://github.com/renegade-fi/noble-ed25519#prehashed-context":
+"@noble/ed25519@git+https://github.com/renegade-fi/noble-ed25519.git#prehashed-context":
   version "1.7.1"
-  resolved "https://github.com/renegade-fi/noble-ed25519#dcd9e5541c527e23b07f09db09d3a2c32ff61b2c"
+  resolved "git+https://github.com/renegade-fi/noble-ed25519.git#dcd9e5541c527e23b07f09db09d3a2c32ff61b2c"
 
 "@noble/hashes@1.3.2", "@noble/hashes@^1.3.0", "@noble/hashes@^1.3.1", "@noble/hashes@~1.3.0", "@noble/hashes@~1.3.2":
   version "1.3.2"
@@ -1551,8 +1551,10 @@
     "@react-hook/event" "^1.2.1"
     "@react-hook/throttle" "^2.2.0"
 
-"@renegade-fi/renegade-js@../../renegade-js":
+"@renegade-fi/renegade-js@^0.3.8":
   version "0.3.8"
+  resolved "https://registry.yarnpkg.com/@renegade-fi/renegade-js/-/renegade-js-0.3.8.tgz#1c0d88d5dfc7874b37c3e021ec394128be5ff0cb"
+  integrity sha512-RBJSj5cemkkwuBqup072BmBW26NY0OPBEj3m78JEa2K3hrDVqAVm9edVO+4U4BMDKc0BQoofL129h1n8UK2xJw==
   dependencies:
     "@noble/ed25519" "https://github.com/renegade-fi/noble-ed25519#prehashed-context"
     "@noble/hashes" "^1.3.0"