diff --git a/src/app/page.tsx b/src/app/page.tsx index a15c9a6..ea2941b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -97,338 +97,358 @@ export default function Component() { ] return ( -
-
+ <> +
-
-
-

-
- - - - - - - Settings - -
-
- - setSlippageTolerance(parseFloat(e.target.value))} - className="bg-slate-800 border-slate-700 text-white" - /> -
-
- - setTransactionDeadline(parseInt(e.target.value))} - className="bg-slate-800 border-slate-700 text-white" - /> -
-
- - - -
-
- -
- -
- Pay -
- Balance: - 1,234.56 {inputToken.name} -
-
- -
- {percentageOptions.map(({ label, value }) => ( - - ))} -
- -
+
+
+
+

+
-
- - {inputToken.icon} -
- } - price={inputToken.price} - onClick={() => {}} - /> -
+ - Select a token + Settings -
- {tokens.map((token) => ( - - {token.icon} -
} - price={token.price} - onClick={() => setInputToken(token)} +
+
+ + setSlippageTolerance(parseFloat(e.target.value))} + className="bg-slate-800 border-slate-700 text-white" + /> +
+
+ + setTransactionDeadline(parseInt(e.target.value))} + className="bg-slate-800 border-slate-700 text-white" /> - ))} +
+
+
+
-
- handleInputChange(e.target.value)} - className="border-0 bg-transparent text-2xl text-white focus-visible:ring-0 focus-visible:ring-offset-0 text-right appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" - placeholder="0" - /> + +
+
- +
-
+
- - -
- - -
- Receive -
- Balance: - 5,678.90 {outputToken.name} +
+ Pay +
+ Balance: + 1,234.56 {inputToken.name} +
-
-
- - -
- - {outputToken.icon} -
- } - price={outputToken.price} - onClick={() => {}} - /> -
- - - - Select a token - -
- {tokens.map((token) => ( + +
+ {percentageOptions.map(({ label, value }) => ( + + ))} +
+ +
+ + +
- {token.icon} -
} - price={token.price} - onClick={() => setOutputToken(token)} + token={inputToken.name} + icon={ +
+ {inputToken.icon} +
+ } + price={inputToken.price} + onClick={() => {}} /> - ))} -
- - -
- +
+ + + + Select a token + +
+ {tokens.map((token) => ( + + {token.icon} +
} + price={token.price} + onClick={() => setInputToken(token)} + /> + ))} +
+ + +
+ handleInputChange(e.target.value)} + className="border-0 bg-transparent text-2xl text-white focus-visible:ring-0 focus-visible:ring-offset-0 text-right appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" + placeholder="0" + /> +
+ + +
+ + +
- -
- - - - Details - Route - - -
- Exchange Rate + +
+ Receive
- 1 {inputToken.name} = {(parseFloat(outputToken.price.slice(1)) / parseFloat(inputToken.price.slice(1))).toFixed(4)} {outputToken.name} - - - - - - -
-

Current market rate including:

-
    -
  • • Network fees
    • -
  • • Price impact
    • -
  • • DEX fees
    • -
-
- - - + Balance: + 5,678.90 {outputToken.name}
-
- Price Impact - -0.03% -
-
- Minimum Received - - {(parseFloat(outputAmount) * 0.995).toFixed(4)} {outputToken.name} - -
- - -
- Best route: {inputToken.name} → USDC → {outputToken.name} -
-
- Estimated Time - ~2 minutes +
+ + +
+ + {outputToken.icon} +
+ } + price={outputToken.price} + onClick={() => {}} + /> +
+ + + + Select a token + +
+ {tokens.map((token) => ( + + {token.icon} +
} + price={token.price} + onClick={() => setOutputToken(token)} + /> + ))} +
+ + +
+ +
- - - + +
- - - - - - - Confirming Swap - -
- {swapSteps.map((step, index) => ( -
-
- - {step.status === 'completed' ? ( - - ) : step.status === 'loading' ? ( - - ) : ( - {step.id} - )} - - {index < swapSteps.length - 1 && ( -
- )} -
-
-

{step.title}

-

- {step.status === 'completed' ? 'Transaction confirmed' : - step.status === 'loading' ? 'Waiting for confirmation...' : - 'Waiting to start'} -

+ + + + Details + Route + + +
+ Exchange Rate +
+ 1 {inputToken.name} = {(parseFloat(outputToken.price.slice(1)) / parseFloat(inputToken.price.slice(1))).toFixed(4)} {outputToken.name} + + + + + + +
+

Current market rate including:

+
    +
  • • Network fees
    • +
  • • Price impact
    • +
  • • DEX fees
    • +
+
+ + +
- ))} -
- - {swapSteps.every(step => step.status === 'completed') ? ( - - ) : ( - - )} - - -
+
+ Price Impact + -0.03% +
+
+ Minimum Received + + {(parseFloat(outputAmount) * 0.995).toFixed(4)} {outputToken.name} + +
+ + +
+ Best route: {inputToken.name} → USDC → {outputToken.name} +
+
+ Estimated Time + ~2 minutes +
+ + + + + + + + + + + Confirming Swap + +
+ {swapSteps.map((step, index) => ( +
+
+ + {step.status === 'completed' ? ( + + ) : step.status === 'loading' ? ( + + ) : ( + {step.id} + )} + + {index < swapSteps.length - 1 && ( +
+ )} +
+
+

{step.title}

+

+ {step.status === 'completed' ? 'Transaction confirmed' : + step.status === 'loading' ? 'Waiting for confirmation...' : + 'Waiting to start'} +

+
+
+ ))} +
+ + {swapSteps.every(step => step.status === 'completed') ? ( + + ) : ( + + )} + + +
+
-
+ ) } \ No newline at end of file