added PWA shell

AssetMantle · Nov 28, 2024 · a32d73f · a32d73f
1 parent d20f334
commit a32d73f
Show file tree

Hide file tree

Showing 13 changed files with 4,827 additions and 83 deletions.
diff --git a/next.config.js b/next.config.js
@@ -1,7 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
+const withPWA = require('@ducanh2912/next-pwa').default({
+  dest: 'public',
+  register: true,
+  skipWaiting: true,
+  buildExcludes: [/middleware-manifest\.json$/],
+});
+
+module.exports = withPWA({
   reactStrictMode: true,
-  swcMinify: true,
-}
+  // Add other Next.js configurations here
+});
 
-module.exports = nextConfig
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "@cosmjs/stargate": "0.32.3",
     "@cosmology-ui/react": "0.1.8-beta.33",
     "@cosmos-kit/react": "2.17.0",
+    "@ducanh2912/next-pwa": "^10.2.9",
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
     "@interchain-ui/react": "^1.23.29",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,26 +1,32 @@
-import '../styles/globals.css';
-import '@interchain-ui/react/styles';
+import "@interchain-ui/react/styles";
+import "../styles/globals.css";
 
-import type { AppProps } from 'next/app';
+import type { AppProps } from "next/app";
 
-import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 // import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
-import { SignerOptions, wallets } from 'cosmos-kit';
-import { ChainProvider } from '@cosmos-kit/react';
-import { assets, chains } from 'chain-registry';
-import { aminoTypes, registry } from '../config/defaults';
-import { GasPrice } from '@cosmjs/stargate';
+import { GasPrice } from "@cosmjs/stargate";
+import { ChainProvider } from "@cosmos-kit/react";
+import { assets, chains } from "chain-registry";
+import { SignerOptions, wallets } from "cosmos-kit";
+import { aminoTypes, registry } from "../config/defaults";
 
-import { Box, ThemeProvider, Toaster, useTheme, useColorModeValue } from '@interchain-ui/react';
+import {
+  Box,
+  ThemeProvider,
+  useColorModeValue,
+  useTheme,
+} from "@interchain-ui/react";
+import Head from "next/head";
 
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       retry: 2,
       refetchOnWindowFocus: false,
-    }
-  }
+    },
+  },
 });
 
 function CreateCosmosApp({ Component, pageProps }: AppProps) {
@@ -37,48 +43,105 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) {
     // @ts-ignore
     signingCosmwasm: (chain: Chain) => {
       switch (chain.chain_name) {
-        case 'osmosis':
-        case 'osmosistestnet':
+        case "osmosis":
+        case "osmosistestnet":
           return {
-            gasPrice: GasPrice.fromString('0.0025uosmo'),
+            gasPrice: GasPrice.fromString("0.0025uosmo"),
           };
       }
     },
   };
 
   return (
-    <ThemeProvider>
-      <ChainProvider
-        // @ts-ignore
-        chains={chains}
-        // @ts-ignore
-        assetLists={assets}
-        wallets={wallets}
-        walletConnectOptions={{
-          signClient: {
-            projectId: 'a8510432ebb71e6948cfd6cde54b70f7',
-            relayUrl: 'wss://relay.walletconnect.org',
-            metadata: {
-              name: 'Cosmos Kit dApp',
-              description: 'Cosmos Kit dApp built by Create Cosmos App',
-              url: 'https://docs.cosmology.zone/cosmos-kit/',
-              icons: [],
-            },
-          },
-        }}
-        signerOptions={signerOptions}
-      >
-        <QueryClientProvider client={queryClient}>
-          <Box className={themeClass} minHeight="100dvh" backgroundColor={useColorModeValue('$white', '$background')}>
-            {/* TODO fix type error */}
-            {/* @ts-ignore */}
-            <Component {...pageProps} />
-          </Box>
-        </QueryClientProvider>
-      </ChainProvider>
+    <>
+      <Head>
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <title>AMI Names</title>
+        <meta name="description" content="Claim your AMI Names" />
+        <link rel="shortcut icon" href="/favicon.ico" />
+
+        {/* Icons from manifest */}
+        <link
+          rel="mask-icon"
+          href="/icons/web-app-manifest-192x192.png"
+          color="#000000"
+        />
+        <link
+          rel="icon"
+          href="/icons/web-app-manifest-192x192.png"
+          sizes="192x192"
+          type="image/png"
+        />
+        <link
+          rel="icon"
+          href="/icons/web-app-manifest-384x384.png"
+          sizes="384x384"
+          type="image/png"
+        />
+        <link
+          rel="icon"
+          href="/icons/web-app-manifest-512x512.png"
+          sizes="512x512"
+          type="image/png"
+        />
+
+        {/* Manifest Link */}
+        <link rel="manifest" href="/manifest.json" />
 
-      <Toaster position={'top-right'} closeButton={true} />
-    </ThemeProvider>
+        {/* Theme Color */}
+        <meta name="theme-color" content="#000000" />
+
+        {/* Twitter Meta Tags */}
+        <meta name="twitter:card" content="summary" />
+        <meta name="twitter:url" content="https://yourdomain.com" />
+        <meta name="twitter:title" content="AMI Names" />
+        <meta name="twitter:description" content="Claim your AMI Names" />
+        <meta name="twitter:image" content="/icons/twitter.png" />
+        <meta name="twitter:creator" content="@YourTwitterHandle" />
+
+        {/* Open Graph Meta Tags */}
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content="AMI Names" />
+        <meta property="og:description" content="Claim your AMI Names" />
+        <meta property="og:site_name" content="AMI Names" />
+        <meta property="og:url" content="https://yourdomain.com" />
+        <meta property="og:image" content="/icons/og.png" />
+      </Head>
+      <ThemeProvider>
+        <ChainProvider
+          // @ts-ignore
+          chains={chains}
+          // @ts-ignore
+          assetLists={assets}
+          wallets={wallets}
+          walletConnectOptions={{
+            signClient: {
+              projectId: "a8510432ebb71e6948cfd6cde54b70f7",
+              relayUrl: "wss://relay.walletconnect.org",
+              metadata: {
+                name: "Cosmos Kit dApp",
+                description: "Cosmos Kit dApp built by Create Cosmos App",
+                url: "https://docs.cosmology.zone/cosmos-kit/",
+                icons: [],
+              },
+            },
+          }}
+          signerOptions={signerOptions}
+        >
+          <QueryClientProvider client={queryClient}>
+            <Box
+              className={themeClass}
+              minHeight="100dvh"
+              backgroundColor={useColorModeValue("$white", "$background")}
+            >
+              {/* TODO fix type error */}
+              {/* @ts-ignore */}
+              <Component {...pageProps} />
+            </Box>
+          </QueryClientProvider>
+        </ChainProvider>
+      </ThemeProvider>
+    </>
   );
 }
 

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/icons/web-app-manifest-192x192.png b/public/icons/web-app-manifest-192x192.png
diff --git a/public/icons/web-app-manifest-384x384.png b/public/icons/web-app-manifest-384x384.png
diff --git a/public/icons/web-app-manifest-512x512.png b/public/icons/web-app-manifest-512x512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,28 @@
+{
+  "name": "AMI Names",
+  "short_name": "AMI Names",
+  "description": "Claim your AMI Names",
+  "icons": [
+    {
+      "src": "/icons/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icons/web-app-manifest-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#000000",
+  "background_color": "#FFFFFF",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait"
+}
diff --git a/public/sw.js b/public/sw.js
diff --git a/public/sw.js.map b/public/sw.js.map