feat(charity): add new app for charity (#159)

* feat(charity): add new app for charity

* feat(charity): remove and reinstall packages

* fix(ui): nav item style

apps/charity/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  extends: '@mantle/eslint-config-next',
+  settings: {
+    next: {
+      rootDir: ['apps/*/'],
+    },
+  },
+  rules: {
+    'import/no-extraneous-dependencies': 'off',
+    'import/prefer-default-export': 'off',
+  },
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json',
+  },
+}

apps/charity/.gitignore

@@ -0,0 +1,37 @@
+# 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*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/charity/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "useTabs": false
+}

apps/charity/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "../../node_modules/.pnpm/[email protected]/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

apps/charity/README.md

@@ -0,0 +1,3 @@
+# App Template
+
+This app is about minting NFT for Selini poker night.

apps/charity/next.config.js

@@ -0,0 +1,28 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ["@design-system/ui"],
+  images: {
+    domains: [
+      "token-list.mantle.xyz",
+      "safe-transaction-assets.gnosis-safe.io",
+      "safe-transaction-assets.safe.global",
+      "static.alchemyapi.io",
+    ],
+  },
+  experimental: {
+    appDir: true,
+    scrollRestoration: true,
+  },
+  async redirects() {
+    return [
+      {
+        source: "/",
+        destination: "/chivalries-of-mantle",
+        permanent: false,
+      },
+    ];
+  },
+};
+
+module.exports = nextConfig;

apps/charity/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "mantle-charity",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port 3009",
+    "build": "next build",
+    "test": "echo 'Running charity tests'",
+    "start": "next start --port 3009",
+    "lint": "eslint src --fix",
+    "dev:charity": "next dev --port 3009",
+    "lint:charity": "eslint src --fix"
+  },
+  "dependencies": {
+    "@ethersproject/providers": "^5.7.2",
+    "@headlessui/react": "^1.7.13",
+    "@mantle/constants": "workspace:*",
+    "@mantle/ui": "workspace:*",
+    "@mantle/utils": "workspace:*",
+    "@tanstack/react-query": "^4.14.5",
+    "ethers": "^5.7.2",
+    "framer-motion": "^10.12.10",
+    "next": "13.3.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-icons": "^4.8.0",
+    "wagmi": "^1.3.9",
+    "zustand": "^4.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@mantle/eslint-config-next": "workspace:*",
+    "@mantle/tailwind-config": "workspace:*",
+    "@mantle/tsconfig": "workspace:*",
+    "@types/node": "18.11.3",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
+    "autoprefixer": "^10.4.12",
+    "clsx": "^1.2.1",
+    "eslint": "^8.30.0",
+    "postcss": "^8.4.18",
+    "tailwindcss": "^3.2.1",
+    "typescript": "5.0.4"
+  }
+}

apps/charity/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/charity/src/app/chivalries-of-mantle/page.tsx

@@ -0,0 +1,4 @@
+// Page components
+export default async function Page() {
+  return <>TODO</>;
+}

apps/charity/src/app/head.tsx

@@ -0,0 +1,33 @@
+import {
+  ABSOLUTE_PATH,
+  APP_NAME,
+  META,
+  OG_TITLE,
+  TWITTER_DESC,
+  TWITTER_TITLE,
+} from "@config/constants";
+import { Cookies } from "@mantle/ui";
+
+export default function Head() {
+  return (
+    <>
+      <title>{APP_NAME}</title>
+      <link rel="icon" href="/favicon.ico" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content={`${OG_TITLE}`} />
+      <meta property="og:image" content={`${ABSOLUTE_PATH}/opengraph.png`} />
+      <meta name="description" content={`${META}`} />
+
+      <meta name="twitter:card" content="summary" />
+      <meta name="twitter:site" content="@0xMantle" />
+      <meta name="twitter:title" content={`${TWITTER_TITLE}`} />
+      <meta name="twitter:creator" content="@0xMantle" />
+      <meta name="twitter:description" content={`${TWITTER_DESC}`} />
+      <meta name="twitter:image" content={`${ABSOLUTE_PATH}/twitter.png`} />
+      <meta name="google" content="nositelinkssearchbox" />
+      <Cookies siteId="302" />
+    </>
+  );
+}

apps/charity/src/app/layout.tsx

@@ -0,0 +1,54 @@
+import "./styles/globals.css";
+
+// Dummy components
+import {
+  GTWalsheim,
+  PageWrapper,
+  // PageBackroundImage,
+  PageContainer,
+  SlimFooter,
+} from "@mantle/ui";
+
+import Head from "@app/head";
+import Providers from "@app/providers";
+
+import Nav from "@components/Nav";
+import CONST from "@mantle/constants";
+
+// import bgDesktop from "../../public/bg/bg-header-desktop.png";
+// import bgIpad from "../../public/bg/bg-ipad.png";
+// import bgIpadMini from "../../public/bg/bg-ipad-mini.png";
+// import bgMobile from "../../public/bg/bg-mobile.png";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className={`${GTWalsheim.className}`}>
+      <Head />
+      <body className="antialiased">
+        {/* @ts-expect-error Server Component */}
+        <Providers>
+          <PageWrapper
+            // TODO: setup different bg image here
+            // siteBackroundImage={
+            //   <PageBackroundImage
+            //     imgSrc={bgDesktop}
+            //     altDesc="Charity Background Image"
+            //   />
+            // }
+            header={<Nav />}
+            className="min-h-screen justify-between"
+          >
+            <PageContainer className="grow items-center">
+              {children}
+            </PageContainer>
+            <SlimFooter url={CONST.WEBSITE} />
+          </PageWrapper>
+        </Providers>
+      </body>
+    </html>
+  );
+}

apps/charity/src/app/page.tsx

@@ -0,0 +1,5 @@
+// Page components
+
+export default async function Page() {
+  return null;
+}

apps/charity/src/app/providers.tsx

@@ -0,0 +1,19 @@
+import { WagmiProvider } from "@providers/wagmiContext";
+import { StateProvider } from "@providers/stateContext";
+import WalletProvider from "@providers/walletProvider";
+
+// TODO: remove unused providers
+export default async function Providers({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <WagmiProvider>
+      <StateProvider>
+        <WalletProvider />
+        {children}
+      </StateProvider>
+    </WagmiProvider>
+  );
+}