Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed several issues from UAT #32

Merged
merged 17 commits into from
Oct 18, 2023
Merged

Fixed several issues from UAT #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
9d533c9
Styled inputs
jorvixsky Oct 17, 2023
f4c389e
Corrected input connected to token selector ABC
jorvixsky Oct 17, 2023
7ac49fe
Stepper back in place
jorvixsky Oct 17, 2023
1d45bf5
Changed NewDao connect button to custom connect button
Oct 17, 2023
fd1a428
Limited max and min support & quorum
Oct 17, 2023
ba94345
Updated stepper styles
Oct 17, 2023
9b23db1
Added ABC info link, handling swap/launchpad item
jorvixsky Oct 18, 2023
02e0ef2
Removed left text
jorvixsky Oct 18, 2023
d11be51
Added links to go to swap/launch, fixed wrongfully painted
jorvixsky Oct 18, 2023
2672966
Changed copy
jorvixsky Oct 18, 2023
e0dfdbb
Fixed input style, changed styling
jorvixsky Oct 18, 2023
f91a1ba
Changed placeholder text swap home input
jorvixsky Oct 18, 2023
1d6488b
Corrected copy for ToS acceptance
jorvixsky Oct 18, 2023
61f0296
Styled home page swap input group
jorvixsky Oct 18, 2023
943773e
Changed "Launchpad" to "Launch" in terms of product name
jorvixsky Oct 18, 2023
4cdff6c
Updated title for Launchpad app to Launch
jorvixsky Oct 18, 2023
fd78eb6
Footer WIP
jorvixsky Oct 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/abclaunch/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ABC Launchpad</title>
<title>ABC Launch</title>
</head>
<body>
<div id="root"></div>
Expand Down
33 changes: 15 additions & 18 deletions apps/abclaunch/src/components/DaoStepper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import { Box, Button, Flex, HStack, Step, StepIcon, StepIndicator, StepNumber, StepStatus, StepTitle, Stepper, VStack, useSteps } from "@chakra-ui/react";

function Steps({ steps, activeStep }: {steps: {title: string}[], activeStep: number}) {
function Steps({ steps, activeStep }: { steps: { title: string }[], activeStep: number }) {
return (
<Stepper size='md' index={activeStep}>
{steps.map((_, index) => (
<Step key={index}>
<VStack>
<StepIndicator>
<StepStatus
complete={<StepIcon />}
incomplete={<StepNumber />}
active={<StepNumber />}
/>
</StepIndicator>
<StepTitle>{steps[index].title}</StepTitle>
<VStack px="25px">
<StepIndicator w="70px" h="70px">
<StepStatus
complete={<StepIcon />}
incomplete={<StepNumber />}
active={<StepNumber />}
/>
</StepIndicator>
<StepTitle>{steps[index].title}</StepTitle>
</VStack>
</Step>
))}
Expand All @@ -23,7 +23,7 @@ function Steps({ steps, activeStep }: {steps: {title: string}[], activeStep: num

export default function DaoStepper(
{ steps, onComplete, isValid }: {
steps: {title: string, component: React.ReactElement }[],
steps: { title: string, component: React.ReactElement }[],
onComplete: () => void,
isValid: (step: number) => boolean
}
Expand All @@ -49,9 +49,7 @@ export default function DaoStepper(
>
<Box
position="absolute"
top="-30px"
left="10%"
right="10%"
top="-32px"
display="flex"
justifyContent="space-between"
alignItems="center"
Expand All @@ -68,11 +66,10 @@ export default function DaoStepper(
<Button
onClick={isLastStep ? onComplete : goToNext}
isDisabled={!valid}>
{isLastStep ? 'Launch' : 'Next' }
{isLastStep ? 'Launch' : 'Next'}
</Button>
</HStack>
</VStack>
</Flex>
</VStack>
</Flex>
)
}

22 changes: 12 additions & 10 deletions apps/abclaunch/src/components/dao-steps/ConfigureAbc.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Divider, Button, FormControl, FormLabel, HStack, InputGroup, Input, InputRightAddon, Text, VStack, Image, Tooltip, Menu, MenuButton, MenuList, Flex, MenuItem } from "@chakra-ui/react";
import { Divider, Button, FormControl, FormLabel, HStack, InputGroup, Input, InputRightElement, Text, VStack, Image, Tooltip, Menu, MenuButton, MenuList, Flex, MenuItem } from "@chakra-ui/react";
import { InfoOutlineIcon, ChevronDownIcon } from '@chakra-ui/icons';
import React from 'react';
import { useRecoilState } from "recoil";
Expand All @@ -12,24 +12,24 @@ export default function ConfigureToken() {
const enoughBalance = true;

function handleReserveRatioChange(reserveRatio: string) {
/^\d*\.?\d*$/.test(reserveRatio) && setAbcSettings(settings => ({...settings, reserveRatio}));
/^\d*\.?\d*$/.test(reserveRatio) && setAbcSettings(settings => ({ ...settings, reserveRatio }));
}

function handleCollateralTokenChange(collateralToken: string) {
setAbcSettings(settings => ({...settings, collateralToken}));
setAbcSettings(settings => ({ ...settings, collateralToken }));
}

function handleInitialReserveChange(reserveInitialBalance: string) {
console.log(reserveInitialBalance);
/^\d*\.?\d*$/.test(reserveInitialBalance) && setAbcSettings(settings => ({...settings, reserveInitialBalance}));
/^\d*\.?\d*$/.test(reserveInitialBalance) && setAbcSettings(settings => ({ ...settings, reserveInitialBalance }));
}

function handleEntryTributeChange(entryTribute: string) {
/^\d*\.?\d*$/.test(entryTribute) && setAbcSettings(settings => ({...settings, entryTribute}));
/^\d*\.?\d*$/.test(entryTribute) && setAbcSettings(settings => ({ ...settings, entryTribute }));
}

function handleExitTributeChange(exitTribute: string) {
/^\d*\.?\d*$/.test(exitTribute) && setAbcSettings(settings => ({...settings, exitTribute}));
/^\d*\.?\d*$/.test(exitTribute) && setAbcSettings(settings => ({ ...settings, exitTribute }));
}

return (
Expand Down Expand Up @@ -72,7 +72,7 @@ export default function ConfigureToken() {
</Button>
<InputGroup w="91px" display="inline-flex">
<Input value={abcSettings.reserveRatio} onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleReserveRatioChange(e.target.value)} />
<InputRightAddon children="%" />
<InputRightElement children="%" />
</InputGroup>
</HStack>
</FormControl>
Expand Down Expand Up @@ -123,7 +123,9 @@ export default function ConfigureToken() {
</MenuList>
</Menu>
<Flex>
<Input placeholder="Enter value" borderRadius="8px" borderLeft="0" borderTopLeftRadius="0" borderBottomLeftRadius="0" borderColor="brand.900" value={abcSettings.reserveInitialBalance} onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInitialReserveChange((e.target.value))} />
<InputGroup>
<Input placeholder="Enter value" borderLeft="0" borderTopLeftRadius="0" borderBottomLeftRadius="0" value={abcSettings.reserveInitialBalance} onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInitialReserveChange((e.target.value))} />
</InputGroup>
</Flex>
</HStack>
</FormControl>
Expand All @@ -139,7 +141,7 @@ export default function ConfigureToken() {
</FormLabel>
<InputGroup>
<Input value={abcSettings.entryTribute} onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleEntryTributeChange(e.target.value)} />
<InputRightAddon children="%" />
<InputRightElement children="%" />
</InputGroup>
</FormControl>
<FormControl>
Expand All @@ -153,7 +155,7 @@ export default function ConfigureToken() {
</FormLabel>
<InputGroup>
<Input value={abcSettings.exitTribute} onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleExitTributeChange(e.target.value)} />
<InputRightAddon children="%" />
<InputRightElement children="%" />
</InputGroup>
</FormControl>
</HStack>
Expand Down
56 changes: 30 additions & 26 deletions apps/abclaunch/src/components/dao-steps/ConfigureToken.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Divider, Button, FormControl, FormLabel, HStack, InputGroup, Input, InputRightAddon, Text, VStack, Tooltip } from "@chakra-ui/react";
import { Divider, Button, FormControl, FormLabel, HStack, InputGroup, Input, InputRightElement, Text, VStack, Tooltip } from "@chakra-ui/react";
import { InfoOutlineIcon, DeleteIcon } from '@chakra-ui/icons';
import React from 'react';
import { useRecoilState, useRecoilValue } from "recoil";
Expand All @@ -10,11 +10,11 @@ export default function ConfigureToken() {
const initialTotalSupply = useRecoilValue(newDaoTokenSupplyState);

function handleChangeTokenName(tokenName: string) {
setTokenSettings(settings => ({...settings, tokenName}));
setTokenSettings(settings => ({ ...settings, tokenName }));
}

function handleChangeTokenSymbol(tokenSymbol: string) {
setTokenSettings(settings => ({...settings, tokenSymbol}));
setTokenSettings(settings => ({ ...settings, tokenSymbol }));
}

function handleHolderChange(index: number, e: React.ChangeEvent<HTMLInputElement>, isAddress: boolean) {
Expand All @@ -27,19 +27,19 @@ export default function ConfigureToken() {
holder[1] = e.target.value;
}
tokenHolders.splice(index, 1, holder);
return {...settings, tokenHolders};
return { ...settings, tokenHolders };
});
}

function handleAddEmptyHolder() {
setTokenSettings(settings => ({...settings, tokenHolders: [...settings.tokenHolders, ['', '']]}));
setTokenSettings(settings => ({ ...settings, tokenHolders: [...settings.tokenHolders, ['', '']] }));
}

function handleRemoveHolder(index: number) {
setTokenSettings(settings => {
const tokenHolders = [...settings.tokenHolders];
tokenHolders.splice(index, 1);
return {...settings, tokenHolders};
return { ...settings, tokenHolders };
});
}

Expand All @@ -60,34 +60,38 @@ export default function ConfigureToken() {
<HStack>
<Text fontSize="16px" color="brand.900">TOKEN NAME</Text>
<Tooltip label="Token Name is the name you can assign to the token that will be minted when creating this organization.">
<InfoOutlineIcon />
<InfoOutlineIcon />
</Tooltip>
</HStack>
</FormLabel>
<Input
placeholder="My Organization Token"
value={tokenSettings.tokenName}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
handleChangeTokenName(e.target.value);
}}
/>
<InputGroup>
<Input
placeholder="My Organization Token"
value={tokenSettings.tokenName}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
handleChangeTokenName(e.target.value);
}}
/>
</InputGroup>
</FormControl>
<FormControl width="35%">
<FormLabel>
<HStack>
<Text fontSize="16px" color="brand.900">TOKEN SYMBOL</Text>
<Tooltip label="Token symbol or ticker is a shortened name (typically in capital letters) that refers to a token or coin on a trading platform. For example: ANT.">
<InfoOutlineIcon />
<InfoOutlineIcon />
</Tooltip>
</HStack>
</FormLabel>
<Input
placeholder="MOT"
value={tokenSettings.tokenSymbol}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
handleChangeTokenSymbol(e.target.value)
}}
/>
<InputGroup>
<Input
placeholder="MOT"
value={tokenSettings.tokenSymbol}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
handleChangeTokenSymbol(e.target.value)
}}
/>
</InputGroup>
</FormControl>
</HStack>
<HStack width="100%">
Expand All @@ -96,7 +100,7 @@ export default function ConfigureToken() {
<HStack>
<Text fontSize="16px" color="brand.900">TOKEN HOLDERS</Text>
<Tooltip label="Token holders are the individuals who will receive the initial token distribution.">
<InfoOutlineIcon />
<InfoOutlineIcon />
</Tooltip>
</HStack>
</FormLabel>
Expand All @@ -110,9 +114,9 @@ export default function ConfigureToken() {
handleHolderChange(i, e, true)
}
/>
<InputRightAddon onClick={() => handleRemoveHolder(i)} >
<InputRightElement onClick={() => handleRemoveHolder(i)} >
<DeleteIcon />
</InputRightAddon>
</InputRightElement>
</InputGroup>
))}
</FormControl>
Expand Down Expand Up @@ -168,7 +172,7 @@ export default function ConfigureToken() {
<Text fontSize="16px" color="black">Also, the above addresses will receive the initial token distribution, </Text>
<Text fontSize="16px" color="black">the sum of which determines the initial supply for the token.</Text>
</VStack>
</VStack>
</VStack >
);
}

20 changes: 11 additions & 9 deletions apps/abclaunch/src/components/dao-steps/ConfigureVoting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { InputGroup, Input, InputRightAddon, Text, VStack, Divider, FormControl, FormLabel, HStack, Tooltip, Slider, SliderTrack, SliderFilledTrack, SliderThumb } from "@chakra-ui/react";
import { InputGroup, Input, InputRightElement, Text, VStack, Divider, FormControl, FormLabel, HStack, Tooltip, Slider, SliderTrack, SliderFilledTrack, SliderThumb } from "@chakra-ui/react";
import { InfoOutlineIcon } from '@chakra-ui/icons';
import { newDaoVotingState } from "../../recoil";
import { useRecoilState } from "recoil";

function SliderControl({name, value, onChange, tooltip}: {name: string, tooltip: string, value: string, onChange: (value: string) => void }) {
function SliderControl({ name, value, onChange, tooltip }: { name: string, tooltip: string, value: string, onChange: (value: string) => void }) {
return (
<FormControl pt="34px" pb="32px">
<FormLabel>
Expand All @@ -29,18 +29,20 @@ function SliderControl({name, value, onChange, tooltip}: {name: string, tooltip:
</Slider>
<InputGroup width="20%" ml="10px">
<Input
min={0}
max={100}
value={value}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
type="number"
/>
<InputRightAddon children="%" />
<InputRightElement children="%" />
</InputGroup>
</HStack>
</FormControl>
)
}

export default function ConfigureVoting() {
export default function ConfigureVoting() {

const [votingSettings, setVotingSettings] = useRecoilState(newDaoVotingState);

Expand All @@ -55,8 +57,8 @@ export default function ConfigureVoting() {
margin="0 auto"
/>
<VStack width="90%">
<SliderControl name="SUPPORT" value={votingSettings.supportRequired} onChange={supportRequired => 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 => 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." />
<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">
<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.">
Expand All @@ -66,12 +68,12 @@ export default function ConfigureVoting() {
<HStack spacing={4}>
{['Days', 'Hours', 'Minutes'].map((key, index) => {
return (
<InputGroup key={index}>
<InputGroup key={index} variant="textRTL">
<Input
value={(votingSettings[`voteDuration${key}` as 'voteDurationDays' | 'voteDurationHours' | 'voteDurationMinutes'])}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setVotingSettings(settings => ({...settings, [`voteDuration${key}`]: e.target.value}))}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setVotingSettings(settings => ({ ...settings, [`voteDuration${key}`]: e.target.value }))}
/>
<InputRightAddon children={key} />
<InputRightElement children={key} />
</InputGroup>
)
})}
Expand Down
Loading