Merge pull request #8 from commons-stack/simple-ui

Removed hardcoded values from UI and other minor UI changes
commons-stack · Sep 28, 2023 · 51e6cfd · 51e6cfd
2 parents b17e348 + 545f306
commit 51e6cfd
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 71 deletions.
diff --git a/apps/web/src/data/DAOCreationWagmiLSRepository.ts b/apps/web/src/data/DAOCreationWagmiLSRepository.ts
@@ -154,6 +154,18 @@ export class DAOCreationWagmiLSRepository implements DAOCreationRepository {
             }
         }
     }
+
+    async getDAOCompatibleTokens(): Promise<TokenInfo[]> {
+        return [
+            new TokenInfo("Optimism", "OP", "0x00000", "/token-logos/optimism-ethereum-op-logo.svg"),
+            new TokenInfo("USDT", "USDT", "0x00000", "../"),
+            new TokenInfo("DAI", "DAI", "0x00000", "../"),
+            new TokenInfo("USDC", "USDC", "0x00000", "../"),
+            new TokenInfo("GNO", "GNO", "0x00000", "../"),
+            new TokenInfo("GIV", "GIV", "0x00000", "../"),
+        ];
+    }
+
 }
 
 
diff --git a/apps/web/src/domain/model/TokenInfo.ts b/apps/web/src/domain/model/TokenInfo.ts
@@ -2,11 +2,13 @@ export class TokenInfo {
     tokenName: string|undefined;
     tokenSymbol: string|undefined;
     tokenAddress: string|undefined;
+    tokenLogo: string|undefined;
 
-    constructor(tokenName?: string, tokenSymbol?: string, tokenAddress?: string) {
+    constructor(tokenName?: string, tokenSymbol?: string, tokenAddress?: string, tokenLogo?: string) {
         this.tokenName = tokenName;
         this.tokenSymbol = tokenSymbol;
         this.tokenAddress = tokenAddress;
+        this.tokenLogo = tokenLogo;
     }
 
     // setting values
@@ -22,7 +24,6 @@ export class TokenInfo {
         this.tokenAddress = value;
     }
 
-
     // getting values
 
     getTokenName(): string|undefined {
@@ -37,4 +38,8 @@ export class TokenInfo {
         return this.tokenAddress;
     }
 
+    getTokenLogo(): string|undefined {
+        return this.tokenLogo;
+    }
+
 }
diff --git a/apps/web/src/domain/repository/DAOCreationRepository.ts b/apps/web/src/domain/repository/DAOCreationRepository.ts
@@ -1,6 +1,7 @@
 import { DAOCreationResult } from "../model/DAOCreationResult";
 import { DAOInfoStatus } from "../enum/DAOInfoStatus";
 import { DAOInfo } from "../model/DAOInfo";
+import { TokenInfo } from "../model/TokenInfo";
 
 
 export interface DAOCreationRepository {
@@ -19,4 +20,7 @@ export interface DAOCreationRepository {
     // create DAO
     isDAOInfoValid(daoInfo: DAOInfo) : DAOInfoStatus;
     createDAO() : Promise<DAOCreationResult>;
+
+    // Obtain compatible reserve tokens
+    getDAOCompatibleTokens(): Promise<TokenInfo[]>; // 
 }
diff --git a/apps/web/src/presentation/components/launchpad/abc/ABCSettingsModelController.ts b/apps/web/src/presentation/components/launchpad/abc/ABCSettingsModelController.ts
@@ -6,97 +6,94 @@ import { TokenInfo } from "../../../../domain/model/TokenInfo";
 
 export function useABCSettingsModelController(daoCreationRepository: DAOCreationRepository) {
     const [augmentedBondingCurveSettings, setAugmentedBondingCurveSettings] = useState<ABCConfig>(new ABCConfig(
-        daoCreationRepository.getDAOInfo().getABCConfig().reserveRatio??0,
-        daoCreationRepository.getDAOInfo().getABCConfig().getReserveInitialBalance()??0,
-        daoCreationRepository.getDAOInfo().getABCConfig().entryTribute??0,
-        daoCreationRepository.getDAOInfo().getABCConfig().exitTribute??0,
-        new TokenInfo(daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenAddress??'', daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenSymbol??''),
+        daoCreationRepository.getDAOInfo().getABCConfig().reserveRatio ?? 0,
+        daoCreationRepository.getDAOInfo().getABCConfig().getReserveInitialBalance() ?? 0,
+        daoCreationRepository.getDAOInfo().getABCConfig().entryTribute ?? 0,
+        daoCreationRepository.getDAOInfo().getABCConfig().exitTribute ?? 0,
+        new TokenInfo(daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenAddress ?? '', daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenSymbol ?? ''),
     ));
 
-    const collateralTokenList = [
-        { address: "0x00000", symbol: "OP", logo: "/token-logos/optimism-ethereum-op-logo.svg" },
-        { address: "0x00000", symbol: "USDT", logo: "../"},
-        { address: "0x00000", symbol: "DAI", logo: "../"},
-        { address: "0x00000", symbol: "USDC", logo: "../" }, 
-        { address: "0x00000", symbol: "GNO", logo: "../" },
-        { address: "0x00000", symbol: "GIV", logo: "../" },
-    ];
+    const [collateralTokenList, setCollateralTokenList] = useState<TokenInfo[]>([]);
 
     useEffect(() => {
         async function init() {
-          await daoCreationRepository.loadDAOInfo();
-          setAugmentedBondingCurveSettings(new ABCConfig(
-            daoCreationRepository.getDAOInfo().getABCConfig().reserveRatio??0,
-            daoCreationRepository.getDAOInfo().getABCConfig().getReserveInitialBalance()??0,
-            daoCreationRepository.getDAOInfo().getABCConfig().entryTribute??0,
-            daoCreationRepository.getDAOInfo().getABCConfig().exitTribute??0,
-            new TokenInfo(daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenAddress??'', daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenSymbol??''),
-        ));
+            await daoCreationRepository.loadDAOInfo();
+            setAugmentedBondingCurveSettings(new ABCConfig(
+                daoCreationRepository.getDAOInfo().getABCConfig().reserveRatio ?? 0,
+                daoCreationRepository.getDAOInfo().getABCConfig().getReserveInitialBalance() ?? 0,
+                daoCreationRepository.getDAOInfo().getABCConfig().entryTribute ?? 0,
+                daoCreationRepository.getDAOInfo().getABCConfig().exitTribute ?? 0,
+                new TokenInfo(daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenAddress ?? '', daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenSymbol ?? ''),
+            ));
+            await daoCreationRepository.getDAOCompatibleTokens().then((tokens) => {
+                setCollateralTokenList(tokens);
+            });
         }
         init();
-      }, []);
+    }, []);
+
 
     const handleReserveRatioChange = (value: string) => {
         const re = /[^0-9]+/g;
         const numericValue = Number(value.replaceAll(re, ''));
         const updatedSettings = new ABCConfig(
             numericValue,
-            daoCreationRepository.getDAOInfo().getABCConfig().getReserveInitialBalance()??0,
-            daoCreationRepository.getDAOInfo().getABCConfig().entryTribute??0,
-            daoCreationRepository.getDAOInfo().getABCConfig().exitTribute??0,
-            new TokenInfo(daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenAddress??'', daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenSymbol??''),
+            daoCreationRepository.getDAOInfo().getABCConfig().getReserveInitialBalance() ?? 0,
+            daoCreationRepository.getDAOInfo().getABCConfig().entryTribute ?? 0,
+            daoCreationRepository.getDAOInfo().getABCConfig().exitTribute ?? 0,
+            new TokenInfo(daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenAddress ?? '', daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenSymbol ?? ''),
         );
         setAugmentedBondingCurveSettings(updatedSettings);
         setABCConfig(updatedSettings, daoCreationRepository);
     };
 
     const handleCollateralTokenChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-        const selectedToken = collateralTokenList.find(token => token.symbol === event.target.value);
+        const selectedToken = collateralTokenList.find(token => token.tokenSymbol === event.target.value);
         if (selectedToken) {
             const updatedSettings = new ABCConfig(
-                daoCreationRepository.getDAOInfo().getABCConfig().reserveRatio??0,
-                daoCreationRepository.getDAOInfo().getABCConfig().getReserveInitialBalance()??0,
-                daoCreationRepository.getDAOInfo().getABCConfig().entryTribute??0,
-                daoCreationRepository.getDAOInfo().getABCConfig().exitTribute??0,
-                new TokenInfo(selectedToken.address, selectedToken.symbol),
+                daoCreationRepository.getDAOInfo().getABCConfig().reserveRatio ?? 0,
+                daoCreationRepository.getDAOInfo().getABCConfig().getReserveInitialBalance() ?? 0,
+                daoCreationRepository.getDAOInfo().getABCConfig().entryTribute ?? 0,
+                daoCreationRepository.getDAOInfo().getABCConfig().exitTribute ?? 0,
+                new TokenInfo(selectedToken.tokenAddress, selectedToken.tokenSymbol),
             );
-            
+
             setAugmentedBondingCurveSettings(updatedSettings);
             setABCConfig(updatedSettings, daoCreationRepository);
         }
     };
 
     const handleInitialReserveChange = (value: number) => {
         const updatedSettings = new ABCConfig(
-            daoCreationRepository.getDAOInfo().getABCConfig().reserveRatio??0,
+            daoCreationRepository.getDAOInfo().getABCConfig().reserveRatio ?? 0,
             value,
-            daoCreationRepository.getDAOInfo().getABCConfig().entryTribute??0,
-            daoCreationRepository.getDAOInfo().getABCConfig().exitTribute??0,
-            new TokenInfo(daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenAddress??'', daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenSymbol??''),
+            daoCreationRepository.getDAOInfo().getABCConfig().entryTribute ?? 0,
+            daoCreationRepository.getDAOInfo().getABCConfig().exitTribute ?? 0,
+            new TokenInfo(daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenAddress ?? '', daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenSymbol ?? ''),
         );
         setAugmentedBondingCurveSettings(updatedSettings);
         setABCConfig(updatedSettings, daoCreationRepository);
     };
 
     const handleEntryTributeChange = (value: number) => {
         const updatedSettings = new ABCConfig(
-            daoCreationRepository.getDAOInfo().getABCConfig().reserveRatio??0,
-            daoCreationRepository.getDAOInfo().getABCConfig().getReserveInitialBalance()??0,
+            daoCreationRepository.getDAOInfo().getABCConfig().reserveRatio ?? 0,
+            daoCreationRepository.getDAOInfo().getABCConfig().getReserveInitialBalance() ?? 0,
             value,
-            daoCreationRepository.getDAOInfo().getABCConfig().exitTribute??0,
-            new TokenInfo(daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenAddress??'', daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenSymbol??''),
+            daoCreationRepository.getDAOInfo().getABCConfig().exitTribute ?? 0,
+            new TokenInfo(daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenAddress ?? '', daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenSymbol ?? ''),
         );
         setAugmentedBondingCurveSettings(updatedSettings);
         setABCConfig(updatedSettings, daoCreationRepository);
     };
 
     const handleExitTributeChange = (value: number) => {
         const updatedSettings = new ABCConfig(
-            daoCreationRepository.getDAOInfo().getABCConfig().reserveRatio??0,
-            daoCreationRepository.getDAOInfo().getABCConfig().getReserveInitialBalance()??0,
-            daoCreationRepository.getDAOInfo().getABCConfig().entryTribute??0,
+            daoCreationRepository.getDAOInfo().getABCConfig().reserveRatio ?? 0,
+            daoCreationRepository.getDAOInfo().getABCConfig().getReserveInitialBalance() ?? 0,
+            daoCreationRepository.getDAOInfo().getABCConfig().entryTribute ?? 0,
             value,
-            new TokenInfo(daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenAddress??'', daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenSymbol??''),
+            new TokenInfo(daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenAddress ?? '', daoCreationRepository.getDAOInfo().getABCConfig().collateralToken?.tokenSymbol ?? ''),
         );
         setAugmentedBondingCurveSettings(updatedSettings);
         setABCConfig(updatedSettings, daoCreationRepository);

diff --git a/apps/web/src/presentation/components/launchpad/abc/AugmentedBondingCurveSettings.tsx b/apps/web/src/presentation/components/launchpad/abc/AugmentedBondingCurveSettings.tsx
@@ -90,10 +90,10 @@ export default function AugmentedBondingCurveSettings({ onStepCompletionChanged
                             <Flex>
                                 <Select placeholder="Select option" borderRight="1px solid" borderColor="brand.900" borderRadius="0" borderTopLeftRadius="15px" borderBottomLeftRadius="15px" value={augmentedBondingCurveSettings.getCollateralToken()?.getTokenSymbol() || ''} onChange={handleCollateralTokenChange}>
                                     {collateralTokenList.map((token) => (
-                                        <option key={token.address} value={token.symbol}>
+                                        <option key={token.tokenAddress} value={token.tokenSymbol}>
                                             <HStack>
-                                                <Image src={token.logo} boxSize="24px" />
-                                                <Text>{token.symbol}</Text>
+                                                <Image src={token.tokenLogo} boxSize="24px" />
+                                                <Text>{token.tokenSymbol}</Text>
                                             </HStack>
                                         </option>
                                     ))}

diff --git a/apps/web/src/presentation/pages/launchpad.css b/apps/web/src/presentation/pages/launchpad.css
@@ -1,7 +1,7 @@
 .option-box {
-    padding: 96px 74px 38px 74px;
+    padding: 46px 122px 44px 122px;
     background-color: white;
-    border-radius: 8px;
+    border-radius: 30px;
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.00);
 }
 

diff --git a/apps/web/src/presentation/pages/launchpad.tsx b/apps/web/src/presentation/pages/launchpad.tsx
@@ -14,9 +14,9 @@ export default function Launchpad() {
     return (
         <VStack bg="brand.100" pb="100px">
             <VStack spacing={0}>
-                <Text color="brand.900" fontSize="72px" fontFamily="VictorSerifTrial">Welcome to ABC Launchpad!</Text>
-                <Text color="brand.900" fontSize="24px" pt="32px">Let's start creating your DAO with Augmented</Text>
-                <Text color="brand.900" fontSize="24px">Bonding Curve</Text>
+                <Text color="brand.900" fontSize="72px" fontFamily="VictorSerifTrial">The ABC Launchpad!</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"
                     borderColor="brand.900"
                     borderBottomWidth="1px"
@@ -27,26 +27,26 @@ export default function Launchpad() {
             <HStack spacing={20} paddingTop="40px" >
                 <HStack>
                     <Image src="../../..//public/launchpad/ContinuousFunding.svg" />
-                    <Text color="brand.900" fontSize="18px">Continuous funding</Text>
+                    <Text color="brand.900" fontSize="20px" fontWeight="500">Continuous funding</Text>
                 </HStack>
                 <HStack>
                     <Image src="../../..//public/launchpad/MarketAccessibility.svg" />
                     <VStack spacing={0}>
-                        <Text color="brand.900" fontSize="18px">Market accessibility</Text>
-                        <Text color="brand.900" fontSize="18px">& lower volatility</Text>
+                        <Text color="brand.900" fontSize="20px">Market accessibility</Text>
+                        <Text color="brand.900" fontSize="20px">& lower volatility</Text>
                     </VStack>
                 </HStack>
                 <HStack>
                     <Image src="../../..//public/launchpad/SustainableGrowth.svg" />
-                    <Text color="brand.900" fontSize="18px">Sustainable growth</Text>
+                    <Text color="brand.900" fontSize="20px">Sustainable growth</Text>
                 </HStack>
             </HStack>
-            <HStack spacing={16} pt="50px">
-                <VStack className="option-box" bgColor="white" spacing={0}>
-                    <Text color="brand.900" fontSize="40px" fontFamily="VictorSerifTrial">Create a new DAO</Text>
-                    <Text color="brand.900" fontSize="20px" mt="34px">I want to create a new DAO with an</Text>
-                    <Text color="brand.900" fontSize="20px">Augmented Bonding Curve</Text>
-                    <Button mt="34px" onClick={handleCreateNewDAOButton}>Create new DAO <ArrowForwardIcon ml="5px" /></Button>
+            <HStack spacing={16} pt="46px">
+                <VStack className="option-box" bgColor="brand.300" spacing={0}>
+                    <Text color="brand.900" fontSize="40px" fontFamily="VictorSerifTrial">New DAO</Text>
+                    <Text color="brand.900" fontSize="20px" mt="34px">I want to create a new</Text>
+                    <Text color="brand.900" fontSize="20px">DAO and launch an ABC.</Text>
+                    <Button mt="29px" onClick={handleCreateNewDAOButton}>Launch on a new DAO <ArrowForwardIcon ml="5px" /></Button>
                 </VStack>
             </HStack>
         </VStack>

diff --git a/apps/web/src/presentation/pages/new-dao.tsx b/apps/web/src/presentation/pages/new-dao.tsx
@@ -153,15 +153,14 @@ export default function NewDao({daoCreationRepository} : NewDaoProps) {
             <>
                 <Box bg="brand.100">
                     <VStack spacing={0} pb="117px">
-                        <Text fontSize="72px" color="brand.900" fontFamily="VictorSerifTrial">Create your DAO</Text>
-                        <Text fontSize="24px" color="brand.900">Connect your wallet to start creating your DAO</Text>
-                        <Text fontSize="24px" color="brand.900">with Augmented Bonding Curve</Text>
-                        <Text fontSize="24px" color="brand.900" pt="64px" as="b">It is simple, you just have to follow the following steps</Text>
+                        <Text fontSize="72px" color="brand.900" fontFamily="VictorSerifTrial">Create a new DAO and</Text>
+                        <Text fontSize="72px" color="brand.900" fontFamily="VictorSerifTrial">launch your ABC</Text>
+                        <Text fontSize="24px" color="brand.900">... in just a few steps</Text>
                         <HStack pb="32px" pt="56px" spacing={24}>
                             <VStack spacing={0}>
                                 <Image src="../../..//public/launchpad/DAOName.svg" pb="16px" />
-                                <Text fontSize="24px" color="brand.900">Choose</Text>
-                                <Text fontSize="24px" color="brand.900">DAO name</Text>
+                                <Text fontSize="24px" color="brand.900">Name your</Text>
+                                <Text fontSize="24px" color="brand.900">DAO</Text>
                             </VStack>
                             <VStack spacing={0}>
                                 <Image src="../../..//public/launchpad/ConfigureVoting.svg" pb="16px" />

diff --git a/bun.lockb b/bun.lockb