fix: html semantics + disable rehydration (#53)

* fix: html semantics * feat: update pkgs * feat: add custom wallet * feat: Clean up * small improvement --------- Co-authored-by: marc2332 <[email protected]>
boxfish-studio · Jan 31, 2023 · 9d37fe7 · 9d37fe7
1 parent d77554e
commit 9d37fe7
Show file tree

Hide file tree

Showing 11 changed files with 418 additions and 405 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+*.d.ts
diff --git a/components/Layout/Wallet.tsx b/components/Layout/Wallet.tsx
@@ -1,16 +1,25 @@
 import type { FC } from 'react';
-
+import { useWallet } from '@solana/wallet-adapter-react';
 import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
 
-const Wallet: FC = () => (
-  <div
-    className="d-flex "
-    style={{
-      transform: 'scale(0.7)',
-    }}
-  >
-    <WalletMultiButton />
-  </div>
-);
+const Wallet: FC = () => {
+  const { publicKey } = useWallet();
+  return (
+    <div
+      className="d-flex "
+      style={{
+        transform: 'scale(0.7)',
+      }}
+    >
+      <WalletMultiButton className="solana-wallet-adapter-button">
+        {!publicKey
+          ? 'Connect Wallet'
+          : publicKey?.toBase58().slice(0, 4) +
+            '..' +
+            publicKey?.toBase58().slice(-4)}{' '}
+      </WalletMultiButton>
+    </div>
+  );
+};
 
 export default Wallet;
diff --git a/components/Table/HeaderTable.tsx b/components/Table/HeaderTable.tsx
@@ -90,7 +90,7 @@ const HeaderTable: React.FC<{ tokensAmount: number }> = ({
               onClick={createToken}
               leadingIcon={minting ? HourglassIcon : null}
             >
-              <text className=" text-bold">Create token</text>
+              <span className=" text-bold">Create token</span>
             </Button>
           )}
           <Button
@@ -105,7 +105,7 @@ const HeaderTable: React.FC<{ tokensAmount: number }> = ({
             onClick={triggerRefresh}
           >
             <StyledOcticon icon={SyncIcon} size={14} color="text" />
-            <text className="ml-2">Refresh</text>
+            <span className="ml-2">Refresh</span>
           </Button>
         </Header.Item>
       </div>

diff --git a/components/Table/Row.tsx b/components/Table/Row.tsx
@@ -80,14 +80,14 @@ const Row: React.FC<RowProps> = (props) => {
               color={issueColor()}
             />
             <div className="d-flex flex-column flex-justify-center ml-3">
-              <p className="f4 m-0 p-0 text-bold d-flex">
+              <div className="f4 m-0 p-0 text-bold d-flex">
                 Token name{' '}
                 {props.tokenTicker && (
                   <p className="m-0 ml-3 color-fg-muted text-bold f-5">
                     [{props.tokenTicker}]
                   </p>
                 )}
-              </p>
+              </div>
               <p className="f5 text-light">{props.tokenName}</p>
             </div>
           </Header.Item>
@@ -149,7 +149,7 @@ const Row: React.FC<RowProps> = (props) => {
               leadingIcon={action === Actions.Mint ? HourglassIcon : null}
               onClick={mintTokens}
             >
-              <text className="text-bold">Mint</text>
+              <div className="text-bold">Mint</div>
             </Button>
           </Header.Item>
           <Header.Item
@@ -223,7 +223,7 @@ const Row: React.FC<RowProps> = (props) => {
               leadingIcon={action === Actions.Sending ? HourglassIcon : null}
               onClick={transferTokens}
             >
-              <text className="text-bold">Send</text>
+              <div className="text-bold">Send</div>
             </Button>
           </Header.Item>
         </div>

diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,5 +1,5 @@
-// / <reference types="next" />
-// / <reference types="next/image-types/global" />
+/// <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.
diff --git a/package.json b/package.json
@@ -16,14 +16,13 @@
     "@next/eslint-plugin-next": "^13.1.5",
     "@primer/css": "^20.8.0",
     "@primer/octicons-react": "^17.10.2",
-    "@primer/react": "^35.17.0",
+    "@primer/react": "^35.18.0",
     "@solana/spl-token": "^0.3.7",
     "@solana/wallet-adapter-base": "^0.9.20",
     "@solana/wallet-adapter-react": "^0.15.28",
     "@solana/wallet-adapter-react-ui": "^0.9.27",
-    "@solana/wallet-adapter-wallets": "^0.19.10",
+    "@solana/wallet-adapter-wallets": "^0.19.11",
     "@solana/web3.js": "^1.73.0",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
     "deepmerge": "^4.2.2",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
@@ -41,6 +40,7 @@
     "eslint": "8.32.0",
     "eslint-config-next": "13.1.5",
     "octicons-react": "link:@types/@primer/octicons-react",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
     "prettier": "^2.8.3",
     "typescript": "4.9.4"
   },

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -2,7 +2,14 @@
 import type { AppProps } from 'next/app';
 import type { Network } from 'contexts';
 
-import { type ReactNode, useMemo, useState, type FC } from 'react';
+import {
+  type ReactNode,
+  useMemo,
+  useState,
+  type FC,
+  useEffect,
+  PropsWithChildren,
+} from 'react';
 import { WalletProvider } from '@solana/wallet-adapter-react';
 import {
   GlowWalletAdapter,
@@ -42,6 +49,18 @@ const CustomThemeProvider: FC<ThemeProviderProps & { children: ReactNode }> = ({
   ...props
 }) => <ThemeProvider {...props}>{children}</ThemeProvider>;
 
+function ClientWrapper({ children }: PropsWithChildren) {
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  if (!hasMounted) return null;
+
+  return <>{children}</>;
+}
+
 function MyApp({ Component, pageProps }: AppProps) {
   const [connection, setConnection] = useState<Connection | null>(null);
   const [network, setNetwork] = useState<Network | null>(null);
@@ -61,26 +80,28 @@ function MyApp({ Component, pageProps }: AppProps) {
   );
 
   return (
-    <ConnectionContext.Provider
-      value={{
-        connection,
-        setConnection,
-        network,
-        setNetwork,
-        url,
-        setUrl,
-      }}
-    >
-      <WalletProvider wallets={wallets}>
-        <WalletModalProvider>
-          <CustomThemeProvider theme={customTheme} colorMode="day">
-            <BaseStyles>
-              <Component {...pageProps} />
-            </BaseStyles>
-          </CustomThemeProvider>
-        </WalletModalProvider>
-      </WalletProvider>
-    </ConnectionContext.Provider>
+    <ClientWrapper>
+      <ConnectionContext.Provider
+        value={{
+          connection,
+          setConnection,
+          network,
+          setNetwork,
+          url,
+          setUrl,
+        }}
+      >
+        <WalletProvider wallets={wallets}>
+          <WalletModalProvider>
+            <CustomThemeProvider theme={customTheme} colorMode="day">
+              <BaseStyles>
+                <Component {...pageProps} />
+              </BaseStyles>
+            </CustomThemeProvider>
+          </WalletModalProvider>
+        </WalletProvider>
+      </ConnectionContext.Provider>
+    </ClientWrapper>
   );
 }
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -5,7 +5,7 @@ import Head from 'next/head';
 import { Header } from 'components/Layout';
 import { Table } from 'components/Table';
 import { Toast } from 'components/Layout';
-import { version } from 'version.json';
+import versionJson from 'version.json';
 import { HasMongoUriContext } from 'contexts';
 
 export function getServerSideProps() {
@@ -35,26 +35,24 @@ const Home: NextPage<{ HAS_MONGO_URI: boolean }> = ({ HAS_MONGO_URI }) => (
       <Toast />
       <footer>
         <div>
-          <a href="https://github.com/boxfish-studio/fontana/">
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              className="color-fg-muted"
-              style={{ cursor: 'pointer' }}
-            >
-              <u>Fontana {version}</u>
-            </a>
+          <a
+            href="https://github.com/boxfish-studio/fontana/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="color-fg-muted"
+            style={{ cursor: 'pointer' }}
+          >
+            <u>Fontana {versionJson.version}</u>
           </a>
           <span className="color-fg-muted"> - by </span>
-          <a href="https://boxfish.studio/">
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              className="color-fg-muted"
-              style={{ cursor: 'pointer' }}
-            >
-              <u>Boxfish Studio</u>
-            </a>
+          <a
+            href="https://boxfish.studio/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="color-fg-muted"
+            style={{ cursor: 'pointer' }}
+          >
+            <u>Boxfish Studio</u>
           </a>
         </div>
       </footer>