Skip to content

Commit

Permalink
enhancements
Browse files Browse the repository at this point in the history
  • Loading branch information
@muddlebee
muddlebee committed Nov 13, 2024
1 parent c485ea3 commit 9898dca
Showing 1 changed file with 69 additions and 58 deletions.
127 changes: 69 additions & 58 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,52 +10,71 @@ import {
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import { Settings, Clock, ArrowRight, ArrowDownToLine, Wallet } from 'lucide-react'

import { Settings, Clock, ArrowRight, DollarSign, Wallet } from 'lucide-react'

interface TokenButtonProps {
token: string;
icon: React.ReactNode;
onClick: () => void;
price?: string; // Add price prop
}

const TokenButton = ({ token, icon, onClick }: TokenButtonProps) => (
<button
onClick={onClick}
className="flex items-center gap-2 px-3 py-2 rounded-xl bg-slate-900/90 hover:bg-slate-800/90 transition-colors"
className="flex items-center gap-2 px-3 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 transition-colors w-full"
>
<div className="w-6 h-6 rounded-full overflow-hidden flex items-center justify-center">
<div className="w-8 h-8 rounded-full overflow-hidden flex items-center justify-center">
{icon}
</div>
<span className="font-medium text-white">{token}</span>
<ArrowRight className="w-4 h-4 text-slate-400" />
<div className="flex flex-col items-start">
<span className="font-medium text-white">{token}</span>
</div>
<ArrowRight className="w-4 h-4 text-slate-400 ml-auto" />
</button>
)

export default function Component() {
const [walletConnected, setWalletConnected] = useState(false)
const [inputToken, setInputToken] = useState({ name: 'DOT', icon: '●', price: '$2.00' })
const [outputToken, setOutputToken] = useState({ name: 'ETH', icon: 'Ξ', price: '$2000' })
const [inputAmount, setInputAmount] = useState('50')
const [outputAmount, setOutputAmount] = useState('100')
const [slippageTolerance, setSlippageTolerance] = useState(0.5)
const [transactionDeadline, setTransactionDeadline] = useState(20)
const [isConnected, setIsConnected] = useState(false)
const [walletAddress, setWalletAddress] = useState('')

const handleInputChange = (value: string) => {
setInputAmount(value)
setOutputAmount((parseFloat(value) * 2).toString())
}

const handleWalletConnect = () => {
setIsConnected(!isConnected)
setWalletAddress(isConnected ? '' : '0x1234...5678')
}

const tokens = [
{ name: 'DOT', icon: '●', price: '$2.00' },
{ name: 'ETH', icon: 'Ξ', price: '$2000' },
{ name: 'BTC', icon: '₿', price: '$30000' },
]

return (
<div className="min-h-screen w-full bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-slate-900 via-cyan-900 to-slate-900 flex flex-col items-center justify-center p-4">
<div className="absolute top-4 right-4 flex items-center gap-2">
<div className="fixed top-4 right-4">
<Button
onClick={handleWalletConnect}
variant="outline"
className="bg-slate-900/90 border border-slate-800/50 text-white hover:bg-slate-800/90 transition-colors"
onClick={() => setWalletConnected(!walletConnected)}
className="flex items-center gap-2 bg-slate-900/90 border-slate-800/50 hover:bg-slate-800 text-white"
>
<Wallet className="mr-2 h-4 w-4" />
{walletConnected ? '0x...abc' : 'Connect Wallet'}
<Wallet className="w-4 h-4" />
<span className="hidden sm:inline">
{isConnected ? walletAddress : 'Connect Wallet'}
</span>
</Button>
</div>

<div className="w-full max-w-md space-y-8">
<div className="flex justify-between items-center px-1">
<h1 className="text-xl font-medium text-white">Swap</h1>
Expand Down Expand Up @@ -102,20 +121,21 @@ export default function Component() {
<div className="p-4 rounded-2xl bg-slate-900/90 backdrop-blur-sm border border-slate-800/50">
<div className="flex justify-between items-center mb-3">
<span className="text-sm text-slate-400">Pay</span>
<span className="text-sm text-slate-400">$2.000</span>
<span className="text-sm font-medium text-white bg-slate-800 px-2 py-1 rounded-full">
${(parseFloat(inputAmount) * parseFloat(inputToken.price.slice(1))).toFixed(3)}
</span>
</div>
<div className="flex items-center gap-4">
<Dialog>
<DialogTrigger asChild>
<div>
<div className="flex-shrink-0">
<TokenButton
token="DOT"
token={inputToken.name}
icon={
<div className="w-full h-full bg-pink-500 rounded-full flex items-center justify-center">
<span className="text-white text-xs">●</span>
<span className="text-white text-xs">{inputToken.icon}</span>
</div>
}
price="$2.00"
onClick={() => {}}
/>
</div>
Expand All @@ -125,22 +145,16 @@ export default function Component() {
<DialogTitle className="text-white">Select a token</DialogTitle>
</DialogHeader>
<div className="grid gap-2 py-4">
<TokenButton
token="DOT"
icon={<div className="w-full h-full bg-pink-500 rounded-full flex items-center justify-center">
<span className="text-white text-xs">●</span>
</div>}
price="$2.00"
onClick={() => setInputToken('DOT')}
/>
<TokenButton
token="ETH"
icon={<div className="w-full h-full bg-blue-500 rounded-full flex items-center justify-center">
<span className="text-white text-xs">Ξ</span>
</div>}
price="$2000"
onClick={() => setInputToken('ETH')}
/>
{tokens.map((token) => (
<TokenButton
key={token.name}
token={token.name}
icon={<div className={`w-full h-full ${token.name === 'DOT' ? 'bg-pink-500' : token.name === 'ETH' ? 'bg-blue-500' : 'bg-orange-500'} rounded-full flex items-center justify-center`}>
<span className="text-white text-xs">{token.icon}</span>
</div>}
onClick={() => setInputToken(token)}
/>
))}
</div>
</DialogContent>
</Dialog>
Expand All @@ -153,35 +167,37 @@ export default function Component() {
placeholder="0"
/>
<div className="text-right">
<span className="text-sm text-slate-400">Balance: 100</span>
<span className="text-sm text-slate-400">$100 </span>
</div>
</div>
</div>
</div>

<div className="flex justify-center -my-2 relative z-10">
<div className="p-2 rounded-lg bg-slate-800/90 backdrop-blur-sm border border-slate-700/50">
<DollarSign className="w-4 h-4 text-slate-400" />
<ArrowDownToLine className="w-4 h-4 text-slate-400" />
</div>
</div>

<div className="p-4 rounded-2xl bg-slate-900/90 backdrop-blur-sm border border-slate-800/50">
<div className="flex justify-between items-center mb-3">
<span className="text-sm text-slate-400">Receive</span>
<span className="text-sm text-slate-400">$2.000</span>
<span className="text-sm font-medium text-white bg-slate-800 px-2 py-1 rounded-full">
${(parseFloat(outputAmount) * parseFloat(outputToken.price.slice(1))).toFixed(3)}
</span>
</div>
<div className="flex items-center gap-4">
<Dialog>
<DialogTrigger asChild>
<div>
<div className="flex-shrink-0">
<TokenButton
token="ETH"
token={outputToken.name}
icon={
<div className="w-full h-full bg-blue-500 rounded-full flex items-center justify-center">
<span className="text-white text-xs">Ξ</span>
<span className="text-white text-xs">{outputToken.icon}</span>
</div>
}
price="$2000"
price={outputToken.price}
onClick={() => {}}
/>
</div>
Expand All @@ -191,22 +207,17 @@ export default function Component() {
<DialogTitle className="text-white">Select a token</DialogTitle>
</DialogHeader>
<div className="grid gap-2 py-4">
<TokenButton
token="DOT"
icon={<div className="w-full h-full bg-pink-500 rounded-full flex items-center justify-center">
<span className="text-white text-xs">●</span>
</div>}
price="$2.00"
onClick={() => setOutputToken('DOT')}
/>
<TokenButton
token="ETH"
icon={<div className="w-full h-full bg-blue-500 rounded-full flex items-center justify-center">
<span className="text-white text-xs">Ξ</span>
</div>}
price="$2000"
onClick={() => setOutputToken('ETH')}
/>
{tokens.map((token) => (
<TokenButton
key={token.name}
token={token.name}
icon={<div className={`w-full h-full ${token.name === 'DOT' ? 'bg-pink-500' : token.name === 'ETH' ? 'bg-blue-500' : 'bg-orange-500'} rounded-full flex items-center justify-center`}>
<span className="text-white text-xs">{token.icon}</span>
</div>}
price={token.price}
onClick={() => setOutputToken(token)}
/>
))}
</div>
</DialogContent>
</Dialog>
Expand All @@ -219,7 +230,7 @@ export default function Component() {
placeholder="0"
/>
<div className="text-right">
<span className="text-sm text-slate-400">Balance: 100</span>
<span className="text-sm text-slate-400">$100</span>
</div>
</div>
</div>
Expand All @@ -228,7 +239,7 @@ export default function Component() {

<div className="px-3">
<div className="flex items-center justify-between text-sm text-slate-400">
<span>1 DOT = 2 ETH ($2,456.00)</span>
<span>1 {inputToken.name} = {(parseFloat(outputToken.price.slice(1)) / parseFloat(inputToken.price.slice(1))).toFixed(4)} {outputToken.name} (${outputToken.price.slice(1)})</span>
<div className="flex items-center gap-1">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.2 4L4 7.2M4 7.2L7.2 10.4M4 7.2H12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
Expand Down

0 comments on commit 9898dca

Please sign in to comment.