feat: add anchor example, update welcome message and acks

labeleven-dev · Feb 23, 2023 · bc5e10c · bc5e10c
1 parent 4ba0abb
commit bc5e10c
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 48 deletions.
diff --git a/src/components/client/accounts/AirdropButton.tsx b/src/components/client/accounts/AirdropButton.tsx
@@ -26,7 +26,6 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import { LAMPORTS_PER_SOL, PublicKey } from "@solana/web3.js";
-import { useSessionStoreWithUndo } from "hooks/useSessionStore";
 import { useTransactionStatusToast } from "hooks/useTransactionStatusToast";
 import { useWeb3Connection } from "hooks/useWeb3Connection";
 import React, { useRef, useState } from "react";
@@ -39,7 +38,6 @@ export const AirdropButton: React.FC<{ accountPubkey: IPubKey }> = ({
   accountPubkey,
 }) => {
   const [value, setValue] = useState("1.0");
-  const rpcEndpoint = useSessionStoreWithUndo((state) => state.rpcEndpoint);
   const initialFocusRef = useRef(null);
 
   const connection = useWeb3Connection();

diff --git a/src/components/client/results/Results.tsx b/src/components/client/results/Results.tsx
@@ -87,15 +87,18 @@ export const Results = forwardRef<
 
         <Spacer />
 
-        {endedAt && (
-          <Tooltip
-            label={`Last fetched @ ${new Date(endedAt).toLocaleString()}`}
-          >
-            <Tag height="20px" variant="outline">
-              {new Date(endedAt).toLocaleTimeString()}
-            </Tag>
-          </Tooltip>
-        )}
+        {
+          // do not display if transaction has been cleared, i.e. no signature
+          endedAt && transactionRun.signature && (
+            <Tooltip
+              label={`Last fetched @ ${new Date(endedAt).toLocaleString()}`}
+            >
+              <Tag height="20px" variant="outline">
+                {new Date(endedAt).toLocaleTimeString()}
+              </Tag>
+            </Tooltip>
+          )
+        }
         {transactionRun.inProgress ? (
           <Button
             color="red.600"

diff --git a/src/components/header/Examples.tsx b/src/components/header/Examples.tsx
@@ -5,6 +5,7 @@ import {
   MenuButton,
   MenuItem,
   MenuList,
+  Text,
   Tooltip,
   useToast,
 } from "@chakra-ui/react";
@@ -50,8 +51,15 @@ export const Example: React.FC = () => {
 
     toast({
       title: "Welcome to Better Call Sol!",
-      description:
-        "To get started, you can try one of the options in the Example menu at the top.",
+      description: (
+        <Text>
+          This is a client for composing and sending Solana transactions.
+          <br />
+          <br />
+          To get started, you can try one of the options in the{" "}
+          <strong>Example</strong> menu at the top.
+        </Text>
+      ),
       status: "info",
       duration: 10000,
       isClosable: true,
@@ -90,6 +98,13 @@ export const Example: React.FC = () => {
         >
           System Program: Create Account
         </MenuItem>
+        <MenuItem
+          onClick={() => {
+            loadExample("anchorSquads");
+          }}
+        >
+          Anchor: Squads
+        </MenuItem>
       </MenuList>
     </Menu>
   );

diff --git a/src/components/info/Acknowledgements.tsx b/src/components/info/Acknowledgements.tsx
@@ -1,5 +1,7 @@
 import { Box, Text, VStack } from "@chakra-ui/react";
 
+// TODO update this as part of the CI build automatically
+
 export const Acknowledgements: React.FC = () => (
   <VStack spacing="5">
     <Text>
@@ -18,45 +20,39 @@ export const Acknowledgements: React.FC = () => (
       boxShadow="inner"
     >
       <Text>
-        @chakra-ui/icons (2.0.4), licenced MIT
+        @chakra-ui/icons (2.0.14), licenced MIT
         <br />
-        @chakra-ui/react (2.2.4), licenced MIT
+        @chakra-ui/react (2.4.4), licenced MIT
         <br />
-        @dnd-kit/core (6.0.5), licenced MIT
+        @dnd-kit/core (6.0.6), licenced MIT
         <br />
-        @dnd-kit/modifiers (6.0.0), licenced MIT
+        @dnd-kit/modifiers (6.0.1), licenced MIT
         <br />
         @dnd-kit/sortable (7.0.1), licenced MIT
         <br />
-        @emotion/react (11.9.3), licenced MIT
+        @emotion/react (11.10.5), licenced MIT
         <br />
-        @emotion/styled (11.9.3), licenced MIT
+        @emotion/styled (11.10.5), licenced MIT
         <br />
         @project-serum/anchor (0.25.0), licenced (MIT OR Apache-2.0)
         <br />
-        @sentry/react (7.28.1), licenced MIT
+        @sentry/react (7.38.0), licenced MIT
         <br />
         @solana/buffer-layout (4.0.0), licenced MIT
         <br />
-        @solana/wallet-adapter-backpack (0.1.7), licenced Apache-2.0
-        <br />
-        @solana/wallet-adapter-base (0.9.17), licenced Apache-2.0
-        <br />
-        @solana/wallet-adapter-brave (0.1.11), licenced Apache-2.0
-        <br />
-        @solana/wallet-adapter-glow (0.1.12), licenced Apache-2.0
+        @solana/spl-token (0.3.7), licenced Apache-2.0
         <br />
-        @solana/wallet-adapter-ledger (0.9.19), licenced Apache-2.0
+        @solana/wallet-adapter-base (0.9.20), licenced Apache-2.0
         <br />
-        @solana/wallet-adapter-phantom (0.9.16), licenced Apache-2.0
+        @solana/wallet-adapter-brave (0.1.14), licenced Apache-2.0
         <br />
-        @solana/wallet-adapter-react (0.15.19), licenced Apache-2.0
+        @solana/wallet-adapter-react (0.15.26), licenced Apache-2.0
         <br />
-        @solana/wallet-adapter-react-ui (0.9.17), licenced Apache-2.0
+        @solana/wallet-adapter-react-ui (0.9.25), licenced Apache-2.0
         <br />
-        @solana/wallet-adapter-solflare (0.6.16), licenced Apache-2.0
+        @solana/wallet-adapter-solflare (0.6.20), licenced Apache-2.0
         <br />
-        @solana/web3.js (1.63.1), licenced MIT
+        @solana/web3.js (1.72.0), licenced MIT
         <br />
         assert (2.0.0), licenced MIT
         <br />
@@ -70,35 +66,35 @@ export const Acknowledgements: React.FC = () => (
         <br />
         crypto-browserify (3.12.0), licenced MIT
         <br />
-        framer-motion (6.3.15), licenced MIT
+        framer-motion (8.0.1), licenced MIT
         <br />
         immer (9.0.16), licenced MIT
         <br />
         js-sha256 (0.9.0), licenced MIT
         <br />
         jsbi (3.2.5), licenced Apache-2.0
         <br />
-        pako (2.0.4), licenced (MIT AND Zlib)
+        pako (2.1.0), licenced (MIT AND Zlib)
         <br />
         process (0.11.10), licenced MIT
         <br />
         protobufjs (7.1.2), licenced BSD-3-Clause
         <br />
         react (18.2.0), licenced MIT
         <br />
-        react-aria (3.18.0), licenced Apache-2.0
+        react-aria (3.22.0), licenced Apache-2.0
         <br />
         react-dom (18.2.0), licenced MIT
         <br />
-        react-github-btn (1.3.0), licenced BSD-2-Clause
+        react-github-btn (1.4.0), licenced BSD-2-Clause
         <br />
-        react-icons (3.11.0), licenced MIT
+        react-icons (4.7.1), licenced MIT
         <br />
-        react-markdown (8.0.3), licenced MIT
+        react-markdown (8.0.4), licenced MIT
         <br />
-        react-router-dom (6.3.0), licenced MIT
+        react-router-dom (6.6.0), licenced MIT
         <br />
-        react-stately (3.16.0), licenced Apache-2.0
+        react-stately (3.20.0), licenced Apache-2.0
         <br />
         snake-case (3.0.4), licenced MIT
         <br />

diff --git a/src/hooks/useTransactionStatusToast.tsx b/src/hooks/useTransactionStatusToast.tsx
@@ -201,11 +201,7 @@ const TransactionStatusToast: React.FC<
           />
           <Box>{description}</Box>
           {inProgress && (
-            <Button
-              leftIcon={<SmallCloseIcon />}
-              onClick={cancel}
-              colorScheme="red"
-            >
+            <Button leftIcon={<SmallCloseIcon />} onClick={cancel}>
               Cancel
             </Button>
           )}

diff --git a/src/library/examples.ts b/src/library/examples.ts
@@ -1,7 +1,5 @@
 import { ITransactionExt } from "types/external";
 
-// TODO add an Anchor example
-
 export const EXAMPLES: Record<string, ITransactionExt> = {
   memoV2Program: {
     version: "1.0.0",
@@ -164,4 +162,37 @@ _A lamport is 0.000,000,001 SOL._`,
       },
     ],
   },
+
+  anchorSquads: {
+    version: "1.0.0",
+    txnVersion: "0",
+    network: "devnet",
+    name: "Anchor: Squads",
+    description: `If an Anchor program has an on-chain IDL, _Better Call Sol_ can help you invoke it.
+    
+For this example, we are using [Squads MPL](https://squads.so/), a popular multisig program. We have pre-populated the program ID for you.
+
+The tool detects the IDL and see shows ⚓ icon in the Program field.
+
+1. Click on this button to get a list of possible instructions to pre-populate.
+1. Eject out of Anchor instruction into a plain one by clicking ⏏️ button next to the _Anchor Method_ field.
+1. Once you eject, you will see that the tool can also detect an Anchor program instruction. Convert back using the 🔁 button, next to the "Detected Anchor Method".
+
+The latter is particularly useful when you import a transaction from the chain.`,
+    addressLookupTables: [],
+    instructions: [
+      {
+        name: "Squads",
+        programId: "SMPLecH534NA9acpos4G6x7uf3LWbCAwZQE9e8ZekMu",
+        accounts: [],
+        data: {
+          format: "raw",
+          value: {
+            encoding: "utf8",
+            content: "",
+          },
+        },
+      },
+    ],
+  },
 };