feat: Add Readme

.env.example

@@ -1 +1,2 @@
-NEXT_PUBLIC_GOLDRUSH_API_KEY=
+NEXT_PUBLIC_GOLDRUSH_API_KEY
+NEXT_PUBLIC_GOOGLE_TAG_ID?

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Covalent
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,36 +1,118 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+<div align="center">
+  <a href="https://goldrush.dev/products/goldrush/"  target="_blank" rel="noopener noreferrer">
+    <img alt="GoldRush Bitcoin Wallet & Portfolio UI template - powered by Covalent" src="https://www.datocms-assets.com/86369/1731711128-goldrush-bitcoin-wallet-portfolio-template.png" style="max-width: 100%;"/>
+  </a>
+  <br />
 
-## Getting Started
+[![GitHub license](https://img.shields.io/github/license/covalenthq/goldrush-bitcoin-wallet-ui)](https://github.com/covalenthq/goldrush-bitcoin-wallet-ui/blob/main/LICENSE)
+[![GitHub last commit](https://img.shields.io/github/last-commit/covalenthq/goldrush-bitcoin-wallet-ui)](https://github.com/covalenthq/goldrush-bitcoin-wallet-ui/commits/master)
+[![GitHub contributors](https://img.shields.io/github/contributors/covalenthq/goldrush-bitcoin-wallet-ui)](https://github.com/covalenthq/goldrush-bitcoin-wallet-ui/graphs/contributors)
+[![GitHub issues](https://img.shields.io/github/issues/covalenthq/goldrush-bitcoin-wallet-ui)](https://github.com/covalenthq/goldrush-bitcoin-wallet-ui/issues)
+[![GitHub pull requests](https://img.shields.io/github/issues-pr/covalenthq/goldrush-bitcoin-wallet-ui)](https://github.com/covalenthq/goldrush-bitcoin-wallet-ui/pulls)
+[![GitHub stars](https://img.shields.io/github/stars/covalenthq/goldrush-bitcoin-wallet-ui)](https://github.com/covalenthq/goldrush-bitcoin-wallet-ui/stargazers)
+[![GitHub forks](https://img.shields.io/github/forks/covalenthq/goldrush-bitcoin-wallet-ui)](https://github.com/covalenthq/goldrush-bitcoin-wallet-ui/network/members)
 
-First, run the development server:
+</div>
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+<br/>
+<h1 align="center">Beautifully designed Bitcoin Wallet & Portfolio UI template.</h1>
+
+<div align="center">
+Powered by <span><a href="https://github.com/covalenthq/goldrush-kit">GoldRush UI Kit.</a></span> Open-source & Customizable.
+</div>
+
+## View Live Template
+
+<a href="https://goldrush-bitcoin-wallet-ui.vercel.app/">https://goldrush-bitcoin-wallet-ui.vercel.app</a>
+
+Explore a live deployment of the template, showcasing its features and UI components in action.
+
+## One-Click Deploy
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcovalenthq%2Fgoldrush-bitcoin-wallet-ui&env=NEXT_PUBLIC_GOLDRUSH_API_KEY&envDescription=Visit%20Covalent%20to%20sign%20up%20for%20an%20API%20key&envLink=https%3A%2F%2Fwww.covalenthq.com%2Fplatform%2Fauth%2Fregister%2F)
+
+Quickly create your own deployment on Vercel with one click. This will set up a clone of the template, ready to be customized. This will also be unlinked from the original template.
+
+> Note: You will need your [GoldRush API key](https://goldrush.dev/platform/apikey) to set the `NEXT_PUBLIC_GOLDRUSH_API_KEY` environment variable.
+
+## Local Setup
+
+This repo is set up as a _public template_ so you can either **Fork** to create a linked repo to pull in updates, or select **Use this template** to create an unlinked copy that will not inherit any issues, PRs or updates from the original.
+
+1. Install package dependencies using: `npm install`.
+2. Create an `.env.local` in your root directory and add your [GoldRush API key](https://goldrush.dev/platform/apikey):
+   ```
+   NEXT_PUBLIC_GOLDRUSH_API_KEY = "<YOUR_API_KEY>"
+   ```
+3. Run the template with:
+   ```
+   npm run dev
+   ```
+
+## Customize
+
+This template can be quickly customized from `goldrush.config.ts`. By default, it looks like:
+
+```ts
+import { type GoldRushConfig } from "@/utils/types/shared.types";
+
+export const goldrushConfig: GoldRushConfig = {
+  brand: {
+    title: "GoldRush",
+    subtitle: "Bitcoin Wallet & Portfolio UI",
+    logo_url: "/goldrush-logo.png",
+    github: "https://github.com/covalenthq/goldrush-bitcoin-wallet-ui",
+  },
+  theme: {
+    borderRadius: 6,
+    colors: {
+      dark: {
+        primary: "#FF4C8B",
+        background: "#000426",
+        foreground: "#FFFFFF",
+        secondary: "#868E96",
+      },
+      light: {
+        primary: "#FF4C8B",
+        background: "#FFFFFF",
+        foreground: "#1C2024",
+        secondary: "#868E96",
+      },
+    },
+    mode: "light",
+  },
+  gtag_id: process.env.NEXT_PUBLIC_GOOGLE_TAG_ID || null,
+};
+
+export default goldrushConfig;
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+1. `brand`: This objects sets the title and logo in the top left `nav` bar.
+
+   <img src="./repo-static/brand-example.png">
+
+   A 40x40px logo size is recommended.
+
+2. `theme`: This object is an extension of the [GoldRush UI Kit](https://github.com/covalenthq/goldrush-kit) theme config. Explore the theme settings [here](https://goldrush-kit.vercel.app/?path=/story/theme-config--theme-config).
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+3. **gtag_id**: This is an optional [Google Analytics](https://developers.google.com/analytics) tag ID (format; `G-**********`) for tracking traffic to your Block Explorer.
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+## Features
 
-## Learn More
+1. **Real-time Wallet Details**: Provides up-to-date information on bitcoin transactions, and balances for a wallet address in real time, giving users the latest data.
+2. **Ready-to-use customizable template**: Jumpstart your dApp journey with a beautifully designed UI that’s both intuitive and engaging.
+3. **HD and Non-HD Address Support**: Supports both HD and Non-HD bitcoin addresses.
+4. **UI Template**: The GoldRush Bitcoin Wallet & Portfolio UI can be customized with different colors and modes per deployment.
 
-To learn more about Next.js, take a look at the following resources:
+## Contributing
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+Contributions, issues and feature requests are welcome!
+Feel free to check the [issues](https://github.com/covalenthq/goldrush-bitcoin-wallet-ui/issues) page.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## Show Your Support
 
-## Deploy on Vercel
+Give us a ⭐️ if this project helps you!
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## License
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+This project is [MIT](./LICENSE) licensed.

goldrush.config.ts

@@ -1,9 +1,9 @@
-import { type GRKKitType } from "@/utils/types/shared.types";
+import { type GoldRushConfig } from "@/utils/types/shared.types";
 
-export const GRKKit: GRKKitType = {
+export const goldrushConfig: GoldRushConfig = {
   brand: {
     title: "GoldRush",
-    subtitle: "Bitcoin Wallet UI",
+    subtitle: "Bitcoin Wallet & Portfolio UI",
     logo_url: "/goldrush-logo.png",
     github: "https://github.com/covalenthq/goldrush-bitcoin-wallet-ui",
   },
@@ -25,6 +25,7 @@ export const GRKKit: GRKKitType = {
     },
     mode: "light",
   },
+  gtag_id: process.env.NEXT_PUBLIC_GOOGLE_TAG_ID ?? null,
 };
 
-export default GRKKit;
+export default goldrushConfig;

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@covalenthq/client-sdk": "^2.2.1",
     "@covalenthq/goldrush-kit": "^1.0.5",
+    "@next/third-parties": "^15.0.3",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.2",

src/app/layout.tsx

@@ -9,6 +9,8 @@ import { Toaster } from "@/components/ui/toaster";
 import { KeyDialog } from "@/components/shared/key-dialog";
 import { Footer } from "@/components/shared/footer";
 import { WalletUiContext } from "@/utils/store/wallet.store";
+import { GoogleTagManager } from "@next/third-parties/google";
+import goldrushConfig from "../../goldrush.config";
 
 interface RootLayoutProps {
   children: React.ReactNode;
@@ -18,6 +20,9 @@ export default function RootLayout({ children }: Readonly<RootLayoutProps>) {
   return (
     <html lang="en" suppressHydrationWarning>
       <head />
+      {goldrushConfig.gtag_id && (
+        <GoogleTagManager gtmId={goldrushConfig.gtag_id} />
+      )}
       <body
         className={cn(
           "min-h-screen bg-background font-sans antialiased",

src/app/wallet/[address]/page.tsx

@@ -49,7 +49,7 @@ const WalletDashboard = ({
 
   return (
     <Tabs value={initialTab} onValueChange={handleTabChange}>
-      <div className="flex w-full container items-start gap-4">
+      <div className="flex w-full container items-start gap-4 pb-20">
         <div className="flex flex-col gap-8">
           <AddressCard address={params.address} avatar={{}} />
           <TabsList className="flex flex-col items-start w-full gap-2">

src/components/token-balances/TokenBalanceList.tsx

@@ -10,18 +10,26 @@ import { GOLDRUSH_API_KEY } from "@/utils/constants/helpers";
 import {
   calculatePercentageChange,
   getAddressType,
+  minifyAddress,
 } from "@/utils/functions/helper";
 import { useEffect, useMemo, useState } from "react";
 import Image from "next/image";
-import { SortAscIcon, SortDescIcon, ArrowUpDownIcon } from "lucide-react";
+import {
+  SortAscIcon,
+  SortDescIcon,
+  ArrowUpDownIcon,
+  CopyIcon,
+} from "lucide-react";
 import { TableSkeleton } from "@/components/shared/table-skeleton";
+import { useToast } from "../ui/use-toast";
 
 export function TokenBalancesList({ address }: { address: string }) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TS SDK Will have this once deployed
   const [tokenData, setTokenData] = useState<any[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
-  const [sortField, setSortField] = useState<string>("");
-  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [sortField, setSortField] = useState<string>("balance");
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
+  const { toast } = useToast();
 
   useEffect(() => {
     const fetchWalletBalance = async () => {
@@ -54,7 +62,10 @@ export function TokenBalancesList({ address }: { address: string }) {
       const fieldA = a[sortField];
       const fieldB = b[sortField];
 
-      if (typeof fieldA === "number" && typeof fieldB === "number") {
+      if (
+        (typeof fieldA === "number" && typeof fieldB === "number") ||
+        sortField === "balance"
+      ) {
         return sortOrder === "asc" ? fieldA - fieldB : fieldB - fieldA;
       } else if (typeof fieldA === "string" && typeof fieldB === "string") {
         return sortOrder === "asc"
@@ -86,6 +97,8 @@ export function TokenBalancesList({ address }: { address: string }) {
     <Table>
       <TableHeader>
         <TableRow>
+          {getAddressType(address) === "HD" &&
+            TableHeadRender("child_address", "Child Address")}
           {TableHeadRender("contract_display_name", "Token")}
           {TableHeadRender("quote_rate", "Price")}
           {TableHeadRender("balance", "Balance")}
@@ -95,10 +108,37 @@ export function TokenBalancesList({ address }: { address: string }) {
       </TableHeader>
       <TableBody>
         {loading ? (
-          <TableSkeleton length={5} />
+          <TableSkeleton length={getAddressType(address) === "HD" ? 6 : 5} />
+        ) : sortedData.length === 0 ? (
+          <>
+            <TableRow>
+              <TableCell colSpan={7} className="text-center">
+                No Transactions Found
+              </TableCell>
+            </TableRow>
+          </>
         ) : (
           sortedData.map((tokenDetails) => (
             <TableRow key={tokenDetails.child_address}>
+              {getAddressType(address) === "HD" && (
+                <TableCell>
+                  <div className="flex items-center gap-1">
+                    {minifyAddress(tokenDetails.child_address)}
+                    <CopyIcon
+                      className="h-3 w-3 text-foreground-light dark:text-foreground-dark cursor-pointer"
+                      onClick={() => {
+                        toast({
+                          title: "Address Copied",
+                          description: "The address has been copied",
+                        });
+                        navigator.clipboard.writeText(
+                          tokenDetails.child_address
+                        );
+                      }}
+                    />
+                  </div>
+                </TableCell>
+              )}
               <TableCell className="flex items-center gap-2">
                 <Image
                   src={tokenDetails.logo_url}