feat: create Example Directory and Example Node.js D(AA)pp [1/n]

.gitignore

@@ -19,4 +19,5 @@ tsconfig*.tsbuildinfo
 .envrc
 .npmrc
 yarn-error.log
-lerna-debug.log
+lerna-debug.log
+.tool-versions

examples/alchemy-daapp/.env.example

@@ -0,0 +1,6 @@
+# When adding additional environment variables, the schema in "/src/env.mjs"
+# should be updated accordingly.
+
+# Example:
+NFT_CONTRACT_ADDRESS=""
+ALCHEMY_API_URL=""

examples/alchemy-daapp/.eslintrc.cjs

@@ -0,0 +1,35 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require("path");
+
+/** @type {import("eslint").Linter.Config} */
+const config = {
+  overrides: [
+    {
+      extends: [
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+      ],
+      files: ["*.ts", "*.tsx"],
+      parserOptions: {
+        project: path.join(__dirname, "tsconfig.json"),
+      },
+    },
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: path.join(__dirname, "tsconfig.json"),
+  },
+  plugins: ["@typescript-eslint"],
+  extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
+  rules: {
+    "@typescript-eslint/consistent-type-imports": [
+      "warn",
+      {
+        prefer: "type-imports",
+        fixStyle: "inline-type-imports",
+      },
+    ],
+    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+  },
+};
+
+module.exports = config;

examples/alchemy-daapp/README.md

@@ -0,0 +1,3 @@
+# Alchemy dAApp
+
+Alchemy account abstraction sample application.

examples/alchemy-daapp/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/alchemy-daapp/next.config.mjs

@@ -0,0 +1,22 @@
+/**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
+ * for Docker builds.
+ */
+await import("./src/env.mjs");
+
+/** @type {import("next").NextConfig} */
+const config = {
+  reactStrictMode: true,
+
+  /**
+   * If you have `experimental: { appDir: true }` set, then you must comment the below `i18n` config
+   * out.
+   *
+   * @see https://github.com/vercel/next.js/issues/41980
+   */
+  i18n: {
+    locales: ["en"],
+    defaultLocale: "en",
+  },
+};
+export default config;

examples/alchemy-daapp/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "alchemy-daapp",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^2.6.1",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@t3-oss/env-nextjs": "^0.2.1",
+    "@tanstack/query-sync-storage-persister": "^4.29.7",
+    "@tanstack/react-query": "^4.29.7",
+    "@tanstack/react-query-persist-client": "^4.29.7",
+    "framer-motion": "^10.12.12",
+    "next": "^13.4.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router-dom": "^6.11.2",
+    "zod": "^3.21.4"
+  },
+  "devDependencies": {
+    "@types/eslint": "^8.21.3",
+    "@types/node": "^18.15.5",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.56.0",
+    "@typescript-eslint/parser": "^5.56.0",
+    "eslint": "^8.36.0",
+    "eslint-config-next": "^13.4.1",
+    "typescript": "^5.0.2"
+  },
+  "ct3aMetadata": {
+    "initVersion": "7.13.0"
+  }
+}

examples/alchemy-daapp/src/clients/nfts.ts

@@ -0,0 +1,13 @@
+import {useQuery} from "@tanstack/react-query";
+import {getNFTs} from "../http/endpoints";
+import {OwnedNFTsResponse} from "../declarations/api";
+
+export function useNFTsQuery(ethAddress?: string) {
+  return useQuery(["nfts", ethAddress], () => {
+    if (ethAddress) {
+      return getNFTs(ethAddress);
+    } else {
+      return Promise.resolve({data: []} as unknown as OwnedNFTsResponse);
+    }
+  });
+}

examples/alchemy-daapp/src/clients/onboarding.ts

@@ -0,0 +1,72 @@
+import {useCallback, useState} from "react";
+
+export interface OnboardingContext {
+  accountAddress?: string;
+}
+
+export interface OnboardingStep {
+  percent: number;
+  description: string;
+  title: string;
+  identifier: OnboardingStepIdentifier;
+  params: OnboardingContext;
+}
+
+enum OnboardingStepIdentifier {
+  INITIAL_STEP = "initial-step",
+  DONE = "done",
+}
+
+export function useOnboardingController() {
+  const [currentStep, updateStep] = useState<OnboardingStep>({
+    percent: 0,
+    description: "Pulling together current information for account creation.",
+    title: "Gathering Information",
+    identifier: OnboardingStepIdentifier.INITIAL_STEP,
+    params: {},
+  });
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const go = useCallback(async () => {
+    try {
+      let inMemStep = currentStep;
+      function _updateStep(step: OnboardingStep) {
+        inMemStep = step;
+        updateStep(step);
+      }
+      if (inMemStep.identifier === OnboardingStepIdentifier.INITIAL_STEP) {
+        _updateStep({
+          percent: 100,
+          description: "We need to impliment onboarding still! 👀",
+          title: "Done 🔥",
+          params: {},
+          identifier: OnboardingStepIdentifier.DONE,
+        });
+      }
+      throw new Error("Unknown step identifier");
+    } catch (e) {
+      throw e;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [updateStep, currentStep]);
+
+  const reset = useCallback(() => {
+    updateStep({
+      percent: 0,
+      description: "Pulling together current information for account creation.",
+      title: "Gathering Information",
+      identifier: OnboardingStepIdentifier.INITIAL_STEP,
+      params: {},
+    });
+  }, [updateStep]);
+
+  return {
+    currentStep,
+    updateStep,
+    isLoading,
+    go,
+    reset,
+  };
+}

examples/alchemy-daapp/src/clients/query.ts

@@ -0,0 +1,23 @@
+import { QueryClient } from "@tanstack/react-query";
+import { persistQueryClient } from "@tanstack/react-query-persist-client";
+import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      cacheTime: 1000 * 60 * 60 * 1, // 1 hours
+    },
+  },
+});
+
+if (typeof window !== "undefined") {
+  const localStoragePersister = createSyncStoragePersister({
+    storage: window.localStorage,
+  });
+  persistQueryClient({
+    queryClient,
+    persister: createSyncStoragePersister({
+      storage: window.localStorage,
+    }),
+  });
+}

examples/alchemy-daapp/src/components/NavigationBar.tsx

@@ -0,0 +1,19 @@
+import { Flex } from "@chakra-ui/react";
+import { Link } from "react-router-dom";
+import Image from "next/image";
+
+export default function NavigationBar() {
+  return (
+    <Flex
+      padding="20px 10px"
+      marginBottom="25px"
+      justifyContent="center"
+      alignItems="center"
+      position="relative"
+    >
+      <Link to="/">
+        <Image width={250} height={100} src="/logo.svg" alt="logo" />
+      </Link>
+    </Flex>
+  );
+}