Skip to content

Commit

Permalink
Removing a lot of chakraui
Browse files Browse the repository at this point in the history
  • Loading branch information
@diyahir
diyahir committed Mar 8, 2024
1 parent e553bd4 commit 508665d
Show file tree
Hide file tree
Showing 12 changed files with 278 additions and 426 deletions.
77 changes: 29 additions & 48 deletions packages/nextjs/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,63 @@
"use client";

// Import necessary hooks and components
import { useState } from "react";
import { Button, Card, CardFooter, CardHeader, Container, Heading, Tooltip, useDisclosure } from "@chakra-ui/react";
// import { QrScanner } from "@yudiel/react-qr-scanner";
import type { NextPage } from "next";
import { useAccount } from "wagmi";
// Import your custom components and hooks
import { HistoryTable } from "~~/components/HistoryTable";
import SendModal from "~~/components/SendModalPopup";
import SendModalPopup from "~~/components/SendModalPopup";
import { useLightningApp } from "~~/hooks/LightningProvider";
import { useAccountBalance } from "~~/hooks/scaffold-eth";

// Import the CSS file with your animation

const Home: NextPage = () => {
const Home = () => {
const { address } = useAccount();
const { balance } = useAccountBalance(address);
const { isWebSocketConnected, price } = useLightningApp();
const { isOpen, onClose, onOpen } = useDisclosure();
const [isOpen, setIsOpen] = useState(false);
const onClose = () => setIsOpen(false);
const onOpen = () => setIsOpen(true);
const [balanceVisibility, setBalanceVisibility] = useState(0);

function getBalanceWithVisibility() {
if (balance === null) return "Loading Balance...";
if (balanceVisibility === 0) {
return Math.floor(balance * 100_000_000).toLocaleString() + " sats";
return `${Math.floor(balance * 100_000_000).toLocaleString()} sats`;
}
if (balanceVisibility === 1) {
return "$" + (balance * price).toFixed(2) + " USD";
return `$${(balance * price).toFixed(2)} USD`;
}
if (balanceVisibility === 2) {
return "****** sats";
}
}

return (
<Container alignContent={"center"} h="95%" justifyContent={"center"}>
<Card>
<CardHeader color={"white"} bg="brand.bg !important">
<Heading
style={{ cursor: "pointer" }}
<div className="font-plex container mx-auto flex h-[95%] items-center justify-center">
<div className="card w-[500px] ">
<div className="card-header text-white p-4">
<h1
className="cursor-pointer text-center text-lg font-mono mt-10"
onClick={() => setBalanceVisibility((balanceVisibility + 1) % 3)}
fontFamily={"IBM Plex Mono"}
mt="10%"
textAlign={"center"}
fontSize={"x-large"}
>
{" "}
<span>{getBalanceWithVisibility()}</span>
</Heading>
</CardHeader>
{getBalanceWithVisibility()}
</h1>
</div>

<HistoryTable />

<CardFooter
bg="brand.bg"
justify="space-between"
flexWrap="wrap"
sx={{
"& > button": {
minW: "136px",
},
}}
>
<Tooltip label={!isWebSocketConnected ? "Lightning Service Provider offline, try refreshing the page." : ""}>
<Button
background={"gray.300 !important"}
isDisabled={!isWebSocketConnected}
onClick={onOpen}
flex="1"
_hover={{ bg: "gray.100 !impoprtant" }}
>
Send over Lightning
</Button>
</Tooltip>
</CardFooter>
</Card>
<div className="card-footer p-4 flex justify-between flex-wrap">
<button
className={`btn btn-neutral w-[100%] min-w-[136px] disabled:opacity-50`}
disabled={!isWebSocketConnected}
onClick={onOpen}
>
Send over Lightning
</button>
</div>
</div>

<SendModal isOpen={isOpen} onClose={onClose} />
</Container>
<SendModalPopup isOpen={isOpen} onClose={onClose} />
</div>
);
};

Expand Down
5 changes: 2 additions & 3 deletions packages/nextjs/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from "react";
import Link from "next/link";
import { Button } from "@chakra-ui/react";
import { hardhat } from "viem/chains";
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { Faucet } from "~~/components/scaffold-eth";
Expand All @@ -22,9 +21,9 @@ export const Footer = () => {
<div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
{nativeCurrencyPrice > 0 && (
<div>
<Button>
<button className="btn btn-neutral">
<span>${nativeCurrencyPrice.toLocaleString()}</span>
</Button>
</button>
</div>
)}
{isLocalNetwork && (
Expand Down
21 changes: 6 additions & 15 deletions packages/nextjs/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
import React, { useCallback, useRef, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Button, Image, Text } from "@chakra-ui/react";
import { Bars3Icon } from "@heroicons/react/24/outline";
import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
import { useLightningApp } from "~~/hooks/LightningProvider";
Expand Down Expand Up @@ -92,32 +91,24 @@ export const Header = () => {
</div>

<Link color={"white"} href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
<Image src="/logo.svg" alt="Botanix Logo" width={"24px"} height={"24px"} />
<div className="flex flex-col">
<Text fontWeight={"bold"} fontFamily={"IBM Plex Mono"} color={"white"}>
{" "}
Botanix {"<>"} Lightning{" "}
</Text>
</div>
<img src="/logo.svg" alt="Botanix Logo" width={"24px"} height={"24px"} />
<div className="flex flex-col font-plex font-bold text-white">Botanix {"<>"} Lightning </div>
</Link>
<ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
<HeaderMenuLinks />
</ul>
</div>
<div className="navbar-end flex-grow mr-4">
{/* a div that shows if the client is connected to the server */}
<Button
size={"xs"}
color={"gray.500"}
fontWeight={"light"}
background={"transparent"}
<button
className="btn btn-ghost btn-sm text-white font-plex"
onClick={() => {
if (!isWebSocketConnected) reconnect();
}}
>
<div className={`${isWebSocketConnected ? "bg-success" : "bg-error"} rounded-full w-2 h-2 self-center`}></div>
&nbsp; {isWebSocketConnected ? "LSP Connected" : "LSP Disconnected"}
</Button>
{isWebSocketConnected ? "LSP Connected" : "LSP Disconnected"}
</button>
&nbsp;
<RainbowKitCustomConnectButton />
<FaucetButton />
Expand Down
168 changes: 69 additions & 99 deletions packages/nextjs/components/HistoryTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,5 @@
import React, { Fragment, useState } from "react";
import { CopyIcon } from "@chakra-ui/icons";
import {
Box,
Button,
CardBody,
Heading,
Icon,
Table,
Tbody,
Td,
Th,
Thead,
Tooltip,
Tr,
useToast,
} from "@chakra-ui/react";
import { useToast } from "@chakra-ui/react";
import { useWalletClient } from "wagmi";
import { HistoricalTransaction, useLightningApp } from "~~/hooks/LightningProvider";
import { useScaffoldContract } from "~~/hooks/scaffold-eth";
Expand Down Expand Up @@ -103,90 +88,75 @@ export const HistoryTable = () => {
}

return (
<CardBody color={"white"} bg="brand.bg">
<Heading fontFamily={"IBM Plex Mono"} textAlign={"center"} size={"md"} mb="5">
History
</Heading>
<Table size={"sm"}>
{transactions.length > 0 && (
<>
<Thead>
<Tr>
<Th>Status</Th>
<Th>Date</Th>
<Th isNumeric>Amount</Th>
</Tr>
</Thead>
<Tbody>
{transactions.map((transaction, index) => (
<React.Fragment key={index}>
<Tooltip label={getTooltipText(transaction)}>
<Tr
<div className="card bg-brand-bg text-white">
<div className="card-body p-4">
<h2 className="text-center font-mono text-md mb-5">History</h2>
<table className="table-auto w-full text-sm">
{transactions.length > 0 && (
<>
<thead>
<tr>
<th>Status</th>
<th>Date</th>
<th className="text-right">Amount</th>
</tr>
</thead>
<tbody>
{transactions.map((transaction, index) => (
<React.Fragment key={index}>
<tr
onClick={() => toggleRow(index)}
cursor={"pointer"}
bg={transaction.status === "failed" ? "red.400" : ""}
css={{
"&:hover": {
backgroundColor: "rgba(255, 255, 255, 0.1)",
},
}}
className={`cursor-pointer ${
transaction.status === "failed" ? "bg-red-400" : ""
} hover:bg-white hover:bg-opacity-10`}
>
<Td>{transaction.status}</Td>

<Td>{transaction.date}</Td>
<Td isNumeric>{transaction.amount} sats</Td>
{/* <Td>
<Icon as={expandedRow === index ? <ChevronUpIcon /> : <ChevronDownIcon />} />
</Td> */}
</Tr>
</Tooltip>
{/* Expandable row for details */}
{expandedRow === index && (
<Tr>
<Td colSpan={3}>
<Box>
TimeLock exiry: {new Date(transaction.hashLockTimestamp * 1000).toLocaleString()}
<br />
<br />
<Button
colorScheme="blue"
size="xs"
onClick={() => {
toastAndCopy(transaction.txHash, "Transaction hash copied to clipboard");
}}
>
<Icon as={CopyIcon} />
</Button>
&nbsp; txHash: {transaction.txHash.substring(0, 20)}...
<br />
<br />
<Button
colorScheme="blue"
size="xs"
onClick={() => {
toastAndCopy(transaction.contractId, "Contract ID copied to clipboard");
}}
>
<Icon as={CopyIcon} />
</Button>
&nbsp; contractId: {transaction.contractId.substring(0, 16)}...
</Box>
</Td>
</Tr>
)}
</React.Fragment>
))}
</Tbody>
</>
)}
{transactions.length === 0 && (
<Tr>
<Td border={"#787878"} borderStyle={"dashed"} textAlign={"center"}>
Send your first lightning transaction!
</Td>
</Tr>
)}
</Table>
</CardBody>
<td>{transaction.status}</td>
<td>{transaction.date}</td>
<td className="text-right">{transaction.amount} sats</td>
</tr>
{expandedRow === index && (
<tr>
<td colSpan={3}>
<div className="p-4">
TimeLock expiry: {new Date(transaction.hashLockTimestamp * 1000).toLocaleString()}
<br />
<br />
<button
className="btn btn-ghost text-white text-xs p-2"
onClick={() => toastAndCopy(transaction.txHash, "Transaction hash copied to clipboard")}
>
{/* Assuming CopyIcon is a SVG or similar; ensure you have a Tailwind way to display it */}
Copy txHash
</button>
&nbsp; txHash: {transaction.txHash.substring(0, 20)}...
<br />
<br />
<button
className="btn text-white text-xs p-2"
onClick={() => toastAndCopy(transaction.contractId, "Contract ID copied to clipboard")}
>
{/* Assuming CopyIcon is a SVG or similar; ensure you have a Tailwind way to display it */}
Copy contractId
</button>
&nbsp; contractId: {transaction.contractId.substring(0, 16)}...
</div>
</td>
</tr>
)}
</React.Fragment>
))}
</tbody>
</>
)}
{transactions.length === 0 && (
<tr>
<td className="border border-gray-400 border-dashed text-center py-4">
Send your first lightning transaction!
</td>
</tr>
)}
</table>
</div>
</div>
);
};
Loading

0 comments on commit 508665d

Please sign in to comment.