From 59a674e60e692d81726b1b6cdcc97723b0353103 Mon Sep 17 00:00:00 2001 From: tali-creator Date: Thu, 4 Dec 2025 13:56:03 +0100 Subject: [PATCH] Refactored --- components/dashboard/mobile-bottom-nav.tsx | 4 +- .../purchase/PurchaseCommon/AmountGrid.tsx | 4 +- .../purchase/PurchaseCommon/CustomerInput.tsx | 8 +- .../PurchaseSteps/PaymentSelection.tsx | 2 +- .../PurchaseSteps/ProviderSelection.tsx | 2 +- .../PurchaseSteps/ReviewConfirmation.tsx | 38 ++--- components/dashboard/top-nav.tsx | 2 +- components/dashboard/wallet-overview.tsx | 143 +++++++++++------- components/modals/qr-modal.tsx | 44 ++++++ components/modals/walletSAndBalance.tsx | 4 +- 10 files changed, 167 insertions(+), 84 deletions(-) create mode 100644 components/modals/qr-modal.tsx diff --git a/components/dashboard/mobile-bottom-nav.tsx b/components/dashboard/mobile-bottom-nav.tsx index 2a5657e..fbd9dee 100644 --- a/components/dashboard/mobile-bottom-nav.tsx +++ b/components/dashboard/mobile-bottom-nav.tsx @@ -5,8 +5,8 @@ import Link from "next/link"; const navItems = [ { icon: Home, label: "Dashboard", link: "/dashboard" }, - { icon: Bell, label: "Notification", link: "/dashboard/notification" }, - { icon: HistoryIcon, label: "History", link: "/dashboard/profile" }, + { icon: Bell, label: "Notification", link: "/dashboard/notifications" }, + { icon: HistoryIcon, label: "History", link: "/dashboard/history" }, { icon: User, label: "Profile", link: "/dashboard/profile" }, ]; diff --git a/components/dashboard/purchase/PurchaseCommon/AmountGrid.tsx b/components/dashboard/purchase/PurchaseCommon/AmountGrid.tsx index 97f8dde..cfe6d82 100644 --- a/components/dashboard/purchase/PurchaseCommon/AmountGrid.tsx +++ b/components/dashboard/purchase/PurchaseCommon/AmountGrid.tsx @@ -59,7 +59,7 @@ export function AmountGrid({ whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} onClick={() => onChange(amount.toString())} - className={`p-3 rounded-xl transition-all border ${ + className={`p-2 sm:p-3 rounded-lg text-sm sm:text-md transition-all border ${ value === amount.toString() ? " bg-primary/10 text-primary font-semibold" : " hover:border-primary/50 hover:bg-accent" @@ -78,7 +78,7 @@ export function AmountGrid({ value={value} onChange={handleCustomAmountChange} placeholder="Enter custom amount" - className={`w-full p-4 rounded-xl border-2 pr-10 transition-colors ${ + className={`w-full sm:p-4 py-2 px-3 text-sm sm:text-md rounded-lg border-2 pr-10 transition-colors ${ isBelowMin || isAboveMax ? "border-red-500 focus:border-red-500 focus:ring-red-500/20" : " focus:border-primary focus:ring-primary/20" diff --git a/components/dashboard/purchase/PurchaseCommon/CustomerInput.tsx b/components/dashboard/purchase/PurchaseCommon/CustomerInput.tsx index f02bf49..c4d68d2 100644 --- a/components/dashboard/purchase/PurchaseCommon/CustomerInput.tsx +++ b/components/dashboard/purchase/PurchaseCommon/CustomerInput.tsx @@ -39,14 +39,14 @@ export function CustomerInput({ }; return ( -
+
-
+
{type !== "electricity" && ( -
+
+234
)} @@ -56,7 +56,7 @@ export function CustomerInput({ value={value} onChange={handleChange} placeholder={config.placeholder} - className={`flex-1 p-4 rounded-lg border bg-background placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors ${ + className={` sm:p-4 p-2 rounded-lg border bg-muted w-full placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors ${ type === "electricity" ? "" : "" }`} maxLength={type === "electricity" ? undefined : 10} diff --git a/components/dashboard/purchase/PurchaseSteps/PaymentSelection.tsx b/components/dashboard/purchase/PurchaseSteps/PaymentSelection.tsx index d38b4ef..6b16e83 100644 --- a/components/dashboard/purchase/PurchaseSteps/PaymentSelection.tsx +++ b/components/dashboard/purchase/PurchaseSteps/PaymentSelection.tsx @@ -28,7 +28,7 @@ export function PaymentSelection({
-

Transaction Summary

+

Transaction Summary

- Product - {type} + Product + {type}
- Provider - + Provider + {providers.find(p => p.serviceID === formData.service_id)?.name}
- {config.customerLabel} - + {config.customerLabel} + {type !== "electricity" ? `234${formData.customer_id}` : formData.customer_id}
- Payment Method - {selectedToken} + Payment Method + {selectedToken}
- Total Amount + Total Amount ₦{parseInt(formData.amount || "0").toLocaleString()}
{/* Crypto Amount */} -
-
- Required Crypto - +
+
+ Required Crypto + {requiredCryptoAmount.toFixed(6)} {selectedToken.toUpperCase()}
-
- Your Balance - + Your Balance + {currentWalletBalance.toFixed(6)} {selectedToken.toUpperCase()} @@ -122,7 +122,7 @@ export function ReviewConfirmation({ disabled={!!validationError || hasInsufficientBalance} className={`flex-1 p-4 rounded-xl flex items-center justify-center gap-2 transition-colors ${ validationError || hasInsufficientBalance - ? "bg-muted text-muted-foreground cursor-not-allowed" + ? "bg-muted text-muted-foreground font-[UbuntuSans] sm:text-md text-sm font-semibold cursor-not-allowed" : "bg-primary text-white hover:bg-primary/90" }`} > diff --git a/components/dashboard/top-nav.tsx b/components/dashboard/top-nav.tsx index 9d8df49..ce49044 100644 --- a/components/dashboard/top-nav.tsx +++ b/components/dashboard/top-nav.tsx @@ -38,7 +38,7 @@ export function TopNav() { // const isHelp = tabTitle === "Help"; return ( -
+
{/* Actions */} diff --git a/components/dashboard/wallet-overview.tsx b/components/dashboard/wallet-overview.tsx index 0dfae6f..956109a 100644 --- a/components/dashboard/wallet-overview.tsx +++ b/components/dashboard/wallet-overview.tsx @@ -1,16 +1,12 @@ -import { - Card, - CardContent, - CardHeader, - CardTitle, -} from "@/components/ui/cards"; -import { Check, ChevronRight, Copy, Eye, EyeClosed } from "lucide-react"; +import { CardContent } from "@/components/ui/cards"; +import { ArrowDownToLine } from "lucide-react"; import Image from "next/image"; -import { Button } from "../ui/buttons"; -import { shortenAddress } from "../lib/utils"; import { Skeleton } from "@/components/ui/skeleton"; -import { useCallback, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { useWalletData } from "../hooks/useWalletData"; +import QRModal from "../modals/qr-modal"; +import { generateCompatibleQRCode } from "@/lib/utils/qr-utils"; +import { fixStarknetAddress } from "../lib/utils"; interface WalletOverviewProps { handleViewBalance: () => void; @@ -22,7 +18,9 @@ export function WalletOverview({ hideBalalance, }: WalletOverviewProps) { const { addresses, breakdown } = useWalletData(); - + const [qrData, setQrData] = useState(null); + const [selectedToken, setSelectedToken] = useState(""); + console.log("qr data", qrData); const [copiedAddress, setCopiedAddress] = useState(null); const walletData = (() => { @@ -103,51 +101,87 @@ export function WalletOverview({ [] ); + // Get selected token data + const selectedTokenData = addresses?.find( + (token) => token.chain === selectedToken.toLowerCase() + ); + + // Generate QR code when selected token changes + useEffect(() => { + const generateQrCode = async () => { + if (!selectedTokenData?.address) { + setQrData(""); + return; + } + + try { + let addressToUse = selectedTokenData.address; + + // Normalize Starknet address if needed + if (selectedTokenData.chain.toLowerCase() === "starknet") { + addressToUse = fixStarknetAddress( + addressToUse, + selectedTokenData.chain + ); + } + + const qrResult = await generateCompatibleQRCode( + selectedTokenData.chain, + addressToUse, + { + width: 200, + margin: 2, + errorCorrectionLevel: "M" as const, + } + ); + + setQrData(qrResult.dataUrl); + } catch (error) { + console.error("Error generating QR code:", error); + setQrData(""); + } + }; + + generateQrCode(); + }, [selectedTokenData]); + return ( // - - - {walletData?.map((wallet, index) => ( -
-
-
-
- {wallet.chain} { - (e.target as HTMLImageElement).style.display = "none"; - ( - e.target as HTMLImageElement - ).nextElementSibling?.classList.remove("hidden"); - }} - /> -
- {walletData.length === 0 ? ( - - ) : ( -

- {formatBalance(wallet.balance, wallet.symbol)} -

- )} -
-
- {/*

- {wallet.chain} -

-

- {shortenAddress(wallet.address as `0x${string}`, 6)} -

*/} + + {walletData?.map((wallet, index) => ( +
+
+
+
+ {wallet.chain} { + (e.target as HTMLImageElement).style.display = "none"; + ( + e.target as HTMLImageElement + ).nextElementSibling?.classList.remove("hidden"); + }} + />
+ {walletData.length === 0 ? ( + + ) : ( +

+ {formatBalance(wallet.balance, wallet.symbol)} +

+ )}
+
-
+
+
{walletData.length === 0 ? ( ) : ( @@ -165,9 +199,14 @@ export function WalletOverview({ )}
+
- ))} - +
+ ))} + {qrData && } + // ); } diff --git a/components/modals/qr-modal.tsx b/components/modals/qr-modal.tsx new file mode 100644 index 0000000..fa65d02 --- /dev/null +++ b/components/modals/qr-modal.tsx @@ -0,0 +1,44 @@ +import React, { Dispatch, SetStateAction } from "react"; +import Image from "next/image"; + +export default function QRModal({ + qrData, + setShow, +}: { + qrData: string; + setShow: Dispatch>; +}) { + const handleModalClick = (e: React.MouseEvent) => { + e.stopPropagation(); + }; + + return ( +
setShow(null)} + className="w-full h-screen z-50 fixed p-4 top-0 left-0 flex items-center justify-center bg-black/50" + > +
+
+ {qrData ? ( + QR Code + ) : ( +
+ Generating QR... +
+ )} +
+ Scan Me!
+
+
+ ); +} \ No newline at end of file diff --git a/components/modals/walletSAndBalance.tsx b/components/modals/walletSAndBalance.tsx index deccdff..80fa429 100644 --- a/components/modals/walletSAndBalance.tsx +++ b/components/modals/walletSAndBalance.tsx @@ -59,10 +59,10 @@ const TokenCard = memo(({ }} >
-
+
{token.symbol}
-
+
{getBalance(token.chain)}