fix: update selected rpc info if rpc setting is changed & fix bottom padding of transaction body

fix: update selected rpc info if rpc setting is changed & fix bottom padding of transaction body

Author: josephlabeleven

src/App.tsx

@@ -42,7 +42,7 @@ export const App: React.FC = () => {
             <Header />
           </Box>
 
-          <Flex mt="45px" h="94vh">
+          <Flex mt="45px" pb="10px" h="calc(100vh - 60px)">
             <Box flex="2" overflow="scroll">
               {/* TODO it's Solana wallet button's fault, we need to replace it */}
               <Show below="md">

src/components/client/TransactionHeader.tsx

@@ -16,7 +16,7 @@ import {
   Tooltip,
 } from "@chakra-ui/react";
 import { useWallet } from "@solana/wallet-adapter-react";
-import React from "react";
+import React, { useEffect } from "react";
 import {
   FaCompress,
   FaEllipsisV,
@@ -26,7 +26,10 @@ import {
   FaPlay,
   FaShareAlt,
 } from "react-icons/fa";
-import { usePersistentStore } from "../../hooks/usePersistentStore";
+import {
+  usePersistentStore,
+  useShallowPersistentStore,
+} from "../../hooks/usePersistentStore";
 import { useSendWeb3Transaction } from "../../hooks/useSendWeb3Transaction";
 import {
   useShallowSessionStoreWithoutUndo,
@@ -49,6 +52,9 @@ export const TransactionHeader: React.FC<{
   const [transaction, rpcEndpoint, setSession] = useShallowSessionStoreWithUndo(
     (state) => [state.transaction, state.rpcEndpoint, state.set]
   );
+  const rpcEndpoints = useShallowPersistentStore(
+    (state) => state.appOptions.rpcEndpoints
+  );
 
   const { publicKey: walletPublicKey } = useWallet();
   const { send } = useSendWeb3Transaction({
@@ -86,6 +92,15 @@ export const TransactionHeader: React.FC<{
     });
   };
 
+  useEffect(() => {
+    // when rpc endpoints setting change, update the current selected rpc
+    if (rpcEndpoints.map.hasOwnProperty(rpcEndpoint.id)) {
+      setSession((state) => {
+        state.rpcEndpoint = rpcEndpoints.map[rpcEndpoint.id];
+      });
+    }
+  }, [rpcEndpoints, rpcEndpoint, setSession]);
+
   return (
     <>
       <Flex alignItems="center">

src/components/common/RpcEndpointMenu.tsx

@@ -33,7 +33,7 @@ export const RpcEndpointMenu: React.FC<{
   );
 
   return (
-    <Menu>
+    <Menu matchWidth={true}>
       <Tooltip label={endpoint.url}>
         <MenuButton
           as={Button}

src/components/options/fields/ChoiceOption.tsx

@@ -20,7 +20,7 @@ export const ChoiceOption: React.FC<{
     <FormLabel htmlFor={id} textAlign="right">
       {name}
     </FormLabel>
-    <Menu id={id}>
+    <Menu id={id} matchWidth={true}>
       <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
         {get().name}
       </MenuButton>

src/components/options/fields/RpcEndpointOption.tsx

@@ -1,18 +1,23 @@
-import { DeleteIcon } from "@chakra-ui/icons";
+import { CheckIcon, ChevronDownIcon, DeleteIcon } from "@chakra-ui/icons";
 import {
+  Button,
   Flex,
   Grid,
   Icon,
   IconButton,
   Input,
-  Select,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Portal,
   Tooltip,
 } from "@chakra-ui/react";
 import { WritableDraft } from "immer/dist/internal";
 import React, { useEffect, useState } from "react";
 import { FaEye, FaEyeSlash } from "react-icons/fa";
 import { usePersistentStore } from "../../../hooks/usePersistentStore";
-import { INetwork, IRpcEndpoint } from "../../../types/internal";
+import { IRpcEndpoint } from "../../../types/internal";
 import { removeFrom } from "../../../utils/sortable";
 import { RPC_NETWORK_OPTIONS } from "../../../utils/state";
 import { DragHandle } from "../../common/DragHandle";
@@ -78,24 +83,34 @@ export const RpcEndpointOption: React.FC<IRpcEndpoint> = ({
         }
       >
         <Flex mb="1">
-          <Select
-            minW="150px"
-            maxW="130px"
-            mr="1"
-            isDisabled={!custom}
-            value={network}
-            onChange={(e) =>
-              updateEndpoint((state) => {
-                state.network = e.target.value as INetwork;
-              })
-            }
-          >
-            {RPC_NETWORK_OPTIONS.map((n) => (
-              <option key={n} value={n}>
-                {n}
-              </option>
-            ))}
-          </Select>
+          <Menu>
+            <MenuButton
+              rightIcon={<ChevronDownIcon />}
+              minW="150px"
+              as={Button}
+              disabled={!custom}
+              mr="1"
+            >
+              {network}
+            </MenuButton>
+            <Portal>
+              <MenuList minW="150px" mr="1" zIndex="modal">
+                {RPC_NETWORK_OPTIONS.map((n) => (
+                  <MenuItem
+                    icon={network === n ? <CheckIcon /> : undefined}
+                    key={n}
+                    onClick={() => {
+                      updateEndpoint((state) => {
+                        state.network = n;
+                      });
+                    }}
+                  >
+                    {n}
+                  </MenuItem>
+                ))}
+              </MenuList>
+            </Portal>
+          </Menu>
           <Input
             flex="1"
             mr="1"

src/components/palette/ImportTransaction.tsx

@@ -35,7 +35,7 @@ export const ImportTransaction: React.FC = () => {
   return (
     <Grid>
       <Flex mb="1">
-        <Menu>
+        <Menu matchWidth={true}>
           <MenuButton flex="1" as={Button} size="sm">
             {IMPORT_TYPES[importType]} <ChevronDownIcon />
           </MenuButton>