Fix/refactor codes page

CHANGELOG.md

@@ -50,6 +50,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#474](https://github.com/alleslabs/celatone-frontend/pull/474) Refactor stored and saved codes pages
 - [#468](https://github.com/alleslabs/celatone-frontend/pull/468) Add breadcrumb to pool id page
 - [#466](https://github.com/alleslabs/celatone-frontend/pull/466) Fix developer mode alert
 - [#457](https://github.com/alleslabs/celatone-frontend/pull/457) Add alert for proposal forum review

src/lib/components/forms/FilterByPermission.tsx

@@ -9,7 +9,8 @@ interface PermissionOption {
   label: string;
   value: PermissionFilterValue;
   disabled: boolean;
-  icon?: IconKeys;
+  icon: IconKeys;
+  iconColor: string;
 }
 
 interface FilterByPermissionProps {
@@ -25,18 +26,21 @@ const options: PermissionOption[] = [
     value: "all",
     disabled: false,
     icon: "check",
+    iconColor: "gray.600",
   },
   {
     label: "Can Instantiate without proposal",
     value: "without-proposal",
     disabled: false,
     icon: "instantiate",
+    iconColor: "gray.600",
   },
   {
     label: "Instantiate through proposal only",
     value: "with-proposal",
     disabled: false,
     icon: "vote",
+    iconColor: "gray.600",
   },
 ];
 

src/lib/components/table/transactions/TransactionsTable.tsx

@@ -25,9 +25,9 @@ export const TransactionsTable = ({
   if (isLoading) return <Loading withBorder />;
   if (!transactions?.length) return emptyState;
 
-  const templateColumns = `25px 180px 48px minmax(360px, 1fr) ${
+  const templateColumns = `40px 190px 48px minmax(360px, 1fr) ${
     showRelations ? "100px " : ""
-  }max(160px) ${showTimestamp ? "max(220px) " : ""}${
+  }max(160px) ${showTimestamp ? "max(230px) " : ""}${
     showAction ? "100px " : ""
   }`;
 

src/lib/components/table/transactions/TransactionsTableRow.tsx

@@ -57,7 +57,7 @@ export const TransactionsTableRow = ({
             />
           )}
         </TableRow>
-        <TableRow>
+        <TableRow pr={1}>
           <>
             <ExplorerLink
               value={transaction.hash.toLocaleUpperCase()}

src/lib/components/tx/modal/ButtonSection.tsx

@@ -68,11 +68,11 @@ export const ButtonSection = ({
           <Button
             variant="ghost-secondary"
             onClick={() => {
-              navigate({ pathname: "/my-codes" });
+              navigate({ pathname: "/stored-codes" });
               onClose?.();
             }}
           >
-            See my codes list
+            See my stored codes
           </Button>
           <Button
             variant="primary"

src/lib/layout/navbar/Expand.tsx

@@ -48,7 +48,7 @@ const NavInfo = ({ submenu, isCurrentPage }: NavInfoProps) => (
     <Text
       variant="body2"
       className="ellipsis"
-      color={submenu.isDisable ? "text.dark" : "text.main"}
+      color={submenu.isDisable ? "text.disabled" : "text.main"}
     >
       {submenu.name}
     </Text>

src/lib/layout/navbar/index.tsx

@@ -51,8 +51,8 @@ const Navbar = ({ isExpand, isDevMode, setIsExpand }: NavbarProps) => {
         ...(isDevMode && wasm.enabled
           ? [
               {
-                name: "My Codes",
-                slug: "/codes",
+                name: "My Stored Codes",
+                slug: "/stored-codes",
                 icon: "code" as IconKeys,
               },
               {
@@ -107,7 +107,7 @@ const Navbar = ({ isExpand, isDevMode, setIsExpand }: NavbarProps) => {
             submenu: [
               {
                 name: "Saved Codes",
-                slug: "/my-codes",
+                slug: "/saved-codes",
                 icon: "code" as IconKeys,
               },
               {

src/lib/pages/saved-codes/components/MySavedCodesSection.tsx

@@ -0,0 +1,24 @@
+import { MySavedCodesTable } from "lib/components/table";
+import type { CodeInfo } from "lib/types";
+
+interface MySavedCodesSectionProps {
+  codes: CodeInfo[];
+  isLoading: boolean;
+  onRowSelect: (codeId: number) => void;
+  isSearching: boolean;
+}
+
+export const MySavedCodesSection = ({
+  codes,
+  isLoading,
+  onRowSelect,
+  isSearching,
+}: MySavedCodesSectionProps) => (
+  <MySavedCodesTable
+    codes={codes}
+    isLoading={isLoading}
+    onRowSelect={onRowSelect}
+    emptyMessage="Codes saved using Celatone will display here. Saved codes are stored locally on your device."
+    isSearching={isSearching}
+  />
+);