ALL-1648 Add a base of the application

tatumio · Jun 27, 2023 · 05b35dd · 05b35dd
1 parent c748ffd
commit 05b35dd
Show file tree

Hide file tree

Showing 23 changed files with 3,127 additions and 0 deletions.
diff --git a/Metamask/notifications/.eslintrc.json b/Metamask/notifications/.eslintrc.json
@@ -0,0 +1,7 @@
+{
+ "extends": "next/core-web-vitals",
+ "rules": {
+ /* Manually added rule to turn off enforcing of display name in component definition */
+ "react/display-name": "off"
+ }
+}
diff --git a/Metamask/notifications/.gitignore b/Metamask/notifications/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# 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/Metamask/notifications/README.md b/Metamask/notifications/README.md
@@ -0,0 +1,51 @@
+# `metamask-notifications`
+
+> Connect your wallet and get all balances
+
+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) utilizing [`@tatumcom/js`](https://docs.tatum.com/sdk/javascript-typescript-sdk) for a simple [MetaMask](https://metamask.io/) integration. It combines several examples available in [Tatum Docs](https://docs.tatum.com/) into a single straightforward easily customizable mini application capable of connecting to the wallet and ...
+
+![Demo](./public/demo.png)
+
+## Prerequisites
+
+- [Node.js 16.8](https://nodejs.org/en) or later.
+- macOS, Windows (including WSL), and Linux are supported.
+
+In order to be able to connect your wallet, you also need to have the [MetaMask](https://metamask.io/) extension in your browser. For more information on how to install, configure and use it, please refer to [Getting started with MetaMask](https://support.metamask.io/hc/en-us/articles/360015489531-Getting-started-with-MetaMask).
+
+You should also make sure to switch to [Sepolia Testnet](https://sepolia.etherscan.io/) network before interacting with the app...
+
+## Getting Started
+
+First, install all the dependencies:
+
+```bash
+npm install
+# or
+yarn
+# or
+pnpm install
+```
+
+Afterwards, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [https://localhost:3000](https://localhost:3000) with your browser to see the result and feel free to try it out on your own. The project uses following examples (although you can of course fully customize them or try any other ones included in the documentation):
+
+- [Connect a wallet](https://docs.tatum.com/docs/wallet-provider/metamask/connect-a-wallet)
+- [Get all assets the wallet holds](https://docs.tatum.com/docs/wallet-address-operations/get-all-assets-the-wallet-holds)
+- ...
+
+## Learn More
+
+To learn more about Tatum SDK, take a look at the following resources:
+
+- [Tatum Documentation](https://docs.tatum.com/) - learn more about Tatum features, SDK and API.
+- [Example Applications](https://github.com/tatumio/example-apps) - further interactive mini application examples.
diff --git a/Metamask/notifications/app/favicon.ico b/Metamask/notifications/app/favicon.ico
diff --git a/Metamask/notifications/app/globals.css b/Metamask/notifications/app/globals.css
@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ background-color: transparent;
+ background-image: url("../public/bg.svg");
+ background-size: cover;
+ background-repeat: no-repeat;
+}
+
+.tatum {
+ background-image: linear-gradient(130deg, #513bff, #89ffca);
+ transition: all 0.25s ease-out;
+ color: white;
+}
+
+.tatum:hover {
+ background-image: linear-gradient(130deg, #5468ff, #b5fee2);
+ transform: translateY(-2px);
+}
diff --git a/Metamask/notifications/app/layout.tsx b/Metamask/notifications/app/layout.tsx
@@ -0,0 +1,21 @@
+import "./globals.css";
+import { Inter } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+ title: "Metamask Notifications",
+ description: "Connect your wallet and monitor transactions",
+};
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+ <html lang="en">
+ <body className={inter.className}>{children}</body>
+ </html>
+ );
+}
diff --git a/Metamask/notifications/app/page.tsx b/Metamask/notifications/app/page.tsx
@@ -0,0 +1,64 @@
+import Image from "next/image";
+import { Toaster } from "react-hot-toast";
+
+import Metamask from "@/components/organisms/Metamask";
+
+import { metadata } from "./layout";
+
+export default function Home() {
+ return (
+ <main className="flex min-h-screen flex-col items-center justify-between p-24">
+ {/* Third-party component for quick and easy notifications - https://react-hot-toast.com */}
+ <Toaster />
+
+ <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex lg:mb-5">
+ <a
+ className="fixed tatum left-0 top-0 flex w-full justify-center border-b pb-6 pt-8 lg:static lg:w-auto lg:rounded-xl lg:p-4"
+ href="https://github.com/tatumio/example-apps/tree/master/Metamask/notifications"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ &lt; Start developing with&nbsp;
+ <code className="font-bold">{metadata.title}</code>
+ </a>
+ <div className="fixed bottom-0 border-t border-black border-dotted left-0 flex w-full items-end justify-center bg-white lg:static lg:h-auto lg:w-auto lg:bg-none lg:border-none">
+ <a
+ className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
+ href="https://tatum.com/"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ By{" "}
+ <Image
+ src="/tatum.svg"
+ alt="Tatum Logo"
+ width={100}
+ height={24}
+ priority
+ />
+ </a>
+ </div>
+ </div>
+
+ {/* Main portion of the example */}
+ <Metamask />
+
+ <a
+ className="relative text-center min-w-[300px] my-5 bg-white border border-black rounded-lg border px-5 py-4 transition-colors hover:bg-black hover:text-white lg:w-[600px]"
+ href="https://docs.tatum.com/"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <h2 className="text-2xl font-semibold lg:float-left">
+ Docs{" "}
+ <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+ -&gt;
+ </span>
+ </h2>
+ <p className="mt-1.5 text-sm opacity-75 float-right">
+ Find in-depth information about Tatum features, SDK and API.
+ </p>
+ </a>
+ </main>
+ );
+}
diff --git a/Metamask/notifications/components/atoms/Button.tsx b/Metamask/notifications/components/atoms/Button.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { clsxm } from "@/lib/utils";
+
+const Button = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentPropsWithRef<"button">
+>(
+ (
+ {
+ children,
+ disabled,
+ className,
+ ...rest
+ }: React.ComponentPropsWithRef<"button">,
+ ref
+ ): JSX.Element => {
+ return (
+ <button
+ ref={ref}
+ className={clsxm(
+ "flex text-md items-center justify-center font-mono text-center min-w-[150px] min-h-[50px] border border-black rounded-md border p-3 transition-colors hover:bg-white hover:text-black",
+ disabled ? "bg-white text-black" : "bg-black text-white",
+ className
+ )}
+ disabled={disabled}
+ {...rest}
+ >
+ {children}
+ </button>
+ );
+ }
+);
+
+export default Button;
diff --git a/Metamask/notifications/components/atoms/Card.tsx b/Metamask/notifications/components/atoms/Card.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { clsxm } from "@/lib/utils";
+
+const Card = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentPropsWithRef<"div">
+>(
+ (
+ { children, className, ...rest }: React.ComponentPropsWithRef<"div">,
+ _ref
+ ): JSX.Element => {
+ return (
+ <div
+ className={clsxm("flex flex-col items-center space-y-10", className)}
+ {...rest}
+ >
+ {children}
+ </div>
+ );
+ }
+);
+
+export default Card;
diff --git a/Metamask/notifications/components/atoms/Loading.tsx b/Metamask/notifications/components/atoms/Loading.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { clsxm } from "@/lib/utils";
+
+const Loading = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentPropsWithRef<"div">
+>(
+ (
+ { children, className, ...rest }: React.ComponentPropsWithRef<"div">,
+ _ref
+ ): JSX.Element => {
+ return (
+ <div
+ className={clsxm(
+ "inline-block h-6 w-6 animate-spin rounded-full border-4 border-solid border-current border-r-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]",
+ className
+ )}
+ role="status"
+ {...rest}
+ >
+ <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
+ Loading...
+ </span>
+ </div>
+ );
+ }
+);
+
+export default Loading;
diff --git a/Metamask/notifications/components/molecules/Transactions.tsx b/Metamask/notifications/components/molecules/Transactions.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import Card from "../atoms/Card";
+
+const Transactions = ({ txs }: { txs: string[] }): JSX.Element => {
+ return (
+ <Card className="space-y-2 mt-4 text-gray-200 overflow-scroll max-h-40 divide-y">
+ {txs[0] ? (
+ txs.map((tx, index) => (
+ <span className="p-4" key={index}>
+ <p>{tx}</p>
+ </span>
+ ))
+ ) : (
+ <i>No transactions</i>
+ )}
+ </Card>
+ );
+};
+
+export default Transactions;