feat: init

covalenthq · Feb 7, 2024 · ca32f46 · ca32f46
1 parent 53a6168
commit ca32f46
Show file tree

Hide file tree

Showing 55 changed files with 11,101 additions and 1 deletion.
diff --git a/.env.example b/.env.example
@@ -0,0 +1 @@
+NEXT_PUBLIC_COVALENT_API_KEY
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 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.
diff --git a/README.md b/README.md
@@ -1 +1,36 @@
-# goldrush-tx-receipt-ui
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [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.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+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.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import { Analytics } from "@vercel/analytics/react"
+
+import "@/styles/globals.css"
+import "@covalenthq/goldrush-kit/styles.css"
+import { Theme } from "@radix-ui/themes"
+
+import { fontSans } from "@/lib/fonts"
+import { cn } from "@/lib/utils"
+import { SiteHeader } from "@/components/site-header"
+import { ThemeProvider } from "@/components/theme-provider"
+
+import "@radix-ui/themes/styles.css"
+import { TXProvider } from "@/lib/store"
+import { Toaster } from "@/components/ui/toaster"
+import { Footer } from "@/components/footer"
+import { KeyDialog } from "@/components/key-dialog"
+
+interface RootLayoutProps {
+  children: React.ReactNode
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <>
+      <html lang="en" suppressHydrationWarning>
+        <head />
+        <body
+          className={cn(
+            "min-h-screen bg-background font-sans antialiased",
+            fontSans.variable
+          )}
+        >
+          <Theme>
+            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+              <TXProvider>
+                <div className="relative flex min-h-screen flex-col">
+                  <SiteHeader />
+                  <div className="flex-1">{children}</div>
+                  <Analytics />
+                  <Footer />
+                  <KeyDialog />
+                  <Toaster />
+                </div>
+              </TXProvider>
+            </ThemeProvider>
+          </Theme>
+        </body>
+      </html>
+    </>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import { useContext, useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import { ChainItem, CovalentClient } from "@covalenthq/client-sdk"
+import { Flex } from "@radix-ui/themes"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { TXContext } from "@/lib/store"
+import { COVALENT_API_KEY, cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { useToast } from "@/components/ui/use-toast"
+
+export default function IndexPage() {
+  const { txHash } = useContext(TXContext)
+  const [allChains, setChains] = useState<ChainItem[]>([])
+  const [address, setAddress] = useState(
+    txHash
+      ? txHash
+      : "0x7a038d2f5be4d196a3ff389497f8d61a639e4a32d353758b4f062cafbc5d475c"
+  )
+  const [busy, setBusy] = useState<boolean>(false)
+  const router = useRouter()
+  const [open, setOpen] = useState<boolean>(false)
+  const [value, setValue] = useState("eth-mainnet")
+  const { toast } = useToast()
+
+  const handleAllChains = async () => {
+    setBusy(true)
+    if (!COVALENT_API_KEY) return
+
+    const client = new CovalentClient(COVALENT_API_KEY)
+    try {
+      const allChainsResp = await client.BaseService.getAllChains()
+      if (allChainsResp.error) {
+        toast({
+          variant: "destructive",
+          title: "Something went wrong.",
+          description: allChainsResp.error_message,
+        })
+      }
+      setChains(allChainsResp.data.items)
+    } catch (exception) {
+      console.log(exception)
+    }
+    setBusy(false)
+  }
+
+  useEffect(() => {
+    handleAllChains()
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <section className="container flex flex-col justify-center gap-6 md:py-10 h-[calc(100vh-150px)] items-center ">
+      <Flex direction="column" gap="4">
+        <h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
+          GoldRush Transaction Receipt UI
+        </h1>
+        <p className="max-w-[700px] text-lg text-muted-foreground">
+          Accessible and customizable components that you can copy and paste
+          into your apps. Free. Open Source. And Next.js 13 Ready.
+        </p>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            router.push(`/tx/${value}/${address}`)
+          }}
+        >
+          <Flex direction="column" gap="3">
+            <Popover open={open} onOpenChange={setOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={open}
+                  className="w-[560px] justify-between"
+                >
+                  {value
+                    ? allChains.find((chain) => chain.name === value)?.label
+                    : "Select chain..."}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-[400px] p-0">
+                <Command>
+                  <CommandInput placeholder="Search framework..." />
+                  <CommandEmpty>No chain found.</CommandEmpty>
+                  <CommandGroup className="">
+                    {allChains.map((chain) => (
+                      <CommandItem
+                        key={chain.label}
+                        value={chain.name}
+                        onSelect={(currentValue) => {
+                          setValue(currentValue === value ? "" : currentValue)
+                          setOpen(false)
+                        }}
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-4 w-4",
+                            value === chain.label ? "opacity-100" : "opacity-0"
+                          )}
+                        />
+                        {chain.label}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </Command>
+              </PopoverContent>
+            </Popover>
+            <Label htmlFor="contract_address">Transaction Hash</Label>
+            <Input
+              className="w-[560px]"
+              type="input"
+              id="address"
+              placeholder="Contract Address"
+              value={address}
+              onChange={(e) => {
+                setAddress(e.target.value)
+              }}
+            />
+            <div>
+              <Button
+                disabled={address.length === 0 || !value || busy}
+                type="submit"
+              >
+                Continue
+              </Button>
+            </div>
+          </Flex>
+        </form>
+      </Flex>
+    </section>
+  )
+}
diff --git a/app/settings/layout.tsx b/app/settings/layout.tsx
@@ -0,0 +1,16 @@
+import "@/styles/globals.css"
+import { Flex} from '@radix-ui/themes';
+import '@radix-ui/themes/styles.css';
+
+interface DashboardLayoutProps {
+  children: React.ReactNode
+}
+
+export default function DashboardLayout({ children }: DashboardLayoutProps) {
+
+  return (
+    <Flex className="container min-h-[calc(100vh-150px)] py-8">
+        {children}
+    </Flex>
+  )
+}