diff --git a/apps/web/src/presentation/components/swap/SimpleConvert.tsx b/apps/web/src/presentation/components/swap/SimpleConvert.tsx
index 8307626..77f0063 100644
--- a/apps/web/src/presentation/components/swap/SimpleConvert.tsx
+++ b/apps/web/src/presentation/components/swap/SimpleConvert.tsx
@@ -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,
@@ -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 });
@@ -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")
@@ -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 (
+
+
+ Your DAO
+
+
+
+
+
+
+
+
+
+ TOKEN PRICE INFO
+
+
+
+
+ Entry Tribute
+
+
+
+
+ 0%
+
+
+
+
+
+ Exit Tribute
+
+
+
+
+ 0%
+
+
+
+
+
+
+ You Send
+
+
+ {fromToken.symbol}
+
+
+
+ Balance: {formatEther(bondedTokenBalance)}
+ Max
+
+
+
+ You Receive
+
+
+ {toToken.symbol}
+
+
+
+
+ 100$
+
+
+
+
+
+
+
+
+ By clicking on “Convert” you are accepting these terms
+
+
+
+ )
+ }
+
return (
<>
diff --git a/apps/web/src/presentation/components/swap/SwapHome.tsx b/apps/web/src/presentation/components/swap/SwapHome.tsx
new file mode 100644
index 0000000..53b117f
--- /dev/null
+++ b/apps/web/src/presentation/components/swap/SwapHome.tsx
@@ -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("");
+ const [userInteracted, setUserInteracted] = useState(false);
+ const [completed, setCompleted] = useState(false);
+
+ const handleDaoChange = (dao: string) => {
+ setUserInteracted(true);
+ setDao(dao);
+ // Verify if the name is valid
+
+ setCompleted(true);
+ }
+
+ return (
+
+
+ Welcome to ABC Swap
+ Lorem ipsum
+ sit amet.
+
+
+
+
+
+ Continuous funding
+
+
+
+
+ Market accessibility
+ & lower volatility
+
+
+
+
+ Sustainable growth
+
+
+
+ Select your DAO
+
+ ) => {
+ handleDaoChange(e.target.value);
+ }}
+ />
+
+ {userInteracted ? (dao.length > 0 ? : ) : ""}
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/web/src/presentation/pages/swap.tsx b/apps/web/src/presentation/pages/swap.tsx
index 7708e59..3fac67b 100644
--- a/apps/web/src/presentation/pages/swap.tsx
+++ b/apps/web/src/presentation/pages/swap.tsx
@@ -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 (
- <>
-
-
- )
-}
+ const [start, setStart] = useState(false);
+ const [selectedDao, setSelectedDao] = useState("");
-export default Swap
+ const handleNextButtonClick = (clicked: boolean, dao: string) => {
+ setStart(clicked);
+ setSelectedDao(dao);
+ };
+
+ console.log(selectedDao);
+
+ if(start) {
+ return (
+ <>
+
+
+ )
+ } else {
+ return(
+ <>
+
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/apps/web/src/presentation/theme/colors.ts b/apps/web/src/presentation/theme/colors.ts
index de1b5a2..386d284 100644
--- a/apps/web/src/presentation/theme/colors.ts
+++ b/apps/web/src/presentation/theme/colors.ts
@@ -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
}
}