Issues

apps/abclaunch/src/components/dao-steps/ConfigureVoting.tsx

@@ -5,7 +5,7 @@ import { useRecoilState } from "recoil";
 
 function SliderControl({ name, value, onChange, tooltip }: { name: string, tooltip: string, value: string, onChange: (value: string) => void }) {
     return (
-        <FormControl pt="34px" pb="32px">
+        <FormControl pt="17px" pb="16px">
             <FormLabel>
                 <HStack>
                     <Text fontSize="16px" color="brand.900">{name}</Text>
@@ -45,9 +45,9 @@ export default function ConfigureVoting() {
     const [votingSettings, setVotingSettings] = useRecoilState(newDaoVotingState);
 
     return (
-        <VStack spacing={4} pt="130px" className="abcs-newdao-step-content">
+        <VStack spacing={4} mt="75" className="abcs-newdao-step-content">
             <Text fontFamily="VictorSerifTrial" fontSize="72px" color="brand.900">Voting</Text>
-            <Text fontSize="24px" color="brand.900" pt="32px">Choose your voting settings below</Text>
+            <Text fontSize="24px" color="brand.900" mt="16px">Choose your voting settings below</Text>
             <Divider paddingTop="24px"
                 borderColor="brand.900"
                 borderBottomWidth="1px"
@@ -57,7 +57,7 @@ export default function ConfigureVoting() {
             <VStack width="90%">
                 <SliderControl name="SUPPORT" value={votingSettings.supportRequired} onChange={supportRequired => Number(supportRequired) <= 100 && Number(supportRequired) >= 0 && setVotingSettings(settings => ({ ...settings, supportRequired }))} tooltip="Support is the relative percentage of tokens that are required to vote “Yes” for a proposal to be approved. For example, if “Support” is set to 50%, then more than 50% of the tokens used to vote on a proposal must vote “Yes” for it to pass." />
                 <SliderControl name="MINIMUM APPROVAL" value={votingSettings.minimumAcceptanceQuorum} onChange={minimumAcceptanceQuorum => Number(minimumAcceptanceQuorum) <= 100 && Number(minimumAcceptanceQuorum) >= 0 && setVotingSettings(settings => ({ ...settings, minimumAcceptanceQuorum }))} tooltip="Minimum approval is the percentage of the total token supply that is required to vote “Yes” on a proposal before it can be approved. For example, if the “Minimum Approval” is set to 20%, then more than 20% of the outstanding token supply must vote “Yes” on a proposal for it to pass." />
-                <HStack alignSelf="start" mt="38px">
+                <HStack alignSelf="start" mt="16px">
                     <Text fontSize="16px" color="brand.900">VOTE DURATION</Text>
                     <Tooltip label="Vote duration is the length of time that the vote will be open for participation. For example, if the Vote Duration is set to 24 hours, then token holders have 24 hours to participate in the vote.">
                         <InfoOutlineIcon />
@@ -77,13 +77,13 @@ export default function ConfigureVoting() {
                     })}
                 </HStack>
             </VStack>
-            <Divider paddingTop="24px"
+            <Divider paddingTop="12px"
                 borderColor="brand.900"
                 borderBottomWidth="1px"
                 width="100%"
                 margin="0 auto"
             />
-            <VStack pt="32px" spacing={-1}>
+            <VStack mt="16px" spacing={-1}>
                 <Text fontSize="16px" color="black">All votes must reach the support and minimum approval threshold in order to pass. </Text>
                 <Text fontSize="16px" color="black">If one of both are not met, the vote will not be considered valid and will not be executed.</Text>
             </VStack>

apps/abclaunch/src/components/dao-steps/Summary.tsx

@@ -1,7 +1,8 @@
-import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Checkbox, Table, Tbody, Td, Text, Th, Thead, Tr, VStack } from "@chakra-ui/react";
+import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Checkbox, Link, Table, Tbody, Td, Text, Th, Thead, Tr, VStack } from "@chakra-ui/react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { newDaoNameState, newDaoVotingState, newDaoTokenState, newDaoTokenSupplyState, newDaoAbcState, newDaoCheckedState } from "../../recoil";
 import { getCollateralTokenInfo } from "../../utils/token-info";
+import TermsModal from "commons-ui/src/components/TermsModal"
 
 export default function Summary() {
     const daoName = useRecoilValue(newDaoNameState);
@@ -113,7 +114,7 @@ export default function Summary() {
                     <Text fontSize="16px">Review all the settings.</Text>
                     <Text fontSize="16px">If there are any mistakes, fix them before proceeding.</Text>
                 </VStack>
-                <Checkbox colorScheme="brand" onChange={(e) => setChecked(e.target.checked)}><Text as="b">I confirm that the above information is correct.</Text></Checkbox>
+                <Checkbox colorScheme="brand" onChange={(e) => setChecked(e.target.checked)}><TermsModal location="launch"/></Checkbox>
             </VStack>
         </Box>
     )

apps/abclaunch/src/pages/Home.tsx

@@ -7,7 +7,7 @@ export default function Launchpad() {
     return (
         <VStack bg="brand.100" pb="100px">
             <VStack spacing={0}>
-                <Text color="brand.900" fontSize="72px" fontFamily="VictorSerifTrial">The ABC Launch!</Text>
+                <Text color="brand.900" fontSize="72px" fontFamily="VictorSerifTrial">Welcome to ABC Launch</Text>
                 <Text color="brand.900" fontSize="24px" pt="32px">Build a regenerative economy with an</Text>
                 <Text color="brand.900" fontSize="24px">Augmented Bonding Curve.</Text>
                 <Divider paddingTop="48px"

apps/abcswap/src/pages/Home.tsx

@@ -12,9 +12,9 @@ export default function Home() {
     const { isRegistered, error } = useIsRegisteredDao(daoName, 500);
 
     return (
-        <VStack bg="brand.100" pb="100px">
+        <VStack bg="brand.100" pb="100px0" textAlign="center">
             <VStack spacing={0}>
-                <Text color="brand.900" fontSize="72px" fontFamily="VictorSerifTrial">Welcome to the ABC Swap</Text>
+                <Text color="brand.900" fontSize="72px" fontFamily="VictorSerifTrial">Welcome to ABC Swap</Text>
                 <Text color="brand.900" fontSize="24px" pt="32px">Find and swap ABC tokens.</Text>
                 <Divider paddingTop="48px"
                     borderColor="brand.900"
@@ -24,32 +24,32 @@ export default function Home() {
                 />
             </VStack>
             <HStack spacing={20} paddingTop="40px" >
-                <HStack>
+                <VStack>
                     <Image src="/swap-home/ContinuousFunding.svg" />
                     <Text color="brand.900" fontSize="20px" fontWeight="500">Continuous funding</Text>
-                </HStack>
-                <HStack>
+                </VStack>
+                <VStack>
                     <Image src="/swap-home/MarketAccessibility.svg" />
                     <VStack spacing={0}>
                         <Text color="brand.900" fontSize="20px">Market accessibility</Text>
                         <Text color="brand.900" fontSize="20px">& lower volatility</Text>
                     </VStack>
-                </HStack>
-                <HStack>
+                </VStack>
+                <VStack>
                     <Image src="/swap-home/SustainableGrowth.svg" />
                     <Text color="brand.900" fontSize="20px">Sustainable growth</Text>
-                </HStack>
+                </VStack>
             </HStack>
-            <VStack spacing={4} mt="100px" >
+            <VStack spacing={4} mt="100px" textAlign="center" >
                 <Text color="brand.900" fontSize="40px" fontFamily="VictorSerifTrial">Which token do you want to swap?</Text>
                 <DaoNameInput daoName={daoName} setDaoName={({name}) => setDaoName(name)} />
+                <Button mt="25px" isDisabled={!isRegistered} w="310px" onClick={() => navigate(`/${daoName}`)}>Next</Button>
                 <HStack spacing={4} mt="40px" visibility={(daoName.length == 0 || !error) ? "collapse" : undefined}>
                     <Stack w="32px" h="32px" alignItems="center" justifyContent="center" borderColor="red.500" borderRadius="16px" borderWidth="2px">
                         <CloseIcon color='red.500' w="16px" h="16px" />
                     </Stack>
                     <Text color="red.500" fontSize="18px">The entered DAO name or contract address was not found.</Text>
                 </HStack>
-                <Button mt="25px" isDisabled={!isRegistered} w="310px" onClick={() => navigate(`/${daoName}`)}>Next</Button>
             </VStack>
         </VStack>
     )

apps/abcswap/src/pages/Swap.tsx

@@ -8,6 +8,7 @@ import { useAccount, useBalance } from "wagmi";
 
 import { useProcessTransactions } from "transactions-modal";
 import { TokenSelector } from "commons-ui/src/components/TokenSelector";
+import TermsModal from "commons-ui/src/components/TermsModal";
 
 import { useAbcInfo } from "../hooks/useAbcInfo";
 import { useBondingCurvePrice } from "../hooks/useBondingCurvePrice";
@@ -193,7 +194,7 @@ export default function SimpleConvert() {
 
                 <HStack>
                     <Checkbox colorScheme="brand" isChecked={terms} onChange={(e) => setTerms(e.target.checked)}>
-                        <Text mt="26px" as="b">I have read and agree to the <Link href="" isExternal>Terms of Service.</Link></Text>
+                        <TermsModal location="swap"/>
                     </Checkbox>
                 </HStack>
             </VStack>