feat: AddSolutionsModal

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/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={(id) => {
-              setValue("data.guildPlatformId", id)
+            onDone={(selectionId) => {
+              setValue("data.guildPlatformId", selectionId)
             }}
           />
         )}

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,31 +1,33 @@
 import {
   Box,
   Flex,
-  HStack,
   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
 }
 type Props<TOption extends SegmentedControlOption> = {
   options: TOption[]
+  size?: "md" | "sm"
   onChange?: (nextValue: TOption["value"]) => void
   value?: TOption["value"]
   defaultValue?: TOption["value"]
 } & Omit<UseRadioGroupProps, "onChange" | "value" | "defaultValue">
 
 const SegmentedControl = <TOption extends SegmentedControlOption>({
   options,
+  size = "md",
   ...useRadioGroupProps
 }: Props<TOption>) => {
   const bgColor = useColorModeValue("white", "blackAlpha.300")
@@ -39,15 +41,27 @@ const SegmentedControl = <TOption extends SegmentedControlOption>({
 
   const uid = useId()
 
+  const height = useMemo(() => {
+    switch (size) {
+      case "md":
+        return { base: "fit", md: 10 }
+      case "sm":
+        return { base: "fit", md: 9 }
+      default:
+        return { base: "fit", md: 10 }
+    }
+  }, [size])
+
   return (
-    <HStack
+    <Flex
       width="full"
+      flexDirection={{ base: "column", md: "row" }}
       borderWidth={borderWidth}
       bgColor={bgColor}
       borderRadius="lg"
-      height={10}
+      height={height}
       padding={1}
-      spacing={1}
+      gap={1}
       {...getRootProps()}
     >
       {options.map((option) => (
@@ -57,9 +71,10 @@ const SegmentedControl = <TOption extends SegmentedControlOption>({
           {...getRadioProps({ value: option.value })}
           label={option.label}
           value={option.value as any}
+          size={size}
         />
       ))}
-    </HStack>
+    </Flex>
   )
 }
 
@@ -68,16 +83,25 @@ const MotionBox = motion(Box)
 const SegmentedControlButton = ({
   uid,
   label,
+  size = "md",
   ...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 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={size === "sm" ? 7 : 8}
+      w="full"
+    >
       <input {...inputProps} hidden />
 
       {state.isChecked && (
@@ -91,13 +115,13 @@ const SegmentedControlButton = ({
             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={size === "sm" ? 7 : 8}
         borderRadius="md"
         w="full"
         fontWeight="medium"
@@ -121,7 +145,12 @@ const SegmentedControlButton = ({
         textAlign="center"
         px={2}
       >
-        <Text as="span" noOfLines={1}>
+        <Text
+          as="span"
+          noOfLines={1}
+          fontSize={size}
+          colorScheme={!state.isChecked ? "gray" : ""}
+        >
           {label}
         </Text>
       </Flex>

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

@@ -76,7 +76,9 @@ const PlatformSelectButton = ({
         platformName === platform && !platformUserData?.readonly
     )
 
-  const circleBgColor = useColorModeValue("gray.700", "gray.600")
+  const circleBgColor = useColorModeValue("gray.100", "gray.600")
+  const iconColor = useColorModeValue("black", "white")
+
   const DynamicCtaIcon = useMemo(
     () => dynamic(async () => (!isPlatformConnected ? ArrowSquareIn : CaretRight)),
     [isPlatformConnected]
@@ -104,7 +106,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 +121,7 @@ const PlatformSelectButton = ({
               pos="relative"
               overflow="hidden"
             >
-              <Icon as={icon} boxSize={5} weight="regular" color="white" />
+              <Icon as={icon} boxSize={5} weight="regular" color={iconColor} />
             </Circle>
           )}
           <VStack
@@ -133,7 +140,7 @@ const PlatformSelectButton = ({
               {title}
             </Heading>
             {description && (
-              <Text letterSpacing="wide" colorScheme="gray">
+              <Text colorScheme="gray" lineHeight={1.33}>
                 {(isLoading && `${loadingText}...`) || description}
               </Text>
             )}

src/requirements/WalletActivity/components/ControlledNumberInput.tsx

@@ -111,7 +111,6 @@ const ControlledNumberInput = ({
     if (newValue < props.min || newValue === "") {
       const inputPrecision = getNumOfDecimals(newValue)
       const minPrecision = getNumOfDecimals(props.min)
-      console.log("ret min prop")
       return props.min.toFixed(Math.max(minPrecision, inputPrecision))
     }
     return newValue

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.400")
 
   return (
     <>