From a787e7276fa011442b5a7a489c43aa25288b8c22 Mon Sep 17 00:00:00 2001 From: ayushjodd Date: Sat, 12 Oct 2024 01:24:26 +0530 Subject: [PATCH 1/4] fixed topbar for dark theme --- src/app/globals.css | 11 +++++++++-- src/components/WalletPage/TopBar.tsx | 16 +++++++++++----- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 8267f75..f1c3f0b 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -74,6 +74,13 @@ input::-webkit-inner-spin-button { } /* Firefox */ -input[type=number] { +input[type='number'] { -moz-appearance: textfield; -} \ No newline at end of file +} + +.dark .fill-current { + fill: #ffffff; +} +.fill-current { + fill: #000000; +} diff --git a/src/components/WalletPage/TopBar.tsx b/src/components/WalletPage/TopBar.tsx index 578f0ce..8e1db5b 100644 --- a/src/components/WalletPage/TopBar.tsx +++ b/src/components/WalletPage/TopBar.tsx @@ -18,7 +18,7 @@ const TopBar = () => { {/* */} setOpen(!open)} className="sm:hidden" />
- +
@@ -32,11 +32,17 @@ const TopBar = () => { )} -
- - +
+ +
- {data && data?.user ? : ( + + {data && data?.user ? ( + + ) : (
From 5bf3cf1374a07bb23cba33ab45a01fe28d687c89 Mon Sep 17 00:00:00 2001 From: ayushjodd Date: Sat, 12 Oct 2024 14:25:30 +0530 Subject: [PATCH 2/4] dark-theme-configured --- src/app/wallet-adapter/page.tsx | 8 +- src/components/WalletPage/LeftSideBar.tsx | 8 +- src/components/common/ProfileDropDown.tsx | 152 +++++++++++----------- 3 files changed, 87 insertions(+), 81 deletions(-) diff --git a/src/app/wallet-adapter/page.tsx b/src/app/wallet-adapter/page.tsx index 3ffd6db..7223d8a 100644 --- a/src/app/wallet-adapter/page.tsx +++ b/src/app/wallet-adapter/page.tsx @@ -87,7 +87,9 @@ const page = () => {

Making Solana apps - consumer ready + + consumer ready +

Let your users login with just a Google account and start @@ -104,14 +106,14 @@ const page = () => {

-
+

Key Features

{features.map((feature, index) => (
diff --git a/src/components/WalletPage/LeftSideBar.tsx b/src/components/WalletPage/LeftSideBar.tsx index f7a3f33..0a90d71 100644 --- a/src/components/WalletPage/LeftSideBar.tsx +++ b/src/components/WalletPage/LeftSideBar.tsx @@ -76,8 +76,10 @@ const LeftSideBar = () => { -

{action.label}

-
- ))} -
+ {currentAction !== 'send' && currentAction !== 'swap' && ( +
+
+
+ {actions.map((action, index) => ( +
+ +

{action.label}

+
+ ))} +
-
- +
+ - + +
-
-
-
-

- You don't have any assets yet! -

-

- Start by buying or depositing funds: -

-
-
- +
+
+

+ You don't have any assets yet! +

+

+ Start by buying or depositing funds: +

+
+
+ +
-
- } - - {/*Now depends on current action render the components */} - {currentAction === 'receive' && } - {currentAction === 'swap' && } - {currentAction === 'send' && } + )} + {/*Now depends on current action render the components */} + {currentAction === 'receive' && ( + + )} + {currentAction === 'swap' && } + {currentAction === 'send' && }
) } From 0310003469d9581125f309bfa881291d9e750012 Mon Sep 17 00:00:00 2001 From: ayushjodd Date: Sat, 12 Oct 2024 23:41:49 +0530 Subject: [PATCH 4/4] more dark theme config --- src/app/wallet/page.tsx | 9 +- .../WalletPage/Send/LinkTransfer.tsx | 70 +++++--- src/components/WalletPage/Send/Send.tsx | 154 +++++++++-------- .../WalletPage/Send/WalletTransfer.tsx | 9 +- src/components/WalletPage/Swap/Swap.tsx | 158 +++++++++++------- src/components/WalletPage/Swap/Top.tsx | 27 +-- 6 files changed, 254 insertions(+), 173 deletions(-) diff --git a/src/app/wallet/page.tsx b/src/app/wallet/page.tsx index 9f1fbaa..ee0fc10 100644 --- a/src/app/wallet/page.tsx +++ b/src/app/wallet/page.tsx @@ -18,13 +18,12 @@ const Wallet = async () => { }, }) if (user) { - wallet = user?.publicKey ? user.publicKey : await createWallet(user) + wallet = user?.publicKey ? user.publicKey : await createWallet(user) balance = await fetchUserBalance(wallet) console.log(balance) } } - return (
@@ -33,7 +32,11 @@ const Wallet = async () => {
- +
{/* */}
diff --git a/src/components/WalletPage/Send/LinkTransfer.tsx b/src/components/WalletPage/Send/LinkTransfer.tsx index 1bcc3f6..1b4e058 100644 --- a/src/components/WalletPage/Send/LinkTransfer.tsx +++ b/src/components/WalletPage/Send/LinkTransfer.tsx @@ -1,24 +1,30 @@ -"use client" +'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 { 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" +} 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 [amount, setAmount] = useState('0') + const [asset, setAsset] = useState('SOL') const [isUSD, setIsUSD] = useState(true) const [solPrice, setSolPrice] = useState(0) const [isLoading, setIsLoading] = useState(true) @@ -27,7 +33,9 @@ export default function LinkTransfer({ setType }: { setType: () => void }) { useEffect(() => { const fetchSolPrice = async () => { try { - const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=solana&vs_currencies=usd') + 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') } @@ -48,10 +56,9 @@ export default function LinkTransfer({ setType }: { setType: () => void }) { } const toggleCurrency = () => { - if (!amount) { - setAmount('0'); - return; + setAmount('0') + return } setIsUSD(!isUSD) @@ -63,7 +70,6 @@ export default function LinkTransfer({ setType }: { setType: () => void }) { } const getEquivalentAmount = () => { - if (!amount) { return `~$0.00` } @@ -75,7 +81,7 @@ export default function LinkTransfer({ setType }: { setType: () => void }) { } } - const quickSelectAmounts = isUSD ? ["1", "2", "5"] : ["0.01", "0.02", "0.05"] + const quickSelectAmounts = isUSD ? ['1', '2', '5'] : ['0.01', '0.02', '0.05'] if (isLoading) { return
Loading...
@@ -89,7 +95,7 @@ export default function LinkTransfer({ setType }: { setType: () => void }) { @@ -106,7 +112,7 @@ export default function LinkTransfer({ setType }: { setType: () => void }) { - +
sol @@ -132,10 +138,10 @@ export default function LinkTransfer({ setType }: { setType: () => void }) { className="text-3xl font-semibold pl-8 pr-12 py-6" /> - {isUSD ? "$" : ""} + {isUSD ? '$' : ''} - {isUSD ? "USD" : asset} + {isUSD ? 'USD' : asset}
-

{getEquivalentAmount()}

+

+ {getEquivalentAmount()} +

{quickSelectAmounts.map((quickAmount) => ( - ))}
- + ) -} \ No newline at end of file +} diff --git a/src/components/WalletPage/Send/Send.tsx b/src/components/WalletPage/Send/Send.tsx index fb4ccff..f310987 100644 --- a/src/components/WalletPage/Send/Send.tsx +++ b/src/components/WalletPage/Send/Send.tsx @@ -1,74 +1,92 @@ '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"; - - - +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; - } + setCurrent: (action: ActionType | null) => void +} export default function SendToken({ setCurrent }: SendTokenProps) { + const [typeOfSend, setTypeOfSend] = useState('') + return ( + <> + {!typeOfSend && ( +
+

+ Send +

+

+ Send assets to a new TipLink or to a Solana wallet address: +

+ + + + + + + +
+ )} - const [typeOfSend, setTypeOfSend] = useState(''); - return ( - <> - { - !typeOfSend &&
-

Send

-

- Send assets to a new TipLink or to a Solana wallet address: -

- - - - - - - -
- } - - - { - typeOfSend === 'type1' && setTypeOfSend('')}/> - } + {typeOfSend === 'type1' && ( + setTypeOfSend('')} /> + )} - { - typeOfSend === 'type2' && setTypeOfSend('')}/> - } - - - ) -} \ No newline at end of file + {typeOfSend === 'type2' && ( + setTypeOfSend('')} /> + )} + + ) +} diff --git a/src/components/WalletPage/Send/WalletTransfer.tsx b/src/components/WalletPage/Send/WalletTransfer.tsx index 8856509..af9d29e 100644 --- a/src/components/WalletPage/Send/WalletTransfer.tsx +++ b/src/components/WalletPage/Send/WalletTransfer.tsx @@ -5,7 +5,7 @@ const WalletTransfer = ({ setType }: { setType: () => void }) => { return (
@@ -13,7 +13,7 @@ const WalletTransfer = ({ setType }: { setType: () => void }) => {
- + Send to solana wallet address @@ -46,7 +46,10 @@ const WalletTransfer = ({ setType }: { setType: () => void }) => {

- -

Swap Tokens

-
-
-} \ No newline at end of file + return ( +
+ +

Swap Tokens

+
+
+ ) +}