Merge branch 'feat-liquidity-incentive-solution' into guild-3400-add-…

…solutions-to-the-current-add-reward-modal
guildxyz · Jul 8, 2024 · 87697ae · 87697ae
2 parents 3a68163 + bbadd4b
commit 87697ae
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 30 deletions.
diff --git a/...rms/components/AddRoleRewardModal/components/AddTokenPanel/components/ConversionInput.tsx b/...rms/components/AddRoleRewardModal/components/AddTokenPanel/components/ConversionInput.tsx
@@ -1,15 +1,17 @@
 import {
   Circle,
   FormControl,
-  FormHelperText,
   FormLabel,
   HStack,
   IconButton,
   InputGroup,
   InputLeftElement,
+  InputRightElement,
+  Text,
+  useColorModeValue,
 } from "@chakra-ui/react"
 import { ArrowRight, Lock, LockOpen } from "@phosphor-icons/react"
-import { ReactNode, useEffect, useState } from "react"
+import { PropsWithChildren, ReactNode, useEffect, useState } from "react"
 import { FormProvider, useForm, useFormContext, useWatch } from "react-hook-form"
 import ControlledNumberInput from "requirements/WalletActivity/components/ControlledNumberInput"
 import { MIN_TOKEN_AMOUNT } from "utils/guildCheckout/constants"
@@ -118,7 +120,7 @@ const ConversionInput = ({
                 onChange={tokenPreviewChange}
                 name={"tokenPreview"}
                 adaptiveStepSize
-                numberInputFieldProps={{ pr: 7, pl: fromImage ? 10 : 4 }}
+                numberInputFieldProps={{ pr: 7, pl: fromImage ? 9 : 4 }}
                 min={MIN_TOKEN_AMOUNT}
                 w="full"
               />
@@ -128,23 +130,16 @@ const ConversionInput = ({
                 onChange={(valString) => updateConversionRate(valString, "token")}
                 name={"tokenAmount"}
                 adaptiveStepSize
-                numberInputFieldProps={{ pr: 7, pl: fromImage ? 10 : 4 }}
+                numberInputFieldProps={{ pr: 7, pl: fromImage ? 9 : 4 }}
                 min={MIN_TOKEN_AMOUNT}
                 w="full"
               />
             )}
+            {fromText && <InputUnitElement>{fromText}</InputUnitElement>}
           </InputGroup>
-          <FormHelperText
-            color={"GrayText"}
-            fontSize={"xs"}
-            fontWeight={"bold"}
-            mt={1}
-          >
-            {(!!fromText || !!toText) && (fromText || " ")}
-          </FormHelperText>
         </FormControl>
 
-        <Circle background={"whiteAlpha.200"} p="1" mb={fromText || toText ? 5 : 0}>
+        <Circle background={"whiteAlpha.200"} p="1">
           <ArrowRight size={12} color="grayText" />
         </Circle>
 
@@ -157,7 +152,7 @@ const ConversionInput = ({
                 numberFormat="FLOAT"
                 name={"pointPreview"}
                 adaptiveStepSize
-                numberInputFieldProps={{ pr: 7, pl: toImage ? 10 : 4 }}
+                numberInputFieldProps={{ pr: 7, pl: toImage ? 9 : 4 }}
                 min={MIN_TOKEN_AMOUNT}
                 isReadOnly
                 w="full"
@@ -168,24 +163,37 @@ const ConversionInput = ({
                 onChange={(valString) => updateConversionRate(valString, "point")}
                 name={"pointAmount"}
                 adaptiveStepSize
-                numberInputFieldProps={{ pr: 7, pl: toImage ? 10 : 4 }}
+                numberInputFieldProps={{ pr: 7, pl: toImage ? 9 : 4 }}
                 min={MIN_TOKEN_AMOUNT}
                 w="full"
               />
             )}
+            {toText && <InputUnitElement>{toText}</InputUnitElement>}
           </InputGroup>
-          <FormHelperText
-            color={"GrayText"}
-            fontSize={"xs"}
-            fontWeight={"bold"}
-            mt={1}
-          >
-            {(!!fromText || !!toText) && (toText || " ")}
-          </FormHelperText>
         </FormControl>
       </HStack>
     </FormProvider>
   )
 }
 
+const InputUnitElement = ({ children }: PropsWithChildren<any>) => {
+  // adding a bg so it doesn't overlay in case of huge numbers, especially on mobile
+  const inputBg = useColorModeValue("white", "#212123")
+
+  return (
+    <InputRightElement
+      h={`calc(var(--input-height) - 2px)`}
+      top="1px"
+      right={{ base: "8px", md: "35px" }}
+      bg={inputBg}
+      width="auto"
+      maxWidth={"50px"}
+    >
+      <Text colorScheme={"gray"} fontSize={"xs"} fontWeight={"bold"} noOfLines={2}>
+        {children}
+      </Text>
+    </InputRightElement>
+  )
+}
+
 export default ConversionInput
diff --git a/src/requirements/WalletActivity/components/ControlledNumberInput.tsx b/src/requirements/WalletActivity/components/ControlledNumberInput.tsx
@@ -150,6 +150,7 @@ const ControlledNumberInput = ({
       />
       <NumberInputStepper
         padding={"0 !important"}
+        display={{ base: "none", md: "flex" }}
         visibility={props.isReadOnly ? "hidden" : "visible"}
       >
         <NumberIncrementStepper />

diff --git a/src/solutions/LiquidityIncentive/LiquidityIncentiveSetupModal.tsx b/src/solutions/LiquidityIncentive/LiquidityIncentiveSetupModal.tsx
@@ -33,7 +33,7 @@ import { triggerChat } from "components/_app/IntercomProvider"
 import { FormProvider, useForm } from "react-hook-form"
 import { UniswapChains } from "requirements/Uniswap/hooks/useParsePoolChain"
 import SelectLiquidityPoolStep from "./components/SelectLiquidityPoolStep"
-import SetPointsReward from "./components/SetPointsRewardStep"
+import SetLiquidityPointsRewardStep from "./components/SetLiquidityPointsRewardStep"
 import useCreateLiquidityIncentive from "./hooks/useCreateLiquidityIncentive"
 
 export type LiquidityIncentiveForm = {
@@ -83,7 +83,7 @@ const defaultValues = {
 
 const steps = [
   { title: "Choose your liquidity pool", content: SelectLiquidityPoolStep },
-  { title: "Set points reward", content: SetPointsReward },
+  { title: "Set points reward", content: SetLiquidityPointsRewardStep },
 ]
 
 const LiquidityIncentiveSetupModal = ({
@@ -190,7 +190,7 @@ const LiquidityIncentiveSetupModal = ({
           </Stepper>
         </ModalBody>
       </FormProvider>
-      <ModalFooter pt={6} pb={6} bg={footerBg} border={"none"}>
+      <ModalFooter py={4} bg={footerBg} borderTopWidth="1px">
         <Accordion allowToggle w="full">
           <AccordionItem border={"none"}>
             <AccordionButton

diff --git a/src/solutions/LiquidityIncentive/components/SelectLiquidityPoolStep.tsx b/src/solutions/LiquidityIncentive/components/SelectLiquidityPoolStep.tsx
@@ -161,7 +161,7 @@ const SelectLiquidityPoolStep = ({ onContinue }: { onContinue: () => void }) =>
         }
         onClick={onContinue}
         mb={5}
-        mt={3}
+        mt={2}
       >
         Continue
       </Button>

diff --git a/...entive/components/SetPointsRewardStep.tsx → ...mponents/SetLiquidityPointsRewardStep.tsx b/...entive/components/SetPointsRewardStep.tsx → ...mponents/SetLiquidityPointsRewardStep.tsx
@@ -21,7 +21,7 @@ import { LiquidityIncentiveForm } from "../LiquidityIncentiveSetupModal"
 import LiquidityConversion from "./LiquidityConversion"
 import SelectPointType from "./SelectPointType"
 
-const SetPointsReward = ({
+const SetLiquidityPointsRewardStep = ({
   onSubmit,
   isLoading,
 }: {
@@ -97,7 +97,7 @@ const SetPointsReward = ({
       </Box>
 
       <Button
-        colorScheme={"indigo"}
+        colorScheme={"green"}
         onClick={onSubmit}
         mb={5}
         mt={3}
@@ -110,4 +110,4 @@ const SetPointsReward = ({
   )
 }
 
-export default SetPointsReward
+export default SetLiquidityPointsRewardStep
-Original file line number
+Diff line change
@@ Expand Up @@
             }
             onClick={onContinue}
             mb={5}
-            mt={3}
+            mt={2}
           >
             Continue
           </Button>
@@ Expand Down @@