From 882d2488ca339b248bd5e8f18f5332c53d14b83c Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 19 May 2023 10:58:42 +0700
Subject: [PATCH] feat: apply initial condition to my stored codes upload
 button

---
 CHANGELOG.md                                  |  1 +
 .../codes/components/MyStoredCodesSection.tsx | 51 ++++++++++++-------
 .../pages/codes/components/UploadButton.tsx   | 23 ++++++---
 3 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b2c13b4f..ea517e022 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -41,6 +41,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#346](https://github.com/alleslabs/celatone-frontend/pull/346) Apply initial condition to my stored codes upload button
 - [#327](https://github.com/alleslabs/celatone-frontend/pull/327) Update logic to enable upload wasm code
 - [#317](https://github.com/alleslabs/celatone-frontend/pull/317) Add amplitude for proposal list page and pagination
 
diff --git a/src/lib/pages/codes/components/MyStoredCodesSection.tsx b/src/lib/pages/codes/components/MyStoredCodesSection.tsx
index 51c9ccf5c..2747ba98b 100644
--- a/src/lib/pages/codes/components/MyStoredCodesSection.tsx
+++ b/src/lib/pages/codes/components/MyStoredCodesSection.tsx
@@ -1,7 +1,10 @@
 import { Box, Heading, HStack } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
 
 import { MyStoredCodesTable } from "lib/components/table";
-import type { CodeInfo } from "lib/types";
+import { useUploadAccessParams } from "lib/services/proposalService";
+import type { Addr, CodeInfo } from "lib/types";
+import { AccessConfigPermission } from "lib/types";
 
 import { UploadButton } from "./UploadButton";
 
@@ -19,21 +22,31 @@ export const MyStoredCodesSection = ({
   onRowSelect,
   disconnectedMessage,
   isSearching,
-}: MyStoredCodesSectionProps) => (
-  <Box mb={8}>
-    <HStack alignItems="center" justifyContent="space-between" mb="18px">
-      <Heading as="h6" variant="h6">
-        My Stored Codes
-      </Heading>
-      <UploadButton />
-    </HStack>
-    <MyStoredCodesTable
-      codes={codes}
-      isLoading={isLoading}
-      onRowSelect={onRowSelect}
-      emptyMessage="Your uploaded Wasm files will display as My Stored Codes."
-      disconnectedMessage={disconnectedMessage}
-      isSearching={isSearching}
-    />
-  </Box>
-);
+}: MyStoredCodesSectionProps) => {
+  const { data } = useUploadAccessParams();
+  const { address } = useWallet();
+  const isAllowed = Boolean(data?.addresses?.includes(address as Addr));
+
+  const isPermissionedNetwork =
+    data?.permission !== AccessConfigPermission.EVERYBODY;
+
+  return (
+    <Box mb={8}>
+      <HStack alignItems="center" justifyContent="space-between" mb="18px">
+        <Heading as="h6" variant="h6">
+          My Stored Codes
+        </Heading>
+        {/* TODO: overwrite this logic when merging proposal feature */}
+        <UploadButton isAllowed={!isPermissionedNetwork || isAllowed} />
+      </HStack>
+      <MyStoredCodesTable
+        codes={codes}
+        isLoading={isLoading}
+        onRowSelect={onRowSelect}
+        emptyMessage="Your uploaded Wasm files will display as My Stored Codes."
+        disconnectedMessage={disconnectedMessage}
+        isSearching={isSearching}
+      />
+    </Box>
+  );
+};
diff --git a/src/lib/pages/codes/components/UploadButton.tsx b/src/lib/pages/codes/components/UploadButton.tsx
index 2efc0cc78..1fe3784a4 100644
--- a/src/lib/pages/codes/components/UploadButton.tsx
+++ b/src/lib/pages/codes/components/UploadButton.tsx
@@ -2,15 +2,26 @@ import { Button } from "@chakra-ui/react";
 
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
+import { Tooltip } from "lib/components/Tooltip";
 
-export const UploadButton = () => {
+interface UploadButtonProps {
+  isAllowed: boolean;
+}
+export const UploadButton = ({ isAllowed }: UploadButtonProps) => {
   const navigate = useInternalNavigate();
+
   return (
-    <Button
-      onClick={() => navigate({ pathname: "/upload" })}
-      leftIcon={<CustomIcon name="plus" boxSize="12px" />}
+    <Tooltip
+      label="Only allowed address can upload Wasm file without opening proposal"
+      isDisabled={isAllowed}
     >
-      Upload New Code
-    </Button>
+      <Button
+        disabled={!isAllowed}
+        onClick={() => navigate({ pathname: "/upload" })}
+        rightIcon={<CustomIcon name="upload" boxSize="12px" />}
+      >
+        Upload New Code
+      </Button>
+    </Tooltip>
   );
 };