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

Work in progress swap front-end #13

Merged
merged 2 commits into from
Oct 5, 2023
Merged

Work in progress swap front-end #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
27fa07f
Created swap home
jorvixsky Oct 4, 2023
af517f2
Swap page work in progress
jorvixsky Oct 5, 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
107 changes: 101 additions & 6 deletions apps/web/src/presentation/components/swap/SimpleConvert.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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