diff --git a/src/app/page.tsx b/src/app/page.tsx index f13748c..42f222d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -112,322 +112,326 @@ export default function Component() {
-
-

-
- - - - - - - 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-3xl text-white placeholder:text-slate-500 focus-visible:ring-0 focus-visible:ring-offset-0 text-right" - placeholder="0" - /> -
+
- - -
- - -
- -
- Receive -
- Balance: - 5,678.90 {outputToken.name} -
-
-
- - -
- - {outputToken.icon} -
- } - price={outputToken.price} - onClick={() => {}} - /> +
+
+ +
+ Pay +
+ Balance: + 1,234.56 {inputToken.name}
- - - - Select a token - -
- {tokens.map((token) => ( - - {token.icon} -
} - price={token.price} - onClick={() => setOutputToken(token)} - /> - ))} +
+ +
+ {percentageOptions.map(({ label, value }) => ( + + ))} +
+ +
+ + +
+ + {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-3xl text-white placeholder:text-slate-500 focus-visible:ring-0 focus-visible:ring-offset-0 text-right" + placeholder="0" + />
- - -
- -
-
- -
- - - - - 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
    • -
-
- - -
+ + +
+ + +
-
- 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 && ( -
- )} + +
+ Receive +
+ Balance: + 5,678.90 {outputToken.name}
+
+
+ + +
+ + {outputToken.icon} +
+ } + price={outputToken.price} + onClick={() => {}} + /> +
+ + + + Select a token + +
+ {tokens.map((token) => ( + + {token.icon} +
} + price={token.price} + onClick={() => setOutputToken(token)} + /> + ))} +
+ +
-

{step.title}

-

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

+
- ))} +
- - {swapSteps.every(step => step.status === 'completed') ? ( - - ) : ( - - )} - - - + + + + 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') ? ( + + ) : ( + + )} + + + +
+
)