Add new wallet section

client/src/components/Button/Button.tsx

@@ -16,13 +16,15 @@ interface ButtonProps {
   kind?: ButtonKind;
   size?: ButtonSize;
   fullWidth?: boolean;
+  bold?: boolean;
 }
 
 const getButtonStyles = (
   theme: DefaultTheme,
   kind?: ButtonKind,
   size?: ButtonSize,
-  fullWidth?: boolean
+  fullWidth?: boolean,
+  bold?: boolean
 ) => {
   let color = "inherit";
   let bgColor = "transparent";
@@ -131,6 +133,12 @@ const getButtonStyles = (
       width: 100%;
     `);
 
+  // Bold
+  if (bold)
+    defaultCss = defaultCss.concat(css`
+      font-weight: bold;
+    `);
+
   if (kind === "icon")
     defaultCss = defaultCss.concat(css`
       display: flex;
@@ -153,8 +161,8 @@ const getButtonStyles = (
 };
 
 const Button = styled.button<ButtonProps>`
-  ${({ theme, kind, size, fullWidth }) =>
-    getButtonStyles(theme, kind, size, fullWidth)}
+  ${({ theme, kind, size, fullWidth, bold }) =>
+    getButtonStyles(theme, kind, size, fullWidth, bold)}
 `;
 
 export default Button;

client/src/components/DownloadButton/DownloadButton.tsx

@@ -5,16 +5,22 @@ interface DownloadButtonProps {
   href: string;
   download: string;
   buttonKind?: ButtonKind;
+  noButton?: boolean;
 }
 
 const DownloadButton: FC<DownloadButtonProps> = ({
   href,
   download,
   buttonKind = "outline",
+  noButton = false,
   children,
 }) => (
   <a href={href} download={download}>
-    <Button kind={buttonKind}>{children}</Button>
+    {noButton ? (
+      <div>{children}</div>
+    ) : (
+      <Button kind={buttonKind}>{children}</Button>
+    )}
   </a>
 );
 

client/src/components/IconButton/IconButton.tsx

@@ -39,7 +39,7 @@ const IconWrapper = styled.div`
   align-items: center;
 
   &.active {
-    background-color: ${({ theme }) => theme.colors?.iconButton?.selectedBg!};
+    background-color: ${({ theme }) => theme.colors?.iconButton?.selectedBg};
     border-left: 2px solid
       ${({ theme }) =>
         theme.colors?.iconButton?.selectedBorderColor ??

client/src/components/Icons/Icons.tsx

@@ -106,3 +106,48 @@ export const Copy = ({ fullSize }: IconProps) => {
     </svg>
   );
 };
+
+export const Sad = ({ fullSize }: IconProps) => {
+  return (
+    <svg {...defaultProps} viewBox="0 0 24 24" style={getStyle(fullSize)}>
+      <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"></path>
+      <circle cx="8.5" cy="10.5" r="1.5"></circle>
+      <circle cx="15.493" cy="10.493" r="1.493"></circle>
+      <path d="M12 14c-3 0-4 3-4 3h8s-1-3-4-3z"></path>
+    </svg>
+  );
+};
+
+export const Refresh = ({ fullSize }: IconProps) => {
+  return (
+    <svg {...defaultProps} viewBox="0 0 24 24" style={getStyle(fullSize)}>
+      <path fill="none" d="M0 0h24v24H0z"></path>
+      <path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"></path>
+    </svg>
+  );
+};
+
+export const Error = ({ fullSize }: IconProps) => {
+  return (
+    <svg {...defaultProps} viewBox="0 0 24 24" style={getStyle(fullSize)}>
+      <path fill="none" d="M0 0h24v24H0z"></path>
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
+    </svg>
+  );
+};
+
+export const Clock = ({ fullSize }: IconProps) => {
+  return (
+    <svg {...defaultProps} viewBox="0 0 1024 1024" style={getStyle(fullSize)}>
+      <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm176.5 585.7l-28.6 39a7.99 7.99 0 0 1-11.2 1.7L483.3 569.8a7.92 7.92 0 0 1-3.3-6.5V288c0-4.4 3.6-8 8-8h48.1c4.4 0 8 3.6 8 8v247.5l142.6 103.1c3.6 2.5 4.4 7.5 1.8 11.1z"></path>
+    </svg>
+  );
+};
+
+export const ThreeDots = ({ fullSize }: IconProps) => {
+  return (
+    <svg {...defaultProps} viewBox="0 0 16 16" style={getStyle(fullSize)}>
+      <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path>
+    </svg>
+  );
+};

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

@@ -3,12 +3,12 @@ import { useConnection } from "@solana/wallet-adapter-react";
 import styled, { css } from "styled-components";
 
 import Button from "../../Button";
-import { ConnState } from "../Side/Right/Wallet/connection-states";
+import { ConnState } from "../Wallet/connection-states";
 import Link from "../../Link";
-import useCurrentWallet from "../Side/Right/Wallet/useCurrentWallet";
-import useConnect from "../Side/Right/Wallet/useConnect";
+import useCurrentWallet from "../Wallet/useCurrentWallet";
+import useConnect from "../Wallet/useConnect";
 import { EXPLORER_URL, Id, NETWORKS } from "../../../constants";
-import useAirdropAmount from "../Side/Right/Wallet/useAirdropAmount";
+import useAirdropAmount from "../Wallet/useAirdropAmount";
 import { PgCommon } from "../../../utils/pg/common";
 
 const Bottom = () => {

client/src/components/Panels/Main/Editor/Editor.tsx

@@ -281,6 +281,8 @@ const Editor = () => {
   return <Wrapper ref={parent}></Wrapper>;
 };
 
+export const EDITOR_SCROLLBAR_WIDTH = "0.75rem";
+
 const Wrapper = styled.div`
   ${({ theme }) => css`
     flex: 1;
@@ -291,7 +293,7 @@ const Wrapper = styled.div`
     /* Scrollbar */
     /* Chromium */
     & ::-webkit-scrollbar {
-      width: 0.75rem;
+      width: ${EDITOR_SCROLLBAR_WIDTH};
     }
 
     & ::-webkit-scrollbar-track {

client/src/components/Panels/Main/Editor/index.ts

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

client/src/components/Panels/Main/Tabs/Tabs.tsx

@@ -1,12 +1,16 @@
 import { useAtom } from "jotai";
+import { useCallback } from "react";
 import styled, { css } from "styled-components";
 
-import { explorerAtom, refreshExplorerAtom } from "../../../../state";
+import {
+  explorerAtom,
+  refreshExplorerAtom,
+  showWalletAtom,
+} from "../../../../state";
+import Button from "../../../Button";
+import useCurrentWallet from "../../Wallet/useCurrentWallet";
 import Tab from "./Tab";
 
-// Same height with Side-Right Title
-export const TAB_HEIGHT = "2rem";
-
 const Tabs = () => {
   const [explorer] = useAtom(explorerAtom);
   useAtom(refreshExplorerAtom);
@@ -16,18 +20,44 @@ const Tabs = () => {
 
   return (
     <Wrapper>
-      {tabs?.map((t, i) => (
-        <Tab key={i} current={t.current} path={t.path} />
-      ))}
+      <TabsWrapper>
+        {tabs?.map((t, i) => (
+          <Tab key={i} current={t.current} path={t.path} />
+        ))}
+      </TabsWrapper>
+      <Wallet />
     </Wrapper>
   );
 };
 
+const Wallet = () => {
+  const [, setShowWallet] = useAtom(showWalletAtom);
+
+  const { walletPkStr } = useCurrentWallet();
+
+  const toggleWallet = useCallback(() => {
+    setShowWallet((s) => !s);
+  }, [setShowWallet]);
+
+  if (!walletPkStr) return null;
+
+  return (
+    <WalletWrapper>
+      <Button onClick={toggleWallet} kind="icon" bold>
+        <img src="icons/sidebar/wallet.png" alt="Wallet" />
+        Wallet
+      </Button>
+    </WalletWrapper>
+  );
+};
+
+// Same height with Side-Right Title
+export const TAB_HEIGHT = "2rem";
+
 const Wrapper = styled.div`
   ${({ theme }) => css`
     display: flex;
-    overflow-x: auto;
-    overflow-y: hidden;
+    justify-content: space-between;
     min-height: ${TAB_HEIGHT};
     user-select: none;
     background-color: ${theme.colors.right?.bg};
@@ -36,4 +66,35 @@ const Wrapper = styled.div`
   `}
 `;
 
+const TabsWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+`;
+
+const WalletWrapper = styled.div`
+  ${({ theme }) => css`
+    display: flex;
+    align-items: center;
+
+    & > button {
+      background-color: ${theme.colors.default.bg};
+      border-top-left-radius: ${theme.borderRadius};
+      border-bottom-left-radius: ${theme.borderRadius};
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+
+      & img {
+        filter: invert(0.5);
+        margin-right: 0.375rem;
+      }
+
+      &:hover img {
+        filter: invert(1);
+      }
+    }
+  `}
+`;
+
 export default Tabs;

client/src/components/Panels/Main/Tabs/index.ts

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

client/src/components/Panels/Panels.tsx

@@ -8,6 +8,7 @@ import Toast from "../Toast";
 
 const Main = lazy(() => import("./Main"));
 const Bottom = lazy(() => import("./Bottom"));
+const Wallet = lazy(() => import("./Wallet"));
 
 const Panels = () => (
   <Wrapper>
@@ -17,6 +18,7 @@ const Panels = () => (
       <Side />
       <Suspense fallback={<Loading size={10} circleCount={10} />}>
         <Main />
+        <Wallet />
       </Suspense>
     </MainWrapper>
     <Suspense fallback={false}>

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

@@ -6,7 +6,6 @@ import IconButton from "../../../IconButton";
 import Link from "../../../Link";
 import PopButton from "../../../PopButton";
 import Settings from "../Right/Settings";
-import Wallet from "../Right/Wallet";
 import { Sidebar } from "../sidebar-values";
 import { sidebarData } from "./sidebar-data";
 import useActiveTab from "./useActiveTab";
@@ -53,7 +52,7 @@ const Left: FC<LeftProps> = ({
             return (
               <PopButton
                 key={i}
-                PopElement={data.value === Sidebar.WALLET ? Wallet : Settings}
+                PopElement={Settings}
                 buttonProps={{ ...data }}
               />
             );

client/src/components/Panels/Side/Left/sidebar-data.ts

@@ -31,11 +31,6 @@ export const sidebarData = {
       src: rootDir + "github.png",
       value: Sidebar.GITHUB,
     },
-    {
-      title: Sidebar.WALLET,
-      src: rootDir + "wallet.png",
-      value: Sidebar.WALLET,
-    },
     {
       title: Sidebar.SETTINGS,
       src: rootDir + "settings.webp",

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

@@ -17,7 +17,7 @@ import {
   programAtom,
 } from "../../../../../state";
 import useIsDeployed from "./useIsDeployed";
-import useConnect from "../Wallet/useConnect";
+import useConnect from "../../../Wallet/useConnect";
 import Loading from "../../../../Loading";
 import useInitialLoading from "../../useInitialLoading";
 import { ConnectionErrorText } from "../../Common";

client/src/components/Panels/Side/Right/BuildDeploy/Extras/IDL.tsx

@@ -1,8 +1,8 @@
-import { useAtom } from "jotai";
 import { ChangeEvent } from "react";
+import { useAtom } from "jotai";
 import styled from "styled-components";
-import { buildCountAtom } from "../../../../../../state";
 
+import { buildCountAtom } from "../../../../../../state";
 import { PgCommon } from "../../../../../../utils/pg/common";
 import { PgProgramInfo } from "../../../../../../utils/pg/program-info";
 import DownloadButton from "../../../../../DownloadButton";
@@ -51,10 +51,7 @@ const Export = () => {
 
   return (
     <DownloadButton
-      href={
-        "data:text/json;charset=utf-8," +
-        encodeURIComponent(JSON.stringify(idl))
-      }
+      href={PgCommon.getUtf8EncodedString(idl)}
       download="idl.json"
     >
       Export

client/src/components/Panels/Side/Right/BuildDeploy/Extras/ProgramCredentials.tsx

@@ -70,10 +70,7 @@ const Export = () => {
 
   return (
     <DownloadButton
-      href={
-        "data:text/json;charset=utf-8," +
-        encodeURIComponent(JSON.stringify(Array.from(programKp.secretKey)))
-      }
+      href={PgCommon.getUtf8EncodedString(Array.from(programKp.secretKey))}
       download="program-keypair.json"
     >
       Export

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

@@ -6,7 +6,7 @@ import { Resizable } from "re-resizable";
 
 import Loading from "../../../Loading";
 import { ClassName, Id } from "../../../../constants";
-import { TAB_HEIGHT } from "../../Main/Tabs/Tabs";
+import { TAB_HEIGHT } from "../../Main/Tabs";
 import { Sidebar } from "../sidebar-values";
 import { PgShare } from "../../../../utils/pg/share";
 import { PgExplorer } from "../../../../utils/pg/explorer";

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

@@ -29,7 +29,7 @@ import Input, { defaultInputProps } from "../../../../Input";
 import Button from "../../../../Button";
 import InputLabel from "./InputLabel";
 import useUpdateTxVals, { Identifiers } from "./useUpdateTxVals";
-import useCurrentWallet from "../Wallet/useCurrentWallet";
+import useCurrentWallet from "../../../Wallet/useCurrentWallet";
 
 interface AccountProps {
   account: IdlAccount;

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

@@ -14,7 +14,7 @@ import { getFullType } from "./types";
 import { updateTxValsProps } from "./useUpdateTxVals";
 import { ClassName } from "../../../../../constants";
 import { terminalAtom, txHashAtom } from "../../../../../state";
-import useCurrentWallet from "../Wallet/useCurrentWallet";
+import useCurrentWallet from "../../../Wallet/useCurrentWallet";
 import { PgTest } from "../../../../../utils/pg/test";
 import { PgTx } from "../../../../../utils/pg/tx";
 import { PgTerminal } from "../../../../../utils/pg/terminal";