Merge pull request code100x#218 from anshuman008/send-tokens-interface

Send tokens interface
pantha704 · Oct 8, 2024 · 67fb783 · 67fb783
2 parents 9012952 + 774780c
commit 67fb783
Show file tree

Hide file tree

Showing 8 changed files with 361 additions and 21,110 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/WalletPage/Send/LinkTransfer.tsx b/src/components/WalletPage/Send/LinkTransfer.tsx
@@ -0,0 +1,165 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { ArrowLeft, RefreshCw } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import Image from "next/image"
+import solIcon from "@/components/icons/solana.png"
+import { IoMdArrowBack } from "react-icons/io"
+
+export default function LinkTransfer({ setType }: { setType: () => void }) {
+  const [amount, setAmount] = useState("0")
+  const [asset, setAsset] = useState("SOL")
+  const [isUSD, setIsUSD] = useState(true)
+  const [solPrice, setSolPrice] = useState(0)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchSolPrice = async () => {
+      try {
+        const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=solana&vs_currencies=usd')
+        if (!response.ok) {
+          throw new Error('Failed to fetch SOL price')
+        }
+        const data = await response.json()
+        setSolPrice(data.solana.usd)
+        setIsLoading(false)
+      } catch (err) {
+        setError('Failed to fetch SOL price. Please try again later.')
+        setIsLoading(false)
+      }
+    }
+
+    fetchSolPrice()
+  }, [])
+
+  const handleCreateLink = () => {
+    console.log(`Creating link for ${amount} ${isUSD ? 'USD' : asset}`)
+  }
+
+  const toggleCurrency = () => {
+
+    if (!amount) {
+      setAmount('0');
+      return;
+    }
+
+    setIsUSD(!isUSD)
+    if (isUSD) {
+      setAmount((parseFloat(amount) / solPrice).toFixed(4))
+    } else {
+      setAmount((parseFloat(amount) * solPrice).toFixed(2))
+    }
+  }
+
+  const getEquivalentAmount = () => {
+
+    if (!amount) {
+      return `~$0.00`
+    }
+
+    if (isUSD) {
+      return `~${(parseFloat(amount) / solPrice).toFixed(4)} ${asset}`
+    } else {
+      return `~$${(parseFloat(amount) * solPrice).toFixed(2)} USD`
+    }
+  }
+
+  const quickSelectAmounts = isUSD ? ["1", "2", "5"] : ["0.01", "0.02", "0.05"]
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  // if (error) {
+  //   return <div>{error}</div>
+  // }
+
+  return (
+    <Card className="w-full mx-auto border-none shadow-none ">
+      <CardHeader>
+        <span
+          className="cursor-pointer text-gray-600 flex gap-x-2 items-center"
+          onClick={setType}
+        >
+          <IoMdArrowBack />
+          Back
+        </span>
+        <CardTitle className="text-2xl font-bold mt-4">Create & Send</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">
+            Specify asset and amount to send (taken from your wallet balance):
+          </p>
+          <Select onValueChange={setAsset} defaultValue={asset}>
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Select asset" />
+            </SelectTrigger>
+            <SelectContent className="bg-white">
+              <SelectItem value="SOL" className="">
+                <div className="flex items-center gap-x-2">
+                  <Image src={solIcon} height={30} width={30} alt="sol" />
+                  <span>SOL</span>
+                </div>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-2">
+            Your available {asset}: 0.00 {asset}
+          </p>
+          <div className="relative">
+            <Input
+              type="text"
+              value={amount}
+              onChange={(e) => {
+                if (/^\d*\.?\d*$/.test(e.target.value)) {
+                  setAmount(e.target.value)
+                }
+              }}
+              className="text-3xl font-semibold pl-8 pr-12 py-6"
+            />
+            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-3xl font-semibold text-muted-foreground">
+              {isUSD ? "$" : ""}
+            </span>
+            <span className="absolute right-3 top-1/2 -translate-y-1/2 text-lg text-muted-foreground">
+              {isUSD ? "USD" : asset}
+            </span>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="absolute right-12 top-1/2 -translate-y-1/2"
+              onClick={toggleCurrency}
+            >
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          </div>
+          <p className="text-sm text-right text-muted-foreground mt-1">{getEquivalentAmount()}</p>
+        </div>
+        <div className="flex justify-between gap-2">
+          {quickSelectAmounts.map((quickAmount) => (
+            <Button key={quickAmount} variant="outline" onClick={() => setAmount(quickAmount)} className="flex-1">
+              {isUSD ? "$" : ""}{quickAmount}
+            </Button>
+          ))}
+        </div>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="ghost" onClick={setType}>Cancel</Button>
+        <Button onClick={handleCreateLink}>Create new TipLink</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/src/components/WalletPage/Send/Send.tsx b/src/components/WalletPage/Send/Send.tsx
@@ -0,0 +1,74 @@
+'use client'
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { ChevronRight, Wand2, Wallet } from "lucide-react"
+import { useState } from "react"
+import LinkTransfer from "./LinkTransfer"
+import WalletTransfer from "./WalletTransfer"
+import { ActionType } from "../actions";
+
+
+
+
+interface SendTokenProps {
+    setCurrent: (action: ActionType | null) => void;
+  }
+export default function SendToken({ setCurrent }: SendTokenProps) {
+
+    const [typeOfSend, setTypeOfSend] = useState('');
+    return (
+        <>
+        {
+            !typeOfSend && <div className="w-full max-w-2xl mx-auto  space-y-6">
+                <h1 className="text-3xl font-medium text-gray-700">Send</h1>
+                <p className="text-lg  text-gray-600">
+                    Send assets to a new TipLink or to a Solana wallet address:
+                </p>
+                <Card>
+                    <CardContent className="p-0">
+                        <Button variant="ghost" className="w-full justify-between py-8 text-left hover:bg-blue-400/10" onClick={() => {
+                            setTypeOfSend('type1');
+                        }}>
+                            <div className="flex items-center space-x-4">
+                                <Wand2 className="h-6 w-6 text-gray-500" />
+                                <div>
+                                    <CardTitle className="text-lg font-normal text-gray-900">Send via new TipLink</CardTitle>
+                                    <CardDescription className="text-gray-500">
+                                        Create a new TipLink using assets from this wallet.
+                                    </CardDescription>
+                                </div>
+                            </div>
+                            <ChevronRight className="h-6 w-6 text-gray-400" />
+                        </Button>
+                        <Button variant="ghost" className="w-full justify-between py-8 text-left border-t hover:bg-blue-400/10"
+                            onClick={() => setTypeOfSend('type2')}
+                        >
+                            <div className="flex items-center space-x-4">
+                                <Wallet className="h-6 w-6 text-gray-500" />
+                                <div>
+                                    <CardTitle className="text-lg font-normal  ">Send to Solana wallet address</CardTitle>
+                                    <CardDescription className="text-gray-500">
+                                        Send assets to a Solana wallet address you specify.
+                                    </CardDescription>
+                                </div>
+                            </div>
+                            <ChevronRight className="h-6 w-6 text-gray-400" />
+                        </Button>
+                    </CardContent>
+                </Card>
+                <Button variant="outline" className="w-full hover:bg-blue-400/10" onClick={() =>  setCurrent(null)}>Cancel</Button>
+            </div>
+        }
+
+
+        {
+            typeOfSend === 'type1' && <LinkTransfer setType = { () => setTypeOfSend('')}/>
+        }
+
+        {
+            typeOfSend === 'type2' && <WalletTransfer setType = {() => setTypeOfSend('')}/>
+        }
+
+        </>
+    )
+}
diff --git a/src/components/WalletPage/Send/WalletTransfer.tsx b/src/components/WalletPage/Send/WalletTransfer.tsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import { IoMdArrowBack } from 'react-icons/io'
+
+const WalletTransfer = ({ setType }: { setType: () => void }) => {
+  return (
+    <div className="w-full max-w-2xl mx-auto space-y-6 flex flex-col">
+      <span
+        className="cursor-pointer text-gray-600 flex gap-2"
+        onClick={setType}
+      >
+        <IoMdArrowBack className="mt-1" />
+        Back
+      </span>
+      <div>
+        <div className="flex flex-col">
+          <span className="text-3xl font-semibold text-gray-900">
+            Send to solana wallet address
+          </span>
+          <span className="text-gray-500">
+            Specify amount and the designated wallet address:
+          </span>
+          <div className="space-y-4 my-6">
+            <div className="relative flex items-center">
+              <input
+                type="text"
+                placeholder="$ 0 USD"
+                className="w-full px-4 py-3 border border-gray-300 rounded-md text-xl text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+              <div className="absolute right-4 flex space-x-2">
+                <button className="bg-gray-100 text-gray-600 px-2 rounded-full">
+                  Max
+                </button>
+                <button className="bg-gray-100 text-gray-600 p-2 rounded-full">
+                  ↕
+                </button>
+              </div>
+            </div>
+
+            <input
+              type="text"
+              placeholder="Enter Solana wallet address"
+              className="w-full px-4 py-3 border border-gray-300 rounded-md text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+            <p className="text-gray-400 text-sm text-center">
+              .sol and AllDomains addresses supported
+            </p>
+          </div>
+          <div className="flex justify-between items-center w-full my-4">
+            <button className="bg-gray-200 text-black px-4 py-2 rounded-lg" onClick={setType}>
+              Cancel
+            </button>
+            <button className="bg-black text-white px-4 py-2 rounded-lg">
+              Send
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default WalletTransfer
diff --git a/src/components/WalletPage/Swap/Swap.tsx b/src/components/WalletPage/Swap/Swap.tsx
@@ -59,7 +59,6 @@ export default function TokenSwap({ setCurrent }: TokenSwapProps) {
       if (newToken && newToken !== receiveToken) setPayToken(newToken);
     }
 
-
   return (
     <div className="w-full max-w-md mx-auto space-y-6 bg-white rounded-lg">
        <Top setCurrent={setCurrent}/>

diff --git a/src/components/WalletPage/Swap/Top.tsx b/src/components/WalletPage/Swap/Top.tsx
@@ -12,5 +12,4 @@ export const Top = ({ setCurrent }: TokenSwapProps) => {
     <h2 className="text-2xl font-bold">Swap Tokens</h2>
     <div className="w-10" />
   </div>
-
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,5 +12,4 @@ export const Top = ({ setCurrent }: TokenSwapProps) => { @@
         <h2 className="text-2xl font-bold">Swap Tokens</h2>
         <div className="w-10" />
       </div>
     }