Add Solana Explorer and Solscan links after tx submission

client/src/components/Panels/Bottom/Bottom.tsx

@@ -8,7 +8,7 @@ import { ConnState } from "../Side/Right/Wallet/connection-states";
 import Link from "../../Link";
 import useCurrentWallet from "../Side/Right/Wallet/useCurrentWallet";
 import useConnect from "../Side/Right/Wallet/useConnect";
-import { NETWORKS } from "../../../constants";
+import { EXPLORER_URL, NETWORKS } from "../../../constants";
 import useAirdropAmount from "../Side/Right/Wallet/useAirdropAmount";
 
 const Bottom = () => {
@@ -90,7 +90,7 @@ const Bottom = () => {
           <RpcEndpoint title={conn.rpcEndpoint}>{networkName}</RpcEndpoint>
           <Seperator>|</Seperator>
           <Link
-            href={`https://explorer.solana.com/address/${walletPkStr}?cluster=custom&customUrl=${conn.rpcEndpoint}`}
+            href={`${EXPLORER_URL}/address/${walletPkStr}?cluster=custom&customUrl=${conn.rpcEndpoint}`}
           >
             {walletPkStr}
           </Link>

client/src/components/Panels/Panels.tsx

@@ -1,34 +1,29 @@
 import { lazy, Suspense } from "react";
-import styled, { css } from "styled-components";
-import { ToastContainer, toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.min.css";
+import styled from "styled-components";
 
 import Loading from "../Loading";
 import Side from "./Side";
 import Noti from "./Noti";
-import { ICONBAR_WIDTH } from "./Side/Left/Left";
+import Toast from "../Toast";
 
 const Main = lazy(() => import("./Main"));
 const Bottom = lazy(() => import("./Bottom"));
 
-const Panels = () => {
-  return (
-    <Wrapper>
-      <Noti />
-      <MainWrapper>
-        <Side />
-        <Suspense fallback={<Loading size={10} circleCount={10} />}>
-          <Main />
-        </Suspense>
-      </MainWrapper>
-      <Suspense fallback={false}>
-        <Bottom />
-        <StyledContainer position={toast.POSITION.BOTTOM_LEFT} />
+const Panels = () => (
+  <Wrapper>
+    <Noti />
+    <MainWrapper>
+      <Side />
+      <Suspense fallback={<Loading size={10} circleCount={10} />}>
+        <Main />
       </Suspense>
-    </Wrapper>
-  );
-};
-
+    </MainWrapper>
+    <Suspense fallback={false}>
+      <Bottom />
+      <Toast />
+    </Suspense>
+  </Wrapper>
+);
 const Wrapper = styled.div`
   width: 100vw;
   height: 100vh;
@@ -44,23 +39,4 @@ const MainWrapper = styled.div`
   flex: 1;
 `;
 
-const StyledContainer = styled(ToastContainer)`
-  ${({ theme }) => css`
-    &&&.Toastify__toast-container {
-      left: ${ICONBAR_WIDTH};
-      z-index: 1;
-    }
-    .Toastify__toast {
-      background-color: ${theme.colors.toast?.bg ?? theme.colors.default.bg};
-      color: ${theme.colors.default.textPrimary};
-      border-radius: ${theme.borderRadius};
-    }
-    .Toastify__toast-body {
-    }
-    .Toastify__progress-bar {
-      background: ${theme.colors.default.primary};
-    }
-  `}
-`;
-
 export default Panels;

client/src/components/Panels/Side/Left/Left.tsx

@@ -1,7 +1,7 @@
 import { FC, SetStateAction, Dispatch, MutableRefObject } from "react";
 import styled from "styled-components";
-import { GITHUB_URL } from "../../../../constants";
 
+import { GITHUB_URL } from "../../../../constants";
 import IconButton from "../../../IconButton";
 import Link from "../../../Link";
 import PopButton from "../../../PopButton";

client/src/components/Panels/Side/Left/index.ts

@@ -1 +1,2 @@
 export { default } from "./Left";
+export * from "./Left";

client/src/components/Panels/Side/Right/BuildDeploy/Deploy.tsx

@@ -12,6 +12,7 @@ import {
   pgWalletAtom,
   refreshPgWalletAtom,
   terminalProgressAtom,
+  txHashAtom,
 } from "../../../../../state";
 import useIsDeployed from "./useIsDeployed";
 import { ButtonKind } from "../../../../Button/Button";
@@ -26,6 +27,7 @@ const Deploy = () => {
   const [pgWalletChanged] = useAtom(refreshPgWalletAtom);
   const [, setTerminal] = useAtom(terminalAtom);
   const [, setProgress] = useAtom(terminalProgressAtom);
+  const [, setTxHash] = useAtom(txHashAtom);
 
   const { initialLoading } = useInitialLoading();
   const { deployed, setDeployed, connError } = useIsDeployed();
@@ -48,7 +50,8 @@ const Deploy = () => {
     let msg = "";
 
     try {
-      await PgDeploy.deploy(conn, pgWallet, setProgress);
+      const txHash = await PgDeploy.deploy(conn, pgWallet, setProgress);
+      setTxHash(txHash);
 
       msg = PgTerminal.success("Deployment successful.");
 
@@ -63,7 +66,7 @@ const Deploy = () => {
     }
 
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [conn, pgWalletChanged, setLoading, setDeployed, setTerminal]);
+  }, [conn, pgWalletChanged, setLoading, setDeployed, setTerminal, setTxHash]);
 
   const programIsBuilt = PgProgramInfo.getProgramKp()?.programKp;
 

client/src/components/Panels/Side/Right/Test/Function.tsx

@@ -13,7 +13,7 @@ import Arg from "./Arg";
 import { getFullType } from "./types";
 import { updateTxValsProps } from "./useUpdateTxVals";
 import { ClassNames } from "../../../../../constants";
-import { terminalAtom } from "../../../../../state";
+import { terminalAtom, txHashAtom } from "../../../../../state";
 import useCurrentWallet from "../Wallet/useCurrentWallet";
 import { PgTest } from "../../../../../utils/pg/test";
 import { PgTx } from "../../../../../utils/pg/tx";
@@ -44,6 +44,7 @@ interface FunctionProps {
 
 const Function: FC<FunctionProps> = ({ ixs, idl, index }) => {
   const [, setTerminal] = useAtom(terminalAtom);
+  const [, setTxHash] = useAtom(txHashAtom);
 
   const { connection: conn } = useConnection();
 
@@ -144,19 +145,18 @@ const Function: FC<FunctionProps> = ({ ixs, idl, index }) => {
 
     try {
       const txHash = await PgTest.test(txVals, idl, conn, currentWallet);
-
-      await PgTx.confirm(
-        txHash,
-        conn,
-        () =>
-          (msg = `${PgTerminal.CROSS}  Test '${ixs.name}' ${PgTerminal.error(
-            "failed"
-          )}. Tx hash: ${txHash}`),
-        () =>
-          (msg = `${PgTerminal.CHECKMARK}  Test '${
-            ixs.name
-          }' ${PgTerminal.success("passed")}. Tx hash: ${txHash}`)
-      );
+      setTxHash(txHash);
+
+      const txResult = await PgTx.confirm(txHash, conn);
+
+      if (txResult?.err)
+        msg = `${PgTerminal.CROSS}  Test '${ixs.name}' ${PgTerminal.error(
+          "failed"
+        )}.`;
+      else
+        msg = `${PgTerminal.CHECKMARK}  Test '${ixs.name}' ${PgTerminal.success(
+          "passed"
+        )}.`;
     } catch (e: any) {
       const convertedError = PgTerminal.convertErrorMessage(e.message);
       msg = `${PgTerminal.CROSS}  Test '${ixs.name}' ${PgTerminal.error(

client/src/components/Panels/Side/Right/Wallet/Wallet.tsx

@@ -4,15 +4,18 @@ import { useConnection } from "@solana/wallet-adapter-react";
 import { LAMPORTS_PER_SOL, PublicKey } from "@solana/web3.js";
 import styled, { css } from "styled-components";
 
-import { terminalAtom } from "../../../../../state";
+import { terminalAtom, txHashAtom } from "../../../../../state";
 import { PgTx } from "../../../../../utils/pg/tx";
 import Button from "../../../../Button";
 import useConnect from "./useConnect";
 import useCurrentWallet from "./useCurrentWallet";
 import useAirdropAmount from "./useAirdropAmount";
+import { PgTerminal } from "../../../../../utils/pg/terminal";
 
 const Wallet = () => {
   const [, setTerminal] = useAtom(terminalAtom);
+  const [, setTxHash] = useAtom(txHashAtom);
+
   const {
     pgButtonStatus,
     handleConnectPg,
@@ -39,26 +42,34 @@ const Wallet = () => {
       let msg = "";
 
       try {
+        msg = PgTerminal.info("Sending an airdrop request...");
+        setTerminal(msg);
+
         const txHash = await conn.requestAirdrop(
           walletPk,
           amount * LAMPORTS_PER_SOL
         );
-        msg = `Sent airdrop request. Tx hash: ${txHash}`;
-        setTerminal(msg);
-        await PgTx.confirm(
-          txHash,
-          conn,
-          () => (msg = "Error receiving airdrop"),
-          () => (msg = `Success. Received ${amount} SOL`)
-        );
+
+        setTxHash(txHash);
+
+        const txResult = await PgTx.confirm(txHash, conn);
+
+        if (txResult?.err)
+          msg = `${PgTerminal.CROSS}  ${PgTerminal.error(
+            "Error"
+          )} receiving airdrop.`;
+        else
+          msg = `${PgTerminal.CHECKMARK}  ${PgTerminal.success(
+            "Success"
+          )}. Received ${amount} SOL.`;
       } catch (e: any) {
         msg = e.message;
       } finally {
-        setTerminal(msg);
+        setTerminal(msg + "\n");
         setLoading(false);
       }
     },
-    [conn, amount, setLoading, setTerminal]
+    [conn, amount, setLoading, setTerminal, setTxHash]
   );
 
   const airdropPg = useCallback(async () => {

client/src/components/Panels/Side/Right/Wallet/useAirdropAmount.tsx

@@ -1,16 +1,16 @@
-import { useAtom } from "jotai";
 import { useMemo } from "react";
+import { useAtom } from "jotai";
 
-import { Endpoints } from "../../../../../constants";
+import { Endpoint } from "../../../../../constants";
 import { endpointAtom } from "../../../../../state";
 
 const useAirdropAmount = () => {
   const [endpoint] = useAtom(endpointAtom);
 
   const amount = useMemo(() => {
-    if (endpoint === Endpoints.LOCALHOST) return 100;
-    else if (endpoint === Endpoints.DEVNET) return 2;
-    else if (endpoint === Endpoints.TESTNET) return 1;
+    if (endpoint === Endpoint.LOCALHOST) return 100;
+    else if (endpoint === Endpoint.DEVNET) return 2;
+    else if (endpoint === Endpoint.TESTNET) return 1;
 
     return null;
   }, [endpoint]);

client/src/components/Toast/ExplorerLink.tsx

@@ -0,0 +1,47 @@
+import { useAtom } from "jotai";
+import styled from "styled-components";
+
+import { Endpoint, EXPLORER_URL, SOLSCAN_URL } from "../../constants";
+import { endpointAtom, txHashAtom } from "../../state";
+import Link from "../Link";
+
+export const ExplorerLink = () => {
+  const [txHash] = useAtom(txHashAtom);
+  const [endpoint] = useAtom(endpointAtom);
+
+  const [explorer, solscan] = getUrls(txHash, endpoint);
+
+  return (
+    <Wrapper>
+      <Link href={explorer}>Solana Explorer</Link>
+      {solscan && <Link href={solscan}>Solscan</Link>}
+    </Wrapper>
+  );
+};
+
+const getUrls = (txHash: string, endpoint: Endpoint) => {
+  const explorer =
+    EXPLORER_URL + "/tx/" + txHash + "?cluster=custom&customUrl=" + endpoint;
+
+  let cluster = "";
+  if (endpoint === Endpoint.LOCALHOST) return [explorer];
+  else if (
+    endpoint === Endpoint.DEVNET ||
+    endpoint === Endpoint.DEVNET_GENESYSGO
+  )
+    cluster = "?cluster=devnet";
+  else if (endpoint === Endpoint.TESTNET) cluster = "?cluster=testnet";
+
+  const solscan = SOLSCAN_URL + "/tx/" + txHash + cluster;
+
+  return [explorer, solscan];
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: space-around;
+
+  & > a:hover {
+    text-decoration: underline;
+  }
+`;

client/src/components/Toast/Toast.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useEffect } from "react";
+import { useAtom } from "jotai";
+import styled, { css } from "styled-components";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.min.css";
+
+import { ICONBAR_WIDTH } from "../Panels/Side/Left";
+import { ExplorerLink } from "./ExplorerLink";
+import { txHashAtom } from "../../state";
+
+const Toast = () => {
+  const [txHash] = useAtom(txHashAtom);
+
+  const notify = useCallback(() => {
+    if (!txHash) return;
+    toast(<ExplorerLink />, { toastId: txHash });
+  }, [txHash]);
+
+  useEffect(() => {
+    notify();
+  }, [notify]);
+
+  if (!txHash) return null;
+
+  return (
+    <StyledContainer
+      position={toast.POSITION.BOTTOM_LEFT}
+      closeOnClick={false}
+    />
+  );
+};
+
+const StyledContainer = styled(ToastContainer)`
+  ${({ theme }) => css`
+    &&&.Toastify__toast-container {
+      left: ${ICONBAR_WIDTH};
+      z-index: 1;
+    }
+
+    .Toastify__toast {
+      background-color: ${theme.colors.toast?.bg ?? theme.colors.default.bg};
+      border-radius: ${theme.borderRadius};
+      color: ${theme.colors.default.textPrimary};
+      font-family: ${theme.font?.family};
+      font-size: ${theme.font?.size.medium};
+    }
+
+    .Toastify__progress-bar {
+      background: ${theme.colors.default.primary};
+    }
+
+    .Toastify__close-button--light {
+      color: ${theme.colors.default.textSecondary};
+    }
+  `}
+`;
+
+export default Toast;

client/src/components/Toast/index.ts

@@ -0,0 +1 @@
+export { default } from "./Toast";

client/src/constants/common.ts

@@ -1 +1,4 @@
 export const DEFAULT_CURSOR = { cursor: "default" };
+
+export const EXPLORER_URL = "https://explorer.solana.com";
+export const SOLSCAN_URL = "https://solscan.io";