feat(dapp): prepare for v2 Staking

components/navigation.tsx

@@ -7,6 +7,7 @@ import dynamic from 'next/dynamic';
 import { Account } from './web3';
 import OverflowMenu from './overflowMenu';
 import MobileMenu from './mobileMenu';
+import useWalletModal from '@/hooks/useWalletModal';
 
 function NavigationItem({ text, href }: { text: string; href: string }) {
   const { asPath } = useRouter();
@@ -105,7 +106,7 @@ export default function Navigation() {
           </div>
         </li>
       </ul>
-
+      {/* @ts-ignore */}
       <WalletModal />
     </nav>
   );

custom-media.css

@@ -0,0 +1,5 @@
+@custom-media --small (max-width: 767px);
+@custom-media --small-up (min-width: 0px);
+@custom-media --medium (min-width: 768px) and (max-width: 1119px);
+@custom-media --medium-up (min-width: 768px);
+@custom-media --large (min-width: 1120px);

hooks/useWalletModal.test.ts

@@ -0,0 +1,13 @@
+import { invariant } from './useWalletModal';
+
+test('should throw on failed condition', () => {
+  expect(() => {
+    return invariant(false, 'fail');
+  }).toThrow('Invariant failed: fail');
+});
+
+test('should not throw on passed condition', () => {
+  expect(() => {
+    invariant(true, 'pass');
+  }).not.toThrow();
+});

hooks/useWalletModal.ts

@@ -1,13 +1,27 @@
 import create from 'zustand';
 
+const prefix: string = 'Invariant failed';
+
+export function invariant(condition: boolean, message?: string): void {
+  if (condition) {
+    return;
+  }
+
+  throw new Error(`${prefix}: ${message || ''}`);
+}
+
+export type EmptyObject = Record<string, never>; // or {[k: string]: never}
+
 export type State = {
+  EmptyObject: Record<string, never>;
   isOpen: boolean;
   open: () => void;
   close: () => void;
   toggle: () => void;
 };
 
 const useWalletModal = create<State>((set, get) => ({
+  EmptyObject: {},
   isOpen: false,
   open: () => set({ isOpen: true }),
   close: () => set({ isOpen: false }),

next.config.js

@@ -1,30 +1,57 @@
-/** @type {import('next').NextConfig} */
-module.exports = {
-  reactStrictMode: true,
+// next.config.js
+
+const withPWA = require('next-pwa')
+const runtimeCaching = require('next-pwa/cache')
+const packageJson = require('./package.json');
+const date = new Date();
+const GIT_COMMIT_SHA_SHORT = typeof process.env.GIT_COMMIT_SHA === 'string' && process.env.GIT_COMMIT_SHA.substring(0, 8);
+
+// @ts-check
+/**
+ * @type {import('next').NextConfig}
+ */
+ const nextConfig = {
+  env: {
+    /**
+     * @summary API Key Env Variables
+     */
+    // GITHUB_DISPATCH_TOKEN: process.env.GITHUB_DISPATCH_TOKEN,
+    SENTRY_DSN: process.env.SENTRY_DSN,
+    NEXT_PUBLIC_SENTRY_DSN: process.env.SENTRY_DSN, // Sentry DSN must be provided to the browser for error reporting to work there
+    /**
+    * @const VERCEL_
+    * @see {@link https://vercel.com/docs/environment-variables#system-environment-variables}
+    */
+    VERCEL: process.env.VERCEL,
+    VERCEL_ENV: process.env.VERCEL_ENV,
+    VERCEL_URL: process.env.VERCEL_URL,
+    CI: process.env.CI,
+  },
   productionBrowserSourceMaps: false,
   poweredByHeader: false,
-  optimizeImages: true,
-  optimizeCss: true,
-//  experimental: { 
-//    esmExternals: true,
-//    outputFileTracing: true
-//  },
-  images: {
-    domains: [
-      'raw.githubusercontent.com',
-      'assets.coingecko.com',
-      'logos.covalenthq.com',
-      'www.covalenthq.com',
-      's2.coinmarketcap.com',
-    ],
+  reactStrictMode: true,
+  experimental: {
+    optimizeCss: true,
+    forceSwcTransforms: true,
+  },
+  pwa: {
+    dest: 'public',
+    runtimeCaching,
+    disable: process.env.NODE_ENV === 'development',
   },
-  webpack: (config, { isServer }) => {
-    if (!isServer) {
-      config.resolve.fallback.fs = false
-    }
-    return config
+  async headers() {
+    return [
+      {
+        source: '/*',
+        headers: [{ key: 'Web-Build', value: process.env.VERCEL_GIT_COMMIT_SHA }]
+      }
+    ];
   },
 }
 
+module.exports = withPWA(nextConfig);
+
+console.log('process.env.VERCEL_GIT_COMMIT_SHA: ', process.env.VERCEL_GIT_COMMIT_SHA);
+console.log('process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA: ', process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA);
 // Don't delete this console log, useful to see the config in Vercel deployments
-console.log('next.config.js', JSON.stringify(module.exports, null, 2))
+console.log('next.config.js', JSON.stringify(module.exports, null, 2))