feat: AddSolutionsModal (#1334)

Co-authored-by: BrickheadJohnny <[email protected]>
Co-authored-by: valid <[email protected]>

src/components/[guild]/AddRewardAndCampaign.tsx

@@ -14,8 +14,7 @@ import {
 } from "@chakra-ui/react"
 import { CaretDown, Plus } from "@phosphor-icons/react"
 import CreateCampaignModal from "components/[guild]/CreateCampaignModal"
-import LiquidityIncentiveSetupModal from "solutions/LiquidityIncentive/LiquidityIncentiveSetupModal"
-import AddRewardButton from "./AddRewardButton"
+import AddSolutionsButton from "solutions/components/AddSolutionsButton"
 import { useIsTabsStuck } from "./Tabs"
 import { useThemeContext } from "./ThemeContext"
 
@@ -24,16 +23,10 @@ const AddRewardAndCampaign = () => {
   const { isStuck } = useIsTabsStuck()
   const { textColor = null, buttonColorScheme = null } = useThemeContext() || {}
 
-  const {
-    isOpen: isSolutionOpen,
-    onClose: onSolutionClose,
-    onOpen: onSolutionOpen,
-  } = useDisclosure()
-
   return (
     <>
       <ButtonGroup isAttached>
-        <AddRewardButton />
+        <AddSolutionsButton />
         <Divider orientation="vertical" h="8" />
         <Menu placement="bottom-end" autoSelect={false}>
           <MenuButton
@@ -55,17 +48,6 @@ const AddRewardAndCampaign = () => {
               zIndex="popover"
               overflow="hidden"
             >
-              <MenuItem
-                onClick={onSolutionOpen}
-                icon={<Icon as={Plus} mt="1" />}
-                alignItems="start"
-                py={4}
-              >
-                <Text as="span" fontWeight="semibold" fontSize="sm">
-                  Add solution
-                </Text>
-              </MenuItem>
-              <Divider />
               <MenuItem
                 onClick={onOpen}
                 icon={<Icon as={Plus} mt="1" />}
@@ -87,10 +69,6 @@ const AddRewardAndCampaign = () => {
         </Menu>
       </ButtonGroup>
       <CreateCampaignModal isOpen={isOpen} onClose={onClose} />
-      <LiquidityIncentiveSetupModal
-        isOpen={isSolutionOpen}
-        onClose={onSolutionClose}
-      />
     </>
   )
 }

src/components/[guild]/AddRewardButton/SelectRolePanel.tsx

@@ -67,7 +67,7 @@ const SelectRolePanel = ({
 
   const goBack = () => {
     if (!rewards[selection].autoRewardSetup) methods.reset(defaultValues)
-    setStep("REWARD_SETUP")
+    setStep(selection === "POLYGON_ID" ? "HOME" : "REWARD_SETUP")
   }
 
   return (

src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddPointsPanel/AddPointsPanel.tsx

@@ -117,8 +117,8 @@ const AddPointsPanel = ({ onAdd, onCancel }: AddRewardPanelProps) => {
             selectedExistingId={selectedExistingId}
             showCreateNew
             mb="5"
-            onDone={(idToSet) => {
-              setValue("data.guildPlatformId", idToSet)
+            onDone={(selectionId) => {
+              setValue("data.guildPlatformId", selectionId)
             }}
           />
         )}

src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddPointsPanel/components/ExistingPointsTypeSelect.tsx

@@ -56,7 +56,11 @@ const ExistingPointsTypeSelect = ({
     (option) => option.value === selectedExistingId
   )?.img
 
-  const methods = useForm<{ selectedId?: number }>()
+  const methods = useForm<{ selectedId?: number | null }>({
+    defaultValues: {
+      selectedId: options?.[0]?.value || null,
+    },
+  })
   const {
     formState: { errors },
     control,

src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddPointsPanel/components/SetPointsAmount/components/DynamicPointsAmountForm.tsx

@@ -31,7 +31,7 @@ const DynamicPointsAmountForm = ({ imageUrl, baseFieldPath }) => {
     return () => {
       setIsSubmitDisabled?.(false)
     }
-  }, [requirementId])
+  }, [requirementId, setIsSubmitDisabled])
 
   return (
     <>

src/components/common/SegmentedControl.tsx

@@ -1,34 +1,42 @@
 import {
   Box,
   Flex,
-  HStack,
+  FlexProps,
   RadioProps,
   Text,
   UseRadioGroupProps,
   chakra,
+  useBreakpointValue,
   useColorModeValue,
   useRadio,
   useRadioGroup,
 } from "@chakra-ui/react"
 import { motion } from "framer-motion"
-import { useId } from "react"
+import { useId, useMemo } from "react"
 
 type SegmentedControlOption = {
   label: string
   value: unknown
+  isFullWidth?: boolean
 }
 type Props<TOption extends SegmentedControlOption> = {
   options: TOption[]
+  size?: "md" | "sm"
+  isFullWidth?: boolean
+  styleProps?: FlexProps
   onChange?: (nextValue: TOption["value"]) => void
   value?: TOption["value"]
   defaultValue?: TOption["value"]
 } & Omit<UseRadioGroupProps, "onChange" | "value" | "defaultValue">
 
 const SegmentedControl = <TOption extends SegmentedControlOption>({
   options,
+  size = "md",
+  isFullWidth = true,
+  styleProps,
   ...useRadioGroupProps
 }: Props<TOption>) => {
-  const bgColor = useColorModeValue("white", "blackAlpha.300")
+  const bgColor = useColorModeValue("gray.100", "blackAlpha.300")
   const borderWidth = useColorModeValue(1, 0)
 
   const { getRadioProps, getRootProps } = useRadioGroup({
@@ -39,15 +47,22 @@ const SegmentedControl = <TOption extends SegmentedControlOption>({
 
   const uid = useId()
 
+  const height = useMemo(() => {
+    if (size === "md") return { base: "fit", md: 10 }
+    return { base: "fit", md: 9 }
+  }, [size])
+
   return (
-    <HStack
+    <Flex
       width="full"
       borderWidth={borderWidth}
+      alignItems={"center"}
       bgColor={bgColor}
       borderRadius="lg"
-      height={10}
+      height={height}
       padding={1}
-      spacing={1}
+      gap={1}
+      {...styleProps}
       {...getRootProps()}
     >
       {options.map((option) => (
@@ -57,9 +72,11 @@ const SegmentedControl = <TOption extends SegmentedControlOption>({
           {...getRadioProps({ value: option.value })}
           label={option.label}
           value={option.value as any}
+          size={size}
+          isFullWidth={isFullWidth}
         />
       ))}
-    </HStack>
+    </Flex>
   )
 }
 
@@ -68,36 +85,47 @@ const MotionBox = motion(Box)
 const SegmentedControlButton = ({
   uid,
   label,
+  size = "md",
+  isFullWidth,
   ...useRadioProps
-}: SegmentedControlOption & RadioProps & { uid: string }) => {
+}: SegmentedControlOption & RadioProps & { uid: string; size?: "md" | "sm" }) => {
   const { state, getInputProps, getRadioProps, htmlProps } = useRadio(useRadioProps)
 
   const inputProps = getInputProps({})
 
-  const activeBgColor = useColorModeValue("blackAlpha.100", "whiteAlpha.200")
+  const activeBgColor = useColorModeValue("white", "whiteAlpha.200")
+
+  const isMobile = useBreakpointValue({ base: true, md: false })
 
   return (
-    <chakra.label {...htmlProps} cursor="pointer" position="relative" h={8} w="full">
+    <chakra.label
+      {...htmlProps}
+      cursor="pointer"
+      position="relative"
+      h="full"
+      w={isFullWidth ? "full" : "auto"}
+    >
       <input {...inputProps} hidden />
 
       {state.isChecked && (
         <MotionBox
           position="absolute"
           inset={0}
-          borderRadius="md"
+          borderRadius="lg"
           backgroundColor={activeBgColor}
+          boxShadow={"0 0.5px 2px 0 rgba(0, 0, 0, 0.2)"}
           layoutId={`${uid}-segmented-bg`}
           transition={{
             duration: 0.2,
           }}
           // Don't animate on the Y axis
-          style={{ originY: "0px" }}
+          style={isMobile ? {} : { originY: "0px" }}
         />
       )}
       <Flex
         alignItems="center"
         justifyContent="center"
-        h={8}
+        h="full"
         borderRadius="md"
         w="full"
         fontWeight="medium"
@@ -119,9 +147,17 @@ const SegmentedControlButton = ({
           }
         }}
         textAlign="center"
-        px={2}
+        px={3}
+        pos="relative"
+        zIndex="1"
       >
-        <Text as="span" noOfLines={1}>
+        <Text
+          as="span"
+          noOfLines={1}
+          fontSize={size}
+          fontWeight={!isFullWidth ? "semibold" : undefined}
+          colorScheme={!state.isChecked ? "gray" : ""}
+        >
           {label}
         </Text>
       </Flex>

src/components/create-guild/PlatformsGrid/components/PlatformSelectButton.tsx

@@ -76,7 +76,8 @@ const PlatformSelectButton = ({
         platformName === platform && !platformUserData?.readonly
     )
 
-  const circleBgColor = useColorModeValue("gray.700", "gray.600")
+  const circleBgColor = useColorModeValue("gray.100", "gray.600")
+
   const DynamicCtaIcon = useMemo(
     () => dynamic(async () => (!isPlatformConnected ? ArrowSquareIn : CaretRight)),
     [isPlatformConnected]
@@ -104,7 +105,12 @@ const PlatformSelectButton = ({
       >
         <HStack spacing={4}>
           {imageUrl ? (
-            <Circle size="12" pos="relative" overflow="hidden">
+            <Circle
+              size="12"
+              pos="relative"
+              overflow="hidden"
+              bgColor={circleBgColor}
+            >
               <Image src={imageUrl} alt="Guild logo" fill sizes="3rem" />
             </Circle>
           ) : (
@@ -114,7 +120,7 @@ const PlatformSelectButton = ({
               pos="relative"
               overflow="hidden"
             >
-              <Icon as={icon} boxSize={5} weight="regular" color="white" />
+              <Icon as={icon} boxSize={5} weight="regular" />
             </Circle>
           )}
           <VStack
@@ -133,7 +139,7 @@ const PlatformSelectButton = ({
               {title}
             </Heading>
             {description && (
-              <Text letterSpacing="wide" colorScheme="gray">
+              <Text colorScheme="gray" lineHeight={1.33}>
                 {(isLoading && `${loadingText}...`) || description}
               </Text>
             )}

src/rewards/ContractCall/index.ts

@@ -1,11 +1,11 @@
-import { PlatformAsRewardRestrictions, RewardData } from "rewards/types"
-import useContractCallCardProps from "./useContractCallCardProps"
-import ContractCallRewardCardButton from "./ContractCallRewardCardButton"
-import ContractCallCardMenu from "./ContractCallCardMenu"
-import Photo from "static/icons/photo.svg"
 import dynamic from "next/dynamic"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
 import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
+import { PlatformAsRewardRestrictions, RewardData } from "rewards/types"
+import Photo from "static/icons/photo.svg"
+import ContractCallCardMenu from "./ContractCallCardMenu"
+import ContractCallRewardCardButton from "./ContractCallRewardCardButton"
+import useContractCallCardProps from "./useContractCallCardProps"
 
 export default {
   icon: Photo,

src/rewards/SecretText/index.ts

@@ -1,11 +1,11 @@
+import dynamic from "next/dynamic"
+import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
+import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
 import { PlatformAsRewardRestrictions, RewardData } from "rewards/types"
+import Box from "static/icons/box.svg"
 import SecretTextCardMenu from "./SecretTextCardMenu"
 import TextCardButton from "./TextCardButton"
 import useSecretTextCardProps from "./useSecretTextCardProps"
-import Box from "static/icons/box.svg"
-import dynamic from "next/dynamic"
-import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
-import LoadingRewardPreview from "rewards/components/LoadingRewardPreview"
 
 export default {
   icon: Box,

src/rewards/Token/DynamicRewardModal.tsx

@@ -91,7 +91,7 @@ const DynamicRewardModal = ({
     onClose: editOnClose,
     onOpen: editOnOpen,
   } = useDisclosure()
-  const footerBg = useColorModeValue("blackAlpha.100", "blackAlpha.600")
+  const footerBg = useColorModeValue("blackAlpha.100", "blackAlpha.300")
 
   return (
     <>

src/rewards/components/PointsPreview.tsx

@@ -1,3 +1,4 @@
+import { CREATE_NEW_OPTION } from "components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddPointsPanel/components/ExistingPointsTypeSelect"
 import useGuildPlatform from "components/[guild]/hooks/useGuildPlatform"
 import { useWatch } from "react-hook-form"
 import RewardPreview from "./RewardPreview"
@@ -14,9 +15,10 @@ const PointsPreview = (): JSX.Element => {
   })
 
   const { guildPlatform } = useGuildPlatform(guildPlatformId)
-  const { name, imageUrl } = guildPlatformId
-    ? guildPlatform.platformGuildData ?? {}
-    : platformGuildData ?? {}
+  const { name, imageUrl } =
+    guildPlatformId && guildPlatformId !== CREATE_NEW_OPTION
+      ? guildPlatform.platformGuildData ?? {}
+      : platformGuildData ?? {}
 
   return (
     <RewardPreview