From 77ccee713d27095e6f72a54c0a781587f1e90327 Mon Sep 17 00:00:00 2001
From: Arnau Espin <43625217+aspnxdd@users.noreply.github.com>
Date: Mon, 1 Aug 2022 10:28:09 +0200
Subject: [PATCH] feat/network switch (#26)

* feat: add network config

* feat: add connection context to app

* feat: network selector

* feat: add sass and primer css

* fix: fix wallet styles

* feat: add tokens filter

* feat: send network to api

* feat: add fallback rpc

* refactor: refactor network selector

* fix: merge error

* fix: merge error

* trigger deployment

* fix: make sure connection is not undefined

* fix

* feat: add network to mongodb

* feat: remove mongo from mainnet

* style: fix header

* fix: add connection to getTokenBalance

* fix: fix connection context to have null default value
---
 components/Layout/NetworkSelector.tsx | 141 +++++++++++++-------------
 components/Layout/index.ts            |   2 +-
 components/Table/HeaderTable.tsx      |  19 +++-
 components/Table/Row.tsx              |  16 +--
 contexts/ConnectionContext.ts         |   4 +-
 contexts/index.ts                     |   1 +
 db/lib.ts                             |   3 +-
 hooks/useCreateToken.ts               |  18 ++--
 hooks/useFetchTokens.ts               |   6 +-
 hooks/useMintAndTransfer.ts           |   5 +-
 lib/create-token.ts                   |   6 +-
 lib/spl.ts                            |   1 -
 pages/_app.tsx                        |   2 +-
 pages/api/mint.ts                     |   1 +
 pages/api/mongo-get.ts                |   2 +-
 types.ts                              |   1 +
 16 files changed, 122 insertions(+), 106 deletions(-)

diff --git a/components/Layout/NetworkSelector.tsx b/components/Layout/NetworkSelector.tsx
index dcbd940..8a9d37c 100644
--- a/components/Layout/NetworkSelector.tsx
+++ b/components/Layout/NetworkSelector.tsx
@@ -1,81 +1,80 @@
-import { FC, useEffect, useRef } from 'react'
-import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
-import { clusterApiUrl, Connection } from '@solana/web3.js'
-import { Network, useConnection } from 'contexts'
+import { FC, useEffect, useRef } from "react";
+import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
+import { clusterApiUrl, Connection } from "@solana/web3.js";
+import { Network, useConnection } from "contexts";
 
-const RPC_API_DEVNET = process.env.NEXT_PUBLIC_RPC_API_DEVNET || clusterApiUrl('devnet')
-const RPC_API_MAINNET = process.env.NEXT_PUBLIC_RPC_API_MAINNET || clusterApiUrl('mainnet-beta')
+const RPC_API_DEVNET =
+  process.env.NEXT_PUBLIC_RPC_API_DEVNET || clusterApiUrl("devnet");
+const RPC_API_MAINNET =
+  process.env.NEXT_PUBLIC_RPC_API_MAINNET || clusterApiUrl("mainnet-beta");
 
 function getUrl(network: Network): string {
-    switch (network) {
-        case 'Devnet':
-            return RPC_API_DEVNET
-        case 'Mainnet':
-            return RPC_API_MAINNET
-        default:
-            throw new Error(`Unknown network: ${network}`)
-    }
+  switch (network) {
+    case "Devnet":
+      return RPC_API_DEVNET;
+    case "Mainnet":
+      return RPC_API_MAINNET;
+    default:
+      throw new Error(`Unknown network: ${network}`);
+  }
 }
 
 const NetworkSelector: FC = () => {
-    const { setConnection, network, setNetwork, setUrl } = useConnection()
-    const detailsRef = useRef<HTMLDetailsElement>(null)
-    function hideUl() {
-        detailsRef.current!.removeAttribute('open')
-    }
+  const { setConnection, network, setNetwork, setUrl } = useConnection();
+  const detailsRef = useRef<HTMLDetailsElement>(null);
 
-    useEffect(() => {
-        const _network = window.localStorage.getItem('network-fontana') as Network | null
-        if (_network === 'Devnet' || _network === 'Mainnet' || _network === 'Testnet') {
-            setNetwork(_network)
-            setConnection(new Connection(getUrl(_network)))
-            setUrl(getUrl(_network))
-            window.localStorage.setItem('network-fontana', _network)
-        }
-        if (!_network) {
-            setNetwork('Devnet')
-            setConnection(new Connection(getUrl('Devnet')))
-            setUrl(getUrl('Devnet'))
-            window.localStorage.setItem('network-fontana', 'Devnet')
-        }
-    }, [])
-    function changeNetwork(_network: Network) {
-        setNetwork(_network)
-            setConnection(new Connection(getUrl(_network)))
-            setUrl(getUrl(_network))
-        hideUl()
-        window.localStorage.setItem('network-fontana', _network)
+  function hideUl() {
+    detailsRef.current!.removeAttribute("open");
+  }
+
+  function changeNetwork(_network: Network) {
+    setNetwork(_network);
+    setConnection(new Connection(getUrl(_network)));
+    setUrl(getUrl(_network));
+    localStorage.setItem("network-fontana", _network);
+  }
+
+  useEffect(() => {
+    const _network = localStorage.getItem("network-fontana") as Network | null;
+    if (_network === "Devnet" || _network === "Mainnet" || _network === "Testnet") {
+      changeNetwork(_network);
+      return;
     }
+    changeNetwork("Devnet");
+  }, []);
 
-    return (
-        <div>
-            <details
-                id='details'
-                className='dropdown details-reset details-overlay d-inline-block cursor-pointer'
-                ref={detailsRef}
-            >
-                <summary className='btn' aria-haspopup='true'>
-                    {network || 'Select Network'}
-                    <span className='dropdown-caret'></span>
-                </summary>
-                {
-                    <ul id='ul' className='dropdown-menu dropdown-menu-se  mt-2'>
-                        {Object.keys(WalletAdapterNetwork)
-                            .filter((e) => e !== 'Testnet')
-                            .map((_network) => (
-                                <li
-                                    className='dropdown-item'
-                                    key={_network}
-                                    onClick={() => changeNetwork(_network as Network)}
-                                >
-                                    {_network}
-                                </li>
-                            ))}
-                    </ul>
-                }
-            </details>
-        </div>
-    )
-}
+  return (
+    <div>
+      <details
+        id="details"
+        className="dropdown details-reset details-overlay d-inline-block cursor-pointer"
+        ref={detailsRef}
+      >
+        <summary className="btn" aria-haspopup="true">
+          {network || "Select Network"}
+          <span className="dropdown-caret"></span>
+        </summary>
+        {
+          <ul id="ul" className="dropdown-menu dropdown-menu-se  mt-2">
+            {Object.keys(WalletAdapterNetwork)
+              .filter((e) => e !== "Testnet")
+              .map((_network) => (
+                <li
+                  className="dropdown-item"
+                  key={_network}
+                  onClick={() => {
+                    changeNetwork(_network as Network);
+                    hideUl();
+                  }}
+                >
+                  {_network}
+                </li>
+              ))}
+          </ul>
+        }
+      </details>
+    </div>
+  );
+};
 
-export default NetworkSelector
\ No newline at end of file
+export default NetworkSelector;
diff --git a/components/Layout/index.ts b/components/Layout/index.ts
index 07e1458..448adc8 100644
--- a/components/Layout/index.ts
+++ b/components/Layout/index.ts
@@ -1,5 +1,5 @@
 export { default as Wallet } from "./Wallet";
 export { default as Header } from "./Header";
 export { default as FontanaSVG } from "./FontanaSVG";
-export { default as Toast } from "./Flash";
 export { default as NetworkSelector } from "./NetworkSelector";
+export { default as Toast } from "./Flash";
diff --git a/components/Table/HeaderTable.tsx b/components/Table/HeaderTable.tsx
index f0361cc..2a626f7 100644
--- a/components/Table/HeaderTable.tsx
+++ b/components/Table/HeaderTable.tsx
@@ -2,7 +2,7 @@ import { Header, Text, Button, Box, StyledOcticon } from "@primer/react";
 import { CheckIcon, SyncIcon } from "@primer/octicons-react";
 
 import { useWallet } from "@solana/wallet-adapter-react";
-import { useHasMongoUri } from "contexts";
+import { useHasMongoUri, useConnection } from "contexts";
 import { HourglassIcon } from "@primer/octicons-react";
 import { useCreateToken } from "hooks";
 
@@ -11,8 +11,15 @@ const HeaderTable: React.FC<{ tokensAmount: number }> = ({
 }) => {
   const { publicKey } = useWallet();
   const { hasMongoUri } = useHasMongoUri();
+  const { network } = useConnection();
   const { createToken, minting, triggerRefresh } = useCreateToken();
 
+  const canCreateToken = () => {
+    if (publicKey) return true;
+    if (!publicKey && hasMongoUri && network === "Devnet") return true;
+    return false;
+  };
+
   return (
     <Header
       style={{
@@ -35,13 +42,17 @@ const HeaderTable: React.FC<{ tokensAmount: number }> = ({
       >
         <Header.Item
           style={{
+            display: "flex",
             width: "18rem",
+            justifyContent: "flex-start",
+            alignItems: "center",
+
           }}
         >
           <StyledOcticon icon={CheckIcon} size={16} color="primary" />
-          <Text as="p" marginLeft="0.5rem" color="primary">
+          <p className="m-0 p-0 ml-4 color-fg-muted ">
             {tokensAmount} SPL Tokens available
-          </Text>
+          </p>
         </Header.Item>
         <Header.Item
           style={{
@@ -65,7 +76,7 @@ const HeaderTable: React.FC<{ tokensAmount: number }> = ({
             position: "relative",
           }}
         >
-          {(hasMongoUri || publicKey) && (
+          {canCreateToken() && (
             <Button
               variant="primary"
               sx={{
diff --git a/components/Table/Row.tsx b/components/Table/Row.tsx
index 9fda3a0..fc36b51 100644
--- a/components/Table/Row.tsx
+++ b/components/Table/Row.tsx
@@ -8,10 +8,10 @@ import {
 } from "@primer/react";
 import { IssueOpenedIcon, HourglassIcon } from "@primer/octicons-react";
 import { useWallet } from "@solana/wallet-adapter-react";
-import { useEffect } from "react";
 import { useMintAndTransfer } from "hooks";
 import { Actions, RowProps } from "types";
-import { useRefresh } from "contexts";
+import { useConnection, useRefresh } from "contexts";
+import { useEffect } from "react";
 
 enum IssueColor {
   Green = "green",
@@ -21,8 +21,8 @@ enum IssueColor {
 
 const Row: React.FC<RowProps> = (props) => {
   const { publicKey } = useWallet();
+  const { connection } = useConnection();
   const {
-    getTokenBalance,
     mintedAmount,
     walletAmount,
     setMintAmount,
@@ -34,19 +34,21 @@ const Row: React.FC<RowProps> = (props) => {
     destinationAddress,
     mintError,
     sendError,
+    getTokenBalance,
   } = useMintAndTransfer(props);
 
   const { r } = useRefresh();
 
+  useEffect(() => {
+    getTokenBalance();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [r, connection]);
+
   function setWalletAddress() {
     if (!publicKey) return;
     setDestinationAddress(publicKey?.toBase58());
   }
 
-  useEffect(() => {
-    getTokenBalance();
-  }, [getTokenBalance, r]);
-
   function issueColor(): IssueColor {
     if (mintedAmount === null) return IssueColor.Primary;
     if (mintedAmount > 0) {
diff --git a/contexts/ConnectionContext.ts b/contexts/ConnectionContext.ts
index 215014b..cf74497 100644
--- a/contexts/ConnectionContext.ts
+++ b/contexts/ConnectionContext.ts
@@ -4,7 +4,7 @@ import { Connection } from "@solana/web3.js";
 export type Network = keyof typeof WalletAdapterNetwork;
 type TConnection = {
   connection: Connection | null;
-  network: Network;
+  network: Network | null;
   url: string | null;
   setConnection: (connection: Connection) => void;
   setNetwork: (network: Network) => void;
@@ -13,7 +13,7 @@ type TConnection = {
 
 export const ConnectionContext = createContext<TConnection>({
   connection: null,
-  network: "Devnet",
+  network: null,
   url: null,
   setConnection: () => {},
   setNetwork: () => {},
diff --git a/contexts/index.ts b/contexts/index.ts
index eb9c1ac..2df7df0 100644
--- a/contexts/index.ts
+++ b/contexts/index.ts
@@ -1,3 +1,4 @@
+export * from "./ConnectionContext"
 export * from "./SiteMinting"
 export * from "./Refresh"
 export * from "./HasMongoUri"
diff --git a/db/lib.ts b/db/lib.ts
index 5314a7e..cc23e5c 100644
--- a/db/lib.ts
+++ b/db/lib.ts
@@ -1,6 +1,7 @@
 import { connect } from "mongoose";
 import { Token } from "./model";
 import { NewToken } from "types";
+import type { Network } from "contexts";
 
 declare module globalThis {
   var mongoose: any;
@@ -8,7 +9,7 @@ declare module globalThis {
 
 interface Mongo {
   queryKeypair: (token: string) => Promise<string>;
-  queryTokens: () => Promise<Query[]>;
+  queryTokens: (network: Network) => Promise<Query[]>;
   createToken: (token: NewToken) => Promise<void>;
 }
 
diff --git a/hooks/useCreateToken.ts b/hooks/useCreateToken.ts
index d7b900f..19b59a6 100644
--- a/hooks/useCreateToken.ts
+++ b/hooks/useCreateToken.ts
@@ -6,16 +6,16 @@ import {
   MINT_SIZE,
   TOKEN_PROGRAM_ID,
 } from "@solana/spl-token";
-import { useConnection, useWallet } from "@solana/wallet-adapter-react";
+import { useWallet } from "@solana/wallet-adapter-react";
 import { Keypair, SystemProgram, Transaction } from "@solana/web3.js";
 import { RpcMethods } from "lib/spl";
-import { useRefresh, useSuccess, useHasMongoUri } from "contexts";
+import { useRefresh, useSuccess, useHasMongoUri, useConnection } from "contexts";
 import { useState } from "react";
 import { createMint } from "lib/create-token";
 
 export default function useCreateToken() {
   const { r, refresh } = useRefresh();
-  const { connection } = useConnection();
+  const { connection, network, url } = useConnection();
   const { publicKey, sendTransaction } = useWallet();
   const { setMessage, setMint } = useSuccess();
   const [minting, setMinting] = useState(false);
@@ -24,11 +24,13 @@ export default function useCreateToken() {
     refresh(!r);
   }
   async function createToken() {
-    if (!publicKey && hasMongoUri) {
+    if (!publicKey && hasMongoUri && url) {
       try {
+        if(network==="Mainnet") throw new Error("Cannot create token in mainnet");
         setMinting(true);
-        const tokenData = await createMint();
+        const tokenData = await createMint(url);
         if (!tokenData) return;
+
         await fetch("api/mongo-new-token", {
           method: "POST",
           body: JSON.stringify(tokenData),
@@ -38,17 +40,15 @@ export default function useCreateToken() {
           `Success! New mint ${tokenData.token.slice(0, 12)}... created.`
         );
         setMint(tokenData.token);
-
         triggerRefresh();
-        return;
       } catch (e) {
         setMinting(false);
         console.error(e);
-        return;
       }
+      return;
     }
     try {
-      if (!publicKey) return;
+      if (!publicKey || !connection) return;
       setMinting(true);
       const mint = Keypair.generate();
 
diff --git a/hooks/useFetchTokens.ts b/hooks/useFetchTokens.ts
index 70ce5cb..244ed1f 100644
--- a/hooks/useFetchTokens.ts
+++ b/hooks/useFetchTokens.ts
@@ -27,19 +27,21 @@ export default function useFetchTokens() {
   }, [network]);
 
   useEffect(() => {
-    if (!hasMongoUri || publicKey) return setMongoTokens([]);
+    if (!hasMongoUri || publicKey || network!=="Devnet") return setMongoTokens([]);
     (async () => {
       const res = await fetch("api/mongo-get", {
         method: "GET",
       });
+      
       const { queryResults } = (await res.json()) as {
         queryResults: Token[];
       };
       setMongoTokens(queryResults);
     })();
-  }, [hasMongoUri, publicKey, r]);
+  }, [hasMongoUri, publicKey, r, network]);
 
   useEffect(() => {
+    
     if (!publicKey || !connection) return setWalletTokens([]);
     (async () => {
       const rpc = new RpcMethods(connection);
diff --git a/hooks/useMintAndTransfer.ts b/hooks/useMintAndTransfer.ts
index 0289570..2c8df44 100644
--- a/hooks/useMintAndTransfer.ts
+++ b/hooks/useMintAndTransfer.ts
@@ -15,7 +15,7 @@ export default function useMintAndTransfer({
   tokenName,
   tokenKeypair,
 }: Exclude<RowProps, "tokenTicker">) {
-  const { connection } = useConnection();
+  const { connection, network } = useConnection();
   const { publicKey, sendTransaction } = useWallet();
   const [transferAmount, setTransferAmount] = useState(1);
   const [mintedAmount, setMintedAmount] = useState<null | number>(null);
@@ -28,8 +28,8 @@ export default function useMintAndTransfer({
   const { setMessage } = useSuccess();
 
   const getTokenBalance = useCallback(async () => {
+    if (!connection) return;
     try {
-      if (!connection) return;
       const rpc = new RpcMethods(connection);
       const amount = await rpc.getTokenBalance(tokenOwner, tokenName);
       setMintedAmount(amount);
@@ -74,6 +74,7 @@ export default function useMintAndTransfer({
             keypair: tokenKeypair,
             amount: mintAmount,
             mongo: source === Sources.Db,
+            network
           }),
         });
         const data = await res.json();
diff --git a/lib/create-token.ts b/lib/create-token.ts
index 2443e42..58e4ced 100644
--- a/lib/create-token.ts
+++ b/lib/create-token.ts
@@ -14,14 +14,12 @@ import {
   TOKEN_PROGRAM_ID,
 } from "@solana/spl-token";
 import { NewToken } from "types";
-export async function createMint(): Promise<NewToken | undefined> {
+export async function createMint(url:string): Promise<NewToken | undefined> {
   try {
     const mint = Keypair.generate();
     const owner = Keypair.generate();
     const publicKey = owner.publicKey;
-    const rpcEndpoint = process.env.NEXT_PUBLIC_SOLANA_RPC_HOST;
-    const endpoint = rpcEndpoint || clusterApiUrl("devnet");
-    const connection = new Connection(endpoint);
+    const connection = new Connection(url);
     const rpc = new RpcMethods(connection);
 
     try {
diff --git a/lib/spl.ts b/lib/spl.ts
index 7968aa3..f42b601 100644
--- a/lib/spl.ts
+++ b/lib/spl.ts
@@ -116,7 +116,6 @@ export class RpcMethods extends Rpc {
     }>
   > {
     const blockhash = await this.connection.getLatestBlockhash();
-    console.log("blockhash", blockhash);
     return blockhash;
   }
 
diff --git a/pages/_app.tsx b/pages/_app.tsx
index cff0eb5..9079507 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -34,7 +34,7 @@ const customTheme = deepmerge(theme, {
 
 function MyApp({ Component, pageProps }: AppProps) {
   const [connection, setConnection] = useState<Connection | null>(null);
-  const [network, setNetwork] = useState<Network>("Devnet");
+  const [network, setNetwork] = useState<Network|null>(null);
   const [url, setUrl] = useState<string | null>(null);
 
   const wallets = useMemo(
diff --git a/pages/api/mint.ts b/pages/api/mint.ts
index f79c769..c5b34b2 100644
--- a/pages/api/mint.ts
+++ b/pages/api/mint.ts
@@ -24,6 +24,7 @@ export default function handler(
   } = JSON.parse(req.body);
   (async () => {
     try {
+      console.log(req.body);
       const endpoint =
         network === "Mainnet"
           ? process.env.NEXT_PUBLIC_RPC_API_MAINNET || clusterApiUrl('mainnet-beta')
diff --git a/pages/api/mongo-get.ts b/pages/api/mongo-get.ts
index d5745fa..aae396a 100644
--- a/pages/api/mongo-get.ts
+++ b/pages/api/mongo-get.ts
@@ -1,11 +1,11 @@
 import { NextApiRequest, NextApiResponse } from "next";
-
 import { Database, Query } from "db/lib";
 
 interface Res {
   queryResults?: Query[];
   err?: string;
 }
+
 export default async function handler(
   _req: NextApiRequest,
   res: NextApiResponse<Res>
diff --git a/types.ts b/types.ts
index fc7d7f4..65911eb 100644
--- a/types.ts
+++ b/types.ts
@@ -20,3 +20,4 @@ export interface NewToken {
   owner: string;
   keypair: string;
 }
+