Skip to content

Commit

Permalink
Merge pull request #13 from commons-stack/swap
Browse files Browse the repository at this point in the history 
Work in progress swap front-end
  • Loading branch information
@pinglu-pingu
pinglu-pingu authored Oct 5, 2023
2 parents 0e44ebc + af517f2 commit a5c7f2b
Show file tree
Hide file tree
Showing 4 changed files with 203 additions and 14 deletions.
107 changes: 101 additions & 6 deletions apps/web/src/presentation/components/swap/SimpleConvert.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,26 @@
import { collateral, bonded } from '../../../../config.json';
import { Button, Flex, Input, Text } from "@chakra-ui/react";
import { Button, Checkbox, Flex, Input, Text, Tooltip } from "@chakra-ui/react";
import { useEffect, useState } from "react";
import { useAccount } from "wagmi";
import { fetchBalance } from '@wagmi/core';
import { getCollateral } from '../../../../utils/getCollateral';
import { getBondingCurvePrice } from '../../../../utils/getBondingCurvePrice';
import { getTributePcts } from '../../../../utils/getTributePcts';
import { formatUnits, parseUnits } from 'viem';
import { formatEther, formatUnits, parseUnits } from 'viem';
import Transaction from '../TransactionModal';

import useProcessTransactions from '../../hooks/useProcessTransactions';
import useConvertSteps from '../../hooks/useConvertSteps';

export default function SimpleConvert() {
import { Image, VStack, HStack, Box, InputGroup } from "@chakra-ui/react";
import CustomInput from '../shared/CustomInput';
import CustomInputRightAddon from '../shared/CustomInputRightAddon';

interface SwapHomeProps {
dao: string;
}

export default function SimpleConvert({ dao }: SwapHomeProps) {

type Token = {
symbol: string,
Expand Down Expand Up @@ -84,7 +92,7 @@ export default function SimpleConvert() {
useEffect(() => {
(async () => {
const [, virtualBalance, virtualSupply, reserveRatio] = await getCollateral();

const [sellFeePct, buyFeePct] = await getTributePcts();

setCollateralData({ virtualBalance, virtualSupply, reserveRatio });
Expand All @@ -93,10 +101,10 @@ export default function SimpleConvert() {
})();
}, []);



// Calculate estimated return
const calculateEstimatedReturn = async(amount: string) => {
const calculateEstimatedReturn = async (amount: string) => {
const parsedAmount = parseFloat(amount);
if (!parsedAmount) {
setEstimatedReturn("0")
Expand Down Expand Up @@ -138,6 +146,93 @@ export default function SimpleConvert() {

const steps = useConvertSteps(toToken.symbol, fromTokenAmount, address, bonded as { symbol: string; contract: `0x${string}`; });

if (true) {
return (
<VStack bg="brand.100" pb="100px">
<VStack spacing={4}>
<Text color="brand.900" fontSize="24px" fontFamily="VictorSerifTrial">Your DAO</Text>
<InputGroup mt="24px">
<CustomInput
w="408px"
h="48px"
rightAddon={true}
placeholder="Type an organization name"
value={dao ?? ''}
disabled
/>
<CustomInputRightAddon h="48px">
<Image src="../../../../public/Check.svg" boxSize="24px" />
</CustomInputRightAddon>
</InputGroup>
</VStack>
<HStack w="949px" h="97px" borderRadius="16px" bgColor="brand.300" mt="32px">
<Box w="50%" ml="23px" border="1px solid" borderColor="brand.1000" bgColor="brand.1100" borderRadius="8px">
<Text p="12px">TOKEN PRICE INFO</Text>
</Box>
<Box w="25%" border="1px solid" borderColor="brand.1000" bgColor="brand.1100" borderRadius="8px">
<HStack p="12px" justifyContent="space-between">
<HStack>
<Text>Entry Tribute</Text>
<Tooltip>
<Image src="InformationIcon.svg"></Image>
</Tooltip>
</HStack>
<Text>0%</Text>
</HStack>
</Box>
<Box w="25%" mr="23px" border="1px solid" borderColor="brand.1000" bgColor="brand.1100" borderRadius="8px">
<HStack p="12px" justifyContent="space-between">
<HStack>
<Text>Exit Tribute</Text>
<Tooltip>
<Image src="InformationIcon.svg"></Image>
</Tooltip>
</HStack>
<Text>0%</Text>
</HStack>
</Box>
</HStack>
<VStack w="949px" h="446px" borderRadius="16px" bgColor="brand.300" mt="16px">
<HStack>
<Box w="452px" h="268px" mt="31px" ml="19px" bgColor="white" borderRadius="16px">
<Text mt="24px" ml="31px">You Send</Text>
<HStack w="106px" h="40px" ml="26px" mt="16px" border="1px solid black" borderRadius="30px" justifyContent="center">
<Image w="25px" h="25px" />
<Text color="brand.900">{fromToken.symbol}</Text>
</HStack>
<Input w="300px" ml="10px" mt="50px" fontSize="50px" border="none" placeholder='0'></Input>
<HStack ml="26px" mt="8px">
<Text fontSize="14px">Balance: {formatEther(bondedTokenBalance)}</Text>
<Text as="b" fontSize="14px">Max</Text>
</HStack>
</Box>
<Box w="452px" h="268px" mt="31px" mr="19px" bgColor="white" borderRadius="16px">
<Text mt="24px" mr="31px" textAlign="right">You Receive</Text>
<HStack w="106px" h="40px" mr="26px" mt="16px" border="1px solid black" borderRadius="30px" justifyContent="center" marginLeft="auto">
<Image w="25px" h="25px" />
<Text color="brand.900">{toToken.symbol}</Text>
</HStack>
<Flex direction="column" align="flex-end" mr="26px" mt="8px">
<Input w="300px" mt="50px" fontSize="50px" border="none" placeholder='0' textAlign="right" />
<HStack mt="8px">
<Text fontSize="14px">100$</Text>
</HStack>
</Flex>
</Box>
</HStack>

<Button w="912px" h="61px" borderRadius="8px">
<Text as="b" color="white">Convert</Text>
</Button>
<HStack>
<Checkbox />
<Text mt="26px" as="b">By clicking on “Convert” you are accepting these terms</Text>
</HStack>
</VStack>
</VStack>
)
}

return (
<>
<Flex height="100vh" direction="column">
Expand Down
74 changes: 74 additions & 0 deletions apps/web/src/presentation/components/swap/SwapHome.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { Divider, HStack, Text, VStack, Image, Button, InputGroup } from '@chakra-ui/react';
import { useState } from 'react';
import CustomInput from '../shared/CustomInput';
import CustomInputRightAddon from '../shared/CustomInputRightAddon';

interface SwapHomeProps {
onNextButtonClick: (clicked: boolean, dao: string) => void;
}

export default function SwapHome({onNextButtonClick}: SwapHomeProps) {

const [dao, setDao] = useState<string>("");
const [userInteracted, setUserInteracted] = useState<boolean>(false);
const [completed, setCompleted] = useState<boolean>(false);

const handleDaoChange = (dao: string) => {
setUserInteracted(true);
setDao(dao);
// Verify if the name is valid

setCompleted(true);
}

return (
<VStack bg="brand.100" pb="100px">
<VStack spacing={0}>
<Text color="brand.900" fontSize="72px" fontFamily="VictorSerifTrial">Welcome to ABC Swap</Text>
<Text color="brand.900" fontSize="24px" pt="32px">Lorem ipsum</Text>
<Text color="brand.900" fontSize="24px">sit amet.</Text>
<Divider paddingTop="48px"
borderColor="brand.900"
borderBottomWidth="1px"
width="100%"
margin="0 auto"
/>
</VStack>
<HStack spacing={20} paddingTop="40px" >
<HStack>
<Image src="../../..//public/launchpad/ContinuousFunding.svg" />
<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="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="20px">Sustainable growth</Text>
</HStack>
</HStack>
<VStack spacing={4} mt="100px" >
<Text color="brand.900" fontSize="40px" fontFamily="VictorSerifTrial">Select your DAO</Text>
<InputGroup mt="55px">
<CustomInput
w="408px"
rightAddon={true}
placeholder="Type an organization name"
value={dao ?? ''}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
handleDaoChange(e.target.value);
}}
/>
<CustomInputRightAddon>
{userInteracted ? (dao.length > 0 ? <Image src="../../../../public/Check.svg" boxSize="24px" /> : <Image src="../../../../public/Error.svg" boxSize="24px" />) : ""}
</CustomInputRightAddon>
</InputGroup>
<Button mt="40px" onClick={() => onNextButtonClick(true, dao)} disabled={!completed} w="310px">Next</Button>
</VStack>
</VStack>
)
}
34 changes: 26 additions & 8 deletions apps/web/src/presentation/pages/swap.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,30 @@
import { useState } from 'react'
import SimpleConvert from '../components/swap/SimpleConvert'
import SwapHome from '../components/swap/SwapHome';

function Swap() {
export default function Swap() {

return (
<>
<SimpleConvert />
</>
)
}
const [start, setStart] = useState(false);
const [selectedDao, setSelectedDao] = useState<string>("");

export default Swap
const handleNextButtonClick = (clicked: boolean, dao: string) => {
setStart(clicked);
setSelectedDao(dao);
};

console.log(selectedDao);

if(start) {
return (
<>
<SimpleConvert dao={selectedDao}/>
</>
)
} else {
return(
<>
<SwapHome onNextButtonClick={handleNextButtonClick} />
</>
)
}
}
2 changes: 2 additions & 0 deletions apps/web/src/presentation/theme/colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ const colors = {
300: "#E8E9E3", // CS Cream
500: "#00E046", // CS Chaman
900: "#003C00", // CS Wisdom
1000: "#4D4D4D", // CS Grey
1100: "#F4F4F4", // Light grey
1200: "#E33D19" // Error red
}
}
Expand Down

0 comments on commit a5c7f2b

Please sign in to comment.