From 177664345f6a63018f4c04be673f395d98f218c3 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Fri, 24 Mar 2023 18:03:14 +0700
Subject: [PATCH 001/354] feat(components): pages/store-code

---
 src/lib/components/WasmPageContainer.tsx      |   8 +-
 .../components/forms/ControllerTextarea.tsx   |   2 +
 .../pages/store-code/components/Footer.tsx    |  46 +++
 .../store-code/components/UploadFile.tsx      |  61 +++
 src/lib/pages/store-code/index.tsx            | 362 ++++++++++++++++++
 src/pages/[network]/store-code.tsx            |   3 +
 src/pages/store-code.tsx                      |   3 +
 7 files changed, 483 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/pages/store-code/components/Footer.tsx
 create mode 100644 src/lib/pages/store-code/components/UploadFile.tsx
 create mode 100644 src/lib/pages/store-code/index.tsx
 create mode 100644 src/pages/[network]/store-code.tsx
 create mode 100644 src/pages/store-code.tsx

diff --git a/src/lib/components/WasmPageContainer.tsx b/src/lib/components/WasmPageContainer.tsx
index 0ccdf949f..09f24845c 100644
--- a/src/lib/components/WasmPageContainer.tsx
+++ b/src/lib/components/WasmPageContainer.tsx
@@ -3,13 +3,17 @@ import type { ReactNode } from "react";
 
 type WasmPageContainerProps = {
   children: ReactNode;
+  width?: string;
 };
 
-const WasmPageContainer = ({ children }: WasmPageContainerProps) => (
+const WasmPageContainer = ({
+  children,
+  width = "540px",
+}: WasmPageContainerProps) => (
   <Flex
     as="main"
     align="center"
-    width="540px"
+    width={width}
     mx="auto"
     py="48px"
     direction="column"
diff --git a/src/lib/components/forms/ControllerTextarea.tsx b/src/lib/components/forms/ControllerTextarea.tsx
index 01c33114a..b32ff1b6e 100644
--- a/src/lib/components/forms/ControllerTextarea.tsx
+++ b/src/lib/components/forms/ControllerTextarea.tsx
@@ -31,6 +31,7 @@ export const ControllerTextarea = <T extends FieldValues>({
   helperText,
   placeholder = " ",
   error,
+  height,
   rules = {},
   ...componentProps
 }: ControllerTextareaProps<T>) => {
@@ -52,6 +53,7 @@ export const ControllerTextarea = <T extends FieldValues>({
       )}
       <Textarea
         resize="none"
+        height={height}
         placeholder={placeholder}
         value={watcher}
         onChange={field.onChange}
diff --git a/src/lib/pages/store-code/components/Footer.tsx b/src/lib/pages/store-code/components/Footer.tsx
new file mode 100644
index 000000000..2dab9ac7b
--- /dev/null
+++ b/src/lib/pages/store-code/components/Footer.tsx
@@ -0,0 +1,46 @@
+import { Box, Button, Flex, Spinner } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+
+interface FooterProps {
+  // onSubmit: () => void;
+  // disabled: boolean;
+  loading: boolean;
+}
+
+export const Footer = ({
+  // onSubmit,
+  // disabled,
+  loading = false,
+}: FooterProps) => {
+  const router = useRouter();
+  return (
+    <Flex
+      gap={2}
+      w="full"
+      bg="pebble.900"
+      h="70px"
+      bottom="0"
+      position="sticky"
+      zIndex={2}
+    >
+      <Box flex="1" />
+      <Flex flex="5" align="center" justify="space-between" h="full" w="full">
+        <Button variant="outline-gray" onClick={router.back}>
+          Cancel
+        </Button>
+        <Button
+          variant="primary"
+          // onClick={onSubmit}
+          // disabled={disabled}
+        >
+          {loading ? (
+            <Spinner size="md" color="pebble.600" />
+          ) : (
+            "Submit Proposal"
+          )}
+        </Button>
+      </Flex>
+      <Box flex="5" />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/store-code/components/UploadFile.tsx b/src/lib/pages/store-code/components/UploadFile.tsx
new file mode 100644
index 000000000..6a6049fe7
--- /dev/null
+++ b/src/lib/pages/store-code/components/UploadFile.tsx
@@ -0,0 +1,61 @@
+import { Heading } from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
+import { useForm } from "react-hook-form";
+
+import { DropZone } from "lib/components/dropzone";
+import { ControllerInput } from "lib/components/forms";
+import { UploadCard } from "lib/components/upload/components/UploadCard";
+import type { UploadSectionState } from "lib/components/upload/types";
+import { getMaxCodeNameLengthError, MAX_CODE_NAME_LENGTH } from "lib/data";
+
+export const UploadFile = observer(() => {
+  const {
+    control,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<UploadSectionState>({
+    defaultValues: {
+      wasmFile: undefined,
+      codeDesc: "",
+      estimatedFee: undefined,
+      simulateStatus: "pending",
+      simulateError: "",
+    },
+    mode: "all",
+  });
+  const { wasmFile, codeDesc, simulateStatus, simulateError } = watch();
+  return (
+    <>
+      <Heading as="h6" variant="h6" pt={12} pb={6}>
+        Upload Wasm File
+      </Heading>
+      {wasmFile ? (
+        <UploadCard
+          file={wasmFile}
+          deleteFile={() => {
+            setValue("wasmFile", undefined);
+            setValue("estimatedFee", undefined);
+          }}
+          simulateStatus={simulateStatus}
+          simulateError={simulateError}
+        />
+      ) : (
+        <DropZone setFile={(file) => setValue("wasmFile", file)} />
+      )}
+      <ControllerInput
+        name="codeDesc"
+        control={control}
+        label="Code Name (Optional)"
+        placeholder="Untitled Name"
+        helperText="A short description of what your code does. This is stored locally on your device and can be added or changed later."
+        rules={{
+          maxLength: MAX_CODE_NAME_LENGTH,
+        }}
+        error={errors.codeDesc && getMaxCodeNameLengthError(codeDesc.length)}
+        variant="floating"
+        mt={8}
+      />
+    </>
+  );
+});
diff --git a/src/lib/pages/store-code/index.tsx b/src/lib/pages/store-code/index.tsx
new file mode 100644
index 000000000..7e38a1fa5
--- /dev/null
+++ b/src/lib/pages/store-code/index.tsx
@@ -0,0 +1,362 @@
+import {
+  Flex,
+  Heading,
+  Text,
+  Box,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionIcon,
+  AccordionPanel,
+  Button,
+  RadioGroup,
+  Radio,
+} from "@chakra-ui/react";
+import type { Coin, StdFee } from "@cosmjs/stargate";
+import { useWallet } from "@cosmos-kit/react";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+
+import { useNativeTokensInfo, useSimulateFee } from "lib/app-provider";
+import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
+import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
+import {
+  ControllerInput,
+  ControllerTextarea,
+  SelectInput,
+} from "lib/components/forms";
+import { CustomIcon } from "lib/components/icon";
+import type { SimulateStatus } from "lib/components/upload/types";
+import WasmPageContainer from "lib/components/WasmPageContainer";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import type { Addr } from "lib/types";
+
+import { Footer } from "./components/Footer";
+import { UploadFile } from "./components/UploadFile";
+
+interface WhiteListState {
+  title: string;
+  description: string;
+  creator: Addr;
+  onlyAddress: string;
+  addresses: { address: Addr }[];
+  initialDeposit: Coin;
+  estimatedFee?: StdFee;
+  simulateStatus: SimulateStatus;
+  simulateError: string;
+}
+const StoreCode = observer(() => {
+  const { loading } = useSimulateFee();
+  const router = useRouter();
+  const { control, watch, setValue } = useForm<WhiteListState>({
+    defaultValues: {
+      title: "",
+      description: "",
+      creator: "",
+      onlyAddress: "",
+      addresses: [{ address: "" as Addr }],
+      initialDeposit: { denom: "", amount: "" } as Coin,
+      estimatedFee: undefined,
+      simulateStatus: "pending",
+      simulateError: "",
+    },
+  });
+  const initialDepositWatch = watch("initialDeposit");
+  const { address: walletAddress = "" } = useWallet();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "addresses",
+  });
+
+  const { estimatedFee } = watch();
+  const nativeTokensInfo = useNativeTokensInfo();
+  const [permission, setpermission] = useState<
+    "everybody" | "nobody" | "only-address" | "any-of-addresses"
+  >("everybody");
+
+  useEffect(() => {
+    if (router.isReady) AmpTrack(AmpEvent.TO_PROPOSALS);
+  }, [router.isReady]);
+
+  return (
+    <>
+      <WasmPageContainer width="100%">
+        <Flex gap={2}>
+          <Box flex="1" />
+          <Flex flex="10" position="relative">
+            <Box flex="6">
+              <Heading as="h5" variant="h5">
+                Create Proposal to Store Code
+              </Heading>
+              <Text color="text.dark" pt={4}>
+                To store your contract code, you need to submit a
+                `StoreCodeProposal`. After the proposal passes, the code will be
+                stored on-chain and can then be instantiated.
+              </Text>
+              <ConnectWalletAlert
+                subtitle="You need to connect wallet to proceed this action"
+                mt={12}
+              />
+              <form style={{ width: "100%" }}>
+                <Flex mt={12} gap={6} flexDirection="column">
+                  <Heading as="h6" variant="h6">
+                    Create Proposal to Store Code
+                  </Heading>
+                  <ControllerInput
+                    name="title"
+                    control={control}
+                    placeholder="ex. Store code for ..."
+                    label="Proposal Title"
+                    variant="floating"
+                    rules={{ required: "title is required" }}
+                  />
+                  <ControllerTextarea
+                    name="description"
+                    control={control}
+                    height="160px"
+                    label="Proposal Description"
+                    placeholder="Usually details information such as the team behind the contract, what the contract does, the benefits the contract will have to the chain/ecosystem, and the compiled code checksum or commit hash for the code on GitHub etc."
+                    variant="floating"
+                    rules={{ required: "Proposal Descriptio is required" }}
+                  />
+                  <ControllerInput
+                    name="creator"
+                    control={control}
+                    placeholder="ex. cltn1ff1asdf7988aw49efa4vw9846789"
+                    label="Run as"
+                    variant="floating"
+                    helperText="This address will be stored as code creator"
+                    rules={{ required: "creator is required" }}
+                  />
+                </Flex>
+                <UploadFile />
+                <Heading as="h6" variant="h6" pt={12}>
+                  Instantiate Permission
+                </Heading>
+                <Text color="text.dark" pt={4}>
+                  If the proposal is passed, the stored code can be instantiated
+                  to a contract by your selected option
+                </Text>
+                <Flex pt={6}>
+                  <RadioGroup
+                    onChange={(
+                      nextVal:
+                        | "everybody"
+                        | "nobody"
+                        | "only-address"
+                        | "any-of-addresses"
+                    ) => {
+                      setpermission(nextVal);
+                    }}
+                    value={permission}
+                    w="100%"
+                  >
+                    <Box>
+                      <Radio value="everybody" py={2} width="100%" size="lg">
+                        Anyone can instantiate (Everybody)
+                      </Radio>
+                      <Radio value="nobody" py={2} width="100%" size="lg">
+                        Instantiate through governance only (Nobody)
+                      </Radio>
+                      <Radio value="only-address" py={2} width="100%" size="lg">
+                        Only a designated address only can instantiate
+                        (OnlyAddress)
+                      </Radio>
+                      {permission === "only-address" && (
+                        <Flex py={6}>
+                          <ControllerInput
+                            name="onlyAddress"
+                            control={control}
+                            placeholder="ex. cltn1ff1asdf7988aw49efa4vw9846789"
+                            label="Designated Address"
+                            variant="floating"
+                            helperText="You can assign both wallet or contract address."
+                            rules={{ required: "onlyAddress is required" }}
+                            helperAction={
+                              <Text
+                                color="honeydew.main"
+                                fontWeight="600"
+                                variant="body3"
+                                cursor="pointer"
+                                alignSelf="flex-start"
+                                onClick={() => {
+                                  AmpTrack(AmpEvent.USE_ASSIGN_ME);
+                                  setValue("onlyAddress", walletAddress);
+                                }}
+                              >
+                                Assign me
+                              </Text>
+                            }
+                          />
+                        </Flex>
+                      )}
+                      <Radio
+                        value="any-of-addresses"
+                        py={2}
+                        width="100%"
+                        size="lg"
+                      >
+                        Only a set of addresses can instantiate (AnyOfAddresses)
+                      </Radio>
+                      {permission === "any-of-addresses" && (
+                        <Box>
+                          {fields.map((field, idx) => (
+                            <Flex gap={2} my={6} width="100%">
+                              <ControllerInput
+                                name={`addresses.${idx}.address`}
+                                control={control}
+                                label="Address"
+                                placeholder="ex. cltn1ff1asdf7988aw49efa4vw9846789"
+                                variant="floating"
+                              />
+                              <Button
+                                w="56px"
+                                h="56px"
+                                variant="outline-gray"
+                                size="lg"
+                                disabled={fields.length <= 1}
+                                onClick={() => remove(idx)}
+                              >
+                                <CustomIcon
+                                  name="delete"
+                                  color={
+                                    fields.length <= 1
+                                      ? "pebble.600"
+                                      : "text.dark"
+                                  }
+                                />
+                              </Button>
+                            </Flex>
+                          ))}
+                          <Button
+                            variant="outline-primary"
+                            mt={3}
+                            mx="auto"
+                            onClick={() => append({ address: "" as Addr })}
+                            leftIcon={
+                              <CustomIcon name="plus" color="violet.light" />
+                            }
+                          >
+                            Add More Address
+                          </Button>
+                        </Box>
+                      )}
+                    </Box>
+                  </RadioGroup>
+                </Flex>
+
+                <Heading as="h6" variant="h6" pt={12}>
+                  Initial Deposit
+                </Heading>
+                <Text color="text.dark" pt={4}>
+                  Minimum deposit required to start 7-day voting period:
+                  1,000.000 KOYN
+                </Text>
+                <Flex pt={6} gap={4}>
+                  <Flex flex="1">
+                    <SelectInput
+                      formLabel="Asset"
+                      options={nativeTokensInfo.map((asset) => ({
+                        label: asset.symbol,
+                        value: asset.base,
+                        disabled: false,
+                      }))}
+                      onChange={(newVal) =>
+                        setValue("initialDeposit.denom", newVal)
+                      }
+                      placeholder="Select"
+                      initialSelected={initialDepositWatch.denom}
+                    />
+                  </Flex>
+                  <Flex flex="3">
+                    <ControllerInput
+                      name="initialDeposit.amount"
+                      control={control}
+                      label="Amount"
+                      placeholder="0.00"
+                      variant="floating"
+                      type="number"
+                    />
+                  </Flex>
+                </Flex>
+                <Flex
+                  mt={12}
+                  fontSize="14px"
+                  color="text.dark"
+                  alignSelf="flex-start"
+                  alignItems="center"
+                  display="flex"
+                  gap={1}
+                >
+                  <p>Transaction Fee:</p>
+                  <EstimatedFeeRender
+                    estimatedFee={estimatedFee}
+                    loading={loading}
+                  />
+                </Flex>
+              </form>
+            </Box>
+            <Box flex="4" px={8} mt={40} position="relative">
+              <Flex position="fixed" width="100%">
+                <Accordion allowToggle width={96} defaultIndex={[0]}>
+                  <AccordionItem>
+                    <h2>
+                      <AccordionButton>
+                        <Box as="span" flex="1" py={2} textAlign="left">
+                          <Text
+                            variant="body2"
+                            fontWeight="600"
+                            color="text.main"
+                          >
+                            Why do I need to submit proposal?
+                          </Text>
+                        </Box>
+                        <AccordionIcon />
+                      </AccordionButton>
+                    </h2>
+                    <AccordionPanel pb={4}>
+                      <Text variant="body2" color="text.dark" pb={4}>
+                        Osmosis Mainnet is permissioned chain, which means you
+                        will need to submit proposal to store code. <br />
+                        <br /> Another way is to get your wallet address to
+                        allow list to store code without opening proposal.{" "}
+                        <br />
+                        <br /> You still can upload your Wasm to see how your
+                        code works on Testnet.
+                      </Text>
+                      <Button
+                        size="md"
+                        p="0"
+                        variant="ghost-primary"
+                        rightIcon={
+                          <CustomIcon
+                            name="chevron-right"
+                            color="lilac.main"
+                            boxSize={3}
+                          />
+                        }
+                      >
+                        Switch to testnet
+                      </Button>
+                    </AccordionPanel>
+                  </AccordionItem>
+                </Accordion>
+              </Flex>
+            </Box>
+          </Flex>
+          <Box flex="1" />
+        </Flex>
+      </WasmPageContainer>
+      <Footer
+        loading={false}
+        // onInstantiate={proceed}
+        // disabled={disableInstantiate}
+        // loading={simulating}
+      />
+    </>
+  );
+});
+
+export default StoreCode;
diff --git a/src/pages/[network]/store-code.tsx b/src/pages/[network]/store-code.tsx
new file mode 100644
index 000000000..293aefb30
--- /dev/null
+++ b/src/pages/[network]/store-code.tsx
@@ -0,0 +1,3 @@
+import StoreCode from "lib/pages/store-code";
+
+export default StoreCode;
diff --git a/src/pages/store-code.tsx b/src/pages/store-code.tsx
new file mode 100644
index 000000000..293aefb30
--- /dev/null
+++ b/src/pages/store-code.tsx
@@ -0,0 +1,3 @@
+import StoreCode from "lib/pages/store-code";
+
+export default StoreCode;

From ee542a5973adae4579cf04d3326634ab5d9dc651 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Mon, 27 Mar 2023 16:02:30 +0700
Subject: [PATCH 002/354] fix(components): fix radio width

---
 src/lib/layout/Announcement.tsx    |  36 ++++++
 src/lib/layout/index.tsx           |   8 +-
 src/lib/pages/store-code/index.tsx | 201 +++++++++++++++++------------
 3 files changed, 158 insertions(+), 87 deletions(-)
 create mode 100644 src/lib/layout/Announcement.tsx

diff --git a/src/lib/layout/Announcement.tsx b/src/lib/layout/Announcement.tsx
new file mode 100644
index 000000000..90287d3ae
--- /dev/null
+++ b/src/lib/layout/Announcement.tsx
@@ -0,0 +1,36 @@
+import { Flex, Text } from "@chakra-ui/react";
+import Link from "next/link";
+
+import { CustomIcon } from "lib/components/icon";
+
+const Announcement = () => {
+  return (
+    <Flex
+      width="100vw"
+      height="40px"
+      align="center"
+      justifyContent="space-between"
+      px={6}
+      mb={1}
+      gap="24px"
+      bgColor="violet.darker"
+    >
+      <Flex />
+      <Flex gap={2}>
+        <Text>New Update V.1.0.2 – Osmosis Pool Page Now Available </Text>
+        <Link
+          href="https://celat.one/releases"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Text color="lilac.main" textDecoration="underline">
+            See Detail
+          </Text>
+        </Link>
+      </Flex>
+      <CustomIcon name="close" color="violet.light" />
+    </Flex>
+  );
+};
+
+export default Announcement;
diff --git a/src/lib/layout/index.tsx b/src/lib/layout/index.tsx
index 430990e3d..f60426f24 100644
--- a/src/lib/layout/index.tsx
+++ b/src/lib/layout/index.tsx
@@ -6,6 +6,7 @@ import { useState, useEffect } from "react";
 import { useMobile } from "lib/app-provider";
 import { scrollToTop } from "lib/utils";
 
+import Announcement from "./Announcement";
 import Footer from "./Footer";
 import Header from "./Header";
 import Navbar from "./navbar";
@@ -25,14 +26,17 @@ const Layout = ({ children }: LayoutProps) => {
   }, [router.asPath]);
   return (
     <Grid
-      templateAreas={`"header header"
+      templateAreas={`"announce announce" "header header"
     "nav main"`}
-      gridTemplateRows="70px 1fr"
+      gridTemplateRows="40px 70px 1fr"
       gridTemplateColumns={isExpand ? "224px 1fr" : "48px 1fr"}
       h="100vh"
       overflowX="hidden"
       bg="background.main"
     >
+      <GridItem bg="violet.darker" area="announce">
+        <Announcement />
+      </GridItem>
       <GridItem bg="pebble.900" area="header" mb="1">
         <Header />
       </GridItem>
diff --git a/src/lib/pages/store-code/index.tsx b/src/lib/pages/store-code/index.tsx
index 7e38a1fa5..a45136483 100644
--- a/src/lib/pages/store-code/index.tsx
+++ b/src/lib/pages/store-code/index.tsx
@@ -139,7 +139,7 @@ const StoreCode = observer(() => {
                   If the proposal is passed, the stored code can be instantiated
                   to a contract by your selected option
                 </Text>
-                <Flex pt={6}>
+                <Box pt={6}>
                   <RadioGroup
                     onChange={(
                       nextVal:
@@ -151,101 +151,132 @@ const StoreCode = observer(() => {
                       setpermission(nextVal);
                     }}
                     value={permission}
-                    w="100%"
                   >
                     <Box>
                       <Radio value="everybody" py={2} width="100%" size="lg">
-                        Anyone can instantiate (Everybody)
+                        <Text
+                          fontWeight={
+                            permission === "everybody" ? "600" : "400"
+                          }
+                        >
+                          Anyone can instantiate (Everybody)
+                        </Text>
                       </Radio>
                       <Radio value="nobody" py={2} width="100%" size="lg">
-                        Instantiate through governance only (Nobody)
+                        <Text
+                          fontWeight={permission === "nobody" ? "600" : "400"}
+                        >
+                          Instantiate through governance only (Nobody)
+                        </Text>
                       </Radio>
-                      <Radio value="only-address" py={2} width="100%" size="lg">
-                        Only a designated address only can instantiate
-                        (OnlyAddress)
-                      </Radio>
-                      {permission === "only-address" && (
-                        <Flex py={6}>
-                          <ControllerInput
-                            name="onlyAddress"
-                            control={control}
-                            placeholder="ex. cltn1ff1asdf7988aw49efa4vw9846789"
-                            label="Designated Address"
-                            variant="floating"
-                            helperText="You can assign both wallet or contract address."
-                            rules={{ required: "onlyAddress is required" }}
-                            helperAction={
-                              <Text
-                                color="honeydew.main"
-                                fontWeight="600"
-                                variant="body3"
-                                cursor="pointer"
-                                alignSelf="flex-start"
-                                onClick={() => {
-                                  AmpTrack(AmpEvent.USE_ASSIGN_ME);
-                                  setValue("onlyAddress", walletAddress);
-                                }}
-                              >
-                                Assign me
-                              </Text>
+                      <Box>
+                        <Radio
+                          value="only-address"
+                          py={2}
+                          width="100%"
+                          size="lg"
+                        >
+                          <Text
+                            fontWeight={
+                              permission === "only-address" ? "600" : "400"
                             }
-                          />
-                        </Flex>
-                      )}
-                      <Radio
-                        value="any-of-addresses"
-                        py={2}
-                        width="100%"
-                        size="lg"
-                      >
-                        Only a set of addresses can instantiate (AnyOfAddresses)
-                      </Radio>
-                      {permission === "any-of-addresses" && (
-                        <Box>
-                          {fields.map((field, idx) => (
-                            <Flex gap={2} my={6} width="100%">
-                              <ControllerInput
-                                name={`addresses.${idx}.address`}
-                                control={control}
-                                label="Address"
-                                placeholder="ex. cltn1ff1asdf7988aw49efa4vw9846789"
-                                variant="floating"
-                              />
-                              <Button
-                                w="56px"
-                                h="56px"
-                                variant="outline-gray"
-                                size="lg"
-                                disabled={fields.length <= 1}
-                                onClick={() => remove(idx)}
-                              >
-                                <CustomIcon
-                                  name="delete"
-                                  color={
-                                    fields.length <= 1
-                                      ? "pebble.600"
-                                      : "text.dark"
-                                  }
-                                />
-                              </Button>
-                            </Flex>
-                          ))}
-                          <Button
-                            variant="outline-primary"
-                            mt={3}
-                            mx="auto"
-                            onClick={() => append({ address: "" as Addr })}
-                            leftIcon={
-                              <CustomIcon name="plus" color="violet.light" />
+                          >
+                            Only a designated address only can instantiate
+                            (OnlyAddress)
+                          </Text>
+                        </Radio>
+                        {permission === "only-address" && (
+                          <Box py={6}>
+                            <ControllerInput
+                              name="onlyAddress"
+                              control={control}
+                              placeholder="ex. cltn1ff1asdf7988aw49efa4vw9846789"
+                              label="Designated Address"
+                              variant="floating"
+                              helperText="You can assign both wallet or contract address."
+                              rules={{ required: "onlyAddress is required" }}
+                              helperAction={
+                                <Text
+                                  color="honeydew.main"
+                                  fontWeight="600"
+                                  variant="body3"
+                                  cursor="pointer"
+                                  alignSelf="flex-start"
+                                  onClick={() => {
+                                    AmpTrack(AmpEvent.USE_ASSIGN_ME);
+                                    setValue("onlyAddress", walletAddress);
+                                  }}
+                                >
+                                  Assign me
+                                </Text>
+                              }
+                            />
+                          </Box>
+                        )}
+                      </Box>
+                      <Box>
+                        <Radio
+                          value="any-of-addresses"
+                          py={2}
+                          width="100%"
+                          size="lg"
+                        >
+                          <Text
+                            fontWeight={
+                              permission === "any-of-addresses" ? "600" : "400"
                             }
                           >
-                            Add More Address
-                          </Button>
-                        </Box>
-                      )}
+                            Only a set of addresses can instantiate
+                            (AnyOfAddresses)
+                          </Text>
+                        </Radio>
+                        {permission === "any-of-addresses" && (
+                          <Box>
+                            {fields.map((field, idx) => (
+                              <Flex gap={2} my={6} width="100%">
+                                <ControllerInput
+                                  name={`addresses.${idx}.address`}
+                                  control={control}
+                                  label="Address"
+                                  placeholder="ex. cltn1ff1asdf7988aw49efa4vw9846789"
+                                  variant="floating"
+                                />
+                                <Button
+                                  w="56px"
+                                  h="56px"
+                                  variant="outline-gray"
+                                  size="lg"
+                                  disabled={fields.length <= 1}
+                                  onClick={() => remove(idx)}
+                                >
+                                  <CustomIcon
+                                    name="delete"
+                                    color={
+                                      fields.length <= 1
+                                        ? "pebble.600"
+                                        : "text.dark"
+                                    }
+                                  />
+                                </Button>
+                              </Flex>
+                            ))}
+                            <Button
+                              variant="outline-primary"
+                              mt={3}
+                              mx="auto"
+                              onClick={() => append({ address: "" as Addr })}
+                              leftIcon={
+                                <CustomIcon name="plus" color="violet.light" />
+                              }
+                            >
+                              Add More Address
+                            </Button>
+                          </Box>
+                        )}
+                      </Box>
                     </Box>
                   </RadioGroup>
-                </Flex>
+                </Box>
 
                 <Heading as="h6" variant="h6" pt={12}>
                   Initial Deposit

From b0613bc836fa0f942381713c1364c9f149d68842 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Wed, 29 Mar 2023 10:24:14 +0700
Subject: [PATCH 003/354] fix(components): create address input

---
 src/lib/components/forms/ControllerInput.tsx  |  1 +
 .../components/forms/ControllerTextarea.tsx   | 10 ++-
 src/lib/data/index.ts                         |  1 +
 src/lib/data/proposalStoreCode.ts             |  5 ++
 src/lib/layout/Announcement.tsx               | 36 --------
 src/lib/layout/index.tsx                      |  8 +-
 .../store-code/components/AddressInput.tsx    | 75 ++++++++++++++++
 src/lib/pages/store-code/index.tsx            | 85 ++++++++++++++++---
 8 files changed, 165 insertions(+), 56 deletions(-)
 create mode 100644 src/lib/data/proposalStoreCode.ts
 delete mode 100644 src/lib/layout/Announcement.tsx
 create mode 100644 src/lib/pages/store-code/components/AddressInput.tsx

diff --git a/src/lib/components/forms/ControllerInput.tsx b/src/lib/components/forms/ControllerInput.tsx
index de4f41126..df6937e59 100644
--- a/src/lib/components/forms/ControllerInput.tsx
+++ b/src/lib/components/forms/ControllerInput.tsx
@@ -60,6 +60,7 @@ export const ControllerInput = <T extends FieldValues>({
 
   const isError = !!error;
   const isRequired = "required" in rules;
+
   return (
     <FormControl
       size={size}
diff --git a/src/lib/components/forms/ControllerTextarea.tsx b/src/lib/components/forms/ControllerTextarea.tsx
index b32ff1b6e..9870e81e3 100644
--- a/src/lib/components/forms/ControllerTextarea.tsx
+++ b/src/lib/components/forms/ControllerTextarea.tsx
@@ -43,9 +43,15 @@ export const ControllerTextarea = <T extends FieldValues>({
   const { field } = useController({ name, control, rules });
 
   const isError = !!error;
-
+  const isRequired = "required" in rules;
   return (
-    <FormControl size="md" isInvalid={isError} {...componentProps} {...field}>
+    <FormControl
+      size="md"
+      isInvalid={isError}
+      isRequired={isRequired}
+      {...componentProps}
+      {...field}
+    >
       {label && (
         <FormLabel className="textarea-label" bgColor={labelBgColor}>
           {label}
diff --git a/src/lib/data/index.ts b/src/lib/data/index.ts
index d1c9ea543..71f0b10d7 100644
--- a/src/lib/data/index.ts
+++ b/src/lib/data/index.ts
@@ -1,2 +1,3 @@
 export * from "./constant";
 export * from "./chain";
+export * from "./proposalStoreCode";
diff --git a/src/lib/data/proposalStoreCode.ts b/src/lib/data/proposalStoreCode.ts
new file mode 100644
index 000000000..7b10fd2c9
--- /dev/null
+++ b/src/lib/data/proposalStoreCode.ts
@@ -0,0 +1,5 @@
+import { getMaxLengthError } from "./constant";
+
+export const MAX_PROPOSAL_TITLE_LENGTH = 255;
+export const getMaxProposalTitleLengthError = (currentLength: number) =>
+  getMaxLengthError("Proposal Title", currentLength, MAX_PROPOSAL_TITLE_LENGTH);
diff --git a/src/lib/layout/Announcement.tsx b/src/lib/layout/Announcement.tsx
deleted file mode 100644
index 90287d3ae..000000000
--- a/src/lib/layout/Announcement.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Flex, Text } from "@chakra-ui/react";
-import Link from "next/link";
-
-import { CustomIcon } from "lib/components/icon";
-
-const Announcement = () => {
-  return (
-    <Flex
-      width="100vw"
-      height="40px"
-      align="center"
-      justifyContent="space-between"
-      px={6}
-      mb={1}
-      gap="24px"
-      bgColor="violet.darker"
-    >
-      <Flex />
-      <Flex gap={2}>
-        <Text>New Update V.1.0.2 – Osmosis Pool Page Now Available </Text>
-        <Link
-          href="https://celat.one/releases"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Text color="lilac.main" textDecoration="underline">
-            See Detail
-          </Text>
-        </Link>
-      </Flex>
-      <CustomIcon name="close" color="violet.light" />
-    </Flex>
-  );
-};
-
-export default Announcement;
diff --git a/src/lib/layout/index.tsx b/src/lib/layout/index.tsx
index f60426f24..f6bed2a3a 100644
--- a/src/lib/layout/index.tsx
+++ b/src/lib/layout/index.tsx
@@ -6,7 +6,6 @@ import { useState, useEffect } from "react";
 import { useMobile } from "lib/app-provider";
 import { scrollToTop } from "lib/utils";
 
-import Announcement from "./Announcement";
 import Footer from "./Footer";
 import Header from "./Header";
 import Navbar from "./navbar";
@@ -26,17 +25,14 @@ const Layout = ({ children }: LayoutProps) => {
   }, [router.asPath]);
   return (
     <Grid
-      templateAreas={`"announce announce" "header header"
+      templateAreas={`"header header"
     "nav main"`}
-      gridTemplateRows="40px 70px 1fr"
+      gridTemplateRows="  70px 1fr"
       gridTemplateColumns={isExpand ? "224px 1fr" : "48px 1fr"}
       h="100vh"
       overflowX="hidden"
       bg="background.main"
     >
-      <GridItem bg="violet.darker" area="announce">
-        <Announcement />
-      </GridItem>
       <GridItem bg="pebble.900" area="header" mb="1">
         <Header />
       </GridItem>
diff --git a/src/lib/pages/store-code/components/AddressInput.tsx b/src/lib/pages/store-code/components/AddressInput.tsx
new file mode 100644
index 000000000..58258356a
--- /dev/null
+++ b/src/lib/pages/store-code/components/AddressInput.tsx
@@ -0,0 +1,75 @@
+import type { ReactNode } from "react";
+import { useCallback } from "react";
+import type {
+  Control,
+  FieldPath,
+  FieldValues,
+  UseControllerProps,
+} from "react-hook-form";
+import { useWatch } from "react-hook-form";
+
+import { useValidateAddress } from "lib/app-provider";
+import type { FormStatus, TextInputProps } from "lib/components/forms";
+import { ControllerInput } from "lib/components/forms";
+
+interface AddressInputProps<T extends FieldValues>
+  extends Omit<TextInputProps, "value" | "setInputState"> {
+  name: FieldPath<T>;
+  control: Control<T>;
+  rules?: UseControllerProps["rules"];
+  maxLength?: number;
+  helperAction?: ReactNode;
+}
+
+const getAddressStatus = (input: string, error?: string): FormStatus => {
+  if (error) return { state: "error", message: error };
+  if (!input) return { state: "init" };
+  return { state: "success", message: "Valid Address" };
+};
+
+export const AddressInput = <T extends FieldValues>({
+  name,
+  control,
+  label,
+  labelBgColor = "background.main",
+  helperText,
+  error,
+  size = "lg",
+  rules = {},
+  maxLength,
+  helperAction,
+}: AddressInputProps<T>) => {
+  const { validateUserAddress, validateContractAddress } = useValidateAddress();
+  const validateAddress = useCallback(
+    (input: string) =>
+      input && !!validateContractAddress(input) && !!validateUserAddress(input)
+        ? "Invalid Address."
+        : undefined,
+    [validateContractAddress, validateUserAddress]
+  );
+
+  const watcher = useWatch({
+    name,
+    control,
+  });
+
+  const status = getAddressStatus(watcher, error ?? validateAddress(watcher));
+
+  return (
+    <ControllerInput
+      name={name}
+      control={control}
+      label={label}
+      placeholder="ex.cltn1ff1asdf7988aw49efa4vw9846789"
+      type="text"
+      variant="floating"
+      status={status}
+      labelBgColor={labelBgColor}
+      helperText={helperText}
+      size={size}
+      rules={rules}
+      maxLength={maxLength}
+      helperAction={helperAction}
+    />
+  );
+};
diff --git a/src/lib/pages/store-code/index.tsx b/src/lib/pages/store-code/index.tsx
index a45136483..2b8e26d89 100644
--- a/src/lib/pages/store-code/index.tsx
+++ b/src/lib/pages/store-code/index.tsx
@@ -14,7 +14,6 @@ import {
 } from "@chakra-ui/react";
 import type { Coin, StdFee } from "@cosmjs/stargate";
 import { useWallet } from "@cosmos-kit/react";
-import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
@@ -30,16 +29,21 @@ import {
 import { CustomIcon } from "lib/components/icon";
 import type { SimulateStatus } from "lib/components/upload/types";
 import WasmPageContainer from "lib/components/WasmPageContainer";
+import {
+  getMaxProposalTitleLengthError,
+  MAX_PROPOSAL_TITLE_LENGTH,
+} from "lib/data";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import type { Addr } from "lib/types";
 
+import { AddressInput } from "./components/AddressInput";
 import { Footer } from "./components/Footer";
 import { UploadFile } from "./components/UploadFile";
 
 interface WhiteListState {
   title: string;
   description: string;
-  creator: Addr;
+  creator: string;
   onlyAddress: string;
   addresses: { address: Addr }[];
   initialDeposit: Coin;
@@ -47,10 +51,15 @@ interface WhiteListState {
   simulateStatus: SimulateStatus;
   simulateError: string;
 }
-const StoreCode = observer(() => {
+const StoreCode = () => {
   const { loading } = useSimulateFee();
   const router = useRouter();
-  const { control, watch, setValue } = useForm<WhiteListState>({
+  const {
+    control,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<WhiteListState>({
     defaultValues: {
       title: "",
       description: "",
@@ -62,7 +71,14 @@ const StoreCode = observer(() => {
       simulateStatus: "pending",
       simulateError: "",
     },
+    mode: "all",
   });
+  const {
+    title,
+    // creator: watchCreatorAddress,
+    // onlyAddress: watchDesignatedAddress,
+    addresses,
+  } = watch();
   const initialDepositWatch = watch("initialDeposit");
   const { address: walletAddress = "" } = useWallet();
   const { fields, append, remove } = useFieldArray({
@@ -110,7 +126,15 @@ const StoreCode = observer(() => {
                     placeholder="ex. Store code for ..."
                     label="Proposal Title"
                     variant="floating"
-                    rules={{ required: "title is required" }}
+                    rules={{
+                      required: "Proposal Title is required",
+                      maxLength: MAX_PROPOSAL_TITLE_LENGTH,
+                    }}
+                    error={
+                      errors.title &&
+                      (errors.title.message ||
+                        getMaxProposalTitleLengthError(title.length))
+                    }
                   />
                   <ControllerTextarea
                     name="description"
@@ -119,7 +143,10 @@ const StoreCode = observer(() => {
                     label="Proposal Description"
                     placeholder="Usually details information such as the team behind the contract, what the contract does, the benefits the contract will have to the chain/ecosystem, and the compiled code checksum or commit hash for the code on GitHub etc."
                     variant="floating"
-                    rules={{ required: "Proposal Descriptio is required" }}
+                    rules={{
+                      required: "Proposal Description is required",
+                    }}
+                    error={errors.description && errors.description.message}
                   />
                   <ControllerInput
                     name="creator"
@@ -128,7 +155,25 @@ const StoreCode = observer(() => {
                     label="Run as"
                     variant="floating"
                     helperText="This address will be stored as code creator"
-                    rules={{ required: "creator is required" }}
+                    rules={{ required: "Creator is required" }}
+                    // error={
+                    //   validateAddress(watchCreatorAddress) ||
+                    //   (errors.creator && errors.creator.message)
+                    // }
+                    helperAction={
+                      <Text
+                        color="honeydew.main"
+                        fontWeight="600"
+                        variant="body3"
+                        cursor="pointer"
+                        onClick={() => {
+                          AmpTrack(AmpEvent.USE_ASSIGN_ME);
+                          setValue("creator", walletAddress);
+                        }}
+                      >
+                        Assign me
+                      </Text>
+                    }
                   />
                 </Flex>
                 <UploadFile />
@@ -141,6 +186,7 @@ const StoreCode = observer(() => {
                 </Text>
                 <Box pt={6}>
                   <RadioGroup
+                    name="instantiatePermission"
                     onChange={(
                       nextVal:
                         | "everybody"
@@ -194,7 +240,14 @@ const StoreCode = observer(() => {
                               label="Designated Address"
                               variant="floating"
                               helperText="You can assign both wallet or contract address."
-                              rules={{ required: "onlyAddress is required" }}
+                              rules={{
+                                required: "Designated Address is required",
+                              }}
+                              // error={
+                              //   validateAddress(watchDesignatedAddress) ||
+                              //   (errors.onlyAddress &&
+                              //     errors.onlyAddress.message)
+                              // }
                               helperAction={
                                 <Text
                                   color="honeydew.main"
@@ -234,12 +287,21 @@ const StoreCode = observer(() => {
                           <Box>
                             {fields.map((field, idx) => (
                               <Flex gap={2} my={6} width="100%">
-                                <ControllerInput
+                                <AddressInput
                                   name={`addresses.${idx}.address`}
                                   control={control}
                                   label="Address"
-                                  placeholder="ex. cltn1ff1asdf7988aw49efa4vw9846789"
+                                  placeholder="ex.cltn1ff1asdf7988aw49efa4vw9846789"
                                   variant="floating"
+                                  error={
+                                    addresses.find(
+                                      (x, i) =>
+                                        i < idx &&
+                                        x.address === addresses[idx].address
+                                    )
+                                      ? "You already input this address"
+                                      : undefined
+                                  }
                                 />
                                 <Button
                                   w="56px"
@@ -277,7 +339,6 @@ const StoreCode = observer(() => {
                     </Box>
                   </RadioGroup>
                 </Box>
-
                 <Heading as="h6" variant="h6" pt={12}>
                   Initial Deposit
                 </Heading>
@@ -388,6 +449,6 @@ const StoreCode = observer(() => {
       />
     </>
   );
-});
+};
 
 export default StoreCode;

From bf65592920f97f2d74719eeb0078c8f96961501b Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Wed, 29 Mar 2023 17:32:34 +0700
Subject: [PATCH 004/354] fix(components): fix layout (change to grid)

---
 src/lib/components/AssignMe.tsx               |  26 +
 src/lib/components/StickySidebar.tsx          |  79 ++
 src/lib/components/SwitchToTestnet.tsx        |  41 ++
 src/lib/components/forms/ControllerInput.tsx  |   2 +-
 src/lib/pages/deploy/index.tsx                |  18 +-
 .../store-code/components/AddressInput.tsx    |   5 +-
 .../pages/store-code/components/Footer.tsx    |  50 +-
 src/lib/pages/store-code/index.tsx            | 692 +++++++++---------
 8 files changed, 537 insertions(+), 376 deletions(-)
 create mode 100644 src/lib/components/AssignMe.tsx
 create mode 100644 src/lib/components/StickySidebar.tsx
 create mode 100644 src/lib/components/SwitchToTestnet.tsx

diff --git a/src/lib/components/AssignMe.tsx b/src/lib/components/AssignMe.tsx
new file mode 100644
index 000000000..da23bf977
--- /dev/null
+++ b/src/lib/components/AssignMe.tsx
@@ -0,0 +1,26 @@
+import { Text } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
+import type { MouseEventHandler } from "react";
+
+interface AssginMeProps {
+  onClick?: MouseEventHandler<HTMLParagraphElement>;
+  isDisable?: boolean;
+}
+
+export const AssignMe = ({ onClick, isDisable = false }: AssginMeProps) => {
+  const { address: walletAddress = "" } = useWallet();
+  return (
+    <Text
+      textAlign="right"
+      mr={3}
+      color={!isDisable && walletAddress ? "honeydew.main" : "pebble.500"}
+      fontWeight="600"
+      variant="body3"
+      cursor={!isDisable && walletAddress ? "pointer" : "not-allowed"}
+      minW={16}
+      onClick={onClick}
+    >
+      Assign me
+    </Text>
+  );
+};
diff --git a/src/lib/components/StickySidebar.tsx b/src/lib/components/StickySidebar.tsx
new file mode 100644
index 000000000..73136da92
--- /dev/null
+++ b/src/lib/components/StickySidebar.tsx
@@ -0,0 +1,79 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Flex,
+  Text,
+} from "@chakra-ui/react";
+import type { ReactElement } from "react";
+
+import { CustomIcon } from "./icon";
+import { SwitchToTestnet } from "./SwitchToTestnet";
+
+interface StickySidebarProps {
+  title?: string;
+  description?: ReactElement;
+  testnetSwitch?: boolean;
+  marginTop?: string;
+}
+export const StickySidebar = ({
+  title = " Why do I need to submit proposal?",
+  description = (
+    <span>
+      Osmosis Mainnet is permissioned chain, which means you will need to submit
+      proposal to store code.
+      <br />
+      <br /> Another way is to get your wallet address to allow list to store
+      code without opening proposal.
+      <br />
+      <br /> You still can upload your Wasm to see how your code works on
+      Testnet.
+    </span>
+  ),
+  testnetSwitch = true,
+  marginTop = "36",
+}: StickySidebarProps) => {
+  return (
+    <Box flex="4" px={8} mt={marginTop} position="relative">
+      <Flex position="fixed" width="100%">
+        <Accordion allowToggle width={96} defaultIndex={[0]}>
+          <AccordionItem>
+            <h2>
+              <AccordionButton>
+                <Box as="span" flex="1" py={2} textAlign="left">
+                  <Text variant="body2" fontWeight="600" color="text.main">
+                    {title}
+                  </Text>
+                </Box>
+                <AccordionIcon />
+              </AccordionButton>
+            </h2>
+            <AccordionPanel pb={4}>
+              <Text variant="body2" color="text.dark" pb={4}>
+                {description}
+              </Text>
+              {testnetSwitch && (
+                <SwitchToTestnet
+                  color="lilac.main"
+                  colorHover="lilac.light"
+                  bgHover="lilac.background"
+                  padding="1"
+                  icon={
+                    <CustomIcon
+                      name="chevron-right"
+                      color="lilac.main"
+                      boxSize="3"
+                    />
+                  }
+                />
+              )}
+            </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      </Flex>
+    </Box>
+  );
+};
diff --git a/src/lib/components/SwitchToTestnet.tsx b/src/lib/components/SwitchToTestnet.tsx
new file mode 100644
index 000000000..6cf417f3a
--- /dev/null
+++ b/src/lib/components/SwitchToTestnet.tsx
@@ -0,0 +1,41 @@
+import { Text } from "@chakra-ui/react";
+import type { ReactElement } from "react";
+
+import { useSelectChain } from "lib/app-provider";
+import { getChainNameByNetwork } from "lib/data";
+
+interface SwitchToTestnetProps {
+  size?: string;
+  color?: string;
+  colorHover?: string;
+  bgHover?: string;
+  padding?: string;
+  icon?: ReactElement;
+}
+export const SwitchToTestnet = ({
+  size = "md",
+  padding = "0",
+  color = "honeydew.main",
+  colorHover = "honeydew.light",
+  bgHover,
+  icon,
+}: SwitchToTestnetProps) => {
+  const selectChain = useSelectChain();
+  return (
+    <Text
+      size={size}
+      cursor="pointer"
+      p={padding}
+      borderRadius={8}
+      pl="2"
+      width="fit-content"
+      transition="all 0.25s ease-in-out"
+      color={color}
+      _hover={{ color: colorHover, bgColor: bgHover }}
+      onClick={() => selectChain(getChainNameByNetwork("testnet"))}
+    >
+      Switch to testnet
+      {icon}
+    </Text>
+  );
+};
diff --git a/src/lib/components/forms/ControllerInput.tsx b/src/lib/components/forms/ControllerInput.tsx
index df6937e59..fca0a4fe8 100644
--- a/src/lib/components/forms/ControllerInput.tsx
+++ b/src/lib/components/forms/ControllerInput.tsx
@@ -87,7 +87,7 @@ export const ControllerInput = <T extends FieldValues>({
           {status && getStatusIcon(status.state)}
         </InputRightElement>
       </InputGroup>
-      <Flex gap={1} alignItems="center" mt={1}>
+      <Flex gap={1} alignItems="center" mt={1} justifyContent="space-between">
         {isError ? (
           <FormErrorMessage className="error-text">{error}</FormErrorMessage>
         ) : (
diff --git a/src/lib/pages/deploy/index.tsx b/src/lib/pages/deploy/index.tsx
index ac7055f09..84b73d47c 100644
--- a/src/lib/pages/deploy/index.tsx
+++ b/src/lib/pages/deploy/index.tsx
@@ -9,23 +9,18 @@ import {
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import {
-  useInternalNavigate,
-  useSelectChain,
-  useCurrentNetwork,
-} from "lib/app-provider";
+import { useInternalNavigate, useCurrentNetwork } from "lib/app-provider";
 import { ButtonCard } from "lib/components/ButtonCard";
 import { CustomIcon } from "lib/components/icon";
 import { Stepper } from "lib/components/stepper";
+import { SwitchToTestnet } from "lib/components/SwitchToTestnet";
 import WasmPageContainer from "lib/components/WasmPageContainer";
-import { getChainNameByNetwork } from "lib/data";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 
 const Deploy = () => {
   const { isMainnet } = useCurrentNetwork();
   const router = useRouter();
   const navigate = useInternalNavigate();
-  const selectChain = useSelectChain();
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_DEPLOY);
@@ -62,14 +57,7 @@ const Deploy = () => {
               <Text color="text.disabled">
                 Currently available on testnet only.
               </Text>
-              <Text
-                color="honeydew.main"
-                _hover={{ textDecoration: "underline" }}
-                cursor="pointer"
-                onClick={() => selectChain(getChainNameByNetwork("testnet"))}
-              >
-                Switch to testnet
-              </Text>
+              <SwitchToTestnet />
             </Flex>
           ) : (
             "Store a new Wasm file on-chain"
diff --git a/src/lib/pages/store-code/components/AddressInput.tsx b/src/lib/pages/store-code/components/AddressInput.tsx
index 58258356a..c1622bde2 100644
--- a/src/lib/pages/store-code/components/AddressInput.tsx
+++ b/src/lib/pages/store-code/components/AddressInput.tsx
@@ -33,6 +33,7 @@ export const AddressInput = <T extends FieldValues>({
   label,
   labelBgColor = "background.main",
   helperText,
+  placeholder = "ex.cltn1ff1asdf7988aw49efa4vw9846789",
   error,
   size = "lg",
   rules = {},
@@ -43,7 +44,7 @@ export const AddressInput = <T extends FieldValues>({
   const validateAddress = useCallback(
     (input: string) =>
       input && !!validateContractAddress(input) && !!validateUserAddress(input)
-        ? "Invalid Address."
+        ? "Invalid address or not exists."
         : undefined,
     [validateContractAddress, validateUserAddress]
   );
@@ -60,7 +61,7 @@ export const AddressInput = <T extends FieldValues>({
       name={name}
       control={control}
       label={label}
-      placeholder="ex.cltn1ff1asdf7988aw49efa4vw9846789"
+      placeholder={placeholder}
       type="text"
       variant="floating"
       status={status}
diff --git a/src/lib/pages/store-code/components/Footer.tsx b/src/lib/pages/store-code/components/Footer.tsx
index 2dab9ac7b..648bc16eb 100644
--- a/src/lib/pages/store-code/components/Footer.tsx
+++ b/src/lib/pages/store-code/components/Footer.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Flex, Spinner } from "@chakra-ui/react";
+import { Button, Flex, Grid, GridItem, Spinner } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 
 interface FooterProps {
@@ -19,28 +19,40 @@ export const Footer = ({
       w="full"
       bg="pebble.900"
       h="70px"
+      px={12}
       bottom="0"
       position="sticky"
       zIndex={2}
     >
-      <Box flex="1" />
-      <Flex flex="5" align="center" justify="space-between" h="full" w="full">
-        <Button variant="outline-gray" onClick={router.back}>
-          Cancel
-        </Button>
-        <Button
-          variant="primary"
-          // onClick={onSubmit}
-          // disabled={disabled}
-        >
-          {loading ? (
-            <Spinner size="md" color="pebble.600" />
-          ) : (
-            "Submit Proposal"
-          )}
-        </Button>
-      </Flex>
-      <Box flex="5" />
+      <Grid templateColumns="1fr 6fr 4fr 1fr" gap={4} w="100%">
+        <GridItem w="100%" />
+        <GridItem w="100%">
+          <Flex
+            flex="5"
+            align="center"
+            justify="space-between"
+            h="full"
+            w="full"
+          >
+            <Button variant="outline-gray" onClick={router.back}>
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              // onClick={onSubmit}
+              // disabled={disabled}
+            >
+              {loading ? (
+                <Spinner size="md" color="pebble.600" />
+              ) : (
+                "Submit Proposal"
+              )}
+            </Button>
+          </Flex>
+        </GridItem>
+        <GridItem w="100%" />
+        <GridItem w="100%" />
+      </Grid>
     </Flex>
   );
 };
diff --git a/src/lib/pages/store-code/index.tsx b/src/lib/pages/store-code/index.tsx
index 2b8e26d89..3c643a6eb 100644
--- a/src/lib/pages/store-code/index.tsx
+++ b/src/lib/pages/store-code/index.tsx
@@ -3,22 +3,23 @@ import {
   Heading,
   Text,
   Box,
-  Accordion,
-  AccordionItem,
-  AccordionButton,
-  AccordionIcon,
-  AccordionPanel,
   Button,
   RadioGroup,
   Radio,
+  Alert,
+  Grid,
+  GridItem,
+  AlertDescription,
 } from "@chakra-ui/react";
 import type { Coin, StdFee } from "@cosmjs/stargate";
 import { useWallet } from "@cosmos-kit/react";
+import big from "big.js";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 
 import { useNativeTokensInfo, useSimulateFee } from "lib/app-provider";
+import { AssignMe } from "lib/components/AssignMe";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
 import {
@@ -27,8 +28,9 @@ import {
   SelectInput,
 } from "lib/components/forms";
 import { CustomIcon } from "lib/components/icon";
+import PageContainer from "lib/components/PageContainer";
+import { StickySidebar } from "lib/components/StickySidebar";
 import type { SimulateStatus } from "lib/components/upload/types";
-import WasmPageContainer from "lib/components/WasmPageContainer";
 import {
   getMaxProposalTitleLengthError,
   MAX_PROPOSAL_TITLE_LENGTH,
@@ -51,6 +53,62 @@ interface WhiteListState {
   simulateStatus: SimulateStatus;
   simulateError: string;
 }
+
+type PermissionType = "everybody" | "nobody" | "any-of-addresses";
+const mockUpDepositAmount = 1000.0;
+const getAlert = (amount: string) => {
+  const enteredAmount = amount || 0;
+  if (big(enteredAmount).lt(mockUpDepositAmount)) {
+    return {
+      variant: "warning",
+      description: `${big(mockUpDepositAmount)
+        .sub(enteredAmount)
+        .toFixed(
+          2
+        )} more KOYN is required to enter the voting period. If you proceed with this amount without further deposit after 7 days, The chain will remove your proposal with no fund return.`,
+      icon: (
+        <CustomIcon
+          name="alert-circle-solid"
+          color="warning.main"
+          boxSize="4"
+        />
+      ),
+    };
+  }
+  if (big(enteredAmount).eq(mockUpDepositAmount)) {
+    return {
+      variant: "honeydew",
+      description:
+        "The proposal will proceed to voting period immediately after created.",
+      icon: (
+        <CustomIcon
+          name="info-circle-solid"
+          color="honeydew.main"
+          boxSize="4"
+        />
+      ),
+    };
+  }
+  if (big(mockUpDepositAmount).lt(enteredAmount)) {
+    return {
+      variant: "warning",
+      description: `You’re depositing more than the minimum requirement, the proposal will proceed to voting immediately after creation. To prevent fund loss if rejected, deposit equal to the minimum requirement.
+`,
+      icon: (
+        <CustomIcon
+          name="alert-circle-solid"
+          color="warning.main"
+          boxSize="4"
+        />
+      ),
+    };
+  }
+  return {
+    variant: "",
+    description: "",
+    icon: null,
+  };
+};
 const StoreCode = () => {
   const { loading } = useSimulateFee();
   const router = useRouter();
@@ -73,13 +131,9 @@ const StoreCode = () => {
     },
     mode: "all",
   });
-  const {
-    title,
-    // creator: watchCreatorAddress,
-    // onlyAddress: watchDesignatedAddress,
-    addresses,
-  } = watch();
+  const { title, creator, addresses } = watch();
   const initialDepositWatch = watch("initialDeposit");
+
   const { address: walletAddress = "" } = useWallet();
   const { fields, append, remove } = useFieldArray({
     control,
@@ -88,365 +142,325 @@ const StoreCode = () => {
 
   const { estimatedFee } = watch();
   const nativeTokensInfo = useNativeTokensInfo();
-  const [permission, setpermission] = useState<
-    "everybody" | "nobody" | "only-address" | "any-of-addresses"
-  >("everybody");
+  const [permission, setpermission] = useState<PermissionType>("everybody");
 
+  const { variant, description, icon } = getAlert(initialDepositWatch.amount);
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_PROPOSALS);
   }, [router.isReady]);
 
   return (
     <>
-      <WasmPageContainer width="100%">
-        <Flex gap={2}>
-          <Box flex="1" />
-          <Flex flex="10" position="relative">
-            <Box flex="6">
-              <Heading as="h5" variant="h5">
-                Create Proposal to Store Code
-              </Heading>
-              <Text color="text.dark" pt={4}>
-                To store your contract code, you need to submit a
-                `StoreCodeProposal`. After the proposal passes, the code will be
-                stored on-chain and can then be instantiated.
-              </Text>
-              <ConnectWalletAlert
-                subtitle="You need to connect wallet to proceed this action"
-                mt={12}
-              />
-              <form style={{ width: "100%" }}>
-                <Flex mt={12} gap={6} flexDirection="column">
-                  <Heading as="h6" variant="h6">
-                    Create Proposal to Store Code
-                  </Heading>
-                  <ControllerInput
-                    name="title"
-                    control={control}
-                    placeholder="ex. Store code for ..."
-                    label="Proposal Title"
-                    variant="floating"
-                    rules={{
-                      required: "Proposal Title is required",
-                      maxLength: MAX_PROPOSAL_TITLE_LENGTH,
-                    }}
-                    error={
-                      errors.title &&
-                      (errors.title.message ||
-                        getMaxProposalTitleLengthError(title.length))
-                    }
-                  />
-                  <ControllerTextarea
-                    name="description"
-                    control={control}
-                    height="160px"
-                    label="Proposal Description"
-                    placeholder="Usually details information such as the team behind the contract, what the contract does, the benefits the contract will have to the chain/ecosystem, and the compiled code checksum or commit hash for the code on GitHub etc."
-                    variant="floating"
-                    rules={{
-                      required: "Proposal Description is required",
-                    }}
-                    error={errors.description && errors.description.message}
-                  />
-                  <ControllerInput
-                    name="creator"
-                    control={control}
-                    placeholder="ex. cltn1ff1asdf7988aw49efa4vw9846789"
-                    label="Run as"
-                    variant="floating"
-                    helperText="This address will be stored as code creator"
-                    rules={{ required: "Creator is required" }}
-                    // error={
-                    //   validateAddress(watchCreatorAddress) ||
-                    //   (errors.creator && errors.creator.message)
-                    // }
-                    helperAction={
-                      <Text
-                        color="honeydew.main"
-                        fontWeight="600"
-                        variant="body3"
-                        cursor="pointer"
-                        onClick={() => {
-                          AmpTrack(AmpEvent.USE_ASSIGN_ME);
-                          setValue("creator", walletAddress);
-                        }}
-                      >
-                        Assign me
-                      </Text>
-                    }
-                  />
-                </Flex>
-                <UploadFile />
-                <Heading as="h6" variant="h6" pt={12}>
-                  Instantiate Permission
+      <PageContainer>
+        <Flex w="100%">
+          <Grid templateColumns="1fr 6fr 4fr 1fr" gap={4} w="100%">
+            <GridItem w="100%" />
+            <GridItem w="100%">
+              <Box flex="6">
+                <Heading as="h5" variant="h5">
+                  Create Proposal to Store Code
                 </Heading>
                 <Text color="text.dark" pt={4}>
-                  If the proposal is passed, the stored code can be instantiated
-                  to a contract by your selected option
+                  To store your contract code, you need to submit a
+                  `StoreCodeProposal`. After the proposal passes, the code will
+                  be stored on-chain and can then be instantiated.
                 </Text>
-                <Box pt={6}>
-                  <RadioGroup
-                    name="instantiatePermission"
-                    onChange={(
-                      nextVal:
-                        | "everybody"
-                        | "nobody"
-                        | "only-address"
-                        | "any-of-addresses"
-                    ) => {
-                      setpermission(nextVal);
-                    }}
-                    value={permission}
+                <ConnectWalletAlert
+                  subtitle="You need to connect wallet to proceed this action"
+                  mt={12}
+                />
+                <form style={{ width: "100%" }}>
+                  <Flex
+                    mt={12}
+                    p={4}
+                    gap={6}
+                    bgColor="pebble.900"
+                    flexDirection="column"
+                    borderRadius="8px"
                   >
-                    <Box>
-                      <Radio value="everybody" py={2} width="100%" size="lg">
-                        <Text
-                          fontWeight={
-                            permission === "everybody" ? "600" : "400"
+                    <Flex gap={2} alignItems="center">
+                      <CustomIcon name="proposal-solid" />
+                      <Heading as="h6" variant="h6">
+                        Fill in Proposal Details
+                      </Heading>
+                    </Flex>
+                    <ControllerInput
+                      name="title"
+                      control={control}
+                      placeholder="ex. Store code for ..."
+                      label="Proposal Title"
+                      labelBgColor="pebble.900"
+                      variant="floating"
+                      rules={{
+                        required: "Proposal Title is required",
+                        maxLength: MAX_PROPOSAL_TITLE_LENGTH,
+                      }}
+                      error={
+                        errors.title &&
+                        (errors.title.message ||
+                          getMaxProposalTitleLengthError(title.length))
+                      }
+                    />
+                    <ControllerTextarea
+                      name="description"
+                      control={control}
+                      height="160px"
+                      label="Proposal Description"
+                      placeholder="Usually details information such as the team behind the contract, what the contract does, the benefits the contract will have to the chain/ecosystem, and the compiled code checksum or commit hash for the code on GitHub etc."
+                      variant="floating"
+                      labelBgColor="pebble.900"
+                      rules={{
+                        required: "Proposal Description is required",
+                      }}
+                      error={errors.description && errors.description.message}
+                    />
+                    <AddressInput
+                      name="creator"
+                      control={control}
+                      label="Run as"
+                      labelBgColor="pebble.900"
+                      placeholder="ex.cltn1ff1asdf7988aw49efa4vw9846789"
+                      variant="floating"
+                      helperText="This address will be stored as code creator."
+                      rules={{
+                        required: "Creator is required",
+                      }}
+                      error={errors.creator && errors.creator.message}
+                      helperAction={
+                        <AssignMe
+                          onClick={
+                            walletAddress
+                              ? () => {
+                                  AmpTrack(AmpEvent.USE_ASSIGN_ME);
+                                  setValue("creator", walletAddress);
+                                }
+                              : undefined
                           }
-                        >
-                          Anyone can instantiate (Everybody)
-                        </Text>
-                      </Radio>
-                      <Radio value="nobody" py={2} width="100%" size="lg">
-                        <Text
-                          fontWeight={permission === "nobody" ? "600" : "400"}
-                        >
-                          Instantiate through governance only (Nobody)
-                        </Text>
-                      </Radio>
+                          isDisable={creator === walletAddress}
+                        />
+                      }
+                    />
+                  </Flex>
+                  <UploadFile />
+                  <Heading as="h6" variant="h6" pt={12}>
+                    Instantiate Permission
+                  </Heading>
+                  <Text color="text.dark" pt={4}>
+                    If the proposal is passed, the stored code can be
+                    instantiated to a contract by your selected option
+                  </Text>
+                  <Box pt={6}>
+                    <RadioGroup
+                      name="instantiatePermission"
+                      onChange={(
+                        nextVal: "everybody" | "nobody" | "any-of-addresses"
+                      ) => {
+                        setpermission(nextVal);
+                      }}
+                      value={permission}
+                    >
                       <Box>
-                        <Radio
-                          value="only-address"
-                          py={2}
-                          width="100%"
-                          size="lg"
-                        >
+                        <Radio value="everybody" py={2} width="100%" size="lg">
                           <Text
                             fontWeight={
-                              permission === "only-address" ? "600" : "400"
+                              permission === "everybody" ? "600" : "400"
                             }
                           >
-                            Only a designated address only can instantiate
-                            (OnlyAddress)
+                            Anyone can instantiate (Everybody)
                           </Text>
                         </Radio>
-                        {permission === "only-address" && (
-                          <Box py={6}>
-                            <ControllerInput
-                              name="onlyAddress"
-                              control={control}
-                              placeholder="ex. cltn1ff1asdf7988aw49efa4vw9846789"
-                              label="Designated Address"
-                              variant="floating"
-                              helperText="You can assign both wallet or contract address."
-                              rules={{
-                                required: "Designated Address is required",
-                              }}
-                              // error={
-                              //   validateAddress(watchDesignatedAddress) ||
-                              //   (errors.onlyAddress &&
-                              //     errors.onlyAddress.message)
-                              // }
-                              helperAction={
-                                <Text
-                                  color="honeydew.main"
-                                  fontWeight="600"
-                                  variant="body3"
-                                  cursor="pointer"
-                                  alignSelf="flex-start"
-                                  onClick={() => {
-                                    AmpTrack(AmpEvent.USE_ASSIGN_ME);
-                                    setValue("onlyAddress", walletAddress);
-                                  }}
-                                >
-                                  Assign me
-                                </Text>
-                              }
-                            />
-                          </Box>
-                        )}
-                      </Box>
-                      <Box>
-                        <Radio
-                          value="any-of-addresses"
-                          py={2}
-                          width="100%"
-                          size="lg"
-                        >
+                        <Radio value="nobody" py={2} width="100%" size="lg">
                           <Text
-                            fontWeight={
-                              permission === "any-of-addresses" ? "600" : "400"
-                            }
+                            fontWeight={permission === "nobody" ? "600" : "400"}
                           >
-                            Only a set of addresses can instantiate
-                            (AnyOfAddresses)
+                            Instantiate through governance only (Nobody)
                           </Text>
                         </Radio>
-                        {permission === "any-of-addresses" && (
-                          <Box>
-                            {fields.map((field, idx) => (
-                              <Flex gap={2} my={6} width="100%">
-                                <AddressInput
-                                  name={`addresses.${idx}.address`}
-                                  control={control}
-                                  label="Address"
-                                  placeholder="ex.cltn1ff1asdf7988aw49efa4vw9846789"
-                                  variant="floating"
-                                  error={
-                                    addresses.find(
-                                      (x, i) =>
-                                        i < idx &&
-                                        x.address === addresses[idx].address
-                                    )
-                                      ? "You already input this address"
-                                      : undefined
-                                  }
-                                />
-                                <Button
-                                  w="56px"
-                                  h="56px"
-                                  variant="outline-gray"
-                                  size="lg"
-                                  disabled={fields.length <= 1}
-                                  onClick={() => remove(idx)}
-                                >
-                                  <CustomIcon
-                                    name="delete"
-                                    color={
-                                      fields.length <= 1
-                                        ? "pebble.600"
-                                        : "text.dark"
-                                    }
-                                  />
-                                </Button>
-                              </Flex>
-                            ))}
-                            <Button
-                              variant="outline-primary"
-                              mt={3}
-                              mx="auto"
-                              onClick={() => append({ address: "" as Addr })}
-                              leftIcon={
-                                <CustomIcon name="plus" color="violet.light" />
+
+                        <Box>
+                          <Radio
+                            value="any-of-addresses"
+                            py={2}
+                            width="100%"
+                            size="lg"
+                          >
+                            <Text
+                              fontWeight={
+                                permission === "any-of-addresses"
+                                  ? "600"
+                                  : "400"
                               }
                             >
-                              Add More Address
-                            </Button>
-                          </Box>
-                        )}
+                              Only a set of addresses can instantiate
+                              (AnyOfAddresses)
+                            </Text>
+                          </Radio>
+                          {permission === "any-of-addresses" && (
+                            <Box>
+                              {fields.map((field, idx) => (
+                                <Flex gap={2} my={6} width="100%">
+                                  <AddressInput
+                                    name={`addresses.${idx}.address`}
+                                    control={control}
+                                    label="Address"
+                                    placeholder="ex.cltn1ff1asdf7988aw49efa4vw9846789"
+                                    variant="floating"
+                                    error={
+                                      addresses[idx].address &&
+                                      addresses.find(
+                                        (x, i) =>
+                                          i < idx &&
+                                          x.address === addresses[idx].address
+                                      ) &&
+                                      "You already input this address"
+                                    }
+                                    helperAction={
+                                      <AssignMe
+                                        onClick={
+                                          walletAddress
+                                            ? () => {
+                                                AmpTrack(
+                                                  AmpEvent.USE_ASSIGN_ME
+                                                );
+                                                setValue(
+                                                  `addresses.${idx}.address`,
+                                                  walletAddress as Addr
+                                                );
+                                              }
+                                            : undefined
+                                        }
+                                        isDisable={
+                                          !!addresses.find(
+                                            (x) => x.address === walletAddress
+                                          )
+                                        }
+                                      />
+                                    }
+                                  />
+                                  <Button
+                                    w="56px"
+                                    h="56px"
+                                    variant="outline-gray"
+                                    size="lg"
+                                    disabled={fields.length <= 1}
+                                    onClick={() => remove(idx)}
+                                  >
+                                    <CustomIcon
+                                      name="delete"
+                                      color={
+                                        fields.length <= 1
+                                          ? "pebble.600"
+                                          : "text.dark"
+                                      }
+                                    />
+                                  </Button>
+                                </Flex>
+                              ))}
+                              <Button
+                                variant="outline-primary"
+                                mt={3}
+                                mx="auto"
+                                onClick={() => append({ address: "" as Addr })}
+                                leftIcon={
+                                  <CustomIcon
+                                    name="plus"
+                                    color="violet.light"
+                                  />
+                                }
+                              >
+                                Add More Address
+                              </Button>
+                            </Box>
+                          )}
+                        </Box>
                       </Box>
-                    </Box>
-                  </RadioGroup>
-                </Box>
-                <Heading as="h6" variant="h6" pt={12}>
-                  Initial Deposit
-                </Heading>
-                <Text color="text.dark" pt={4}>
-                  Minimum deposit required to start 7-day voting period:
-                  1,000.000 KOYN
-                </Text>
-                <Flex pt={6} gap={4}>
-                  <Flex flex="1">
-                    <SelectInput
-                      formLabel="Asset"
-                      options={nativeTokensInfo.map((asset) => ({
-                        label: asset.symbol,
-                        value: asset.base,
-                        disabled: false,
-                      }))}
-                      onChange={(newVal) =>
-                        setValue("initialDeposit.denom", newVal)
-                      }
-                      placeholder="Select"
-                      initialSelected={initialDepositWatch.denom}
-                    />
-                  </Flex>
-                  <Flex flex="3">
-                    <ControllerInput
-                      name="initialDeposit.amount"
-                      control={control}
-                      label="Amount"
-                      placeholder="0.00"
-                      variant="floating"
-                      type="number"
-                    />
-                  </Flex>
-                </Flex>
-                <Flex
-                  mt={12}
-                  fontSize="14px"
-                  color="text.dark"
-                  alignSelf="flex-start"
-                  alignItems="center"
-                  display="flex"
-                  gap={1}
-                >
-                  <p>Transaction Fee:</p>
-                  <EstimatedFeeRender
-                    estimatedFee={estimatedFee}
-                    loading={loading}
-                  />
-                </Flex>
-              </form>
-            </Box>
-            <Box flex="4" px={8} mt={40} position="relative">
-              <Flex position="fixed" width="100%">
-                <Accordion allowToggle width={96} defaultIndex={[0]}>
-                  <AccordionItem>
-                    <h2>
-                      <AccordionButton>
-                        <Box as="span" flex="1" py={2} textAlign="left">
+                    </RadioGroup>
+                  </Box>
+                  <Heading as="h6" variant="h6" pt={12}>
+                    Initial Deposit
+                  </Heading>
+                  <Text color="text.dark" pt={4}>
+                    Minimum deposit required to start 7-day voting period:{" "}
+                    {mockUpDepositAmount} KOYN
+                  </Text>
+                  <Flex py={6} gap={4}>
+                    <Flex flex="1">
+                      <SelectInput
+                        formLabel="Asset"
+                        options={nativeTokensInfo.map((asset) => ({
+                          label: asset.symbol,
+                          value: asset.base,
+                          disabled: false,
+                        }))}
+                        onChange={(newVal) =>
+                          setValue("initialDeposit.denom", newVal)
+                        }
+                        placeholder="Select"
+                        initialSelected={initialDepositWatch.denom}
+                      />
+                    </Flex>
+                    <Flex flex="3">
+                      <ControllerInput
+                        name="initialDeposit.amount"
+                        control={control}
+                        label="Amount"
+                        placeholder="0.00"
+                        variant="floating"
+                        type="number"
+                        helperAction={
                           <Text
-                            variant="body2"
+                            textAlign="right"
+                            mr={3}
                             fontWeight="600"
-                            color="text.main"
+                            cursor="pointer"
+                            variant="body3"
+                            minW={16}
+                            color="honeydew.main"
+                            onClick={() =>
+                              setValue(
+                                "initialDeposit.amount",
+                                big(mockUpDepositAmount).toFixed(2)
+                              )
+                            }
                           >
-                            Why do I need to submit proposal?
+                            Fill {big(mockUpDepositAmount).toFixed(2)} KOYN
                           </Text>
-                        </Box>
-                        <AccordionIcon />
-                      </AccordionButton>
-                    </h2>
-                    <AccordionPanel pb={4}>
-                      <Text variant="body2" color="text.dark" pb={4}>
-                        Osmosis Mainnet is permissioned chain, which means you
-                        will need to submit proposal to store code. <br />
-                        <br /> Another way is to get your wallet address to
-                        allow list to store code without opening proposal.{" "}
-                        <br />
-                        <br /> You still can upload your Wasm to see how your
-                        code works on Testnet.
-                      </Text>
-                      <Button
-                        size="md"
-                        p="0"
-                        variant="ghost-primary"
-                        rightIcon={
-                          <CustomIcon
-                            name="chevron-right"
-                            color="lilac.main"
-                            boxSize={3}
-                          />
                         }
-                      >
-                        Switch to testnet
-                      </Button>
-                    </AccordionPanel>
-                  </AccordionItem>
-                </Accordion>
-              </Flex>
-            </Box>
-          </Flex>
-          <Box flex="1" />
+                      />
+                    </Flex>
+                  </Flex>
+
+                  <Alert variant={variant} gap="2" w="inherit">
+                    {icon}
+                    <AlertDescription>{description}</AlertDescription>
+                  </Alert>
+
+                  <Flex
+                    mt={12}
+                    fontSize="14px"
+                    color="text.dark"
+                    alignSelf="flex-start"
+                    alignItems="center"
+                    display="flex"
+                    gap={1}
+                  >
+                    <p>Transaction Fee:</p>
+                    <EstimatedFeeRender
+                      estimatedFee={estimatedFee}
+                      loading={loading}
+                    />
+                  </Flex>
+                </form>
+              </Box>
+            </GridItem>
+            <GridItem w="100%">
+              <StickySidebar />
+            </GridItem>
+            <GridItem w="100%" />
+          </Grid>
         </Flex>
-      </WasmPageContainer>
-      <Footer
-        loading={false}
-        // onInstantiate={proceed}
-        // disabled={disableInstantiate}
-        // loading={simulating}
-      />
+      </PageContainer>
+      <Footer loading={false} />
     </>
   );
 };

From 7212b132b207de93caa364fd75e6cf4e1ec69193 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Wed, 29 Mar 2023 18:12:10 +0700
Subject: [PATCH 005/354] fix(components): move address input dir

---
 src/lib/{pages/store-code => }/components/AddressInput.tsx | 0
 src/lib/pages/store-code/index.tsx                         | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/lib/{pages/store-code => }/components/AddressInput.tsx (100%)

diff --git a/src/lib/pages/store-code/components/AddressInput.tsx b/src/lib/components/AddressInput.tsx
similarity index 100%
rename from src/lib/pages/store-code/components/AddressInput.tsx
rename to src/lib/components/AddressInput.tsx
diff --git a/src/lib/pages/store-code/index.tsx b/src/lib/pages/store-code/index.tsx
index 3c643a6eb..65348df8a 100644
--- a/src/lib/pages/store-code/index.tsx
+++ b/src/lib/pages/store-code/index.tsx
@@ -18,6 +18,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 
+import { AddressInput } from "../../components/AddressInput";
 import { useNativeTokensInfo, useSimulateFee } from "lib/app-provider";
 import { AssignMe } from "lib/components/AssignMe";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
@@ -38,7 +39,6 @@ import {
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import type { Addr } from "lib/types";
 
-import { AddressInput } from "./components/AddressInput";
 import { Footer } from "./components/Footer";
 import { UploadFile } from "./components/UploadFile";
 

From 02e7193e3918e1ad0191f4a66f3e0a3cb3aeeb6f Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Wed, 29 Mar 2023 18:26:20 +0700
Subject: [PATCH 006/354] fix(components): add more condition for assign me in
 array of addresses

---
 src/lib/pages/store-code/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/pages/store-code/index.tsx b/src/lib/pages/store-code/index.tsx
index 65348df8a..cf25aded7 100644
--- a/src/lib/pages/store-code/index.tsx
+++ b/src/lib/pages/store-code/index.tsx
@@ -317,7 +317,10 @@ const StoreCode = () => {
                                     helperAction={
                                       <AssignMe
                                         onClick={
-                                          walletAddress
+                                          walletAddress &&
+                                          !addresses.find(
+                                            (x) => x.address === walletAddress
+                                          )
                                             ? () => {
                                                 AmpTrack(
                                                   AmpEvent.USE_ASSIGN_ME

From 1bbd1947f18c84a772bc445cb439a4ef6e85bd9d Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Thu, 30 Mar 2023 18:05:13 +0700
Subject: [PATCH 007/354] feat(components): init pool list

---
 src/lib/components/ToggleWithName.tsx         |  30 ++++
 src/lib/components/button/BackButton.tsx      |   2 +-
 src/lib/components/forms/SelectInput.tsx      |   6 +-
 src/lib/components/modal/RedoModal.tsx        |   6 +-
 .../components/modal/contract/ClearAdmin.tsx  |   2 +-
 src/lib/components/tx/modal/ButtonSection.tsx |   4 +-
 .../components/CodeInfoSection.tsx            |   2 +-
 .../contract-description/UserContractDesc.tsx |   2 +-
 src/lib/pages/execute/index.tsx               |   2 +-
 src/lib/pages/past-txs/index.tsx              |   1 -
 .../pool/components/FilterByPoolType.tsx      |  56 ++++++
 src/lib/pages/pool/components/PoolCard.tsx    |  21 +++
 src/lib/pages/pool/components/PoolHeader.tsx  | 169 ++++++++++++++++++
 src/lib/pages/pool/components/PoolList.tsx    |  84 +++++++++
 src/lib/pages/pool/components/PoolLogo.tsx    |  35 ++++
 src/lib/pages/pool/components/PoolTop.tsx     |   5 +
 .../pool/components/UnsupportedPoolList.tsx   |  34 ++++
 src/lib/pages/pool/index.tsx                  |  95 ++++++++++
 src/lib/pages/pool/poolId.tsx                 |  12 ++
 src/lib/pages/query/index.tsx                 |   2 +-
 src/lib/styles/theme/components/button.ts     |  15 +-
 src/lib/styles/theme/components/index.ts      |   2 +
 src/lib/styles/theme/components/switch.ts     |  17 ++
 src/lib/utils/truncate                        |   0
 src/pages/[network]/pool/[poolId].tsx         |   3 +
 src/pages/[network]/pool/index.tsx            |   3 +
 src/pages/pool/[poolId].tsx                   |   3 +
 src/pages/pool/index.tsx                      |   3 +
 28 files changed, 599 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/components/ToggleWithName.tsx
 create mode 100644 src/lib/pages/pool/components/FilterByPoolType.tsx
 create mode 100644 src/lib/pages/pool/components/PoolCard.tsx
 create mode 100644 src/lib/pages/pool/components/PoolHeader.tsx
 create mode 100644 src/lib/pages/pool/components/PoolList.tsx
 create mode 100644 src/lib/pages/pool/components/PoolLogo.tsx
 create mode 100644 src/lib/pages/pool/components/PoolTop.tsx
 create mode 100644 src/lib/pages/pool/components/UnsupportedPoolList.tsx
 create mode 100644 src/lib/pages/pool/index.tsx
 create mode 100644 src/lib/pages/pool/poolId.tsx
 create mode 100644 src/lib/styles/theme/components/switch.ts
 create mode 100644 src/lib/utils/truncate
 create mode 100644 src/pages/[network]/pool/[poolId].tsx
 create mode 100644 src/pages/[network]/pool/index.tsx
 create mode 100644 src/pages/pool/[poolId].tsx
 create mode 100644 src/pages/pool/index.tsx

diff --git a/src/lib/components/ToggleWithName.tsx b/src/lib/components/ToggleWithName.tsx
new file mode 100644
index 000000000..c23809c9e
--- /dev/null
+++ b/src/lib/components/ToggleWithName.tsx
@@ -0,0 +1,30 @@
+import { Button, Flex } from "@chakra-ui/react";
+
+import type { LVPair } from "lib/types";
+
+interface ToggleWithNameProps {
+  selectedValue: string;
+  options: LVPair[];
+  selectOption: (value: string) => void;
+}
+
+export const ToggleWithName = ({
+  selectedValue,
+  options,
+  selectOption,
+}: ToggleWithNameProps) => (
+  <Flex p="1" borderRadius={4} border="1px" borderColor="pebble.700">
+    {options.map((item) => (
+      <Button
+        borderRadius={4}
+        size="sm"
+        height="22px"
+        width="64px"
+        variant={item.value === selectedValue ? "primary" : "ghost-primary"}
+        onClick={() => selectOption(item.value)}
+      >
+        {item.label}
+      </Button>
+    ))}
+  </Flex>
+);
diff --git a/src/lib/components/button/BackButton.tsx b/src/lib/components/button/BackButton.tsx
index 18ccc0f63..3e8840bb5 100644
--- a/src/lib/components/button/BackButton.tsx
+++ b/src/lib/components/button/BackButton.tsx
@@ -10,7 +10,7 @@ export const BackButton = (props: ButtonProps) => {
 
   return (
     <Button
-      variant="ghost-primary"
+      variant="ghost-lilac"
       size="sm"
       mb="8px"
       p="unset"
diff --git a/src/lib/components/forms/SelectInput.tsx b/src/lib/components/forms/SelectInput.tsx
index 99b1b56a7..0af392249 100644
--- a/src/lib/components/forms/SelectInput.tsx
+++ b/src/lib/components/forms/SelectInput.tsx
@@ -8,6 +8,7 @@ import {
   useDisclosure,
   useOutsideClick,
   Flex,
+  Image,
   InputLeftElement,
 } from "@chakra-ui/react";
 import type { MutableRefObject, ReactNode } from "react";
@@ -27,6 +28,7 @@ interface SelectInputProps<T extends string> {
     disabled: boolean;
     icon?: IconKeys;
     iconColor?: string;
+    image?: string;
   }[];
   onChange: (newVal: T) => void;
   placeholder?: string;
@@ -125,6 +127,7 @@ export const SelectInput = <T extends string>({
           <div className="form-label">{formLabel}</div>
           {selectedOption?.icon && (
             <InputLeftElement pointerEvents="none" h="full" ml="1">
+              <Image boxSize={6} src={selectedOption.image} />
               <CustomIcon
                 name={selectedOption.icon}
                 color={selectedOption.iconColor}
@@ -164,7 +167,7 @@ export const SelectInput = <T extends string>({
           },
         }}
       >
-        {options.map(({ label, value, disabled, icon, iconColor }) => (
+        {options.map(({ label, value, disabled, icon, iconColor, image }) => (
           <SelectItem
             key={value}
             onSelect={() => {
@@ -174,6 +177,7 @@ export const SelectInput = <T extends string>({
             }}
             disabled={disabled}
           >
+            {image && <Image boxSize={6} src={image} />}
             {icon && <CustomIcon name={icon} color={iconColor} />}
             {label}
           </SelectItem>
diff --git a/src/lib/components/modal/RedoModal.tsx b/src/lib/components/modal/RedoModal.tsx
index 45515e4b3..a3b6847c4 100644
--- a/src/lib/components/modal/RedoModal.tsx
+++ b/src/lib/components/modal/RedoModal.tsx
@@ -77,11 +77,7 @@ export const RedoModal = ({ message }: RedoModalProps) => {
               justifyContent="end"
               gap="4"
             >
-              <Button
-                cursor="pointer"
-                variant="ghost-primary"
-                onClick={onClose}
-              >
+              <Button cursor="pointer" variant="ghost-lilac" onClick={onClose}>
                 Cancel
               </Button>
               <Button
diff --git a/src/lib/components/modal/contract/ClearAdmin.tsx b/src/lib/components/modal/contract/ClearAdmin.tsx
index adfef7132..04e10d228 100644
--- a/src/lib/components/modal/contract/ClearAdmin.tsx
+++ b/src/lib/components/modal/contract/ClearAdmin.tsx
@@ -35,7 +35,7 @@ export const ClearAdminModal = ({
       mainAction={proceed}
       mainVariant="error"
       otherBtnTitle="No, keep it"
-      otherVariant="ghost-primary"
+      otherVariant="ghost-lilac"
     >
       <Text>
         Clearing the admin is a permanent action. You&apos;ll not be able to
diff --git a/src/lib/components/tx/modal/ButtonSection.tsx b/src/lib/components/tx/modal/ButtonSection.tsx
index 3ce5d1db8..7f2e99b36 100644
--- a/src/lib/components/tx/modal/ButtonSection.tsx
+++ b/src/lib/components/tx/modal/ButtonSection.tsx
@@ -43,7 +43,7 @@ export const ButtonSection = ({
       return (
         <>
           <Button
-            variant="ghost-primary"
+            variant="ghost-lilac"
             onClick={() => {
               navigate({ pathname: "/codes" });
               onClose?.();
@@ -89,7 +89,7 @@ export const ButtonSection = ({
     case "update-admin":
       return (
         <>
-          <Button variant="ghost-primary" onClick={openExplorer}>
+          <Button variant="ghost-lilac" onClick={openExplorer}>
             See Transaction
           </Button>
           <Button
diff --git a/src/lib/pages/code-details/components/CodeInfoSection.tsx b/src/lib/pages/code-details/components/CodeInfoSection.tsx
index f5cec0eba..fa6859fa1 100644
--- a/src/lib/pages/code-details/components/CodeInfoSection.tsx
+++ b/src/lib/pages/code-details/components/CodeInfoSection.tsx
@@ -111,7 +111,7 @@ const ViewAddresses = ({
         })}
       {permissionAddresses.length > 1 && (
         <Button
-          variant="ghost-primary"
+          variant="ghost-lilac"
           onClick={() => setViewAll((prev) => !prev)}
           size="sm"
           p="unset"
diff --git a/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx b/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
index e9f5b7b1f..6332b5e1b 100644
--- a/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
+++ b/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
@@ -39,7 +39,7 @@ export const UserContractDesc = ({ contractData }: UserContractDescProps) => {
           <Button
             size="xs"
             color="lilac.main"
-            variant="ghost-primary"
+            variant="ghost-lilac"
             leftIcon={<CustomIcon name="edit" color="lilac.main" boxSize="3" />}
           >
             {description ? "Edit" : "Add Description"}
diff --git a/src/lib/pages/execute/index.tsx b/src/lib/pages/execute/index.tsx
index 91eee9227..819a7755e 100644
--- a/src/lib/pages/execute/index.tsx
+++ b/src/lib/pages/execute/index.tsx
@@ -92,7 +92,7 @@ const Execute = () => {
         </Heading>
         <Box>
           <Button
-            variant="ghost-primary"
+            variant="ghost-lilac"
             size="sm"
             p="unset"
             pl="2"
diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx
index 9081a8044..daa6f25d6 100644
--- a/src/lib/pages/past-txs/index.tsx
+++ b/src/lib/pages/past-txs/index.tsx
@@ -110,7 +110,6 @@ const PastTxs = () => {
       <Heading variant="h5" as="h5">
         Past Transactions
       </Heading>
-
       <Flex mt="48px">
         <Flex grow="2" gap="4">
           <InputGroup>
diff --git a/src/lib/pages/pool/components/FilterByPoolType.tsx b/src/lib/pages/pool/components/FilterByPoolType.tsx
new file mode 100644
index 000000000..34d1617ba
--- /dev/null
+++ b/src/lib/pages/pool/components/FilterByPoolType.tsx
@@ -0,0 +1,56 @@
+import { Grid } from "@chakra-ui/react";
+
+import { SelectInput } from "lib/components/forms";
+
+export type PoolTypeFilterValue = "all" | "balancer" | "stableswap";
+
+interface PoolTypeOption {
+  label: string;
+  value: PoolTypeFilterValue;
+  image?: string;
+  disabled: boolean;
+}
+
+interface FilterByPoolTypeProps {
+  setPoolTypeValue: (newVal: PoolTypeFilterValue) => void;
+  initialSelected: string;
+  labelBgColor?: string;
+}
+
+const options: PoolTypeOption[] = [
+  {
+    label: "All Pools",
+    value: "all",
+    disabled: false,
+  },
+  {
+    label: "Balancer Pools",
+    value: "balancer",
+    image: "https://assets.alleslabs.dev/webapp-assets/pool/pool-balancer.svg",
+    disabled: false,
+  },
+  {
+    label: "StableSwap Pools",
+    value: "stableswap",
+    image:
+      "https://assets.alleslabs.dev/webapp-assets/pool/pool-stableswap.svg",
+    disabled: false,
+  },
+];
+
+export const FilterByPoolType = ({
+  setPoolTypeValue,
+  initialSelected,
+  labelBgColor = "background.main",
+}: FilterByPoolTypeProps) => (
+  <Grid columnGap="16px" w="full" maxW="360px">
+    <SelectInput<PoolTypeFilterValue>
+      formLabel="Filter by Pool Type"
+      options={options}
+      onChange={setPoolTypeValue}
+      placeholder="Select"
+      initialSelected={initialSelected}
+      labelBgColor={labelBgColor}
+    />
+  </Grid>
+);
diff --git a/src/lib/pages/pool/components/PoolCard.tsx b/src/lib/pages/pool/components/PoolCard.tsx
new file mode 100644
index 000000000..b7d13d8fa
--- /dev/null
+++ b/src/lib/pages/pool/components/PoolCard.tsx
@@ -0,0 +1,21 @@
+import { Flex } from "@chakra-ui/react";
+
+import { PoolHeader } from "./PoolHeader";
+
+export const PoolCard = () => {
+  return (
+    <Flex
+      bg="pebble.900"
+      borderRadius="8px"
+      _hover={{ bg: "pebble.800" }}
+      p={4}
+      transition="all .25s ease-in-out"
+    >
+      <PoolHeader />
+      {/* Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit explicabo
+      impedit fugiat cupiditate ullam facilis delectus quo molestias reiciendis,
+      non eveniet doloribus eaque. Maiores ipsam veniam accusamus cupiditate
+      tenetur dolore? */}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pool/components/PoolHeader.tsx b/src/lib/pages/pool/components/PoolHeader.tsx
new file mode 100644
index 000000000..0d874f8a0
--- /dev/null
+++ b/src/lib/pages/pool/components/PoolHeader.tsx
@@ -0,0 +1,169 @@
+import { Flex, Heading, Text, Box, Image, IconButton } from "@chakra-ui/react";
+import Link from "next/link";
+
+import { CustomIcon } from "lib/components/icon";
+
+import { PoolLogo } from "./PoolLogo";
+
+export const PoolHeader = () => {
+  const mockPool = {
+    "@type": "/osmosis.gamm.v1beta1.Pool",
+    address: "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn",
+    id: "31",
+    pool_params: {
+      swap_fee: "0.030000000000000000",
+      exit_fee: "0.000000000000000000",
+      smooth_weight_change_params: null,
+    },
+    future_pool_governor: "24h",
+    total_shares: {
+      denom: "gamm/pool/31",
+      amount: "100000000000000000",
+    },
+    pool_assets: [
+      {
+        token: {
+          denom: "ibc/1DC...76",
+          amount: "3053",
+        },
+        weight: "268435456000000",
+      },
+      // {
+      //   token: {
+      //     denom: "ibc/2734F...5EB2",
+      //     amount: "127",
+      //   },
+      //   weight: "268435456000000",
+      // },
+      {
+        token: {
+          denom: "ibc/A0CC...A9293",
+          amount: "9226",
+        },
+        weight: "268435456000000",
+      },
+      {
+        token: {
+          denom: "uosmo",
+          amount: "2825",
+        },
+        weight: "268435456000000",
+      },
+    ],
+    total_weight: "1073741824000000",
+  };
+
+  return (
+    <Flex justifyContent="space-between" w="full">
+      <Flex alignItems="center" gap={4}>
+        <PoolLogo />
+        <Box>
+          <Flex
+            gap={1}
+            css={{
+              "h6:last-child": {
+                display: "none",
+              },
+            }}
+          >
+            {mockPool.pool_assets.map((item) => (
+              <>
+                <Heading as="h6" fontWeight="600" variant="h6">
+                  {item.token.denom}
+                </Heading>
+                <Heading
+                  as="h6"
+                  fontWeight="600"
+                  variant="h6"
+                  color="honeydew.main"
+                >
+                  /
+                </Heading>
+              </>
+            ))}
+          </Flex>
+          <Flex alignItems="center" gap={2}>
+            <Text variant="body2" color="lilac.main">
+              #{mockPool.id}
+            </Text>
+            <Flex alignItems="center" gap={2}>
+              <Flex
+                backgroundColor="pebble.600"
+                borderRadius="full"
+                w="6px"
+                h="6px"
+              />
+              <Flex alignItems="center" gap={1}>
+                <Image
+                  boxSize={4}
+                  src="https://assets.alleslabs.dev/webapp-assets/pool/pool-balancer.svg"
+                />
+                <Text variant="body2" color="text.dark">
+                  Balancer Pool
+                </Text>
+              </Flex>
+            </Flex>
+            <Flex alignItems="center" gap={2}>
+              <Flex
+                backgroundColor="pebble.600"
+                borderRadius="full"
+                w="6px"
+                h="6px"
+              />
+              <Flex alignItems="center" gap={1}>
+                <Image
+                  boxSize={4}
+                  src="https://assets.alleslabs.dev/webapp-assets/pool/pool-superfluid.svg"
+                />
+                <Text variant="body2" color="text.dark">
+                  Superfluid
+                </Text>
+              </Flex>
+            </Flex>
+            {/* {mockPool.isSuperfluid && (
+            <Flex alignItems="center" gap={2}>
+              <Flex
+                backgroundColor="pebble.600"
+                borderRadius="full"
+                w="6px"
+                h="6px"
+              />
+              <Flex alignItems="center" gap={1}>
+                <Image
+                  boxSize={4}
+                  src="https://assets.alleslabs.dev/webapp-assets/pool/pool-superfluid.svg"
+                />
+                <Text variant="body2" color="text.dark">
+                  Superfluid
+                </Text>
+              </Flex>
+            </Flex>
+          )} */}
+          </Flex>
+        </Box>
+      </Flex>
+      <Flex w="72px" justifyContent="flex-end">
+        <Link href="/">
+          <IconButton
+            fontSize="24px"
+            variant="none"
+            aria-label="external"
+            _hover={{ backgroundColor: "pebble.700" }}
+            color="pebble.600"
+            icon={<CustomIcon name="external" />}
+          />
+        </Link>
+        <Flex>
+          <IconButton
+            fontSize="24px"
+            _hover={{ backgroundColor: "pebble.700" }}
+            variant="none"
+            aria-label="save"
+            color="pebble.600"
+            icon={<CustomIcon name="bookmark" />}
+          />
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pool/components/PoolList.tsx b/src/lib/pages/pool/components/PoolList.tsx
new file mode 100644
index 000000000..de1befeb4
--- /dev/null
+++ b/src/lib/pages/pool/components/PoolList.tsx
@@ -0,0 +1,84 @@
+import {
+  Badge,
+  Button,
+  Flex,
+  Heading,
+  SimpleGrid,
+  Text,
+} from "@chakra-ui/react";
+import { useState } from "react";
+
+import { CustomIcon } from "lib/components/icon";
+import { ToggleWithName } from "lib/components/ToggleWithName";
+
+import { PoolCard } from "./PoolCard";
+
+export const PoolList = () => {
+  const [showNewest, setShowNewest] = useState(true);
+  const [toggle, setToggle] = useState("percent-value");
+  const options = [
+    {
+      label: "%Value",
+      value: "percent-value",
+    },
+    {
+      label: "Amount",
+      value: "amount",
+    },
+  ];
+  return (
+    <>
+      <Flex alignItems="center" justifyContent="space-between">
+        <Flex gap={2} h="29px" alignItems="center">
+          <Heading as="h6" variant="h6">
+            Pools
+          </Heading>
+          <Badge variant="gray" color="text.main" textColor="text.main">
+            12
+          </Badge>
+        </Flex>
+        <Flex gap={4}>
+          <Flex gap="2" alignItems="center">
+            <Text variant="body2" color="text.dark">
+              Sort Pool ID:
+            </Text>
+            {showNewest ? (
+              <Button
+                variant="outline-gray"
+                size="sm"
+                pr="1"
+                onClick={() => setShowNewest(!showNewest)}
+              >
+                Newest First
+                <CustomIcon name="arrow-down" color="text.dark" />
+              </Button>
+            ) : (
+              <Button
+                variant="outline-gray"
+                size="sm"
+                pr="1"
+                onClick={() => setShowNewest(!showNewest)}
+              >
+                Oldest First
+                <CustomIcon name="arrow-up" color="text.dark" />
+              </Button>
+            )}
+          </Flex>
+          <Flex gap="2" alignItems="center">
+            <Text variant="body2" color="text.dark">
+              View asset allocation in:
+            </Text>
+            <ToggleWithName
+              selectedValue={toggle}
+              options={options}
+              selectOption={(value: string) => setToggle(value)}
+            />
+          </Flex>
+        </Flex>
+      </Flex>
+      <SimpleGrid columns={{ sm: 1, md: 2 }} spacing={4} w="full">
+        <PoolCard /> <PoolCard /> <PoolCard /> <PoolCard />
+      </SimpleGrid>
+    </>
+  );
+};
diff --git a/src/lib/pages/pool/components/PoolLogo.tsx b/src/lib/pages/pool/components/PoolLogo.tsx
new file mode 100644
index 000000000..4e3c1a68a
--- /dev/null
+++ b/src/lib/pages/pool/components/PoolLogo.tsx
@@ -0,0 +1,35 @@
+import { Flex, Image } from "@chakra-ui/react";
+
+export const PoolLogo = () => {
+  const list = [
+    "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet.svg",
+    "https://assets.alleslabs.dev/webapp-assets/asset/undefined-white.svg",
+    // "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet-light.svg",
+  ];
+  return (
+    <Flex
+      css={{
+        ">:not(:first-child)": {
+          marginLeft: "-12px",
+        },
+      }}
+      width="96px"
+      alignItems="center"
+      justifyContent="center"
+    >
+      {list.map((url, i) => (
+        <Image boxSize={10} src={url} zIndex={i * -1 + 2} />
+      ))}
+      <Flex
+        width={10}
+        height={10}
+        borderRadius="full"
+        backgroundColor="pebble.700"
+        alignItems="center"
+        justifyContent="center"
+      >
+        +1
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pool/components/PoolTop.tsx b/src/lib/pages/pool/components/PoolTop.tsx
new file mode 100644
index 000000000..930910d44
--- /dev/null
+++ b/src/lib/pages/pool/components/PoolTop.tsx
@@ -0,0 +1,5 @@
+import { Flex } from "@chakra-ui/react";
+
+export const PoolTop = () => {
+  return <Flex>jj</Flex>;
+};
diff --git a/src/lib/pages/pool/components/UnsupportedPoolList.tsx b/src/lib/pages/pool/components/UnsupportedPoolList.tsx
new file mode 100644
index 000000000..00ade051a
--- /dev/null
+++ b/src/lib/pages/pool/components/UnsupportedPoolList.tsx
@@ -0,0 +1,34 @@
+import { Badge, Button, Flex, Heading, Text } from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+
+export const UnsupportedPoolList = () => {
+  return (
+    <Flex alignItems="center" justifyContent="space-between">
+      <Flex gap={2} h="29px" alignItems="center">
+        <Heading as="h6" variant="h6">
+          Pools with unsupported tokens
+        </Heading>
+        <Badge variant="gray" color="text.main" textColor="text.main">
+          12
+        </Badge>
+      </Flex>
+      <Flex gap={4}>
+        <Flex gap="2" alignItems="center">
+          <Text variant="body2" color="text.dark">
+            Sort Pool ID:
+          </Text>
+          <Button variant="outline-gray" size="sm" pr="1">
+            Newest First
+            <CustomIcon name="arrow-down" color="text.dark" />
+          </Button>
+        </Flex>
+        <Flex gap="2" alignItems="center">
+          <Button variant="outline-gray" size="sm" pr="1">
+            Expand All
+          </Button>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pool/index.tsx b/src/lib/pages/pool/index.tsx
new file mode 100644
index 000000000..58fe58cf2
--- /dev/null
+++ b/src/lib/pages/pool/index.tsx
@@ -0,0 +1,95 @@
+import {
+  Flex,
+  Heading,
+  Switch,
+  Text,
+  Image,
+  Tabs,
+  TabList,
+  TabPanels,
+  TabPanel,
+  FormControl,
+  FormLabel,
+} from "@chakra-ui/react";
+import type { ChangeEvent } from "react";
+import { useForm } from "react-hook-form";
+
+import { CustomTab } from "lib/components/CustomTab";
+import InputWithIcon from "lib/components/InputWithIcon";
+import PageContainer from "lib/components/PageContainer";
+
+import type { PoolTypeFilterValue } from "./components/FilterByPoolType";
+import { FilterByPoolType } from "./components/FilterByPoolType";
+import { PoolList } from "./components/PoolList";
+import { UnsupportedPoolList } from "./components/UnsupportedPoolList";
+
+interface PoolFilterState {
+  keyword: string;
+  poolTypeValue: PoolTypeFilterValue;
+}
+
+export type PoolToggleValue = "percent-value" | "amount";
+export const PoolIndex = () => {
+  const { watch, setValue } = useForm<PoolFilterState>({
+    defaultValues: {
+      poolTypeValue: "all",
+      keyword: "",
+    },
+  });
+  const { keyword, poolTypeValue } = watch();
+  return (
+    <PageContainer>
+      <Heading variant="h5" as="h5">
+        Osmosis Pools
+      </Heading>
+      <Flex mt={12} alignItems="center">
+        <Flex grow="2" gap={4}>
+          <InputWithIcon
+            placeholder="Search with code ID or code name"
+            value={keyword}
+            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+              setValue("keyword", e.target.value)
+            }
+            size="lg"
+          />
+          <FilterByPoolType
+            initialSelected="all"
+            setPoolTypeValue={(newVal: PoolTypeFilterValue) => {
+              if (newVal === poolTypeValue) return;
+              setValue("poolTypeValue", newVal);
+            }}
+          />
+          <Flex minW="250px">
+            <FormControl display="flex" alignItems="center" gap={2}>
+              <Switch size="md" />
+              <FormLabel mb="0" cursor="pointer">
+                <Text display="flex" gap={2} alignItems="center">
+                  Show only
+                  <Image
+                    boxSize={4}
+                    src="https://assets.alleslabs.dev/webapp-assets/pool/pool-superfluid.svg"
+                  />
+                  Superfluid
+                </Text>
+              </FormLabel>
+            </FormControl>
+          </Flex>
+        </Flex>
+      </Flex>
+      <Tabs>
+        <TabList my={8} borderBottom="1px" borderColor="pebble.800">
+          <CustomTab count={0}>Pools</CustomTab>
+          <CustomTab count={0}>Pools with unsupported tokens</CustomTab>
+        </TabList>
+        <TabPanels>
+          <TabPanel p={0}>
+            <PoolList />
+          </TabPanel>
+          <TabPanel p={0}>
+            <UnsupportedPoolList />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </PageContainer>
+  );
+};
diff --git a/src/lib/pages/pool/poolId.tsx b/src/lib/pages/pool/poolId.tsx
new file mode 100644
index 000000000..ffc0084e1
--- /dev/null
+++ b/src/lib/pages/pool/poolId.tsx
@@ -0,0 +1,12 @@
+import { Flex } from "@chakra-ui/react";
+
+export const PoolId = () => {
+  return (
+    <Flex>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam ea animi
+      veritatis nostrum, voluptate, ipsa aperiam quae nemo, beatae placeat
+      fugiat dolor pariatur impedit repellendus consequuntur dignissimos nisi?
+      Quia, eveniet?
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/query/index.tsx b/src/lib/pages/query/index.tsx
index 14e5861c9..4eff6b262 100644
--- a/src/lib/pages/query/index.tsx
+++ b/src/lib/pages/query/index.tsx
@@ -100,7 +100,7 @@ const Query = () => {
         </Heading>
         <Box>
           <Button
-            variant="ghost-primary"
+            variant="ghost-lilac"
             size="sm"
             p="unset"
             pl="2"
diff --git a/src/lib/styles/theme/components/button.ts b/src/lib/styles/theme/components/button.ts
index 9b32e6749..a632a6ddb 100644
--- a/src/lib/styles/theme/components/button.ts
+++ b/src/lib/styles/theme/components/button.ts
@@ -8,6 +8,7 @@ const violetLight = "violet.light";
 const honeydewBg = "honeydew.background";
 const honeydewDarker = "honeydew.darker";
 const borderDefualt = "1px solid";
+const violetBg = "violet.background";
 
 const generateStyle = ({
   basic,
@@ -67,7 +68,7 @@ export const Button: ComponentStyleConfig = {
     primary: generateStyle({
       basic: { background: "violet.main", color: "text.main" },
       disabled: {
-        background: "violet.background",
+        background: violetBg,
         color: pebble600,
       },
       hoverBg: "violet.dark",
@@ -93,7 +94,7 @@ export const Button: ComponentStyleConfig = {
         borderColor: pebble700,
         color: pebble600,
       },
-      hoverBg: "violet.background",
+      hoverBg: violetBg,
       activeBg: "transparent",
     }),
     "outline-gray": generateStyle({
@@ -137,6 +138,16 @@ export const Button: ComponentStyleConfig = {
       activeBg: "transparent",
     }),
     "ghost-primary": generateStyle({
+      basic: {
+        color: "violet.light",
+      },
+      disabled: {
+        color: violetBg,
+      },
+      hoverBg: violetBg,
+      activeBg: "transparent",
+    }),
+    "ghost-lilac": generateStyle({
       basic: {
         color: "lilac.main",
       },
diff --git a/src/lib/styles/theme/components/index.ts b/src/lib/styles/theme/components/index.ts
index 5e092dccb..9e42ec3be 100644
--- a/src/lib/styles/theme/components/index.ts
+++ b/src/lib/styles/theme/components/index.ts
@@ -10,6 +10,7 @@ import { Menu } from "./menu";
 import { Modal } from "./modal";
 import { Radio } from "./radio";
 import { Select } from "./select";
+import { Switch } from "./switch";
 import { Table } from "./table";
 import { Text } from "./text";
 import { Textarea } from "./textarea";
@@ -32,4 +33,5 @@ export const components = {
   Tooltip,
   Textarea,
   Table,
+  Switch,
 };
diff --git a/src/lib/styles/theme/components/switch.ts b/src/lib/styles/theme/components/switch.ts
new file mode 100644
index 000000000..e3631f189
--- /dev/null
+++ b/src/lib/styles/theme/components/switch.ts
@@ -0,0 +1,17 @@
+import { switchAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(switchAnatomy.keys);
+
+const baseStyle = definePartsStyle({
+  track: {
+    _checked: {
+      bg: "violet.main",
+    },
+  },
+});
+
+export const Switch = defineMultiStyleConfig({
+  baseStyle,
+});
diff --git a/src/lib/utils/truncate b/src/lib/utils/truncate
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/[network]/pool/[poolId].tsx b/src/pages/[network]/pool/[poolId].tsx
new file mode 100644
index 000000000..272b65280
--- /dev/null
+++ b/src/pages/[network]/pool/[poolId].tsx
@@ -0,0 +1,3 @@
+import { PoolId } from "lib/pages/pool/poolId";
+
+export default PoolId;
diff --git a/src/pages/[network]/pool/index.tsx b/src/pages/[network]/pool/index.tsx
new file mode 100644
index 000000000..d469543e3
--- /dev/null
+++ b/src/pages/[network]/pool/index.tsx
@@ -0,0 +1,3 @@
+import { PoolIndex } from "lib/pages/pool/index";
+
+export default PoolIndex;
diff --git a/src/pages/pool/[poolId].tsx b/src/pages/pool/[poolId].tsx
new file mode 100644
index 000000000..272b65280
--- /dev/null
+++ b/src/pages/pool/[poolId].tsx
@@ -0,0 +1,3 @@
+import { PoolId } from "lib/pages/pool/poolId";
+
+export default PoolId;
diff --git a/src/pages/pool/index.tsx b/src/pages/pool/index.tsx
new file mode 100644
index 000000000..d469543e3
--- /dev/null
+++ b/src/pages/pool/index.tsx
@@ -0,0 +1,3 @@
+import { PoolIndex } from "lib/pages/pool/index";
+
+export default PoolIndex;

From ca325f88689150de76225e3867ee7855a3b08259 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Mon, 3 Apr 2023 17:54:11 +0700
Subject: [PATCH 008/354] feat(pages): unsupported pool list and pool detail
 page structure

---
 src/lib/components/json/JsonReadOnly.tsx      |  10 +-
 .../modal/UnsupportedTokensModal.tsx          |  58 ++-
 .../pages/pool/components/PoolAssetDetail.tsx |  53 +++
 src/lib/pages/pool/components/PoolCard.tsx    | 168 ++++++-
 .../pool/components/PoolDetailHeader.tsx      | 240 ++++++++++
 src/lib/pages/pool/components/PoolHeader.tsx  | 228 ++++------
 src/lib/pages/pool/components/PoolList.tsx    |  23 +-
 src/lib/pages/pool/components/PoolLogo.tsx    |  65 ++-
 .../pool/components/UnsupportedPoolCard.tsx   | 168 +++++++
 .../pool/components/UnsupportedPoolList.tsx   |  77 ++--
 src/lib/pages/pool/components/constant.ts     | 422 ++++++++++++++++++
 src/lib/pages/pool/index.tsx                  |  19 +-
 src/lib/pages/pool/poolId.tsx                 |  28 +-
 src/lib/services/asset.ts                     |   8 +-
 src/lib/services/assetService.ts              |   4 +-
 src/lib/styles/theme/components/accordion.ts  |  22 +
 src/lib/styles/theme/components/index.ts      |   2 +
 src/lib/types/currency/balance.ts             |   7 +-
 src/lib/types/pool.ts                         |  41 ++
 src/lib/utils/formatter/formatPercentValue.ts |  21 +
 src/lib/utils/formatter/token.ts              |   4 +-
 src/lib/utils/truncate                        |   0
 22 files changed, 1435 insertions(+), 233 deletions(-)
 create mode 100644 src/lib/pages/pool/components/PoolAssetDetail.tsx
 create mode 100644 src/lib/pages/pool/components/PoolDetailHeader.tsx
 create mode 100644 src/lib/pages/pool/components/UnsupportedPoolCard.tsx
 create mode 100644 src/lib/pages/pool/components/constant.ts
 create mode 100644 src/lib/styles/theme/components/accordion.ts
 create mode 100644 src/lib/types/pool.ts
 create mode 100644 src/lib/utils/formatter/formatPercentValue.ts
 delete mode 100644 src/lib/utils/truncate

diff --git a/src/lib/components/json/JsonReadOnly.tsx b/src/lib/components/json/JsonReadOnly.tsx
index c12dee1ec..10e214c46 100644
--- a/src/lib/components/json/JsonReadOnly.tsx
+++ b/src/lib/components/json/JsonReadOnly.tsx
@@ -16,6 +16,7 @@ interface JsonReadOnlyProps {
   text: string;
   canCopy?: boolean;
   isExpandable?: boolean;
+  showLines?: number;
 }
 
 const THRESHOLD_LINES = 16;
@@ -25,6 +26,7 @@ const JsonReadOnly = ({
   text,
   canCopy,
   isExpandable,
+  showLines,
 }: JsonReadOnlyProps) => {
   const [viewFull, setViewFull] = useState(false);
 
@@ -32,8 +34,8 @@ const JsonReadOnly = ({
     return jsonValidate(text) === null || text.length === 0;
   }, [text]);
 
-  const showLines = useMemo(() => {
-    const lineCount = jsonLineCount(text);
+  const actualShowLines = useMemo(() => {
+    const lineCount = showLines ?? jsonLineCount(text);
 
     if (isExpandable) {
       return viewFull ? lineCount : Math.min(lineCount, THRESHOLD_LINES);
@@ -41,7 +43,7 @@ const JsonReadOnly = ({
 
     // for query response json viewer
     return Math.max(lineCount, THRESHOLD_LINES);
-  }, [isExpandable, text, viewFull]);
+  }, [isExpandable, showLines, text, viewFull]);
 
   const showExpandButton =
     isExpandable && jsonLineCount(text) > THRESHOLD_LINES;
@@ -63,7 +65,7 @@ const JsonReadOnly = ({
           value={text}
           readOnly
           isValid={isJsonValid}
-          showLines={showLines}
+          showLines={actualShowLines}
         />
       </Box>
       {!!topic && (
diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx
index bccfbb315..f377beeb0 100644
--- a/src/lib/components/modal/UnsupportedTokensModal.tsx
+++ b/src/lib/components/modal/UnsupportedTokensModal.tsx
@@ -1,3 +1,4 @@
+import type { ButtonProps } from "@chakra-ui/react";
 import {
   Modal,
   ModalHeader,
@@ -18,9 +19,10 @@ import { useMemo } from "react";
 import { ExplorerLink } from "../ExplorerLink";
 import type { IconKeys } from "../icon";
 import { CustomIcon } from "../icon";
-import { getAddressTypeByLength } from "lib/app-provider";
+import { useGetAddressType, getAddressTypeByLength } from "lib/app-provider";
 import type { AddressReturnType } from "lib/app-provider";
 import { Copier } from "lib/components/copy";
+// import { AmpTrackUnsupportedToken } from "lib/services/amplitude";
 import type { BalanceWithAssetInfo, Balance, Token, U, Addr } from "lib/types";
 import {
   getTokenType,
@@ -30,22 +32,35 @@ import {
 
 interface UnsupportedTokensModalProps {
   unsupportedAssets: BalanceWithAssetInfo[];
-  address: Addr;
+  address?: Addr;
+  buttonProps?: ButtonProps;
+  amptrackPage?: string;
 }
 
 interface UnsupportedTokenProps {
   balance: Balance;
 }
 
+const getTokenTypeWithAddress = (
+  type: Balance["type"],
+  addrType: AddressReturnType
+) => {
+  if (type) return getTokenType(type);
+  return addrType === "contract_address"
+    ? getTokenType("cw20")
+    : getTokenType("native");
+};
+
 const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
+  const getAddressType = useGetAddressType();
   // TODO - Move this to utils
   const [tokenLabel, tokenType] = useMemo(() => {
     const label = getTokenLabel(balance.id);
     const type = !balance.id.includes("/")
-      ? getTokenType(balance.type)
+      ? getTokenTypeWithAddress(balance.type, getAddressType(balance.id))
       : getTokenType(balance.id.split("/")[0]);
     return [label, type];
-  }, [balance]);
+  }, [balance, getAddressType]);
 
   return (
     <Flex
@@ -133,19 +148,32 @@ const unsupportedTokensContent = (
 export const UnsupportedTokensModal = ({
   unsupportedAssets,
   address,
-}: UnsupportedTokensModalProps) => {
+  buttonProps,
+}: // amptrackPage,
+UnsupportedTokensModalProps) => {
   const { currentChainName } = useWallet();
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   if (unsupportedAssets.length === 0) return null;
 
-  const addressType = getAddressTypeByLength(currentChainName, address);
+  const addressType = getAddressTypeByLength(currentChainName, address as Addr);
   const content = unsupportedTokensContent(addressType);
 
   return (
     <>
-      <Flex onClick={onOpen}>
-        <Button variant="ghost" color="text.dark" mb={1} fontWeight={500}>
+      <Flex
+        onClick={() => {
+          // AmpTrackUnsupportedToken(amptrackPage);
+          onOpen();
+        }}
+      >
+        <Button
+          variant="ghost"
+          color="text.dark"
+          mb={1}
+          fontWeight={500}
+          {...buttonProps}
+        >
           {`View ${unsupportedAssets.length} Unsupported Assets`}
         </Button>
       </Flex>
@@ -164,12 +192,14 @@ export const UnsupportedTokensModal = ({
           <ModalCloseButton color="pebble.600" />
           <ModalBody maxH="400px" overflow="overlay" pb={6}>
             <Flex direction="column" gap={5}>
-              <Flex direction="row" gap={4}>
-                <Text variant="body2" fontWeight="700">
-                  {content.header}
-                </Text>
-                <ExplorerLink value={address} type={addressType} />
-              </Flex>
+              {address && (
+                <Flex direction="row" gap={4}>
+                  <Text variant="body2" fontWeight="700">
+                    {content.header}
+                  </Text>
+                  <ExplorerLink value={address} type={addressType} />
+                </Flex>
+              )}
               <Flex gap={3} direction="column">
                 {unsupportedAssets.map((asset) => (
                   <UnsupportedToken
diff --git a/src/lib/pages/pool/components/PoolAssetDetail.tsx b/src/lib/pages/pool/components/PoolAssetDetail.tsx
new file mode 100644
index 000000000..7baf8d8d5
--- /dev/null
+++ b/src/lib/pages/pool/components/PoolAssetDetail.tsx
@@ -0,0 +1,53 @@
+import { Flex, Heading, Badge, Text } from "@chakra-ui/react";
+import type { Big } from "big.js";
+import big from "big.js";
+
+import { Loading } from "lib/components/Loading";
+import { useAssetInfos } from "lib/services/assetService";
+import type { USD } from "lib/types";
+import type { PoolLiquidity } from "lib/types/pool";
+import { calAssetValueWithPrecision, formatPrice } from "lib/utils";
+
+interface PoolAssetDetailProps {
+  assets: PoolLiquidity[];
+}
+export const PoolAssetDetail = ({ assets }: PoolAssetDetailProps) => {
+  const assetInfos = useAssetInfos();
+
+  if (!assetInfos) return <Loading />;
+
+  const liquidity = assets.reduce((total, asset) => {
+    const assetInfo = assetInfos[asset.denom];
+    return total.add(
+      assetInfo
+        ? calAssetValueWithPrecision({
+            amount: asset.amount,
+            id: assetInfo.id,
+            price: assetInfo.price,
+            precision: assetInfo.precision,
+          })
+        : (big(0) as USD<Big>)
+    ) as USD<Big>;
+  }, big(0) as USD<Big>);
+
+  return (
+    <Flex py={12} justifyContent="space-between">
+      <Flex gap={2} alignItems="center">
+        <Heading as="h6" variant="h6">
+          Pools
+        </Heading>
+        <Badge variant="gray" color="text.main" textColor="text.main">
+          {assets.length}
+        </Badge>
+      </Flex>
+      <Flex gap={2}>
+        <Text variant="body2" color="text.dark" fontWeight="600">
+          Total Liquidity:
+        </Text>
+        <Text variant="body2" color="text.main" fontWeight="600">
+          {formatPrice(liquidity)}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pool/components/PoolCard.tsx b/src/lib/pages/pool/components/PoolCard.tsx
index b7d13d8fa..d50d1d5d0 100644
--- a/src/lib/pages/pool/components/PoolCard.tsx
+++ b/src/lib/pages/pool/components/PoolCard.tsx
@@ -1,21 +1,173 @@
-import { Flex } from "@chakra-ui/react";
+import { Box, Flex, IconButton, Text, Tooltip } from "@chakra-ui/react";
+import big, { Big } from "big.js";
+import Link from "next/link";
+
+import { useInternalNavigate } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+import { Loading } from "lib/components/Loading";
+import { useAssetInfos } from "lib/services/assetService";
+import type { USD } from "lib/types";
+import type { PoolDetail } from "lib/types/pool";
+import {
+  calAssetValueWithPrecision,
+  formatPrice,
+  getTokenLabel,
+} from "lib/utils";
+import { formatPercentValue } from "lib/utils/formatter/formatPercentValue";
 
 import { PoolHeader } from "./PoolHeader";
 
-export const PoolCard = () => {
+interface PoolCardProps {
+  item: PoolDetail;
+  poolId: number;
+  mode: string;
+}
+const pebble700 = "pebble.700";
+
+export const PoolCard = ({
+  item,
+  poolId,
+  mode = "percent-value",
+}: PoolCardProps) => {
+  const navigate = useInternalNavigate();
+  const handleOnClick = () => {
+    navigate({ pathname: `/pool/[poolId]`, query: { poolId } });
+  };
+  const assetInfos = useAssetInfos();
+
+  if (!assetInfos) return <Loading />;
+
+  const liquidity = item.pool_liquidity.reduce((total, asset) => {
+    const assetInfo = assetInfos[asset.denom];
+    return total.add(
+      assetInfo
+        ? calAssetValueWithPrecision({
+            amount: asset.amount,
+            id: assetInfo.id,
+            price: assetInfo.price,
+            precision: assetInfo.precision,
+          })
+        : (big(0) as USD<Big>)
+    ) as USD<Big>;
+  }, big(0) as USD<Big>);
+
   return (
     <Flex
+      gap={4}
+      flexDirection="column"
+      onClick={handleOnClick}
       bg="pebble.900"
       borderRadius="8px"
-      _hover={{ bg: "pebble.800" }}
       p={4}
       transition="all .25s ease-in-out"
+      cursor="pointer"
+      sx={{
+        _hover: {
+          "> div:last-child > div": { backgroundColor: pebble700 },
+          backgroundColor: "pebble.800",
+        },
+      }}
     >
-      <PoolHeader />
-      {/* Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit explicabo
-      impedit fugiat cupiditate ullam facilis delectus quo molestias reiciendis,
-      non eveniet doloribus eaque. Maiores ipsam veniam accusamus cupiditate
-      tenetur dolore? */}
+      <Flex>
+        <PoolHeader
+          poolId={item.pool_id}
+          isSuperFluid={item.is_superfluid}
+          poolType={item.pool_type}
+          poolLiquidity={item.pool_liquidity}
+        />
+        <Flex w="72px" justifyContent="flex-end">
+          <Tooltip
+            hasArrow
+            label="See in osmosis.zone"
+            placement="top"
+            bg="honeydew.darker"
+            maxW="240px"
+          >
+            <Link href="/">
+              <IconButton
+                fontSize="24px"
+                variant="none"
+                aria-label="external"
+                _hover={{ backgroundColor: pebble700 }}
+                color="pebble.600"
+                icon={<CustomIcon name="external" />}
+              />
+            </Link>
+          </Tooltip>
+          <Tooltip
+            hasArrow
+            label="Pin to top"
+            placement="top"
+            bg="honeydew.darker"
+            maxW="240px"
+          >
+            <Flex>
+              <IconButton
+                fontSize="24px"
+                _hover={{ backgroundColor: pebble700 }}
+                variant="none"
+                aria-label="save"
+                color="pebble.600"
+                icon={<CustomIcon name="bookmark" />}
+              />
+            </Flex>
+          </Tooltip>
+        </Flex>
+      </Flex>
+      <Flex justifyContent="space-between">
+        <Flex alignItems="center">
+          <Text variant="body2" color="text.dark" fontWeight="600">
+            Liquidity
+          </Text>
+        </Flex>
+        <Text variant="body2" color="text.main">
+          {formatPrice(liquidity)}
+        </Text>
+      </Flex>
+      <Flex
+        gap="2px"
+        css={{
+          "div:first-of-type": {
+            borderRadius: "4px 0px 0px 4px",
+          },
+          "div:last-child": {
+            borderRadius: "0px 4px 4px 0px",
+          },
+        }}
+      >
+        {item.pool_liquidity.map((asset) => (
+          <Flex
+            bg="pebble.800"
+            px={3}
+            py={1}
+            w="full"
+            transition="all .25s ease-in-out"
+          >
+            <Box>
+              <Text variant="body3" color="text.dark" fontWeight="600">
+                {assetInfos?.[asset.denom]?.symbol ||
+                  getTokenLabel(asset.denom)}
+              </Text>
+              <Text variant="body3" color="text.main">
+                {mode === "percent-value"
+                  ? `${formatPercentValue(
+                      Big(
+                        calAssetValueWithPrecision({
+                          amount: asset.amount,
+                          id: assetInfos?.[asset.denom]?.id || "",
+                          price: assetInfos?.[asset.denom]?.price,
+                          precision: assetInfos?.[asset.denom]?.precision || 0,
+                        })
+                      )
+                        .div(liquidity)
+                        .times(100)
+                    )}`
+                  : `${asset.amount}`}
+              </Text>
+            </Box>
+          </Flex>
+        ))}
+      </Flex>
     </Flex>
   );
 };
diff --git a/src/lib/pages/pool/components/PoolDetailHeader.tsx b/src/lib/pages/pool/components/PoolDetailHeader.tsx
new file mode 100644
index 000000000..1450d5984
--- /dev/null
+++ b/src/lib/pages/pool/components/PoolDetailHeader.tsx
@@ -0,0 +1,240 @@
+import {
+  Button,
+  Flex,
+  Box,
+  IconButton,
+  Text,
+  Tag,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  Heading,
+  useDisclosure,
+  chakra,
+} from "@chakra-ui/react";
+import Big from "big.js";
+
+import { BackButton } from "lib/components/button";
+import { CustomIcon } from "lib/components/icon";
+import JsonReadOnly from "lib/components/json/JsonReadOnly";
+import type { PoolDetail } from "lib/types/pool";
+import { jsonPrettify } from "lib/utils";
+import { formatPercentValue } from "lib/utils/formatter/formatPercentValue";
+
+import { PoolHeader } from "./PoolHeader";
+
+interface PoolDetailHeaderProp {
+  pool: PoolDetail;
+}
+const unwrapScalingFactor = ({
+  scaling_factors,
+  scaling_factor_controller,
+}: PoolDetail) => ({
+  scaling_factors,
+  scaling_factor_controller,
+});
+
+const StyledTextLabel = chakra(Text, {
+  baseStyle: {
+    color: "text.dark",
+    fontSize: "14px",
+    fontWeight: "600",
+    letterSpacing: "0.1px",
+  },
+});
+const StyledTextContent = chakra(Text, {
+  baseStyle: {
+    color: "text.main",
+    letterSpacing: "0.1px",
+    fontSize: "14px",
+  },
+});
+export const PoolDetailHeader = ({ pool }: PoolDetailHeaderProp) => {
+  const {
+    isOpen: isModalWeightOpen,
+    onClose: onModalWeightClose,
+    onOpen: onModalWeightOpen,
+  } = useDisclosure();
+  const {
+    isOpen: isModalScalingOpen,
+    onClose: onModalScalingClose,
+    onOpen: onModalScalingOpen,
+  } = useDisclosure();
+  return (
+    <>
+      <BackButton />
+      <Flex mt={4} justifyContent="space-between" alignItems="flex-start">
+        <PoolHeader
+          poolId={pool.pool_id}
+          isSuperFluid={pool.is_superfluid}
+          poolType={pool.pool_type}
+          poolLiquidity={pool.pool_liquidity}
+        />
+        <Flex gap={2} alignItems="flex-start">
+          <Button
+            variant="ghost-gray"
+            rightIcon={
+              <CustomIcon name="external" boxSize={3} color="pebble.400" />
+            }
+          >
+            View in JSON
+          </Button>
+          <Button
+            variant="outline-primary"
+            rightIcon={
+              <CustomIcon name="external" boxSize={3} color="violet.light" />
+            }
+          >
+            View in Osmosis
+          </Button>
+          <IconButton
+            size="md"
+            _hover={{ backgroundColor: "pebble.700" }}
+            variant="none"
+            aria-label="save"
+            color="pebble.600"
+            icon={<CustomIcon name="bookmark" />}
+          />
+        </Flex>
+      </Flex>
+      <Flex
+        background="pebble.900"
+        borderRadius="8px"
+        px={4}
+        py={3}
+        gap={16}
+        mt={6}
+      >
+        <Flex flexDirection="column" gap={1}>
+          <StyledTextLabel> Pool ID</StyledTextLabel>
+          <StyledTextContent color="lilac.main">
+            {pool.pool_id}
+          </StyledTextContent>
+        </Flex>
+        <Flex flexDirection="column" gap={1}>
+          <StyledTextLabel> Swap Fee</StyledTextLabel>
+          <StyledTextContent>
+            {formatPercentValue(Big(pool.swap_fee).times(100))}
+          </StyledTextContent>
+        </Flex>
+        <Flex flexDirection="column" gap={1}>
+          <StyledTextLabel> Exit Fee</StyledTextLabel>
+          <StyledTextContent>
+            {formatPercentValue(Big(pool.exit_fee).times(100))}
+          </StyledTextContent>
+        </Flex>
+        <Flex flexDirection="column" gap={1}>
+          <StyledTextLabel>Future Governor</StyledTextLabel>
+          <Tag
+            borderRadius="full"
+            size="sm"
+            bg="pebble.700"
+            color="text.main"
+            w="fit-content"
+          >
+            {pool.future_pool_governor}
+          </Tag>
+        </Flex>
+        {pool.smooth_weight_change_params && (
+          <Flex flexDirection="column" gap={1}>
+            <StyledTextLabel> Smooth weight change params</StyledTextLabel>
+            <StyledTextContent
+              onClick={onModalWeightOpen}
+              color="lilac.main"
+              cursor="pointer"
+              _hover={{ color: "lilac.light" }}
+              transition="all .25s ease-in-out"
+            >
+              View JSON
+              <CustomIcon name="chevron-right" boxSize={3} color="lilac.main" />
+            </StyledTextContent>
+
+            <Modal
+              isOpen={isModalWeightOpen}
+              onClose={onModalWeightClose}
+              isCentered
+              size="4xl"
+            >
+              <ModalOverlay />
+              <ModalContent w="840px">
+                <ModalHeader>
+                  <CustomIcon name="code" boxSize="6" />
+                  <Heading as="h5" variant="h5">
+                    Smooth weight change params
+                  </Heading>
+                </ModalHeader>
+                <ModalCloseButton color="pebble.600" />
+                <ModalBody p={4} maxH="640px" overflow="scroll">
+                  <Box
+                    bgColor="background.main"
+                    borderRadius="8px"
+                    position="relative"
+                  >
+                    <JsonReadOnly
+                      text={jsonPrettify(
+                        JSON.stringify(pool.smooth_weight_change_params)
+                      )}
+                      canCopy
+                      showLines={16}
+                    />
+                  </Box>
+                </ModalBody>
+              </ModalContent>
+            </Modal>
+          </Flex>
+        )}
+        {pool.scaling_factors && (
+          <Flex flexDirection="column" gap={1}>
+            <StyledTextLabel>Scaling Factor</StyledTextLabel>
+            <StyledTextContent
+              onClick={onModalScalingOpen}
+              color="lilac.main"
+              cursor="pointer"
+              _hover={{ color: "lilac.light" }}
+              transition="all .25s ease-in-out"
+            >
+              View JSON
+              <CustomIcon name="chevron-right" boxSize={3} color="lilac.main" />
+            </StyledTextContent>
+
+            <Modal
+              isOpen={isModalScalingOpen}
+              onClose={onModalScalingClose}
+              isCentered
+              size="4xl"
+            >
+              <ModalOverlay />
+              <ModalContent w="840px">
+                <ModalHeader>
+                  <CustomIcon name="code" boxSize="6" />
+                  <Heading as="h5" variant="h5">
+                    Scaling Factor
+                  </Heading>
+                </ModalHeader>
+                <ModalCloseButton color="pebble.600" />
+                <ModalBody p={4} maxH="640px" overflow="scroll">
+                  <Box
+                    bgColor="background.main"
+                    borderRadius="8px"
+                    position="relative"
+                  >
+                    <JsonReadOnly
+                      text={jsonPrettify(
+                        JSON.stringify(unwrapScalingFactor(pool))
+                      )}
+                      canCopy
+                      showLines={16}
+                    />
+                  </Box>
+                </ModalBody>
+              </ModalContent>
+            </Modal>
+          </Flex>
+        )}
+      </Flex>
+    </>
+  );
+};
diff --git a/src/lib/pages/pool/components/PoolHeader.tsx b/src/lib/pages/pool/components/PoolHeader.tsx
index 0d874f8a0..f6240ade0 100644
--- a/src/lib/pages/pool/components/PoolHeader.tsx
+++ b/src/lib/pages/pool/components/PoolHeader.tsx
@@ -1,76 +1,58 @@
-import { Flex, Heading, Text, Box, Image, IconButton } from "@chakra-ui/react";
-import Link from "next/link";
+import { Flex, Heading, Text, Box, Image } from "@chakra-ui/react";
 
-import { CustomIcon } from "lib/components/icon";
+import { useAssetInfos } from "lib/services/assetService";
+import type { PoolDetail } from "lib/types/pool";
+import { getTokenLabel } from "lib/utils";
 
 import { PoolLogo } from "./PoolLogo";
 
-export const PoolHeader = () => {
-  const mockPool = {
-    "@type": "/osmosis.gamm.v1beta1.Pool",
-    address: "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn",
-    id: "31",
-    pool_params: {
-      swap_fee: "0.030000000000000000",
-      exit_fee: "0.000000000000000000",
-      smooth_weight_change_params: null,
-    },
-    future_pool_governor: "24h",
-    total_shares: {
-      denom: "gamm/pool/31",
-      amount: "100000000000000000",
-    },
-    pool_assets: [
-      {
-        token: {
-          denom: "ibc/1DC...76",
-          amount: "3053",
-        },
-        weight: "268435456000000",
-      },
-      // {
-      //   token: {
-      //     denom: "ibc/2734F...5EB2",
-      //     amount: "127",
-      //   },
-      //   weight: "268435456000000",
-      // },
-      {
-        token: {
-          denom: "ibc/A0CC...A9293",
-          amount: "9226",
-        },
-        weight: "268435456000000",
-      },
-      {
-        token: {
-          denom: "uosmo",
-          amount: "2825",
-        },
-        weight: "268435456000000",
-      },
-    ],
-    total_weight: "1073741824000000",
-  };
+interface PoolHeaderProps {
+  poolId: PoolDetail["pool_id"];
+  isSuperFluid: PoolDetail["is_superfluid"];
+  poolType: PoolDetail["pool_type"];
+  poolLiquidity: PoolDetail["pool_liquidity"];
+}
+export const PoolHeader = ({
+  poolId,
+  isSuperFluid,
+  poolType,
+  poolLiquidity,
+}: PoolHeaderProps) => {
+  const assetInfos = useAssetInfos();
 
   return (
     <Flex justifyContent="space-between" w="full">
       <Flex alignItems="center" gap={4}>
-        <PoolLogo />
+        <PoolLogo poolLiquidity={poolLiquidity} />
         <Box>
-          <Flex
-            gap={1}
-            css={{
-              "h6:last-child": {
-                display: "none",
-              },
-            }}
-          >
-            {mockPool.pool_assets.map((item) => (
+          <Flex gap={1}>
+            <Flex
+              gap={1}
+              css={{
+                "h6:last-child": {
+                  display: "none",
+                },
+              }}
+            >
+              {poolLiquidity.slice(0, 4).map((item) => (
+                <>
+                  <Heading as="h6" fontWeight="600" variant="h6">
+                    {assetInfos?.[item.denom]?.symbol ||
+                      getTokenLabel(item.denom)}
+                  </Heading>
+                  <Heading
+                    as="h6"
+                    fontWeight="600"
+                    variant="h6"
+                    color="honeydew.main"
+                  >
+                    /
+                  </Heading>
+                </>
+              ))}
+            </Flex>
+            {poolLiquidity.length > 4 && (
               <>
-                <Heading as="h6" fontWeight="600" variant="h6">
-                  {item.token.denom}
-                </Heading>
                 <Heading
                   as="h6"
                   fontWeight="600"
@@ -79,91 +61,63 @@ export const PoolHeader = () => {
                 >
                   /
                 </Heading>
+                <Heading as="h6" fontWeight="600" variant="h6">
+                  + {poolLiquidity.length - 4}
+                </Heading>
               </>
-            ))}
+            )}
           </Flex>
-          <Flex alignItems="center" gap={2}>
+          <Flex alignItems="center" gap={2} mt={1}>
             <Text variant="body2" color="lilac.main">
-              #{mockPool.id}
+              #{poolId}
             </Text>
-            <Flex alignItems="center" gap={2}>
-              <Flex
-                backgroundColor="pebble.600"
-                borderRadius="full"
-                w="6px"
-                h="6px"
-              />
-              <Flex alignItems="center" gap={1}>
-                <Image
-                  boxSize={4}
-                  src="https://assets.alleslabs.dev/webapp-assets/pool/pool-balancer.svg"
+            {poolType && (
+              <Flex alignItems="center" gap={2}>
+                <Flex
+                  backgroundColor="pebble.600"
+                  borderRadius="full"
+                  w="6px"
+                  h="6px"
                 />
-                <Text variant="body2" color="text.dark">
-                  Balancer Pool
-                </Text>
+                <Flex alignItems="center" gap={1}>
+                  <Image
+                    boxSize={4}
+                    src={
+                      poolType === "Balancer"
+                        ? "https://assets.alleslabs.dev/webapp-assets/pool/pool-balancer.svg"
+                        : "https://assets.alleslabs.dev/webapp-assets/pool/pool-stableswap.svg"
+                    }
+                  />
+                  <Text variant="body2" color="text.dark">
+                    {poolType === "Balancer"
+                      ? "Balancer Pool"
+                      : "StableSwap Pool"}
+                  </Text>
+                </Flex>
               </Flex>
-            </Flex>
-            <Flex alignItems="center" gap={2}>
-              <Flex
-                backgroundColor="pebble.600"
-                borderRadius="full"
-                w="6px"
-                h="6px"
-              />
-              <Flex alignItems="center" gap={1}>
-                <Image
-                  boxSize={4}
-                  src="https://assets.alleslabs.dev/webapp-assets/pool/pool-superfluid.svg"
+            )}
+            {isSuperFluid && (
+              <Flex alignItems="center" gap={2}>
+                <Flex
+                  backgroundColor="pebble.600"
+                  borderRadius="full"
+                  w="6px"
+                  h="6px"
                 />
-                <Text variant="body2" color="text.dark">
-                  Superfluid
-                </Text>
+                <Flex alignItems="center" gap={1}>
+                  <Image
+                    boxSize={4}
+                    src="https://assets.alleslabs.dev/webapp-assets/pool/pool-superfluid.svg"
+                  />
+                  <Text variant="body2" color="text.dark">
+                    Superfluid
+                  </Text>
+                </Flex>
               </Flex>
-            </Flex>
-            {/* {mockPool.isSuperfluid && (
-            <Flex alignItems="center" gap={2}>
-              <Flex
-                backgroundColor="pebble.600"
-                borderRadius="full"
-                w="6px"
-                h="6px"
-              />
-              <Flex alignItems="center" gap={1}>
-                <Image
-                  boxSize={4}
-                  src="https://assets.alleslabs.dev/webapp-assets/pool/pool-superfluid.svg"
-                />
-                <Text variant="body2" color="text.dark">
-                  Superfluid
-                </Text>
-              </Flex>
-            </Flex>
-          )} */}
+            )}
           </Flex>
         </Box>
       </Flex>
-      <Flex w="72px" justifyContent="flex-end">
-        <Link href="/">
-          <IconButton
-            fontSize="24px"
-            variant="none"
-            aria-label="external"
-            _hover={{ backgroundColor: "pebble.700" }}
-            color="pebble.600"
-            icon={<CustomIcon name="external" />}
-          />
-        </Link>
-        <Flex>
-          <IconButton
-            fontSize="24px"
-            _hover={{ backgroundColor: "pebble.700" }}
-            variant="none"
-            aria-label="save"
-            color="pebble.600"
-            icon={<CustomIcon name="bookmark" />}
-          />
-        </Flex>
-      </Flex>
     </Flex>
   );
 };
diff --git a/src/lib/pages/pool/components/PoolList.tsx b/src/lib/pages/pool/components/PoolList.tsx
index de1befeb4..49015b452 100644
--- a/src/lib/pages/pool/components/PoolList.tsx
+++ b/src/lib/pages/pool/components/PoolList.tsx
@@ -10,12 +10,17 @@ import { useState } from "react";
 
 import { CustomIcon } from "lib/components/icon";
 import { ToggleWithName } from "lib/components/ToggleWithName";
+import type { PoolDetail } from "lib/types/pool";
 
 import { PoolCard } from "./PoolCard";
 
-export const PoolList = () => {
+interface PoolListProp {
+  pools: PoolDetail[];
+}
+export const PoolList = ({ pools }: PoolListProp) => {
   const [showNewest, setShowNewest] = useState(true);
   const [toggle, setToggle] = useState("percent-value");
+
   const options = [
     {
       label: "%Value",
@@ -26,15 +31,16 @@ export const PoolList = () => {
       value: "amount",
     },
   ];
+
   return (
     <>
       <Flex alignItems="center" justifyContent="space-between">
-        <Flex gap={2} h="29px" alignItems="center">
+        <Flex gap={2} alignItems="center">
           <Heading as="h6" variant="h6">
             Pools
           </Heading>
           <Badge variant="gray" color="text.main" textColor="text.main">
-            12
+            {pools.length}
           </Badge>
         </Flex>
         <Flex gap={4}>
@@ -76,8 +82,15 @@ export const PoolList = () => {
           </Flex>
         </Flex>
       </Flex>
-      <SimpleGrid columns={{ sm: 1, md: 2 }} spacing={4} w="full">
-        <PoolCard /> <PoolCard /> <PoolCard /> <PoolCard />
+      <SimpleGrid columns={{ sm: 1, md: 2 }} spacing={4} w="full" mt={4}>
+        {pools.map((item) => (
+          <PoolCard
+            key={item.pool_id}
+            item={item}
+            poolId={item.pool_id}
+            mode={toggle}
+          />
+        ))}
       </SimpleGrid>
     </>
   );
diff --git a/src/lib/pages/pool/components/PoolLogo.tsx b/src/lib/pages/pool/components/PoolLogo.tsx
index 4e3c1a68a..f53a411b0 100644
--- a/src/lib/pages/pool/components/PoolLogo.tsx
+++ b/src/lib/pages/pool/components/PoolLogo.tsx
@@ -1,11 +1,16 @@
 import { Flex, Image } from "@chakra-ui/react";
 
-export const PoolLogo = () => {
-  const list = [
-    "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet.svg",
-    "https://assets.alleslabs.dev/webapp-assets/asset/undefined-white.svg",
-    // "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet-light.svg",
-  ];
+import { useAssetInfos } from "lib/services/assetService";
+import type { PoolDetail } from "lib/types/pool";
+
+import { UndefinedTokenList } from "./constant";
+
+interface PoolLogoProps {
+  poolLiquidity: PoolDetail["pool_liquidity"];
+}
+export const PoolLogo = ({ poolLiquidity }: PoolLogoProps) => {
+  const assetInfos = useAssetInfos();
+
   return (
     <Flex
       css={{
@@ -17,19 +22,41 @@ export const PoolLogo = () => {
       alignItems="center"
       justifyContent="center"
     >
-      {list.map((url, i) => (
-        <Image boxSize={10} src={url} zIndex={i * -1 + 2} />
-      ))}
-      <Flex
-        width={10}
-        height={10}
-        borderRadius="full"
-        backgroundColor="pebble.700"
-        alignItems="center"
-        justifyContent="center"
-      >
-        +1
-      </Flex>
+      {poolLiquidity.length > 3 ? (
+        <>
+          {poolLiquidity.slice(0, 2).map((item, i) => (
+            <Image
+              boxSize={10}
+              src={
+                assetInfos?.[item.denom]?.logo ||
+                UndefinedTokenList[i % UndefinedTokenList.length]
+              }
+              zIndex={i * -1 + 2}
+            />
+          ))}
+          <Flex
+            width={10}
+            height={10}
+            borderRadius="full"
+            backgroundColor="pebble.700"
+            alignItems="center"
+            justifyContent="center"
+          >
+            +{poolLiquidity.length - 2}
+          </Flex>
+        </>
+      ) : (
+        poolLiquidity.map((asset, i) => (
+          <Image
+            boxSize={10}
+            src={
+              assetInfos?.[asset.denom]?.logo ||
+              UndefinedTokenList[i % UndefinedTokenList.length]
+            }
+            zIndex={i * -1 + 2}
+          />
+        ))
+      )}
     </Flex>
   );
 };
diff --git a/src/lib/pages/pool/components/UnsupportedPoolCard.tsx b/src/lib/pages/pool/components/UnsupportedPoolCard.tsx
new file mode 100644
index 000000000..9898fe0bc
--- /dev/null
+++ b/src/lib/pages/pool/components/UnsupportedPoolCard.tsx
@@ -0,0 +1,168 @@
+import {
+  Flex,
+  IconButton,
+  Tooltip,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  chakra,
+  Text,
+  Image,
+  Button,
+} from "@chakra-ui/react";
+import Link from "next/link";
+
+import { useInternalNavigate } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+import { useAssetInfos } from "lib/services/assetService";
+import type { PoolDetail } from "lib/types/pool";
+import { getTokenLabel } from "lib/utils";
+
+import { UndefinedTokenList } from "./constant";
+import { PoolHeader } from "./PoolHeader";
+
+interface PoolCardProps {
+  item: PoolDetail;
+  poolId: number;
+}
+const StyledIconButton = chakra(IconButton, {
+  baseStyle: {
+    display: "flex",
+    alignItems: "center",
+    fontSize: "24px",
+    color: "pebble.600",
+  },
+});
+
+const pebble700 = "pebble.700";
+
+export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
+  const navigate = useInternalNavigate();
+  const handleOnClick = () => {
+    navigate({ pathname: `/pool/[poolId]`, query: { poolId } });
+  };
+  const assetInfos = useAssetInfos();
+
+  return (
+    <AccordionItem
+      mt={4}
+      bg="pebble.900"
+      _hover={{ bg: "pebble.800" }}
+      transition="all .25s ease-in-out"
+      cursor="pointer"
+    >
+      {({ isExpanded }) => (
+        <>
+          <h2>
+            <AccordionButton>
+              <Flex gap={4} flexDirection="column" p={4} w="full">
+                <Flex alignItems="center" justifyContent="space-between">
+                  <PoolHeader
+                    poolId={poolId}
+                    isSuperFluid={item.is_superfluid}
+                    poolType={item.pool_type}
+                    poolLiquidity={item.pool_liquidity}
+                  />
+                  <Flex w="128px">
+                    <Tooltip
+                      hasArrow
+                      label="See in osmosis.zone"
+                      placement="top"
+                      bg="honeydew.darker"
+                      maxW="240px"
+                    >
+                      <Link href="/">
+                        <StyledIconButton
+                          variant="none"
+                          aria-label="external"
+                          _hover={{ backgroundColor: pebble700 }}
+                          icon={<CustomIcon name="external" />}
+                        />
+                      </Link>
+                    </Tooltip>
+                    <Tooltip
+                      hasArrow
+                      label="Pin to top"
+                      placement="top"
+                      bg="honeydew.darker"
+                      maxW="240px"
+                    >
+                      <Flex>
+                        <StyledIconButton
+                          _hover={{ backgroundColor: pebble700 }}
+                          variant="none"
+                          aria-label="save"
+                          icon={<CustomIcon name="bookmark" />}
+                        />
+                      </Flex>
+                    </Tooltip>
+                    {isExpanded ? (
+                      <StyledIconButton
+                        variant="none"
+                        aria-label="external"
+                        _hover={{ backgroundColor: pebble700 }}
+                        icon={<CustomIcon name="chevron-up" />}
+                      />
+                    ) : (
+                      <StyledIconButton
+                        variant="none"
+                        aria-label="external"
+                        _hover={{ backgroundColor: pebble700 }}
+                        icon={<CustomIcon name="chevron-down" />}
+                      />
+                    )}
+                  </Flex>
+                </Flex>
+              </Flex>
+            </AccordionButton>
+          </h2>
+          <AccordionPanel pb={4}>
+            <Flex>
+              <Text
+                color="text.dark"
+                variant="body2"
+                fontWeight="600"
+                w="144px"
+              >
+                Tokens in Pool
+              </Text>
+              <Flex gap={4} flexDirection="column">
+                <Flex gap={2} flexDirection="column">
+                  {item.pool_liquidity.map((asset, i) => (
+                    <Flex gap={3}>
+                      <Image
+                        boxSize={6}
+                        src={
+                          assetInfos?.[asset.denom]?.logo ||
+                          UndefinedTokenList[i % UndefinedTokenList.length]
+                        }
+                      />
+                      <Flex>
+                        {assetInfos?.[asset.denom]?.symbol ||
+                          getTokenLabel(asset.denom)}
+                      </Flex>
+                    </Flex>
+                  ))}
+                </Flex>
+                <Flex gap={3}>
+                  <Button onClick={handleOnClick} size="sm">
+                    View Pool Details
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline-primary"
+                    rightIcon={
+                      <CustomIcon name="external" color="outline-primary" />
+                    }
+                  >
+                    View in Osmosis
+                  </Button>
+                </Flex>
+              </Flex>
+            </Flex>
+          </AccordionPanel>
+        </>
+      )}
+    </AccordionItem>
+  );
+};
diff --git a/src/lib/pages/pool/components/UnsupportedPoolList.tsx b/src/lib/pages/pool/components/UnsupportedPoolList.tsx
index 00ade051a..098466030 100644
--- a/src/lib/pages/pool/components/UnsupportedPoolList.tsx
+++ b/src/lib/pages/pool/components/UnsupportedPoolList.tsx
@@ -1,34 +1,61 @@
-import { Badge, Button, Flex, Heading, Text } from "@chakra-ui/react";
+import {
+  Accordion,
+  Badge,
+  Button,
+  Flex,
+  Heading,
+  SimpleGrid,
+  Text,
+} from "@chakra-ui/react";
 
 import { CustomIcon } from "lib/components/icon";
+import type { PoolDetail } from "lib/types/pool";
 
-export const UnsupportedPoolList = () => {
+import { UnsupportedPoolCard } from "./UnsupportedPoolCard";
+
+interface UnsupportedPoolListProp {
+  pools: PoolDetail[];
+}
+export const UnsupportedPoolList = ({ pools }: UnsupportedPoolListProp) => {
   return (
-    <Flex alignItems="center" justifyContent="space-between">
-      <Flex gap={2} h="29px" alignItems="center">
-        <Heading as="h6" variant="h6">
-          Pools with unsupported tokens
-        </Heading>
-        <Badge variant="gray" color="text.main" textColor="text.main">
-          12
-        </Badge>
-      </Flex>
-      <Flex gap={4}>
-        <Flex gap="2" alignItems="center">
-          <Text variant="body2" color="text.dark">
-            Sort Pool ID:
-          </Text>
-          <Button variant="outline-gray" size="sm" pr="1">
-            Newest First
-            <CustomIcon name="arrow-down" color="text.dark" />
-          </Button>
+    <>
+      <Flex alignItems="center" justifyContent="space-between" h="32px">
+        <Flex gap={2} alignItems="center">
+          <Heading as="h6" variant="h6">
+            Pools with unsupported tokens
+          </Heading>
+          <Badge variant="gray" color="text.main" textColor="text.main">
+            {pools.length}
+          </Badge>
         </Flex>
-        <Flex gap="2" alignItems="center">
-          <Button variant="outline-gray" size="sm" pr="1">
-            Expand All
-          </Button>
+        <Flex gap={4}>
+          <Flex gap="2" alignItems="center">
+            <Text variant="body2" color="text.dark">
+              Sort Pool ID:
+            </Text>
+            <Button variant="outline-gray" size="sm" pr="1">
+              Newest First
+              <CustomIcon name="arrow-down" color="text.dark" />
+            </Button>
+          </Flex>
+          <Flex gap="2" alignItems="center">
+            <Button variant="outline-gray" size="sm">
+              Expand All
+            </Button>
+          </Flex>
         </Flex>
       </Flex>
-    </Flex>
+      <SimpleGrid columns={1} spacing={4} w="full">
+        <Accordion allowMultiple>
+          {pools.map((item) => (
+            <UnsupportedPoolCard
+              key={item.pool_id}
+              item={item}
+              poolId={item.pool_id}
+            />
+          ))}
+        </Accordion>
+      </SimpleGrid>
+    </>
   );
 };
diff --git a/src/lib/pages/pool/components/constant.ts b/src/lib/pages/pool/components/constant.ts
new file mode 100644
index 000000000..e812ee860
--- /dev/null
+++ b/src/lib/pages/pool/components/constant.ts
@@ -0,0 +1,422 @@
+export const UndefinedTokenList = [
+  "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet.svg",
+  "https://assets.alleslabs.dev/webapp-assets/asset/undefined-white.svg",
+  "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet-light.svg",
+];
+export const MockUpPoolList = [
+  {
+    pool_id: 31,
+    pool_liquidity: [
+      {
+        denom:
+          "ibc/D38FD4C586C397DDAAB715C654DAEE3C3C40462CD410254AC7576208E947605B",
+        amount: "3000000990",
+      },
+      {
+        denom:
+          "ibc/0BE7C3DAC50BB1C34565C76F01944DCC79B50CF359B63149B9E04E2A6736A6E6",
+        amount: "1299997",
+      },
+      {
+        denom: "uion",
+        amount: "92330032",
+      },
+      {
+        denom: "uosmo",
+        amount: "2850",
+      },
+    ],
+    pool_type: "Balancer",
+    is_superfluid: false,
+    is_supported: true,
+    swap_fee: "0.03000000000000000",
+    exit_fee: "0.0020000000000000",
+    future_pool_governor: "24h",
+    smooth_weight_change_params: {
+      start_time: "2023-03-09T16:35:41Z",
+      duration: "1209600s",
+      initial_pool_weights: [
+        {
+          token: {
+            denom:
+              "factory/osmo15d4apf20449ajvwycq8ruaypt7v6d345z36n9l/factory",
+            amount: "0",
+          },
+          weight: "2147483648",
+        },
+        {
+          token: {
+            denom: "stake",
+            amount: "0",
+          },
+          weight: "1073741824",
+        },
+      ],
+      target_pool_weights: [
+        {
+          token: {
+            denom:
+              "factory/osmo15d4apf20449ajvwycq8ruaypt7v6d345z36n9l/factory",
+            amount: "20",
+          },
+          weight: "1073741824",
+        },
+        {
+          token: {
+            denom: "stake",
+            amount: "10",
+          },
+          weight: "1073741824",
+        },
+      ],
+    },
+    scaling_factors: null,
+    scaling_factor_controller: null,
+    weight: [
+      {
+        denom:
+          "ibc/D38FD4C586C397DDAAB715C654DAEE3C3C40462CD410254AC7576208E947605B",
+        weight: "268435456000000",
+      },
+      {
+        denom:
+          "ibc/0BE7C3DAC50BB1C34565C76F01944DCC79B50CF359B63149B9E04E2A6736A6E6",
+        weight: "268435456000000",
+      },
+      {
+        denom: "uion",
+        weight: "268435456000000",
+      },
+      {
+        denom: "uosmo",
+        weight: "268435456000000",
+      },
+    ],
+    address: "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn",
+    total_shares: {
+      denom: "gamm/pool/983",
+      amount: "100000000000000000000",
+    },
+  },
+  {
+    pool_id: 231,
+    pool_liquidity: [
+      {
+        denom:
+          "ibc/ACA4C8A815A053CC027DB90D15915ADA31939FA331CE745862CDD00A2904FA17",
+        amount: "3053",
+      },
+      {
+        denom:
+          "ibc/F89E34457F34F306592D4EFB8692406D49D4E2B5C70F725F127862E22CE6BDCD",
+        amount: "127",
+      },
+      {
+        denom: "uosmo",
+        amount: "3053",
+      },
+      {
+        denom:
+          "ibc/7186C4B1A0596A1AB34C201E27D659B4A9837B46A328BCE5C0E452CD7146BC8F",
+        amount: "1000",
+      },
+      {
+        denom: "uion",
+        amount: "1000",
+      },
+    ],
+    pool_type: "Balancer",
+    is_superfluid: true,
+    is_supported: true,
+    swap_fee: "0.0300000000000000",
+    exit_fee: "0.000000000001",
+    future_pool_governor: "24h",
+    smooth_weight_change_params: null,
+    scaling_factors: null,
+    scaling_factor_controller: null,
+    weight: [
+      {
+        denom:
+          "ibc/ACA4C8A815A053CC027DB90D15915ADA31939FA331CE745862CDD00A2904FA17",
+        weight: "268435456000000",
+      },
+      {
+        denom:
+          "ibc/FF3065989E34457F342D4EFB8692406D49D4E2B5C70F725F127862E22CE6BDCD",
+        weight: "268435456000000",
+      },
+      {
+        denom: "uosmo",
+        weight: "268435456000000",
+      },
+      {
+        denom:
+          "ibc/7186C4B1A0596A1AB34C201E27D659B4A9837B46A328BCE5C0E452CD7146BC8F",
+        weight: "268435456000000",
+      },
+      {
+        denom: "uion",
+        weight: "268435456000000",
+      },
+    ],
+    address: "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn",
+    total_shares: {
+      denom: "gamm/pool/343",
+      amount: "100000000000000000000",
+    },
+  },
+  {
+    pool_id: 932,
+    pool_liquidity: [
+      {
+        denom: "uion",
+        amount: "81386211729",
+      },
+      {
+        denom: "uosmo",
+        amount: "99224517983",
+      },
+    ],
+    pool_type: "Stableswap",
+    is_superfluid: true,
+    is_supported: true,
+    swap_fee: "0.00040000000000000",
+    exit_fee: "0.00000000000000000",
+    future_pool_governor: "24h",
+    smooth_weight_change_params: null,
+    scaling_factors: ["1", "1"],
+    scaling_factor_controller: "",
+    weight: null,
+    address: "osmo1kxnekx4q8yem6wvp5t9ggqvhuxaqw7san00x5qdazp3fe597f8hsqft4nq",
+    total_shares: {
+      denom: "gamm/pool/383",
+      amount: "100000000000000000000",
+    },
+  },
+  {
+    pool_id: 872,
+    pool_liquidity: [
+      {
+        denom:
+          "ibc/FF3065989E34457F342D4EFB8692406D49D4E2B5C70F725F127862E22CE6BDCD",
+        amount: "21181386729",
+      },
+      {
+        denom:
+          "ibc/F9E624EB89ABEE4CB1EC04D7941F613BD8383EE7DE323589A82066D0345EF6EB",
+        amount: "17983992245",
+      },
+      {
+        denom: "uosmo",
+        amount: "17983992245",
+      },
+    ],
+    pool_type: "Stableswap",
+    is_superfluid: false,
+    is_supported: true,
+    swap_fee: "0.0004000000000000",
+    exit_fee: "0.0000000000000000",
+    future_pool_governor: "24h",
+    smooth_weight_change_params: null,
+    scaling_factors: ["1", "1", "1"],
+    scaling_factor_controller: "",
+    weight: null,
+    address: "osmo1kxnekx4q8yem6wvp5t9ggqvhuxaqw7san00x5qdazp3fe597f8hsqft4nq",
+    total_shares: {
+      denom: "gamm/pool/483",
+      amount: "100000000000000000000",
+    },
+  },
+  {
+    pool_id: 21,
+    pool_liquidity: [
+      {
+        denom:
+          "ibc/62CD410254AC7576208E947605BD38FD4C586C397DDAAB715C654DAEE3C3C404",
+        amount: "3053",
+      },
+      {
+        denom:
+          "ibc/CC79B50CF359B63149B9E04E2A6736A6E60BE7C3DAC50BB1C34565C76F01944D",
+        amount: "127",
+      },
+      {
+        denom:
+          "ibc/CF359B63149B9E04E2A67CC79B5036A6E60BE7C3DAC50BB1C34565C76F01944D",
+        amount: "9226",
+      },
+      {
+        denom:
+          "ibc/CFC3DAC50BB1C3456359B63149B9E04E2A67CC79B5036A6E60BE75C76F01944D",
+        amount: "2825",
+      },
+    ],
+    pool_type: "Balancer",
+    is_superfluid: false,
+    is_supported: false,
+    swap_fee: "0.030000000000000000",
+    exit_fee: "0.0000000000000000",
+    future_pool_governor: "24h",
+    smooth_weight_change_params: null,
+    scaling_factors: null,
+    scaling_factor_controller: null,
+    weight: [
+      {
+        denom:
+          "ibc/62CD410254AC7576208E947605BD38FD4C586C397DDAAB715C654DAEE3C3C404",
+        weight: "268435456000000",
+      },
+      {
+        denom:
+          "ibc/CC79B50CF359B63149B9E04E2A6736A6E60BE7C3DAC50BB1C34565C76F01944D",
+        weight: "268435456000000",
+      },
+      {
+        denom:
+          "ibc/CF359B63149B9E04E2A67CC79B5036A6E60BE7C3DAC50BB1C34565C76F01944D",
+        weight: "268435456000000",
+      },
+      {
+        denom:
+          "ibc/CFC3DAC50BB1C3456359B63149B9E04E2A67CC79B5036A6E60BE75C76F01944D",
+        weight: "268435456000000",
+      },
+    ],
+    address: "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn",
+    total_shares: {
+      denom: "gamm/pool/983",
+      amount: "100000000000000000000",
+    },
+  },
+  {
+    pool_id: 221,
+    pool_liquidity: [
+      {
+        denom:
+          "ibc/ACA4C90D15915ADA31939FA331CE745862CDD00A2904FA178A815A053CC027DB",
+        amount: "3053",
+      },
+      {
+        denom: "uosmo",
+        amount: "127",
+      },
+      {
+        denom:
+          "ibc/725F127862E22CE6BDCDF70FF3065989E34457F342D4EFB8692406D49D4E2B5C",
+        amount: "3053",
+      },
+      {
+        denom:
+          "ibc/6C4B1A0596A1AB34C201E27D659B4A9837B46A328BCE5C0E452CD7146BC7188F",
+        amount: "1000",
+      },
+      {
+        denom: "uion",
+        amount: "1000",
+      },
+    ],
+    pool_type: "Balancer",
+    is_superfluid: true,
+    is_supported: false,
+    swap_fee: "0.030000000000000000",
+    exit_fee: "0.000000000001",
+    future_pool_governor: "24h",
+    smooth_weight_change_params: null,
+    scaling_factors: null,
+    scaling_factor_controller: null,
+    weight: [
+      {
+        denom:
+          "ibc/ACA4C90D15915ADA31939FA331CE745862CDD00A2904FA178A815A053CC027DB",
+        weight: "268435456000000",
+      },
+      {
+        denom: "uosmo",
+        weight: "268435456000000",
+      },
+      {
+        denom:
+          "ibc/725F127862E22CE6BDCDF70FF3065989E34457F342D4EFB8692406D49D4E2B5C",
+        weight: "268435456000000",
+      },
+      {
+        denom:
+          "ibc/6C4B1A0596A1AB34C201E27D659B4A9837B46A328BCE5C0E452CD7146BC7188F",
+        weight: "268435456000000",
+      },
+      {
+        denom: "uion",
+        weight: "268435456000000",
+      },
+    ],
+    address: "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn",
+    total_shares: {
+      denom: "gamm/pool/383",
+      amount: "100000000000000000000",
+    },
+  },
+  {
+    pool_id: 941,
+    pool_liquidity: [
+      {
+        denom:
+          "ibc/6CC201E27D659B4A9837B46A328BC4B1A0596A1AB34E5C0E452CD7146BC7188F",
+        amount: "81386211729",
+      },
+      {
+        denom:
+          "ibc/9837B46A328BC4B6CC201E27D659B4A1A0596A1AB34E5C0E452CD7146BC7188F",
+        amount: "99224517983",
+      },
+    ],
+    pool_type: "Stableswap",
+    is_superfluid: true,
+    is_supported: false,
+    swap_fee: "0.000400000000000000",
+    exit_fee: "0.000000000000000000",
+    future_pool_governor: "24h",
+    smooth_weight_change_params: null,
+    scaling_factors: ["1", "1"],
+    scaling_factor_controller: "",
+    weight: null,
+    address: "osmo1kxnekx4q8yem6wvp5t9ggqvhuxaqw7san00x5qdazp3fe597f8hsqft4nq",
+    total_shares: {
+      denom: "gamm/pool/783",
+      amount: "100000000000000000000",
+    },
+  },
+  {
+    pool_id: 372,
+    pool_liquidity: [
+      {
+        denom:
+          "ibc/42D4EFB8692406FF3065989E34457F3D49D4E2B5C70F725F127862E22CE6BDCD",
+        amount: "21181386729",
+      },
+      {
+        denom:
+          "ibc/ABEE4CB1EC04D7941F9E624EB89F613BD8383EE7DE323589A82066D0345EF6EB",
+        amount: "17983992245",
+      },
+      {
+        denom: "uion",
+        amount: "17983992245",
+      },
+    ],
+    pool_type: "Stableswap",
+    is_superfluid: false,
+    is_supported: false,
+    swap_fee: "0.000400000000000000",
+    exit_fee: "0.000000000000000000",
+    future_pool_governor: "24h",
+    smooth_weight_change_params: null,
+    scaling_factors: ["1", "1", "1"],
+    scaling_factor_controller: "",
+    weight: null,
+    address: "osmo1kxnekx4q8yem6wvp5t9ggqvhuxaqw7san00x5qdazp3fe597f8hsqft4nq",
+    total_shares: {
+      denom: "gamm/pool/783",
+      amount: "100000000000000000000",
+    },
+  },
+];
diff --git a/src/lib/pages/pool/index.tsx b/src/lib/pages/pool/index.tsx
index 58fe58cf2..f492b9402 100644
--- a/src/lib/pages/pool/index.tsx
+++ b/src/lib/pages/pool/index.tsx
@@ -18,6 +18,7 @@ import { CustomTab } from "lib/components/CustomTab";
 import InputWithIcon from "lib/components/InputWithIcon";
 import PageContainer from "lib/components/PageContainer";
 
+import { MockUpPoolList } from "./components/constant";
 import type { PoolTypeFilterValue } from "./components/FilterByPoolType";
 import { FilterByPoolType } from "./components/FilterByPoolType";
 import { PoolList } from "./components/PoolList";
@@ -78,15 +79,25 @@ export const PoolIndex = () => {
       </Flex>
       <Tabs>
         <TabList my={8} borderBottom="1px" borderColor="pebble.800">
-          <CustomTab count={0}>Pools</CustomTab>
-          <CustomTab count={0}>Pools with unsupported tokens</CustomTab>
+          <CustomTab
+            count={MockUpPoolList.filter((x) => x.is_supported).length}
+          >
+            Pools
+          </CustomTab>
+          <CustomTab
+            count={MockUpPoolList.filter((x) => !x.is_supported).length}
+          >
+            Pools with unsupported tokens
+          </CustomTab>
         </TabList>
         <TabPanels>
           <TabPanel p={0}>
-            <PoolList />
+            <PoolList pools={MockUpPoolList.filter((x) => x.is_supported)} />
           </TabPanel>
           <TabPanel p={0}>
-            <UnsupportedPoolList />
+            <UnsupportedPoolList
+              pools={MockUpPoolList.filter((x) => !x.is_supported)}
+            />
           </TabPanel>
         </TabPanels>
       </Tabs>
diff --git a/src/lib/pages/pool/poolId.tsx b/src/lib/pages/pool/poolId.tsx
index ffc0084e1..2f313d53a 100644
--- a/src/lib/pages/pool/poolId.tsx
+++ b/src/lib/pages/pool/poolId.tsx
@@ -1,12 +1,26 @@
-import { Flex } from "@chakra-ui/react";
+// import { Button, Flex } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+
+import { useInternalNavigate } from "lib/app-provider";
+import { Loading } from "lib/components/Loading";
+import PageContainer from "lib/components/PageContainer";
+
+import { MockUpPoolList } from "./components/constant";
+import { PoolAssetDetail } from "./components/PoolAssetDetail";
+import { PoolDetailHeader } from "./components/PoolDetailHeader";
 
 export const PoolId = () => {
+  const router = useRouter();
+  const navigate = useInternalNavigate();
+
+  if (!router.query.poolId) return <Loading />;
+  const query = router.query.poolId;
+  const pool = MockUpPoolList.find((x) => x.pool_id === +query);
+  if (!pool) return navigate({ pathname: `/pool` });
   return (
-    <Flex>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam ea animi
-      veritatis nostrum, voluptate, ipsa aperiam quae nemo, beatae placeat
-      fugiat dolor pariatur impedit repellendus consequuntur dignissimos nisi?
-      Quia, eveniet?
-    </Flex>
+    <PageContainer>
+      <PoolDetailHeader pool={pool} />
+      <PoolAssetDetail assets={pool.pool_liquidity} />
+    </PageContainer>
   );
 };
diff --git a/src/lib/services/asset.ts b/src/lib/services/asset.ts
index 005111d8d..4e28dee51 100644
--- a/src/lib/services/asset.ts
+++ b/src/lib/services/asset.ts
@@ -3,13 +3,15 @@ import axios from "axios";
 import { CELATONE_API_ENDPOINT, getChainApiPath } from "env";
 import type { AssetInfo, Option } from "lib/types";
 
-export const getAssetInfo = async (
+export const getAssetInfos = async (
   chainName: Option<string>,
   chainId: Option<string>
 ): Promise<Option<AssetInfo[]>> => {
-  if (!chainName || !chainId) throw new Error("Invalid chain (getAssetInfo)");
+  if (!chainName || !chainId) throw new Error("Invalid chain (getAssetInfos)");
   const { data } = await axios.get(
-    `${CELATONE_API_ENDPOINT}/assets/${getChainApiPath(chainName)}/${chainId}`
+    `${CELATONE_API_ENDPOINT}/assets/${getChainApiPath(
+      chainName
+    )}/${chainId}/prices`
   );
   return data;
 };
diff --git a/src/lib/services/assetService.ts b/src/lib/services/assetService.ts
index 79caa600e..fe25f1424 100644
--- a/src/lib/services/assetService.ts
+++ b/src/lib/services/assetService.ts
@@ -1,7 +1,7 @@
 import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 
-import { getAssetInfo } from "lib/services/asset";
+import { getAssetInfos } from "lib/services/asset";
 import type { AssetInfo, Option } from "lib/types";
 
 export const useAssetInfos = (): Option<{ [key: string]: AssetInfo }> => {
@@ -15,7 +15,7 @@ export const useAssetInfos = (): Option<{ [key: string]: AssetInfo }> => {
       currentChainRecord?.chain.chain_id,
     ],
     async () =>
-      getAssetInfo(
+      getAssetInfos(
         currentChainRecord?.name,
         currentChainRecord?.chain.chain_id
       ),
diff --git a/src/lib/styles/theme/components/accordion.ts b/src/lib/styles/theme/components/accordion.ts
new file mode 100644
index 000000000..658433128
--- /dev/null
+++ b/src/lib/styles/theme/components/accordion.ts
@@ -0,0 +1,22 @@
+import type { ComponentStyleConfig } from "@chakra-ui/react";
+
+export const Accordion: ComponentStyleConfig = {
+  baseStyle: {
+    button: {
+      p: "0",
+    },
+    container: {
+      borderWidth: "0",
+      borderColor: "transparent",
+      p: 0,
+      bg: "pebble.900",
+      hover: {
+        bg: "pebble.800",
+      },
+      borderRadius: "8px",
+    },
+    panel: {
+      borderRadius: "0px 8px 8px 0px",
+    },
+  },
+};
diff --git a/src/lib/styles/theme/components/index.ts b/src/lib/styles/theme/components/index.ts
index 9e42ec3be..673c76ad6 100644
--- a/src/lib/styles/theme/components/index.ts
+++ b/src/lib/styles/theme/components/index.ts
@@ -1,3 +1,4 @@
+import { Accordion } from "./accordion";
 import { Alert } from "./alert";
 import { Badge } from "./badge";
 import { Button } from "./button";
@@ -17,6 +18,7 @@ import { Textarea } from "./textarea";
 import { Tooltip } from "./tooltip";
 
 export const components = {
+  Accordion,
   Button,
   Drawer,
   Heading,
diff --git a/src/lib/types/currency/balance.ts b/src/lib/types/currency/balance.ts
index ba29e2147..ba3119af5 100644
--- a/src/lib/types/currency/balance.ts
+++ b/src/lib/types/currency/balance.ts
@@ -3,10 +3,10 @@ import type { Option } from "lib/types";
 export interface Balance {
   amount: string;
   id: string;
-  name: Option<string>;
+  name?: string;
   precision: number;
-  symbol: Option<string>;
-  type: string;
+  symbol?: string;
+  type?: string;
   price?: number;
 }
 
@@ -21,6 +21,7 @@ export interface AssetInfo {
   slugs: string[];
   symbol: string;
   type: string;
+  price?: number;
 }
 
 export interface BalanceWithAssetInfo {
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
new file mode 100644
index 000000000..830918ee8
--- /dev/null
+++ b/src/lib/types/pool.ts
@@ -0,0 +1,41 @@
+import type { Option } from "lib/types";
+
+// export enum PoolType {
+//   BALANCER = "Balancer",
+//   STABLE_SWAP = "Stable Swap",
+// }
+
+export interface PoolLiquidity {
+  denom: string;
+  amount: string;
+}
+
+export interface PoolWeight {
+  denom: string;
+  weight: string;
+}
+export interface TotalShares {
+  denom: string;
+  amount: string;
+}
+
+export interface SmoothWeightChangeParams {
+  start_time: string;
+  duration: string;
+}
+export interface PoolDetail {
+  pool_id: number;
+  pool_liquidity: PoolLiquidity[];
+  pool_type: string;
+  is_superfluid: boolean;
+  is_supported: boolean;
+  swap_fee: string;
+  exit_fee: string;
+  future_pool_governor: Option<string | null>;
+  smooth_weight_change_params: Option<object | null>;
+  scaling_factors: Option<string[] | null>;
+  scaling_factor_controller: Option<string | null>;
+  weight: Option<PoolWeight[] | null>;
+  address: string;
+  total_shares: TotalShares;
+}
diff --git a/src/lib/utils/formatter/formatPercentValue.ts b/src/lib/utils/formatter/formatPercentValue.ts
new file mode 100644
index 000000000..2de27290c
--- /dev/null
+++ b/src/lib/utils/formatter/formatPercentValue.ts
@@ -0,0 +1,21 @@
+import type { Big } from "big.js";
+import big from "big.js";
+
+import { d2Formatter, d6Formatter } from "./token";
+
+export const formatPercentValue = (value: Big): string => {
+  const x = big(value);
+  const lowestThreshold = 0.000001;
+
+  const d2 = d2Formatter(x, "0.00");
+  const d6 = d6Formatter(x, "0.00");
+
+  if (x.eq(0) || x.gte(1)) {
+    return `${d2}%`;
+  }
+
+  if (x.lt(lowestThreshold)) {
+    return `<${lowestThreshold}%`;
+  }
+  return `${d6}%`;
+};
diff --git a/src/lib/utils/formatter/token.ts b/src/lib/utils/formatter/token.ts
index 97d37e74f..9bc4b7eba 100644
--- a/src/lib/utils/formatter/token.ts
+++ b/src/lib/utils/formatter/token.ts
@@ -61,8 +61,8 @@ export const formatUTokenWithPrecision = (
   );
 };
 
-const d2Formatter = formatDemimal({ decimalPoints: 2, delimiter: true });
-const d6Formatter = formatDemimal({ decimalPoints: 6, delimiter: true });
+export const d2Formatter = formatDemimal({ decimalPoints: 2, delimiter: true });
+export const d6Formatter = formatDemimal({ decimalPoints: 6, delimiter: true });
 
 /**
  * @remarks
diff --git a/src/lib/utils/truncate b/src/lib/utils/truncate
deleted file mode 100644
index e69de29bb..000000000

From 970cc3d26d24ee2babe7bff82e37ae2d47abab51 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Tue, 11 Apr 2023 10:41:18 +0700
Subject: [PATCH 009/354] fix(components): add pool asset table

---
 .../pages/pool/components/PoolAssetDetail.tsx | 56 +++++++++++++-----
 src/lib/pages/pool/components/PoolCard.tsx    | 15 ++++-
 .../pool/components/PoolDetailHeader.tsx      | 51 ++++++++++++++--
 .../pages/pool/components/PoolRelatedTxs.tsx  | 59 +++++++++++++++++++
 .../pool/components/UnsupportedPoolList.tsx   | 27 +++++++--
 src/lib/pages/pool/components/constant.ts     | 49 +++++++++++++--
 .../pool/components/table/PoolAssetsTable.tsx | 32 ++++++++++
 .../table/PoolAssetsTableHeader.tsx           | 17 ++++++
 .../components/table/PoolAssetsTableRow.tsx   | 26 ++++++++
 src/lib/pages/pool/poolId.tsx                 |  3 +-
 src/lib/types/index.ts                        |  1 +
 src/lib/types/pool.ts                         | 11 ++--
 12 files changed, 309 insertions(+), 38 deletions(-)
 create mode 100644 src/lib/pages/pool/components/PoolRelatedTxs.tsx
 create mode 100644 src/lib/pages/pool/components/table/PoolAssetsTable.tsx
 create mode 100644 src/lib/pages/pool/components/table/PoolAssetsTableHeader.tsx
 create mode 100644 src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx

diff --git a/src/lib/pages/pool/components/PoolAssetDetail.tsx b/src/lib/pages/pool/components/PoolAssetDetail.tsx
index 7baf8d8d5..7d5e36566 100644
--- a/src/lib/pages/pool/components/PoolAssetDetail.tsx
+++ b/src/lib/pages/pool/components/PoolAssetDetail.tsx
@@ -1,13 +1,17 @@
-import { Flex, Heading, Badge, Text } from "@chakra-ui/react";
+import { Flex, Heading, Badge, Text, Box } from "@chakra-ui/react";
 import type { Big } from "big.js";
 import big from "big.js";
+import Link from "next/link";
 
+import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { useAssetInfos } from "lib/services/assetService";
 import type { USD } from "lib/types";
 import type { PoolLiquidity } from "lib/types/pool";
 import { calAssetValueWithPrecision, formatPrice } from "lib/utils";
 
+import { PoolAssetsTable } from "./table/PoolAssetsTable";
+
 interface PoolAssetDetailProps {
   assets: PoolLiquidity[];
 }
@@ -31,23 +35,43 @@ export const PoolAssetDetail = ({ assets }: PoolAssetDetailProps) => {
   }, big(0) as USD<Big>);
 
   return (
-    <Flex py={12} justifyContent="space-between">
-      <Flex gap={2} alignItems="center">
-        <Heading as="h6" variant="h6">
-          Pools
-        </Heading>
-        <Badge variant="gray" color="text.main" textColor="text.main">
-          {assets.length}
-        </Badge>
+    <Box>
+      <Flex py={12} justifyContent="space-between">
+        <Flex gap={2} alignItems="center">
+          <Heading as="h6" variant="h6">
+            Pools
+          </Heading>
+          <Badge variant="gray" color="text.main" textColor="text.main">
+            {assets.length}
+          </Badge>
+        </Flex>
+        <Flex gap={2}>
+          <Text variant="body2" color="text.dark" fontWeight="600">
+            Total Liquidity:
+          </Text>
+          <Text variant="body2" color="text.main" fontWeight="600">
+            {formatPrice(liquidity)}
+          </Text>
+        </Flex>
       </Flex>
-      <Flex gap={2}>
-        <Text variant="body2" color="text.dark" fontWeight="600">
-          Total Liquidity:
-        </Text>
-        <Text variant="body2" color="text.main" fontWeight="600">
-          {formatPrice(liquidity)}
+      <PoolAssetsTable />
+      <Flex gap="2" alignItems="center">
+        <Text variant="body2" color="text.dark">
+          What is asset weights and allocations?
         </Text>
+        <Link
+          href="https://docs.osmosis.zone/osmosis-core/modules/gamm#weights"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Flex gap="2px" alignItems="center">
+            <Text color="lilac.main" variant="body2">
+              Read more
+            </Text>
+            <CustomIcon name="external" color="lilac.main" boxSize="3" />
+          </Flex>
+        </Link>
       </Flex>
-    </Flex>
+    </Box>
   );
 };
diff --git a/src/lib/pages/pool/components/PoolCard.tsx b/src/lib/pages/pool/components/PoolCard.tsx
index d50d1d5d0..509bf50df 100644
--- a/src/lib/pages/pool/components/PoolCard.tsx
+++ b/src/lib/pages/pool/components/PoolCard.tsx
@@ -1,10 +1,16 @@
-import { Box, Flex, IconButton, Text, Tooltip } from "@chakra-ui/react";
+import {
+  Box,
+  Flex,
+  IconButton,
+  Skeleton,
+  Text,
+  Tooltip,
+} from "@chakra-ui/react";
 import big, { Big } from "big.js";
 import Link from "next/link";
 
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
-import { Loading } from "lib/components/Loading";
 import { useAssetInfos } from "lib/services/assetService";
 import type { USD } from "lib/types";
 import type { PoolDetail } from "lib/types/pool";
@@ -35,7 +41,10 @@ export const PoolCard = ({
   };
   const assetInfos = useAssetInfos();
 
-  if (!assetInfos) return <Loading />;
+  if (!assetInfos)
+    return (
+      <Skeleton height="175px" startColor="pebble.900" endColor="pebble.800" />
+    );
 
   const liquidity = item.pool_liquidity.reduce((total, asset) => {
     const assetInfo = assetInfos[asset.denom];
diff --git a/src/lib/pages/pool/components/PoolDetailHeader.tsx b/src/lib/pages/pool/components/PoolDetailHeader.tsx
index 1450d5984..bea381edd 100644
--- a/src/lib/pages/pool/components/PoolDetailHeader.tsx
+++ b/src/lib/pages/pool/components/PoolDetailHeader.tsx
@@ -14,14 +14,16 @@ import {
   Heading,
   useDisclosure,
   chakra,
+  Tooltip,
 } from "@chakra-ui/react";
 import Big from "big.js";
 
 import { BackButton } from "lib/components/button";
+import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
 import type { PoolDetail } from "lib/types/pool";
-import { jsonPrettify } from "lib/utils";
+import { jsonPrettify, truncate } from "lib/utils";
 import { formatPercentValue } from "lib/utils/formatter/formatPercentValue";
 
 import { PoolHeader } from "./PoolHeader";
@@ -105,7 +107,7 @@ export const PoolDetailHeader = ({ pool }: PoolDetailHeaderProp) => {
         borderRadius="8px"
         px={4}
         py={3}
-        gap={16}
+        gap={12}
         mt={6}
       >
         <Flex flexDirection="column" gap={1}>
@@ -115,13 +117,54 @@ export const PoolDetailHeader = ({ pool }: PoolDetailHeaderProp) => {
           </StyledTextContent>
         </Flex>
         <Flex flexDirection="column" gap={1}>
-          <StyledTextLabel> Swap Fee</StyledTextLabel>
+          <StyledTextLabel> Created Height</StyledTextLabel>
+          <StyledTextContent color="lilac.main">
+            {pool.create_tx_id}
+          </StyledTextContent>
+        </Flex>
+        <Flex flexDirection="column" gap={1}>
+          <StyledTextLabel> Pool Created by</StyledTextLabel>
+          <StyledTextContent color="lilac.main">
+            <ExplorerLink
+              type="user_address"
+              value={truncate(pool.account.address)}
+            />
+          </StyledTextContent>
+        </Flex>
+        <Flex flexDirection="column" gap={1}>
+          <Flex alignItems="center" gap={1}>
+            <StyledTextLabel>Swap Fee</StyledTextLabel>
+            <Tooltip
+              hasArrow
+              label="The fee charged for making a swap in a pool, defined by the pool creator, and paid by traders in the form of a percentage the input swap asset amount"
+              placement="top"
+              bg="honeydew.darker"
+              arrowSize={8}
+            >
+              <Flex cursor="pointer">
+                <CustomIcon name="info-circle" boxSize="12px" />
+              </Flex>
+            </Tooltip>
+          </Flex>
           <StyledTextContent>
             {formatPercentValue(Big(pool.swap_fee).times(100))}
           </StyledTextContent>
         </Flex>
         <Flex flexDirection="column" gap={1}>
-          <StyledTextLabel> Exit Fee</StyledTextLabel>
+          <Flex alignItems="center" gap={1}>
+            <StyledTextLabel>Exit Fee</StyledTextLabel>
+            <Tooltip
+              hasArrow
+              label="The fee charged when withdrawing from a pool, defined by the pool creator, and paid by the withdrawer in the form of LP tokens"
+              placement="top"
+              bg="honeydew.darker"
+              arrowSize={8}
+            >
+              <Flex cursor="pointer">
+                <CustomIcon name="info-circle" boxSize="12px" />
+              </Flex>
+            </Tooltip>
+          </Flex>
           <StyledTextContent>
             {formatPercentValue(Big(pool.exit_fee).times(100))}
           </StyledTextContent>
diff --git a/src/lib/pages/pool/components/PoolRelatedTxs.tsx b/src/lib/pages/pool/components/PoolRelatedTxs.tsx
new file mode 100644
index 000000000..f127a9e24
--- /dev/null
+++ b/src/lib/pages/pool/components/PoolRelatedTxs.tsx
@@ -0,0 +1,59 @@
+import {
+  Flex,
+  Heading,
+  Box,
+  Tabs,
+  TabList,
+  TabPanels,
+  TabPanel,
+} from "@chakra-ui/react";
+
+import { CustomTab } from "lib/components/CustomTab";
+
+export const PoolRelatedTxs = () => {
+  return (
+    <Box>
+      <Flex mt={12} gap={2} alignItems="center">
+        <Heading as="h6" variant="h6">
+          Related Transactions
+        </Heading>
+      </Flex>
+      <Tabs>
+        <TabList mt={4} borderBottom="1px" borderColor="pebble.800">
+          <CustomTab count={0}>All</CustomTab>
+          <CustomTab count={0}>Swap</CustomTab>
+          <CustomTab count={0}>LP</CustomTab>
+          <CustomTab count={0}>Bonding</CustomTab>
+          <CustomTab count={0}>Superfluid</CustomTab>
+        </TabList>
+        <TabPanels>
+          <TabPanel p={0}>All</TabPanel>
+          <TabPanel p={0}>
+            Swappppppp Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Delectus beatae esse doloremque eaque dolores magni harum pariatur,
+            corporis aliquid at quam quod fuga fugit sit a ipsam culpa tempora
+            voluptate?
+          </TabPanel>
+          <TabPanel p={0}>
+            LPLPLPLPLPLLPLP Lorem ipsum dolor sit amet consectetur adipisicing
+            elit. Delectus beatae esse doloremque eaque dolores magni harum
+            pariatur, corporis aliquid at quam quod fuga fugit sit a ipsam culpa
+            tempora voluptate?
+          </TabPanel>
+          <TabPanel p={0}>
+            BondingBondingBonding Lorem ipsum dolor sit amet consectetur
+            adipisicing elit. Delectus beatae esse doloremque eaque dolores
+            magni harum pariatur, corporis aliquid at quam quod fuga fugit sit a
+            ipsam culpa tempora voluptate?
+          </TabPanel>
+          <TabPanel p={0}>
+            SuperfluidSuperfluid Lorem ipsum dolor sit amet consectetur
+            adipisicing elit. Delectus beatae esse doloremque eaque dolores
+            magni harum pariatur, corporis aliquid at quam quod fuga fugit sit a
+            ipsam culpa tempora voluptate?
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </Box>
+  );
+};
diff --git a/src/lib/pages/pool/components/UnsupportedPoolList.tsx b/src/lib/pages/pool/components/UnsupportedPoolList.tsx
index 098466030..67268b859 100644
--- a/src/lib/pages/pool/components/UnsupportedPoolList.tsx
+++ b/src/lib/pages/pool/components/UnsupportedPoolList.tsx
@@ -7,6 +7,7 @@ import {
   SimpleGrid,
   Text,
 } from "@chakra-ui/react";
+import { useState } from "react";
 
 import { CustomIcon } from "lib/components/icon";
 import type { PoolDetail } from "lib/types/pool";
@@ -17,6 +18,7 @@ interface UnsupportedPoolListProp {
   pools: PoolDetail[];
 }
 export const UnsupportedPoolList = ({ pools }: UnsupportedPoolListProp) => {
+  const [showNewest, setShowNewest] = useState(true);
   return (
     <>
       <Flex alignItems="center" justifyContent="space-between" h="32px">
@@ -33,10 +35,27 @@ export const UnsupportedPoolList = ({ pools }: UnsupportedPoolListProp) => {
             <Text variant="body2" color="text.dark">
               Sort Pool ID:
             </Text>
-            <Button variant="outline-gray" size="sm" pr="1">
-              Newest First
-              <CustomIcon name="arrow-down" color="text.dark" />
-            </Button>
+            {showNewest ? (
+              <Button
+                variant="outline-gray"
+                size="sm"
+                pr="1"
+                onClick={() => setShowNewest(!showNewest)}
+              >
+                Newest First
+                <CustomIcon name="arrow-down" color="text.dark" />
+              </Button>
+            ) : (
+              <Button
+                variant="outline-gray"
+                size="sm"
+                pr="1"
+                onClick={() => setShowNewest(!showNewest)}
+              >
+                Oldest First
+                <CustomIcon name="arrow-up" color="text.dark" />
+              </Button>
+            )}
           </Flex>
           <Flex gap="2" alignItems="center">
             <Button variant="outline-gray" size="sm">
diff --git a/src/lib/pages/pool/components/constant.ts b/src/lib/pages/pool/components/constant.ts
index e812ee860..fdac16fa3 100644
--- a/src/lib/pages/pool/components/constant.ts
+++ b/src/lib/pages/pool/components/constant.ts
@@ -6,6 +6,11 @@ export const UndefinedTokenList = [
 export const MockUpPoolList = [
   {
     pool_id: 31,
+    create_tx_id: 1231354,
+    account: {
+      address: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx",
+      id: 291362,
+    },
     pool_liquidity: [
       {
         denom:
@@ -100,16 +105,20 @@ export const MockUpPoolList = [
   },
   {
     pool_id: 231,
+    create_tx_id: 1231354,
+    account: {
+      address: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx",
+      id: 291362,
+    },
     pool_liquidity: [
       {
-        denom:
-          "ibc/ACA4C8A815A053CC027DB90D15915ADA31939FA331CE745862CDD00A2904FA17",
-        amount: "3053",
+        denom: "uion",
+        amount: "268435456000000",
       },
       {
         denom:
-          "ibc/F89E34457F34F306592D4EFB8692406D49D4E2B5C70F725F127862E22CE6BDCD",
-        amount: "127",
+          "ibc/ACA4C8A815A053CC027DB90D15915ADA31939FA331CE745862CDD00A2904FA17",
+        amount: "268435456000000",
       },
       {
         denom: "uosmo",
@@ -167,6 +176,11 @@ export const MockUpPoolList = [
   },
   {
     pool_id: 932,
+    create_tx_id: 1231354,
+    account: {
+      address: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx",
+      id: 291362,
+    },
     pool_liquidity: [
       {
         denom: "uion",
@@ -195,6 +209,11 @@ export const MockUpPoolList = [
   },
   {
     pool_id: 872,
+    create_tx_id: 1231354,
+    account: {
+      address: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx",
+      id: 291362,
+    },
     pool_liquidity: [
       {
         denom:
@@ -229,6 +248,11 @@ export const MockUpPoolList = [
   },
   {
     pool_id: 21,
+    create_tx_id: 1231354,
+    account: {
+      address: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx",
+      id: 291362,
+    },
     pool_liquidity: [
       {
         denom:
@@ -290,6 +314,11 @@ export const MockUpPoolList = [
   },
   {
     pool_id: 221,
+    create_tx_id: 1231354,
+    account: {
+      address: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx",
+      id: 291362,
+    },
     pool_liquidity: [
       {
         denom:
@@ -357,6 +386,11 @@ export const MockUpPoolList = [
   },
   {
     pool_id: 941,
+    create_tx_id: 1231354,
+    account: {
+      address: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx",
+      id: 291362,
+    },
     pool_liquidity: [
       {
         denom:
@@ -387,6 +421,11 @@ export const MockUpPoolList = [
   },
   {
     pool_id: 372,
+    create_tx_id: 1231354,
+    account: {
+      address: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx",
+      id: 291362,
+    },
     pool_liquidity: [
       {
         denom:
diff --git a/src/lib/pages/pool/components/table/PoolAssetsTable.tsx b/src/lib/pages/pool/components/table/PoolAssetsTable.tsx
new file mode 100644
index 000000000..8fc1d6a20
--- /dev/null
+++ b/src/lib/pages/pool/components/table/PoolAssetsTable.tsx
@@ -0,0 +1,32 @@
+// import { Loading } from "lib/components/Loading";
+import { TableContainer } from "lib/components/table/tableComponents";
+// import type { Option, Proposal } from "lib/types";
+
+import { PoolAssetsTableHeader } from "./PoolAssetsTableHeader";
+// import { PoolAssetsTableRow } from "./PoolAssetsTableRow";
+
+// interface ProposalsTableProps {
+//   proposals: Option<Proposal[]>;
+//   isLoading: boolean;
+//   emptyState: JSX.Element;
+// }
+
+export const PoolAssetsTable = () => {
+  // if (isLoading) return <Loading />;
+  // if (!proposals?.length) return emptyState;
+
+  const templateColumns = "minmax(300px, 1fr) 120px 120px minmax(300px, 1fr)";
+
+  return (
+    <TableContainer>
+      <PoolAssetsTableHeader templateColumns={templateColumns} />
+      {/* {proposals.map((proposal) => (
+        <PoolAssetsTableRow
+          key={proposal.proposalId}
+          proposal={proposal}
+          templateColumns={templateColumns}
+        />
+      ))} */}
+    </TableContainer>
+  );
+};
diff --git a/src/lib/pages/pool/components/table/PoolAssetsTableHeader.tsx b/src/lib/pages/pool/components/table/PoolAssetsTableHeader.tsx
new file mode 100644
index 000000000..9518b94f3
--- /dev/null
+++ b/src/lib/pages/pool/components/table/PoolAssetsTableHeader.tsx
@@ -0,0 +1,17 @@
+import type { GridProps } from "@chakra-ui/react";
+import { Grid } from "@chakra-ui/react";
+
+import { TableHeader } from "lib/components/table/tableComponents";
+
+export const PoolAssetsTableHeader = ({
+  templateColumns,
+}: {
+  templateColumns: GridProps["templateColumns"];
+}) => (
+  <Grid templateColumns={templateColumns}>
+    <TableHeader>Asset</TableHeader>
+    <TableHeader textAlign="right">Weight</TableHeader>
+    <TableHeader textAlign="right">Allocation</TableHeader>
+    <TableHeader textAlign="right">Amount</TableHeader>
+  </Grid>
+);
diff --git a/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx b/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx
new file mode 100644
index 000000000..e73f299c7
--- /dev/null
+++ b/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx
@@ -0,0 +1,26 @@
+import type { GridProps } from "@chakra-ui/react";
+import { Grid, Text } from "@chakra-ui/react";
+
+import { TableRow } from "lib/components/table/tableComponents";
+
+interface PoolAssetsTableRowProps {
+  // proposal: Proposal;
+  templateColumns: GridProps["templateColumns"];
+}
+export const PoolAssetsTableRow = ({
+  templateColumns,
+}: PoolAssetsTableRowProps) => {
+  return (
+    <Grid templateColumns={templateColumns}>
+      <TableRow>dddd</TableRow>
+      <TableRow>ddd</TableRow>
+      <TableRow justifyContent="center">dddsdfs</TableRow>
+      <TableRow>dd</TableRow>
+      <TableRow>dd</TableRow>
+      <TableRow>
+        <Text color="text.dark">sddsds</Text>
+      </TableRow>
+      <TableRow>dddd</TableRow>
+    </Grid>
+  );
+};
diff --git a/src/lib/pages/pool/poolId.tsx b/src/lib/pages/pool/poolId.tsx
index 2f313d53a..b56c48328 100644
--- a/src/lib/pages/pool/poolId.tsx
+++ b/src/lib/pages/pool/poolId.tsx
@@ -1,4 +1,3 @@
-// import { Button, Flex } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 
 import { useInternalNavigate } from "lib/app-provider";
@@ -8,6 +7,7 @@ import PageContainer from "lib/components/PageContainer";
 import { MockUpPoolList } from "./components/constant";
 import { PoolAssetDetail } from "./components/PoolAssetDetail";
 import { PoolDetailHeader } from "./components/PoolDetailHeader";
+import { PoolRelatedTxs } from "./components/PoolRelatedTxs";
 
 export const PoolId = () => {
   const router = useRouter();
@@ -21,6 +21,7 @@ export const PoolId = () => {
     <PageContainer>
       <PoolDetailHeader pool={pool} />
       <PoolAssetDetail assets={pool.pool_liquidity} />
+      <PoolRelatedTxs />
     </PageContainer>
   );
 };
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index f110ba2e6..25158b8f0 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -9,3 +9,4 @@ export * from "./contract";
 export * from "./projects";
 export * from "./addrs";
 export * from "./proposal";
+export * from "./pool";
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index 830918ee8..4fbee19cb 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -1,10 +1,5 @@
 import type { Option } from "lib/types";
 
-// export enum PoolType {
-//   BALANCER = "Balancer",
-//   STABLE_SWAP = "Stable Swap",
-// }
-
 export interface PoolLiquidity {
   denom: string;
   amount: string;
@@ -23,8 +18,14 @@ export interface SmoothWeightChangeParams {
   start_time: string;
   duration: string;
 }
+export interface PoolAccount {
+  address: string;
+  id: number;
+}
 export interface PoolDetail {
   pool_id: number;
+  create_tx_id: number;
+  account: PoolAccount;
   pool_liquidity: PoolLiquidity[];
   pool_type: string;
   is_superfluid: boolean;

From 2b56e7e86bfb977ea2668f54f13d30fe38a63a0b Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Tue, 11 Apr 2023 18:34:06 +0700
Subject: [PATCH 010/354] feat(components): add detail to asset table

---
 CHANGELOG.md                                  |  1 +
 .../pages/pool/components/PoolAssetDetail.tsx | 18 +++-
 .../pool/components/table/PoolAssetsTable.tsx | 44 ++++++----
 .../table/PoolAssetsTableHeader.tsx           | 18 ++--
 .../components/table/PoolAssetsTableRow.tsx   | 84 +++++++++++++++++--
 src/lib/pages/pool/poolId.tsx                 |  7 +-
 6 files changed, 140 insertions(+), 32 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fde323730..9eb657e5e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#270](https://github.com/alleslabs/celatone-frontend/pull/270) Add Pool navigation and detail page
 - [#261](https://github.com/alleslabs/celatone-frontend/pull/261) Add Relation column to transaction tables and refactor transaction table components
 - [#265](https://github.com/alleslabs/celatone-frontend/pull/265) Add filter by status and type to proposal list page, and change Inactive proposal status to DepositFailed
 - [#263](https://github.com/alleslabs/celatone-frontend/pull/263) Wireup search bar and my proposal switch in proposal list page
diff --git a/src/lib/pages/pool/components/PoolAssetDetail.tsx b/src/lib/pages/pool/components/PoolAssetDetail.tsx
index 35833e54b..91f0166c6 100644
--- a/src/lib/pages/pool/components/PoolAssetDetail.tsx
+++ b/src/lib/pages/pool/components/PoolAssetDetail.tsx
@@ -7,15 +7,23 @@ import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { useAssetInfos } from "lib/services/assetService";
 import type { USD } from "lib/types";
-import type { PoolLiquidity } from "lib/types/pool";
+import type { PoolDetail, PoolLiquidity } from "lib/types/pool";
 import { calAssetValueWithPrecision, formatPrice } from "lib/utils";
 
 import { PoolAssetsTable } from "./table/PoolAssetsTable";
 
 interface PoolAssetDetailProps {
   assets: PoolLiquidity[];
+  pool_type: PoolDetail["pool_type"];
+  // weight?: Option<PoolWeight[] | null>;
+  // scaling_factors?: Option<string[] | null>;
 }
-export const PoolAssetDetail = ({ assets }: PoolAssetDetailProps) => {
+export const PoolAssetDetail = ({
+  assets,
+  pool_type,
+}: // weight,
+// scaling_factors,
+PoolAssetDetailProps) => {
   const { assetInfos } = useAssetInfos();
 
   if (!assetInfos) return <Loading />;
@@ -54,7 +62,11 @@ export const PoolAssetDetail = ({ assets }: PoolAssetDetailProps) => {
           </Text>
         </Flex>
       </Flex>
-      <PoolAssetsTable />
+      <PoolAssetsTable
+        assets={assets}
+        pool_type={pool_type}
+        total_liquidity={liquidity}
+      />
       <Flex gap="2" alignItems="center">
         <Text variant="body2" color="text.dark">
           What is asset weights and allocations?
diff --git a/src/lib/pages/pool/components/table/PoolAssetsTable.tsx b/src/lib/pages/pool/components/table/PoolAssetsTable.tsx
index 8fc1d6a20..514f3b0eb 100644
--- a/src/lib/pages/pool/components/table/PoolAssetsTable.tsx
+++ b/src/lib/pages/pool/components/table/PoolAssetsTable.tsx
@@ -1,32 +1,48 @@
-// import { Loading } from "lib/components/Loading";
+import type { Big } from "big.js";
+
 import { TableContainer } from "lib/components/table/tableComponents";
-// import type { Option, Proposal } from "lib/types";
+import type { PoolDetail, PoolLiquidity, USD } from "lib/types";
 
+// import type { Option, Proposal } from "lib/types";
 import { PoolAssetsTableHeader } from "./PoolAssetsTableHeader";
+import { PoolAssetsTableRow } from "./PoolAssetsTableRow";
 // import { PoolAssetsTableRow } from "./PoolAssetsTableRow";
 
-// interface ProposalsTableProps {
-//   proposals: Option<Proposal[]>;
-//   isLoading: boolean;
-//   emptyState: JSX.Element;
-// }
+interface PoolAssetsTableProps {
+  assets: PoolLiquidity[];
+  pool_type: PoolDetail["pool_type"];
+  // weight?: Option<PoolWeight[] | null>;
+  // scaling_factors?: Option<string[] | null>;
+  total_liquidity: USD<Big>;
+}
 
-export const PoolAssetsTable = () => {
+export const PoolAssetsTable = ({
+  assets,
+  pool_type,
+  // weight,
+  // scaling_factors,
+  total_liquidity,
+}: PoolAssetsTableProps) => {
   // if (isLoading) return <Loading />;
   // if (!proposals?.length) return emptyState;
 
-  const templateColumns = "minmax(300px, 1fr) 120px 120px minmax(300px, 1fr)";
+  const templateColumns = "minmax(300px, 1fr) 144px 144px minmax(300px, 1fr)";
 
   return (
     <TableContainer>
-      <PoolAssetsTableHeader templateColumns={templateColumns} />
-      {/* {proposals.map((proposal) => (
+      <PoolAssetsTableHeader
+        templateColumns={templateColumns}
+        pool_type={pool_type}
+      />
+      {assets.map((asset) => (
         <PoolAssetsTableRow
-          key={proposal.proposalId}
-          proposal={proposal}
+          asset={asset}
+          total_liquidity={total_liquidity}
+          pool_type={pool_type}
+          key={asset.denom}
           templateColumns={templateColumns}
         />
-      ))} */}
+      ))}
     </TableContainer>
   );
 };
diff --git a/src/lib/pages/pool/components/table/PoolAssetsTableHeader.tsx b/src/lib/pages/pool/components/table/PoolAssetsTableHeader.tsx
index 9518b94f3..f8e341683 100644
--- a/src/lib/pages/pool/components/table/PoolAssetsTableHeader.tsx
+++ b/src/lib/pages/pool/components/table/PoolAssetsTableHeader.tsx
@@ -2,16 +2,24 @@ import type { GridProps } from "@chakra-ui/react";
 import { Grid } from "@chakra-ui/react";
 
 import { TableHeader } from "lib/components/table/tableComponents";
+import type { PoolDetail } from "lib/types";
+
+interface PoolHeaderProps {
+  pool_type: PoolDetail["pool_type"];
+  templateColumns: GridProps["templateColumns"];
+}
 
 export const PoolAssetsTableHeader = ({
+  pool_type,
   templateColumns,
-}: {
-  templateColumns: GridProps["templateColumns"];
-}) => (
+}: PoolHeaderProps) => (
   <Grid templateColumns={templateColumns}>
     <TableHeader>Asset</TableHeader>
-    <TableHeader textAlign="right">Weight</TableHeader>
-    <TableHeader textAlign="right">Allocation</TableHeader>
+
+    <TableHeader textAlign="right">
+      {pool_type === "Stableswap" ? "Scaling Factor" : "Weight (%)"}
+    </TableHeader>
+    <TableHeader textAlign="right">Value Allocation</TableHeader>
     <TableHeader textAlign="right">Amount</TableHeader>
   </Grid>
 );
diff --git a/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx b/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx
index e73f299c7..1a4d2d27b 100644
--- a/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx
+++ b/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx
@@ -1,26 +1,92 @@
 import type { GridProps } from "@chakra-ui/react";
-import { Grid, Text } from "@chakra-ui/react";
+import { Flex, Skeleton, Grid, Image, Text } from "@chakra-ui/react";
+import big from "big.js";
+import type { BigSource, Big } from "big.js";
 
+import { UndefinedTokenList } from "../constant";
 import { TableRow } from "lib/components/table/tableComponents";
+import { useAssetInfos } from "lib/services/assetService";
+import type { Token, U, PoolLiquidity, USD, PoolDetail } from "lib/types";
+import {
+  calculateAssetValue,
+  d2Formatter,
+  formatPrice,
+  formatUTokenWithPrecision,
+  getTokenLabel,
+  toToken,
+} from "lib/utils";
 
 interface PoolAssetsTableRowProps {
-  // proposal: Proposal;
+  pool_type: PoolDetail["pool_type"];
+  asset: PoolLiquidity;
   templateColumns: GridProps["templateColumns"];
+  total_liquidity: USD<Big>;
 }
+
 export const PoolAssetsTableRow = ({
+  pool_type,
+  asset,
   templateColumns,
+  total_liquidity,
 }: PoolAssetsTableRowProps) => {
+  const { assetInfos } = useAssetInfos();
+  if (!assetInfos)
+    return (
+      <Skeleton height="75px" startColor="pebble.900" endColor="pebble.800" />
+    );
+  const assetInfo = assetInfos[asset.denom];
+  const assetValue = calculateAssetValue(
+    toToken(big(asset.amount) as U<Token<BigSource>>, assetInfo.precision),
+    assetInfo.price as USD<number>
+  );
   return (
     <Grid templateColumns={templateColumns}>
-      <TableRow>dddd</TableRow>
-      <TableRow>ddd</TableRow>
-      <TableRow justifyContent="center">dddsdfs</TableRow>
-      <TableRow>dd</TableRow>
-      <TableRow>dd</TableRow>
       <TableRow>
-        <Text color="text.dark">sddsds</Text>
+        <Flex alignItems="center" gap={2}>
+          <Image boxSize={7} src={assetInfo.logo || UndefinedTokenList[0]} />
+          <Flex flexDirection="column">
+            <Text variant="body2" fontWeight="600" color="text.main">
+              {assetInfo?.symbol || getTokenLabel(asset.denom)}
+            </Text>
+            <Text variant="body3" color="text.dark">
+              {formatPrice(assetInfo.price as USD<number>)}
+            </Text>
+          </Flex>
+        </Flex>
+      </TableRow>
+      <TableRow>
+        {pool_type === "Stableswap" ? (
+          <Flex justifyContent="right" w="full">
+            stable scaling
+          </Flex>
+        ) : (
+          <Flex justifyContent="right" w="full">
+            balancer weight
+          </Flex>
+        )}
+      </TableRow>
+
+      <TableRow>
+        <Flex justifyContent="right" w="full">
+          {d2Formatter(total_liquidity, "0.00")}
+          {/* {big(total_liquidity).div(1000)} */}
+          {/* {formatPrice(total_liquidity)} */}
+        </Flex>
+      </TableRow>
+      <TableRow>
+        <Flex alignItems="flex-end" w="full" flexDirection="column">
+          <Text variant="body2" fontWeight="600" color="text.main">
+            {formatUTokenWithPrecision(
+              asset.amount as U<Token>,
+              assetInfo.precision,
+              false
+            )}
+          </Text>
+          <Text variant="body3" color="text.dark">
+            {formatPrice(assetValue)}
+          </Text>
+        </Flex>
       </TableRow>
-      <TableRow>dddd</TableRow>
     </Grid>
   );
 };
diff --git a/src/lib/pages/pool/poolId.tsx b/src/lib/pages/pool/poolId.tsx
index b56c48328..2100adaa4 100644
--- a/src/lib/pages/pool/poolId.tsx
+++ b/src/lib/pages/pool/poolId.tsx
@@ -20,7 +20,12 @@ export const PoolId = () => {
   return (
     <PageContainer>
       <PoolDetailHeader pool={pool} />
-      <PoolAssetDetail assets={pool.pool_liquidity} />
+      <PoolAssetDetail
+        assets={pool.pool_liquidity}
+        pool_type={pool.pool_type}
+        // weight={pool.weight}
+        // scaling_factors={pool.scaling_factors}
+      />
       <PoolRelatedTxs />
     </PageContainer>
   );

From abf9858c79fb776abb7a8a5becd659bf73786bf8 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 12 Apr 2023 15:40:25 +0700
Subject: [PATCH 011/354] feat: add pool data

---
 CHANGELOG.md                                  |   1 +
 src/lib/gql/gql.ts                            |  25 +
 src/lib/gql/graphql.ts                        | 565 ++++++++++++++++++
 .../pages/pool/components/PoolAssetDetail.tsx |   4 +-
 src/lib/pages/pool/components/PoolCard.tsx    |  12 +-
 .../pool/components/PoolDetailHeader.tsx      |  42 +-
 src/lib/pages/pool/components/PoolHeader.tsx  |   9 +-
 src/lib/pages/pool/components/PoolList.tsx    |   7 +-
 src/lib/pages/pool/components/PoolLogo.tsx    |   2 +-
 .../pool/components/UnsupportedPoolCard.tsx   |   8 +-
 .../pool/components/UnsupportedPoolList.tsx   |   6 +-
 src/lib/pages/pool/components/constant.ts     | 292 ++++-----
 src/lib/pages/pool/data.ts                    |  93 +++
 src/lib/pages/pool/index.tsx                  |  10 +-
 src/lib/pages/pool/poolId.tsx                 |   4 +-
 src/lib/pages/pool/type.ts                    |  68 +++
 src/lib/query/index.ts                        |   1 +
 src/lib/query/pool.ts                         |  57 ++
 src/lib/query/tx.ts                           |  34 ++
 src/lib/services/expression/poolExpression.ts |  15 +
 src/lib/services/expression/txExpression.ts   |  14 +-
 src/lib/services/poolService.ts               | 111 ++++
 src/lib/services/txService.ts                 |  87 ++-
 src/lib/types/pool.ts                         |  51 +-
 src/lib/types/tx/transaction.ts               |   2 +
 25 files changed, 1259 insertions(+), 261 deletions(-)
 create mode 100644 src/lib/pages/pool/data.ts
 create mode 100644 src/lib/pages/pool/type.ts
 create mode 100644 src/lib/query/pool.ts
 create mode 100644 src/lib/services/expression/poolExpression.ts
 create mode 100644 src/lib/services/poolService.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fde323730..597d30ea0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#275](https://github.com/alleslabs/celatone-frontend/pull/275) Add pool list and pool detail data
 - [#261](https://github.com/alleslabs/celatone-frontend/pull/261) Add Relation column to transaction tables and refactor transaction table components
 - [#265](https://github.com/alleslabs/celatone-frontend/pull/265) Add filter by status and type to proposal list page, and change Inactive proposal status to DepositFailed
 - [#263](https://github.com/alleslabs/celatone-frontend/pull/263) Wireup search bar and my proposal switch in proposal list page
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index 4b20653a2..0e10f3211 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -41,6 +41,12 @@ const documents = {
     types.GetContractListByAdminPaginationDocument,
   "\n  query getContractListCountByAdmin($walletAddress: String!) {\n    contracts_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetContractListCountByAdminDocument,
+  "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: asc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n":
+    types.GetPoolListDocument,
+  "\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
+    types.GetPoolListCountDocument,
+  "\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n    }\n  }\n":
+    types.GetPoolByPoolIdDocument,
   "\n  query getRelatedProposalsByContractAddressPagination(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_proposals(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { proposal_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      proposal {\n        title\n        status\n        voting_end_time\n        deposit_end_time\n        type\n        account {\n          address\n        }\n        is_expedited\n      }\n      proposal_id\n      resolved_height\n    }\n  }\n":
     types.GetRelatedProposalsByContractAddressPaginationDocument,
   "\n  query getRelatedProposalsCountByContractAddress($contractAddress: String!) {\n    contract_proposals_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
@@ -59,6 +65,10 @@ const documents = {
     types.GetTxsByAddressPaginationDocument,
   "\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetTxsCountByAddressDocument,
+  "\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(where: $expression, offset: $offset, limit: $pageSize) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n":
+    types.GetTxsByPoolIdPaginationDocument,
+  "\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
+    types.GetTxsCountByPoolIdDocument,
 };
 
 export function graphql(
@@ -118,6 +128,15 @@ export function graphql(
 export function graphql(
   source: "\n  query getContractListCountByAdmin($walletAddress: String!) {\n    contracts_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getContractListCountByAdmin($walletAddress: String!) {\n    contracts_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: asc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n"
+): typeof documents["\n  query getPoolList(\n    $expression: pools_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: asc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
+): typeof documents["\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n    }\n  }\n"
+): typeof documents["\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getRelatedProposalsByContractAddressPagination(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_proposals(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { proposal_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      proposal {\n        title\n        status\n        voting_end_time\n        deposit_end_time\n        type\n        account {\n          address\n        }\n        is_expedited\n      }\n      proposal_id\n      resolved_height\n    }\n  }\n"
 ): typeof documents["\n  query getRelatedProposalsByContractAddressPagination(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_proposals(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { proposal_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      proposal {\n        title\n        status\n        voting_end_time\n        deposit_end_time\n        type\n        account {\n          address\n        }\n        is_expedited\n      }\n      proposal_id\n      resolved_height\n    }\n  }\n"];
@@ -145,6 +164,12 @@ export function graphql(
 export function graphql(
   source: "\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(where: $expression, offset: $offset, limit: $pageSize) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"
+): typeof documents["\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(where: $expression, offset: $offset, limit: $pageSize) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
+): typeof documents["\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 
 export function graphql(source: string): unknown;
 export function graphql(source: string) {
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index a4d39728f..399b8fef1 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -11293,6 +11293,61 @@ export type GetContractListCountByAdminQuery = {
   };
 };
 
+export type GetPoolListQueryVariables = Exact<{
+  expression?: InputMaybe<Pools_Bool_Exp>;
+  offset: Scalars["Int"];
+  pageSize: Scalars["Int"];
+}>;
+
+export type GetPoolListQuery = {
+  __typename?: "query_root";
+  pools: Array<{
+    __typename?: "pools";
+    id: number;
+    type: any;
+    is_superfluid: boolean;
+    liquidity: any;
+  }>;
+};
+
+export type GetPoolListCountQueryVariables = Exact<{
+  expression?: InputMaybe<Pools_Bool_Exp>;
+}>;
+
+export type GetPoolListCountQuery = {
+  __typename?: "query_root";
+  pools_aggregate: {
+    __typename?: "pools_aggregate";
+    aggregate?: { __typename?: "pools_aggregate_fields"; count: number } | null;
+  };
+};
+
+export type GetPoolByPoolIdQueryVariables = Exact<{
+  poolId: Scalars["Int"];
+}>;
+
+export type GetPoolByPoolIdQuery = {
+  __typename?: "query_root";
+  pools_by_pk?: {
+    __typename?: "pools";
+    id: number;
+    type: any;
+    is_superfluid: boolean;
+    is_supported: boolean;
+    liquidity: any;
+    address: string;
+    swap_fee: string;
+    exit_fee: string;
+    future_pool_governor: string;
+    weight?: any | null;
+    smooth_weight_change_params?: any | null;
+    scaling_factors?: any | null;
+    scaling_factor_controller?: string | null;
+    transaction?: { __typename?: "transactions"; block_height: number } | null;
+    account?: { __typename?: "accounts"; address: string } | null;
+  } | null;
+};
+
 export type GetRelatedProposalsByContractAddressPaginationQueryVariables =
   Exact<{
     contractAddress: Scalars["String"];
@@ -11459,6 +11514,43 @@ export type GetTxsCountByAddressQuery = {
   };
 };
 
+export type GetTxsByPoolIdPaginationQueryVariables = Exact<{
+  expression?: InputMaybe<Pool_Transactions_Bool_Exp>;
+  offset: Scalars["Int"];
+  pageSize: Scalars["Int"];
+}>;
+
+export type GetTxsByPoolIdPaginationQuery = {
+  __typename?: "query_root";
+  pool_transactions: Array<{
+    __typename?: "pool_transactions";
+    block: { __typename?: "blocks"; height: number; timestamp: any };
+    transaction: {
+      __typename?: "transactions";
+      hash: any;
+      success: boolean;
+      messages: any;
+      is_ibc: boolean;
+      account: { __typename?: "accounts"; address: string };
+    };
+  }>;
+};
+
+export type GetTxsCountByPoolIdQueryVariables = Exact<{
+  expression?: InputMaybe<Pool_Transactions_Bool_Exp>;
+}>;
+
+export type GetTxsCountByPoolIdQuery = {
+  __typename?: "query_root";
+  pool_transactions_aggregate: {
+    __typename?: "pool_transactions_aggregate";
+    aggregate?: {
+      __typename?: "pool_transactions_aggregate_fields";
+      count: number;
+    } | null;
+  };
+};
+
 export const GetBlockTimestampByHeightQueryDocument = {
   kind: "Document",
   definitions: [
@@ -14264,6 +14356,279 @@ export const GetContractListCountByAdminDocument = {
   GetContractListCountByAdminQuery,
   GetContractListCountByAdminQueryVariables
 >;
+export const GetPoolListDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getPoolList" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "expression" },
+          },
+          type: {
+            kind: "NamedType",
+            name: { kind: "Name", value: "pools_bool_exp" },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "offset" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "pageSize" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "pools" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "where" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "expression" },
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "order_by" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "id" },
+                      value: { kind: "EnumValue", value: "asc" },
+                    },
+                  ],
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "offset" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "offset" },
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "limit" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "pageSize" },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "id" } },
+                { kind: "Field", name: { kind: "Name", value: "type" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_superfluid" },
+                },
+                { kind: "Field", name: { kind: "Name", value: "liquidity" } },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<GetPoolListQuery, GetPoolListQueryVariables>;
+export const GetPoolListCountDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getPoolListCount" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "expression" },
+          },
+          type: {
+            kind: "NamedType",
+            name: { kind: "Name", value: "pools_bool_exp" },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "pools_aggregate" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "where" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "expression" },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "aggregate" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "count" } },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  GetPoolListCountQuery,
+  GetPoolListCountQueryVariables
+>;
+export const GetPoolByPoolIdDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getPoolByPoolId" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "poolId" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "pools_by_pk" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "id" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "poolId" },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "id" } },
+                { kind: "Field", name: { kind: "Name", value: "type" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_superfluid" },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_supported" },
+                },
+                { kind: "Field", name: { kind: "Name", value: "liquidity" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "transaction" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "block_height" },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "account" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "address" },
+                      },
+                    ],
+                  },
+                },
+                { kind: "Field", name: { kind: "Name", value: "address" } },
+                { kind: "Field", name: { kind: "Name", value: "swap_fee" } },
+                { kind: "Field", name: { kind: "Name", value: "exit_fee" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "future_pool_governor" },
+                },
+                { kind: "Field", name: { kind: "Name", value: "weight" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "smooth_weight_change_params" },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "scaling_factors" },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "scaling_factor_controller" },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  GetPoolByPoolIdQuery,
+  GetPoolByPoolIdQueryVariables
+>;
 export const GetRelatedProposalsByContractAddressPaginationDocument = {
   kind: "Document",
   definitions: [
@@ -15264,3 +15629,203 @@ export const GetTxsCountByAddressDocument = {
   GetTxsCountByAddressQuery,
   GetTxsCountByAddressQueryVariables
 >;
+export const GetTxsByPoolIdPaginationDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getTxsByPoolIdPagination" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "expression" },
+          },
+          type: {
+            kind: "NamedType",
+            name: { kind: "Name", value: "pool_transactions_bool_exp" },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "offset" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "pageSize" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "pool_transactions" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "where" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "expression" },
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "offset" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "offset" },
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "limit" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "pageSize" },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "block" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "height" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "timestamp" },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "transaction" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "account" },
+                        selectionSet: {
+                          kind: "SelectionSet",
+                          selections: [
+                            {
+                              kind: "Field",
+                              name: { kind: "Name", value: "address" },
+                            },
+                          ],
+                        },
+                      },
+                      { kind: "Field", name: { kind: "Name", value: "hash" } },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "success" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "messages" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "is_ibc" },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  GetTxsByPoolIdPaginationQuery,
+  GetTxsByPoolIdPaginationQueryVariables
+>;
+export const GetTxsCountByPoolIdDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getTxsCountByPoolId" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "expression" },
+          },
+          type: {
+            kind: "NamedType",
+            name: { kind: "Name", value: "pool_transactions_bool_exp" },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "pool_transactions_aggregate" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "where" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "expression" },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "aggregate" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "count" } },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  GetTxsCountByPoolIdQuery,
+  GetTxsCountByPoolIdQueryVariables
+>;
diff --git a/src/lib/pages/pool/components/PoolAssetDetail.tsx b/src/lib/pages/pool/components/PoolAssetDetail.tsx
index 35833e54b..47b6ba35e 100644
--- a/src/lib/pages/pool/components/PoolAssetDetail.tsx
+++ b/src/lib/pages/pool/components/PoolAssetDetail.tsx
@@ -1,4 +1,5 @@
 import { Flex, Heading, Badge, Text, Box } from "@chakra-ui/react";
+import type { Coin } from "@cosmjs/stargate";
 import type { Big } from "big.js";
 import big from "big.js";
 import Link from "next/link";
@@ -7,13 +8,12 @@ import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { useAssetInfos } from "lib/services/assetService";
 import type { USD } from "lib/types";
-import type { PoolLiquidity } from "lib/types/pool";
 import { calAssetValueWithPrecision, formatPrice } from "lib/utils";
 
 import { PoolAssetsTable } from "./table/PoolAssetsTable";
 
 interface PoolAssetDetailProps {
-  assets: PoolLiquidity[];
+  assets: Coin[];
 }
 export const PoolAssetDetail = ({ assets }: PoolAssetDetailProps) => {
   const { assetInfos } = useAssetInfos();
diff --git a/src/lib/pages/pool/components/PoolCard.tsx b/src/lib/pages/pool/components/PoolCard.tsx
index 2fd43da3c..04990f51b 100644
--- a/src/lib/pages/pool/components/PoolCard.tsx
+++ b/src/lib/pages/pool/components/PoolCard.tsx
@@ -46,7 +46,7 @@ export const PoolCard = ({
       <Skeleton height="175px" startColor="pebble.900" endColor="pebble.800" />
     );
 
-  const liquidity = item.pool_liquidity.reduce((total, asset) => {
+  const liquidity = item.poolLiquidity.reduce((total, asset) => {
     const assetInfo = assetInfos[asset.denom];
     return total.add(
       assetInfo
@@ -79,10 +79,10 @@ export const PoolCard = ({
     >
       <Flex>
         <PoolHeader
-          poolId={item.pool_id}
-          isSuperFluid={item.is_superfluid}
-          poolType={item.pool_type}
-          poolLiquidity={item.pool_liquidity}
+          poolId={item.id}
+          isSuperFluid={item.isSuperfluid}
+          poolType={item.type}
+          poolLiquidity={item.poolLiquidity}
         />
         <Flex w="72px" justifyContent="flex-end">
           <Tooltip
@@ -144,7 +144,7 @@ export const PoolCard = ({
           },
         }}
       >
-        {item.pool_liquidity.map((asset) => (
+        {item.poolLiquidity.map((asset) => (
           <Flex
             bg="pebble.800"
             px={3}
diff --git a/src/lib/pages/pool/components/PoolDetailHeader.tsx b/src/lib/pages/pool/components/PoolDetailHeader.tsx
index f5eec0ee8..c3283646b 100644
--- a/src/lib/pages/pool/components/PoolDetailHeader.tsx
+++ b/src/lib/pages/pool/components/PoolDetailHeader.tsx
@@ -16,8 +16,10 @@ import {
   chakra,
   Tooltip,
 } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
 import Big from "big.js";
 
+import { getAddressTypeByLength } from "lib/app-provider";
 import { BackButton } from "lib/components/button";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
@@ -32,11 +34,11 @@ interface PoolDetailHeaderProp {
   pool: PoolDetail;
 }
 const unwrapScalingFactor = ({
-  scaling_factors,
-  scaling_factor_controller,
+  scalingFactors,
+  scalingFactorController,
 }: PoolDetail) => ({
-  scaling_factors,
-  scaling_factor_controller,
+  scalingFactors,
+  scalingFactorController,
 });
 
 const StyledTextLabel = chakra(Text, {
@@ -55,6 +57,7 @@ const StyledTextContent = chakra(Text, {
   },
 });
 export const PoolDetailHeader = ({ pool }: PoolDetailHeaderProp) => {
+  const { currentChainName } = useWallet();
   const {
     isOpen: isModalWeightOpen,
     onClose: onModalWeightClose,
@@ -65,15 +68,16 @@ export const PoolDetailHeader = ({ pool }: PoolDetailHeaderProp) => {
     onClose: onModalScalingClose,
     onOpen: onModalScalingOpen,
   } = useDisclosure();
+
   return (
     <>
       <BackButton />
       <Flex mt={4} justifyContent="space-between" alignItems="flex-start">
         <PoolHeader
-          poolId={pool.pool_id}
-          isSuperFluid={pool.is_superfluid}
-          poolType={pool.pool_type}
-          poolLiquidity={pool.pool_liquidity}
+          poolId={pool.id}
+          isSuperFluid={pool.isSuperfluid}
+          poolType={pool.type}
+          poolLiquidity={pool.poolLiquidity}
         />
         <Flex gap={2} alignItems="flex-start">
           <Button
@@ -112,22 +116,20 @@ export const PoolDetailHeader = ({ pool }: PoolDetailHeaderProp) => {
       >
         <Flex flexDirection="column" gap={1}>
           <StyledTextLabel> Pool ID</StyledTextLabel>
-          <StyledTextContent color="lilac.main">
-            {pool.pool_id}
-          </StyledTextContent>
+          <StyledTextContent color="lilac.main">{pool.id}</StyledTextContent>
         </Flex>
         <Flex flexDirection="column" gap={1}>
           <StyledTextLabel> Created Height</StyledTextLabel>
           <StyledTextContent color="lilac.main">
-            {pool.create_tx_id}
+            {pool.blockHeight}
           </StyledTextContent>
         </Flex>
         <Flex flexDirection="column" gap={1}>
           <StyledTextLabel> Pool Created by</StyledTextLabel>
           <StyledTextContent color="lilac.main">
             <ExplorerLink
-              type="user_address"
-              value={truncate(pool.account.address)}
+              type={getAddressTypeByLength(currentChainName, pool.creator)}
+              value={truncate(pool.creator)}
             />
           </StyledTextContent>
         </Flex>
@@ -147,7 +149,7 @@ export const PoolDetailHeader = ({ pool }: PoolDetailHeaderProp) => {
             </Tooltip>
           </Flex>
           <StyledTextContent>
-            {formatPercentValue(Big(pool.swap_fee).times(100))}
+            {formatPercentValue(Big(pool.swapFee).times(100))}
           </StyledTextContent>
         </Flex>
         <Flex flexDirection="column" gap={1}>
@@ -166,7 +168,7 @@ export const PoolDetailHeader = ({ pool }: PoolDetailHeaderProp) => {
             </Tooltip>
           </Flex>
           <StyledTextContent>
-            {formatPercentValue(Big(pool.exit_fee).times(100))}
+            {formatPercentValue(Big(pool.exitFee).times(100))}
           </StyledTextContent>
         </Flex>
         <Flex flexDirection="column" gap={1}>
@@ -178,10 +180,10 @@ export const PoolDetailHeader = ({ pool }: PoolDetailHeaderProp) => {
             color="text.main"
             w="fit-content"
           >
-            {pool.future_pool_governor}
+            {pool.futurePoolGovernor}
           </Tag>
         </Flex>
-        {pool.smooth_weight_change_params && (
+        {pool.smoothWeightChangeParams && (
           <Flex flexDirection="column" gap={1}>
             <StyledTextLabel> Smooth weight change params</StyledTextLabel>
             <StyledTextContent
@@ -218,7 +220,7 @@ export const PoolDetailHeader = ({ pool }: PoolDetailHeaderProp) => {
                   >
                     <JsonReadOnly
                       text={jsonPrettify(
-                        JSON.stringify(pool.smooth_weight_change_params)
+                        JSON.stringify(pool.smoothWeightChangeParams)
                       )}
                       canCopy
                       showLines={16}
@@ -229,7 +231,7 @@ export const PoolDetailHeader = ({ pool }: PoolDetailHeaderProp) => {
             </Modal>
           </Flex>
         )}
-        {pool.scaling_factors && (
+        {pool.scalingFactors && (
           <Flex flexDirection="column" gap={1}>
             <StyledTextLabel>Scaling Factor</StyledTextLabel>
             <StyledTextContent
diff --git a/src/lib/pages/pool/components/PoolHeader.tsx b/src/lib/pages/pool/components/PoolHeader.tsx
index 1d3d89293..0f30f749c 100644
--- a/src/lib/pages/pool/components/PoolHeader.tsx
+++ b/src/lib/pages/pool/components/PoolHeader.tsx
@@ -7,11 +7,12 @@ import { getTokenLabel } from "lib/utils";
 import { PoolLogo } from "./PoolLogo";
 
 interface PoolHeaderProps {
-  poolId: PoolDetail["pool_id"];
-  isSuperFluid: PoolDetail["is_superfluid"];
-  poolType: PoolDetail["pool_type"];
-  poolLiquidity: PoolDetail["pool_liquidity"];
+  poolId: PoolDetail["id"];
+  isSuperFluid: PoolDetail["isSuperfluid"];
+  poolType: PoolDetail["type"];
+  poolLiquidity: PoolDetail["poolLiquidity"];
 }
+
 export const PoolHeader = ({
   poolId,
   isSuperFluid,
diff --git a/src/lib/pages/pool/components/PoolList.tsx b/src/lib/pages/pool/components/PoolList.tsx
index 49015b452..5eaa741c8 100644
--- a/src/lib/pages/pool/components/PoolList.tsx
+++ b/src/lib/pages/pool/components/PoolList.tsx
@@ -84,12 +84,7 @@ export const PoolList = ({ pools }: PoolListProp) => {
       </Flex>
       <SimpleGrid columns={{ sm: 1, md: 2 }} spacing={4} w="full" mt={4}>
         {pools.map((item) => (
-          <PoolCard
-            key={item.pool_id}
-            item={item}
-            poolId={item.pool_id}
-            mode={toggle}
-          />
+          <PoolCard key={item.id} item={item} poolId={item.id} mode={toggle} />
         ))}
       </SimpleGrid>
     </>
diff --git a/src/lib/pages/pool/components/PoolLogo.tsx b/src/lib/pages/pool/components/PoolLogo.tsx
index 05d53cf55..ce90d2789 100644
--- a/src/lib/pages/pool/components/PoolLogo.tsx
+++ b/src/lib/pages/pool/components/PoolLogo.tsx
@@ -6,7 +6,7 @@ import type { PoolDetail } from "lib/types/pool";
 import { UndefinedTokenList } from "./constant";
 
 interface PoolLogoProps {
-  poolLiquidity: PoolDetail["pool_liquidity"];
+  poolLiquidity: PoolDetail["poolLiquidity"];
 }
 export const PoolLogo = ({ poolLiquidity }: PoolLogoProps) => {
   const { assetInfos } = useAssetInfos();
diff --git a/src/lib/pages/pool/components/UnsupportedPoolCard.tsx b/src/lib/pages/pool/components/UnsupportedPoolCard.tsx
index 72e08ffa1..ce2c66c92 100644
--- a/src/lib/pages/pool/components/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pool/components/UnsupportedPoolCard.tsx
@@ -59,9 +59,9 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
                 <Flex alignItems="center" justifyContent="space-between">
                   <PoolHeader
                     poolId={poolId}
-                    isSuperFluid={item.is_superfluid}
-                    poolType={item.pool_type}
-                    poolLiquidity={item.pool_liquidity}
+                    isSuperFluid={item.isSuperfluid}
+                    poolType={item.type}
+                    poolLiquidity={item.poolLiquidity}
                   />
                   <Flex w="128px">
                     <Tooltip
@@ -128,7 +128,7 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
               </Text>
               <Flex gap={4} flexDirection="column">
                 <Flex gap={2} flexDirection="column">
-                  {item.pool_liquidity.map((asset, i) => (
+                  {item.poolLiquidity.map((asset, i) => (
                     <Flex gap={3}>
                       <Image
                         boxSize={6}
diff --git a/src/lib/pages/pool/components/UnsupportedPoolList.tsx b/src/lib/pages/pool/components/UnsupportedPoolList.tsx
index 67268b859..6bb8bd24e 100644
--- a/src/lib/pages/pool/components/UnsupportedPoolList.tsx
+++ b/src/lib/pages/pool/components/UnsupportedPoolList.tsx
@@ -67,11 +67,7 @@ export const UnsupportedPoolList = ({ pools }: UnsupportedPoolListProp) => {
       <SimpleGrid columns={1} spacing={4} w="full">
         <Accordion allowMultiple>
           {pools.map((item) => (
-            <UnsupportedPoolCard
-              key={item.pool_id}
-              item={item}
-              poolId={item.pool_id}
-            />
+            <UnsupportedPoolCard key={item.id} item={item} poolId={item.id} />
           ))}
         </Accordion>
       </SimpleGrid>
diff --git a/src/lib/pages/pool/components/constant.ts b/src/lib/pages/pool/components/constant.ts
index fdac16fa3..02e16981d 100644
--- a/src/lib/pages/pool/components/constant.ts
+++ b/src/lib/pages/pool/components/constant.ts
@@ -1,17 +1,16 @@
+import type { Addr, ContractAddr, PoolDetail } from "lib/types";
+
 export const UndefinedTokenList = [
   "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet.svg",
   "https://assets.alleslabs.dev/webapp-assets/asset/undefined-white.svg",
   "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet-light.svg",
 ];
-export const MockUpPoolList = [
+export const MockUpPoolList: PoolDetail[] = [
   {
-    pool_id: 31,
-    create_tx_id: 1231354,
-    account: {
-      address: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx",
-      id: 291362,
-    },
-    pool_liquidity: [
+    id: 31,
+    blockHeight: 1231354,
+    creator: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx" as Addr,
+    poolLiquidity: [
       {
         denom:
           "ibc/D38FD4C586C397DDAAB715C654DAEE3C3C40462CD410254AC7576208E947605B",
@@ -31,13 +30,13 @@ export const MockUpPoolList = [
         amount: "2850",
       },
     ],
-    pool_type: "Balancer",
-    is_superfluid: false,
-    is_supported: true,
-    swap_fee: "0.03000000000000000",
-    exit_fee: "0.0020000000000000",
-    future_pool_governor: "24h",
-    smooth_weight_change_params: {
+    type: "Balancer",
+    isSuperfluid: false,
+    isSupported: true,
+    swapFee: 0.03,
+    exitFee: 0.0,
+    futurePoolGovernor: "24h",
+    smoothWeightChangeParams: {
       start_time: "2023-03-09T16:35:41Z",
       duration: "1209600s",
       initial_pool_weights: [
@@ -75,8 +74,8 @@ export const MockUpPoolList = [
         },
       ],
     },
-    scaling_factors: null,
-    scaling_factor_controller: null,
+    scalingFactors: null,
+    scalingFactorController: null,
     weight: [
       {
         denom:
@@ -97,20 +96,14 @@ export const MockUpPoolList = [
         weight: "268435456000000",
       },
     ],
-    address: "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn",
-    total_shares: {
-      denom: "gamm/pool/983",
-      amount: "100000000000000000000",
-    },
+    poolAddress:
+      "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn" as ContractAddr,
   },
   {
-    pool_id: 231,
-    create_tx_id: 1231354,
-    account: {
-      address: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx",
-      id: 291362,
-    },
-    pool_liquidity: [
+    id: 231,
+    blockHeight: 1231354,
+    creator: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx" as Addr,
+    poolLiquidity: [
       {
         denom: "uion",
         amount: "268435456000000",
@@ -134,15 +127,15 @@ export const MockUpPoolList = [
         amount: "1000",
       },
     ],
-    pool_type: "Balancer",
-    is_superfluid: true,
-    is_supported: true,
-    swap_fee: "0.0300000000000000",
-    exit_fee: "0.000000000001",
-    future_pool_governor: "24h",
-    smooth_weight_change_params: null,
-    scaling_factors: null,
-    scaling_factor_controller: null,
+    type: "Balancer",
+    isSuperfluid: true,
+    isSupported: true,
+    swapFee: 0.03,
+    exitFee: 0.000000000001,
+    futurePoolGovernor: "24h",
+    smoothWeightChangeParams: null,
+    scalingFactors: null,
+    scalingFactorController: null,
     weight: [
       {
         denom:
@@ -168,20 +161,14 @@ export const MockUpPoolList = [
         weight: "268435456000000",
       },
     ],
-    address: "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn",
-    total_shares: {
-      denom: "gamm/pool/343",
-      amount: "100000000000000000000",
-    },
+    poolAddress:
+      "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn" as ContractAddr,
   },
   {
-    pool_id: 932,
-    create_tx_id: 1231354,
-    account: {
-      address: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx",
-      id: 291362,
-    },
-    pool_liquidity: [
+    id: 932,
+    blockHeight: 1231354,
+    creator: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx" as Addr,
+    poolLiquidity: [
       {
         denom: "uion",
         amount: "81386211729",
@@ -191,30 +178,24 @@ export const MockUpPoolList = [
         amount: "99224517983",
       },
     ],
-    pool_type: "Stableswap",
-    is_superfluid: true,
-    is_supported: true,
-    swap_fee: "0.00040000000000000",
-    exit_fee: "0.00000000000000000",
-    future_pool_governor: "24h",
-    smooth_weight_change_params: null,
-    scaling_factors: ["1", "1"],
-    scaling_factor_controller: "",
+    type: "Stableswap",
+    isSuperfluid: true,
+    isSupported: true,
+    swapFee: 0.0004,
+    exitFee: 0.0,
+    futurePoolGovernor: "24h",
+    smoothWeightChangeParams: null,
+    scalingFactors: ["1", "1"],
+    scalingFactorController: "",
     weight: null,
-    address: "osmo1kxnekx4q8yem6wvp5t9ggqvhuxaqw7san00x5qdazp3fe597f8hsqft4nq",
-    total_shares: {
-      denom: "gamm/pool/383",
-      amount: "100000000000000000000",
-    },
+    poolAddress:
+      "osmo1kxnekx4q8yem6wvp5t9ggqvhuxaqw7san00x5qdazp3fe597f8hsqft4nq" as ContractAddr,
   },
   {
-    pool_id: 872,
-    create_tx_id: 1231354,
-    account: {
-      address: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx",
-      id: 291362,
-    },
-    pool_liquidity: [
+    id: 872,
+    blockHeight: 1231354,
+    creator: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx" as Addr,
+    poolLiquidity: [
       {
         denom:
           "ibc/FF3065989E34457F342D4EFB8692406D49D4E2B5C70F725F127862E22CE6BDCD",
@@ -230,30 +211,24 @@ export const MockUpPoolList = [
         amount: "17983992245",
       },
     ],
-    pool_type: "Stableswap",
-    is_superfluid: false,
-    is_supported: true,
-    swap_fee: "0.0004000000000000",
-    exit_fee: "0.0000000000000000",
-    future_pool_governor: "24h",
-    smooth_weight_change_params: null,
-    scaling_factors: ["1", "1", "1"],
-    scaling_factor_controller: "",
+    type: "Stableswap",
+    isSuperfluid: false,
+    isSupported: true,
+    swapFee: 0.0004,
+    exitFee: 0.0,
+    futurePoolGovernor: "24h",
+    smoothWeightChangeParams: null,
+    scalingFactors: ["1", "1", "1"],
+    scalingFactorController: "",
     weight: null,
-    address: "osmo1kxnekx4q8yem6wvp5t9ggqvhuxaqw7san00x5qdazp3fe597f8hsqft4nq",
-    total_shares: {
-      denom: "gamm/pool/483",
-      amount: "100000000000000000000",
-    },
+    poolAddress:
+      "osmo1kxnekx4q8yem6wvp5t9ggqvhuxaqw7san00x5qdazp3fe597f8hsqft4nq" as ContractAddr,
   },
   {
-    pool_id: 21,
-    create_tx_id: 1231354,
-    account: {
-      address: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx",
-      id: 291362,
-    },
-    pool_liquidity: [
+    id: 21,
+    blockHeight: 1231354,
+    creator: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx" as Addr,
+    poolLiquidity: [
       {
         denom:
           "ibc/62CD410254AC7576208E947605BD38FD4C586C397DDAAB715C654DAEE3C3C404",
@@ -275,15 +250,15 @@ export const MockUpPoolList = [
         amount: "2825",
       },
     ],
-    pool_type: "Balancer",
-    is_superfluid: false,
-    is_supported: false,
-    swap_fee: "0.030000000000000000",
-    exit_fee: "0.0000000000000000",
-    future_pool_governor: "24h",
-    smooth_weight_change_params: null,
-    scaling_factors: null,
-    scaling_factor_controller: null,
+    type: "Balancer",
+    isSuperfluid: false,
+    isSupported: false,
+    swapFee: 0.03,
+    exitFee: 0.0,
+    futurePoolGovernor: "24h",
+    smoothWeightChangeParams: null,
+    scalingFactors: null,
+    scalingFactorController: null,
     weight: [
       {
         denom:
@@ -306,20 +281,14 @@ export const MockUpPoolList = [
         weight: "268435456000000",
       },
     ],
-    address: "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn",
-    total_shares: {
-      denom: "gamm/pool/983",
-      amount: "100000000000000000000",
-    },
+    poolAddress:
+      "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn" as ContractAddr,
   },
   {
-    pool_id: 221,
-    create_tx_id: 1231354,
-    account: {
-      address: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx",
-      id: 291362,
-    },
-    pool_liquidity: [
+    id: 221,
+    blockHeight: 1231354,
+    creator: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx" as Addr,
+    poolLiquidity: [
       {
         denom:
           "ibc/ACA4C90D15915ADA31939FA331CE745862CDD00A2904FA178A815A053CC027DB",
@@ -344,15 +313,15 @@ export const MockUpPoolList = [
         amount: "1000",
       },
     ],
-    pool_type: "Balancer",
-    is_superfluid: true,
-    is_supported: false,
-    swap_fee: "0.030000000000000000",
-    exit_fee: "0.000000000001",
-    future_pool_governor: "24h",
-    smooth_weight_change_params: null,
-    scaling_factors: null,
-    scaling_factor_controller: null,
+    type: "Balancer",
+    isSuperfluid: true,
+    isSupported: false,
+    swapFee: 0.03,
+    exitFee: 0.000000000001,
+    futurePoolGovernor: "24h",
+    smoothWeightChangeParams: null,
+    scalingFactors: null,
+    scalingFactorController: null,
     weight: [
       {
         denom:
@@ -378,20 +347,14 @@ export const MockUpPoolList = [
         weight: "268435456000000",
       },
     ],
-    address: "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn",
-    total_shares: {
-      denom: "gamm/pool/383",
-      amount: "100000000000000000000",
-    },
+    poolAddress:
+      "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn" as ContractAddr,
   },
   {
-    pool_id: 941,
-    create_tx_id: 1231354,
-    account: {
-      address: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx",
-      id: 291362,
-    },
-    pool_liquidity: [
+    id: 941,
+    blockHeight: 1231354,
+    creator: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx" as Addr,
+    poolLiquidity: [
       {
         denom:
           "ibc/6CC201E27D659B4A9837B46A328BC4B1A0596A1AB34E5C0E452CD7146BC7188F",
@@ -403,30 +366,24 @@ export const MockUpPoolList = [
         amount: "99224517983",
       },
     ],
-    pool_type: "Stableswap",
-    is_superfluid: true,
-    is_supported: false,
-    swap_fee: "0.000400000000000000",
-    exit_fee: "0.000000000000000000",
-    future_pool_governor: "24h",
-    smooth_weight_change_params: null,
-    scaling_factors: ["1", "1"],
-    scaling_factor_controller: "",
+    type: "Stableswap",
+    isSuperfluid: true,
+    isSupported: false,
+    swapFee: 0.0004,
+    exitFee: 0.0,
+    futurePoolGovernor: "24h",
+    smoothWeightChangeParams: null,
+    scalingFactors: ["1", "1"],
+    scalingFactorController: "",
     weight: null,
-    address: "osmo1kxnekx4q8yem6wvp5t9ggqvhuxaqw7san00x5qdazp3fe597f8hsqft4nq",
-    total_shares: {
-      denom: "gamm/pool/783",
-      amount: "100000000000000000000",
-    },
+    poolAddress:
+      "osmo1kxnekx4q8yem6wvp5t9ggqvhuxaqw7san00x5qdazp3fe597f8hsqft4nq" as ContractAddr,
   },
   {
-    pool_id: 372,
-    create_tx_id: 1231354,
-    account: {
-      address: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx",
-      id: 291362,
-    },
-    pool_liquidity: [
+    id: 372,
+    blockHeight: 1231354,
+    creator: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx" as Addr,
+    poolLiquidity: [
       {
         denom:
           "ibc/42D4EFB8692406FF3065989E34457F3D49D4E2B5C70F725F127862E22CE6BDCD",
@@ -442,20 +399,17 @@ export const MockUpPoolList = [
         amount: "17983992245",
       },
     ],
-    pool_type: "Stableswap",
-    is_superfluid: false,
-    is_supported: false,
-    swap_fee: "0.000400000000000000",
-    exit_fee: "0.000000000000000000",
-    future_pool_governor: "24h",
-    smooth_weight_change_params: null,
-    scaling_factors: ["1", "1", "1"],
-    scaling_factor_controller: "",
+    type: "Stableswap",
+    isSuperfluid: false,
+    isSupported: false,
+    swapFee: 0.0004,
+    exitFee: 0.0,
+    futurePoolGovernor: "24h",
+    smoothWeightChangeParams: null,
+    scalingFactors: ["1", "1", "1"],
+    scalingFactorController: "",
     weight: null,
-    address: "osmo1kxnekx4q8yem6wvp5t9ggqvhuxaqw7san00x5qdazp3fe597f8hsqft4nq",
-    total_shares: {
-      denom: "gamm/pool/783",
-      amount: "100000000000000000000",
-    },
+    poolAddress:
+      "osmo1kxnekx4q8yem6wvp5t9ggqvhuxaqw7san00x5qdazp3fe597f8hsqft4nq" as ContractAddr,
   },
 ];
diff --git a/src/lib/pages/pool/data.ts b/src/lib/pages/pool/data.ts
new file mode 100644
index 000000000..69ead2226
--- /dev/null
+++ b/src/lib/pages/pool/data.ts
@@ -0,0 +1,93 @@
+import big from "big.js";
+
+import { useAssetInfos } from "lib/services/assetService";
+import {
+  usePoolByPoolId,
+  usePoolListByIsSupported,
+} from "lib/services/poolService";
+import type { Option } from "lib/types";
+
+import { coinToTokenWithValue } from "./type";
+import type {
+  PoolCardData,
+  PoolData,
+  PoolWeight,
+  TokenWithValue,
+} from "./type";
+
+export const usePools = (
+  isSupported: boolean,
+  isSuperfluidOnly: boolean,
+  search: string,
+  offset: number,
+  pageSize: number
+): { pools: Option<PoolCardData[]>; isLoading: boolean } => {
+  const { assetInfos, isLoading: isLoadingAssetInfos } = useAssetInfos();
+  const { data: poolList, isLoading: isLoadingPoolList } =
+    usePoolListByIsSupported(
+      isSupported,
+      isSuperfluidOnly,
+      search,
+      offset,
+      pageSize
+    );
+
+  if (!assetInfos || !poolList)
+    return {
+      pools: undefined,
+      isLoading: isLoadingAssetInfos || isLoadingPoolList,
+    };
+
+  const data = poolList.map<PoolCardData>((pool) => ({
+    id: pool.id,
+    type: pool.type,
+    isSuperfluid: pool.isSuperfluid,
+    poolLiquidity: pool.poolLiquidity.map<TokenWithValue>((coin) =>
+      coinToTokenWithValue(coin.denom, coin.amount, assetInfos[coin.denom])
+    ),
+  }));
+
+  return {
+    pools: data,
+    isLoading: false,
+  };
+};
+
+export const usePool = (
+  poolId: number
+): { pool: Option<PoolData>; isLoading: boolean } => {
+  const { assetInfos, isLoading: isLoadingAssetInfos } = useAssetInfos();
+  const { data: pool, isLoading: isLoadingPoolInfo } = usePoolByPoolId(poolId);
+
+  if (!assetInfos || !pool)
+    return {
+      pool: undefined,
+      isLoading: isLoadingAssetInfos || isLoadingPoolInfo,
+    };
+
+  return {
+    pool: {
+      id: pool.id,
+      type: pool.type,
+      isSuperfluid: pool.isSuperfluid,
+      isSupported: pool.isSupported,
+      poolLiquidity: pool.poolLiquidity.map<TokenWithValue>((coin) =>
+        coinToTokenWithValue(coin.denom, coin.amount, assetInfos[coin.denom])
+      ),
+      blockHeight: pool.blockHeight,
+      creator: pool.creator,
+      poolAddress: pool.poolAddress,
+      swapFee: pool.swapFee,
+      exitFee: pool.exitFee,
+      futurePoolGovernor: pool.futurePoolGovernor,
+      weight: pool.weight?.map<PoolWeight>((weight) => ({
+        denom: weight.denom,
+        weight: big(weight.weight),
+      })),
+      smoothWeightChangeParams: pool.smoothWeightChangeParams,
+      scalingFactors: pool.scalingFactors,
+      scalingFactorController: pool.scalingFactorController,
+    },
+    isLoading: false,
+  };
+};
diff --git a/src/lib/pages/pool/index.tsx b/src/lib/pages/pool/index.tsx
index f492b9402..d834f2d6c 100644
--- a/src/lib/pages/pool/index.tsx
+++ b/src/lib/pages/pool/index.tsx
@@ -79,24 +79,22 @@ export const PoolIndex = () => {
       </Flex>
       <Tabs>
         <TabList my={8} borderBottom="1px" borderColor="pebble.800">
-          <CustomTab
-            count={MockUpPoolList.filter((x) => x.is_supported).length}
-          >
+          <CustomTab count={MockUpPoolList.filter((x) => x.isSupported).length}>
             Pools
           </CustomTab>
           <CustomTab
-            count={MockUpPoolList.filter((x) => !x.is_supported).length}
+            count={MockUpPoolList.filter((x) => !x.isSupported).length}
           >
             Pools with unsupported tokens
           </CustomTab>
         </TabList>
         <TabPanels>
           <TabPanel p={0}>
-            <PoolList pools={MockUpPoolList.filter((x) => x.is_supported)} />
+            <PoolList pools={MockUpPoolList.filter((x) => x.isSupported)} />
           </TabPanel>
           <TabPanel p={0}>
             <UnsupportedPoolList
-              pools={MockUpPoolList.filter((x) => !x.is_supported)}
+              pools={MockUpPoolList.filter((x) => !x.isSupported)}
             />
           </TabPanel>
         </TabPanels>
diff --git a/src/lib/pages/pool/poolId.tsx b/src/lib/pages/pool/poolId.tsx
index b56c48328..56386ba8f 100644
--- a/src/lib/pages/pool/poolId.tsx
+++ b/src/lib/pages/pool/poolId.tsx
@@ -15,12 +15,12 @@ export const PoolId = () => {
 
   if (!router.query.poolId) return <Loading />;
   const query = router.query.poolId;
-  const pool = MockUpPoolList.find((x) => x.pool_id === +query);
+  const pool = MockUpPoolList.find((x) => x.id === +query);
   if (!pool) return navigate({ pathname: `/pool` });
   return (
     <PageContainer>
       <PoolDetailHeader pool={pool} />
-      <PoolAssetDetail assets={pool.pool_liquidity} />
+      <PoolAssetDetail assets={pool.poolLiquidity} />
       <PoolRelatedTxs />
     </PageContainer>
   );
diff --git a/src/lib/pages/pool/type.ts b/src/lib/pages/pool/type.ts
new file mode 100644
index 000000000..02ef4d914
--- /dev/null
+++ b/src/lib/pages/pool/type.ts
@@ -0,0 +1,68 @@
+import type { Big } from "big.js";
+import big from "big.js";
+
+import type {
+  Addr,
+  AssetInfo,
+  ContractAddr,
+  Option,
+  Token,
+  U,
+  USD,
+} from "lib/types";
+import { calculateAssetValue, toToken } from "lib/utils";
+
+export const coinToTokenWithValue = (
+  denom: string,
+  amount: string,
+  assetInfo: Option<AssetInfo>
+): TokenWithValue => {
+  const tokenAmount = big(amount) as U<Token<Big>>;
+  return {
+    denom,
+    amount: tokenAmount,
+    logo: assetInfo?.logo,
+    precision: assetInfo?.precision,
+    value: assetInfo
+      ? calculateAssetValue(
+          toToken(tokenAmount, assetInfo.precision),
+          assetInfo.price as USD<number>
+        )
+      : undefined,
+  };
+};
+
+// TODO: combine with the type in delegation
+export interface TokenWithValue {
+  denom: string;
+  amount: U<Token<Big>>;
+  logo: Option<string>;
+  precision: Option<number>;
+  value: Option<USD<Big>>;
+}
+
+export interface PoolWeight {
+  denom: string;
+  weight: Big;
+}
+
+export interface PoolCardData {
+  id: number;
+  type: string;
+  isSuperfluid: boolean;
+  poolLiquidity: TokenWithValue[];
+}
+
+export interface PoolData extends PoolCardData {
+  isSupported: boolean;
+  blockHeight: Option<number>;
+  creator: Option<Addr>;
+  poolAddress: ContractAddr;
+  swapFee: number;
+  exitFee: number;
+  futurePoolGovernor: string | null;
+  smoothWeightChangeParams: Option<object | null>;
+  scalingFactors: Option<string[] | null>;
+  scalingFactorController: Option<string | null>;
+  weight: Option<PoolWeight[] | null>;
+}
diff --git a/src/lib/query/index.ts b/src/lib/query/index.ts
index d921e83a3..d919d9a2b 100644
--- a/src/lib/query/index.ts
+++ b/src/lib/query/index.ts
@@ -1,5 +1,6 @@
 export * from "./block";
 export * from "./code";
 export * from "./contract";
+export * from "./pool";
 export * from "./proposal";
 export * from "./tx";
diff --git a/src/lib/query/pool.ts b/src/lib/query/pool.ts
new file mode 100644
index 000000000..761367ef0
--- /dev/null
+++ b/src/lib/query/pool.ts
@@ -0,0 +1,57 @@
+import { graphql } from "lib/gql";
+
+export const getPoolList = graphql(`
+  query getPoolList(
+    $expression: pools_bool_exp
+    $offset: Int!
+    $pageSize: Int!
+  ) {
+    pools(
+      where: $expression
+      order_by: { id: asc }
+      offset: $offset
+      limit: $pageSize
+    ) {
+      id
+      type
+      is_superfluid
+      liquidity
+    }
+  }
+`);
+
+export const getPoolListCount = graphql(`
+  query getPoolListCount($expression: pools_bool_exp) {
+    pools_aggregate(where: $expression) {
+      aggregate {
+        count
+      }
+    }
+  }
+`);
+
+export const getPoolByPoolId = graphql(`
+  query getPoolByPoolId($poolId: Int!) {
+    pools_by_pk(id: $poolId) {
+      id
+      type
+      is_superfluid
+      is_supported
+      liquidity
+      transaction {
+        block_height
+      }
+      account {
+        address
+      }
+      address
+      swap_fee
+      exit_fee
+      future_pool_governor
+      weight
+      smooth_weight_change_params
+      scaling_factors
+      scaling_factor_controller
+    }
+  }
+`);
diff --git a/src/lib/query/tx.ts b/src/lib/query/tx.ts
index 87cdaacdc..f3458944f 100644
--- a/src/lib/query/tx.ts
+++ b/src/lib/query/tx.ts
@@ -46,3 +46,37 @@ export const getTxsCountByAddress = graphql(`
     }
   }
 `);
+
+export const getTxsByPoolIdPagination = graphql(`
+  query getTxsByPoolIdPagination(
+    $expression: pool_transactions_bool_exp
+    $offset: Int!
+    $pageSize: Int!
+  ) {
+    pool_transactions(where: $expression, offset: $offset, limit: $pageSize) {
+      block {
+        height
+        timestamp
+      }
+      transaction {
+        account {
+          address
+        }
+        hash
+        success
+        messages
+        is_ibc
+      }
+    }
+  }
+`);
+
+export const getTxsCountByPoolId = graphql(`
+  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {
+    pool_transactions_aggregate(where: $expression) {
+      aggregate {
+        count
+      }
+    }
+  }
+`);
diff --git a/src/lib/services/expression/poolExpression.ts b/src/lib/services/expression/poolExpression.ts
new file mode 100644
index 000000000..339a30665
--- /dev/null
+++ b/src/lib/services/expression/poolExpression.ts
@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+
+export const usePoolExpression = (
+  isSupported: boolean,
+  isSuperfluidOnly: boolean,
+  search: string
+) =>
+  useMemo(
+    () => ({
+      is_supported: { _eq: isSupported },
+      is_superfluid: isSuperfluidOnly ? { _eq: true } : {},
+      id: search.trim().length ? { _eq: Number(search) } : {},
+    }),
+    [isSuperfluidOnly, isSupported, search]
+  );
diff --git a/src/lib/services/expression/txExpression.ts b/src/lib/services/expression/txExpression.ts
index c4a950303..02de4bc16 100644
--- a/src/lib/services/expression/txExpression.ts
+++ b/src/lib/services/expression/txExpression.ts
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 
-import type { Addr, Option, TxFilters } from "lib/types";
+import type { Addr, Option, PoolTxFilter, TxFilters } from "lib/types";
 import { isTxHash } from "lib/utils";
 
 const actions = {
@@ -51,3 +51,15 @@ export const useTxExpression = (
     }),
     [address, filters, isSigner, search]
   );
+
+export const usePoolTxExpression = (
+  poolId: Option<number>,
+  type: Option<PoolTxFilter>
+) =>
+  useMemo(
+    () => ({
+      pool_id: poolId ? { _eq: poolId } : {},
+      ...(type ? { [type]: { _eq: true } } : {}),
+    }),
+    [poolId, type]
+  );
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
new file mode 100644
index 000000000..15498a9d9
--- /dev/null
+++ b/src/lib/services/poolService.ts
@@ -0,0 +1,111 @@
+import type { UseQueryResult } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback } from "react";
+
+import { useCelatoneApp } from "lib/app-provider";
+import { getPoolByPoolId, getPoolList, getPoolListCount } from "lib/query";
+import type { Pool, PoolDetail } from "lib/types";
+
+import { usePoolExpression } from "./expression/poolExpression";
+
+export const usePoolListByIsSupported = (
+  isSupported: boolean,
+  isSuperfluidOnly: boolean,
+  search: string,
+  offset: number,
+  pageSize: number
+): UseQueryResult<Pool[]> => {
+  const { indexerGraphClient } = useCelatoneApp();
+  const expression = usePoolExpression(isSupported, isSuperfluidOnly, search);
+
+  const queryFn = useCallback(async () => {
+    return indexerGraphClient
+      .request(getPoolList, {
+        expression,
+        offset,
+        pageSize,
+      })
+      .then(({ pools }) =>
+        pools.map((pool) => ({
+          id: pool.id,
+          type: pool.type,
+          isSuperfluid: pool.is_superfluid,
+          poolLiquidity: pool.liquidity,
+        }))
+      );
+  }, [expression, indexerGraphClient, offset, pageSize]);
+
+  return useQuery(
+    [
+      "pool_list_by_is_supported",
+      isSupported,
+      isSuperfluidOnly,
+      offset,
+      pageSize,
+      indexerGraphClient,
+    ],
+    queryFn
+  );
+};
+
+export const usePoolListCountByIsSupported = (
+  isSupported: boolean,
+  isSuperfluidOnly: boolean,
+  search: string
+): UseQueryResult<number> => {
+  const { indexerGraphClient } = useCelatoneApp();
+  const expression = usePoolExpression(isSupported, isSuperfluidOnly, search);
+
+  const queryFn = useCallback(async () => {
+    return indexerGraphClient
+      .request(getPoolListCount, {
+        expression,
+      })
+      .then(({ pools_aggregate }) => pools_aggregate.aggregate?.count);
+  }, [expression, indexerGraphClient]);
+
+  return useQuery(
+    [
+      "pool_list_count_by_is_supported",
+      isSupported,
+      isSuperfluidOnly,
+      search,
+      indexerGraphClient,
+    ],
+    queryFn
+  );
+};
+
+export const usePoolByPoolId = (poolId: number): UseQueryResult<PoolDetail> => {
+  const { indexerGraphClient } = useCelatoneApp();
+
+  const queryFn = useCallback(async () => {
+    return indexerGraphClient
+      .request(getPoolByPoolId, {
+        poolId,
+      })
+      .then(({ pools_by_pk }) =>
+        pools_by_pk
+          ? ({
+              id: pools_by_pk.id,
+              type: pools_by_pk.type,
+              isSuperfluid: pools_by_pk.is_superfluid,
+              isSupported: pools_by_pk.is_supported,
+              poolLiquidity: pools_by_pk.liquidity,
+              blockHeight: pools_by_pk.transaction?.block_height,
+              creator: pools_by_pk.account?.address,
+              poolAddress: pools_by_pk.address,
+              swapFee: Number(pools_by_pk.swap_fee),
+              exitFee: Number(pools_by_pk.exit_fee),
+              futurePoolGovernor: pools_by_pk.future_pool_governor,
+              weight: pools_by_pk.weight,
+              smoothWeightChangeParams: pools_by_pk.smooth_weight_change_params,
+              scalingFactors: pools_by_pk.scaling_factors,
+              scalingFactorController: pools_by_pk.scaling_factor_controller,
+            } as PoolDetail)
+          : undefined
+      );
+  }, [poolId, indexerGraphClient]);
+
+  return useQuery(["pool_by_pool_id", poolId, indexerGraphClient], queryFn);
+};
diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index fe2aebfe9..41787d4d8 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -7,8 +7,20 @@ import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 
 import { useCelatoneApp, useChainId } from "lib/app-provider";
-import { getTxsByAddressPagination, getTxsCountByAddress } from "lib/query";
-import type { Addr, Option, Transaction, TxFilters } from "lib/types";
+import {
+  getTxsByAddressPagination,
+  getTxsByPoolIdPagination,
+  getTxsCountByAddress,
+  getTxsCountByPoolId,
+} from "lib/query";
+import type {
+  Addr,
+  Option,
+  PoolTxFilter,
+  Transaction,
+  TxFilters,
+} from "lib/types";
+import { MsgFurtherAction, ActionMsgType } from "lib/types";
 import {
   getActionMsgType,
   getMsgFurtherAction,
@@ -18,7 +30,7 @@ import {
   snakeToCamel,
 } from "lib/utils";
 
-import { useTxExpression } from "./expression";
+import { usePoolTxExpression, useTxExpression } from "./expression";
 import type { TxResponse } from "./tx";
 import { queryTxData } from "./tx";
 
@@ -161,3 +173,72 @@ export const useTxsCountByAddress = (
     }
   );
 };
+
+export const useTxsByPoolIdPagination = (
+  poolId: Option<number>,
+  type: Option<PoolTxFilter>,
+  offset: number,
+  pageSize: number
+): UseQueryResult<Transaction[]> => {
+  const { indexerGraphClient } = useCelatoneApp();
+  const expression = usePoolTxExpression(poolId, type);
+
+  const queryFn = useCallback(async () => {
+    return indexerGraphClient
+      .request(getTxsByPoolIdPagination, {
+        expression,
+        offset,
+        pageSize,
+      })
+      .then(({ pool_transactions }) =>
+        pool_transactions.map((transaction) => ({
+          hash: parseTxHash(transaction.transaction.hash),
+          messages: snakeToCamel(transaction.transaction.messages),
+          sender: transaction.transaction.account.address as Addr,
+          isSigner: true,
+          height: transaction.block.height,
+          created: parseDateOpt(transaction.block.timestamp),
+          success: transaction.transaction.success,
+          actionMsgType: ActionMsgType.OTHER_ACTION_MSG,
+          furtherAction: MsgFurtherAction.NONE,
+          isIbc: transaction.transaction.is_ibc,
+          isInstantiate: false,
+        }))
+      );
+  }, [expression, indexerGraphClient, offset, pageSize]);
+
+  return useQuery(
+    ["transactions_by_pool_id", poolId, offset, pageSize, indexerGraphClient],
+    queryFn,
+    {
+      enabled: !!poolId,
+    }
+  );
+};
+
+export const useTxsCountByPoolId = (
+  poolId: Option<number>,
+  type: Option<PoolTxFilter>
+): UseQueryResult<Option<number>> => {
+  const { indexerGraphClient } = useCelatoneApp();
+  const expression = usePoolTxExpression(poolId, type);
+
+  const queryFn = useCallback(async () => {
+    return indexerGraphClient
+      .request(getTxsCountByPoolId, {
+        expression,
+      })
+      .then(
+        ({ pool_transactions_aggregate }) =>
+          pool_transactions_aggregate.aggregate?.count
+      );
+  }, [expression, indexerGraphClient]);
+
+  return useQuery(
+    ["transactions_count_by_pool_id", poolId, indexerGraphClient],
+    queryFn,
+    {
+      enabled: !!poolId,
+    }
+  );
+};
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index 4fbee19cb..ba2250172 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -1,42 +1,29 @@
-import type { Option } from "lib/types";
+import type { Coin } from "@cosmjs/stargate";
 
-export interface PoolLiquidity {
-  denom: string;
-  amount: string;
-}
+import type { Addr, ContractAddr, Option } from "lib/types";
 
-export interface PoolWeight {
+interface PoolWeight {
   denom: string;
   weight: string;
 }
-export interface TotalShares {
-  denom: string;
-  amount: string;
-}
 
-export interface SmoothWeightChangeParams {
-  start_time: string;
-  duration: string;
-}
-export interface PoolAccount {
-  address: string;
+export interface Pool {
   id: number;
+  type: string;
+  isSuperfluid: boolean;
+  poolLiquidity: Coin[];
 }
-export interface PoolDetail {
-  pool_id: number;
-  create_tx_id: number;
-  account: PoolAccount;
-  pool_liquidity: PoolLiquidity[];
-  pool_type: string;
-  is_superfluid: boolean;
-  is_supported: boolean;
-  swap_fee: string;
-  exit_fee: string;
-  future_pool_governor: Option<string | null>;
-  smooth_weight_change_params: Option<object | null>;
-  scaling_factors: Option<string[] | null>;
-  scaling_factor_controller: Option<string | null>;
+
+export interface PoolDetail extends Pool {
+  isSupported: boolean;
+  blockHeight: Option<number>;
+  creator: Option<Addr>;
+  poolAddress: ContractAddr;
+  swapFee: number;
+  exitFee: number;
+  futurePoolGovernor: string | null;
+  smoothWeightChangeParams: Option<object | null>;
+  scalingFactors: Option<string[] | null>;
+  scalingFactorController: Option<string | null>;
   weight: Option<PoolWeight[] | null>;
-  address: string;
-  total_shares: TotalShares;
 }
diff --git a/src/lib/types/tx/transaction.ts b/src/lib/types/tx/transaction.ts
index 10a8e4c03..b8188eebb 100644
--- a/src/lib/types/tx/transaction.ts
+++ b/src/lib/types/tx/transaction.ts
@@ -51,3 +51,5 @@ export interface TxFilters {
   isUpdateAdmin: boolean;
   isClearAdmin: boolean;
 }
+
+export type PoolTxFilter = "is_swap" | "is_lp" | "is_bond" | "is_superfluid";

From cbedf0a5dd1c720384ac659934cba2fa0ec14ed4 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 12 Apr 2023 16:00:00 +0700
Subject: [PATCH 012/354] fix: add ordering option

---
 src/lib/gql/gql.ts              |  6 +++---
 src/lib/gql/graphql.ts          | 17 ++++++++++++++++-
 src/lib/pages/pool/data.ts      |  3 +++
 src/lib/query/pool.ts           |  3 ++-
 src/lib/services/poolService.ts |  5 ++++-
 5 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index 0e10f3211..e5c750673 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -41,7 +41,7 @@ const documents = {
     types.GetContractListByAdminPaginationDocument,
   "\n  query getContractListCountByAdmin($walletAddress: String!) {\n    contracts_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetContractListCountByAdminDocument,
-  "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: asc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n":
+  "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n":
     types.GetPoolListDocument,
   "\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetPoolListCountDocument,
@@ -129,8 +129,8 @@ export function graphql(
   source: "\n  query getContractListCountByAdmin($walletAddress: String!) {\n    contracts_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getContractListCountByAdmin($walletAddress: String!) {\n    contracts_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: asc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n"
-): typeof documents["\n  query getPoolList(\n    $expression: pools_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: asc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n"];
+  source: "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n"
+): typeof documents["\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index 399b8fef1..647293339 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -11295,6 +11295,7 @@ export type GetContractListCountByAdminQuery = {
 
 export type GetPoolListQueryVariables = Exact<{
   expression?: InputMaybe<Pools_Bool_Exp>;
+  order?: InputMaybe<Order_By>;
   offset: Scalars["Int"];
   pageSize: Scalars["Int"];
 }>;
@@ -14375,6 +14376,17 @@ export const GetPoolListDocument = {
             name: { kind: "Name", value: "pools_bool_exp" },
           },
         },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "order" },
+          },
+          type: {
+            kind: "NamedType",
+            name: { kind: "Name", value: "order_by" },
+          },
+        },
         {
           kind: "VariableDefinition",
           variable: {
@@ -14422,7 +14434,10 @@ export const GetPoolListDocument = {
                     {
                       kind: "ObjectField",
                       name: { kind: "Name", value: "id" },
-                      value: { kind: "EnumValue", value: "asc" },
+                      value: {
+                        kind: "Variable",
+                        name: { kind: "Name", value: "order" },
+                      },
                     },
                   ],
                 },
diff --git a/src/lib/pages/pool/data.ts b/src/lib/pages/pool/data.ts
index 69ead2226..e73523824 100644
--- a/src/lib/pages/pool/data.ts
+++ b/src/lib/pages/pool/data.ts
@@ -1,5 +1,6 @@
 import big from "big.js";
 
+import type { Order_By } from "lib/gql/graphql";
 import { useAssetInfos } from "lib/services/assetService";
 import {
   usePoolByPoolId,
@@ -19,6 +20,7 @@ export const usePools = (
   isSupported: boolean,
   isSuperfluidOnly: boolean,
   search: string,
+  order: Order_By,
   offset: number,
   pageSize: number
 ): { pools: Option<PoolCardData[]>; isLoading: boolean } => {
@@ -28,6 +30,7 @@ export const usePools = (
       isSupported,
       isSuperfluidOnly,
       search,
+      order,
       offset,
       pageSize
     );
diff --git a/src/lib/query/pool.ts b/src/lib/query/pool.ts
index 761367ef0..64e8371eb 100644
--- a/src/lib/query/pool.ts
+++ b/src/lib/query/pool.ts
@@ -3,12 +3,13 @@ import { graphql } from "lib/gql";
 export const getPoolList = graphql(`
   query getPoolList(
     $expression: pools_bool_exp
+    $order: order_by
     $offset: Int!
     $pageSize: Int!
   ) {
     pools(
       where: $expression
-      order_by: { id: asc }
+      order_by: { id: $order }
       offset: $offset
       limit: $pageSize
     ) {
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index 15498a9d9..13af60a98 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 
 import { useCelatoneApp } from "lib/app-provider";
+import type { Order_By } from "lib/gql/graphql";
 import { getPoolByPoolId, getPoolList, getPoolListCount } from "lib/query";
 import type { Pool, PoolDetail } from "lib/types";
 
@@ -12,6 +13,7 @@ export const usePoolListByIsSupported = (
   isSupported: boolean,
   isSuperfluidOnly: boolean,
   search: string,
+  order: Order_By,
   offset: number,
   pageSize: number
 ): UseQueryResult<Pool[]> => {
@@ -22,6 +24,7 @@ export const usePoolListByIsSupported = (
     return indexerGraphClient
       .request(getPoolList, {
         expression,
+        order,
         offset,
         pageSize,
       })
@@ -33,7 +36,7 @@ export const usePoolListByIsSupported = (
           poolLiquidity: pool.liquidity,
         }))
       );
-  }, [expression, indexerGraphClient, offset, pageSize]);
+  }, [expression, order, offset, pageSize, indexerGraphClient]);
 
   return useQuery(
     [

From 88b0135198b62d05f44859da69c65298a7f66a20 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 12 Apr 2023 16:26:54 +0700
Subject: [PATCH 013/354] fix: refactor fns

---
 .../delegations/DelegationsBody.tsx           |  3 +-
 .../components/delegations/RadioCard.tsx      |  3 +-
 .../components/delegations/TotalCard.tsx      |  3 +-
 .../components/delegations/index.tsx          | 10 +++-
 .../components/tables/TokenCell.tsx           |  2 +-
 .../tables/bonded/BondedTableRow.tsx          |  3 +-
 .../tables/bonded/DelegationsTable.tsx        |  3 +-
 src/lib/pages/account-details/data.ts         | 51 ++++---------------
 src/lib/pages/account-details/type.ts         | 12 +----
 src/lib/pages/pool/data.ts                    | 11 ++--
 src/lib/pages/pool/type.ts                    | 41 +--------------
 src/lib/types/asset.ts                        | 11 ++++
 src/lib/types/index.ts                        |  1 +
 src/lib/utils/assetValue.ts                   | 43 +++++++++++++++-
 14 files changed, 83 insertions(+), 114 deletions(-)
 create mode 100644 src/lib/types/asset.ts

diff --git a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
index 9ba46a73c..f5e555111 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
@@ -3,9 +3,8 @@ import { useState } from "react";
 
 import { DelegationsTable, UnbondingsTable } from "../tables";
 import type { Delegation, Unbonding } from "lib/pages/account-details/data";
-import type { TokenWithValue } from "lib/pages/account-details/type";
 import { AmpTrackUseRadio } from "lib/services/amplitude";
-import type { Option } from "lib/types";
+import type { Option, TokenWithValue } from "lib/types";
 
 import { RadioCard } from "./RadioCard";
 
diff --git a/src/lib/pages/account-details/components/delegations/RadioCard.tsx b/src/lib/pages/account-details/components/delegations/RadioCard.tsx
index a0c6c0d6f..8b6cac0c2 100644
--- a/src/lib/pages/account-details/components/delegations/RadioCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/RadioCard.tsx
@@ -1,7 +1,6 @@
 import { Flex, Radio, Text, Heading, Spinner } from "@chakra-ui/react";
 
-import type { TokenWithValue } from "lib/pages/account-details/type";
-import type { Option } from "lib/types";
+import type { Option, TokenWithValue } from "lib/types";
 import {
   formatPrice,
   formatUTokenWithPrecision,
diff --git a/src/lib/pages/account-details/components/delegations/TotalCard.tsx b/src/lib/pages/account-details/components/delegations/TotalCard.tsx
index a82884fd4..4ab262636 100644
--- a/src/lib/pages/account-details/components/delegations/TotalCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/TotalCard.tsx
@@ -2,8 +2,7 @@ import { InfoIcon } from "@chakra-ui/icons";
 import { Flex, Heading, Image, Spinner, Text, Tooltip } from "@chakra-ui/react";
 
 import { NAToken } from "lib/icon";
-import type { TokenWithValue } from "lib/pages/account-details/type";
-import type { Option } from "lib/types";
+import type { Option, TokenWithValue } from "lib/types";
 import {
   formatPrice,
   formatUTokenWithPrecision,
diff --git a/src/lib/pages/account-details/components/delegations/index.tsx b/src/lib/pages/account-details/components/delegations/index.tsx
index 00e6c6f16..c3f1708b8 100644
--- a/src/lib/pages/account-details/components/delegations/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/index.tsx
@@ -6,9 +6,15 @@ import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
 import { useUserDelegationInfos } from "lib/pages/account-details/data";
-import type { TokenWithValue } from "lib/pages/account-details/type";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import type { HumanAddr, Option, Token, U, USD } from "lib/types";
+import type {
+  HumanAddr,
+  Option,
+  Token,
+  TokenWithValue,
+  U,
+  USD,
+} from "lib/types";
 import { getTokenLabel } from "lib/utils";
 
 import { DelegationsBody } from "./DelegationsBody";
diff --git a/src/lib/pages/account-details/components/tables/TokenCell.tsx b/src/lib/pages/account-details/components/tables/TokenCell.tsx
index d4d964bd3..461877d53 100644
--- a/src/lib/pages/account-details/components/tables/TokenCell.tsx
+++ b/src/lib/pages/account-details/components/tables/TokenCell.tsx
@@ -1,7 +1,7 @@
 import { Flex, Image, Text } from "@chakra-ui/react";
 
 import { NAToken } from "lib/icon";
-import type { TokenWithValue } from "lib/pages/account-details/type";
+import type { TokenWithValue } from "lib/types";
 import {
   formatPrice,
   formatUTokenWithPrecision,
diff --git a/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx b/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
index fa7d287da..f2bd9d1f9 100644
--- a/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
@@ -3,8 +3,7 @@ import { Flex, Grid, Text } from "@chakra-ui/react";
 import { TokenCell } from "../TokenCell";
 import { TableRow } from "lib/components/table";
 import { ValidatorBadge } from "lib/components/ValidatorBadge";
-import type { TokenWithValue } from "lib/pages/account-details/type";
-import type { ValidatorInfo } from "lib/types";
+import type { TokenWithValue, ValidatorInfo } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 interface BondedInfo {
diff --git a/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx b/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
index 99a7c6888..6dd5894bb 100644
--- a/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
@@ -4,8 +4,7 @@ import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
 import { TableTitle } from "lib/components/table";
 import type { Delegation } from "lib/pages/account-details/data";
-import type { TokenWithValue } from "lib/pages/account-details/type";
-import type { Option } from "lib/types";
+import type { Option, TokenWithValue } from "lib/types";
 
 import { BondedTableHeader } from "./BondedTableHeader";
 import { BondedTableRow } from "./BondedTableRow";
diff --git a/src/lib/pages/account-details/data.ts b/src/lib/pages/account-details/data.ts
index ba7ba715a..e955f1c8c 100644
--- a/src/lib/pages/account-details/data.ts
+++ b/src/lib/pages/account-details/data.ts
@@ -20,26 +20,24 @@ import {
 } from "lib/services/delegationService";
 import { useValidators } from "lib/services/validatorService";
 import type {
-  AssetInfo,
   BalanceWithAssetInfo,
   CodeInfo,
   ContractInfo,
   HumanAddr,
   Option,
-  Token,
-  U,
+  TokenWithValue,
   USD,
   ValidatorInfo,
 } from "lib/types";
 import {
   calAssetValueWithPrecision,
-  calculateAssetValue,
   calTotalValue,
-  toToken,
   addrToValoper,
+  addTokenWithValue,
+  coinToTokenWithValue,
 } from "lib/utils";
 
-import type { TokenWithValue, UserDelegationsData } from "./type";
+import type { UserDelegationsData } from "./type";
 
 interface AccountContracts {
   contracts: Option<ContractInfo[]>;
@@ -202,38 +200,6 @@ export const useUserAssetInfos = (
   };
 };
 
-const coinToTokenWithValue = (
-  denom: string,
-  amount: string,
-  assetInfo: Option<AssetInfo>
-): TokenWithValue => {
-  const tokenAmount = big(amount) as U<Token<Big>>;
-  return {
-    denom,
-    amount: tokenAmount,
-    logo: assetInfo?.logo,
-    precision: assetInfo?.precision,
-    value: assetInfo
-      ? calculateAssetValue(
-          toToken(tokenAmount, assetInfo.precision),
-          assetInfo.price as USD<number>
-        )
-      : undefined,
-  };
-};
-
-const addTotal = (
-  oldTotal: Option<TokenWithValue>,
-  token: TokenWithValue
-): TokenWithValue =>
-  !oldTotal
-    ? token
-    : {
-        ...oldTotal,
-        amount: oldTotal.amount.add(token.amount) as U<Token<Big>>,
-        value: oldTotal.value?.add(token.value ?? 0) as USD<Big>,
-      };
-
 const calBonded = (
   totalDelegations: Option<Record<string, TokenWithValue>>,
   totalUnbondings: Option<Record<string, TokenWithValue>>
@@ -243,7 +209,10 @@ const calBonded = (
   return Object.keys(totalDelegations).reduce<Record<string, TokenWithValue>>(
     (total, denom) => ({
       ...total,
-      [denom]: addTotal(totalUnbondings[denom], totalDelegations[denom]),
+      [denom]: addTokenWithValue(
+        totalUnbondings[denom],
+        totalDelegations[denom]
+      ),
     }),
     {}
   );
@@ -313,7 +282,7 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
     >(
       (total, delegation) => ({
         ...total,
-        [delegation.token.denom]: addTotal(
+        [delegation.token.denom]: addTokenWithValue(
           total[delegation.token.denom],
           delegation.token
         ),
@@ -338,7 +307,7 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
     >(
       (total, unbonding) => ({
         ...total,
-        [unbonding.token.denom]: addTotal(
+        [unbonding.token.denom]: addTokenWithValue(
           total[unbonding.token.denom],
           unbonding.token
         ),
diff --git a/src/lib/pages/account-details/type.ts b/src/lib/pages/account-details/type.ts
index 80e074138..b6256a87f 100644
--- a/src/lib/pages/account-details/type.ts
+++ b/src/lib/pages/account-details/type.ts
@@ -1,6 +1,4 @@
-import type Big from "big.js";
-
-import type { Option, Token, U, USD, ValidatorInfo } from "lib/types";
+import type { Option, TokenWithValue, ValidatorInfo } from "lib/types";
 
 import type {
   Delegation,
@@ -9,14 +7,6 @@ import type {
   Unbonding,
 } from "./data";
 
-export interface TokenWithValue {
-  denom: string;
-  amount: U<Token<Big>>;
-  logo: Option<string>;
-  precision: Option<number>;
-  value: Option<USD<Big>>;
-}
-
 export interface NonRedelegatable {
   dstValidator: ValidatorInfo;
   completionTime: Date;
diff --git a/src/lib/pages/pool/data.ts b/src/lib/pages/pool/data.ts
index e73523824..a3babfd1f 100644
--- a/src/lib/pages/pool/data.ts
+++ b/src/lib/pages/pool/data.ts
@@ -6,15 +6,10 @@ import {
   usePoolByPoolId,
   usePoolListByIsSupported,
 } from "lib/services/poolService";
-import type { Option } from "lib/types";
+import type { Option, TokenWithValue } from "lib/types";
+import { coinToTokenWithValue } from "lib/utils";
 
-import { coinToTokenWithValue } from "./type";
-import type {
-  PoolCardData,
-  PoolData,
-  PoolWeight,
-  TokenWithValue,
-} from "./type";
+import type { PoolCardData, PoolData, PoolWeight } from "./type";
 
 export const usePools = (
   isSupported: boolean,
diff --git a/src/lib/pages/pool/type.ts b/src/lib/pages/pool/type.ts
index 02ef4d914..3b4a84c63 100644
--- a/src/lib/pages/pool/type.ts
+++ b/src/lib/pages/pool/type.ts
@@ -1,45 +1,6 @@
 import type { Big } from "big.js";
-import big from "big.js";
 
-import type {
-  Addr,
-  AssetInfo,
-  ContractAddr,
-  Option,
-  Token,
-  U,
-  USD,
-} from "lib/types";
-import { calculateAssetValue, toToken } from "lib/utils";
-
-export const coinToTokenWithValue = (
-  denom: string,
-  amount: string,
-  assetInfo: Option<AssetInfo>
-): TokenWithValue => {
-  const tokenAmount = big(amount) as U<Token<Big>>;
-  return {
-    denom,
-    amount: tokenAmount,
-    logo: assetInfo?.logo,
-    precision: assetInfo?.precision,
-    value: assetInfo
-      ? calculateAssetValue(
-          toToken(tokenAmount, assetInfo.precision),
-          assetInfo.price as USD<number>
-        )
-      : undefined,
-  };
-};
-
-// TODO: combine with the type in delegation
-export interface TokenWithValue {
-  denom: string;
-  amount: U<Token<Big>>;
-  logo: Option<string>;
-  precision: Option<number>;
-  value: Option<USD<Big>>;
-}
+import type { Addr, ContractAddr, Option, TokenWithValue } from "lib/types";
 
 export interface PoolWeight {
   denom: string;
diff --git a/src/lib/types/asset.ts b/src/lib/types/asset.ts
new file mode 100644
index 000000000..8cfbba091
--- /dev/null
+++ b/src/lib/types/asset.ts
@@ -0,0 +1,11 @@
+import type Big from "big.js";
+
+import type { Option, Token, U, USD } from "lib/types";
+
+export interface TokenWithValue {
+  denom: string;
+  amount: U<Token<Big>>;
+  logo: Option<string>;
+  precision: Option<number>;
+  value: Option<USD<Big>>;
+}
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index a1cab07d5..6d2c767bd 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -11,3 +11,4 @@ export * from "./addrs";
 export * from "./proposal";
 export * from "./pool";
 export * from "./validator";
+export * from "./asset";
diff --git a/src/lib/utils/assetValue.ts b/src/lib/utils/assetValue.ts
index 30ae3d64e..d2688263b 100644
--- a/src/lib/utils/assetValue.ts
+++ b/src/lib/utils/assetValue.ts
@@ -1,7 +1,16 @@
 import type { BigSource, Big } from "big.js";
 import big from "big.js";
 
-import type { Balance, BalanceWithAssetInfo, Token, U, USD } from "lib/types";
+import type {
+  AssetInfo,
+  Balance,
+  BalanceWithAssetInfo,
+  Option,
+  Token,
+  TokenWithValue,
+  U,
+  USD,
+} from "lib/types";
 
 import { toToken } from "./formatter";
 
@@ -26,3 +35,35 @@ export const calTotalValue = (assets: BalanceWithAssetInfo[]): USD<Big> =>
       acc.add(calAssetValueWithPrecision(curr.balance)) as USD<Big>,
     big(0) as USD<Big>
   );
+
+export const coinToTokenWithValue = (
+  denom: string,
+  amount: string,
+  assetInfo: Option<AssetInfo>
+): TokenWithValue => {
+  const tokenAmount = big(amount) as U<Token<Big>>;
+  return {
+    denom,
+    amount: tokenAmount,
+    logo: assetInfo?.logo,
+    precision: assetInfo?.precision,
+    value: assetInfo
+      ? calculateAssetValue(
+          toToken(tokenAmount, assetInfo.precision),
+          assetInfo.price as USD<number>
+        )
+      : undefined,
+  };
+};
+
+export const addTokenWithValue = (
+  oldToken: Option<TokenWithValue>,
+  token: TokenWithValue
+): TokenWithValue =>
+  !oldToken
+    ? token
+    : {
+        ...oldToken,
+        amount: oldToken.amount.add(token.amount) as U<Token<Big>>,
+        value: oldToken.value?.add(token.value ?? 0) as USD<Big>,
+      };

From 80d9eae8e072012987b17d0b6b4be42ef17abdec Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 12 Apr 2023 17:32:32 +0700
Subject: [PATCH 014/354] fix: comment

---
 src/lib/gql/gql.ts                            |  6 ++--
 src/lib/gql/graphql.ts                        | 14 +++++++++
 src/lib/pages/pool/data.ts                    | 26 ++++++++++-------
 src/lib/pages/pool/type.ts                    | 29 -------------------
 src/lib/query/tx.ts                           |  7 ++++-
 src/lib/services/expression/poolExpression.ts |  4 ++-
 src/lib/services/expression/txExpression.ts   |  4 +--
 src/lib/services/poolService.ts               |  4 ++-
 src/lib/services/txService.ts                 | 18 ++++++++----
 src/lib/types/pool.ts                         | 24 ++++++++-------
 src/lib/types/tx/transaction.ts               |  7 ++++-
 11 files changed, 80 insertions(+), 63 deletions(-)
 delete mode 100644 src/lib/pages/pool/type.ts

diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index e5c750673..230d624e7 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -65,7 +65,7 @@ const documents = {
     types.GetTxsByAddressPaginationDocument,
   "\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetTxsCountByAddressDocument,
-  "\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(where: $expression, offset: $offset, limit: $pageSize) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n":
+  "\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n":
     types.GetTxsByPoolIdPaginationDocument,
   "\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetTxsCountByPoolIdDocument,
@@ -165,8 +165,8 @@ export function graphql(
   source: "\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(where: $expression, offset: $offset, limit: $pageSize) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"
-): typeof documents["\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(where: $expression, offset: $offset, limit: $pageSize) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"];
+  source: "\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"
+): typeof documents["\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index 647293339..7106eab71 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -15701,6 +15701,20 @@ export const GetTxsByPoolIdPaginationDocument = {
                   name: { kind: "Name", value: "expression" },
                 },
               },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "order_by" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "block_height" },
+                      value: { kind: "EnumValue", value: "desc" },
+                    },
+                  ],
+                },
+              },
               {
                 kind: "Argument",
                 name: { kind: "Name", value: "offset" },
diff --git a/src/lib/pages/pool/data.ts b/src/lib/pages/pool/data.ts
index a3babfd1f..13707ae7b 100644
--- a/src/lib/pages/pool/data.ts
+++ b/src/lib/pages/pool/data.ts
@@ -1,3 +1,4 @@
+import type { Big } from "big.js";
 import big from "big.js";
 
 import type { Order_By } from "lib/gql/graphql";
@@ -6,11 +7,15 @@ import {
   usePoolByPoolId,
   usePoolListByIsSupported,
 } from "lib/services/poolService";
-import type { Option, TokenWithValue } from "lib/types";
+import type {
+  Option,
+  Pool,
+  PoolDetail,
+  PoolWeight,
+  TokenWithValue,
+} from "lib/types";
 import { coinToTokenWithValue } from "lib/utils";
 
-import type { PoolCardData, PoolData, PoolWeight } from "./type";
-
 export const usePools = (
   isSupported: boolean,
   isSuperfluidOnly: boolean,
@@ -18,7 +23,7 @@ export const usePools = (
   order: Order_By,
   offset: number,
   pageSize: number
-): { pools: Option<PoolCardData[]>; isLoading: boolean } => {
+): { pools: Option<Pool<TokenWithValue>[]>; isLoading: boolean } => {
   const { assetInfos, isLoading: isLoadingAssetInfos } = useAssetInfos();
   const { data: poolList, isLoading: isLoadingPoolList } =
     usePoolListByIsSupported(
@@ -36,7 +41,7 @@ export const usePools = (
       isLoading: isLoadingAssetInfos || isLoadingPoolList,
     };
 
-  const data = poolList.map<PoolCardData>((pool) => ({
+  const data = poolList.map<Pool<TokenWithValue>>((pool) => ({
     id: pool.id,
     type: pool.type,
     isSuperfluid: pool.isSuperfluid,
@@ -53,7 +58,7 @@ export const usePools = (
 
 export const usePool = (
   poolId: number
-): { pool: Option<PoolData>; isLoading: boolean } => {
+): { pool: Option<PoolDetail<Big, TokenWithValue>>; isLoading: boolean } => {
   const { assetInfos, isLoading: isLoadingAssetInfos } = useAssetInfos();
   const { data: pool, isLoading: isLoadingPoolInfo } = usePoolByPoolId(poolId);
 
@@ -78,10 +83,11 @@ export const usePool = (
       swapFee: pool.swapFee,
       exitFee: pool.exitFee,
       futurePoolGovernor: pool.futurePoolGovernor,
-      weight: pool.weight?.map<PoolWeight>((weight) => ({
-        denom: weight.denom,
-        weight: big(weight.weight),
-      })),
+      weight:
+        pool.weight?.map<PoolWeight<Big>>((weight) => ({
+          denom: weight.denom,
+          weight: big(weight.weight),
+        })) ?? null,
       smoothWeightChangeParams: pool.smoothWeightChangeParams,
       scalingFactors: pool.scalingFactors,
       scalingFactorController: pool.scalingFactorController,
diff --git a/src/lib/pages/pool/type.ts b/src/lib/pages/pool/type.ts
deleted file mode 100644
index 3b4a84c63..000000000
--- a/src/lib/pages/pool/type.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { Big } from "big.js";
-
-import type { Addr, ContractAddr, Option, TokenWithValue } from "lib/types";
-
-export interface PoolWeight {
-  denom: string;
-  weight: Big;
-}
-
-export interface PoolCardData {
-  id: number;
-  type: string;
-  isSuperfluid: boolean;
-  poolLiquidity: TokenWithValue[];
-}
-
-export interface PoolData extends PoolCardData {
-  isSupported: boolean;
-  blockHeight: Option<number>;
-  creator: Option<Addr>;
-  poolAddress: ContractAddr;
-  swapFee: number;
-  exitFee: number;
-  futurePoolGovernor: string | null;
-  smoothWeightChangeParams: Option<object | null>;
-  scalingFactors: Option<string[] | null>;
-  scalingFactorController: Option<string | null>;
-  weight: Option<PoolWeight[] | null>;
-}
diff --git a/src/lib/query/tx.ts b/src/lib/query/tx.ts
index f3458944f..ba93ad1b0 100644
--- a/src/lib/query/tx.ts
+++ b/src/lib/query/tx.ts
@@ -53,7 +53,12 @@ export const getTxsByPoolIdPagination = graphql(`
     $offset: Int!
     $pageSize: Int!
   ) {
-    pool_transactions(where: $expression, offset: $offset, limit: $pageSize) {
+    pool_transactions(
+      where: $expression
+      order_by: { block_height: desc }
+      offset: $offset
+      limit: $pageSize
+    ) {
       block {
         height
         timestamp
diff --git a/src/lib/services/expression/poolExpression.ts b/src/lib/services/expression/poolExpression.ts
index 339a30665..cca992b9f 100644
--- a/src/lib/services/expression/poolExpression.ts
+++ b/src/lib/services/expression/poolExpression.ts
@@ -1,5 +1,7 @@
 import { useMemo } from "react";
 
+import { isPositiveInt } from "lib/utils";
+
 export const usePoolExpression = (
   isSupported: boolean,
   isSuperfluidOnly: boolean,
@@ -9,7 +11,7 @@ export const usePoolExpression = (
     () => ({
       is_supported: { _eq: isSupported },
       is_superfluid: isSuperfluidOnly ? { _eq: true } : {},
-      id: search.trim().length ? { _eq: Number(search) } : {},
+      id: isPositiveInt(search) ? { _eq: Number(search) } : {},
     }),
     [isSuperfluidOnly, isSupported, search]
   );
diff --git a/src/lib/services/expression/txExpression.ts b/src/lib/services/expression/txExpression.ts
index 02de4bc16..d209f32a9 100644
--- a/src/lib/services/expression/txExpression.ts
+++ b/src/lib/services/expression/txExpression.ts
@@ -54,12 +54,12 @@ export const useTxExpression = (
 
 export const usePoolTxExpression = (
   poolId: Option<number>,
-  type: Option<PoolTxFilter>
+  type: PoolTxFilter
 ) =>
   useMemo(
     () => ({
       pool_id: poolId ? { _eq: poolId } : {},
-      ...(type ? { [type]: { _eq: true } } : {}),
+      ...(type !== "is_all" ? { [type]: { _eq: true } } : {}),
     }),
     [poolId, type]
   );
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index 13af60a98..639e743a3 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -29,7 +29,7 @@ export const usePoolListByIsSupported = (
         pageSize,
       })
       .then(({ pools }) =>
-        pools.map((pool) => ({
+        pools.map<Pool>((pool) => ({
           id: pool.id,
           type: pool.type,
           isSuperfluid: pool.is_superfluid,
@@ -43,6 +43,8 @@ export const usePoolListByIsSupported = (
       "pool_list_by_is_supported",
       isSupported,
       isSuperfluidOnly,
+      search,
+      order,
       offset,
       pageSize,
       indexerGraphClient,
diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index 41787d4d8..332343bee 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -25,6 +25,7 @@ import {
   getActionMsgType,
   getMsgFurtherAction,
   isTxHash,
+  parseDate,
   parseDateOpt,
   parseTxHash,
   snakeToCamel,
@@ -176,7 +177,7 @@ export const useTxsCountByAddress = (
 
 export const useTxsByPoolIdPagination = (
   poolId: Option<number>,
-  type: Option<PoolTxFilter>,
+  type: PoolTxFilter,
   offset: number,
   pageSize: number
 ): UseQueryResult<Transaction[]> => {
@@ -197,7 +198,7 @@ export const useTxsByPoolIdPagination = (
           sender: transaction.transaction.account.address as Addr,
           isSigner: true,
           height: transaction.block.height,
-          created: parseDateOpt(transaction.block.timestamp),
+          created: parseDate(transaction.block.timestamp),
           success: transaction.transaction.success,
           actionMsgType: ActionMsgType.OTHER_ACTION_MSG,
           furtherAction: MsgFurtherAction.NONE,
@@ -208,7 +209,14 @@ export const useTxsByPoolIdPagination = (
   }, [expression, indexerGraphClient, offset, pageSize]);
 
   return useQuery(
-    ["transactions_by_pool_id", poolId, offset, pageSize, indexerGraphClient],
+    [
+      "transactions_by_pool_id",
+      poolId,
+      type,
+      offset,
+      pageSize,
+      indexerGraphClient,
+    ],
     queryFn,
     {
       enabled: !!poolId,
@@ -218,7 +226,7 @@ export const useTxsByPoolIdPagination = (
 
 export const useTxsCountByPoolId = (
   poolId: Option<number>,
-  type: Option<PoolTxFilter>
+  type: PoolTxFilter
 ): UseQueryResult<Option<number>> => {
   const { indexerGraphClient } = useCelatoneApp();
   const expression = usePoolTxExpression(poolId, type);
@@ -235,7 +243,7 @@ export const useTxsCountByPoolId = (
   }, [expression, indexerGraphClient]);
 
   return useQuery(
-    ["transactions_count_by_pool_id", poolId, indexerGraphClient],
+    ["transactions_count_by_pool_id", poolId, type, indexerGraphClient],
     queryFn,
     {
       enabled: !!poolId,
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index ba2250172..2f2dd61b0 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -1,20 +1,24 @@
 import type { Coin } from "@cosmjs/stargate";
+import type { Big } from "big.js";
 
-import type { Addr, ContractAddr, Option } from "lib/types";
+import type { Addr, ContractAddr, Option, TokenWithValue } from "lib/types";
 
-interface PoolWeight {
+export interface PoolWeight<T extends string | Big> {
   denom: string;
-  weight: string;
+  weight: T;
 }
 
-export interface Pool {
+export interface Pool<TLiquidity extends Coin | TokenWithValue = Coin> {
   id: number;
   type: string;
   isSuperfluid: boolean;
-  poolLiquidity: Coin[];
+  poolLiquidity: TLiquidity[];
 }
 
-export interface PoolDetail extends Pool {
+export interface PoolDetail<
+  TWeight extends string | Big = string,
+  TLiquidity extends Coin | TokenWithValue = Coin
+> extends Pool<TLiquidity> {
   isSupported: boolean;
   blockHeight: Option<number>;
   creator: Option<Addr>;
@@ -22,8 +26,8 @@ export interface PoolDetail extends Pool {
   swapFee: number;
   exitFee: number;
   futurePoolGovernor: string | null;
-  smoothWeightChangeParams: Option<object | null>;
-  scalingFactors: Option<string[] | null>;
-  scalingFactorController: Option<string | null>;
-  weight: Option<PoolWeight[] | null>;
+  smoothWeightChangeParams: object | null;
+  scalingFactors: string[] | null;
+  scalingFactorController: string | null;
+  weight: PoolWeight<TWeight>[] | null;
 }
diff --git a/src/lib/types/tx/transaction.ts b/src/lib/types/tx/transaction.ts
index b8188eebb..e0f201867 100644
--- a/src/lib/types/tx/transaction.ts
+++ b/src/lib/types/tx/transaction.ts
@@ -52,4 +52,9 @@ export interface TxFilters {
   isClearAdmin: boolean;
 }
 
-export type PoolTxFilter = "is_swap" | "is_lp" | "is_bond" | "is_superfluid";
+export type PoolTxFilter =
+  | "is_all"
+  | "is_swap"
+  | "is_lp"
+  | "is_bond"
+  | "is_superfluid";

From ab47ef3eb39440616dc60e5a5bb549231b79d39d Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 13 Apr 2023 21:49:20 +0700
Subject: [PATCH 015/354] feat: wireup lists

---
 .../pool/components/FilterByPoolType.tsx      |   9 +-
 .../pages/pool/components/PoolAssetDetail.tsx |  24 +-
 src/lib/pages/pool/components/PoolList.tsx    |  92 ----
 src/lib/pages/pool/components/PoolLogo.tsx    |   3 +-
 .../pool/components/UnsupportedPoolList.tsx   |  76 ----
 src/lib/pages/pool/components/constant.ts     | 415 ------------------
 .../{ => supportedSection}/PoolCard.tsx       |  68 +--
 .../supportedSection/SupportedPoolList.tsx    |  37 ++
 .../components/supportedSection/index.tsx     | 137 ++++++
 .../pool/components/table/PoolAssetsTable.tsx |   5 +-
 .../components/table/PoolAssetsTableRow.tsx   |  21 +-
 .../UnsupportedPoolCard.tsx                   |   9 +-
 .../UnsupportedPoolList.tsx                   |  37 ++
 .../components/unsupportedSection/index.tsx   | 128 ++++++
 src/lib/pages/pool/constant.ts                |   5 +
 src/lib/pages/pool/data.ts                    |   9 +-
 src/lib/pages/pool/index.tsx                  |  57 ++-
 src/lib/pages/pool/poolId.tsx                 |  36 +-
 src/lib/services/expression/poolExpression.ts |   5 +-
 src/lib/services/poolService.ts               |  29 +-
 src/lib/types/pool.ts                         |  12 +-
 21 files changed, 487 insertions(+), 727 deletions(-)
 delete mode 100644 src/lib/pages/pool/components/PoolList.tsx
 delete mode 100644 src/lib/pages/pool/components/UnsupportedPoolList.tsx
 delete mode 100644 src/lib/pages/pool/components/constant.ts
 rename src/lib/pages/pool/components/{ => supportedSection}/PoolCard.tsx (65%)
 create mode 100644 src/lib/pages/pool/components/supportedSection/SupportedPoolList.tsx
 create mode 100644 src/lib/pages/pool/components/supportedSection/index.tsx
 rename src/lib/pages/pool/components/{ => unsupportedSection}/UnsupportedPoolCard.tsx (96%)
 create mode 100644 src/lib/pages/pool/components/unsupportedSection/UnsupportedPoolList.tsx
 create mode 100644 src/lib/pages/pool/components/unsupportedSection/index.tsx
 create mode 100644 src/lib/pages/pool/constant.ts

diff --git a/src/lib/pages/pool/components/FilterByPoolType.tsx b/src/lib/pages/pool/components/FilterByPoolType.tsx
index 34d1617ba..54c0d9811 100644
--- a/src/lib/pages/pool/components/FilterByPoolType.tsx
+++ b/src/lib/pages/pool/components/FilterByPoolType.tsx
@@ -1,18 +1,17 @@
 import { Grid } from "@chakra-ui/react";
 
 import { SelectInput } from "lib/components/forms";
-
-export type PoolTypeFilterValue = "all" | "balancer" | "stableswap";
+import type { PoolTypeFilter } from "lib/types";
 
 interface PoolTypeOption {
   label: string;
-  value: PoolTypeFilterValue;
+  value: PoolTypeFilter;
   image?: string;
   disabled: boolean;
 }
 
 interface FilterByPoolTypeProps {
-  setPoolTypeValue: (newVal: PoolTypeFilterValue) => void;
+  setPoolTypeValue: (newVal: PoolTypeFilter) => void;
   initialSelected: string;
   labelBgColor?: string;
 }
@@ -44,7 +43,7 @@ export const FilterByPoolType = ({
   labelBgColor = "background.main",
 }: FilterByPoolTypeProps) => (
   <Grid columnGap="16px" w="full" maxW="360px">
-    <SelectInput<PoolTypeFilterValue>
+    <SelectInput<PoolTypeFilter>
       formLabel="Filter by Pool Type"
       options={options}
       onChange={setPoolTypeValue}
diff --git a/src/lib/pages/pool/components/PoolAssetDetail.tsx b/src/lib/pages/pool/components/PoolAssetDetail.tsx
index b4082c103..c9c80b42f 100644
--- a/src/lib/pages/pool/components/PoolAssetDetail.tsx
+++ b/src/lib/pages/pool/components/PoolAssetDetail.tsx
@@ -1,5 +1,4 @@
 import { Flex, Heading, Badge, Text, Box } from "@chakra-ui/react";
-import type { Coin } from "@cosmjs/stargate";
 import type { Big } from "big.js";
 import big from "big.js";
 import Link from "next/link";
@@ -7,14 +6,14 @@ import Link from "next/link";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { useAssetInfos } from "lib/services/assetService";
-import type { USD } from "lib/types";
+import type { TokenWithValue, USD } from "lib/types";
 import type { PoolDetail } from "lib/types/pool";
-import { calAssetValueWithPrecision, formatPrice } from "lib/utils";
+import { formatPrice } from "lib/utils";
 
 import { PoolAssetsTable } from "./table/PoolAssetsTable";
 
 interface PoolAssetDetailProps {
-  assets: Coin[];
+  assets: TokenWithValue[];
   pool_type: PoolDetail["type"];
   // weight?: Option<PoolWeight[] | null>;
   // scaling_factors?: Option<string[] | null>;
@@ -29,19 +28,10 @@ PoolAssetDetailProps) => {
 
   if (!assetInfos) return <Loading />;
 
-  const liquidity = assets.reduce((total, asset) => {
-    const assetInfo = assetInfos[asset.denom];
-    return total.add(
-      assetInfo
-        ? calAssetValueWithPrecision({
-            amount: asset.amount,
-            id: assetInfo.id,
-            price: assetInfo.price,
-            precision: assetInfo.precision,
-          })
-        : (big(0) as USD<Big>)
-    ) as USD<Big>;
-  }, big(0) as USD<Big>);
+  const liquidity = assets.reduce(
+    (total, asset) => total.add(asset.value ?? big(0)) as USD<Big>,
+    big(0) as USD<Big>
+  );
 
   return (
     <Box>
diff --git a/src/lib/pages/pool/components/PoolList.tsx b/src/lib/pages/pool/components/PoolList.tsx
deleted file mode 100644
index 5eaa741c8..000000000
--- a/src/lib/pages/pool/components/PoolList.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import {
-  Badge,
-  Button,
-  Flex,
-  Heading,
-  SimpleGrid,
-  Text,
-} from "@chakra-ui/react";
-import { useState } from "react";
-
-import { CustomIcon } from "lib/components/icon";
-import { ToggleWithName } from "lib/components/ToggleWithName";
-import type { PoolDetail } from "lib/types/pool";
-
-import { PoolCard } from "./PoolCard";
-
-interface PoolListProp {
-  pools: PoolDetail[];
-}
-export const PoolList = ({ pools }: PoolListProp) => {
-  const [showNewest, setShowNewest] = useState(true);
-  const [toggle, setToggle] = useState("percent-value");
-
-  const options = [
-    {
-      label: "%Value",
-      value: "percent-value",
-    },
-    {
-      label: "Amount",
-      value: "amount",
-    },
-  ];
-
-  return (
-    <>
-      <Flex alignItems="center" justifyContent="space-between">
-        <Flex gap={2} alignItems="center">
-          <Heading as="h6" variant="h6">
-            Pools
-          </Heading>
-          <Badge variant="gray" color="text.main" textColor="text.main">
-            {pools.length}
-          </Badge>
-        </Flex>
-        <Flex gap={4}>
-          <Flex gap="2" alignItems="center">
-            <Text variant="body2" color="text.dark">
-              Sort Pool ID:
-            </Text>
-            {showNewest ? (
-              <Button
-                variant="outline-gray"
-                size="sm"
-                pr="1"
-                onClick={() => setShowNewest(!showNewest)}
-              >
-                Newest First
-                <CustomIcon name="arrow-down" color="text.dark" />
-              </Button>
-            ) : (
-              <Button
-                variant="outline-gray"
-                size="sm"
-                pr="1"
-                onClick={() => setShowNewest(!showNewest)}
-              >
-                Oldest First
-                <CustomIcon name="arrow-up" color="text.dark" />
-              </Button>
-            )}
-          </Flex>
-          <Flex gap="2" alignItems="center">
-            <Text variant="body2" color="text.dark">
-              View asset allocation in:
-            </Text>
-            <ToggleWithName
-              selectedValue={toggle}
-              options={options}
-              selectOption={(value: string) => setToggle(value)}
-            />
-          </Flex>
-        </Flex>
-      </Flex>
-      <SimpleGrid columns={{ sm: 1, md: 2 }} spacing={4} w="full" mt={4}>
-        {pools.map((item) => (
-          <PoolCard key={item.id} item={item} poolId={item.id} mode={toggle} />
-        ))}
-      </SimpleGrid>
-    </>
-  );
-};
diff --git a/src/lib/pages/pool/components/PoolLogo.tsx b/src/lib/pages/pool/components/PoolLogo.tsx
index ce90d2789..1d72df544 100644
--- a/src/lib/pages/pool/components/PoolLogo.tsx
+++ b/src/lib/pages/pool/components/PoolLogo.tsx
@@ -1,10 +1,9 @@
 import { Flex, Image } from "@chakra-ui/react";
 
+import { UndefinedTokenList } from "../constant";
 import { useAssetInfos } from "lib/services/assetService";
 import type { PoolDetail } from "lib/types/pool";
 
-import { UndefinedTokenList } from "./constant";
-
 interface PoolLogoProps {
   poolLiquidity: PoolDetail["poolLiquidity"];
 }
diff --git a/src/lib/pages/pool/components/UnsupportedPoolList.tsx b/src/lib/pages/pool/components/UnsupportedPoolList.tsx
deleted file mode 100644
index 6bb8bd24e..000000000
--- a/src/lib/pages/pool/components/UnsupportedPoolList.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import {
-  Accordion,
-  Badge,
-  Button,
-  Flex,
-  Heading,
-  SimpleGrid,
-  Text,
-} from "@chakra-ui/react";
-import { useState } from "react";
-
-import { CustomIcon } from "lib/components/icon";
-import type { PoolDetail } from "lib/types/pool";
-
-import { UnsupportedPoolCard } from "./UnsupportedPoolCard";
-
-interface UnsupportedPoolListProp {
-  pools: PoolDetail[];
-}
-export const UnsupportedPoolList = ({ pools }: UnsupportedPoolListProp) => {
-  const [showNewest, setShowNewest] = useState(true);
-  return (
-    <>
-      <Flex alignItems="center" justifyContent="space-between" h="32px">
-        <Flex gap={2} alignItems="center">
-          <Heading as="h6" variant="h6">
-            Pools with unsupported tokens
-          </Heading>
-          <Badge variant="gray" color="text.main" textColor="text.main">
-            {pools.length}
-          </Badge>
-        </Flex>
-        <Flex gap={4}>
-          <Flex gap="2" alignItems="center">
-            <Text variant="body2" color="text.dark">
-              Sort Pool ID:
-            </Text>
-            {showNewest ? (
-              <Button
-                variant="outline-gray"
-                size="sm"
-                pr="1"
-                onClick={() => setShowNewest(!showNewest)}
-              >
-                Newest First
-                <CustomIcon name="arrow-down" color="text.dark" />
-              </Button>
-            ) : (
-              <Button
-                variant="outline-gray"
-                size="sm"
-                pr="1"
-                onClick={() => setShowNewest(!showNewest)}
-              >
-                Oldest First
-                <CustomIcon name="arrow-up" color="text.dark" />
-              </Button>
-            )}
-          </Flex>
-          <Flex gap="2" alignItems="center">
-            <Button variant="outline-gray" size="sm">
-              Expand All
-            </Button>
-          </Flex>
-        </Flex>
-      </Flex>
-      <SimpleGrid columns={1} spacing={4} w="full">
-        <Accordion allowMultiple>
-          {pools.map((item) => (
-            <UnsupportedPoolCard key={item.id} item={item} poolId={item.id} />
-          ))}
-        </Accordion>
-      </SimpleGrid>
-    </>
-  );
-};
diff --git a/src/lib/pages/pool/components/constant.ts b/src/lib/pages/pool/components/constant.ts
deleted file mode 100644
index 02e16981d..000000000
--- a/src/lib/pages/pool/components/constant.ts
+++ /dev/null
@@ -1,415 +0,0 @@
-import type { Addr, ContractAddr, PoolDetail } from "lib/types";
-
-export const UndefinedTokenList = [
-  "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet.svg",
-  "https://assets.alleslabs.dev/webapp-assets/asset/undefined-white.svg",
-  "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet-light.svg",
-];
-export const MockUpPoolList: PoolDetail[] = [
-  {
-    id: 31,
-    blockHeight: 1231354,
-    creator: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx" as Addr,
-    poolLiquidity: [
-      {
-        denom:
-          "ibc/D38FD4C586C397DDAAB715C654DAEE3C3C40462CD410254AC7576208E947605B",
-        amount: "3000000990",
-      },
-      {
-        denom:
-          "ibc/0BE7C3DAC50BB1C34565C76F01944DCC79B50CF359B63149B9E04E2A6736A6E6",
-        amount: "1299997",
-      },
-      {
-        denom: "uion",
-        amount: "92330032",
-      },
-      {
-        denom: "uosmo",
-        amount: "2850",
-      },
-    ],
-    type: "Balancer",
-    isSuperfluid: false,
-    isSupported: true,
-    swapFee: 0.03,
-    exitFee: 0.0,
-    futurePoolGovernor: "24h",
-    smoothWeightChangeParams: {
-      start_time: "2023-03-09T16:35:41Z",
-      duration: "1209600s",
-      initial_pool_weights: [
-        {
-          token: {
-            denom:
-              "factory/osmo15d4apf20449ajvwycq8ruaypt7v6d345z36n9l/factory",
-            amount: "0",
-          },
-          weight: "2147483648",
-        },
-        {
-          token: {
-            denom: "stake",
-            amount: "0",
-          },
-          weight: "1073741824",
-        },
-      ],
-      target_pool_weights: [
-        {
-          token: {
-            denom:
-              "factory/osmo15d4apf20449ajvwycq8ruaypt7v6d345z36n9l/factory",
-            amount: "20",
-          },
-          weight: "1073741824",
-        },
-        {
-          token: {
-            denom: "stake",
-            amount: "10",
-          },
-          weight: "1073741824",
-        },
-      ],
-    },
-    scalingFactors: null,
-    scalingFactorController: null,
-    weight: [
-      {
-        denom:
-          "ibc/D38FD4C586C397DDAAB715C654DAEE3C3C40462CD410254AC7576208E947605B",
-        weight: "268435456000000",
-      },
-      {
-        denom:
-          "ibc/0BE7C3DAC50BB1C34565C76F01944DCC79B50CF359B63149B9E04E2A6736A6E6",
-        weight: "268435456000000",
-      },
-      {
-        denom: "uion",
-        weight: "268435456000000",
-      },
-      {
-        denom: "uosmo",
-        weight: "268435456000000",
-      },
-    ],
-    poolAddress:
-      "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn" as ContractAddr,
-  },
-  {
-    id: 231,
-    blockHeight: 1231354,
-    creator: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx" as Addr,
-    poolLiquidity: [
-      {
-        denom: "uion",
-        amount: "268435456000000",
-      },
-      {
-        denom:
-          "ibc/ACA4C8A815A053CC027DB90D15915ADA31939FA331CE745862CDD00A2904FA17",
-        amount: "268435456000000",
-      },
-      {
-        denom: "uosmo",
-        amount: "3053",
-      },
-      {
-        denom:
-          "ibc/7186C4B1A0596A1AB34C201E27D659B4A9837B46A328BCE5C0E452CD7146BC8F",
-        amount: "1000",
-      },
-      {
-        denom: "uion",
-        amount: "1000",
-      },
-    ],
-    type: "Balancer",
-    isSuperfluid: true,
-    isSupported: true,
-    swapFee: 0.03,
-    exitFee: 0.000000000001,
-    futurePoolGovernor: "24h",
-    smoothWeightChangeParams: null,
-    scalingFactors: null,
-    scalingFactorController: null,
-    weight: [
-      {
-        denom:
-          "ibc/ACA4C8A815A053CC027DB90D15915ADA31939FA331CE745862CDD00A2904FA17",
-        weight: "268435456000000",
-      },
-      {
-        denom:
-          "ibc/FF3065989E34457F342D4EFB8692406D49D4E2B5C70F725F127862E22CE6BDCD",
-        weight: "268435456000000",
-      },
-      {
-        denom: "uosmo",
-        weight: "268435456000000",
-      },
-      {
-        denom:
-          "ibc/7186C4B1A0596A1AB34C201E27D659B4A9837B46A328BCE5C0E452CD7146BC8F",
-        weight: "268435456000000",
-      },
-      {
-        denom: "uion",
-        weight: "268435456000000",
-      },
-    ],
-    poolAddress:
-      "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn" as ContractAddr,
-  },
-  {
-    id: 932,
-    blockHeight: 1231354,
-    creator: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx" as Addr,
-    poolLiquidity: [
-      {
-        denom: "uion",
-        amount: "81386211729",
-      },
-      {
-        denom: "uosmo",
-        amount: "99224517983",
-      },
-    ],
-    type: "Stableswap",
-    isSuperfluid: true,
-    isSupported: true,
-    swapFee: 0.0004,
-    exitFee: 0.0,
-    futurePoolGovernor: "24h",
-    smoothWeightChangeParams: null,
-    scalingFactors: ["1", "1"],
-    scalingFactorController: "",
-    weight: null,
-    poolAddress:
-      "osmo1kxnekx4q8yem6wvp5t9ggqvhuxaqw7san00x5qdazp3fe597f8hsqft4nq" as ContractAddr,
-  },
-  {
-    id: 872,
-    blockHeight: 1231354,
-    creator: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx" as Addr,
-    poolLiquidity: [
-      {
-        denom:
-          "ibc/FF3065989E34457F342D4EFB8692406D49D4E2B5C70F725F127862E22CE6BDCD",
-        amount: "21181386729",
-      },
-      {
-        denom:
-          "ibc/F9E624EB89ABEE4CB1EC04D7941F613BD8383EE7DE323589A82066D0345EF6EB",
-        amount: "17983992245",
-      },
-      {
-        denom: "uosmo",
-        amount: "17983992245",
-      },
-    ],
-    type: "Stableswap",
-    isSuperfluid: false,
-    isSupported: true,
-    swapFee: 0.0004,
-    exitFee: 0.0,
-    futurePoolGovernor: "24h",
-    smoothWeightChangeParams: null,
-    scalingFactors: ["1", "1", "1"],
-    scalingFactorController: "",
-    weight: null,
-    poolAddress:
-      "osmo1kxnekx4q8yem6wvp5t9ggqvhuxaqw7san00x5qdazp3fe597f8hsqft4nq" as ContractAddr,
-  },
-  {
-    id: 21,
-    blockHeight: 1231354,
-    creator: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx" as Addr,
-    poolLiquidity: [
-      {
-        denom:
-          "ibc/62CD410254AC7576208E947605BD38FD4C586C397DDAAB715C654DAEE3C3C404",
-        amount: "3053",
-      },
-      {
-        denom:
-          "ibc/CC79B50CF359B63149B9E04E2A6736A6E60BE7C3DAC50BB1C34565C76F01944D",
-        amount: "127",
-      },
-      {
-        denom:
-          "ibc/CF359B63149B9E04E2A67CC79B5036A6E60BE7C3DAC50BB1C34565C76F01944D",
-        amount: "9226",
-      },
-      {
-        denom:
-          "ibc/CFC3DAC50BB1C3456359B63149B9E04E2A67CC79B5036A6E60BE75C76F01944D",
-        amount: "2825",
-      },
-    ],
-    type: "Balancer",
-    isSuperfluid: false,
-    isSupported: false,
-    swapFee: 0.03,
-    exitFee: 0.0,
-    futurePoolGovernor: "24h",
-    smoothWeightChangeParams: null,
-    scalingFactors: null,
-    scalingFactorController: null,
-    weight: [
-      {
-        denom:
-          "ibc/62CD410254AC7576208E947605BD38FD4C586C397DDAAB715C654DAEE3C3C404",
-        weight: "268435456000000",
-      },
-      {
-        denom:
-          "ibc/CC79B50CF359B63149B9E04E2A6736A6E60BE7C3DAC50BB1C34565C76F01944D",
-        weight: "268435456000000",
-      },
-      {
-        denom:
-          "ibc/CF359B63149B9E04E2A67CC79B5036A6E60BE7C3DAC50BB1C34565C76F01944D",
-        weight: "268435456000000",
-      },
-      {
-        denom:
-          "ibc/CFC3DAC50BB1C3456359B63149B9E04E2A67CC79B5036A6E60BE75C76F01944D",
-        weight: "268435456000000",
-      },
-    ],
-    poolAddress:
-      "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn" as ContractAddr,
-  },
-  {
-    id: 221,
-    blockHeight: 1231354,
-    creator: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx" as Addr,
-    poolLiquidity: [
-      {
-        denom:
-          "ibc/ACA4C90D15915ADA31939FA331CE745862CDD00A2904FA178A815A053CC027DB",
-        amount: "3053",
-      },
-      {
-        denom: "uosmo",
-        amount: "127",
-      },
-      {
-        denom:
-          "ibc/725F127862E22CE6BDCDF70FF3065989E34457F342D4EFB8692406D49D4E2B5C",
-        amount: "3053",
-      },
-      {
-        denom:
-          "ibc/6C4B1A0596A1AB34C201E27D659B4A9837B46A328BCE5C0E452CD7146BC7188F",
-        amount: "1000",
-      },
-      {
-        denom: "uion",
-        amount: "1000",
-      },
-    ],
-    type: "Balancer",
-    isSuperfluid: true,
-    isSupported: false,
-    swapFee: 0.03,
-    exitFee: 0.000000000001,
-    futurePoolGovernor: "24h",
-    smoothWeightChangeParams: null,
-    scalingFactors: null,
-    scalingFactorController: null,
-    weight: [
-      {
-        denom:
-          "ibc/ACA4C90D15915ADA31939FA331CE745862CDD00A2904FA178A815A053CC027DB",
-        weight: "268435456000000",
-      },
-      {
-        denom: "uosmo",
-        weight: "268435456000000",
-      },
-      {
-        denom:
-          "ibc/725F127862E22CE6BDCDF70FF3065989E34457F342D4EFB8692406D49D4E2B5C",
-        weight: "268435456000000",
-      },
-      {
-        denom:
-          "ibc/6C4B1A0596A1AB34C201E27D659B4A9837B46A328BCE5C0E452CD7146BC7188F",
-        weight: "268435456000000",
-      },
-      {
-        denom: "uion",
-        weight: "268435456000000",
-      },
-    ],
-    poolAddress:
-      "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn" as ContractAddr,
-  },
-  {
-    id: 941,
-    blockHeight: 1231354,
-    creator: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx" as Addr,
-    poolLiquidity: [
-      {
-        denom:
-          "ibc/6CC201E27D659B4A9837B46A328BC4B1A0596A1AB34E5C0E452CD7146BC7188F",
-        amount: "81386211729",
-      },
-      {
-        denom:
-          "ibc/9837B46A328BC4B6CC201E27D659B4A1A0596A1AB34E5C0E452CD7146BC7188F",
-        amount: "99224517983",
-      },
-    ],
-    type: "Stableswap",
-    isSuperfluid: true,
-    isSupported: false,
-    swapFee: 0.0004,
-    exitFee: 0.0,
-    futurePoolGovernor: "24h",
-    smoothWeightChangeParams: null,
-    scalingFactors: ["1", "1"],
-    scalingFactorController: "",
-    weight: null,
-    poolAddress:
-      "osmo1kxnekx4q8yem6wvp5t9ggqvhuxaqw7san00x5qdazp3fe597f8hsqft4nq" as ContractAddr,
-  },
-  {
-    id: 372,
-    blockHeight: 1231354,
-    creator: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx" as Addr,
-    poolLiquidity: [
-      {
-        denom:
-          "ibc/42D4EFB8692406FF3065989E34457F3D49D4E2B5C70F725F127862E22CE6BDCD",
-        amount: "21181386729",
-      },
-      {
-        denom:
-          "ibc/ABEE4CB1EC04D7941F9E624EB89F613BD8383EE7DE323589A82066D0345EF6EB",
-        amount: "17983992245",
-      },
-      {
-        denom: "uion",
-        amount: "17983992245",
-      },
-    ],
-    type: "Stableswap",
-    isSuperfluid: false,
-    isSupported: false,
-    swapFee: 0.0004,
-    exitFee: 0.0,
-    futurePoolGovernor: "24h",
-    smoothWeightChangeParams: null,
-    scalingFactors: ["1", "1", "1"],
-    scalingFactorController: "",
-    weight: null,
-    poolAddress:
-      "osmo1kxnekx4q8yem6wvp5t9ggqvhuxaqw7san00x5qdazp3fe597f8hsqft4nq" as ContractAddr,
-  },
-];
diff --git a/src/lib/pages/pool/components/PoolCard.tsx b/src/lib/pages/pool/components/supportedSection/PoolCard.tsx
similarity index 65%
rename from src/lib/pages/pool/components/PoolCard.tsx
rename to src/lib/pages/pool/components/supportedSection/PoolCard.tsx
index 04990f51b..da5f96508 100644
--- a/src/lib/pages/pool/components/PoolCard.tsx
+++ b/src/lib/pages/pool/components/supportedSection/PoolCard.tsx
@@ -1,34 +1,21 @@
-import {
-  Box,
-  Flex,
-  IconButton,
-  Skeleton,
-  Text,
-  Tooltip,
-} from "@chakra-ui/react";
-import big, { Big } from "big.js";
+import { Box, Flex, IconButton, Text, Tooltip } from "@chakra-ui/react";
+import type { Big } from "big.js";
+import big from "big.js";
 import Link from "next/link";
 
+import { PoolHeader } from "../PoolHeader";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
-import { useAssetInfos } from "lib/services/assetService";
-import type { USD } from "lib/types";
-import type { PoolDetail } from "lib/types/pool";
-import {
-  calAssetValueWithPrecision,
-  formatPrice,
-  getTokenLabel,
-} from "lib/utils";
-import { formatPercentValue } from "lib/utils/formatter/formatPercentValue";
+import type { USD, Pool } from "lib/types";
+import { formatPrice, getTokenLabel } from "lib/utils";
 
-import { PoolHeader } from "./PoolHeader";
+const pebble700 = "pebble.700";
 
 interface PoolCardProps {
-  item: PoolDetail;
+  item: Pool;
   poolId: number;
   mode: string;
 }
-const pebble700 = "pebble.700";
 
 export const PoolCard = ({
   item,
@@ -39,26 +26,11 @@ export const PoolCard = ({
   const handleOnClick = () => {
     navigate({ pathname: `/pool/[poolId]`, query: { poolId } });
   };
-  const { assetInfos } = useAssetInfos();
 
-  if (!assetInfos)
-    return (
-      <Skeleton height="175px" startColor="pebble.900" endColor="pebble.800" />
-    );
-
-  const liquidity = item.poolLiquidity.reduce((total, asset) => {
-    const assetInfo = assetInfos[asset.denom];
-    return total.add(
-      assetInfo
-        ? calAssetValueWithPrecision({
-            amount: asset.amount,
-            id: assetInfo.id,
-            price: assetInfo.price,
-            precision: assetInfo.precision,
-          })
-        : (big(0) as USD<Big>)
-    ) as USD<Big>;
-  }, big(0) as USD<Big>);
+  const liquidity = item.poolLiquidity.reduce(
+    (total, asset) => total.add(asset.value ?? big(0)) as USD<Big>,
+    big(0) as USD<Big>
+  );
 
   return (
     <Flex
@@ -154,23 +126,11 @@ export const PoolCard = ({
           >
             <Box>
               <Text variant="body3" color="text.dark" fontWeight="600">
-                {assetInfos?.[asset.denom]?.symbol ||
-                  getTokenLabel(asset.denom)}
+                {getTokenLabel(asset.denom)}
               </Text>
               <Text variant="body3" color="text.main">
                 {mode === "percent-value"
-                  ? `${formatPercentValue(
-                      Big(
-                        calAssetValueWithPrecision({
-                          amount: asset.amount,
-                          id: assetInfos?.[asset.denom]?.id || "",
-                          price: assetInfos?.[asset.denom]?.price,
-                          precision: assetInfos?.[asset.denom]?.precision || 0,
-                        })
-                      )
-                        .div(liquidity)
-                        .times(100)
-                    )}`
+                  ? `${(asset.value ?? big(0)).div(liquidity).times(100)}`
                   : `${asset.amount}`}
               </Text>
             </Box>
diff --git a/src/lib/pages/pool/components/supportedSection/SupportedPoolList.tsx b/src/lib/pages/pool/components/supportedSection/SupportedPoolList.tsx
new file mode 100644
index 000000000..960e2ca1b
--- /dev/null
+++ b/src/lib/pages/pool/components/supportedSection/SupportedPoolList.tsx
@@ -0,0 +1,37 @@
+import { SimpleGrid } from "@chakra-ui/react";
+
+import { Loading } from "lib/components/Loading";
+import { EmptyState } from "lib/components/state";
+import type { Option, Pool } from "lib/types";
+
+import { PoolCard } from "./PoolCard";
+
+interface SupportedPoolListProps {
+  pools: Option<Pool[]>;
+  isLoading: boolean;
+  mode: string;
+}
+
+export const SupportedPoolList = ({
+  pools,
+  isLoading,
+  mode,
+}: SupportedPoolListProps) => {
+  if (isLoading) return <Loading />;
+  if (!pools?.length)
+    return (
+      <EmptyState
+        imageVariant="empty"
+        message="No supported pool found."
+        withBorder
+      />
+    );
+
+  return (
+    <SimpleGrid columns={{ sm: 1, md: 2 }} spacing={4} w="full" mt={4}>
+      {pools.map((item) => (
+        <PoolCard key={item.id} item={item} poolId={item.id} mode={mode} />
+      ))}
+    </SimpleGrid>
+  );
+};
diff --git a/src/lib/pages/pool/components/supportedSection/index.tsx b/src/lib/pages/pool/components/supportedSection/index.tsx
new file mode 100644
index 000000000..595690dd5
--- /dev/null
+++ b/src/lib/pages/pool/components/supportedSection/index.tsx
@@ -0,0 +1,137 @@
+import { Badge, Button, Flex, Heading, Text } from "@chakra-ui/react";
+import type { ChangeEvent } from "react";
+import { useState } from "react";
+
+import { usePools } from "../../data";
+import { CustomIcon } from "lib/components/icon";
+import { Pagination } from "lib/components/pagination";
+import { usePaginator } from "lib/components/pagination/usePaginator";
+import { ToggleWithName } from "lib/components/ToggleWithName";
+import { Order_By } from "lib/gql/graphql";
+import type { PoolTypeFilter } from "lib/types";
+
+import { SupportedPoolList } from "./SupportedPoolList";
+
+const OPTIONS = [
+  {
+    label: "%Value",
+    value: "percent-value",
+  },
+  {
+    label: "Amount",
+    value: "amount",
+  },
+];
+interface SupportedSectionProp {
+  poolType: PoolTypeFilter;
+  isSuperfluidOnly: boolean;
+  search: string;
+  totalData: number;
+  refetchCount: () => void;
+  scrollComponentId: string;
+}
+
+export const SupportedSection = ({
+  poolType,
+  isSuperfluidOnly,
+  search,
+  totalData,
+  refetchCount,
+  scrollComponentId,
+}: SupportedSectionProp) => {
+  const [showNewest, setShowNewest] = useState(true);
+  const [toggle, setToggle] = useState("percent-value");
+
+  const {
+    pagesQuantity,
+    currentPage,
+    setCurrentPage,
+    pageSize,
+    setPageSize,
+    offset,
+  } = usePaginator({
+    total: totalData,
+    initialState: {
+      pageSize: 10,
+      currentPage: 1,
+      isDisabled: false,
+    },
+  });
+
+  const onPageChange = (nextPage: number) => {
+    refetchCount();
+    setCurrentPage(nextPage);
+  };
+
+  const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const size = Number(e.target.value);
+    refetchCount();
+    setPageSize(size);
+    setCurrentPage(1);
+  };
+
+  const { pools, isLoading } = usePools(
+    true,
+    poolType,
+    isSuperfluidOnly,
+    search,
+    showNewest ? Order_By.Desc : Order_By.Asc,
+    offset,
+    pageSize
+  );
+
+  return (
+    <>
+      <Flex alignItems="center" justifyContent="space-between">
+        <Flex gap={2} alignItems="center">
+          <Heading as="h6" variant="h6">
+            Pools
+          </Heading>
+          <Badge variant="gray" color="text.main" textColor="text.main">
+            {totalData}
+          </Badge>
+        </Flex>
+        <Flex gap={4}>
+          <Flex gap="2" alignItems="center">
+            <Text variant="body2" color="text.dark">
+              Sort Pool ID:
+            </Text>
+            <Button
+              variant="outline-gray"
+              size="sm"
+              pr="1"
+              onClick={() => setShowNewest(!showNewest)}
+            >
+              {showNewest ? "Newest First" : "Oldest First"}
+              <CustomIcon
+                name={showNewest ? "arrow-down" : "arrow-up"}
+                color="text.dark"
+              />
+            </Button>
+          </Flex>
+          <Flex gap="2" alignItems="center">
+            <Text variant="body2" color="text.dark">
+              View asset allocation in:
+            </Text>
+            <ToggleWithName
+              selectedValue={toggle}
+              options={OPTIONS}
+              selectOption={(value: string) => setToggle(value)}
+            />
+          </Flex>
+        </Flex>
+      </Flex>
+      <SupportedPoolList pools={pools} isLoading={isLoading} mode={toggle} />
+      <Pagination
+        currentPage={currentPage}
+        pagesQuantity={pagesQuantity}
+        offset={offset}
+        totalData={totalData}
+        scrollComponentId={scrollComponentId}
+        pageSize={pageSize}
+        onPageChange={onPageChange}
+        onPageSizeChange={onPageSizeChange}
+      />
+    </>
+  );
+};
diff --git a/src/lib/pages/pool/components/table/PoolAssetsTable.tsx b/src/lib/pages/pool/components/table/PoolAssetsTable.tsx
index 431e3cdac..14cf0ac2f 100644
--- a/src/lib/pages/pool/components/table/PoolAssetsTable.tsx
+++ b/src/lib/pages/pool/components/table/PoolAssetsTable.tsx
@@ -1,8 +1,7 @@
-import type { Coin } from "@cosmjs/stargate";
 import type { Big } from "big.js";
 
 import { TableContainer } from "lib/components/table/tableComponents";
-import type { PoolDetail, USD } from "lib/types";
+import type { PoolDetail, TokenWithValue, USD } from "lib/types";
 
 // import type { Option, Proposal } from "lib/types";
 import { PoolAssetsTableHeader } from "./PoolAssetsTableHeader";
@@ -10,7 +9,7 @@ import { PoolAssetsTableRow } from "./PoolAssetsTableRow";
 // import { PoolAssetsTableRow } from "./PoolAssetsTableRow";
 
 interface PoolAssetsTableProps {
-  assets: Coin[];
+  assets: TokenWithValue[];
   pool_type: PoolDetail["type"];
   // weight?: Option<PoolWeight[] | null>;
   // scaling_factors?: Option<string[] | null>;
diff --git a/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx b/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx
index 565e1b860..4fa509964 100644
--- a/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx
+++ b/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx
@@ -1,25 +1,21 @@
 import type { GridProps } from "@chakra-ui/react";
 import { Flex, Skeleton, Grid, Image, Text } from "@chakra-ui/react";
-import type { Coin } from "@cosmjs/stargate";
-import big from "big.js";
-import type { BigSource, Big } from "big.js";
+import type { Big } from "big.js";
 
-import { UndefinedTokenList } from "../constant";
+import { UndefinedTokenList } from "../../constant";
 import { TableRow } from "lib/components/table/tableComponents";
 import { useAssetInfos } from "lib/services/assetService";
-import type { Token, U, USD, PoolDetail } from "lib/types";
+import type { USD, PoolDetail, TokenWithValue } from "lib/types";
 import {
-  calculateAssetValue,
   d2Formatter,
   formatPrice,
   formatUTokenWithPrecision,
   getTokenLabel,
-  toToken,
 } from "lib/utils";
 
 interface PoolAssetsTableRowProps {
   pool_type: PoolDetail["type"];
-  asset: Coin;
+  asset: TokenWithValue;
   templateColumns: GridProps["templateColumns"];
   total_liquidity: USD<Big>;
 }
@@ -36,10 +32,7 @@ export const PoolAssetsTableRow = ({
       <Skeleton height="75px" startColor="pebble.900" endColor="pebble.800" />
     );
   const assetInfo = assetInfos[asset.denom];
-  const assetValue = calculateAssetValue(
-    toToken(big(asset.amount) as U<Token<BigSource>>, assetInfo.precision),
-    assetInfo.price as USD<number>
-  );
+
   return (
     <Grid templateColumns={templateColumns}>
       <TableRow>
@@ -78,13 +71,13 @@ export const PoolAssetsTableRow = ({
         <Flex alignItems="flex-end" w="full" flexDirection="column">
           <Text variant="body2" fontWeight="600" color="text.main">
             {formatUTokenWithPrecision(
-              asset.amount as U<Token>,
+              asset.amount,
               assetInfo.precision,
               false
             )}
           </Text>
           <Text variant="body3" color="text.dark">
-            {formatPrice(assetValue)}
+            {asset.value?.toString() ?? 0}
           </Text>
         </Flex>
       </TableRow>
diff --git a/src/lib/pages/pool/components/UnsupportedPoolCard.tsx b/src/lib/pages/pool/components/unsupportedSection/UnsupportedPoolCard.tsx
similarity index 96%
rename from src/lib/pages/pool/components/UnsupportedPoolCard.tsx
rename to src/lib/pages/pool/components/unsupportedSection/UnsupportedPoolCard.tsx
index ce2c66c92..2b883c499 100644
--- a/src/lib/pages/pool/components/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pool/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -12,17 +12,16 @@ import {
 } from "@chakra-ui/react";
 import Link from "next/link";
 
+import { UndefinedTokenList } from "../../constant";
+import { PoolHeader } from "../PoolHeader";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { useAssetInfos } from "lib/services/assetService";
-import type { PoolDetail } from "lib/types/pool";
+import type { Pool } from "lib/types";
 import { getTokenLabel } from "lib/utils";
 
-import { UndefinedTokenList } from "./constant";
-import { PoolHeader } from "./PoolHeader";
-
 interface PoolCardProps {
-  item: PoolDetail;
+  item: Pool;
   poolId: number;
 }
 const StyledIconButton = chakra(IconButton, {
diff --git a/src/lib/pages/pool/components/unsupportedSection/UnsupportedPoolList.tsx b/src/lib/pages/pool/components/unsupportedSection/UnsupportedPoolList.tsx
new file mode 100644
index 000000000..f73ffee2a
--- /dev/null
+++ b/src/lib/pages/pool/components/unsupportedSection/UnsupportedPoolList.tsx
@@ -0,0 +1,37 @@
+import { Accordion, SimpleGrid } from "@chakra-ui/react";
+
+import { Loading } from "lib/components/Loading";
+import { EmptyState } from "lib/components/state";
+import type { Option, Pool } from "lib/types";
+
+import { UnsupportedPoolCard } from "./UnsupportedPoolCard";
+
+interface UnsupportedPoolListProps {
+  pools: Option<Pool[]>;
+  isLoading: boolean;
+}
+
+export const UnsupportedPoolList = ({
+  pools,
+  isLoading,
+}: UnsupportedPoolListProps) => {
+  if (isLoading) return <Loading />;
+  if (!pools?.length)
+    return (
+      <EmptyState
+        imageVariant="empty"
+        message="No unsupported pool found."
+        withBorder
+      />
+    );
+
+  return (
+    <SimpleGrid columns={1} spacing={4} w="full">
+      <Accordion allowMultiple>
+        {pools.map((item) => (
+          <UnsupportedPoolCard key={item.id} item={item} poolId={item.id} />
+        ))}
+      </Accordion>
+    </SimpleGrid>
+  );
+};
diff --git a/src/lib/pages/pool/components/unsupportedSection/index.tsx b/src/lib/pages/pool/components/unsupportedSection/index.tsx
new file mode 100644
index 000000000..47ea09f85
--- /dev/null
+++ b/src/lib/pages/pool/components/unsupportedSection/index.tsx
@@ -0,0 +1,128 @@
+import { Badge, Button, Flex, Heading, Text } from "@chakra-ui/react";
+import type { ChangeEvent } from "react";
+import { useState } from "react";
+
+import { usePools } from "../../data";
+import { CustomIcon } from "lib/components/icon";
+import { Pagination } from "lib/components/pagination";
+import { usePaginator } from "lib/components/pagination/usePaginator";
+import { Order_By } from "lib/gql/graphql";
+import type { PoolTypeFilter } from "lib/types/pool";
+
+import { UnsupportedPoolList } from "./UnsupportedPoolList";
+
+interface UnsupportedSectionProp {
+  poolType: PoolTypeFilter;
+  isSuperfluidOnly: boolean;
+  search: string;
+  totalData: number;
+  refetchCount: () => void;
+  scrollComponentId: string;
+}
+export const UnsupportedSection = ({
+  poolType,
+  isSuperfluidOnly,
+  search,
+  totalData,
+  refetchCount,
+  scrollComponentId,
+}: UnsupportedSectionProp) => {
+  const [showNewest, setShowNewest] = useState(true);
+
+  const {
+    pagesQuantity,
+    currentPage,
+    setCurrentPage,
+    pageSize,
+    setPageSize,
+    offset,
+  } = usePaginator({
+    total: totalData,
+    initialState: {
+      pageSize: 10,
+      currentPage: 1,
+      isDisabled: false,
+    },
+  });
+
+  const onPageChange = (nextPage: number) => {
+    refetchCount();
+    setCurrentPage(nextPage);
+  };
+
+  const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const size = Number(e.target.value);
+    refetchCount();
+    setPageSize(size);
+    setCurrentPage(1);
+  };
+
+  const { pools, isLoading } = usePools(
+    false,
+    poolType,
+    isSuperfluidOnly,
+    search,
+    showNewest ? Order_By.Desc : Order_By.Asc,
+    offset,
+    pageSize
+  );
+
+  return (
+    <>
+      <Flex alignItems="center" justifyContent="space-between" h="32px">
+        <Flex gap={2} alignItems="center">
+          <Heading as="h6" variant="h6">
+            Pools with unsupported tokens
+          </Heading>
+          <Badge variant="gray" color="text.main" textColor="text.main">
+            {totalData}
+          </Badge>
+        </Flex>
+        <Flex gap={4}>
+          <Flex gap="2" alignItems="center">
+            <Text variant="body2" color="text.dark">
+              Sort Pool ID:
+            </Text>
+            {showNewest ? (
+              <Button
+                variant="outline-gray"
+                size="sm"
+                pr="1"
+                onClick={() => setShowNewest(!showNewest)}
+              >
+                Newest First
+                <CustomIcon name="arrow-down" color="text.dark" />
+              </Button>
+            ) : (
+              <Button
+                variant="outline-gray"
+                size="sm"
+                pr="1"
+                onClick={() => setShowNewest(!showNewest)}
+              >
+                Oldest First
+                <CustomIcon name="arrow-up" color="text.dark" />
+              </Button>
+            )}
+          </Flex>
+          <Flex gap="2" alignItems="center">
+            <Button variant="outline-gray" size="sm">
+              Expand All
+            </Button>
+          </Flex>
+        </Flex>
+      </Flex>
+      <UnsupportedPoolList pools={pools} isLoading={isLoading} />
+      <Pagination
+        currentPage={currentPage}
+        pagesQuantity={pagesQuantity}
+        offset={offset}
+        totalData={totalData}
+        scrollComponentId={scrollComponentId}
+        pageSize={pageSize}
+        onPageChange={onPageChange}
+        onPageSizeChange={onPageSizeChange}
+      />
+    </>
+  );
+};
diff --git a/src/lib/pages/pool/constant.ts b/src/lib/pages/pool/constant.ts
new file mode 100644
index 000000000..4bd4bf010
--- /dev/null
+++ b/src/lib/pages/pool/constant.ts
@@ -0,0 +1,5 @@
+export const UndefinedTokenList = [
+  "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet.svg",
+  "https://assets.alleslabs.dev/webapp-assets/asset/undefined-white.svg",
+  "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet-light.svg",
+];
diff --git a/src/lib/pages/pool/data.ts b/src/lib/pages/pool/data.ts
index 13707ae7b..bfbd325fc 100644
--- a/src/lib/pages/pool/data.ts
+++ b/src/lib/pages/pool/data.ts
@@ -11,6 +11,7 @@ import type {
   Option,
   Pool,
   PoolDetail,
+  PoolTypeFilter,
   PoolWeight,
   TokenWithValue,
 } from "lib/types";
@@ -18,16 +19,18 @@ import { coinToTokenWithValue } from "lib/utils";
 
 export const usePools = (
   isSupported: boolean,
+  poolType: PoolTypeFilter,
   isSuperfluidOnly: boolean,
   search: string,
   order: Order_By,
   offset: number,
   pageSize: number
-): { pools: Option<Pool<TokenWithValue>[]>; isLoading: boolean } => {
+): { pools: Option<Pool[]>; isLoading: boolean } => {
   const { assetInfos, isLoading: isLoadingAssetInfos } = useAssetInfos();
   const { data: poolList, isLoading: isLoadingPoolList } =
     usePoolListByIsSupported(
       isSupported,
+      poolType,
       isSuperfluidOnly,
       search,
       order,
@@ -41,7 +44,7 @@ export const usePools = (
       isLoading: isLoadingAssetInfos || isLoadingPoolList,
     };
 
-  const data = poolList.map<Pool<TokenWithValue>>((pool) => ({
+  const data = poolList.map<Pool>((pool) => ({
     id: pool.id,
     type: pool.type,
     isSuperfluid: pool.isSuperfluid,
@@ -84,7 +87,7 @@ export const usePool = (
       exitFee: pool.exitFee,
       futurePoolGovernor: pool.futurePoolGovernor,
       weight:
-        pool.weight?.map<PoolWeight<Big>>((weight) => ({
+        pool.weight?.map<PoolWeight>((weight) => ({
           denom: weight.denom,
           weight: big(weight.weight),
         })) ?? null,
diff --git a/src/lib/pages/pool/index.tsx b/src/lib/pages/pool/index.tsx
index d834f2d6c..98025fd98 100644
--- a/src/lib/pages/pool/index.tsx
+++ b/src/lib/pages/pool/index.tsx
@@ -17,27 +17,36 @@ import { useForm } from "react-hook-form";
 import { CustomTab } from "lib/components/CustomTab";
 import InputWithIcon from "lib/components/InputWithIcon";
 import PageContainer from "lib/components/PageContainer";
+import { usePoolListCountByIsSupported } from "lib/services/poolService";
+import type { PoolTypeFilter } from "lib/types";
 
-import { MockUpPoolList } from "./components/constant";
-import type { PoolTypeFilterValue } from "./components/FilterByPoolType";
 import { FilterByPoolType } from "./components/FilterByPoolType";
-import { PoolList } from "./components/PoolList";
-import { UnsupportedPoolList } from "./components/UnsupportedPoolList";
+import { SupportedSection } from "./components/supportedSection";
+import { UnsupportedSection } from "./components/unsupportedSection";
 
 interface PoolFilterState {
   keyword: string;
-  poolTypeValue: PoolTypeFilterValue;
+  poolTypeValue: PoolTypeFilter;
+  isSuperfluidOnly: boolean;
 }
 
-export type PoolToggleValue = "percent-value" | "amount";
 export const PoolIndex = () => {
+  const { data: supportedPoolCount, refetch: refetchSupportedPoolCount } =
+    usePoolListCountByIsSupported(true, "all", false, "");
+  const { data: unsupportedPoolCount, refetch: refetchUnsupportedPoolCount } =
+    usePoolListCountByIsSupported(false, "all", false, "");
+
   const { watch, setValue } = useForm<PoolFilterState>({
     defaultValues: {
       poolTypeValue: "all",
       keyword: "",
+      isSuperfluidOnly: true,
     },
   });
-  const { keyword, poolTypeValue } = watch();
+  const { keyword, poolTypeValue, isSuperfluidOnly } = watch();
+
+  const sectionHeaderId = "poolListTab";
+
   return (
     <PageContainer>
       <Heading variant="h5" as="h5">
@@ -55,14 +64,18 @@ export const PoolIndex = () => {
           />
           <FilterByPoolType
             initialSelected="all"
-            setPoolTypeValue={(newVal: PoolTypeFilterValue) => {
+            setPoolTypeValue={(newVal: PoolTypeFilter) => {
               if (newVal === poolTypeValue) return;
               setValue("poolTypeValue", newVal);
             }}
           />
           <Flex minW="250px">
             <FormControl display="flex" alignItems="center" gap={2}>
-              <Switch size="md" />
+              <Switch
+                size="md"
+                defaultChecked={isSuperfluidOnly}
+                onChange={(e) => setValue("isSuperfluidOnly", e.target.checked)}
+              />
               <FormLabel mb="0" cursor="pointer">
                 <Text display="flex" gap={2} alignItems="center">
                   Show only
@@ -79,22 +92,30 @@ export const PoolIndex = () => {
       </Flex>
       <Tabs>
         <TabList my={8} borderBottom="1px" borderColor="pebble.800">
-          <CustomTab count={MockUpPoolList.filter((x) => x.isSupported).length}>
-            Pools
-          </CustomTab>
-          <CustomTab
-            count={MockUpPoolList.filter((x) => !x.isSupported).length}
-          >
+          <CustomTab count={supportedPoolCount ?? 0}>Pools</CustomTab>
+          <CustomTab count={unsupportedPoolCount ?? 0}>
             Pools with unsupported tokens
           </CustomTab>
         </TabList>
         <TabPanels>
           <TabPanel p={0}>
-            <PoolList pools={MockUpPoolList.filter((x) => x.isSupported)} />
+            <SupportedSection
+              poolType={poolTypeValue}
+              isSuperfluidOnly={isSuperfluidOnly}
+              search={keyword}
+              totalData={supportedPoolCount ?? 0}
+              refetchCount={refetchSupportedPoolCount}
+              scrollComponentId={sectionHeaderId}
+            />
           </TabPanel>
           <TabPanel p={0}>
-            <UnsupportedPoolList
-              pools={MockUpPoolList.filter((x) => !x.isSupported)}
+            <UnsupportedSection
+              poolType={poolTypeValue}
+              isSuperfluidOnly={isSuperfluidOnly}
+              search={keyword}
+              totalData={unsupportedPoolCount ?? 0}
+              refetchCount={refetchUnsupportedPoolCount}
+              scrollComponentId={sectionHeaderId}
             />
           </TabPanel>
         </TabPanels>
diff --git a/src/lib/pages/pool/poolId.tsx b/src/lib/pages/pool/poolId.tsx
index 9b7e81b6d..242e8df49 100644
--- a/src/lib/pages/pool/poolId.tsx
+++ b/src/lib/pages/pool/poolId.tsx
@@ -1,24 +1,26 @@
 import { useRouter } from "next/router";
 
-import { useInternalNavigate } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
+import { EmptyState } from "lib/components/state";
+import type { Option, PoolDetail } from "lib/types";
+import { getFirstQueryParam } from "lib/utils";
 
-import { MockUpPoolList } from "./components/constant";
 import { PoolAssetDetail } from "./components/PoolAssetDetail";
 import { PoolDetailHeader } from "./components/PoolDetailHeader";
 import { PoolRelatedTxs } from "./components/PoolRelatedTxs";
+import { usePool } from "./data";
 
-export const PoolId = () => {
-  const router = useRouter();
-  const navigate = useInternalNavigate();
-
-  if (!router.query.poolId) return <Loading />;
-  const query = router.query.poolId;
-  const pool = MockUpPoolList.find((x) => x.id === +query);
-  if (!pool) return navigate({ pathname: `/pool` });
+interface PoolIdBodyProps {
+  pool: Option<PoolDetail>;
+  isLoading: boolean;
+}
+const PoolIdBody = ({ pool, isLoading }: PoolIdBodyProps) => {
+  if (isLoading) return <Loading />;
+  if (!pool)
+    return <EmptyState message="Pool Not Found." imageVariant="not-found" />;
   return (
-    <PageContainer>
+    <>
       <PoolDetailHeader pool={pool} />
       <PoolAssetDetail
         assets={pool.poolLiquidity}
@@ -27,6 +29,18 @@ export const PoolId = () => {
         // scaling_factors={pool.scaling_factors}
       />
       <PoolRelatedTxs />
+    </>
+  );
+};
+
+export const PoolId = () => {
+  const router = useRouter();
+  const poolIdParam = getFirstQueryParam(router.query.poolId);
+
+  const { pool, isLoading } = usePool(Number(poolIdParam));
+  return (
+    <PageContainer>
+      <PoolIdBody pool={pool} isLoading={isLoading} />
     </PageContainer>
   );
 };
diff --git a/src/lib/services/expression/poolExpression.ts b/src/lib/services/expression/poolExpression.ts
index cca992b9f..cc0a35f83 100644
--- a/src/lib/services/expression/poolExpression.ts
+++ b/src/lib/services/expression/poolExpression.ts
@@ -1,17 +1,20 @@
 import { useMemo } from "react";
 
+import type { PoolTypeFilter } from "lib/types";
 import { isPositiveInt } from "lib/utils";
 
 export const usePoolExpression = (
   isSupported: boolean,
+  poolType: PoolTypeFilter,
   isSuperfluidOnly: boolean,
   search: string
 ) =>
   useMemo(
     () => ({
       is_supported: { _eq: isSupported },
+      type: poolType !== "all" ? { _eq: poolType } : {},
       is_superfluid: isSuperfluidOnly ? { _eq: true } : {},
       id: isPositiveInt(search) ? { _eq: Number(search) } : {},
     }),
-    [isSuperfluidOnly, isSupported, search]
+    [isSuperfluidOnly, isSupported, poolType, search]
   );
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index 639e743a3..c71a04c59 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -1,3 +1,4 @@
+import type { Coin } from "@cosmjs/stargate";
 import type { UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
@@ -5,20 +6,26 @@ import { useCallback } from "react";
 import { useCelatoneApp } from "lib/app-provider";
 import type { Order_By } from "lib/gql/graphql";
 import { getPoolByPoolId, getPoolList, getPoolListCount } from "lib/query";
-import type { Pool, PoolDetail } from "lib/types";
+import type { Pool, PoolDetail, PoolTypeFilter } from "lib/types";
 
 import { usePoolExpression } from "./expression/poolExpression";
 
 export const usePoolListByIsSupported = (
   isSupported: boolean,
+  poolType: PoolTypeFilter,
   isSuperfluidOnly: boolean,
   search: string,
   order: Order_By,
   offset: number,
   pageSize: number
-): UseQueryResult<Pool[]> => {
+): UseQueryResult<Pool<Coin>[]> => {
   const { indexerGraphClient } = useCelatoneApp();
-  const expression = usePoolExpression(isSupported, isSuperfluidOnly, search);
+  const expression = usePoolExpression(
+    isSupported,
+    poolType,
+    isSuperfluidOnly,
+    search
+  );
 
   const queryFn = useCallback(async () => {
     return indexerGraphClient
@@ -29,7 +36,7 @@ export const usePoolListByIsSupported = (
         pageSize,
       })
       .then(({ pools }) =>
-        pools.map<Pool>((pool) => ({
+        pools.map<Pool<Coin>>((pool) => ({
           id: pool.id,
           type: pool.type,
           isSuperfluid: pool.is_superfluid,
@@ -55,11 +62,17 @@ export const usePoolListByIsSupported = (
 
 export const usePoolListCountByIsSupported = (
   isSupported: boolean,
+  poolType: PoolTypeFilter,
   isSuperfluidOnly: boolean,
   search: string
 ): UseQueryResult<number> => {
   const { indexerGraphClient } = useCelatoneApp();
-  const expression = usePoolExpression(isSupported, isSuperfluidOnly, search);
+  const expression = usePoolExpression(
+    isSupported,
+    poolType,
+    isSuperfluidOnly,
+    search
+  );
 
   const queryFn = useCallback(async () => {
     return indexerGraphClient
@@ -81,7 +94,9 @@ export const usePoolListCountByIsSupported = (
   );
 };
 
-export const usePoolByPoolId = (poolId: number): UseQueryResult<PoolDetail> => {
+export const usePoolByPoolId = (
+  poolId: number
+): UseQueryResult<PoolDetail<string, Coin>> => {
   const { indexerGraphClient } = useCelatoneApp();
 
   const queryFn = useCallback(async () => {
@@ -107,7 +122,7 @@ export const usePoolByPoolId = (poolId: number): UseQueryResult<PoolDetail> => {
               smoothWeightChangeParams: pools_by_pk.smooth_weight_change_params,
               scalingFactors: pools_by_pk.scaling_factors,
               scalingFactorController: pools_by_pk.scaling_factor_controller,
-            } as PoolDetail)
+            } as PoolDetail<string, Coin>)
           : undefined
       );
   }, [poolId, indexerGraphClient]);
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index 2f2dd61b0..baa863af7 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -3,12 +3,16 @@ import type { Big } from "big.js";
 
 import type { Addr, ContractAddr, Option, TokenWithValue } from "lib/types";
 
-export interface PoolWeight<T extends string | Big> {
+export type PoolTypeFilter = "all" | "balancer" | "stableswap";
+
+export interface PoolWeight<T extends string | Big = Big> {
   denom: string;
   weight: T;
 }
 
-export interface Pool<TLiquidity extends Coin | TokenWithValue = Coin> {
+export interface Pool<
+  TLiquidity extends Coin | TokenWithValue = TokenWithValue
+> {
   id: number;
   type: string;
   isSuperfluid: boolean;
@@ -16,8 +20,8 @@ export interface Pool<TLiquidity extends Coin | TokenWithValue = Coin> {
 }
 
 export interface PoolDetail<
-  TWeight extends string | Big = string,
-  TLiquidity extends Coin | TokenWithValue = Coin
+  TWeight extends string | Big = Big,
+  TLiquidity extends Coin | TokenWithValue = TokenWithValue
 > extends Pool<TLiquidity> {
   isSupported: boolean;
   blockHeight: Option<number>;

From 888bcb6d2dd8cdda870b6fd89cb51f31cd68f12f Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Mon, 17 Apr 2023 16:23:15 +0700
Subject: [PATCH 016/354] feat: add instantiate permission to store code
 message

---
 package.json                                  |   8 +-
 src/env.ts                                    |  38 ++-
 src/lib/app-fns/tx/upload.tsx                 |  38 +--
 src/lib/app-provider/contexts/app.tsx         |  27 +-
 src/lib/app-provider/hooks/useCelatoneApp.ts  |  12 +-
 src/lib/app-provider/tx/upload.ts             |  22 +-
 src/lib/components/AssignMe.tsx               |  28 ++
 src/lib/components/forms/ControllerInput.tsx  |   2 +-
 src/lib/components/upload/UploadSection.tsx   |  96 ++++---
 .../components/AddressPermissionInput.tsx     | 119 ++++++++
 .../components/InstantiatePermissionRadio.tsx |  98 +++++++
 .../upload/components/UploadCard.tsx          |   2 +-
 src/lib/components/upload/types.ts            |  11 -
 src/lib/types/index.ts                        |   1 +
 src/lib/types/tx/msg.ts                       |   5 +-
 src/lib/types/upload.ts                       |  10 +
 src/lib/utils/tx/composeMsg.ts                |  25 +-
 src/pages/_app.tsx                            |   2 +
 src/types.ts                                  |   6 +-
 yarn.lock                                     | 255 +++++++-----------
 20 files changed, 565 insertions(+), 240 deletions(-)
 create mode 100644 src/lib/components/AssignMe.tsx
 create mode 100644 src/lib/components/upload/components/AddressPermissionInput.tsx
 create mode 100644 src/lib/components/upload/components/InstantiatePermissionRadio.tsx
 delete mode 100644 src/lib/components/upload/types.ts
 create mode 100644 src/lib/types/upload.ts

diff --git a/package.json b/package.json
index 3698ed4e4..7adc61d34 100644
--- a/package.json
+++ b/package.json
@@ -26,10 +26,10 @@
     "@chakra-ui/icons": "^2.0.11",
     "@chakra-ui/react": "^2.3.6",
     "@chakra-ui/styled-system": "^2.3.5",
-    "@cosmjs/cosmwasm-stargate": "^0.29.3",
-    "@cosmjs/encoding": "^0.29.5",
-    "@cosmjs/proto-signing": "^0.29.5",
-    "@cosmjs/stargate": "^0.29.3",
+    "@cosmjs/cosmwasm-stargate": "^0.30.1",
+    "@cosmjs/encoding": "^0.30.1",
+    "@cosmjs/proto-signing": "^0.30.1",
+    "@cosmjs/stargate": "^0.30.1",
     "@cosmos-kit/core": "^0.20.0",
     "@cosmos-kit/keplr": "^0.20.0",
     "@cosmos-kit/react": "^0.19.0",
diff --git a/src/env.ts b/src/env.ts
index c6670239e..24fc18152 100644
--- a/src/env.ts
+++ b/src/env.ts
@@ -1,5 +1,15 @@
-import type { ContractAddr, ChainGasPrice, Token, U } from "lib/types";
-import type { CelatoneConstants, CelatoneContractAddress } from "types";
+import type {
+  ContractAddr,
+  ChainGasPrice,
+  Token,
+  U,
+  HumanAddr,
+} from "lib/types";
+import type {
+  CelatoneConstants,
+  CelatoneContractAddress,
+  CelatoneHumanAddress,
+} from "types";
 
 export const CELATONE_FALLBACK_GAS_PRICE: Record<string, ChainGasPrice> = {
   osmosistestnet: {
@@ -39,6 +49,30 @@ export const CELATONE_APP_CONTRACT_ADDRESS = (
   }
 };
 
+// TODO - change example value
+export const CELATONE_APP_HUMAN_ADDRESS = (
+  chainName: string
+): CelatoneHumanAddress => {
+  switch (chainName) {
+    case "osmosis":
+    case "osmosistestnet":
+      return {
+        example:
+          "osmo1p0pxllmqjgl2tefy7grypt34jdpdltg3ka98n8unnl322wqps7lqtu576h" as HumanAddr,
+      };
+    case "terra2":
+    case "terra2testnet":
+      return {
+        example:
+          "terra1k5arpcpusfrtnucr5q8f5uh5twghh3q360hv4j6fe0hvzn7x8skqempu76" as HumanAddr,
+      };
+    default:
+      return {
+        example: "" as HumanAddr,
+      };
+  }
+};
+
 export const FALLBACK_LCD_ENDPOINT: Record<string, string> = {
   osmosis: "https://lcd.osmosis.zone/",
   osmosistestnet: "https://lcd-test.osmosis.zone/",
diff --git a/src/lib/app-fns/tx/upload.tsx b/src/lib/app-fns/tx/upload.tsx
index 899206637..759c66cff 100644
--- a/src/lib/app-fns/tx/upload.tsx
+++ b/src/lib/app-fns/tx/upload.tsx
@@ -1,8 +1,5 @@
-import type {
-  SigningCosmWasmClient,
-  UploadResult,
-} from "@cosmjs/cosmwasm-stargate";
-import type { StdFee } from "@cosmjs/stargate";
+import type { SigningCosmWasmClient } from "@cosmjs/cosmwasm-stargate";
+import type { DeliverTxResponse, logs, StdFee } from "@cosmjs/stargate";
 import { pipe } from "@rx-stream/pipe";
 import type { Observable } from "rxjs";
 
@@ -10,7 +7,8 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { TxStreamPhase } from "lib/types";
-import type { HumanAddr, TxResultRendering } from "lib/types";
+import type { HumanAddr, TxResultRendering, ComposedMsg } from "lib/types";
+import { findAttr } from "lib/utils";
 import { formatUFee } from "lib/utils/formatter/denom";
 
 import { catchTxError } from "./common/catchTxError";
@@ -19,8 +17,8 @@ import { sendingTx } from "./common/sending";
 
 interface UploadTxParams {
   address: HumanAddr;
-  codeDesc: string;
-  wasmCode: Uint8Array;
+  codeName: string;
+  messages: ComposedMsg[];
   wasmFileName: string;
   fee: StdFee;
   memo?: string;
@@ -31,8 +29,8 @@ interface UploadTxParams {
 
 export const uploadContractTx = ({
   address,
-  codeDesc,
-  wasmCode,
+  codeName,
+  messages,
   wasmFileName,
   fee,
   memo,
@@ -42,12 +40,20 @@ export const uploadContractTx = ({
 }: UploadTxParams): Observable<TxResultRendering> => {
   return pipe(
     sendingTx(fee),
-    postTx<UploadResult>({
-      postFn: () => client.upload(address, wasmCode, fee, memo),
+    postTx<DeliverTxResponse>({
+      postFn: () => client.signAndBroadcast(address, messages, fee, memo),
     }),
     ({ value: txInfo }) => {
       AmpTrack(AmpEvent.TX_SUCCEED);
-      onTxSucceed?.(txInfo.codeId);
+      const mimicLog: logs.Log = {
+        msg_index: 0,
+        log: "",
+        events: txInfo.events,
+      };
+
+      const codeId = findAttr(mimicLog, "store_code", "code_id") || "0";
+
+      onTxSucceed?.(parseInt(codeId, 10));
       const txFee = txInfo.events.find((e) => e.type === "tx")?.attributes[0]
         .value;
       return {
@@ -56,10 +62,10 @@ export const uploadContractTx = ({
         receipts: [
           {
             title: "Code ID",
-            value: txInfo.codeId,
+            value: codeId,
             html: (
               <div style={{ display: "inline-flex", alignItems: "center" }}>
-                <ExplorerLink type="code_id" value={txInfo.codeId.toString()} />
+                <ExplorerLink type="code_id" value={codeId} />
               </div>
             ),
           },
@@ -80,7 +86,7 @@ export const uploadContractTx = ({
           description: (
             <>
               <span style={{ fontWeight: 700 }}>
-                ‘{codeDesc || `${wasmFileName}(${txInfo.codeId})`}’
+                ‘{codeName || `${wasmFileName}(${codeId})`}’
               </span>{" "}
               is has been uploaded. Would you like to{" "}
               {isMigrate ? "migrate" : "instantiate"} your code now?
diff --git a/src/lib/app-provider/contexts/app.tsx b/src/lib/app-provider/contexts/app.tsx
index c10e52a01..34693bb8a 100644
--- a/src/lib/app-provider/contexts/app.tsx
+++ b/src/lib/app-provider/contexts/app.tsx
@@ -19,41 +19,51 @@ import {
 import type { ChainGasPrice, Token, U } from "lib/types";
 import { formatUserKey } from "lib/utils";
 
-interface AppProviderProps<AppContractAddress, Constants extends AppConstants> {
+interface AppProviderProps<
+  AppContractAddress,
+  AppHumanAddress,
+  Constants extends AppConstants
+> {
   children: ReactNode;
 
   fallbackGasPrice: Record<string, ChainGasPrice>;
 
   appContractAddressMap: (currentChainName: string) => AppContractAddress;
 
+  appHumanAddressMap: (currentChainName: string) => AppHumanAddress;
+
   constants: Constants;
 }
 
 interface AppContextInterface<
   ContractAddress,
+  HumanAddress,
   Constants extends AppConstants = AppConstants
 > {
   chainGasPrice: ChainGasPrice;
   appContractAddress: ContractAddress;
+  appHumanAddress: HumanAddress;
   constants: Constants;
   indexerGraphClient: GraphQLClient;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const AppContext = createContext<AppContextInterface<any, any>>({
+const AppContext = createContext<AppContextInterface<any, any, any>>({
   chainGasPrice: { denom: "", gasPrice: "0" as U<Token> },
   appContractAddress: {},
+  appHumanAddress: {},
   constants: { gasAdjustment: 0 },
   indexerGraphClient: new GraphQLClient(""),
 });
 
 export const AppProvider = observer(
-  <ContractAddress, Constants extends AppConstants>({
+  <ContractAddress, HumanAddress, Constants extends AppConstants>({
     children,
     fallbackGasPrice,
     appContractAddressMap,
+    appHumanAddressMap,
     constants,
-  }: AppProviderProps<ContractAddress, Constants>) => {
+  }: AppProviderProps<ContractAddress, HumanAddress, Constants>) => {
     const { currentChainName, currentChainRecord } = useWallet();
     const { setCodeUserKey, isCodeUserKeyExist } = useCodeStore();
     const { setContractUserKey, isContractUserKeyExist } = useContractStore();
@@ -81,10 +91,13 @@ export const AppProvider = observer(
       };
     }, [currentChainName]);
 
-    const states = useMemo<AppContextInterface<ContractAddress, Constants>>(
+    const states = useMemo<
+      AppContextInterface<ContractAddress, HumanAddress, Constants>
+    >(
       () => ({
         chainGasPrice,
         appContractAddress: appContractAddressMap(currentChainName),
+        appHumanAddress: appHumanAddressMap(currentChainName),
         constants,
         ...chainBoundStates,
       }),
@@ -92,6 +105,7 @@ export const AppProvider = observer(
         chainGasPrice,
         appContractAddressMap,
         currentChainName,
+        appHumanAddressMap,
         constants,
         chainBoundStates,
       ]
@@ -127,7 +141,8 @@ export const AppProvider = observer(
 
 export const useApp = <
   ContractAddress,
+  HumanAddress,
   Constants extends AppConstants
->(): AppContextInterface<ContractAddress, Constants> => {
+>(): AppContextInterface<ContractAddress, HumanAddress, Constants> => {
   return useContext(AppContext);
 };
diff --git a/src/lib/app-provider/hooks/useCelatoneApp.ts b/src/lib/app-provider/hooks/useCelatoneApp.ts
index 5fedf1f9e..41ca60850 100644
--- a/src/lib/app-provider/hooks/useCelatoneApp.ts
+++ b/src/lib/app-provider/hooks/useCelatoneApp.ts
@@ -1,6 +1,14 @@
 import { useApp } from "../contexts";
-import type { CelatoneConstants, CelatoneContractAddress } from "types";
+import type {
+  CelatoneConstants,
+  CelatoneContractAddress,
+  CelatoneHumanAddress,
+} from "types";
 
 export const useCelatoneApp = () => {
-  return useApp<CelatoneContractAddress, CelatoneConstants>();
+  return useApp<
+    CelatoneContractAddress,
+    CelatoneHumanAddress,
+    CelatoneConstants
+  >();
 };
diff --git a/src/lib/app-provider/tx/upload.ts b/src/lib/app-provider/tx/upload.ts
index 99dc592a9..206b93bd1 100644
--- a/src/lib/app-provider/tx/upload.ts
+++ b/src/lib/app-provider/tx/upload.ts
@@ -3,12 +3,15 @@ import { useWallet } from "@cosmos-kit/react";
 import { useCallback } from "react";
 
 import { uploadContractTx } from "lib/app-fns/tx/upload";
-import type { HumanAddr, Option } from "lib/types";
+import type { AccessType, Addr, HumanAddr, Option } from "lib/types";
+import { composeStoreCodeMsg } from "lib/utils";
 
 export interface UploadStreamParams {
   wasmFileName: Option<string>;
   wasmCode: Option<Promise<ArrayBuffer>>;
-  codeDesc: string;
+  addresses: Addr[];
+  permission: AccessType;
+  codeName: string;
   estimatedFee: Option<StdFee>;
   onTxSucceed?: (codeId: number) => void;
 }
@@ -20,7 +23,9 @@ export const useUploadContractTx = (isMigrate: boolean) => {
     async ({
       wasmFileName,
       wasmCode,
-      codeDesc,
+      addresses,
+      permission,
+      codeName,
       estimatedFee,
       onTxSucceed,
     }: UploadStreamParams) => {
@@ -29,10 +34,17 @@ export const useUploadContractTx = (isMigrate: boolean) => {
         throw new Error("Please check your wallet connection.");
       if (!wasmFileName || !wasmCode || !estimatedFee) return null;
 
+      const message = composeStoreCodeMsg({
+        sender: address as Addr,
+        wasmByteCode: new Uint8Array(await wasmCode),
+        permission,
+        addresses,
+      });
+
       return uploadContractTx({
         address: address as HumanAddr,
-        wasmCode: new Uint8Array(await wasmCode),
-        codeDesc,
+        messages: [message],
+        codeName,
         wasmFileName,
         fee: estimatedFee,
         client,
diff --git a/src/lib/components/AssignMe.tsx b/src/lib/components/AssignMe.tsx
new file mode 100644
index 000000000..0eafc5f3c
--- /dev/null
+++ b/src/lib/components/AssignMe.tsx
@@ -0,0 +1,28 @@
+import { Text } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
+import type { MouseEventHandler } from "react";
+
+import type { Option } from "lib/types";
+
+interface AssginMeProps {
+  onClick: Option<MouseEventHandler<HTMLParagraphElement>>;
+  isDisable?: boolean;
+}
+
+export const AssignMe = ({ onClick, isDisable = false }: AssginMeProps) => {
+  const { address: walletAddress = "" } = useWallet();
+  return (
+    <Text
+      textAlign="right"
+      mr={3}
+      color={!isDisable && walletAddress ? "honeydew.main" : "pebble.500"}
+      fontWeight="600"
+      variant="body3"
+      cursor={!isDisable && walletAddress ? "pointer" : "not-allowed"}
+      minW={16}
+      onClick={onClick}
+    >
+      Assign me
+    </Text>
+  );
+};
diff --git a/src/lib/components/forms/ControllerInput.tsx b/src/lib/components/forms/ControllerInput.tsx
index de4f41126..ce518cdef 100644
--- a/src/lib/components/forms/ControllerInput.tsx
+++ b/src/lib/components/forms/ControllerInput.tsx
@@ -86,7 +86,7 @@ export const ControllerInput = <T extends FieldValues>({
           {status && getStatusIcon(status.state)}
         </InputRightElement>
       </InputGroup>
-      <Flex gap={1} alignItems="center" mt={1}>
+      <Flex gap={1} alignItems="center" mt={1} justifyContent="space-between">
         {isError ? (
           <FormErrorMessage className="error-text">{error}</FormErrorMessage>
         ) : (
diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index bb82fbf35..4fc818303 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -1,27 +1,33 @@
 import { Button, Flex } from "@chakra-ui/react";
+import type { StdFee } from "@cosmjs/stargate";
 import { useWallet } from "@cosmos-kit/react";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { CustomIcon } from "../icon";
+import { DropZone } from "../dropzone";
+import { ControllerInput } from "../forms";
 import {
   useFabricateFee,
   useSimulateFee,
   useUploadContractTx,
 } from "lib/app-provider";
-import { DropZone } from "lib/components/dropzone";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
-import { ControllerInput } from "lib/components/forms";
+import { CustomIcon } from "lib/components/icon";
 import { getMaxCodeNameLengthError, MAX_CODE_NAME_LENGTH } from "lib/data";
 import { useCodeStore } from "lib/providers/store";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import type { HumanAddr } from "lib/types";
-import { MsgType } from "lib/types";
-import { composeMsg } from "lib/utils";
+import type {
+  Addr,
+  HumanAddr,
+  SimulateStatus,
+  UploadSectionState,
+} from "lib/types";
+import { AccessType } from "lib/types";
+import { composeStoreCodeMsg } from "lib/utils";
 
+import { InstantiatePermissionRadio } from "./components/InstantiatePermissionRadio";
 import { UploadCard } from "./components/UploadCard";
-import type { UploadSectionState } from "./types";
 
 interface UploadSectionProps {
   handleBack: () => void;
@@ -37,26 +43,31 @@ export const UploadSection = ({
   const { address } = useWallet();
   const { broadcast } = useTxBroadcast();
   const { updateCodeInfo } = useCodeStore();
+  const postUploadTx = useUploadContractTx(isMigrate);
+
+  const [estimatedFee, setEstimatedFee] = useState<StdFee>();
+  const [simulateStatus, setSimulateStatus] =
+    useState<SimulateStatus>("pending");
+  const [simulateError, setSimulateError] = useState("");
 
   const {
     control,
-    watch,
     setValue,
+    watch,
     formState: { errors },
   } = useForm<UploadSectionState>({
     defaultValues: {
       wasmFile: undefined,
-      codeDesc: "",
-      estimatedFee: undefined,
-      simulateStatus: "pending",
-      simulateError: "",
+      codeName: "",
+      permission: AccessType.ACCESS_TYPE_EVERYBODY,
+      addresses: [{ address: "" as Addr }],
     },
     mode: "all",
   });
-  const { wasmFile, codeDesc, estimatedFee, simulateStatus, simulateError } =
-    watch();
 
-  const postUploadTx = useUploadContractTx(isMigrate);
+  const { wasmFile, codeName, addresses, permission } = watch();
+
+  const addressesString = JSON.stringify(addresses);
 
   const proceed = useCallback(async () => {
     if (address) {
@@ -64,13 +75,15 @@ export const UploadSection = ({
       const stream = await postUploadTx({
         wasmFileName: wasmFile?.name,
         wasmCode: wasmFile?.arrayBuffer(),
-        codeDesc,
+        addresses: addresses.map((addr) => addr.address),
+        permission,
+        codeName,
         estimatedFee,
         onTxSucceed: (codeId: number) => {
           updateCodeInfo(
             codeId,
             address as HumanAddr,
-            codeDesc || `${wasmFile?.name}(${codeId})`
+            codeName || `${wasmFile?.name}(${codeId})`
           );
         },
       });
@@ -78,40 +91,57 @@ export const UploadSection = ({
       if (stream) broadcast(stream);
     }
   }, [
+    address,
     postUploadTx,
     wasmFile,
-    codeDesc,
+    addresses,
+    permission,
+    codeName,
     estimatedFee,
     broadcast,
     updateCodeInfo,
-    address,
   ]);
 
   useEffect(() => {
     (async () => {
       if (wasmFile) {
-        setValue("simulateStatus", "pending");
-        setValue("simulateError", "");
-        const msg = composeMsg(MsgType.STORE_CODE, {
+        setSimulateStatus("pending");
+        setSimulateError("");
+        const msg = composeStoreCodeMsg({
           sender: address as HumanAddr,
           wasmByteCode: new Uint8Array(await wasmFile.arrayBuffer()),
+          permission,
+          addresses: addresses.map((addr) => addr.address),
         });
         try {
           const estimatedGasUsed = await simulate([msg]);
           if (estimatedGasUsed) {
-            setValue("estimatedFee", fabricateFee(estimatedGasUsed));
-            setValue("simulateStatus", "completed");
+            setEstimatedFee(fabricateFee(estimatedGasUsed));
+            setSimulateStatus("completed");
           }
         } catch (err) {
-          setValue("simulateStatus", "failed");
-          setValue("simulateError", (err as Error).message);
+          setSimulateStatus("failed");
+          setSimulateError((err as Error).message);
         }
       }
     })();
-  }, [wasmFile, address, simulate, fabricateFee, setValue]);
+  }, [
+    wasmFile,
+    address,
+    simulate,
+    fabricateFee,
+    setValue,
+    permission,
+    addressesString,
+    addresses,
+  ]);
 
   const isDisabled =
-    !estimatedFee || !wasmFile || !!errors.codeDesc || !address;
+    !estimatedFee ||
+    !wasmFile ||
+    !address ||
+    !!errors.codeName ||
+    !!errors.addresses;
   return (
     <>
       {wasmFile ? (
@@ -119,7 +149,7 @@ export const UploadSection = ({
           file={wasmFile}
           deleteFile={() => {
             setValue("wasmFile", undefined);
-            setValue("estimatedFee", undefined);
+            setEstimatedFee(undefined);
           }}
           simulateStatus={simulateStatus}
           simulateError={simulateError}
@@ -128,7 +158,7 @@ export const UploadSection = ({
         <DropZone setFile={(file) => setValue("wasmFile", file)} />
       )}
       <ControllerInput
-        name="codeDesc"
+        name="codeName"
         control={control}
         label="Code Name (Optional)"
         placeholder="Untitled Name"
@@ -136,11 +166,13 @@ export const UploadSection = ({
         rules={{
           maxLength: MAX_CODE_NAME_LENGTH,
         }}
-        error={errors.codeDesc && getMaxCodeNameLengthError(codeDesc.length)}
+        error={errors.codeName && getMaxCodeNameLengthError(codeName.length)}
         variant="floating"
         my="32px"
       />
+      <InstantiatePermissionRadio control={control} setValue={setValue} />
       <Flex
+        mt={10}
         fontSize="14px"
         color="text.dark"
         alignSelf="flex-start"
diff --git a/src/lib/components/upload/components/AddressPermissionInput.tsx b/src/lib/components/upload/components/AddressPermissionInput.tsx
new file mode 100644
index 000000000..903738190
--- /dev/null
+++ b/src/lib/components/upload/components/AddressPermissionInput.tsx
@@ -0,0 +1,119 @@
+import { Button, Flex } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
+import { useCallback } from "react";
+import type {
+  Control,
+  FieldArrayWithId,
+  FieldPath,
+  FieldValues,
+  UseFieldArrayRemove,
+} from "react-hook-form";
+import { useWatch } from "react-hook-form";
+
+import { useCelatoneApp, useValidateAddress } from "lib/app-provider";
+import { AssignMe } from "lib/components/AssignMe";
+import type { FormStatus, TextInputProps } from "lib/components/forms";
+import { ControllerInput } from "lib/components/forms";
+import { CustomIcon } from "lib/components/icon";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import type { Addr, Option } from "lib/types";
+
+interface AddressPermissionInputProps<T extends FieldValues>
+  extends Omit<TextInputProps, "value" | "setInputState"> {
+  index: number;
+  fields: FieldArrayWithId<T>[];
+  control: Control<T>;
+  addresses: Record<"address", Addr>[];
+  remove: UseFieldArrayRemove;
+  name: FieldPath<T>;
+  setValue: (value: Addr) => void;
+}
+
+const getAddressStatus = (input: string, error: Option<string>): FormStatus => {
+  if (error) return { state: "error", message: error };
+  if (!input) return { state: "init" };
+  return { state: "success", message: "Valid Address" };
+};
+
+export const AddressPermissionInput = <T extends FieldValues>({
+  index,
+  control,
+  addresses,
+  remove,
+  name,
+  fields,
+  error,
+  setValue,
+}: AddressPermissionInputProps<T>) => {
+  const { address: walletAddress } = useWallet();
+  const {
+    appHumanAddress: { example: exampleHumanAddress },
+  } = useCelatoneApp();
+
+  const { validateUserAddress, validateContractAddress } = useValidateAddress();
+  const validateAddress = useCallback(
+    (input: string) =>
+      input && !!validateContractAddress(input) && !!validateUserAddress(input)
+        ? "Invalid address or not exists."
+        : undefined,
+    [validateContractAddress, validateUserAddress]
+  );
+
+  const watcher = useWatch({
+    name,
+    control,
+  });
+
+  const status = getAddressStatus(watcher, error ?? validateAddress(watcher));
+
+  const containAddress = addresses.some(
+    ({ address }) => address === walletAddress
+  );
+
+  return (
+    <Flex gap={2} my={6} width="100%">
+      <ControllerInput
+        name={name}
+        control={control}
+        label="Address"
+        status={status}
+        placeholder={`ex. ${exampleHumanAddress}`}
+        variant="floating"
+        error={
+          addresses[index]?.address &&
+          addresses.find(
+            ({ address }, i) =>
+              i < index && address === addresses[index]?.address
+          ) &&
+          "You already input this address"
+        }
+        helperAction={
+          <AssignMe
+            onClick={
+              walletAddress && !containAddress
+                ? () => {
+                    AmpTrack(AmpEvent.USE_ASSIGN_ME);
+                    setValue(walletAddress as Addr);
+                  }
+                : undefined
+            }
+            isDisable={containAddress}
+          />
+        }
+      />
+      <Button
+        w="56px"
+        h="56px"
+        variant="outline-gray"
+        size="lg"
+        disabled={fields.length <= 1}
+        onClick={() => remove(index)}
+      >
+        <CustomIcon
+          name="delete"
+          color={fields.length <= 1 ? "pebble.600" : "text.dark"}
+        />
+      </Button>
+    </Flex>
+  );
+};
diff --git a/src/lib/components/upload/components/InstantiatePermissionRadio.tsx b/src/lib/components/upload/components/InstantiatePermissionRadio.tsx
new file mode 100644
index 000000000..1efeff1fa
--- /dev/null
+++ b/src/lib/components/upload/components/InstantiatePermissionRadio.tsx
@@ -0,0 +1,98 @@
+import { Text, Box, Radio, RadioGroup, Button } from "@chakra-ui/react";
+import type { Control, UseFormSetValue } from "react-hook-form";
+import { useFieldArray, useWatch } from "react-hook-form";
+
+import { CustomIcon } from "lib/components/icon";
+import type { Addr, UploadSectionState } from "lib/types";
+import { AccessType } from "lib/types";
+
+import { AddressPermissionInput } from "./AddressPermissionInput";
+
+interface InstantiatePermissionRadioProps {
+  control: Control<UploadSectionState>;
+  setValue: UseFormSetValue<UploadSectionState>;
+}
+
+interface PermissionRadioProps {
+  isSelected: boolean;
+  value: AccessType;
+  text: string;
+}
+
+const PermissionRadio = ({ isSelected, value, text }: PermissionRadioProps) => (
+  <Radio value={value} py={2} width="100%" size="lg">
+    <Text fontWeight={isSelected ? "600" : "400"}>{text} </Text>
+  </Radio>
+);
+
+export const InstantiatePermissionRadio = ({
+  control,
+  setValue,
+}: InstantiatePermissionRadioProps) => {
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "addresses",
+  });
+
+  const [permission, addresses] = useWatch({
+    control,
+    name: ["permission", "addresses"],
+  });
+
+  return (
+    <RadioGroup
+      name="instantiatePermission"
+      onChange={(nextValue: string) => {
+        const value = parseInt(nextValue, 10);
+        setValue("permission", value);
+      }}
+      value={permission}
+    >
+      <Box>
+        <PermissionRadio
+          isSelected={permission === AccessType.ACCESS_TYPE_EVERYBODY}
+          value={AccessType.ACCESS_TYPE_EVERYBODY}
+          text="Anyone can instantiate (Everybody)"
+        />
+        <PermissionRadio
+          isSelected={permission === AccessType.ACCESS_TYPE_NOBODY}
+          value={AccessType.ACCESS_TYPE_NOBODY}
+          text="Instantiate through governance only (Nobody)"
+        />
+        <Box>
+          <PermissionRadio
+            isSelected={permission === AccessType.ACCESS_TYPE_ANY_OF_ADDRESSES}
+            value={AccessType.ACCESS_TYPE_ANY_OF_ADDRESSES}
+            text="Only a set of addresses can instantiate (AnyOfAddresses)"
+          />
+          {permission === AccessType.ACCESS_TYPE_ANY_OF_ADDRESSES && (
+            <Box>
+              {fields.map((_, idx) => (
+                <AddressPermissionInput
+                  index={idx}
+                  control={control}
+                  fields={fields}
+                  addresses={addresses}
+                  remove={remove}
+                  name={`addresses.${idx}.address`}
+                  setValue={(value: Addr) =>
+                    setValue(`addresses.${idx}.address`, value)
+                  }
+                />
+              ))}
+              <Button
+                variant="outline-primary"
+                mt={3}
+                mx="auto"
+                onClick={() => append({ address: "" as Addr })}
+                leftIcon={<CustomIcon name="plus" color="violet.light" />}
+              >
+                Add More Address
+              </Button>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </RadioGroup>
+  );
+};
diff --git a/src/lib/components/upload/components/UploadCard.tsx b/src/lib/components/upload/components/UploadCard.tsx
index 95b678d51..1daf6d003 100644
--- a/src/lib/components/upload/components/UploadCard.tsx
+++ b/src/lib/components/upload/components/UploadCard.tsx
@@ -2,8 +2,8 @@ import { Flex, Spinner, Text } from "@chakra-ui/react";
 import big from "big.js";
 import type { ReactElement } from "react";
 
-import type { SimulateStatus } from "../types";
 import { CustomIcon, UploadIcon } from "lib/components/icon";
+import type { SimulateStatus } from "lib/types";
 
 interface UploadCardProps {
   file: File;
diff --git a/src/lib/components/upload/types.ts b/src/lib/components/upload/types.ts
deleted file mode 100644
index c81996c96..000000000
--- a/src/lib/components/upload/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { StdFee } from "@cosmjs/stargate";
-
-export type SimulateStatus = "pending" | "completed" | "failed";
-
-export interface UploadSectionState {
-  wasmFile?: File;
-  codeDesc: string;
-  estimatedFee?: StdFee;
-  simulateStatus: SimulateStatus;
-  simulateError: string;
-}
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index 3ff2b9afe..8d29f6c5b 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -10,3 +10,4 @@ export * from "./projects";
 export * from "./addrs";
 export * from "./proposal";
 export * from "./validator";
+export * from "./upload";
diff --git a/src/lib/types/tx/msg.ts b/src/lib/types/tx/msg.ts
index 252dfbc64..cde16814a 100644
--- a/src/lib/types/tx/msg.ts
+++ b/src/lib/types/tx/msg.ts
@@ -1,6 +1,6 @@
 import type { Coin } from "@cosmjs/stargate";
 
-import type { Addr, ContractAddr, HumanAddr } from "../addrs";
+import type { Addr, ContractAddr } from "../addrs";
 
 export enum MsgType {
   STORE_CODE = "STORE_CODE",
@@ -15,12 +15,13 @@ export enum AccessType {
   ACCESS_TYPE_NOBODY = 1,
   ACCESS_TYPE_ONLY_ADDRESS = 2,
   ACCESS_TYPE_EVERYBODY = 3,
+  ACCESS_TYPE_ANY_OF_ADDRESSES = 4,
   UNRECOGNIZED = -1,
 }
 
 export interface AccessConfig {
   permission: AccessType;
-  address: HumanAddr;
+  addresses: Addr[];
 }
 
 export interface MsgStoreCode {
diff --git a/src/lib/types/upload.ts b/src/lib/types/upload.ts
new file mode 100644
index 000000000..8865d2132
--- /dev/null
+++ b/src/lib/types/upload.ts
@@ -0,0 +1,10 @@
+import type { AccessType, Addr } from "lib/types";
+
+export type SimulateStatus = "pending" | "completed" | "failed";
+
+export interface UploadSectionState {
+  wasmFile?: File;
+  codeName: string;
+  permission: AccessType;
+  addresses: Record<"address", Addr>[];
+}
diff --git a/src/lib/utils/tx/composeMsg.ts b/src/lib/utils/tx/composeMsg.ts
index 2594ca773..e1aae7449 100644
--- a/src/lib/utils/tx/composeMsg.ts
+++ b/src/lib/utils/tx/composeMsg.ts
@@ -1,5 +1,6 @@
 import { typeUrlDict } from "lib/data";
-import type { ComposedMsg, TxMessage, MsgType } from "lib/types";
+import type { ComposedMsg, TxMessage, AccessType, Addr } from "lib/types";
+import { MsgType } from "lib/types";
 
 export const composeMsg = (msgType: MsgType, msg: TxMessage): ComposedMsg => {
   const typeUrl = typeUrlDict[msgType];
@@ -8,3 +9,25 @@ export const composeMsg = (msgType: MsgType, msg: TxMessage): ComposedMsg => {
     value: msg,
   };
 };
+
+interface StoreCodeMsgArgs {
+  sender: Addr;
+  wasmByteCode: Uint8Array;
+  permission: AccessType;
+  addresses: Addr[];
+}
+
+export const composeStoreCodeMsg = ({
+  sender,
+  wasmByteCode,
+  permission,
+  addresses,
+}: StoreCodeMsgArgs) =>
+  composeMsg(MsgType.STORE_CODE, {
+    sender,
+    wasmByteCode,
+    instantiatePermission: {
+      permission,
+      addresses,
+    },
+  });
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 949201de8..b65b9626b 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -13,6 +13,7 @@ import {
   CELATONE_CONSTANTS,
   CELATONE_APP_CONTRACT_ADDRESS,
   CELATONE_FALLBACK_GAS_PRICE,
+  CELATONE_APP_HUMAN_ADDRESS,
 } from "env";
 import { AppProvider } from "lib/app-provider/contexts/app";
 import { Chakra } from "lib/components/Chakra";
@@ -89,6 +90,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
             <AppProvider
               fallbackGasPrice={CELATONE_FALLBACK_GAS_PRICE}
               appContractAddressMap={CELATONE_APP_CONTRACT_ADDRESS}
+              appHumanAddressMap={CELATONE_APP_HUMAN_ADDRESS}
               constants={CELATONE_CONSTANTS}
             >
               <TxBroadcastProvider>
diff --git a/src/types.ts b/src/types.ts
index 186898156..0a8696253 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,9 +1,13 @@
 import type { AppConstants } from "lib/app-provider/types";
-import type { ContractAddr } from "lib/types";
+import type { ContractAddr, HumanAddr } from "lib/types";
 
 export interface CelatoneContractAddress {
   example: ContractAddr;
 }
+
+export interface CelatoneHumanAddress {
+  example: HumanAddr;
+}
 export interface CelatoneConstants extends AppConstants {
   maxFileSize: number;
 }
diff --git a/yarn.lock b/yarn.lock
index c05fa5eac..aad59fe1f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1608,40 +1608,30 @@
   resolved "https://registry.npmjs.org/@corex/deepmerge/-/deepmerge-4.0.29.tgz"
   integrity sha512-q/yVUnqckA8Do+EvAfpy7RLdumnBy9ZsducMUtZTvpdbJC7azEf1hGtnYYxm0QfphYxjwggv6XtH64prvS1W+A==
 
-"@cosmjs/amino@^0.29.3":
-  version "0.29.3"
-  resolved "https://registry.npmjs.org/@cosmjs/amino/-/amino-0.29.3.tgz"
-  integrity sha512-BFz1++ERerIggiFc7iGHhGe1CeV3rCv8BvkoBQTBN/ZwzHOaKvqQj8smDlRGlQxX3HWlTwgiLN2A+OB5yX4ZRw==
-  dependencies:
-    "@cosmjs/crypto" "^0.29.3"
-    "@cosmjs/encoding" "^0.29.3"
-    "@cosmjs/math" "^0.29.3"
-    "@cosmjs/utils" "^0.29.3"
-
-"@cosmjs/amino@^0.29.5":
-  version "0.29.5"
-  resolved "https://registry.yarnpkg.com/@cosmjs/amino/-/amino-0.29.5.tgz#053b4739a90b15b9e2b781ccd484faf64bd49aec"
-  integrity sha512-Qo8jpC0BiziTSUqpkNatBcwtKNhCovUnFul9SlT/74JUCdLYaeG5hxr3q1cssQt++l4LvlcpF+OUXL48XjNjLw==
-  dependencies:
-    "@cosmjs/crypto" "^0.29.5"
-    "@cosmjs/encoding" "^0.29.5"
-    "@cosmjs/math" "^0.29.5"
-    "@cosmjs/utils" "^0.29.5"
-
-"@cosmjs/cosmwasm-stargate@^0.29.3":
-  version "0.29.3"
-  resolved "https://registry.yarnpkg.com/@cosmjs/cosmwasm-stargate/-/cosmwasm-stargate-0.29.3.tgz#f6279fc6d590db01d6cb0f5cfae43bb2c88c279b"
-  integrity sha512-S13VlyWj2EGZ7hePT+kQkybksfjjYs/YffuZNVaD5P4CADiOcF52LGJcUCywyfYvC4RQYRVLOaq5hbAlLTUuew==
-  dependencies:
-    "@cosmjs/amino" "^0.29.3"
-    "@cosmjs/crypto" "^0.29.3"
-    "@cosmjs/encoding" "^0.29.3"
-    "@cosmjs/math" "^0.29.3"
-    "@cosmjs/proto-signing" "^0.29.3"
-    "@cosmjs/stargate" "^0.29.3"
-    "@cosmjs/tendermint-rpc" "^0.29.3"
-    "@cosmjs/utils" "^0.29.3"
-    cosmjs-types "^0.5.2"
+"@cosmjs/amino@^0.30.1":
+  version "0.30.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/amino/-/amino-0.30.1.tgz#7c18c14627361ba6c88e3495700ceea1f76baace"
+  integrity sha512-yNHnzmvAlkETDYIpeCTdVqgvrdt1qgkOXwuRVi8s27UKI5hfqyE9fJ/fuunXE6ZZPnKkjIecDznmuUOMrMvw4w==
+  dependencies:
+    "@cosmjs/crypto" "^0.30.1"
+    "@cosmjs/encoding" "^0.30.1"
+    "@cosmjs/math" "^0.30.1"
+    "@cosmjs/utils" "^0.30.1"
+
+"@cosmjs/cosmwasm-stargate@^0.30.1":
+  version "0.30.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/cosmwasm-stargate/-/cosmwasm-stargate-0.30.1.tgz#6f9ca310f75433a3e30d683bc6aa24eadb345d79"
+  integrity sha512-W/6SLUCJAJGBN+sJLXouLZikVgmqDd9LCdlMzQaxczcCHTWeJAmRvOiZGSZaSy3shw/JN1qc6g6PKpvTVgj10A==
+  dependencies:
+    "@cosmjs/amino" "^0.30.1"
+    "@cosmjs/crypto" "^0.30.1"
+    "@cosmjs/encoding" "^0.30.1"
+    "@cosmjs/math" "^0.30.1"
+    "@cosmjs/proto-signing" "^0.30.1"
+    "@cosmjs/stargate" "^0.30.1"
+    "@cosmjs/tendermint-rpc" "^0.30.1"
+    "@cosmjs/utils" "^0.30.1"
+    cosmjs-types "^0.7.1"
     long "^4.0.0"
     pako "^2.0.2"
 
@@ -1663,27 +1653,14 @@
     sha.js "^2.4.11"
     unorm "^1.5.0"
 
-"@cosmjs/crypto@^0.29.3":
-  version "0.29.3"
-  resolved "https://registry.npmjs.org/@cosmjs/crypto/-/crypto-0.29.3.tgz"
-  integrity sha512-dOCYLLEOnn5idNgoAcdQnuvFXZx/BmLnb2Mh8ZZtw6peFNvRePfaMX12HerngkLVAcLBc/V6pZHWoj9DBrsvng==
+"@cosmjs/crypto@^0.30.1":
+  version "0.30.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/crypto/-/crypto-0.30.1.tgz#21e94d5ca8f8ded16eee1389d2639cb5c43c3eb5"
+  integrity sha512-rAljUlake3MSXs9xAm87mu34GfBLN0h/1uPPV6jEwClWjNkAMotzjC0ab9MARy5FFAvYHL3lWb57bhkbt2GtzQ==
   dependencies:
-    "@cosmjs/encoding" "^0.29.3"
-    "@cosmjs/math" "^0.29.3"
-    "@cosmjs/utils" "^0.29.3"
-    "@noble/hashes" "^1"
-    bn.js "^5.2.0"
-    elliptic "^6.5.3"
-    libsodium-wrappers "^0.7.6"
-
-"@cosmjs/crypto@^0.29.5":
-  version "0.29.5"
-  resolved "https://registry.yarnpkg.com/@cosmjs/crypto/-/crypto-0.29.5.tgz#ab99fc382b93d8a8db075780cf07487a0f9519fd"
-  integrity sha512-2bKkaLGictaNL0UipQCL6C1afaisv6k8Wr/GCLx9FqiyFkh9ZgRHDyetD64ZsjnWV/N/D44s/esI+k6oPREaiQ==
-  dependencies:
-    "@cosmjs/encoding" "^0.29.5"
-    "@cosmjs/math" "^0.29.5"
-    "@cosmjs/utils" "^0.29.5"
+    "@cosmjs/encoding" "^0.30.1"
+    "@cosmjs/math" "^0.30.1"
+    "@cosmjs/utils" "^0.30.1"
     "@noble/hashes" "^1"
     bn.js "^5.2.0"
     elliptic "^6.5.4"
@@ -1707,30 +1684,21 @@
     bech32 "^1.1.4"
     readonly-date "^1.0.0"
 
-"@cosmjs/encoding@^0.29.3":
-  version "0.29.3"
-  resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.29.3.tgz#191fe1192d78ac0f9eb01b6e0aa4ba976cfb2c7a"
-  integrity sha512-K6CTcDGovwzF3QOmLm9mWwjcu4Md64zCOBYgVK3boGbsaExP/6YAjT22e+yDsReXWlEUtSVCjqCC/9EEcwmYmg==
+"@cosmjs/encoding@^0.30.1":
+  version "0.30.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.30.1.tgz#b5c4e0ef7ceb1f2753688eb96400ed70f35c6058"
+  integrity sha512-rXmrTbgqwihORwJ3xYhIgQFfMSrwLu1s43RIK9I8EBudPx3KmnmyAKzMOVsRDo9edLFNuZ9GIvysUCwQfq3WlQ==
   dependencies:
     base64-js "^1.3.0"
     bech32 "^1.1.4"
     readonly-date "^1.0.0"
 
-"@cosmjs/encoding@^0.29.5":
-  version "0.29.5"
-  resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.29.5.tgz#009a4b1c596cdfd326f30ccfa79f5e56daa264f2"
-  integrity sha512-G4rGl/Jg4dMCw5u6PEZHZcoHnUBlukZODHbm/wcL4Uu91fkn5jVo5cXXZcvs4VCkArVGrEj/52eUgTZCmOBGWQ==
+"@cosmjs/json-rpc@^0.30.1":
+  version "0.30.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/json-rpc/-/json-rpc-0.30.1.tgz#16f21305fc167598c8a23a45549b85106b2372bc"
+  integrity sha512-pitfC/2YN9t+kXZCbNuyrZ6M8abnCC2n62m+JtU9vQUfaEtVsgy+1Fk4TRQ175+pIWSdBMFi2wT8FWVEE4RhxQ==
   dependencies:
-    base64-js "^1.3.0"
-    bech32 "^1.1.4"
-    readonly-date "^1.0.0"
-
-"@cosmjs/json-rpc@^0.29.3":
-  version "0.29.3"
-  resolved "https://registry.npmjs.org/@cosmjs/json-rpc/-/json-rpc-0.29.3.tgz"
-  integrity sha512-GP3qSMxVcoTQFI1/tWQDou843ZO0s51LaT+oaSr7F6C4XNCBv9BnSiVteijeZOaIPmhSBMnZs+7QDORlDHpS7A==
-  dependencies:
-    "@cosmjs/stream" "^0.29.3"
+    "@cosmjs/stream" "^0.30.1"
     xstream "^11.14.0"
 
 "@cosmjs/launchpad@^0.24.0-alpha.25", "@cosmjs/launchpad@^0.24.1":
@@ -1759,17 +1727,10 @@
   dependencies:
     bn.js "^4.11.8"
 
-"@cosmjs/math@^0.29.3":
-  version "0.29.3"
-  resolved "https://registry.yarnpkg.com/@cosmjs/math/-/math-0.29.3.tgz#29f98f6529f3d7654f1af85b329b48482eabbecb"
-  integrity sha512-4HGHqS+Yn81dZLOAYcDSQbROBD1a7ETW3ur5hziCTXMjZFILRJ3w71PlFUVppVb2u3kRDBBXuYHvZ6/V0M0nrg==
-  dependencies:
-    bn.js "^5.2.0"
-
-"@cosmjs/math@^0.29.5":
-  version "0.29.5"
-  resolved "https://registry.yarnpkg.com/@cosmjs/math/-/math-0.29.5.tgz#722c96e080d6c2b62215ce9f4c70da7625b241b6"
-  integrity sha512-2GjKcv+A9f86MAWYLUkjhw1/WpRl2R1BTb3m9qPG7lzMA7ioYff9jY5SPCfafKdxM4TIQGxXQlYGewQL16O68Q==
+"@cosmjs/math@^0.30.1":
+  version "0.30.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/math/-/math-0.30.1.tgz#8b816ef4de5d3afa66cb9fdfb5df2357a7845b8a"
+  integrity sha512-yaoeI23pin9ZiPHIisa6qqLngfnBR/25tSaWpkTm8Cy10MX70UF5oN4+/t1heLaM6SSmRrhk3psRkV4+7mH51Q==
   dependencies:
     bn.js "^5.2.0"
 
@@ -1782,79 +1743,66 @@
     long "^4.0.0"
     protobufjs "~6.10.2"
 
-"@cosmjs/proto-signing@^0.29.3":
-  version "0.29.3"
-  resolved "https://registry.npmjs.org/@cosmjs/proto-signing/-/proto-signing-0.29.3.tgz"
-  integrity sha512-Ai3l9THjMOrLJ4Ebn1Dgptwg6W5ZIRJqtnJjijHhGwTVC1WT0WdYU3aMZ7+PwubcA/cA1rH4ZTK7jrfYbra63g==
-  dependencies:
-    "@cosmjs/amino" "^0.29.3"
-    "@cosmjs/crypto" "^0.29.3"
-    "@cosmjs/encoding" "^0.29.3"
-    "@cosmjs/math" "^0.29.3"
-    "@cosmjs/utils" "^0.29.3"
-    cosmjs-types "^0.5.2"
+"@cosmjs/proto-signing@^0.30.1":
+  version "0.30.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/proto-signing/-/proto-signing-0.30.1.tgz#f0dda372488df9cd2677150b89b3e9c72b3cb713"
+  integrity sha512-tXh8pPYXV4aiJVhTKHGyeZekjj+K9s2KKojMB93Gcob2DxUjfKapFYBMJSgfKPuWUPEmyr8Q9km2hplI38ILgQ==
+  dependencies:
+    "@cosmjs/amino" "^0.30.1"
+    "@cosmjs/crypto" "^0.30.1"
+    "@cosmjs/encoding" "^0.30.1"
+    "@cosmjs/math" "^0.30.1"
+    "@cosmjs/utils" "^0.30.1"
+    cosmjs-types "^0.7.1"
     long "^4.0.0"
 
-"@cosmjs/proto-signing@^0.29.5":
-  version "0.29.5"
-  resolved "https://registry.yarnpkg.com/@cosmjs/proto-signing/-/proto-signing-0.29.5.tgz#af3b62a46c2c2f1d2327d678b13b7262db1fe87c"
-  integrity sha512-QRrS7CiKaoETdgIqvi/7JC2qCwCR7lnWaUsTzh/XfRy3McLkEd+cXbKAW3cygykv7IN0VAEIhZd2lyIfT8KwNA==
-  dependencies:
-    "@cosmjs/amino" "^0.29.5"
-    "@cosmjs/crypto" "^0.29.5"
-    "@cosmjs/encoding" "^0.29.5"
-    "@cosmjs/math" "^0.29.5"
-    "@cosmjs/utils" "^0.29.5"
-    cosmjs-types "^0.5.2"
-    long "^4.0.0"
-
-"@cosmjs/socket@^0.29.3":
-  version "0.29.3"
-  resolved "https://registry.npmjs.org/@cosmjs/socket/-/socket-0.29.3.tgz"
-  integrity sha512-yP35avUsBId/HUBVPRg8z1KmW2iTjMNzflBcFVuTbVoDZrK9DHIlAsB8lV+XKIKPqqECvEq2Dtb1Z+XDy1WBEA==
+"@cosmjs/socket@^0.30.1":
+  version "0.30.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/socket/-/socket-0.30.1.tgz#00b22f4b5e2ab01f4d82ccdb7b2e59536bfe5ce0"
+  integrity sha512-r6MpDL+9N+qOS/D5VaxnPaMJ3flwQ36G+vPvYJsXArj93BjgyFB7BwWwXCQDzZ+23cfChPUfhbINOenr8N2Kow==
   dependencies:
-    "@cosmjs/stream" "^0.29.3"
+    "@cosmjs/stream" "^0.30.1"
     isomorphic-ws "^4.0.1"
     ws "^7"
     xstream "^11.14.0"
 
-"@cosmjs/stargate@^0.29.3":
-  version "0.29.3"
-  resolved "https://registry.npmjs.org/@cosmjs/stargate/-/stargate-0.29.3.tgz"
-  integrity sha512-455TgXStCi6E8KDjnhDAM8wt6aLSjobH4Dixvd7Up1DfCH6UB9NkC/G0fMJANNcNXMaM4wSX14niTXwD1d31BA==
+"@cosmjs/stargate@^0.30.1":
+  version "0.30.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/stargate/-/stargate-0.30.1.tgz#e1b22e1226cffc6e93914a410755f1f61057ba04"
+  integrity sha512-RdbYKZCGOH8gWebO7r6WvNnQMxHrNXInY/gPHPzMjbQF6UatA6fNM2G2tdgS5j5u7FTqlCI10stNXrknaNdzog==
   dependencies:
     "@confio/ics23" "^0.6.8"
-    "@cosmjs/amino" "^0.29.3"
-    "@cosmjs/encoding" "^0.29.3"
-    "@cosmjs/math" "^0.29.3"
-    "@cosmjs/proto-signing" "^0.29.3"
-    "@cosmjs/stream" "^0.29.3"
-    "@cosmjs/tendermint-rpc" "^0.29.3"
-    "@cosmjs/utils" "^0.29.3"
-    cosmjs-types "^0.5.2"
+    "@cosmjs/amino" "^0.30.1"
+    "@cosmjs/encoding" "^0.30.1"
+    "@cosmjs/math" "^0.30.1"
+    "@cosmjs/proto-signing" "^0.30.1"
+    "@cosmjs/stream" "^0.30.1"
+    "@cosmjs/tendermint-rpc" "^0.30.1"
+    "@cosmjs/utils" "^0.30.1"
+    cosmjs-types "^0.7.1"
     long "^4.0.0"
     protobufjs "~6.11.3"
     xstream "^11.14.0"
 
-"@cosmjs/stream@^0.29.3":
-  version "0.29.3"
-  resolved "https://registry.npmjs.org/@cosmjs/stream/-/stream-0.29.3.tgz"
-  integrity sha512-0fbKvslZjNyuVe43cB9NDSqlBUXOHG84wGry4HmYfwayRtHr1CDWH5nR3v04eG0/prmZht8J3TgPsfWozIP+cw==
+"@cosmjs/stream@^0.30.1":
+  version "0.30.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/stream/-/stream-0.30.1.tgz#ba038a2aaf41343696b1e6e759d8e03a9516ec1a"
+  integrity sha512-Fg0pWz1zXQdoxQZpdHRMGvUH5RqS6tPv+j9Eh7Q953UjMlrwZVo0YFLC8OTf/HKVf10E4i0u6aM8D69Q6cNkgQ==
   dependencies:
     xstream "^11.14.0"
 
-"@cosmjs/tendermint-rpc@^0.29.3":
-  version "0.29.3"
-  resolved "https://registry.npmjs.org/@cosmjs/tendermint-rpc/-/tendermint-rpc-0.29.3.tgz"
-  integrity sha512-4l3VacUMQdyGGqfzbZ02kEwlVdMVOdAeWJt2euoVdfUR/HT+TTzQrrL+ORj9PEooLLtwtMl9dqms8uEiblYBDg==
-  dependencies:
-    "@cosmjs/crypto" "^0.29.3"
-    "@cosmjs/encoding" "^0.29.3"
-    "@cosmjs/json-rpc" "^0.29.3"
-    "@cosmjs/math" "^0.29.3"
-    "@cosmjs/socket" "^0.29.3"
-    "@cosmjs/stream" "^0.29.3"
-    "@cosmjs/utils" "^0.29.3"
+"@cosmjs/tendermint-rpc@^0.30.1":
+  version "0.30.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/tendermint-rpc/-/tendermint-rpc-0.30.1.tgz#c16378892ba1ac63f72803fdf7567eab9d4f0aa0"
+  integrity sha512-Z3nCwhXSbPZJ++v85zHObeUggrEHVfm1u18ZRwXxFE9ZMl5mXTybnwYhczuYOl7KRskgwlB+rID0WYACxj4wdQ==
+  dependencies:
+    "@cosmjs/crypto" "^0.30.1"
+    "@cosmjs/encoding" "^0.30.1"
+    "@cosmjs/json-rpc" "^0.30.1"
+    "@cosmjs/math" "^0.30.1"
+    "@cosmjs/socket" "^0.30.1"
+    "@cosmjs/stream" "^0.30.1"
+    "@cosmjs/utils" "^0.30.1"
     axios "^0.21.2"
     readonly-date "^1.0.0"
     xstream "^11.14.0"
@@ -1869,15 +1817,10 @@
   resolved "https://registry.npmjs.org/@cosmjs/utils/-/utils-0.24.1.tgz"
   integrity sha512-VA3WFx1lMFb7esp9BqHWkDgMvHoA3D9w+uDRvWhVRpUpDc7RYHxMbWExASjz+gNblTCg556WJGzF64tXnf9tdQ==
 
-"@cosmjs/utils@^0.29.3":
-  version "0.29.3"
-  resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.29.3.tgz#d7e1f381267e61b7d3219ebd75d46defc397cd43"
-  integrity sha512-UuKoBN2xiRXcBpz7jzCwagKhOnLOsRmR8mu3IzY+Yx38i8rW52FSXMbxC/yE83X0vLea+zgMQFPwv0gy4QWUJw==
-
-"@cosmjs/utils@^0.29.5":
-  version "0.29.5"
-  resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.29.5.tgz#3fed1b3528ae8c5f1eb5d29b68755bebfd3294ee"
-  integrity sha512-m7h+RXDUxOzEOGt4P+3OVPX7PuakZT3GBmaM/Y2u+abN3xZkziykD/NvedYFvvCCdQo714XcGl33bwifS9FZPQ==
+"@cosmjs/utils@^0.30.1":
+  version "0.30.1"
+  resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.30.1.tgz#6d92582341be3c2ec8d82090253cfa4b7f959edb"
+  integrity sha512-KvvX58MGMWh7xA+N+deCfunkA/ZNDvFLw4YbOmX3f/XBIkqrVY7qlotfy2aNb1kgp6h4B6Yc8YawJPDTfvWX7g==
 
 "@cosmos-kit/config@^0.16.2":
   version "0.16.2"
@@ -4963,10 +4906,10 @@ cosmiconfig@7.0.1, cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-cosmjs-types@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.npmjs.org/cosmjs-types/-/cosmjs-types-0.5.2.tgz"
-  integrity sha512-zxCtIJj8v3Di7s39uN4LNcN3HIE1z0B9Z0SPE8ZNQR0oSzsuSe1ACgxoFkvhkS7WBasCAFcglS11G2hyfd5tPg==
+cosmjs-types@^0.7.1:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/cosmjs-types/-/cosmjs-types-0.7.2.tgz#a757371abd340949c5bd5d49c6f8379ae1ffd7e2"
+  integrity sha512-vf2uLyktjr/XVAgEq0DjMxeAWh1yYREe7AMHDKd7EiHVqxBPCaBS+qEEQUkXbR9ndnckqr1sUG8BQhazh4X5lA==
   dependencies:
     long "^4.0.0"
     protobufjs "~6.11.2"
@@ -7876,9 +7819,9 @@ pako@1.0.11:
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
 pako@^2.0.2:
-  version "2.0.4"
-  resolved "https://registry.npmjs.org/pako/-/pako-2.0.4.tgz"
-  integrity sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-2.1.0.tgz#266cc37f98c7d883545d11335c00fbd4062c9a86"
+  integrity sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==
 
 param-case@^3.0.4:
   version "3.0.4"

From dd101b77b92aeed4ec0e7f6487224e0a5acccf69 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Tue, 18 Apr 2023 14:12:13 +0700
Subject: [PATCH 017/354] fix: add default display and handle any of addresses
 case

---
 src/lib/components/upload/UploadSection.tsx   | 47 ++++++++++++-------
 .../upload/components/UploadCard.tsx          | 16 +++++--
 src/lib/types/upload.ts                       |  2 +-
 3 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index 4fc818303..86df59fb3 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -47,7 +47,7 @@ export const UploadSection = ({
 
   const [estimatedFee, setEstimatedFee] = useState<StdFee>();
   const [simulateStatus, setSimulateStatus] =
-    useState<SimulateStatus>("pending");
+    useState<SimulateStatus>("default");
   const [simulateError, setSimulateError] = useState("");
 
   const {
@@ -102,26 +102,37 @@ export const UploadSection = ({
     updateCodeInfo,
   ]);
 
+  // eslint-disable-next-line sonarjs/cognitive-complexity
   useEffect(() => {
     (async () => {
-      if (wasmFile) {
-        setSimulateStatus("pending");
-        setSimulateError("");
-        const msg = composeStoreCodeMsg({
-          sender: address as HumanAddr,
-          wasmByteCode: new Uint8Array(await wasmFile.arrayBuffer()),
-          permission,
-          addresses: addresses.map((addr) => addr.address),
-        });
-        try {
-          const estimatedGasUsed = await simulate([msg]);
-          if (estimatedGasUsed) {
-            setEstimatedFee(fabricateFee(estimatedGasUsed));
-            setSimulateStatus("completed");
+      if (wasmFile && address) {
+        // Should not simulate when permission is any of addresses and address input is not filled
+        if (
+          permission === AccessType.ACCESS_TYPE_ANY_OF_ADDRESSES &&
+          !addresses.some((addr) => addr.address !== "")
+        ) {
+          setSimulateStatus("default");
+          setSimulateError("");
+          setEstimatedFee(undefined);
+        } else {
+          setSimulateStatus("pending");
+          setSimulateError("");
+          const msg = composeStoreCodeMsg({
+            sender: address as HumanAddr,
+            wasmByteCode: new Uint8Array(await wasmFile.arrayBuffer()),
+            permission,
+            addresses: addresses.map((addr) => addr.address),
+          });
+          try {
+            const estimatedGasUsed = await simulate([msg]);
+            if (estimatedGasUsed) {
+              setEstimatedFee(fabricateFee(estimatedGasUsed));
+              setSimulateStatus("completed");
+            }
+          } catch (err) {
+            setSimulateStatus("failed");
+            setSimulateError((err as Error).message);
           }
-        } catch (err) {
-          setSimulateStatus("failed");
-          setSimulateError((err as Error).message);
         }
       }
     })();
diff --git a/src/lib/components/upload/components/UploadCard.tsx b/src/lib/components/upload/components/UploadCard.tsx
index 1daf6d003..9b4c12e85 100644
--- a/src/lib/components/upload/components/UploadCard.tsx
+++ b/src/lib/components/upload/components/UploadCard.tsx
@@ -26,18 +26,24 @@ const getStatusDecorator = (
     case "completed":
       return {
         icon: <CustomIcon name="check-circle-solid" color="success.main" />,
-        statusText: <Text color="success.main">Valid Wasm file</Text>,
+        statusText: <Text color="success.main"> • Valid Wasm file</Text>,
       };
     case "failed":
       return {
         icon: <CustomIcon name="alert-circle-solid" color="error.main" />,
-        statusText: <Text color="error.main">Invalid Wasm file</Text>,
+        statusText: <Text color="error.main"> • Invalid Wasm file</Text>,
         helperText: error,
       };
-    default:
+    case "pending":
       return {
         icon: <Spinner color="violet.light" w="40px" h="40px" />,
-        statusText: "Loading",
+        statusText: " • Loading",
+      };
+
+    default:
+      return {
+        icon: null,
+        statusText: "",
       };
   }
 };
@@ -69,7 +75,7 @@ export const UploadCard = ({
         <Flex direction="column">
           <Text variant="body1">{file.name}</Text>
           <Text variant="body2" color="text.dark" display="flex" gap="4px">
-            {big(file.size).div(1000).toFixed(0)} KB • {statusText}
+            {big(file.size).div(1000).toFixed(0)} KB {statusText}
           </Text>
         </Flex>
         <Flex align="center" gap="16px" ml="auto">
diff --git a/src/lib/types/upload.ts b/src/lib/types/upload.ts
index 8865d2132..b068a4311 100644
--- a/src/lib/types/upload.ts
+++ b/src/lib/types/upload.ts
@@ -1,6 +1,6 @@
 import type { AccessType, Addr } from "lib/types";
 
-export type SimulateStatus = "pending" | "completed" | "failed";
+export type SimulateStatus = "pending" | "completed" | "failed" | "default";
 
 export interface UploadSectionState {
   wasmFile?: File;

From 814f7ba469b3d2e3632eedaaeeeb11dbeb3b0f0d Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 18 Apr 2023 18:04:59 +0700
Subject: [PATCH 018/354] feat: wireup for pool navigation

---
 CHANGELOG.md                                  |   1 +
 src/lib/components/ToggleWithName.tsx         |   1 +
 src/lib/gql/gql.ts                            |  10 +
 src/lib/gql/graphql.ts                        | 676 ++++++++++++++++++
 src/lib/pages/pool/components/PoolHeader.tsx  | 173 +++--
 src/lib/pages/pool/components/PoolLogo.tsx    |   7 +-
 .../components/supportedSection/PoolCard.tsx  |   8 +-
 .../components/supportedSection/index.tsx     | 101 ++-
 .../UnsupportedPoolCard.tsx                   | 115 ++-
 .../components/unsupportedSection/index.tsx   |  80 ++-
 src/lib/pages/pool/constant.ts                |   8 +
 src/lib/pages/pool/data.ts                    |  12 +-
 src/lib/pages/pool/index.tsx                  | 106 +--
 src/lib/pages/pool/types.ts                   |   7 +
 src/lib/query/pool.ts                         |  39 +
 src/lib/services/poolService.ts               |  69 +-
 16 files changed, 1105 insertions(+), 308 deletions(-)
 create mode 100644 src/lib/pages/pool/types.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d62d6134..042347a1b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#277](https://github.com/alleslabs/celatone-frontend/pull/277) Wire up data for pool navigation page
 - [#275](https://github.com/alleslabs/celatone-frontend/pull/275) Add Pool navigation and pool detail data
 - [#270](https://github.com/alleslabs/celatone-frontend/pull/270) Add Pool navigation and detail page
 - [#271](https://github.com/alleslabs/celatone-frontend/pull/271) Create transaction list page
diff --git a/src/lib/components/ToggleWithName.tsx b/src/lib/components/ToggleWithName.tsx
index c23809c9e..8ac4e24f5 100644
--- a/src/lib/components/ToggleWithName.tsx
+++ b/src/lib/components/ToggleWithName.tsx
@@ -16,6 +16,7 @@ export const ToggleWithName = ({
   <Flex p="1" borderRadius={4} border="1px" borderColor="pebble.700">
     {options.map((item) => (
       <Button
+        key={item.value}
         borderRadius={4}
         size="sm"
         height="22px"
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index 166e37a62..12fec195b 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -45,6 +45,10 @@ const documents = {
     types.GetPoolListDocument,
   "\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetPoolListCountDocument,
+  "\n  query getPoolListByDenoms(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools: search_pools_with_denoms(\n      args: { denoms: $denoms }\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n":
+    types.GetPoolListByDenomsDocument,
+  "\n  query getPoolListByDenomsCount(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n  ) {\n    pools_aggregate: search_pools_with_denoms_aggregate(\n      args: { denoms: $denoms }\n      where: $expression\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
+    types.GetPoolListByDenomsCountDocument,
   "\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n    }\n  }\n":
     types.GetPoolByPoolIdDocument,
   "\n  query getRelatedProposalsByContractAddressPagination(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_proposals(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { proposal_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      proposal {\n        title\n        status\n        voting_end_time\n        deposit_end_time\n        type\n        account {\n          address\n        }\n        is_expedited\n      }\n      proposal_id\n      resolved_height\n    }\n  }\n":
@@ -138,6 +142,12 @@ export function graphql(
 export function graphql(
   source: "\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getPoolListByDenoms(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools: search_pools_with_denoms(\n      args: { denoms: $denoms }\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n"
+): typeof documents["\n  query getPoolListByDenoms(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools: search_pools_with_denoms(\n      args: { denoms: $denoms }\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getPoolListByDenomsCount(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n  ) {\n    pools_aggregate: search_pools_with_denoms_aggregate(\n      args: { denoms: $denoms }\n      where: $expression\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
+): typeof documents["\n  query getPoolListByDenomsCount(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n  ) {\n    pools_aggregate: search_pools_with_denoms_aggregate(\n      args: { denoms: $denoms }\n      where: $expression\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n    }\n  }\n"
 ): typeof documents["\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index 88fe63224..e23fbbe63 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -18,6 +18,7 @@ export type Scalars = {
   Boolean: boolean;
   Int: number;
   Float: number;
+  _varchar: any;
   accounttype: any;
   bytea: any;
   json: any;
@@ -4669,6 +4670,12 @@ export type End_Block_Events_Variance_Order_By = {
   block_height?: InputMaybe<Order_By>;
 };
 
+export type Get_Top_Pool_Assets_Args = {
+  is_superfluid_flag?: InputMaybe<Scalars["Boolean"]>;
+  limit_arg?: InputMaybe<Scalars["Int"]>;
+  pool_type_arg?: InputMaybe<Scalars["pooltype"]>;
+};
+
 /** Boolean expression to compare columns of type "json". All fields are combined with logical 'AND'. */
 export type Json_Comparison_Exp = {
   _eq?: InputMaybe<Scalars["json"]>;
@@ -5028,6 +5035,8 @@ export type Mutation_Root = {
   delete_proposals?: Maybe<Proposals_Mutation_Response>;
   /** delete single row from the table: "proposals" */
   delete_proposals_by_pk?: Maybe<Proposals>;
+  /** delete data from the table: "top_assets_result" */
+  delete_top_assets_result?: Maybe<Top_Assets_Result_Mutation_Response>;
   /** delete data from the table: "tracking" */
   delete_tracking?: Maybe<Tracking_Mutation_Response>;
   /** delete single row from the table: "tracking" */
@@ -5112,6 +5121,10 @@ export type Mutation_Root = {
   insert_proposals?: Maybe<Proposals_Mutation_Response>;
   /** insert a single row into the table: "proposals" */
   insert_proposals_one?: Maybe<Proposals>;
+  /** insert data into the table: "top_assets_result" */
+  insert_top_assets_result?: Maybe<Top_Assets_Result_Mutation_Response>;
+  /** insert a single row into the table: "top_assets_result" */
+  insert_top_assets_result_one?: Maybe<Top_Assets_Result>;
   /** insert data into the table: "tracking" */
   insert_tracking?: Maybe<Tracking_Mutation_Response>;
   /** insert a single row into the table: "tracking" */
@@ -5238,6 +5251,12 @@ export type Mutation_Root = {
   update_proposals_by_pk?: Maybe<Proposals>;
   /** update multiples rows of table: "proposals" */
   update_proposals_many?: Maybe<Array<Maybe<Proposals_Mutation_Response>>>;
+  /** update data of the table: "top_assets_result" */
+  update_top_assets_result?: Maybe<Top_Assets_Result_Mutation_Response>;
+  /** update multiples rows of table: "top_assets_result" */
+  update_top_assets_result_many?: Maybe<
+    Array<Maybe<Top_Assets_Result_Mutation_Response>>
+  >;
   /** update data of the table: "tracking" */
   update_tracking?: Maybe<Tracking_Mutation_Response>;
   /** update single row of the table: "tracking" */
@@ -5390,6 +5409,11 @@ export type Mutation_RootDelete_Proposals_By_PkArgs = {
   id: Scalars["Int"];
 };
 
+/** mutation root */
+export type Mutation_RootDelete_Top_Assets_ResultArgs = {
+  where: Top_Assets_Result_Bool_Exp;
+};
+
 /** mutation root */
 export type Mutation_RootDelete_TrackingArgs = {
   where: Tracking_Bool_Exp;
@@ -5615,6 +5639,16 @@ export type Mutation_RootInsert_Proposals_OneArgs = {
   on_conflict?: InputMaybe<Proposals_On_Conflict>;
 };
 
+/** mutation root */
+export type Mutation_RootInsert_Top_Assets_ResultArgs = {
+  objects: Array<Top_Assets_Result_Insert_Input>;
+};
+
+/** mutation root */
+export type Mutation_RootInsert_Top_Assets_Result_OneArgs = {
+  object: Top_Assets_Result_Insert_Input;
+};
+
 /** mutation root */
 export type Mutation_RootInsert_TrackingArgs = {
   objects: Array<Tracking_Insert_Input>;
@@ -5924,6 +5958,18 @@ export type Mutation_RootUpdate_Proposals_ManyArgs = {
   updates: Array<Proposals_Updates>;
 };
 
+/** mutation root */
+export type Mutation_RootUpdate_Top_Assets_ResultArgs = {
+  _inc?: InputMaybe<Top_Assets_Result_Inc_Input>;
+  _set?: InputMaybe<Top_Assets_Result_Set_Input>;
+  where: Top_Assets_Result_Bool_Exp;
+};
+
+/** mutation root */
+export type Mutation_RootUpdate_Top_Assets_Result_ManyArgs = {
+  updates: Array<Top_Assets_Result_Updates>;
+};
+
 /** mutation root */
 export type Mutation_RootUpdate_TrackingArgs = {
   _inc?: InputMaybe<Tracking_Inc_Input>;
@@ -8187,6 +8233,10 @@ export type Query_Root = {
   end_block_events: Array<End_Block_Events>;
   /** An aggregate relationship */
   end_block_events_aggregate: End_Block_Events_Aggregate;
+  /** execute function "get_top_pool_assets" which returns "top_assets_result" */
+  get_top_pool_assets: Array<Top_Assets_Result>;
+  /** execute function "get_top_pool_assets" and query aggregates on result of table type "top_assets_result" */
+  get_top_pool_assets_aggregate: Top_Assets_Result_Aggregate;
   /** An array relationship */
   lcd_tx_results: Array<Lcd_Tx_Results>;
   /** An aggregate relationship */
@@ -8215,6 +8265,18 @@ export type Query_Root = {
   proposals_aggregate: Proposals_Aggregate;
   /** fetch data from the table: "proposals" using primary key columns */
   proposals_by_pk?: Maybe<Proposals>;
+  /** execute function "search_pools_with_denom" which returns "pools" */
+  search_pools_with_denom: Array<Pools>;
+  /** execute function "search_pools_with_denom" and query aggregates on result of table type "pools" */
+  search_pools_with_denom_aggregate: Pools_Aggregate;
+  /** execute function "search_pools_with_denoms" which returns "pools" */
+  search_pools_with_denoms: Array<Pools>;
+  /** execute function "search_pools_with_denoms" and query aggregates on result of table type "pools" */
+  search_pools_with_denoms_aggregate: Pools_Aggregate;
+  /** fetch data from the table: "top_assets_result" */
+  top_assets_result: Array<Top_Assets_Result>;
+  /** fetch aggregated fields from the table: "top_assets_result" */
+  top_assets_result_aggregate: Top_Assets_Result_Aggregate;
   /** fetch data from the table: "tracking" */
   tracking: Array<Tracking>;
   /** fetch aggregated fields from the table: "tracking" */
@@ -8450,6 +8512,24 @@ export type Query_RootEnd_Block_Events_AggregateArgs = {
   where?: InputMaybe<End_Block_Events_Bool_Exp>;
 };
 
+export type Query_RootGet_Top_Pool_AssetsArgs = {
+  args: Get_Top_Pool_Assets_Args;
+  distinct_on?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Top_Assets_Result_Order_By>>;
+  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
+};
+
+export type Query_RootGet_Top_Pool_Assets_AggregateArgs = {
+  args: Get_Top_Pool_Assets_Args;
+  distinct_on?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Top_Assets_Result_Order_By>>;
+  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
+};
+
 export type Query_RootLcd_Tx_ResultsArgs = {
   distinct_on?: InputMaybe<Array<Lcd_Tx_Results_Select_Column>>;
   limit?: InputMaybe<Scalars["Int"]>;
@@ -8554,6 +8634,58 @@ export type Query_RootProposals_By_PkArgs = {
   id: Scalars["Int"];
 };
 
+export type Query_RootSearch_Pools_With_DenomArgs = {
+  args: Search_Pools_With_Denom_Args;
+  distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Pools_Order_By>>;
+  where?: InputMaybe<Pools_Bool_Exp>;
+};
+
+export type Query_RootSearch_Pools_With_Denom_AggregateArgs = {
+  args: Search_Pools_With_Denom_Args;
+  distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Pools_Order_By>>;
+  where?: InputMaybe<Pools_Bool_Exp>;
+};
+
+export type Query_RootSearch_Pools_With_DenomsArgs = {
+  args: Search_Pools_With_Denoms_Args;
+  distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Pools_Order_By>>;
+  where?: InputMaybe<Pools_Bool_Exp>;
+};
+
+export type Query_RootSearch_Pools_With_Denoms_AggregateArgs = {
+  args: Search_Pools_With_Denoms_Args;
+  distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Pools_Order_By>>;
+  where?: InputMaybe<Pools_Bool_Exp>;
+};
+
+export type Query_RootTop_Assets_ResultArgs = {
+  distinct_on?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Top_Assets_Result_Order_By>>;
+  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
+};
+
+export type Query_RootTop_Assets_Result_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Top_Assets_Result_Order_By>>;
+  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
+};
+
 export type Query_RootTrackingArgs = {
   distinct_on?: InputMaybe<Array<Tracking_Select_Column>>;
   limit?: InputMaybe<Scalars["Int"]>;
@@ -8627,6 +8759,14 @@ export type Query_RootTransactions_By_PkArgs = {
   hash: Scalars["bytea"];
 };
 
+export type Search_Pools_With_Denom_Args = {
+  denom?: InputMaybe<Scalars["String"]>;
+};
+
+export type Search_Pools_With_Denoms_Args = {
+  denoms?: InputMaybe<Scalars["_varchar"]>;
+};
+
 export type Subscription_Root = {
   __typename?: "subscription_root";
   /** An array relationship */
@@ -8711,6 +8851,10 @@ export type Subscription_Root = {
   end_block_events_aggregate: End_Block_Events_Aggregate;
   /** fetch data from the table in a streaming manner: "end_block_events" */
   end_block_events_stream: Array<End_Block_Events>;
+  /** execute function "get_top_pool_assets" which returns "top_assets_result" */
+  get_top_pool_assets: Array<Top_Assets_Result>;
+  /** execute function "get_top_pool_assets" and query aggregates on result of table type "top_assets_result" */
+  get_top_pool_assets_aggregate: Top_Assets_Result_Aggregate;
   /** An array relationship */
   lcd_tx_results: Array<Lcd_Tx_Results>;
   /** An aggregate relationship */
@@ -8751,6 +8895,20 @@ export type Subscription_Root = {
   proposals_by_pk?: Maybe<Proposals>;
   /** fetch data from the table in a streaming manner: "proposals" */
   proposals_stream: Array<Proposals>;
+  /** execute function "search_pools_with_denom" which returns "pools" */
+  search_pools_with_denom: Array<Pools>;
+  /** execute function "search_pools_with_denom" and query aggregates on result of table type "pools" */
+  search_pools_with_denom_aggregate: Pools_Aggregate;
+  /** execute function "search_pools_with_denoms" which returns "pools" */
+  search_pools_with_denoms: Array<Pools>;
+  /** execute function "search_pools_with_denoms" and query aggregates on result of table type "pools" */
+  search_pools_with_denoms_aggregate: Pools_Aggregate;
+  /** fetch data from the table: "top_assets_result" */
+  top_assets_result: Array<Top_Assets_Result>;
+  /** fetch aggregated fields from the table: "top_assets_result" */
+  top_assets_result_aggregate: Top_Assets_Result_Aggregate;
+  /** fetch data from the table in a streaming manner: "top_assets_result" */
+  top_assets_result_stream: Array<Top_Assets_Result>;
   /** fetch data from the table: "tracking" */
   tracking: Array<Tracking>;
   /** fetch aggregated fields from the table: "tracking" */
@@ -9066,6 +9224,24 @@ export type Subscription_RootEnd_Block_Events_StreamArgs = {
   where?: InputMaybe<End_Block_Events_Bool_Exp>;
 };
 
+export type Subscription_RootGet_Top_Pool_AssetsArgs = {
+  args: Get_Top_Pool_Assets_Args;
+  distinct_on?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Top_Assets_Result_Order_By>>;
+  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
+};
+
+export type Subscription_RootGet_Top_Pool_Assets_AggregateArgs = {
+  args: Get_Top_Pool_Assets_Args;
+  distinct_on?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Top_Assets_Result_Order_By>>;
+  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
+};
+
 export type Subscription_RootLcd_Tx_ResultsArgs = {
   distinct_on?: InputMaybe<Array<Lcd_Tx_Results_Select_Column>>;
   limit?: InputMaybe<Scalars["Int"]>;
@@ -9206,6 +9382,64 @@ export type Subscription_RootProposals_StreamArgs = {
   where?: InputMaybe<Proposals_Bool_Exp>;
 };
 
+export type Subscription_RootSearch_Pools_With_DenomArgs = {
+  args: Search_Pools_With_Denom_Args;
+  distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Pools_Order_By>>;
+  where?: InputMaybe<Pools_Bool_Exp>;
+};
+
+export type Subscription_RootSearch_Pools_With_Denom_AggregateArgs = {
+  args: Search_Pools_With_Denom_Args;
+  distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Pools_Order_By>>;
+  where?: InputMaybe<Pools_Bool_Exp>;
+};
+
+export type Subscription_RootSearch_Pools_With_DenomsArgs = {
+  args: Search_Pools_With_Denoms_Args;
+  distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Pools_Order_By>>;
+  where?: InputMaybe<Pools_Bool_Exp>;
+};
+
+export type Subscription_RootSearch_Pools_With_Denoms_AggregateArgs = {
+  args: Search_Pools_With_Denoms_Args;
+  distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Pools_Order_By>>;
+  where?: InputMaybe<Pools_Bool_Exp>;
+};
+
+export type Subscription_RootTop_Assets_ResultArgs = {
+  distinct_on?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Top_Assets_Result_Order_By>>;
+  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
+};
+
+export type Subscription_RootTop_Assets_Result_AggregateArgs = {
+  distinct_on?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
+  limit?: InputMaybe<Scalars["Int"]>;
+  offset?: InputMaybe<Scalars["Int"]>;
+  order_by?: InputMaybe<Array<Top_Assets_Result_Order_By>>;
+  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
+};
+
+export type Subscription_RootTop_Assets_Result_StreamArgs = {
+  batch_size: Scalars["Int"];
+  cursor: Array<InputMaybe<Top_Assets_Result_Stream_Cursor_Input>>;
+  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
+};
+
 export type Subscription_RootTrackingArgs = {
   distinct_on?: InputMaybe<Array<Tracking_Select_Column>>;
   limit?: InputMaybe<Scalars["Int"]>;
@@ -9316,6 +9550,175 @@ export type Timestamp_Comparison_Exp = {
   _nin?: InputMaybe<Array<Scalars["timestamp"]>>;
 };
 
+/** columns and relationships of "top_assets_result" */
+export type Top_Assets_Result = {
+  __typename?: "top_assets_result";
+  count?: Maybe<Scalars["Int"]>;
+  denom?: Maybe<Scalars["String"]>;
+};
+
+export type Top_Assets_Result_Aggregate = {
+  __typename?: "top_assets_result_aggregate";
+  aggregate?: Maybe<Top_Assets_Result_Aggregate_Fields>;
+  nodes: Array<Top_Assets_Result>;
+};
+
+/** aggregate fields of "top_assets_result" */
+export type Top_Assets_Result_Aggregate_Fields = {
+  __typename?: "top_assets_result_aggregate_fields";
+  avg?: Maybe<Top_Assets_Result_Avg_Fields>;
+  count: Scalars["Int"];
+  max?: Maybe<Top_Assets_Result_Max_Fields>;
+  min?: Maybe<Top_Assets_Result_Min_Fields>;
+  stddev?: Maybe<Top_Assets_Result_Stddev_Fields>;
+  stddev_pop?: Maybe<Top_Assets_Result_Stddev_Pop_Fields>;
+  stddev_samp?: Maybe<Top_Assets_Result_Stddev_Samp_Fields>;
+  sum?: Maybe<Top_Assets_Result_Sum_Fields>;
+  var_pop?: Maybe<Top_Assets_Result_Var_Pop_Fields>;
+  var_samp?: Maybe<Top_Assets_Result_Var_Samp_Fields>;
+  variance?: Maybe<Top_Assets_Result_Variance_Fields>;
+};
+
+/** aggregate fields of "top_assets_result" */
+export type Top_Assets_Result_Aggregate_FieldsCountArgs = {
+  columns?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
+  distinct?: InputMaybe<Scalars["Boolean"]>;
+};
+
+/** aggregate avg on columns */
+export type Top_Assets_Result_Avg_Fields = {
+  __typename?: "top_assets_result_avg_fields";
+  count?: Maybe<Scalars["Float"]>;
+};
+
+/** Boolean expression to filter rows from the table "top_assets_result". All fields are combined with a logical 'AND'. */
+export type Top_Assets_Result_Bool_Exp = {
+  _and?: InputMaybe<Array<Top_Assets_Result_Bool_Exp>>;
+  _not?: InputMaybe<Top_Assets_Result_Bool_Exp>;
+  _or?: InputMaybe<Array<Top_Assets_Result_Bool_Exp>>;
+  count?: InputMaybe<Int_Comparison_Exp>;
+  denom?: InputMaybe<String_Comparison_Exp>;
+};
+
+/** input type for incrementing numeric columns in table "top_assets_result" */
+export type Top_Assets_Result_Inc_Input = {
+  count?: InputMaybe<Scalars["Int"]>;
+};
+
+/** input type for inserting data into table "top_assets_result" */
+export type Top_Assets_Result_Insert_Input = {
+  count?: InputMaybe<Scalars["Int"]>;
+  denom?: InputMaybe<Scalars["String"]>;
+};
+
+/** aggregate max on columns */
+export type Top_Assets_Result_Max_Fields = {
+  __typename?: "top_assets_result_max_fields";
+  count?: Maybe<Scalars["Int"]>;
+  denom?: Maybe<Scalars["String"]>;
+};
+
+/** aggregate min on columns */
+export type Top_Assets_Result_Min_Fields = {
+  __typename?: "top_assets_result_min_fields";
+  count?: Maybe<Scalars["Int"]>;
+  denom?: Maybe<Scalars["String"]>;
+};
+
+/** response of any mutation on the table "top_assets_result" */
+export type Top_Assets_Result_Mutation_Response = {
+  __typename?: "top_assets_result_mutation_response";
+  /** number of rows affected by the mutation */
+  affected_rows: Scalars["Int"];
+  /** data from the rows affected by the mutation */
+  returning: Array<Top_Assets_Result>;
+};
+
+/** Ordering options when selecting data from "top_assets_result". */
+export type Top_Assets_Result_Order_By = {
+  count?: InputMaybe<Order_By>;
+  denom?: InputMaybe<Order_By>;
+};
+
+/** select columns of table "top_assets_result" */
+export enum Top_Assets_Result_Select_Column {
+  /** column name */
+  Count = "count",
+  /** column name */
+  Denom = "denom",
+}
+
+/** input type for updating data in table "top_assets_result" */
+export type Top_Assets_Result_Set_Input = {
+  count?: InputMaybe<Scalars["Int"]>;
+  denom?: InputMaybe<Scalars["String"]>;
+};
+
+/** aggregate stddev on columns */
+export type Top_Assets_Result_Stddev_Fields = {
+  __typename?: "top_assets_result_stddev_fields";
+  count?: Maybe<Scalars["Float"]>;
+};
+
+/** aggregate stddev_pop on columns */
+export type Top_Assets_Result_Stddev_Pop_Fields = {
+  __typename?: "top_assets_result_stddev_pop_fields";
+  count?: Maybe<Scalars["Float"]>;
+};
+
+/** aggregate stddev_samp on columns */
+export type Top_Assets_Result_Stddev_Samp_Fields = {
+  __typename?: "top_assets_result_stddev_samp_fields";
+  count?: Maybe<Scalars["Float"]>;
+};
+
+/** Streaming cursor of the table "top_assets_result" */
+export type Top_Assets_Result_Stream_Cursor_Input = {
+  /** Stream column input with initial value */
+  initial_value: Top_Assets_Result_Stream_Cursor_Value_Input;
+  /** cursor ordering */
+  ordering?: InputMaybe<Cursor_Ordering>;
+};
+
+/** Initial value of the column from where the streaming should start */
+export type Top_Assets_Result_Stream_Cursor_Value_Input = {
+  count?: InputMaybe<Scalars["Int"]>;
+  denom?: InputMaybe<Scalars["String"]>;
+};
+
+/** aggregate sum on columns */
+export type Top_Assets_Result_Sum_Fields = {
+  __typename?: "top_assets_result_sum_fields";
+  count?: Maybe<Scalars["Int"]>;
+};
+
+export type Top_Assets_Result_Updates = {
+  /** increments the numeric columns with given value of the filtered values */
+  _inc?: InputMaybe<Top_Assets_Result_Inc_Input>;
+  /** sets the columns of the filtered rows to the given values */
+  _set?: InputMaybe<Top_Assets_Result_Set_Input>;
+  /** filter the rows which have to be updated */
+  where: Top_Assets_Result_Bool_Exp;
+};
+
+/** aggregate var_pop on columns */
+export type Top_Assets_Result_Var_Pop_Fields = {
+  __typename?: "top_assets_result_var_pop_fields";
+  count?: Maybe<Scalars["Float"]>;
+};
+
+/** aggregate var_samp on columns */
+export type Top_Assets_Result_Var_Samp_Fields = {
+  __typename?: "top_assets_result_var_samp_fields";
+  count?: Maybe<Scalars["Float"]>;
+};
+
+/** aggregate variance on columns */
+export type Top_Assets_Result_Variance_Fields = {
+  __typename?: "top_assets_result_variance_fields";
+  count?: Maybe<Scalars["Float"]>;
+};
+
 /** columns and relationships of "tracking" */
 export type Tracking = {
   __typename?: "tracking";
@@ -11323,6 +11726,38 @@ export type GetPoolListCountQuery = {
   };
 };
 
+export type GetPoolListByDenomsQueryVariables = Exact<{
+  denoms?: InputMaybe<Scalars["_varchar"]>;
+  expression?: InputMaybe<Pools_Bool_Exp>;
+  order?: InputMaybe<Order_By>;
+  offset: Scalars["Int"];
+  pageSize: Scalars["Int"];
+}>;
+
+export type GetPoolListByDenomsQuery = {
+  __typename?: "query_root";
+  pools: Array<{
+    __typename?: "pools";
+    id: number;
+    type: any;
+    is_superfluid: boolean;
+    liquidity: any;
+  }>;
+};
+
+export type GetPoolListByDenomsCountQueryVariables = Exact<{
+  denoms?: InputMaybe<Scalars["_varchar"]>;
+  expression?: InputMaybe<Pools_Bool_Exp>;
+}>;
+
+export type GetPoolListByDenomsCountQuery = {
+  __typename?: "query_root";
+  pools_aggregate: {
+    __typename?: "pools_aggregate";
+    aggregate?: { __typename?: "pools_aggregate_fields"; count: number } | null;
+  };
+};
+
 export type GetPoolByPoolIdQueryVariables = Exact<{
   poolId: Scalars["Int"];
 }>;
@@ -14575,6 +15010,247 @@ export const GetPoolListCountDocument = {
   GetPoolListCountQuery,
   GetPoolListCountQueryVariables
 >;
+export const GetPoolListByDenomsDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getPoolListByDenoms" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "denoms" },
+          },
+          type: {
+            kind: "NamedType",
+            name: { kind: "Name", value: "_varchar" },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "expression" },
+          },
+          type: {
+            kind: "NamedType",
+            name: { kind: "Name", value: "pools_bool_exp" },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "order" },
+          },
+          type: {
+            kind: "NamedType",
+            name: { kind: "Name", value: "order_by" },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "offset" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "pageSize" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            alias: { kind: "Name", value: "pools" },
+            name: { kind: "Name", value: "search_pools_with_denoms" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "args" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "denoms" },
+                      value: {
+                        kind: "Variable",
+                        name: { kind: "Name", value: "denoms" },
+                      },
+                    },
+                  ],
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "where" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "expression" },
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "order_by" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "id" },
+                      value: {
+                        kind: "Variable",
+                        name: { kind: "Name", value: "order" },
+                      },
+                    },
+                  ],
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "offset" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "offset" },
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "limit" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "pageSize" },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "id" } },
+                { kind: "Field", name: { kind: "Name", value: "type" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_superfluid" },
+                },
+                { kind: "Field", name: { kind: "Name", value: "liquidity" } },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  GetPoolListByDenomsQuery,
+  GetPoolListByDenomsQueryVariables
+>;
+export const GetPoolListByDenomsCountDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getPoolListByDenomsCount" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "denoms" },
+          },
+          type: {
+            kind: "NamedType",
+            name: { kind: "Name", value: "_varchar" },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "expression" },
+          },
+          type: {
+            kind: "NamedType",
+            name: { kind: "Name", value: "pools_bool_exp" },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            alias: { kind: "Name", value: "pools_aggregate" },
+            name: { kind: "Name", value: "search_pools_with_denoms_aggregate" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "args" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "denoms" },
+                      value: {
+                        kind: "Variable",
+                        name: { kind: "Name", value: "denoms" },
+                      },
+                    },
+                  ],
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "where" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "expression" },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "aggregate" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "count" } },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  GetPoolListByDenomsCountQuery,
+  GetPoolListByDenomsCountQueryVariables
+>;
 export const GetPoolByPoolIdDocument = {
   kind: "Document",
   definitions: [
diff --git a/src/lib/pages/pool/components/PoolHeader.tsx b/src/lib/pages/pool/components/PoolHeader.tsx
index 0f30f749c..3c5e68b0a 100644
--- a/src/lib/pages/pool/components/PoolHeader.tsx
+++ b/src/lib/pages/pool/components/PoolHeader.tsx
@@ -1,6 +1,6 @@
 import { Flex, Heading, Text, Box, Image } from "@chakra-ui/react";
 
-import { useAssetInfos } from "lib/services/assetService";
+import { BalancerIcon, StableswapIcon, SuperfluidIcon } from "../constant";
 import type { PoolDetail } from "lib/types/pool";
 import { getTokenLabel } from "lib/utils";
 
@@ -18,107 +18,96 @@ export const PoolHeader = ({
   isSuperFluid,
   poolType,
   poolLiquidity,
-}: PoolHeaderProps) => {
-  const { assetInfos } = useAssetInfos();
-
-  return (
-    <Flex justifyContent="space-between" w="full">
-      <Flex alignItems="center" gap={4}>
-        <PoolLogo poolLiquidity={poolLiquidity} />
-        <Box>
-          <Flex gap={1}>
-            <Flex
-              gap={1}
-              css={{
-                "h6:last-child": {
-                  display: "none",
-                },
-              }}
-            >
-              {poolLiquidity.slice(0, 4).map((item) => (
-                <>
-                  <Heading as="h6" fontWeight="600" variant="h6">
-                    {assetInfos?.[item.denom]?.symbol ||
-                      getTokenLabel(item.denom)}
-                  </Heading>
-                  <Heading
-                    as="h6"
-                    fontWeight="600"
-                    variant="h6"
-                    color="honeydew.main"
-                  >
-                    /
-                  </Heading>
-                </>
-              ))}
-            </Flex>
-            {poolLiquidity.length > 4 && (
-              <>
+}: PoolHeaderProps) => (
+  <Flex justifyContent="space-between" w="full">
+    <Flex alignItems="center" gap={4}>
+      <PoolLogo poolLiquidity={poolLiquidity} />
+      <Box>
+        <Flex gap={1}>
+          <Flex
+            gap={1}
+            css={{
+              "div:last-child > #separator": {
+                display: "none",
+              },
+            }}
+          >
+            {poolLiquidity.slice(0, 4).map((item) => (
+              <Flex key={item.denom} gap={1}>
+                <Heading as="h6" fontWeight="600" variant="h6">
+                  {item.symbol || getTokenLabel(item.denom)}
+                </Heading>
                 <Heading
                   as="h6"
+                  id="separator"
                   fontWeight="600"
                   variant="h6"
                   color="honeydew.main"
                 >
                   /
                 </Heading>
-                <Heading as="h6" fontWeight="600" variant="h6">
-                  + {poolLiquidity.length - 4}
-                </Heading>
-              </>
-            )}
+              </Flex>
+            ))}
           </Flex>
-          <Flex alignItems="center" gap={2} mt={1}>
-            <Text variant="body2" color="lilac.main">
-              #{poolId}
-            </Text>
-            {poolType && (
-              <Flex alignItems="center" gap={2}>
-                <Flex
-                  backgroundColor="pebble.600"
-                  borderRadius="full"
-                  w="6px"
-                  h="6px"
+          {poolLiquidity.length > 4 && (
+            <>
+              <Heading
+                as="h6"
+                fontWeight="600"
+                variant="h6"
+                color="honeydew.main"
+              >
+                /
+              </Heading>
+              <Heading as="h6" fontWeight="600" variant="h6">
+                + {poolLiquidity.length - 4}
+              </Heading>
+            </>
+          )}
+        </Flex>
+        <Flex alignItems="center" gap={2} mt={1}>
+          <Text variant="body2" color="lilac.main">
+            #{poolId}
+          </Text>
+          {poolType && (
+            <Flex alignItems="center" gap={2}>
+              <Flex
+                backgroundColor="pebble.600"
+                borderRadius="full"
+                w="6px"
+                h="6px"
+              />
+              <Flex alignItems="center" gap={1}>
+                <Image
+                  boxSize={4}
+                  src={poolType === "Balancer" ? BalancerIcon : StableswapIcon}
                 />
-                <Flex alignItems="center" gap={1}>
-                  <Image
-                    boxSize={4}
-                    src={
-                      poolType === "Balancer"
-                        ? "https://assets.alleslabs.dev/webapp-assets/pool/pool-balancer.svg"
-                        : "https://assets.alleslabs.dev/webapp-assets/pool/pool-stableswap.svg"
-                    }
-                  />
-                  <Text variant="body2" color="text.dark">
-                    {poolType === "Balancer"
-                      ? "Balancer Pool"
-                      : "StableSwap Pool"}
-                  </Text>
-                </Flex>
+                <Text variant="body2" color="text.dark">
+                  {poolType === "Balancer"
+                    ? "Balancer Pool"
+                    : "StableSwap Pool"}
+                </Text>
               </Flex>
-            )}
-            {isSuperFluid && (
-              <Flex alignItems="center" gap={2}>
-                <Flex
-                  backgroundColor="pebble.600"
-                  borderRadius="full"
-                  w="6px"
-                  h="6px"
-                />
-                <Flex alignItems="center" gap={1}>
-                  <Image
-                    boxSize={4}
-                    src="https://assets.alleslabs.dev/webapp-assets/pool/pool-superfluid.svg"
-                  />
-                  <Text variant="body2" color="text.dark">
-                    Superfluid
-                  </Text>
-                </Flex>
+            </Flex>
+          )}
+          {isSuperFluid && (
+            <Flex alignItems="center" gap={2}>
+              <Flex
+                backgroundColor="pebble.600"
+                borderRadius="full"
+                w="6px"
+                h="6px"
+              />
+              <Flex alignItems="center" gap={1}>
+                <Image boxSize={4} src={SuperfluidIcon} />
+                <Text variant="body2" color="text.dark">
+                  Superfluid
+                </Text>
               </Flex>
-            )}
-          </Flex>
-        </Box>
-      </Flex>
+            </Flex>
+          )}
+        </Flex>
+      </Box>
     </Flex>
-  );
-};
+  </Flex>
+);
diff --git a/src/lib/pages/pool/components/PoolLogo.tsx b/src/lib/pages/pool/components/PoolLogo.tsx
index 1d72df544..91e4a4a6c 100644
--- a/src/lib/pages/pool/components/PoolLogo.tsx
+++ b/src/lib/pages/pool/components/PoolLogo.tsx
@@ -13,7 +13,7 @@ export const PoolLogo = ({ poolLiquidity }: PoolLogoProps) => {
   return (
     <Flex
       css={{
-        ">:not(:first-child)": {
+        ">:not(:first-of-type)": {
           marginLeft: "-12px",
         },
       }}
@@ -25,6 +25,7 @@ export const PoolLogo = ({ poolLiquidity }: PoolLogoProps) => {
         <>
           {poolLiquidity.slice(0, 2).map((item, i) => (
             <Image
+              key={item.denom}
               boxSize={10}
               src={
                 assetInfos?.[item.denom]?.logo ||
@@ -47,10 +48,10 @@ export const PoolLogo = ({ poolLiquidity }: PoolLogoProps) => {
       ) : (
         poolLiquidity.map((asset, i) => (
           <Image
+            key={asset.denom}
             boxSize={10}
             src={
-              assetInfos?.[asset.denom]?.logo ||
-              UndefinedTokenList[i % UndefinedTokenList.length]
+              asset.logo || UndefinedTokenList[i % UndefinedTokenList.length]
             }
             zIndex={i * -1 + 2}
           />
diff --git a/src/lib/pages/pool/components/supportedSection/PoolCard.tsx b/src/lib/pages/pool/components/supportedSection/PoolCard.tsx
index da5f96508..eb361bed3 100644
--- a/src/lib/pages/pool/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pool/components/supportedSection/PoolCard.tsx
@@ -8,6 +8,7 @@ import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import type { USD, Pool } from "lib/types";
 import { formatPrice, getTokenLabel } from "lib/utils";
+import { formatPercentValue } from "lib/utils/formatter/formatPercentValue";
 
 const pebble700 = "pebble.700";
 
@@ -118,6 +119,7 @@ export const PoolCard = ({
       >
         {item.poolLiquidity.map((asset) => (
           <Flex
+            key={asset.denom}
             bg="pebble.800"
             px={3}
             py={1}
@@ -126,11 +128,13 @@ export const PoolCard = ({
           >
             <Box>
               <Text variant="body3" color="text.dark" fontWeight="600">
-                {getTokenLabel(asset.denom)}
+                {asset.symbol || getTokenLabel(asset.denom)}
               </Text>
               <Text variant="body3" color="text.main">
                 {mode === "percent-value"
-                  ? `${(asset.value ?? big(0)).div(liquidity).times(100)}`
+                  ? `${formatPercentValue(
+                      (asset.value ?? big(0)).div(liquidity).times(100)
+                    )}`
                   : `${asset.amount}`}
               </Text>
             </Box>
diff --git a/src/lib/pages/pool/components/supportedSection/index.tsx b/src/lib/pages/pool/components/supportedSection/index.tsx
index 595690dd5..f2e9c4bca 100644
--- a/src/lib/pages/pool/components/supportedSection/index.tsx
+++ b/src/lib/pages/pool/components/supportedSection/index.tsx
@@ -1,14 +1,33 @@
-import { Badge, Button, Flex, Heading, Text } from "@chakra-ui/react";
+import {
+  Badge,
+  Button,
+  Flex,
+  FormControl,
+  FormLabel,
+  Heading,
+  Image,
+  Switch,
+  Text,
+} from "@chakra-ui/react";
+import { matchSorter } from "match-sorter";
 import type { ChangeEvent } from "react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
 
+import { SuperfluidIcon } from "../../constant";
 import { usePools } from "../../data";
+import type { PoolFilterState } from "../../types";
+import { FilterByPoolType } from "../FilterByPoolType";
 import { CustomIcon } from "lib/components/icon";
+import InputWithIcon from "lib/components/InputWithIcon";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { ToggleWithName } from "lib/components/ToggleWithName";
 import { Order_By } from "lib/gql/graphql";
+import { useAssetInfos } from "lib/services/assetService";
+import { usePoolListCountByIsSupported } from "lib/services/poolService";
 import type { PoolTypeFilter } from "lib/types";
+import { isPositiveInt } from "lib/utils";
 
 import { SupportedPoolList } from "./SupportedPoolList";
 
@@ -22,23 +41,44 @@ const OPTIONS = [
     value: "amount",
   },
 ];
+
 interface SupportedSectionProp {
-  poolType: PoolTypeFilter;
-  isSuperfluidOnly: boolean;
-  search: string;
-  totalData: number;
-  refetchCount: () => void;
   scrollComponentId: string;
 }
 
 export const SupportedSection = ({
-  poolType,
-  isSuperfluidOnly,
-  search,
-  totalData,
-  refetchCount,
   scrollComponentId,
 }: SupportedSectionProp) => {
+  const { assetInfos } = useAssetInfos();
+
+  const { watch, setValue } = useForm<PoolFilterState>({
+    defaultValues: {
+      poolTypeValue: "all",
+      keyword: "",
+      isSuperfluidOnly: false,
+    },
+  });
+  const { poolTypeValue, keyword, isSuperfluidOnly } = watch();
+  const search = useMemo(
+    () =>
+      !keyword || isPositiveInt(keyword) || !assetInfos
+        ? keyword
+        : `{${matchSorter(Object.values(assetInfos), keyword, {
+            keys: ["id", "symbol"],
+          })
+            .map((assetInfo) => `"${assetInfo.id}"`)
+            .join(",")}}`,
+    [assetInfos, keyword]
+  );
+
+  const { data: totalData = 0, refetch: refetchCount } =
+    usePoolListCountByIsSupported(
+      true,
+      poolTypeValue,
+      isSuperfluidOnly,
+      search
+    );
+
   const [showNewest, setShowNewest] = useState(true);
   const [toggle, setToggle] = useState("percent-value");
 
@@ -72,7 +112,7 @@ export const SupportedSection = ({
 
   const { pools, isLoading } = usePools(
     true,
-    poolType,
+    poolTypeValue,
     isSuperfluidOnly,
     search,
     showNewest ? Order_By.Desc : Order_By.Asc,
@@ -82,6 +122,41 @@ export const SupportedSection = ({
 
   return (
     <>
+      <Flex alignItems="center" mb={12}>
+        <Flex grow="2" gap={4}>
+          <InputWithIcon
+            placeholder="Search with Pool ID, Symbol or Token ID"
+            value={keyword}
+            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+              setValue("keyword", e.target.value)
+            }
+            size="lg"
+          />
+          <FilterByPoolType
+            initialSelected="all"
+            setPoolTypeValue={(newVal: PoolTypeFilter) => {
+              if (newVal === poolTypeValue) return;
+              setValue("poolTypeValue", newVal);
+            }}
+          />
+          <Flex minW="250px">
+            <FormControl display="flex" alignItems="center" gap={2}>
+              <Switch
+                size="md"
+                defaultChecked={isSuperfluidOnly}
+                onChange={(e) => setValue("isSuperfluidOnly", e.target.checked)}
+              />
+              <FormLabel mb="0" cursor="pointer">
+                <Text display="flex" gap={2} alignItems="center">
+                  Show only
+                  <Image boxSize={4} src={SuperfluidIcon} />
+                  Superfluid
+                </Text>
+              </FormLabel>
+            </FormControl>
+          </Flex>
+        </Flex>
+      </Flex>
       <Flex alignItems="center" justifyContent="space-between">
         <Flex gap={2} alignItems="center">
           <Heading as="h6" variant="h6">
diff --git a/src/lib/pages/pool/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pool/components/unsupportedSection/UnsupportedPoolCard.tsx
index 2b883c499..938d493d7 100644
--- a/src/lib/pages/pool/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pool/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -16,7 +16,6 @@ import { UndefinedTokenList } from "../../constant";
 import { PoolHeader } from "../PoolHeader";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
-import { useAssetInfos } from "lib/services/assetService";
 import type { Pool } from "lib/types";
 import { getTokenLabel } from "lib/utils";
 
@@ -40,7 +39,6 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
   const handleOnClick = () => {
     navigate({ pathname: `/pool/[poolId]`, query: { poolId } });
   };
-  const { assetInfos } = useAssetInfos();
 
   return (
     <AccordionItem
@@ -52,69 +50,67 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
     >
       {({ isExpanded }) => (
         <>
-          <h2>
-            <AccordionButton>
-              <Flex gap={4} flexDirection="column" p={4} w="full">
-                <Flex alignItems="center" justifyContent="space-between">
-                  <PoolHeader
-                    poolId={poolId}
-                    isSuperFluid={item.isSuperfluid}
-                    poolType={item.type}
-                    poolLiquidity={item.poolLiquidity}
-                  />
-                  <Flex w="128px">
-                    <Tooltip
-                      hasArrow
-                      label="See in osmosis.zone"
-                      placement="top"
-                      bg="honeydew.darker"
-                      maxW="240px"
-                    >
-                      <Link href="/">
-                        <StyledIconButton
-                          variant="none"
-                          aria-label="external"
-                          _hover={{ backgroundColor: pebble700 }}
-                          icon={<CustomIcon name="launch" />}
-                        />
-                      </Link>
-                    </Tooltip>
-                    <Tooltip
-                      hasArrow
-                      label="Pin to top"
-                      placement="top"
-                      bg="honeydew.darker"
-                      maxW="240px"
-                    >
-                      <Flex>
-                        <StyledIconButton
-                          _hover={{ backgroundColor: pebble700 }}
-                          variant="none"
-                          aria-label="save"
-                          icon={<CustomIcon name="bookmark" />}
-                        />
-                      </Flex>
-                    </Tooltip>
-                    {isExpanded ? (
+          <AccordionButton>
+            <Flex gap={4} flexDirection="column" p={4} w="full">
+              <Flex alignItems="center" justifyContent="space-between">
+                <PoolHeader
+                  poolId={poolId}
+                  isSuperFluid={item.isSuperfluid}
+                  poolType={item.type}
+                  poolLiquidity={item.poolLiquidity}
+                />
+                <Flex w="128px">
+                  <Tooltip
+                    hasArrow
+                    label="See in osmosis.zone"
+                    placement="top"
+                    bg="honeydew.darker"
+                    maxW="240px"
+                  >
+                    <Link href="/">
                       <StyledIconButton
                         variant="none"
                         aria-label="external"
                         _hover={{ backgroundColor: pebble700 }}
-                        icon={<CustomIcon name="chevron-up" />}
+                        icon={<CustomIcon name="launch" />}
                       />
-                    ) : (
+                    </Link>
+                  </Tooltip>
+                  <Tooltip
+                    hasArrow
+                    label="Pin to top"
+                    placement="top"
+                    bg="honeydew.darker"
+                    maxW="240px"
+                  >
+                    <Flex>
                       <StyledIconButton
-                        variant="none"
-                        aria-label="external"
                         _hover={{ backgroundColor: pebble700 }}
-                        icon={<CustomIcon name="chevron-down" />}
+                        variant="none"
+                        aria-label="save"
+                        icon={<CustomIcon name="bookmark" />}
                       />
-                    )}
-                  </Flex>
+                    </Flex>
+                  </Tooltip>
+                  {isExpanded ? (
+                    <StyledIconButton
+                      variant="none"
+                      aria-label="external"
+                      _hover={{ backgroundColor: pebble700 }}
+                      icon={<CustomIcon name="chevron-up" />}
+                    />
+                  ) : (
+                    <StyledIconButton
+                      variant="none"
+                      aria-label="external"
+                      _hover={{ backgroundColor: pebble700 }}
+                      icon={<CustomIcon name="chevron-down" />}
+                    />
+                  )}
                 </Flex>
               </Flex>
-            </AccordionButton>
-          </h2>
+            </Flex>
+          </AccordionButton>
           <AccordionPanel pb={4}>
             <Flex>
               <Text
@@ -128,18 +124,15 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
               <Flex gap={4} flexDirection="column">
                 <Flex gap={2} flexDirection="column">
                   {item.poolLiquidity.map((asset, i) => (
-                    <Flex gap={3}>
+                    <Flex key={asset.denom} gap={3}>
                       <Image
                         boxSize={6}
                         src={
-                          assetInfos?.[asset.denom]?.logo ||
+                          asset.logo ||
                           UndefinedTokenList[i % UndefinedTokenList.length]
                         }
                       />
-                      <Flex>
-                        {assetInfos?.[asset.denom]?.symbol ||
-                          getTokenLabel(asset.denom)}
-                      </Flex>
+                      <Flex>{asset.symbol || getTokenLabel(asset.denom)}</Flex>
                     </Flex>
                   ))}
                 </Flex>
diff --git a/src/lib/pages/pool/components/unsupportedSection/index.tsx b/src/lib/pages/pool/components/unsupportedSection/index.tsx
index 47ea09f85..8a409e95a 100644
--- a/src/lib/pages/pool/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pool/components/unsupportedSection/index.tsx
@@ -1,32 +1,49 @@
-import { Badge, Button, Flex, Heading, Text } from "@chakra-ui/react";
+import {
+  Badge,
+  Button,
+  Flex,
+  FormControl,
+  FormLabel,
+  Heading,
+  Image,
+  Switch,
+  Text,
+} from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 import { useState } from "react";
+import { useForm } from "react-hook-form";
 
+import { SuperfluidIcon } from "../../constant";
 import { usePools } from "../../data";
+import type { PoolFilterState } from "../../types";
+import { FilterByPoolType } from "../FilterByPoolType";
 import { CustomIcon } from "lib/components/icon";
+import InputWithIcon from "lib/components/InputWithIcon";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { Order_By } from "lib/gql/graphql";
-import type { PoolTypeFilter } from "lib/types/pool";
+import { usePoolListCountByIsSupported } from "lib/services/poolService";
+import type { PoolTypeFilter } from "lib/types";
 
 import { UnsupportedPoolList } from "./UnsupportedPoolList";
 
 interface UnsupportedSectionProp {
-  poolType: PoolTypeFilter;
-  isSuperfluidOnly: boolean;
-  search: string;
-  totalData: number;
-  refetchCount: () => void;
   scrollComponentId: string;
 }
 export const UnsupportedSection = ({
-  poolType,
-  isSuperfluidOnly,
-  search,
-  totalData,
-  refetchCount,
   scrollComponentId,
 }: UnsupportedSectionProp) => {
+  const { watch, setValue } = useForm<PoolFilterState>({
+    defaultValues: {
+      poolTypeValue: "all",
+      keyword: "",
+      isSuperfluidOnly: false,
+    },
+  });
+  const { poolTypeValue, keyword, isSuperfluidOnly } = watch();
+  const { data: totalData = 0, refetch: refetchCount } =
+    usePoolListCountByIsSupported(false, "all", false, "");
+
   const [showNewest, setShowNewest] = useState(true);
 
   const {
@@ -59,9 +76,9 @@ export const UnsupportedSection = ({
 
   const { pools, isLoading } = usePools(
     false,
-    poolType,
+    poolTypeValue,
     isSuperfluidOnly,
-    search,
+    keyword,
     showNewest ? Order_By.Desc : Order_By.Asc,
     offset,
     pageSize
@@ -69,6 +86,41 @@ export const UnsupportedSection = ({
 
   return (
     <>
+      <Flex alignItems="center" mb={12}>
+        <Flex grow="2" gap={4}>
+          <InputWithIcon
+            placeholder="Search with Pool ID or Token ID"
+            value={keyword}
+            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+              setValue("keyword", e.target.value)
+            }
+            size="lg"
+          />
+          <FilterByPoolType
+            initialSelected="all"
+            setPoolTypeValue={(newVal: PoolTypeFilter) => {
+              if (newVal === poolTypeValue) return;
+              setValue("poolTypeValue", newVal);
+            }}
+          />
+          <Flex minW="250px">
+            <FormControl display="flex" alignItems="center" gap={2}>
+              <Switch
+                size="md"
+                defaultChecked={isSuperfluidOnly}
+                onChange={(e) => setValue("isSuperfluidOnly", e.target.checked)}
+              />
+              <FormLabel mb="0" cursor="pointer">
+                <Text display="flex" gap={2} alignItems="center">
+                  Show only
+                  <Image boxSize={4} src={SuperfluidIcon} />
+                  Superfluid
+                </Text>
+              </FormLabel>
+            </FormControl>
+          </Flex>
+        </Flex>
+      </Flex>
       <Flex alignItems="center" justifyContent="space-between" h="32px">
         <Flex gap={2} alignItems="center">
           <Heading as="h6" variant="h6">
diff --git a/src/lib/pages/pool/constant.ts b/src/lib/pages/pool/constant.ts
index 4bd4bf010..9072d7093 100644
--- a/src/lib/pages/pool/constant.ts
+++ b/src/lib/pages/pool/constant.ts
@@ -3,3 +3,11 @@ export const UndefinedTokenList = [
   "https://assets.alleslabs.dev/webapp-assets/asset/undefined-white.svg",
   "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet-light.svg",
 ];
+
+export const SuperfluidIcon =
+  "https://assets.alleslabs.dev/webapp-assets/pool/pool-superfluid.svg";
+
+export const BalancerIcon =
+  "https://assets.alleslabs.dev/webapp-assets/pool/pool-balancer.svg";
+export const StableswapIcon =
+  "https://assets.alleslabs.dev/webapp-assets/pool/pool-stableswap.svg";
diff --git a/src/lib/pages/pool/data.ts b/src/lib/pages/pool/data.ts
index bfbd325fc..02629fda3 100644
--- a/src/lib/pages/pool/data.ts
+++ b/src/lib/pages/pool/data.ts
@@ -38,24 +38,18 @@ export const usePools = (
       pageSize
     );
 
-  if (!assetInfos || !poolList)
-    return {
-      pools: undefined,
-      isLoading: isLoadingAssetInfos || isLoadingPoolList,
-    };
-
-  const data = poolList.map<Pool>((pool) => ({
+  const data = poolList?.map<Pool>((pool) => ({
     id: pool.id,
     type: pool.type,
     isSuperfluid: pool.isSuperfluid,
     poolLiquidity: pool.poolLiquidity.map<TokenWithValue>((coin) =>
-      coinToTokenWithValue(coin.denom, coin.amount, assetInfos[coin.denom])
+      coinToTokenWithValue(coin.denom, coin.amount, assetInfos?.[coin.denom])
     ),
   }));
 
   return {
     pools: data,
-    isLoading: false,
+    isLoading: isLoadingAssetInfos || isLoadingPoolList,
   };
 };
 
diff --git a/src/lib/pages/pool/index.tsx b/src/lib/pages/pool/index.tsx
index 98025fd98..a254195a2 100644
--- a/src/lib/pages/pool/index.tsx
+++ b/src/lib/pages/pool/index.tsx
@@ -1,49 +1,25 @@
-import {
-  Flex,
-  Heading,
-  Switch,
-  Text,
-  Image,
-  Tabs,
-  TabList,
-  TabPanels,
-  TabPanel,
-  FormControl,
-  FormLabel,
-} from "@chakra-ui/react";
-import type { ChangeEvent } from "react";
-import { useForm } from "react-hook-form";
+import { Heading, Tabs, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
 
 import { CustomTab } from "lib/components/CustomTab";
-import InputWithIcon from "lib/components/InputWithIcon";
 import PageContainer from "lib/components/PageContainer";
 import { usePoolListCountByIsSupported } from "lib/services/poolService";
-import type { PoolTypeFilter } from "lib/types";
 
-import { FilterByPoolType } from "./components/FilterByPoolType";
 import { SupportedSection } from "./components/supportedSection";
 import { UnsupportedSection } from "./components/unsupportedSection";
 
-interface PoolFilterState {
-  keyword: string;
-  poolTypeValue: PoolTypeFilter;
-  isSuperfluidOnly: boolean;
-}
-
 export const PoolIndex = () => {
-  const { data: supportedPoolCount, refetch: refetchSupportedPoolCount } =
-    usePoolListCountByIsSupported(true, "all", false, "");
-  const { data: unsupportedPoolCount, refetch: refetchUnsupportedPoolCount } =
-    usePoolListCountByIsSupported(false, "all", false, "");
-
-  const { watch, setValue } = useForm<PoolFilterState>({
-    defaultValues: {
-      poolTypeValue: "all",
-      keyword: "",
-      isSuperfluidOnly: true,
-    },
-  });
-  const { keyword, poolTypeValue, isSuperfluidOnly } = watch();
+  const { data: supportedPoolCount } = usePoolListCountByIsSupported(
+    true,
+    "all",
+    false,
+    ""
+  );
+  const { data: unsupportedPoolCount } = usePoolListCountByIsSupported(
+    false,
+    "all",
+    false,
+    ""
+  );
 
   const sectionHeaderId = "poolListTab";
 
@@ -52,44 +28,6 @@ export const PoolIndex = () => {
       <Heading variant="h5" as="h5">
         Osmosis Pools
       </Heading>
-      <Flex mt={12} alignItems="center">
-        <Flex grow="2" gap={4}>
-          <InputWithIcon
-            placeholder="Search with code ID or code name"
-            value={keyword}
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-              setValue("keyword", e.target.value)
-            }
-            size="lg"
-          />
-          <FilterByPoolType
-            initialSelected="all"
-            setPoolTypeValue={(newVal: PoolTypeFilter) => {
-              if (newVal === poolTypeValue) return;
-              setValue("poolTypeValue", newVal);
-            }}
-          />
-          <Flex minW="250px">
-            <FormControl display="flex" alignItems="center" gap={2}>
-              <Switch
-                size="md"
-                defaultChecked={isSuperfluidOnly}
-                onChange={(e) => setValue("isSuperfluidOnly", e.target.checked)}
-              />
-              <FormLabel mb="0" cursor="pointer">
-                <Text display="flex" gap={2} alignItems="center">
-                  Show only
-                  <Image
-                    boxSize={4}
-                    src="https://assets.alleslabs.dev/webapp-assets/pool/pool-superfluid.svg"
-                  />
-                  Superfluid
-                </Text>
-              </FormLabel>
-            </FormControl>
-          </Flex>
-        </Flex>
-      </Flex>
       <Tabs>
         <TabList my={8} borderBottom="1px" borderColor="pebble.800">
           <CustomTab count={supportedPoolCount ?? 0}>Pools</CustomTab>
@@ -99,24 +37,10 @@ export const PoolIndex = () => {
         </TabList>
         <TabPanels>
           <TabPanel p={0}>
-            <SupportedSection
-              poolType={poolTypeValue}
-              isSuperfluidOnly={isSuperfluidOnly}
-              search={keyword}
-              totalData={supportedPoolCount ?? 0}
-              refetchCount={refetchSupportedPoolCount}
-              scrollComponentId={sectionHeaderId}
-            />
+            <SupportedSection scrollComponentId={sectionHeaderId} />
           </TabPanel>
           <TabPanel p={0}>
-            <UnsupportedSection
-              poolType={poolTypeValue}
-              isSuperfluidOnly={isSuperfluidOnly}
-              search={keyword}
-              totalData={unsupportedPoolCount ?? 0}
-              refetchCount={refetchUnsupportedPoolCount}
-              scrollComponentId={sectionHeaderId}
-            />
+            <UnsupportedSection scrollComponentId={sectionHeaderId} />
           </TabPanel>
         </TabPanels>
       </Tabs>
diff --git a/src/lib/pages/pool/types.ts b/src/lib/pages/pool/types.ts
new file mode 100644
index 000000000..00d2e667c
--- /dev/null
+++ b/src/lib/pages/pool/types.ts
@@ -0,0 +1,7 @@
+import type { PoolTypeFilter } from "lib/types";
+
+export interface PoolFilterState {
+  keyword: string;
+  poolTypeValue: PoolTypeFilter;
+  isSuperfluidOnly: boolean;
+}
diff --git a/src/lib/query/pool.ts b/src/lib/query/pool.ts
index 64e8371eb..bbcc45965 100644
--- a/src/lib/query/pool.ts
+++ b/src/lib/query/pool.ts
@@ -31,6 +31,45 @@ export const getPoolListCount = graphql(`
   }
 `);
 
+export const getPoolListByDenoms = graphql(`
+  query getPoolListByDenoms(
+    $denoms: _varchar
+    $expression: pools_bool_exp
+    $order: order_by
+    $offset: Int!
+    $pageSize: Int!
+  ) {
+    pools: search_pools_with_denoms(
+      args: { denoms: $denoms }
+      where: $expression
+      order_by: { id: $order }
+      offset: $offset
+      limit: $pageSize
+    ) {
+      id
+      type
+      is_superfluid
+      liquidity
+    }
+  }
+`);
+
+export const getPoolListByDenomsCount = graphql(`
+  query getPoolListByDenomsCount(
+    $denoms: _varchar
+    $expression: pools_bool_exp
+  ) {
+    pools_aggregate: search_pools_with_denoms_aggregate(
+      args: { denoms: $denoms }
+      where: $expression
+    ) {
+      aggregate {
+        count
+      }
+    }
+  }
+`);
+
 export const getPoolByPoolId = graphql(`
   query getPoolByPoolId($poolId: Int!) {
     pools_by_pk(id: $poolId) {
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index c71a04c59..066ca1f85 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -5,8 +5,15 @@ import { useCallback } from "react";
 
 import { useCelatoneApp } from "lib/app-provider";
 import type { Order_By } from "lib/gql/graphql";
-import { getPoolByPoolId, getPoolList, getPoolListCount } from "lib/query";
+import {
+  getPoolByPoolId,
+  getPoolList,
+  getPoolListByDenoms,
+  getPoolListByDenomsCount,
+  getPoolListCount,
+} from "lib/query";
 import type { Pool, PoolDetail, PoolTypeFilter } from "lib/types";
+import { isPositiveInt } from "lib/utils";
 
 import { usePoolExpression } from "./expression/poolExpression";
 
@@ -28,22 +35,30 @@ export const usePoolListByIsSupported = (
   );
 
   const queryFn = useCallback(async () => {
-    return indexerGraphClient
-      .request(getPoolList, {
-        expression,
-        order,
-        offset,
-        pageSize,
-      })
-      .then(({ pools }) =>
-        pools.map<Pool<Coin>>((pool) => ({
-          id: pool.id,
-          type: pool.type,
-          isSuperfluid: pool.is_superfluid,
-          poolLiquidity: pool.liquidity,
-        }))
-      );
-  }, [expression, order, offset, pageSize, indexerGraphClient]);
+    const request =
+      !search || isPositiveInt(search)
+        ? indexerGraphClient.request(getPoolList, {
+            expression,
+            order,
+            offset,
+            pageSize,
+          })
+        : indexerGraphClient.request(getPoolListByDenoms, {
+            denoms: search,
+            expression,
+            order,
+            offset,
+            pageSize,
+          });
+    return request.then(({ pools }) =>
+      pools.map<Pool<Coin>>((pool) => ({
+        id: pool.id,
+        type: pool.type,
+        isSuperfluid: pool.is_superfluid,
+        poolLiquidity: pool.liquidity,
+      }))
+    );
+  }, [expression, indexerGraphClient, offset, order, pageSize, search]);
 
   return useQuery(
     [
@@ -75,12 +90,20 @@ export const usePoolListCountByIsSupported = (
   );
 
   const queryFn = useCallback(async () => {
-    return indexerGraphClient
-      .request(getPoolListCount, {
-        expression,
-      })
-      .then(({ pools_aggregate }) => pools_aggregate.aggregate?.count);
-  }, [expression, indexerGraphClient]);
+    const request =
+      !search || isPositiveInt(search)
+        ? indexerGraphClient.request(getPoolListCount, {
+            expression,
+          })
+        : indexerGraphClient.request(getPoolListByDenomsCount, {
+            denoms: search,
+            expression,
+          });
+
+    return request.then(
+      ({ pools_aggregate }) => pools_aggregate.aggregate?.count
+    );
+  }, [expression, indexerGraphClient, search]);
 
   return useQuery(
     [

From f99f2ef9a4ef30869bab7aa4c725552acba87120 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 18 Apr 2023 18:11:55 +0700
Subject: [PATCH 019/354] fix: change pools route

---
 src/lib/pages/{pool => pools}/components/FilterByPoolType.tsx  | 0
 src/lib/pages/{pool => pools}/components/PoolAssetDetail.tsx   | 0
 src/lib/pages/{pool => pools}/components/PoolDetailHeader.tsx  | 0
 src/lib/pages/{pool => pools}/components/PoolHeader.tsx        | 0
 src/lib/pages/{pool => pools}/components/PoolLogo.tsx          | 0
 src/lib/pages/{pool => pools}/components/PoolRelatedTxs.tsx    | 0
 src/lib/pages/{pool => pools}/components/PoolTop.tsx           | 0
 .../{pool => pools}/components/supportedSection/PoolCard.tsx   | 0
 .../components/supportedSection/SupportedPoolList.tsx          | 0
 .../{pool => pools}/components/supportedSection/index.tsx      | 0
 .../pages/{pool => pools}/components/table/PoolAssetsTable.tsx | 0
 .../{pool => pools}/components/table/PoolAssetsTableHeader.tsx | 0
 .../{pool => pools}/components/table/PoolAssetsTableRow.tsx    | 0
 .../components/unsupportedSection/UnsupportedPoolCard.tsx      | 0
 .../components/unsupportedSection/UnsupportedPoolList.tsx      | 0
 .../{pool => pools}/components/unsupportedSection/index.tsx    | 0
 src/lib/pages/{pool => pools}/constant.ts                      | 0
 src/lib/pages/{pool => pools}/data.ts                          | 0
 src/lib/pages/{pool => pools}/index.tsx                        | 0
 src/lib/pages/{pool => pools}/poolId.tsx                       | 0
 src/lib/pages/{pool => pools}/types.ts                         | 0
 src/pages/[network]/pool/[poolId].tsx                          | 2 +-
 src/pages/[network]/pool/index.tsx                             | 2 +-
 src/pages/pool/[poolId].tsx                                    | 3 ---
 src/pages/pool/index.tsx                                       | 3 ---
 src/pages/pools/[poolId].tsx                                   | 3 +++
 src/pages/pools/index.tsx                                      | 3 +++
 27 files changed, 8 insertions(+), 8 deletions(-)
 rename src/lib/pages/{pool => pools}/components/FilterByPoolType.tsx (100%)
 rename src/lib/pages/{pool => pools}/components/PoolAssetDetail.tsx (100%)
 rename src/lib/pages/{pool => pools}/components/PoolDetailHeader.tsx (100%)
 rename src/lib/pages/{pool => pools}/components/PoolHeader.tsx (100%)
 rename src/lib/pages/{pool => pools}/components/PoolLogo.tsx (100%)
 rename src/lib/pages/{pool => pools}/components/PoolRelatedTxs.tsx (100%)
 rename src/lib/pages/{pool => pools}/components/PoolTop.tsx (100%)
 rename src/lib/pages/{pool => pools}/components/supportedSection/PoolCard.tsx (100%)
 rename src/lib/pages/{pool => pools}/components/supportedSection/SupportedPoolList.tsx (100%)
 rename src/lib/pages/{pool => pools}/components/supportedSection/index.tsx (100%)
 rename src/lib/pages/{pool => pools}/components/table/PoolAssetsTable.tsx (100%)
 rename src/lib/pages/{pool => pools}/components/table/PoolAssetsTableHeader.tsx (100%)
 rename src/lib/pages/{pool => pools}/components/table/PoolAssetsTableRow.tsx (100%)
 rename src/lib/pages/{pool => pools}/components/unsupportedSection/UnsupportedPoolCard.tsx (100%)
 rename src/lib/pages/{pool => pools}/components/unsupportedSection/UnsupportedPoolList.tsx (100%)
 rename src/lib/pages/{pool => pools}/components/unsupportedSection/index.tsx (100%)
 rename src/lib/pages/{pool => pools}/constant.ts (100%)
 rename src/lib/pages/{pool => pools}/data.ts (100%)
 rename src/lib/pages/{pool => pools}/index.tsx (100%)
 rename src/lib/pages/{pool => pools}/poolId.tsx (100%)
 rename src/lib/pages/{pool => pools}/types.ts (100%)
 delete mode 100644 src/pages/pool/[poolId].tsx
 delete mode 100644 src/pages/pool/index.tsx
 create mode 100644 src/pages/pools/[poolId].tsx
 create mode 100644 src/pages/pools/index.tsx

diff --git a/src/lib/pages/pool/components/FilterByPoolType.tsx b/src/lib/pages/pools/components/FilterByPoolType.tsx
similarity index 100%
rename from src/lib/pages/pool/components/FilterByPoolType.tsx
rename to src/lib/pages/pools/components/FilterByPoolType.tsx
diff --git a/src/lib/pages/pool/components/PoolAssetDetail.tsx b/src/lib/pages/pools/components/PoolAssetDetail.tsx
similarity index 100%
rename from src/lib/pages/pool/components/PoolAssetDetail.tsx
rename to src/lib/pages/pools/components/PoolAssetDetail.tsx
diff --git a/src/lib/pages/pool/components/PoolDetailHeader.tsx b/src/lib/pages/pools/components/PoolDetailHeader.tsx
similarity index 100%
rename from src/lib/pages/pool/components/PoolDetailHeader.tsx
rename to src/lib/pages/pools/components/PoolDetailHeader.tsx
diff --git a/src/lib/pages/pool/components/PoolHeader.tsx b/src/lib/pages/pools/components/PoolHeader.tsx
similarity index 100%
rename from src/lib/pages/pool/components/PoolHeader.tsx
rename to src/lib/pages/pools/components/PoolHeader.tsx
diff --git a/src/lib/pages/pool/components/PoolLogo.tsx b/src/lib/pages/pools/components/PoolLogo.tsx
similarity index 100%
rename from src/lib/pages/pool/components/PoolLogo.tsx
rename to src/lib/pages/pools/components/PoolLogo.tsx
diff --git a/src/lib/pages/pool/components/PoolRelatedTxs.tsx b/src/lib/pages/pools/components/PoolRelatedTxs.tsx
similarity index 100%
rename from src/lib/pages/pool/components/PoolRelatedTxs.tsx
rename to src/lib/pages/pools/components/PoolRelatedTxs.tsx
diff --git a/src/lib/pages/pool/components/PoolTop.tsx b/src/lib/pages/pools/components/PoolTop.tsx
similarity index 100%
rename from src/lib/pages/pool/components/PoolTop.tsx
rename to src/lib/pages/pools/components/PoolTop.tsx
diff --git a/src/lib/pages/pool/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
similarity index 100%
rename from src/lib/pages/pool/components/supportedSection/PoolCard.tsx
rename to src/lib/pages/pools/components/supportedSection/PoolCard.tsx
diff --git a/src/lib/pages/pool/components/supportedSection/SupportedPoolList.tsx b/src/lib/pages/pools/components/supportedSection/SupportedPoolList.tsx
similarity index 100%
rename from src/lib/pages/pool/components/supportedSection/SupportedPoolList.tsx
rename to src/lib/pages/pools/components/supportedSection/SupportedPoolList.tsx
diff --git a/src/lib/pages/pool/components/supportedSection/index.tsx b/src/lib/pages/pools/components/supportedSection/index.tsx
similarity index 100%
rename from src/lib/pages/pool/components/supportedSection/index.tsx
rename to src/lib/pages/pools/components/supportedSection/index.tsx
diff --git a/src/lib/pages/pool/components/table/PoolAssetsTable.tsx b/src/lib/pages/pools/components/table/PoolAssetsTable.tsx
similarity index 100%
rename from src/lib/pages/pool/components/table/PoolAssetsTable.tsx
rename to src/lib/pages/pools/components/table/PoolAssetsTable.tsx
diff --git a/src/lib/pages/pool/components/table/PoolAssetsTableHeader.tsx b/src/lib/pages/pools/components/table/PoolAssetsTableHeader.tsx
similarity index 100%
rename from src/lib/pages/pool/components/table/PoolAssetsTableHeader.tsx
rename to src/lib/pages/pools/components/table/PoolAssetsTableHeader.tsx
diff --git a/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx b/src/lib/pages/pools/components/table/PoolAssetsTableRow.tsx
similarity index 100%
rename from src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx
rename to src/lib/pages/pools/components/table/PoolAssetsTableRow.tsx
diff --git a/src/lib/pages/pool/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
similarity index 100%
rename from src/lib/pages/pool/components/unsupportedSection/UnsupportedPoolCard.tsx
rename to src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
diff --git a/src/lib/pages/pool/components/unsupportedSection/UnsupportedPoolList.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx
similarity index 100%
rename from src/lib/pages/pool/components/unsupportedSection/UnsupportedPoolList.tsx
rename to src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx
diff --git a/src/lib/pages/pool/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
similarity index 100%
rename from src/lib/pages/pool/components/unsupportedSection/index.tsx
rename to src/lib/pages/pools/components/unsupportedSection/index.tsx
diff --git a/src/lib/pages/pool/constant.ts b/src/lib/pages/pools/constant.ts
similarity index 100%
rename from src/lib/pages/pool/constant.ts
rename to src/lib/pages/pools/constant.ts
diff --git a/src/lib/pages/pool/data.ts b/src/lib/pages/pools/data.ts
similarity index 100%
rename from src/lib/pages/pool/data.ts
rename to src/lib/pages/pools/data.ts
diff --git a/src/lib/pages/pool/index.tsx b/src/lib/pages/pools/index.tsx
similarity index 100%
rename from src/lib/pages/pool/index.tsx
rename to src/lib/pages/pools/index.tsx
diff --git a/src/lib/pages/pool/poolId.tsx b/src/lib/pages/pools/poolId.tsx
similarity index 100%
rename from src/lib/pages/pool/poolId.tsx
rename to src/lib/pages/pools/poolId.tsx
diff --git a/src/lib/pages/pool/types.ts b/src/lib/pages/pools/types.ts
similarity index 100%
rename from src/lib/pages/pool/types.ts
rename to src/lib/pages/pools/types.ts
diff --git a/src/pages/[network]/pool/[poolId].tsx b/src/pages/[network]/pool/[poolId].tsx
index 272b65280..6e4ebe579 100644
--- a/src/pages/[network]/pool/[poolId].tsx
+++ b/src/pages/[network]/pool/[poolId].tsx
@@ -1,3 +1,3 @@
-import { PoolId } from "lib/pages/pool/poolId";
+import { PoolId } from "lib/pages/pools/poolId";
 
 export default PoolId;
diff --git a/src/pages/[network]/pool/index.tsx b/src/pages/[network]/pool/index.tsx
index d469543e3..db335672a 100644
--- a/src/pages/[network]/pool/index.tsx
+++ b/src/pages/[network]/pool/index.tsx
@@ -1,3 +1,3 @@
-import { PoolIndex } from "lib/pages/pool/index";
+import { PoolIndex } from "lib/pages/pools/index";
 
 export default PoolIndex;
diff --git a/src/pages/pool/[poolId].tsx b/src/pages/pool/[poolId].tsx
deleted file mode 100644
index 272b65280..000000000
--- a/src/pages/pool/[poolId].tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { PoolId } from "lib/pages/pool/poolId";
-
-export default PoolId;
diff --git a/src/pages/pool/index.tsx b/src/pages/pool/index.tsx
deleted file mode 100644
index d469543e3..000000000
--- a/src/pages/pool/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { PoolIndex } from "lib/pages/pool/index";
-
-export default PoolIndex;
diff --git a/src/pages/pools/[poolId].tsx b/src/pages/pools/[poolId].tsx
new file mode 100644
index 000000000..6e4ebe579
--- /dev/null
+++ b/src/pages/pools/[poolId].tsx
@@ -0,0 +1,3 @@
+import { PoolId } from "lib/pages/pools/poolId";
+
+export default PoolId;
diff --git a/src/pages/pools/index.tsx b/src/pages/pools/index.tsx
new file mode 100644
index 000000000..db335672a
--- /dev/null
+++ b/src/pages/pools/index.tsx
@@ -0,0 +1,3 @@
+import { PoolIndex } from "lib/pages/pools/index";
+
+export default PoolIndex;

From cbf8929905e7a53f91668242517c1748414c91f0 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 18 Apr 2023 18:17:54 +0700
Subject: [PATCH 020/354] fix: network pool route

---
 src/pages/[network]/{pool => pools}/[poolId].tsx | 0
 src/pages/[network]/{pool => pools}/index.tsx    | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename src/pages/[network]/{pool => pools}/[poolId].tsx (100%)
 rename src/pages/[network]/{pool => pools}/index.tsx (100%)

diff --git a/src/pages/[network]/pool/[poolId].tsx b/src/pages/[network]/pools/[poolId].tsx
similarity index 100%
rename from src/pages/[network]/pool/[poolId].tsx
rename to src/pages/[network]/pools/[poolId].tsx
diff --git a/src/pages/[network]/pool/index.tsx b/src/pages/[network]/pools/index.tsx
similarity index 100%
rename from src/pages/[network]/pool/index.tsx
rename to src/pages/[network]/pools/index.tsx

From 0e82b4509636a5913ebcdfe8d1a932d2b04947e0 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 18 Apr 2023 18:20:34 +0700
Subject: [PATCH 021/354] fix: navigate to pool page

---
 src/lib/pages/pools/components/FilterByPoolType.tsx         | 6 +++---
 .../pages/pools/components/supportedSection/PoolCard.tsx    | 2 +-
 .../components/unsupportedSection/UnsupportedPoolCard.tsx   | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/pages/pools/components/FilterByPoolType.tsx b/src/lib/pages/pools/components/FilterByPoolType.tsx
index 54c0d9811..523470db2 100644
--- a/src/lib/pages/pools/components/FilterByPoolType.tsx
+++ b/src/lib/pages/pools/components/FilterByPoolType.tsx
@@ -1,5 +1,6 @@
 import { Grid } from "@chakra-ui/react";
 
+import { BalancerIcon, StableswapIcon } from "../constant";
 import { SelectInput } from "lib/components/forms";
 import type { PoolTypeFilter } from "lib/types";
 
@@ -25,14 +26,13 @@ const options: PoolTypeOption[] = [
   {
     label: "Balancer Pools",
     value: "balancer",
-    image: "https://assets.alleslabs.dev/webapp-assets/pool/pool-balancer.svg",
+    image: BalancerIcon,
     disabled: false,
   },
   {
     label: "StableSwap Pools",
     value: "stableswap",
-    image:
-      "https://assets.alleslabs.dev/webapp-assets/pool/pool-stableswap.svg",
+    image: StableswapIcon,
     disabled: false,
   },
 ];
diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index eb361bed3..087d773e3 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -25,7 +25,7 @@ export const PoolCard = ({
 }: PoolCardProps) => {
   const navigate = useInternalNavigate();
   const handleOnClick = () => {
-    navigate({ pathname: `/pool/[poolId]`, query: { poolId } });
+    navigate({ pathname: `/pools/[poolId]`, query: { poolId } });
   };
 
   const liquidity = item.poolLiquidity.reduce(
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index 938d493d7..f5df914af 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -37,7 +37,7 @@ const pebble700 = "pebble.700";
 export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
   const navigate = useInternalNavigate();
   const handleOnClick = () => {
-    navigate({ pathname: `/pool/[poolId]`, query: { poolId } });
+    navigate({ pathname: `/pools/[poolId]`, query: { poolId } });
   };
 
   return (

From 681ea26c7815dbb5c70ca8a17218a629479dae31 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 18 Apr 2023 18:31:17 +0700
Subject: [PATCH 022/354] fix: link to osmosis from cards

---
 .../pages/pools/components/supportedSection/PoolCard.tsx    | 6 +++++-
 .../components/unsupportedSection/UnsupportedPoolCard.tsx   | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index 087d773e3..b0f112068 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -65,7 +65,11 @@ export const PoolCard = ({
             bg="honeydew.darker"
             maxW="240px"
           >
-            <Link href="/">
+            <Link
+              href={`app.osmosis.zone/pool/${item.id}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <IconButton
                 fontSize="24px"
                 variant="none"
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index f5df914af..f889eb75e 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -67,7 +67,11 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
                     bg="honeydew.darker"
                     maxW="240px"
                   >
-                    <Link href="/">
+                    <Link
+                      href={`app.osmosis.zone/pool/${item.id}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
                       <StyledIconButton
                         variant="none"
                         aria-label="external"

From b04efed3615d995eccde501cbfdfca7848752cb2 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 18 Apr 2023 18:32:17 +0700
Subject: [PATCH 023/354] fix: add https

---
 src/lib/pages/pools/components/supportedSection/PoolCard.tsx    | 2 +-
 .../pools/components/unsupportedSection/UnsupportedPoolCard.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index b0f112068..e8ae59c4a 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -66,7 +66,7 @@ export const PoolCard = ({
             maxW="240px"
           >
             <Link
-              href={`app.osmosis.zone/pool/${item.id}`}
+              href={`https://app.osmosis.zone/pool/${item.id}`}
               target="_blank"
               rel="noopener noreferrer"
             >
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index f889eb75e..f37d1d73c 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -68,7 +68,7 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
                     maxW="240px"
                   >
                     <Link
-                      href={`app.osmosis.zone/pool/${item.id}`}
+                      href={`https://app.osmosis.zone/pool/${item.id}`}
                       target="_blank"
                       rel="noopener noreferrer"
                     >

From a20beb87dd2e91bcbf502138543ff94843ed45c8 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 19 Apr 2023 10:55:06 +0700
Subject: [PATCH 024/354] fix: unsupported token logic

---
 CHANGELOG.md                                             | 1 +
 src/lib/pages/pool/components/PoolLogo.tsx               | 7 +++----
 src/lib/pages/pool/components/UnsupportedPoolCard.tsx    | 6 +++---
 .../pages/pool/components/table/PoolAssetsTableRow.tsx   | 7 +++++--
 src/lib/pages/pool/utils.ts                              | 8 ++++++++
 src/lib/utils/formatter/token.ts                         | 9 +--------
 6 files changed, 21 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/pages/pool/utils.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d62d6134..cfea172ca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -58,6 +58,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#283](https://github.com/alleslabs/celatone-frontend/pull/283) Change unsupported token icon render logic
 - [#281](https://github.com/alleslabs/celatone-frontend/pull/281) Change Osmosis mainnet GraphQL
 - [#251](https://github.com/alleslabs/celatone-frontend/pull/251) Refactor Code and Contract tables into general components
 - [#252](https://github.com/alleslabs/celatone-frontend/pull/252) Refactor Empty State image source logic
diff --git a/src/lib/pages/pool/components/PoolLogo.tsx b/src/lib/pages/pool/components/PoolLogo.tsx
index ce90d2789..4d2a28297 100644
--- a/src/lib/pages/pool/components/PoolLogo.tsx
+++ b/src/lib/pages/pool/components/PoolLogo.tsx
@@ -1,10 +1,9 @@
 import { Flex, Image } from "@chakra-ui/react";
 
+import { getUndefinedTokenIcon } from "../utils";
 import { useAssetInfos } from "lib/services/assetService";
 import type { PoolDetail } from "lib/types/pool";
 
-import { UndefinedTokenList } from "./constant";
-
 interface PoolLogoProps {
   poolLiquidity: PoolDetail["poolLiquidity"];
 }
@@ -29,7 +28,7 @@ export const PoolLogo = ({ poolLiquidity }: PoolLogoProps) => {
               boxSize={10}
               src={
                 assetInfos?.[item.denom]?.logo ||
-                UndefinedTokenList[i % UndefinedTokenList.length]
+                getUndefinedTokenIcon(item.denom)
               }
               zIndex={i * -1 + 2}
             />
@@ -51,7 +50,7 @@ export const PoolLogo = ({ poolLiquidity }: PoolLogoProps) => {
             boxSize={10}
             src={
               assetInfos?.[asset.denom]?.logo ||
-              UndefinedTokenList[i % UndefinedTokenList.length]
+              getUndefinedTokenIcon(asset.denom)
             }
             zIndex={i * -1 + 2}
           />
diff --git a/src/lib/pages/pool/components/UnsupportedPoolCard.tsx b/src/lib/pages/pool/components/UnsupportedPoolCard.tsx
index ce2c66c92..0e035293d 100644
--- a/src/lib/pages/pool/components/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pool/components/UnsupportedPoolCard.tsx
@@ -12,13 +12,13 @@ import {
 } from "@chakra-ui/react";
 import Link from "next/link";
 
+import { getUndefinedTokenIcon } from "../utils";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { useAssetInfos } from "lib/services/assetService";
 import type { PoolDetail } from "lib/types/pool";
 import { getTokenLabel } from "lib/utils";
 
-import { UndefinedTokenList } from "./constant";
 import { PoolHeader } from "./PoolHeader";
 
 interface PoolCardProps {
@@ -128,13 +128,13 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
               </Text>
               <Flex gap={4} flexDirection="column">
                 <Flex gap={2} flexDirection="column">
-                  {item.poolLiquidity.map((asset, i) => (
+                  {item.poolLiquidity.map((asset) => (
                     <Flex gap={3}>
                       <Image
                         boxSize={6}
                         src={
                           assetInfos?.[asset.denom]?.logo ||
-                          UndefinedTokenList[i % UndefinedTokenList.length]
+                          getUndefinedTokenIcon(asset.denom)
                         }
                       />
                       <Flex>
diff --git a/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx b/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx
index 565e1b860..b28457483 100644
--- a/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx
+++ b/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx
@@ -4,7 +4,7 @@ import type { Coin } from "@cosmjs/stargate";
 import big from "big.js";
 import type { BigSource, Big } from "big.js";
 
-import { UndefinedTokenList } from "../constant";
+import { getUndefinedTokenIcon } from "../../utils";
 import { TableRow } from "lib/components/table/tableComponents";
 import { useAssetInfos } from "lib/services/assetService";
 import type { Token, U, USD, PoolDetail } from "lib/types";
@@ -44,7 +44,10 @@ export const PoolAssetsTableRow = ({
     <Grid templateColumns={templateColumns}>
       <TableRow>
         <Flex alignItems="center" gap={2}>
-          <Image boxSize={7} src={assetInfo.logo || UndefinedTokenList[0]} />
+          <Image
+            boxSize={7}
+            src={assetInfo.logo || getUndefinedTokenIcon(assetInfo.id)}
+          />
           <Flex flexDirection="column">
             <Text variant="body2" fontWeight="600" color="text.main">
               {assetInfo?.symbol || getTokenLabel(asset.denom)}
diff --git a/src/lib/pages/pool/utils.ts b/src/lib/pages/pool/utils.ts
new file mode 100644
index 000000000..270139272
--- /dev/null
+++ b/src/lib/pages/pool/utils.ts
@@ -0,0 +1,8 @@
+import { UndefinedTokenList } from "./components/constant";
+
+export const getUndefinedTokenIcon = (denom: string) => {
+  const index = denom.split("").reduce((v, c) => {
+    return v + c.charCodeAt(0);
+  }, 0);
+  return UndefinedTokenList[index % UndefinedTokenList.length];
+};
diff --git a/src/lib/utils/formatter/token.ts b/src/lib/utils/formatter/token.ts
index 19c26bc3e..0c7a0d63d 100644
--- a/src/lib/utils/formatter/token.ts
+++ b/src/lib/utils/formatter/token.ts
@@ -14,14 +14,7 @@ export const formatDemimal =
     delimiter: boolean;
   }) =>
   (n: BigSource, fallbackValue: string): string => {
-    const num = big(
-      big(n)
-        .mul(10 ** decimalPoints)
-        .toFixed()
-        .split(".")[0]
-    )
-      .div(10 ** decimalPoints)
-      .toFixed(decimalPoints);
+    const num = big(n).toFixed(decimalPoints, big.roundHalfUp);
     if (num === "NaN") return fallbackValue;
 
     const [i, d] = num.split(".");

From 45dd79c0495a1b9fbac00d169571ae747c75c4c6 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 19 Apr 2023 11:27:09 +0700
Subject: [PATCH 025/354] fix: default landing pool tab

---
 src/lib/pages/pools/index.tsx | 51 ++++++++++++++++++++++++-----------
 1 file changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/lib/pages/pools/index.tsx b/src/lib/pages/pools/index.tsx
index a254195a2..72feac033 100644
--- a/src/lib/pages/pools/index.tsx
+++ b/src/lib/pages/pools/index.tsx
@@ -1,37 +1,58 @@
 import { Heading, Tabs, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
 
 import { CustomTab } from "lib/components/CustomTab";
+import { LoadingOverlay } from "lib/components/LoadingOverlay";
 import PageContainer from "lib/components/PageContainer";
 import { usePoolListCountByIsSupported } from "lib/services/poolService";
 
 import { SupportedSection } from "./components/supportedSection";
 import { UnsupportedSection } from "./components/unsupportedSection";
 
+enum TabIndex {
+  Supported,
+  Unsupported,
+}
+
 export const PoolIndex = () => {
-  const { data: supportedPoolCount } = usePoolListCountByIsSupported(
-    true,
-    "all",
-    false,
-    ""
-  );
-  const { data: unsupportedPoolCount } = usePoolListCountByIsSupported(
-    false,
-    "all",
-    false,
-    ""
-  );
+  const [tabIndex, setTabIndex] = useState(TabIndex.Supported);
+
+  const { data: supportedPoolCount, isLoading: isLoadingSupported } =
+    usePoolListCountByIsSupported(true, "all", false, "");
+  const { data: unsupportedPoolCount, isLoading: isLoadingUnsupported } =
+    usePoolListCountByIsSupported(false, "all", false, "");
 
   const sectionHeaderId = "poolListTab";
 
+  useEffect(() => {
+    if (
+      supportedPoolCount !== undefined &&
+      unsupportedPoolCount !== undefined
+    ) {
+      if (supportedPoolCount === 0 && unsupportedPoolCount > 0)
+        setTabIndex(TabIndex.Unsupported);
+      else setTabIndex(TabIndex.Supported);
+    }
+  }, [supportedPoolCount, unsupportedPoolCount]);
+
+  if (isLoadingSupported || isLoadingUnsupported) return <LoadingOverlay />;
   return (
     <PageContainer>
       <Heading variant="h5" as="h5">
         Osmosis Pools
       </Heading>
-      <Tabs>
+      <Tabs index={tabIndex}>
         <TabList my={8} borderBottom="1px" borderColor="pebble.800">
-          <CustomTab count={supportedPoolCount ?? 0}>Pools</CustomTab>
-          <CustomTab count={unsupportedPoolCount ?? 0}>
+          <CustomTab
+            count={supportedPoolCount ?? 0}
+            onClick={() => setTabIndex(TabIndex.Supported)}
+          >
+            Pools
+          </CustomTab>
+          <CustomTab
+            count={unsupportedPoolCount ?? 0}
+            onClick={() => setTabIndex(TabIndex.Unsupported)}
+          >
             Pools with unsupported tokens
           </CustomTab>
         </TabList>

From b55bb6c100489186a987ca5ae0fb75e7508ec914 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 19 Apr 2023 14:53:39 +0700
Subject: [PATCH 026/354] fix: comment

---
 src/lib/pages/pool/utils.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/lib/pages/pool/utils.ts b/src/lib/pages/pool/utils.ts
index 270139272..e7cfab61b 100644
--- a/src/lib/pages/pool/utils.ts
+++ b/src/lib/pages/pool/utils.ts
@@ -1,8 +1,6 @@
 import { UndefinedTokenList } from "./components/constant";
 
 export const getUndefinedTokenIcon = (denom: string) => {
-  const index = denom.split("").reduce((v, c) => {
-    return v + c.charCodeAt(0);
-  }, 0);
+  const index = denom.split("").reduce((v, c) => v + c.charCodeAt(0), 0);
   return UndefinedTokenList[index % UndefinedTokenList.length];
 };

From 741c766fd7d1788c6d0fe36650720205b74629a4 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 19 Apr 2023 14:57:49 +0700
Subject: [PATCH 027/354] fix: comment

---
 src/lib/utils/formatter/token.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/lib/utils/formatter/token.ts b/src/lib/utils/formatter/token.ts
index 0c7a0d63d..1d80f3738 100644
--- a/src/lib/utils/formatter/token.ts
+++ b/src/lib/utils/formatter/token.ts
@@ -14,7 +14,16 @@ export const formatDemimal =
     delimiter: boolean;
   }) =>
   (n: BigSource, fallbackValue: string): string => {
-    const num = big(n).toFixed(decimalPoints, big.roundHalfUp);
+    // TODO: fix after having unit test for this fn
+    // const num = big(n).toFixed(decimalPoints, big.roundHalfUp);
+    const num = big(
+      big(n)
+        .mul(10 ** decimalPoints)
+        .toFixed()
+        .split(".")[0]
+    )
+      .div(10 ** decimalPoints)
+      .toFixed(decimalPoints);
     if (num === "NaN") return fallbackValue;
 
     const [i, d] = num.split(".");

From fd9a32b1b64ee86ef824f2f9b489bb2f207774e4 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 20 Apr 2023 12:40:17 +0700
Subject: [PATCH 028/354] fix: supported asset pool card

---
 src/lib/app-fns/explorer/index.ts             |  11 ++
 .../pools/components/FilterByPoolType.tsx     |   6 +-
 src/lib/pages/pools/components/PoolLogo.tsx   |   9 +-
 .../supportedSection/AllocationBadge.tsx      |  56 ++++++
 .../components/supportedSection/PoolCard.tsx  | 165 +++++++++---------
 .../supportedSection/SupportedPoolList.tsx    |   2 +-
 .../components/supportedSection/index.tsx     |   4 +-
 .../UnsupportedPoolCard.tsx                   |  31 ++--
 .../components/unsupportedSection/index.tsx   |   6 +-
 src/lib/pages/pools/index.tsx                 |   4 +-
 src/lib/services/expression/poolExpression.ts |   2 +-
 src/lib/services/poolService.ts               |   1 +
 src/lib/types/pool.ts                         |   2 +-
 src/lib/utils/formatter/index.ts              |   1 +
 14 files changed, 183 insertions(+), 117 deletions(-)
 create mode 100644 src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx

diff --git a/src/lib/app-fns/explorer/index.ts b/src/lib/app-fns/explorer/index.ts
index 993452e18..b26448734 100644
--- a/src/lib/app-fns/explorer/index.ts
+++ b/src/lib/app-fns/explorer/index.ts
@@ -53,3 +53,14 @@ export const getExplorerValidatorUrl = (chainName: string) => {
   }
   return `${explorerMap[chainName]}/${pathSuffix}`;
 };
+
+export const getPoolUrl = (chainName: string) => {
+  switch (chainName) {
+    case "osmosis":
+      return "https://app.osmosis.zone/pool";
+    case "osmosistestnet":
+      return "https://tesnet.osmosis.zone/pool";
+    default:
+      return "";
+  }
+};
diff --git a/src/lib/pages/pools/components/FilterByPoolType.tsx b/src/lib/pages/pools/components/FilterByPoolType.tsx
index 523470db2..f42e35396 100644
--- a/src/lib/pages/pools/components/FilterByPoolType.tsx
+++ b/src/lib/pages/pools/components/FilterByPoolType.tsx
@@ -20,18 +20,18 @@ interface FilterByPoolTypeProps {
 const options: PoolTypeOption[] = [
   {
     label: "All Pools",
-    value: "all",
+    value: "All",
     disabled: false,
   },
   {
     label: "Balancer Pools",
-    value: "balancer",
+    value: "Balancer",
     image: BalancerIcon,
     disabled: false,
   },
   {
     label: "StableSwap Pools",
-    value: "stableswap",
+    value: "Stableswap",
     image: StableswapIcon,
     disabled: false,
   },
diff --git a/src/lib/pages/pools/components/PoolLogo.tsx b/src/lib/pages/pools/components/PoolLogo.tsx
index 1dd1967d2..3a68efbe2 100644
--- a/src/lib/pages/pools/components/PoolLogo.tsx
+++ b/src/lib/pages/pools/components/PoolLogo.tsx
@@ -25,16 +25,17 @@ export const PoolLogo = ({ poolLiquidity }: PoolLogoProps) => {
               key={item.denom}
               boxSize={10}
               src={item.logo || getUndefinedTokenIcon(item.denom)}
-              zIndex={i * -1 + 2}
+              zIndex={2 - i}
             />
           ))}
           <Flex
-            width={10}
-            height={10}
+            minW={10}
+            minH={10}
             borderRadius="full"
             backgroundColor="pebble.700"
             alignItems="center"
             justifyContent="center"
+            marginLeft="-12px"
           >
             +{poolLiquidity.length - 2}
           </Flex>
@@ -45,7 +46,7 @@ export const PoolLogo = ({ poolLiquidity }: PoolLogoProps) => {
             key={asset.denom}
             boxSize={10}
             src={asset.logo || getUndefinedTokenIcon(asset.denom)}
-            zIndex={i * -1 + 2}
+            zIndex={2 - i}
           />
         ))
       )}
diff --git a/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
new file mode 100644
index 000000000..3f0447c6a
--- /dev/null
+++ b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
@@ -0,0 +1,56 @@
+import { Box, Flex, Image, Text } from "@chakra-ui/react";
+import type { Big } from "big.js";
+import big from "big.js";
+
+import { getUndefinedTokenIcon } from "../../utils";
+import type { Option, Token, U, USD } from "lib/types";
+import { getTokenLabel, formatPercentValue } from "lib/utils";
+
+interface AllocationBadgeProps {
+  denom?: string;
+  logo?: string;
+  symbol?: string;
+  amount: U<Token<Big>>;
+  value: Option<USD<Big>>;
+  liquidity: USD<Big>;
+  mode: string;
+}
+
+export const AllocationBadge = ({
+  denom,
+  logo,
+  symbol,
+  amount,
+  value,
+  liquidity,
+  mode,
+}: AllocationBadgeProps) => (
+  <Flex
+    bg="pebble.800"
+    px={3}
+    py={1}
+    border="1px solid"
+    borderColor="pebble.700"
+    borderRadius="8px"
+    transition="all .25s ease-in-out"
+    alignItems="center"
+    gap={2}
+  >
+    {denom && <Image boxSize={4} src={logo || getUndefinedTokenIcon(denom)} />}
+    <Box w="full" minW="50px">
+      <Text
+        variant="body3"
+        className="ellipsis"
+        color="text.dark"
+        fontWeight="600"
+      >
+        {denom ? symbol || getTokenLabel(denom) : "OTHERS"}
+      </Text>
+      <Text variant="body3" color="text.main">
+        {mode === "percent-value"
+          ? `${formatPercentValue((value ?? big(0)).div(liquidity).times(100))}`
+          : `${amount}`}
+      </Text>
+    </Box>
+  </Flex>
+);
diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index e8ae59c4a..fb837b825 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -1,14 +1,17 @@
-import { Box, Flex, IconButton, Text, Tooltip } from "@chakra-ui/react";
+import { Flex, IconButton, SimpleGrid, Text, Tooltip } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
 import type { Big } from "big.js";
 import big from "big.js";
 import Link from "next/link";
 
 import { PoolHeader } from "../PoolHeader";
+import { getPoolUrl } from "lib/app-fns/explorer";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
-import type { USD, Pool } from "lib/types";
-import { formatPrice, getTokenLabel } from "lib/utils";
-import { formatPercentValue } from "lib/utils/formatter/formatPercentValue";
+import type { USD, Pool, Token, U } from "lib/types";
+import { formatPrice } from "lib/utils";
+
+import { AllocationBadge } from "./AllocationBadge";
 
 const pebble700 = "pebble.700";
 
@@ -23,6 +26,7 @@ export const PoolCard = ({
   poolId,
   mode = "percent-value",
 }: PoolCardProps) => {
+  const { currentChainName } = useWallet();
   const navigate = useInternalNavigate();
   const handleOnClick = () => {
     navigate({ pathname: `/pools/[poolId]`, query: { poolId } });
@@ -45,7 +49,10 @@ export const PoolCard = ({
       cursor="pointer"
       sx={{
         _hover: {
-          "> div:last-child > div": { backgroundColor: pebble700 },
+          "> div:last-child > div": {
+            borderColor: "pebble.600",
+            backgroundColor: pebble700,
+          },
           backgroundColor: "pebble.800",
         },
       }}
@@ -57,48 +64,28 @@ export const PoolCard = ({
           poolType={item.type}
           poolLiquidity={item.poolLiquidity}
         />
-        <Flex w="72px" justifyContent="flex-end">
-          <Tooltip
-            hasArrow
-            label="See in osmosis.zone"
-            placement="top"
-            bg="honeydew.darker"
-            maxW="240px"
-          >
-            <Link
-              href={`https://app.osmosis.zone/pool/${item.id}`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <IconButton
-                fontSize="24px"
-                variant="none"
-                aria-label="external"
-                _hover={{ backgroundColor: pebble700 }}
-                color="pebble.600"
-                icon={<CustomIcon name="launch" />}
-              />
-            </Link>
-          </Tooltip>
-          <Tooltip
-            hasArrow
-            label="Pin to top"
-            placement="top"
-            bg="honeydew.darker"
-            maxW="240px"
+        <Tooltip
+          hasArrow
+          label="See in osmosis.zone"
+          placement="top"
+          bg="honeydew.darker"
+          maxW="240px"
+        >
+          <Link
+            href={`${getPoolUrl(currentChainName)}/${item.id}`}
+            target="_blank"
+            rel="noopener noreferrer"
           >
-            <Flex>
-              <IconButton
-                fontSize="24px"
-                _hover={{ backgroundColor: pebble700 }}
-                variant="none"
-                aria-label="save"
-                color="pebble.600"
-                icon={<CustomIcon name="bookmark" />}
-              />
-            </Flex>
-          </Tooltip>
-        </Flex>
+            <IconButton
+              fontSize="24px"
+              variant="none"
+              aria-label="external"
+              _hover={{ backgroundColor: pebble700 }}
+              color="pebble.600"
+              icon={<CustomIcon name="launch" />}
+            />
+          </Link>
+        </Tooltip>
       </Flex>
       <Flex justifyContent="space-between">
         <Flex alignItems="center">
@@ -110,41 +97,57 @@ export const PoolCard = ({
           {formatPrice(liquidity)}
         </Text>
       </Flex>
-      <Flex
-        gap="2px"
-        css={{
-          "div:first-of-type": {
-            borderRadius: "4px 0px 0px 4px",
-          },
-          "div:last-child": {
-            borderRadius: "0px 4px 4px 0px",
-          },
-        }}
-      >
-        {item.poolLiquidity.map((asset) => (
-          <Flex
-            key={asset.denom}
-            bg="pebble.800"
-            px={3}
-            py={1}
-            w="full"
-            transition="all .25s ease-in-out"
-          >
-            <Box>
-              <Text variant="body3" color="text.dark" fontWeight="600">
-                {asset.symbol || getTokenLabel(asset.denom)}
-              </Text>
-              <Text variant="body3" color="text.main">
-                {mode === "percent-value"
-                  ? `${formatPercentValue(
-                      (asset.value ?? big(0)).div(liquidity).times(100)
-                    )}`
-                  : `${asset.amount}`}
-              </Text>
-            </Box>
-          </Flex>
-        ))}
-      </Flex>
+      <SimpleGrid columns={4} gap={2}>
+        <>
+          {item.poolLiquidity.slice(0, 3).map((asset) => (
+            <AllocationBadge
+              key={asset.denom}
+              denom={asset.denom}
+              logo={asset.logo}
+              symbol={asset.symbol}
+              amount={asset.amount}
+              value={asset.value}
+              liquidity={liquidity}
+              mode={mode}
+            />
+          ))}
+          {item.poolLiquidity.length >= 4 &&
+            (item.poolLiquidity.length === 4 ? (
+              <AllocationBadge
+                key={item.poolLiquidity[3].denom}
+                denom={item.poolLiquidity[3].denom}
+                logo={item.poolLiquidity[3].logo}
+                symbol={item.poolLiquidity[3].symbol}
+                amount={item.poolLiquidity[3].amount}
+                value={item.poolLiquidity[3].value}
+                liquidity={liquidity}
+                mode={mode}
+              />
+            ) : (
+              <AllocationBadge
+                key="OTHERS"
+                amount={
+                  item.poolLiquidity
+                    .slice(3)
+                    .reduce(
+                      (prev, asset) => prev.add(asset.amount),
+                      big(0)
+                    ) as U<Token<Big>>
+                }
+                value={
+                  item.poolLiquidity
+                    .slice(3)
+                    .reduce(
+                      (prev, asset) => prev.add(asset.value ?? big(0)),
+                      big(0)
+                    ) as USD<Big>
+                }
+                liquidity={liquidity}
+                mode={mode}
+              />
+            ))}
+        </>
+      </SimpleGrid>
     </Flex>
   );
 };
diff --git a/src/lib/pages/pools/components/supportedSection/SupportedPoolList.tsx b/src/lib/pages/pools/components/supportedSection/SupportedPoolList.tsx
index 960e2ca1b..c2581c1ec 100644
--- a/src/lib/pages/pools/components/supportedSection/SupportedPoolList.tsx
+++ b/src/lib/pages/pools/components/supportedSection/SupportedPoolList.tsx
@@ -28,7 +28,7 @@ export const SupportedPoolList = ({
     );
 
   return (
-    <SimpleGrid columns={{ sm: 1, md: 2 }} spacing={4} w="full" mt={4}>
+    <SimpleGrid columns={{ md: 1, lg: 2 }} spacing={4} mt={4}>
       {pools.map((item) => (
         <PoolCard key={item.id} item={item} poolId={item.id} mode={mode} />
       ))}
diff --git a/src/lib/pages/pools/components/supportedSection/index.tsx b/src/lib/pages/pools/components/supportedSection/index.tsx
index f2e9c4bca..1ccfe698b 100644
--- a/src/lib/pages/pools/components/supportedSection/index.tsx
+++ b/src/lib/pages/pools/components/supportedSection/index.tsx
@@ -53,7 +53,7 @@ export const SupportedSection = ({
 
   const { watch, setValue } = useForm<PoolFilterState>({
     defaultValues: {
-      poolTypeValue: "all",
+      poolTypeValue: "All",
       keyword: "",
       isSuperfluidOnly: false,
     },
@@ -133,7 +133,7 @@ export const SupportedSection = ({
             size="lg"
           />
           <FilterByPoolType
-            initialSelected="all"
+            initialSelected="All"
             setPoolTypeValue={(newVal: PoolTypeFilter) => {
               if (newVal === poolTypeValue) return;
               setValue("poolTypeValue", newVal);
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index ee173ac99..4690a672f 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -10,14 +10,15 @@ import {
   Image,
   Button,
 } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
 import Link from "next/link";
 
 import { getUndefinedTokenIcon } from "../../utils";
 import { PoolHeader } from "../PoolHeader";
+import { getPoolUrl } from "lib/app-fns/explorer";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import type { Pool } from "lib/types";
-import { getTokenLabel } from "lib/utils";
 
 interface PoolCardProps {
   item: Pool;
@@ -35,6 +36,7 @@ const StyledIconButton = chakra(IconButton, {
 const pebble700 = "pebble.700";
 
 export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
+  const { currentChainName } = useWallet();
   const navigate = useInternalNavigate();
   const handleOnClick = () => {
     navigate({ pathname: `/pools/[poolId]`, query: { poolId } });
@@ -68,7 +70,7 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
                     maxW="240px"
                   >
                     <Link
-                      href={`https://app.osmosis.zone/pool/${item.id}`}
+                      href={`${getPoolUrl(currentChainName)}/${item.id}`}
                       target="_blank"
                       rel="noopener noreferrer"
                     >
@@ -80,22 +82,6 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
                       />
                     </Link>
                   </Tooltip>
-                  <Tooltip
-                    hasArrow
-                    label="Pin to top"
-                    placement="top"
-                    bg="honeydew.darker"
-                    maxW="240px"
-                  >
-                    <Flex>
-                      <StyledIconButton
-                        _hover={{ backgroundColor: pebble700 }}
-                        variant="none"
-                        aria-label="save"
-                        icon={<CustomIcon name="bookmark" />}
-                      />
-                    </Flex>
-                  </Tooltip>
                   {isExpanded ? (
                     <StyledIconButton
                       variant="none"
@@ -133,7 +119,7 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
                         boxSize={6}
                         src={asset.logo || getUndefinedTokenIcon(asset.denom)}
                       />
-                      <Flex>{asset.symbol || getTokenLabel(asset.denom)}</Flex>
+                      <Flex>{asset.symbol || asset.denom}</Flex>
                     </Flex>
                   ))}
                 </Flex>
@@ -142,6 +128,13 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
                     View Pool Details
                   </Button>
                   <Button
+                    onClick={() =>
+                      window.open(
+                        `${getPoolUrl(currentChainName)}/${item.id}`,
+                        "_blank",
+                        "noopener,noreferrer"
+                      )
+                    }
                     size="sm"
                     variant="outline-primary"
                     rightIcon={
diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
index 8a409e95a..ec7a83f95 100644
--- a/src/lib/pages/pools/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -35,14 +35,14 @@ export const UnsupportedSection = ({
 }: UnsupportedSectionProp) => {
   const { watch, setValue } = useForm<PoolFilterState>({
     defaultValues: {
-      poolTypeValue: "all",
+      poolTypeValue: "All",
       keyword: "",
       isSuperfluidOnly: false,
     },
   });
   const { poolTypeValue, keyword, isSuperfluidOnly } = watch();
   const { data: totalData = 0, refetch: refetchCount } =
-    usePoolListCountByIsSupported(false, "all", false, "");
+    usePoolListCountByIsSupported(false, "All", false, "");
 
   const [showNewest, setShowNewest] = useState(true);
 
@@ -97,7 +97,7 @@ export const UnsupportedSection = ({
             size="lg"
           />
           <FilterByPoolType
-            initialSelected="all"
+            initialSelected="All"
             setPoolTypeValue={(newVal: PoolTypeFilter) => {
               if (newVal === poolTypeValue) return;
               setValue("poolTypeValue", newVal);
diff --git a/src/lib/pages/pools/index.tsx b/src/lib/pages/pools/index.tsx
index 72feac033..5e86680e1 100644
--- a/src/lib/pages/pools/index.tsx
+++ b/src/lib/pages/pools/index.tsx
@@ -18,9 +18,9 @@ export const PoolIndex = () => {
   const [tabIndex, setTabIndex] = useState(TabIndex.Supported);
 
   const { data: supportedPoolCount, isLoading: isLoadingSupported } =
-    usePoolListCountByIsSupported(true, "all", false, "");
+    usePoolListCountByIsSupported(true, "All", false, "");
   const { data: unsupportedPoolCount, isLoading: isLoadingUnsupported } =
-    usePoolListCountByIsSupported(false, "all", false, "");
+    usePoolListCountByIsSupported(false, "All", false, "");
 
   const sectionHeaderId = "poolListTab";
 
diff --git a/src/lib/services/expression/poolExpression.ts b/src/lib/services/expression/poolExpression.ts
index cc0a35f83..3028b7045 100644
--- a/src/lib/services/expression/poolExpression.ts
+++ b/src/lib/services/expression/poolExpression.ts
@@ -12,7 +12,7 @@ export const usePoolExpression = (
   useMemo(
     () => ({
       is_supported: { _eq: isSupported },
-      type: poolType !== "all" ? { _eq: poolType } : {},
+      type: poolType !== "All" ? { _eq: `${poolType}` } : {},
       is_superfluid: isSuperfluidOnly ? { _eq: true } : {},
       id: isPositiveInt(search) ? { _eq: Number(search) } : {},
     }),
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index 066ca1f85..4f172b055 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -64,6 +64,7 @@ export const usePoolListByIsSupported = (
     [
       "pool_list_by_is_supported",
       isSupported,
+      poolType,
       isSuperfluidOnly,
       search,
       order,
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index baa863af7..31a1868e3 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -3,7 +3,7 @@ import type { Big } from "big.js";
 
 import type { Addr, ContractAddr, Option, TokenWithValue } from "lib/types";
 
-export type PoolTypeFilter = "all" | "balancer" | "stableswap";
+export type PoolTypeFilter = "All" | "Balancer" | "Stableswap";
 
 export interface PoolWeight<T extends string | Big = Big> {
   denom: string;
diff --git a/src/lib/utils/formatter/index.ts b/src/lib/utils/formatter/index.ts
index ad0a3ee3b..39c98fc82 100644
--- a/src/lib/utils/formatter/index.ts
+++ b/src/lib/utils/formatter/index.ts
@@ -5,5 +5,6 @@ export * from "./convertTitle";
 export * from "./camelToSnake";
 export * from "./snakeToCamel";
 export * from "./formatBalanceWithDenom";
+export * from "./formatPercentValue";
 export * from "./tokenType";
 export * from "./token";

From af8b63fedd80b74a229d082ce194f032e358f589 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 20 Apr 2023 12:54:14 +0700
Subject: [PATCH 029/354] fix: condition logic

---
 .../components/supportedSection/PoolCard.tsx  | 61 ++++++++-----------
 1 file changed, 26 insertions(+), 35 deletions(-)

diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index fb837b825..6c2288cd9 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -36,6 +36,7 @@ export const PoolCard = ({
     (total, asset) => total.add(asset.value ?? big(0)) as USD<Big>,
     big(0) as USD<Big>
   );
+  const is4Assets = item.poolLiquidity.length === 4;
 
   return (
     <Flex
@@ -111,41 +112,31 @@ export const PoolCard = ({
               mode={mode}
             />
           ))}
-          {item.poolLiquidity.length >= 4 &&
-            (item.poolLiquidity.length === 4 ? (
-              <AllocationBadge
-                key={item.poolLiquidity[3].denom}
-                denom={item.poolLiquidity[3].denom}
-                logo={item.poolLiquidity[3].logo}
-                symbol={item.poolLiquidity[3].symbol}
-                amount={item.poolLiquidity[3].amount}
-                value={item.poolLiquidity[3].value}
-                liquidity={liquidity}
-                mode={mode}
-              />
-            ) : (
-              <AllocationBadge
-                key="OTHERS"
-                amount={
-                  item.poolLiquidity
-                    .slice(3)
-                    .reduce(
-                      (prev, asset) => prev.add(asset.amount),
-                      big(0)
-                    ) as U<Token<Big>>
-                }
-                value={
-                  item.poolLiquidity
-                    .slice(3)
-                    .reduce(
-                      (prev, asset) => prev.add(asset.value ?? big(0)),
-                      big(0)
-                    ) as USD<Big>
-                }
-                liquidity={liquidity}
-                mode={mode}
-              />
-            ))}
+          {item.poolLiquidity.length >= 4 && (
+            <AllocationBadge
+              key="OTHERS"
+              denom={is4Assets ? item.poolLiquidity[3].denom : undefined}
+              logo={is4Assets ? item.poolLiquidity[3].logo : undefined}
+              symbol={is4Assets ? item.poolLiquidity[3].symbol : undefined}
+              amount={
+                item.poolLiquidity
+                  .slice(3)
+                  .reduce((prev, asset) => prev.add(asset.amount), big(0)) as U<
+                  Token<Big>
+                >
+              }
+              value={
+                item.poolLiquidity
+                  .slice(3)
+                  .reduce(
+                    (prev, asset) => prev.add(asset.value ?? big(0)),
+                    big(0)
+                  ) as USD<Big>
+              }
+              liquidity={liquidity}
+              mode={mode}
+            />
+          )}
         </>
       </SimpleGrid>
     </Flex>

From 478c09805fcc4a431b718832a7dc39008c4730a1 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 20 Apr 2023 13:22:51 +0700
Subject: [PATCH 030/354] fix: acceptance test

---
 src/lib/app-fns/explorer/index.ts             |  2 +-
 src/lib/pages/pools/components/PoolHeader.tsx | 51 +++++++++----------
 .../components/supportedSection/PoolCard.tsx  |  1 +
 .../components/supportedSection/index.tsx     | 13 +++--
 .../UnsupportedPoolCard.tsx                   |  1 +
 src/lib/services/poolService.ts               |  1 +
 6 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/src/lib/app-fns/explorer/index.ts b/src/lib/app-fns/explorer/index.ts
index b26448734..74b94a010 100644
--- a/src/lib/app-fns/explorer/index.ts
+++ b/src/lib/app-fns/explorer/index.ts
@@ -59,7 +59,7 @@ export const getPoolUrl = (chainName: string) => {
     case "osmosis":
       return "https://app.osmosis.zone/pool";
     case "osmosistestnet":
-      return "https://tesnet.osmosis.zone/pool";
+      return "https://testnet.osmosis.zone/pool";
     default:
       return "";
   }
diff --git a/src/lib/pages/pools/components/PoolHeader.tsx b/src/lib/pages/pools/components/PoolHeader.tsx
index 3c5e68b0a..66868493c 100644
--- a/src/lib/pages/pools/components/PoolHeader.tsx
+++ b/src/lib/pages/pools/components/PoolHeader.tsx
@@ -23,34 +23,29 @@ export const PoolHeader = ({
     <Flex alignItems="center" gap={4}>
       <PoolLogo poolLiquidity={poolLiquidity} />
       <Box>
-        <Flex gap={1}>
-          <Flex
-            gap={1}
-            css={{
-              "div:last-child > #separator": {
-                display: "none",
-              },
-            }}
-          >
-            {poolLiquidity.slice(0, 4).map((item) => (
-              <Flex key={item.denom} gap={1}>
-                <Heading as="h6" fontWeight="600" variant="h6">
-                  {item.symbol || getTokenLabel(item.denom)}
-                </Heading>
-                <Heading
-                  as="h6"
-                  id="separator"
-                  fontWeight="600"
-                  variant="h6"
-                  color="honeydew.main"
-                >
-                  /
-                </Heading>
-              </Flex>
-            ))}
-          </Flex>
+        <Flex gap={1} flexWrap="wrap">
+          <Heading as="h6" fontWeight="600" variant="h6">
+            {poolLiquidity[0].symbol || getTokenLabel(poolLiquidity[0].denom)}
+          </Heading>
+          {poolLiquidity.slice(1, 4).map((item) => (
+            <Flex key={item.denom} gap={1}>
+              <Heading
+                as="h6"
+                id="separator"
+                fontWeight="600"
+                variant="h6"
+                color="honeydew.main"
+              >
+                /
+              </Heading>
+              <Heading as="h6" fontWeight="600" variant="h6">
+                {item.symbol || getTokenLabel(item.denom)}
+              </Heading>
+            </Flex>
+          ))}
+
           {poolLiquidity.length > 4 && (
-            <>
+            <Flex gap={1}>
               <Heading
                 as="h6"
                 fontWeight="600"
@@ -62,7 +57,7 @@ export const PoolHeader = ({
               <Heading as="h6" fontWeight="600" variant="h6">
                 + {poolLiquidity.length - 4}
               </Heading>
-            </>
+            </Flex>
           )}
         </Flex>
         <Flex alignItems="center" gap={2} mt={1}>
diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index 6c2288cd9..453373313 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -74,6 +74,7 @@ export const PoolCard = ({
         >
           <Link
             href={`${getPoolUrl(currentChainName)}/${item.id}`}
+            onClick={(e) => e.stopPropagation()}
             target="_blank"
             rel="noopener noreferrer"
           >
diff --git a/src/lib/pages/pools/components/supportedSection/index.tsx b/src/lib/pages/pools/components/supportedSection/index.tsx
index 1ccfe698b..8262c0d64 100644
--- a/src/lib/pages/pools/components/supportedSection/index.tsx
+++ b/src/lib/pages/pools/components/supportedSection/index.tsx
@@ -127,14 +127,16 @@ export const SupportedSection = ({
           <InputWithIcon
             placeholder="Search with Pool ID, Symbol or Token ID"
             value={keyword}
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-              setValue("keyword", e.target.value)
-            }
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              setCurrentPage(1);
+              setValue("keyword", e.target.value);
+            }}
             size="lg"
           />
           <FilterByPoolType
             initialSelected="All"
             setPoolTypeValue={(newVal: PoolTypeFilter) => {
+              setCurrentPage(1);
               if (newVal === poolTypeValue) return;
               setValue("poolTypeValue", newVal);
             }}
@@ -144,7 +146,10 @@ export const SupportedSection = ({
               <Switch
                 size="md"
                 defaultChecked={isSuperfluidOnly}
-                onChange={(e) => setValue("isSuperfluidOnly", e.target.checked)}
+                onChange={(e) => {
+                  setCurrentPage(1);
+                  setValue("isSuperfluidOnly", e.target.checked);
+                }}
               />
               <FormLabel mb="0" cursor="pointer">
                 <Text display="flex" gap={2} alignItems="center">
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index 4690a672f..e9124e7ae 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -71,6 +71,7 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
                   >
                     <Link
                       href={`${getPoolUrl(currentChainName)}/${item.id}`}
+                      onClick={(e) => e.stopPropagation()}
                       target="_blank"
                       rel="noopener noreferrer"
                     >
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index 4f172b055..b594621b3 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -110,6 +110,7 @@ export const usePoolListCountByIsSupported = (
     [
       "pool_list_count_by_is_supported",
       isSupported,
+      poolType,
       isSuperfluidOnly,
       search,
       indexerGraphClient,

From 073444dcaf7dd1102c5638276b9856ba17c065be Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 20 Apr 2023 14:53:57 +0700
Subject: [PATCH 031/354] fix: unsupported card

---
 .../supportedSection/AllocationBadge.tsx      |  8 ++++++--
 .../UnsupportedPoolCard.tsx                   | 20 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
index 3f0447c6a..f4a711ee9 100644
--- a/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
+++ b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
@@ -4,7 +4,11 @@ import big from "big.js";
 
 import { getUndefinedTokenIcon } from "../../utils";
 import type { Option, Token, U, USD } from "lib/types";
-import { getTokenLabel, formatPercentValue } from "lib/utils";
+import {
+  getTokenLabel,
+  formatPercentValue,
+  formatUTokenWithPrecision,
+} from "lib/utils";
 
 interface AllocationBadgeProps {
   denom?: string;
@@ -49,7 +53,7 @@ export const AllocationBadge = ({
       <Text variant="body3" color="text.main">
         {mode === "percent-value"
           ? `${formatPercentValue((value ?? big(0)).div(liquidity).times(100))}`
-          : `${amount}`}
+          : `${formatUTokenWithPrecision(amount, 0)}`}
       </Text>
     </Box>
   </Flex>
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index e9124e7ae..3c18de098 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -17,8 +17,10 @@ import { getUndefinedTokenIcon } from "../../utils";
 import { PoolHeader } from "../PoolHeader";
 import { getPoolUrl } from "lib/app-fns/explorer";
 import { useInternalNavigate } from "lib/app-provider";
+import { Copier } from "lib/components/copy";
 import { CustomIcon } from "lib/components/icon";
 import type { Pool } from "lib/types";
+import { formatDemimal } from "lib/utils";
 
 interface PoolCardProps {
   item: Pool;
@@ -44,6 +46,7 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
 
   return (
     <AccordionItem
+      className="copier-wrapper"
       mt={4}
       bg="pebble.900"
       _hover={{ bg: "pebble.800" }}
@@ -115,12 +118,27 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
               <Flex gap={4} flexDirection="column">
                 <Flex gap={2} flexDirection="column">
                   {item.poolLiquidity.map((asset) => (
-                    <Flex key={asset.denom} gap={3}>
+                    <Flex key={asset.denom} gap={3} alignItems="center">
                       <Image
                         boxSize={6}
                         src={asset.logo || getUndefinedTokenIcon(asset.denom)}
                       />
+                      <Text variant="body2" color="text.main" fontWeight="bold">
+                        {formatDemimal({ decimalPoints: 0, delimiter: true })(
+                          asset.amount,
+                          "0"
+                        )}
+                      </Text>
                       <Flex>{asset.symbol || asset.denom}</Flex>
+                      <Copier
+                        type={
+                          asset.symbol ? "supported_asset" : "unsupported_asset"
+                        }
+                        value={asset.denom}
+                        copyLabel="Token ID Copied!"
+                        display="none"
+                        ml="1px"
+                      />
                     </Flex>
                   ))}
                 </Flex>

From 52be761dbb787e5f614620a916e1aa4b6670f0e6 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 20 Apr 2023 14:59:10 +0700
Subject: [PATCH 032/354] fix: change unsupported token copier behavior

---
 .../components/unsupportedSection/UnsupportedPoolCard.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index 3c18de098..2ca769a39 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -46,7 +46,6 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
 
   return (
     <AccordionItem
-      className="copier-wrapper"
       mt={4}
       bg="pebble.900"
       _hover={{ bg: "pebble.800" }}
@@ -118,7 +117,12 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
               <Flex gap={4} flexDirection="column">
                 <Flex gap={2} flexDirection="column">
                   {item.poolLiquidity.map((asset) => (
-                    <Flex key={asset.denom} gap={3} alignItems="center">
+                    <Flex
+                      className="copier-wrapper"
+                      key={asset.denom}
+                      gap={3}
+                      alignItems="center"
+                    >
                       <Image
                         boxSize={6}
                         src={asset.logo || getUndefinedTokenIcon(asset.denom)}

From 416da1a71e3ba3389053fa43ccd414ced98ce831 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 20 Apr 2023 15:38:41 +0700
Subject: [PATCH 033/354] fix: incorrect pool amount

---
 .../pools/components/supportedSection/AllocationBadge.tsx     | 4 +++-
 src/lib/pages/pools/components/supportedSection/PoolCard.tsx  | 4 ++++
 .../components/unsupportedSection/UnsupportedPoolCard.tsx     | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
index f4a711ee9..6dd01e966 100644
--- a/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
+++ b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
@@ -14,6 +14,7 @@ interface AllocationBadgeProps {
   denom?: string;
   logo?: string;
   symbol?: string;
+  precision?: number;
   amount: U<Token<Big>>;
   value: Option<USD<Big>>;
   liquidity: USD<Big>;
@@ -24,6 +25,7 @@ export const AllocationBadge = ({
   denom,
   logo,
   symbol,
+  precision,
   amount,
   value,
   liquidity,
@@ -53,7 +55,7 @@ export const AllocationBadge = ({
       <Text variant="body3" color="text.main">
         {mode === "percent-value"
           ? `${formatPercentValue((value ?? big(0)).div(liquidity).times(100))}`
-          : `${formatUTokenWithPrecision(amount, 0)}`}
+          : `${formatUTokenWithPrecision(amount, precision || 0)}`}
       </Text>
     </Box>
   </Flex>
diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index 453373313..c402221f1 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -107,6 +107,7 @@ export const PoolCard = ({
               denom={asset.denom}
               logo={asset.logo}
               symbol={asset.symbol}
+              precision={asset.precision}
               amount={asset.amount}
               value={asset.value}
               liquidity={liquidity}
@@ -119,6 +120,9 @@ export const PoolCard = ({
               denom={is4Assets ? item.poolLiquidity[3].denom : undefined}
               logo={is4Assets ? item.poolLiquidity[3].logo : undefined}
               symbol={is4Assets ? item.poolLiquidity[3].symbol : undefined}
+              precision={
+                is4Assets ? item.poolLiquidity[3].precision : undefined
+              }
               amount={
                 item.poolLiquidity
                   .slice(3)
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index 2ca769a39..94cda0845 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -63,7 +63,7 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
                   poolType={item.type}
                   poolLiquidity={item.poolLiquidity}
                 />
-                <Flex w="128px">
+                <Flex>
                   <Tooltip
                     hasArrow
                     label="See in osmosis.zone"

From c573000b63e93e85ef4c3c38624259ad27113b75 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 20 Apr 2023 15:44:51 +0700
Subject: [PATCH 034/354] fix: amount precision

---
 src/lib/pages/pools/components/FilterByPoolType.tsx       | 6 +++---
 src/lib/pages/pools/components/PoolHeader.tsx             | 8 +++++---
 src/lib/pages/pools/components/supportedSection/index.tsx | 4 ++--
 .../components/unsupportedSection/UnsupportedPoolCard.tsx | 6 +++---
 .../pages/pools/components/unsupportedSection/index.tsx   | 4 ++--
 src/lib/pages/pools/constant.ts                           | 8 ++++----
 src/lib/pages/pools/utils.ts                              | 4 ++--
 7 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/lib/pages/pools/components/FilterByPoolType.tsx b/src/lib/pages/pools/components/FilterByPoolType.tsx
index f42e35396..3faf828fc 100644
--- a/src/lib/pages/pools/components/FilterByPoolType.tsx
+++ b/src/lib/pages/pools/components/FilterByPoolType.tsx
@@ -1,6 +1,6 @@
 import { Grid } from "@chakra-ui/react";
 
-import { BalancerIcon, StableswapIcon } from "../constant";
+import { BALANCER_ICON, STABLESWAP_ICON } from "../constant";
 import { SelectInput } from "lib/components/forms";
 import type { PoolTypeFilter } from "lib/types";
 
@@ -26,13 +26,13 @@ const options: PoolTypeOption[] = [
   {
     label: "Balancer Pools",
     value: "Balancer",
-    image: BalancerIcon,
+    image: BALANCER_ICON,
     disabled: false,
   },
   {
     label: "StableSwap Pools",
     value: "Stableswap",
-    image: StableswapIcon,
+    image: STABLESWAP_ICON,
     disabled: false,
   },
 ];
diff --git a/src/lib/pages/pools/components/PoolHeader.tsx b/src/lib/pages/pools/components/PoolHeader.tsx
index 66868493c..835d4bdf2 100644
--- a/src/lib/pages/pools/components/PoolHeader.tsx
+++ b/src/lib/pages/pools/components/PoolHeader.tsx
@@ -1,6 +1,6 @@
 import { Flex, Heading, Text, Box, Image } from "@chakra-ui/react";
 
-import { BalancerIcon, StableswapIcon, SuperfluidIcon } from "../constant";
+import { BALANCER_ICON, STABLESWAP_ICON, SUPERFLUID_ICON } from "../constant";
 import type { PoolDetail } from "lib/types/pool";
 import { getTokenLabel } from "lib/utils";
 
@@ -75,7 +75,9 @@ export const PoolHeader = ({
               <Flex alignItems="center" gap={1}>
                 <Image
                   boxSize={4}
-                  src={poolType === "Balancer" ? BalancerIcon : StableswapIcon}
+                  src={
+                    poolType === "Balancer" ? BALANCER_ICON : STABLESWAP_ICON
+                  }
                 />
                 <Text variant="body2" color="text.dark">
                   {poolType === "Balancer"
@@ -94,7 +96,7 @@ export const PoolHeader = ({
                 h="6px"
               />
               <Flex alignItems="center" gap={1}>
-                <Image boxSize={4} src={SuperfluidIcon} />
+                <Image boxSize={4} src={SUPERFLUID_ICON} />
                 <Text variant="body2" color="text.dark">
                   Superfluid
                 </Text>
diff --git a/src/lib/pages/pools/components/supportedSection/index.tsx b/src/lib/pages/pools/components/supportedSection/index.tsx
index 8262c0d64..c62e286fb 100644
--- a/src/lib/pages/pools/components/supportedSection/index.tsx
+++ b/src/lib/pages/pools/components/supportedSection/index.tsx
@@ -14,7 +14,7 @@ import type { ChangeEvent } from "react";
 import { useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { SuperfluidIcon } from "../../constant";
+import { SUPERFLUID_ICON } from "../../constant";
 import { usePools } from "../../data";
 import type { PoolFilterState } from "../../types";
 import { FilterByPoolType } from "../FilterByPoolType";
@@ -154,7 +154,7 @@ export const SupportedSection = ({
               <FormLabel mb="0" cursor="pointer">
                 <Text display="flex" gap={2} alignItems="center">
                   Show only
-                  <Image boxSize={4} src={SuperfluidIcon} />
+                  <Image boxSize={4} src={SUPERFLUID_ICON} />
                   Superfluid
                 </Text>
               </FormLabel>
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index 94cda0845..d3d1101d8 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -20,7 +20,7 @@ import { useInternalNavigate } from "lib/app-provider";
 import { Copier } from "lib/components/copy";
 import { CustomIcon } from "lib/components/icon";
 import type { Pool } from "lib/types";
-import { formatDemimal } from "lib/utils";
+import { formatUTokenWithPrecision } from "lib/utils";
 
 interface PoolCardProps {
   item: Pool;
@@ -128,9 +128,9 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
                         src={asset.logo || getUndefinedTokenIcon(asset.denom)}
                       />
                       <Text variant="body2" color="text.main" fontWeight="bold">
-                        {formatDemimal({ decimalPoints: 0, delimiter: true })(
+                        {formatUTokenWithPrecision(
                           asset.amount,
-                          "0"
+                          asset.precision || 0
                         )}
                       </Text>
                       <Flex>{asset.symbol || asset.denom}</Flex>
diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
index ec7a83f95..d249aaae3 100644
--- a/src/lib/pages/pools/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -13,7 +13,7 @@ import type { ChangeEvent } from "react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { SuperfluidIcon } from "../../constant";
+import { SUPERFLUID_ICON } from "../../constant";
 import { usePools } from "../../data";
 import type { PoolFilterState } from "../../types";
 import { FilterByPoolType } from "../FilterByPoolType";
@@ -113,7 +113,7 @@ export const UnsupportedSection = ({
               <FormLabel mb="0" cursor="pointer">
                 <Text display="flex" gap={2} alignItems="center">
                   Show only
-                  <Image boxSize={4} src={SuperfluidIcon} />
+                  <Image boxSize={4} src={SUPERFLUID_ICON} />
                   Superfluid
                 </Text>
               </FormLabel>
diff --git a/src/lib/pages/pools/constant.ts b/src/lib/pages/pools/constant.ts
index 9072d7093..220cb4e81 100644
--- a/src/lib/pages/pools/constant.ts
+++ b/src/lib/pages/pools/constant.ts
@@ -1,13 +1,13 @@
-export const UndefinedTokenList = [
+export const UNDEFINED_TOKEN_LIST = [
   "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet.svg",
   "https://assets.alleslabs.dev/webapp-assets/asset/undefined-white.svg",
   "https://assets.alleslabs.dev/webapp-assets/asset/undefined-violet-light.svg",
 ];
 
-export const SuperfluidIcon =
+export const SUPERFLUID_ICON =
   "https://assets.alleslabs.dev/webapp-assets/pool/pool-superfluid.svg";
 
-export const BalancerIcon =
+export const BALANCER_ICON =
   "https://assets.alleslabs.dev/webapp-assets/pool/pool-balancer.svg";
-export const StableswapIcon =
+export const STABLESWAP_ICON =
   "https://assets.alleslabs.dev/webapp-assets/pool/pool-stableswap.svg";
diff --git a/src/lib/pages/pools/utils.ts b/src/lib/pages/pools/utils.ts
index 95e1ef3ad..fb4528a83 100644
--- a/src/lib/pages/pools/utils.ts
+++ b/src/lib/pages/pools/utils.ts
@@ -1,6 +1,6 @@
-import { UndefinedTokenList } from "./constant";
+import { UNDEFINED_TOKEN_LIST } from "./constant";
 
 export const getUndefinedTokenIcon = (denom: string) => {
   const index = denom.split("").reduce((v, c) => v + c.charCodeAt(0), 0);
-  return UndefinedTokenList[index % UndefinedTokenList.length];
+  return UNDEFINED_TOKEN_LIST[index % UNDEFINED_TOKEN_LIST.length];
 };

From a3083e93d80bfd2a7985908e202c56c01e540476 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 20 Apr 2023 17:55:07 +0700
Subject: [PATCH 035/354] fix: simulate function

---
 src/lib/app-provider/queries/simulateFee.ts | 65 ++++++++++++++++-
 src/lib/components/upload/UploadSection.tsx | 81 ++++++++++++---------
 2 files changed, 110 insertions(+), 36 deletions(-)

diff --git a/src/lib/app-provider/queries/simulateFee.ts b/src/lib/app-provider/queries/simulateFee.ts
index a7980b551..b718bd2ef 100644
--- a/src/lib/app-provider/queries/simulateFee.ts
+++ b/src/lib/app-provider/queries/simulateFee.ts
@@ -3,7 +3,15 @@ import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 
 import { useDummyWallet } from "../hooks";
-import type { ComposedMsg, Gas } from "lib/types";
+import type {
+  AccessType,
+  Addr,
+  ComposedMsg,
+  Gas,
+  HumanAddr,
+  Option,
+} from "lib/types";
+import { composeStoreCodeMsg } from "lib/utils";
 
 interface SimulateQueryParams {
   enabled: boolean;
@@ -59,3 +67,58 @@ export const useSimulateFeeQuery = ({
     onError,
   });
 };
+
+interface SimulateQueryParamsForStoreCode {
+  enabled: boolean;
+  wasmFile: Option<File>;
+  permission: AccessType;
+  addresses: Record<"address", Addr>[];
+  onSuccess?: (gas: Gas<number> | undefined) => void;
+  onError?: (err: Error) => void;
+}
+
+export const useSimulateFeeForStoreCode = ({
+  enabled,
+  wasmFile,
+  permission,
+  addresses,
+  onSuccess,
+  onError,
+}: SimulateQueryParamsForStoreCode) => {
+  const { address, getCosmWasmClient, currentChainName } = useWallet();
+
+  const simulateFn = async () => {
+    const client = await getCosmWasmClient();
+
+    if (!client || !address || !wasmFile) {
+      return undefined;
+    }
+
+    const submitWhitelistProposalMsg = async () => {
+      return composeStoreCodeMsg({
+        sender: address as HumanAddr,
+        wasmByteCode: new Uint8Array(await wasmFile.arrayBuffer()),
+        permission,
+        addresses: addresses.map((addr) => addr.address),
+      });
+    };
+    const craftMsg = await submitWhitelistProposalMsg();
+    return (await client.simulate(address, [craftMsg], undefined)) as Gas;
+  };
+  return useQuery({
+    queryKey: [
+      "simulate_fee_store_code",
+      currentChainName,
+      wasmFile,
+      permission,
+      addresses,
+    ],
+    queryFn: async () => simulateFn(),
+    enabled,
+    retry: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+    onSuccess,
+    onError,
+  });
+};
diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index 86df59fb3..d418c11b2 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -9,6 +9,7 @@ import { ControllerInput } from "../forms";
 import {
   useFabricateFee,
   useSimulateFee,
+  useSimulateFeeForStoreCode,
   useUploadContractTx,
 } from "lib/app-provider";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
@@ -24,7 +25,6 @@ import type {
   UploadSectionState,
 } from "lib/types";
 import { AccessType } from "lib/types";
-import { composeStoreCodeMsg } from "lib/utils";
 
 import { InstantiatePermissionRadio } from "./components/InstantiatePermissionRadio";
 import { UploadCard } from "./components/UploadCard";
@@ -67,7 +67,43 @@ export const UploadSection = ({
 
   const { wasmFile, codeName, addresses, permission } = watch();
 
-  const addressesString = JSON.stringify(addresses);
+  const setDefaultBehavior = () => {
+    setSimulateStatus("default");
+    setSimulateError("");
+    setEstimatedFee(undefined);
+  };
+
+  // Should not simulate when permission is any of addresses and address input is not filled
+  const isAnyAddrWithoutInput =
+    permission === AccessType.ACCESS_TYPE_ANY_OF_ADDRESSES &&
+    !addresses.some((addr) => addr.address !== "");
+
+  const { isFetching: isSimulating } = useSimulateFeeForStoreCode({
+    enabled: Boolean(wasmFile && address && !isAnyAddrWithoutInput),
+    wasmFile,
+    permission,
+    addresses,
+    onSuccess: (fee) => {
+      if (wasmFile && address) {
+        if (isAnyAddrWithoutInput) {
+          setDefaultBehavior();
+        }
+        if (fee) {
+          setSimulateStatus("completed");
+          setEstimatedFee(fabricateFee(fee));
+        }
+      }
+    },
+    onError: (e) => {
+      if (isAnyAddrWithoutInput) {
+        setDefaultBehavior();
+      } else {
+        setSimulateStatus("failed");
+        setSimulateError(e.message);
+        setEstimatedFee(undefined);
+      }
+    },
+  });
 
   const proceed = useCallback(async () => {
     if (address) {
@@ -102,37 +138,15 @@ export const UploadSection = ({
     updateCodeInfo,
   ]);
 
-  // eslint-disable-next-line sonarjs/cognitive-complexity
   useEffect(() => {
     (async () => {
       if (wasmFile && address) {
-        // Should not simulate when permission is any of addresses and address input is not filled
-        if (
-          permission === AccessType.ACCESS_TYPE_ANY_OF_ADDRESSES &&
-          !addresses.some((addr) => addr.address !== "")
-        ) {
-          setSimulateStatus("default");
-          setSimulateError("");
+        if (isAnyAddrWithoutInput) {
+          setDefaultBehavior();
+        } else if (isSimulating) {
           setEstimatedFee(undefined);
-        } else {
           setSimulateStatus("pending");
           setSimulateError("");
-          const msg = composeStoreCodeMsg({
-            sender: address as HumanAddr,
-            wasmByteCode: new Uint8Array(await wasmFile.arrayBuffer()),
-            permission,
-            addresses: addresses.map((addr) => addr.address),
-          });
-          try {
-            const estimatedGasUsed = await simulate([msg]);
-            if (estimatedGasUsed) {
-              setEstimatedFee(fabricateFee(estimatedGasUsed));
-              setSimulateStatus("completed");
-            }
-          } catch (err) {
-            setSimulateStatus("failed");
-            setSimulateError((err as Error).message);
-          }
         }
       }
     })();
@@ -143,16 +157,11 @@ export const UploadSection = ({
     fabricateFee,
     setValue,
     permission,
-    addressesString,
     addresses,
+    isSimulating,
+    isAnyAddrWithoutInput,
   ]);
 
-  const isDisabled =
-    !estimatedFee ||
-    !wasmFile ||
-    !address ||
-    !!errors.codeName ||
-    !!errors.addresses;
   return (
     <>
       {wasmFile ? (
@@ -208,7 +217,9 @@ export const UploadSection = ({
           size="md"
           variant="primary"
           w="128px"
-          disabled={isDisabled}
+          disabled={
+            isSimulating || isAnyAddrWithoutInput || Boolean(simulateError)
+          }
           onClick={proceed}
         >
           Upload

From f137be895e49cf9ab1e680788f48c824298342a2 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 20 Apr 2023 18:05:35 +0700
Subject: [PATCH 036/354] chore: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 080a15497..cd86e1cc3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#279](https://github.com/alleslabs/celatone-frontend/pull/279) Add instantiate permission to msg store code and upgrade cosmjs to version 0.30.1
 - [#287](https://github.com/alleslabs/celatone-frontend/pull/287) Add app default human address for each chain
 - [#271](https://github.com/alleslabs/celatone-frontend/pull/271) Create transaction list page
 - [#245](https://github.com/alleslabs/celatone-frontend/pull/245) Add amplitude for account detail page

From ef185cc2b48d25405577cfa90186ebbd4947640b Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 21 Apr 2023 10:43:42 +0700
Subject: [PATCH 037/354] fix: pool header

---
 src/lib/pages/pools/components/PoolHeader.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/lib/pages/pools/components/PoolHeader.tsx b/src/lib/pages/pools/components/PoolHeader.tsx
index 835d4bdf2..59cff14e5 100644
--- a/src/lib/pages/pools/components/PoolHeader.tsx
+++ b/src/lib/pages/pools/components/PoolHeader.tsx
@@ -27,7 +27,7 @@ export const PoolHeader = ({
           <Heading as="h6" fontWeight="600" variant="h6">
             {poolLiquidity[0].symbol || getTokenLabel(poolLiquidity[0].denom)}
           </Heading>
-          {poolLiquidity.slice(1, 4).map((item) => (
+          {poolLiquidity.slice(1, 3).map((item) => (
             <Flex key={item.denom} gap={1}>
               <Heading
                 as="h6"
@@ -43,8 +43,7 @@ export const PoolHeader = ({
               </Heading>
             </Flex>
           ))}
-
-          {poolLiquidity.length > 4 && (
+          {poolLiquidity.length >= 4 && (
             <Flex gap={1}>
               <Heading
                 as="h6"
@@ -55,7 +54,10 @@ export const PoolHeader = ({
                 /
               </Heading>
               <Heading as="h6" fontWeight="600" variant="h6">
-                + {poolLiquidity.length - 4}
+                {poolLiquidity.length === 4
+                  ? poolLiquidity[3].symbol ||
+                    getTokenLabel(poolLiquidity[3].denom)
+                  : `+${poolLiquidity.length - 3}`}
               </Heading>
             </Flex>
           )}

From 32b7f93d7c302d4058b6cf4856f85e01d3e379cb Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 21 Apr 2023 15:03:38 +0700
Subject: [PATCH 038/354] fix: change OTHERS formatted amount

---
 .../supportedSection/AllocationBadge.tsx      | 70 +++++++++++--------
 1 file changed, 40 insertions(+), 30 deletions(-)

diff --git a/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
index 6dd01e966..eb77468ec 100644
--- a/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
+++ b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
@@ -30,33 +30,43 @@ export const AllocationBadge = ({
   value,
   liquidity,
   mode,
-}: AllocationBadgeProps) => (
-  <Flex
-    bg="pebble.800"
-    px={3}
-    py={1}
-    border="1px solid"
-    borderColor="pebble.700"
-    borderRadius="8px"
-    transition="all .25s ease-in-out"
-    alignItems="center"
-    gap={2}
-  >
-    {denom && <Image boxSize={4} src={logo || getUndefinedTokenIcon(denom)} />}
-    <Box w="full" minW="50px">
-      <Text
-        variant="body3"
-        className="ellipsis"
-        color="text.dark"
-        fontWeight="600"
-      >
-        {denom ? symbol || getTokenLabel(denom) : "OTHERS"}
-      </Text>
-      <Text variant="body3" color="text.main">
-        {mode === "percent-value"
-          ? `${formatPercentValue((value ?? big(0)).div(liquidity).times(100))}`
-          : `${formatUTokenWithPrecision(amount, precision || 0)}`}
-      </Text>
-    </Box>
-  </Flex>
-);
+}: AllocationBadgeProps) => {
+  const formattedValue = formatPercentValue(
+    (value ?? big(0)).div(liquidity).times(100)
+  );
+  const formattedAmount = denom
+    ? formatUTokenWithPrecision(amount, precision || 0)
+    : "-";
+  return (
+    <Flex
+      bg="pebble.800"
+      px={3}
+      py={1}
+      border="1px solid"
+      borderColor="pebble.700"
+      borderRadius="8px"
+      transition="all .25s ease-in-out"
+      alignItems="center"
+      gap={2}
+    >
+      {denom && (
+        <Image boxSize={4} src={logo || getUndefinedTokenIcon(denom)} />
+      )}
+      <Box w="full" minW="50px">
+        <Text
+          variant="body3"
+          className="ellipsis"
+          color="text.dark"
+          fontWeight="600"
+        >
+          {denom ? symbol || getTokenLabel(denom) : "OTHERS"}
+        </Text>
+        <Text variant="body3" color="text.main">
+          {mode === "percent-value"
+            ? `${formattedValue}`
+            : `${formattedAmount}`}
+        </Text>
+      </Box>
+    </Flex>
+  );
+};

From 1dc32a669d37bc570f1094cdc682a4aca1e62123 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Fri, 21 Apr 2023 15:51:47 +0700
Subject: [PATCH 039/354] fix: handle simulate when input is empty

---
 src/lib/components/upload/UploadSection.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index d418c11b2..0f1956823 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -11,6 +11,7 @@ import {
   useSimulateFee,
   useSimulateFeeForStoreCode,
   useUploadContractTx,
+  useValidateAddress,
 } from "lib/app-provider";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
 import { CustomIcon } from "lib/components/icon";
@@ -44,6 +45,7 @@ export const UploadSection = ({
   const { broadcast } = useTxBroadcast();
   const { updateCodeInfo } = useCodeStore();
   const postUploadTx = useUploadContractTx(isMigrate);
+  const { validateUserAddress, validateContractAddress } = useValidateAddress();
 
   const [estimatedFee, setEstimatedFee] = useState<StdFee>();
   const [simulateStatus, setSimulateStatus] =
@@ -73,10 +75,16 @@ export const UploadSection = ({
     setEstimatedFee(undefined);
   };
 
-  // Should not simulate when permission is any of addresses and address input is not filled
+  const isAddressesError = addresses.some((addr) =>
+    Boolean(
+      validateUserAddress(addr.address) && validateContractAddress(addr.address)
+    )
+  );
+
+  // Should not simulate when permission is any of addresses and address input is not filled, invalid, or empty
   const isAnyAddrWithoutInput =
     permission === AccessType.ACCESS_TYPE_ANY_OF_ADDRESSES &&
-    !addresses.some((addr) => addr.address !== "");
+    (!addresses.some((addr) => addr.address !== "") || isAddressesError);
 
   const { isFetching: isSimulating } = useSimulateFeeForStoreCode({
     enabled: Boolean(wasmFile && address && !isAnyAddrWithoutInput),

From 3fa042cbb29a28b000cc7beb102c10fe373ddb1f Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Fri, 21 Apr 2023 15:54:10 +0700
Subject: [PATCH 040/354] fix: assign me

---
 src/lib/components/AssignMe.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/AssignMe.tsx b/src/lib/components/AssignMe.tsx
index 0eafc5f3c..f1bedab86 100644
--- a/src/lib/components/AssignMe.tsx
+++ b/src/lib/components/AssignMe.tsx
@@ -2,25 +2,24 @@ import { Text } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import type { MouseEventHandler } from "react";
 
-import type { Option } from "lib/types";
-
 interface AssginMeProps {
-  onClick: Option<MouseEventHandler<HTMLParagraphElement>>;
+  onClick?: MouseEventHandler<HTMLParagraphElement>;
   isDisable?: boolean;
 }
 
 export const AssignMe = ({ onClick, isDisable = false }: AssginMeProps) => {
-  const { address: walletAddress = "" } = useWallet();
+  const { address: walletAddress } = useWallet();
+  const enabled = Boolean(!isDisable && walletAddress);
   return (
     <Text
       textAlign="right"
       mr={3}
-      color={!isDisable && walletAddress ? "honeydew.main" : "pebble.500"}
+      color={enabled ? "honeydew.main" : "pebble.500"}
       fontWeight="600"
       variant="body3"
-      cursor={!isDisable && walletAddress ? "pointer" : "not-allowed"}
+      cursor={enabled ? "pointer" : "not-allowed"}
       minW={16}
-      onClick={onClick}
+      onClick={enabled ? onClick : undefined}
     >
       Assign me
     </Text>

From eebd3d02a3406d547474800d2c3dd7593c4a8b42 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Fri, 21 Apr 2023 17:56:45 +0700
Subject: [PATCH 041/354] fix: add required validate for address input

---
 .../upload/components/AddressPermissionInput.tsx | 16 ++++++++++------
 .../components/InstantiatePermissionRadio.tsx    | 10 +++++++++-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/upload/components/AddressPermissionInput.tsx b/src/lib/components/upload/components/AddressPermissionInput.tsx
index 903738190..cd1093f93 100644
--- a/src/lib/components/upload/components/AddressPermissionInput.tsx
+++ b/src/lib/components/upload/components/AddressPermissionInput.tsx
@@ -79,13 +79,17 @@ export const AddressPermissionInput = <T extends FieldValues>({
         status={status}
         placeholder={`ex. ${exampleHumanAddress}`}
         variant="floating"
+        rules={{
+          required: "Address is empty",
+        }}
         error={
-          addresses[index]?.address &&
-          addresses.find(
-            ({ address }, i) =>
-              i < index && address === addresses[index]?.address
-          ) &&
-          "You already input this address"
+          (addresses[index]?.address &&
+            addresses.find(
+              ({ address }, i) =>
+                i < index && address === addresses[index]?.address
+            ) &&
+            "You already input this address") ||
+          error
         }
         helperAction={
           <AssignMe
diff --git a/src/lib/components/upload/components/InstantiatePermissionRadio.tsx b/src/lib/components/upload/components/InstantiatePermissionRadio.tsx
index 1efeff1fa..8475cc5bd 100644
--- a/src/lib/components/upload/components/InstantiatePermissionRadio.tsx
+++ b/src/lib/components/upload/components/InstantiatePermissionRadio.tsx
@@ -1,6 +1,6 @@
 import { Text, Box, Radio, RadioGroup, Button } from "@chakra-ui/react";
 import type { Control, UseFormSetValue } from "react-hook-form";
-import { useFieldArray, useWatch } from "react-hook-form";
+import { useController, useFieldArray, useWatch } from "react-hook-form";
 
 import { CustomIcon } from "lib/components/icon";
 import type { Addr, UploadSectionState } from "lib/types";
@@ -39,6 +39,13 @@ export const InstantiatePermissionRadio = ({
     name: ["permission", "addresses"],
   });
 
+  const {
+    formState: { errors },
+  } = useController({
+    control,
+    name: "addresses",
+  });
+
   return (
     <RadioGroup
       name="instantiatePermission"
@@ -78,6 +85,7 @@ export const InstantiatePermissionRadio = ({
                   setValue={(value: Addr) =>
                     setValue(`addresses.${idx}.address`, value)
                   }
+                  error={errors.addresses?.[idx]?.address?.message}
                 />
               ))}
               <Button

From 44e63050b51db33452bb7d0a5844d6bedc2a5e46 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 24 Apr 2023 00:22:32 +0700
Subject: [PATCH 042/354] feat: pool related table blank

---
 CHANGELOG.md                                  |  1 +
 .../pages/pool/components/PoolAssetDetail.tsx |  2 +-
 .../pages/pool/components/PoolRelatedTxs.tsx  | 72 +++++++++++-----
 .../{ => pool-assets}/PoolAssetsTable.tsx     |  0
 .../PoolAssetsTableHeader.tsx                 |  0
 .../{ => pool-assets}/PoolAssetsTableRow.tsx  | 28 ++++---
 .../components/table/pool-assets/index.ts     |  1 +
 .../table/pool-txs/PoolTxsTable.tsx           | 37 ++++++++
 .../table/pool-txs/PoolTxsTableHeader.tsx     | 18 ++++
 .../table/pool-txs/PoolTxsTableMultiRow.tsx   | 27 ++++++
 .../table/pool-txs/PoolTxsTableRow.tsx        | 84 +++++++++++++++++++
 .../pool/components/table/pool-txs/index.tsx  | 84 +++++++++++++++++++
 .../table/pool-txs/messages/index.tsx         | 27 ++++++
 src/lib/pages/pool/poolId.tsx                 |  6 +-
 14 files changed, 348 insertions(+), 39 deletions(-)
 rename src/lib/pages/pool/components/table/{ => pool-assets}/PoolAssetsTable.tsx (100%)
 rename src/lib/pages/pool/components/table/{ => pool-assets}/PoolAssetsTableHeader.tsx (100%)
 rename src/lib/pages/pool/components/table/{ => pool-assets}/PoolAssetsTableRow.tsx (78%)
 create mode 100644 src/lib/pages/pool/components/table/pool-assets/index.ts
 create mode 100644 src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx
 create mode 100644 src/lib/pages/pool/components/table/pool-txs/PoolTxsTableHeader.tsx
 create mode 100644 src/lib/pages/pool/components/table/pool-txs/PoolTxsTableMultiRow.tsx
 create mode 100644 src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx
 create mode 100644 src/lib/pages/pool/components/table/pool-txs/index.tsx
 create mode 100644 src/lib/pages/pool/components/table/pool-txs/messages/index.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 92447e9ea..3747ad1c3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#294](https://github.com/alleslabs/celatone-frontend/pull/294) Add Pool related txs table with blank states
 - [#275](https://github.com/alleslabs/celatone-frontend/pull/275) Add Pool navigation and pool detail data
 - [#270](https://github.com/alleslabs/celatone-frontend/pull/270) Add Pool navigation and detail page
 - [#268](https://github.com/alleslabs/celatone-frontend/pull/268) Wireup create proposal to whitelisting
diff --git a/src/lib/pages/pool/components/PoolAssetDetail.tsx b/src/lib/pages/pool/components/PoolAssetDetail.tsx
index b4082c103..fc219927b 100644
--- a/src/lib/pages/pool/components/PoolAssetDetail.tsx
+++ b/src/lib/pages/pool/components/PoolAssetDetail.tsx
@@ -11,7 +11,7 @@ import type { USD } from "lib/types";
 import type { PoolDetail } from "lib/types/pool";
 import { calAssetValueWithPrecision, formatPrice } from "lib/utils";
 
-import { PoolAssetsTable } from "./table/PoolAssetsTable";
+import { PoolAssetsTable } from "./table/pool-assets/PoolAssetsTable";
 
 interface PoolAssetDetailProps {
   assets: Coin[];
diff --git a/src/lib/pages/pool/components/PoolRelatedTxs.tsx b/src/lib/pages/pool/components/PoolRelatedTxs.tsx
index f127a9e24..7d1f80717 100644
--- a/src/lib/pages/pool/components/PoolRelatedTxs.tsx
+++ b/src/lib/pages/pool/components/PoolRelatedTxs.tsx
@@ -9,8 +9,24 @@ import {
 } from "@chakra-ui/react";
 
 import { CustomTab } from "lib/components/CustomTab";
+import { useTxsCountByPoolId } from "lib/services/txService";
+
+import { PoolRelatedTxsTable } from "./table/pool-txs";
+
+interface PoolRelatedTxsProps {
+  poolId: number;
+}
+
+export const PoolRelatedTxs = ({ poolId }: PoolRelatedTxsProps) => {
+  const { data: countAllTxs = 0 } = useTxsCountByPoolId(poolId, "is_all");
+  const { data: countSwapTxs = 0 } = useTxsCountByPoolId(poolId, "is_swap");
+  const { data: countLpTxs = 0 } = useTxsCountByPoolId(poolId, "is_lp");
+  const { data: countBondTxs = 0 } = useTxsCountByPoolId(poolId, "is_bond");
+  const { data: countSuperfluidTxs = 0 } = useTxsCountByPoolId(
+    poolId,
+    "is_superfluid"
+  );
 
-export const PoolRelatedTxs = () => {
   return (
     <Box>
       <Flex mt={12} gap={2} alignItems="center">
@@ -20,37 +36,47 @@ export const PoolRelatedTxs = () => {
       </Flex>
       <Tabs>
         <TabList mt={4} borderBottom="1px" borderColor="pebble.800">
-          <CustomTab count={0}>All</CustomTab>
-          <CustomTab count={0}>Swap</CustomTab>
-          <CustomTab count={0}>LP</CustomTab>
-          <CustomTab count={0}>Bonding</CustomTab>
-          <CustomTab count={0}>Superfluid</CustomTab>
+          <CustomTab count={countAllTxs}>All</CustomTab>
+          <CustomTab count={countSwapTxs}>Swap</CustomTab>
+          <CustomTab count={countLpTxs}>LP</CustomTab>
+          <CustomTab count={countBondTxs}>Bonding</CustomTab>
+          <CustomTab count={countSuperfluidTxs}>Superfluid</CustomTab>
         </TabList>
         <TabPanels>
-          <TabPanel p={0}>All</TabPanel>
           <TabPanel p={0}>
-            Swappppppp Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            Delectus beatae esse doloremque eaque dolores magni harum pariatur,
-            corporis aliquid at quam quod fuga fugit sit a ipsam culpa tempora
-            voluptate?
+            <PoolRelatedTxsTable
+              poolId={poolId}
+              countTxs={countAllTxs}
+              type="is_all"
+            />
+          </TabPanel>
+          <TabPanel p={0}>
+            <PoolRelatedTxsTable
+              poolId={poolId}
+              countTxs={countSwapTxs}
+              type="is_swap"
+            />
           </TabPanel>
           <TabPanel p={0}>
-            LPLPLPLPLPLLPLP Lorem ipsum dolor sit amet consectetur adipisicing
-            elit. Delectus beatae esse doloremque eaque dolores magni harum
-            pariatur, corporis aliquid at quam quod fuga fugit sit a ipsam culpa
-            tempora voluptate?
+            <PoolRelatedTxsTable
+              poolId={poolId}
+              countTxs={countLpTxs}
+              type="is_lp"
+            />
           </TabPanel>
           <TabPanel p={0}>
-            BondingBondingBonding Lorem ipsum dolor sit amet consectetur
-            adipisicing elit. Delectus beatae esse doloremque eaque dolores
-            magni harum pariatur, corporis aliquid at quam quod fuga fugit sit a
-            ipsam culpa tempora voluptate?
+            <PoolRelatedTxsTable
+              poolId={poolId}
+              countTxs={countBondTxs}
+              type="is_bond"
+            />
           </TabPanel>
           <TabPanel p={0}>
-            SuperfluidSuperfluid Lorem ipsum dolor sit amet consectetur
-            adipisicing elit. Delectus beatae esse doloremque eaque dolores
-            magni harum pariatur, corporis aliquid at quam quod fuga fugit sit a
-            ipsam culpa tempora voluptate?
+            <PoolRelatedTxsTable
+              poolId={poolId}
+              countTxs={countSuperfluidTxs}
+              type="is_superfluid"
+            />
           </TabPanel>
         </TabPanels>
       </Tabs>
diff --git a/src/lib/pages/pool/components/table/PoolAssetsTable.tsx b/src/lib/pages/pool/components/table/pool-assets/PoolAssetsTable.tsx
similarity index 100%
rename from src/lib/pages/pool/components/table/PoolAssetsTable.tsx
rename to src/lib/pages/pool/components/table/pool-assets/PoolAssetsTable.tsx
diff --git a/src/lib/pages/pool/components/table/PoolAssetsTableHeader.tsx b/src/lib/pages/pool/components/table/pool-assets/PoolAssetsTableHeader.tsx
similarity index 100%
rename from src/lib/pages/pool/components/table/PoolAssetsTableHeader.tsx
rename to src/lib/pages/pool/components/table/pool-assets/PoolAssetsTableHeader.tsx
diff --git a/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx b/src/lib/pages/pool/components/table/pool-assets/PoolAssetsTableRow.tsx
similarity index 78%
rename from src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx
rename to src/lib/pages/pool/components/table/pool-assets/PoolAssetsTableRow.tsx
index b28457483..10615bb5b 100644
--- a/src/lib/pages/pool/components/table/PoolAssetsTableRow.tsx
+++ b/src/lib/pages/pool/components/table/pool-assets/PoolAssetsTableRow.tsx
@@ -4,8 +4,8 @@ import type { Coin } from "@cosmjs/stargate";
 import big from "big.js";
 import type { BigSource, Big } from "big.js";
 
-import { getUndefinedTokenIcon } from "../../utils";
 import { TableRow } from "lib/components/table/tableComponents";
+import { getUndefinedTokenIcon } from "lib/pages/pool/utils";
 import { useAssetInfos } from "lib/services/assetService";
 import type { Token, U, USD, PoolDetail } from "lib/types";
 import {
@@ -36,24 +36,26 @@ export const PoolAssetsTableRow = ({
       <Skeleton height="75px" startColor="pebble.900" endColor="pebble.800" />
     );
   const assetInfo = assetInfos[asset.denom];
-  const assetValue = calculateAssetValue(
-    toToken(big(asset.amount) as U<Token<BigSource>>, assetInfo.precision),
-    assetInfo.price as USD<number>
-  );
+  const assetValue = assetInfo
+    ? calculateAssetValue(
+        toToken(big(asset.amount) as U<Token<BigSource>>, assetInfo.precision),
+        assetInfo.price as USD<number>
+      )
+    : (0 as USD<number>);
   return (
     <Grid templateColumns={templateColumns}>
       <TableRow>
         <Flex alignItems="center" gap={2}>
           <Image
             boxSize={7}
-            src={assetInfo.logo || getUndefinedTokenIcon(assetInfo.id)}
+            src={assetInfo?.logo || getUndefinedTokenIcon(asset.denom)}
           />
           <Flex flexDirection="column">
             <Text variant="body2" fontWeight="600" color="text.main">
               {assetInfo?.symbol || getTokenLabel(asset.denom)}
             </Text>
             <Text variant="body3" color="text.dark">
-              {formatPrice(assetInfo.price as USD<number>)}
+              {assetInfo ? formatPrice(assetInfo.price as USD<number>) : "-"}
             </Text>
           </Flex>
         </Flex>
@@ -80,11 +82,13 @@ export const PoolAssetsTableRow = ({
       <TableRow>
         <Flex alignItems="flex-end" w="full" flexDirection="column">
           <Text variant="body2" fontWeight="600" color="text.main">
-            {formatUTokenWithPrecision(
-              asset.amount as U<Token>,
-              assetInfo.precision,
-              false
-            )}
+            {assetInfo
+              ? formatUTokenWithPrecision(
+                  asset.amount as U<Token>,
+                  assetInfo.precision,
+                  false
+                )
+              : (asset.amount as U<Token>)}
           </Text>
           <Text variant="body3" color="text.dark">
             {formatPrice(assetValue)}
diff --git a/src/lib/pages/pool/components/table/pool-assets/index.ts b/src/lib/pages/pool/components/table/pool-assets/index.ts
new file mode 100644
index 000000000..58db43c46
--- /dev/null
+++ b/src/lib/pages/pool/components/table/pool-assets/index.ts
@@ -0,0 +1 @@
+export * from "./PoolAssetsTable";
diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx
new file mode 100644
index 000000000..fb13b325b
--- /dev/null
+++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx
@@ -0,0 +1,37 @@
+import { TableContainer } from "@chakra-ui/react";
+
+import { Loading } from "lib/components/Loading";
+import type { Option, Transaction } from "lib/types";
+
+import { PoolTxsTableHeader } from "./PoolTxsTableHeader";
+import { PoolTxsTableMultiRow } from "./PoolTxsTableMultiRow";
+
+interface PoolTxsTableProps {
+  transactions: Option<Transaction[]>;
+  isLoading: boolean;
+  emptyState: JSX.Element;
+}
+
+export const PoolTxsTable = ({
+  transactions,
+  isLoading,
+  emptyState,
+}: PoolTxsTableProps) => {
+  if (isLoading) return <Loading />;
+  if (!transactions?.length) return emptyState;
+
+  const templateColumns = "150px minmax(360px, 1fr) max(150px) max(220px) 60px";
+
+  return (
+    <TableContainer>
+      <PoolTxsTableHeader templateColumns={templateColumns} />
+      {transactions.map((transaction) => (
+        <PoolTxsTableMultiRow
+          key={transaction.hash}
+          transaction={transaction}
+          templateColumns={templateColumns}
+        />
+      ))}
+    </TableContainer>
+  );
+};
diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableHeader.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableHeader.tsx
new file mode 100644
index 000000000..911ed4821
--- /dev/null
+++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableHeader.tsx
@@ -0,0 +1,18 @@
+import type { GridProps } from "@chakra-ui/react";
+import { Grid } from "@chakra-ui/react";
+
+import { TableHeader } from "lib/components/table";
+
+export const PoolTxsTableHeader = ({
+  templateColumns,
+}: {
+  templateColumns: GridProps["templateColumns"];
+}) => (
+  <Grid templateColumns={templateColumns} minW="min-content">
+    <TableHeader>Transaction Hash</TableHeader>
+    <TableHeader>Actions</TableHeader>
+    <TableHeader>Sender</TableHeader>
+    <TableHeader>Timestamp</TableHeader>
+    <TableHeader />
+  </Grid>
+);
diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableMultiRow.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableMultiRow.tsx
new file mode 100644
index 000000000..eb685e8b0
--- /dev/null
+++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableMultiRow.tsx
@@ -0,0 +1,27 @@
+import type { Transaction } from "lib/types";
+
+import { PoolTxsTableRow } from "./PoolTxsTableRow";
+
+interface PoolTxsTableMultiRowProps {
+  transaction: Transaction;
+  templateColumns: string;
+}
+
+export const PoolTxsTableMultiRow = ({
+  transaction,
+  templateColumns,
+}: PoolTxsTableMultiRowProps) => (
+  <>
+    {transaction.messages.map((message, index) => (
+      <PoolTxsTableRow
+        key={transaction.hash + index.toString()}
+        txHash={!index ? transaction.hash : undefined}
+        msgCount={transaction.messages.length}
+        message={message}
+        sender={transaction.sender}
+        created={!index ? transaction.created : undefined}
+        templateColumns={templateColumns}
+      />
+    ))}
+  </>
+);
diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx
new file mode 100644
index 000000000..35e8373c1
--- /dev/null
+++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx
@@ -0,0 +1,84 @@
+import { Flex, Text, Grid, useDisclosure, Box, Badge } from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
+import { TableRow } from "lib/components/table";
+import type { Addr, Message } from "lib/types";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+import { PoolTxsAction, PoolTxsDetail } from "./messages";
+
+interface PoolTxsTableRowProps {
+  txHash?: string;
+  msgCount: number;
+  message: Message;
+  sender: Addr;
+  created?: Date;
+  templateColumns: string;
+}
+
+export const PoolTxsTableRow = ({
+  txHash,
+  msgCount,
+  message,
+  sender,
+  created,
+  templateColumns,
+}: PoolTxsTableRowProps) => {
+  const { isOpen, onToggle } = useDisclosure();
+
+  return (
+    <Box w="full" minW="min-content">
+      <Grid
+        className="copier-wrapper"
+        templateColumns={templateColumns}
+        onClick={onToggle}
+        _hover={{ background: "pebble.900" }}
+        transition="all .25s ease-in-out"
+        cursor="pointer"
+      >
+        <TableRow>
+          {txHash && (
+            <Flex gap={1}>
+              <ExplorerLink
+                value={txHash.toLocaleUpperCase()}
+                type="tx_hash"
+                showCopyOnHover
+              />
+              {msgCount > 1 && (
+                <Badge variant="violet" ml="6px" color="text.main">
+                  {msgCount}
+                </Badge>
+              )}
+            </Flex>
+          )}
+        </TableRow>
+        <TableRow>
+          <PoolTxsAction msg={message} />
+        </TableRow>
+
+        <TableRow>
+          <ExplorerLink value={sender} type="user_address" showCopyOnHover />
+        </TableRow>
+
+        <TableRow>
+          {created && (
+            <Flex direction="column" gap={1}>
+              <Text variant="body3">{formatUTC(created)}</Text>
+              <Text variant="body3" color="text.dark">
+                {`(${dateFromNow(created)})`}
+              </Text>
+            </Flex>
+          )}
+        </TableRow>
+
+        <TableRow>
+          <CustomIcon name={isOpen ? "chevron-up" : "chevron-down"} />
+        </TableRow>
+      </Grid>
+      <Grid w="full" py={4} hidden={!isOpen}>
+        <PoolTxsDetail msg={message} />
+      </Grid>
+    </Box>
+  );
+};
diff --git a/src/lib/pages/pool/components/table/pool-txs/index.tsx b/src/lib/pages/pool/components/table/pool-txs/index.tsx
new file mode 100644
index 000000000..1767bafcf
--- /dev/null
+++ b/src/lib/pages/pool/components/table/pool-txs/index.tsx
@@ -0,0 +1,84 @@
+import type { ChangeEvent } from "react";
+
+import { Pagination } from "lib/components/pagination";
+import { usePaginator } from "lib/components/pagination/usePaginator";
+import { EmptyState } from "lib/components/state";
+import { useTxsByPoolIdPagination } from "lib/services/txService";
+import type { PoolTxFilter } from "lib/types";
+
+import { PoolTxsTable } from "./PoolTxsTable";
+
+interface PoolRelatedTxsTableProps {
+  poolId: number;
+  countTxs: number;
+  type: PoolTxFilter;
+}
+
+export const PoolRelatedTxsTable = ({
+  poolId,
+  countTxs,
+  type,
+}: PoolRelatedTxsTableProps) => {
+  const {
+    pagesQuantity,
+    currentPage,
+    setCurrentPage,
+    pageSize,
+    setPageSize,
+    offset,
+  } = usePaginator({
+    total: countTxs,
+    initialState: {
+      pageSize: 10,
+      currentPage: 1,
+      isDisabled: false,
+    },
+  });
+
+  const {
+    data: txs,
+    isLoading,
+    error,
+  } = useTxsByPoolIdPagination(poolId, type, offset, pageSize);
+
+  const onPageChange = (nextPage: number) => {
+    setCurrentPage(nextPage);
+  };
+
+  const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const size = Number(e.target.value);
+    setPageSize(size);
+    setCurrentPage(1);
+  };
+
+  if (error)
+    return (
+      <EmptyState
+        imageVariant="not-found"
+        message="There is an error during fetching transactions."
+      />
+    );
+  return (
+    <>
+      <PoolTxsTable
+        transactions={txs}
+        isLoading={isLoading}
+        emptyState={
+          <EmptyState
+            imageVariant="empty"
+            message="There are no transactions in this network."
+          />
+        }
+      />
+      <Pagination
+        currentPage={currentPage}
+        pagesQuantity={pagesQuantity}
+        offset={offset}
+        totalData={countTxs}
+        pageSize={pageSize}
+        onPageChange={onPageChange}
+        onPageSizeChange={onPageSizeChange}
+      />
+    </>
+  );
+};
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/index.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/index.tsx
new file mode 100644
index 000000000..27d37aa6d
--- /dev/null
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/index.tsx
@@ -0,0 +1,27 @@
+import { Text } from "@chakra-ui/react";
+
+import type { Message } from "lib/types";
+
+export const PoolTxsAction = ({ msg }: { msg: Message }) => {
+  // TODO: fix and add cases
+  const { type } = msg;
+  switch (type) {
+    case "type1":
+    case "type2":
+    case "type3":
+    default:
+      return <Text>{type}</Text>;
+  }
+};
+
+export const PoolTxsDetail = ({ msg }: { msg: Message }) => {
+  // TODO: fix and add cases
+  const { type } = msg;
+  switch (type) {
+    case "type1":
+    case "type2":
+    case "type3":
+    default:
+      return <Text h={20}>{type}</Text>;
+  }
+};
diff --git a/src/lib/pages/pool/poolId.tsx b/src/lib/pages/pool/poolId.tsx
index 9b7e81b6d..fa0facdc9 100644
--- a/src/lib/pages/pool/poolId.tsx
+++ b/src/lib/pages/pool/poolId.tsx
@@ -14,8 +14,8 @@ export const PoolId = () => {
   const navigate = useInternalNavigate();
 
   if (!router.query.poolId) return <Loading />;
-  const query = router.query.poolId;
-  const pool = MockUpPoolList.find((x) => x.id === +query);
+  const poolIdParam = router.query.poolId;
+  const pool = MockUpPoolList.find((x) => x.id === +poolIdParam);
   if (!pool) return navigate({ pathname: `/pool` });
   return (
     <PageContainer>
@@ -26,7 +26,7 @@ export const PoolId = () => {
         // weight={pool.weight}
         // scaling_factors={pool.scaling_factors}
       />
-      <PoolRelatedTxs />
+      <PoolRelatedTxs poolId={Number(poolIdParam)} />
     </PageContainer>
   );
 };

From a7bd094cf79d290844da629fecf71d9a99383ecc Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 24 Apr 2023 02:17:34 +0700
Subject: [PATCH 043/354] fix: tx badge count

---
 src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx | 2 +-
 .../pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx  | 4 ++--
 src/lib/styles/theme/components/badge.ts                      | 4 ++++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx
index fb13b325b..3fa33d9c7 100644
--- a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx
@@ -20,7 +20,7 @@ export const PoolTxsTable = ({
   if (isLoading) return <Loading />;
   if (!transactions?.length) return emptyState;
 
-  const templateColumns = "150px minmax(360px, 1fr) max(150px) max(220px) 60px";
+  const templateColumns = "200px minmax(360px, 1fr) max(150px) max(220px) 60px";
 
   return (
     <TableContainer>
diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx
index 35e8373c1..7b27ac2a6 100644
--- a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx
@@ -39,14 +39,14 @@ export const PoolTxsTableRow = ({
       >
         <TableRow>
           {txHash && (
-            <Flex gap={1}>
+            <Flex>
               <ExplorerLink
                 value={txHash.toLocaleUpperCase()}
                 type="tx_hash"
                 showCopyOnHover
               />
               {msgCount > 1 && (
-                <Badge variant="violet" ml="6px" color="text.main">
+                <Badge variant="lilac" ml="6px">
                   {msgCount}
                 </Badge>
               )}
diff --git a/src/lib/styles/theme/components/badge.ts b/src/lib/styles/theme/components/badge.ts
index edfc0a664..477067b18 100644
--- a/src/lib/styles/theme/components/badge.ts
+++ b/src/lib/styles/theme/components/badge.ts
@@ -20,5 +20,9 @@ export const Badge: ComponentStyleConfig = {
       color: "text.main",
     },
     honeydew: { background: "honeydew.dark", color: "background.main" },
+    lilac: {
+      background: "lilac.main",
+      color: "background.main",
+    },
   },
 };

From f880a39a18352be783d11e82d1ecc6fab46a60a3 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 24 Apr 2023 10:38:03 +0700
Subject: [PATCH 044/354] fix: table border style

---
 src/lib/components/table/tableComponents.ts   |  8 +++++
 .../table/pool-txs/PoolTxsTableRow.tsx        | 31 +++++++++++--------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/table/tableComponents.ts b/src/lib/components/table/tableComponents.ts
index da64c2616..f0fc56cd1 100644
--- a/src/lib/components/table/tableComponents.ts
+++ b/src/lib/components/table/tableComponents.ts
@@ -52,6 +52,14 @@ export const TableRow = chakra(GridItem, {
   baseStyle: tableRowBaseStyle,
 });
 
+export const TableNoBorderRow = chakra(GridItem, {
+  baseStyle: {
+    ...tableRowBaseStyle,
+    borderBottom: undefined,
+    borderColor: undefined,
+  },
+});
+
 export const TableRowFreeze = chakra(GridItem, {
   baseStyle: {
     ...tableRowBaseStyle,
diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx
index 7b27ac2a6..a9508169c 100644
--- a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx
@@ -2,7 +2,7 @@ import { Flex, Text, Grid, useDisclosure, Box, Badge } from "@chakra-ui/react";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
-import { TableRow } from "lib/components/table";
+import { TableNoBorderRow } from "lib/components/table";
 import type { Addr, Message } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
@@ -28,16 +28,21 @@ export const PoolTxsTableRow = ({
   const { isOpen, onToggle } = useDisclosure();
 
   return (
-    <Box w="full" minW="min-content">
+    <Box
+      w="full"
+      minW="min-content"
+      borderY="0.5px solid"
+      borderColor="pebble.700"
+      _hover={{ background: "pebble.900" }}
+    >
       <Grid
         className="copier-wrapper"
         templateColumns={templateColumns}
         onClick={onToggle}
-        _hover={{ background: "pebble.900" }}
         transition="all .25s ease-in-out"
         cursor="pointer"
       >
-        <TableRow>
+        <TableNoBorderRow>
           {txHash && (
             <Flex>
               <ExplorerLink
@@ -52,16 +57,16 @@ export const PoolTxsTableRow = ({
               )}
             </Flex>
           )}
-        </TableRow>
-        <TableRow>
+        </TableNoBorderRow>
+        <TableNoBorderRow>
           <PoolTxsAction msg={message} />
-        </TableRow>
+        </TableNoBorderRow>
 
-        <TableRow>
+        <TableNoBorderRow>
           <ExplorerLink value={sender} type="user_address" showCopyOnHover />
-        </TableRow>
+        </TableNoBorderRow>
 
-        <TableRow>
+        <TableNoBorderRow>
           {created && (
             <Flex direction="column" gap={1}>
               <Text variant="body3">{formatUTC(created)}</Text>
@@ -70,11 +75,11 @@ export const PoolTxsTableRow = ({
               </Text>
             </Flex>
           )}
-        </TableRow>
+        </TableNoBorderRow>
 
-        <TableRow>
+        <TableNoBorderRow>
           <CustomIcon name={isOpen ? "chevron-up" : "chevron-down"} />
-        </TableRow>
+        </TableNoBorderRow>
       </Grid>
       <Grid w="full" py={4} hidden={!isOpen}>
         <PoolTxsDetail msg={message} />

From b15c14f74088f1d9ffb3642ff34588c0d0016575 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 24 Apr 2023 11:46:44 +0700
Subject: [PATCH 045/354] fix: hide pagination when count is 0

---
 src/lib/pages/pool/components/constant.ts     |  2 +-
 .../pool/components/table/pool-txs/index.tsx  | 22 +++++++++++--------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/lib/pages/pool/components/constant.ts b/src/lib/pages/pool/components/constant.ts
index 02e16981d..bc6c55ad3 100644
--- a/src/lib/pages/pool/components/constant.ts
+++ b/src/lib/pages/pool/components/constant.ts
@@ -100,7 +100,7 @@ export const MockUpPoolList: PoolDetail[] = [
       "osmo1jkxwvg4dua49hsfymvfl9s2wenmguqrq3dl0ttms047w6zv2n5sqh4svnn" as ContractAddr,
   },
   {
-    id: 231,
+    id: 1,
     blockHeight: 1231354,
     creator: "osmo18z3mjlsy6vz0accnyu2c7lafzhe9l786q03ehx" as Addr,
     poolLiquidity: [
diff --git a/src/lib/pages/pool/components/table/pool-txs/index.tsx b/src/lib/pages/pool/components/table/pool-txs/index.tsx
index 1767bafcf..f229e5387 100644
--- a/src/lib/pages/pool/components/table/pool-txs/index.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/index.tsx
@@ -54,6 +54,7 @@ export const PoolRelatedTxsTable = ({
   if (error)
     return (
       <EmptyState
+        withBorder
         imageVariant="not-found"
         message="There is an error during fetching transactions."
       />
@@ -65,20 +66,23 @@ export const PoolRelatedTxsTable = ({
         isLoading={isLoading}
         emptyState={
           <EmptyState
+            withBorder
             imageVariant="empty"
             message="There are no transactions in this network."
           />
         }
       />
-      <Pagination
-        currentPage={currentPage}
-        pagesQuantity={pagesQuantity}
-        offset={offset}
-        totalData={countTxs}
-        pageSize={pageSize}
-        onPageChange={onPageChange}
-        onPageSizeChange={onPageSizeChange}
-      />
+      {countTxs > 0 && (
+        <Pagination
+          currentPage={currentPage}
+          pagesQuantity={pagesQuantity}
+          offset={offset}
+          totalData={countTxs}
+          pageSize={pageSize}
+          onPageChange={onPageChange}
+          onPageSizeChange={onPageSizeChange}
+        />
+      )}
     </>
   );
 };

From fa1aecd9a14329cfa3f5dc917362cff91cdb6282 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 24 Apr 2023 12:49:35 +0700
Subject: [PATCH 046/354] feat: add expand all

---
 CHANGELOG.md                                  |  1 +
 .../UnsupportedPoolCard.tsx                   | 93 ++++++++++---------
 .../UnsupportedPoolList.tsx                   | 11 ++-
 .../components/unsupportedSection/index.tsx   | 21 ++++-
 4 files changed, 78 insertions(+), 48 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index afdbb23bd..b51a7b856 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#295](https://github.com/alleslabs/celatone-frontend/pull/295) Add expand/collapse all for unsupported pool list
 - [#277](https://github.com/alleslabs/celatone-frontend/pull/277) Wire up data for pool navigation page
 - [#275](https://github.com/alleslabs/celatone-frontend/pull/275) Add Pool navigation and pool detail data
 - [#270](https://github.com/alleslabs/celatone-frontend/pull/270) Add Pool navigation and detail page
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index d3d1101d8..b64bde1b9 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -22,7 +22,7 @@ import { CustomIcon } from "lib/components/icon";
 import type { Pool } from "lib/types";
 import { formatUTokenWithPrecision } from "lib/utils";
 
-interface PoolCardProps {
+interface UnsupportedPoolCardProps {
   item: Pool;
   poolId: number;
 }
@@ -37,7 +37,10 @@ const StyledIconButton = chakra(IconButton, {
 
 const pebble700 = "pebble.700";
 
-export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
+export const UnsupportedPoolCard = ({
+  item,
+  poolId,
+}: UnsupportedPoolCardProps) => {
   const { currentChainName } = useWallet();
   const navigate = useInternalNavigate();
   const handleOnClick = () => {
@@ -54,56 +57,58 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
     >
       {({ isExpanded }) => (
         <>
-          <AccordionButton>
-            <Flex gap={4} flexDirection="column" p={4} w="full">
-              <Flex alignItems="center" justifyContent="space-between">
-                <PoolHeader
-                  poolId={poolId}
-                  isSuperFluid={item.isSuperfluid}
-                  poolType={item.type}
-                  poolLiquidity={item.poolLiquidity}
-                />
-                <Flex>
-                  <Tooltip
-                    hasArrow
-                    label="See in osmosis.zone"
-                    placement="top"
-                    bg="honeydew.darker"
-                    maxW="240px"
-                  >
-                    <Link
-                      href={`${getPoolUrl(currentChainName)}/${item.id}`}
-                      onClick={(e) => e.stopPropagation()}
-                      target="_blank"
-                      rel="noopener noreferrer"
+          <h2>
+            <AccordionButton>
+              <Flex gap={4} flexDirection="column" p={4} w="full">
+                <Flex alignItems="center" justifyContent="space-between">
+                  <PoolHeader
+                    poolId={poolId}
+                    isSuperFluid={item.isSuperfluid}
+                    poolType={item.type}
+                    poolLiquidity={item.poolLiquidity}
+                  />
+                  <Flex>
+                    <Tooltip
+                      hasArrow
+                      label="See in osmosis.zone"
+                      placement="top"
+                      bg="honeydew.darker"
+                      maxW="240px"
                     >
+                      <Link
+                        href={`${getPoolUrl(currentChainName)}/${item.id}`}
+                        onClick={(e) => e.stopPropagation()}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <StyledIconButton
+                          variant="none"
+                          aria-label="external"
+                          _hover={{ backgroundColor: pebble700 }}
+                          icon={<CustomIcon name="launch" />}
+                        />
+                      </Link>
+                    </Tooltip>
+                    {isExpanded ? (
                       <StyledIconButton
                         variant="none"
                         aria-label="external"
                         _hover={{ backgroundColor: pebble700 }}
-                        icon={<CustomIcon name="launch" />}
+                        icon={<CustomIcon name="chevron-up" />}
                       />
-                    </Link>
-                  </Tooltip>
-                  {isExpanded ? (
-                    <StyledIconButton
-                      variant="none"
-                      aria-label="external"
-                      _hover={{ backgroundColor: pebble700 }}
-                      icon={<CustomIcon name="chevron-up" />}
-                    />
-                  ) : (
-                    <StyledIconButton
-                      variant="none"
-                      aria-label="external"
-                      _hover={{ backgroundColor: pebble700 }}
-                      icon={<CustomIcon name="chevron-down" />}
-                    />
-                  )}
+                    ) : (
+                      <StyledIconButton
+                        variant="none"
+                        aria-label="external"
+                        _hover={{ backgroundColor: pebble700 }}
+                        icon={<CustomIcon name="chevron-down" />}
+                      />
+                    )}
+                  </Flex>
                 </Flex>
               </Flex>
-            </Flex>
-          </AccordionButton>
+            </AccordionButton>
+          </h2>
           <AccordionPanel pb={4}>
             <Flex>
               <Text
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx
index f73ffee2a..b0ebf4ca4 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx
@@ -1,4 +1,5 @@
 import { Accordion, SimpleGrid } from "@chakra-ui/react";
+import type { Dispatch, SetStateAction } from "react";
 
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
@@ -9,11 +10,15 @@ import { UnsupportedPoolCard } from "./UnsupportedPoolCard";
 interface UnsupportedPoolListProps {
   pools: Option<Pool[]>;
   isLoading: boolean;
+  expandedIndex: number[];
+  setExpandedIndex: Dispatch<SetStateAction<number[]>>;
 }
 
 export const UnsupportedPoolList = ({
   pools,
   isLoading,
+  expandedIndex,
+  setExpandedIndex,
 }: UnsupportedPoolListProps) => {
   if (isLoading) return <Loading />;
   if (!pools?.length)
@@ -27,7 +32,11 @@ export const UnsupportedPoolList = ({
 
   return (
     <SimpleGrid columns={1} spacing={4} w="full">
-      <Accordion allowMultiple>
+      <Accordion
+        allowMultiple
+        index={expandedIndex}
+        onChange={(index: number[]) => setExpandedIndex(index)}
+      >
         {pools.map((item) => (
           <UnsupportedPoolCard key={item.id} item={item} poolId={item.id} />
         ))}
diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
index d249aaae3..468a83a4b 100644
--- a/src/lib/pages/pools/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -45,6 +45,7 @@ export const UnsupportedSection = ({
     usePoolListCountByIsSupported(false, "All", false, "");
 
   const [showNewest, setShowNewest] = useState(true);
+  const [expandedIndex, setExpandedIndex] = useState<number[]>([]);
 
   const {
     pagesQuantity,
@@ -158,13 +159,27 @@ export const UnsupportedSection = ({
             )}
           </Flex>
           <Flex gap="2" alignItems="center">
-            <Button variant="outline-gray" size="sm">
-              Expand All
+            <Button
+              variant="outline-gray"
+              w="94px"
+              size="sm"
+              onClick={() =>
+                setExpandedIndex((prev) =>
+                  prev.length ? [] : Array.from(Array(pageSize).keys())
+                )
+              }
+            >
+              {expandedIndex.length ? "Collapse All" : "Expand All"}
             </Button>
           </Flex>
         </Flex>
       </Flex>
-      <UnsupportedPoolList pools={pools} isLoading={isLoading} />
+      <UnsupportedPoolList
+        pools={pools}
+        isLoading={isLoading}
+        expandedIndex={expandedIndex}
+        setExpandedIndex={setExpandedIndex}
+      />
       <Pagination
         currentPage={currentPage}
         pagesQuantity={pagesQuantity}

From 7ca56f894965f6d6ab8d58519e0a71df8a95d1c0 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 24 Apr 2023 12:59:15 +0700
Subject: [PATCH 047/354] fix: handle page change with expand

---
 .../pools/components/unsupportedSection/UnsupportedPoolList.tsx | 2 +-
 src/lib/pages/pools/components/unsupportedSection/index.tsx     | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx
index b0ebf4ca4..b6b621d05 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx
@@ -35,7 +35,7 @@ export const UnsupportedPoolList = ({
       <Accordion
         allowMultiple
         index={expandedIndex}
-        onChange={(index: number[]) => setExpandedIndex(index)}
+        onChange={(index) => setExpandedIndex(index as number[])}
       >
         {pools.map((item) => (
           <UnsupportedPoolCard key={item.id} item={item} poolId={item.id} />
diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
index 468a83a4b..9c6216602 100644
--- a/src/lib/pages/pools/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -66,6 +66,7 @@ export const UnsupportedSection = ({
   const onPageChange = (nextPage: number) => {
     refetchCount();
     setCurrentPage(nextPage);
+    setExpandedIndex([]);
   };
 
   const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
@@ -73,6 +74,7 @@ export const UnsupportedSection = ({
     refetchCount();
     setPageSize(size);
     setCurrentPage(1);
+    setExpandedIndex([]);
   };
 
   const { pools, isLoading } = usePools(

From 1401d2393103fa988178bed9cfb2bcf3646e775d Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Tue, 25 Apr 2023 11:10:02 +0700
Subject: [PATCH 048/354] fix: remove h2

---
 .../UnsupportedPoolCard.tsx                   | 86 +++++++++----------
 1 file changed, 42 insertions(+), 44 deletions(-)

diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index b64bde1b9..cf09ef868 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -57,58 +57,56 @@ export const UnsupportedPoolCard = ({
     >
       {({ isExpanded }) => (
         <>
-          <h2>
-            <AccordionButton>
-              <Flex gap={4} flexDirection="column" p={4} w="full">
-                <Flex alignItems="center" justifyContent="space-between">
-                  <PoolHeader
-                    poolId={poolId}
-                    isSuperFluid={item.isSuperfluid}
-                    poolType={item.type}
-                    poolLiquidity={item.poolLiquidity}
-                  />
-                  <Flex>
-                    <Tooltip
-                      hasArrow
-                      label="See in osmosis.zone"
-                      placement="top"
-                      bg="honeydew.darker"
-                      maxW="240px"
+          <AccordionButton>
+            <Flex gap={4} flexDirection="column" p={4} w="full">
+              <Flex alignItems="center" justifyContent="space-between">
+                <PoolHeader
+                  poolId={poolId}
+                  isSuperFluid={item.isSuperfluid}
+                  poolType={item.type}
+                  poolLiquidity={item.poolLiquidity}
+                />
+                <Flex>
+                  <Tooltip
+                    hasArrow
+                    label="See in osmosis.zone"
+                    placement="top"
+                    bg="honeydew.darker"
+                    maxW="240px"
+                  >
+                    <Link
+                      href={`${getPoolUrl(currentChainName)}/${item.id}`}
+                      onClick={(e) => e.stopPropagation()}
+                      target="_blank"
+                      rel="noopener noreferrer"
                     >
-                      <Link
-                        href={`${getPoolUrl(currentChainName)}/${item.id}`}
-                        onClick={(e) => e.stopPropagation()}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        <StyledIconButton
-                          variant="none"
-                          aria-label="external"
-                          _hover={{ backgroundColor: pebble700 }}
-                          icon={<CustomIcon name="launch" />}
-                        />
-                      </Link>
-                    </Tooltip>
-                    {isExpanded ? (
                       <StyledIconButton
                         variant="none"
                         aria-label="external"
                         _hover={{ backgroundColor: pebble700 }}
-                        icon={<CustomIcon name="chevron-up" />}
+                        icon={<CustomIcon name="launch" />}
                       />
-                    ) : (
-                      <StyledIconButton
-                        variant="none"
-                        aria-label="external"
-                        _hover={{ backgroundColor: pebble700 }}
-                        icon={<CustomIcon name="chevron-down" />}
-                      />
-                    )}
-                  </Flex>
+                    </Link>
+                  </Tooltip>
+                  {isExpanded ? (
+                    <StyledIconButton
+                      variant="none"
+                      aria-label="external"
+                      _hover={{ backgroundColor: pebble700 }}
+                      icon={<CustomIcon name="chevron-up" />}
+                    />
+                  ) : (
+                    <StyledIconButton
+                      variant="none"
+                      aria-label="external"
+                      _hover={{ backgroundColor: pebble700 }}
+                      icon={<CustomIcon name="chevron-down" />}
+                    />
+                  )}
                 </Flex>
               </Flex>
-            </AccordionButton>
-          </h2>
+            </Flex>
+          </AccordionButton>
           <AccordionPanel pb={4}>
             <Flex>
               <Text

From 1f281e7d32fa3935dba2e80f8c5d6046daae2381 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 25 Apr 2023 15:17:04 +0700
Subject: [PATCH 049/354] feat: add swapexactin action

---
 src/lib/components/action-msg/MsgToken.tsx    | 42 +++++++++++++++
 src/lib/components/action-msg/SingleMsg.tsx   | 51 +++++--------------
 .../table/pool-txs/messages/index.tsx         |  8 ++-
 .../table/pool-txs/messages/messages.ts       | 18 +++++++
 .../swap/MsgSwapExactAmountInAction.tsx       | 28 ++++++++++
 5 files changed, 108 insertions(+), 39 deletions(-)
 create mode 100644 src/lib/components/action-msg/MsgToken.tsx
 create mode 100644 src/lib/pages/pool/components/table/pool-txs/messages/messages.ts
 create mode 100644 src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx

diff --git a/src/lib/components/action-msg/MsgToken.tsx b/src/lib/components/action-msg/MsgToken.tsx
new file mode 100644
index 000000000..067871cef
--- /dev/null
+++ b/src/lib/components/action-msg/MsgToken.tsx
@@ -0,0 +1,42 @@
+import { Flex, Text, Tooltip } from "@chakra-ui/react";
+import type { Coin } from "@cosmjs/stargate";
+
+import { Copier } from "../copy";
+import { CustomIcon } from "../icon";
+import { formatBalanceWithDenom } from "lib/utils";
+
+interface MsgTokenProps {
+  coin: Coin;
+  symbol?: string;
+  precision?: number;
+}
+
+export const MsgToken = ({ coin, symbol, precision }: MsgTokenProps) => (
+  <Flex role="group" align="center" gap={1}>
+    <Text fontWeight="medium">
+      {formatBalanceWithDenom({
+        coin,
+        symbol,
+        precision,
+      })}
+    </Text>
+    <Tooltip
+      hasArrow
+      label={`Token ID: ${coin.denom}`}
+      placement="top"
+      bg="honeydew.darker"
+      maxW="240px"
+    >
+      <Flex cursor="pointer">
+        <CustomIcon name="info-circle" boxSize="3" />
+      </Flex>
+    </Tooltip>
+    <Copier
+      type={symbol ? "supported_asset" : "unsupported_asset"}
+      value={coin.denom}
+      copyLabel="Token ID Copied!"
+      display="none"
+      ml="4px"
+    />
+  </Flex>
+);
diff --git a/src/lib/components/action-msg/SingleMsg.tsx b/src/lib/components/action-msg/SingleMsg.tsx
index 0d0745725..f98ad833f 100644
--- a/src/lib/components/action-msg/SingleMsg.tsx
+++ b/src/lib/components/action-msg/SingleMsg.tsx
@@ -1,13 +1,12 @@
-import { Tag, Text, Flex, Tooltip } from "@chakra-ui/react";
+import { Tag, Text, Flex } from "@chakra-ui/react";
 import type { Coin } from "@cosmjs/stargate";
 import { snakeCase } from "snake-case";
 
-import { Copier } from "../copy";
-import { CustomIcon } from "../icon";
 import type { LinkType } from "lib/components/ExplorerLink";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { Option } from "lib/types";
-import { formatBalanceWithDenom } from "lib/utils";
+
+import { MsgToken } from "./MsgToken";
 
 interface LinkElement {
   type: LinkType;
@@ -49,41 +48,17 @@ export const SingleMsg = ({
     <Flex gap={1} alignItems="center" flexWrap="wrap">
       {type} {text1}
       {tokens?.map((token: Token, index: number) => (
-        <Flex
+        <MsgToken
           key={index.toString() + token}
-          role="group"
-          align="center"
-          gap={1}
-        >
-          <Text fontWeight="medium">
-            {formatBalanceWithDenom({
-              coin: {
-                denom: token.id,
-                amount: token.amount,
-              } as Coin,
-              symbol: token.symbol,
-              precision: token.precision,
-            })}
-          </Text>
-          <Tooltip
-            hasArrow
-            label={`Token ID: ${token.id}`}
-            placement="top"
-            bg="honeydew.darker"
-            maxW="240px"
-          >
-            <Flex cursor="pointer">
-              <CustomIcon name="info-circle" boxSize="3" />
-            </Flex>
-          </Tooltip>
-          <Copier
-            type={token.symbol ? "supported_asset" : "unsupported_asset"}
-            value={token.id}
-            copyLabel="Token ID Copied!"
-            display="none"
-            ml="4px"
-          />
-        </Flex>
+          coin={
+            {
+              denom: token.id,
+              amount: token.amount,
+            } as Coin
+          }
+          symbol={token.symbol}
+          precision={token.precision}
+        />
       ))}
       {/* Tags  */}
       {tags?.map((tag: string, index: number) => (
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/index.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/index.tsx
index 27d37aa6d..b23d18864 100644
--- a/src/lib/pages/pool/components/table/pool-txs/messages/index.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/index.tsx
@@ -2,11 +2,17 @@ import { Text } from "@chakra-ui/react";
 
 import type { Message } from "lib/types";
 
+import type { MsgSwapExactAmountIn } from "./messages";
+import { MsgSwapExactAmountInAction } from "./swap/MsgSwapExactAmountInAction";
+
 export const PoolTxsAction = ({ msg }: { msg: Message }) => {
   // TODO: fix and add cases
   const { type } = msg;
   switch (type) {
-    case "type1":
+    case "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn":
+      return (
+        <MsgSwapExactAmountInAction msg={msg.detail as MsgSwapExactAmountIn} />
+      );
     case "type2":
     case "type3":
     default:
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/messages.ts b/src/lib/pages/pool/components/table/pool-txs/messages/messages.ts
new file mode 100644
index 000000000..480c003c1
--- /dev/null
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/messages.ts
@@ -0,0 +1,18 @@
+import type { Coin } from "@cosmjs/stargate";
+
+import type { Addr } from "lib/types";
+import type { MsgBaseDetails } from "lib/utils/tx/types";
+
+export interface MsgSwapExactAmountIn extends MsgBaseDetails {
+  routes: { poolId: number; tokenOutDenom: string }[];
+  tokenIn: Coin;
+  tokenOutMinAmount: string;
+  sender: Addr;
+}
+
+export interface MsgSwapExactAmountOut extends MsgBaseDetails {
+  routes: { poolId: number; tokenInDenom: string }[];
+  tokenOut: Coin;
+  tokenInMaxAmount: string;
+  sender: Addr;
+}
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
new file mode 100644
index 000000000..bb0a0ee8d
--- /dev/null
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
@@ -0,0 +1,28 @@
+import { Flex } from "@chakra-ui/react";
+
+import type { MsgSwapExactAmountIn } from "../messages";
+import { MsgToken } from "lib/components/action-msg/MsgToken";
+import { Loading } from "lib/components/Loading";
+import { useAssetInfos } from "lib/services/assetService";
+
+interface MsgSwapExactAmountInActionProps {
+  msg: MsgSwapExactAmountIn;
+}
+
+export const MsgSwapExactAmountInAction = ({
+  msg,
+}: MsgSwapExactAmountInActionProps) => {
+  const { assetInfos, isLoading } = useAssetInfos();
+  if (isLoading) return <Loading />;
+  const assetInfo = assetInfos?.[msg.tokenIn.denom];
+  return (
+    <Flex gap={1}>
+      Swap
+      <MsgToken
+        coin={msg.tokenIn}
+        symbol={assetInfo?.symbol}
+        precision={assetInfo?.precision}
+      />
+    </Flex>
+  );
+};

From 112ad2886beb1e9dc8826258436a3ff5901547ae Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Tue, 25 Apr 2023 15:23:07 +0700
Subject: [PATCH 050/354] fix: change new error display for store code

---
 CHANGELOG.md                                  |  2 +-
 src/lib/app-provider/queries/simulateFee.ts   |  2 +-
 .../AddressPermissionInput.tsx                |  0
 .../InstantiatePermissionRadio.tsx            |  0
 .../upload/SimulateMessageRender.tsx          | 53 ++++++++++
 src/lib/components/upload/UploadCard.tsx      | 38 +++++++
 src/lib/components/upload/UploadSection.tsx   | 77 ++++++++-------
 .../upload/components/UploadCard.tsx          | 98 -------------------
 8 files changed, 132 insertions(+), 138 deletions(-)
 rename src/lib/components/upload/{components => }/AddressPermissionInput.tsx (100%)
 rename src/lib/components/upload/{components => }/InstantiatePermissionRadio.tsx (100%)
 create mode 100644 src/lib/components/upload/SimulateMessageRender.tsx
 create mode 100644 src/lib/components/upload/UploadCard.tsx
 delete mode 100644 src/lib/components/upload/components/UploadCard.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8e1e3434f..e1c277e10 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,7 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#279](https://github.com/alleslabs/celatone-frontend/pull/279) Add instantiate permission to msg store code and upgrade cosmjs to version 0.30.1
+- [#279](https://github.com/alleslabs/celatone-frontend/pull/279) Add instantiate permission to msg store code, change error display design, and upgrade cosmjs to version 0.30.1
 - [#268](https://github.com/alleslabs/celatone-frontend/pull/268) Wireup create proposal to whitelisting
 - [#266](https://github.com/alleslabs/celatone-frontend/pull/250) Add proposal whitelisting page
 - [#286](https://github.com/alleslabs/celatone-frontend/pull/286) Add block proposer
diff --git a/src/lib/app-provider/queries/simulateFee.ts b/src/lib/app-provider/queries/simulateFee.ts
index b718bd2ef..c2ffddc62 100644
--- a/src/lib/app-provider/queries/simulateFee.ts
+++ b/src/lib/app-provider/queries/simulateFee.ts
@@ -91,7 +91,7 @@ export const useSimulateFeeForStoreCode = ({
     const client = await getCosmWasmClient();
 
     if (!client || !address || !wasmFile) {
-      return undefined;
+      throw new Error("Fail to get client, address, or wasmFile");
     }
 
     const submitWhitelistProposalMsg = async () => {
diff --git a/src/lib/components/upload/components/AddressPermissionInput.tsx b/src/lib/components/upload/AddressPermissionInput.tsx
similarity index 100%
rename from src/lib/components/upload/components/AddressPermissionInput.tsx
rename to src/lib/components/upload/AddressPermissionInput.tsx
diff --git a/src/lib/components/upload/components/InstantiatePermissionRadio.tsx b/src/lib/components/upload/InstantiatePermissionRadio.tsx
similarity index 100%
rename from src/lib/components/upload/components/InstantiatePermissionRadio.tsx
rename to src/lib/components/upload/InstantiatePermissionRadio.tsx
diff --git a/src/lib/components/upload/SimulateMessageRender.tsx b/src/lib/components/upload/SimulateMessageRender.tsx
new file mode 100644
index 000000000..6e6ed4c1d
--- /dev/null
+++ b/src/lib/components/upload/SimulateMessageRender.tsx
@@ -0,0 +1,53 @@
+import type { FlexProps } from "@chakra-ui/react";
+import { Spinner, Flex, Text } from "@chakra-ui/react";
+
+import { CustomIcon } from "../icon";
+import type { Option } from "lib/types";
+
+interface SimulateMessageRenderProps extends FlexProps {
+  value: Option<string>;
+  isLoading: boolean;
+  isSuccess: boolean;
+}
+
+const item = {
+  success: {
+    color: "success.main",
+    icon: (
+      <CustomIcon name="check-circle-solid" color="success.main" boxSize="3" />
+    ),
+  },
+  fail: {
+    color: "error.main",
+    icon: (
+      <CustomIcon name="alert-circle-solid" color="error.main" boxSize="3" />
+    ),
+  },
+  loading: {
+    color: "pebble.500",
+    icon: <Spinner color="pebble.600" size="sm" mx={1} />,
+  },
+};
+
+const getStatus = (isLoading: boolean, isSuccess: boolean) => {
+  if (isLoading) return "loading";
+  if (isSuccess) return "success";
+  return "fail";
+};
+
+export const SimulateMessageRender = ({
+  value,
+  isLoading,
+  isSuccess,
+  ...restProps
+}: SimulateMessageRenderProps) => {
+  const status = getStatus(isLoading, isSuccess);
+  return (
+    <Flex gap={2} {...restProps}>
+      {item[status].icon}
+      <Text variant="body3" color={item[status].color}>
+        {value}
+      </Text>
+    </Flex>
+  );
+};
diff --git a/src/lib/components/upload/UploadCard.tsx b/src/lib/components/upload/UploadCard.tsx
new file mode 100644
index 000000000..68f04f69d
--- /dev/null
+++ b/src/lib/components/upload/UploadCard.tsx
@@ -0,0 +1,38 @@
+import { Flex, Text } from "@chakra-ui/react";
+import big from "big.js";
+
+import { CustomIcon, UploadIcon } from "lib/components/icon";
+
+interface UploadCardProps {
+  file: File;
+  deleteFile: () => void;
+}
+
+export const UploadCard = ({ file, deleteFile }: UploadCardProps) => (
+  <Flex
+    align="center"
+    p="16px"
+    gap="16px"
+    w="full"
+    bgColor="pebble.900"
+    borderRadius="8px"
+    border="1px solid"
+    justifyContent="space-between"
+  >
+    <Flex gap={5}>
+      <UploadIcon />
+      <Flex direction="column">
+        <Text variant="body1">{file.name}</Text>
+        <Text variant="body2" color="text.dark" display="flex" gap="4px">
+          {big(file.size).div(1000).toFixed(0)} KB
+        </Text>
+      </Flex>
+    </Flex>
+    <CustomIcon
+      name="delete"
+      color="text.dark"
+      onClick={deleteFile}
+      cursor="pointer"
+    />
+  </Flex>
+);
diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index 0f1956823..4686b9f72 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex } from "@chakra-ui/react";
+import { Box, Button, Flex } from "@chakra-ui/react";
 import type { StdFee } from "@cosmjs/stargate";
 import { useWallet } from "@cosmos-kit/react";
 import { useCallback, useEffect, useState } from "react";
@@ -19,16 +19,12 @@ import { getMaxCodeNameLengthError, MAX_CODE_NAME_LENGTH } from "lib/data";
 import { useCodeStore } from "lib/providers/store";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import type {
-  Addr,
-  HumanAddr,
-  SimulateStatus,
-  UploadSectionState,
-} from "lib/types";
+import type { Addr, HumanAddr, UploadSectionState } from "lib/types";
 import { AccessType } from "lib/types";
 
-import { InstantiatePermissionRadio } from "./components/InstantiatePermissionRadio";
-import { UploadCard } from "./components/UploadCard";
+import { InstantiatePermissionRadio } from "./InstantiatePermissionRadio";
+import { SimulateMessageRender } from "./SimulateMessageRender";
+import { UploadCard } from "./UploadCard";
 
 interface UploadSectionProps {
   handleBack: () => void;
@@ -48,9 +44,9 @@ export const UploadSection = ({
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
 
   const [estimatedFee, setEstimatedFee] = useState<StdFee>();
-  const [simulateStatus, setSimulateStatus] =
-    useState<SimulateStatus>("default");
-  const [simulateError, setSimulateError] = useState("");
+  const [simulateError, setSimulateError] = useState<string>();
+
+  const simulateSuccessText = "Valid Wasm file and instantiate permission";
 
   const {
     control,
@@ -70,8 +66,7 @@ export const UploadSection = ({
   const { wasmFile, codeName, addresses, permission } = watch();
 
   const setDefaultBehavior = () => {
-    setSimulateStatus("default");
-    setSimulateError("");
+    setSimulateError(undefined);
     setEstimatedFee(undefined);
   };
 
@@ -97,7 +92,7 @@ export const UploadSection = ({
           setDefaultBehavior();
         }
         if (fee) {
-          setSimulateStatus("completed");
+          setSimulateError(simulateSuccessText);
           setEstimatedFee(fabricateFee(fee));
         }
       }
@@ -106,7 +101,6 @@ export const UploadSection = ({
       if (isAnyAddrWithoutInput) {
         setDefaultBehavior();
       } else {
-        setSimulateStatus("failed");
         setSimulateError(e.message);
         setEstimatedFee(undefined);
       }
@@ -148,14 +142,8 @@ export const UploadSection = ({
 
   useEffect(() => {
     (async () => {
-      if (wasmFile && address) {
-        if (isAnyAddrWithoutInput) {
-          setDefaultBehavior();
-        } else if (isSimulating) {
-          setEstimatedFee(undefined);
-          setSimulateStatus("pending");
-          setSimulateError("");
-        }
+      if (wasmFile && address && isAnyAddrWithoutInput) {
+        setDefaultBehavior();
       }
     })();
   }, [
@@ -179,8 +167,6 @@ export const UploadSection = ({
             setValue("wasmFile", undefined);
             setEstimatedFee(undefined);
           }}
-          simulateStatus={simulateStatus}
-          simulateError={simulateError}
         />
       ) : (
         <DropZone setFile={(file) => setValue("wasmFile", file)} />
@@ -199,18 +185,33 @@ export const UploadSection = ({
         my="32px"
       />
       <InstantiatePermissionRadio control={control} setValue={setValue} />
-      <Flex
-        mt={10}
-        fontSize="14px"
-        color="text.dark"
-        alignSelf="flex-start"
-        alignItems="center"
-        display="flex"
-        gap="4px"
-      >
-        <p>Transaction Fee:</p>
-        <EstimatedFeeRender estimatedFee={estimatedFee} loading={loading} />
-      </Flex>
+
+      <Box mt={10} width="full">
+        {(simulateError || isSimulating) && (
+          <SimulateMessageRender
+            value={
+              isSimulating
+                ? "Checking Wasm and permission validity"
+                : simulateError
+            }
+            isLoading={isSimulating}
+            mb={2}
+            isSuccess={simulateError === simulateSuccessText}
+          />
+        )}
+
+        <Flex
+          fontSize="14px"
+          color="text.dark"
+          alignSelf="flex-start"
+          alignItems="center"
+          display="flex"
+        >
+          <p>Transaction Fee:</p>
+          <EstimatedFeeRender estimatedFee={estimatedFee} loading={loading} />
+        </Flex>
+      </Box>
+
       <Flex justify="space-between" w="100%" mt="32px">
         <Button
           size="md"
diff --git a/src/lib/components/upload/components/UploadCard.tsx b/src/lib/components/upload/components/UploadCard.tsx
deleted file mode 100644
index 9b4c12e85..000000000
--- a/src/lib/components/upload/components/UploadCard.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Flex, Spinner, Text } from "@chakra-ui/react";
-import big from "big.js";
-import type { ReactElement } from "react";
-
-import { CustomIcon, UploadIcon } from "lib/components/icon";
-import type { SimulateStatus } from "lib/types";
-
-interface UploadCardProps {
-  file: File;
-  deleteFile: () => void;
-  simulateStatus: SimulateStatus;
-  simulateError: string;
-}
-
-interface StatusDecorator {
-  icon: JSX.Element | null;
-  statusText: ReactElement | string;
-  helperText?: string;
-}
-
-const getStatusDecorator = (
-  status: SimulateStatus,
-  error: string
-): StatusDecorator => {
-  switch (status) {
-    case "completed":
-      return {
-        icon: <CustomIcon name="check-circle-solid" color="success.main" />,
-        statusText: <Text color="success.main"> • Valid Wasm file</Text>,
-      };
-    case "failed":
-      return {
-        icon: <CustomIcon name="alert-circle-solid" color="error.main" />,
-        statusText: <Text color="error.main"> • Invalid Wasm file</Text>,
-        helperText: error,
-      };
-    case "pending":
-      return {
-        icon: <Spinner color="violet.light" w="40px" h="40px" />,
-        statusText: " • Loading",
-      };
-
-    default:
-      return {
-        icon: null,
-        statusText: "",
-      };
-  }
-};
-export const UploadCard = ({
-  file,
-  deleteFile,
-  simulateStatus,
-  simulateError,
-}: UploadCardProps) => {
-  const isError = simulateStatus === "failed";
-  const {
-    icon: StatusIcon,
-    statusText,
-    helperText,
-  } = getStatusDecorator(simulateStatus, simulateError);
-  return (
-    <>
-      <Flex
-        align="center"
-        p="16px"
-        gap="16px"
-        w="full"
-        bgColor="pebble.900"
-        borderRadius="8px"
-        border="1px solid"
-        borderColor={isError ? "error.main" : "pebble.900"}
-      >
-        <UploadIcon />
-        <Flex direction="column">
-          <Text variant="body1">{file.name}</Text>
-          <Text variant="body2" color="text.dark" display="flex" gap="4px">
-            {big(file.size).div(1000).toFixed(0)} KB {statusText}
-          </Text>
-        </Flex>
-        <Flex align="center" gap="16px" ml="auto">
-          <CustomIcon
-            name="delete"
-            color="text.dark"
-            onClick={deleteFile}
-            cursor="pointer"
-          />
-          {StatusIcon}
-        </Flex>
-      </Flex>
-      {isError && (
-        <Text variant="body3" color="error.main" mt={1} alignSelf="start">
-          {helperText}
-        </Text>
-      )}
-    </>
-  );
-};

From cc04e8bdd4c179a243f561db83d0c45b9564da55 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 25 Apr 2023 15:47:12 +0700
Subject: [PATCH 051/354] fix: comments

---
 .../pools/components/FilterByPoolType.tsx     |  1 -
 .../supportedSection/AllocationBadge.tsx      |  6 +--
 .../components/supportedSection/PoolCard.tsx  | 15 +++----
 .../supportedSection/SupportedPoolList.tsx    |  2 +-
 .../components/supportedSection/index.tsx     | 16 +++----
 .../UnsupportedPoolCard.tsx                   | 19 ++++----
 .../UnsupportedPoolList.tsx                   |  2 +-
 .../components/unsupportedSection/index.tsx   | 10 +++--
 src/lib/pages/pools/data.ts                   | 24 +++++------
 src/lib/pages/pools/index.tsx                 | 16 +++++--
 src/lib/services/poolService.ts               | 43 ++++++++++++-------
 11 files changed, 85 insertions(+), 69 deletions(-)

diff --git a/src/lib/pages/pools/components/FilterByPoolType.tsx b/src/lib/pages/pools/components/FilterByPoolType.tsx
index 3faf828fc..683573927 100644
--- a/src/lib/pages/pools/components/FilterByPoolType.tsx
+++ b/src/lib/pages/pools/components/FilterByPoolType.tsx
@@ -47,7 +47,6 @@ export const FilterByPoolType = ({
       formLabel="Filter by Pool Type"
       options={options}
       onChange={setPoolTypeValue}
-      placeholder="Select"
       initialSelected={initialSelected}
       labelBgColor={labelBgColor}
     />
diff --git a/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
index eb77468ec..e9fa20151 100644
--- a/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
+++ b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
@@ -35,7 +35,7 @@ export const AllocationBadge = ({
     (value ?? big(0)).div(liquidity).times(100)
   );
   const formattedAmount = denom
-    ? formatUTokenWithPrecision(amount, precision || 0)
+    ? formatUTokenWithPrecision(amount, precision ?? 0)
     : "-";
   return (
     <Flex
@@ -50,7 +50,7 @@ export const AllocationBadge = ({
       gap={2}
     >
       {denom && (
-        <Image boxSize={4} src={logo || getUndefinedTokenIcon(denom)} />
+        <Image boxSize={4} src={logo ?? getUndefinedTokenIcon(denom)} />
       )}
       <Box w="full" minW="50px">
         <Text
@@ -59,7 +59,7 @@ export const AllocationBadge = ({
           color="text.dark"
           fontWeight="600"
         >
-          {denom ? symbol || getTokenLabel(denom) : "OTHERS"}
+          {denom ? symbol ?? getTokenLabel(denom) : "OTHERS"}
         </Text>
         <Text variant="body3" color="text.main">
           {mode === "percent-value"
diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index c402221f1..9373fdf3f 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -13,23 +13,18 @@ import { formatPrice } from "lib/utils";
 
 import { AllocationBadge } from "./AllocationBadge";
 
-const pebble700 = "pebble.700";
+const hoverBgColor = "pebble.700";
 
 interface PoolCardProps {
   item: Pool;
-  poolId: number;
   mode: string;
 }
 
-export const PoolCard = ({
-  item,
-  poolId,
-  mode = "percent-value",
-}: PoolCardProps) => {
+export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
   const { currentChainName } = useWallet();
   const navigate = useInternalNavigate();
   const handleOnClick = () => {
-    navigate({ pathname: `/pools/[poolId]`, query: { poolId } });
+    navigate({ pathname: `/pools/[poolId]`, query: { poolId: item.id } });
   };
 
   const liquidity = item.poolLiquidity.reduce(
@@ -52,7 +47,7 @@ export const PoolCard = ({
         _hover: {
           "> div:last-child > div": {
             borderColor: "pebble.600",
-            backgroundColor: pebble700,
+            backgroundColor: hoverBgColor,
           },
           backgroundColor: "pebble.800",
         },
@@ -82,7 +77,7 @@ export const PoolCard = ({
               fontSize="24px"
               variant="none"
               aria-label="external"
-              _hover={{ backgroundColor: pebble700 }}
+              _hover={{ backgroundColor: hoverBgColor }}
               color="pebble.600"
               icon={<CustomIcon name="launch" />}
             />
diff --git a/src/lib/pages/pools/components/supportedSection/SupportedPoolList.tsx b/src/lib/pages/pools/components/supportedSection/SupportedPoolList.tsx
index c2581c1ec..8716b2fd0 100644
--- a/src/lib/pages/pools/components/supportedSection/SupportedPoolList.tsx
+++ b/src/lib/pages/pools/components/supportedSection/SupportedPoolList.tsx
@@ -30,7 +30,7 @@ export const SupportedPoolList = ({
   return (
     <SimpleGrid columns={{ md: 1, lg: 2 }} spacing={4} mt={4}>
       {pools.map((item) => (
-        <PoolCard key={item.id} item={item} poolId={item.id} mode={mode} />
+        <PoolCard key={item.id} item={item} mode={mode} />
       ))}
     </SimpleGrid>
   );
diff --git a/src/lib/pages/pools/components/supportedSection/index.tsx b/src/lib/pages/pools/components/supportedSection/index.tsx
index c62e286fb..c282df377 100644
--- a/src/lib/pages/pools/components/supportedSection/index.tsx
+++ b/src/lib/pages/pools/components/supportedSection/index.tsx
@@ -25,7 +25,7 @@ import { usePaginator } from "lib/components/pagination/usePaginator";
 import { ToggleWithName } from "lib/components/ToggleWithName";
 import { Order_By } from "lib/gql/graphql";
 import { useAssetInfos } from "lib/services/assetService";
-import { usePoolListCountByIsSupported } from "lib/services/poolService";
+import { usePoolListCountQuery } from "lib/services/poolService";
 import type { PoolTypeFilter } from "lib/types";
 import { isPositiveInt } from "lib/utils";
 
@@ -65,19 +65,19 @@ export const SupportedSection = ({
         ? keyword
         : `{${matchSorter(Object.values(assetInfos), keyword, {
             keys: ["id", "symbol"],
+            threshold: matchSorter.rankings.CONTAINS,
           })
             .map((assetInfo) => `"${assetInfo.id}"`)
             .join(",")}}`,
     [assetInfos, keyword]
   );
 
-  const { data: totalData = 0, refetch: refetchCount } =
-    usePoolListCountByIsSupported(
-      true,
-      poolTypeValue,
-      isSuperfluidOnly,
-      search
-    );
+  const { data: totalData = 0, refetch: refetchCount } = usePoolListCountQuery({
+    isSupported: true,
+    poolType: poolTypeValue,
+    isSuperfluidOnly,
+    search,
+  });
 
   const [showNewest, setShowNewest] = useState(true);
   const [toggle, setToggle] = useState("percent-value");
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index d3d1101d8..ccd7829fd 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -24,7 +24,6 @@ import { formatUTokenWithPrecision } from "lib/utils";
 
 interface PoolCardProps {
   item: Pool;
-  poolId: number;
 }
 const StyledIconButton = chakra(IconButton, {
   baseStyle: {
@@ -35,13 +34,13 @@ const StyledIconButton = chakra(IconButton, {
   },
 });
 
-const pebble700 = "pebble.700";
+const hoverBgColor = "pebble.700";
 
-export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
+export const UnsupportedPoolCard = ({ item }: PoolCardProps) => {
   const { currentChainName } = useWallet();
   const navigate = useInternalNavigate();
   const handleOnClick = () => {
-    navigate({ pathname: `/pools/[poolId]`, query: { poolId } });
+    navigate({ pathname: `/pools/[poolId]`, query: { poolId: item.id } });
   };
 
   return (
@@ -58,7 +57,7 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
             <Flex gap={4} flexDirection="column" p={4} w="full">
               <Flex alignItems="center" justifyContent="space-between">
                 <PoolHeader
-                  poolId={poolId}
+                  poolId={item.id}
                   isSuperFluid={item.isSuperfluid}
                   poolType={item.type}
                   poolLiquidity={item.poolLiquidity}
@@ -80,7 +79,7 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
                       <StyledIconButton
                         variant="none"
                         aria-label="external"
-                        _hover={{ backgroundColor: pebble700 }}
+                        _hover={{ backgroundColor: hoverBgColor }}
                         icon={<CustomIcon name="launch" />}
                       />
                     </Link>
@@ -89,14 +88,14 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
                     <StyledIconButton
                       variant="none"
                       aria-label="external"
-                      _hover={{ backgroundColor: pebble700 }}
+                      _hover={{ backgroundColor: hoverBgColor }}
                       icon={<CustomIcon name="chevron-up" />}
                     />
                   ) : (
                     <StyledIconButton
                       variant="none"
                       aria-label="external"
-                      _hover={{ backgroundColor: pebble700 }}
+                      _hover={{ backgroundColor: hoverBgColor }}
                       icon={<CustomIcon name="chevron-down" />}
                     />
                   )}
@@ -130,10 +129,10 @@ export const UnsupportedPoolCard = ({ item, poolId }: PoolCardProps) => {
                       <Text variant="body2" color="text.main" fontWeight="bold">
                         {formatUTokenWithPrecision(
                           asset.amount,
-                          asset.precision || 0
+                          asset.precision ?? 0
                         )}
                       </Text>
-                      <Flex>{asset.symbol || asset.denom}</Flex>
+                      <Flex>{asset.symbol ?? asset.denom}</Flex>
                       <Copier
                         type={
                           asset.symbol ? "supported_asset" : "unsupported_asset"
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx
index f73ffee2a..ba23bc47e 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx
@@ -29,7 +29,7 @@ export const UnsupportedPoolList = ({
     <SimpleGrid columns={1} spacing={4} w="full">
       <Accordion allowMultiple>
         {pools.map((item) => (
-          <UnsupportedPoolCard key={item.id} item={item} poolId={item.id} />
+          <UnsupportedPoolCard key={item.id} item={item} />
         ))}
       </Accordion>
     </SimpleGrid>
diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
index d249aaae3..2b79d3278 100644
--- a/src/lib/pages/pools/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -22,7 +22,7 @@ import InputWithIcon from "lib/components/InputWithIcon";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { Order_By } from "lib/gql/graphql";
-import { usePoolListCountByIsSupported } from "lib/services/poolService";
+import { usePoolListCountQuery } from "lib/services/poolService";
 import type { PoolTypeFilter } from "lib/types";
 
 import { UnsupportedPoolList } from "./UnsupportedPoolList";
@@ -41,8 +41,12 @@ export const UnsupportedSection = ({
     },
   });
   const { poolTypeValue, keyword, isSuperfluidOnly } = watch();
-  const { data: totalData = 0, refetch: refetchCount } =
-    usePoolListCountByIsSupported(false, "All", false, "");
+  const { data: totalData = 0, refetch: refetchCount } = usePoolListCountQuery({
+    isSupported: false,
+    poolType: "All",
+    isSuperfluidOnly: false,
+    search: "",
+  });
 
   const [showNewest, setShowNewest] = useState(true);
 
diff --git a/src/lib/pages/pools/data.ts b/src/lib/pages/pools/data.ts
index 02629fda3..fa68acf04 100644
--- a/src/lib/pages/pools/data.ts
+++ b/src/lib/pages/pools/data.ts
@@ -3,10 +3,7 @@ import big from "big.js";
 
 import type { Order_By } from "lib/gql/graphql";
 import { useAssetInfos } from "lib/services/assetService";
-import {
-  usePoolByPoolId,
-  usePoolListByIsSupported,
-} from "lib/services/poolService";
+import { usePoolByPoolId, usePoolListQuery } from "lib/services/poolService";
 import type {
   Option,
   Pool,
@@ -27,16 +24,15 @@ export const usePools = (
   pageSize: number
 ): { pools: Option<Pool[]>; isLoading: boolean } => {
   const { assetInfos, isLoading: isLoadingAssetInfos } = useAssetInfos();
-  const { data: poolList, isLoading: isLoadingPoolList } =
-    usePoolListByIsSupported(
-      isSupported,
-      poolType,
-      isSuperfluidOnly,
-      search,
-      order,
-      offset,
-      pageSize
-    );
+  const { data: poolList, isLoading: isLoadingPoolList } = usePoolListQuery({
+    isSupported,
+    poolType,
+    isSuperfluidOnly,
+    search,
+    order,
+    offset,
+    pageSize,
+  });
 
   const data = poolList?.map<Pool>((pool) => ({
     id: pool.id,
diff --git a/src/lib/pages/pools/index.tsx b/src/lib/pages/pools/index.tsx
index 5e86680e1..ab311567e 100644
--- a/src/lib/pages/pools/index.tsx
+++ b/src/lib/pages/pools/index.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { CustomTab } from "lib/components/CustomTab";
 import { LoadingOverlay } from "lib/components/LoadingOverlay";
 import PageContainer from "lib/components/PageContainer";
-import { usePoolListCountByIsSupported } from "lib/services/poolService";
+import { usePoolListCountQuery } from "lib/services/poolService";
 
 import { SupportedSection } from "./components/supportedSection";
 import { UnsupportedSection } from "./components/unsupportedSection";
@@ -18,9 +18,19 @@ export const PoolIndex = () => {
   const [tabIndex, setTabIndex] = useState(TabIndex.Supported);
 
   const { data: supportedPoolCount, isLoading: isLoadingSupported } =
-    usePoolListCountByIsSupported(true, "All", false, "");
+    usePoolListCountQuery({
+      isSupported: true,
+      poolType: "All",
+      isSuperfluidOnly: false,
+      search: "",
+    });
   const { data: unsupportedPoolCount, isLoading: isLoadingUnsupported } =
-    usePoolListCountByIsSupported(false, "All", false, "");
+    usePoolListCountQuery({
+      isSupported: false,
+      poolType: "All",
+      isSuperfluidOnly: false,
+      search: "",
+    });
 
   const sectionHeaderId = "poolListTab";
 
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index b594621b3..8d572dbf2 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -17,15 +17,23 @@ import { isPositiveInt } from "lib/utils";
 
 import { usePoolExpression } from "./expression/poolExpression";
 
-export const usePoolListByIsSupported = (
-  isSupported: boolean,
-  poolType: PoolTypeFilter,
-  isSuperfluidOnly: boolean,
-  search: string,
-  order: Order_By,
-  offset: number,
-  pageSize: number
-): UseQueryResult<Pool<Coin>[]> => {
+export const usePoolListQuery = ({
+  isSupported,
+  poolType,
+  isSuperfluidOnly,
+  search,
+  order,
+  offset,
+  pageSize,
+}: {
+  isSupported: boolean;
+  poolType: PoolTypeFilter;
+  isSuperfluidOnly: boolean;
+  search: string;
+  order: Order_By;
+  offset: number;
+  pageSize: number;
+}): UseQueryResult<Pool<Coin>[]> => {
   const { indexerGraphClient } = useCelatoneApp();
   const expression = usePoolExpression(
     isSupported,
@@ -76,12 +84,17 @@ export const usePoolListByIsSupported = (
   );
 };
 
-export const usePoolListCountByIsSupported = (
-  isSupported: boolean,
-  poolType: PoolTypeFilter,
-  isSuperfluidOnly: boolean,
-  search: string
-): UseQueryResult<number> => {
+export const usePoolListCountQuery = ({
+  isSupported,
+  poolType,
+  isSuperfluidOnly,
+  search,
+}: {
+  isSupported: boolean;
+  poolType: PoolTypeFilter;
+  isSuperfluidOnly: boolean;
+  search: string;
+}): UseQueryResult<number> => {
   const { indexerGraphClient } = useCelatoneApp();
   const expression = usePoolExpression(
     isSupported,

From 9d78debb1cc341817292b5a4860dfa8fa35d099f Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 25 Apr 2023 15:55:30 +0700
Subject: [PATCH 052/354] fix: comment

---
 .../unsupportedSection/UnsupportedPoolList.tsx         |  7 +++----
 .../pools/components/unsupportedSection/index.tsx      | 10 +++++++---
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx
index b6b621d05..070477757 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx
@@ -1,5 +1,4 @@
 import { Accordion, SimpleGrid } from "@chakra-ui/react";
-import type { Dispatch, SetStateAction } from "react";
 
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
@@ -11,14 +10,14 @@ interface UnsupportedPoolListProps {
   pools: Option<Pool[]>;
   isLoading: boolean;
   expandedIndex: number[];
-  setExpandedIndex: Dispatch<SetStateAction<number[]>>;
+  updateExpandedIndex: (index: number[]) => void;
 }
 
 export const UnsupportedPoolList = ({
   pools,
   isLoading,
   expandedIndex,
-  setExpandedIndex,
+  updateExpandedIndex,
 }: UnsupportedPoolListProps) => {
   if (isLoading) return <Loading />;
   if (!pools?.length)
@@ -35,7 +34,7 @@ export const UnsupportedPoolList = ({
       <Accordion
         allowMultiple
         index={expandedIndex}
-        onChange={(index) => setExpandedIndex(index as number[])}
+        onChange={updateExpandedIndex}
       >
         {pools.map((item) => (
           <UnsupportedPoolCard key={item.id} item={item} poolId={item.id} />
diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
index 9c6216602..0360f2d37 100644
--- a/src/lib/pages/pools/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -47,6 +47,10 @@ export const UnsupportedSection = ({
   const [showNewest, setShowNewest] = useState(true);
   const [expandedIndex, setExpandedIndex] = useState<number[]>([]);
 
+  const updateExpandedIndex = (indexes: number[]) => {
+    setExpandedIndex(indexes);
+  };
+
   const {
     pagesQuantity,
     currentPage,
@@ -66,7 +70,7 @@ export const UnsupportedSection = ({
   const onPageChange = (nextPage: number) => {
     refetchCount();
     setCurrentPage(nextPage);
-    setExpandedIndex([]);
+    updateExpandedIndex([]);
   };
 
   const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
@@ -74,7 +78,7 @@ export const UnsupportedSection = ({
     refetchCount();
     setPageSize(size);
     setCurrentPage(1);
-    setExpandedIndex([]);
+    updateExpandedIndex([]);
   };
 
   const { pools, isLoading } = usePools(
@@ -180,7 +184,7 @@ export const UnsupportedSection = ({
         pools={pools}
         isLoading={isLoading}
         expandedIndex={expandedIndex}
-        setExpandedIndex={setExpandedIndex}
+        updateExpandedIndex={updateExpandedIndex}
       />
       <Pagination
         currentPage={currentPage}

From 5946e8ef74fa24bd7dfaa5930628c7ae6fc8a47d Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 25 Apr 2023 17:39:42 +0700
Subject: [PATCH 053/354] chore: fix typos

---
 .../UnsupportedPoolList.tsx                   | 12 ++++++------
 .../components/unsupportedSection/index.tsx   | 19 ++++++++++---------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx
index 070477757..7d05b2fde 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolList.tsx
@@ -9,15 +9,15 @@ import { UnsupportedPoolCard } from "./UnsupportedPoolCard";
 interface UnsupportedPoolListProps {
   pools: Option<Pool[]>;
   isLoading: boolean;
-  expandedIndex: number[];
-  updateExpandedIndex: (index: number[]) => void;
+  expandedIndexes: number[];
+  updateExpandedIndexes: (index: number[]) => void;
 }
 
 export const UnsupportedPoolList = ({
   pools,
   isLoading,
-  expandedIndex,
-  updateExpandedIndex,
+  expandedIndexes,
+  updateExpandedIndexes,
 }: UnsupportedPoolListProps) => {
   if (isLoading) return <Loading />;
   if (!pools?.length)
@@ -33,8 +33,8 @@ export const UnsupportedPoolList = ({
     <SimpleGrid columns={1} spacing={4} w="full">
       <Accordion
         allowMultiple
-        index={expandedIndex}
-        onChange={updateExpandedIndex}
+        index={expandedIndexes}
+        onChange={updateExpandedIndexes}
       >
         {pools.map((item) => (
           <UnsupportedPoolCard key={item.id} item={item} poolId={item.id} />
diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
index 0360f2d37..4cfa90b2f 100644
--- a/src/lib/pages/pools/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -45,10 +45,11 @@ export const UnsupportedSection = ({
     usePoolListCountByIsSupported(false, "All", false, "");
 
   const [showNewest, setShowNewest] = useState(true);
-  const [expandedIndex, setExpandedIndex] = useState<number[]>([]);
 
-  const updateExpandedIndex = (indexes: number[]) => {
-    setExpandedIndex(indexes);
+  const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
+
+  const updateExpandedIndexes = (indexes: number[]) => {
+    setExpandedIndexes(indexes);
   };
 
   const {
@@ -70,7 +71,7 @@ export const UnsupportedSection = ({
   const onPageChange = (nextPage: number) => {
     refetchCount();
     setCurrentPage(nextPage);
-    updateExpandedIndex([]);
+    updateExpandedIndexes([]);
   };
 
   const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
@@ -78,7 +79,7 @@ export const UnsupportedSection = ({
     refetchCount();
     setPageSize(size);
     setCurrentPage(1);
-    updateExpandedIndex([]);
+    updateExpandedIndexes([]);
   };
 
   const { pools, isLoading } = usePools(
@@ -170,12 +171,12 @@ export const UnsupportedSection = ({
               w="94px"
               size="sm"
               onClick={() =>
-                setExpandedIndex((prev) =>
+                setExpandedIndexes((prev) =>
                   prev.length ? [] : Array.from(Array(pageSize).keys())
                 )
               }
             >
-              {expandedIndex.length ? "Collapse All" : "Expand All"}
+              {expandedIndexes.length ? "Collapse All" : "Expand All"}
             </Button>
           </Flex>
         </Flex>
@@ -183,8 +184,8 @@ export const UnsupportedSection = ({
       <UnsupportedPoolList
         pools={pools}
         isLoading={isLoading}
-        expandedIndex={expandedIndex}
-        updateExpandedIndex={updateExpandedIndex}
+        expandedIndexes={expandedIndexes}
+        updateExpandedIndexes={updateExpandedIndexes}
       />
       <Pagination
         currentPage={currentPage}

From 8ac4d64e45ab1cb0c215cfaf2ba2c0727f8c6dda Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 26 Apr 2023 09:47:22 +0700
Subject: [PATCH 054/354] fix: error message

---
 src/lib/app-provider/queries/simulateFee.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/app-provider/queries/simulateFee.ts b/src/lib/app-provider/queries/simulateFee.ts
index c2ffddc62..1232ac8d0 100644
--- a/src/lib/app-provider/queries/simulateFee.ts
+++ b/src/lib/app-provider/queries/simulateFee.ts
@@ -88,11 +88,11 @@ export const useSimulateFeeForStoreCode = ({
   const { address, getCosmWasmClient, currentChainName } = useWallet();
 
   const simulateFn = async () => {
-    const client = await getCosmWasmClient();
+    if (!address) throw new Error("Please check your wallet connection.");
+    if (!wasmFile) throw new Error("Fail to get Wasm file");
 
-    if (!client || !address || !wasmFile) {
-      throw new Error("Fail to get client, address, or wasmFile");
-    }
+    const client = await getCosmWasmClient();
+    if (!client) throw new Error("Fail to get client");
 
     const submitWhitelistProposalMsg = async () => {
       return composeStoreCodeMsg({

From 0a912045e1a09fef21cf59ed5963e8a36390e51f Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 26 Apr 2023 11:17:26 +0700
Subject: [PATCH 055/354] fix: store code navigation path

---
 src/pages/[network]/proposal/store-code.tsx | 3 +++
 src/pages/[network]/store-code.tsx          | 3 ---
 src/pages/proposal/store-code.tsx           | 3 +++
 src/pages/store-code.tsx                    | 3 ---
 4 files changed, 6 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/[network]/proposal/store-code.tsx
 delete mode 100644 src/pages/[network]/store-code.tsx
 create mode 100644 src/pages/proposal/store-code.tsx
 delete mode 100644 src/pages/store-code.tsx

diff --git a/src/pages/[network]/proposal/store-code.tsx b/src/pages/[network]/proposal/store-code.tsx
new file mode 100644
index 000000000..c963da582
--- /dev/null
+++ b/src/pages/[network]/proposal/store-code.tsx
@@ -0,0 +1,3 @@
+import StoreCode from "lib/pages/proposal/store-code";
+
+export default StoreCode;
diff --git a/src/pages/[network]/store-code.tsx b/src/pages/[network]/store-code.tsx
deleted file mode 100644
index 293aefb30..000000000
--- a/src/pages/[network]/store-code.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import StoreCode from "lib/pages/store-code";
-
-export default StoreCode;
diff --git a/src/pages/proposal/store-code.tsx b/src/pages/proposal/store-code.tsx
new file mode 100644
index 000000000..c963da582
--- /dev/null
+++ b/src/pages/proposal/store-code.tsx
@@ -0,0 +1,3 @@
+import StoreCode from "lib/pages/proposal/store-code";
+
+export default StoreCode;
diff --git a/src/pages/store-code.tsx b/src/pages/store-code.tsx
deleted file mode 100644
index 293aefb30..000000000
--- a/src/pages/store-code.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import StoreCode from "lib/pages/store-code";
-
-export default StoreCode;

From 1f0d9cf381cf3d702c3ad9275943ef60e05fe50f Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 26 Apr 2023 11:21:47 +0700
Subject: [PATCH 056/354] fix: add required to textarea input

---
 src/lib/components/forms/ControllerTextarea.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/components/forms/ControllerTextarea.tsx b/src/lib/components/forms/ControllerTextarea.tsx
index 590735586..6155dfa87 100644
--- a/src/lib/components/forms/ControllerTextarea.tsx
+++ b/src/lib/components/forms/ControllerTextarea.tsx
@@ -41,10 +41,12 @@ export const ControllerTextarea = <T extends FieldValues>({
   });
   const { field } = useController({ name, control, rules });
   const isError = Boolean(error);
+  const isRequired = "required" in rules;
   return (
     <FormControl
       size="md"
       isInvalid={isError}
+      isRequired={isRequired}
       sx={{ "> div": { marginTop: "1 !important" } }}
       {...componentProps}
       {...field}

From 57d823a8124b23cb5646c96ca2e49f24abff6bd5 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 26 Apr 2023 13:08:37 +0700
Subject: [PATCH 057/354] chore: fix nullish, query keys

---
 src/lib/pages/pools/components/PoolHeader.tsx | 6 +++---
 src/lib/pages/pools/components/PoolLogo.tsx   | 4 ++--
 src/lib/services/poolService.ts               | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/pages/pools/components/PoolHeader.tsx b/src/lib/pages/pools/components/PoolHeader.tsx
index 59cff14e5..641961c20 100644
--- a/src/lib/pages/pools/components/PoolHeader.tsx
+++ b/src/lib/pages/pools/components/PoolHeader.tsx
@@ -25,7 +25,7 @@ export const PoolHeader = ({
       <Box>
         <Flex gap={1} flexWrap="wrap">
           <Heading as="h6" fontWeight="600" variant="h6">
-            {poolLiquidity[0].symbol || getTokenLabel(poolLiquidity[0].denom)}
+            {poolLiquidity[0].symbol ?? getTokenLabel(poolLiquidity[0].denom)}
           </Heading>
           {poolLiquidity.slice(1, 3).map((item) => (
             <Flex key={item.denom} gap={1}>
@@ -39,7 +39,7 @@ export const PoolHeader = ({
                 /
               </Heading>
               <Heading as="h6" fontWeight="600" variant="h6">
-                {item.symbol || getTokenLabel(item.denom)}
+                {item.symbol ?? getTokenLabel(item.denom)}
               </Heading>
             </Flex>
           ))}
@@ -55,7 +55,7 @@ export const PoolHeader = ({
               </Heading>
               <Heading as="h6" fontWeight="600" variant="h6">
                 {poolLiquidity.length === 4
-                  ? poolLiquidity[3].symbol ||
+                  ? poolLiquidity[3].symbol ??
                     getTokenLabel(poolLiquidity[3].denom)
                   : `+${poolLiquidity.length - 3}`}
               </Heading>
diff --git a/src/lib/pages/pools/components/PoolLogo.tsx b/src/lib/pages/pools/components/PoolLogo.tsx
index 3a68efbe2..f9d74e164 100644
--- a/src/lib/pages/pools/components/PoolLogo.tsx
+++ b/src/lib/pages/pools/components/PoolLogo.tsx
@@ -24,7 +24,7 @@ export const PoolLogo = ({ poolLiquidity }: PoolLogoProps) => {
             <Image
               key={item.denom}
               boxSize={10}
-              src={item.logo || getUndefinedTokenIcon(item.denom)}
+              src={item.logo ?? getUndefinedTokenIcon(item.denom)}
               zIndex={2 - i}
             />
           ))}
@@ -45,7 +45,7 @@ export const PoolLogo = ({ poolLiquidity }: PoolLogoProps) => {
           <Image
             key={asset.denom}
             boxSize={10}
-            src={asset.logo || getUndefinedTokenIcon(asset.denom)}
+            src={asset.logo ?? getUndefinedTokenIcon(asset.denom)}
             zIndex={2 - i}
           />
         ))
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index 8d572dbf2..340275e16 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -70,7 +70,7 @@ export const usePoolListQuery = ({
 
   return useQuery(
     [
-      "pool_list_by_is_supported",
+      "pool_list_query",
       isSupported,
       poolType,
       isSuperfluidOnly,
@@ -121,7 +121,7 @@ export const usePoolListCountQuery = ({
 
   return useQuery(
     [
-      "pool_list_count_by_is_supported",
+      "pool_list_count_query",
       isSupported,
       poolType,
       isSuperfluidOnly,

From 1472a5e3ff28dc17ab6de2030f11a29e18c3995c Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 26 Apr 2023 14:29:06 +0700
Subject: [PATCH 058/354] fix: address permission error

---
 .../upload/AddressPermissionInput.tsx         | 123 ------------------
 .../upload/InstantiatePermissionRadio.tsx     |  75 ++++++++---
 src/lib/components/upload/UploadSection.tsx   |   7 +-
 3 files changed, 64 insertions(+), 141 deletions(-)
 delete mode 100644 src/lib/components/upload/AddressPermissionInput.tsx

diff --git a/src/lib/components/upload/AddressPermissionInput.tsx b/src/lib/components/upload/AddressPermissionInput.tsx
deleted file mode 100644
index cd1093f93..000000000
--- a/src/lib/components/upload/AddressPermissionInput.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Button, Flex } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
-import { useCallback } from "react";
-import type {
-  Control,
-  FieldArrayWithId,
-  FieldPath,
-  FieldValues,
-  UseFieldArrayRemove,
-} from "react-hook-form";
-import { useWatch } from "react-hook-form";
-
-import { useCelatoneApp, useValidateAddress } from "lib/app-provider";
-import { AssignMe } from "lib/components/AssignMe";
-import type { FormStatus, TextInputProps } from "lib/components/forms";
-import { ControllerInput } from "lib/components/forms";
-import { CustomIcon } from "lib/components/icon";
-import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import type { Addr, Option } from "lib/types";
-
-interface AddressPermissionInputProps<T extends FieldValues>
-  extends Omit<TextInputProps, "value" | "setInputState"> {
-  index: number;
-  fields: FieldArrayWithId<T>[];
-  control: Control<T>;
-  addresses: Record<"address", Addr>[];
-  remove: UseFieldArrayRemove;
-  name: FieldPath<T>;
-  setValue: (value: Addr) => void;
-}
-
-const getAddressStatus = (input: string, error: Option<string>): FormStatus => {
-  if (error) return { state: "error", message: error };
-  if (!input) return { state: "init" };
-  return { state: "success", message: "Valid Address" };
-};
-
-export const AddressPermissionInput = <T extends FieldValues>({
-  index,
-  control,
-  addresses,
-  remove,
-  name,
-  fields,
-  error,
-  setValue,
-}: AddressPermissionInputProps<T>) => {
-  const { address: walletAddress } = useWallet();
-  const {
-    appHumanAddress: { example: exampleHumanAddress },
-  } = useCelatoneApp();
-
-  const { validateUserAddress, validateContractAddress } = useValidateAddress();
-  const validateAddress = useCallback(
-    (input: string) =>
-      input && !!validateContractAddress(input) && !!validateUserAddress(input)
-        ? "Invalid address or not exists."
-        : undefined,
-    [validateContractAddress, validateUserAddress]
-  );
-
-  const watcher = useWatch({
-    name,
-    control,
-  });
-
-  const status = getAddressStatus(watcher, error ?? validateAddress(watcher));
-
-  const containAddress = addresses.some(
-    ({ address }) => address === walletAddress
-  );
-
-  return (
-    <Flex gap={2} my={6} width="100%">
-      <ControllerInput
-        name={name}
-        control={control}
-        label="Address"
-        status={status}
-        placeholder={`ex. ${exampleHumanAddress}`}
-        variant="floating"
-        rules={{
-          required: "Address is empty",
-        }}
-        error={
-          (addresses[index]?.address &&
-            addresses.find(
-              ({ address }, i) =>
-                i < index && address === addresses[index]?.address
-            ) &&
-            "You already input this address") ||
-          error
-        }
-        helperAction={
-          <AssignMe
-            onClick={
-              walletAddress && !containAddress
-                ? () => {
-                    AmpTrack(AmpEvent.USE_ASSIGN_ME);
-                    setValue(walletAddress as Addr);
-                  }
-                : undefined
-            }
-            isDisable={containAddress}
-          />
-        }
-      />
-      <Button
-        w="56px"
-        h="56px"
-        variant="outline-gray"
-        size="lg"
-        disabled={fields.length <= 1}
-        onClick={() => remove(index)}
-      >
-        <CustomIcon
-          name="delete"
-          color={fields.length <= 1 ? "pebble.600" : "text.dark"}
-        />
-      </Button>
-    </Flex>
-  );
-};
diff --git a/src/lib/components/upload/InstantiatePermissionRadio.tsx b/src/lib/components/upload/InstantiatePermissionRadio.tsx
index 8475cc5bd..b7ddbd780 100644
--- a/src/lib/components/upload/InstantiatePermissionRadio.tsx
+++ b/src/lib/components/upload/InstantiatePermissionRadio.tsx
@@ -1,16 +1,19 @@
-import { Text, Box, Radio, RadioGroup, Button } from "@chakra-ui/react";
-import type { Control, UseFormSetValue } from "react-hook-form";
+import { Text, Box, Radio, RadioGroup, Button, Flex } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
+import type { Control, UseFormSetValue, UseFormTrigger } from "react-hook-form";
 import { useController, useFieldArray, useWatch } from "react-hook-form";
 
+import { AddressInput } from "../AddressInput";
+import { AssignMe } from "../AssignMe";
 import { CustomIcon } from "lib/components/icon";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import type { Addr, UploadSectionState } from "lib/types";
 import { AccessType } from "lib/types";
 
-import { AddressPermissionInput } from "./AddressPermissionInput";
-
 interface InstantiatePermissionRadioProps {
   control: Control<UploadSectionState>;
   setValue: UseFormSetValue<UploadSectionState>;
+  trigger: UseFormTrigger<UploadSectionState>;
 }
 
 interface PermissionRadioProps {
@@ -28,7 +31,10 @@ const PermissionRadio = ({ isSelected, value, text }: PermissionRadioProps) => (
 export const InstantiatePermissionRadio = ({
   control,
   setValue,
+  trigger,
 }: InstantiatePermissionRadioProps) => {
+  const { address: walletAddress } = useWallet();
+
   const { fields, append, remove } = useFieldArray({
     control,
     name: "addresses",
@@ -74,19 +80,54 @@ export const InstantiatePermissionRadio = ({
           />
           {permission === AccessType.ACCESS_TYPE_ANY_OF_ADDRESSES && (
             <Box>
-              {fields.map((_, idx) => (
-                <AddressPermissionInput
-                  index={idx}
-                  control={control}
-                  fields={fields}
-                  addresses={addresses}
-                  remove={remove}
-                  name={`addresses.${idx}.address`}
-                  setValue={(value: Addr) =>
-                    setValue(`addresses.${idx}.address`, value)
-                  }
-                  error={errors.addresses?.[idx]?.address?.message}
-                />
+              {fields.map((field, idx) => (
+                <Flex gap={2} my={6} key={field.id}>
+                  <AddressInput
+                    name={`addresses.${idx}.address`}
+                    control={control}
+                    label="Address"
+                    variant="floating"
+                    error={
+                      (addresses[idx]?.address &&
+                        addresses.find(
+                          ({ address }, i) =>
+                            i < idx && address === addresses[idx]?.address
+                        ) &&
+                        "You already input this address") ||
+                      errors.addresses?.[idx]?.address?.message
+                    }
+                    helperAction={
+                      <AssignMe
+                        onClick={() => {
+                          AmpTrack(AmpEvent.USE_ASSIGN_ME);
+                          setValue(
+                            `addresses.${idx}.address`,
+                            walletAddress as Addr
+                          );
+                          trigger(`addresses.${idx}.address`);
+                        }}
+                        isDisable={
+                          addresses.findIndex(
+                            (x) => x.address === walletAddress
+                          ) > -1
+                        }
+                      />
+                    }
+                  />
+                  <Button
+                    w="56px"
+                    h="56px"
+                    variant="outline-gray"
+                    size="lg"
+                    disabled={fields.length <= 1}
+                    onClick={() => remove(idx)}
+                  >
+                    <CustomIcon
+                      name="delete"
+                      color={fields.length <= 1 ? "pebble.600" : "text.dark"}
+                    />
+                  </Button>
+                </Flex>
               ))}
               <Button
                 variant="outline-primary"
diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index 4686b9f72..4b5a498d0 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -53,6 +53,7 @@ export const UploadSection = ({
     setValue,
     watch,
     formState: { errors },
+    trigger,
   } = useForm<UploadSectionState>({
     defaultValues: {
       wasmFile: undefined,
@@ -184,7 +185,11 @@ export const UploadSection = ({
         variant="floating"
         my="32px"
       />
-      <InstantiatePermissionRadio control={control} setValue={setValue} />
+      <InstantiatePermissionRadio
+        control={control}
+        setValue={setValue}
+        trigger={trigger}
+      />
 
       <Box mt={10} width="full">
         {(simulateError || isSimulating) && (

From c71fa2d9b37ad84dae768cb0f23f33ec207d3546 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 26 Apr 2023 16:09:47 +0700
Subject: [PATCH 059/354] feat: add swap msg

---
 src/lib/components/AccordionStepperItem.tsx   |  15 ++-
 src/lib/components/Loading.tsx                |   8 +-
 src/lib/components/table/AccordionTx.tsx      |   6 +-
 src/lib/gql/gql.ts                            |  11 +-
 src/lib/gql/graphql.ts                        |  93 +++++++++++++++
 src/lib/pages/pool/components/PoolHeader.tsx  |   5 +-
 src/lib/pages/pool/components/PoolLogo.tsx    |  61 +++++-----
 .../table/pool-txs/PoolTxsTable.tsx           |   7 +-
 .../table/pool-txs/PoolTxsTableHeader.tsx     |   1 +
 .../table/pool-txs/PoolTxsTableMultiRow.tsx   |  44 ++++---
 .../table/pool-txs/PoolTxsTableRow.tsx        |  65 +++++++++--
 .../pool/components/table/pool-txs/index.tsx  |   6 +-
 .../table/pool-txs/messages/AssetCard.tsx     | 110 ++++++++++++++++++
 .../table/pool-txs/messages/PoolAssets.tsx    |  61 ++++++++++
 .../table/pool-txs/messages/index.tsx         |  63 ++++++++--
 .../swap/MsgSwapExactAmountInAction.tsx       |  46 ++++++--
 .../swap/MsgSwapExactAmountInDetail.tsx       |  41 +++++++
 .../swap/MsgSwapExactAmountOutAction.tsx      |  56 +++++++++
 .../swap/MsgSwapExactAmountOutDetail.tsx      |  51 ++++++++
 .../pool-txs/messages/swap/PoolRoute.tsx      |  53 +++++++++
 .../table/pool-txs/messages/swap/PoolSwap.tsx |  63 ++++++++++
 src/lib/query/pool.ts                         |   9 ++
 src/lib/query/tx.ts                           |   2 +-
 src/lib/services/expression/txExpression.ts   |   1 +
 src/lib/services/poolService.ts               |  34 +++++-
 src/lib/styles/globals.css                    |   7 ++
 26 files changed, 828 insertions(+), 91 deletions(-)
 create mode 100644 src/lib/pages/pool/components/table/pool-txs/messages/AssetCard.tsx
 create mode 100644 src/lib/pages/pool/components/table/pool-txs/messages/PoolAssets.tsx
 create mode 100644 src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
 create mode 100644 src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
 create mode 100644 src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
 create mode 100644 src/lib/pages/pool/components/table/pool-txs/messages/swap/PoolRoute.tsx
 create mode 100644 src/lib/pages/pool/components/table/pool-txs/messages/swap/PoolSwap.tsx

diff --git a/src/lib/components/AccordionStepperItem.tsx b/src/lib/components/AccordionStepperItem.tsx
index 84ee343d1..cdea4f6f7 100644
--- a/src/lib/components/AccordionStepperItem.tsx
+++ b/src/lib/components/AccordionStepperItem.tsx
@@ -5,7 +5,7 @@ export const AccordionStepperItem = () => (
     <Flex
       id="before-stepper"
       w="1px"
-      h="31px"
+      h="28px"
       right="45%"
       bottom="9px"
       background="pebble.600"
@@ -20,8 +20,17 @@ export const AccordionStepperItem = () => (
       w="10px"
       borderColor="pebble.600"
       borderWidth="1px"
-      position="relative"
-      zIndex={1}
+    />
+    <Flex
+      id="after-stepper"
+      w="1px"
+      h="28px"
+      right="45%"
+      top="9px"
+      background="pebble.600"
+      position="absolute"
+      visibility="hidden"
+      zIndex={0}
     />
   </Flex>
 );
diff --git a/src/lib/components/Loading.tsx b/src/lib/components/Loading.tsx
index d7248cac8..829fc661c 100644
--- a/src/lib/components/Loading.tsx
+++ b/src/lib/components/Loading.tsx
@@ -1,8 +1,12 @@
 import { Flex, Spinner, Text } from "@chakra-ui/react";
 
-export const Loading = () => (
+interface LoadingProps {
+  withBorder?: boolean;
+}
+
+export const Loading = ({ withBorder = true }: LoadingProps) => (
   <Flex
-    borderY="1px solid"
+    borderY={withBorder ? "1px solid" : undefined}
     borderColor="pebble.700"
     width="full"
     py="60px"
diff --git a/src/lib/components/table/AccordionTx.tsx b/src/lib/components/table/AccordionTx.tsx
index 8bc6b1dfa..fecf6311a 100644
--- a/src/lib/components/table/AccordionTx.tsx
+++ b/src/lib/components/table/AccordionTx.tsx
@@ -41,6 +41,7 @@ export const AccordionTx = ({
   const [showButton, setShowButton] = useState(false);
   return (
     <TableRow
+      className="accordion-stepper-wrapper"
       minH={0}
       h="40px"
       borderBottom="none"
@@ -48,11 +49,6 @@ export const AccordionTx = ({
       gap={3}
       _hover={{ background: "pebble.800" }}
       transition="all .25s ease-in-out"
-      css={{
-        "&:not(:first-of-type) div#before-stepper": {
-          visibility: "visible",
-        },
-      }}
       onMouseEnter={() => setShowButton(true)}
       onMouseLeave={() => setShowButton(false)}
     >
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index bfc17cf44..f09624cee 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -53,6 +53,8 @@ const documents = {
     types.GetPoolListCountDocument,
   "\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n    }\n  }\n":
     types.GetPoolByPoolIdDocument,
+  "\n  query getPoolsByPoolIds($poolIds: [Int!]!) {\n    pools(where: { id: { _in: $poolIds } }) {\n      id\n      liquidity\n    }\n  }\n":
+    types.GetPoolsByPoolIdsDocument,
   "\n  query getRelatedProposalsByContractAddressPagination(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_proposals(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { proposal_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      proposal {\n        title\n        status\n        voting_end_time\n        deposit_end_time\n        type\n        account {\n          address\n        }\n        is_expedited\n      }\n      proposal_id\n      resolved_height\n    }\n  }\n":
     types.GetRelatedProposalsByContractAddressPaginationDocument,
   "\n  query getRelatedProposalsCountByContractAddress($contractAddress: String!) {\n    contract_proposals_aggregate(\n      where: { contract: { address: { _eq: $contractAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
@@ -71,7 +73,7 @@ const documents = {
     types.GetTxsByAddressPaginationDocument,
   "\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetTxsCountByAddressDocument,
-  "\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n":
+  "\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc, transaction_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n":
     types.GetTxsByPoolIdPaginationDocument,
   "\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetTxsCountByPoolIdDocument,
@@ -160,6 +162,9 @@ export function graphql(
 export function graphql(
   source: "\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n    }\n  }\n"
 ): typeof documents["\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getPoolsByPoolIds($poolIds: [Int!]!) {\n    pools(where: { id: { _in: $poolIds } }) {\n      id\n      liquidity\n    }\n  }\n"
+): typeof documents["\n  query getPoolsByPoolIds($poolIds: [Int!]!) {\n    pools(where: { id: { _in: $poolIds } }) {\n      id\n      liquidity\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getRelatedProposalsByContractAddressPagination(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_proposals(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { proposal_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      proposal {\n        title\n        status\n        voting_end_time\n        deposit_end_time\n        type\n        account {\n          address\n        }\n        is_expedited\n      }\n      proposal_id\n      resolved_height\n    }\n  }\n"
 ): typeof documents["\n  query getRelatedProposalsByContractAddressPagination(\n    $contractAddress: String!\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    contract_proposals(\n      where: { contract: { address: { _eq: $contractAddress } } }\n      order_by: { proposal_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      proposal {\n        title\n        status\n        voting_end_time\n        deposit_end_time\n        type\n        account {\n          address\n        }\n        is_expedited\n      }\n      proposal_id\n      resolved_height\n    }\n  }\n"];
@@ -188,8 +193,8 @@ export function graphql(
   source: "\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"
-): typeof documents["\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"];
+  source: "\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc, transaction_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"
+): typeof documents["\n  query getTxsByPoolIdPagination(\n    $expression: pool_transactions_bool_exp\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pool_transactions(\n      where: $expression\n      order_by: { block_height: desc, transaction_id: desc }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      block {\n        height\n        timestamp\n      }\n      transaction {\n        account {\n          address\n        }\n        hash\n        success\n        messages\n        is_ibc\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getTxsCountByPoolId($expression: pool_transactions_bool_exp) {\n    pool_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index 59d3f62f9..db0fe16b5 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -12581,6 +12581,15 @@ export type GetPoolByPoolIdQuery = {
   } | null;
 };
 
+export type GetPoolsByPoolIdsQueryVariables = Exact<{
+  poolIds: Array<Scalars["Int"]> | Scalars["Int"];
+}>;
+
+export type GetPoolsByPoolIdsQuery = {
+  __typename?: "query_root";
+  pools: Array<{ __typename?: "pools"; id: number; liquidity: any }>;
+};
+
 export type GetRelatedProposalsByContractAddressPaginationQueryVariables =
   Exact<{
     contractAddress: Scalars["String"];
@@ -16228,6 +16237,85 @@ export const GetPoolByPoolIdDocument = {
   GetPoolByPoolIdQuery,
   GetPoolByPoolIdQueryVariables
 >;
+export const GetPoolsByPoolIdsDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getPoolsByPoolIds" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "poolIds" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "ListType",
+              type: {
+                kind: "NonNullType",
+                type: {
+                  kind: "NamedType",
+                  name: { kind: "Name", value: "Int" },
+                },
+              },
+            },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "pools" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "where" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "id" },
+                      value: {
+                        kind: "ObjectValue",
+                        fields: [
+                          {
+                            kind: "ObjectField",
+                            name: { kind: "Name", value: "_in" },
+                            value: {
+                              kind: "Variable",
+                              name: { kind: "Name", value: "poolIds" },
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "id" } },
+                { kind: "Field", name: { kind: "Name", value: "liquidity" } },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  GetPoolsByPoolIdsQuery,
+  GetPoolsByPoolIdsQueryVariables
+>;
 export const GetRelatedProposalsByContractAddressPaginationDocument = {
   kind: "Document",
   definitions: [
@@ -17296,6 +17384,11 @@ export const GetTxsByPoolIdPaginationDocument = {
                       name: { kind: "Name", value: "block_height" },
                       value: { kind: "EnumValue", value: "desc" },
                     },
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "transaction_id" },
+                      value: { kind: "EnumValue", value: "desc" },
+                    },
                   ],
                 },
               },
diff --git a/src/lib/pages/pool/components/PoolHeader.tsx b/src/lib/pages/pool/components/PoolHeader.tsx
index 0f30f749c..5b5b75707 100644
--- a/src/lib/pages/pool/components/PoolHeader.tsx
+++ b/src/lib/pages/pool/components/PoolHeader.tsx
@@ -24,7 +24,10 @@ export const PoolHeader = ({
   return (
     <Flex justifyContent="space-between" w="full">
       <Flex alignItems="center" gap={4}>
-        <PoolLogo poolLiquidity={poolLiquidity} />
+        <PoolLogo
+          assets={poolLiquidity.map((item) => item.denom)}
+          assetInfos={assetInfos}
+        />
         <Box>
           <Flex gap={1}>
             <Flex
diff --git a/src/lib/pages/pool/components/PoolLogo.tsx b/src/lib/pages/pool/components/PoolLogo.tsx
index 4d2a28297..cff76acfc 100644
--- a/src/lib/pages/pool/components/PoolLogo.tsx
+++ b/src/lib/pages/pool/components/PoolLogo.tsx
@@ -1,60 +1,59 @@
-import { Flex, Image } from "@chakra-ui/react";
+import { Flex, Image, Text } from "@chakra-ui/react";
 
 import { getUndefinedTokenIcon } from "../utils";
-import { useAssetInfos } from "lib/services/assetService";
-import type { PoolDetail } from "lib/types/pool";
+import type { AssetInfo, Option } from "lib/types";
 
 interface PoolLogoProps {
-  poolLiquidity: PoolDetail["poolLiquidity"];
+  assets: string[];
+  assetInfos: Option<Record<string, AssetInfo>>;
+  logoSize?: number;
+  marginLeft?: number;
+  textVariant?: string;
 }
-export const PoolLogo = ({ poolLiquidity }: PoolLogoProps) => {
-  const { assetInfos } = useAssetInfos();
+
+export const PoolLogo = ({
+  assets,
+  assetInfos,
+  logoSize = 10,
+  marginLeft = -12,
+  textVariant = "body2",
+}: PoolLogoProps) => {
+  const renderLogo = (denom: string, i: number) => (
+    <Image
+      key={denom}
+      boxSize={logoSize}
+      src={assetInfos?.[denom]?.logo || getUndefinedTokenIcon(denom)}
+      zIndex={i * -1 + 2}
+    />
+  );
 
   return (
     <Flex
       css={{
         ">:not(:first-child)": {
-          marginLeft: "-12px",
+          marginLeft,
         },
       }}
       width="96px"
       alignItems="center"
       justifyContent="center"
     >
-      {poolLiquidity.length > 3 ? (
+      {assets.length > 3 ? (
         <>
-          {poolLiquidity.slice(0, 2).map((item, i) => (
-            <Image
-              boxSize={10}
-              src={
-                assetInfos?.[item.denom]?.logo ||
-                getUndefinedTokenIcon(item.denom)
-              }
-              zIndex={i * -1 + 2}
-            />
-          ))}
+          {assets.slice(0, 2).map(renderLogo)}
           <Flex
-            width={10}
-            height={10}
+            width={logoSize}
+            height={logoSize}
             borderRadius="full"
             backgroundColor="pebble.700"
             alignItems="center"
             justifyContent="center"
           >
-            +{poolLiquidity.length - 2}
+            <Text variant={textVariant}> +{assets.length - 2}</Text>
           </Flex>
         </>
       ) : (
-        poolLiquidity.map((asset, i) => (
-          <Image
-            boxSize={10}
-            src={
-              assetInfos?.[asset.denom]?.logo ||
-              getUndefinedTokenIcon(asset.denom)
-            }
-            zIndex={i * -1 + 2}
-          />
-        ))
+        assets.map(renderLogo)
       )}
     </Flex>
   );
diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx
index 3fa33d9c7..21b10296e 100644
--- a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTable.tsx
@@ -1,6 +1,7 @@
 import { TableContainer } from "@chakra-ui/react";
 
 import { Loading } from "lib/components/Loading";
+import type { AssetInfosOpt } from "lib/services/assetService";
 import type { Option, Transaction } from "lib/types";
 
 import { PoolTxsTableHeader } from "./PoolTxsTableHeader";
@@ -8,19 +9,22 @@ import { PoolTxsTableMultiRow } from "./PoolTxsTableMultiRow";
 
 interface PoolTxsTableProps {
   transactions: Option<Transaction[]>;
+  assetInfos: AssetInfosOpt;
   isLoading: boolean;
   emptyState: JSX.Element;
 }
 
 export const PoolTxsTable = ({
   transactions,
+  assetInfos,
   isLoading,
   emptyState,
 }: PoolTxsTableProps) => {
   if (isLoading) return <Loading />;
   if (!transactions?.length) return emptyState;
 
-  const templateColumns = "200px minmax(360px, 1fr) max(150px) max(220px) 60px";
+  const templateColumns =
+    "180px 40px minmax(360px, 1fr) max(150px) max(220px) 60px";
 
   return (
     <TableContainer>
@@ -29,6 +33,7 @@ export const PoolTxsTable = ({
         <PoolTxsTableMultiRow
           key={transaction.hash}
           transaction={transaction}
+          assetInfos={assetInfos}
           templateColumns={templateColumns}
         />
       ))}
diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableHeader.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableHeader.tsx
index 911ed4821..0099e7331 100644
--- a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableHeader.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableHeader.tsx
@@ -10,6 +10,7 @@ export const PoolTxsTableHeader = ({
 }) => (
   <Grid templateColumns={templateColumns} minW="min-content">
     <TableHeader>Transaction Hash</TableHeader>
+    <TableHeader />
     <TableHeader>Actions</TableHeader>
     <TableHeader>Sender</TableHeader>
     <TableHeader>Timestamp</TableHeader>
diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableMultiRow.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableMultiRow.tsx
index eb685e8b0..5dcd9d29c 100644
--- a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableMultiRow.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableMultiRow.tsx
@@ -1,27 +1,41 @@
+import type { AssetInfosOpt } from "lib/services/assetService";
 import type { Transaction } from "lib/types";
 
 import { PoolTxsTableRow } from "./PoolTxsTableRow";
 
 interface PoolTxsTableMultiRowProps {
   transaction: Transaction;
+  assetInfos: AssetInfosOpt;
   templateColumns: string;
 }
 
 export const PoolTxsTableMultiRow = ({
   transaction,
+  assetInfos,
   templateColumns,
-}: PoolTxsTableMultiRowProps) => (
-  <>
-    {transaction.messages.map((message, index) => (
-      <PoolTxsTableRow
-        key={transaction.hash + index.toString()}
-        txHash={!index ? transaction.hash : undefined}
-        msgCount={transaction.messages.length}
-        message={message}
-        sender={transaction.sender}
-        created={!index ? transaction.created : undefined}
-        templateColumns={templateColumns}
-      />
-    ))}
-  </>
-);
+}: PoolTxsTableMultiRowProps) => {
+  let row = 0;
+  return (
+    <>
+      {transaction.messages.map((message, index) => {
+        row += 1;
+        return (
+          <PoolTxsTableRow
+            key={transaction.hash + index.toString()}
+            isFirstRow={row === 1}
+            txHash={transaction.hash}
+            success={transaction.success}
+            msgCount={transaction.messages.length}
+            message={message}
+            sender={transaction.sender}
+            created={transaction.created}
+            msgIndex={index}
+            blockHeight={transaction.height}
+            assetInfos={assetInfos}
+            templateColumns={templateColumns}
+          />
+        );
+      })}
+    </>
+  );
+};
diff --git a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx
index a9508169c..5f8676bfe 100644
--- a/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/PoolTxsTableRow.tsx
@@ -3,29 +3,45 @@ import { Flex, Text, Grid, useDisclosure, Box, Badge } from "@chakra-ui/react";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { TableNoBorderRow } from "lib/components/table";
+import type { AssetInfosOpt } from "lib/services/assetService";
 import type { Addr, Message } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 import { PoolTxsAction, PoolTxsDetail } from "./messages";
 
 interface PoolTxsTableRowProps {
-  txHash?: string;
+  isFirstRow: boolean;
+  txHash: string;
+  success: boolean;
   msgCount: number;
   message: Message;
   sender: Addr;
-  created?: Date;
+  created: Date;
+  msgIndex: number;
+  blockHeight: number;
+  assetInfos: AssetInfosOpt;
   templateColumns: string;
 }
 
 export const PoolTxsTableRow = ({
+  isFirstRow,
   txHash,
+  success,
   msgCount,
   message,
   sender,
   created,
+  msgIndex,
+  blockHeight,
+  assetInfos,
   templateColumns,
 }: PoolTxsTableRowProps) => {
   const { isOpen, onToggle } = useDisclosure();
+  const msgDetailTemplateColumns = templateColumns
+    .split(" ")
+    .slice(0, 2)
+    .concat("1fr")
+    .join(" ");
 
   return (
     <Box
@@ -43,7 +59,7 @@ export const PoolTxsTableRow = ({
         cursor="pointer"
       >
         <TableNoBorderRow>
-          {txHash && (
+          {isFirstRow && (
             <Flex>
               <ExplorerLink
                 value={txHash.toLocaleUpperCase()}
@@ -59,7 +75,15 @@ export const PoolTxsTableRow = ({
           )}
         </TableNoBorderRow>
         <TableNoBorderRow>
-          <PoolTxsAction msg={message} />
+          {isFirstRow &&
+            (success ? (
+              <CustomIcon name="check" color="success.main" />
+            ) : (
+              <CustomIcon name="close" color="error.main" />
+            ))}
+        </TableNoBorderRow>
+        <TableNoBorderRow>
+          <PoolTxsAction msg={message} assetInfos={assetInfos} />
         </TableNoBorderRow>
 
         <TableNoBorderRow>
@@ -67,7 +91,7 @@ export const PoolTxsTableRow = ({
         </TableNoBorderRow>
 
         <TableNoBorderRow>
-          {created && (
+          {isFirstRow && (
             <Flex direction="column" gap={1}>
               <Text variant="body3">{formatUTC(created)}</Text>
               <Text variant="body3" color="text.dark">
@@ -77,13 +101,32 @@ export const PoolTxsTableRow = ({
           )}
         </TableNoBorderRow>
 
-        <TableNoBorderRow>
-          <CustomIcon name={isOpen ? "chevron-up" : "chevron-down"} />
-        </TableNoBorderRow>
-      </Grid>
-      <Grid w="full" py={4} hidden={!isOpen}>
-        <PoolTxsDetail msg={message} />
+        {success && (
+          <TableNoBorderRow>
+            <CustomIcon name={isOpen ? "chevron-up" : "chevron-down"} />
+          </TableNoBorderRow>
+        )}
       </Grid>
+      {success && (
+        <Grid
+          w="full"
+          py={4}
+          hidden={!isOpen}
+          templateColumns={msgDetailTemplateColumns}
+        >
+          <TableNoBorderRow py={0} />
+          <TableNoBorderRow py={0} />
+          <TableNoBorderRow py={0}>
+            <PoolTxsDetail
+              txHash={txHash}
+              blockHeight={blockHeight}
+              msgIndex={msgIndex}
+              msg={message}
+              assetInfos={assetInfos}
+            />
+          </TableNoBorderRow>
+        </Grid>
+      )}
     </Box>
   );
 };
diff --git a/src/lib/pages/pool/components/table/pool-txs/index.tsx b/src/lib/pages/pool/components/table/pool-txs/index.tsx
index f229e5387..64dad69cb 100644
--- a/src/lib/pages/pool/components/table/pool-txs/index.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/index.tsx
@@ -3,6 +3,7 @@ import type { ChangeEvent } from "react";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
+import { useAssetInfos } from "lib/services/assetService";
 import { useTxsByPoolIdPagination } from "lib/services/txService";
 import type { PoolTxFilter } from "lib/types";
 
@@ -19,6 +20,8 @@ export const PoolRelatedTxsTable = ({
   countTxs,
   type,
 }: PoolRelatedTxsTableProps) => {
+  const { assetInfos, isLoading: isLoadingAssetInfos } = useAssetInfos();
+
   const {
     pagesQuantity,
     currentPage,
@@ -63,7 +66,8 @@ export const PoolRelatedTxsTable = ({
     <>
       <PoolTxsTable
         transactions={txs}
-        isLoading={isLoading}
+        assetInfos={assetInfos}
+        isLoading={isLoadingAssetInfos || isLoading}
         emptyState={
           <EmptyState
             withBorder
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/AssetCard.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/AssetCard.tsx
new file mode 100644
index 000000000..35dfff440
--- /dev/null
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/AssetCard.tsx
@@ -0,0 +1,110 @@
+import type { FlexProps } from "@chakra-ui/react";
+import { Badge, Text, Image, Flex, Tooltip } from "@chakra-ui/react";
+
+import { Copier } from "lib/components/copy";
+import { NAToken } from "lib/icon";
+import { getUndefinedTokenIcon } from "lib/pages/pool/utils";
+import type { AssetInfo, Option, Token, U, USD } from "lib/types";
+import {
+  calculateAssetValue,
+  formatPrice,
+  formatUTokenWithPrecision,
+  toToken,
+} from "lib/utils";
+
+interface AssetCardProps extends FlexProps {
+  amount: string;
+  denom: string;
+  assetInfo: Option<AssetInfo>;
+  amptrackSection?: string;
+}
+
+export const AssetCard = ({
+  amount,
+  denom,
+  assetInfo,
+  amptrackSection,
+  ...cardProps
+}: AssetCardProps) => {
+  const symbol = assetInfo?.symbol ?? denom;
+  return (
+    <Tooltip
+      hasArrow
+      label={`Token ID: ${denom}`}
+      placement="top"
+      bg="honeydew.darker"
+      maxW="240px"
+      whiteSpace="pre-line"
+      textAlign="center"
+    >
+      <Flex
+        className="copier-wrapper"
+        direction="column"
+        minH="101px"
+        gap={2}
+        p={3}
+        background="pebble.900"
+        borderRadius="8px"
+        {...cardProps}
+      >
+        <Flex
+          gap={1}
+          alignItems="center"
+          borderBottom="1px solid"
+          borderBottomColor="pebble.700"
+          pb={2}
+        >
+          <Image
+            boxSize={6}
+            src={assetInfo?.logo ?? getUndefinedTokenIcon(denom)}
+            alt={symbol}
+            fallback={<NAToken />}
+            fallbackStrategy="onError"
+          />
+          <Text
+            variant="body2"
+            className="ellipsis"
+            maxW="91"
+            fontWeight="bold"
+          >
+            {symbol}
+          </Text>
+          {assetInfo && (
+            <Badge variant="gray" ml="6px">
+              {formatPrice(assetInfo.price as USD<number>)}
+            </Badge>
+          )}
+          <Copier
+            type={assetInfo?.price ? "supported_asset" : "unsupported_asset"}
+            value={denom}
+            copyLabel="Token ID Copied!"
+            display="none"
+            ml="1px"
+            amptrackSection={amptrackSection}
+          />
+        </Flex>
+
+        <Flex direction="column">
+          <Text fontWeight="700" variant="body2">
+            {formatUTokenWithPrecision(
+              amount as U<Token>,
+              assetInfo?.precision ?? 0
+            )}
+          </Text>
+          {assetInfo && (
+            <Text variant="body3" color="text.dark">
+              `($
+              {formatPrice(
+                calculateAssetValue(
+                  toToken(amount as U<Token>, assetInfo.precision),
+                  assetInfo.price as USD<number>
+                )
+              )}
+              )`
+            </Text>
+          )}
+        </Flex>
+      </Flex>
+    </Tooltip>
+  );
+};
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/PoolAssets.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/PoolAssets.tsx
new file mode 100644
index 000000000..4aba8fa79
--- /dev/null
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/PoolAssets.tsx
@@ -0,0 +1,61 @@
+import { Flex, Text, Box } from "@chakra-ui/react";
+
+import { PoolLogo } from "lib/pages/pool/components/PoolLogo";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import { getTokenLabel } from "lib/utils";
+
+interface PoolAssetsProps {
+  poolId: number;
+  assets: string[];
+  outAsset: string;
+  assetInfos: AssetInfosOpt;
+}
+
+export const PoolAssets = ({
+  poolId,
+  assets,
+  outAsset,
+  assetInfos,
+}: PoolAssetsProps) => (
+  <Flex justifyContent="space-between" w="full" my={2}>
+    <Flex alignItems="center">
+      <PoolLogo
+        assets={assets}
+        assetInfos={assetInfos}
+        logoSize={5}
+        marginLeft={-4}
+        textVariant="small"
+      />
+      <Box>
+        <Flex gap={1}>
+          <Flex
+            gap={1}
+            css={{
+              "p:last-child": {
+                display: "none",
+              },
+            }}
+          >
+            {assets.map((denom) => (
+              <>
+                <Text
+                  variant="body2"
+                  fontWeight={denom === outAsset ? 700 : undefined}
+                  color={denom === outAsset ? "honeydew.main" : undefined}
+                >
+                  {assetInfos?.[denom]?.symbol || getTokenLabel(denom)}
+                </Text>
+                <Text as="p" variant="body2" color="honeydew.main">
+                  /
+                </Text>
+              </>
+            ))}
+          </Flex>
+        </Flex>
+        <Text variant="body2" color="lilac.main">
+          {poolId}
+        </Text>
+      </Box>
+    </Flex>
+  </Flex>
+);
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/index.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/index.tsx
index b23d18864..0774abcf9 100644
--- a/src/lib/pages/pool/components/table/pool-txs/messages/index.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/index.tsx
@@ -1,31 +1,80 @@
 import { Text } from "@chakra-ui/react";
 
+import type { AssetInfosOpt } from "lib/services/assetService";
 import type { Message } from "lib/types";
 
-import type { MsgSwapExactAmountIn } from "./messages";
+import type { MsgSwapExactAmountIn, MsgSwapExactAmountOut } from "./messages";
 import { MsgSwapExactAmountInAction } from "./swap/MsgSwapExactAmountInAction";
+import { MsgSwapExactAmountInDetail } from "./swap/MsgSwapExactAmountInDetail";
+import { MsgSwapExactAmountOutAction } from "./swap/MsgSwapExactAmountOutAction";
+import { MsgSwapExactAmountOutDetail } from "./swap/MsgSwapExactAmountOutDetail";
 
-export const PoolTxsAction = ({ msg }: { msg: Message }) => {
+export const PoolTxsAction = ({
+  msg,
+  assetInfos,
+}: {
+  msg: Message;
+  assetInfos: AssetInfosOpt;
+}) => {
   // TODO: fix and add cases
   const { type } = msg;
   switch (type) {
     case "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn":
       return (
-        <MsgSwapExactAmountInAction msg={msg.detail as MsgSwapExactAmountIn} />
+        <MsgSwapExactAmountInAction
+          msg={msg.detail as MsgSwapExactAmountIn}
+          assetInfos={assetInfos}
+        />
+      );
+    case "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut":
+      return (
+        <MsgSwapExactAmountOutAction
+          msg={msg.detail as MsgSwapExactAmountOut}
+          assetInfos={assetInfos}
+        />
       );
-    case "type2":
     case "type3":
     default:
       return <Text>{type}</Text>;
   }
 };
 
-export const PoolTxsDetail = ({ msg }: { msg: Message }) => {
+export const PoolTxsDetail = ({
+  txHash,
+  blockHeight,
+  msgIndex,
+  msg,
+  assetInfos,
+}: {
+  txHash: string;
+  blockHeight: number;
+  msgIndex: number;
+  msg: Message;
+  assetInfos: AssetInfosOpt;
+}) => {
   // TODO: fix and add cases
   const { type } = msg;
   switch (type) {
-    case "type1":
-    case "type2":
+    case "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn":
+      return (
+        <MsgSwapExactAmountInDetail
+          txHash={txHash}
+          blockHeight={blockHeight}
+          msgIndex={msgIndex}
+          msg={msg.detail as MsgSwapExactAmountIn}
+          assetInfos={assetInfos}
+        />
+      );
+    case "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut":
+      return (
+        <MsgSwapExactAmountOutDetail
+          txHash={txHash}
+          blockHeight={blockHeight}
+          msgIndex={msgIndex}
+          msg={msg.detail as MsgSwapExactAmountOut}
+          assetInfos={assetInfos}
+        />
+      );
     case "type3":
     default:
       return <Text h={20}>{type}</Text>;
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
index bb0a0ee8d..67d96c0f0 100644
--- a/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
@@ -1,28 +1,56 @@
-import { Flex } from "@chakra-ui/react";
+import { Flex, Text, Tooltip } from "@chakra-ui/react";
 
 import type { MsgSwapExactAmountIn } from "../messages";
 import { MsgToken } from "lib/components/action-msg/MsgToken";
-import { Loading } from "lib/components/Loading";
-import { useAssetInfos } from "lib/services/assetService";
+import { Copier } from "lib/components/copy";
+import { CustomIcon } from "lib/components/icon";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import { getTokenLabel } from "lib/utils";
 
 interface MsgSwapExactAmountInActionProps {
   msg: MsgSwapExactAmountIn;
+  assetInfos: AssetInfosOpt;
 }
 
 export const MsgSwapExactAmountInAction = ({
   msg,
+  assetInfos,
 }: MsgSwapExactAmountInActionProps) => {
-  const { assetInfos, isLoading } = useAssetInfos();
-  if (isLoading) return <Loading />;
-  const assetInfo = assetInfos?.[msg.tokenIn.denom];
+  const inAssetInfo = assetInfos?.[msg.tokenIn.denom];
+  const tokenOutDenom = msg.routes.at(-1)?.tokenOutDenom ?? "";
+  const outAssetInfo = assetInfos?.[tokenOutDenom];
   return (
-    <Flex gap={1}>
+    <Flex gap={1} alignItems="center">
       Swap
       <MsgToken
         coin={msg.tokenIn}
-        symbol={assetInfo?.symbol}
-        precision={assetInfo?.precision}
+        symbol={inAssetInfo?.symbol}
+        precision={inAssetInfo?.precision}
       />
+      <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
+      <Flex role="group" align="center" gap={1}>
+        <Text fontWeight="medium">
+          {getTokenLabel(outAssetInfo?.symbol || tokenOutDenom)}
+        </Text>
+        <Tooltip
+          hasArrow
+          label={`Token ID: ${tokenOutDenom}`}
+          placement="top"
+          bg="honeydew.darker"
+          maxW="240px"
+        >
+          <Flex cursor="pointer">
+            <CustomIcon name="info-circle" boxSize="3" />
+          </Flex>
+        </Tooltip>
+        <Copier
+          type={outAssetInfo?.symbol ? "supported_asset" : "unsupported_asset"}
+          value={tokenOutDenom}
+          copyLabel="Token ID Copied!"
+          display="none"
+          ml="4px"
+        />
+      </Flex>
     </Flex>
   );
 };
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
new file mode 100644
index 000000000..453c143c4
--- /dev/null
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
@@ -0,0 +1,41 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import type { MsgSwapExactAmountIn } from "../messages";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import type { AssetInfosOpt } from "lib/services/assetService";
+
+import { PoolRoute } from "./PoolRoute";
+import { PoolSwap } from "./PoolSwap";
+
+interface MsgSwapExactAmountInDetailProps {
+  txHash: string;
+  blockHeight: number;
+  msgIndex: number;
+  msg: MsgSwapExactAmountIn;
+  assetInfos: AssetInfosOpt;
+}
+
+export const MsgSwapExactAmountInDetail = ({
+  txHash,
+  blockHeight,
+  msgIndex,
+  msg,
+  assetInfos,
+}: MsgSwapExactAmountInDetailProps) => (
+  <Flex w="full" alignItems="start" gap={12}>
+    <Flex direction="column">
+      <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+        Block height
+      </Text>
+      <ExplorerLink
+        value={blockHeight.toString()}
+        type="block_height"
+        showCopyOnHover
+      />
+    </Flex>
+    <Flex direction="column">
+      <PoolSwap txHash={txHash} msgIndex={msgIndex} assetInfos={assetInfos} />
+      <PoolRoute routes={msg.routes} assetInfos={assetInfos} />
+    </Flex>
+  </Flex>
+);
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
new file mode 100644
index 000000000..6e01e4477
--- /dev/null
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
@@ -0,0 +1,56 @@
+import { Flex, Text, Tooltip } from "@chakra-ui/react";
+
+import type { MsgSwapExactAmountOut } from "../messages";
+import { MsgToken } from "lib/components/action-msg/MsgToken";
+import { Copier } from "lib/components/copy";
+import { CustomIcon } from "lib/components/icon";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import { getTokenLabel } from "lib/utils";
+
+interface MsgSwapExactAmountOutActionProps {
+  msg: MsgSwapExactAmountOut;
+  assetInfos: AssetInfosOpt;
+}
+
+export const MsgSwapExactAmountOutAction = ({
+  msg,
+  assetInfos,
+}: MsgSwapExactAmountOutActionProps) => {
+  const tokenInDenom = msg.routes.at(0)?.tokenInDenom ?? "";
+  const inAssetInfo = assetInfos?.[tokenInDenom];
+  const outAssetInfo = assetInfos?.[msg.tokenOut.denom];
+  return (
+    <Flex gap={1} alignItems="center">
+      Swap
+      <Flex role="group" align="center" gap={1}>
+        <Text fontWeight="medium">
+          {getTokenLabel(inAssetInfo?.symbol || tokenInDenom)}
+        </Text>
+        <Tooltip
+          hasArrow
+          label={`Token ID: ${tokenInDenom}`}
+          placement="top"
+          bg="honeydew.darker"
+          maxW="240px"
+        >
+          <Flex cursor="pointer">
+            <CustomIcon name="info-circle" boxSize="3" />
+          </Flex>
+        </Tooltip>
+        <Copier
+          type={outAssetInfo?.symbol ? "supported_asset" : "unsupported_asset"}
+          value={tokenInDenom}
+          copyLabel="Token ID Copied!"
+          display="none"
+          ml="4px"
+        />
+      </Flex>
+      <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
+      <MsgToken
+        coin={msg.tokenOut}
+        symbol={inAssetInfo?.symbol}
+        precision={inAssetInfo?.precision}
+      />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
new file mode 100644
index 000000000..6db147bed
--- /dev/null
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
@@ -0,0 +1,51 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import type { MsgSwapExactAmountOut } from "../messages";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import type { AssetInfosOpt } from "lib/services/assetService";
+
+import { PoolRoute } from "./PoolRoute";
+import { PoolSwap } from "./PoolSwap";
+
+interface MsgSwapExactAmountOutDetailProps {
+  txHash: string;
+  blockHeight: number;
+  msgIndex: number;
+  msg: MsgSwapExactAmountOut;
+  assetInfos: AssetInfosOpt;
+}
+
+export const MsgSwapExactAmountOutDetail = ({
+  txHash,
+  blockHeight,
+  msgIndex,
+  msg,
+  assetInfos,
+}: MsgSwapExactAmountOutDetailProps) => {
+  const outDenoms = msg.routes
+    .map((route) => route.tokenInDenom)
+    .concat(msg.tokenOut.denom);
+  const routes = msg.routes.map((route, index) => ({
+    poolId: route.poolId,
+    tokenOutDenom: outDenoms.at(index + 1) ?? "",
+  }));
+
+  return (
+    <Flex alignItems="start" gap={12} flex={1}>
+      <Flex direction="column" flex={0.1}>
+        <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+          Block height
+        </Text>
+        <ExplorerLink
+          value={blockHeight.toString()}
+          type="block_height"
+          showCopyOnHover
+        />
+      </Flex>
+      <Flex direction="column" flex={0.9}>
+        <PoolSwap txHash={txHash} msgIndex={msgIndex} assetInfos={assetInfos} />
+        <PoolRoute routes={routes} assetInfos={assetInfos} />
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/swap/PoolRoute.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/swap/PoolRoute.tsx
new file mode 100644
index 000000000..2b1738237
--- /dev/null
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/swap/PoolRoute.tsx
@@ -0,0 +1,53 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { PoolAssets } from "../PoolAssets";
+import { AccordionStepperItem } from "lib/components/AccordionStepperItem";
+import { Loading } from "lib/components/Loading";
+import { EmptyState } from "lib/components/state";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import { usePoolAssetsbyPoolIds } from "lib/services/poolService";
+
+interface PoolRouteProps {
+  routes: {
+    poolId: number;
+    tokenOutDenom: string;
+  }[];
+  assetInfos: AssetInfosOpt;
+}
+
+export const PoolRoute = ({ routes, assetInfos }: PoolRouteProps) => {
+  const { data: poolAssets, isLoading } = usePoolAssetsbyPoolIds(
+    routes.map((pool) => pool.poolId)
+  );
+
+  if (isLoading) return <Loading />;
+  if (!poolAssets)
+    return (
+      <EmptyState
+        imageVariant="not-found"
+        message="There is an error during fetching pool detail."
+      />
+    );
+  return (
+    <Flex direction="column">
+      <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+        Pool Route
+      </Text>
+      {routes.map((pool) => (
+        <Flex
+          key={pool.poolId}
+          className="accordion-stepper-wrapper"
+          alignItems="center"
+        >
+          <AccordionStepperItem />
+          <PoolAssets
+            poolId={pool.poolId}
+            assets={poolAssets[pool.poolId]}
+            outAsset={pool.tokenOutDenom}
+            assetInfos={assetInfos}
+          />
+        </Flex>
+      ))}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/swap/PoolSwap.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/swap/PoolSwap.tsx
new file mode 100644
index 000000000..d16dbfca3
--- /dev/null
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/swap/PoolSwap.tsx
@@ -0,0 +1,63 @@
+import { Box, Flex, Text } from "@chakra-ui/react";
+
+import { AssetCard } from "../AssetCard";
+import { CustomIcon } from "lib/components/icon";
+import { Loading } from "lib/components/Loading";
+import { EmptyState } from "lib/components/state";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import { useTxData } from "lib/services/txService";
+
+interface PoolSwapInterface {
+  txHash: string;
+  msgIndex: number;
+  assetInfos: AssetInfosOpt;
+}
+
+export const PoolSwap = ({
+  txHash,
+  msgIndex,
+  assetInfos,
+}: PoolSwapInterface) => {
+  const { data: txData, isLoading } = useTxData(txHash);
+  if (isLoading) return <Loading withBorder={false} />;
+
+  const swapEvent = txData?.logs
+    .find((event) => event.msg_index === msgIndex)
+    ?.events?.find((event) => event.type === "token_swapped");
+  if (!swapEvent)
+    return (
+      <EmptyState message="There is an error during fetching message detail." />
+    );
+
+  const inAmount = swapEvent.attributes[3].value.match(/\d+/g)?.[0] ?? "";
+  const inDenom = swapEvent.attributes[3].value.slice(inAmount.length);
+
+  const outAmount = swapEvent.attributes[-1].value.match(/\d+/g)?.[0] ?? "";
+  const outDenom = swapEvent.attributes[-1].value.slice(inAmount.length);
+
+  return (
+    <Flex gap={4}>
+      <Box>
+        <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+          From
+        </Text>
+        <AssetCard
+          amount={inAmount}
+          denom={inDenom}
+          assetInfo={assetInfos?.[inDenom]}
+        />
+      </Box>
+      <CustomIcon name="arrow-right" boxSize={6} />
+      <Box>
+        <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+          To
+        </Text>
+        <AssetCard
+          amount={outAmount}
+          denom={outDenom}
+          assetInfo={assetInfos?.[outAmount]}
+        />
+      </Box>
+    </Flex>
+  );
+};
diff --git a/src/lib/query/pool.ts b/src/lib/query/pool.ts
index 64e8371eb..bb601f1af 100644
--- a/src/lib/query/pool.ts
+++ b/src/lib/query/pool.ts
@@ -56,3 +56,12 @@ export const getPoolByPoolId = graphql(`
     }
   }
 `);
+
+export const getPoolsByPoolIds = graphql(`
+  query getPoolsByPoolIds($poolIds: [Int!]!) {
+    pools(where: { id: { _in: $poolIds } }) {
+      id
+      liquidity
+    }
+  }
+`);
diff --git a/src/lib/query/tx.ts b/src/lib/query/tx.ts
index 22febee8c..752b1f1aa 100644
--- a/src/lib/query/tx.ts
+++ b/src/lib/query/tx.ts
@@ -55,7 +55,7 @@ export const getTxsByPoolIdPagination = graphql(`
   ) {
     pool_transactions(
       where: $expression
-      order_by: { block_height: desc }
+      order_by: { block_height: desc, transaction_id: desc }
       offset: $offset
       limit: $pageSize
     ) {
diff --git a/src/lib/services/expression/txExpression.ts b/src/lib/services/expression/txExpression.ts
index d209f32a9..357f3b8af 100644
--- a/src/lib/services/expression/txExpression.ts
+++ b/src/lib/services/expression/txExpression.ts
@@ -59,6 +59,7 @@ export const usePoolTxExpression = (
   useMemo(
     () => ({
       pool_id: poolId ? { _eq: poolId } : {},
+      transaction: { is_ibc: { _eq: false } },
       ...(type !== "is_all" ? { [type]: { _eq: true } } : {}),
     }),
     [poolId, type]
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index 639e743a3..8eb86298d 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -1,10 +1,16 @@
+import type { Coin } from "@cosmjs/stargate";
 import type { UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 
 import { useCelatoneApp } from "lib/app-provider";
 import type { Order_By } from "lib/gql/graphql";
-import { getPoolByPoolId, getPoolList, getPoolListCount } from "lib/query";
+import {
+  getPoolByPoolId,
+  getPoolList,
+  getPoolListCount,
+  getPoolsByPoolIds,
+} from "lib/query";
 import type { Pool, PoolDetail } from "lib/types";
 
 import { usePoolExpression } from "./expression/poolExpression";
@@ -114,3 +120,29 @@ export const usePoolByPoolId = (poolId: number): UseQueryResult<PoolDetail> => {
 
   return useQuery(["pool_by_pool_id", poolId, indexerGraphClient], queryFn);
 };
+
+export const usePoolAssetsbyPoolIds = (
+  poolIds: number[]
+): UseQueryResult<Record<number, string[]>> => {
+  const { indexerGraphClient } = useCelatoneApp();
+
+  const queryFn = useCallback(async () => {
+    return indexerGraphClient
+      .request(getPoolsByPoolIds, {
+        poolIds,
+      })
+      .then(({ pools }) =>
+        pools.reduce(
+          (prev, pool) => ({
+            ...prev,
+            [pool.id]: (pool.liquidity as Coin[]).map(
+              (liquidity) => liquidity.denom
+            ),
+          }),
+          {} as Record<number, string[]>
+        )
+      );
+  }, [poolIds, indexerGraphClient]);
+
+  return useQuery(["pools_by_pool_ids", poolIds, indexerGraphClient], queryFn);
+};
diff --git a/src/lib/styles/globals.css b/src/lib/styles/globals.css
index e556d89ba..35b439a64 100644
--- a/src/lib/styles/globals.css
+++ b/src/lib/styles/globals.css
@@ -2,3 +2,10 @@
 .copier-wrapper:hover .copier {
   display: block;
 }
+
+.accordion-stepper-wrapper:not(:first-of-type) div#before-stepper {
+  visibility: visible;
+}
+.accordion-stepper-wrapper:not(:last-of-type) div#after-stepper {
+  visibility: visible;
+}

From 2a712f20f8d53a6bd4cd59070062f23f4b9552c4 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 26 Apr 2023 17:24:54 +0700
Subject: [PATCH 060/354] fix: bugs

---
 .../table/pool-txs/messages/AssetCard.tsx        |  4 +---
 .../messages/swap/MsgSwapExactAmountInDetail.tsx |  2 +-
 .../swap/MsgSwapExactAmountOutAction.tsx         |  6 +++---
 .../swap/MsgSwapExactAmountOutDetail.tsx         |  6 +++---
 .../table/pool-txs/messages/swap/PoolSwap.tsx    | 16 +++++++++-------
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/AssetCard.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/AssetCard.tsx
index 35dfff440..cac53adaf 100644
--- a/src/lib/pages/pool/components/table/pool-txs/messages/AssetCard.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/AssetCard.tsx
@@ -43,7 +43,7 @@ export const AssetCard = ({
         minH="101px"
         gap={2}
         p={3}
-        background="pebble.900"
+        background="pebble.800"
         borderRadius="8px"
         {...cardProps}
       >
@@ -93,14 +93,12 @@ export const AssetCard = ({
           </Text>
           {assetInfo && (
             <Text variant="body3" color="text.dark">
-              `($
               {formatPrice(
                 calculateAssetValue(
                   toToken(amount as U<Token>, assetInfo.precision),
                   assetInfo.price as USD<number>
                 )
               )}
-              )`
             </Text>
           )}
         </Flex>
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
index 453c143c4..ba63f99d3 100644
--- a/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
@@ -33,7 +33,7 @@ export const MsgSwapExactAmountInDetail = ({
         showCopyOnHover
       />
     </Flex>
-    <Flex direction="column">
+    <Flex direction="column" gap={6}>
       <PoolSwap txHash={txHash} msgIndex={msgIndex} assetInfos={assetInfos} />
       <PoolRoute routes={msg.routes} assetInfos={assetInfos} />
     </Flex>
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
index 6e01e4477..b2f7bcf08 100644
--- a/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
@@ -38,7 +38,7 @@ export const MsgSwapExactAmountOutAction = ({
           </Flex>
         </Tooltip>
         <Copier
-          type={outAssetInfo?.symbol ? "supported_asset" : "unsupported_asset"}
+          type={inAssetInfo?.symbol ? "supported_asset" : "unsupported_asset"}
           value={tokenInDenom}
           copyLabel="Token ID Copied!"
           display="none"
@@ -48,8 +48,8 @@ export const MsgSwapExactAmountOutAction = ({
       <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
       <MsgToken
         coin={msg.tokenOut}
-        symbol={inAssetInfo?.symbol}
-        precision={inAssetInfo?.precision}
+        symbol={outAssetInfo?.symbol}
+        precision={outAssetInfo?.precision}
       />
     </Flex>
   );
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
index 6db147bed..6c23bc8fd 100644
--- a/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
@@ -31,8 +31,8 @@ export const MsgSwapExactAmountOutDetail = ({
   }));
 
   return (
-    <Flex alignItems="start" gap={12} flex={1}>
-      <Flex direction="column" flex={0.1}>
+    <Flex alignItems="start" gap={12}>
+      <Flex direction="column">
         <Text variant="body2" textColor="pebble.500" fontWeight={500}>
           Block height
         </Text>
@@ -42,7 +42,7 @@ export const MsgSwapExactAmountOutDetail = ({
           showCopyOnHover
         />
       </Flex>
-      <Flex direction="column" flex={0.9}>
+      <Flex direction="column" gap={6}>
         <PoolSwap txHash={txHash} msgIndex={msgIndex} assetInfos={assetInfos} />
         <PoolRoute routes={routes} assetInfos={assetInfos} />
       </Flex>
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/swap/PoolSwap.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/swap/PoolSwap.tsx
index d16dbfca3..5e5db3c7d 100644
--- a/src/lib/pages/pool/components/table/pool-txs/messages/swap/PoolSwap.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/swap/PoolSwap.tsx
@@ -29,14 +29,16 @@ export const PoolSwap = ({
       <EmptyState message="There is an error during fetching message detail." />
     );
 
-  const inAmount = swapEvent.attributes[3].value.match(/\d+/g)?.[0] ?? "";
-  const inDenom = swapEvent.attributes[3].value.slice(inAmount.length);
+  const inAsset = swapEvent.attributes.at(3)?.value ?? "";
+  const inAmount = inAsset.match(/[0-9]+/g)?.[0] ?? "";
+  const inDenom = inAsset.slice(inAmount.length);
 
-  const outAmount = swapEvent.attributes[-1].value.match(/\d+/g)?.[0] ?? "";
-  const outDenom = swapEvent.attributes[-1].value.slice(inAmount.length);
+  const outAsset = swapEvent.attributes.at(-1)?.value ?? "";
+  const outAmount = outAsset.match(/[0-9]+/g)?.[0] ?? "";
+  const outDenom = outAsset.slice(outAmount.length);
 
   return (
-    <Flex gap={4}>
+    <Flex gap={4} alignItems="center">
       <Box>
         <Text variant="body2" textColor="pebble.500" fontWeight={500}>
           From
@@ -47,7 +49,7 @@ export const PoolSwap = ({
           assetInfo={assetInfos?.[inDenom]}
         />
       </Box>
-      <CustomIcon name="arrow-right" boxSize={6} />
+      <CustomIcon name="arrow-right" boxSize={6} color="honeydew.main" />
       <Box>
         <Text variant="body2" textColor="pebble.500" fontWeight={500}>
           To
@@ -55,7 +57,7 @@ export const PoolSwap = ({
         <AssetCard
           amount={outAmount}
           denom={outDenom}
-          assetInfo={assetInfos?.[outAmount]}
+          assetInfo={assetInfos?.[outDenom]}
         />
       </Box>
     </Flex>

From 8a39653843a12f2feed669c69870e40508c08ae9 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 26 Apr 2023 17:32:44 +0700
Subject: [PATCH 061/354] fix: naming, type, condition

---
 src/lib/app-fns/tx/upload.tsx               |  2 +-
 src/lib/app-provider/queries/simulateFee.ts |  8 +++----
 src/lib/components/upload/UploadSection.tsx | 25 ++++++++++++---------
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/lib/app-fns/tx/upload.tsx b/src/lib/app-fns/tx/upload.tsx
index 759c66cff..ef6514458 100644
--- a/src/lib/app-fns/tx/upload.tsx
+++ b/src/lib/app-fns/tx/upload.tsx
@@ -51,7 +51,7 @@ export const uploadContractTx = ({
         events: txInfo.events,
       };
 
-      const codeId = findAttr(mimicLog, "store_code", "code_id") || "0";
+      const codeId = findAttr(mimicLog, "store_code", "code_id") ?? "0";
 
       onTxSucceed?.(parseInt(codeId, 10));
       const txFee = txInfo.events.find((e) => e.type === "tx")?.attributes[0]
diff --git a/src/lib/app-provider/queries/simulateFee.ts b/src/lib/app-provider/queries/simulateFee.ts
index 1232ac8d0..4fb1dbcb4 100644
--- a/src/lib/app-provider/queries/simulateFee.ts
+++ b/src/lib/app-provider/queries/simulateFee.ts
@@ -72,7 +72,7 @@ interface SimulateQueryParamsForStoreCode {
   enabled: boolean;
   wasmFile: Option<File>;
   permission: AccessType;
-  addresses: Record<"address", Addr>[];
+  addresses: Addr[];
   onSuccess?: (gas: Gas<number> | undefined) => void;
   onError?: (err: Error) => void;
 }
@@ -94,15 +94,15 @@ export const useSimulateFeeForStoreCode = ({
     const client = await getCosmWasmClient();
     if (!client) throw new Error("Fail to get client");
 
-    const submitWhitelistProposalMsg = async () => {
+    const submitStoreCodeProposalMsg = async () => {
       return composeStoreCodeMsg({
         sender: address as HumanAddr,
         wasmByteCode: new Uint8Array(await wasmFile.arrayBuffer()),
         permission,
-        addresses: addresses.map((addr) => addr.address),
+        addresses,
       });
     };
-    const craftMsg = await submitWhitelistProposalMsg();
+    const craftMsg = await submitStoreCodeProposalMsg();
     return (await client.simulate(address, [craftMsg], undefined)) as Gas;
   };
   return useQuery({
diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index 4b5a498d0..54cc55944 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -1,7 +1,7 @@
 import { Box, Button, Flex } from "@chakra-ui/react";
 import type { StdFee } from "@cosmjs/stargate";
 import { useWallet } from "@cosmos-kit/react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { DropZone } from "../dropzone";
@@ -71,22 +71,25 @@ export const UploadSection = ({
     setEstimatedFee(undefined);
   };
 
-  const isAddressesError = addresses.some((addr) =>
-    Boolean(
-      validateUserAddress(addr.address) && validateContractAddress(addr.address)
-    )
-  );
-
   // Should not simulate when permission is any of addresses and address input is not filled, invalid, or empty
-  const isAnyAddrWithoutInput =
-    permission === AccessType.ACCESS_TYPE_ANY_OF_ADDRESSES &&
-    (!addresses.some((addr) => addr.address !== "") || isAddressesError);
+  const isAnyAddrWithoutInput = useMemo(
+    () =>
+      permission === AccessType.ACCESS_TYPE_ANY_OF_ADDRESSES &&
+      (!addresses.some((addr) => addr.address !== "") ||
+        addresses.some((addr) =>
+          Boolean(
+            validateUserAddress(addr.address) &&
+              validateContractAddress(addr.address)
+          )
+        )),
+    [addresses, permission, validateContractAddress, validateUserAddress]
+  );
 
   const { isFetching: isSimulating } = useSimulateFeeForStoreCode({
     enabled: Boolean(wasmFile && address && !isAnyAddrWithoutInput),
     wasmFile,
     permission,
-    addresses,
+    addresses: addresses.map((addr) => addr.address),
     onSuccess: (fee) => {
       if (wasmFile && address) {
         if (isAnyAddrWithoutInput) {

From 0fcb7eb31ff7edfff295de5b2dd8329ce99a839d Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 26 Apr 2023 17:41:27 +0700
Subject: [PATCH 062/354] fix: amount no suffix

---
 .../components/table/pool-txs/messages/AssetCard.tsx  | 11 ++++-------
 .../messages/swap/MsgSwapExactAmountInAction.tsx      |  2 +-
 .../messages/swap/MsgSwapExactAmountOutAction.tsx     |  2 +-
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/AssetCard.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/AssetCard.tsx
index cac53adaf..5f6865859 100644
--- a/src/lib/pages/pool/components/table/pool-txs/messages/AssetCard.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/AssetCard.tsx
@@ -43,6 +43,7 @@ export const AssetCard = ({
         minH="101px"
         gap={2}
         p={3}
+        w="250px"
         background="pebble.800"
         borderRadius="8px"
         {...cardProps}
@@ -61,12 +62,7 @@ export const AssetCard = ({
             fallback={<NAToken />}
             fallbackStrategy="onError"
           />
-          <Text
-            variant="body2"
-            className="ellipsis"
-            maxW="91"
-            fontWeight="bold"
-          >
+          <Text variant="body2" className="ellipsis" fontWeight="bold">
             {symbol}
           </Text>
           {assetInfo && (
@@ -88,7 +84,8 @@ export const AssetCard = ({
           <Text fontWeight="700" variant="body2">
             {formatUTokenWithPrecision(
               amount as U<Token>,
-              assetInfo?.precision ?? 0
+              assetInfo?.precision ?? 0,
+              false
             )}
           </Text>
           {assetInfo && (
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
index 67d96c0f0..d28cd1631 100644
--- a/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
@@ -20,7 +20,7 @@ export const MsgSwapExactAmountInAction = ({
   const tokenOutDenom = msg.routes.at(-1)?.tokenOutDenom ?? "";
   const outAssetInfo = assetInfos?.[tokenOutDenom];
   return (
-    <Flex gap={1} alignItems="center">
+    <Flex gap={1} alignItems="center" flexWrap="wrap">
       Swap
       <MsgToken
         coin={msg.tokenIn}
diff --git a/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
index b2f7bcf08..051a90680 100644
--- a/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
+++ b/src/lib/pages/pool/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
@@ -20,7 +20,7 @@ export const MsgSwapExactAmountOutAction = ({
   const inAssetInfo = assetInfos?.[tokenInDenom];
   const outAssetInfo = assetInfos?.[msg.tokenOut.denom];
   return (
-    <Flex gap={1} alignItems="center">
+    <Flex gap={1} alignItems="center" flexWrap="wrap">
       Swap
       <Flex role="group" align="center" gap={1}>
         <Text fontWeight="medium">

From b2dbf270b24dd12955b207595adc44ff19c07d8e Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 26 Apr 2023 18:35:02 +0700
Subject: [PATCH 063/354] fix: simulate status

---
 src/lib/components/upload/UploadSection.tsx | 35 ++++++++++++++-------
 src/lib/types/upload.ts                     | 14 ++++++++-
 2 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index 54cc55944..5d1427e74 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -19,7 +19,12 @@ import { getMaxCodeNameLengthError, MAX_CODE_NAME_LENGTH } from "lib/data";
 import { useCodeStore } from "lib/providers/store";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import type { Addr, HumanAddr, UploadSectionState } from "lib/types";
+import type {
+  Addr,
+  HumanAddr,
+  SimulateStatus,
+  UploadSectionState,
+} from "lib/types";
 import { AccessType } from "lib/types";
 
 import { InstantiatePermissionRadio } from "./InstantiatePermissionRadio";
@@ -44,9 +49,10 @@ export const UploadSection = ({
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
 
   const [estimatedFee, setEstimatedFee] = useState<StdFee>();
-  const [simulateError, setSimulateError] = useState<string>();
-
-  const simulateSuccessText = "Valid Wasm file and instantiate permission";
+  const [simulateStatus, setSimulateStatus] = useState<SimulateStatus>({
+    status: "default",
+    message: "",
+  });
 
   const {
     control,
@@ -67,7 +73,7 @@ export const UploadSection = ({
   const { wasmFile, codeName, addresses, permission } = watch();
 
   const setDefaultBehavior = () => {
-    setSimulateError(undefined);
+    setSimulateStatus({ status: "default", message: "" });
     setEstimatedFee(undefined);
   };
 
@@ -75,7 +81,7 @@ export const UploadSection = ({
   const isAnyAddrWithoutInput = useMemo(
     () =>
       permission === AccessType.ACCESS_TYPE_ANY_OF_ADDRESSES &&
-      (!addresses.some((addr) => addr.address !== "") ||
+      (!addresses.some((addr) => addr.address.trim().length !== 0) ||
         addresses.some((addr) =>
           Boolean(
             validateUserAddress(addr.address) &&
@@ -96,7 +102,10 @@ export const UploadSection = ({
           setDefaultBehavior();
         }
         if (fee) {
-          setSimulateError(simulateSuccessText);
+          setSimulateStatus({
+            status: "succeeded",
+            message: "Valid Wasm file and instantiate permission",
+          });
           setEstimatedFee(fabricateFee(fee));
         }
       }
@@ -105,7 +114,7 @@ export const UploadSection = ({
       if (isAnyAddrWithoutInput) {
         setDefaultBehavior();
       } else {
-        setSimulateError(e.message);
+        setSimulateStatus({ status: "failed", message: e.message });
         setEstimatedFee(undefined);
       }
     },
@@ -195,16 +204,16 @@ export const UploadSection = ({
       />
 
       <Box mt={10} width="full">
-        {(simulateError || isSimulating) && (
+        {(simulateStatus.status !== "default" || isSimulating) && (
           <SimulateMessageRender
             value={
               isSimulating
                 ? "Checking Wasm and permission validity"
-                : simulateError
+                : simulateStatus.message
             }
             isLoading={isSimulating}
             mb={2}
-            isSuccess={simulateError === simulateSuccessText}
+            isSuccess={simulateStatus.status === "succeeded"}
           />
         )}
 
@@ -235,7 +244,9 @@ export const UploadSection = ({
           variant="primary"
           w="128px"
           disabled={
-            isSimulating || isAnyAddrWithoutInput || Boolean(simulateError)
+            isSimulating ||
+            isAnyAddrWithoutInput ||
+            simulateStatus.status !== "succeeded"
           }
           onClick={proceed}
         >
diff --git a/src/lib/types/upload.ts b/src/lib/types/upload.ts
index b068a4311..a2257ebe9 100644
--- a/src/lib/types/upload.ts
+++ b/src/lib/types/upload.ts
@@ -1,6 +1,18 @@
 import type { AccessType, Addr } from "lib/types";
 
-export type SimulateStatus = "pending" | "completed" | "failed" | "default";
+export type SimulateStatus =
+  | {
+      status: "succeeded";
+      message: string;
+    }
+  | {
+      status: "failed";
+      message: string;
+    }
+  | {
+      status: "default";
+      message: string;
+    };
 
 export interface UploadSectionState {
   wasmFile?: File;

From 272fafe723e9b005a2d835cc6deb40fd7d48134f Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 27 Apr 2023 12:10:14 +0700
Subject: [PATCH 064/354] fix: naming, and add remove state logic

---
 src/lib/components/upload/UploadSection.tsx | 42 +++++++++------------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index 5d1427e74..19d79738e 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -8,7 +8,6 @@ import { DropZone } from "../dropzone";
 import { ControllerInput } from "../forms";
 import {
   useFabricateFee,
-  useSimulateFee,
   useSimulateFeeForStoreCode,
   useUploadContractTx,
   useValidateAddress,
@@ -40,7 +39,6 @@ export const UploadSection = ({
   handleBack,
   isMigrate = false,
 }: UploadSectionProps) => {
-  const { simulate, loading } = useSimulateFee();
   const fabricateFee = useFabricateFee();
   const { address } = useWallet();
   const { broadcast } = useTxBroadcast();
@@ -78,7 +76,7 @@ export const UploadSection = ({
   };
 
   // Should not simulate when permission is any of addresses and address input is not filled, invalid, or empty
-  const isAnyAddrWithoutInput = useMemo(
+  const shouldNotSimulate = useMemo(
     () =>
       permission === AccessType.ACCESS_TYPE_ANY_OF_ADDRESSES &&
       (!addresses.some((addr) => addr.address.trim().length !== 0) ||
@@ -92,13 +90,13 @@ export const UploadSection = ({
   );
 
   const { isFetching: isSimulating } = useSimulateFeeForStoreCode({
-    enabled: Boolean(wasmFile && address && !isAnyAddrWithoutInput),
+    enabled: Boolean(wasmFile && address && !shouldNotSimulate),
     wasmFile,
     permission,
     addresses: addresses.map((addr) => addr.address),
     onSuccess: (fee) => {
       if (wasmFile && address) {
-        if (isAnyAddrWithoutInput) {
+        if (shouldNotSimulate) {
           setDefaultBehavior();
         }
         if (fee) {
@@ -111,7 +109,7 @@ export const UploadSection = ({
       }
     },
     onError: (e) => {
-      if (isAnyAddrWithoutInput) {
+      if (shouldNotSimulate) {
         setDefaultBehavior();
       } else {
         setSimulateStatus({ status: "failed", message: e.message });
@@ -154,22 +152,15 @@ export const UploadSection = ({
   ]);
 
   useEffect(() => {
-    (async () => {
-      if (wasmFile && address && isAnyAddrWithoutInput) {
-        setDefaultBehavior();
-      }
-    })();
-  }, [
-    wasmFile,
-    address,
-    simulate,
-    fabricateFee,
-    setValue,
-    permission,
-    addresses,
-    isSimulating,
-    isAnyAddrWithoutInput,
-  ]);
+    if (!wasmFile) {
+      setDefaultBehavior();
+      setValue("addresses", [{ address: "" as Addr }]);
+    }
+  }, [setValue, wasmFile]);
+
+  useEffect(() => {
+    if (wasmFile && address && shouldNotSimulate) setDefaultBehavior();
+  }, [wasmFile, address, shouldNotSimulate, permission, setValue]);
 
   return (
     <>
@@ -225,7 +216,10 @@ export const UploadSection = ({
           display="flex"
         >
           <p>Transaction Fee:</p>
-          <EstimatedFeeRender estimatedFee={estimatedFee} loading={loading} />
+          <EstimatedFeeRender
+            estimatedFee={estimatedFee}
+            loading={isSimulating}
+          />
         </Flex>
       </Box>
 
@@ -245,7 +239,7 @@ export const UploadSection = ({
           w="128px"
           disabled={
             isSimulating ||
-            isAnyAddrWithoutInput ||
+            shouldNotSimulate ||
             simulateStatus.status !== "succeeded"
           }
           onClick={proceed}

From 3e6cbb9f09d8f79b629bbae9e5754d66392f6ae4 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 27 Apr 2023 14:41:39 +0700
Subject: [PATCH 065/354] fix: remove border, fix addresses input bug, add
 space between fee

---
 src/lib/components/upload/UploadCard.tsx    |  1 -
 src/lib/components/upload/UploadSection.tsx | 15 ++++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/upload/UploadCard.tsx b/src/lib/components/upload/UploadCard.tsx
index 68f04f69d..912a70dc0 100644
--- a/src/lib/components/upload/UploadCard.tsx
+++ b/src/lib/components/upload/UploadCard.tsx
@@ -16,7 +16,6 @@ export const UploadCard = ({ file, deleteFile }: UploadCardProps) => (
     w="full"
     bgColor="pebble.900"
     borderRadius="8px"
-    border="1px solid"
     justifyContent="space-between"
   >
     <Flex gap={5}>
diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index 19d79738e..d383c705a 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -79,14 +79,23 @@ export const UploadSection = ({
   const shouldNotSimulate = useMemo(
     () =>
       permission === AccessType.ACCESS_TYPE_ANY_OF_ADDRESSES &&
-      (!addresses.some((addr) => addr.address.trim().length !== 0) ||
+      (addresses.some((addr) => addr.address.trim().length === 0) ||
         addresses.some((addr) =>
           Boolean(
             validateUserAddress(addr.address) &&
               validateContractAddress(addr.address)
           )
         )),
-    [addresses, permission, validateContractAddress, validateUserAddress]
+
+    [
+      addresses,
+      permission,
+      validateContractAddress,
+      validateUserAddress,
+      // TODO - Remove this later
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      JSON.stringify(addresses),
+    ]
   );
 
   const { isFetching: isSimulating } = useSimulateFeeForStoreCode({
@@ -215,7 +224,7 @@ export const UploadSection = ({
           alignItems="center"
           display="flex"
         >
-          <p>Transaction Fee:</p>
+          Transaction Fee:{" "}
           <EstimatedFeeRender
             estimatedFee={estimatedFee}
             loading={isSimulating}

From 5a452261c798fcd0849ef32c06e3113c66fa254f Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 27 Apr 2023 15:30:26 +0700
Subject: [PATCH 066/354] fix: remove comment and add array dependency

---
 src/lib/components/upload/UploadSection.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index d383c705a..e0dac5ce7 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -92,7 +92,6 @@ export const UploadSection = ({
       permission,
       validateContractAddress,
       validateUserAddress,
-      // TODO - Remove this later
       // eslint-disable-next-line react-hooks/exhaustive-deps
       JSON.stringify(addresses),
     ]
@@ -158,6 +157,8 @@ export const UploadSection = ({
     estimatedFee,
     broadcast,
     updateCodeInfo,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(addresses),
   ]);
 
   useEffect(() => {

From 30ee911a89174db7a8e59df3f3259cadd00ea716 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Tue, 2 May 2023 09:34:58 +0700
Subject: [PATCH 067/354] feat: wireup proposal store code

---
 package.json                                  |   1 +
 src/lib/app-fns/tx/submitProposal.tsx         |  89 ++-
 src/lib/app-provider/queries/simulateFee.ts   |  95 ++-
 src/lib/app-provider/tx/submitProposal.ts     |  53 +-
 src/lib/components/AddressInput.tsx           |   4 +-
 src/lib/components/StickySidebar.tsx          |  94 ++-
 src/lib/pages/proposal/constants.tsx          |  89 ++-
 src/lib/pages/proposal/store-code/index.tsx   | 596 ++++++++++++++++++
 src/lib/pages/proposal/whitelist/index.tsx    |  34 +-
 .../pages/store-code/components/Footer.tsx    |  58 --
 src/lib/pages/store-code/index.tsx            | 471 --------------
 src/lib/services/proposalService.ts           |  15 +-
 src/lib/types/tx/msg.ts                       |   1 +
 src/lib/utils/formatter/index.ts              |   1 +
 src/lib/utils/formatter/text.ts               |   2 +
 src/lib/utils/formatter/tokenType.ts          |   4 +-
 src/lib/utils/proposal.ts                     |  20 +
 src/lib/utils/tx/composeMsg.ts                |  62 ++
 src/pages/[network]/proposal/store-code.tsx   |   4 +-
 src/pages/proposal/store-code.tsx             |   4 +-
 yarn.lock                                     |  10 +-
 21 files changed, 1092 insertions(+), 615 deletions(-)
 create mode 100644 src/lib/pages/proposal/store-code/index.tsx
 delete mode 100644 src/lib/pages/store-code/components/Footer.tsx
 delete mode 100644 src/lib/pages/store-code/index.tsx
 create mode 100644 src/lib/utils/formatter/text.ts

diff --git a/package.json b/package.json
index 0b76c4393..17fed92ab 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "@cosmjs/encoding": "^0.30.1",
     "@cosmjs/proto-signing": "^0.30.1",
     "@cosmjs/stargate": "^0.30.1",
+    "@cosmjs/crypto": "^0.30.1",
     "@cosmos-kit/core": "^0.20.0",
     "@cosmos-kit/keplr": "^0.20.0",
     "@cosmos-kit/react": "^0.19.0",
diff --git a/src/lib/app-fns/tx/submitProposal.tsx b/src/lib/app-fns/tx/submitProposal.tsx
index 1837146f9..389432aa3 100644
--- a/src/lib/app-fns/tx/submitProposal.tsx
+++ b/src/lib/app-fns/tx/submitProposal.tsx
@@ -9,11 +9,11 @@ import { CustomIcon } from "lib/components/icon";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import type { HumanAddr, TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
-import { findAttr, formatUFee } from "lib/utils";
+import { capitalizedFirst, findAttr, formatUFee } from "lib/utils";
 
 import { catchTxError, postTx, sendingTx } from "./common";
 
-interface SubmitProposalTxParams {
+interface SubmitWhitelistProposalTxParams {
   address: HumanAddr;
   client: SigningCosmWasmClient;
   onTxSucceed?: () => void;
@@ -24,7 +24,7 @@ interface SubmitProposalTxParams {
   amountToVote: string | null;
 }
 
-export const submitProposalTx = ({
+export const submitWhitelistProposalTx = ({
   address,
   client,
   onTxSucceed,
@@ -33,7 +33,7 @@ export const submitProposalTx = ({
   messages,
   whitelistNumber,
   amountToVote,
-}: SubmitProposalTxParams): Observable<TxResultRendering> => {
+}: SubmitWhitelistProposalTxParams): Observable<TxResultRendering> => {
   return pipe(
     sendingTx(fee),
     postTx({
@@ -93,3 +93,84 @@ export const submitProposalTx = ({
     }
   )().pipe(catchTxError(onTxFailed));
 };
+
+interface SubmitStoreCodeProposalTxParams {
+  address: HumanAddr;
+  client: SigningCosmWasmClient;
+  fee: StdFee;
+  chainName: string;
+  wasmFileName: string;
+  messages: EncodeObject[];
+  amountToVote: string | null;
+  onTxSucceed?: () => void;
+  onTxFailed?: () => void;
+}
+
+export const submitStoreCodeProposalTx = ({
+  address,
+  client,
+  fee,
+  chainName,
+  wasmFileName,
+  messages,
+  amountToVote,
+  onTxSucceed,
+  onTxFailed,
+}: SubmitStoreCodeProposalTxParams): Observable<TxResultRendering> => {
+  return pipe(
+    sendingTx(fee),
+    postTx({
+      postFn: () => client.signAndBroadcast(address, messages, fee),
+    }),
+    ({ value: txInfo }) => {
+      AmpTrack(AmpEvent.TX_SUCCEED);
+      onTxSucceed?.();
+      const mimicLog: logs.Log = {
+        msg_index: 0,
+        log: "",
+        events: txInfo.events,
+      };
+      const txFee = findAttr(mimicLog, "tx", "fee");
+      const proposalId =
+        findAttr(mimicLog, "submit_proposal", "proposal_id") ?? "";
+      return {
+        value: null,
+        phase: TxStreamPhase.SUCCEED,
+        receipts: [
+          {
+            title: "Proposal ID",
+            value: proposalId,
+            html: <ExplorerLink type="proposal_id" value={proposalId} />,
+          },
+          {
+            title: "Tx Hash",
+            value: txInfo.transactionHash,
+            html: (
+              <ExplorerLink type="tx_hash" value={txInfo.transactionHash} />
+            ),
+          },
+          {
+            title: "Tx Fee",
+            value: txFee ? formatUFee(txFee) : "N/A",
+          },
+        ],
+        receiptInfo: {
+          header: "Proposal Submitted",
+          description: `${wasmFileName} is uploaded and pending ${
+            amountToVote
+              ? ` minimum deposit of ${amountToVote} to trigger voting period.`
+              : ` ${capitalizedFirst(chainName)} governance voting.`
+          }`,
+          headerIcon: (
+            <CustomIcon
+              name="submit-proposal-solid"
+              color="pebble.600"
+              boxSize="5"
+            />
+          ),
+        },
+        actionVariant: "proposal",
+      } as TxResultRendering;
+    }
+  )().pipe(catchTxError(onTxFailed));
+};
diff --git a/src/lib/app-provider/queries/simulateFee.ts b/src/lib/app-provider/queries/simulateFee.ts
index 4fb1dbcb4..938eced04 100644
--- a/src/lib/app-provider/queries/simulateFee.ts
+++ b/src/lib/app-provider/queries/simulateFee.ts
@@ -1,3 +1,4 @@
+import type { Coin } from "@cosmjs/amino";
 import { SigningCosmWasmClient } from "@cosmjs/cosmwasm-stargate";
 import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
@@ -11,7 +12,7 @@ import type {
   HumanAddr,
   Option,
 } from "lib/types";
-import { composeStoreCodeMsg } from "lib/utils";
+import { composeStoreCodeMsg, composeStoreCodeProposalMsg } from "lib/utils";
 
 interface SimulateQueryParams {
   enabled: boolean;
@@ -94,7 +95,7 @@ export const useSimulateFeeForStoreCode = ({
     const client = await getCosmWasmClient();
     if (!client) throw new Error("Fail to get client");
 
-    const submitStoreCodeProposalMsg = async () => {
+    const submitStoreCodeMsg = async () => {
       return composeStoreCodeMsg({
         sender: address as HumanAddr,
         wasmByteCode: new Uint8Array(await wasmFile.arrayBuffer()),
@@ -102,7 +103,7 @@ export const useSimulateFeeForStoreCode = ({
         addresses,
       });
     };
-    const craftMsg = await submitStoreCodeProposalMsg();
+    const craftMsg = await submitStoreCodeMsg();
     return (await client.simulate(address, [craftMsg], undefined)) as Gas;
   };
   return useQuery({
@@ -122,3 +123,91 @@ export const useSimulateFeeForStoreCode = ({
     onError,
   });
 };
+
+interface SimulateQueryParamsForProposalStoreCode {
+  enabled: boolean;
+  title: string;
+  description: string;
+  runAs: string;
+  initialDeposit: Coin;
+  unpinCode: boolean;
+  builder: string;
+  source: string;
+  codeHash: string;
+  wasmFile: Option<File>;
+  permission: AccessType;
+  addresses: Addr[];
+  onSuccess?: (gas: Gas<number> | undefined) => void;
+  onError?: (err: Error) => void;
+}
+
+export const useSimulateFeeForProposalStoreCode = ({
+  enabled,
+  title,
+  description,
+  runAs,
+  initialDeposit,
+  unpinCode,
+  builder,
+  source,
+  codeHash,
+  wasmFile,
+  permission,
+  addresses,
+  onSuccess,
+  onError,
+}: SimulateQueryParamsForProposalStoreCode) => {
+  const { address, getCosmWasmClient, currentChainName } = useWallet();
+
+  const simulateFn = async () => {
+    if (!address) throw new Error("Please check your wallet connection.");
+    if (!wasmFile) throw new Error("Fail to get Wasm file");
+
+    const client = await getCosmWasmClient();
+    if (!client) throw new Error("Fail to get client");
+
+    const submitStoreCodeProposalMsg = async () => {
+      return composeStoreCodeProposalMsg({
+        proposer: address as HumanAddr,
+        title,
+        description,
+        runAs,
+        wasmByteCode: new Uint8Array(await wasmFile.arrayBuffer()),
+        permission,
+        addresses,
+        unpinCode,
+        source,
+        builder,
+        codeHash: Uint8Array.from(Buffer.from(codeHash, "hex")),
+        initialDeposit,
+      });
+    };
+
+    const craftMsg = await submitStoreCodeProposalMsg();
+    return (await client.simulate(address, [craftMsg], undefined)) as Gas;
+  };
+
+  return useQuery({
+    queryKey: [
+      "simulate_fee_store_code_proposal",
+      currentChainName,
+      runAs,
+      initialDeposit,
+      unpinCode,
+      builder,
+      source,
+      codeHash,
+      wasmFile,
+      permission,
+      addresses,
+      enabled,
+    ],
+    queryFn: async () => simulateFn(),
+    enabled,
+    retry: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+    onSuccess,
+    onError,
+  });
+};
diff --git a/src/lib/app-provider/tx/submitProposal.ts b/src/lib/app-provider/tx/submitProposal.ts
index 90c6db936..a10752ab1 100644
--- a/src/lib/app-provider/tx/submitProposal.ts
+++ b/src/lib/app-provider/tx/submitProposal.ts
@@ -3,10 +3,13 @@ import type { StdFee } from "@cosmjs/stargate";
 import { useWallet } from "@cosmos-kit/react";
 import { useCallback } from "react";
 
-import { submitProposalTx } from "lib/app-fns/tx/submitProposal";
+import {
+  submitStoreCodeProposalTx,
+  submitWhitelistProposalTx,
+} from "lib/app-fns/tx/submitProposal";
 import type { HumanAddr } from "lib/types";
 
-export interface SubmitProposalStreamParams {
+export interface SubmitWhitelistProposalStreamParams {
   onTxSucceed?: () => void;
   onTxFailed?: () => void;
   estimatedFee?: StdFee;
@@ -15,7 +18,7 @@ export interface SubmitProposalStreamParams {
   amountToVote: string | null;
 }
 
-export const useSubmitProposalTx = () => {
+export const useSubmitWhitelistProposalTx = () => {
   const { address, getCosmWasmClient } = useWallet();
 
   return useCallback(
@@ -26,12 +29,12 @@ export const useSubmitProposalTx = () => {
       messages,
       whitelistNumber,
       amountToVote,
-    }: SubmitProposalStreamParams) => {
+    }: SubmitWhitelistProposalStreamParams) => {
       const client = await getCosmWasmClient();
       if (!address || !client)
         throw new Error("Please check your wallet connection.");
       if (!estimatedFee) return null;
-      return submitProposalTx({
+      return submitWhitelistProposalTx({
         address: address as HumanAddr,
         client,
         onTxSucceed,
@@ -45,3 +48,43 @@ export const useSubmitProposalTx = () => {
     [address, getCosmWasmClient]
   );
 };
+
+interface SubmitStoreCodeProposalStreamParams {
+  wasmFileName: string;
+  messages: EncodeObject[];
+  amountToVote: string | null;
+  estimatedFee?: StdFee;
+  onTxSucceed?: () => void;
+  onTxFailed?: () => void;
+}
+
+export const useSubmitStoreCodeProposalTx = () => {
+  const { address, getCosmWasmClient, currentChainName } = useWallet();
+  return useCallback(
+    async ({
+      estimatedFee,
+      messages,
+      wasmFileName,
+      amountToVote,
+      onTxSucceed,
+      onTxFailed,
+    }: SubmitStoreCodeProposalStreamParams) => {
+      const client = await getCosmWasmClient();
+      if (!address || !client || !currentChainName)
+        throw new Error("Please check your wallet connection.");
+      if (!estimatedFee) return null;
+      return submitStoreCodeProposalTx({
+        address: address as HumanAddr,
+        chainName: currentChainName,
+        client,
+        onTxSucceed,
+        onTxFailed,
+        fee: estimatedFee,
+        messages,
+        wasmFileName,
+        amountToVote,
+      });
+    },
+    [address, currentChainName, getCosmWasmClient]
+  );
+};
diff --git a/src/lib/components/AddressInput.tsx b/src/lib/components/AddressInput.tsx
index 7b9795b9b..2b70ea3d2 100644
--- a/src/lib/components/AddressInput.tsx
+++ b/src/lib/components/AddressInput.tsx
@@ -20,6 +20,7 @@ interface AddressInputProps<T extends FieldValues>
   validation?: RegisterOptions["validate"];
   maxLength?: number;
   helperAction?: ReactNode;
+  reequiredText?: string;
 }
 
 const getAddressStatus = (input: string, error: Option<string>): FormStatus => {
@@ -40,6 +41,7 @@ export const AddressInput = <T extends FieldValues>({
   validation = {},
   maxLength,
   helperAction,
+  reequiredText = "Address is empty",
 }: AddressInputProps<T>) => {
   const {
     appHumanAddress: { example: exampleAddr },
@@ -73,7 +75,7 @@ export const AddressInput = <T extends FieldValues>({
       helperText={helperText}
       size={size}
       rules={{
-        required: "Address is empty",
+        required: reequiredText,
         validate: { validateAddress, ...validation },
       }}
       maxLength={maxLength}
diff --git a/src/lib/components/StickySidebar.tsx b/src/lib/components/StickySidebar.tsx
index 0558fe866..033efdb44 100644
--- a/src/lib/components/StickySidebar.tsx
+++ b/src/lib/components/StickySidebar.tsx
@@ -10,15 +10,23 @@ import {
   Text,
 } from "@chakra-ui/react";
 
-import { useCurrentNetwork, useInternalNavigate } from "lib/app-provider";
+import {
+  useCurrentNetwork,
+  useInternalNavigate,
+  useSelectChain,
+} from "lib/app-provider";
 import type { Network } from "lib/data";
+import { getChainNameByNetwork } from "lib/data";
 
 import { CustomIcon } from "./icon";
 
 export interface SidebarMetadata {
   title: string;
   description: React.ReactElement;
-  toStoreCode?: boolean;
+  toNetwork?: boolean;
+  toPagePath?: string;
+  toPageTitle?: string;
+  toPage?: boolean;
 }
 
 export type SidebarDetails = Record<Network, SidebarMetadata>;
@@ -27,14 +35,44 @@ interface StickySidebarProps extends BoxProps {
   metadata: SidebarDetails;
 }
 
+interface ToPageProps {
+  onClick: () => void;
+  title: string;
+}
+const ToPage = ({ onClick, title }: ToPageProps) => (
+  <Flex
+    align="center"
+    cursor="pointer"
+    borderRadius={8}
+    p={1}
+    gap={2}
+    width="fit-content"
+    transition="all 0.25s ease-in-out"
+    color="lilac.main"
+    _hover={{
+      color: "lilac.light",
+      bgColor: "lilac.background",
+    }}
+    onClick={onClick}
+  >
+    <Text variant="body3" color="inherit" fontWeight={700}>
+      {title}
+    </Text>
+    <CustomIcon name="chevron-right" color="lilac.main" boxSize={3} m={0} />
+  </Flex>
+);
+
 export const StickySidebar = ({
   metadata,
   ...boxProps
 }: StickySidebarProps) => {
   const navigate = useInternalNavigate();
+  const selectChain = useSelectChain();
+  const { isMainnet } = useCurrentNetwork();
   const { network } = useCurrentNetwork();
-  const { title, description, toStoreCode } = metadata[network];
-  const hasAction = toStoreCode;
+  const { title, description, toNetwork, toPagePath, toPageTitle, toPage } =
+    metadata[network];
+  const hasAction = toPage;
   return (
     <Box flex="4" px={8} position="relative" {...boxProps}>
       <Flex position="fixed" width="full">
@@ -57,35 +95,29 @@ export const StickySidebar = ({
               borderTop="1px solid"
               borderColor="pebble.700"
             >
-              <Text variant="body2" color="text.dark" mb={hasAction ? 3 : 0}>
+              <Text
+                variant="body2"
+                color="text.dark"
+                mb={hasAction ? 3 : 0}
+                pb={2}
+              >
                 {description}
               </Text>
-              {toStoreCode && (
-                <Flex
-                  align="center"
-                  cursor="pointer"
-                  borderRadius={8}
-                  p={1}
-                  gap={2}
-                  width="fit-content"
-                  transition="all 0.25s ease-in-out"
-                  color="lilac.main"
-                  _hover={{
-                    color: "lilac.light",
-                    bgColor: "lilac.background",
-                  }}
-                  onClick={() => navigate({ pathname: "/proposal/store-code" })}
-                >
-                  <Text variant="body3" color="inherit" fontWeight={700}>
-                    Submit Proposal To Store Code
-                  </Text>
-                  <CustomIcon
-                    name="chevron-right"
-                    color="lilac.main"
-                    boxSize={3}
-                    m={0}
-                  />
-                </Flex>
+              {toNetwork && (
+                <ToPage
+                  onClick={() =>
+                    selectChain(
+                      getChainNameByNetwork(isMainnet ? "testnet" : "mainnet")
+                    )
+                  }
+                  title={isMainnet ? "Switch To Testnet" : "Switch To Mainnet"}
+                />
+              )}
+              {toPage && toPagePath && toPageTitle && (
+                <ToPage
+                  onClick={() => navigate({ pathname: toPagePath })}
+                  title={toPageTitle}
+                />
               )}
             </AccordionPanel>
           </AccordionItem>
diff --git a/src/lib/pages/proposal/constants.tsx b/src/lib/pages/proposal/constants.tsx
index eaa3538ce..332526a09 100644
--- a/src/lib/pages/proposal/constants.tsx
+++ b/src/lib/pages/proposal/constants.tsx
@@ -1,6 +1,8 @@
+import Link from "next/link";
+
 import type { SidebarDetails } from "lib/components/StickySidebar";
 
-export const SIDEBAR_DETAILS: SidebarDetails = {
+export const SIDEBAR_WHITELIST_DETAILS: SidebarDetails = {
   mainnet: {
     title: "What is whitelisted address?",
     description: (
@@ -17,7 +19,9 @@ export const SIDEBAR_DETAILS: SidebarDetails = {
         network without having to submit a proposal every time.
       </span>
     ),
-    toStoreCode: true,
+    toPage: true,
+    toPagePath: "/proposal/store-code",
+    toPageTitle: "Submit Proposal To Store Code",
   },
   testnet: {
     title: "Do I need to open proposal to whitelisting in testnet?",
@@ -40,3 +44,84 @@ export const SIDEBAR_DETAILS: SidebarDetails = {
     description: <span />,
   },
 };
+
+export const SIDEBAR_STORE_CODE_DETAILS: SidebarDetails = {
+  mainnet: {
+    title: "Why do I need to submit proposal?",
+    description: (
+      <span>
+        Osmosis Mainnet is permissioned chain, which means you will need to
+        submit proposal to store code
+        <br />
+        <br />
+        Another way is to get your wallet address to allow list to store code
+        without opening proposal.
+        <br />
+        <br />
+        You still can upload your Wasm to see how your code works on Testnet.
+      </span>
+    ),
+    toNetwork: true,
+  },
+  testnet: {
+    title: "Do I need to submit Proposal to store code in testnet?",
+    description: (
+      <span>
+        On the Osmosis testnet, you can store code without submitting a proposal
+        by using
+        <Link href="/deploy">
+          {" "}
+          <span style={{ color: "#D8BEFC" }}>Deploy Contract</span>
+        </Link>
+        <br />
+        <br />
+        However, if you&apos;re interested in exploring about the proposal
+        process, you can try submitting a proposal.
+        <br />
+        <br />
+        On the mainnet, submitting a proposal is required to store code.
+      </span>
+    ),
+    toPage: true,
+    toPagePath: "/deploy",
+    toPageTitle: "Go To Deploy Contract",
+    toNetwork: true,
+  },
+  // TODO: fill localnet information
+  localnet: {
+    title: "",
+    description: <span />,
+  },
+};
+
+export const PROPOSAL_STORE_CODE_TEXT = {
+  header: "Create Proposal to Store Code",
+  description:
+    "To store your contract code, you need to submit a `StoreCodeProposal`. After the proposal passes, the code will bestored on-chain and can then be instantiated.",
+  connectWallet: "You need to connect wallet to proceed this action",
+  titlePlaceholder: "ex. Store code for ...",
+  titleLabel: "Proposal Title",
+  titleRequired: "Proposal Title is required",
+  descriptionPlaceholder:
+    "Usually details information such as the team behind the contract, what the contract does, the benefits the contract will have to the chain/ecosystem, and the compiled code checksum or commit hash for the code on GitHub etc.",
+  descriptionLabel: "Proposal Description",
+  descriptionRequired: "Proposal Description is required",
+  runAsLabel: "Run as",
+  runAsHelperText: "This address will be stored as code creator.",
+  runAsRequired: "Creator is required",
+  uploadHeader: "Upload Wasm File",
+  codeHashHeader: "Code Hash",
+  unpinLabel: "Unpin code",
+  unpinTooltip:
+    "Unpin removes the guarantee of a contract to be pinned. After calling this, the code may or may not remain in memory depending on the implementor's choice. Unpin is idempotent.",
+  builderPlaceholder: "ex. cosmwasm/lorem-optimizer:0.1.1",
+  builderLabel: "Builder",
+  builderRequired: "Builder is required",
+  sourcePlaceholder: "URL to the code",
+  sourceLabel: "Source",
+  sourceRequired: "Source is required",
+  sourceError: "Please provide URL in format: https://github.com/example/url/",
+  permissionTitle: "Instantiate Permission",
+  permissionDescription:
+    "If the proposal is passed, the stored code can be instantiated to a contract by your selected option",
+};
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
new file mode 100644
index 000000000..d5db88f88
--- /dev/null
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -0,0 +1,596 @@
+import {
+  Flex,
+  Heading,
+  Text,
+  Alert,
+  Grid,
+  GridItem,
+  AlertDescription,
+  Checkbox,
+  Box,
+} from "@chakra-ui/react";
+import { Sha256 } from "@cosmjs/crypto";
+import type { Coin, StdFee } from "@cosmjs/stargate";
+import { useWallet } from "@cosmos-kit/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+
+import { AssetBox, Footer } from "../components";
+import {
+  SIDEBAR_STORE_CODE_DETAILS,
+  PROPOSAL_STORE_CODE_TEXT,
+} from "../constants";
+import { getAlert } from "../utils";
+import {
+  useCelatoneApp,
+  useFabricateFee,
+  useSimulateFeeForProposalStoreCode,
+  useSubmitStoreCodeProposalTx,
+  useValidateAddress,
+} from "lib/app-provider";
+import { AddressInput } from "lib/components/AddressInput";
+import { AssignMe } from "lib/components/AssignMe";
+import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
+import { DropZone } from "lib/components/dropzone";
+import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
+import { ControllerInput, ControllerTextarea } from "lib/components/forms";
+import { CustomIcon } from "lib/components/icon";
+import PageContainer from "lib/components/PageContainer";
+import { StickySidebar } from "lib/components/StickySidebar";
+import { TooltipComponent } from "lib/components/TooltipComponent";
+import { InstantiatePermissionRadio } from "lib/components/upload/InstantiatePermissionRadio";
+import { SimulateMessageRender } from "lib/components/upload/SimulateMessageRender";
+import { UploadCard } from "lib/components/upload/UploadCard";
+import {
+  getMaxProposalTitleLengthError,
+  MAX_PROPOSAL_TITLE_LENGTH,
+} from "lib/data";
+import { useTxBroadcast } from "lib/providers/tx-broadcast";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import { useGovParams } from "lib/services/proposalService";
+import type {
+  Addr,
+  HumanAddr,
+  SimulateStatus,
+  UploadSectionState,
+} from "lib/types";
+import { AccessType } from "lib/types";
+import { composeStoreCodeProposalMsg, getAmountToVote } from "lib/utils";
+
+interface StoreCodeProposalState {
+  title: string;
+  proposalDesc: string;
+  runAs: string;
+  initialDeposit: Coin;
+  unpinCode: boolean;
+  builder: string;
+  source: string;
+  codeHash: string;
+}
+
+const defaultValues: StoreCodeProposalState = {
+  title: "",
+  proposalDesc: "",
+  runAs: "",
+  initialDeposit: { denom: "", amount: "" } as Coin,
+  unpinCode: false,
+  builder: "",
+  source: "",
+  codeHash: "",
+};
+
+// TODO - add amp track
+const StoreCodeProposal = () => {
+  const {
+    appHumanAddress: { example: exampleHumanAddress },
+  } = useCelatoneApp();
+  const { address: walletAddress = "" } = useWallet();
+  const fabricateFee = useFabricateFee();
+  const { data: govParams } = useGovParams();
+  const minDeposit = govParams?.depositParams.min_deposit;
+  const { validateUserAddress, validateContractAddress } = useValidateAddress();
+  const submitStoreCodeProposalTx = useSubmitStoreCodeProposalTx();
+  const { broadcast } = useTxBroadcast();
+
+  // States
+  const [estimatedFee, setEstimatedFee] = useState<StdFee>();
+  const [processing, setProcessing] = useState(false);
+  const [simulateStatus, setSimulateStatus] = useState<SimulateStatus>({
+    status: "default",
+    message: "",
+  });
+  const {
+    control,
+    watch,
+    setValue,
+    reset,
+    formState: { errors },
+    trigger,
+  } = useForm<StoreCodeProposalState>({
+    defaultValues,
+    mode: "all",
+  });
+  const {
+    control: uploadSectionControl,
+    watch: uploadSectionWatch,
+    setValue: uploadSectionSetValue,
+    formState: { errors: uploadSectionErrors },
+    trigger: uploadSectionTrigger,
+  } = useForm<UploadSectionState>({
+    defaultValues: {
+      wasmFile: undefined,
+      codeName: "",
+      permission: AccessType.ACCESS_TYPE_EVERYBODY,
+      addresses: [{ address: "" as Addr }],
+    },
+    mode: "all",
+  });
+  const {
+    title,
+    proposalDesc,
+    runAs,
+    initialDeposit,
+    unpinCode,
+    builder,
+    source,
+    codeHash,
+  } = watch();
+  const { wasmFile, permission, addresses } = uploadSectionWatch();
+
+  const { variant, description, icon } = getAlert(
+    initialDeposit.amount,
+    minDeposit?.formattedAmount,
+    minDeposit?.formattedDenom
+  );
+
+  const formErrorsKey = Object.keys(errors).concat(
+    Object.keys(uploadSectionErrors)
+  );
+
+  // Should not simulate when permission is any of addresses and address input is not filled, invalid, or empty
+  const shouldNotSimulateForAnyOfAddr = useMemo(
+    () =>
+      permission === AccessType.ACCESS_TYPE_ANY_OF_ADDRESSES &&
+      (addresses.some((addr) => addr.address.trim().length === 0) ||
+        addresses.some((addr) =>
+          Boolean(
+            validateUserAddress(addr.address) &&
+              validateContractAddress(addr.address)
+          )
+        )),
+
+    [
+      addresses,
+      permission,
+      validateContractAddress,
+      validateUserAddress,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      JSON.stringify(addresses),
+    ]
+  );
+
+  const isAllInputFilled = useMemo(
+    () =>
+      Boolean(
+        title &&
+          proposalDesc &&
+          runAs &&
+          initialDeposit.amount &&
+          builder &&
+          source
+      ),
+    [builder, initialDeposit.amount, proposalDesc, runAs, source, title]
+  );
+
+  // Check whether all input is filled, condition for anyOfAddr is met, and no error occurs for all inputs
+  const enabledTx = useMemo(
+    () =>
+      Boolean(
+        isAllInputFilled &&
+          !shouldNotSimulateForAnyOfAddr &&
+          !formErrorsKey.length
+      ),
+    [formErrorsKey.length, isAllInputFilled, shouldNotSimulateForAnyOfAddr]
+  );
+
+  // Reset simulation status to default when some of the input is not filled
+  useEffect(() => {
+    if (!enabledTx) setSimulateStatus({ status: "default", message: "" });
+  }, [enabledTx]);
+
+  useEffect(() => {
+    if (minDeposit)
+      reset({
+        ...defaultValues,
+        initialDeposit: { denom: minDeposit.denom, amount: "" },
+      });
+  }, [minDeposit, reset]);
+
+  // Generate hash value from wasm file
+  const setHashValue = useCallback(async () => {
+    if (wasmFile) {
+      const wasmFileBytes = new Sha256(
+        new Uint8Array(await wasmFile.arrayBuffer())
+      ).digest();
+      setValue("codeHash", Buffer.from(wasmFileBytes).toString("hex"));
+    } else {
+      setValue("codeHash", "");
+    }
+  }, [setValue, wasmFile]);
+
+  useEffect(() => {
+    setHashValue();
+  }, [setHashValue]);
+
+  const { isFetching: isSimulating } = useSimulateFeeForProposalStoreCode({
+    enabled: Boolean(walletAddress && enabledTx),
+    title,
+    description: proposalDesc,
+    runAs,
+    initialDeposit,
+    unpinCode,
+    builder,
+    source,
+    codeHash,
+    wasmFile,
+    permission,
+    addresses: addresses.map((addr) => addr.address),
+    onSuccess: (fee) => {
+      if (wasmFile && walletAddress && fee) {
+        setSimulateStatus({
+          status: "succeeded",
+          message: "Valid Wasm file and submitting proposal conditions",
+        });
+        setEstimatedFee(fabricateFee(fee));
+      }
+    },
+    onError: (e) => {
+      setSimulateStatus({ status: "failed", message: e.message });
+      setEstimatedFee(undefined);
+    },
+  });
+
+  const proceed = useCallback(async () => {
+    if (!wasmFile) return null;
+    const submitStoreCodeProposalMsg = async () => {
+      return composeStoreCodeProposalMsg({
+        proposer: walletAddress as HumanAddr,
+        title,
+        description: proposalDesc,
+        runAs,
+        wasmByteCode: new Uint8Array(await wasmFile.arrayBuffer()),
+        permission,
+        addresses: addresses.map((addr) => addr.address),
+        unpinCode,
+        source,
+        builder,
+        codeHash: Uint8Array.from(Buffer.from(codeHash, "hex")),
+        initialDeposit,
+      });
+    };
+
+    const craftMsg = await submitStoreCodeProposalMsg();
+
+    const stream = await submitStoreCodeProposalTx({
+      estimatedFee,
+      messages: [craftMsg],
+      wasmFileName: wasmFile.name,
+      amountToVote: getAmountToVote(initialDeposit, minDeposit),
+      onTxSucceed: () => setProcessing(false),
+      onTxFailed: () => setProcessing(false),
+    });
+    if (stream) {
+      setProcessing(true);
+      broadcast(stream);
+    }
+    return null;
+  }, [
+    addresses,
+    broadcast,
+    builder,
+    codeHash,
+    estimatedFee,
+    initialDeposit,
+    minDeposit,
+    permission,
+    proposalDesc,
+    runAs,
+    source,
+    submitStoreCodeProposalTx,
+    title,
+    unpinCode,
+    walletAddress,
+    wasmFile,
+  ]);
+
+  return (
+    <>
+      <PageContainer>
+        <Grid
+          templateAreas={`"prespace main sidebar postspace"`}
+          templateColumns="1fr 6fr 4fr 1fr"
+          gap={4}
+        >
+          <GridItem area="main">
+            <Heading as="h5" variant="h5">
+              {PROPOSAL_STORE_CODE_TEXT.header}
+            </Heading>
+            <Text color="text.dark" pt={4}>
+              {PROPOSAL_STORE_CODE_TEXT.description}
+            </Text>
+            <ConnectWalletAlert
+              subtitle={PROPOSAL_STORE_CODE_TEXT.connectWallet}
+              mt={12}
+            />
+            <form>
+              <Flex my="48px" gap={6} direction="column">
+                <Heading as="h6" variant="h6" mb={6}>
+                  {PROPOSAL_STORE_CODE_TEXT.header}
+                </Heading>
+
+                {/* Title  */}
+                <ControllerInput
+                  name="title"
+                  control={control}
+                  placeholder={PROPOSAL_STORE_CODE_TEXT.titlePlaceholder}
+                  label={PROPOSAL_STORE_CODE_TEXT.titleLabel}
+                  labelBgColor="background.main"
+                  variant="floating"
+                  rules={{
+                    required: PROPOSAL_STORE_CODE_TEXT.titleRequired,
+                    maxLength: MAX_PROPOSAL_TITLE_LENGTH,
+                  }}
+                  error={
+                    errors.title?.message ||
+                    getMaxProposalTitleLengthError(title.length)
+                  }
+                />
+
+                {/* Description  */}
+                <ControllerTextarea
+                  name="proposalDesc"
+                  control={control}
+                  height="160px"
+                  label={PROPOSAL_STORE_CODE_TEXT.descriptionLabel}
+                  placeholder={PROPOSAL_STORE_CODE_TEXT.descriptionPlaceholder}
+                  variant="floating"
+                  labelBgColor="background.main"
+                  rules={{
+                    required: PROPOSAL_STORE_CODE_TEXT.descriptionRequired,
+                  }}
+                  error={errors.proposalDesc?.message}
+                />
+
+                {/* Run as  */}
+                <AddressInput
+                  name="runAs"
+                  control={control}
+                  label={PROPOSAL_STORE_CODE_TEXT.runAsLabel}
+                  labelBgColor="background.main"
+                  placeholder={`ex. ${exampleHumanAddress}`}
+                  variant="floating"
+                  helperText={PROPOSAL_STORE_CODE_TEXT.runAsHelperText}
+                  reequiredText={PROPOSAL_STORE_CODE_TEXT.runAsRequired}
+                  error={errors.runAs?.message}
+                  helperAction={
+                    <AssignMe
+                      onClick={
+                        walletAddress
+                          ? () => {
+                              AmpTrack(AmpEvent.USE_ASSIGN_ME);
+                              setValue("runAs", walletAddress);
+                              trigger("runAs");
+                            }
+                          : undefined
+                      }
+                      isDisable={runAs === walletAddress}
+                    />
+                  }
+                />
+
+                {/* Upload file  */}
+                <Heading as="h6" variant="h6" pt={12} pb={6}>
+                  {PROPOSAL_STORE_CODE_TEXT.uploadHeader}
+                </Heading>
+                {wasmFile ? (
+                  <UploadCard
+                    file={wasmFile}
+                    deleteFile={() => {
+                      uploadSectionSetValue("wasmFile", undefined);
+                    }}
+                  />
+                ) : (
+                  <DropZone
+                    setFile={(file) => uploadSectionSetValue("wasmFile", file)}
+                  />
+                )}
+
+                {/* Code hash  */}
+                <Flex
+                  border="1px"
+                  borderRadius="5px"
+                  position="relative"
+                  px={3}
+                  py={4}
+                  borderColor="pebble.700"
+                  bg="pebble.800"
+                  h="56px"
+                >
+                  <Text
+                    position="absolute"
+                    variant="body2"
+                    color="text.dark"
+                    px="1px"
+                    top="-10px"
+                  >
+                    {PROPOSAL_STORE_CODE_TEXT.codeHashHeader}
+                  </Text>
+                  <Text>{codeHash}</Text>
+                </Flex>
+
+                {/* Unpin code  */}
+                <Flex direction="row" alignItems="center" gap={1}>
+                  <Checkbox
+                    onChange={(e) => setValue("unpinCode", e.target.checked)}
+                  >
+                    {PROPOSAL_STORE_CODE_TEXT.unpinLabel}
+                  </Checkbox>
+                  <TooltipComponent
+                    label={PROPOSAL_STORE_CODE_TEXT.unpinTooltip}
+                    maxW="440px"
+                  >
+                    <div>
+                      <CustomIcon
+                        name="info-circle"
+                        boxSize="3"
+                        color="white"
+                      />
+                    </div>
+                  </TooltipComponent>
+                </Flex>
+
+                {/* Builder  */}
+                <ControllerInput
+                  name="builder"
+                  control={control}
+                  placeholder={PROPOSAL_STORE_CODE_TEXT.builderPlaceholder}
+                  label={PROPOSAL_STORE_CODE_TEXT.builderLabel}
+                  labelBgColor="background.main"
+                  variant="floating"
+                  rules={{
+                    required: PROPOSAL_STORE_CODE_TEXT.builderRequired,
+                  }}
+                  error={errors.builder?.message}
+                />
+
+                {/* Source  */}
+                <ControllerInput
+                  name="source"
+                  control={control}
+                  placeholder={PROPOSAL_STORE_CODE_TEXT.sourcePlaceholder}
+                  label={PROPOSAL_STORE_CODE_TEXT.sourceLabel}
+                  labelBgColor="background.main"
+                  variant="floating"
+                  rules={{
+                    required: PROPOSAL_STORE_CODE_TEXT.sourceRequired,
+                    pattern: /^(?!:)[a-zA-Z0-9+.-]+:/,
+                  }}
+                  error={
+                    // Source should start with a valid scheme
+                    source && !source.match(/^(?!:)[a-zA-Z0-9+.-]+:/)
+                      ? PROPOSAL_STORE_CODE_TEXT.sourceError
+                      : errors.source?.message
+                  }
+                />
+
+                {/* Instantiate permission  */}
+                <Heading as="h6" variant="h6" pt={12}>
+                  {PROPOSAL_STORE_CODE_TEXT.permissionTitle}
+                </Heading>
+                <Text color="text.dark" pb={2}>
+                  {PROPOSAL_STORE_CODE_TEXT.permissionDescription}
+                </Text>
+                <InstantiatePermissionRadio
+                  control={uploadSectionControl}
+                  setValue={uploadSectionSetValue}
+                  trigger={uploadSectionTrigger}
+                />
+
+                {/* Deposit  */}
+                <Heading as="h6" variant="h6" mt={12}>
+                  Initial Deposit
+                </Heading>
+                <Text color="text.dark" mt={2} fontWeight={500} variant="body2">
+                  Minimum deposit required to start 7-day voting period:{" "}
+                  {minDeposit?.formattedToken}
+                </Text>
+                <Grid py={6} columnGap={4} templateColumns="1fr 3fr">
+                  <AssetBox baseDenom={initialDeposit.denom} />
+                  <ControllerInput
+                    name="initialDeposit.amount"
+                    control={control}
+                    label="Amount"
+                    placeholder="0.00"
+                    variant="floating"
+                    type="number"
+                    helperAction={
+                      <Text
+                        textAlign="right"
+                        mr={3}
+                        fontWeight="600"
+                        cursor="pointer"
+                        variant="body3"
+                        minW={16}
+                        color="honeydew.main"
+                        onClick={() => {
+                          if (!minDeposit) return;
+                          setValue(
+                            "initialDeposit.amount",
+                            minDeposit.formattedAmount
+                          );
+                        }}
+                      >
+                        Fill {minDeposit?.formattedToken}
+                      </Text>
+                    }
+                  />
+                </Grid>
+
+                {/* Alert  */}
+                <Alert variant={variant} gap="2" w="inherit">
+                  {icon}
+                  <AlertDescription>{description}</AlertDescription>
+                </Alert>
+                <Box>
+                  {/* Transaction fee  */}
+                  {(simulateStatus.status !== "default" || isSimulating) && (
+                    <SimulateMessageRender
+                      value={
+                        isSimulating
+                          ? "Checking Wasm file and proposal conditions validity"
+                          : simulateStatus.message
+                      }
+                      isLoading={isSimulating}
+                      mb={2}
+                      isSuccess={simulateStatus.status === "succeeded"}
+                    />
+                  )}
+                  <Flex
+                    fontSize="14px"
+                    color="text.dark"
+                    alignSelf="flex-start"
+                    alignItems="center"
+                    display="flex"
+                    gap={1}
+                  >
+                    Transaction Fee:{" "}
+                    <EstimatedFeeRender
+                      estimatedFee={estimatedFee}
+                      loading={isSimulating}
+                    />
+                  </Flex>
+                </Box>
+              </Flex>
+            </form>
+          </GridItem>
+
+          {/* Sticky Sidebar  */}
+          <GridItem area="sidebar">
+            <StickySidebar
+              marginTop="128px"
+              metadata={SIDEBAR_STORE_CODE_DETAILS}
+            />
+          </GridItem>
+        </Grid>
+      </PageContainer>
+
+      <Footer
+        disabled={isSimulating || !estimatedFee || !enabledTx}
+        onSubmit={proceed}
+        isLoading={processing}
+      />
+    </>
+  );
+};
+
+export default StoreCodeProposal;
diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index 4a3f311c4..dbee2064d 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -10,19 +10,18 @@ import {
 } from "@chakra-ui/react";
 import type { Coin, StdFee } from "@cosmjs/stargate";
 import { useWallet } from "@cosmos-kit/react";
-import big from "big.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 
 import { AssetBox, Footer } from "../components";
 import { TestnetAlert } from "../components/TestnetAlert";
-import { SIDEBAR_DETAILS } from "../constants";
+import { SIDEBAR_WHITELIST_DETAILS } from "../constants";
 import { getAlert } from "../utils";
 import {
   useCurrentNetwork,
   useFabricateFee,
   useSimulateFeeQuery,
-  useSubmitProposalTx,
+  useSubmitWhitelistProposalTx,
 } from "lib/app-provider";
 import { AddressInput } from "lib/components/AddressInput";
 import { AssignMe } from "lib/components/AssignMe";
@@ -41,7 +40,7 @@ import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { useGovParams } from "lib/services/proposalService";
 import type { Addr } from "lib/types";
-import { composeSubmitWhitelistProposalMsg, d2Formatter } from "lib/utils";
+import { composeSubmitWhitelistProposalMsg, getAmountToVote } from "lib/utils";
 
 interface WhiteListState {
   title: string;
@@ -61,7 +60,7 @@ const ProposalToWhitelist = () => {
   const { address: walletAddress = "" } = useWallet();
   const fabricateFee = useFabricateFee();
   const { data: govParams } = useGovParams();
-  const submitProposalTx = useSubmitProposalTx();
+  const submitProposalTx = useSubmitWhitelistProposalTx();
   const { broadcast } = useTxBroadcast();
   const {
     control,
@@ -154,18 +153,12 @@ const ProposalToWhitelist = () => {
   );
 
   const proceed = useCallback(async () => {
-    const minDepositAmount = big(minDeposit?.formattedAmount || 0);
     const stream = await submitProposalTx({
       estimatedFee,
       messages: [submitWhitelistProposalMsg],
       whitelistNumber: addressesArray.length,
-      amountToVote: minDepositAmount.lte(initialDeposit.amount)
-        ? null
-        : // TODO: Refactor this logic into utils?
-          `${d2Formatter(
-            minDepositAmount.minus(initialDeposit.amount),
-            "NaN"
-          )} ${minDeposit?.formattedDenom}`,
+      amountToVote: getAmountToVote(initialDeposit, minDeposit),
+
       onTxSucceed: () => setProcessing(false),
       onTxFailed: () => setProcessing(false),
     });
@@ -174,13 +167,13 @@ const ProposalToWhitelist = () => {
       broadcast(stream);
     }
   }, [
-    addressesArray.length,
-    submitWhitelistProposalMsg,
-    estimatedFee,
-    initialDeposit.amount,
     minDeposit,
-    broadcast,
     submitProposalTx,
+    estimatedFee,
+    submitWhitelistProposalMsg,
+    addressesArray.length,
+    initialDeposit,
+    broadcast,
   ]);
 
   useEffect(() => {
@@ -400,7 +393,10 @@ const ProposalToWhitelist = () => {
             </form>
           </GridItem>
           <GridItem area="sidebar">
-            <StickySidebar marginTop="128px" metadata={SIDEBAR_DETAILS} />
+            <StickySidebar
+              marginTop="128px"
+              metadata={SIDEBAR_WHITELIST_DETAILS}
+            />
           </GridItem>
         </Grid>
       </PageContainer>
diff --git a/src/lib/pages/store-code/components/Footer.tsx b/src/lib/pages/store-code/components/Footer.tsx
deleted file mode 100644
index 648bc16eb..000000000
--- a/src/lib/pages/store-code/components/Footer.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Button, Flex, Grid, GridItem, Spinner } from "@chakra-ui/react";
-import { useRouter } from "next/router";
-
-interface FooterProps {
-  // onSubmit: () => void;
-  // disabled: boolean;
-  loading: boolean;
-}
-
-export const Footer = ({
-  // onSubmit,
-  // disabled,
-  loading = false,
-}: FooterProps) => {
-  const router = useRouter();
-  return (
-    <Flex
-      gap={2}
-      w="full"
-      bg="pebble.900"
-      h="70px"
-      px={12}
-      bottom="0"
-      position="sticky"
-      zIndex={2}
-    >
-      <Grid templateColumns="1fr 6fr 4fr 1fr" gap={4} w="100%">
-        <GridItem w="100%" />
-        <GridItem w="100%">
-          <Flex
-            flex="5"
-            align="center"
-            justify="space-between"
-            h="full"
-            w="full"
-          >
-            <Button variant="outline-gray" onClick={router.back}>
-              Cancel
-            </Button>
-            <Button
-              variant="primary"
-              // onClick={onSubmit}
-              // disabled={disabled}
-            >
-              {loading ? (
-                <Spinner size="md" color="pebble.600" />
-              ) : (
-                "Submit Proposal"
-              )}
-            </Button>
-          </Flex>
-        </GridItem>
-        <GridItem w="100%" />
-        <GridItem w="100%" />
-      </Grid>
-    </Flex>
-  );
-};
diff --git a/src/lib/pages/store-code/index.tsx b/src/lib/pages/store-code/index.tsx
deleted file mode 100644
index ceefdc2c0..000000000
--- a/src/lib/pages/store-code/index.tsx
+++ /dev/null
@@ -1,471 +0,0 @@
-import {
-  Flex,
-  Heading,
-  Text,
-  Box,
-  Button,
-  RadioGroup,
-  Radio,
-  Alert,
-  Grid,
-  GridItem,
-  AlertDescription,
-} from "@chakra-ui/react";
-import type { Coin, StdFee } from "@cosmjs/stargate";
-import { useWallet } from "@cosmos-kit/react";
-import big from "big.js";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import { useFieldArray, useForm } from "react-hook-form";
-
-import { AddressInput } from "../../components/AddressInput";
-import { SIDEBAR_DETAILS } from "../proposal/constants";
-import { useNativeTokensInfo, useSimulateFee } from "lib/app-provider";
-import { AssignMe } from "lib/components/AssignMe";
-import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
-import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
-import {
-  ControllerInput,
-  ControllerTextarea,
-  SelectInput,
-} from "lib/components/forms";
-import { CustomIcon } from "lib/components/icon";
-import PageContainer from "lib/components/PageContainer";
-import { StickySidebar } from "lib/components/StickySidebar";
-import {
-  getMaxProposalTitleLengthError,
-  MAX_PROPOSAL_TITLE_LENGTH,
-} from "lib/data";
-import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import type { Addr, SimulateStatus } from "lib/types";
-
-import { Footer } from "./components/Footer";
-
-interface WhiteListState {
-  title: string;
-  description: string;
-  creator: string;
-  onlyAddress: string;
-  addresses: { address: Addr }[];
-  initialDeposit: Coin;
-  estimatedFee?: StdFee;
-  simulateStatus: SimulateStatus;
-  simulateError: string;
-}
-
-type PermissionType = "everybody" | "nobody" | "any-of-addresses";
-const mockUpDepositAmount = 1000.0;
-const getAlert = (amount: string) => {
-  const enteredAmount = amount || 0;
-  if (big(enteredAmount).lt(mockUpDepositAmount)) {
-    return {
-      variant: "warning",
-      description: `${big(mockUpDepositAmount)
-        .sub(enteredAmount)
-        .toFixed(
-          2
-        )} more KOYN is required to enter the voting period. If you proceed with this amount without further deposit after 7 days, The chain will remove your proposal with no fund return.`,
-      icon: (
-        <CustomIcon
-          name="alert-circle-solid"
-          color="warning.main"
-          boxSize="4"
-        />
-      ),
-    };
-  }
-  if (big(enteredAmount).eq(mockUpDepositAmount)) {
-    return {
-      variant: "honeydew",
-      description:
-        "The proposal will proceed to voting period immediately after created.",
-      icon: (
-        <CustomIcon
-          name="info-circle-solid"
-          color="honeydew.main"
-          boxSize="4"
-        />
-      ),
-    };
-  }
-  if (big(mockUpDepositAmount).lt(enteredAmount)) {
-    return {
-      variant: "warning",
-      description: `You’re depositing more than the minimum requirement, the proposal will proceed to voting immediately after creation. To prevent fund loss if rejected, deposit equal to the minimum requirement.
-`,
-      icon: (
-        <CustomIcon
-          name="alert-circle-solid"
-          color="warning.main"
-          boxSize="4"
-        />
-      ),
-    };
-  }
-  return {
-    variant: "",
-    description: "",
-    icon: null,
-  };
-};
-const StoreCode = () => {
-  const { loading } = useSimulateFee();
-  const router = useRouter();
-  const {
-    control,
-    watch,
-    setValue,
-    formState: { errors },
-  } = useForm<WhiteListState>({
-    defaultValues: {
-      title: "",
-      description: "",
-      creator: "",
-      onlyAddress: "",
-      addresses: [{ address: "" as Addr }],
-      initialDeposit: { denom: "", amount: "" } as Coin,
-      estimatedFee: undefined,
-      simulateStatus: { status: "default", message: "" },
-      simulateError: "",
-    },
-    mode: "all",
-  });
-  const { title, creator, addresses } = watch();
-  const initialDepositWatch = watch("initialDeposit");
-
-  const { address: walletAddress = "" } = useWallet();
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: "addresses",
-  });
-
-  const { estimatedFee } = watch();
-  const nativeTokensInfo = useNativeTokensInfo();
-  const [permission, setpermission] = useState<PermissionType>("everybody");
-
-  const { variant, description, icon } = getAlert(initialDepositWatch.amount);
-  useEffect(() => {
-    if (router.isReady) AmpTrack(AmpEvent.TO_PROPOSALS);
-  }, [router.isReady]);
-
-  return (
-    <>
-      <PageContainer>
-        <Flex w="100%">
-          <Grid templateColumns="1fr 6fr 4fr 1fr" gap={4} w="100%">
-            <GridItem w="100%" />
-            <GridItem w="100%">
-              <Box flex="6">
-                <Heading as="h5" variant="h5">
-                  Create Proposal to Store Code
-                </Heading>
-                <Text color="text.dark" pt={4}>
-                  To store your contract code, you need to submit a
-                  `StoreCodeProposal`. After the proposal passes, the code will
-                  be stored on-chain and can then be instantiated.
-                </Text>
-                <ConnectWalletAlert
-                  subtitle="You need to connect wallet to proceed this action"
-                  mt={12}
-                />
-                <form style={{ width: "100%" }}>
-                  <Flex
-                    mt={12}
-                    p={4}
-                    gap={6}
-                    bgColor="pebble.900"
-                    flexDirection="column"
-                    borderRadius="8px"
-                  >
-                    <Flex gap={2} alignItems="center">
-                      <CustomIcon name="proposal-solid" />
-                      <Heading as="h6" variant="h6">
-                        Fill in Proposal Details
-                      </Heading>
-                    </Flex>
-                    <ControllerInput
-                      name="title"
-                      control={control}
-                      placeholder="ex. Store code for ..."
-                      label="Proposal Title"
-                      labelBgColor="pebble.900"
-                      variant="floating"
-                      rules={{
-                        required: "Proposal Title is required",
-                        maxLength: MAX_PROPOSAL_TITLE_LENGTH,
-                      }}
-                      error={
-                        errors.title &&
-                        (errors.title.message ||
-                          getMaxProposalTitleLengthError(title.length))
-                      }
-                    />
-                    <ControllerTextarea
-                      name="description"
-                      control={control}
-                      height="160px"
-                      label="Proposal Description"
-                      placeholder="Usually details information such as the team behind the contract, what the contract does, the benefits the contract will have to the chain/ecosystem, and the compiled code checksum or commit hash for the code on GitHub etc."
-                      variant="floating"
-                      labelBgColor="pebble.900"
-                      rules={{
-                        required: "Proposal Description is required",
-                      }}
-                      error={errors.description && errors.description.message}
-                    />
-                    <AddressInput
-                      name="creator"
-                      control={control}
-                      label="Run as"
-                      labelBgColor="pebble.900"
-                      placeholder="ex.cltn1ff1asdf7988aw49efa4vw9846789"
-                      variant="floating"
-                      helperText="This address will be stored as code creator."
-                      // TODO - Add this rule
-                      // rules={{
-                      //   required: "Creator is required",
-                      // }}
-                      error={errors.creator && errors.creator.message}
-                      helperAction={
-                        <AssignMe
-                          onClick={
-                            walletAddress
-                              ? () => {
-                                  AmpTrack(AmpEvent.USE_ASSIGN_ME);
-                                  setValue("creator", walletAddress);
-                                }
-                              : undefined
-                          }
-                          isDisable={creator === walletAddress}
-                        />
-                      }
-                    />
-                  </Flex>
-                  <Heading as="h6" variant="h6" pt={12}>
-                    Instantiate Permission
-                  </Heading>
-                  <Text color="text.dark" pt={4}>
-                    If the proposal is passed, the stored code can be
-                    instantiated to a contract by your selected option
-                  </Text>
-                  <Box pt={6}>
-                    <RadioGroup
-                      name="instantiatePermission"
-                      onChange={(
-                        nextVal: "everybody" | "nobody" | "any-of-addresses"
-                      ) => {
-                        setpermission(nextVal);
-                      }}
-                      value={permission}
-                    >
-                      <Box>
-                        <Radio value="everybody" py={2} width="100%" size="lg">
-                          <Text
-                            fontWeight={
-                              permission === "everybody" ? "600" : "400"
-                            }
-                          >
-                            Anyone can instantiate (Everybody)
-                          </Text>
-                        </Radio>
-                        <Radio value="nobody" py={2} width="100%" size="lg">
-                          <Text
-                            fontWeight={permission === "nobody" ? "600" : "400"}
-                          >
-                            Instantiate through governance only (Nobody)
-                          </Text>
-                        </Radio>
-
-                        <Box>
-                          <Radio
-                            value="any-of-addresses"
-                            py={2}
-                            width="100%"
-                            size="lg"
-                          >
-                            <Text
-                              fontWeight={
-                                permission === "any-of-addresses"
-                                  ? "600"
-                                  : "400"
-                              }
-                            >
-                              Only a set of addresses can instantiate
-                              (AnyOfAddresses)
-                            </Text>
-                          </Radio>
-                          {permission === "any-of-addresses" && (
-                            <Box>
-                              {fields.map((field, idx) => (
-                                <Flex gap={2} my={6} width="100%">
-                                  <AddressInput
-                                    name={`addresses.${idx}.address`}
-                                    control={control}
-                                    label="Address"
-                                    placeholder="ex.cltn1ff1asdf7988aw49efa4vw9846789"
-                                    variant="floating"
-                                    error={
-                                      addresses[idx].address &&
-                                      addresses.find(
-                                        (x, i) =>
-                                          i < idx &&
-                                          x.address === addresses[idx].address
-                                      ) &&
-                                      "You already input this address"
-                                    }
-                                    helperAction={
-                                      <AssignMe
-                                        onClick={
-                                          walletAddress &&
-                                          !addresses.find(
-                                            (x) => x.address === walletAddress
-                                          )
-                                            ? () => {
-                                                AmpTrack(
-                                                  AmpEvent.USE_ASSIGN_ME
-                                                );
-                                                setValue(
-                                                  `addresses.${idx}.address`,
-                                                  walletAddress as Addr
-                                                );
-                                              }
-                                            : undefined
-                                        }
-                                        isDisable={
-                                          !!addresses.find(
-                                            (x) => x.address === walletAddress
-                                          )
-                                        }
-                                      />
-                                    }
-                                  />
-                                  <Button
-                                    w="56px"
-                                    h="56px"
-                                    variant="outline-gray"
-                                    size="lg"
-                                    disabled={fields.length <= 1}
-                                    onClick={() => remove(idx)}
-                                  >
-                                    <CustomIcon
-                                      name="delete"
-                                      color={
-                                        fields.length <= 1
-                                          ? "pebble.600"
-                                          : "text.dark"
-                                      }
-                                    />
-                                  </Button>
-                                </Flex>
-                              ))}
-                              <Button
-                                variant="outline-primary"
-                                mt={3}
-                                mx="auto"
-                                onClick={() => append({ address: "" as Addr })}
-                                leftIcon={
-                                  <CustomIcon
-                                    name="plus"
-                                    color="violet.light"
-                                  />
-                                }
-                              >
-                                Add More Address
-                              </Button>
-                            </Box>
-                          )}
-                        </Box>
-                      </Box>
-                    </RadioGroup>
-                  </Box>
-                  <Heading as="h6" variant="h6" pt={12}>
-                    Initial Deposit
-                  </Heading>
-                  <Text color="text.dark" pt={4}>
-                    Minimum deposit required to start 7-day voting period:{" "}
-                    {mockUpDepositAmount} KOYN
-                  </Text>
-                  <Flex py={6} gap={4}>
-                    <Flex flex="1">
-                      <SelectInput
-                        formLabel="Asset"
-                        options={nativeTokensInfo.map((asset) => ({
-                          label: asset.symbol,
-                          value: asset.base,
-                          disabled: false,
-                        }))}
-                        onChange={(newVal) =>
-                          setValue("initialDeposit.denom", newVal)
-                        }
-                        placeholder="Select"
-                        initialSelected={initialDepositWatch.denom}
-                      />
-                    </Flex>
-                    <Flex flex="3">
-                      <ControllerInput
-                        name="initialDeposit.amount"
-                        control={control}
-                        label="Amount"
-                        placeholder="0.00"
-                        variant="floating"
-                        type="number"
-                        helperAction={
-                          <Text
-                            textAlign="right"
-                            mr={3}
-                            fontWeight="600"
-                            cursor="pointer"
-                            variant="body3"
-                            minW={16}
-                            color="honeydew.main"
-                            onClick={() =>
-                              setValue(
-                                "initialDeposit.amount",
-                                big(mockUpDepositAmount).toFixed(2)
-                              )
-                            }
-                          >
-                            Fill {big(mockUpDepositAmount).toFixed(2)} KOYN
-                          </Text>
-                        }
-                      />
-                    </Flex>
-                  </Flex>
-
-                  <Alert variant={variant} gap="2" w="inherit">
-                    {icon}
-                    <AlertDescription>{description}</AlertDescription>
-                  </Alert>
-
-                  <Flex
-                    mt={12}
-                    fontSize="14px"
-                    color="text.dark"
-                    alignSelf="flex-start"
-                    alignItems="center"
-                    display="flex"
-                    gap={1}
-                  >
-                    <p>Transaction Fee:</p>
-                    <EstimatedFeeRender
-                      estimatedFee={estimatedFee}
-                      loading={loading}
-                    />
-                  </Flex>
-                </form>
-              </Box>
-            </GridItem>
-            <GridItem w="100%">
-              {/* TODO - Change text */}
-              <StickySidebar marginTop="128px" metadata={SIDEBAR_DETAILS} />
-            </GridItem>
-            <GridItem w="100%" />
-          </Grid>
-        </Flex>
-      </PageContainer>
-      <Footer loading={false} />
-    </>
-  );
-};
-
-export default StoreCode;
diff --git a/src/lib/services/proposalService.ts b/src/lib/services/proposalService.ts
index 77bf395ed..2d3c06852 100644
--- a/src/lib/services/proposalService.ts
+++ b/src/lib/services/proposalService.ts
@@ -263,14 +263,15 @@ export const useProposalTypes = (): UseQueryResult<ProposalType[]> => {
   return useQuery(["proposal_types", indexerGraphClient], queryFn);
 };
 
+export interface MinDeposit {
+  amount: U<Token>;
+  denom: string;
+  formattedAmount: Token;
+  formattedDenom: string;
+  formattedToken: string;
+}
 interface DepositParamsReturn extends Omit<DepositParams, "min_deposit"> {
-  min_deposit: {
-    amount: U<Token>;
-    denom: string;
-    formattedAmount: Token;
-    formattedDenom: string;
-    formattedToken: string;
-  };
+  min_deposit: MinDeposit;
 }
 
 export const useGovParams = (): UseQueryResult<{
diff --git a/src/lib/types/tx/msg.ts b/src/lib/types/tx/msg.ts
index 456dc0547..9609344c3 100644
--- a/src/lib/types/tx/msg.ts
+++ b/src/lib/types/tx/msg.ts
@@ -23,6 +23,7 @@ export enum AccessType {
 
 export interface AccessConfig {
   permission: AccessType;
+  address: Addr;
   addresses: Addr[];
 }
 
diff --git a/src/lib/utils/formatter/index.ts b/src/lib/utils/formatter/index.ts
index ad0a3ee3b..c2eac1536 100644
--- a/src/lib/utils/formatter/index.ts
+++ b/src/lib/utils/formatter/index.ts
@@ -7,3 +7,4 @@ export * from "./snakeToCamel";
 export * from "./formatBalanceWithDenom";
 export * from "./tokenType";
 export * from "./token";
+export * from "./text";
diff --git a/src/lib/utils/formatter/text.ts b/src/lib/utils/formatter/text.ts
new file mode 100644
index 000000000..52eb97f7e
--- /dev/null
+++ b/src/lib/utils/formatter/text.ts
@@ -0,0 +1,2 @@
+export const capitalizedFirst = (text: string) =>
+  text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
diff --git a/src/lib/utils/formatter/tokenType.ts b/src/lib/utils/formatter/tokenType.ts
index 2a4f45d55..dc7f07ac7 100644
--- a/src/lib/utils/formatter/tokenType.ts
+++ b/src/lib/utils/formatter/tokenType.ts
@@ -1,12 +1,14 @@
 import { truncate } from "../truncate";
 
+import { capitalizedFirst } from "./text";
+
 export const getTokenType = (type: string) => {
   switch (type.toLowerCase()) {
     case "ibc":
     case "cw20":
       return type.toUpperCase();
     default:
-      return type.charAt(0).toUpperCase() + type.slice(1).toLowerCase();
+      return capitalizedFirst(type);
   }
 };
 
diff --git a/src/lib/utils/proposal.ts b/src/lib/utils/proposal.ts
index e7a3fab1d..dacc75786 100644
--- a/src/lib/utils/proposal.ts
+++ b/src/lib/utils/proposal.ts
@@ -1,6 +1,26 @@
+import type { Coin } from "@cosmjs/stargate";
+import big from "big.js";
+
+import type { MinDeposit } from "lib/services/proposalService";
+import type { Option } from "lib/types";
 import { ProposalStatus } from "lib/types";
 
+import { d2Formatter } from "./formatter";
+
 export const parseProposalStatus = (status: string): ProposalStatus =>
   status === "Inactive"
     ? ProposalStatus.DEPOSIT_FAILED
     : (status as ProposalStatus);
+
+export const getAmountToVote = (
+  initialDeposit: Coin,
+  minDeposit: Option<MinDeposit>
+) => {
+  const minDepositAmount = big(minDeposit?.formattedAmount || 0);
+
+  return minDepositAmount.lte(initialDeposit.amount)
+    ? null
+    : `${d2Formatter(minDepositAmount.minus(initialDeposit.amount), "NaN")} ${
+        minDeposit?.formattedDenom
+      }`;
+};
diff --git a/src/lib/utils/tx/composeMsg.ts b/src/lib/utils/tx/composeMsg.ts
index 8f03d331c..2e151c65a 100644
--- a/src/lib/utils/tx/composeMsg.ts
+++ b/src/lib/utils/tx/composeMsg.ts
@@ -1,5 +1,6 @@
 import type { Coin } from "@cosmjs/stargate";
 import { ParameterChangeProposal } from "cosmjs-types/cosmos/params/v1beta1/params";
+import { StoreCodeProposal } from "cosmjs-types/cosmwasm/wasm/v1/proposal";
 
 import { microfy } from "../formatter";
 import { typeUrlDict } from "lib/data";
@@ -39,6 +40,7 @@ export const composeStoreCodeMsg = ({
     instantiatePermission: {
       permission,
       addresses,
+      address: "" as Addr,
     },
   });
 
@@ -82,3 +84,63 @@ export const composeSubmitWhitelistProposalMsg = ({
     ],
     proposer,
   });
+
+interface StoreCodeProposalMsgArgs {
+  proposer: string;
+  title: string;
+  description: string;
+  runAs: string;
+  wasmByteCode: Uint8Array;
+  permission: AccessType;
+  addresses: Addr[];
+  unpinCode: boolean;
+  source: string;
+  builder: string;
+  codeHash: Uint8Array;
+  initialDeposit: Coin;
+}
+
+export const composeStoreCodeProposalMsg = ({
+  proposer,
+  title,
+  description,
+  runAs,
+  wasmByteCode,
+  permission,
+  addresses,
+  unpinCode,
+  source,
+  builder,
+  codeHash,
+  initialDeposit,
+}: StoreCodeProposalMsgArgs): ComposedMsg => {
+  return composeMsg(MsgType.SUBMIT_PROPOSAL, {
+    content: {
+      typeUrl: "/cosmwasm.wasm.v1.StoreCodeProposal",
+      value: Uint8Array.from(
+        StoreCodeProposal.encode({
+          title: title.trim(),
+          description: description.trim(),
+          runAs,
+          wasmByteCode,
+          instantiatePermission: {
+            permission,
+            addresses,
+            address: "" as Addr,
+          },
+          unpinCode,
+          source,
+          builder,
+          codeHash,
+        }).finish()
+      ),
+    },
+    initialDeposit: [
+      {
+        ...initialDeposit,
+        amount: microfy((initialDeposit.amount || 0) as Token).toFixed(0),
+      },
+    ],
+    proposer,
+  });
+};
diff --git a/src/pages/[network]/proposal/store-code.tsx b/src/pages/[network]/proposal/store-code.tsx
index 293aefb30..ef19ffb0d 100644
--- a/src/pages/[network]/proposal/store-code.tsx
+++ b/src/pages/[network]/proposal/store-code.tsx
@@ -1,3 +1,3 @@
-import StoreCode from "lib/pages/store-code";
+import StoreCodeProposal from "pages/proposal/store-code";
 
-export default StoreCode;
+export default StoreCodeProposal;
diff --git a/src/pages/proposal/store-code.tsx b/src/pages/proposal/store-code.tsx
index 293aefb30..9be4fdb87 100644
--- a/src/pages/proposal/store-code.tsx
+++ b/src/pages/proposal/store-code.tsx
@@ -1,3 +1,3 @@
-import StoreCode from "lib/pages/store-code";
+import StoreCodePropolsal from "lib/pages/proposal/store-code";
 
-export default StoreCode;
+export default StoreCodePropolsal;
diff --git a/yarn.lock b/yarn.lock
index c72dfeab7..2d57e1fe2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4906,15 +4906,7 @@ cosmiconfig@7.0.1, cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-cosmjs-types@^0.7.1:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/cosmjs-types/-/cosmjs-types-0.7.2.tgz#a757371abd340949c5bd5d49c6f8379ae1ffd7e2"
-  integrity sha512-vf2uLyktjr/XVAgEq0DjMxeAWh1yYREe7AMHDKd7EiHVqxBPCaBS+qEEQUkXbR9ndnckqr1sUG8BQhazh4X5lA==
-  dependencies:
-    long "^4.0.0"
-    protobufjs "~6.11.2"
-
-cosmjs-types@^0.7.2:
+cosmjs-types@^0.7.1, cosmjs-types@^0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/cosmjs-types/-/cosmjs-types-0.7.2.tgz#a757371abd340949c5bd5d49c6f8379ae1ffd7e2"
   integrity sha512-vf2uLyktjr/XVAgEq0DjMxeAWh1yYREe7AMHDKd7EiHVqxBPCaBS+qEEQUkXbR9ndnckqr1sUG8BQhazh4X5lA==

From d8c13b4bd2abb0cf30d64721c172faad78b2c7cb Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Tue, 2 May 2023 14:24:01 +0700
Subject: [PATCH 068/354] fix: wording, check box color, and simulate

---
 src/lib/pages/proposal/constants.tsx        |  3 ++-
 src/lib/pages/proposal/store-code/index.tsx | 13 ++++++-------
 src/lib/styles/theme/components/checkbox.ts | 17 +++++++++++++++++
 src/lib/styles/theme/components/index.ts    |  2 ++
 4 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/styles/theme/components/checkbox.ts

diff --git a/src/lib/pages/proposal/constants.tsx b/src/lib/pages/proposal/constants.tsx
index 332526a09..6a9099bdd 100644
--- a/src/lib/pages/proposal/constants.tsx
+++ b/src/lib/pages/proposal/constants.tsx
@@ -120,7 +120,8 @@ export const PROPOSAL_STORE_CODE_TEXT = {
   sourcePlaceholder: "URL to the code",
   sourceLabel: "Source",
   sourceRequired: "Source is required",
-  sourceError: "Please provide URL in format: https://github.com/example/url/",
+  sourceHelperText:
+    "Please provide absolute or path-absolute URL (ex. https://github.com/example/url/)",
   permissionTitle: "Instantiate Permission",
   permissionDescription:
     "If the proposal is passed, the stored code can be instantiated to a contract by your selected option",
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index d5db88f88..dcde514e2 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -114,7 +114,6 @@ const StoreCodeProposal = () => {
     control: uploadSectionControl,
     watch: uploadSectionWatch,
     setValue: uploadSectionSetValue,
-    formState: { errors: uploadSectionErrors },
     trigger: uploadSectionTrigger,
   } = useForm<UploadSectionState>({
     defaultValues: {
@@ -143,9 +142,7 @@ const StoreCodeProposal = () => {
     minDeposit?.formattedDenom
   );
 
-  const formErrorsKey = Object.keys(errors).concat(
-    Object.keys(uploadSectionErrors)
-  );
+  const formErrorsKey = Object.keys(errors);
 
   // Should not simulate when permission is any of addresses and address input is not filled, invalid, or empty
   const shouldNotSimulateForAnyOfAddr = useMemo(
@@ -308,7 +305,7 @@ const StoreCodeProposal = () => {
       <PageContainer>
         <Grid
           templateAreas={`"prespace main sidebar postspace"`}
-          templateColumns="1fr 6fr 4fr 1fr"
+          templateColumns="1fr 45% 4fr 1fr"
           gap={4}
         >
           <GridItem area="main">
@@ -415,6 +412,7 @@ const StoreCodeProposal = () => {
                   borderColor="pebble.700"
                   bg="pebble.800"
                   h="56px"
+                  overflowX="auto"
                 >
                   <Text
                     position="absolute"
@@ -471,14 +469,15 @@ const StoreCodeProposal = () => {
                   label={PROPOSAL_STORE_CODE_TEXT.sourceLabel}
                   labelBgColor="background.main"
                   variant="floating"
+                  helperText={PROPOSAL_STORE_CODE_TEXT.sourceHelperText}
                   rules={{
                     required: PROPOSAL_STORE_CODE_TEXT.sourceRequired,
                     pattern: /^(?!:)[a-zA-Z0-9+.-]+:/,
                   }}
                   error={
-                    // Source should start with a valid scheme
+                    // Source should be absolute url or absolute path
                     source && !source.match(/^(?!:)[a-zA-Z0-9+.-]+:/)
-                      ? PROPOSAL_STORE_CODE_TEXT.sourceError
+                      ? PROPOSAL_STORE_CODE_TEXT.sourceHelperText
                       : errors.source?.message
                   }
                 />
diff --git a/src/lib/styles/theme/components/checkbox.ts b/src/lib/styles/theme/components/checkbox.ts
new file mode 100644
index 000000000..3f491c75b
--- /dev/null
+++ b/src/lib/styles/theme/components/checkbox.ts
@@ -0,0 +1,17 @@
+import type { ComponentStyleConfig } from "@chakra-ui/react";
+
+const violet = "violet.light";
+export const Checkbox: ComponentStyleConfig = {
+  baseStyle: {
+    control: {
+      _checked: {
+        bg: violet,
+        borderColor: violet,
+        _hover: {
+          bg: violet,
+          borderColor: violet,
+        },
+      },
+    },
+  },
+};
diff --git a/src/lib/styles/theme/components/index.ts b/src/lib/styles/theme/components/index.ts
index 9e42ec3be..9d5ebe227 100644
--- a/src/lib/styles/theme/components/index.ts
+++ b/src/lib/styles/theme/components/index.ts
@@ -1,6 +1,7 @@
 import { Alert } from "./alert";
 import { Badge } from "./badge";
 import { Button } from "./button";
+import { Checkbox } from "./checkbox";
 import { Drawer } from "./drawer";
 import { Form } from "./form";
 import { Heading } from "./heading";
@@ -34,4 +35,5 @@ export const components = {
   Textarea,
   Table,
   Switch,
+  Checkbox,
 };

From faa36ffcd891b6ef217251f1f9167f8431c4fbcc Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Tue, 2 May 2023 14:41:01 +0700
Subject: [PATCH 069/354] fix: change gas adjustment

---
 src/env.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/env.ts b/src/env.ts
index d246d27b9..c611e00bc 100644
--- a/src/env.ts
+++ b/src/env.ts
@@ -81,7 +81,7 @@ export const FALLBACK_LCD_ENDPOINT: Record<string, string> = {
 export const MAX_FILE_SIZE = 800_000;
 
 export const CELATONE_CONSTANTS: CelatoneConstants = {
-  gasAdjustment: 1.6,
+  gasAdjustment: 1.25,
   maxFileSize: MAX_FILE_SIZE,
 };
 

From b8939b53e54a40a616c5a814f46ca984970d5e80 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Tue, 2 May 2023 14:58:53 +0700
Subject: [PATCH 070/354] fix: code hash style

---
 src/lib/pages/proposal/store-code/index.tsx | 31 +++++++++++----------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index dcde514e2..d6d515517 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -403,29 +403,32 @@ const StoreCodeProposal = () => {
                 )}
 
                 {/* Code hash  */}
-                <Flex
-                  border="1px"
-                  borderRadius="5px"
-                  position="relative"
-                  px={3}
-                  py={4}
-                  borderColor="pebble.700"
-                  bg="pebble.800"
-                  h="56px"
-                  overflowX="auto"
-                >
+                <Flex position="relative" left={3}>
                   <Text
                     position="absolute"
-                    variant="body2"
+                    variant="body3"
                     color="text.dark"
                     px="1px"
                     top="-10px"
+                    zIndex="999"
                   >
                     {PROPOSAL_STORE_CODE_TEXT.codeHashHeader}
                   </Text>
-                  <Text>{codeHash}</Text>
+                  <Flex
+                    border="1px"
+                    borderRadius="5px"
+                    px={3}
+                    py={4}
+                    borderColor="pebble.700"
+                    bg="pebble.800"
+                    h="56px"
+                    w="full"
+                    overflowX="auto"
+                    overflowY="hidden"
+                  >
+                    <Text>{codeHash}</Text>
+                  </Flex>
                 </Flex>
-
                 {/* Unpin code  */}
                 <Flex direction="row" alignItems="center" gap={1}>
                   <Checkbox

From eee167d36a808caabe4d86f5c9d9485e31af5aea Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 3 May 2023 11:06:40 +0700
Subject: [PATCH 071/354] fix: fix code hash styling

---
 src/lib/pages/proposal/store-code/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index d6d515517..507914033 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -403,14 +403,14 @@ const StoreCodeProposal = () => {
                 )}
 
                 {/* Code hash  */}
-                <Flex position="relative" left={3}>
+                <Flex position="relative">
                   <Text
                     position="absolute"
                     variant="body3"
                     color="text.dark"
                     px="1px"
                     top="-10px"
-                    zIndex="999"
+                    left={3}
                   >
                     {PROPOSAL_STORE_CODE_TEXT.codeHashHeader}
                   </Text>

From c3b5aed035867d0bafcf05c8c7ad28970f891d57 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 3 May 2023 15:21:48 +0700
Subject: [PATCH 072/354] fix: comments

---
 src/lib/pages/pools/components/PoolRelatedTxs.tsx   | 13 ++++++++++++-
 .../pages/pools/components/table/pool-txs/index.tsx |  3 +++
 .../components/table/pool-txs/messages/index.tsx    |  4 ++++
 .../messages/swap/MsgSwapExactAmountInAction.tsx    |  2 +-
 .../messages/swap/MsgSwapExactAmountInDetail.tsx    |  2 +-
 .../messages/swap/MsgSwapExactAmountOutAction.tsx   |  2 +-
 .../table/pool-txs/messages/swap/PoolRoute.tsx      |  5 +----
 7 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/lib/pages/pools/components/PoolRelatedTxs.tsx b/src/lib/pages/pools/components/PoolRelatedTxs.tsx
index 7d1f80717..0fc346d2d 100644
--- a/src/lib/pages/pools/components/PoolRelatedTxs.tsx
+++ b/src/lib/pages/pools/components/PoolRelatedTxs.tsx
@@ -27,6 +27,7 @@ export const PoolRelatedTxs = ({ poolId }: PoolRelatedTxsProps) => {
     "is_superfluid"
   );
 
+  const tableHeaderId = "poolTableHeader";
   return (
     <Box>
       <Flex mt={12} gap={2} alignItems="center">
@@ -35,7 +36,12 @@ export const PoolRelatedTxs = ({ poolId }: PoolRelatedTxsProps) => {
         </Heading>
       </Flex>
       <Tabs>
-        <TabList mt={4} borderBottom="1px" borderColor="pebble.800">
+        <TabList
+          id={tableHeaderId}
+          mt={4}
+          borderBottom="1px"
+          borderColor="pebble.800"
+        >
           <CustomTab count={countAllTxs}>All</CustomTab>
           <CustomTab count={countSwapTxs}>Swap</CustomTab>
           <CustomTab count={countLpTxs}>LP</CustomTab>
@@ -48,6 +54,7 @@ export const PoolRelatedTxs = ({ poolId }: PoolRelatedTxsProps) => {
               poolId={poolId}
               countTxs={countAllTxs}
               type="is_all"
+              scrollComponentId={tableHeaderId}
             />
           </TabPanel>
           <TabPanel p={0}>
@@ -55,6 +62,7 @@ export const PoolRelatedTxs = ({ poolId }: PoolRelatedTxsProps) => {
               poolId={poolId}
               countTxs={countSwapTxs}
               type="is_swap"
+              scrollComponentId={tableHeaderId}
             />
           </TabPanel>
           <TabPanel p={0}>
@@ -62,6 +70,7 @@ export const PoolRelatedTxs = ({ poolId }: PoolRelatedTxsProps) => {
               poolId={poolId}
               countTxs={countLpTxs}
               type="is_lp"
+              scrollComponentId={tableHeaderId}
             />
           </TabPanel>
           <TabPanel p={0}>
@@ -69,6 +78,7 @@ export const PoolRelatedTxs = ({ poolId }: PoolRelatedTxsProps) => {
               poolId={poolId}
               countTxs={countBondTxs}
               type="is_bond"
+              scrollComponentId={tableHeaderId}
             />
           </TabPanel>
           <TabPanel p={0}>
@@ -76,6 +86,7 @@ export const PoolRelatedTxs = ({ poolId }: PoolRelatedTxsProps) => {
               poolId={poolId}
               countTxs={countSuperfluidTxs}
               type="is_superfluid"
+              scrollComponentId={tableHeaderId}
             />
           </TabPanel>
         </TabPanels>
diff --git a/src/lib/pages/pools/components/table/pool-txs/index.tsx b/src/lib/pages/pools/components/table/pool-txs/index.tsx
index 64dad69cb..2a537a122 100644
--- a/src/lib/pages/pools/components/table/pool-txs/index.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/index.tsx
@@ -13,12 +13,14 @@ interface PoolRelatedTxsTableProps {
   poolId: number;
   countTxs: number;
   type: PoolTxFilter;
+  scrollComponentId: string;
 }
 
 export const PoolRelatedTxsTable = ({
   poolId,
   countTxs,
   type,
+  scrollComponentId,
 }: PoolRelatedTxsTableProps) => {
   const { assetInfos, isLoading: isLoadingAssetInfos } = useAssetInfos();
 
@@ -83,6 +85,7 @@ export const PoolRelatedTxsTable = ({
           offset={offset}
           totalData={countTxs}
           pageSize={pageSize}
+          scrollComponentId={scrollComponentId}
           onPageChange={onPageChange}
           onPageSizeChange={onPageSizeChange}
         />
diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/index.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/index.tsx
index 0774abcf9..a4454e19f 100644
--- a/src/lib/pages/pools/components/table/pool-txs/messages/index.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/messages/index.tsx
@@ -20,6 +20,7 @@ export const PoolTxsAction = ({
   const { type } = msg;
   switch (type) {
     case "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn":
+    case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn":
       return (
         <MsgSwapExactAmountInAction
           msg={msg.detail as MsgSwapExactAmountIn}
@@ -27,6 +28,7 @@ export const PoolTxsAction = ({
         />
       );
     case "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut":
+    case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountOut":
       return (
         <MsgSwapExactAmountOutAction
           msg={msg.detail as MsgSwapExactAmountOut}
@@ -56,6 +58,7 @@ export const PoolTxsDetail = ({
   const { type } = msg;
   switch (type) {
     case "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn":
+    case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn":
       return (
         <MsgSwapExactAmountInDetail
           txHash={txHash}
@@ -66,6 +69,7 @@ export const PoolTxsDetail = ({
         />
       );
     case "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut":
+    case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountOut":
       return (
         <MsgSwapExactAmountOutDetail
           txHash={txHash}
diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
index d28cd1631..6ad66301c 100644
--- a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
@@ -30,7 +30,7 @@ export const MsgSwapExactAmountInAction = ({
       <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
       <Flex role="group" align="center" gap={1}>
         <Text fontWeight="medium">
-          {getTokenLabel(outAssetInfo?.symbol || tokenOutDenom)}
+          {getTokenLabel(outAssetInfo?.symbol ?? tokenOutDenom)}
         </Text>
         <Tooltip
           hasArrow
diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
index ba63f99d3..ac72bfb4e 100644
--- a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
@@ -23,7 +23,7 @@ export const MsgSwapExactAmountInDetail = ({
   assetInfos,
 }: MsgSwapExactAmountInDetailProps) => (
   <Flex w="full" alignItems="start" gap={12}>
-    <Flex direction="column">
+    <Flex direction="column" minW="100px">
       <Text variant="body2" textColor="pebble.500" fontWeight={500}>
         Block height
       </Text>
diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
index 051a90680..fb2ead952 100644
--- a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
@@ -24,7 +24,7 @@ export const MsgSwapExactAmountOutAction = ({
       Swap
       <Flex role="group" align="center" gap={1}>
         <Text fontWeight="medium">
-          {getTokenLabel(inAssetInfo?.symbol || tokenInDenom)}
+          {getTokenLabel(inAssetInfo?.symbol ?? tokenInDenom)}
         </Text>
         <Tooltip
           hasArrow
diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolRoute.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolRoute.tsx
index 32307b011..b268dd90c 100644
--- a/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolRoute.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolRoute.tsx
@@ -25,10 +25,7 @@ export const PoolRoute = ({ routes, assetInfos }: PoolRouteProps) => {
   if (isLoading) return <Loading />;
   if (!poolAssets)
     return (
-      <EmptyState
-        imageVariant="not-found"
-        message="There is an error during fetching pool detail."
-      />
+      <EmptyState message="There is an error during fetching pool detail." />
     );
   return (
     <Flex direction="column">

From 8eb9080ec05f74f98d3f704d9c1986ea4c43dd83 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 3 May 2023 15:56:23 +0700
Subject: [PATCH 073/354] fix: gas adjustment, naming, typo, and type

---
 CHANGELOG.md                                  |  1 -
 src/env.ts                                    |  3 ++-
 src/lib/app-fns/tx/submitProposal.tsx         |  4 ++--
 src/lib/app-provider/hooks/useFabricateFee.ts | 16 +++++++++++-----
 src/lib/app-provider/queries/simulateFee.ts   |  2 +-
 src/lib/app-provider/types.ts                 |  1 +
 src/lib/components/AddressInput.tsx           |  6 +++---
 src/lib/pages/proposal/store-code/index.tsx   |  4 ++--
 src/lib/utils/formatter/text.ts               |  2 +-
 src/lib/utils/formatter/tokenType.ts          |  4 ++--
 src/lib/utils/tx/composeMsg.ts                |  9 +++++----
 11 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ba3ffec38..f5621a729 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -50,7 +50,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#250](https://github.com/alleslabs/celatone-frontend/pull/250) Add skeleton, route, and amp for proposal list page
 - [#310](https://github.com/alleslabs/celatone-frontend/pull/310) Add amplitude for landing on the following pages - blocks, block detail, txs, network overview
 - [#268](https://github.com/alleslabs/celatone-frontend/pull/268) Wireup create proposal to whitelisting
 - [#266](https://github.com/alleslabs/celatone-frontend/pull/250) Add proposal whitelisting page
diff --git a/src/env.ts b/src/env.ts
index c611e00bc..9d071c276 100644
--- a/src/env.ts
+++ b/src/env.ts
@@ -81,7 +81,8 @@ export const FALLBACK_LCD_ENDPOINT: Record<string, string> = {
 export const MAX_FILE_SIZE = 800_000;
 
 export const CELATONE_CONSTANTS: CelatoneConstants = {
-  gasAdjustment: 1.25,
+  gasAdjustment: 1.6,
+  maxGasLimit: 25_000_000,
   maxFileSize: MAX_FILE_SIZE,
 };
 
diff --git a/src/lib/app-fns/tx/submitProposal.tsx b/src/lib/app-fns/tx/submitProposal.tsx
index afa2b4e11..11bcae86e 100644
--- a/src/lib/app-fns/tx/submitProposal.tsx
+++ b/src/lib/app-fns/tx/submitProposal.tsx
@@ -9,7 +9,7 @@ import { CustomIcon } from "lib/components/icon";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import type { HumanAddr, TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
-import { capitalizedFirst, findAttr, formatUFee } from "lib/utils";
+import { capitalize, findAttr, formatUFee } from "lib/utils";
 
 import { catchTxError, postTx, sendingTx } from "./common";
 
@@ -165,7 +165,7 @@ export const submitStoreCodeProposalTx = ({
           description: `${wasmFileName} is uploaded and pending ${
             amountToVote
               ? ` minimum deposit of ${amountToVote} to trigger voting period.`
-              : ` ${capitalizedFirst(chainName)} governance voting.`
+              : ` ${capitalize(chainName)} governance voting.`
           }`,
           headerIcon: (
             <CustomIcon
diff --git a/src/lib/app-provider/hooks/useFabricateFee.ts b/src/lib/app-provider/hooks/useFabricateFee.ts
index ee7999547..a2a9ffcc3 100644
--- a/src/lib/app-provider/hooks/useFabricateFee.ts
+++ b/src/lib/app-provider/hooks/useFabricateFee.ts
@@ -11,9 +11,10 @@ export const useFabricateFee = () => {
 
   return useCallback(
     (estimatedGas: number): StdFee => {
-      const adjustedGas = big(estimatedGas)
-        .mul(constants.gasAdjustment)
-        .toFixed(0);
+      const adjustedGas = Math.min(
+        Number(big(estimatedGas).mul(constants.gasAdjustment).toFixed(0)),
+        constants.maxGasLimit
+      );
 
       return {
         amount: [
@@ -22,9 +23,14 @@ export const useFabricateFee = () => {
             amount: big(adjustedGas).mul(chainGasPrice.gasPrice).toFixed(0),
           },
         ],
-        gas: adjustedGas as Gas<string>,
+        gas: adjustedGas.toString() as Gas<string>,
       };
     },
-    [chainGasPrice, constants.gasAdjustment]
+    [
+      chainGasPrice.denom,
+      chainGasPrice.gasPrice,
+      constants.gasAdjustment,
+      constants.maxGasLimit,
+    ]
   );
 };
diff --git a/src/lib/app-provider/queries/simulateFee.ts b/src/lib/app-provider/queries/simulateFee.ts
index 938eced04..12e996ab5 100644
--- a/src/lib/app-provider/queries/simulateFee.ts
+++ b/src/lib/app-provider/queries/simulateFee.ts
@@ -171,7 +171,7 @@ export const useSimulateFeeForProposalStoreCode = ({
         proposer: address as HumanAddr,
         title,
         description,
-        runAs,
+        runAs: runAs as Addr,
         wasmByteCode: new Uint8Array(await wasmFile.arrayBuffer()),
         permission,
         addresses,
diff --git a/src/lib/app-provider/types.ts b/src/lib/app-provider/types.ts
index 1cf756d89..b9bf59ab8 100644
--- a/src/lib/app-provider/types.ts
+++ b/src/lib/app-provider/types.ts
@@ -1,3 +1,4 @@
 export interface AppConstants {
   gasAdjustment: number;
+  maxGasLimit: number;
 }
diff --git a/src/lib/components/AddressInput.tsx b/src/lib/components/AddressInput.tsx
index 2b70ea3d2..01124df6d 100644
--- a/src/lib/components/AddressInput.tsx
+++ b/src/lib/components/AddressInput.tsx
@@ -20,7 +20,7 @@ interface AddressInputProps<T extends FieldValues>
   validation?: RegisterOptions["validate"];
   maxLength?: number;
   helperAction?: ReactNode;
-  reequiredText?: string;
+  requiredText?: string;
 }
 
 const getAddressStatus = (input: string, error: Option<string>): FormStatus => {
@@ -41,7 +41,7 @@ export const AddressInput = <T extends FieldValues>({
   validation = {},
   maxLength,
   helperAction,
-  reequiredText = "Address is empty",
+  requiredText = "Address is empty",
 }: AddressInputProps<T>) => {
   const {
     appHumanAddress: { example: exampleAddr },
@@ -75,7 +75,7 @@ export const AddressInput = <T extends FieldValues>({
       helperText={helperText}
       size={size}
       rules={{
-        required: reequiredText,
+        required: requiredText,
         validate: { validateAddress, ...validation },
       }}
       maxLength={maxLength}
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index 507914033..0431696df 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -254,7 +254,7 @@ const StoreCodeProposal = () => {
         proposer: walletAddress as HumanAddr,
         title,
         description: proposalDesc,
-        runAs,
+        runAs: runAs as Addr,
         wasmByteCode: new Uint8Array(await wasmFile.arrayBuffer()),
         permission,
         addresses: addresses.map((addr) => addr.address),
@@ -367,7 +367,7 @@ const StoreCodeProposal = () => {
                   placeholder={`ex. ${exampleHumanAddress}`}
                   variant="floating"
                   helperText={PROPOSAL_STORE_CODE_TEXT.runAsHelperText}
-                  reequiredText={PROPOSAL_STORE_CODE_TEXT.runAsRequired}
+                  requiredText={PROPOSAL_STORE_CODE_TEXT.runAsRequired}
                   error={errors.runAs?.message}
                   helperAction={
                     <AssignMe
diff --git a/src/lib/utils/formatter/text.ts b/src/lib/utils/formatter/text.ts
index f0f6b3a22..d4da03649 100644
--- a/src/lib/utils/formatter/text.ts
+++ b/src/lib/utils/formatter/text.ts
@@ -1,4 +1,4 @@
-export const capitalizedFirst = (text: string) =>
+export const capitalize = (text: string) =>
   text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
 
 export const removeSpecialChars = (text: string) =>
diff --git a/src/lib/utils/formatter/tokenType.ts b/src/lib/utils/formatter/tokenType.ts
index dc7f07ac7..f48e21217 100644
--- a/src/lib/utils/formatter/tokenType.ts
+++ b/src/lib/utils/formatter/tokenType.ts
@@ -1,6 +1,6 @@
 import { truncate } from "../truncate";
 
-import { capitalizedFirst } from "./text";
+import { capitalize } from "./text";
 
 export const getTokenType = (type: string) => {
   switch (type.toLowerCase()) {
@@ -8,7 +8,7 @@ export const getTokenType = (type: string) => {
     case "cw20":
       return type.toUpperCase();
     default:
-      return capitalizedFirst(type);
+      return capitalize(type);
   }
 };
 
diff --git a/src/lib/utils/tx/composeMsg.ts b/src/lib/utils/tx/composeMsg.ts
index 2e151c65a..f7be40dcf 100644
--- a/src/lib/utils/tx/composeMsg.ts
+++ b/src/lib/utils/tx/composeMsg.ts
@@ -10,6 +10,7 @@ import type {
   AccessType,
   Addr,
   Token,
+  HumanAddr,
 } from "lib/types";
 import { MsgType } from "lib/types";
 
@@ -78,7 +79,7 @@ export const composeSubmitWhitelistProposalMsg = ({
     },
     initialDeposit: [
       {
-        ...initialDeposit,
+        denom: initialDeposit.denom,
         amount: microfy((initialDeposit.amount || 0) as Token).toFixed(0),
       },
     ],
@@ -86,10 +87,10 @@ export const composeSubmitWhitelistProposalMsg = ({
   });
 
 interface StoreCodeProposalMsgArgs {
-  proposer: string;
+  proposer: HumanAddr;
   title: string;
   description: string;
-  runAs: string;
+  runAs: Addr;
   wasmByteCode: Uint8Array;
   permission: AccessType;
   addresses: Addr[];
@@ -137,7 +138,7 @@ export const composeStoreCodeProposalMsg = ({
     },
     initialDeposit: [
       {
-        ...initialDeposit,
+        denom: initialDeposit.denom,
         amount: microfy((initialDeposit.amount || 0) as Token).toFixed(0),
       },
     ],

From 640e29d2a708036009105f844e4a42b992c6125f Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 3 May 2023 16:25:46 +0700
Subject: [PATCH 074/354] fix: add type and json stringify

---
 src/lib/app-provider/queries/simulateFee.ts | 2 +-
 src/lib/pages/proposal/store-code/index.tsx | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/lib/app-provider/queries/simulateFee.ts b/src/lib/app-provider/queries/simulateFee.ts
index 12e996ab5..36047c767 100644
--- a/src/lib/app-provider/queries/simulateFee.ts
+++ b/src/lib/app-provider/queries/simulateFee.ts
@@ -128,7 +128,7 @@ interface SimulateQueryParamsForProposalStoreCode {
   enabled: boolean;
   title: string;
   description: string;
-  runAs: string;
+  runAs: Addr;
   initialDeposit: Coin;
   unpinCode: boolean;
   builder: string;
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index 0431696df..4a1963feb 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -60,7 +60,7 @@ import { composeStoreCodeProposalMsg, getAmountToVote } from "lib/utils";
 interface StoreCodeProposalState {
   title: string;
   proposalDesc: string;
-  runAs: string;
+  runAs: Addr;
   initialDeposit: Coin;
   unpinCode: boolean;
   builder: string;
@@ -71,7 +71,7 @@ interface StoreCodeProposalState {
 const defaultValues: StoreCodeProposalState = {
   title: "",
   proposalDesc: "",
-  runAs: "",
+  runAs: "" as Addr,
   initialDeposit: { denom: "", amount: "" } as Coin,
   unpinCode: false,
   builder: "",
@@ -283,6 +283,8 @@ const StoreCodeProposal = () => {
     return null;
   }, [
     addresses,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(addresses),
     broadcast,
     builder,
     codeHash,
@@ -375,7 +377,7 @@ const StoreCodeProposal = () => {
                         walletAddress
                           ? () => {
                               AmpTrack(AmpEvent.USE_ASSIGN_ME);
-                              setValue("runAs", walletAddress);
+                              setValue("runAs", walletAddress as HumanAddr);
                               trigger("runAs");
                             }
                           : undefined
@@ -429,6 +431,7 @@ const StoreCodeProposal = () => {
                     <Text>{codeHash}</Text>
                   </Flex>
                 </Flex>
+
                 {/* Unpin code  */}
                 <Flex direction="row" alignItems="center" gap={1}>
                   <Checkbox

From bcc9a91acf9c957a60cb778a1c5d9a86bbbd513a Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Mon, 8 May 2023 10:34:27 +0700
Subject: [PATCH 075/354] fix: should not simulate when address input is
 invalid

---
 src/lib/pages/proposal/store-code/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index 4a1963feb..6957e3e65 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -115,6 +115,7 @@ const StoreCodeProposal = () => {
     watch: uploadSectionWatch,
     setValue: uploadSectionSetValue,
     trigger: uploadSectionTrigger,
+    formState: { errors: uploadSectionErrors },
   } = useForm<UploadSectionState>({
     defaultValues: {
       wasmFile: undefined,
@@ -143,12 +144,14 @@ const StoreCodeProposal = () => {
   );
 
   const formErrorsKey = Object.keys(errors);
+  const uploadSectionErrorsKey = Object.keys(uploadSectionErrors);
 
   // Should not simulate when permission is any of addresses and address input is not filled, invalid, or empty
   const shouldNotSimulateForAnyOfAddr = useMemo(
     () =>
       permission === AccessType.ACCESS_TYPE_ANY_OF_ADDRESSES &&
       (addresses.some((addr) => addr.address.trim().length === 0) ||
+        Boolean(uploadSectionErrorsKey.length) ||
         addresses.some((addr) =>
           Boolean(
             validateUserAddress(addr.address) &&
@@ -159,10 +162,9 @@ const StoreCodeProposal = () => {
     [
       addresses,
       permission,
+      uploadSectionErrorsKey.length,
       validateContractAddress,
       validateUserAddress,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      JSON.stringify(addresses),
     ]
   );
 

From f2f157fb9b2b76eb3a91dfb1051d22879cdbd0b3 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 9 May 2023 15:40:00 +0700
Subject: [PATCH 076/354] fix: comments

---
 src/lib/components/CustomTab.tsx              |  2 +-
 src/lib/components/action-msg/MsgToken.tsx    | 12 ++-
 src/lib/pages/pools/components/PoolLogo.tsx   |  7 +-
 .../pages/pools/components/PoolRelatedTxs.tsx | 30 ++++----
 .../table/pool-txs/PoolTxsTableMultiRow.tsx   | 40 ++++------
 .../table/pool-txs/PoolTxsTableRow.tsx        | 65 ++++++++--------
 .../table/pool-txs/messages/AssetCard.tsx     |  4 +-
 .../table/pool-txs/messages/PoolAssets.tsx    | 74 +++++++++----------
 .../table/pool-txs/messages/index.tsx         | 14 +++-
 .../swap/MsgSwapExactAmountInAction.tsx       | 35 +++------
 .../swap/MsgSwapExactAmountInDetail.tsx       | 15 +++-
 .../swap/MsgSwapExactAmountOutAction.tsx      | 36 +++------
 .../swap/MsgSwapExactAmountOutDetail.tsx      | 15 +++-
 .../pool-txs/messages/swap/PoolRoute.tsx      |  6 +-
 .../table/pool-txs/messages/swap/PoolSwap.tsx | 16 ++--
 .../table/pool-txs/messages/swap/index.ts     |  4 +
 src/lib/pages/pools/data.ts                   | 17 +++++
 src/lib/services/poolService.ts               |  7 +-
 src/lib/services/txService.ts                 |  7 +-
 19 files changed, 211 insertions(+), 195 deletions(-)
 create mode 100644 src/lib/pages/pools/components/table/pool-txs/messages/swap/index.ts

diff --git a/src/lib/components/CustomTab.tsx b/src/lib/components/CustomTab.tsx
index 701ac5c87..031932f2c 100644
--- a/src/lib/components/CustomTab.tsx
+++ b/src/lib/components/CustomTab.tsx
@@ -2,7 +2,7 @@ import type { TabProps } from "@chakra-ui/react";
 import { Button, useTab, Badge, useMultiStyleConfig } from "@chakra-ui/react";
 
 interface CustomTabProps extends TabProps {
-  count?: number;
+  count?: number | string;
 }
 
 export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
diff --git a/src/lib/components/action-msg/MsgToken.tsx b/src/lib/components/action-msg/MsgToken.tsx
index 067871cef..8e75c022e 100644
--- a/src/lib/components/action-msg/MsgToken.tsx
+++ b/src/lib/components/action-msg/MsgToken.tsx
@@ -9,11 +9,17 @@ interface MsgTokenProps {
   coin: Coin;
   symbol?: string;
   precision?: number;
+  fontWeight?: string;
 }
 
-export const MsgToken = ({ coin, symbol, precision }: MsgTokenProps) => (
+export const MsgToken = ({
+  coin,
+  symbol,
+  precision,
+  fontWeight = "600",
+}: MsgTokenProps) => (
   <Flex role="group" align="center" gap={1}>
-    <Text fontWeight="medium">
+    <Text fontWeight={fontWeight}>
       {formatBalanceWithDenom({
         coin,
         symbol,
@@ -28,7 +34,7 @@ export const MsgToken = ({ coin, symbol, precision }: MsgTokenProps) => (
       maxW="240px"
     >
       <Flex cursor="pointer">
-        <CustomIcon name="info-circle" boxSize="3" />
+        <CustomIcon name="info-circle" boxSize={3} />
       </Flex>
     </Tooltip>
     <Copier
diff --git a/src/lib/pages/pools/components/PoolLogo.tsx b/src/lib/pages/pools/components/PoolLogo.tsx
index 2715d3b9f..7afc0200f 100644
--- a/src/lib/pages/pools/components/PoolLogo.tsx
+++ b/src/lib/pages/pools/components/PoolLogo.tsx
@@ -1,3 +1,4 @@
+import type { FlexProps, TextProps } from "@chakra-ui/react";
 import { Flex, Image, Text } from "@chakra-ui/react";
 
 import { getUndefinedTokenIcon } from "../utils";
@@ -5,9 +6,9 @@ import type { TokenWithValue } from "lib/types";
 
 interface PoolLogoProps {
   tokens: TokenWithValue[];
-  logoSize?: number;
+  logoSize?: FlexProps["height"] | FlexProps["width"];
   marginLeft?: number;
-  textVariant?: string;
+  textVariant?: TextProps["variant"];
 }
 
 export const PoolLogo = ({
@@ -28,7 +29,7 @@ export const PoolLogo = ({
   return (
     <Flex
       css={{
-        ">:not(:first-child)": {
+        ">:not(:first-of-type)": {
           marginLeft,
         },
       }}
diff --git a/src/lib/pages/pools/components/PoolRelatedTxs.tsx b/src/lib/pages/pools/components/PoolRelatedTxs.tsx
index 0fc346d2d..ae626f076 100644
--- a/src/lib/pages/pools/components/PoolRelatedTxs.tsx
+++ b/src/lib/pages/pools/components/PoolRelatedTxs.tsx
@@ -8,8 +8,8 @@ import {
   TabPanel,
 } from "@chakra-ui/react";
 
+import { usePoolTxsCount } from "../data";
 import { CustomTab } from "lib/components/CustomTab";
-import { useTxsCountByPoolId } from "lib/services/txService";
 
 import { PoolRelatedTxsTable } from "./table/pool-txs";
 
@@ -18,14 +18,16 @@ interface PoolRelatedTxsProps {
 }
 
 export const PoolRelatedTxs = ({ poolId }: PoolRelatedTxsProps) => {
-  const { data: countAllTxs = 0 } = useTxsCountByPoolId(poolId, "is_all");
-  const { data: countSwapTxs = 0 } = useTxsCountByPoolId(poolId, "is_swap");
-  const { data: countLpTxs = 0 } = useTxsCountByPoolId(poolId, "is_lp");
-  const { data: countBondTxs = 0 } = useTxsCountByPoolId(poolId, "is_bond");
-  const { data: countSuperfluidTxs = 0 } = useTxsCountByPoolId(
-    poolId,
-    "is_superfluid"
-  );
+  const { count: countAllTxs, countDisplay: countDisplayAllTxs } =
+    usePoolTxsCount(poolId, "is_all");
+  const { count: countSwapTxs, countDisplay: countDisplaySwapTxs } =
+    usePoolTxsCount(poolId, "is_swap");
+  const { count: countLpTxs, countDisplay: countDisplayLpTxs } =
+    usePoolTxsCount(poolId, "is_lp");
+  const { count: countBondTxs, countDisplay: countDisplayBondTxs } =
+    usePoolTxsCount(poolId, "is_bond");
+  const { count: countSuperfluidTxs, countDisplay: countDisplaySuperfluidTxs } =
+    usePoolTxsCount(poolId, "is_superfluid");
 
   const tableHeaderId = "poolTableHeader";
   return (
@@ -42,11 +44,11 @@ export const PoolRelatedTxs = ({ poolId }: PoolRelatedTxsProps) => {
           borderBottom="1px"
           borderColor="pebble.800"
         >
-          <CustomTab count={countAllTxs}>All</CustomTab>
-          <CustomTab count={countSwapTxs}>Swap</CustomTab>
-          <CustomTab count={countLpTxs}>LP</CustomTab>
-          <CustomTab count={countBondTxs}>Bonding</CustomTab>
-          <CustomTab count={countSuperfluidTxs}>Superfluid</CustomTab>
+          <CustomTab count={countDisplayAllTxs}>All</CustomTab>
+          <CustomTab count={countDisplaySwapTxs}>Swap</CustomTab>
+          <CustomTab count={countDisplayLpTxs}>LP</CustomTab>
+          <CustomTab count={countDisplayBondTxs}>Bonding</CustomTab>
+          <CustomTab count={countDisplaySuperfluidTxs}>Superfluid</CustomTab>
         </TabList>
         <TabPanels>
           <TabPanel p={0}>
diff --git a/src/lib/pages/pools/components/table/pool-txs/PoolTxsTableMultiRow.tsx b/src/lib/pages/pools/components/table/pool-txs/PoolTxsTableMultiRow.tsx
index 5dcd9d29c..e59f00a87 100644
--- a/src/lib/pages/pools/components/table/pool-txs/PoolTxsTableMultiRow.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/PoolTxsTableMultiRow.tsx
@@ -13,29 +13,17 @@ export const PoolTxsTableMultiRow = ({
   transaction,
   assetInfos,
   templateColumns,
-}: PoolTxsTableMultiRowProps) => {
-  let row = 0;
-  return (
-    <>
-      {transaction.messages.map((message, index) => {
-        row += 1;
-        return (
-          <PoolTxsTableRow
-            key={transaction.hash + index.toString()}
-            isFirstRow={row === 1}
-            txHash={transaction.hash}
-            success={transaction.success}
-            msgCount={transaction.messages.length}
-            message={message}
-            sender={transaction.sender}
-            created={transaction.created}
-            msgIndex={index}
-            blockHeight={transaction.height}
-            assetInfos={assetInfos}
-            templateColumns={templateColumns}
-          />
-        );
-      })}
-    </>
-  );
-};
+}: PoolTxsTableMultiRowProps) => (
+  <>
+    {transaction.messages.map((message, index) => (
+      <PoolTxsTableRow
+        key={transaction.hash + index.toString()}
+        msgIndex={index}
+        message={message}
+        transaction={transaction}
+        assetInfos={assetInfos}
+        templateColumns={templateColumns}
+      />
+    ))}
+  </>
+);
diff --git a/src/lib/pages/pools/components/table/pool-txs/PoolTxsTableRow.tsx b/src/lib/pages/pools/components/table/pool-txs/PoolTxsTableRow.tsx
index 5f8676bfe..f770f8138 100644
--- a/src/lib/pages/pools/components/table/pool-txs/PoolTxsTableRow.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/PoolTxsTableRow.tsx
@@ -4,35 +4,23 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { TableNoBorderRow } from "lib/components/table";
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { Addr, Message } from "lib/types";
+import type { Message, Transaction } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 import { PoolTxsAction, PoolTxsDetail } from "./messages";
 
 interface PoolTxsTableRowProps {
-  isFirstRow: boolean;
-  txHash: string;
-  success: boolean;
-  msgCount: number;
-  message: Message;
-  sender: Addr;
-  created: Date;
   msgIndex: number;
-  blockHeight: number;
+  message: Message;
+  transaction: Transaction;
   assetInfos: AssetInfosOpt;
   templateColumns: string;
 }
 
 export const PoolTxsTableRow = ({
-  isFirstRow,
-  txHash,
-  success,
-  msgCount,
-  message,
-  sender,
-  created,
   msgIndex,
-  blockHeight,
+  message,
+  transaction,
   assetInfos,
   templateColumns,
 }: PoolTxsTableRowProps) => {
@@ -59,24 +47,24 @@ export const PoolTxsTableRow = ({
         cursor="pointer"
       >
         <TableNoBorderRow>
-          {isFirstRow && (
-            <Flex>
+          {msgIndex === 0 && (
+            <>
               <ExplorerLink
-                value={txHash.toLocaleUpperCase()}
+                value={transaction.hash.toLocaleUpperCase()}
                 type="tx_hash"
                 showCopyOnHover
               />
-              {msgCount > 1 && (
+              {transaction.messages.length > 1 && (
                 <Badge variant="lilac" ml="6px">
-                  {msgCount}
+                  {transaction.messages.length}
                 </Badge>
               )}
-            </Flex>
+            </>
           )}
         </TableNoBorderRow>
         <TableNoBorderRow>
-          {isFirstRow &&
-            (success ? (
+          {msgIndex === 0 &&
+            (transaction.success ? (
               <CustomIcon name="check" color="success.main" />
             ) : (
               <CustomIcon name="close" color="error.main" />
@@ -87,27 +75,35 @@ export const PoolTxsTableRow = ({
         </TableNoBorderRow>
 
         <TableNoBorderRow>
-          <ExplorerLink value={sender} type="user_address" showCopyOnHover />
+          <ExplorerLink
+            value={transaction.sender}
+            type="user_address"
+            showCopyOnHover
+          />
         </TableNoBorderRow>
 
         <TableNoBorderRow>
-          {isFirstRow && (
+          {msgIndex === 0 && (
             <Flex direction="column" gap={1}>
-              <Text variant="body3">{formatUTC(created)}</Text>
+              <Text variant="body3">{formatUTC(transaction.created)}</Text>
               <Text variant="body3" color="text.dark">
-                {`(${dateFromNow(created)})`}
+                {`(${dateFromNow(transaction.created)})`}
               </Text>
             </Flex>
           )}
         </TableNoBorderRow>
 
-        {success && (
+        {transaction.success && (
           <TableNoBorderRow>
-            <CustomIcon name={isOpen ? "chevron-up" : "chevron-down"} />
+            <CustomIcon
+              name="chevron-down"
+              transform={isOpen ? "rotate(180deg)" : "rotate(0)"}
+              transition="all .25s ease-in-out"
+            />
           </TableNoBorderRow>
         )}
       </Grid>
-      {success && (
+      {transaction.success && (
         <Grid
           w="full"
           py={4}
@@ -118,11 +114,12 @@ export const PoolTxsTableRow = ({
           <TableNoBorderRow py={0} />
           <TableNoBorderRow py={0}>
             <PoolTxsDetail
-              txHash={txHash}
-              blockHeight={blockHeight}
+              txHash={transaction.hash}
+              blockHeight={transaction.height}
               msgIndex={msgIndex}
               msg={message}
               assetInfos={assetInfos}
+              isOpened={isOpen}
             />
           </TableNoBorderRow>
         </Grid>
diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/AssetCard.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/AssetCard.tsx
index 2c67e5c46..fe9c5b274 100644
--- a/src/lib/pages/pools/components/table/pool-txs/messages/AssetCard.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/messages/AssetCard.tsx
@@ -40,10 +40,10 @@ export const AssetCard = ({
       <Flex
         className="copier-wrapper"
         direction="column"
-        minH="101px"
+        minH="100px"
         gap={2}
         p={3}
-        w="250px"
+        minW="250px"
         background="pebble.800"
         borderRadius="8px"
         {...cardProps}
diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/PoolAssets.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/PoolAssets.tsx
index b4a303cc5..46e18f362 100644
--- a/src/lib/pages/pools/components/table/pool-txs/messages/PoolAssets.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/messages/PoolAssets.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text, Box } from "@chakra-ui/react";
+import { Flex, Text } from "@chakra-ui/react";
 
 import { PoolLogo } from "lib/pages/pools/components/PoolLogo";
 import type { TokenWithValue } from "lib/types";
@@ -11,44 +11,40 @@ interface PoolAssetsProps {
 }
 
 export const PoolAssets = ({ poolId, tokens, outAsset }: PoolAssetsProps) => (
-  <Flex justifyContent="space-between" w="full" my={2}>
-    <Flex alignItems="center">
-      <PoolLogo
-        tokens={tokens}
-        logoSize={5}
-        marginLeft={-4}
-        textVariant="small"
-      />
-      <Box>
-        <Flex gap={1}>
-          <Flex
-            gap={1}
-            css={{
-              "p:last-child": {
-                display: "none",
-              },
-            }}
+  <Flex alignItems="center" w="full" my={2}>
+    <PoolLogo
+      tokens={tokens}
+      logoSize={5}
+      marginLeft={-4}
+      textVariant="small"
+    />
+    <div>
+      <Flex
+        gap={1}
+        css={{
+          "p:last-of-type > span": {
+            display: "none",
+          },
+        }}
+      >
+        {tokens.map((token) => (
+          <Text
+            key={token.denom}
+            variant="body2"
+            fontWeight={token.denom === outAsset ? 700 : 400}
+            color={token.denom === outAsset ? "honeydew.main" : "text.main"}
           >
-            {tokens.map((token) => (
-              <>
-                <Text
-                  variant="body2"
-                  fontWeight={token.denom === outAsset ? 700 : undefined}
-                  color={token.denom === outAsset ? "honeydew.main" : undefined}
-                >
-                  {token.symbol || getTokenLabel(token.denom)}
-                </Text>
-                <Text as="p" variant="body2" color="honeydew.main">
-                  /
-                </Text>
-              </>
-            ))}
-          </Flex>
-        </Flex>
-        <Text variant="body2" color="lilac.main">
-          {poolId}
-        </Text>
-      </Box>
-    </Flex>
+            {token.symbol || getTokenLabel(token.denom)}
+            <Text as="span" fontWeight={400}>
+              {" "}
+              /
+            </Text>
+          </Text>
+        ))}
+      </Flex>
+      <Text variant="body2" color="lilac.main">
+        {poolId}
+      </Text>
+    </div>
   </Flex>
 );
diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/index.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/index.tsx
index a4454e19f..8c1022e61 100644
--- a/src/lib/pages/pools/components/table/pool-txs/messages/index.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/messages/index.tsx
@@ -4,10 +4,12 @@ import type { AssetInfosOpt } from "lib/services/assetService";
 import type { Message } from "lib/types";
 
 import type { MsgSwapExactAmountIn, MsgSwapExactAmountOut } from "./messages";
-import { MsgSwapExactAmountInAction } from "./swap/MsgSwapExactAmountInAction";
-import { MsgSwapExactAmountInDetail } from "./swap/MsgSwapExactAmountInDetail";
-import { MsgSwapExactAmountOutAction } from "./swap/MsgSwapExactAmountOutAction";
-import { MsgSwapExactAmountOutDetail } from "./swap/MsgSwapExactAmountOutDetail";
+import {
+  MsgSwapExactAmountInAction,
+  MsgSwapExactAmountInDetail,
+  MsgSwapExactAmountOutAction,
+  MsgSwapExactAmountOutDetail,
+} from "./swap";
 
 export const PoolTxsAction = ({
   msg,
@@ -47,12 +49,14 @@ export const PoolTxsDetail = ({
   msgIndex,
   msg,
   assetInfos,
+  isOpened,
 }: {
   txHash: string;
   blockHeight: number;
   msgIndex: number;
   msg: Message;
   assetInfos: AssetInfosOpt;
+  isOpened: boolean;
 }) => {
   // TODO: fix and add cases
   const { type } = msg;
@@ -66,6 +70,7 @@ export const PoolTxsDetail = ({
           msgIndex={msgIndex}
           msg={msg.detail as MsgSwapExactAmountIn}
           assetInfos={assetInfos}
+          isOpened={isOpened}
         />
       );
     case "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut":
@@ -77,6 +82,7 @@ export const PoolTxsDetail = ({
           msgIndex={msgIndex}
           msg={msg.detail as MsgSwapExactAmountOut}
           assetInfos={assetInfos}
+          isOpened={isOpened}
         />
       );
     case "type3":
diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
index 6ad66301c..a02413513 100644
--- a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
@@ -1,11 +1,9 @@
-import { Flex, Text, Tooltip } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 
 import type { MsgSwapExactAmountIn } from "../messages";
 import { MsgToken } from "lib/components/action-msg/MsgToken";
-import { Copier } from "lib/components/copy";
 import { CustomIcon } from "lib/components/icon";
 import type { AssetInfosOpt } from "lib/services/assetService";
-import { getTokenLabel } from "lib/utils";
 
 interface MsgSwapExactAmountInActionProps {
   msg: MsgSwapExactAmountIn;
@@ -26,31 +24,16 @@ export const MsgSwapExactAmountInAction = ({
         coin={msg.tokenIn}
         symbol={inAssetInfo?.symbol}
         precision={inAssetInfo?.precision}
+        fontWeight="700"
       />
       <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
-      <Flex role="group" align="center" gap={1}>
-        <Text fontWeight="medium">
-          {getTokenLabel(outAssetInfo?.symbol ?? tokenOutDenom)}
-        </Text>
-        <Tooltip
-          hasArrow
-          label={`Token ID: ${tokenOutDenom}`}
-          placement="top"
-          bg="honeydew.darker"
-          maxW="240px"
-        >
-          <Flex cursor="pointer">
-            <CustomIcon name="info-circle" boxSize="3" />
-          </Flex>
-        </Tooltip>
-        <Copier
-          type={outAssetInfo?.symbol ? "supported_asset" : "unsupported_asset"}
-          value={tokenOutDenom}
-          copyLabel="Token ID Copied!"
-          display="none"
-          ml="4px"
-        />
-      </Flex>
+      at least
+      <MsgToken
+        coin={{ amount: msg.tokenOutMinAmount, denom: tokenOutDenom }}
+        symbol={outAssetInfo?.symbol}
+        precision={outAssetInfo?.precision}
+        fontWeight="400"
+      />
     </Flex>
   );
 };
diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
index ac72bfb4e..175fc7231 100644
--- a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
@@ -13,6 +13,7 @@ interface MsgSwapExactAmountInDetailProps {
   msgIndex: number;
   msg: MsgSwapExactAmountIn;
   assetInfos: AssetInfosOpt;
+  isOpened: boolean;
 }
 
 export const MsgSwapExactAmountInDetail = ({
@@ -21,6 +22,7 @@ export const MsgSwapExactAmountInDetail = ({
   msgIndex,
   msg,
   assetInfos,
+  isOpened,
 }: MsgSwapExactAmountInDetailProps) => (
   <Flex w="full" alignItems="start" gap={12}>
     <Flex direction="column" minW="100px">
@@ -34,8 +36,17 @@ export const MsgSwapExactAmountInDetail = ({
       />
     </Flex>
     <Flex direction="column" gap={6}>
-      <PoolSwap txHash={txHash} msgIndex={msgIndex} assetInfos={assetInfos} />
-      <PoolRoute routes={msg.routes} assetInfos={assetInfos} />
+      <PoolSwap
+        txHash={txHash}
+        msgIndex={msgIndex}
+        assetInfos={assetInfos}
+        isOpened={isOpened}
+      />
+      <PoolRoute
+        routes={msg.routes}
+        assetInfos={assetInfos}
+        isOpened={isOpened}
+      />
     </Flex>
   </Flex>
 );
diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
index fb2ead952..c24209740 100644
--- a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
@@ -1,11 +1,9 @@
-import { Flex, Text, Tooltip } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 
 import type { MsgSwapExactAmountOut } from "../messages";
 import { MsgToken } from "lib/components/action-msg/MsgToken";
-import { Copier } from "lib/components/copy";
 import { CustomIcon } from "lib/components/icon";
 import type { AssetInfosOpt } from "lib/services/assetService";
-import { getTokenLabel } from "lib/utils";
 
 interface MsgSwapExactAmountOutActionProps {
   msg: MsgSwapExactAmountOut;
@@ -21,35 +19,19 @@ export const MsgSwapExactAmountOutAction = ({
   const outAssetInfo = assetInfos?.[msg.tokenOut.denom];
   return (
     <Flex gap={1} alignItems="center" flexWrap="wrap">
-      Swap
-      <Flex role="group" align="center" gap={1}>
-        <Text fontWeight="medium">
-          {getTokenLabel(inAssetInfo?.symbol ?? tokenInDenom)}
-        </Text>
-        <Tooltip
-          hasArrow
-          label={`Token ID: ${tokenInDenom}`}
-          placement="top"
-          bg="honeydew.darker"
-          maxW="240px"
-        >
-          <Flex cursor="pointer">
-            <CustomIcon name="info-circle" boxSize="3" />
-          </Flex>
-        </Tooltip>
-        <Copier
-          type={inAssetInfo?.symbol ? "supported_asset" : "unsupported_asset"}
-          value={tokenInDenom}
-          copyLabel="Token ID Copied!"
-          display="none"
-          ml="4px"
-        />
-      </Flex>
+      Swap at most
+      <MsgToken
+        coin={{ amount: msg.tokenInMaxAmount, denom: tokenInDenom }}
+        symbol={inAssetInfo?.symbol}
+        precision={inAssetInfo?.precision}
+        fontWeight="400"
+      />
       <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
       <MsgToken
         coin={msg.tokenOut}
         symbol={outAssetInfo?.symbol}
         precision={outAssetInfo?.precision}
+        fontWeight="700"
       />
     </Flex>
   );
diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
index 6c23bc8fd..b38a72b1c 100644
--- a/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
@@ -13,6 +13,7 @@ interface MsgSwapExactAmountOutDetailProps {
   msgIndex: number;
   msg: MsgSwapExactAmountOut;
   assetInfos: AssetInfosOpt;
+  isOpened: boolean;
 }
 
 export const MsgSwapExactAmountOutDetail = ({
@@ -21,6 +22,7 @@ export const MsgSwapExactAmountOutDetail = ({
   msgIndex,
   msg,
   assetInfos,
+  isOpened,
 }: MsgSwapExactAmountOutDetailProps) => {
   const outDenoms = msg.routes
     .map((route) => route.tokenInDenom)
@@ -43,8 +45,17 @@ export const MsgSwapExactAmountOutDetail = ({
         />
       </Flex>
       <Flex direction="column" gap={6}>
-        <PoolSwap txHash={txHash} msgIndex={msgIndex} assetInfos={assetInfos} />
-        <PoolRoute routes={routes} assetInfos={assetInfos} />
+        <PoolSwap
+          txHash={txHash}
+          msgIndex={msgIndex}
+          assetInfos={assetInfos}
+          isOpened={isOpened}
+        />
+        <PoolRoute
+          routes={routes}
+          assetInfos={assetInfos}
+          isOpened={isOpened}
+        />
       </Flex>
     </Flex>
   );
diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolRoute.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolRoute.tsx
index b268dd90c..82f6b1e56 100644
--- a/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolRoute.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolRoute.tsx
@@ -15,11 +15,13 @@ interface PoolRouteProps {
     tokenOutDenom: string;
   }[];
   assetInfos: AssetInfosOpt;
+  isOpened: boolean;
 }
 
-export const PoolRoute = ({ routes, assetInfos }: PoolRouteProps) => {
+export const PoolRoute = ({ routes, assetInfos, isOpened }: PoolRouteProps) => {
   const { data: poolAssets, isLoading } = usePoolAssetsbyPoolIds(
-    routes.map((pool) => pool.poolId)
+    routes.map((pool) => pool.poolId),
+    isOpened
   );
 
   if (isLoading) return <Loading />;
diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolSwap.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolSwap.tsx
index 5e5db3c7d..e57db5b70 100644
--- a/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolSwap.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/PoolSwap.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Text } from "@chakra-ui/react";
+import { Flex, Text } from "@chakra-ui/react";
 
 import { AssetCard } from "../AssetCard";
 import { CustomIcon } from "lib/components/icon";
@@ -11,14 +11,16 @@ interface PoolSwapInterface {
   txHash: string;
   msgIndex: number;
   assetInfos: AssetInfosOpt;
+  isOpened: boolean;
 }
 
 export const PoolSwap = ({
   txHash,
   msgIndex,
   assetInfos,
+  isOpened,
 }: PoolSwapInterface) => {
-  const { data: txData, isLoading } = useTxData(txHash);
+  const { data: txData, isLoading } = useTxData(txHash, isOpened);
   if (isLoading) return <Loading withBorder={false} />;
 
   const swapEvent = txData?.logs
@@ -29,17 +31,19 @@ export const PoolSwap = ({
       <EmptyState message="There is an error during fetching message detail." />
     );
 
+  // Get the token-in from the third attribute of the event e.g. 10000utoken
   const inAsset = swapEvent.attributes.at(3)?.value ?? "";
   const inAmount = inAsset.match(/[0-9]+/g)?.[0] ?? "";
   const inDenom = inAsset.slice(inAmount.length);
 
+  // Get the token-out from the last attribute of the event e.g. 10000utoken
   const outAsset = swapEvent.attributes.at(-1)?.value ?? "";
   const outAmount = outAsset.match(/[0-9]+/g)?.[0] ?? "";
   const outDenom = outAsset.slice(outAmount.length);
 
   return (
     <Flex gap={4} alignItems="center">
-      <Box>
+      <div>
         <Text variant="body2" textColor="pebble.500" fontWeight={500}>
           From
         </Text>
@@ -48,9 +52,9 @@ export const PoolSwap = ({
           denom={inDenom}
           assetInfo={assetInfos?.[inDenom]}
         />
-      </Box>
+      </div>
       <CustomIcon name="arrow-right" boxSize={6} color="honeydew.main" />
-      <Box>
+      <div>
         <Text variant="body2" textColor="pebble.500" fontWeight={500}>
           To
         </Text>
@@ -59,7 +63,7 @@ export const PoolSwap = ({
           denom={outDenom}
           assetInfo={assetInfos?.[outDenom]}
         />
-      </Box>
+      </div>
     </Flex>
   );
 };
diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/swap/index.ts b/src/lib/pages/pools/components/table/pool-txs/messages/swap/index.ts
new file mode 100644
index 000000000..4b7fc414d
--- /dev/null
+++ b/src/lib/pages/pools/components/table/pool-txs/messages/swap/index.ts
@@ -0,0 +1,4 @@
+export * from "./MsgSwapExactAmountInAction";
+export * from "./MsgSwapExactAmountInDetail";
+export * from "./MsgSwapExactAmountOutAction";
+export * from "./MsgSwapExactAmountOutDetail";
diff --git a/src/lib/pages/pools/data.ts b/src/lib/pages/pools/data.ts
index fa68acf04..060ffc5f9 100644
--- a/src/lib/pages/pools/data.ts
+++ b/src/lib/pages/pools/data.ts
@@ -4,10 +4,12 @@ import big from "big.js";
 import type { Order_By } from "lib/gql/graphql";
 import { useAssetInfos } from "lib/services/assetService";
 import { usePoolByPoolId, usePoolListQuery } from "lib/services/poolService";
+import { useTxsCountByPoolId } from "lib/services/txService";
 import type {
   Option,
   Pool,
   PoolDetail,
+  PoolTxFilter,
   PoolTypeFilter,
   PoolWeight,
   TokenWithValue,
@@ -88,3 +90,18 @@ export const usePool = (
     isLoading: false,
   };
 };
+
+export const usePoolTxsCount = (
+  poolId: number,
+  type: PoolTxFilter
+): { count: number; countDisplay: string; isLoading: boolean } => {
+  const { data, isLoading } = useTxsCountByPoolId(poolId, type);
+  if (isLoading) return { count: 0, countDisplay: "0", isLoading };
+
+  const showActualCount = data !== undefined && data <= 10000;
+  return {
+    count: showActualCount ? data : 10000,
+    countDisplay: showActualCount ? data.toString() : "10000+",
+    isLoading: false,
+  };
+};
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index 8f187ab2c..dd54a7a94 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -170,7 +170,8 @@ export const usePoolByPoolId = (
 };
 
 export const usePoolAssetsbyPoolIds = (
-  poolIds: number[]
+  poolIds: number[],
+  enabled = true
 ): UseQueryResult<Record<number, string[]>> => {
   const { indexerGraphClient } = useCelatoneApp();
 
@@ -192,5 +193,7 @@ export const usePoolAssetsbyPoolIds = (
       );
   }, [poolIds, indexerGraphClient]);
 
-  return useQuery(["pools_by_pool_ids", poolIds, indexerGraphClient], queryFn);
+  return useQuery(["pools_by_pool_ids", poolIds, indexerGraphClient], queryFn, {
+    enabled,
+  });
 };
diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index 82fd31469..b6e413d33 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -46,7 +46,10 @@ export interface TxData extends TxResponse {
   isTxFailed: boolean;
 }
 
-export const useTxData = (txHash: Option<string>): UseQueryResult<TxData> => {
+export const useTxData = (
+  txHash: Option<string>,
+  enabled = true
+): UseQueryResult<TxData> => {
   const { currentChainName } = useWallet();
   const chainId = useChainId();
   const queryFn = useCallback(
@@ -64,7 +67,7 @@ export const useTxData = (txHash: Option<string>): UseQueryResult<TxData> => {
   return useQuery({
     queryKey: ["tx_data", currentChainName, chainId, txHash] as string[],
     queryFn,
-    enabled: Boolean(txHash && isTxHash(txHash)),
+    enabled: enabled && Boolean(txHash && isTxHash(txHash)),
     refetchOnWindowFocus: false,
     retry: false,
   });

From 00917e4414b6fc65721f47edff698d7c98078f39 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 9 May 2023 15:52:54 +0700
Subject: [PATCH 077/354] fix: comments

---
 src/lib/components/ExplorerLink.tsx                      | 9 +++++++--
 .../components/table/pool-txs/messages/PoolAssets.tsx    | 7 +++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
index d63d0c089..087d7327c 100644
--- a/src/lib/components/ExplorerLink.tsx
+++ b/src/lib/components/ExplorerLink.tsx
@@ -20,7 +20,8 @@ export type LinkType =
   | "tx_hash"
   | "code_id"
   | "block_height"
-  | "proposal_id";
+  | "proposal_id"
+  | "pool_id";
 
 interface ExplorerLinkProps extends BoxProps {
   value: string;
@@ -63,6 +64,9 @@ const getNavigationUrl = (
     case "proposal_id":
       url = getExplorerProposalUrl(currentChainName);
       break;
+    case "pool_id":
+      url = "/pools";
+      break;
     case "invalid_address":
       return "";
     default:
@@ -161,7 +165,8 @@ export const ExplorerLink = ({
     type === "contract_address" ||
     type === "user_address" ||
     type === "tx_hash" ||
-    type === "block_height";
+    type === "block_height" ||
+    type === "pool_id";
 
   const [hrefLink, textValue] = [
     getNavigationUrl(type, currentChainName, copyValue || value),
diff --git a/src/lib/pages/pools/components/table/pool-txs/messages/PoolAssets.tsx b/src/lib/pages/pools/components/table/pool-txs/messages/PoolAssets.tsx
index 46e18f362..836e739d8 100644
--- a/src/lib/pages/pools/components/table/pool-txs/messages/PoolAssets.tsx
+++ b/src/lib/pages/pools/components/table/pool-txs/messages/PoolAssets.tsx
@@ -1,5 +1,6 @@
 import { Flex, Text } from "@chakra-ui/react";
 
+import { ExplorerLink } from "lib/components/ExplorerLink";
 import { PoolLogo } from "lib/pages/pools/components/PoolLogo";
 import type { TokenWithValue } from "lib/types";
 import { getTokenLabel } from "lib/utils";
@@ -35,16 +36,14 @@ export const PoolAssets = ({ poolId, tokens, outAsset }: PoolAssetsProps) => (
             color={token.denom === outAsset ? "honeydew.main" : "text.main"}
           >
             {token.symbol || getTokenLabel(token.denom)}
-            <Text as="span" fontWeight={400}>
+            <Text as="span" fontWeight={400} color="honeydew.main">
               {" "}
               /
             </Text>
           </Text>
         ))}
       </Flex>
-      <Text variant="body2" color="lilac.main">
-        {poolId}
-      </Text>
+      <ExplorerLink type="pool_id" value={poolId.toString()} showCopyOnHover />
     </div>
   </Flex>
 );

From a5353221ad895639d5b02d43da700c3b6949fabb Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 9 May 2023 15:56:30 +0700
Subject: [PATCH 078/354] fix: query fn error

---
 src/lib/services/poolService.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index dd54a7a94..5e30af716 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -13,7 +13,7 @@ import {
   getPoolListCount,
   getPoolsByPoolIds,
 } from "lib/query";
-import type { Pool, PoolDetail, PoolTypeFilter } from "lib/types";
+import type { Option, Pool, PoolDetail, PoolTypeFilter } from "lib/types";
 import { isPositiveInt } from "lib/utils";
 
 import { usePoolExpression } from "./expression/poolExpression";
@@ -134,11 +134,13 @@ export const usePoolListCountQuery = ({
 };
 
 export const usePoolByPoolId = (
-  poolId: number
+  poolId: Option<number>
 ): UseQueryResult<PoolDetail<string, Coin>> => {
   const { indexerGraphClient } = useCelatoneApp();
 
   const queryFn = useCallback(async () => {
+    if (!poolId) throw new Error("Pool ID not found (usePoolByPoolId)");
+
     return indexerGraphClient
       .request(getPoolByPoolId, {
         poolId,
@@ -166,7 +168,9 @@ export const usePoolByPoolId = (
       );
   }, [poolId, indexerGraphClient]);
 
-  return useQuery(["pool_by_pool_id", poolId, indexerGraphClient], queryFn);
+  return useQuery(["pool_by_pool_id", poolId, indexerGraphClient], queryFn, {
+    enabled: !!poolId,
+  });
 };
 
 export const usePoolAssetsbyPoolIds = (

From 43b2b4d6bf6b1dfb7d2216acbfc3799bb85030b2 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 25 Apr 2023 14:07:59 +0700
Subject: [PATCH 079/354] feat: pool header and pool assets for pool details
 page

---
 CHANGELOG.md                                  |   1 +
 src/lib/app-provider/hooks/useAddress.ts      |   4 +-
 src/lib/components/CopyLink.tsx               |  34 +++++-
 src/lib/components/ExplorerLink.tsx           |   4 +-
 src/lib/components/LabelText.tsx              |  12 +-
 src/lib/components/TooltipComponent.tsx       |  21 ++++
 src/lib/components/copy/Copier.tsx            |   7 +-
 .../pools/components/PoolAssetDetail.tsx      |  80 -------------
 .../pools/components/PoolDetailHeader.tsx     |  12 +-
 src/lib/pages/pools/components/PoolTop.tsx    |   5 -
 .../pool-details/JsonModalButton.tsx          |  75 ++++++++++++
 .../pool-details/header/PoolHeader.tsx        |  89 ++++++++++++++
 .../pool-details/header/PoolInfo.tsx          | 110 ++++++++++++++++++
 .../pool-details/header/PoolLogo.tsx          |  65 +++++++++++
 .../components/pool-details/header/index.tsx  |  56 +++++++++
 .../pool-details/pool-assets/index.tsx        |  61 ++++++++++
 .../table/PoolAssetsTableHeader.tsx           |  15 ++-
 .../pool-assets/table/PoolAssetsTableRow.tsx  | 107 +++++++++++++++++
 .../pool-details/pool-assets/table/index.tsx  |  37 ++++++
 .../table}/PoolRelatedTxs.tsx                 |   0
 .../supportedSection/AllocationBadge.tsx      |   8 +-
 .../components/table/PoolAssetsTable.tsx      |  48 --------
 .../components/table/PoolAssetsTableRow.tsx   |  87 --------------
 src/lib/pages/pools/data.ts                   |  25 ++--
 src/lib/pages/pools/poolId.tsx                |  46 +++-----
 src/lib/services/poolService.ts               |   9 +-
 src/lib/types/asset.ts                        |   1 +
 src/lib/types/currency/token.ts               |   5 +
 src/lib/types/pool.ts                         |  13 ++-
 src/lib/utils/assetValue.ts                   |   1 +
 src/lib/utils/formatter/formatPercentValue.ts |  21 ----
 src/lib/utils/formatter/index.ts              |   2 +-
 src/lib/utils/formatter/percentage.ts         |  31 +++++
 33 files changed, 776 insertions(+), 316 deletions(-)
 delete mode 100644 src/lib/pages/pools/components/PoolAssetDetail.tsx
 delete mode 100644 src/lib/pages/pools/components/PoolTop.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/JsonModalButton.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/header/PoolHeader.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/header/PoolLogo.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/header/index.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/pool-assets/index.tsx
 rename src/lib/pages/pools/components/{ => pool-details/pool-assets}/table/PoolAssetsTableHeader.tsx (60%)
 create mode 100644 src/lib/pages/pools/components/pool-details/pool-assets/table/PoolAssetsTableRow.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/pool-assets/table/index.tsx
 rename src/lib/pages/pools/components/{ => pool-details/table}/PoolRelatedTxs.tsx (100%)
 delete mode 100644 src/lib/pages/pools/components/table/PoolAssetsTable.tsx
 delete mode 100644 src/lib/pages/pools/components/table/PoolAssetsTableRow.tsx
 delete mode 100644 src/lib/utils/formatter/formatPercentValue.ts
 create mode 100644 src/lib/utils/formatter/percentage.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ab08bb045..f35e4074e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#296](https://github.com/alleslabs/celatone-frontend/pull/296) Add pool header and pool assets section for pool details page
 - [#295](https://github.com/alleslabs/celatone-frontend/pull/295) Add expand/collapse all for unsupported pool list
 - [#277](https://github.com/alleslabs/celatone-frontend/pull/277) Wire up data for pool navigation page
 - [#275](https://github.com/alleslabs/celatone-frontend/pull/275) Add Pool navigation and pool detail data
diff --git a/src/lib/app-provider/hooks/useAddress.ts b/src/lib/app-provider/hooks/useAddress.ts
index 3f3ffbeac..38313f2e7 100644
--- a/src/lib/app-provider/hooks/useAddress.ts
+++ b/src/lib/app-provider/hooks/useAddress.ts
@@ -38,7 +38,7 @@ const addressLengthMap: {
 
 export const getAddressTypeByLength = (
   chainName: string,
-  address: Option<string>
+  address: Option<string | null>
 ): AddressReturnType =>
   address
     ? addressLengthMap[chainName]?.[address.length] ?? "invalid_address"
@@ -75,7 +75,7 @@ const validateAddress = (
 export const useGetAddressType = () => {
   const { currentChainName, currentChainRecord } = useWallet();
   return useCallback(
-    (address: Option<string>): AddressReturnType => {
+    (address: Option<string | null>): AddressReturnType => {
       const addressType = getAddressTypeByLength(currentChainName, address);
       if (
         !address ||
diff --git a/src/lib/components/CopyLink.tsx b/src/lib/components/CopyLink.tsx
index a1e187f9a..d16302ef6 100644
--- a/src/lib/components/CopyLink.tsx
+++ b/src/lib/components/CopyLink.tsx
@@ -1,21 +1,40 @@
+import type { FlexProps, IconProps } from "@chakra-ui/react";
 import { Flex, Text, Tooltip, useClipboard } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 import { AmpTrackCopier } from "lib/services/amplitude";
 
 import { CustomIcon } from "./icon";
 
-interface CopyLinkProps {
+interface CopyLinkProps extends FlexProps {
   value: string;
   amptrackSection?: string;
   type: string;
+  showCopyOnHover?: boolean;
 }
 
-export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
+export const CopyLink = ({
+  value,
+  amptrackSection,
+  type,
+  showCopyOnHover = false,
+  ...flexProps
+}: CopyLinkProps) => {
   const { address } = useWallet();
   const { onCopy, hasCopied } = useClipboard(value);
   const [isHover, setIsHover] = useState(false);
+
+  const displayIcon = useMemo<IconProps["display"]>(() => {
+    if (showCopyOnHover) {
+      if (isHover) {
+        return "flex";
+      }
+      return "none";
+    }
+    return undefined;
+  }, [showCopyOnHover, isHover]);
+
   return (
     <Tooltip
       hasArrow
@@ -40,6 +59,7 @@ export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
         cursor="pointer"
         onMouseEnter={() => setIsHover(true)}
         onMouseLeave={() => setIsHover(false)}
+        {...flexProps}
       >
         <Text
           variant="body2"
@@ -48,7 +68,13 @@ export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
         >
           {value === address ? `${value} (Me)` : value}
         </Text>
-        <CustomIcon cursor="pointer" marginLeft={2} name="copy" boxSize={3} />
+        <CustomIcon
+          display={displayIcon}
+          cursor="pointer"
+          marginLeft={2}
+          name="copy"
+          boxSize={3}
+        />
       </Flex>
     </Tooltip>
   );
diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
index d63d0c089..c6938ee83 100644
--- a/src/lib/components/ExplorerLink.tsx
+++ b/src/lib/components/ExplorerLink.tsx
@@ -185,7 +185,9 @@ export const ExplorerLink = ({
       {...componentProps}
     >
       {readOnly ? (
-        <Text variant="body2">{textValue}</Text>
+        <Text variant="body2" color="text.disabled">
+          {textValue}
+        </Text>
       ) : (
         <>
           <LinkRender
diff --git a/src/lib/components/LabelText.tsx b/src/lib/components/LabelText.tsx
index ac697451a..c74fe36d8 100644
--- a/src/lib/components/LabelText.tsx
+++ b/src/lib/components/LabelText.tsx
@@ -1,8 +1,10 @@
 import type { FlexProps } from "@chakra-ui/react";
 import { Flex, Text } from "@chakra-ui/react";
 
+import { TooltipInfo } from "./TooltipComponent";
 interface LabelTextProps extends FlexProps {
   label: string;
+  tooltipText?: string;
   children: string | JSX.Element;
   helperText1?: string;
   helperText2?: string;
@@ -10,15 +12,19 @@ interface LabelTextProps extends FlexProps {
 
 export const LabelText = ({
   label,
+  tooltipText,
   children,
   helperText1,
   helperText2,
   ...flexProps
 }: LabelTextProps) => (
   <Flex direction="column" gap={1} {...flexProps}>
-    <Text variant="body2" color="text.dark" fontWeight={500}>
-      {label}
-    </Text>
+    <Flex align="center" gap={1}>
+      <Text variant="body2" color="text.dark" fontWeight={500}>
+        {label}
+      </Text>
+      {tooltipText && <TooltipInfo label={tooltipText} />}
+    </Flex>
     {typeof children === "string" ? (
       <Text variant="body2">{children}</Text>
     ) : (
diff --git a/src/lib/components/TooltipComponent.tsx b/src/lib/components/TooltipComponent.tsx
index c09c32e60..c385b72f1 100644
--- a/src/lib/components/TooltipComponent.tsx
+++ b/src/lib/components/TooltipComponent.tsx
@@ -1,6 +1,8 @@
 import type { TooltipProps } from "@chakra-ui/react";
 import { Tooltip } from "@chakra-ui/react";
 
+import { CustomIcon } from "./icon";
+
 export const TooltipComponent = ({
   placement,
   ...tooltipProps
@@ -13,3 +15,22 @@ export const TooltipComponent = ({
     {...tooltipProps}
   />
 );
+
+interface TooltipInfoProps extends Omit<TooltipProps, "children"> {
+  iconVariant?: "default" | "solid";
+}
+
+export const TooltipInfo = ({
+  iconVariant = "default",
+  ...tooltipProps
+}: TooltipInfoProps) => (
+  <TooltipComponent {...tooltipProps}>
+    <div style={{ cursor: "pointer" }}>
+      <CustomIcon
+        name={iconVariant === "solid" ? "info-circle-solid" : "info-circle"}
+        boxSize={3}
+        m={0}
+      />
+    </div>
+  </TooltipComponent>
+);
diff --git a/src/lib/components/copy/Copier.tsx b/src/lib/components/copy/Copier.tsx
index d9e8c385b..9b967a796 100644
--- a/src/lib/components/copy/Copier.tsx
+++ b/src/lib/components/copy/Copier.tsx
@@ -1,4 +1,4 @@
-import type { LayoutProps } from "@chakra-ui/react";
+import type { IconProps, LayoutProps } from "@chakra-ui/react";
 
 import { CustomIcon } from "../icon";
 import { AmpTrackCopier } from "lib/services/amplitude";
@@ -10,7 +10,7 @@ interface CopierProps {
   value: string;
   copyLabel?: string;
   display?: LayoutProps["display"];
-  ml?: string;
+  ml?: IconProps["ml"];
   amptrackSection?: string;
 }
 
@@ -31,10 +31,11 @@ export const Copier = ({
         className="copier"
         display={display}
         cursor="pointer"
+        m={0}
         marginLeft={ml}
         onClick={() => AmpTrackCopier(amptrackSection, type)}
         name="copy"
-        boxSize="12px"
+        boxSize={4}
       />
     }
   />
diff --git a/src/lib/pages/pools/components/PoolAssetDetail.tsx b/src/lib/pages/pools/components/PoolAssetDetail.tsx
deleted file mode 100644
index c9c80b42f..000000000
--- a/src/lib/pages/pools/components/PoolAssetDetail.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { Flex, Heading, Badge, Text, Box } from "@chakra-ui/react";
-import type { Big } from "big.js";
-import big from "big.js";
-import Link from "next/link";
-
-import { CustomIcon } from "lib/components/icon";
-import { Loading } from "lib/components/Loading";
-import { useAssetInfos } from "lib/services/assetService";
-import type { TokenWithValue, USD } from "lib/types";
-import type { PoolDetail } from "lib/types/pool";
-import { formatPrice } from "lib/utils";
-
-import { PoolAssetsTable } from "./table/PoolAssetsTable";
-
-interface PoolAssetDetailProps {
-  assets: TokenWithValue[];
-  pool_type: PoolDetail["type"];
-  // weight?: Option<PoolWeight[] | null>;
-  // scaling_factors?: Option<string[] | null>;
-}
-export const PoolAssetDetail = ({
-  assets,
-  pool_type,
-}: // weight,
-// scaling_factors,
-PoolAssetDetailProps) => {
-  const { assetInfos } = useAssetInfos();
-
-  if (!assetInfos) return <Loading />;
-
-  const liquidity = assets.reduce(
-    (total, asset) => total.add(asset.value ?? big(0)) as USD<Big>,
-    big(0) as USD<Big>
-  );
-
-  return (
-    <Box>
-      <Flex py={12} justifyContent="space-between">
-        <Flex gap={2} alignItems="center">
-          <Heading as="h6" variant="h6">
-            Pools
-          </Heading>
-          <Badge variant="gray" color="text.main" textColor="text.main">
-            {assets.length}
-          </Badge>
-        </Flex>
-        <Flex gap={2}>
-          <Text variant="body2" color="text.dark" fontWeight="600">
-            Total Liquidity:
-          </Text>
-          <Text variant="body2" color="text.main" fontWeight="600">
-            {formatPrice(liquidity)}
-          </Text>
-        </Flex>
-      </Flex>
-      <PoolAssetsTable
-        assets={assets}
-        pool_type={pool_type}
-        total_liquidity={liquidity}
-      />
-      <Flex gap="2" alignItems="center">
-        <Text variant="body2" color="text.dark">
-          What is asset weights and allocations?
-        </Text>
-        <Link
-          href="https://docs.osmosis.zone/osmosis-core/modules/gamm#weights"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Flex gap="2px" alignItems="center">
-            <Text color="lilac.main" variant="body2">
-              Read more
-            </Text>
-            <CustomIcon name="launch" color="lilac.main" boxSize="3" />
-          </Flex>
-        </Link>
-      </Flex>
-    </Box>
-  );
-};
diff --git a/src/lib/pages/pools/components/PoolDetailHeader.tsx b/src/lib/pages/pools/components/PoolDetailHeader.tsx
index c3283646b..aba698ad7 100644
--- a/src/lib/pages/pools/components/PoolDetailHeader.tsx
+++ b/src/lib/pages/pools/components/PoolDetailHeader.tsx
@@ -17,7 +17,6 @@ import {
   Tooltip,
 } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
-import Big from "big.js";
 
 import { getAddressTypeByLength } from "lib/app-provider";
 import { BackButton } from "lib/components/button";
@@ -25,8 +24,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
 import type { PoolDetail } from "lib/types/pool";
-import { jsonPrettify, truncate } from "lib/utils";
-import { formatPercentValue } from "lib/utils/formatter/formatPercentValue";
+import { formatRatio, jsonPrettify, truncate } from "lib/utils";
 
 import { PoolHeader } from "./PoolHeader";
 
@@ -148,9 +146,7 @@ export const PoolDetailHeader = ({ pool }: PoolDetailHeaderProp) => {
               </Flex>
             </Tooltip>
           </Flex>
-          <StyledTextContent>
-            {formatPercentValue(Big(pool.swapFee).times(100))}
-          </StyledTextContent>
+          <StyledTextContent>{formatRatio(pool.swapFee)}</StyledTextContent>
         </Flex>
         <Flex flexDirection="column" gap={1}>
           <Flex alignItems="center" gap={1}>
@@ -167,9 +163,7 @@ export const PoolDetailHeader = ({ pool }: PoolDetailHeaderProp) => {
               </Flex>
             </Tooltip>
           </Flex>
-          <StyledTextContent>
-            {formatPercentValue(Big(pool.exitFee).times(100))}
-          </StyledTextContent>
+          <StyledTextContent>{formatRatio(pool.exitFee)}</StyledTextContent>
         </Flex>
         <Flex flexDirection="column" gap={1}>
           <StyledTextLabel>Future Governor</StyledTextLabel>
diff --git a/src/lib/pages/pools/components/PoolTop.tsx b/src/lib/pages/pools/components/PoolTop.tsx
deleted file mode 100644
index 930910d44..000000000
--- a/src/lib/pages/pools/components/PoolTop.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Flex } from "@chakra-ui/react";
-
-export const PoolTop = () => {
-  return <Flex>jj</Flex>;
-};
diff --git a/src/lib/pages/pools/components/pool-details/JsonModalButton.tsx b/src/lib/pages/pools/components/pool-details/JsonModalButton.tsx
new file mode 100644
index 000000000..c95f10810
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/JsonModalButton.tsx
@@ -0,0 +1,75 @@
+import {
+  Button,
+  Heading,
+  Modal,
+  ModalContent,
+  ModalCloseButton,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+  ModalBody,
+  Box,
+} from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+import JsonReadOnly from "lib/components/json/JsonReadOnly";
+import { jsonPrettify } from "lib/utils";
+
+interface JsonModalButtonProps {
+  jsonString: string;
+  modalHeader: string;
+}
+
+export const JsonModalButton = ({
+  jsonString,
+  modalHeader,
+}: JsonModalButtonProps) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return (
+    <>
+      <Button
+        w="fit-content"
+        height="24px"
+        p="4px"
+        size="sm"
+        variant="ghost-lilac"
+        rightIcon={
+          <CustomIcon
+            name="chevron-right"
+            boxSize={3}
+            color="lilac.main"
+            m={0}
+          />
+        }
+        onClick={onOpen}
+      >
+        View JSON
+      </Button>
+      <Modal isOpen={isOpen} onClose={onClose} isCentered size="4xl">
+        <ModalOverlay />
+        <ModalContent w="840px">
+          <ModalHeader>
+            <CustomIcon name="code" boxSize="6" />
+            <Heading as="h5" variant="h5">
+              {modalHeader}
+            </Heading>
+          </ModalHeader>
+          <ModalCloseButton color="pebble.600" />
+          <ModalBody p={4} maxH="640px" overflow="scroll">
+            <Box
+              bgColor="background.main"
+              borderRadius="8px"
+              position="relative"
+            >
+              <JsonReadOnly
+                text={jsonPrettify(jsonString)}
+                canCopy
+                showLines={16}
+              />
+            </Box>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/header/PoolHeader.tsx b/src/lib/pages/pools/components/pool-details/header/PoolHeader.tsx
new file mode 100644
index 000000000..a184bb2f0
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/header/PoolHeader.tsx
@@ -0,0 +1,89 @@
+import { Flex, Heading, Text, Image } from "@chakra-ui/react";
+import type Big from "big.js";
+
+import { DotSeparator } from "lib/components/DotSeperator";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { PoolDetail, TokenWithValue } from "lib/types";
+import { getTokenLabel } from "lib/utils";
+
+import { PoolLogo } from "./PoolLogo";
+
+interface PoolHeaderProps {
+  pool: PoolDetail<Big, TokenWithValue>;
+  assetInfos: AssetInfosOpt;
+}
+
+export const PoolHeader = ({ pool, assetInfos }: PoolHeaderProps) => {
+  const { poolLiquidity, id: poolId, type: poolType, isSuperfluid } = pool;
+  return (
+    <Flex alignItems="center" gap={2}>
+      <PoolLogo poolLiquidity={poolLiquidity} assetInfos={assetInfos} />
+      <Flex direction="column">
+        <Flex
+          gap={2}
+          sx={{
+            "h6:last-of-type > span": {
+              display: "none",
+            },
+          }}
+        >
+          {poolLiquidity.slice(0, 4).map((item) => (
+            <Heading as="h6" fontWeight="600" variant="h6" key={item.denom}>
+              {assetInfos?.[item.denom]?.symbol ?? getTokenLabel(item.denom)}
+              <Text as="span" ml={2} color="honeydew.main">
+                /
+              </Text>
+            </Heading>
+          ))}
+          {poolLiquidity.length > 4 && (
+            <Heading as="h6" fontWeight="600" variant="h6">
+              <Text as="span" mr={2} color="honeydew.main">
+                /
+              </Text>
+              + {poolLiquidity.length - 4}
+            </Heading>
+          )}
+        </Flex>
+        <Flex alignItems="center" gap={2} mt={1}>
+          <Text variant="body2" color="lilac.main">
+            #{poolId}
+          </Text>
+          {poolType && (
+            <Flex alignItems="center" gap={2}>
+              <DotSeparator />
+              <Flex alignItems="center" gap={1}>
+                <Image
+                  boxSize={4}
+                  src={
+                    poolType === "Balancer"
+                      ? "https://assets.alleslabs.dev/webapp-assets/pool/pool-balancer.svg"
+                      : "https://assets.alleslabs.dev/webapp-assets/pool/pool-stableswap.svg"
+                  }
+                />
+                <Text variant="body2" color="text.dark">
+                  {poolType === "Balancer"
+                    ? "Balancer Pool"
+                    : "StableSwap Pool"}
+                </Text>
+              </Flex>
+            </Flex>
+          )}
+          {isSuperfluid && (
+            <Flex alignItems="center" gap={2}>
+              <DotSeparator />
+              <Flex alignItems="center" gap={1}>
+                <Image
+                  boxSize={4}
+                  src="https://assets.alleslabs.dev/webapp-assets/pool/pool-superfluid.svg"
+                />
+                <Text variant="body2" color="text.dark">
+                  Superfluid
+                </Text>
+              </Flex>
+            </Flex>
+          )}
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
new file mode 100644
index 000000000..da416023d
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
@@ -0,0 +1,110 @@
+import { Flex, Text } from "@chakra-ui/react";
+import type Big from "big.js";
+
+import { JsonModalButton } from "../JsonModalButton";
+import { useGetAddressType } from "lib/app-provider";
+import { CopyLink } from "lib/components/CopyLink";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { LabelText } from "lib/components/LabelText";
+import type { PoolDetail, TokenWithValue } from "lib/types";
+import { formatRatio } from "lib/utils";
+
+interface PoolInfoProps {
+  pool: PoolDetail<Big, TokenWithValue>;
+}
+
+export const PoolInfo = ({ pool }: PoolInfoProps) => {
+  const getAddressType = useGetAddressType();
+  const futurePoolGovernorType = getAddressType(pool.futurePoolGovernor);
+  return (
+    <Flex
+      background="pebble.900"
+      borderRadius="8px"
+      px={4}
+      py={3}
+      columnGap={12}
+      rowGap={6}
+      mt={6}
+      wrap="wrap"
+    >
+      <LabelText label="Pool ID">
+        <CopyLink
+          value={pool.id.toString()}
+          amptrackSection="pool_details_id"
+          type="pool_id"
+          showCopyOnHover
+          w="50px"
+        />
+      </LabelText>
+      <LabelText label="Created Height">
+        <ExplorerLink
+          type="block_height"
+          value={(pool.blockHeight ?? "N/A").toString()}
+          showCopyOnHover
+          isReadOnly={!pool.blockHeight}
+        />
+      </LabelText>
+      <LabelText label="Pool Created by">
+        <ExplorerLink
+          value={pool.creator ?? "N/A"}
+          type={getAddressType(pool.creator)}
+          isReadOnly={!pool.creator}
+          showCopyOnHover
+          textFormat="truncate"
+          w="140px"
+        />
+      </LabelText>
+      <LabelText
+        label="Swap Fee"
+        tooltipText="The fee charged for making a swap in a pool, defined by the pool creator, and paid by traders in the form of a percentage the input swap asset amount"
+      >
+        <Text variant="body2">{formatRatio(pool.swapFee)}</Text>
+      </LabelText>
+      <LabelText
+        label="Exit Fee"
+        tooltipText="The fee charged when withdrawing from a pool, defined by the pool creator, and paid by the withdrawer in the form of LP tokens"
+      >
+        <Text variant="body2">{formatRatio(pool.exitFee)}</Text>
+      </LabelText>
+      <LabelText label="Future Governor">
+        {futurePoolGovernorType !== "invalid_address" ? (
+          <ExplorerLink
+            type={futurePoolGovernorType}
+            value={pool.futurePoolGovernor ?? "N/A"}
+            isReadOnly={!pool.futurePoolGovernor}
+            showCopyOnHover
+            textFormat="truncate"
+            w="140px"
+          />
+        ) : (
+          <Text
+            as="p"
+            color={pool.futurePoolGovernor ? "text.main" : "text.disabled"}
+            variant="body2"
+          >
+            {pool.futurePoolGovernor ?? "N/A"}
+          </Text>
+        )}
+      </LabelText>
+      {pool.smoothWeightChangeParams && (
+        <LabelText label="Smooth weight change params">
+          <JsonModalButton
+            modalHeader="Smooth weight change params"
+            jsonString={JSON.stringify(pool.smoothWeightChangeParams)}
+          />
+        </LabelText>
+      )}
+      {pool.scalingFactors && (
+        <LabelText label="Scaling Factors">
+          <JsonModalButton
+            modalHeader="Scaling Factors"
+            jsonString={JSON.stringify({
+              scaling_factors: pool.scalingFactors,
+              scaling_factor_controller: pool.scalingFactorController,
+            })}
+          />
+        </LabelText>
+      )}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/header/PoolLogo.tsx b/src/lib/pages/pools/components/pool-details/header/PoolLogo.tsx
new file mode 100644
index 000000000..1aa656913
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/header/PoolLogo.tsx
@@ -0,0 +1,65 @@
+import { Flex, Image } from "@chakra-ui/react";
+import type Big from "big.js";
+
+import { getUndefinedTokenIcon } from "../../../utils";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { TokenWithValue } from "lib/types";
+import type { PoolDetail } from "lib/types/pool";
+
+interface PoolLogoProps {
+  poolLiquidity: PoolDetail<Big, TokenWithValue>["poolLiquidity"];
+  assetInfos: AssetInfosOpt;
+}
+
+export const PoolLogo = ({ poolLiquidity, assetInfos }: PoolLogoProps) => {
+  return (
+    <Flex
+      css={{
+        "> img:not(:first-of-type), > div": {
+          marginLeft: "-12px",
+        },
+      }}
+      width="96px"
+      alignItems="center"
+      justifyContent="center"
+    >
+      {poolLiquidity.length > 3 ? (
+        <>
+          {poolLiquidity.slice(0, 2).map((asset, i) => (
+            <Image
+              key={`${asset.denom}-logo`}
+              boxSize={10}
+              src={
+                assetInfos?.[asset.denom]?.logo ??
+                getUndefinedTokenIcon(asset.denom)
+              }
+              zIndex={2 - i}
+            />
+          ))}
+          <Flex
+            width={10}
+            height={10}
+            borderRadius="full"
+            backgroundColor="pebble.700"
+            alignItems="center"
+            justifyContent="center"
+          >
+            +{poolLiquidity.length - 2}
+          </Flex>
+        </>
+      ) : (
+        poolLiquidity.map((item, i) => (
+          <Image
+            key={`${item.denom}-logo`}
+            boxSize={10}
+            src={
+              assetInfos?.[item.denom]?.logo ??
+              getUndefinedTokenIcon(item.denom)
+            }
+            zIndex={2 - i}
+          />
+        ))
+      )}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/header/index.tsx b/src/lib/pages/pools/components/pool-details/header/index.tsx
new file mode 100644
index 000000000..31408a12c
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/header/index.tsx
@@ -0,0 +1,56 @@
+import { Button, Flex } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
+import type Big from "big.js";
+
+import { getPoolUrl } from "lib/app-fns/explorer";
+import { useLCDEndpoint } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+import { openNewTab } from "lib/hooks";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { PoolDetail, TokenWithValue } from "lib/types";
+
+import { PoolHeader } from "./PoolHeader";
+import { PoolInfo } from "./PoolInfo";
+
+interface PoolTopSectionProps {
+  pool: PoolDetail<Big, TokenWithValue>;
+  assetInfos: AssetInfosOpt;
+}
+
+export const PoolTopSection = ({ pool, assetInfos }: PoolTopSectionProps) => {
+  const { currentChainName } = useWallet();
+  const lcdEndpoint = useLCDEndpoint();
+
+  const openPoolLcd = () =>
+    openNewTab(`${lcdEndpoint}/osmosis/gamm/v1beta1/pools/${pool.id}`);
+  const openOsmosisPool = () =>
+    openNewTab(`${getPoolUrl(currentChainName)}/${pool.id}`);
+  return (
+    <>
+      <Flex justifyContent="space-between" align="center" w="full">
+        <PoolHeader pool={pool} assetInfos={assetInfos} />
+        <Flex align="center" gap={2}>
+          <Button
+            variant="ghost-gray"
+            rightIcon={
+              <CustomIcon name="launch" boxSize={3} color="pebble.400" />
+            }
+            onClick={openPoolLcd}
+          >
+            View in JSON
+          </Button>
+          <Button
+            variant="outline-primary"
+            rightIcon={
+              <CustomIcon name="launch" boxSize={3} color="violet.light" />
+            }
+            onClick={openOsmosisPool}
+          >
+            View in Osmosis
+          </Button>
+        </Flex>
+      </Flex>
+      <PoolInfo pool={pool} />
+    </>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/pool-assets/index.tsx b/src/lib/pages/pools/components/pool-details/pool-assets/index.tsx
new file mode 100644
index 000000000..7cdf18fdc
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/pool-assets/index.tsx
@@ -0,0 +1,61 @@
+import { Flex, Heading, Badge, Text } from "@chakra-ui/react";
+import type { Big } from "big.js";
+import big from "big.js";
+import Link from "next/link";
+
+import { CustomIcon } from "lib/components/icon";
+import type { PoolDetail, TokenWithValue, USD } from "lib/types";
+import { formatPrice } from "lib/utils";
+
+import { PoolAssetsTable } from "./table";
+
+interface PoolAssetsProps {
+  pool: PoolDetail<Big, TokenWithValue>;
+}
+
+export const PoolAssets = ({ pool }: PoolAssetsProps) => {
+  const totalLiquidity = pool.poolLiquidity.reduce(
+    (totalVal, token) => totalVal.add(token.value ?? 0),
+    big(0)
+  ) as USD<Big>;
+  return (
+    <>
+      <Flex mt={12} mb={4} justifyContent="space-between" align="center">
+        <Flex gap={2} align="center">
+          <Heading as="h6" variant="h6">
+            Pool Assets
+          </Heading>
+          <Badge variant="gray" color="text.main" textColor="text.main">
+            {pool.poolLiquidity.length}
+          </Badge>
+        </Flex>
+        {pool.isSupported && (
+          <Text variant="body2" color="text.dark" fontWeight={500}>
+            Total Liquidity:
+            <Text as="span" fontWeight={700} color="text.main" ml={2}>
+              {formatPrice(totalLiquidity)}
+            </Text>
+          </Text>
+        )}
+      </Flex>
+      <PoolAssetsTable pool={pool} totalLiquidity={totalLiquidity} />
+      <Flex gap="2" alignItems="center">
+        <Text variant="body2" color="text.dark">
+          What is asset weight and allocation?
+        </Text>
+        <Link
+          href="https://docs.osmosis.zone/osmosis-core/modules/gamm#weights"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Flex gap="2px" alignItems="center">
+            <Text color="lilac.main" variant="body2">
+              Read more
+            </Text>
+            <CustomIcon name="launch" color="lilac.main" boxSize="3" />
+          </Flex>
+        </Link>
+      </Flex>
+    </>
+  );
+};
diff --git a/src/lib/pages/pools/components/table/PoolAssetsTableHeader.tsx b/src/lib/pages/pools/components/pool-details/pool-assets/table/PoolAssetsTableHeader.tsx
similarity index 60%
rename from src/lib/pages/pools/components/table/PoolAssetsTableHeader.tsx
rename to src/lib/pages/pools/components/pool-details/pool-assets/table/PoolAssetsTableHeader.tsx
index c79a16f4a..48d751563 100644
--- a/src/lib/pages/pools/components/table/PoolAssetsTableHeader.tsx
+++ b/src/lib/pages/pools/components/pool-details/pool-assets/table/PoolAssetsTableHeader.tsx
@@ -5,21 +5,26 @@ import { TableHeader } from "lib/components/table/tableComponents";
 import type { PoolDetail } from "lib/types";
 
 interface PoolHeaderProps {
-  pool_type: PoolDetail["type"];
+  poolType: PoolDetail["type"];
+  isSupported: PoolDetail["isSupported"];
   templateColumns: GridProps["templateColumns"];
 }
 
 export const PoolAssetsTableHeader = ({
-  pool_type,
+  poolType,
+  isSupported,
   templateColumns,
 }: PoolHeaderProps) => (
-  <Grid templateColumns={templateColumns}>
+  <Grid
+    templateColumns={templateColumns}
+    sx={{ "> div": { color: "text.dark" } }}
+  >
     <TableHeader>Asset</TableHeader>
 
     <TableHeader textAlign="right">
-      {pool_type === "Stableswap" ? "Scaling Factor" : "Weight (%)"}
+      {poolType === "Stableswap" ? "Scaling Factor" : "Weight (%)"}
     </TableHeader>
-    <TableHeader textAlign="right">Value Allocation</TableHeader>
+    <TableHeader textAlign="right">{isSupported && "Allocation"}</TableHeader>
     <TableHeader textAlign="right">Amount</TableHeader>
   </Grid>
 );
diff --git a/src/lib/pages/pools/components/pool-details/pool-assets/table/PoolAssetsTableRow.tsx b/src/lib/pages/pools/components/pool-details/pool-assets/table/PoolAssetsTableRow.tsx
new file mode 100644
index 000000000..94b27c6fd
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/pool-assets/table/PoolAssetsTableRow.tsx
@@ -0,0 +1,107 @@
+import type { GridProps } from "@chakra-ui/react";
+import { Flex, Grid, Image, Text } from "@chakra-ui/react";
+import type { Big } from "big.js";
+
+import { Copier } from "lib/components/copy";
+import { TableRow } from "lib/components/table/tableComponents";
+import { TooltipInfo } from "lib/components/TooltipComponent";
+import { getUndefinedTokenIcon } from "lib/pages/pools/utils";
+import type { USD, PoolDetail, TokenWithValue, Ratio } from "lib/types";
+import {
+  formatInteger,
+  formatPrice,
+  formatUTokenWithPrecision,
+  getTokenLabel,
+  formatRatio,
+} from "lib/utils";
+
+interface PoolAssetsTableRowProps {
+  pool: PoolDetail<Big, TokenWithValue>;
+  token: TokenWithValue;
+  templateColumns: GridProps["templateColumns"];
+  totalLiquidity: USD<Big>;
+  liquidityIndex: number;
+}
+
+export const PoolAssetsTableRow = ({
+  pool: { type: poolType, weight, scalingFactors, isSupported },
+  token,
+  templateColumns,
+  totalLiquidity,
+  liquidityIndex,
+}: PoolAssetsTableRowProps) => {
+  const allocation = token.value
+    ? formatRatio(token.value.div(totalLiquidity) as Ratio<Big>)
+    : undefined;
+  const tokenWeight = weight?.find(
+    (w) => w.denom === token.denom
+  )?.percentWeight;
+  const scalingFactor = scalingFactors
+    ? formatInteger(scalingFactors[liquidityIndex])
+    : undefined;
+  return (
+    <Grid templateColumns={templateColumns}>
+      <TableRow>
+        <Flex
+          alignItems="center"
+          gap={2}
+          _hover={{
+            "& .widget": { display: "flex" },
+          }}
+        >
+          <Image
+            boxSize={7}
+            src={token.logo ?? getUndefinedTokenIcon(token.denom)}
+          />
+          <Flex flexDirection="column">
+            <Flex align="center" gap={1}>
+              <Text variant="body2" fontWeight={600} color="text.main">
+                {token.symbol ?? getTokenLabel(token.denom)}
+              </Text>
+              <Flex className="widget" display="none" align="center" gap={1}>
+                <TooltipInfo
+                  label={`Token ID: ${token.denom}`}
+                  iconVariant="solid"
+                  className="copier"
+                />
+                <Copier
+                  type="token_denom"
+                  value={token.denom}
+                  copyLabel="Token ID Copied!"
+                  ml={0}
+                />
+              </Flex>
+            </Flex>
+            {isSupported && token.price && (
+              <Text variant="body3" color="text.dark">
+                {formatPrice(token.price)}
+              </Text>
+            )}
+          </Flex>
+        </Flex>
+      </TableRow>
+      <TableRow fontWeight={700} justifyContent="flex-end">
+        {poolType === "Stableswap" ? scalingFactor : tokenWeight}
+      </TableRow>
+      <TableRow fontWeight={700} justifyContent="flex-end">
+        {isSupported && allocation}
+      </TableRow>
+      <TableRow justifyContent="flex-end">
+        <Flex direction="column" textAlign="end">
+          <Text variant="body2" fontWeight={700} color="text.main">
+            {formatUTokenWithPrecision(
+              token.amount,
+              token.precision ?? 0,
+              false
+            )}
+          </Text>
+          {isSupported && token.value && (
+            <Text variant="body3" color="text.dark">
+              ({formatPrice(token.value)})
+            </Text>
+          )}
+        </Flex>
+      </TableRow>
+    </Grid>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/pool-assets/table/index.tsx b/src/lib/pages/pools/components/pool-details/pool-assets/table/index.tsx
new file mode 100644
index 000000000..497ecd9fa
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/pool-assets/table/index.tsx
@@ -0,0 +1,37 @@
+import type { Big } from "big.js";
+
+import { TableContainer } from "lib/components/table/tableComponents";
+import type { PoolDetail, TokenWithValue, USD } from "lib/types";
+
+import { PoolAssetsTableHeader } from "./PoolAssetsTableHeader";
+import { PoolAssetsTableRow } from "./PoolAssetsTableRow";
+
+interface PoolAssetsTableProps {
+  pool: PoolDetail<Big, TokenWithValue>;
+  totalLiquidity: USD<Big>;
+}
+
+const TEMPLATE_COLUMNS = "minmax(300px, 1fr) 144px 144px minmax(300px, 1fr)";
+
+export const PoolAssetsTable = ({
+  pool,
+  totalLiquidity,
+}: PoolAssetsTableProps) => (
+  <TableContainer>
+    <PoolAssetsTableHeader
+      templateColumns={TEMPLATE_COLUMNS}
+      poolType={pool.type}
+      isSupported={pool.isSupported}
+    />
+    {pool.poolLiquidity.map((token, idx) => (
+      <PoolAssetsTableRow
+        key={`${token.denom}-token-row`}
+        templateColumns={TEMPLATE_COLUMNS}
+        token={token}
+        pool={pool}
+        totalLiquidity={totalLiquidity}
+        liquidityIndex={idx}
+      />
+    ))}
+  </TableContainer>
+);
diff --git a/src/lib/pages/pools/components/PoolRelatedTxs.tsx b/src/lib/pages/pools/components/pool-details/table/PoolRelatedTxs.tsx
similarity index 100%
rename from src/lib/pages/pools/components/PoolRelatedTxs.tsx
rename to src/lib/pages/pools/components/pool-details/table/PoolRelatedTxs.tsx
diff --git a/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
index e9fa20151..f96ae6cec 100644
--- a/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
+++ b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
@@ -3,11 +3,11 @@ import type { Big } from "big.js";
 import big from "big.js";
 
 import { getUndefinedTokenIcon } from "../../utils";
-import type { Option, Token, U, USD } from "lib/types";
+import type { Option, Ratio, Token, U, USD } from "lib/types";
 import {
   getTokenLabel,
-  formatPercentValue,
   formatUTokenWithPrecision,
+  formatRatio,
 } from "lib/utils";
 
 interface AllocationBadgeProps {
@@ -31,8 +31,8 @@ export const AllocationBadge = ({
   liquidity,
   mode,
 }: AllocationBadgeProps) => {
-  const formattedValue = formatPercentValue(
-    (value ?? big(0)).div(liquidity).times(100)
+  const formattedValue = formatRatio(
+    (value ?? big(0)).div(liquidity) as Ratio<Big>
   );
   const formattedAmount = denom
     ? formatUTokenWithPrecision(amount, precision ?? 0)
diff --git a/src/lib/pages/pools/components/table/PoolAssetsTable.tsx b/src/lib/pages/pools/components/table/PoolAssetsTable.tsx
deleted file mode 100644
index 14cf0ac2f..000000000
--- a/src/lib/pages/pools/components/table/PoolAssetsTable.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import type { Big } from "big.js";
-
-import { TableContainer } from "lib/components/table/tableComponents";
-import type { PoolDetail, TokenWithValue, USD } from "lib/types";
-
-// import type { Option, Proposal } from "lib/types";
-import { PoolAssetsTableHeader } from "./PoolAssetsTableHeader";
-import { PoolAssetsTableRow } from "./PoolAssetsTableRow";
-// import { PoolAssetsTableRow } from "./PoolAssetsTableRow";
-
-interface PoolAssetsTableProps {
-  assets: TokenWithValue[];
-  pool_type: PoolDetail["type"];
-  // weight?: Option<PoolWeight[] | null>;
-  // scaling_factors?: Option<string[] | null>;
-  total_liquidity: USD<Big>;
-}
-
-export const PoolAssetsTable = ({
-  assets,
-  pool_type,
-  // weight,
-  // scaling_factors,
-  total_liquidity,
-}: PoolAssetsTableProps) => {
-  // if (isLoading) return <Loading />;
-  // if (!proposals?.length) return emptyState;
-
-  const templateColumns = "minmax(300px, 1fr) 144px 144px minmax(300px, 1fr)";
-
-  return (
-    <TableContainer>
-      <PoolAssetsTableHeader
-        templateColumns={templateColumns}
-        pool_type={pool_type}
-      />
-      {assets.map((asset) => (
-        <PoolAssetsTableRow
-          asset={asset}
-          total_liquidity={total_liquidity}
-          pool_type={pool_type}
-          key={asset.denom}
-          templateColumns={templateColumns}
-        />
-      ))}
-    </TableContainer>
-  );
-};
diff --git a/src/lib/pages/pools/components/table/PoolAssetsTableRow.tsx b/src/lib/pages/pools/components/table/PoolAssetsTableRow.tsx
deleted file mode 100644
index 2c3672375..000000000
--- a/src/lib/pages/pools/components/table/PoolAssetsTableRow.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import type { GridProps } from "@chakra-ui/react";
-import { Flex, Skeleton, Grid, Image, Text } from "@chakra-ui/react";
-import type { Big } from "big.js";
-
-import { getUndefinedTokenIcon } from "../../utils";
-import { TableRow } from "lib/components/table/tableComponents";
-import { useAssetInfos } from "lib/services/assetService";
-import type { USD, PoolDetail, TokenWithValue } from "lib/types";
-import {
-  d2Formatter,
-  formatPrice,
-  formatUTokenWithPrecision,
-  getTokenLabel,
-} from "lib/utils";
-
-interface PoolAssetsTableRowProps {
-  pool_type: PoolDetail["type"];
-  asset: TokenWithValue;
-  templateColumns: GridProps["templateColumns"];
-  total_liquidity: USD<Big>;
-}
-
-export const PoolAssetsTableRow = ({
-  pool_type,
-  asset,
-  templateColumns,
-  total_liquidity,
-}: PoolAssetsTableRowProps) => {
-  const { assetInfos } = useAssetInfos();
-  if (!assetInfos)
-    return (
-      <Skeleton height="75px" startColor="pebble.900" endColor="pebble.800" />
-    );
-  const assetInfo = assetInfos[asset.denom];
-
-  return (
-    <Grid templateColumns={templateColumns}>
-      <TableRow>
-        <Flex alignItems="center" gap={2}>
-          <Image
-            boxSize={7}
-            src={asset.logo || getUndefinedTokenIcon(asset.denom)}
-          />
-          <Flex flexDirection="column">
-            <Text variant="body2" fontWeight="600" color="text.main">
-              {asset.symbol || getTokenLabel(asset.denom)}
-            </Text>
-            <Text variant="body3" color="text.dark">
-              {formatPrice(assetInfo.price as USD<number>)}
-            </Text>
-          </Flex>
-        </Flex>
-      </TableRow>
-      <TableRow>
-        {pool_type === "Stableswap" ? (
-          <Flex justifyContent="right" w="full">
-            stable scaling
-          </Flex>
-        ) : (
-          <Flex justifyContent="right" w="full">
-            balancer weight
-          </Flex>
-        )}
-      </TableRow>
-
-      <TableRow>
-        <Flex justifyContent="right" w="full">
-          {d2Formatter(total_liquidity, "0.00")}
-        </Flex>
-      </TableRow>
-      <TableRow>
-        <Flex alignItems="flex-end" w="full" flexDirection="column">
-          <Text variant="body2" fontWeight="600" color="text.main">
-            {formatUTokenWithPrecision(
-              asset.amount,
-              assetInfo.precision,
-              false
-            )}
-          </Text>
-          <Text variant="body3" color="text.dark">
-            {asset.value?.toString() ?? 0}
-          </Text>
-        </Flex>
-      </TableRow>
-    </Grid>
-  );
-};
diff --git a/src/lib/pages/pools/data.ts b/src/lib/pages/pools/data.ts
index fa68acf04..ec14f8dc1 100644
--- a/src/lib/pages/pools/data.ts
+++ b/src/lib/pages/pools/data.ts
@@ -10,9 +10,10 @@ import type {
   PoolDetail,
   PoolTypeFilter,
   PoolWeight,
+  Ratio,
   TokenWithValue,
 } from "lib/types";
-import { coinToTokenWithValue } from "lib/utils";
+import { coinToTokenWithValue, formatRatio } from "lib/utils";
 
 export const usePools = (
   isSupported: boolean,
@@ -50,7 +51,7 @@ export const usePools = (
 };
 
 export const usePool = (
-  poolId: number
+  poolId: Option<number>
 ): { pool: Option<PoolDetail<Big, TokenWithValue>>; isLoading: boolean } => {
   const { assetInfos, isLoading: isLoadingAssetInfos } = useAssetInfos();
   const { data: pool, isLoading: isLoadingPoolInfo } = usePoolByPoolId(poolId);
@@ -60,7 +61,10 @@ export const usePool = (
       pool: undefined,
       isLoading: isLoadingAssetInfos || isLoadingPoolInfo,
     };
-
+  const totalPoolWeight = pool.weight?.reduce(
+    (acc, curr) => acc.add(curr.weight),
+    big(0)
+  );
   return {
     pool: {
       id: pool.id,
@@ -77,10 +81,17 @@ export const usePool = (
       exitFee: pool.exitFee,
       futurePoolGovernor: pool.futurePoolGovernor,
       weight:
-        pool.weight?.map<PoolWeight>((weight) => ({
-          denom: weight.denom,
-          weight: big(weight.weight),
-        })) ?? null,
+        pool.weight?.map<PoolWeight<Big>>((weight) => {
+          const bigWeight = big(weight.weight);
+          return {
+            denom: weight.denom,
+            weight: bigWeight,
+            percentWeight:
+              totalPoolWeight && totalPoolWeight.gt(0)
+                ? formatRatio(bigWeight.div(totalPoolWeight) as Ratio<Big>)
+                : null,
+          };
+        }) ?? null,
       smoothWeightChangeParams: pool.smoothWeightChangeParams,
       scalingFactors: pool.scalingFactors,
       scalingFactorController: pool.scalingFactorController,
diff --git a/src/lib/pages/pools/poolId.tsx b/src/lib/pages/pools/poolId.tsx
index 242e8df49..ae1c49d5b 100644
--- a/src/lib/pages/pools/poolId.tsx
+++ b/src/lib/pages/pools/poolId.tsx
@@ -1,46 +1,32 @@
 import { useRouter } from "next/router";
 
+import { useInternalNavigate } from "lib/app-provider";
+import { BackButton } from "lib/components/button";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
-import { EmptyState } from "lib/components/state";
-import type { Option, PoolDetail } from "lib/types";
+import { useAssetInfos } from "lib/services/assetService";
 import { getFirstQueryParam } from "lib/utils";
 
-import { PoolAssetDetail } from "./components/PoolAssetDetail";
-import { PoolDetailHeader } from "./components/PoolDetailHeader";
-import { PoolRelatedTxs } from "./components/PoolRelatedTxs";
+import { PoolTopSection } from "./components/pool-details/header";
+import { PoolAssets } from "./components/pool-details/pool-assets";
+import { PoolRelatedTxs } from "./components/pool-details/table/PoolRelatedTxs";
 import { usePool } from "./data";
 
-interface PoolIdBodyProps {
-  pool: Option<PoolDetail>;
-  isLoading: boolean;
-}
-const PoolIdBody = ({ pool, isLoading }: PoolIdBodyProps) => {
-  if (isLoading) return <Loading />;
-  if (!pool)
-    return <EmptyState message="Pool Not Found." imageVariant="not-found" />;
-  return (
-    <>
-      <PoolDetailHeader pool={pool} />
-      <PoolAssetDetail
-        assets={pool.poolLiquidity}
-        pool_type={pool.type}
-        // weight={pool.weight}
-        // scaling_factors={pool.scaling_factors}
-      />
-      <PoolRelatedTxs />
-    </>
-  );
-};
-
 export const PoolId = () => {
   const router = useRouter();
-  const poolIdParam = getFirstQueryParam(router.query.poolId);
+  const navigate = useInternalNavigate();
+  const { assetInfos } = useAssetInfos();
+  const poolId = Number(getFirstQueryParam(router.query.poolId));
+  const { pool, isLoading } = usePool(poolId);
 
-  const { pool, isLoading } = usePool(Number(poolIdParam));
+  if (isLoading) return <Loading />;
+  if (!pool) return navigate({ pathname: `/pool` });
   return (
     <PageContainer>
-      <PoolIdBody pool={pool} isLoading={isLoading} />
+      <BackButton />
+      <PoolTopSection pool={pool} assetInfos={assetInfos} />
+      <PoolAssets pool={pool} />
+      <PoolRelatedTxs />
     </PageContainer>
   );
 };
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index 340275e16..bafb242b1 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -12,7 +12,7 @@ import {
   getPoolListByDenomsCount,
   getPoolListCount,
 } from "lib/query";
-import type { Pool, PoolDetail, PoolTypeFilter } from "lib/types";
+import type { Option, Pool, PoolDetail, PoolTypeFilter } from "lib/types";
 import { isPositiveInt } from "lib/utils";
 
 import { usePoolExpression } from "./expression/poolExpression";
@@ -133,11 +133,12 @@ export const usePoolListCountQuery = ({
 };
 
 export const usePoolByPoolId = (
-  poolId: number
+  poolId: Option<number>
 ): UseQueryResult<PoolDetail<string, Coin>> => {
   const { indexerGraphClient } = useCelatoneApp();
 
   const queryFn = useCallback(async () => {
+    if (!poolId) throw new Error("Pool ID is undefined.");
     return indexerGraphClient
       .request(getPoolByPoolId, {
         poolId,
@@ -165,5 +166,7 @@ export const usePoolByPoolId = (
       );
   }, [poolId, indexerGraphClient]);
 
-  return useQuery(["pool_by_pool_id", poolId, indexerGraphClient], queryFn);
+  return useQuery(["pool_by_pool_id", poolId, indexerGraphClient], queryFn, {
+    enabled: Boolean(poolId),
+  });
 };
diff --git a/src/lib/types/asset.ts b/src/lib/types/asset.ts
index 352ec6411..080ba86db 100644
--- a/src/lib/types/asset.ts
+++ b/src/lib/types/asset.ts
@@ -8,5 +8,6 @@ export interface TokenWithValue {
   symbol: Option<string>;
   logo: Option<string>;
   precision: Option<number>;
+  price?: Option<USD>;
   value: Option<USD<Big>>;
 }
diff --git a/src/lib/types/currency/token.ts b/src/lib/types/currency/token.ts
index 031fcdcdd..8c7649382 100644
--- a/src/lib/types/currency/token.ts
+++ b/src/lib/types/currency/token.ts
@@ -10,6 +10,11 @@ export type Token<T = string> = T & NominalType<string>;
 
 export type USD<T = string> = T & NominalType<"usd">;
 
+// Percentage
+export type Ratio<T = string> = T & NominalType<"ratio">;
+
+export type Percent<T = string> = T & NominalType<"percent">;
+
 export interface ChainGasPrice {
   denom: string;
   gasPrice: U<Token>;
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index 31a1868e3..63bc7243c 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -1,13 +1,20 @@
 import type { Coin } from "@cosmjs/stargate";
 import type { Big } from "big.js";
 
-import type { Addr, ContractAddr, Option, TokenWithValue } from "lib/types";
+import type {
+  Addr,
+  ContractAddr,
+  Option,
+  Ratio,
+  TokenWithValue,
+} from "lib/types";
 
 export type PoolTypeFilter = "All" | "Balancer" | "Stableswap";
 
 export interface PoolWeight<T extends string | Big = Big> {
   denom: string;
   weight: T;
+  percentWeight: string | null;
 }
 
 export interface Pool<
@@ -27,8 +34,8 @@ export interface PoolDetail<
   blockHeight: Option<number>;
   creator: Option<Addr>;
   poolAddress: ContractAddr;
-  swapFee: number;
-  exitFee: number;
+  swapFee: Ratio<number>;
+  exitFee: Ratio<number>;
   futurePoolGovernor: string | null;
   smoothWeightChangeParams: object | null;
   scalingFactors: string[] | null;
diff --git a/src/lib/utils/assetValue.ts b/src/lib/utils/assetValue.ts
index 78a923f53..93b84aab4 100644
--- a/src/lib/utils/assetValue.ts
+++ b/src/lib/utils/assetValue.ts
@@ -48,6 +48,7 @@ export const coinToTokenWithValue = (
     symbol: assetInfo?.symbol,
     logo: assetInfo?.logo,
     precision: assetInfo?.precision,
+    price: assetInfo ? (big(assetInfo.price).toFixed() as USD) : undefined,
     value: assetInfo
       ? calculateAssetValue(
           toToken(tokenAmount, assetInfo.precision),
diff --git a/src/lib/utils/formatter/formatPercentValue.ts b/src/lib/utils/formatter/formatPercentValue.ts
deleted file mode 100644
index 2de27290c..000000000
--- a/src/lib/utils/formatter/formatPercentValue.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Big } from "big.js";
-import big from "big.js";
-
-import { d2Formatter, d6Formatter } from "./token";
-
-export const formatPercentValue = (value: Big): string => {
-  const x = big(value);
-  const lowestThreshold = 0.000001;
-
-  const d2 = d2Formatter(x, "0.00");
-  const d6 = d6Formatter(x, "0.00");
-
-  if (x.eq(0) || x.gte(1)) {
-    return `${d2}%`;
-  }
-
-  if (x.lt(lowestThreshold)) {
-    return `<${lowestThreshold}%`;
-  }
-  return `${d6}%`;
-};
diff --git a/src/lib/utils/formatter/index.ts b/src/lib/utils/formatter/index.ts
index 9bce96c57..31c589ba3 100644
--- a/src/lib/utils/formatter/index.ts
+++ b/src/lib/utils/formatter/index.ts
@@ -5,7 +5,7 @@ export * from "./convertTitle";
 export * from "./camelToSnake";
 export * from "./snakeToCamel";
 export * from "./formatBalanceWithDenom";
-export * from "./formatPercentValue";
+export * from "./percentage";
 export * from "./tokenType";
 export * from "./token";
 export * from "./text";
diff --git a/src/lib/utils/formatter/percentage.ts b/src/lib/utils/formatter/percentage.ts
new file mode 100644
index 000000000..0b1e99fde
--- /dev/null
+++ b/src/lib/utils/formatter/percentage.ts
@@ -0,0 +1,31 @@
+import type { Big, BigSource } from "big.js";
+import big from "big.js";
+
+import type { Percent, Ratio } from "lib/types";
+
+import { d2Formatter, d6Formatter } from "./token";
+
+export const formatPercent = (value: Percent<BigSource>): string => {
+  const x = big(value);
+  const lowestThreshold = 0.000001;
+
+  const d2 = d2Formatter(x, "0.00");
+  const d6 = d6Formatter(x, "0.00");
+
+  if (x.eq(0) || x.gte(1)) {
+    return `${d2}%`;
+  }
+
+  if (x.lt(lowestThreshold)) {
+    return `<${lowestThreshold}%`;
+  }
+  return `${d6}%`;
+};
+
+/**
+ * @param ratio
+ * @returns formatted percentage string
+ * @description Use this function to format ratio (e.g. 0.55, 0.14789) to percentage string (e.g. 55.55%, 0.123456%)
+ */
+export const formatRatio = (ratio: Ratio<BigSource>): string =>
+  formatPercent(big(ratio).times(100) as Percent<Big>);

From da9c484c2372bd3d04a84e50d10cfb5ea4331fd4 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 9 May 2023 16:43:12 +0700
Subject: [PATCH 080/354] fix: import spacing

---
 src/lib/components/LabelText.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/LabelText.tsx b/src/lib/components/LabelText.tsx
index c74fe36d8..109dde2e0 100644
--- a/src/lib/components/LabelText.tsx
+++ b/src/lib/components/LabelText.tsx
@@ -2,6 +2,7 @@ import type { FlexProps } from "@chakra-ui/react";
 import { Flex, Text } from "@chakra-ui/react";
 
 import { TooltipInfo } from "./TooltipComponent";
+
 interface LabelTextProps extends FlexProps {
   label: string;
   tooltipText?: string;

From 864e8258682a299f5ccaa96f12bda9e29833cbd2 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 9 May 2023 18:05:53 +0700
Subject: [PATCH 081/354] fix: remove superfluid table for non super pools

---
 .../pool-details/PoolRelatedTxs.tsx           | 28 ++++++++++++-------
 src/lib/pages/pools/poolId.tsx                |  2 +-
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
index 988081e48..482607ac2 100644
--- a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
+++ b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
@@ -15,9 +15,13 @@ import { PoolRelatedTxsTable } from "./tables/pool-txs";
 
 interface PoolRelatedTxsProps {
   poolId: number;
+  isSuperfluid: boolean;
 }
 
-export const PoolRelatedTxs = ({ poolId }: PoolRelatedTxsProps) => {
+export const PoolRelatedTxs = ({
+  poolId,
+  isSuperfluid,
+}: PoolRelatedTxsProps) => {
   const { count: countAllTxs, countDisplay: countDisplayAllTxs } =
     usePoolTxsCount(poolId, "is_all");
   const { count: countSwapTxs, countDisplay: countDisplaySwapTxs } =
@@ -48,7 +52,9 @@ export const PoolRelatedTxs = ({ poolId }: PoolRelatedTxsProps) => {
           <CustomTab count={countDisplaySwapTxs}>Swap</CustomTab>
           <CustomTab count={countDisplayLpTxs}>LP</CustomTab>
           <CustomTab count={countDisplayBondTxs}>Bonding</CustomTab>
-          <CustomTab count={countDisplaySuperfluidTxs}>Superfluid</CustomTab>
+          {isSuperfluid && (
+            <CustomTab count={countDisplaySuperfluidTxs}>Superfluid</CustomTab>
+          )}
         </TabList>
         <TabPanels>
           <TabPanel p={0}>
@@ -83,14 +89,16 @@ export const PoolRelatedTxs = ({ poolId }: PoolRelatedTxsProps) => {
               scrollComponentId={tableHeaderId}
             />
           </TabPanel>
-          <TabPanel p={0}>
-            <PoolRelatedTxsTable
-              poolId={poolId}
-              countTxs={countSuperfluidTxs}
-              type="is_superfluid"
-              scrollComponentId={tableHeaderId}
-            />
-          </TabPanel>
+          {isSuperfluid && (
+            <TabPanel p={0}>
+              <PoolRelatedTxsTable
+                poolId={poolId}
+                countTxs={countSuperfluidTxs}
+                type="is_superfluid"
+                scrollComponentId={tableHeaderId}
+              />
+            </TabPanel>
+          )}
         </TabPanels>
       </Tabs>
     </Box>
diff --git a/src/lib/pages/pools/poolId.tsx b/src/lib/pages/pools/poolId.tsx
index de99b28ed..c434531e4 100644
--- a/src/lib/pages/pools/poolId.tsx
+++ b/src/lib/pages/pools/poolId.tsx
@@ -28,7 +28,7 @@ export const PoolId = () => {
       <BackButton />
       <PoolTopSection pool={pool} assetInfos={assetInfos} />
       <PoolAssets pool={pool} />
-      <PoolRelatedTxs poolId={pool.id} />
+      <PoolRelatedTxs poolId={pool.id} isSuperfluid={pool.isSuperfluid} />
     </PageContainer>
   );
 };

From b000b60897edb3dfb3292ce4dddb003a363bdaa0 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 10 May 2023 10:03:33 +0700
Subject: [PATCH 082/354] feat: add amplitude to proposal to store code page

---
 src/lib/components/ConnectWalletAlert.tsx     |  6 ++-
 src/lib/components/StickySidebar.tsx          | 25 +++++++++---
 .../upload/InstantiatePermissionRadio.tsx     | 22 +++++++++-
 src/lib/pages/proposal/constants.tsx          | 16 +++++++-
 src/lib/pages/proposal/store-code/index.tsx   | 33 +++++++++++++--
 src/lib/services/amplitude.tsx                | 40 ++++++++++++++++++-
 6 files changed, 127 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/ConnectWalletAlert.tsx b/src/lib/components/ConnectWalletAlert.tsx
index a52ac6d89..eaee57c51 100644
--- a/src/lib/components/ConnectWalletAlert.tsx
+++ b/src/lib/components/ConnectWalletAlert.tsx
@@ -11,24 +11,26 @@ import type { AlertProps } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import type { MouseEventHandler } from "react";
 
-import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import { AmpTrackUseClickWallet } from "lib/services/amplitude";
 
 import { CustomIcon } from "./icon";
 
 interface ConnectWalletAlertProps extends AlertProps {
   title?: string;
   subtitle?: string;
+  page?: string;
 }
 
 export const ConnectWalletAlert = ({
   title,
   subtitle,
+  page,
   ...alertProps
 }: ConnectWalletAlertProps) => {
   const { address, connect } = useWallet();
 
   const onClickConnect: MouseEventHandler = async (e) => {
-    AmpTrack(AmpEvent.USE_CLICK_WALLET);
+    AmpTrackUseClickWallet(page, "alert");
     e.preventDefault();
     await connect();
   };
diff --git a/src/lib/components/StickySidebar.tsx b/src/lib/components/StickySidebar.tsx
index 033efdb44..7af79ba7a 100644
--- a/src/lib/components/StickySidebar.tsx
+++ b/src/lib/components/StickySidebar.tsx
@@ -17,10 +17,12 @@ import {
 } from "lib/app-provider";
 import type { Network } from "lib/data";
 import { getChainNameByNetwork } from "lib/data";
+import { AmpTrackUseRightHelperPanel } from "lib/services/amplitude";
 
 import { CustomIcon } from "./icon";
 
 export interface SidebarMetadata {
+  page: string;
   title: string;
   description: React.ReactElement;
   toNetwork?: boolean;
@@ -70,8 +72,15 @@ export const StickySidebar = ({
   const selectChain = useSelectChain();
   const { isMainnet } = useCurrentNetwork();
   const { network } = useCurrentNetwork();
-  const { title, description, toNetwork, toPagePath, toPageTitle, toPage } =
-    metadata[network];
+  const {
+    title,
+    description,
+    toNetwork,
+    toPagePath,
+    toPageTitle,
+    toPage,
+    page,
+  } = metadata[network];
   const hasAction = toPage;
   return (
     <Box flex="4" px={8} position="relative" {...boxProps}>
@@ -105,17 +114,21 @@ export const StickySidebar = ({
               </Text>
               {toNetwork && (
                 <ToPage
-                  onClick={() =>
+                  onClick={() => {
+                    AmpTrackUseRightHelperPanel(page, "change-network");
                     selectChain(
                       getChainNameByNetwork(isMainnet ? "testnet" : "mainnet")
-                    )
-                  }
+                    );
+                  }}
                   title={isMainnet ? "Switch To Testnet" : "Switch To Mainnet"}
                 />
               )}
               {toPage && toPagePath && toPageTitle && (
                 <ToPage
-                  onClick={() => navigate({ pathname: toPagePath })}
+                  onClick={() => {
+                    AmpTrackUseRightHelperPanel(page, `to-${toPagePath}`);
+                    navigate({ pathname: toPagePath });
+                  }}
                   title={toPageTitle}
                 />
               )}
diff --git a/src/lib/components/upload/InstantiatePermissionRadio.tsx b/src/lib/components/upload/InstantiatePermissionRadio.tsx
index b7ddbd780..4796d403d 100644
--- a/src/lib/components/upload/InstantiatePermissionRadio.tsx
+++ b/src/lib/components/upload/InstantiatePermissionRadio.tsx
@@ -1,12 +1,17 @@
 import { Text, Box, Radio, RadioGroup, Button, Flex } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
+import { useEffect } from "react";
 import type { Control, UseFormSetValue, UseFormTrigger } from "react-hook-form";
 import { useController, useFieldArray, useWatch } from "react-hook-form";
 
 import { AddressInput } from "../AddressInput";
 import { AssignMe } from "../AssignMe";
 import { CustomIcon } from "lib/components/icon";
-import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import {
+  AmpEvent,
+  AmpTrack,
+  AmpTrackUseInstantiatePermission,
+} from "lib/services/amplitude";
 import type { Addr, UploadSectionState } from "lib/types";
 import { AccessType } from "lib/types";
 
@@ -14,6 +19,7 @@ interface InstantiatePermissionRadioProps {
   control: Control<UploadSectionState>;
   setValue: UseFormSetValue<UploadSectionState>;
   trigger: UseFormTrigger<UploadSectionState>;
+  page?: string;
 }
 
 interface PermissionRadioProps {
@@ -32,6 +38,7 @@ export const InstantiatePermissionRadio = ({
   control,
   setValue,
   trigger,
+  page,
 }: InstantiatePermissionRadioProps) => {
   const { address: walletAddress } = useWallet();
 
@@ -52,6 +59,19 @@ export const InstantiatePermissionRadio = ({
     name: "addresses",
   });
 
+  useEffect(() => {
+    const emptyAddressesLength = addresses.filter(
+      (addr) => addr.address.trim().length === 0
+    ).length;
+    if (page)
+      AmpTrackUseInstantiatePermission(
+        page,
+        permission,
+        emptyAddressesLength,
+        addresses.length - emptyAddressesLength
+      );
+  }, [addresses, append, page, permission, remove]);
+
   return (
     <RadioGroup
       name="instantiatePermission"
diff --git a/src/lib/pages/proposal/constants.tsx b/src/lib/pages/proposal/constants.tsx
index 6a9099bdd..0f37e7048 100644
--- a/src/lib/pages/proposal/constants.tsx
+++ b/src/lib/pages/proposal/constants.tsx
@@ -1,9 +1,12 @@
 import Link from "next/link";
 
 import type { SidebarDetails } from "lib/components/StickySidebar";
+import { AmpTrackUseRightHelperPanel } from "lib/services/amplitude";
 
+const whitelistPage = "proposal-whitelist";
 export const SIDEBAR_WHITELIST_DETAILS: SidebarDetails = {
   mainnet: {
+    page: whitelistPage,
     title: "What is whitelisted address?",
     description: (
       <span>
@@ -24,6 +27,7 @@ export const SIDEBAR_WHITELIST_DETAILS: SidebarDetails = {
     toPageTitle: "Submit Proposal To Store Code",
   },
   testnet: {
+    page: whitelistPage,
     title: "Do I need to open proposal to whitelisting in testnet?",
     description: (
       <span>
@@ -40,13 +44,16 @@ export const SIDEBAR_WHITELIST_DETAILS: SidebarDetails = {
   },
   // TODO: fill localnet information
   localnet: {
+    page: whitelistPage,
     title: "",
     description: <span />,
   },
 };
 
+const storeCodePage = "proposal-store-code";
 export const SIDEBAR_STORE_CODE_DETAILS: SidebarDetails = {
   mainnet: {
+    page: storeCodePage,
     title: "Why do I need to submit proposal?",
     description: (
       <span>
@@ -64,12 +71,18 @@ export const SIDEBAR_STORE_CODE_DETAILS: SidebarDetails = {
     toNetwork: true,
   },
   testnet: {
+    page: storeCodePage,
     title: "Do I need to submit Proposal to store code in testnet?",
     description: (
       <span>
         On the Osmosis testnet, you can store code without submitting a proposal
         by using
-        <Link href="/deploy">
+        <Link
+          href="/deploy"
+          onClick={() =>
+            AmpTrackUseRightHelperPanel(storeCodePage, "to-/deploy")
+          }
+        >
           {" "}
           <span style={{ color: "#D8BEFC" }}>Deploy Contract</span>
         </Link>
@@ -89,6 +102,7 @@ export const SIDEBAR_STORE_CODE_DETAILS: SidebarDetails = {
   },
   // TODO: fill localnet information
   localnet: {
+    page: storeCodePage,
     title: "",
     description: <span />,
   },
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index 6957e3e65..12fdf4634 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -12,6 +12,7 @@ import {
 import { Sha256 } from "@cosmjs/crypto";
 import type { Coin, StdFee } from "@cosmjs/stargate";
 import { useWallet } from "@cosmos-kit/react";
+import { useRouter } from "next/router";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 
@@ -46,7 +47,12 @@ import {
   MAX_PROPOSAL_TITLE_LENGTH,
 } from "lib/data";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
-import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import {
+  AmpEvent,
+  AmpTrack,
+  AmpTrackUseDepositFill,
+  AmpTrackUseUnpin,
+} from "lib/services/amplitude";
 import { useGovParams } from "lib/services/proposalService";
 import type {
   Addr,
@@ -79,7 +85,6 @@ const defaultValues: StoreCodeProposalState = {
   codeHash: "",
 };
 
-// TODO - add amp track
 const StoreCodeProposal = () => {
   const {
     appHumanAddress: { example: exampleHumanAddress },
@@ -137,6 +142,12 @@ const StoreCodeProposal = () => {
   } = watch();
   const { wasmFile, permission, addresses } = uploadSectionWatch();
 
+  // Amp
+  const router = useRouter();
+  useEffect(() => {
+    if (router.isReady) AmpTrack(AmpEvent.TO_PROPOSAL_TO_STORE_CODE);
+  }, [router.isReady]);
+
   const { variant, description, icon } = getAlert(
     initialDeposit.amount,
     minDeposit?.formattedAmount,
@@ -251,6 +262,12 @@ const StoreCodeProposal = () => {
 
   const proceed = useCallback(async () => {
     if (!wasmFile) return null;
+
+    AmpTrack(AmpEvent.USE_SUBMIT_PROPOSAL, {
+      addressesCount: addresses.length,
+      permission: AccessType[permission],
+    });
+
     const submitStoreCodeProposalMsg = async () => {
       return composeStoreCodeProposalMsg({
         proposer: walletAddress as HumanAddr,
@@ -304,6 +321,8 @@ const StoreCodeProposal = () => {
     wasmFile,
   ]);
 
+  const page = "proposal-store-code";
+
   return (
     <>
       <PageContainer>
@@ -437,7 +456,10 @@ const StoreCodeProposal = () => {
                 {/* Unpin code  */}
                 <Flex direction="row" alignItems="center" gap={1}>
                   <Checkbox
-                    onChange={(e) => setValue("unpinCode", e.target.checked)}
+                    onChange={(e) => {
+                      AmpTrackUseUnpin(page, e.target.checked);
+                      setValue("unpinCode", e.target.checked);
+                    }}
                   >
                     {PROPOSAL_STORE_CODE_TEXT.unpinLabel}
                   </Checkbox>
@@ -501,6 +523,7 @@ const StoreCodeProposal = () => {
                   control={uploadSectionControl}
                   setValue={uploadSectionSetValue}
                   trigger={uploadSectionTrigger}
+                  page={page}
                 />
 
                 {/* Deposit  */}
@@ -531,6 +554,10 @@ const StoreCodeProposal = () => {
                         color="honeydew.main"
                         onClick={() => {
                           if (!minDeposit) return;
+                          AmpTrackUseDepositFill(
+                            page,
+                            minDeposit.formattedAmount
+                          );
                           setValue(
                             "initialDeposit.amount",
                             minDeposit.formattedAmount
diff --git a/src/lib/services/amplitude.tsx b/src/lib/services/amplitude.tsx
index abb845856..0b23ad24d 100644
--- a/src/lib/services/amplitude.tsx
+++ b/src/lib/services/amplitude.tsx
@@ -1,7 +1,8 @@
 import { track } from "@amplitude/analytics-browser";
 
 import type { AttachFundsType } from "lib/components/fund/types";
-import type { Option } from "lib/types";
+import type { Option, Token } from "lib/types";
+import { AccessType } from "lib/types";
 
 export enum AmpEvent {
   INVALID_STATE = "To Invalid State",
@@ -54,6 +55,7 @@ export enum AmpEvent {
   TO_TRANSACTION_DETAIL = "To Transaction Detail",
   TO_NOT_FOUND = "To 404 Not Found",
   TO_FAUCET = "To Faucet",
+  TO_PROPOSAL_TO_STORE_CODE = "To Proposal To Store Code",
   // ACTIONS
   ACTION_UPLOAD = "Act Upload",
   ACTION_INSTANTIATE = "Action Instantiate",
@@ -96,6 +98,11 @@ export enum AmpEvent {
   USE_UNSUPPORTED_ASSETS = "Use Unsupported Assets",
   USE_TX_MSG_EXPAND = "Use Transaction Message Expand",
   USE_EXPAND = "Use General Expand",
+  USE_RIGHT_HELPER_PANEL = "Use Right Helper Panel", // Sticky panel
+  USE_UNPIN = "Use Unpin",
+  USE_INSTANTIATE_PERMISSION = "Use Instantiate Permission",
+  USE_DEPOSIT_FILL = "Use Deposit Fill",
+  USE_SUBMIT_PROPOSAL = "Use Submit Proposal",
   // TX
   TX_SUCCEED = "Tx Succeed",
   TX_FAILED = "Tx Failed",
@@ -131,7 +138,11 @@ type SpecialAmpEvent =
   | AmpEvent.USE_VIEW_JSON
   | AmpEvent.USE_UNSUPPORTED_ASSETS
   | AmpEvent.USE_COPIER
-  | AmpEvent.USE_EXPAND;
+  | AmpEvent.USE_EXPAND
+  | AmpEvent.USE_RIGHT_HELPER_PANEL
+  | AmpEvent.USE_UNPIN
+  | AmpEvent.USE_INSTANTIATE_PERMISSION
+  | AmpEvent.USE_DEPOSIT_FILL;
 
 export const AmpTrackInvalidState = (title: string) =>
   track(AmpEvent.INVALID_STATE, { title });
@@ -199,3 +210,28 @@ export const AmpTrackExpand = (
   component: "assets" | "json" | "permission_address" | "event_box",
   section: Option<string>
 ) => track(AmpEvent.USE_EXPAND, { action, component, section });
+
+export const AmpTrackUseClickWallet = (page?: string, component?: string) =>
+  track(AmpEvent.USE_CLICK_WALLET, { page, component });
+
+export const AmpTrackUseRightHelperPanel = (page: string, action: string) =>
+  track(AmpEvent.USE_RIGHT_HELPER_PANEL, { page, action });
+
+export const AmpTrackUseUnpin = (page: string, check: boolean) =>
+  track(AmpEvent.USE_UNPIN, { page, check });
+
+export const AmpTrackUseInstantiatePermission = (
+  page: string,
+  type: AccessType,
+  emptyAddressesLength: number,
+  addressesLength: number
+) =>
+  track(AmpEvent.USE_INSTANTIATE_PERMISSION, {
+    page,
+    type: AccessType[type],
+    emptyAddressesLength,
+    addressesLength,
+  });
+
+export const AmpTrackUseDepositFill = (page: string, amount: Token) =>
+  track(AmpEvent.USE_DEPOSIT_FILL, { page, amount });

From 0140fa3f6a5de29ad8cac327dfd56cc0f4a437eb Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 10 May 2023 10:59:54 +0700
Subject: [PATCH 083/354] chore: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 38f7d614c..95beeeee7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#321](https://github.com/alleslabs/celatone-frontend/pull/321) Add amplitude to proposal to store code page
 - [#274](https://github.com/alleslabs/celatone-frontend/pull/274) Add proposal to store code page
 - [#279](https://github.com/alleslabs/celatone-frontend/pull/279) Add instantiate permission to msg store code, change error display design, and upgrade cosmjs to version 0.30.1
 

From 6568237bbabb970a6a3886639f168074f0e71c74 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 10 May 2023 11:28:26 +0700
Subject: [PATCH 084/354] fix: rename and structure

---
 src/lib/components/action-msg/MsgToken.tsx    |   4 +-
 .../tables/pool-txs/PoolTxsMsg.tsx            | 129 +++++++++++++++++
 .../tables/pool-txs/PoolTxsTable.tsx          |   4 +-
 .../tables/pool-txs/PoolTxsTableMultiRow.tsx  |  29 ----
 .../tables/pool-txs/PoolTxsTableRow.tsx       | 130 ++----------------
 .../tables/pool-txs/messages/index.tsx        |  16 +--
 .../swap/MsgSwapExactAmountInAction.tsx       |   4 +-
 .../swap/MsgSwapExactAmountInDetail.tsx       |   3 +-
 .../swap/MsgSwapExactAmountOutAction.tsx      |   4 +-
 .../swap/MsgSwapExactAmountOutDetail.tsx      |   3 +-
 .../swap/{ => components}/PoolRoute.tsx       |   0
 .../swap/{ => components}/PoolSwap.tsx        |   2 +-
 .../messages/swap/components/index.ts         |   2 +
 13 files changed, 163 insertions(+), 167 deletions(-)
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
 delete mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableMultiRow.tsx
 rename src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/{ => components}/PoolRoute.tsx (100%)
 rename src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/{ => components}/PoolSwap.tsx (97%)
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/index.ts

diff --git a/src/lib/components/action-msg/MsgToken.tsx b/src/lib/components/action-msg/MsgToken.tsx
index 8e75c022e..7df78236a 100644
--- a/src/lib/components/action-msg/MsgToken.tsx
+++ b/src/lib/components/action-msg/MsgToken.tsx
@@ -9,14 +9,14 @@ interface MsgTokenProps {
   coin: Coin;
   symbol?: string;
   precision?: number;
-  fontWeight?: string;
+  fontWeight?: number;
 }
 
 export const MsgToken = ({
   coin,
   symbol,
   precision,
-  fontWeight = "600",
+  fontWeight = 600,
 }: MsgTokenProps) => (
   <Flex role="group" align="center" gap={1}>
     <Text fontWeight={fontWeight}>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
new file mode 100644
index 000000000..f333f27b9
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -0,0 +1,129 @@
+import { Flex, Text, Grid, useDisclosure, Box, Badge } from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
+import { TableNoBorderRow } from "lib/components/table";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { Message, Transaction } from "lib/types";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+import { PoolMsgAction, PoolMsgDetail } from "./messages";
+
+interface PoolTxsMsgProps {
+  msgIndex: number;
+  message: Message;
+  transaction: Transaction;
+  assetInfos: AssetInfosOpt;
+  templateColumns: string;
+}
+
+export const PoolTxsMsg = ({
+  msgIndex,
+  message,
+  transaction,
+  assetInfos,
+  templateColumns,
+}: PoolTxsMsgProps) => {
+  const { isOpen, onToggle } = useDisclosure();
+  const msgDetailTemplateColumns = templateColumns
+    .split(" ")
+    .slice(0, 2)
+    .concat("1fr")
+    .join(" ");
+
+  return (
+    <Box
+      w="full"
+      minW="min-content"
+      borderY="0.5px solid"
+      borderColor="pebble.700"
+      _hover={{ background: "pebble.900" }}
+    >
+      <Grid
+        className="copier-wrapper"
+        templateColumns={templateColumns}
+        onClick={onToggle}
+        transition="all .25s ease-in-out"
+        cursor="pointer"
+      >
+        <TableNoBorderRow>
+          {msgIndex === 0 && (
+            <>
+              <ExplorerLink
+                value={transaction.hash.toLocaleUpperCase()}
+                type="tx_hash"
+                showCopyOnHover
+              />
+              {transaction.messages.length > 1 && (
+                <Badge variant="lilac" ml="6px">
+                  {transaction.messages.length}
+                </Badge>
+              )}
+            </>
+          )}
+        </TableNoBorderRow>
+        <TableNoBorderRow>
+          {msgIndex === 0 &&
+            (transaction.success ? (
+              <CustomIcon name="check" color="success.main" />
+            ) : (
+              <CustomIcon name="close" color="error.main" />
+            ))}
+        </TableNoBorderRow>
+        <TableNoBorderRow>
+          <PoolMsgAction msg={message} assetInfos={assetInfos} />
+        </TableNoBorderRow>
+
+        <TableNoBorderRow>
+          <ExplorerLink
+            value={transaction.sender}
+            type="user_address"
+            showCopyOnHover
+          />
+        </TableNoBorderRow>
+
+        <TableNoBorderRow>
+          {msgIndex === 0 && (
+            <Flex direction="column" gap={1}>
+              <Text variant="body3">{formatUTC(transaction.created)}</Text>
+              <Text variant="body3" color="text.dark">
+                {`(${dateFromNow(transaction.created)})`}
+              </Text>
+            </Flex>
+          )}
+        </TableNoBorderRow>
+
+        {transaction.success && (
+          <TableNoBorderRow>
+            <CustomIcon
+              name="chevron-down"
+              transform={isOpen ? "rotate(180deg)" : "rotate(0)"}
+              transition="all .25s ease-in-out"
+            />
+          </TableNoBorderRow>
+        )}
+      </Grid>
+      {transaction.success && (
+        <Grid
+          w="full"
+          py={4}
+          hidden={!isOpen}
+          templateColumns={msgDetailTemplateColumns}
+        >
+          <TableNoBorderRow py={0} />
+          <TableNoBorderRow py={0} />
+          <TableNoBorderRow py={0}>
+            <PoolMsgDetail
+              txHash={transaction.hash}
+              blockHeight={transaction.height}
+              msgIndex={msgIndex}
+              msg={message}
+              assetInfos={assetInfos}
+              isOpened={isOpen}
+            />
+          </TableNoBorderRow>
+        </Grid>
+      )}
+    </Box>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
index 21b10296e..0b8020a2d 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
@@ -5,7 +5,7 @@ import type { AssetInfosOpt } from "lib/services/assetService";
 import type { Option, Transaction } from "lib/types";
 
 import { PoolTxsTableHeader } from "./PoolTxsTableHeader";
-import { PoolTxsTableMultiRow } from "./PoolTxsTableMultiRow";
+import { PoolTxsTableRow } from "./PoolTxsTableRow";
 
 interface PoolTxsTableProps {
   transactions: Option<Transaction[]>;
@@ -30,7 +30,7 @@ export const PoolTxsTable = ({
     <TableContainer>
       <PoolTxsTableHeader templateColumns={templateColumns} />
       {transactions.map((transaction) => (
-        <PoolTxsTableMultiRow
+        <PoolTxsTableRow
           key={transaction.hash}
           transaction={transaction}
           assetInfos={assetInfos}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableMultiRow.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableMultiRow.tsx
deleted file mode 100644
index e59f00a87..000000000
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableMultiRow.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { AssetInfosOpt } from "lib/services/assetService";
-import type { Transaction } from "lib/types";
-
-import { PoolTxsTableRow } from "./PoolTxsTableRow";
-
-interface PoolTxsTableMultiRowProps {
-  transaction: Transaction;
-  assetInfos: AssetInfosOpt;
-  templateColumns: string;
-}
-
-export const PoolTxsTableMultiRow = ({
-  transaction,
-  assetInfos,
-  templateColumns,
-}: PoolTxsTableMultiRowProps) => (
-  <>
-    {transaction.messages.map((message, index) => (
-      <PoolTxsTableRow
-        key={transaction.hash + index.toString()}
-        msgIndex={index}
-        message={message}
-        transaction={transaction}
-        assetInfos={assetInfos}
-        templateColumns={templateColumns}
-      />
-    ))}
-  </>
-);
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx
index f770f8138..d75cfdf81 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx
@@ -1,129 +1,29 @@
-import { Flex, Text, Grid, useDisclosure, Box, Badge } from "@chakra-ui/react";
-
-import { ExplorerLink } from "lib/components/ExplorerLink";
-import { CustomIcon } from "lib/components/icon";
-import { TableNoBorderRow } from "lib/components/table";
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { Message, Transaction } from "lib/types";
-import { dateFromNow, formatUTC } from "lib/utils";
+import type { Transaction } from "lib/types";
 
-import { PoolTxsAction, PoolTxsDetail } from "./messages";
+import { PoolTxsMsg } from "./PoolTxsMsg";
 
 interface PoolTxsTableRowProps {
-  msgIndex: number;
-  message: Message;
   transaction: Transaction;
   assetInfos: AssetInfosOpt;
   templateColumns: string;
 }
 
 export const PoolTxsTableRow = ({
-  msgIndex,
-  message,
   transaction,
   assetInfos,
   templateColumns,
-}: PoolTxsTableRowProps) => {
-  const { isOpen, onToggle } = useDisclosure();
-  const msgDetailTemplateColumns = templateColumns
-    .split(" ")
-    .slice(0, 2)
-    .concat("1fr")
-    .join(" ");
-
-  return (
-    <Box
-      w="full"
-      minW="min-content"
-      borderY="0.5px solid"
-      borderColor="pebble.700"
-      _hover={{ background: "pebble.900" }}
-    >
-      <Grid
-        className="copier-wrapper"
+}: PoolTxsTableRowProps) => (
+  <>
+    {transaction.messages.map((message, index) => (
+      <PoolTxsMsg
+        key={transaction.hash + index.toString()}
+        msgIndex={index}
+        message={message}
+        transaction={transaction}
+        assetInfos={assetInfos}
         templateColumns={templateColumns}
-        onClick={onToggle}
-        transition="all .25s ease-in-out"
-        cursor="pointer"
-      >
-        <TableNoBorderRow>
-          {msgIndex === 0 && (
-            <>
-              <ExplorerLink
-                value={transaction.hash.toLocaleUpperCase()}
-                type="tx_hash"
-                showCopyOnHover
-              />
-              {transaction.messages.length > 1 && (
-                <Badge variant="lilac" ml="6px">
-                  {transaction.messages.length}
-                </Badge>
-              )}
-            </>
-          )}
-        </TableNoBorderRow>
-        <TableNoBorderRow>
-          {msgIndex === 0 &&
-            (transaction.success ? (
-              <CustomIcon name="check" color="success.main" />
-            ) : (
-              <CustomIcon name="close" color="error.main" />
-            ))}
-        </TableNoBorderRow>
-        <TableNoBorderRow>
-          <PoolTxsAction msg={message} assetInfos={assetInfos} />
-        </TableNoBorderRow>
-
-        <TableNoBorderRow>
-          <ExplorerLink
-            value={transaction.sender}
-            type="user_address"
-            showCopyOnHover
-          />
-        </TableNoBorderRow>
-
-        <TableNoBorderRow>
-          {msgIndex === 0 && (
-            <Flex direction="column" gap={1}>
-              <Text variant="body3">{formatUTC(transaction.created)}</Text>
-              <Text variant="body3" color="text.dark">
-                {`(${dateFromNow(transaction.created)})`}
-              </Text>
-            </Flex>
-          )}
-        </TableNoBorderRow>
-
-        {transaction.success && (
-          <TableNoBorderRow>
-            <CustomIcon
-              name="chevron-down"
-              transform={isOpen ? "rotate(180deg)" : "rotate(0)"}
-              transition="all .25s ease-in-out"
-            />
-          </TableNoBorderRow>
-        )}
-      </Grid>
-      {transaction.success && (
-        <Grid
-          w="full"
-          py={4}
-          hidden={!isOpen}
-          templateColumns={msgDetailTemplateColumns}
-        >
-          <TableNoBorderRow py={0} />
-          <TableNoBorderRow py={0} />
-          <TableNoBorderRow py={0}>
-            <PoolTxsDetail
-              txHash={transaction.hash}
-              blockHeight={transaction.height}
-              msgIndex={msgIndex}
-              msg={message}
-              assetInfos={assetInfos}
-              isOpened={isOpen}
-            />
-          </TableNoBorderRow>
-        </Grid>
-      )}
-    </Box>
-  );
-};
+      />
+    ))}
+  </>
+);
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx
index 8c1022e61..fdb31ed41 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx
@@ -11,7 +11,7 @@ import {
   MsgSwapExactAmountOutDetail,
 } from "./swap";
 
-export const PoolTxsAction = ({
+export const PoolMsgAction = ({
   msg,
   assetInfos,
 }: {
@@ -19,8 +19,7 @@ export const PoolTxsAction = ({
   assetInfos: AssetInfosOpt;
 }) => {
   // TODO: fix and add cases
-  const { type } = msg;
-  switch (type) {
+  switch (msg.type) {
     case "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn":
     case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn":
       return (
@@ -37,13 +36,12 @@ export const PoolTxsAction = ({
           assetInfos={assetInfos}
         />
       );
-    case "type3":
     default:
-      return <Text>{type}</Text>;
+      return <Text>{msg.type}</Text>;
   }
 };
 
-export const PoolTxsDetail = ({
+export const PoolMsgDetail = ({
   txHash,
   blockHeight,
   msgIndex,
@@ -59,8 +57,7 @@ export const PoolTxsDetail = ({
   isOpened: boolean;
 }) => {
   // TODO: fix and add cases
-  const { type } = msg;
-  switch (type) {
+  switch (msg.type) {
     case "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn":
     case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn":
       return (
@@ -85,8 +82,7 @@ export const PoolTxsDetail = ({
           isOpened={isOpened}
         />
       );
-    case "type3":
     default:
-      return <Text h={20}>{type}</Text>;
+      return <Text h={20}>{msg.type}</Text>;
   }
 };
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
index a02413513..963010a55 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
@@ -24,7 +24,7 @@ export const MsgSwapExactAmountInAction = ({
         coin={msg.tokenIn}
         symbol={inAssetInfo?.symbol}
         precision={inAssetInfo?.precision}
-        fontWeight="700"
+        fontWeight={700}
       />
       <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
       at least
@@ -32,7 +32,7 @@ export const MsgSwapExactAmountInAction = ({
         coin={{ amount: msg.tokenOutMinAmount, denom: tokenOutDenom }}
         symbol={outAssetInfo?.symbol}
         precision={outAssetInfo?.precision}
-        fontWeight="400"
+        fontWeight={400}
       />
     </Flex>
   );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
index 175fc7231..5c0d85ffc 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
@@ -4,8 +4,7 @@ import type { MsgSwapExactAmountIn } from "../messages";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
 
-import { PoolRoute } from "./PoolRoute";
-import { PoolSwap } from "./PoolSwap";
+import { PoolRoute, PoolSwap } from "./components";
 
 interface MsgSwapExactAmountInDetailProps {
   txHash: string;
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
index c24209740..7197cd6f5 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
@@ -24,14 +24,14 @@ export const MsgSwapExactAmountOutAction = ({
         coin={{ amount: msg.tokenInMaxAmount, denom: tokenInDenom }}
         symbol={inAssetInfo?.symbol}
         precision={inAssetInfo?.precision}
-        fontWeight="400"
+        fontWeight={400}
       />
       <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
       <MsgToken
         coin={msg.tokenOut}
         symbol={outAssetInfo?.symbol}
         precision={outAssetInfo?.precision}
-        fontWeight="700"
+        fontWeight={700}
       />
     </Flex>
   );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
index b38a72b1c..027f003af 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
@@ -4,8 +4,7 @@ import type { MsgSwapExactAmountOut } from "../messages";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
 
-import { PoolRoute } from "./PoolRoute";
-import { PoolSwap } from "./PoolSwap";
+import { PoolRoute, PoolSwap } from "./components";
 
 interface MsgSwapExactAmountOutDetailProps {
   txHash: string;
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/PoolRoute.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
similarity index 100%
rename from src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/PoolRoute.tsx
rename to src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/PoolSwap.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
similarity index 97%
rename from src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/PoolSwap.tsx
rename to src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
index e57db5b70..3ecd16350 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/PoolSwap.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
@@ -1,6 +1,6 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import { AssetCard } from "../AssetCard";
+import { AssetCard } from "../../AssetCard";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/index.ts b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/index.ts
new file mode 100644
index 000000000..de3b2ff47
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/index.ts
@@ -0,0 +1,2 @@
+export * from "./PoolRoute";
+export * from "./PoolSwap";

From 00a669c1c2a9747e1f18487ee577737ae96c291a Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 10 May 2023 11:40:04 +0700
Subject: [PATCH 085/354] fix: add more amp track to submit proposal

---
 src/lib/pages/proposal/store-code/index.tsx | 17 +++++++++++------
 src/lib/services/amplitude.tsx              | 15 ++++++++++++++-
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index 12fdf4634..d31338092 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -51,6 +51,7 @@ import {
   AmpEvent,
   AmpTrack,
   AmpTrackUseDepositFill,
+  AmpTrackUseSubmitProposal,
   AmpTrackUseUnpin,
 } from "lib/services/amplitude";
 import { useGovParams } from "lib/services/proposalService";
@@ -96,6 +97,7 @@ const StoreCodeProposal = () => {
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
   const submitStoreCodeProposalTx = useSubmitStoreCodeProposalTx();
   const { broadcast } = useTxBroadcast();
+  const page = "proposal-store-code";
 
   // States
   const [estimatedFee, setEstimatedFee] = useState<StdFee>();
@@ -263,10 +265,15 @@ const StoreCodeProposal = () => {
   const proceed = useCallback(async () => {
     if (!wasmFile) return null;
 
-    AmpTrack(AmpEvent.USE_SUBMIT_PROPOSAL, {
-      addressesCount: addresses.length,
-      permission: AccessType[permission],
-    });
+    AmpTrackUseSubmitProposal(
+      page,
+      initialDeposit.amount,
+      minDeposit?.formattedAmount,
+      {
+        addressesCount: addresses.length,
+        permission: AccessType[permission],
+      }
+    );
 
     const submitStoreCodeProposalMsg = async () => {
       return composeStoreCodeProposalMsg({
@@ -321,8 +328,6 @@ const StoreCodeProposal = () => {
     wasmFile,
   ]);
 
-  const page = "proposal-store-code";
-
   return (
     <>
       <PageContainer>
diff --git a/src/lib/services/amplitude.tsx b/src/lib/services/amplitude.tsx
index 0b23ad24d..076624df8 100644
--- a/src/lib/services/amplitude.tsx
+++ b/src/lib/services/amplitude.tsx
@@ -1,7 +1,8 @@
 import { track } from "@amplitude/analytics-browser";
+import big from "big.js";
 
 import type { AttachFundsType } from "lib/components/fund/types";
-import type { Option, Token } from "lib/types";
+import type { Dict, Option, Token } from "lib/types";
 import { AccessType } from "lib/types";
 
 export enum AmpEvent {
@@ -235,3 +236,15 @@ export const AmpTrackUseInstantiatePermission = (
 
 export const AmpTrackUseDepositFill = (page: string, amount: Token) =>
   track(AmpEvent.USE_DEPOSIT_FILL, { page, amount });
+
+export const AmpTrackUseSubmitProposal = (
+  page: string,
+  initialDeposit: string,
+  minDeposit: Option<string>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  properties?: Dict<string, any>
+) => {
+  const proposalPeriod =
+    big(initialDeposit) < big(minDeposit || "0") ? "Deposit" : "Voting";
+  track(AmpEvent.USE_SUBMIT_PROPOSAL, { page, proposalPeriod, ...properties });
+};

From c1e1376fd5631bea0f091c89c926fe749cf5992d Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Wed, 10 May 2023 12:20:14 +0700
Subject: [PATCH 086/354] feat(components): change back btn to breadcrumb

---
 src/lib/pages/account-details/index.tsx       |  92 +++++---
 .../components/BlockDetailsTop.tsx            | 103 +++++----
 src/lib/pages/block-details/index.tsx         |  31 ++-
 src/lib/pages/code-details/index.tsx          | 167 +++++++++-----
 .../components/ContractTop.tsx                | 212 +++++++++++-------
 src/lib/pages/contract-details/index.tsx      |   2 -
 src/lib/pages/execute/index.tsx               |   2 -
 src/lib/pages/faucet/index.tsx                |   2 -
 .../components/DetailHeader.tsx               |   8 +-
 src/lib/pages/query/index.tsx                 |   2 -
 .../pages/tx-details/components/TxHeader.tsx  |  93 ++++----
 src/lib/pages/tx-details/index.tsx            |  36 ++-
 12 files changed, 465 insertions(+), 285 deletions(-)

diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 21c0747bd..5632d12fb 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -8,12 +8,14 @@ import {
   Tabs,
   Text,
   Image,
+  Breadcrumb,
+  BreadcrumbItem,
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import { useValidateAddress } from "lib/app-provider";
-import { BackButton } from "lib/components/button";
+import { AppLink } from "lib/components/AppLink";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomTab } from "lib/components/CustomTab";
 import { CustomIcon } from "lib/components/icon";
@@ -27,7 +29,12 @@ import {
   usePublicProjectBySlug,
 } from "lib/services/publicProjectService";
 import type { HumanAddr } from "lib/types";
-import { formatPrice, getFirstQueryParam, scrollToTop } from "lib/utils";
+import {
+  formatPrice,
+  getFirstQueryParam,
+  scrollToTop,
+  truncate,
+} from "lib/utils";
 
 import { AssetsSection } from "./components/asset";
 import { DelegationsSection } from "./components/delegations";
@@ -86,30 +93,64 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
 
   return (
     <>
-      <Flex direction="column" gap={1} mt={6} mb={6}>
-        <Flex gap={1}>
-          {publicDetail?.logo && (
-            <Image
-              src={publicDetail.logo}
-              borderRadius="full"
-              alt={publicDetail.name}
-              width={7}
-              height={7}
+      <Flex direction="column" mb={6}>
+        {publicDetail && (
+          <Breadcrumb
+            mb={6}
+            w="full"
+            spacing="4px"
+            separator={<CustomIcon name="chevron-right" boxSize="3" />}
+          >
+            <BreadcrumbItem
+              _hover={{ opacity: 0.8 }}
+              transition="all 0.25s ease-in-out"
+            >
+              <AppLink
+                color="text.dark"
+                href={`/public-project/${publicInfo?.slug}`}
+              >
+                {publicDetail?.name}
+              </AppLink>
+            </BreadcrumbItem>
+            <BreadcrumbItem isCurrentPage>
+              <Text
+                variant="body2"
+                className="ellipsis"
+                textTransform="lowercase"
+                fontWeight="600"
+                width="250px"
+                color="text.dark"
+              >
+                {truncate(accountAddress)}
+              </Text>
+            </BreadcrumbItem>
+          </Breadcrumb>
+        )}
+        <Flex direction="column" gap={2}>
+          <Flex gap={1} minH="36px" align="center">
+            {publicDetail?.logo && (
+              <Image
+                src={publicDetail.logo}
+                borderRadius="full"
+                alt={publicDetail.name}
+                width={7}
+                height={7}
+              />
+            )}
+            <Heading as="h5" variant="h5">
+              {displayName}
+            </Heading>
+          </Flex>
+          <Flex gap={2}>
+            <Text fontWeight={500} color="text.dark" variant="body2">
+              Wallet Address:
+            </Text>
+            <CopyLink
+              value={accountAddress}
+              amptrackSection="account_top"
+              type="user_address"
             />
-          )}
-          <Heading as="h5" variant="h5">
-            {displayName}
-          </Heading>
-        </Flex>
-        <Flex gap={2}>
-          <Text fontWeight={500} color="text.dark" variant="body2">
-            Wallet Address:
-          </Text>
-          <CopyLink
-            value={accountAddress}
-            amptrackSection="account_top"
-            type="user_address"
-          />
+          </Flex>
         </Flex>
       </Flex>
       {publicInfo?.description && (
@@ -332,7 +373,6 @@ const AccountDetails = () => {
 
   return (
     <PageContainer>
-      <BackButton />
       {validateUserAddress(accountAddressParam) &&
       validateContractAddress(accountAddressParam) ? (
         <InvalidAccount />
diff --git a/src/lib/pages/block-details/components/BlockDetailsTop.tsx b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
index 63c70261f..295b59ff2 100644
--- a/src/lib/pages/block-details/components/BlockDetailsTop.tsx
+++ b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
@@ -38,67 +38,72 @@ export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
   const disablePrevious = block <= 1;
   return (
     <Flex
-      justify="space-between"
       mb={12}
       pb={12}
       mt={6}
       borderBottomColor="pebble.700"
       borderBottomWidth="1px"
     >
-      <Flex direction="column" gap={1}>
-        <Flex alignItems="center">
-          <CustomIcon name="block" boxSize="5" color="lilac.main" />
-          <Heading as="h5" variant="h5" className="ellipsis">
-            {blockData.height}
-          </Heading>
-        </Flex>
-        <Flex gap={2}>
-          <Text variant="body2" color="text.dark">
-            Block Hash:
-          </Text>
-          <CopyLink
-            value={blockData.hash.toUpperCase()}
-            amptrackSection="block_details_top"
-            type="block_hash"
-          />
+      <Flex direction="column" gap={2} width="full">
+        <Flex justifyContent="space-between" alignItems="center" width="full">
+          <Flex alignItems="center">
+            <CustomIcon name="block" boxSize="5" color="lilac.main" />
+            <Heading as="h5" variant="h5" className="ellipsis">
+              {blockData.height}
+            </Heading>
+          </Flex>
+          <Flex gap={2}>
+            {!disablePrevious && (
+              <AppLink href={`/block/${block - 1}`}>
+                <StyledIconButton
+                  icon={<CustomIcon name="chevron-left" />}
+                  variant="ghost-gray"
+                />
+              </AppLink>
+            )}
+            <AppLink href={`/block/${block + 1}`}>
+              <StyledIconButton
+                icon={<CustomIcon name="chevron-right" />}
+                variant="ghost-gray"
+              />
+            </AppLink>
+            <Button
+              variant="ghost-gray"
+              padding={2}
+              rightIcon={
+                <CustomIcon name="launch" boxSize={3} color="text.dark" />
+              }
+              onClick={openLcdPage}
+            >
+              View in JSON
+            </Button>
+          </Flex>
         </Flex>
-        <Flex gap={2} alignItems="center">
-          <Flex gap={1} alignItems="center">
-            <CustomIcon name="history" boxSize={3} color="pebble.600" />
+        <Flex direction="column" gap={1}>
+          <Flex gap={2}>
             <Text variant="body2" color="text.dark">
-              {dateFromNow(blockData.timestamp)}
+              Block Hash:
             </Text>
+            <CopyLink
+              value={blockData.hash.toUpperCase()}
+              amptrackSection="block_details_top"
+              type="block_hash"
+            />
           </Flex>
-          <DotSeparator />
-          <Text variant="body2" color="text.dark">
-            {formatUTC(blockData.timestamp)}
-          </Text>
+          <Flex gap={2} alignItems="center">
+            <Flex gap={1} alignItems="center">
+              <CustomIcon name="history" boxSize={3} color="pebble.600" />
+              <Text variant="body2" color="text.dark">
+                {dateFromNow(blockData.timestamp)}
+              </Text>
+            </Flex>
+            <DotSeparator />
+            <Text variant="body2" color="text.dark">
+              {formatUTC(blockData.timestamp)}
+            </Text>
+          </Flex>{" "}
         </Flex>
       </Flex>
-      <Flex gap={2}>
-        {!disablePrevious && (
-          <AppLink href={`/block/${block - 1}`}>
-            <StyledIconButton
-              icon={<CustomIcon name="chevron-left" />}
-              variant="ghost-gray"
-            />
-          </AppLink>
-        )}
-        <AppLink href={`/block/${block + 1}`}>
-          <StyledIconButton
-            icon={<CustomIcon name="chevron-right" />}
-            variant="ghost-gray"
-          />
-        </AppLink>
-        <Button
-          variant="ghost-gray"
-          padding={2}
-          rightIcon={<CustomIcon name="launch" boxSize={3} color="text.dark" />}
-          onClick={openLcdPage}
-        >
-          View in JSON
-        </Button>
-      </Flex>
     </Flex>
   );
 };
diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx
index b6132185b..b0d8966fd 100644
--- a/src/lib/pages/block-details/index.tsx
+++ b/src/lib/pages/block-details/index.tsx
@@ -1,7 +1,9 @@
+import { Breadcrumb, BreadcrumbItem, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { BackButton } from "lib/components/button";
+import { AppLink } from "lib/components/AppLink";
+import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
@@ -30,7 +32,32 @@ const BlockDetail = () => {
 
   return (
     <PageContainer>
-      <BackButton />
+      <Breadcrumb
+        w="full"
+        spacing="4px"
+        separator={<CustomIcon name="chevron-right" boxSize="3" />}
+      >
+        <BreadcrumbItem
+          _hover={{ opacity: 0.8 }}
+          transition="all 0.25s ease-in-out"
+        >
+          <AppLink color="text.dark" href="/blocks">
+            Blocks
+          </AppLink>
+        </BreadcrumbItem>
+        <BreadcrumbItem isCurrentPage>
+          <Text
+            variant="body2"
+            className="ellipsis"
+            textTransform="lowercase"
+            fontWeight="600"
+            width="250px"
+            color="text.dark"
+          >
+            {blockData?.height}
+          </Text>
+        </BreadcrumbItem>
+      </Breadcrumb>
       {blockData ? (
         <>
           <BlockDetailsTop blockData={blockData} />
diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index da4d1c72e..ab74628da 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -1,9 +1,17 @@
-import { Divider, Flex, Heading, Text, Image } from "@chakra-ui/react";
+import {
+  Divider,
+  Flex,
+  Heading,
+  Text,
+  Image,
+  Breadcrumb,
+  BreadcrumbItem,
+} from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { BackButton } from "lib/components/button";
+import { AppLink } from "lib/components/AppLink";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
 import { GitHubLink } from "lib/components/links";
@@ -41,70 +49,112 @@ const CodeDetailsBody = observer(
 
     return (
       <>
-        <Flex justify="space-between" mt={6}>
-          <Flex direction="column" gap={1}>
-            <Flex gap={1}>
-              {publicProject.publicDetail?.logo && (
-                <Image
-                  src={publicProject.publicDetail.logo}
-                  borderRadius="full"
-                  alt={publicProject.publicDetail.name}
-                  width={7}
-                  height={7}
-                />
+        <Flex direction="column">
+          <Breadcrumb
+            w="full"
+            spacing="4px"
+            separator={<CustomIcon name="chevron-right" boxSize="3" />}
+          >
+            <BreadcrumbItem
+              _hover={{ opacity: 0.8 }}
+              transition="all 0.25s ease-in-out"
+            >
+              {publicProject.publicCodeData?.name ? (
+                <AppLink
+                  color="text.dark"
+                  href={`/public-project/${publicProject.publicCodeData?.slug}`}
+                >
+                  {publicProject.publicDetail?.name}
+                </AppLink>
+              ) : (
+                <AppLink color="text.dark" href="/recent-codes">
+                  Recents Codes
+                </AppLink>
               )}
-              <Heading as="h5" variant="h5">
-                {localCodeInfo?.name ??
-                  publicProject.publicCodeData?.name ??
-                  codeId}
-              </Heading>
+            </BreadcrumbItem>
+            <BreadcrumbItem isCurrentPage>
+              <Text
+                variant="body2"
+                className="ellipsis"
+                textTransform="lowercase"
+                fontWeight="600"
+                width="250px"
+                color="text.dark"
+              >
+                {codeId}
+              </Text>
+            </BreadcrumbItem>
+          </Breadcrumb>
+          <Flex direction="column" gap={2} w="full" mt={6}>
+            <Flex justify="space-between" align="center">
+              <Flex gap={1}>
+                {publicProject.publicDetail?.logo && (
+                  <Image
+                    src={publicProject.publicDetail.logo}
+                    borderRadius="full"
+                    alt={publicProject.publicDetail.name}
+                    width={7}
+                    height={7}
+                  />
+                )}
+                <Heading as="h5" variant="h5">
+                  {localCodeInfo?.name ??
+                    publicProject.publicCodeData?.name ??
+                    codeId}
+                </Heading>
+              </Flex>
+              <CTASection
+                id={codeId}
+                uploader={localCodeInfo?.uploader ?? codeData.uploader}
+                name={localCodeInfo?.name}
+                instantiatePermission={
+                  codeData.instantiatePermission ??
+                  AccessConfigPermission.UNKNOWN
+                }
+                permissionAddresses={codeData.permissionAddresses ?? []}
+                contractCount={undefined}
+                cw2Contract={undefined}
+                cw2Version={undefined}
+              />
             </Flex>
-            {publicProject.publicCodeData?.name && (
+            <Flex direction="column" gap={1}>
+              {publicProject.publicCodeData?.name && (
+                <Flex gap={2}>
+                  <Text fontWeight={500} color="text.dark" variant="body2">
+                    Public Code Name:
+                  </Text>
+                  <Text variant="body2">
+                    {publicProject.publicCodeData.name}
+                  </Text>
+                </Flex>
+              )}
               <Flex gap={2}>
                 <Text fontWeight={500} color="text.dark" variant="body2">
-                  Public Code Name:
+                  Code ID:
                 </Text>
-                <Text variant="body2">{publicProject.publicCodeData.name}</Text>
+                <CopyLink
+                  value={codeId.toString()}
+                  amptrackSection="code_top"
+                  type="code_id"
+                />
               </Flex>
-            )}
-            <Flex gap={2}>
-              <Text fontWeight={500} color="text.dark" variant="body2">
-                Code ID:
-              </Text>
-              <CopyLink
-                value={codeId.toString()}
-                amptrackSection="code_top"
-                type="code_id"
-              />
-            </Flex>
-            <Flex gap={2}>
-              <Text fontWeight={500} color="text.dark" variant="body2">
-                CW2 Info:
-              </Text>
-              <Text
-                color={cw2Info ? "text.main" : "text.disabled"}
-                variant="body2"
-                wordBreak="break-all"
-              >
-                {cw2Info ?? "N/A"}
-              </Text>
+              <Flex gap={2}>
+                <Text fontWeight={500} color="text.dark" variant="body2">
+                  CW2 Info:
+                </Text>
+                <Text
+                  color={cw2Info ? "text.main" : "text.disabled"}
+                  variant="body2"
+                  wordBreak="break-all"
+                >
+                  {cw2Info ?? "N/A"}
+                </Text>
+              </Flex>
+              {publicProject.publicCodeData?.github && (
+                <GitHubLink github={publicProject.publicCodeData.github} />
+              )}
             </Flex>
-            {publicProject.publicCodeData?.github && (
-              <GitHubLink github={publicProject.publicCodeData.github} />
-            )}
           </Flex>
-          <CTASection
-            id={codeId}
-            uploader={localCodeInfo?.uploader ?? codeData.uploader}
-            name={localCodeInfo?.name}
-            instantiatePermission={
-              codeData.instantiatePermission ?? AccessConfigPermission.UNKNOWN
-            }
-            permissionAddresses={codeData.permissionAddresses ?? []}
-            contractCount={undefined}
-            cw2Contract={undefined}
-            cw2Version={undefined}
-          />
         </Flex>
         {publicProject.publicCodeData?.description && (
           <PublicDescription
@@ -134,7 +184,6 @@ const CodeDetails = observer(() => {
   if (data.isLoading) return <Loading />;
   return (
     <PageContainer>
-      <BackButton />
       {!isCodeId(codeIdParam) ? (
         <InvalidCode />
       ) : (
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index c52d05e02..4efa2d31a 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/src/lib/pages/contract-details/components/ContractTop.tsx
@@ -5,10 +5,13 @@ import {
   Button,
   IconButton,
   Image,
+  Breadcrumb,
+  BreadcrumbItem,
 } from "@chakra-ui/react";
 import router from "next/router";
 
 import { useInternalNavigate } from "lib/app-provider";
+import { AppLink } from "lib/components/AppLink";
 import { AdminButton } from "lib/components/button";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
@@ -19,7 +22,7 @@ import {
   SaveContractDetailsModal,
 } from "lib/components/modal";
 import type { ContractAddr, ContractData } from "lib/types";
-import { getFirstQueryParam } from "lib/utils";
+import { getFirstQueryParam, truncate } from "lib/utils";
 
 interface ContractTopProps {
   contractData: ContractData;
@@ -94,94 +97,131 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
   };
 
   return (
-    <Flex justify="space-between" my={6}>
-      <Flex direction="column" gap={1} textOverflow="ellipsis" maxW="670px">
-        <Flex gap={1}>
-          {publicProject.publicDetail?.logo && (
-            <Image
-              src={publicProject.publicDetail.logo}
-              borderRadius="full"
-              alt={publicProject.publicDetail.name}
-              width={7}
-              height={7}
-            />
-          )}
-          <Heading as="h5" variant="h5" className="ellipsis">
-            {displayName}
-          </Heading>
-        </Flex>
-        <Flex gap={2}>
-          <Text
-            color="text.dark"
-            variant="body2"
-            fontWeight={500}
-            whiteSpace="nowrap"
+    <Flex justify="space-between" mb={6}>
+      <Flex direction="column" w="full">
+        {publicProject.publicDetail && (
+          <Breadcrumb
+            w="full"
+            spacing="4px"
+            mb={6}
+            separator={<CustomIcon name="chevron-right" boxSize="3" />}
           >
-            Contract Address:
-          </Text>
-          <CopyLink
-            value={contractAddress}
-            amptrackSection="contract_top"
-            type="contract_address"
-          />
-        </Flex>
-        <Flex gap={2}>
-          <Text color="text.dark" variant="body2" fontWeight={500}>
-            Label:
-          </Text>
-          <Text variant="body2" className="ellipsis">
-            {contractData.instantiateInfo?.label}
-          </Text>
-        </Flex>
-        {publicProject.publicInfo?.name && (
-          <Flex gap={2}>
-            <Text color="text.dark" variant="body2" fontWeight={500}>
-              Public Contract Name:
-            </Text>
-            <Text variant="body2" className="ellipsis">
-              {publicProject.publicInfo?.name}
-            </Text>
-          </Flex>
-        )}
-        {publicProject.publicInfo?.github && (
-          <GitHubLink github={publicProject.publicInfo?.github} />
+            <BreadcrumbItem
+              _hover={{ opacity: 0.8 }}
+              transition="all 0.25s ease-in-out"
+            >
+              <AppLink
+                color="text.dark"
+                href={`/public-project/${publicProject.publicInfo?.slug}`}
+              >
+                {publicProject.publicDetail.name}
+              </AppLink>
+            </BreadcrumbItem>
+            <BreadcrumbItem isCurrentPage>
+              <Text
+                variant="body2"
+                className="ellipsis"
+                width="250px"
+                fontWeight="600"
+                color="text.dark"
+              >
+                {truncate(contractAddress)}
+              </Text>
+            </BreadcrumbItem>
+          </Breadcrumb>
         )}
-      </Flex>
-      <Flex gap={4}>
-        <AdminButton
-          contractAddress={contractAddress as ContractAddr}
-          admin={instantiateInfo?.admin}
-        />
-        <Button
-          variant="outline-primary"
-          leftIcon={<CustomIcon name="query" color="violet.light" />}
-          onClick={goToQuery}
-        >
-          Query
-        </Button>
-        <Button
-          variant="outline-primary"
-          leftIcon={<CustomIcon name="execute" color="violet.light" />}
-          onClick={goToExecute}
-        >
-          Execute
-        </Button>
-        <Flex>
-          {contractLocalInfo && (
-            <EditContractDetailsModal
-              contractLocalInfo={contractLocalInfo}
-              triggerElement={
-                <IconButton
-                  fontSize="24px"
-                  variant="none"
-                  aria-label="edit"
-                  color="pebble.600"
-                  icon={<CustomIcon name="edit" />}
+        <Flex direction="column" gap={2} textOverflow="ellipsis" w="full">
+          <Flex justify="space-between" align="center">
+            <Flex gap={1} maxW="670px">
+              {publicProject.publicDetail?.logo && (
+                <Image
+                  src={publicProject.publicDetail.logo}
+                  borderRadius="full"
+                  alt={publicProject.publicDetail.name}
+                  width={7}
+                  height={7}
                 />
-              }
-            />
-          )}
-          {renderSaveButton()}
+              )}
+              <Heading as="h5" variant="h5" className="ellipsis">
+                {displayName}
+              </Heading>
+            </Flex>
+            <Flex gap={4}>
+              <AdminButton
+                contractAddress={contractAddress as ContractAddr}
+                admin={instantiateInfo?.admin}
+              />
+              <Button
+                variant="outline-primary"
+                leftIcon={<CustomIcon name="query" color="violet.light" />}
+                onClick={goToQuery}
+              >
+                Query
+              </Button>
+              <Button
+                variant="outline-primary"
+                leftIcon={<CustomIcon name="execute" color="violet.light" />}
+                onClick={goToExecute}
+              >
+                Execute
+              </Button>
+              <Flex>
+                {contractLocalInfo && (
+                  <EditContractDetailsModal
+                    contractLocalInfo={contractLocalInfo}
+                    triggerElement={
+                      <IconButton
+                        fontSize="24px"
+                        variant="none"
+                        aria-label="edit"
+                        color="pebble.600"
+                        icon={<CustomIcon name="edit" />}
+                      />
+                    }
+                  />
+                )}
+                {renderSaveButton()}
+              </Flex>
+            </Flex>
+          </Flex>
+          <Flex direction="column" gap={1}>
+            <Flex gap={2}>
+              <Text
+                color="text.dark"
+                variant="body2"
+                fontWeight={500}
+                whiteSpace="nowrap"
+              >
+                Contract Address:
+              </Text>
+              <CopyLink
+                value={contractAddress}
+                amptrackSection="contract_top"
+                type="contract_address"
+              />
+            </Flex>
+            <Flex gap={2}>
+              <Text color="text.dark" variant="body2" fontWeight={500}>
+                Label:
+              </Text>
+              <Text variant="body2" className="ellipsis">
+                {contractData.instantiateInfo?.label}
+              </Text>
+            </Flex>
+            {publicProject.publicInfo?.name && (
+              <Flex gap={2}>
+                <Text color="text.dark" variant="body2" fontWeight={500}>
+                  Public Contract Name:
+                </Text>
+                <Text variant="body2" className="ellipsis">
+                  {publicProject.publicInfo?.name}
+                </Text>
+              </Flex>
+            )}
+            {publicProject.publicInfo?.github && (
+              <GitHubLink github={publicProject.publicInfo?.github} />
+            )}
+          </Flex>
         </Flex>
       </Flex>
     </Flex>
diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index 7906997e1..36f204c31 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -11,7 +11,6 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { useValidateAddress } from "lib/app-provider";
-import { BackButton } from "lib/components/button";
 import { CustomTab } from "lib/components/CustomTab";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
@@ -149,7 +148,6 @@ const ContractDetails = observer(() => {
   if (isLoading) return <Loading />;
   return (
     <PageContainer>
-      <BackButton />
       {validateContractAddress(contractAddressParam) ? (
         <InvalidContract />
       ) : (
diff --git a/src/lib/pages/execute/index.tsx b/src/lib/pages/execute/index.tsx
index 91eee9227..9f9ac0ccb 100644
--- a/src/lib/pages/execute/index.tsx
+++ b/src/lib/pages/execute/index.tsx
@@ -4,7 +4,6 @@ import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
 import { useInternalNavigate } from "lib/app-provider";
-import { BackButton } from "lib/components/button";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
 import { CustomIcon } from "lib/components/icon";
@@ -85,7 +84,6 @@ const Execute = () => {
   return (
     <PageContainer>
       {isFetching && <LoadingOverlay />}
-      <BackButton />
       <Flex mt={1} mb={8} justify="space-between">
         <Heading as="h5" variant="h5">
           Execute Contract
diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index b0fe9ad58..d80548c23 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -17,7 +17,6 @@ import {
   useInternalNavigate,
   useValidateAddress,
 } from "lib/app-provider";
-import { BackButton } from "lib/components/button";
 import type { FormStatus } from "lib/components/forms";
 import { TextInput } from "lib/components/forms";
 import { CustomIcon } from "lib/components/icon";
@@ -144,7 +143,6 @@ const Faucet = () => {
 
   return (
     <WasmPageContainer>
-      <BackButton alignSelf="flex-start" />
       <Heading as="h5" variant="h5">
         Osmosis Testnet Faucet
       </Heading>
diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx
index 82313745b..0d9f5aecf 100644
--- a/src/lib/pages/public-project/components/DetailHeader.tsx
+++ b/src/lib/pages/public-project/components/DetailHeader.tsx
@@ -51,18 +51,18 @@ export const DetailHeader = ({ details, slug }: DetailHeaderProps) => (
       justifyContent="space-between"
       alignItems="flex-start"
       w="full"
-      mt={2}
+      mt={6}
       gap={5}
     >
       <Box>
-        <Flex gap={2} align="center">
+        <Flex gap={1} align="center" minH="36px">
           {details?.logo && (
             <Image
               src={details?.logo}
               borderRadius="full"
               alt="Celatone"
-              width={8}
-              height={8}
+              width={7}
+              height={7}
             />
           )}
           <Heading as="h5" variant="h5" className="ellipsis">
diff --git a/src/lib/pages/query/index.tsx b/src/lib/pages/query/index.tsx
index 14e5861c9..5cbbde271 100644
--- a/src/lib/pages/query/index.tsx
+++ b/src/lib/pages/query/index.tsx
@@ -5,7 +5,6 @@ import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
 import { useInternalNavigate, useLCDEndpoint } from "lib/app-provider";
-import { BackButton } from "lib/components/button";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
 import { CustomIcon } from "lib/components/icon";
 import { LoadingOverlay } from "lib/components/LoadingOverlay";
@@ -93,7 +92,6 @@ const Query = () => {
   return (
     <PageContainer>
       {isFetching && <LoadingOverlay />}
-      <BackButton />
       <Flex mt={1} mb={8} justify="space-between">
         <Heading as="h5" variant="h5">
           Query Contract
diff --git a/src/lib/pages/tx-details/components/TxHeader.tsx b/src/lib/pages/tx-details/components/TxHeader.tsx
index ca000d1ff..1200cfb43 100644
--- a/src/lib/pages/tx-details/components/TxHeader.tsx
+++ b/src/lib/pages/tx-details/components/TxHeader.tsx
@@ -26,9 +26,8 @@ export const TxHeader = ({ txData, ...flexProps }: TxHeaderProps) => {
         </Heading>
         <Button
           variant="ghost-gray"
-          rightIcon={
-            <CustomIcon name="launch" boxSize={3} color="text.dark" m={0} />
-          }
+          padding={2}
+          rightIcon={<CustomIcon name="launch" boxSize={3} color="text.dark" />}
           onClick={() => {
             AmpTrackViewJson("tx_page_transaction_hash");
             openLcdTab(txData.txhash);
@@ -37,54 +36,56 @@ export const TxHeader = ({ txData, ...flexProps }: TxHeaderProps) => {
           View in JSON
         </Button>
       </Flex>
-      <Flex gap={2} fontSize="14px" w="full">
-        <Text variant="body2" fontWeight={500} color="text.dark">
-          Transaction Hash:
-        </Text>
-        <CopyLink
-          value={txData.txhash}
-          amptrackSection="tx_header"
-          type="tx_hash"
-        />
-      </Flex>
-      <Flex gap={2} fontSize="14px" color="text.dark" align="center">
-        <Flex
-          align="center"
-          gap={1}
-          color={txData.isTxFailed ? "error.main" : "success.main"}
-        >
-          {txData.isTxFailed ? (
+      <Flex direction="column" gap={1}>
+        <Flex gap={2} fontSize="14px" w="full">
+          <Text variant="body2" fontWeight={500} color="text.dark">
+            Transaction Hash:
+          </Text>
+          <CopyLink
+            value={txData.txhash}
+            amptrackSection="tx_header"
+            type="tx_hash"
+          />
+        </Flex>
+        <Flex gap={2} fontSize="14px" color="text.dark" align="center">
+          <Flex
+            align="center"
+            gap={1}
+            color={txData.isTxFailed ? "error.main" : "success.main"}
+          >
+            {txData.isTxFailed ? (
+              <>
+                <CustomIcon
+                  name="close-circle-solid"
+                  boxSize={3}
+                  m={0}
+                  color="error.main"
+                />
+                <p>Failed</p>
+              </>
+            ) : (
+              <>
+                <CustomIcon
+                  name="check-circle-solid"
+                  boxSize={3}
+                  m={0}
+                  color="success.main"
+                />
+                <p>Success</p>
+              </>
+            )}
+          </Flex>
+          <DotSeparator />
+          {txData.timestamp ? (
             <>
-              <CustomIcon
-                name="close-circle-solid"
-                boxSize={3}
-                m={0}
-                color="error.main"
-              />
-              <p>Failed</p>
+              <p>{dateFromNow(txData.timestamp)}</p>
+              <DotSeparator />
+              <p>{formatUTC(txData.timestamp)}</p>
             </>
           ) : (
-            <>
-              <CustomIcon
-                name="check-circle-solid"
-                boxSize={3}
-                m={0}
-                color="success.main"
-              />
-              <p>Success</p>
-            </>
+            <p>N/A</p>
           )}
         </Flex>
-        <DotSeparator />
-        {txData.timestamp ? (
-          <>
-            <p>{dateFromNow(txData.timestamp)}</p>
-            <DotSeparator />
-            <p>{formatUTC(txData.timestamp)}</p>
-          </>
-        ) : (
-          <p>N/A</p>
-        )}
       </Flex>
     </Flex>
   );
diff --git a/src/lib/pages/tx-details/index.tsx b/src/lib/pages/tx-details/index.tsx
index 9d94697db..5202c18b9 100644
--- a/src/lib/pages/tx-details/index.tsx
+++ b/src/lib/pages/tx-details/index.tsx
@@ -1,15 +1,16 @@
-import { Flex } from "@chakra-ui/react";
+import { Breadcrumb, BreadcrumbItem, Flex, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { BackButton } from "lib/components/button";
+import { AppLink } from "lib/components/AppLink";
+import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state/EmptyState";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { useAssetInfos } from "lib/services/assetService";
 import { useTxData } from "lib/services/txService";
-import { getFirstQueryParam } from "lib/utils";
+import { getFirstQueryParam, truncate } from "lib/utils";
 
 import { TxHeader, TxInfo } from "./components";
 import { MessageSection } from "./components/MessageSection";
@@ -44,10 +45,35 @@ const TxDetails = () => {
 
   return (
     <PageContainer>
-      <BackButton />
+      <Breadcrumb
+        w="full"
+        spacing="4px"
+        separator={<CustomIcon name="chevron-right" boxSize="3" />}
+      >
+        <BreadcrumbItem
+          _hover={{ opacity: 0.8 }}
+          transition="all 0.25s ease-in-out"
+        >
+          <AppLink color="text.dark" href="/txs">
+            Transactions
+          </AppLink>
+        </BreadcrumbItem>
+        <BreadcrumbItem isCurrentPage>
+          <Text
+            variant="body2"
+            className="ellipsis"
+            textTransform="lowercase"
+            fontWeight="600"
+            width="250px"
+            color="text.dark"
+          >
+            {truncate(txData?.txhash)}
+          </Text>
+        </BreadcrumbItem>
+      </Breadcrumb>
       {txData ? (
         <>
-          <TxHeader mt={2} txData={txData} />
+          <TxHeader mt={6} txData={txData} />
           <Flex my={12} justify="space-between">
             <TxInfo txData={txData} assetInfos={assetInfos} />
             <MessageSection txData={txData} assetInfos={assetInfos} />

From d32203c4f7cd7e50a7c9646ca2f264bd0aac9d0a Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Wed, 10 May 2023 13:57:25 +0700
Subject: [PATCH 087/354] feat(components): create breadcrumb component

---
 src/lib/components/DefaultBreadcrumb.tsx      | 58 ++++++++++++++++++
 src/lib/pages/account-details/index.tsx       | 42 +++----------
 src/lib/pages/block-details/index.tsx         | 35 ++---------
 src/lib/pages/code-details/index.tsx          | 60 +++++--------------
 .../components/ContractTop.tsx                | 41 +++----------
 src/lib/pages/contract-list/slug.tsx          | 35 ++---------
 .../components/DetailHeader.tsx               | 43 +++----------
 src/lib/pages/tx-details/index.tsx            | 36 +++--------
 8 files changed, 117 insertions(+), 233 deletions(-)
 create mode 100644 src/lib/components/DefaultBreadcrumb.tsx

diff --git a/src/lib/components/DefaultBreadcrumb.tsx b/src/lib/components/DefaultBreadcrumb.tsx
new file mode 100644
index 000000000..c5740f264
--- /dev/null
+++ b/src/lib/components/DefaultBreadcrumb.tsx
@@ -0,0 +1,58 @@
+import { Breadcrumb, BreadcrumbItem, Text } from "@chakra-ui/react";
+
+import { AppLink } from "./AppLink";
+import { CustomIcon } from "./icon";
+
+interface BreadcrumbProps {
+  primaryPage: string;
+  primaryPath: string;
+  secondaryPage?: string;
+  secondaryPath?: string;
+  currentPage: string;
+  mb?: string;
+}
+export const DefualtBreadcrumb = ({
+  primaryPage,
+  primaryPath,
+  secondaryPage = "",
+  secondaryPath = "",
+  currentPage,
+  mb = "0",
+}: BreadcrumbProps) => (
+  <Breadcrumb
+    w="full"
+    spacing="4px"
+    mb={mb}
+    separator={<CustomIcon name="chevron-right" boxSize="3" />}
+  >
+    <BreadcrumbItem
+      _hover={{ opacity: 0.8 }}
+      transition="all 0.25s ease-in-out"
+    >
+      <AppLink color="text.dark" href={primaryPath}>
+        {primaryPage}
+      </AppLink>
+    </BreadcrumbItem>
+    {secondaryPage && (
+      <BreadcrumbItem
+        _hover={{ opacity: 0.8 }}
+        transition="all 0.25s ease-in-out"
+      >
+        <AppLink color="text.dark" href={secondaryPath}>
+          {secondaryPage}
+        </AppLink>
+      </BreadcrumbItem>
+    )}
+    <BreadcrumbItem isCurrentPage>
+      <Text
+        variant="body2"
+        className="ellipsis"
+        fontWeight="600"
+        width="250px"
+        color="text.dark"
+      >
+        {currentPage}
+      </Text>
+    </BreadcrumbItem>
+  </Breadcrumb>
+);
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 5632d12fb..d032c4b05 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -8,16 +8,14 @@ import {
   Tabs,
   Text,
   Image,
-  Breadcrumb,
-  BreadcrumbItem,
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import { useValidateAddress } from "lib/app-provider";
-import { AppLink } from "lib/components/AppLink";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomTab } from "lib/components/CustomTab";
+import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb";
 import { CustomIcon } from "lib/components/icon";
 import PageContainer from "lib/components/PageContainer";
 import { InvalidState } from "lib/components/state";
@@ -95,36 +93,14 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
     <>
       <Flex direction="column" mb={6}>
         {publicDetail && (
-          <Breadcrumb
-            mb={6}
-            w="full"
-            spacing="4px"
-            separator={<CustomIcon name="chevron-right" boxSize="3" />}
-          >
-            <BreadcrumbItem
-              _hover={{ opacity: 0.8 }}
-              transition="all 0.25s ease-in-out"
-            >
-              <AppLink
-                color="text.dark"
-                href={`/public-project/${publicInfo?.slug}`}
-              >
-                {publicDetail?.name}
-              </AppLink>
-            </BreadcrumbItem>
-            <BreadcrumbItem isCurrentPage>
-              <Text
-                variant="body2"
-                className="ellipsis"
-                textTransform="lowercase"
-                fontWeight="600"
-                width="250px"
-                color="text.dark"
-              >
-                {truncate(accountAddress)}
-              </Text>
-            </BreadcrumbItem>
-          </Breadcrumb>
+          <DefualtBreadcrumb
+            mb="24px"
+            primaryPage="Public Projects"
+            primaryPath="/public-project"
+            secondaryPage={publicDetail?.name}
+            secondaryPath={`/public-project/${publicInfo?.slug}`}
+            currentPage={truncate(accountAddress)}
+          />
         )}
         <Flex direction="column" gap={2}>
           <Flex gap={1} minH="36px" align="center">
diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx
index b0d8966fd..9d05d36f8 100644
--- a/src/lib/pages/block-details/index.tsx
+++ b/src/lib/pages/block-details/index.tsx
@@ -1,9 +1,7 @@
-import { Breadcrumb, BreadcrumbItem, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { AppLink } from "lib/components/AppLink";
-import { CustomIcon } from "lib/components/icon";
+import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
@@ -32,32 +30,11 @@ const BlockDetail = () => {
 
   return (
     <PageContainer>
-      <Breadcrumb
-        w="full"
-        spacing="4px"
-        separator={<CustomIcon name="chevron-right" boxSize="3" />}
-      >
-        <BreadcrumbItem
-          _hover={{ opacity: 0.8 }}
-          transition="all 0.25s ease-in-out"
-        >
-          <AppLink color="text.dark" href="/blocks">
-            Blocks
-          </AppLink>
-        </BreadcrumbItem>
-        <BreadcrumbItem isCurrentPage>
-          <Text
-            variant="body2"
-            className="ellipsis"
-            textTransform="lowercase"
-            fontWeight="600"
-            width="250px"
-            color="text.dark"
-          >
-            {blockData?.height}
-          </Text>
-        </BreadcrumbItem>
-      </Breadcrumb>
+      <DefualtBreadcrumb
+        primaryPage="Blocks"
+        primaryPath="/blocks"
+        currentPage={blockData?.height.toString() ?? ""}
+      />
       {blockData ? (
         <>
           <BlockDetailsTop blockData={blockData} />
diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index ab74628da..7d50e3531 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -1,18 +1,10 @@
-import {
-  Divider,
-  Flex,
-  Heading,
-  Text,
-  Image,
-  Breadcrumb,
-  BreadcrumbItem,
-} from "@chakra-ui/react";
+import { Divider, Flex, Heading, Text, Image } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { AppLink } from "lib/components/AppLink";
 import { CopyLink } from "lib/components/CopyLink";
+import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb";
 import { CustomIcon } from "lib/components/icon";
 import { GitHubLink } from "lib/components/links";
 import { Loading } from "lib/components/Loading";
@@ -50,41 +42,19 @@ const CodeDetailsBody = observer(
     return (
       <>
         <Flex direction="column">
-          <Breadcrumb
-            w="full"
-            spacing="4px"
-            separator={<CustomIcon name="chevron-right" boxSize="3" />}
-          >
-            <BreadcrumbItem
-              _hover={{ opacity: 0.8 }}
-              transition="all 0.25s ease-in-out"
-            >
-              {publicProject.publicCodeData?.name ? (
-                <AppLink
-                  color="text.dark"
-                  href={`/public-project/${publicProject.publicCodeData?.slug}`}
-                >
-                  {publicProject.publicDetail?.name}
-                </AppLink>
-              ) : (
-                <AppLink color="text.dark" href="/recent-codes">
-                  Recents Codes
-                </AppLink>
-              )}
-            </BreadcrumbItem>
-            <BreadcrumbItem isCurrentPage>
-              <Text
-                variant="body2"
-                className="ellipsis"
-                textTransform="lowercase"
-                fontWeight="600"
-                width="250px"
-                color="text.dark"
-              >
-                {codeId}
-              </Text>
-            </BreadcrumbItem>
-          </Breadcrumb>
+          <DefualtBreadcrumb
+            primaryPage={
+              publicProject.publicCodeData?.name ? "Public Projects" : "Codes"
+            }
+            primaryPath={
+              publicProject.publicCodeData?.name
+                ? `/public-project`
+                : "/recent-codes"
+            }
+            secondaryPage={publicProject.publicDetail?.name}
+            secondaryPath={`/public-project/${publicProject.publicCodeData?.slug}`}
+            currentPage={codeId.toString() ?? ""}
+          />
           <Flex direction="column" gap={2} w="full" mt={6}>
             <Flex justify="space-between" align="center">
               <Flex gap={1}>
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index 4efa2d31a..bc1c329a4 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/src/lib/pages/contract-details/components/ContractTop.tsx
@@ -5,15 +5,13 @@ import {
   Button,
   IconButton,
   Image,
-  Breadcrumb,
-  BreadcrumbItem,
 } from "@chakra-ui/react";
 import router from "next/router";
 
 import { useInternalNavigate } from "lib/app-provider";
-import { AppLink } from "lib/components/AppLink";
 import { AdminButton } from "lib/components/button";
 import { CopyLink } from "lib/components/CopyLink";
+import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb";
 import { CustomIcon } from "lib/components/icon";
 import { GitHubLink } from "lib/components/links";
 import {
@@ -100,35 +98,14 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
     <Flex justify="space-between" mb={6}>
       <Flex direction="column" w="full">
         {publicProject.publicDetail && (
-          <Breadcrumb
-            w="full"
-            spacing="4px"
-            mb={6}
-            separator={<CustomIcon name="chevron-right" boxSize="3" />}
-          >
-            <BreadcrumbItem
-              _hover={{ opacity: 0.8 }}
-              transition="all 0.25s ease-in-out"
-            >
-              <AppLink
-                color="text.dark"
-                href={`/public-project/${publicProject.publicInfo?.slug}`}
-              >
-                {publicProject.publicDetail.name}
-              </AppLink>
-            </BreadcrumbItem>
-            <BreadcrumbItem isCurrentPage>
-              <Text
-                variant="body2"
-                className="ellipsis"
-                width="250px"
-                fontWeight="600"
-                color="text.dark"
-              >
-                {truncate(contractAddress)}
-              </Text>
-            </BreadcrumbItem>
-          </Breadcrumb>
+          <DefualtBreadcrumb
+            mb="24px"
+            primaryPage="Public Projects"
+            primaryPath="/public-project"
+            secondaryPage={publicProject.publicDetail.name}
+            secondaryPath={`/public-project/${publicProject.publicInfo?.slug}`}
+            currentPage={truncate(contractAddress)}
+          />
         )}
         <Flex direction="column" gap={2} textOverflow="ellipsis" w="full">
           <Flex justify="space-between" align="center">
diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx
index a6ae43a94..45446a8b8 100644
--- a/src/lib/pages/contract-list/slug.tsx
+++ b/src/lib/pages/contract-list/slug.tsx
@@ -5,16 +5,13 @@ import {
   Menu,
   MenuButton,
   MenuList,
-  Breadcrumb,
-  BreadcrumbItem,
-  Text,
 } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { useInternalNavigate } from "lib/app-provider";
-import { AppLink } from "lib/components/AppLink";
+import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb";
 import { CustomIcon } from "lib/components/icon";
 import {
   EditListNameModal,
@@ -80,31 +77,11 @@ const ContractsByList = observer(() => {
 
   return (
     <PageContainer>
-      <Breadcrumb
-        w="full"
-        spacing="4px"
-        separator={<CustomIcon name="chevron-right" boxSize="3" />}
-      >
-        <BreadcrumbItem
-          _hover={{ opacity: 0.8 }}
-          transition="all 0.25s ease-in-out"
-        >
-          <AppLink color="text.dark" href="/contract-list">
-            Contract Lists
-          </AppLink>
-        </BreadcrumbItem>
-        <BreadcrumbItem isCurrentPage>
-          <Text
-            variant="body2"
-            className="ellipsis"
-            width="250px"
-            fontWeight="600"
-            color="text.dark"
-          >
-            {contractListInfo.name}
-          </Text>
-        </BreadcrumbItem>
-      </Breadcrumb>
+      <DefualtBreadcrumb
+        primaryPage="Contract Lists"
+        primaryPath="/contract-list"
+        currentPage={contractListInfo.name}
+      />
       <Flex
         justifyContent="space-between"
         alignItems="center"
diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx
index 0d9f5aecf..fec53c610 100644
--- a/src/lib/pages/public-project/components/DetailHeader.tsx
+++ b/src/lib/pages/public-project/components/DetailHeader.tsx
@@ -1,15 +1,6 @@
-import {
-  Box,
-  Breadcrumb,
-  BreadcrumbItem,
-  Text,
-  Flex,
-  Heading,
-  Image,
-} from "@chakra-ui/react";
+import { Box, Text, Flex, Heading, Image } from "@chakra-ui/react";
 
-import { AppLink } from "lib/components/AppLink";
-import { CustomIcon } from "lib/components/icon";
+import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb";
 import type { Option, PublicDetail } from "lib/types";
 import { getNameAndDescriptionDefault } from "lib/utils";
 
@@ -22,31 +13,11 @@ interface DetailHeaderProps {
 }
 export const DetailHeader = ({ details, slug }: DetailHeaderProps) => (
   <>
-    <Breadcrumb
-      w="full"
-      spacing={1}
-      separator={<CustomIcon name="chevron-right" boxSize="3" />}
-    >
-      <BreadcrumbItem
-        _hover={{ opacity: 0.8 }}
-        transition="all 0.25s ease-in-out"
-      >
-        <AppLink color="text.dark" href="/public-project">
-          Public Projects
-        </AppLink>
-      </BreadcrumbItem>
-      <BreadcrumbItem isCurrentPage>
-        <Text
-          variant="body2"
-          className="ellipsis"
-          width="250px"
-          fontWeight="600"
-          color="text.dark"
-        >
-          {details?.name}
-        </Text>
-      </BreadcrumbItem>
-    </Breadcrumb>
+    <DefualtBreadcrumb
+      primaryPage="Public Projects"
+      primaryPath="/public-project"
+      currentPage={details?.name ?? ""}
+    />
     <Flex
       justifyContent="space-between"
       alignItems="flex-start"
diff --git a/src/lib/pages/tx-details/index.tsx b/src/lib/pages/tx-details/index.tsx
index 5202c18b9..4c77b4e17 100644
--- a/src/lib/pages/tx-details/index.tsx
+++ b/src/lib/pages/tx-details/index.tsx
@@ -1,9 +1,8 @@
-import { Breadcrumb, BreadcrumbItem, Flex, Text } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { AppLink } from "lib/components/AppLink";
-import { CustomIcon } from "lib/components/icon";
+import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state/EmptyState";
@@ -45,32 +44,11 @@ const TxDetails = () => {
 
   return (
     <PageContainer>
-      <Breadcrumb
-        w="full"
-        spacing="4px"
-        separator={<CustomIcon name="chevron-right" boxSize="3" />}
-      >
-        <BreadcrumbItem
-          _hover={{ opacity: 0.8 }}
-          transition="all 0.25s ease-in-out"
-        >
-          <AppLink color="text.dark" href="/txs">
-            Transactions
-          </AppLink>
-        </BreadcrumbItem>
-        <BreadcrumbItem isCurrentPage>
-          <Text
-            variant="body2"
-            className="ellipsis"
-            textTransform="lowercase"
-            fontWeight="600"
-            width="250px"
-            color="text.dark"
-          >
-            {truncate(txData?.txhash)}
-          </Text>
-        </BreadcrumbItem>
-      </Breadcrumb>
+      <DefualtBreadcrumb
+        primaryPage="Transactions"
+        primaryPath="/txs"
+        currentPage={truncate(txData?.txhash)}
+      />
       {txData ? (
         <>
           <TxHeader mt={6} txData={txData} />

From 66fbbf957cb8fa3e4806e24fbd345595e5e6c3de Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Wed, 10 May 2023 14:02:57 +0700
Subject: [PATCH 088/354] fix(components): add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 820ac7839..a4a07db53 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
 
 ### Improvements
 
+- [#323](https://github.com/alleslabs/celatone-frontend/pull/323) Revise back button and breadcrumb components
 - [#298](https://github.com/alleslabs/celatone-frontend/pull/298) Show deposit/voting period from gov params and add minimum required alert
 
 ### Bug fixes

From 5956f744c1732c0260319d4c24c7978f2164faf4 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 10 May 2023 14:25:18 +0700
Subject: [PATCH 089/354] feat: add initial deposit to proposal to store code
 page

---
 src/lib/pages/proposal/store-code/index.tsx | 33 +++++++++++++++++----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index a4327b407..fe2842ee1 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -55,7 +55,11 @@ import type {
   UploadSectionState,
 } from "lib/types";
 import { AccessType } from "lib/types";
-import { composeStoreCodeProposalMsg, getAmountToVote } from "lib/utils";
+import {
+  composeStoreCodeProposalMsg,
+  formatSeconds,
+  getAmountToVote,
+} from "lib/utils";
 
 interface StoreCodeProposalState {
   title: string;
@@ -508,10 +512,29 @@ const StoreCodeProposal = () => {
                 <Heading as="h6" variant="h6" mt={12}>
                   Initial Deposit
                 </Heading>
-                <Text color="text.dark" mt={2} fontWeight={500} variant="body2">
-                  Minimum deposit required to start 7-day voting period:{" "}
-                  {minDeposit?.formattedToken}
-                </Text>
+                <Box>
+                  <Text
+                    color="text.dark"
+                    mt={2}
+                    fontWeight={500}
+                    variant="body2"
+                  >
+                    Minimum deposit required to start{" "}
+                    {formatSeconds(govParams?.depositParams.maxDepositPeriod)}{" "}
+                    deposit period: {govParams?.depositParams.minInitialDeposit}{" "}
+                    {minDeposit?.formattedDenom}
+                  </Text>
+                  <Text
+                    color="text.dark"
+                    mt={2}
+                    fontWeight={500}
+                    variant="body2"
+                  >
+                    Minimum deposit required to start{" "}
+                    {formatSeconds(govParams?.votingParams.votingPeriod)} voting
+                    period: {minDeposit?.formattedToken}
+                  </Text>
+                </Box>
                 <Grid py={6} columnGap={4} templateColumns="1fr 3fr">
                   <AssetBox baseDenom={initialDeposit.denom} />
                   <ControllerInput

From b4efa6476686b63fa07bb7e7bd69db385df8ae07 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 10 May 2023 14:38:12 +0700
Subject: [PATCH 090/354] chore: create initialDeposit component and add
 changelog

---
 CHANGELOG.md                                  |  1 +
 .../proposal/components/InitialDeposit.tsx    | 28 +++++++++++++++
 src/lib/pages/proposal/store-code/index.tsx   | 34 ++-----------------
 src/lib/pages/proposal/whitelist/index.tsx    | 22 ++----------
 4 files changed, 35 insertions(+), 50 deletions(-)
 create mode 100644 src/lib/pages/proposal/components/InitialDeposit.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aa372d57a..9bc881581 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -44,6 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#324](https://github.com/alleslabs/celatone-frontend/pull/324) Add deposit/voting period from gov params and add minimum required alert for proposal to store code
 - [#298](https://github.com/alleslabs/celatone-frontend/pull/298) Show deposit/voting period from gov params and add minimum required alert
 
 ### Bug fixes
diff --git a/src/lib/pages/proposal/components/InitialDeposit.tsx b/src/lib/pages/proposal/components/InitialDeposit.tsx
new file mode 100644
index 000000000..697697448
--- /dev/null
+++ b/src/lib/pages/proposal/components/InitialDeposit.tsx
@@ -0,0 +1,28 @@
+import { Text, Box, Heading } from "@chakra-ui/react";
+
+import { useGovParams } from "lib/services/proposalService";
+import { formatSeconds } from "lib/utils";
+
+export const InitialDeposit = () => {
+  const { data: govParams } = useGovParams();
+  const minDeposit = govParams?.depositParams.minDeposit;
+
+  return (
+    <Box>
+      <Heading as="h6" variant="h6" mt={12}>
+        Initial Deposit
+      </Heading>
+      <Text color="text.dark" mt={2} fontWeight={500} variant="body2">
+        Minimum deposit required to start{" "}
+        {formatSeconds(govParams?.depositParams.maxDepositPeriod)} deposit
+        period: {govParams?.depositParams.minInitialDeposit}{" "}
+        {minDeposit?.formattedDenom}
+      </Text>
+      <Text color="text.dark" mt={2} fontWeight={500} variant="body2">
+        Minimum deposit required to start{" "}
+        {formatSeconds(govParams?.votingParams.votingPeriod)} voting period:{" "}
+        {minDeposit?.formattedToken}
+      </Text>
+    </Box>
+  );
+};
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index fe2842ee1..b0097e796 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -16,6 +16,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { AssetBox, Footer } from "../components";
+import { InitialDeposit } from "../components/InitialDeposit";
 import {
   SIDEBAR_STORE_CODE_DETAILS,
   PROPOSAL_STORE_CODE_TEXT,
@@ -55,11 +56,7 @@ import type {
   UploadSectionState,
 } from "lib/types";
 import { AccessType } from "lib/types";
-import {
-  composeStoreCodeProposalMsg,
-  formatSeconds,
-  getAmountToVote,
-} from "lib/utils";
+import { composeStoreCodeProposalMsg, getAmountToVote } from "lib/utils";
 
 interface StoreCodeProposalState {
   title: string;
@@ -509,32 +506,7 @@ const StoreCodeProposal = () => {
                 />
 
                 {/* Deposit  */}
-                <Heading as="h6" variant="h6" mt={12}>
-                  Initial Deposit
-                </Heading>
-                <Box>
-                  <Text
-                    color="text.dark"
-                    mt={2}
-                    fontWeight={500}
-                    variant="body2"
-                  >
-                    Minimum deposit required to start{" "}
-                    {formatSeconds(govParams?.depositParams.maxDepositPeriod)}{" "}
-                    deposit period: {govParams?.depositParams.minInitialDeposit}{" "}
-                    {minDeposit?.formattedDenom}
-                  </Text>
-                  <Text
-                    color="text.dark"
-                    mt={2}
-                    fontWeight={500}
-                    variant="body2"
-                  >
-                    Minimum deposit required to start{" "}
-                    {formatSeconds(govParams?.votingParams.votingPeriod)} voting
-                    period: {minDeposit?.formattedToken}
-                  </Text>
-                </Box>
+                <InitialDeposit />
                 <Grid py={6} columnGap={4} templateColumns="1fr 3fr">
                   <AssetBox baseDenom={initialDeposit.denom} />
                   <ControllerInput
diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index d7f9d23c7..d51dc498e 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -14,6 +14,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 
 import { AssetBox, Footer } from "../components";
+import { InitialDeposit } from "../components/InitialDeposit";
 import { TestnetAlert } from "../components/TestnetAlert";
 import { SIDEBAR_WHITELIST_DETAILS } from "../constants";
 import { getAlert } from "../utils";
@@ -40,11 +41,7 @@ import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { useGovParams } from "lib/services/proposalService";
 import type { Addr } from "lib/types";
-import {
-  composeSubmitWhitelistProposalMsg,
-  getAmountToVote,
-  formatSeconds,
-} from "lib/utils";
+import { composeSubmitWhitelistProposalMsg, getAmountToVote } from "lib/utils";
 
 interface WhiteListState {
   title: string;
@@ -339,20 +336,7 @@ const ProposalToWhitelist = () => {
               >
                 Add More Address
               </Button>
-              <Heading as="h6" variant="h6" mt={12}>
-                Initial Deposit
-              </Heading>
-              <Text color="text.dark" mt={2} fontWeight={500} variant="body2">
-                Minimum deposit required to start{" "}
-                {formatSeconds(govParams?.depositParams.maxDepositPeriod)}{" "}
-                deposit period: {govParams?.depositParams.minInitialDeposit}{" "}
-                {minDeposit?.formattedDenom}
-              </Text>
-              <Text color="text.dark" mt={2} fontWeight={500} variant="body2">
-                Minimum deposit required to start{" "}
-                {formatSeconds(govParams?.votingParams.votingPeriod)} voting
-                period: {minDeposit?.formattedToken}
-              </Text>
+              <InitialDeposit />
               <Grid py={6} columnGap={4} templateColumns="1fr 3fr">
                 <AssetBox baseDenom={initialDeposit.denom} />
                 <ControllerInput

From bbc073a9a35aa5f25f0f32af1b06a74a9306ce28 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Wed, 10 May 2023 14:38:28 +0700
Subject: [PATCH 091/354] fix(components): fix as comment

---
 src/lib/components/DefaultBreadcrumb.tsx                   | 2 +-
 src/lib/pages/account-details/index.tsx                    | 4 ++--
 src/lib/pages/block-details/components/BlockDetailsTop.tsx | 2 +-
 src/lib/pages/block-details/index.tsx                      | 4 ++--
 src/lib/pages/code-details/index.tsx                       | 4 ++--
 src/lib/pages/contract-details/components/ContractTop.tsx  | 4 ++--
 src/lib/pages/contract-list/slug.tsx                       | 4 ++--
 src/lib/pages/public-project/components/DetailHeader.tsx   | 4 ++--
 src/lib/pages/tx-details/index.tsx                         | 4 ++--
 9 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/DefaultBreadcrumb.tsx b/src/lib/components/DefaultBreadcrumb.tsx
index c5740f264..577262488 100644
--- a/src/lib/components/DefaultBreadcrumb.tsx
+++ b/src/lib/components/DefaultBreadcrumb.tsx
@@ -11,7 +11,7 @@ interface BreadcrumbProps {
   currentPage: string;
   mb?: string;
 }
-export const DefualtBreadcrumb = ({
+export const DefaultBreadcrumb = ({
   primaryPage,
   primaryPath,
   secondaryPage = "",
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index d032c4b05..0a8e602a2 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -15,7 +15,7 @@ import { useEffect, useState } from "react";
 import { useValidateAddress } from "lib/app-provider";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomTab } from "lib/components/CustomTab";
-import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb";
+import { DefaultBreadcrumb } from "lib/components/DefaultBreadcrumb";
 import { CustomIcon } from "lib/components/icon";
 import PageContainer from "lib/components/PageContainer";
 import { InvalidState } from "lib/components/state";
@@ -93,7 +93,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
     <>
       <Flex direction="column" mb={6}>
         {publicDetail && (
-          <DefualtBreadcrumb
+          <DefaultBreadcrumb
             mb="24px"
             primaryPage="Public Projects"
             primaryPath="/public-project"
diff --git a/src/lib/pages/block-details/components/BlockDetailsTop.tsx b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
index 295b59ff2..85791eae0 100644
--- a/src/lib/pages/block-details/components/BlockDetailsTop.tsx
+++ b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
@@ -101,7 +101,7 @@ export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
             <Text variant="body2" color="text.dark">
               {formatUTC(blockData.timestamp)}
             </Text>
-          </Flex>{" "}
+          </Flex>
         </Flex>
       </Flex>
     </Flex>
diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx
index 9d05d36f8..8ea079b15 100644
--- a/src/lib/pages/block-details/index.tsx
+++ b/src/lib/pages/block-details/index.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb";
+import { DefaultBreadcrumb } from "lib/components/DefaultBreadcrumb";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
@@ -30,7 +30,7 @@ const BlockDetail = () => {
 
   return (
     <PageContainer>
-      <DefualtBreadcrumb
+      <DefaultBreadcrumb
         primaryPage="Blocks"
         primaryPath="/blocks"
         currentPage={blockData?.height.toString() ?? ""}
diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index 7d50e3531..8796bd6bc 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { CopyLink } from "lib/components/CopyLink";
-import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb";
+import { DefaultBreadcrumb } from "lib/components/DefaultBreadcrumb";
 import { CustomIcon } from "lib/components/icon";
 import { GitHubLink } from "lib/components/links";
 import { Loading } from "lib/components/Loading";
@@ -42,7 +42,7 @@ const CodeDetailsBody = observer(
     return (
       <>
         <Flex direction="column">
-          <DefualtBreadcrumb
+          <DefaultBreadcrumb
             primaryPage={
               publicProject.publicCodeData?.name ? "Public Projects" : "Codes"
             }
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index bc1c329a4..2bad4ec19 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/src/lib/pages/contract-details/components/ContractTop.tsx
@@ -11,7 +11,7 @@ import router from "next/router";
 import { useInternalNavigate } from "lib/app-provider";
 import { AdminButton } from "lib/components/button";
 import { CopyLink } from "lib/components/CopyLink";
-import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb";
+import { DefaultBreadcrumb } from "lib/components/DefaultBreadcrumb";
 import { CustomIcon } from "lib/components/icon";
 import { GitHubLink } from "lib/components/links";
 import {
@@ -98,7 +98,7 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
     <Flex justify="space-between" mb={6}>
       <Flex direction="column" w="full">
         {publicProject.publicDetail && (
-          <DefualtBreadcrumb
+          <DefaultBreadcrumb
             mb="24px"
             primaryPage="Public Projects"
             primaryPath="/public-project"
diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx
index 45446a8b8..1aac796a3 100644
--- a/src/lib/pages/contract-list/slug.tsx
+++ b/src/lib/pages/contract-list/slug.tsx
@@ -11,7 +11,7 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { useInternalNavigate } from "lib/app-provider";
-import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb";
+import { DefaultBreadcrumb } from "lib/components/DefaultBreadcrumb";
 import { CustomIcon } from "lib/components/icon";
 import {
   EditListNameModal,
@@ -77,7 +77,7 @@ const ContractsByList = observer(() => {
 
   return (
     <PageContainer>
-      <DefualtBreadcrumb
+      <DefaultBreadcrumb
         primaryPage="Contract Lists"
         primaryPath="/contract-list"
         currentPage={contractListInfo.name}
diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx
index fec53c610..aba6173db 100644
--- a/src/lib/pages/public-project/components/DetailHeader.tsx
+++ b/src/lib/pages/public-project/components/DetailHeader.tsx
@@ -1,6 +1,6 @@
 import { Box, Text, Flex, Heading, Image } from "@chakra-ui/react";
 
-import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb";
+import { DefaultBreadcrumb } from "lib/components/DefaultBreadcrumb";
 import type { Option, PublicDetail } from "lib/types";
 import { getNameAndDescriptionDefault } from "lib/utils";
 
@@ -13,7 +13,7 @@ interface DetailHeaderProps {
 }
 export const DetailHeader = ({ details, slug }: DetailHeaderProps) => (
   <>
-    <DefualtBreadcrumb
+    <DefaultBreadcrumb
       primaryPage="Public Projects"
       primaryPath="/public-project"
       currentPage={details?.name ?? ""}
diff --git a/src/lib/pages/tx-details/index.tsx b/src/lib/pages/tx-details/index.tsx
index 4c77b4e17..bc3ec4dee 100644
--- a/src/lib/pages/tx-details/index.tsx
+++ b/src/lib/pages/tx-details/index.tsx
@@ -2,7 +2,7 @@ import { Flex } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { DefualtBreadcrumb } from "lib/components/DefaultBreadcrumb";
+import { DefaultBreadcrumb } from "lib/components/DefaultBreadcrumb";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state/EmptyState";
@@ -44,7 +44,7 @@ const TxDetails = () => {
 
   return (
     <PageContainer>
-      <DefualtBreadcrumb
+      <DefaultBreadcrumb
         primaryPage="Transactions"
         primaryPath="/txs"
         currentPage={truncate(txData?.txhash)}

From 582bd9870a67c343e650319bb32e54dfd5333c1c Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Wed, 10 May 2023 15:46:52 +0700
Subject: [PATCH 092/354] fix(components): add icon

---
 src/lib/pages/account-details/index.tsx                   | 1 +
 src/lib/pages/blocks/components/BlocksRow.tsx             | 2 +-
 src/lib/pages/code-details/index.tsx                      | 1 +
 src/lib/pages/contract-details/components/ContractTop.tsx | 5 +++++
 4 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 0a8e602a2..16c772195 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -104,6 +104,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
         )}
         <Flex direction="column" gap={2}>
           <Flex gap={1} minH="36px" align="center">
+            <CustomIcon name="wallet" boxSize="5" color="lilac.main" />
             {publicDetail?.logo && (
               <Image
                 src={publicDetail.logo}
diff --git a/src/lib/pages/blocks/components/BlocksRow.tsx b/src/lib/pages/blocks/components/BlocksRow.tsx
index 39a0ad498..cfe6dfb52 100644
--- a/src/lib/pages/blocks/components/BlocksRow.tsx
+++ b/src/lib/pages/blocks/components/BlocksRow.tsx
@@ -26,7 +26,7 @@ export const BlocksRow = ({ templateColumns, blockData }: BlocksRowProps) => {
       </TableRow>
       <TableRow>{truncate(blockData.hash.toUpperCase())}</TableRow>
       <TableRow>
-        <ValidatorBadge validator={blockData.proposer} />
+        <ValidatorBadge validator={blockData.proposer} badgeSize={7} />
       </TableRow>
       <TableRow
         justifyContent="center"
diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index 8796bd6bc..2368d7894 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -58,6 +58,7 @@ const CodeDetailsBody = observer(
           <Flex direction="column" gap={2} w="full" mt={6}>
             <Flex justify="space-between" align="center">
               <Flex gap={1}>
+                <CustomIcon name="code" boxSize="5" color="lilac.main" />
                 {publicProject.publicDetail?.logo && (
                   <Image
                     src={publicProject.publicDetail.logo}
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index 2bad4ec19..5f7e2b866 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/src/lib/pages/contract-details/components/ContractTop.tsx
@@ -110,6 +110,11 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
         <Flex direction="column" gap={2} textOverflow="ellipsis" w="full">
           <Flex justify="space-between" align="center">
             <Flex gap={1} maxW="670px">
+              <CustomIcon
+                name="contract-address"
+                boxSize="5"
+                color="lilac.main"
+              />
               {publicProject.publicDetail?.logo && (
                 <Image
                   src={publicProject.publicDetail.logo}

From 825b6b709ae7c6f960fc760bfc5dd48ef9622ff7 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 10 May 2023 17:44:40 +0700
Subject: [PATCH 093/354] fix: pool txs accordion arrow to the front

---
 .../tables/pool-txs/PoolTxsMsg.tsx            | 19 +++++++++----------
 .../tables/pool-txs/PoolTxsTable.tsx          |  2 +-
 .../tables/pool-txs/PoolTxsTableHeader.tsx    |  2 +-
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
index f333f27b9..150a7c874 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -46,6 +46,15 @@ export const PoolTxsMsg = ({
         transition="all .25s ease-in-out"
         cursor="pointer"
       >
+        <TableNoBorderRow>
+          {transaction.success && (
+            <CustomIcon
+              name="chevron-down"
+              transform={isOpen ? "rotate(0)" : "rotate(-90deg)"}
+              transition="all .25s ease-in-out"
+            />
+          )}
+        </TableNoBorderRow>
         <TableNoBorderRow>
           {msgIndex === 0 && (
             <>
@@ -92,16 +101,6 @@ export const PoolTxsMsg = ({
             </Flex>
           )}
         </TableNoBorderRow>
-
-        {transaction.success && (
-          <TableNoBorderRow>
-            <CustomIcon
-              name="chevron-down"
-              transform={isOpen ? "rotate(180deg)" : "rotate(0)"}
-              transition="all .25s ease-in-out"
-            />
-          </TableNoBorderRow>
-        )}
       </Grid>
       {transaction.success && (
         <Grid
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
index 0b8020a2d..68c69bd9d 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
@@ -24,7 +24,7 @@ export const PoolTxsTable = ({
   if (!transactions?.length) return emptyState;
 
   const templateColumns =
-    "180px 40px minmax(360px, 1fr) max(150px) max(220px) 60px";
+    "30px 180px 40px minmax(360px, 1fr) max(150px) max(220px)";
 
   return (
     <TableContainer>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableHeader.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableHeader.tsx
index 0099e7331..2cf394e5c 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableHeader.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableHeader.tsx
@@ -9,11 +9,11 @@ export const PoolTxsTableHeader = ({
   templateColumns: GridProps["templateColumns"];
 }) => (
   <Grid templateColumns={templateColumns} minW="min-content">
+    <TableHeader />
     <TableHeader>Transaction Hash</TableHeader>
     <TableHeader />
     <TableHeader>Actions</TableHeader>
     <TableHeader>Sender</TableHeader>
     <TableHeader>Timestamp</TableHeader>
-    <TableHeader />
   </Grid>
 );

From 0a8a2153cd85b93d261089bca38a279ff8cc0ee7 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 11 May 2023 10:32:56 +0700
Subject: [PATCH 094/354] fix: as comments

---
 .../proposal/components/InitialDeposit.tsx    | 10 ++-
 src/lib/pages/proposal/store-code/index.tsx   |  2 +-
 src/lib/pages/proposal/whitelist/index.tsx    |  2 +-
 src/lib/services/proposalService.ts           | 79 ++++++++++---------
 4 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/src/lib/pages/proposal/components/InitialDeposit.tsx b/src/lib/pages/proposal/components/InitialDeposit.tsx
index 697697448..1ac04036d 100644
--- a/src/lib/pages/proposal/components/InitialDeposit.tsx
+++ b/src/lib/pages/proposal/components/InitialDeposit.tsx
@@ -1,10 +1,14 @@
 import { Text, Box, Heading } from "@chakra-ui/react";
 
-import { useGovParams } from "lib/services/proposalService";
+import type { GovParams } from "lib/services/proposalService";
+import type { Option } from "lib/types";
 import { formatSeconds } from "lib/utils";
 
-export const InitialDeposit = () => {
-  const { data: govParams } = useGovParams();
+interface InitialDepositProps {
+  govParams: Option<GovParams>;
+}
+
+export const InitialDeposit = ({ govParams }: InitialDepositProps) => {
   const minDeposit = govParams?.depositParams.minDeposit;
 
   return (
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index b0097e796..2d214ee20 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -506,7 +506,7 @@ const StoreCodeProposal = () => {
                 />
 
                 {/* Deposit  */}
-                <InitialDeposit />
+                <InitialDeposit govParams={govParams} />
                 <Grid py={6} columnGap={4} templateColumns="1fr 3fr">
                   <AssetBox baseDenom={initialDeposit.denom} />
                   <ControllerInput
diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index d51dc498e..bb7e82049 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -336,7 +336,7 @@ const ProposalToWhitelist = () => {
               >
                 Add More Address
               </Button>
-              <InitialDeposit />
+              <InitialDeposit govParams={govParams} />
               <Grid py={6} columnGap={4} templateColumns="1fr 3fr">
                 <AssetBox baseDenom={initialDeposit.denom} />
                 <ControllerInput
diff --git a/src/lib/services/proposalService.ts b/src/lib/services/proposalService.ts
index 81e8afec6..2cb6e60e1 100644
--- a/src/lib/services/proposalService.ts
+++ b/src/lib/services/proposalService.ts
@@ -289,50 +289,51 @@ interface DepositParamsReturn
   minInitialDeposit: Token;
 }
 
-export const useGovParams = (): UseQueryResult<{
+export interface GovParams {
   depositParams: DepositParamsReturn;
   uploadAccess: UploadAccess;
   votingParams: VotingParamsInternal;
-}> => {
+}
+
+export const useGovParams = (): UseQueryResult<GovParams> => {
   const lcdEndpoint = useLCDEndpoint();
-  const queryFn = useCallback(() => {
-    return Promise.all([
-      fetchGovDepositParams(lcdEndpoint),
-      fetchGovUploadAccessParams(lcdEndpoint),
-      fetchGovVotingParams(lcdEndpoint),
-    ]).then<{
-      depositParams: DepositParamsReturn;
-      uploadAccess: UploadAccess;
-      votingParams: VotingParamsInternal;
-    }>((params) => {
-      const minDepositParam = params[0].minDeposit[0];
-      const [minDepositAmount, minDepositDenom] = [
-        demicrofy(minDepositParam.amount as U<Token>).toFixed(),
-        getTokenLabel(minDepositParam.denom),
-      ];
-      return {
-        depositParams: {
-          ...params[0],
-          minDeposit: {
-            ...minDepositParam,
-            amount: minDepositParam.amount as U<Token>,
-            formattedAmount: minDepositAmount as Token,
-            formattedDenom: minDepositDenom,
-            formattedToken: formatBalanceWithDenom({
-              coin: minDepositParam,
-              precision: 6,
-              decimalPoints: 2,
-            }),
+  const queryFn = useCallback(
+    () =>
+      Promise.all([
+        fetchGovDepositParams(lcdEndpoint),
+        fetchGovUploadAccessParams(lcdEndpoint),
+        fetchGovVotingParams(lcdEndpoint),
+      ]).then<GovParams>((params) => {
+        const minDepositParam = params[0].minDeposit[0];
+        const [minDepositAmount, minDepositDenom] = [
+          demicrofy(minDepositParam.amount as U<Token>).toFixed(),
+          getTokenLabel(minDepositParam.denom),
+        ];
+
+        return {
+          depositParams: {
+            ...params[0],
+            minDeposit: {
+              ...minDepositParam,
+              amount: minDepositParam.amount as U<Token>,
+              formattedAmount: minDepositAmount as Token,
+              formattedDenom: minDepositDenom,
+              formattedToken: formatBalanceWithDenom({
+                coin: minDepositParam,
+                precision: 6,
+                decimalPoints: 2,
+              }),
+            },
+            minInitialDeposit: big(params[0].minInitialDepositRatio)
+              .times(minDepositAmount)
+              .toFixed(2) as Token,
           },
-          minInitialDeposit: big(params[0].minInitialDepositRatio)
-            .times(minDepositAmount)
-            .toFixed(2) as Token,
-        },
-        uploadAccess: params[1],
-        votingParams: params[2],
-      };
-    });
-  }, [lcdEndpoint]);
+          uploadAccess: params[1],
+          votingParams: params[2],
+        };
+      }),
+    [lcdEndpoint]
+  );
 
   return useQuery(["gov_params", lcdEndpoint], queryFn, {
     keepPreviousData: true,

From 3d4173394a7e505b2ac208429152ecc12ff1feed Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 11 May 2023 10:41:36 +0700
Subject: [PATCH 095/354] chore: enable route to proposal to store code

---
 src/lib/components/button/NewProposalButton.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/button/NewProposalButton.tsx b/src/lib/components/button/NewProposalButton.tsx
index ff1a8b376..41d32d6f1 100644
--- a/src/lib/components/button/NewProposalButton.tsx
+++ b/src/lib/components/button/NewProposalButton.tsx
@@ -32,17 +32,16 @@ export const NewProposalButton = () => {
         Create New Proposal
       </MenuButton>
       <MenuList>
-        {/* <StyledMenuItem
+        <StyledMenuItem
           icon={<CustomIcon name="code" />}
-          // TODO - Change navigation path
           onClick={() => {
             navigate({
-              pathname: "/proposal-storecode",
+              pathname: "/proposal/store-code",
             });
           }}
         >
           To Store Code
-        </StyledMenuItem> */}
+        </StyledMenuItem>
         {/* <StyledMenuItem
           icon={<CustomIcon name="contract-address" />}
           onClick={() => {

From 3f2f09f00429381e5bdab8ad897dc5bf12b67ec4 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 11 May 2023 11:02:20 +0700
Subject: [PATCH 096/354] refactor: amplitude properties and remove unnecessary
 dependencies

---
 .../upload/InstantiatePermissionRadio.tsx     |  2 +-
 src/lib/pages/proposal/constants.tsx          |  5 ++++-
 src/lib/pages/proposal/store-code/index.tsx   | 18 +++++++--------
 src/lib/services/amplitude.tsx                | 22 +++++++++++--------
 4 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/upload/InstantiatePermissionRadio.tsx b/src/lib/components/upload/InstantiatePermissionRadio.tsx
index 4796d403d..17d37b68b 100644
--- a/src/lib/components/upload/InstantiatePermissionRadio.tsx
+++ b/src/lib/components/upload/InstantiatePermissionRadio.tsx
@@ -70,7 +70,7 @@ export const InstantiatePermissionRadio = ({
         emptyAddressesLength,
         addresses.length - emptyAddressesLength
       );
-  }, [addresses, append, page, permission, remove]);
+  }, [addresses, page, permission]);
 
   return (
     <RadioGroup
diff --git a/src/lib/pages/proposal/constants.tsx b/src/lib/pages/proposal/constants.tsx
index 0f37e7048..9c2702aa0 100644
--- a/src/lib/pages/proposal/constants.tsx
+++ b/src/lib/pages/proposal/constants.tsx
@@ -1,3 +1,4 @@
+import { Text } from "@chakra-ui/react";
 import Link from "next/link";
 
 import type { SidebarDetails } from "lib/components/StickySidebar";
@@ -84,7 +85,9 @@ export const SIDEBAR_STORE_CODE_DETAILS: SidebarDetails = {
           }
         >
           {" "}
-          <span style={{ color: "#D8BEFC" }}>Deploy Contract</span>
+          <Text as="span" color="lilac.main">
+            Deploy Contract
+          </Text>
         </Link>
         <br />
         <br />
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index d31338092..cb1eba6cb 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -86,6 +86,8 @@ const defaultValues: StoreCodeProposalState = {
   codeHash: "",
 };
 
+const page = "proposal-store-code";
+
 const StoreCodeProposal = () => {
   const {
     appHumanAddress: { example: exampleHumanAddress },
@@ -97,7 +99,6 @@ const StoreCodeProposal = () => {
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
   const submitStoreCodeProposalTx = useSubmitStoreCodeProposalTx();
   const { broadcast } = useTxBroadcast();
-  const page = "proposal-store-code";
 
   // States
   const [estimatedFee, setEstimatedFee] = useState<StdFee>();
@@ -265,15 +266,12 @@ const StoreCodeProposal = () => {
   const proceed = useCallback(async () => {
     if (!wasmFile) return null;
 
-    AmpTrackUseSubmitProposal(
-      page,
-      initialDeposit.amount,
-      minDeposit?.formattedAmount,
-      {
-        addressesCount: addresses.length,
-        permission: AccessType[permission],
-      }
-    );
+    AmpTrackUseSubmitProposal(page, {
+      initialDeposit: initialDeposit.amount,
+      minDeposit: minDeposit?.formattedAmount,
+      addressesCount: addresses.length,
+      permission: AccessType[permission],
+    });
 
     const submitStoreCodeProposalMsg = async () => {
       return composeStoreCodeProposalMsg({
diff --git a/src/lib/services/amplitude.tsx b/src/lib/services/amplitude.tsx
index 076624df8..921e71c86 100644
--- a/src/lib/services/amplitude.tsx
+++ b/src/lib/services/amplitude.tsx
@@ -2,8 +2,7 @@ import { track } from "@amplitude/analytics-browser";
 import big from "big.js";
 
 import type { AttachFundsType } from "lib/components/fund/types";
-import type { Dict, Option, Token } from "lib/types";
-import { AccessType } from "lib/types";
+import type { Option, Token, AccessType } from "lib/types";
 
 export enum AmpEvent {
   INVALID_STATE = "To Invalid State",
@@ -229,7 +228,7 @@ export const AmpTrackUseInstantiatePermission = (
 ) =>
   track(AmpEvent.USE_INSTANTIATE_PERMISSION, {
     page,
-    type: AccessType[type],
+    type,
     emptyAddressesLength,
     addressesLength,
   });
@@ -239,12 +238,17 @@ export const AmpTrackUseDepositFill = (page: string, amount: Token) =>
 
 export const AmpTrackUseSubmitProposal = (
   page: string,
-  initialDeposit: string,
-  minDeposit: Option<string>,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  properties?: Dict<string, any>
+  properties: {
+    initialDeposit: string;
+    minDeposit: Option<string>;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [key: string]: any;
+  }
 ) => {
-  const proposalPeriod =
-    big(initialDeposit) < big(minDeposit || "0") ? "Deposit" : "Voting";
+  const proposalPeriod = big(properties.initialDeposit).lt(
+    properties.minDeposit || "0"
+  )
+    ? "Deposit"
+    : "Voting";
   track(AmpEvent.USE_SUBMIT_PROPOSAL, { page, proposalPeriod, ...properties });
 };

From 5bcae7a508824d8776e6185a5e19e37f137b9dbe Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 11 May 2023 12:49:21 +0700
Subject: [PATCH 097/354] fix: refactor

---
 src/lib/components/AccordionStepperItem.tsx   | 38 ++++++++-----------
 .../pool-assets/PoolAssetsTableHeader.tsx     |  1 -
 2 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/AccordionStepperItem.tsx b/src/lib/components/AccordionStepperItem.tsx
index cdea4f6f7..b81cc4427 100644
--- a/src/lib/components/AccordionStepperItem.tsx
+++ b/src/lib/components/AccordionStepperItem.tsx
@@ -1,18 +1,22 @@
+import type { FlexProps } from "@chakra-ui/react";
 import { Flex } from "@chakra-ui/react";
 
+const AccordionStepperItemLine = (props: FlexProps) => (
+  <Flex
+    {...props}
+    w="1px"
+    h="28px"
+    right="45%"
+    background="pebble.600"
+    position="absolute"
+    visibility="hidden"
+    zIndex={0}
+  />
+);
+
 export const AccordionStepperItem = () => (
   <Flex position="relative">
-    <Flex
-      id="before-stepper"
-      w="1px"
-      h="28px"
-      right="45%"
-      bottom="9px"
-      background="pebble.600"
-      position="absolute"
-      visibility="hidden"
-      zIndex={0}
-    />
+    <AccordionStepperItemLine id="before-stepper" bottom="9px" />
     <Flex
       id="stepper"
       borderRadius="full"
@@ -21,16 +25,6 @@ export const AccordionStepperItem = () => (
       borderColor="pebble.600"
       borderWidth="1px"
     />
-    <Flex
-      id="after-stepper"
-      w="1px"
-      h="28px"
-      right="45%"
-      top="9px"
-      background="pebble.600"
-      position="absolute"
-      visibility="hidden"
-      zIndex={0}
-    />
+    <AccordionStepperItemLine id="after-stepper" top="9px" />
   </Flex>
 );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableHeader.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableHeader.tsx
index 48d751563..9d7cffd7f 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableHeader.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableHeader.tsx
@@ -20,7 +20,6 @@ export const PoolAssetsTableHeader = ({
     sx={{ "> div": { color: "text.dark" } }}
   >
     <TableHeader>Asset</TableHeader>
-
     <TableHeader textAlign="right">
       {poolType === "Stableswap" ? "Scaling Factor" : "Weight (%)"}
     </TableHeader>

From 9cb7f4a1f18ac523b810a4364cdf96fd7ff32e59 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 11 May 2023 14:25:01 +0700
Subject: [PATCH 098/354] feat: add amplitude tracking

---
 .../upload/InstantiatePermissionRadio.tsx     | 15 +++++--
 .../proposal/components/TestnetAlert.tsx      |  6 ++-
 src/lib/pages/proposal/store-code/index.tsx   |  2 +
 src/lib/pages/proposal/whitelist/index.tsx    | 44 +++++++++++++++++--
 src/lib/services/amplitude.tsx                | 21 ++++++++-
 5 files changed, 79 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/upload/InstantiatePermissionRadio.tsx b/src/lib/components/upload/InstantiatePermissionRadio.tsx
index 17d37b68b..e5508823e 100644
--- a/src/lib/components/upload/InstantiatePermissionRadio.tsx
+++ b/src/lib/components/upload/InstantiatePermissionRadio.tsx
@@ -1,6 +1,6 @@
 import { Text, Box, Radio, RadioGroup, Button, Flex } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
-import { useEffect } from "react";
+import { useCallback } from "react";
 import type { Control, UseFormSetValue, UseFormTrigger } from "react-hook-form";
 import { useController, useFieldArray, useWatch } from "react-hook-form";
 
@@ -59,7 +59,7 @@ export const InstantiatePermissionRadio = ({
     name: "addresses",
   });
 
-  useEffect(() => {
+  const updateAmptrackAddresses = useCallback(() => {
     const emptyAddressesLength = addresses.filter(
       (addr) => addr.address.trim().length === 0
     ).length;
@@ -78,6 +78,7 @@ export const InstantiatePermissionRadio = ({
       onChange={(nextValue: string) => {
         const value = parseInt(nextValue, 10);
         setValue("permission", value);
+        updateAmptrackAddresses();
       }}
       value={permission}
     >
@@ -140,7 +141,10 @@ export const InstantiatePermissionRadio = ({
                     variant="outline-gray"
                     size="lg"
                     disabled={fields.length <= 1}
-                    onClick={() => remove(idx)}
+                    onClick={() => {
+                      remove(idx);
+                      updateAmptrackAddresses();
+                    }}
                   >
                     <CustomIcon
                       name="delete"
@@ -153,7 +157,10 @@ export const InstantiatePermissionRadio = ({
                 variant="outline-primary"
                 mt={3}
                 mx="auto"
-                onClick={() => append({ address: "" as Addr })}
+                onClick={() => {
+                  append({ address: "" as Addr });
+                  updateAmptrackAddresses();
+                }}
                 leftIcon={<CustomIcon name="plus" color="violet.light" />}
               >
                 Add More Address
diff --git a/src/lib/pages/proposal/components/TestnetAlert.tsx b/src/lib/pages/proposal/components/TestnetAlert.tsx
index 09415b2f2..cf3dc4b4a 100644
--- a/src/lib/pages/proposal/components/TestnetAlert.tsx
+++ b/src/lib/pages/proposal/components/TestnetAlert.tsx
@@ -3,6 +3,7 @@ import { Alert, AlertDescription, Button, Flex } from "@chakra-ui/react";
 import { useSelectChain } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { getChainNameByNetwork } from "lib/data";
+import { AmpTrackUseAlertCTA } from "lib/services/amplitude";
 
 export const TestnetAlert = () => {
   const selectChain = useSelectChain();
@@ -17,7 +18,10 @@ export const TestnetAlert = () => {
       <Button
         size="sm"
         variant="ghost-error"
-        onClick={() => selectChain(getChainNameByNetwork("mainnet"))}
+        onClick={() => {
+          AmpTrackUseAlertCTA("proposal_whitelist", "switch_to_mainnet");
+          selectChain(getChainNameByNetwork("mainnet"));
+        }}
       >
         Switch To Mainnet
       </Button>
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index 4e19de616..4ffe964bf 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -270,6 +270,7 @@ const StoreCodeProposal = () => {
 
     AmpTrackUseSubmitProposal(page, {
       initialDeposit: initialDeposit.amount,
+      assetDenom: initialDeposit.denom,
       minDeposit: minDeposit?.formattedAmount,
       addressesCount: addresses.length,
       permission: AccessType[permission],
@@ -346,6 +347,7 @@ const StoreCodeProposal = () => {
             <ConnectWalletAlert
               subtitle={PROPOSAL_STORE_CODE_TEXT.connectWallet}
               mt={12}
+              page="proposal_store_code"
             />
             <form>
               <Flex my="48px" gap={6} direction="column">
diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index bb7e82049..4fbb9bef3 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -10,6 +10,7 @@ import {
 } from "@chakra-ui/react";
 import type { Coin, StdFee } from "@cosmjs/stargate";
 import { useWallet } from "@cosmos-kit/react";
+import { useRouter } from "next/router";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 
@@ -38,7 +39,12 @@ import {
   MAX_PROPOSAL_TITLE_LENGTH,
 } from "lib/data/proposalWhitelist";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
-import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import {
+  AmpEvent,
+  AmpTrack,
+  AmpTrackUseSubmitProposal,
+  AmpTrackUseWhitelistedAddresses,
+} from "lib/services/amplitude";
 import { useGovParams } from "lib/services/proposalService";
 import type { Addr } from "lib/types";
 import { composeSubmitWhitelistProposalMsg, getAmountToVote } from "lib/utils";
@@ -58,6 +64,7 @@ const defaultValues: WhiteListState = {
 };
 
 const ProposalToWhitelist = () => {
+  const router = useRouter();
   const { address: walletAddress = "" } = useWallet();
   const fabricateFee = useFabricateFee();
   const { data: govParams } = useGovParams();
@@ -165,11 +172,18 @@ const ProposalToWhitelist = () => {
       onTxSucceed: () => setProcessing(false),
       onTxFailed: () => setProcessing(false),
     });
+    AmpTrackUseSubmitProposal("proposal_whitelist", {
+      initialDeposit: initialDeposit.amount,
+      assetDenom: initialDeposit.denom,
+      minDeposit: minDeposit?.formattedAmount,
+      addressesCount: addresses.length,
+    });
     if (stream) {
       setProcessing(true);
       broadcast(stream);
     }
   }, [
+    addresses.length,
     minDeposit,
     submitProposalTx,
     estimatedFee,
@@ -179,6 +193,17 @@ const ProposalToWhitelist = () => {
     broadcast,
   ]);
 
+  const updateAmptrackAddresses = useCallback(() => {
+    const emptyAddressesLength = addresses.filter(
+      (addr) => addr.address.trim().length === 0
+    ).length;
+    AmpTrackUseWhitelistedAddresses(
+      "proposal_whitelist",
+      emptyAddressesLength,
+      addresses.length - emptyAddressesLength
+    );
+  }, [addresses]);
+
   useEffect(() => {
     if (minDeposit)
       reset({
@@ -187,6 +212,12 @@ const ProposalToWhitelist = () => {
       });
   }, [minDeposit, reset]);
 
+  useEffect(() => {
+    if (router.isReady) {
+      AmpTrack(AmpEvent.TO_PROPOSAL_TO_WHITELIST);
+    }
+  }, [router.isReady]);
+
   return (
     <>
       <PageContainer>
@@ -220,6 +251,7 @@ const ProposalToWhitelist = () => {
             <ConnectWalletAlert
               subtitle="You need to connect wallet to proceed this action"
               mt={12}
+              page="proposal_whitelist"
             />
             <form>
               <Flex
@@ -319,7 +351,10 @@ const ProposalToWhitelist = () => {
                     variant="outline-gray"
                     size="lg"
                     disabled={fields.length <= 1}
-                    onClick={() => remove(idx)}
+                    onClick={() => {
+                      remove(idx);
+                      updateAmptrackAddresses();
+                    }}
                   >
                     <CustomIcon
                       name="delete"
@@ -331,7 +366,10 @@ const ProposalToWhitelist = () => {
               <Button
                 variant="outline-primary"
                 mt={3}
-                onClick={() => append({ address: "" as Addr })}
+                onClick={() => {
+                  append({ address: "" as Addr });
+                  updateAmptrackAddresses();
+                }}
                 leftIcon={<CustomIcon name="plus" color="violet.light" />}
               >
                 Add More Address
diff --git a/src/lib/services/amplitude.tsx b/src/lib/services/amplitude.tsx
index 2f75e422c..acfb64011 100644
--- a/src/lib/services/amplitude.tsx
+++ b/src/lib/services/amplitude.tsx
@@ -56,6 +56,7 @@ export enum AmpEvent {
   TO_NOT_FOUND = "To 404 Not Found",
   TO_FAUCET = "To Faucet",
   TO_PROPOSAL_TO_STORE_CODE = "To Proposal To Store Code",
+  TO_PROPOSAL_TO_WHITELIST = "To Proposal To Whitelist",
   // ACTIONS
   ACTION_UPLOAD = "Act Upload",
   ACTION_INSTANTIATE = "Action Instantiate",
@@ -101,6 +102,7 @@ export enum AmpEvent {
   USE_RIGHT_HELPER_PANEL = "Use Right Helper Panel", // Sticky panel
   USE_UNPIN = "Use Unpin",
   USE_INSTANTIATE_PERMISSION = "Use Instantiate Permission",
+  USE_WHITELISTED_ADDRESSES = "Use Whitelisted Addresses",
   USE_DEPOSIT_FILL = "Use Deposit Fill",
   USE_SUBMIT_PROPOSAL = "Use Submit Proposal",
   USE_SEARCH_INPUT = "Use Search Input",
@@ -110,6 +112,7 @@ export enum AmpEvent {
   USE_PAGINATION_PAGE_SIZE = "Use Pagination Page Size",
   USE_PAGINATION_NAVIGATION = "Use Pagination Navigation",
   USE_CREATE_NEW_PROPOSAL = "Use Create New Proposal",
+  USE_ALERT_CTA = "Use Alert CTA",
   // TX
   TX_SUCCEED = "Tx Succeed",
   TX_FAILED = "Tx Failed",
@@ -152,7 +155,8 @@ type SpecialAmpEvent =
   | AmpEvent.USE_DEPOSIT_FILL
   | AmpEvent.USE_PAGINATION_NAVIGATION
   | AmpEvent.USE_FILTER_PROPOSALS_STATUS
-  | AmpEvent.USE_FILTER_PROPOSALS_TYPE;
+  | AmpEvent.USE_FILTER_PROPOSALS_TYPE
+  | AmpEvent.USE_ALERT_CTA;
 
 export const AmpTrackInvalidState = (title: string) =>
   track(AmpEvent.INVALID_STATE, { title });
@@ -246,6 +250,17 @@ export const AmpTrackUseInstantiatePermission = (
     addressesLength,
   });
 
+export const AmpTrackUseWhitelistedAddresses = (
+  page: string,
+  emptyAddressesLength: number,
+  addressesLength: number
+) =>
+  track(AmpEvent.USE_WHITELISTED_ADDRESSES, {
+    page,
+    emptyAddressesLength,
+    addressesLength,
+  });
+
 export const AmpTrackUseDepositFill = (page: string, amount: Token) =>
   track(AmpEvent.USE_DEPOSIT_FILL, { page, amount });
 
@@ -254,6 +269,7 @@ export const AmpTrackUseSubmitProposal = (
   properties: {
     initialDeposit: string;
     minDeposit: Option<string>;
+    assetDenom: Option<string>;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     [key: string]: any;
   }
@@ -281,3 +297,6 @@ export const AmpTrackPaginationNavigate = (
     pageSize,
     currentPage,
   });
+
+export const AmpTrackUseAlertCTA = (page: string, action: string) =>
+  track(AmpEvent.USE_ALERT_CTA, { page, action });

From eef0061a2be7dab46dc2f137daff08a3851175f6 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 11 May 2023 16:30:51 +0700
Subject: [PATCH 099/354] fix: dryrun sentry

---
 next.config.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/next.config.js b/next.config.js
index d3c571e65..7cdc49a92 100644
--- a/next.config.js
+++ b/next.config.js
@@ -44,4 +44,6 @@ const moduleExports = {
   },
 };
 
-module.exports = withSentryConfig(moduleExports);
+module.exports = withSentryConfig(moduleExports, {
+  dryRun: process.env.VERCEL_ENV !== "production",
+});

From fa592dc8e33e0dff5275ec2afb1a6f53295fbf45 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 11 May 2023 17:40:00 +0700
Subject: [PATCH 100/354] feat: implement flow for store code allowed user

---
 .../pages/codes/components/DeployButton.tsx   | 16 ++++++
 .../codes/components/MyStoredCodesSection.tsx | 54 ++++++++++++-------
 .../pages/codes/components/ProposalButton.tsx | 23 ++++++++
 .../pages/codes/components/UploadButton.tsx   | 37 ++++++++++---
 4 files changed, 105 insertions(+), 25 deletions(-)
 create mode 100644 src/lib/pages/codes/components/DeployButton.tsx
 create mode 100644 src/lib/pages/codes/components/ProposalButton.tsx

diff --git a/src/lib/pages/codes/components/DeployButton.tsx b/src/lib/pages/codes/components/DeployButton.tsx
new file mode 100644
index 000000000..3e2d138c6
--- /dev/null
+++ b/src/lib/pages/codes/components/DeployButton.tsx
@@ -0,0 +1,16 @@
+import { Button } from "@chakra-ui/react";
+
+import { useInternalNavigate } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+
+export const DeployButton = () => {
+  const navigate = useInternalNavigate();
+  return (
+    <Button
+      onClick={() => navigate({ pathname: "/deploy" })}
+      rightIcon={<CustomIcon name="plus" color="text.main" boxSize="12px" />}
+    >
+      Deploy New Contract
+    </Button>
+  );
+};
diff --git a/src/lib/pages/codes/components/MyStoredCodesSection.tsx b/src/lib/pages/codes/components/MyStoredCodesSection.tsx
index 51c9ccf5c..496abc4aa 100644
--- a/src/lib/pages/codes/components/MyStoredCodesSection.tsx
+++ b/src/lib/pages/codes/components/MyStoredCodesSection.tsx
@@ -1,8 +1,11 @@
-import { Box, Heading, HStack } from "@chakra-ui/react";
+import { Box, Flex, Heading, HStack } from "@chakra-ui/react";
 
+import { useCurrentNetwork } from "lib/app-provider";
 import { MyStoredCodesTable } from "lib/components/table";
 import type { CodeInfo } from "lib/types";
 
+import { DeployButton } from "./DeployButton";
+import { ProposalButton } from "./ProposalButton";
 import { UploadButton } from "./UploadButton";
 
 interface MyStoredCodesSectionProps {
@@ -19,21 +22,34 @@ 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 { isMainnet } = useCurrentNetwork();
+
+  return (
+    <Box mb={8}>
+      <HStack alignItems="center" justifyContent="space-between" mb="18px">
+        <Heading as="h6" variant="h6">
+          My Stored Codes
+        </Heading>
+        <Flex gap={2}>
+          {isMainnet ? (
+            <>
+              <UploadButton />
+              <ProposalButton />
+            </>
+          ) : (
+            <DeployButton />
+          )}
+        </Flex>
+      </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/ProposalButton.tsx b/src/lib/pages/codes/components/ProposalButton.tsx
new file mode 100644
index 000000000..fc65fad98
--- /dev/null
+++ b/src/lib/pages/codes/components/ProposalButton.tsx
@@ -0,0 +1,23 @@
+import { Button } from "@chakra-ui/react";
+
+import { useInternalNavigate } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+
+export const ProposalButton = () => {
+  const navigate = useInternalNavigate();
+  return (
+    <Button
+      variant="outline-primary"
+      onClick={() => navigate({ pathname: "/proposal/store-code" })}
+      rightIcon={
+        <CustomIcon
+          name="submit-proposal"
+          color="violet.light"
+          boxSize="12px"
+        />
+      }
+    >
+      Propose to Store Code
+    </Button>
+  );
+};
diff --git a/src/lib/pages/codes/components/UploadButton.tsx b/src/lib/pages/codes/components/UploadButton.tsx
index 09284ab4c..bbf9f88ae 100644
--- a/src/lib/pages/codes/components/UploadButton.tsx
+++ b/src/lib/pages/codes/components/UploadButton.tsx
@@ -1,16 +1,41 @@
-import { Button } from "@chakra-ui/react";
+import { Button, Tooltip } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
 
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
+import { useGovParams } from "lib/services/proposalService";
+import type { Addr } from "lib/types";
 
 export const UploadButton = () => {
+  const { address = "" } = useWallet();
   const navigate = useInternalNavigate();
+  const { data: govParams } = useGovParams();
+  const isAllowed = Boolean(
+    govParams?.uploadAccess?.addresses?.includes(address as Addr)
+  );
+
   return (
-    <Button
-      onClick={() => navigate({ pathname: "/upload" })}
-      leftIcon={<CustomIcon name="plus" color="text.main" boxSize="12px" />}
+    <Tooltip
+      hasArrow
+      label="Only allowed address can upload Wasm file without opening proposal"
+      placement="top"
+      arrowSize={8}
+      bg="honeydew.darker"
+      isDisabled={isAllowed}
     >
-      Upload New Code
-    </Button>
+      <Button
+        disabled={!isAllowed}
+        onClick={() => navigate({ pathname: "/upload" })}
+        rightIcon={
+          <CustomIcon
+            name="upload"
+            color={!isAllowed ? "pebble.600" : "text.main"}
+            boxSize="12px"
+          />
+        }
+      >
+        Upload New Code
+      </Button>
+    </Tooltip>
   );
 };

From 2f519a310ebed4ac17ccb636a71907c9c889fb9c Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 11 May 2023 17:58:44 +0700
Subject: [PATCH 101/354] chore: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c6a786d62..be4f195ac 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#329](https://github.com/alleslabs/celatone-frontend/pull/329) Add allowed user to store code flow
 - [#321](https://github.com/alleslabs/celatone-frontend/pull/321) Add amplitude to proposal to store code page
 - [#274](https://github.com/alleslabs/celatone-frontend/pull/274) Add proposal to store code page
 - [#279](https://github.com/alleslabs/celatone-frontend/pull/279) Add instantiate permission to msg store code, change error display design, and upgrade cosmjs to version 0.30.1

From 58533cc013059ac3f5434f9c481878e9d206c0b2 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Fri, 12 May 2023 11:02:21 +0700
Subject: [PATCH 102/354] feat: redirect to deploy if not whitelisted

---
 src/lib/pages/upload/index.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/upload/index.tsx b/src/lib/pages/upload/index.tsx
index d98c669a3..ff2f55523 100644
--- a/src/lib/pages/upload/index.tsx
+++ b/src/lib/pages/upload/index.tsx
@@ -1,19 +1,32 @@
 import { Heading, Text } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
+import { useCurrentNetwork, useInternalNavigate } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { Stepper } from "lib/components/stepper";
 import { UploadSection } from "lib/components/upload/UploadSection";
 import WasmPageContainer from "lib/components/WasmPageContainer";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import { useGovParams } from "lib/services/proposalService";
+import type { Addr } from "lib/types";
 
 const Upload = () => {
   const router = useRouter();
+  const { isMainnet } = useCurrentNetwork();
+
+  const { address = "" } = useWallet();
+  const navigate = useInternalNavigate();
+  const { data: govParams } = useGovParams();
+  const isAllowed = Boolean(
+    govParams?.uploadAccess?.addresses?.includes(address as Addr)
+  );
 
   useEffect(() => {
-    if (router.isReady) AmpTrack(AmpEvent.TO_UPLOAD);
-  }, [router.isReady]);
+    if (!isAllowed && isMainnet) navigate({ pathname: "/deploy" });
+    else if (router.isReady) AmpTrack(AmpEvent.TO_UPLOAD);
+  }, [isAllowed, isMainnet, navigate, router.isReady]);
 
   return (
     <WasmPageContainer>

From 3fa7eade863d24fdcf010442f47c452b9d8d4a19 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 12 May 2023 11:45:42 +0700
Subject: [PATCH 103/354] fix: address state not update to amp, rewrite access
 permission

---
 .../upload/InstantiatePermissionRadio.tsx     | 16 +++++++-------
 src/lib/pages/proposal/store-code/index.tsx   |  2 +-
 src/lib/pages/proposal/whitelist/index.tsx    | 21 ++++++++++++-------
 src/lib/services/amplitude.tsx                |  8 +++----
 4 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/upload/InstantiatePermissionRadio.tsx b/src/lib/components/upload/InstantiatePermissionRadio.tsx
index e5508823e..02dc1fe9d 100644
--- a/src/lib/components/upload/InstantiatePermissionRadio.tsx
+++ b/src/lib/components/upload/InstantiatePermissionRadio.tsx
@@ -1,6 +1,6 @@
 import { Text, Box, Radio, RadioGroup, Button, Flex } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
-import { useCallback } from "react";
+import { useEffect } from "react";
 import type { Control, UseFormSetValue, UseFormTrigger } from "react-hook-form";
 import { useController, useFieldArray, useWatch } from "react-hook-form";
 
@@ -59,18 +59,21 @@ export const InstantiatePermissionRadio = ({
     name: "addresses",
   });
 
-  const updateAmptrackAddresses = useCallback(() => {
+  useEffect(() => {
     const emptyAddressesLength = addresses.filter(
       (addr) => addr.address.trim().length === 0
     ).length;
-    if (page)
+    if (page) {
       AmpTrackUseInstantiatePermission(
         page,
-        permission,
+        AccessType[permission],
         emptyAddressesLength,
         addresses.length - emptyAddressesLength
       );
-  }, [addresses, page, permission]);
+    }
+    // Run this effect only when the amount of address input or selected permission changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [addresses.length, page, permission]);
 
   return (
     <RadioGroup
@@ -78,7 +81,6 @@ export const InstantiatePermissionRadio = ({
       onChange={(nextValue: string) => {
         const value = parseInt(nextValue, 10);
         setValue("permission", value);
-        updateAmptrackAddresses();
       }}
       value={permission}
     >
@@ -143,7 +145,6 @@ export const InstantiatePermissionRadio = ({
                     disabled={fields.length <= 1}
                     onClick={() => {
                       remove(idx);
-                      updateAmptrackAddresses();
                     }}
                   >
                     <CustomIcon
@@ -159,7 +160,6 @@ export const InstantiatePermissionRadio = ({
                 mx="auto"
                 onClick={() => {
                   append({ address: "" as Addr });
-                  updateAmptrackAddresses();
                 }}
                 leftIcon={<CustomIcon name="plus" color="violet.light" />}
               >
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index 4ffe964bf..d5079975d 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -347,7 +347,7 @@ const StoreCodeProposal = () => {
             <ConnectWalletAlert
               subtitle={PROPOSAL_STORE_CODE_TEXT.connectWallet}
               mt={12}
-              page="proposal_store_code"
+              page={page}
             />
             <form>
               <Flex my="48px" gap={6} direction="column">
diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index 4fbb9bef3..e44824afa 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -44,6 +44,7 @@ import {
   AmpTrack,
   AmpTrackUseSubmitProposal,
   AmpTrackUseWhitelistedAddresses,
+  AmpTrackUseDepositFill,
 } from "lib/services/amplitude";
 import { useGovParams } from "lib/services/proposalService";
 import type { Addr } from "lib/types";
@@ -63,6 +64,8 @@ const defaultValues: WhiteListState = {
   initialDeposit: { denom: "", amount: "" } as Coin,
 };
 
+const ampPage = "proposal_whitelist";
+
 const ProposalToWhitelist = () => {
   const router = useRouter();
   const { address: walletAddress = "" } = useWallet();
@@ -172,7 +175,7 @@ const ProposalToWhitelist = () => {
       onTxSucceed: () => setProcessing(false),
       onTxFailed: () => setProcessing(false),
     });
-    AmpTrackUseSubmitProposal("proposal_whitelist", {
+    AmpTrackUseSubmitProposal(ampPage, {
       initialDeposit: initialDeposit.amount,
       assetDenom: initialDeposit.denom,
       minDeposit: minDeposit?.formattedAmount,
@@ -193,16 +196,18 @@ const ProposalToWhitelist = () => {
     broadcast,
   ]);
 
-  const updateAmptrackAddresses = useCallback(() => {
+  useEffect(() => {
     const emptyAddressesLength = addresses.filter(
       (addr) => addr.address.trim().length === 0
     ).length;
     AmpTrackUseWhitelistedAddresses(
-      "proposal_whitelist",
+      ampPage,
       emptyAddressesLength,
       addresses.length - emptyAddressesLength
     );
-  }, [addresses]);
+    // Run this effect only when the amount of address input changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [addresses.length]);
 
   useEffect(() => {
     if (minDeposit)
@@ -251,7 +256,7 @@ const ProposalToWhitelist = () => {
             <ConnectWalletAlert
               subtitle="You need to connect wallet to proceed this action"
               mt={12}
-              page="proposal_whitelist"
+              page={ampPage}
             />
             <form>
               <Flex
@@ -353,7 +358,6 @@ const ProposalToWhitelist = () => {
                     disabled={fields.length <= 1}
                     onClick={() => {
                       remove(idx);
-                      updateAmptrackAddresses();
                     }}
                   >
                     <CustomIcon
@@ -368,7 +372,6 @@ const ProposalToWhitelist = () => {
                 mt={3}
                 onClick={() => {
                   append({ address: "" as Addr });
-                  updateAmptrackAddresses();
                 }}
                 leftIcon={<CustomIcon name="plus" color="violet.light" />}
               >
@@ -395,6 +398,10 @@ const ProposalToWhitelist = () => {
                       color="honeydew.main"
                       onClick={() => {
                         if (!minDeposit) return;
+                        AmpTrackUseDepositFill(
+                          ampPage,
+                          minDeposit.formattedAmount
+                        );
                         setValue(
                           "initialDeposit.amount",
                           minDeposit.formattedAmount
diff --git a/src/lib/services/amplitude.tsx b/src/lib/services/amplitude.tsx
index acfb64011..05e25d074 100644
--- a/src/lib/services/amplitude.tsx
+++ b/src/lib/services/amplitude.tsx
@@ -2,7 +2,7 @@ import { track } from "@amplitude/analytics-browser";
 import big from "big.js";
 
 import type { AttachFundsType } from "lib/components/fund/types";
-import type { Option, Token, AccessType, Dict } from "lib/types";
+import type { Option, Token, Dict } from "lib/types";
 
 export enum AmpEvent {
   INVALID_STATE = "To Invalid State",
@@ -239,7 +239,7 @@ export const AmpTrackUseUnpin = (page: string, check: boolean) =>
 
 export const AmpTrackUseInstantiatePermission = (
   page: string,
-  type: AccessType,
+  type: string,
   emptyAddressesLength: number,
   addressesLength: number
 ) =>
@@ -253,12 +253,12 @@ export const AmpTrackUseInstantiatePermission = (
 export const AmpTrackUseWhitelistedAddresses = (
   page: string,
   emptyAddressesLength: number,
-  addressesLength: number
+  filledAddressesLength: number
 ) =>
   track(AmpEvent.USE_WHITELISTED_ADDRESSES, {
     page,
     emptyAddressesLength,
-    addressesLength,
+    filledAddressesLength,
   });
 
 export const AmpTrackUseDepositFill = (page: string, amount: Token) =>

From 5b2bf4ca33edf2cbaf6a647c3b30ce6ca196c34a Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Fri, 12 May 2023 15:10:43 +0700
Subject: [PATCH 104/354] fix(components): change mb from string to number

---
 src/lib/components/DefaultBreadcrumb.tsx                  | 6 +++---
 src/lib/pages/account-details/index.tsx                   | 2 +-
 src/lib/pages/contract-details/components/ContractTop.tsx | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/DefaultBreadcrumb.tsx b/src/lib/components/DefaultBreadcrumb.tsx
index 577262488..7f4c8725e 100644
--- a/src/lib/components/DefaultBreadcrumb.tsx
+++ b/src/lib/components/DefaultBreadcrumb.tsx
@@ -9,7 +9,7 @@ interface BreadcrumbProps {
   secondaryPage?: string;
   secondaryPath?: string;
   currentPage: string;
-  mb?: string;
+  mb?: number;
 }
 export const DefaultBreadcrumb = ({
   primaryPage,
@@ -17,13 +17,13 @@ export const DefaultBreadcrumb = ({
   secondaryPage = "",
   secondaryPath = "",
   currentPage,
-  mb = "0",
+  mb = 0,
 }: BreadcrumbProps) => (
   <Breadcrumb
     w="full"
     spacing="4px"
     mb={mb}
-    separator={<CustomIcon name="chevron-right" boxSize="3" />}
+    separator={<CustomIcon name="chevron-right" boxSize={3} />}
   >
     <BreadcrumbItem
       _hover={{ opacity: 0.8 }}
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 16c772195..cce74aade 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -94,7 +94,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
       <Flex direction="column" mb={6}>
         {publicDetail && (
           <DefaultBreadcrumb
-            mb="24px"
+            mb={6}
             primaryPage="Public Projects"
             primaryPath="/public-project"
             secondaryPage={publicDetail?.name}
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index 5f7e2b866..c6efb5ed8 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/src/lib/pages/contract-details/components/ContractTop.tsx
@@ -99,7 +99,7 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
       <Flex direction="column" w="full">
         {publicProject.publicDetail && (
           <DefaultBreadcrumb
-            mb="24px"
+            mb={6}
             primaryPage="Public Projects"
             primaryPath="/public-project"
             secondaryPage={publicProject.publicDetail.name}

From 832d570f1be32972fce8e7de047572ee94c64a84 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Mon, 15 May 2023 11:21:04 +0700
Subject: [PATCH 105/354] feat: add validation for builder

---
 src/lib/pages/proposal/constants.tsx        |  8 +++++++-
 src/lib/pages/proposal/store-code/index.tsx | 15 ++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/lib/pages/proposal/constants.tsx b/src/lib/pages/proposal/constants.tsx
index 9c2702aa0..2ea8d2d07 100644
--- a/src/lib/pages/proposal/constants.tsx
+++ b/src/lib/pages/proposal/constants.tsx
@@ -114,7 +114,7 @@ export const SIDEBAR_STORE_CODE_DETAILS: SidebarDetails = {
 export const PROPOSAL_STORE_CODE_TEXT = {
   header: "Create Proposal to Store Code",
   description:
-    "To store your contract code, you need to submit a `StoreCodeProposal`. After the proposal passes, the code will bestored on-chain and can then be instantiated.",
+    "To store your contract code, you need to submit a `StoreCodeProposal`. After the proposal passes, the code will be stored on-chain and can then be instantiated.",
   connectWallet: "You need to connect wallet to proceed this action",
   titlePlaceholder: "ex. Store code for ...",
   titleLabel: "Proposal Title",
@@ -134,11 +134,17 @@ export const PROPOSAL_STORE_CODE_TEXT = {
   builderPlaceholder: "ex. cosmwasm/lorem-optimizer:0.1.1",
   builderLabel: "Builder",
   builderRequired: "Builder is required",
+  builderHelperText:
+    "Builder is the docker image used to build the code deterministically, which is used for smart contract verification. It can be tagged, digested, or combination of both.",
+  builderPattern: /^[a-zA-Z0-9!@#$:;/%\\^&*)(+=._-]*$/,
+  builderError:
+    "Builder should contain only alphanumerics and special characters",
   sourcePlaceholder: "URL to the code",
   sourceLabel: "Source",
   sourceRequired: "Source is required",
   sourceHelperText:
     "Please provide absolute or path-absolute URL (ex. https://github.com/example/url/)",
+  sourcePattern: /^(?!:)[a-zA-Z0-9+.-]+:/,
   permissionTitle: "Instantiate Permission",
   permissionDescription:
     "If the proposal is passed, the stored code can be instantiated to a contract by your selected option",
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index 4e19de616..edb764273 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -490,10 +490,18 @@ const StoreCodeProposal = () => {
                   label={PROPOSAL_STORE_CODE_TEXT.builderLabel}
                   labelBgColor="background.main"
                   variant="floating"
+                  helperText={PROPOSAL_STORE_CODE_TEXT.builderHelperText}
+                  // Builder is a docker image, can be tagged, digested, or both
                   rules={{
                     required: PROPOSAL_STORE_CODE_TEXT.builderRequired,
+                    pattern: PROPOSAL_STORE_CODE_TEXT.builderPattern,
                   }}
-                  error={errors.builder?.message}
+                  error={
+                    builder &&
+                    !source.match(PROPOSAL_STORE_CODE_TEXT.builderPattern)
+                      ? PROPOSAL_STORE_CODE_TEXT.builderError
+                      : errors.builder?.message
+                  }
                 />
 
                 {/* Source  */}
@@ -507,11 +515,12 @@ const StoreCodeProposal = () => {
                   helperText={PROPOSAL_STORE_CODE_TEXT.sourceHelperText}
                   rules={{
                     required: PROPOSAL_STORE_CODE_TEXT.sourceRequired,
-                    pattern: /^(?!:)[a-zA-Z0-9+.-]+:/,
+                    pattern: PROPOSAL_STORE_CODE_TEXT.sourcePattern,
                   }}
                   error={
                     // Source should be absolute url or absolute path
-                    source && !source.match(/^(?!:)[a-zA-Z0-9+.-]+:/)
+                    source &&
+                    !source.match(PROPOSAL_STORE_CODE_TEXT.sourcePattern)
                       ? PROPOSAL_STORE_CODE_TEXT.sourceHelperText
                       : errors.source?.message
                   }

From b1d36fed4ba7733b3a0fe61663928de39b3bcda0 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Mon, 15 May 2023 11:23:57 +0700
Subject: [PATCH 106/354] chore: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c6a786d62..5ccfd5934 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -46,6 +46,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#331](https://github.com/alleslabs/celatone-frontend/pull/331) Add validation check for builder in proposal to store code page
 - [#324](https://github.com/alleslabs/celatone-frontend/pull/324) Add deposit/voting period from gov params and add minimum required alert for proposal to store code
 - [#298](https://github.com/alleslabs/celatone-frontend/pull/298) Show deposit/voting period from gov params and add minimum required alert
 

From b60c179adb4f910fd94d533afa4d23ad6b7ea06f Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Mon, 15 May 2023 12:54:25 +0700
Subject: [PATCH 107/354] fix: use permission network flag

---
 .../codes/components/MyStoredCodesSection.tsx | 17 +++++++---
 .../pages/codes/components/UploadButton.tsx   | 13 +++-----
 src/lib/pages/upload/index.tsx                | 31 +++++++++++--------
 3 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/lib/pages/codes/components/MyStoredCodesSection.tsx b/src/lib/pages/codes/components/MyStoredCodesSection.tsx
index 496abc4aa..762de4974 100644
--- a/src/lib/pages/codes/components/MyStoredCodesSection.tsx
+++ b/src/lib/pages/codes/components/MyStoredCodesSection.tsx
@@ -1,8 +1,10 @@
 import { Box, Flex, Heading, HStack } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
 
-import { useCurrentNetwork } from "lib/app-provider";
 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 { DeployButton } from "./DeployButton";
 import { ProposalButton } from "./ProposalButton";
@@ -23,7 +25,12 @@ export const MyStoredCodesSection = ({
   disconnectedMessage,
   isSearching,
 }: MyStoredCodesSectionProps) => {
-  const { isMainnet } = useCurrentNetwork();
+  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}>
@@ -32,9 +39,9 @@ export const MyStoredCodesSection = ({
           My Stored Codes
         </Heading>
         <Flex gap={2}>
-          {isMainnet ? (
+          {isPermissionedNetwork ? (
             <>
-              <UploadButton />
+              <UploadButton isAllowed={isAllowed} />
               <ProposalButton />
             </>
           ) : (
diff --git a/src/lib/pages/codes/components/UploadButton.tsx b/src/lib/pages/codes/components/UploadButton.tsx
index fa9c9e7a5..dffcb42bf 100644
--- a/src/lib/pages/codes/components/UploadButton.tsx
+++ b/src/lib/pages/codes/components/UploadButton.tsx
@@ -1,19 +1,14 @@
 import { Button } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { Tooltip } from "lib/components/Tooltip";
-import { useGovParams } from "lib/services/proposalService";
-import type { Addr } from "lib/types";
 
-export const UploadButton = () => {
-  const { address = "" } = useWallet();
+interface UploadButtonProps {
+  isAllowed: boolean;
+}
+export const UploadButton = ({ isAllowed }: UploadButtonProps) => {
   const navigate = useInternalNavigate();
-  const { data: govParams } = useGovParams();
-  const isAllowed = Boolean(
-    govParams?.uploadAccess?.addresses?.includes(address as Addr)
-  );
 
   return (
     <Tooltip
diff --git a/src/lib/pages/upload/index.tsx b/src/lib/pages/upload/index.tsx
index ff2f55523..10bbde688 100644
--- a/src/lib/pages/upload/index.tsx
+++ b/src/lib/pages/upload/index.tsx
@@ -1,32 +1,37 @@
 import { Heading, Text } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 
-import { useCurrentNetwork, useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { Stepper } from "lib/components/stepper";
 import { UploadSection } from "lib/components/upload/UploadSection";
 import WasmPageContainer from "lib/components/WasmPageContainer";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import { useGovParams } from "lib/services/proposalService";
-import type { Addr } from "lib/types";
+import { useUploadAccessParams } from "lib/services/proposalService";
+import type { HumanAddr } from "lib/types";
+import { AccessConfigPermission } from "lib/types";
 
 const Upload = () => {
   const router = useRouter();
-  const { isMainnet } = useCurrentNetwork();
-
-  const { address = "" } = useWallet();
+  const { address } = useWallet();
   const navigate = useInternalNavigate();
-  const { data: govParams } = useGovParams();
-  const isAllowed = Boolean(
-    govParams?.uploadAccess?.addresses?.includes(address as Addr)
-  );
+  const { data } = useUploadAccessParams();
+
+  const isPermissionedNetwork =
+    data?.permission !== AccessConfigPermission.EVERYBODY;
+
+  const enableUpload = useMemo(() => {
+    if (!isPermissionedNetwork) return true;
+    return Boolean(data?.addresses?.includes(address as HumanAddr));
+  }, [data, address, isPermissionedNetwork]);
 
   useEffect(() => {
-    if (!isAllowed && isMainnet) navigate({ pathname: "/deploy" });
+    // Redirect back to deploy page
+    if (!enableUpload) navigate({ pathname: "/deploy", replace: true });
     else if (router.isReady) AmpTrack(AmpEvent.TO_UPLOAD);
-  }, [isAllowed, isMainnet, navigate, router.isReady]);
+  }, [enableUpload, navigate, router.isReady]);
 
   return (
     <WasmPageContainer>

From e247a614c365344105215d6d96868aeb8668126d Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Mon, 15 May 2023 13:11:54 +0700
Subject: [PATCH 108/354] fix: typo

---
 src/lib/pages/proposal/constants.tsx        | 2 +-
 src/lib/pages/proposal/store-code/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/proposal/constants.tsx b/src/lib/pages/proposal/constants.tsx
index 2ea8d2d07..bc431f91a 100644
--- a/src/lib/pages/proposal/constants.tsx
+++ b/src/lib/pages/proposal/constants.tsx
@@ -135,7 +135,7 @@ export const PROPOSAL_STORE_CODE_TEXT = {
   builderLabel: "Builder",
   builderRequired: "Builder is required",
   builderHelperText:
-    "Builder is the docker image used to build the code deterministically, which is used for smart contract verification. It can be tagged, digested, or combination of both.",
+    "Builder is the docker image used to build the code deterministically. It is used for smart contract verification. It can be tagged, digested, or combination of both.",
   builderPattern: /^[a-zA-Z0-9!@#$:;/%\\^&*)(+=._-]*$/,
   builderError:
     "Builder should contain only alphanumerics and special characters",
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index edb764273..7d1cf67bc 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -498,7 +498,7 @@ const StoreCodeProposal = () => {
                   }}
                   error={
                     builder &&
-                    !source.match(PROPOSAL_STORE_CODE_TEXT.builderPattern)
+                    !builder.match(PROPOSAL_STORE_CODE_TEXT.builderPattern)
                       ? PROPOSAL_STORE_CODE_TEXT.builderError
                       : errors.builder?.message
                   }

From 1c5fed2e360d825bb7a8b9ae1d478125c135711e Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Mon, 15 May 2023 14:42:18 +0700
Subject: [PATCH 109/354] chore: fix text

---
 src/lib/pages/proposal/constants.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/proposal/constants.tsx b/src/lib/pages/proposal/constants.tsx
index bc431f91a..9d0917fee 100644
--- a/src/lib/pages/proposal/constants.tsx
+++ b/src/lib/pages/proposal/constants.tsx
@@ -135,7 +135,7 @@ export const PROPOSAL_STORE_CODE_TEXT = {
   builderLabel: "Builder",
   builderRequired: "Builder is required",
   builderHelperText:
-    "Builder is the docker image used to build the code deterministically. It is used for smart contract verification. It can be tagged, digested, or combination of both.",
+    "Builder is the docker image used to build the code deterministically for smart contract verification. Can be tagged, digested, or combination of both.",
   builderPattern: /^[a-zA-Z0-9!@#$:;/%\\^&*)(+=._-]*$/,
   builderError:
     "Builder should contain only alphanumerics and special characters",

From ccf2bfd6465b64b30bf856e532d23851948213bc Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Mon, 15 May 2023 14:51:34 +0700
Subject: [PATCH 110/354] fix: remove disable from use existing code id

---
 src/lib/pages/deploy/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/pages/deploy/index.tsx b/src/lib/pages/deploy/index.tsx
index e8a4c9354..d7837da55 100644
--- a/src/lib/pages/deploy/index.tsx
+++ b/src/lib/pages/deploy/index.tsx
@@ -106,7 +106,6 @@ const Deploy = () => {
         title="Use existing Code IDs"
         description="Input code ID or select from previously stored or saved codes"
         onClick={() => navigate({ pathname: "/instantiate" })}
-        disabled={!address}
       />
       <Flex justify="center" w="100%" mt="32px">
         <Button

From f4425d26c7197156e1c5f251848d17944275eeef Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 16 May 2023 11:16:27 +0700
Subject: [PATCH 111/354] feat: add lp messages

---
 src/lib/data/tx.ts                            |   2 +
 .../pools/components/PoolDetailHeader.tsx     | 279 ------------------
 src/lib/pages/pools/components/PoolHeader.tsx |  14 +-
 src/lib/pages/pools/components/PoolLogo.tsx   |   4 +-
 .../pool-details/PoolRelatedTxs.tsx           |  34 +--
 .../pool-details/header/PoolHeader.tsx        |  89 ------
 .../pool-details/header/PoolLogo.tsx          |  65 ----
 .../components/pool-details/header/index.tsx  |  13 +-
 .../tables/pool-txs/PoolTxsMsg.tsx            |  30 +-
 .../tables/pool-txs/PoolTxsTable.tsx          |  11 +-
 .../tables/pool-txs/PoolTxsTableRow.tsx       |  56 +++-
 .../pool-details/tables/pool-txs/index.tsx    |  10 +-
 .../pool-txs/messages/PoolOtherMsgs.tsx       |  25 ++
 .../messages/{ => components}/AssetCard.tsx   |   0
 .../messages/components/PoolLogoLink.tsx      |  23 ++
 .../pool-txs/messages/components/index.ts     |   2 +
 .../tables/pool-txs/messages/index.tsx        | 188 ++++++++++--
 .../messages/lp/MsgExitPoolAction.tsx         |  56 ++++
 .../messages/lp/MsgExitPoolDetail.tsx         |  56 ++++
 .../lp/MsgExitSwapExternAmountOutAction.tsx   |  46 +++
 .../lp/MsgExitSwapExternAmountOutDetail.tsx   |  57 ++++
 .../lp/MsgExitSwapShareAmountInAction.tsx     |  47 +++
 .../lp/MsgExitSwapShareAmountInDetail.tsx     |  57 ++++
 .../messages/lp/MsgJoinPoolAction.tsx         |  56 ++++
 .../messages/lp/MsgJoinPoolDetail.tsx         |  56 ++++
 .../lp/MsgJoinSwapExternAmountInAction.tsx    |  47 +++
 .../lp/MsgJoinSwapExternAmountInDetail.tsx    |  56 ++++
 .../lp/MsgJoinSwapShareAmountOutAction.tsx    |  46 +++
 .../lp/MsgJoinSwapShareAmountOutDetail.tsx    |  56 ++++
 .../lp/components/LiquidityDivider.tsx        |  11 +
 .../messages/lp/components/PoolAssetCard.tsx  | 137 +++++++++
 .../messages/lp/components/PoolAssetsGrid.tsx |  95 ++++++
 .../pool-txs/messages/lp/components/index.ts  |   3 +
 .../tables/pool-txs/messages/lp/index.ts      |  12 +
 .../tables/pool-txs/messages/messages.ts      |  18 --
 .../swap/MsgSwapExactAmountInAction.tsx       |  10 +-
 .../swap/MsgSwapExactAmountInDetail.tsx       |   4 +-
 .../swap/MsgSwapExactAmountOutAction.tsx      |  10 +-
 .../swap/MsgSwapExactAmountOutDetail.tsx      |   6 +-
 .../messages/swap/components/PoolRoute.tsx    |   6 +-
 .../messages/swap/components/PoolSwap.tsx     |  11 +-
 .../tables/pool-txs/messages/utils.ts         |  75 +++++
 .../components/supportedSection/PoolCard.tsx  |   2 +-
 .../UnsupportedPoolCard.tsx                   |   2 +-
 src/lib/pages/pools/poolId.tsx                |   6 +-
 .../tx-message/msg-receipts/index.tsx         |   4 +-
 src/lib/types/tx/transaction.ts               |  10 +-
 src/lib/utils/tx/types.ts                     |  14 +-
 48 files changed, 1348 insertions(+), 569 deletions(-)
 delete mode 100644 src/lib/pages/pools/components/PoolDetailHeader.tsx
 delete mode 100644 src/lib/pages/pools/components/pool-details/header/PoolHeader.tsx
 delete mode 100644 src/lib/pages/pools/components/pool-details/header/PoolLogo.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
 rename src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/{ => components}/AssetCard.tsx (100%)
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/index.ts
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/LiquidityDivider.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetCard.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/index.ts
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/index.ts
 delete mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/messages.ts
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts

diff --git a/src/lib/data/tx.ts b/src/lib/data/tx.ts
index fbad20b3c..fd00485e4 100644
--- a/src/lib/data/tx.ts
+++ b/src/lib/data/tx.ts
@@ -51,6 +51,8 @@ export type TypeUrl =
   | "/ibc.core.channel.v1.MsgTimeoutOnClose"
   | "/ibc.core.channel.v1.MsgAcknowledgement"
   // osmosis
+  | "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn"
+  | "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountOut"
   | "/osmosis.gamm.poolmodels.balancer.v1beta1.MsgCreateBalancerPool"
   | "/osmosis.gamm.poolmodels.stableswap.v1beta1.MsgCreateStableswapPool"
   | "/osmosis.gamm.poolmodels.stableswap.v1beta1.MsgStableSwapAdjustScalingFactors"
diff --git a/src/lib/pages/pools/components/PoolDetailHeader.tsx b/src/lib/pages/pools/components/PoolDetailHeader.tsx
deleted file mode 100644
index aba698ad7..000000000
--- a/src/lib/pages/pools/components/PoolDetailHeader.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import {
-  Button,
-  Flex,
-  Box,
-  IconButton,
-  Text,
-  Tag,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalCloseButton,
-  Heading,
-  useDisclosure,
-  chakra,
-  Tooltip,
-} from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
-
-import { getAddressTypeByLength } from "lib/app-provider";
-import { BackButton } from "lib/components/button";
-import { ExplorerLink } from "lib/components/ExplorerLink";
-import { CustomIcon } from "lib/components/icon";
-import JsonReadOnly from "lib/components/json/JsonReadOnly";
-import type { PoolDetail } from "lib/types/pool";
-import { formatRatio, jsonPrettify, truncate } from "lib/utils";
-
-import { PoolHeader } from "./PoolHeader";
-
-interface PoolDetailHeaderProp {
-  pool: PoolDetail;
-}
-const unwrapScalingFactor = ({
-  scalingFactors,
-  scalingFactorController,
-}: PoolDetail) => ({
-  scalingFactors,
-  scalingFactorController,
-});
-
-const StyledTextLabel = chakra(Text, {
-  baseStyle: {
-    color: "text.dark",
-    fontSize: "14px",
-    fontWeight: "600",
-    letterSpacing: "0.1px",
-  },
-});
-const StyledTextContent = chakra(Text, {
-  baseStyle: {
-    color: "text.main",
-    letterSpacing: "0.1px",
-    fontSize: "14px",
-  },
-});
-export const PoolDetailHeader = ({ pool }: PoolDetailHeaderProp) => {
-  const { currentChainName } = useWallet();
-  const {
-    isOpen: isModalWeightOpen,
-    onClose: onModalWeightClose,
-    onOpen: onModalWeightOpen,
-  } = useDisclosure();
-  const {
-    isOpen: isModalScalingOpen,
-    onClose: onModalScalingClose,
-    onOpen: onModalScalingOpen,
-  } = useDisclosure();
-
-  return (
-    <>
-      <BackButton />
-      <Flex mt={4} justifyContent="space-between" alignItems="flex-start">
-        <PoolHeader
-          poolId={pool.id}
-          isSuperFluid={pool.isSuperfluid}
-          poolType={pool.type}
-          poolLiquidity={pool.poolLiquidity}
-        />
-        <Flex gap={2} alignItems="flex-start">
-          <Button
-            variant="ghost-gray"
-            rightIcon={
-              <CustomIcon name="launch" boxSize={3} color="pebble.400" />
-            }
-          >
-            View in JSON
-          </Button>
-          <Button
-            variant="outline-primary"
-            rightIcon={
-              <CustomIcon name="launch" boxSize={3} color="violet.light" />
-            }
-          >
-            View in Osmosis
-          </Button>
-          <IconButton
-            size="md"
-            _hover={{ backgroundColor: "pebble.700" }}
-            variant="none"
-            aria-label="save"
-            color="pebble.600"
-            icon={<CustomIcon name="bookmark" />}
-          />
-        </Flex>
-      </Flex>
-      <Flex
-        background="pebble.900"
-        borderRadius="8px"
-        px={4}
-        py={3}
-        gap={12}
-        mt={6}
-      >
-        <Flex flexDirection="column" gap={1}>
-          <StyledTextLabel> Pool ID</StyledTextLabel>
-          <StyledTextContent color="lilac.main">{pool.id}</StyledTextContent>
-        </Flex>
-        <Flex flexDirection="column" gap={1}>
-          <StyledTextLabel> Created Height</StyledTextLabel>
-          <StyledTextContent color="lilac.main">
-            {pool.blockHeight}
-          </StyledTextContent>
-        </Flex>
-        <Flex flexDirection="column" gap={1}>
-          <StyledTextLabel> Pool Created by</StyledTextLabel>
-          <StyledTextContent color="lilac.main">
-            <ExplorerLink
-              type={getAddressTypeByLength(currentChainName, pool.creator)}
-              value={truncate(pool.creator)}
-            />
-          </StyledTextContent>
-        </Flex>
-        <Flex flexDirection="column" gap={1}>
-          <Flex alignItems="center" gap={1}>
-            <StyledTextLabel>Swap Fee</StyledTextLabel>
-            <Tooltip
-              hasArrow
-              label="The fee charged for making a swap in a pool, defined by the pool creator, and paid by traders in the form of a percentage the input swap asset amount"
-              placement="top"
-              bg="honeydew.darker"
-              arrowSize={8}
-            >
-              <Flex cursor="pointer">
-                <CustomIcon name="info-circle" boxSize="12px" />
-              </Flex>
-            </Tooltip>
-          </Flex>
-          <StyledTextContent>{formatRatio(pool.swapFee)}</StyledTextContent>
-        </Flex>
-        <Flex flexDirection="column" gap={1}>
-          <Flex alignItems="center" gap={1}>
-            <StyledTextLabel>Exit Fee</StyledTextLabel>
-            <Tooltip
-              hasArrow
-              label="The fee charged when withdrawing from a pool, defined by the pool creator, and paid by the withdrawer in the form of LP tokens"
-              placement="top"
-              bg="honeydew.darker"
-              arrowSize={8}
-            >
-              <Flex cursor="pointer">
-                <CustomIcon name="info-circle" boxSize="12px" />
-              </Flex>
-            </Tooltip>
-          </Flex>
-          <StyledTextContent>{formatRatio(pool.exitFee)}</StyledTextContent>
-        </Flex>
-        <Flex flexDirection="column" gap={1}>
-          <StyledTextLabel>Future Governor</StyledTextLabel>
-          <Tag
-            borderRadius="full"
-            size="sm"
-            bg="pebble.700"
-            color="text.main"
-            w="fit-content"
-          >
-            {pool.futurePoolGovernor}
-          </Tag>
-        </Flex>
-        {pool.smoothWeightChangeParams && (
-          <Flex flexDirection="column" gap={1}>
-            <StyledTextLabel> Smooth weight change params</StyledTextLabel>
-            <StyledTextContent
-              onClick={onModalWeightOpen}
-              color="lilac.main"
-              cursor="pointer"
-              _hover={{ color: "lilac.light" }}
-              transition="all .25s ease-in-out"
-            >
-              View JSON
-              <CustomIcon name="chevron-right" boxSize={3} color="lilac.main" />
-            </StyledTextContent>
-
-            <Modal
-              isOpen={isModalWeightOpen}
-              onClose={onModalWeightClose}
-              isCentered
-              size="4xl"
-            >
-              <ModalOverlay />
-              <ModalContent w="840px">
-                <ModalHeader>
-                  <CustomIcon name="code" boxSize="6" />
-                  <Heading as="h5" variant="h5">
-                    Smooth weight change params
-                  </Heading>
-                </ModalHeader>
-                <ModalCloseButton color="pebble.600" />
-                <ModalBody p={4} maxH="640px" overflow="scroll">
-                  <Box
-                    bgColor="background.main"
-                    borderRadius="8px"
-                    position="relative"
-                  >
-                    <JsonReadOnly
-                      text={jsonPrettify(
-                        JSON.stringify(pool.smoothWeightChangeParams)
-                      )}
-                      canCopy
-                      showLines={16}
-                    />
-                  </Box>
-                </ModalBody>
-              </ModalContent>
-            </Modal>
-          </Flex>
-        )}
-        {pool.scalingFactors && (
-          <Flex flexDirection="column" gap={1}>
-            <StyledTextLabel>Scaling Factor</StyledTextLabel>
-            <StyledTextContent
-              onClick={onModalScalingOpen}
-              color="lilac.main"
-              cursor="pointer"
-              _hover={{ color: "lilac.light" }}
-              transition="all .25s ease-in-out"
-            >
-              View JSON
-              <CustomIcon name="chevron-right" boxSize={3} color="lilac.main" />
-            </StyledTextContent>
-
-            <Modal
-              isOpen={isModalScalingOpen}
-              onClose={onModalScalingClose}
-              isCentered
-              size="4xl"
-            >
-              <ModalOverlay />
-              <ModalContent w="840px">
-                <ModalHeader>
-                  <CustomIcon name="code" boxSize="6" />
-                  <Heading as="h5" variant="h5">
-                    Scaling Factor
-                  </Heading>
-                </ModalHeader>
-                <ModalCloseButton color="pebble.600" />
-                <ModalBody p={4} maxH="640px" overflow="scroll">
-                  <Box
-                    bgColor="background.main"
-                    borderRadius="8px"
-                    position="relative"
-                  >
-                    <JsonReadOnly
-                      text={jsonPrettify(
-                        JSON.stringify(unwrapScalingFactor(pool))
-                      )}
-                      canCopy
-                      showLines={16}
-                    />
-                  </Box>
-                </ModalBody>
-              </ModalContent>
-            </Modal>
-          </Flex>
-        )}
-      </Flex>
-    </>
-  );
-};
diff --git a/src/lib/pages/pools/components/PoolHeader.tsx b/src/lib/pages/pools/components/PoolHeader.tsx
index 87691a588..4f542fec4 100644
--- a/src/lib/pages/pools/components/PoolHeader.tsx
+++ b/src/lib/pages/pools/components/PoolHeader.tsx
@@ -1,21 +1,23 @@
 import { Flex, Heading, Text, Box, Image } from "@chakra-ui/react";
+import type Big from "big.js";
 
 import { BALANCER_ICON, STABLESWAP_ICON, SUPERFLUID_ICON } from "../constant";
+import type { TokenWithValue } from "lib/types";
 import type { PoolDetail } from "lib/types/pool";
 import { getTokenLabel } from "lib/utils";
 
 import { PoolLogo } from "./PoolLogo";
 
 interface PoolHeaderProps {
-  poolId: PoolDetail["id"];
-  isSuperFluid: PoolDetail["isSuperfluid"];
-  poolType: PoolDetail["type"];
-  poolLiquidity: PoolDetail["poolLiquidity"];
+  poolId: PoolDetail<Big, TokenWithValue>["id"];
+  isSuperfluid: PoolDetail<Big, TokenWithValue>["isSuperfluid"];
+  poolType: PoolDetail<Big, TokenWithValue>["type"];
+  poolLiquidity: PoolDetail<Big, TokenWithValue>["poolLiquidity"];
 }
 
 export const PoolHeader = ({
   poolId,
-  isSuperFluid,
+  isSuperfluid,
   poolType,
   poolLiquidity,
 }: PoolHeaderProps) => (
@@ -89,7 +91,7 @@ export const PoolHeader = ({
               </Flex>
             </Flex>
           )}
-          {isSuperFluid && (
+          {isSuperfluid && (
             <Flex alignItems="center" gap={2}>
               <Flex
                 backgroundColor="pebble.600"
diff --git a/src/lib/pages/pools/components/PoolLogo.tsx b/src/lib/pages/pools/components/PoolLogo.tsx
index 7afc0200f..13e0e5209 100644
--- a/src/lib/pages/pools/components/PoolLogo.tsx
+++ b/src/lib/pages/pools/components/PoolLogo.tsx
@@ -8,6 +8,7 @@ interface PoolLogoProps {
   tokens: TokenWithValue[];
   logoSize?: FlexProps["height"] | FlexProps["width"];
   marginLeft?: number;
+  minW?: FlexProps["minW"];
   textVariant?: TextProps["variant"];
 }
 
@@ -15,6 +16,7 @@ export const PoolLogo = ({
   tokens,
   logoSize = 10,
   marginLeft = -12,
+  minW = 24,
   textVariant = "body2",
 }: PoolLogoProps) => {
   const renderLogo = (token: TokenWithValue, i: number) => (
@@ -33,7 +35,7 @@ export const PoolLogo = ({
           marginLeft,
         },
       }}
-      width="96px"
+      minW={minW}
       alignItems="center"
       justifyContent="center"
     >
diff --git a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
index 482607ac2..299b61e26 100644
--- a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
+++ b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
@@ -7,31 +7,29 @@ import {
   TabPanels,
   TabPanel,
 } from "@chakra-ui/react";
+import type Big from "big.js";
 
 import { usePoolTxsCount } from "../../data";
 import { CustomTab } from "lib/components/CustomTab";
+import type { PoolDetail, TokenWithValue } from "lib/types";
 
 import { PoolRelatedTxsTable } from "./tables/pool-txs";
 
 interface PoolRelatedTxsProps {
-  poolId: number;
-  isSuperfluid: boolean;
+  pool: PoolDetail<Big, TokenWithValue>;
 }
 
-export const PoolRelatedTxs = ({
-  poolId,
-  isSuperfluid,
-}: PoolRelatedTxsProps) => {
+export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
   const { count: countAllTxs, countDisplay: countDisplayAllTxs } =
-    usePoolTxsCount(poolId, "is_all");
+    usePoolTxsCount(pool.id, "is_all");
   const { count: countSwapTxs, countDisplay: countDisplaySwapTxs } =
-    usePoolTxsCount(poolId, "is_swap");
+    usePoolTxsCount(pool.id, "is_swap");
   const { count: countLpTxs, countDisplay: countDisplayLpTxs } =
-    usePoolTxsCount(poolId, "is_lp");
+    usePoolTxsCount(pool.id, "is_lp");
   const { count: countBondTxs, countDisplay: countDisplayBondTxs } =
-    usePoolTxsCount(poolId, "is_bond");
+    usePoolTxsCount(pool.id, "is_bond");
   const { count: countSuperfluidTxs, countDisplay: countDisplaySuperfluidTxs } =
-    usePoolTxsCount(poolId, "is_superfluid");
+    usePoolTxsCount(pool.id, "is_superfluid");
 
   const tableHeaderId = "poolTableHeader";
   return (
@@ -52,14 +50,14 @@ export const PoolRelatedTxs = ({
           <CustomTab count={countDisplaySwapTxs}>Swap</CustomTab>
           <CustomTab count={countDisplayLpTxs}>LP</CustomTab>
           <CustomTab count={countDisplayBondTxs}>Bonding</CustomTab>
-          {isSuperfluid && (
+          {pool.isSuperfluid && (
             <CustomTab count={countDisplaySuperfluidTxs}>Superfluid</CustomTab>
           )}
         </TabList>
         <TabPanels>
           <TabPanel p={0}>
             <PoolRelatedTxsTable
-              poolId={poolId}
+              pool={pool}
               countTxs={countAllTxs}
               type="is_all"
               scrollComponentId={tableHeaderId}
@@ -67,7 +65,7 @@ export const PoolRelatedTxs = ({
           </TabPanel>
           <TabPanel p={0}>
             <PoolRelatedTxsTable
-              poolId={poolId}
+              pool={pool}
               countTxs={countSwapTxs}
               type="is_swap"
               scrollComponentId={tableHeaderId}
@@ -75,7 +73,7 @@ export const PoolRelatedTxs = ({
           </TabPanel>
           <TabPanel p={0}>
             <PoolRelatedTxsTable
-              poolId={poolId}
+              pool={pool}
               countTxs={countLpTxs}
               type="is_lp"
               scrollComponentId={tableHeaderId}
@@ -83,16 +81,16 @@ export const PoolRelatedTxs = ({
           </TabPanel>
           <TabPanel p={0}>
             <PoolRelatedTxsTable
-              poolId={poolId}
+              pool={pool}
               countTxs={countBondTxs}
               type="is_bond"
               scrollComponentId={tableHeaderId}
             />
           </TabPanel>
-          {isSuperfluid && (
+          {pool.isSuperfluid && (
             <TabPanel p={0}>
               <PoolRelatedTxsTable
-                poolId={poolId}
+                pool={pool}
                 countTxs={countSuperfluidTxs}
                 type="is_superfluid"
                 scrollComponentId={tableHeaderId}
diff --git a/src/lib/pages/pools/components/pool-details/header/PoolHeader.tsx b/src/lib/pages/pools/components/pool-details/header/PoolHeader.tsx
deleted file mode 100644
index a184bb2f0..000000000
--- a/src/lib/pages/pools/components/pool-details/header/PoolHeader.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Flex, Heading, Text, Image } from "@chakra-ui/react";
-import type Big from "big.js";
-
-import { DotSeparator } from "lib/components/DotSeperator";
-import type { AssetInfosOpt } from "lib/services/assetService";
-import type { PoolDetail, TokenWithValue } from "lib/types";
-import { getTokenLabel } from "lib/utils";
-
-import { PoolLogo } from "./PoolLogo";
-
-interface PoolHeaderProps {
-  pool: PoolDetail<Big, TokenWithValue>;
-  assetInfos: AssetInfosOpt;
-}
-
-export const PoolHeader = ({ pool, assetInfos }: PoolHeaderProps) => {
-  const { poolLiquidity, id: poolId, type: poolType, isSuperfluid } = pool;
-  return (
-    <Flex alignItems="center" gap={2}>
-      <PoolLogo poolLiquidity={poolLiquidity} assetInfos={assetInfos} />
-      <Flex direction="column">
-        <Flex
-          gap={2}
-          sx={{
-            "h6:last-of-type > span": {
-              display: "none",
-            },
-          }}
-        >
-          {poolLiquidity.slice(0, 4).map((item) => (
-            <Heading as="h6" fontWeight="600" variant="h6" key={item.denom}>
-              {assetInfos?.[item.denom]?.symbol ?? getTokenLabel(item.denom)}
-              <Text as="span" ml={2} color="honeydew.main">
-                /
-              </Text>
-            </Heading>
-          ))}
-          {poolLiquidity.length > 4 && (
-            <Heading as="h6" fontWeight="600" variant="h6">
-              <Text as="span" mr={2} color="honeydew.main">
-                /
-              </Text>
-              + {poolLiquidity.length - 4}
-            </Heading>
-          )}
-        </Flex>
-        <Flex alignItems="center" gap={2} mt={1}>
-          <Text variant="body2" color="lilac.main">
-            #{poolId}
-          </Text>
-          {poolType && (
-            <Flex alignItems="center" gap={2}>
-              <DotSeparator />
-              <Flex alignItems="center" gap={1}>
-                <Image
-                  boxSize={4}
-                  src={
-                    poolType === "Balancer"
-                      ? "https://assets.alleslabs.dev/webapp-assets/pool/pool-balancer.svg"
-                      : "https://assets.alleslabs.dev/webapp-assets/pool/pool-stableswap.svg"
-                  }
-                />
-                <Text variant="body2" color="text.dark">
-                  {poolType === "Balancer"
-                    ? "Balancer Pool"
-                    : "StableSwap Pool"}
-                </Text>
-              </Flex>
-            </Flex>
-          )}
-          {isSuperfluid && (
-            <Flex alignItems="center" gap={2}>
-              <DotSeparator />
-              <Flex alignItems="center" gap={1}>
-                <Image
-                  boxSize={4}
-                  src="https://assets.alleslabs.dev/webapp-assets/pool/pool-superfluid.svg"
-                />
-                <Text variant="body2" color="text.dark">
-                  Superfluid
-                </Text>
-              </Flex>
-            </Flex>
-          )}
-        </Flex>
-      </Flex>
-    </Flex>
-  );
-};
diff --git a/src/lib/pages/pools/components/pool-details/header/PoolLogo.tsx b/src/lib/pages/pools/components/pool-details/header/PoolLogo.tsx
deleted file mode 100644
index 1aa656913..000000000
--- a/src/lib/pages/pools/components/pool-details/header/PoolLogo.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Flex, Image } from "@chakra-ui/react";
-import type Big from "big.js";
-
-import { getUndefinedTokenIcon } from "../../../utils";
-import type { AssetInfosOpt } from "lib/services/assetService";
-import type { TokenWithValue } from "lib/types";
-import type { PoolDetail } from "lib/types/pool";
-
-interface PoolLogoProps {
-  poolLiquidity: PoolDetail<Big, TokenWithValue>["poolLiquidity"];
-  assetInfos: AssetInfosOpt;
-}
-
-export const PoolLogo = ({ poolLiquidity, assetInfos }: PoolLogoProps) => {
-  return (
-    <Flex
-      css={{
-        "> img:not(:first-of-type), > div": {
-          marginLeft: "-12px",
-        },
-      }}
-      width="96px"
-      alignItems="center"
-      justifyContent="center"
-    >
-      {poolLiquidity.length > 3 ? (
-        <>
-          {poolLiquidity.slice(0, 2).map((asset, i) => (
-            <Image
-              key={`${asset.denom}-logo`}
-              boxSize={10}
-              src={
-                assetInfos?.[asset.denom]?.logo ??
-                getUndefinedTokenIcon(asset.denom)
-              }
-              zIndex={2 - i}
-            />
-          ))}
-          <Flex
-            width={10}
-            height={10}
-            borderRadius="full"
-            backgroundColor="pebble.700"
-            alignItems="center"
-            justifyContent="center"
-          >
-            +{poolLiquidity.length - 2}
-          </Flex>
-        </>
-      ) : (
-        poolLiquidity.map((item, i) => (
-          <Image
-            key={`${item.denom}-logo`}
-            boxSize={10}
-            src={
-              assetInfos?.[item.denom]?.logo ??
-              getUndefinedTokenIcon(item.denom)
-            }
-            zIndex={2 - i}
-          />
-        ))
-      )}
-    </Flex>
-  );
-};
diff --git a/src/lib/pages/pools/components/pool-details/header/index.tsx b/src/lib/pages/pools/components/pool-details/header/index.tsx
index 31408a12c..88720ad46 100644
--- a/src/lib/pages/pools/components/pool-details/header/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/index.tsx
@@ -2,22 +2,20 @@ import { Button, Flex } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import type Big from "big.js";
 
+import { PoolHeader } from "../../PoolHeader";
 import { getPoolUrl } from "lib/app-fns/explorer";
 import { useLCDEndpoint } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { openNewTab } from "lib/hooks";
-import type { AssetInfosOpt } from "lib/services/assetService";
 import type { PoolDetail, TokenWithValue } from "lib/types";
 
-import { PoolHeader } from "./PoolHeader";
 import { PoolInfo } from "./PoolInfo";
 
 interface PoolTopSectionProps {
   pool: PoolDetail<Big, TokenWithValue>;
-  assetInfos: AssetInfosOpt;
 }
 
-export const PoolTopSection = ({ pool, assetInfos }: PoolTopSectionProps) => {
+export const PoolTopSection = ({ pool }: PoolTopSectionProps) => {
   const { currentChainName } = useWallet();
   const lcdEndpoint = useLCDEndpoint();
 
@@ -28,7 +26,12 @@ export const PoolTopSection = ({ pool, assetInfos }: PoolTopSectionProps) => {
   return (
     <>
       <Flex justifyContent="space-between" align="center" w="full">
-        <PoolHeader pool={pool} assetInfos={assetInfos} />
+        <PoolHeader
+          poolId={pool.id}
+          isSuperfluid={pool.isSuperfluid}
+          poolType={pool.type}
+          poolLiquidity={pool.poolLiquidity}
+        />
         <Flex align="center" gap={2}>
           <Button
             variant="ghost-gray"
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
index 150a7c874..8ea6eb176 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -1,17 +1,26 @@
 import { Flex, Text, Grid, useDisclosure, Box, Badge } from "@chakra-ui/react";
+import type Big from "big.js";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { TableNoBorderRow } from "lib/components/table";
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { Message, Transaction } from "lib/types";
+import type {
+  Message,
+  PoolDetail,
+  TokenWithValue,
+  Transaction,
+} from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 import { PoolMsgAction, PoolMsgDetail } from "./messages";
+import { PoolOtherMsgs } from "./messages/PoolOtherMsgs";
 
 interface PoolTxsMsgProps {
   msgIndex: number;
-  message: Message;
+  message?: Message;
+  otherMsgs: { [key: string]: number };
+  pool: PoolDetail<Big, TokenWithValue>;
   transaction: Transaction;
   assetInfos: AssetInfosOpt;
   templateColumns: string;
@@ -20,6 +29,8 @@ interface PoolTxsMsgProps {
 export const PoolTxsMsg = ({
   msgIndex,
   message,
+  otherMsgs,
+  pool,
   transaction,
   assetInfos,
   templateColumns,
@@ -38,6 +49,11 @@ export const PoolTxsMsg = ({
       borderY="0.5px solid"
       borderColor="pebble.700"
       _hover={{ background: "pebble.900" }}
+      sx={{
+        "&:hover .pool-msg-detail-container": {
+          borderColor: "pebble.700",
+        },
+      }}
     >
       <Grid
         className="copier-wrapper"
@@ -47,7 +63,7 @@ export const PoolTxsMsg = ({
         cursor="pointer"
       >
         <TableNoBorderRow>
-          {transaction.success && (
+          {transaction.success && message && (
             <CustomIcon
               name="chevron-down"
               transform={isOpen ? "rotate(0)" : "rotate(-90deg)"}
@@ -80,7 +96,11 @@ export const PoolTxsMsg = ({
             ))}
         </TableNoBorderRow>
         <TableNoBorderRow>
-          <PoolMsgAction msg={message} assetInfos={assetInfos} />
+          {message ? (
+            <PoolMsgAction msg={message} pool={pool} assetInfos={assetInfos} />
+          ) : (
+            <PoolOtherMsgs otherMsgs={otherMsgs} />
+          )}
         </TableNoBorderRow>
 
         <TableNoBorderRow>
@@ -102,7 +122,7 @@ export const PoolTxsMsg = ({
           )}
         </TableNoBorderRow>
       </Grid>
-      {transaction.success && (
+      {transaction.success && message && (
         <Grid
           w="full"
           py={4}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
index 68c69bd9d..5100bbd72 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
@@ -1,13 +1,20 @@
 import { TableContainer } from "@chakra-ui/react";
+import type Big from "big.js";
 
 import { Loading } from "lib/components/Loading";
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { Option, Transaction } from "lib/types";
+import type {
+  Option,
+  PoolDetail,
+  TokenWithValue,
+  Transaction,
+} from "lib/types";
 
 import { PoolTxsTableHeader } from "./PoolTxsTableHeader";
 import { PoolTxsTableRow } from "./PoolTxsTableRow";
 
 interface PoolTxsTableProps {
+  pool: PoolDetail<Big, TokenWithValue>;
   transactions: Option<Transaction[]>;
   assetInfos: AssetInfosOpt;
   isLoading: boolean;
@@ -15,6 +22,7 @@ interface PoolTxsTableProps {
 }
 
 export const PoolTxsTable = ({
+  pool,
   transactions,
   assetInfos,
   isLoading,
@@ -32,6 +40,7 @@ export const PoolTxsTable = ({
       {transactions.map((transaction) => (
         <PoolTxsTableRow
           key={transaction.hash}
+          pool={pool}
           transaction={transaction}
           assetInfos={assetInfos}
           templateColumns={templateColumns}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx
index d75cfdf81..3dd570cca 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx
@@ -1,29 +1,55 @@
+import type Big from "big.js";
+
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { Transaction } from "lib/types";
+import type { PoolDetail, TokenWithValue, Transaction } from "lib/types";
 
+import { extractPoolMsgs } from "./messages/utils";
 import { PoolTxsMsg } from "./PoolTxsMsg";
 
 interface PoolTxsTableRowProps {
+  pool: PoolDetail<Big, TokenWithValue>;
   transaction: Transaction;
   assetInfos: AssetInfosOpt;
   templateColumns: string;
 }
 
 export const PoolTxsTableRow = ({
+  pool,
   transaction,
   assetInfos,
   templateColumns,
-}: PoolTxsTableRowProps) => (
-  <>
-    {transaction.messages.map((message, index) => (
-      <PoolTxsMsg
-        key={transaction.hash + index.toString()}
-        msgIndex={index}
-        message={message}
-        transaction={transaction}
-        assetInfos={assetInfos}
-        templateColumns={templateColumns}
-      />
-    ))}
-  </>
-);
+}: PoolTxsTableRowProps) => {
+  const { msgs: filteredMsgs, others } = extractPoolMsgs(
+    transaction.messages,
+    pool.id
+  );
+  const hasOtherMsgs = Object.values(others).some((count) => count > 0);
+  return (
+    <>
+      {hasOtherMsgs && (
+        <PoolTxsMsg
+          key={`${transaction.hash}0`}
+          msgIndex={0}
+          otherMsgs={others}
+          message={undefined}
+          pool={pool}
+          transaction={transaction}
+          assetInfos={assetInfos}
+          templateColumns={templateColumns}
+        />
+      )}
+      {filteredMsgs.map((message, index) => (
+        <PoolTxsMsg
+          key={transaction.hash + Number(hasOtherMsgs) + index.toString()}
+          msgIndex={Number(hasOtherMsgs) + index}
+          otherMsgs={others}
+          message={message}
+          pool={pool}
+          transaction={transaction}
+          assetInfos={assetInfos}
+          templateColumns={templateColumns}
+        />
+      ))}
+    </>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/index.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/index.tsx
index 2a537a122..38ca9d470 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/index.tsx
@@ -1,3 +1,4 @@
+import type Big from "big.js";
 import type { ChangeEvent } from "react";
 
 import { Pagination } from "lib/components/pagination";
@@ -5,19 +6,19 @@ import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
 import { useAssetInfos } from "lib/services/assetService";
 import { useTxsByPoolIdPagination } from "lib/services/txService";
-import type { PoolTxFilter } from "lib/types";
+import type { PoolDetail, PoolTxFilter, TokenWithValue } from "lib/types";
 
 import { PoolTxsTable } from "./PoolTxsTable";
 
 interface PoolRelatedTxsTableProps {
-  poolId: number;
+  pool: PoolDetail<Big, TokenWithValue>;
   countTxs: number;
   type: PoolTxFilter;
   scrollComponentId: string;
 }
 
 export const PoolRelatedTxsTable = ({
-  poolId,
+  pool,
   countTxs,
   type,
   scrollComponentId,
@@ -44,7 +45,7 @@ export const PoolRelatedTxsTable = ({
     data: txs,
     isLoading,
     error,
-  } = useTxsByPoolIdPagination(poolId, type, offset, pageSize);
+  } = useTxsByPoolIdPagination(pool.id, type, offset, pageSize);
 
   const onPageChange = (nextPage: number) => {
     setCurrentPage(nextPage);
@@ -67,6 +68,7 @@ export const PoolRelatedTxsTable = ({
   return (
     <>
       <PoolTxsTable
+        pool={pool}
         transactions={txs}
         assetInfos={assetInfos}
         isLoading={isLoadingAssetInfos || isLoading}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
new file mode 100644
index 000000000..24c3d1a43
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
@@ -0,0 +1,25 @@
+import { Flex, Tag, Text } from "@chakra-ui/react";
+
+import { extractMsgType } from "lib/utils";
+
+interface PoolOtherMsgsProps {
+  otherMsgs: { [key: string]: number };
+}
+
+export const PoolOtherMsgs = ({ otherMsgs }: PoolOtherMsgsProps) => {
+  const typePaths = Object.keys(otherMsgs);
+  return (
+    <Flex gap={1} flexWrap="wrap">
+      Total
+      {typePaths.map((typePath, index) => {
+        const type = extractMsgType(typePath);
+        return (
+          <Text key={typePath} fontWeight={600}>
+            {type} <Tag borderRadius="full">{otherMsgs[typePath]}</Tag>
+            {index + 1 < typePaths.length && ","}
+          </Text>
+        );
+      })}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/AssetCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx
similarity index 100%
rename from src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/AssetCard.tsx
rename to src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx
new file mode 100644
index 000000000..8f2adbcf8
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx
@@ -0,0 +1,23 @@
+import { Flex } from "@chakra-ui/react";
+import type Big from "big.js";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { PoolLogo } from "lib/pages/pools/components/PoolLogo";
+import type { PoolDetail, TokenWithValue } from "lib/types";
+
+interface PoolLogoLinkProps {
+  pool: PoolDetail<Big, TokenWithValue>;
+}
+
+export const PoolLogoLink = ({ pool }: PoolLogoLinkProps) => (
+  <Flex gap={1}>
+    <PoolLogo
+      tokens={pool.poolLiquidity}
+      logoSize={5}
+      marginLeft={-4}
+      minW={0}
+      textVariant="small"
+    />
+    <ExplorerLink type="pool_id" value={pool.id.toString()} showCopyOnHover />
+  </Flex>
+);
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/index.ts b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/index.ts
new file mode 100644
index 000000000..ee732781d
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/index.ts
@@ -0,0 +1,2 @@
+export * from "./AssetCard";
+export * from "./PoolLogoLink";
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx
index fdb31ed41..7d20850af 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx
@@ -1,9 +1,24 @@
 import { Text } from "@chakra-ui/react";
+import type Big from "big.js";
 
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { Message } from "lib/types";
+import type { Message, PoolDetail, TokenWithValue } from "lib/types";
+import { extractTxDetails } from "lib/utils";
 
-import type { MsgSwapExactAmountIn, MsgSwapExactAmountOut } from "./messages";
+import {
+  MsgExitPoolAction,
+  MsgExitPoolDetail,
+  MsgExitSwapExternAmountOutAction,
+  MsgExitSwapExternAmountOutDetail,
+  MsgExitSwapShareAmountInAction,
+  MsgExitSwapShareAmountInDetail,
+  MsgJoinPoolAction,
+  MsgJoinPoolDetail,
+  MsgJoinSwapExternAmountInAction,
+  MsgJoinSwapExternAmountInDetail,
+  MsgJoinSwapShareAmountOutAction,
+  MsgJoinSwapShareAmountOutDetail,
+} from "./lp";
 import {
   MsgSwapExactAmountInAction,
   MsgSwapExactAmountInDetail,
@@ -13,31 +28,84 @@ import {
 
 export const PoolMsgAction = ({
   msg,
+  pool,
   assetInfos,
 }: {
   msg: Message;
+  pool: PoolDetail<Big, TokenWithValue>;
   assetInfos: AssetInfosOpt;
 }) => {
-  // TODO: fix and add cases
-  switch (msg.type) {
+  const { type, detail, log } = msg;
+  switch (type) {
     case "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn":
-    case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn":
+    case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn": {
+      const details = extractTxDetails(type, detail, log);
       return (
-        <MsgSwapExactAmountInAction
-          msg={msg.detail as MsgSwapExactAmountIn}
+        <MsgSwapExactAmountInAction msg={details} assetInfos={assetInfos} />
+      );
+    }
+    case "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut":
+    case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountOut": {
+      const details = extractTxDetails(type, detail, log);
+      return (
+        <MsgSwapExactAmountOutAction msg={details} assetInfos={assetInfos} />
+      );
+    }
+    case "/osmosis.gamm.v1beta1.MsgJoinPool": {
+      const details = extractTxDetails(type, detail, log);
+      return (
+        <MsgJoinPoolAction msg={details} pool={pool} assetInfos={assetInfos} />
+      );
+    }
+    case "/osmosis.gamm.v1beta1.MsgJoinSwapExternAmountIn": {
+      const details = extractTxDetails(type, detail, log);
+      return (
+        <MsgJoinSwapExternAmountInAction
+          msg={details}
+          pool={pool}
           assetInfos={assetInfos}
         />
       );
-    case "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut":
-    case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountOut":
+    }
+    case "/osmosis.gamm.v1beta1.MsgJoinSwapShareAmountOut": {
+      const details = extractTxDetails(type, detail, log);
       return (
-        <MsgSwapExactAmountOutAction
-          msg={msg.detail as MsgSwapExactAmountOut}
+        <MsgJoinSwapShareAmountOutAction
+          msg={details}
+          pool={pool}
           assetInfos={assetInfos}
         />
       );
-    default:
+    }
+    case "/osmosis.gamm.v1beta1.MsgExitPool": {
+      const details = extractTxDetails(type, detail, log);
+      return (
+        <MsgExitPoolAction msg={details} pool={pool} assetInfos={assetInfos} />
+      );
+    }
+    case "/osmosis.gamm.v1beta1.MsgExitSwapShareAmountIn": {
+      const details = extractTxDetails(type, detail, log);
+      return (
+        <MsgExitSwapShareAmountInAction
+          msg={details}
+          pool={pool}
+          assetInfos={assetInfos}
+        />
+      );
+    }
+    case "/osmosis.gamm.v1beta1.MsgExitSwapExternAmountOut": {
+      const details = extractTxDetails(type, detail, log);
+      return (
+        <MsgExitSwapExternAmountOutAction
+          msg={details}
+          pool={pool}
+          assetInfos={assetInfos}
+        />
+      );
+    }
+    default: {
       return <Text>{msg.type}</Text>;
+    }
   }
 };
 
@@ -56,33 +124,115 @@ export const PoolMsgDetail = ({
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
 }) => {
-  // TODO: fix and add cases
-  switch (msg.type) {
+  const { type, detail, log } = msg;
+  switch (type) {
     case "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn":
-    case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn":
+    case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn": {
+      const details = extractTxDetails(type, detail, log);
       return (
         <MsgSwapExactAmountInDetail
           txHash={txHash}
           blockHeight={blockHeight}
           msgIndex={msgIndex}
-          msg={msg.detail as MsgSwapExactAmountIn}
+          msg={details}
           assetInfos={assetInfos}
           isOpened={isOpened}
         />
       );
+    }
     case "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut":
-    case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountOut":
+    case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountOut": {
+      const details = extractTxDetails(type, detail, log);
       return (
         <MsgSwapExactAmountOutDetail
           txHash={txHash}
           blockHeight={blockHeight}
           msgIndex={msgIndex}
-          msg={msg.detail as MsgSwapExactAmountOut}
+          msg={details}
+          assetInfos={assetInfos}
+          isOpened={isOpened}
+        />
+      );
+    }
+    case "/osmosis.gamm.v1beta1.MsgJoinPool": {
+      const details = extractTxDetails(type, detail, log);
+      return (
+        <MsgJoinPoolDetail
+          txHash={txHash}
+          blockHeight={blockHeight}
+          msgIndex={msgIndex}
+          msg={details}
+          assetInfos={assetInfos}
+          isOpened={isOpened}
+        />
+      );
+    }
+    case "/osmosis.gamm.v1beta1.MsgJoinSwapExternAmountIn": {
+      const details = extractTxDetails(type, detail, log);
+      return (
+        <MsgJoinSwapExternAmountInDetail
+          txHash={txHash}
+          blockHeight={blockHeight}
+          msgIndex={msgIndex}
+          msg={details}
+          assetInfos={assetInfos}
+          isOpened={isOpened}
+        />
+      );
+    }
+    case "/osmosis.gamm.v1beta1.MsgJoinSwapShareAmountOut": {
+      const details = extractTxDetails(type, detail, log);
+      return (
+        <MsgJoinSwapShareAmountOutDetail
+          txHash={txHash}
+          blockHeight={blockHeight}
+          msgIndex={msgIndex}
+          msg={details}
+          assetInfos={assetInfos}
+          isOpened={isOpened}
+        />
+      );
+    }
+    case "/osmosis.gamm.v1beta1.MsgExitPool": {
+      const details = extractTxDetails(type, detail, log);
+      return (
+        <MsgExitPoolDetail
+          txHash={txHash}
+          blockHeight={blockHeight}
+          msgIndex={msgIndex}
+          msg={details}
+          assetInfos={assetInfos}
+          isOpened={isOpened}
+        />
+      );
+    }
+    case "/osmosis.gamm.v1beta1.MsgExitSwapShareAmountIn": {
+      const details = extractTxDetails(type, detail, log);
+      return (
+        <MsgExitSwapShareAmountInDetail
+          txHash={txHash}
+          blockHeight={blockHeight}
+          msgIndex={msgIndex}
+          msg={details}
+          assetInfos={assetInfos}
+          isOpened={isOpened}
+        />
+      );
+    }
+    case "/osmosis.gamm.v1beta1.MsgExitSwapExternAmountOut": {
+      const details = extractTxDetails(type, detail, log);
+      return (
+        <MsgExitSwapExternAmountOutDetail
+          txHash={txHash}
+          blockHeight={blockHeight}
+          msgIndex={msgIndex}
+          msg={details}
           assetInfos={assetInfos}
           isOpened={isOpened}
         />
       );
+    }
     default:
-      return <Text h={20}>{msg.type}</Text>;
+      return <Text h={20}>{JSON.stringify(msg.detail)}</Text>;
   }
 };
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx
new file mode 100644
index 000000000..f86dcd0d3
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx
@@ -0,0 +1,56 @@
+import { Flex } from "@chakra-ui/react";
+import type Big from "big.js";
+
+import { PoolLogoLink } from "../components";
+import { getPoolDenom } from "../utils";
+import { MsgToken } from "lib/components/action-msg/MsgToken";
+import { CustomIcon } from "lib/components/icon";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { MsgExitPoolDetails } from "lib/utils/tx/types";
+
+interface MsgExitPoolActionProps {
+  msg: MsgExitPoolDetails;
+  pool: PoolDetail<Big, TokenWithValue>;
+  assetInfos: AssetInfosOpt;
+}
+
+export const MsgExitPoolAction = ({
+  msg,
+  pool,
+  assetInfos,
+}: MsgExitPoolActionProps) => {
+  const poolDenom = getPoolDenom(msg.pool_id);
+  const poolAssetInfo = assetInfos?.[poolDenom];
+  return (
+    <Flex gap={1} alignItems="center" flexWrap="wrap">
+      Burned
+      <MsgToken
+        coin={{ amount: msg.share_in_amount, denom: poolDenom }}
+        symbol={poolAssetInfo?.symbol}
+        precision={poolAssetInfo?.precision}
+        fontWeight={700}
+      />
+      from
+      <PoolLogoLink pool={pool} />
+      <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
+      {msg.token_out_mins.map((asset, index) => {
+        const outAssetInfo = assetInfos?.[asset.denom];
+        return (
+          <Flex gap={1} alignItems="center">
+            {index > 0 && (
+              <CustomIcon name="plus" boxSize={4} color="lilac.main" />
+            )}
+            at least
+            <MsgToken
+              coin={asset}
+              symbol={outAssetInfo?.symbol}
+              precision={outAssetInfo?.precision}
+              fontWeight={400}
+            />
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
new file mode 100644
index 000000000..76843d2cd
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
@@ -0,0 +1,56 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { MsgExitPoolDetails } from "lib/utils/tx/types";
+
+import { PoolAssetCard, LiquidityDivider, PoolAssetsGrid } from "./components";
+
+interface MsgExitPoolDetailProps {
+  txHash: string;
+  blockHeight: number;
+  msgIndex: number;
+  msg: MsgExitPoolDetails;
+  assetInfos: AssetInfosOpt;
+  isOpened: boolean;
+}
+
+export const MsgExitPoolDetail = ({
+  txHash,
+  blockHeight,
+  msgIndex,
+  msg,
+  assetInfos,
+  isOpened,
+}: MsgExitPoolDetailProps) => (
+  <Flex w="full" alignItems="start" gap={12}>
+    <Flex direction="column" minW="100px">
+      <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+        Block height
+      </Text>
+      <ExplorerLink
+        value={blockHeight.toString()}
+        type="block_height"
+        showCopyOnHover
+      />
+    </Flex>
+    <Flex direction="column" gap={3}>
+      <PoolAssetCard
+        msgIndex={msgIndex}
+        poolId={msg.pool_id}
+        msgShareAmount={msg.share_in_amount}
+        assetInfos={assetInfos}
+        isJoin={false}
+        isOpened={isOpened}
+      />
+      <LiquidityDivider />
+      <PoolAssetsGrid
+        txHash={txHash}
+        msgIndex={msgIndex}
+        isJoin={false}
+        assetInfos={assetInfos}
+        isOpened={isOpened}
+      />
+    </Flex>
+  </Flex>
+);
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx
new file mode 100644
index 000000000..3eac223cc
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx
@@ -0,0 +1,46 @@
+import { Flex } from "@chakra-ui/react";
+import type Big from "big.js";
+
+import { PoolLogoLink } from "../components";
+import { getPoolDenom } from "../utils";
+import { MsgToken } from "lib/components/action-msg/MsgToken";
+import { CustomIcon } from "lib/components/icon";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { MsgExitSwapExternAmountOutDetails } from "lib/utils/tx/types";
+
+interface MsgExitSwapExternAmountOutActionProps {
+  msg: MsgExitSwapExternAmountOutDetails;
+  pool: PoolDetail<Big, TokenWithValue>;
+  assetInfos: AssetInfosOpt;
+}
+
+export const MsgExitSwapExternAmountOutAction = ({
+  msg,
+  pool,
+  assetInfos,
+}: MsgExitSwapExternAmountOutActionProps) => {
+  const outAssetInfo = assetInfos?.[msg.token_out.denom];
+  const poolDenom = getPoolDenom(msg.pool_id);
+  const poolAssetInfo = assetInfos?.[poolDenom];
+  return (
+    <Flex gap={1} alignItems="center" flexWrap="wrap">
+      Burned at most
+      <MsgToken
+        coin={{ amount: msg.share_in_max_amount, denom: poolDenom }}
+        symbol={poolAssetInfo?.symbol}
+        precision={poolAssetInfo?.precision}
+        fontWeight={400}
+      />
+      to
+      <PoolLogoLink pool={pool} />
+      <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
+      <MsgToken
+        coin={msg.token_out}
+        symbol={outAssetInfo?.symbol}
+        precision={outAssetInfo?.precision}
+        fontWeight={700}
+      />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
new file mode 100644
index 000000000..082e300f6
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
@@ -0,0 +1,57 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { MsgExitSwapExternAmountOutDetails } from "lib/utils/tx/types";
+
+import { PoolAssetCard, LiquidityDivider, PoolAssetsGrid } from "./components";
+
+interface MsgExitSwapExternAmountOutDetailProps {
+  txHash: string;
+  blockHeight: number;
+  msgIndex: number;
+  msg: MsgExitSwapExternAmountOutDetails;
+  assetInfos: AssetInfosOpt;
+  isOpened: boolean;
+}
+
+export const MsgExitSwapExternAmountOutDetail = ({
+  txHash,
+  blockHeight,
+  msgIndex,
+  msg,
+  assetInfos,
+  isOpened,
+}: MsgExitSwapExternAmountOutDetailProps) => (
+  <Flex w="full" alignItems="start" gap={12}>
+    <Flex direction="column" minW="100px">
+      <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+        Block height
+      </Text>
+      <ExplorerLink
+        value={blockHeight.toString()}
+        type="block_height"
+        showCopyOnHover
+      />
+    </Flex>
+    <Flex direction="column" gap={3}>
+      <PoolAssetCard
+        txHash={txHash}
+        msgIndex={msgIndex}
+        poolId={msg.pool_id}
+        assetInfos={assetInfos}
+        isJoin={false}
+        isOpened={isOpened}
+      />
+      <LiquidityDivider />
+      <PoolAssetsGrid
+        txHash={txHash}
+        msgIndex={msgIndex}
+        msgAssets={[msg.token_out]}
+        isJoin={false}
+        assetInfos={assetInfos}
+        isOpened={isOpened}
+      />
+    </Flex>
+  </Flex>
+);
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx
new file mode 100644
index 000000000..e838814af
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx
@@ -0,0 +1,47 @@
+import { Flex } from "@chakra-ui/react";
+import type Big from "big.js";
+
+import { PoolLogoLink } from "../components";
+import { getPoolDenom } from "../utils";
+import { MsgToken } from "lib/components/action-msg/MsgToken";
+import { CustomIcon } from "lib/components/icon";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { MsgExitSwapShareAmountInDetails } from "lib/utils/tx/types";
+
+interface MsgExitSwapShareAmountInActionProps {
+  msg: MsgExitSwapShareAmountInDetails;
+  pool: PoolDetail<Big, TokenWithValue>;
+  assetInfos: AssetInfosOpt;
+}
+
+export const MsgExitSwapShareAmountInAction = ({
+  msg,
+  pool,
+  assetInfos,
+}: MsgExitSwapShareAmountInActionProps) => {
+  const outAssetInfo = assetInfos?.[msg.token_out_denom];
+  const poolDenom = getPoolDenom(msg.pool_id);
+  const poolAssetInfo = assetInfos?.[poolDenom];
+  return (
+    <Flex gap={1} alignItems="center" flexWrap="wrap">
+      Burned
+      <MsgToken
+        coin={{ amount: msg.share_in_amount, denom: poolDenom }}
+        symbol={poolAssetInfo?.symbol}
+        precision={poolAssetInfo?.precision}
+        fontWeight={700}
+      />
+      to
+      <PoolLogoLink pool={pool} />
+      <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
+      at least
+      <MsgToken
+        coin={{ amount: msg.token_out_min_amount, denom: msg.token_out_denom }}
+        symbol={outAssetInfo?.symbol}
+        precision={outAssetInfo?.precision}
+        fontWeight={400}
+      />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
new file mode 100644
index 000000000..fffc2ff37
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
@@ -0,0 +1,57 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { MsgExitSwapShareAmountInDetails } from "lib/utils/tx/types";
+
+import { PoolAssetCard, LiquidityDivider, PoolAssetsGrid } from "./components";
+
+interface MsgExitSwapShareAmountInDetailProps {
+  txHash: string;
+  blockHeight: number;
+  msgIndex: number;
+  msg: MsgExitSwapShareAmountInDetails;
+  assetInfos: AssetInfosOpt;
+  isOpened: boolean;
+}
+
+export const MsgExitSwapShareAmountInDetail = ({
+  txHash,
+  blockHeight,
+  msgIndex,
+  msg,
+  assetInfos,
+  isOpened,
+}: MsgExitSwapShareAmountInDetailProps) => (
+  <Flex w="full" alignItems="start" gap={12}>
+    <Flex direction="column" minW="100px">
+      <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+        Block height
+      </Text>
+      <ExplorerLink
+        value={blockHeight.toString()}
+        type="block_height"
+        showCopyOnHover
+      />
+    </Flex>
+    <Flex direction="column" gap={3}>
+      <PoolAssetCard
+        msgIndex={msgIndex}
+        poolId={msg.pool_id}
+        msgShareAmount={msg.share_in_amount}
+        assetInfos={assetInfos}
+        isJoin={false}
+        isOpened={isOpened}
+      />
+      <LiquidityDivider />
+      <PoolAssetsGrid
+        txHash={txHash}
+        msgIndex={msgIndex}
+        msgSwapDenom={msg.token_out_denom}
+        isJoin={false}
+        assetInfos={assetInfos}
+        isOpened={isOpened}
+      />
+    </Flex>
+  </Flex>
+);
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx
new file mode 100644
index 000000000..9686217bf
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx
@@ -0,0 +1,56 @@
+import { Flex } from "@chakra-ui/react";
+import type Big from "big.js";
+
+import { PoolLogoLink } from "../components";
+import { getPoolDenom } from "../utils";
+import { MsgToken } from "lib/components/action-msg/MsgToken";
+import { CustomIcon } from "lib/components/icon";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { MsgJoinPoolDetails } from "lib/utils/tx/types";
+
+interface MsgJoinPoolActionProps {
+  msg: MsgJoinPoolDetails;
+  pool: PoolDetail<Big, TokenWithValue>;
+  assetInfos: AssetInfosOpt;
+}
+
+export const MsgJoinPoolAction = ({
+  msg,
+  pool,
+  assetInfos,
+}: MsgJoinPoolActionProps) => {
+  const poolDenom = getPoolDenom(msg.pool_id);
+  const poolAssetInfo = assetInfos?.[poolDenom];
+  return (
+    <Flex gap={1} alignItems="center" flexWrap="wrap">
+      Provided
+      {msg.token_in_maxs.map((asset, index) => {
+        const inAssetInfo = assetInfos?.[asset.denom];
+        return (
+          <Flex gap={1} alignItems="center">
+            {index > 0 && (
+              <CustomIcon name="plus" boxSize={4} color="lilac.main" />
+            )}
+            at most
+            <MsgToken
+              coin={asset}
+              symbol={inAssetInfo?.symbol}
+              precision={inAssetInfo?.precision}
+              fontWeight={400}
+            />
+          </Flex>
+        );
+      })}
+      to
+      <PoolLogoLink pool={pool} />
+      <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
+      <MsgToken
+        coin={{ amount: msg.share_out_amount, denom: poolDenom }}
+        symbol={poolAssetInfo?.symbol}
+        precision={poolAssetInfo?.precision}
+        fontWeight={700}
+      />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
new file mode 100644
index 000000000..bb2104abb
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
@@ -0,0 +1,56 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { MsgJoinPoolDetails } from "lib/utils/tx/types";
+
+import { PoolAssetCard, LiquidityDivider, PoolAssetsGrid } from "./components";
+
+interface MsgJoinPoolDetailProps {
+  txHash: string;
+  blockHeight: number;
+  msgIndex: number;
+  msg: MsgJoinPoolDetails;
+  assetInfos: AssetInfosOpt;
+  isOpened: boolean;
+}
+
+export const MsgJoinPoolDetail = ({
+  txHash,
+  blockHeight,
+  msgIndex,
+  msg,
+  assetInfos,
+  isOpened,
+}: MsgJoinPoolDetailProps) => (
+  <Flex w="full" alignItems="start" gap={12}>
+    <Flex direction="column" minW="100px">
+      <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+        Block height
+      </Text>
+      <ExplorerLink
+        value={blockHeight.toString()}
+        type="block_height"
+        showCopyOnHover
+      />
+    </Flex>
+    <Flex direction="column" gap={3}>
+      <PoolAssetsGrid
+        txHash={txHash}
+        msgIndex={msgIndex}
+        isJoin
+        assetInfos={assetInfos}
+        isOpened={isOpened}
+      />
+      <LiquidityDivider />
+      <PoolAssetCard
+        msgIndex={msgIndex}
+        poolId={msg.pool_id}
+        msgShareAmount={msg.share_out_amount}
+        assetInfos={assetInfos}
+        isJoin
+        isOpened={isOpened}
+      />
+    </Flex>
+  </Flex>
+);
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx
new file mode 100644
index 000000000..0bd4ca61f
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx
@@ -0,0 +1,47 @@
+import { Flex } from "@chakra-ui/react";
+import type Big from "big.js";
+
+import { PoolLogoLink } from "../components";
+import { getPoolDenom } from "../utils";
+import { MsgToken } from "lib/components/action-msg/MsgToken";
+import { CustomIcon } from "lib/components/icon";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { MsgJoinSwapExternAmountInDetails } from "lib/utils/tx/types";
+
+interface MsgJoinSwapExternAmountInActionProps {
+  msg: MsgJoinSwapExternAmountInDetails;
+  pool: PoolDetail<Big, TokenWithValue>;
+  assetInfos: AssetInfosOpt;
+}
+
+export const MsgJoinSwapExternAmountInAction = ({
+  msg,
+  pool,
+  assetInfos,
+}: MsgJoinSwapExternAmountInActionProps) => {
+  const inAssetInfo = assetInfos?.[msg.token_in.denom];
+  const poolDenom = getPoolDenom(msg.pool_id);
+  const poolAssetInfo = assetInfos?.[poolDenom];
+  return (
+    <Flex gap={1} alignItems="center" flexWrap="wrap">
+      Provided
+      <MsgToken
+        coin={msg.token_in}
+        symbol={inAssetInfo?.symbol}
+        precision={inAssetInfo?.precision}
+        fontWeight={700}
+      />
+      to
+      <PoolLogoLink pool={pool} />
+      <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
+      at least
+      <MsgToken
+        coin={{ amount: msg.share_out_min_amount, denom: poolDenom }}
+        symbol={poolAssetInfo?.symbol}
+        precision={poolAssetInfo?.precision}
+        fontWeight={400}
+      />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
new file mode 100644
index 000000000..26e2cdbdf
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
@@ -0,0 +1,56 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { MsgJoinSwapExternAmountInDetails } from "lib/utils/tx/types";
+
+import { LiquidityDivider, PoolAssetCard, PoolAssetsGrid } from "./components";
+
+interface MsgJoinSwapExternAmountInDetailProps {
+  txHash: string;
+  blockHeight: number;
+  msgIndex: number;
+  msg: MsgJoinSwapExternAmountInDetails;
+  assetInfos: AssetInfosOpt;
+  isOpened: boolean;
+}
+
+export const MsgJoinSwapExternAmountInDetail = ({
+  txHash,
+  blockHeight,
+  msgIndex,
+  msg,
+  assetInfos,
+  isOpened,
+}: MsgJoinSwapExternAmountInDetailProps) => (
+  <Flex w="full" alignItems="start" gap={12}>
+    <Flex direction="column" minW="100px">
+      <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+        Block height
+      </Text>
+      <ExplorerLink
+        value={blockHeight.toString()}
+        type="block_height"
+        showCopyOnHover
+      />
+    </Flex>
+    <Flex direction="column" gap={3}>
+      <PoolAssetsGrid
+        msgIndex={msgIndex}
+        msgAssets={[msg.token_in]}
+        isJoin
+        assetInfos={assetInfos}
+        isOpened={isOpened}
+      />
+      <LiquidityDivider />
+      <PoolAssetCard
+        txHash={txHash}
+        msgIndex={msgIndex}
+        poolId={msg.pool_id}
+        assetInfos={assetInfos}
+        isJoin
+        isOpened={isOpened}
+      />
+    </Flex>
+  </Flex>
+);
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx
new file mode 100644
index 000000000..67bd45b86
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx
@@ -0,0 +1,46 @@
+import { Flex } from "@chakra-ui/react";
+import type Big from "big.js";
+
+import { PoolLogoLink } from "../components";
+import { getPoolDenom } from "../utils";
+import { MsgToken } from "lib/components/action-msg/MsgToken";
+import { CustomIcon } from "lib/components/icon";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { MsgJoinSwapShareAmountOutDetails } from "lib/utils/tx/types";
+
+interface MsgJoinSwapShareAmountOutActionProps {
+  msg: MsgJoinSwapShareAmountOutDetails;
+  pool: PoolDetail<Big, TokenWithValue>;
+  assetInfos: AssetInfosOpt;
+}
+
+export const MsgJoinSwapShareAmountOutAction = ({
+  msg,
+  pool,
+  assetInfos,
+}: MsgJoinSwapShareAmountOutActionProps) => {
+  const inAssetInfo = assetInfos?.[msg.token_in_denom];
+  const poolDenom = getPoolDenom(msg.pool_id);
+  const poolAssetInfo = assetInfos?.[poolDenom];
+  return (
+    <Flex gap={1} alignItems="center" flexWrap="wrap">
+      Provided at most
+      <MsgToken
+        coin={{ amount: msg.token_in_max_amount, denom: msg.token_in_denom }}
+        symbol={inAssetInfo?.symbol}
+        precision={inAssetInfo?.precision}
+        fontWeight={400}
+      />
+      to
+      <PoolLogoLink pool={pool} />
+      <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
+      <MsgToken
+        coin={{ amount: msg.share_amount_out, denom: poolDenom }}
+        symbol={poolAssetInfo?.symbol}
+        precision={poolAssetInfo?.precision}
+        fontWeight={700}
+      />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
new file mode 100644
index 000000000..cd7da49c8
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
@@ -0,0 +1,56 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { MsgJoinSwapShareAmountOutDetails } from "lib/utils/tx/types";
+
+import { LiquidityDivider, PoolAssetCard, PoolAssetsGrid } from "./components";
+
+interface MsgJoinSwapShareAmountOutDetailProps {
+  txHash: string;
+  blockHeight: number;
+  msgIndex: number;
+  msg: MsgJoinSwapShareAmountOutDetails;
+  assetInfos: AssetInfosOpt;
+  isOpened: boolean;
+}
+
+export const MsgJoinSwapShareAmountOutDetail = ({
+  txHash,
+  blockHeight,
+  msgIndex,
+  msg,
+  assetInfos,
+  isOpened,
+}: MsgJoinSwapShareAmountOutDetailProps) => (
+  <Flex w="full" alignItems="start" gap={12}>
+    <Flex direction="column" minW="100px">
+      <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+        Block height
+      </Text>
+      <ExplorerLink
+        value={blockHeight.toString()}
+        type="block_height"
+        showCopyOnHover
+      />
+    </Flex>
+    <Flex direction="column" gap={3}>
+      <PoolAssetsGrid
+        txHash={txHash}
+        msgIndex={msgIndex}
+        isJoin
+        assetInfos={assetInfos}
+        isOpened={isOpened}
+      />
+      <LiquidityDivider />
+      <PoolAssetCard
+        msgIndex={msgIndex}
+        msgShareAmount={msg.share_amount_out}
+        poolId={msg.pool_id}
+        assetInfos={assetInfos}
+        isJoin
+        isOpened={isOpened}
+      />
+    </Flex>
+  </Flex>
+);
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/LiquidityDivider.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/LiquidityDivider.tsx
new file mode 100644
index 000000000..a316b0a53
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/LiquidityDivider.tsx
@@ -0,0 +1,11 @@
+import { Divider, Flex } from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+
+export const LiquidityDivider = () => (
+  <Flex gap={2} alignItems="center">
+    <Divider borderColor="honeydew.main" />
+    <CustomIcon name="arrow-down" boxSize={4} color="honeydew.main" />
+    <Divider borderColor="honeydew.main" />
+  </Flex>
+);
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetCard.tsx
new file mode 100644
index 000000000..48295fd2e
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetCard.tsx
@@ -0,0 +1,137 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { getPoolDenom } from "../../utils";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { Loading } from "lib/components/Loading";
+import { EmptyState } from "lib/components/state";
+import { PoolLogo } from "lib/pages/pools/components/PoolLogo";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import { usePoolAssetsbyPoolIds } from "lib/services/poolService";
+import { useTxData } from "lib/services/txService";
+import type { TokenWithValue } from "lib/types";
+import {
+  coinToTokenWithValue,
+  formatBalanceWithDenom,
+  getTokenLabel,
+} from "lib/utils";
+
+interface PoolAssetCardProps {
+  txHash?: string;
+  msgIndex: number;
+  poolId: string;
+  msgShareAmount?: string;
+  assetInfos: AssetInfosOpt;
+  isJoin: boolean;
+  isOpened: boolean;
+}
+
+export const PoolAssetCard = ({
+  txHash,
+  msgIndex,
+  poolId,
+  msgShareAmount,
+  assetInfos,
+  isJoin,
+  isOpened,
+}: PoolAssetCardProps) => {
+  const { data: txData, isLoading: isTxDataLoading } = useTxData(
+    txHash,
+    isOpened
+  );
+  const { data: poolAssets, isLoading: isPoolAssetsLoading } =
+    usePoolAssetsbyPoolIds([Number(poolId)], isOpened);
+
+  if (!msgShareAmount && (isTxDataLoading || isPoolAssetsLoading))
+    return <Loading />;
+
+  const poolDenom = getPoolDenom(poolId);
+  const eventShareAmount = txData?.logs
+    .find((event) => event.msg_index === msgIndex)
+    ?.events?.find((event) => event.type === "coin_received")
+    ?.attributes.at(3)
+    ?.value.slice(0, -poolDenom.length);
+
+  const shareAmount = msgShareAmount ?? eventShareAmount;
+  if (!shareAmount || !poolAssets)
+    return (
+      <EmptyState message="There is an error during fetching pool detail." />
+    );
+
+  const tokens = poolAssets[Number(poolId)].map<TokenWithValue>((denom) =>
+    coinToTokenWithValue(denom, "0", assetInfos?.[denom])
+  );
+  return (
+    <Flex
+      className="pool-msg-detail-container"
+      direction="column"
+      gap={2}
+      p={4}
+      border="1px solid"
+      borderColor="transparent"
+      borderRadius="8px"
+      bgColor="pebble.900"
+    >
+      <Flex justifyContent="space-between">
+        <Text variant="body2" textColor="text.dark">
+          {isJoin ? "Provided to" : "Removed from"}
+        </Text>
+        <Text>
+          {isJoin ? "Received " : "Burn "}
+          <span style={{ fontWeight: 700 }}>
+            {formatBalanceWithDenom({
+              coin: { amount: shareAmount, denom: poolDenom },
+              symbol: assetInfos?.[poolDenom]?.symbol,
+              precision: assetInfos?.[poolDenom]?.precision,
+            })}
+          </span>
+        </Text>
+      </Flex>
+      <Flex
+        alignItems="center"
+        gap={3}
+        px={3}
+        py={2}
+        borderRadius="8px"
+        background="pebble.800"
+      >
+        <PoolLogo
+          tokens={tokens}
+          logoSize={5}
+          marginLeft={-4}
+          minW="fit-content"
+          textVariant="small"
+        />
+        <div>
+          <Flex
+            gap={1}
+            css={{
+              "p:last-of-type > span": {
+                display: "none",
+              },
+            }}
+          >
+            {tokens.map((token) => (
+              <Text
+                key={token.denom}
+                variant="body2"
+                fontWeight={400}
+                color="text.main"
+              >
+                {token.symbol || getTokenLabel(token.denom)}
+                <Text as="span" fontWeight={400} color="honeydew.main">
+                  {" "}
+                  /
+                </Text>
+              </Text>
+            ))}
+          </Flex>
+          <ExplorerLink
+            type="pool_id"
+            value={poolId.toString()}
+            showCopyOnHover
+          />
+        </div>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
new file mode 100644
index 000000000..f6e957c2f
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
@@ -0,0 +1,95 @@
+import { Flex, SimpleGrid, Text } from "@chakra-ui/react";
+import type { Coin } from "@cosmjs/stargate";
+import big from "big.js";
+
+import { AssetCard } from "../../components";
+import { coinFromStr } from "../../utils";
+import { Loading } from "lib/components/Loading";
+import { EmptyState } from "lib/components/state";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import { useTxData } from "lib/services/txService";
+
+interface PoolAssetsGridProps {
+  txHash?: string;
+  msgIndex: number;
+  msgAssets?: Coin[];
+  msgSwapDenom?: string;
+  isJoin: boolean;
+  assetInfos: AssetInfosOpt;
+  isOpened: boolean;
+}
+
+export const PoolAssetsGrid = ({
+  txHash,
+  msgIndex,
+  msgAssets,
+  msgSwapDenom,
+  isJoin,
+  assetInfos,
+  isOpened,
+}: PoolAssetsGridProps) => {
+  const { data: txData, isLoading } = useTxData(txHash, isOpened);
+  if (!msgAssets && isLoading) return <Loading withBorder={false} />;
+
+  const receivedEvent = txData?.logs
+    .find((event) => event.msg_index === msgIndex)
+    ?.events?.find((event) => event.type === "coin_received");
+
+  let eventAssets = receivedEvent?.attributes
+    .at(1)
+    ?.value.split(",")
+    .map((asset) => coinFromStr(asset));
+  if (msgSwapDenom) {
+    const specifiedAsset = eventAssets?.find(
+      (asset) => asset.denom === msgSwapDenom
+    );
+
+    const swapAttr = receivedEvent?.attributes.at(-1)?.value;
+    const swapAsset = swapAttr ? coinFromStr(swapAttr) : undefined;
+
+    eventAssets =
+      specifiedAsset && swapAsset
+        ? [
+            {
+              amount: big(specifiedAsset.amount)
+                .add(big(swapAsset.amount))
+                .toString(),
+              denom: msgSwapDenom,
+            },
+          ]
+        : [];
+  }
+
+  const assets = msgAssets ?? eventAssets;
+  if (!assets)
+    return (
+      <EmptyState message="There is an error during fetching message detail." />
+    );
+
+  return (
+    <Flex
+      className="pool-msg-detail-container"
+      direction="column"
+      gap={2}
+      p={4}
+      border="1px solid"
+      borderColor="transparent"
+      borderRadius="8px"
+      bgColor="pebble.900"
+    >
+      <Text variant="body2" textColor="text.dark">
+        {isJoin ? "Provided Assets" : "Receiving Assets"}
+      </Text>
+      <SimpleGrid columns={2} spacing={2}>
+        {assets.map((asset) => (
+          <AssetCard
+            key={asset.denom}
+            amount={asset.amount}
+            denom={asset.denom}
+            assetInfo={assetInfos?.[asset.denom]}
+          />
+        ))}
+      </SimpleGrid>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/index.ts b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/index.ts
new file mode 100644
index 000000000..8dc23beaa
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/index.ts
@@ -0,0 +1,3 @@
+export * from "./LiquidityDivider";
+export * from "./PoolAssetCard";
+export * from "./PoolAssetsGrid";
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/index.ts b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/index.ts
new file mode 100644
index 000000000..3b584fe77
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/index.ts
@@ -0,0 +1,12 @@
+export * from "./MsgExitPoolAction";
+export * from "./MsgExitPoolDetail";
+export * from "./MsgExitSwapExternAmountOutAction";
+export * from "./MsgExitSwapExternAmountOutDetail";
+export * from "./MsgExitSwapShareAmountInAction";
+export * from "./MsgExitSwapShareAmountInDetail";
+export * from "./MsgJoinPoolAction";
+export * from "./MsgJoinPoolDetail";
+export * from "./MsgJoinSwapExternAmountInAction";
+export * from "./MsgJoinSwapExternAmountInDetail";
+export * from "./MsgJoinSwapShareAmountOutAction";
+export * from "./MsgJoinSwapShareAmountOutDetail";
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/messages.ts b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/messages.ts
deleted file mode 100644
index 480c003c1..000000000
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/messages.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Coin } from "@cosmjs/stargate";
-
-import type { Addr } from "lib/types";
-import type { MsgBaseDetails } from "lib/utils/tx/types";
-
-export interface MsgSwapExactAmountIn extends MsgBaseDetails {
-  routes: { poolId: number; tokenOutDenom: string }[];
-  tokenIn: Coin;
-  tokenOutMinAmount: string;
-  sender: Addr;
-}
-
-export interface MsgSwapExactAmountOut extends MsgBaseDetails {
-  routes: { poolId: number; tokenInDenom: string }[];
-  tokenOut: Coin;
-  tokenInMaxAmount: string;
-  sender: Addr;
-}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
index 963010a55..78e7b1d01 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
@@ -1,12 +1,12 @@
 import { Flex } from "@chakra-ui/react";
 
-import type { MsgSwapExactAmountIn } from "../messages";
 import { MsgToken } from "lib/components/action-msg/MsgToken";
 import { CustomIcon } from "lib/components/icon";
 import type { AssetInfosOpt } from "lib/services/assetService";
+import type { MsgSwapExactAmountInDetails } from "lib/utils/tx/types";
 
 interface MsgSwapExactAmountInActionProps {
-  msg: MsgSwapExactAmountIn;
+  msg: MsgSwapExactAmountInDetails;
   assetInfos: AssetInfosOpt;
 }
 
@@ -14,14 +14,14 @@ export const MsgSwapExactAmountInAction = ({
   msg,
   assetInfos,
 }: MsgSwapExactAmountInActionProps) => {
-  const inAssetInfo = assetInfos?.[msg.tokenIn.denom];
+  const inAssetInfo = assetInfos?.[msg.token_in.denom];
   const tokenOutDenom = msg.routes.at(-1)?.tokenOutDenom ?? "";
   const outAssetInfo = assetInfos?.[tokenOutDenom];
   return (
     <Flex gap={1} alignItems="center" flexWrap="wrap">
       Swap
       <MsgToken
-        coin={msg.tokenIn}
+        coin={msg.token_in}
         symbol={inAssetInfo?.symbol}
         precision={inAssetInfo?.precision}
         fontWeight={700}
@@ -29,7 +29,7 @@ export const MsgSwapExactAmountInAction = ({
       <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
       at least
       <MsgToken
-        coin={{ amount: msg.tokenOutMinAmount, denom: tokenOutDenom }}
+        coin={{ amount: msg.token_out_min_amount, denom: tokenOutDenom }}
         symbol={outAssetInfo?.symbol}
         precision={outAssetInfo?.precision}
         fontWeight={400}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
index 5c0d85ffc..e6eb28b17 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
@@ -1,8 +1,8 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import type { MsgSwapExactAmountIn } from "../messages";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
+import type { MsgSwapExactAmountInDetails } from "lib/utils/tx/types";
 
 import { PoolRoute, PoolSwap } from "./components";
 
@@ -10,7 +10,7 @@ interface MsgSwapExactAmountInDetailProps {
   txHash: string;
   blockHeight: number;
   msgIndex: number;
-  msg: MsgSwapExactAmountIn;
+  msg: MsgSwapExactAmountInDetails;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
 }
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
index 7197cd6f5..af270c436 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
@@ -1,12 +1,12 @@
 import { Flex } from "@chakra-ui/react";
 
-import type { MsgSwapExactAmountOut } from "../messages";
 import { MsgToken } from "lib/components/action-msg/MsgToken";
 import { CustomIcon } from "lib/components/icon";
 import type { AssetInfosOpt } from "lib/services/assetService";
+import type { MsgSwapExactAmountOutDetails } from "lib/utils/tx/types";
 
 interface MsgSwapExactAmountOutActionProps {
-  msg: MsgSwapExactAmountOut;
+  msg: MsgSwapExactAmountOutDetails;
   assetInfos: AssetInfosOpt;
 }
 
@@ -16,19 +16,19 @@ export const MsgSwapExactAmountOutAction = ({
 }: MsgSwapExactAmountOutActionProps) => {
   const tokenInDenom = msg.routes.at(0)?.tokenInDenom ?? "";
   const inAssetInfo = assetInfos?.[tokenInDenom];
-  const outAssetInfo = assetInfos?.[msg.tokenOut.denom];
+  const outAssetInfo = assetInfos?.[msg.token_out.denom];
   return (
     <Flex gap={1} alignItems="center" flexWrap="wrap">
       Swap at most
       <MsgToken
-        coin={{ amount: msg.tokenInMaxAmount, denom: tokenInDenom }}
+        coin={{ amount: msg.token_in_max_amount, denom: tokenInDenom }}
         symbol={inAssetInfo?.symbol}
         precision={inAssetInfo?.precision}
         fontWeight={400}
       />
       <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
       <MsgToken
-        coin={msg.tokenOut}
+        coin={msg.token_out}
         symbol={outAssetInfo?.symbol}
         precision={outAssetInfo?.precision}
         fontWeight={700}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
index 027f003af..25aa4eeac 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
@@ -1,8 +1,8 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import type { MsgSwapExactAmountOut } from "../messages";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
+import type { MsgSwapExactAmountOutDetails } from "lib/utils/tx/types";
 
 import { PoolRoute, PoolSwap } from "./components";
 
@@ -10,7 +10,7 @@ interface MsgSwapExactAmountOutDetailProps {
   txHash: string;
   blockHeight: number;
   msgIndex: number;
-  msg: MsgSwapExactAmountOut;
+  msg: MsgSwapExactAmountOutDetails;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
 }
@@ -25,7 +25,7 @@ export const MsgSwapExactAmountOutDetail = ({
 }: MsgSwapExactAmountOutDetailProps) => {
   const outDenoms = msg.routes
     .map((route) => route.tokenInDenom)
-    .concat(msg.tokenOut.denom);
+    .concat(msg.token_out.denom);
   const routes = msg.routes.map((route, index) => ({
     poolId: route.poolId,
     tokenOutDenom: outDenoms.at(index + 1) ?? "",
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
index 16d0008bc..1d530dce7 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
@@ -9,12 +9,10 @@ import type { AssetInfosOpt } from "lib/services/assetService";
 import { usePoolAssetsbyPoolIds } from "lib/services/poolService";
 import type { TokenWithValue } from "lib/types";
 import { coinToTokenWithValue, getTokenLabel } from "lib/utils";
+import type { MsgSwapExactAmountInDetails } from "lib/utils/tx/types";
 
 interface PoolRouteProps {
-  routes: {
-    poolId: number;
-    tokenOutDenom: string;
-  }[];
+  routes: MsgSwapExactAmountInDetails["routes"];
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
 }
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
index 3ecd16350..78676562b 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
@@ -1,6 +1,7 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import { AssetCard } from "../../AssetCard";
+import { AssetCard } from "../../components";
+import { coinFromStr } from "../../utils";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
@@ -33,13 +34,11 @@ export const PoolSwap = ({
 
   // Get the token-in from the third attribute of the event e.g. 10000utoken
   const inAsset = swapEvent.attributes.at(3)?.value ?? "";
-  const inAmount = inAsset.match(/[0-9]+/g)?.[0] ?? "";
-  const inDenom = inAsset.slice(inAmount.length);
+  const { amount: inAmount, denom: inDenom } = coinFromStr(inAsset);
 
   // Get the token-out from the last attribute of the event e.g. 10000utoken
   const outAsset = swapEvent.attributes.at(-1)?.value ?? "";
-  const outAmount = outAsset.match(/[0-9]+/g)?.[0] ?? "";
-  const outDenom = outAsset.slice(outAmount.length);
+  const { amount: outAmount, denom: outDenom } = coinFromStr(outAsset);
 
   return (
     <Flex gap={4} alignItems="center">
@@ -53,7 +52,7 @@ export const PoolSwap = ({
           assetInfo={assetInfos?.[inDenom]}
         />
       </div>
-      <CustomIcon name="arrow-right" boxSize={6} color="honeydew.main" />
+      <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
       <div>
         <Text variant="body2" textColor="pebble.500" fontWeight={500}>
           To
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts
new file mode 100644
index 000000000..f8f6dfab6
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts
@@ -0,0 +1,75 @@
+import type { Coin } from "@cosmjs/stargate";
+
+import type { Message } from "lib/types";
+import { extractTxDetails } from "lib/utils";
+
+export const extractPoolMsgs = (msgs: Message[], poolId: number) => {
+  const result: { msgs: Message[]; others: { [key: string]: number } } = {
+    msgs: [],
+    others: {},
+  };
+
+  // eslint-disable-next-line complexity
+  msgs.forEach((msg) => {
+    const { type, detail, log } = msg;
+    switch (type) {
+      case "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn":
+      case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn":
+      case "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut":
+      case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountOut": {
+        const details = extractTxDetails(type, detail, log);
+        if (
+          (details.routes as { poolId: number }[]).some(
+            (pool) => Number(pool.poolId) === poolId
+          )
+        ) {
+          result.msgs = result.msgs.concat(msg);
+        }
+        break;
+      }
+      case "/osmosis.gamm.v1beta1.MsgJoinPool":
+      case "/osmosis.gamm.v1beta1.MsgExitPool":
+      case "/osmosis.gamm.v1beta1.MsgJoinSwapExternAmountIn":
+      case "/osmosis.gamm.v1beta1.MsgJoinSwapShareAmountOut":
+      case "/osmosis.gamm.v1beta1.MsgExitSwapShareAmountIn":
+      case "/osmosis.gamm.v1beta1.MsgExitSwapExternAmountOut": {
+        const details = extractTxDetails(type, detail, log);
+        if (Number(details.pool_id) === poolId) {
+          result.msgs = result.msgs.concat(msg);
+        }
+        break;
+      }
+      case "/osmosis.lockup.MsgLockTokens":
+      case "/osmosis.lockup.MsgBeginUnlockingAll":
+      case "/osmosis.lockup.MsgBeginUnlocking":
+      case "/osmosis.lockup.MsgForceUnlock":
+      case "/osmosis.lockup.MsgExtendLockup":
+      case "/osmosis.superfluid.MsgSuperfluidDelegate":
+      case "/osmosis.superfluid.MsgSuperfluidUndelegate":
+      case "/osmosis.superfluid.MsgSuperfluidUnbondLock":
+      case "/osmosis.superfluid.MsgLockAndSuperfluidDelegate":
+      case "/osmosis.superfluid.MsgUnPoolWhitelistedPool":
+      case "/osmosis.superfluid.MsgSuperfluidUndelegateAndUnbondLock":
+      case "/cosmos.authz.v1beta1.MsgExec":
+      case "/ibc.core.channel.v1.MsgRecvPacket":
+      case "/cosmwasm.wasm.v1.MsgInstantiateContract1":
+      case "/cosmwasm.wasm.v1.MsgInstantiateContract2":
+      case "/cosmwasm.wasm.v1.MsgExecuteContract": {
+        result.others[type] =
+          (result.others[type] ? result.others[type] : 0) + 1;
+        break;
+      }
+      default:
+        break;
+    }
+  });
+  return result;
+};
+
+export const getPoolDenom = (poolId: string) => `gamm/pool/${poolId}`;
+
+export const coinFromStr = (str: string): Coin => {
+  const amount = str.match(/[0-9]+/g)?.[0] ?? "";
+  const denom = str.slice(amount.length);
+  return { amount, denom };
+};
diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index 9373fdf3f..5ab7f7624 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -56,7 +56,7 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
       <Flex>
         <PoolHeader
           poolId={item.id}
-          isSuperFluid={item.isSuperfluid}
+          isSuperfluid={item.isSuperfluid}
           poolType={item.type}
           poolLiquidity={item.poolLiquidity}
         />
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index 0045ee80f..801a23dcf 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -58,7 +58,7 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
               <Flex alignItems="center" justifyContent="space-between">
                 <PoolHeader
                   poolId={item.id}
-                  isSuperFluid={item.isSuperfluid}
+                  isSuperfluid={item.isSuperfluid}
                   poolType={item.type}
                   poolLiquidity={item.poolLiquidity}
                 />
diff --git a/src/lib/pages/pools/poolId.tsx b/src/lib/pages/pools/poolId.tsx
index c434531e4..2ddbd1584 100644
--- a/src/lib/pages/pools/poolId.tsx
+++ b/src/lib/pages/pools/poolId.tsx
@@ -4,7 +4,6 @@ import { useInternalNavigate } from "lib/app-provider";
 import { BackButton } from "lib/components/button";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
-import { useAssetInfos } from "lib/services/assetService";
 import { getFirstQueryParam } from "lib/utils";
 
 import {
@@ -17,7 +16,6 @@ import { usePool } from "./data";
 export const PoolId = () => {
   const router = useRouter();
   const navigate = useInternalNavigate();
-  const { assetInfos } = useAssetInfos();
   const poolId = Number(getFirstQueryParam(router.query.poolId));
   const { pool, isLoading } = usePool(poolId);
 
@@ -26,9 +24,9 @@ export const PoolId = () => {
   return (
     <PageContainer>
       <BackButton />
-      <PoolTopSection pool={pool} assetInfos={assetInfos} />
+      <PoolTopSection pool={pool} />
       <PoolAssets pool={pool} />
-      <PoolRelatedTxs poolId={pool.id} isSuperfluid={pool.isSuperfluid} />
+      <PoolRelatedTxs pool={pool} />
     </PageContainer>
   );
 };
diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
index 72cf7597b..c9834ed27 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
@@ -1605,8 +1605,8 @@ export const generateReceipts = (
           value: details.token_in_denom,
         },
         {
-          title: "Share Out Amount",
-          value: details.share_out_amount,
+          title: "Share Amount Out",
+          value: details.share_amount_out,
         },
         {
           title: "Token In Max Amount",
diff --git a/src/lib/types/tx/transaction.ts b/src/lib/types/tx/transaction.ts
index 0e2301014..3dd240bee 100644
--- a/src/lib/types/tx/transaction.ts
+++ b/src/lib/types/tx/transaction.ts
@@ -1,4 +1,6 @@
-import type { Addr } from "lib/types";
+import type { Log } from "@cosmjs/stargate/build/logs";
+
+import type { Addr, Option } from "lib/types";
 
 export enum ActionMsgType {
   SINGLE_ACTION_MSG = "SINGLE_ACTION_MSG",
@@ -14,14 +16,10 @@ export enum MsgFurtherAction {
 
 export interface Message {
   detail: object;
-  logs: Logs;
+  log: Option<Log>;
   type: string;
 }
 
-interface Logs {
-  events: object[];
-}
-
 export interface Msg {
   msg: object[];
   contract: string;
diff --git a/src/lib/utils/tx/types.ts b/src/lib/utils/tx/types.ts
index f75def0d9..1400c4083 100644
--- a/src/lib/utils/tx/types.ts
+++ b/src/lib/utils/tx/types.ts
@@ -393,13 +393,13 @@ export interface MsgExitPoolDetails extends MsgBaseDetails {
 }
 export interface MsgSwapExactAmountInDetails extends MsgBaseDetails {
   sender: Addr;
-  routes: object;
+  routes: { poolId: number; tokenOutDenom: string }[];
   token_in: Coin;
   token_out_min_amount: string;
 }
 export interface MsgSwapExactAmountOutDetails extends MsgBaseDetails {
   sender: Addr;
-  routes: object;
+  routes: { poolId: number; tokenInDenom: string }[];
   token_in_max_amount: string;
   token_out: Coin;
 }
@@ -413,7 +413,7 @@ export interface MsgJoinSwapShareAmountOutDetails extends MsgBaseDetails {
   sender: Addr;
   pool_id: string;
   token_in_denom: string;
-  share_out_amount: string;
+  share_amount_out: string;
   token_in_max_amount: string;
 }
 export interface MsgExitSwapShareAmountInDetails extends MsgBaseDetails {
@@ -683,9 +683,13 @@ export type MsgReturnType<T extends TypeUrl> =
     ? MsgJoinPoolDetails
     : T extends "/osmosis.gamm.v1beta1.MsgExitPool"
     ? MsgExitPoolDetails
-    : T extends "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn"
+    : T extends
+        | "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn"
+        | "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn"
     ? MsgSwapExactAmountInDetails
-    : T extends "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut"
+    : T extends
+        | "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut"
+        | "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountOut"
     ? MsgSwapExactAmountOutDetails
     : T extends "/osmosis.gamm.v1beta1.MsgJoinSwapExternAmountIn"
     ? MsgJoinSwapExternAmountInDetails

From eef9289b5b0427a19c2e0523f5a26bfddca83511 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 16 May 2023 11:34:08 +0700
Subject: [PATCH 112/354] chore: rename

---
 .../{DefaultBreadcrumb.tsx => Breadcrumb.tsx} | 25 +++++++++++--------
 src/lib/pages/account-details/index.tsx       |  4 +--
 src/lib/pages/block-details/index.tsx         |  4 +--
 src/lib/pages/code-details/index.tsx          |  4 +--
 .../components/ContractTop.tsx                |  4 +--
 src/lib/pages/contract-list/slug.tsx          |  4 +--
 .../components/DetailHeader.tsx               |  4 +--
 src/lib/pages/tx-details/index.tsx            |  4 +--
 8 files changed, 29 insertions(+), 24 deletions(-)
 rename src/lib/components/{DefaultBreadcrumb.tsx => Breadcrumb.tsx} (73%)

diff --git a/src/lib/components/DefaultBreadcrumb.tsx b/src/lib/components/Breadcrumb.tsx
similarity index 73%
rename from src/lib/components/DefaultBreadcrumb.tsx
rename to src/lib/components/Breadcrumb.tsx
index 7f4c8725e..717ae0e3a 100644
--- a/src/lib/components/DefaultBreadcrumb.tsx
+++ b/src/lib/components/Breadcrumb.tsx
@@ -1,4 +1,8 @@
-import { Breadcrumb, BreadcrumbItem, Text } from "@chakra-ui/react";
+import {
+  Breadcrumb as ChakraBreadcrumb,
+  BreadcrumbItem as ChakraBreadcrumbItem,
+  Text,
+} from "@chakra-ui/react";
 
 import { AppLink } from "./AppLink";
 import { CustomIcon } from "./icon";
@@ -11,7 +15,8 @@ interface BreadcrumbProps {
   currentPage: string;
   mb?: number;
 }
-export const DefaultBreadcrumb = ({
+
+export const Breadcrumb = ({
   primaryPage,
   primaryPath,
   secondaryPage = "",
@@ -19,31 +24,31 @@ export const DefaultBreadcrumb = ({
   currentPage,
   mb = 0,
 }: BreadcrumbProps) => (
-  <Breadcrumb
+  <ChakraBreadcrumb
     w="full"
     spacing="4px"
     mb={mb}
     separator={<CustomIcon name="chevron-right" boxSize={3} />}
   >
-    <BreadcrumbItem
+    <ChakraBreadcrumbItem
       _hover={{ opacity: 0.8 }}
       transition="all 0.25s ease-in-out"
     >
       <AppLink color="text.dark" href={primaryPath}>
         {primaryPage}
       </AppLink>
-    </BreadcrumbItem>
+    </ChakraBreadcrumbItem>
     {secondaryPage && (
-      <BreadcrumbItem
+      <ChakraBreadcrumbItem
         _hover={{ opacity: 0.8 }}
         transition="all 0.25s ease-in-out"
       >
         <AppLink color="text.dark" href={secondaryPath}>
           {secondaryPage}
         </AppLink>
-      </BreadcrumbItem>
+      </ChakraBreadcrumbItem>
     )}
-    <BreadcrumbItem isCurrentPage>
+    <ChakraBreadcrumbItem isCurrentPage>
       <Text
         variant="body2"
         className="ellipsis"
@@ -53,6 +58,6 @@ export const DefaultBreadcrumb = ({
       >
         {currentPage}
       </Text>
-    </BreadcrumbItem>
-  </Breadcrumb>
+    </ChakraBreadcrumbItem>
+  </ChakraBreadcrumb>
 );
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index b2d491bd5..52816fc2e 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -12,9 +12,9 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import { useValidateAddress } from "lib/app-provider";
+import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomTab } from "lib/components/CustomTab";
-import { DefaultBreadcrumb } from "lib/components/DefaultBreadcrumb";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
@@ -93,7 +93,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
     <>
       <Flex direction="column" mb={6}>
         {publicDetail && (
-          <DefaultBreadcrumb
+          <Breadcrumb
             mb={6}
             primaryPage="Public Projects"
             primaryPath="/public-project"
diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx
index 8ea079b15..ab58b8d45 100644
--- a/src/lib/pages/block-details/index.tsx
+++ b/src/lib/pages/block-details/index.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { DefaultBreadcrumb } from "lib/components/DefaultBreadcrumb";
+import { Breadcrumb } from "lib/components/Breadcrumb";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
@@ -30,7 +30,7 @@ const BlockDetail = () => {
 
   return (
     <PageContainer>
-      <DefaultBreadcrumb
+      <Breadcrumb
         primaryPage="Blocks"
         primaryPath="/blocks"
         currentPage={blockData?.height.toString() ?? ""}
diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index 132dcfecd..20d5342ea 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -3,8 +3,8 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
+import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CopyLink } from "lib/components/CopyLink";
-import { DefaultBreadcrumb } from "lib/components/DefaultBreadcrumb";
 import { CustomIcon } from "lib/components/icon";
 import { GitHubLink } from "lib/components/links";
 import { Loading } from "lib/components/Loading";
@@ -42,7 +42,7 @@ const CodeDetailsBody = observer(
     return (
       <>
         <Flex direction="column">
-          <DefaultBreadcrumb
+          <Breadcrumb
             primaryPage={
               publicProject.publicCodeData?.name ? "Public Projects" : "Codes"
             }
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index 000c8b3a0..43b0633de 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/src/lib/pages/contract-details/components/ContractTop.tsx
@@ -9,9 +9,9 @@ import {
 import router from "next/router";
 
 import { useInternalNavigate } from "lib/app-provider";
+import { Breadcrumb } from "lib/components/Breadcrumb";
 import { AdminButton } from "lib/components/button";
 import { CopyLink } from "lib/components/CopyLink";
-import { DefaultBreadcrumb } from "lib/components/DefaultBreadcrumb";
 import { CustomIcon } from "lib/components/icon";
 import { GitHubLink } from "lib/components/links";
 import {
@@ -98,7 +98,7 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
     <Flex justify="space-between" mb={6}>
       <Flex direction="column" w="full">
         {publicProject.publicDetail && (
-          <DefaultBreadcrumb
+          <Breadcrumb
             mb={6}
             primaryPage="Public Projects"
             primaryPath="/public-project"
diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx
index 2b51391de..23adc4726 100644
--- a/src/lib/pages/contract-list/slug.tsx
+++ b/src/lib/pages/contract-list/slug.tsx
@@ -11,7 +11,7 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { useInternalNavigate } from "lib/app-provider";
-import { DefaultBreadcrumb } from "lib/components/DefaultBreadcrumb";
+import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CustomIcon } from "lib/components/icon";
 import {
   EditListNameModal,
@@ -77,7 +77,7 @@ const ContractsByList = observer(() => {
 
   return (
     <PageContainer>
-      <DefaultBreadcrumb
+      <Breadcrumb
         primaryPage="Contract Lists"
         primaryPath="/contract-list"
         currentPage={contractListInfo.name}
diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx
index aba6173db..77ca31c3e 100644
--- a/src/lib/pages/public-project/components/DetailHeader.tsx
+++ b/src/lib/pages/public-project/components/DetailHeader.tsx
@@ -1,6 +1,6 @@
 import { Box, Text, Flex, Heading, Image } from "@chakra-ui/react";
 
-import { DefaultBreadcrumb } from "lib/components/DefaultBreadcrumb";
+import { Breadcrumb } from "lib/components/Breadcrumb";
 import type { Option, PublicDetail } from "lib/types";
 import { getNameAndDescriptionDefault } from "lib/utils";
 
@@ -13,7 +13,7 @@ interface DetailHeaderProps {
 }
 export const DetailHeader = ({ details, slug }: DetailHeaderProps) => (
   <>
-    <DefaultBreadcrumb
+    <Breadcrumb
       primaryPage="Public Projects"
       primaryPath="/public-project"
       currentPage={details?.name ?? ""}
diff --git a/src/lib/pages/tx-details/index.tsx b/src/lib/pages/tx-details/index.tsx
index bc3ec4dee..4ed4141bb 100644
--- a/src/lib/pages/tx-details/index.tsx
+++ b/src/lib/pages/tx-details/index.tsx
@@ -2,7 +2,7 @@ import { Flex } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { DefaultBreadcrumb } from "lib/components/DefaultBreadcrumb";
+import { Breadcrumb } from "lib/components/Breadcrumb";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state/EmptyState";
@@ -44,7 +44,7 @@ const TxDetails = () => {
 
   return (
     <PageContainer>
-      <DefaultBreadcrumb
+      <Breadcrumb
         primaryPage="Transactions"
         primaryPath="/txs"
         currentPage={truncate(txData?.txhash)}

From 8e46ea105af7a6ebd8e02b95f81585326ddec759 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Tue, 16 May 2023 13:18:05 +0700
Subject: [PATCH 113/354] fix: redirect logic

---
 src/lib/pages/upload/index.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/lib/pages/upload/index.tsx b/src/lib/pages/upload/index.tsx
index 10bbde688..a43523ebb 100644
--- a/src/lib/pages/upload/index.tsx
+++ b/src/lib/pages/upload/index.tsx
@@ -17,7 +17,7 @@ const Upload = () => {
   const router = useRouter();
   const { address } = useWallet();
   const navigate = useInternalNavigate();
-  const { data } = useUploadAccessParams();
+  const { data, isLoading } = useUploadAccessParams();
 
   const isPermissionedNetwork =
     data?.permission !== AccessConfigPermission.EVERYBODY;
@@ -29,9 +29,10 @@ const Upload = () => {
 
   useEffect(() => {
     // Redirect back to deploy page
-    if (!enableUpload) navigate({ pathname: "/deploy", replace: true });
+    if (!enableUpload && !isLoading)
+      navigate({ pathname: "/deploy", replace: true });
     else if (router.isReady) AmpTrack(AmpEvent.TO_UPLOAD);
-  }, [enableUpload, navigate, router.isReady]);
+  }, [enableUpload, isLoading, navigate, router.isReady]);
 
   return (
     <WasmPageContainer>

From 4d15c3388e69547d3490dd18205d29835d95dff3 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 16 May 2023 16:41:41 +0700
Subject: [PATCH 114/354] fix: detail uis

---
 src/lib/pages/pools/components/PoolLogo.tsx        | 14 ++++++++------
 .../pool-txs/messages/lp/MsgExitPoolDetail.tsx     |  6 +++---
 .../lp/MsgExitSwapExternAmountOutDetail.tsx        |  6 +++---
 .../messages/lp/MsgExitSwapShareAmountInDetail.tsx |  8 ++++----
 .../pool-txs/messages/lp/MsgJoinPoolDetail.tsx     |  6 +++---
 .../lp/MsgJoinSwapExternAmountInDetail.tsx         |  6 +++---
 .../lp/MsgJoinSwapShareAmountOutDetail.tsx         |  6 +++---
 .../messages/lp/components/LiquidityDivider.tsx    |  2 +-
 .../messages/swap/MsgSwapExactAmountInDetail.tsx   |  6 +++---
 .../messages/swap/MsgSwapExactAmountOutDetail.tsx  |  6 +++---
 .../pool-txs/messages/swap/components/PoolSwap.tsx |  6 +++---
 11 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/src/lib/pages/pools/components/PoolLogo.tsx b/src/lib/pages/pools/components/PoolLogo.tsx
index 13e0e5209..b781f556b 100644
--- a/src/lib/pages/pools/components/PoolLogo.tsx
+++ b/src/lib/pages/pools/components/PoolLogo.tsx
@@ -20,12 +20,14 @@ export const PoolLogo = ({
   textVariant = "body2",
 }: PoolLogoProps) => {
   const renderLogo = (token: TokenWithValue, i: number) => (
-    <Image
-      key={token.denom}
-      boxSize={logoSize}
-      src={token.logo || getUndefinedTokenIcon(token.denom)}
-      zIndex={2 - i}
-    />
+    <Flex>
+      <Image
+        key={token.denom}
+        boxSize={logoSize}
+        src={token.logo || getUndefinedTokenIcon(token.denom)}
+        zIndex={2 - i}
+      />
+    </Flex>
   );
 
   return (
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
index 76843d2cd..70df42477 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Box, Flex, Text } from "@chakra-ui/react";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
@@ -34,7 +34,7 @@ export const MsgExitPoolDetail = ({
         showCopyOnHover
       />
     </Flex>
-    <Flex direction="column" gap={3}>
+    <Box w="full">
       <PoolAssetCard
         msgIndex={msgIndex}
         poolId={msg.pool_id}
@@ -51,6 +51,6 @@ export const MsgExitPoolDetail = ({
         assetInfos={assetInfos}
         isOpened={isOpened}
       />
-    </Flex>
+    </Box>
   </Flex>
 );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
index 082e300f6..83dd3e8e2 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Box, Flex, Text } from "@chakra-ui/react";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
@@ -34,7 +34,7 @@ export const MsgExitSwapExternAmountOutDetail = ({
         showCopyOnHover
       />
     </Flex>
-    <Flex direction="column" gap={3}>
+    <Box w="full">
       <PoolAssetCard
         txHash={txHash}
         msgIndex={msgIndex}
@@ -52,6 +52,6 @@ export const MsgExitSwapExternAmountOutDetail = ({
         assetInfos={assetInfos}
         isOpened={isOpened}
       />
-    </Flex>
+    </Box>
   </Flex>
 );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
index fffc2ff37..a6b241a1e 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Box, Flex, Text } from "@chakra-ui/react";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
@@ -23,7 +23,7 @@ export const MsgExitSwapShareAmountInDetail = ({
   assetInfos,
   isOpened,
 }: MsgExitSwapShareAmountInDetailProps) => (
-  <Flex w="full" alignItems="start" gap={12}>
+  <Flex minW="full" alignItems="start" gap={12}>
     <Flex direction="column" minW="100px">
       <Text variant="body2" textColor="pebble.500" fontWeight={500}>
         Block height
@@ -34,7 +34,7 @@ export const MsgExitSwapShareAmountInDetail = ({
         showCopyOnHover
       />
     </Flex>
-    <Flex direction="column" gap={3}>
+    <Box w="full">
       <PoolAssetCard
         msgIndex={msgIndex}
         poolId={msg.pool_id}
@@ -52,6 +52,6 @@ export const MsgExitSwapShareAmountInDetail = ({
         assetInfos={assetInfos}
         isOpened={isOpened}
       />
-    </Flex>
+    </Box>
   </Flex>
 );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
index bb2104abb..58a13f2da 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Box, Flex, Text } from "@chakra-ui/react";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
@@ -34,7 +34,7 @@ export const MsgJoinPoolDetail = ({
         showCopyOnHover
       />
     </Flex>
-    <Flex direction="column" gap={3}>
+    <Box w="full">
       <PoolAssetsGrid
         txHash={txHash}
         msgIndex={msgIndex}
@@ -51,6 +51,6 @@ export const MsgJoinPoolDetail = ({
         isJoin
         isOpened={isOpened}
       />
-    </Flex>
+    </Box>
   </Flex>
 );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
index 26e2cdbdf..18bd40fdc 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Box, Flex, Text } from "@chakra-ui/react";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
@@ -34,7 +34,7 @@ export const MsgJoinSwapExternAmountInDetail = ({
         showCopyOnHover
       />
     </Flex>
-    <Flex direction="column" gap={3}>
+    <Box w="full">
       <PoolAssetsGrid
         msgIndex={msgIndex}
         msgAssets={[msg.token_in]}
@@ -51,6 +51,6 @@ export const MsgJoinSwapExternAmountInDetail = ({
         isJoin
         isOpened={isOpened}
       />
-    </Flex>
+    </Box>
   </Flex>
 );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
index cd7da49c8..8849dca3c 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Box, Flex, Text } from "@chakra-ui/react";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
@@ -34,7 +34,7 @@ export const MsgJoinSwapShareAmountOutDetail = ({
         showCopyOnHover
       />
     </Flex>
-    <Flex direction="column" gap={3}>
+    <Box w="full">
       <PoolAssetsGrid
         txHash={txHash}
         msgIndex={msgIndex}
@@ -51,6 +51,6 @@ export const MsgJoinSwapShareAmountOutDetail = ({
         isJoin
         isOpened={isOpened}
       />
-    </Flex>
+    </Box>
   </Flex>
 );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/LiquidityDivider.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/LiquidityDivider.tsx
index a316b0a53..a477aa26e 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/LiquidityDivider.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/LiquidityDivider.tsx
@@ -3,7 +3,7 @@ import { Divider, Flex } from "@chakra-ui/react";
 import { CustomIcon } from "lib/components/icon";
 
 export const LiquidityDivider = () => (
-  <Flex gap={2} alignItems="center">
+  <Flex gap={2} alignItems="center" py={3}>
     <Divider borderColor="honeydew.main" />
     <CustomIcon name="arrow-down" boxSize={4} color="honeydew.main" />
     <Divider borderColor="honeydew.main" />
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
index e6eb28b17..77f655939 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Box, Flex, Text } from "@chakra-ui/react";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
@@ -34,7 +34,7 @@ export const MsgSwapExactAmountInDetail = ({
         showCopyOnHover
       />
     </Flex>
-    <Flex direction="column" gap={6}>
+    <Box w="full">
       <PoolSwap
         txHash={txHash}
         msgIndex={msgIndex}
@@ -46,6 +46,6 @@ export const MsgSwapExactAmountInDetail = ({
         assetInfos={assetInfos}
         isOpened={isOpened}
       />
-    </Flex>
+    </Box>
   </Flex>
 );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
index 25aa4eeac..d55b9d052 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Box, Flex, Text } from "@chakra-ui/react";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
@@ -43,7 +43,7 @@ export const MsgSwapExactAmountOutDetail = ({
           showCopyOnHover
         />
       </Flex>
-      <Flex direction="column" gap={6}>
+      <Box w="full">
         <PoolSwap
           txHash={txHash}
           msgIndex={msgIndex}
@@ -55,7 +55,7 @@ export const MsgSwapExactAmountOutDetail = ({
           assetInfos={assetInfos}
           isOpened={isOpened}
         />
-      </Flex>
+      </Box>
     </Flex>
   );
 };
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
index 78676562b..694508590 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Grid, Text } from "@chakra-ui/react";
 
 import { AssetCard } from "../../components";
 import { coinFromStr } from "../../utils";
@@ -41,7 +41,7 @@ export const PoolSwap = ({
   const { amount: outAmount, denom: outDenom } = coinFromStr(outAsset);
 
   return (
-    <Flex gap={4} alignItems="center">
+    <Grid gap={4} alignItems="center" mb={6} templateColumns="1fr 24px 1fr">
       <div>
         <Text variant="body2" textColor="pebble.500" fontWeight={500}>
           From
@@ -63,6 +63,6 @@ export const PoolSwap = ({
           assetInfo={assetInfos?.[outDenom]}
         />
       </div>
-    </Flex>
+    </Grid>
   );
 };

From cbb82967ab29dd7bc32b23a7e5e77cf64fc81c61 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 16 May 2023 16:56:16 +0700
Subject: [PATCH 115/354] fix: empty array for join exit pool

---
 .../tables/pool-txs/messages/lp/MsgExitPoolAction.tsx       | 6 ++++--
 .../tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx       | 5 +++--
 .../pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx   | 2 +-
 .../pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx  | 2 +-
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx
index f86dcd0d3..bec0fc095 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx
@@ -33,8 +33,10 @@ export const MsgExitPoolAction = ({
       />
       from
       <PoolLogoLink pool={pool} />
-      <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
-      {msg.token_out_mins.map((asset, index) => {
+      {msg.token_out_mins && (
+        <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
+      )}
+      {(msg.token_out_mins ?? []).map((asset, index) => {
         const outAssetInfo = assetInfos?.[asset.denom];
         return (
           <Flex gap={1} alignItems="center">
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx
index 9686217bf..1ec92af3e 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx
@@ -22,10 +22,11 @@ export const MsgJoinPoolAction = ({
 }: MsgJoinPoolActionProps) => {
   const poolDenom = getPoolDenom(msg.pool_id);
   const poolAssetInfo = assetInfos?.[poolDenom];
+
   return (
     <Flex gap={1} alignItems="center" flexWrap="wrap">
-      Provided
-      {msg.token_in_maxs.map((asset, index) => {
+      Provided{" "}
+      {(msg.token_in_maxs ?? []).map((asset, index) => {
         const inAssetInfo = assetInfos?.[asset.denom];
         return (
           <Flex gap={1} alignItems="center">
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
index 77f655939..8db7b361a 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
@@ -24,7 +24,7 @@ export const MsgSwapExactAmountInDetail = ({
   isOpened,
 }: MsgSwapExactAmountInDetailProps) => (
   <Flex w="full" alignItems="start" gap={12}>
-    <Flex direction="column" minW="100px">
+    <Flex direction="column">
       <Text variant="body2" textColor="pebble.500" fontWeight={500}>
         Block height
       </Text>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
index d55b9d052..5a66ef084 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
@@ -32,7 +32,7 @@ export const MsgSwapExactAmountOutDetail = ({
   }));
 
   return (
-    <Flex alignItems="start" gap={12}>
+    <Flex w="full" alignItems="start" gap={12}>
       <Flex direction="column">
         <Text variant="body2" textColor="pebble.500" fontWeight={500}>
           Block height

From b7bdf0d6b506da8ef2e55bae644a0f3f753ccc7d Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Tue, 16 May 2023 17:42:26 +0700
Subject: [PATCH 116/354] fix: disable alert then testnet

---
 src/lib/pages/deploy/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/deploy/index.tsx b/src/lib/pages/deploy/index.tsx
index d7837da55..29f5a6536 100644
--- a/src/lib/pages/deploy/index.tsx
+++ b/src/lib/pages/deploy/index.tsx
@@ -11,7 +11,7 @@ import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
 import { useEffect, useMemo } from "react";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useCurrentNetwork, useInternalNavigate } from "lib/app-provider";
 import { ButtonCard } from "lib/components/ButtonCard";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { CustomIcon } from "lib/components/icon";
@@ -56,6 +56,7 @@ const Deploy = () => {
   const navigate = useInternalNavigate();
   const { address } = useWallet();
   const { data, isFetching } = useUploadAccessParams();
+  const { isMainnet } = useCurrentNetwork();
 
   const isPermissionedNetwork =
     data?.permission !== AccessConfigPermission.EVERYBODY;
@@ -85,7 +86,8 @@ const Deploy = () => {
         subtitle="You need to connect wallet to proceed this action"
         mb={4}
       />
-      {address && (
+      {/* Revist isMainnet logic */}
+      {address && isMainnet && (
         <Alert variant={variant} mb={4} alignItems="flex-start" gap={2}>
           {icon}
           <AlertDescription>{description}</AlertDescription>

From 141c71ce8e7def4dfe1481bf9f62e179ef18da2a Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 16 May 2023 18:04:51 +0700
Subject: [PATCH 117/354] fix: pool logo

---
 .../tables/pool-txs/messages/swap/components/PoolRoute.tsx    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
index 1d530dce7..c1f8d5cb0 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
@@ -22,6 +22,7 @@ export const PoolRoute = ({ routes, assetInfos, isOpened }: PoolRouteProps) => {
     routes.map((pool) => pool.poolId),
     isOpened
   );
+  const showStepper = routes.length > 1;
 
   if (isLoading) return <Loading />;
   if (!poolAssets)
@@ -43,13 +44,14 @@ export const PoolRoute = ({ routes, assetInfos, isOpened }: PoolRouteProps) => {
             className="accordion-stepper-wrapper"
             alignItems="center"
           >
-            <AccordionStepperItem />
+            {showStepper && <AccordionStepperItem />}
             <Flex alignItems="center" w="full" my={2}>
               <PoolLogo
                 tokens={tokens}
                 logoSize={5}
                 marginLeft={-4}
                 textVariant="small"
+                minW={20}
               />
               <div>
                 <Flex

From a3700ed8d58f7ac982b29741cd1ab4acefece70d Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Wed, 17 May 2023 09:51:42 +0700
Subject: [PATCH 118/354] refactor: remove function brackets

---
 src/lib/pages/proposal/whitelist/index.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index e44824afa..0c152d144 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -356,9 +356,7 @@ const ProposalToWhitelist = () => {
                     variant="outline-gray"
                     size="lg"
                     disabled={fields.length <= 1}
-                    onClick={() => {
-                      remove(idx);
-                    }}
+                    onClick={() => remove(idx)}
                   >
                     <CustomIcon
                       name="delete"
@@ -370,9 +368,7 @@ const ProposalToWhitelist = () => {
               <Button
                 variant="outline-primary"
                 mt={3}
-                onClick={() => {
-                  append({ address: "" as Addr });
-                }}
+                onClick={() => append({ address: "" as Addr })}
                 leftIcon={<CustomIcon name="plus" color="violet.light" />}
               >
                 Add More Address

From 6c074fc2ddba467a6f99edbb984ea6ec1a6aa90a Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 17 May 2023 11:49:48 +0700
Subject: [PATCH 119/354] fix: remove unnecessary style and logic

---
 .../codes/components/MyStoredCodesSection.tsx     |  2 +-
 src/lib/pages/codes/components/UploadButton.tsx   |  8 +-------
 src/lib/pages/deploy/index.tsx                    | 15 ++++++---------
 src/lib/pages/upload/index.tsx                    |  9 ++++-----
 4 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/lib/pages/codes/components/MyStoredCodesSection.tsx b/src/lib/pages/codes/components/MyStoredCodesSection.tsx
index 762de4974..c91319b75 100644
--- a/src/lib/pages/codes/components/MyStoredCodesSection.tsx
+++ b/src/lib/pages/codes/components/MyStoredCodesSection.tsx
@@ -26,7 +26,7 @@ export const MyStoredCodesSection = ({
   isSearching,
 }: MyStoredCodesSectionProps) => {
   const { data } = useUploadAccessParams();
-  const { address = "" } = useWallet();
+  const { address } = useWallet();
   const isAllowed = Boolean(data?.addresses?.includes(address as Addr));
 
   const isPermissionedNetwork =
diff --git a/src/lib/pages/codes/components/UploadButton.tsx b/src/lib/pages/codes/components/UploadButton.tsx
index dffcb42bf..1fe3784a4 100644
--- a/src/lib/pages/codes/components/UploadButton.tsx
+++ b/src/lib/pages/codes/components/UploadButton.tsx
@@ -18,13 +18,7 @@ export const UploadButton = ({ isAllowed }: UploadButtonProps) => {
       <Button
         disabled={!isAllowed}
         onClick={() => navigate({ pathname: "/upload" })}
-        rightIcon={
-          <CustomIcon
-            name="upload"
-            color={!isAllowed ? "pebble.600" : "text.main"}
-            boxSize="12px"
-          />
-        }
+        rightIcon={<CustomIcon name="upload" boxSize="12px" />}
       >
         Upload New Code
       </Button>
diff --git a/src/lib/pages/deploy/index.tsx b/src/lib/pages/deploy/index.tsx
index 29f5a6536..4a401d972 100644
--- a/src/lib/pages/deploy/index.tsx
+++ b/src/lib/pages/deploy/index.tsx
@@ -9,9 +9,9 @@ import {
 } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
-import { useEffect, useMemo } from "react";
+import { useEffect } from "react";
 
-import { useCurrentNetwork, useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate } from "lib/app-provider";
 import { ButtonCard } from "lib/components/ButtonCard";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { CustomIcon } from "lib/components/icon";
@@ -56,15 +56,13 @@ const Deploy = () => {
   const navigate = useInternalNavigate();
   const { address } = useWallet();
   const { data, isFetching } = useUploadAccessParams();
-  const { isMainnet } = useCurrentNetwork();
 
   const isPermissionedNetwork =
     data?.permission !== AccessConfigPermission.EVERYBODY;
 
-  const enableUpload = useMemo(() => {
-    if (!isPermissionedNetwork) return true;
-    return Boolean(data?.addresses?.includes(address as HumanAddr));
-  }, [data, address, isPermissionedNetwork]);
+  const enableUpload =
+    !isPermissionedNetwork ||
+    Boolean(data?.addresses?.includes(address as HumanAddr));
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_DEPLOY);
@@ -86,8 +84,7 @@ const Deploy = () => {
         subtitle="You need to connect wallet to proceed this action"
         mb={4}
       />
-      {/* Revist isMainnet logic */}
-      {address && isMainnet && (
+      {address && isPermissionedNetwork && (
         <Alert variant={variant} mb={4} alignItems="flex-start" gap={2}>
           {icon}
           <AlertDescription>{description}</AlertDescription>
diff --git a/src/lib/pages/upload/index.tsx b/src/lib/pages/upload/index.tsx
index a43523ebb..6bce183a9 100644
--- a/src/lib/pages/upload/index.tsx
+++ b/src/lib/pages/upload/index.tsx
@@ -1,7 +1,7 @@
 import { Heading, Text } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
-import { useEffect, useMemo } from "react";
+import { useEffect } from "react";
 
 import { useInternalNavigate } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
@@ -22,10 +22,9 @@ const Upload = () => {
   const isPermissionedNetwork =
     data?.permission !== AccessConfigPermission.EVERYBODY;
 
-  const enableUpload = useMemo(() => {
-    if (!isPermissionedNetwork) return true;
-    return Boolean(data?.addresses?.includes(address as HumanAddr));
-  }, [data, address, isPermissionedNetwork]);
+  const enableUpload =
+    !isPermissionedNetwork ||
+    Boolean(data?.addresses?.includes(address as HumanAddr));
 
   useEffect(() => {
     // Redirect back to deploy page

From d069d9493ba38b0f1f9842de1723cdaecb4cffe5 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 17 May 2023 15:03:24 +0700
Subject: [PATCH 120/354] fix: pool tx count timeout

---
 src/lib/pages/pools/components/PoolLogo.tsx                   | 3 +--
 .../tables/pool-txs/messages/lp/MsgExitPoolAction.tsx         | 2 +-
 .../tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx         | 2 +-
 src/lib/services/txService.ts                                 | 4 +++-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/lib/pages/pools/components/PoolLogo.tsx b/src/lib/pages/pools/components/PoolLogo.tsx
index b781f556b..9e46ed2de 100644
--- a/src/lib/pages/pools/components/PoolLogo.tsx
+++ b/src/lib/pages/pools/components/PoolLogo.tsx
@@ -20,9 +20,8 @@ export const PoolLogo = ({
   textVariant = "body2",
 }: PoolLogoProps) => {
   const renderLogo = (token: TokenWithValue, i: number) => (
-    <Flex>
+    <Flex key={token.denom}>
       <Image
-        key={token.denom}
         boxSize={logoSize}
         src={token.logo || getUndefinedTokenIcon(token.denom)}
         zIndex={2 - i}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx
index bec0fc095..eedfccbdc 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx
@@ -39,7 +39,7 @@ export const MsgExitPoolAction = ({
       {(msg.token_out_mins ?? []).map((asset, index) => {
         const outAssetInfo = assetInfos?.[asset.denom];
         return (
-          <Flex gap={1} alignItems="center">
+          <Flex key={asset.denom} gap={1} alignItems="center">
             {index > 0 && (
               <CustomIcon name="plus" boxSize={4} color="lilac.main" />
             )}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx
index 1ec92af3e..3800ceff5 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx
@@ -29,7 +29,7 @@ export const MsgJoinPoolAction = ({
       {(msg.token_in_maxs ?? []).map((asset, index) => {
         const inAssetInfo = assetInfos?.[asset.denom];
         return (
-          <Flex gap={1} alignItems="center">
+          <Flex key={asset.denom} gap={1} alignItems="center">
             {index > 0 && (
               <CustomIcon name="plus" boxSize={4} color="lilac.main" />
             )}
diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index b6e413d33..a508bb976 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -277,9 +277,11 @@ export const useTxsCountByPoolId = (
 
   return useQuery(
     ["transactions_count_by_pool_id", poolId, type, indexerGraphClient],
-    queryFn,
+    createQueryFnWithTimeout(queryFn, 5000),
     {
       enabled: !!poolId,
+      retry: false,
+      refetchOnWindowFocus: false,
     }
   );
 };

From d175712ed8417564f9c1971b2b8f5e70c648fef9 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 18 May 2023 16:49:10 +0700
Subject: [PATCH 121/354] feat: lock and superfluid message

---
 CHANGELOG.md                                  |   2 +-
 .../tables/pool-txs/PoolTxsMsg.tsx            |   1 +
 .../{lp => }/components/PoolAssetCard.tsx     |  75 +++++--------
 .../pool-txs/messages/components/index.ts     |   1 +
 .../tables/pool-txs/messages/index.tsx        |  55 +++++++++
 .../messages/lockup/MsgLockTokensAction.tsx   |  46 ++++++++
 .../messages/lockup/MsgLockTokensDetail.tsx   |  95 ++++++++++++++++
 .../tables/pool-txs/messages/lockup/index.ts  |   2 +
 .../messages/lp/MsgExitPoolDetail.tsx         |   6 +-
 .../lp/MsgExitSwapExternAmountOutDetail.tsx   |   6 +-
 .../lp/MsgExitSwapShareAmountInDetail.tsx     |   6 +-
 .../messages/lp/MsgJoinPoolDetail.tsx         |   6 +-
 .../lp/MsgJoinSwapExternAmountInDetail.tsx    |   6 +-
 .../lp/MsgJoinSwapShareAmountOutDetail.tsx    |   6 +-
 .../messages/lp/components/PoolLPCard.tsx     |  66 +++++++++++
 .../pool-txs/messages/lp/components/index.ts  |   2 +-
 .../MsgLockAndSuperfluidDelegateAction.tsx    |  44 ++++++++
 .../MsgLockAndSuperfluidDelegateDetail.tsx    | 105 ++++++++++++++++++
 .../pool-txs/messages/superfluid/index.ts     |   2 +
 .../swap/MsgSwapExactAmountInDetail.tsx       |   2 +-
 .../swap/MsgSwapExactAmountOutDetail.tsx      |   2 +-
 .../tables/pool-txs/messages/utils.ts         |  34 +++---
 src/lib/services/validator.ts                 |  72 +++++++-----
 src/lib/services/validatorService.ts          |  28 ++++-
 24 files changed, 550 insertions(+), 120 deletions(-)
 rename src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/{lp => }/components/PoolAssetCard.tsx (53%)
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/index.ts
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateAction.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/index.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e2e03e01d..02be87860 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,7 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#294](https://github.com/alleslabs/celatone-frontend/pull/294) Add Pool related txs table with blank states
+- [#294](https://github.com/alleslabs/celatone-frontend/pull/294) Add Pool related txs table
 - [#296](https://github.com/alleslabs/celatone-frontend/pull/296) Add pool header and pool assets section for pool details page
 - [#295](https://github.com/alleslabs/celatone-frontend/pull/295) Add expand/collapse all for unsupported pool list
 - [#277](https://github.com/alleslabs/celatone-frontend/pull/277) Wire up data for pool navigation page
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
index 8ea6eb176..ded41f322 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -137,6 +137,7 @@ export const PoolTxsMsg = ({
               blockHeight={transaction.height}
               msgIndex={msgIndex}
               msg={message}
+              pool={pool}
               assetInfos={assetInfos}
               isOpened={isOpen}
             />
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
similarity index 53%
rename from src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetCard.tsx
rename to src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
index 48295fd2e..f31e9326f 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetCard.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
@@ -1,14 +1,12 @@
 import { Flex, Text } from "@chakra-ui/react";
+import type { Coin } from "@cosmjs/stargate";
 
-import { getPoolDenom } from "../../utils";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
 import { PoolLogo } from "lib/pages/pools/components/PoolLogo";
-import type { AssetInfosOpt } from "lib/services/assetService";
 import { usePoolAssetsbyPoolIds } from "lib/services/poolService";
-import { useTxData } from "lib/services/txService";
-import type { TokenWithValue } from "lib/types";
+import type { AssetInfo, Option, TokenWithValue } from "lib/types";
 import {
   coinToTokenWithValue,
   formatBalanceWithDenom,
@@ -16,72 +14,49 @@ import {
 } from "lib/utils";
 
 interface PoolAssetCardProps {
-  txHash?: string;
-  msgIndex: number;
-  poolId: string;
-  msgShareAmount?: string;
-  assetInfos: AssetInfosOpt;
-  isJoin: boolean;
+  poolId: number;
+  description: string;
+  assetText: string;
+  poolAsset: Coin;
+  poolAssetInfo: Option<AssetInfo>;
   isOpened: boolean;
 }
 
 export const PoolAssetCard = ({
-  txHash,
-  msgIndex,
   poolId,
-  msgShareAmount,
-  assetInfos,
-  isJoin,
+  description,
+  assetText,
+  poolAsset,
+  poolAssetInfo,
   isOpened,
 }: PoolAssetCardProps) => {
-  const { data: txData, isLoading: isTxDataLoading } = useTxData(
-    txHash,
+  const { data: poolAssets, isLoading } = usePoolAssetsbyPoolIds(
+    [poolId],
     isOpened
   );
-  const { data: poolAssets, isLoading: isPoolAssetsLoading } =
-    usePoolAssetsbyPoolIds([Number(poolId)], isOpened);
 
-  if (!msgShareAmount && (isTxDataLoading || isPoolAssetsLoading))
-    return <Loading />;
-
-  const poolDenom = getPoolDenom(poolId);
-  const eventShareAmount = txData?.logs
-    .find((event) => event.msg_index === msgIndex)
-    ?.events?.find((event) => event.type === "coin_received")
-    ?.attributes.at(3)
-    ?.value.slice(0, -poolDenom.length);
-
-  const shareAmount = msgShareAmount ?? eventShareAmount;
-  if (!shareAmount || !poolAssets)
+  if (isLoading) return <Loading />;
+  if (!poolAssets)
     return (
-      <EmptyState message="There is an error during fetching pool detail." />
+      <EmptyState message="There is an error during fetching transaction detail." />
     );
 
-  const tokens = poolAssets[Number(poolId)].map<TokenWithValue>((denom) =>
-    coinToTokenWithValue(denom, "0", assetInfos?.[denom])
+  const tokens = poolAssets[poolId].map<TokenWithValue>((denom) =>
+    coinToTokenWithValue(denom, "0", poolAssetInfo)
   );
   return (
-    <Flex
-      className="pool-msg-detail-container"
-      direction="column"
-      gap={2}
-      p={4}
-      border="1px solid"
-      borderColor="transparent"
-      borderRadius="8px"
-      bgColor="pebble.900"
-    >
+    <>
       <Flex justifyContent="space-between">
         <Text variant="body2" textColor="text.dark">
-          {isJoin ? "Provided to" : "Removed from"}
+          {description}
         </Text>
         <Text>
-          {isJoin ? "Received " : "Burn "}
+          {assetText}
           <span style={{ fontWeight: 700 }}>
             {formatBalanceWithDenom({
-              coin: { amount: shareAmount, denom: poolDenom },
-              symbol: assetInfos?.[poolDenom]?.symbol,
-              precision: assetInfos?.[poolDenom]?.precision,
+              coin: poolAsset,
+              symbol: poolAssetInfo?.symbol,
+              precision: poolAssetInfo?.precision,
             })}
           </span>
         </Text>
@@ -132,6 +107,6 @@ export const PoolAssetCard = ({
           />
         </div>
       </Flex>
-    </Flex>
+    </>
   );
 };
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/index.ts b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/index.ts
index ee732781d..6b7b9c965 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/index.ts
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/index.ts
@@ -1,2 +1,3 @@
 export * from "./AssetCard";
+export * from "./PoolAssetCard";
 export * from "./PoolLogoLink";
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx
index 7d20850af..d541e6088 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx
@@ -5,6 +5,7 @@ import type { AssetInfosOpt } from "lib/services/assetService";
 import type { Message, PoolDetail, TokenWithValue } from "lib/types";
 import { extractTxDetails } from "lib/utils";
 
+import { MsgLockTokensAction, MsgLockTokensDetail } from "./lockup";
 import {
   MsgExitPoolAction,
   MsgExitPoolDetail,
@@ -19,6 +20,10 @@ import {
   MsgJoinSwapShareAmountOutAction,
   MsgJoinSwapShareAmountOutDetail,
 } from "./lp";
+import {
+  MsgLockAndSuperfluidDelegateAction,
+  MsgLockAndSuperfluidDelegateDetail,
+} from "./superfluid";
 import {
   MsgSwapExactAmountInAction,
   MsgSwapExactAmountInDetail,
@@ -103,6 +108,26 @@ export const PoolMsgAction = ({
         />
       );
     }
+    case "/osmosis.lockup.MsgLockTokens": {
+      const details = extractTxDetails(type, detail, log);
+      return (
+        <MsgLockTokensAction
+          msg={details}
+          pool={pool}
+          assetInfos={assetInfos}
+        />
+      );
+    }
+    case "/osmosis.superfluid.MsgLockAndSuperfluidDelegate": {
+      const details = extractTxDetails(type, detail, log);
+      return (
+        <MsgLockAndSuperfluidDelegateAction
+          msg={details}
+          pool={pool}
+          assetInfos={assetInfos}
+        />
+      );
+    }
     default: {
       return <Text>{msg.type}</Text>;
     }
@@ -114,6 +139,7 @@ export const PoolMsgDetail = ({
   blockHeight,
   msgIndex,
   msg,
+  pool,
   assetInfos,
   isOpened,
 }: {
@@ -121,6 +147,7 @@ export const PoolMsgDetail = ({
   blockHeight: number;
   msgIndex: number;
   msg: Message;
+  pool: PoolDetail<Big, TokenWithValue>;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
 }) => {
@@ -232,6 +259,34 @@ export const PoolMsgDetail = ({
         />
       );
     }
+    case "/osmosis.lockup.MsgLockTokens": {
+      const details = extractTxDetails(type, detail, log);
+      return (
+        <MsgLockTokensDetail
+          txHash={txHash}
+          blockHeight={blockHeight}
+          msgIndex={msgIndex}
+          msg={details}
+          pool={pool}
+          assetInfos={assetInfos}
+          isOpened={isOpened}
+        />
+      );
+    }
+    case "/osmosis.superfluid.MsgLockAndSuperfluidDelegate": {
+      const details = extractTxDetails(type, detail, log);
+      return (
+        <MsgLockAndSuperfluidDelegateDetail
+          txHash={txHash}
+          blockHeight={blockHeight}
+          msgIndex={msgIndex}
+          msg={details}
+          pool={pool}
+          assetInfos={assetInfos}
+          isOpened={isOpened}
+        />
+      );
+    }
     default:
       return <Text h={20}>{JSON.stringify(msg.detail)}</Text>;
   }
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx
new file mode 100644
index 000000000..4db2401bb
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx
@@ -0,0 +1,46 @@
+import { Flex } from "@chakra-ui/react";
+import type Big from "big.js";
+
+import { PoolLogoLink } from "../components";
+import { getPoolDenom } from "../utils";
+import { MsgToken } from "lib/components/action-msg/MsgToken";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { MsgLockTokensDetails } from "lib/utils/tx/types";
+
+interface MsgLockTokensActionProps {
+  msg: MsgLockTokensDetails;
+  pool: PoolDetail<Big, TokenWithValue>;
+  assetInfos: AssetInfosOpt;
+}
+
+export const MsgLockTokensAction = ({
+  msg,
+  pool,
+  assetInfos,
+}: MsgLockTokensActionProps) => {
+  const poolDenom = getPoolDenom(pool.id.toString());
+  const poolAsset = msg.coins.find((coin) => coin.denom === poolDenom) ?? {
+    amount: "0",
+    denom: poolDenom,
+  };
+  const poolAssetInfo = assetInfos?.[poolDenom];
+  return (
+    <Flex gap={1} alignItems="center" flexWrap="wrap">
+      Bonded
+      <MsgToken
+        coin={poolAsset}
+        symbol={poolAssetInfo?.symbol}
+        precision={poolAssetInfo?.precision}
+        fontWeight={700}
+      />
+      to
+      <PoolLogoLink pool={pool} />
+      with
+      <span style={{ fontWeight: 700 }}>
+        {Number(msg.duration) / (24 * 60 * 60 * 1e9)}
+      </span>
+      days unbonding
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
new file mode 100644
index 000000000..133f3dc65
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
@@ -0,0 +1,95 @@
+import { Box, Flex, Text } from "@chakra-ui/react";
+import type Big from "big.js";
+
+import { PoolAssetCard } from "../components";
+import { getPoolDenom } from "../utils";
+import { MsgToken } from "lib/components/action-msg/MsgToken";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { Loading } from "lib/components/Loading";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import { useTxData } from "lib/services/txService";
+import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { MsgLockTokensDetails } from "lib/utils/tx/types";
+
+interface MsgLockTokensDetailProps {
+  txHash: string;
+  blockHeight: number;
+  msgIndex: number;
+  msg: MsgLockTokensDetails;
+  pool: PoolDetail<Big, TokenWithValue>;
+  assetInfos: AssetInfosOpt;
+  isOpened: boolean;
+}
+
+export const MsgLockTokensDetail = ({
+  txHash,
+  blockHeight,
+  msgIndex,
+  msg,
+  pool,
+  assetInfos,
+  isOpened,
+}: MsgLockTokensDetailProps) => {
+  const poolDenom = getPoolDenom(pool.id.toString());
+  const poolAsset = msg.coins.find((coin) => coin.denom === poolDenom) ?? {
+    amount: "0",
+    denom: poolDenom,
+  };
+  const poolAssetInfo = assetInfos?.[poolDenom];
+
+  const { data: txData, isLoading } = useTxData(txHash, isOpened);
+  if (isLoading) return <Loading withBorder={false} />;
+
+  const lockId = txData?.logs
+    .find((event) => event.msg_index === msgIndex)
+    ?.events?.find(
+      (event) =>
+        event.type.includes("lock") &&
+        event.attributes.some((attr) => attr.value.includes(poolDenom))
+    )
+    ?.attributes.at(0)?.value;
+
+  return (
+    <Flex w="full" direction="column" gap={4}>
+      <Flex gap={12}>
+        <Flex direction="column" gap={1}>
+          <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+            Block height
+          </Text>
+          <ExplorerLink
+            value={blockHeight.toString()}
+            type="block_height"
+            showCopyOnHover
+          />
+        </Flex>
+        <Flex direction="column" gap={1}>
+          <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+            LockID
+          </Text>
+          <Text variant="body2">{lockId}</Text>
+        </Flex>
+        <Flex direction="column" gap={1}>
+          <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+            Bonded LP
+          </Text>
+          <MsgToken
+            coin={poolAsset}
+            symbol={poolAssetInfo?.symbol}
+            precision={poolAssetInfo?.precision}
+            fontWeight={700}
+          />
+        </Flex>
+      </Flex>
+      <Box w="full">
+        <PoolAssetCard
+          poolId={pool.id}
+          description="Bonded to"
+          assetText="Bonded "
+          poolAsset={poolAsset}
+          poolAssetInfo={poolAssetInfo}
+          isOpened={isOpened}
+        />
+      </Box>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/index.ts b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/index.ts
new file mode 100644
index 000000000..2c94f3838
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/index.ts
@@ -0,0 +1,2 @@
+export * from "./MsgLockTokensAction";
+export * from "./MsgLockTokensDetail";
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
index 70df42477..055500562 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
@@ -4,7 +4,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
 import type { MsgExitPoolDetails } from "lib/utils/tx/types";
 
-import { PoolAssetCard, LiquidityDivider, PoolAssetsGrid } from "./components";
+import { PoolLPCard, LiquidityDivider, PoolAssetsGrid } from "./components";
 
 interface MsgExitPoolDetailProps {
   txHash: string;
@@ -24,7 +24,7 @@ export const MsgExitPoolDetail = ({
   isOpened,
 }: MsgExitPoolDetailProps) => (
   <Flex w="full" alignItems="start" gap={12}>
-    <Flex direction="column" minW="100px">
+    <Flex direction="column" gap={1}>
       <Text variant="body2" textColor="pebble.500" fontWeight={500}>
         Block height
       </Text>
@@ -35,7 +35,7 @@ export const MsgExitPoolDetail = ({
       />
     </Flex>
     <Box w="full">
-      <PoolAssetCard
+      <PoolLPCard
         msgIndex={msgIndex}
         poolId={msg.pool_id}
         msgShareAmount={msg.share_in_amount}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
index 83dd3e8e2..95a51b2b6 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
@@ -4,7 +4,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
 import type { MsgExitSwapExternAmountOutDetails } from "lib/utils/tx/types";
 
-import { PoolAssetCard, LiquidityDivider, PoolAssetsGrid } from "./components";
+import { PoolLPCard, LiquidityDivider, PoolAssetsGrid } from "./components";
 
 interface MsgExitSwapExternAmountOutDetailProps {
   txHash: string;
@@ -24,7 +24,7 @@ export const MsgExitSwapExternAmountOutDetail = ({
   isOpened,
 }: MsgExitSwapExternAmountOutDetailProps) => (
   <Flex w="full" alignItems="start" gap={12}>
-    <Flex direction="column" minW="100px">
+    <Flex direction="column" gap={1}>
       <Text variant="body2" textColor="pebble.500" fontWeight={500}>
         Block height
       </Text>
@@ -35,7 +35,7 @@ export const MsgExitSwapExternAmountOutDetail = ({
       />
     </Flex>
     <Box w="full">
-      <PoolAssetCard
+      <PoolLPCard
         txHash={txHash}
         msgIndex={msgIndex}
         poolId={msg.pool_id}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
index a6b241a1e..0e55fe5d4 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
@@ -4,7 +4,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
 import type { MsgExitSwapShareAmountInDetails } from "lib/utils/tx/types";
 
-import { PoolAssetCard, LiquidityDivider, PoolAssetsGrid } from "./components";
+import { PoolLPCard, LiquidityDivider, PoolAssetsGrid } from "./components";
 
 interface MsgExitSwapShareAmountInDetailProps {
   txHash: string;
@@ -24,7 +24,7 @@ export const MsgExitSwapShareAmountInDetail = ({
   isOpened,
 }: MsgExitSwapShareAmountInDetailProps) => (
   <Flex minW="full" alignItems="start" gap={12}>
-    <Flex direction="column" minW="100px">
+    <Flex direction="column" gap={1}>
       <Text variant="body2" textColor="pebble.500" fontWeight={500}>
         Block height
       </Text>
@@ -35,7 +35,7 @@ export const MsgExitSwapShareAmountInDetail = ({
       />
     </Flex>
     <Box w="full">
-      <PoolAssetCard
+      <PoolLPCard
         msgIndex={msgIndex}
         poolId={msg.pool_id}
         msgShareAmount={msg.share_in_amount}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
index 58a13f2da..5c470c3d3 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
@@ -4,7 +4,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
 import type { MsgJoinPoolDetails } from "lib/utils/tx/types";
 
-import { PoolAssetCard, LiquidityDivider, PoolAssetsGrid } from "./components";
+import { PoolLPCard, LiquidityDivider, PoolAssetsGrid } from "./components";
 
 interface MsgJoinPoolDetailProps {
   txHash: string;
@@ -24,7 +24,7 @@ export const MsgJoinPoolDetail = ({
   isOpened,
 }: MsgJoinPoolDetailProps) => (
   <Flex w="full" alignItems="start" gap={12}>
-    <Flex direction="column" minW="100px">
+    <Flex direction="column" gap={1}>
       <Text variant="body2" textColor="pebble.500" fontWeight={500}>
         Block height
       </Text>
@@ -43,7 +43,7 @@ export const MsgJoinPoolDetail = ({
         isOpened={isOpened}
       />
       <LiquidityDivider />
-      <PoolAssetCard
+      <PoolLPCard
         msgIndex={msgIndex}
         poolId={msg.pool_id}
         msgShareAmount={msg.share_out_amount}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
index 18bd40fdc..79ae9d427 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
@@ -4,7 +4,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
 import type { MsgJoinSwapExternAmountInDetails } from "lib/utils/tx/types";
 
-import { LiquidityDivider, PoolAssetCard, PoolAssetsGrid } from "./components";
+import { LiquidityDivider, PoolLPCard, PoolAssetsGrid } from "./components";
 
 interface MsgJoinSwapExternAmountInDetailProps {
   txHash: string;
@@ -24,7 +24,7 @@ export const MsgJoinSwapExternAmountInDetail = ({
   isOpened,
 }: MsgJoinSwapExternAmountInDetailProps) => (
   <Flex w="full" alignItems="start" gap={12}>
-    <Flex direction="column" minW="100px">
+    <Flex direction="column" gap={1}>
       <Text variant="body2" textColor="pebble.500" fontWeight={500}>
         Block height
       </Text>
@@ -43,7 +43,7 @@ export const MsgJoinSwapExternAmountInDetail = ({
         isOpened={isOpened}
       />
       <LiquidityDivider />
-      <PoolAssetCard
+      <PoolLPCard
         txHash={txHash}
         msgIndex={msgIndex}
         poolId={msg.pool_id}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
index 8849dca3c..e41376d60 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
@@ -4,7 +4,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
 import type { MsgJoinSwapShareAmountOutDetails } from "lib/utils/tx/types";
 
-import { LiquidityDivider, PoolAssetCard, PoolAssetsGrid } from "./components";
+import { LiquidityDivider, PoolLPCard, PoolAssetsGrid } from "./components";
 
 interface MsgJoinSwapShareAmountOutDetailProps {
   txHash: string;
@@ -24,7 +24,7 @@ export const MsgJoinSwapShareAmountOutDetail = ({
   isOpened,
 }: MsgJoinSwapShareAmountOutDetailProps) => (
   <Flex w="full" alignItems="start" gap={12}>
-    <Flex direction="column" minW="100px">
+    <Flex direction="column" gap={1}>
       <Text variant="body2" textColor="pebble.500" fontWeight={500}>
         Block height
       </Text>
@@ -43,7 +43,7 @@ export const MsgJoinSwapShareAmountOutDetail = ({
         isOpened={isOpened}
       />
       <LiquidityDivider />
-      <PoolAssetCard
+      <PoolLPCard
         msgIndex={msgIndex}
         msgShareAmount={msg.share_amount_out}
         poolId={msg.pool_id}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
new file mode 100644
index 000000000..adf50dcea
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
@@ -0,0 +1,66 @@
+import { Flex } from "@chakra-ui/react";
+
+import { PoolAssetCard } from "../../components";
+import { getPoolDenom } from "../../utils";
+import { Loading } from "lib/components/Loading";
+import { EmptyState } from "lib/components/state";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import { useTxData } from "lib/services/txService";
+
+interface PoolLPCardProps {
+  txHash?: string;
+  msgIndex: number;
+  poolId: string;
+  msgShareAmount?: string;
+  assetInfos: AssetInfosOpt;
+  isJoin: boolean;
+  isOpened: boolean;
+}
+
+export const PoolLPCard = ({
+  txHash,
+  msgIndex,
+  poolId,
+  msgShareAmount,
+  assetInfos,
+  isJoin,
+  isOpened,
+}: PoolLPCardProps) => {
+  const { data: txData, isLoading } = useTxData(txHash, isOpened);
+  if (!msgShareAmount && isLoading) return <Loading withBorder={false} />;
+
+  const poolDenom = getPoolDenom(poolId);
+  const eventShareAmount = txData?.logs
+    .find((event) => event.msg_index === msgIndex)
+    ?.events?.find((event) => event.type === "coin_received")
+    ?.attributes.at(3)
+    ?.value.slice(0, -poolDenom.length);
+
+  const shareAmount = msgShareAmount ?? eventShareAmount;
+  if (!shareAmount)
+    return (
+      <EmptyState message="There is an error during fetching transaction detail." />
+    );
+
+  return (
+    <Flex
+      className="pool-msg-detail-container"
+      direction="column"
+      gap={2}
+      p={4}
+      border="1px solid"
+      borderColor="transparent"
+      borderRadius="8px"
+      bgColor="pebble.900"
+    >
+      <PoolAssetCard
+        poolId={Number(poolId)}
+        description={isJoin ? "Provided to" : "Removed from"}
+        assetText={isJoin ? "Received " : "Burn "}
+        poolAsset={{ amount: shareAmount, denom: poolDenom }}
+        poolAssetInfo={assetInfos?.[poolDenom]}
+        isOpened={isOpened}
+      />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/index.ts b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/index.ts
index 8dc23beaa..3d7cb6ccd 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/index.ts
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/index.ts
@@ -1,3 +1,3 @@
 export * from "./LiquidityDivider";
-export * from "./PoolAssetCard";
+export * from "./PoolLPCard";
 export * from "./PoolAssetsGrid";
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateAction.tsx
new file mode 100644
index 000000000..7902e2eb5
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateAction.tsx
@@ -0,0 +1,44 @@
+import { Flex } from "@chakra-ui/react";
+import type Big from "big.js";
+
+import { PoolLogoLink } from "../components";
+import { getPoolDenom } from "../utils";
+import { MsgToken } from "lib/components/action-msg/MsgToken";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { MsgLockAndSuperfluidDelegateDetails } from "lib/utils/tx/types";
+
+interface MsgLockAndSuperfluidDelegateActionProps {
+  msg: MsgLockAndSuperfluidDelegateDetails;
+  pool: PoolDetail<Big, TokenWithValue>;
+  assetInfos: AssetInfosOpt;
+}
+
+export const MsgLockAndSuperfluidDelegateAction = ({
+  msg,
+  pool,
+  assetInfos,
+}: MsgLockAndSuperfluidDelegateActionProps) => {
+  const poolDenom = getPoolDenom(pool.id.toString());
+  const poolAsset = msg.coins.find((coin) => coin.denom === poolDenom) ?? {
+    amount: "0",
+    denom: poolDenom,
+  };
+  const poolAssetInfo = assetInfos?.[poolDenom];
+  return (
+    <Flex gap={1} alignItems="center" flexWrap="wrap">
+      Bonded and locked
+      <MsgToken
+        coin={poolAsset}
+        symbol={poolAssetInfo?.symbol}
+        precision={poolAssetInfo?.precision}
+        fontWeight={700}
+      />
+      to
+      <PoolLogoLink pool={pool} />
+      with
+      <span style={{ fontWeight: 700 }}>14</span>
+      days unbonding
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
new file mode 100644
index 000000000..4e5e01461
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
@@ -0,0 +1,105 @@
+import { Box, Flex, Text } from "@chakra-ui/react";
+import type Big from "big.js";
+
+import { PoolAssetCard } from "../components";
+import { getPoolDenom } from "../utils";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { Loading } from "lib/components/Loading";
+import { ValidatorBadge } from "lib/components/ValidatorBadge";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import { useTxData } from "lib/services/txService";
+import { useValidator } from "lib/services/validatorService";
+import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { MsgLockAndSuperfluidDelegateDetails } from "lib/utils/tx/types";
+
+interface MsgLockAndSuperfluidDelegateDetailProps {
+  txHash: string;
+  blockHeight: number;
+  msgIndex: number;
+  msg: MsgLockAndSuperfluidDelegateDetails;
+  pool: PoolDetail<Big, TokenWithValue>;
+  assetInfos: AssetInfosOpt;
+  isOpened: boolean;
+}
+
+export const MsgLockAndSuperfluidDelegateDetail = ({
+  txHash,
+  blockHeight,
+  msgIndex,
+  msg,
+  pool,
+  assetInfos,
+  isOpened,
+}: MsgLockAndSuperfluidDelegateDetailProps) => {
+  const poolDenom = getPoolDenom(pool.id.toString());
+  const poolAsset = msg.coins.find((coin) => coin.denom === poolDenom) ?? {
+    amount: "0",
+    denom: poolDenom,
+  };
+  const poolAssetInfo = assetInfos?.[poolDenom];
+
+  const { data: txData, isLoading: isTxDataLoading } = useTxData(
+    txHash,
+    isOpened
+  );
+  const { data: validator, isLoading: isValidatorLoading } = useValidator(
+    msg.val_addr,
+    isOpened
+  );
+
+  if (isTxDataLoading || isValidatorLoading)
+    return <Loading withBorder={false} />;
+
+  const lockId = txData?.logs
+    .find((event) => event.msg_index === msgIndex)
+    ?.events?.find(
+      (event) =>
+        event.type.includes("lock") &&
+        event.attributes.some((attr) => attr.value.includes(poolDenom))
+    )
+    ?.attributes.at(0)?.value;
+
+  return (
+    <Flex w="full" direction="column" gap={4}>
+      <Flex gap={12}>
+        <Flex direction="column" gap={1}>
+          <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+            Block height
+          </Text>
+          <ExplorerLink
+            value={blockHeight.toString()}
+            type="block_height"
+            showCopyOnHover
+          />
+        </Flex>
+        <Flex direction="column" gap={1}>
+          <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+            LockID
+          </Text>
+          <Text variant="body2">{lockId}</Text>
+        </Flex>
+        <Flex direction="column" gap={1}>
+          <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+            To Validator
+          </Text>
+          <ValidatorBadge
+            validator={{
+              validatorAddress: msg.val_addr,
+              moniker: validator?.moniker,
+            }}
+          />
+        </Flex>
+      </Flex>
+      <Box w="full">
+        <PoolAssetCard
+          poolId={pool.id}
+          description="Bonded to"
+          assetText="Bonded "
+          poolAsset={poolAsset}
+          poolAssetInfo={poolAssetInfo}
+          isOpened={isOpened}
+        />
+      </Box>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/index.ts b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/index.ts
new file mode 100644
index 000000000..209656aff
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/index.ts
@@ -0,0 +1,2 @@
+export * from "./MsgLockAndSuperfluidDelegateAction";
+export * from "./MsgLockAndSuperfluidDelegateDetail";
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
index 8db7b361a..68f1dc2fb 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
@@ -24,7 +24,7 @@ export const MsgSwapExactAmountInDetail = ({
   isOpened,
 }: MsgSwapExactAmountInDetailProps) => (
   <Flex w="full" alignItems="start" gap={12}>
-    <Flex direction="column">
+    <Flex direction="column" gap={1}>
       <Text variant="body2" textColor="pebble.500" fontWeight={500}>
         Block height
       </Text>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
index 5a66ef084..c6ac9c13d 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
@@ -33,7 +33,7 @@ export const MsgSwapExactAmountOutDetail = ({
 
   return (
     <Flex w="full" alignItems="start" gap={12}>
-      <Flex direction="column">
+      <Flex direction="column" gap={1}>
         <Text variant="body2" textColor="pebble.500" fontWeight={500}>
           Block height
         </Text>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts
index f8f6dfab6..9e55b841a 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts
@@ -3,6 +3,14 @@ import type { Coin } from "@cosmjs/stargate";
 import type { Message } from "lib/types";
 import { extractTxDetails } from "lib/utils";
 
+export const getPoolDenom = (poolId: string) => `gamm/pool/${poolId}`;
+
+export const coinFromStr = (str: string): Coin => {
+  const amount = str.match(/[0-9]+/g)?.[0] ?? "";
+  const denom = str.slice(amount.length);
+  return { amount, denom };
+};
+
 export const extractPoolMsgs = (msgs: Message[], poolId: number) => {
   const result: { msgs: Message[]; others: { [key: string]: number } } = {
     msgs: [],
@@ -22,9 +30,8 @@ export const extractPoolMsgs = (msgs: Message[], poolId: number) => {
           (details.routes as { poolId: number }[]).some(
             (pool) => Number(pool.poolId) === poolId
           )
-        ) {
-          result.msgs = result.msgs.concat(msg);
-        }
+        )
+          result.msgs.push(msg);
         break;
       }
       case "/osmosis.gamm.v1beta1.MsgJoinPool":
@@ -34,12 +41,18 @@ export const extractPoolMsgs = (msgs: Message[], poolId: number) => {
       case "/osmosis.gamm.v1beta1.MsgExitSwapShareAmountIn":
       case "/osmosis.gamm.v1beta1.MsgExitSwapExternAmountOut": {
         const details = extractTxDetails(type, detail, log);
-        if (Number(details.pool_id) === poolId) {
-          result.msgs = result.msgs.concat(msg);
-        }
+        if (Number(details.pool_id) === poolId) result.msgs.push(msg);
         break;
       }
       case "/osmosis.lockup.MsgLockTokens":
+      case "/osmosis.superfluid.MsgLockAndSuperfluidDelegate": {
+        const details = extractTxDetails(type, detail, log);
+        const poolDenom = getPoolDenom(poolId.toString());
+        if (details.coins.some((coin) => coin.denom === poolDenom))
+          result.msgs.push(msg);
+        break;
+      }
+
       case "/osmosis.lockup.MsgBeginUnlockingAll":
       case "/osmosis.lockup.MsgBeginUnlocking":
       case "/osmosis.lockup.MsgForceUnlock":
@@ -47,7 +60,6 @@ export const extractPoolMsgs = (msgs: Message[], poolId: number) => {
       case "/osmosis.superfluid.MsgSuperfluidDelegate":
       case "/osmosis.superfluid.MsgSuperfluidUndelegate":
       case "/osmosis.superfluid.MsgSuperfluidUnbondLock":
-      case "/osmosis.superfluid.MsgLockAndSuperfluidDelegate":
       case "/osmosis.superfluid.MsgUnPoolWhitelistedPool":
       case "/osmosis.superfluid.MsgSuperfluidUndelegateAndUnbondLock":
       case "/cosmos.authz.v1beta1.MsgExec":
@@ -65,11 +77,3 @@ export const extractPoolMsgs = (msgs: Message[], poolId: number) => {
   });
   return result;
 };
-
-export const getPoolDenom = (poolId: string) => `gamm/pool/${poolId}`;
-
-export const coinFromStr = (str: string): Coin => {
-  const amount = str.match(/[0-9]+/g)?.[0] ?? "";
-  const denom = str.slice(amount.length);
-  return { amount, denom };
-};
diff --git a/src/lib/services/validator.ts b/src/lib/services/validator.ts
index 5a33c8cd1..7b55eee07 100644
--- a/src/lib/services/validator.ts
+++ b/src/lib/services/validator.ts
@@ -2,36 +2,34 @@ import axios from "axios";
 
 import type { ValidatorAddr } from "lib/types";
 
-interface ValidatorsResponse {
-  validators: {
-    operator_address: ValidatorAddr;
-    consensus_pubkey: {
-      "@type": string;
-      key: string;
+interface ValidatorResponse {
+  operator_address: ValidatorAddr;
+  consensus_pubkey: {
+    "@type": string;
+    key: string;
+  };
+  jailed: boolean;
+  status: string;
+  token: string;
+  delegator_shares: string;
+  description: {
+    moniker: string;
+    identity: string;
+    website: string;
+    security_contact: string;
+    details: string;
+  };
+  unbonding_height: string;
+  unbonding_time: string;
+  commission: {
+    commission_rates: {
+      rate: string;
+      max_rate: string;
+      max_change_rate: string;
     };
-    jailed: boolean;
-    status: string;
-    token: string;
-    delegator_shares: string;
-    description: {
-      moniker: string;
-      identity: string;
-      website: string;
-      security_contact: string;
-      details: string;
-    };
-    unbonding_height: string;
-    unbonding_time: string;
-    commission: {
-      commission_rates: {
-        rate: string;
-        max_rate: string;
-        max_change_rate: string;
-      };
-      update_time: string;
-    };
-    min_self_delegation: string;
-  }[];
+    update_time: string;
+  };
+  min_self_delegation: string;
 }
 
 export interface RawValidator {
@@ -40,10 +38,24 @@ export interface RawValidator {
   identity: string;
 }
 
+export const getValidator = async (
+  endpoint: string,
+  validatorAddr: ValidatorAddr
+): Promise<RawValidator> => {
+  const { data } = await axios.get<{ validator: ValidatorResponse }>(
+    `${endpoint}/cosmos/staking/v1beta1/validators/${validatorAddr}`
+  );
+  return {
+    validatorAddress: data.validator.operator_address,
+    moniker: data.validator.description.moniker,
+    identity: data.validator.description.identity,
+  };
+};
+
 export const getValidators = async (
   endpoint: string
 ): Promise<Record<string, RawValidator>> => {
-  const { data } = await axios.get<ValidatorsResponse>(
+  const { data } = await axios.get<{ validators: ValidatorResponse[] }>(
     `${endpoint}/cosmos/staking/v1beta1/validators?pagination.limit=500`
   );
   return data.validators.reduce<Record<string, RawValidator>>(
diff --git a/src/lib/services/validatorService.ts b/src/lib/services/validatorService.ts
index f0d9ac20f..71b36e040 100644
--- a/src/lib/services/validatorService.ts
+++ b/src/lib/services/validatorService.ts
@@ -1,17 +1,39 @@
-import type { UseQueryResult } from "@tanstack/react-query";
+import type {
+  QueryFunctionContext,
+  UseQueryResult,
+} from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 
 import { useLCDEndpoint } from "lib/app-provider";
+import type { Option, ValidatorAddr } from "lib/types";
 
 import type { RawValidator } from "./validator";
-import { getValidators } from "./validator";
+import { getValidator, getValidators } from "./validator";
+
+export const useValidator = (
+  validatorAddr: Option<ValidatorAddr>,
+  enabled = true
+): UseQueryResult<RawValidator> => {
+  const endpoint = useLCDEndpoint();
+  const queryFn = async ({ queryKey }: QueryFunctionContext<string[]>) =>
+    getValidator(queryKey[2], queryKey[3] as ValidatorAddr);
+
+  return useQuery(
+    ["query", "validator", endpoint, validatorAddr] as string[],
+    queryFn,
+    {
+      enabled: enabled && !!validatorAddr,
+      retry: 1,
+      refetchOnWindowFocus: false,
+    }
+  );
+};
 
 export const useValidators = (): UseQueryResult<
   Record<string, RawValidator>
 > => {
   const endpoint = useLCDEndpoint();
-
   const queryFn = useCallback(async () => getValidators(endpoint), [endpoint]);
 
   return useQuery(["query", "validators", endpoint], queryFn, {

From 7d21dcdfcfd51da8146f2d29a0c03ca879ea173c Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 18 May 2023 16:52:00 +0700
Subject: [PATCH 122/354] fix: validator badge size

---
 .../messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
index 4e5e01461..50f01c1c9 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
@@ -87,6 +87,7 @@ export const MsgLockAndSuperfluidDelegateDetail = ({
               validatorAddress: msg.val_addr,
               moniker: validator?.moniker,
             }}
+            badgeSize={6}
           />
         </Flex>
       </Flex>

From c7574eed34ed977e75a70a0794cc5471a2612a62 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 18 May 2023 16:53:50 +0700
Subject: [PATCH 123/354] fix: path

---
 src/lib/pages/codes/components/ProposalButton.tsx | 2 +-
 src/lib/pages/proposal/constants.tsx              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/codes/components/ProposalButton.tsx b/src/lib/pages/codes/components/ProposalButton.tsx
index fc65fad98..d02c953a0 100644
--- a/src/lib/pages/codes/components/ProposalButton.tsx
+++ b/src/lib/pages/codes/components/ProposalButton.tsx
@@ -8,7 +8,7 @@ export const ProposalButton = () => {
   return (
     <Button
       variant="outline-primary"
-      onClick={() => navigate({ pathname: "/proposal/store-code" })}
+      onClick={() => navigate({ pathname: "/proposals/store-code" })}
       rightIcon={
         <CustomIcon
           name="submit-proposal"
diff --git a/src/lib/pages/proposal/constants.tsx b/src/lib/pages/proposal/constants.tsx
index 9d0917fee..0cac63ebb 100644
--- a/src/lib/pages/proposal/constants.tsx
+++ b/src/lib/pages/proposal/constants.tsx
@@ -24,7 +24,7 @@ export const SIDEBAR_WHITELIST_DETAILS: SidebarDetails = {
       </span>
     ),
     toPage: true,
-    toPagePath: "/proposal/store-code",
+    toPagePath: "/proposals/store-code",
     toPageTitle: "Submit Proposal To Store Code",
   },
   testnet: {

From d39866ceb953e3cb97bdebab5846c5787a970bdf Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 18 May 2023 17:56:52 +0700
Subject: [PATCH 124/354] feat: add n/a token as fallback img

---
 CHANGELOG.md                                   |  1 +
 src/lib/pages/proposal/components/AssetBox.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f04725385..62744e037 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -48,6 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#342](https://github.com/alleslabs/celatone-frontend/pull/342) Add fallback n/a token on asset icon on asset box
 - [#331](https://github.com/alleslabs/celatone-frontend/pull/331) Add validation check for builder in proposal to store code page
 - [#324](https://github.com/alleslabs/celatone-frontend/pull/324) Add deposit/voting period from gov params and add minimum required alert for proposal to store code
 - [#339](https://github.com/alleslabs/celatone-frontend/pull/339) Update all routes to plural form, and patch all codes
diff --git a/src/lib/pages/proposal/components/AssetBox.tsx b/src/lib/pages/proposal/components/AssetBox.tsx
index 63483d237..71766bb19 100644
--- a/src/lib/pages/proposal/components/AssetBox.tsx
+++ b/src/lib/pages/proposal/components/AssetBox.tsx
@@ -1,6 +1,7 @@
 import { Box, chakra, Flex, Image, Text } from "@chakra-ui/react";
 
 import { useNativeTokensInfo } from "lib/app-provider";
+import { NAToken } from "lib/icon";
 import type { Option } from "lib/types";
 
 const AssetLabel = chakra(Text, {
@@ -40,8 +41,13 @@ export const AssetBox = ({ baseDenom }: { baseDenom: Option<string> }) => {
       color={tokenInfo ? "text.main" : "pebble.600"}
     >
       <AssetLabel>Asset</AssetLabel>
-      <Flex align="center">
-        <Image h="24px" w="24px" mr={1} src={tokenInfo?.logo_URIs?.png} />
+      <Flex align="center" gap={1}>
+        <Image
+          h="24px"
+          w="24px"
+          src={tokenInfo?.logo_URIs?.png}
+          fallback={<NAToken />}
+        />
         {tokenInfo?.symbol ?? "N/A"}
       </Flex>
     </Box>

From a81cf5d5f064350014abd16b5eea51cca9939015 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Fri, 19 May 2023 08:14:36 +0700
Subject: [PATCH 125/354] fix: any of addresses enable tx bug

---
 src/lib/pages/proposal/store-code/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index f98de38f5..b4e405af1 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -174,13 +174,14 @@ const StoreCodeProposal = () => {
               validateContractAddress(addr.address)
           )
         )),
-
     [
       addresses,
       permission,
       uploadSectionErrorsKey.length,
       validateContractAddress,
       validateUserAddress,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      JSON.stringify(addresses),
     ]
   );
 

From 447958fd8675eb182cc32335492ad8e5fc0231b1 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Fri, 19 May 2023 08:17:33 +0700
Subject: [PATCH 126/354] chore: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 62744e037..13c125915 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -59,6 +59,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#334](https://github.com/alleslabs/celatone-frontend/pull/344) Fix enable tx bug in proposal to store code
 - [$340](https://github.com/alleslabs/celatone-frontend/pull/340) Remove resend and redo button in accordion if relation is related (Past txs page)
 - [#337](https://github.com/alleslabs/celatone-frontend/pull/337) Fix beforeunload keep showing up Leave modal
 - [#330](https://github.com/alleslabs/celatone-frontend/pull/330) Fix proposal table component propagation

From 500a66de279c3d619567ce1a35f52cb0dbe39aa3 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 19 May 2023 10:55:18 +0700
Subject: [PATCH 127/354] fix: add tooltip

---
 .../pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
index 24c3d1a43..b66a31247 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
@@ -1,5 +1,6 @@
 import { Flex, Tag, Text } from "@chakra-ui/react";
 
+import { TooltipInfo } from "lib/components/TooltipComponent";
 import { extractMsgType } from "lib/utils";
 
 interface PoolOtherMsgsProps {
@@ -9,7 +10,7 @@ interface PoolOtherMsgsProps {
 export const PoolOtherMsgs = ({ otherMsgs }: PoolOtherMsgsProps) => {
   const typePaths = Object.keys(otherMsgs);
   return (
-    <Flex gap={1} flexWrap="wrap">
+    <Flex gap={2} flexWrap="wrap">
       Total
       {typePaths.map((typePath, index) => {
         const type = extractMsgType(typePath);
@@ -20,6 +21,7 @@ export const PoolOtherMsgs = ({ otherMsgs }: PoolOtherMsgsProps) => {
           </Text>
         );
       })}
+      <TooltipInfo label="TODO: wait for text" iconVariant="solid" />
     </Flex>
   );
 };

From 9af75bbaf097fef35befa3aee8a8b16de073cc62 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 19 May 2023 13:15:23 +0700
Subject: [PATCH 128/354] feat: refactor block txs

---
 CHANGELOG.md                                  |   1 +
 .../components/action-msg/ActionMessages.tsx  |   4 +-
 .../table/transactions/TransactionsTable.tsx  |  10 +-
 .../transactions/TransactionsTableHeader.tsx  |   6 +-
 .../transactions/TransactionsTableRow.tsx     |  37 ++++---
 src/lib/gql/gql.ts                            |   6 +-
 src/lib/gql/graphql.ts                        |  24 ++++-
 .../components/BlockTxsTable.tsx              |  78 ++++++++++++++
 .../pages/block-details/components/index.ts   |   2 +-
 .../components/table/BlockTxTableHeader.tsx   |  24 -----
 .../components/table/BlockTxTableRow.tsx      |  89 ----------------
 .../block-details/components/table/index.tsx  | 100 ------------------
 src/lib/pages/block-details/index.tsx         |   8 +-
 src/lib/query/tx.ts                           |  10 +-
 src/lib/services/txService.ts                 |  43 ++++----
 src/lib/types/tx/transaction.ts               |  11 --
 16 files changed, 167 insertions(+), 286 deletions(-)
 create mode 100644 src/lib/pages/block-details/components/BlockTxsTable.tsx
 delete mode 100644 src/lib/pages/block-details/components/table/BlockTxTableHeader.tsx
 delete mode 100644 src/lib/pages/block-details/components/table/BlockTxTableRow.tsx
 delete mode 100644 src/lib/pages/block-details/components/table/index.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2afc77c23..8e622fdd4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -44,6 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#347](https://github.com/alleslabs/celatone-frontend/pull/347) Move tx table accordion arrow to the front and refactor block txs table
 - [#339](https://github.com/alleslabs/celatone-frontend/pull/339) Update all routes to plural form, and patch all codes
 - [#334](https://github.com/alleslabs/celatone-frontend/pull/334) Change `osmo-test-4` to `osmo-test-5`, fix tx service when accountId is undefined
 - [#311](https://github.com/alleslabs/celatone-frontend/pull/311) Refine css styling
diff --git a/src/lib/components/action-msg/ActionMessages.tsx b/src/lib/components/action-msg/ActionMessages.tsx
index d723666b4..ba6a0fd57 100644
--- a/src/lib/components/action-msg/ActionMessages.tsx
+++ b/src/lib/components/action-msg/ActionMessages.tsx
@@ -1,4 +1,4 @@
-import type { BlockTransaction, Transaction } from "lib/types";
+import type { Transaction } from "lib/types";
 import { ActionMsgType } from "lib/types";
 import { extractMsgType } from "lib/utils";
 
@@ -7,7 +7,7 @@ import { SingleActionMsg } from "./SingleActionMsg";
 import { SingleMsg } from "./SingleMsg";
 
 interface RenderActionMessagesProps {
-  transaction: Transaction | BlockTransaction;
+  transaction: Transaction;
 }
 
 export const RenderActionMessages = ({
diff --git a/src/lib/components/table/transactions/TransactionsTable.tsx b/src/lib/components/table/transactions/TransactionsTable.tsx
index 291487942..3db3e37ec 100644
--- a/src/lib/components/table/transactions/TransactionsTable.tsx
+++ b/src/lib/components/table/transactions/TransactionsTable.tsx
@@ -10,6 +10,7 @@ interface TransactionsTableProps {
   isLoading: boolean;
   emptyState: JSX.Element;
   showRelations: boolean;
+  showTimestamp?: boolean;
   showAction?: boolean;
 }
 
@@ -18,20 +19,24 @@ export const TransactionsTable = ({
   isLoading,
   emptyState,
   showRelations,
+  showTimestamp = true,
   showAction = false,
 }: TransactionsTableProps) => {
   if (isLoading) return <Loading />;
   if (!transactions?.length) return emptyState;
 
-  const templateColumns = `150px 40px minmax(360px, 1fr) ${
+  const templateColumns = `30px 150px 40px minmax(360px, 1fr) ${
     showRelations ? "100px " : ""
-  }max(150px) max(220px) ${showAction ? "100px " : ""}60px`;
+  }max(160px) ${showTimestamp ? "max(220px) " : ""}${
+    showAction ? "100px " : ""
+  }`;
 
   return (
     <TableContainer>
       <TransactionsTableHeader
         templateColumns={templateColumns}
         showRelations={showRelations}
+        showTimestamp={showTimestamp}
         showAction={showAction}
       />
       {transactions.map((transaction) => (
@@ -40,6 +45,7 @@ export const TransactionsTable = ({
           transaction={transaction}
           templateColumns={templateColumns}
           showRelations={showRelations}
+          showTimestamp={showTimestamp}
           showAction={showAction}
         />
       ))}
diff --git a/src/lib/components/table/transactions/TransactionsTableHeader.tsx b/src/lib/components/table/transactions/TransactionsTableHeader.tsx
index 5af4fc399..3204c5eeb 100644
--- a/src/lib/components/table/transactions/TransactionsTableHeader.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableHeader.tsx
@@ -6,20 +6,22 @@ import { TableHeader } from "../tableComponents";
 export const TransactionsTableHeader = ({
   templateColumns,
   showRelations,
+  showTimestamp,
   showAction,
 }: {
   templateColumns: GridProps["templateColumns"];
   showRelations: boolean;
+  showTimestamp: boolean;
   showAction: boolean;
 }) => (
   <Grid templateColumns={templateColumns} minW="min-content">
+    <TableHeader />
     <TableHeader>Transaction Hash</TableHeader>
     <TableHeader />
     <TableHeader>Messages</TableHeader>
     {showRelations && <TableHeader>Relations</TableHeader>}
     <TableHeader>Sender</TableHeader>
-    <TableHeader>Timestamp</TableHeader>
+    {showTimestamp && <TableHeader>Timestamp</TableHeader>}
     {showAction && <TableHeader />}
-    <TableHeader />
   </Grid>
 );
diff --git a/src/lib/components/table/transactions/TransactionsTableRow.tsx b/src/lib/components/table/transactions/TransactionsTableRow.tsx
index 436829b9a..61d988b3d 100644
--- a/src/lib/components/table/transactions/TransactionsTableRow.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableRow.tsx
@@ -15,6 +15,7 @@ interface TransactionsTableRowProps {
   transaction: Transaction;
   templateColumns: string;
   showRelations: boolean;
+  showTimestamp: boolean;
   showAction: boolean;
 }
 
@@ -22,6 +23,7 @@ export const TransactionsTableRow = ({
   transaction,
   templateColumns,
   showRelations,
+  showTimestamp,
   showAction,
 }: TransactionsTableRowProps) => {
   const { isOpen, onToggle } = useDisclosure();
@@ -37,6 +39,14 @@ export const TransactionsTableRow = ({
         transition="all .25s ease-in-out"
         cursor={isAccordion ? "pointer" : "default"}
       >
+        <TableRow>
+          {isAccordion && (
+            <CustomIcon
+              name={isOpen ? "chevron-up" : "chevron-down"}
+              color="pebble.600"
+            />
+          )}
+        </TableRow>
         <TableRow>
           <ExplorerLink
             value={transaction.hash.toLocaleUpperCase()}
@@ -76,29 +86,22 @@ export const TransactionsTableRow = ({
           />
         </TableRow>
 
-        <TableRow>
-          <Flex direction="column" gap={1}>
-            <Text variant="body3">{formatUTC(transaction.created)}</Text>
-            <Text variant="body3" color="text.dark">
-              {`(${dateFromNow(transaction.created)})`}
-            </Text>
-          </Flex>
-        </TableRow>
+        {showTimestamp && (
+          <TableRow>
+            <Flex direction="column" gap={1}>
+              <Text variant="body3">{formatUTC(transaction.created)}</Text>
+              <Text variant="body3" color="text.dark">
+                {`(${dateFromNow(transaction.created)})`}
+              </Text>
+            </Flex>
+          </TableRow>
+        )}
 
         {showAction && (
           <TableRow>
             <FurtherActionButton transaction={transaction} />
           </TableRow>
         )}
-
-        <TableRow>
-          {isAccordion && (
-            <CustomIcon
-              name={isOpen ? "chevron-up" : "chevron-down"}
-              color="pebble.600"
-            />
-          )}
-        </TableRow>
       </Grid>
       {isAccordion && (
         <Grid w="full" py={4} hidden={!isOpen}>
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index b7c1cbe9a..5dcec9e70 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -71,7 +71,7 @@ const documents = {
     types.GetTxsDocument,
   "\n  query getTxsCount {\n    transactions(limit: 1, order_by: { id: desc }) {\n      id\n    }\n  }\n":
     types.GetTxsCountDocument,
-  "\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      hash\n      success\n      messages\n      account {\n        address\n      }\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n":
+  "\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n":
     types.GetBlockTransactionsByHeightQueryDocument,
   "\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetBlockTransactionCountByHeightQueryDocument,
@@ -180,8 +180,8 @@ export function graphql(
   source: "\n  query getTxsCount {\n    transactions(limit: 1, order_by: { id: desc }) {\n      id\n    }\n  }\n"
 ): typeof documents["\n  query getTxsCount {\n    transactions(limit: 1, order_by: { id: desc }) {\n      id\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      hash\n      success\n      messages\n      account {\n        address\n      }\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"
-): typeof documents["\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      hash\n      success\n      messages\n      account {\n        address\n      }\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"];
+  source: "\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"
+): typeof documents["\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index 971f4e60a..266671678 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -12751,6 +12751,7 @@ export type GetBlockTransactionsByHeightQueryQuery = {
     is_send: boolean;
     is_store_code: boolean;
     is_update_admin: boolean;
+    block: { __typename?: "blocks"; height: number; timestamp: any };
     account: { __typename?: "accounts"; address: string };
   }>;
 };
@@ -17197,9 +17198,23 @@ export const GetBlockTransactionsByHeightQueryDocument = {
             selectionSet: {
               kind: "SelectionSet",
               selections: [
-                { kind: "Field", name: { kind: "Name", value: "hash" } },
-                { kind: "Field", name: { kind: "Name", value: "success" } },
-                { kind: "Field", name: { kind: "Name", value: "messages" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "block" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "height" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "timestamp" },
+                      },
+                    ],
+                  },
+                },
                 {
                   kind: "Field",
                   name: { kind: "Name", value: "account" },
@@ -17213,6 +17228,9 @@ export const GetBlockTransactionsByHeightQueryDocument = {
                     ],
                   },
                 },
+                { kind: "Field", name: { kind: "Name", value: "hash" } },
+                { kind: "Field", name: { kind: "Name", value: "success" } },
+                { kind: "Field", name: { kind: "Name", value: "messages" } },
                 {
                   kind: "Field",
                   name: { kind: "Name", value: "is_clear_admin" },
diff --git a/src/lib/pages/block-details/components/BlockTxsTable.tsx b/src/lib/pages/block-details/components/BlockTxsTable.tsx
new file mode 100644
index 000000000..e30aa3f86
--- /dev/null
+++ b/src/lib/pages/block-details/components/BlockTxsTable.tsx
@@ -0,0 +1,78 @@
+import type { ChangeEvent } from "react";
+
+import { Pagination } from "lib/components/pagination";
+import { usePaginator } from "lib/components/pagination/usePaginator";
+import { EmptyState } from "lib/components/state";
+import { TransactionsTable } from "lib/components/table";
+import {
+  useTxsByBlockHeightPagination,
+  useTxsCountByBlockHeight,
+} from "lib/services/txService";
+
+const scrollComponentId = "block_tx_table_header";
+
+interface BlockTxsTableProps {
+  height: number;
+}
+
+export const BlockTxsTable = ({ height }: BlockTxsTableProps) => {
+  const { data: blockTxsCount = 0 } = useTxsCountByBlockHeight(height);
+  const {
+    pagesQuantity,
+    currentPage,
+    setCurrentPage,
+    pageSize,
+    setPageSize,
+    offset,
+  } = usePaginator({
+    total: blockTxsCount,
+    initialState: {
+      pageSize: 10,
+      currentPage: 1,
+      isDisabled: false,
+    },
+  });
+
+  const { data: blockTxs, isLoading: isBlockTxsLoading } =
+    useTxsByBlockHeightPagination(height, pageSize, offset);
+
+  const onPageChange = (nextPage: number) => {
+    setCurrentPage(nextPage);
+  };
+
+  const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const size = Number(e.target.value);
+    setPageSize(size);
+    setCurrentPage(1);
+  };
+
+  return (
+    <>
+      <TransactionsTable
+        transactions={blockTxs}
+        isLoading={isBlockTxsLoading}
+        emptyState={
+          <EmptyState
+            imageVariant="empty"
+            message="There are no submitted transactions in this block"
+            withBorder
+          />
+        }
+        showRelations={false}
+        showTimestamp={false}
+      />
+      {blockTxsCount > 10 && (
+        <Pagination
+          currentPage={currentPage}
+          pagesQuantity={pagesQuantity}
+          offset={offset}
+          totalData={blockTxsCount}
+          scrollComponentId={scrollComponentId}
+          pageSize={pageSize}
+          onPageChange={onPageChange}
+          onPageSizeChange={onPageSizeChange}
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/lib/pages/block-details/components/index.ts b/src/lib/pages/block-details/components/index.ts
index 2ccb60773..0f62f4ffe 100644
--- a/src/lib/pages/block-details/components/index.ts
+++ b/src/lib/pages/block-details/components/index.ts
@@ -1,3 +1,3 @@
 export * from "./BlockDetailsTop";
 export * from "./BlockInfo";
-export * from "./table";
+export * from "./BlockTxsTable";
diff --git a/src/lib/pages/block-details/components/table/BlockTxTableHeader.tsx b/src/lib/pages/block-details/components/table/BlockTxTableHeader.tsx
deleted file mode 100644
index c7af16d23..000000000
--- a/src/lib/pages/block-details/components/table/BlockTxTableHeader.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { GridProps } from "@chakra-ui/react";
-import { Grid } from "@chakra-ui/react";
-
-import { TableHeader } from "lib/components/table";
-
-export const BlockTxTableHeader = ({
-  templateColumns,
-  scrollComponentId,
-}: {
-  templateColumns: GridProps["templateColumns"];
-  scrollComponentId: string;
-}) => (
-  <Grid
-    templateColumns={templateColumns}
-    minW="min-content"
-    id={scrollComponentId}
-  >
-    <TableHeader>Transaction Hash</TableHeader>
-    <TableHeader />
-    <TableHeader>Messages</TableHeader>
-    <TableHeader>Sender</TableHeader>
-    <TableHeader />
-  </Grid>
-);
diff --git a/src/lib/pages/block-details/components/table/BlockTxTableRow.tsx b/src/lib/pages/block-details/components/table/BlockTxTableRow.tsx
deleted file mode 100644
index 0dcdb7416..000000000
--- a/src/lib/pages/block-details/components/table/BlockTxTableRow.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Flex, Grid, useDisclosure, Tag, Box } from "@chakra-ui/react";
-
-import { useGetAddressType } from "lib/app-provider";
-import { RenderActionMessages } from "lib/components/action-msg/ActionMessages";
-import { ExplorerLink } from "lib/components/ExplorerLink";
-import { CustomIcon } from "lib/components/icon";
-import { AccordionTx, TableRow } from "lib/components/table";
-import type { BlockTransaction } from "lib/types";
-
-interface BlockTxTableRowProps {
-  transaction: BlockTransaction;
-  templateColumns: string;
-}
-
-export const BlockTxTableRow = ({
-  transaction,
-  templateColumns,
-}: BlockTxTableRowProps) => {
-  const getAddressType = useGetAddressType();
-  const { isOpen, onToggle } = useDisclosure();
-  const isAccordion = transaction.messages.length > 1;
-  return (
-    <Box w="full" minW="min-content">
-      <Grid
-        className="copier-wrapper"
-        templateColumns={templateColumns}
-        onClick={isAccordion ? onToggle : undefined}
-        _hover={{ background: "pebble.900" }}
-        transition="all .25s ease-in-out"
-        cursor={isAccordion ? "pointer" : "default"}
-      >
-        <TableRow>
-          <ExplorerLink
-            value={transaction.hash.toLocaleUpperCase()}
-            type="tx_hash"
-            showCopyOnHover
-          />
-        </TableRow>
-        <TableRow>
-          {transaction.success ? (
-            <CustomIcon name="check" color="success.main" />
-          ) : (
-            <CustomIcon name="close" color="error.main" />
-          )}
-        </TableRow>
-        <TableRow>
-          <Flex gap={1} flexWrap="wrap">
-            <RenderActionMessages transaction={transaction} />
-            {transaction.isIbc && (
-              <Tag variant="honeydew-dark" size="sm">
-                IBC
-              </Tag>
-            )}
-          </Flex>
-        </TableRow>
-
-        <TableRow>
-          <ExplorerLink
-            value={transaction.sender}
-            type={getAddressType(transaction.sender)}
-            showCopyOnHover
-          />
-        </TableRow>
-
-        <TableRow>
-          {isAccordion && (
-            <CustomIcon
-              name={isOpen ? "chevron-up" : "chevron-down"}
-              color="pebble.600"
-            />
-          )}
-        </TableRow>
-      </Grid>
-
-      {isAccordion && (
-        <Grid w="full" py={4} hidden={!isOpen}>
-          {transaction.messages.map((msg, index) => (
-            <AccordionTx
-              key={index.toString() + msg.type}
-              message={msg}
-              allowFurtherAction={false}
-              accordionSpacing="211px"
-            />
-          ))}
-        </Grid>
-      )}
-    </Box>
-  );
-};
diff --git a/src/lib/pages/block-details/components/table/index.tsx b/src/lib/pages/block-details/components/table/index.tsx
deleted file mode 100644
index f24676a7e..000000000
--- a/src/lib/pages/block-details/components/table/index.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { TableContainer } from "@chakra-ui/react";
-import type { ChangeEvent } from "react";
-
-import { Loading } from "lib/components/Loading";
-import { Pagination } from "lib/components/pagination";
-import { usePaginator } from "lib/components/pagination/usePaginator";
-import { EmptyState } from "lib/components/state";
-import { TableTitle } from "lib/components/table";
-import {
-  useTxsByBlockHeightPagination,
-  useTxsCountByBlockHeight,
-} from "lib/services/txService";
-
-import { BlockTxTableHeader } from "./BlockTxTableHeader";
-import { BlockTxTableRow } from "./BlockTxTableRow";
-
-interface BlockTransactionTableProps {
-  height: number;
-}
-
-const TEMPLATE_COLUMNS = "150px 45px minmax(400px,1fr) 150px 60px";
-const scrollComponentId = "block_tx_table_header";
-
-export const BlockTransactionTable = ({
-  height,
-}: BlockTransactionTableProps) => {
-  const { data: blockTxCount } = useTxsCountByBlockHeight(height);
-  const {
-    pagesQuantity,
-    currentPage,
-    setCurrentPage,
-    pageSize,
-    setPageSize,
-    offset,
-  } = usePaginator({
-    total: blockTxCount,
-    initialState: {
-      pageSize: 10,
-      currentPage: 1,
-      isDisabled: false,
-    },
-  });
-
-  const { data: blockTxs, isLoading: blockTxLoading } =
-    useTxsByBlockHeightPagination(height, pageSize, offset);
-
-  const onPageChange = (nextPage: number) => {
-    setCurrentPage(nextPage);
-  };
-
-  const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    const size = Number(e.target.value);
-    setPageSize(size);
-    setCurrentPage(1);
-  };
-
-  if (blockTxLoading) return <Loading />;
-  if (!blockTxs || !blockTxCount)
-    return (
-      <>
-        <TableTitle title="Transactions" count={0} />
-        <EmptyState
-          imageVariant="empty"
-          message="There are no submitted transactions in this block"
-          withBorder
-        />
-      </>
-    );
-
-  return (
-    <>
-      <TableTitle title="Transactions" count={blockTxCount} />
-      <TableContainer>
-        <BlockTxTableHeader
-          templateColumns={TEMPLATE_COLUMNS}
-          scrollComponentId={scrollComponentId}
-        />
-        {blockTxs.map((tx, idx) => (
-          <BlockTxTableRow
-            key={`block-tx-${idx.toString()}-${tx.hash}`}
-            templateColumns={TEMPLATE_COLUMNS}
-            transaction={tx}
-          />
-        ))}
-      </TableContainer>
-      {blockTxCount > 10 && (
-        <Pagination
-          currentPage={currentPage}
-          pagesQuantity={pagesQuantity}
-          offset={offset}
-          totalData={blockTxCount}
-          scrollComponentId={scrollComponentId}
-          pageSize={pageSize}
-          onPageChange={onPageChange}
-          onPageSizeChange={onPageSizeChange}
-        />
-      )}
-    </>
-  );
-};
diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx
index b6132185b..5b88037fd 100644
--- a/src/lib/pages/block-details/index.tsx
+++ b/src/lib/pages/block-details/index.tsx
@@ -9,11 +9,7 @@ import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { useBlockDetailsQuery } from "lib/services/blockService";
 import { getFirstQueryParam } from "lib/utils";
 
-import {
-  BlockDetailsTop,
-  BlockInfo,
-  BlockTransactionTable,
-} from "./components";
+import { BlockDetailsTop, BlockInfo, BlockTxsTable } from "./components";
 
 const BlockDetail = () => {
   const router = useRouter();
@@ -35,7 +31,7 @@ const BlockDetail = () => {
         <>
           <BlockDetailsTop blockData={blockData} />
           <BlockInfo blockData={blockData} />
-          <BlockTransactionTable height={Number(heightParam)} />
+          <BlockTxsTable height={Number(heightParam)} />
         </>
       ) : (
         <EmptyState
diff --git a/src/lib/query/tx.ts b/src/lib/query/tx.ts
index 64c632c40..bb9bbcca6 100644
--- a/src/lib/query/tx.ts
+++ b/src/lib/query/tx.ts
@@ -96,12 +96,16 @@ export const getBlockTransactionsByHeightQueryDocument = graphql(`
       where: { block_height: { _eq: $height } }
       order_by: { id: asc }
     ) {
-      hash
-      success
-      messages
+      block {
+        height
+        timestamp
+      }
       account {
         address
       }
+      hash
+      success
+      messages
       is_clear_admin
       is_execute
       is_ibc
diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index a24e0dbd5..1e5fe269f 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -16,14 +16,7 @@ import {
   getBlockTransactionsByHeightQueryDocument,
 } from "lib/query";
 import { createQueryFnWithTimeout } from "lib/query-utils";
-import type {
-  Addr,
-  Option,
-  Transaction,
-  TxFilters,
-  BlockTransaction,
-  Message,
-} from "lib/types";
+import type { Addr, Option, Transaction, TxFilters, Message } from "lib/types";
 import { MsgFurtherAction } from "lib/types";
 import {
   getActionMsgType,
@@ -260,7 +253,7 @@ export const useTxsByBlockHeightPagination = (
   height: number,
   limit: number,
   offset: number
-): UseQueryResult<BlockTransaction[]> => {
+): UseQueryResult<Transaction[]> => {
   const { indexerGraphClient } = useCelatoneApp();
 
   const queryFn = useCallback(
@@ -272,22 +265,26 @@ export const useTxsByBlockHeightPagination = (
           height,
         })
         .then(({ transactions }) =>
-          transactions.map<BlockTransaction>((tx) => ({
-            hash: parseTxHash(tx.hash),
-            messages: snakeToCamel(tx.messages) as Message[],
-            sender: tx.account.address as Addr,
-            success: tx.success,
+          transactions.map((transaction) => ({
+            hash: parseTxHash(transaction.hash),
+            messages: snakeToCamel(transaction.messages),
+            sender: transaction.account.address as Addr,
+            isSigner: false,
+            height,
+            created: parseDate(transaction.block.timestamp),
+            success: transaction.success,
             actionMsgType: getActionMsgType([
-              tx.is_execute,
-              tx.is_instantiate,
-              tx.is_send,
-              tx.is_store_code,
-              tx.is_migrate,
-              tx.is_update_admin,
-              tx.is_clear_admin,
+              transaction.is_execute,
+              transaction.is_instantiate,
+              transaction.is_send,
+              transaction.is_store_code,
+              transaction.is_migrate,
+              transaction.is_update_admin,
+              transaction.is_clear_admin,
             ]),
-            isIbc: tx.is_ibc,
-            isInstantiate: tx.is_instantiate,
+            furtherAction: MsgFurtherAction.NONE,
+            isIbc: transaction.is_ibc,
+            isInstantiate: transaction.is_instantiate,
           }))
         ),
     [height, limit, offset, indexerGraphClient]
diff --git a/src/lib/types/tx/transaction.ts b/src/lib/types/tx/transaction.ts
index 25de2f925..22fc05a6c 100644
--- a/src/lib/types/tx/transaction.ts
+++ b/src/lib/types/tx/transaction.ts
@@ -41,17 +41,6 @@ export interface Transaction {
   isInstantiate: boolean;
 }
 
-export type BlockTransaction = Pick<
-  Transaction,
-  | "hash"
-  | "messages"
-  | "success"
-  | "sender"
-  | "actionMsgType"
-  | "isIbc"
-  | "isInstantiate"
->;
-
 export interface TxFilters {
   isExecute: boolean;
   isInstantiate: boolean;

From 6b8ba3ee5dc181983db05d1526308aaafeb77006 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 19 May 2023 14:18:33 +0700
Subject: [PATCH 129/354] fix: arrow direction

---
 .../components/table/transactions/TransactionsTableRow.tsx   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/table/transactions/TransactionsTableRow.tsx b/src/lib/components/table/transactions/TransactionsTableRow.tsx
index 61d988b3d..14d34f86c 100644
--- a/src/lib/components/table/transactions/TransactionsTableRow.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableRow.tsx
@@ -42,8 +42,9 @@ export const TransactionsTableRow = ({
         <TableRow>
           {isAccordion && (
             <CustomIcon
-              name={isOpen ? "chevron-up" : "chevron-down"}
-              color="pebble.600"
+              name="chevron-down"
+              transform={isOpen ? "rotate(0)" : "rotate(-90deg)"}
+              transition="all .25s ease-in-out"
             />
           )}
         </TableRow>

From 062bb249521e8b47bd8e7ae638d5ff4337161600 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 19 May 2023 14:30:02 +0700
Subject: [PATCH 130/354] fix: accordion alignment and message count badge

---
 src/lib/components/table/AccordionTx.tsx      |  2 +-
 .../table/transactions/TransactionsTable.tsx  |  2 +-
 .../transactions/TransactionsTableRow.tsx     | 29 ++++++++++++++-----
 src/lib/styles/theme/components/badge.ts      |  4 +++
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/table/AccordionTx.tsx b/src/lib/components/table/AccordionTx.tsx
index e7ff5ffe5..034cae0da 100644
--- a/src/lib/components/table/AccordionTx.tsx
+++ b/src/lib/components/table/AccordionTx.tsx
@@ -38,7 +38,7 @@ export const AccordionTx = ({
   message,
   allowFurtherAction,
   isSigner = false,
-  accordionSpacing = "206px",
+  accordionSpacing = "260px",
 }: AccordionTxProps) => {
   const [showButton, setShowButton] = useState(false);
   return (
diff --git a/src/lib/components/table/transactions/TransactionsTable.tsx b/src/lib/components/table/transactions/TransactionsTable.tsx
index 3db3e37ec..a9a2d030f 100644
--- a/src/lib/components/table/transactions/TransactionsTable.tsx
+++ b/src/lib/components/table/transactions/TransactionsTable.tsx
@@ -25,7 +25,7 @@ export const TransactionsTable = ({
   if (isLoading) return <Loading />;
   if (!transactions?.length) return emptyState;
 
-  const templateColumns = `30px 150px 40px minmax(360px, 1fr) ${
+  const templateColumns = `25px 180px 40px minmax(360px, 1fr) ${
     showRelations ? "100px " : ""
   }max(160px) ${showTimestamp ? "max(220px) " : ""}${
     showAction ? "100px " : ""
diff --git a/src/lib/components/table/transactions/TransactionsTableRow.tsx b/src/lib/components/table/transactions/TransactionsTableRow.tsx
index 14d34f86c..789b3ed6a 100644
--- a/src/lib/components/table/transactions/TransactionsTableRow.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableRow.tsx
@@ -1,4 +1,12 @@
-import { Flex, Text, Grid, useDisclosure, Tag, Box } from "@chakra-ui/react";
+import {
+  Flex,
+  Text,
+  Grid,
+  useDisclosure,
+  Tag,
+  Box,
+  Badge,
+} from "@chakra-ui/react";
 
 import { AccordionTx } from "../AccordionTx";
 import { TableRow } from "../tableComponents";
@@ -39,7 +47,7 @@ export const TransactionsTableRow = ({
         transition="all .25s ease-in-out"
         cursor={isAccordion ? "pointer" : "default"}
       >
-        <TableRow>
+        <TableRow pl={2}>
           {isAccordion && (
             <CustomIcon
               name="chevron-down"
@@ -49,11 +57,18 @@ export const TransactionsTableRow = ({
           )}
         </TableRow>
         <TableRow>
-          <ExplorerLink
-            value={transaction.hash.toLocaleUpperCase()}
-            type="tx_hash"
-            showCopyOnHover
-          />
+          <>
+            <ExplorerLink
+              value={transaction.hash.toLocaleUpperCase()}
+              type="tx_hash"
+              showCopyOnHover
+            />
+            {transaction.messages.length > 1 && (
+              <Badge variant="lilac" ml="6px">
+                {transaction.messages.length}
+              </Badge>
+            )}
+          </>
         </TableRow>
         <TableRow>
           {transaction.success ? (
diff --git a/src/lib/styles/theme/components/badge.ts b/src/lib/styles/theme/components/badge.ts
index 6e4626133..39cc8433e 100644
--- a/src/lib/styles/theme/components/badge.ts
+++ b/src/lib/styles/theme/components/badge.ts
@@ -17,6 +17,10 @@ export const Badge: ComponentStyleConfig = {
       background: "pebble.700",
       color: "text.main",
     },
+    lilac: {
+      background: "lilac.main",
+      color: "background.main",
+    },
   },
   defaultProps: {
     variant: "gray",

From 113d1b5b76bcc45c16109cc42b11d8eee1c5988d Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 19 May 2023 14:40:21 +0700
Subject: [PATCH 131/354] fix: change pooltxs template column

---
 .../components/pool-details/tables/pool-txs/PoolTxsMsg.tsx      | 2 +-
 .../components/pool-details/tables/pool-txs/PoolTxsTable.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
index ded41f322..c2d8798b2 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -62,7 +62,7 @@ export const PoolTxsMsg = ({
         transition="all .25s ease-in-out"
         cursor="pointer"
       >
-        <TableNoBorderRow>
+        <TableNoBorderRow pl={2}>
           {transaction.success && message && (
             <CustomIcon
               name="chevron-down"
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
index 5100bbd72..e61028902 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
@@ -32,7 +32,7 @@ export const PoolTxsTable = ({
   if (!transactions?.length) return emptyState;
 
   const templateColumns =
-    "30px 180px 40px minmax(360px, 1fr) max(150px) max(220px)";
+    "25px 180px 40px minmax(360px, 1fr) max(160px) max(220px)";
 
   return (
     <TableContainer>

From 0517943885263c8bfdc6296b459e6d084bca2b79 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 19 May 2023 18:04:57 +0700
Subject: [PATCH 132/354] docs: update changelog for v1.0.5

---
 CHANGELOG.md | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0a4755ed0..58fcc4306 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+### Improvements
+
+### Bug fixes
+
+## v1.0.5
+
+### 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
 
@@ -93,7 +102,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
-- [#298](https://github.com/alleslabs/celatone-frontend/pull/298) Show deposit/voting period from gov params and add minimum required alert
 - [#309](https://github.com/alleslabs/celatone-frontend/pull/309) Add public account name and description in account detail page
 - [#289](https://github.com/alleslabs/celatone-frontend/pull/289) Add public accounts to public projects
 - [#308](https://github.com/alleslabs/celatone-frontend/pull/308) Adjust view more button to full width and fix empty state layout in contract history

From 5e0256f3b227528c99859be578aa0a11c55c78f7 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 19 May 2023 18:16:03 +0700
Subject: [PATCH 133/354] fix: changelog

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a3bb07b8..f862a2dce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -41,6 +41,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#347](https://github.com/alleslabs/celatone-frontend/pull/347) Move tx table accordion arrow to the front and refactor block txs table
+
 ### Bug fixes
 
 ## v1.0.5
@@ -53,7 +55,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
-- [#347](https://github.com/alleslabs/celatone-frontend/pull/347) Move tx table accordion arrow to the front and refactor block txs table
 - [#339](https://github.com/alleslabs/celatone-frontend/pull/339) Update all routes to plural form, and patch all codes
 - [#334](https://github.com/alleslabs/celatone-frontend/pull/334) Change `osmo-test-4` to `osmo-test-5`, fix tx service when accountId is undefined
 - [#311](https://github.com/alleslabs/celatone-frontend/pull/311) Refine css styling

From edffa0b0735d9ef951d1d0f04f0cc037f2d6d470 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 22 May 2023 01:35:40 +0700
Subject: [PATCH 134/354] fix: comment

---
 src/lib/services/txService.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index 1e5fe269f..65fb7d983 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -86,7 +86,7 @@ export const useTxsByAddressPagination = (
         offset,
         pageSize,
       })
-      .then(({ account_transactions }) =>
+      .then<Transaction[]>(({ account_transactions }) =>
         account_transactions.map<Transaction>((transaction) => ({
           hash: parseTxHash(transaction.transaction.hash),
           messages: snakeToCamel(transaction.transaction.messages) as Message[],
@@ -204,10 +204,10 @@ export const useTxs = (
           offset,
           pageSize,
         })
-        .then(({ transactions }) =>
-          transactions.map((transaction) => ({
+        .then<Transaction[]>(({ transactions }) =>
+          transactions.map<Transaction>((transaction) => ({
             hash: parseTxHash(transaction.hash),
-            messages: snakeToCamel(transaction.messages),
+            messages: snakeToCamel(transaction.messages) as Message[],
             sender: transaction.account.address as Addr,
             isSigner: false,
             height: transaction.block.height,
@@ -264,10 +264,10 @@ export const useTxsByBlockHeightPagination = (
           offset,
           height,
         })
-        .then(({ transactions }) =>
-          transactions.map((transaction) => ({
+        .then<Transaction[]>(({ transactions }) =>
+          transactions.map<Transaction>((transaction) => ({
             hash: parseTxHash(transaction.hash),
-            messages: snakeToCamel(transaction.messages),
+            messages: snakeToCamel(transaction.messages) as Message[],
             sender: transaction.account.address as Addr,
             isSigner: false,
             height,

From 06012544b1078c2f878ba3dbc9f2ce8381de1646 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Mon, 22 May 2023 16:39:41 +0700
Subject: [PATCH 135/354] feat(components): refactor color system

---
 src/lib/app-fns/tx/submitProposal.tsx         |   2 +-
 src/lib/app-fns/tx/upload.tsx                 |   2 +-
 src/lib/components/AccordionStepperItem.tsx   |   4 +-
 src/lib/components/AssignMe.tsx               |   2 +-
 src/lib/components/ButtonCard.tsx             |   8 +-
 src/lib/components/ConnectWalletAlert.tsx     |   4 +-
 src/lib/components/ContractSelectSection.tsx  |   2 +-
 src/lib/components/CopyLink.tsx               |   8 +-
 src/lib/components/CustomTab.tsx              |   4 +-
 src/lib/components/DotSeparator.tsx           |   2 +-
 src/lib/components/DotSeperator.tsx           |   2 +-
 src/lib/components/Expedited.tsx              |   4 +-
 src/lib/components/ExplorerLink.tsx           |   6 +-
 src/lib/components/InputWithIcon.tsx          |   2 +-
 src/lib/components/ListSelection.tsx          |  14 +-
 src/lib/components/Loading.tsx                |   2 +-
 src/lib/components/PermissionChip.tsx         |   2 +-
 src/lib/components/PublicDescription.tsx      |   2 +-
 src/lib/components/StickySidebar.tsx          |  14 +-
 src/lib/components/TagSelection.tsx           |  12 +-
 src/lib/components/TokenCard.tsx              |   4 +-
 src/lib/components/TxFilterSelection.tsx      |  10 +-
 .../components/ViewPermissionAddresses.tsx    |   2 +-
 src/lib/components/Wallet.tsx                 |   2 +-
 src/lib/components/action-msg/SingleMsg.tsx   |   2 +-
 src/lib/components/button/AdminButton.tsx     |   8 +-
 src/lib/components/button/BackButton.tsx      |   2 +-
 .../components/button/CustomIconButton.tsx    |   2 +-
 .../components/button/InstantiateButton.tsx   |   2 +-
 .../components/button/NewProposalButton.tsx   |   6 +-
 src/lib/components/button/ShowMoreButton.tsx  |   4 +-
 src/lib/components/copy/Copier.tsx            |   2 +-
 src/lib/components/copy/CopyButton.tsx        |   2 +-
 src/lib/components/dropzone/index.tsx         |   8 +-
 src/lib/components/filter/FilterComponents.ts |   2 +-
 .../components/filter/FilterDropdownItem.tsx  |   4 +-
 src/lib/components/filter/FilterInput.tsx     |   4 +-
 src/lib/components/forms/SelectInput.tsx      |  16 +-
 src/lib/components/icon/UploadIcon.tsx        |   4 +-
 src/lib/components/json/JsonInput.tsx         |   6 +-
 src/lib/components/json/JsonReadOnly.tsx      |   4 +-
 src/lib/components/json/ViewFullMsgButton.tsx |   4 +-
 src/lib/components/links/GitHubLink.tsx       |   4 +-
 src/lib/components/modal/ActionModal.tsx      |   6 +-
 src/lib/components/modal/CodeSnippet.tsx      |   6 +-
 src/lib/components/modal/NoMobile.tsx         |   2 +-
 src/lib/components/modal/RedoModal.tsx        |  10 +-
 .../modal/UnsupportedTokensModal.tsx          |   8 +-
 .../modal/code/CodeDetailsTemplate.tsx        |   2 +-
 src/lib/components/modal/code/SaveNewCode.tsx |   6 +-
 .../modal/contract/AddToOtherList.tsx         |   2 +-
 .../components/modal/contract/ClearAdmin.tsx  |   2 +-
 .../contract/ContractDetailsTemplate.tsx      |   2 +-
 .../modal/contract/SaveNewContract.tsx        |   6 +-
 .../components/modal/list/CreateNewList.tsx   |   2 +-
 .../components/modal/list/EditListName.tsx    |   2 +-
 src/lib/components/pagination/index.tsx       |   2 +-
 src/lib/components/select-code/CodeSelect.tsx |   4 +-
 .../select-code/CodeSelectDrawerButton.tsx    |   6 +-
 .../select-contract/ContractListCard.tsx      |   6 +-
 .../select-contract/SelectContractAdmin.tsx   |   2 +-
 .../SelectContractInstantiator.tsx            |  10 +-
 src/lib/components/state/EmptyState.tsx       |   2 +-
 src/lib/components/state/InvalidState.tsx     |   2 +-
 src/lib/components/state/ZeroState.tsx        |   4 +-
 src/lib/components/stepper/StepperItem.tsx    |   4 +-
 src/lib/components/table/AccordionTx.tsx      |   2 +-
 src/lib/components/table/EditableCell.tsx     |   6 +-
 src/lib/components/table/TableTitle.tsx       |   2 +-
 .../components/table/codes/CodesTableRow.tsx  |   2 +-
 .../table/codes/CodesTableWithWallet.tsx      |   2 +-
 .../table/contracts/ContractsTableRow.tsx     |   2 +-
 .../table/contracts/ContractsTableRowCTA.tsx  |  12 +-
 .../components/table/contracts/EditTags.tsx   |   9 +-
 .../components/table/contracts/TagsCell.tsx   |   2 +-
 .../components/table/proposals/StatusChip.tsx |   6 +-
 src/lib/components/table/tableComponents.ts   |   4 +-
 .../table/transactions/RelationChip.tsx       |   4 +-
 .../transactions/TransactionsTableRow.tsx     |   6 +-
 .../TransactionsTableWithWallet.tsx           |   2 +-
 src/lib/components/tx/TxReceiptRender.tsx     |   2 +-
 src/lib/components/tx/modal/ButtonSection.tsx |   6 +-
 src/lib/components/tx/modal/index.tsx         |   2 +-
 .../upload/components/UploadCard.tsx          |   4 +-
 src/lib/layout/Footer.tsx                     |   8 +-
 src/lib/layout/Header.tsx                     |  10 +-
 src/lib/layout/Searchbar.tsx                  |  10 +-
 src/lib/layout/SubHeader.tsx                  |  12 +-
 src/lib/layout/index.tsx                      |   4 +-
 src/lib/layout/navbar/Collapse.tsx            |  12 +-
 src/lib/layout/navbar/Expand.tsx              |  16 +-
 .../components/ErrorFetching.tsx              |   7 +-
 .../delegations/NonRedelegatableSection.tsx   |   4 +-
 .../components/delegations/RadioCard.tsx      |   2 +-
 .../delegations/RedelegationsSection.tsx      |   2 +-
 .../components/delegations/TotalCard.tsx      |   2 +-
 .../tables/bonded/BondedTableRow.tsx          |   2 +-
 .../redelegation/RedelegationTableRow.tsx     |   4 +-
 src/lib/pages/account-details/index.tsx       |  12 +-
 .../components/BlockDetailsTop.tsx            |   6 +-
 .../components/table/NoContracts.tsx          |   2 +-
 src/lib/pages/code-details/index.tsx          |   4 +-
 src/lib/pages/codes/index.tsx                 |   2 +-
 .../components/CommandSection.tsx             |   4 +-
 .../components/ContractTop.tsx                |   8 +-
 .../components/InstantiateInfo.tsx            |   2 +-
 .../contract-details/components/JsonInfo.tsx  |   6 +-
 .../contract-description/UserContractDesc.tsx |   6 +-
 .../components/contract-description/index.tsx |   2 +-
 src/lib/pages/contract-details/index.tsx      |   2 +-
 src/lib/pages/contract-list/slug.tsx          |   6 +-
 src/lib/pages/deploy/index.tsx                |   4 +-
 src/lib/pages/execute/index.tsx               |   2 +-
 src/lib/pages/faucet/index.tsx                |   2 +-
 .../pages/home/components/PastTransaction.tsx |   4 +-
 src/lib/pages/home/components/QuickMenu.tsx   |  16 +-
 .../home/components/RecentActivities.tsx      |  12 +-
 src/lib/pages/instantiate/completed.tsx       |   2 +-
 .../pages/instantiate/component/Footer.tsx    |   2 +-
 src/lib/pages/instantiate/instantiate.tsx     |   2 +-
 src/lib/pages/network-overview/index.tsx      |  12 +-
 src/lib/pages/not-found/index.tsx             |   2 +-
 src/lib/pages/past-txs/index.tsx              |   2 +-
 .../pages/proposal/components/AssetBox.tsx    |   4 +-
 src/lib/pages/proposal/components/Footer.tsx  |   2 +-
 src/lib/pages/proposal/utils/getAlert.tsx     |   4 +-
 src/lib/pages/proposal/whitelist/index.tsx    |  10 +-
 .../proposals/components/ProposalTextCell.tsx |   2 +-
 .../components/ProposalTypeFilter.tsx         |   2 +-
 .../proposals/table/ProposalTableHeader.tsx   |   2 +-
 .../proposals/table/ProposalTableRow.tsx      |   6 +-
 .../components/BookmarkButton.tsx             |   4 +-
 .../components/DetailHeader.tsx               |   2 +-
 .../components/PublicProjectCard.tsx          |   4 +-
 .../table/account/PublicProjectAccountRow.tsx |   2 +-
 .../table/code/PublicProjectCodeRow.tsx       |   2 +-
 .../contract/PublicProjectContractRow.tsx     |   8 +-
 src/lib/pages/public-project/slug.tsx         |   2 +-
 src/lib/pages/query/index.tsx                 |   2 +-
 .../pages/tx-details/components/TxHeader.tsx  |   2 +-
 .../components/tx-message/EventBox.tsx        |  15 +-
 .../components/tx-message/TxMsgExpand.tsx     |  10 +-
 .../tx-message/msg-receipts/index.tsx         |   2 +-
 .../tx-message/msg-receipts/renderUtils.tsx   |   2 +-
 src/lib/styles/theme/colors.ts                |  23 ++-
 src/lib/styles/theme/components/alert.ts      |  12 +-
 src/lib/styles/theme/components/badge.ts      |   8 +-
 src/lib/styles/theme/components/button.ts     | 138 +++++++++---------
 src/lib/styles/theme/components/drawer.ts     |   2 +-
 src/lib/styles/theme/components/form.ts       |   2 +-
 src/lib/styles/theme/components/input.ts      |  10 +-
 src/lib/styles/theme/components/link.ts       |   2 +-
 src/lib/styles/theme/components/menu.ts       |   8 +-
 src/lib/styles/theme/components/modal.ts      |   2 +-
 src/lib/styles/theme/components/radio.ts      |  14 +-
 src/lib/styles/theme/components/select.ts     |   6 +-
 src/lib/styles/theme/components/spinner.ts    |   4 +-
 src/lib/styles/theme/components/switch.ts     |   2 +-
 src/lib/styles/theme/components/tag.ts        |  26 ++--
 src/lib/styles/theme/components/textarea.ts   |  10 +-
 src/lib/styles/theme/components/tooltip.ts    |   4 +-
 src/lib/utils/codePermission.ts               |   2 +-
 162 files changed, 463 insertions(+), 495 deletions(-)

diff --git a/src/lib/app-fns/tx/submitProposal.tsx b/src/lib/app-fns/tx/submitProposal.tsx
index 95c14a0d8..96ef893c1 100644
--- a/src/lib/app-fns/tx/submitProposal.tsx
+++ b/src/lib/app-fns/tx/submitProposal.tsx
@@ -89,7 +89,7 @@ export const submitProposalTx = ({
           headerIcon: (
             <CustomIcon
               name="submit-proposal-solid"
-              color="pebble.600"
+              color="gray.600"
               boxSize="5"
             />
           ),
diff --git a/src/lib/app-fns/tx/upload.tsx b/src/lib/app-fns/tx/upload.tsx
index 423d72831..5f925a9af 100644
--- a/src/lib/app-fns/tx/upload.tsx
+++ b/src/lib/app-fns/tx/upload.tsx
@@ -95,7 +95,7 @@ export const uploadContractTx = ({
             </>
           ),
           headerIcon: (
-            <CustomIcon name="upload-cloud" boxSize="5" color="pebble.600" />
+            <CustomIcon name="upload-cloud" boxSize="5" color="gray.600" />
           ),
         },
         actionVariant: isMigrate ? "upload-migrate" : "upload",
diff --git a/src/lib/components/AccordionStepperItem.tsx b/src/lib/components/AccordionStepperItem.tsx
index 84ee343d1..ef648cc38 100644
--- a/src/lib/components/AccordionStepperItem.tsx
+++ b/src/lib/components/AccordionStepperItem.tsx
@@ -8,7 +8,7 @@ export const AccordionStepperItem = () => (
       h="31px"
       right="45%"
       bottom="9px"
-      background="pebble.600"
+      background="gray.600"
       position="absolute"
       visibility="hidden"
       zIndex={0}
@@ -18,7 +18,7 @@ export const AccordionStepperItem = () => (
       borderRadius="full"
       h="10px"
       w="10px"
-      borderColor="pebble.600"
+      borderColor="gray.600"
       borderWidth="1px"
       position="relative"
       zIndex={1}
diff --git a/src/lib/components/AssignMe.tsx b/src/lib/components/AssignMe.tsx
index f1bedab86..f452b8fde 100644
--- a/src/lib/components/AssignMe.tsx
+++ b/src/lib/components/AssignMe.tsx
@@ -14,7 +14,7 @@ export const AssignMe = ({ onClick, isDisable = false }: AssginMeProps) => {
     <Text
       textAlign="right"
       mr={3}
-      color={enabled ? "honeydew.main" : "pebble.500"}
+      color={enabled ? "accent.main" : "gray.500"}
       fontWeight="600"
       variant="body3"
       cursor={enabled ? "pointer" : "not-allowed"}
diff --git a/src/lib/components/ButtonCard.tsx b/src/lib/components/ButtonCard.tsx
index 85d5503ec..6237ee595 100644
--- a/src/lib/components/ButtonCard.tsx
+++ b/src/lib/components/ButtonCard.tsx
@@ -24,14 +24,14 @@ export const ButtonCard = ({
     align="center"
     justify="space-between"
     onClick={!disabled ? onClick : undefined}
-    bgColor="pebble.800"
+    bgColor="gray.800"
     borderRadius="8px"
     w="100%"
     cursor="pointer"
-    _hover={{ bgColor: "pebble.700" }}
+    _hover={{ bgColor: "gray.700" }}
     transition="all .25s ease-in-out"
     _disabled={{
-      bgColor: "pebble.900",
+      bgColor: "gray.900",
       cursor: "not-allowed",
     }}
     {...componentProps}
@@ -52,6 +52,6 @@ export const ButtonCard = ({
         description
       )}
     </Stack>
-    <CustomIcon name="chevron-right" color="pebble.600" />
+    <CustomIcon name="chevron-right" color="gray.600" />
   </Flex>
 );
diff --git a/src/lib/components/ConnectWalletAlert.tsx b/src/lib/components/ConnectWalletAlert.tsx
index 57eacf0a5..a4e99b591 100644
--- a/src/lib/components/ConnectWalletAlert.tsx
+++ b/src/lib/components/ConnectWalletAlert.tsx
@@ -35,7 +35,7 @@ export const ConnectWalletAlert = ({
   return !address ? (
     <Alert
       {...alertProps}
-      variant="honeydew"
+      variant="accent"
       alignItems="center"
       justifyContent="space-between"
       py="12px"
@@ -47,7 +47,7 @@ export const ConnectWalletAlert = ({
           <AlertDescription>{subtitle}</AlertDescription>
         </Box>
       </Flex>
-      <Button size="sm" variant="ghost-info" gap={2} onClick={onClickConnect}>
+      <Button size="sm" variant="ghost-accent" gap={2} onClick={onClickConnect}>
         <CustomIcon name="connect" /> Connect Wallet
       </Button>
     </Alert>
diff --git a/src/lib/components/ContractSelectSection.tsx b/src/lib/components/ContractSelectSection.tsx
index 58766bfef..7a7b0b999 100644
--- a/src/lib/components/ContractSelectSection.tsx
+++ b/src/lib/components/ContractSelectSection.tsx
@@ -196,7 +196,7 @@ export const ContractSelectSection = observer(
       <Flex
         mb={style.container}
         borderWidth="thin"
-        borderColor="pebble.800"
+        borderColor="gray.800"
         p="16px"
         borderRadius="8px"
         fontSize="12px"
diff --git a/src/lib/components/CopyLink.tsx b/src/lib/components/CopyLink.tsx
index d2195c9fe..6c56d7d30 100644
--- a/src/lib/components/CopyLink.tsx
+++ b/src/lib/components/CopyLink.tsx
@@ -31,8 +31,8 @@ export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
         }}
         _hover={{
           textDecoration: "underline",
-          textDecorationColor: "lilac.light",
-          "& > p": { color: "lilac.light" },
+          textDecorationColor: "secondary.light",
+          "& > p": { color: "secondary.light" },
         }}
         cursor="pointer"
         onMouseEnter={() => setIsHover(true)}
@@ -40,7 +40,7 @@ export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
       >
         <Text
           variant="body2"
-          color="lilac.main"
+          color="secondary.main"
           transition="all .25s ease-in-out"
         >
           {value === address ? `${value} (Me)` : value}
@@ -50,7 +50,7 @@ export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
           marginLeft={2}
           name="copy"
           boxSize={3}
-          color="pebble.600"
+          color="gray.600"
         />
       </Flex>
     </Tooltip>
diff --git a/src/lib/components/CustomTab.tsx b/src/lib/components/CustomTab.tsx
index 383fdbfea..d3b770ff3 100644
--- a/src/lib/components/CustomTab.tsx
+++ b/src/lib/components/CustomTab.tsx
@@ -23,7 +23,7 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
       mb={0}
       sx={{
         "&[aria-selected=true]": {
-          color: "violet.light",
+          color: "primary.light",
         },
       }}
       _active={{
@@ -34,7 +34,7 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
       {tabProps.children}
 
       {count !== undefined && (
-        <Badge variant={isSelected ? "violet" : "gray"} ml="6px">
+        <Badge variant={isSelected ? "primary" : "gray"} ml="6px">
           {count}
         </Badge>
       )}
diff --git a/src/lib/components/DotSeparator.tsx b/src/lib/components/DotSeparator.tsx
index 73441a265..1e6778911 100644
--- a/src/lib/components/DotSeparator.tsx
+++ b/src/lib/components/DotSeparator.tsx
@@ -1,5 +1,5 @@
 import { Box } from "@chakra-ui/react";
 
 export const DotSeparator = () => (
-  <Box bg="lilac.darker" borderRadius="50%" w="4px" h="4px" />
+  <Box bg="secondary.darker" borderRadius="50%" w="4px" h="4px" />
 );
diff --git a/src/lib/components/DotSeperator.tsx b/src/lib/components/DotSeperator.tsx
index 73441a265..1e6778911 100644
--- a/src/lib/components/DotSeperator.tsx
+++ b/src/lib/components/DotSeperator.tsx
@@ -1,5 +1,5 @@
 import { Box } from "@chakra-ui/react";
 
 export const DotSeparator = () => (
-  <Box bg="lilac.darker" borderRadius="50%" w="4px" h="4px" />
+  <Box bg="secondary.darker" borderRadius="50%" w="4px" h="4px" />
 );
diff --git a/src/lib/components/Expedited.tsx b/src/lib/components/Expedited.tsx
index 9dac00cd2..50acc297c 100644
--- a/src/lib/components/Expedited.tsx
+++ b/src/lib/components/Expedited.tsx
@@ -25,11 +25,11 @@ export const Expedited = ({ isActiveExpedited }: ExpeditedProps) => (
         name="expedited"
         boxSize="4"
         ml="0"
-        color={isActiveExpedited ? "honeydew.main" : "pebble.400"}
+        color={isActiveExpedited ? "accent.main" : "gray.400"}
       />
       <Text
         variant="body3"
-        color={isActiveExpedited ? "honeydew.main" : "text.dark"}
+        color={isActiveExpedited ? "accent.main" : "text.dark"}
       >
         Expedited
       </Text>
diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
index 64064b1e4..240de5a3b 100644
--- a/src/lib/components/ExplorerLink.tsx
+++ b/src/lib/components/ExplorerLink.tsx
@@ -111,9 +111,9 @@ const LinkRender = ({
   const textElement = (
     <Text
       variant={textVariant}
-      color="lilac.main"
+      color="secondary.main"
       transition="all .25s ease-in-out"
-      _hover={{ color: "lilac.light" }}
+      _hover={{ color: "secondary.light" }}
       className={isEllipsis ? "ellipsis" : undefined}
       maxW={maxWidth}
       pointerEvents={hrefLink ? "auto" : "none"}
@@ -179,7 +179,7 @@ export const ExplorerLink = ({
       _hover={{
         ...(!readOnly && {
           textDecoration: "underline",
-          textDecorationColor: "lilac.light",
+          textDecorationColor: "secondary.light",
         }),
       }}
       {...componentProps}
diff --git a/src/lib/components/InputWithIcon.tsx b/src/lib/components/InputWithIcon.tsx
index 1cf789a65..13b3337d1 100644
--- a/src/lib/components/InputWithIcon.tsx
+++ b/src/lib/components/InputWithIcon.tsx
@@ -30,7 +30,7 @@ const InputWithIcon = ({
       onClick={action ? () => AmpTrack(AmpEvent.USE_SEARCH_INPUT) : undefined}
     />
     <InputRightElement h="56px" alignItems="center" mr="1">
-      <CustomIcon name="search" color="pebble.600" />
+      <CustomIcon name="search" color="gray.600" />
     </InputRightElement>
   </InputGroup>
 );
diff --git a/src/lib/components/ListSelection.tsx b/src/lib/components/ListSelection.tsx
index 0de9d2e30..03e797a4c 100644
--- a/src/lib/components/ListSelection.tsx
+++ b/src/lib/components/ListSelection.tsx
@@ -46,7 +46,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
       setResult,
       placeholder,
       helperText,
-      labelBgColor = "pebble.900",
+      labelBgColor = "gray.900",
       ...rest
     }: ListSelectionProps,
     ref
@@ -127,7 +127,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
             alignItems="center"
             color="text.main"
             border="1px solid"
-            borderColor="pebble.700"
+            borderColor="gray.700"
             background="none"
             borderRadius="8px"
             maxW="100%"
@@ -144,7 +144,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                     <Tag
                       cursor="pointer"
                       whiteSpace="nowrap"
-                      variant="violet-light"
+                      variant="primary-light"
                       gap={1}
                       mr={1}
                     >
@@ -194,7 +194,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
           {displayOptions && (
             <List
               borderRadius="8px"
-              bg="pebble.800"
+              bg="gray.800"
               px="2"
               py="1"
               mt={0}
@@ -210,7 +210,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                 <ListItem
                   key={option.value}
                   style={listItemProps}
-                  _hover={{ bg: "pebble.700" }}
+                  _hover={{ bg: "gray.700" }}
                   transition="all .25s ease-in-out"
                   onClick={() => selectOptionFromList(option)}
                 >
@@ -221,7 +221,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                         data-label={option.label}
                         mr={2}
                         name="check"
-                        color="pebble.600"
+                        color="gray.600"
                         boxSize="3"
                       />
                     )}
@@ -235,7 +235,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                     <ListItem
                       w="full"
                       style={listItemProps}
-                      _hover={{ bg: "pebble.700" }}
+                      _hover={{ bg: "gray.700" }}
                       transition="all .25s ease-in-out"
                       data-testid="create-option"
                       onClick={() => setEnableOutside(false)}
diff --git a/src/lib/components/Loading.tsx b/src/lib/components/Loading.tsx
index 961308b1e..eeb87be83 100644
--- a/src/lib/components/Loading.tsx
+++ b/src/lib/components/Loading.tsx
@@ -3,7 +3,7 @@ import { Flex, Spinner, Text } from "@chakra-ui/react";
 export const Loading = () => (
   <Flex
     borderY="1px solid"
-    borderColor="pebble.700"
+    borderColor="gray.700"
     width="full"
     py="60px"
     my={12}
diff --git a/src/lib/components/PermissionChip.tsx b/src/lib/components/PermissionChip.tsx
index 740b37bb8..02ed3d920 100644
--- a/src/lib/components/PermissionChip.tsx
+++ b/src/lib/components/PermissionChip.tsx
@@ -31,7 +31,7 @@ export const PermissionChip = ({
   return (
     <Tooltip label={message}>
       <Flex>
-        <Tag size="md" variant={isAllowed ? "honeydew-darker" : "gray"}>
+        <Tag size="md" variant={isAllowed ? "accent-darker" : "gray"}>
           {instantiatePermission}
         </Tag>
       </Flex>
diff --git a/src/lib/components/PublicDescription.tsx b/src/lib/components/PublicDescription.tsx
index 920bb5967..a3266f2df 100644
--- a/src/lib/components/PublicDescription.tsx
+++ b/src/lib/components/PublicDescription.tsx
@@ -30,7 +30,7 @@ export const PublicDescription = ({
   return (
     <Flex
       direction="column"
-      bg="pebble.900"
+      bg="gray.900"
       maxW="100%"
       borderRadius="8px"
       p={4}
diff --git a/src/lib/components/StickySidebar.tsx b/src/lib/components/StickySidebar.tsx
index 12cfb2c39..e7be9107b 100644
--- a/src/lib/components/StickySidebar.tsx
+++ b/src/lib/components/StickySidebar.tsx
@@ -39,7 +39,7 @@ export const StickySidebar = ({
     <Box flex="4" px={8} position="relative" {...boxProps}>
       <Flex position="fixed" width="full">
         <Accordion allowToggle width={96} defaultIndex={[0]}>
-          <AccordionItem borderTop="none" borderColor="pebble.700">
+          <AccordionItem borderTop="none" borderColor="gray.700">
             <AccordionButton py={3} px={0}>
               <Text
                 variant="body2"
@@ -49,13 +49,13 @@ export const StickySidebar = ({
               >
                 {title}
               </Text>
-              <AccordionIcon color="pebble.600" ml="auto" />
+              <AccordionIcon color="gray.600" ml="auto" />
             </AccordionButton>
             <AccordionPanel
               py={3}
               px={0}
               borderTop="1px solid"
-              borderColor="pebble.700"
+              borderColor="gray.700"
             >
               <Text variant="body2" color="text.dark" mb={hasAction ? 3 : 0}>
                 {description}
@@ -69,10 +69,10 @@ export const StickySidebar = ({
                   gap={2}
                   width="fit-content"
                   transition="all 0.25s ease-in-out"
-                  color="lilac.main"
+                  color="secondary.main"
                   _hover={{
-                    color: "lilac.light",
-                    bgColor: "lilac.background",
+                    color: "secondary.light",
+                    bgColor: "secondary.background",
                   }}
                   onClick={() =>
                     navigate({ pathname: "/proposals/store-code" })
@@ -83,7 +83,7 @@ export const StickySidebar = ({
                   </Text>
                   <CustomIcon
                     name="chevron-right"
-                    color="lilac.main"
+                    color="secondary.main"
                     boxSize={3}
                     m={0}
                   />
diff --git a/src/lib/components/TagSelection.tsx b/src/lib/components/TagSelection.tsx
index fd5d3f5c5..ad887b36f 100644
--- a/src/lib/components/TagSelection.tsx
+++ b/src/lib/components/TagSelection.tsx
@@ -141,7 +141,7 @@ export const TagSelection = observer(
               borderRadius="8px"
               maxW="100%"
               border="1px solid"
-              borderColor="pebble.700"
+              borderColor="gray.700"
               overflowX="scroll"
             >
               {result.length > 0 && (
@@ -201,7 +201,7 @@ export const TagSelection = observer(
             {displayOptions && (
               <List
                 borderRadius="8px"
-                bg="pebble.800"
+                bg="gray.800"
                 px="2"
                 py="1"
                 mt={0}
@@ -215,7 +215,7 @@ export const TagSelection = observer(
                 {/* header */}
                 <ListItem
                   p={2}
-                  borderBottomColor="pebble.700"
+                  borderBottomColor="gray.700"
                   borderBottomWidth={noResultAndUncreatable ? "0" : "1px"}
                 >
                   {noResultAndUncreatable ? (
@@ -233,7 +233,7 @@ export const TagSelection = observer(
                   <ListItem
                     key={option}
                     style={listItemProps}
-                    _hover={{ bg: "pebble.700" }}
+                    _hover={{ bg: "gray.700" }}
                     transition="all .25s ease-in-out"
                     onClick={() => selectOptionFromList(option)}
                   >
@@ -246,7 +246,7 @@ export const TagSelection = observer(
                           data-label={option}
                           mr={2}
                           name="check"
-                          color="pebble.600"
+                          color="gray.600"
                           boxSize="3"
                         />
                       )}
@@ -257,7 +257,7 @@ export const TagSelection = observer(
                 {canCreateOption && inputValue && (
                   <ListItem
                     style={listItemProps}
-                    _hover={{ bg: "pebble.700" }}
+                    _hover={{ bg: "gray.700" }}
                     transition="all .25s ease-in-out"
                     data-testid="create-option"
                     onClick={() => createOption()}
diff --git a/src/lib/components/TokenCard.tsx b/src/lib/components/TokenCard.tsx
index 671e72a47..bdf3dcbf1 100644
--- a/src/lib/components/TokenCard.tsx
+++ b/src/lib/components/TokenCard.tsx
@@ -37,7 +37,7 @@ export const TokenCard = ({
         minH="101px"
         gap={2}
         p={3}
-        background="pebble.900"
+        background="gray.900"
         borderRadius="8px"
         {...cardProps}
       >
@@ -45,7 +45,7 @@ export const TokenCard = ({
           gap={1}
           alignItems="center"
           borderBottom="1px solid"
-          borderBottomColor="pebble.700"
+          borderBottomColor="gray.700"
           pb={2}
         >
           <Image
diff --git a/src/lib/components/TxFilterSelection.tsx b/src/lib/components/TxFilterSelection.tsx
index 72e169140..fbc208cc4 100644
--- a/src/lib/components/TxFilterSelection.tsx
+++ b/src/lib/components/TxFilterSelection.tsx
@@ -112,7 +112,7 @@ export const TxFilterSelection = forwardRef<
             background="none"
             borderRadius="8px"
             border="1px solid"
-            borderColor="pebble.700"
+            borderColor="gray.700"
             maxW="100%"
             overflowX="scroll"
           >
@@ -125,7 +125,7 @@ export const TxFilterSelection = forwardRef<
                     key={option}
                   >
                     <Tag
-                      variant="violet-light"
+                      variant="primary-light"
                       gap={1}
                       mr={1}
                       whiteSpace="nowrap"
@@ -178,7 +178,7 @@ export const TxFilterSelection = forwardRef<
           {displayOptions && (
             <List
               borderRadius="8px"
-              bg="pebble.900"
+              bg="gray.900"
               px="2"
               py="1"
               mt={0}
@@ -192,7 +192,7 @@ export const TxFilterSelection = forwardRef<
                 <ListItem
                   key={option}
                   style={listItemProps}
-                  _hover={{ bg: "pebble.800" }}
+                  _hover={{ bg: "gray.800" }}
                   transition="all .25s ease-in-out"
                   onClick={() => selectOption(option)}
                 >
@@ -203,7 +203,7 @@ export const TxFilterSelection = forwardRef<
                       <CustomIcon
                         name="check"
                         data-label={option}
-                        color="pebble.600"
+                        color="gray.600"
                       />
                     )}
                   </Flex>
diff --git a/src/lib/components/ViewPermissionAddresses.tsx b/src/lib/components/ViewPermissionAddresses.tsx
index 96ff89e09..0d24070b2 100644
--- a/src/lib/components/ViewPermissionAddresses.tsx
+++ b/src/lib/components/ViewPermissionAddresses.tsx
@@ -35,7 +35,7 @@ export const ViewPermissionAddresses = ({
         ))}
       {permissionAddresses.length > 1 && (
         <Button
-          variant="ghost-lilac"
+          variant="ghost-secondary"
           onClick={() => {
             AmpTrackExpand(
               viewAll ? "collapse" : "expand",
diff --git a/src/lib/components/Wallet.tsx b/src/lib/components/Wallet.tsx
index 052ce5330..ded48565f 100644
--- a/src/lib/components/Wallet.tsx
+++ b/src/lib/components/Wallet.tsx
@@ -46,7 +46,7 @@ export const WalletSection = () => {
           buttonText={truncate(address)}
           icon="wallet"
           onClick={onClickOpenView}
-          variant="outline-info"
+          variant="outline-accent"
         />
       }
       rejected={<Others buttonText="Reconnect" onClick={onClickConnect} />}
diff --git a/src/lib/components/action-msg/SingleMsg.tsx b/src/lib/components/action-msg/SingleMsg.tsx
index 9f64d38c5..758006a2f 100644
--- a/src/lib/components/action-msg/SingleMsg.tsx
+++ b/src/lib/components/action-msg/SingleMsg.tsx
@@ -68,7 +68,7 @@ export const SingleMsg = ({
           </Text>
           <Tooltip label={`Token ID: ${token.id}`} maxW="240px">
             <Flex cursor="pointer">
-              <CustomIcon name="info-circle" boxSize="3" color="pebble.600" />
+              <CustomIcon name="info-circle" boxSize="3" color="gray.600" />
             </Flex>
           </Tooltip>
           <Copier
diff --git a/src/lib/components/button/AdminButton.tsx b/src/lib/components/button/AdminButton.tsx
index 4393fdeb1..3ec3800e9 100644
--- a/src/lib/components/button/AdminButton.tsx
+++ b/src/lib/components/button/AdminButton.tsx
@@ -34,7 +34,7 @@ export const AdminButton = ({ contractAddress, admin }: AdminButtonProps) => {
       </Tooltip>
       <MenuList>
         <MenuItem
-          icon={<CustomIcon name="migrate" color="pebble.600" />}
+          icon={<CustomIcon name="migrate" color="gray.600" />}
           onClick={() => {
             navigate({
               pathname: "/migrate",
@@ -45,7 +45,7 @@ export const AdminButton = ({ contractAddress, admin }: AdminButtonProps) => {
           Migrate
         </MenuItem>
         <MenuItem
-          icon={<CustomIcon name="admin" color="pebble.600" />}
+          icon={<CustomIcon name="admin" color="gray.600" />}
           onClick={() => {
             navigate({
               pathname: "/admin",
@@ -58,9 +58,7 @@ export const AdminButton = ({ contractAddress, admin }: AdminButtonProps) => {
         <ClearAdminModal
           contractAddress={contractAddress}
           triggerElement={
-            <MenuItem
-              icon={<CustomIcon name="admin-clear" color="pebble.600" />}
-            >
+            <MenuItem icon={<CustomIcon name="admin-clear" color="gray.600" />}>
               Clear Admin
             </MenuItem>
           }
diff --git a/src/lib/components/button/BackButton.tsx b/src/lib/components/button/BackButton.tsx
index dd94808f0..710d28d07 100644
--- a/src/lib/components/button/BackButton.tsx
+++ b/src/lib/components/button/BackButton.tsx
@@ -10,7 +10,7 @@ export const BackButton = (props: ButtonProps) => {
 
   return (
     <Button
-      variant="ghost-lilac"
+      variant="ghost-secondary"
       size="sm"
       mb="8px"
       p="unset"
diff --git a/src/lib/components/button/CustomIconButton.tsx b/src/lib/components/button/CustomIconButton.tsx
index d84899e37..6c1d9fc20 100644
--- a/src/lib/components/button/CustomIconButton.tsx
+++ b/src/lib/components/button/CustomIconButton.tsx
@@ -30,7 +30,7 @@ export const CustomIconButton = ({
       alignItems="center"
       onClick={onClick}
     >
-      <CustomIcon name={icon} boxSize="5" color="pebble.600" />
+      <CustomIcon name={icon} boxSize="5" color="gray.600" />
     </Link>
   </Button>
 );
diff --git a/src/lib/components/button/InstantiateButton.tsx b/src/lib/components/button/InstantiateButton.tsx
index cc6de6f10..2d3c32691 100644
--- a/src/lib/components/button/InstantiateButton.tsx
+++ b/src/lib/components/button/InstantiateButton.tsx
@@ -39,7 +39,7 @@ const getInstantiateButtonProps = (
       icon: (
         <CustomIcon
           name="instantiate"
-          color={isWalletConnected ? "violet.light" : "pebble.600"}
+          color={isWalletConnected ? "primary.light" : "gray.600"}
         />
       ),
     };
diff --git a/src/lib/components/button/NewProposalButton.tsx b/src/lib/components/button/NewProposalButton.tsx
index f232db763..ad5294155 100644
--- a/src/lib/components/button/NewProposalButton.tsx
+++ b/src/lib/components/button/NewProposalButton.tsx
@@ -21,7 +21,7 @@ export const NewProposalButton = () => {
       </MenuButton>
       <MenuList>
         <MenuItem
-          icon={<CustomIcon name="code" color="pebble.600" />}
+          icon={<CustomIcon name="code" color="gray.600" />}
           onClick={() => {
             navigate({
               pathname: "/proposals/store-code",
@@ -31,7 +31,7 @@ export const NewProposalButton = () => {
           To Store Code
         </MenuItem>
         {/* <MenuItem
-          icon={<CustomIcon name="contract-address" color="pebble.600"/>}
+          icon={<CustomIcon name="contract-address" color="gray.600"/>}
           onClick={() => {
             navigate({
               pathname: "/proposals/instantiate",
@@ -46,7 +46,7 @@ export const NewProposalButton = () => {
         >
           <MenuItem
             isDisabled={isTestnet}
-            icon={<CustomIcon name="admin" color="pebble.600" />}
+            icon={<CustomIcon name="admin" color="gray.600" />}
             onClick={() => {
               navigate({
                 pathname: "/proposals/whitelist",
diff --git a/src/lib/components/button/ShowMoreButton.tsx b/src/lib/components/button/ShowMoreButton.tsx
index 77d2cbfc5..ff5da9274 100644
--- a/src/lib/components/button/ShowMoreButton.tsx
+++ b/src/lib/components/button/ShowMoreButton.tsx
@@ -19,12 +19,12 @@ export const ShowMoreButton = ({
     rightIcon={
       <CustomIcon name={toggleShowMore ? "chevron-up" : "chevron-down"} />
     }
-    color="lilac.main"
+    color="secondary.main"
     variant="none"
     w="fit-content"
     onClick={setToggleShowMore}
   >
-    <Text variant="body3" color="lilac.main" fontWeight="700">
+    <Text variant="body3" color="secondary.main" fontWeight="700">
       {toggleShowMore ? showLessText : showMoreText}
     </Text>
   </Button>
diff --git a/src/lib/components/copy/Copier.tsx b/src/lib/components/copy/Copier.tsx
index 773e32d50..f36e7ce58 100644
--- a/src/lib/components/copy/Copier.tsx
+++ b/src/lib/components/copy/Copier.tsx
@@ -35,7 +35,7 @@ export const Copier = ({
         onClick={() => AmpTrackCopier(amptrackSection, type)}
         name="copy"
         boxSize="12px"
-        color="pebble.600"
+        color="gray.600"
       />
     }
   />
diff --git a/src/lib/components/copy/CopyButton.tsx b/src/lib/components/copy/CopyButton.tsx
index 9de15a466..acfa40de4 100644
--- a/src/lib/components/copy/CopyButton.tsx
+++ b/src/lib/components/copy/CopyButton.tsx
@@ -21,7 +21,7 @@ export const CopyButton = ({
   size = "sm",
   copyLabel,
   hasIcon = true,
-  variant = "outline-info",
+  variant = "outline-accent",
   buttonText = "Copy",
   amptrackSection,
   ...buttonProps
diff --git a/src/lib/components/dropzone/index.tsx b/src/lib/components/dropzone/index.tsx
index 793b1870f..e80189009 100644
--- a/src/lib/components/dropzone/index.tsx
+++ b/src/lib/components/dropzone/index.tsx
@@ -31,13 +31,13 @@ export function DropZone({ setFile, ...componentProps }: DropZoneProps) {
   return (
     <Flex
       border="1px dashed"
-      borderColor="pebble.700"
+      borderColor="gray.700"
       w="full"
       p="24px 16px"
       borderRadius="8px"
       align="center"
       direction="column"
-      _hover={{ bg: "pebble.900" }}
+      _hover={{ bg: "gray.900" }}
       transition="all .25s ease-in-out"
       cursor="pointer"
       {...getRootProps()}
@@ -48,9 +48,9 @@ export function DropZone({ setFile, ...componentProps }: DropZoneProps) {
       <Flex my="8px" gap="4px">
         <Text
           variant="body1"
-          color="lilac.main"
+          color="secondary.main"
           transition="all .25s ease-in-out"
-          _hover={{ color: "lilac.light" }}
+          _hover={{ color: "secondary.light" }}
           style={{ textDecoration: "underline" }}
         >
           Click to upload
diff --git a/src/lib/components/filter/FilterComponents.ts b/src/lib/components/filter/FilterComponents.ts
index 8c3cf5d7d..e50dec739 100644
--- a/src/lib/components/filter/FilterComponents.ts
+++ b/src/lib/components/filter/FilterComponents.ts
@@ -3,7 +3,7 @@ import { chakra, List } from "@chakra-ui/react";
 export const DropdownContainer = chakra(List, {
   baseStyle: {
     borderRadius: "8px",
-    bg: "pebble.900",
+    bg: "gray.900",
     px: 2,
     py: 1,
     mt: 0,
diff --git a/src/lib/components/filter/FilterDropdownItem.tsx b/src/lib/components/filter/FilterDropdownItem.tsx
index 977a61e17..40a239d64 100644
--- a/src/lib/components/filter/FilterDropdownItem.tsx
+++ b/src/lib/components/filter/FilterDropdownItem.tsx
@@ -23,13 +23,13 @@ export const FilterDropdownItem = ({
 }: FilterDropdownItemProps) => (
   <ListItem
     style={listItemProps}
-    _hover={{ bg: "pebble.800" }}
+    _hover={{ bg: "gray.800" }}
     transition="all .25s ease-in-out"
     onClick={onSelect}
   >
     <Flex alignItems="center" justifyContent="space-between">
       {filterDropdownComponent}
-      {isOptionSelected && <CustomIcon name="check" color="pebble.600" />}
+      {isOptionSelected && <CustomIcon name="check" color="gray.600" />}
     </Flex>
   </ListItem>
 );
diff --git a/src/lib/components/filter/FilterInput.tsx b/src/lib/components/filter/FilterInput.tsx
index dcbd6a29d..4bf510c32 100644
--- a/src/lib/components/filter/FilterInput.tsx
+++ b/src/lib/components/filter/FilterInput.tsx
@@ -36,7 +36,7 @@ export const FilterInput = ({
       background="none"
       borderRadius="8px"
       border="1px solid"
-      borderColor="pebble.700"
+      borderColor="gray.700"
       overflowX="scroll"
       alignItems="center"
     >
@@ -62,7 +62,7 @@ export const FilterInput = ({
         boxSize="40px"
         right="0px"
         minH="full"
-        color="pebble.600"
+        color="gray.600"
         backgroundColor="background.main"
         onClick={() => setIsDropdown(!isDropdown)}
       />
diff --git a/src/lib/components/forms/SelectInput.tsx b/src/lib/components/forms/SelectInput.tsx
index c6c9fd184..66b3dcac2 100644
--- a/src/lib/components/forms/SelectInput.tsx
+++ b/src/lib/components/forms/SelectInput.tsx
@@ -49,7 +49,7 @@ const SelectItem = ({ children, onSelect, disabled }: SelectItemProps) => (
     cursor="pointer"
     gap={2}
     aria-disabled={disabled}
-    _hover={{ bg: "pebble.800" }}
+    _hover={{ bg: "gray.800" }}
     transition="all .25s ease-in-out"
     _disabled={{ opacity: 0.4, pointerEvents: "none" }}
   >
@@ -97,7 +97,7 @@ export const SelectInput = <T extends string>({
             "&[aria-expanded=true]": {
               "> input": {
                 border: "2px solid",
-                borderColor: "lilac.main",
+                borderColor: "secondary.main",
               },
             },
             "& .form-label": {
@@ -116,7 +116,7 @@ export const SelectInput = <T extends string>({
           <div className="form-label">{formLabel}</div>
           {selectedOption?.icon && (
             <InputLeftElement pointerEvents="none" h="full" ml="1">
-              <CustomIcon name={selectedOption.icon} color="pebble.600" />
+              <CustomIcon name={selectedOption.icon} color="gray.600" />
             </InputLeftElement>
           )}
           <Input
@@ -130,14 +130,14 @@ export const SelectInput = <T extends string>({
             pl={selectedOption?.icon ? 9 : 4}
           />
           <InputRightElement pointerEvents="none" h="full">
-            <CustomIcon name="chevron-down" color="pebble.600" />
+            <CustomIcon name="chevron-down" color="gray.600" />
           </InputRightElement>
         </InputGroup>
       </PopoverTrigger>
       <PopoverContent
         ref={optionRef}
         border="unset"
-        bg="pebble.900"
+        bg="gray.900"
         w={inputRef.current?.clientWidth}
         maxH={`${ITEM_HEIGHT * 4}px`}
         overflow="scroll"
@@ -148,7 +148,7 @@ export const SelectInput = <T extends string>({
         sx={{
           "> div:not(:last-of-type)": {
             borderBottom: hasDivider && "1px solid",
-            borderBottomColor: hasDivider && "pebble.700",
+            borderBottomColor: hasDivider && "gray.700",
           },
         }}
       >
@@ -162,7 +162,7 @@ export const SelectInput = <T extends string>({
             }}
             disabled={disabled}
           >
-            {icon && <CustomIcon name={icon} color="pebble.600" />}
+            {icon && <CustomIcon name={icon} color="gray.600" />}
             {label}
           </SelectItem>
         ))}
@@ -172,7 +172,7 @@ export const SelectInput = <T extends string>({
             h={`${ITEM_HEIGHT}px`}
             align="center"
             borderTop={!hasDivider ? "1px solid" : "none"}
-            borderTopColor="pebble.700"
+            borderTopColor="gray.700"
           >
             {helperTextComponent}
           </Flex>
diff --git a/src/lib/components/icon/UploadIcon.tsx b/src/lib/components/icon/UploadIcon.tsx
index d67584ab3..c959a8c96 100644
--- a/src/lib/components/icon/UploadIcon.tsx
+++ b/src/lib/components/icon/UploadIcon.tsx
@@ -9,10 +9,10 @@ interface UploadIconProps {
 const getVariantStyle = (variant: UploadIconProps["variant"]) => {
   switch (variant) {
     case "muted":
-      return { bgColor: "pebble.700", color: "text.dark" };
+      return { bgColor: "gray.700", color: "text.dark" };
     case "primary":
     default:
-      return { bgColor: "lilac.background", color: "lilac.main" };
+      return { bgColor: "secondary.background", color: "secondary.main" };
   }
 };
 
diff --git a/src/lib/components/json/JsonInput.tsx b/src/lib/components/json/JsonInput.tsx
index 3e9329ba4..4d7a11ae3 100644
--- a/src/lib/components/json/JsonInput.tsx
+++ b/src/lib/components/json/JsonInput.tsx
@@ -109,12 +109,12 @@ const JsonInput = ({
       <Box
         p="16px 12px"
         borderWidth="thin"
-        borderColor="pebble.700"
+        borderColor="gray.700"
         borderRadius="8px"
         position="relative"
         transition="all .25s ease-in-out"
         _hover={{
-          borderColor: "pebble.600",
+          borderColor: "gray.600",
         }}
       >
         <JsonEditor
@@ -140,7 +140,7 @@ const JsonInput = ({
           top="10px"
           right="10px"
           p="4px 10px"
-          variant="outline-info"
+          variant="outline-accent"
           fontSize="12px"
           background="background.main"
           float="right"
diff --git a/src/lib/components/json/JsonReadOnly.tsx b/src/lib/components/json/JsonReadOnly.tsx
index 85df6c504..3fd0be96b 100644
--- a/src/lib/components/json/JsonReadOnly.tsx
+++ b/src/lib/components/json/JsonReadOnly.tsx
@@ -55,11 +55,11 @@ const JsonReadOnly = ({
     <Box
       position="relative"
       borderWidth="thin"
-      borderColor={!isJsonValid ? "error.main" : "pebble.700"}
+      borderColor={!isJsonValid ? "error.main" : "gray.700"}
       borderRadius="8px"
       transition="all .25s ease-in-out"
       _hover={{
-        borderColor: isJsonValid && "pebble.600",
+        borderColor: isJsonValid && "gray.600",
         "& .copy-button-box": { display: "block" },
       }}
       w={fullWidth ? "full" : undefined}
diff --git a/src/lib/components/json/ViewFullMsgButton.tsx b/src/lib/components/json/ViewFullMsgButton.tsx
index a4a0dce1f..1f00e0314 100644
--- a/src/lib/components/json/ViewFullMsgButton.tsx
+++ b/src/lib/components/json/ViewFullMsgButton.tsx
@@ -17,11 +17,11 @@ export const ViewFullMsgButton = ({
     w="full"
     p={3}
     borderTop="1px solid"
-    borderTopColor="pebble.700"
+    borderTopColor="gray.700"
     bg="background.main"
     borderRadius="0 0 8px 8px"
     cursor="pointer"
-    _hover={{ bg: "pebble.900" }}
+    _hover={{ bg: "gray.900" }}
     transition="all .25s ease-in-out"
     onClick={onClick}
     zIndex="docked"
diff --git a/src/lib/components/links/GitHubLink.tsx b/src/lib/components/links/GitHubLink.tsx
index 08f720e13..26472ad7c 100644
--- a/src/lib/components/links/GitHubLink.tsx
+++ b/src/lib/components/links/GitHubLink.tsx
@@ -21,14 +21,14 @@ export const GitHubLink = ({ github }: GitHubLinkProps) => {
         rel="noreferrer noopener"
         style={{ display: "flex" }}
       >
-        <Text color="lilac.main" variant="body2" wordBreak="break-all">
+        <Text color="secondary.main" variant="body2" wordBreak="break-all">
           {org}/{repo}
         </Text>
         <CustomIcon
           name="launch"
           boxSize="12px"
           marginLeft="8px"
-          color="pebble.600"
+          color="gray.600"
         />
       </a>
     </Flex>
diff --git a/src/lib/components/modal/ActionModal.tsx b/src/lib/components/modal/ActionModal.tsx
index 3313d79d5..891454e74 100644
--- a/src/lib/components/modal/ActionModal.tsx
+++ b/src/lib/components/modal/ActionModal.tsx
@@ -41,7 +41,7 @@ export interface ActionModalProps {
 }
 export function ActionModal({
   icon = "edit-solid",
-  iconColor = "pebble.600",
+  iconColor = "gray.600",
   title,
   subtitle,
   trigger,
@@ -89,7 +89,7 @@ export function ActionModal({
         <ModalContent>
           <ModalHeader
             borderBottomWidth={noHeaderBorder ? 0 : 1}
-            borderColor="pebble.700"
+            borderColor="gray.700"
           >
             <Box w="full">
               <Flex alignItems="center" gap="3">
@@ -106,7 +106,7 @@ export function ActionModal({
               <Box>{headerContent}</Box>
             </Box>
           </ModalHeader>
-          {!noCloseButton && <ModalCloseButton color="pebble.600" />}
+          {!noCloseButton && <ModalCloseButton color="gray.600" />}
           <ModalBody>{children}</ModalBody>
           <ModalFooter>
             <Flex w="full" justifyContent="center" gap="2">
diff --git a/src/lib/components/modal/CodeSnippet.tsx b/src/lib/components/modal/CodeSnippet.tsx
index bf2d7f2d9..096507231 100644
--- a/src/lib/components/modal/CodeSnippet.tsx
+++ b/src/lib/components/modal/CodeSnippet.tsx
@@ -191,7 +191,7 @@ execute();
     <>
       <Button
         isDisabled={isDisabled}
-        variant="outline-info"
+        variant="outline-accent"
         size="sm"
         ml="auto"
         gap="1"
@@ -213,10 +213,10 @@ execute();
               Code Snippet
             </Heading>
           </ModalHeader>
-          <ModalCloseButton color="pebble.600" />
+          <ModalCloseButton color="gray.600" />
           <ModalBody px={4} maxH="640px" overflow="scroll">
             <Tabs>
-              <TabList borderBottom="1px solid" borderColor="pebble.700">
+              <TabList borderBottom="1px solid" borderColor="gray.700">
                 {codeSnippets[type].map((item) => (
                   <CustomTab key={`menu-${item.name}`}>{item.name}</CustomTab>
                 ))}
diff --git a/src/lib/components/modal/NoMobile.tsx b/src/lib/components/modal/NoMobile.tsx
index 12ba01427..c491a2910 100644
--- a/src/lib/components/modal/NoMobile.tsx
+++ b/src/lib/components/modal/NoMobile.tsx
@@ -22,7 +22,7 @@ export const NoMobile = () => (
       >
         <CustomIcon
           name="info-circle-solid"
-          color="violet.light"
+          color="primary.light"
           boxSize="10"
         />
         <Heading as="h5" variant="h5" py="4">
diff --git a/src/lib/components/modal/RedoModal.tsx b/src/lib/components/modal/RedoModal.tsx
index ee35d5ba9..14aa46565 100644
--- a/src/lib/components/modal/RedoModal.tsx
+++ b/src/lib/components/modal/RedoModal.tsx
@@ -44,13 +44,13 @@ export const RedoModal = ({ message }: RedoModalProps) => {
         <ModalContent w="640px">
           <ModalHeader>
             <Flex w="full" direction="row" alignItems="center" gap={2} pt={1}>
-              <CustomIcon name="redo" boxSize="5" color="pebble.600" />
+              <CustomIcon name="redo" boxSize="5" color="gray.600" />
               <Heading variant="h5" as="h5">
                 Redo Instantiate
               </Heading>
             </Flex>
           </ModalHeader>
-          <ModalCloseButton color="pebble.600" />
+          <ModalCloseButton color="gray.600" />
           <ModalBody maxH="400px" overflow="overlay">
             <Flex direction="column" gap={5}>
               <Flex direction="row" gap={4}>
@@ -77,7 +77,11 @@ export const RedoModal = ({ message }: RedoModalProps) => {
               justifyContent="end"
               gap="4"
             >
-              <Button cursor="pointer" variant="ghost-lilac" onClick={onClose}>
+              <Button
+                cursor="pointer"
+                variant="ghost-secondary"
+                onClick={onClose}
+              >
                 Cancel
               </Button>
               <Button
diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx
index 95da42bbd..01f1b8d97 100644
--- a/src/lib/components/modal/UnsupportedTokensModal.tsx
+++ b/src/lib/components/modal/UnsupportedTokensModal.tsx
@@ -66,7 +66,7 @@ const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
     <Flex
       className="copier-wrapper"
       borderRadius="8px"
-      bg="pebble.800"
+      bg="gray.800"
       direction="column"
       px={4}
       py={3}
@@ -89,7 +89,7 @@ const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
           </Text>
           <Tooltip label={`Token ID: ${balance.id}`} maxW="500px">
             <Flex cursor="pointer" className="info" display="none">
-              <CustomIcon name="info-circle" boxSize="3" color="pebble.600" />
+              <CustomIcon name="info-circle" boxSize="3" color="gray.600" />
             </Flex>
           </Tooltip>
           <Copier
@@ -171,14 +171,14 @@ export const UnsupportedTokensModal = ({
         <ModalContent w="800px">
           <ModalHeader>
             <Flex w="full" direction="row" alignItems="center" gap={2} pt={1}>
-              <CustomIcon name={content.icon} boxSize="5" color="pebble.600" />
+              <CustomIcon name={content.icon} boxSize="5" color="gray.600" />
               <Heading variant="h5" as="h5">
                 Unsupported Assets
               </Heading>
             </Flex>
           </ModalHeader>
 
-          <ModalCloseButton color="pebble.600" />
+          <ModalCloseButton color="gray.600" />
           <ModalBody maxH="400px" overflow="overlay" pb={6}>
             <Flex direction="column" gap={5}>
               {address && (
diff --git a/src/lib/components/modal/code/CodeDetailsTemplate.tsx b/src/lib/components/modal/code/CodeDetailsTemplate.tsx
index 7d9551daa..a5be588a1 100644
--- a/src/lib/components/modal/code/CodeDetailsTemplate.tsx
+++ b/src/lib/components/modal/code/CodeDetailsTemplate.tsx
@@ -119,7 +119,7 @@ export const CodeDetailsTemplateModal = ({
         size="lg"
         helperText="Fill in code name to define its use as a reminder"
         label="Code Name"
-        labelBgColor="pebble.900"
+        labelBgColor="gray.900"
         maxLength={MAX_CODE_NAME_LENGTH}
       />
     </ActionModal>
diff --git a/src/lib/components/modal/code/SaveNewCode.tsx b/src/lib/components/modal/code/SaveNewCode.tsx
index ac7e006bd..757a5de66 100644
--- a/src/lib/components/modal/code/SaveNewCode.tsx
+++ b/src/lib/components/modal/code/SaveNewCode.tsx
@@ -188,7 +188,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
           value={codeId}
           onInputChange={setCodeId}
           label="Code ID"
-          labelBgColor="pebble.900"
+          labelBgColor="gray.900"
           status={codeIdStatus}
           placeholder="ex. 1234"
         />
@@ -196,7 +196,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
           variant="floating"
           value={uploader}
           label="Uploader"
-          labelBgColor="pebble.900"
+          labelBgColor="gray.900"
           placeholder="Uploader address will display here"
           setInputState={() => {}}
           status={uploaderStatus}
@@ -207,7 +207,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
           value={name}
           setInputState={setName}
           label="Code Name"
-          labelBgColor="pebble.900"
+          labelBgColor="gray.900"
           placeholder="Untitled Name"
           helperText="Fill in code name to define its use as a reminder"
           status={nameStatus}
diff --git a/src/lib/components/modal/contract/AddToOtherList.tsx b/src/lib/components/modal/contract/AddToOtherList.tsx
index c6f74ef32..c57535749 100644
--- a/src/lib/components/modal/contract/AddToOtherList.tsx
+++ b/src/lib/components/modal/contract/AddToOtherList.tsx
@@ -72,7 +72,7 @@ export const AddToOtherListModal = observer(
             helperText="Grouping your contracts by adding to your existing list or create
               a new list"
             setResult={setContractLists}
-            labelBgColor="pebble.900"
+            labelBgColor="gray.900"
           />
         </Box>
       </ActionModal>
diff --git a/src/lib/components/modal/contract/ClearAdmin.tsx b/src/lib/components/modal/contract/ClearAdmin.tsx
index 04e10d228..79fe1e5b0 100644
--- a/src/lib/components/modal/contract/ClearAdmin.tsx
+++ b/src/lib/components/modal/contract/ClearAdmin.tsx
@@ -35,7 +35,7 @@ export const ClearAdminModal = ({
       mainAction={proceed}
       mainVariant="error"
       otherBtnTitle="No, keep it"
-      otherVariant="ghost-lilac"
+      otherVariant="ghost-secondary"
     >
       <Text>
         Clearing the admin is a permanent action. You&apos;ll not be able to
diff --git a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
index c9ddb81ab..c55f272e8 100644
--- a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
+++ b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
@@ -116,7 +116,7 @@ export const ContractDetailsTemplateModal = ({
         setTagsValue={setTagsValue}
         setContractListsValue={setContractListsValue}
         errors={errors}
-        labelBgColor="pebble.900"
+        labelBgColor="gray.900"
       />
     </ActionModal>
   );
diff --git a/src/lib/components/modal/contract/SaveNewContract.tsx b/src/lib/components/modal/contract/SaveNewContract.tsx
index 84a14411c..5df833fcc 100644
--- a/src/lib/components/modal/contract/SaveNewContract.tsx
+++ b/src/lib/components/modal/contract/SaveNewContract.tsx
@@ -207,7 +207,7 @@ export function SaveNewContractModal({
           variant="floating"
           placeholder={`ex. ${exampleContractAddress}`}
           status={status}
-          labelBgColor="pebble.900"
+          labelBgColor="gray.900"
         />
         <ControllerInput
           name="instantiator"
@@ -215,7 +215,7 @@ export function SaveNewContractModal({
           label="Instantiated by"
           variant="floating"
           isDisabled
-          labelBgColor="pebble.900"
+          labelBgColor="gray.900"
         />
 
         <OffChainForm<SaveNewContractDetail>
@@ -225,7 +225,7 @@ export function SaveNewContractModal({
           setTagsValue={setTagsValue}
           setContractListsValue={setContractListsValue}
           errors={errors}
-          labelBgColor="pebble.900"
+          labelBgColor="gray.900"
         />
       </VStack>
     </ActionModal>
diff --git a/src/lib/components/modal/list/CreateNewList.tsx b/src/lib/components/modal/list/CreateNewList.tsx
index 6d9f1c8e3..bcd0fb548 100644
--- a/src/lib/components/modal/list/CreateNewList.tsx
+++ b/src/lib/components/modal/list/CreateNewList.tsx
@@ -102,7 +102,7 @@ export function CreateNewListModal({
           variant="floating"
           value={listName}
           setInputState={setListName}
-          labelBgColor="pebble.900"
+          labelBgColor="gray.900"
           status={status}
           label="List Name"
         />
diff --git a/src/lib/components/modal/list/EditListName.tsx b/src/lib/components/modal/list/EditListName.tsx
index a46cdbada..6da72c8d4 100644
--- a/src/lib/components/modal/list/EditListName.tsx
+++ b/src/lib/components/modal/list/EditListName.tsx
@@ -87,7 +87,7 @@ export function EditListNameModal({
         variant="floating"
         value={listName}
         setInputState={setListName}
-        labelBgColor="pebble.900"
+        labelBgColor="gray.900"
         status={status}
         label="List Name"
       />
diff --git a/src/lib/components/pagination/index.tsx b/src/lib/components/pagination/index.tsx
index 29655e6d1..86c922cc5 100644
--- a/src/lib/components/pagination/index.tsx
+++ b/src/lib/components/pagination/index.tsx
@@ -77,7 +77,7 @@ export const Pagination = ({
           <option value="20">20</option>
           <option value="50">50</option>
           <option value="100">100</option>
-          <CustomIcon name="chevron-down" color="pebble.600" />
+          <CustomIcon name="chevron-down" color="gray.600" />
         </Select>
         <Text variant="body3" mx="30px">
           {`${offsetData.toLocaleString()} - ${lastDataInPage.toLocaleString()} of ${totalData.toLocaleString()}`}
diff --git a/src/lib/components/select-code/CodeSelect.tsx b/src/lib/components/select-code/CodeSelect.tsx
index ee0c42c17..82f80ce42 100644
--- a/src/lib/components/select-code/CodeSelect.tsx
+++ b/src/lib/components/select-code/CodeSelect.tsx
@@ -32,10 +32,10 @@ export const CodeSelect = ({
         p="16px"
         gap="16px"
         w="100%"
-        bgColor="pebble.900"
+        bgColor="gray.900"
         borderRadius="8px"
         borderWidth="1px"
-        borderColor={isError ? "error.main" : "pebble.700"}
+        borderColor={isError ? "error.main" : "gray.700"}
       >
         <UploadIcon variant={codeId ? "primary" : "muted"} />
         {codeId ? (
diff --git a/src/lib/components/select-code/CodeSelectDrawerButton.tsx b/src/lib/components/select-code/CodeSelectDrawerButton.tsx
index 541056bf1..9a0c5ccbb 100644
--- a/src/lib/components/select-code/CodeSelectDrawerButton.tsx
+++ b/src/lib/components/select-code/CodeSelectDrawerButton.tsx
@@ -88,8 +88,8 @@ export const CodeSelectDrawerButton = ({
       <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
         <DrawerOverlay />
         <DrawerContent h="80%">
-          <DrawerHeader borderBottom="1px solid" borderColor="pebble.700">
-            <CustomIcon name="code" boxSize="6" color="pebble.600" />
+          <DrawerHeader borderBottom="1px solid" borderColor="gray.700">
+            <CustomIcon name="code" boxSize="6" color="gray.600" />
             <Heading as="h5" variant="h5">
               Select Code ID
             </Heading>
@@ -115,7 +115,7 @@ export const CodeSelectDrawerButton = ({
               />
             </Flex>
             <Tabs px={6}>
-              <TabList borderBottom="1px" borderColor="pebble.800">
+              <TabList borderBottom="1px" borderColor="gray.800">
                 <CustomTab count={storedCodesCount}>My Stored Codes</CustomTab>
                 <CustomTab count={savedCodesCount}>My Saved Codes </CustomTab>
               </TabList>
diff --git a/src/lib/components/select-contract/ContractListCard.tsx b/src/lib/components/select-contract/ContractListCard.tsx
index fb5eb163a..44111e446 100644
--- a/src/lib/components/select-contract/ContractListCard.tsx
+++ b/src/lib/components/select-contract/ContractListCard.tsx
@@ -42,7 +42,7 @@ export const ContractListCard = ({
       <CustomIcon
         name={getListIcon(item.name)}
         boxSize="24px"
-        color="pebble.600"
+        color="gray.600"
       />
       <Flex flexDirection="column" alignItems="start" gap={1}>
         <Flex alignItems="center" gap={2}>
@@ -73,13 +73,13 @@ export const ContractListCard = ({
             as={Button}
             onClick={(e) => e.stopPropagation()}
           >
-            <CustomIcon name="more" color="pebble.600" />
+            <CustomIcon name="more" color="gray.600" />
           </MenuButton>
           <MenuList>
             <EditListNameModal
               list={{ label: item.name, value: item.slug }}
               menuItemProps={{
-                icon: <CustomIcon name="edit" color="pebble.600" />,
+                icon: <CustomIcon name="edit" color="gray.600" />,
                 children: "Edit list name",
               }}
             />
diff --git a/src/lib/components/select-contract/SelectContractAdmin.tsx b/src/lib/components/select-contract/SelectContractAdmin.tsx
index a9b3f3ac4..24ae5320c 100644
--- a/src/lib/components/select-contract/SelectContractAdmin.tsx
+++ b/src/lib/components/select-contract/SelectContractAdmin.tsx
@@ -81,7 +81,7 @@ export const SelectContractAdmin = ({
             <CustomIcon
               name="contract-address-solid"
               boxSize="5"
-              color="pebble.600"
+              color="gray.600"
             />
             <Heading as="h5" variant="h5">
               Select contract which you have permission
diff --git a/src/lib/components/select-contract/SelectContractInstantiator.tsx b/src/lib/components/select-contract/SelectContractInstantiator.tsx
index 3b1160b73..4993b5e7b 100644
--- a/src/lib/components/select-contract/SelectContractInstantiator.tsx
+++ b/src/lib/components/select-contract/SelectContractInstantiator.tsx
@@ -124,7 +124,7 @@ export const SelectContractInstantiator = ({
                 <CustomIcon
                   name="contract-address-solid"
                   boxSize="5"
-                  color="pebble.600"
+                  color="gray.600"
                 />
                 <Heading as="h5" variant="h5">
                   Select Contract
@@ -169,9 +169,9 @@ export const SelectContractInstantiator = ({
                 </Text>
 
                 <Flex my="24px" gap="8px" alignItems="center">
-                  <Divider borderColor="pebble.700" />
+                  <Divider borderColor="gray.700" />
                   <Text variant="body1">OR</Text>
-                  <Divider borderColor="pebble.700" />
+                  <Divider borderColor="gray.700" />
                 </Flex>
 
                 <Heading as="h6" variant="h6" mb={4}>
@@ -181,7 +181,7 @@ export const SelectContractInstantiator = ({
                   contractLists={contractLists}
                   handleListSelect={handleListSelect}
                   isReadOnly
-                  formLabelBgColor="pebble.900"
+                  formLabelBgColor="gray.900"
                 />
               </DrawerBody>
             </>
@@ -193,7 +193,7 @@ export const SelectContractInstantiator = ({
                   boxSize="5"
                   onClick={() => setListSlug("")}
                   cursor="pointer"
-                  color="pebble.600"
+                  color="gray.600"
                 />
                 <Heading as="h5" variant="h5">
                   {contractList.name}
diff --git a/src/lib/components/state/EmptyState.tsx b/src/lib/components/state/EmptyState.tsx
index 1db577db9..349d9eb54 100644
--- a/src/lib/components/state/EmptyState.tsx
+++ b/src/lib/components/state/EmptyState.tsx
@@ -22,7 +22,7 @@ export const EmptyState = ({
     my={12}
     direction="column"
     borderY={withBorder ? "1px solid" : undefined}
-    borderColor="pebble.700"
+    borderColor="gray.700"
   >
     <Flex alignItems="center" flexDir="column" gap="4" width="full">
       {imageVariant && <StateImage imageVariant={imageVariant} />}
diff --git a/src/lib/components/state/InvalidState.tsx b/src/lib/components/state/InvalidState.tsx
index 96316729e..529331dbe 100644
--- a/src/lib/components/state/InvalidState.tsx
+++ b/src/lib/components/state/InvalidState.tsx
@@ -21,7 +21,7 @@ export const InvalidState = ({ title }: InvalidStateProps) => {
       direction="column"
       alignItems="center"
       borderY="1px solid"
-      borderColor="pebble.700"
+      borderColor="gray.700"
       width="full"
       my="24px"
       py="24px"
diff --git a/src/lib/components/state/ZeroState.tsx b/src/lib/components/state/ZeroState.tsx
index 403f42824..e99bc0e53 100644
--- a/src/lib/components/state/ZeroState.tsx
+++ b/src/lib/components/state/ZeroState.tsx
@@ -36,7 +36,7 @@ const ActionSection = ({ list, handleAction }: ActionSectionProps) =>
           list={list}
           buttonProps={{
             variant: "outline-primary",
-            leftIcon: <CustomIcon name="bookmark" color="pebble.600" />,
+            leftIcon: <CustomIcon name="bookmark" color="gray.600" />,
             children: "Save Contract",
             ml: 2,
           }}
@@ -67,7 +67,7 @@ export const ZeroState = ({ list, isReadOnly }: ZeroStateProps) => {
   return (
     <Flex
       borderY="1px solid"
-      borderColor="pebble.700"
+      borderColor="gray.700"
       width="full"
       py="48px"
       direction="column"
diff --git a/src/lib/components/stepper/StepperItem.tsx b/src/lib/components/stepper/StepperItem.tsx
index ca6595324..5d1f4fb26 100644
--- a/src/lib/components/stepper/StepperItem.tsx
+++ b/src/lib/components/stepper/StepperItem.tsx
@@ -21,7 +21,7 @@ const StepLabel = ({
   <Flex
     justify="center"
     align="center"
-    backgroundColor={disabled ? "text.disabled" : "violet.main"}
+    backgroundColor={disabled ? "text.disabled" : "primary.main"}
     width="24px"
     height="24px"
     borderRadius="50%"
@@ -54,7 +54,7 @@ export const StepperItem = ({
           content: '""',
           flex: 1,
           height: "1px",
-          backgroundColor: "pebble.600",
+          backgroundColor: "gray.600",
           marginInlineEnd: "8px",
         },
       }}
diff --git a/src/lib/components/table/AccordionTx.tsx b/src/lib/components/table/AccordionTx.tsx
index 034cae0da..8c88aa6e0 100644
--- a/src/lib/components/table/AccordionTx.tsx
+++ b/src/lib/components/table/AccordionTx.tsx
@@ -48,7 +48,7 @@ export const AccordionTx = ({
       borderBottom="none"
       pl={accordionSpacing}
       gap={3}
-      _hover={{ background: "pebble.800" }}
+      _hover={{ background: "gray.800" }}
       transition="all .25s ease-in-out"
       css={{
         "&:not(:first-of-type) div#before-stepper": {
diff --git a/src/lib/components/table/EditableCell.tsx b/src/lib/components/table/EditableCell.tsx
index 4741c02c5..a30fb48ee 100644
--- a/src/lib/components/table/EditableCell.tsx
+++ b/src/lib/components/table/EditableCell.tsx
@@ -116,7 +116,7 @@ export const EditableCell = ({
             zIndex="sticky"
             top="-32px"
             left="-16px"
-            bg="pebble.800"
+            bg="gray.800"
             p={3}
             borderRadius="8px"
             onClick={(e) => e.stopPropagation()}
@@ -177,7 +177,7 @@ export const EditableCell = ({
                 top="-16px"
                 left="-16px"
                 borderRadius="8px"
-                bg={isReadOnly ? "pebble.700" : "pebble.800"}
+                bg={isReadOnly ? "gray.700" : "gray.800"}
                 whiteSpace="nowrap"
                 p={4}
                 position="absolute"
@@ -204,7 +204,7 @@ export const EditableCell = ({
                 opacity={isHover ? 1 : 0}
                 onClick={handleEdit}
               >
-                <CustomIcon name="edit" color="pebble.600" boxSize="3" />
+                <CustomIcon name="edit" color="gray.600" boxSize="3" />
               </Flex>
             )}
           </Flex>
diff --git a/src/lib/components/table/TableTitle.tsx b/src/lib/components/table/TableTitle.tsx
index 1201c29dc..13f71a786 100644
--- a/src/lib/components/table/TableTitle.tsx
+++ b/src/lib/components/table/TableTitle.tsx
@@ -21,7 +21,7 @@ export const TableTitle = ({
       </Heading>
       <Badge
         textColor={
-          count && typeof count !== "string" ? "text.main" : "pebble.500"
+          count && typeof count !== "string" ? "text.main" : "gray.500"
         }
       >
         {count}
diff --git a/src/lib/components/table/codes/CodesTableRow.tsx b/src/lib/components/table/codes/CodesTableRow.tsx
index 8c008696a..cc2a143d5 100644
--- a/src/lib/components/table/codes/CodesTableRow.tsx
+++ b/src/lib/components/table/codes/CodesTableRow.tsx
@@ -28,7 +28,7 @@ export const CodesTableRow = ({
     <Grid
       templateColumns={templateColumns}
       onClick={() => onRowSelect(codeInfo.id)}
-      _hover={{ bg: "pebble.900" }}
+      _hover={{ bg: "gray.900" }}
       transition="all .25s ease-in-out"
       cursor="pointer"
       minW="min-content"
diff --git a/src/lib/components/table/codes/CodesTableWithWallet.tsx b/src/lib/components/table/codes/CodesTableWithWallet.tsx
index 75d394e14..b05097bd3 100644
--- a/src/lib/components/table/codes/CodesTableWithWallet.tsx
+++ b/src/lib/components/table/codes/CodesTableWithWallet.tsx
@@ -29,7 +29,7 @@ export const CodesTableWithWallet = ({
       direction="column"
       py="48px"
       borderY="1px solid"
-      borderColor="pebble.700"
+      borderColor="gray.700"
     >
       <DisconnectedState text={disconnectedMessage} />
     </Flex>
diff --git a/src/lib/components/table/contracts/ContractsTableRow.tsx b/src/lib/components/table/contracts/ContractsTableRow.tsx
index 3a0c913ed..4c41d2158 100644
--- a/src/lib/components/table/contracts/ContractsTableRow.tsx
+++ b/src/lib/components/table/contracts/ContractsTableRow.tsx
@@ -96,7 +96,7 @@ export const ContractsTableRow = ({
   <Grid
     templateColumns={templateColumns}
     onClick={() => onRowSelect(contractInfo.contractAddress)}
-    _hover={{ bg: "pebble.900" }}
+    _hover={{ bg: "gray.900" }}
     transition="all .25s ease-in-out"
     cursor="pointer"
     minW="min-content"
diff --git a/src/lib/components/table/contracts/ContractsTableRowCTA.tsx b/src/lib/components/table/contracts/ContractsTableRowCTA.tsx
index e0aa0f51b..927f5b25c 100644
--- a/src/lib/components/table/contracts/ContractsTableRowCTA.tsx
+++ b/src/lib/components/table/contracts/ContractsTableRowCTA.tsx
@@ -87,7 +87,7 @@ export const ContractsTableRowCTA = ({
             as={Button}
             onClick={(e) => e.stopPropagation()}
           >
-            <CustomIcon name="more" boxSize="16px" color="pebble.600" />
+            <CustomIcon name="more" boxSize="16px" color="gray.600" />
           </MenuButton>
           <MenuList onClick={(e) => e.stopPropagation()}>
             <EditContractDetailsModal
@@ -95,7 +95,7 @@ export const ContractsTableRowCTA = ({
               triggerElement={
                 <MenuItem
                   icon={
-                    <CustomIcon name="edit" boxSize="16px" color="pebble.600" />
+                    <CustomIcon name="edit" boxSize="16px" color="gray.600" />
                   }
                 >
                   Edit details
@@ -110,7 +110,7 @@ export const ContractsTableRowCTA = ({
                     <CustomIcon
                       name="bookmark"
                       boxSize="16px"
-                      color="pebble.600"
+                      color="gray.600"
                     />
                   }
                 >
@@ -119,9 +119,7 @@ export const ContractsTableRowCTA = ({
               }
             />
             <MenuItem
-              icon={
-                <CustomIcon name="admin" boxSize="16px" color="pebble.600" />
-              }
+              icon={<CustomIcon name="admin" boxSize="16px" color="gray.600" />}
               onClick={() => {
                 navigate({
                   pathname: "/admin",
@@ -140,7 +138,7 @@ export const ContractsTableRowCTA = ({
                     <CustomIcon
                       name="admin-clear"
                       boxSize="16px"
-                      color="pebble.600"
+                      color="gray.600"
                     />
                   }
                   isDisabled={!isAdmin}
diff --git a/src/lib/components/table/contracts/EditTags.tsx b/src/lib/components/table/contracts/EditTags.tsx
index 4dff0a16f..44458db76 100644
--- a/src/lib/components/table/contracts/EditTags.tsx
+++ b/src/lib/components/table/contracts/EditTags.tsx
@@ -31,12 +31,7 @@ export function EditTags({ contractLocalInfo }: EditTagsProps) {
     <ActionModal
       title="Edit Tags"
       trigger={
-        <CustomIcon
-          cursor="pointer"
-          name="edit"
-          color="pebble.600"
-          boxSize="3"
-        />
+        <CustomIcon cursor="pointer" name="edit" color="gray.600" boxSize="3" />
       }
       headerContent={
         <Flex pt="6" gap="36px">
@@ -73,7 +68,7 @@ export function EditTags({ contractLocalInfo }: EditTagsProps) {
             setResult={(selectedOptions: string[]) => {
               setTagResult(selectedOptions);
             }}
-            labelBgColor="pebble.900"
+            labelBgColor="gray.900"
           />
         </Box>
       </FormControl>
diff --git a/src/lib/components/table/contracts/TagsCell.tsx b/src/lib/components/table/contracts/TagsCell.tsx
index d11897217..9d631f600 100644
--- a/src/lib/components/table/contracts/TagsCell.tsx
+++ b/src/lib/components/table/contracts/TagsCell.tsx
@@ -53,7 +53,7 @@ export const TagsCell = ({
 
       {isHover && (
         <Flex
-          bgColor={tags.length > 1 ? "pebble.800" : "inherit"}
+          bgColor={tags.length > 1 ? "gray.800" : "inherit"}
           py={4}
           borderRadius="8px"
           position="absolute"
diff --git a/src/lib/components/table/proposals/StatusChip.tsx b/src/lib/components/table/proposals/StatusChip.tsx
index 9ef3b048c..c9a9082d9 100644
--- a/src/lib/components/table/proposals/StatusChip.tsx
+++ b/src/lib/components/table/proposals/StatusChip.tsx
@@ -10,17 +10,17 @@ const getBgColor = (
 ): CSSProperties["backgroundColor"] => {
   switch (status) {
     case ProposalStatus.DEPOSIT_PERIOD:
-      return "lilac.darker";
+      return "secondary.darker";
     case ProposalStatus.FAILED:
     case ProposalStatus.REJECTED:
       return "error.dark";
     case ProposalStatus.PASSED:
       return "success.dark";
     case ProposalStatus.VOTING_PERIOD:
-      return "violet.dark";
+      return "primary.dark";
     case ProposalStatus.DEPOSIT_FAILED:
     default:
-      return "pebble.700";
+      return "gray.700";
   }
 };
 
diff --git a/src/lib/components/table/tableComponents.ts b/src/lib/components/table/tableComponents.ts
index 96db4acd6..0ad60a249 100644
--- a/src/lib/components/table/tableComponents.ts
+++ b/src/lib/components/table/tableComponents.ts
@@ -22,7 +22,7 @@ const tableHeaderBaseStyle = {
   py: 6,
   px: 4,
   borderBottom: "1px solid",
-  borderColor: "pebble.700",
+  borderColor: "gray.700",
 };
 
 export const TableHeader = chakra(GridItem, {
@@ -45,7 +45,7 @@ const tableRowBaseStyle = {
   display: "flex",
   alignItems: "center",
   borderBottom: "1px solid",
-  borderColor: "pebble.700",
+  borderColor: "gray.700",
 };
 
 export const TableRow = chakra(GridItem, {
diff --git a/src/lib/components/table/transactions/RelationChip.tsx b/src/lib/components/table/transactions/RelationChip.tsx
index f601402e5..4b28333fb 100644
--- a/src/lib/components/table/transactions/RelationChip.tsx
+++ b/src/lib/components/table/transactions/RelationChip.tsx
@@ -12,8 +12,8 @@ export const RelationChip = ({ isSigner }: RelationChipProps) => {
     ? "‘Signer’ or ‘The signing address’ is the account address that signs the transaction."
     : "‘Related' or ‘The related address’ is related to the transaction, even if not signing it; e.g., as a recipient address.";
   const tagBgColor: CSSProperties["backgroundColor"] = isSigner
-    ? "violet.dark"
-    : "pebble.700";
+    ? "primary.dark"
+    : "gray.700";
 
   return (
     <Tooltip label={message}>
diff --git a/src/lib/components/table/transactions/TransactionsTableRow.tsx b/src/lib/components/table/transactions/TransactionsTableRow.tsx
index 789b3ed6a..51034332c 100644
--- a/src/lib/components/table/transactions/TransactionsTableRow.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableRow.tsx
@@ -43,7 +43,7 @@ export const TransactionsTableRow = ({
         className="copier-wrapper"
         templateColumns={templateColumns}
         onClick={isAccordion ? onToggle : undefined}
-        _hover={{ background: "pebble.900" }}
+        _hover={{ background: "gray.900" }}
         transition="all .25s ease-in-out"
         cursor={isAccordion ? "pointer" : "default"}
       >
@@ -64,7 +64,7 @@ export const TransactionsTableRow = ({
               showCopyOnHover
             />
             {transaction.messages.length > 1 && (
-              <Badge variant="lilac" ml="6px">
+              <Badge variant="secondary" ml="6px">
                 {transaction.messages.length}
               </Badge>
             )}
@@ -81,7 +81,7 @@ export const TransactionsTableRow = ({
           <Flex gap={1} flexWrap="wrap">
             <RenderActionMessages transaction={transaction} />
             {transaction.isIbc && (
-              <Tag variant="honeydew-dark" size="sm">
+              <Tag variant="accent-dark" size="sm">
                 IBC
               </Tag>
             )}
diff --git a/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx b/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx
index 1decad832..5ffb776ba 100644
--- a/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx
@@ -19,7 +19,7 @@ export const TransactionsTableWithWallet = ({
 }: TransactionsTableWithWalletProps) => {
   const { address } = useWallet();
   return !address ? (
-    <Flex direction="column" py="48px" borderColor="pebble.700">
+    <Flex direction="column" py="48px" borderColor="gray.700">
       <DisconnectedState
         text="to see your past transactions."
         helperText="Past transactions will display here."
diff --git a/src/lib/components/tx/TxReceiptRender.tsx b/src/lib/components/tx/TxReceiptRender.tsx
index c5c35091c..9514c0680 100644
--- a/src/lib/components/tx/TxReceiptRender.tsx
+++ b/src/lib/components/tx/TxReceiptRender.tsx
@@ -52,7 +52,7 @@ const ReceiptRow = ({ title, value, html }: TxReceipt) => (
       <Text
         variant="body2"
         wordBreak="break-word"
-        color={value === null ? "pebble.600" : "text.main"}
+        color={value === null ? "gray.600" : "text.main"}
       >
         {value === null ? String(value) : value}
       </Text>
diff --git a/src/lib/components/tx/modal/ButtonSection.tsx b/src/lib/components/tx/modal/ButtonSection.tsx
index 16a463e97..b54ab9f61 100644
--- a/src/lib/components/tx/modal/ButtonSection.tsx
+++ b/src/lib/components/tx/modal/ButtonSection.tsx
@@ -48,7 +48,7 @@ export const ButtonSection = ({
       return (
         <>
           <Button
-            variant="ghost-lilac"
+            variant="ghost-secondary"
             onClick={() => {
               navigate({ pathname: "/my-codes" });
               onClose?.();
@@ -93,7 +93,7 @@ export const ButtonSection = ({
     case "update-admin":
       return (
         <>
-          <Button variant="ghost-lilac" onClick={openTxExplorer}>
+          <Button variant="ghost-secondary" onClick={openTxExplorer}>
             See Transaction
           </Button>
           <Button
@@ -118,7 +118,7 @@ export const ButtonSection = ({
       return (
         <>
           <Button
-            variant="ghost-lilac"
+            variant="ghost-secondary"
             // TODO: Revisit this when proposal page is live
             onClick={openProposalExplorer}
           >
diff --git a/src/lib/components/tx/modal/index.tsx b/src/lib/components/tx/modal/index.tsx
index f1e019de7..f193f9b48 100644
--- a/src/lib/components/tx/modal/index.tsx
+++ b/src/lib/components/tx/modal/index.tsx
@@ -49,7 +49,7 @@ export const TxModal = ({ result, onClose }: TxModalProps) => {
           {result.receiptInfo.headerIcon}
           {result.receiptInfo.header}
         </ModalHeader>
-        {isUpdateAdminSucceed && <ModalCloseButton color="pebble.600" />}
+        {isUpdateAdminSucceed && <ModalCloseButton color="gray.600" />}
         {(result.receiptInfo.description || result.receipts.length > 0) && (
           <ModalBody>
             {result.receiptInfo.description && (
diff --git a/src/lib/components/upload/components/UploadCard.tsx b/src/lib/components/upload/components/UploadCard.tsx
index d93a6db35..9ad41ccb4 100644
--- a/src/lib/components/upload/components/UploadCard.tsx
+++ b/src/lib/components/upload/components/UploadCard.tsx
@@ -60,10 +60,10 @@ export const UploadCard = ({
         p="16px"
         gap="16px"
         w="full"
-        bgColor="pebble.900"
+        bgColor="gray.900"
         borderRadius="8px"
         border="1px solid"
-        borderColor={isError ? "error.main" : "pebble.900"}
+        borderColor={isError ? "error.main" : "gray.900"}
       >
         <UploadIcon />
         <Flex direction="column">
diff --git a/src/lib/layout/Footer.tsx b/src/lib/layout/Footer.tsx
index 55aaaf573..87fb7e024 100644
--- a/src/lib/layout/Footer.tsx
+++ b/src/lib/layout/Footer.tsx
@@ -53,7 +53,7 @@ const Footer = () => (
           onClick={() => AmpTrackCelatone(item.url)}
         >
           <Button variant="ghost-gray" size="xs" px="1">
-            <CustomIcon name={item.icon} boxSize="5" color="pebble.600" />
+            <CustomIcon name={item.icon} boxSize="5" color="gray.600" />
           </Button>
         </Link>
       ))}
@@ -65,7 +65,7 @@ const Footer = () => (
       >
         <Button variant="ghost-gray" size="xs">
           <Flex gap={1} align="center">
-            <CustomIcon name="feedback" color="pebble.600" />
+            <CustomIcon name="feedback" color="gray.600" />
             <Text variant="body3" color="text.dark">
               Feedback
             </Text>
@@ -98,9 +98,9 @@ const Footer = () => (
             </Text>
             <Text
               variant="body3"
-              color="lilac.main"
+              color="secondary.main"
               transition="all .25s ease-in-out"
-              _hover={{ color: "lilac.light" }}
+              _hover={{ color: "secondary.light" }}
             >
               Alles Labs
             </Text>
diff --git a/src/lib/layout/Header.tsx b/src/lib/layout/Header.tsx
index f5c16aba1..24a1c6b1b 100644
--- a/src/lib/layout/Header.tsx
+++ b/src/lib/layout/Header.tsx
@@ -56,8 +56,8 @@ const Header = () => {
             py="5px"
             borderRadius="8px"
             borderWidth="1px"
-            borderColor="pebble.600"
-            _hover={{ bg: "pebble.700" }}
+            borderColor="gray.600"
+            _hover={{ bg: "gray.700" }}
             transition="all .25s ease-in-out"
             w="170px"
           >
@@ -75,7 +75,7 @@ const Header = () => {
               >
                 {currentChainRecord?.chain.chain_id}
               </Text>
-              <CustomIcon name="chevron-down" color="pebble.600" />
+              <CustomIcon name="chevron-down" color="gray.600" />
             </Flex>
           </MenuButton>
           <MenuList zIndex="dropdown">
@@ -88,7 +88,7 @@ const Header = () => {
                 flexDirection="column"
                 alignItems="flex-start"
                 _hover={{
-                  backgroundColor: "pebble.800",
+                  backgroundColor: "gray.800",
                 }}
                 transition="all .25s ease-in-out"
               >
@@ -102,7 +102,7 @@ const Header = () => {
                     </Text>
                   </Flex>
                   {chainName === currentChainName && (
-                    <CustomIcon name="check" boxSize="3" color="pebble.600" />
+                    <CustomIcon name="check" boxSize="3" color="gray.600" />
                   )}
                 </Flex>
               </MenuItem>
diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx
index ab8bfb3b0..3e71dfae7 100644
--- a/src/lib/layout/Searchbar.tsx
+++ b/src/lib/layout/Searchbar.tsx
@@ -60,7 +60,7 @@ const ResultItem = ({ type, value, handleSelectResult }: ResultItemProps) => {
   const route = type ? getRoute(type) : null;
 
   return (
-    <ListItem p={2} borderBottomColor="pebble.700" bg="pebble.900">
+    <ListItem p={2} borderBottomColor="gray.700" bg="gray.900">
       <Text variant="body2" fontWeight="500" color="text.dark" p="8px">
         {text}
       </Text>
@@ -69,7 +69,7 @@ const ResultItem = ({ type, value, handleSelectResult }: ResultItemProps) => {
           variant="body2"
           p="8px"
           borderRadius="8px"
-          _hover={{ bg: "pebble.800", cursor: "pointer" }}
+          _hover={{ bg: "gray.800", cursor: "pointer" }}
           transition="all 0.25s ease-in-out"
           onClick={() => handleSelectResult(type, true)}
         >
@@ -141,18 +141,18 @@ const Searchbar = () => {
           h="36px"
           onChange={handleSearchChange}
           placeholder={placeholder}
-          focusBorderColor="lilac.main"
+          focusBorderColor="secondary.main"
           onFocus={() => setDisplayResults(keyword.length > 0)}
           onKeyDown={handleOnKeyEnter}
         />
         <InputRightElement pointerEvents="none" h="full">
-          <CustomIcon name="search" color="pebble.600" />
+          <CustomIcon name="search" color="gray.600" />
         </InputRightElement>
       </InputGroup>
       {displayResults && (
         <List
           borderRadius="8px"
-          bg="pebble.900"
+          bg="gray.900"
           position="absolute"
           zIndex="2"
           w="full"
diff --git a/src/lib/layout/SubHeader.tsx b/src/lib/layout/SubHeader.tsx
index c9c4e580f..f962435f7 100644
--- a/src/lib/layout/SubHeader.tsx
+++ b/src/lib/layout/SubHeader.tsx
@@ -21,7 +21,7 @@ const SubHeader = () => {
   const { address } = useWallet();
   const isCurrentPage = useIsCurrentPage();
 
-  const activeColor = "violet.light";
+  const activeColor = "primary.light";
 
   const myPageSlug = `/accounts/${address}`;
 
@@ -55,7 +55,7 @@ const SubHeader = () => {
               <CustomIcon
                 boxSize={3}
                 name={item.icon}
-                color={isCurrentPage(item.slug) ? activeColor : "pebble.600"}
+                color={isCurrentPage(item.slug) ? activeColor : "gray.600"}
               />
               <Text
                 variant="body2"
@@ -78,13 +78,13 @@ const SubHeader = () => {
               h="full"
               borderBottomWidth={2}
               borderColor={
-                isCurrentPage(myPageSlug) ? "lilac.main" : "transparent"
+                isCurrentPage(myPageSlug) ? "secondary.main" : "transparent"
               }
-              _hover={{ borderColor: "lilac.main" }}
+              _hover={{ borderColor: "secondary.main" }}
               transition="all .25s ease-in-out"
             >
-              <CustomIcon boxSize={3} name="admin" color="lilac.main" />
-              <Text variant="body2" fontWeight="600" color="lilac.main">
+              <CustomIcon boxSize={3} name="admin" color="secondary.main" />
+              <Text variant="body2" fontWeight="600" color="secondary.main">
                 My Page
               </Text>
             </Flex>
diff --git a/src/lib/layout/index.tsx b/src/lib/layout/index.tsx
index a74513713..1dd66129d 100644
--- a/src/lib/layout/index.tsx
+++ b/src/lib/layout/index.tsx
@@ -50,10 +50,10 @@ const Layout = ({ children }: LayoutProps) => {
       overflowX="hidden"
       bg="background.main"
     >
-      <GridItem bg="pebble.900" area="header" mb="1">
+      <GridItem bg="gray.900" area="header" mb="1">
         <Header />
       </GridItem>
-      <GridItem bg="pebble.900" area="nav" overflowY="auto">
+      <GridItem bg="gray.900" area="nav" overflowY="auto">
         {mode.navBar}
       </GridItem>
       <GridItem area="main" overflowY="auto" id="content">
diff --git a/src/lib/layout/navbar/Collapse.tsx b/src/lib/layout/navbar/Collapse.tsx
index 204e823b7..49197ce4a 100644
--- a/src/lib/layout/navbar/Collapse.tsx
+++ b/src/lib/layout/navbar/Collapse.tsx
@@ -22,7 +22,7 @@ export const CollapseNavMenu = ({
           minW="fit-content"
           key={item.category}
           borderBottom="1px solid"
-          borderColor="pebble.700"
+          borderColor="gray.700"
           sx={{
             "&:last-of-type": {
               borderBottom: "none",
@@ -36,7 +36,7 @@ export const CollapseNavMenu = ({
               <Tooltip label="Expand" placement="right">
                 <IconButton
                   aria-label="overview"
-                  variant="ghost-info"
+                  variant="ghost-accent"
                   fontSize="24px"
                   height="fit-content"
                   minW="fit-content"
@@ -60,12 +60,12 @@ export const CollapseNavMenu = ({
                   cursor="pointer"
                   p={1}
                   m={2}
-                  _hover={{ bg: "pebble.700", borderRadius: "8px" }}
+                  _hover={{ bg: "gray.700", borderRadius: "8px" }}
                   transition="all .25s ease-in-out"
                   alignItems="center"
                   position="relative"
                   bgColor={
-                    isCurrentPage(submenu.slug) ? "pebble.800" : "transparent"
+                    isCurrentPage(submenu.slug) ? "gray.800" : "transparent"
                   }
                   borderRadius={isCurrentPage(submenu.slug) ? "8px" : "0px"}
                 >
@@ -73,14 +73,14 @@ export const CollapseNavMenu = ({
                     opacity={isCurrentPage(submenu.slug) ? 1 : 0}
                     width="3px"
                     height="16px"
-                    bgColor="violet.light"
+                    bgColor="primary.light"
                     position="absolute"
                     top="8px"
                     borderRadius="2px"
                     left="0px"
                   />
                   {submenu.icon && (
-                    <CustomIcon name={submenu.icon} color="pebble.600" />
+                    <CustomIcon name={submenu.icon} color="gray.600" />
                   )}
                   {submenu.logo && (
                     <Image
diff --git a/src/lib/layout/navbar/Expand.tsx b/src/lib/layout/navbar/Expand.tsx
index 6a71ae1b1..45a8a180c 100644
--- a/src/lib/layout/navbar/Expand.tsx
+++ b/src/lib/layout/navbar/Expand.tsx
@@ -19,7 +19,7 @@ export const ExpandNavMenu = ({
         mb="4"
         key={item.category}
         borderBottom="1px solid"
-        borderColor="pebble.700"
+        borderColor="gray.700"
         sx={{
           "&:last-of-type": {
             borderBottom: "none",
@@ -34,7 +34,7 @@ export const ExpandNavMenu = ({
           </Text>
           {item.category === "Overview" && (
             <Button
-              variant="ghost-info"
+              variant="ghost-accent"
               size="xs"
               iconSpacing={1}
               leftIcon={<CustomIcon name="double-chevron-left" boxSize="3" />}
@@ -46,7 +46,7 @@ export const ExpandNavMenu = ({
           {item.category === "Contracts" && (
             <CreateNewListModal
               buttonProps={{
-                variant: "ghost-info",
+                variant: "ghost-accent",
                 iconSpacing: 1,
                 size: "xs",
                 leftIcon: <CustomIcon name="plus" boxSize="3" />,
@@ -66,28 +66,26 @@ export const ExpandNavMenu = ({
               gap="2"
               p={2}
               cursor="pointer"
-              _hover={{ bg: "pebble.700", borderRadius: "8px" }}
+              _hover={{ bg: "gray.700", borderRadius: "8px" }}
               my="1px"
               transition="all .25s ease-in-out"
               alignItems="center"
               position="relative"
-              bgColor={
-                isCurrentPage(submenu.slug) ? "pebble.800" : "transparent"
-              }
+              bgColor={isCurrentPage(submenu.slug) ? "gray.800" : "transparent"}
               borderRadius={isCurrentPage(submenu.slug) ? "8px" : "0px"}
             >
               <Flex
                 opacity={isCurrentPage(submenu.slug) ? 1 : 0}
                 width="3px"
                 height="20px"
-                bgColor="violet.light"
+                bgColor="primary.light"
                 position="absolute"
                 top="10px"
                 borderRadius="2px"
                 left="0px"
               />
               {submenu.icon && (
-                <CustomIcon name={submenu.icon} color="pebble.600" />
+                <CustomIcon name={submenu.icon} color="gray.600" />
               )}
               {submenu.logo && (
                 <Image
diff --git a/src/lib/pages/account-details/components/ErrorFetching.tsx b/src/lib/pages/account-details/components/ErrorFetching.tsx
index cbca765f2..ce975f05e 100644
--- a/src/lib/pages/account-details/components/ErrorFetching.tsx
+++ b/src/lib/pages/account-details/components/ErrorFetching.tsx
@@ -2,12 +2,7 @@ import { CustomIcon } from "lib/components/icon";
 
 export const ErrorFetching = () => (
   <>
-    <CustomIcon
-      name="alert-circle-solid"
-      color="pebble.600"
-      boxSize={4}
-      mr={3}
-    />
+    <CustomIcon name="alert-circle-solid" color="gray.600" boxSize={4} mr={3} />
     <p>Error fetching data. Please try again later.</p>
   </>
 );
diff --git a/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx b/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx
index 3b4f500f1..1bb68325a 100644
--- a/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx
+++ b/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx
@@ -32,9 +32,9 @@ export const NonRedelegatableSection = ({
     <Box
       px={6}
       py={4}
-      bgColor="pebble.900"
+      bgColor="gray.900"
       border="1px solid"
-      borderColor="pebble.700"
+      borderColor="gray.700"
       borderRadius="8px"
     >
       <Text variant="body2">
diff --git a/src/lib/pages/account-details/components/delegations/RadioCard.tsx b/src/lib/pages/account-details/components/delegations/RadioCard.tsx
index 4c947f3ec..b277f7026 100644
--- a/src/lib/pages/account-details/components/delegations/RadioCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/RadioCard.tsx
@@ -25,7 +25,7 @@ export const RadioCard = ({
     <Radio variant="card" value={value} overflowX="hidden">
       <Flex alignItems="center" gap={2} justifyContent="space-between">
         <Flex direction="column" gap={1}>
-          <Text variant="body2" textColor="pebble.400" fontWeight="500">
+          <Text variant="body2" textColor="gray.400" fontWeight="500">
             {value}
           </Text>
           {isLoading ? (
diff --git a/src/lib/pages/account-details/components/delegations/RedelegationsSection.tsx b/src/lib/pages/account-details/components/delegations/RedelegationsSection.tsx
index 162249385..63fb71857 100644
--- a/src/lib/pages/account-details/components/delegations/RedelegationsSection.tsx
+++ b/src/lib/pages/account-details/components/delegations/RedelegationsSection.tsx
@@ -28,7 +28,7 @@ export const RedelegationsSection = ({
 }: RedelegationsSectionProps) => (
   <Flex direction="column" gap={4} {...props}>
     <Flex gap={3} alignItems="center">
-      <Button variant="ghost-lilac" p={0} onClick={onBack}>
+      <Button variant="ghost-secondary" p={0} onClick={onBack}>
         <CustomIcon name="chevron-left" boxSize={6} />
       </Button>
       <TableTitle
diff --git a/src/lib/pages/account-details/components/delegations/TotalCard.tsx b/src/lib/pages/account-details/components/delegations/TotalCard.tsx
index e43ce0968..7e553b521 100644
--- a/src/lib/pages/account-details/components/delegations/TotalCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/TotalCard.tsx
@@ -33,7 +33,7 @@ export const TotalCard = ({
             {title}
           </Text>
           <Tooltip label={message}>
-            <InfoIcon color="pebble.600" boxSize={3} cursor="pointer" />
+            <InfoIcon color="gray.600" boxSize={3} cursor="pointer" />
           </Tooltip>
         </Flex>
         {!token ? (
diff --git a/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx b/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
index f2bd9d1f9..1960f8460 100644
--- a/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
@@ -24,7 +24,7 @@ export const BondedTableRow = ({
 }: BondedTableRowProps) => (
   <Grid
     templateColumns={templateColumns}
-    _hover={{ bg: "pebble.900" }}
+    _hover={{ bg: "gray.900" }}
     transition="all .25s ease-in-out"
     minW="min-content"
   >
diff --git a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
index 2a884f1a3..695bc470c 100644
--- a/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
+++ b/src/lib/pages/account-details/components/tables/redelegation/RedelegationTableRow.tsx
@@ -18,7 +18,7 @@ export const RedelegationTableRow = ({
 }: RedelegationTableRowProps) => (
   <Grid
     templateColumns={templateColumns}
-    _hover={{ bg: "pebble.900" }}
+    _hover={{ bg: "gray.900" }}
     transition="all .25s ease-in-out"
     minW="min-content"
   >
@@ -26,7 +26,7 @@ export const RedelegationTableRow = ({
       <ValidatorBadge validator={redelegation.srcValidator} />
     </TableRow>
     <TableRow>
-      <CustomIcon name="arrow-right" boxSize={6} color="pebble.600" />
+      <CustomIcon name="arrow-right" boxSize={6} color="gray.600" />
     </TableRow>
     <TableRow>
       <ValidatorBadge validator={redelegation.dstValidator} />
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 4d33d56f0..d235e9f46 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -115,7 +115,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
       {publicInfo?.description && (
         <Flex
           direction="column"
-          bg="pebble.900"
+          bg="gray.900"
           maxW="100%"
           borderRadius="8px"
           py={4}
@@ -124,7 +124,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
           flex="1"
         >
           <Flex alignItems="center" gap={1} minH="32px">
-            <CustomIcon name="website" ml="0" mb="6px" color="pebble.600" />
+            <CustomIcon name="website" ml="0" mb="6px" color="gray.600" />
             <Text variant="body2" fontWeight={500} color="text.dark">
               Public Account Description
             </Text>
@@ -138,7 +138,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
       <Tabs index={tabIndex}>
         <TabList
           borderBottom="1px solid"
-          borderColor="pebble.700"
+          borderColor="gray.700"
           overflowX="scroll"
           id={tableHeaderId}
         >
@@ -198,7 +198,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
               pb={8}
               direction="column"
               borderBottom="1px solid"
-              borderBottomColor="pebble.700"
+              borderBottomColor="gray.700"
             >
               <Text variant="body2" fontWeight="500" color="text.dark">
                 Total Account Value
@@ -219,13 +219,13 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
                 </Heading>
               )}
             </Flex>
-            <Flex borderBottom="1px solid" borderBottomColor="pebble.700">
+            <Flex borderBottom="1px solid" borderBottomColor="gray.700">
               <AssetsSection
                 walletAddress={accountAddress}
                 onViewMore={() => handleTabChange(TabIndex.Assets)}
               />
             </Flex>
-            <Flex borderBottom="1px solid" borderBottomColor="pebble.700">
+            <Flex borderBottom="1px solid" borderBottomColor="gray.700">
               <DelegationsSection
                 walletAddress={accountAddress}
                 onViewMore={() => handleTabChange(TabIndex.Delegations)}
diff --git a/src/lib/pages/block-details/components/BlockDetailsTop.tsx b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
index 6a6802f38..7758e85f3 100644
--- a/src/lib/pages/block-details/components/BlockDetailsTop.tsx
+++ b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
@@ -42,12 +42,12 @@ export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
       mb={12}
       pb={12}
       mt={6}
-      borderBottomColor="pebble.700"
+      borderBottomColor="gray.700"
       borderBottomWidth="1px"
     >
       <Flex direction="column" gap={1}>
         <Flex alignItems="center">
-          <CustomIcon name="block" boxSize="5" color="lilac.main" />
+          <CustomIcon name="block" boxSize="5" color="secondary.main" />
           <Heading as="h5" variant="h5" className="ellipsis">
             {blockData.height}
           </Heading>
@@ -64,7 +64,7 @@ export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
         </Flex>
         <Flex gap={2} alignItems="center">
           <Flex gap={1} alignItems="center">
-            <CustomIcon name="history" boxSize={3} color="pebble.600" />
+            <CustomIcon name="history" boxSize={3} color="gray.600" />
             <Text variant="body2" color="text.dark">
               {dateFromNow(blockData.timestamp)}
             </Text>
diff --git a/src/lib/pages/code-details/components/table/NoContracts.tsx b/src/lib/pages/code-details/components/table/NoContracts.tsx
index b1e38ad54..dd7859935 100644
--- a/src/lib/pages/code-details/components/table/NoContracts.tsx
+++ b/src/lib/pages/code-details/components/table/NoContracts.tsx
@@ -11,7 +11,7 @@ const DisconnectedState = () => (
     gap="16px"
     py="48px"
     borderY="1px solid"
-    borderColor="pebble.700"
+    borderColor="gray.700"
   >
     <StateImage imageVariant="empty" />
     <Text variant="body1" color="text.dark">
diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index 7dd0571b7..7cfa9a131 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -112,11 +112,11 @@ const CodeDetailsBody = observer(
             description={publicProject.publicCodeData.description}
             textLine={2}
             icon={
-              <CustomIcon name="website" ml="0" mb="6px" color="pebble.600" />
+              <CustomIcon name="website" ml="0" mb="6px" color="gray.600" />
             }
           />
         )}
-        <Divider borderColor="pebble.700" my={12} />
+        <Divider borderColor="gray.700" my={12} />
         <CodeInfoSection codeData={codeData} chainId={chainId} />
         <CodeContractsTable codeId={codeId} />
       </>
diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx
index b53fa51a4..9a6d1c1d6 100644
--- a/src/lib/pages/codes/index.tsx
+++ b/src/lib/pages/codes/index.tsx
@@ -74,7 +74,7 @@ const Codes = observer(() => {
         My Codes
       </Heading>
       <Tabs mt={8}>
-        <TabList mb="32px" borderBottom="1px" borderColor="pebble.800">
+        <TabList mb="32px" borderBottom="1px" borderColor="gray.800">
           <CustomTab count={allCodesCount}>All Codes</CustomTab>
           <CustomTab count={storedCodesCount}>My Stored Codes</CustomTab>
           <CustomTab count={savedCodesCount}>My Saved Codes </CustomTab>
diff --git a/src/lib/pages/contract-details/components/CommandSection.tsx b/src/lib/pages/contract-details/components/CommandSection.tsx
index 2692fb389..ae1f0ee79 100644
--- a/src/lib/pages/contract-details/components/CommandSection.tsx
+++ b/src/lib/pages/contract-details/components/CommandSection.tsx
@@ -70,7 +70,7 @@ export const CommandSection = () => {
     <Flex gap={6}>
       <Flex
         direction="column"
-        bg="pebble.900"
+        bg="gray.900"
         p={4}
         borderRadius="8px"
         flex={0.5}
@@ -82,7 +82,7 @@ export const CommandSection = () => {
       </Flex>
       <Flex
         direction="column"
-        bg="pebble.900"
+        bg="gray.900"
         p={4}
         borderRadius="8px"
         flex={0.5}
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index b95ac36b0..dede8dc9a 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/src/lib/pages/contract-details/components/ContractTop.tsx
@@ -60,9 +60,9 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
               aria-label="save"
               icon={
                 contractLocalInfo.lists ? (
-                  <CustomIcon name="bookmark-solid" color="violet.light" />
+                  <CustomIcon name="bookmark-solid" color="primary.light" />
                 ) : (
-                  <CustomIcon name="bookmark" color="pebble.600" />
+                  <CustomIcon name="bookmark" color="gray.600" />
                 )
               }
             />
@@ -83,7 +83,7 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
               fontSize="24px"
               variant="none"
               aria-label="save"
-              color="pebble.600"
+              color="gray.600"
               icon={<CustomIcon name="bookmark" />}
             />
           }
@@ -175,7 +175,7 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
                   fontSize="24px"
                   variant="none"
                   aria-label="edit"
-                  color="pebble.600"
+                  color="gray.600"
                   icon={<CustomIcon name="edit" />}
                 />
               }
diff --git a/src/lib/pages/contract-details/components/InstantiateInfo.tsx b/src/lib/pages/contract-details/components/InstantiateInfo.tsx
index 94686318b..847f937f6 100644
--- a/src/lib/pages/contract-details/components/InstantiateInfo.tsx
+++ b/src/lib/pages/contract-details/components/InstantiateInfo.tsx
@@ -161,7 +161,7 @@ export const InstantiateInfo = ({
         </LabelText>
       )}
 
-      <Divider border="1px solid" borderColor="pebble.700" />
+      <Divider border="1px solid" borderColor="gray.700" />
 
       {instantiateInfo &&
         (instantiateInfo.createdHeight ? (
diff --git a/src/lib/pages/contract-details/components/JsonInfo.tsx b/src/lib/pages/contract-details/components/JsonInfo.tsx
index df2987f27..fc45cd90e 100644
--- a/src/lib/pages/contract-details/components/JsonInfo.tsx
+++ b/src/lib/pages/contract-details/components/JsonInfo.tsx
@@ -24,8 +24,8 @@ export const JsonInfo = ({
         align="center"
         p="12px 16px"
         borderRadius="8px"
-        background="pebble.900"
-        _hover={{ backgroundColor: "pebble.800" }}
+        background="gray.900"
+        _hover={{ backgroundColor: "gray.800" }}
         transition="all .25s ease-in-out"
         cursor="pointer"
         onClick={() => setExpand((prev) => !prev)}
@@ -36,7 +36,7 @@ export const JsonInfo = ({
         <CustomIcon
           transition="all .25s ease-in-out"
           name={expand ? "chevron-up" : "chevron-down"}
-          color="pebble.600"
+          color="gray.600"
         />
       </Flex>
       <div
diff --git a/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx b/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
index 46bf1de76..9ee15990e 100644
--- a/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
+++ b/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
@@ -38,8 +38,8 @@ export const UserContractDesc = ({ contractData }: UserContractDescProps) => {
         triggerElement={
           <Button
             size="xs"
-            color="lilac.main"
-            variant="ghost-lilac"
+            color="secondary.main"
+            variant="ghost-secondary"
             leftIcon={<CustomIcon name="edit" boxSize="3" />}
           >
             {description ? "Edit" : "Add Description"}
@@ -59,7 +59,7 @@ export const UserContractDesc = ({ contractData }: UserContractDescProps) => {
   return (
     <Flex
       direction="column"
-      bg="pebble.900"
+      bg="gray.900"
       maxW="100%"
       borderRadius="8px"
       p={4}
diff --git a/src/lib/pages/contract-details/components/contract-description/index.tsx b/src/lib/pages/contract-details/components/contract-description/index.tsx
index 461915302..29a096cd9 100644
--- a/src/lib/pages/contract-details/components/contract-description/index.tsx
+++ b/src/lib/pages/contract-details/components/contract-description/index.tsx
@@ -16,7 +16,7 @@ export const ContractDesc = ({ contractData }: ContractDescProps) => (
         title="Public Contract Description"
         description={contractData.publicProject.publicInfo.description}
         textLine={contractData.contractLocalInfo?.description ? 4 : 2}
-        icon={<CustomIcon name="website" ml="0" mb="6px" color="pebble.600" />}
+        icon={<CustomIcon name="website" ml="0" mb="6px" color="gray.600" />}
       />
     )}
     <UserContractDesc contractData={contractData} />
diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index 7906997e1..339ff3e00 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -92,7 +92,7 @@ const ContractDetailsBody = observer(
           History
         </Heading>
         <Tabs>
-          <TabList borderBottom="1px solid" borderColor="pebble.700">
+          <TabList borderBottom="1px solid" borderColor="gray.700">
             <CustomTab count={tableCounts.transactionsCount}>
               Transactions
             </CustomTab>
diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx
index 2307595d2..417515fc0 100644
--- a/src/lib/pages/contract-list/slug.tsx
+++ b/src/lib/pages/contract-list/slug.tsx
@@ -84,7 +84,7 @@ const ContractsByList = observer(() => {
         w="full"
         spacing="4px"
         separator={
-          <CustomIcon name="chevron-right" boxSize="3" color="pebble.600" />
+          <CustomIcon name="chevron-right" boxSize="3" color="gray.600" />
         }
       >
         <BreadcrumbItem
@@ -144,7 +144,7 @@ const ContractsByList = observer(() => {
           {contractListInfo.isInfoEditable && (
             <Menu>
               <MenuButton h="full" variant="ghost-gray" as={Button}>
-                <CustomIcon name="more" color="pebble.600" />
+                <CustomIcon name="more" color="gray.600" />
               </MenuButton>
               <MenuList>
                 <EditListNameModal
@@ -153,7 +153,7 @@ const ContractsByList = observer(() => {
                     value: contractListInfo.slug,
                   }}
                   menuItemProps={{
-                    icon: <CustomIcon name="edit" color="pebble.600" />,
+                    icon: <CustomIcon name="edit" color="gray.600" />,
                     children: "Edit list name",
                   }}
                   reroute
diff --git a/src/lib/pages/deploy/index.tsx b/src/lib/pages/deploy/index.tsx
index e8a4c9354..66e5a12fd 100644
--- a/src/lib/pages/deploy/index.tsx
+++ b/src/lib/pages/deploy/index.tsx
@@ -39,11 +39,11 @@ const getAlertContent = (
         description: "Your address is allowed to directly upload Wasm files",
       }
     : {
-        variant: "violet",
+        variant: "primary",
         icon: (
           <CustomIcon
             name="info-circle-solid"
-            color="violet.light"
+            color="primary.light"
             boxSize={4}
           />
         ),
diff --git a/src/lib/pages/execute/index.tsx b/src/lib/pages/execute/index.tsx
index 15da38428..503c16d2d 100644
--- a/src/lib/pages/execute/index.tsx
+++ b/src/lib/pages/execute/index.tsx
@@ -92,7 +92,7 @@ const Execute = () => {
         </Heading>
         <Box>
           <Button
-            variant="ghost-lilac"
+            variant="ghost-secondary"
             size="sm"
             p="unset"
             pl="2"
diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index b0fe9ad58..50683d299 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -161,7 +161,7 @@ const Faucet = () => {
         label="Receiving Address"
         helperAction={
           <Text
-            color="honeydew.main"
+            color="accent.main"
             fontWeight="600"
             variant="body3"
             cursor="pointer"
diff --git a/src/lib/pages/home/components/PastTransaction.tsx b/src/lib/pages/home/components/PastTransaction.tsx
index 088ffd186..b73639cfe 100644
--- a/src/lib/pages/home/components/PastTransaction.tsx
+++ b/src/lib/pages/home/components/PastTransaction.tsx
@@ -22,8 +22,8 @@ export const PastTransaction = () => (
       </Text>
       <AppLink href="/past-txs">
         <Text
-          color="lilac.main"
-          _hover={{ color: "lilac.light" }}
+          color="secondary.main"
+          _hover={{ color: "secondary.light" }}
           transition="all .25s ease-in-out"
         >
           Past Transactions
diff --git a/src/lib/pages/home/components/QuickMenu.tsx b/src/lib/pages/home/components/QuickMenu.tsx
index 641525027..291673740 100644
--- a/src/lib/pages/home/components/QuickMenu.tsx
+++ b/src/lib/pages/home/components/QuickMenu.tsx
@@ -48,7 +48,7 @@ const secondaryMenu: SecondaryMenuType[] = [
 ];
 
 export const QuickMenu = () => (
-  <Flex direction="column" gap={4} bg="pebble.900" p="48px">
+  <Flex direction="column" gap={4} bg="gray.900" p="48px">
     <Heading as="h5" variant="h5">
       Start using Celatone
     </Heading>
@@ -59,7 +59,7 @@ export const QuickMenu = () => (
     <Flex gap={4}>
       <AppLink href="/deploy" style={{ width: "55%" }}>
         <Flex
-          bgGradient="linear(to-tr, violet.main, violet.light)"
+          bgGradient="linear(to-tr, primary.main, primary.light)"
           _hover={{ opacity: "85%" }}
           style={cardProps}
           transition="all .25s ease-in-out"
@@ -83,17 +83,13 @@ export const QuickMenu = () => (
           <AppLink href={`/${item.slug}`} key={item.slug}>
             <Flex
               style={cardProps}
-              _hover={{ bg: "pebble.700" }}
+              _hover={{ bg: "gray.700" }}
               transition="all .25s ease-in-out"
-              bg="pebble.800"
+              bg="gray.800"
               alignItems="center"
             >
               <Flex alignItems="center" gap={3}>
-                <CustomIcon
-                  name={item.icon}
-                  boxSize="24px"
-                  color="pebble.600"
-                />
+                <CustomIcon name={item.icon} boxSize="24px" color="gray.600" />
                 <Box>
                   <Text variant="body1" fontWeight="800">
                     {item.title}
@@ -106,7 +102,7 @@ export const QuickMenu = () => (
               <CustomIcon
                 name="chevron-right"
                 boxSize="24px"
-                color="pebble.600"
+                color="gray.600"
               />
             </Flex>
           </AppLink>
diff --git a/src/lib/pages/home/components/RecentActivities.tsx b/src/lib/pages/home/components/RecentActivities.tsx
index 686e99d85..9a82f9256 100644
--- a/src/lib/pages/home/components/RecentActivities.tsx
+++ b/src/lib/pages/home/components/RecentActivities.tsx
@@ -33,9 +33,9 @@ export const RecentActivities = observer(() => {
               minW="360px"
               cursor="pointer"
               p={6}
-              bg="pebble.900"
+              bg="gray.900"
               borderRadius="8px"
-              _hover={{ bg: "pebble.800" }}
+              _hover={{ bg: "gray.800" }}
               transition="all .25s ease-in-out"
               key={item.type + item.contractAddress + item.timestamp}
               onClick={() =>
@@ -48,9 +48,9 @@ export const RecentActivities = observer(() => {
               <Flex alignItems="center" gap={1}>
                 <CustomIcon
                   name={item.type === "query" ? "query" : "execute"}
-                  color="honeydew.main"
+                  color="accent.main"
                 />
-                <Text variant="body2" color="honeydew.main">
+                <Text variant="body2" color="accent.main">
                   {item.type === "query" ? "Query" : "Execute"}
                 </Text>
               </Flex>
@@ -58,7 +58,7 @@ export const RecentActivities = observer(() => {
                 <Text
                   variant="body3"
                   padding="4px 8px"
-                  backgroundColor="pebble.700"
+                  backgroundColor="gray.700"
                   borderRadius="16px"
                 >
                   {item.action}
@@ -92,7 +92,7 @@ export const RecentActivities = observer(() => {
           px={12}
           borderTopWidth={1}
           borderBottomWidth={1}
-          borderColor="pebble.700"
+          borderColor="gray.700"
           justifyContent="center"
           alignItems="center"
           minH="128px"
diff --git a/src/lib/pages/instantiate/completed.tsx b/src/lib/pages/instantiate/completed.tsx
index c5429d1ce..880c07d6f 100644
--- a/src/lib/pages/instantiate/completed.tsx
+++ b/src/lib/pages/instantiate/completed.tsx
@@ -53,7 +53,7 @@ const Completed = ({ txInfo }: CompletedProps) => {
         gap={6}
         w="full"
         borderBottomWidth={1}
-        borderBottomColor="pebble.700"
+        borderBottomColor="gray.700"
         pb={8}
         my={8}
       >
diff --git a/src/lib/pages/instantiate/component/Footer.tsx b/src/lib/pages/instantiate/component/Footer.tsx
index d2b757ed7..2bc14b8c3 100644
--- a/src/lib/pages/instantiate/component/Footer.tsx
+++ b/src/lib/pages/instantiate/component/Footer.tsx
@@ -14,7 +14,7 @@ export const Footer = ({ onInstantiate, disabled, loading }: FooterProps) => {
   return (
     <Box
       w="full"
-      bg="pebble.900"
+      bg="gray.900"
       h="70px"
       bottom="0"
       position="sticky"
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index ddf0510f3..17ac8a9da 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -320,7 +320,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             error={validateAdmin(watchAdminAddress)}
             helperAction={
               <Text
-                color="honeydew.main"
+                color="accent.main"
                 fontWeight="600"
                 variant="body3"
                 cursor="pointer"
diff --git a/src/lib/pages/network-overview/index.tsx b/src/lib/pages/network-overview/index.tsx
index 15cc56105..3d13cc345 100644
--- a/src/lib/pages/network-overview/index.tsx
+++ b/src/lib/pages/network-overview/index.tsx
@@ -52,9 +52,9 @@ const CardInfo = ({
 }: CardInfoProps) => (
   <Flex
     style={cardProps}
-    _hover={{ bg: "pebble.700" }}
+    _hover={{ bg: "gray.700" }}
     transition="all .25s ease-in-out"
-    bg="pebble.800"
+    bg="gray.800"
     onClick={navigate}
   >
     <Box>
@@ -64,11 +64,7 @@ const CardInfo = ({
         </Text>
         <Tooltip label={tooltip}>
           <Flex cursor="pointer">
-            <CustomIcon
-              name="info-circle-solid"
-              boxSize="3"
-              color="pebble.600"
-            />
+            <CustomIcon name="info-circle-solid" boxSize="3" color="gray.600" />
           </Flex>
         </Tooltip>
       </Flex>
@@ -80,7 +76,7 @@ const CardInfo = ({
         </Heading>
       )}
     </Box>
-    <CustomIcon name="chevron-right" boxSize={5} color="pebble.600" />
+    <CustomIcon name="chevron-right" boxSize={5} color="gray.600" />
   </Flex>
 );
 
diff --git a/src/lib/pages/not-found/index.tsx b/src/lib/pages/not-found/index.tsx
index 601a013f6..a0c3c118b 100644
--- a/src/lib/pages/not-found/index.tsx
+++ b/src/lib/pages/not-found/index.tsx
@@ -17,7 +17,7 @@ const NotFoundPage = () => {
       <BackButton />
       <Flex
         borderY="1px solid"
-        borderColor="pebble.700"
+        borderColor="gray.700"
         justify="center"
         align="center"
         direction="column"
diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx
index 27120cac3..44a34e56e 100644
--- a/src/lib/pages/past-txs/index.tsx
+++ b/src/lib/pages/past-txs/index.tsx
@@ -145,7 +145,7 @@ const PastTxs = () => {
             h="full"
           />
           <InputRightElement pointerEvents="none" h="full" mr="1">
-            <CustomIcon name="search" color="pebble.600" />
+            <CustomIcon name="search" color="gray.600" />
           </InputRightElement>
         </InputGroup>
         <Flex gap={3}>
diff --git a/src/lib/pages/proposal/components/AssetBox.tsx b/src/lib/pages/proposal/components/AssetBox.tsx
index 63483d237..9c163f8ab 100644
--- a/src/lib/pages/proposal/components/AssetBox.tsx
+++ b/src/lib/pages/proposal/components/AssetBox.tsx
@@ -35,9 +35,9 @@ export const AssetBox = ({ baseDenom }: { baseDenom: Option<string> }) => {
       padding="16px 12px"
       borderRadius="8px"
       border="1px solid"
-      borderColor="pebble.700"
+      borderColor="gray.700"
       position="relative"
-      color={tokenInfo ? "text.main" : "pebble.600"}
+      color={tokenInfo ? "text.main" : "gray.600"}
     >
       <AssetLabel>Asset</AssetLabel>
       <Flex align="center">
diff --git a/src/lib/pages/proposal/components/Footer.tsx b/src/lib/pages/proposal/components/Footer.tsx
index 67689a4f6..e0b9cab42 100644
--- a/src/lib/pages/proposal/components/Footer.tsx
+++ b/src/lib/pages/proposal/components/Footer.tsx
@@ -17,7 +17,7 @@ export const Footer = ({
     <Grid
       w="full"
       px="48px"
-      bg="pebble.900"
+      bg="gray.900"
       h="70px"
       bottom="0"
       position="sticky"
diff --git a/src/lib/pages/proposal/utils/getAlert.tsx b/src/lib/pages/proposal/utils/getAlert.tsx
index a2a6ada53..8556610fa 100644
--- a/src/lib/pages/proposal/utils/getAlert.tsx
+++ b/src/lib/pages/proposal/utils/getAlert.tsx
@@ -43,10 +43,10 @@ export const getAlert = (
   }
   if (enteredAmount.eq(minVotingDepositAmount)) {
     return {
-      variant: "honeydew",
+      variant: "accent",
       description:
         "The proposal will proceed to voting period immediately after created.",
-      icon: <CustomIcon name="info-circle" color="honeydew.main" boxSize="4" />,
+      icon: <CustomIcon name="info-circle" color="accent.main" boxSize="4" />,
     };
   }
   if (big(minVotingDepositAmount).lt(enteredAmount)) {
diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index 486d94ec7..4e170dbe1 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -236,12 +236,12 @@ const ProposalToWhitelist = () => {
                 mt={12}
                 p={4}
                 gap={6}
-                bgColor="pebble.900"
+                bgColor="gray.900"
                 flexDirection="column"
                 borderRadius="8px"
               >
                 <Flex gap={2} alignItems="center">
-                  <CustomIcon name="proposal-solid" color="pebble.600" />
+                  <CustomIcon name="proposal-solid" color="gray.600" />
                   <Heading as="h6" variant="h6">
                     Fill in Proposal Details
                   </Heading>
@@ -251,7 +251,7 @@ const ProposalToWhitelist = () => {
                   control={control}
                   placeholder="ex. Allow XYZ to store code without proposal"
                   label="Proposal Title"
-                  labelBgColor="pebble.900"
+                  labelBgColor="gray.900"
                   variant="floating"
                   rules={{
                     required: "Proposal Title is required",
@@ -269,7 +269,7 @@ const ProposalToWhitelist = () => {
                   label="Proposal Description"
                   placeholder="Please describe your proposal for whitelist. Include all relevant details such as the project you work on or addresses you want to add to the allow list and the reason for the proposal. The description should be clear and concise to help everyone understand your request."
                   variant="floating"
-                  labelBgColor="pebble.900"
+                  labelBgColor="gray.900"
                   rules={{
                     required: "Proposal Description is required",
                   }}
@@ -374,7 +374,7 @@ const ProposalToWhitelist = () => {
                       cursor="pointer"
                       variant="body3"
                       minW={16}
-                      color="honeydew.main"
+                      color="accent.main"
                       onClick={() => {
                         if (!minDeposit) return;
                         setValue(
diff --git a/src/lib/pages/proposals/components/ProposalTextCell.tsx b/src/lib/pages/proposals/components/ProposalTextCell.tsx
index 84dffff72..b70ae9bef 100644
--- a/src/lib/pages/proposals/components/ProposalTextCell.tsx
+++ b/src/lib/pages/proposals/components/ProposalTextCell.tsx
@@ -36,7 +36,7 @@ export const ProposalTextCell = ({
       position="absolute"
       justify="center"
       borderRadius="8px"
-      bgColor={showName ? "pebble.800" : "undefined"}
+      bgColor={showName ? "gray.800" : "undefined"}
       px={4}
       maxW={showName ? undefined : "full"}
       onMouseOver={() => setIsHoverText(true)}
diff --git a/src/lib/pages/proposals/components/ProposalTypeFilter.tsx b/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
index 2103d104e..65e9d8133 100644
--- a/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
+++ b/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
@@ -131,7 +131,7 @@ export const ProposalTypeFilter = forwardRef<
                 onSelect={() => selectOption(cosmosType)}
               />
             ))}
-            {cosmosTypes.length && <Divider borderColor="pebble.700" />}
+            {cosmosTypes.length && <Divider borderColor="gray.700" />}
 
             {generalTypes.map((generalType) => (
               <FilterDropdownItem
diff --git a/src/lib/pages/proposals/table/ProposalTableHeader.tsx b/src/lib/pages/proposals/table/ProposalTableHeader.tsx
index db4a94c30..973fda428 100644
--- a/src/lib/pages/proposals/table/ProposalTableHeader.tsx
+++ b/src/lib/pages/proposals/table/ProposalTableHeader.tsx
@@ -18,7 +18,7 @@ export const ProposalTableHeader = ({
       <TableHeaderFreeze
         left={columnsWidth && columnsWidth[0]}
         boxShadow={boxShadow}
-        color="pebble.800"
+        color="gray.800"
       >
         <Text color="text.main">Proposal Title/Type</Text>
       </TableHeaderFreeze>
diff --git a/src/lib/pages/proposals/table/ProposalTableRow.tsx b/src/lib/pages/proposals/table/ProposalTableRow.tsx
index c0a430b46..2de771f8a 100644
--- a/src/lib/pages/proposals/table/ProposalTableRow.tsx
+++ b/src/lib/pages/proposals/table/ProposalTableRow.tsx
@@ -36,8 +36,8 @@ export const ProposalTableRow = ({
     proposal.status === ProposalStatus.VOTING_PERIOD;
 
   const hoverBg = (): Option<string> => {
-    if (proposal.isExpedited && isDepositOrVoting) return "violet.background";
-    return isDepositFailed ? undefined : "pebble.900";
+    if (proposal.isExpedited && isDepositOrVoting) return "primary.background";
+    return isDepositFailed ? undefined : "gray.900";
   };
 
   return (
@@ -76,7 +76,7 @@ export const ProposalTableRow = ({
       <TableRowFreeze
         left={columnsWidth && columnsWidth[0]}
         boxShadow={boxShadow}
-        color="pebble.800"
+        color="gray.800"
       >
         <ProposalTextCell
           title={proposal.title}
diff --git a/src/lib/pages/public-project/components/BookmarkButton.tsx b/src/lib/pages/public-project/components/BookmarkButton.tsx
index a1799696b..5301a6b4f 100644
--- a/src/lib/pages/public-project/components/BookmarkButton.tsx
+++ b/src/lib/pages/public-project/components/BookmarkButton.tsx
@@ -54,10 +54,10 @@ const StyledButton = ({
   >
     <CustomIcon
       name={icon}
-      color={icon === "bookmark" ? "pebble.600" : "violet.light"}
+      color={icon === "bookmark" ? "gray.600" : "primary.light"}
     />
     {hasText && (
-      <Text color={icon === "bookmark" ? "text.dark" : "violet.light"}>
+      <Text color={icon === "bookmark" ? "text.dark" : "primary.light"}>
         {actionText}
       </Text>
     )}
diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx
index c552cb136..f0338d105 100644
--- a/src/lib/pages/public-project/components/DetailHeader.tsx
+++ b/src/lib/pages/public-project/components/DetailHeader.tsx
@@ -26,7 +26,7 @@ export const DetailHeader = ({ details, slug }: DetailHeaderProps) => (
       w="full"
       spacing={1}
       separator={
-        <CustomIcon name="chevron-right" boxSize="3" color="pebble.600" />
+        <CustomIcon name="chevron-right" boxSize="3" color="gray.600" />
       }
     >
       <BreadcrumbItem
diff --git a/src/lib/pages/public-project/components/PublicProjectCard.tsx b/src/lib/pages/public-project/components/PublicProjectCard.tsx
index 4c9adb44b..97374a625 100644
--- a/src/lib/pages/public-project/components/PublicProjectCard.tsx
+++ b/src/lib/pages/public-project/components/PublicProjectCard.tsx
@@ -32,8 +32,8 @@ export const PublicProjectCard = observer(
         pt={4}
         pb={2}
         alignItems="center"
-        bg="pebble.800"
-        _hover={{ bg: "pebble.700" }}
+        bg="gray.800"
+        _hover={{ bg: "gray.700" }}
         transition="all .25s ease-in-out"
         borderRadius="8px"
         gap={4}
diff --git a/src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx b/src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx
index f244ea36e..c16e631e0 100644
--- a/src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx
+++ b/src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx
@@ -43,7 +43,7 @@ export const PublicProjectAccountRow = ({
     <Grid
       templateColumns={templateColumns}
       onClick={goToDetail}
-      _hover={{ bg: "pebble.900" }}
+      _hover={{ bg: "gray.900" }}
       transition="all .25s ease-in-out"
       cursor="pointer"
       minW="min-content"
diff --git a/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx b/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx
index 3821e1119..adf5da821 100644
--- a/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx
+++ b/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx
@@ -34,7 +34,7 @@ export const PublicProjectCodeRow = ({
     <Grid
       templateColumns={templateColumns}
       onClick={goToCodeDetails}
-      _hover={{ bg: "pebble.900" }}
+      _hover={{ bg: "gray.900" }}
       transition="all .25s ease-in-out"
       cursor="pointer"
       minW="min-content"
diff --git a/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx b/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx
index bbd1b4825..f61ad1b16 100644
--- a/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx
+++ b/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx
@@ -54,7 +54,7 @@ export const PublicProjectContractRow = ({
     <Grid
       templateColumns={templateColumns}
       onClick={goToContractDetails}
-      _hover={{ bg: "pebble.900" }}
+      _hover={{ bg: "gray.900" }}
       transition="all .25s ease-in-out"
       cursor="pointer"
       minW="min-content"
@@ -74,11 +74,7 @@ export const PublicProjectContractRow = ({
         {publicContractInfo.publicInfo.description && (
           <Tooltip label={publicContractInfo.publicInfo.description}>
             <Flex cursor="pointer">
-              <CustomIcon
-                name="info-circle"
-                boxSize="12px"
-                color="pebble.600"
-              />
+              <CustomIcon name="info-circle" boxSize="12px" color="gray.600" />
             </Flex>
           </Tooltip>
         )}
diff --git a/src/lib/pages/public-project/slug.tsx b/src/lib/pages/public-project/slug.tsx
index 6c967f85d..184c2a7df 100644
--- a/src/lib/pages/public-project/slug.tsx
+++ b/src/lib/pages/public-project/slug.tsx
@@ -47,7 +47,7 @@ export const ProjectDetail = () => {
     <PageContainer>
       <DetailHeader details={projectDetail} slug={slug} />
       <Tabs index={tabIndex}>
-        <TabList my={6} borderBottom="1px" borderColor="pebble.800">
+        <TabList my={6} borderBottom="1px" borderColor="gray.800">
           <CustomTab
             count={
               publicCodes.length +
diff --git a/src/lib/pages/query/index.tsx b/src/lib/pages/query/index.tsx
index a76731f12..c84a93edb 100644
--- a/src/lib/pages/query/index.tsx
+++ b/src/lib/pages/query/index.tsx
@@ -100,7 +100,7 @@ const Query = () => {
         </Heading>
         <Box>
           <Button
-            variant="ghost-lilac"
+            variant="ghost-secondary"
             size="sm"
             p="unset"
             pl="2"
diff --git a/src/lib/pages/tx-details/components/TxHeader.tsx b/src/lib/pages/tx-details/components/TxHeader.tsx
index 70b8a7d9b..f744d3660 100644
--- a/src/lib/pages/tx-details/components/TxHeader.tsx
+++ b/src/lib/pages/tx-details/components/TxHeader.tsx
@@ -13,7 +13,7 @@ interface TxHeaderProps extends FlexProps {
 }
 
 const DotSeparator = () => (
-  <Box bg="lilac.darker" borderRadius="50%" w="4px" h="4px" />
+  <Box bg="secondary.darker" borderRadius="50%" w="4px" h="4px" />
 );
 
 export const TxHeader = ({ txData, ...flexProps }: TxHeaderProps) => {
diff --git a/src/lib/pages/tx-details/components/tx-message/EventBox.tsx b/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
index 0c5458a0b..a9eea6e7d 100644
--- a/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
@@ -106,8 +106,8 @@ export const EventBox = ({ event, msgIndex }: EventBoxProps) => {
       direction="column"
       borderRadius="8px"
       transition="all .25s ease-in-out"
-      backgroundColor="pebble.900"
-      _hover={{ backgroundColor: "pebble.800" }}
+      backgroundColor="gray.900"
+      _hover={{ backgroundColor: "gray.800" }}
     >
       <Flex
         align="center"
@@ -124,17 +124,12 @@ export const EventBox = ({ event, msgIndex }: EventBoxProps) => {
         p={4}
       >
         <Flex fontSize="14px" gap={2} fontWeight={500} align="center">
-          <CustomIcon
-            name="contract-list"
-            boxSize={4}
-            color="pebble.600"
-            m={0}
-          />
+          <CustomIcon name="contract-list" boxSize={4} color="gray.600" m={0} />
           {`[${msgIndex}] ${event.type}`}
         </Flex>
         <CustomIcon
           name="chevron-down"
-          color="pebble.600"
+          color="gray.600"
           boxSize={4}
           transform={expand ? "rotate(180deg)" : "rotate(0)"}
           transition="all .25s ease-in-out"
@@ -147,7 +142,7 @@ export const EventBox = ({ event, msgIndex }: EventBoxProps) => {
         transition="all .25s ease-in-out"
       >
         <Flex direction="column" p={4} pt={0} ref={measuredRef}>
-          <Box mb={4} h="1px" bgColor="pebble.700" />
+          <Box mb={4} h="1px" bgColor="gray.700" />
           <TxReceiptRender
             keyPrefix={msgIndex.toString() + event.type}
             variant="tx-page"
diff --git a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
index f83c7b224..270881067 100644
--- a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
@@ -308,7 +308,7 @@ export const TxMsgExpand = ({
         });
         onClick();
       }}
-      _hover={{ backgroundColor: "pebble.800" }}
+      _hover={{ backgroundColor: "gray.800" }}
       _after={{
         content: '""',
         position: "absolute",
@@ -317,17 +317,17 @@ export const TxMsgExpand = ({
         transform: "translateX(-50%)",
         h: "1px",
         w: "99%",
-        bg: "pebble.700",
+        bg: "gray.700",
       }}
     >
       <Flex align="center" gap={2} fontSize="16px" fontWeight={500}>
-        <CustomIcon name={msgIcon} boxSize={4} color="lilac.main" m={0} />
+        <CustomIcon name={msgIcon} boxSize={4} color="secondary.main" m={0} />
         {content}
-        {isIBC && <Tag variant="honeydew-dark">IBC</Tag>}
+        {isIBC && <Tag variant="accent-dark">IBC</Tag>}
       </Flex>
       <CustomIcon
         name="chevron-down"
-        color="pebble.600"
+        color="gray.600"
         boxSize={4}
         transform={isExpand ? "rotate(180deg)" : "rotate(0)"}
         transition="all .25s ease-in-out"
diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
index 0b332edb1..ddfde0891 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
@@ -90,7 +90,7 @@ export const generateReceipts = (
               KB
               <CopyButton
                 value={details.wasm_byte_code}
-                variant="ghost-lilac"
+                variant="ghost-secondary"
                 buttonText="Click to Copy"
                 hasIcon={false}
                 mt={-1}
diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/renderUtils.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/renderUtils.tsx
index c74feca10..a1d9dc4cd 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/renderUtils.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/renderUtils.tsx
@@ -35,7 +35,7 @@ export const getCommonReceiptHtml = <T extends HtmlType>({
   switch (true) {
     case value === null:
       return (
-        <Text variant="body2" color="pebble.600">
+        <Text variant="body2" color="gray.600">
           null
         </Text>
       );
diff --git a/src/lib/styles/theme/colors.ts b/src/lib/styles/theme/colors.ts
index d27e476df..62415d67d 100644
--- a/src/lib/styles/theme/colors.ts
+++ b/src/lib/styles/theme/colors.ts
@@ -39,9 +39,6 @@ const extendedColors: BasicColor = {
     dark: "#207966",
     background: "#102E28",
   },
-  info: {
-    main: "#29B6F6",
-  },
   background: {
     main: "#111117",
     overlay: "rgba(17, 17, 23, 0.7)",
@@ -51,7 +48,7 @@ const extendedColors: BasicColor = {
     dark: "#ADADC2",
     disabled: "#8A8AA5",
   },
-  violet: {
+  primary: {
     main: "#5942F3",
     light: "#9793F3",
     lighter: "#DCDBFB",
@@ -59,7 +56,14 @@ const extendedColors: BasicColor = {
     darker: "#292676",
     background: "#181733",
   },
-  honeydew: {
+  secondary: {
+    main: "#D8BEFC",
+    light: "#E8D8FD",
+    dark: "#A28FBD",
+    darker: "#6C5F7E",
+    background: "#36303F",
+  },
+  accent: {
     main: "#C6E141",
     light: "#DDED8D",
     lighter: "#E8F3B3",
@@ -67,14 +71,7 @@ const extendedColors: BasicColor = {
     darker: "#637121",
     background: "#3D470B",
   },
-  lilac: {
-    main: "#D8BEFC",
-    light: "#E8D8FD",
-    dark: "#A28FBD",
-    darker: "#6C5F7E",
-    background: "#36303F",
-  },
-  pebble: {
+  gray: {
     100: "#F7F2FE",
     400: "#ADADC2",
     500: "#8A8AA5",
diff --git a/src/lib/styles/theme/components/alert.ts b/src/lib/styles/theme/components/alert.ts
index f54696b39..5db88f7f2 100644
--- a/src/lib/styles/theme/components/alert.ts
+++ b/src/lib/styles/theme/components/alert.ts
@@ -3,19 +3,19 @@ import type { ColorProps, ComponentStyleConfig } from "@chakra-ui/react";
 const dupStyleKeys = ["title", "container", "description"];
 
 const generateVariantStyle = (
-  variant: "honeydew" | "violet" | "success" | "warning" | "error"
+  variant: "accent" | "primary" | "success" | "warning" | "error"
 ) => {
   let mainColor: ColorProps["color"];
   let bgColor: ColorProps["color"];
   let borderColor: ColorProps["color"];
 
   switch (variant) {
-    case "violet":
+    case "primary":
       mainColor = `${variant}.light`;
       bgColor = `${variant}.background`;
       borderColor = `${variant}.dark`;
       break;
-    case "honeydew":
+    case "accent":
     case "error":
     default:
       mainColor = `${variant}.main`;
@@ -46,7 +46,7 @@ export const Alert: ComponentStyleConfig = {
       letterSpacing: "0.4px",
     },
     container: {
-      bg: "pebble.800",
+      bg: "gray.800",
       border: "1px solid",
       borderRadius: "8px",
     },
@@ -57,8 +57,8 @@ export const Alert: ComponentStyleConfig = {
     },
   },
   variants: {
-    honeydew: generateVariantStyle("honeydew"),
-    violet: generateVariantStyle("violet"),
+    accent: generateVariantStyle("accent"),
+    primary: generateVariantStyle("primary"),
     success: generateVariantStyle("success"),
     warning: generateVariantStyle("warning"),
     error: generateVariantStyle("error"),
diff --git a/src/lib/styles/theme/components/badge.ts b/src/lib/styles/theme/components/badge.ts
index 39cc8433e..efccc613f 100644
--- a/src/lib/styles/theme/components/badge.ts
+++ b/src/lib/styles/theme/components/badge.ts
@@ -12,13 +12,13 @@ export const Badge: ComponentStyleConfig = {
     maxH: "20px",
   },
   variants: {
-    violet: { background: "violet.darker", color: "text.main" },
+    primary: { background: "primary.darker", color: "text.main" },
     gray: {
-      background: "pebble.700",
+      background: "gray.700",
       color: "text.main",
     },
-    lilac: {
-      background: "lilac.main",
+    secondary: {
+      background: "secondary.main",
       color: "background.main",
     },
   },
diff --git a/src/lib/styles/theme/components/button.ts b/src/lib/styles/theme/components/button.ts
index 844e618ea..b2c3c2dcc 100644
--- a/src/lib/styles/theme/components/button.ts
+++ b/src/lib/styles/theme/components/button.ts
@@ -1,19 +1,19 @@
 import type { ComponentStyleConfig } from "@chakra-ui/react";
 import { defineStyle } from "@chakra-ui/react";
 
-const pebble500 = "pebble.500";
-const pebble600 = "pebble.600";
-const pebble700 = "pebble.700";
-const pebble800 = "pebble.800";
-const violetLight = "violet.light";
-const violetDark = "violet.dark";
-const violetBg = "violet.background";
-const honeydewBg = "honeydew.background";
-const honeydewMain = "honeydew.main";
-const honeydewDarker = "honeydew.darker";
+const gray500 = "gray.500";
+const gray600 = "gray.600";
+const gray700 = "gray.700";
+const gray800 = "gray.800";
+const primaryLight = "primary.light";
+const primaryDark = "primary.dark";
+const primaryBg = "primary.background";
+const accentBg = "accent.background";
+const accentMain = "accent.main";
+const accentDarker = "accent.darker";
 const borderDefualt = "1px solid";
 const errorDark = "error.dark";
-const lilacBg = "lilac.background";
+const secondaryBg = "secondary.background";
 
 const generateStyle = ({
   basic,
@@ -72,33 +72,33 @@ export const Button: ComponentStyleConfig = {
   variants: {
     primary: generateStyle({
       basic: {
-        background: "violet.main",
+        background: "primary.main",
         color: "text.main",
         "& span": {
           color: "text.main",
         },
       },
       disabled: {
-        background: violetBg,
-        color: pebble600,
+        background: primaryBg,
+        color: gray600,
         "& span": {
-          color: pebble600,
+          color: gray600,
         },
       },
-      hoverBg: violetDark,
-      activeBg: violetLight,
+      hoverBg: primaryDark,
+      activeBg: primaryLight,
     }),
     "gray-solid": generateStyle({
       basic: {
-        background: pebble800,
+        background: gray800,
         color: "text.main",
       },
       disabled: {
-        background: pebble800,
-        color: pebble500,
+        background: gray800,
+        color: gray500,
       },
-      hoverBg: pebble700,
-      activeBg: pebble700,
+      hoverBg: gray700,
+      activeBg: gray700,
     }),
     error: generateStyle({
       basic: { background: "error.main", color: "black" },
@@ -112,30 +112,30 @@ export const Button: ComponentStyleConfig = {
     "outline-primary": generateStyle({
       basic: {
         border: borderDefualt,
-        borderColor: violetLight,
-        color: violetLight,
+        borderColor: primaryLight,
+        color: primaryLight,
         "> div": {
-          color: violetLight,
+          color: primaryLight,
         },
         "> svg": {
-          color: violetLight,
+          color: primaryLight,
         },
       },
       disabled: {
         border: borderDefualt,
-        borderColor: pebble700,
-        color: pebble600,
+        borderColor: gray700,
+        color: gray600,
         "> svg": {
-          color: pebble600,
+          color: gray600,
         },
       },
-      hoverBg: violetBg,
+      hoverBg: primaryBg,
       activeBg: "transparent",
     }),
     "outline-gray": generateStyle({
       basic: {
         border: borderDefualt,
-        borderColor: pebble600,
+        borderColor: gray600,
         color: "text.dark",
         "> svg": {
           color: "text.dark",
@@ -143,109 +143,109 @@ export const Button: ComponentStyleConfig = {
       },
       disabled: {
         border: borderDefualt,
-        borderColor: pebble700,
-        color: pebble600,
+        borderColor: gray700,
+        color: gray600,
         "> svg": {
-          color: pebble600,
+          color: gray600,
         },
       },
-      hoverBg: pebble700,
+      hoverBg: gray700,
       activeBg: "transparent",
     }),
-    "outline-info": generateStyle({
+    "outline-accent": generateStyle({
       basic: {
         border: borderDefualt,
-        borderColor: honeydewBg,
-        color: honeydewMain,
+        borderColor: accentBg,
+        color: accentMain,
         "> svg": {
-          color: honeydewMain,
+          color: accentMain,
         },
       },
       disabled: {
-        border: honeydewDarker,
-        color: honeydewDarker,
+        border: accentDarker,
+        color: accentDarker,
         "> svg": {
-          color: honeydewDarker,
+          color: accentDarker,
         },
       },
-      hoverBg: honeydewBg,
+      hoverBg: accentBg,
       activeBg: "transparent",
     }),
     "command-button": generateStyle({
       basic: {
         border: borderDefualt,
-        borderColor: honeydewDarker,
+        borderColor: accentDarker,
         color: "text.main",
       },
       disabled: {
-        border: honeydewDarker,
-        color: honeydewDarker,
+        border: accentDarker,
+        color: accentDarker,
       },
-      hoverBg: honeydewBg,
+      hoverBg: accentBg,
       activeBg: "transparent",
     }),
     "ghost-primary": generateStyle({
       basic: {
-        color: violetLight,
+        color: primaryLight,
         "> svg": {
-          color: "violetLight",
+          color: "primaryLight",
         },
       },
       disabled: {
-        color: violetDark,
+        color: primaryDark,
         "> svg": {
-          color: violetDark,
+          color: primaryDark,
         },
       },
-      hoverBg: violetBg,
+      hoverBg: primaryBg,
       activeBg: "transparent",
     }),
-    "ghost-lilac": generateStyle({
+    "ghost-secondary": generateStyle({
       basic: {
-        color: "lilac.main",
+        color: "secondary.main",
         "> svg": {
-          color: "lilac.main",
+          color: "secondary.main",
         },
       },
       disabled: {
-        color: lilacBg,
+        color: secondaryBg,
         "> svg": {
-          color: lilacBg,
+          color: secondaryBg,
         },
       },
-      hoverBg: lilacBg,
+      hoverBg: secondaryBg,
       activeBg: "transparent",
     }),
-    "ghost-info": generateStyle({
+    "ghost-accent": generateStyle({
       basic: {
-        color: honeydewMain,
+        color: accentMain,
         "> svg": {
-          color: honeydewMain,
+          color: accentMain,
         },
       },
       disabled: {
-        color: honeydewBg,
+        color: accentBg,
         "> svg": {
-          color: honeydewBg,
+          color: accentBg,
         },
       },
-      hoverBg: honeydewBg,
+      hoverBg: accentBg,
       activeBg: "transparent",
     }),
     "ghost-gray": generateStyle({
       basic: {
-        color: "pebble.400",
+        color: "gray.400",
         "> svg": {
-          color: "pebble.400",
+          color: "gray.400",
         },
       },
       disabled: {
-        color: pebble500,
+        color: gray500,
         "> svg": {
-          color: pebble500,
+          color: gray500,
         },
       },
-      hoverBg: pebble800,
+      hoverBg: gray800,
       activeBg: "transparent",
     }),
     "ghost-error": generateStyle({
diff --git a/src/lib/styles/theme/components/drawer.ts b/src/lib/styles/theme/components/drawer.ts
index 4cba3159b..d9694c33c 100644
--- a/src/lib/styles/theme/components/drawer.ts
+++ b/src/lib/styles/theme/components/drawer.ts
@@ -22,7 +22,7 @@ const baseStyle = definePartsStyle({
   },
   dialog: {
     borderRadius: "8px",
-    bg: "pebble.900",
+    bg: "gray.900",
   },
   closeButton: {
     top: "14px",
diff --git a/src/lib/styles/theme/components/form.ts b/src/lib/styles/theme/components/form.ts
index e73b0b51a..43c8354d9 100644
--- a/src/lib/styles/theme/components/form.ts
+++ b/src/lib/styles/theme/components/form.ts
@@ -27,7 +27,7 @@ export const Form: ComponentStyleConfig = {
             color: "text.disabled",
           },
           _active: {
-            color: "lilac.main",
+            color: "secondary.main",
           },
           "&.md-label, &.textarea-label": {
             transform: "scale(0.75) translateY(-20px)",
diff --git a/src/lib/styles/theme/components/input.ts b/src/lib/styles/theme/components/input.ts
index e93430c8f..757c6ae8d 100644
--- a/src/lib/styles/theme/components/input.ts
+++ b/src/lib/styles/theme/components/input.ts
@@ -6,18 +6,18 @@ export const Input: ComponentStyleConfig = {
       field: {
         color: "text.main",
         border: "1px solid",
-        borderColor: "pebble.700",
+        borderColor: "gray.700",
         background: "none",
         borderRadius: "8px",
         _hover: {
-          borderColor: "pebble.600",
+          borderColor: "gray.600",
         },
         _focusWithin: {
-          borderColor: "lilac.main",
+          borderColor: "secondary.main",
           borderWidth: "2px",
         },
         _active: {
-          borderColor: "lilac.main",
+          borderColor: "secondary.main",
           borderWidth: "2px",
         },
         _disabled: {
@@ -27,7 +27,7 @@ export const Input: ComponentStyleConfig = {
         _invalid: {
           borderColor: "error.main",
         },
-        _placeholder: { color: "pebble.600" },
+        _placeholder: { color: "gray.600" },
       },
     },
   },
diff --git a/src/lib/styles/theme/components/link.ts b/src/lib/styles/theme/components/link.ts
index b3520858a..cbf398fa6 100644
--- a/src/lib/styles/theme/components/link.ts
+++ b/src/lib/styles/theme/components/link.ts
@@ -2,7 +2,7 @@ import type { ComponentStyleConfig } from "@chakra-ui/react";
 
 export const Link: ComponentStyleConfig = {
   baseStyle: {
-    color: "lilac.main",
+    color: "secondary.main",
     fontSize: "14px",
     "&.ellipsis": {
       whiteSpace: "nowrap",
diff --git a/src/lib/styles/theme/components/menu.ts b/src/lib/styles/theme/components/menu.ts
index 7977ded75..4c524bbfa 100644
--- a/src/lib/styles/theme/components/menu.ts
+++ b/src/lib/styles/theme/components/menu.ts
@@ -9,20 +9,20 @@ const baseStyle = definePartsStyle({
     py: "2",
     borderRadius: "8px",
     border: "none",
-    bg: "pebble.900",
+    bg: "gray.900",
   },
   item: {
     color: "text.main",
     _hover: {
-      bg: "pebble.800",
+      bg: "gray.800",
     },
     _focus: {
-      bg: "pebble.800",
+      bg: "gray.800",
     },
     fontSize: "14px",
   },
   divider: {
-    borderColor: "pebble.700",
+    borderColor: "gray.700",
   },
 });
 
diff --git a/src/lib/styles/theme/components/modal.ts b/src/lib/styles/theme/components/modal.ts
index fc73a935f..1fe2b256a 100644
--- a/src/lib/styles/theme/components/modal.ts
+++ b/src/lib/styles/theme/components/modal.ts
@@ -22,7 +22,7 @@ const baseStyle = definePartsStyle({
   },
   dialog: {
     borderRadius: "8px",
-    bg: "pebble.900",
+    bg: "gray.900",
   },
   closeButton: {
     top: "14px",
diff --git a/src/lib/styles/theme/components/radio.ts b/src/lib/styles/theme/components/radio.ts
index 962f88715..a39618f1f 100644
--- a/src/lib/styles/theme/components/radio.ts
+++ b/src/lib/styles/theme/components/radio.ts
@@ -1,6 +1,6 @@
 import type { ComponentStyleConfig } from "@chakra-ui/react";
 
-const violetLight = "violet.light";
+const primaryLight = "primary.light";
 
 export const Radio: ComponentStyleConfig = {
   baseStyle: {
@@ -13,9 +13,9 @@ export const Radio: ComponentStyleConfig = {
     control: {
       borderColor: "text.dark",
       _checked: {
-        borderColor: violetLight,
+        borderColor: primaryLight,
         background: "transparent",
-        color: violetLight,
+        color: primaryLight,
         _before: {
           w: "10px",
           h: "10px",
@@ -47,12 +47,12 @@ export const Radio: ComponentStyleConfig = {
         py: "12px",
         border: "2px solid",
         borderRadius: "12px",
-        borderColor: "pebble.700",
-        bgColor: "pebble.900",
+        borderColor: "gray.700",
+        bgColor: "gray.900",
         overflowX: "scroll",
         "&[data-checked]": {
-          borderColor: violetLight,
-          bgColor: "violet.background",
+          borderColor: primaryLight,
+          bgColor: "primary.background",
         },
       },
       control: {
diff --git a/src/lib/styles/theme/components/select.ts b/src/lib/styles/theme/components/select.ts
index 6df5f7b41..c52e9843f 100644
--- a/src/lib/styles/theme/components/select.ts
+++ b/src/lib/styles/theme/components/select.ts
@@ -7,18 +7,18 @@ export const Select: ComponentStyleConfig = {
         color: "text.main",
         borderRadius: "8px",
         border: "1px solid",
-        borderColor: "pebble.700",
+        borderColor: "gray.700",
         fontSize: "16px",
         letterSpacing: "0.15px",
         height: "56px",
         bg: "background.main",
         _focus: {
           borderWidth: "2px",
-          borderColor: "lilac.main",
+          borderColor: "secondary.main",
         },
         _active: {
           borderWidth: "2px",
-          borderColor: "lilac.main",
+          borderColor: "secondary.main",
         },
       },
       icon: {
diff --git a/src/lib/styles/theme/components/spinner.ts b/src/lib/styles/theme/components/spinner.ts
index 5e7987565..ee36b3772 100644
--- a/src/lib/styles/theme/components/spinner.ts
+++ b/src/lib/styles/theme/components/spinner.ts
@@ -2,12 +2,12 @@ import type { ComponentStyleConfig } from "@chakra-ui/react";
 
 export const Spinner: ComponentStyleConfig = {
   baseStyle: {
-    color: "pebble.600",
+    color: "gray.600",
     speed: "0.65s",
   },
   variants: {
     primary: {
-      color: "violet.light",
+      color: "primary.light",
     },
     light: {
       color: "text.main",
diff --git a/src/lib/styles/theme/components/switch.ts b/src/lib/styles/theme/components/switch.ts
index e3631f189..566bb80eb 100644
--- a/src/lib/styles/theme/components/switch.ts
+++ b/src/lib/styles/theme/components/switch.ts
@@ -7,7 +7,7 @@ const { definePartsStyle, defineMultiStyleConfig } =
 const baseStyle = definePartsStyle({
   track: {
     _checked: {
-      bg: "violet.main",
+      bg: "primary.main",
     },
   },
 });
diff --git a/src/lib/styles/theme/components/tag.ts b/src/lib/styles/theme/components/tag.ts
index 3d7ddd5c5..b376e313a 100644
--- a/src/lib/styles/theme/components/tag.ts
+++ b/src/lib/styles/theme/components/tag.ts
@@ -4,30 +4,30 @@ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(tagAnatomy.keys);
 
-const honeydewDark = definePartsStyle({
+const accentDark = definePartsStyle({
   container: {
-    bg: "honeydew.dark",
-    color: "pebble.900",
+    bg: "accent.dark",
+    color: "gray.900",
   },
 });
 
-const honeydewDarker = definePartsStyle({
+const accentDarker = definePartsStyle({
   container: {
-    bg: "honeydew.darker",
+    bg: "accent.darker",
     color: "text.main",
   },
 });
 
-const violetLight = definePartsStyle({
+const primaryLight = definePartsStyle({
   container: {
-    bg: "violet.light",
-    color: "pebble.900",
+    bg: "primary.light",
+    color: "gray.900",
   },
 });
 
 const gray = definePartsStyle({
   container: {
-    bg: "pebble.700",
+    bg: "gray.700",
     color: "text.main",
   },
 });
@@ -57,13 +57,13 @@ export const Tag = defineMultiStyleConfig({
     },
   },
   variants: {
-    "violet-light": violetLight,
-    "honeydew-dark": honeydewDark,
-    "honeydew-darker": honeydewDarker,
+    "primary-light": primaryLight,
+    "accent-dark": accentDark,
+    "accent-darker": accentDarker,
     gray,
   },
   defaultProps: {
     size: "md",
-    variant: "honeydew-darker",
+    variant: "accent-darker",
   },
 });
diff --git a/src/lib/styles/theme/components/textarea.ts b/src/lib/styles/theme/components/textarea.ts
index d36af31da..bb5fef261 100644
--- a/src/lib/styles/theme/components/textarea.ts
+++ b/src/lib/styles/theme/components/textarea.ts
@@ -5,20 +5,20 @@ export const Textarea: ComponentStyleConfig = {
     "custom-outline": {
       color: "text.main",
       border: "1px solid",
-      borderColor: "pebble.700",
+      borderColor: "gray.700",
       background: "none",
       borderRadius: "8px",
       p: "16px 12px",
       height: "112px",
       _hover: {
-        borderColor: "pebble.700",
+        borderColor: "gray.700",
       },
       _focusWithin: {
-        borderColor: "lilac.main",
+        borderColor: "secondary.main",
         borderWidth: "2px",
       },
       _active: {
-        borderColor: "lilac.main",
+        borderColor: "secondary.main",
         borderWidth: "2px",
       },
       _disabled: {
@@ -28,7 +28,7 @@ export const Textarea: ComponentStyleConfig = {
       _invalid: {
         borderColor: "error.main",
       },
-      _placeholder: { color: "pebble.600" },
+      _placeholder: { color: "gray.600" },
     },
   },
   defaultProps: {
diff --git a/src/lib/styles/theme/components/tooltip.ts b/src/lib/styles/theme/components/tooltip.ts
index d2b9c7fd8..56185d993 100644
--- a/src/lib/styles/theme/components/tooltip.ts
+++ b/src/lib/styles/theme/components/tooltip.ts
@@ -12,7 +12,7 @@ export const Tooltip: ComponentStyleConfig = {
     fontWeight: 400,
     fontSize: "14px",
     maxW: "280px",
-    bg: "honeydew.darker",
-    [$arrowBg.variable]: "colors.honeydew.darker",
+    bg: "accent.darker",
+    [$arrowBg.variable]: "colors.accent.darker",
   },
 };
diff --git a/src/lib/utils/codePermission.ts b/src/lib/utils/codePermission.ts
index 419ace582..6afb8a039 100644
--- a/src/lib/utils/codePermission.ts
+++ b/src/lib/utils/codePermission.ts
@@ -32,7 +32,7 @@ export const getPermissionHelper = (
     instantiatePermission === AccessConfigPermission.EVERYBODY ||
     (address && permissionAddresses.includes(address))
       ? "success.main"
-      : "info.main";
+      : "text.dark";
 
   return { message: getMessage(), messageColor: getColor() };
 };

From 85ed008fd832a0ed5bf3ffc544c7e874883ea52e Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Mon, 22 May 2023 17:05:13 +0700
Subject: [PATCH 136/354] fix(components): refactor font weight

---
 CHANGELOG.md                                               | 1 +
 src/lib/app-fns/tx/resend.tsx                              | 2 +-
 src/lib/components/AssignMe.tsx                            | 2 +-
 src/lib/components/ContractCmdButton.tsx                   | 2 +-
 src/lib/components/CustomTab.tsx                           | 2 +-
 src/lib/components/ListSelection.tsx                       | 2 +-
 src/lib/components/TagSelection.tsx                        | 2 +-
 src/lib/components/TokenCard.tsx                           | 2 +-
 src/lib/components/TxFilterSelection.tsx                   | 2 +-
 src/lib/components/button/ShowMoreButton.tsx               | 2 +-
 src/lib/components/filter/FilterInput.tsx                  | 2 +-
 src/lib/components/icon/CustomIcon.tsx                     | 2 +-
 src/lib/components/modal/CodeSnippet.tsx                   | 2 +-
 src/lib/components/modal/UnsupportedTokensModal.tsx        | 2 +-
 src/lib/components/modal/contract/AddToOtherList.tsx       | 4 ++--
 .../components/modal/contract/ContractDetailsTemplate.tsx  | 2 +-
 src/lib/components/select-contract/ContractListCard.tsx    | 2 +-
 src/lib/components/state/InvalidState.tsx                  | 7 +------
 src/lib/components/state/ZeroState.tsx                     | 4 ++--
 src/lib/components/table/EditableCell.tsx                  | 4 ++--
 src/lib/components/table/contracts/EditTags.tsx            | 4 ++--
 .../components/table/transactions/TransactionsTableRow.tsx | 1 +
 src/lib/layout/Searchbar.tsx                               | 2 +-
 src/lib/layout/SubHeader.tsx                               | 4 ++--
 src/lib/layout/navbar/Expand.tsx                           | 2 +-
 .../account-details/components/asset/UserAssetInfoCard.tsx | 2 +-
 .../account-details/components/delegations/RadioCard.tsx   | 2 +-
 .../account-details/components/delegations/TotalCard.tsx   | 2 +-
 .../pages/account-details/components/tables/TokenCell.tsx  | 2 +-
 src/lib/pages/account-details/index.tsx                    | 2 +-
 src/lib/pages/contract-list/slug.tsx                       | 6 ++----
 src/lib/pages/faucet/index.tsx                             | 2 +-
 src/lib/pages/home/components/QuickMenu.tsx                | 2 +-
 src/lib/pages/instantiate/instantiate.tsx                  | 2 +-
 src/lib/pages/not-found/index.tsx                          | 7 +++----
 src/lib/pages/proposal/whitelist/index.tsx                 | 2 +-
 src/lib/pages/public-project/components/DetailHeader.tsx   | 2 +-
 .../pages/public-project/components/PublicProjectCard.tsx  | 2 +-
 38 files changed, 46 insertions(+), 52 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f862a2dce..582eca0b5 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
 
 ### Improvements
 
+- [#352](https://github.com/alleslabs/celatone-frontend/pull/352) Refactor/Abstract styling (color system, font weight and more)
 - [#347](https://github.com/alleslabs/celatone-frontend/pull/347) Move tx table accordion arrow to the front and refactor block txs table
 
 ### Bug fixes
diff --git a/src/lib/app-fns/tx/resend.tsx b/src/lib/app-fns/tx/resend.tsx
index a86bf0065..e9cd21d8f 100644
--- a/src/lib/app-fns/tx/resend.tsx
+++ b/src/lib/app-fns/tx/resend.tsx
@@ -64,7 +64,7 @@ export const resendTx = ({
         receiptInfo: {
           header: "Transaction Completed",
           description: (
-            <Text fontWeight="700">
+            <Text fontWeight={700}>
               Your transaction was successfully resent.
             </Text>
           ),
diff --git a/src/lib/components/AssignMe.tsx b/src/lib/components/AssignMe.tsx
index f452b8fde..5d983049a 100644
--- a/src/lib/components/AssignMe.tsx
+++ b/src/lib/components/AssignMe.tsx
@@ -15,7 +15,7 @@ export const AssignMe = ({ onClick, isDisable = false }: AssginMeProps) => {
       textAlign="right"
       mr={3}
       color={enabled ? "accent.main" : "gray.500"}
-      fontWeight="600"
+      fontWeight={700}
       variant="body3"
       cursor={enabled ? "pointer" : "not-allowed"}
       minW={16}
diff --git a/src/lib/components/ContractCmdButton.tsx b/src/lib/components/ContractCmdButton.tsx
index 5d741f151..d5dfb3c3e 100644
--- a/src/lib/components/ContractCmdButton.tsx
+++ b/src/lib/components/ContractCmdButton.tsx
@@ -14,7 +14,7 @@ export const ContractCmdButton = ({
     height="24px"
     px="10px"
     borderRadius="16px"
-    fontWeight="400"
+    fontWeight={400}
     onClick={onClickCmd}
   >
     {cmd}
diff --git a/src/lib/components/CustomTab.tsx b/src/lib/components/CustomTab.tsx
index d3b770ff3..de89c4d09 100644
--- a/src/lib/components/CustomTab.tsx
+++ b/src/lib/components/CustomTab.tsx
@@ -16,7 +16,7 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
       display="flex"
       alignItems="center"
       fontSize="14px"
-      fontWeight="700"
+      fontWeight={700}
       lineHeight="24px"
       letterSpacing="0.4px"
       variant="ghost-gray"
diff --git a/src/lib/components/ListSelection.tsx b/src/lib/components/ListSelection.tsx
index 03e797a4c..cf9b9efcd 100644
--- a/src/lib/components/ListSelection.tsx
+++ b/src/lib/components/ListSelection.tsx
@@ -175,7 +175,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
               position="absolute"
               top={0}
               left={0}
-              fontWeight="400"
+              fontWeight={400}
               color="text.dark"
               bgColor={labelBgColor}
               pointerEvents="none"
diff --git a/src/lib/components/TagSelection.tsx b/src/lib/components/TagSelection.tsx
index ad887b36f..3b9a344a7 100644
--- a/src/lib/components/TagSelection.tsx
+++ b/src/lib/components/TagSelection.tsx
@@ -182,7 +182,7 @@ export const TagSelection = observer(
                 position="absolute"
                 top={0}
                 left={0}
-                fontWeight="400"
+                fontWeight={400}
                 color="text.dark"
                 bgColor={labelBgColor}
                 pointerEvents="none"
diff --git a/src/lib/components/TokenCard.tsx b/src/lib/components/TokenCard.tsx
index bdf3dcbf1..f03db1c44 100644
--- a/src/lib/components/TokenCard.tsx
+++ b/src/lib/components/TokenCard.tsx
@@ -77,7 +77,7 @@ export const TokenCard = ({
         </Flex>
 
         <Flex direction="column">
-          <Text fontWeight="700" variant="body2">
+          <Text fontWeight={700} variant="body2">
             {formatUTokenWithPrecision(amount as U<Token>, precision, false)}
           </Text>
           <Text variant="body3" color="text.dark">
diff --git a/src/lib/components/TxFilterSelection.tsx b/src/lib/components/TxFilterSelection.tsx
index fbc208cc4..44ab688f9 100644
--- a/src/lib/components/TxFilterSelection.tsx
+++ b/src/lib/components/TxFilterSelection.tsx
@@ -159,7 +159,7 @@ export const TxFilterSelection = forwardRef<
               position="absolute"
               top={0}
               left={0}
-              fontWeight="400"
+              fontWeight={400}
               color="text.dark"
               bgColor={labelBgColor}
               pointerEvents="none"
diff --git a/src/lib/components/button/ShowMoreButton.tsx b/src/lib/components/button/ShowMoreButton.tsx
index ff5da9274..a96388e5c 100644
--- a/src/lib/components/button/ShowMoreButton.tsx
+++ b/src/lib/components/button/ShowMoreButton.tsx
@@ -24,7 +24,7 @@ export const ShowMoreButton = ({
     w="fit-content"
     onClick={setToggleShowMore}
   >
-    <Text variant="body3" color="secondary.main" fontWeight="700">
+    <Text variant="body3" color="secondary.main" fontWeight={700}>
       {toggleShowMore ? showLessText : showMoreText}
     </Text>
   </Button>
diff --git a/src/lib/components/filter/FilterInput.tsx b/src/lib/components/filter/FilterInput.tsx
index 4bf510c32..c6c96f07f 100644
--- a/src/lib/components/filter/FilterInput.tsx
+++ b/src/lib/components/filter/FilterInput.tsx
@@ -72,7 +72,7 @@ export const FilterInput = ({
       position="absolute"
       top={0}
       left={0}
-      fontWeight="400"
+      fontWeight={400}
       color="text.dark"
       bgColor="background.main"
       pointerEvents="none"
diff --git a/src/lib/components/icon/CustomIcon.tsx b/src/lib/components/icon/CustomIcon.tsx
index 02019b4ba..3c99d7c80 100644
--- a/src/lib/components/icon/CustomIcon.tsx
+++ b/src/lib/components/icon/CustomIcon.tsx
@@ -970,7 +970,7 @@ export const ICONS = {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M2.08451 7.16513H7.64746V1.56522C4.77078 1.97439 2.48854 4.26415 2.08451 7.16513ZM9.14746 0.599338V8.16513C9.14746 8.44127 8.9236 8.66513 8.64746 8.66513H1.11752C0.794022 8.66513 0.520846 8.41239 0.520846 8.08745C0.520846 3.6213 4.12605 0 8.57235 0C8.89585 0 9.14746 0.274396 9.14746 0.599338ZM11.4485 2.40963C14.3672 3.30016 16.5 6.03164 16.5 9.26543C16.5 13.2304 13.3017 16.4306 9.37338 16.4306C8.24526 16.4306 7.18039 16.1682 6.23456 15.6997L10.8659 11.0477C11.239 10.6729 11.4485 10.1655 11.4485 9.63665V2.40963ZM10.5595 0.683346C14.7614 1.26102 18 4.88593 18 9.26543C18 14.0529 14.136 17.9306 9.37338 17.9306C7.51147 17.9306 5.78615 17.3384 4.37714 16.3275C4.10037 16.1325 4.08239 15.7354 4.32322 15.4935L9.80283 9.98942C9.89612 9.89571 9.94849 9.76887 9.94849 9.63665V1.23936C9.94849 0.903584 10.2289 0.63641 10.5595 0.683346ZM3.42309 15.1999C3.21462 15.4129 2.87674 15.4274 2.66108 15.2252C1.24847 13.9002 0.281568 12.1058 0.00479698 10.0875C-0.0383368 9.75534 0.224055 9.47372 0.558336 9.47372H7.01017H7.05548H7.42168H7.92359C8.36858 9.47372 8.59188 10.0113 8.27782 10.3266L7.92359 10.6822L7.66515 10.9416L7.63317 10.9737L3.42309 15.1999ZM5.51589 10.9737L3.04931 13.4498C2.45716 12.7287 2.00363 11.8901 1.72792 10.9737H5.51589Z"
-        fill="#68688A"
+        fill="currentColor"
       />
     ),
     viewBox: "0 0 18 17.5",
diff --git a/src/lib/components/modal/CodeSnippet.tsx b/src/lib/components/modal/CodeSnippet.tsx
index 096507231..1ff95b059 100644
--- a/src/lib/components/modal/CodeSnippet.tsx
+++ b/src/lib/components/modal/CodeSnippet.tsx
@@ -208,7 +208,7 @@ execute();
         <ModalOverlay />
         <ModalContent w="840px">
           <ModalHeader>
-            <CustomIcon name="code" boxSize="6" />
+            <CustomIcon name="code" boxSize="6" color="gray.600" />
             <Heading as="h5" variant="h5">
               Code Snippet
             </Heading>
diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx
index 01f1b8d97..7c7b29436 100644
--- a/src/lib/components/modal/UnsupportedTokensModal.tsx
+++ b/src/lib/components/modal/UnsupportedTokensModal.tsx
@@ -183,7 +183,7 @@ export const UnsupportedTokensModal = ({
             <Flex direction="column" gap={5}>
               {address && (
                 <Flex direction="row" gap={4}>
-                  <Text variant="body2" fontWeight="700">
+                  <Text variant="body2" fontWeight={700}>
                     {content.header}
                   </Text>
                   <ExplorerLink value={address} type={addressType} />
diff --git a/src/lib/components/modal/contract/AddToOtherList.tsx b/src/lib/components/modal/contract/AddToOtherList.tsx
index c57535749..7b0616cd1 100644
--- a/src/lib/components/modal/contract/AddToOtherList.tsx
+++ b/src/lib/components/modal/contract/AddToOtherList.tsx
@@ -41,10 +41,10 @@ export const AddToOtherListModal = observer(
         headerContent={
           <Flex pt="6" gap="36px">
             <Flex direction="column" gap="8px">
-              <Text variant="body2" fontWeight="600">
+              <Text variant="body2" fontWeight={500} color="text.dark">
                 Contract Name
               </Text>
-              <Text variant="body2" fontWeight="600">
+              <Text variant="body2" fontWeight={500} color="text.dark">
                 Contract Address
               </Text>
             </Flex>
diff --git a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
index c55f272e8..612ecb0d8 100644
--- a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
+++ b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
@@ -92,7 +92,7 @@ export const ContractDetailsTemplateModal = ({
       subtitle={subtitle}
       headerContent={
         <Flex gap={4} alignItems="center" pt="6">
-          <Text variant="body2" fontWeight="600">
+          <Text variant="body2" fontWeight={500} color="text.dark">
             Contract Address
           </Text>
           <ExplorerLink
diff --git a/src/lib/components/select-contract/ContractListCard.tsx b/src/lib/components/select-contract/ContractListCard.tsx
index 44111e446..a460a0300 100644
--- a/src/lib/components/select-contract/ContractListCard.tsx
+++ b/src/lib/components/select-contract/ContractListCard.tsx
@@ -49,7 +49,7 @@ export const ContractListCard = ({
           <Text
             variant="body1"
             textColor={isDisabled ? "text.disabled" : "text.main"}
-            fontWeight="600"
+            fontWeight={700}
             textOverflow="ellipsis"
             overflow="hidden"
           >
diff --git a/src/lib/components/state/InvalidState.tsx b/src/lib/components/state/InvalidState.tsx
index 529331dbe..3e5e5f88c 100644
--- a/src/lib/components/state/InvalidState.tsx
+++ b/src/lib/components/state/InvalidState.tsx
@@ -30,12 +30,7 @@ export const InvalidState = ({ title }: InvalidStateProps) => {
       <Heading as="h5" variant="h5" my="8px">
         {title}
       </Heading>
-      <Text
-        variant="body2"
-        fontWeight="500"
-        color="text.dark"
-        textAlign="center"
-      >
+      <Text variant="body2" color="text.dark" textAlign="center">
         Please double-check your input and make sure you have selected the
         correct network.
       </Text>
diff --git a/src/lib/components/state/ZeroState.tsx b/src/lib/components/state/ZeroState.tsx
index e99bc0e53..32c8b65c1 100644
--- a/src/lib/components/state/ZeroState.tsx
+++ b/src/lib/components/state/ZeroState.tsx
@@ -22,7 +22,7 @@ interface ActionSectionProps {
 const ActionSection = ({ list, handleAction }: ActionSectionProps) =>
   list.value === formatSlugName(INSTANTIATED_LIST_NAME) ? (
     <Button
-      leftIcon={<CustomIcon name="add-new" boxSize="4" color="text.main" />}
+      leftIcon={<CustomIcon name="add-new" boxSize="4" />}
       onClick={handleAction}
     >
       Deploy New Contract
@@ -36,7 +36,7 @@ const ActionSection = ({ list, handleAction }: ActionSectionProps) =>
           list={list}
           buttonProps={{
             variant: "outline-primary",
-            leftIcon: <CustomIcon name="bookmark" color="gray.600" />,
+            leftIcon: <CustomIcon name="bookmark" />,
             children: "Save Contract",
             ml: 2,
           }}
diff --git a/src/lib/components/table/EditableCell.tsx b/src/lib/components/table/EditableCell.tsx
index a30fb48ee..f3ac57eb6 100644
--- a/src/lib/components/table/EditableCell.tsx
+++ b/src/lib/components/table/EditableCell.tsx
@@ -137,10 +137,10 @@ export const EditableCell = ({
                   else if (e.key === "Escape") handleCancel();
                 }}
               />
-              <Button size="sm" onClick={handleSave} variant="ghost-gray">
+              <Button size="sm" onClick={handleSave} variant="ghost">
                 <CustomIcon name="check" color="success.main" />
               </Button>
-              <Button onClick={handleCancel} size="sm" variant="ghost-gray">
+              <Button onClick={handleCancel} size="sm" variant="ghost">
                 <CustomIcon name="close" color="error.light" />
               </Button>
             </Flex>
diff --git a/src/lib/components/table/contracts/EditTags.tsx b/src/lib/components/table/contracts/EditTags.tsx
index 44458db76..5c3812d5e 100644
--- a/src/lib/components/table/contracts/EditTags.tsx
+++ b/src/lib/components/table/contracts/EditTags.tsx
@@ -36,10 +36,10 @@ export function EditTags({ contractLocalInfo }: EditTagsProps) {
       headerContent={
         <Flex pt="6" gap="36px">
           <Flex direction="column" gap="8px">
-            <Text variant="body2" fontWeight="600">
+            <Text variant="body2" fontWeight={500} color="text.dark">
               Contract Name
             </Text>
-            <Text variant="body2" fontWeight="600">
+            <Text variant="body2" fontWeight={500} color="text.dark">
               Contract Address
             </Text>
           </Flex>
diff --git a/src/lib/components/table/transactions/TransactionsTableRow.tsx b/src/lib/components/table/transactions/TransactionsTableRow.tsx
index 51034332c..fb68c42d8 100644
--- a/src/lib/components/table/transactions/TransactionsTableRow.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableRow.tsx
@@ -53,6 +53,7 @@ export const TransactionsTableRow = ({
               name="chevron-down"
               transform={isOpen ? "rotate(0)" : "rotate(-90deg)"}
               transition="all .25s ease-in-out"
+              color="gray.600"
             />
           )}
         </TableRow>
diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx
index 3e71dfae7..43d322aff 100644
--- a/src/lib/layout/Searchbar.tsx
+++ b/src/lib/layout/Searchbar.tsx
@@ -61,7 +61,7 @@ const ResultItem = ({ type, value, handleSelectResult }: ResultItemProps) => {
 
   return (
     <ListItem p={2} borderBottomColor="gray.700" bg="gray.900">
-      <Text variant="body2" fontWeight="500" color="text.dark" p="8px">
+      <Text variant="body2" fontWeight={500} color="text.dark" p="8px">
         {text}
       </Text>
       {route && (
diff --git a/src/lib/layout/SubHeader.tsx b/src/lib/layout/SubHeader.tsx
index f962435f7..cd3418b91 100644
--- a/src/lib/layout/SubHeader.tsx
+++ b/src/lib/layout/SubHeader.tsx
@@ -59,7 +59,7 @@ const SubHeader = () => {
               />
               <Text
                 variant="body2"
-                fontWeight="600"
+                fontWeight={700}
                 color={isCurrentPage(item.slug) ? activeColor : "text.dark"}
               >
                 {item.name}
@@ -84,7 +84,7 @@ const SubHeader = () => {
               transition="all .25s ease-in-out"
             >
               <CustomIcon boxSize={3} name="admin" color="secondary.main" />
-              <Text variant="body2" fontWeight="600" color="secondary.main">
+              <Text variant="body2" fontWeight={700} color="secondary.main">
                 My Page
               </Text>
             </Flex>
diff --git a/src/lib/layout/navbar/Expand.tsx b/src/lib/layout/navbar/Expand.tsx
index 45a8a180c..8c70f6b55 100644
--- a/src/lib/layout/navbar/Expand.tsx
+++ b/src/lib/layout/navbar/Expand.tsx
@@ -29,7 +29,7 @@ export const ExpandNavMenu = ({
         }}
       >
         <Flex justifyContent="space-between" alignItems="center">
-          <Text py="2" variant="body3" fontWeight="600">
+          <Text py="2" variant="body3" fontWeight={700}>
             {item.category}
           </Text>
           {item.category === "Overview" && (
diff --git a/src/lib/pages/account-details/components/asset/UserAssetInfoCard.tsx b/src/lib/pages/account-details/components/asset/UserAssetInfoCard.tsx
index 99a2c8a25..9b2d18089 100644
--- a/src/lib/pages/account-details/components/asset/UserAssetInfoCard.tsx
+++ b/src/lib/pages/account-details/components/asset/UserAssetInfoCard.tsx
@@ -11,7 +11,7 @@ export const UserAssetInfoCard = ({
   value,
 }: UserAssetInfoCardProps) => (
   <Flex direction="column" width="fit-content">
-    <Text variant="body2" fontWeight="500" color="text.dark">
+    <Text variant="body2" fontWeight={500} color="text.dark">
       {helperText}
     </Text>
     <Heading
diff --git a/src/lib/pages/account-details/components/delegations/RadioCard.tsx b/src/lib/pages/account-details/components/delegations/RadioCard.tsx
index b277f7026..86de2ce2e 100644
--- a/src/lib/pages/account-details/components/delegations/RadioCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/RadioCard.tsx
@@ -25,7 +25,7 @@ export const RadioCard = ({
     <Radio variant="card" value={value} overflowX="hidden">
       <Flex alignItems="center" gap={2} justifyContent="space-between">
         <Flex direction="column" gap={1}>
-          <Text variant="body2" textColor="gray.400" fontWeight="500">
+          <Text variant="body2" textColor="gray.400" fontWeight={500}>
             {value}
           </Text>
           {isLoading ? (
diff --git a/src/lib/pages/account-details/components/delegations/TotalCard.tsx b/src/lib/pages/account-details/components/delegations/TotalCard.tsx
index 7e553b521..2cef8663b 100644
--- a/src/lib/pages/account-details/components/delegations/TotalCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/TotalCard.tsx
@@ -29,7 +29,7 @@ export const TotalCard = ({
     ) : (
       <>
         <Flex alignItems="center" gap={1}>
-          <Text variant="body2" fontWeight="500" textColor="text.dark">
+          <Text variant="body2" fontWeight={500} textColor="text.dark">
             {title}
           </Text>
           <Tooltip label={message}>
diff --git a/src/lib/pages/account-details/components/tables/TokenCell.tsx b/src/lib/pages/account-details/components/tables/TokenCell.tsx
index 2c1fdb395..e8200ce1a 100644
--- a/src/lib/pages/account-details/components/tables/TokenCell.tsx
+++ b/src/lib/pages/account-details/components/tables/TokenCell.tsx
@@ -23,7 +23,7 @@ export const TokenCell = ({ token }: TokenCellProps) => (
     />
     <Flex direction="column">
       <Flex gap={1} alignItems="center">
-        <Text variant="body2" fontWeight="700">
+        <Text variant="body2" fontWeight={700}>
           {formatUTokenWithPrecision(token.amount, token.precision || 0)}
         </Text>
         <Text variant="body2">
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index d235e9f46..efd0c8d7e 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -200,7 +200,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
               borderBottom="1px solid"
               borderBottomColor="gray.700"
             >
-              <Text variant="body2" fontWeight="500" color="text.dark">
+              <Text variant="body2" fontWeight={500} color="text.dark">
                 Total Account Value
               </Text>
               {isLoading ? (
diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx
index 417515fc0..a92a67a9a 100644
--- a/src/lib/pages/contract-list/slug.tsx
+++ b/src/lib/pages/contract-list/slug.tsx
@@ -100,7 +100,7 @@ const ContractsByList = observer(() => {
             variant="body2"
             className="ellipsis"
             width="250px"
-            fontWeight="600"
+            fontWeight={700}
             color="text.dark"
           >
             {contractListInfo.name}
@@ -120,9 +120,7 @@ const ContractsByList = observer(() => {
         <Flex gap={2}>
           {isInstantiatedByMe ? (
             <Button
-              leftIcon={
-                <CustomIcon name="add-new" color="text.main" boxSize="16px" />
-              }
+              leftIcon={<CustomIcon name="add-new" boxSize="16px" />}
               onClick={() => navigate({ pathname: "/deploy" })}
             >
               Deploy New Contract
diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index 50683d299..e4aeaaa45 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -162,7 +162,7 @@ const Faucet = () => {
         helperAction={
           <Text
             color="accent.main"
-            fontWeight="600"
+            fontWeight={700}
             variant="body3"
             cursor="pointer"
             alignSelf="flex-start"
diff --git a/src/lib/pages/home/components/QuickMenu.tsx b/src/lib/pages/home/components/QuickMenu.tsx
index 291673740..b4e0a0fed 100644
--- a/src/lib/pages/home/components/QuickMenu.tsx
+++ b/src/lib/pages/home/components/QuickMenu.tsx
@@ -94,7 +94,7 @@ export const QuickMenu = () => (
                   <Text variant="body1" fontWeight="800">
                     {item.title}
                   </Text>
-                  <Text textDecoration="none" variant="body2">
+                  <Text textDecoration="none" variant="body2" color="text.dark">
                     {item.subtitle}
                   </Text>
                 </Box>
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index 17ac8a9da..238c5ea54 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -321,7 +321,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             helperAction={
               <Text
                 color="accent.main"
-                fontWeight="600"
+                fontWeight={700}
                 variant="body3"
                 cursor="pointer"
                 onClick={() => {
diff --git a/src/lib/pages/not-found/index.tsx b/src/lib/pages/not-found/index.tsx
index a0c3c118b..314aba27a 100644
--- a/src/lib/pages/not-found/index.tsx
+++ b/src/lib/pages/not-found/index.tsx
@@ -22,7 +22,7 @@ const NotFoundPage = () => {
         align="center"
         direction="column"
         gap={2}
-        py={6}
+        py={12}
         mt={6}
       >
         <Image
@@ -30,13 +30,12 @@ const NotFoundPage = () => {
           alt="page not found"
           width="404px"
         />
-        <Heading variant="h5" as="h5" color="text.dark">
+        <Heading variant="h5" as="h5" color="text.main" mt={8}>
           This page is not found
         </Heading>
         <Text
-          color="text.disabled"
+          color="text.dark"
           variant="body2"
-          fontWeight={500}
           textAlign="center"
           lineHeight="24px"
         >
diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index 4e170dbe1..eacdcbf7a 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -370,7 +370,7 @@ const ProposalToWhitelist = () => {
                     <Text
                       textAlign="right"
                       mr={3}
-                      fontWeight="600"
+                      fontWeight={700}
                       cursor="pointer"
                       variant="body3"
                       minW={16}
diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx
index f0338d105..630c90ce8 100644
--- a/src/lib/pages/public-project/components/DetailHeader.tsx
+++ b/src/lib/pages/public-project/components/DetailHeader.tsx
@@ -42,7 +42,7 @@ export const DetailHeader = ({ details, slug }: DetailHeaderProps) => (
           variant="body2"
           className="ellipsis"
           width="250px"
-          fontWeight="600"
+          fontWeight={700}
           color="text.dark"
         >
           {details?.name}
diff --git a/src/lib/pages/public-project/components/PublicProjectCard.tsx b/src/lib/pages/public-project/components/PublicProjectCard.tsx
index 97374a625..c7a4590a5 100644
--- a/src/lib/pages/public-project/components/PublicProjectCard.tsx
+++ b/src/lib/pages/public-project/components/PublicProjectCard.tsx
@@ -65,7 +65,7 @@ export const PublicProjectCard = observer(
                 />
                 <Text
                   variant="body1"
-                  fontWeight="600"
+                  fontWeight={700}
                   textOverflow="ellipsis"
                   overflow="hidden"
                   mt="4px"

From 1ec3ac1f14166b139bc45a2660f601181f239f0a Mon Sep 17 00:00:00 2001
From: Jennie Alles <jenniealles@Jennies-MacBook-Pro.local>
Date: Mon, 22 May 2023 17:28:40 +0700
Subject: [PATCH 137/354] fix(components): replace color gray 500 with text
 disabled

---
 src/lib/components/AssignMe.tsx         | 2 +-
 src/lib/components/table/TableTitle.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/AssignMe.tsx b/src/lib/components/AssignMe.tsx
index 5d983049a..c2739439a 100644
--- a/src/lib/components/AssignMe.tsx
+++ b/src/lib/components/AssignMe.tsx
@@ -14,7 +14,7 @@ export const AssignMe = ({ onClick, isDisable = false }: AssginMeProps) => {
     <Text
       textAlign="right"
       mr={3}
-      color={enabled ? "accent.main" : "gray.500"}
+      color={enabled ? "accent.main" : "text.disabled"}
       fontWeight={700}
       variant="body3"
       cursor={enabled ? "pointer" : "not-allowed"}
diff --git a/src/lib/components/table/TableTitle.tsx b/src/lib/components/table/TableTitle.tsx
index 13f71a786..97f322230 100644
--- a/src/lib/components/table/TableTitle.tsx
+++ b/src/lib/components/table/TableTitle.tsx
@@ -21,7 +21,7 @@ export const TableTitle = ({
       </Heading>
       <Badge
         textColor={
-          count && typeof count !== "string" ? "text.main" : "gray.500"
+          count && typeof count !== "string" ? "text.main" : "text.disabled"
         }
       >
         {count}

From ae64abc72ed8bb3b9c9818309d9aadbb92c7930a Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 23 May 2023 10:55:50 +0700
Subject: [PATCH 138/354] fix: add tooltip

---
 .../pool-details/tables/pool-txs/PoolTxsMsg.tsx          | 9 ++++++---
 .../tables/pool-txs/messages/PoolOtherMsgs.tsx           | 2 --
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
index c2d8798b2..e93790143 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -4,6 +4,7 @@ import type Big from "big.js";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { TableNoBorderRow } from "lib/components/table";
+import { TooltipComponent } from "lib/components/TooltipComponent";
 import type { AssetInfosOpt } from "lib/services/assetService";
 import type {
   Message,
@@ -80,9 +81,11 @@ export const PoolTxsMsg = ({
                 showCopyOnHover
               />
               {transaction.messages.length > 1 && (
-                <Badge variant="lilac" ml="6px">
-                  {transaction.messages.length}
-                </Badge>
+                <TooltipComponent label="There are at least one messages within this transaction that related to this pool.">
+                  <Badge variant="lilac" ml="6px">
+                    {transaction.messages.length}
+                  </Badge>
+                </TooltipComponent>
               )}
             </>
           )}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
index b66a31247..182b43004 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
@@ -1,6 +1,5 @@
 import { Flex, Tag, Text } from "@chakra-ui/react";
 
-import { TooltipInfo } from "lib/components/TooltipComponent";
 import { extractMsgType } from "lib/utils";
 
 interface PoolOtherMsgsProps {
@@ -21,7 +20,6 @@ export const PoolOtherMsgs = ({ otherMsgs }: PoolOtherMsgsProps) => {
           </Text>
         );
       })}
-      <TooltipInfo label="TODO: wait for text" iconVariant="solid" />
     </Flex>
   );
 };

From 63f1d9c11309759f814d92d3589172e885059697 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 23 May 2023 10:57:38 +0700
Subject: [PATCH 139/354] fix: change accordion color

---
 .../pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
index e93790143..7a6371182 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -69,6 +69,7 @@ export const PoolTxsMsg = ({
               name="chevron-down"
               transform={isOpen ? "rotate(0)" : "rotate(-90deg)"}
               transition="all .25s ease-in-out"
+              color="gray.600"
             />
           )}
         </TableNoBorderRow>

From fc9b444f4fc63bd6c471f2a5be6fb07a2ce3351b Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 23 May 2023 11:55:21 +0700
Subject: [PATCH 140/354] fix: tooltip

---
 src/lib/components/TokenCard.tsx                    |  7 +------
 src/lib/components/Tooltip.tsx                      |  1 +
 src/lib/components/action-msg/MsgToken.tsx          | 13 ++++++-------
 .../tables/pool-txs/messages/PoolOtherMsgs.tsx      |  5 ++++-
 .../pool-txs/messages/components/AssetCard.tsx      |  7 +------
 src/lib/pages/proposals/index.tsx                   |  1 -
 6 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/TokenCard.tsx b/src/lib/components/TokenCard.tsx
index 671e72a47..0818662ce 100644
--- a/src/lib/components/TokenCard.tsx
+++ b/src/lib/components/TokenCard.tsx
@@ -25,12 +25,7 @@ export const TokenCard = ({
   const { symbol, price, amount, precision, id } = userBalance.balance;
 
   return (
-    <Tooltip
-      label={`Token ID: ${id}`}
-      maxW="240px"
-      whiteSpace="pre-line"
-      textAlign="center"
-    >
+    <Tooltip label={`Token ID: ${id}`} maxW="240px" textAlign="center">
       <Flex
         className="copier-wrapper"
         direction="column"
diff --git a/src/lib/components/Tooltip.tsx b/src/lib/components/Tooltip.tsx
index cc4d72602..f99f41fb6 100644
--- a/src/lib/components/Tooltip.tsx
+++ b/src/lib/components/Tooltip.tsx
@@ -26,6 +26,7 @@ export const TooltipInfo = ({
   <Tooltip {...tooltipProps}>
     <div style={{ cursor: "pointer" }}>
       <CustomIcon
+        color="pebble.600"
         name={iconVariant === "solid" ? "info-circle-solid" : "info-circle"}
         boxSize={3}
         m={0}
diff --git a/src/lib/components/action-msg/MsgToken.tsx b/src/lib/components/action-msg/MsgToken.tsx
index 5df09077f..0b96ced00 100644
--- a/src/lib/components/action-msg/MsgToken.tsx
+++ b/src/lib/components/action-msg/MsgToken.tsx
@@ -2,8 +2,7 @@ import { Flex, Text } from "@chakra-ui/react";
 import type { Coin } from "@cosmjs/stargate";
 
 import { Copier } from "../copy";
-import { CustomIcon } from "../icon";
-import { Tooltip } from "../Tooltip";
+import { TooltipInfo } from "../Tooltip";
 import { formatBalanceWithDenom } from "lib/utils";
 
 interface MsgTokenProps {
@@ -27,11 +26,11 @@ export const MsgToken = ({
         precision,
       })}
     </Text>
-    <Tooltip label={`Token ID: ${coin.denom}`} maxW="240px">
-      <Flex cursor="pointer">
-        <CustomIcon name="info-circle" boxSize={3} />
-      </Flex>
-    </Tooltip>
+    <TooltipInfo
+      label={`Token ID: ${coin.denom}`}
+      maxW="240px"
+      textAlign="center"
+    />
     <Copier
       type={symbol ? "supported_asset" : "unsupported_asset"}
       value={coin.denom}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
index 182b43004..bebbe8935 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
@@ -15,7 +15,10 @@ export const PoolOtherMsgs = ({ otherMsgs }: PoolOtherMsgsProps) => {
         const type = extractMsgType(typePath);
         return (
           <Text key={typePath} fontWeight={600}>
-            {type} <Tag borderRadius="full">{otherMsgs[typePath]}</Tag>
+            {type}{" "}
+            <Tag variant="gray" borderRadius="full">
+              {otherMsgs[typePath]}
+            </Tag>
             {index + 1 < typePaths.length && ","}
           </Text>
         );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx
index a17e92b73..cc3412d0d 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx
@@ -29,12 +29,7 @@ export const AssetCard = ({
 }: AssetCardProps) => {
   const symbol = assetInfo?.symbol ?? denom;
   return (
-    <Tooltip
-      label={`Token ID: ${denom}`}
-      maxW="240px"
-      whiteSpace="pre-line"
-      textAlign="center"
-    >
+    <Tooltip label={`Token ID: ${denom}`} maxW="240px" textAlign="center">
       <Flex
         className="copier-wrapper"
         direction="column"
diff --git a/src/lib/pages/proposals/index.tsx b/src/lib/pages/proposals/index.tsx
index 6618de8e5..2d91abd44 100644
--- a/src/lib/pages/proposals/index.tsx
+++ b/src/lib/pages/proposals/index.tsx
@@ -106,7 +106,6 @@ const Proposals = () => {
             isDisabled={!!address}
             label="You need to connect your wallet to see your proposals"
             maxW="240px"
-            whiteSpace="pre-line"
             textAlign="center"
           >
             <div>

From 181e7ae64544987a5feff41015224054bf67268b Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 23 May 2023 14:24:33 +0700
Subject: [PATCH 141/354] fix(components): fix as comment

---
 src/lib/app-fns/tx/clearAdmin.tsx                  |  2 +-
 src/lib/app-fns/tx/common/catchTxError.tsx         |  2 +-
 src/lib/app-fns/tx/execute.tsx                     |  2 +-
 src/lib/app-fns/tx/resend.tsx                      |  2 +-
 src/lib/app-fns/tx/submitProposal.tsx              |  2 +-
 src/lib/app-fns/tx/upload.tsx                      |  2 +-
 src/lib/components/ButtonCard.tsx                  |  2 +-
 src/lib/components/ConnectWalletAlert.tsx          |  4 ++--
 src/lib/components/ContractCmdButton.tsx           |  1 -
 src/lib/components/ContractSelectSection.tsx       |  4 ++--
 src/lib/components/CustomTab.tsx                   |  2 +-
 src/lib/components/DotSeparator.tsx                |  2 +-
 src/lib/components/DotSeperator.tsx                |  5 -----
 src/lib/components/ErrorMessageRender.tsx          |  2 +-
 src/lib/components/Expedited.tsx                   |  4 ++--
 src/lib/components/ExplorerLink.tsx                |  2 +-
 src/lib/components/InputWithIcon.tsx               |  2 +-
 src/lib/components/ListSelection.tsx               | 12 ++++++------
 src/lib/components/Loading.tsx                     |  4 ++--
 src/lib/components/OffChainForm.tsx                |  2 +-
 src/lib/components/PageContainer.tsx               |  2 +-
 src/lib/components/PublicDescription.tsx           |  2 +-
 src/lib/components/TagSelection.tsx                | 10 +++++-----
 src/lib/components/TokenCard.tsx                   |  4 ++--
 src/lib/components/TxFilterSelection.tsx           |  8 ++++----
 src/lib/components/ViewPermissionAddresses.tsx     |  2 +-
 src/lib/components/WasmPageContainer.tsx           |  2 +-
 src/lib/components/action-msg/SingleMsg.tsx        |  4 ++--
 src/lib/components/button/BackButton.tsx           |  6 +++---
 src/lib/components/button/CustomIconButton.tsx     |  4 ++--
 src/lib/components/button/RedoButton.tsx           |  2 +-
 src/lib/components/button/ShowMoreButton.tsx       |  2 +-
 src/lib/components/copy/Copier.tsx                 |  4 ++--
 src/lib/components/copy/CopyButton.tsx             |  2 +-
 src/lib/components/dropzone/index.tsx              |  2 +-
 src/lib/components/filter/FilterInput.tsx          |  2 +-
 src/lib/components/forms/AssetInput.tsx            |  2 +-
 src/lib/components/forms/FilterByPermission.tsx    |  2 +-
 src/lib/components/forms/SelectInput.tsx           |  2 +-
 src/lib/components/fund/index.tsx                  |  2 +-
 src/lib/components/fund/selectFund.tsx             |  2 +-
 src/lib/components/json/JsonInput.tsx              |  4 ++--
 src/lib/components/json/ViewFullMsgButton.tsx      |  2 +-
 src/lib/components/modal/ActionModal.tsx           |  8 ++++----
 src/lib/components/modal/CodeSnippet.tsx           |  4 ++--
 src/lib/components/modal/NoMobile.tsx              |  6 +++---
 src/lib/components/modal/RedoModal.tsx             |  4 ++--
 .../components/modal/UnsupportedTokensModal.tsx    |  6 +++---
 src/lib/components/modal/code/SaveNewCode.tsx      |  2 +-
 .../components/modal/contract/AddToOtherList.tsx   |  8 ++++----
 .../modal/contract/ContractDetailsTemplate.tsx     |  2 +-
 .../components/modal/contract/SaveNewContract.tsx  |  2 +-
 src/lib/components/pagination/index.tsx            |  2 +-
 src/lib/components/select-code/CodeSelect.tsx      |  4 ++--
 .../select-code/CodeSelectDrawerButton.tsx         |  2 +-
 .../components/select-code/CodeSelectSection.tsx   |  6 +++---
 .../select-contract/ContractListCard.tsx           |  2 +-
 .../select-contract/SelectContractAdmin.tsx        |  6 +++---
 .../select-contract/SelectContractInstantiator.tsx | 14 +++++++-------
 src/lib/components/state/DisconnectedState.tsx     |  6 +++---
 src/lib/components/state/EmptyState.tsx            |  2 +-
 src/lib/components/state/InvalidState.tsx          |  6 +++---
 src/lib/components/state/ZeroState.tsx             |  8 ++++----
 src/lib/components/stepper/StepperItem.tsx         |  2 +-
 src/lib/components/table/EditableCell.tsx          |  2 +-
 .../table/codes/CodesTableWithWallet.tsx           |  7 +------
 src/lib/components/table/contracts/EditTags.tsx    | 10 +++++-----
 src/lib/components/table/proposals/StatusChip.tsx  |  2 +-
 .../table/transactions/TransactionsTableRow.tsx    |  2 +-
 .../transactions/TransactionsTableWithWallet.tsx   |  2 +-
 src/lib/components/tx/modal/ButtonSection.tsx      |  6 +++---
 src/lib/components/tx/modal/index.tsx              |  4 ++--
 src/lib/components/upload/UploadSection.tsx        |  6 +++---
 .../components/upload/components/UploadCard.tsx    |  8 ++++----
 src/lib/components/wallet/WalletConnect.tsx        |  2 +-
 src/lib/layout/Footer.tsx                          |  4 ++--
 src/lib/layout/Header.tsx                          | 10 +++++-----
 src/lib/layout/Searchbar.tsx                       |  4 ++--
 src/lib/layout/index.tsx                           |  2 +-
 src/lib/layout/navbar/Expand.tsx                   | 12 ++++++------
 .../account-details/components/asset/index.tsx     |  2 +-
 src/lib/pages/account-details/index.tsx            |  4 ++--
 src/lib/pages/admin/index.tsx                      | 14 +++++---------
 .../block-details/components/BlockDetailsTop.tsx   |  2 +-
 .../pages/block-details/components/BlockInfo.tsx   |  2 +-
 src/lib/pages/blocks/components/BlocksRow.tsx      |  2 +-
 .../code-details/components/table/NoContracts.tsx  |  6 +++---
 src/lib/pages/code-details/index.tsx               |  4 +---
 .../pages/codes/components/MySavedCodesSection.tsx |  2 +-
 .../codes/components/MyStoredCodesSection.tsx      |  2 +-
 src/lib/pages/codes/index.tsx                      |  6 +++---
 .../contract-details/components/CommandSection.tsx |  2 +-
 .../contract-description/UserContractDesc.tsx      |  4 ++--
 .../components/contract-description/index.tsx      |  2 +-
 src/lib/pages/contract-list/index.tsx              |  2 +-
 src/lib/pages/contract-list/slug.tsx               |  4 ++--
 src/lib/pages/deploy/index.tsx                     |  6 +++---
 src/lib/pages/execute/components/ExecuteArea.tsx   |  8 ++++----
 src/lib/pages/execute/index.tsx                    |  4 ++--
 src/lib/pages/faucet/index.tsx                     |  4 ++--
 src/lib/pages/home/components/QuickMenu.tsx        |  2 +-
 src/lib/pages/home/components/RecentActivities.tsx |  2 +-
 src/lib/pages/home/index.tsx                       |  2 +-
 src/lib/pages/instantiate/completed.tsx            |  2 +-
 .../pages/instantiate/component/FailedModal.tsx    |  8 ++++----
 src/lib/pages/instantiate/instantiate.tsx          |  8 ++++----
 .../pages/migrate/components/MigrateContract.tsx   |  6 +++---
 .../pages/migrate/components/MigrateOptions.tsx    |  4 ++--
 src/lib/pages/migrate/components/UploadNewCode.tsx |  2 +-
 src/lib/pages/migrate/index.tsx                    | 12 ++++++------
 src/lib/pages/network-overview/index.tsx           |  6 +++---
 src/lib/pages/past-txs/index.tsx                   |  2 +-
 src/lib/pages/proposal/components/Footer.tsx       |  2 +-
 src/lib/pages/proposal/utils/getAlert.tsx          |  8 ++++----
 .../proposals/components/ProposalTextCell.tsx      |  2 +-
 .../proposals/components/ProposalTypeFilter.tsx    |  2 +-
 .../pages/public-project/components/AllProject.tsx |  2 +-
 .../public-project/components/DetailHeader.tsx     |  2 +-
 .../components/PublicProjectCard.tsx               |  4 ++--
 src/lib/pages/query/index.tsx                      |  4 ++--
 src/lib/pages/recent-codes/index.tsx               |  2 +-
 src/lib/pages/tx-details/components/TxHeader.tsx   |  2 +-
 src/lib/pages/upload/index.tsx                     |  4 ++--
 123 files changed, 237 insertions(+), 254 deletions(-)
 delete mode 100644 src/lib/components/DotSeperator.tsx

diff --git a/src/lib/app-fns/tx/clearAdmin.tsx b/src/lib/app-fns/tx/clearAdmin.tsx
index 2ffd2d9dc..893b259ee 100644
--- a/src/lib/app-fns/tx/clearAdmin.tsx
+++ b/src/lib/app-fns/tx/clearAdmin.tsx
@@ -70,7 +70,7 @@ export const clearAdminTx = ({
             <CustomIcon
               name="check-circle-solid"
               color="success.main"
-              boxSize="5"
+              boxSize={5}
             />
           ),
         },
diff --git a/src/lib/app-fns/tx/common/catchTxError.tsx b/src/lib/app-fns/tx/common/catchTxError.tsx
index b5b945a4a..c97c07e90 100644
--- a/src/lib/app-fns/tx/common/catchTxError.tsx
+++ b/src/lib/app-fns/tx/common/catchTxError.tsx
@@ -52,7 +52,7 @@ export const catchTxError = (
           <CustomIcon
             name="alert-circle-solid"
             color="error.light"
-            boxSize="5"
+            boxSize={5}
           />
         ),
       },
diff --git a/src/lib/app-fns/tx/execute.tsx b/src/lib/app-fns/tx/execute.tsx
index 61d491f5f..75cf17da6 100644
--- a/src/lib/app-fns/tx/execute.tsx
+++ b/src/lib/app-fns/tx/execute.tsx
@@ -88,7 +88,7 @@ export const executeContractTx = ({
             <CustomIcon
               name="check-circle-solid"
               color="success.main"
-              boxSize="5"
+              boxSize={5}
             />
           ),
         },
diff --git a/src/lib/app-fns/tx/resend.tsx b/src/lib/app-fns/tx/resend.tsx
index e9cd21d8f..5f5140bd7 100644
--- a/src/lib/app-fns/tx/resend.tsx
+++ b/src/lib/app-fns/tx/resend.tsx
@@ -72,7 +72,7 @@ export const resendTx = ({
             <CustomIcon
               name="check-circle-solid"
               color="success.main"
-              boxSize="5"
+              boxSize={5}
             />
           ),
         },
diff --git a/src/lib/app-fns/tx/submitProposal.tsx b/src/lib/app-fns/tx/submitProposal.tsx
index 96ef893c1..25c84353e 100644
--- a/src/lib/app-fns/tx/submitProposal.tsx
+++ b/src/lib/app-fns/tx/submitProposal.tsx
@@ -90,7 +90,7 @@ export const submitProposalTx = ({
             <CustomIcon
               name="submit-proposal-solid"
               color="gray.600"
-              boxSize="5"
+              boxSize={5}
             />
           ),
         },
diff --git a/src/lib/app-fns/tx/upload.tsx b/src/lib/app-fns/tx/upload.tsx
index 5f925a9af..1045c9b76 100644
--- a/src/lib/app-fns/tx/upload.tsx
+++ b/src/lib/app-fns/tx/upload.tsx
@@ -95,7 +95,7 @@ export const uploadContractTx = ({
             </>
           ),
           headerIcon: (
-            <CustomIcon name="upload-cloud" boxSize="5" color="gray.600" />
+            <CustomIcon name="upload-cloud" boxSize={5} color="gray.600" />
           ),
         },
         actionVariant: isMigrate ? "upload-migrate" : "upload",
diff --git a/src/lib/components/ButtonCard.tsx b/src/lib/components/ButtonCard.tsx
index 6237ee595..38d69cefa 100644
--- a/src/lib/components/ButtonCard.tsx
+++ b/src/lib/components/ButtonCard.tsx
@@ -20,7 +20,7 @@ export const ButtonCard = ({
 }: ButtonCardProps) => (
   <Flex
     aria-disabled={disabled}
-    p="24px"
+    p={6}
     align="center"
     justify="space-between"
     onClick={!disabled ? onClick : undefined}
diff --git a/src/lib/components/ConnectWalletAlert.tsx b/src/lib/components/ConnectWalletAlert.tsx
index a4e99b591..967824616 100644
--- a/src/lib/components/ConnectWalletAlert.tsx
+++ b/src/lib/components/ConnectWalletAlert.tsx
@@ -38,10 +38,10 @@ export const ConnectWalletAlert = ({
       variant="accent"
       alignItems="center"
       justifyContent="space-between"
-      py="12px"
+      py={3}
     >
       <Flex gap={2}>
-        <CustomIcon name="wallet-solid" boxSize="4" />
+        <CustomIcon name="wallet-solid" boxSize={4} />
         <Box>
           <AlertTitle>{title}</AlertTitle>
           <AlertDescription>{subtitle}</AlertDescription>
diff --git a/src/lib/components/ContractCmdButton.tsx b/src/lib/components/ContractCmdButton.tsx
index d5dfb3c3e..5d1153244 100644
--- a/src/lib/components/ContractCmdButton.tsx
+++ b/src/lib/components/ContractCmdButton.tsx
@@ -12,7 +12,6 @@ export const ContractCmdButton = ({
     variant="command-button"
     fontSize="12px"
     height="24px"
-    px="10px"
     borderRadius="16px"
     fontWeight={400}
     onClick={onClickCmd}
diff --git a/src/lib/components/ContractSelectSection.tsx b/src/lib/components/ContractSelectSection.tsx
index 7a7b0b999..036da5ab6 100644
--- a/src/lib/components/ContractSelectSection.tsx
+++ b/src/lib/components/ContractSelectSection.tsx
@@ -197,7 +197,7 @@ export const ContractSelectSection = observer(
         mb={style.container}
         borderWidth="thin"
         borderColor="gray.800"
-        p="16px"
+        p={4}
         borderRadius="8px"
         fontSize="12px"
         justify="space-between"
@@ -235,7 +235,7 @@ export const ContractSelectSection = observer(
               label={contractState.label}
             />
           </Flex>
-          <Flex gap="8px" alignItems="center">
+          <Flex gap={2} alignItems="center">
             {mode === "all-lists" && contractState.isValid && (
               <ContractDetailsButton
                 contractAddress={contractAddress}
diff --git a/src/lib/components/CustomTab.tsx b/src/lib/components/CustomTab.tsx
index de89c4d09..7d9f7141e 100644
--- a/src/lib/components/CustomTab.tsx
+++ b/src/lib/components/CustomTab.tsx
@@ -34,7 +34,7 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
       {tabProps.children}
 
       {count !== undefined && (
-        <Badge variant={isSelected ? "primary" : "gray"} ml="6px">
+        <Badge variant={isSelected ? "primary" : "gray"} ml={2}>
           {count}
         </Badge>
       )}
diff --git a/src/lib/components/DotSeparator.tsx b/src/lib/components/DotSeparator.tsx
index 1e6778911..0ffeb9d48 100644
--- a/src/lib/components/DotSeparator.tsx
+++ b/src/lib/components/DotSeparator.tsx
@@ -1,5 +1,5 @@
 import { Box } from "@chakra-ui/react";
 
 export const DotSeparator = () => (
-  <Box bg="secondary.darker" borderRadius="50%" w="4px" h="4px" />
+  <Box bg="secondary.darker" borderRadius="50%" w={1} h={1} />
 );
diff --git a/src/lib/components/DotSeperator.tsx b/src/lib/components/DotSeperator.tsx
deleted file mode 100644
index 1e6778911..000000000
--- a/src/lib/components/DotSeperator.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Box } from "@chakra-ui/react";
-
-export const DotSeparator = () => (
-  <Box bg="secondary.darker" borderRadius="50%" w="4px" h="4px" />
-);
diff --git a/src/lib/components/ErrorMessageRender.tsx b/src/lib/components/ErrorMessageRender.tsx
index 7d67ee009..09d1bb997 100644
--- a/src/lib/components/ErrorMessageRender.tsx
+++ b/src/lib/components/ErrorMessageRender.tsx
@@ -12,7 +12,7 @@ export const ErrorMessageRender = ({
   ...restProps
 }: ErrorMessageRenderProps) => (
   <Flex gap={2} {...restProps}>
-    <CustomIcon name="alert-circle-solid" color="error.main" boxSize="3" />
+    <CustomIcon name="alert-circle-solid" color="error.main" boxSize={3} />
     <Text variant="body3" color="error.main">
       {error}
     </Text>
diff --git a/src/lib/components/Expedited.tsx b/src/lib/components/Expedited.tsx
index 50acc297c..e4423319c 100644
--- a/src/lib/components/Expedited.tsx
+++ b/src/lib/components/Expedited.tsx
@@ -23,8 +23,8 @@ export const Expedited = ({ isActiveExpedited }: ExpeditedProps) => (
     <Flex align="center">
       <CustomIcon
         name="expedited"
-        boxSize="4"
-        ml="0"
+        boxSize={4}
+        ml={0}
         color={isActiveExpedited ? "accent.main" : "gray.400"}
       />
       <Text
diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
index 240de5a3b..1cf9b4e5b 100644
--- a/src/lib/components/ExplorerLink.tsx
+++ b/src/lib/components/ExplorerLink.tsx
@@ -203,7 +203,7 @@ export const ExplorerLink = ({
             value={copyValue || value}
             copyLabel={copyValue ? `${getCopyLabel(type)} Copied!` : undefined}
             display={showCopyOnHover ? "none" : "block"}
-            ml="8px"
+            ml={2}
             amptrackSection={ampCopierSection}
           />
         </>
diff --git a/src/lib/components/InputWithIcon.tsx b/src/lib/components/InputWithIcon.tsx
index 13b3337d1..402cf8f9e 100644
--- a/src/lib/components/InputWithIcon.tsx
+++ b/src/lib/components/InputWithIcon.tsx
@@ -29,7 +29,7 @@ const InputWithIcon = ({
       size={size}
       onClick={action ? () => AmpTrack(AmpEvent.USE_SEARCH_INPUT) : undefined}
     />
-    <InputRightElement h="56px" alignItems="center" mr="1">
+    <InputRightElement h="56px" alignItems="center" mr={1}>
       <CustomIcon name="search" color="gray.600" />
     </InputRightElement>
   </InputGroup>
diff --git a/src/lib/components/ListSelection.tsx b/src/lib/components/ListSelection.tsx
index cf9b9efcd..2edfae202 100644
--- a/src/lib/components/ListSelection.tsx
+++ b/src/lib/components/ListSelection.tsx
@@ -134,7 +134,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
             overflowX="scroll"
           >
             {result.length > 0 && (
-              <Flex alignItems="center" pl="2">
+              <Flex alignItems="center" pl={2}>
                 {[...result].map((option) => (
                   <Flex
                     display="inline-block"
@@ -149,7 +149,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                       mr={1}
                     >
                       {option.label}
-                      <CustomIcon name="close" boxSize="3" />
+                      <CustomIcon name="close" boxSize={3} />
                     </Tag>
                   </Flex>
                 ))}
@@ -195,8 +195,8 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
             <List
               borderRadius="8px"
               bg="gray.800"
-              px="2"
-              py="1"
+              px={2}
+              py={1}
               mt={0}
               position="absolute"
               zIndex="2"
@@ -222,7 +222,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                         mr={2}
                         name="check"
                         color="gray.600"
-                        boxSize="3"
+                        boxSize={3}
                       />
                     )}
                   </Flex>
@@ -241,7 +241,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                       onClick={() => setEnableOutside(false)}
                     >
                       <Flex alignItems="center" gap={2}>
-                        <CustomIcon name="plus" color="text.dark" boxSize="3" />
+                        <CustomIcon name="plus" color="text.dark" boxSize={3} />
                         <Text variant="body2">Create New List </Text>
                       </Flex>
                     </ListItem>
diff --git a/src/lib/components/Loading.tsx b/src/lib/components/Loading.tsx
index eeb87be83..ad137e31c 100644
--- a/src/lib/components/Loading.tsx
+++ b/src/lib/components/Loading.tsx
@@ -5,12 +5,12 @@ export const Loading = () => (
     borderY="1px solid"
     borderColor="gray.700"
     width="full"
-    py="60px"
+    py={15}
     my={12}
     flexDirection="column"
     alignItems="center"
   >
     <Spinner size="xl" />
-    <Text mt="20px">Loading ...</Text>
+    <Text mt={5}>Loading ...</Text>
   </Flex>
 );
diff --git a/src/lib/components/OffChainForm.tsx b/src/lib/components/OffChainForm.tsx
index dc301e854..a1c692525 100644
--- a/src/lib/components/OffChainForm.tsx
+++ b/src/lib/components/OffChainForm.tsx
@@ -39,7 +39,7 @@ export const OffChainForm = <T extends OffchainDetail>({
   errors,
   labelBgColor = "background.main",
 }: OffChainFormProps<T>) => (
-  <VStack gap="16px" w="full">
+  <VStack gap={4} w="full">
     <ControllerInput
       name={"name" as FieldPath<T>}
       control={control}
diff --git a/src/lib/components/PageContainer.tsx b/src/lib/components/PageContainer.tsx
index f4b8cd380..d1130c281 100644
--- a/src/lib/components/PageContainer.tsx
+++ b/src/lib/components/PageContainer.tsx
@@ -6,7 +6,7 @@ type PageContainerProps = {
 };
 
 const PageContainer = ({ children }: PageContainerProps) => (
-  <Box as="main" p="48px" overflowX="hidden" minH="inherit">
+  <Box as="main" p={12} overflowX="hidden" minH="inherit">
     {children}
   </Box>
 );
diff --git a/src/lib/components/PublicDescription.tsx b/src/lib/components/PublicDescription.tsx
index a3266f2df..a84040874 100644
--- a/src/lib/components/PublicDescription.tsx
+++ b/src/lib/components/PublicDescription.tsx
@@ -39,7 +39,7 @@ export const PublicDescription = ({
     >
       <Flex align="center" gap={1} h="32px">
         {icon}
-        <Text variant="body2" fontWeight={500} color="text.dark" mt="1px">
+        <Text variant="body2" fontWeight={500} color="text.dark">
           {title}
         </Text>
       </Flex>
diff --git a/src/lib/components/TagSelection.tsx b/src/lib/components/TagSelection.tsx
index 3b9a344a7..b5c9d62c2 100644
--- a/src/lib/components/TagSelection.tsx
+++ b/src/lib/components/TagSelection.tsx
@@ -145,7 +145,7 @@ export const TagSelection = observer(
               overflowX="scroll"
             >
               {result.length > 0 && (
-                <Flex alignItems="center" pl="2">
+                <Flex alignItems="center" pl={2}>
                   {result.map((option) => (
                     <Flex
                       display="inline-block"
@@ -154,7 +154,7 @@ export const TagSelection = observer(
                     >
                       <Tag gap={1} mr={1} cursor="pointer">
                         {option}
-                        <CustomIcon name="close" boxSize="3" />
+                        <CustomIcon name="close" boxSize={3} />
                       </Tag>
                     </Flex>
                   ))}
@@ -202,8 +202,8 @@ export const TagSelection = observer(
               <List
                 borderRadius="8px"
                 bg="gray.800"
-                px="2"
-                py="1"
+                px={2}
+                py={1}
                 mt={0}
                 position="absolute"
                 zIndex="2"
@@ -247,7 +247,7 @@ export const TagSelection = observer(
                           mr={2}
                           name="check"
                           color="gray.600"
-                          boxSize="3"
+                          boxSize={3}
                         />
                       )}
                     </Flex>
diff --git a/src/lib/components/TokenCard.tsx b/src/lib/components/TokenCard.tsx
index f03db1c44..35b93c4bd 100644
--- a/src/lib/components/TokenCard.tsx
+++ b/src/lib/components/TokenCard.tsx
@@ -63,7 +63,7 @@ export const TokenCard = ({
           >
             {symbol}
           </Text>
-          <Badge variant="gray" ml="6px">
+          <Badge variant="gray" ml={2}>
             {price ? formatPrice(price as USD<number>) : "N/A"}
           </Badge>
           <Copier
@@ -71,7 +71,7 @@ export const TokenCard = ({
             value={id}
             copyLabel="Token ID Copied!"
             display="none"
-            ml="1px"
+            ml={1}
             amptrackSection={amptrackSection}
           />
         </Flex>
diff --git a/src/lib/components/TxFilterSelection.tsx b/src/lib/components/TxFilterSelection.tsx
index 44ab688f9..87941048e 100644
--- a/src/lib/components/TxFilterSelection.tsx
+++ b/src/lib/components/TxFilterSelection.tsx
@@ -117,7 +117,7 @@ export const TxFilterSelection = forwardRef<
             overflowX="scroll"
           >
             {result.length > 0 && (
-              <Flex alignItems="center" pl="2">
+              <Flex alignItems="center" pl={2}>
                 {[...result].reverse().map((option) => (
                   <Flex
                     display="inline-block"
@@ -132,7 +132,7 @@ export const TxFilterSelection = forwardRef<
                       cursor="pointer"
                     >
                       {displayActionValue(option)}
-                      <CustomIcon name="close" boxSize="3" />
+                      <CustomIcon name="close" boxSize={3} />
                     </Tag>
                   </Flex>
                 ))}
@@ -179,8 +179,8 @@ export const TxFilterSelection = forwardRef<
             <List
               borderRadius="8px"
               bg="gray.900"
-              px="2"
-              py="1"
+              px={2}
+              py={1}
               mt={0}
               position="absolute"
               zIndex="2"
diff --git a/src/lib/components/ViewPermissionAddresses.tsx b/src/lib/components/ViewPermissionAddresses.tsx
index 0d24070b2..b3e44d6a6 100644
--- a/src/lib/components/ViewPermissionAddresses.tsx
+++ b/src/lib/components/ViewPermissionAddresses.tsx
@@ -50,7 +50,7 @@ export const ViewPermissionAddresses = ({
           rightIcon={
             <CustomIcon
               name={viewAll ? "chevron-up" : "chevron-down"}
-              boxSize="3"
+              boxSize={3}
             />
           }
         >
diff --git a/src/lib/components/WasmPageContainer.tsx b/src/lib/components/WasmPageContainer.tsx
index 09f24845c..7abf4316a 100644
--- a/src/lib/components/WasmPageContainer.tsx
+++ b/src/lib/components/WasmPageContainer.tsx
@@ -15,7 +15,7 @@ const WasmPageContainer = ({
     align="center"
     width={width}
     mx="auto"
-    py="48px"
+    py={12}
     direction="column"
   >
     {children}
diff --git a/src/lib/components/action-msg/SingleMsg.tsx b/src/lib/components/action-msg/SingleMsg.tsx
index 758006a2f..886fea443 100644
--- a/src/lib/components/action-msg/SingleMsg.tsx
+++ b/src/lib/components/action-msg/SingleMsg.tsx
@@ -68,7 +68,7 @@ export const SingleMsg = ({
           </Text>
           <Tooltip label={`Token ID: ${token.id}`} maxW="240px">
             <Flex cursor="pointer">
-              <CustomIcon name="info-circle" boxSize="3" color="gray.600" />
+              <CustomIcon name="info-circle" boxSize={3} color="gray.600" />
             </Flex>
           </Tooltip>
           <Copier
@@ -76,7 +76,7 @@ export const SingleMsg = ({
             value={token.id}
             copyLabel="Token ID Copied!"
             display="none"
-            ml="4px"
+            ml={1}
           />
         </Flex>
       ))}
diff --git a/src/lib/components/button/BackButton.tsx b/src/lib/components/button/BackButton.tsx
index 710d28d07..9f1cac6ca 100644
--- a/src/lib/components/button/BackButton.tsx
+++ b/src/lib/components/button/BackButton.tsx
@@ -12,16 +12,16 @@ export const BackButton = (props: ButtonProps) => {
     <Button
       variant="ghost-secondary"
       size="sm"
-      mb="8px"
+      mb={2}
       p="unset"
-      pr="2"
+      pr={2}
       onClick={() => {
         AmpTrack(AmpEvent.USE_BACK_BUTTON);
         router.back();
       }}
       {...props}
     >
-      <CustomIcon name="chevron-left" boxSize="3" mr={2} />
+      <CustomIcon name="chevron-left" boxSize={3} mr={2} />
       BACK
     </Button>
   );
diff --git a/src/lib/components/button/CustomIconButton.tsx b/src/lib/components/button/CustomIconButton.tsx
index 6c1d9fc20..45c1192fd 100644
--- a/src/lib/components/button/CustomIconButton.tsx
+++ b/src/lib/components/button/CustomIconButton.tsx
@@ -17,7 +17,7 @@ export const CustomIconButton = ({
   <Button
     variant="ghost-gray"
     size="xs"
-    px="1"
+    px={1}
     minWidth="32px"
     minHeight="32px"
     height="full"
@@ -30,7 +30,7 @@ export const CustomIconButton = ({
       alignItems="center"
       onClick={onClick}
     >
-      <CustomIcon name={icon} boxSize="5" color="gray.600" />
+      <CustomIcon name={icon} boxSize={5} color="gray.600" />
     </Link>
   </Button>
 );
diff --git a/src/lib/components/button/RedoButton.tsx b/src/lib/components/button/RedoButton.tsx
index 2240a8abd..40ecb234c 100644
--- a/src/lib/components/button/RedoButton.tsx
+++ b/src/lib/components/button/RedoButton.tsx
@@ -27,7 +27,7 @@ export const RedoButton = ({ message }: RedoButtonProps) => {
         )
       }
     >
-      <CustomIcon name="redo" boxSize="3" />
+      <CustomIcon name="redo" boxSize={3} />
       Redo
     </Button>
   );
diff --git a/src/lib/components/button/ShowMoreButton.tsx b/src/lib/components/button/ShowMoreButton.tsx
index a96388e5c..7dbab267d 100644
--- a/src/lib/components/button/ShowMoreButton.tsx
+++ b/src/lib/components/button/ShowMoreButton.tsx
@@ -15,7 +15,7 @@ export const ShowMoreButton = ({
   setToggleShowMore,
 }: ShowMoreButtonProps) => (
   <Button
-    p="0"
+    p={0}
     rightIcon={
       <CustomIcon name={toggleShowMore ? "chevron-up" : "chevron-down"} />
     }
diff --git a/src/lib/components/copy/Copier.tsx b/src/lib/components/copy/Copier.tsx
index f36e7ce58..f723b79bb 100644
--- a/src/lib/components/copy/Copier.tsx
+++ b/src/lib/components/copy/Copier.tsx
@@ -10,7 +10,7 @@ interface CopierProps {
   value: string;
   copyLabel?: string;
   display?: LayoutProps["display"];
-  ml?: string;
+  ml?: number;
   amptrackSection?: string;
 }
 
@@ -19,7 +19,7 @@ export const Copier = ({
   value,
   copyLabel,
   display = "block",
-  ml = "8px",
+  ml = 2,
   amptrackSection,
 }: CopierProps) => (
   <CopyTemplate
diff --git a/src/lib/components/copy/CopyButton.tsx b/src/lib/components/copy/CopyButton.tsx
index acfa40de4..944a80434 100644
--- a/src/lib/components/copy/CopyButton.tsx
+++ b/src/lib/components/copy/CopyButton.tsx
@@ -39,7 +39,7 @@ export const CopyButton = ({
         onClick={() =>
           AmpTrack(AmpEvent.USE_COPY_BUTTON, { section: amptrackSection })
         }
-        leftIcon={hasIcon ? <CustomIcon name="copy" boxSize="4" /> : undefined}
+        leftIcon={hasIcon ? <CustomIcon name="copy" boxSize={4} /> : undefined}
         {...buttonProps}
       >
         {buttonText}
diff --git a/src/lib/components/dropzone/index.tsx b/src/lib/components/dropzone/index.tsx
index e80189009..53656e2df 100644
--- a/src/lib/components/dropzone/index.tsx
+++ b/src/lib/components/dropzone/index.tsx
@@ -45,7 +45,7 @@ export function DropZone({ setFile, ...componentProps }: DropZoneProps) {
     >
       <input {...getInputProps()} />
       <UploadIcon />
-      <Flex my="8px" gap="4px">
+      <Flex my={2} gap={1}>
         <Text
           variant="body1"
           color="secondary.main"
diff --git a/src/lib/components/filter/FilterInput.tsx b/src/lib/components/filter/FilterInput.tsx
index c6c96f07f..c80f22093 100644
--- a/src/lib/components/filter/FilterInput.tsx
+++ b/src/lib/components/filter/FilterInput.tsx
@@ -57,7 +57,7 @@ export const FilterInput = ({
       <CustomIcon
         name={isDropdown ? "chevron-up" : "chevron-down"}
         position="absolute"
-        mr="0.5px"
+        mr={1}
         px={3}
         boxSize="40px"
         right="0px"
diff --git a/src/lib/components/forms/AssetInput.tsx b/src/lib/components/forms/AssetInput.tsx
index 6c003556e..a3605f2af 100644
--- a/src/lib/components/forms/AssetInput.tsx
+++ b/src/lib/components/forms/AssetInput.tsx
@@ -27,7 +27,7 @@ export const AssetInput = ({
   assetOptions,
   initialSelected,
 }: AssetInputProps) => (
-  <Grid templateColumns="130px 1fr auto" columnGap="16px" w="full" mb="16px">
+  <Grid templateColumns="130px 1fr auto" columnGap={4} w="full" mb={4}>
     <SelectInput
       formLabel="Asset"
       options={assetOptions}
diff --git a/src/lib/components/forms/FilterByPermission.tsx b/src/lib/components/forms/FilterByPermission.tsx
index 0c776f205..fc24e90a8 100644
--- a/src/lib/components/forms/FilterByPermission.tsx
+++ b/src/lib/components/forms/FilterByPermission.tsx
@@ -44,7 +44,7 @@ export const FilterByPermission = ({
   initialSelected,
   labelBgColor = "background.main",
 }: FilterByPermissionProps) => (
-  <Grid columnGap="16px" w="full" mb="16px" maxW="360px">
+  <Grid columnGap={4} w="full" mb={4} maxW="360px">
     <SelectInput<PermissionFilterValue>
       formLabel="Filter by Instantiate Permission"
       options={options}
diff --git a/src/lib/components/forms/SelectInput.tsx b/src/lib/components/forms/SelectInput.tsx
index 66b3dcac2..7f27bd996 100644
--- a/src/lib/components/forms/SelectInput.tsx
+++ b/src/lib/components/forms/SelectInput.tsx
@@ -115,7 +115,7 @@ export const SelectInput = <T extends string>({
         >
           <div className="form-label">{formLabel}</div>
           {selectedOption?.icon && (
-            <InputLeftElement pointerEvents="none" h="full" ml="1">
+            <InputLeftElement pointerEvents="none" h="full" ml={1}>
               <CustomIcon name={selectedOption.icon} color="gray.600" />
             </InputLeftElement>
           )}
diff --git a/src/lib/components/fund/index.tsx b/src/lib/components/fund/index.tsx
index 1a161a603..a273f6499 100644
--- a/src/lib/components/fund/index.tsx
+++ b/src/lib/components/fund/index.tsx
@@ -73,7 +73,7 @@ export const AttachFund = ({
   attachFundsOption,
 }: AttachFundProps) => (
   <>
-    <Flex mb="20px">
+    <Flex mb={5}>
       <SelectInput
         formLabel="Attach Funds"
         options={attachFundsOptions}
diff --git a/src/lib/components/fund/selectFund.tsx b/src/lib/components/fund/selectFund.tsx
index 98fa9356b..510a7e111 100644
--- a/src/lib/components/fund/selectFund.tsx
+++ b/src/lib/components/fund/selectFund.tsx
@@ -71,7 +71,7 @@ export const SelectFund = ({
       ))}
       <Button
         variant="outline-primary"
-        mt="32px"
+        mt={8}
         mx="auto"
         onClick={() => append({ denom: "", amount: "" })}
         disabled={assetOptions.length === selectedAssets.length}
diff --git a/src/lib/components/json/JsonInput.tsx b/src/lib/components/json/JsonInput.tsx
index 4d7a11ae3..30bcd438f 100644
--- a/src/lib/components/json/JsonInput.tsx
+++ b/src/lib/components/json/JsonInput.tsx
@@ -40,7 +40,7 @@ const getResponse = (jsonState: JsonState) => {
             <CustomIcon
               name="check-circle-solid"
               color="success.main"
-              boxSize="3"
+              boxSize={3}
             />
             Valid JSON Format
           </>
@@ -54,7 +54,7 @@ const getResponse = (jsonState: JsonState) => {
             <CustomIcon
               name="alert-circle-solid"
               color="error.light"
-              boxSize="3"
+              boxSize={3}
             />
             {jsonState.errMsg}
           </>
diff --git a/src/lib/components/json/ViewFullMsgButton.tsx b/src/lib/components/json/ViewFullMsgButton.tsx
index 1f00e0314..4032951f3 100644
--- a/src/lib/components/json/ViewFullMsgButton.tsx
+++ b/src/lib/components/json/ViewFullMsgButton.tsx
@@ -31,7 +31,7 @@ export const ViewFullMsgButton = ({
     </Text>
     <CustomIcon
       name={viewFull ? "chevron-up" : "chevron-down"}
-      boxSize="3"
+      boxSize={3}
       color="text.dark"
     />
   </Flex>
diff --git a/src/lib/components/modal/ActionModal.tsx b/src/lib/components/modal/ActionModal.tsx
index 891454e74..01edb83b5 100644
--- a/src/lib/components/modal/ActionModal.tsx
+++ b/src/lib/components/modal/ActionModal.tsx
@@ -92,14 +92,14 @@ export function ActionModal({
             borderColor="gray.700"
           >
             <Box w="full">
-              <Flex alignItems="center" gap="3">
-                <CustomIcon name={icon} color={iconColor} boxSize="5" />
+              <Flex alignItems="center" gap={3}>
+                <CustomIcon name={icon} color={iconColor} boxSize={5} />
                 <Heading as="h5" variant="h5">
                   {title}
                 </Heading>
               </Flex>
               {subtitle && (
-                <Text variant="body3" color="text.dark" pt="2">
+                <Text variant="body3" color="text.dark" pt={2}>
                   {subtitle}
                 </Text>
               )}
@@ -109,7 +109,7 @@ export function ActionModal({
           {!noCloseButton && <ModalCloseButton color="gray.600" />}
           <ModalBody>{children}</ModalBody>
           <ModalFooter>
-            <Flex w="full" justifyContent="center" gap="2">
+            <Flex w="full" justifyContent="center" gap={2}>
               <Button
                 w="200px"
                 onClick={handleOnMain}
diff --git a/src/lib/components/modal/CodeSnippet.tsx b/src/lib/components/modal/CodeSnippet.tsx
index 1ff95b059..34a4e8e8b 100644
--- a/src/lib/components/modal/CodeSnippet.tsx
+++ b/src/lib/components/modal/CodeSnippet.tsx
@@ -194,7 +194,7 @@ execute();
         variant="outline-accent"
         size="sm"
         ml="auto"
-        gap="1"
+        gap={1}
         onClick={() => {
           AmpTrack(AmpEvent.USE_CONTRACT_SNIPPET);
           onOpen();
@@ -208,7 +208,7 @@ execute();
         <ModalOverlay />
         <ModalContent w="840px">
           <ModalHeader>
-            <CustomIcon name="code" boxSize="6" color="gray.600" />
+            <CustomIcon name="code" boxSize={6} color="gray.600" />
             <Heading as="h5" variant="h5">
               Code Snippet
             </Heading>
diff --git a/src/lib/components/modal/NoMobile.tsx b/src/lib/components/modal/NoMobile.tsx
index c491a2910..6536cbb18 100644
--- a/src/lib/components/modal/NoMobile.tsx
+++ b/src/lib/components/modal/NoMobile.tsx
@@ -17,15 +17,15 @@ export const NoMobile = () => (
         direction="column"
         justify="center"
         align="center"
-        padding="8"
+        p={8}
         textAlign="center"
       >
         <CustomIcon
           name="info-circle-solid"
           color="primary.light"
-          boxSize="10"
+          boxSize={10}
         />
-        <Heading as="h5" variant="h5" py="4">
+        <Heading as="h5" variant="h5" py={1}>
           Sorry, we currently do not support mobile use.
         </Heading>
         <Text variant="body1">
diff --git a/src/lib/components/modal/RedoModal.tsx b/src/lib/components/modal/RedoModal.tsx
index 14aa46565..7d3c6bac7 100644
--- a/src/lib/components/modal/RedoModal.tsx
+++ b/src/lib/components/modal/RedoModal.tsx
@@ -44,7 +44,7 @@ export const RedoModal = ({ message }: RedoModalProps) => {
         <ModalContent w="640px">
           <ModalHeader>
             <Flex w="full" direction="row" alignItems="center" gap={2} pt={1}>
-              <CustomIcon name="redo" boxSize="5" color="gray.600" />
+              <CustomIcon name="redo" boxSize={5} color="gray.600" />
               <Heading variant="h5" as="h5">
                 Redo Instantiate
               </Heading>
@@ -75,7 +75,7 @@ export const RedoModal = ({ message }: RedoModalProps) => {
               direction="row"
               align="center"
               justifyContent="end"
-              gap="4"
+              gap={4}
             >
               <Button
                 cursor="pointer"
diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx
index 7c7b29436..eabde7fa8 100644
--- a/src/lib/components/modal/UnsupportedTokensModal.tsx
+++ b/src/lib/components/modal/UnsupportedTokensModal.tsx
@@ -89,7 +89,7 @@ const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
           </Text>
           <Tooltip label={`Token ID: ${balance.id}`} maxW="500px">
             <Flex cursor="pointer" className="info" display="none">
-              <CustomIcon name="info-circle" boxSize="3" color="gray.600" />
+              <CustomIcon name="info-circle" boxSize={3} color="gray.600" />
             </Flex>
           </Tooltip>
           <Copier
@@ -97,7 +97,7 @@ const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
             value={balance.id}
             copyLabel="Token ID Copied!"
             display="none"
-            ml="1px"
+            ml={1}
             amptrackSection="unsupported_token_copy"
           />
         </Flex>
@@ -171,7 +171,7 @@ export const UnsupportedTokensModal = ({
         <ModalContent w="800px">
           <ModalHeader>
             <Flex w="full" direction="row" alignItems="center" gap={2} pt={1}>
-              <CustomIcon name={content.icon} boxSize="5" color="gray.600" />
+              <CustomIcon name={content.icon} boxSize={5} color="gray.600" />
               <Heading variant="h5" as="h5">
                 Unsupported Assets
               </Heading>
diff --git a/src/lib/components/modal/code/SaveNewCode.tsx b/src/lib/components/modal/code/SaveNewCode.tsx
index 757a5de66..ad820d2d3 100644
--- a/src/lib/components/modal/code/SaveNewCode.tsx
+++ b/src/lib/components/modal/code/SaveNewCode.tsx
@@ -181,7 +181,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
       otherBtnTitle="Cancel"
       closeOnOverlayClick={false}
     >
-      <FormControl display="flex" flexDir="column" gap="36px">
+      <FormControl display="flex" flexDir="column" gap={9}>
         Save other stored codes to your &ldquo;Saved Codes&rdquo; list
         <NumberInput
           variant="floating"
diff --git a/src/lib/components/modal/contract/AddToOtherList.tsx b/src/lib/components/modal/contract/AddToOtherList.tsx
index 7b0616cd1..aea4f260d 100644
--- a/src/lib/components/modal/contract/AddToOtherList.tsx
+++ b/src/lib/components/modal/contract/AddToOtherList.tsx
@@ -39,8 +39,8 @@ export const AddToOtherListModal = observer(
         title="Add or remove from other lists"
         icon="bookmark-solid"
         headerContent={
-          <Flex pt="6" gap="36px">
-            <Flex direction="column" gap="8px">
+          <Flex pt={6} gap={9}>
+            <Flex direction="column" gap={2}>
               <Text variant="body2" fontWeight={500} color="text.dark">
                 Contract Name
               </Text>
@@ -49,7 +49,7 @@ export const AddToOtherListModal = observer(
               </Text>
             </Flex>
 
-            <Flex direction="column" gap="8px">
+            <Flex direction="column" gap={2}>
               <Text variant="body2">
                 {contractLocalInfo.name ?? contractLocalInfo.label}
               </Text>
@@ -65,7 +65,7 @@ export const AddToOtherListModal = observer(
         mainAction={handleSave}
         otherBtnTitle="Cancel"
       >
-        <Box my="16px">
+        <Box my={4}>
           <ListSelection
             result={contractLists}
             placeholder="Not listed"
diff --git a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
index 612ecb0d8..b1ae6d43b 100644
--- a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
+++ b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
@@ -91,7 +91,7 @@ export const ContractDetailsTemplateModal = ({
       title={title}
       subtitle={subtitle}
       headerContent={
-        <Flex gap={4} alignItems="center" pt="6">
+        <Flex gap={4} alignItems="center" pt={6}>
           <Text variant="body2" fontWeight={500} color="text.dark">
             Contract Address
           </Text>
diff --git a/src/lib/components/modal/contract/SaveNewContract.tsx b/src/lib/components/modal/contract/SaveNewContract.tsx
index 5df833fcc..29237ceee 100644
--- a/src/lib/components/modal/contract/SaveNewContract.tsx
+++ b/src/lib/components/modal/contract/SaveNewContract.tsx
@@ -199,7 +199,7 @@ export function SaveNewContractModal({
       otherAction={resetForm}
       closeOnOverlayClick={false}
     >
-      <VStack gap="16px">
+      <VStack gap={4}>
         <ControllerInput
           name="contractAddress"
           control={control}
diff --git a/src/lib/components/pagination/index.tsx b/src/lib/components/pagination/index.tsx
index 86c922cc5..65500edd4 100644
--- a/src/lib/components/pagination/index.tsx
+++ b/src/lib/components/pagination/index.tsx
@@ -79,7 +79,7 @@ export const Pagination = ({
           <option value="100">100</option>
           <CustomIcon name="chevron-down" color="gray.600" />
         </Select>
-        <Text variant="body3" mx="30px">
+        <Text variant="body3" mx={7}>
           {`${offsetData.toLocaleString()} - ${lastDataInPage.toLocaleString()} of ${totalData.toLocaleString()}`}
         </Text>
         <Previous pageSize={pageSize} variant="unstyled" display="flex">
diff --git a/src/lib/components/select-code/CodeSelect.tsx b/src/lib/components/select-code/CodeSelect.tsx
index 82f80ce42..654cc8243 100644
--- a/src/lib/components/select-code/CodeSelect.tsx
+++ b/src/lib/components/select-code/CodeSelect.tsx
@@ -29,8 +29,8 @@ export const CodeSelect = ({
     <Flex direction="column" {...componentProps}>
       <Flex
         align="center"
-        p="16px"
-        gap="16px"
+        p={4}
+        gap={4}
         w="100%"
         bgColor="gray.900"
         borderRadius="8px"
diff --git a/src/lib/components/select-code/CodeSelectDrawerButton.tsx b/src/lib/components/select-code/CodeSelectDrawerButton.tsx
index 9a0c5ccbb..4c86a4b0c 100644
--- a/src/lib/components/select-code/CodeSelectDrawerButton.tsx
+++ b/src/lib/components/select-code/CodeSelectDrawerButton.tsx
@@ -89,7 +89,7 @@ export const CodeSelectDrawerButton = ({
         <DrawerOverlay />
         <DrawerContent h="80%">
           <DrawerHeader borderBottom="1px solid" borderColor="gray.700">
-            <CustomIcon name="code" boxSize="6" color="gray.600" />
+            <CustomIcon name="code" boxSize={6} color="gray.600" />
             <Heading as="h5" variant="h5">
               Select Code ID
             </Heading>
diff --git a/src/lib/components/select-code/CodeSelectSection.tsx b/src/lib/components/select-code/CodeSelectSection.tsx
index 52ab383bb..2a45a2a91 100644
--- a/src/lib/components/select-code/CodeSelectSection.tsx
+++ b/src/lib/components/select-code/CodeSelectSection.tsx
@@ -56,8 +56,8 @@ export const CodeSelectSection = <T extends FieldValues>({
       <form style={{ width: "100%" }}>
         {method === "select-existing" ? (
           <CodeSelect
-            mt="16px"
-            mb="32px"
+            mt={4}
+            mb={8}
             onCodeSelect={onCodeSelect}
             codeId={codeId}
             status={status}
@@ -72,7 +72,7 @@ export const CodeSelectSection = <T extends FieldValues>({
             label="Code ID"
             helperText="Input existing Code ID manually"
             variant="floating"
-            my="32px"
+            my={8}
             rules={{ required: "Code ID is required" }}
           />
         )}
diff --git a/src/lib/components/select-contract/ContractListCard.tsx b/src/lib/components/select-contract/ContractListCard.tsx
index a460a0300..a84547001 100644
--- a/src/lib/components/select-contract/ContractListCard.tsx
+++ b/src/lib/components/select-contract/ContractListCard.tsx
@@ -67,7 +67,7 @@ export const ContractListCard = ({
       {!isReadOnly && (
         <Menu>
           <MenuButton
-            m="0"
+            m={0}
             h="full"
             variant="ghost-gray"
             as={Button}
diff --git a/src/lib/components/select-contract/SelectContractAdmin.tsx b/src/lib/components/select-contract/SelectContractAdmin.tsx
index 24ae5320c..a92f01a74 100644
--- a/src/lib/components/select-contract/SelectContractAdmin.tsx
+++ b/src/lib/components/select-contract/SelectContractAdmin.tsx
@@ -59,8 +59,8 @@ export const SelectContractAdmin = ({
     <>
       <Button
         variant={notSelected ? "primary" : "outline-primary"}
-        py="6px"
-        px="16px"
+        py={1}
+        px={4}
         size="sm"
         onClick={() => {
           AmpTrack(AmpEvent.USE_CONTRACT_MODAL);
@@ -80,7 +80,7 @@ export const SelectContractAdmin = ({
           <DrawerHeader>
             <CustomIcon
               name="contract-address-solid"
-              boxSize="5"
+              boxSize={5}
               color="gray.600"
             />
             <Heading as="h5" variant="h5">
diff --git a/src/lib/components/select-contract/SelectContractInstantiator.tsx b/src/lib/components/select-contract/SelectContractInstantiator.tsx
index 4993b5e7b..f8c5a16f8 100644
--- a/src/lib/components/select-contract/SelectContractInstantiator.tsx
+++ b/src/lib/components/select-contract/SelectContractInstantiator.tsx
@@ -102,9 +102,9 @@ export const SelectContractInstantiator = ({
     <>
       <Button
         variant={notSelected ? "primary" : "outline-primary"}
-        py="6px"
+        py={1}
         size="sm"
-        px="16px"
+        px={4}
         onClick={() => {
           AmpTrack(AmpEvent.USE_CONTRACT_MODAL);
           onOpen();
@@ -123,7 +123,7 @@ export const SelectContractInstantiator = ({
               <DrawerHeader>
                 <CustomIcon
                   name="contract-address-solid"
-                  boxSize="5"
+                  boxSize={5}
                   color="gray.600"
                 />
                 <Heading as="h5" variant="h5">
@@ -132,11 +132,11 @@ export const SelectContractInstantiator = ({
               </DrawerHeader>
               <DrawerCloseButton />
 
-              <DrawerBody p="24px" overflowY="scroll">
+              <DrawerBody p={6} overflowY="scroll">
                 <Heading as="h6" variant="h6" mb={4}>
                   Fill contract address manually
                 </Heading>
-                <Flex gap="8px" alignItems="center">
+                <Flex gap={2} alignItems="center">
                   <Input
                     isInvalid={invalid !== ""}
                     value={searchContract}
@@ -168,7 +168,7 @@ export const SelectContractInstantiator = ({
                   {invalid}
                 </Text>
 
-                <Flex my="24px" gap="8px" alignItems="center">
+                <Flex my={6} gap={2} alignItems="center">
                   <Divider borderColor="gray.700" />
                   <Text variant="body1">OR</Text>
                   <Divider borderColor="gray.700" />
@@ -190,7 +190,7 @@ export const SelectContractInstantiator = ({
               <DrawerHeader>
                 <CustomIcon
                   name="chevron-left"
-                  boxSize="5"
+                  boxSize={5}
                   onClick={() => setListSlug("")}
                   cursor="pointer"
                   color="gray.600"
diff --git a/src/lib/components/state/DisconnectedState.tsx b/src/lib/components/state/DisconnectedState.tsx
index 3f9430fe0..c13e7bef8 100644
--- a/src/lib/components/state/DisconnectedState.tsx
+++ b/src/lib/components/state/DisconnectedState.tsx
@@ -13,11 +13,11 @@ export const DisconnectedState = ({
   text,
   helperText,
 }: DisconnectedStateProps) => (
-  <Flex direction="column" alignItems="center" gap="16px">
+  <Flex direction="column" alignItems="center" gap={4}>
     <StateImage imageVariant="disconnected" />
     <Flex align="center" justify="center">
       <ConnectWalletBtn />
-      <Text variant="body1" color="text.dark" ml="8px">
+      <Text variant="body1" color="text.dark" ml={2}>
         {text}
       </Text>
     </Flex>
@@ -26,7 +26,7 @@ export const DisconnectedState = ({
         variant="body1"
         color="text.dark"
         textAlign="center"
-        mt="16px"
+        mt={4}
         maxW="520px"
         alignSelf="center"
       >
diff --git a/src/lib/components/state/EmptyState.tsx b/src/lib/components/state/EmptyState.tsx
index 349d9eb54..db33a5bac 100644
--- a/src/lib/components/state/EmptyState.tsx
+++ b/src/lib/components/state/EmptyState.tsx
@@ -24,7 +24,7 @@ export const EmptyState = ({
     borderY={withBorder ? "1px solid" : undefined}
     borderColor="gray.700"
   >
-    <Flex alignItems="center" flexDir="column" gap="4" width="full">
+    <Flex alignItems="center" flexDir="column" gap={4} width="full">
       {imageVariant && <StateImage imageVariant={imageVariant} />}
       {heading && (
         <Heading as="h5" variant="h5">
diff --git a/src/lib/components/state/InvalidState.tsx b/src/lib/components/state/InvalidState.tsx
index 3e5e5f88c..f0fd84ee0 100644
--- a/src/lib/components/state/InvalidState.tsx
+++ b/src/lib/components/state/InvalidState.tsx
@@ -23,11 +23,11 @@ export const InvalidState = ({ title }: InvalidStateProps) => {
       borderY="1px solid"
       borderColor="gray.700"
       width="full"
-      my="24px"
-      py="24px"
+      my={6}
+      py={6}
     >
       <StateImage imageVariant="not-found" />
-      <Heading as="h5" variant="h5" my="8px">
+      <Heading as="h5" variant="h5" my={2}>
         {title}
       </Heading>
       <Text variant="body2" color="text.dark" textAlign="center">
diff --git a/src/lib/components/state/ZeroState.tsx b/src/lib/components/state/ZeroState.tsx
index 32c8b65c1..16c5e6e74 100644
--- a/src/lib/components/state/ZeroState.tsx
+++ b/src/lib/components/state/ZeroState.tsx
@@ -22,13 +22,13 @@ interface ActionSectionProps {
 const ActionSection = ({ list, handleAction }: ActionSectionProps) =>
   list.value === formatSlugName(INSTANTIATED_LIST_NAME) ? (
     <Button
-      leftIcon={<CustomIcon name="add-new" boxSize="4" />}
+      leftIcon={<CustomIcon name="add-new" boxSize={4} />}
       onClick={handleAction}
     >
       Deploy New Contract
     </Button>
   ) : (
-    <Flex alignItems="center" gap="4" color="text.dark" direction="column">
+    <Flex alignItems="center" gap={4} color="text.dark" direction="column">
       <Flex align="center">
         Save existing contracts to the list with
         <SaveNewContractModal
@@ -69,11 +69,11 @@ export const ZeroState = ({ list, isReadOnly }: ZeroStateProps) => {
       borderY="1px solid"
       borderColor="gray.700"
       width="full"
-      py="48px"
+      py={12}
       direction="column"
       alignContent="center"
     >
-      <Flex alignItems="center" flexDir="column" gap="4">
+      <Flex alignItems="center" flexDir="column" gap={4}>
         <StateImage imageVariant="empty" />
         <Text color="text.dark">{renderText(list.value)}</Text>
         {!isReadOnly && (
diff --git a/src/lib/components/stepper/StepperItem.tsx b/src/lib/components/stepper/StepperItem.tsx
index 5d1f4fb26..e6ab67010 100644
--- a/src/lib/components/stepper/StepperItem.tsx
+++ b/src/lib/components/stepper/StepperItem.tsx
@@ -27,7 +27,7 @@ const StepLabel = ({
     borderRadius="50%"
   >
     {currentStep > step ? (
-      <CustomIcon name="check" color="text.main" boxSize="3" />
+      <CustomIcon name="check" color="text.main" boxSize={3} />
     ) : (
       <Text variant="body3">{step}</Text>
     )}
diff --git a/src/lib/components/table/EditableCell.tsx b/src/lib/components/table/EditableCell.tsx
index f3ac57eb6..bd8d6a0c3 100644
--- a/src/lib/components/table/EditableCell.tsx
+++ b/src/lib/components/table/EditableCell.tsx
@@ -204,7 +204,7 @@ export const EditableCell = ({
                 opacity={isHover ? 1 : 0}
                 onClick={handleEdit}
               >
-                <CustomIcon name="edit" color="gray.600" boxSize="3" />
+                <CustomIcon name="edit" color="gray.600" boxSize={3} />
               </Flex>
             )}
           </Flex>
diff --git a/src/lib/components/table/codes/CodesTableWithWallet.tsx b/src/lib/components/table/codes/CodesTableWithWallet.tsx
index b05097bd3..13fe5b532 100644
--- a/src/lib/components/table/codes/CodesTableWithWallet.tsx
+++ b/src/lib/components/table/codes/CodesTableWithWallet.tsx
@@ -25,12 +25,7 @@ export const CodesTableWithWallet = ({
 }: CodesTableWithWalletProps) => {
   const { address } = useWallet();
   return !address ? (
-    <Flex
-      direction="column"
-      py="48px"
-      borderY="1px solid"
-      borderColor="gray.700"
-    >
+    <Flex direction="column" py={12} borderY="1px solid" borderColor="gray.700">
       <DisconnectedState text={disconnectedMessage} />
     </Flex>
   ) : (
diff --git a/src/lib/components/table/contracts/EditTags.tsx b/src/lib/components/table/contracts/EditTags.tsx
index 5c3812d5e..2780d9241 100644
--- a/src/lib/components/table/contracts/EditTags.tsx
+++ b/src/lib/components/table/contracts/EditTags.tsx
@@ -31,11 +31,11 @@ export function EditTags({ contractLocalInfo }: EditTagsProps) {
     <ActionModal
       title="Edit Tags"
       trigger={
-        <CustomIcon cursor="pointer" name="edit" color="gray.600" boxSize="3" />
+        <CustomIcon cursor="pointer" name="edit" color="gray.600" boxSize={3} />
       }
       headerContent={
-        <Flex pt="6" gap="36px">
-          <Flex direction="column" gap="8px">
+        <Flex pt={6} gap={9}>
+          <Flex direction="column" gap={2}>
             <Text variant="body2" fontWeight={500} color="text.dark">
               Contract Name
             </Text>
@@ -44,7 +44,7 @@ export function EditTags({ contractLocalInfo }: EditTagsProps) {
             </Text>
           </Flex>
 
-          <Flex direction="column" gap="8px">
+          <Flex direction="column" gap={2}>
             <Text variant="body2">
               {contractLocalInfo.name ?? contractLocalInfo.label}
             </Text>
@@ -60,7 +60,7 @@ export function EditTags({ contractLocalInfo }: EditTagsProps) {
       otherBtnTitle="Cancel"
     >
       <FormControl>
-        <Box my="24px">
+        <Box my={6}>
           <TagSelection
             result={tagResult}
             placeholder="Tags"
diff --git a/src/lib/components/table/proposals/StatusChip.tsx b/src/lib/components/table/proposals/StatusChip.tsx
index c9a9082d9..4e4521396 100644
--- a/src/lib/components/table/proposals/StatusChip.tsx
+++ b/src/lib/components/table/proposals/StatusChip.tsx
@@ -35,7 +35,7 @@ export const StatusChip = ({
   return (
     <Tag bgColor={getBgColor(status)}>
       {formatStatus}
-      {hasCloseBtn && <CustomIcon name="close" boxSize="3" mr={0} />}
+      {hasCloseBtn && <CustomIcon name="close" boxSize={3} mr={0} />}
     </Tag>
   );
 };
diff --git a/src/lib/components/table/transactions/TransactionsTableRow.tsx b/src/lib/components/table/transactions/TransactionsTableRow.tsx
index fb68c42d8..fa3d714dd 100644
--- a/src/lib/components/table/transactions/TransactionsTableRow.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableRow.tsx
@@ -65,7 +65,7 @@ export const TransactionsTableRow = ({
               showCopyOnHover
             />
             {transaction.messages.length > 1 && (
-              <Badge variant="secondary" ml="6px">
+              <Badge variant="secondary" ml={2}>
                 {transaction.messages.length}
               </Badge>
             )}
diff --git a/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx b/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx
index 5ffb776ba..af2eb1f64 100644
--- a/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx
@@ -19,7 +19,7 @@ export const TransactionsTableWithWallet = ({
 }: TransactionsTableWithWalletProps) => {
   const { address } = useWallet();
   return !address ? (
-    <Flex direction="column" py="48px" borderColor="gray.700">
+    <Flex direction="column" py={12} borderColor="gray.700">
       <DisconnectedState
         text="to see your past transactions."
         helperText="Past transactions will display here."
diff --git a/src/lib/components/tx/modal/ButtonSection.tsx b/src/lib/components/tx/modal/ButtonSection.tsx
index b54ab9f61..5447154e5 100644
--- a/src/lib/components/tx/modal/ButtonSection.tsx
+++ b/src/lib/components/tx/modal/ButtonSection.tsx
@@ -68,7 +68,7 @@ export const ButtonSection = ({
             }}
           >
             Proceed to instantiate
-            <CustomIcon name="instantiate" boxSize="3" />
+            <CustomIcon name="instantiate" boxSize={3} />
           </Button>
         </>
       );
@@ -86,7 +86,7 @@ export const ButtonSection = ({
           }}
         >
           Proceed to Migrate
-          <CustomIcon name="migrate" boxSize="3" />
+          <CustomIcon name="migrate" boxSize={3} />
         </Button>
       );
     case "migrate":
@@ -103,7 +103,7 @@ export const ButtonSection = ({
             }
           >
             View Contract Details
-            <CustomIcon name="chevron-right" boxSize="3" />
+            <CustomIcon name="chevron-right" boxSize={3} />
           </Button>
         </>
       );
diff --git a/src/lib/components/tx/modal/index.tsx b/src/lib/components/tx/modal/index.tsx
index f193f9b48..87cd73c82 100644
--- a/src/lib/components/tx/modal/index.tsx
+++ b/src/lib/components/tx/modal/index.tsx
@@ -53,14 +53,14 @@ export const TxModal = ({ result, onClose }: TxModalProps) => {
         {(result.receiptInfo.description || result.receipts.length > 0) && (
           <ModalBody>
             {result.receiptInfo.description && (
-              <Text variant="body1" mb="16px">
+              <Text variant="body1" mb={4}>
                 {result.receiptInfo.description}
               </Text>
             )}
             <TxReceiptRender receipts={result.receipts} />
           </ModalBody>
         )}
-        <ModalFooter gap="8px">
+        <ModalFooter gap={2}>
           <ButtonSection
             actionVariant={result.actionVariant}
             onClose={onClose}
diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index 2d18e51a7..5c9c67dce 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -138,7 +138,7 @@ export const UploadSection = ({
         }}
         error={errors.codeDesc && getMaxCodeNameLengthError(codeDesc.length)}
         variant="floating"
-        my="32px"
+        my={8}
       />
       <Flex
         fontSize="14px"
@@ -146,12 +146,12 @@ export const UploadSection = ({
         alignSelf="flex-start"
         alignItems="center"
         display="flex"
-        gap="4px"
+        gap={1}
       >
         <p>Transaction Fee:</p>
         <EstimatedFeeRender estimatedFee={estimatedFee} loading={loading} />
       </Flex>
-      <Flex justify="space-between" w="100%" mt="32px">
+      <Flex justify="space-between" w="100%" mt={8}>
         <Button
           variant="outline-gray"
           w="128px"
diff --git a/src/lib/components/upload/components/UploadCard.tsx b/src/lib/components/upload/components/UploadCard.tsx
index 9ad41ccb4..f531beaf8 100644
--- a/src/lib/components/upload/components/UploadCard.tsx
+++ b/src/lib/components/upload/components/UploadCard.tsx
@@ -57,8 +57,8 @@ export const UploadCard = ({
     <>
       <Flex
         align="center"
-        p="16px"
-        gap="16px"
+        p={4}
+        gap={4}
         w="full"
         bgColor="gray.900"
         borderRadius="8px"
@@ -68,11 +68,11 @@ export const UploadCard = ({
         <UploadIcon />
         <Flex direction="column">
           <Text variant="body1">{file.name}</Text>
-          <Text variant="body2" color="text.dark" display="flex" gap="4px">
+          <Text variant="body2" color="text.dark" display="flex" gap={1}>
             {big(file.size).div(1000).toFixed(0)} KB • {statusText}
           </Text>
         </Flex>
-        <Flex align="center" gap="16px" ml="auto">
+        <Flex align="center" gap={4} ml="auto">
           <CustomIcon
             name="delete"
             color="text.dark"
diff --git a/src/lib/components/wallet/WalletConnect.tsx b/src/lib/components/wallet/WalletConnect.tsx
index 4833b8bcb..eddbb37d2 100644
--- a/src/lib/components/wallet/WalletConnect.tsx
+++ b/src/lib/components/wallet/WalletConnect.tsx
@@ -19,7 +19,7 @@ export const ConnectWalletButton = ({
     isDisabled={isDisabled}
     onClick={onClickConnectBtn}
     variant={variant}
-    gap="1"
+    gap={1}
   >
     <CustomIcon name="connect" />
     {buttonText || "Connect"}
diff --git a/src/lib/layout/Footer.tsx b/src/lib/layout/Footer.tsx
index 87fb7e024..d9cb039f2 100644
--- a/src/lib/layout/Footer.tsx
+++ b/src/lib/layout/Footer.tsx
@@ -52,8 +52,8 @@ const Footer = () => (
           rel="noopener noreferrer"
           onClick={() => AmpTrackCelatone(item.url)}
         >
-          <Button variant="ghost-gray" size="xs" px="1">
-            <CustomIcon name={item.icon} boxSize="5" color="gray.600" />
+          <Button variant="ghost-gray" size="xs" px={1}>
+            <CustomIcon name={item.icon} boxSize={5} color="gray.600" />
           </Button>
         </Link>
       ))}
diff --git a/src/lib/layout/Header.tsx b/src/lib/layout/Header.tsx
index 24a1c6b1b..4220fef1f 100644
--- a/src/lib/layout/Header.tsx
+++ b/src/lib/layout/Header.tsx
@@ -32,7 +32,7 @@ const Header = () => {
       justifyContent="space-between"
       px={6}
       mb={1}
-      gap="24px"
+      gap={6}
     >
       <AppLink href="/">
         <Image
@@ -41,19 +41,19 @@ const Header = () => {
           minWidth="152px"
           width="152px"
           maxWidth="152px"
-          mr="36px"
+          mr={8}
           transition="all 0.25s ease-in-out"
           _hover={{ cursor: "pointer", opacity: 0.85 }}
         />
       </AppLink>
       <Searchbar />
-      <Flex gap="16px">
+      <Flex gap={4}>
         <FaucetBtn />
         <Menu onOpen={() => AmpTrack(AmpEvent.USE_SELECT_NETWORK)}>
           <MenuButton
             pl={4}
             pr={2}
-            py="5px"
+            py={1}
             borderRadius="8px"
             borderWidth="1px"
             borderColor="gray.600"
@@ -102,7 +102,7 @@ const Header = () => {
                     </Text>
                   </Flex>
                   {chainName === currentChainName && (
-                    <CustomIcon name="check" boxSize="3" color="gray.600" />
+                    <CustomIcon name="check" boxSize={3} color="gray.600" />
                   )}
                 </Flex>
               </MenuItem>
diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx
index 43d322aff..2afea1589 100644
--- a/src/lib/layout/Searchbar.tsx
+++ b/src/lib/layout/Searchbar.tsx
@@ -61,13 +61,13 @@ const ResultItem = ({ type, value, handleSelectResult }: ResultItemProps) => {
 
   return (
     <ListItem p={2} borderBottomColor="gray.700" bg="gray.900">
-      <Text variant="body2" fontWeight={500} color="text.dark" p="8px">
+      <Text variant="body2" fontWeight={500} color="text.dark" p={2}>
         {text}
       </Text>
       {route && (
         <Text
           variant="body2"
-          p="8px"
+          p={2}
           borderRadius="8px"
           _hover={{ bg: "gray.800", cursor: "pointer" }}
           transition="all 0.25s ease-in-out"
diff --git a/src/lib/layout/index.tsx b/src/lib/layout/index.tsx
index 1dd66129d..6648990f6 100644
--- a/src/lib/layout/index.tsx
+++ b/src/lib/layout/index.tsx
@@ -50,7 +50,7 @@ const Layout = ({ children }: LayoutProps) => {
       overflowX="hidden"
       bg="background.main"
     >
-      <GridItem bg="gray.900" area="header" mb="1">
+      <GridItem bg="gray.900" area="header" mb={1}>
         <Header />
       </GridItem>
       <GridItem bg="gray.900" area="nav" overflowY="auto">
diff --git a/src/lib/layout/navbar/Expand.tsx b/src/lib/layout/navbar/Expand.tsx
index 8c70f6b55..d2009e2dc 100644
--- a/src/lib/layout/navbar/Expand.tsx
+++ b/src/lib/layout/navbar/Expand.tsx
@@ -15,8 +15,8 @@ export const ExpandNavMenu = ({
   <Box px={4} py={2} overflowY="auto">
     {navMenu.map((item) => (
       <Box
-        pb="4"
-        mb="4"
+        pb={4}
+        mb={4}
         key={item.category}
         borderBottom="1px solid"
         borderColor="gray.700"
@@ -29,7 +29,7 @@ export const ExpandNavMenu = ({
         }}
       >
         <Flex justifyContent="space-between" alignItems="center">
-          <Text py="2" variant="body3" fontWeight={700}>
+          <Text py={2} variant="body3" fontWeight={700}>
             {item.category}
           </Text>
           {item.category === "Overview" && (
@@ -37,7 +37,7 @@ export const ExpandNavMenu = ({
               variant="ghost-accent"
               size="xs"
               iconSpacing={1}
-              leftIcon={<CustomIcon name="double-chevron-left" boxSize="3" />}
+              leftIcon={<CustomIcon name="double-chevron-left" boxSize={3} />}
               onClick={() => setIsExpand(false)}
             >
               HIDE
@@ -49,7 +49,7 @@ export const ExpandNavMenu = ({
                 variant: "ghost-accent",
                 iconSpacing: 1,
                 size: "xs",
-                leftIcon: <CustomIcon name="plus" boxSize="3" />,
+                leftIcon: <CustomIcon name="plus" boxSize={3} />,
                 children: "NEW LIST",
                 onClick: () => AmpTrack(AmpEvent.USE_SIDEBAR),
               }}
@@ -63,7 +63,7 @@ export const ExpandNavMenu = ({
             onClick={() => AmpTrack(AmpEvent.USE_SIDEBAR)}
           >
             <Flex
-              gap="2"
+              gap={2}
               p={2}
               cursor="pointer"
               _hover={{ bg: "gray.700", borderRadius: "8px" }}
diff --git a/src/lib/pages/account-details/components/asset/index.tsx b/src/lib/pages/account-details/components/asset/index.tsx
index a56e2105b..d5db3fc4c 100644
--- a/src/lib/pages/account-details/components/asset/index.tsx
+++ b/src/lib/pages/account-details/components/asset/index.tsx
@@ -75,7 +75,7 @@ export const AssetsSection = ({
         />
       )}
       <Flex justify="space-between" width="full" align="center">
-        <Flex gap="50px">
+        <Flex gap={12}>
           <UserAssetInfoCard
             value={
               totalValue && supportedAssets ? formatPrice(totalValue) : "N/A"
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index efd0c8d7e..edc318364 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -124,12 +124,12 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
           flex="1"
         >
           <Flex alignItems="center" gap={1} minH="32px">
-            <CustomIcon name="website" ml="0" mb="6px" color="gray.600" />
+            <CustomIcon name="website" ml={0} mb={2} color="gray.600" />
             <Text variant="body2" fontWeight={500} color="text.dark">
               Public Account Description
             </Text>
           </Flex>
-          <Text variant="body2" color="text.main" mb="1">
+          <Text variant="body2" color="text.main" mb={1}>
             {publicInfo?.description}
           </Text>
         </Flex>
diff --git a/src/lib/pages/admin/index.tsx b/src/lib/pages/admin/index.tsx
index 386958a34..19e08244a 100644
--- a/src/lib/pages/admin/index.tsx
+++ b/src/lib/pages/admin/index.tsx
@@ -187,11 +187,11 @@ const UpdateAdmin = () => {
 
   return (
     <WasmPageContainer>
-      <Heading as="h5" variant="h5" mb="24px">
+      <Heading as="h5" variant="h5" mb={6}>
         Update Admin
       </Heading>
       <ConnectWalletAlert
-        mb="24px"
+        mb={6}
         subtitle="You need to connect your wallet to perform this action"
       />
       <ContractSelectSection
@@ -205,7 +205,7 @@ const UpdateAdmin = () => {
         helperText="This address will be an admin for the deployed smart contract."
         value={adminAddress}
         setInputState={setAdminAddress}
-        mt="48px"
+        mt={12}
         status={adminFormStatus}
       />
       <Flex
@@ -214,7 +214,7 @@ const UpdateAdmin = () => {
         alignItems="center"
         alignSelf="flex-start"
         gap={1}
-        mt="48px"
+        mt={12}
       >
         <p>Transaction Fee:</p>
         <EstimatedFeeRender estimatedFee={estimatedFee} loading={isFetching} />
@@ -226,11 +226,7 @@ const UpdateAdmin = () => {
           alignSelf="flex-start"
         />
       )}
-      <Button
-        disabled={!estimatedFee || isFetching}
-        onClick={proceed}
-        mt="48px"
-      >
+      <Button disabled={!estimatedFee || isFetching} onClick={proceed} mt={12}>
         Update Admin
       </Button>
     </WasmPageContainer>
diff --git a/src/lib/pages/block-details/components/BlockDetailsTop.tsx b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
index 7758e85f3..73642d3a9 100644
--- a/src/lib/pages/block-details/components/BlockDetailsTop.tsx
+++ b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
@@ -47,7 +47,7 @@ export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
     >
       <Flex direction="column" gap={1}>
         <Flex alignItems="center">
-          <CustomIcon name="block" boxSize="5" color="secondary.main" />
+          <CustomIcon name="block" boxSize={5} color="secondary.main" />
           <Heading as="h5" variant="h5" className="ellipsis">
             {blockData.height}
           </Heading>
diff --git a/src/lib/pages/block-details/components/BlockInfo.tsx b/src/lib/pages/block-details/components/BlockInfo.tsx
index 856040996..b4e9a496d 100644
--- a/src/lib/pages/block-details/components/BlockInfo.tsx
+++ b/src/lib/pages/block-details/components/BlockInfo.tsx
@@ -15,7 +15,7 @@ export const BlockInfo = ({ blockData }: BlockInfoProps) => {
       <Heading as="h6" variant="h6" mb={6}>
         Block Information
       </Heading>
-      <Flex gap="64px">
+      <Flex gap={16}>
         <LabelText label="Network">{blockData.network}</LabelText>
         <LabelText label="Gas (Used/Wanted)">
           {`${blockData.gasUsed ? formatInteger(blockData.gasUsed) : 0} / ${
diff --git a/src/lib/pages/blocks/components/BlocksRow.tsx b/src/lib/pages/blocks/components/BlocksRow.tsx
index 39a0ad498..704703fe0 100644
--- a/src/lib/pages/blocks/components/BlocksRow.tsx
+++ b/src/lib/pages/blocks/components/BlocksRow.tsx
@@ -36,7 +36,7 @@ export const BlocksRow = ({ templateColumns, blockData }: BlocksRowProps) => {
       </TableRow>
       <TableRow>
         <Flex direction="column">
-          <Text variant="body2" color="text.dark" mb="2px">
+          <Text variant="body2" color="text.dark">
             {formatUTC(blockData.timestamp)}
           </Text>
           <Text variant="body3" color="text.disabled">
diff --git a/src/lib/pages/code-details/components/table/NoContracts.tsx b/src/lib/pages/code-details/components/table/NoContracts.tsx
index dd7859935..2957eef97 100644
--- a/src/lib/pages/code-details/components/table/NoContracts.tsx
+++ b/src/lib/pages/code-details/components/table/NoContracts.tsx
@@ -8,8 +8,8 @@ const DisconnectedState = () => (
   <Flex
     direction="column"
     alignItems="center"
-    gap="16px"
-    py="48px"
+    gap={4}
+    py={12}
     borderY="1px solid"
     borderColor="gray.700"
   >
@@ -18,7 +18,7 @@ const DisconnectedState = () => (
       No contract instances from this code.
     </Text>
     <Flex align="center" alignItems="center">
-      <Text variant="body1" color="text.dark" mr="8px">
+      <Text variant="body1" color="text.dark" mr={2}>
         In order to instantiate contract from this code, you need to
       </Text>
       <ConnectWalletBtn />
diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index 7cfa9a131..9cf3b2c0f 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -111,9 +111,7 @@ const CodeDetailsBody = observer(
             title="Public Code Description"
             description={publicProject.publicCodeData.description}
             textLine={2}
-            icon={
-              <CustomIcon name="website" ml="0" mb="6px" color="gray.600" />
-            }
+            icon={<CustomIcon name="website" ml={0} mb={2} color="gray.600" />}
           />
         )}
         <Divider borderColor="gray.700" my={12} />
diff --git a/src/lib/pages/codes/components/MySavedCodesSection.tsx b/src/lib/pages/codes/components/MySavedCodesSection.tsx
index 52bb7e8d8..fdf4e898e 100644
--- a/src/lib/pages/codes/components/MySavedCodesSection.tsx
+++ b/src/lib/pages/codes/components/MySavedCodesSection.tsx
@@ -19,7 +19,7 @@ export const MySavedCodesSection = ({
   isSearching,
 }: MySavedCodesSectionProps) => (
   <Box mb={8}>
-    <HStack alignItems="center" justifyContent="space-between" mb="18px">
+    <HStack alignItems="center" justifyContent="space-between" mb={4}>
       <Heading as="h6" variant="h6">
         My Saved Codes
       </Heading>
diff --git a/src/lib/pages/codes/components/MyStoredCodesSection.tsx b/src/lib/pages/codes/components/MyStoredCodesSection.tsx
index 51c9ccf5c..868e520c4 100644
--- a/src/lib/pages/codes/components/MyStoredCodesSection.tsx
+++ b/src/lib/pages/codes/components/MyStoredCodesSection.tsx
@@ -21,7 +21,7 @@ export const MyStoredCodesSection = ({
   isSearching,
 }: MyStoredCodesSectionProps) => (
   <Box mb={8}>
-    <HStack alignItems="center" justifyContent="space-between" mb="18px">
+    <HStack alignItems="center" justifyContent="space-between" mb={4}>
       <Heading as="h6" variant="h6">
         My Stored Codes
       </Heading>
diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx
index 9a6d1c1d6..69d76c8b7 100644
--- a/src/lib/pages/codes/index.tsx
+++ b/src/lib/pages/codes/index.tsx
@@ -74,7 +74,7 @@ const Codes = observer(() => {
         My Codes
       </Heading>
       <Tabs mt={8}>
-        <TabList mb="32px" borderBottom="1px" borderColor="gray.800">
+        <TabList mb={8} borderBottom="1px" borderColor="gray.800">
           <CustomTab count={allCodesCount}>All Codes</CustomTab>
           <CustomTab count={storedCodesCount}>My Stored Codes</CustomTab>
           <CustomTab count={savedCodesCount}>My Saved Codes </CustomTab>
@@ -112,7 +112,7 @@ const Codes = observer(() => {
               isSearching={isSearching}
             />
           </TabPanel>
-          <TabPanel p="0px">
+          <TabPanel p={0}>
             <MyStoredCodesSection
               codes={stored}
               isLoading={isStoredCodesLoading}
@@ -121,7 +121,7 @@ const Codes = observer(() => {
               isSearching={isSearching}
             />
           </TabPanel>
-          <TabPanel p="0px">
+          <TabPanel p={0}>
             <MySavedCodesSection
               codes={saved}
               isLoading={isSavedCodesLoading}
diff --git a/src/lib/pages/contract-details/components/CommandSection.tsx b/src/lib/pages/contract-details/components/CommandSection.tsx
index ae1f0ee79..4e3816f5f 100644
--- a/src/lib/pages/contract-details/components/CommandSection.tsx
+++ b/src/lib/pages/contract-details/components/CommandSection.tsx
@@ -33,7 +33,7 @@ export const CommandSection = () => {
         <ButtonGroup
           width="90%"
           flexWrap="wrap"
-          rowGap="8px"
+          rowGap={2}
           sx={{
             "> button": {
               marginInlineStart: "0 !important",
diff --git a/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx b/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
index 9ee15990e..c8c899691 100644
--- a/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
+++ b/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
@@ -40,7 +40,7 @@ export const UserContractDesc = ({ contractData }: UserContractDescProps) => {
             size="xs"
             color="secondary.main"
             variant="ghost-secondary"
-            leftIcon={<CustomIcon name="edit" boxSize="3" />}
+            leftIcon={<CustomIcon name="edit" boxSize={3} />}
           >
             {description ? "Edit" : "Add Description"}
           </Button>
@@ -68,7 +68,7 @@ export const UserContractDesc = ({ contractData }: UserContractDescProps) => {
       role="group"
     >
       <Flex justify="space-between" align="center" h="32px">
-        <Text variant="body2" fontWeight={500} color="text.dark" mt="1px">
+        <Text variant="body2" fontWeight={500} color="text.dark">
           Your Contract Description
         </Text>
         <Box display="none" _groupHover={{ display: "flex" }}>
diff --git a/src/lib/pages/contract-details/components/contract-description/index.tsx b/src/lib/pages/contract-details/components/contract-description/index.tsx
index 29a096cd9..237477a99 100644
--- a/src/lib/pages/contract-details/components/contract-description/index.tsx
+++ b/src/lib/pages/contract-details/components/contract-description/index.tsx
@@ -16,7 +16,7 @@ export const ContractDesc = ({ contractData }: ContractDescProps) => (
         title="Public Contract Description"
         description={contractData.publicProject.publicInfo.description}
         textLine={contractData.contractLocalInfo?.description ? 4 : 2}
-        icon={<CustomIcon name="website" ml="0" mb="6px" color="gray.600" />}
+        icon={<CustomIcon name="website" ml={0} mb={2} color="gray.600" />}
       />
     )}
     <UserContractDesc contractData={contractData} />
diff --git a/src/lib/pages/contract-list/index.tsx b/src/lib/pages/contract-list/index.tsx
index 0cb6895f0..794b1e444 100644
--- a/src/lib/pages/contract-list/index.tsx
+++ b/src/lib/pages/contract-list/index.tsx
@@ -36,7 +36,7 @@ const AllContractListsPage = observer(() => {
           <CreateNewListModal
             buttonProps={{
               variant: "outline-primary",
-              leftIcon: <CustomIcon name="plus" boxSize="3" />,
+              leftIcon: <CustomIcon name="plus" boxSize={3} />,
               children: "Create new list",
             }}
           />
diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx
index a92a67a9a..553a00dfd 100644
--- a/src/lib/pages/contract-list/slug.tsx
+++ b/src/lib/pages/contract-list/slug.tsx
@@ -84,7 +84,7 @@ const ContractsByList = observer(() => {
         w="full"
         spacing="4px"
         separator={
-          <CustomIcon name="chevron-right" boxSize="3" color="gray.600" />
+          <CustomIcon name="chevron-right" boxSize={3} color="gray.600" />
         }
       >
         <BreadcrumbItem
@@ -134,7 +134,7 @@ const ContractsByList = observer(() => {
               }}
               buttonProps={{
                 variant: "outline-primary",
-                leftIcon: <CustomIcon name="bookmark" boxSize="3" />,
+                leftIcon: <CustomIcon name="bookmark" boxSize={3} />,
                 children: "Save Contract",
               }}
             />
diff --git a/src/lib/pages/deploy/index.tsx b/src/lib/pages/deploy/index.tsx
index 66e5a12fd..62bf176b8 100644
--- a/src/lib/pages/deploy/index.tsx
+++ b/src/lib/pages/deploy/index.tsx
@@ -78,7 +78,7 @@ const Deploy = () => {
         DEPLOY NEW CONTRACT
       </Text>
       <Stepper mode="deploy" currentStep={1} />
-      <Heading as="h5" variant="h5" my="48px">
+      <Heading as="h5" variant="h5" my={12}>
         Select Deploy Option
       </Heading>
       <ConnectWalletAlert
@@ -100,7 +100,7 @@ const Deploy = () => {
         }
         disabled={!enableUpload || !address}
         onClick={() => navigate({ pathname: "/upload" })}
-        mb="16px"
+        mb={4}
       />
       <ButtonCard
         title="Use existing Code IDs"
@@ -108,7 +108,7 @@ const Deploy = () => {
         onClick={() => navigate({ pathname: "/instantiate" })}
         disabled={!address}
       />
-      <Flex justify="center" w="100%" mt="32px">
+      <Flex justify="center" w="100%" mt={8}>
         <Button
           onClick={() => {
             router.back();
diff --git a/src/lib/pages/execute/components/ExecuteArea.tsx b/src/lib/pages/execute/components/ExecuteArea.tsx
index f94d7ed42..8e3a1031f 100644
--- a/src/lib/pages/execute/components/ExecuteArea.tsx
+++ b/src/lib/pages/execute/components/ExecuteArea.tsx
@@ -216,14 +216,14 @@ export const ExecuteArea = ({
   return (
     <Box my={4}>
       {contractAddress && (
-        <Text variant="body3" mb="8px">
+        <Text variant="body3" mb={4}>
           Message Suggestions:
         </Text>
       )}
       {cmds.length ? (
         <ButtonGroup
           flexWrap="wrap"
-          rowGap="8px"
+          rowGap={4}
           sx={{
             "> button": {
               marginInlineStart: "0 !important",
@@ -244,12 +244,12 @@ export const ExecuteArea = ({
         </ButtonGroup>
       ) : (
         contractAddress && (
-          <Text mt="8px" variant="body2" color="text.dark">
+          <Text mt={2} variant="body2" color="text.dark">
             No ExecuteMsgs suggestion available
           </Text>
         )
       )}
-      <Flex gap="32px" mt={8} direction={{ sm: "column", lg: "row" }}>
+      <Flex gap={8} mt={8} direction={{ sm: "column", lg: "row" }}>
         <Box w={{ sm: "full", lg: "50%" }}>
           <JsonInput topic="Execute Msg" text={msg} setText={setMsg} />
           {error && <ErrorMessageRender error={error} mb={4} />}
diff --git a/src/lib/pages/execute/index.tsx b/src/lib/pages/execute/index.tsx
index 503c16d2d..296304f56 100644
--- a/src/lib/pages/execute/index.tsx
+++ b/src/lib/pages/execute/index.tsx
@@ -95,11 +95,11 @@ const Execute = () => {
             variant="ghost-secondary"
             size="sm"
             p="unset"
-            pl="2"
+            pl={2}
             onClick={goToQuery}
           >
             Go To Query
-            <CustomIcon name="chevron-right" boxSize="3" />
+            <CustomIcon name="chevron-right" boxSize={3} />
           </Button>
         </Box>
       </Flex>
diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index e4aeaaa45..3c0491bc3 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -98,7 +98,7 @@ const Faucet = () => {
             <CustomIcon
               name="check-circle-solid"
               color="success.main"
-              boxSize="4"
+              boxSize={4}
               display="flex"
               alignItems="center"
             />
@@ -189,7 +189,7 @@ const Faucet = () => {
           <CustomIcon
             name={STATUS_ICONS[result.status]}
             color={`${result.status}.main`}
-            boxSize="6"
+            boxSize={6}
             display="flex"
             alignItems="center"
           />
diff --git a/src/lib/pages/home/components/QuickMenu.tsx b/src/lib/pages/home/components/QuickMenu.tsx
index b4e0a0fed..d00c14e9b 100644
--- a/src/lib/pages/home/components/QuickMenu.tsx
+++ b/src/lib/pages/home/components/QuickMenu.tsx
@@ -48,7 +48,7 @@ const secondaryMenu: SecondaryMenuType[] = [
 ];
 
 export const QuickMenu = () => (
-  <Flex direction="column" gap={4} bg="gray.900" p="48px">
+  <Flex direction="column" gap={4} bg="gray.900" p={12}>
     <Heading as="h5" variant="h5">
       Start using Celatone
     </Heading>
diff --git a/src/lib/pages/home/components/RecentActivities.tsx b/src/lib/pages/home/components/RecentActivities.tsx
index 9a82f9256..2ce585659 100644
--- a/src/lib/pages/home/components/RecentActivities.tsx
+++ b/src/lib/pages/home/components/RecentActivities.tsx
@@ -54,7 +54,7 @@ export const RecentActivities = observer(() => {
                   {item.type === "query" ? "Query" : "Execute"}
                 </Text>
               </Flex>
-              <Flex alignItems="center" gap="4px">
+              <Flex alignItems="center" gap={1}>
                 <Text
                   variant="body3"
                   padding="4px 8px"
diff --git a/src/lib/pages/home/index.tsx b/src/lib/pages/home/index.tsx
index eab7aa4bd..b49b6c40d 100644
--- a/src/lib/pages/home/index.tsx
+++ b/src/lib/pages/home/index.tsx
@@ -18,7 +18,7 @@ const Home = () => {
   }, [router.isReady]);
 
   return chainConfig.isWasm ? (
-    <Box mx="1">
+    <Box mx={1}>
       <QuickMenu />
       <RecentActivities />
     </Box>
diff --git a/src/lib/pages/instantiate/completed.tsx b/src/lib/pages/instantiate/completed.tsx
index 880c07d6f..2eedd0a29 100644
--- a/src/lib/pages/instantiate/completed.tsx
+++ b/src/lib/pages/instantiate/completed.tsx
@@ -20,7 +20,7 @@ const Completed = ({ txInfo }: CompletedProps) => {
   const txFee = txInfo.events.find((e) => e.type === "tx")?.attributes[0].value;
   return (
     <WasmPageContainer>
-      <CustomIcon name="check-circle-solid" color="success.main" boxSize="12" />
+      <CustomIcon name="check-circle-solid" color="success.main" boxSize={12} />
       <Heading as="h5" variant="h5" mt={3} mb={12}>
         Instantiate Complete!
       </Heading>
diff --git a/src/lib/pages/instantiate/component/FailedModal.tsx b/src/lib/pages/instantiate/component/FailedModal.tsx
index 91a4a23cd..ea1fedf3c 100644
--- a/src/lib/pages/instantiate/component/FailedModal.tsx
+++ b/src/lib/pages/instantiate/component/FailedModal.tsx
@@ -26,11 +26,11 @@ export const FailedModal = ({ errorLog, onClose }: FailedModalProps) => (
     <ModalOverlay />
     <ModalContent w="600px">
       <ModalHeader>
-        <Flex gap="12px" align="center">
+        <Flex gap={3} align="center">
           <CustomIcon
             name="alert-circle-solid"
             color="error.light"
-            boxSize="5"
+            boxSize={5}
           />
           <Heading as="h5" variant="h5">
             Failed to instantiate
@@ -40,12 +40,12 @@ export const FailedModal = ({ errorLog, onClose }: FailedModalProps) => (
       <ModalCloseButton />
       <ModalBody>
         Something went wrong. Here are the error logs.
-        <Box bg="background.main" borderRadius="8px" p="8px" mt="16px">
+        <Box bg="background.main" borderRadius="8px" p={2} mt={4}>
           <Text>{errorLog}</Text>
         </Box>
       </ModalBody>
 
-      <ModalFooter gap="8px">
+      <ModalFooter gap={2}>
         <CopyButton
           value={errorLog}
           size="md"
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index 238c5ea54..96e7f59ab 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -283,7 +283,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
           DEPLOY NEW CONTRACT
         </Text>
         <Stepper mode="deploy" currentStep={2} />
-        <Heading as="h5" variant="h5" my="48px">
+        <Heading as="h5" variant="h5" my={12}>
           Instantiate new contract
         </Heading>
         <ConnectWalletAlert
@@ -307,7 +307,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             label="Label"
             helperText="The contract's label help briefly describe the contract and what it does."
             variant="floating"
-            mb="32px"
+            mb={8}
             rules={{ required: "Label is required" }}
           />
           <ControllerInput
@@ -333,7 +333,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
               </Text>
             }
           />
-          <Heading variant="h6" as="h6" my="32px" alignSelf="flex-start">
+          <Heading variant="h6" as="h6" my={8} alignSelf="flex-start">
             Instantiate Message
           </Heading>
           <JsonInput
@@ -341,7 +341,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             setText={(newVal: string) => setValue("initMsg", newVal)}
             minLines={10}
           />
-          <Heading variant="h6" as="h6" my="32px" alignSelf="flex-start">
+          <Heading variant="h6" as="h6" my={8} alignSelf="flex-start">
             Send asset to contract
           </Heading>
           <AttachFund
diff --git a/src/lib/pages/migrate/components/MigrateContract.tsx b/src/lib/pages/migrate/components/MigrateContract.tsx
index ef7cf6ea3..9662fc63b 100644
--- a/src/lib/pages/migrate/components/MigrateContract.tsx
+++ b/src/lib/pages/migrate/components/MigrateContract.tsx
@@ -182,7 +182,7 @@ export const MigrateContract = ({
         <Flex gap={2} mb={4}>
           <CustomIcon
             name="alert-circle-solid"
-            boxSize="3"
+            boxSize={3}
             color="error.main"
           />
           <Text variant="body3" color="error.main">
@@ -196,7 +196,7 @@ export const MigrateContract = ({
         alignSelf="flex-start"
         alignItems="center"
         display="flex"
-        gap="4px"
+        gap={1}
       >
         <p>Transaction Fee:</p>
         <EstimatedFeeRender
@@ -204,7 +204,7 @@ export const MigrateContract = ({
           loading={isSimulating}
         />
       </Flex>
-      <Flex justify="space-between" w="100%" mt="32px">
+      <Flex justify="space-between" w="100%" mt={8}>
         <Button
           variant="outline-gray"
           w="128px"
diff --git a/src/lib/pages/migrate/components/MigrateOptions.tsx b/src/lib/pages/migrate/components/MigrateOptions.tsx
index deda2ab80..aa17a1c2d 100644
--- a/src/lib/pages/migrate/components/MigrateOptions.tsx
+++ b/src/lib/pages/migrate/components/MigrateOptions.tsx
@@ -14,7 +14,7 @@ export const MigrateOptions = ({
   existHandler,
 }: MigrateOptionsProps) => (
   <>
-    <Heading as="h5" variant="h5" mb="24px" textAlign="center">
+    <Heading as="h5" variant="h5" mb={6} textAlign="center">
       Migrate Options
     </Heading>
     <ButtonCard
@@ -22,7 +22,7 @@ export const MigrateOptions = ({
       title="Upload new WASM File"
       description="Deploy contract by uploading new Wasm file"
       onClick={uploadHandler}
-      mb="16px"
+      mb={4}
     />
     <ButtonCard
       disabled={!isAdmin}
diff --git a/src/lib/pages/migrate/components/UploadNewCode.tsx b/src/lib/pages/migrate/components/UploadNewCode.tsx
index ad080ae04..fd13b68bc 100644
--- a/src/lib/pages/migrate/components/UploadNewCode.tsx
+++ b/src/lib/pages/migrate/components/UploadNewCode.tsx
@@ -8,7 +8,7 @@ interface UploadNewCodeProps {
 
 export const UploadNewCode = ({ handleBack }: UploadNewCodeProps) => (
   <>
-    <Heading as="h6" variant="h6" mb="24px">
+    <Heading as="h6" variant="h6" mb={6}>
       Migrate to new code
     </Heading>
     <UploadSection handleBack={handleBack} isMigrate />
diff --git a/src/lib/pages/migrate/index.tsx b/src/lib/pages/migrate/index.tsx
index a72b8fff7..6ade71145 100644
--- a/src/lib/pages/migrate/index.tsx
+++ b/src/lib/pages/migrate/index.tsx
@@ -131,7 +131,7 @@ const Migrate = () => {
   return (
     <WasmPageContainer>
       {firstStep ? (
-        <Box w="full" mb="24px">
+        <Box w="full" mb={6}>
           <Text
             variant="body1"
             color="text.dark"
@@ -142,20 +142,20 @@ const Migrate = () => {
             MIGRATE CONTRACT
           </Text>
           <Stepper mode="migrate" currentStep={1} />
-          <Heading as="h5" variant="h5" textAlign="center" mt="48px">
+          <Heading as="h5" variant="h5" textAlign="center" mt={12}>
             Migrate Contract
           </Heading>
         </Box>
       ) : (
-        <Box w="full" mb="48px">
-          <Heading as="h5" variant="h5" textAlign="center" my="12px">
+        <Box w="full" mb={12}>
+          <Heading as="h5" variant="h5" textAlign="center" my={3}>
             Migrate Contract
           </Heading>
           <Stepper mode="migrate" currentStep={2} />
         </Box>
       )}
       <ConnectWalletAlert
-        mb="24px"
+        mb={6}
         subtitle="You need to connect your wallet to perform this action"
       />
       {/* Select Migrate Contract modal */}
@@ -164,7 +164,7 @@ const Migrate = () => {
         contractAddress={contractAddress}
         onContractSelect={onContractSelect}
       />
-      <Box mt="48px" w="full">
+      <Box mt={12} w="full">
         {renderBody()}
       </Box>
     </WasmPageContainer>
diff --git a/src/lib/pages/network-overview/index.tsx b/src/lib/pages/network-overview/index.tsx
index 3d13cc345..826e0b602 100644
--- a/src/lib/pages/network-overview/index.tsx
+++ b/src/lib/pages/network-overview/index.tsx
@@ -64,7 +64,7 @@ const CardInfo = ({
         </Text>
         <Tooltip label={tooltip}>
           <Flex cursor="pointer">
-            <CustomIcon name="info-circle-solid" boxSize="3" color="gray.600" />
+            <CustomIcon name="info-circle-solid" boxSize={3} color="gray.600" />
           </Flex>
         </Tooltip>
       </Flex>
@@ -134,7 +134,7 @@ const NetworkOverview = () => {
           </Text>
         )}
       </Flex>
-      <Flex gap={4} mb="64px">
+      <Flex gap={4} mb={16}>
         <CardInfo
           title={txInfo.title}
           tooltip={txInfo.tooltip}
@@ -159,7 +159,7 @@ const NetworkOverview = () => {
         {txsCount && txsCount > 5 && <ViewMore onClick={toTxs} />}
       </Box>
 
-      <Box mt="84px">
+      <Box mt={16}>
         <Heading as="h5" variant="h5" mb={5}>
           Recent Blocks
         </Heading>
diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx
index 44a34e56e..1050c0e83 100644
--- a/src/lib/pages/past-txs/index.tsx
+++ b/src/lib/pages/past-txs/index.tsx
@@ -144,7 +144,7 @@ const PastTxs = () => {
             placeholder="Search with transaction hash or contract address"
             h="full"
           />
-          <InputRightElement pointerEvents="none" h="full" mr="1">
+          <InputRightElement pointerEvents="none" h="full" mr={1}>
             <CustomIcon name="search" color="gray.600" />
           </InputRightElement>
         </InputGroup>
diff --git a/src/lib/pages/proposal/components/Footer.tsx b/src/lib/pages/proposal/components/Footer.tsx
index e0b9cab42..bd8e44f9f 100644
--- a/src/lib/pages/proposal/components/Footer.tsx
+++ b/src/lib/pages/proposal/components/Footer.tsx
@@ -16,7 +16,7 @@ export const Footer = ({
   return (
     <Grid
       w="full"
-      px="48px"
+      px={12}
       bg="gray.900"
       h="70px"
       bottom="0"
diff --git a/src/lib/pages/proposal/utils/getAlert.tsx b/src/lib/pages/proposal/utils/getAlert.tsx
index 8556610fa..2fe212b52 100644
--- a/src/lib/pages/proposal/utils/getAlert.tsx
+++ b/src/lib/pages/proposal/utils/getAlert.tsx
@@ -28,7 +28,7 @@ export const getAlert = (
     return {
       variant: "error",
       description: `${minDepositAmount} ${denom} is required to enter the deposit period.`,
-      icon: <CustomIcon name="alert-circle" color="error.main" boxSize="4" />,
+      icon: <CustomIcon name="alert-circle" color="error.main" boxSize={4} />,
     };
   }
   if (enteredAmount.lt(minVotingDepositAmount)) {
@@ -38,7 +38,7 @@ export const getAlert = (
         big(minVotingDepositAmount).sub(enteredAmount),
         "NaN"
       )} more ${denom} is required to enter the voting period. If you proceed with this amount without further deposit after 7 days, The chain will remove your proposal with no fund return.`,
-      icon: <CustomIcon name="alert-circle" color="warning.main" boxSize="4" />,
+      icon: <CustomIcon name="alert-circle" color="warning.main" boxSize={4} />,
     };
   }
   if (enteredAmount.eq(minVotingDepositAmount)) {
@@ -46,7 +46,7 @@ export const getAlert = (
       variant: "accent",
       description:
         "The proposal will proceed to voting period immediately after created.",
-      icon: <CustomIcon name="info-circle" color="accent.main" boxSize="4" />,
+      icon: <CustomIcon name="info-circle" color="accent.main" boxSize={4} />,
     };
   }
   if (big(minVotingDepositAmount).lt(enteredAmount)) {
@@ -54,7 +54,7 @@ export const getAlert = (
       variant: "warning",
       description: `You’re depositing more than the minimum requirement, the proposal will proceed to voting immediately after creation. To prevent fund loss if not passing the quorum, deposit equal to the minimum requirement.
 `,
-      icon: <CustomIcon name="alert-circle" color="warning.main" boxSize="4" />,
+      icon: <CustomIcon name="alert-circle" color="warning.main" boxSize={4} />,
     };
   }
   return defaultAlertProps;
diff --git a/src/lib/pages/proposals/components/ProposalTextCell.tsx b/src/lib/pages/proposals/components/ProposalTextCell.tsx
index b70ae9bef..cea121fd6 100644
--- a/src/lib/pages/proposals/components/ProposalTextCell.tsx
+++ b/src/lib/pages/proposals/components/ProposalTextCell.tsx
@@ -1,7 +1,7 @@
 import { Text, Flex } from "@chakra-ui/react";
 import { useRef, useState } from "react";
 
-import { DotSeparator } from "lib/components/DotSeperator";
+import { DotSeparator } from "lib/components/DotSeparator";
 import { Expedited } from "lib/components/Expedited";
 
 interface ProposalTextCellProps {
diff --git a/src/lib/pages/proposals/components/ProposalTypeFilter.tsx b/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
index 65e9d8133..37d725355 100644
--- a/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
+++ b/src/lib/pages/proposals/components/ProposalTypeFilter.tsx
@@ -111,7 +111,7 @@ export const ProposalTypeFilter = forwardRef<
                   chipComponent={
                     <Tag>
                       {option}
-                      <CustomIcon name="close" boxSize="3" mr={0} />
+                      <CustomIcon name="close" boxSize={3} mr={0} />
                     </Tag>
                   }
                   onSelect={() => selectOption(option)}
diff --git a/src/lib/pages/public-project/components/AllProject.tsx b/src/lib/pages/public-project/components/AllProject.tsx
index 06516c4a0..20798e906 100644
--- a/src/lib/pages/public-project/components/AllProject.tsx
+++ b/src/lib/pages/public-project/components/AllProject.tsx
@@ -92,7 +92,7 @@ export const AllProject = observer(() => {
           ))}
         </SimpleGrid>
       )}
-      <Flex justifyContent="center" gap="2" w="100%" mt="64px">
+      <Flex justifyContent="center" gap={2} w="100%" mt={16}>
         <Text color="text.dark" variant="body2">
           Want your project here?
         </Text>
diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx
index 630c90ce8..09ef4f01b 100644
--- a/src/lib/pages/public-project/components/DetailHeader.tsx
+++ b/src/lib/pages/public-project/components/DetailHeader.tsx
@@ -26,7 +26,7 @@ export const DetailHeader = ({ details, slug }: DetailHeaderProps) => (
       w="full"
       spacing={1}
       separator={
-        <CustomIcon name="chevron-right" boxSize="3" color="gray.600" />
+        <CustomIcon name="chevron-right" boxSize={3} color="gray.600" />
       }
     >
       <BreadcrumbItem
diff --git a/src/lib/pages/public-project/components/PublicProjectCard.tsx b/src/lib/pages/public-project/components/PublicProjectCard.tsx
index c7a4590a5..23239b357 100644
--- a/src/lib/pages/public-project/components/PublicProjectCard.tsx
+++ b/src/lib/pages/public-project/components/PublicProjectCard.tsx
@@ -55,7 +55,7 @@ export const PublicProjectCard = observer(
               w="full"
               alignItems="flex-start"
             >
-              <Flex gap={2} pr="1">
+              <Flex gap={2} pr={1}>
                 <Image
                   src={item.logo}
                   borderRadius="full"
@@ -68,7 +68,7 @@ export const PublicProjectCard = observer(
                   fontWeight={700}
                   textOverflow="ellipsis"
                   overflow="hidden"
-                  mt="4px"
+                  mt={1}
                 >
                   {item.name}
                 </Text>
diff --git a/src/lib/pages/query/index.tsx b/src/lib/pages/query/index.tsx
index c84a93edb..ff880a2de 100644
--- a/src/lib/pages/query/index.tsx
+++ b/src/lib/pages/query/index.tsx
@@ -103,11 +103,11 @@ const Query = () => {
             variant="ghost-secondary"
             size="sm"
             p="unset"
-            pl="2"
+            pl={2}
             onClick={goToExecute}
           >
             Go To Execute
-            <CustomIcon name="chevron-right" boxSize="3" />
+            <CustomIcon name="chevron-right" boxSize={3} />
           </Button>
         </Box>
       </Flex>
diff --git a/src/lib/pages/recent-codes/index.tsx b/src/lib/pages/recent-codes/index.tsx
index 75e615f73..e3db87bfa 100644
--- a/src/lib/pages/recent-codes/index.tsx
+++ b/src/lib/pages/recent-codes/index.tsx
@@ -50,7 +50,7 @@ const RecentCodes = observer(() => {
 
   return (
     <PageContainer>
-      <Box pb="48px">
+      <Box pb={12}>
         <Heading
           variant="h5"
           as="h5"
diff --git a/src/lib/pages/tx-details/components/TxHeader.tsx b/src/lib/pages/tx-details/components/TxHeader.tsx
index f744d3660..1b996d520 100644
--- a/src/lib/pages/tx-details/components/TxHeader.tsx
+++ b/src/lib/pages/tx-details/components/TxHeader.tsx
@@ -13,7 +13,7 @@ interface TxHeaderProps extends FlexProps {
 }
 
 const DotSeparator = () => (
-  <Box bg="secondary.darker" borderRadius="50%" w="4px" h="4px" />
+  <Box bg="secondary.darker" borderRadius="50%" w={1} h={1} />
 );
 
 export const TxHeader = ({ txData, ...flexProps }: TxHeaderProps) => {
diff --git a/src/lib/pages/upload/index.tsx b/src/lib/pages/upload/index.tsx
index d98c669a3..fe9517389 100644
--- a/src/lib/pages/upload/index.tsx
+++ b/src/lib/pages/upload/index.tsx
@@ -21,12 +21,12 @@ const Upload = () => {
         DEPLOY NEW CONTRACT
       </Text>
       <Stepper mode="deploy" currentStep={1} />
-      <Heading as="h5" variant="h5" my="48px">
+      <Heading as="h5" variant="h5" my={12}>
         Upload Wasm file
       </Heading>
       <ConnectWalletAlert
         subtitle="You need to connect your wallet first"
-        mb="48px"
+        mb={12}
       />
       <UploadSection handleBack={() => router.back()} />
     </WasmPageContainer>

From 6037038aa1e5b0cbaa25485b9842693b3198c353 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 23 May 2023 15:00:54 +0700
Subject: [PATCH 142/354] fix: comment

---
 src/lib/data/constant.ts                             |  2 ++
 src/lib/pages/pools/components/PoolHeader.tsx        | 12 ++++--------
 src/lib/pages/pools/components/PoolLogo.tsx          |  4 ++--
 .../pools/components/pool-details/PoolAssets.tsx     |  4 ++--
 .../pools/components/pool-details/PoolRelatedTxs.tsx |  5 ++---
 .../components/pool-details/header/PoolInfo.tsx      |  5 ++---
 .../pools/components/pool-details/header/index.tsx   |  5 ++---
 .../tables/pool-assets/PoolAssetsTableRow.tsx        |  2 +-
 .../pool-details/tables/pool-assets/index.tsx        |  4 ++--
 .../pool-details/tables/pool-txs/PoolTxsMsg.tsx      | 10 ++--------
 .../pool-details/tables/pool-txs/PoolTxsTable.tsx    | 10 ++--------
 .../pool-details/tables/pool-txs/PoolTxsTableRow.tsx |  6 ++----
 .../pool-details/tables/pool-txs/index.tsx           |  5 ++---
 .../pool-txs/messages/components/PoolAssetCard.tsx   |  2 +-
 .../pool-txs/messages/components/PoolLogoLink.tsx    |  5 ++---
 .../pool-details/tables/pool-txs/messages/index.tsx  |  7 +++----
 .../pool-txs/messages/lockup/MsgLockTokensAction.tsx |  5 ++---
 .../pool-txs/messages/lockup/MsgLockTokensDetail.tsx |  5 ++---
 .../pool-txs/messages/lp/MsgExitPoolAction.tsx       |  5 ++---
 .../messages/lp/MsgExitSwapExternAmountOutAction.tsx |  5 ++---
 .../messages/lp/MsgExitSwapShareAmountInAction.tsx   |  5 ++---
 .../pool-txs/messages/lp/MsgJoinPoolAction.tsx       |  5 ++---
 .../messages/lp/MsgJoinSwapExternAmountInAction.tsx  |  5 ++---
 .../messages/lp/MsgJoinSwapShareAmountOutAction.tsx  |  5 ++---
 .../MsgLockAndSuperfluidDelegateAction.tsx           |  5 ++---
 .../MsgLockAndSuperfluidDelegateDetail.tsx           |  5 ++---
 .../pool-txs/messages/swap/components/PoolRoute.tsx  |  2 +-
 src/lib/pages/pools/data.ts                          | 11 ++++++-----
 src/lib/services/expression/txExpression.ts          |  1 -
 src/lib/services/poolService.ts                      |  4 ++--
 30 files changed, 62 insertions(+), 94 deletions(-)

diff --git a/src/lib/data/constant.ts b/src/lib/data/constant.ts
index 5c8ddeb56..c00f021c1 100644
--- a/src/lib/data/constant.ts
+++ b/src/lib/data/constant.ts
@@ -90,3 +90,5 @@ export const DEFAULT_TX_FILTERS = {
   isUpdateAdmin: false,
   isClearAdmin: false,
 };
+
+export const UPPERBOUND_COUNT = 10000;
diff --git a/src/lib/pages/pools/components/PoolHeader.tsx b/src/lib/pages/pools/components/PoolHeader.tsx
index 4f542fec4..b644ff1c4 100644
--- a/src/lib/pages/pools/components/PoolHeader.tsx
+++ b/src/lib/pages/pools/components/PoolHeader.tsx
@@ -1,19 +1,15 @@
 import { Flex, Heading, Text, Box, Image } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import { BALANCER_ICON, STABLESWAP_ICON, SUPERFLUID_ICON } from "../constant";
-import type { TokenWithValue } from "lib/types";
 import type { PoolDetail } from "lib/types/pool";
 import { getTokenLabel } from "lib/utils";
 
 import { PoolLogo } from "./PoolLogo";
 
-interface PoolHeaderProps {
-  poolId: PoolDetail<Big, TokenWithValue>["id"];
-  isSuperfluid: PoolDetail<Big, TokenWithValue>["isSuperfluid"];
-  poolType: PoolDetail<Big, TokenWithValue>["type"];
-  poolLiquidity: PoolDetail<Big, TokenWithValue>["poolLiquidity"];
-}
+type PoolHeaderProps = Pick<PoolDetail, "isSuperfluid" | "poolLiquidity"> & {
+  poolId: PoolDetail["id"];
+  poolType: PoolDetail["type"];
+};
 
 export const PoolHeader = ({
   poolId,
diff --git a/src/lib/pages/pools/components/PoolLogo.tsx b/src/lib/pages/pools/components/PoolLogo.tsx
index 9e46ed2de..7f8d34076 100644
--- a/src/lib/pages/pools/components/PoolLogo.tsx
+++ b/src/lib/pages/pools/components/PoolLogo.tsx
@@ -1,4 +1,4 @@
-import type { FlexProps, TextProps } from "@chakra-ui/react";
+import type { FlexProps, ImageProps, TextProps } from "@chakra-ui/react";
 import { Flex, Image, Text } from "@chakra-ui/react";
 
 import { getUndefinedTokenIcon } from "../utils";
@@ -6,7 +6,7 @@ import type { TokenWithValue } from "lib/types";
 
 interface PoolLogoProps {
   tokens: TokenWithValue[];
-  logoSize?: FlexProps["height"] | FlexProps["width"];
+  logoSize?: ImageProps["boxSize"];
   marginLeft?: number;
   minW?: FlexProps["minW"];
   textVariant?: TextProps["variant"];
diff --git a/src/lib/pages/pools/components/pool-details/PoolAssets.tsx b/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
index 316dd80fe..d99c6cfb3 100644
--- a/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
+++ b/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
@@ -4,13 +4,13 @@ import big from "big.js";
 import Link from "next/link";
 
 import { CustomIcon } from "lib/components/icon";
-import type { PoolDetail, TokenWithValue, USD } from "lib/types";
+import type { PoolDetail, USD } from "lib/types";
 import { formatPrice } from "lib/utils";
 
 import { PoolAssetsTable } from "./tables/pool-assets";
 
 interface PoolAssetsProps {
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
 }
 
 export const PoolAssets = ({ pool }: PoolAssetsProps) => {
diff --git a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
index 299b61e26..cfc315b5e 100644
--- a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
+++ b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
@@ -7,16 +7,15 @@ import {
   TabPanels,
   TabPanel,
 } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import { usePoolTxsCount } from "../../data";
 import { CustomTab } from "lib/components/CustomTab";
-import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { PoolDetail } from "lib/types";
 
 import { PoolRelatedTxsTable } from "./tables/pool-txs";
 
 interface PoolRelatedTxsProps {
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
 }
 
 export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
diff --git a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
index da416023d..5f7f63a91 100644
--- a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
@@ -1,16 +1,15 @@
 import { Flex, Text } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import { JsonModalButton } from "../JsonModalButton";
 import { useGetAddressType } from "lib/app-provider";
 import { CopyLink } from "lib/components/CopyLink";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { LabelText } from "lib/components/LabelText";
-import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { PoolDetail } from "lib/types";
 import { formatRatio } from "lib/utils";
 
 interface PoolInfoProps {
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
 }
 
 export const PoolInfo = ({ pool }: PoolInfoProps) => {
diff --git a/src/lib/pages/pools/components/pool-details/header/index.tsx b/src/lib/pages/pools/components/pool-details/header/index.tsx
index 88720ad46..05bbfed58 100644
--- a/src/lib/pages/pools/components/pool-details/header/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/index.tsx
@@ -1,18 +1,17 @@
 import { Button, Flex } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
-import type Big from "big.js";
 
 import { PoolHeader } from "../../PoolHeader";
 import { getPoolUrl } from "lib/app-fns/explorer";
 import { useLCDEndpoint } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { openNewTab } from "lib/hooks";
-import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { PoolDetail } from "lib/types";
 
 import { PoolInfo } from "./PoolInfo";
 
 interface PoolTopSectionProps {
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
 }
 
 export const PoolTopSection = ({ pool }: PoolTopSectionProps) => {
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
index ad965ded7..3ddb029bc 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
@@ -16,7 +16,7 @@ import {
 } from "lib/utils";
 
 interface PoolAssetsTableRowProps {
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   token: TokenWithValue;
   templateColumns: GridProps["templateColumns"];
   totalLiquidity: USD<Big>;
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-assets/index.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-assets/index.tsx
index 497ecd9fa..2ceda6217 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-assets/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-assets/index.tsx
@@ -1,13 +1,13 @@
 import type { Big } from "big.js";
 
 import { TableContainer } from "lib/components/table/tableComponents";
-import type { PoolDetail, TokenWithValue, USD } from "lib/types";
+import type { PoolDetail, USD } from "lib/types";
 
 import { PoolAssetsTableHeader } from "./PoolAssetsTableHeader";
 import { PoolAssetsTableRow } from "./PoolAssetsTableRow";
 
 interface PoolAssetsTableProps {
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   totalLiquidity: USD<Big>;
 }
 
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
index 2562c3271..79fe6da24 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -1,17 +1,11 @@
 import { Flex, Text, Grid, useDisclosure, Box, Badge } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { TableNoBorderRow } from "lib/components/table";
 import { Tooltip } from "lib/components/Tooltip";
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type {
-  Message,
-  PoolDetail,
-  TokenWithValue,
-  Transaction,
-} from "lib/types";
+import type { Message, PoolDetail, Transaction } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 import { PoolMsgAction, PoolMsgDetail } from "./messages";
@@ -21,7 +15,7 @@ interface PoolTxsMsgProps {
   msgIndex: number;
   message?: Message;
   otherMsgs: { [key: string]: number };
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   transaction: Transaction;
   assetInfos: AssetInfosOpt;
   templateColumns: string;
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
index e61028902..de47cda53 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
@@ -1,20 +1,14 @@
 import { TableContainer } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import { Loading } from "lib/components/Loading";
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type {
-  Option,
-  PoolDetail,
-  TokenWithValue,
-  Transaction,
-} from "lib/types";
+import type { Option, PoolDetail, Transaction } from "lib/types";
 
 import { PoolTxsTableHeader } from "./PoolTxsTableHeader";
 import { PoolTxsTableRow } from "./PoolTxsTableRow";
 
 interface PoolTxsTableProps {
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   transactions: Option<Transaction[]>;
   assetInfos: AssetInfosOpt;
   isLoading: boolean;
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx
index 3dd570cca..ca20ef54f 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx
@@ -1,13 +1,11 @@
-import type Big from "big.js";
-
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { PoolDetail, TokenWithValue, Transaction } from "lib/types";
+import type { PoolDetail, Transaction } from "lib/types";
 
 import { extractPoolMsgs } from "./messages/utils";
 import { PoolTxsMsg } from "./PoolTxsMsg";
 
 interface PoolTxsTableRowProps {
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   transaction: Transaction;
   assetInfos: AssetInfosOpt;
   templateColumns: string;
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/index.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/index.tsx
index 38ca9d470..30971a8b9 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/index.tsx
@@ -1,4 +1,3 @@
-import type Big from "big.js";
 import type { ChangeEvent } from "react";
 
 import { Pagination } from "lib/components/pagination";
@@ -6,12 +5,12 @@ import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
 import { useAssetInfos } from "lib/services/assetService";
 import { useTxsByPoolIdPagination } from "lib/services/txService";
-import type { PoolDetail, PoolTxFilter, TokenWithValue } from "lib/types";
+import type { PoolDetail, PoolTxFilter } from "lib/types";
 
 import { PoolTxsTable } from "./PoolTxsTable";
 
 interface PoolRelatedTxsTableProps {
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   countTxs: number;
   type: PoolTxFilter;
   scrollComponentId: string;
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
index f31e9326f..1b78e7742 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
@@ -92,7 +92,7 @@ export const PoolAssetCard = ({
                 fontWeight={400}
                 color="text.main"
               >
-                {token.symbol || getTokenLabel(token.denom)}
+                {token.symbol ?? getTokenLabel(token.denom)}
                 <Text as="span" fontWeight={400} color="honeydew.main">
                   {" "}
                   /
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx
index 8f2adbcf8..fcceedf78 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx
@@ -1,12 +1,11 @@
 import { Flex } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { PoolLogo } from "lib/pages/pools/components/PoolLogo";
-import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { PoolDetail } from "lib/types";
 
 interface PoolLogoLinkProps {
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
 }
 
 export const PoolLogoLink = ({ pool }: PoolLogoLinkProps) => (
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx
index d541e6088..84650d945 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx
@@ -1,8 +1,7 @@
 import { Text } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { Message, PoolDetail, TokenWithValue } from "lib/types";
+import type { Message, PoolDetail } from "lib/types";
 import { extractTxDetails } from "lib/utils";
 
 import { MsgLockTokensAction, MsgLockTokensDetail } from "./lockup";
@@ -37,7 +36,7 @@ export const PoolMsgAction = ({
   assetInfos,
 }: {
   msg: Message;
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   assetInfos: AssetInfosOpt;
 }) => {
   const { type, detail, log } = msg;
@@ -147,7 +146,7 @@ export const PoolMsgDetail = ({
   blockHeight: number;
   msgIndex: number;
   msg: Message;
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
 }) => {
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx
index 4db2401bb..bfeefd3c1 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx
@@ -1,16 +1,15 @@
 import { Flex } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import { PoolLogoLink } from "../components";
 import { getPoolDenom } from "../utils";
 import { MsgToken } from "lib/components/action-msg/MsgToken";
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { PoolDetail } from "lib/types";
 import type { MsgLockTokensDetails } from "lib/utils/tx/types";
 
 interface MsgLockTokensActionProps {
   msg: MsgLockTokensDetails;
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   assetInfos: AssetInfosOpt;
 }
 
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
index 133f3dc65..7f4637b91 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
@@ -1,5 +1,4 @@
 import { Box, Flex, Text } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import { PoolAssetCard } from "../components";
 import { getPoolDenom } from "../utils";
@@ -8,7 +7,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { Loading } from "lib/components/Loading";
 import type { AssetInfosOpt } from "lib/services/assetService";
 import { useTxData } from "lib/services/txService";
-import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { PoolDetail } from "lib/types";
 import type { MsgLockTokensDetails } from "lib/utils/tx/types";
 
 interface MsgLockTokensDetailProps {
@@ -16,7 +15,7 @@ interface MsgLockTokensDetailProps {
   blockHeight: number;
   msgIndex: number;
   msg: MsgLockTokensDetails;
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
 }
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx
index eedfccbdc..387d83dbe 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx
@@ -1,17 +1,16 @@
 import { Flex } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import { PoolLogoLink } from "../components";
 import { getPoolDenom } from "../utils";
 import { MsgToken } from "lib/components/action-msg/MsgToken";
 import { CustomIcon } from "lib/components/icon";
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { PoolDetail } from "lib/types";
 import type { MsgExitPoolDetails } from "lib/utils/tx/types";
 
 interface MsgExitPoolActionProps {
   msg: MsgExitPoolDetails;
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   assetInfos: AssetInfosOpt;
 }
 
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx
index 3eac223cc..06e6fd357 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx
@@ -1,17 +1,16 @@
 import { Flex } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import { PoolLogoLink } from "../components";
 import { getPoolDenom } from "../utils";
 import { MsgToken } from "lib/components/action-msg/MsgToken";
 import { CustomIcon } from "lib/components/icon";
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { PoolDetail } from "lib/types";
 import type { MsgExitSwapExternAmountOutDetails } from "lib/utils/tx/types";
 
 interface MsgExitSwapExternAmountOutActionProps {
   msg: MsgExitSwapExternAmountOutDetails;
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   assetInfos: AssetInfosOpt;
 }
 
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx
index e838814af..a6a20765f 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx
@@ -1,17 +1,16 @@
 import { Flex } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import { PoolLogoLink } from "../components";
 import { getPoolDenom } from "../utils";
 import { MsgToken } from "lib/components/action-msg/MsgToken";
 import { CustomIcon } from "lib/components/icon";
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { PoolDetail } from "lib/types";
 import type { MsgExitSwapShareAmountInDetails } from "lib/utils/tx/types";
 
 interface MsgExitSwapShareAmountInActionProps {
   msg: MsgExitSwapShareAmountInDetails;
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   assetInfos: AssetInfosOpt;
 }
 
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx
index 3800ceff5..908343389 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx
@@ -1,17 +1,16 @@
 import { Flex } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import { PoolLogoLink } from "../components";
 import { getPoolDenom } from "../utils";
 import { MsgToken } from "lib/components/action-msg/MsgToken";
 import { CustomIcon } from "lib/components/icon";
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { PoolDetail } from "lib/types";
 import type { MsgJoinPoolDetails } from "lib/utils/tx/types";
 
 interface MsgJoinPoolActionProps {
   msg: MsgJoinPoolDetails;
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   assetInfos: AssetInfosOpt;
 }
 
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx
index 0bd4ca61f..d35263107 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx
@@ -1,17 +1,16 @@
 import { Flex } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import { PoolLogoLink } from "../components";
 import { getPoolDenom } from "../utils";
 import { MsgToken } from "lib/components/action-msg/MsgToken";
 import { CustomIcon } from "lib/components/icon";
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { PoolDetail } from "lib/types";
 import type { MsgJoinSwapExternAmountInDetails } from "lib/utils/tx/types";
 
 interface MsgJoinSwapExternAmountInActionProps {
   msg: MsgJoinSwapExternAmountInDetails;
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   assetInfos: AssetInfosOpt;
 }
 
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx
index 67bd45b86..ae05c3592 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx
@@ -1,17 +1,16 @@
 import { Flex } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import { PoolLogoLink } from "../components";
 import { getPoolDenom } from "../utils";
 import { MsgToken } from "lib/components/action-msg/MsgToken";
 import { CustomIcon } from "lib/components/icon";
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { PoolDetail } from "lib/types";
 import type { MsgJoinSwapShareAmountOutDetails } from "lib/utils/tx/types";
 
 interface MsgJoinSwapShareAmountOutActionProps {
   msg: MsgJoinSwapShareAmountOutDetails;
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   assetInfos: AssetInfosOpt;
 }
 
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateAction.tsx
index 7902e2eb5..f456048e5 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateAction.tsx
@@ -1,16 +1,15 @@
 import { Flex } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import { PoolLogoLink } from "../components";
 import { getPoolDenom } from "../utils";
 import { MsgToken } from "lib/components/action-msg/MsgToken";
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { PoolDetail } from "lib/types";
 import type { MsgLockAndSuperfluidDelegateDetails } from "lib/utils/tx/types";
 
 interface MsgLockAndSuperfluidDelegateActionProps {
   msg: MsgLockAndSuperfluidDelegateDetails;
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   assetInfos: AssetInfosOpt;
 }
 
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
index 50f01c1c9..c1c7635c1 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
@@ -1,5 +1,4 @@
 import { Box, Flex, Text } from "@chakra-ui/react";
-import type Big from "big.js";
 
 import { PoolAssetCard } from "../components";
 import { getPoolDenom } from "../utils";
@@ -9,7 +8,7 @@ import { ValidatorBadge } from "lib/components/ValidatorBadge";
 import type { AssetInfosOpt } from "lib/services/assetService";
 import { useTxData } from "lib/services/txService";
 import { useValidator } from "lib/services/validatorService";
-import type { PoolDetail, TokenWithValue } from "lib/types";
+import type { PoolDetail } from "lib/types";
 import type { MsgLockAndSuperfluidDelegateDetails } from "lib/utils/tx/types";
 
 interface MsgLockAndSuperfluidDelegateDetailProps {
@@ -17,7 +16,7 @@ interface MsgLockAndSuperfluidDelegateDetailProps {
   blockHeight: number;
   msgIndex: number;
   msg: MsgLockAndSuperfluidDelegateDetails;
-  pool: PoolDetail<Big, TokenWithValue>;
+  pool: PoolDetail;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
 }
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
index c1f8d5cb0..41bb1b381 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
@@ -75,7 +75,7 @@ export const PoolRoute = ({ routes, assetInfos, isOpened }: PoolRouteProps) => {
                           : "text.main"
                       }
                     >
-                      {token.symbol || getTokenLabel(token.denom)}
+                      {token.symbol ?? getTokenLabel(token.denom)}
                       <Text as="span" fontWeight={400} color="honeydew.main">
                         {" "}
                         /
diff --git a/src/lib/pages/pools/data.ts b/src/lib/pages/pools/data.ts
index b99c6b7b5..eb7a30652 100644
--- a/src/lib/pages/pools/data.ts
+++ b/src/lib/pages/pools/data.ts
@@ -54,7 +54,7 @@ export const usePools = (
 
 export const usePool = (
   poolId: Option<number>
-): { pool: Option<PoolDetail<Big, TokenWithValue>>; isLoading: boolean } => {
+): { pool: Option<PoolDetail>; isLoading: boolean } => {
   const { assetInfos, isLoading: isLoadingAssetInfos } = useAssetInfos();
   const { data: pool, isLoading: isLoadingPoolInfo } = usePoolByPoolId(poolId);
 
@@ -83,7 +83,7 @@ export const usePool = (
       exitFee: pool.exitFee,
       futurePoolGovernor: pool.futurePoolGovernor,
       weight:
-        pool.weight?.map<PoolWeight<Big>>((weight) => {
+        pool.weight?.map<PoolWeight>((weight) => {
           const bigWeight = big(weight.weight);
           return {
             denom: weight.denom,
@@ -109,10 +109,11 @@ export const usePoolTxsCount = (
   const { data, isLoading } = useTxsCountByPoolId(poolId, type);
   if (isLoading) return { count: 0, countDisplay: "0", isLoading };
 
-  const showActualCount = data !== undefined && data <= 10000;
+  const upperboundCount = 10000;
+  const showActualCount = data !== undefined && data <= upperboundCount;
   return {
-    count: showActualCount ? data : 10000,
-    countDisplay: showActualCount ? data.toString() : "10000+",
+    count: showActualCount ? data : upperboundCount,
+    countDisplay: showActualCount ? data.toString() : `${upperboundCount}+`,
     isLoading: false,
   };
 };
diff --git a/src/lib/services/expression/txExpression.ts b/src/lib/services/expression/txExpression.ts
index 16bc5c24f..19b1155a6 100644
--- a/src/lib/services/expression/txExpression.ts
+++ b/src/lib/services/expression/txExpression.ts
@@ -83,7 +83,6 @@ export const usePoolTxExpression = (
   useMemo(
     () => ({
       pool_id: poolId ? { _eq: poolId } : {},
-      transaction: { is_ibc: { _eq: false } },
       ...(type !== "is_all" ? { [type]: { _eq: true } } : {}),
     }),
     [poolId, type]
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index 3bbeb81d5..6812ec559 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -184,14 +184,14 @@ export const usePoolAssetsbyPoolIds = (
         poolIds,
       })
       .then(({ pools }) =>
-        pools.reduce(
+        pools.reduce<Record<number, string[]>>(
           (prev, pool) => ({
             ...prev,
             [pool.id]: (pool.liquidity as Coin[]).map(
               (liquidity) => liquidity.denom
             ),
           }),
-          {} as Record<number, string[]>
+          {}
         )
       );
   }, [poolIds, indexerGraphClient]);

From 43809d6fba0f7807be213d993211d880bb521aad Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 23 May 2023 15:16:11 +0700
Subject: [PATCH 143/354] fix: comment

---
 src/lib/pages/pools/components/PoolHeader.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/pools/components/PoolHeader.tsx b/src/lib/pages/pools/components/PoolHeader.tsx
index b644ff1c4..90ba1efa3 100644
--- a/src/lib/pages/pools/components/PoolHeader.tsx
+++ b/src/lib/pages/pools/components/PoolHeader.tsx
@@ -6,10 +6,11 @@ import { getTokenLabel } from "lib/utils";
 
 import { PoolLogo } from "./PoolLogo";
 
-type PoolHeaderProps = Pick<PoolDetail, "isSuperfluid" | "poolLiquidity"> & {
+interface PoolHeaderProps
+  extends Pick<PoolDetail, "isSuperfluid" | "poolLiquidity"> {
   poolId: PoolDetail["id"];
   poolType: PoolDetail["type"];
-};
+}
 
 export const PoolHeader = ({
   poolId,

From b0009ac979da55da3be3fe44364c5ce654b74a66 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 23 May 2023 15:20:01 +0700
Subject: [PATCH 144/354] fix: add ibc tag

---
 .../pool-details/tables/pool-txs/PoolTxsMsg.tsx        |  2 +-
 .../tables/pool-txs/messages/PoolOtherMsgs.tsx         | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
index 79fe6da24..7de86e484 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -97,7 +97,7 @@ export const PoolTxsMsg = ({
           {message ? (
             <PoolMsgAction msg={message} pool={pool} assetInfos={assetInfos} />
           ) : (
-            <PoolOtherMsgs otherMsgs={otherMsgs} />
+            <PoolOtherMsgs otherMsgs={otherMsgs} isIbc={transaction.isIbc} />
           )}
         </TableNoBorderRow>
 
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
index bebbe8935..eb236c773 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
@@ -4,12 +4,13 @@ import { extractMsgType } from "lib/utils";
 
 interface PoolOtherMsgsProps {
   otherMsgs: { [key: string]: number };
+  isIbc: boolean;
 }
 
-export const PoolOtherMsgs = ({ otherMsgs }: PoolOtherMsgsProps) => {
+export const PoolOtherMsgs = ({ otherMsgs, isIbc }: PoolOtherMsgsProps) => {
   const typePaths = Object.keys(otherMsgs);
   return (
-    <Flex gap={2} flexWrap="wrap">
+    <Flex gap={2} flexWrap="wrap" alignItems="center">
       Total
       {typePaths.map((typePath, index) => {
         const type = extractMsgType(typePath);
@@ -23,6 +24,11 @@ export const PoolOtherMsgs = ({ otherMsgs }: PoolOtherMsgsProps) => {
           </Text>
         );
       })}
+      {isIbc && (
+        <Tag variant="honeydew-dark" size="sm">
+          IBC
+        </Tag>
+      )}
     </Flex>
   );
 };

From 69a59bd06691a6eac079fadae2d75379116feefc Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 23 May 2023 17:21:41 +0700
Subject: [PATCH 145/354] fix: comment

---
 src/lib/pages/pools/components/PoolLogo.tsx   | 94 ++++++++++---------
 .../tables/pool-txs/PoolTxsMsg.tsx            | 11 ++-
 .../tables/pool-txs/PoolTxsTable.tsx          | 10 +-
 .../messages/components/PoolAssetCard.tsx     |  2 +-
 .../messages/components/PoolLogoLink.tsx      |  1 -
 .../messages/lockup/MsgLockTokensDetail.tsx   |  2 +-
 .../messages/lp/components/PoolAssetsGrid.tsx | 10 +-
 .../messages/lp/components/PoolLPCard.tsx     |  2 +-
 .../MsgLockAndSuperfluidDelegateDetail.tsx    |  2 +-
 .../messages/swap/components/PoolSwap.tsx     |  6 +-
 .../tables/pool-txs/messages/utils.ts         | 11 ++-
 11 files changed, 80 insertions(+), 71 deletions(-)

diff --git a/src/lib/pages/pools/components/PoolLogo.tsx b/src/lib/pages/pools/components/PoolLogo.tsx
index 7f8d34076..b559f2d8b 100644
--- a/src/lib/pages/pools/components/PoolLogo.tsx
+++ b/src/lib/pages/pools/components/PoolLogo.tsx
@@ -4,6 +4,22 @@ import { Flex, Image, Text } from "@chakra-ui/react";
 import { getUndefinedTokenIcon } from "../utils";
 import type { TokenWithValue } from "lib/types";
 
+interface PoolAssetLogoProps {
+  token: TokenWithValue;
+  logoSize: ImageProps["boxSize"];
+  idx: number;
+}
+
+const PoolAssetLogo = ({ token, logoSize, idx }: PoolAssetLogoProps) => (
+  <Flex key={token.denom}>
+    <Image
+      boxSize={logoSize}
+      src={token.logo || getUndefinedTokenIcon(token.denom)}
+      zIndex={2 - idx}
+    />
+  </Flex>
+);
+
 interface PoolLogoProps {
   tokens: TokenWithValue[];
   logoSize?: ImageProps["boxSize"];
@@ -18,46 +34,38 @@ export const PoolLogo = ({
   marginLeft = -12,
   minW = 24,
   textVariant = "body2",
-}: PoolLogoProps) => {
-  const renderLogo = (token: TokenWithValue, i: number) => (
-    <Flex key={token.denom}>
-      <Image
-        boxSize={logoSize}
-        src={token.logo || getUndefinedTokenIcon(token.denom)}
-        zIndex={2 - i}
-      />
-    </Flex>
-  );
-
-  return (
-    <Flex
-      css={{
-        ">:not(:first-of-type)": {
-          marginLeft,
-        },
-      }}
-      minW={minW}
-      alignItems="center"
-      justifyContent="center"
-    >
-      {tokens.length > 3 ? (
-        <>
-          {tokens.slice(0, 2).map(renderLogo)}
-          <Flex
-            width={logoSize}
-            height={logoSize}
-            borderRadius="full"
-            backgroundColor="pebble.700"
-            alignItems="center"
-            justifyContent="center"
-            marginLeft="-12px"
-          >
-            <Text variant={textVariant}> +{tokens.length - 2}</Text>
-          </Flex>
-        </>
-      ) : (
-        tokens.map(renderLogo)
-      )}
-    </Flex>
-  );
-};
+}: PoolLogoProps) => (
+  <Flex
+    css={{
+      ">:not(:first-of-type)": {
+        marginLeft,
+      },
+    }}
+    minW={minW}
+    alignItems="center"
+    justifyContent="center"
+  >
+    {tokens.length > 3 ? (
+      <>
+        {tokens.slice(0, 2).map((token, idx) => (
+          <PoolAssetLogo token={token} logoSize={logoSize} idx={idx} />
+        ))}
+        <Flex
+          width={logoSize}
+          height={logoSize}
+          borderRadius="full"
+          backgroundColor="pebble.700"
+          alignItems="center"
+          justifyContent="center"
+          marginLeft="-12px"
+        >
+          <Text variant={textVariant}> +{tokens.length - 2}</Text>
+        </Flex>
+      </>
+    ) : (
+      tokens.map((token, idx) => (
+        <PoolAssetLogo token={token} logoSize={logoSize} idx={idx} />
+      ))
+    )}
+  </Flex>
+);
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
index 7de86e484..1c41da4be 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -5,7 +5,7 @@ import { CustomIcon } from "lib/components/icon";
 import { TableNoBorderRow } from "lib/components/table";
 import { Tooltip } from "lib/components/Tooltip";
 import type { AssetInfosOpt } from "lib/services/assetService";
-import type { Message, PoolDetail, Transaction } from "lib/types";
+import type { Message, Option, PoolDetail, Transaction } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 import { PoolMsgAction, PoolMsgDetail } from "./messages";
@@ -13,7 +13,7 @@ import { PoolOtherMsgs } from "./messages/PoolOtherMsgs";
 
 interface PoolTxsMsgProps {
   msgIndex: number;
-  message?: Message;
+  message: Option<Message>;
   otherMsgs: { [key: string]: number };
   pool: PoolDetail;
   transaction: Transaction;
@@ -36,6 +36,7 @@ export const PoolTxsMsg = ({
     .slice(0, 2)
     .concat("1fr")
     .join(" ");
+  const isFirstSubRow = msgIndex === 0;
 
   return (
     <Box
@@ -68,7 +69,7 @@ export const PoolTxsMsg = ({
           )}
         </TableNoBorderRow>
         <TableNoBorderRow>
-          {msgIndex === 0 && (
+          {isFirstSubRow && (
             <>
               <ExplorerLink
                 value={transaction.hash.toLocaleUpperCase()}
@@ -86,7 +87,7 @@ export const PoolTxsMsg = ({
           )}
         </TableNoBorderRow>
         <TableNoBorderRow>
-          {msgIndex === 0 &&
+          {isFirstSubRow &&
             (transaction.success ? (
               <CustomIcon name="check" color="success.main" />
             ) : (
@@ -110,7 +111,7 @@ export const PoolTxsMsg = ({
         </TableNoBorderRow>
 
         <TableNoBorderRow>
-          {msgIndex === 0 && (
+          {isFirstSubRow && (
             <Flex direction="column" gap={1}>
               <Text variant="body3">{formatUTC(transaction.created)}</Text>
               <Text variant="body3" color="text.dark">
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
index de47cda53..8fa2be046 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTable.tsx
@@ -7,6 +7,9 @@ import type { Option, PoolDetail, Transaction } from "lib/types";
 import { PoolTxsTableHeader } from "./PoolTxsTableHeader";
 import { PoolTxsTableRow } from "./PoolTxsTableRow";
 
+const TEMPLATE_COLUMNS =
+  "25px 180px 40px minmax(360px, 1fr) max(160px) max(220px)";
+
 interface PoolTxsTableProps {
   pool: PoolDetail;
   transactions: Option<Transaction[]>;
@@ -25,19 +28,16 @@ export const PoolTxsTable = ({
   if (isLoading) return <Loading />;
   if (!transactions?.length) return emptyState;
 
-  const templateColumns =
-    "25px 180px 40px minmax(360px, 1fr) max(160px) max(220px)";
-
   return (
     <TableContainer>
-      <PoolTxsTableHeader templateColumns={templateColumns} />
+      <PoolTxsTableHeader templateColumns={TEMPLATE_COLUMNS} />
       {transactions.map((transaction) => (
         <PoolTxsTableRow
           key={transaction.hash}
           pool={pool}
           transaction={transaction}
           assetInfos={assetInfos}
-          templateColumns={templateColumns}
+          templateColumns={TEMPLATE_COLUMNS}
         />
       ))}
     </TableContainer>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
index 1b78e7742..e2f04d780 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
@@ -51,7 +51,7 @@ export const PoolAssetCard = ({
           {description}
         </Text>
         <Text>
-          {assetText}
+          {assetText}{" "}
           <span style={{ fontWeight: 700 }}>
             {formatBalanceWithDenom({
               coin: poolAsset,
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx
index fcceedf78..f1bff98fa 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx
@@ -15,7 +15,6 @@ export const PoolLogoLink = ({ pool }: PoolLogoLinkProps) => (
       logoSize={5}
       marginLeft={-4}
       minW={0}
-      textVariant="small"
     />
     <ExplorerLink type="pool_id" value={pool.id.toString()} showCopyOnHover />
   </Flex>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
index 7f4637b91..a5db92991 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
@@ -83,7 +83,7 @@ export const MsgLockTokensDetail = ({
         <PoolAssetCard
           poolId={pool.id}
           description="Bonded to"
-          assetText="Bonded "
+          assetText="Bonded"
           poolAsset={poolAsset}
           poolAssetInfo={poolAssetInfo}
           isOpened={isOpened}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
index f6e957c2f..1770e411e 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
@@ -3,7 +3,7 @@ import type { Coin } from "@cosmjs/stargate";
 import big from "big.js";
 
 import { AssetCard } from "../../components";
-import { coinFromStr } from "../../utils";
+import { coinsFromStr } from "../../utils";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
 import type { AssetInfosOpt } from "lib/services/assetService";
@@ -35,17 +35,15 @@ export const PoolAssetsGrid = ({
     .find((event) => event.msg_index === msgIndex)
     ?.events?.find((event) => event.type === "coin_received");
 
-  let eventAssets = receivedEvent?.attributes
-    .at(1)
-    ?.value.split(",")
-    .map((asset) => coinFromStr(asset));
+  const assetAttr = receivedEvent?.attributes.at(1)?.value;
+  let eventAssets = assetAttr ? coinsFromStr(assetAttr) : undefined;
   if (msgSwapDenom) {
     const specifiedAsset = eventAssets?.find(
       (asset) => asset.denom === msgSwapDenom
     );
 
     const swapAttr = receivedEvent?.attributes.at(-1)?.value;
-    const swapAsset = swapAttr ? coinFromStr(swapAttr) : undefined;
+    const swapAsset = swapAttr ? coinsFromStr(swapAttr)[0] : undefined;
 
     eventAssets =
       specifiedAsset && swapAsset
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
index adf50dcea..a1252ea63 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
@@ -56,7 +56,7 @@ export const PoolLPCard = ({
       <PoolAssetCard
         poolId={Number(poolId)}
         description={isJoin ? "Provided to" : "Removed from"}
-        assetText={isJoin ? "Received " : "Burn "}
+        assetText={isJoin ? "Received" : "Burn"}
         poolAsset={{ amount: shareAmount, denom: poolDenom }}
         poolAssetInfo={assetInfos?.[poolDenom]}
         isOpened={isOpened}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
index c1c7635c1..fc61fb9e0 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
@@ -94,7 +94,7 @@ export const MsgLockAndSuperfluidDelegateDetail = ({
         <PoolAssetCard
           poolId={pool.id}
           description="Bonded to"
-          assetText="Bonded "
+          assetText="Bonded"
           poolAsset={poolAsset}
           poolAssetInfo={poolAssetInfo}
           isOpened={isOpened}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
index 694508590..9d9633578 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
@@ -1,7 +1,7 @@
 import { Grid, Text } from "@chakra-ui/react";
 
 import { AssetCard } from "../../components";
-import { coinFromStr } from "../../utils";
+import { coinsFromStr } from "../../utils";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
@@ -34,11 +34,11 @@ export const PoolSwap = ({
 
   // Get the token-in from the third attribute of the event e.g. 10000utoken
   const inAsset = swapEvent.attributes.at(3)?.value ?? "";
-  const { amount: inAmount, denom: inDenom } = coinFromStr(inAsset);
+  const { amount: inAmount, denom: inDenom } = coinsFromStr(inAsset)[0];
 
   // Get the token-out from the last attribute of the event e.g. 10000utoken
   const outAsset = swapEvent.attributes.at(-1)?.value ?? "";
-  const { amount: outAmount, denom: outDenom } = coinFromStr(outAsset);
+  const { amount: outAmount, denom: outDenom } = coinsFromStr(outAsset)[0];
 
   return (
     <Grid gap={4} alignItems="center" mb={6} templateColumns="1fr 24px 1fr">
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts
index 9e55b841a..e2e807b31 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts
@@ -1,14 +1,17 @@
 import type { Coin } from "@cosmjs/stargate";
+import { parseCoins } from "@cosmjs/stargate";
 
 import type { Message } from "lib/types";
 import { extractTxDetails } from "lib/utils";
 
 export const getPoolDenom = (poolId: string) => `gamm/pool/${poolId}`;
 
-export const coinFromStr = (str: string): Coin => {
-  const amount = str.match(/[0-9]+/g)?.[0] ?? "";
-  const denom = str.slice(amount.length);
-  return { amount, denom };
+export const coinsFromStr = (str: string): Coin[] => {
+  try {
+    return parseCoins(str);
+  } catch {
+    return [];
+  }
 };
 
 export const extractPoolMsgs = (msgs: Message[], poolId: number) => {

From 555bc5e1268a54a85969ffe1fc3ff72fd56545c8 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 24 May 2023 14:01:24 +0700
Subject: [PATCH 146/354] feat: amp pool list

---
 CHANGELOG.md                                  |  1 +
 .../components/supportedSection/PoolCard.tsx  |  6 +-
 .../components/supportedSection/index.tsx     | 26 +++--
 .../UnsupportedPoolCard.tsx                   | 17 +++-
 .../components/unsupportedSection/index.tsx   | 94 ++++++++++++-------
 src/lib/pages/pools/index.tsx                 | 20 +++-
 src/lib/services/amplitude.tsx                | 30 +++++-
 7 files changed, 145 insertions(+), 49 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c7d8136ad..51801c812 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#355](https://github.com/alleslabs/celatone-frontend/pull/355) Add Amp for Pool List page
 - [#294](https://github.com/alleslabs/celatone-frontend/pull/294) Add Pool related txs table
 - [#296](https://github.com/alleslabs/celatone-frontend/pull/296) Add pool header and pool assets section for pool details page
 - [#295](https://github.com/alleslabs/celatone-frontend/pull/295) Add expand/collapse all for unsupported pool list
diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index 27a6219f5..c1ecd46bd 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -9,6 +9,7 @@ import { getPoolUrl } from "lib/app-fns/explorer";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { Tooltip } from "lib/components/Tooltip";
+import { AmpTrackWebsite } from "lib/services/amplitude";
 import type { USD, Pool, Token, U } from "lib/types";
 import { formatPrice } from "lib/utils";
 
@@ -64,7 +65,10 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
         <Tooltip label="See in osmosis.zone">
           <Link
             href={`${getPoolUrl(currentChainName)}/${item.id}`}
-            onClick={(e) => e.stopPropagation()}
+            onClick={(e) => {
+              AmpTrackWebsite(`${getPoolUrl(currentChainName)}/${item.id}`);
+              e.stopPropagation();
+            }}
             target="_blank"
             rel="noopener noreferrer"
           >
diff --git a/src/lib/pages/pools/components/supportedSection/index.tsx b/src/lib/pages/pools/components/supportedSection/index.tsx
index c282df377..db24fc26f 100644
--- a/src/lib/pages/pools/components/supportedSection/index.tsx
+++ b/src/lib/pages/pools/components/supportedSection/index.tsx
@@ -24,6 +24,11 @@ import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { ToggleWithName } from "lib/components/ToggleWithName";
 import { Order_By } from "lib/gql/graphql";
+import {
+  AmpTrackUseSort,
+  AmpTrackUseToggle,
+  AmpTrackUseView,
+} from "lib/services/amplitude";
 import { useAssetInfos } from "lib/services/assetService";
 import { usePoolListCountQuery } from "lib/services/poolService";
 import type { PoolTypeFilter } from "lib/types";
@@ -123,7 +128,7 @@ export const SupportedSection = ({
   return (
     <>
       <Flex alignItems="center" mb={12}>
-        <Flex grow="2" gap={4}>
+        <Flex grow={2} gap={4}>
           <InputWithIcon
             placeholder="Search with Pool ID, Symbol or Token ID"
             value={keyword}
@@ -132,6 +137,7 @@ export const SupportedSection = ({
               setValue("keyword", e.target.value);
             }}
             size="lg"
+            action="supported-pool-list-search"
           />
           <FilterByPoolType
             initialSelected="All"
@@ -148,6 +154,7 @@ export const SupportedSection = ({
                 defaultChecked={isSuperfluidOnly}
                 onChange={(e) => {
                   setCurrentPage(1);
+                  AmpTrackUseToggle("isSuperfluidOnly", e.target.checked);
                   setValue("isSuperfluidOnly", e.target.checked);
                 }}
               />
@@ -172,15 +179,19 @@ export const SupportedSection = ({
           </Badge>
         </Flex>
         <Flex gap={4}>
-          <Flex gap="2" alignItems="center">
+          <Flex gap={2} alignItems="center">
             <Text variant="body2" color="text.dark">
               Sort Pool ID:
             </Text>
             <Button
               variant="outline-gray"
               size="sm"
-              pr="1"
-              onClick={() => setShowNewest(!showNewest)}
+              pr={1}
+              onClick={() => {
+                const newOrdering = !showNewest;
+                AmpTrackUseSort(newOrdering ? "Descending" : "Ascending");
+                setShowNewest(newOrdering);
+              }}
             >
               {showNewest ? "Newest First" : "Oldest First"}
               <CustomIcon
@@ -189,14 +200,17 @@ export const SupportedSection = ({
               />
             </Button>
           </Flex>
-          <Flex gap="2" alignItems="center">
+          <Flex gap={2} alignItems="center">
             <Text variant="body2" color="text.dark">
               View asset allocation in:
             </Text>
             <ToggleWithName
               selectedValue={toggle}
               options={OPTIONS}
-              selectOption={(value: string) => setToggle(value)}
+              selectOption={(value: string) => {
+                AmpTrackUseView(value);
+                setToggle(value);
+              }}
             />
           </Flex>
         </Flex>
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index f2322f026..255bce2fc 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -19,6 +19,7 @@ import { useInternalNavigate } from "lib/app-provider";
 import { Copier } from "lib/components/copy";
 import { CustomIcon } from "lib/components/icon";
 import { Tooltip } from "lib/components/Tooltip";
+import { AmpTrackWebsite } from "lib/services/amplitude";
 import type { Pool } from "lib/types";
 import { formatUTokenWithPrecision } from "lib/utils";
 
@@ -66,7 +67,12 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
                   <Tooltip label="See in osmosis.zone">
                     <Link
                       href={`${getPoolUrl(currentChainName)}/${item.id}`}
-                      onClick={(e) => e.stopPropagation()}
+                      onClick={(e) => {
+                        AmpTrackWebsite(
+                          `${getPoolUrl(currentChainName)}/${item.id}`
+                        );
+                        e.stopPropagation();
+                      }}
                       target="_blank"
                       rel="noopener noreferrer"
                     >
@@ -144,13 +150,16 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
                     View Pool Details
                   </Button>
                   <Button
-                    onClick={() =>
+                    onClick={() => {
+                      AmpTrackWebsite(
+                        `${getPoolUrl(currentChainName)}/${item.id}`
+                      );
                       window.open(
                         `${getPoolUrl(currentChainName)}/${item.id}`,
                         "_blank",
                         "noopener,noreferrer"
-                      )
-                    }
+                      );
+                    }}
                     size="sm"
                     variant="outline-primary"
                     rightIcon={
diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
index 20319a783..e44e935dd 100644
--- a/src/lib/pages/pools/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -22,6 +22,12 @@ import InputWithIcon from "lib/components/InputWithIcon";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { Order_By } from "lib/gql/graphql";
+import {
+  AmpTrackExpand,
+  AmpTrackExpandAll,
+  AmpTrackUseSort,
+  AmpTrackUseToggle,
+} from "lib/services/amplitude";
 import { usePoolListCountQuery } from "lib/services/poolService";
 import type { PoolTypeFilter } from "lib/types";
 
@@ -53,6 +59,27 @@ export const UnsupportedSection = ({
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
 
   const updateExpandedIndexes = (indexes: number[]) => {
+    if (indexes.length > expandedIndexes.length) {
+      const expandedId = indexes.find((idx) =>
+        expandedIndexes.every((expandedIdx) => expandedIdx !== idx)
+      );
+      if (expandedId)
+        AmpTrackExpand(
+          "expand",
+          { type: "unsupported_pool", id: expandedId },
+          "pool-list-page"
+        );
+    } else {
+      const collapsedId = expandedIndexes.find((expandedIdx) =>
+        indexes.every((idx) => idx !== expandedIdx)
+      );
+      if (collapsedId)
+        AmpTrackExpand(
+          "collapse",
+          { type: "unsupported_pool", id: collapsedId },
+          "pool-list-page"
+        );
+    }
     setExpandedIndexes(indexes);
   };
 
@@ -99,14 +126,16 @@ export const UnsupportedSection = ({
   return (
     <>
       <Flex alignItems="center" mb={12}>
-        <Flex grow="2" gap={4}>
+        <Flex grow={2} gap={4}>
           <InputWithIcon
             placeholder="Search with Pool ID or Token ID"
             value={keyword}
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-              setValue("keyword", e.target.value)
-            }
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              setCurrentPage(1);
+              setValue("keyword", e.target.value);
+            }}
             size="lg"
+            action="unsupported-pool-list-search"
           />
           <FilterByPoolType
             initialSelected="All"
@@ -120,9 +149,13 @@ export const UnsupportedSection = ({
               <Switch
                 size="md"
                 defaultChecked={isSuperfluidOnly}
-                onChange={(e) => setValue("isSuperfluidOnly", e.target.checked)}
+                onChange={(e) => {
+                  setCurrentPage(1);
+                  AmpTrackUseToggle("isSuperfluidOnly", e.target.checked);
+                  setValue("isSuperfluidOnly", e.target.checked);
+                }}
               />
-              <FormLabel mb="0" cursor="pointer">
+              <FormLabel mb={0} cursor="pointer">
                 <Text display="flex" gap={2} alignItems="center">
                   Show only
                   <Image boxSize={4} src={SUPERFLUID_ICON} />
@@ -143,41 +176,38 @@ export const UnsupportedSection = ({
           </Badge>
         </Flex>
         <Flex gap={4}>
-          <Flex gap="2" alignItems="center">
+          <Flex gap={2} alignItems="center">
             <Text variant="body2" color="text.dark">
               Sort Pool ID:
             </Text>
-            {showNewest ? (
-              <Button
-                variant="outline-gray"
-                size="sm"
-                pr="1"
-                onClick={() => setShowNewest(!showNewest)}
-              >
-                Newest First
-                <CustomIcon name="arrow-down" color="text.dark" />
-              </Button>
-            ) : (
-              <Button
-                variant="outline-gray"
-                size="sm"
-                pr="1"
-                onClick={() => setShowNewest(!showNewest)}
-              >
-                Oldest First
-                <CustomIcon name="arrow-up" color="text.dark" />
-              </Button>
-            )}
+            <Button
+              variant="outline-gray"
+              size="sm"
+              pr={1}
+              onClick={() => {
+                const isDesc = !showNewest;
+                AmpTrackUseSort(isDesc ? "Descending" : "Ascending");
+                setShowNewest(isDesc);
+              }}
+            >
+              {showNewest ? "Newest First" : "Oldest First"}
+              <CustomIcon
+                name={showNewest ? "arrow-down" : "arrow-up"}
+                color="text.dark"
+              />
+            </Button>
           </Flex>
-          <Flex gap="2" alignItems="center">
+          <Flex gap={2} alignItems="center">
             <Button
               variant="outline-gray"
               w="94px"
               size="sm"
               onClick={() =>
-                setExpandedIndexes((prev) =>
-                  prev.length ? [] : Array.from(Array(pageSize).keys())
-                )
+                setExpandedIndexes((prev) => {
+                  const isExpand = !prev.length;
+                  AmpTrackExpandAll(isExpand ? "expand" : "collapse");
+                  return isExpand ? Array.from(Array(pageSize).keys()) : [];
+                })
               }
             >
               {expandedIndexes.length ? "Collapse All" : "Expand All"}
diff --git a/src/lib/pages/pools/index.tsx b/src/lib/pages/pools/index.tsx
index ab311567e..1b67614d6 100644
--- a/src/lib/pages/pools/index.tsx
+++ b/src/lib/pages/pools/index.tsx
@@ -1,9 +1,11 @@
 import { Heading, Tabs, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import { CustomTab } from "lib/components/CustomTab";
 import { LoadingOverlay } from "lib/components/LoadingOverlay";
 import PageContainer from "lib/components/PageContainer";
+import { AmpEvent, AmpTrack, AmpTrackUseTab } from "lib/services/amplitude";
 import { usePoolListCountQuery } from "lib/services/poolService";
 
 import { SupportedSection } from "./components/supportedSection";
@@ -15,6 +17,7 @@ enum TabIndex {
 }
 
 export const PoolIndex = () => {
+  const router = useRouter();
   const [tabIndex, setTabIndex] = useState(TabIndex.Supported);
 
   const { data: supportedPoolCount, isLoading: isLoadingSupported } =
@@ -32,16 +35,25 @@ export const PoolIndex = () => {
       search: "",
     });
 
+  const handleTabChange = (tab: TabIndex) => {
+    AmpTrackUseTab(TabIndex[tab]);
+    setTabIndex(tab);
+  };
+
   const sectionHeaderId = "poolListTab";
 
+  useEffect(() => {
+    if (router.isReady) AmpTrack(AmpEvent.TO_POOL_LIST);
+  }, [router.isReady]);
+
   useEffect(() => {
     if (
       supportedPoolCount !== undefined &&
       unsupportedPoolCount !== undefined
     ) {
       if (supportedPoolCount === 0 && unsupportedPoolCount > 0)
-        setTabIndex(TabIndex.Unsupported);
-      else setTabIndex(TabIndex.Supported);
+        handleTabChange(TabIndex.Unsupported);
+      else handleTabChange(TabIndex.Supported);
     }
   }, [supportedPoolCount, unsupportedPoolCount]);
 
@@ -55,13 +67,13 @@ export const PoolIndex = () => {
         <TabList my={8} borderBottom="1px" borderColor="pebble.800">
           <CustomTab
             count={supportedPoolCount ?? 0}
-            onClick={() => setTabIndex(TabIndex.Supported)}
+            onClick={() => handleTabChange(TabIndex.Supported)}
           >
             Pools
           </CustomTab>
           <CustomTab
             count={unsupportedPoolCount ?? 0}
-            onClick={() => setTabIndex(TabIndex.Unsupported)}
+            onClick={() => handleTabChange(TabIndex.Unsupported)}
           >
             Pools with unsupported tokens
           </CustomTab>
diff --git a/src/lib/services/amplitude.tsx b/src/lib/services/amplitude.tsx
index 9c5bb0f27..44507861f 100644
--- a/src/lib/services/amplitude.tsx
+++ b/src/lib/services/amplitude.tsx
@@ -54,6 +54,7 @@ export enum AmpEvent {
   TO_TRANSACTION_DETAIL = "To Transaction Detail",
   TO_NOT_FOUND = "To 404 Not Found",
   TO_FAUCET = "To Faucet",
+  TO_POOL_LIST = "To Pool List",
   // ACTIONS
   ACTION_UPLOAD = "Act Upload",
   ACTION_INSTANTIATE = "Action Instantiate",
@@ -96,6 +97,7 @@ export enum AmpEvent {
   USE_UNSUPPORTED_ASSETS = "Use Unsupported Assets",
   USE_TX_MSG_EXPAND = "Use Transaction Message Expand",
   USE_EXPAND = "Use General Expand",
+  USE_EXPAND_ALL = "Use Expand All",
   USE_SEARCH_INPUT = "Use Search Input",
   USE_FILTER_MY_PROPOSALS = "Use Filter My Proposals",
   USE_FILTER_PROPOSALS_STATUS = "Use Filter Proposals Status",
@@ -103,6 +105,9 @@ export enum AmpEvent {
   USE_PAGINATION_PAGE_SIZE = "Use Pagination Page Size",
   USE_PAGINATION_NAVIGATION = "Use Pagination Navigation",
   USE_CREATE_NEW_PROPOSAL = "Use Create New Proposal",
+  USE_SORT = "Use Sort",
+  USE_VIEW = "Use View",
+  USE_TOGGLE = "Use Toggle",
   // TX
   TX_SUCCEED = "Tx Succeed",
   TX_FAILED = "Tx Failed",
@@ -139,9 +144,13 @@ type SpecialAmpEvent =
   | AmpEvent.USE_UNSUPPORTED_ASSETS
   | AmpEvent.USE_COPIER
   | AmpEvent.USE_EXPAND
+  | AmpEvent.USE_EXPAND_ALL
   | AmpEvent.USE_PAGINATION_NAVIGATION
   | AmpEvent.USE_FILTER_PROPOSALS_STATUS
-  | AmpEvent.USE_FILTER_PROPOSALS_TYPE;
+  | AmpEvent.USE_FILTER_PROPOSALS_TYPE
+  | AmpEvent.USE_SORT
+  | AmpEvent.USE_VIEW
+  | AmpEvent.USE_TOGGLE;
 
 export const AmpTrackInvalidState = (title: string) =>
   track(AmpEvent.INVALID_STATE, { title });
@@ -209,10 +218,18 @@ export const AmpTrackCopier = (section: Option<string>, type: string) =>
 
 export const AmpTrackExpand = (
   action: "expand" | "collapse",
-  component: "assets" | "json" | "permission_address" | "event_box",
+  component:
+    | "assets"
+    | "json"
+    | "permission_address"
+    | "event_box"
+    | { type: "unsupported_pool"; id: number },
   section: Option<string>
 ) => track(AmpEvent.USE_EXPAND, { action, component, section });
 
+export const AmpTrackExpandAll = (action: "expand" | "collapse") =>
+  track(AmpEvent.USE_EXPAND, { action });
+
 export const AmpTrackUseFilter = (
   ampEvent: AmpEvent,
   filters: string[],
@@ -229,3 +246,12 @@ export const AmpTrackPaginationNavigate = (
     pageSize,
     currentPage,
   });
+
+export const AmpTrackUseSort = (order: "Ascending" | "Descending") =>
+  track(AmpEvent.USE_SORT, { order });
+
+export const AmpTrackUseView = (view: string) =>
+  track(AmpEvent.USE_VIEW, { view });
+
+export const AmpTrackUseToggle = (name: string, isActive: boolean) =>
+  track(AmpEvent.USE_TOGGLE, { name, isActive });

From 92e9b3cd1d15f3814620daa63bfa26c1bfb3ef37 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 24 May 2023 14:29:56 +0700
Subject: [PATCH 147/354] fix: expand unsupporte

---
 .../UnsupportedPoolCard.tsx                   | 42 +++++++++++--------
 .../components/unsupportedSection/index.tsx   | 25 +----------
 2 files changed, 26 insertions(+), 41 deletions(-)

diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index 255bce2fc..23ba31e4a 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -19,7 +19,7 @@ import { useInternalNavigate } from "lib/app-provider";
 import { Copier } from "lib/components/copy";
 import { CustomIcon } from "lib/components/icon";
 import { Tooltip } from "lib/components/Tooltip";
-import { AmpTrackWebsite } from "lib/services/amplitude";
+import { AmpTrackExpand, AmpTrackWebsite } from "lib/services/amplitude";
 import type { Pool } from "lib/types";
 import { formatUTokenWithPrecision } from "lib/utils";
 
@@ -54,7 +54,18 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
     >
       {({ isExpanded }) => (
         <>
-          <AccordionButton>
+          <AccordionButton
+            onClick={() =>
+              AmpTrackExpand(
+                !isExpanded ? "expand" : "collapse",
+                {
+                  type: "unsupported_pool",
+                  id: item.id,
+                },
+                "pool-list-page"
+              )
+            }
+          >
             <Flex gap={4} flexDirection="column" p={4} w="full">
               <Flex alignItems="center" justifyContent="space-between">
                 <PoolHeader
@@ -84,21 +95,18 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
                       />
                     </Link>
                   </Tooltip>
-                  {isExpanded ? (
-                    <StyledIconButton
-                      variant="none"
-                      aria-label="external"
-                      _hover={{ backgroundColor: hoverBgColor }}
-                      icon={<CustomIcon name="chevron-up" />}
-                    />
-                  ) : (
-                    <StyledIconButton
-                      variant="none"
-                      aria-label="external"
-                      _hover={{ backgroundColor: hoverBgColor }}
-                      icon={<CustomIcon name="chevron-down" />}
-                    />
-                  )}
+                  <StyledIconButton
+                    variant="none"
+                    aria-label="external"
+                    _hover={{ backgroundColor: hoverBgColor }}
+                    icon={
+                      <CustomIcon
+                        name="chevron-down"
+                        transform={isExpanded ? "rotate(180deg)" : "rotate(0)"}
+                        transition="all .25s ease-in-out"
+                      />
+                    }
+                  />
                 </Flex>
               </Flex>
             </Flex>
diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
index e44e935dd..1043c594c 100644
--- a/src/lib/pages/pools/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -23,7 +23,6 @@ import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { Order_By } from "lib/gql/graphql";
 import {
-  AmpTrackExpand,
   AmpTrackExpandAll,
   AmpTrackUseSort,
   AmpTrackUseToggle,
@@ -58,30 +57,8 @@ export const UnsupportedSection = ({
 
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
 
-  const updateExpandedIndexes = (indexes: number[]) => {
-    if (indexes.length > expandedIndexes.length) {
-      const expandedId = indexes.find((idx) =>
-        expandedIndexes.every((expandedIdx) => expandedIdx !== idx)
-      );
-      if (expandedId)
-        AmpTrackExpand(
-          "expand",
-          { type: "unsupported_pool", id: expandedId },
-          "pool-list-page"
-        );
-    } else {
-      const collapsedId = expandedIndexes.find((expandedIdx) =>
-        indexes.every((idx) => idx !== expandedIdx)
-      );
-      if (collapsedId)
-        AmpTrackExpand(
-          "collapse",
-          { type: "unsupported_pool", id: collapsedId },
-          "pool-list-page"
-        );
-    }
+  const updateExpandedIndexes = (indexes: number[]) =>
     setExpandedIndexes(indexes);
-  };
 
   const {
     pagesQuantity,

From dcafd3001956597b964f121788f359d3b690b4b8 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 23 May 2023 17:42:50 +0700
Subject: [PATCH 148/354] fix: get the correct precision for staking assets

---
 src/lib/app-fns/tx/common/catchTxError.tsx    |  1 -
 src/lib/app-provider/hooks/index.ts           |  1 +
 .../app-provider/hooks/useChainRecordAsset.ts | 36 +++++++++++++++++++
 src/lib/app-provider/queries/simulateFee.ts   |  3 ++
 src/lib/pages/proposal/store-code/index.tsx   | 14 ++++----
 src/lib/pages/proposal/whitelist/index.tsx    |  5 ++-
 src/lib/services/proposalService.ts           | 23 ++++++++----
 src/lib/utils/formatter/currency.ts           | 16 ++++++++-
 src/lib/utils/tx/composeMsg.ts                | 22 ++++++++----
 9 files changed, 100 insertions(+), 21 deletions(-)
 create mode 100644 src/lib/app-provider/hooks/useChainRecordAsset.ts

diff --git a/src/lib/app-fns/tx/common/catchTxError.tsx b/src/lib/app-fns/tx/common/catchTxError.tsx
index b5b945a4a..675ba59c9 100644
--- a/src/lib/app-fns/tx/common/catchTxError.tsx
+++ b/src/lib/app-fns/tx/common/catchTxError.tsx
@@ -36,7 +36,6 @@ export const catchTxError = (
 ): OperatorFunction<TxResultRendering, TxResultRendering> => {
   return catchError((error: Error) => {
     const txHash = error.message.match("(?:tx )(.*?)(?= at)")?.at(1);
-
     AmpTrack(
       error.message === "Request rejected"
         ? AmpEvent.TX_REJECTED
diff --git a/src/lib/app-provider/hooks/index.ts b/src/lib/app-provider/hooks/index.ts
index 3d7901cdb..b3557c30d 100644
--- a/src/lib/app-provider/hooks/index.ts
+++ b/src/lib/app-provider/hooks/index.ts
@@ -13,3 +13,4 @@ export * from "./useSelectChain";
 export * from "./useSimulateFee";
 export * from "./useTokensInfo";
 export * from "./useCurrentNetwork";
+export * from "./useChainRecordAsset";
diff --git a/src/lib/app-provider/hooks/useChainRecordAsset.ts b/src/lib/app-provider/hooks/useChainRecordAsset.ts
new file mode 100644
index 000000000..e0cef36eb
--- /dev/null
+++ b/src/lib/app-provider/hooks/useChainRecordAsset.ts
@@ -0,0 +1,36 @@
+import type { Asset } from "@chain-registry/types";
+import { useWallet } from "@cosmos-kit/react";
+import { useCallback } from "react";
+
+import type { SnakeToCamelCaseNested } from "lib/types";
+import { snakeToCamel } from "lib/utils";
+
+interface ChainRecordAsset extends Asset {
+  precision: number;
+}
+
+type InternalChainRecordAsset = SnakeToCamelCaseNested<ChainRecordAsset>;
+
+export const useChainRecordAsset = () => {
+  const { currentChainRecord } = useWallet();
+
+  return useCallback(
+    (denom: string): InternalChainRecordAsset | null => {
+      const assetInfo = currentChainRecord?.assetList.assets.find(
+        (asset) => asset.base === denom
+      );
+      return assetInfo
+        ? (snakeToCamel({
+            ...assetInfo,
+            precision:
+              assetInfo?.denom_units.find(
+                (unit) =>
+                  unit.denom ===
+                  (denom[0] === "u" ? denom.slice(1) : "u".concat(denom))
+              )?.exponent ?? 0,
+          }) as InternalChainRecordAsset)
+        : null;
+    },
+    [currentChainRecord]
+  );
+};
diff --git a/src/lib/app-provider/queries/simulateFee.ts b/src/lib/app-provider/queries/simulateFee.ts
index 36047c767..3aef9d2d0 100644
--- a/src/lib/app-provider/queries/simulateFee.ts
+++ b/src/lib/app-provider/queries/simulateFee.ts
@@ -137,6 +137,7 @@ interface SimulateQueryParamsForProposalStoreCode {
   wasmFile: Option<File>;
   permission: AccessType;
   addresses: Addr[];
+  precision: Option<number>;
   onSuccess?: (gas: Gas<number> | undefined) => void;
   onError?: (err: Error) => void;
 }
@@ -154,6 +155,7 @@ export const useSimulateFeeForProposalStoreCode = ({
   wasmFile,
   permission,
   addresses,
+  precision,
   onSuccess,
   onError,
 }: SimulateQueryParamsForProposalStoreCode) => {
@@ -180,6 +182,7 @@ export const useSimulateFeeForProposalStoreCode = ({
         builder,
         codeHash: Uint8Array.from(Buffer.from(codeHash, "hex")),
         initialDeposit,
+        precision,
       });
     };
 
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index b4e405af1..2c42e4205 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -77,13 +77,13 @@ interface StoreCodeProposalState {
 }
 
 const defaultValues: StoreCodeProposalState = {
-  title: "",
-  proposalDesc: "",
-  runAs: "" as Addr,
-  initialDeposit: { denom: "", amount: "" } as Coin,
+  title: "123",
+  proposalDesc: "123123",
+  runAs: "osmo1acqpnvg2t4wmqfdv8hq47d3petfksjs5r9t45p" as Addr,
+  initialDeposit: { denom: "", amount: "1" } as Coin,
   unpinCode: false,
-  builder: "",
-  source: "",
+  builder: "cosmwasm/lorem",
+  source: "https://github.com",
   codeHash: "",
 };
 
@@ -251,6 +251,7 @@ const StoreCodeProposal = () => {
     wasmFile,
     permission,
     addresses: addresses.map((addr) => addr.address),
+    precision: minDeposit?.precision,
     onSuccess: (fee) => {
       if (wasmFile && walletAddress && fee) {
         setSimulateStatus({
@@ -291,6 +292,7 @@ const StoreCodeProposal = () => {
         builder,
         codeHash: Uint8Array.from(Buffer.from(codeHash, "hex")),
         initialDeposit,
+        precision: minDeposit?.precision,
       });
     };
 
diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index 9269b9718..8fd78c709 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -95,6 +95,7 @@ const ProposalToWhitelist = () => {
   });
   const { isTestnet } = useCurrentNetwork();
 
+  const minDeposit = govParams?.depositParams.minDeposit;
   const addressesArray = addresses.map((addressObj) => addressObj.address);
   const formErrorsKey = Object.keys(formErrors);
   const enabledTx = useMemo(
@@ -128,12 +129,14 @@ const ProposalToWhitelist = () => {
         }),
         initialDeposit,
         proposer: walletAddress as Addr,
+        precision: minDeposit?.precision,
       }),
     [
       addressesArray,
       description,
       govParams?.uploadAccess,
       initialDeposit,
+      minDeposit,
       title,
       walletAddress,
     ]
@@ -153,7 +156,7 @@ const ProposalToWhitelist = () => {
       setEstimatedFee(undefined);
     },
   });
-  const minDeposit = govParams?.depositParams.minDeposit;
+
   const {
     variant,
     description: alertDesc,
diff --git a/src/lib/services/proposalService.ts b/src/lib/services/proposalService.ts
index 5a8fec01d..6e3ce65cc 100644
--- a/src/lib/services/proposalService.ts
+++ b/src/lib/services/proposalService.ts
@@ -3,7 +3,11 @@ import { useQuery } from "@tanstack/react-query";
 import big from "big.js";
 import { useCallback } from "react";
 
-import { useCelatoneApp, useLCDEndpoint } from "lib/app-provider";
+import {
+  useCelatoneApp,
+  useChainRecordAsset,
+  useLCDEndpoint,
+} from "lib/app-provider";
 import {
   getProposalList,
   getProposalListCount,
@@ -26,7 +30,7 @@ import type {
   Token,
 } from "lib/types";
 import {
-  demicrofy,
+  deexponentify,
   formatBalanceWithDenom,
   getTokenLabel,
   parseDate,
@@ -281,6 +285,7 @@ export interface MinDeposit {
   formattedAmount: Token;
   formattedDenom: string;
   formattedToken: string;
+  precision: number;
 }
 
 interface DepositParamsReturn
@@ -297,6 +302,7 @@ export interface GovParams {
 
 export const useGovParams = (): UseQueryResult<GovParams> => {
   const lcdEndpoint = useLCDEndpoint();
+  const getAssetInfo = useChainRecordAsset();
   const queryFn = useCallback(
     () =>
       Promise.all([
@@ -305,11 +311,14 @@ export const useGovParams = (): UseQueryResult<GovParams> => {
         fetchGovVotingParams(lcdEndpoint),
       ]).then<GovParams>((params) => {
         const minDepositParam = params[0].minDeposit[0];
+        const assetInfo = getAssetInfo(minDepositParam.denom);
         const [minDepositAmount, minDepositDenom] = [
-          demicrofy(minDepositParam.amount as U<Token>).toFixed(),
+          deexponentify(
+            minDepositParam.amount as U<Token>,
+            assetInfo?.precision
+          ).toFixed(),
           getTokenLabel(minDepositParam.denom),
         ];
-
         return {
           depositParams: {
             ...params[0],
@@ -320,9 +329,10 @@ export const useGovParams = (): UseQueryResult<GovParams> => {
               formattedDenom: minDepositDenom,
               formattedToken: formatBalanceWithDenom({
                 coin: minDepositParam,
-                precision: 6,
+                precision: assetInfo?.precision,
                 decimalPoints: 2,
               }),
+              precision: assetInfo?.precision || 0,
             },
             minInitialDeposit: big(params[0].minInitialDepositRatio)
               .times(minDepositAmount)
@@ -332,11 +342,12 @@ export const useGovParams = (): UseQueryResult<GovParams> => {
           votingParams: params[2],
         };
       }),
-    [lcdEndpoint]
+    [lcdEndpoint, getAssetInfo]
   );
 
   return useQuery(["gov_params", lcdEndpoint], queryFn, {
     keepPreviousData: true,
+    refetchOnWindowFocus: false,
   });
 };
 
diff --git a/src/lib/utils/formatter/currency.ts b/src/lib/utils/formatter/currency.ts
index 996971493..bb4920764 100644
--- a/src/lib/utils/formatter/currency.ts
+++ b/src/lib/utils/formatter/currency.ts
@@ -2,7 +2,7 @@ import type { Big, BigSource } from "big.js";
 import big from "big.js";
 
 import { MICRO } from "lib/data";
-import type { NominalType, Token, U } from "lib/types";
+import type { NominalType, Option, Token, U } from "lib/types";
 
 /* eslint-disable */
 export function microfy<T extends Token<BigSource>>(
@@ -16,3 +16,17 @@ export function demicrofy<T extends Token<BigSource>>(
 ): T extends NominalType<infer N> ? Big & NominalType<N> : T {
   return big(amount).div(MICRO) as any;
 }
+
+export function exponentify<T extends Token<BigSource>>(
+  amount: T,
+  precision: Option<number>
+): T extends NominalType<infer N> ? U<Big & NominalType<N>> : U<T> {
+  return big(amount).mul(big(10).pow(precision ?? 0)) as any;
+}
+
+export function deexponentify<T extends Token<BigSource>>(
+  amount: U<T>,
+  precision: Option<number>
+): T extends NominalType<infer N> ? Big & NominalType<N> : T {
+  return big(amount).div(big(10).pow(precision ?? 0)) as any;
+}
diff --git a/src/lib/utils/tx/composeMsg.ts b/src/lib/utils/tx/composeMsg.ts
index f7be40dcf..ec1b5ca9f 100644
--- a/src/lib/utils/tx/composeMsg.ts
+++ b/src/lib/utils/tx/composeMsg.ts
@@ -2,7 +2,7 @@ import type { Coin } from "@cosmjs/stargate";
 import { ParameterChangeProposal } from "cosmjs-types/cosmos/params/v1beta1/params";
 import { StoreCodeProposal } from "cosmjs-types/cosmwasm/wasm/v1/proposal";
 
-import { microfy } from "../formatter";
+import { exponentify } from "../formatter";
 import { typeUrlDict } from "lib/data";
 import type {
   ComposedMsg,
@@ -11,6 +11,7 @@ import type {
   Addr,
   Token,
   HumanAddr,
+  Option,
 } from "lib/types";
 import { MsgType } from "lib/types";
 
@@ -51,6 +52,7 @@ interface WhitelistProposalMsgArgs {
   changesValue: string;
   initialDeposit: Coin;
   proposer: Addr;
+  precision: Option<number>;
 }
 
 export const composeSubmitWhitelistProposalMsg = ({
@@ -59,6 +61,7 @@ export const composeSubmitWhitelistProposalMsg = ({
   changesValue,
   initialDeposit,
   proposer,
+  precision,
 }: WhitelistProposalMsgArgs): ComposedMsg =>
   composeMsg(MsgType.SUBMIT_PROPOSAL, {
     content: {
@@ -80,7 +83,10 @@ export const composeSubmitWhitelistProposalMsg = ({
     initialDeposit: [
       {
         denom: initialDeposit.denom,
-        amount: microfy((initialDeposit.amount || 0) as Token).toFixed(0),
+        amount: exponentify(
+          (initialDeposit.amount || 0) as Token,
+          precision
+        ).toFixed(0),
       },
     ],
     proposer,
@@ -99,6 +105,7 @@ interface StoreCodeProposalMsgArgs {
   builder: string;
   codeHash: Uint8Array;
   initialDeposit: Coin;
+  precision: Option<number>;
 }
 
 export const composeStoreCodeProposalMsg = ({
@@ -114,8 +121,9 @@ export const composeStoreCodeProposalMsg = ({
   builder,
   codeHash,
   initialDeposit,
-}: StoreCodeProposalMsgArgs): ComposedMsg => {
-  return composeMsg(MsgType.SUBMIT_PROPOSAL, {
+  precision,
+}: StoreCodeProposalMsgArgs): ComposedMsg =>
+  composeMsg(MsgType.SUBMIT_PROPOSAL, {
     content: {
       typeUrl: "/cosmwasm.wasm.v1.StoreCodeProposal",
       value: Uint8Array.from(
@@ -139,9 +147,11 @@ export const composeStoreCodeProposalMsg = ({
     initialDeposit: [
       {
         denom: initialDeposit.denom,
-        amount: microfy((initialDeposit.amount || 0) as Token).toFixed(0),
+        amount: exponentify(
+          (initialDeposit.amount || 0) as Token,
+          precision
+        ).toFixed(0),
       },
     ],
     proposer,
   });
-};

From 92166ce9e0a348e9b651365d2763624738184b32 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Wed, 24 May 2023 15:54:18 +0700
Subject: [PATCH 149/354] fix: store code out of gas error by gzipping file
 before submitting tx

---
 CHANGELOG.md                                  |  3 ++-
 package.json                                  |  4 ++-
 src/lib/app-provider/queries/simulateFee.ts   |  5 ++--
 src/lib/app-provider/tx/upload.ts             |  3 ++-
 src/lib/components/EstimatedFeeRender.tsx     |  9 ++++++-
 .../upload/SimulateMessageRender.tsx          |  2 +-
 src/lib/pages/proposal/store-code/index.tsx   | 25 ++++++++++++-------
 yarn.lock                                     | 12 +++++++++
 8 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 13c125915..86bad20e9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -59,7 +59,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
-- [#334](https://github.com/alleslabs/celatone-frontend/pull/344) Fix enable tx bug in proposal to store code
+- [#356](https://github.com/alleslabs/celatone-frontend/pull/356) Fix store code out of gas error by gzipping file before submitting tx
+- [#344](https://github.com/alleslabs/celatone-frontend/pull/344) Fix enable tx bug in proposal to store code
 - [$340](https://github.com/alleslabs/celatone-frontend/pull/340) Remove resend and redo button in accordion if relation is related (Past txs page)
 - [#337](https://github.com/alleslabs/celatone-frontend/pull/337) Fix beforeunload keep showing up Leave modal
 - [#330](https://github.com/alleslabs/celatone-frontend/pull/330) Fix proposal table component propagation
diff --git a/package.json b/package.json
index 9823b9cba..8eb00c0c2 100644
--- a/package.json
+++ b/package.json
@@ -27,10 +27,10 @@
     "@chakra-ui/react": "^2.3.6",
     "@chakra-ui/styled-system": "^2.3.5",
     "@cosmjs/cosmwasm-stargate": "^0.30.1",
+    "@cosmjs/crypto": "^0.30.1",
     "@cosmjs/encoding": "^0.30.1",
     "@cosmjs/proto-signing": "^0.30.1",
     "@cosmjs/stargate": "^0.30.1",
-    "@cosmjs/crypto": "^0.30.1",
     "@cosmos-kit/core": "^0.20.0",
     "@cosmos-kit/keplr": "^0.20.0",
     "@cosmos-kit/react": "^0.19.0",
@@ -64,6 +64,7 @@
     "mobx-react-lite": "^3.4.0",
     "next": "^13.0.0",
     "next-seo": "^5.8.0",
+    "node-gzip": "^1.1.2",
     "react": "^18.2.0",
     "react-ace": "^10.1.0",
     "react-dom": "^18.2.0",
@@ -80,6 +81,7 @@
   "devDependencies": {
     "@commitlint/config-conventional": "^17.1.0",
     "@commitlint/cz-commitlint": "^17.1.2",
+    "@types/node-gzip": "^1.1.0",
     "@types/react": "^18.0.21",
     "@types/react-linkify": "^1.0.1",
     "@types/uuid": "^9.0.0",
diff --git a/src/lib/app-provider/queries/simulateFee.ts b/src/lib/app-provider/queries/simulateFee.ts
index 3aef9d2d0..9a6871a6b 100644
--- a/src/lib/app-provider/queries/simulateFee.ts
+++ b/src/lib/app-provider/queries/simulateFee.ts
@@ -2,6 +2,7 @@ import type { Coin } from "@cosmjs/amino";
 import { SigningCosmWasmClient } from "@cosmjs/cosmwasm-stargate";
 import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
+import { gzip } from "node-gzip";
 
 import { useDummyWallet } from "../hooks";
 import type {
@@ -98,7 +99,7 @@ export const useSimulateFeeForStoreCode = ({
     const submitStoreCodeMsg = async () => {
       return composeStoreCodeMsg({
         sender: address as HumanAddr,
-        wasmByteCode: new Uint8Array(await wasmFile.arrayBuffer()),
+        wasmByteCode: await gzip(new Uint8Array(await wasmFile.arrayBuffer())),
         permission,
         addresses,
       });
@@ -174,7 +175,7 @@ export const useSimulateFeeForProposalStoreCode = ({
         title,
         description,
         runAs: runAs as Addr,
-        wasmByteCode: new Uint8Array(await wasmFile.arrayBuffer()),
+        wasmByteCode: await gzip(new Uint8Array(await wasmFile.arrayBuffer())),
         permission,
         addresses,
         unpinCode,
diff --git a/src/lib/app-provider/tx/upload.ts b/src/lib/app-provider/tx/upload.ts
index 206b93bd1..fb068c94d 100644
--- a/src/lib/app-provider/tx/upload.ts
+++ b/src/lib/app-provider/tx/upload.ts
@@ -1,5 +1,6 @@
 import type { StdFee } from "@cosmjs/stargate";
 import { useWallet } from "@cosmos-kit/react";
+import { gzip } from "node-gzip";
 import { useCallback } from "react";
 
 import { uploadContractTx } from "lib/app-fns/tx/upload";
@@ -36,7 +37,7 @@ export const useUploadContractTx = (isMigrate: boolean) => {
 
       const message = composeStoreCodeMsg({
         sender: address as Addr,
-        wasmByteCode: new Uint8Array(await wasmCode),
+        wasmByteCode: await gzip(new Uint8Array(await wasmCode)),
         permission,
         addresses,
       });
diff --git a/src/lib/components/EstimatedFeeRender.tsx b/src/lib/components/EstimatedFeeRender.tsx
index 69451afeb..d902bbe1a 100644
--- a/src/lib/components/EstimatedFeeRender.tsx
+++ b/src/lib/components/EstimatedFeeRender.tsx
@@ -1,6 +1,7 @@
 import { Spinner } from "@chakra-ui/react";
 import type { StdFee } from "@cosmjs/stargate";
 
+import { useChainRecordAsset } from "lib/app-provider";
 import { formatBalanceWithDenom } from "lib/utils";
 
 export const EstimatedFeeRender = ({
@@ -10,6 +11,7 @@ export const EstimatedFeeRender = ({
   estimatedFee: StdFee | undefined;
   loading: boolean;
 }) => {
+  const getAssetInfo = useChainRecordAsset();
   if (loading) {
     return (
       <>
@@ -21,5 +23,10 @@ export const EstimatedFeeRender = ({
 
   if (!coin) return <>--</>;
 
-  return <>{formatBalanceWithDenom({ coin, precision: 6 })}</>;
+  const chainAssetInfo = getAssetInfo(coin.denom);
+  return (
+    <>
+      {formatBalanceWithDenom({ coin, precision: chainAssetInfo?.precision })}
+    </>
+  );
 };
diff --git a/src/lib/components/upload/SimulateMessageRender.tsx b/src/lib/components/upload/SimulateMessageRender.tsx
index 6e6ed4c1d..13e483ce6 100644
--- a/src/lib/components/upload/SimulateMessageRender.tsx
+++ b/src/lib/components/upload/SimulateMessageRender.tsx
@@ -43,7 +43,7 @@ export const SimulateMessageRender = ({
 }: SimulateMessageRenderProps) => {
   const status = getStatus(isLoading, isSuccess);
   return (
-    <Flex gap={2} {...restProps}>
+    <Flex gap={2} align="center" {...restProps}>
       {item[status].icon}
       <Text variant="body3" color={item[status].color}>
         {value}
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index 2c42e4205..be805c1be 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -13,6 +13,7 @@ import { Sha256 } from "@cosmjs/crypto";
 import type { Coin, StdFee } from "@cosmjs/stargate";
 import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
+import { gzip } from "node-gzip";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 
@@ -77,13 +78,13 @@ interface StoreCodeProposalState {
 }
 
 const defaultValues: StoreCodeProposalState = {
-  title: "123",
-  proposalDesc: "123123",
-  runAs: "osmo1acqpnvg2t4wmqfdv8hq47d3petfksjs5r9t45p" as Addr,
-  initialDeposit: { denom: "", amount: "1" } as Coin,
+  title: "",
+  proposalDesc: "",
+  runAs: "" as Addr,
+  initialDeposit: { denom: "", amount: "" } as Coin,
   unpinCode: false,
-  builder: "cosmwasm/lorem",
-  source: "https://github.com",
+  builder: "",
+  source: "",
   codeHash: "",
 };
 
@@ -204,9 +205,15 @@ const StoreCodeProposal = () => {
       Boolean(
         isAllInputFilled &&
           !shouldNotSimulateForAnyOfAddr &&
-          !formErrorsKey.length
+          !formErrorsKey.length &&
+          wasmFile
       ),
-    [formErrorsKey.length, isAllInputFilled, shouldNotSimulateForAnyOfAddr]
+    [
+      formErrorsKey.length,
+      isAllInputFilled,
+      shouldNotSimulateForAnyOfAddr,
+      wasmFile,
+    ]
   );
 
   // Reset simulation status to default when some of the input is not filled
@@ -284,7 +291,7 @@ const StoreCodeProposal = () => {
         title,
         description: proposalDesc,
         runAs: runAs as Addr,
-        wasmByteCode: new Uint8Array(await wasmFile.arrayBuffer()),
+        wasmByteCode: await gzip(new Uint8Array(await wasmFile.arrayBuffer())),
         permission,
         addresses: addresses.map((addr) => addr.address),
         unpinCode,
diff --git a/yarn.lock b/yarn.lock
index 981ef6882..3c8e9740e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3408,6 +3408,13 @@
   resolved "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz"
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
+"@types/node-gzip@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@types/node-gzip/-/node-gzip-1.1.0.tgz#99a7dfab7c0eec545658f3d736e8d6939ed7161e"
+  integrity sha512-j7cGb6HIOZbDx3sqe9/9VAPeSvyt143yu5k35gzRXE3mxEgK6BOZ6BAiJ3ToXBcJqLzL9Cr53dav21jlp3f9gw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/node@*":
   version "18.7.16"
   resolved "https://registry.npmjs.org/@types/node/-/node-18.7.16.tgz"
@@ -7572,6 +7579,11 @@ node-fetch@2.6.7, node-fetch@^2.6.1, node-fetch@^2.6.7:
   dependencies:
     whatwg-url "^5.0.0"
 
+node-gzip@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/node-gzip/-/node-gzip-1.1.2.tgz#245bd171b31ce7c7f50fc4cd0ca7195534359afb"
+  integrity sha512-ZB6zWpfZHGtxZnPMrJSKHVPrRjURoUzaDbLFj3VO70mpLTW5np96vXyHwft4Id0o+PYIzgDkBUjIzaNHhQ8srw==
+
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz"

From 59bd0c18d553c0961d2efb88d39aa2de94cb5207 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 24 May 2023 17:39:18 +0700
Subject: [PATCH 150/354] feat: abstract osmosis theme config

---
 public/favicon.ico                          | Bin 15406 -> 0 bytes
 src/config/theme.ts                         | 225 +++++++++++++++
 src/config/type.ts                          | 112 ++++++++
 src/env.ts                                  |  12 +
 src/lib/components/Meta.tsx                 |  37 ++-
 src/lib/components/Seo.tsx                  |  24 +-
 src/lib/components/ValidatorBadge.tsx       |   7 +-
 src/lib/components/icon/CustomIcon.tsx      |  83 ++++++
 src/lib/components/json/JsonEditor.tsx      |   6 +-
 src/lib/components/modal/CodeSnippet.tsx    |   5 +-
 src/lib/components/state/StateImage.tsx     |   8 +-
 src/lib/icon/NAToken.tsx                    |   6 +-
 src/lib/layout/Footer.tsx                   | 286 +++++++++++++++-----
 src/lib/layout/Header.tsx                   |   3 +-
 src/lib/pages/home/components/QuickMenu.tsx |   3 +-
 src/lib/pages/not-found/index.tsx           |   3 +-
 src/lib/styles/theme/colors.ts              |  88 +-----
 src/lib/styles/theme/fonts.ts               |   6 +-
 src/pages/_document.tsx                     |  12 +-
 19 files changed, 736 insertions(+), 190 deletions(-)
 delete mode 100644 public/favicon.ico
 create mode 100644 src/config/theme.ts
 create mode 100644 src/config/type.ts

diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 1c33309ea14f718b3e050964a373ba50b457ee8f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 15406
zcmeHOd306P)en>kB2vJlgqOU$IeD4qnGA$54<TWys1PTdS}Uc3prTl<fT$FdS}0Nl
zMG%!y3W$s{hFK7i!H9~ASmFCa+AhBR{eI`(^K#!y0>oOozO~9)XWf_g?m7Fn_t|HU
zhp@0_VLu6L*DefCXV{%B!oqUG!or+R<8Ocau&@{LU0Ry?du&+P)`+k$Ki<I<%rL&k
z<BI-yZMJlGr%o@pqN9(x68-<+aN{$-^LFZ#(byt3o2|9SW}6jVlzXw=)N#^g{VUS0
zW~oH%T`o~u7mIVoL~)noU&K4J`L1;x{tdbt9k*RCS8ZJ+t#`dC?RGDf@O>-9cHnJs
zy#H769$q8yht`OH+%E-qHd@!<nv)W8<Us2<=|1goY5(qgi5h#CI0p0(*MOel9(RxU
zx4t1MN7qZ{u?>>^;Jreu#6X_<x?(SW+vOK>CbgH$Ovo3PKUOL{ewmt5AX8Hdq{8hN
z557xX{DS12*d)crH;KP%(M2t*MOj_tf6A_xkBbLNhTS2*_N2&}v|j2vet#b0DXiu3
z$4Oz$3Ms4ICIxe*3T5hxiaPpP$zb*F)1VbynlIgEPLV^cd~!0UuY6K6Nd3k&h$(Zz
zDCv1>hx9qJUflNRquDXee~<>ph}a|vAAOs2*t1OX7rr1#QPGkb9TQlC{G<%-Fa1B;
zB~_pAmbm1^e>6OQxws)OPpnt1K^$D4vPi}Js?)n==okCMkNH;o<T1LmKsxMRCLZip
zM$K{=ynLP<1}|sQdMh~={%(v6{c^ute`2e6fS)qZ@;eFnr9*yE_unC&_g72S@eR@q
zvKqT^uG}A+Cb98;8Ti2lx#`S7=`-&+B|q*#KX;tkKVsaF*ITXODJzo1hkq@ZkNifG
zyO*kcnVZsCCN7vO)n6Tu)bf&xTA!&4lYw2!k^4wljfhQF<C)Y#sVy0(^y6?Fzw{pS
zOX|;Tt;1S>r(h2CNUsz6<Zskd>bg~bxeov4n$$(gL+b?B;AehEK8ZDSuExP9dD42t
zz2)E@sq+h2S>OF3KGV)PF-kFLpZ?W<;4K_jZ*badbKExDZj7@oo9&`GzQ*4*7<2dz
z-~CtV>G`1N$GR_K-Sc>gJ1R<CZkIT+(<BBu&Edpne#hU`JI1>&dLttf^g2y_CPYNE
z!JbaVdf#!)n9NiOzwc&gJO62Ev-vf-b|-8h>?qGvI7a05Hzj(}bK>~z9pcJPH*nZ&
z7l8YjxbX06n?m2@dB38Ykt%JU9xqqD_nNfY`G&H=*VZgicDTcy<r1-PxkT<?sqAs|
z!Bxs8yY{UV@AOB-Q-@<e*Sr!8&gke|&^=9AMpO@$7VGE9RofR!s~z=ehlkL1!XLN}
ztyVrE?t`@wzk9jF-f@%Om(xD1eJKnk-=}@HC@CCLDXrJfx6pn|>iCAt_pYeVx0Uvh
zcO>b<cO?}gVe)v`WIOldbYpVh9^v=>9?+iY&6FcyPFd~9lC*i#gJgak_PpbYKTFiJ
z4~zYwUx@?5Ic<WtR?QXf!PTPpKC(^{NgIAG?IXjtrA&EH%V9rtD^w2D6Ylqzge*B%
zGE|PY_REK14%yf-RUB*PNxNN3q$Bp!QIbzTtM#ky$?uBuB<{J#B=LiHf@tR+-za$)
zNq3J>?^Ca>^m$G|`$DPHBd1FZpZ85pg&b=ct1#Sl_g!MAzt-mqIQ{TpxiL;P;;ne_
zPHbgwN!ztd`Se`)Wcud9lbfaJ&^r>FlR*sMS@!{dzewH}WR?Zl=yOGb<cO!Ubg?-C
zd{%hkWKnikW%tj)ZgbSa7rzcW+}9l!c+XdqC)vAK1ZWqZ+#;nPzbAPwKCRz*kuost
z+IjMRw#(39`dGUfzJ}Pm(2FNLY4T0Ukf3+0zT_LspOTU<u<L4$e_$UeIJQv?+FMn8
zQGR^0_;WMqBhSa0HkIp7!aVC*{7m11y;5rx4(O});so^Ko1Fgj-nGu9zvG(RudF}*
z9()_LyM3}<#V9!s-)H;|TaEYTkj8uYeS+4cT>F^vv_r2VHoYdRUAYRwv6enL*V%}F
ztaSC~zhN%-i5UFF`BHZBJ<+uLe7aN0SHGgLK?mqdY7(RE@?~kTTn~005RhX#*uS<o
zcX^9u$(D|33PY`@NZ!urE-Nv<4%s&)JLrg#L3EUqZg|~@%|M$mR{!H$#OrnQcjd>r
zVDHJV#?R-g&_&L7IUUk!&0IzQ=ZJe#HZGFi{$`Z)wtI~A@y=jxd_4?|OL#`OM!~Gf
zLcaTf_JGf8r1G;GiO<jGZ_0-<j<wR}=jmyMYOW*EFIR0_1o}&a^kZOSeRH1*(B}Fa
zZ|C#~T7&%XeDb%v-;Yy#lQv_-L0{}e?A3+8DgS+0`iT80e@#DjE@EVpu6}YKtUOrh
z7d$y$@vUhO{c@kAnDjCKY*XY<{^Rzq5??Q4e@MSij7Ms{#X&kro1pDd$?T^Bd^5%!
zh8Q`)lt1S0PJ;e@6{3Ip3j5>i8RxkDR73yBKXaZq*w?i8*GT%jX_EKqbMoZ42h4L3
zi?dmw<Uo6*WCPpSXZtcGbJD)y%mEqp$xiWkl>XK53^a897?bvL#i})!d$fiBHR#jF
zfIj>R?JCdqkUeW;XJmT7KAeS((zY<EtXKwpzDLFO!w_FHMz31`y0+yiUL(#)DS1Kr
zXFUV_J#zHzCVi8ClYSS_?}fbQp0$f*i?2{&cpP?8@ecdb^)J&vd!K09)nC6aT_)ad
z{0{qL+CXK0X+NzxL>Vx5(sHyTwsOGlhw|SW^eds)H=WongRdW=Y&GYk4;>&wPw$Z%
zOuk2eb~W}sk$VsOtK(F>tNhR6?D8P`#KJtUr^{zxz?v?^o3S$=m(-oGN61-APi&Fy
z2i8cJxz9*)c}d{CvM7g489P>PKfFoFoV0KL=8*J#X}W$#`5*cq`a)p%t^{`Iix553
z7)JP#1HM4X!|4=na)S7h6UBqi>O0`0F5L{Db;R3Q?Zqxzri|IJOm04VNUA^CC5d^;
z?pz3sjWLh0u8KdH(^~g|pSc$cq0_yglU~!mX_|b}=OGW0Hz7lwefo!Et&I3#o3~Kz
z{B(~LjT&j-M65%;t^XJkVI38J%}y_=M_=RN+6M|Nlzsj~YG>hi4YvAy_=`~7Jc}xh
zYUY&ck+&djQs;SpWAV7T52s_n3o(SQr!h3;c@AgsdBl^9X~AEk@u!vrV`RQZ+cOri
zppM6yLQ}s>U1B_G+Of;V-x`A{2bF&?E@E638XIXE4Lx~|d6uZp)D7+{*VOA@$y3GS
zMofHxYY+!xB*rO>6{rWAHb2vT^EcWtzH8F`j(XitynQ7Y_>LJH2l7vzFUBkMS@fG6
z{7fIh-xOUl|7<GHm%^m;Z>+CkCgj~;>--zvoyFJ<ddi;Dre12T|Nd4d0V*X*v|-g4
zKSZ4b%QW<_MRas@2k26wr&Fg&?A0Xf-6}jk!uS^Bf7R&J=^UP{39ZC)GW2Nx^^bG0
zD5}Xn?mwr~*~%RmnGGCcfM+>IEwKF)Pkp{F{WRXKHRp~6@0nclN8qBFJ0ijd8P8If
zS%<M;b~)_gOo|tKS!ao^>LpP(R!TI69iL<Hoij0B+>V$~-nd3B*EG*{vws60&72Vt
zk;v~K0Ie@IW|zYuj?_f4^(&VSkKQM37yd!6*}Op7Y+EdCcfO@+LG8^tR5<Gd_}=!`
z3lj6Y(c-M=DXui+u*hTddU&1z4`c1&;WqHl{0HKrxhE>B3^^xtSIOJua*C}-iFA1I
z9=T@0v(gHfuhuoJU2mzJhW!L$zYhHf*0MSx#_pu+S?Dp?@tbqWEO9+LO5CUyyX#_|
zzpFD871i|z;NhpvPMt;q_bH5v7)sthn|PnJ{OcT*f3@7PSguC@gFTQo3j5N4+=)FL
zgV-a1nZ1!HVmIq?PSniZ2avODS}4BB<HXJVF!YhMPLVcv`04lAhmIXPUV}3^3Ua3%
z5z0Ig{gtbh%#;?}URU+AmdG8hM!m8j?8L3HYq@LetmkpK(cfX8C-(4K@pG)5FTTP3
z#Lb#3`5<jzAeJWb@Kc2y`p9*hexJ1e&8^a6&0pjv+kqW255~Sk<)HzcLH(08NF{fx
z&IIHhf*pBNJnDjpsLv(sTqgd9&~J)2>J+eXXNaW<`_NqJj4Ag7#A`#kc9X0bPsr7q
z7BnFDQ0ztx(~4coojIn`8MB_L<Zi*9Y}OW2QEyC|K2bbIE~)mx)TPUv>E_t8uGBrs
zoxQQy_7pjSIQc+JuT1GPP~1yqOKY>{8>;WLF%g>=O61y?#kO>oM4|3&fBkuhSvFgo
z>*k9SwQ%?Tx9fC9VP7W+kh{j7hT3TQM;jy)d1T6r#{&C6Otd4|hequy?Uw03FESQm
zf9|u4UUIa#OXWOAnmJ@1;?LxTGv!*#S?#d>4e2=V8P$V~8Q5E#`B~zEA8?_crUpOf
zqc&I7Tij#s7T+s>5dYqlN@p6xj{GkN^}Sr2i4^p-JjQvrNE=8y-pE;KM%xQM|4!N8
z8kZuckYk=N{e^rInXT}%?tADbE_q_mFzL8?k?J#qL%#OwE5t?L6jRSPX?s%lj6uCS
z!7tt+{Usjzk_6f7dbE<e!oC4@VWU2qw{Mjs46V@fFVF`yv<LKkz^%?}fy0fw%cyrS
z7XP-ON<Qw8Dj!0R$iuqmOi4w3q~lZL#hGg6@w6A_V7wfMTq_=RGLAS5U31az@ae(a
z_-7|b+JV19XN-C}<*u<8ptjr@_1%K^-Vk4Us$Ty~Peg>*x(AFs%$PvYo0CyL$NO9E
z0Qod3SB_sDC+pk#rJxsj)v&2nJdE`#(er&EF$?);q0G%FRbzTuXBn56t$s_!JJvb0
zmGQs6RWf!gQ98rg4Tr|g8gU6m)-?2OOuMRL4NJVl_z7z=o{}oiKUQ27$bob&#OHbB
zoS*0PlZV_XO1>Hg<=r23*(EvM<OF)DteY~g*K_%q-<`m^%;TBQb53ABVu-|1w@VKE
zfx>>mkb5!eyCtZtvldjcXO$%O>!If`Ud%H0pas^U-d|u{^m)k2N?T)4_`$=x%q}XY
z(zH`B=MjIVoW@zPzI&<9?9V=ul%sm>dL7C(4Ske+=sk5t$(`71&H6le$(}SGH5C;v
zT>$@MN)dZA2FDtVfu#_7zq6oUqd0cpw?c>M8}WV|;<pFw@p2?QRZhE$<=gzqM(2j|
z!(8{dw4xv$d^iueE9WZg>}dqBf3i)wqsCwQ&H{-;-_YcFxtV*g$D?#-IO;<U)yzqo
zdGzhDN#<NtC-e;;EPpEKq0TgIEYEmTd3ZD_H%ONfa9^SL(7HP8xKGgil+mB)iTZr<
zAjB7j?$xTi3Aqq->7UfcS?R@%%5QyMFUhvoomV^WJ>cHSy}$aE9K6aKu&*CqmnP?n
zj9yo$%p3ZfwG^HmEf+8BaQ@;y89g1!9W_Ya|LBc6e_xEkX%mfiiP^~cCUY)rTuoua
zy2HK+eHm>c-*tIh(r((r%7-N`pDQnQ?hPO92=H*))3_WO;(_O$wu@_f;2$z@-=-`2
zQIvZRjh+1wj2`P3i3fUX@;eE#XI!s(3JujLNss4^{>+>s(On9p^{P3lZ+ji$_|#P|
z%gaT5<b&phe>m1IN!~@@Vq$VGMvkn*-cbe(Vdr<WS+u)){ba<T<<Oyk+)eBi=yR~g
z6KBTRW~^|O^Ef}W&aCNuSX3$HF0ZjZ_8{VxAu4CN7V!>y?Hv(g`nSF*zrBAn`i<o>
z@#j8u4<~>JvYmmm+87T!bMzV7ruqwWrF_?N=*$l33+(I<5j$(ym8W(}axb%oz&e3Z
z8&L8+2U%#$*5_{6ogB00<3fzk{((EC6>@+!CVt)%uph*oEyR^ce|cKGI&OqqG!N7d
zo+0bH`ZMh{{hij&Sk#`oLQjaDI-{{yq2@ji_n0znKpbhTt!o@|uRp!PwMk=pL0?I;
z8?g=hZa@3oC~1ki2aG>?cS_^;!2kH}yH&4U?@4{qm_wiR)r>WW%ZIyTUDv(}>@`vW
z{FJ-VquL{b(X+_D{YJgEQJ=w_OX1%ZivKa<uP=WC|808hdQYB(P~7_OQ2gE2E(n(U
z7kgv~u(Q{cGx8?AHu0<c@HU*!#`LEqNPq0oe(W94pG5)vq5e~Uc!w<RwHe|zdZ?O)
zdNS@=7t)K=*r`A4YtjZ%{;?^E(qrS|fZPWHJLRtKp?$GWvb6pfy3bnKCC~3soZoJj
zIKPJetWx;>$jSYWjTVnLP%9Q6VuMFJ#mcev$#U9@*swUbC(ZNA_)f>D@i@PIcCUiY
zK;JFchkb<}BYJMBbv??XrVWz37+1Ysx0cVRu%Fes-vwTyyA;Ybu%G(;8uB;sGoDA@
zk-G4CNgjQNq}_j)lr8+DEYCIkG~;jjIL739ea3ZG`<XthN-B<SG_mhBdxZPtM)oLc
zcZfg5jM)v_KZ)|^-tB56_Mu&UGC5D!KjFJh$g|z_3GiQa_EYPR-^@p{kcTi9E9D&l
z#9&j$kC!8+e;^OF<RRbSfibC$t39aC@y=q^r!{pt1Gy7Bdz=H`TPof<|20|pV51%>
zvk~`enS?&y$?GXu*7yPUZLY=L2W|iD$jzz$LHOB+1^#lx0fP>$mu00D0UynHiGKRC
z;z25&rd&8;lM<xIikD<C^ql?C>w%rUVPYSS(QU@#h`sQx5%aJPoQQcw{N_tS{1&X6
znh*Nso8toYB^AF#-ZNaT+xoilU#v+5;m2LheB@7zBg+wk@t(ph+g8d7@NfvV0PevD
zh+7}_X9WBf@n_sLNCthpU50)YjD5t{2W13wKO4PQlUK%Xs)mifuPA=rn%`IQEb+6;
z=Mfw3S@Dh?@w=_^Cw}B1R{WLlp(A&$mOnl;LEh|IDHCE6g!zMsNBoG5`{GWBvNIOB
ztNt+hq=UCCm4vLo9X=I5GY4QUfHf}Af6RoRZ!CW~SN02e34SKgaxco|^GeJ;BgDQ9
z_jh?;TI;`-KlR6yKksQ!FK+k<XX5T#B;HXM&+^_t*`KE1p6_1t)J=Vd%!gxCv&Rb^
z>h|nJ@ftZR>#$>yf2rO9Yx($F>CjMbg799i)|=2L^A6@t+E*&s;as~)3&r!o6XM^p
zSW-}b$~yWk<ZtT#$*s~G@nqlqYovVs45J@z+5*mJ-d9mIK<;{Hv5YvmBe*Yr*65Gl
z_`xPg@6%oHRV~hKrkOv6S@U-&lr)sTTlpY=6B2V&zfR#d&z>7H^p+P(++D*Z2|gfg
z+9SxjCrb9?V<h93w@6aYvU;%*_wqq^vTSY_FFWkn@=EocGHS~T8G*A}P3(~UEf~FC
zn5<<lq4_)cU|#}QRBfO2lf#`aoeMG_dpV<v<il?S@jzZETi8Jl_F4^mR^Mqp%_now
zSJ1;{O@MU`b*5XmWpzn~+`IQ(h5goV4$H8;Ya}7lyt`ra2pa0yHZ%JZs>Xk7tWm$R
z%02Wm;|<1k%qwYIwSTC`j|DelOvbYJ_|t@O348IZYn(!DM%S14d~?XnGV+W4Qhjo}
z<lZ<)%joZ{u|eDo)(};X#pqM0`XTSnpMmcR#U1)L_kuYJ@A&bK1#<;rOhwGf!TVO-
zaaV*f)-za>ciuz$=6}nrFluD5tK5h8@qZ&8UizwZd-6ejCx~~lR++sSt@@$QW~$d>
zso%bWddZdES73g^T#fn8?t=cpxOFSW9(?|&s7gM^Z;j<JlnG;sQ>azax3OkCdcZ)5
zV_nkNzf-I&1Mp>Q&^X&8@ve$XnRm<w4`)g*zYn4N@_qhhz4f#7Uh-$uy;-|g*n#B=
z>*snuRR02gLDfT9M}Hc3FImt1KA4&^hcx(qAxM+h6^5quFBA`<{Ug@Xd8S#{y;6N@
z3U01Rn@1X?rR9z|=lk@J0{ftJ$v6+He@EL&|G*k)V}80RxVZ-X3D@M>rmp|X{X5M7
zo~kEf<_W4dK;O$cFKeZ&H#SzYyA&Uc6FHah3VlBPriuLm&fZG1*K)bDYJqvlkIiYf
z%>ITt6Qo7IPaiZKaVu+gtbZ|1Wxim|MfsWEG4^1N!8o0B3L)>HIE4Na{Ry+j(x8pM
zB+ASG$R3TK{u}riFDYL~URb+f4n$keT#EHB)&w|c_xT-jJe}imjybr7x<6p{CH@__
zgE(Wn#P|txS$Ajb{k`vRsMr^^e6ATp<j46#-=9eUjsf6fvRRMhT^Zh)(e)Ynl8?+Y
cGzq*{GH+u2yYxSBf9A&#&3~!<e~`fc0lr|D2LJ#7

diff --git a/src/config/theme.ts b/src/config/theme.ts
new file mode 100644
index 000000000..3cadf11d6
--- /dev/null
+++ b/src/config/theme.ts
@@ -0,0 +1,225 @@
+import type { ThemeConfig } from "./type";
+
+export const DEFAULT_THEME: ThemeConfig = {
+  branding: {
+    logo: "https://assets.alleslabs.dev/branding/logo/logo.svg",
+    favicon: "https://assets.alleslabs.dev/branding/favicon.ico",
+    seo: {
+      appName: "celatone",
+      title: "Celatone Explorer for Cosmos chain",
+      description: "A smart contract powered explorer for the Cosmos.",
+      image: "https://assets.alleslabs.dev/branding/celatone-cover.jpg",
+      twitter: {
+        handle: "@celatone_",
+        cardType: "summary_large_image",
+      },
+    },
+  },
+  fonts: {
+    heading: {
+      url: "https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap",
+      name: "Poppins, serif",
+    },
+    body: {
+      url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap",
+      name: "Space Grotesk, sans-serif",
+    },
+  },
+  colors: {
+    gradient: {
+      main: "linear(to-tr, #5235EF, #6145FC)",
+    },
+    error: {
+      main: "#FF666E",
+      light: "#FF8086",
+      dark: "#b43e44",
+      background: "#4C1A1D",
+    },
+    warning: {
+      main: "#FFBB33",
+      light: "#FFCC66",
+      dark: "#CC8800",
+      background: "#523600",
+    },
+    success: {
+      main: "#42BEA6",
+      light: "#67CBB7",
+      dark: "#207966",
+      background: "#102E28",
+    },
+    background: {
+      main: "#111117",
+      overlay: "rgba(17, 17, 23, 0.7)",
+    },
+    text: {
+      main: "#F7F2FE",
+      dark: "#ADADC2",
+      disabled: "#8A8AA5",
+    },
+    primary: {
+      main: "#5942F3",
+      light: "#9793F3",
+      lighter: "#DCDBFB",
+      dark: "#3E38B0",
+      darker: "#292676",
+      background: "#181733",
+    },
+    secondary: {
+      main: "#D8BEFC",
+      light: "#E8D8FD",
+      dark: "#A28FBD",
+      darker: "#6C5F7E",
+      background: "#36303F",
+    },
+    accent: {
+      main: "#C6E141",
+      light: "#DDED8D",
+      lighter: "#E8F3B3",
+      dark: "#95A931",
+      darker: "#637121",
+      background: "#3D470B",
+    },
+    gray: {
+      100: "#F7F2FE",
+      400: "#ADADC2",
+      500: "#8A8AA5",
+      600: "#68688A",
+      700: "#343445",
+      800: "#272734",
+      900: "#1A1A22",
+    },
+  },
+  jsonTheme: "monokai",
+  illustration: {
+    error: "https://assets.alleslabs.dev/illustration/404.svg",
+    searchNotFound:
+      "https://assets.alleslabs.dev/illustration/search-not-found.svg",
+    searchEmpty: "https://assets.alleslabs.dev/illustration/search-empty.svg",
+    disconnected: "https://assets.alleslabs.dev/illustration/disconnected.svg",
+  },
+  socialMedia: {
+    website: "https://celat.one/",
+    github: "https://github.com/alleslabs",
+    twitter: "https://twitter.com/celatone_",
+    medium: "https://blog.alleslabs.com/",
+    telegram: "https://t.me/celatone_announcements",
+  },
+};
+
+export const OSMOSIS_THEME: ThemeConfig = {
+  branding: {
+    logo: "https://assets.alleslabs.dev/integrations/osmosis/logo.png",
+    favicon: "https://assets.alleslabs.dev/integrations/osmosis/favicon.ico",
+    seo: {
+      appName: "osmoscan",
+      title: "OsmoScan | Osmosis Explorer powered by Celatone",
+      description:
+        "Explore, deploy, execute, and query smart contracts on Osmosis from a user-friendly web UI",
+      image:
+        "https://uploads-ssl.webflow.com/62825f7982e99cdbe7e37258/63ffa0f2d03be626855120ae_image-_4_.webp",
+      twitter: {
+        handle: "@osmosiszone",
+        cardType: "summary_large_image",
+      },
+    },
+  },
+  fonts: {
+    heading: {
+      url: "https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap",
+      name: "Poppins, serif",
+    },
+    body: {
+      url: "https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap",
+      name: "Inter, sans-serif",
+    },
+  },
+  colors: {
+    gradient: {
+      main: "linear(55deg, #462ADF 0%,#5235EF 40%, #B72AAB 100%)",
+    },
+    error: {
+      main: "#FF666E",
+      light: "#FF8086",
+      dark: "#b43e44",
+      background: "#4C1A1D",
+    },
+    warning: {
+      main: "#FFBB33",
+      light: "#FFCC66",
+      dark: "#CC8800",
+      background: "#523600",
+    },
+    success: {
+      main: "#42BEA6",
+      light: "#67CBB7",
+      dark: "#207966",
+      background: "#102E28",
+    },
+    background: {
+      main: "#090524",
+      overlay: "rgba(14, 9, 49, 0.7)",
+    },
+    text: {
+      main: "#F2F2F4",
+      dark: "#A09ACA",
+      disabled: "#736DA0",
+    },
+    primary: {
+      main: "#5235EF",
+      light: "#765CFF",
+      lighter: "#8481F8",
+      dark: "#462ADF",
+      darker: "#3A1FCA",
+      background: "#201865",
+    },
+    secondary: {
+      main: "#8481F8",
+      light: "#9B99FF",
+      dark: "#6A67EA",
+      darker: "#5855DB",
+      background: "#2F306A",
+    },
+    accent: {
+      main: "#DD69D3",
+      light: "#E58BDD",
+      lighter: "#ECACE7",
+      dark: "#CA2EBD",
+      darker: "#B72AAB",
+      background: "#431152",
+    },
+    gray: {
+      100: "#F2F2F4",
+      400: "#8D87B8",
+      500: "#736DA0",
+      600: "#5F588F",
+      700: "#464075",
+      800: "#282750",
+      900: "#140F34",
+    },
+  },
+  jsonTheme: "pastel_on_dark",
+  illustration: {
+    error:
+      "https://assets.alleslabs.dev/integrations/osmosis/illustration/404.svg",
+    searchNotFound:
+      "https://assets.alleslabs.dev/integrations/osmosis/illustration/search-not-found.svg",
+    searchEmpty:
+      "https://assets.alleslabs.dev/integrations/osmosis/illustration/search-empty.svg",
+    disconnected:
+      "https://assets.alleslabs.dev/integrations/osmosis/illustration/disconnected.svg",
+  },
+  footer: {
+    logo: "https://assets.alleslabs.dev/integrations/osmosis/logo.png",
+    description:
+      "A Smart Contract Explorer for Osmosis | Explore, deploy, execute, and query smart contracts on Osmosis from a user-friendly web UI",
+  },
+  socialMedia: {
+    website: "https://osmosis.zone/",
+    github: "https://github.com/osmosis-labs/osmosis",
+    discord: "https://discord.com/invite/osmosis",
+    twitter: "https://twitter.com/osmosiszone",
+    medium: "https://medium.com/osmosis",
+    telegram: "https://t.me/osmosis_chat",
+    reddit: "https://www.reddit.com/r/OsmosisLab/",
+  },
+};
diff --git a/src/config/type.ts b/src/config/type.ts
new file mode 100644
index 000000000..b1e999e18
--- /dev/null
+++ b/src/config/type.ts
@@ -0,0 +1,112 @@
+export type ThemeConfig = {
+  branding: {
+    logo: string;
+    favicon: string;
+    seo: {
+      appName: string;
+      title: string;
+      description: string;
+      image: string;
+      twitter: {
+        handle: string;
+        cardType: string;
+      };
+    };
+  };
+  fonts: {
+    heading: {
+      url: string;
+      name: string;
+    };
+    body: {
+      url: string;
+      name: string;
+    };
+  };
+  colors: {
+    gradient?: {
+      main: string;
+    };
+    error: {
+      main: string;
+      light: string;
+      dark: string;
+      background: string;
+    };
+    warning: {
+      main: string;
+      light: string;
+      dark: string;
+      background: string;
+    };
+    success: {
+      main: string;
+      light: string;
+      dark: string;
+      background: string;
+    };
+    background: {
+      main: string;
+      overlay: string;
+    };
+    text: {
+      main: string;
+      dark: string;
+      disabled: string;
+    };
+    primary: {
+      main: string;
+      light: string;
+      lighter: string;
+      dark: string;
+      darker: string;
+      background: string;
+    };
+    secondary: {
+      main: string;
+      light: string;
+      dark: string;
+      darker: string;
+      background: string;
+    };
+    accent: {
+      main: string;
+      light: string;
+      lighter: string;
+      dark: string;
+      darker: string;
+      background: string;
+    };
+    gray: {
+      100: string;
+      400: string;
+      500: string;
+      600: string;
+      700: string;
+      800: string;
+      900: string;
+    };
+  };
+  illustration: {
+    error: string;
+    searchNotFound: string;
+    searchEmpty: string;
+    disconnected: string;
+  };
+  jsonTheme: "monokai" | "one_dark" | "pastel_on_dark";
+  footer?: {
+    logo: string;
+    description: string;
+  };
+  socialMedia?: {
+    website?: string;
+    github?: string;
+    discord?: string;
+    twitter?: string;
+    medium?: string;
+    telegram?: string;
+    reddit?: string;
+    linkedin?: string;
+    facebook?: string;
+  };
+};
diff --git a/src/env.ts b/src/env.ts
index 5aa643efe..367bbf0ca 100644
--- a/src/env.ts
+++ b/src/env.ts
@@ -1,3 +1,4 @@
+import { DEFAULT_THEME, OSMOSIS_THEME } from "config/theme";
 import type { SupportedChain } from "lib/data";
 import type {
   ContractAddr,
@@ -117,3 +118,14 @@ export const getMainnetApiPath = (chainId: string) => {
       return undefined;
   }
 };
+
+// CURRENT THEME CONFIG
+export const CURR_THEME = (() => {
+  switch (process.env.NEXT_PUBLIC_THEME) {
+    case "osmosis":
+      return OSMOSIS_THEME;
+    case "sei":
+    default:
+      return DEFAULT_THEME;
+  }
+})();
diff --git a/src/lib/components/Meta.tsx b/src/lib/components/Meta.tsx
index 7df3f346e..6190ea2b1 100644
--- a/src/lib/components/Meta.tsx
+++ b/src/lib/components/Meta.tsx
@@ -1,6 +1,8 @@
-import { SELECTED_CHAIN } from "env";
+import { CURR_THEME, SELECTED_CHAIN } from "env";
 
-const APP_NAME = "celatone";
+const APP_NAME = CURR_THEME.branding.seo.appName;
+const FALLBACK_DESC = "A smart contract powered explorer for the Cosmos.";
+const FALLBACK_IMG = "https://assets.alleslabs.dev/branding/celatone-cover.jpg";
 
 const Meta = () => {
   const chainName = SELECTED_CHAIN || "";
@@ -13,35 +15,46 @@ const Meta = () => {
       <meta name="apple-mobile-web-app-title" content={APP_NAME} />
       <meta name="format-detection" content="telephone=no" />
       <meta name="mobile-web-app-capable" content="yes" />
-      <meta name="theme-color" content="#FFFFFF" />
-      <title>{`${title} Explorer | Celatone`}</title>
+      <meta name="theme-color" content={CURR_THEME.colors.background.main} />
+      <title>{`${title} Explorer | ${CURR_THEME.branding.seo.title}`}</title>
       <meta
         name="description"
-        content="A smart contract powered explorer for the Cosmos."
+        content={CURR_THEME.branding.seo.description ?? FALLBACK_DESC}
       />
 
       {/* Open Graph / Facebook */}
       <meta property="og:type" content="website" />
-      <meta property="og:title" content="Celatone Explorer" />
+      <meta
+        property="og:title"
+        content={`${title} Explorer | ${CURR_THEME.branding.seo.title}`}
+      />
       <meta
         property="og:description"
-        content="A smart contract powered explorer for the Cosmos."
+        content={CURR_THEME.branding.seo.description ?? FALLBACK_DESC}
       />
       <meta
         property="og:image"
-        content="https://assets.alleslabs.dev/branding/celatone-cover.jpg"
+        content={CURR_THEME.branding.seo.image ?? FALLBACK_IMG}
       />
 
       {/* Twitter */}
-      <meta property="twitter:card" content="summary_large_image" />
-      <meta property="twitter:title" content="Celatone Explorer" />
+      <meta
+        property="twitter:card"
+        content={
+          CURR_THEME.branding.seo.twitter.cardType ?? "summary_large_image"
+        }
+      />
+      <meta
+        property="twitter:title"
+        content={`${title} Explorer | ${CURR_THEME.branding.seo.title}`}
+      />
       <meta
         property="twitter:description"
-        content="A smart contract powered explorer for the Cosmos."
+        content={CURR_THEME.branding.seo.description ?? FALLBACK_DESC}
       />
       <meta
         property="twitter:image"
-        content="https://assets.alleslabs.dev/branding/celatone-cover.jpg"
+        content={CURR_THEME.branding.seo.image ?? FALLBACK_IMG}
       />
     </>
   );
diff --git a/src/lib/components/Seo.tsx b/src/lib/components/Seo.tsx
index 6d10286a0..36fae990e 100644
--- a/src/lib/components/Seo.tsx
+++ b/src/lib/components/Seo.tsx
@@ -1,20 +1,31 @@
 import { useWallet } from "@cosmos-kit/react";
 import { DefaultSeo } from "next-seo";
 
+import { CURR_THEME } from "env";
+
 export const CelatoneSeo = () => {
   const { currentChainRecord } = useWallet();
-  const title = `${currentChainRecord?.chain.pretty_name} Explorer | Celatone`;
+  const title =
+    CURR_THEME.branding.seo.title ??
+    `${currentChainRecord?.chain.pretty_name} Explorer | Celatone`;
 
   return (
     <DefaultSeo
       title={title}
-      description="A smart contract powered explorer for the Cosmos."
+      description={
+        CURR_THEME.branding.seo.description ??
+        "A smart contract powered explorer for the Cosmos."
+      }
       openGraph={{
         type: "website",
-        description: "A smart contract powered explorer for the Cosmos",
+        description:
+          CURR_THEME.branding.seo.description ??
+          "A smart contract powered explorer for the Cosmos.",
         images: [
           {
-            url: "https://assets.alleslabs.dev/branding/celatone-cover.jpg",
+            url:
+              CURR_THEME.branding.seo.image ??
+              "https://assets.alleslabs.dev/branding/celatone-cover.jpg",
             width: 1200,
             height: 630,
             alt: title,
@@ -22,8 +33,9 @@ export const CelatoneSeo = () => {
         ],
       }}
       twitter={{
-        handle: "@celatone_",
-        cardType: "summary_large_image",
+        handle: CURR_THEME.branding.seo.twitter.handle ?? "@celatone_",
+        cardType:
+          CURR_THEME.branding.seo.twitter.cardType ?? "summary_large_image",
       }}
     />
   );
diff --git a/src/lib/components/ValidatorBadge.tsx b/src/lib/components/ValidatorBadge.tsx
index c2463cb5e..06c2e7367 100644
--- a/src/lib/components/ValidatorBadge.tsx
+++ b/src/lib/components/ValidatorBadge.tsx
@@ -2,7 +2,7 @@ import type { ImageProps } from "@chakra-ui/react";
 import { Flex, Image, Text } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 
-import { getChainApiPath } from "env";
+import { CURR_THEME, getChainApiPath } from "env";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { ValidatorInfo } from "lib/types";
 import { removeSpecialChars } from "lib/utils";
@@ -47,7 +47,10 @@ export const ValidatorBadge = ({
             alt={validator.moniker}
             fallbackSrc={`https://ui-avatars.com/api/?name=${removeSpecialChars(
               validator.moniker ?? ""
-            )}&background=9793F3&color=fff`}
+            )}&background=${CURR_THEME.colors.secondary.main.replace(
+              "#",
+              ""
+            )}&color=fff`}
             borderRadius="50%"
           />
           <ExplorerLink
diff --git a/src/lib/components/icon/CustomIcon.tsx b/src/lib/components/icon/CustomIcon.tsx
index 3c99d7c80..6b9b3a000 100644
--- a/src/lib/components/icon/CustomIcon.tsx
+++ b/src/lib/components/icon/CustomIcon.tsx
@@ -348,6 +348,69 @@ export const ICONS = {
     ),
     viewBox: viewBox101616,
   },
+  celatone: {
+    svg: (
+      <>
+        <path
+          d="M2.86218 16.6807C4.7079 18.5264 7.16161 19.5429 9.7714 19.5429C12.3812 19.5429 14.8349 18.5264 16.6806 16.6807C18.5263 14.835 19.5428 12.3813 19.5428 9.77152C19.5428 7.16173 18.5263 4.70802 16.6806 2.8623L14.3775 5.16538C15.5583 6.34609 16.2884 7.97466 16.2884 9.77152C16.2884 11.5127 15.6098 13.1494 14.3789 14.3804C13.148 15.6113 11.5113 16.2899 9.77004 16.2899C7.97318 16.2899 6.34325 15.5584 5.1639 14.379L2.86218 16.6807Z"
+          fill="url(#paint0_linear_3494_381196)"
+        />
+        <path
+          d="M16.6806 2.86221C14.8349 1.0165 12.3812 0 9.77143 0C7.16164 0 4.70793 1.0165 2.86221 2.86221C1.0165 4.70793 0 7.16164 0 9.77143C0 12.3812 1.0165 14.8349 2.86221 16.6806L5.16529 14.3776C3.98457 13.1969 3.25443 11.5683 3.25443 9.77143C3.25443 8.03021 3.933 6.3935 5.16393 5.16257C6.39486 3.93164 8.03157 3.25307 9.77279 3.25307C11.5696 3.25307 13.1996 3.98457 14.3789 5.16393L16.6806 2.86221Z"
+          fill="#524BEB"
+        />
+        <path
+          d="M4.56711 16.0838C5.20311 15.4478 5.47078 14.6843 5.16497 14.3785C4.85916 14.0727 4.09568 14.3404 3.45968 14.9764C2.82368 15.6124 2.55601 16.3758 2.86182 16.6816C3.16763 16.9875 3.93111 16.7198 4.56711 16.0838Z"
+          fill="#5942F3"
+        />
+        <path
+          d="M16.0824 4.56889C16.7184 3.9329 16.986 3.16941 16.6802 2.8636C16.3744 2.5578 15.6109 2.82547 14.9749 3.46146C14.3389 4.09746 14.0713 4.86094 14.3771 5.16675C14.6829 5.47256 15.4464 5.20489 16.0824 4.56889Z"
+          fill="#5942F3"
+        />
+        <path
+          d="M6.31482 13.228C8.22025 15.1334 11.3213 15.1334 13.2281 13.228C15.1335 11.3226 15.1335 8.22148 13.2281 6.3147L10.9237 8.6232C11.5575 9.25698 11.5575 10.2884 10.9237 10.9222C10.2899 11.556 9.25846 11.556 8.62468 10.9222L6.31618 13.2266L6.31482 13.228Z"
+          fill="#524BEB"
+        />
+        <path
+          d="M8.61926 10.9195C7.98547 10.2857 7.98547 9.25425 8.61926 8.62046C9.25304 7.98668 10.2845 7.98668 10.9183 8.62046L13.2268 6.31603C11.3213 4.41061 8.22026 4.41061 6.31347 6.31603C4.40804 8.22146 4.40804 11.3225 6.31347 13.2293L8.6179 10.9208L8.61926 10.9195Z"
+          fill="url(#paint1_linear_3494_381196)"
+        />
+        <path
+          d="M12.6285 8.02104C13.2645 7.38505 13.5322 6.62156 13.2264 6.31575C12.9206 6.00994 12.1571 6.27761 11.5211 6.91361C10.8851 7.54961 10.6174 8.31309 10.9232 8.6189C11.229 8.92471 11.9925 8.65704 12.6285 8.02104Z"
+          fill="#5942F3"
+        />
+        <path
+          d="M8.0206 12.6304C8.6566 11.9944 8.92427 11.2309 8.61846 10.9251C8.31265 10.6193 7.54917 10.887 6.91317 11.523C6.27717 12.159 6.0095 12.9225 6.31531 13.2283C6.62112 13.5341 7.3846 13.2664 8.0206 12.6304Z"
+          fill="#5942F3"
+        />
+        <defs>
+          <linearGradient
+            id="paint0_linear_3494_381196"
+            x1="6.31579"
+            y1="20.1348"
+            x2="20.1347"
+            y2="6.31592"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#B1C618" />
+            <stop offset="1" stopColor="#DDEF7B" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_3494_381196"
+            x1="4.8844"
+            y1="9.05746"
+            x2="13.2268"
+            y2="9.05746"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#AAC700" />
+            <stop offset="1" stopColor="#D7F067" />
+          </linearGradient>
+        </defs>
+      </>
+    ),
+    viewBox: "0 0 20 20",
+  },
   check: {
     svg: (
       <path
@@ -1041,6 +1104,26 @@ export const ICONS = {
     ),
     viewBox: "0 0  16 16",
   },
+  "reddit-solid": {
+    svg: (
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.0861 6.95191C11.2905 6.74747 11.5687 6.61679 11.8849 6.61679C13.0504 6.61679 13.4383 8.17859 12.3865 8.71815C12.4329 8.88466 12.4519 9.07014 12.4519 9.24718C12.4519 11.0134 10.4622 12.4445 8.00886 12.4445C5.56605 12.4445 3.57639 11.0134 3.57639 9.24718C3.57639 9.07014 3.59325 8.89309 3.63119 8.72658C2.55838 8.18912 2.94198 6.61679 4.11385 6.61679C4.43001 6.61679 4.71876 6.74747 4.9232 6.96034C5.67776 6.43974 6.68102 6.10462 7.79598 6.05825L8.43672 3.15808C8.46412 3.0548 8.56529 2.98103 8.66856 3.00843L10.7214 3.46369C10.8606 3.19601 11.1409 3 11.4655 3C11.9313 3 12.3022 3.38149 12.3022 3.83675C12.3022 4.29201 11.9292 4.6735 11.4655 4.6735C11.0102 4.6735 10.6393 4.30255 10.6393 3.84729L8.78027 3.42997L8.19644 6.06036C9.31984 6.09619 10.3336 6.43131 11.0861 6.95191ZM6.16885 8.00154C5.70305 8.00154 5.3321 8.3746 5.3321 8.83829C5.3321 9.29355 5.70516 9.66661 6.16885 9.66451C6.62411 9.66451 6.99506 9.29355 6.99506 8.83829C6.99506 8.37249 6.62411 8.00154 6.16885 8.00154ZM6.14988 10.809C6.91708 11.5762 9.08167 11.5762 9.84887 10.809C9.93318 10.7352 9.93318 10.6045 9.84676 10.5202C9.77299 10.4465 9.64231 10.4465 9.56855 10.5202C8.95732 11.1315 7.01403 11.1209 6.42809 10.5202C6.35432 10.4465 6.22365 10.4465 6.14988 10.5202C6.06557 10.6045 6.06557 10.7352 6.14988 10.809ZM9.00579 8.8404C9.00579 9.29566 9.37675 9.66661 9.83201 9.66661C10.2957 9.66661 10.6666 9.29355 10.6688 8.8404C10.6688 8.3746 10.2957 8.00365 9.83201 8.00365C9.37675 8.00365 9.00579 8.37671 9.00579 8.8404Z"
+        fill="currentColor"
+      />
+    ),
+    viewBox: viewboxDefault,
+  },
+  reddit: {
+    svg: (
+      <path
+        d="M13.4388 6.06351C12.9962 6.06351 12.6067 6.24645 12.3205 6.53268C11.2671 5.80384 9.84777 5.33467 8.27502 5.28451L9.09238 1.60196L11.695 2.18621C11.695 2.82357 12.2143 3.3429 12.8516 3.3429C13.5008 3.3429 14.0231 2.80882 14.0231 2.17145C14.0231 1.53409 13.5038 1 12.8516 1C12.3972 1 12.0048 1.27442 11.81 1.64917L8.93599 1.0118C8.7914 0.973443 8.64976 1.07672 8.6114 1.22131L7.71437 5.28155C6.15342 5.34647 4.74886 5.81564 3.69249 6.54448C3.40626 6.24645 3.00201 6.06351 2.55939 6.06351C0.918771 6.06351 0.381732 8.26477 1.88367 9.01722C1.83056 9.25033 1.80695 9.49819 1.80695 9.74606C1.80695 12.2188 4.59247 14.2224 8.0124 14.2224C11.4471 14.2224 14.2326 12.2188 14.2326 9.74606C14.2326 9.49819 14.206 9.23852 14.1411 9.00541C15.6136 8.25002 15.0706 6.06351 13.4388 6.06351ZM4.26493 9.17361C4.26493 8.52444 4.78427 8.00216 5.43639 8.00216C6.07375 8.00216 6.59308 8.52149 6.59308 9.17361C6.59308 9.81097 6.07375 10.3303 5.43639 10.3303C4.78722 10.3333 4.26493 9.81097 4.26493 9.17361ZM10.5884 11.9326C9.51434 13.0066 6.48391 13.0066 5.40983 11.9326C5.2918 11.8293 5.2918 11.6463 5.40983 11.5283C5.51311 11.425 5.69605 11.425 5.79933 11.5283C6.61964 12.3693 9.34024 12.384 10.196 11.5283C10.2992 11.425 10.4822 11.425 10.5855 11.5283C10.7064 11.6463 10.7064 11.8293 10.5884 11.9326ZM10.5648 10.3333C9.92744 10.3333 9.40811 9.81392 9.40811 9.17656C9.40811 8.52739 9.92744 8.00511 10.5648 8.00511C11.214 8.00511 11.7363 8.52444 11.7363 9.17656C11.7333 9.81097 11.214 10.3333 10.5648 10.3333Z"
+        fill="currentColor"
+      />
+    ),
+    viewBox: viewboxDefault,
+  },
   redo: {
     svg: (
       <path
diff --git a/src/lib/components/json/JsonEditor.tsx b/src/lib/components/json/JsonEditor.tsx
index 43c3f98a0..cb3c3786d 100644
--- a/src/lib/components/json/JsonEditor.tsx
+++ b/src/lib/components/json/JsonEditor.tsx
@@ -4,6 +4,10 @@ import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/ace";
 import "ace-builds/src-noconflict/mode-json";
 import "ace-builds/src-noconflict/theme-monokai";
+import "ace-builds/src-noconflict/theme-one_dark";
+import "ace-builds/src-noconflict/theme-pastel_on_dark";
+
+import { CURR_THEME } from "env";
 
 interface JsonEditorProps {
   value: string;
@@ -26,7 +30,7 @@ const JsonEditor = ({
     <AceEditor
       ref={editorRef}
       mode="json"
-      theme="monokai"
+      theme={CURR_THEME.jsonTheme}
       fontSize="14px"
       readOnly={readOnly}
       style={{
diff --git a/src/lib/components/modal/CodeSnippet.tsx b/src/lib/components/modal/CodeSnippet.tsx
index 34a4e8e8b..22248fb1d 100644
--- a/src/lib/components/modal/CodeSnippet.tsx
+++ b/src/lib/components/modal/CodeSnippet.tsx
@@ -19,6 +19,7 @@ import AceEditor from "react-ace";
 
 import { CopyButton } from "../copy";
 import { CustomIcon } from "../icon";
+import { CURR_THEME } from "env";
 import { useLCDEndpoint } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
@@ -29,6 +30,8 @@ import "ace-builds/src-noconflict/mode-sh";
 import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/theme-monokai";
+import "ace-builds/src-noconflict/theme-one_dark";
+import "ace-builds/src-noconflict/theme-pastel_on_dark";
 
 interface CodeSnippetProps {
   contractAddress: ContractAddr;
@@ -233,7 +236,7 @@ execute();
                       <AceEditor
                         readOnly
                         mode={item.mode}
-                        theme="monokai"
+                        theme={CURR_THEME.jsonTheme}
                         fontSize="14px"
                         style={{
                           width: "100%",
diff --git a/src/lib/components/state/StateImage.tsx b/src/lib/components/state/StateImage.tsx
index 62702317f..182f79d78 100644
--- a/src/lib/components/state/StateImage.tsx
+++ b/src/lib/components/state/StateImage.tsx
@@ -1,11 +1,13 @@
 import { Image } from "@chakra-ui/react";
 
+import { CURR_THEME } from "env";
+
 export type ImageVariant = "empty" | "not-found" | "disconnected";
 
 const imageSourceMap: Record<ImageVariant, string> = {
-  empty: "https://assets.alleslabs.dev/illustration/search-empty.svg",
-  "not-found": "https://assets.alleslabs.dev/illustration/search-not-found.svg",
-  disconnected: "https://assets.alleslabs.dev/illustration/disconnected.svg",
+  empty: CURR_THEME.illustration.searchEmpty,
+  "not-found": CURR_THEME.illustration.searchNotFound,
+  disconnected: CURR_THEME.illustration.disconnected,
 };
 
 interface StateImageProps {
diff --git a/src/lib/icon/NAToken.tsx b/src/lib/icon/NAToken.tsx
index d4d6f951d..7c688f93f 100644
--- a/src/lib/icon/NAToken.tsx
+++ b/src/lib/icon/NAToken.tsx
@@ -1,3 +1,5 @@
+import { CURR_THEME } from "env";
+
 interface NATokenProps {
   size?: string;
 }
@@ -12,11 +14,11 @@ export const NAToken = ({ size = "20" }: NATokenProps) => (
     <g clipPath="url(#clip0_45_8268)">
       <path
         d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z"
-        fill="#3E38B0"
+        fill={CURR_THEME.colors.primary.dark}
       />
       <path
         d="M18.78 23.924C18.78 23.26 18.82 22.692 18.9 22.22C18.988 21.748 19.152 21.292 19.392 20.852C19.584 20.484 19.804 20.176 20.052 19.928C20.308 19.672 20.648 19.384 21.072 19.064C21.36 18.848 21.596 18.66 21.78 18.5C21.972 18.34 22.16 18.16 22.344 17.96C22.64 17.624 22.844 17.28 22.956 16.928C23.076 16.568 23.136 16.164 23.136 15.716C23.136 14.98 22.956 14.404 22.596 13.988C22.084 13.356 21.28 13.04 20.184 13.04C19.728 13.04 19.308 13.104 18.924 13.232C18.54 13.352 18.224 13.536 17.976 13.784C17.72 14.008 17.528 14.288 17.4 14.624C17.28 14.952 17.224 15.312 17.232 15.704H15C15.048 14.992 15.216 14.324 15.504 13.7C15.792 13.076 16.184 12.564 16.68 12.164C17.136 11.78 17.664 11.492 18.264 11.3C18.872 11.1 19.496 11 20.136 11C20.992 11 21.78 11.132 22.5 11.396C23.22 11.66 23.816 12.064 24.288 12.608C24.656 13.016 24.932 13.484 25.116 14.012C25.308 14.54 25.404 15.096 25.404 15.68C25.404 16.368 25.264 17.024 24.984 17.648C24.712 18.264 24.328 18.828 23.832 19.34C23.64 19.548 23.424 19.752 23.184 19.952C22.952 20.144 22.816 20.256 22.776 20.288C22.44 20.56 22.164 20.8 21.948 21.008C21.74 21.208 21.572 21.42 21.444 21.644C21.276 21.94 21.168 22.22 21.12 22.484C21.072 22.74 21.048 23.084 21.048 23.516V23.924H18.78ZM19.92 28.796C19.528 28.796 19.196 28.664 18.924 28.4C18.66 28.128 18.528 27.796 18.528 27.404C18.528 27.012 18.66 26.684 18.924 26.42C19.196 26.148 19.528 26.012 19.92 26.012C20.32 26.012 20.652 26.148 20.916 26.42C21.188 26.684 21.324 27.012 21.324 27.404C21.324 27.796 21.188 28.128 20.916 28.4C20.652 28.664 20.32 28.796 19.92 28.796Z"
-        fill="#F7F2FE"
+        fill={CURR_THEME.colors.gray[100]}
       />
     </g>
     <defs>
diff --git a/src/lib/layout/Footer.tsx b/src/lib/layout/Footer.tsx
index d9cb039f2..7321b2aac 100644
--- a/src/lib/layout/Footer.tsx
+++ b/src/lib/layout/Footer.tsx
@@ -1,12 +1,13 @@
-import { Flex, Text, Button } from "@chakra-ui/react";
+import { Flex, Text, Button, Image } from "@chakra-ui/react";
 import Link from "next/link";
 
+import { CURR_THEME } from "env";
 import { CustomIcon } from "lib/components/icon";
 import type { IconKeys } from "lib/components/icon";
 import { AmpEvent, AmpTrack, AmpTrackCelatone } from "lib/services/amplitude";
 
 interface SocialMenuType {
-  url: string;
+  url: string | undefined;
   icon: IconKeys;
   slug: string;
 }
@@ -34,81 +35,238 @@ const socialMenu: SocialMenuType[] = [
   },
 ];
 
-const Footer = () => (
-  <Flex
-    as="footer"
-    align="center"
-    justifyContent="space-between"
-    px={12}
-    py={4}
-    mx={1}
-  >
-    <Flex direction="row" gap={1} align="center">
-      {socialMenu.map((item) => (
+const themedSocial: SocialMenuType[] = [
+  {
+    url: CURR_THEME.socialMedia?.github,
+    icon: "github",
+    slug: "github",
+  },
+  {
+    url: CURR_THEME.socialMedia?.discord,
+    icon: "discord",
+    slug: "discord",
+  },
+  {
+    url: CURR_THEME.socialMedia?.twitter,
+    icon: "twitter",
+    slug: "twitter",
+  },
+  {
+    url: CURR_THEME.socialMedia?.telegram,
+    icon: "telegram",
+    slug: "telegram",
+  },
+  {
+    url: CURR_THEME.socialMedia?.medium,
+    icon: "medium",
+    slug: "medium",
+  },
+  {
+    url: CURR_THEME.socialMedia?.reddit,
+    icon: "reddit-solid",
+    slug: "reddit",
+  },
+  {
+    url: CURR_THEME.socialMedia?.linkedin,
+    icon: "medium",
+    slug: "linkedin",
+  },
+];
+
+const Footer = () => {
+  const isThemed = CURR_THEME.footer;
+
+  return isThemed ? (
+    <Flex
+      as="footer"
+      align="end"
+      justifyContent="space-between"
+      px={12}
+      py={6}
+      mx={1}
+      background="background.overlay"
+    >
+      <Flex direction="column" gap={2} align="start">
+        <Flex direction="row" gap={1} align="center">
+          <Link
+            href={CURR_THEME.socialMedia?.website ?? ""}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image src={CURR_THEME.footer?.logo} h={8} mr={2} />
+          </Link>
+          {themedSocial.map((item) => (
+            <>
+              {item.url && (
+                <Link
+                  key={`social-${item.slug}`}
+                  href={item.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() => AmpTrackCelatone(item.url ?? "")}
+                >
+                  <Button variant="ghost-gray" size="xs" px={0}>
+                    <CustomIcon name={item.icon} boxSize={5} color="gray.600" />
+                  </Button>
+                </Link>
+              )}
+            </>
+          ))}
+        </Flex>
+        <Text variant="body3" color="gray.400">
+          {CURR_THEME.footer?.description}
+        </Text>
+      </Flex>
+      <Flex direction="row" alignItems="end" minW="60px">
+        <Button
+          variant="ghost-gray"
+          size="xs"
+          sx={{ _hover: { "> div > svg": { opacity: "100" } } }}
+        >
+          <Link
+            href="https://celat.one/"
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={() => AmpTrack(AmpEvent.ALLESLABS)}
+          >
+            <Flex
+              gap={1}
+              align="center"
+              sx={{ _hover: { "> div": { opacity: "100" } } }}
+            >
+              <Flex opacity="0" transition="all .25s ease-in-out">
+                <CustomIcon name="celatone" />
+              </Flex>
+              <Text variant="body3" color="text.dark">
+                Powered by
+              </Text>
+              <Text
+                variant="body3"
+                color="lilac.main"
+                transition="all .25s ease-in-out"
+                _hover={{ color: "lilac.light" }}
+              >
+                Celatone
+              </Text>
+            </Flex>
+          </Link>
+        </Button>
         <Link
-          key={`social-${item.slug}`}
-          href={item.url}
+          href="https://feedback.alleslabs.com"
           target="_blank"
           rel="noopener noreferrer"
-          onClick={() => AmpTrackCelatone(item.url)}
+          onClick={() => AmpTrack(AmpEvent.FEEDBACK)}
         >
-          <Button variant="ghost-gray" size="xs" px={1}>
-            <CustomIcon name={item.icon} boxSize={5} color="gray.600" />
+          <Button variant="ghost-gray" size="xs" pl="1" mr="1">
+            <Flex gap={1} align="center">
+              <CustomIcon name="feedback" color="gray.600" />
+              <Text variant="body3" color="text.dark">
+                Feedback
+              </Text>
+            </Flex>
           </Button>
         </Link>
-      ))}
-      <Link
-        href="https://feedback.alleslabs.com"
-        target="_blank"
-        rel="noopener noreferrer"
-        onClick={() => AmpTrack(AmpEvent.FEEDBACK)}
-      >
-        <Button variant="ghost-gray" size="xs">
-          <Flex gap={1} align="center">
-            <CustomIcon name="feedback" color="gray.600" />
-            <Text variant="body3" color="text.dark">
-              Feedback
-            </Text>
-          </Flex>
-        </Button>
-      </Link>
+        <Flex direction="row" gap={1} align="center">
+          {socialMenu.map((item) => (
+            <>
+              {item.url && (
+                <Link
+                  key={`themed-${item.slug}`}
+                  href={item.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() => AmpTrackCelatone(item.url ?? "")}
+                >
+                  <Button variant="ghost-gray" size="xs" px={0}>
+                    <CustomIcon name={item.icon} boxSize={4} color="gray.600" />
+                  </Button>
+                </Link>
+              )}
+            </>
+          ))}
+        </Flex>
+      </Flex>
     </Flex>
-    <Flex direction="column" alignItems="end" minW="60px">
-      <Button
-        variant="ghost-gray"
-        size="xs"
-        sx={{ _hover: { "> div > svg": { opacity: "100" } } }}
-      >
+  ) : (
+    <Flex
+      as="footer"
+      align="center"
+      justifyContent="space-between"
+      px={12}
+      py={4}
+      mx={1}
+    >
+      <Flex direction="row" gap={1} align="center">
+        {socialMenu.map((item) => (
+          <>
+            {item.url && (
+              <Link
+                key={`social-${item.slug}`}
+                href={item.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() => AmpTrackCelatone(item.url ?? "")}
+              >
+                <Button variant="ghost-gray" size="xs" px={1}>
+                  <CustomIcon name={item.icon} boxSize={5} color="gray.600" />
+                </Button>
+              </Link>
+            )}
+          </>
+        ))}
         <Link
-          href="https://twitter.com/alleslabs"
+          href="https://feedback.alleslabs.com"
           target="_blank"
           rel="noopener noreferrer"
-          onClick={() => AmpTrack(AmpEvent.ALLESLABS)}
+          onClick={() => AmpTrack(AmpEvent.FEEDBACK)}
         >
-          <Flex
-            gap={1}
-            align="center"
-            sx={{ _hover: { "> div": { opacity: "100" } } }}
-          >
-            <Flex opacity="0" transition="all .25s ease-in-out">
-              <CustomIcon name="alles" />
+          <Button variant="ghost-gray" size="xs">
+            <Flex gap={1} align="center">
+              <CustomIcon name="feedback" color="gray.600" />
+              <Text variant="body3" color="text.dark">
+                Feedback
+              </Text>
             </Flex>
-            <Text variant="body3" color="text.dark">
-              Made by
-            </Text>
-            <Text
-              variant="body3"
-              color="secondary.main"
-              transition="all .25s ease-in-out"
-              _hover={{ color: "secondary.light" }}
-            >
-              Alles Labs
-            </Text>
-          </Flex>
+          </Button>
         </Link>
-      </Button>
+      </Flex>
+      <Flex direction="column" alignItems="end" minW="60px">
+        <Button
+          variant="ghost-gray"
+          size="xs"
+          sx={{ _hover: { "> div > svg": { opacity: "100" } } }}
+        >
+          <Link
+            href="https://twitter.com/alleslabs"
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={() => AmpTrack(AmpEvent.ALLESLABS)}
+          >
+            <Flex
+              gap={1}
+              align="center"
+              sx={{ _hover: { "> div": { opacity: "100" } } }}
+            >
+              <Flex opacity="0" transition="all .25s ease-in-out">
+                <CustomIcon name="alles" />
+              </Flex>
+              <Text variant="body3" color="text.dark">
+                Made by
+              </Text>
+              <Text
+                variant="body3"
+                color="secondary.main"
+                transition="all .25s ease-in-out"
+                _hover={{ color: "secondary.light" }}
+              >
+                Alles Labs
+              </Text>
+            </Flex>
+          </Link>
+        </Button>
+      </Flex>
     </Flex>
-  </Flex>
-);
+  );
+};
 
 export default Footer;
diff --git a/src/lib/layout/Header.tsx b/src/lib/layout/Header.tsx
index 4220fef1f..4ef5d4699 100644
--- a/src/lib/layout/Header.tsx
+++ b/src/lib/layout/Header.tsx
@@ -9,6 +9,7 @@ import {
 } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 
+import { CURR_THEME } from "env";
 import { useSelectChain } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import { FaucetBtn } from "lib/components/button";
@@ -36,7 +37,7 @@ const Header = () => {
     >
       <AppLink href="/">
         <Image
-          src="https://assets.alleslabs.dev/branding/logo/logo.svg"
+          src={CURR_THEME.branding.logo}
           alt="Celatone"
           minWidth="152px"
           width="152px"
diff --git a/src/lib/pages/home/components/QuickMenu.tsx b/src/lib/pages/home/components/QuickMenu.tsx
index d00c14e9b..0d4ba1bb3 100644
--- a/src/lib/pages/home/components/QuickMenu.tsx
+++ b/src/lib/pages/home/components/QuickMenu.tsx
@@ -1,5 +1,6 @@
 import { Flex, Heading, Box, Text, SimpleGrid } from "@chakra-ui/react";
 
+import { CURR_THEME } from "env";
 import { AppLink } from "lib/components/AppLink";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { CustomIcon } from "lib/components/icon";
@@ -59,7 +60,7 @@ export const QuickMenu = () => (
     <Flex gap={4}>
       <AppLink href="/deploy" style={{ width: "55%" }}>
         <Flex
-          bgGradient="linear(to-tr, primary.main, primary.light)"
+          bgGradient={CURR_THEME.colors.gradient?.main}
           _hover={{ opacity: "85%" }}
           style={cardProps}
           transition="all .25s ease-in-out"
diff --git a/src/lib/pages/not-found/index.tsx b/src/lib/pages/not-found/index.tsx
index 314aba27a..54ff364b1 100644
--- a/src/lib/pages/not-found/index.tsx
+++ b/src/lib/pages/not-found/index.tsx
@@ -2,6 +2,7 @@ import { Flex, Heading, Text, Image } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
+import { CURR_THEME } from "env";
 import { BackButton } from "lib/components/button";
 import PageContainer from "lib/components/PageContainer";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
@@ -26,7 +27,7 @@ const NotFoundPage = () => {
         mt={6}
       >
         <Image
-          src="https://assets.alleslabs.dev/illustration/404.svg"
+          src={CURR_THEME.illustration.error}
           alt="page not found"
           width="404px"
         />
diff --git a/src/lib/styles/theme/colors.ts b/src/lib/styles/theme/colors.ts
index 62415d67d..53ec62edb 100644
--- a/src/lib/styles/theme/colors.ts
+++ b/src/lib/styles/theme/colors.ts
@@ -1,87 +1,3 @@
-type BasicColor = Record<
-  string,
-  Partial<{
-    main: string;
-    light: string;
-    dark: string;
-    lighter: string;
-    darker: string;
-    disabled: string;
-    background: string;
-    overlay: string;
-    100: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-  }>
->;
+import { CURR_THEME } from "env";
 
-/** extend additional color here */
-const extendedColors: BasicColor = {
-  error: {
-    main: "#FF666E",
-    light: "#FF8086",
-    dark: "#b43e44",
-    background: "#4C1A1D",
-  },
-  warning: {
-    main: "#FFBB33",
-    light: "#FFCC66",
-    dark: "#CC8800",
-    background: "#523600",
-  },
-  success: {
-    main: "#42BEA6",
-    light: "#67CBB7",
-    dark: "#207966",
-    background: "#102E28",
-  },
-  background: {
-    main: "#111117",
-    overlay: "rgba(17, 17, 23, 0.7)",
-  },
-  text: {
-    main: "#F7F2FE",
-    dark: "#ADADC2",
-    disabled: "#8A8AA5",
-  },
-  primary: {
-    main: "#5942F3",
-    light: "#9793F3",
-    lighter: "#DCDBFB",
-    dark: "#3E38B0",
-    darker: "#292676",
-    background: "#181733",
-  },
-  secondary: {
-    main: "#D8BEFC",
-    light: "#E8D8FD",
-    dark: "#A28FBD",
-    darker: "#6C5F7E",
-    background: "#36303F",
-  },
-  accent: {
-    main: "#C6E141",
-    light: "#DDED8D",
-    lighter: "#E8F3B3",
-    dark: "#95A931",
-    darker: "#637121",
-    background: "#3D470B",
-  },
-  gray: {
-    100: "#F7F2FE",
-    400: "#ADADC2",
-    500: "#8A8AA5",
-    600: "#68688A",
-    700: "#343445",
-    800: "#272734",
-    900: "#1A1A22",
-  },
-};
-
-export const colors = {
-  ...extendedColors,
-};
+export const colors = { ...CURR_THEME.colors };
diff --git a/src/lib/styles/theme/fonts.ts b/src/lib/styles/theme/fonts.ts
index 781c10925..e4ba924b4 100644
--- a/src/lib/styles/theme/fonts.ts
+++ b/src/lib/styles/theme/fonts.ts
@@ -1,6 +1,8 @@
 import type { DeepPartial, Theme } from "@chakra-ui/react";
 
+import { CURR_THEME } from "env";
+
 export const fonts: DeepPartial<Theme["fonts"]> = {
-  body: "Space Grotesk, sans-serif",
-  heading: "Poppins, serif",
+  body: CURR_THEME.fonts.body.name,
+  heading: CURR_THEME.fonts.heading.name,
 };
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index d8ddcef7d..a20167b4c 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -3,6 +3,7 @@ import { ColorModeScript } from "@chakra-ui/react";
 import type { DocumentContext } from "next/document";
 import Document, { Html, Head, Main, NextScript } from "next/document";
 
+import { CURR_THEME } from "env";
 import Meta from "lib/components/Meta";
 import customTheme from "lib/styles/theme";
 
@@ -15,14 +16,9 @@ class MyDocument extends Document {
     return (
       <Html lang="en">
         <Head>
-          <link
-            href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap"
-            rel="stylesheet"
-          />
-          <link
-            href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap"
-            rel="stylesheet"
-          />
+          <link href={CURR_THEME.fonts.body.url} rel="stylesheet" />
+          <link href={CURR_THEME.fonts.heading.url} rel="stylesheet" />
+          <link rel="shortcut icon" href={CURR_THEME.branding.favicon} />
           <Meta />
         </Head>
         <body>

From b39f49ba637813b1aa6587e56863e1c537adf884 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 24 May 2023 19:12:07 +0700
Subject: [PATCH 151/354] fix: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 582eca0b5..765c2fce5 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
 
 ### Improvements
 
+- [#357](https://github.com/alleslabs/celatone-frontend/pull/357) Abstract color, typeface, images to theme config
 - [#352](https://github.com/alleslabs/celatone-frontend/pull/352) Refactor/Abstract styling (color system, font weight and more)
 - [#347](https://github.com/alleslabs/celatone-frontend/pull/347) Move tx table accordion arrow to the front and refactor block txs table
 

From 035aa2966bee19edc58df63df0576f22567618dc Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 25 May 2023 14:23:36 +0700
Subject: [PATCH 152/354] feat: add amp pool detail

---
 CHANGELOG.md                                  |  1 +
 src/lib/components/ValidatorBadge.tsx         |  3 ++
 src/lib/components/action-msg/MsgToken.tsx    |  3 ++
 .../pool-details/JsonModalButton.tsx          |  6 ++-
 .../components/pool-details/PoolAssets.tsx    |  6 +++
 .../pool-details/PoolRelatedTxs.tsx           | 36 +++++++++++++--
 .../pool-details/header/PoolInfo.tsx          |  4 +-
 .../components/pool-details/header/index.tsx  |  9 +++-
 .../tables/pool-assets/PoolAssetsTableRow.tsx |  1 +
 .../tables/pool-txs/PoolTxsMsg.tsx            | 24 +++++++++-
 .../pool-txs/messages/PoolOtherMsgs.tsx       |  2 +-
 .../messages/components/AssetCard.tsx         |  6 +--
 .../messages/components/PoolAssetCard.tsx     |  3 ++
 .../messages/components/PoolLogoLink.tsx      | 10 +++-
 .../tables/pool-txs/messages/index.tsx        | 46 +++++++++++++++++--
 .../messages/lockup/MsgLockTokensAction.tsx   |  5 +-
 .../messages/lockup/MsgLockTokensDetail.tsx   |  5 ++
 .../messages/lp/MsgExitPoolAction.tsx         |  6 ++-
 .../messages/lp/MsgExitPoolDetail.tsx         |  5 ++
 .../lp/MsgExitSwapExternAmountOutAction.tsx   |  6 ++-
 .../lp/MsgExitSwapExternAmountOutDetail.tsx   |  5 ++
 .../lp/MsgExitSwapShareAmountInAction.tsx     |  6 ++-
 .../lp/MsgExitSwapShareAmountInDetail.tsx     |  5 ++
 .../messages/lp/MsgJoinPoolAction.tsx         |  6 ++-
 .../messages/lp/MsgJoinPoolDetail.tsx         |  5 ++
 .../lp/MsgJoinSwapExternAmountInAction.tsx    |  6 ++-
 .../lp/MsgJoinSwapExternAmountInDetail.tsx    |  5 ++
 .../lp/MsgJoinSwapShareAmountOutAction.tsx    |  6 ++-
 .../lp/MsgJoinSwapShareAmountOutDetail.tsx    |  5 ++
 .../messages/lp/components/PoolAssetsGrid.tsx |  3 ++
 .../messages/lp/components/PoolLPCard.tsx     |  3 ++
 .../MsgLockAndSuperfluidDelegateAction.tsx    |  5 +-
 .../MsgLockAndSuperfluidDelegateDetail.tsx    | 11 +++--
 .../swap/MsgSwapExactAmountInAction.tsx       |  4 ++
 .../swap/MsgSwapExactAmountInDetail.tsx       |  5 ++
 .../swap/MsgSwapExactAmountOutAction.tsx      |  4 ++
 .../swap/MsgSwapExactAmountOutDetail.tsx      |  5 ++
 .../messages/swap/components/PoolRoute.tsx    |  9 +++-
 .../messages/swap/components/PoolSwap.tsx     |  4 ++
 src/lib/pages/pools/poolId.tsx                |  6 +++
 src/lib/services/amplitude.tsx                |  8 +++-
 41 files changed, 269 insertions(+), 34 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c7d8136ad..ea74a15c1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#358](https://github.com/alleslabs/celatone-frontend/pull/355) Add Amp for Pool Detail page
 - [#294](https://github.com/alleslabs/celatone-frontend/pull/294) Add Pool related txs table
 - [#296](https://github.com/alleslabs/celatone-frontend/pull/296) Add pool header and pool assets section for pool details page
 - [#295](https://github.com/alleslabs/celatone-frontend/pull/295) Add expand/collapse all for unsupported pool list
diff --git a/src/lib/components/ValidatorBadge.tsx b/src/lib/components/ValidatorBadge.tsx
index c2463cb5e..b1a96ef07 100644
--- a/src/lib/components/ValidatorBadge.tsx
+++ b/src/lib/components/ValidatorBadge.tsx
@@ -10,6 +10,7 @@ import { removeSpecialChars } from "lib/utils";
 interface ValidatorBadgeProps {
   validator: ValidatorInfo | null;
   badgeSize?: ImageProps["boxSize"];
+  ampCopierSection?: string;
 }
 
 const FallbackRender = ({
@@ -33,6 +34,7 @@ const FallbackRender = ({
 export const ValidatorBadge = ({
   validator,
   badgeSize = 10,
+  ampCopierSection,
 }: ValidatorBadgeProps) => {
   const { currentChainName } = useWallet();
   return (
@@ -56,6 +58,7 @@ export const ValidatorBadge = ({
             type="validator_address"
             textFormat="ellipsis"
             showCopyOnHover
+            ampCopierSection={ampCopierSection}
           />
         </>
       ) : (
diff --git a/src/lib/components/action-msg/MsgToken.tsx b/src/lib/components/action-msg/MsgToken.tsx
index 0b96ced00..5fdc446c7 100644
--- a/src/lib/components/action-msg/MsgToken.tsx
+++ b/src/lib/components/action-msg/MsgToken.tsx
@@ -10,6 +10,7 @@ interface MsgTokenProps {
   symbol?: string;
   precision?: number;
   fontWeight?: number;
+  ampCopierSection?: string;
 }
 
 export const MsgToken = ({
@@ -17,6 +18,7 @@ export const MsgToken = ({
   symbol,
   precision,
   fontWeight = 600,
+  ampCopierSection,
 }: MsgTokenProps) => (
   <Flex role="group" align="center" gap={1}>
     <Text fontWeight={fontWeight}>
@@ -37,6 +39,7 @@ export const MsgToken = ({
       copyLabel="Token ID Copied!"
       display="none"
       ml="4px"
+      amptrackSection={ampCopierSection}
     />
   </Flex>
 );
diff --git a/src/lib/pages/pools/components/pool-details/JsonModalButton.tsx b/src/lib/pages/pools/components/pool-details/JsonModalButton.tsx
index c95f10810..8a40b689b 100644
--- a/src/lib/pages/pools/components/pool-details/JsonModalButton.tsx
+++ b/src/lib/pages/pools/components/pool-details/JsonModalButton.tsx
@@ -13,6 +13,7 @@ import {
 
 import { CustomIcon } from "lib/components/icon";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
+import { AmpTrackViewJson } from "lib/services/amplitude";
 import { jsonPrettify } from "lib/utils";
 
 interface JsonModalButtonProps {
@@ -41,7 +42,10 @@ export const JsonModalButton = ({
             m={0}
           />
         }
-        onClick={onOpen}
+        onClick={() => {
+          AmpTrackViewJson(`pool_page_(${modalHeader})`);
+          onOpen();
+        }}
       >
         View JSON
       </Button>
diff --git a/src/lib/pages/pools/components/pool-details/PoolAssets.tsx b/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
index d99c6cfb3..204ca2a15 100644
--- a/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
+++ b/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
@@ -4,6 +4,7 @@ import big from "big.js";
 import Link from "next/link";
 
 import { CustomIcon } from "lib/components/icon";
+import { AmpTrackWebsite } from "lib/services/amplitude";
 import type { PoolDetail, USD } from "lib/types";
 import { formatPrice } from "lib/utils";
 
@@ -47,6 +48,11 @@ export const PoolAssets = ({ pool }: PoolAssetsProps) => {
           href="https://docs.osmosis.zone/osmosis-core/modules/gamm#weights"
           target="_blank"
           rel="noopener noreferrer"
+          onClick={() =>
+            AmpTrackWebsite(
+              "https://docs.osmosis.zone/osmosis-core/modules/gamm#weights"
+            )
+          }
         >
           <Flex gap="2px" alignItems="center">
             <Text color="lilac.main" variant="body2">
diff --git a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
index cfc315b5e..d06b62ba7 100644
--- a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
+++ b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
@@ -10,6 +10,7 @@ import {
 
 import { usePoolTxsCount } from "../../data";
 import { CustomTab } from "lib/components/CustomTab";
+import { AmpTrackUseTab } from "lib/services/amplitude";
 import type { PoolDetail } from "lib/types";
 
 import { PoolRelatedTxsTable } from "./tables/pool-txs";
@@ -45,12 +46,37 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
           borderBottom="1px"
           borderColor="pebble.800"
         >
-          <CustomTab count={countDisplayAllTxs}>All</CustomTab>
-          <CustomTab count={countDisplaySwapTxs}>Swap</CustomTab>
-          <CustomTab count={countDisplayLpTxs}>LP</CustomTab>
-          <CustomTab count={countDisplayBondTxs}>Bonding</CustomTab>
+          <CustomTab
+            count={countDisplayAllTxs}
+            onClick={() => AmpTrackUseTab("All")}
+          >
+            All
+          </CustomTab>
+          <CustomTab
+            count={countDisplaySwapTxs}
+            onClick={() => AmpTrackUseTab("Swap")}
+          >
+            Swap
+          </CustomTab>
+          <CustomTab
+            count={countDisplayLpTxs}
+            onClick={() => AmpTrackUseTab("LP")}
+          >
+            LP
+          </CustomTab>
+          <CustomTab
+            count={countDisplayBondTxs}
+            onClick={() => AmpTrackUseTab("Bonding")}
+          >
+            Bonding
+          </CustomTab>
           {pool.isSuperfluid && (
-            <CustomTab count={countDisplaySuperfluidTxs}>Superfluid</CustomTab>
+            <CustomTab
+              count={countDisplaySuperfluidTxs}
+              onClick={() => AmpTrackUseTab("Superfluid")}
+            >
+              Superfluid
+            </CustomTab>
           )}
         </TabList>
         <TabPanels>
diff --git a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
index 5f7f63a91..f93530360 100644
--- a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
@@ -29,10 +29,10 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
       <LabelText label="Pool ID">
         <CopyLink
           value={pool.id.toString()}
-          amptrackSection="pool_details_id"
           type="pool_id"
           showCopyOnHover
           w="50px"
+          amptrackSection="pool_info"
         />
       </LabelText>
       <LabelText label="Created Height">
@@ -41,6 +41,7 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
           value={(pool.blockHeight ?? "N/A").toString()}
           showCopyOnHover
           isReadOnly={!pool.blockHeight}
+          ampCopierSection="pool_info"
         />
       </LabelText>
       <LabelText label="Pool Created by">
@@ -51,6 +52,7 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
           showCopyOnHover
           textFormat="truncate"
           w="140px"
+          ampCopierSection="pool_info"
         />
       </LabelText>
       <LabelText
diff --git a/src/lib/pages/pools/components/pool-details/header/index.tsx b/src/lib/pages/pools/components/pool-details/header/index.tsx
index 05bbfed58..6c7e67568 100644
--- a/src/lib/pages/pools/components/pool-details/header/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/index.tsx
@@ -6,6 +6,7 @@ import { getPoolUrl } from "lib/app-fns/explorer";
 import { useLCDEndpoint } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { openNewTab } from "lib/hooks";
+import { AmpTrackViewJson, AmpTrackWebsite } from "lib/services/amplitude";
 import type { PoolDetail } from "lib/types";
 
 import { PoolInfo } from "./PoolInfo";
@@ -18,10 +19,14 @@ export const PoolTopSection = ({ pool }: PoolTopSectionProps) => {
   const { currentChainName } = useWallet();
   const lcdEndpoint = useLCDEndpoint();
 
-  const openPoolLcd = () =>
+  const openPoolLcd = () => {
+    AmpTrackViewJson("pool_page_pool_lcd");
     openNewTab(`${lcdEndpoint}/osmosis/gamm/v1beta1/pools/${pool.id}`);
-  const openOsmosisPool = () =>
+  };
+  const openOsmosisPool = () => {
+    AmpTrackWebsite(`${getPoolUrl(currentChainName)}/${pool.id}`);
     openNewTab(`${getPoolUrl(currentChainName)}/${pool.id}`);
+  };
   return (
     <>
       <Flex justifyContent="space-between" align="center" w="full">
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
index 3ddb029bc..3813a67f6 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
@@ -69,6 +69,7 @@ export const PoolAssetsTableRow = ({
                   value={token.denom}
                   copyLabel="Token ID Copied!"
                   ml={0}
+                  amptrackSection="pool_assets"
                 />
               </Flex>
             </Flex>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
index 1c41da4be..a1d7046fb 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -4,6 +4,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { TableNoBorderRow } from "lib/components/table";
 import { Tooltip } from "lib/components/Tooltip";
+import { AmpTrackExpand } from "lib/services/amplitude";
 import type { AssetInfosOpt } from "lib/services/assetService";
 import type { Message, Option, PoolDetail, Transaction } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
@@ -54,9 +55,18 @@ export const PoolTxsMsg = ({
       <Grid
         className="copier-wrapper"
         templateColumns={templateColumns}
-        onClick={onToggle}
         transition="all .25s ease-in-out"
         cursor="pointer"
+        onClick={() => {
+          if (message) {
+            AmpTrackExpand(
+              !isOpen ? "expand" : "collapse",
+              "pool_tx_msg",
+              `pool_txs-${message.type.split(".")[-1]}`
+            );
+          }
+          onToggle();
+        }}
       >
         <TableNoBorderRow pl={2}>
           {transaction.success && message && (
@@ -75,6 +85,7 @@ export const PoolTxsMsg = ({
                 value={transaction.hash.toLocaleUpperCase()}
                 type="tx_hash"
                 showCopyOnHover
+                ampCopierSection={`pool_txs-${transaction.messages.length}-tx_hash`}
               />
               {transaction.messages.length > 1 && (
                 <Tooltip label="There are at least one messages within this transaction that related to this pool.">
@@ -96,7 +107,12 @@ export const PoolTxsMsg = ({
         </TableNoBorderRow>
         <TableNoBorderRow>
           {message ? (
-            <PoolMsgAction msg={message} pool={pool} assetInfos={assetInfos} />
+            <PoolMsgAction
+              msg={message}
+              pool={pool}
+              assetInfos={assetInfos}
+              ampCopierSection={`pool_txs-${message.type.split(".")[-1]}-row`}
+            />
           ) : (
             <PoolOtherMsgs otherMsgs={otherMsgs} isIbc={transaction.isIbc} />
           )}
@@ -107,6 +123,7 @@ export const PoolTxsMsg = ({
             value={transaction.sender}
             type="user_address"
             showCopyOnHover
+            ampCopierSection={`pool_txs-${transaction.messages.length}-sender`}
           />
         </TableNoBorderRow>
 
@@ -139,6 +156,9 @@ export const PoolTxsMsg = ({
               pool={pool}
               assetInfos={assetInfos}
               isOpened={isOpen}
+              ampCopierSection={`pool_txs-${
+                message.type.split(".")[-1]
+              }-detail`}
             />
           </TableNoBorderRow>
         </Grid>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
index eb236c773..472c539c5 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/PoolOtherMsgs.tsx
@@ -10,7 +10,7 @@ interface PoolOtherMsgsProps {
 export const PoolOtherMsgs = ({ otherMsgs, isIbc }: PoolOtherMsgsProps) => {
   const typePaths = Object.keys(otherMsgs);
   return (
-    <Flex gap={2} flexWrap="wrap" alignItems="center">
+    <Flex gap={2} flexWrap="wrap" alignContent="center">
       Total
       {typePaths.map((typePath, index) => {
         const type = extractMsgType(typePath);
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx
index cc3412d0d..350b804df 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx
@@ -17,14 +17,14 @@ interface AssetCardProps extends FlexProps {
   amount: string;
   denom: string;
   assetInfo: Option<AssetInfo>;
-  amptrackSection?: string;
+  ampCopierSection?: string;
 }
 
 export const AssetCard = ({
   amount,
   denom,
   assetInfo,
-  amptrackSection,
+  ampCopierSection,
   ...cardProps
 }: AssetCardProps) => {
   const symbol = assetInfo?.symbol ?? denom;
@@ -69,7 +69,7 @@ export const AssetCard = ({
             copyLabel="Token ID Copied!"
             display="none"
             ml="1px"
-            amptrackSection={amptrackSection}
+            amptrackSection={ampCopierSection}
           />
         </Flex>
 
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
index e2f04d780..d2796aeaf 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
@@ -20,6 +20,7 @@ interface PoolAssetCardProps {
   poolAsset: Coin;
   poolAssetInfo: Option<AssetInfo>;
   isOpened: boolean;
+  ampCopierSection?: string;
 }
 
 export const PoolAssetCard = ({
@@ -29,6 +30,7 @@ export const PoolAssetCard = ({
   poolAsset,
   poolAssetInfo,
   isOpened,
+  ampCopierSection,
 }: PoolAssetCardProps) => {
   const { data: poolAssets, isLoading } = usePoolAssetsbyPoolIds(
     [poolId],
@@ -104,6 +106,7 @@ export const PoolAssetCard = ({
             type="pool_id"
             value={poolId.toString()}
             showCopyOnHover
+            ampCopierSection={ampCopierSection}
           />
         </div>
       </Flex>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx
index f1bff98fa..691692aed 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolLogoLink.tsx
@@ -6,9 +6,10 @@ import type { PoolDetail } from "lib/types";
 
 interface PoolLogoLinkProps {
   pool: PoolDetail;
+  ampCopierSection?: string;
 }
 
-export const PoolLogoLink = ({ pool }: PoolLogoLinkProps) => (
+export const PoolLogoLink = ({ pool, ampCopierSection }: PoolLogoLinkProps) => (
   <Flex gap={1}>
     <PoolLogo
       tokens={pool.poolLiquidity}
@@ -16,6 +17,11 @@ export const PoolLogoLink = ({ pool }: PoolLogoLinkProps) => (
       marginLeft={-4}
       minW={0}
     />
-    <ExplorerLink type="pool_id" value={pool.id.toString()} showCopyOnHover />
+    <ExplorerLink
+      type="pool_id"
+      value={pool.id.toString()}
+      showCopyOnHover
+      ampCopierSection={ampCopierSection}
+    />
   </Flex>
 );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx
index 84650d945..421ba9a6f 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/index.tsx
@@ -34,10 +34,12 @@ export const PoolMsgAction = ({
   msg,
   pool,
   assetInfos,
+  ampCopierSection,
 }: {
   msg: Message;
   pool: PoolDetail;
   assetInfos: AssetInfosOpt;
+  ampCopierSection?: string;
 }) => {
   const { type, detail, log } = msg;
   switch (type) {
@@ -45,20 +47,33 @@ export const PoolMsgAction = ({
     case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn": {
       const details = extractTxDetails(type, detail, log);
       return (
-        <MsgSwapExactAmountInAction msg={details} assetInfos={assetInfos} />
+        <MsgSwapExactAmountInAction
+          msg={details}
+          assetInfos={assetInfos}
+          ampCopierSection={ampCopierSection}
+        />
       );
     }
     case "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut":
     case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountOut": {
       const details = extractTxDetails(type, detail, log);
       return (
-        <MsgSwapExactAmountOutAction msg={details} assetInfos={assetInfos} />
+        <MsgSwapExactAmountOutAction
+          msg={details}
+          assetInfos={assetInfos}
+          ampCopierSection={ampCopierSection}
+        />
       );
     }
     case "/osmosis.gamm.v1beta1.MsgJoinPool": {
       const details = extractTxDetails(type, detail, log);
       return (
-        <MsgJoinPoolAction msg={details} pool={pool} assetInfos={assetInfos} />
+        <MsgJoinPoolAction
+          msg={details}
+          pool={pool}
+          assetInfos={assetInfos}
+          ampCopierSection={ampCopierSection}
+        />
       );
     }
     case "/osmosis.gamm.v1beta1.MsgJoinSwapExternAmountIn": {
@@ -68,6 +83,7 @@ export const PoolMsgAction = ({
           msg={details}
           pool={pool}
           assetInfos={assetInfos}
+          ampCopierSection={ampCopierSection}
         />
       );
     }
@@ -78,13 +94,19 @@ export const PoolMsgAction = ({
           msg={details}
           pool={pool}
           assetInfos={assetInfos}
+          ampCopierSection={ampCopierSection}
         />
       );
     }
     case "/osmosis.gamm.v1beta1.MsgExitPool": {
       const details = extractTxDetails(type, detail, log);
       return (
-        <MsgExitPoolAction msg={details} pool={pool} assetInfos={assetInfos} />
+        <MsgExitPoolAction
+          msg={details}
+          pool={pool}
+          assetInfos={assetInfos}
+          ampCopierSection={ampCopierSection}
+        />
       );
     }
     case "/osmosis.gamm.v1beta1.MsgExitSwapShareAmountIn": {
@@ -94,6 +116,7 @@ export const PoolMsgAction = ({
           msg={details}
           pool={pool}
           assetInfos={assetInfos}
+          ampCopierSection={ampCopierSection}
         />
       );
     }
@@ -104,6 +127,7 @@ export const PoolMsgAction = ({
           msg={details}
           pool={pool}
           assetInfos={assetInfos}
+          ampCopierSection={ampCopierSection}
         />
       );
     }
@@ -114,6 +138,7 @@ export const PoolMsgAction = ({
           msg={details}
           pool={pool}
           assetInfos={assetInfos}
+          ampCopierSection={ampCopierSection}
         />
       );
     }
@@ -124,6 +149,7 @@ export const PoolMsgAction = ({
           msg={details}
           pool={pool}
           assetInfos={assetInfos}
+          ampCopierSection={ampCopierSection}
         />
       );
     }
@@ -141,6 +167,7 @@ export const PoolMsgDetail = ({
   pool,
   assetInfos,
   isOpened,
+  ampCopierSection,
 }: {
   txHash: string;
   blockHeight: number;
@@ -149,6 +176,7 @@ export const PoolMsgDetail = ({
   pool: PoolDetail;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
+  ampCopierSection?: string;
 }) => {
   const { type, detail, log } = msg;
   switch (type) {
@@ -163,6 +191,7 @@ export const PoolMsgDetail = ({
           msg={details}
           assetInfos={assetInfos}
           isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
         />
       );
     }
@@ -177,6 +206,7 @@ export const PoolMsgDetail = ({
           msg={details}
           assetInfos={assetInfos}
           isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
         />
       );
     }
@@ -190,6 +220,7 @@ export const PoolMsgDetail = ({
           msg={details}
           assetInfos={assetInfos}
           isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
         />
       );
     }
@@ -203,6 +234,7 @@ export const PoolMsgDetail = ({
           msg={details}
           assetInfos={assetInfos}
           isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
         />
       );
     }
@@ -216,6 +248,7 @@ export const PoolMsgDetail = ({
           msg={details}
           assetInfos={assetInfos}
           isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
         />
       );
     }
@@ -229,6 +262,7 @@ export const PoolMsgDetail = ({
           msg={details}
           assetInfos={assetInfos}
           isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
         />
       );
     }
@@ -242,6 +276,7 @@ export const PoolMsgDetail = ({
           msg={details}
           assetInfos={assetInfos}
           isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
         />
       );
     }
@@ -255,6 +290,7 @@ export const PoolMsgDetail = ({
           msg={details}
           assetInfos={assetInfos}
           isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
         />
       );
     }
@@ -269,6 +305,7 @@ export const PoolMsgDetail = ({
           pool={pool}
           assetInfos={assetInfos}
           isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
         />
       );
     }
@@ -283,6 +320,7 @@ export const PoolMsgDetail = ({
           pool={pool}
           assetInfos={assetInfos}
           isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
         />
       );
     }
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx
index bfeefd3c1..1fb6324e7 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx
@@ -11,12 +11,14 @@ interface MsgLockTokensActionProps {
   msg: MsgLockTokensDetails;
   pool: PoolDetail;
   assetInfos: AssetInfosOpt;
+  ampCopierSection?: string;
 }
 
 export const MsgLockTokensAction = ({
   msg,
   pool,
   assetInfos,
+  ampCopierSection,
 }: MsgLockTokensActionProps) => {
   const poolDenom = getPoolDenom(pool.id.toString());
   const poolAsset = msg.coins.find((coin) => coin.denom === poolDenom) ?? {
@@ -32,9 +34,10 @@ export const MsgLockTokensAction = ({
         symbol={poolAssetInfo?.symbol}
         precision={poolAssetInfo?.precision}
         fontWeight={700}
+        ampCopierSection={ampCopierSection}
       />
       to
-      <PoolLogoLink pool={pool} />
+      <PoolLogoLink pool={pool} ampCopierSection={ampCopierSection} />
       with
       <span style={{ fontWeight: 700 }}>
         {Number(msg.duration) / (24 * 60 * 60 * 1e9)}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
index a5db92991..c78894ce4 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
@@ -18,6 +18,7 @@ interface MsgLockTokensDetailProps {
   pool: PoolDetail;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
+  ampCopierSection?: string;
 }
 
 export const MsgLockTokensDetail = ({
@@ -28,6 +29,7 @@ export const MsgLockTokensDetail = ({
   pool,
   assetInfos,
   isOpened,
+  ampCopierSection,
 }: MsgLockTokensDetailProps) => {
   const poolDenom = getPoolDenom(pool.id.toString());
   const poolAsset = msg.coins.find((coin) => coin.denom === poolDenom) ?? {
@@ -59,6 +61,7 @@ export const MsgLockTokensDetail = ({
             value={blockHeight.toString()}
             type="block_height"
             showCopyOnHover
+            ampCopierSection={ampCopierSection}
           />
         </Flex>
         <Flex direction="column" gap={1}>
@@ -76,6 +79,7 @@ export const MsgLockTokensDetail = ({
             symbol={poolAssetInfo?.symbol}
             precision={poolAssetInfo?.precision}
             fontWeight={700}
+            ampCopierSection={ampCopierSection}
           />
         </Flex>
       </Flex>
@@ -87,6 +91,7 @@ export const MsgLockTokensDetail = ({
           poolAsset={poolAsset}
           poolAssetInfo={poolAssetInfo}
           isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
         />
       </Box>
     </Flex>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx
index 387d83dbe..8db0566fb 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolAction.tsx
@@ -12,12 +12,14 @@ interface MsgExitPoolActionProps {
   msg: MsgExitPoolDetails;
   pool: PoolDetail;
   assetInfos: AssetInfosOpt;
+  ampCopierSection?: string;
 }
 
 export const MsgExitPoolAction = ({
   msg,
   pool,
   assetInfos,
+  ampCopierSection,
 }: MsgExitPoolActionProps) => {
   const poolDenom = getPoolDenom(msg.pool_id);
   const poolAssetInfo = assetInfos?.[poolDenom];
@@ -29,9 +31,10 @@ export const MsgExitPoolAction = ({
         symbol={poolAssetInfo?.symbol}
         precision={poolAssetInfo?.precision}
         fontWeight={700}
+        ampCopierSection={ampCopierSection}
       />
       from
-      <PoolLogoLink pool={pool} />
+      <PoolLogoLink pool={pool} ampCopierSection={ampCopierSection} />
       {msg.token_out_mins && (
         <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
       )}
@@ -48,6 +51,7 @@ export const MsgExitPoolAction = ({
               symbol={outAssetInfo?.symbol}
               precision={outAssetInfo?.precision}
               fontWeight={400}
+              ampCopierSection={ampCopierSection}
             />
           </Flex>
         );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
index 055500562..1de9944d0 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
@@ -13,6 +13,7 @@ interface MsgExitPoolDetailProps {
   msg: MsgExitPoolDetails;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
+  ampCopierSection?: string;
 }
 
 export const MsgExitPoolDetail = ({
@@ -22,6 +23,7 @@ export const MsgExitPoolDetail = ({
   msg,
   assetInfos,
   isOpened,
+  ampCopierSection,
 }: MsgExitPoolDetailProps) => (
   <Flex w="full" alignItems="start" gap={12}>
     <Flex direction="column" gap={1}>
@@ -32,6 +34,7 @@ export const MsgExitPoolDetail = ({
         value={blockHeight.toString()}
         type="block_height"
         showCopyOnHover
+        ampCopierSection={ampCopierSection}
       />
     </Flex>
     <Box w="full">
@@ -42,6 +45,7 @@ export const MsgExitPoolDetail = ({
         assetInfos={assetInfos}
         isJoin={false}
         isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
       />
       <LiquidityDivider />
       <PoolAssetsGrid
@@ -50,6 +54,7 @@ export const MsgExitPoolDetail = ({
         isJoin={false}
         assetInfos={assetInfos}
         isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
       />
     </Box>
   </Flex>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx
index 06e6fd357..881500650 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutAction.tsx
@@ -12,12 +12,14 @@ interface MsgExitSwapExternAmountOutActionProps {
   msg: MsgExitSwapExternAmountOutDetails;
   pool: PoolDetail;
   assetInfos: AssetInfosOpt;
+  ampCopierSection?: string;
 }
 
 export const MsgExitSwapExternAmountOutAction = ({
   msg,
   pool,
   assetInfos,
+  ampCopierSection,
 }: MsgExitSwapExternAmountOutActionProps) => {
   const outAssetInfo = assetInfos?.[msg.token_out.denom];
   const poolDenom = getPoolDenom(msg.pool_id);
@@ -30,15 +32,17 @@ export const MsgExitSwapExternAmountOutAction = ({
         symbol={poolAssetInfo?.symbol}
         precision={poolAssetInfo?.precision}
         fontWeight={400}
+        ampCopierSection={ampCopierSection}
       />
       to
-      <PoolLogoLink pool={pool} />
+      <PoolLogoLink pool={pool} ampCopierSection={ampCopierSection} />
       <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
       <MsgToken
         coin={msg.token_out}
         symbol={outAssetInfo?.symbol}
         precision={outAssetInfo?.precision}
         fontWeight={700}
+        ampCopierSection={ampCopierSection}
       />
     </Flex>
   );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
index 95a51b2b6..f8a083ead 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
@@ -13,6 +13,7 @@ interface MsgExitSwapExternAmountOutDetailProps {
   msg: MsgExitSwapExternAmountOutDetails;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
+  ampCopierSection?: string;
 }
 
 export const MsgExitSwapExternAmountOutDetail = ({
@@ -22,6 +23,7 @@ export const MsgExitSwapExternAmountOutDetail = ({
   msg,
   assetInfos,
   isOpened,
+  ampCopierSection,
 }: MsgExitSwapExternAmountOutDetailProps) => (
   <Flex w="full" alignItems="start" gap={12}>
     <Flex direction="column" gap={1}>
@@ -32,6 +34,7 @@ export const MsgExitSwapExternAmountOutDetail = ({
         value={blockHeight.toString()}
         type="block_height"
         showCopyOnHover
+        ampCopierSection={ampCopierSection}
       />
     </Flex>
     <Box w="full">
@@ -42,6 +45,7 @@ export const MsgExitSwapExternAmountOutDetail = ({
         assetInfos={assetInfos}
         isJoin={false}
         isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
       />
       <LiquidityDivider />
       <PoolAssetsGrid
@@ -51,6 +55,7 @@ export const MsgExitSwapExternAmountOutDetail = ({
         isJoin={false}
         assetInfos={assetInfos}
         isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
       />
     </Box>
   </Flex>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx
index a6a20765f..4c5c63786 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInAction.tsx
@@ -12,12 +12,14 @@ interface MsgExitSwapShareAmountInActionProps {
   msg: MsgExitSwapShareAmountInDetails;
   pool: PoolDetail;
   assetInfos: AssetInfosOpt;
+  ampCopierSection?: string;
 }
 
 export const MsgExitSwapShareAmountInAction = ({
   msg,
   pool,
   assetInfos,
+  ampCopierSection,
 }: MsgExitSwapShareAmountInActionProps) => {
   const outAssetInfo = assetInfos?.[msg.token_out_denom];
   const poolDenom = getPoolDenom(msg.pool_id);
@@ -30,9 +32,10 @@ export const MsgExitSwapShareAmountInAction = ({
         symbol={poolAssetInfo?.symbol}
         precision={poolAssetInfo?.precision}
         fontWeight={700}
+        ampCopierSection={ampCopierSection}
       />
       to
-      <PoolLogoLink pool={pool} />
+      <PoolLogoLink pool={pool} ampCopierSection={ampCopierSection} />
       <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
       at least
       <MsgToken
@@ -40,6 +43,7 @@ export const MsgExitSwapShareAmountInAction = ({
         symbol={outAssetInfo?.symbol}
         precision={outAssetInfo?.precision}
         fontWeight={400}
+        ampCopierSection={ampCopierSection}
       />
     </Flex>
   );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
index 0e55fe5d4..62bd53fd6 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
@@ -13,6 +13,7 @@ interface MsgExitSwapShareAmountInDetailProps {
   msg: MsgExitSwapShareAmountInDetails;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
+  ampCopierSection?: string;
 }
 
 export const MsgExitSwapShareAmountInDetail = ({
@@ -22,6 +23,7 @@ export const MsgExitSwapShareAmountInDetail = ({
   msg,
   assetInfos,
   isOpened,
+  ampCopierSection,
 }: MsgExitSwapShareAmountInDetailProps) => (
   <Flex minW="full" alignItems="start" gap={12}>
     <Flex direction="column" gap={1}>
@@ -32,6 +34,7 @@ export const MsgExitSwapShareAmountInDetail = ({
         value={blockHeight.toString()}
         type="block_height"
         showCopyOnHover
+        ampCopierSection={ampCopierSection}
       />
     </Flex>
     <Box w="full">
@@ -42,6 +45,7 @@ export const MsgExitSwapShareAmountInDetail = ({
         assetInfos={assetInfos}
         isJoin={false}
         isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
       />
       <LiquidityDivider />
       <PoolAssetsGrid
@@ -51,6 +55,7 @@ export const MsgExitSwapShareAmountInDetail = ({
         isJoin={false}
         assetInfos={assetInfos}
         isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
       />
     </Box>
   </Flex>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx
index 908343389..a43856e68 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolAction.tsx
@@ -12,12 +12,14 @@ interface MsgJoinPoolActionProps {
   msg: MsgJoinPoolDetails;
   pool: PoolDetail;
   assetInfos: AssetInfosOpt;
+  ampCopierSection?: string;
 }
 
 export const MsgJoinPoolAction = ({
   msg,
   pool,
   assetInfos,
+  ampCopierSection,
 }: MsgJoinPoolActionProps) => {
   const poolDenom = getPoolDenom(msg.pool_id);
   const poolAssetInfo = assetInfos?.[poolDenom];
@@ -38,18 +40,20 @@ export const MsgJoinPoolAction = ({
               symbol={inAssetInfo?.symbol}
               precision={inAssetInfo?.precision}
               fontWeight={400}
+              ampCopierSection={ampCopierSection}
             />
           </Flex>
         );
       })}
       to
-      <PoolLogoLink pool={pool} />
+      <PoolLogoLink pool={pool} ampCopierSection={ampCopierSection} />
       <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
       <MsgToken
         coin={{ amount: msg.share_out_amount, denom: poolDenom }}
         symbol={poolAssetInfo?.symbol}
         precision={poolAssetInfo?.precision}
         fontWeight={700}
+        ampCopierSection={ampCopierSection}
       />
     </Flex>
   );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
index 5c470c3d3..f9b49a4d9 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
@@ -13,6 +13,7 @@ interface MsgJoinPoolDetailProps {
   msg: MsgJoinPoolDetails;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
+  ampCopierSection?: string;
 }
 
 export const MsgJoinPoolDetail = ({
@@ -22,6 +23,7 @@ export const MsgJoinPoolDetail = ({
   msg,
   assetInfos,
   isOpened,
+  ampCopierSection,
 }: MsgJoinPoolDetailProps) => (
   <Flex w="full" alignItems="start" gap={12}>
     <Flex direction="column" gap={1}>
@@ -32,6 +34,7 @@ export const MsgJoinPoolDetail = ({
         value={blockHeight.toString()}
         type="block_height"
         showCopyOnHover
+        ampCopierSection={ampCopierSection}
       />
     </Flex>
     <Box w="full">
@@ -41,6 +44,7 @@ export const MsgJoinPoolDetail = ({
         isJoin
         assetInfos={assetInfos}
         isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
       />
       <LiquidityDivider />
       <PoolLPCard
@@ -50,6 +54,7 @@ export const MsgJoinPoolDetail = ({
         assetInfos={assetInfos}
         isJoin
         isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
       />
     </Box>
   </Flex>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx
index d35263107..7fe785a70 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInAction.tsx
@@ -12,12 +12,14 @@ interface MsgJoinSwapExternAmountInActionProps {
   msg: MsgJoinSwapExternAmountInDetails;
   pool: PoolDetail;
   assetInfos: AssetInfosOpt;
+  ampCopierSection?: string;
 }
 
 export const MsgJoinSwapExternAmountInAction = ({
   msg,
   pool,
   assetInfos,
+  ampCopierSection,
 }: MsgJoinSwapExternAmountInActionProps) => {
   const inAssetInfo = assetInfos?.[msg.token_in.denom];
   const poolDenom = getPoolDenom(msg.pool_id);
@@ -30,9 +32,10 @@ export const MsgJoinSwapExternAmountInAction = ({
         symbol={inAssetInfo?.symbol}
         precision={inAssetInfo?.precision}
         fontWeight={700}
+        ampCopierSection={ampCopierSection}
       />
       to
-      <PoolLogoLink pool={pool} />
+      <PoolLogoLink pool={pool} ampCopierSection={ampCopierSection} />
       <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
       at least
       <MsgToken
@@ -40,6 +43,7 @@ export const MsgJoinSwapExternAmountInAction = ({
         symbol={poolAssetInfo?.symbol}
         precision={poolAssetInfo?.precision}
         fontWeight={400}
+        ampCopierSection={ampCopierSection}
       />
     </Flex>
   );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
index 79ae9d427..e7b00c3f4 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
@@ -13,6 +13,7 @@ interface MsgJoinSwapExternAmountInDetailProps {
   msg: MsgJoinSwapExternAmountInDetails;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
+  ampCopierSection?: string;
 }
 
 export const MsgJoinSwapExternAmountInDetail = ({
@@ -22,6 +23,7 @@ export const MsgJoinSwapExternAmountInDetail = ({
   msg,
   assetInfos,
   isOpened,
+  ampCopierSection,
 }: MsgJoinSwapExternAmountInDetailProps) => (
   <Flex w="full" alignItems="start" gap={12}>
     <Flex direction="column" gap={1}>
@@ -32,6 +34,7 @@ export const MsgJoinSwapExternAmountInDetail = ({
         value={blockHeight.toString()}
         type="block_height"
         showCopyOnHover
+        ampCopierSection={ampCopierSection}
       />
     </Flex>
     <Box w="full">
@@ -41,6 +44,7 @@ export const MsgJoinSwapExternAmountInDetail = ({
         isJoin
         assetInfos={assetInfos}
         isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
       />
       <LiquidityDivider />
       <PoolLPCard
@@ -50,6 +54,7 @@ export const MsgJoinSwapExternAmountInDetail = ({
         assetInfos={assetInfos}
         isJoin
         isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
       />
     </Box>
   </Flex>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx
index ae05c3592..68636ccc1 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx
@@ -12,12 +12,14 @@ interface MsgJoinSwapShareAmountOutActionProps {
   msg: MsgJoinSwapShareAmountOutDetails;
   pool: PoolDetail;
   assetInfos: AssetInfosOpt;
+  ampCopierSection?: string;
 }
 
 export const MsgJoinSwapShareAmountOutAction = ({
   msg,
   pool,
   assetInfos,
+  ampCopierSection,
 }: MsgJoinSwapShareAmountOutActionProps) => {
   const inAssetInfo = assetInfos?.[msg.token_in_denom];
   const poolDenom = getPoolDenom(msg.pool_id);
@@ -30,15 +32,17 @@ export const MsgJoinSwapShareAmountOutAction = ({
         symbol={inAssetInfo?.symbol}
         precision={inAssetInfo?.precision}
         fontWeight={400}
+        ampCopierSection={ampCopierSection}
       />
       to
-      <PoolLogoLink pool={pool} />
+      <PoolLogoLink pool={pool} ampCopierSection={ampCopierSection} />
       <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
       <MsgToken
         coin={{ amount: msg.share_amount_out, denom: poolDenom }}
         symbol={poolAssetInfo?.symbol}
         precision={poolAssetInfo?.precision}
         fontWeight={700}
+        ampCopierSection={ampCopierSection}
       />
     </Flex>
   );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
index e41376d60..5efc1769b 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
@@ -13,6 +13,7 @@ interface MsgJoinSwapShareAmountOutDetailProps {
   msg: MsgJoinSwapShareAmountOutDetails;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
+  ampCopierSection?: string;
 }
 
 export const MsgJoinSwapShareAmountOutDetail = ({
@@ -22,6 +23,7 @@ export const MsgJoinSwapShareAmountOutDetail = ({
   msg,
   assetInfos,
   isOpened,
+  ampCopierSection,
 }: MsgJoinSwapShareAmountOutDetailProps) => (
   <Flex w="full" alignItems="start" gap={12}>
     <Flex direction="column" gap={1}>
@@ -32,6 +34,7 @@ export const MsgJoinSwapShareAmountOutDetail = ({
         value={blockHeight.toString()}
         type="block_height"
         showCopyOnHover
+        ampCopierSection={ampCopierSection}
       />
     </Flex>
     <Box w="full">
@@ -41,6 +44,7 @@ export const MsgJoinSwapShareAmountOutDetail = ({
         isJoin
         assetInfos={assetInfos}
         isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
       />
       <LiquidityDivider />
       <PoolLPCard
@@ -50,6 +54,7 @@ export const MsgJoinSwapShareAmountOutDetail = ({
         assetInfos={assetInfos}
         isJoin
         isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
       />
     </Box>
   </Flex>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
index 1770e411e..8a26a3f2f 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
@@ -17,6 +17,7 @@ interface PoolAssetsGridProps {
   isJoin: boolean;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
+  ampCopierSection?: string;
 }
 
 export const PoolAssetsGrid = ({
@@ -27,6 +28,7 @@ export const PoolAssetsGrid = ({
   isJoin,
   assetInfos,
   isOpened,
+  ampCopierSection,
 }: PoolAssetsGridProps) => {
   const { data: txData, isLoading } = useTxData(txHash, isOpened);
   if (!msgAssets && isLoading) return <Loading withBorder={false} />;
@@ -85,6 +87,7 @@ export const PoolAssetsGrid = ({
             amount={asset.amount}
             denom={asset.denom}
             assetInfo={assetInfos?.[asset.denom]}
+            ampCopierSection={ampCopierSection}
           />
         ))}
       </SimpleGrid>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
index a1252ea63..3ec7b7a6e 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
@@ -15,6 +15,7 @@ interface PoolLPCardProps {
   assetInfos: AssetInfosOpt;
   isJoin: boolean;
   isOpened: boolean;
+  ampCopierSection?: string;
 }
 
 export const PoolLPCard = ({
@@ -25,6 +26,7 @@ export const PoolLPCard = ({
   assetInfos,
   isJoin,
   isOpened,
+  ampCopierSection,
 }: PoolLPCardProps) => {
   const { data: txData, isLoading } = useTxData(txHash, isOpened);
   if (!msgShareAmount && isLoading) return <Loading withBorder={false} />;
@@ -60,6 +62,7 @@ export const PoolLPCard = ({
         poolAsset={{ amount: shareAmount, denom: poolDenom }}
         poolAssetInfo={assetInfos?.[poolDenom]}
         isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
       />
     </Flex>
   );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateAction.tsx
index f456048e5..5fc513d32 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateAction.tsx
@@ -11,12 +11,14 @@ interface MsgLockAndSuperfluidDelegateActionProps {
   msg: MsgLockAndSuperfluidDelegateDetails;
   pool: PoolDetail;
   assetInfos: AssetInfosOpt;
+  ampCopierSection?: string;
 }
 
 export const MsgLockAndSuperfluidDelegateAction = ({
   msg,
   pool,
   assetInfos,
+  ampCopierSection,
 }: MsgLockAndSuperfluidDelegateActionProps) => {
   const poolDenom = getPoolDenom(pool.id.toString());
   const poolAsset = msg.coins.find((coin) => coin.denom === poolDenom) ?? {
@@ -32,9 +34,10 @@ export const MsgLockAndSuperfluidDelegateAction = ({
         symbol={poolAssetInfo?.symbol}
         precision={poolAssetInfo?.precision}
         fontWeight={700}
+        ampCopierSection={ampCopierSection}
       />
       to
-      <PoolLogoLink pool={pool} />
+      <PoolLogoLink pool={pool} ampCopierSection={ampCopierSection} />
       with
       <span style={{ fontWeight: 700 }}>14</span>
       days unbonding
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
index fc61fb9e0..b58bdddea 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Text } from "@chakra-ui/react";
+import { Flex, Text } from "@chakra-ui/react";
 
 import { PoolAssetCard } from "../components";
 import { getPoolDenom } from "../utils";
@@ -19,6 +19,7 @@ interface MsgLockAndSuperfluidDelegateDetailProps {
   pool: PoolDetail;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
+  ampCopierSection?: string;
 }
 
 export const MsgLockAndSuperfluidDelegateDetail = ({
@@ -29,6 +30,7 @@ export const MsgLockAndSuperfluidDelegateDetail = ({
   pool,
   assetInfos,
   isOpened,
+  ampCopierSection,
 }: MsgLockAndSuperfluidDelegateDetailProps) => {
   const poolDenom = getPoolDenom(pool.id.toString());
   const poolAsset = msg.coins.find((coin) => coin.denom === poolDenom) ?? {
@@ -69,6 +71,7 @@ export const MsgLockAndSuperfluidDelegateDetail = ({
             value={blockHeight.toString()}
             type="block_height"
             showCopyOnHover
+            ampCopierSection={ampCopierSection}
           />
         </Flex>
         <Flex direction="column" gap={1}>
@@ -87,10 +90,11 @@ export const MsgLockAndSuperfluidDelegateDetail = ({
               moniker: validator?.moniker,
             }}
             badgeSize={6}
+            ampCopierSection={ampCopierSection}
           />
         </Flex>
       </Flex>
-      <Box w="full">
+      <Flex direction="column" w="full" gap={2}>
         <PoolAssetCard
           poolId={pool.id}
           description="Bonded to"
@@ -98,8 +102,9 @@ export const MsgLockAndSuperfluidDelegateDetail = ({
           poolAsset={poolAsset}
           poolAssetInfo={poolAssetInfo}
           isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
         />
-      </Box>
+      </Flex>
     </Flex>
   );
 };
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
index 78e7b1d01..94ea17b38 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInAction.tsx
@@ -8,11 +8,13 @@ import type { MsgSwapExactAmountInDetails } from "lib/utils/tx/types";
 interface MsgSwapExactAmountInActionProps {
   msg: MsgSwapExactAmountInDetails;
   assetInfos: AssetInfosOpt;
+  ampCopierSection?: string;
 }
 
 export const MsgSwapExactAmountInAction = ({
   msg,
   assetInfos,
+  ampCopierSection,
 }: MsgSwapExactAmountInActionProps) => {
   const inAssetInfo = assetInfos?.[msg.token_in.denom];
   const tokenOutDenom = msg.routes.at(-1)?.tokenOutDenom ?? "";
@@ -25,6 +27,7 @@ export const MsgSwapExactAmountInAction = ({
         symbol={inAssetInfo?.symbol}
         precision={inAssetInfo?.precision}
         fontWeight={700}
+        ampCopierSection={ampCopierSection}
       />
       <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
       at least
@@ -33,6 +36,7 @@ export const MsgSwapExactAmountInAction = ({
         symbol={outAssetInfo?.symbol}
         precision={outAssetInfo?.precision}
         fontWeight={400}
+        ampCopierSection={ampCopierSection}
       />
     </Flex>
   );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
index 68f1dc2fb..bfe113da2 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
@@ -13,6 +13,7 @@ interface MsgSwapExactAmountInDetailProps {
   msg: MsgSwapExactAmountInDetails;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
+  ampCopierSection?: string;
 }
 
 export const MsgSwapExactAmountInDetail = ({
@@ -22,6 +23,7 @@ export const MsgSwapExactAmountInDetail = ({
   msg,
   assetInfos,
   isOpened,
+  ampCopierSection,
 }: MsgSwapExactAmountInDetailProps) => (
   <Flex w="full" alignItems="start" gap={12}>
     <Flex direction="column" gap={1}>
@@ -32,6 +34,7 @@ export const MsgSwapExactAmountInDetail = ({
         value={blockHeight.toString()}
         type="block_height"
         showCopyOnHover
+        ampCopierSection={ampCopierSection}
       />
     </Flex>
     <Box w="full">
@@ -40,11 +43,13 @@ export const MsgSwapExactAmountInDetail = ({
         msgIndex={msgIndex}
         assetInfos={assetInfos}
         isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
       />
       <PoolRoute
         routes={msg.routes}
         assetInfos={assetInfos}
         isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
       />
     </Box>
   </Flex>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
index af270c436..541c74107 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutAction.tsx
@@ -8,11 +8,13 @@ import type { MsgSwapExactAmountOutDetails } from "lib/utils/tx/types";
 interface MsgSwapExactAmountOutActionProps {
   msg: MsgSwapExactAmountOutDetails;
   assetInfos: AssetInfosOpt;
+  ampCopierSection?: string;
 }
 
 export const MsgSwapExactAmountOutAction = ({
   msg,
   assetInfos,
+  ampCopierSection,
 }: MsgSwapExactAmountOutActionProps) => {
   const tokenInDenom = msg.routes.at(0)?.tokenInDenom ?? "";
   const inAssetInfo = assetInfos?.[tokenInDenom];
@@ -25,6 +27,7 @@ export const MsgSwapExactAmountOutAction = ({
         symbol={inAssetInfo?.symbol}
         precision={inAssetInfo?.precision}
         fontWeight={400}
+        ampCopierSection={ampCopierSection}
       />
       <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
       <MsgToken
@@ -32,6 +35,7 @@ export const MsgSwapExactAmountOutAction = ({
         symbol={outAssetInfo?.symbol}
         precision={outAssetInfo?.precision}
         fontWeight={700}
+        ampCopierSection={ampCopierSection}
       />
     </Flex>
   );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
index c6ac9c13d..8bd5dd9d9 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
@@ -13,6 +13,7 @@ interface MsgSwapExactAmountOutDetailProps {
   msg: MsgSwapExactAmountOutDetails;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
+  ampCopierSection?: string;
 }
 
 export const MsgSwapExactAmountOutDetail = ({
@@ -22,6 +23,7 @@ export const MsgSwapExactAmountOutDetail = ({
   msg,
   assetInfos,
   isOpened,
+  ampCopierSection,
 }: MsgSwapExactAmountOutDetailProps) => {
   const outDenoms = msg.routes
     .map((route) => route.tokenInDenom)
@@ -41,6 +43,7 @@ export const MsgSwapExactAmountOutDetail = ({
           value={blockHeight.toString()}
           type="block_height"
           showCopyOnHover
+          ampCopierSection={ampCopierSection}
         />
       </Flex>
       <Box w="full">
@@ -49,11 +52,13 @@ export const MsgSwapExactAmountOutDetail = ({
           msgIndex={msgIndex}
           assetInfos={assetInfos}
           isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
         />
         <PoolRoute
           routes={routes}
           assetInfos={assetInfos}
           isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
         />
       </Box>
     </Flex>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
index 41bb1b381..06b81eef8 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
@@ -15,9 +15,15 @@ interface PoolRouteProps {
   routes: MsgSwapExactAmountInDetails["routes"];
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
+  ampCopierSection?: string;
 }
 
-export const PoolRoute = ({ routes, assetInfos, isOpened }: PoolRouteProps) => {
+export const PoolRoute = ({
+  routes,
+  assetInfos,
+  isOpened,
+  ampCopierSection,
+}: PoolRouteProps) => {
   const { data: poolAssets, isLoading } = usePoolAssetsbyPoolIds(
     routes.map((pool) => pool.poolId),
     isOpened
@@ -87,6 +93,7 @@ export const PoolRoute = ({ routes, assetInfos, isOpened }: PoolRouteProps) => {
                   type="pool_id"
                   value={pool.poolId.toString()}
                   showCopyOnHover
+                  ampCopierSection={ampCopierSection}
                 />
               </div>
             </Flex>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
index 9d9633578..0a33d55cd 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
@@ -13,6 +13,7 @@ interface PoolSwapInterface {
   msgIndex: number;
   assetInfos: AssetInfosOpt;
   isOpened: boolean;
+  ampCopierSection?: string;
 }
 
 export const PoolSwap = ({
@@ -20,6 +21,7 @@ export const PoolSwap = ({
   msgIndex,
   assetInfos,
   isOpened,
+  ampCopierSection,
 }: PoolSwapInterface) => {
   const { data: txData, isLoading } = useTxData(txHash, isOpened);
   if (isLoading) return <Loading withBorder={false} />;
@@ -50,6 +52,7 @@ export const PoolSwap = ({
           amount={inAmount}
           denom={inDenom}
           assetInfo={assetInfos?.[inDenom]}
+          ampCopierSection={ampCopierSection}
         />
       </div>
       <CustomIcon name="arrow-right" boxSize={4} color="honeydew.main" />
@@ -61,6 +64,7 @@ export const PoolSwap = ({
           amount={outAmount}
           denom={outDenom}
           assetInfo={assetInfos?.[outDenom]}
+          ampCopierSection={ampCopierSection}
         />
       </div>
     </Grid>
diff --git a/src/lib/pages/pools/poolId.tsx b/src/lib/pages/pools/poolId.tsx
index 2ddbd1584..e98580cf4 100644
--- a/src/lib/pages/pools/poolId.tsx
+++ b/src/lib/pages/pools/poolId.tsx
@@ -1,9 +1,11 @@
 import { useRouter } from "next/router";
+import { useEffect } from "react";
 
 import { useInternalNavigate } from "lib/app-provider";
 import { BackButton } from "lib/components/button";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { getFirstQueryParam } from "lib/utils";
 
 import {
@@ -19,6 +21,10 @@ export const PoolId = () => {
   const poolId = Number(getFirstQueryParam(router.query.poolId));
   const { pool, isLoading } = usePool(poolId);
 
+  useEffect(() => {
+    if (router.isReady) AmpTrack(AmpEvent.TO_POOL_DETAIL);
+  }, [router.isReady]);
+
   if (isLoading) return <Loading />;
   if (!pool) return navigate({ pathname: `/pool` });
   return (
diff --git a/src/lib/services/amplitude.tsx b/src/lib/services/amplitude.tsx
index 9c5bb0f27..4bcdd0b00 100644
--- a/src/lib/services/amplitude.tsx
+++ b/src/lib/services/amplitude.tsx
@@ -54,6 +54,7 @@ export enum AmpEvent {
   TO_TRANSACTION_DETAIL = "To Transaction Detail",
   TO_NOT_FOUND = "To 404 Not Found",
   TO_FAUCET = "To Faucet",
+  TO_POOL_DETAIL = "To Pool Detail",
   // ACTIONS
   ACTION_UPLOAD = "Act Upload",
   ACTION_INSTANTIATE = "Action Instantiate",
@@ -209,7 +210,12 @@ export const AmpTrackCopier = (section: Option<string>, type: string) =>
 
 export const AmpTrackExpand = (
   action: "expand" | "collapse",
-  component: "assets" | "json" | "permission_address" | "event_box",
+  component:
+    | "assets"
+    | "json"
+    | "permission_address"
+    | "event_box"
+    | "pool_tx_msg",
   section: Option<string>
 ) => track(AmpEvent.USE_EXPAND, { action, component, section });
 

From 5005f9b1faf9c0cf3d33a0ac3ef2b82e52af6a8d Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 25 May 2023 14:25:55 +0700
Subject: [PATCH 153/354] fix: changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea74a15c1..818f8eb19 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,7 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#358](https://github.com/alleslabs/celatone-frontend/pull/355) Add Amp for Pool Detail page
+- [#358](https://github.com/alleslabs/celatone-frontend/pull/358) Add Amp for Pool Detail page
 - [#294](https://github.com/alleslabs/celatone-frontend/pull/294) Add Pool related txs table
 - [#296](https://github.com/alleslabs/celatone-frontend/pull/296) Add pool header and pool assets section for pool details page
 - [#295](https://github.com/alleslabs/celatone-frontend/pull/295) Add expand/collapse all for unsupported pool list

From 30cd33f2a15748796a6da4b590773be0831fc4a1 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 25 May 2023 14:48:16 +0700
Subject: [PATCH 154/354] fix: comment

---
 src/lib/components/ViewPermissionAddresses.tsx   | 10 +++++-----
 src/lib/components/json/JsonReadOnly.tsx         | 10 +++++-----
 .../pools/components/supportedSection/index.tsx  |  6 +++---
 .../unsupportedSection/UnsupportedPoolCard.tsx   | 14 ++++++--------
 .../components/tx-message/EventBox.tsx           | 10 +++++-----
 src/lib/services/amplitude.tsx                   | 16 +++++++++++-----
 6 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/ViewPermissionAddresses.tsx b/src/lib/components/ViewPermissionAddresses.tsx
index 96ff89e09..cecec5d44 100644
--- a/src/lib/components/ViewPermissionAddresses.tsx
+++ b/src/lib/components/ViewPermissionAddresses.tsx
@@ -37,11 +37,11 @@ export const ViewPermissionAddresses = ({
         <Button
           variant="ghost-lilac"
           onClick={() => {
-            AmpTrackExpand(
-              viewAll ? "collapse" : "expand",
-              "permission_address",
-              amptrackSection
-            );
+            AmpTrackExpand({
+              action: viewAll ? "collapse" : "expand",
+              component: "permission_address",
+              section: amptrackSection,
+            });
             setViewAll((prev) => !prev);
           }}
           size="sm"
diff --git a/src/lib/components/json/JsonReadOnly.tsx b/src/lib/components/json/JsonReadOnly.tsx
index 4ebb0e42c..acca6e4e5 100644
--- a/src/lib/components/json/JsonReadOnly.tsx
+++ b/src/lib/components/json/JsonReadOnly.tsx
@@ -88,11 +88,11 @@ const JsonReadOnly = ({
       {showExpandButton && (
         <ViewFullMsgButton
           onClick={() => {
-            AmpTrackExpand(
-              viewFull ? "collapse" : "expand",
-              "json",
-              amptrackSection
-            );
+            AmpTrackExpand({
+              action: viewFull ? "collapse" : "expand",
+              component: "json",
+              section: amptrackSection,
+            });
             setViewFull((prev) => !prev);
           }}
           viewFull={viewFull}
diff --git a/src/lib/pages/pools/components/supportedSection/index.tsx b/src/lib/pages/pools/components/supportedSection/index.tsx
index db24fc26f..bf976503b 100644
--- a/src/lib/pages/pools/components/supportedSection/index.tsx
+++ b/src/lib/pages/pools/components/supportedSection/index.tsx
@@ -188,9 +188,9 @@ export const SupportedSection = ({
               size="sm"
               pr={1}
               onClick={() => {
-                const newOrdering = !showNewest;
-                AmpTrackUseSort(newOrdering ? "Descending" : "Ascending");
-                setShowNewest(newOrdering);
+                const isDesc = !showNewest;
+                AmpTrackUseSort(isDesc ? "Descending" : "Ascending");
+                setShowNewest(isDesc);
               }}
             >
               {showNewest ? "Newest First" : "Oldest First"}
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index 23ba31e4a..f12026c55 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -56,14 +56,12 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
         <>
           <AccordionButton
             onClick={() =>
-              AmpTrackExpand(
-                !isExpanded ? "expand" : "collapse",
-                {
-                  type: "unsupported_pool",
-                  id: item.id,
-                },
-                "pool-list-page"
-              )
+              AmpTrackExpand({
+                action: !isExpanded ? "expand" : "collapse",
+                component: "unsupported_pool",
+                info: { poolId: item.id },
+                section: "pool-list-page",
+              })
             }
           >
             <Flex gap={4} flexDirection="column" p={4} w="full">
diff --git a/src/lib/pages/tx-details/components/tx-message/EventBox.tsx b/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
index 0c5458a0b..6831e0918 100644
--- a/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
@@ -114,11 +114,11 @@ export const EventBox = ({ event, msgIndex }: EventBoxProps) => {
         justify="space-between"
         cursor="pointer"
         onClick={() => {
-          AmpTrackExpand(
-            expand ? "collapse" : "expand",
-            "event_box",
-            "tx_page"
-          );
+          AmpTrackExpand({
+            action: expand ? "collapse" : "expand",
+            component: "event_box",
+            section: "tx_page",
+          });
           setExpand((prev) => !prev);
         }}
         p={4}
diff --git a/src/lib/services/amplitude.tsx b/src/lib/services/amplitude.tsx
index 44507861f..ace5b5158 100644
--- a/src/lib/services/amplitude.tsx
+++ b/src/lib/services/amplitude.tsx
@@ -216,16 +216,22 @@ export const AmpTrackUnsupportedToken = (page: Option<string>) =>
 export const AmpTrackCopier = (section: Option<string>, type: string) =>
   track(AmpEvent.USE_COPIER, { section, type });
 
-export const AmpTrackExpand = (
-  action: "expand" | "collapse",
+export const AmpTrackExpand = ({
+  action,
+  component,
+  info,
+  section,
+}: {
+  action: "expand" | "collapse";
   component:
     | "assets"
     | "json"
     | "permission_address"
     | "event_box"
-    | { type: "unsupported_pool"; id: number },
-  section: Option<string>
-) => track(AmpEvent.USE_EXPAND, { action, component, section });
+    | "unsupported_pool";
+  info?: object;
+  section?: string;
+}) => track(AmpEvent.USE_EXPAND, { action, component, info, section });
 
 export const AmpTrackExpandAll = (action: "expand" | "collapse") =>
   track(AmpEvent.USE_EXPAND, { action });

From 60468120e9505f32814f325794408db053cc0055 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 25 May 2023 14:49:13 +0700
Subject: [PATCH 155/354] fix: expand

---
 .../tx-message/msg-receipts/CoinComponent.tsx          | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
index 668c2ebe2..00e158f9a 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
@@ -63,11 +63,11 @@ const MultiCoin = ({
             showLessText="View Less Assets"
             toggleShowMore={showMore}
             setToggleShowMore={() => {
-              AmpTrackExpand(
-                showMore ? "collapse" : "expand",
-                "assets",
-                "tx_page"
-              );
+              AmpTrackExpand({
+                action: showMore ? "collapse" : "expand",
+                component: "assets",
+                section: "tx_page",
+              });
               setShowMore(!showMore);
             }}
           />

From 0b58ecf0f7fe1c15214d2c9ee1fce1cf45f14e15 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 25 May 2023 15:17:24 +0700
Subject: [PATCH 156/354] fix: add amp pool type filter

---
 .../pools/components/FilterByPoolType.tsx     |  6 ++-
 src/lib/pages/pools/components/PoolLogo.tsx   | 50 ++++++++++---------
 src/lib/services/amplitude.tsx                |  2 +
 3 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/lib/pages/pools/components/FilterByPoolType.tsx b/src/lib/pages/pools/components/FilterByPoolType.tsx
index 683573927..8ca210e0b 100644
--- a/src/lib/pages/pools/components/FilterByPoolType.tsx
+++ b/src/lib/pages/pools/components/FilterByPoolType.tsx
@@ -2,6 +2,7 @@ import { Grid } from "@chakra-ui/react";
 
 import { BALANCER_ICON, STABLESWAP_ICON } from "../constant";
 import { SelectInput } from "lib/components/forms";
+import { AmpEvent, AmpTrackUseFilter } from "lib/services/amplitude";
 import type { PoolTypeFilter } from "lib/types";
 
 interface PoolTypeOption {
@@ -46,7 +47,10 @@ export const FilterByPoolType = ({
     <SelectInput<PoolTypeFilter>
       formLabel="Filter by Pool Type"
       options={options}
-      onChange={setPoolTypeValue}
+      onChange={(newVal) => {
+        AmpTrackUseFilter(AmpEvent.USE_FILTER_POOL_TYPE, [newVal], newVal);
+        setPoolTypeValue(newVal);
+      }}
       initialSelected={initialSelected}
       labelBgColor={labelBgColor}
     />
diff --git a/src/lib/pages/pools/components/PoolLogo.tsx b/src/lib/pages/pools/components/PoolLogo.tsx
index b559f2d8b..fc748d13b 100644
--- a/src/lib/pages/pools/components/PoolLogo.tsx
+++ b/src/lib/pages/pools/components/PoolLogo.tsx
@@ -34,22 +34,28 @@ export const PoolLogo = ({
   marginLeft = -12,
   minW = 24,
   textVariant = "body2",
-}: PoolLogoProps) => (
-  <Flex
-    css={{
-      ">:not(:first-of-type)": {
-        marginLeft,
-      },
-    }}
-    minW={minW}
-    alignItems="center"
-    justifyContent="center"
-  >
-    {tokens.length > 3 ? (
-      <>
-        {tokens.slice(0, 2).map((token, idx) => (
-          <PoolAssetLogo token={token} logoSize={logoSize} idx={idx} />
-        ))}
+}: PoolLogoProps) => {
+  const isShortened = tokens.length > 3;
+  return (
+    <Flex
+      css={{
+        ">:not(:first-of-type)": {
+          marginLeft,
+        },
+      }}
+      minW={minW}
+      alignItems="center"
+      justifyContent="center"
+    >
+      {tokens.slice(0, isShortened ? 2 : undefined).map((token, idx) => (
+        <PoolAssetLogo
+          key={token.denom}
+          token={token}
+          logoSize={logoSize}
+          idx={idx}
+        />
+      ))}
+      {isShortened && (
         <Flex
           width={logoSize}
           height={logoSize}
@@ -61,11 +67,7 @@ export const PoolLogo = ({
         >
           <Text variant={textVariant}> +{tokens.length - 2}</Text>
         </Flex>
-      </>
-    ) : (
-      tokens.map((token, idx) => (
-        <PoolAssetLogo token={token} logoSize={logoSize} idx={idx} />
-      ))
-    )}
-  </Flex>
-);
+      )}
+    </Flex>
+  );
+};
diff --git a/src/lib/services/amplitude.tsx b/src/lib/services/amplitude.tsx
index ace5b5158..d3a52e56f 100644
--- a/src/lib/services/amplitude.tsx
+++ b/src/lib/services/amplitude.tsx
@@ -102,6 +102,7 @@ export enum AmpEvent {
   USE_FILTER_MY_PROPOSALS = "Use Filter My Proposals",
   USE_FILTER_PROPOSALS_STATUS = "Use Filter Proposals Status",
   USE_FILTER_PROPOSALS_TYPE = "Use Filter Proposals Types",
+  USE_FILTER_POOL_TYPE = "Use Filter Pool Types",
   USE_PAGINATION_PAGE_SIZE = "Use Pagination Page Size",
   USE_PAGINATION_NAVIGATION = "Use Pagination Navigation",
   USE_CREATE_NEW_PROPOSAL = "Use Create New Proposal",
@@ -148,6 +149,7 @@ type SpecialAmpEvent =
   | AmpEvent.USE_PAGINATION_NAVIGATION
   | AmpEvent.USE_FILTER_PROPOSALS_STATUS
   | AmpEvent.USE_FILTER_PROPOSALS_TYPE
+  | AmpEvent.USE_FILTER_POOL_TYPE
   | AmpEvent.USE_SORT
   | AmpEvent.USE_VIEW
   | AmpEvent.USE_TOGGLE;

From 76cf6b1ad8f2b449d2efa8689e6ef0303f506b0e Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 25 May 2023 15:25:54 +0700
Subject: [PATCH 157/354] fix: assetcard width

---
 .../tables/pool-txs/messages/components/AssetCard.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx
index 350b804df..62c35d36b 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx
@@ -36,7 +36,7 @@ export const AssetCard = ({
         minH="100px"
         gap={2}
         p={3}
-        minW="250px"
+        w="270px"
         background="pebble.800"
         borderRadius="8px"
         {...cardProps}

From 3b785149a575d76dd928772a29c3ac62d22a3548 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 25 May 2023 15:37:19 +0700
Subject: [PATCH 158/354] fix: asset card

---
 .../tables/pool-txs/messages/components/AssetCard.tsx      | 1 -
 .../tables/pool-txs/messages/swap/components/PoolSwap.tsx  | 7 ++++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx
index 62c35d36b..9a4ed247a 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/AssetCard.tsx
@@ -36,7 +36,6 @@ export const AssetCard = ({
         minH="100px"
         gap={2}
         p={3}
-        w="270px"
         background="pebble.800"
         borderRadius="8px"
         {...cardProps}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
index 0a33d55cd..09be97b31 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
@@ -43,7 +43,12 @@ export const PoolSwap = ({
   const { amount: outAmount, denom: outDenom } = coinsFromStr(outAsset)[0];
 
   return (
-    <Grid gap={4} alignItems="center" mb={6} templateColumns="1fr 24px 1fr">
+    <Grid
+      gap={4}
+      alignItems="center"
+      mb={6}
+      templateColumns="minmax(250px, 1fr) 24px minmax(250px, 1fr)"
+    >
       <div>
         <Text variant="body2" textColor="pebble.500" fontWeight={500}>
           From

From 0f7ea1bfab8a48600df0de5283b69a24b25b95fb Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 25 May 2023 17:03:19 +0700
Subject: [PATCH 159/354] fix: msgtype

---
 .../pool-details/tables/pool-txs/PoolTxsMsg.tsx     | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
index a1d7046fb..435699e37 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -38,7 +38,6 @@ export const PoolTxsMsg = ({
     .concat("1fr")
     .join(" ");
   const isFirstSubRow = msgIndex === 0;
-
   return (
     <Box
       w="full"
@@ -62,7 +61,7 @@ export const PoolTxsMsg = ({
             AmpTrackExpand(
               !isOpen ? "expand" : "collapse",
               "pool_tx_msg",
-              `pool_txs-${message.type.split(".")[-1]}`
+              `pool_txs-${message.type.split(".").at(-1)}`
             );
           }
           onToggle();
@@ -111,7 +110,9 @@ export const PoolTxsMsg = ({
               msg={message}
               pool={pool}
               assetInfos={assetInfos}
-              ampCopierSection={`pool_txs-${message.type.split(".")[-1]}-row`}
+              ampCopierSection={`pool_txs-${message.type
+                .split(".")
+                .at(-1)}-row`}
             />
           ) : (
             <PoolOtherMsgs otherMsgs={otherMsgs} isIbc={transaction.isIbc} />
@@ -156,9 +157,9 @@ export const PoolTxsMsg = ({
               pool={pool}
               assetInfos={assetInfos}
               isOpened={isOpen}
-              ampCopierSection={`pool_txs-${
-                message.type.split(".")[-1]
-              }-detail`}
+              ampCopierSection={`pool_txs-${message.type
+                .split(".")
+                .at(-1)}-detail`}
             />
           </TableNoBorderRow>
         </Grid>

From c15d56bf4377b910d51d69a5f985cdac717a3117 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 25 May 2023 17:51:54 +0700
Subject: [PATCH 160/354] fix(components): fix as request change

---
 src/lib/components/icon/CustomIcon.tsx |  34 ++--
 src/lib/layout/Footer.tsx              | 213 +++++++++++++------------
 2 files changed, 135 insertions(+), 112 deletions(-)

diff --git a/src/lib/components/icon/CustomIcon.tsx b/src/lib/components/icon/CustomIcon.tsx
index 6b9b3a000..f27579d61 100644
--- a/src/lib/components/icon/CustomIcon.tsx
+++ b/src/lib/components/icon/CustomIcon.tsx
@@ -952,6 +952,17 @@ export const ICONS = {
     ),
     viewBox: viewboxDefault,
   },
+  linkedin: {
+    svg: (
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM5.7207 12H3.85032V5.98523H5.7207V12ZM4.78551 5.16571C4.18502 5.16571 3.7002 4.68089 3.7002 4.08285C3.7002 3.48482 4.18502 3 4.78551 3C5.38354 3 5.86837 3.48482 5.86837 4.08285C5.86837 4.67842 5.38354 5.16571 4.78551 5.16571ZM12.7199 12H10.852V9.07629C10.852 8.37982 10.8397 7.48154 9.87985 7.48154C8.90774 7.48154 8.76008 8.242 8.76008 9.02707V12H6.89462V5.98523H8.68625V6.80722H8.71086C8.95942 6.3347 9.56976 5.83511 10.4779 5.83511C12.3704 5.83511 12.7199 7.08039 12.7199 8.69975V12Z"
+        fill="currentColor"
+      />
+    ),
+    viewBox: viewboxDefault,
+  },
   medium: {
     svg: (
       <path
@@ -963,6 +974,17 @@ export const ICONS = {
     ),
     viewBox: viewboxDefault,
   },
+  "medium-solid": {
+    svg: (
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM5.90093 11C7.50298 11 8.80176 9.65688 8.80176 8.00005C8.80176 6.34322 7.50307 5 5.90093 5C4.29879 5 3 6.34352 3 8.00005C3 9.65658 4.29888 11 5.90093 11ZM10.5338 10.8244C11.3348 10.8244 11.9842 9.55964 11.9842 8.0001H11.9841C11.9841 6.44014 11.3347 5.17578 10.5337 5.17578C9.73258 5.17578 9.08329 6.44055 9.08329 8.0001C9.08329 9.55964 9.73268 10.8244 10.5338 10.8244ZM13.2855 8.00015C13.2855 9.39712 13.0572 10.5303 12.7754 10.5303C12.4936 10.5303 12.2653 9.39742 12.2653 8.00015C12.2653 6.60287 12.4937 5.47001 12.7754 5.47001C13.0571 5.47001 13.2855 6.60277 13.2855 8.00015Z"
+        fill="currentColor"
+      />
+    ),
+    viewBox: viewboxDefault,
+  },
   migrate: {
     svg: (
       <path
@@ -1104,7 +1126,7 @@ export const ICONS = {
     ),
     viewBox: "0 0  16 16",
   },
-  "reddit-solid": {
+  reddit: {
     svg: (
       <path
         fillRule="evenodd"
@@ -1115,15 +1137,7 @@ export const ICONS = {
     ),
     viewBox: viewboxDefault,
   },
-  reddit: {
-    svg: (
-      <path
-        d="M13.4388 6.06351C12.9962 6.06351 12.6067 6.24645 12.3205 6.53268C11.2671 5.80384 9.84777 5.33467 8.27502 5.28451L9.09238 1.60196L11.695 2.18621C11.695 2.82357 12.2143 3.3429 12.8516 3.3429C13.5008 3.3429 14.0231 2.80882 14.0231 2.17145C14.0231 1.53409 13.5038 1 12.8516 1C12.3972 1 12.0048 1.27442 11.81 1.64917L8.93599 1.0118C8.7914 0.973443 8.64976 1.07672 8.6114 1.22131L7.71437 5.28155C6.15342 5.34647 4.74886 5.81564 3.69249 6.54448C3.40626 6.24645 3.00201 6.06351 2.55939 6.06351C0.918771 6.06351 0.381732 8.26477 1.88367 9.01722C1.83056 9.25033 1.80695 9.49819 1.80695 9.74606C1.80695 12.2188 4.59247 14.2224 8.0124 14.2224C11.4471 14.2224 14.2326 12.2188 14.2326 9.74606C14.2326 9.49819 14.206 9.23852 14.1411 9.00541C15.6136 8.25002 15.0706 6.06351 13.4388 6.06351ZM4.26493 9.17361C4.26493 8.52444 4.78427 8.00216 5.43639 8.00216C6.07375 8.00216 6.59308 8.52149 6.59308 9.17361C6.59308 9.81097 6.07375 10.3303 5.43639 10.3303C4.78722 10.3333 4.26493 9.81097 4.26493 9.17361ZM10.5884 11.9326C9.51434 13.0066 6.48391 13.0066 5.40983 11.9326C5.2918 11.8293 5.2918 11.6463 5.40983 11.5283C5.51311 11.425 5.69605 11.425 5.79933 11.5283C6.61964 12.3693 9.34024 12.384 10.196 11.5283C10.2992 11.425 10.4822 11.425 10.5855 11.5283C10.7064 11.6463 10.7064 11.8293 10.5884 11.9326ZM10.5648 10.3333C9.92744 10.3333 9.40811 9.81392 9.40811 9.17656C9.40811 8.52739 9.92744 8.00511 10.5648 8.00511C11.214 8.00511 11.7363 8.52444 11.7363 9.17656C11.7333 9.81097 11.214 10.3333 10.5648 10.3333Z"
-        fill="currentColor"
-      />
-    ),
-    viewBox: viewboxDefault,
-  },
+
   redo: {
     svg: (
       <path
diff --git a/src/lib/layout/Footer.tsx b/src/lib/layout/Footer.tsx
index 7321b2aac..b4137d84d 100644
--- a/src/lib/layout/Footer.tsx
+++ b/src/lib/layout/Footer.tsx
@@ -1,13 +1,13 @@
-import { Flex, Text, Button, Image } from "@chakra-ui/react";
+import { Flex, Text, Image, Button } from "@chakra-ui/react";
 import Link from "next/link";
 
 import { CURR_THEME } from "env";
 import { CustomIcon } from "lib/components/icon";
 import type { IconKeys } from "lib/components/icon";
-import { AmpEvent, AmpTrack, AmpTrackCelatone } from "lib/services/amplitude";
+import { AmpEvent, AmpTrack, AmpTrackSocial } from "lib/services/amplitude";
 
 interface SocialMenuType {
-  url: string | undefined;
+  url?: string;
   icon: IconKeys;
   slug: string;
 }
@@ -63,12 +63,12 @@ const themedSocial: SocialMenuType[] = [
   },
   {
     url: CURR_THEME.socialMedia?.reddit,
-    icon: "reddit-solid",
+    icon: "reddit",
     slug: "reddit",
   },
   {
     url: CURR_THEME.socialMedia?.linkedin,
-    icon: "medium",
+    icon: "linkedin",
     slug: "linkedin",
   },
 ];
@@ -93,34 +93,32 @@ const Footer = () => {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <Image src={CURR_THEME.footer?.logo} h={8} mr={2} />
+            <Image src={isThemed.logo} h={8} mr={2} />
           </Link>
-          {themedSocial.map((item) => (
-            <>
-              {item.url && (
-                <Link
+          {themedSocial.map(
+            (item) =>
+              item.url !== undefined && (
+                <Button
+                  variant="ghost"
+                  size="xs"
                   key={`social-${item.slug}`}
-                  href={item.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  onClick={() => AmpTrackCelatone(item.url ?? "")}
+                  gap={1}
+                  px={0}
+                  onClick={() => AmpTrackSocial(item.url ?? "")}
                 >
-                  <Button variant="ghost-gray" size="xs" px={0}>
-                    <CustomIcon name={item.icon} boxSize={5} color="gray.600" />
-                  </Button>
-                </Link>
-              )}
-            </>
-          ))}
+                  <CustomIcon name={item.icon} boxSize={5} color="gray.600" />
+                </Button>
+              )
+          )}
         </Flex>
         <Text variant="body3" color="gray.400">
-          {CURR_THEME.footer?.description}
+          {isThemed.description}
         </Text>
       </Flex>
       <Flex direction="row" alignItems="end" minW="60px">
-        <Button
-          variant="ghost-gray"
-          size="xs"
+        <Flex
+          gap={1}
+          align="center"
           sx={{ _hover: { "> div > svg": { opacity: "100" } } }}
         >
           <Link
@@ -131,6 +129,7 @@ const Footer = () => {
           >
             <Flex
               gap={1}
+              mr={1}
               align="center"
               sx={{ _hover: { "> div": { opacity: "100" } } }}
             >
@@ -150,40 +149,45 @@ const Footer = () => {
               </Text>
             </Flex>
           </Link>
-        </Button>
+        </Flex>
         <Link
           href="https://feedback.alleslabs.com"
           target="_blank"
           rel="noopener noreferrer"
           onClick={() => AmpTrack(AmpEvent.FEEDBACK)}
         >
-          <Button variant="ghost-gray" size="xs" pl="1" mr="1">
-            <Flex gap={1} align="center">
-              <CustomIcon name="feedback" color="gray.600" />
-              <Text variant="body3" color="text.dark">
-                Feedback
-              </Text>
-            </Flex>
-          </Button>
+          <Flex
+            gap={1}
+            pr={2}
+            pl={1}
+            borderRadius={8}
+            mr={1}
+            align="center"
+            _hover={{ background: "gray.800" }}
+            transition="all .25s ease-in-out"
+          >
+            <CustomIcon name="feedback" color="gray.600" />
+            <Text variant="body3" color="text.dark">
+              Feedback
+            </Text>
+          </Flex>
         </Link>
         <Flex direction="row" gap={1} align="center">
-          {socialMenu.map((item) => (
-            <>
-              {item.url && (
-                <Link
+          {socialMenu.map(
+            (item) =>
+              item.url && (
+                <Button
+                  variant="ghost"
+                  size="xs"
                   key={`themed-${item.slug}`}
-                  href={item.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  onClick={() => AmpTrackCelatone(item.url ?? "")}
+                  gap={1}
+                  px={0}
+                  onClick={() => AmpTrackSocial(item.url ?? "")}
                 >
-                  <Button variant="ghost-gray" size="xs" px={0}>
-                    <CustomIcon name={item.icon} boxSize={4} color="gray.600" />
-                  </Button>
-                </Link>
-              )}
-            </>
-          ))}
+                  <CustomIcon name={item.icon} boxSize={4} color="gray.600" />
+                </Button>
+              )
+          )}
         </Flex>
       </Flex>
     </Flex>
@@ -197,73 +201,78 @@ const Footer = () => {
       mx={1}
     >
       <Flex direction="row" gap={1} align="center">
-        {socialMenu.map((item) => (
-          <>
-            {item.url && (
-              <Link
+        {socialMenu.map(
+          (item) =>
+            item.url && (
+              <Button
+                variant="ghost"
+                size="xs"
+                gap={1}
+                px={0}
                 key={`social-${item.slug}`}
-                href={item.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                onClick={() => AmpTrackCelatone(item.url ?? "")}
+                onClick={() => AmpTrackSocial(item.url ?? "")}
               >
-                <Button variant="ghost-gray" size="xs" px={1}>
-                  <CustomIcon name={item.icon} boxSize={5} color="gray.600" />
-                </Button>
-              </Link>
-            )}
-          </>
-        ))}
+                <CustomIcon name={item.icon} boxSize={5} color="gray.600" />
+              </Button>
+            )
+        )}
         <Link
           href="https://feedback.alleslabs.com"
           target="_blank"
           rel="noopener noreferrer"
           onClick={() => AmpTrack(AmpEvent.FEEDBACK)}
         >
-          <Button variant="ghost-gray" size="xs">
-            <Flex gap={1} align="center">
-              <CustomIcon name="feedback" color="gray.600" />
-              <Text variant="body3" color="text.dark">
-                Feedback
-              </Text>
-            </Flex>
-          </Button>
+          <Flex
+            gap={1}
+            pr={2}
+            pl={1}
+            borderRadius={8}
+            mr={1}
+            align="center"
+            _hover={{ background: "gray.800" }}
+            transition="all .25s ease-in-out"
+          >
+            <CustomIcon name="feedback" color="gray.600" />
+            <Text variant="body3" color="text.dark">
+              Feedback
+            </Text>
+          </Flex>
         </Link>
       </Flex>
       <Flex direction="column" alignItems="end" minW="60px">
-        <Button
-          variant="ghost-gray"
-          size="xs"
-          sx={{ _hover: { "> div > svg": { opacity: "100" } } }}
+        <Link
+          href="https://twitter.com/alleslabs"
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={() => AmpTrack(AmpEvent.ALLESLABS)}
         >
-          <Link
-            href="https://twitter.com/alleslabs"
-            target="_blank"
-            rel="noopener noreferrer"
-            onClick={() => AmpTrack(AmpEvent.ALLESLABS)}
+          <Flex
+            gap={1}
+            align="center"
+            _hover={{
+              "& svg": {
+                opacity: 1,
+              },
+            }}
           >
-            <Flex
-              gap={1}
-              align="center"
-              sx={{ _hover: { "> div": { opacity: "100" } } }}
+            <CustomIcon
+              name="alles"
+              opacity={0}
+              transition="opacity .25s ease-in-out"
+            />
+            <Text variant="body3" color="text.dark">
+              Made by
+            </Text>
+            <Text
+              variant="body3"
+              color="secondary.main"
+              transition="all .25s ease-in-out"
+              _hover={{ color: "secondary.light" }}
             >
-              <Flex opacity="0" transition="all .25s ease-in-out">
-                <CustomIcon name="alles" />
-              </Flex>
-              <Text variant="body3" color="text.dark">
-                Made by
-              </Text>
-              <Text
-                variant="body3"
-                color="secondary.main"
-                transition="all .25s ease-in-out"
-                _hover={{ color: "secondary.light" }}
-              >
-                Alles Labs
-              </Text>
-            </Flex>
-          </Link>
-        </Button>
+              Alles Labs
+            </Text>
+          </Flex>
+        </Link>
       </Flex>
     </Flex>
   );

From 90407077d368f2b2906fad2fedaa88f105e1eca5 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 26 May 2023 11:15:56 +0700
Subject: [PATCH 161/354] fix: comment

---
 .../components/unsupportedSection/index.tsx   | 19 +++++++++++--------
 src/lib/types/pool.ts                         |  2 +-
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
index 1043c594c..a6b86c2f0 100644
--- a/src/lib/pages/pools/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -87,7 +87,7 @@ export const UnsupportedSection = ({
     refetchCount();
     setPageSize(size);
     setCurrentPage(1);
-    updateExpandedIndexes([]);
+    setExpandedIndexes([]);
   };
 
   const { pools, isLoading } = usePools(
@@ -179,13 +179,16 @@ export const UnsupportedSection = ({
               variant="outline-gray"
               w="94px"
               size="sm"
-              onClick={() =>
-                setExpandedIndexes((prev) => {
-                  const isExpand = !prev.length;
-                  AmpTrackExpandAll(isExpand ? "expand" : "collapse");
-                  return isExpand ? Array.from(Array(pageSize).keys()) : [];
-                })
-              }
+              onClick={() => {
+                AmpTrackExpandAll(
+                  !expandedIndexes.length ? "expand" : "collapse"
+                );
+                setExpandedIndexes(
+                  !expandedIndexes.length
+                    ? Array.from(Array(pageSize).keys())
+                    : []
+                );
+              }}
             >
               {expandedIndexes.length ? "Collapse All" : "Expand All"}
             </Button>
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index 63bc7243c..2519b1316 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -37,8 +37,8 @@ export interface PoolDetail<
   swapFee: Ratio<number>;
   exitFee: Ratio<number>;
   futurePoolGovernor: string | null;
+  weight: PoolWeight<TWeight>[] | null;
   smoothWeightChangeParams: object | null;
   scalingFactors: string[] | null;
   scalingFactorController: string | null;
-  weight: PoolWeight<TWeight>[] | null;
 }

From 097865af6afc33e63ede3fc6b44e679fee471363 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 26 May 2023 13:51:45 +0700
Subject: [PATCH 162/354] fix: comment

---
 src/lib/pages/pools/components/supportedSection/index.tsx   | 2 +-
 src/lib/pages/pools/components/unsupportedSection/index.tsx | 2 +-
 src/lib/services/amplitude.tsx                              | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/pages/pools/components/supportedSection/index.tsx b/src/lib/pages/pools/components/supportedSection/index.tsx
index bf976503b..415437633 100644
--- a/src/lib/pages/pools/components/supportedSection/index.tsx
+++ b/src/lib/pages/pools/components/supportedSection/index.tsx
@@ -189,7 +189,7 @@ export const SupportedSection = ({
               pr={1}
               onClick={() => {
                 const isDesc = !showNewest;
-                AmpTrackUseSort(isDesc ? "Descending" : "Ascending");
+                AmpTrackUseSort(isDesc ? "descending" : "ascending");
                 setShowNewest(isDesc);
               }}
             >
diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
index a6b86c2f0..c26529a79 100644
--- a/src/lib/pages/pools/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -163,7 +163,7 @@ export const UnsupportedSection = ({
               pr={1}
               onClick={() => {
                 const isDesc = !showNewest;
-                AmpTrackUseSort(isDesc ? "Descending" : "Ascending");
+                AmpTrackUseSort(isDesc ? "descending" : "ascending");
                 setShowNewest(isDesc);
               }}
             >
diff --git a/src/lib/services/amplitude.tsx b/src/lib/services/amplitude.tsx
index d3a52e56f..4784492db 100644
--- a/src/lib/services/amplitude.tsx
+++ b/src/lib/services/amplitude.tsx
@@ -255,7 +255,7 @@ export const AmpTrackPaginationNavigate = (
     currentPage,
   });
 
-export const AmpTrackUseSort = (order: "Ascending" | "Descending") =>
+export const AmpTrackUseSort = (order: "ascending" | "descending") =>
   track(AmpEvent.USE_SORT, { order });
 
 export const AmpTrackUseView = (view: string) =>

From 67db33e4b5242677a1e17130578088d13aac9081 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 26 May 2023 15:16:59 +0700
Subject: [PATCH 163/354] refactor: component rendering and link mapping logic

---
 src/lib/layout/Footer.tsx | 346 ++++++++++++++++----------------------
 1 file changed, 145 insertions(+), 201 deletions(-)

diff --git a/src/lib/layout/Footer.tsx b/src/lib/layout/Footer.tsx
index b4137d84d..dc964c0e7 100644
--- a/src/lib/layout/Footer.tsx
+++ b/src/lib/layout/Footer.tsx
@@ -1,4 +1,5 @@
-import { Flex, Text, Image, Button } from "@chakra-ui/react";
+import type { IconProps } from "@chakra-ui/react";
+import { Flex, Text, Image } from "@chakra-ui/react";
 import Link from "next/link";
 
 import { CURR_THEME } from "env";
@@ -7,7 +8,7 @@ import type { IconKeys } from "lib/components/icon";
 import { AmpEvent, AmpTrack, AmpTrackSocial } from "lib/services/amplitude";
 
 interface SocialMenuType {
-  url?: string;
+  url: string;
   icon: IconKeys;
   slug: string;
 }
@@ -35,43 +36,129 @@ const socialMenu: SocialMenuType[] = [
   },
 ];
 
-const themedSocial: SocialMenuType[] = [
-  {
-    url: CURR_THEME.socialMedia?.github,
-    icon: "github",
-    slug: "github",
-  },
-  {
-    url: CURR_THEME.socialMedia?.discord,
-    icon: "discord",
-    slug: "discord",
-  },
-  {
-    url: CURR_THEME.socialMedia?.twitter,
-    icon: "twitter",
-    slug: "twitter",
-  },
-  {
-    url: CURR_THEME.socialMedia?.telegram,
-    icon: "telegram",
-    slug: "telegram",
-  },
-  {
-    url: CURR_THEME.socialMedia?.medium,
-    icon: "medium",
-    slug: "medium",
-  },
-  {
-    url: CURR_THEME.socialMedia?.reddit,
-    icon: "reddit",
-    slug: "reddit",
-  },
-  {
-    url: CURR_THEME.socialMedia?.linkedin,
-    icon: "linkedin",
-    slug: "linkedin",
-  },
-];
+const socialSequence = {
+  github: 0,
+  discord: 1,
+  twitter: 2,
+  telegram: 3,
+  medium: 4,
+  reddit: 5,
+  linkedin: 6,
+};
+
+const themedSocial: SocialMenuType[] = Object.entries(
+  CURR_THEME.socialMedia ?? {}
+).reduce<SocialMenuType[]>((acc, curr) => {
+  if (curr[0] in socialSequence) {
+    acc[socialSequence[curr[0] as keyof typeof socialSequence]] = {
+      url: curr[1],
+      icon: curr[0] as IconKeys,
+      slug: curr[0],
+    };
+  }
+  return acc;
+}, []);
+
+const SocialMenuRender = ({
+  isThemed,
+  iconSize,
+}: {
+  isThemed?: boolean;
+  iconSize: IconProps["boxSize"];
+}) => (
+  <>
+    {(isThemed ? themedSocial : socialMenu).map((item) => (
+      <Link
+        key={`${isThemed ? "themed" : "social"}-${item.slug}`}
+        href={item.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={() => {
+          AmpTrackSocial(item.url);
+        }}
+      >
+        <Flex
+          borderRadius="8px"
+          transition="all .25s ease-in-out"
+          _hover={{ backgroundColor: "gray.800" }}
+        >
+          <CustomIcon name={item.icon} boxSize={iconSize} color="gray.600" />
+        </Flex>
+      </Link>
+    ))}
+  </>
+);
+
+const AllesFeedback = () => (
+  <Link
+    href="https://feedback.alleslabs.com"
+    target="_blank"
+    rel="noopener noreferrer"
+    onClick={() => AmpTrack(AmpEvent.FEEDBACK)}
+  >
+    <Flex
+      gap={1}
+      pr={2}
+      pl={1}
+      borderRadius={8}
+      align="center"
+      _hover={{ background: "gray.800" }}
+      transition="all .25s ease-in-out"
+    >
+      <CustomIcon name="feedback" color="gray.600" />
+      <Text variant="body3" color="text.dark">
+        Feedback
+      </Text>
+    </Flex>
+  </Link>
+);
+
+const IconLink = ({
+  href,
+  icon,
+  text1,
+  text2,
+}: {
+  href: string;
+  icon: IconKeys;
+  text1: string;
+  text2: string;
+}) => (
+  <Link
+    href={href}
+    target="_blank"
+    rel="noopener noreferrer"
+    onClick={() => AmpTrack(AmpEvent.ALLESLABS)}
+  >
+    <Flex
+      gap={1}
+      align="center"
+      _hover={{
+        "& svg": {
+          opacity: 1,
+        },
+      }}
+    >
+      <CustomIcon
+        name={icon}
+        opacity={0}
+        transition="opacity .25s ease-in-out"
+      />
+      <Text variant="body3" color="text.dark">
+        {text1}
+        <Text
+          as="span"
+          ml={1}
+          color="secondary.main"
+          transition="all .25s ease-in-out"
+          _hover={{ color: "secondary.light" }}
+        >
+          {text2}
+        </Text>
+      </Text>
+    </Flex>
+  </Link>
+);
 
 const Footer = () => {
   const isThemed = CURR_THEME.footer;
@@ -86,7 +173,7 @@ const Footer = () => {
       mx={1}
       background="background.overlay"
     >
-      <Flex direction="column" gap={2} align="start">
+      <Flex direction="column" gap={2}>
         <Flex direction="row" gap={1} align="center">
           <Link
             href={CURR_THEME.socialMedia?.website ?? ""}
@@ -95,100 +182,21 @@ const Footer = () => {
           >
             <Image src={isThemed.logo} h={8} mr={2} />
           </Link>
-          {themedSocial.map(
-            (item) =>
-              item.url !== undefined && (
-                <Button
-                  variant="ghost"
-                  size="xs"
-                  key={`social-${item.slug}`}
-                  gap={1}
-                  px={0}
-                  onClick={() => AmpTrackSocial(item.url ?? "")}
-                >
-                  <CustomIcon name={item.icon} boxSize={5} color="gray.600" />
-                </Button>
-              )
-          )}
+          <SocialMenuRender isThemed iconSize={5} />
         </Flex>
         <Text variant="body3" color="gray.400">
           {isThemed.description}
         </Text>
       </Flex>
-      <Flex direction="row" alignItems="end" minW="60px">
-        <Flex
-          gap={1}
-          align="center"
-          sx={{ _hover: { "> div > svg": { opacity: "100" } } }}
-        >
-          <Link
-            href="https://celat.one/"
-            target="_blank"
-            rel="noopener noreferrer"
-            onClick={() => AmpTrack(AmpEvent.ALLESLABS)}
-          >
-            <Flex
-              gap={1}
-              mr={1}
-              align="center"
-              sx={{ _hover: { "> div": { opacity: "100" } } }}
-            >
-              <Flex opacity="0" transition="all .25s ease-in-out">
-                <CustomIcon name="celatone" />
-              </Flex>
-              <Text variant="body3" color="text.dark">
-                Powered by
-              </Text>
-              <Text
-                variant="body3"
-                color="lilac.main"
-                transition="all .25s ease-in-out"
-                _hover={{ color: "lilac.light" }}
-              >
-                Celatone
-              </Text>
-            </Flex>
-          </Link>
-        </Flex>
-        <Link
-          href="https://feedback.alleslabs.com"
-          target="_blank"
-          rel="noopener noreferrer"
-          onClick={() => AmpTrack(AmpEvent.FEEDBACK)}
-        >
-          <Flex
-            gap={1}
-            pr={2}
-            pl={1}
-            borderRadius={8}
-            mr={1}
-            align="center"
-            _hover={{ background: "gray.800" }}
-            transition="all .25s ease-in-out"
-          >
-            <CustomIcon name="feedback" color="gray.600" />
-            <Text variant="body3" color="text.dark">
-              Feedback
-            </Text>
-          </Flex>
-        </Link>
-        <Flex direction="row" gap={1} align="center">
-          {socialMenu.map(
-            (item) =>
-              item.url && (
-                <Button
-                  variant="ghost"
-                  size="xs"
-                  key={`themed-${item.slug}`}
-                  gap={1}
-                  px={0}
-                  onClick={() => AmpTrackSocial(item.url ?? "")}
-                >
-                  <CustomIcon name={item.icon} boxSize={4} color="gray.600" />
-                </Button>
-              )
-          )}
-        </Flex>
+      <Flex align="end" justifyContent="flex-end" gap={1}>
+        <IconLink
+          href="https://celat.one/"
+          icon="celatone"
+          text1="Powered by"
+          text2="Celatone"
+        />
+        <AllesFeedback />
+        <SocialMenuRender iconSize={4} />
       </Flex>
     </Flex>
   ) : (
@@ -201,79 +209,15 @@ const Footer = () => {
       mx={1}
     >
       <Flex direction="row" gap={1} align="center">
-        {socialMenu.map(
-          (item) =>
-            item.url && (
-              <Button
-                variant="ghost"
-                size="xs"
-                gap={1}
-                px={0}
-                key={`social-${item.slug}`}
-                onClick={() => AmpTrackSocial(item.url ?? "")}
-              >
-                <CustomIcon name={item.icon} boxSize={5} color="gray.600" />
-              </Button>
-            )
-        )}
-        <Link
-          href="https://feedback.alleslabs.com"
-          target="_blank"
-          rel="noopener noreferrer"
-          onClick={() => AmpTrack(AmpEvent.FEEDBACK)}
-        >
-          <Flex
-            gap={1}
-            pr={2}
-            pl={1}
-            borderRadius={8}
-            mr={1}
-            align="center"
-            _hover={{ background: "gray.800" }}
-            transition="all .25s ease-in-out"
-          >
-            <CustomIcon name="feedback" color="gray.600" />
-            <Text variant="body3" color="text.dark">
-              Feedback
-            </Text>
-          </Flex>
-        </Link>
-      </Flex>
-      <Flex direction="column" alignItems="end" minW="60px">
-        <Link
-          href="https://twitter.com/alleslabs"
-          target="_blank"
-          rel="noopener noreferrer"
-          onClick={() => AmpTrack(AmpEvent.ALLESLABS)}
-        >
-          <Flex
-            gap={1}
-            align="center"
-            _hover={{
-              "& svg": {
-                opacity: 1,
-              },
-            }}
-          >
-            <CustomIcon
-              name="alles"
-              opacity={0}
-              transition="opacity .25s ease-in-out"
-            />
-            <Text variant="body3" color="text.dark">
-              Made by
-            </Text>
-            <Text
-              variant="body3"
-              color="secondary.main"
-              transition="all .25s ease-in-out"
-              _hover={{ color: "secondary.light" }}
-            >
-              Alles Labs
-            </Text>
-          </Flex>
-        </Link>
+        <SocialMenuRender iconSize={5} />
+        <AllesFeedback />
       </Flex>
+      <IconLink
+        href="https://twitter.com/alleslabs"
+        icon="alles"
+        text1="Made by"
+        text2="Alles Labs"
+      />
     </Flex>
   );
 };

From 31363fc716cdb692a6dd89fbafabfc2652677e98 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 26 May 2023 15:45:41 +0700
Subject: [PATCH 164/354] refactor: use nullish instead of or

---
 src/lib/services/proposalService.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/services/proposalService.ts b/src/lib/services/proposalService.ts
index 6e3ce65cc..be921fc7d 100644
--- a/src/lib/services/proposalService.ts
+++ b/src/lib/services/proposalService.ts
@@ -332,7 +332,7 @@ export const useGovParams = (): UseQueryResult<GovParams> => {
                 precision: assetInfo?.precision,
                 decimalPoints: 2,
               }),
-              precision: assetInfo?.precision || 0,
+              precision: assetInfo?.precision ?? 0,
             },
             minInitialDeposit: big(params[0].minInitialDepositRatio)
               .times(minDepositAmount)

From c833cf75ef8954032c954a892f0e710afb28db9a Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 26 May 2023 15:54:53 +0700
Subject: [PATCH 165/354] fix: comment

---
 src/lib/pages/pools/components/unsupportedSection/index.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
index c26529a79..9398ef341 100644
--- a/src/lib/pages/pools/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -183,10 +183,8 @@ export const UnsupportedSection = ({
                 AmpTrackExpandAll(
                   !expandedIndexes.length ? "expand" : "collapse"
                 );
-                setExpandedIndexes(
-                  !expandedIndexes.length
-                    ? Array.from(Array(pageSize).keys())
-                    : []
+                setExpandedIndexes((prev) =>
+                  !prev.length ? Array.from(Array(pageSize).keys()) : []
                 );
               }}
             >

From 19f92b8eeee61f246abb4feb329899e7d5a45e6f Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Fri, 26 May 2023 16:04:16 +0700
Subject: [PATCH 166/354] fix(components): change config structure and fix seo

---
 src/config/theme/default.ts               | 107 +++++++++++++++++++++
 src/config/theme/index.ts                 |   2 +
 src/config/{theme.ts => theme/osmosis.ts} | 112 +---------------------
 src/lib/components/Meta.tsx               |  25 ++---
 src/lib/components/Seo.tsx                |  22 ++---
 5 files changed, 124 insertions(+), 144 deletions(-)
 create mode 100644 src/config/theme/default.ts
 create mode 100644 src/config/theme/index.ts
 rename src/config/{theme.ts => theme/osmosis.ts} (53%)

diff --git a/src/config/theme/default.ts b/src/config/theme/default.ts
new file mode 100644
index 000000000..2a5a919df
--- /dev/null
+++ b/src/config/theme/default.ts
@@ -0,0 +1,107 @@
+import type { ThemeConfig } from "config/type";
+
+export const DEFAULT_THEME: ThemeConfig = {
+  branding: {
+    logo: "https://assets.alleslabs.dev/branding/logo/logo.svg",
+    favicon: "https://assets.alleslabs.dev/branding/favicon.ico",
+    seo: {
+      appName: "celatone",
+      title: "Celatone Explorer for Cosmos chain",
+      description: "A smart contract powered explorer for the Cosmos.",
+      image: "https://assets.alleslabs.dev/branding/celatone-cover.jpg",
+      twitter: {
+        handle: "@celatone_",
+        cardType: "summary_large_image",
+      },
+    },
+  },
+  fonts: {
+    heading: {
+      url: "https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap",
+      name: "Poppins, serif",
+    },
+    body: {
+      url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap",
+      name: "Space Grotesk, sans-serif",
+    },
+  },
+  colors: {
+    gradient: {
+      main: "linear(to-tr, #5235EF, #6145FC)",
+    },
+    error: {
+      main: "#FF666E",
+      light: "#FF8086",
+      dark: "#B43E44",
+      background: "#4C1A1D",
+    },
+    warning: {
+      main: "#FFBB33",
+      light: "#FFCC66",
+      dark: "#CC8800",
+      background: "#523600",
+    },
+    success: {
+      main: "#42BEA6",
+      light: "#67CBB7",
+      dark: "#207966",
+      background: "#102E28",
+    },
+    background: {
+      main: "#111117",
+      overlay: "rgba(17, 17, 23, 0.7)",
+    },
+    text: {
+      main: "#F7F2FE",
+      dark: "#ADADC2",
+      disabled: "#8A8AA5",
+    },
+    primary: {
+      main: "#5942F3",
+      light: "#9793F3",
+      lighter: "#DCDBFB",
+      dark: "#3E38B0",
+      darker: "#292676",
+      background: "#181733",
+    },
+    secondary: {
+      main: "#D8BEFC",
+      light: "#E8D8FD",
+      dark: "#A28FBD",
+      darker: "#6C5F7E",
+      background: "#36303F",
+    },
+    accent: {
+      main: "#C6E141",
+      light: "#DDED8D",
+      lighter: "#E8F3B3",
+      dark: "#95A931",
+      darker: "#637121",
+      background: "#3D470B",
+    },
+    gray: {
+      100: "#F7F2FE",
+      400: "#ADADC2",
+      500: "#8A8AA5",
+      600: "#68688A",
+      700: "#343445",
+      800: "#272734",
+      900: "#1A1A22",
+    },
+  },
+  jsonTheme: "monokai",
+  illustration: {
+    error: "https://assets.alleslabs.dev/illustration/404.svg",
+    searchNotFound:
+      "https://assets.alleslabs.dev/illustration/search-not-found.svg",
+    searchEmpty: "https://assets.alleslabs.dev/illustration/search-empty.svg",
+    disconnected: "https://assets.alleslabs.dev/illustration/disconnected.svg",
+  },
+  socialMedia: {
+    website: "https://celat.one/",
+    github: "https://github.com/alleslabs",
+    twitter: "https://twitter.com/celatone_",
+    medium: "https://blog.alleslabs.com/",
+    telegram: "https://t.me/celatone_announcements",
+  },
+};
diff --git a/src/config/theme/index.ts b/src/config/theme/index.ts
new file mode 100644
index 000000000..16ba88a09
--- /dev/null
+++ b/src/config/theme/index.ts
@@ -0,0 +1,2 @@
+export * from "./default";
+export * from "./osmosis";
diff --git a/src/config/theme.ts b/src/config/theme/osmosis.ts
similarity index 53%
rename from src/config/theme.ts
rename to src/config/theme/osmosis.ts
index 3cadf11d6..93f173c30 100644
--- a/src/config/theme.ts
+++ b/src/config/theme/osmosis.ts
@@ -1,110 +1,4 @@
-import type { ThemeConfig } from "./type";
-
-export const DEFAULT_THEME: ThemeConfig = {
-  branding: {
-    logo: "https://assets.alleslabs.dev/branding/logo/logo.svg",
-    favicon: "https://assets.alleslabs.dev/branding/favicon.ico",
-    seo: {
-      appName: "celatone",
-      title: "Celatone Explorer for Cosmos chain",
-      description: "A smart contract powered explorer for the Cosmos.",
-      image: "https://assets.alleslabs.dev/branding/celatone-cover.jpg",
-      twitter: {
-        handle: "@celatone_",
-        cardType: "summary_large_image",
-      },
-    },
-  },
-  fonts: {
-    heading: {
-      url: "https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap",
-      name: "Poppins, serif",
-    },
-    body: {
-      url: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap",
-      name: "Space Grotesk, sans-serif",
-    },
-  },
-  colors: {
-    gradient: {
-      main: "linear(to-tr, #5235EF, #6145FC)",
-    },
-    error: {
-      main: "#FF666E",
-      light: "#FF8086",
-      dark: "#b43e44",
-      background: "#4C1A1D",
-    },
-    warning: {
-      main: "#FFBB33",
-      light: "#FFCC66",
-      dark: "#CC8800",
-      background: "#523600",
-    },
-    success: {
-      main: "#42BEA6",
-      light: "#67CBB7",
-      dark: "#207966",
-      background: "#102E28",
-    },
-    background: {
-      main: "#111117",
-      overlay: "rgba(17, 17, 23, 0.7)",
-    },
-    text: {
-      main: "#F7F2FE",
-      dark: "#ADADC2",
-      disabled: "#8A8AA5",
-    },
-    primary: {
-      main: "#5942F3",
-      light: "#9793F3",
-      lighter: "#DCDBFB",
-      dark: "#3E38B0",
-      darker: "#292676",
-      background: "#181733",
-    },
-    secondary: {
-      main: "#D8BEFC",
-      light: "#E8D8FD",
-      dark: "#A28FBD",
-      darker: "#6C5F7E",
-      background: "#36303F",
-    },
-    accent: {
-      main: "#C6E141",
-      light: "#DDED8D",
-      lighter: "#E8F3B3",
-      dark: "#95A931",
-      darker: "#637121",
-      background: "#3D470B",
-    },
-    gray: {
-      100: "#F7F2FE",
-      400: "#ADADC2",
-      500: "#8A8AA5",
-      600: "#68688A",
-      700: "#343445",
-      800: "#272734",
-      900: "#1A1A22",
-    },
-  },
-  jsonTheme: "monokai",
-  illustration: {
-    error: "https://assets.alleslabs.dev/illustration/404.svg",
-    searchNotFound:
-      "https://assets.alleslabs.dev/illustration/search-not-found.svg",
-    searchEmpty: "https://assets.alleslabs.dev/illustration/search-empty.svg",
-    disconnected: "https://assets.alleslabs.dev/illustration/disconnected.svg",
-  },
-  socialMedia: {
-    website: "https://celat.one/",
-    github: "https://github.com/alleslabs",
-    twitter: "https://twitter.com/celatone_",
-    medium: "https://blog.alleslabs.com/",
-    telegram: "https://t.me/celatone_announcements",
-  },
-};
+import type { ThemeConfig } from "config/type";
 
 export const OSMOSIS_THEME: ThemeConfig = {
   branding: {
@@ -112,7 +6,7 @@ export const OSMOSIS_THEME: ThemeConfig = {
     favicon: "https://assets.alleslabs.dev/integrations/osmosis/favicon.ico",
     seo: {
       appName: "osmoscan",
-      title: "OsmoScan | Osmosis Explorer powered by Celatone",
+      title: "OsmoScan powered by Celatone",
       description:
         "Explore, deploy, execute, and query smart contracts on Osmosis from a user-friendly web UI",
       image:
@@ -140,7 +34,7 @@ export const OSMOSIS_THEME: ThemeConfig = {
     error: {
       main: "#FF666E",
       light: "#FF8086",
-      dark: "#b43e44",
+      dark: "#B43E44",
       background: "#4C1A1D",
     },
     warning: {
diff --git a/src/lib/components/Meta.tsx b/src/lib/components/Meta.tsx
index 6190ea2b1..f95373a1c 100644
--- a/src/lib/components/Meta.tsx
+++ b/src/lib/components/Meta.tsx
@@ -1,8 +1,6 @@
 import { CURR_THEME, SELECTED_CHAIN } from "env";
 
 const APP_NAME = CURR_THEME.branding.seo.appName;
-const FALLBACK_DESC = "A smart contract powered explorer for the Cosmos.";
-const FALLBACK_IMG = "https://assets.alleslabs.dev/branding/celatone-cover.jpg";
 
 const Meta = () => {
   const chainName = SELECTED_CHAIN || "";
@@ -17,10 +15,7 @@ const Meta = () => {
       <meta name="mobile-web-app-capable" content="yes" />
       <meta name="theme-color" content={CURR_THEME.colors.background.main} />
       <title>{`${title} Explorer | ${CURR_THEME.branding.seo.title}`}</title>
-      <meta
-        name="description"
-        content={CURR_THEME.branding.seo.description ?? FALLBACK_DESC}
-      />
+      <meta name="description" content={CURR_THEME.branding.seo.description} />
 
       {/* Open Graph / Facebook */}
       <meta property="og:type" content="website" />
@@ -30,19 +25,14 @@ const Meta = () => {
       />
       <meta
         property="og:description"
-        content={CURR_THEME.branding.seo.description ?? FALLBACK_DESC}
-      />
-      <meta
-        property="og:image"
-        content={CURR_THEME.branding.seo.image ?? FALLBACK_IMG}
+        content={CURR_THEME.branding.seo.description}
       />
+      <meta property="og:image" content={CURR_THEME.branding.seo.image} />
 
       {/* Twitter */}
       <meta
         property="twitter:card"
-        content={
-          CURR_THEME.branding.seo.twitter.cardType ?? "summary_large_image"
-        }
+        content={CURR_THEME.branding.seo.twitter.cardType}
       />
       <meta
         property="twitter:title"
@@ -50,12 +40,9 @@ const Meta = () => {
       />
       <meta
         property="twitter:description"
-        content={CURR_THEME.branding.seo.description ?? FALLBACK_DESC}
-      />
-      <meta
-        property="twitter:image"
-        content={CURR_THEME.branding.seo.image ?? FALLBACK_IMG}
+        content={CURR_THEME.branding.seo.description}
       />
+      <meta property="twitter:image" content={CURR_THEME.branding.seo.image} />
     </>
   );
 };
diff --git a/src/lib/components/Seo.tsx b/src/lib/components/Seo.tsx
index 36fae990e..d858c721b 100644
--- a/src/lib/components/Seo.tsx
+++ b/src/lib/components/Seo.tsx
@@ -5,27 +5,18 @@ import { CURR_THEME } from "env";
 
 export const CelatoneSeo = () => {
   const { currentChainRecord } = useWallet();
-  const title =
-    CURR_THEME.branding.seo.title ??
-    `${currentChainRecord?.chain.pretty_name} Explorer | Celatone`;
+  const title = `${currentChainRecord?.chain.pretty_name} Explorer | ${CURR_THEME.branding.seo.title}`;
 
   return (
     <DefaultSeo
       title={title}
-      description={
-        CURR_THEME.branding.seo.description ??
-        "A smart contract powered explorer for the Cosmos."
-      }
+      description={CURR_THEME.branding.seo.description}
       openGraph={{
         type: "website",
-        description:
-          CURR_THEME.branding.seo.description ??
-          "A smart contract powered explorer for the Cosmos.",
+        description: CURR_THEME.branding.seo.description,
         images: [
           {
-            url:
-              CURR_THEME.branding.seo.image ??
-              "https://assets.alleslabs.dev/branding/celatone-cover.jpg",
+            url: CURR_THEME.branding.seo.image,
             width: 1200,
             height: 630,
             alt: title,
@@ -33,9 +24,8 @@ export const CelatoneSeo = () => {
         ],
       }}
       twitter={{
-        handle: CURR_THEME.branding.seo.twitter.handle ?? "@celatone_",
-        cardType:
-          CURR_THEME.branding.seo.twitter.cardType ?? "summary_large_image",
+        handle: CURR_THEME.branding.seo.twitter.handle,
+        cardType: CURR_THEME.branding.seo.twitter.cardType,
       }}
     />
   );

From cd1e036066800df10b1cd167c275e0520ebeadc3 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Fri, 26 May 2023 16:20:36 +0700
Subject: [PATCH 167/354] fix(components): restructure breadcrumb items into
 array

---
 src/lib/components/Breadcrumb.tsx             | 91 ++++++++-----------
 src/lib/pages/account-details/index.tsx       | 13 ++-
 src/lib/pages/block-details/index.tsx         |  7 +-
 src/lib/pages/code-details/index.tsx          | 26 +++---
 .../components/ContractTop.tsx                | 13 ++-
 src/lib/pages/contract-list/slug.tsx          |  7 +-
 .../components/DetailHeader.tsx               |  7 +-
 src/lib/pages/tx-details/index.tsx            |  7 +-
 8 files changed, 87 insertions(+), 84 deletions(-)

diff --git a/src/lib/components/Breadcrumb.tsx b/src/lib/components/Breadcrumb.tsx
index 717ae0e3a..43deb221d 100644
--- a/src/lib/components/Breadcrumb.tsx
+++ b/src/lib/components/Breadcrumb.tsx
@@ -2,62 +2,51 @@ import {
   Breadcrumb as ChakraBreadcrumb,
   BreadcrumbItem as ChakraBreadcrumbItem,
   Text,
+  Flex,
 } from "@chakra-ui/react";
 
 import { AppLink } from "./AppLink";
 import { CustomIcon } from "./icon";
 
-interface BreadcrumbProps {
-  primaryPage: string;
-  primaryPath: string;
-  secondaryPage?: string;
-  secondaryPath?: string;
-  currentPage: string;
-  mb?: number;
-}
+type BreadcrumbItemProps = {
+  text: string | null;
+  href?: string;
+};
 
-export const Breadcrumb = ({
-  primaryPage,
-  primaryPath,
-  secondaryPage = "",
-  secondaryPath = "",
-  currentPage,
-  mb = 0,
-}: BreadcrumbProps) => (
-  <ChakraBreadcrumb
-    w="full"
-    spacing="4px"
-    mb={mb}
-    separator={<CustomIcon name="chevron-right" boxSize={3} />}
-  >
-    <ChakraBreadcrumbItem
-      _hover={{ opacity: 0.8 }}
-      transition="all 0.25s ease-in-out"
-    >
-      <AppLink color="text.dark" href={primaryPath}>
-        {primaryPage}
-      </AppLink>
-    </ChakraBreadcrumbItem>
-    {secondaryPage && (
-      <ChakraBreadcrumbItem
-        _hover={{ opacity: 0.8 }}
-        transition="all 0.25s ease-in-out"
-      >
-        <AppLink color="text.dark" href={secondaryPath}>
-          {secondaryPage}
-        </AppLink>
-      </ChakraBreadcrumbItem>
-    )}
-    <ChakraBreadcrumbItem isCurrentPage>
-      <Text
-        variant="body2"
-        className="ellipsis"
-        fontWeight="600"
-        width="250px"
-        color="text.dark"
-      >
-        {currentPage}
-      </Text>
-    </ChakraBreadcrumbItem>
+type BreadcrumbProps = {
+  items: BreadcrumbItemProps[];
+  mb?: number;
+};
+export const Breadcrumb = ({ items, mb = 0 }: BreadcrumbProps) => (
+  <ChakraBreadcrumb w="full" spacing="4px" mb={mb}>
+    {items.map((item) => (
+      <>
+        {item.href ? (
+          <Flex display={item.text ? "flex" : "none"} align="center">
+            <ChakraBreadcrumbItem
+              _hover={{ opacity: 0.8 }}
+              transition="all 0.25s ease-in-out"
+            >
+              <AppLink color="text.dark" href={item.href}>
+                {item.text}
+              </AppLink>
+            </ChakraBreadcrumbItem>
+            <CustomIcon name="chevron-right" boxSize={3} color="gray.600" />
+          </Flex>
+        ) : (
+          <ChakraBreadcrumbItem isCurrentPage>
+            <Text
+              variant="body2"
+              className="ellipsis"
+              fontWeight="600"
+              width="250px"
+              color="text.dark"
+            >
+              {item.text}
+            </Text>
+          </ChakraBreadcrumbItem>
+        )}
+      </>
+    ))}
   </ChakraBreadcrumb>
 );
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 52816fc2e..227ddd4a7 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -94,12 +94,15 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
       <Flex direction="column" mb={6}>
         {publicDetail && (
           <Breadcrumb
+            items={[
+              { text: "Public Projects", href: "/public-project" },
+              {
+                text: publicDetail?.name,
+                href: `/public-project/${publicInfo?.slug}`,
+              },
+              { text: truncate(accountAddress) },
+            ]}
             mb={6}
-            primaryPage="Public Projects"
-            primaryPath="/public-project"
-            secondaryPage={publicDetail?.name}
-            secondaryPath={`/public-project/${publicInfo?.slug}`}
-            currentPage={truncate(accountAddress)}
           />
         )}
         <Flex direction="column" gap={2}>
diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx
index ab58b8d45..3977a638a 100644
--- a/src/lib/pages/block-details/index.tsx
+++ b/src/lib/pages/block-details/index.tsx
@@ -31,9 +31,10 @@ const BlockDetail = () => {
   return (
     <PageContainer>
       <Breadcrumb
-        primaryPage="Blocks"
-        primaryPath="/blocks"
-        currentPage={blockData?.height.toString() ?? ""}
+        items={[
+          { text: "Blocks", href: "/blocks" },
+          { text: blockData?.height.toString() ?? "" },
+        ]}
       />
       {blockData ? (
         <>
diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index 20d5342ea..ed856f78a 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -43,17 +43,21 @@ const CodeDetailsBody = observer(
       <>
         <Flex direction="column">
           <Breadcrumb
-            primaryPage={
-              publicProject.publicCodeData?.name ? "Public Projects" : "Codes"
-            }
-            primaryPath={
-              publicProject.publicCodeData?.name
-                ? `/public-project`
-                : "/recent-codes"
-            }
-            secondaryPage={publicProject.publicDetail?.name}
-            secondaryPath={`/public-project/${publicProject.publicCodeData?.slug}`}
-            currentPage={codeId.toString() ?? ""}
+            items={[
+              {
+                text: publicProject.publicCodeData?.name
+                  ? "Public Projects"
+                  : "Codes",
+                href: publicProject.publicCodeData?.name
+                  ? `/public-project`
+                  : "/recent-codes",
+              },
+              {
+                text: publicProject.publicDetail?.name ?? null,
+                href: `/public-project/${publicProject.publicCodeData?.slug}`,
+              },
+              { text: codeId.toString() ?? "" },
+            ]}
           />
           <Flex direction="column" gap={2} w="full" mt={6}>
             <Flex justify="space-between" align="center">
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index 43b0633de..45ef2c67b 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/src/lib/pages/contract-details/components/ContractTop.tsx
@@ -99,12 +99,15 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
       <Flex direction="column" w="full">
         {publicProject.publicDetail && (
           <Breadcrumb
+            items={[
+              { text: "Public Projects", href: "/public-project" },
+              {
+                text: publicProject.publicDetail.name,
+                href: `/public-project/${publicProject.publicInfo?.slug}`,
+              },
+              { text: truncate(contractAddress) },
+            ]}
             mb={6}
-            primaryPage="Public Projects"
-            primaryPath="/public-project"
-            secondaryPage={publicProject.publicDetail.name}
-            secondaryPath={`/public-project/${publicProject.publicInfo?.slug}`}
-            currentPage={truncate(contractAddress)}
           />
         )}
         <Flex direction="column" gap={2} textOverflow="ellipsis" w="full">
diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx
index 23adc4726..f234af1e8 100644
--- a/src/lib/pages/contract-list/slug.tsx
+++ b/src/lib/pages/contract-list/slug.tsx
@@ -78,9 +78,10 @@ const ContractsByList = observer(() => {
   return (
     <PageContainer>
       <Breadcrumb
-        primaryPage="Contract Lists"
-        primaryPath="/contract-list"
-        currentPage={contractListInfo.name}
+        items={[
+          { text: "Contract Lists", href: "/contract-list" },
+          { text: contractListInfo.name },
+        ]}
       />
       <Flex
         justifyContent="space-between"
diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx
index 77ca31c3e..4344b50b7 100644
--- a/src/lib/pages/public-project/components/DetailHeader.tsx
+++ b/src/lib/pages/public-project/components/DetailHeader.tsx
@@ -14,9 +14,10 @@ interface DetailHeaderProps {
 export const DetailHeader = ({ details, slug }: DetailHeaderProps) => (
   <>
     <Breadcrumb
-      primaryPage="Public Projects"
-      primaryPath="/public-project"
-      currentPage={details?.name ?? ""}
+      items={[
+        { text: "Public Projects", href: "/public-project" },
+        { text: details?.name ?? "" },
+      ]}
     />
     <Flex
       justifyContent="space-between"
diff --git a/src/lib/pages/tx-details/index.tsx b/src/lib/pages/tx-details/index.tsx
index 4ed4141bb..29e886633 100644
--- a/src/lib/pages/tx-details/index.tsx
+++ b/src/lib/pages/tx-details/index.tsx
@@ -45,9 +45,10 @@ const TxDetails = () => {
   return (
     <PageContainer>
       <Breadcrumb
-        primaryPage="Transactions"
-        primaryPath="/txs"
-        currentPage={truncate(txData?.txhash)}
+        items={[
+          { text: "Transactions", href: "/txs" },
+          { text: truncate(txData?.txhash) },
+        ]}
       />
       {txData ? (
         <>

From 1c0af66ab2c98174e5c57afa70e4fc26561e8956 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 26 May 2023 17:30:49 +0700
Subject: [PATCH 168/354] fix: unsupported pool search

---
 CHANGELOG.md                                  |  2 +
 .../components/supportedSection/index.tsx     | 22 ++++++-----
 .../components/unsupportedSection/index.tsx   | 38 +++++++++++--------
 3 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 51801c812..138a2fb92 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -54,6 +54,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#360](https://github.com/alleslabs/celatone-frontend/pull/360) Fix supported pool list cannot be searched with token ID
+
 ## v1.0.5
 
 ### Features
diff --git a/src/lib/pages/pools/components/supportedSection/index.tsx b/src/lib/pages/pools/components/supportedSection/index.tsx
index 415437633..1b7998335 100644
--- a/src/lib/pages/pools/components/supportedSection/index.tsx
+++ b/src/lib/pages/pools/components/supportedSection/index.tsx
@@ -216,16 +216,18 @@ export const SupportedSection = ({
         </Flex>
       </Flex>
       <SupportedPoolList pools={pools} isLoading={isLoading} mode={toggle} />
-      <Pagination
-        currentPage={currentPage}
-        pagesQuantity={pagesQuantity}
-        offset={offset}
-        totalData={totalData}
-        scrollComponentId={scrollComponentId}
-        pageSize={pageSize}
-        onPageChange={onPageChange}
-        onPageSizeChange={onPageSizeChange}
-      />
+      {totalData > 10 && (
+        <Pagination
+          currentPage={currentPage}
+          pagesQuantity={pagesQuantity}
+          offset={offset}
+          totalData={totalData}
+          scrollComponentId={scrollComponentId}
+          pageSize={pageSize}
+          onPageChange={onPageChange}
+          onPageSizeChange={onPageSizeChange}
+        />
+      )}
     </>
   );
 };
diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
index 9398ef341..449822784 100644
--- a/src/lib/pages/pools/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -10,7 +10,7 @@ import {
   Text,
 } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { SUPERFLUID_ICON } from "../../constant";
@@ -29,6 +29,7 @@ import {
 } from "lib/services/amplitude";
 import { usePoolListCountQuery } from "lib/services/poolService";
 import type { PoolTypeFilter } from "lib/types";
+import { isPositiveInt } from "lib/utils";
 
 import { UnsupportedPoolList } from "./UnsupportedPoolList";
 
@@ -46,11 +47,16 @@ export const UnsupportedSection = ({
     },
   });
   const { poolTypeValue, keyword, isSuperfluidOnly } = watch();
+  const search = useMemo(
+    () => (!keyword || isPositiveInt(keyword) ? keyword : `{"${keyword}"}`),
+    [keyword]
+  );
+
   const { data: totalData = 0, refetch: refetchCount } = usePoolListCountQuery({
     isSupported: false,
-    poolType: "All",
-    isSuperfluidOnly: false,
-    search: "",
+    poolType: poolTypeValue,
+    isSuperfluidOnly,
+    search,
   });
 
   const [showNewest, setShowNewest] = useState(true);
@@ -94,7 +100,7 @@ export const UnsupportedSection = ({
     false,
     poolTypeValue,
     isSuperfluidOnly,
-    keyword,
+    search,
     showNewest ? Order_By.Desc : Order_By.Asc,
     offset,
     pageSize
@@ -199,16 +205,18 @@ export const UnsupportedSection = ({
         expandedIndexes={expandedIndexes}
         updateExpandedIndexes={updateExpandedIndexes}
       />
-      <Pagination
-        currentPage={currentPage}
-        pagesQuantity={pagesQuantity}
-        offset={offset}
-        totalData={totalData}
-        scrollComponentId={scrollComponentId}
-        pageSize={pageSize}
-        onPageChange={onPageChange}
-        onPageSizeChange={onPageSizeChange}
-      />
+      {totalData > 10 && (
+        <Pagination
+          currentPage={currentPage}
+          pagesQuantity={pagesQuantity}
+          offset={offset}
+          totalData={totalData}
+          scrollComponentId={scrollComponentId}
+          pageSize={pageSize}
+          onPageChange={onPageChange}
+          onPageSizeChange={onPageSizeChange}
+        />
+      )}
     </>
   );
 };

From 8b3d389be37d07eb8b2082984c6f23e97dc53427 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 26 May 2023 17:47:08 +0700
Subject: [PATCH 169/354] chore: add remark to useChainRecordAsset

---
 src/lib/app-provider/hooks/useChainRecordAsset.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/app-provider/hooks/useChainRecordAsset.ts b/src/lib/app-provider/hooks/useChainRecordAsset.ts
index e0cef36eb..65fec83ab 100644
--- a/src/lib/app-provider/hooks/useChainRecordAsset.ts
+++ b/src/lib/app-provider/hooks/useChainRecordAsset.ts
@@ -25,6 +25,9 @@ export const useChainRecordAsset = () => {
             precision:
               assetInfo?.denom_units.find(
                 (unit) =>
+                  /**
+                   * @remarks Might have to revisit this logic later. Edge case is when only uToken config is supplied (no token counterpart)
+                   */
                   unit.denom ===
                   (denom[0] === "u" ? denom.slice(1) : "u".concat(denom))
               )?.exponent ?? 0,

From 4b2a9b46ae92eaecaed9b10d7f7fcb1724491b49 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 26 May 2023 17:57:34 +0700
Subject: [PATCH 170/354] fix: pool msg index

---
 CHANGELOG.md                                       |  2 ++
 .../pool-details/tables/pool-txs/PoolTxsMsg.tsx    |  3 ++-
 .../tables/pool-txs/PoolTxsTableRow.tsx            |  8 +++++---
 .../messages/lockup/MsgLockTokensDetail.tsx        |  2 +-
 .../messages/lp/components/PoolAssetsGrid.tsx      |  2 +-
 .../pool-txs/messages/lp/components/PoolLPCard.tsx |  2 +-
 .../MsgLockAndSuperfluidDelegateDetail.tsx         |  2 +-
 .../pool-txs/messages/swap/components/PoolSwap.tsx |  2 +-
 .../pool-details/tables/pool-txs/messages/utils.ts | 14 +++++++++-----
 9 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 51801c812..04039c719 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -54,6 +54,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#361](https://github.com/alleslabs/celatone-frontend/pull/361) Fix incorrect assigned message index for each pool message in pool tx tables
+
 ## v1.0.5
 
 ### Features
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
index 1c41da4be..80c7f3db8 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -12,6 +12,7 @@ import { PoolMsgAction, PoolMsgDetail } from "./messages";
 import { PoolOtherMsgs } from "./messages/PoolOtherMsgs";
 
 interface PoolTxsMsgProps {
+  isFirstSubRow: boolean;
   msgIndex: number;
   message: Option<Message>;
   otherMsgs: { [key: string]: number };
@@ -22,6 +23,7 @@ interface PoolTxsMsgProps {
 }
 
 export const PoolTxsMsg = ({
+  isFirstSubRow,
   msgIndex,
   message,
   otherMsgs,
@@ -36,7 +38,6 @@ export const PoolTxsMsg = ({
     .slice(0, 2)
     .concat("1fr")
     .join(" ");
-  const isFirstSubRow = msgIndex === 0;
 
   return (
     <Box
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx
index ca20ef54f..b3056937e 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsTableRow.tsx
@@ -27,7 +27,8 @@ export const PoolTxsTableRow = ({
       {hasOtherMsgs && (
         <PoolTxsMsg
           key={`${transaction.hash}0`}
-          msgIndex={0}
+          isFirstSubRow
+          msgIndex={-1}
           otherMsgs={others}
           message={undefined}
           pool={pool}
@@ -39,9 +40,10 @@ export const PoolTxsTableRow = ({
       {filteredMsgs.map((message, index) => (
         <PoolTxsMsg
           key={transaction.hash + Number(hasOtherMsgs) + index.toString()}
-          msgIndex={Number(hasOtherMsgs) + index}
+          isFirstSubRow={!hasOtherMsgs && index === 0}
+          msgIndex={message.index}
           otherMsgs={others}
-          message={message}
+          message={message.msg}
           pool={pool}
           transaction={transaction}
           assetInfos={assetInfos}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
index a5db92991..35d2af6e8 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
@@ -40,7 +40,7 @@ export const MsgLockTokensDetail = ({
   if (isLoading) return <Loading withBorder={false} />;
 
   const lockId = txData?.logs
-    .find((event) => event.msg_index === msgIndex)
+    .find((log) => log.msg_index === msgIndex)
     ?.events?.find(
       (event) =>
         event.type.includes("lock") &&
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
index 1770e411e..2ed52f202 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolAssetsGrid.tsx
@@ -32,7 +32,7 @@ export const PoolAssetsGrid = ({
   if (!msgAssets && isLoading) return <Loading withBorder={false} />;
 
   const receivedEvent = txData?.logs
-    .find((event) => event.msg_index === msgIndex)
+    .find((log) => log.msg_index === msgIndex)
     ?.events?.find((event) => event.type === "coin_received");
 
   const assetAttr = receivedEvent?.attributes.at(1)?.value;
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
index a1252ea63..0eaf456cc 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
@@ -31,7 +31,7 @@ export const PoolLPCard = ({
 
   const poolDenom = getPoolDenom(poolId);
   const eventShareAmount = txData?.logs
-    .find((event) => event.msg_index === msgIndex)
+    .find((log) => log.msg_index === msgIndex)
     ?.events?.find((event) => event.type === "coin_received")
     ?.attributes.at(3)
     ?.value.slice(0, -poolDenom.length);
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
index fc61fb9e0..4a368adf5 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
@@ -50,7 +50,7 @@ export const MsgLockAndSuperfluidDelegateDetail = ({
     return <Loading withBorder={false} />;
 
   const lockId = txData?.logs
-    .find((event) => event.msg_index === msgIndex)
+    .find((log) => log.msg_index === msgIndex)
     ?.events?.find(
       (event) =>
         event.type.includes("lock") &&
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
index 9d9633578..88551ad94 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolSwap.tsx
@@ -25,7 +25,7 @@ export const PoolSwap = ({
   if (isLoading) return <Loading withBorder={false} />;
 
   const swapEvent = txData?.logs
-    .find((event) => event.msg_index === msgIndex)
+    .find((log) => log.msg_index === msgIndex)
     ?.events?.find((event) => event.type === "token_swapped");
   if (!swapEvent)
     return (
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts
index e2e807b31..bf046fda9 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts
@@ -15,13 +15,16 @@ export const coinsFromStr = (str: string): Coin[] => {
 };
 
 export const extractPoolMsgs = (msgs: Message[], poolId: number) => {
-  const result: { msgs: Message[]; others: { [key: string]: number } } = {
+  const result: {
+    msgs: { msg: Message; index: number }[];
+    others: { [key: string]: number };
+  } = {
     msgs: [],
     others: {},
   };
 
   // eslint-disable-next-line complexity
-  msgs.forEach((msg) => {
+  msgs.forEach((msg, index) => {
     const { type, detail, log } = msg;
     switch (type) {
       case "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn":
@@ -34,7 +37,7 @@ export const extractPoolMsgs = (msgs: Message[], poolId: number) => {
             (pool) => Number(pool.poolId) === poolId
           )
         )
-          result.msgs.push(msg);
+          result.msgs.push({ msg, index });
         break;
       }
       case "/osmosis.gamm.v1beta1.MsgJoinPool":
@@ -44,7 +47,8 @@ export const extractPoolMsgs = (msgs: Message[], poolId: number) => {
       case "/osmosis.gamm.v1beta1.MsgExitSwapShareAmountIn":
       case "/osmosis.gamm.v1beta1.MsgExitSwapExternAmountOut": {
         const details = extractTxDetails(type, detail, log);
-        if (Number(details.pool_id) === poolId) result.msgs.push(msg);
+        if (Number(details.pool_id) === poolId)
+          result.msgs.push({ msg, index });
         break;
       }
       case "/osmosis.lockup.MsgLockTokens":
@@ -52,7 +56,7 @@ export const extractPoolMsgs = (msgs: Message[], poolId: number) => {
         const details = extractTxDetails(type, detail, log);
         const poolDenom = getPoolDenom(poolId.toString());
         if (details.coins.some((coin) => coin.denom === poolDenom))
-          result.msgs.push(msg);
+          result.msgs.push({ msg, index });
         break;
       }
 

From c8199260e7bda52bec5c997001e6531697914e14 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Sat, 27 May 2023 00:11:08 +0700
Subject: [PATCH 171/354] fix: missed out osmo 4

---
 CHANGELOG.md                             | 2 ++
 src/env.ts                               | 2 +-
 src/lib/app-fns/explorer/index.ts        | 2 +-
 src/lib/components/modal/CodeSnippet.tsx | 2 +-
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 51801c812..c13fffa8a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -54,6 +54,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#362](https://github.com/alleslabs/celatone-frontend/pull/362) Fix missed out hard-coded osmosis testnet 4 in code
+
 ## v1.0.5
 
 ### Features
diff --git a/src/env.ts b/src/env.ts
index 5aa643efe..4859eca99 100644
--- a/src/env.ts
+++ b/src/env.ts
@@ -107,7 +107,7 @@ export const getChainApiPath = (chainName: string) => {
 // TODO to handle testnet separately later
 export const getMainnetApiPath = (chainId: string) => {
   switch (chainId) {
-    case "osmo-test-4":
+    case "osmo-test-5":
     case "osmosis-1":
       return "osmosis-1";
     case "pisco-1":
diff --git a/src/lib/app-fns/explorer/index.ts b/src/lib/app-fns/explorer/index.ts
index 033799f60..45eefcc63 100644
--- a/src/lib/app-fns/explorer/index.ts
+++ b/src/lib/app-fns/explorer/index.ts
@@ -43,7 +43,7 @@ export const getPoolUrl = (chainName: string) => {
   switch (chainName) {
     case "osmosis":
       return "https://app.osmosis.zone/pool";
-    case "osmosistestnet":
+    case "osmosistestnet5":
       return "https://testnet.osmosis.zone/pool";
     default:
       return "";
diff --git a/src/lib/components/modal/CodeSnippet.tsx b/src/lib/components/modal/CodeSnippet.tsx
index bf2d7f2d9..50752114b 100644
--- a/src/lib/components/modal/CodeSnippet.tsx
+++ b/src/lib/components/modal/CodeSnippet.tsx
@@ -44,7 +44,7 @@ const getFullRpcUrl = (rpcUrl: Option<string>, chainId: Option<string>) => {
   const baseUrl = rpcUrl?.slice(0, rpcUrl.length - 1);
   switch (chainId) {
     case "osmosis-1":
-    case "osmo-test-4":
+    case "osmo-test-5":
       return `${baseUrl}:443`;
     default:
       return `${baseUrl}:26657`;

From 37a86f465d4339d97734c52c9c24cf5567c98184 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 29 May 2023 12:02:48 +0700
Subject: [PATCH 172/354] fix: add changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 138a2fb92..f4dbfd5e0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -54,7 +54,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
-- [#360](https://github.com/alleslabs/celatone-frontend/pull/360) Fix supported pool list cannot be searched with token ID
+- [#360](https://github.com/alleslabs/celatone-frontend/pull/360) Fix supported pool list cannot be searched with token ID and Fix supported pool list cannot be searched with token ID
 
 ## v1.0.5
 

From cca30ba33ca119b512e697a225562c921358c399 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 29 May 2023 13:20:35 +0700
Subject: [PATCH 173/354] fix: changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f4dbfd5e0..fe249917d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -54,7 +54,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
-- [#360](https://github.com/alleslabs/celatone-frontend/pull/360) Fix supported pool list cannot be searched with token ID and Fix supported pool list cannot be searched with token ID
+- [#360](https://github.com/alleslabs/celatone-frontend/pull/360) Fix supported pool list cannot be searched with token ID and should not show pagination when data is less than 10
 
 ## v1.0.5
 

From 6437d72436dc1d579b53fa35e8c0f02f7a83f071 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Mon, 29 May 2023 16:14:42 +0700
Subject: [PATCH 174/354] fix: pool ui

---
 src/lib/components/Tooltip.tsx                |  8 +-
 .../components/pool-details/PoolAssets.tsx    |  2 +-
 .../tables/pool-txs/PoolTxsMsg.tsx            |  3 +-
 .../pool-details/tables/pool-txs/index.tsx    |  2 -
 .../messages/components/PoolInfoText.tsx      | 29 +++++++
 .../messages/lockup/MsgLockTokensDetail.tsx   | 74 +++++++++---------
 .../messages/lp/MsgExitPoolDetail.tsx         | 25 +++---
 .../lp/MsgExitSwapExternAmountOutDetail.tsx   | 25 +++---
 .../lp/MsgExitSwapShareAmountInDetail.tsx     | 25 +++---
 .../messages/lp/MsgJoinPoolDetail.tsx         | 25 +++---
 .../lp/MsgJoinSwapExternAmountInDetail.tsx    | 25 +++---
 .../lp/MsgJoinSwapShareAmountOutDetail.tsx    | 59 +++++++-------
 .../MsgLockAndSuperfluidDelegateDetail.tsx    | 76 +++++++++----------
 .../swap/MsgSwapExactAmountInDetail.tsx       | 49 ++++++------
 .../swap/MsgSwapExactAmountOutDetail.tsx      | 45 ++++++-----
 15 files changed, 261 insertions(+), 211 deletions(-)
 create mode 100644 src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolInfoText.tsx

diff --git a/src/lib/components/Tooltip.tsx b/src/lib/components/Tooltip.tsx
index f99f41fb6..71a64f652 100644
--- a/src/lib/components/Tooltip.tsx
+++ b/src/lib/components/Tooltip.tsx
@@ -1,5 +1,5 @@
 import type { TooltipProps } from "@chakra-ui/react";
-import { Tooltip as ChakraTooltip } from "@chakra-ui/react";
+import { Flex, Tooltip as ChakraTooltip } from "@chakra-ui/react";
 
 import { CustomIcon } from "./icon";
 
@@ -24,13 +24,13 @@ export const TooltipInfo = ({
   ...tooltipProps
 }: TooltipInfoProps) => (
   <Tooltip {...tooltipProps}>
-    <div style={{ cursor: "pointer" }}>
+    <Flex cursor="pointer">
       <CustomIcon
         color="pebble.600"
         name={iconVariant === "solid" ? "info-circle-solid" : "info-circle"}
-        boxSize={3}
+        boxSize="12px"
         m={0}
       />
-    </div>
+    </Flex>
   </Tooltip>
 );
diff --git a/src/lib/pages/pools/components/pool-details/PoolAssets.tsx b/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
index d99c6cfb3..7a83d6ff4 100644
--- a/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
+++ b/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
@@ -39,7 +39,7 @@ export const PoolAssets = ({ pool }: PoolAssetsProps) => {
         )}
       </Flex>
       <PoolAssetsTable pool={pool} totalLiquidity={totalLiquidity} />
-      <Flex gap="2" alignItems="center">
+      <Flex gap="2" alignItems="center" mt={4}>
         <Text variant="body2" color="text.dark">
           What is asset weight and allocation?
         </Text>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
index 1c41da4be..1ffac1572 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -33,7 +33,7 @@ export const PoolTxsMsg = ({
   const { isOpen, onToggle } = useDisclosure();
   const msgDetailTemplateColumns = templateColumns
     .split(" ")
-    .slice(0, 2)
+    .slice(0, 3)
     .concat("1fr")
     .join(" ");
   const isFirstSubRow = msgIndex === 0;
@@ -128,6 +128,7 @@ export const PoolTxsMsg = ({
           hidden={!isOpen}
           templateColumns={msgDetailTemplateColumns}
         >
+          <TableNoBorderRow py={0} />
           <TableNoBorderRow py={0} />
           <TableNoBorderRow py={0} />
           <TableNoBorderRow py={0}>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/index.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/index.tsx
index 30971a8b9..3eb859701 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/index.tsx
@@ -59,7 +59,6 @@ export const PoolRelatedTxsTable = ({
   if (error)
     return (
       <EmptyState
-        withBorder
         imageVariant="not-found"
         message="There is an error during fetching transactions."
       />
@@ -73,7 +72,6 @@ export const PoolRelatedTxsTable = ({
         isLoading={isLoadingAssetInfos || isLoading}
         emptyState={
           <EmptyState
-            withBorder
             imageVariant="empty"
             message="There are no transactions in this network."
           />
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolInfoText.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolInfoText.tsx
new file mode 100644
index 000000000..a85c08b1a
--- /dev/null
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolInfoText.tsx
@@ -0,0 +1,29 @@
+import { Flex, Text } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+
+interface PoolInfoTextProps {
+  title: string;
+  isText?: boolean;
+  text?: string;
+  component?: ReactNode;
+}
+
+export const PoolInfoText = ({
+  title,
+  isText = false,
+  text,
+  component,
+}: PoolInfoTextProps) => (
+  <Flex direction="column" gap={1} minW="90px">
+    <Text variant="body2" textColor="pebble.500" fontWeight={500}>
+      {title}
+    </Text>
+    {isText ? (
+      <Text variant="body2" fontWeight={400}>
+        {text}
+      </Text>
+    ) : (
+      component
+    )}
+  </Flex>
+);
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
index a5db92991..902e316c2 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
@@ -1,6 +1,7 @@
-import { Box, Flex, Text } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 
 import { PoolAssetCard } from "../components";
+import { PoolInfoText } from "../components/PoolInfoText";
 import { getPoolDenom } from "../utils";
 import { MsgToken } from "lib/components/action-msg/MsgToken";
 import { ExplorerLink } from "lib/components/ExplorerLink";
@@ -8,6 +9,7 @@ import { Loading } from "lib/components/Loading";
 import type { AssetInfosOpt } from "lib/services/assetService";
 import { useTxData } from "lib/services/txService";
 import type { PoolDetail } from "lib/types";
+import { extractMsgType } from "lib/utils";
 import type { MsgLockTokensDetails } from "lib/utils/tx/types";
 
 interface MsgLockTokensDetailProps {
@@ -49,46 +51,40 @@ export const MsgLockTokensDetail = ({
     ?.attributes.at(0)?.value;
 
   return (
-    <Flex w="full" direction="column" gap={4}>
+    <Flex w="full" direction="column" gap={6}>
       <Flex gap={12}>
-        <Flex direction="column" gap={1}>
-          <Text variant="body2" textColor="pebble.500" fontWeight={500}>
-            Block height
-          </Text>
-          <ExplorerLink
-            value={blockHeight.toString()}
-            type="block_height"
-            showCopyOnHover
-          />
-        </Flex>
-        <Flex direction="column" gap={1}>
-          <Text variant="body2" textColor="pebble.500" fontWeight={500}>
-            LockID
-          </Text>
-          <Text variant="body2">{lockId}</Text>
-        </Flex>
-        <Flex direction="column" gap={1}>
-          <Text variant="body2" textColor="pebble.500" fontWeight={500}>
-            Bonded LP
-          </Text>
-          <MsgToken
-            coin={poolAsset}
-            symbol={poolAssetInfo?.symbol}
-            precision={poolAssetInfo?.precision}
-            fontWeight={700}
-          />
-        </Flex>
-      </Flex>
-      <Box w="full">
-        <PoolAssetCard
-          poolId={pool.id}
-          description="Bonded to"
-          assetText="Bonded"
-          poolAsset={poolAsset}
-          poolAssetInfo={poolAssetInfo}
-          isOpened={isOpened}
+        <PoolInfoText
+          title="Block height"
+          component={
+            <ExplorerLink
+              value={blockHeight.toString()}
+              type="block_height"
+              showCopyOnHover
+            />
+          }
+        />
+        <PoolInfoText title="LockID" isText text={lockId} />
+        <PoolInfoText
+          title="Bonded LP"
+          component={
+            <MsgToken
+              coin={poolAsset}
+              symbol={poolAssetInfo?.symbol}
+              precision={poolAssetInfo?.precision}
+              fontWeight={700}
+            />
+          }
         />
-      </Box>
+        <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
+      </Flex>
+      <PoolAssetCard
+        poolId={pool.id}
+        description="Bonded to"
+        assetText="Bonded"
+        poolAsset={poolAsset}
+        poolAssetInfo={poolAssetInfo}
+        isOpened={isOpened}
+      />
     </Flex>
   );
 };
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
index 055500562..04f7ab466 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
@@ -1,7 +1,9 @@
-import { Box, Flex, Text } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 
+import { PoolInfoText } from "../components/PoolInfoText";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
+import { extractMsgType } from "lib/utils";
 import type { MsgExitPoolDetails } from "lib/utils/tx/types";
 
 import { PoolLPCard, LiquidityDivider, PoolAssetsGrid } from "./components";
@@ -23,16 +25,19 @@ export const MsgExitPoolDetail = ({
   assetInfos,
   isOpened,
 }: MsgExitPoolDetailProps) => (
-  <Flex w="full" alignItems="start" gap={12}>
-    <Flex direction="column" gap={1}>
-      <Text variant="body2" textColor="pebble.500" fontWeight={500}>
-        Block height
-      </Text>
-      <ExplorerLink
-        value={blockHeight.toString()}
-        type="block_height"
-        showCopyOnHover
+  <Flex w="full" direction="column" alignItems="start" gap={6}>
+    <Flex gap={12}>
+      <PoolInfoText
+        title="Block height"
+        component={
+          <ExplorerLink
+            value={blockHeight.toString()}
+            type="block_height"
+            showCopyOnHover
+          />
+        }
       />
+      <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
     </Flex>
     <Box w="full">
       <PoolLPCard
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
index 95a51b2b6..23804232f 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
@@ -1,7 +1,9 @@
-import { Box, Flex, Text } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 
+import { PoolInfoText } from "../components/PoolInfoText";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
+import { extractMsgType } from "lib/utils";
 import type { MsgExitSwapExternAmountOutDetails } from "lib/utils/tx/types";
 
 import { PoolLPCard, LiquidityDivider, PoolAssetsGrid } from "./components";
@@ -23,16 +25,19 @@ export const MsgExitSwapExternAmountOutDetail = ({
   assetInfos,
   isOpened,
 }: MsgExitSwapExternAmountOutDetailProps) => (
-  <Flex w="full" alignItems="start" gap={12}>
-    <Flex direction="column" gap={1}>
-      <Text variant="body2" textColor="pebble.500" fontWeight={500}>
-        Block height
-      </Text>
-      <ExplorerLink
-        value={blockHeight.toString()}
-        type="block_height"
-        showCopyOnHover
+  <Flex w="full" direction="column" alignItems="start" gap={12}>
+    <Flex gap={12}>
+      <PoolInfoText
+        title="Block height"
+        component={
+          <ExplorerLink
+            value={blockHeight.toString()}
+            type="block_height"
+            showCopyOnHover
+          />
+        }
       />
+      <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
     </Flex>
     <Box w="full">
       <PoolLPCard
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
index 0e55fe5d4..69037e8a7 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
@@ -1,7 +1,9 @@
-import { Box, Flex, Text } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 
+import { PoolInfoText } from "../components/PoolInfoText";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
+import { extractMsgType } from "lib/utils";
 import type { MsgExitSwapShareAmountInDetails } from "lib/utils/tx/types";
 
 import { PoolLPCard, LiquidityDivider, PoolAssetsGrid } from "./components";
@@ -23,16 +25,19 @@ export const MsgExitSwapShareAmountInDetail = ({
   assetInfos,
   isOpened,
 }: MsgExitSwapShareAmountInDetailProps) => (
-  <Flex minW="full" alignItems="start" gap={12}>
-    <Flex direction="column" gap={1}>
-      <Text variant="body2" textColor="pebble.500" fontWeight={500}>
-        Block height
-      </Text>
-      <ExplorerLink
-        value={blockHeight.toString()}
-        type="block_height"
-        showCopyOnHover
+  <Flex minW="full" direction="column" alignItems="start" gap={6}>
+    <Flex gap={12}>
+      <PoolInfoText
+        title="Block height"
+        component={
+          <ExplorerLink
+            value={blockHeight.toString()}
+            type="block_height"
+            showCopyOnHover
+          />
+        }
       />
+      <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
     </Flex>
     <Box w="full">
       <PoolLPCard
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
index 5c470c3d3..5192783bb 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
@@ -1,7 +1,9 @@
-import { Box, Flex, Text } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 
+import { PoolInfoText } from "../components/PoolInfoText";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
+import { extractMsgType } from "lib/utils";
 import type { MsgJoinPoolDetails } from "lib/utils/tx/types";
 
 import { PoolLPCard, LiquidityDivider, PoolAssetsGrid } from "./components";
@@ -23,16 +25,19 @@ export const MsgJoinPoolDetail = ({
   assetInfos,
   isOpened,
 }: MsgJoinPoolDetailProps) => (
-  <Flex w="full" alignItems="start" gap={12}>
-    <Flex direction="column" gap={1}>
-      <Text variant="body2" textColor="pebble.500" fontWeight={500}>
-        Block height
-      </Text>
-      <ExplorerLink
-        value={blockHeight.toString()}
-        type="block_height"
-        showCopyOnHover
+  <Flex w="full" direction="column" alignItems="start" gap={6}>
+    <Flex gap={12}>
+      <PoolInfoText
+        title="Block height"
+        component={
+          <ExplorerLink
+            value={blockHeight.toString()}
+            type="block_height"
+            showCopyOnHover
+          />
+        }
       />
+      <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
     </Flex>
     <Box w="full">
       <PoolAssetsGrid
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
index 79ae9d427..944d35ca2 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
@@ -1,7 +1,9 @@
-import { Box, Flex, Text } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 
+import { PoolInfoText } from "../components/PoolInfoText";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
+import { extractMsgType } from "lib/utils";
 import type { MsgJoinSwapExternAmountInDetails } from "lib/utils/tx/types";
 
 import { LiquidityDivider, PoolLPCard, PoolAssetsGrid } from "./components";
@@ -23,16 +25,19 @@ export const MsgJoinSwapExternAmountInDetail = ({
   assetInfos,
   isOpened,
 }: MsgJoinSwapExternAmountInDetailProps) => (
-  <Flex w="full" alignItems="start" gap={12}>
-    <Flex direction="column" gap={1}>
-      <Text variant="body2" textColor="pebble.500" fontWeight={500}>
-        Block height
-      </Text>
-      <ExplorerLink
-        value={blockHeight.toString()}
-        type="block_height"
-        showCopyOnHover
+  <Flex w="full" direction="column" alignItems="start" gap={6}>
+    <Flex gap={12}>
+      <PoolInfoText
+        title="Block height"
+        component={
+          <ExplorerLink
+            value={blockHeight.toString()}
+            type="block_height"
+            showCopyOnHover
+          />
+        }
       />
+      <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
     </Flex>
     <Box w="full">
       <PoolAssetsGrid
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
index e41376d60..0c4b7a9fc 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
@@ -1,7 +1,9 @@
-import { Box, Flex, Text } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 
+import { PoolInfoText } from "../components/PoolInfoText";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
+import { extractMsgType } from "lib/utils";
 import type { MsgJoinSwapShareAmountOutDetails } from "lib/utils/tx/types";
 
 import { LiquidityDivider, PoolLPCard, PoolAssetsGrid } from "./components";
@@ -23,34 +25,35 @@ export const MsgJoinSwapShareAmountOutDetail = ({
   assetInfos,
   isOpened,
 }: MsgJoinSwapShareAmountOutDetailProps) => (
-  <Flex w="full" alignItems="start" gap={12}>
-    <Flex direction="column" gap={1}>
-      <Text variant="body2" textColor="pebble.500" fontWeight={500}>
-        Block height
-      </Text>
-      <ExplorerLink
-        value={blockHeight.toString()}
-        type="block_height"
-        showCopyOnHover
+  <Flex w="full" direction="column" alignItems="start" gap={6}>
+    <Flex gap={12}>
+      <PoolInfoText
+        title="Block height"
+        component={
+          <ExplorerLink
+            value={blockHeight.toString()}
+            type="block_height"
+            showCopyOnHover
+          />
+        }
       />
+      <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
     </Flex>
-    <Box w="full">
-      <PoolAssetsGrid
-        txHash={txHash}
-        msgIndex={msgIndex}
-        isJoin
-        assetInfos={assetInfos}
-        isOpened={isOpened}
-      />
-      <LiquidityDivider />
-      <PoolLPCard
-        msgIndex={msgIndex}
-        msgShareAmount={msg.share_amount_out}
-        poolId={msg.pool_id}
-        assetInfos={assetInfos}
-        isJoin
-        isOpened={isOpened}
-      />
-    </Box>
+    <PoolAssetsGrid
+      txHash={txHash}
+      msgIndex={msgIndex}
+      isJoin
+      assetInfos={assetInfos}
+      isOpened={isOpened}
+    />
+    <LiquidityDivider />
+    <PoolLPCard
+      msgIndex={msgIndex}
+      msgShareAmount={msg.share_amount_out}
+      poolId={msg.pool_id}
+      assetInfos={assetInfos}
+      isJoin
+      isOpened={isOpened}
+    />
   </Flex>
 );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
index fc61fb9e0..940e0324e 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
@@ -1,6 +1,7 @@
-import { Box, Flex, Text } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 
 import { PoolAssetCard } from "../components";
+import { PoolInfoText } from "../components/PoolInfoText";
 import { getPoolDenom } from "../utils";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { Loading } from "lib/components/Loading";
@@ -9,6 +10,7 @@ import type { AssetInfosOpt } from "lib/services/assetService";
 import { useTxData } from "lib/services/txService";
 import { useValidator } from "lib/services/validatorService";
 import type { PoolDetail } from "lib/types";
+import { extractMsgType } from "lib/utils";
 import type { MsgLockAndSuperfluidDelegateDetails } from "lib/utils/tx/types";
 
 interface MsgLockAndSuperfluidDelegateDetailProps {
@@ -59,47 +61,41 @@ export const MsgLockAndSuperfluidDelegateDetail = ({
     ?.attributes.at(0)?.value;
 
   return (
-    <Flex w="full" direction="column" gap={4}>
+    <Flex w="full" direction="column" gap={6}>
       <Flex gap={12}>
-        <Flex direction="column" gap={1}>
-          <Text variant="body2" textColor="pebble.500" fontWeight={500}>
-            Block height
-          </Text>
-          <ExplorerLink
-            value={blockHeight.toString()}
-            type="block_height"
-            showCopyOnHover
-          />
-        </Flex>
-        <Flex direction="column" gap={1}>
-          <Text variant="body2" textColor="pebble.500" fontWeight={500}>
-            LockID
-          </Text>
-          <Text variant="body2">{lockId}</Text>
-        </Flex>
-        <Flex direction="column" gap={1}>
-          <Text variant="body2" textColor="pebble.500" fontWeight={500}>
-            To Validator
-          </Text>
-          <ValidatorBadge
-            validator={{
-              validatorAddress: msg.val_addr,
-              moniker: validator?.moniker,
-            }}
-            badgeSize={6}
-          />
-        </Flex>
-      </Flex>
-      <Box w="full">
-        <PoolAssetCard
-          poolId={pool.id}
-          description="Bonded to"
-          assetText="Bonded"
-          poolAsset={poolAsset}
-          poolAssetInfo={poolAssetInfo}
-          isOpened={isOpened}
+        <PoolInfoText
+          title="Block height"
+          component={
+            <ExplorerLink
+              value={blockHeight.toString()}
+              type="block_height"
+              showCopyOnHover
+            />
+          }
+        />
+        <PoolInfoText title="LockID" isText text={lockId} />
+        <PoolInfoText
+          title="To Validator"
+          component={
+            <ValidatorBadge
+              validator={{
+                validatorAddress: msg.val_addr,
+                moniker: validator?.moniker,
+              }}
+              badgeSize={6}
+            />
+          }
         />
-      </Box>
+        <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
+      </Flex>
+      <PoolAssetCard
+        poolId={pool.id}
+        description="Bonded to"
+        assetText="Bonded"
+        poolAsset={poolAsset}
+        poolAssetInfo={poolAssetInfo}
+        isOpened={isOpened}
+      />
     </Flex>
   );
 };
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
index 68f1dc2fb..7cd597e59 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
@@ -1,7 +1,9 @@
-import { Box, Flex, Text } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 
+import { PoolInfoText } from "../components/PoolInfoText";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
+import { extractMsgType } from "lib/utils";
 import type { MsgSwapExactAmountInDetails } from "lib/utils/tx/types";
 
 import { PoolRoute, PoolSwap } from "./components";
@@ -23,29 +25,30 @@ export const MsgSwapExactAmountInDetail = ({
   assetInfos,
   isOpened,
 }: MsgSwapExactAmountInDetailProps) => (
-  <Flex w="full" alignItems="start" gap={12}>
-    <Flex direction="column" gap={1}>
-      <Text variant="body2" textColor="pebble.500" fontWeight={500}>
-        Block height
-      </Text>
-      <ExplorerLink
-        value={blockHeight.toString()}
-        type="block_height"
-        showCopyOnHover
+  <Flex w="full" direction="column" alignItems="start" gap={6}>
+    <Flex gap={12}>
+      <PoolInfoText
+        title="Block height"
+        component={
+          <ExplorerLink
+            value={blockHeight.toString()}
+            type="block_height"
+            showCopyOnHover
+          />
+        }
       />
+      <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
     </Flex>
-    <Box w="full">
-      <PoolSwap
-        txHash={txHash}
-        msgIndex={msgIndex}
-        assetInfos={assetInfos}
-        isOpened={isOpened}
-      />
-      <PoolRoute
-        routes={msg.routes}
-        assetInfos={assetInfos}
-        isOpened={isOpened}
-      />
-    </Box>
+    <PoolSwap
+      txHash={txHash}
+      msgIndex={msgIndex}
+      assetInfos={assetInfos}
+      isOpened={isOpened}
+    />
+    <PoolRoute
+      routes={msg.routes}
+      assetInfos={assetInfos}
+      isOpened={isOpened}
+    />
   </Flex>
 );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
index c6ac9c13d..ca4eb90d9 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
@@ -1,7 +1,9 @@
-import { Box, Flex, Text } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 
+import { PoolInfoText } from "../components/PoolInfoText";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { AssetInfosOpt } from "lib/services/assetService";
+import { extractMsgType } from "lib/utils";
 import type { MsgSwapExactAmountOutDetails } from "lib/utils/tx/types";
 
 import { PoolRoute, PoolSwap } from "./components";
@@ -32,30 +34,27 @@ export const MsgSwapExactAmountOutDetail = ({
   }));
 
   return (
-    <Flex w="full" alignItems="start" gap={12}>
-      <Flex direction="column" gap={1}>
-        <Text variant="body2" textColor="pebble.500" fontWeight={500}>
-          Block height
-        </Text>
-        <ExplorerLink
-          value={blockHeight.toString()}
-          type="block_height"
-          showCopyOnHover
+    <Flex w="full" direction="column" alignItems="start" gap={6}>
+      <Flex gap={12}>
+        <PoolInfoText
+          title="Block height"
+          component={
+            <ExplorerLink
+              value={blockHeight.toString()}
+              type="block_height"
+              showCopyOnHover
+            />
+          }
         />
+        <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
       </Flex>
-      <Box w="full">
-        <PoolSwap
-          txHash={txHash}
-          msgIndex={msgIndex}
-          assetInfos={assetInfos}
-          isOpened={isOpened}
-        />
-        <PoolRoute
-          routes={routes}
-          assetInfos={assetInfos}
-          isOpened={isOpened}
-        />
-      </Box>
+      <PoolSwap
+        txHash={txHash}
+        msgIndex={msgIndex}
+        assetInfos={assetInfos}
+        isOpened={isOpened}
+      />
+      <PoolRoute routes={routes} assetInfos={assetInfos} isOpened={isOpened} />
     </Flex>
   );
 };

From 98e6859c8f4ed5f4a473e23f365eeaf69dc95e95 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Mon, 29 May 2023 17:31:53 +0700
Subject: [PATCH 175/354] fix: table empty state border and add changelog

---
 CHANGELOG.md                                         |  1 +
 src/lib/components/state/EmptyState.tsx              |  3 +--
 src/lib/components/table/codes/MySavedCodesTable.tsx |  1 +
 .../components/tables/RelatedProposalsTable.tsx      |  1 +
 .../contract-details/components/tables/TxsTable.tsx  |  1 +
 .../components/tables/migration/index.tsx            |  1 +
 src/lib/pages/past-txs/index.tsx                     | 12 +++++++-----
 .../pool-details/tables/pool-txs/index.tsx           |  2 ++
 8 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c7d8136ad..8c0613ea9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -53,6 +53,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#365](https://github.com/alleslabs/celatone-frontend/pull/365) Fix pool page UI including helper text gap, icon alignment in pool asset table, empty state border, add message type, and accordion alignment
 ## v1.0.5
 
 ### Features
diff --git a/src/lib/components/state/EmptyState.tsx b/src/lib/components/state/EmptyState.tsx
index 1db577db9..9709082a6 100644
--- a/src/lib/components/state/EmptyState.tsx
+++ b/src/lib/components/state/EmptyState.tsx
@@ -18,8 +18,7 @@ export const EmptyState = ({
   withBorder = false,
 }: EmptyStateProps) => (
   <Flex
-    py={8}
-    my={12}
+    py={12}
     direction="column"
     borderY={withBorder ? "1px solid" : undefined}
     borderColor="pebble.700"
diff --git a/src/lib/components/table/codes/MySavedCodesTable.tsx b/src/lib/components/table/codes/MySavedCodesTable.tsx
index 4d4d11a4a..3987a66e6 100644
--- a/src/lib/components/table/codes/MySavedCodesTable.tsx
+++ b/src/lib/components/table/codes/MySavedCodesTable.tsx
@@ -27,6 +27,7 @@ export const MySavedCodesTable = ({
       <EmptyState
         imageVariant={isSearching ? "not-found" : "empty"}
         message={isSearching ? "No matched codes found" : emptyMessage}
+        withBorder
       />
     }
     onRowSelect={onRowSelect}
diff --git a/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx b/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx
index e0e79d3f6..346ca1593 100644
--- a/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx
+++ b/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx
@@ -64,6 +64,7 @@ export const RelatedProposalsTable = ({
           <EmptyState
             imageVariant="empty"
             message="This contract does not have related proposals yet."
+            withBorder
           />
         }
       />
diff --git a/src/lib/pages/contract-details/components/tables/TxsTable.tsx b/src/lib/pages/contract-details/components/tables/TxsTable.tsx
index 59165c9a3..085b40a0b 100644
--- a/src/lib/pages/contract-details/components/tables/TxsTable.tsx
+++ b/src/lib/pages/contract-details/components/tables/TxsTable.tsx
@@ -68,6 +68,7 @@ export const TxsTable = ({
           <EmptyState
             imageVariant="empty"
             message="This contract does not have any transactions"
+            withBorder
           />
         }
         showRelations={false}
diff --git a/src/lib/pages/contract-details/components/tables/migration/index.tsx b/src/lib/pages/contract-details/components/tables/migration/index.tsx
index c96e85353..cee6f7b62 100644
--- a/src/lib/pages/contract-details/components/tables/migration/index.tsx
+++ b/src/lib/pages/contract-details/components/tables/migration/index.tsx
@@ -62,6 +62,7 @@ export const MigrationTable = ({
       <EmptyState
         imageVariant="empty"
         message="This contract does not have any migration history yet."
+        withBorder
       />
     );
 
diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx
index 27120cac3..61a7601f9 100644
--- a/src/lib/pages/past-txs/index.tsx
+++ b/src/lib/pages/past-txs/index.tsx
@@ -172,16 +172,18 @@ const PastTxs = () => {
             <EmptyState
               imageVariant="not-found"
               message={`
-      No past transaction matches found with your input.
-      You can search with transaction hash, and contract address.
-      `}
+            No past transaction matches found with your input.
+            You can search with transaction hash, and contract address.
+            `}
+              withBorder
             />
           ) : (
             <EmptyState
               imageVariant="empty"
               message={`
-    Past transactions will display here.
-    `}
+            Past transactions will display here.
+            `}
+              withBorder
             />
           )
         }
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/index.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/index.tsx
index 3eb859701..28647da41 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/index.tsx
@@ -61,6 +61,7 @@ export const PoolRelatedTxsTable = ({
       <EmptyState
         imageVariant="not-found"
         message="There is an error during fetching transactions."
+        withBorder
       />
     );
   return (
@@ -74,6 +75,7 @@ export const PoolRelatedTxsTable = ({
           <EmptyState
             imageVariant="empty"
             message="There are no transactions in this network."
+            withBorder
           />
         }
       />

From 80f097c17072817d0c637f07a04a2689cc040d57 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Mon, 29 May 2023 17:55:46 +0700
Subject: [PATCH 176/354] fix: input selection icon

---
 CHANGELOG.md                             |  2 +-
 src/lib/components/forms/SelectInput.tsx | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8c0613ea9..78e93280d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -53,7 +53,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
-- [#365](https://github.com/alleslabs/celatone-frontend/pull/365) Fix pool page UI including helper text gap, icon alignment in pool asset table, empty state border, add message type, and accordion alignment
+- [#365](https://github.com/alleslabs/celatone-frontend/pull/365) Fix pool page UI including helper text gap, icon alignment in pool asset table, empty state border, add message type, input selection icon, and accordion alignment
 ## v1.0.5
 
 ### Features
diff --git a/src/lib/components/forms/SelectInput.tsx b/src/lib/components/forms/SelectInput.tsx
index aec2f0052..1316f0cac 100644
--- a/src/lib/components/forms/SelectInput.tsx
+++ b/src/lib/components/forms/SelectInput.tsx
@@ -117,9 +117,13 @@ export const SelectInput = <T extends string>({
           }}
         >
           <div className="form-label">{formLabel}</div>
-          {selectedOption?.icon && (
-            <InputLeftElement pointerEvents="none" h="full" ml="1">
+          {selectedOption?.image && (
+            <InputLeftElement pointerEvents="none" h="full" ml={1}>
               <Image boxSize={6} src={selectedOption.image} />
+            </InputLeftElement>
+          )}
+          {selectedOption?.icon && (
+            <InputLeftElement pointerEvents="none" h="full" ml={1}>
               <CustomIcon
                 name={selectedOption.icon}
                 color={selectedOption.iconColor}
@@ -134,7 +138,7 @@ export const SelectInput = <T extends string>({
             value={selected || placeholder}
             fontSize="14px"
             color={selected ? "text.main" : "text.dark"}
-            pl={selectedOption?.icon ? 9 : 4}
+            pl={selectedOption?.icon || selectedOption?.image ? 10 : 4}
           />
           <InputRightElement pointerEvents="none" h="full">
             <CustomIcon name="chevron-down" color="pebble.600" />

From cc7ddc33e1963a451941669477369176657d50a0 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 30 May 2023 10:48:25 +0700
Subject: [PATCH 177/354] fix(components): refactor and remove unneeded flex

---
 src/lib/components/Breadcrumb.tsx             |  64 +++----
 src/lib/pages/account-details/index.tsx       |   2 +-
 .../components/BlockDetailsTop.tsx            |   2 +-
 src/lib/pages/block-details/index.tsx         |   2 +-
 src/lib/pages/code-details/index.tsx          | 157 +++++++++---------
 .../components/DetailHeader.tsx               |   2 +-
 6 files changed, 113 insertions(+), 116 deletions(-)

diff --git a/src/lib/components/Breadcrumb.tsx b/src/lib/components/Breadcrumb.tsx
index 43deb221d..40b5115b7 100644
--- a/src/lib/components/Breadcrumb.tsx
+++ b/src/lib/components/Breadcrumb.tsx
@@ -2,14 +2,15 @@ import {
   Breadcrumb as ChakraBreadcrumb,
   BreadcrumbItem as ChakraBreadcrumbItem,
   Text,
-  Flex,
 } from "@chakra-ui/react";
 
+import type { Option } from "lib/types";
+
 import { AppLink } from "./AppLink";
 import { CustomIcon } from "./icon";
 
 type BreadcrumbItemProps = {
-  text: string | null;
+  text: Option<string>;
   href?: string;
 };
 
@@ -17,36 +18,39 @@ type BreadcrumbProps = {
   items: BreadcrumbItemProps[];
   mb?: number;
 };
+
 export const Breadcrumb = ({ items, mb = 0 }: BreadcrumbProps) => (
-  <ChakraBreadcrumb w="full" spacing="4px" mb={mb}>
-    {items.map((item) => (
-      <>
-        {item.href ? (
-          <Flex display={item.text ? "flex" : "none"} align="center">
-            <ChakraBreadcrumbItem
-              _hover={{ opacity: 0.8 }}
-              transition="all 0.25s ease-in-out"
-            >
-              <AppLink color="text.dark" href={item.href}>
-                {item.text}
-              </AppLink>
-            </ChakraBreadcrumbItem>
-            <CustomIcon name="chevron-right" boxSize={3} color="gray.600" />
-          </Flex>
-        ) : (
-          <ChakraBreadcrumbItem isCurrentPage>
-            <Text
-              variant="body2"
-              className="ellipsis"
-              fontWeight="600"
-              width="250px"
-              color="text.dark"
-            >
+  <ChakraBreadcrumb
+    w="full"
+    spacing="4px"
+    mb={mb}
+    separator={<CustomIcon name="chevron-right" boxSize={3} color="gray.600" />}
+  >
+    {items.map((item) =>
+      item.href ? (
+        item.text && (
+          <ChakraBreadcrumbItem
+            _hover={{ opacity: 0.8 }}
+            transition="all 0.25s ease-in-out"
+          >
+            <AppLink color="text.dark" href={item.href}>
               {item.text}
-            </Text>
+            </AppLink>
           </ChakraBreadcrumbItem>
-        )}
-      </>
-    ))}
+        )
+      ) : (
+        <ChakraBreadcrumbItem isCurrentPage>
+          <Text
+            variant="body2"
+            className="ellipsis"
+            fontWeight={600}
+            width="250px"
+            color="text.dark"
+          >
+            {item.text}
+          </Text>
+        </ChakraBreadcrumbItem>
+      )
+    )}
   </ChakraBreadcrumb>
 );
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 595f04058..1cc2c2a31 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -107,7 +107,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
         )}
         <Flex direction="column" gap={2}>
           <Flex gap={1} minH="36px" align="center">
-            <CustomIcon name="wallet" boxSize="5" color="secondary.main" />
+            <CustomIcon name="wallet" boxSize={5} color="secondary.main" />
             {publicDetail?.logo && (
               <Image
                 src={publicDetail.logo}
diff --git a/src/lib/pages/block-details/components/BlockDetailsTop.tsx b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
index ea314cc66..8c05813a8 100644
--- a/src/lib/pages/block-details/components/BlockDetailsTop.tsx
+++ b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
@@ -47,7 +47,7 @@ export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
       <Flex direction="column" gap={2} width="full">
         <Flex justifyContent="space-between" alignItems="center" width="full">
           <Flex alignItems="center">
-            <CustomIcon name="block" boxSize="5" color="secondary.main" />
+            <CustomIcon name="block" boxSize={5} color="secondary.main" />
             <Heading as="h5" variant="h5" className="ellipsis">
               {blockData.height}
             </Heading>
diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx
index 36d3400cf..4400562e1 100644
--- a/src/lib/pages/block-details/index.tsx
+++ b/src/lib/pages/block-details/index.tsx
@@ -29,7 +29,7 @@ const BlockDetail = () => {
       <Breadcrumb
         items={[
           { text: "Blocks", href: "/blocks" },
-          { text: blockData?.height.toString() ?? "" },
+          { text: blockData?.height.toString() },
         ]}
       />
       {blockData ? (
diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index 89ca9ec5f..00465a752 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -41,94 +41,87 @@ const CodeDetailsBody = observer(
 
     return (
       <>
-        <Flex direction="column">
-          <Breadcrumb
-            items={[
-              {
-                text: publicProject.publicCodeData?.name
-                  ? "Public Projects"
-                  : "Codes",
-                href: publicProject.publicCodeData?.name
-                  ? `/projects`
-                  : "/codes",
-              },
-              {
-                text: publicProject.publicDetail?.name ?? null,
-                href: `/projects/${publicProject.publicCodeData?.slug}`,
-              },
-              { text: codeId.toString() ?? "" },
-            ]}
-          />
-          <Flex direction="column" gap={2} w="full" mt={6}>
-            <Flex justify="space-between" align="center">
-              <Flex gap={1}>
-                <CustomIcon name="code" boxSize="5" color="secondary.main" />
-                {publicProject.publicDetail?.logo && (
-                  <Image
-                    src={publicProject.publicDetail.logo}
-                    borderRadius="full"
-                    alt={publicProject.publicDetail.name}
-                    width={7}
-                    height={7}
-                  />
-                )}
-                <Heading as="h5" variant="h5">
-                  {localCodeInfo?.name ??
-                    publicProject.publicCodeData?.name ??
-                    codeId}
-                </Heading>
-              </Flex>
-              <CTASection
-                id={codeId}
-                uploader={localCodeInfo?.uploader ?? codeData.uploader}
-                name={localCodeInfo?.name}
-                instantiatePermission={
-                  codeData.instantiatePermission ??
-                  AccessConfigPermission.UNKNOWN
-                }
-                permissionAddresses={codeData.permissionAddresses ?? []}
-                contractCount={undefined}
-                cw2Contract={undefined}
-                cw2Version={undefined}
-              />
-            </Flex>
-            <Flex direction="column" gap={1}>
-              {publicProject.publicCodeData?.name && (
-                <Flex gap={2}>
-                  <Text fontWeight={500} color="text.dark" variant="body2">
-                    Public Code Name:
-                  </Text>
-                  <Text variant="body2">
-                    {publicProject.publicCodeData.name}
-                  </Text>
-                </Flex>
-              )}
-              <Flex gap={2}>
-                <Text fontWeight={500} color="text.dark" variant="body2">
-                  Code ID:
-                </Text>
-                <CopyLink
-                  value={codeId.toString()}
-                  amptrackSection="code_top"
-                  type="code_id"
+        <Breadcrumb
+          items={[
+            {
+              text: publicProject.publicCodeData?.name
+                ? "Public Projects"
+                : "Codes",
+              href: publicProject.publicCodeData?.name ? `/projects` : "/codes",
+            },
+            {
+              text: publicProject.publicDetail?.name,
+              href: `/projects/${publicProject.publicCodeData?.slug}`,
+            },
+            { text: codeId.toString() },
+          ]}
+        />
+        <Flex direction="column" gap={2} w="full" mt={6}>
+          <Flex justify="space-between" align="center">
+            <Flex gap={1}>
+              <CustomIcon name="code" boxSize={5} color="secondary.main" />
+              {publicProject.publicDetail?.logo && (
+                <Image
+                  src={publicProject.publicDetail.logo}
+                  borderRadius="full"
+                  alt={publicProject.publicDetail.name}
+                  width={7}
+                  height={7}
                 />
-              </Flex>
+              )}
+              <Heading as="h5" variant="h5">
+                {localCodeInfo?.name ??
+                  publicProject.publicCodeData?.name ??
+                  codeId}
+              </Heading>
+            </Flex>
+            <CTASection
+              id={codeId}
+              uploader={localCodeInfo?.uploader ?? codeData.uploader}
+              name={localCodeInfo?.name}
+              instantiatePermission={
+                codeData.instantiatePermission ?? AccessConfigPermission.UNKNOWN
+              }
+              permissionAddresses={codeData.permissionAddresses ?? []}
+              contractCount={undefined}
+              cw2Contract={undefined}
+              cw2Version={undefined}
+            />
+          </Flex>
+          <Flex direction="column" gap={1}>
+            {publicProject.publicCodeData?.name && (
               <Flex gap={2}>
                 <Text fontWeight={500} color="text.dark" variant="body2">
-                  CW2 Info:
-                </Text>
-                <Text
-                  color={cw2Info ? "text.main" : "text.disabled"}
-                  variant="body2"
-                  wordBreak="break-all"
-                >
-                  {cw2Info ?? "N/A"}
+                  Public Code Name:
                 </Text>
+                <Text variant="body2">{publicProject.publicCodeData.name}</Text>
               </Flex>
-              {publicProject.publicCodeData?.github && (
-                <GitHubLink github={publicProject.publicCodeData.github} />
-              )}
+            )}
+            <Flex gap={2}>
+              <Text fontWeight={500} color="text.dark" variant="body2">
+                Code ID:
+              </Text>
+              <CopyLink
+                value={codeId.toString()}
+                amptrackSection="code_top"
+                type="code_id"
+              />
+            </Flex>
+            <Flex gap={2}>
+              <Text fontWeight={500} color="text.dark" variant="body2">
+                CW2 Info:
+              </Text>
+              <Text
+                color={cw2Info ? "text.main" : "text.disabled"}
+                variant="body2"
+                wordBreak="break-all"
+              >
+                {cw2Info ?? "N/A"}
+              </Text>
             </Flex>
+            {publicProject.publicCodeData?.github && (
+              <GitHubLink github={publicProject.publicCodeData.github} />
+            )}
           </Flex>
         </Flex>
         {publicProject.publicCodeData?.description && (
diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx
index 0fae6e79f..6321074af 100644
--- a/src/lib/pages/public-project/components/DetailHeader.tsx
+++ b/src/lib/pages/public-project/components/DetailHeader.tsx
@@ -16,7 +16,7 @@ export const DetailHeader = ({ details, slug }: DetailHeaderProps) => (
     <Breadcrumb
       items={[
         { text: "Public Projects", href: "/projects" },
-        { text: details?.name ?? "" },
+        { text: details?.name },
       ]}
     />
     <Flex

From 32de12d7287d47a06b23dc1b3b5ca46b37978a86 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Tue, 30 May 2023 11:25:52 +0700
Subject: [PATCH 178/354] fix: style

---
 src/lib/components/Tooltip.tsx                        |  2 +-
 src/lib/pages/past-txs/index.tsx                      | 11 +++--------
 .../pools/components/pool-details/PoolAssets.tsx      |  4 ++--
 3 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/Tooltip.tsx b/src/lib/components/Tooltip.tsx
index 71a64f652..64f984d58 100644
--- a/src/lib/components/Tooltip.tsx
+++ b/src/lib/components/Tooltip.tsx
@@ -28,7 +28,7 @@ export const TooltipInfo = ({
       <CustomIcon
         color="pebble.600"
         name={iconVariant === "solid" ? "info-circle-solid" : "info-circle"}
-        boxSize="12px"
+        boxSize={3}
         m={0}
       />
     </Flex>
diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx
index 61a7601f9..0ae1e0dcb 100644
--- a/src/lib/pages/past-txs/index.tsx
+++ b/src/lib/pages/past-txs/index.tsx
@@ -144,7 +144,7 @@ const PastTxs = () => {
             placeholder="Search with transaction hash or contract address"
             h="full"
           />
-          <InputRightElement pointerEvents="none" h="full" mr="1">
+          <InputRightElement pointerEvents="none" h="full" mr={1}>
             <CustomIcon name="search" color="pebble.600" />
           </InputRightElement>
         </InputGroup>
@@ -171,18 +171,13 @@ const PastTxs = () => {
           !pastTxsState.search.trim().length || !filterSelected.length ? (
             <EmptyState
               imageVariant="not-found"
-              message={`
-            No past transaction matches found with your input.
-            You can search with transaction hash, and contract address.
-            `}
+              message="No past transaction matches found with your input. You can search with transaction hash, and contract address."
               withBorder
             />
           ) : (
             <EmptyState
               imageVariant="empty"
-              message={`
-            Past transactions will display here.
-            `}
+              message="Past transactions will display here."
               withBorder
             />
           )
diff --git a/src/lib/pages/pools/components/pool-details/PoolAssets.tsx b/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
index 7a83d6ff4..303212def 100644
--- a/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
+++ b/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
@@ -39,7 +39,7 @@ export const PoolAssets = ({ pool }: PoolAssetsProps) => {
         )}
       </Flex>
       <PoolAssetsTable pool={pool} totalLiquidity={totalLiquidity} />
-      <Flex gap="2" alignItems="center" mt={4}>
+      <Flex gap={2} alignItems="center" mt={4}>
         <Text variant="body2" color="text.dark">
           What is asset weight and allocation?
         </Text>
@@ -52,7 +52,7 @@ export const PoolAssets = ({ pool }: PoolAssetsProps) => {
             <Text color="lilac.main" variant="body2">
               Read more
             </Text>
-            <CustomIcon name="launch" color="lilac.main" boxSize="3" />
+            <CustomIcon name="launch" color="lilac.main" boxSize={3} />
           </Flex>
         </Link>
       </Flex>

From 666c7763752e4420b487cc7f3095146b86e699ed Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 30 May 2023 11:26:42 +0700
Subject: [PATCH 179/354] fix: remove usememo

---
 .../pages/pools/components/unsupportedSection/index.tsx   | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
index 449822784..7539b84b3 100644
--- a/src/lib/pages/pools/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -10,7 +10,7 @@ import {
   Text,
 } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { SUPERFLUID_ICON } from "../../constant";
@@ -47,10 +47,8 @@ export const UnsupportedSection = ({
     },
   });
   const { poolTypeValue, keyword, isSuperfluidOnly } = watch();
-  const search = useMemo(
-    () => (!keyword || isPositiveInt(keyword) ? keyword : `{"${keyword}"}`),
-    [keyword]
-  );
+  const search =
+    !keyword || isPositiveInt(keyword) ? keyword : `{"${keyword}"}`;
 
   const { data: totalData = 0, refetch: refetchCount } = usePoolListCountQuery({
     isSupported: false,

From 365f10c5af8c14881c2b80b0f2550e0c342b0879 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 30 May 2023 13:22:20 +0700
Subject: [PATCH 180/354] fix: msg type

---
 .../pool-details/tables/pool-txs/PoolTxsMsg.tsx    | 14 ++++++--------
 .../components/tx-message/TxMsgExpand.tsx          |  5 ++---
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
index fb85a3795..c29d945a0 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx
@@ -7,7 +7,7 @@ import { Tooltip } from "lib/components/Tooltip";
 import { AmpTrackExpand } from "lib/services/amplitude";
 import type { AssetInfosOpt } from "lib/services/assetService";
 import type { Message, Option, PoolDetail, Transaction } from "lib/types";
-import { dateFromNow, formatUTC } from "lib/utils";
+import { dateFromNow, extractMsgType, formatUTC } from "lib/utils";
 
 import { PoolMsgAction, PoolMsgDetail } from "./messages";
 import { PoolOtherMsgs } from "./messages/PoolOtherMsgs";
@@ -62,7 +62,7 @@ export const PoolTxsMsg = ({
             AmpTrackExpand({
               action: !isOpen ? "expand" : "collapse",
               component: "pool_tx_msg",
-              info: { msgType: message.type.split(".").at(-1) },
+              info: { msgType: extractMsgType(message.type) },
               section: `pool_txs`,
             });
           }
@@ -112,9 +112,7 @@ export const PoolTxsMsg = ({
               msg={message}
               pool={pool}
               assetInfos={assetInfos}
-              ampCopierSection={`pool_txs-${message.type
-                .split(".")
-                .at(-1)}-row`}
+              ampCopierSection={`pool_txs-${extractMsgType(message.type)}-row`}
             />
           ) : (
             <PoolOtherMsgs otherMsgs={otherMsgs} isIbc={transaction.isIbc} />
@@ -159,9 +157,9 @@ export const PoolTxsMsg = ({
               pool={pool}
               assetInfos={assetInfos}
               isOpened={isOpen}
-              ampCopierSection={`pool_txs-${message.type
-                .split(".")
-                .at(-1)}-detail`}
+              ampCopierSection={`pool_txs-${extractMsgType(
+                message.type
+              )}-detail`}
             />
           </TableNoBorderRow>
         </Grid>
diff --git a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
index f83c7b224..87c3ab54f 100644
--- a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
@@ -11,7 +11,7 @@ import { CustomIcon } from "lib/components/icon";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import type { Addr } from "lib/types";
 import type { VoteOption } from "lib/utils";
-import { formatBalanceWithDenom, voteOption } from "lib/utils";
+import { extractMsgType, formatBalanceWithDenom, voteOption } from "lib/utils";
 
 import type { TxMsgData } from ".";
 
@@ -284,8 +284,7 @@ export const TxMsgExpand = ({
       );
       break;
     default: {
-      const msgType = type.split(".");
-      content = msgType[msgType.length - 1];
+      content = extractMsgType(type);
       break;
     }
   }

From 0e388ea9835cac73ed18e1eeaca83cb07ebfdea5 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 30 May 2023 14:14:41 +0700
Subject: [PATCH 181/354] fix: comment

Co-authored-by: jennieramida <jennieramida@gmail.com>
---
 src/lib/pages/code-details/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index 00465a752..a12a341a3 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -47,7 +47,7 @@ const CodeDetailsBody = observer(
               text: publicProject.publicCodeData?.name
                 ? "Public Projects"
                 : "Codes",
-              href: publicProject.publicCodeData?.name ? `/projects` : "/codes",
+              href: publicProject.publicCodeData?.name ? "/projects" : "/codes",
             },
             {
               text: publicProject.publicDetail?.name,

From c29f68786c260a9c41dbc97bf8059753d413968f Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Tue, 30 May 2023 14:47:33 +0700
Subject: [PATCH 182/354] fix: accordion rendering

---
 .../messages/components/PoolInfoText.tsx      | 17 ++-----
 .../messages/lockup/MsgLockTokensDetail.tsx   | 45 ++++++++----------
 .../messages/lp/MsgExitPoolDetail.tsx         | 21 ++++-----
 .../lp/MsgExitSwapExternAmountOutDetail.tsx   | 21 ++++-----
 .../lp/MsgExitSwapShareAmountInDetail.tsx     | 21 ++++-----
 .../messages/lp/MsgJoinPoolDetail.tsx         | 21 ++++-----
 .../lp/MsgJoinSwapExternAmountInDetail.tsx    | 21 ++++-----
 .../lp/MsgJoinSwapShareAmountOutDetail.tsx    | 21 ++++-----
 .../MsgLockAndSuperfluidDelegateDetail.tsx    | 46 ++++++++-----------
 .../swap/MsgSwapExactAmountInDetail.tsx       | 21 ++++-----
 .../swap/MsgSwapExactAmountOutDetail.tsx      | 21 ++++-----
 11 files changed, 117 insertions(+), 159 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolInfoText.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolInfoText.tsx
index a85c08b1a..628d5cd82 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolInfoText.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolInfoText.tsx
@@ -3,27 +3,20 @@ import type { ReactNode } from "react";
 
 interface PoolInfoTextProps {
   title: string;
-  isText?: boolean;
-  text?: string;
-  component?: ReactNode;
+  children: ReactNode;
 }
 
-export const PoolInfoText = ({
-  title,
-  isText = false,
-  text,
-  component,
-}: PoolInfoTextProps) => (
+export const PoolInfoText = ({ title, children }: PoolInfoTextProps) => (
   <Flex direction="column" gap={1} minW="90px">
     <Text variant="body2" textColor="pebble.500" fontWeight={500}>
       {title}
     </Text>
-    {isText ? (
+    {typeof children === "string" ? (
       <Text variant="body2" fontWeight={400}>
-        {text}
+        {children}
       </Text>
     ) : (
-      component
+      children
     )}
   </Flex>
 );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
index cc382d820..9e2e5a1bd 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
@@ -55,31 +55,26 @@ export const MsgLockTokensDetail = ({
   return (
     <Flex w="full" direction="column" gap={6}>
       <Flex gap={12}>
-        <PoolInfoText
-          title="Block height"
-          component={
-            <ExplorerLink
-              value={blockHeight.toString()}
-              type="block_height"
-              showCopyOnHover
-              ampCopierSection={ampCopierSection}
-            />
-          }
-        />
-        <PoolInfoText title="LockID" isText text={lockId} />
-        <PoolInfoText
-          title="Bonded LP"
-          component={
-            <MsgToken
-              coin={poolAsset}
-              symbol={poolAssetInfo?.symbol}
-              precision={poolAssetInfo?.precision}
-              fontWeight={700}
-              ampCopierSection={ampCopierSection}
-            />
-          }
-        />
-        <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
+        <PoolInfoText title="Block height">
+          <ExplorerLink
+            value={blockHeight.toString()}
+            type="block_height"
+            showCopyOnHover
+            ampCopierSection={ampCopierSection}
+          />
+        </PoolInfoText>
+        <PoolInfoText title="LockID">{lockId}</PoolInfoText>
+        <PoolInfoText title="Bonded LP">
+          <MsgToken
+            coin={poolAsset}
+            symbol={poolAssetInfo?.symbol}
+            precision={poolAssetInfo?.precision}
+            fontWeight={700}
+            ampCopierSection={ampCopierSection}
+          />
+        </PoolInfoText>
+
+        <PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
       </Flex>
       <PoolAssetCard
         poolId={pool.id}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
index 6dc8cc030..48ff34f31 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitPoolDetail.tsx
@@ -29,18 +29,15 @@ export const MsgExitPoolDetail = ({
 }: MsgExitPoolDetailProps) => (
   <Flex w="full" direction="column" alignItems="start" gap={6}>
     <Flex gap={12}>
-      <PoolInfoText
-        title="Block height"
-        component={
-          <ExplorerLink
-            value={blockHeight.toString()}
-            type="block_height"
-            showCopyOnHover
-            ampCopierSection={ampCopierSection}
-          />
-        }
-      />
-      <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
+      <PoolInfoText title="Block height">
+        <ExplorerLink
+          value={blockHeight.toString()}
+          type="block_height"
+          showCopyOnHover
+          ampCopierSection={ampCopierSection}
+        />
+      </PoolInfoText>
+      <PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
     </Flex>
     <Box w="full">
       <PoolLPCard
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
index 1fbe2da35..5b6e659c5 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapExternAmountOutDetail.tsx
@@ -29,18 +29,15 @@ export const MsgExitSwapExternAmountOutDetail = ({
 }: MsgExitSwapExternAmountOutDetailProps) => (
   <Flex w="full" direction="column" alignItems="start" gap={12}>
     <Flex gap={12}>
-      <PoolInfoText
-        title="Block height"
-        component={
-          <ExplorerLink
-            value={blockHeight.toString()}
-            type="block_height"
-            showCopyOnHover
-            ampCopierSection={ampCopierSection}
-          />
-        }
-      />
-      <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
+      <PoolInfoText title="Block height">
+        <ExplorerLink
+          value={blockHeight.toString()}
+          type="block_height"
+          showCopyOnHover
+          ampCopierSection={ampCopierSection}
+        />
+      </PoolInfoText>
+      <PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
     </Flex>
     <Box w="full">
       <PoolLPCard
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
index f8711e413..18d1b9aaf 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgExitSwapShareAmountInDetail.tsx
@@ -29,18 +29,15 @@ export const MsgExitSwapShareAmountInDetail = ({
 }: MsgExitSwapShareAmountInDetailProps) => (
   <Flex minW="full" direction="column" alignItems="start" gap={6}>
     <Flex gap={12}>
-      <PoolInfoText
-        title="Block height"
-        component={
-          <ExplorerLink
-            value={blockHeight.toString()}
-            type="block_height"
-            showCopyOnHover
-            ampCopierSection={ampCopierSection}
-          />
-        }
-      />
-      <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
+      <PoolInfoText title="Block height">
+        <ExplorerLink
+          value={blockHeight.toString()}
+          type="block_height"
+          showCopyOnHover
+          ampCopierSection={ampCopierSection}
+        />
+      </PoolInfoText>
+      <PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
     </Flex>
     <Box w="full">
       <PoolLPCard
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
index b1f456e0d..136449a1a 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinPoolDetail.tsx
@@ -29,18 +29,15 @@ export const MsgJoinPoolDetail = ({
 }: MsgJoinPoolDetailProps) => (
   <Flex w="full" direction="column" alignItems="start" gap={6}>
     <Flex gap={12}>
-      <PoolInfoText
-        title="Block height"
-        component={
-          <ExplorerLink
-            value={blockHeight.toString()}
-            type="block_height"
-            showCopyOnHover
-            ampCopierSection={ampCopierSection}
-          />
-        }
-      />
-      <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
+      <PoolInfoText title="Block height">
+        <ExplorerLink
+          value={blockHeight.toString()}
+          type="block_height"
+          showCopyOnHover
+          ampCopierSection={ampCopierSection}
+        />
+      </PoolInfoText>
+      <PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
     </Flex>
     <Box w="full">
       <PoolAssetsGrid
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
index 66d1f91da..9fe6458e0 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapExternAmountInDetail.tsx
@@ -29,18 +29,15 @@ export const MsgJoinSwapExternAmountInDetail = ({
 }: MsgJoinSwapExternAmountInDetailProps) => (
   <Flex w="full" direction="column" alignItems="start" gap={6}>
     <Flex gap={12}>
-      <PoolInfoText
-        title="Block height"
-        component={
-          <ExplorerLink
-            value={blockHeight.toString()}
-            type="block_height"
-            showCopyOnHover
-            ampCopierSection={ampCopierSection}
-          />
-        }
-      />
-      <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
+      <PoolInfoText title="Block height">
+        <ExplorerLink
+          value={blockHeight.toString()}
+          type="block_height"
+          showCopyOnHover
+          ampCopierSection={ampCopierSection}
+        />
+      </PoolInfoText>
+      <PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
     </Flex>
     <Box w="full">
       <PoolAssetsGrid
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
index c6b73cd23..642c8e276 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
@@ -29,18 +29,15 @@ export const MsgJoinSwapShareAmountOutDetail = ({
 }: MsgJoinSwapShareAmountOutDetailProps) => (
   <Flex w="full" direction="column" alignItems="start" gap={6}>
     <Flex gap={12}>
-      <PoolInfoText
-        title="Block height"
-        component={
-          <ExplorerLink
-            value={blockHeight.toString()}
-            type="block_height"
-            showCopyOnHover
-            ampCopierSection={ampCopierSection}
-          />
-        }
-      />
-      <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
+      <PoolInfoText title="Block height">
+        <ExplorerLink
+          value={blockHeight.toString()}
+          type="block_height"
+          showCopyOnHover
+          ampCopierSection={ampCopierSection}
+        />
+      </PoolInfoText>
+      <PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
     </Flex>
     <PoolAssetsGrid
       txHash={txHash}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
index 4457cfa5a..cf6953e10 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
@@ -65,32 +65,26 @@ export const MsgLockAndSuperfluidDelegateDetail = ({
   return (
     <Flex w="full" direction="column" gap={6}>
       <Flex gap={12}>
-        <PoolInfoText
-          title="Block height"
-          component={
-            <ExplorerLink
-              value={blockHeight.toString()}
-              type="block_height"
-              showCopyOnHover
-              ampCopierSection={ampCopierSection}
-            />
-          }
-        />
-        <PoolInfoText title="LockID" isText text={lockId} />
-        <PoolInfoText
-          title="To Validator"
-          component={
-            <ValidatorBadge
-              validator={{
-                validatorAddress: msg.val_addr,
-                moniker: validator?.moniker,
-              }}
-              badgeSize={6}
-              ampCopierSection={ampCopierSection}
-            />
-          }
-        />
-        <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
+        <PoolInfoText title="Block height">
+          <ExplorerLink
+            value={blockHeight.toString()}
+            type="block_height"
+            showCopyOnHover
+            ampCopierSection={ampCopierSection}
+          />
+        </PoolInfoText>
+        <PoolInfoText title="LockID">{lockId}</PoolInfoText>
+        <PoolInfoText title="To Validator">
+          <ValidatorBadge
+            validator={{
+              validatorAddress: msg.val_addr,
+              moniker: validator?.moniker,
+            }}
+            badgeSize={6}
+            ampCopierSection={ampCopierSection}
+          />
+        </PoolInfoText>
+        <PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
       </Flex>
       <PoolAssetCard
         poolId={pool.id}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
index 6703e9989..bf0b26685 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
@@ -29,18 +29,15 @@ export const MsgSwapExactAmountInDetail = ({
 }: MsgSwapExactAmountInDetailProps) => (
   <Flex w="full" direction="column" alignItems="start" gap={6}>
     <Flex gap={12}>
-      <PoolInfoText
-        title="Block height"
-        component={
-          <ExplorerLink
-            value={blockHeight.toString()}
-            type="block_height"
-            showCopyOnHover
-            ampCopierSection={ampCopierSection}
-          />
-        }
-      />
-      <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
+      <PoolInfoText title="Block height">
+        <ExplorerLink
+          value={blockHeight.toString()}
+          type="block_height"
+          showCopyOnHover
+          ampCopierSection={ampCopierSection}
+        />
+      </PoolInfoText>
+      <PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
     </Flex>
     <PoolSwap
       txHash={txHash}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
index c708f1f40..8723accdd 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
@@ -38,18 +38,15 @@ export const MsgSwapExactAmountOutDetail = ({
   return (
     <Flex w="full" direction="column" alignItems="start" gap={6}>
       <Flex gap={12}>
-        <PoolInfoText
-          title="Block height"
-          component={
-            <ExplorerLink
-              value={blockHeight.toString()}
-              type="block_height"
-              showCopyOnHover
-              ampCopierSection={ampCopierSection}
-            />
-          }
-        />
-        <PoolInfoText title="Message" isText text={extractMsgType(msg.type)} />
+        <PoolInfoText title="Block height">
+          <ExplorerLink
+            value={blockHeight.toString()}
+            type="block_height"
+            showCopyOnHover
+            ampCopierSection={ampCopierSection}
+          />
+        </PoolInfoText>
+        <PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
       </Flex>
       <PoolSwap
         txHash={txHash}

From 19f457b2b3e71fe80ac24dc916ec1ffc18632f9f Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 30 May 2023 14:49:52 +0700
Subject: [PATCH 183/354] feat(pages): add recent contracts

---
 codegen.ts                                    |   2 +-
 src/lib/gql/gql.ts                            |   5 +
 src/lib/gql/graphql.ts                        | 469 +++++-------------
 src/lib/hooks/index.ts                        |   1 +
 src/lib/hooks/useCodeFilter.ts                |   4 +-
 src/lib/hooks/useContractFilter.ts            |  17 +
 src/lib/layout/navbar/index.tsx               |   7 +-
 src/lib/model/code.ts                         |  10 +-
 src/lib/pages/{recent-codes => codes}/data.ts |   6 +-
 src/lib/pages/codes/index.tsx                 | 123 ++---
 src/lib/pages/contracts/data.ts               |  37 ++
 src/lib/pages/contracts/index.tsx             |  80 +++
 .../components/MySavedCodesSection.tsx        |   0
 .../components/MyStoredCodesSection.tsx       |   0
 .../components/SaveCodeButton.tsx             |   0
 .../components/UploadButton.tsx               |   0
 src/lib/pages/my-codes/index.tsx              | 138 ++++++
 src/lib/pages/recent-codes/index.tsx          | 101 ----
 src/lib/query/contract.ts                     |  19 +
 src/lib/services/codeService.ts               |   2 +-
 src/lib/services/contractService.ts           |  23 +
 src/pages/[network]/codes/index.tsx           |   2 +-
 src/pages/[network]/contracts/index.tsx       |   3 +
 src/pages/[network]/my-codes.tsx              |   2 +-
 src/pages/codes/index.tsx                     |   2 +-
 src/pages/contracts/index.tsx                 |   3 +
 src/pages/my-codes.tsx                        |   2 +-
 27 files changed, 508 insertions(+), 550 deletions(-)
 create mode 100644 src/lib/hooks/useContractFilter.ts
 rename src/lib/pages/{recent-codes => codes}/data.ts (83%)
 create mode 100644 src/lib/pages/contracts/data.ts
 create mode 100644 src/lib/pages/contracts/index.tsx
 rename src/lib/pages/{codes => my-codes}/components/MySavedCodesSection.tsx (100%)
 rename src/lib/pages/{codes => my-codes}/components/MyStoredCodesSection.tsx (100%)
 rename src/lib/pages/{codes => my-codes}/components/SaveCodeButton.tsx (100%)
 rename src/lib/pages/{codes => my-codes}/components/UploadButton.tsx (100%)
 create mode 100644 src/lib/pages/my-codes/index.tsx
 delete mode 100644 src/lib/pages/recent-codes/index.tsx
 create mode 100644 src/pages/[network]/contracts/index.tsx
 create mode 100644 src/pages/contracts/index.tsx

diff --git a/codegen.ts b/codegen.ts
index 41900b584..60fe0f917 100644
--- a/codegen.ts
+++ b/codegen.ts
@@ -1,7 +1,7 @@
 import type { CodegenConfig } from "@graphql-codegen/cli";
 
 const config: CodegenConfig = {
-  schema: "https://osmosis-testnet-graphql.alleslabs.dev/v1/graphql",
+  schema: "https://osmo-test-5-graphql.alleslabs.dev/v1/graphql",
   documents: ["src/**/*.tsx", "src/**/*.ts"],
   ignoreNoDocuments: true, // for better experience with the watcher
   generates: {
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index 5dcec9e70..7ebadd843 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -25,6 +25,8 @@ const documents = {
     types.GetCodeListByWalletAddressPaginationDocument,
   "\n  query getCodeListCountByWalletAddress($walletAddress: String!) {\n    codes_aggregate(where: { account: { address: { _eq: $walletAddress } } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetCodeListCountByWalletAddressDocument,
+  "\n  query getContractListQuery {\n    contracts(\n      limit: 100\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      accountByInitBy {\n        address\n      }\n    }\n  }\n":
+    types.GetContractListQueryDocument,
   "\n  query getInstantiatedListByUserQueryDocument($walletAddr: String!) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n      limit: 100\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      label\n      address\n      accountByInitBy {\n        address\n      }\n    }\n  }\n":
     types.GetInstantiatedListByUserQueryDocumentDocument,
   "\n  query getInstantiatedCountByUserQueryDocument($walletAddr: String!) {\n    contracts_aggregate(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
@@ -110,6 +112,9 @@ export function graphql(
 export function graphql(
   source: "\n  query getCodeListCountByWalletAddress($walletAddress: String!) {\n    codes_aggregate(where: { account: { address: { _eq: $walletAddress } } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getCodeListCountByWalletAddress($walletAddress: String!) {\n    codes_aggregate(where: { account: { address: { _eq: $walletAddress } } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getContractListQuery {\n    contracts(\n      limit: 100\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"
+): typeof documents["\n  query getContractListQuery {\n    contracts(\n      limit: 100\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getInstantiatedListByUserQueryDocument($walletAddr: String!) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n      limit: 100\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      label\n      address\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getInstantiatedListByUserQueryDocument($walletAddr: String!) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n      limit: 100\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      label\n      address\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index 266671678..a690c8be2 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -4800,12 +4800,6 @@ export type End_Block_Events_Variance_Order_By = {
   block_height?: InputMaybe<Order_By>;
 };
 
-export type Get_Top_Pool_Assets_Args = {
-  is_superfluid_flag?: InputMaybe<Scalars["Boolean"]>;
-  limit_arg?: InputMaybe<Scalars["Int"]>;
-  pool_type_arg?: InputMaybe<Scalars["pooltype"]>;
-};
-
 /** Boolean expression to compare columns of type "json". All fields are combined with logical 'AND'. */
 export type Json_Comparison_Exp = {
   _eq?: InputMaybe<Scalars["json"]>;
@@ -5165,8 +5159,6 @@ export type Mutation_Root = {
   delete_proposals?: Maybe<Proposals_Mutation_Response>;
   /** delete single row from the table: "proposals" */
   delete_proposals_by_pk?: Maybe<Proposals>;
-  /** delete data from the table: "top_assets_result" */
-  delete_top_assets_result?: Maybe<Top_Assets_Result_Mutation_Response>;
   /** delete data from the table: "tracking" */
   delete_tracking?: Maybe<Tracking_Mutation_Response>;
   /** delete single row from the table: "tracking" */
@@ -5255,10 +5247,6 @@ export type Mutation_Root = {
   insert_proposals?: Maybe<Proposals_Mutation_Response>;
   /** insert a single row into the table: "proposals" */
   insert_proposals_one?: Maybe<Proposals>;
-  /** insert data into the table: "top_assets_result" */
-  insert_top_assets_result?: Maybe<Top_Assets_Result_Mutation_Response>;
-  /** insert a single row into the table: "top_assets_result" */
-  insert_top_assets_result_one?: Maybe<Top_Assets_Result>;
   /** insert data into the table: "tracking" */
   insert_tracking?: Maybe<Tracking_Mutation_Response>;
   /** insert a single row into the table: "tracking" */
@@ -5389,12 +5377,6 @@ export type Mutation_Root = {
   update_proposals_by_pk?: Maybe<Proposals>;
   /** update multiples rows of table: "proposals" */
   update_proposals_many?: Maybe<Array<Maybe<Proposals_Mutation_Response>>>;
-  /** update data of the table: "top_assets_result" */
-  update_top_assets_result?: Maybe<Top_Assets_Result_Mutation_Response>;
-  /** update multiples rows of table: "top_assets_result" */
-  update_top_assets_result_many?: Maybe<
-    Array<Maybe<Top_Assets_Result_Mutation_Response>>
-  >;
   /** update data of the table: "tracking" */
   update_tracking?: Maybe<Tracking_Mutation_Response>;
   /** update single row of the table: "tracking" */
@@ -5553,11 +5535,6 @@ export type Mutation_RootDelete_Proposals_By_PkArgs = {
   id: Scalars["Int"];
 };
 
-/** mutation root */
-export type Mutation_RootDelete_Top_Assets_ResultArgs = {
-  where: Top_Assets_Result_Bool_Exp;
-};
-
 /** mutation root */
 export type Mutation_RootDelete_TrackingArgs = {
   where: Tracking_Bool_Exp;
@@ -5793,16 +5770,6 @@ export type Mutation_RootInsert_Proposals_OneArgs = {
   on_conflict?: InputMaybe<Proposals_On_Conflict>;
 };
 
-/** mutation root */
-export type Mutation_RootInsert_Top_Assets_ResultArgs = {
-  objects: Array<Top_Assets_Result_Insert_Input>;
-};
-
-/** mutation root */
-export type Mutation_RootInsert_Top_Assets_Result_OneArgs = {
-  object: Top_Assets_Result_Insert_Input;
-};
-
 /** mutation root */
 export type Mutation_RootInsert_TrackingArgs = {
   objects: Array<Tracking_Insert_Input>;
@@ -6124,18 +6091,6 @@ export type Mutation_RootUpdate_Proposals_ManyArgs = {
   updates: Array<Proposals_Updates>;
 };
 
-/** mutation root */
-export type Mutation_RootUpdate_Top_Assets_ResultArgs = {
-  _inc?: InputMaybe<Top_Assets_Result_Inc_Input>;
-  _set?: InputMaybe<Top_Assets_Result_Set_Input>;
-  where: Top_Assets_Result_Bool_Exp;
-};
-
-/** mutation root */
-export type Mutation_RootUpdate_Top_Assets_Result_ManyArgs = {
-  updates: Array<Top_Assets_Result_Updates>;
-};
-
 /** mutation root */
 export type Mutation_RootUpdate_TrackingArgs = {
   _inc?: InputMaybe<Tracking_Inc_Input>;
@@ -8418,10 +8373,6 @@ export type Query_Root = {
   end_block_events: Array<End_Block_Events>;
   /** An aggregate relationship */
   end_block_events_aggregate: End_Block_Events_Aggregate;
-  /** execute function "get_top_pool_assets" which returns "top_assets_result" */
-  get_top_pool_assets: Array<Top_Assets_Result>;
-  /** execute function "get_top_pool_assets" and query aggregates on result of table type "top_assets_result" */
-  get_top_pool_assets_aggregate: Top_Assets_Result_Aggregate;
   /** An array relationship */
   lcd_tx_results: Array<Lcd_Tx_Results>;
   /** An aggregate relationship */
@@ -8450,18 +8401,10 @@ export type Query_Root = {
   proposals_aggregate: Proposals_Aggregate;
   /** fetch data from the table: "proposals" using primary key columns */
   proposals_by_pk?: Maybe<Proposals>;
-  /** execute function "search_pools_with_denom" which returns "pools" */
-  search_pools_with_denom: Array<Pools>;
-  /** execute function "search_pools_with_denom" and query aggregates on result of table type "pools" */
-  search_pools_with_denom_aggregate: Pools_Aggregate;
   /** execute function "search_pools_with_denoms" which returns "pools" */
   search_pools_with_denoms: Array<Pools>;
   /** execute function "search_pools_with_denoms" and query aggregates on result of table type "pools" */
   search_pools_with_denoms_aggregate: Pools_Aggregate;
-  /** fetch data from the table: "top_assets_result" */
-  top_assets_result: Array<Top_Assets_Result>;
-  /** fetch aggregated fields from the table: "top_assets_result" */
-  top_assets_result_aggregate: Top_Assets_Result_Aggregate;
   /** fetch data from the table: "tracking" */
   tracking: Array<Tracking>;
   /** fetch aggregated fields from the table: "tracking" */
@@ -8703,24 +8646,6 @@ export type Query_RootEnd_Block_Events_AggregateArgs = {
   where?: InputMaybe<End_Block_Events_Bool_Exp>;
 };
 
-export type Query_RootGet_Top_Pool_AssetsArgs = {
-  args: Get_Top_Pool_Assets_Args;
-  distinct_on?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
-  limit?: InputMaybe<Scalars["Int"]>;
-  offset?: InputMaybe<Scalars["Int"]>;
-  order_by?: InputMaybe<Array<Top_Assets_Result_Order_By>>;
-  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
-};
-
-export type Query_RootGet_Top_Pool_Assets_AggregateArgs = {
-  args: Get_Top_Pool_Assets_Args;
-  distinct_on?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
-  limit?: InputMaybe<Scalars["Int"]>;
-  offset?: InputMaybe<Scalars["Int"]>;
-  order_by?: InputMaybe<Array<Top_Assets_Result_Order_By>>;
-  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
-};
-
 export type Query_RootLcd_Tx_ResultsArgs = {
   distinct_on?: InputMaybe<Array<Lcd_Tx_Results_Select_Column>>;
   limit?: InputMaybe<Scalars["Int"]>;
@@ -8825,24 +8750,6 @@ export type Query_RootProposals_By_PkArgs = {
   id: Scalars["Int"];
 };
 
-export type Query_RootSearch_Pools_With_DenomArgs = {
-  args: Search_Pools_With_Denom_Args;
-  distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
-  limit?: InputMaybe<Scalars["Int"]>;
-  offset?: InputMaybe<Scalars["Int"]>;
-  order_by?: InputMaybe<Array<Pools_Order_By>>;
-  where?: InputMaybe<Pools_Bool_Exp>;
-};
-
-export type Query_RootSearch_Pools_With_Denom_AggregateArgs = {
-  args: Search_Pools_With_Denom_Args;
-  distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
-  limit?: InputMaybe<Scalars["Int"]>;
-  offset?: InputMaybe<Scalars["Int"]>;
-  order_by?: InputMaybe<Array<Pools_Order_By>>;
-  where?: InputMaybe<Pools_Bool_Exp>;
-};
-
 export type Query_RootSearch_Pools_With_DenomsArgs = {
   args: Search_Pools_With_Denoms_Args;
   distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
@@ -8861,22 +8768,6 @@ export type Query_RootSearch_Pools_With_Denoms_AggregateArgs = {
   where?: InputMaybe<Pools_Bool_Exp>;
 };
 
-export type Query_RootTop_Assets_ResultArgs = {
-  distinct_on?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
-  limit?: InputMaybe<Scalars["Int"]>;
-  offset?: InputMaybe<Scalars["Int"]>;
-  order_by?: InputMaybe<Array<Top_Assets_Result_Order_By>>;
-  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
-};
-
-export type Query_RootTop_Assets_Result_AggregateArgs = {
-  distinct_on?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
-  limit?: InputMaybe<Scalars["Int"]>;
-  offset?: InputMaybe<Scalars["Int"]>;
-  order_by?: InputMaybe<Array<Top_Assets_Result_Order_By>>;
-  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
-};
-
 export type Query_RootTrackingArgs = {
   distinct_on?: InputMaybe<Array<Tracking_Select_Column>>;
   limit?: InputMaybe<Scalars["Int"]>;
@@ -8970,10 +8861,6 @@ export type Query_RootValidators_By_PkArgs = {
   operator_address: Scalars["String"];
 };
 
-export type Search_Pools_With_Denom_Args = {
-  denom?: InputMaybe<Scalars["String"]>;
-};
-
 export type Search_Pools_With_Denoms_Args = {
   denoms?: InputMaybe<Scalars["_varchar"]>;
 };
@@ -9062,10 +8949,6 @@ export type Subscription_Root = {
   end_block_events_aggregate: End_Block_Events_Aggregate;
   /** fetch data from the table in a streaming manner: "end_block_events" */
   end_block_events_stream: Array<End_Block_Events>;
-  /** execute function "get_top_pool_assets" which returns "top_assets_result" */
-  get_top_pool_assets: Array<Top_Assets_Result>;
-  /** execute function "get_top_pool_assets" and query aggregates on result of table type "top_assets_result" */
-  get_top_pool_assets_aggregate: Top_Assets_Result_Aggregate;
   /** An array relationship */
   lcd_tx_results: Array<Lcd_Tx_Results>;
   /** An aggregate relationship */
@@ -9106,20 +8989,10 @@ export type Subscription_Root = {
   proposals_by_pk?: Maybe<Proposals>;
   /** fetch data from the table in a streaming manner: "proposals" */
   proposals_stream: Array<Proposals>;
-  /** execute function "search_pools_with_denom" which returns "pools" */
-  search_pools_with_denom: Array<Pools>;
-  /** execute function "search_pools_with_denom" and query aggregates on result of table type "pools" */
-  search_pools_with_denom_aggregate: Pools_Aggregate;
   /** execute function "search_pools_with_denoms" which returns "pools" */
   search_pools_with_denoms: Array<Pools>;
   /** execute function "search_pools_with_denoms" and query aggregates on result of table type "pools" */
   search_pools_with_denoms_aggregate: Pools_Aggregate;
-  /** fetch data from the table: "top_assets_result" */
-  top_assets_result: Array<Top_Assets_Result>;
-  /** fetch aggregated fields from the table: "top_assets_result" */
-  top_assets_result_aggregate: Top_Assets_Result_Aggregate;
-  /** fetch data from the table in a streaming manner: "top_assets_result" */
-  top_assets_result_stream: Array<Top_Assets_Result>;
   /** fetch data from the table: "tracking" */
   tracking: Array<Tracking>;
   /** fetch aggregated fields from the table: "tracking" */
@@ -9443,24 +9316,6 @@ export type Subscription_RootEnd_Block_Events_StreamArgs = {
   where?: InputMaybe<End_Block_Events_Bool_Exp>;
 };
 
-export type Subscription_RootGet_Top_Pool_AssetsArgs = {
-  args: Get_Top_Pool_Assets_Args;
-  distinct_on?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
-  limit?: InputMaybe<Scalars["Int"]>;
-  offset?: InputMaybe<Scalars["Int"]>;
-  order_by?: InputMaybe<Array<Top_Assets_Result_Order_By>>;
-  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
-};
-
-export type Subscription_RootGet_Top_Pool_Assets_AggregateArgs = {
-  args: Get_Top_Pool_Assets_Args;
-  distinct_on?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
-  limit?: InputMaybe<Scalars["Int"]>;
-  offset?: InputMaybe<Scalars["Int"]>;
-  order_by?: InputMaybe<Array<Top_Assets_Result_Order_By>>;
-  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
-};
-
 export type Subscription_RootLcd_Tx_ResultsArgs = {
   distinct_on?: InputMaybe<Array<Lcd_Tx_Results_Select_Column>>;
   limit?: InputMaybe<Scalars["Int"]>;
@@ -9601,24 +9456,6 @@ export type Subscription_RootProposals_StreamArgs = {
   where?: InputMaybe<Proposals_Bool_Exp>;
 };
 
-export type Subscription_RootSearch_Pools_With_DenomArgs = {
-  args: Search_Pools_With_Denom_Args;
-  distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
-  limit?: InputMaybe<Scalars["Int"]>;
-  offset?: InputMaybe<Scalars["Int"]>;
-  order_by?: InputMaybe<Array<Pools_Order_By>>;
-  where?: InputMaybe<Pools_Bool_Exp>;
-};
-
-export type Subscription_RootSearch_Pools_With_Denom_AggregateArgs = {
-  args: Search_Pools_With_Denom_Args;
-  distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
-  limit?: InputMaybe<Scalars["Int"]>;
-  offset?: InputMaybe<Scalars["Int"]>;
-  order_by?: InputMaybe<Array<Pools_Order_By>>;
-  where?: InputMaybe<Pools_Bool_Exp>;
-};
-
 export type Subscription_RootSearch_Pools_With_DenomsArgs = {
   args: Search_Pools_With_Denoms_Args;
   distinct_on?: InputMaybe<Array<Pools_Select_Column>>;
@@ -9637,28 +9474,6 @@ export type Subscription_RootSearch_Pools_With_Denoms_AggregateArgs = {
   where?: InputMaybe<Pools_Bool_Exp>;
 };
 
-export type Subscription_RootTop_Assets_ResultArgs = {
-  distinct_on?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
-  limit?: InputMaybe<Scalars["Int"]>;
-  offset?: InputMaybe<Scalars["Int"]>;
-  order_by?: InputMaybe<Array<Top_Assets_Result_Order_By>>;
-  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
-};
-
-export type Subscription_RootTop_Assets_Result_AggregateArgs = {
-  distinct_on?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
-  limit?: InputMaybe<Scalars["Int"]>;
-  offset?: InputMaybe<Scalars["Int"]>;
-  order_by?: InputMaybe<Array<Top_Assets_Result_Order_By>>;
-  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
-};
-
-export type Subscription_RootTop_Assets_Result_StreamArgs = {
-  batch_size: Scalars["Int"];
-  cursor: Array<InputMaybe<Top_Assets_Result_Stream_Cursor_Input>>;
-  where?: InputMaybe<Top_Assets_Result_Bool_Exp>;
-};
-
 export type Subscription_RootTrackingArgs = {
   distinct_on?: InputMaybe<Array<Tracking_Select_Column>>;
   limit?: InputMaybe<Scalars["Int"]>;
@@ -9795,175 +9610,6 @@ export type Timestamp_Comparison_Exp = {
   _nin?: InputMaybe<Array<Scalars["timestamp"]>>;
 };
 
-/** columns and relationships of "top_assets_result" */
-export type Top_Assets_Result = {
-  __typename?: "top_assets_result";
-  count?: Maybe<Scalars["Int"]>;
-  denom?: Maybe<Scalars["String"]>;
-};
-
-export type Top_Assets_Result_Aggregate = {
-  __typename?: "top_assets_result_aggregate";
-  aggregate?: Maybe<Top_Assets_Result_Aggregate_Fields>;
-  nodes: Array<Top_Assets_Result>;
-};
-
-/** aggregate fields of "top_assets_result" */
-export type Top_Assets_Result_Aggregate_Fields = {
-  __typename?: "top_assets_result_aggregate_fields";
-  avg?: Maybe<Top_Assets_Result_Avg_Fields>;
-  count: Scalars["Int"];
-  max?: Maybe<Top_Assets_Result_Max_Fields>;
-  min?: Maybe<Top_Assets_Result_Min_Fields>;
-  stddev?: Maybe<Top_Assets_Result_Stddev_Fields>;
-  stddev_pop?: Maybe<Top_Assets_Result_Stddev_Pop_Fields>;
-  stddev_samp?: Maybe<Top_Assets_Result_Stddev_Samp_Fields>;
-  sum?: Maybe<Top_Assets_Result_Sum_Fields>;
-  var_pop?: Maybe<Top_Assets_Result_Var_Pop_Fields>;
-  var_samp?: Maybe<Top_Assets_Result_Var_Samp_Fields>;
-  variance?: Maybe<Top_Assets_Result_Variance_Fields>;
-};
-
-/** aggregate fields of "top_assets_result" */
-export type Top_Assets_Result_Aggregate_FieldsCountArgs = {
-  columns?: InputMaybe<Array<Top_Assets_Result_Select_Column>>;
-  distinct?: InputMaybe<Scalars["Boolean"]>;
-};
-
-/** aggregate avg on columns */
-export type Top_Assets_Result_Avg_Fields = {
-  __typename?: "top_assets_result_avg_fields";
-  count?: Maybe<Scalars["Float"]>;
-};
-
-/** Boolean expression to filter rows from the table "top_assets_result". All fields are combined with a logical 'AND'. */
-export type Top_Assets_Result_Bool_Exp = {
-  _and?: InputMaybe<Array<Top_Assets_Result_Bool_Exp>>;
-  _not?: InputMaybe<Top_Assets_Result_Bool_Exp>;
-  _or?: InputMaybe<Array<Top_Assets_Result_Bool_Exp>>;
-  count?: InputMaybe<Int_Comparison_Exp>;
-  denom?: InputMaybe<String_Comparison_Exp>;
-};
-
-/** input type for incrementing numeric columns in table "top_assets_result" */
-export type Top_Assets_Result_Inc_Input = {
-  count?: InputMaybe<Scalars["Int"]>;
-};
-
-/** input type for inserting data into table "top_assets_result" */
-export type Top_Assets_Result_Insert_Input = {
-  count?: InputMaybe<Scalars["Int"]>;
-  denom?: InputMaybe<Scalars["String"]>;
-};
-
-/** aggregate max on columns */
-export type Top_Assets_Result_Max_Fields = {
-  __typename?: "top_assets_result_max_fields";
-  count?: Maybe<Scalars["Int"]>;
-  denom?: Maybe<Scalars["String"]>;
-};
-
-/** aggregate min on columns */
-export type Top_Assets_Result_Min_Fields = {
-  __typename?: "top_assets_result_min_fields";
-  count?: Maybe<Scalars["Int"]>;
-  denom?: Maybe<Scalars["String"]>;
-};
-
-/** response of any mutation on the table "top_assets_result" */
-export type Top_Assets_Result_Mutation_Response = {
-  __typename?: "top_assets_result_mutation_response";
-  /** number of rows affected by the mutation */
-  affected_rows: Scalars["Int"];
-  /** data from the rows affected by the mutation */
-  returning: Array<Top_Assets_Result>;
-};
-
-/** Ordering options when selecting data from "top_assets_result". */
-export type Top_Assets_Result_Order_By = {
-  count?: InputMaybe<Order_By>;
-  denom?: InputMaybe<Order_By>;
-};
-
-/** select columns of table "top_assets_result" */
-export enum Top_Assets_Result_Select_Column {
-  /** column name */
-  Count = "count",
-  /** column name */
-  Denom = "denom",
-}
-
-/** input type for updating data in table "top_assets_result" */
-export type Top_Assets_Result_Set_Input = {
-  count?: InputMaybe<Scalars["Int"]>;
-  denom?: InputMaybe<Scalars["String"]>;
-};
-
-/** aggregate stddev on columns */
-export type Top_Assets_Result_Stddev_Fields = {
-  __typename?: "top_assets_result_stddev_fields";
-  count?: Maybe<Scalars["Float"]>;
-};
-
-/** aggregate stddev_pop on columns */
-export type Top_Assets_Result_Stddev_Pop_Fields = {
-  __typename?: "top_assets_result_stddev_pop_fields";
-  count?: Maybe<Scalars["Float"]>;
-};
-
-/** aggregate stddev_samp on columns */
-export type Top_Assets_Result_Stddev_Samp_Fields = {
-  __typename?: "top_assets_result_stddev_samp_fields";
-  count?: Maybe<Scalars["Float"]>;
-};
-
-/** Streaming cursor of the table "top_assets_result" */
-export type Top_Assets_Result_Stream_Cursor_Input = {
-  /** Stream column input with initial value */
-  initial_value: Top_Assets_Result_Stream_Cursor_Value_Input;
-  /** cursor ordering */
-  ordering?: InputMaybe<Cursor_Ordering>;
-};
-
-/** Initial value of the column from where the streaming should start */
-export type Top_Assets_Result_Stream_Cursor_Value_Input = {
-  count?: InputMaybe<Scalars["Int"]>;
-  denom?: InputMaybe<Scalars["String"]>;
-};
-
-/** aggregate sum on columns */
-export type Top_Assets_Result_Sum_Fields = {
-  __typename?: "top_assets_result_sum_fields";
-  count?: Maybe<Scalars["Int"]>;
-};
-
-export type Top_Assets_Result_Updates = {
-  /** increments the numeric columns with given value of the filtered values */
-  _inc?: InputMaybe<Top_Assets_Result_Inc_Input>;
-  /** sets the columns of the filtered rows to the given values */
-  _set?: InputMaybe<Top_Assets_Result_Set_Input>;
-  /** filter the rows which have to be updated */
-  where: Top_Assets_Result_Bool_Exp;
-};
-
-/** aggregate var_pop on columns */
-export type Top_Assets_Result_Var_Pop_Fields = {
-  __typename?: "top_assets_result_var_pop_fields";
-  count?: Maybe<Scalars["Float"]>;
-};
-
-/** aggregate var_samp on columns */
-export type Top_Assets_Result_Var_Samp_Fields = {
-  __typename?: "top_assets_result_var_samp_fields";
-  count?: Maybe<Scalars["Float"]>;
-};
-
-/** aggregate variance on columns */
-export type Top_Assets_Result_Variance_Fields = {
-  __typename?: "top_assets_result_variance_fields";
-  count?: Maybe<Scalars["Float"]>;
-};
-
 /** columns and relationships of "tracking" */
 export type Tracking = {
   __typename?: "tracking";
@@ -12313,6 +11959,21 @@ export type GetCodeListCountByWalletAddressQuery = {
   };
 };
 
+export type GetContractListQueryQueryVariables = Exact<{
+  [key: string]: never;
+}>;
+
+export type GetContractListQueryQuery = {
+  __typename?: "query_root";
+  contracts: Array<{
+    __typename?: "contracts";
+    address: string;
+    label: string;
+    admin?: { __typename?: "accounts"; address: string } | null;
+    accountByInitBy?: { __typename?: "accounts"; address: string } | null;
+  }>;
+};
+
 export type GetInstantiatedListByUserQueryDocumentQueryVariables = Exact<{
   walletAddr: Scalars["String"];
 }>;
@@ -13956,6 +13617,106 @@ export const GetCodeListCountByWalletAddressDocument = {
   GetCodeListCountByWalletAddressQuery,
   GetCodeListCountByWalletAddressQueryVariables
 >;
+export const GetContractListQueryDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getContractListQuery" },
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "contracts" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "limit" },
+                value: { kind: "IntValue", value: "100" },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "offset" },
+                value: { kind: "IntValue", value: "0" },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "order_by" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "transaction" },
+                      value: {
+                        kind: "ObjectValue",
+                        fields: [
+                          {
+                            kind: "ObjectField",
+                            name: { kind: "Name", value: "block" },
+                            value: {
+                              kind: "ObjectValue",
+                              fields: [
+                                {
+                                  kind: "ObjectField",
+                                  name: { kind: "Name", value: "timestamp" },
+                                  value: { kind: "EnumValue", value: "desc" },
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "address" } },
+                { kind: "Field", name: { kind: "Name", value: "label" } },
+                {
+                  kind: "Field",
+                  alias: { kind: "Name", value: "admin" },
+                  name: { kind: "Name", value: "account" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "address" },
+                      },
+                    ],
+                  },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "accountByInitBy" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "address" },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  GetContractListQueryQuery,
+  GetContractListQueryQueryVariables
+>;
 export const GetInstantiatedListByUserQueryDocumentDocument = {
   kind: "Document",
   definitions: [
diff --git a/src/lib/hooks/index.ts b/src/lib/hooks/index.ts
index d9ecb71b0..6547fd8db 100644
--- a/src/lib/hooks/index.ts
+++ b/src/lib/hooks/index.ts
@@ -1,4 +1,5 @@
 export * from "./useCodeFilter";
+export * from "./useContractFilter";
 export * from "./useExecuteCmds";
 export * from "./useHandleSave";
 export * from "./useQueryCmds";
diff --git a/src/lib/hooks/useCodeFilter.ts b/src/lib/hooks/useCodeFilter.ts
index 822985d38..95b96e5d0 100644
--- a/src/lib/hooks/useCodeFilter.ts
+++ b/src/lib/hooks/useCodeFilter.ts
@@ -9,7 +9,7 @@ export type PermissionFilterValue =
   | "without-proposal"
   | "with-proposal";
 
-export const usePermissionFilter = (filterValue: PermissionFilterValue) => {
+export const useCodePermissionFilter = (filterValue: PermissionFilterValue) => {
   const { address } = useWallet();
   return useCallback(
     ({ instantiatePermission, permissionAddresses }: CodeInfo) => {
@@ -31,7 +31,7 @@ export const usePermissionFilter = (filterValue: PermissionFilterValue) => {
   );
 };
 
-export const useSearchFilter = (keyword: string) =>
+export const useCodeSearchFilter = (keyword: string) =>
   useCallback(
     (code: CodeInfo) => {
       const computedKeyword = keyword.trim();
diff --git a/src/lib/hooks/useContractFilter.ts b/src/lib/hooks/useContractFilter.ts
new file mode 100644
index 000000000..5bde09e6f
--- /dev/null
+++ b/src/lib/hooks/useContractFilter.ts
@@ -0,0 +1,17 @@
+import { useCallback } from "react";
+
+import type { ContractInfo } from "lib/types";
+
+export const useContractSearchFilter = (keyword: string) =>
+  useCallback(
+    (contract: ContractInfo) => {
+      const computedKeyword = keyword.trim();
+      if (!computedKeyword.length) return true;
+      return (
+        contract.contractAddress.startsWith(computedKeyword) ||
+        contract.name?.toLowerCase().includes(computedKeyword.toLowerCase()) ||
+        contract.label.toLowerCase().includes(computedKeyword.toLowerCase())
+      );
+    },
+    [keyword]
+  );
diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index 034be94bf..7af457ab0 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -73,13 +73,18 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
     {
       category: "Codes",
       submenu: [
-        { name: "My Codes", slug: "/my-codes", icon: "code" },
         { name: "Recent Codes", slug: "/codes", icon: "website" },
+        { name: "My Codes", slug: "/my-codes", icon: "code" },
       ],
     },
     {
       category: "Contracts",
       submenu: [
+        {
+          name: "Recent Contracts",
+          slug: "/contracts",
+          icon: "website",
+        },
         {
           name: INSTANTIATED_LIST_NAME,
           slug: `/contract-lists/${formatSlugName(INSTANTIATED_LIST_NAME)}`,
diff --git a/src/lib/model/code.ts b/src/lib/model/code.ts
index 744d973a5..440e518ab 100644
--- a/src/lib/model/code.ts
+++ b/src/lib/model/code.ts
@@ -3,7 +3,11 @@ import { useMemo } from "react";
 
 import { useChainId } from "lib/app-provider";
 import type { PermissionFilterValue } from "lib/hooks";
-import { useUserKey, usePermissionFilter, useSearchFilter } from "lib/hooks";
+import {
+  useUserKey,
+  useCodePermissionFilter,
+  useCodeSearchFilter,
+} from "lib/hooks";
 import { useCodeStore } from "lib/providers/store";
 import {
   useCodeDataByCodeId,
@@ -112,8 +116,8 @@ export const useMyCodesData = (
   keyword: string,
   permissionValue: PermissionFilterValue
 ): MyCodesData => {
-  const permissionFilterFn = usePermissionFilter(permissionValue);
-  const searchFilterFn = useSearchFilter(keyword);
+  const permissionFilterFn = useCodePermissionFilter(permissionValue);
+  const searchFilterFn = useCodeSearchFilter(keyword);
 
   const { storedCodes, isLoading: isStoredCodesLoading } = useStoredCodes();
   const { savedCodes, isLoading: isSavedCodesLoading } = useSavedCodes();
diff --git a/src/lib/pages/recent-codes/data.ts b/src/lib/pages/codes/data.ts
similarity index 83%
rename from src/lib/pages/recent-codes/data.ts
rename to src/lib/pages/codes/data.ts
index c9fc3ec6a..9360ed375 100644
--- a/src/lib/pages/recent-codes/data.ts
+++ b/src/lib/pages/codes/data.ts
@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 
 import type { PermissionFilterValue } from "lib/hooks";
-import { usePermissionFilter, useSearchFilter } from "lib/hooks";
+import { useCodePermissionFilter, useCodeSearchFilter } from "lib/hooks";
 import { useCodeStore } from "lib/providers/store";
 import { useCodeListQuery } from "lib/services/codeService";
 import type { CodeInfo } from "lib/types";
@@ -17,8 +17,8 @@ export const useRecentCodesData = (
 ): RecentCodesData => {
   const { getCodeLocalInfo, isCodeIdSaved } = useCodeStore();
   const { data: rawRecentCodes = [], isLoading } = useCodeListQuery();
-  const permissionFilterFn = usePermissionFilter(permissionValue);
-  const searchFilterFn = useSearchFilter(keyword);
+  const permissionFilterFn = useCodePermissionFilter(permissionValue);
+  const searchFilterFn = useCodeSearchFilter(keyword);
 
   const recentCodes = rawRecentCodes.map<CodeInfo>((code) => ({
     ...code,
diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx
index 69d76c8b7..e3db87bfa 100644
--- a/src/lib/pages/codes/index.tsx
+++ b/src/lib/pages/codes/index.tsx
@@ -1,11 +1,4 @@
-import {
-  Heading,
-  Tabs,
-  TabList,
-  TabPanels,
-  TabPanel,
-  Flex,
-} from "@chakra-ui/react";
+import { Heading, Box, Flex } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import type { ChangeEvent } from "react";
@@ -13,23 +6,22 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 
 import { useInternalNavigate } from "lib/app-provider";
-import { CustomTab } from "lib/components/CustomTab";
 import { FilterByPermission } from "lib/components/forms";
 import InputWithIcon from "lib/components/InputWithIcon";
 import PageContainer from "lib/components/PageContainer";
+import { EmptyState } from "lib/components/state";
+import { CodesTable } from "lib/components/table";
 import type { PermissionFilterValue } from "lib/hooks";
-import { useMyCodesData } from "lib/model/code";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 
-import { MySavedCodesSection } from "./components/MySavedCodesSection";
-import { MyStoredCodesSection } from "./components/MyStoredCodesSection";
+import { useRecentCodesData } from "./data";
 
-interface CodeFilterState {
+interface RecentCodesState {
   keyword: string;
   permissionValue: PermissionFilterValue;
 }
 
-const Codes = observer(() => {
+const RecentCodes = observer(() => {
   const router = useRouter();
   const navigate = useInternalNavigate();
   const onRowSelect = (codeId: number) =>
@@ -38,48 +30,37 @@ const Codes = observer(() => {
       query: { codeId },
     });
 
-  const { watch, setValue } = useForm<CodeFilterState>({
+  const { watch, setValue } = useForm<RecentCodesState>({
     defaultValues: {
       permissionValue: "all",
       keyword: "",
     },
   });
   const { keyword, permissionValue } = watch();
-
-  const {
-    storedCodesCount,
-    storedCodes: stored,
-    savedCodesCount,
-    savedCodes: saved,
-    allCodesCount,
-    isStoredCodesLoading,
-    isSavedCodesLoading,
-  } = useMyCodesData(keyword, permissionValue);
-
-  const isSearching = !!keyword || permissionValue !== "all";
+  const { recentCodes, isLoading } = useRecentCodesData(
+    keyword,
+    permissionValue
+  );
 
   useEffect(() => {
-    if (router.isReady) AmpTrack(AmpEvent.TO_MY_CODES);
+    if (router.isReady) AmpTrack(AmpEvent.TO_RECENT_CODES);
   }, [router.isReady]);
 
+  const isSearching = !!keyword || permissionValue !== "all";
+
   return (
     <PageContainer>
-      <Heading
-        variant="h5"
-        as="h5"
-        minH="36px"
-        display="flex"
-        alignItems="center"
-      >
-        My Codes
-      </Heading>
-      <Tabs mt={8}>
-        <TabList mb={8} borderBottom="1px" borderColor="gray.800">
-          <CustomTab count={allCodesCount}>All Codes</CustomTab>
-          <CustomTab count={storedCodesCount}>My Stored Codes</CustomTab>
-          <CustomTab count={savedCodesCount}>My Saved Codes </CustomTab>
-        </TabList>
-        <Flex gap={3} pb={4}>
+      <Box pb={12}>
+        <Heading
+          variant="h5"
+          as="h5"
+          minH="36px"
+          display="flex"
+          alignItems="center"
+        >
+          Recent Codes
+        </Heading>
+        <Flex gap={3} mt={8}>
           <InputWithIcon
             placeholder="Search with code ID or code name"
             value={keyword}
@@ -96,43 +77,25 @@ const Codes = observer(() => {
             }}
           />
         </Flex>
-        <TabPanels>
-          <TabPanel p={0}>
-            <MyStoredCodesSection
-              codes={stored}
-              isLoading={isStoredCodesLoading}
-              onRowSelect={onRowSelect}
-              disconnectedMessage="to see your previously uploaded and stored codes."
-              isSearching={isSearching}
-            />
-            <MySavedCodesSection
-              codes={saved}
-              isLoading={isSavedCodesLoading}
-              onRowSelect={onRowSelect}
-              isSearching={isSearching}
-            />
-          </TabPanel>
-          <TabPanel p={0}>
-            <MyStoredCodesSection
-              codes={stored}
-              isLoading={isStoredCodesLoading}
-              onRowSelect={onRowSelect}
-              disconnectedMessage="to see your previously uploaded and stored codes."
-              isSearching={isSearching}
-            />
-          </TabPanel>
-          <TabPanel p={0}>
-            <MySavedCodesSection
-              codes={saved}
-              isLoading={isSavedCodesLoading}
-              onRowSelect={onRowSelect}
-              isSearching={isSearching}
-            />
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
+      </Box>
+      <CodesTable
+        codes={recentCodes}
+        isLoading={isLoading}
+        emptyState={
+          <EmptyState
+            imageVariant={isSearching ? "not-found" : "empty"}
+            message={
+              isSearching
+                ? "No matched codes found"
+                : "Most recent 100 code IDs will display here."
+            }
+            withBorder
+          />
+        }
+        onRowSelect={onRowSelect}
+      />
     </PageContainer>
   );
 });
 
-export default Codes;
+export default RecentCodes;
diff --git a/src/lib/pages/contracts/data.ts b/src/lib/pages/contracts/data.ts
new file mode 100644
index 000000000..9f37bb817
--- /dev/null
+++ b/src/lib/pages/contracts/data.ts
@@ -0,0 +1,37 @@
+import { useMemo } from "react";
+
+import { useContractSearchFilter } from "lib/hooks";
+import { useContractStore } from "lib/providers/store";
+import { useContractListQuery } from "lib/services/contractService";
+import type { ContractInfo } from "lib/types";
+
+interface RecentContractsData {
+  recentContracts: ContractInfo[];
+  isLoading: boolean;
+}
+
+export const useRecentContractsData = (
+  keyword: string
+): RecentContractsData => {
+  const { getContractLocalInfo } = useContractStore();
+  const { data: rawRecentContracts = [], isLoading } = useContractListQuery();
+  const searchFilterFn = useContractSearchFilter(keyword);
+
+  const recentContracts = rawRecentContracts.map<ContractInfo>((contract) => {
+    const contractLocalInfo = getContractLocalInfo(contract.contractAddress);
+    return {
+      ...contract,
+      name: contractLocalInfo?.name,
+      description: contractLocalInfo?.description,
+      tags: contractLocalInfo?.tags,
+      lists: contractLocalInfo?.lists,
+    };
+  });
+
+  return useMemo(() => {
+    return {
+      recentContracts: recentContracts.filter(searchFilterFn),
+      isLoading,
+    };
+  }, [isLoading, recentContracts, searchFilterFn]);
+};
diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contracts/index.tsx
new file mode 100644
index 000000000..733e4c016
--- /dev/null
+++ b/src/lib/pages/contracts/index.tsx
@@ -0,0 +1,80 @@
+import { Heading, Box, Flex } from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
+import type { ChangeEvent } from "react";
+import { useForm } from "react-hook-form";
+
+import { useInternalNavigate } from "lib/app-provider";
+import InputWithIcon from "lib/components/InputWithIcon";
+import PageContainer from "lib/components/PageContainer";
+import { EmptyState } from "lib/components/state";
+import { ContractsTable } from "lib/components/table";
+import type { ContractAddr } from "lib/types";
+
+import { useRecentContractsData } from "./data";
+
+interface RecentContractsState {
+  keyword: string;
+}
+
+const RecentContracts = observer(() => {
+  const navigate = useInternalNavigate();
+  const onRowSelect = (contract: ContractAddr) =>
+    navigate({
+      pathname: "/contracts/[contract]",
+      query: { contract },
+    });
+  const { watch, setValue } = useForm<RecentContractsState>({
+    defaultValues: {
+      keyword: "",
+    },
+  });
+  const { keyword } = watch();
+  const { recentContracts, isLoading } = useRecentContractsData(keyword);
+
+  const isSearching = !!keyword;
+
+  return (
+    <PageContainer>
+      <Box pb={16}>
+        <Heading
+          variant="h5"
+          as="h5"
+          minH="36px"
+          display="flex"
+          alignItems="center"
+        >
+          Recent Contracts
+        </Heading>
+        <Flex mt={8}>
+          <InputWithIcon
+            placeholder="Search with contract address, name or label"
+            value={keyword}
+            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+              setValue("keyword", e.target.value)
+            }
+            size="lg"
+          />
+        </Flex>
+      </Box>
+      <ContractsTable
+        contracts={recentContracts}
+        isLoading={isLoading}
+        emptyState={
+          <EmptyState
+            imageVariant={isSearching ? "not-found" : "empty"}
+            message={
+              isSearching
+                ? "No matched contracts found"
+                : "Most recent 100 contracts will display here."
+            }
+            withBorder
+          />
+        }
+        onRowSelect={onRowSelect}
+        withCTA={{ removingContractList: undefined }}
+      />
+    </PageContainer>
+  );
+});
+
+export default RecentContracts;
diff --git a/src/lib/pages/codes/components/MySavedCodesSection.tsx b/src/lib/pages/my-codes/components/MySavedCodesSection.tsx
similarity index 100%
rename from src/lib/pages/codes/components/MySavedCodesSection.tsx
rename to src/lib/pages/my-codes/components/MySavedCodesSection.tsx
diff --git a/src/lib/pages/codes/components/MyStoredCodesSection.tsx b/src/lib/pages/my-codes/components/MyStoredCodesSection.tsx
similarity index 100%
rename from src/lib/pages/codes/components/MyStoredCodesSection.tsx
rename to src/lib/pages/my-codes/components/MyStoredCodesSection.tsx
diff --git a/src/lib/pages/codes/components/SaveCodeButton.tsx b/src/lib/pages/my-codes/components/SaveCodeButton.tsx
similarity index 100%
rename from src/lib/pages/codes/components/SaveCodeButton.tsx
rename to src/lib/pages/my-codes/components/SaveCodeButton.tsx
diff --git a/src/lib/pages/codes/components/UploadButton.tsx b/src/lib/pages/my-codes/components/UploadButton.tsx
similarity index 100%
rename from src/lib/pages/codes/components/UploadButton.tsx
rename to src/lib/pages/my-codes/components/UploadButton.tsx
diff --git a/src/lib/pages/my-codes/index.tsx b/src/lib/pages/my-codes/index.tsx
new file mode 100644
index 000000000..69d76c8b7
--- /dev/null
+++ b/src/lib/pages/my-codes/index.tsx
@@ -0,0 +1,138 @@
+import {
+  Heading,
+  Tabs,
+  TabList,
+  TabPanels,
+  TabPanel,
+  Flex,
+} from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import type { ChangeEvent } from "react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+
+import { useInternalNavigate } from "lib/app-provider";
+import { CustomTab } from "lib/components/CustomTab";
+import { FilterByPermission } from "lib/components/forms";
+import InputWithIcon from "lib/components/InputWithIcon";
+import PageContainer from "lib/components/PageContainer";
+import type { PermissionFilterValue } from "lib/hooks";
+import { useMyCodesData } from "lib/model/code";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+
+import { MySavedCodesSection } from "./components/MySavedCodesSection";
+import { MyStoredCodesSection } from "./components/MyStoredCodesSection";
+
+interface CodeFilterState {
+  keyword: string;
+  permissionValue: PermissionFilterValue;
+}
+
+const Codes = observer(() => {
+  const router = useRouter();
+  const navigate = useInternalNavigate();
+  const onRowSelect = (codeId: number) =>
+    navigate({
+      pathname: "/codes/[codeId]",
+      query: { codeId },
+    });
+
+  const { watch, setValue } = useForm<CodeFilterState>({
+    defaultValues: {
+      permissionValue: "all",
+      keyword: "",
+    },
+  });
+  const { keyword, permissionValue } = watch();
+
+  const {
+    storedCodesCount,
+    storedCodes: stored,
+    savedCodesCount,
+    savedCodes: saved,
+    allCodesCount,
+    isStoredCodesLoading,
+    isSavedCodesLoading,
+  } = useMyCodesData(keyword, permissionValue);
+
+  const isSearching = !!keyword || permissionValue !== "all";
+
+  useEffect(() => {
+    if (router.isReady) AmpTrack(AmpEvent.TO_MY_CODES);
+  }, [router.isReady]);
+
+  return (
+    <PageContainer>
+      <Heading
+        variant="h5"
+        as="h5"
+        minH="36px"
+        display="flex"
+        alignItems="center"
+      >
+        My Codes
+      </Heading>
+      <Tabs mt={8}>
+        <TabList mb={8} borderBottom="1px" borderColor="gray.800">
+          <CustomTab count={allCodesCount}>All Codes</CustomTab>
+          <CustomTab count={storedCodesCount}>My Stored Codes</CustomTab>
+          <CustomTab count={savedCodesCount}>My Saved Codes </CustomTab>
+        </TabList>
+        <Flex gap={3} pb={4}>
+          <InputWithIcon
+            placeholder="Search with code ID or code name"
+            value={keyword}
+            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+              setValue("keyword", e.target.value)
+            }
+            size="lg"
+          />
+          <FilterByPermission
+            initialSelected="all"
+            setPermissionValue={(newVal: PermissionFilterValue) => {
+              if (newVal === permissionValue) return;
+              setValue("permissionValue", newVal);
+            }}
+          />
+        </Flex>
+        <TabPanels>
+          <TabPanel p={0}>
+            <MyStoredCodesSection
+              codes={stored}
+              isLoading={isStoredCodesLoading}
+              onRowSelect={onRowSelect}
+              disconnectedMessage="to see your previously uploaded and stored codes."
+              isSearching={isSearching}
+            />
+            <MySavedCodesSection
+              codes={saved}
+              isLoading={isSavedCodesLoading}
+              onRowSelect={onRowSelect}
+              isSearching={isSearching}
+            />
+          </TabPanel>
+          <TabPanel p={0}>
+            <MyStoredCodesSection
+              codes={stored}
+              isLoading={isStoredCodesLoading}
+              onRowSelect={onRowSelect}
+              disconnectedMessage="to see your previously uploaded and stored codes."
+              isSearching={isSearching}
+            />
+          </TabPanel>
+          <TabPanel p={0}>
+            <MySavedCodesSection
+              codes={saved}
+              isLoading={isSavedCodesLoading}
+              onRowSelect={onRowSelect}
+              isSearching={isSearching}
+            />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </PageContainer>
+  );
+});
+
+export default Codes;
diff --git a/src/lib/pages/recent-codes/index.tsx b/src/lib/pages/recent-codes/index.tsx
deleted file mode 100644
index e3db87bfa..000000000
--- a/src/lib/pages/recent-codes/index.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Heading, Box, Flex } from "@chakra-ui/react";
-import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
-import type { ChangeEvent } from "react";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-
-import { useInternalNavigate } from "lib/app-provider";
-import { FilterByPermission } from "lib/components/forms";
-import InputWithIcon from "lib/components/InputWithIcon";
-import PageContainer from "lib/components/PageContainer";
-import { EmptyState } from "lib/components/state";
-import { CodesTable } from "lib/components/table";
-import type { PermissionFilterValue } from "lib/hooks";
-import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-
-import { useRecentCodesData } from "./data";
-
-interface RecentCodesState {
-  keyword: string;
-  permissionValue: PermissionFilterValue;
-}
-
-const RecentCodes = observer(() => {
-  const router = useRouter();
-  const navigate = useInternalNavigate();
-  const onRowSelect = (codeId: number) =>
-    navigate({
-      pathname: "/codes/[codeId]",
-      query: { codeId },
-    });
-
-  const { watch, setValue } = useForm<RecentCodesState>({
-    defaultValues: {
-      permissionValue: "all",
-      keyword: "",
-    },
-  });
-  const { keyword, permissionValue } = watch();
-  const { recentCodes, isLoading } = useRecentCodesData(
-    keyword,
-    permissionValue
-  );
-
-  useEffect(() => {
-    if (router.isReady) AmpTrack(AmpEvent.TO_RECENT_CODES);
-  }, [router.isReady]);
-
-  const isSearching = !!keyword || permissionValue !== "all";
-
-  return (
-    <PageContainer>
-      <Box pb={12}>
-        <Heading
-          variant="h5"
-          as="h5"
-          minH="36px"
-          display="flex"
-          alignItems="center"
-        >
-          Recent Codes
-        </Heading>
-        <Flex gap={3} mt={8}>
-          <InputWithIcon
-            placeholder="Search with code ID or code name"
-            value={keyword}
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-              setValue("keyword", e.target.value)
-            }
-            size="lg"
-          />
-          <FilterByPermission
-            initialSelected="all"
-            setPermissionValue={(newVal: PermissionFilterValue) => {
-              if (newVal === permissionValue) return;
-              setValue("permissionValue", newVal);
-            }}
-          />
-        </Flex>
-      </Box>
-      <CodesTable
-        codes={recentCodes}
-        isLoading={isLoading}
-        emptyState={
-          <EmptyState
-            imageVariant={isSearching ? "not-found" : "empty"}
-            message={
-              isSearching
-                ? "No matched codes found"
-                : "Most recent 100 code IDs will display here."
-            }
-            withBorder
-          />
-        }
-        onRowSelect={onRowSelect}
-      />
-    </PageContainer>
-  );
-});
-
-export default RecentCodes;
diff --git a/src/lib/query/contract.ts b/src/lib/query/contract.ts
index dc392a413..cfdf7e708 100644
--- a/src/lib/query/contract.ts
+++ b/src/lib/query/contract.ts
@@ -1,5 +1,24 @@
 import { graphql } from "lib/gql";
 
+export const getContractListQueryDocument = graphql(`
+  query getContractListQuery {
+    contracts(
+      limit: 100
+      offset: 0
+      order_by: { transaction: { block: { timestamp: desc } } }
+    ) {
+      address
+      label
+      admin: account {
+        address
+      }
+      accountByInitBy {
+        address
+      }
+    }
+  }
+`);
+
 export const getInstantiatedListByUserQueryDocument = graphql(`
   query getInstantiatedListByUserQueryDocument($walletAddr: String!) {
     contracts(
diff --git a/src/lib/services/codeService.ts b/src/lib/services/codeService.ts
index 928a06010..2bb61cb91 100644
--- a/src/lib/services/codeService.ts
+++ b/src/lib/services/codeService.ts
@@ -45,7 +45,7 @@ export const useCodeListQuery = (): UseQueryResult<CodeInfo[]> => {
       );
   }, [indexerGraphClient]);
 
-  return useQuery(["all_codes", indexerGraphClient], queryFn);
+  return useQuery(["recents_codes", indexerGraphClient], queryFn);
 };
 
 export const useCodeListByWalletAddress = (
diff --git a/src/lib/services/contractService.ts b/src/lib/services/contractService.ts
index 8dafcbaa9..dd65d8108 100644
--- a/src/lib/services/contractService.ts
+++ b/src/lib/services/contractService.ts
@@ -11,6 +11,7 @@ import {
   getContractListByWalletAddressPagination,
   getContractListCountByAdmin,
   getContractListCountByCodeId,
+  getContractListQueryDocument,
   getInstantiatedCountByUserQueryDocument,
   getInstantiateDetailByContractQueryDocument,
   getInstantiatedListByUserQueryDocument,
@@ -37,6 +38,28 @@ interface InstantiateDetail {
   initProposalTitle: Option<string>;
 }
 
+export const useContractListQuery = (): UseQueryResult<ContractInfo[]> => {
+  const { indexerGraphClient } = useCelatoneApp();
+
+  const queryFn = useCallback(async () => {
+    return indexerGraphClient
+      .request(getContractListQueryDocument)
+      .then(({ contracts }) =>
+        contracts.map<ContractInfo>((contract) => ({
+          contractAddress: contract.address as ContractAddr,
+          instantiator: contract.accountByInitBy?.address as Addr,
+          label: contract.label,
+          admin: contract.admin?.address as Addr,
+          latestUpdater: undefined,
+          latestUpdated: undefined,
+          remark: undefined,
+        }))
+      );
+  }, [indexerGraphClient]);
+
+  return useQuery(["recent_contracts", indexerGraphClient], queryFn);
+};
+
 export const useInstantiatedCountByUserQuery = (
   walletAddr: Option<HumanAddr>
 ): UseQueryResult<Option<number>> => {
diff --git a/src/pages/[network]/codes/index.tsx b/src/pages/[network]/codes/index.tsx
index 8d7e851c0..8ea0d69bb 100644
--- a/src/pages/[network]/codes/index.tsx
+++ b/src/pages/[network]/codes/index.tsx
@@ -1,3 +1,3 @@
-import RecentCodes from "lib/pages/recent-codes";
+import RecentCodes from "lib/pages/codes";
 
 export default RecentCodes;
diff --git a/src/pages/[network]/contracts/index.tsx b/src/pages/[network]/contracts/index.tsx
new file mode 100644
index 000000000..ca8d2c12a
--- /dev/null
+++ b/src/pages/[network]/contracts/index.tsx
@@ -0,0 +1,3 @@
+import RecentContracts from "lib/pages/contracts";
+
+export default RecentContracts;
diff --git a/src/pages/[network]/my-codes.tsx b/src/pages/[network]/my-codes.tsx
index 4a19ab5f8..32f6da0d5 100644
--- a/src/pages/[network]/my-codes.tsx
+++ b/src/pages/[network]/my-codes.tsx
@@ -1,3 +1,3 @@
-import Codes from "lib/pages/codes";
+import Codes from "lib/pages/my-codes";
 
 export default Codes;
diff --git a/src/pages/codes/index.tsx b/src/pages/codes/index.tsx
index 8d7e851c0..8ea0d69bb 100644
--- a/src/pages/codes/index.tsx
+++ b/src/pages/codes/index.tsx
@@ -1,3 +1,3 @@
-import RecentCodes from "lib/pages/recent-codes";
+import RecentCodes from "lib/pages/codes";
 
 export default RecentCodes;
diff --git a/src/pages/contracts/index.tsx b/src/pages/contracts/index.tsx
new file mode 100644
index 000000000..ca8d2c12a
--- /dev/null
+++ b/src/pages/contracts/index.tsx
@@ -0,0 +1,3 @@
+import RecentContracts from "lib/pages/contracts";
+
+export default RecentContracts;
diff --git a/src/pages/my-codes.tsx b/src/pages/my-codes.tsx
index 4a19ab5f8..32f6da0d5 100644
--- a/src/pages/my-codes.tsx
+++ b/src/pages/my-codes.tsx
@@ -1,3 +1,3 @@
-import Codes from "lib/pages/codes";
+import Codes from "lib/pages/my-codes";
 
 export default Codes;

From 6c1716f655d8595ee85ae828ae978a57ad4dd9f9 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 30 May 2023 14:56:52 +0700
Subject: [PATCH 184/354] fix(components): revise contract detail breadcrumb

---
 CHANGELOG.md                                  |  2 ++
 .../components/ContractTop.tsx                | 32 +++++++++++--------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6292ee069..c81aedd1a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#366](https://github.com/alleslabs/celatone-frontend/pull/366) Add recent contracts
+
 ### Improvements
 
 - [#357](https://github.com/alleslabs/celatone-frontend/pull/357) Abstract color, typeface, images to theme config
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index b4ab963d7..d76cc864e 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/src/lib/pages/contract-details/components/ContractTop.tsx
@@ -97,19 +97,25 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
   return (
     <Flex justify="space-between" mb={6}>
       <Flex direction="column" w="full">
-        {publicProject.publicDetail && (
-          <Breadcrumb
-            items={[
-              { text: "Public Projects", href: "/projects" },
-              {
-                text: publicProject.publicDetail.name,
-                href: `/projects/${publicProject.publicInfo?.slug}`,
-              },
-              { text: truncate(contractAddress) },
-            ]}
-            mb={6}
-          />
-        )}
+        <Breadcrumb
+          items={[
+            {
+              text: publicProject.publicDetail?.name
+                ? "Public Projects"
+                : "Contracts",
+              href: publicProject.publicDetail?.name
+                ? "/projects"
+                : "/contracts",
+            },
+            {
+              text: publicProject.publicDetail?.name,
+              href: `/projects/${publicProject.publicInfo?.slug}`,
+            },
+            { text: truncate(contractAddress) },
+          ]}
+          mb={6}
+        />
+
         <Flex direction="column" gap={2} textOverflow="ellipsis" w="full">
           <Flex justify="space-between" align="center">
             <Flex gap={1} maxW="670px">

From be64778fb7bc237f5c1a51d756b4f71db80c387c Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 30 May 2023 15:21:09 +0700
Subject: [PATCH 185/354] fix: graphql contracts

Co-authored-by: Songwong Tasneeyapant <16089160+songwongtp@users.noreply.github.com>
Co-authored-by: David Tumchareon <david.tumcharoen@gmail.com>
---
 src/lib/gql/gql.ts                  |  6 +-
 src/lib/gql/graphql.ts              | 85 +++++++++++++++++++++--------
 src/lib/pages/contracts/index.tsx   |  1 -
 src/lib/query/contract.ts           | 18 +++---
 src/lib/services/contractService.ts |  4 +-
 5 files changed, 78 insertions(+), 36 deletions(-)

diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index 7ebadd843..de24c973f 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -25,7 +25,7 @@ const documents = {
     types.GetCodeListByWalletAddressPaginationDocument,
   "\n  query getCodeListCountByWalletAddress($walletAddress: String!) {\n    codes_aggregate(where: { account: { address: { _eq: $walletAddress } } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetCodeListCountByWalletAddressDocument,
-  "\n  query getContractListQuery {\n    contracts(\n      limit: 100\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      accountByInitBy {\n        address\n      }\n    }\n  }\n":
+  "\n  query getContractListQuery {\n    contracts(limit: 100, offset: 0, order_by: { id: desc }) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n      }\n    }\n  }\n":
     types.GetContractListQueryDocument,
   "\n  query getInstantiatedListByUserQueryDocument($walletAddr: String!) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n      limit: 100\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      label\n      address\n      accountByInitBy {\n        address\n      }\n    }\n  }\n":
     types.GetInstantiatedListByUserQueryDocumentDocument,
@@ -113,8 +113,8 @@ export function graphql(
   source: "\n  query getCodeListCountByWalletAddress($walletAddress: String!) {\n    codes_aggregate(where: { account: { address: { _eq: $walletAddress } } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getCodeListCountByWalletAddress($walletAddress: String!) {\n    codes_aggregate(where: { account: { address: { _eq: $walletAddress } } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getContractListQuery {\n    contracts(\n      limit: 100\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"
-): typeof documents["\n  query getContractListQuery {\n    contracts(\n      limit: 100\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      address\n      label\n      admin: account {\n        address\n      }\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"];
+  source: "\n  query getContractListQuery {\n    contracts(limit: 100, offset: 0, order_by: { id: desc }) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n      }\n    }\n  }\n"
+): typeof documents["\n  query getContractListQuery {\n    contracts(limit: 100, offset: 0, order_by: { id: desc }) {\n      address\n      label\n      admin: account {\n        address\n      }\n      init_by: contract_histories(\n        order_by: { block: { timestamp: asc } }\n        limit: 1\n      ) {\n        block {\n          timestamp\n        }\n        account {\n          address\n        }\n      }\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getInstantiatedListByUserQueryDocument($walletAddr: String!) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n      limit: 100\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      label\n      address\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getInstantiatedListByUserQueryDocument($walletAddr: String!) {\n    contracts(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n      limit: 100\n      offset: 0\n      order_by: { transaction: { block: { timestamp: desc } } }\n    ) {\n      label\n      address\n      accountByInitBy {\n        address\n      }\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index a690c8be2..f672c2499 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -11970,7 +11970,11 @@ export type GetContractListQueryQuery = {
     address: string;
     label: string;
     admin?: { __typename?: "accounts"; address: string } | null;
-    accountByInitBy?: { __typename?: "accounts"; address: string } | null;
+    init_by: Array<{
+      __typename?: "contract_histories";
+      block: { __typename?: "blocks"; timestamp: any };
+      account: { __typename?: "accounts"; address: string };
+    }>;
   }>;
 };
 
@@ -13649,26 +13653,8 @@ export const GetContractListQueryDocument = {
                   fields: [
                     {
                       kind: "ObjectField",
-                      name: { kind: "Name", value: "transaction" },
-                      value: {
-                        kind: "ObjectValue",
-                        fields: [
-                          {
-                            kind: "ObjectField",
-                            name: { kind: "Name", value: "block" },
-                            value: {
-                              kind: "ObjectValue",
-                              fields: [
-                                {
-                                  kind: "ObjectField",
-                                  name: { kind: "Name", value: "timestamp" },
-                                  value: { kind: "EnumValue", value: "desc" },
-                                },
-                              ],
-                            },
-                          },
-                        ],
-                      },
+                      name: { kind: "Name", value: "id" },
+                      value: { kind: "EnumValue", value: "desc" },
                     },
                   ],
                 },
@@ -13695,13 +13681,66 @@ export const GetContractListQueryDocument = {
                 },
                 {
                   kind: "Field",
-                  name: { kind: "Name", value: "accountByInitBy" },
+                  alias: { kind: "Name", value: "init_by" },
+                  name: { kind: "Name", value: "contract_histories" },
+                  arguments: [
+                    {
+                      kind: "Argument",
+                      name: { kind: "Name", value: "order_by" },
+                      value: {
+                        kind: "ObjectValue",
+                        fields: [
+                          {
+                            kind: "ObjectField",
+                            name: { kind: "Name", value: "block" },
+                            value: {
+                              kind: "ObjectValue",
+                              fields: [
+                                {
+                                  kind: "ObjectField",
+                                  name: { kind: "Name", value: "timestamp" },
+                                  value: { kind: "EnumValue", value: "asc" },
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                    },
+                    {
+                      kind: "Argument",
+                      name: { kind: "Name", value: "limit" },
+                      value: { kind: "IntValue", value: "1" },
+                    },
+                  ],
                   selectionSet: {
                     kind: "SelectionSet",
                     selections: [
                       {
                         kind: "Field",
-                        name: { kind: "Name", value: "address" },
+                        name: { kind: "Name", value: "block" },
+                        selectionSet: {
+                          kind: "SelectionSet",
+                          selections: [
+                            {
+                              kind: "Field",
+                              name: { kind: "Name", value: "timestamp" },
+                            },
+                          ],
+                        },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "account" },
+                        selectionSet: {
+                          kind: "SelectionSet",
+                          selections: [
+                            {
+                              kind: "Field",
+                              name: { kind: "Name", value: "address" },
+                            },
+                          ],
+                        },
                       },
                     ],
                   },
diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contracts/index.tsx
index 733e4c016..0683ad368 100644
--- a/src/lib/pages/contracts/index.tsx
+++ b/src/lib/pages/contracts/index.tsx
@@ -71,7 +71,6 @@ const RecentContracts = observer(() => {
           />
         }
         onRowSelect={onRowSelect}
-        withCTA={{ removingContractList: undefined }}
       />
     </PageContainer>
   );
diff --git a/src/lib/query/contract.ts b/src/lib/query/contract.ts
index cfdf7e708..23de3e11b 100644
--- a/src/lib/query/contract.ts
+++ b/src/lib/query/contract.ts
@@ -2,18 +2,22 @@ import { graphql } from "lib/gql";
 
 export const getContractListQueryDocument = graphql(`
   query getContractListQuery {
-    contracts(
-      limit: 100
-      offset: 0
-      order_by: { transaction: { block: { timestamp: desc } } }
-    ) {
+    contracts(limit: 100, offset: 0, order_by: { id: desc }) {
       address
       label
       admin: account {
         address
       }
-      accountByInitBy {
-        address
+      init_by: contract_histories(
+        order_by: { block: { timestamp: asc } }
+        limit: 1
+      ) {
+        block {
+          timestamp
+        }
+        account {
+          address
+        }
       }
     }
   }
diff --git a/src/lib/services/contractService.ts b/src/lib/services/contractService.ts
index dd65d8108..2aae3ff44 100644
--- a/src/lib/services/contractService.ts
+++ b/src/lib/services/contractService.ts
@@ -47,11 +47,11 @@ export const useContractListQuery = (): UseQueryResult<ContractInfo[]> => {
       .then(({ contracts }) =>
         contracts.map<ContractInfo>((contract) => ({
           contractAddress: contract.address as ContractAddr,
-          instantiator: contract.accountByInitBy?.address as Addr,
+          instantiator: contract.init_by.at(0)?.account.address as Addr,
           label: contract.label,
           admin: contract.admin?.address as Addr,
           latestUpdater: undefined,
-          latestUpdated: undefined,
+          latestUpdated: parseDateOpt(contract.init_by.at(0)?.block.timestamp),
           remark: undefined,
         }))
       );

From 41ec27ec4d8885bf30125679ac861aabd01d3403 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 30 May 2023 15:58:39 +0700
Subject: [PATCH 186/354] fix(components): remove tag column

---
 src/config/theme/osmosis.ts                       |  6 +++---
 .../components/table/contracts/ContractsTable.tsx | 15 ++++++++++++---
 .../table/contracts/ContractsTableHeader.tsx      |  4 +++-
 .../table/contracts/ContractsTableRow.tsx         | 11 +++++++----
 src/lib/pages/contracts/index.tsx                 |  1 +
 5 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/config/theme/osmosis.ts b/src/config/theme/osmosis.ts
index 93f173c30..fb687adf2 100644
--- a/src/config/theme/osmosis.ts
+++ b/src/config/theme/osmosis.ts
@@ -2,7 +2,7 @@ import type { ThemeConfig } from "config/type";
 
 export const OSMOSIS_THEME: ThemeConfig = {
   branding: {
-    logo: "https://assets.alleslabs.dev/integrations/osmosis/logo.png",
+    logo: "https://assets.alleslabs.dev/integrations/osmosis/logo.svg",
     favicon: "https://assets.alleslabs.dev/integrations/osmosis/favicon.ico",
     seo: {
       appName: "osmoscan",
@@ -67,8 +67,8 @@ export const OSMOSIS_THEME: ThemeConfig = {
       background: "#201865",
     },
     secondary: {
-      main: "#8481F8",
-      light: "#9B99FF",
+      main: "#9895FF",
+      light: "#ACA9FF",
       dark: "#6A67EA",
       darker: "#5855DB",
       background: "#2F306A",
diff --git a/src/lib/components/table/contracts/ContractsTable.tsx b/src/lib/components/table/contracts/ContractsTable.tsx
index 30433eb18..4f20f1fac 100644
--- a/src/lib/components/table/contracts/ContractsTable.tsx
+++ b/src/lib/components/table/contracts/ContractsTable.tsx
@@ -13,6 +13,7 @@ interface ContractsTableProps {
   onRowSelect: (contract: ContractAddr) => void;
   isReadOnly?: boolean;
   withCTA?: CTAInfo;
+  hasTag?: boolean;
 }
 
 export const ContractsTable = ({
@@ -22,13 +23,19 @@ export const ContractsTable = ({
   onRowSelect,
   isReadOnly = false,
   withCTA,
+  hasTag = true,
 }: ContractsTableProps) => {
   if (isLoading) return <Loading />;
   if (!contracts?.length) return emptyState;
 
-  const templateColumns = isReadOnly
-    ? "minmax(160px, 300px) minmax(300px, 3fr) minmax(200px, 2fr) 1fr"
-    : "160px minmax(300px, 3fr) minmax(200px, 2fr) 150px 250px 80px";
+  let templateColumns: string;
+  if (isReadOnly)
+    templateColumns =
+      "minmax(160px, 300px) minmax(300px, 3fr) minmax(200px, 2fr) 1fr";
+  else if (hasTag)
+    templateColumns =
+      "160px minmax(300px, 3fr) minmax(200px, 2fr) 150px 260px 80px";
+  else templateColumns = "250px minmax(300px, 3fr)  250px 300px 80px";
 
   return (
     <TableContainer>
@@ -36,6 +43,7 @@ export const ContractsTable = ({
         templateColumns={templateColumns}
         isReadOnly={isReadOnly}
         withCTA={withCTA}
+        hasTag={hasTag}
       />
       {contracts.map((contractInfo) => (
         <ContractsTableRow
@@ -51,6 +59,7 @@ export const ContractsTable = ({
           onRowSelect={onRowSelect}
           isReadOnly={isReadOnly}
           withCTA={withCTA}
+          hasTag={hasTag}
         />
       ))}
     </TableContainer>
diff --git a/src/lib/components/table/contracts/ContractsTableHeader.tsx b/src/lib/components/table/contracts/ContractsTableHeader.tsx
index 1e35fd5f4..876312fad 100644
--- a/src/lib/components/table/contracts/ContractsTableHeader.tsx
+++ b/src/lib/components/table/contracts/ContractsTableHeader.tsx
@@ -9,15 +9,17 @@ export const ContractsTableHeader = ({
   templateColumns,
   isReadOnly,
   withCTA,
+  hasTag = true,
 }: {
   templateColumns: GridProps["templateColumns"];
   isReadOnly: boolean;
   withCTA?: CTAInfo;
+  hasTag?: boolean;
 }) => (
   <Grid templateColumns={templateColumns} minW="min-content">
     <TableHeader>Contract Address</TableHeader>
     <TableHeader>Contract Name</TableHeader>
-    <TableHeader>Tags</TableHeader>
+    {hasTag && <TableHeader>Tags</TableHeader>}
     <TableHeader>Instantiator</TableHeader>
     {!isReadOnly && (
       <>
diff --git a/src/lib/components/table/contracts/ContractsTableRow.tsx b/src/lib/components/table/contracts/ContractsTableRow.tsx
index 4c41d2158..a0bb636cc 100644
--- a/src/lib/components/table/contracts/ContractsTableRow.tsx
+++ b/src/lib/components/table/contracts/ContractsTableRow.tsx
@@ -17,6 +17,7 @@ interface ContractsTableRowProps {
   onRowSelect: (contract: ContractAddr) => void;
   isReadOnly: boolean;
   withCTA?: CTAInfo;
+  hasTag?: boolean;
 }
 
 const InstantiatorRender = ({
@@ -92,6 +93,7 @@ export const ContractsTableRow = ({
   onRowSelect,
   isReadOnly,
   withCTA,
+  hasTag = true,
 }: ContractsTableRowProps) => (
   <Grid
     templateColumns={templateColumns}
@@ -117,10 +119,11 @@ export const ContractsTableRow = ({
       />
     </TableRow>
 
-    <TableRow>
-      <TagsCell contractLocalInfo={contractInfo} isReadOnly={isReadOnly} />
-    </TableRow>
-
+    {hasTag && (
+      <TableRow>
+        <TagsCell contractLocalInfo={contractInfo} isReadOnly={isReadOnly} />
+      </TableRow>
+    )}
     <TableRow>
       <InstantiatorRender contractInfo={contractInfo} isReadOnly={isReadOnly} />
     </TableRow>
diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contracts/index.tsx
index 0683ad368..8b31d2b1e 100644
--- a/src/lib/pages/contracts/index.tsx
+++ b/src/lib/pages/contracts/index.tsx
@@ -71,6 +71,7 @@ const RecentContracts = observer(() => {
           />
         }
         onRowSelect={onRowSelect}
+        hasTag={false}
       />
     </PageContainer>
   );

From b3706aa8254753ed92da55288e1d5bdeed9d1ca2 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Tue, 30 May 2023 16:21:01 +0700
Subject: [PATCH 187/354] style: remove font weight

---
 .../tables/pool-txs/messages/components/PoolInfoText.tsx      | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolInfoText.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolInfoText.tsx
index 628d5cd82..710d732b7 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolInfoText.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolInfoText.tsx
@@ -12,9 +12,7 @@ export const PoolInfoText = ({ title, children }: PoolInfoTextProps) => (
       {title}
     </Text>
     {typeof children === "string" ? (
-      <Text variant="body2" fontWeight={400}>
-        {children}
-      </Text>
+      <Text variant="body2">{children}</Text>
     ) : (
       children
     )}

From eae0c70c786e853d8a7708a5f9a7a83f6d8f7626 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 30 May 2023 16:37:04 +0700
Subject: [PATCH 188/354] fix(components): add subtext to recent codes and
 recent contracts page

---
 src/lib/pages/blocks/index.tsx                  | 2 +-
 src/lib/pages/codes/index.tsx                   | 5 ++++-
 src/lib/pages/contracts/index.tsx               | 5 ++++-
 src/lib/pages/proposals/table/ProposalTable.tsx | 2 +-
 src/lib/pages/txs/components/TxsTable.tsx       | 2 +-
 src/lib/pages/txs/index.tsx                     | 2 +-
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/lib/pages/blocks/index.tsx b/src/lib/pages/blocks/index.tsx
index 6ac44ad29..f692c4dfa 100644
--- a/src/lib/pages/blocks/index.tsx
+++ b/src/lib/pages/blocks/index.tsx
@@ -19,7 +19,7 @@ const BlocksPage = () => {
         Blocks
       </Heading>
       <Text variant="body2" fontWeight={500} color="text.dark" mt={1} mb={8}>
-        This page displays all blocks in this network sorted by recency
+        This page displays all blocks on this network sorted by recency
       </Text>
       <BlocksTable />
     </PageContainer>
diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx
index e3db87bfa..ff7cbaaf6 100644
--- a/src/lib/pages/codes/index.tsx
+++ b/src/lib/pages/codes/index.tsx
@@ -1,4 +1,4 @@
-import { Heading, Box, Flex } from "@chakra-ui/react";
+import { Heading, Box, Flex, Text } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import type { ChangeEvent } from "react";
@@ -60,6 +60,9 @@ const RecentCodes = observer(() => {
         >
           Recent Codes
         </Heading>
+        <Text variant="body2" color="text.dark" fontWeight="500">
+          These codes are the most recently stored on this network
+        </Text>
         <Flex gap={3} mt={8}>
           <InputWithIcon
             placeholder="Search with code ID or code name"
diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contracts/index.tsx
index 8b31d2b1e..177bc0a09 100644
--- a/src/lib/pages/contracts/index.tsx
+++ b/src/lib/pages/contracts/index.tsx
@@ -1,4 +1,4 @@
-import { Heading, Box, Flex } from "@chakra-ui/react";
+import { Heading, Box, Flex, Text } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import type { ChangeEvent } from "react";
 import { useForm } from "react-hook-form";
@@ -45,6 +45,9 @@ const RecentContracts = observer(() => {
         >
           Recent Contracts
         </Heading>
+        <Text variant="body2" color="text.dark" fontWeight="500">
+          These contracts are the most recently instantiated on this network
+        </Text>
         <Flex mt={8}>
           <InputWithIcon
             placeholder="Search with contract address, name or label"
diff --git a/src/lib/pages/proposals/table/ProposalTable.tsx b/src/lib/pages/proposals/table/ProposalTable.tsx
index 483aff84d..ea4216127 100644
--- a/src/lib/pages/proposals/table/ProposalTable.tsx
+++ b/src/lib/pages/proposals/table/ProposalTable.tsx
@@ -20,7 +20,7 @@ export const ProposalTable = ({ proposals, isLoading }: ProposalTableProps) => {
   if (!proposals)
     return (
       <EmptyState
-        message="There are no proposals in this network."
+        message="There are no proposals on this network."
         imageVariant="empty"
         withBorder
       />
diff --git a/src/lib/pages/txs/components/TxsTable.tsx b/src/lib/pages/txs/components/TxsTable.tsx
index 9ec7f7c64..28cd237d1 100644
--- a/src/lib/pages/txs/components/TxsTable.tsx
+++ b/src/lib/pages/txs/components/TxsTable.tsx
@@ -66,7 +66,7 @@ export const TxsTable = ({ isViewMore }: TxsTableProps) => {
           <EmptyState
             withBorder
             imageVariant="empty"
-            message="There are no transactions in this network."
+            message="There are no transactions on this network."
           />
         }
         showAction={false}
diff --git a/src/lib/pages/txs/index.tsx b/src/lib/pages/txs/index.tsx
index af59b1aea..875bed30a 100644
--- a/src/lib/pages/txs/index.tsx
+++ b/src/lib/pages/txs/index.tsx
@@ -19,7 +19,7 @@ const Txs = () => {
         Transactions
       </Heading>
       <Text variant="body2" color="text.dark" mb={8} mt={1}>
-        This page displays all transactions in this network sorted by recency
+        This page displays all transactions on this network sorted by recency
       </Text>
       <TxsTable isViewMore={false} />
     </PageContainer>

From d3a9a5368326d664d142b03295151ce86000fa80 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Tue, 30 May 2023 17:16:10 +0700
Subject: [PATCH 189/354] style: add box width full

---
 .../messages/lockup/MsgLockTokensDetail.tsx   | 22 +++++-----
 .../lp/MsgJoinSwapShareAmountOutDetail.tsx    | 40 ++++++++++---------
 .../MsgLockAndSuperfluidDelegateDetail.tsx    | 22 +++++-----
 .../swap/MsgSwapExactAmountInDetail.tsx       | 30 +++++++-------
 .../swap/MsgSwapExactAmountOutDetail.tsx      | 30 +++++++-------
 5 files changed, 77 insertions(+), 67 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
index 9e2e5a1bd..609c74c75 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
@@ -1,4 +1,4 @@
-import { Flex } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 
 import { PoolAssetCard } from "../components";
 import { PoolInfoText } from "../components/PoolInfoText";
@@ -76,15 +76,17 @@ export const MsgLockTokensDetail = ({
 
         <PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
       </Flex>
-      <PoolAssetCard
-        poolId={pool.id}
-        description="Bonded to"
-        assetText="Bonded"
-        poolAsset={poolAsset}
-        poolAssetInfo={poolAssetInfo}
-        isOpened={isOpened}
-        ampCopierSection={ampCopierSection}
-      />
+      <Box w="full">
+        <PoolAssetCard
+          poolId={pool.id}
+          description="Bonded to"
+          assetText="Bonded"
+          poolAsset={poolAsset}
+          poolAssetInfo={poolAssetInfo}
+          isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
+        />
+      </Box>
     </Flex>
   );
 };
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
index 642c8e276..d2d48b23f 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
@@ -1,4 +1,4 @@
-import { Flex } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 
 import { PoolInfoText } from "../components/PoolInfoText";
 import { ExplorerLink } from "lib/components/ExplorerLink";
@@ -39,23 +39,25 @@ export const MsgJoinSwapShareAmountOutDetail = ({
       </PoolInfoText>
       <PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
     </Flex>
-    <PoolAssetsGrid
-      txHash={txHash}
-      msgIndex={msgIndex}
-      isJoin
-      assetInfos={assetInfos}
-      isOpened={isOpened}
-      ampCopierSection={ampCopierSection}
-    />
-    <LiquidityDivider />
-    <PoolLPCard
-      msgIndex={msgIndex}
-      msgShareAmount={msg.share_amount_out}
-      poolId={msg.pool_id}
-      assetInfos={assetInfos}
-      isJoin
-      isOpened={isOpened}
-      ampCopierSection={ampCopierSection}
-    />
+    <Box w="full">
+      <PoolAssetsGrid
+        txHash={txHash}
+        msgIndex={msgIndex}
+        isJoin
+        assetInfos={assetInfos}
+        isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
+      />
+      <LiquidityDivider />
+      <PoolLPCard
+        msgIndex={msgIndex}
+        msgShareAmount={msg.share_amount_out}
+        poolId={msg.pool_id}
+        assetInfos={assetInfos}
+        isJoin
+        isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
+      />
+    </Box>
   </Flex>
 );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
index cf6953e10..6fed0b391 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
@@ -1,4 +1,4 @@
-import { Flex } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 
 import { PoolAssetCard } from "../components";
 import { PoolInfoText } from "../components/PoolInfoText";
@@ -86,15 +86,17 @@ export const MsgLockAndSuperfluidDelegateDetail = ({
         </PoolInfoText>
         <PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
       </Flex>
-      <PoolAssetCard
-        poolId={pool.id}
-        description="Bonded to"
-        assetText="Bonded"
-        poolAsset={poolAsset}
-        poolAssetInfo={poolAssetInfo}
-        isOpened={isOpened}
-        ampCopierSection={ampCopierSection}
-      />
+      <Box w="full">
+        <PoolAssetCard
+          poolId={pool.id}
+          description="Bonded to"
+          assetText="Bonded"
+          poolAsset={poolAsset}
+          poolAssetInfo={poolAssetInfo}
+          isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
+        />
+      </Box>
     </Flex>
   );
 };
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
index bf0b26685..26bcf50a5 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountInDetail.tsx
@@ -1,4 +1,4 @@
-import { Flex } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 
 import { PoolInfoText } from "../components/PoolInfoText";
 import { ExplorerLink } from "lib/components/ExplorerLink";
@@ -39,18 +39,20 @@ export const MsgSwapExactAmountInDetail = ({
       </PoolInfoText>
       <PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
     </Flex>
-    <PoolSwap
-      txHash={txHash}
-      msgIndex={msgIndex}
-      assetInfos={assetInfos}
-      isOpened={isOpened}
-      ampCopierSection={ampCopierSection}
-    />
-    <PoolRoute
-      routes={msg.routes}
-      assetInfos={assetInfos}
-      isOpened={isOpened}
-      ampCopierSection={ampCopierSection}
-    />
+    <Box w="full">
+      <PoolSwap
+        txHash={txHash}
+        msgIndex={msgIndex}
+        assetInfos={assetInfos}
+        isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
+      />
+      <PoolRoute
+        routes={msg.routes}
+        assetInfos={assetInfos}
+        isOpened={isOpened}
+        ampCopierSection={ampCopierSection}
+      />
+    </Box>
   </Flex>
 );
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
index 8723accdd..c4f147e33 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/MsgSwapExactAmountOutDetail.tsx
@@ -1,4 +1,4 @@
-import { Flex } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 
 import { PoolInfoText } from "../components/PoolInfoText";
 import { ExplorerLink } from "lib/components/ExplorerLink";
@@ -48,19 +48,21 @@ export const MsgSwapExactAmountOutDetail = ({
         </PoolInfoText>
         <PoolInfoText title="Message">{extractMsgType(msg.type)}</PoolInfoText>
       </Flex>
-      <PoolSwap
-        txHash={txHash}
-        msgIndex={msgIndex}
-        assetInfos={assetInfos}
-        isOpened={isOpened}
-        ampCopierSection={ampCopierSection}
-      />
-      <PoolRoute
-        routes={routes}
-        assetInfos={assetInfos}
-        isOpened={isOpened}
-        ampCopierSection={ampCopierSection}
-      />
+      <Box w="full">
+        <PoolSwap
+          txHash={txHash}
+          msgIndex={msgIndex}
+          assetInfos={assetInfos}
+          isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
+        />
+        <PoolRoute
+          routes={routes}
+          assetInfos={assetInfos}
+          isOpened={isOpened}
+          ampCopierSection={ampCopierSection}
+        />
+      </Box>
     </Flex>
   );
 };

From a045a64df5843614337ce763072d3554d38aefd1 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Mon, 29 May 2023 15:38:06 +0700
Subject: [PATCH 190/354] feat: (contract details) use instantiated height from
 indexer as fallback

---
 CHANGELOG.md                                  |  1 +
 src/lib/gql/gql.ts                            |  6 +--
 src/lib/gql/graphql.ts                        | 24 ++++++++++-
 src/lib/model/contract.ts                     |  4 ++
 .../components/InstantiateInfo.tsx            | 41 ++++++++-----------
 src/lib/query/contract.ts                     |  4 ++
 src/lib/services/contractService.ts           |  6 +++
 src/lib/types/contract.ts                     |  2 +
 8 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6292ee069..3780e3d57 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -57,6 +57,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#364](https://github.com/alleslabs/celatone-frontend/pull/364) (Contract Details) use instantiated height and time from indexer as fallback
 - [#323](https://github.com/alleslabs/celatone-frontend/pull/323) Revise back button and breadcrumb components
 - [#339](https://github.com/alleslabs/celatone-frontend/pull/339) Update all routes to plural form, and patch all codes
 - [#334](https://github.com/alleslabs/celatone-frontend/pull/334) Change `osmo-test-4` to `osmo-test-5`, fix tx service when accountId is undefined
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index 5dcec9e70..28374ed0a 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -29,7 +29,7 @@ const documents = {
     types.GetInstantiatedListByUserQueryDocumentDocument,
   "\n  query getInstantiatedCountByUserQueryDocument($walletAddr: String!) {\n    contracts_aggregate(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetInstantiatedCountByUserQueryDocumentDocument,
-  '\n  query getInstantiateDetailByContractQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      init_msg\n      transaction {\n        hash\n      }\n      contract_proposals(\n        where: {\n          proposal: {\n            type: {\n              _in: [\n                "InstantiateContract"\n                "InstantiateContract2"\n                "SoftwareUpgrade"\n              ]\n            }\n          }\n        }\n        order_by: { proposal: { id: asc } }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n    }\n  }\n':
+  '\n  query getInstantiateDetailByContractQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      init_msg\n      transaction {\n        hash\n        block_height\n        block {\n          timestamp\n        }\n      }\n      contract_proposals(\n        where: {\n          proposal: {\n            type: {\n              _in: [\n                "InstantiateContract"\n                "InstantiateContract2"\n                "SoftwareUpgrade"\n              ]\n            }\n          }\n        }\n        order_by: { proposal: { id: asc } }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n    }\n  }\n':
     types.GetInstantiateDetailByContractQueryDocumentDocument,
   "\n  query getAdminByContractAddressesQueryDocument(\n    $contractAddresses: [String!]!\n  ) {\n    contracts(where: { address: { _in: $contractAddresses } }) {\n      address\n      admin: account {\n        address\n      }\n    }\n  }\n":
     types.GetAdminByContractAddressesQueryDocumentDocument,
@@ -117,8 +117,8 @@ export function graphql(
   source: "\n  query getInstantiatedCountByUserQueryDocument($walletAddr: String!) {\n    contracts_aggregate(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getInstantiatedCountByUserQueryDocument($walletAddr: String!) {\n    contracts_aggregate(\n      where: { accountByInitBy: { address: { _eq: $walletAddr } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
-  source: '\n  query getInstantiateDetailByContractQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      init_msg\n      transaction {\n        hash\n      }\n      contract_proposals(\n        where: {\n          proposal: {\n            type: {\n              _in: [\n                "InstantiateContract"\n                "InstantiateContract2"\n                "SoftwareUpgrade"\n              ]\n            }\n          }\n        }\n        order_by: { proposal: { id: asc } }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n    }\n  }\n'
-): typeof documents['\n  query getInstantiateDetailByContractQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      init_msg\n      transaction {\n        hash\n      }\n      contract_proposals(\n        where: {\n          proposal: {\n            type: {\n              _in: [\n                "InstantiateContract"\n                "InstantiateContract2"\n                "SoftwareUpgrade"\n              ]\n            }\n          }\n        }\n        order_by: { proposal: { id: asc } }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n    }\n  }\n'];
+  source: '\n  query getInstantiateDetailByContractQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      init_msg\n      transaction {\n        hash\n        block_height\n        block {\n          timestamp\n        }\n      }\n      contract_proposals(\n        where: {\n          proposal: {\n            type: {\n              _in: [\n                "InstantiateContract"\n                "InstantiateContract2"\n                "SoftwareUpgrade"\n              ]\n            }\n          }\n        }\n        order_by: { proposal: { id: asc } }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n    }\n  }\n'
+): typeof documents['\n  query getInstantiateDetailByContractQueryDocument($contractAddress: String!) {\n    contracts_by_pk(address: $contractAddress) {\n      init_msg\n      transaction {\n        hash\n        block_height\n        block {\n          timestamp\n        }\n      }\n      contract_proposals(\n        where: {\n          proposal: {\n            type: {\n              _in: [\n                "InstantiateContract"\n                "InstantiateContract2"\n                "SoftwareUpgrade"\n              ]\n            }\n          }\n        }\n        order_by: { proposal: { id: asc } }\n        limit: 1\n      ) {\n        proposal {\n          id\n          title\n        }\n      }\n    }\n  }\n'];
 export function graphql(
   source: "\n  query getAdminByContractAddressesQueryDocument(\n    $contractAddresses: [String!]!\n  ) {\n    contracts(where: { address: { _in: $contractAddresses } }) {\n      address\n      admin: account {\n        address\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getAdminByContractAddressesQueryDocument(\n    $contractAddresses: [String!]!\n  ) {\n    contracts(where: { address: { _in: $contractAddresses } }) {\n      address\n      admin: account {\n        address\n      }\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index 266671678..3f2d18906 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -12351,7 +12351,12 @@ export type GetInstantiateDetailByContractQueryDocumentQuery = {
   contracts_by_pk?: {
     __typename?: "contracts";
     init_msg?: string | null;
-    transaction?: { __typename?: "transactions"; hash: any } | null;
+    transaction?: {
+      __typename?: "transactions";
+      hash: any;
+      block_height: number;
+      block: { __typename?: "blocks"; timestamp: any };
+    } | null;
     contract_proposals: Array<{
       __typename?: "contract_proposals";
       proposal: { __typename?: "proposals"; id: number; title: string };
@@ -14236,6 +14241,23 @@ export const GetInstantiateDetailByContractQueryDocumentDocument = {
                     kind: "SelectionSet",
                     selections: [
                       { kind: "Field", name: { kind: "Name", value: "hash" } },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "block_height" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "block" },
+                        selectionSet: {
+                          kind: "SelectionSet",
+                          selections: [
+                            {
+                              kind: "Field",
+                              name: { kind: "Name", value: "timestamp" },
+                            },
+                          ],
+                        },
+                      },
                     ],
                   },
                 },
diff --git a/src/lib/model/contract.ts b/src/lib/model/contract.ts
index 5d0432517..9f045c6af 100644
--- a/src/lib/model/contract.ts
+++ b/src/lib/model/contract.ts
@@ -167,6 +167,10 @@ export const useContractData = (
       initTxHash: instantiateDetail?.initTxHash,
       initProposalId: instantiateDetail?.initProposalId,
       initProposalTitle: instantiateDetail?.initProposalTitle,
+      createdHeight:
+        instantiateInfo?.createdHeight ?? instantiateDetail?.createdHeight,
+      createdTime:
+        instantiateInfo?.createdTime ?? instantiateDetail?.createdTime,
     },
     isLoading:
       isInstantiateInfoLoading ||
diff --git a/src/lib/pages/contract-details/components/InstantiateInfo.tsx b/src/lib/pages/contract-details/components/InstantiateInfo.tsx
index 847f937f6..937386c83 100644
--- a/src/lib/pages/contract-details/components/InstantiateInfo.tsx
+++ b/src/lib/pages/contract-details/components/InstantiateInfo.tsx
@@ -101,6 +101,8 @@ export const InstantiateInfo = ({
     initTxHash,
     initProposalId,
     initProposalTitle,
+    createdHeight,
+    createdTime,
   },
 }: InstantiateInfoProps) => {
   const getAddressType = useGetAddressType();
@@ -163,30 +165,21 @@ export const InstantiateInfo = ({
 
       <Divider border="1px solid" borderColor="gray.700" />
 
-      {instantiateInfo &&
-        (instantiateInfo.createdHeight ? (
-          <LabelText
-            label="Instantiated Block Height"
-            helperText1={
-              instantiateInfo.createdTime
-                ? formatUTC(instantiateInfo.createdTime)
-                : undefined
-            }
-            helperText2={
-              instantiateInfo.createdTime
-                ? dateFromNow(instantiateInfo.createdTime)
-                : undefined
-            }
-          >
-            <ExplorerLink
-              type="block_height"
-              value={instantiateInfo.createdHeight.toString()}
-              showCopyOnHover
-            />
-          </LabelText>
-        ) : (
-          <LabelText label="Instantiated Block Height">N/A</LabelText>
-        ))}
+      {createdHeight ? (
+        <LabelText
+          label="Instantiated Block Height"
+          helperText1={createdTime ? formatUTC(createdTime) : undefined}
+          helperText2={createdTime ? dateFromNow(createdTime) : undefined}
+        >
+          <ExplorerLink
+            type="block_height"
+            value={createdHeight.toString()}
+            showCopyOnHover
+          />
+        </LabelText>
+      ) : (
+        <LabelText label="Instantiated Block Height">N/A</LabelText>
+      )}
 
       <LabelText
         label="Instantiated by"
diff --git a/src/lib/query/contract.ts b/src/lib/query/contract.ts
index dc392a413..e2fb4c851 100644
--- a/src/lib/query/contract.ts
+++ b/src/lib/query/contract.ts
@@ -35,6 +35,10 @@ export const getInstantiateDetailByContractQueryDocument = graphql(`
       init_msg
       transaction {
         hash
+        block_height
+        block {
+          timestamp
+        }
       }
       contract_proposals(
         where: {
diff --git a/src/lib/services/contractService.ts b/src/lib/services/contractService.ts
index 8dafcbaa9..3c91f8596 100644
--- a/src/lib/services/contractService.ts
+++ b/src/lib/services/contractService.ts
@@ -31,6 +31,8 @@ import type {
 import { parseDate, parseTxHashOpt, parseDateOpt } from "lib/utils";
 
 interface InstantiateDetail {
+  createdHeight: Option<number>;
+  createdTime: Option<Date>;
   initMsg: Option<string>;
   initTxHash: Option<string>;
   initProposalId: Option<number>;
@@ -136,6 +138,10 @@ export const useInstantiateDetailByContractQuery = (
     return indexerGraphClient
       .request(getInstantiateDetailByContractQueryDocument, { contractAddress })
       .then(({ contracts_by_pk }) => ({
+        createdHeight: contracts_by_pk?.transaction?.block_height,
+        createdTime: parseDateOpt(
+          contracts_by_pk?.transaction?.block.timestamp
+        ),
         initMsg: contracts_by_pk?.init_msg,
         initTxHash: parseTxHashOpt(contracts_by_pk?.transaction?.hash),
         initProposalId: contracts_by_pk?.contract_proposals.at(0)?.proposal.id,
diff --git a/src/lib/types/contract.ts b/src/lib/types/contract.ts
index 4fa93ea5c..cea487066 100644
--- a/src/lib/types/contract.ts
+++ b/src/lib/types/contract.ts
@@ -58,4 +58,6 @@ export interface ContractData {
   initTxHash: Option<string>;
   initProposalId: Option<number>;
   initProposalTitle: Option<string>;
+  createdHeight: Option<number>;
+  createdTime: Option<Date>;
 }

From 7de3cb4464d4e82ba59f6da444d36f4904a5f6e9 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 31 May 2023 14:05:35 +0700
Subject: [PATCH 191/354] fix(components): refactor useForm to useState

---
 .../table/contracts/ContractsTable.tsx        | 13 +++----
 .../table/contracts/ContractsTableHeader.tsx  |  6 ++--
 .../table/contracts/ContractsTableRow.tsx     |  6 ++--
 src/lib/hooks/index.ts                        |  1 -
 src/lib/hooks/useContractFilter.ts            | 17 ----------
 .../components/ContractTop.tsx                | 11 +++---
 src/lib/pages/contracts/data.ts               | 16 ++++++---
 src/lib/pages/contracts/index.tsx             | 34 +++++++------------
 src/lib/pages/my-codes/index.tsx              |  2 +-
 src/pages/[network]/my-codes.tsx              |  4 +--
 src/pages/my-codes.tsx                        |  4 +--
 11 files changed, 46 insertions(+), 68 deletions(-)
 delete mode 100644 src/lib/hooks/useContractFilter.ts

diff --git a/src/lib/components/table/contracts/ContractsTable.tsx b/src/lib/components/table/contracts/ContractsTable.tsx
index 4f20f1fac..597b8ee22 100644
--- a/src/lib/components/table/contracts/ContractsTable.tsx
+++ b/src/lib/components/table/contracts/ContractsTable.tsx
@@ -13,7 +13,7 @@ interface ContractsTableProps {
   onRowSelect: (contract: ContractAddr) => void;
   isReadOnly?: boolean;
   withCTA?: CTAInfo;
-  hasTag?: boolean;
+  withoutTag?: boolean;
 }
 
 export const ContractsTable = ({
@@ -23,7 +23,7 @@ export const ContractsTable = ({
   onRowSelect,
   isReadOnly = false,
   withCTA,
-  hasTag = true,
+  withoutTag = false,
 }: ContractsTableProps) => {
   if (isLoading) return <Loading />;
   if (!contracts?.length) return emptyState;
@@ -32,10 +32,11 @@ export const ContractsTable = ({
   if (isReadOnly)
     templateColumns =
       "minmax(160px, 300px) minmax(300px, 3fr) minmax(200px, 2fr) 1fr";
-  else if (hasTag)
+  else if (withoutTag)
+    templateColumns = "160px minmax(300px, 3fr)  250px 300px 80px";
+  else
     templateColumns =
       "160px minmax(300px, 3fr) minmax(200px, 2fr) 150px 260px 80px";
-  else templateColumns = "250px minmax(300px, 3fr)  250px 300px 80px";
 
   return (
     <TableContainer>
@@ -43,7 +44,7 @@ export const ContractsTable = ({
         templateColumns={templateColumns}
         isReadOnly={isReadOnly}
         withCTA={withCTA}
-        hasTag={hasTag}
+        withoutTag={withoutTag}
       />
       {contracts.map((contractInfo) => (
         <ContractsTableRow
@@ -59,7 +60,7 @@ export const ContractsTable = ({
           onRowSelect={onRowSelect}
           isReadOnly={isReadOnly}
           withCTA={withCTA}
-          hasTag={hasTag}
+          withoutTag={withoutTag}
         />
       ))}
     </TableContainer>
diff --git a/src/lib/components/table/contracts/ContractsTableHeader.tsx b/src/lib/components/table/contracts/ContractsTableHeader.tsx
index 876312fad..52a98641a 100644
--- a/src/lib/components/table/contracts/ContractsTableHeader.tsx
+++ b/src/lib/components/table/contracts/ContractsTableHeader.tsx
@@ -9,17 +9,17 @@ export const ContractsTableHeader = ({
   templateColumns,
   isReadOnly,
   withCTA,
-  hasTag = true,
+  withoutTag = false,
 }: {
   templateColumns: GridProps["templateColumns"];
   isReadOnly: boolean;
   withCTA?: CTAInfo;
-  hasTag?: boolean;
+  withoutTag?: boolean;
 }) => (
   <Grid templateColumns={templateColumns} minW="min-content">
     <TableHeader>Contract Address</TableHeader>
     <TableHeader>Contract Name</TableHeader>
-    {hasTag && <TableHeader>Tags</TableHeader>}
+    {!withoutTag && <TableHeader>Tags</TableHeader>}
     <TableHeader>Instantiator</TableHeader>
     {!isReadOnly && (
       <>
diff --git a/src/lib/components/table/contracts/ContractsTableRow.tsx b/src/lib/components/table/contracts/ContractsTableRow.tsx
index a0bb636cc..761a49174 100644
--- a/src/lib/components/table/contracts/ContractsTableRow.tsx
+++ b/src/lib/components/table/contracts/ContractsTableRow.tsx
@@ -17,7 +17,7 @@ interface ContractsTableRowProps {
   onRowSelect: (contract: ContractAddr) => void;
   isReadOnly: boolean;
   withCTA?: CTAInfo;
-  hasTag?: boolean;
+  withoutTag?: boolean;
 }
 
 const InstantiatorRender = ({
@@ -93,7 +93,7 @@ export const ContractsTableRow = ({
   onRowSelect,
   isReadOnly,
   withCTA,
-  hasTag = true,
+  withoutTag = false,
 }: ContractsTableRowProps) => (
   <Grid
     templateColumns={templateColumns}
@@ -119,7 +119,7 @@ export const ContractsTableRow = ({
       />
     </TableRow>
 
-    {hasTag && (
+    {!withoutTag && (
       <TableRow>
         <TagsCell contractLocalInfo={contractInfo} isReadOnly={isReadOnly} />
       </TableRow>
diff --git a/src/lib/hooks/index.ts b/src/lib/hooks/index.ts
index 6547fd8db..d9ecb71b0 100644
--- a/src/lib/hooks/index.ts
+++ b/src/lib/hooks/index.ts
@@ -1,5 +1,4 @@
 export * from "./useCodeFilter";
-export * from "./useContractFilter";
 export * from "./useExecuteCmds";
 export * from "./useHandleSave";
 export * from "./useQueryCmds";
diff --git a/src/lib/hooks/useContractFilter.ts b/src/lib/hooks/useContractFilter.ts
deleted file mode 100644
index 5bde09e6f..000000000
--- a/src/lib/hooks/useContractFilter.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useCallback } from "react";
-
-import type { ContractInfo } from "lib/types";
-
-export const useContractSearchFilter = (keyword: string) =>
-  useCallback(
-    (contract: ContractInfo) => {
-      const computedKeyword = keyword.trim();
-      if (!computedKeyword.length) return true;
-      return (
-        contract.contractAddress.startsWith(computedKeyword) ||
-        contract.name?.toLowerCase().includes(computedKeyword.toLowerCase()) ||
-        contract.label.toLowerCase().includes(computedKeyword.toLowerCase())
-      );
-    },
-    [keyword]
-  );
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index d76cc864e..355e7d26f 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/src/lib/pages/contract-details/components/ContractTop.tsx
@@ -35,6 +35,7 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
     publicProject.publicInfo?.name ||
     instantiateInfo?.label;
 
+  const publicName = publicProject.publicDetail?.name;
   const goToQuery = () => {
     navigate({
       pathname: "/query",
@@ -100,15 +101,11 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
         <Breadcrumb
           items={[
             {
-              text: publicProject.publicDetail?.name
-                ? "Public Projects"
-                : "Contracts",
-              href: publicProject.publicDetail?.name
-                ? "/projects"
-                : "/contracts",
+              text: publicName ? "Public Projects" : "Contracts",
+              href: publicName ? "/projects" : "/contracts",
             },
             {
-              text: publicProject.publicDetail?.name,
+              text: publicName,
               href: `/projects/${publicProject.publicInfo?.slug}`,
             },
             { text: truncate(contractAddress) },
diff --git a/src/lib/pages/contracts/data.ts b/src/lib/pages/contracts/data.ts
index 9f37bb817..51d3e6162 100644
--- a/src/lib/pages/contracts/data.ts
+++ b/src/lib/pages/contracts/data.ts
@@ -1,6 +1,5 @@
 import { useMemo } from "react";
 
-import { useContractSearchFilter } from "lib/hooks";
 import { useContractStore } from "lib/providers/store";
 import { useContractListQuery } from "lib/services/contractService";
 import type { ContractInfo } from "lib/types";
@@ -10,12 +9,21 @@ interface RecentContractsData {
   isLoading: boolean;
 }
 
+const searchFilterFn = (keyword: string) => (contract: ContractInfo) => {
+  const computedKeyword = keyword.trim();
+  if (!computedKeyword.length) return true;
+  return (
+    contract.contractAddress.startsWith(computedKeyword) ||
+    contract.name?.toLowerCase().includes(computedKeyword.toLowerCase()) ||
+    contract.label.toLowerCase().includes(computedKeyword.toLowerCase())
+  );
+};
+
 export const useRecentContractsData = (
   keyword: string
 ): RecentContractsData => {
   const { getContractLocalInfo } = useContractStore();
   const { data: rawRecentContracts = [], isLoading } = useContractListQuery();
-  const searchFilterFn = useContractSearchFilter(keyword);
 
   const recentContracts = rawRecentContracts.map<ContractInfo>((contract) => {
     const contractLocalInfo = getContractLocalInfo(contract.contractAddress);
@@ -30,8 +38,8 @@ export const useRecentContractsData = (
 
   return useMemo(() => {
     return {
-      recentContracts: recentContracts.filter(searchFilterFn),
+      recentContracts: recentContracts.filter(searchFilterFn(keyword)),
       isLoading,
     };
-  }, [isLoading, recentContracts, searchFilterFn]);
+  }, [isLoading, recentContracts, keyword]);
 };
diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contracts/index.tsx
index 177bc0a09..68e2e88e0 100644
--- a/src/lib/pages/contracts/index.tsx
+++ b/src/lib/pages/contracts/index.tsx
@@ -1,10 +1,9 @@
 import { Heading, Box, Flex, Text } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
-import type { ChangeEvent } from "react";
-import { useForm } from "react-hook-form";
+import { useState } from "react";
 
 import { useInternalNavigate } from "lib/app-provider";
-import InputWithIcon from "lib/components/InputWithIcon";
+import { TextInput } from "lib/components/forms";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
 import { ContractsTable } from "lib/components/table";
@@ -12,10 +11,6 @@ import type { ContractAddr } from "lib/types";
 
 import { useRecentContractsData } from "./data";
 
-interface RecentContractsState {
-  keyword: string;
-}
-
 const RecentContracts = observer(() => {
   const navigate = useInternalNavigate();
   const onRowSelect = (contract: ContractAddr) =>
@@ -23,15 +18,11 @@ const RecentContracts = observer(() => {
       pathname: "/contracts/[contract]",
       query: { contract },
     });
-  const { watch, setValue } = useForm<RecentContractsState>({
-    defaultValues: {
-      keyword: "",
-    },
-  });
-  const { keyword } = watch();
-  const { recentContracts, isLoading } = useRecentContractsData(keyword);
+  const [searchKeyword, setSearchKeyword] = useState("");
+
+  const { recentContracts, isLoading } = useRecentContractsData(searchKeyword);
 
-  const isSearching = !!keyword;
+  const isSearching = !!searchKeyword;
 
   return (
     <PageContainer>
@@ -45,16 +36,15 @@ const RecentContracts = observer(() => {
         >
           Recent Contracts
         </Heading>
-        <Text variant="body2" color="text.dark" fontWeight="500">
+        <Text variant="body2" color="text.dark" fontWeight={500}>
           These contracts are the most recently instantiated on this network
         </Text>
         <Flex mt={8}>
-          <InputWithIcon
+          <TextInput
+            variant="floating"
+            value={searchKeyword}
+            setInputState={setSearchKeyword}
             placeholder="Search with contract address, name or label"
-            value={keyword}
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-              setValue("keyword", e.target.value)
-            }
             size="lg"
           />
         </Flex>
@@ -74,7 +64,7 @@ const RecentContracts = observer(() => {
           />
         }
         onRowSelect={onRowSelect}
-        hasTag={false}
+        withoutTag
       />
     </PageContainer>
   );
diff --git a/src/lib/pages/my-codes/index.tsx b/src/lib/pages/my-codes/index.tsx
index 69d76c8b7..6d1a17e94 100644
--- a/src/lib/pages/my-codes/index.tsx
+++ b/src/lib/pages/my-codes/index.tsx
@@ -37,7 +37,7 @@ const Codes = observer(() => {
       pathname: "/codes/[codeId]",
       query: { codeId },
     });
-
+  // TODO refactor to useState
   const { watch, setValue } = useForm<CodeFilterState>({
     defaultValues: {
       permissionValue: "all",
diff --git a/src/pages/[network]/my-codes.tsx b/src/pages/[network]/my-codes.tsx
index 32f6da0d5..9b0ad628f 100644
--- a/src/pages/[network]/my-codes.tsx
+++ b/src/pages/[network]/my-codes.tsx
@@ -1,3 +1,3 @@
-import Codes from "lib/pages/my-codes";
+import MyCodes from "lib/pages/my-codes";
 
-export default Codes;
+export default MyCodes;
diff --git a/src/pages/my-codes.tsx b/src/pages/my-codes.tsx
index 32f6da0d5..9b0ad628f 100644
--- a/src/pages/my-codes.tsx
+++ b/src/pages/my-codes.tsx
@@ -1,3 +1,3 @@
-import Codes from "lib/pages/my-codes";
+import MyCodes from "lib/pages/my-codes";
 
-export default Codes;
+export default MyCodes;

From 401df0efe3b06ff1cd5dff05f2f1277ae505a13f Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 31 May 2023 14:28:21 +0700
Subject: [PATCH 192/354] fix: contractResponse type

---
 src/lib/services/contract.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/services/contract.ts b/src/lib/services/contract.ts
index b77c59d50..b82be97ac 100644
--- a/src/lib/services/contract.ts
+++ b/src/lib/services/contract.ts
@@ -29,8 +29,8 @@ interface ContractResponse {
     admin?: Addr;
     label: string;
     created?: {
-      block_height: number;
-      tx_index: number;
+      block_height: string;
+      tx_index: string;
     };
     ibc_port_id: string;
     extension?: string;
@@ -100,7 +100,7 @@ export const queryInstantiateInfo = async (
   let createdHeight: Option<number>;
   let createdTime: Option<Date>;
   if (res.contract_info.created) {
-    createdHeight = res.contract_info.created.block_height;
+    createdHeight = Number(res.contract_info.created.block_height);
     await indexerGraphClient
       .request(getBlockTimestampByHeightQueryDocument, {
         height: createdHeight,

From a18505b63c67b556ba616ac9c1dc924d31eb46f4 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 31 May 2023 14:42:44 +0700
Subject: [PATCH 193/354] chore: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3780e3d57..ec15da48b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -67,6 +67,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#370](https://github.com/alleslabs/celatone-frontend/pull/370) Fix ContractResponse type
 - [$348](https://github.com/alleslabs/celatone-frontend/pull/348) Workaround for the issue that walletManager local storage is not cleared when switching networks
 - [$340](https://github.com/alleslabs/celatone-frontend/pull/340) Remove resend and redo button in accordion if relation is related (Past txs page)
 - [#337](https://github.com/alleslabs/celatone-frontend/pull/337) Fix beforeunload keep showing up Leave modal

From 1e44bd1f00e537e0ea55d1b17608ddce1773d7e8 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 1 Jun 2023 10:40:52 +0700
Subject: [PATCH 194/354] fix: should not send req when createdHeight is nan

---
 src/lib/services/contract.ts | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/lib/services/contract.ts b/src/lib/services/contract.ts
index b82be97ac..fb0338fde 100644
--- a/src/lib/services/contract.ts
+++ b/src/lib/services/contract.ts
@@ -101,14 +101,16 @@ export const queryInstantiateInfo = async (
   let createdTime: Option<Date>;
   if (res.contract_info.created) {
     createdHeight = Number(res.contract_info.created.block_height);
-    await indexerGraphClient
-      .request(getBlockTimestampByHeightQueryDocument, {
-        height: createdHeight,
-      })
-      .then(({ blocks_by_pk }) => {
-        createdTime = parseDateOpt(blocks_by_pk?.timestamp);
-      })
-      .catch(() => {});
+    if (!Number.isNaN(createdHeight)) {
+      await indexerGraphClient
+        .request(getBlockTimestampByHeightQueryDocument, {
+          height: createdHeight,
+        })
+        .then(({ blocks_by_pk }) => {
+          createdTime = parseDateOpt(blocks_by_pk?.timestamp);
+        })
+        .catch(() => {});
+    }
   }
 
   return {

From d6c0e32fd1635b1d44bdd974b2dc112197c4ce51 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 1 Jun 2023 11:15:23 +0700
Subject: [PATCH 195/354] fix: handle 0 case

---
 src/lib/services/contract.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/services/contract.ts b/src/lib/services/contract.ts
index fb0338fde..db36e2fe7 100644
--- a/src/lib/services/contract.ts
+++ b/src/lib/services/contract.ts
@@ -101,7 +101,7 @@ export const queryInstantiateInfo = async (
   let createdTime: Option<Date>;
   if (res.contract_info.created) {
     createdHeight = Number(res.contract_info.created.block_height);
-    if (!Number.isNaN(createdHeight)) {
+    if (createdHeight) {
       await indexerGraphClient
         .request(getBlockTimestampByHeightQueryDocument, {
           height: createdHeight,

From cce2d504e3695b5e0dbc3826d214463377155bc8 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 1 Jun 2023 13:40:54 +0700
Subject: [PATCH 196/354] fix(components): fix as comment

---
 src/lib/pages/codes/index.tsx       |  2 +-
 src/lib/pages/contracts/index.tsx   |  2 +-
 src/lib/services/contractService.ts | 34 ++++++++++++++++-------------
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx
index ff7cbaaf6..c43cbc4c8 100644
--- a/src/lib/pages/codes/index.tsx
+++ b/src/lib/pages/codes/index.tsx
@@ -46,7 +46,7 @@ const RecentCodes = observer(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_RECENT_CODES);
   }, [router.isReady]);
 
-  const isSearching = !!keyword || permissionValue !== "all";
+  const isSearching = Boolean(keyword) || permissionValue !== "all";
 
   return (
     <PageContainer>
diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contracts/index.tsx
index 68e2e88e0..dd221f4f2 100644
--- a/src/lib/pages/contracts/index.tsx
+++ b/src/lib/pages/contracts/index.tsx
@@ -22,7 +22,7 @@ const RecentContracts = observer(() => {
 
   const { recentContracts, isLoading } = useRecentContractsData(searchKeyword);
 
-  const isSearching = !!searchKeyword;
+  const isSearching = Boolean(searchKeyword);
 
   return (
     <PageContainer>
diff --git a/src/lib/services/contractService.ts b/src/lib/services/contractService.ts
index 2aae3ff44..351765281 100644
--- a/src/lib/services/contractService.ts
+++ b/src/lib/services/contractService.ts
@@ -41,21 +41,25 @@ interface InstantiateDetail {
 export const useContractListQuery = (): UseQueryResult<ContractInfo[]> => {
   const { indexerGraphClient } = useCelatoneApp();
 
-  const queryFn = useCallback(async () => {
-    return indexerGraphClient
-      .request(getContractListQueryDocument)
-      .then(({ contracts }) =>
-        contracts.map<ContractInfo>((contract) => ({
-          contractAddress: contract.address as ContractAddr,
-          instantiator: contract.init_by.at(0)?.account.address as Addr,
-          label: contract.label,
-          admin: contract.admin?.address as Addr,
-          latestUpdater: undefined,
-          latestUpdated: parseDateOpt(contract.init_by.at(0)?.block.timestamp),
-          remark: undefined,
-        }))
-      );
-  }, [indexerGraphClient]);
+  const queryFn = useCallback(
+    async () =>
+      indexerGraphClient
+        .request(getContractListQueryDocument)
+        .then(({ contracts }) =>
+          contracts.map<ContractInfo>((contract) => ({
+            contractAddress: contract.address as ContractAddr,
+            instantiator: contract.init_by.at(0)?.account.address as Addr,
+            label: contract.label,
+            admin: contract.admin?.address as Addr,
+            latestUpdater: undefined,
+            latestUpdated: parseDateOpt(
+              contract.init_by.at(0)?.block.timestamp
+            ),
+            remark: undefined,
+          }))
+        ),
+    [indexerGraphClient]
+  );
 
   return useQuery(["recent_contracts", indexerGraphClient], queryFn);
 };

From d5ae22711578ac88430ca6b933b0866384bab29f Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 1 Jun 2023 15:40:42 +0700
Subject: [PATCH 197/354] fix(components): remove default of withoutTag

---
 src/lib/components/table/contracts/ContractsTable.tsx       | 2 +-
 src/lib/components/table/contracts/ContractsTableHeader.tsx | 2 +-
 src/lib/components/table/contracts/ContractsTableRow.tsx    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/table/contracts/ContractsTable.tsx b/src/lib/components/table/contracts/ContractsTable.tsx
index 597b8ee22..ad967fb02 100644
--- a/src/lib/components/table/contracts/ContractsTable.tsx
+++ b/src/lib/components/table/contracts/ContractsTable.tsx
@@ -23,7 +23,7 @@ export const ContractsTable = ({
   onRowSelect,
   isReadOnly = false,
   withCTA,
-  withoutTag = false,
+  withoutTag,
 }: ContractsTableProps) => {
   if (isLoading) return <Loading />;
   if (!contracts?.length) return emptyState;
diff --git a/src/lib/components/table/contracts/ContractsTableHeader.tsx b/src/lib/components/table/contracts/ContractsTableHeader.tsx
index 52a98641a..f1e98cf38 100644
--- a/src/lib/components/table/contracts/ContractsTableHeader.tsx
+++ b/src/lib/components/table/contracts/ContractsTableHeader.tsx
@@ -9,7 +9,7 @@ export const ContractsTableHeader = ({
   templateColumns,
   isReadOnly,
   withCTA,
-  withoutTag = false,
+  withoutTag,
 }: {
   templateColumns: GridProps["templateColumns"];
   isReadOnly: boolean;
diff --git a/src/lib/components/table/contracts/ContractsTableRow.tsx b/src/lib/components/table/contracts/ContractsTableRow.tsx
index 761a49174..43496eb8c 100644
--- a/src/lib/components/table/contracts/ContractsTableRow.tsx
+++ b/src/lib/components/table/contracts/ContractsTableRow.tsx
@@ -93,7 +93,7 @@ export const ContractsTableRow = ({
   onRowSelect,
   isReadOnly,
   withCTA,
-  withoutTag = false,
+  withoutTag,
 }: ContractsTableRowProps) => (
   <Grid
     templateColumns={templateColumns}

From d991976a615c789eb197c6ee0b0695594dc867c9 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Fri, 2 Jun 2023 16:27:53 +0700
Subject: [PATCH 198/354] fix(components): rename component

---
 src/lib/components/Breadcrumb.tsx | 3 ++-
 src/lib/pages/my-codes/index.tsx  | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Breadcrumb.tsx b/src/lib/components/Breadcrumb.tsx
index 40b5115b7..c2d43a717 100644
--- a/src/lib/components/Breadcrumb.tsx
+++ b/src/lib/components/Breadcrumb.tsx
@@ -32,6 +32,7 @@ export const Breadcrumb = ({ items, mb = 0 }: BreadcrumbProps) => (
           <ChakraBreadcrumbItem
             _hover={{ opacity: 0.8 }}
             transition="all 0.25s ease-in-out"
+            key={`bc-${item.href}`}
           >
             <AppLink color="text.dark" href={item.href}>
               {item.text}
@@ -39,7 +40,7 @@ export const Breadcrumb = ({ items, mb = 0 }: BreadcrumbProps) => (
           </ChakraBreadcrumbItem>
         )
       ) : (
-        <ChakraBreadcrumbItem isCurrentPage>
+        <ChakraBreadcrumbItem isCurrentPage key={`bc-${item.href}`}>
           <Text
             variant="body2"
             className="ellipsis"
diff --git a/src/lib/pages/my-codes/index.tsx b/src/lib/pages/my-codes/index.tsx
index 6d1a17e94..5f1b3622d 100644
--- a/src/lib/pages/my-codes/index.tsx
+++ b/src/lib/pages/my-codes/index.tsx
@@ -29,7 +29,7 @@ interface CodeFilterState {
   permissionValue: PermissionFilterValue;
 }
 
-const Codes = observer(() => {
+const MyCodes = observer(() => {
   const router = useRouter();
   const navigate = useInternalNavigate();
   const onRowSelect = (codeId: number) =>
@@ -135,4 +135,4 @@ const Codes = observer(() => {
   );
 });
 
-export default Codes;
+export default MyCodes;

From e5124bcef6c00f41a41e819ce72ed253e68672f5 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 6 Jun 2023 16:05:14 +0700
Subject: [PATCH 199/354] fix(components): fix assign me and fix color in
 redelegation

---
 src/lib/components/AssignMe.tsx                    | 11 +++++++++--
 .../nonRedelegatable/NonRedelegatableTableRow.tsx  |  2 +-
 src/lib/pages/faucet/index.tsx                     | 14 +++++---------
 src/lib/pages/instantiate/instantiate.tsx          | 12 ++++--------
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/AssignMe.tsx b/src/lib/components/AssignMe.tsx
index c2739439a..2a5b43643 100644
--- a/src/lib/components/AssignMe.tsx
+++ b/src/lib/components/AssignMe.tsx
@@ -1,18 +1,25 @@
 import { Text } from "@chakra-ui/react";
+import type { TextProps } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import type { MouseEventHandler } from "react";
 
 interface AssginMeProps {
   onClick?: MouseEventHandler<HTMLParagraphElement>;
   isDisable?: boolean;
+  textAlign?: TextProps["textAlign"];
 }
 
-export const AssignMe = ({ onClick, isDisable = false }: AssginMeProps) => {
+export const AssignMe = ({
+  onClick,
+  isDisable = false,
+  textAlign = "right",
+}: AssginMeProps) => {
   const { address: walletAddress } = useWallet();
   const enabled = Boolean(!isDisable && walletAddress);
+
   return (
     <Text
-      textAlign="right"
+      textAlign={textAlign}
       mr={3}
       color={enabled ? "accent.main" : "text.disabled"}
       fontWeight={700}
diff --git a/src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableRow.tsx b/src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableRow.tsx
index d4b589e1b..d3a440f16 100644
--- a/src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableRow.tsx
+++ b/src/lib/pages/account-details/components/tables/nonRedelegatable/NonRedelegatableTableRow.tsx
@@ -25,7 +25,7 @@ export const NonRedelegatableTableRow = ({
 
     <TableRow>
       <Flex direction="column" gap={1} color="text.dark">
-        <Text variant="body2">
+        <Text variant="body2" color="text.dark">
           {formatUTC(nonRedelegatable.completionTime)}
         </Text>
         <Text variant="body3" color="text.disabled">
diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index 898b9c23f..4796e4784 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -17,6 +17,7 @@ import {
   useInternalNavigate,
   useValidateAddress,
 } from "lib/app-provider";
+import { AssignMe } from "lib/components/AssignMe";
 import type { FormStatus } from "lib/components/forms";
 import { TextInput } from "lib/components/forms";
 import { CustomIcon } from "lib/components/icon";
@@ -158,19 +159,14 @@ const Faucet = () => {
         status={status}
         label="Receiving Address"
         helperAction={
-          <Text
-            color="accent.main"
-            fontWeight={700}
-            variant="body3"
-            cursor="pointer"
-            alignSelf="flex-start"
+          <AssignMe
             onClick={() => {
               AmpTrack(AmpEvent.USE_ASSIGN_ME);
               setAddress(walletAddress);
             }}
-          >
-            Assign me
-          </Text>
+            isDisable={!walletAddress || address === walletAddress}
+            textAlign="left"
+          />
         }
       />
       <Button
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index 96e7f59ab..b3c48b13b 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -15,6 +15,7 @@ import {
   useLCDEndpoint,
   useValidateAddress,
 } from "lib/app-provider";
+import { AssignMe } from "lib/components/AssignMe";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import type { FormStatus } from "lib/components/forms";
 import { ControllerInput } from "lib/components/forms";
@@ -319,18 +320,13 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             variant="floating"
             error={validateAdmin(watchAdminAddress)}
             helperAction={
-              <Text
-                color="accent.main"
-                fontWeight={700}
-                variant="body3"
-                cursor="pointer"
+              <AssignMe
                 onClick={() => {
                   AmpTrack(AmpEvent.USE_ASSIGN_ME);
                   setValue("adminAddress", address);
                 }}
-              >
-                Assign me
-              </Text>
+                isDisable={!address || watchAdminAddress === address}
+              />
             }
           />
           <Heading variant="h6" as="h6" my={8} alignSelf="flex-start">

From c2bb503718b5442a0fcaa0af2671b9d7b8b3e23a Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 6 Jun 2023 16:09:53 +0700
Subject: [PATCH 200/354] fix(components): add change log

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e33966953..ba654cc07 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#371](https://github.com/alleslabs/celatone-frontend/pull/371) Refactor assign me component and fix color in redelegation page
 - [#357](https://github.com/alleslabs/celatone-frontend/pull/357) Abstract color, typeface, images to theme config
 - [#352](https://github.com/alleslabs/celatone-frontend/pull/352) Refactor/Abstract styling (color system, font weight and more)
 - [#347](https://github.com/alleslabs/celatone-frontend/pull/347) Move tx table accordion arrow to the front and refactor block txs table

From 135fed2c854573e9707a846b1864f9eacd0a7f48 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 7 Jun 2023 11:11:10 +0700
Subject: [PATCH 201/354] feat:  add code hash to code details, and upload
 section

---
 src/lib/components/upload/CodeHashBox.tsx   | 36 +++++++++++++++++
 src/lib/components/upload/UploadSection.tsx | 20 +++++++--
 src/lib/model/code.ts                       | 26 +++++++++++-
 src/lib/pages/code-details/index.tsx        | 37 ++++++++++++++++-
 src/lib/pages/proposal/constants.tsx        |  1 -
 src/lib/pages/proposal/store-code/index.tsx | 45 ++++-----------------
 src/lib/utils/codeHash.ts                   | 13 ++++++
 src/lib/utils/index.ts                      |  1 +
 8 files changed, 134 insertions(+), 45 deletions(-)
 create mode 100644 src/lib/components/upload/CodeHashBox.tsx
 create mode 100644 src/lib/utils/codeHash.ts

diff --git a/src/lib/components/upload/CodeHashBox.tsx b/src/lib/components/upload/CodeHashBox.tsx
new file mode 100644
index 000000000..b474bcc4b
--- /dev/null
+++ b/src/lib/components/upload/CodeHashBox.tsx
@@ -0,0 +1,36 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import type { Option } from "lib/types";
+
+interface CodeHashBoxProps {
+  codeHash: Option<string>;
+}
+
+export const CodeHashBox = ({ codeHash }: CodeHashBoxProps) => (
+  <Flex position="relative">
+    <Text
+      position="absolute"
+      variant="body3"
+      color="text.dark"
+      px="1px"
+      top="-10px"
+      left={3}
+    >
+      Code Hash
+    </Text>
+    <Flex
+      border="1px"
+      borderRadius="5px"
+      px={3}
+      py={4}
+      borderColor="gray.700"
+      bg="gray.800"
+      h="56px"
+      w="full"
+      overflowX="auto"
+      overflowY="hidden"
+    >
+      <Text>{codeHash}</Text>
+    </Flex>
+  </Flex>
+);
diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index d03d13c83..2b179b9d4 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -25,7 +25,9 @@ import type {
   UploadSectionState,
 } from "lib/types";
 import { AccessType } from "lib/types";
+import { getCodeHash } from "lib/utils";
 
+import { CodeHashBox } from "./CodeHashBox";
 import { InstantiatePermissionRadio } from "./InstantiatePermissionRadio";
 import { SimulateMessageRender } from "./SimulateMessageRender";
 import { UploadCard } from "./UploadCard";
@@ -46,6 +48,7 @@ export const UploadSection = ({
   const postUploadTx = useUploadContractTx(isMigrate);
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
 
+  const [codeHash, setCodeHash] = useState<string>();
   const [estimatedFee, setEstimatedFee] = useState<StdFee>();
   const [simulateStatus, setSimulateStatus] = useState<SimulateStatus>({
     status: "default",
@@ -161,6 +164,15 @@ export const UploadSection = ({
     JSON.stringify(addresses),
   ]);
 
+  // Generate hash value from wasm file
+  const setHashValue = useCallback(async () => {
+    setCodeHash(await getCodeHash(wasmFile));
+  }, [wasmFile]);
+
+  useEffect(() => {
+    setHashValue();
+  }, [setHashValue]);
+
   useEffect(() => {
     if (!wasmFile) {
       setDefaultBehavior();
@@ -173,7 +185,7 @@ export const UploadSection = ({
   }, [wasmFile, address, shouldNotSimulate, permission, setValue]);
 
   return (
-    <>
+    <Flex direction="column" gap={8} maxW="550px">
       {wasmFile ? (
         <UploadCard
           file={wasmFile}
@@ -185,6 +197,7 @@ export const UploadSection = ({
       ) : (
         <DropZone setFile={(file) => setValue("wasmFile", file)} />
       )}
+      <CodeHashBox codeHash={codeHash} />
       <ControllerInput
         name="codeName"
         control={control}
@@ -196,7 +209,6 @@ export const UploadSection = ({
         }}
         error={errors.codeName && getMaxCodeNameLengthError(codeName.length)}
         variant="floating"
-        my={8}
       />
       <InstantiatePermissionRadio
         control={control}
@@ -204,7 +216,7 @@ export const UploadSection = ({
         trigger={trigger}
       />
 
-      <Box mt={10} width="full">
+      <Box width="full">
         {(simulateStatus.status !== "default" || isSimulating) && (
           <SimulateMessageRender
             value={
@@ -256,6 +268,6 @@ export const UploadSection = ({
           Upload
         </Button>
       </Flex>
-    </>
+    </Flex>
   );
 };
diff --git a/src/lib/model/code.ts b/src/lib/model/code.ts
index 440e518ab..fcc0ada49 100644
--- a/src/lib/model/code.ts
+++ b/src/lib/model/code.ts
@@ -1,7 +1,8 @@
 import { useWallet } from "@cosmos-kit/react";
+import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 
-import { useChainId } from "lib/app-provider";
+import { useChainId, useLCDEndpoint } from "lib/app-provider";
 import type { PermissionFilterValue } from "lib/hooks";
 import {
   useUserKey,
@@ -9,6 +10,7 @@ import {
   useCodeSearchFilter,
 } from "lib/hooks";
 import { useCodeStore } from "lib/providers/store";
+import { getCodeIdInfo } from "lib/services/code";
 import {
   useCodeDataByCodeId,
   useCodeListByCodeIds,
@@ -32,6 +34,11 @@ export interface CodeDataState {
   isLoading: boolean;
   chainId: string;
   codeData: Option<CodeData>;
+  lcdCodeData: {
+    codeHash: Option<string>;
+    isLcdCodeLoading: boolean;
+    isLcdCodeError: unknown;
+  };
   publicProject: {
     publicCodeData: Option<PublicCode>;
     publicDetail: Option<PublicDetail>;
@@ -39,11 +46,23 @@ export interface CodeDataState {
 }
 
 export const useCodeData = (codeId: number): CodeDataState => {
+  const endpoint = useLCDEndpoint();
+  const { currentChainRecord } = useWallet();
+
   const { data: codeInfo, isLoading } = useCodeDataByCodeId(codeId);
   const { data: publicCodeInfo } = usePublicProjectByCodeId(codeId);
   const { data: publicInfoBySlug } = usePublicProjectBySlug(
     publicCodeInfo?.slug
   );
+  const {
+    data: lcdCode,
+    isLoading: isLcdCodeLoading,
+    error: isLcdCodeError,
+  } = useQuery(
+    ["query", "code_data", endpoint, codeId],
+    async () => getCodeIdInfo(endpoint, codeId),
+    { enabled: Boolean(currentChainRecord) && Boolean(codeId), retry: false }
+  );
 
   const chainId = useChainId();
 
@@ -51,6 +70,11 @@ export const useCodeData = (codeId: number): CodeDataState => {
     isLoading,
     chainId,
     codeData: codeInfo as CodeData,
+    lcdCodeData: {
+      codeHash: lcdCode?.code_info.data_hash,
+      isLcdCodeLoading,
+      isLcdCodeError,
+    },
     publicProject: {
       publicCodeData: publicCodeInfo,
       publicDetail: publicInfoBySlug?.details,
diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index a12a341a3..72d53fc61 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -1,4 +1,4 @@
-import { Divider, Flex, Heading, Text, Image } from "@chakra-ui/react";
+import { Divider, Flex, Heading, Text, Image, Spinner } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
@@ -15,6 +15,7 @@ import type { CodeDataState } from "lib/model/code";
 import { useCodeData } from "lib/model/code";
 import { useCodeStore } from "lib/providers/store";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import type { Option } from "lib/types";
 import { AccessConfigPermission } from "lib/types";
 import { getCw2Info, getFirstQueryParam, isCodeId } from "lib/utils";
 
@@ -29,11 +30,33 @@ interface CodeDetailsBodyProps {
 
 const InvalidCode = () => <InvalidState title="Code does not exist" />;
 
+const CodeHashInfo = ({
+  isLcdCodeLoading,
+  isLcdCodeError,
+  codeHash,
+}: {
+  isLcdCodeLoading: boolean;
+  isLcdCodeError: unknown;
+  codeHash: Option<string>;
+}) => {
+  if (isLcdCodeLoading) return <Spinner size="sm" />;
+  if (codeHash)
+    return (
+      <CopyLink value={codeHash} amptrackSection="code_hash" type="code_hash" />
+    );
+  return (
+    <Text color="text.disabled" variant="body2">
+      {isLcdCodeError ? "Error fetching data" : "N/A"}
+    </Text>
+  );
+};
+
 const CodeDetailsBody = observer(
   ({ codeDataState, codeId }: CodeDetailsBodyProps) => {
     const { getCodeLocalInfo } = useCodeStore();
     const localCodeInfo = getCodeLocalInfo(codeId);
-    const { chainId, codeData, publicProject } = codeDataState;
+    const { chainId, codeData, publicProject, lcdCodeData } = codeDataState;
+    const { codeHash, isLcdCodeLoading, isLcdCodeError } = lcdCodeData;
 
     if (!codeData) return <InvalidCode />;
 
@@ -107,6 +130,16 @@ const CodeDetailsBody = observer(
                 type="code_id"
               />
             </Flex>
+            <Flex gap={2}>
+              <Text fontWeight={500} color="text.dark" variant="body2">
+                Code Hash:
+              </Text>
+              <CodeHashInfo
+                isLcdCodeError={isLcdCodeError}
+                isLcdCodeLoading={isLcdCodeLoading}
+                codeHash={codeHash}
+              />
+            </Flex>
             <Flex gap={2}>
               <Text fontWeight={500} color="text.dark" variant="body2">
                 CW2 Info:
diff --git a/src/lib/pages/proposal/constants.tsx b/src/lib/pages/proposal/constants.tsx
index a332a7752..0fcf75d51 100644
--- a/src/lib/pages/proposal/constants.tsx
+++ b/src/lib/pages/proposal/constants.tsx
@@ -127,7 +127,6 @@ export const PROPOSAL_STORE_CODE_TEXT = {
   runAsHelperText: "This address will be stored as code creator.",
   runAsRequired: "Creator is required",
   uploadHeader: "Upload Wasm File",
-  codeHashHeader: "Code Hash",
   unpinLabel: "Unpin code",
   unpinTooltip:
     "Unpin removes the guarantee of a contract to be pinned. After calling this, the code may or may not remain in memory depending on the implementor's choice. Unpin is idempotent.",
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index 26ec716ee..0b0553243 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -9,7 +9,6 @@ import {
   Checkbox,
   Box,
 } from "@chakra-ui/react";
-import { Sha256 } from "@cosmjs/crypto";
 import type { Coin, StdFee } from "@cosmjs/stargate";
 import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
@@ -41,6 +40,7 @@ import { CustomIcon } from "lib/components/icon";
 import PageContainer from "lib/components/PageContainer";
 import { StickySidebar } from "lib/components/StickySidebar";
 import { Tooltip } from "lib/components/Tooltip";
+import { CodeHashBox } from "lib/components/upload/CodeHashBox";
 import { InstantiatePermissionRadio } from "lib/components/upload/InstantiatePermissionRadio";
 import { SimulateMessageRender } from "lib/components/upload/SimulateMessageRender";
 import { UploadCard } from "lib/components/upload/UploadCard";
@@ -64,7 +64,11 @@ import type {
   UploadSectionState,
 } from "lib/types";
 import { AccessType } from "lib/types";
-import { composeStoreCodeProposalMsg, getAmountToVote } from "lib/utils";
+import {
+  composeStoreCodeProposalMsg,
+  getAmountToVote,
+  getCodeHash,
+} from "lib/utils";
 
 interface StoreCodeProposalState {
   title: string;
@@ -231,14 +235,7 @@ const StoreCodeProposal = () => {
 
   // Generate hash value from wasm file
   const setHashValue = useCallback(async () => {
-    if (wasmFile) {
-      const wasmFileBytes = new Sha256(
-        new Uint8Array(await wasmFile.arrayBuffer())
-      ).digest();
-      setValue("codeHash", Buffer.from(wasmFileBytes).toString("hex"));
-    } else {
-      setValue("codeHash", "");
-    }
+    setValue("codeHash", await getCodeHash(wasmFile));
   }, [setValue, wasmFile]);
 
   useEffect(() => {
@@ -443,33 +440,7 @@ const StoreCodeProposal = () => {
                 )}
 
                 {/* Code hash  */}
-                <Flex position="relative">
-                  <Text
-                    position="absolute"
-                    variant="body3"
-                    color="text.dark"
-                    px="1px"
-                    top="-10px"
-                    left={3}
-                  >
-                    {PROPOSAL_STORE_CODE_TEXT.codeHashHeader}
-                  </Text>
-                  <Flex
-                    border="1px"
-                    borderRadius="5px"
-                    px={3}
-                    py={4}
-                    borderColor="gray.700"
-                    bg="gray.800"
-                    h="56px"
-                    w="full"
-                    overflowX="auto"
-                    overflowY="hidden"
-                  >
-                    <Text>{codeHash}</Text>
-                  </Flex>
-                </Flex>
-
+                <CodeHashBox codeHash={codeHash} />
                 {/* Unpin code  */}
                 <Flex direction="row" alignItems="center" gap={1}>
                   <Checkbox
diff --git a/src/lib/utils/codeHash.ts b/src/lib/utils/codeHash.ts
new file mode 100644
index 000000000..3a25e9098
--- /dev/null
+++ b/src/lib/utils/codeHash.ts
@@ -0,0 +1,13 @@
+import { Sha256 } from "@cosmjs/crypto";
+
+import type { Option } from "lib/types";
+
+export const getCodeHash = async (wasmFile: Option<File>) => {
+  if (wasmFile) {
+    const wasmFileBytes = new Sha256(
+      new Uint8Array(await wasmFile.arrayBuffer())
+    ).digest();
+    return Buffer.from(wasmFileBytes).toString("hex");
+  }
+  return "";
+};
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 3a8c9143f..ed77207c6 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -28,3 +28,4 @@ export * from "./executeTags";
 export * from "./cw2";
 export * from "./bech32";
 export * from "./proposal";
+export * from "./codeHash";

From 0812f8a56048cc0417520df66dcce76e6a85adb8 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 7 Jun 2023 11:14:56 +0700
Subject: [PATCH 202/354] chore: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 152e8f534..e807f9e67 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#372](https://github.com/alleslabs/celatone-frontend/pull/372) Add code hash to code details and upload section
 - [#329](https://github.com/alleslabs/celatone-frontend/pull/329) Add allowed user to store code flow
 - [#321](https://github.com/alleslabs/celatone-frontend/pull/321) Add amplitude to proposal to store code page
 - [#274](https://github.com/alleslabs/celatone-frontend/pull/274) Add proposal to store code page

From 0d37d1149cf4df95ee64944aeaec2634b2382627 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 7 Jun 2023 11:56:47 +0700
Subject: [PATCH 203/354] feat: add view in json for assets in account details
 page

---
 src/lib/hooks/useOpenAssetTab.ts              | 23 ++++++++++
 .../components/asset/index.tsx                | 42 ++++++++++++-------
 2 files changed, 51 insertions(+), 14 deletions(-)
 create mode 100644 src/lib/hooks/useOpenAssetTab.ts

diff --git a/src/lib/hooks/useOpenAssetTab.ts b/src/lib/hooks/useOpenAssetTab.ts
new file mode 100644
index 000000000..1e789970b
--- /dev/null
+++ b/src/lib/hooks/useOpenAssetTab.ts
@@ -0,0 +1,23 @@
+import { useWallet } from "@cosmos-kit/react";
+import { useCallback } from "react";
+
+import { CELATONE_API_ENDPOINT, getChainApiPath } from "env";
+import { useChainId } from "lib/app-provider";
+
+import { openNewTab } from "./useOpenTxTab";
+
+export const useOpenAssetTab = () => {
+  const { currentChainName } = useWallet();
+  const chainId = useChainId();
+
+  const baseUrl = `${CELATONE_API_ENDPOINT}/balances/${getChainApiPath(
+    currentChainName
+  )}/${chainId}`;
+
+  return useCallback(
+    (walletAddr: string) => {
+      openNewTab(`${baseUrl}/${walletAddr}`);
+    },
+    [baseUrl]
+  );
+};
diff --git a/src/lib/pages/account-details/components/asset/index.tsx b/src/lib/pages/account-details/components/asset/index.tsx
index d5db3fc4c..4810720e8 100644
--- a/src/lib/pages/account-details/components/asset/index.tsx
+++ b/src/lib/pages/account-details/components/asset/index.tsx
@@ -1,12 +1,15 @@
-import { Flex, Grid, Text } from "@chakra-ui/react";
+import { Button, Flex, Grid, Text } from "@chakra-ui/react";
 import type { Big } from "big.js";
 import big from "big.js";
 
+import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { UnsupportedTokensModal } from "lib/components/modal";
 import { TableTitle, ViewMore } from "lib/components/table";
 import { TokenCard } from "lib/components/TokenCard";
+import { useOpenAssetTab } from "lib/hooks/useOpenAssetTab";
 import { useUserAssetInfos } from "lib/pages/account-details/data";
+import { AmpTrackViewJson } from "lib/services/amplitude";
 import type { BalanceWithAssetInfo, HumanAddr, Option, USD } from "lib/types";
 import { calTotalValue, formatPrice } from "lib/utils";
 
@@ -55,6 +58,7 @@ export const AssetsSection = ({
   walletAddress,
   onViewMore,
 }: AssetsSectionProps) => {
+  const openAssetTab = useOpenAssetTab();
   const { supportedAssets, unsupportedAssets, isLoading, error } =
     useUserAssetInfos(walletAddress);
 
@@ -63,17 +67,12 @@ export const AssetsSection = ({
 
   if (isLoading) return <Loading />;
 
+  const totalAsset =
+    (supportedAssets?.length || 0) + (unsupportedAssets?.length || 0);
+
   return (
     <Flex direction="column" gap={4} my={8} width="full">
-      {onViewMore && (
-        <TableTitle
-          title="Assets"
-          count={
-            (supportedAssets?.length || 0) + (unsupportedAssets?.length || 0)
-          }
-          mb={0}
-        />
-      )}
+      {onViewMore && <TableTitle title="Assets" count={totalAsset} mb={0} />}
       <Flex justify="space-between" width="full" align="center">
         <Flex gap={12}>
           <UserAssetInfoCard
@@ -84,14 +83,29 @@ export const AssetsSection = ({
             helperText="Total Asset Value"
           />
         </Flex>
-        {unsupportedAssets && (
-          <Flex>
+        <Flex>
+          {totalAsset > 0 && (
+            <Button
+              variant="ghost-gray"
+              size="sm"
+              rightIcon={
+                <CustomIcon name="launch" boxSize={3} color="text.dark" />
+              }
+              onClick={() => {
+                AmpTrackViewJson("account_details_page_assets");
+                openAssetTab(walletAddress);
+              }}
+            >
+              View in JSON
+            </Button>
+          )}
+          {unsupportedAssets && (
             <UnsupportedTokensModal
               unsupportedAssets={unsupportedAssets}
               address={walletAddress}
             />
-          </Flex>
-        )}
+          )}
+        </Flex>
       </Flex>
       <AssetSectionContent
         supportedAssets={supportedAssets}

From d0b2b3daf800795533e69ec2b19f40e0052d2b68 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 7 Jun 2023 12:07:04 +0700
Subject: [PATCH 204/354] chore: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e33966953..db1eba64c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -59,6 +59,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#373](https://github.com/alleslabs/celatone-frontend/pull/373) Add view in Json for assets in account details page
 - [#364](https://github.com/alleslabs/celatone-frontend/pull/364) (Contract Details) use instantiated height and time from indexer as fallback
 - [#323](https://github.com/alleslabs/celatone-frontend/pull/323) Revise back button and breadcrumb components
 - [#339](https://github.com/alleslabs/celatone-frontend/pull/339) Update all routes to plural form, and patch all codes

From ad0b4508f3d5b99d6f8d78b7a991da638b7fcde1 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 7 Jun 2023 14:11:48 +0700
Subject: [PATCH 205/354] fix(components): fix as comment

---
 src/lib/pages/faucet/index.tsx            | 2 +-
 src/lib/pages/instantiate/instantiate.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index 4796e4784..0f85fc3b0 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -164,7 +164,7 @@ const Faucet = () => {
               AmpTrack(AmpEvent.USE_ASSIGN_ME);
               setAddress(walletAddress);
             }}
-            isDisable={!walletAddress || address === walletAddress}
+            isDisable={address === walletAddress}
             textAlign="left"
           />
         }
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index b3c48b13b..5b7683ccd 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -325,7 +325,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
                   AmpTrack(AmpEvent.USE_ASSIGN_ME);
                   setValue("adminAddress", address);
                 }}
-                isDisable={!address || watchAdminAddress === address}
+                isDisable={watchAdminAddress === address}
               />
             }
           />

From 3738a6f9e369883372bd6cc79ccaf2cb510b70d3 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 7 Jun 2023 14:30:57 +0700
Subject: [PATCH 206/354] fix: n/a proposal resolved height

---
 src/lib/components/table/proposals/ProposalsTableRow.tsx | 1 -
 src/lib/components/table/proposals/ResolvedHeight.tsx    | 5 +----
 src/lib/pages/proposals/table/ProposalTableRow.tsx       | 1 -
 3 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/lib/components/table/proposals/ProposalsTableRow.tsx b/src/lib/components/table/proposals/ProposalsTableRow.tsx
index 8eb8cb786..36c740b65 100644
--- a/src/lib/components/table/proposals/ProposalsTableRow.tsx
+++ b/src/lib/components/table/proposals/ProposalsTableRow.tsx
@@ -49,7 +49,6 @@ export const ProposalsTableRow = ({
         <ResolvedHeight
           resolvedHeight={proposal.resolvedHeight}
           isDepositOrVoting={isDepositOrVoting}
-          isDepositFailed={isDepositFailed}
         />
       </TableRow>
       <TableRow>
diff --git a/src/lib/components/table/proposals/ResolvedHeight.tsx b/src/lib/components/table/proposals/ResolvedHeight.tsx
index 2a51910d6..e6ee86d49 100644
--- a/src/lib/components/table/proposals/ResolvedHeight.tsx
+++ b/src/lib/components/table/proposals/ResolvedHeight.tsx
@@ -6,18 +6,15 @@ import type { ProposalsTableRowProps } from "./ProposalsTableRow";
 
 export const ResolvedHeight = ({
   resolvedHeight,
-  isDepositFailed,
   isDepositOrVoting,
   amptrackSection,
 }: {
   resolvedHeight: ProposalsTableRowProps["proposal"]["resolvedHeight"];
-  isDepositFailed: boolean;
   isDepositOrVoting: boolean;
   amptrackSection?: string;
 }) => {
   if (isDepositOrVoting) return <Text color="text.dark">Pending</Text>;
-  if (!resolvedHeight || isDepositFailed)
-    return <Text color="text.dark">N/A</Text>;
+  if (!resolvedHeight) return <Text color="text.dark">N/A</Text>;
   return (
     <ExplorerLink
       type="block_height"
diff --git a/src/lib/pages/proposals/table/ProposalTableRow.tsx b/src/lib/pages/proposals/table/ProposalTableRow.tsx
index 2de771f8a..286b24cc3 100644
--- a/src/lib/pages/proposals/table/ProposalTableRow.tsx
+++ b/src/lib/pages/proposals/table/ProposalTableRow.tsx
@@ -101,7 +101,6 @@ export const ProposalTableRow = ({
         <StopPropagationBox>
           <ResolvedHeight
             resolvedHeight={proposal.resolvedHeight}
-            isDepositFailed={isDepositFailed}
             isDepositOrVoting={isDepositOrVoting}
             amptrackSection="proposal-list"
           />

From 3c98a474cfbb912893ccd7269c227493bf922c6a Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 7 Jun 2023 14:35:11 +0700
Subject: [PATCH 207/354] chore: add changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e33966953..48433dec3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -49,6 +49,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#375](https://github.com/alleslabs/celatone-frontend/pull/375) Fix incorrect display resolve height in proposals page
+
 ## v1.0.5
 
 ### Features

From 2d6f4ff5b4776ae5166dd0d4e8557f8716ad8d63 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 7 Jun 2023 17:55:53 +0700
Subject: [PATCH 208/354] chore: fix syntax

---
 src/lib/pages/code-details/index.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index 72d53fc61..9e8329361 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -55,8 +55,12 @@ const CodeDetailsBody = observer(
   ({ codeDataState, codeId }: CodeDetailsBodyProps) => {
     const { getCodeLocalInfo } = useCodeStore();
     const localCodeInfo = getCodeLocalInfo(codeId);
-    const { chainId, codeData, publicProject, lcdCodeData } = codeDataState;
-    const { codeHash, isLcdCodeLoading, isLcdCodeError } = lcdCodeData;
+    const {
+      chainId,
+      codeData,
+      publicProject,
+      lcdCodeData: { codeHash, isLcdCodeLoading, isLcdCodeError },
+    } = codeDataState;
 
     if (!codeData) return <InvalidCode />;
 

From ded15cb35a017452d2073c6306c2c3342827a367 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Wed, 7 Jun 2023 18:02:34 +0700
Subject: [PATCH 209/354] fix: useQuery

---
 src/lib/model/code.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/model/code.ts b/src/lib/model/code.ts
index fcc0ada49..e1a84aba7 100644
--- a/src/lib/model/code.ts
+++ b/src/lib/model/code.ts
@@ -47,7 +47,6 @@ export interface CodeDataState {
 
 export const useCodeData = (codeId: number): CodeDataState => {
   const endpoint = useLCDEndpoint();
-  const { currentChainRecord } = useWallet();
 
   const { data: codeInfo, isLoading } = useCodeDataByCodeId(codeId);
   const { data: publicCodeInfo } = usePublicProjectByCodeId(codeId);
@@ -61,7 +60,7 @@ export const useCodeData = (codeId: number): CodeDataState => {
   } = useQuery(
     ["query", "code_data", endpoint, codeId],
     async () => getCodeIdInfo(endpoint, codeId),
-    { enabled: Boolean(currentChainRecord) && Boolean(codeId), retry: false }
+    { enabled: Boolean(endpoint) && Boolean(codeId), retry: false }
   );
 
   const chainId = useChainId();

From 93c0aa341e78aab9cd43077b8dc0091303d465b6 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 8 Jun 2023 10:56:44 +0700
Subject: [PATCH 210/354] fix(components): fix conflict

---
 CHANGELOG.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c4ec5031..d1bbccdc5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -48,13 +48,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
-<<<<<<< HEAD
 - [#371](https://github.com/alleslabs/celatone-frontend/pull/371) Refactor assign me component and fix color in redelegation page
-=======
 - [#342](https://github.com/alleslabs/celatone-frontend/pull/342) Add fallback n/a token on asset icon on asset box
 - [#331](https://github.com/alleslabs/celatone-frontend/pull/331) Add validation check for builder in proposal to store code page
 - [#324](https://github.com/alleslabs/celatone-frontend/pull/324) Add deposit/voting period from gov params and add minimum required alert for proposal to store code
->>>>>>> develop
 - [#357](https://github.com/alleslabs/celatone-frontend/pull/357) Abstract color, typeface, images to theme config
 - [#352](https://github.com/alleslabs/celatone-frontend/pull/352) Refactor/Abstract styling (color system, font weight and more)
 - [#347](https://github.com/alleslabs/celatone-frontend/pull/347) Move tx table accordion arrow to the front and refactor block txs table

From 229c3cf9a6eefcbab118236a433b4a5d072fc8a2 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 8 Jun 2023 11:31:22 +0700
Subject: [PATCH 211/354] fix: pluralize and capitalize

---
 package.json                                  |  1 +
 src/lib/components/TxFilterSelection.tsx      |  2 +-
 src/lib/components/TxRelationSelection.tsx    |  2 +-
 .../components/action-msg/ActionMessages.tsx  |  4 +++-
 .../select-code/CodeSelectDrawerButton.tsx    |  2 +-
 .../select-contract/ContractListDetail.tsx    |  2 +-
 .../components/CodeInfoSection.tsx            |  5 ++++-
 src/lib/pages/codes/index.tsx                 |  2 +-
 src/lib/pages/contract-details/index.tsx      |  3 +--
 src/lib/pages/contracts/index.tsx             |  2 +-
 src/lib/pages/my-codes/index.tsx              |  2 +-
 src/lib/pages/past-txs/index.tsx              |  2 +-
 .../account/PublicProjectAccountTable.tsx     |  2 +-
 .../table/code/PublicProjectCodeTable.tsx     |  2 +-
 .../contract/PublicProjectContractTable.tsx   |  2 +-
 .../components/tx-message/TxMsgDetails.tsx    |  3 ++-
 .../tx-message/msg-receipts/index.tsx         | 22 +++++++++++--------
 yarn.lock                                     | 12 ++++++++++
 18 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index e60ff993f..80e7dab1b 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "next": "^13.0.0",
     "next-seo": "^5.8.0",
     "node-gzip": "^1.1.2",
+    "plur": "^5.1.0",
     "react": "^18.2.0",
     "react-ace": "^10.1.0",
     "react-dom": "^18.2.0",
diff --git a/src/lib/components/TxFilterSelection.tsx b/src/lib/components/TxFilterSelection.tsx
index 87941048e..dc06a1b13 100644
--- a/src/lib/components/TxFilterSelection.tsx
+++ b/src/lib/components/TxFilterSelection.tsx
@@ -49,7 +49,7 @@ export const TxFilterSelection = forwardRef<
       placeholder,
       helperText,
       labelBgColor = "background.main",
-      label = "Filter by Actions",
+      label = "Filter by Action",
       boxWidth = "full",
       boxHeight = "56px",
       ...rest
diff --git a/src/lib/components/TxRelationSelection.tsx b/src/lib/components/TxRelationSelection.tsx
index 5074ae45e..d4b44fb6a 100644
--- a/src/lib/components/TxRelationSelection.tsx
+++ b/src/lib/components/TxRelationSelection.tsx
@@ -39,7 +39,7 @@ export const TxRelationSelection = ({
 }: TxRelationSelectionProps) => (
   <Box {...props}>
     <SelectInput
-      formLabel="Filter by Relations"
+      formLabel="Filter by Relation"
       options={relationOptions}
       onChange={(value: RelationType) =>
         setValue(
diff --git a/src/lib/components/action-msg/ActionMessages.tsx b/src/lib/components/action-msg/ActionMessages.tsx
index ba6a0fd57..b19b69001 100644
--- a/src/lib/components/action-msg/ActionMessages.tsx
+++ b/src/lib/components/action-msg/ActionMessages.tsx
@@ -1,3 +1,5 @@
+import plur from "plur";
+
 import type { Transaction } from "lib/types";
 import { ActionMsgType } from "lib/types";
 import { extractMsgType } from "lib/utils";
@@ -27,7 +29,7 @@ export const RenderActionMessages = ({
   }
   return (
     <SingleMsg
-      type="Message"
+      type={plur("Message", transaction.messages.length)}
       tags={
         transaction.messages.length === 1
           ? [extractMsgType(transaction.messages[0].type).substring(3)]
diff --git a/src/lib/components/select-code/CodeSelectDrawerButton.tsx b/src/lib/components/select-code/CodeSelectDrawerButton.tsx
index 4c86a4b0c..70d041d39 100644
--- a/src/lib/components/select-code/CodeSelectDrawerButton.tsx
+++ b/src/lib/components/select-code/CodeSelectDrawerButton.tsx
@@ -98,7 +98,7 @@ export const CodeSelectDrawerButton = ({
           <DrawerBody px={0} overflow="scroll">
             <Flex gap={2} px={6} py={2}>
               <InputWithIcon
-                placeholder="Search with code ID or code name"
+                placeholder="Search with Code ID or Code Name"
                 value={keyword}
                 onChange={(e: ChangeEvent<HTMLInputElement>) =>
                   setValue("keyword", e.target.value)
diff --git a/src/lib/components/select-contract/ContractListDetail.tsx b/src/lib/components/select-contract/ContractListDetail.tsx
index 2ff9c0bd5..8f1d830e7 100644
--- a/src/lib/components/select-contract/ContractListDetail.tsx
+++ b/src/lib/components/select-contract/ContractListDetail.tsx
@@ -122,7 +122,7 @@ export const ContractListDetail = ({
           variant="floating"
           value={searchKeyword}
           setInputState={setSearchKeyword}
-          placeholder="Search with contract address, name, or description"
+          placeholder="Search with Contract Address, Name, or Description"
           size={!isReadOnly ? "lg" : "md"}
         />
         {!isReadOnly && (
diff --git a/src/lib/pages/code-details/components/CodeInfoSection.tsx b/src/lib/pages/code-details/components/CodeInfoSection.tsx
index 24f930b19..14265f5d5 100644
--- a/src/lib/pages/code-details/components/CodeInfoSection.tsx
+++ b/src/lib/pages/code-details/components/CodeInfoSection.tsx
@@ -1,4 +1,5 @@
 import { Heading, Flex, Text, Box, Grid } from "@chakra-ui/react";
+import plur from "plur";
 
 import { useGetAddressType } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
@@ -132,7 +133,9 @@ export const CodeInfoSection = ({
           </Flex>
         </LabelText>
         {methodRender}
-        <LabelText label="Instantiate Permission">
+        <LabelText
+          label={plur("Instantiate Permission", permissionAddresses.length)}
+        >
           <Flex direction="column" gap={1}>
             <PermissionChip
               instantiatePermission={instantiatePermission}
diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx
index c43cbc4c8..931120e8a 100644
--- a/src/lib/pages/codes/index.tsx
+++ b/src/lib/pages/codes/index.tsx
@@ -65,7 +65,7 @@ const RecentCodes = observer(() => {
         </Text>
         <Flex gap={3} mt={8}>
           <InputWithIcon
-            placeholder="Search with code ID or code name"
+            placeholder="Search with Code ID or Code Name"
             value={keyword}
             onChange={(e: ChangeEvent<HTMLInputElement>) =>
               setValue("keyword", e.target.value)
diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index e0254cb7c..00fb9e6ec 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -95,8 +95,7 @@ const ContractDetailsBody = observer(
             <CustomTab count={tableCounts.transactionsCount}>
               Transactions
             </CustomTab>
-            {/* <CustomTab count={tableCounts.executeCount}>Executes</CustomTab> */}
-            <CustomTab count={tableCounts.migrationCount}>Migration</CustomTab>
+            <CustomTab count={tableCounts.migrationCount}>Migrations</CustomTab>
             <CustomTab count={tableCounts.relatedProposalsCount}>
               Related Proposals
             </CustomTab>
diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contracts/index.tsx
index dd221f4f2..81cc52339 100644
--- a/src/lib/pages/contracts/index.tsx
+++ b/src/lib/pages/contracts/index.tsx
@@ -44,7 +44,7 @@ const RecentContracts = observer(() => {
             variant="floating"
             value={searchKeyword}
             setInputState={setSearchKeyword}
-            placeholder="Search with contract address, name or label"
+            placeholder="Search with Contract Address, Name, or Label"
             size="lg"
           />
         </Flex>
diff --git a/src/lib/pages/my-codes/index.tsx b/src/lib/pages/my-codes/index.tsx
index 5f1b3622d..81af5c11f 100644
--- a/src/lib/pages/my-codes/index.tsx
+++ b/src/lib/pages/my-codes/index.tsx
@@ -81,7 +81,7 @@ const MyCodes = observer(() => {
         </TabList>
         <Flex gap={3} pb={4}>
           <InputWithIcon
-            placeholder="Search with code ID or code name"
+            placeholder="Search with Code ID or Code Name"
             value={keyword}
             onChange={(e: ChangeEvent<HTMLInputElement>) =>
               setValue("keyword", e.target.value)
diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx
index 1050c0e83..f7a8ba309 100644
--- a/src/lib/pages/past-txs/index.tsx
+++ b/src/lib/pages/past-txs/index.tsx
@@ -141,7 +141,7 @@ const PastTxs = () => {
               setCurrentPage(1);
               setValue("search", e.target.value);
             }}
-            placeholder="Search with transaction hash or contract address"
+            placeholder="Search with Transaction Hash or Contract Address"
             h="full"
           />
           <InputRightElement pointerEvents="none" h="full" mr={1}>
diff --git a/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx b/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
index 27e39167d..daac3f458 100644
--- a/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
+++ b/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
@@ -46,7 +46,7 @@ export const PublicProjectAccountTable = ({
           variant="floating"
           value={searchKeyword}
           setInputState={setSearchKeyword}
-          placeholder="Search with account address, name or description"
+          placeholder="Search with Account Address, Name, or Description"
           size="lg"
           mb={6}
         />
diff --git a/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx b/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
index 7ae190a57..3a67ee7c8 100644
--- a/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
+++ b/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
@@ -77,7 +77,7 @@ export const PublicProjectCodeTable = observer(
             variant="floating"
             value={searchKeyword}
             setInputState={setSearchKeyword}
-            placeholder="Search with code ID or code name"
+            placeholder="Search with Code ID or Code Name"
             size="lg"
             mb={6}
           />
diff --git a/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx b/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
index 4765b6346..4ff37df2d 100644
--- a/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
+++ b/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
@@ -67,7 +67,7 @@ export const PublicProjectContractTable = observer(
             variant="floating"
             value={searchKeyword}
             setInputState={setSearchKeyword}
-            placeholder="Search with contract address or contract name"
+            placeholder="Search with Contract Address or Contract Name"
             size="lg"
             mb={6}
           />
diff --git a/src/lib/pages/tx-details/components/tx-message/TxMsgDetails.tsx b/src/lib/pages/tx-details/components/tx-message/TxMsgDetails.tsx
index 3343b87db..a13485279 100644
--- a/src/lib/pages/tx-details/components/tx-message/TxMsgDetails.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/TxMsgDetails.tsx
@@ -1,4 +1,5 @@
 import { Flex } from "@chakra-ui/react";
+import plur from "plur";
 
 import { useGetAddressType } from "lib/app-provider";
 import { TxReceiptRender } from "lib/components/tx";
@@ -21,7 +22,7 @@ export const TxMsgDetails = ({
   const receipts = generateReceipts(txMsgData, getAddressType, assetInfos)
     .concat(
       txMsgData.log && {
-        title: "Event Logs",
+        title: plur("Event Log", txMsgData.log.events.length),
         html: (
           <Flex direction="column" gap={3} w="full">
             {txMsgData.log.events.map((event, idx) => (
diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
index ddfde0891..3af5c86ea 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
@@ -2,6 +2,7 @@
 /* eslint-disable complexity */
 import { Flex } from "@chakra-ui/react";
 import big from "big.js";
+import plur from "plur";
 
 import type { TxMsgData } from "..";
 import type { AddressReturnType } from "lib/app-provider";
@@ -55,7 +56,10 @@ export const generateReceipts = (
           }),
         },
         details.instantiate_permission && {
-          title: "Instantiate Permission",
+          title: plur(
+            "Instantiate Permission",
+            details.instantiate_permission.addresses.length
+          ),
           html: (
             <Flex direction="column" gap={1}>
               <PermissionChip
@@ -1692,7 +1696,7 @@ export const generateReceipts = (
           }),
         },
         {
-          title: "Coins",
+          title: plur("Coin", details.coins.length),
           html: getCoinComponent(details.coins, assetInfos),
         },
         {
@@ -1721,7 +1725,7 @@ export const generateReceipts = (
           value: details.gauge_id,
         },
         {
-          title: "Rewards",
+          title: plur("Reward", details.rewards.length),
           html: getCoinComponent(details.rewards, assetInfos),
         },
       ];
@@ -1743,7 +1747,7 @@ export const generateReceipts = (
           value: details.duration,
         },
         {
-          title: "Coins",
+          title: plur("Coin", details.coins.length),
           html: getCoinComponent(details.coins, assetInfos),
         },
       ];
@@ -1778,7 +1782,7 @@ export const generateReceipts = (
           value: details.ID,
         },
         details.coins && {
-          title: "Coins",
+          title: plur("Coin", details.coins.length),
           html: getCoinComponent(details.coins, assetInfos),
         },
       ];
@@ -1854,7 +1858,7 @@ export const generateReceipts = (
           }),
         },
         {
-          title: "Coins",
+          title: plur("Coin", details.coins.length),
           html: getCoinComponent(details.coins, assetInfos),
         },
         validatorAddrReceipt(details.val_addr),
@@ -1993,7 +1997,7 @@ export const generateReceipts = (
           }),
         },
         {
-          title: "Hot Routes",
+          title: plur("Hot Route", details.hot_routes.length),
           html: getCommonReceiptHtml({
             type: "json",
             value: details.hot_routes,
@@ -2013,7 +2017,7 @@ export const generateReceipts = (
           }),
         },
         {
-          title: "Hot Routes",
+          title: plur("Hot Route", details.base_denoms.length),
           html: getCommonReceiptHtml({
             type: "json",
             value: details.base_denoms,
@@ -2128,7 +2132,7 @@ export const generateReceipts = (
           }),
         },
         {
-          title: "Preferences",
+          title: plur("Preference", details.preferences.length),
           html: getCommonReceiptHtml({
             type: "json",
             value: details.preferences,
diff --git a/yarn.lock b/yarn.lock
index 3c8e9740e..990bc78d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6523,6 +6523,11 @@ invariant@^2.2.4:
   dependencies:
     loose-envify "^1.0.0"
 
+irregular-plurals@^3.3.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/irregular-plurals/-/irregular-plurals-3.5.0.tgz#0835e6639aa8425bdc8b0d33d0dc4e89d9c01d2b"
+  integrity sha512-1ANGLZ+Nkv1ptFb2pa8oG8Lem4krflKuX/gINiHJHjJUKaJHk/SXk5x6K3J+39/p0h1RQ2saROclJJ+QLvETCQ==
+
 is-absolute@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/is-absolute/-/is-absolute-1.0.0.tgz"
@@ -8007,6 +8012,13 @@ pify@^3.0.0:
   resolved "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz"
   integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
 
+plur@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/plur/-/plur-5.1.0.tgz#bff58c9f557b9061d60d8ebf93959cf4b08594ae"
+  integrity sha512-VP/72JeXqak2KiOzjgKtQen5y3IZHn+9GOuLDafPv0eXa47xq0At93XahYBs26MsifCQ4enGKwbjBTKgb9QJXg==
+  dependencies:
+    irregular-plurals "^3.3.0"
+
 popmotion@11.0.5:
   version "11.0.5"
   resolved "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz"

From d78581e35ac40fa59fd99396d1ef066216700f5c Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 8 Jun 2023 11:35:41 +0700
Subject: [PATCH 212/354] chore: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e807f9e67..f10cdfd00 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -48,6 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#376](https://github.com/alleslabs/celatone-frontend/pull/376) Fix pluralize and capitalize
 - [#342](https://github.com/alleslabs/celatone-frontend/pull/342) Add fallback n/a token on asset icon on asset box
 - [#331](https://github.com/alleslabs/celatone-frontend/pull/331) Add validation check for builder in proposal to store code page
 - [#324](https://github.com/alleslabs/celatone-frontend/pull/324) Add deposit/voting period from gov params and add minimum required alert for proposal to store code

From d49ac0a7b286c52dc0ddc25c6015af20b4d27f0c Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 8 Jun 2023 15:23:52 +0700
Subject: [PATCH 213/354] fix: able to access txs tab when count query timeout,
 change tabs to lazy load mode

---
 CHANGELOG.md                                       |  1 +
 src/lib/model/account.ts                           |  5 ++++-
 .../account-details/components/tables/TxsTable.tsx | 14 ++++++++------
 src/lib/pages/account-details/index.tsx            |  5 +++--
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1bbccdc5..577232757 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -58,6 +58,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#379](https://github.com/alleslabs/celatone-frontend/pull/379) Able to access txs tab when count query timeout, change tabs to lazy load mode for better performance
 - [#375](https://github.com/alleslabs/celatone-frontend/pull/375) Fix incorrect display resolve height in proposals page
 - [#356](https://github.com/alleslabs/celatone-frontend/pull/356) Fix store code out of gas error by gzipping file before submitting tx
 - [#344](https://github.com/alleslabs/celatone-frontend/pull/344) Fix enable tx bug in proposal to store code
diff --git a/src/lib/model/account.ts b/src/lib/model/account.ts
index eb46a4090..5ec2b0c6b 100644
--- a/src/lib/model/account.ts
+++ b/src/lib/model/account.ts
@@ -26,7 +26,7 @@ export const useAccountDetailsTableCounts = (
     useInstantiatedCountByUserQuery(walletAddress);
   const { data: proposalsCount, refetch: refetchProposalsCount } =
     useProposalsCountByWalletAddress(walletAddress);
-  const { data: txsCount } = useTxsCountByAddress(
+  const { data: txsCount, isFetching: txCountFetching } = useTxsCountByAddress(
     undefined,
     accountId,
     "",
@@ -45,6 +45,9 @@ export const useAccountDetailsTableCounts = (
       proposalsCount,
       assetsCount,
     },
+    loadingState: {
+      txCountLoading: txCountFetching,
+    },
     refetchCodesCount,
     refetchContractsAdminCount,
     refetchContractsCount,
diff --git a/src/lib/pages/account-details/components/tables/TxsTable.tsx b/src/lib/pages/account-details/components/tables/TxsTable.tsx
index 2acf6bf22..21ccefea5 100644
--- a/src/lib/pages/account-details/components/tables/TxsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/TxsTable.tsx
@@ -52,7 +52,7 @@ export const TxsTable = ({
   const [filters, setFilters] = useState<TxFilters>(DEFAULT_TX_FILTERS);
 
   const {
-    data: txsCount = 0,
+    data: txsCount,
     refetch: refetchTxsCount,
     isLoading: txsCountLoading,
     failureReason,
@@ -119,7 +119,7 @@ export const TxsTable = ({
       <Flex direction="row" justify="space-between" alignItems="center">
         <TableTitle
           title="Transactions"
-          count={failureReason ? "N/A" : txsCount}
+          count={txsCount === undefined ? "N/A" : txsCount}
           mb={2}
         />
         {!onViewMore && (
@@ -167,11 +167,13 @@ export const TxsTable = ({
         }
         showRelations
       />
-      {!!txsCount &&
-        Boolean(transactions?.length) &&
+      {Boolean(transactions?.length) &&
         (onViewMore
-          ? txsCount > 5 && <ViewMore onClick={onViewMore} />
-          : txsCount > 10 && (
+          ? (txsCount === undefined || txsCount > 5) && (
+              <ViewMore onClick={onViewMore} />
+            )
+          : txsCount &&
+            txsCount > 10 && (
               <Pagination
                 currentPage={currentPage}
                 pagesQuantity={pagesQuantity}
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 1cc2c2a31..574ab863f 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -77,6 +77,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
     refetchContractsAdminCount,
     refetchContractsCount,
     refetchProposalsCount,
+    loadingState: { txCountLoading },
   } = useAccountDetailsTableCounts(accountAddress, accountId);
 
   const { totalAccountValue, isLoading } = useAccountTotalValue(accountAddress);
@@ -156,7 +157,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
         </Flex>
       )}
 
-      <Tabs index={tabIndex}>
+      <Tabs index={tabIndex} isLazy lazyBehavior="keepMounted">
         <TabList
           borderBottom="1px solid"
           borderColor="gray.700"
@@ -178,7 +179,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
           </CustomTab>
           <CustomTab
             count={tableCounts.txsCount}
-            isDisabled={!tableCounts.txsCount}
+            isDisabled={txCountLoading || tableCounts.txsCount === 0}
             onClick={() => handleTabChange(TabIndex.Txs)}
           >
             Transactions

From 2180b14b859fdd8a0f6448583cd217b58bc987c5 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 8 Jun 2023 11:36:58 +0700
Subject: [PATCH 214/354] feat: impl support local

---
 CHANGELOG.md                                  |  13 +
 codegen.ts                                    |   3 +
 src/config/index.ts                           | 137 +++++++++
 src/config/types.ts                           |  77 ++++++
 src/env.ts                                    | 126 +--------
 src/lib/app-fns/explorer/index.ts             |  40 ---
 src/lib/app-provider/contexts/app.tsx         | 226 +++++++--------
 src/lib/app-provider/hooks/index.ts           |   7 +-
 src/lib/app-provider/hooks/useAddress.ts      | 107 +++++---
 src/lib/app-provider/hooks/useBaseApiRoute.ts |  32 +++
 src/lib/app-provider/hooks/useCelatoneApp.ts  |  14 -
 src/lib/app-provider/hooks/useChainId.ts      |   8 -
 .../app-provider/hooks/useCurrentNetwork.ts   |  35 ---
 src/lib/app-provider/hooks/useFabricateFee.ts |  24 +-
 src/lib/app-provider/hooks/useFaucetConfig.ts |  11 +
 .../app-provider/hooks/useInternalNavigate.ts |   9 +-
 src/lib/app-provider/hooks/useLCDEndpoint.ts  |  10 +-
 .../app-provider/hooks/useNetworkChange.ts    |  57 ++--
 src/lib/app-provider/hooks/useRPCEndpoint.ts  |  10 +
 src/lib/app-provider/hooks/useSelectChain.ts  |  25 +-
 src/lib/app-provider/hooks/useWasmConfig.ts   |  17 ++
 src/lib/app-provider/queries/simulateFee.ts   |  21 +-
 src/lib/app-provider/query-client/index.ts    |  13 -
 src/lib/app-provider/tx/clearAdmin.ts         |  21 +-
 src/lib/app-provider/types.ts                 |   4 -
 src/lib/components/AddressInput.tsx           |   4 +-
 src/lib/components/AppLink.tsx                |  19 +-
 src/lib/components/ContractSelectSection.tsx  |   8 +-
 src/lib/components/ExplorerLink.tsx           |  25 +-
 src/lib/components/Meta.tsx                   |  21 +-
 src/lib/components/OffChainForm.tsx           | 107 ++++----
 src/lib/components/PermissionChip.tsx         |  17 +-
 src/lib/components/Seo.tsx                    |   8 +-
 src/lib/components/StickySidebar.tsx          |  38 +--
 src/lib/components/ValidatorBadge.tsx         |  12 +-
 src/lib/components/button/FaucetButton.tsx    |  12 +-
 .../components/button/InstantiateButton.tsx   |   9 +-
 .../components/button/NewProposalButton.tsx   |  19 +-
 src/lib/components/dropzone/index.tsx         |   7 +-
 src/lib/components/modal/CodeSnippet.tsx      |  46 ++--
 .../modal/UnsupportedTokensModal.tsx          |   7 +-
 .../modal/code/CodeDetailsTemplate.tsx        |   6 +-
 src/lib/components/modal/code/SaveNewCode.tsx |  19 +-
 .../modal/contract/SaveNewContract.tsx        |  13 +-
 .../components/modal/list/CreateNewList.tsx   |  18 +-
 .../components/modal/list/EditListName.tsx    |  20 +-
 .../select-contract/ContractListCard.tsx      |   4 +-
 .../SelectContractInstantiator.tsx            |  10 +-
 .../components/state/NetworkErrorState.tsx    |  66 +++++
 .../components/table/codes/CodeNameCell.tsx   |   5 +-
 .../table/contracts/ContractNameCell.tsx      |   5 +-
 src/lib/components/tx/modal/ButtonSection.tsx |  12 +-
 src/lib/components/upload/UploadSection.tsx   |  11 +-
 src/lib/components/upload/types.ts            |  11 +
 src/lib/data/chain.ts                         | 115 --------
 src/lib/data/constant.ts                      |  46 ----
 src/lib/data/index.ts                         |   1 -
 src/lib/data/proposalWhitelist.tsx            |   5 -
 src/lib/hooks/index.ts                        |   1 +
 src/lib/hooks/useCodeFilter.ts                |  10 +-
 src/lib/hooks/useGetMaxLengthError.ts         |  39 +++
 src/lib/hooks/useOpenTxTab.ts                 |  16 +-
 src/lib/hooks/useQueryCmds.ts                 |   6 +-
 src/lib/hooks/useSingleMessageProps.ts        |  96 +++----
 src/lib/layout/Header.tsx                     |  67 ++---
 src/lib/layout/Searchbar.tsx                  | 259 ++++++++++++------
 src/lib/layout/index.tsx                      |   8 +-
 src/lib/layout/navbar/index.tsx               |   4 +-
 src/lib/model/code.ts                         |   9 +-
 src/lib/model/contract.ts                     |  39 ++-
 src/lib/pages/admin/index.tsx                 |  13 +-
 src/lib/pages/block-details/index.tsx         |   4 +-
 src/lib/pages/code-details/index.tsx          |   4 +-
 src/lib/pages/codes/index.tsx                 |   3 +-
 src/lib/pages/contract-details/index.tsx      |   3 +-
 src/lib/pages/contract-list/index.tsx         |   3 +-
 src/lib/pages/contract-list/slug.tsx          |   3 +-
 src/lib/pages/deploy/index.tsx                |   4 +-
 src/lib/pages/execute/index.tsx               |   3 +-
 src/lib/pages/faucet/index.tsx                |  50 +++-
 src/lib/pages/home/index.tsx                  |   6 +-
 src/lib/pages/instantiate/index.tsx           |   2 +
 src/lib/pages/instantiate/instantiate.tsx     |  11 +-
 .../migrate/components/MigrateContract.tsx    |   7 +-
 src/lib/pages/migrate/index.tsx               |  10 +-
 .../components/PermissionlessAlert.tsx        |  16 ++
 .../proposal/components/TestnetAlert.tsx      |  30 --
 src/lib/pages/proposal/constants.tsx          | 205 +++++++-------
 src/lib/pages/proposal/whitelist/index.tsx    |  40 +--
 src/lib/pages/proposals/index.tsx             |   8 +-
 .../proposals/table/ProposalTableRow.tsx      |  18 +-
 .../table/code/PublicProjectCodeRow.tsx       |  10 +-
 .../contract/PublicProjectContractRow.tsx     |  10 +-
 src/lib/pages/public-project/index.tsx        |   2 +
 src/lib/pages/query/components/QueryArea.tsx  |   7 +-
 src/lib/pages/query/index.tsx                 |  13 +-
 src/lib/pages/txs/components/TxsTable.tsx     |   6 +-
 src/lib/pages/upload/index.tsx                |   4 +-
 src/lib/services/account.ts                   |  17 +-
 src/lib/services/accountService.ts            |  27 +-
 src/lib/services/asset.ts                     |  23 +-
 src/lib/services/assetService.ts              |  19 +-
 src/lib/services/blockService.ts              |  25 +-
 src/lib/services/code.ts                      |   4 +-
 src/lib/services/codeService.ts               |  10 +-
 src/lib/services/contract.ts                  |  16 +-
 src/lib/services/delegationService.ts         |  58 ++--
 src/lib/services/publicProjectService.ts      |  73 ++---
 src/lib/services/searchService.ts             |  85 ++++++
 src/lib/services/tx.ts                        |  10 +-
 src/lib/services/txService.ts                 |  15 +-
 src/lib/services/validatorService.ts          |   9 +-
 src/lib/utils/codePermission.ts               |  11 +-
 src/lib/utils/icon.ts                         |  13 +
 src/lib/utils/index.ts                        |   1 +
 src/lib/utils/validate.ts                     |  11 +-
 src/pages/[network]/404.tsx                   |   3 +
 src/pages/_app.tsx                            |  46 ++--
 src/types.ts                                  |  14 -
 119 files changed, 1768 insertions(+), 1544 deletions(-)
 create mode 100644 src/config/index.ts
 create mode 100644 src/config/types.ts
 delete mode 100644 src/lib/app-fns/explorer/index.ts
 create mode 100644 src/lib/app-provider/hooks/useBaseApiRoute.ts
 delete mode 100644 src/lib/app-provider/hooks/useCelatoneApp.ts
 delete mode 100644 src/lib/app-provider/hooks/useChainId.ts
 delete mode 100644 src/lib/app-provider/hooks/useCurrentNetwork.ts
 create mode 100644 src/lib/app-provider/hooks/useFaucetConfig.ts
 create mode 100644 src/lib/app-provider/hooks/useRPCEndpoint.ts
 create mode 100644 src/lib/app-provider/hooks/useWasmConfig.ts
 delete mode 100644 src/lib/app-provider/query-client/index.ts
 delete mode 100644 src/lib/app-provider/types.ts
 create mode 100644 src/lib/components/state/NetworkErrorState.tsx
 create mode 100644 src/lib/components/upload/types.ts
 delete mode 100644 src/lib/data/chain.ts
 delete mode 100644 src/lib/data/proposalWhitelist.tsx
 create mode 100644 src/lib/hooks/useGetMaxLengthError.ts
 create mode 100644 src/lib/pages/proposal/components/PermissionlessAlert.tsx
 delete mode 100644 src/lib/pages/proposal/components/TestnetAlert.tsx
 create mode 100644 src/lib/services/searchService.ts
 create mode 100644 src/lib/utils/icon.ts
 create mode 100644 src/pages/[network]/404.tsx
 delete mode 100644 src/types.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1bbccdc5..63277649b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#363](https://github.com/alleslabs/celatone-frontend/pull/363) Add config not found page and rewrite network logic
+- [#343](https://github.com/alleslabs/celatone-frontend/pull/343) Apply fetching mechanism and keyboard arrow navigation to searchbar
 - [#372](https://github.com/alleslabs/celatone-frontend/pull/372) Add code hash to code details and upload section
 - [#329](https://github.com/alleslabs/celatone-frontend/pull/329) Add allowed user to store code flow
 - [#321](https://github.com/alleslabs/celatone-frontend/pull/321) Add amplitude to proposal to store code page
@@ -48,6 +50,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#374](https://github.com/alleslabs/celatone-frontend/pull/374) Remove testnet, mainnet concepts and use permission from params
+- [#369](https://github.com/alleslabs/celatone-frontend/pull/369) Implement Wasm feature from config
+- [#359](https://github.com/alleslabs/celatone-frontend/pull/359) Remove hardcode constant (length) and use from config
+- [#367](https://github.com/alleslabs/celatone-frontend/pull/367) Update osmosis testnet 5 config and use explorer url from config instead
+- [#368](https://github.com/alleslabs/celatone-frontend/pull/368) Use chain name from config for Meta instead of env variable
+- [#336](https://github.com/alleslabs/celatone-frontend/pull/336) Get address type length from example addresses instead of hardcode
+- [#354](https://github.com/alleslabs/celatone-frontend/pull/354) Remove useChainId and use currentChainId from config
+- [#338](https://github.com/alleslabs/celatone-frontend/pull/338) Use gas from chain config
+- [#333](https://github.com/alleslabs/celatone-frontend/pull/333) Update endpoints including LCD, RPC, Graphql
+- [#335](https://github.com/alleslabs/celatone-frontend/pull/335) Refactor hardcoded api route to utils
 - [#371](https://github.com/alleslabs/celatone-frontend/pull/371) Refactor assign me component and fix color in redelegation page
 - [#342](https://github.com/alleslabs/celatone-frontend/pull/342) Add fallback n/a token on asset icon on asset box
 - [#331](https://github.com/alleslabs/celatone-frontend/pull/331) Add validation check for builder in proposal to store code page
@@ -188,6 +200,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#341](https://github.com/alleslabs/celatone-frontend/pull/341) Apply faucet info from chain config
 - [#234](https://github.com/alleslabs/celatone-frontend/pull/234) Fix faucet wording
 - [#216](https://github.com/alleslabs/celatone-frontend/pull/216) Change icon to Alles Labs icon set
 - [#227](https://github.com/alleslabs/celatone-frontend/pull/227) Refactor directory structure and components e.g. various tables
diff --git a/codegen.ts b/codegen.ts
index 60fe0f917..e700ca716 100644
--- a/codegen.ts
+++ b/codegen.ts
@@ -1,5 +1,8 @@
 import type { CodegenConfig } from "@graphql-codegen/cli";
 
+/**
+ * @remarks Update schema when it is needed
+ */
 const config: CodegenConfig = {
   schema: "https://osmo-test-5-graphql.alleslabs.dev/v1/graphql",
   documents: ["src/**/*.tsx", "src/**/*.ts"],
diff --git a/src/config/index.ts b/src/config/index.ts
new file mode 100644
index 000000000..7a75e9066
--- /dev/null
+++ b/src/config/index.ts
@@ -0,0 +1,137 @@
+import type { ContractAddr, HumanAddr, ValidatorAddr } from "lib/types";
+
+import type { ChainConfig, ChainConfigs, ProjectConstants } from "./types";
+
+export const DEFAULT_CHAIN_CONFIG: ChainConfig = {
+  chain: "",
+  registryChainName: "",
+  prettyName: "",
+  lcd: "",
+  rpc: "",
+  indexer: "",
+  api: "",
+  features: {
+    faucet: {
+      enabled: false,
+    },
+    wasm: {
+      enabled: false,
+    },
+    pool: {
+      enabled: false,
+    },
+  },
+  gas: {
+    gasPrice: {
+      tokenPerGas: 0,
+      denom: "",
+    },
+    gasAdjustment: 1.0,
+    maxGasLimit: 0,
+  },
+  exampleAddresses: {
+    user: "" as HumanAddr,
+    contract: "" as ContractAddr,
+    validator: "" as ValidatorAddr,
+  },
+  explorerLink: {
+    validator: "",
+    proposal: "",
+  },
+};
+
+export const CHAIN_CONFIGS: ChainConfigs = {
+  "osmosis-1": {
+    chain: "osmosis",
+    registryChainName: "osmosis",
+    prettyName: "Osmosis",
+    lcd: "https://lcd.osmosis.zone",
+    rpc: "https://rpc.osmosis.zone",
+    indexer: "https://osmosis-mainnet-graphql.alleslabs.dev/v1/graphql",
+    api: "https://celatone-api.alleslabs.dev",
+    features: {
+      faucet: {
+        enabled: false,
+      },
+      wasm: {
+        enabled: true,
+        storeCodeMaxFileSize: 800_000,
+        clearAdminGas: 50_000,
+      },
+      pool: {
+        enabled: true,
+      },
+    },
+    gas: {
+      gasPrice: {
+        tokenPerGas: 0.025,
+        denom: "uosmo",
+      },
+      gasAdjustment: 1.5,
+      maxGasLimit: 25_000_000,
+    },
+    exampleAddresses: {
+      user: "osmo14wk9zecqam9jsac7xwtf8e349ckquzzlx9k8c3" as HumanAddr,
+      contract:
+        "osmo1p0pxllmqjgl2tefy7grypt34jdpdltg3ka98n8unnl322wqps7lqtu576h" as ContractAddr,
+      validator:
+        "osmovaloper1hh0g5xf23e5zekg45cmerc97hs4n2004dy2t26" as ValidatorAddr,
+    },
+    explorerLink: {
+      validator: "https://www.mintscan.io/osmosis/validators",
+      proposal: "https://www.mintscan.io/osmosis/proposals",
+    },
+  },
+  "osmo-test-5": {
+    chain: "osmosis",
+    registryChainName: "osmosistestnet",
+    prettyName: "Osmosis Testnet",
+    lcd: "https://lcd.osmotest5.osmosis.zone",
+    rpc: "https://rpc.osmotest5.osmosis.zone",
+    indexer: "https://osmo-test-5-graphql.alleslabs.dev/v1/graphql",
+    api: "https://celatone-api.alleslabs.dev",
+    features: {
+      faucet: {
+        enabled: true,
+        url: "https://faucet.alleslabs.dev",
+        denom: "osmo",
+        amount: 10,
+      },
+      wasm: {
+        enabled: true,
+        storeCodeMaxFileSize: 800_000,
+        clearAdminGas: 50_000,
+      },
+      pool: {
+        enabled: true,
+      },
+    },
+    gas: {
+      gasPrice: {
+        tokenPerGas: 0.025,
+        denom: "uosmo",
+      },
+      gasAdjustment: 1.5,
+      maxGasLimit: 25_000_000,
+    },
+    exampleAddresses: {
+      user: "osmo14wk9zecqam9jsac7xwtf8e349ckquzzlx9k8c3" as HumanAddr,
+      contract:
+        "osmo1p0pxllmqjgl2tefy7grypt34jdpdltg3ka98n8unnl322wqps7lqtu576h" as ContractAddr,
+      validator:
+        "osmovaloper1hh0g5xf23e5zekg45cmerc97hs4n2004dy2t26" as ValidatorAddr,
+    },
+    explorerLink: {
+      validator: "https://testnet.mintscan.io/osmosis-testnet/validators",
+      proposal: "https://testnet.mintscan.io/osmosis-testnet/proposals",
+    },
+  },
+};
+
+export const PROJECT_CONSTANTS: ProjectConstants = {
+  maxListNameLength: 50,
+  maxContractNameLength: 50,
+  maxContractDescriptionLength: 250,
+  maxCodeNameLength: 50,
+  maxProposalTitleLength: 255,
+};
diff --git a/src/config/types.ts b/src/config/types.ts
new file mode 100644
index 000000000..60d4031bf
--- /dev/null
+++ b/src/config/types.ts
@@ -0,0 +1,77 @@
+import type { HumanAddr, ValidatorAddr, ContractAddr } from "lib/types";
+
+type FaucetConfig =
+  | {
+      enabled: true;
+      url: string;
+      denom: string;
+      amount: number;
+    }
+  | { enabled: false };
+
+type WasmConfig =
+  | {
+      enabled: true;
+      storeCodeMaxFileSize: number;
+      clearAdminGas: number;
+    }
+  | {
+      enabled: false;
+    };
+
+type PoolConfig =
+  | {
+      enabled: true;
+    }
+  | {
+      enabled: false;
+    };
+
+export interface ExplorerConfig {
+  validator: string;
+  proposal: string;
+}
+
+export interface ChainConfig {
+  chain: string;
+  registryChainName: string;
+  prettyName: string;
+  lcd: string;
+  rpc: string;
+  indexer: string;
+  api: string;
+  features: {
+    faucet: FaucetConfig;
+    wasm: WasmConfig;
+    pool: PoolConfig;
+  };
+  gas: {
+    gasPrice: {
+      tokenPerGas: number;
+      denom: string;
+    };
+    gasAdjustment: number;
+    maxGasLimit: number;
+  };
+  exampleAddresses: {
+    user: HumanAddr;
+    validator: ValidatorAddr;
+    contract: ContractAddr;
+  };
+  explorerLink: ExplorerConfig;
+}
+
+export interface ChainConfigs {
+  [chainId: string]: ChainConfig;
+}
+
+export interface ProjectConstants {
+  // wasm
+  maxListNameLength: number;
+  maxContractNameLength: number;
+  maxContractDescriptionLength: number;
+  maxCodeNameLength: number;
+
+  // proposal
+  maxProposalTitleLength: number;
+}
diff --git a/src/env.ts b/src/env.ts
index e2d635567..36675f879 100644
--- a/src/env.ts
+++ b/src/env.ts
@@ -1,125 +1,23 @@
 import { DEFAULT_THEME, OSMOSIS_THEME } from "config/theme";
-import type { SupportedChain } from "lib/data";
-import type {
-  ContractAddr,
-  ChainGasPrice,
-  Token,
-  U,
-  HumanAddr,
-} from "lib/types";
-import type {
-  CelatoneConstants,
-  CelatoneContractAddress,
-  CelatoneHumanAddress,
-} from "types";
 
-export const CELATONE_FALLBACK_GAS_PRICE: Record<string, ChainGasPrice> = {
-  osmosistestnet5: {
-    denom: "uosmo",
-    gasPrice: "0.025" as U<Token>,
-  },
-  terra2: {
-    denom: "uluna",
-    gasPrice: "0.015" as U<Token>,
-  },
-  terra2testnet: {
-    denom: "uluna",
-    gasPrice: "0.15" as U<Token>,
-  },
-};
+export const SUPPORTED_CHAIN_IDS: string[] = (() => {
+  const chainIds = process.env.NEXT_PUBLIC_SUPPORTED_CHAIN_IDS?.split(",");
+  if (!chainIds)
+    throw new Error("NEXT_PUBLIC_SUPPORTED_CHAIN_IDS is undefined");
 
-export const CELATONE_APP_CONTRACT_ADDRESS = (
-  chainName: string
-): CelatoneContractAddress => {
-  switch (chainName) {
-    case "osmosis":
-    case "osmosistestnet5":
-      return {
-        example:
-          "osmo1p0pxllmqjgl2tefy7grypt34jdpdltg3ka98n8unnl322wqps7lqtu576h" as ContractAddr,
-      };
-    case "terra2":
-    case "terra2testnet":
-      return {
-        example:
-          "terra1k5arpcpusfrtnucr5q8f5uh5twghh3q360hv4j6fe0hvzn7x8skqempu76" as ContractAddr,
-      };
-    default:
-      return {
-        example: "" as ContractAddr,
-      };
-  }
-};
+  if (chainIds[0].trim().length === 0)
+    throw new Error(
+      "NEXT_PUBLIC_SUPPORTED_CHAIN_IDS is not valid. Please include at least one chain identifier. For instance, NEXT_PUBLIC_SUPPORTED_CHAIN_IDS=osmo-test-5"
+    );
 
-export const CELATONE_APP_HUMAN_ADDRESS = (
-  chainName: string
-): CelatoneHumanAddress => {
-  switch (chainName) {
-    case "osmosis":
-    case "osmosistestnet5":
-      return {
-        example: "osmo14wk9zecqam9jsac7xwtf8e349ckquzzlx9k8c3" as HumanAddr,
-      };
-    case "terra2":
-    case "terra2testnet":
-      return {
-        example: "terra1dtdqq3sn8c6y6sjvtf4340aycv2g6x6pp5tkln" as HumanAddr,
-      };
-    default:
-      return {
-        example: "" as HumanAddr,
-      };
-  }
-};
-
-export const FALLBACK_LCD_ENDPOINT: Record<string, string> = {
-  osmosis: "https://lcd.osmosis.zone/",
-  osmosistestnet5: "https://lcd.osmotest5.osmosis.zone/",
-  terra2: "https://phoenix-lcd.terra.dev/",
-  terra2testnet: "https://pisco-lcd.terra.dev/",
-};
-
-export const MAX_FILE_SIZE = 800_000;
+  return chainIds;
+})();
 
-export const CELATONE_CONSTANTS: CelatoneConstants = {
-  gasAdjustment: 1.6,
-  maxGasLimit: 25_000_000,
-  maxFileSize: MAX_FILE_SIZE,
-};
+// Remark: We've already checked that the first element is not empty on the above code
+export const DEFAULT_SUPPORTED_CHAIN_ID = SUPPORTED_CHAIN_IDS[0];
 
 export const DUMMY_MNEMONIC = process.env.NEXT_PUBLIC_DUMMY_MNEMONIC;
 
-export const SELECTED_CHAIN = process.env
-  .NEXT_PUBLIC_SELECTED_CHAIN as SupportedChain;
-
-export const CELATONE_API_ENDPOINT = "https://celatone-api.alleslabs.dev";
-
-export const getChainApiPath = (chainName: string) => {
-  switch (chainName) {
-    case "osmosistestnet5":
-    case "osmosis":
-      return "osmosis";
-    case "terra2":
-    case "terra2testnet":
-      return "terra";
-    default:
-      return undefined;
-  }
-};
-// TODO to handle testnet separately later
-export const getMainnetApiPath = (chainId: string) => {
-  switch (chainId) {
-    case "osmo-test-4":
-    case "osmosis-1":
-      return "osmosis-1";
-    case "pisco-1":
-    case "phoenix-1":
-      return "phoenix-1";
-    default:
-      return undefined;
-  }
-};
-
 // CURRENT THEME CONFIG
 export const CURR_THEME = (() => {
   switch (process.env.NEXT_PUBLIC_THEME) {
diff --git a/src/lib/app-fns/explorer/index.ts b/src/lib/app-fns/explorer/index.ts
deleted file mode 100644
index d17f1397d..000000000
--- a/src/lib/app-fns/explorer/index.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-export const explorerMap: Record<string, string> = {
-  osmosis: "https://www.mintscan.io/osmosis",
-  osmosistestnet5: "https://testnet.mintscan.io/osmosis-testnet",
-  terra2: "https://terrasco.pe/mainnet",
-  terra2testnet: "https://terrasco.pe/testnet",
-};
-
-export const getExplorerProposalUrl = (chainName: string) => {
-  let pathSuffix = "";
-  switch (chainName) {
-    case "osmosis":
-    case "osmosistestnet5":
-      pathSuffix = "proposals";
-      break;
-    case "terra2":
-      return "https://station.terra.money/proposal/phoenix-1";
-    case "terra2testnet":
-      return "https://station.terra.money/proposal/pisco-1";
-    default:
-      break;
-  }
-  return `${explorerMap[chainName]}/${pathSuffix}`;
-};
-
-export const getExplorerValidatorUrl = (chainName: string) => {
-  let pathSuffix = "";
-  switch (chainName) {
-    case "osmosis":
-    case "osmosistestnet5":
-      pathSuffix = "validators";
-      break;
-    case "terra2":
-    case "terra2testnet":
-      pathSuffix = "validator";
-      break;
-    default:
-      break;
-  }
-  return `${explorerMap[chainName]}/${pathSuffix}`;
-};
diff --git a/src/lib/app-provider/contexts/app.tsx b/src/lib/app-provider/contexts/app.tsx
index f76604bae..ebdaf9d4b 100644
--- a/src/lib/app-provider/contexts/app.tsx
+++ b/src/lib/app-provider/contexts/app.tsx
@@ -1,156 +1,122 @@
 import { useWallet } from "@cosmos-kit/react";
-import big from "big.js";
 import { GraphQLClient } from "graphql-request";
 import { observer } from "mobx-react-lite";
 import type { ReactNode } from "react";
-import { useEffect, useContext, useMemo, createContext } from "react";
+import {
+  useCallback,
+  useState,
+  useEffect,
+  useContext,
+  useMemo,
+  createContext,
+} from "react";
 
 import { useAmplitude } from "../hooks/useAmplitude";
 import { useNetworkChange } from "../hooks/useNetworkChange";
-import { getIndexerGraphClient } from "../query-client";
-import type { AppConstants } from "../types";
+import { CHAIN_CONFIGS, DEFAULT_CHAIN_CONFIG, PROJECT_CONSTANTS } from "config";
+import type { ChainConfig, ProjectConstants } from "config/types";
+import { SUPPORTED_CHAIN_IDS } from "env";
 import { LoadingOverlay } from "lib/components/LoadingOverlay";
+import { NetworkErrorState } from "lib/components/state/NetworkErrorState";
 import { DEFAULT_ADDRESS } from "lib/data";
 import {
   useCodeStore,
   useContractStore,
   usePublicProjectStore,
 } from "lib/providers/store";
-import type { ChainGasPrice, Token, U } from "lib/types";
 import { formatUserKey } from "lib/utils";
 
-interface AppProviderProps<
-  AppContractAddress,
-  AppHumanAddress,
-  Constants extends AppConstants
-> {
+interface AppProviderProps {
   children: ReactNode;
-
-  fallbackGasPrice: Record<string, ChainGasPrice>;
-
-  appContractAddressMap: (currentChainName: string) => AppContractAddress;
-  appHumanAddressMap: (currentChainName: string) => AppHumanAddress;
-
-  constants: Constants;
 }
 
-interface AppContextInterface<
-  ContractAddress,
-  HumanAddress,
-  Constants extends AppConstants = AppConstants
-> {
-  chainGasPrice: ChainGasPrice;
-  appContractAddress: ContractAddress;
-  appHumanAddress: HumanAddress;
-  constants: Constants;
+interface AppContextInterface {
+  availableChainIds: string[];
+  currentChainId: string;
+  chainConfig: ChainConfig;
   indexerGraphClient: GraphQLClient;
+  constants: ProjectConstants;
+  handleOnChainIdChange: (newChainId: string) => void;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const AppContext = createContext<AppContextInterface<any, any, any>>({
-  chainGasPrice: { denom: "", gasPrice: "0" as U<Token> },
-  appContractAddress: {},
-  appHumanAddress: {},
-  constants: { gasAdjustment: 0 },
-  indexerGraphClient: new GraphQLClient(""),
+const AppContext = createContext<AppContextInterface>({
+  availableChainIds: [],
+  currentChainId: "",
+  chainConfig: DEFAULT_CHAIN_CONFIG,
+  indexerGraphClient: new GraphQLClient(DEFAULT_CHAIN_CONFIG.indexer),
+  constants: PROJECT_CONSTANTS,
+  handleOnChainIdChange: () => {},
+});
+
+export const AppProvider = observer(({ children }: AppProviderProps) => {
+  const { currentChainName, setCurrentChain } = useWallet();
+
+  const { setCodeUserKey, isCodeUserKeyExist } = useCodeStore();
+  const { setContractUserKey, isContractUserKeyExist } = useContractStore();
+  const { setProjectUserKey, isProjectUserKeyExist } = usePublicProjectStore();
+
+  const [currentChainId, setCurrentChainId] = useState("");
+
+  // Remark: this function is only used in useSelectChain. Do not use in other places.
+  const handleOnChainIdChange = useCallback(
+    (newChainId: string) => {
+      const config = CHAIN_CONFIGS[newChainId];
+      setCurrentChainId(newChainId);
+      setCurrentChain(config?.registryChainName);
+    },
+    [setCurrentChain, setCurrentChainId]
+  );
+
+  const states = useMemo<AppContextInterface>(() => {
+    const chainConfig = CHAIN_CONFIGS[currentChainId] ?? DEFAULT_CHAIN_CONFIG;
+
+    return {
+      availableChainIds: SUPPORTED_CHAIN_IDS,
+      currentChainId,
+      chainConfig,
+      indexerGraphClient: new GraphQLClient(chainConfig.indexer),
+      constants: PROJECT_CONSTANTS,
+      handleOnChainIdChange,
+    };
+  }, [currentChainId, handleOnChainIdChange]);
+
+  useEffect(() => {
+    if (currentChainName) {
+      const userKey = formatUserKey(currentChainName, DEFAULT_ADDRESS);
+      setCodeUserKey(userKey);
+      setContractUserKey(userKey);
+      setProjectUserKey(userKey);
+    }
+  }, [currentChainName, setCodeUserKey, setContractUserKey, setProjectUserKey]);
+
+  // Disable "Leave page" alert
+  useEffect(() => {
+    const handler = (e: BeforeUnloadEvent) => {
+      e.stopImmediatePropagation();
+    };
+
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+  }, []);
+
+  useNetworkChange(handleOnChainIdChange);
+
+  useAmplitude();
+
+  if (currentChainId && !(currentChainId in CHAIN_CONFIGS))
+    return <NetworkErrorState />;
+
+  if (
+    !isCodeUserKeyExist() ||
+    !isContractUserKeyExist() ||
+    !isProjectUserKeyExist() ||
+    !currentChainId
+  )
+    return <LoadingOverlay />;
+
+  return <AppContext.Provider value={states}>{children}</AppContext.Provider>;
 });
 
-export const AppProvider = observer(
-  <ContractAddress, HumanAddress, Constants extends AppConstants>({
-    children,
-    fallbackGasPrice,
-    appContractAddressMap,
-    appHumanAddressMap,
-    constants,
-  }: AppProviderProps<ContractAddress, HumanAddress, Constants>) => {
-    const { currentChainName, currentChainRecord } = useWallet();
-    const { setCodeUserKey, isCodeUserKeyExist } = useCodeStore();
-    const { setContractUserKey, isContractUserKeyExist } = useContractStore();
-    const { setProjectUserKey, isProjectUserKeyExist } =
-      usePublicProjectStore();
-
-    useEffect(() => {
-      const handler = (e: BeforeUnloadEvent) => {
-        e.stopImmediatePropagation();
-      };
-
-      window.addEventListener("beforeunload", handler);
-      return () => window.removeEventListener("beforeunload", handler);
-    }, []);
-
-    const chainGasPrice = useMemo(() => {
-      if (
-        !currentChainRecord ||
-        !currentChainRecord.chain.fees ||
-        !currentChainRecord.chain.fees.fee_tokens[0].average_gas_price
-      )
-        return fallbackGasPrice[currentChainName];
-      return {
-        denom: currentChainRecord.chain.fees?.fee_tokens[0].denom as string,
-        gasPrice: big(
-          currentChainRecord.chain.fees?.fee_tokens[0].average_gas_price ?? "0"
-        ).toFixed() as U<Token>,
-      };
-    }, [currentChainName, currentChainRecord, fallbackGasPrice]);
-
-    const chainBoundStates = useMemo(() => {
-      return {
-        indexerGraphClient: getIndexerGraphClient(currentChainName),
-      };
-    }, [currentChainName]);
-
-    const states = useMemo<
-      AppContextInterface<ContractAddress, HumanAddress, Constants>
-    >(
-      () => ({
-        chainGasPrice,
-        appContractAddress: appContractAddressMap(currentChainName),
-        appHumanAddress: appHumanAddressMap(currentChainName),
-        constants,
-        ...chainBoundStates,
-      }),
-      [
-        chainGasPrice,
-        appContractAddressMap,
-        currentChainName,
-        appHumanAddressMap,
-        constants,
-        chainBoundStates,
-      ]
-    );
-
-    useEffect(() => {
-      if (currentChainName) {
-        const userKey = formatUserKey(currentChainName, DEFAULT_ADDRESS);
-        setCodeUserKey(userKey);
-        setContractUserKey(userKey);
-        setProjectUserKey(userKey);
-      }
-    }, [
-      currentChainName,
-      setCodeUserKey,
-      setContractUserKey,
-      setProjectUserKey,
-    ]);
-
-    useNetworkChange();
-
-    useAmplitude();
-
-    return isCodeUserKeyExist() &&
-      isContractUserKeyExist() &&
-      isProjectUserKeyExist() ? (
-      <AppContext.Provider value={states}>{children}</AppContext.Provider>
-    ) : (
-      <LoadingOverlay />
-    );
-  }
-);
-
-export const useApp = <
-  ContractAddress,
-  HumanAddress,
-  Constants extends AppConstants
->(): AppContextInterface<ContractAddress, HumanAddress, Constants> => {
+export const useCelatoneApp = (): AppContextInterface => {
   return useContext(AppContext);
 };
diff --git a/src/lib/app-provider/hooks/index.ts b/src/lib/app-provider/hooks/index.ts
index b3557c30d..5fada7e70 100644
--- a/src/lib/app-provider/hooks/index.ts
+++ b/src/lib/app-provider/hooks/index.ts
@@ -1,7 +1,5 @@
 export * from "./useAddress";
 export * from "./useAmplitude";
-export * from "./useCelatoneApp";
-export * from "./useChainId";
 export * from "./useDummyWallet";
 export * from "./useFabricateFee";
 export * from "./useInternalNavigate";
@@ -12,5 +10,8 @@ export * from "./useRestrictedInput";
 export * from "./useSelectChain";
 export * from "./useSimulateFee";
 export * from "./useTokensInfo";
-export * from "./useCurrentNetwork";
 export * from "./useChainRecordAsset";
+export * from "./useBaseApiRoute";
+export * from "./useRPCEndpoint";
+export * from "./useFaucetConfig";
+export * from "./useWasmConfig";
diff --git a/src/lib/app-provider/hooks/useAddress.ts b/src/lib/app-provider/hooks/useAddress.ts
index 0dfb996cd..319bee68a 100644
--- a/src/lib/app-provider/hooks/useAddress.ts
+++ b/src/lib/app-provider/hooks/useAddress.ts
@@ -1,8 +1,9 @@
 import { fromBech32 } from "@cosmjs/encoding";
 import type { ChainRecord } from "@cosmos-kit/core";
 import { useWallet } from "@cosmos-kit/react";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 
+import { useCelatoneApp } from "../contexts";
 import type { Option } from "lib/types";
 
 export type AddressReturnType =
@@ -11,38 +12,35 @@ export type AddressReturnType =
   | "validator_address"
   | "invalid_address";
 
-const addressLengthMap: {
-  [key: string]: { [length: number]: AddressReturnType };
-} = {
-  osmosis: {
-    43: "user_address",
-    50: "validator_address",
-    63: "contract_address",
-  },
-  osmosistestnet5: {
-    43: "user_address",
-    50: "validator_address",
-    63: "contract_address",
-  },
-  terra2: {
-    44: "user_address",
-    51: "validator_address",
-    64: "contract_address",
-  },
-  terra2testnet: {
-    44: "user_address",
-    51: "validator_address",
-    64: "contract_address",
-  },
+export const useGetAddressTypeByLength = () => {
+  const {
+    chainConfig: { exampleAddresses },
+  } = useCelatoneApp();
+  const addressLengthMap = useMemo(
+    () =>
+      Object.entries(exampleAddresses).reduce<{
+        [key: number]: AddressReturnType;
+      }>(
+        (acc, curr) => ({
+          ...acc,
+          [curr[1].length]: `${curr[0]}_address` as AddressReturnType,
+        }),
+        {}
+      ),
+    [exampleAddresses]
+  );
+  return useCallback(
+    (address: Option<string>): AddressReturnType =>
+      address
+        ? addressLengthMap[address.length] ?? "invalid_address"
+        : "invalid_address",
+    [addressLengthMap]
+  );
 };
 
-export const getAddressTypeByLength = (
-  chainName: string,
-  address: Option<string>
-): AddressReturnType =>
-  address
-    ? addressLengthMap[chainName]?.[address.length] ?? "invalid_address"
-    : "invalid_address";
+export type GetAddressTypeByLengthFn = ReturnType<
+  typeof useGetAddressTypeByLength
+>;
 
 const getPrefix = (basePrefix: string, addressType: AddressReturnType) => {
   if (addressType === "validator_address") return `${basePrefix}valoper`;
@@ -52,7 +50,8 @@ const getPrefix = (basePrefix: string, addressType: AddressReturnType) => {
 const validateAddress = (
   currentChainRecord: ChainRecord | undefined,
   address: string,
-  addressType: AddressReturnType
+  addressType: AddressReturnType,
+  getAddressTypeByLength: GetAddressTypeByLengthFn
 ) => {
   if (!currentChainRecord) return "Invalid network";
 
@@ -61,7 +60,7 @@ const validateAddress = (
   if (!address.startsWith(prefix))
     return `Invalid prefix (expected "${prefix}")`;
 
-  if (getAddressTypeByLength(currentChainRecord.name, address) !== addressType)
+  if (getAddressTypeByLength(address) !== addressType)
     return "Invalid address length";
 
   try {
@@ -73,41 +72,63 @@ const validateAddress = (
 };
 
 export const useGetAddressType = () => {
-  const { currentChainName, currentChainRecord } = useWallet();
+  const { currentChainRecord } = useWallet();
+  const getAddressTypeByLength = useGetAddressTypeByLength();
   return useCallback(
     (address: Option<string>): AddressReturnType => {
-      const addressType = getAddressTypeByLength(currentChainName, address);
+      const addressType = getAddressTypeByLength(address);
       if (
         !address ||
         addressType === "invalid_address" ||
-        validateAddress(currentChainRecord, address, addressType)
+        validateAddress(
+          currentChainRecord,
+          address,
+          addressType,
+          getAddressTypeByLength
+        )
       )
         return "invalid_address";
       return addressType;
     },
-    [currentChainName, currentChainRecord]
+    [currentChainRecord, getAddressTypeByLength]
   );
 };
 
 // TODO: refactor
 export const useValidateAddress = () => {
   const { currentChainRecord } = useWallet();
+  const getAddressTypeByLength = useGetAddressTypeByLength();
 
   return {
     validateContractAddress: useCallback(
       (address: string) =>
-        validateAddress(currentChainRecord, address, "contract_address"),
-      [currentChainRecord]
+        validateAddress(
+          currentChainRecord,
+          address,
+          "contract_address",
+          getAddressTypeByLength
+        ),
+      [currentChainRecord, getAddressTypeByLength]
     ),
     validateUserAddress: useCallback(
       (address: string) =>
-        validateAddress(currentChainRecord, address, "user_address"),
-      [currentChainRecord]
+        validateAddress(
+          currentChainRecord,
+          address,
+          "user_address",
+          getAddressTypeByLength
+        ),
+      [currentChainRecord, getAddressTypeByLength]
     ),
     validateValidatorAddress: useCallback(
       (address: string) =>
-        validateAddress(currentChainRecord, address, "validator_address"),
-      [currentChainRecord]
+        validateAddress(
+          currentChainRecord,
+          address,
+          "validator_address",
+          getAddressTypeByLength
+        ),
+      [currentChainRecord, getAddressTypeByLength]
     ),
   };
 };
diff --git a/src/lib/app-provider/hooks/useBaseApiRoute.ts b/src/lib/app-provider/hooks/useBaseApiRoute.ts
new file mode 100644
index 000000000..11e049d13
--- /dev/null
+++ b/src/lib/app-provider/hooks/useBaseApiRoute.ts
@@ -0,0 +1,32 @@
+import { useCelatoneApp } from "../contexts";
+
+export const useBaseApiRoute = (
+  type: "txs" | "balances" | "assets" | "projects" | "contracts" | "codes"
+): string => {
+  const {
+    chainConfig: { chain, api },
+    currentChainId,
+  } = useCelatoneApp();
+  if (!chain || !api || !currentChainId)
+    throw new Error(
+      "Error retrieving chain, api, or currentChainId from chain config."
+    );
+  switch (type) {
+    case "txs":
+      return `${api}/txs/${chain}/${currentChainId}`;
+    case "balances":
+      return `${api}/balances/${chain}/${currentChainId}`;
+    case "assets":
+      return `${api}/assets/${chain}/${currentChainId}`;
+    case "projects":
+      return `${api}/projects/${chain}/${currentChainId}`;
+    case "contracts":
+      return `${api}/contracts/${chain}/${currentChainId}`;
+    case "codes":
+      return `${api}/codes/${chain}/${currentChainId}`;
+    default:
+      throw new Error(
+        "Error retrieving chain, api, or currentChainId from chain config."
+      );
+  }
+};
diff --git a/src/lib/app-provider/hooks/useCelatoneApp.ts b/src/lib/app-provider/hooks/useCelatoneApp.ts
deleted file mode 100644
index 41ca60850..000000000
--- a/src/lib/app-provider/hooks/useCelatoneApp.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useApp } from "../contexts";
-import type {
-  CelatoneConstants,
-  CelatoneContractAddress,
-  CelatoneHumanAddress,
-} from "types";
-
-export const useCelatoneApp = () => {
-  return useApp<
-    CelatoneContractAddress,
-    CelatoneHumanAddress,
-    CelatoneConstants
-  >();
-};
diff --git a/src/lib/app-provider/hooks/useChainId.ts b/src/lib/app-provider/hooks/useChainId.ts
deleted file mode 100644
index 31f9b9eb4..000000000
--- a/src/lib/app-provider/hooks/useChainId.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { useWallet } from "@cosmos-kit/react";
-
-export const useChainId = () => {
-  const { currentChainRecord } = useWallet();
-  const chainId = currentChainRecord?.chain.chain_id;
-  if (!chainId) throw new Error("Chain ID not found");
-  return chainId;
-};
diff --git a/src/lib/app-provider/hooks/useCurrentNetwork.ts b/src/lib/app-provider/hooks/useCurrentNetwork.ts
deleted file mode 100644
index d7675b535..000000000
--- a/src/lib/app-provider/hooks/useCurrentNetwork.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useWallet } from "@cosmos-kit/react";
-import { useRouter } from "next/router";
-
-import { getNetworkByChainName } from "lib/data";
-import type { Network } from "lib/data";
-
-export const useCurrentNetwork = () => {
-  const { currentChainName } = useWallet();
-  const router = useRouter();
-
-  // Revisit: this is a hack to fix the issue of the walletManager being
-  try {
-    const network = getNetworkByChainName(currentChainName);
-    return {
-      network,
-      isMainnet: network === "mainnet",
-      isTestnet: network === "testnet",
-      isLocalnet: network === "localnet",
-    };
-  } catch (e) {
-    window.localStorage.removeItem("walletManager");
-
-    // eslint-disable-next-line no-console
-    console.log("remove walletManager");
-    router.reload();
-
-    // This is mock value, it will be replaced by the real value after the page is reloaded
-    return {
-      network: "mainnet" as Network,
-      isMainnet: true,
-      isTestnet: false,
-      isLocalnet: false,
-    };
-  }
-};
diff --git a/src/lib/app-provider/hooks/useFabricateFee.ts b/src/lib/app-provider/hooks/useFabricateFee.ts
index a2a9ffcc3..f31a1af1c 100644
--- a/src/lib/app-provider/hooks/useFabricateFee.ts
+++ b/src/lib/app-provider/hooks/useFabricateFee.ts
@@ -2,35 +2,33 @@ import type { StdFee } from "@cosmjs/stargate";
 import big from "big.js";
 import { useCallback } from "react";
 
+import { useCelatoneApp } from "../contexts/app";
 import type { Gas } from "lib/types";
 
-import { useCelatoneApp } from "./useCelatoneApp";
-
 export const useFabricateFee = () => {
-  const { constants, chainGasPrice } = useCelatoneApp();
+  const {
+    chainConfig: {
+      gas: { gasPrice, gasAdjustment, maxGasLimit },
+    },
+  } = useCelatoneApp();
 
   return useCallback(
     (estimatedGas: number): StdFee => {
       const adjustedGas = Math.min(
-        Number(big(estimatedGas).mul(constants.gasAdjustment).toFixed(0)),
-        constants.maxGasLimit
+        Number(big(estimatedGas).mul(gasAdjustment).toFixed(0)),
+        maxGasLimit
       );
 
       return {
         amount: [
           {
-            denom: chainGasPrice.denom,
-            amount: big(adjustedGas).mul(chainGasPrice.gasPrice).toFixed(0),
+            denom: gasPrice.denom,
+            amount: big(adjustedGas).mul(gasPrice.tokenPerGas).toFixed(0),
           },
         ],
         gas: adjustedGas.toString() as Gas<string>,
       };
     },
-    [
-      chainGasPrice.denom,
-      chainGasPrice.gasPrice,
-      constants.gasAdjustment,
-      constants.maxGasLimit,
-    ]
+    [gasAdjustment, gasPrice.denom, gasPrice.tokenPerGas, maxGasLimit]
   );
 };
diff --git a/src/lib/app-provider/hooks/useFaucetConfig.ts b/src/lib/app-provider/hooks/useFaucetConfig.ts
new file mode 100644
index 000000000..a8310b21c
--- /dev/null
+++ b/src/lib/app-provider/hooks/useFaucetConfig.ts
@@ -0,0 +1,11 @@
+import { useCelatoneApp } from "../contexts";
+
+export const useFaucetConfig = () => {
+  const {
+    chainConfig: {
+      features: { faucet },
+    },
+  } = useCelatoneApp();
+
+  return faucet;
+};
diff --git a/src/lib/app-provider/hooks/useInternalNavigate.ts b/src/lib/app-provider/hooks/useInternalNavigate.ts
index d130d4978..1487fcce8 100644
--- a/src/lib/app-provider/hooks/useInternalNavigate.ts
+++ b/src/lib/app-provider/hooks/useInternalNavigate.ts
@@ -3,6 +3,9 @@ import type { Router } from "next/router";
 import type { ParsedUrlQueryInput } from "node:querystring";
 import { useCallback } from "react";
 
+import { DEFAULT_SUPPORTED_CHAIN_ID, SUPPORTED_CHAIN_IDS } from "env";
+import { getFirstQueryParam } from "lib/utils";
+
 export interface NavigationArgs {
   pathname: string;
   query?: ParsedUrlQueryInput;
@@ -25,7 +28,11 @@ export const useInternalNavigate = () => {
         {
           pathname: `/[network]${pathname}`,
           query: {
-            network: router.query.network === "testnet" ? "testnet" : "mainnet",
+            network: SUPPORTED_CHAIN_IDS.includes(
+              getFirstQueryParam(router.query.network)
+            )
+              ? router.query.network
+              : DEFAULT_SUPPORTED_CHAIN_ID,
             ...query,
           },
         },
diff --git a/src/lib/app-provider/hooks/useLCDEndpoint.ts b/src/lib/app-provider/hooks/useLCDEndpoint.ts
index 4eb9f1442..a620c19f8 100644
--- a/src/lib/app-provider/hooks/useLCDEndpoint.ts
+++ b/src/lib/app-provider/hooks/useLCDEndpoint.ts
@@ -1,12 +1,10 @@
 import { useWallet } from "@cosmos-kit/react";
 
-import { FALLBACK_LCD_ENDPOINT } from "env";
+import { useCelatoneApp } from "../contexts";
 
 export const useLCDEndpoint = () => {
-  const { currentChainRecord, currentChainName } = useWallet();
+  const { currentChainRecord } = useWallet();
+  const { chainConfig } = useCelatoneApp();
 
-  return (
-    currentChainRecord?.preferredEndpoints?.rest?.[0] ??
-    FALLBACK_LCD_ENDPOINT[currentChainName]
-  );
+  return currentChainRecord?.preferredEndpoints?.rest?.[0] ?? chainConfig.lcd;
 };
diff --git a/src/lib/app-provider/hooks/useNetworkChange.ts b/src/lib/app-provider/hooks/useNetworkChange.ts
index 30f233efd..7e8facfb7 100644
--- a/src/lib/app-provider/hooks/useNetworkChange.ts
+++ b/src/lib/app-provider/hooks/useNetworkChange.ts
@@ -1,35 +1,50 @@
-import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
 import { useEffect, useRef } from "react";
 
-import { getChainNameByNetwork } from "lib/data";
-import type { Network } from "lib/data";
+import { DEFAULT_SUPPORTED_CHAIN_ID, SUPPORTED_CHAIN_IDS } from "env";
 import { getFirstQueryParam } from "lib/utils";
 
-export const useNetworkChange = () => {
+import { useInternalNavigate } from "./useInternalNavigate";
+
+export const useNetworkChange = (
+  handleOnChainIdChange: (newChainId: string) => void
+) => {
   const router = useRouter();
-  const { currentChainName, setCurrentChain } = useWallet();
   const networkRef = useRef<string>();
+  const navigate = useInternalNavigate();
 
   useEffect(() => {
-    if (router.isReady) {
-      let networkRoute = getFirstQueryParam(
-        router.query.network,
-        "mainnet"
-      ) as Network;
-
-      if (
-        networkRoute !== "mainnet" &&
-        networkRoute !== "testnet" &&
-        networkRoute !== "localnet"
-      )
-        networkRoute = "mainnet";
+    const networkRoute = router.query.network
+      ? getFirstQueryParam(router.query.network, DEFAULT_SUPPORTED_CHAIN_ID)
+      : router.asPath.split("/")[1];
 
-      if (networkRoute !== networkRef.current) {
+    if (router.isReady || router.pathname === "/404") {
+      // Redirect to default chain if there is no network query provided
+      if (!router.query.network) {
+        navigate({
+          pathname: router.pathname,
+          query: { ...router.query },
+          replace: true,
+        });
+      } else if (
+        router.pathname === "/[network]" &&
+        !SUPPORTED_CHAIN_IDS.includes(networkRoute)
+      ) {
+        navigate({
+          pathname: "/",
+          replace: true,
+        });
+      } else if (networkRoute !== networkRef.current) {
         networkRef.current = networkRoute;
-        const chainName = getChainNameByNetwork(networkRoute);
-        if (currentChainName !== chainName) setCurrentChain(chainName);
+        handleOnChainIdChange(networkRoute);
       }
     }
-  }, [router, currentChainName, setCurrentChain]);
+  }, [
+    handleOnChainIdChange,
+    navigate,
+    router.asPath,
+    router.isReady,
+    router.pathname,
+    router.query,
+  ]);
 };
diff --git a/src/lib/app-provider/hooks/useRPCEndpoint.ts b/src/lib/app-provider/hooks/useRPCEndpoint.ts
new file mode 100644
index 000000000..97d81f39c
--- /dev/null
+++ b/src/lib/app-provider/hooks/useRPCEndpoint.ts
@@ -0,0 +1,10 @@
+import { useWallet } from "@cosmos-kit/react";
+
+import { useCelatoneApp } from "../contexts";
+
+export const useRPCEndpoint = () => {
+  const { currentChainRecord } = useWallet();
+  const { chainConfig } = useCelatoneApp();
+
+  return currentChainRecord?.preferredEndpoints?.rpc?.[0] ?? chainConfig.rpc;
+};
diff --git a/src/lib/app-provider/hooks/useSelectChain.ts b/src/lib/app-provider/hooks/useSelectChain.ts
index 446566703..d6b70be41 100644
--- a/src/lib/app-provider/hooks/useSelectChain.ts
+++ b/src/lib/app-provider/hooks/useSelectChain.ts
@@ -1,27 +1,30 @@
-import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
 import { useCallback } from "react";
 
-import { useInternalNavigate } from "lib/app-provider/hooks/useInternalNavigate";
-import { getNetworkByChainName } from "lib/data";
+import { useCelatoneApp } from "../contexts/app";
+
+import { useInternalNavigate } from "./useInternalNavigate";
 
 export const useSelectChain = () => {
   const router = useRouter();
-  const { currentChainName, setCurrentChain } = useWallet();
-  const navigate = useInternalNavigate();
+  const navigator = useInternalNavigate();
+  const { handleOnChainIdChange } = useCelatoneApp();
 
   return useCallback(
-    (chainName: string) => {
-      if (chainName === currentChainName) return;
-      setCurrentChain(chainName);
-      navigate({
+    (chainId: string) => {
+      if (router.query.network === chainId) return;
+
+      // Remark: This is workaround solution to set new chainId and replace the pathname
+      handleOnChainIdChange(chainId);
+
+      navigator({
         pathname: router.pathname.replace("/[network]", ""),
         query: {
           ...router.query,
-          network: getNetworkByChainName(chainName),
+          network: chainId,
         },
       });
     },
-    [currentChainName, setCurrentChain, navigate, router]
+    [handleOnChainIdChange, navigator, router.pathname, router.query]
   );
 };
diff --git a/src/lib/app-provider/hooks/useWasmConfig.ts b/src/lib/app-provider/hooks/useWasmConfig.ts
new file mode 100644
index 000000000..097ece114
--- /dev/null
+++ b/src/lib/app-provider/hooks/useWasmConfig.ts
@@ -0,0 +1,17 @@
+import { useCelatoneApp } from "../contexts";
+
+import { useInternalNavigate } from "./useInternalNavigate";
+
+export const useWasmConfig = (shouldRedirect: { shouldRedirect: boolean }) => {
+  const {
+    chainConfig: {
+      features: { wasm },
+    },
+  } = useCelatoneApp();
+  const navigate = useInternalNavigate();
+
+  if (!wasm.enabled && shouldRedirect)
+    navigate({ pathname: "/", replace: true });
+
+  return wasm;
+};
diff --git a/src/lib/app-provider/queries/simulateFee.ts b/src/lib/app-provider/queries/simulateFee.ts
index 9a6871a6b..4102b4331 100644
--- a/src/lib/app-provider/queries/simulateFee.ts
+++ b/src/lib/app-provider/queries/simulateFee.ts
@@ -4,7 +4,7 @@ import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 import { gzip } from "node-gzip";
 
-import { useDummyWallet } from "../hooks";
+import { useDummyWallet, useRPCEndpoint } from "../hooks";
 import type {
   AccessType,
   Addr,
@@ -30,22 +30,21 @@ export const useSimulateFeeQuery = ({
   onSuccess,
   onError,
 }: SimulateQueryParams) => {
-  const { address, getCosmWasmClient, currentChainName, currentChainRecord } =
-    useWallet();
+  const { address, getCosmWasmClient, currentChainName } = useWallet();
   const { dummyWallet, dummyAddress } = useDummyWallet();
-
+  const rpcEndpoint = useRPCEndpoint();
   const userAddress = isDummyUser ? dummyAddress : address || dummyAddress;
 
   const simulateFn = async (msgs: ComposedMsg[]) => {
     // TODO: revisit this logic
-    if (!currentChainRecord?.preferredEndpoints?.rpc?.[0] || !userAddress) {
-      throw new Error("No RPC endpoint or user address");
+    if (!userAddress) {
+      throw new Error("No user address");
     }
 
     const client =
       dummyWallet && (isDummyUser || !address)
         ? await SigningCosmWasmClient.connectWithSigner(
-            currentChainRecord.preferredEndpoints.rpc[0],
+            rpcEndpoint,
             dummyWallet
           )
         : await getCosmWasmClient();
@@ -58,7 +57,13 @@ export const useSimulateFeeQuery = ({
   };
 
   return useQuery({
-    queryKey: ["simulate", currentChainName, userAddress, messages],
+    queryKey: [
+      "simulate",
+      currentChainName,
+      userAddress,
+      messages,
+      rpcEndpoint,
+    ],
     queryFn: async ({ queryKey }) => simulateFn(queryKey[3] as ComposedMsg[]),
     enabled,
     keepPreviousData: true,
diff --git a/src/lib/app-provider/query-client/index.ts b/src/lib/app-provider/query-client/index.ts
deleted file mode 100644
index 74464ceff..000000000
--- a/src/lib/app-provider/query-client/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { GraphQLClient } from "graphql-request";
-
-export const GRAPH_URL: Record<string, string> = {
-  /**
-   * Revisit graphql for terra2 mainnet and osmosis mainnet
-   */
-  osmosis: "https://osmosis-mainnet-graphql.alleslabs.dev/v1/graphql",
-  osmosistestnet5: "https://osmo-test-5-graphql.alleslabs.dev/v1/graphql",
-  terra2testnet: "https://terra-testnet-graphql.alleslabs.dev/v1/graphql",
-};
-
-export const getIndexerGraphClient = (currentChainName: string) =>
-  new GraphQLClient(GRAPH_URL[currentChainName]);
diff --git a/src/lib/app-provider/tx/clearAdmin.ts b/src/lib/app-provider/tx/clearAdmin.ts
index 22972e9f1..0d43ce754 100644
--- a/src/lib/app-provider/tx/clearAdmin.ts
+++ b/src/lib/app-provider/tx/clearAdmin.ts
@@ -2,9 +2,8 @@ import { useWallet } from "@cosmos-kit/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useCallback } from "react";
 
-import { useFabricateFee } from "../hooks";
+import { useFabricateFee, useWasmConfig } from "../hooks";
 import { clearAdminTx } from "lib/app-fns/tx/clearAdmin";
-import { CLEAR_ADMIN_GAS } from "lib/data";
 import type { ContractAddr, HumanAddr } from "lib/types";
 
 export interface ClearAdminStreamParams {
@@ -15,7 +14,7 @@ export const useClearAdminTx = (contractAddress: ContractAddr) => {
   const { address, getCosmWasmClient } = useWallet();
   const queryClient = useQueryClient();
   const fabricateFee = useFabricateFee();
-  const clearAdminFee = fabricateFee(CLEAR_ADMIN_GAS);
+  const wasm = useWasmConfig({ shouldRedirect: false });
 
   return useCallback(
     async ({ onTxSucceed }: ClearAdminStreamParams) => {
@@ -23,6 +22,13 @@ export const useClearAdminTx = (contractAddress: ContractAddr) => {
       if (!address || !client)
         throw new Error("Please check your wallet connection.");
 
+      if (!wasm.enabled)
+        throw new Error(
+          "Wasm config isn't loaded or Wasm feature is disabled."
+        );
+
+      const clearAdminFee = fabricateFee(wasm.clearAdminGas);
+
       return clearAdminTx({
         address: address as HumanAddr,
         contractAddress,
@@ -41,6 +47,13 @@ export const useClearAdminTx = (contractAddress: ContractAddr) => {
         },
       });
     },
-    [address, clearAdminFee, queryClient, contractAddress, getCosmWasmClient]
+    [
+      getCosmWasmClient,
+      address,
+      wasm,
+      fabricateFee,
+      contractAddress,
+      queryClient,
+    ]
   );
 };
diff --git a/src/lib/app-provider/types.ts b/src/lib/app-provider/types.ts
deleted file mode 100644
index b9bf59ab8..000000000
--- a/src/lib/app-provider/types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface AppConstants {
-  gasAdjustment: number;
-  maxGasLimit: number;
-}
diff --git a/src/lib/components/AddressInput.tsx b/src/lib/components/AddressInput.tsx
index 01124df6d..996f383f3 100644
--- a/src/lib/components/AddressInput.tsx
+++ b/src/lib/components/AddressInput.tsx
@@ -44,7 +44,9 @@ export const AddressInput = <T extends FieldValues>({
   requiredText = "Address is empty",
 }: AddressInputProps<T>) => {
   const {
-    appHumanAddress: { example: exampleAddr },
+    chainConfig: {
+      exampleAddresses: { user: exampleAddr },
+    },
   } = useCelatoneApp();
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
   const validateAddress = useCallback(
diff --git a/src/lib/components/AppLink.tsx b/src/lib/components/AppLink.tsx
index 92fef138a..d18836ec3 100644
--- a/src/lib/components/AppLink.tsx
+++ b/src/lib/components/AppLink.tsx
@@ -2,21 +2,24 @@ import { Text } from "@chakra-ui/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
+import { DEFAULT_SUPPORTED_CHAIN_ID, SUPPORTED_CHAIN_IDS } from "env";
+import { getFirstQueryParam } from "lib/utils";
+
 export const AppLink = ({
   children,
   ...linkProps
 }: React.ComponentProps<typeof Link>) => {
   const router = useRouter();
   const componentHref = linkProps.href.toString();
+
+  const network = SUPPORTED_CHAIN_IDS.includes(
+    getFirstQueryParam(router.query.network)
+  )
+    ? router.query.network
+    : DEFAULT_SUPPORTED_CHAIN_ID;
+
   return (
-    <Link
-      {...linkProps}
-      href={
-        router.query.network === "testnet"
-          ? `/testnet${componentHref}`
-          : `/mainnet${componentHref}`
-      }
-    >
+    <Link {...linkProps} href={`/${network}${componentHref}`}>
       {typeof children === "string" ? (
         <Text variant="body2" color={linkProps.color}>
           {children}
diff --git a/src/lib/components/ContractSelectSection.tsx b/src/lib/components/ContractSelectSection.tsx
index 036da5ab6..c22136d8f 100644
--- a/src/lib/components/ContractSelectSection.tsx
+++ b/src/lib/components/ContractSelectSection.tsx
@@ -134,7 +134,7 @@ export const ContractSelectSection = observer(
     const { getContractLocalInfo } = useContractStore();
     const { indexerGraphClient } = useCelatoneApp();
     const isMobile = useMobile();
-    const endpoint = useLCDEndpoint();
+    const lcdEndpoint = useLCDEndpoint();
 
     const contractLocalInfo = getContractLocalInfo(contractAddress);
     const {
@@ -154,12 +154,12 @@ export const ContractSelectSection = observer(
       [
         "query",
         "instantiate_info",
-        endpoint,
+        lcdEndpoint,
         indexerGraphClient,
         contractAddress,
       ],
       async () =>
-        queryInstantiateInfo(endpoint, indexerGraphClient, contractAddress),
+        queryInstantiateInfo(lcdEndpoint, indexerGraphClient, contractAddress),
       {
         enabled: false,
         retry: false,
@@ -186,7 +186,7 @@ export const ContractSelectSection = observer(
           label: contractLocalInfo.label,
         });
       }
-    }, [contractAddress, contractLocalInfo, endpoint, reset, refetch]);
+    }, [contractAddress, contractLocalInfo, lcdEndpoint, reset, refetch]);
 
     const contractState = watch();
     const notSelected = contractAddress.length === 0;
diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
index 1cf9b4e5b..676352427 100644
--- a/src/lib/components/ExplorerLink.tsx
+++ b/src/lib/components/ExplorerLink.tsx
@@ -2,12 +2,9 @@ import type { BoxProps, TextProps } from "@chakra-ui/react";
 import { Box, Text } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 
-import {
-  getExplorerProposalUrl,
-  getExplorerValidatorUrl,
-} from "lib/app-fns/explorer";
+import type { ExplorerConfig } from "config/types";
 import type { AddressReturnType } from "lib/app-provider";
-import { useCurrentNetwork } from "lib/app-provider/hooks/useCurrentNetwork";
+import { useCelatoneApp } from "lib/app-provider/contexts";
 import { AmpTrackMintscan } from "lib/services/amplitude";
 import type { Option } from "lib/types";
 import { truncate } from "lib/utils";
@@ -37,7 +34,7 @@ interface ExplorerLinkProps extends BoxProps {
 
 const getNavigationUrl = (
   type: ExplorerLinkProps["type"],
-  currentChainName: string,
+  explorerConfig: ExplorerConfig,
   value: string
 ) => {
   let url = "";
@@ -52,7 +49,7 @@ const getNavigationUrl = (
       url = "/accounts";
       break;
     case "validator_address":
-      url = getExplorerValidatorUrl(currentChainName);
+      url = explorerConfig.validator;
       break;
     case "code_id":
       url = "/codes";
@@ -61,7 +58,7 @@ const getNavigationUrl = (
       url = "/blocks";
       break;
     case "proposal_id":
-      url = getExplorerProposalUrl(currentChainName);
+      url = explorerConfig.proposal;
       break;
     case "invalid_address":
       return "";
@@ -107,7 +104,7 @@ const LinkRender = ({
   textVariant: TextProps["variant"];
   openNewTab: Option<boolean>;
 }) => {
-  const { network } = useCurrentNetwork();
+  const { currentChainId } = useCelatoneApp();
   const textElement = (
     <Text
       variant={textVariant}
@@ -128,7 +125,7 @@ const LinkRender = ({
     </AppLink>
   ) : (
     <a
-      href={isInternal ? `/${network}${hrefLink}` : hrefLink}
+      href={isInternal ? `/${currentChainId}${hrefLink}` : hrefLink}
       target="_blank"
       rel="noopener noreferrer"
       data-peer
@@ -155,7 +152,11 @@ export const ExplorerLink = ({
   openNewTab,
   ...componentProps
 }: ExplorerLinkProps) => {
-  const { address, currentChainName } = useWallet();
+  const { address } = useWallet();
+  const {
+    chainConfig: { explorerLink: explorerConfig },
+  } = useCelatoneApp();
+
   const isInternal =
     type === "code_id" ||
     type === "contract_address" ||
@@ -164,7 +165,7 @@ export const ExplorerLink = ({
     type === "block_height";
 
   const [hrefLink, textValue] = [
-    getNavigationUrl(type, currentChainName, copyValue || value),
+    getNavigationUrl(type, explorerConfig, copyValue || value),
     getValueText(value === address, textFormat === "truncate", value),
   ];
 
diff --git a/src/lib/components/Meta.tsx b/src/lib/components/Meta.tsx
index f95373a1c..4723bd7a8 100644
--- a/src/lib/components/Meta.tsx
+++ b/src/lib/components/Meta.tsx
@@ -1,10 +1,13 @@
-import { CURR_THEME, SELECTED_CHAIN } from "env";
+import { CURR_THEME } from "env";
+import { useCelatoneApp } from "lib/app-provider";
 
 const APP_NAME = CURR_THEME.branding.seo.appName;
 
 const Meta = () => {
-  const chainName = SELECTED_CHAIN || "";
-  const title = `${chainName.charAt(0).toUpperCase() + chainName.slice(1)}`;
+  const {
+    chainConfig: { prettyName },
+  } = useCelatoneApp();
+  const title = `${prettyName} Explorer | ${CURR_THEME.branding.seo.title}`;
   return (
     <>
       <meta name="application-name" content={APP_NAME} />
@@ -14,15 +17,12 @@ const Meta = () => {
       <meta name="format-detection" content="telephone=no" />
       <meta name="mobile-web-app-capable" content="yes" />
       <meta name="theme-color" content={CURR_THEME.colors.background.main} />
-      <title>{`${title} Explorer | ${CURR_THEME.branding.seo.title}`}</title>
+      <title>{title}</title>
       <meta name="description" content={CURR_THEME.branding.seo.description} />
 
       {/* Open Graph / Facebook */}
       <meta property="og:type" content="website" />
-      <meta
-        property="og:title"
-        content={`${title} Explorer | ${CURR_THEME.branding.seo.title}`}
-      />
+      <meta property="og:title" content={title} />
       <meta
         property="og:description"
         content={CURR_THEME.branding.seo.description}
@@ -34,10 +34,7 @@ const Meta = () => {
         property="twitter:card"
         content={CURR_THEME.branding.seo.twitter.cardType}
       />
-      <meta
-        property="twitter:title"
-        content={`${title} Explorer | ${CURR_THEME.branding.seo.title}`}
-      />
+      <meta property="twitter:title" content={title} />
       <meta
         property="twitter:description"
         content={CURR_THEME.branding.seo.description}
diff --git a/src/lib/components/OffChainForm.tsx b/src/lib/components/OffChainForm.tsx
index a1c692525..3e3e42607 100644
--- a/src/lib/components/OffChainForm.tsx
+++ b/src/lib/components/OffChainForm.tsx
@@ -1,12 +1,8 @@
 import { VStack } from "@chakra-ui/react";
 import type { Control, FieldErrorsImpl, FieldPath } from "react-hook-form";
 
-import {
-  getMaxContractDescriptionLengthError,
-  getMaxContractNameLengthError,
-  MAX_CONTRACT_DESCRIPTION_LENGTH,
-  MAX_CONTRACT_NAME_LENGTH,
-} from "lib/data";
+import { useCelatoneApp } from "lib/app-provider";
+import { useGetMaxLengthError } from "lib/hooks";
 import type { LVPair } from "lib/types";
 
 import { ControllerInput, ControllerTextarea } from "./forms";
@@ -38,50 +34,57 @@ export const OffChainForm = <T extends OffchainDetail>({
   setContractListsValue,
   errors,
   labelBgColor = "background.main",
-}: OffChainFormProps<T>) => (
-  <VStack gap={4} w="full">
-    <ControllerInput
-      name={"name" as FieldPath<T>}
-      control={control}
-      label="Name"
-      placeholder={contractLabel}
-      helperText="Set name for your contract"
-      variant="floating"
-      rules={{
-        maxLength: MAX_CONTRACT_NAME_LENGTH,
-      }}
-      error={errors.name && getMaxContractNameLengthError(state.name.length)}
-      labelBgColor={labelBgColor}
-    />
-    <ControllerTextarea
-      name={"description" as FieldPath<T>}
-      control={control}
-      label="Description"
-      placeholder="Help understanding what this contract do and how it works ..."
-      variant="floating"
-      rules={{
-        maxLength: MAX_CONTRACT_DESCRIPTION_LENGTH,
-      }}
-      error={
-        errors.description &&
-        getMaxContractDescriptionLengthError(state.description.length)
-      }
-      labelBgColor={labelBgColor}
-    />
-    <TagSelection
-      result={state.tags}
-      setResult={setTagsValue}
-      placeholder="Select tags or create new ones"
-      helperText="Add tag to organize and manage your contracts"
-      labelBgColor={labelBgColor}
-    />
-    <ListSelection
-      result={state.lists}
-      placeholder="Not listed"
-      helperText="Grouping your contracts by adding to your existing list or create
+}: OffChainFormProps<T>) => {
+  const { constants } = useCelatoneApp();
+  const getMaxLengthError = useGetMaxLengthError();
+
+  return (
+    <VStack gap={4} w="full">
+      <ControllerInput
+        name={"name" as FieldPath<T>}
+        control={control}
+        label="Name"
+        placeholder={contractLabel}
+        helperText="Set name for your contract"
+        variant="floating"
+        rules={{
+          maxLength: constants.maxContractNameLength,
+        }}
+        error={
+          errors.name && getMaxLengthError(state.name.length, "contract_name")
+        }
+        labelBgColor={labelBgColor}
+      />
+      <ControllerTextarea
+        name={"description" as FieldPath<T>}
+        control={control}
+        label="Description"
+        placeholder="Help understanding what this contract do and how it works ..."
+        variant="floating"
+        rules={{
+          maxLength: constants.maxContractDescriptionLength,
+        }}
+        error={
+          errors.description &&
+          getMaxLengthError(state.description.length, "contract_desc")
+        }
+        labelBgColor={labelBgColor}
+      />
+      <TagSelection
+        result={state.tags}
+        setResult={setTagsValue}
+        placeholder="Select tags or create new ones"
+        helperText="Add tag to organize and manage your contracts"
+        labelBgColor={labelBgColor}
+      />
+      <ListSelection
+        result={state.lists}
+        placeholder="Not listed"
+        helperText="Grouping your contracts by adding to your existing list or create
               a new list"
-      setResult={setContractListsValue}
-      labelBgColor={labelBgColor}
-    />
-  </VStack>
-);
+        setResult={setContractListsValue}
+        labelBgColor={labelBgColor}
+      />
+    </VStack>
+  );
+};
diff --git a/src/lib/components/PermissionChip.tsx b/src/lib/components/PermissionChip.tsx
index 02ed3d920..8572083a4 100644
--- a/src/lib/components/PermissionChip.tsx
+++ b/src/lib/components/PermissionChip.tsx
@@ -1,9 +1,12 @@
 import { Flex, Tag } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 
-import type { HumanAddr, PermissionAddresses } from "lib/types";
-import { AccessConfigPermission } from "lib/types";
-import { getPermissionHelper } from "lib/utils";
+import type {
+  HumanAddr,
+  PermissionAddresses,
+  AccessConfigPermission,
+} from "lib/types";
+import { getPermissionHelper, resolvePermission } from "lib/utils";
 
 import { Tooltip } from "./Tooltip";
 
@@ -18,9 +21,11 @@ export const PermissionChip = ({
 }: PermissionChipProps) => {
   const { address } = useWallet();
 
-  const isAllowed =
-    permissionAddresses.includes(address as HumanAddr) ||
-    instantiatePermission === AccessConfigPermission.EVERYBODY;
+  const isAllowed = resolvePermission(
+    address as HumanAddr,
+    instantiatePermission,
+    permissionAddresses
+  );
 
   const { message } = getPermissionHelper(
     address as HumanAddr,
diff --git a/src/lib/components/Seo.tsx b/src/lib/components/Seo.tsx
index d858c721b..2442cdbac 100644
--- a/src/lib/components/Seo.tsx
+++ b/src/lib/components/Seo.tsx
@@ -1,11 +1,13 @@
-import { useWallet } from "@cosmos-kit/react";
 import { DefaultSeo } from "next-seo";
 
 import { CURR_THEME } from "env";
+import { useCelatoneApp } from "lib/app-provider";
 
 export const CelatoneSeo = () => {
-  const { currentChainRecord } = useWallet();
-  const title = `${currentChainRecord?.chain.pretty_name} Explorer | ${CURR_THEME.branding.seo.title}`;
+  const {
+    chainConfig: { prettyName },
+  } = useCelatoneApp();
+  const title = `${prettyName} Explorer | ${CURR_THEME.branding.seo.title}`;
 
   return (
     <DefaultSeo
diff --git a/src/lib/components/StickySidebar.tsx b/src/lib/components/StickySidebar.tsx
index 1c1a4e0cf..57225b8df 100644
--- a/src/lib/components/StickySidebar.tsx
+++ b/src/lib/components/StickySidebar.tsx
@@ -10,13 +10,7 @@ import {
   Text,
 } from "@chakra-ui/react";
 
-import {
-  useCurrentNetwork,
-  useInternalNavigate,
-  useSelectChain,
-} from "lib/app-provider";
-import type { Network } from "lib/data";
-import { getChainNameByNetwork } from "lib/data";
+import { useInternalNavigate } from "lib/app-provider";
 import { AmpTrackUseRightHelperPanel } from "lib/services/amplitude";
 
 import { CustomIcon } from "./icon";
@@ -25,16 +19,13 @@ export interface SidebarMetadata {
   page: string;
   title: string;
   description: React.ReactElement;
-  toNetwork?: boolean;
   toPagePath?: string;
   toPageTitle?: string;
   toPage?: boolean;
 }
 
-export type SidebarDetails = Record<Network, SidebarMetadata>;
-
 interface StickySidebarProps extends BoxProps {
-  metadata: SidebarDetails;
+  metadata: SidebarMetadata;
 }
 
 interface ToPageProps {
@@ -69,18 +60,8 @@ export const StickySidebar = ({
   ...boxProps
 }: StickySidebarProps) => {
   const navigate = useInternalNavigate();
-  const selectChain = useSelectChain();
-  const { isMainnet } = useCurrentNetwork();
-  const { network } = useCurrentNetwork();
-  const {
-    title,
-    description,
-    toNetwork,
-    toPagePath,
-    toPageTitle,
-    toPage,
-    page,
-  } = metadata[network];
+  const { title, description, toPagePath, toPageTitle, toPage, page } =
+    metadata;
   const hasAction = toPage;
   return (
     <Box flex="4" px={8} position="relative" {...boxProps}>
@@ -112,17 +93,6 @@ export const StickySidebar = ({
               >
                 {description}
               </Text>
-              {toNetwork && (
-                <ToPage
-                  onClick={() => {
-                    AmpTrackUseRightHelperPanel(page, "change-network");
-                    selectChain(
-                      getChainNameByNetwork(isMainnet ? "testnet" : "mainnet")
-                    );
-                  }}
-                  title={isMainnet ? "Switch To Testnet" : "Switch To Mainnet"}
-                />
-              )}
               {toPage && toPagePath && toPageTitle && (
                 <ToPage
                   onClick={() => {
diff --git a/src/lib/components/ValidatorBadge.tsx b/src/lib/components/ValidatorBadge.tsx
index 06c2e7367..a23be6cf6 100644
--- a/src/lib/components/ValidatorBadge.tsx
+++ b/src/lib/components/ValidatorBadge.tsx
@@ -1,8 +1,8 @@
 import type { ImageProps } from "@chakra-ui/react";
 import { Flex, Image, Text } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
-import { CURR_THEME, getChainApiPath } from "env";
+import { CURR_THEME } from "env";
+import { useCelatoneApp } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { ValidatorInfo } from "lib/types";
 import { removeSpecialChars } from "lib/utils";
@@ -34,16 +34,16 @@ export const ValidatorBadge = ({
   validator,
   badgeSize = 10,
 }: ValidatorBadgeProps) => {
-  const { currentChainName } = useWallet();
+  const {
+    chainConfig: { chain },
+  } = useCelatoneApp();
   return (
     <Flex alignItems="center" gap={2}>
       {validator ? (
         <>
           <Image
             boxSize={badgeSize}
-            src={`https://raw.githubusercontent.com/cosmostation/chainlist/master/chain/${getChainApiPath(
-              currentChainName
-            )}/moniker/${validator.validatorAddress}.png`}
+            src={`https://raw.githubusercontent.com/cosmostation/chainlist/master/chain/${chain}/moniker/${validator.validatorAddress}.png`}
             alt={validator.moniker}
             fallbackSrc={`https://ui-avatars.com/api/?name=${removeSpecialChars(
               validator.moniker ?? ""
diff --git a/src/lib/components/button/FaucetButton.tsx b/src/lib/components/button/FaucetButton.tsx
index 40677c32a..6a02a53a3 100644
--- a/src/lib/components/button/FaucetButton.tsx
+++ b/src/lib/components/button/FaucetButton.tsx
@@ -2,11 +2,17 @@ import { Button } from "@chakra-ui/react";
 import type { MouseEventHandler } from "react";
 
 import { CustomIcon } from "../icon";
-import { useCurrentNetwork, useInternalNavigate } from "lib/app-provider";
+import { useCelatoneApp, useInternalNavigate } from "lib/app-provider";
 
 export const FaucetBtn = () => {
   const navigate = useInternalNavigate();
-  const { isTestnet } = useCurrentNetwork();
+  const {
+    chainConfig: {
+      features: {
+        faucet: { enabled },
+      },
+    },
+  } = useCelatoneApp();
 
   const onClick: MouseEventHandler = async (e) => {
     e.preventDefault();
@@ -15,7 +21,7 @@ export const FaucetBtn = () => {
     });
   };
 
-  return isTestnet ? (
+  return enabled ? (
     <Button
       variant="outline-gray"
       leftIcon={<CustomIcon name="faucet" />}
diff --git a/src/lib/components/button/InstantiateButton.tsx b/src/lib/components/button/InstantiateButton.tsx
index 2d3c32691..98e3ef93f 100644
--- a/src/lib/components/button/InstantiateButton.tsx
+++ b/src/lib/components/button/InstantiateButton.tsx
@@ -7,6 +7,7 @@ import { Tooltip } from "../Tooltip";
 import { useInternalNavigate } from "lib/app-provider";
 import type { HumanAddr, PermissionAddresses } from "lib/types";
 import { AccessConfigPermission } from "lib/types";
+import { resolvePermission } from "lib/utils";
 
 interface InstantiateButtonProps extends ButtonProps {
   instantiatePermission: AccessConfigPermission;
@@ -64,9 +65,11 @@ export const InstantiateButton = ({
   const goToInstantiate = () =>
     navigate({ pathname: "/instantiate", query: { "code-id": codeId } });
 
-  const isAllowed =
-    permissionAddresses.includes(address as HumanAddr) ||
-    instantiatePermission === AccessConfigPermission.EVERYBODY;
+  const isAllowed = resolvePermission(
+    address as HumanAddr,
+    instantiatePermission,
+    permissionAddresses
+  );
 
   /**
    * @todos use isDisabled when proposal flow is done
diff --git a/src/lib/components/button/NewProposalButton.tsx b/src/lib/components/button/NewProposalButton.tsx
index ad5294155..442ddb654 100644
--- a/src/lib/components/button/NewProposalButton.tsx
+++ b/src/lib/components/button/NewProposalButton.tsx
@@ -1,13 +1,17 @@
 import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
 
 import { Tooltip } from "../Tooltip";
-import { useCurrentNetwork, useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import { useGovParams } from "lib/services/proposalService";
+import { AccessConfigPermission } from "lib/types";
 
 export const NewProposalButton = () => {
   const navigate = useInternalNavigate();
-  const { isTestnet } = useCurrentNetwork();
+  const { data: govParams } = useGovParams();
+  const isPermissionless =
+    govParams?.uploadAccess.permission === AccessConfigPermission.EVERYBODY;
 
   return (
     <Menu>
@@ -41,12 +45,15 @@ export const NewProposalButton = () => {
           To Instantiate Contract
         </MenuItem> */}
         <Tooltip
-          label={isTestnet ? "Not available in testnet" : undefined}
-          placement="left"
+          label={
+            isPermissionless
+              ? "Not available in permissionless network"
+              : undefined
+          }
         >
           <MenuItem
-            isDisabled={isTestnet}
-            icon={<CustomIcon name="admin" color="gray.600" />}
+            isDisabled={isPermissionless}
+            icon={<CustomIcon name="admin" />}
             onClick={() => {
               navigate({
                 pathname: "/proposals/whitelist",
diff --git a/src/lib/components/dropzone/index.tsx b/src/lib/components/dropzone/index.tsx
index 53656e2df..7d08bb384 100644
--- a/src/lib/components/dropzone/index.tsx
+++ b/src/lib/components/dropzone/index.tsx
@@ -4,7 +4,7 @@ import { useCallback } from "react";
 import { useDropzone } from "react-dropzone";
 
 import { UploadIcon } from "../icon";
-import { MAX_FILE_SIZE } from "lib/data";
+import { useWasmConfig } from "lib/app-provider";
 
 interface DropZoneProps
   extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -12,6 +12,8 @@ interface DropZoneProps
 }
 
 export function DropZone({ setFile, ...componentProps }: DropZoneProps) {
+  const wasm = useWasmConfig({ shouldRedirect: false });
+
   const onDrop = useCallback(
     (file: File[]) => {
       setFile(file[0]);
@@ -25,7 +27,8 @@ export function DropZone({ setFile, ...componentProps }: DropZoneProps) {
     accept: {
       "application/wasm": [".wasm"],
     },
-    maxSize: MAX_FILE_SIZE,
+    // Throwing error when wasm is disabled will cause the page to not redirect, so default value is assigned instead
+    maxSize: wasm.enabled ? wasm.storeCodeMaxFileSize : 0,
   });
 
   return (
diff --git a/src/lib/components/modal/CodeSnippet.tsx b/src/lib/components/modal/CodeSnippet.tsx
index 22248fb1d..1621ed784 100644
--- a/src/lib/components/modal/CodeSnippet.tsx
+++ b/src/lib/components/modal/CodeSnippet.tsx
@@ -20,10 +20,14 @@ import AceEditor from "react-ace";
 import { CopyButton } from "../copy";
 import { CustomIcon } from "../icon";
 import { CURR_THEME } from "env";
-import { useLCDEndpoint } from "lib/app-provider";
+import {
+  useCelatoneApp,
+  useLCDEndpoint,
+  useRPCEndpoint,
+} from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import type { ContractAddr, Option } from "lib/types";
+import type { ContractAddr } from "lib/types";
 
 import "ace-builds/src-noconflict/ace";
 import "ace-builds/src-noconflict/mode-sh";
@@ -39,21 +43,6 @@ interface CodeSnippetProps {
   type: "query" | "execute";
 }
 
-/**
- *
- * @todo: This is a temporary solution to get the full RPC URL for Osmosis.
- */
-const getFullRpcUrl = (rpcUrl: Option<string>, chainId: Option<string>) => {
-  const baseUrl = rpcUrl?.slice(0, rpcUrl.length - 1);
-  switch (chainId) {
-    case "osmosis-1":
-    case "osmo-test-4":
-      return `${baseUrl}:443`;
-    default:
-      return `${baseUrl}:26657`;
-  }
-};
-
 const CodeSnippet = ({
   contractAddress,
   message,
@@ -62,11 +51,10 @@ const CodeSnippet = ({
   const { isOpen, onClose, onOpen } = useDisclosure();
   const { currentChainRecord, currentChainName } = useWallet();
   const isDisabled = !contractAddress || !message.length;
-
-  const endpoint = useLCDEndpoint();
   const client = currentChainRecord?.chain.daemon_name;
-  const rpcUrl = currentChainRecord?.preferredEndpoints?.rpc?.[0];
-  const chainId = currentChainRecord?.chain.chain_id;
+  const lcdEndpoint = useLCDEndpoint();
+  const rpcEndpoint = useRPCEndpoint();
+  const { currentChainId } = useCelatoneApp();
   const codeSnippets: Record<
     string,
     { name: string; mode: string; snippet: string }[]
@@ -75,10 +63,10 @@ const CodeSnippet = ({
       {
         name: "CLI",
         mode: "sh",
-        snippet: `export CHAIN_ID='${chainId}'\n
+        snippet: `export CHAIN_ID='${currentChainId}'\n
 export CONTRACT_ADDRESS='${contractAddress}'\n
 export QUERY_MSG='${message}'\n
-export RPC_URL='${getFullRpcUrl(rpcUrl, chainId)}'\n
+export RPC_URL='${rpcEndpoint}'\n
 ${client} query wasm contract-state smart $CONTRACT_ADDRESS $QUERY_MSG \\
   --chain-id $CHAIN_ID \\
   --node $RPC_URL`,
@@ -89,7 +77,7 @@ ${client} query wasm contract-state smart $CONTRACT_ADDRESS $QUERY_MSG \\
         snippet: `import base64
 import requests\n
 CONTRACT_ADDRESS = "${contractAddress}"
-LCD_URL = "${endpoint}"
+LCD_URL = "${lcdEndpoint}"
 QUERY_MSG = b'''${message}'''\n
 query_b64encoded = base64.b64encode(QUERY_MSG).decode("ascii")
 res = requests.get(
@@ -101,7 +89,7 @@ print(res)`,
         name: "CosmJS",
         mode: "javascript",
         snippet: `const { SigningCosmWasmClient } = require("@cosmjs/cosmwasm-stargate");
-const rpcURL = "${rpcUrl}";
+const rpcURL = "${rpcEndpoint}";
 const contractAddress =
 "${contractAddress}";
 const queryMsg = \`${message}\`;\n
@@ -119,7 +107,7 @@ queryContract(rpcURL, contractAddress, queryMsg);`,
         name: "Axios",
         mode: "javascript",
         snippet: `const axios = require('axios');\n
-const lcdURL = '${endpoint}';
+const lcdURL = '${lcdEndpoint}';
 const contractAddress =
 "${contractAddress}";
 const queryMsg = ${message};\n
@@ -136,8 +124,8 @@ queryContract();`,
         name: "CLI",
         mode: "sh",
         snippet: `${client} keys add --recover celatone\n
-export CHAIN_ID='${chainId}'\n
-export RPC_URL='${getFullRpcUrl(rpcUrl, chainId)}'\n
+export CHAIN_ID='${currentChainId}'\n
+export RPC_URL='${rpcEndpoint}'\n
 export CONTRACT_ADDRESS='${contractAddress}'\n
 export EXECUTE_MSG='${message}'\n
 ${client} tx wasm execute $CONTRACT_ADDRESS $EXECUTE_MSG \\
@@ -161,7 +149,7 @@ const contractAddress =
   '${contractAddress}';
 
 const execute = async () => {
-  const rpcEndpoint = '${rpcUrl}';
+  const rpcEndpoint = '${rpcEndpoint}';
   const signer = await getOfflineSignerAmino({ mnemonic, chain });
   const client = await SigningCosmWasmClient.connectWithSigner(
     rpcEndpoint,
diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx
index eabde7fa8..21c5134fd 100644
--- a/src/lib/components/modal/UnsupportedTokensModal.tsx
+++ b/src/lib/components/modal/UnsupportedTokensModal.tsx
@@ -12,14 +12,13 @@ import {
   Button,
   Heading,
 } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import { useMemo } from "react";
 
 import { ExplorerLink } from "../ExplorerLink";
 import type { IconKeys } from "../icon";
 import { CustomIcon } from "../icon";
 import { Tooltip } from "../Tooltip";
-import { useGetAddressType, getAddressTypeByLength } from "lib/app-provider";
+import { useGetAddressType, useGetAddressTypeByLength } from "lib/app-provider";
 import type { AddressReturnType } from "lib/app-provider";
 import { Copier } from "lib/components/copy";
 import { AmpTrackUnsupportedToken } from "lib/services/amplitude";
@@ -146,12 +145,12 @@ export const UnsupportedTokensModal = ({
   buttonProps,
   amptrackSection,
 }: UnsupportedTokensModalProps) => {
-  const { currentChainName } = useWallet();
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const getAddressTypeByLength = useGetAddressTypeByLength();
 
   if (unsupportedAssets.length === 0) return null;
 
-  const addressType = getAddressTypeByLength(currentChainName, address);
+  const addressType = getAddressTypeByLength(address);
   const content = unsupportedTokensContent(addressType);
 
   return (
diff --git a/src/lib/components/modal/code/CodeDetailsTemplate.tsx b/src/lib/components/modal/code/CodeDetailsTemplate.tsx
index a5be588a1..ef76c97fc 100644
--- a/src/lib/components/modal/code/CodeDetailsTemplate.tsx
+++ b/src/lib/components/modal/code/CodeDetailsTemplate.tsx
@@ -2,12 +2,11 @@ import { Flex, Text, useToast } from "@chakra-ui/react";
 import { useCallback, useEffect, useState } from "react";
 
 import { ActionModal } from "../ActionModal";
-import { useGetAddressType } from "lib/app-provider";
+import { useCelatoneApp, useGetAddressType } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { TextInput } from "lib/components/forms";
 import { CustomIcon } from "lib/components/icon";
 import { PermissionChip } from "lib/components/PermissionChip";
-import { MAX_CODE_NAME_LENGTH } from "lib/data";
 import { useCodeStore } from "lib/providers/store";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import type { Addr, CodeInfo } from "lib/types";
@@ -29,6 +28,7 @@ export const CodeDetailsTemplateModal = ({
   codeInfo,
   triggerElement,
 }: CodeDetailsTemplateModalProps) => {
+  const { constants } = useCelatoneApp();
   const { saveNewCode, updateCodeInfo } = useCodeStore();
   const toast = useToast();
   const getAddressType = useGetAddressType();
@@ -120,7 +120,7 @@ export const CodeDetailsTemplateModal = ({
         helperText="Fill in code name to define its use as a reminder"
         label="Code Name"
         labelBgColor="gray.900"
-        maxLength={MAX_CODE_NAME_LENGTH}
+        maxLength={constants.maxCodeNameLength}
       />
     </ActionModal>
   );
diff --git a/src/lib/components/modal/code/SaveNewCode.tsx b/src/lib/components/modal/code/SaveNewCode.tsx
index ad820d2d3..d8e9a7a25 100644
--- a/src/lib/components/modal/code/SaveNewCode.tsx
+++ b/src/lib/components/modal/code/SaveNewCode.tsx
@@ -5,11 +5,11 @@ import { useQuery } from "@tanstack/react-query";
 import { useEffect, useMemo, useState } from "react";
 
 import { ActionModal } from "../ActionModal";
-import { useLCDEndpoint } from "lib/app-provider";
+import { useCelatoneApp, useLCDEndpoint } from "lib/app-provider";
 import type { FormStatus } from "lib/components/forms";
 import { TextInput, NumberInput } from "lib/components/forms";
 import { CustomIcon } from "lib/components/icon";
-import { getMaxCodeNameLengthError, MAX_CODE_NAME_LENGTH } from "lib/data";
+import { useGetMaxLengthError } from "lib/hooks";
 import { useCodeStore } from "lib/providers/store";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { getCodeIdInfo } from "lib/services/code";
@@ -22,6 +22,9 @@ interface SaveNewCodeModalProps {
 
 export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
   const { address } = useWallet();
+  const { constants } = useCelatoneApp();
+  const getMaxLengthError = useGetMaxLengthError();
+
   /* STATE */
   const [codeId, setCodeId] = useState("");
   const [codeIdStatus, setCodeIdStatus] = useState<FormStatus>({
@@ -41,23 +44,23 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
     const trimedName = name.trim();
     if (trimedName.length === 0) {
       setNameStatus({ state: "init" });
-    } else if (trimedName.length > MAX_CODE_NAME_LENGTH)
+    } else if (trimedName.length > constants.maxCodeNameLength)
       setNameStatus({
         state: "error",
-        message: getMaxCodeNameLengthError(trimedName.length),
+        message: getMaxLengthError(trimedName.length, "code_name"),
       });
     else setNameStatus({ state: "success" });
-  }, [name]);
+  }, [constants.maxCodeNameLength, getMaxLengthError, name]);
 
   /* DEPENDENCY */
   const toast = useToast();
   const { isCodeIdSaved, saveNewCode, updateCodeInfo, getCodeLocalInfo } =
     useCodeStore();
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
 
   const { refetch, isFetching, isRefetching } = useQuery(
-    ["query", endpoint, codeId],
-    async () => getCodeIdInfo(endpoint, Number(codeId)),
+    ["query", lcdEndpoint, codeId],
+    async () => getCodeIdInfo(lcdEndpoint, Number(codeId)),
     {
       enabled: false,
       retry: false,
diff --git a/src/lib/components/modal/contract/SaveNewContract.tsx b/src/lib/components/modal/contract/SaveNewContract.tsx
index 29237ceee..98914d85d 100644
--- a/src/lib/components/modal/contract/SaveNewContract.tsx
+++ b/src/lib/components/modal/contract/SaveNewContract.tsx
@@ -41,13 +41,16 @@ export function SaveNewContractModal({
   list,
   buttonProps,
 }: SaveNewContractModalProps) {
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
+
   const { indexerGraphClient } = useCelatoneApp();
   const { getContractLocalInfo } = useContractStore();
   const { validateContractAddress } = useValidateAddress();
 
   const {
-    appContractAddress: { example: exampleContractAddress },
+    chainConfig: {
+      exampleAddresses: { contract: exampleContractAddress },
+    },
   } = useCelatoneApp();
   const initialList =
     list.value === formatSlugName(INSTANTIATED_LIST_NAME) ? [] : [list];
@@ -100,10 +103,10 @@ export function SaveNewContractModal({
 
   // TODO: Abstract query
   const { refetch } = useQuery(
-    ["query", "instantiate_info", endpoint, contractAddressState],
+    ["query", "instantiate_info", lcdEndpoint, contractAddressState],
     async () =>
       queryInstantiateInfo(
-        endpoint,
+        lcdEndpoint,
         indexerGraphClient,
         contractAddressState as ContractAddr
       ),
@@ -189,7 +192,7 @@ export function SaveNewContractModal({
     <ActionModal
       title="Save New Contract"
       icon="bookmark-solid"
-      trigger={<Button {...buttonProps} />}
+      trigger={<Button as="button" {...buttonProps} />}
       mainBtnTitle="Save"
       mainAction={handleSave}
       disabledMain={
diff --git a/src/lib/components/modal/list/CreateNewList.tsx b/src/lib/components/modal/list/CreateNewList.tsx
index bcd0fb548..568bc7b07 100644
--- a/src/lib/components/modal/list/CreateNewList.tsx
+++ b/src/lib/components/modal/list/CreateNewList.tsx
@@ -4,11 +4,11 @@ import { useCallback, useEffect, useState } from "react";
 import type { ReactNode } from "react";
 
 import { ActionModal } from "../ActionModal";
+import { useCelatoneApp } from "lib/app-provider";
 import type { FormStatus } from "lib/components/forms";
 import { TextInput } from "lib/components/forms";
 import { CustomIcon } from "lib/components/icon";
-import { getMaxListNameLengthError, MAX_LIST_NAME_LENGTH } from "lib/data";
-import { useUserKey } from "lib/hooks";
+import { useGetMaxLengthError, useUserKey } from "lib/hooks";
 import { useContractStore } from "lib/providers/store";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { shortenName } from "lib/utils";
@@ -28,6 +28,8 @@ export function CreateNewListModal({
   onCreate,
   onClose,
 }: CreateNewListModalProps) {
+  const { constants } = useCelatoneApp();
+  const getMaxLengthError = useGetMaxLengthError();
   const userKey = useUserKey();
   const { createNewList, isContractListExist } = useContractStore();
 
@@ -44,15 +46,21 @@ export function CreateNewListModal({
     const trimedListName = listName.trim();
     if (trimedListName.length === 0) {
       setStatus({ state: "init" });
-    } else if (trimedListName.length > MAX_LIST_NAME_LENGTH)
+    } else if (trimedListName.length > constants.maxListNameLength)
       setStatus({
         state: "error",
-        message: getMaxListNameLengthError(trimedListName.length),
+        message: getMaxLengthError(trimedListName.length, "list_name"),
       });
     else if (isContractListExist(userKey, trimedListName))
       setStatus({ state: "error", message: "Already existed" });
     else setStatus({ state: "success" });
-  }, [isContractListExist, listName, userKey]);
+  }, [
+    constants.maxListNameLength,
+    getMaxLengthError,
+    isContractListExist,
+    listName,
+    userKey,
+  ]);
 
   const toast = useToast();
   const handleCreate = useCallback(() => {
diff --git a/src/lib/components/modal/list/EditListName.tsx b/src/lib/components/modal/list/EditListName.tsx
index 6da72c8d4..100ac4708 100644
--- a/src/lib/components/modal/list/EditListName.tsx
+++ b/src/lib/components/modal/list/EditListName.tsx
@@ -2,13 +2,12 @@ import type { MenuItemProps } from "@chakra-ui/react";
 import { MenuItem, useToast } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useCelatoneApp, useInternalNavigate } from "lib/app-provider";
 import type { FormStatus } from "lib/components/forms";
 import { TextInput } from "lib/components/forms/TextInput";
 import { CustomIcon } from "lib/components/icon";
 import { ActionModal } from "lib/components/modal/ActionModal";
-import { getMaxListNameLengthError, MAX_LIST_NAME_LENGTH } from "lib/data";
-import { useUserKey } from "lib/hooks";
+import { useGetMaxLengthError, useUserKey } from "lib/hooks";
 import { useContractStore } from "lib/providers/store";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import type { LVPair } from "lib/types";
@@ -24,6 +23,8 @@ export function EditListNameModal({
   menuItemProps,
   reroute = false,
 }: EditListNameModalProps) {
+  const { constants } = useCelatoneApp();
+  const getMaxLengthError = useGetMaxLengthError();
   const userKey = useUserKey();
   const { renameList, isContractListExist } = useContractStore();
   const navigate = useInternalNavigate();
@@ -36,10 +37,10 @@ export function EditListNameModal({
     const trimedListName = listName.trim();
     if (trimedListName.length === 0) {
       setStatus({ state: "init" });
-    } else if (trimedListName.length > MAX_LIST_NAME_LENGTH)
+    } else if (trimedListName.length > constants.maxListNameLength)
       setStatus({
         state: "error",
-        message: getMaxListNameLengthError(trimedListName.length),
+        message: getMaxLengthError(trimedListName.length, "list_name"),
       });
     else if (
       formatSlugName(listName) !== list.value &&
@@ -47,7 +48,14 @@ export function EditListNameModal({
     )
       setStatus({ state: "error", message: "Already existed" });
     else setStatus({ state: "success" });
-  }, [isContractListExist, list.value, listName, userKey]);
+  }, [
+    constants.maxListNameLength,
+    getMaxLengthError,
+    isContractListExist,
+    list.value,
+    listName,
+    userKey,
+  ]);
 
   const toast = useToast();
   const handleSave = () => {
diff --git a/src/lib/components/select-contract/ContractListCard.tsx b/src/lib/components/select-contract/ContractListCard.tsx
index a84547001..9c351cfb1 100644
--- a/src/lib/components/select-contract/ContractListCard.tsx
+++ b/src/lib/components/select-contract/ContractListCard.tsx
@@ -11,9 +11,9 @@ import {
 
 import { CustomIcon } from "../icon";
 import { EditListNameModal, RemoveListModal } from "lib/components/modal";
-import { getListIcon, INSTANTIATED_LIST_NAME } from "lib/data";
+import { INSTANTIATED_LIST_NAME } from "lib/data";
 import type { ContractListInfo } from "lib/stores/contract";
-import { dateFromNow, formatSlugName } from "lib/utils";
+import { dateFromNow, formatSlugName, getListIcon } from "lib/utils";
 
 interface ContractListCardProps {
   item: ContractListInfo;
diff --git a/src/lib/components/select-contract/SelectContractInstantiator.tsx b/src/lib/components/select-contract/SelectContractInstantiator.tsx
index f8c5a16f8..30c6370f0 100644
--- a/src/lib/components/select-contract/SelectContractInstantiator.tsx
+++ b/src/lib/components/select-contract/SelectContractInstantiator.tsx
@@ -43,7 +43,9 @@ export const SelectContractInstantiator = ({
   onContractSelect,
 }: SelectContractInstantiatorProps) => {
   const {
-    appContractAddress: { example: exampleContractAddress },
+    chainConfig: {
+      exampleAddresses: { contract: exampleContractAddress },
+    },
   } = useCelatoneApp();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [listSlug, setListSlug] = useState("");
@@ -61,7 +63,7 @@ export const SelectContractInstantiator = ({
   const contractLists = [instantiatedListInfo, ...getContractLists()];
   const contractList = contractLists.find((item) => item.slug === listSlug);
 
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
 
   const resetOnClose = () => {
     setListSlug("");
@@ -78,8 +80,8 @@ export const SelectContractInstantiator = ({
 
   // TODO: Abstract query
   const { refetch, isFetching, isRefetching } = useQuery(
-    ["query", "contract", searchContract, endpoint],
-    async () => queryContract(endpoint, searchContract as ContractAddr),
+    ["query", "contract", lcdEndpoint, searchContract],
+    async () => queryContract(lcdEndpoint, searchContract as ContractAddr),
     {
       enabled: false,
       retry: false,
diff --git a/src/lib/components/state/NetworkErrorState.tsx b/src/lib/components/state/NetworkErrorState.tsx
new file mode 100644
index 000000000..c6967767e
--- /dev/null
+++ b/src/lib/components/state/NetworkErrorState.tsx
@@ -0,0 +1,66 @@
+import { Button, Flex, Heading, Image, Text } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+
+const bullets = [
+  "The configuration for your chosen chain hasn't been set up yet.",
+  "The network you selected is no longer supported.",
+  "It's possible that your link is either deprecated or misspelled.",
+];
+
+export const NetworkErrorState = () => {
+  const router = useRouter();
+  return (
+    <Flex
+      flexDir="column"
+      align="center"
+      justifyContent="center"
+      gap="48px"
+      h="100vh"
+      bg="background.main"
+    >
+      <Image
+        src="https://assets.alleslabs.dev/branding/logo/logo.svg"
+        alt="Celatone"
+        width="300px"
+      />
+      <Flex
+        flexDir="column"
+        align="center"
+        sx={{ "& > p": { lineHeight: "22px" } }}
+      >
+        <Image
+          src="https://assets.alleslabs.dev/illustration/search-not-found.svg"
+          alt="config_not_found"
+          width="152px"
+        />
+        <Heading as="h5" variant="h5" mt={6} mb={1} color="text.dark">
+          Network Error
+        </Heading>
+        <Text fontWeight={500} color="text.dark" variant="body2">
+          The network you chose is currently unavailable. Here are a few
+          possibilities:
+        </Text>
+        {bullets.map((bullet) => (
+          <Text
+            key={bullet}
+            fontWeight={500}
+            color="text.dark"
+            variant="body2"
+            alignSelf="start"
+          >
+            <Text as="span" mx={2} color="text.dark">
+              &#x2022;
+            </Text>
+            {bullet}
+          </Text>
+        ))}
+      </Flex>
+      <Button
+        variant="outline-primary"
+        onClick={() => router.replace("/", undefined)}
+      >
+        Go to Celatone Homepage
+      </Button>
+    </Flex>
+  );
+};
diff --git a/src/lib/components/table/codes/CodeNameCell.tsx b/src/lib/components/table/codes/CodeNameCell.tsx
index f4bb1f295..27ac8ff99 100644
--- a/src/lib/components/table/codes/CodeNameCell.tsx
+++ b/src/lib/components/table/codes/CodeNameCell.tsx
@@ -1,8 +1,8 @@
 import { useToast } from "@chakra-ui/react";
 
 import { EditableCell } from "../EditableCell";
+import { useCelatoneApp } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
-import { MAX_CODE_NAME_LENGTH } from "lib/data";
 import { useCodeStore } from "lib/providers/store";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import type { CodeLocalInfo } from "lib/stores/code";
@@ -16,6 +16,7 @@ export const CodeNameCell = ({
   code,
   isReadOnly = false,
 }: CodeNameCellProps) => {
+  const { constants } = useCelatoneApp();
   const toast = useToast();
   const { updateCodeInfo } = useCodeStore();
 
@@ -35,7 +36,7 @@ export const CodeNameCell = ({
     <EditableCell
       initialValue={code.name}
       defaultValue="Untitled Name"
-      maxLength={MAX_CODE_NAME_LENGTH}
+      maxLength={constants.maxCodeNameLength}
       onSave={onSave}
       isReadOnly={isReadOnly}
     />
diff --git a/src/lib/components/table/contracts/ContractNameCell.tsx b/src/lib/components/table/contracts/ContractNameCell.tsx
index d5b376d42..db44b80b3 100644
--- a/src/lib/components/table/contracts/ContractNameCell.tsx
+++ b/src/lib/components/table/contracts/ContractNameCell.tsx
@@ -1,5 +1,5 @@
 import { EditableCell } from "../EditableCell";
-import { MAX_CONTRACT_NAME_LENGTH } from "lib/data";
+import { useCelatoneApp } from "lib/app-provider";
 import { useHandleContractSave } from "lib/hooks/useHandleSave";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import type { ContractLocalInfo } from "lib/stores/contract";
@@ -13,6 +13,7 @@ export const ContractNameCell = ({
   contractLocalInfo,
   isReadOnly = false,
 }: ContractNameCellProps) => {
+  const { constants } = useCelatoneApp();
   const onSave = useHandleContractSave({
     title: "Changed name successfully!",
     contractAddress: contractLocalInfo.contractAddress,
@@ -24,7 +25,7 @@ export const ContractNameCell = ({
     <EditableCell
       initialValue={contractLocalInfo.name}
       defaultValue={contractLocalInfo.label}
-      maxLength={MAX_CONTRACT_NAME_LENGTH}
+      maxLength={constants.maxContractNameLength}
       tooltip={contractLocalInfo.description}
       isReadOnly={isReadOnly}
       onSave={!isReadOnly ? onSave : undefined}
diff --git a/src/lib/components/tx/modal/ButtonSection.tsx b/src/lib/components/tx/modal/ButtonSection.tsx
index 5447154e5..c305e7a03 100644
--- a/src/lib/components/tx/modal/ButtonSection.tsx
+++ b/src/lib/components/tx/modal/ButtonSection.tsx
@@ -1,9 +1,7 @@
 import { Button } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
 
-import { getExplorerProposalUrl } from "lib/app-fns/explorer";
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useCelatoneApp } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { openNewTab, useOpenTxTab } from "lib/hooks";
 import type { ActionVariant, TxReceipt } from "lib/types";
@@ -23,7 +21,11 @@ export const ButtonSection = ({
   const router = useRouter();
   const navigate = useInternalNavigate();
   const openTxTab = useOpenTxTab("tx-page");
-  const { currentChainName } = useWallet();
+  const {
+    chainConfig: {
+      explorerLink: { proposal: explorerProposal },
+    },
+  } = useCelatoneApp();
 
   const openTxExplorer = () => {
     const txHash = receipts
@@ -37,7 +39,7 @@ export const ButtonSection = ({
     const proposalId = receipts
       .find((r) => r.title === "Proposal ID")
       ?.value?.toString();
-    openNewTab(`${getExplorerProposalUrl(currentChainName)}/${proposalId}`);
+    openNewTab(`${explorerProposal}/${proposalId}`);
     onClose?.();
   };
 
diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index 2b179b9d4..ae7b60a20 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -7,6 +7,7 @@ import { useForm } from "react-hook-form";
 import { DropZone } from "../dropzone";
 import { ControllerInput } from "../forms";
 import {
+  useCelatoneApp,
   useFabricateFee,
   useSimulateFeeForStoreCode,
   useUploadContractTx,
@@ -14,7 +15,7 @@ import {
 } from "lib/app-provider";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
 import { CustomIcon } from "lib/components/icon";
-import { getMaxCodeNameLengthError, MAX_CODE_NAME_LENGTH } from "lib/data";
+import { useGetMaxLengthError } from "lib/hooks";
 import { useCodeStore } from "lib/providers/store";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
@@ -41,6 +42,8 @@ export const UploadSection = ({
   handleBack,
   isMigrate = false,
 }: UploadSectionProps) => {
+  const { constants } = useCelatoneApp();
+  const getMaxLengthError = useGetMaxLengthError();
   const fabricateFee = useFabricateFee();
   const { address } = useWallet();
   const { broadcast } = useTxBroadcast();
@@ -205,9 +208,11 @@ export const UploadSection = ({
         placeholder="Untitled Name"
         helperText="A short description of what your code does. This is stored locally on your device and can be added or changed later."
         rules={{
-          maxLength: MAX_CODE_NAME_LENGTH,
+          maxLength: constants.maxCodeNameLength,
         }}
-        error={errors.codeName && getMaxCodeNameLengthError(codeName.length)}
+        error={
+          errors.codeName && getMaxLengthError(codeName.length, "code_name")
+        }
         variant="floating"
       />
       <InstantiatePermissionRadio
diff --git a/src/lib/components/upload/types.ts b/src/lib/components/upload/types.ts
new file mode 100644
index 000000000..bba8f1d80
--- /dev/null
+++ b/src/lib/components/upload/types.ts
@@ -0,0 +1,11 @@
+import type { StdFee } from "@cosmjs/stargate";
+
+export type SimulateStatus = "pending" | "completed" | "failed";
+
+export interface UploadSectionState {
+  wasmFile?: File;
+  codeName: string;
+  estimatedFee?: StdFee;
+  simulateStatus: SimulateStatus;
+  simulateError: string;
+}
diff --git a/src/lib/data/chain.ts b/src/lib/data/chain.ts
deleted file mode 100644
index 28d9f9171..000000000
--- a/src/lib/data/chain.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { SELECTED_CHAIN } from "env";
-import type { Option } from "lib/types";
-
-export type SupportedChain = "osmosis" | "terra" | "mitosis";
-
-interface Chain {
-  mainnet: string;
-  testnet: string;
-  localnet?: string;
-}
-
-export type Network = keyof Chain;
-
-export const TERRA_CHAINS: Chain = {
-  mainnet: "terra2",
-  testnet: "terra2testnet",
-};
-
-export const OSMOSIS_CHAINS: Chain = {
-  mainnet: "osmosis",
-  testnet: "osmosistestnet5",
-};
-
-// TODO: Remove this when mitosis is ready
-export const MITOSIS_CHAINS: Chain = {
-  mainnet: "osmosis",
-  testnet: "osmosistestnet5",
-};
-
-export const getSupportedChainNames = (): SupportedChain[] => {
-  switch (SELECTED_CHAIN) {
-    case "terra":
-      return Object.values(TERRA_CHAINS);
-    case "osmosis":
-      return Object.values(OSMOSIS_CHAINS);
-    case "mitosis":
-      return Object.values(MITOSIS_CHAINS);
-    default:
-      throw new Error(`Unsupported chain: ${SELECTED_CHAIN}`);
-  }
-};
-
-/**
- *
- * @param network network name from router.query.network
- * @returns chain name
- * @throws Error if network doesn't match any of the supported networks
- */
-export const getChainNameByNetwork = (network: Network): string => {
-  switch (SELECTED_CHAIN) {
-    case "terra":
-      return TERRA_CHAINS[network] ?? TERRA_CHAINS.mainnet;
-    case "osmosis":
-      return OSMOSIS_CHAINS[network] ?? OSMOSIS_CHAINS.mainnet;
-    case "mitosis":
-      return MITOSIS_CHAINS[network] ?? MITOSIS_CHAINS.mainnet;
-    default:
-      throw new Error(`Unsupported chain: ${SELECTED_CHAIN}`);
-  }
-};
-
-export const getNetworkByChainName = (chainName: string): Network => {
-  let network: Option<Network>;
-
-  switch (SELECTED_CHAIN) {
-    case "terra":
-      network = (Object.keys(TERRA_CHAINS) as Network[]).find(
-        (each) => TERRA_CHAINS[each as keyof Chain] === chainName
-      );
-      break;
-    case "osmosis":
-      network = (Object.keys(OSMOSIS_CHAINS) as Network[]).find(
-        (each) => OSMOSIS_CHAINS[each as keyof Chain] === chainName
-      );
-      break;
-    case "mitosis":
-      network = (Object.keys(MITOSIS_CHAINS) as Network[]).find(
-        (each) => MITOSIS_CHAINS[each as keyof Chain] === chainName
-      );
-      break;
-    default:
-      throw new Error(`Unsupported chain: ${SELECTED_CHAIN}`);
-  }
-
-  if (!network)
-    throw new Error(
-      `Can't find network for chain name: ${chainName} and chain: ${SELECTED_CHAIN}`
-    );
-
-  return network;
-};
-
-interface ChainConfig {
-  isWasm: boolean;
-}
-
-const CHAIN_CONFIG: Record<SupportedChain, ChainConfig> = {
-  osmosis: {
-    isWasm: true,
-  },
-  terra: {
-    isWasm: true,
-  },
-  mitosis: {
-    isWasm: false,
-  },
-};
-
-export const getChainConfig = () => {
-  if (!SELECTED_CHAIN)
-    throw new Error(`${SELECTED_CHAIN} - environment variable not found`);
-  if (!CHAIN_CONFIG[SELECTED_CHAIN])
-    throw new Error(`Chain not found in chain config`);
-  return CHAIN_CONFIG[SELECTED_CHAIN];
-};
diff --git a/src/lib/data/constant.ts b/src/lib/data/constant.ts
index 5c8ddeb56..a2c30d734 100644
--- a/src/lib/data/constant.ts
+++ b/src/lib/data/constant.ts
@@ -1,4 +1,3 @@
-import type { IconKeys } from "lib/components/icon";
 import type { LVPair } from "lib/types";
 import { MsgType } from "lib/types";
 /**
@@ -13,47 +12,6 @@ export const SAVED_LIST_NAME = "Saved Contracts";
 // special slug with all cap letters to avoid conflict with any list
 export const ADMIN_SPECIAL_SLUG = "ADMIN";
 
-export const getMaxLengthError = (
-  field: string,
-  currentLength: number,
-  maxLength: number
-) => {
-  return currentLength > maxLength
-    ? `${field} is too long. (${currentLength}/${maxLength})`
-    : undefined;
-};
-
-export const MAX_LIST_NAME_LENGTH = 50;
-export const getMaxListNameLengthError = (currentLength: number) =>
-  getMaxLengthError("List name", currentLength, MAX_LIST_NAME_LENGTH);
-
-export const MAX_CONTRACT_NAME_LENGTH = 50;
-export const getMaxContractNameLengthError = (currentLength: number) =>
-  getMaxLengthError("Contract name", currentLength, MAX_CONTRACT_NAME_LENGTH);
-
-export const MAX_CONTRACT_DESCRIPTION_LENGTH = 250;
-export const getMaxContractDescriptionLengthError = (currentLength: number) =>
-  getMaxLengthError(
-    "Contract description",
-    currentLength,
-    MAX_CONTRACT_DESCRIPTION_LENGTH
-  );
-
-export const MAX_CODE_NAME_LENGTH = 50;
-export const getMaxCodeNameLengthError = (currentLength: number) =>
-  getMaxLengthError("Code name", currentLength, MAX_CODE_NAME_LENGTH);
-
-export const getListIcon = (listName: string): IconKeys => {
-  switch (listName) {
-    case INSTANTIATED_LIST_NAME:
-      return "wallet";
-    case SAVED_LIST_NAME:
-      return "bookmark-solid";
-    default:
-      return "contract-list";
-  }
-};
-
 export const DEFAULT_LIST: LVPair[] = [
   {
     label: SAVED_LIST_NAME,
@@ -63,10 +21,6 @@ export const DEFAULT_LIST: LVPair[] = [
 
 export const DEFAULT_ADDRESS = "default-address";
 
-export const MAX_FILE_SIZE = 800_000;
-
-export const CLEAR_ADMIN_GAS = 50_000;
-
 export const MICRO = 1_000_000;
 
 export const typeUrlDict = {
diff --git a/src/lib/data/index.ts b/src/lib/data/index.ts
index 846ec3a18..f5dadcaf8 100644
--- a/src/lib/data/index.ts
+++ b/src/lib/data/index.ts
@@ -1,4 +1,3 @@
 export * from "./constant";
-export * from "./chain";
 export * from "./proposalStoreCode";
 export * from "./tx";
diff --git a/src/lib/data/proposalWhitelist.tsx b/src/lib/data/proposalWhitelist.tsx
deleted file mode 100644
index 7b10fd2c9..000000000
--- a/src/lib/data/proposalWhitelist.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { getMaxLengthError } from "./constant";
-
-export const MAX_PROPOSAL_TITLE_LENGTH = 255;
-export const getMaxProposalTitleLengthError = (currentLength: number) =>
-  getMaxLengthError("Proposal Title", currentLength, MAX_PROPOSAL_TITLE_LENGTH);
diff --git a/src/lib/hooks/index.ts b/src/lib/hooks/index.ts
index d9ecb71b0..62a7c4777 100644
--- a/src/lib/hooks/index.ts
+++ b/src/lib/hooks/index.ts
@@ -8,3 +8,4 @@ export * from "./useToast";
 export * from "./useUserKey";
 export * from "./useOpenTxTab";
 export * from "./useIsCurrentPage";
+export * from "./useGetMaxLengthError";
diff --git a/src/lib/hooks/useCodeFilter.ts b/src/lib/hooks/useCodeFilter.ts
index 95b96e5d0..62aa8b390 100644
--- a/src/lib/hooks/useCodeFilter.ts
+++ b/src/lib/hooks/useCodeFilter.ts
@@ -2,7 +2,7 @@ import { useWallet } from "@cosmos-kit/react";
 import { useCallback } from "react";
 
 import type { CodeInfo, HumanAddr } from "lib/types";
-import { AccessConfigPermission } from "lib/types";
+import { resolvePermission } from "lib/utils";
 
 export type PermissionFilterValue =
   | "all"
@@ -13,9 +13,11 @@ export const useCodePermissionFilter = (filterValue: PermissionFilterValue) => {
   const { address } = useWallet();
   return useCallback(
     ({ instantiatePermission, permissionAddresses }: CodeInfo) => {
-      const isAllowed =
-        permissionAddresses.includes(address as HumanAddr) ||
-        instantiatePermission === AccessConfigPermission.EVERYBODY;
+      const isAllowed = resolvePermission(
+        address as HumanAddr,
+        instantiatePermission,
+        permissionAddresses
+      );
 
       switch (filterValue) {
         case "with-proposal":
diff --git a/src/lib/hooks/useGetMaxLengthError.ts b/src/lib/hooks/useGetMaxLengthError.ts
new file mode 100644
index 000000000..02e15b5de
--- /dev/null
+++ b/src/lib/hooks/useGetMaxLengthError.ts
@@ -0,0 +1,39 @@
+import { useCallback } from "react";
+
+import { useCelatoneApp } from "lib/app-provider";
+
+type MaxLengthType =
+  | "contract_name"
+  | "contract_desc"
+  | "code_name"
+  | "proposal_title"
+  | "list_name";
+
+export const useGetMaxLengthError = () => {
+  const { constants } = useCelatoneApp();
+  return useCallback(
+    (currentLength: number, type: MaxLengthType) => {
+      const maxLengthMap: Record<MaxLengthType, number> = {
+        contract_name: constants.maxContractNameLength,
+        contract_desc: constants.maxContractDescriptionLength,
+        code_name: constants.maxCodeNameLength,
+        proposal_title: constants.maxProposalTitleLength,
+        list_name: constants.maxListNameLength,
+      };
+
+      const fieldMap: Record<MaxLengthType, string> = {
+        contract_name: "Contract name",
+        contract_desc: "Contract description",
+        code_name: "Code name",
+        proposal_title: "Proposal title",
+        list_name: "List name",
+      };
+
+      const maxLength = maxLengthMap[type] ?? 0;
+      const fieldName = fieldMap[type] ?? "Unknown field";
+
+      return `${fieldName} is too long. (${currentLength}/${maxLength})`;
+    },
+    [constants]
+  );
+};
diff --git a/src/lib/hooks/useOpenTxTab.ts b/src/lib/hooks/useOpenTxTab.ts
index 4fa1f29ab..a8717bde7 100644
--- a/src/lib/hooks/useOpenTxTab.ts
+++ b/src/lib/hooks/useOpenTxTab.ts
@@ -1,23 +1,15 @@
-import { useWallet } from "@cosmos-kit/react";
 import { useCallback } from "react";
 
-import { CELATONE_API_ENDPOINT, getChainApiPath } from "env";
-import { useChainId } from "lib/app-provider";
-import { getNetworkByChainName } from "lib/data";
+import { useBaseApiRoute, useCelatoneApp } from "lib/app-provider";
 import type { Option } from "lib/types";
 
 export const openNewTab = (url: string) =>
   window.open(url, "_blank", "noopener,noreferrer");
 
 export const useOpenTxTab = (type: "lcd" | "tx-page") => {
-  const { currentChainName } = useWallet();
-  const chainId = useChainId();
-  const baseUrl =
-    type === "lcd"
-      ? `${CELATONE_API_ENDPOINT}/txs/${getChainApiPath(
-          currentChainName
-        )}/${chainId}`
-      : `/${getNetworkByChainName(currentChainName)}/txs`;
+  const { currentChainId } = useCelatoneApp();
+  const txsApiRoute = useBaseApiRoute("txs");
+  const baseUrl = type === "lcd" ? txsApiRoute : `/${currentChainId}/txs`;
 
   return useCallback(
     (txHash: Option<string>) => {
diff --git a/src/lib/hooks/useQueryCmds.ts b/src/lib/hooks/useQueryCmds.ts
index 7286a7229..13b252782 100644
--- a/src/lib/hooks/useQueryCmds.ts
+++ b/src/lib/hooks/useQueryCmds.ts
@@ -8,12 +8,12 @@ import type { ContractAddr, RpcQueryError } from "lib/types";
 
 export const useQueryCmds = (contractAddress: ContractAddr) => {
   const [queryCmds, setQueryCmds] = useState<[string, string][]>([]);
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
 
   const { isFetching } = useQuery(
-    ["query", "cmds", endpoint, contractAddress, '{"": {}}'],
+    ["query", "cmds", lcdEndpoint, contractAddress, '{"": {}}'],
     async () =>
-      queryData(endpoint, contractAddress as ContractAddr, '{"": {}}'),
+      queryData(lcdEndpoint, contractAddress as ContractAddr, '{"": {}}'),
     {
       enabled: !!contractAddress,
       retry: false,
diff --git a/src/lib/hooks/useSingleMessageProps.ts b/src/lib/hooks/useSingleMessageProps.ts
index 821066399..1a1f25f8f 100644
--- a/src/lib/hooks/useSingleMessageProps.ts
+++ b/src/lib/hooks/useSingleMessageProps.ts
@@ -1,7 +1,7 @@
-import { useWallet } from "@cosmos-kit/react";
 import router from "next/router";
 
-import { getAddressTypeByLength } from "lib/app-provider";
+import type { GetAddressTypeByLengthFn } from "lib/app-provider";
+import { useGetAddressTypeByLength } from "lib/app-provider";
 import type { SingleMsgProps } from "lib/components/action-msg/SingleMsg";
 import type { LinkType } from "lib/components/ExplorerLink";
 import { useContractStore } from "lib/providers/store";
@@ -34,7 +34,6 @@ import { getFirstQueryParam, getExecuteMsgTags } from "lib/utils";
  *
  * @param isSuccess - boolean of whether tx is succeed or not
  * @param messages - list of messages
- * @param chainName - chain name
  * @param getContractLocalInfo - contract local info
  * @param isInstantiate2 - boolean of whether the message is instantiate2 or not
  *
@@ -44,11 +43,11 @@ import { getFirstQueryParam, getExecuteMsgTags } from "lib/utils";
 const instantiateSingleMsgProps = (
   isSuccess: boolean,
   messages: Message[],
-  chainName: string,
   getContractLocalInfo: (
     contractAddress: ContractAddr
   ) => Option<ContractLocalInfo>,
-  isInstantiate2: boolean
+  isInstantiate2: boolean,
+  getAddressTypeByLength: GetAddressTypeByLengthFn
 ) => {
   const detail = messages[0].detail as DetailInstantiate;
   // TODO - revisit, instantiate detail response when query from contract transaction table doesn't contain contract addr
@@ -79,7 +78,7 @@ const instantiateSingleMsgProps = (
         type,
         text1: "contract",
         link1: {
-          type: getAddressTypeByLength(chainName, contractAddress),
+          type: getAddressTypeByLength(contractAddress),
           value: contractLocalInfo?.name || contractAddress,
           copyValue: contractAddress,
         },
@@ -114,7 +113,6 @@ const instantiateSingleMsgProps = (
  *
  * @param isSuccess - boolean of whether tx is succeed or not
  * @param messages - list of messages
- * @param chainName - chain name
  * @param singleMsg - true when use in accordion
  * @param getContractLocalInfo - contract local info
  *
@@ -124,11 +122,11 @@ const instantiateSingleMsgProps = (
 const executeSingleMsgProps = (
   isSuccess: boolean,
   messages: Message[],
-  chainName: string,
   singleMsg: Option<boolean>,
   getContractLocalInfo: (
     contractAddress: ContractAddr
-  ) => Option<ContractLocalInfo>
+  ) => Option<ContractLocalInfo>,
+  getAddressTypeByLength: GetAddressTypeByLengthFn
 ) => {
   const detail = messages[0].detail as DetailExecute;
   const contractLocalInfo = getContractLocalInfo(detail.contract);
@@ -160,7 +158,7 @@ const executeSingleMsgProps = (
           length: messages.length,
           text2: "messages on",
           link2: {
-            type: getAddressTypeByLength(chainName, detail.contract),
+            type: getAddressTypeByLength(detail.contract),
             value: contractLocalInfo?.name || detail.contract,
             copyValue: detail.contract,
           },
@@ -171,7 +169,7 @@ const executeSingleMsgProps = (
           length: messages.length,
           text2: "messages on",
           link2: {
-            type: getAddressTypeByLength(chainName, detail.contract),
+            type: getAddressTypeByLength(detail.contract),
             value: contractLocalInfo?.name || detail.contract,
             copyValue: detail.contract,
           },
@@ -184,7 +182,7 @@ const executeSingleMsgProps = (
         tags: getExecuteMsgTags(messages, singleMsg ? 1 : 2),
         text2: "on",
         link2: {
-          type: getAddressTypeByLength(chainName, detail.contract),
+          type: getAddressTypeByLength(detail.contract),
           value: contractLocalInfo?.name || detail.contract,
           copyValue: detail.contract,
         },
@@ -193,7 +191,7 @@ const executeSingleMsgProps = (
         type: "Failed",
         text1: "to execute message from",
         link1: {
-          type: getAddressTypeByLength(chainName, detail.contract),
+          type: getAddressTypeByLength(detail.contract),
           value: contractLocalInfo?.name || detail.contract,
           copyValue: detail.contract,
         },
@@ -215,7 +213,6 @@ const executeSingleMsgProps = (
  *
  * @param isSuccess - boolean of whether tx is succeed or not
  * @param messages - list of messages
- * @param chainName - chain name
  * @param assetInfos - information of assets
  * @param getContractLocalInfo - contract local info
  *
@@ -225,11 +222,11 @@ const executeSingleMsgProps = (
 const sendSingleMsgProps = (
   isSuccess: boolean,
   messages: Message[],
-  chainName: string,
   assetInfos: Option<Record<string, AssetInfo>>,
   getContractLocalInfo: (
     contractAddress: ContractAddr
-  ) => Option<ContractLocalInfo>
+  ) => Option<ContractLocalInfo>,
+  getAddressTypeByLength: GetAddressTypeByLengthFn
 ) => {
   const detail = messages[0].detail as DetailSend;
   const contractLocalInfo = getContractLocalInfo(
@@ -272,7 +269,7 @@ const sendSingleMsgProps = (
           type: "Send",
           text1: "assets to",
           link2: {
-            type: getAddressTypeByLength(chainName, detail.toAddress),
+            type: getAddressTypeByLength(detail.toAddress),
             value: contractLocalInfo?.name || detail.toAddress,
             copyValue: detail.toAddress,
           },
@@ -281,7 +278,7 @@ const sendSingleMsgProps = (
           type: "Failed",
           text1: "to send assets to",
           link2: {
-            type: getAddressTypeByLength(chainName, detail.toAddress),
+            type: getAddressTypeByLength(detail.toAddress),
             value: contractLocalInfo?.name || detail.toAddress,
             copyValue: detail.toAddress,
           },
@@ -293,7 +290,7 @@ const sendSingleMsgProps = (
         tokens,
         text2: "to",
         link1: {
-          type: getAddressTypeByLength(chainName, detail.toAddress),
+          type: getAddressTypeByLength(detail.toAddress),
           value: detail.toAddress,
         },
       }
@@ -301,7 +298,7 @@ const sendSingleMsgProps = (
         type: "Failed",
         text1: "to send assets to",
         link1: {
-          type: getAddressTypeByLength(chainName, detail.toAddress),
+          type: getAddressTypeByLength(detail.toAddress),
           value: detail.toAddress,
         },
       };
@@ -318,7 +315,6 @@ const sendSingleMsgProps = (
  *
  * @param isSuccess - boolean of whether tx is succeed or not
  * @param messages - list of messages
- * @param chainName - chain name
  * @param getContractLocalInfo - contract local info
  *
  * @returns msgProps use in <SingleMsg />
@@ -327,10 +323,10 @@ const sendSingleMsgProps = (
 const migrateSingleMsgProps = (
   isSuccess: boolean,
   messages: Message[],
-  chainName: string,
   getContractLocalInfo: (
     contractAddress: ContractAddr
-  ) => Option<ContractLocalInfo>
+  ) => Option<ContractLocalInfo>,
+  getAddressTypeByLength: GetAddressTypeByLengthFn
 ) => {
   const detail = messages[0].detail as DetailMigrate;
   const contractLocalInfo = getContractLocalInfo(detail.contract);
@@ -353,7 +349,7 @@ const migrateSingleMsgProps = (
     ? {
         type: "Migrate",
         link1: {
-          type: getAddressTypeByLength(chainName, detail.contract),
+          type: getAddressTypeByLength(detail.contract),
           value: contractLocalInfo?.name || detail.contract,
           copyValue: detail.contract,
         },
@@ -385,7 +381,6 @@ const migrateSingleMsgProps = (
  *
  * @param isSuccess - boolean of whether tx is succeed or not
  * @param messages - list of messages
- * @param chainName - chain name
  * @param getContractLocalInfo - contract local info
  * 
  * @returns msgProps use in <SingleMsg />
@@ -394,10 +389,10 @@ const migrateSingleMsgProps = (
 const updateAdminSingleMsgProps = (
   isSuccess: boolean,
   messages: Message[],
-  chainName: string,
   getContractLocalInfo: (
     contractAddress: ContractAddr
-  ) => Option<ContractLocalInfo>
+  ) => Option<ContractLocalInfo>,
+  getAddressTypeByLength: GetAddressTypeByLengthFn
 ) => {
   const detail = messages[0].detail as DetailUpdateAdmin;
   const contractLocalInfo = getContractLocalInfo(detail.contract);
@@ -422,13 +417,13 @@ const updateAdminSingleMsgProps = (
         type: "Update admin",
         text1: "on",
         link1: {
-          type: getAddressTypeByLength(chainName, detail.contract),
+          type: getAddressTypeByLength(detail.contract),
           value: contractLocalInfo?.name || detail.contract,
           copyValue: detail.contract,
         },
         text3: "to",
         link2: {
-          type: getAddressTypeByLength(chainName, detail.newAdmin),
+          type: getAddressTypeByLength(detail.newAdmin),
           value: adminLocalInfo?.name || detail.newAdmin,
         },
       }
@@ -436,13 +431,13 @@ const updateAdminSingleMsgProps = (
         type: "Failed",
         text1: "to update admin on",
         link1: {
-          type: getAddressTypeByLength(chainName, detail.contract),
+          type: getAddressTypeByLength(detail.contract),
           value: contractLocalInfo?.name || detail.contract,
           copyValue: detail.contract,
         },
         text3: "to",
         link2: {
-          type: getAddressTypeByLength(chainName, detail.newAdmin),
+          type: getAddressTypeByLength(detail.newAdmin),
           value: adminLocalInfo?.name || detail.newAdmin,
         },
       };
@@ -459,7 +454,6 @@ const updateAdminSingleMsgProps = (
  *
  * @param isSuccess - boolean of whether tx is succeed or not
  * @param messages - list of messages
- * @param chainName - chain name
  * @param getContractLocalInfo - contract local info
  *
  * @returns msgProps use in <SingleMsg />
@@ -468,10 +462,10 @@ const updateAdminSingleMsgProps = (
 const clearAdminSingleMsgProps = (
   isSuccess: boolean,
   messages: Message[],
-  chainName: string,
   getContractLocalInfo: (
     contractAddress: ContractAddr
-  ) => Option<ContractLocalInfo>
+  ) => Option<ContractLocalInfo>,
+  getAddressTypeByLength: GetAddressTypeByLengthFn
 ) => {
   const detail = messages[0].detail as DetailClearAdmin;
   const contractLocalInfo = getContractLocalInfo(detail.contract);
@@ -496,7 +490,7 @@ const clearAdminSingleMsgProps = (
         type: "Clear admin",
         text1: "on",
         link1: {
-          type: getAddressTypeByLength(chainName, detail.contract),
+          type: getAddressTypeByLength(detail.contract),
           value: contractLocalInfo?.name || detail.contract,
           copyValue: detail.contract,
         },
@@ -505,7 +499,7 @@ const clearAdminSingleMsgProps = (
         type: "Failed",
         text1: "to clear admin on",
         link1: {
-          type: getAddressTypeByLength(chainName, detail.contract),
+          type: getAddressTypeByLength(detail.contract),
           value: contractLocalInfo?.name || detail.contract,
           copyValue: detail.contract,
         },
@@ -597,63 +591,63 @@ export const useSingleActionMsgProps = (
   messages: Message[],
   singleMsg: Option<boolean>
 ): SingleMsgProps => {
-  const { currentChainName } = useWallet();
   const { getContractLocalInfo } = useContractStore();
   const { assetInfos } = useAssetInfos();
+  const getAddressTypeByLength = useGetAddressTypeByLength();
 
   switch (type) {
     case "MsgExecuteContract":
       return executeSingleMsgProps(
         isSuccess,
         messages,
-        currentChainName,
         singleMsg,
-        getContractLocalInfo
+        getContractLocalInfo,
+        getAddressTypeByLength
       );
     case "MsgSend":
       return sendSingleMsgProps(
         isSuccess,
         messages,
-        currentChainName,
         assetInfos,
-        getContractLocalInfo
+        getContractLocalInfo,
+        getAddressTypeByLength
       );
     case "MsgMigrateContract":
       return migrateSingleMsgProps(
         isSuccess,
         messages,
-        currentChainName,
-        getContractLocalInfo
+        getContractLocalInfo,
+        getAddressTypeByLength
       );
     case "MsgInstantiateContract":
       return instantiateSingleMsgProps(
         isSuccess,
         messages,
-        currentChainName,
         getContractLocalInfo,
-        false
+        false,
+        getAddressTypeByLength
       );
     case "MsgInstantiateContract2":
       return instantiateSingleMsgProps(
         isSuccess,
         messages,
-        currentChainName,
         getContractLocalInfo,
-        true
+        true,
+        getAddressTypeByLength
       );
     case "MsgUpdateAdmin":
       return updateAdminSingleMsgProps(
         isSuccess,
         messages,
-        currentChainName,
-        getContractLocalInfo
+        getContractLocalInfo,
+        getAddressTypeByLength
       );
     case "MsgClearAdmin":
       return clearAdminSingleMsgProps(
         isSuccess,
         messages,
-        currentChainName,
-        getContractLocalInfo
+        getContractLocalInfo,
+        getAddressTypeByLength
       );
     case "MsgStoreCode":
       return storeCodeSingleMsgProps(isSuccess, messages);
diff --git a/src/lib/layout/Header.tsx b/src/lib/layout/Header.tsx
index 4ef5d4699..8c7cba852 100644
--- a/src/lib/layout/Header.tsx
+++ b/src/lib/layout/Header.tsx
@@ -7,21 +7,20 @@ import {
   MenuItem,
   Image,
 } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
+import { CHAIN_CONFIGS } from "config";
 import { CURR_THEME } from "env";
-import { useSelectChain } from "lib/app-provider";
+import { useCelatoneApp, useSelectChain } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import { FaucetBtn } from "lib/components/button";
 import { CustomIcon } from "lib/components/icon";
 import { WalletSection } from "lib/components/Wallet";
-import { getSupportedChainNames } from "lib/data";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 
 import Searchbar from "./Searchbar";
 
 const Header = () => {
-  const { currentChainRecord, currentChainName, getChainRecord } = useWallet();
+  const { availableChainIds, currentChainId } = useCelatoneApp();
   const selectChain = useSelectChain();
 
   return (
@@ -74,40 +73,44 @@ const Header = () => {
                 whiteSpace="nowrap"
                 maxW="170px"
               >
-                {currentChainRecord?.chain.chain_id}
+                {currentChainId}
               </Text>
               <CustomIcon name="chevron-down" color="gray.600" />
             </Flex>
           </MenuButton>
           <MenuList zIndex="dropdown">
-            {getSupportedChainNames().map((chainName) => (
-              <MenuItem
-                key={chainName}
-                onClick={() => {
-                  selectChain(chainName);
-                }}
-                flexDirection="column"
-                alignItems="flex-start"
-                _hover={{
-                  backgroundColor: "gray.800",
-                }}
-                transition="all .25s ease-in-out"
-              >
-                <Flex justify="space-between" align="center" w="full">
-                  <Flex direction="column">
-                    <Text variant="body2">
-                      {getChainRecord(chainName)?.chain.pretty_name}
-                    </Text>
-                    <Text color="text.dark" variant="body3">
-                      {getChainRecord(chainName)?.chain.chain_id}
-                    </Text>
+            {availableChainIds.map((chainId) => {
+              const noConfig = !(chainId in CHAIN_CONFIGS);
+              return (
+                <MenuItem
+                  key={chainId}
+                  onClick={() => {
+                    selectChain(chainId);
+                  }}
+                  flexDirection="column"
+                  alignItems="flex-start"
+                  _hover={{
+                    backgroundColor: "gray.800",
+                  }}
+                  transition="all .25s ease-in-out"
+                  isDisabled={noConfig}
+                >
+                  <Flex justify="space-between" align="center" w="full">
+                    <Flex direction="column">
+                      <Text variant="body2">
+                        {CHAIN_CONFIGS[chainId]?.prettyName || chainId}
+                      </Text>
+                      <Text color="text.dark" variant="body3">
+                        {chainId}
+                      </Text>
+                    </Flex>
+                    {chainId === currentChainId && (
+                      <CustomIcon name="check" boxSize={3} color="gray.600" />
+                    )}
                   </Flex>
-                  {chainName === currentChainName && (
-                    <CustomIcon name="check" boxSize={3} color="gray.600" />
-                  )}
-                </Flex>
-              </MenuItem>
-            ))}
+                </MenuItem>
+              );
+            })}
           </MenuList>
         </Menu>
         <WalletSection />
diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx
index 2afea1589..38f67d2ef 100644
--- a/src/lib/layout/Searchbar.tsx
+++ b/src/lib/layout/Searchbar.tsx
@@ -7,62 +7,77 @@ import {
   FormControl,
   Text,
   useOutsideClick,
+  Spinner,
+  chakra,
 } from "@chakra-ui/react";
+import { useCallback, useRef, useState } from "react";
 import type { ChangeEvent, KeyboardEvent } from "react";
-import { useRef, useEffect, useState } from "react";
 
-import { useInternalNavigate, useValidateAddress } from "lib/app-provider";
+import { useCelatoneApp, useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
-import { getChainConfig } from "lib/data";
 import { AmpTrackUseMainSearch } from "lib/services/amplitude";
-import { isBlock, isCodeId, isTxHash } from "lib/utils";
+import type { SearchResultType } from "lib/services/searchService";
+import { useSearchHandler } from "lib/services/searchService";
+import type { Option } from "lib/types";
 
-type SearchResultType =
-  | "Code ID"
-  | "Contract Address"
-  | "Wallet Address"
-  | "Transaction Hash"
-  | "Proposal ID"
-  | "Block";
-
-const NOT_FOUND =
+const NOT_FOUND_MSG =
   "Matches not found. Please check your spelling or make sure you have selected the correct network.";
-const NOT_SUPPORTED =
-  "We currently only support searching by contract address and code ID.";
 
+const StyledListItem = chakra(ListItem, {
+  baseStyle: {
+    p: 2,
+    borderBottomColor: "gray.700",
+    bg: "gray.900",
+  },
+});
 interface ResultItemProps {
-  type?: SearchResultType;
+  index: number;
+  type: SearchResultType;
   value: string;
+  cursor: Option<number>;
+  setCursor: (index: Option<number>) => void;
   handleSelectResult: (type?: SearchResultType, isClick?: boolean) => void;
 }
 
-const getRoute = (type: SearchResultType) => {
+const getRouteOptions = (
+  type: Option<SearchResultType>
+): { pathname: string; query: string } | null => {
   switch (type) {
-    case "Code ID":
-      return "/codes";
-    case "Contract Address":
-      return "/contracts";
     case "Wallet Address":
-      return "/accounts";
+      return {
+        pathname: "/accounts/[accountAddress]",
+        query: "accountAddress",
+      };
     case "Transaction Hash":
-      return "/txs";
+      return { pathname: "/txs/[txHash]", query: "txHash" };
+    case "Code ID":
+      return { pathname: "/codes/[codeId]", query: "codeId" };
+    case "Contract Address":
+      return {
+        pathname: "/contracts/[contractAddress]",
+        query: "contractAddress",
+      };
     case "Block":
-      return "/blocks";
+      return { pathname: "/blocks/[height]", query: "height" };
     default:
       return null;
   }
 };
 
-const ResultItem = ({ type, value, handleSelectResult }: ResultItemProps) => {
-  // TODO: should be removed once all types are supported
-  // eslint-disable-next-line no-nested-ternary
-  const text = type ? (getRoute(type) ? type : NOT_SUPPORTED) : NOT_FOUND;
-  const route = type ? getRoute(type) : null;
+const ResultItem = ({
+  index,
+  type,
+  value,
+  cursor,
+  setCursor,
+  handleSelectResult,
+}: ResultItemProps) => {
+  const route = getRouteOptions(type)?.pathname;
 
   return (
-    <ListItem p={2} borderBottomColor="gray.700" bg="gray.900">
+    <StyledListItem id={`item-${index}`}>
       <Text variant="body2" fontWeight={500} color="text.dark" p={2}>
-        {text}
+        {type}
       </Text>
       {route && (
         <Text
@@ -70,63 +85,144 @@ const ResultItem = ({ type, value, handleSelectResult }: ResultItemProps) => {
           p={2}
           borderRadius="8px"
           _hover={{ bg: "gray.800", cursor: "pointer" }}
+          cursor="pointer"
           transition="all 0.25s ease-in-out"
+          bg={index === cursor ? "gray.800" : undefined}
+          onMouseMove={() => index !== cursor && setCursor(index)}
           onClick={() => handleSelectResult(type, true)}
         >
           {value}
         </Text>
       )}
-    </ListItem>
+    </StyledListItem>
   );
 };
 
-// TODO - Implement all search for Wasm chain
-const Searchbar = () => {
-  const navigate = useInternalNavigate();
-  const { validateContractAddress, validateUserAddress } = useValidateAddress();
+const ResultRender = ({
+  results,
+  keyword,
+  cursor,
+  setCursor,
+  handleSelectResult,
+}: {
+  results: SearchResultType[];
+  keyword: string;
+  cursor: Option<number>;
+  setCursor: (index: Option<number>) => void;
+  handleSelectResult: (type?: SearchResultType, isClick?: boolean) => void;
+}) => (
+  <>
+    {!results.length ? (
+      <StyledListItem>
+        <Text variant="body2" fontWeight={500} color="text.dark" p="8px">
+          {NOT_FOUND_MSG}
+        </Text>
+      </StyledListItem>
+    ) : (
+      results.map((type, index) => (
+        <ResultItem
+          index={index}
+          key={type}
+          type={type}
+          value={keyword}
+          cursor={cursor}
+          setCursor={setCursor}
+          handleSelectResult={handleSelectResult}
+        />
+      ))
+    )}
+  </>
+);
 
+const getNextCursor = (
+  key: string,
+  current: Option<number>,
+  lastIndex: number
+) => {
+  switch (key) {
+    case "ArrowUp":
+      if (current === undefined) return lastIndex;
+      return current <= 0 ? lastIndex : current - 1;
+    case "ArrowDown":
+      if (current === undefined) return 0;
+      return current >= lastIndex ? 0 : current + 1;
+    default:
+      return undefined;
+  }
+};
+
+const getPlaceholder = (isWasm: boolean) => {
+  const wasmText = isWasm ? "/ Code ID / Contract Address" : "";
+
+  return `Search by Wallet Address / Tx Hash / Block ${wasmText}`;
+};
+
+const Searchbar = () => {
   const [keyword, setKeyword] = useState("");
   const [displayResults, setDisplayResults] = useState(false);
-  const [results, setResults] = useState<SearchResultType[]>([]);
+  const [isTyping, setIsTyping] = useState(false);
+  const [cursor, setCursor] = useState<number>();
 
+  const {
+    chainConfig: {
+      features: {
+        wasm: { enabled: isWasm },
+      },
+    },
+  } = useCelatoneApp();
+  const navigate = useInternalNavigate();
+  const { results, isLoading } = useSearchHandler(keyword, () =>
+    setIsTyping(false)
+  );
   const boxRef = useRef<HTMLDivElement>(null);
-  const chainConfig = getChainConfig();
-
-  let placeholder = "Search by Wallet Address / Tx Hash / ";
-  placeholder += chainConfig.isWasm ? "Code ID / Contract Address" : "Block";
-
-  useEffect(() => {
-    const res: SearchResultType[] = [];
-    if (chainConfig.isWasm && isCodeId(keyword)) res.push("Code ID");
-    else if (isBlock(keyword)) res.push("Block");
-
-    if (!validateContractAddress(keyword)) res.push("Contract Address");
-    if (!validateUserAddress(keyword)) res.push("Wallet Address");
-    if (isTxHash(keyword)) res.push("Transaction Hash");
-    // TODO: add proposal ID
-    setResults(res);
-  }, [
-    chainConfig.isWasm,
-    keyword,
-    validateContractAddress,
-    validateUserAddress,
-  ]);
 
   const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
     const inputValue = e.target.value;
     setKeyword(inputValue);
     setDisplayResults(inputValue.length > 0);
+    setIsTyping(true);
+    setCursor(0);
   };
 
-  const handleSelectResult = (type?: SearchResultType, isClick = false) => {
-    AmpTrackUseMainSearch(isClick);
-    const route = type ? getRoute(type) : null;
-    if (route) navigate({ pathname: `${route}/${keyword}` });
-  };
+  const handleSelectResult = useCallback(
+    (type?: SearchResultType, isClick = false) => {
+      AmpTrackUseMainSearch(isClick);
+      const routeOptions = getRouteOptions(type);
+      if (routeOptions) {
+        navigate({
+          pathname: routeOptions.pathname,
+          query: { [routeOptions.query]: keyword },
+        });
+        setDisplayResults(false);
+        setKeyword("");
+      }
+    },
+    [keyword, navigate]
+  );
 
-  const handleOnKeyEnter = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") handleSelectResult(results.at(0));
-  };
+  const handleOnKeyEnter = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (!results.length) return;
+      switch (e.key) {
+        case "ArrowUp":
+        case "ArrowDown": {
+          const lastIndex = results.length - 1;
+          const nextCursor = getNextCursor(e.key, cursor, lastIndex);
+          const listItem = document.getElementById(`item-${nextCursor}`);
+          e.preventDefault();
+          setCursor(nextCursor);
+          listItem?.scrollIntoView({ block: "nearest", inline: "center" });
+          break;
+        }
+        case "Enter":
+          handleSelectResult(results.at(cursor ?? 0));
+          break;
+        default:
+          break;
+      }
+    },
+    [cursor, results, handleSelectResult]
+  );
 
   useOutsideClick({
     ref: boxRef,
@@ -140,10 +236,11 @@ const Searchbar = () => {
           value={keyword}
           h="36px"
           onChange={handleSearchChange}
-          placeholder={placeholder}
+          placeholder={getPlaceholder(isWasm)}
           focusBorderColor="secondary.main"
           onFocus={() => setDisplayResults(keyword.length > 0)}
           onKeyDown={handleOnKeyEnter}
+          autoComplete="off"
         />
         <InputRightElement pointerEvents="none" h="full">
           <CustomIcon name="search" color="gray.600" />
@@ -154,28 +251,28 @@ const Searchbar = () => {
           borderRadius="8px"
           bg="gray.900"
           position="absolute"
-          zIndex="2"
+          zIndex={2}
           w="full"
           top="50px"
           maxH="195px"
           overflowY="scroll"
           shadow="dark-lg"
         >
-          {!results.length ? (
-            <ResultItem
-              key="Not Found"
-              value={keyword}
+          {isLoading || isTyping ? (
+            <StyledListItem display="flex" alignItems="center" gap={2} p={4}>
+              <Spinner color="gray.600" size="sm" />
+              <Text color="text.disabled" variant="body2" fontWeight={500}>
+                Looking for results ...
+              </Text>
+            </StyledListItem>
+          ) : (
+            <ResultRender
+              cursor={cursor}
+              setCursor={setCursor}
+              results={results}
+              keyword={keyword}
               handleSelectResult={handleSelectResult}
             />
-          ) : (
-            results.map((type) => (
-              <ResultItem
-                key={type}
-                type={type}
-                value={keyword}
-                handleSelectResult={handleSelectResult}
-              />
-            ))
           )}
         </List>
       )}
diff --git a/src/lib/layout/index.tsx b/src/lib/layout/index.tsx
index 6648990f6..1f8781285 100644
--- a/src/lib/layout/index.tsx
+++ b/src/lib/layout/index.tsx
@@ -3,8 +3,7 @@ import { useRouter } from "next/router";
 import type { ReactNode } from "react";
 import { useState, useEffect } from "react";
 
-import { useMobile } from "lib/app-provider";
-import { getChainConfig } from "lib/data";
+import { useMobile, useWasmConfig } from "lib/app-provider";
 import { scrollToTop } from "lib/utils";
 
 import Footer from "./Footer";
@@ -19,9 +18,9 @@ type LayoutProps = {
 const Layout = ({ children }: LayoutProps) => {
   const router = useRouter();
   const isMobile = useMobile();
+  const wasm = useWasmConfig({ shouldRedirect: false });
 
   const [isExpand, setIsExpand] = useState(!isMobile);
-  const chainConfig = getChainConfig();
 
   const lightMode = {
     templateAreas: `"header""nav""main"`,
@@ -36,11 +35,12 @@ const Layout = ({ children }: LayoutProps) => {
     navBar: <Navbar isExpand={isExpand} setIsExpand={setIsExpand} />,
   };
 
-  const mode = chainConfig.isWasm ? fullMode : lightMode;
+  const mode = wasm.enabled ? fullMode : lightMode;
 
   useEffect(() => {
     scrollToTop();
   }, [router.asPath]);
+
   return (
     <Grid
       templateAreas={mode.templateAreas}
diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index 7af457ab0..2677aa813 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -2,11 +2,11 @@ import { Flex } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import { observer } from "mobx-react-lite";
 
-import { INSTANTIATED_LIST_NAME, getListIcon, SAVED_LIST_NAME } from "lib/data";
+import { INSTANTIATED_LIST_NAME, SAVED_LIST_NAME } from "lib/data";
 import { useIsCurrentPage } from "lib/hooks";
 import { useContractStore, usePublicProjectStore } from "lib/providers/store";
 import { cmpContractListInfo } from "lib/stores/contract";
-import { formatSlugName } from "lib/utils";
+import { formatSlugName, getListIcon } from "lib/utils";
 
 import { CollapseNavMenu } from "./Collapse";
 import { ExpandNavMenu } from "./Expand";
diff --git a/src/lib/model/code.ts b/src/lib/model/code.ts
index e1a84aba7..ffb31d2af 100644
--- a/src/lib/model/code.ts
+++ b/src/lib/model/code.ts
@@ -2,7 +2,7 @@ import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 
-import { useChainId, useLCDEndpoint } from "lib/app-provider";
+import { useCelatoneApp, useLCDEndpoint } from "lib/app-provider";
 import type { PermissionFilterValue } from "lib/hooks";
 import {
   useUserKey,
@@ -45,7 +45,8 @@ export interface CodeDataState {
   };
 }
 
-export const useCodeData = (codeId: number): CodeDataState => {
+export const useCodeData = (codeId: string): CodeDataState => {
+  const { currentChainId } = useCelatoneApp();
   const endpoint = useLCDEndpoint();
 
   const { data: codeInfo, isLoading } = useCodeDataByCodeId(codeId);
@@ -63,11 +64,9 @@ export const useCodeData = (codeId: number): CodeDataState => {
     { enabled: Boolean(endpoint) && Boolean(codeId), retry: false }
   );
 
-  const chainId = useChainId();
-
   return {
     isLoading,
-    chainId,
+    chainId: currentChainId,
     codeData: codeInfo as CodeData,
     lcdCodeData: {
       codeHash: lcdCode?.code_info.data_hash,
diff --git a/src/lib/model/contract.ts b/src/lib/model/contract.ts
index 9f045c6af..cc186d2b3 100644
--- a/src/lib/model/contract.ts
+++ b/src/lib/model/contract.ts
@@ -1,7 +1,11 @@
 import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 
-import { useCelatoneApp, useChainId, useLCDEndpoint } from "lib/app-provider";
+import {
+  useBaseApiRoute,
+  useCelatoneApp,
+  useLCDEndpoint,
+} from "lib/app-provider";
 import { DEFAULT_TX_FILTERS, INSTANTIATED_LIST_NAME } from "lib/data";
 import { useCodeStore, useContractStore } from "lib/providers/store";
 import { useAssetInfos } from "lib/services/assetService";
@@ -91,42 +95,37 @@ export const useInstantiatedMockInfoByMe = (): ContractListInfo => {
 export const useContractData = (
   contractAddress: ContractAddr
 ): ContractDataState => {
-  const { indexerGraphClient } = useCelatoneApp();
-  const { currentChainRecord } = useWallet();
+  const balancesApiRoute = useBaseApiRoute("balances");
+  const { indexerGraphClient, currentChainId } = useCelatoneApp();
   const { getCodeLocalInfo } = useCodeStore();
   const { getContractLocalInfo } = useContractStore();
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
+
   const { assetInfos } = useAssetInfos();
   const { data: publicInfo } =
     usePublicProjectByContractAddress(contractAddress);
   const { data: publicInfoBySlug } = usePublicProjectBySlug(publicInfo?.slug);
-  const chainId = useChainId();
 
   const { data: instantiateInfo, isLoading: isInstantiateInfoLoading } =
     useQuery(
-      ["query", "instantiate_info", endpoint, contractAddress],
+      ["query", "instantiate_info", lcdEndpoint, contractAddress],
       async () =>
-        queryInstantiateInfo(endpoint, indexerGraphClient, contractAddress),
-      { enabled: !!currentChainRecord && !!contractAddress, retry: false }
+        queryInstantiateInfo(lcdEndpoint, indexerGraphClient, contractAddress),
+      { enabled: !!contractAddress, retry: false }
     );
 
   const { data: contractCw2Info, isLoading: isContractCw2InfoLoading } =
     useQuery(
-      ["query", "contract_cw2_info", endpoint, contractAddress],
-      async () => queryContractCw2Info(endpoint, contractAddress),
-      { enabled: !!currentChainRecord && !!contractAddress, retry: false }
+      ["query", "contract_cw2_info", lcdEndpoint, contractAddress],
+      async () => queryContractCw2Info(lcdEndpoint, contractAddress),
+      { enabled: !!contractAddress, retry: false }
     );
 
   const { data: contractBalances, isLoading: isContractBalancesLoading } =
     useQuery(
-      ["query", "contractBalances", contractAddress, chainId],
-      async () =>
-        queryContractBalances(
-          currentChainRecord?.name,
-          currentChainRecord?.chain.chain_id,
-          contractAddress
-        ),
-      { enabled: !!currentChainRecord && !!contractAddress, retry: false }
+      ["query", "contractBalances", balancesApiRoute, contractAddress],
+      async () => queryContractBalances(balancesApiRoute, contractAddress),
+      { enabled: !!contractAddress, retry: false }
     );
 
   const contractBalancesWithAssetInfos = contractBalances
@@ -153,7 +152,7 @@ export const useContractData = (
 
   return {
     contractData: {
-      chainId,
+      chainId: currentChainId,
       codeInfo,
       contractLocalInfo,
       contractCw2Info,
diff --git a/src/lib/pages/admin/index.tsx b/src/lib/pages/admin/index.tsx
index 19e08244a..ddacb3b75 100644
--- a/src/lib/pages/admin/index.tsx
+++ b/src/lib/pages/admin/index.tsx
@@ -14,6 +14,7 @@ import {
   useLCDEndpoint,
   useGetAddressType,
   useValidateAddress,
+  useWasmConfig,
 } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
@@ -34,6 +35,7 @@ import { MsgType } from "lib/types";
 import { composeMsg, getFirstQueryParam } from "lib/utils";
 
 const UpdateAdmin = () => {
+  useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const { address } = useWallet();
   const { validateContractAddress, validateUserAddress } = useValidateAddress();
@@ -42,7 +44,8 @@ const UpdateAdmin = () => {
   const fabricateFee = useFabricateFee();
   const updateAdminTx = useUpdateAdminTx();
   const { broadcast } = useTxBroadcast();
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
+
   const { indexerGraphClient } = useCelatoneApp();
 
   const [adminAddress, setAdminAddress] = useState("");
@@ -115,12 +118,16 @@ const UpdateAdmin = () => {
     [
       "query",
       "instantiate_info",
-      endpoint,
+      lcdEndpoint,
       indexerGraphClient,
       contractAddressParam,
     ],
     async () =>
-      queryInstantiateInfo(endpoint, indexerGraphClient, contractAddressParam),
+      queryInstantiateInfo(
+        lcdEndpoint,
+        indexerGraphClient,
+        contractAddressParam
+      ),
     {
       enabled: !!contractAddressParam,
       refetchOnWindowFocus: false,
diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx
index 4400562e1..0b2ebe843 100644
--- a/src/lib/pages/block-details/index.tsx
+++ b/src/lib/pages/block-details/index.tsx
@@ -14,9 +14,7 @@ import { BlockDetailsTop, BlockInfo, BlockTxsTable } from "./components";
 const BlockDetail = () => {
   const router = useRouter();
   const heightParam = getFirstQueryParam(router.query.height);
-  const { data: blockData, isLoading } = useBlockDetailsQuery(
-    Number(heightParam)
-  );
+  const { data: blockData, isLoading } = useBlockDetailsQuery(heightParam);
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_BLOCK_DETAIL);
diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index 9e8329361..95d54e2f9 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
+import { useWasmConfig } from "lib/app-provider";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
@@ -178,9 +179,10 @@ const CodeDetailsBody = observer(
 );
 
 const CodeDetails = observer(() => {
+  useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const codeIdParam = getFirstQueryParam(router.query.codeId);
-  const data = useCodeData(Number(codeIdParam));
+  const data = useCodeData(codeIdParam);
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_CODE_DETAIL);
diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx
index c43cbc4c8..a256bf254 100644
--- a/src/lib/pages/codes/index.tsx
+++ b/src/lib/pages/codes/index.tsx
@@ -5,7 +5,7 @@ import type { ChangeEvent } from "react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import { FilterByPermission } from "lib/components/forms";
 import InputWithIcon from "lib/components/InputWithIcon";
 import PageContainer from "lib/components/PageContainer";
@@ -22,6 +22,7 @@ interface RecentCodesState {
 }
 
 const RecentCodes = observer(() => {
+  useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const navigate = useInternalNavigate();
   const onRowSelect = (codeId: number) =>
diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index e0254cb7c..65358e507 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { useValidateAddress } from "lib/app-provider";
+import { useValidateAddress, useWasmConfig } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
@@ -134,6 +134,7 @@ const ContractDetailsBody = observer(
 );
 
 const ContractDetails = observer(() => {
+  useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const { validateContractAddress } = useValidateAddress();
   const contractAddressParam = getFirstQueryParam(
diff --git a/src/lib/pages/contract-list/index.tsx b/src/lib/pages/contract-list/index.tsx
index 794b1e444..db872083f 100644
--- a/src/lib/pages/contract-list/index.tsx
+++ b/src/lib/pages/contract-list/index.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { CreateNewListModal } from "lib/components/modal";
 import PageContainer from "lib/components/PageContainer";
@@ -13,6 +13,7 @@ import { useContractStore } from "lib/providers/store";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 
 const AllContractListsPage = observer(() => {
+  useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const navigate = useInternalNavigate();
   const { getContractLists } = useContractStore();
diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx
index 73c7773ee..6ceae4939 100644
--- a/src/lib/pages/contract-list/slug.tsx
+++ b/src/lib/pages/contract-list/slug.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CustomIcon } from "lib/components/icon";
 import {
@@ -28,6 +28,7 @@ import type { ContractAddr } from "lib/types";
 import { formatSlugName, getFirstQueryParam } from "lib/utils";
 
 const ContractsByList = observer(() => {
+  useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const navigate = useInternalNavigate();
   const listSlug = getFirstQueryParam(router.query.slug);
diff --git a/src/lib/pages/deploy/index.tsx b/src/lib/pages/deploy/index.tsx
index 2cb0fc52c..fcbc66fd6 100644
--- a/src/lib/pages/deploy/index.tsx
+++ b/src/lib/pages/deploy/index.tsx
@@ -11,7 +11,7 @@ import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import { ButtonCard } from "lib/components/ButtonCard";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { CustomIcon } from "lib/components/icon";
@@ -64,6 +64,8 @@ const Deploy = () => {
     !isPermissionedNetwork ||
     Boolean(data?.addresses?.includes(address as HumanAddr));
 
+  useWasmConfig({ shouldRedirect: true });
+
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_DEPLOY);
   }, [router.isReady]);
diff --git a/src/lib/pages/execute/index.tsx b/src/lib/pages/execute/index.tsx
index 9d6fa558b..bd6de7667 100644
--- a/src/lib/pages/execute/index.tsx
+++ b/src/lib/pages/execute/index.tsx
@@ -3,7 +3,7 @@ import type { Coin } from "@cosmjs/stargate";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
 import { CustomIcon } from "lib/components/icon";
@@ -22,6 +22,7 @@ import {
 import { ExecuteArea } from "./components/ExecuteArea";
 
 const Execute = () => {
+  useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const navigate = useInternalNavigate();
   const [initialMsg, setInitialMsg] = useState("");
diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index 0f85fc3b0..d45419c84 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -10,10 +10,11 @@ import { useWallet } from "@cosmos-kit/react";
 import type { AxiosError, AxiosResponse } from "axios";
 import axios from "axios";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import {
-  useCurrentNetwork,
+  useCelatoneApp,
+  useFaucetConfig,
   useInternalNavigate,
   useValidateAddress,
 } from "lib/app-provider";
@@ -25,6 +26,7 @@ import type { IconKeys } from "lib/components/icon";
 import WasmPageContainer from "lib/components/WasmPageContainer";
 import { useOpenTxTab } from "lib/hooks";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import { capitalize } from "lib/utils";
 
 type ResultStatus = "success" | "error" | "warning";
 
@@ -49,18 +51,36 @@ const Faucet = () => {
   const [result, setResult] = useState<Result>({});
 
   const { validateUserAddress } = useValidateAddress();
-  const { isTestnet } = useCurrentNetwork();
   const navigate = useInternalNavigate();
   const toast = useToast();
   const router = useRouter();
   const openTxTab = useOpenTxTab("tx-page");
-
-  const faucetUrl = process.env.NEXT_PUBLIC_FAUCET_URL;
+  const {
+    chainConfig: { chain },
+  } = useCelatoneApp();
+  const faucet = useFaucetConfig();
+
+  const { faucetUrl, faucetDenom, faucetAmount } = useMemo(() => {
+    if (!faucet.enabled)
+      // Remark: this shouldn't be used as the faucet is disabled
+      return {
+        faucetUrl: "",
+        faucetDenom: "",
+        faucetAmount: "",
+      };
+
+    return {
+      faucetUrl: faucet.url,
+      faucetDenom: faucet.denom.toUpperCase(),
+      faucetAmount: faucet.amount,
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [faucet.enabled]);
 
   useEffect(() => {
-    if (!isTestnet) navigate({ pathname: "/" });
-    else if (router.isReady) AmpTrack(AmpEvent.TO_FAUCET);
-  }, [isTestnet, navigate, router]);
+    if (!faucet.enabled) navigate({ pathname: "/", replace: true });
+    if (router.isReady) AmpTrack(AmpEvent.TO_FAUCET);
+  }, [faucet, navigate, router]);
 
   useEffect(() => {
     if (address) {
@@ -89,7 +109,7 @@ const Faucet = () => {
       })
       .then(({ data: { txHash } }) => {
         toast({
-          title: "10 Testnet OSMO sent from the faucet",
+          title: `${faucetAmount} Testnet ${faucetDenom} sent from the faucet`,
           status: "success",
           duration: 5000,
           isClosable: false,
@@ -109,8 +129,7 @@ const Faucet = () => {
         setIsLoading(false);
         setResult({
           status: "success",
-          message:
-            "Sent 10 testnet OSMO from the faucet. You will need to wait for another hour to request again.",
+          message: `Sent ${faucetAmount} testnet ${faucetDenom} from the faucet. You will need to wait for another hour to request again.`,
           txHash,
         });
       })
@@ -145,11 +164,12 @@ const Faucet = () => {
   return (
     <WasmPageContainer>
       <Heading as="h5" variant="h5">
-        Osmosis Testnet Faucet
+        {capitalize(chain)} Testnet Faucet
       </Heading>
       <Text variant="body2" color="text.dark" pt={4} textAlign="center" mb={8}>
-        The faucet provides 10 testnet OSMO per request. Requests are limited to
-        once per hour for each receiving address and IP address.
+        The faucet provides {faucetAmount} testnet {faucetDenom} per request.
+        Requests are limited to once per hour for each receiving address and IP
+        address.
       </Text>
       <TextInput
         variant="floating"
@@ -176,7 +196,7 @@ const Faucet = () => {
         isLoading={isLoading}
         disabled={disabled}
       >
-        Request 10 testnet OSMO
+        Request {faucetAmount} testnet {faucetDenom}
       </Button>
       {result.status && (
         <Alert mt={8} variant={result.status}>
diff --git a/src/lib/pages/home/index.tsx b/src/lib/pages/home/index.tsx
index b49b6c40d..e994c22be 100644
--- a/src/lib/pages/home/index.tsx
+++ b/src/lib/pages/home/index.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import NetworkOverview from "../network-overview";
-import { getChainConfig } from "lib/data";
+import { useWasmConfig } from "lib/app-provider";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 
 import { QuickMenu } from "./components/QuickMenu";
@@ -11,13 +11,13 @@ import { RecentActivities } from "./components/RecentActivities";
 
 const Home = () => {
   const router = useRouter();
-  const chainConfig = getChainConfig();
+  const wasm = useWasmConfig({ shouldRedirect: false });
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_OVERVIEW);
   }, [router.isReady]);
 
-  return chainConfig.isWasm ? (
+  return wasm.enabled ? (
     <Box mx={1}>
       <QuickMenu />
       <RecentActivities />
diff --git a/src/lib/pages/instantiate/index.tsx b/src/lib/pages/instantiate/index.tsx
index e475b25ef..749b7a6cf 100644
--- a/src/lib/pages/instantiate/index.tsx
+++ b/src/lib/pages/instantiate/index.tsx
@@ -1,6 +1,7 @@
 import type { InstantiateResult } from "@cosmjs/cosmwasm-stargate";
 import { useEffect, useState } from "react";
 
+import { useWasmConfig } from "lib/app-provider";
 import { scrollToTop } from "lib/utils";
 
 import CompletedPage from "./completed";
@@ -11,6 +12,7 @@ export interface InstantiateTxInfo extends InstantiateResult {
 }
 
 const Index = () => {
+  useWasmConfig({ shouldRedirect: true });
   const [completed, setCompleted] = useState(false);
   const [txInfo, setTxInfo] = useState<InstantiateTxInfo>({
     contractAddress: "",
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index 5b7683ccd..4d1a51ad0 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -67,10 +67,13 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   const msgQuery = (router.query.msg as string) ?? "";
   const codeIdQuery = (router.query["code-id"] as string) ?? "";
   const {
-    appContractAddress: { example: exampleContractAddress },
+    chainConfig: {
+      exampleAddresses: { contract: exampleContractAddress },
+    },
   } = useCelatoneApp();
   const { address = "" } = useWallet();
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
+
   const postInstantiateTx = useInstantiateTx();
   const { simulate } = useSimulateFee();
   const fabricateFee = useFabricateFee();
@@ -144,8 +147,8 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   });
 
   const { refetch } = useQuery(
-    ["query", endpoint, codeId],
-    async () => getCodeIdInfo(endpoint, Number(codeId)),
+    ["query", lcdEndpoint, codeId],
+    async () => getCodeIdInfo(lcdEndpoint, Number(codeId)),
     {
       enabled: !!address && !!codeId.length,
       retry: false,
diff --git a/src/lib/pages/migrate/components/MigrateContract.tsx b/src/lib/pages/migrate/components/MigrateContract.tsx
index 9662fc63b..db7655702 100644
--- a/src/lib/pages/migrate/components/MigrateContract.tsx
+++ b/src/lib/pages/migrate/components/MigrateContract.tsx
@@ -37,7 +37,8 @@ export const MigrateContract = ({
 }: MigrateContractProps) => {
   const { address } = useWallet();
   const { broadcast } = useTxBroadcast();
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
+
   const migrateTx = useMigrateTx();
   const fabricateFee = useFabricateFee();
 
@@ -79,8 +80,8 @@ export const MigrateContract = ({
   });
 
   const { refetch } = useQuery(
-    ["query", endpoint, codeId],
-    async () => getCodeIdInfo(endpoint, Number(codeId)),
+    ["query", lcdEndpoint, codeId],
+    async () => getCodeIdInfo(lcdEndpoint, Number(codeId)),
     {
       enabled: !!address && !!codeId.length,
       retry: false,
diff --git a/src/lib/pages/migrate/index.tsx b/src/lib/pages/migrate/index.tsx
index 6ade71145..7fe569014 100644
--- a/src/lib/pages/migrate/index.tsx
+++ b/src/lib/pages/migrate/index.tsx
@@ -9,6 +9,7 @@ import {
   useCelatoneApp,
   useInternalNavigate,
   useLCDEndpoint,
+  useWasmConfig,
 } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
@@ -32,16 +33,19 @@ const defaultValues: MigratePageState = {
 };
 
 const Migrate = () => {
+  useWasmConfig({ shouldRedirect: true });
   const { indexerGraphClient } = useCelatoneApp();
   const router = useRouter();
   const navigate = useInternalNavigate();
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
+
   const { address = "" } = useWallet();
 
   const { setValue, watch } = useForm<MigratePageState>({
     mode: "all",
     defaultValues,
   });
+
   const { migrateStep, contractAddress, admin, codeId } = watch();
 
   const firstStep = migrateStep !== "migrate_contract";
@@ -67,9 +71,9 @@ const Migrate = () => {
   );
 
   useQuery(
-    ["query", "instantiate_info", endpoint, contractAddress],
+    ["query", "instantiate_info", lcdEndpoint, contractAddress],
     async () =>
-      queryInstantiateInfo(endpoint, indexerGraphClient, contractAddress),
+      queryInstantiateInfo(lcdEndpoint, indexerGraphClient, contractAddress),
     {
       enabled: !!contractAddress,
       retry: 0,
diff --git a/src/lib/pages/proposal/components/PermissionlessAlert.tsx b/src/lib/pages/proposal/components/PermissionlessAlert.tsx
new file mode 100644
index 000000000..75184d617
--- /dev/null
+++ b/src/lib/pages/proposal/components/PermissionlessAlert.tsx
@@ -0,0 +1,16 @@
+import { Alert, AlertDescription, Flex } from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+
+export const PermissionlessAlert = () => {
+  return (
+    <Alert variant="error" alignItems="center" justifyContent="space-between">
+      <Flex gap={2} align="center">
+        <CustomIcon name="alert-circle-solid" color="error.main" boxSize={4} />
+        <AlertDescription>
+          You cannot create proposal to whitelist on permissionless network.
+        </AlertDescription>
+      </Flex>
+    </Alert>
+  );
+};
diff --git a/src/lib/pages/proposal/components/TestnetAlert.tsx b/src/lib/pages/proposal/components/TestnetAlert.tsx
deleted file mode 100644
index cf3dc4b4a..000000000
--- a/src/lib/pages/proposal/components/TestnetAlert.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Alert, AlertDescription, Button, Flex } from "@chakra-ui/react";
-
-import { useSelectChain } from "lib/app-provider";
-import { CustomIcon } from "lib/components/icon";
-import { getChainNameByNetwork } from "lib/data";
-import { AmpTrackUseAlertCTA } from "lib/services/amplitude";
-
-export const TestnetAlert = () => {
-  const selectChain = useSelectChain();
-  return (
-    <Alert variant="error" alignItems="center" justifyContent="space-between">
-      <Flex gap={2} align="center">
-        <CustomIcon name="alert-circle-solid" color="error.main" boxSize={4} />
-        <AlertDescription>
-          You cannot create proposal to whitelist through testnet.
-        </AlertDescription>
-      </Flex>
-      <Button
-        size="sm"
-        variant="ghost-error"
-        onClick={() => {
-          AmpTrackUseAlertCTA("proposal_whitelist", "switch_to_mainnet");
-          selectChain(getChainNameByNetwork("mainnet"));
-        }}
-      >
-        Switch To Mainnet
-      </Button>
-    </Alert>
-  );
-};
diff --git a/src/lib/pages/proposal/constants.tsx b/src/lib/pages/proposal/constants.tsx
index 0fcf75d51..9cdc6d980 100644
--- a/src/lib/pages/proposal/constants.tsx
+++ b/src/lib/pages/proposal/constants.tsx
@@ -1,115 +1,112 @@
 import { Text } from "@chakra-ui/react";
 import Link from "next/link";
 
-import type { SidebarDetails } from "lib/components/StickySidebar";
+import type { SidebarMetadata } from "lib/components/StickySidebar";
 import { AmpTrackUseRightHelperPanel } from "lib/services/amplitude";
 
+export type NetworkPermission = "permissioned" | "permissionless";
+
 const whitelistPage = "proposal-whitelist";
-export const SIDEBAR_WHITELIST_DETAILS: SidebarDetails = {
-  mainnet: {
-    page: whitelistPage,
-    title: "What is whitelisted address?",
-    description: (
-      <span>
-        Osmosis Mainnet is a permissioned chain, which means you will need to
-        submit proposal to store code.
-        <br />
-        <br />
-        However, there is a way to bypass this process by adding your wallet
-        address or other designated addresses to an allowed list.
-        <br />
-        <br />
-        Once your address is on this list, you will be able to store code on the
-        network without having to submit a proposal every time.
-      </span>
-    ),
-    toPage: true,
-    toPagePath: "/proposals/store-code",
-    toPageTitle: "Submit Proposal To Store Code",
-  },
-  testnet: {
-    page: whitelistPage,
-    title: "Do I need to open proposal to whitelisting in testnet?",
-    description: (
-      <span>
-        The Osmosis testnet does not require whitelisting permission.
-        Nonetheless, if you want to understand how the whitelisting process
-        works, you can try submitting a proposal for whitelisting.
-        <br />
-        <br />
-        On the mainnet, storing code requires a proposal to be submitted, but it
-        is possible to add your wallet address or other specified addresses to
-        an allowed list.
-      </span>
-    ),
-  },
-  // TODO: fill localnet information
-  localnet: {
-    page: whitelistPage,
-    title: "",
-    description: <span />,
-  },
-};
+export const SIDEBAR_WHITELIST_DETAILS: (
+  chainName: string,
+  permission: NetworkPermission
+) => SidebarMetadata = (chainName, permission) =>
+  ({
+    permissioned: {
+      page: whitelistPage,
+      title: "What is whitelisted address?",
+      description: (
+        <span>
+          {chainName} is a permissioned chain, which means you will need to
+          submit proposal to store code.
+          <br />
+          <br />
+          However, there is a way to bypass this process by adding your wallet
+          address or other designated addresses to an allowed list.
+          <br />
+          <br />
+          Once your address is on this list, you will be able to store code on
+          the network without having to submit a proposal every time.
+        </span>
+      ),
+      toPage: true,
+      toPagePath: "/proposals/store-code",
+      toPageTitle: "Submit Proposal To Store Code",
+    },
+    permissionless: {
+      page: whitelistPage,
+      title:
+        "Do I need to open proposal to whitelisting in permissionless network?",
+      description: (
+        <span>
+          {chainName} does not require whitelisting permission. Nonetheless, if
+          you want to understand how the whitelisting process works, you can try
+          submitting a proposal for whitelisting.
+          <br />
+          <br />
+          On the mainnet, storing code requires a proposal to be submitted, but
+          it is possible to add your wallet address or other specified addresses
+          to an allowed list.
+        </span>
+      ),
+    },
+  }[permission]);
 
 const storeCodePage = "proposal-store-code";
-export const SIDEBAR_STORE_CODE_DETAILS: SidebarDetails = {
-  mainnet: {
-    page: storeCodePage,
-    title: "Why do I need to submit proposal?",
-    description: (
-      <span>
-        Osmosis Mainnet is permissioned chain, which means you will need to
-        submit proposal to store code
-        <br />
-        <br />
-        Another way is to get your wallet address to allow list to store code
-        without opening proposal.
-        <br />
-        <br />
-        You still can upload your Wasm to see how your code works on Testnet.
-      </span>
-    ),
-    toNetwork: true,
-  },
-  testnet: {
-    page: storeCodePage,
-    title: "Do I need to submit Proposal to store code in testnet?",
-    description: (
-      <span>
-        On the Osmosis testnet, you can store code without submitting a proposal
-        by using
-        <Link
-          href="/deploy"
-          onClick={() =>
-            AmpTrackUseRightHelperPanel(storeCodePage, "to-/deploy")
-          }
-        >
-          {" "}
-          <Text as="span" color="secondary.main">
-            Deploy Contract
-          </Text>
-        </Link>
-        <br />
-        <br />
-        However, if you&apos;re interested in exploring about the proposal
-        process, you can try submitting a proposal.
-        <br />
-        <br />
-        On the mainnet, submitting a proposal is required to store code.
-      </span>
-    ),
-    toPage: true,
-    toPagePath: "/deploy",
-    toPageTitle: "Go To Deploy Contract",
-    toNetwork: true,
-  },
-  // TODO: fill localnet information
-  localnet: {
-    page: storeCodePage,
-    title: "",
-    description: <span />,
-  },
-};
+export const SIDEBAR_STORE_CODE_DETAILS: (
+  chainName: string,
+  permission: NetworkPermission
+) => SidebarMetadata = (chainName, permission) =>
+  ({
+    permissioned: {
+      page: storeCodePage,
+      title: "Why do I need to submit proposal?",
+      description: (
+        <span>
+          {chainName} is permissioned chain, which means you will need to submit
+          proposal to store code
+          <br />
+          <br />
+          Another way is to get your wallet address to allow list to store code
+          without opening proposal.
+          <br />
+          <br />
+          You still can upload your Wasm to see how your code works on Testnet.
+        </span>
+      ),
+    },
+    permissionless: {
+      page: storeCodePage,
+      title: "Do I need to submit Proposal to store code in testnet?",
+      description: (
+        <span>
+          On the {chainName}, you can store code without submitting a proposal
+          by using
+          <Link
+            href="/deploy"
+            onClick={() =>
+              AmpTrackUseRightHelperPanel(storeCodePage, "to-/deploy")
+            }
+          >
+            {" "}
+            <Text as="span" color="secondary.main">
+              Deploy Contract
+            </Text>
+          </Link>
+          <br />
+          <br />
+          However, if you&apos;re interested in exploring about the proposal
+          process, you can try submitting a proposal.
+          <br />
+          <br />
+          On the mainnet, submitting a proposal is required to store code.
+        </span>
+      ),
+      toPage: true,
+      toPagePath: "/deploy",
+      toPageTitle: "Go To Deploy Contract",
+    },
+  }[permission]);
 
 export const PROPOSAL_STORE_CODE_TEXT = {
   header: "Create Proposal to Store Code",
diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index 2cf1c82ff..e0be53fbf 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -16,11 +16,11 @@ import { useFieldArray, useForm } from "react-hook-form";
 
 import { AssetBox, Footer } from "../components";
 import { InitialDeposit } from "../components/InitialDeposit";
-import { TestnetAlert } from "../components/TestnetAlert";
+import { PermissionlessAlert } from "../components/PermissionlessAlert";
 import { SIDEBAR_WHITELIST_DETAILS } from "../constants";
 import { getAlert } from "../utils";
 import {
-  useCurrentNetwork,
+  useCelatoneApp,
   useFabricateFee,
   useSimulateFeeQuery,
   useSubmitWhitelistProposalTx,
@@ -34,10 +34,7 @@ import { ControllerInput, ControllerTextarea } from "lib/components/forms";
 import { CustomIcon } from "lib/components/icon";
 import PageContainer from "lib/components/PageContainer";
 import { StickySidebar } from "lib/components/StickySidebar";
-import {
-  getMaxProposalTitleLengthError,
-  MAX_PROPOSAL_TITLE_LENGTH,
-} from "lib/data/proposalWhitelist";
+import { useGetMaxLengthError } from "lib/hooks";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import {
   AmpEvent,
@@ -47,6 +44,7 @@ import {
   AmpTrackUseDepositFill,
 } from "lib/services/amplitude";
 import { useGovParams } from "lib/services/proposalService";
+import { AccessConfigPermission } from "lib/types";
 import type { Addr } from "lib/types";
 import { composeSubmitWhitelistProposalMsg, getAmountToVote } from "lib/utils";
 
@@ -68,7 +66,12 @@ const ampPage = "proposal_whitelist";
 
 const ProposalToWhitelist = () => {
   const router = useRouter();
+  const { constants } = useCelatoneApp();
+  const getMaxLengthError = useGetMaxLengthError();
   const { address: walletAddress = "" } = useWallet();
+  const {
+    chainConfig: { prettyName },
+  } = useCelatoneApp();
   const fabricateFee = useFabricateFee();
   const { data: govParams } = useGovParams();
   const submitProposalTx = useSubmitWhitelistProposalTx();
@@ -93,9 +96,10 @@ const ProposalToWhitelist = () => {
     control,
     name: "addresses",
   });
-  const { isTestnet } = useCurrentNetwork();
 
   const minDeposit = govParams?.depositParams.minDeposit;
+  const isPermissionless =
+    govParams?.uploadAccess.permission === AccessConfigPermission.EVERYBODY;
   const addressesArray = addresses.map((addressObj) => addressObj.address);
   const formErrorsKey = Object.keys(formErrors);
   const enabledTx = useMemo(
@@ -233,9 +237,9 @@ const ProposalToWhitelist = () => {
           templateAreas={`"prespace alert alert postspace" "prespace main sidebar postspace"`}
           templateColumns="1fr 6fr 4fr 1fr"
           sx={
-            isTestnet
+            isPermissionless
               ? {
-                  "> div:not(.testnet-alert)": {
+                  "> div:not(.permissionless-alert)": {
                     opacity: 0.5,
                     pointerEvents: "none",
                   },
@@ -243,9 +247,9 @@ const ProposalToWhitelist = () => {
               : undefined
           }
         >
-          {isTestnet && (
-            <GridItem area="alert" className="testnet-alert" mb={10}>
-              <TestnetAlert />
+          {isPermissionless && (
+            <GridItem area="alert" className="permissionless-alert" mb={10}>
+              <PermissionlessAlert />
             </GridItem>
           )}
           <GridItem area="main">
@@ -285,11 +289,12 @@ const ProposalToWhitelist = () => {
                   variant="floating"
                   rules={{
                     required: "Proposal Title is required",
-                    maxLength: MAX_PROPOSAL_TITLE_LENGTH,
+                    maxLength: constants.maxProposalTitleLength,
                   }}
                   error={
-                    formErrors.title?.message ||
-                    getMaxProposalTitleLengthError(title.length)
+                    title.length > constants.maxProposalTitleLength
+                      ? getMaxLengthError(title.length, "proposal_title")
+                      : formErrors.title?.message
                   }
                 />
                 <ControllerTextarea
@@ -436,7 +441,10 @@ const ProposalToWhitelist = () => {
           <GridItem area="sidebar">
             <StickySidebar
               marginTop="128px"
-              metadata={SIDEBAR_WHITELIST_DETAILS}
+              metadata={SIDEBAR_WHITELIST_DETAILS(
+                prettyName,
+                isPermissionless ? "permissionless" : "permissioned"
+              )}
             />
           </GridItem>
         </Grid>
diff --git a/src/lib/pages/proposals/index.tsx b/src/lib/pages/proposals/index.tsx
index 6618de8e5..91bf7bd8e 100644
--- a/src/lib/pages/proposals/index.tsx
+++ b/src/lib/pages/proposals/index.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import type { ChangeEvent } from "react";
 import { useState, useEffect } from "react";
 
-import { useChainId } from "lib/app-provider";
+import { useCelatoneApp } from "lib/app-provider";
 import { NewProposalButton } from "lib/components/button/NewProposalButton";
 import InputWithIcon from "lib/components/InputWithIcon";
 import PageContainer from "lib/components/PageContainer";
@@ -23,7 +23,7 @@ import { ProposalTypeFilter } from "./components/ProposalTypeFilter";
 import { ProposalTable } from "./table/ProposalTable";
 
 const Proposals = () => {
-  const chainId = useChainId();
+  const { currentChainId } = useCelatoneApp();
   const router = useRouter();
   const [statuses, setStatuses] = useState<ProposalStatus[]>([]);
   const [types, setTypes] = useState<ProposalType[]>([]);
@@ -70,12 +70,12 @@ const Proposals = () => {
   useEffect(() => {
     setPageSize(10);
     setCurrentPage(1);
-  }, [chainId, setCurrentPage, setPageSize]);
+  }, [currentChainId, setCurrentPage, setPageSize]);
 
   useEffect(() => {
     setIsSelected(false);
     setProposer(undefined);
-  }, [chainId, address]);
+  }, [currentChainId, address]);
 
   const onPageChange = (nextPage: number) => setCurrentPage(nextPage);
 
diff --git a/src/lib/pages/proposals/table/ProposalTableRow.tsx b/src/lib/pages/proposals/table/ProposalTableRow.tsx
index 286b24cc3..e3657bb37 100644
--- a/src/lib/pages/proposals/table/ProposalTableRow.tsx
+++ b/src/lib/pages/proposals/table/ProposalTableRow.tsx
@@ -1,9 +1,8 @@
 import type { DividerProps, GridProps } from "@chakra-ui/react";
 import { Grid } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
 import { ProposalTextCell } from "../components/ProposalTextCell";
-import { getExplorerProposalUrl } from "lib/app-fns/explorer";
+import { useCelatoneApp } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { StopPropagationBox } from "lib/components/StopPropagationBox";
 import { TableRow, TableRowFreeze } from "lib/components/table";
@@ -11,6 +10,7 @@ import { Proposer } from "lib/components/table/proposals/Proposer";
 import { ResolvedHeight } from "lib/components/table/proposals/ResolvedHeight";
 import { StatusChip } from "lib/components/table/proposals/StatusChip";
 import { VotingEndTime } from "lib/components/table/proposals/VotingEndTime";
+import { openNewTab } from "lib/hooks";
 import { AmpTrackMintscan } from "lib/services/amplitude";
 import type { Proposal, Option } from "lib/types";
 import { ProposalStatus } from "lib/types";
@@ -26,7 +26,11 @@ export const ProposalTableRow = ({
   templateColumns,
   boxShadow,
 }: ProposalRowProps) => {
-  const { currentChainName } = useWallet();
+  const {
+    chainConfig: {
+      explorerLink: { proposal: explorerProposal },
+    },
+  } = useCelatoneApp();
 
   // TODO - Revisit split columnsWidth
   const columnsWidth = templateColumns?.toString().split(" ");
@@ -53,12 +57,8 @@ export const ProposalTableRow = ({
                 type: proposal.type,
                 status: proposal.status,
               });
-              window.open(
-                `${getExplorerProposalUrl(
-                  currentChainName
-                )}/${proposal.proposalId.toString()}`,
-                "_blank",
-                "noopener,noreferrer"
+              openNewTab(
+                `${explorerProposal}/${proposal.proposalId.toString()}`
               );
             }
           : undefined
diff --git a/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx b/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx
index adf5da821..05ba22d8d 100644
--- a/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx
+++ b/src/lib/pages/public-project/components/table/code/PublicProjectCodeRow.tsx
@@ -1,7 +1,9 @@
 import { HStack, Grid, Text } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
-import { useInternalNavigate, getAddressTypeByLength } from "lib/app-provider";
+import {
+  useInternalNavigate,
+  useGetAddressTypeByLength,
+} from "lib/app-provider";
 import { InstantiateButton } from "lib/components/button";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { SaveOrRemoveCodeModal } from "lib/components/modal";
@@ -21,7 +23,7 @@ export const PublicProjectCodeRow = ({
   templateColumns,
 }: CodeTableRowProps) => {
   const navigate = useInternalNavigate();
-  const { currentChainName } = useWallet();
+  const getAddressTypeByLength = useGetAddressTypeByLength();
   const goToCodeDetails = () => {
     navigate({
       pathname: `/codes/${publicInfo.id}`,
@@ -64,7 +66,7 @@ export const PublicProjectCodeRow = ({
       <TableRow>
         <ExplorerLink
           value={publicInfo.uploader}
-          type={getAddressTypeByLength(currentChainName, publicInfo.uploader)}
+          type={getAddressTypeByLength(publicInfo.uploader)}
           showCopyOnHover
         />
       </TableRow>
diff --git a/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx b/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx
index f61ad1b16..5cc1b2e2f 100644
--- a/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx
+++ b/src/lib/pages/public-project/components/table/contract/PublicProjectContractRow.tsx
@@ -7,9 +7,11 @@ import {
   Text,
   Flex,
 } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
-import { useInternalNavigate, getAddressTypeByLength } from "lib/app-provider";
+import {
+  useInternalNavigate,
+  useGetAddressTypeByLength,
+} from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
@@ -42,7 +44,7 @@ export const PublicProjectContractRow = ({
   templateColumns,
 }: ContractTableRowProps) => {
   const navigate = useInternalNavigate();
-  const { currentChainName } = useWallet();
+  const getAddressTypeByLength = useGetAddressTypeByLength();
 
   const goToContractDetails = () => {
     navigate({
@@ -63,7 +65,6 @@ export const PublicProjectContractRow = ({
         <ExplorerLink
           value={publicContractInfo.publicInfo.contractAddress}
           type={getAddressTypeByLength(
-            currentChainName,
             publicContractInfo.publicInfo.contractAddress
           )}
           showCopyOnHover
@@ -83,7 +84,6 @@ export const PublicProjectContractRow = ({
         <ExplorerLink
           value={publicContractInfo.publicInfo.instantiator}
           type={getAddressTypeByLength(
-            currentChainName,
             publicContractInfo.publicInfo.instantiator
           )}
           showCopyOnHover
diff --git a/src/lib/pages/public-project/index.tsx b/src/lib/pages/public-project/index.tsx
index e1d07fd20..ef51fef9a 100644
--- a/src/lib/pages/public-project/index.tsx
+++ b/src/lib/pages/public-project/index.tsx
@@ -2,12 +2,14 @@ import { Flex, Heading } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
+import { useWasmConfig } from "lib/app-provider";
 import PageContainer from "lib/components/PageContainer";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 
 import { AllProject } from "./components/AllProject";
 
 export const AllPublicProjectsPage = () => {
+  useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
 
   useEffect(() => {
diff --git a/src/lib/pages/query/components/QueryArea.tsx b/src/lib/pages/query/components/QueryArea.tsx
index 018b0ad06..ed1254d1e 100644
--- a/src/lib/pages/query/components/QueryArea.tsx
+++ b/src/lib/pages/query/components/QueryArea.tsx
@@ -40,7 +40,8 @@ export const QueryArea = ({
   initialMsg,
   cmds,
 }: QueryAreaProps) => {
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
+
   const userKey = useUserKey();
   const { addActivity } = useContractStore();
   const { address } = useWallet();
@@ -50,8 +51,8 @@ export const QueryArea = ({
 
   // TODO: Abstract query
   const { refetch, isFetching, isRefetching } = useQuery(
-    ["query", endpoint, contractAddress, msg],
-    async () => queryData(endpoint, contractAddress, msg),
+    ["query", lcdEndpoint, contractAddress, msg],
+    async () => queryData(lcdEndpoint, contractAddress, msg),
     {
       enabled: false,
       retry: false,
diff --git a/src/lib/pages/query/index.tsx b/src/lib/pages/query/index.tsx
index 898c4b5f9..2160bc207 100644
--- a/src/lib/pages/query/index.tsx
+++ b/src/lib/pages/query/index.tsx
@@ -4,7 +4,11 @@ import type { AxiosError } from "axios";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
-import { useInternalNavigate, useLCDEndpoint } from "lib/app-provider";
+import {
+  useInternalNavigate,
+  useLCDEndpoint,
+  useWasmConfig,
+} from "lib/app-provider";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
 import { CustomIcon } from "lib/components/icon";
 import { LoadingOverlay } from "lib/components/LoadingOverlay";
@@ -22,9 +26,10 @@ import {
 import { QueryArea } from "./components/QueryArea";
 
 const Query = () => {
+  useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const navigate = useInternalNavigate();
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
 
   const [contractAddress, setContractAddress] = useState("" as ContractAddr);
   const [initialMsg, setInitialMsg] = useState("");
@@ -50,8 +55,8 @@ const Query = () => {
 
   // TODO: Abstract query and make query key
   const { isFetching } = useQuery(
-    ["query", "cmds", endpoint, contractAddress, '{"": {}}'],
-    async () => queryData(endpoint, contractAddress, '{"": {}}'),
+    ["query", "cmds", lcdEndpoint, contractAddress, '{"": {}}'],
+    async () => queryData(lcdEndpoint, contractAddress, '{"": {}}'),
     {
       enabled: !!contractAddress,
       retry: false,
diff --git a/src/lib/pages/txs/components/TxsTable.tsx b/src/lib/pages/txs/components/TxsTable.tsx
index 28cd237d1..0dc16c94f 100644
--- a/src/lib/pages/txs/components/TxsTable.tsx
+++ b/src/lib/pages/txs/components/TxsTable.tsx
@@ -1,7 +1,7 @@
 import type { ChangeEvent } from "react";
 import { useEffect } from "react";
 
-import { useChainId } from "lib/app-provider";
+import { useCelatoneApp } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
@@ -13,7 +13,7 @@ interface TxsTableProps {
 }
 
 export const TxsTable = ({ isViewMore }: TxsTableProps) => {
-  const chainId = useChainId();
+  const { currentChainId } = useCelatoneApp();
   const { data: countTxs = 0 } = useTxsCount();
 
   const {
@@ -47,7 +47,7 @@ export const TxsTable = ({ isViewMore }: TxsTableProps) => {
   useEffect(() => {
     if (!isViewMore) setPageSize(10);
     setCurrentPage(1);
-  }, [chainId, isViewMore, setCurrentPage, setPageSize]);
+  }, [currentChainId, isViewMore, setCurrentPage, setPageSize]);
   // TODO - Might consider adding this state in all transaction table
   if (error)
     return (
diff --git a/src/lib/pages/upload/index.tsx b/src/lib/pages/upload/index.tsx
index 8a1661365..ef082dbe6 100644
--- a/src/lib/pages/upload/index.tsx
+++ b/src/lib/pages/upload/index.tsx
@@ -3,7 +3,7 @@ import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { Stepper } from "lib/components/stepper";
 import { UploadSection } from "lib/components/upload/UploadSection";
@@ -26,6 +26,8 @@ const Upload = () => {
     !isPermissionedNetwork ||
     Boolean(data?.addresses?.includes(address as HumanAddr));
 
+  useWasmConfig({ shouldRedirect: true });
+
   useEffect(() => {
     // Redirect back to deploy page
     if (!enableUpload && !isLoading)
diff --git a/src/lib/services/account.ts b/src/lib/services/account.ts
index 3fc1ad556..1f33a54a2 100644
--- a/src/lib/services/account.ts
+++ b/src/lib/services/account.ts
@@ -1,20 +1,11 @@
 import axios from "axios";
 
-import { CELATONE_API_ENDPOINT, getChainApiPath } from "env";
-import type { Addr, Balance, Option } from "lib/types";
+import type { Addr, Balance } from "lib/types";
 
 export const getAccountBalanceInfo = async (
-  walletAddr: Addr,
-  chainName: Option<string>,
-  chainId: Option<string>
+  baseApiRoute: string,
+  walletAddr: Addr
 ): Promise<Balance[]> => {
-  if (!chainName || !chainId)
-    throw new Error("Invalid chain (getAccountBalanceInfo)");
-
-  const { data } = await axios.get<Balance[]>(
-    `${CELATONE_API_ENDPOINT}/balances/${getChainApiPath(
-      chainName
-    )}/${chainId}/${walletAddr}`
-  );
+  const { data } = await axios.get<Balance[]>(`${baseApiRoute}/${walletAddr}`);
   return data;
 };
diff --git a/src/lib/services/accountService.ts b/src/lib/services/accountService.ts
index 11790446e..b7246c017 100644
--- a/src/lib/services/accountService.ts
+++ b/src/lib/services/accountService.ts
@@ -1,36 +1,21 @@
-import { useWallet } from "@cosmos-kit/react";
 import type { UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 
-import { useCelatoneApp } from "lib/app-provider";
+import { useCelatoneApp, useBaseApiRoute } from "lib/app-provider";
 import { getAccountIdByAddressQueryDocument } from "lib/query";
 import type { Addr, Balance, Option } from "lib/types";
 
 import { getAccountBalanceInfo } from "./account";
 
 export const useAccountBalances = (
-  walletAddress: Addr
+  address: Addr
 ): UseQueryResult<Balance[]> => {
-  const { currentChainRecord } = useWallet();
+  const balancesApiRoute = useBaseApiRoute("balances");
 
   return useQuery(
-    [
-      "account_balance_info",
-      walletAddress,
-      currentChainRecord?.name,
-      currentChainRecord?.chain.chain_id,
-    ],
-    async () =>
-      getAccountBalanceInfo(
-        walletAddress as Addr,
-        currentChainRecord?.name,
-        currentChainRecord?.chain.chain_id
-      ),
-    {
-      enabled: !!currentChainRecord || !!walletAddress,
-      retry: 1,
-      refetchOnWindowFocus: false,
-    }
+    ["account_balance_info", address, balancesApiRoute],
+    async () => getAccountBalanceInfo(balancesApiRoute, address as Addr),
+    { enabled: !!address, retry: 1, refetchOnWindowFocus: false }
   );
 };
 
diff --git a/src/lib/services/asset.ts b/src/lib/services/asset.ts
index 1dc702f7a..d222cf2d6 100644
--- a/src/lib/services/asset.ts
+++ b/src/lib/services/asset.ts
@@ -1,32 +1,19 @@
 import axios from "axios";
 
-import { CELATONE_API_ENDPOINT, getChainApiPath } from "env";
-import type { AssetInfo, Option } from "lib/types";
+import type { AssetInfo } from "lib/types";
 
 export const getAssetInfo = async (
-  chainName: Option<string>,
-  chainId: Option<string>,
+  baseApiRoute: string,
   denom: string
 ): Promise<AssetInfo> => {
-  if (!chainName || !chainId) throw new Error("Invalid chain (getAssetInfo)");
   if (!denom.trim().length) throw new Error("Empty denom");
-  const { data } = await axios.get(
-    `${CELATONE_API_ENDPOINT}/assets/${getChainApiPath(
-      chainName
-    )}/${chainId}/${denom}`
-  );
+  const { data } = await axios.get(`${baseApiRoute}/${denom}`);
   return data;
 };
 
 export const getAssetInfos = async (
-  chainName: Option<string>,
-  chainId: Option<string>
+  baseApiRoute: string
 ): Promise<AssetInfo[]> => {
-  if (!chainName || !chainId) throw new Error("Invalid chain (getAssetInfos)");
-  const { data } = await axios.get<AssetInfo[]>(
-    `${CELATONE_API_ENDPOINT}/assets/${getChainApiPath(
-      chainName
-    )}/${chainId}/prices`
-  );
+  const { data } = await axios.get<AssetInfo[]>(`${baseApiRoute}/prices`);
   return data;
 };
diff --git a/src/lib/services/assetService.ts b/src/lib/services/assetService.ts
index 9511a0c69..9ff79d1b4 100644
--- a/src/lib/services/assetService.ts
+++ b/src/lib/services/assetService.ts
@@ -1,6 +1,6 @@
-import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 
+import { useBaseApiRoute } from "lib/app-provider";
 import { getAssetInfos } from "lib/services/asset";
 import type { AssetInfo, Option } from "lib/types";
 
@@ -10,21 +10,12 @@ export const useAssetInfos = (): {
   assetInfos: AssetInfosOpt;
   isLoading: boolean;
 } => {
-  const { currentChainRecord } = useWallet();
+  const assetsApiRoute = useBaseApiRoute("assets");
 
   const { data: assets, isLoading } = useQuery(
-    [
-      "query",
-      "assetInfos",
-      currentChainRecord?.name,
-      currentChainRecord?.chain.chain_id,
-    ],
-    async () =>
-      getAssetInfos(
-        currentChainRecord?.name,
-        currentChainRecord?.chain.chain_id
-      ),
-    { enabled: !!currentChainRecord, retry: 1, refetchOnWindowFocus: false }
+    ["query", "assetInfos", assetsApiRoute],
+    async () => getAssetInfos(assetsApiRoute),
+    { enabled: !!assetsApiRoute, retry: 1, refetchOnWindowFocus: false }
   );
 
   return {
diff --git a/src/lib/services/blockService.ts b/src/lib/services/blockService.ts
index 7cf07c37f..c94360580 100644
--- a/src/lib/services/blockService.ts
+++ b/src/lib/services/blockService.ts
@@ -2,7 +2,7 @@ import type { UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 
-import { useCelatoneApp, useChainId } from "lib/app-provider";
+import { useCelatoneApp } from "lib/app-provider";
 import {
   getLatestBlockInfoQueryDocument,
   getBlockDetailsByHeightQueryDocument,
@@ -14,13 +14,13 @@ import type {
   LatestBlock,
   ValidatorAddr,
 } from "lib/types";
-import { parseDate, parseDateOpt, parseTxHash } from "lib/utils";
+import { isBlock, parseDate, parseDateOpt, parseTxHash } from "lib/utils";
 
 export const useBlocklistQuery = (
   limit: number,
   offset: number
 ): UseQueryResult<BlockInfo[]> => {
-  const chainId = useChainId();
+  const { currentChainId } = useCelatoneApp();
   const { indexerGraphClient } = useCelatoneApp();
   const queryFn = useCallback(
     async () =>
@@ -35,7 +35,7 @@ export const useBlocklistQuery = (
               transactions_aggregate,
               validator,
             }) => ({
-              network: chainId,
+              network: currentChainId,
               hash: parseTxHash(hash),
               height,
               timestamp: parseDate(timestamp),
@@ -50,7 +50,7 @@ export const useBlocklistQuery = (
             })
           )
         ),
-    [indexerGraphClient, chainId, limit, offset]
+    [indexerGraphClient, currentChainId, limit, offset]
   );
 
   return useQuery(["blocks", indexerGraphClient, limit, offset], queryFn);
@@ -70,18 +70,21 @@ export const useBlockCountQuery = (): UseQueryResult<number> => {
 };
 
 export const useBlockDetailsQuery = (
-  height: number
+  height: string
 ): UseQueryResult<BlockDetails | null> => {
-  const chainId = useChainId();
+  const { currentChainId } = useCelatoneApp();
   const { indexerGraphClient } = useCelatoneApp();
+
   const queryFn = useCallback(
     async () =>
       indexerGraphClient
-        .request(getBlockDetailsByHeightQueryDocument, { height })
+        .request(getBlockDetailsByHeightQueryDocument, {
+          height: Number(height),
+        })
         .then<BlockDetails | null>(({ blocks_by_pk }) =>
           blocks_by_pk
             ? {
-                network: chainId,
+                network: currentChainId,
                 hash: parseTxHash(blocks_by_pk.hash),
                 height: blocks_by_pk.height,
                 timestamp: parseDate(blocks_by_pk.timestamp),
@@ -99,11 +102,11 @@ export const useBlockDetailsQuery = (
               }
             : null
         ),
-    [indexerGraphClient, chainId, height]
+    [indexerGraphClient, currentChainId, height]
   );
 
   return useQuery(["block_details", indexerGraphClient, height], queryFn, {
-    keepPreviousData: true,
+    enabled: isBlock(height),
     retry: false,
     refetchOnWindowFocus: false,
   });
diff --git a/src/lib/services/code.ts b/src/lib/services/code.ts
index db6075bcc..d06302e29 100644
--- a/src/lib/services/code.ts
+++ b/src/lib/services/code.ts
@@ -18,10 +18,10 @@ interface CodeIdInfoResponse {
 
 export const getCodeIdInfo = async (
   endpoint: string,
-  id: number
+  id: string
 ): Promise<CodeIdInfoResponse> => {
   const { data } = await axios.get<CodeIdInfoResponse>(
-    `${endpoint}cosmwasm/wasm/v1/code/${id}`
+    `${endpoint}/cosmwasm/wasm/v1/code/${id}`
   );
   return data;
 };
diff --git a/src/lib/services/codeService.ts b/src/lib/services/codeService.ts
index 2bb61cb91..598b589e7 100644
--- a/src/lib/services/codeService.ts
+++ b/src/lib/services/codeService.ts
@@ -22,7 +22,7 @@ import type {
   Addr,
   HumanAddr,
 } from "lib/types";
-import { parseDateOpt, parseTxHashOpt } from "lib/utils";
+import { isCodeId, parseDateOpt, parseTxHashOpt } from "lib/utils";
 
 export const useCodeListQuery = (): UseQueryResult<CodeInfo[]> => {
   const { indexerGraphClient } = useCelatoneApp();
@@ -118,7 +118,8 @@ export const useCodeListByCodeIds = (
 };
 
 export const useCodeDataByCodeId = (
-  codeId: Option<number>
+  codeId: string,
+  enabled = true
 ): UseQueryResult<Omit<CodeData, "chainId"> | null> => {
   const { indexerGraphClient } = useCelatoneApp();
 
@@ -127,7 +128,7 @@ export const useCodeDataByCodeId = (
 
     return indexerGraphClient
       .request(getCodeDataByCodeId, {
-        codeId,
+        codeId: Number(codeId),
       })
       .then(({ codes_by_pk }) => {
         if (!codes_by_pk) return null;
@@ -156,8 +157,7 @@ export const useCodeDataByCodeId = (
       });
   }, [codeId, indexerGraphClient]);
   return useQuery(["code_data_by_id", codeId, indexerGraphClient], queryFn, {
-    keepPreviousData: true,
-    enabled: !!codeId,
+    enabled: enabled && isCodeId(codeId),
   });
 };
 
diff --git a/src/lib/services/contract.ts b/src/lib/services/contract.ts
index db36e2fe7..08c26c4f0 100644
--- a/src/lib/services/contract.ts
+++ b/src/lib/services/contract.ts
@@ -1,7 +1,6 @@
 import axios from "axios";
 import type { GraphQLClient } from "graphql-request";
 
-import { CELATONE_API_ENDPOINT, getChainApiPath } from "env";
 import { getBlockTimestampByHeightQueryDocument } from "lib/query";
 import type {
   Addr,
@@ -64,7 +63,7 @@ export const queryData = async (
 ) => {
   const b64 = encode(msg);
   const { data } = await axios.get(
-    `${endpoint}cosmwasm/wasm/v1/contract/${contractAddress}/smart/${b64}`
+    `${endpoint}/cosmwasm/wasm/v1/contract/${contractAddress}/smart/${b64}`
   );
   return data;
 };
@@ -74,7 +73,7 @@ export const queryContract = async (
   contractAddress: ContractAddr
 ) => {
   const { data } = await axios.get<ContractResponse>(
-    `${endpoint}cosmwasm/wasm/v1/contract/${contractAddress}`
+    `${endpoint}/cosmwasm/wasm/v1/contract/${contractAddress}`
   );
   return data;
 };
@@ -84,7 +83,7 @@ export const queryContractCw2Info = async (
   contractAddress: ContractAddr
 ) => {
   const { data } = await axios.get<ContractCw2InfoRaw>(
-    `${endpoint}cosmwasm/wasm/v1/contract/${contractAddress}/raw/Y29udHJhY3RfaW5mbw%3D%3D`
+    `${endpoint}/cosmwasm/wasm/v1/contract/${contractAddress}/raw/Y29udHJhY3RfaW5mbw%3D%3D`
   );
   return JSON.parse(libDecode(data.data)) as ContractCw2Info;
 };
@@ -127,16 +126,11 @@ export const queryInstantiateInfo = async (
 };
 
 export const queryContractBalances = async (
-  chainName: Option<string>,
-  chainId: Option<string>,
+  balancesApiRoute: string,
   contractAddress: ContractAddr
 ): Promise<Balance[]> => {
-  if (!chainName || !chainId)
-    throw new Error("Invalid chain (queryContractBalances)");
   const { data } = await axios.get<Balance[]>(
-    `${CELATONE_API_ENDPOINT}/balances/${getChainApiPath(
-      chainName
-    )}/${chainId}/${contractAddress}`
+    `${balancesApiRoute}/${contractAddress}`
   );
   return data;
 };
diff --git a/src/lib/services/delegationService.ts b/src/lib/services/delegationService.ts
index 37a920abc..697aba33e 100644
--- a/src/lib/services/delegationService.ts
+++ b/src/lib/services/delegationService.ts
@@ -23,14 +23,14 @@ import {
 } from "./delegation";
 
 export const useStakingParams = (): UseQueryResult<RawStakingParams> => {
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
 
   const queryFn = useCallback(
-    async () => getStakingParams(endpoint),
-    [endpoint]
+    async () => getStakingParams(lcdEndpoint),
+    [lcdEndpoint]
   );
 
-  return useQuery(["query", "staking_params", endpoint], queryFn, {
+  return useQuery(["query", "staking_params", lcdEndpoint], queryFn, {
     retry: 1,
     refetchOnWindowFocus: false,
   });
@@ -39,14 +39,14 @@ export const useStakingParams = (): UseQueryResult<RawStakingParams> => {
 export const useDelegations = (
   address: Addr
 ): UseQueryResult<RawDelegation[]> => {
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
 
   const queryFn = useCallback(
-    async () => getDelegations(endpoint, address),
-    [address, endpoint]
+    async () => getDelegations(lcdEndpoint, address),
+    [address, lcdEndpoint]
   );
 
-  return useQuery(["query", "delegations", endpoint, address], queryFn, {
+  return useQuery(["query", "delegations", lcdEndpoint, address], queryFn, {
     retry: 1,
     refetchOnWindowFocus: false,
   });
@@ -55,14 +55,14 @@ export const useDelegations = (
 export const useUnbondings = (
   address: Addr
 ): UseQueryResult<RawUnbonding[]> => {
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
 
   const queryFn = useCallback(
-    async () => getUnbondings(endpoint, address),
-    [address, endpoint]
+    async () => getUnbondings(lcdEndpoint, address),
+    [address, lcdEndpoint]
   );
 
-  return useQuery(["query", "unbondings", endpoint, address], queryFn, {
+  return useQuery(["query", "unbondings", lcdEndpoint, address], queryFn, {
     retry: 1,
     refetchOnWindowFocus: false,
   });
@@ -71,30 +71,34 @@ export const useUnbondings = (
 export const useDelegationRewards = (
   address: Addr
 ): UseQueryResult<RawDelegationRewards> => {
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
 
   const queryFn = useCallback(
-    async () => getDelegationRewards(endpoint, address),
-    [address, endpoint]
+    async () => getDelegationRewards(lcdEndpoint, address),
+    [address, lcdEndpoint]
   );
 
-  return useQuery(["query", "delegation_rewards", endpoint, address], queryFn, {
-    retry: 1,
-    refetchOnWindowFocus: false,
-  });
+  return useQuery(
+    ["query", "delegation_rewards", lcdEndpoint, address],
+    queryFn,
+    {
+      retry: 1,
+      refetchOnWindowFocus: false,
+    }
+  );
 };
 
 export const useRedelegations = (
   address: Addr
 ): UseQueryResult<RawRedelegation[]> => {
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
 
   const queryFn = useCallback(
-    async () => getRedelegations(endpoint, address),
-    [address, endpoint]
+    async () => getRedelegations(lcdEndpoint, address),
+    [address, lcdEndpoint]
   );
 
-  return useQuery(["query", "redelegations", endpoint, address], queryFn, {
+  return useQuery(["query", "redelegations", lcdEndpoint, address], queryFn, {
     retry: 1,
     refetchOnWindowFocus: false,
   });
@@ -103,14 +107,14 @@ export const useRedelegations = (
 export const useCommission = (
   address: ValidatorAddr
 ): UseQueryResult<RawCommission> => {
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
 
   const queryFn = useCallback(
-    async () => getCommission(endpoint, address),
-    [address, endpoint]
+    async () => getCommission(lcdEndpoint, address),
+    [address, lcdEndpoint]
   );
 
-  return useQuery(["query", "commission", endpoint, address], queryFn, {
+  return useQuery(["query", "commission", lcdEndpoint, address], queryFn, {
     retry: 1,
     refetchOnWindowFocus: false,
   });
diff --git a/src/lib/services/publicProjectService.ts b/src/lib/services/publicProjectService.ts
index 1c9c7aa10..84dd9c8aa 100644
--- a/src/lib/services/publicProjectService.ts
+++ b/src/lib/services/publicProjectService.ts
@@ -1,10 +1,9 @@
-import { useWallet } from "@cosmos-kit/react";
 import type { UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { useCallback } from "react";
 
-import { CELATONE_API_ENDPOINT, getChainApiPath, getMainnetApiPath } from "env";
+import { useBaseApiRoute } from "lib/app-provider";
 import type {
   PublicContract,
   Option,
@@ -15,6 +14,7 @@ import type {
   PublicCode,
   RawPublicCode,
 } from "lib/types";
+import { isCodeId } from "lib/utils";
 
 const parseContract = (raw: RawPublicContract): PublicContract => ({
   contractAddress: raw.address,
@@ -32,18 +32,11 @@ const parseCode = (raw: RawPublicCode): PublicCode => ({
 });
 
 export const usePublicProjects = (): UseQueryResult<PublicProjectInfo[]> => {
-  const { currentChainRecord } = useWallet();
+  const projectsApiRoute = useBaseApiRoute("projects");
 
   const queryFn = useCallback(async () => {
-    if (!currentChainRecord)
-      throw new Error("No chain selected (usePublicProjects)");
-
     return axios
-      .get<RawPublicProjectInfo[]>(
-        `${CELATONE_API_ENDPOINT}/projects/${getChainApiPath(
-          currentChainRecord.chain.chain_name
-        )}/${getMainnetApiPath(currentChainRecord.chain.chain_id)}`
-      )
+      .get<RawPublicProjectInfo[]>(projectsApiRoute)
       .then(({ data: projects }) =>
         projects.map<PublicProjectInfo>((project) => ({
           ...project,
@@ -51,9 +44,9 @@ export const usePublicProjects = (): UseQueryResult<PublicProjectInfo[]> => {
           contracts: project.contracts.map(parseContract),
         }))
       );
-  }, [currentChainRecord]);
+  }, [projectsApiRoute]);
 
-  return useQuery(["public_project", currentChainRecord], queryFn, {
+  return useQuery(["public_project", projectsApiRoute], queryFn, {
     keepPreviousData: true,
   });
 };
@@ -61,57 +54,41 @@ export const usePublicProjects = (): UseQueryResult<PublicProjectInfo[]> => {
 export const usePublicProjectBySlug = (
   slug: Option<string>
 ): UseQueryResult<PublicProjectInfo> => {
-  const { currentChainRecord } = useWallet();
+  const projectsApiRoute = useBaseApiRoute("projects");
 
   const queryFn = useCallback(async () => {
     if (!slug) throw new Error("No project selected (usePublicProjectBySlug)");
-    if (!currentChainRecord)
-      throw new Error("No chain selected (usePublicProjectBySlug)");
     return axios
-      .get<RawPublicProjectInfo>(
-        `${CELATONE_API_ENDPOINT}/projects/${getChainApiPath(
-          currentChainRecord.chain.chain_name
-        )}/${getMainnetApiPath(currentChainRecord.chain.chain_id)}/${slug}`
-      )
+      .get<RawPublicProjectInfo>(`${projectsApiRoute}/${slug}`)
       .then<PublicProjectInfo>(({ data: publicProject }) => ({
         ...publicProject,
         codes: publicProject.codes.map(parseCode),
         contracts: publicProject.contracts.map(parseContract),
       }));
-  }, [currentChainRecord, slug]);
+  }, [projectsApiRoute, slug]);
 
-  return useQuery(
-    ["public_project_by_slug", slug, currentChainRecord],
-    queryFn,
-    {
-      enabled: !!slug,
-    }
-  );
+  return useQuery(["public_project_by_slug", projectsApiRoute, slug], queryFn, {
+    enabled: !!slug,
+  });
 };
 
 export const usePublicProjectByContractAddress = (
   contractAddress: Option<string>
 ): UseQueryResult<PublicInfo> => {
-  const { currentChainRecord } = useWallet();
+  const projectsApiRoute = useBaseApiRoute("contracts");
 
   const queryFn = useCallback(async () => {
     if (!contractAddress)
       throw new Error(
         "Contract address not found (usePublicProjectByContractAddress)"
       );
-    if (!currentChainRecord)
-      throw new Error("No chain selected (usePublicProjectByContractAddress)");
     return axios
-      .get<PublicInfo>(
-        `${CELATONE_API_ENDPOINT}/contracts/${getChainApiPath(
-          currentChainRecord.chain.chain_name
-        )}/${currentChainRecord.chain.chain_id}/${contractAddress}`
-      )
+      .get<PublicInfo>(`${projectsApiRoute}/${contractAddress}`)
       .then(({ data: projectInfo }) => projectInfo);
-  }, [contractAddress, currentChainRecord]);
+  }, [projectsApiRoute, contractAddress]);
 
   return useQuery(
-    ["public_project_by_contract_address", contractAddress, currentChainRecord],
+    ["public_project_by_contract_address", projectsApiRoute, contractAddress],
     queryFn,
     {
       keepPreviousData: true,
@@ -123,31 +100,25 @@ export const usePublicProjectByContractAddress = (
 };
 
 export const usePublicProjectByCodeId = (
-  codeId: Option<number>
+  codeId: string
 ): UseQueryResult<PublicCode> => {
-  const { currentChainRecord } = useWallet();
+  const projectsApiRoute = useBaseApiRoute("codes");
 
   const queryFn = useCallback(async () => {
     if (!codeId)
       throw new Error("Code ID not found (usePublicProjectByCodeId)");
-    if (!currentChainRecord)
-      throw new Error("No chain selected (usePublicProjectByCodeId)");
 
     return axios
-      .get<RawPublicCode>(
-        `${CELATONE_API_ENDPOINT}/codes/${getChainApiPath(
-          currentChainRecord.chain.chain_name
-        )}/${currentChainRecord.chain.chain_id}/${codeId}`
-      )
+      .get<RawPublicCode>(`${projectsApiRoute}/${codeId}`)
       .then(({ data: projectInfo }) => parseCode(projectInfo));
-  }, [codeId, currentChainRecord]);
+  }, [projectsApiRoute, codeId]);
 
   return useQuery(
-    ["public_project_by_code_id", codeId, currentChainRecord],
+    ["public_project_by_code_id", projectsApiRoute, codeId],
     queryFn,
     {
       keepPreviousData: true,
-      enabled: !!codeId,
+      enabled: isCodeId(codeId),
       retry: false,
       refetchOnWindowFocus: false,
     }
diff --git a/src/lib/services/searchService.ts b/src/lib/services/searchService.ts
new file mode 100644
index 000000000..95cc47080
--- /dev/null
+++ b/src/lib/services/searchService.ts
@@ -0,0 +1,85 @@
+import { useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+
+import {
+  useCelatoneApp,
+  useGetAddressType,
+  useLCDEndpoint,
+} from "lib/app-provider";
+import type { ContractAddr } from "lib/types";
+import { isBlock, isCodeId, isTxHash } from "lib/utils";
+
+import { useBlockDetailsQuery } from "./blockService";
+import { useCodeDataByCodeId } from "./codeService";
+import { queryContract } from "./contract";
+import { useTxData } from "./txService";
+
+export type SearchResultType =
+  | "Code ID"
+  | "Contract Address"
+  | "Wallet Address"
+  | "Transaction Hash"
+  | "Proposal ID"
+  | "Block";
+
+// TODO: Add Proposal ID, ICNS query
+export const useSearchHandler = (
+  keyword: string,
+  resetHandlerStates: () => void
+): { results: SearchResultType[]; isLoading: boolean } => {
+  const [debouncedKeyword, setDebouncedKeyword] = useState(keyword);
+  const {
+    chainConfig: {
+      features: {
+        wasm: { enabled: isWasm },
+      },
+    },
+  } = useCelatoneApp();
+  const lcdEndpoint = useLCDEndpoint();
+  const getAddressType = useGetAddressType();
+  const addressType = getAddressType(debouncedKeyword);
+  const { data: txData, isLoading: txLoading } = useTxData(debouncedKeyword);
+  const { data: codeData, isLoading: codeLoading } = useCodeDataByCodeId(
+    debouncedKeyword,
+    isWasm
+  );
+  const { data: contractData, isLoading: contractLoading } = useQuery(
+    ["query", "contract", lcdEndpoint, debouncedKeyword],
+    async () => queryContract(lcdEndpoint, debouncedKeyword as ContractAddr),
+    {
+      enabled: isWasm && Boolean(debouncedKeyword),
+      refetchOnWindowFocus: false,
+      retry: false,
+    }
+  );
+  const { data: blockData, isLoading: blockLoading } =
+    useBlockDetailsQuery(debouncedKeyword);
+  const txDataLoading = isTxHash(debouncedKeyword) && txLoading;
+  const codeDataLoading = isWasm && isCodeId(debouncedKeyword) && codeLoading;
+  const contractDataLoading = isWasm && contractLoading;
+  const blockDataLoading = isBlock(debouncedKeyword) && blockLoading;
+  const isAddr =
+    addressType === "user_address" || addressType === "contract_address";
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setDebouncedKeyword(keyword);
+      resetHandlerStates();
+    }, 500);
+    return () => clearTimeout(timeoutId);
+  }, [keyword, resetHandlerStates]);
+
+  return {
+    results: [
+      isAddr && (contractData ? "Contract Address" : "Wallet Address"),
+      txData && "Transaction Hash",
+      codeData && "Code ID",
+      blockData && "Block",
+    ].filter((res) => Boolean(res)) as SearchResultType[],
+    isLoading:
+      txDataLoading ||
+      codeDataLoading ||
+      contractDataLoading ||
+      blockDataLoading,
+  };
+};
diff --git a/src/lib/services/tx.ts b/src/lib/services/tx.ts
index a05c1c7ab..0a34cc55e 100644
--- a/src/lib/services/tx.ts
+++ b/src/lib/services/tx.ts
@@ -4,7 +4,6 @@ import type { CompactBitArray } from "cosmjs-types/cosmos/crypto/multisig/v1beta
 import type { SignMode } from "cosmjs-types/cosmos/tx/signing/v1beta1/signing";
 import type { Any } from "cosmjs-types/google/protobuf/any";
 
-import { CELATONE_API_ENDPOINT, getChainApiPath } from "env";
 import type { TypeUrl } from "lib/data";
 import type { Option, Fee } from "lib/types";
 import { parseDateOpt } from "lib/utils";
@@ -80,15 +79,10 @@ export interface TxResponse {
 }
 
 export const queryTxData = async (
-  chainName: string,
-  chainId: string,
+  txsApiRoute: string,
   txHash: string
 ): Promise<TxResponse> => {
-  const { data } = await axios.get(
-    `${CELATONE_API_ENDPOINT}/txs/${getChainApiPath(
-      chainName
-    )}/${chainId}/${txHash.toUpperCase()}`
-  );
+  const { data } = await axios.get(`${txsApiRoute}/${txHash.toUpperCase()}`);
 
   return {
     ...data.tx_response,
diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index 65fb7d983..918483bf9 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -1,4 +1,3 @@
-import { useWallet } from "@cosmos-kit/react";
 import type {
   QueryFunctionContext,
   UseQueryResult,
@@ -6,7 +5,7 @@ import type {
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 
-import { useCelatoneApp, useChainId } from "lib/app-provider";
+import { useBaseApiRoute, useCelatoneApp } from "lib/app-provider";
 import {
   getTxsByAddressPagination,
   getTxsCountByAddress,
@@ -37,22 +36,22 @@ export interface TxData extends TxResponse {
 }
 
 export const useTxData = (txHash: Option<string>): UseQueryResult<TxData> => {
-  const { currentChainName } = useWallet();
-  const chainId = useChainId();
+  const { currentChainId } = useCelatoneApp();
+  const txsApiRoute = useBaseApiRoute("txs");
   const queryFn = useCallback(
     async ({ queryKey }: QueryFunctionContext<string[]>): Promise<TxData> => {
-      const txData = await queryTxData(queryKey[1], queryKey[2], queryKey[3]);
+      const txData = await queryTxData(queryKey[1], queryKey[2]);
       return {
         ...txData,
-        chainId,
+        chainId: currentChainId,
         isTxFailed: Boolean(txData.code),
       };
     },
-    [chainId]
+    [currentChainId]
   );
 
   return useQuery({
-    queryKey: ["tx_data", currentChainName, chainId, txHash] as string[],
+    queryKey: ["tx_data", txsApiRoute, txHash] as string[],
     queryFn,
     enabled: Boolean(txHash && isTxHash(txHash)),
     refetchOnWindowFocus: false,
diff --git a/src/lib/services/validatorService.ts b/src/lib/services/validatorService.ts
index f0d9ac20f..25c5f1d81 100644
--- a/src/lib/services/validatorService.ts
+++ b/src/lib/services/validatorService.ts
@@ -10,11 +10,14 @@ import { getValidators } from "./validator";
 export const useValidators = (): UseQueryResult<
   Record<string, RawValidator>
 > => {
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useLCDEndpoint();
 
-  const queryFn = useCallback(async () => getValidators(endpoint), [endpoint]);
+  const queryFn = useCallback(
+    async () => getValidators(lcdEndpoint),
+    [lcdEndpoint]
+  );
 
-  return useQuery(["query", "validators", endpoint], queryFn, {
+  return useQuery(["query", "validators", lcdEndpoint], queryFn, {
     retry: 1,
     refetchOnWindowFocus: false,
   });
diff --git a/src/lib/utils/codePermission.ts b/src/lib/utils/codePermission.ts
index 6afb8a039..0226ba131 100644
--- a/src/lib/utils/codePermission.ts
+++ b/src/lib/utils/codePermission.ts
@@ -3,6 +3,14 @@ import { AccessConfigPermission } from "lib/types";
 
 import { truncate } from "./truncate";
 
+export const resolvePermission = (
+  address: Option<Addr>,
+  permission: AccessConfigPermission = AccessConfigPermission.UNKNOWN,
+  permissionAddresses: PermissionAddresses = []
+): boolean =>
+  permission === AccessConfigPermission.EVERYBODY ||
+  (address ? permissionAddresses.includes(address) : false);
+
 export const getPermissionHelper = (
   address: Option<Addr>,
   instantiatePermission: AccessConfigPermission,
@@ -29,8 +37,7 @@ export const getPermissionHelper = (
     }
   };
   const getColor = () =>
-    instantiatePermission === AccessConfigPermission.EVERYBODY ||
-    (address && permissionAddresses.includes(address))
+    resolvePermission(address, instantiatePermission, permissionAddresses)
       ? "success.main"
       : "text.dark";
 
diff --git a/src/lib/utils/icon.ts b/src/lib/utils/icon.ts
new file mode 100644
index 000000000..a985642bf
--- /dev/null
+++ b/src/lib/utils/icon.ts
@@ -0,0 +1,13 @@
+import type { IconKeys } from "lib/components/icon";
+import { INSTANTIATED_LIST_NAME, SAVED_LIST_NAME } from "lib/data";
+
+export const getListIcon = (listName: string): IconKeys => {
+  switch (listName) {
+    case INSTANTIATED_LIST_NAME:
+      return "wallet";
+    case SAVED_LIST_NAME:
+      return "bookmark-solid";
+    default:
+      return "contract-list";
+  }
+};
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index ed77207c6..c81a6156f 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -29,3 +29,4 @@ export * from "./cw2";
 export * from "./bech32";
 export * from "./proposal";
 export * from "./codeHash";
+export * from "./icon";
diff --git a/src/lib/utils/validate.ts b/src/lib/utils/validate.ts
index 135ef432e..b9e9ff2e7 100644
--- a/src/lib/utils/validate.ts
+++ b/src/lib/utils/validate.ts
@@ -1,7 +1,9 @@
 import { fromHex } from "@cosmjs/encoding";
 
-export const isCodeId = (input: string): boolean =>
-  input.length <= 7 && !!Number(input);
+export const isCodeId = (input: string): boolean => {
+  const numberValue = Number(input);
+  return input.length <= 7 && Number.isInteger(numberValue) && numberValue > 0;
+};
 
 export const isTxHash = (input: string): boolean => {
   try {
@@ -12,4 +14,7 @@ export const isTxHash = (input: string): boolean => {
   return input.length === 64;
 };
 
-export const isBlock = (input: string): boolean => !!Number(input);
+export const isBlock = (input: string): boolean => {
+  const numberValue = Number(input);
+  return Number.isInteger(numberValue) && numberValue > 0;
+};
diff --git a/src/pages/[network]/404.tsx b/src/pages/[network]/404.tsx
new file mode 100644
index 000000000..515f962d1
--- /dev/null
+++ b/src/pages/[network]/404.tsx
@@ -0,0 +1,3 @@
+import NotFound from "lib/pages/not-found";
+
+export default NotFound;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 33d498733..eeaf197c0 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,3 +1,4 @@
+import type { EndpointOptions } from "@cosmos-kit/core";
 import { wallets } from "@cosmos-kit/keplr";
 import { WalletProvider } from "@cosmos-kit/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -9,12 +10,7 @@ import type { AppProps } from "next/app";
 import Head from "next/head";
 import Script from "next/script";
 
-import {
-  CELATONE_CONSTANTS,
-  CELATONE_APP_CONTRACT_ADDRESS,
-  CELATONE_FALLBACK_GAS_PRICE,
-  CELATONE_APP_HUMAN_ADDRESS,
-} from "env";
+import { CHAIN_CONFIGS } from "config";
 import { AppProvider } from "lib/app-provider/contexts/app";
 import { Chakra } from "lib/components/Chakra";
 import { MobileGuard } from "lib/components/MobileGuard";
@@ -42,6 +38,18 @@ configurePersistable({
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
   const queryClient = new QueryClient();
+  const availableChainsEndpoints = Object.values(
+    CHAIN_CONFIGS
+  ).reduce<EndpointOptions>(
+    (endpoints, config) => ({
+      ...endpoints,
+      [config.registryChainName]: {
+        rpc: [config.rpc],
+        rest: [config.lcd],
+      },
+    }),
+    {}
+  );
 
   return (
     <Chakra>
@@ -66,32 +74,10 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
           chains={chains}
           assetLists={assets}
           wallets={wallets}
-          endpointOptions={{
-            osmosis: {
-              rpc: ["https://rpc.osmosis.zone/"],
-              rest: ["https://lcd.osmosis.zone/"],
-            },
-            osmosistestnet5: {
-              rpc: ["https://rpc.osmotest5.osmosis.zone/"],
-              rest: ["https://lcd.osmotest5.osmosis.zone/"],
-            },
-            terra2: {
-              rpc: ["https://terra-rpc.lavenderfive.com/"],
-              rest: ["https://phoenix-lcd.terra.dev/"],
-            },
-            terra2testnet: {
-              rpc: ["https://terra-testnet-rpc.polkachu.com/"],
-              rest: ["https://pisco-lcd.terra.dev/"],
-            },
-          }}
+          endpointOptions={availableChainsEndpoints}
         >
           <StoreProvider>
-            <AppProvider
-              fallbackGasPrice={CELATONE_FALLBACK_GAS_PRICE}
-              appContractAddressMap={CELATONE_APP_CONTRACT_ADDRESS}
-              appHumanAddressMap={CELATONE_APP_HUMAN_ADDRESS}
-              constants={CELATONE_CONSTANTS}
-            >
+            <AppProvider>
               <TxBroadcastProvider>
                 <Head>
                   <meta
diff --git a/src/types.ts b/src/types.ts
deleted file mode 100644
index b1afd4ab4..000000000
--- a/src/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { AppConstants } from "lib/app-provider/types";
-import type { ContractAddr, HumanAddr } from "lib/types";
-
-export interface CelatoneContractAddress {
-  example: ContractAddr;
-}
-
-export interface CelatoneHumanAddress {
-  example: HumanAddr;
-}
-
-export interface CelatoneConstants extends AppConstants {
-  maxFileSize: number;
-}

From 5b65bd7764a2037f656d01813d7246687eed2f6f Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 8 Jun 2023 19:19:38 +0700
Subject: [PATCH 215/354] fix: patch remaining

---
 src/lib/app-provider/hooks/useBaseApiRoute.ts | 11 ++++++++-
 src/lib/components/modal/code/SaveNewCode.tsx |  4 ++--
 src/lib/data/index.ts                         |  1 -
 src/lib/data/proposalStoreCode.ts             |  5 ----
 src/lib/pages/instantiate/instantiate.tsx     |  2 +-
 .../migrate/components/MigrateContract.tsx    |  2 +-
 src/lib/pages/proposal/store-code/index.tsx   | 24 +++++++++++--------
 src/lib/services/publicProjectService.ts      | 14 ++++-------
 8 files changed, 32 insertions(+), 31 deletions(-)
 delete mode 100644 src/lib/data/proposalStoreCode.ts

diff --git a/src/lib/app-provider/hooks/useBaseApiRoute.ts b/src/lib/app-provider/hooks/useBaseApiRoute.ts
index 11e049d13..097f30741 100644
--- a/src/lib/app-provider/hooks/useBaseApiRoute.ts
+++ b/src/lib/app-provider/hooks/useBaseApiRoute.ts
@@ -1,7 +1,14 @@
 import { useCelatoneApp } from "../contexts";
 
 export const useBaseApiRoute = (
-  type: "txs" | "balances" | "assets" | "projects" | "contracts" | "codes"
+  type:
+    | "txs"
+    | "balances"
+    | "assets"
+    | "projects"
+    | "contracts"
+    | "codes"
+    | "accounts"
 ): string => {
   const {
     chainConfig: { chain, api },
@@ -24,6 +31,8 @@ export const useBaseApiRoute = (
       return `${api}/contracts/${chain}/${currentChainId}`;
     case "codes":
       return `${api}/codes/${chain}/${currentChainId}`;
+    case "accounts":
+      return `${api}/accounts/${chain}/${currentChainId}`;
     default:
       throw new Error(
         "Error retrieving chain, api, or currentChainId from chain config."
diff --git a/src/lib/components/modal/code/SaveNewCode.tsx b/src/lib/components/modal/code/SaveNewCode.tsx
index d8e9a7a25..40dec9b5a 100644
--- a/src/lib/components/modal/code/SaveNewCode.tsx
+++ b/src/lib/components/modal/code/SaveNewCode.tsx
@@ -60,7 +60,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
 
   const { refetch, isFetching, isRefetching } = useQuery(
     ["query", lcdEndpoint, codeId],
-    async () => getCodeIdInfo(lcdEndpoint, Number(codeId)),
+    async () => getCodeIdInfo(lcdEndpoint, codeId),
     {
       enabled: false,
       retry: false,
@@ -176,7 +176,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
     <ActionModal
       title="Save New Code"
       icon="bookmark-solid"
-      trigger={<Button {...buttonProps} />}
+      trigger={<Button {...buttonProps} as="button" />}
       mainBtnTitle="Save New Code"
       mainAction={handleSave}
       otherAction={reset}
diff --git a/src/lib/data/index.ts b/src/lib/data/index.ts
index f5dadcaf8..bf31ea1e4 100644
--- a/src/lib/data/index.ts
+++ b/src/lib/data/index.ts
@@ -1,3 +1,2 @@
 export * from "./constant";
-export * from "./proposalStoreCode";
 export * from "./tx";
diff --git a/src/lib/data/proposalStoreCode.ts b/src/lib/data/proposalStoreCode.ts
deleted file mode 100644
index 7b10fd2c9..000000000
--- a/src/lib/data/proposalStoreCode.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { getMaxLengthError } from "./constant";
-
-export const MAX_PROPOSAL_TITLE_LENGTH = 255;
-export const getMaxProposalTitleLengthError = (currentLength: number) =>
-  getMaxLengthError("Proposal Title", currentLength, MAX_PROPOSAL_TITLE_LENGTH);
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index 4d1a51ad0..0ed96c79c 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -148,7 +148,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
 
   const { refetch } = useQuery(
     ["query", lcdEndpoint, codeId],
-    async () => getCodeIdInfo(lcdEndpoint, Number(codeId)),
+    async () => getCodeIdInfo(lcdEndpoint, codeId),
     {
       enabled: !!address && !!codeId.length,
       retry: false,
diff --git a/src/lib/pages/migrate/components/MigrateContract.tsx b/src/lib/pages/migrate/components/MigrateContract.tsx
index db7655702..4c156a773 100644
--- a/src/lib/pages/migrate/components/MigrateContract.tsx
+++ b/src/lib/pages/migrate/components/MigrateContract.tsx
@@ -81,7 +81,7 @@ export const MigrateContract = ({
 
   const { refetch } = useQuery(
     ["query", lcdEndpoint, codeId],
-    async () => getCodeIdInfo(lcdEndpoint, Number(codeId)),
+    async () => getCodeIdInfo(lcdEndpoint, codeId),
     {
       enabled: !!address && !!codeId.length,
       retry: false,
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index 0b0553243..bd95636d0 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -44,10 +44,7 @@ import { CodeHashBox } from "lib/components/upload/CodeHashBox";
 import { InstantiatePermissionRadio } from "lib/components/upload/InstantiatePermissionRadio";
 import { SimulateMessageRender } from "lib/components/upload/SimulateMessageRender";
 import { UploadCard } from "lib/components/upload/UploadCard";
-import {
-  getMaxProposalTitleLengthError,
-  MAX_PROPOSAL_TITLE_LENGTH,
-} from "lib/data";
+import { useGetMaxLengthError } from "lib/hooks";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import {
   AmpEvent,
@@ -63,7 +60,7 @@ import type {
   SimulateStatus,
   UploadSectionState,
 } from "lib/types";
-import { AccessType } from "lib/types";
+import { AccessType, AccessConfigPermission } from "lib/types";
 import {
   composeStoreCodeProposalMsg,
   getAmountToVote,
@@ -96,12 +93,16 @@ const page = "proposal-store-code";
 
 const StoreCodeProposal = () => {
   const {
-    appHumanAddress: { example: exampleHumanAddress },
+    constants,
+    chainConfig: { prettyName, exampleAddresses },
   } = useCelatoneApp();
+  const getMaxLengthError = useGetMaxLengthError();
   const { address: walletAddress = "" } = useWallet();
   const fabricateFee = useFabricateFee();
   const { data: govParams } = useGovParams();
   const minDeposit = govParams?.depositParams.minDeposit;
+  const isPermissionless =
+    govParams?.uploadAccess.permission === AccessConfigPermission.EVERYBODY;
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
   const submitStoreCodeProposalTx = useSubmitStoreCodeProposalTx();
   const { broadcast } = useTxBroadcast();
@@ -372,11 +373,11 @@ const StoreCodeProposal = () => {
                   variant="floating"
                   rules={{
                     required: PROPOSAL_STORE_CODE_TEXT.titleRequired,
-                    maxLength: MAX_PROPOSAL_TITLE_LENGTH,
+                    maxLength: constants.maxProposalTitleLength,
                   }}
                   error={
                     errors.title?.message ||
-                    getMaxProposalTitleLengthError(title.length)
+                    getMaxLengthError(title.length, "proposal_title")
                   }
                 />
 
@@ -401,7 +402,7 @@ const StoreCodeProposal = () => {
                   control={control}
                   label={PROPOSAL_STORE_CODE_TEXT.runAsLabel}
                   labelBgColor="background.main"
-                  placeholder={`ex. ${exampleHumanAddress}`}
+                  placeholder={`ex. ${exampleAddresses.user}`}
                   variant="floating"
                   helperText={PROPOSAL_STORE_CODE_TEXT.runAsHelperText}
                   requiredText={PROPOSAL_STORE_CODE_TEXT.runAsRequired}
@@ -603,7 +604,10 @@ const StoreCodeProposal = () => {
           <GridItem area="sidebar">
             <StickySidebar
               marginTop="128px"
-              metadata={SIDEBAR_STORE_CODE_DETAILS}
+              metadata={SIDEBAR_STORE_CODE_DETAILS(
+                prettyName,
+                isPermissionless ? "permissionless" : "permissioned"
+              )}
             />
           </GridItem>
         </Grid>
diff --git a/src/lib/services/publicProjectService.ts b/src/lib/services/publicProjectService.ts
index 84dd9c8aa..6f4e0fc6a 100644
--- a/src/lib/services/publicProjectService.ts
+++ b/src/lib/services/publicProjectService.ts
@@ -128,24 +128,18 @@ export const usePublicProjectByCodeId = (
 export const usePublicProjectByAccountAddress = (
   accountAddress: Option<string>
 ): UseQueryResult<PublicInfo> => {
-  const { currentChainRecord } = useWallet();
+  const projectsApiRoute = useBaseApiRoute("accounts");
   const queryFn = useCallback(async () => {
     if (!accountAddress)
       throw new Error(
         "Wallet address not found (usePublicProjectByAccountAddress)"
       );
-    if (!currentChainRecord)
-      throw new Error("No chain selected (usePublicProjectByAccountAddress)");
     return axios
-      .get<PublicInfo>(
-        `${CELATONE_API_ENDPOINT}/accounts/${getChainApiPath(
-          currentChainRecord.chain.chain_name
-        )}/${currentChainRecord.chain.chain_id}/${accountAddress}`
-      )
+      .get<PublicInfo>(`${projectsApiRoute}/${accountAddress}`)
       .then(({ data: projectInfo }) => projectInfo);
-  }, [accountAddress, currentChainRecord]);
+  }, [accountAddress, projectsApiRoute]);
   return useQuery(
-    ["public_project_by_account_address", accountAddress, currentChainRecord],
+    ["public_project_by_account_address", projectsApiRoute, accountAddress],
     queryFn,
     {
       keepPreviousData: true,

From 86fbdf36afe2b9de5f13dabd70c00cee09aa3df8 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 8 Jun 2023 21:18:32 +0700
Subject: [PATCH 216/354] docs: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 63277649b..d605630c6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#380](https://github.com/alleslabs/celatone-frontend/pull/380) Support local network
 - [#363](https://github.com/alleslabs/celatone-frontend/pull/363) Add config not found page and rewrite network logic
 - [#343](https://github.com/alleslabs/celatone-frontend/pull/343) Apply fetching mechanism and keyboard arrow navigation to searchbar
 - [#372](https://github.com/alleslabs/celatone-frontend/pull/372) Add code hash to code details and upload section

From 4d8fa3d29341cd2d160b3568c6a438d4269c977f Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 8 Jun 2023 21:20:30 +0700
Subject: [PATCH 217/354] docs: update

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d605630c6..54d673fe8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -58,6 +58,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [#368](https://github.com/alleslabs/celatone-frontend/pull/368) Use chain name from config for Meta instead of env variable
 - [#336](https://github.com/alleslabs/celatone-frontend/pull/336) Get address type length from example addresses instead of hardcode
 - [#354](https://github.com/alleslabs/celatone-frontend/pull/354) Remove useChainId and use currentChainId from config
+- [#341](https://github.com/alleslabs/celatone-frontend/pull/341) Apply faucet info from chain config
 - [#338](https://github.com/alleslabs/celatone-frontend/pull/338) Use gas from chain config
 - [#333](https://github.com/alleslabs/celatone-frontend/pull/333) Update endpoints including LCD, RPC, Graphql
 - [#335](https://github.com/alleslabs/celatone-frontend/pull/335) Refactor hardcoded api route to utils
@@ -201,7 +202,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
-- [#341](https://github.com/alleslabs/celatone-frontend/pull/341) Apply faucet info from chain config
 - [#234](https://github.com/alleslabs/celatone-frontend/pull/234) Fix faucet wording
 - [#216](https://github.com/alleslabs/celatone-frontend/pull/216) Change icon to Alles Labs icon set
 - [#227](https://github.com/alleslabs/celatone-frontend/pull/227) Refactor directory structure and components e.g. various tables

From 286e5a75f33d01b2102c62f9944984d296175feb Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Fri, 9 Jun 2023 12:15:13 +0700
Subject: [PATCH 218/354] fix: remove unnecessary pluralize

---
 .../components/CodeInfoSection.tsx            |  5 +----
 .../tx-message/msg-receipts/index.tsx         | 22 ++++++++-----------
 2 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/lib/pages/code-details/components/CodeInfoSection.tsx b/src/lib/pages/code-details/components/CodeInfoSection.tsx
index 14265f5d5..24f930b19 100644
--- a/src/lib/pages/code-details/components/CodeInfoSection.tsx
+++ b/src/lib/pages/code-details/components/CodeInfoSection.tsx
@@ -1,5 +1,4 @@
 import { Heading, Flex, Text, Box, Grid } from "@chakra-ui/react";
-import plur from "plur";
 
 import { useGetAddressType } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
@@ -133,9 +132,7 @@ export const CodeInfoSection = ({
           </Flex>
         </LabelText>
         {methodRender}
-        <LabelText
-          label={plur("Instantiate Permission", permissionAddresses.length)}
-        >
+        <LabelText label="Instantiate Permission">
           <Flex direction="column" gap={1}>
             <PermissionChip
               instantiatePermission={instantiatePermission}
diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
index 3af5c86ea..7baefb78e 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
@@ -2,7 +2,6 @@
 /* eslint-disable complexity */
 import { Flex } from "@chakra-ui/react";
 import big from "big.js";
-import plur from "plur";
 
 import type { TxMsgData } from "..";
 import type { AddressReturnType } from "lib/app-provider";
@@ -56,10 +55,7 @@ export const generateReceipts = (
           }),
         },
         details.instantiate_permission && {
-          title: plur(
-            "Instantiate Permission",
-            details.instantiate_permission.addresses.length
-          ),
+          title: "Instantiate Permission",
           html: (
             <Flex direction="column" gap={1}>
               <PermissionChip
@@ -1696,7 +1692,7 @@ export const generateReceipts = (
           }),
         },
         {
-          title: plur("Coin", details.coins.length),
+          title: "Coins",
           html: getCoinComponent(details.coins, assetInfos),
         },
         {
@@ -1725,7 +1721,7 @@ export const generateReceipts = (
           value: details.gauge_id,
         },
         {
-          title: plur("Reward", details.rewards.length),
+          title: "Rewards",
           html: getCoinComponent(details.rewards, assetInfos),
         },
       ];
@@ -1747,7 +1743,7 @@ export const generateReceipts = (
           value: details.duration,
         },
         {
-          title: plur("Coin", details.coins.length),
+          title: "Coin",
           html: getCoinComponent(details.coins, assetInfos),
         },
       ];
@@ -1782,7 +1778,7 @@ export const generateReceipts = (
           value: details.ID,
         },
         details.coins && {
-          title: plur("Coin", details.coins.length),
+          title: "Coins",
           html: getCoinComponent(details.coins, assetInfos),
         },
       ];
@@ -1858,7 +1854,7 @@ export const generateReceipts = (
           }),
         },
         {
-          title: plur("Coin", details.coins.length),
+          title: "Coins",
           html: getCoinComponent(details.coins, assetInfos),
         },
         validatorAddrReceipt(details.val_addr),
@@ -1997,7 +1993,7 @@ export const generateReceipts = (
           }),
         },
         {
-          title: plur("Hot Route", details.hot_routes.length),
+          title: "Hot Routes",
           html: getCommonReceiptHtml({
             type: "json",
             value: details.hot_routes,
@@ -2017,7 +2013,7 @@ export const generateReceipts = (
           }),
         },
         {
-          title: plur("Hot Route", details.base_denoms.length),
+          title: "Hot Routes",
           html: getCommonReceiptHtml({
             type: "json",
             value: details.base_denoms,
@@ -2132,7 +2128,7 @@ export const generateReceipts = (
           }),
         },
         {
-          title: plur("Preference", details.preferences.length),
+          title: "Preferences",
           html: getCommonReceiptHtml({
             type: "json",
             value: details.preferences,

From e444a26504297ec6ad99c1481803670d837a533a Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 9 Jun 2023 13:39:30 +0700
Subject: [PATCH 219/354] feat: add pool manager v15 msgs to tx details

---
 CHANGELOG.md                                              | 1 +
 src/lib/data/tx.ts                                        | 2 ++
 .../components/tx-message/msg-receipts/index.tsx          | 6 ++++--
 src/lib/utils/tx/types.ts                                 | 8 ++++++--
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1bbccdc5..b34cf4a7c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -48,6 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#382](https://github.com/alleslabs/celatone-frontend/pull/382) Add pool manager v15 msgs to tx details
 - [#371](https://github.com/alleslabs/celatone-frontend/pull/371) Refactor assign me component and fix color in redelegation page
 - [#342](https://github.com/alleslabs/celatone-frontend/pull/342) Add fallback n/a token on asset icon on asset box
 - [#331](https://github.com/alleslabs/celatone-frontend/pull/331) Add validation check for builder in proposal to store code page
diff --git a/src/lib/data/tx.ts b/src/lib/data/tx.ts
index fbad20b3c..6425f5ee2 100644
--- a/src/lib/data/tx.ts
+++ b/src/lib/data/tx.ts
@@ -62,6 +62,8 @@ export type TypeUrl =
   | "/osmosis.gamm.v1beta1.MsgJoinSwapShareAmountOut"
   | "/osmosis.gamm.v1beta1.MsgExitSwapShareAmountIn"
   | "/osmosis.gamm.v1beta1.MsgExitSwapExternAmountOut"
+  | "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn"
+  | "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountOut"
   | "/osmosis.incentives.MsgCreateGauge"
   | "/osmosis.incentives.MsgAddToGauge"
   | "/osmosis.lockup.MsgLockTokens"
diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
index ddfde0891..91b9ccafb 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
@@ -1504,7 +1504,8 @@ export const generateReceipts = (
         },
       ];
     }
-    case "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn": {
+    case "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn":
+    case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn": {
       const details = extractTxDetails(type, body, log);
       return [
         {
@@ -1532,7 +1533,8 @@ export const generateReceipts = (
         },
       ];
     }
-    case "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut": {
+    case "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut":
+    case "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountOut": {
       const details = extractTxDetails(type, body, log);
       return [
         {
diff --git a/src/lib/utils/tx/types.ts b/src/lib/utils/tx/types.ts
index f75def0d9..746dbdfad 100644
--- a/src/lib/utils/tx/types.ts
+++ b/src/lib/utils/tx/types.ts
@@ -683,9 +683,13 @@ export type MsgReturnType<T extends TypeUrl> =
     ? MsgJoinPoolDetails
     : T extends "/osmosis.gamm.v1beta1.MsgExitPool"
     ? MsgExitPoolDetails
-    : T extends "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn"
+    : T extends
+        | "/osmosis.gamm.v1beta1.MsgSwapExactAmountIn"
+        | "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountIn"
     ? MsgSwapExactAmountInDetails
-    : T extends "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut"
+    : T extends
+        | "/osmosis.gamm.v1beta1.MsgSwapExactAmountOut"
+        | "/osmosis.poolmanager.v1beta1.MsgSwapExactAmountOut"
     ? MsgSwapExactAmountOutDetails
     : T extends "/osmosis.gamm.v1beta1.MsgJoinSwapExternAmountIn"
     ? MsgJoinSwapExternAmountInDetails

From b57114419802c298b545ece08c8ecc353c88f103 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Fri, 9 Jun 2023 15:33:22 +0700
Subject: [PATCH 220/354] fix: bug

---
 src/lib/app-provider/hooks/useWasmConfig.ts | 6 +++++-
 src/lib/pages/contracts/index.tsx           | 3 ++-
 src/lib/pages/proposal/constants.tsx        | 5 +++--
 src/lib/pages/proposal/store-code/index.tsx | 9 +++++++--
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/lib/app-provider/hooks/useWasmConfig.ts b/src/lib/app-provider/hooks/useWasmConfig.ts
index 097ece114..db11f3bb0 100644
--- a/src/lib/app-provider/hooks/useWasmConfig.ts
+++ b/src/lib/app-provider/hooks/useWasmConfig.ts
@@ -2,7 +2,11 @@ import { useCelatoneApp } from "../contexts";
 
 import { useInternalNavigate } from "./useInternalNavigate";
 
-export const useWasmConfig = (shouldRedirect: { shouldRedirect: boolean }) => {
+export const useWasmConfig = ({
+  shouldRedirect,
+}: {
+  shouldRedirect: boolean;
+}) => {
   const {
     chainConfig: {
       features: { wasm },
diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contracts/index.tsx
index dd221f4f2..bb11a339b 100644
--- a/src/lib/pages/contracts/index.tsx
+++ b/src/lib/pages/contracts/index.tsx
@@ -2,7 +2,7 @@ import { Heading, Box, Flex, Text } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { useState } from "react";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import { TextInput } from "lib/components/forms";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
@@ -12,6 +12,7 @@ import type { ContractAddr } from "lib/types";
 import { useRecentContractsData } from "./data";
 
 const RecentContracts = observer(() => {
+  useWasmConfig({ shouldRedirect: true });
   const navigate = useInternalNavigate();
   const onRowSelect = (contract: ContractAddr) =>
     navigate({
diff --git a/src/lib/pages/proposal/constants.tsx b/src/lib/pages/proposal/constants.tsx
index 9cdc6d980..6bf3035c5 100644
--- a/src/lib/pages/proposal/constants.tsx
+++ b/src/lib/pages/proposal/constants.tsx
@@ -55,8 +55,9 @@ export const SIDEBAR_WHITELIST_DETAILS: (
 const storeCodePage = "proposal-store-code";
 export const SIDEBAR_STORE_CODE_DETAILS: (
   chainName: string,
+  chainId: string,
   permission: NetworkPermission
-) => SidebarMetadata = (chainName, permission) =>
+) => SidebarMetadata = (chainName, chainId, permission) =>
   ({
     permissioned: {
       page: storeCodePage,
@@ -83,7 +84,7 @@ export const SIDEBAR_STORE_CODE_DETAILS: (
           On the {chainName}, you can store code without submitting a proposal
           by using
           <Link
-            href="/deploy"
+            href={`/${chainId}/deploy`}
             onClick={() =>
               AmpTrackUseRightHelperPanel(storeCodePage, "to-/deploy")
             }
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index bd95636d0..d548ceeab 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -29,6 +29,7 @@ import {
   useSimulateFeeForProposalStoreCode,
   useSubmitStoreCodeProposalTx,
   useValidateAddress,
+  useWasmConfig,
 } from "lib/app-provider";
 import { AddressInput } from "lib/components/AddressInput";
 import { AssignMe } from "lib/components/AssignMe";
@@ -92,8 +93,10 @@ const defaultValues: StoreCodeProposalState = {
 const page = "proposal-store-code";
 
 const StoreCodeProposal = () => {
+  useWasmConfig({ shouldRedirect: true });
   const {
     constants,
+    currentChainId,
     chainConfig: { prettyName, exampleAddresses },
   } = useCelatoneApp();
   const getMaxLengthError = useGetMaxLengthError();
@@ -376,8 +379,9 @@ const StoreCodeProposal = () => {
                     maxLength: constants.maxProposalTitleLength,
                   }}
                   error={
-                    errors.title?.message ||
-                    getMaxLengthError(title.length, "proposal_title")
+                    title.length > constants.maxProposalTitleLength
+                      ? getMaxLengthError(title.length, "proposal_title")
+                      : errors.title?.message
                   }
                 />
 
@@ -606,6 +610,7 @@ const StoreCodeProposal = () => {
               marginTop="128px"
               metadata={SIDEBAR_STORE_CODE_DETAILS(
                 prettyName,
+                currentChainId,
                 isPermissionless ? "permissionless" : "permissioned"
               )}
             />

From 4d0a4bab89fc43281653d9fa9c7fb763529ccaec Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Fri, 9 Jun 2023 15:41:08 +0700
Subject: [PATCH 221/354] chore: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 54d673fe8..7928c5a90 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -72,6 +72,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#383](https://github.com/alleslabs/celatone-frontend/pull/383) Fix title input field and navigation in sticky bar in proposal to store code, redirect path for wasm flag
 - [#375](https://github.com/alleslabs/celatone-frontend/pull/375) Fix incorrect display resolve height in proposals page
 - [#356](https://github.com/alleslabs/celatone-frontend/pull/356) Fix store code out of gas error by gzipping file before submitting tx
 - [#344](https://github.com/alleslabs/celatone-frontend/pull/344) Fix enable tx bug in proposal to store code

From cd2e3afecb863d25c31edf749be4d5ab66050ed3 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Fri, 9 Jun 2023 16:09:45 +0700
Subject: [PATCH 222/354] fix: use app link component

---
 src/lib/pages/proposal/constants.tsx        | 22 +++++++++------------
 src/lib/pages/proposal/store-code/index.tsx |  2 --
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/lib/pages/proposal/constants.tsx b/src/lib/pages/proposal/constants.tsx
index 6bf3035c5..e0cf65351 100644
--- a/src/lib/pages/proposal/constants.tsx
+++ b/src/lib/pages/proposal/constants.tsx
@@ -1,6 +1,4 @@
-import { Text } from "@chakra-ui/react";
-import Link from "next/link";
-
+import { AppLink } from "lib/components/AppLink";
 import type { SidebarMetadata } from "lib/components/StickySidebar";
 import { AmpTrackUseRightHelperPanel } from "lib/services/amplitude";
 
@@ -55,9 +53,8 @@ export const SIDEBAR_WHITELIST_DETAILS: (
 const storeCodePage = "proposal-store-code";
 export const SIDEBAR_STORE_CODE_DETAILS: (
   chainName: string,
-  chainId: string,
   permission: NetworkPermission
-) => SidebarMetadata = (chainName, chainId, permission) =>
+) => SidebarMetadata = (chainName, permission) =>
   ({
     permissioned: {
       page: storeCodePage,
@@ -82,18 +79,17 @@ export const SIDEBAR_STORE_CODE_DETAILS: (
       description: (
         <span>
           On the {chainName}, you can store code without submitting a proposal
-          by using
-          <Link
-            href={`/${chainId}/deploy`}
+          by using{" "}
+          <AppLink
             onClick={() =>
               AmpTrackUseRightHelperPanel(storeCodePage, "to-/deploy")
             }
+            color="secondary.main"
+            href="/deploy"
+            style={{ display: "inline-flex" }}
           >
-            {" "}
-            <Text as="span" color="secondary.main">
-              Deploy Contract
-            </Text>
-          </Link>
+            Deploy Contract
+          </AppLink>
           <br />
           <br />
           However, if you&apos;re interested in exploring about the proposal
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index d548ceeab..dbdf603ae 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -96,7 +96,6 @@ const StoreCodeProposal = () => {
   useWasmConfig({ shouldRedirect: true });
   const {
     constants,
-    currentChainId,
     chainConfig: { prettyName, exampleAddresses },
   } = useCelatoneApp();
   const getMaxLengthError = useGetMaxLengthError();
@@ -610,7 +609,6 @@ const StoreCodeProposal = () => {
               marginTop="128px"
               metadata={SIDEBAR_STORE_CODE_DETAILS(
                 prettyName,
-                currentChainId,
                 isPermissionless ? "permissionless" : "permissioned"
               )}
             />

From 4362fdc0a43a3676b3408e059ef836c3a6577a4d Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Mon, 12 Jun 2023 10:27:04 +0700
Subject: [PATCH 223/354] fix: disable whitelist proposal for wasm flag

---
 src/lib/pages/proposal/whitelist/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index e0be53fbf..a16c7b2b6 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -24,6 +24,7 @@ import {
   useFabricateFee,
   useSimulateFeeQuery,
   useSubmitWhitelistProposalTx,
+  useWasmConfig,
 } from "lib/app-provider";
 import { AddressInput } from "lib/components/AddressInput";
 import { AssignMe } from "lib/components/AssignMe";
@@ -65,6 +66,7 @@ const defaultValues: WhiteListState = {
 const ampPage = "proposal_whitelist";
 
 const ProposalToWhitelist = () => {
+  useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const { constants } = useCelatoneApp();
   const getMaxLengthError = useGetMaxLengthError();

From 88dea986ef45514ebff8f85691ac10a35bb19560 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 12 Jun 2023 10:49:02 +0700
Subject: [PATCH 224/354] chore: change theme type name

---
 src/config/theme/default.ts            | 2 +-
 src/config/theme/osmosis.ts            | 2 +-
 src/config/{type.ts => theme/types.ts} | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/config/{type.ts => theme/types.ts} (100%)

diff --git a/src/config/theme/default.ts b/src/config/theme/default.ts
index 2a5a919df..99dd9c617 100644
--- a/src/config/theme/default.ts
+++ b/src/config/theme/default.ts
@@ -1,4 +1,4 @@
-import type { ThemeConfig } from "config/type";
+import type { ThemeConfig } from "./types";
 
 export const DEFAULT_THEME: ThemeConfig = {
   branding: {
diff --git a/src/config/theme/osmosis.ts b/src/config/theme/osmosis.ts
index fb687adf2..e7cc28d05 100644
--- a/src/config/theme/osmosis.ts
+++ b/src/config/theme/osmosis.ts
@@ -1,4 +1,4 @@
-import type { ThemeConfig } from "config/type";
+import type { ThemeConfig } from "./types";
 
 export const OSMOSIS_THEME: ThemeConfig = {
   branding: {
diff --git a/src/config/type.ts b/src/config/theme/types.ts
similarity index 100%
rename from src/config/type.ts
rename to src/config/theme/types.ts

From f90f71ac67174127c8ba605b555a047f2e914e9f Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 12 Jun 2023 15:35:40 +0700
Subject: [PATCH 225/354] feat: new pagination

---
 CHANGELOG.md                                 |  1 +
 src/lib/components/pagination/PageButton.tsx | 30 ++++++++
 src/lib/components/pagination/PageDetail.tsx | 50 ++++++++++++
 src/lib/components/pagination/PageGoTo.tsx   | 46 +++++++++++
 src/lib/components/pagination/PageList.tsx   | 81 ++++++++++++++++++++
 src/lib/components/pagination/index.tsx      | 69 ++++++++---------
 6 files changed, 238 insertions(+), 39 deletions(-)
 create mode 100644 src/lib/components/pagination/PageButton.tsx
 create mode 100644 src/lib/components/pagination/PageDetail.tsx
 create mode 100644 src/lib/components/pagination/PageGoTo.tsx
 create mode 100644 src/lib/components/pagination/PageList.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1bbccdc5..9754b830e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#384](https://github.com/alleslabs/celatone-frontend/pull/384) New pagination style
 - [#372](https://github.com/alleslabs/celatone-frontend/pull/372) Add code hash to code details and upload section
 - [#329](https://github.com/alleslabs/celatone-frontend/pull/329) Add allowed user to store code flow
 - [#321](https://github.com/alleslabs/celatone-frontend/pull/321) Add amplitude to proposal to store code page
diff --git a/src/lib/components/pagination/PageButton.tsx b/src/lib/components/pagination/PageButton.tsx
new file mode 100644
index 000000000..768648161
--- /dev/null
+++ b/src/lib/components/pagination/PageButton.tsx
@@ -0,0 +1,30 @@
+import { Button } from "@chakra-ui/react";
+
+interface PageButtonProps {
+  pageNumber: number;
+  currentPage: number;
+  onPageChange: (pageNumber: number) => void;
+}
+
+export const PageButton = ({
+  pageNumber,
+  currentPage,
+  onPageChange,
+}: PageButtonProps) => {
+  const isCurrentPage = pageNumber === currentPage;
+  return (
+    <Button
+      bgColor={isCurrentPage ? "primary.dark" : "transparent"}
+      border={isCurrentPage ? "2px solid" : "1px solid"}
+      borderColor={isCurrentPage ? "primary.main" : "gray.700"}
+      onClick={isCurrentPage ? undefined : () => onPageChange(pageNumber)}
+      _hover={
+        isCurrentPage ? { cursor: "default" } : { background: "gray.700" }
+      }
+      _active={isCurrentPage ? {} : { background: "gray.600" }}
+      boxSize={10}
+    >
+      {pageNumber}
+    </Button>
+  );
+};
diff --git a/src/lib/components/pagination/PageDetail.tsx b/src/lib/components/pagination/PageDetail.tsx
new file mode 100644
index 000000000..e7771e195
--- /dev/null
+++ b/src/lib/components/pagination/PageDetail.tsx
@@ -0,0 +1,50 @@
+import { Flex, Select, Text } from "@chakra-ui/react";
+import type { ChangeEvent } from "react";
+
+import { CustomIcon } from "../icon";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+
+interface PageDetailProps {
+  pageSize: number;
+  offsetData: number;
+  lastDataInPage: number;
+  totalData: number;
+  onPageSizeChange: (e: ChangeEvent<HTMLSelectElement>) => void;
+}
+
+export const PageDetail = ({
+  pageSize,
+  offsetData,
+  lastDataInPage,
+  totalData,
+  onPageSizeChange,
+}: PageDetailProps) => (
+  <Flex align="center" justify="center">
+    <Text variant="body3" color="text.dark" minW="fit-content">
+      Items per page:
+    </Text>
+    <Select
+      border="none"
+      w="70px"
+      fontSize="12px"
+      focusBorderColor="none"
+      cursor="pointer"
+      value={pageSize}
+      onChange={(e) => {
+        AmpTrack(AmpEvent.USE_PAGINATION_PAGE_SIZE, {
+          pageSize: e.target.value,
+        });
+        onPageSizeChange(e);
+      }}
+    >
+      <option value="10">10</option>
+      <option value="20">20</option>
+      <option value="50">50</option>
+      <option value="100">100</option>
+      <CustomIcon name="chevron-down" color="gray.600" />
+    </Select>
+    <Text variant="body3" minW="fit-content" ml={7}>
+      {`${offsetData.toLocaleString()} - ${lastDataInPage.toLocaleString()} of ${totalData.toLocaleString()} items`}
+    </Text>
+  </Flex>
+);
diff --git a/src/lib/components/pagination/PageGoTo.tsx b/src/lib/components/pagination/PageGoTo.tsx
new file mode 100644
index 000000000..7612403ae
--- /dev/null
+++ b/src/lib/components/pagination/PageGoTo.tsx
@@ -0,0 +1,46 @@
+import { Button, Flex, Input, Text } from "@chakra-ui/react";
+import { useState } from "react";
+
+import { CustomIcon } from "../icon";
+
+interface PageGoToProps {
+  lastPage: number;
+  onPageChange: (pageNumber: number) => void;
+}
+
+export const PageGoTo = ({ lastPage, onPageChange }: PageGoToProps) => {
+  const [newPage, setNewPage] = useState<string>("");
+  const handleGoTo = () => {
+    const newPageValue = Number(newPage);
+    if (newPageValue) onPageChange(newPageValue);
+  };
+
+  return (
+    <Flex align="center" justify="center" gap={2}>
+      <Text w="fit-content">Go to page:</Text>
+      <Input
+        textAlign="center"
+        w="44px"
+        value={newPage}
+        onChange={(e) => {
+          if (e.target.value.length === 0) setNewPage("");
+          const value = Number(e.target.value);
+          if (value && value >= 1 && value <= lastPage)
+            setNewPage(e.target.value);
+        }}
+        onKeyDown={(e) => {
+          if (e.code === "Enter" || e.code === "NumpadEnter") handleGoTo();
+        }}
+      />
+      <Button
+        variant="ghost-primary"
+        margin={0}
+        paddingX={2}
+        onClick={() => handleGoTo()}
+        rightIcon={<CustomIcon name="chevron-right" />}
+      >
+        Go
+      </Button>
+    </Flex>
+  );
+};
diff --git a/src/lib/components/pagination/PageList.tsx b/src/lib/components/pagination/PageList.tsx
new file mode 100644
index 000000000..4e5865699
--- /dev/null
+++ b/src/lib/components/pagination/PageList.tsx
@@ -0,0 +1,81 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { CustomIcon } from "../icon";
+
+import { Next } from "./Next";
+import { PageButton } from "./PageButton";
+import { Previous } from "./Previous";
+
+interface PageListProps {
+  pageSize: number;
+  currentPage: number;
+  lastPage: number;
+  onPageChange: (pageNumber: number) => void;
+}
+
+export const PageList = ({
+  pageSize,
+  currentPage,
+  lastPage,
+  onPageChange,
+}: PageListProps) => (
+  <Flex align="center" gap={1}>
+    <Previous pageSize={pageSize} variant="unstyled" display="flex">
+      <CustomIcon name="chevron-left" color="text.dark" />
+    </Previous>
+    {currentPage > 1 && (
+      <>
+        <PageButton
+          pageNumber={1}
+          currentPage={currentPage}
+          onPageChange={onPageChange}
+        />
+        {currentPage > 2 && (
+          <>
+            {currentPage > 3 && (
+              <Text mx="2px" px="7px">
+                ...
+              </Text>
+            )}
+            <PageButton
+              pageNumber={currentPage - 1}
+              currentPage={currentPage}
+              onPageChange={onPageChange}
+            />
+          </>
+        )}
+      </>
+    )}
+    <PageButton
+      pageNumber={currentPage}
+      currentPage={currentPage}
+      onPageChange={onPageChange}
+    />
+    {currentPage < lastPage && (
+      <>
+        {currentPage < lastPage - 1 && (
+          <>
+            <PageButton
+              pageNumber={currentPage + 1}
+              currentPage={currentPage}
+              onPageChange={onPageChange}
+            />
+            {currentPage < lastPage - 2 && (
+              <Text mx="2px" px="7px">
+                ...
+              </Text>
+            )}
+          </>
+        )}
+        <PageButton
+          pageNumber={lastPage}
+          currentPage={currentPage}
+          onPageChange={onPageChange}
+        />
+      </>
+    )}
+    <Next pageSize={pageSize} variant="unstyled" display="flex">
+      <CustomIcon name="chevron-right" color="text.dark" />
+    </Next>
+  </Flex>
+);
diff --git a/src/lib/components/pagination/index.tsx b/src/lib/components/pagination/index.tsx
index 65500edd4..c1ede2b43 100644
--- a/src/lib/components/pagination/index.tsx
+++ b/src/lib/components/pagination/index.tsx
@@ -1,14 +1,14 @@
-import { Flex, Select, Text } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 import { useEffect, useMemo } from "react";
 
-import { CustomIcon } from "../icon";
-import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import { useMobile } from "lib/app-provider";
 import { scrollToComponent, scrollToTop, scrollYPosition } from "lib/utils";
 
-import { Next } from "./Next";
+import { PageDetail } from "./PageDetail";
+import { PageGoTo } from "./PageGoTo";
+import { PageList } from "./PageList";
 import { Paginator } from "./Paginator";
-import { Previous } from "./Previous";
 
 interface PaginationProps {
   currentPage: number;
@@ -30,6 +30,8 @@ export const Pagination = ({
   onPageChange,
   onPageSizeChange,
 }: PaginationProps) => {
+  const isMobile = useMobile();
+
   useEffect(() => {
     const windowPosition = scrollYPosition();
     if (windowPosition) {
@@ -41,11 +43,12 @@ export const Pagination = ({
     }
   }, [currentPage, pageSize, scrollComponentId]);
 
-  const { offsetData, lastDataInPage } = useMemo(() => {
+  const { offsetData, lastDataInPage, lastPage } = useMemo(() => {
     return {
       offsetData: offset + 1,
       lastDataInPage:
         currentPage !== pagesQuantity ? pageSize * currentPage : totalData,
+      lastPage: Math.ceil(totalData / pageSize),
     };
   }, [currentPage, offset, pageSize, pagesQuantity, totalData]);
 
@@ -55,39 +58,27 @@ export const Pagination = ({
       pagesQuantity={pagesQuantity}
       onPageChange={onPageChange}
     >
-      <Flex align="center" justify="center" w="full" px={4}>
-        <Text variant="body3" color="text.dark">
-          Items per page:
-        </Text>
-        <Select
-          border="none"
-          w="70px"
-          fontSize="12px"
-          focusBorderColor="none"
-          cursor="pointer"
-          value={pageSize}
-          onChange={(e) => {
-            AmpTrack(AmpEvent.USE_PAGINATION_PAGE_SIZE, {
-              pageSize: e.target.value,
-            });
-            onPageSizeChange(e);
-          }}
-        >
-          <option value="10">10</option>
-          <option value="20">20</option>
-          <option value="50">50</option>
-          <option value="100">100</option>
-          <CustomIcon name="chevron-down" color="gray.600" />
-        </Select>
-        <Text variant="body3" mx={7}>
-          {`${offsetData.toLocaleString()} - ${lastDataInPage.toLocaleString()} of ${totalData.toLocaleString()}`}
-        </Text>
-        <Previous pageSize={pageSize} variant="unstyled" display="flex">
-          <CustomIcon name="chevron-left" color="text.dark" />
-        </Previous>
-        <Next pageSize={pageSize} variant="unstyled" display="flex">
-          <CustomIcon name="chevron-right" color="text.dark" />
-        </Next>
+      <Flex
+        direction={isMobile ? "column" : "row"}
+        gap={isMobile ? 4 : 8}
+        align="center"
+        justify="center"
+        w="full"
+      >
+        <PageDetail
+          pageSize={pageSize}
+          offsetData={offsetData}
+          lastDataInPage={lastDataInPage}
+          totalData={totalData}
+          onPageSizeChange={onPageSizeChange}
+        />
+        <PageList
+          pageSize={pageSize}
+          currentPage={currentPage}
+          lastPage={lastPage}
+          onPageChange={onPageChange}
+        />
+        <PageGoTo lastPage={lastPage} onPageChange={onPageChange} />
       </Flex>
     </Paginator>
   );

From 7e7de97e9a02c8171a73c93918873513c810ae0e Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 12 Jun 2023 15:54:28 +0700
Subject: [PATCH 226/354] fix: page button

---
 src/lib/components/pagination/PageButton.tsx | 1 +
 src/lib/components/pagination/PageList.tsx   | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/pagination/PageButton.tsx b/src/lib/components/pagination/PageButton.tsx
index 768648161..f26d45988 100644
--- a/src/lib/components/pagination/PageButton.tsx
+++ b/src/lib/components/pagination/PageButton.tsx
@@ -23,6 +23,7 @@ export const PageButton = ({
       }
       _active={isCurrentPage ? {} : { background: "gray.600" }}
       boxSize={10}
+      w="fit-content"
     >
       {pageNumber}
     </Button>
diff --git a/src/lib/components/pagination/PageList.tsx b/src/lib/components/pagination/PageList.tsx
index 4e5865699..f8458cabf 100644
--- a/src/lib/components/pagination/PageList.tsx
+++ b/src/lib/components/pagination/PageList.tsx
@@ -19,7 +19,7 @@ export const PageList = ({
   lastPage,
   onPageChange,
 }: PageListProps) => (
-  <Flex align="center" gap={1}>
+  <Flex align="center" gap={1} justifyContent="center">
     <Previous pageSize={pageSize} variant="unstyled" display="flex">
       <CustomIcon name="chevron-left" color="text.dark" />
     </Previous>

From 38c569997ed3d0e6893b5afe515bc7aa7b8e8bbb Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Mon, 12 Jun 2023 16:01:39 +0700
Subject: [PATCH 227/354] feat: upgrade cosmos kit version and replace hooks

---
 CHANGELOG.md                                  |    1 +
 package.json                                  |   10 +-
 src/config/index.ts                           |    2 +-
 src/lib/app-provider/contexts/app.tsx         |   27 +-
 src/lib/app-provider/hooks/index.ts           |    1 +
 src/lib/app-provider/hooks/useAddress.ts      |   31 +-
 src/lib/app-provider/hooks/useAmplitude.ts    |   13 +-
 .../app-provider/hooks/useChainRecordAsset.ts |   11 +-
 src/lib/app-provider/hooks/useCurrentChain.ts |   10 +
 src/lib/app-provider/hooks/useDummyWallet.ts  |    9 +-
 src/lib/app-provider/hooks/useLCDEndpoint.ts  |   11 +-
 src/lib/app-provider/hooks/useRPCEndpoint.ts  |   10 +-
 src/lib/app-provider/hooks/useSimulateFee.ts  |    9 +-
 src/lib/app-provider/hooks/useTokensInfo.ts   |   13 +-
 src/lib/app-provider/queries/simulateFee.ts   |   23 +-
 src/lib/app-provider/tx/clearAdmin.ts         |    9 +-
 src/lib/app-provider/tx/execute.ts            |    8 +-
 src/lib/app-provider/tx/instantiate.ts        |    8 +-
 src/lib/app-provider/tx/migrate.ts            |    9 +-
 src/lib/app-provider/tx/resend.ts             |    9 +-
 src/lib/app-provider/tx/submitProposal.ts     |   18 +-
 src/lib/app-provider/tx/updateAdmin.ts        |    8 +-
 src/lib/app-provider/tx/upload.ts             |    8 +-
 src/lib/components/AssignMe.tsx               |    9 +-
 src/lib/components/ConnectWalletAlert.tsx     |    4 +-
 src/lib/components/CopyLink.tsx               |    4 +-
 src/lib/components/ExplorerLink.tsx           |    4 +-
 src/lib/components/PermissionChip.tsx         |    4 +-
 src/lib/components/Wallet.tsx                 |    8 +-
 src/lib/components/button/AdminButton.tsx     |    5 +-
 src/lib/components/button/ConnectWallet.tsx   |    4 +-
 .../components/button/InstantiateButton.tsx   |    5 +-
 src/lib/components/button/RedoButton.tsx      |    7 +-
 src/lib/components/modal/CodeSnippet.tsx      |   15 +-
 src/lib/components/modal/RedoModal.tsx        |    8 +-
 src/lib/components/modal/code/SaveNewCode.tsx |   10 +-
 .../select-contract/ContractListDetail.tsx    |    4 +-
 .../select-contract/SelectContractAdmin.tsx   |    4 +-
 .../table/codes/CodesTableWithWallet.tsx      |    5 +-
 .../table/contracts/ContractsTableRowCTA.tsx  |    5 +-
 .../TransactionsTableWithWallet.tsx           |    4 +-
 .../upload/InstantiatePermissionRadio.tsx     |    4 +-
 src/lib/components/upload/UploadSection.tsx   |    4 +-
 src/lib/hooks/useCodeFilter.ts                |    4 +-
 src/lib/hooks/useUserKey.ts                   |   10 +-
 src/lib/layout/SubHeader.tsx                  |    4 +-
 src/lib/layout/navbar/index.tsx               |    8 +-
 src/lib/model/code.ts                         |    9 +-
 src/lib/model/contract.ts                     |    6 +-
 src/lib/pages/admin/index.tsx                 |    4 +-
 .../components/table/NoContracts.tsx          |    4 +-
 src/lib/pages/deploy/index.tsx                |    9 +-
 .../pages/execute/components/ExecuteArea.tsx  |    9 +-
 src/lib/pages/faucet/index.tsx                |    4 +-
 .../component/InstantiateOffchainForm.tsx     |    5 +-
 src/lib/pages/instantiate/instantiate.tsx     |    4 +-
 .../migrate/components/MigrateContract.tsx    |    4 +-
 src/lib/pages/migrate/index.tsx               |    4 +-
 .../components/MyStoredCodesSection.tsx       |    4 +-
 src/lib/pages/past-txs/index.tsx              |    6 +-
 src/lib/pages/proposal/store-code/index.tsx   |    4 +-
 src/lib/pages/proposal/whitelist/index.tsx    |    4 +-
 src/lib/pages/proposals/index.tsx             |    5 +-
 src/lib/pages/query/components/QueryArea.tsx  |    5 +-
 src/lib/pages/upload/index.tsx                |    9 +-
 src/lib/types/converter.ts                    |    7 +-
 src/pages/_app.tsx                            |    7 +-
 yarn.lock                                     | 2667 ++++++++++++-----
 68 files changed, 2215 insertions(+), 966 deletions(-)
 create mode 100644 src/lib/app-provider/hooks/useCurrentChain.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 54d673fe8..a3e062ff8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#385](https://github.com/alleslabs/celatone-frontend/pull/385) Upgrade cosmos kit major version and replace hooks
 - [#380](https://github.com/alleslabs/celatone-frontend/pull/380) Support local network
 - [#363](https://github.com/alleslabs/celatone-frontend/pull/363) Add config not found page and rewrite network logic
 - [#343](https://github.com/alleslabs/celatone-frontend/pull/343) Apply fetching mechanism and keyboard arrow navigation to searchbar
diff --git a/package.json b/package.json
index e60ff993f..13d828743 100644
--- a/package.json
+++ b/package.json
@@ -31,11 +31,9 @@
     "@cosmjs/encoding": "^0.30.1",
     "@cosmjs/proto-signing": "^0.30.1",
     "@cosmjs/stargate": "^0.30.1",
-    "@cosmos-kit/core": "^0.20.0",
-    "@cosmos-kit/keplr": "^0.20.0",
-    "@cosmos-kit/react": "^0.19.0",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
+    "@cosmos-kit/core": "^1.5.8",
+    "@cosmos-kit/keplr": "^0.33.38",
+    "@cosmos-kit/react": "^1.3.31",
     "@graphql-codegen/cli": "^2.13.12",
     "@graphql-codegen/client-preset": "^1.1.4",
     "@rx-stream/pipe": "^0.7.1",
@@ -48,7 +46,7 @@
     "axios": "^1.1.3",
     "big.js": "^6.2.1",
     "camelcase": "^7.0.0",
-    "chain-registry": "1.13.0",
+    "chain-registry": "^1.14.0",
     "cosmjs-types": "^0.7.2",
     "dayjs": "^1.11.6",
     "framer-motion": "^7.6.12",
diff --git a/src/config/index.ts b/src/config/index.ts
index 7a75e9066..3bd593fe4 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -84,7 +84,7 @@ export const CHAIN_CONFIGS: ChainConfigs = {
   },
   "osmo-test-5": {
     chain: "osmosis",
-    registryChainName: "osmosistestnet",
+    registryChainName: "osmosistestnet5",
     prettyName: "Osmosis Testnet",
     lcd: "https://lcd.osmotest5.osmosis.zone",
     rpc: "https://rpc.osmotest5.osmosis.zone",
diff --git a/src/lib/app-provider/contexts/app.tsx b/src/lib/app-provider/contexts/app.tsx
index ebdaf9d4b..7b1366ba2 100644
--- a/src/lib/app-provider/contexts/app.tsx
+++ b/src/lib/app-provider/contexts/app.tsx
@@ -1,4 +1,4 @@
-import { useWallet } from "@cosmos-kit/react";
+import { useModalTheme } from "@cosmos-kit/react";
 import { GraphQLClient } from "graphql-request";
 import { observer } from "mobx-react-lite";
 import type { ReactNode } from "react";
@@ -49,23 +49,20 @@ const AppContext = createContext<AppContextInterface>({
 });
 
 export const AppProvider = observer(({ children }: AppProviderProps) => {
-  const { currentChainName, setCurrentChain } = useWallet();
-
   const { setCodeUserKey, isCodeUserKeyExist } = useCodeStore();
   const { setContractUserKey, isContractUserKeyExist } = useContractStore();
   const { setProjectUserKey, isProjectUserKeyExist } = usePublicProjectStore();
+  const { setModalTheme } = useModalTheme();
 
+  const [currentChainName, setCurrentChainName] = useState<string>();
   const [currentChainId, setCurrentChainId] = useState("");
 
   // Remark: this function is only used in useSelectChain. Do not use in other places.
-  const handleOnChainIdChange = useCallback(
-    (newChainId: string) => {
-      const config = CHAIN_CONFIGS[newChainId];
-      setCurrentChainId(newChainId);
-      setCurrentChain(config?.registryChainName);
-    },
-    [setCurrentChain, setCurrentChainId]
-  );
+  const handleOnChainIdChange = useCallback((newChainId: string) => {
+    const config = CHAIN_CONFIGS[newChainId];
+    setCurrentChainId(newChainId);
+    setCurrentChainName(config?.registryChainName);
+  }, []);
 
   const states = useMemo<AppContextInterface>(() => {
     const chainConfig = CHAIN_CONFIGS[currentChainId] ?? DEFAULT_CHAIN_CONFIG;
@@ -99,9 +96,15 @@ export const AppProvider = observer(({ children }: AppProviderProps) => {
     return () => window.removeEventListener("beforeunload", handler);
   }, []);
 
+  useEffect(() => {
+    if (localStorage.getItem("cosmology-ui-theme") !== "dark") {
+      setModalTheme("dark");
+    }
+  }, [setModalTheme]);
+
   useNetworkChange(handleOnChainIdChange);
 
-  useAmplitude();
+  useAmplitude(currentChainName);
 
   if (currentChainId && !(currentChainId in CHAIN_CONFIGS))
     return <NetworkErrorState />;
diff --git a/src/lib/app-provider/hooks/index.ts b/src/lib/app-provider/hooks/index.ts
index 5fada7e70..841d3d49a 100644
--- a/src/lib/app-provider/hooks/index.ts
+++ b/src/lib/app-provider/hooks/index.ts
@@ -15,3 +15,4 @@ export * from "./useBaseApiRoute";
 export * from "./useRPCEndpoint";
 export * from "./useFaucetConfig";
 export * from "./useWasmConfig";
+export * from "./useCurrentChain";
diff --git a/src/lib/app-provider/hooks/useAddress.ts b/src/lib/app-provider/hooks/useAddress.ts
index 319bee68a..6eae13f91 100644
--- a/src/lib/app-provider/hooks/useAddress.ts
+++ b/src/lib/app-provider/hooks/useAddress.ts
@@ -1,11 +1,11 @@
 import { fromBech32 } from "@cosmjs/encoding";
-import type { ChainRecord } from "@cosmos-kit/core";
-import { useWallet } from "@cosmos-kit/react";
 import { useCallback, useMemo } from "react";
 
 import { useCelatoneApp } from "../contexts";
 import type { Option } from "lib/types";
 
+import { useCurrentChain } from "./useCurrentChain";
+
 export type AddressReturnType =
   | "user_address"
   | "contract_address"
@@ -48,14 +48,15 @@ const getPrefix = (basePrefix: string, addressType: AddressReturnType) => {
 };
 
 const validateAddress = (
-  currentChainRecord: ChainRecord | undefined,
+  bech32Prefix: string,
   address: string,
   addressType: AddressReturnType,
   getAddressTypeByLength: GetAddressTypeByLengthFn
 ) => {
-  if (!currentChainRecord) return "Invalid network";
+  if (!bech32Prefix)
+    return "Can not retrieve bech32 prefix of the current network.";
 
-  const prefix = getPrefix(currentChainRecord.chain.bech32_prefix, addressType);
+  const prefix = getPrefix(bech32Prefix, addressType);
 
   if (!address.startsWith(prefix))
     return `Invalid prefix (expected "${prefix}")`;
@@ -72,7 +73,7 @@ const validateAddress = (
 };
 
 export const useGetAddressType = () => {
-  const { currentChainRecord } = useWallet();
+  const { chain } = useCurrentChain();
   const getAddressTypeByLength = useGetAddressTypeByLength();
   return useCallback(
     (address: Option<string>): AddressReturnType => {
@@ -81,7 +82,7 @@ export const useGetAddressType = () => {
         !address ||
         addressType === "invalid_address" ||
         validateAddress(
-          currentChainRecord,
+          chain.bech32_prefix,
           address,
           addressType,
           getAddressTypeByLength
@@ -90,45 +91,45 @@ export const useGetAddressType = () => {
         return "invalid_address";
       return addressType;
     },
-    [currentChainRecord, getAddressTypeByLength]
+    [chain, getAddressTypeByLength]
   );
 };
 
 // TODO: refactor
 export const useValidateAddress = () => {
-  const { currentChainRecord } = useWallet();
+  const { chain } = useCurrentChain();
   const getAddressTypeByLength = useGetAddressTypeByLength();
 
   return {
     validateContractAddress: useCallback(
       (address: string) =>
         validateAddress(
-          currentChainRecord,
+          chain.bech32_prefix,
           address,
           "contract_address",
           getAddressTypeByLength
         ),
-      [currentChainRecord, getAddressTypeByLength]
+      [chain, getAddressTypeByLength]
     ),
     validateUserAddress: useCallback(
       (address: string) =>
         validateAddress(
-          currentChainRecord,
+          chain.bech32_prefix,
           address,
           "user_address",
           getAddressTypeByLength
         ),
-      [currentChainRecord, getAddressTypeByLength]
+      [chain, getAddressTypeByLength]
     ),
     validateValidatorAddress: useCallback(
       (address: string) =>
         validateAddress(
-          currentChainRecord,
+          chain.bech32_prefix,
           address,
           "validator_address",
           getAddressTypeByLength
         ),
-      [currentChainRecord, getAddressTypeByLength]
+      [chain, getAddressTypeByLength]
     ),
   };
 };
diff --git a/src/lib/app-provider/hooks/useAmplitude.ts b/src/lib/app-provider/hooks/useAmplitude.ts
index 1893730f5..1feb095d5 100644
--- a/src/lib/app-provider/hooks/useAmplitude.ts
+++ b/src/lib/app-provider/hooks/useAmplitude.ts
@@ -1,12 +1,13 @@
 import { init, setDeviceId, setUserId } from "@amplitude/analytics-browser";
-import { useWallet } from "@cosmos-kit/react";
+import { useChain } from "@cosmos-kit/react";
 import { createHash } from "crypto";
 import { useEffect } from "react";
 import * as uuid from "uuid";
 
-export const useAmplitude = () => {
-  const { address, currentChainName } = useWallet();
+import type { Option } from "lib/types";
 
+export const useAmplitude = (chainName: Option<string>) => {
+  const { address } = useChain(chainName ?? "osmosis");
   if (typeof window !== "undefined") {
     init(process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY ?? "", undefined, {
       trackingOptions: {
@@ -31,13 +32,13 @@ export const useAmplitude = () => {
 
   useEffect(() => {
     const timeoutId = setTimeout(() => {
-      if (currentChainName) {
+      if (chainName) {
         const userId = address
           ? createHash("sha256").update(address).digest("hex")
           : undefined;
-        setUserId(`${currentChainName}/${userId}`);
+        setUserId(`${chainName}/${userId}`);
       }
     }, 300);
     return () => clearTimeout(timeoutId);
-  }, [address, currentChainName]);
+  }, [address, chainName]);
 };
diff --git a/src/lib/app-provider/hooks/useChainRecordAsset.ts b/src/lib/app-provider/hooks/useChainRecordAsset.ts
index 65fec83ab..cb831cad7 100644
--- a/src/lib/app-provider/hooks/useChainRecordAsset.ts
+++ b/src/lib/app-provider/hooks/useChainRecordAsset.ts
@@ -1,10 +1,11 @@
 import type { Asset } from "@chain-registry/types";
-import { useWallet } from "@cosmos-kit/react";
 import { useCallback } from "react";
 
 import type { SnakeToCamelCaseNested } from "lib/types";
 import { snakeToCamel } from "lib/utils";
 
+import { useCurrentChain } from "./useCurrentChain";
+
 interface ChainRecordAsset extends Asset {
   precision: number;
 }
@@ -12,13 +13,11 @@ interface ChainRecordAsset extends Asset {
 type InternalChainRecordAsset = SnakeToCamelCaseNested<ChainRecordAsset>;
 
 export const useChainRecordAsset = () => {
-  const { currentChainRecord } = useWallet();
+  const { assets } = useCurrentChain();
 
   return useCallback(
     (denom: string): InternalChainRecordAsset | null => {
-      const assetInfo = currentChainRecord?.assetList.assets.find(
-        (asset) => asset.base === denom
-      );
+      const assetInfo = assets?.assets.find((asset) => asset.base === denom);
       return assetInfo
         ? (snakeToCamel({
             ...assetInfo,
@@ -34,6 +33,6 @@ export const useChainRecordAsset = () => {
           }) as InternalChainRecordAsset)
         : null;
     },
-    [currentChainRecord]
+    [assets]
   );
 };
diff --git a/src/lib/app-provider/hooks/useCurrentChain.ts b/src/lib/app-provider/hooks/useCurrentChain.ts
new file mode 100644
index 000000000..c961c3fc2
--- /dev/null
+++ b/src/lib/app-provider/hooks/useCurrentChain.ts
@@ -0,0 +1,10 @@
+import { useChain } from "@cosmos-kit/react";
+
+import { useCelatoneApp } from "../contexts";
+
+export const useCurrentChain = () => {
+  const {
+    chainConfig: { registryChainName },
+  } = useCelatoneApp();
+  return useChain(registryChainName);
+};
diff --git a/src/lib/app-provider/hooks/useDummyWallet.ts b/src/lib/app-provider/hooks/useDummyWallet.ts
index 12553ecae..8d6c824f9 100644
--- a/src/lib/app-provider/hooks/useDummyWallet.ts
+++ b/src/lib/app-provider/hooks/useDummyWallet.ts
@@ -1,12 +1,13 @@
 import { DirectSecp256k1HdWallet } from "@cosmjs/proto-signing";
-import { useWallet } from "@cosmos-kit/react";
 import { useEffect, useState } from "react";
 
 import { DUMMY_MNEMONIC } from "env";
 import type { HumanAddr } from "lib/types";
 
+import { useCurrentChain } from "./useCurrentChain";
+
 export const useDummyWallet = () => {
-  const { currentChainRecord } = useWallet();
+  const { chain } = useCurrentChain();
   const [dummyWallet, setDummyWallet] = useState<DirectSecp256k1HdWallet>();
   const [dummyAddress, setDummyAddress] = useState<HumanAddr>();
   useEffect(() => {
@@ -15,7 +16,7 @@ export const useDummyWallet = () => {
         const wallet = await DirectSecp256k1HdWallet.fromMnemonic(
           DUMMY_MNEMONIC,
           {
-            prefix: currentChainRecord?.chain.bech32_prefix,
+            prefix: chain.bech32_prefix,
           }
         );
 
@@ -25,7 +26,7 @@ export const useDummyWallet = () => {
         setDummyAddress(address as HumanAddr);
       }
     })();
-  }, [currentChainRecord?.chain.bech32_prefix]);
+  }, [chain.bech32_prefix]);
 
   return { dummyWallet, dummyAddress };
 };
diff --git a/src/lib/app-provider/hooks/useLCDEndpoint.ts b/src/lib/app-provider/hooks/useLCDEndpoint.ts
index a620c19f8..628aebac1 100644
--- a/src/lib/app-provider/hooks/useLCDEndpoint.ts
+++ b/src/lib/app-provider/hooks/useLCDEndpoint.ts
@@ -1,10 +1,13 @@
-import { useWallet } from "@cosmos-kit/react";
-
 import { useCelatoneApp } from "../contexts";
 
+import { useCurrentChain } from "./useCurrentChain";
+
 export const useLCDEndpoint = () => {
-  const { currentChainRecord } = useWallet();
+  const { chainWallet } = useCurrentChain();
   const { chainConfig } = useCelatoneApp();
+  const restRecord = chainWallet?.chainRecord.preferredEndpoints?.rest?.[0];
+  const endpoint =
+    typeof restRecord === "string" ? restRecord : restRecord?.url;
 
-  return currentChainRecord?.preferredEndpoints?.rest?.[0] ?? chainConfig.lcd;
+  return endpoint ?? chainConfig.lcd;
 };
diff --git a/src/lib/app-provider/hooks/useRPCEndpoint.ts b/src/lib/app-provider/hooks/useRPCEndpoint.ts
index 97d81f39c..7017bef18 100644
--- a/src/lib/app-provider/hooks/useRPCEndpoint.ts
+++ b/src/lib/app-provider/hooks/useRPCEndpoint.ts
@@ -1,10 +1,12 @@
-import { useWallet } from "@cosmos-kit/react";
-
 import { useCelatoneApp } from "../contexts";
 
+import { useCurrentChain } from "./useCurrentChain";
+
 export const useRPCEndpoint = () => {
-  const { currentChainRecord } = useWallet();
+  const { chainWallet } = useCurrentChain();
   const { chainConfig } = useCelatoneApp();
+  const rpcRecord = chainWallet?.chainRecord.preferredEndpoints?.rpc?.[0];
+  const endpoint = typeof rpcRecord === "string" ? rpcRecord : rpcRecord?.url;
 
-  return currentChainRecord?.preferredEndpoints?.rpc?.[0] ?? chainConfig.rpc;
+  return endpoint ?? chainConfig.rpc;
 };
diff --git a/src/lib/app-provider/hooks/useSimulateFee.ts b/src/lib/app-provider/hooks/useSimulateFee.ts
index f8cb3e918..97dbe9d86 100644
--- a/src/lib/app-provider/hooks/useSimulateFee.ts
+++ b/src/lib/app-provider/hooks/useSimulateFee.ts
@@ -1,19 +1,20 @@
-import { useWallet } from "@cosmos-kit/react";
 import { useCallback, useState } from "react";
 
 import type { Gas } from "lib/types";
 import type { ComposedMsg } from "lib/types/tx";
 
+import { useCurrentChain } from "./useCurrentChain";
+
 // TODO: remove this hook after migrating to useQuery version
 export const useSimulateFee = () => {
-  const { address, getCosmWasmClient } = useWallet();
+  const { address, getSigningCosmWasmClient } = useCurrentChain();
 
   const [loading, setLoading] = useState(false);
 
   const simulate = useCallback(
     async (messages: ComposedMsg[], memo?: string) => {
       setLoading(true);
-      const client = await getCosmWasmClient();
+      const client = await getSigningCosmWasmClient();
       if (!client || !address) {
         setLoading(false);
         return undefined;
@@ -27,7 +28,7 @@ export const useSimulateFee = () => {
         throw e;
       }
     },
-    [address, getCosmWasmClient, setLoading]
+    [address, getSigningCosmWasmClient, setLoading]
   );
 
   return { simulate, loading };
diff --git a/src/lib/app-provider/hooks/useTokensInfo.ts b/src/lib/app-provider/hooks/useTokensInfo.ts
index fb8638f46..47af749a3 100644
--- a/src/lib/app-provider/hooks/useTokensInfo.ts
+++ b/src/lib/app-provider/hooks/useTokensInfo.ts
@@ -1,14 +1,11 @@
-import { useWallet } from "@cosmos-kit/react";
 import { useMemo } from "react";
 
-export const useNativeTokensInfo = () => {
-  const { currentChainRecord } = useWallet();
+import { useCurrentChain } from "./useCurrentChain";
 
+export const useNativeTokensInfo = () => {
+  const { assets } = useCurrentChain();
   return useMemo(
-    () =>
-      currentChainRecord?.assetList?.assets?.filter(
-        (asset) => !asset.base.includes("cw20")
-      ) ?? [],
-    [currentChainRecord]
+    () => assets?.assets.filter((asset) => !asset.base.includes("cw20")) ?? [],
+    [assets]
   );
 };
diff --git a/src/lib/app-provider/queries/simulateFee.ts b/src/lib/app-provider/queries/simulateFee.ts
index 4102b4331..769239985 100644
--- a/src/lib/app-provider/queries/simulateFee.ts
+++ b/src/lib/app-provider/queries/simulateFee.ts
@@ -1,10 +1,9 @@
 import type { Coin } from "@cosmjs/amino";
 import { SigningCosmWasmClient } from "@cosmjs/cosmwasm-stargate";
-import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 import { gzip } from "node-gzip";
 
-import { useDummyWallet, useRPCEndpoint } from "../hooks";
+import { useCurrentChain, useDummyWallet, useRPCEndpoint } from "../hooks";
 import type {
   AccessType,
   Addr,
@@ -30,7 +29,7 @@ export const useSimulateFeeQuery = ({
   onSuccess,
   onError,
 }: SimulateQueryParams) => {
-  const { address, getCosmWasmClient, currentChainName } = useWallet();
+  const { address, getSigningCosmWasmClient, chain } = useCurrentChain();
   const { dummyWallet, dummyAddress } = useDummyWallet();
   const rpcEndpoint = useRPCEndpoint();
   const userAddress = isDummyUser ? dummyAddress : address || dummyAddress;
@@ -47,7 +46,7 @@ export const useSimulateFeeQuery = ({
             rpcEndpoint,
             dummyWallet
           )
-        : await getCosmWasmClient();
+        : await getSigningCosmWasmClient();
 
     if (!client) {
       throw new Error("Fail to get SigningCosmWasmClient");
@@ -59,7 +58,7 @@ export const useSimulateFeeQuery = ({
   return useQuery({
     queryKey: [
       "simulate",
-      currentChainName,
+      chain.chain_name,
       userAddress,
       messages,
       rpcEndpoint,
@@ -92,13 +91,12 @@ export const useSimulateFeeForStoreCode = ({
   onSuccess,
   onError,
 }: SimulateQueryParamsForStoreCode) => {
-  const { address, getCosmWasmClient, currentChainName } = useWallet();
-
+  const { address, getSigningCosmWasmClient, chain } = useCurrentChain();
   const simulateFn = async () => {
     if (!address) throw new Error("Please check your wallet connection.");
     if (!wasmFile) throw new Error("Fail to get Wasm file");
 
-    const client = await getCosmWasmClient();
+    const client = await getSigningCosmWasmClient();
     if (!client) throw new Error("Fail to get client");
 
     const submitStoreCodeMsg = async () => {
@@ -115,7 +113,7 @@ export const useSimulateFeeForStoreCode = ({
   return useQuery({
     queryKey: [
       "simulate_fee_store_code",
-      currentChainName,
+      chain.chain_name,
       wasmFile,
       permission,
       addresses,
@@ -165,13 +163,12 @@ export const useSimulateFeeForProposalStoreCode = ({
   onSuccess,
   onError,
 }: SimulateQueryParamsForProposalStoreCode) => {
-  const { address, getCosmWasmClient, currentChainName } = useWallet();
-
+  const { address, getSigningCosmWasmClient, chain } = useCurrentChain();
   const simulateFn = async () => {
     if (!address) throw new Error("Please check your wallet connection.");
     if (!wasmFile) throw new Error("Fail to get Wasm file");
 
-    const client = await getCosmWasmClient();
+    const client = await getSigningCosmWasmClient();
     if (!client) throw new Error("Fail to get client");
 
     const submitStoreCodeProposalMsg = async () => {
@@ -199,7 +196,7 @@ export const useSimulateFeeForProposalStoreCode = ({
   return useQuery({
     queryKey: [
       "simulate_fee_store_code_proposal",
-      currentChainName,
+      chain.chain_name,
       runAs,
       initialDeposit,
       unpinCode,
diff --git a/src/lib/app-provider/tx/clearAdmin.ts b/src/lib/app-provider/tx/clearAdmin.ts
index 0d43ce754..13c360257 100644
--- a/src/lib/app-provider/tx/clearAdmin.ts
+++ b/src/lib/app-provider/tx/clearAdmin.ts
@@ -1,8 +1,7 @@
-import { useWallet } from "@cosmos-kit/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useCallback } from "react";
 
-import { useFabricateFee, useWasmConfig } from "../hooks";
+import { useCurrentChain, useFabricateFee, useWasmConfig } from "../hooks";
 import { clearAdminTx } from "lib/app-fns/tx/clearAdmin";
 import type { ContractAddr, HumanAddr } from "lib/types";
 
@@ -11,14 +10,14 @@ export interface ClearAdminStreamParams {
 }
 
 export const useClearAdminTx = (contractAddress: ContractAddr) => {
-  const { address, getCosmWasmClient } = useWallet();
+  const { address, getSigningCosmWasmClient } = useCurrentChain();
   const queryClient = useQueryClient();
   const fabricateFee = useFabricateFee();
   const wasm = useWasmConfig({ shouldRedirect: false });
 
   return useCallback(
     async ({ onTxSucceed }: ClearAdminStreamParams) => {
-      const client = await getCosmWasmClient();
+      const client = await getSigningCosmWasmClient();
       if (!address || !client)
         throw new Error("Please check your wallet connection.");
 
@@ -48,7 +47,7 @@ export const useClearAdminTx = (contractAddress: ContractAddr) => {
       });
     },
     [
-      getCosmWasmClient,
+      getSigningCosmWasmClient,
       address,
       wasm,
       fabricateFee,
diff --git a/src/lib/app-provider/tx/execute.ts b/src/lib/app-provider/tx/execute.ts
index 0245311db..670efff5e 100644
--- a/src/lib/app-provider/tx/execute.ts
+++ b/src/lib/app-provider/tx/execute.ts
@@ -1,7 +1,7 @@
 import type { Coin, StdFee } from "@cosmjs/stargate";
-import { useWallet } from "@cosmos-kit/react";
 import { useCallback } from "react";
 
+import { useCurrentChain } from "../hooks";
 import { executeContractTx } from "lib/app-fns/tx/execute";
 import { useUserKey } from "lib/hooks/useUserKey";
 import type { Activity } from "lib/stores/contract";
@@ -17,7 +17,7 @@ export interface ExecuteStreamParams {
 }
 
 export const useExecuteContractTx = () => {
-  const { address, getCosmWasmClient } = useWallet();
+  const { address, getSigningCosmWasmClient } = useCurrentChain();
   const userKey = useUserKey();
 
   return useCallback(
@@ -29,7 +29,7 @@ export const useExecuteContractTx = () => {
       msg,
       funds,
     }: ExecuteStreamParams) => {
-      const client = await getCosmWasmClient();
+      const client = await getSigningCosmWasmClient();
       if (!address || !client)
         throw new Error("Please check your wallet connection.");
       if (!estimatedFee) return null;
@@ -46,6 +46,6 @@ export const useExecuteContractTx = () => {
         onTxFailed,
       });
     },
-    [address, userKey, getCosmWasmClient]
+    [address, userKey, getSigningCosmWasmClient]
   );
 };
diff --git a/src/lib/app-provider/tx/instantiate.ts b/src/lib/app-provider/tx/instantiate.ts
index 2b894cd4e..0acb6a777 100644
--- a/src/lib/app-provider/tx/instantiate.ts
+++ b/src/lib/app-provider/tx/instantiate.ts
@@ -1,8 +1,8 @@
 import type { InstantiateResult } from "@cosmjs/cosmwasm-stargate";
 import type { Coin, StdFee } from "@cosmjs/stargate";
-import { useWallet } from "@cosmos-kit/react";
 import { useCallback } from "react";
 
+import { useCurrentChain } from "../hooks";
 import { instantiateContractTx } from "lib/app-fns/tx/instantiate";
 
 export interface InstantiateStreamParams {
@@ -16,7 +16,7 @@ export interface InstantiateStreamParams {
 }
 
 export const useInstantiateTx = () => {
-  const { address, getCosmWasmClient } = useWallet();
+  const { address, getSigningCosmWasmClient } = useCurrentChain();
 
   return useCallback(
     async ({
@@ -28,7 +28,7 @@ export const useInstantiateTx = () => {
       admin,
       funds,
     }: InstantiateStreamParams) => {
-      const client = await getCosmWasmClient();
+      const client = await getSigningCosmWasmClient();
       if (!address || !client)
         throw new Error("Please check your wallet connection.");
       if (!estimatedFee) return null;
@@ -45,6 +45,6 @@ export const useInstantiateTx = () => {
         onTxSucceed,
       });
     },
-    [address, getCosmWasmClient]
+    [address, getSigningCosmWasmClient]
   );
 };
diff --git a/src/lib/app-provider/tx/migrate.ts b/src/lib/app-provider/tx/migrate.ts
index a23aa9cba..804f83f74 100644
--- a/src/lib/app-provider/tx/migrate.ts
+++ b/src/lib/app-provider/tx/migrate.ts
@@ -1,7 +1,7 @@
 import type { StdFee } from "@cosmjs/stargate";
-import { useWallet } from "@cosmos-kit/react";
 import { useCallback } from "react";
 
+import { useCurrentChain } from "../hooks";
 import { migrateContractTx } from "lib/app-fns/tx/migrate";
 import type { ContractAddr, HumanAddr, Option } from "lib/types";
 
@@ -15,8 +15,7 @@ export interface MigrateStreamParams {
 }
 
 export const useMigrateTx = () => {
-  const { address, getCosmWasmClient } = useWallet();
-
+  const { address, getSigningCosmWasmClient } = useCurrentChain();
   return useCallback(
     async ({
       contractAddress,
@@ -26,7 +25,7 @@ export const useMigrateTx = () => {
       onTxSucceed,
       onTxFailed,
     }: MigrateStreamParams) => {
-      const client = await getCosmWasmClient();
+      const client = await getSigningCosmWasmClient();
       if (!address || !client)
         throw new Error("Please check your wallet connection.");
       if (!estimatedFee) return null;
@@ -42,6 +41,6 @@ export const useMigrateTx = () => {
         onTxFailed,
       });
     },
-    [address, getCosmWasmClient]
+    [address, getSigningCosmWasmClient]
   );
 };
diff --git a/src/lib/app-provider/tx/resend.ts b/src/lib/app-provider/tx/resend.ts
index 87854ed36..faa19911d 100644
--- a/src/lib/app-provider/tx/resend.ts
+++ b/src/lib/app-provider/tx/resend.ts
@@ -1,8 +1,8 @@
 import type { EncodeObject } from "@cosmjs/proto-signing";
 import type { StdFee } from "@cosmjs/stargate";
-import { useWallet } from "@cosmos-kit/react";
 import { useCallback } from "react";
 
+import { useCurrentChain } from "../hooks";
 import { resendTx } from "lib/app-fns/tx/resend";
 import type { HumanAddr } from "lib/types";
 
@@ -14,8 +14,7 @@ export interface ResendStreamParams {
 }
 
 export const useResendTx = () => {
-  const { address, getCosmWasmClient } = useWallet();
-
+  const { address, getSigningCosmWasmClient } = useCurrentChain();
   return useCallback(
     async ({
       onTxSucceed,
@@ -23,7 +22,7 @@ export const useResendTx = () => {
       estimatedFee,
       messages,
     }: ResendStreamParams) => {
-      const client = await getCosmWasmClient();
+      const client = await getSigningCosmWasmClient();
       if (!address || !client)
         throw new Error("Please check your wallet connection.");
       if (!estimatedFee) return null;
@@ -36,6 +35,6 @@ export const useResendTx = () => {
         messages,
       });
     },
-    [address, getCosmWasmClient]
+    [address, getSigningCosmWasmClient]
   );
 };
diff --git a/src/lib/app-provider/tx/submitProposal.ts b/src/lib/app-provider/tx/submitProposal.ts
index a10752ab1..7083b0083 100644
--- a/src/lib/app-provider/tx/submitProposal.ts
+++ b/src/lib/app-provider/tx/submitProposal.ts
@@ -1,8 +1,8 @@
 import type { EncodeObject } from "@cosmjs/proto-signing";
 import type { StdFee } from "@cosmjs/stargate";
-import { useWallet } from "@cosmos-kit/react";
 import { useCallback } from "react";
 
+import { useCurrentChain } from "../hooks";
 import {
   submitStoreCodeProposalTx,
   submitWhitelistProposalTx,
@@ -19,7 +19,7 @@ export interface SubmitWhitelistProposalStreamParams {
 }
 
 export const useSubmitWhitelistProposalTx = () => {
-  const { address, getCosmWasmClient } = useWallet();
+  const { address, getSigningCosmWasmClient } = useCurrentChain();
 
   return useCallback(
     async ({
@@ -30,7 +30,7 @@ export const useSubmitWhitelistProposalTx = () => {
       whitelistNumber,
       amountToVote,
     }: SubmitWhitelistProposalStreamParams) => {
-      const client = await getCosmWasmClient();
+      const client = await getSigningCosmWasmClient();
       if (!address || !client)
         throw new Error("Please check your wallet connection.");
       if (!estimatedFee) return null;
@@ -45,7 +45,7 @@ export const useSubmitWhitelistProposalTx = () => {
         amountToVote,
       });
     },
-    [address, getCosmWasmClient]
+    [address, getSigningCosmWasmClient]
   );
 };
 
@@ -59,7 +59,7 @@ interface SubmitStoreCodeProposalStreamParams {
 }
 
 export const useSubmitStoreCodeProposalTx = () => {
-  const { address, getCosmWasmClient, currentChainName } = useWallet();
+  const { address, getSigningCosmWasmClient, chain } = useCurrentChain();
   return useCallback(
     async ({
       estimatedFee,
@@ -69,13 +69,13 @@ export const useSubmitStoreCodeProposalTx = () => {
       onTxSucceed,
       onTxFailed,
     }: SubmitStoreCodeProposalStreamParams) => {
-      const client = await getCosmWasmClient();
-      if (!address || !client || !currentChainName)
+      const client = await getSigningCosmWasmClient();
+      if (!address || !client || !chain.chain_name)
         throw new Error("Please check your wallet connection.");
       if (!estimatedFee) return null;
       return submitStoreCodeProposalTx({
         address: address as HumanAddr,
-        chainName: currentChainName,
+        chainName: chain.chain_name,
         client,
         onTxSucceed,
         onTxFailed,
@@ -85,6 +85,6 @@ export const useSubmitStoreCodeProposalTx = () => {
         amountToVote,
       });
     },
-    [address, currentChainName, getCosmWasmClient]
+    [address, chain.chain_name, getSigningCosmWasmClient]
   );
 };
diff --git a/src/lib/app-provider/tx/updateAdmin.ts b/src/lib/app-provider/tx/updateAdmin.ts
index b0e8898a4..861e8aaad 100644
--- a/src/lib/app-provider/tx/updateAdmin.ts
+++ b/src/lib/app-provider/tx/updateAdmin.ts
@@ -1,7 +1,7 @@
 import type { StdFee } from "@cosmjs/stargate";
-import { useWallet } from "@cosmos-kit/react";
 import { useCallback } from "react";
 
+import { useCurrentChain } from "../hooks";
 import { updateAdminTx } from "lib/app-fns/tx/updateAdmin";
 import type { Addr, ContractAddr, HumanAddr, Option } from "lib/types";
 
@@ -14,7 +14,7 @@ export interface UpdateAdminStreamParams {
 }
 
 export const useUpdateAdminTx = () => {
-  const { address, getCosmWasmClient } = useWallet();
+  const { address, getSigningCosmWasmClient } = useCurrentChain();
 
   return useCallback(
     async ({
@@ -24,7 +24,7 @@ export const useUpdateAdminTx = () => {
       onTxSucceed,
       onTxFailed,
     }: UpdateAdminStreamParams) => {
-      const client = await getCosmWasmClient();
+      const client = await getSigningCosmWasmClient();
       if (!address || !client)
         throw new Error("Please check your wallet connection.");
       if (!estimatedFee) return null;
@@ -39,6 +39,6 @@ export const useUpdateAdminTx = () => {
         onTxFailed,
       });
     },
-    [address, getCosmWasmClient]
+    [address, getSigningCosmWasmClient]
   );
 };
diff --git a/src/lib/app-provider/tx/upload.ts b/src/lib/app-provider/tx/upload.ts
index fb068c94d..028d3dd3d 100644
--- a/src/lib/app-provider/tx/upload.ts
+++ b/src/lib/app-provider/tx/upload.ts
@@ -1,8 +1,8 @@
 import type { StdFee } from "@cosmjs/stargate";
-import { useWallet } from "@cosmos-kit/react";
 import { gzip } from "node-gzip";
 import { useCallback } from "react";
 
+import { useCurrentChain } from "../hooks";
 import { uploadContractTx } from "lib/app-fns/tx/upload";
 import type { AccessType, Addr, HumanAddr, Option } from "lib/types";
 import { composeStoreCodeMsg } from "lib/utils";
@@ -18,7 +18,7 @@ export interface UploadStreamParams {
 }
 
 export const useUploadContractTx = (isMigrate: boolean) => {
-  const { address, getCosmWasmClient } = useWallet();
+  const { address, getSigningCosmWasmClient } = useCurrentChain();
 
   return useCallback(
     async ({
@@ -30,7 +30,7 @@ export const useUploadContractTx = (isMigrate: boolean) => {
       estimatedFee,
       onTxSucceed,
     }: UploadStreamParams) => {
-      const client = await getCosmWasmClient();
+      const client = await getSigningCosmWasmClient();
       if (!address || !client)
         throw new Error("Please check your wallet connection.");
       if (!wasmFileName || !wasmCode || !estimatedFee) return null;
@@ -53,6 +53,6 @@ export const useUploadContractTx = (isMigrate: boolean) => {
         isMigrate,
       });
     },
-    [address, getCosmWasmClient, isMigrate]
+    [address, getSigningCosmWasmClient, isMigrate]
   );
 };
diff --git a/src/lib/components/AssignMe.tsx b/src/lib/components/AssignMe.tsx
index 2a5b43643..d5b60b161 100644
--- a/src/lib/components/AssignMe.tsx
+++ b/src/lib/components/AssignMe.tsx
@@ -1,9 +1,10 @@
 import { Text } from "@chakra-ui/react";
 import type { TextProps } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import type { MouseEventHandler } from "react";
 
-interface AssginMeProps {
+import { useCurrentChain } from "lib/app-provider";
+
+interface AssignMeProps {
   onClick?: MouseEventHandler<HTMLParagraphElement>;
   isDisable?: boolean;
   textAlign?: TextProps["textAlign"];
@@ -13,8 +14,8 @@ export const AssignMe = ({
   onClick,
   isDisable = false,
   textAlign = "right",
-}: AssginMeProps) => {
-  const { address: walletAddress } = useWallet();
+}: AssignMeProps) => {
+  const { address: walletAddress } = useCurrentChain();
   const enabled = Boolean(!isDisable && walletAddress);
 
   return (
diff --git a/src/lib/components/ConnectWalletAlert.tsx b/src/lib/components/ConnectWalletAlert.tsx
index 5c7820f7d..4b4a07b82 100644
--- a/src/lib/components/ConnectWalletAlert.tsx
+++ b/src/lib/components/ConnectWalletAlert.tsx
@@ -7,9 +7,9 @@ import {
   Button,
 } from "@chakra-ui/react";
 import type { AlertProps } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import type { MouseEventHandler } from "react";
 
+import { useCurrentChain } from "lib/app-provider";
 import { AmpTrackUseClickWallet } from "lib/services/amplitude";
 
 import { CustomIcon } from "./icon";
@@ -26,7 +26,7 @@ export const ConnectWalletAlert = ({
   page,
   ...alertProps
 }: ConnectWalletAlertProps) => {
-  const { address, connect } = useWallet();
+  const { address, connect } = useCurrentChain();
 
   const onClickConnect: MouseEventHandler = async (e) => {
     AmpTrackUseClickWallet(page, "alert");
diff --git a/src/lib/components/CopyLink.tsx b/src/lib/components/CopyLink.tsx
index 6c56d7d30..67c98ee9f 100644
--- a/src/lib/components/CopyLink.tsx
+++ b/src/lib/components/CopyLink.tsx
@@ -1,7 +1,7 @@
 import { Flex, Text, useClipboard } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import { useState } from "react";
 
+import { useCurrentChain } from "lib/app-provider";
 import { AmpTrackCopier } from "lib/services/amplitude";
 
 import { CustomIcon } from "./icon";
@@ -14,7 +14,7 @@ interface CopyLinkProps {
 }
 
 export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const { onCopy, hasCopied } = useClipboard(value);
   const [isHover, setIsHover] = useState(false);
   return (
diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
index 676352427..3280d142e 100644
--- a/src/lib/components/ExplorerLink.tsx
+++ b/src/lib/components/ExplorerLink.tsx
@@ -1,10 +1,10 @@
 import type { BoxProps, TextProps } from "@chakra-ui/react";
 import { Box, Text } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
 import type { ExplorerConfig } from "config/types";
 import type { AddressReturnType } from "lib/app-provider";
 import { useCelatoneApp } from "lib/app-provider/contexts";
+import { useCurrentChain } from "lib/app-provider/hooks/useCurrentChain";
 import { AmpTrackMintscan } from "lib/services/amplitude";
 import type { Option } from "lib/types";
 import { truncate } from "lib/utils";
@@ -152,7 +152,7 @@ export const ExplorerLink = ({
   openNewTab,
   ...componentProps
 }: ExplorerLinkProps) => {
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const {
     chainConfig: { explorerLink: explorerConfig },
   } = useCelatoneApp();
diff --git a/src/lib/components/PermissionChip.tsx b/src/lib/components/PermissionChip.tsx
index 8572083a4..f8a0ece03 100644
--- a/src/lib/components/PermissionChip.tsx
+++ b/src/lib/components/PermissionChip.tsx
@@ -1,6 +1,6 @@
 import { Flex, Tag } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
+import { useCurrentChain } from "lib/app-provider";
 import type {
   HumanAddr,
   PermissionAddresses,
@@ -19,7 +19,7 @@ export const PermissionChip = ({
   instantiatePermission,
   permissionAddresses,
 }: PermissionChipProps) => {
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
 
   const isAllowed = resolvePermission(
     address as HumanAddr,
diff --git a/src/lib/components/Wallet.tsx b/src/lib/components/Wallet.tsx
index ded48565f..9b741c73e 100644
--- a/src/lib/components/Wallet.tsx
+++ b/src/lib/components/Wallet.tsx
@@ -1,6 +1,6 @@
-import { useWallet } from "@cosmos-kit/react";
 import type { MouseEventHandler } from "react";
 
+import { useCurrentChain } from "lib/app-provider";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { truncate } from "lib/utils";
 
@@ -13,9 +13,7 @@ import {
 } from "./wallet/index";
 
 export const WalletSection = () => {
-  const walletManager = useWallet();
-  const { address } = useWallet();
-  const { connect, openView, walletStatus } = walletManager;
+  const { address, connect, openView, status } = useCurrentChain();
 
   // Events
   const onClickConnect: MouseEventHandler = async (e) => {
@@ -32,7 +30,7 @@ export const WalletSection = () => {
 
   return (
     <WalletConnectComponent
-      walletStatus={walletStatus}
+      walletStatus={status}
       disconnect={
         <Disconnected
           buttonText="Connect"
diff --git a/src/lib/components/button/AdminButton.tsx b/src/lib/components/button/AdminButton.tsx
index 3ec3800e9..f84edb204 100644
--- a/src/lib/components/button/AdminButton.tsx
+++ b/src/lib/components/button/AdminButton.tsx
@@ -1,10 +1,9 @@
 import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
 import { CustomIcon } from "../icon";
 import { ClearAdminModal } from "../modal/contract/ClearAdmin";
 import { Tooltip } from "../Tooltip";
-import { useInternalNavigate } from "lib/app-provider";
+import { useCurrentChain, useInternalNavigate } from "lib/app-provider";
 import type { Addr, ContractAddr, Option } from "lib/types";
 
 interface AdminButtonProps {
@@ -13,7 +12,7 @@ interface AdminButtonProps {
 }
 
 export const AdminButton = ({ contractAddress, admin }: AdminButtonProps) => {
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const navigate = useInternalNavigate();
 
   const isAdmin = !!address && address === admin;
diff --git a/src/lib/components/button/ConnectWallet.tsx b/src/lib/components/button/ConnectWallet.tsx
index 726484ecf..5f8d797c1 100644
--- a/src/lib/components/button/ConnectWallet.tsx
+++ b/src/lib/components/button/ConnectWallet.tsx
@@ -1,12 +1,12 @@
 import { Button } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import type { MouseEventHandler } from "react";
 
 import { CustomIcon } from "../icon";
+import { useCurrentChain } from "lib/app-provider";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 
 export const ConnectWalletBtn = () => {
-  const { connect } = useWallet();
+  const { connect } = useCurrentChain();
 
   const onClickConnect: MouseEventHandler = async (e) => {
     AmpTrack(AmpEvent.USE_CLICK_WALLET);
diff --git a/src/lib/components/button/InstantiateButton.tsx b/src/lib/components/button/InstantiateButton.tsx
index 98e3ef93f..0cff55e7c 100644
--- a/src/lib/components/button/InstantiateButton.tsx
+++ b/src/lib/components/button/InstantiateButton.tsx
@@ -1,10 +1,9 @@
 import type { ButtonProps } from "@chakra-ui/react";
 import { Button } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
 import { CustomIcon } from "../icon";
 import { Tooltip } from "../Tooltip";
-import { useInternalNavigate } from "lib/app-provider";
+import { useCurrentChain, useInternalNavigate } from "lib/app-provider";
 import type { HumanAddr, PermissionAddresses } from "lib/types";
 import { AccessConfigPermission } from "lib/types";
 import { resolvePermission } from "lib/utils";
@@ -60,7 +59,7 @@ export const InstantiateButton = ({
   codeId,
   ...buttonProps
 }: InstantiateButtonProps) => {
-  const { address, isWalletConnected } = useWallet();
+  const { address, isWalletConnected } = useCurrentChain();
   const navigate = useInternalNavigate();
   const goToInstantiate = () =>
     navigate({ pathname: "/instantiate", query: { "code-id": codeId } });
diff --git a/src/lib/components/button/RedoButton.tsx b/src/lib/components/button/RedoButton.tsx
index 40ecb234c..197b97a14 100644
--- a/src/lib/components/button/RedoButton.tsx
+++ b/src/lib/components/button/RedoButton.tsx
@@ -1,7 +1,7 @@
 import { Button } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
 import { CustomIcon } from "../icon";
+import { useCurrentChain } from "lib/app-provider";
 import { useRedo } from "lib/hooks/useRedo";
 import type { Message, Msg } from "lib/types";
 import { extractMsgType } from "lib/utils";
@@ -12,8 +12,7 @@ interface RedoButtonProps {
 
 export const RedoButton = ({ message }: RedoButtonProps) => {
   const onClickRedo = useRedo();
-  const { currentChainName } = useWallet();
-
+  const { chain } = useCurrentChain();
   return (
     <Button
       variant="outline"
@@ -23,7 +22,7 @@ export const RedoButton = ({ message }: RedoButtonProps) => {
           e,
           extractMsgType(message.type),
           message.detail as Msg,
-          currentChainName
+          chain.chain_name
         )
       }
     >
diff --git a/src/lib/components/modal/CodeSnippet.tsx b/src/lib/components/modal/CodeSnippet.tsx
index 1621ed784..a6dcdb50f 100644
--- a/src/lib/components/modal/CodeSnippet.tsx
+++ b/src/lib/components/modal/CodeSnippet.tsx
@@ -14,7 +14,6 @@ import {
   Heading,
   Box,
 } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import AceEditor from "react-ace";
 
 import { CopyButton } from "../copy";
@@ -22,6 +21,7 @@ import { CustomIcon } from "../icon";
 import { CURR_THEME } from "env";
 import {
   useCelatoneApp,
+  useCurrentChain,
   useLCDEndpoint,
   useRPCEndpoint,
 } from "lib/app-provider";
@@ -49,9 +49,10 @@ const CodeSnippet = ({
   type = "query",
 }: CodeSnippetProps) => {
   const { isOpen, onClose, onOpen } = useDisclosure();
-  const { currentChainRecord, currentChainName } = useWallet();
+  const {
+    chain: { chain_name: chainName, daemon_name: daemonName },
+  } = useCurrentChain();
   const isDisabled = !contractAddress || !message.length;
-  const client = currentChainRecord?.chain.daemon_name;
   const lcdEndpoint = useLCDEndpoint();
   const rpcEndpoint = useRPCEndpoint();
   const { currentChainId } = useCelatoneApp();
@@ -67,7 +68,7 @@ const CodeSnippet = ({
 export CONTRACT_ADDRESS='${contractAddress}'\n
 export QUERY_MSG='${message}'\n
 export RPC_URL='${rpcEndpoint}'\n
-${client} query wasm contract-state smart $CONTRACT_ADDRESS $QUERY_MSG \\
+${daemonName} query wasm contract-state smart $CONTRACT_ADDRESS $QUERY_MSG \\
   --chain-id $CHAIN_ID \\
   --node $RPC_URL`,
       },
@@ -123,12 +124,12 @@ queryContract();`,
       {
         name: "CLI",
         mode: "sh",
-        snippet: `${client} keys add --recover celatone\n
+        snippet: `${daemonName} keys add --recover celatone\n
 export CHAIN_ID='${currentChainId}'\n
 export RPC_URL='${rpcEndpoint}'\n
 export CONTRACT_ADDRESS='${contractAddress}'\n
 export EXECUTE_MSG='${message}'\n
-${client} tx wasm execute $CONTRACT_ADDRESS $EXECUTE_MSG \\
+${daemonName} tx wasm execute $CONTRACT_ADDRESS $EXECUTE_MSG \\
   --from celatone \\
   --chain-id $CHAIN_ID \\
   --node $RPC_URL`,
@@ -144,7 +145,7 @@ const { chains } = require("chain-registry");
 // TODO: Replace with your mnemonic (not recommended for production use)
 const mnemonic =
   "<MNEMONIC>";
-const chain = chains.find(({ chain_name }) => chain_name === '${currentChainName}');
+const chain = chains.find(({ chain_name }) => chain_name === '${chainName}');
 const contractAddress =
   '${contractAddress}';
 
diff --git a/src/lib/components/modal/RedoModal.tsx b/src/lib/components/modal/RedoModal.tsx
index 7d3c6bac7..5e7410201 100644
--- a/src/lib/components/modal/RedoModal.tsx
+++ b/src/lib/components/modal/RedoModal.tsx
@@ -12,9 +12,9 @@ import {
   Heading,
   ModalFooter,
 } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
 import { CustomIcon } from "../icon";
+import { useCurrentChain } from "lib/app-provider";
 import { useRedo } from "lib/hooks";
 import type { Message, Msg } from "lib/types";
 import { extractMsgType } from "lib/utils";
@@ -26,7 +26,9 @@ interface RedoModalProps {
 export const RedoModal = ({ message }: RedoModalProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const onClickRedo = useRedo();
-  const { currentChainName } = useWallet();
+  const {
+    chain: { chain_name: chainName },
+  } = useCurrentChain();
 
   return (
     <>
@@ -90,7 +92,7 @@ export const RedoModal = ({ message }: RedoModalProps) => {
                     e,
                     extractMsgType(message.type),
                     message.detail as Msg,
-                    currentChainName
+                    chainName
                   )
                 }
               >{`Redo with \u2018MsgInstantiateContract\u2019`}</Button>
diff --git a/src/lib/components/modal/code/SaveNewCode.tsx b/src/lib/components/modal/code/SaveNewCode.tsx
index 40dec9b5a..e2f485de0 100644
--- a/src/lib/components/modal/code/SaveNewCode.tsx
+++ b/src/lib/components/modal/code/SaveNewCode.tsx
@@ -1,11 +1,14 @@
 import type { ButtonProps } from "@chakra-ui/react";
 import { Button, useToast, FormControl } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useMemo, useState } from "react";
 
 import { ActionModal } from "../ActionModal";
-import { useCelatoneApp, useLCDEndpoint } from "lib/app-provider";
+import {
+  useCelatoneApp,
+  useCurrentChain,
+  useLCDEndpoint,
+} from "lib/app-provider";
 import type { FormStatus } from "lib/components/forms";
 import { TextInput, NumberInput } from "lib/components/forms";
 import { CustomIcon } from "lib/components/icon";
@@ -21,7 +24,8 @@ interface SaveNewCodeModalProps {
 }
 
 export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
+
   const { constants } = useCelatoneApp();
   const getMaxLengthError = useGetMaxLengthError();
 
diff --git a/src/lib/components/select-contract/ContractListDetail.tsx b/src/lib/components/select-contract/ContractListDetail.tsx
index 2ff9c0bd5..c784d92a1 100644
--- a/src/lib/components/select-contract/ContractListDetail.tsx
+++ b/src/lib/components/select-contract/ContractListDetail.tsx
@@ -1,9 +1,9 @@
 import { Box, Flex } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import { matchSorter } from "match-sorter";
 import { useMemo, useState } from "react";
 
 import { ContractsTable } from "../table";
+import { useCurrentChain } from "lib/app-provider";
 import { TextInput } from "lib/components/forms";
 import { DisconnectedState, EmptyState, ZeroState } from "lib/components/state";
 import { TagSelection } from "lib/components/TagSelection";
@@ -28,7 +28,7 @@ const ContractListContent = ({
   onContractSelect,
   isReadOnly,
 }: ContractListContentProps) => {
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const isInstantiatedByMe =
     contractListInfo.slug === formatSlugName(INSTANTIATED_LIST_NAME);
 
diff --git a/src/lib/components/select-contract/SelectContractAdmin.tsx b/src/lib/components/select-contract/SelectContractAdmin.tsx
index a92f01a74..0de1187e3 100644
--- a/src/lib/components/select-contract/SelectContractAdmin.tsx
+++ b/src/lib/components/select-contract/SelectContractAdmin.tsx
@@ -9,8 +9,8 @@ import {
   DrawerCloseButton,
   DrawerBody,
 } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
+import { useCurrentChain } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { ADMIN_SPECIAL_SLUG } from "lib/data";
 import { useContractStore } from "lib/providers/store";
@@ -32,7 +32,7 @@ export const SelectContractAdmin = ({
   onContractSelect,
 }: SelectContractAdminProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const { getContractLocalInfo } = useContractStore();
 
   const { data: contracts = [], isLoading } = useContractListByAdmin(
diff --git a/src/lib/components/table/codes/CodesTableWithWallet.tsx b/src/lib/components/table/codes/CodesTableWithWallet.tsx
index 13fe5b532..f5a94e4cd 100644
--- a/src/lib/components/table/codes/CodesTableWithWallet.tsx
+++ b/src/lib/components/table/codes/CodesTableWithWallet.tsx
@@ -1,6 +1,6 @@
 import { Flex } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
+import { useCurrentChain } from "lib/app-provider";
 import { DisconnectedState } from "lib/components/state";
 import type { CodeInfo } from "lib/types";
 
@@ -23,7 +23,8 @@ export const CodesTableWithWallet = ({
   disconnectedMessage,
   isReadOnly = false,
 }: CodesTableWithWalletProps) => {
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
+
   return !address ? (
     <Flex direction="column" py={12} borderY="1px solid" borderColor="gray.700">
       <DisconnectedState text={disconnectedMessage} />
diff --git a/src/lib/components/table/contracts/ContractsTableRowCTA.tsx b/src/lib/components/table/contracts/ContractsTableRowCTA.tsx
index 927f5b25c..84361dbcc 100644
--- a/src/lib/components/table/contracts/ContractsTableRowCTA.tsx
+++ b/src/lib/components/table/contracts/ContractsTableRowCTA.tsx
@@ -11,10 +11,9 @@ import {
   MenuList,
   Text,
 } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
 import { TableRow } from "../tableComponents";
-import { useInternalNavigate } from "lib/app-provider";
+import { useCurrentChain, useInternalNavigate } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import { CustomIcon } from "lib/components/icon";
 import {
@@ -49,7 +48,7 @@ export const ContractsTableRowCTA = ({
   contractInfo,
   withCTA,
 }: ContractsTableRowCTAProps) => {
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const navigate = useInternalNavigate();
 
   const isAdmin = !!address && address === contractInfo.admin;
diff --git a/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx b/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx
index af2eb1f64..2fbd1916c 100644
--- a/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableWithWallet.tsx
@@ -1,6 +1,6 @@
 import { Flex } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
+import { useCurrentChain } from "lib/app-provider";
 import { DisconnectedState } from "lib/components/state";
 import type { Option, Transaction } from "lib/types";
 
@@ -17,7 +17,7 @@ export const TransactionsTableWithWallet = ({
   isLoading,
   emptyState,
 }: TransactionsTableWithWalletProps) => {
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   return !address ? (
     <Flex direction="column" py={12} borderColor="gray.700">
       <DisconnectedState
diff --git a/src/lib/components/upload/InstantiatePermissionRadio.tsx b/src/lib/components/upload/InstantiatePermissionRadio.tsx
index 82f292ddc..88d0e9c7a 100644
--- a/src/lib/components/upload/InstantiatePermissionRadio.tsx
+++ b/src/lib/components/upload/InstantiatePermissionRadio.tsx
@@ -1,11 +1,11 @@
 import { Text, Box, Radio, RadioGroup, Button, Flex } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import { useEffect } from "react";
 import type { Control, UseFormSetValue, UseFormTrigger } from "react-hook-form";
 import { useController, useFieldArray, useWatch } from "react-hook-form";
 
 import { AddressInput } from "../AddressInput";
 import { AssignMe } from "../AssignMe";
+import { useCurrentChain } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import {
   AmpEvent,
@@ -40,7 +40,7 @@ export const InstantiatePermissionRadio = ({
   trigger,
   page,
 }: InstantiatePermissionRadioProps) => {
-  const { address: walletAddress } = useWallet();
+  const { address: walletAddress } = useCurrentChain();
 
   const { fields, append, remove } = useFieldArray({
     control,
diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index ae7b60a20..91a44426e 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -1,6 +1,5 @@
 import { Box, Button, Flex } from "@chakra-ui/react";
 import type { StdFee } from "@cosmjs/stargate";
-import { useWallet } from "@cosmos-kit/react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 
@@ -8,6 +7,7 @@ import { DropZone } from "../dropzone";
 import { ControllerInput } from "../forms";
 import {
   useCelatoneApp,
+  useCurrentChain,
   useFabricateFee,
   useSimulateFeeForStoreCode,
   useUploadContractTx,
@@ -45,7 +45,7 @@ export const UploadSection = ({
   const { constants } = useCelatoneApp();
   const getMaxLengthError = useGetMaxLengthError();
   const fabricateFee = useFabricateFee();
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const { broadcast } = useTxBroadcast();
   const { updateCodeInfo } = useCodeStore();
   const postUploadTx = useUploadContractTx(isMigrate);
diff --git a/src/lib/hooks/useCodeFilter.ts b/src/lib/hooks/useCodeFilter.ts
index 62aa8b390..f918573a9 100644
--- a/src/lib/hooks/useCodeFilter.ts
+++ b/src/lib/hooks/useCodeFilter.ts
@@ -1,6 +1,6 @@
-import { useWallet } from "@cosmos-kit/react";
 import { useCallback } from "react";
 
+import { useCurrentChain } from "lib/app-provider";
 import type { CodeInfo, HumanAddr } from "lib/types";
 import { resolvePermission } from "lib/utils";
 
@@ -10,7 +10,7 @@ export type PermissionFilterValue =
   | "with-proposal";
 
 export const useCodePermissionFilter = (filterValue: PermissionFilterValue) => {
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   return useCallback(
     ({ instantiatePermission, permissionAddresses }: CodeInfo) => {
       const isAllowed = resolvePermission(
diff --git a/src/lib/hooks/useUserKey.ts b/src/lib/hooks/useUserKey.ts
index 0e92ff185..f0e575e2c 100644
--- a/src/lib/hooks/useUserKey.ts
+++ b/src/lib/hooks/useUserKey.ts
@@ -1,6 +1,6 @@
-import { useWallet } from "@cosmos-kit/react";
 import { useMemo } from "react";
 
+import { useCurrentChain } from "lib/app-provider/hooks/useCurrentChain";
 import { DEFAULT_ADDRESS } from "lib/data";
 import { formatUserKey } from "lib/utils";
 
@@ -10,8 +10,10 @@ import { formatUserKey } from "lib/utils";
  */
 
 export const useUserKey = () => {
-  const { currentChainName } = useWallet();
+  const {
+    chain: { chain_name: chainName },
+  } = useCurrentChain();
   return useMemo(() => {
-    return formatUserKey(currentChainName, DEFAULT_ADDRESS);
-  }, [currentChainName]);
+    return formatUserKey(chainName, DEFAULT_ADDRESS);
+  }, [chainName]);
 };
diff --git a/src/lib/layout/SubHeader.tsx b/src/lib/layout/SubHeader.tsx
index cd3418b91..fb133ae63 100644
--- a/src/lib/layout/SubHeader.tsx
+++ b/src/lib/layout/SubHeader.tsx
@@ -1,6 +1,6 @@
 import { Flex, Text } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
+import { useCurrentChain } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import type { IconKeys } from "lib/components/icon";
 import { CustomIcon } from "lib/components/icon";
@@ -18,7 +18,7 @@ const SubHeader = () => {
     { name: "Blocks", slug: "/blocks", icon: "block" },
     // { name: "Validators", slug: "/validators", icon: "admin" },
   ];
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const isCurrentPage = useIsCurrentPage();
 
   const activeColor = "primary.light";
diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index 2677aa813..2c2843dcd 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -1,7 +1,7 @@
 import { Flex } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import { observer } from "mobx-react-lite";
 
+import { useCurrentChain } from "lib/app-provider";
 import { INSTANTIATED_LIST_NAME, SAVED_LIST_NAME } from "lib/data";
 import { useIsCurrentPage } from "lib/hooks";
 import { useContractStore, usePublicProjectStore } from "lib/providers/store";
@@ -20,7 +20,9 @@ interface NavbarProps {
 const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
   const { getContractLists } = useContractStore();
   const { getSavedPublicProjects } = usePublicProjectStore();
-  const { currentChainRecord } = useWallet();
+  const {
+    chain: { network_type: networkType },
+  } = useCurrentChain();
   const isCurrentPage = useIsCurrentPage();
 
   const navMenu: MenuInfo[] = [
@@ -113,7 +115,7 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
     },
   ];
 
-  if (currentChainRecord?.chain.network_type === "mainnet") {
+  if (networkType === "mainnet") {
     navMenu.push({
       category: "Public Projects",
       submenu: [
diff --git a/src/lib/model/code.ts b/src/lib/model/code.ts
index ffb31d2af..95ba30e76 100644
--- a/src/lib/model/code.ts
+++ b/src/lib/model/code.ts
@@ -1,8 +1,11 @@
-import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 
-import { useCelatoneApp, useLCDEndpoint } from "lib/app-provider";
+import {
+  useCelatoneApp,
+  useCurrentChain,
+  useLCDEndpoint,
+} from "lib/app-provider";
 import type { PermissionFilterValue } from "lib/hooks";
 import {
   useUserKey,
@@ -81,7 +84,7 @@ export const useCodeData = (codeId: string): CodeDataState => {
 };
 
 const useStoredCodes = () => {
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const { getCodeLocalInfo, isCodeIdSaved } = useCodeStore();
 
   const { data: rawStoredCodes, isLoading } = useCodeListByWalletAddress(
diff --git a/src/lib/model/contract.ts b/src/lib/model/contract.ts
index cc186d2b3..f79b6acc5 100644
--- a/src/lib/model/contract.ts
+++ b/src/lib/model/contract.ts
@@ -1,9 +1,9 @@
-import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 
 import {
   useBaseApiRoute,
   useCelatoneApp,
+  useCurrentChain,
   useLCDEndpoint,
 } from "lib/app-provider";
 import { DEFAULT_TX_FILTERS, INSTANTIATED_LIST_NAME } from "lib/data";
@@ -50,7 +50,7 @@ interface InstantiatedByMeState {
 }
 
 export const useInstantiatedByMe = (enable: boolean): InstantiatedByMeState => {
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const { data: contracts = [], isLoading } = useInstantiatedListByUserQuery(
     enable ? (address as HumanAddr) : undefined
   );
@@ -74,7 +74,7 @@ export const useInstantiatedByMe = (enable: boolean): InstantiatedByMeState => {
 };
 
 export const useInstantiatedMockInfoByMe = (): ContractListInfo => {
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const { data: count } = useInstantiatedCountByUserQuery(address as HumanAddr);
 
   return {
diff --git a/src/lib/pages/admin/index.tsx b/src/lib/pages/admin/index.tsx
index ddacb3b75..cbdcc7185 100644
--- a/src/lib/pages/admin/index.tsx
+++ b/src/lib/pages/admin/index.tsx
@@ -1,6 +1,5 @@
 import { Button, Flex, Heading } from "@chakra-ui/react";
 import type { StdFee } from "@cosmjs/stargate";
-import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
@@ -15,6 +14,7 @@ import {
   useGetAddressType,
   useValidateAddress,
   useWasmConfig,
+  useCurrentChain,
 } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
@@ -37,7 +37,7 @@ import { composeMsg, getFirstQueryParam } from "lib/utils";
 const UpdateAdmin = () => {
   useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const { validateContractAddress, validateUserAddress } = useValidateAddress();
   const getAddressType = useGetAddressType();
   const navigate = useInternalNavigate();
diff --git a/src/lib/pages/code-details/components/table/NoContracts.tsx b/src/lib/pages/code-details/components/table/NoContracts.tsx
index 2957eef97..2196da7d8 100644
--- a/src/lib/pages/code-details/components/table/NoContracts.tsx
+++ b/src/lib/pages/code-details/components/table/NoContracts.tsx
@@ -1,6 +1,6 @@
 import { Flex, Text } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
+import { useCurrentChain } from "lib/app-provider";
 import { ConnectWalletBtn } from "lib/components/button";
 import { EmptyState, StateImage } from "lib/components/state";
 
@@ -27,7 +27,7 @@ const DisconnectedState = () => (
 );
 
 export const NoContracts = () => {
-  const { isWalletConnected } = useWallet();
+  const { isWalletConnected } = useCurrentChain();
   return !isWalletConnected ? (
     <DisconnectedState />
   ) : (
diff --git a/src/lib/pages/deploy/index.tsx b/src/lib/pages/deploy/index.tsx
index fcbc66fd6..278b36b74 100644
--- a/src/lib/pages/deploy/index.tsx
+++ b/src/lib/pages/deploy/index.tsx
@@ -7,11 +7,14 @@ import {
   Button,
   Text,
 } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
+import {
+  useCurrentChain,
+  useInternalNavigate,
+  useWasmConfig,
+} from "lib/app-provider";
 import { ButtonCard } from "lib/components/ButtonCard";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { CustomIcon } from "lib/components/icon";
@@ -54,7 +57,7 @@ const getAlertContent = (
 const Deploy = () => {
   const router = useRouter();
   const navigate = useInternalNavigate();
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const { data, isFetching } = useUploadAccessParams();
 
   const isPermissionedNetwork =
diff --git a/src/lib/pages/execute/components/ExecuteArea.tsx b/src/lib/pages/execute/components/ExecuteArea.tsx
index 8e3a1031f..91833687d 100644
--- a/src/lib/pages/execute/components/ExecuteArea.tsx
+++ b/src/lib/pages/execute/components/ExecuteArea.tsx
@@ -1,11 +1,14 @@
 import { Box, Flex, Button, ButtonGroup, Text } from "@chakra-ui/react";
 import type { Coin, StdFee } from "@cosmjs/stargate";
-import { useWallet } from "@cosmos-kit/react";
 import dynamic from "next/dynamic";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useForm, useFormState } from "react-hook-form";
 
-import { useFabricateFee, useExecuteContractTx } from "lib/app-provider";
+import {
+  useFabricateFee,
+  useExecuteContractTx,
+  useCurrentChain,
+} from "lib/app-provider";
 import { useSimulateFeeQuery } from "lib/app-provider/queries";
 import { ContractCmdButton } from "lib/components/ContractCmdButton";
 import { CopyButton } from "lib/components/copy";
@@ -58,7 +61,7 @@ export const ExecuteArea = ({
   initialFunds,
   cmds,
 }: ExecuteAreaProps) => {
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const fabricateFee = useFabricateFee();
   const executeTx = useExecuteContractTx();
   const { broadcast } = useTxBroadcast();
diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index d45419c84..a18f48c0e 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -6,7 +6,6 @@ import {
   Text,
   useToast,
 } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import type { AxiosError, AxiosResponse } from "axios";
 import axios from "axios";
 import { useRouter } from "next/router";
@@ -14,6 +13,7 @@ import { useEffect, useMemo, useState } from "react";
 
 import {
   useCelatoneApp,
+  useCurrentChain,
   useFaucetConfig,
   useInternalNavigate,
   useValidateAddress,
@@ -44,7 +44,7 @@ const STATUS_ICONS: Record<ResultStatus, IconKeys> = {
 
 // todo: handle token symbol by current chain
 const Faucet = () => {
-  const { address: walletAddress = "" } = useWallet();
+  const { address: walletAddress = "" } = useCurrentChain();
   const [address, setAddress] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [status, setStatus] = useState<FormStatus>({ state: "init" });
diff --git a/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx b/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx
index 6282a2308..f1632657b 100644
--- a/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx
+++ b/src/lib/pages/instantiate/component/InstantiateOffchainForm.tsx
@@ -1,9 +1,8 @@
 import { Text, Flex, Heading, Button } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import { observer } from "mobx-react-lite";
 import { useForm } from "react-hook-form";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useCurrentChain, useInternalNavigate } from "lib/app-provider";
 import { OffChainForm } from "lib/components/OffChainForm";
 import type { OffchainDetail } from "lib/components/OffChainForm";
 import { INSTANTIATED_LIST_NAME } from "lib/data";
@@ -29,7 +28,7 @@ export const InstantiateOffChainForm = observer(
     contractAddress,
     contractLabel,
   }: InstantiateOffChainFormProps) => {
-    const { address = "" } = useWallet();
+    const { address = "" } = useCurrentChain();
     const navigate = useInternalNavigate();
     const { updateContractLocalInfo } = useContractStore();
     const userKey = useUserKey();
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index 0ed96c79c..deab436cd 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -1,6 +1,5 @@
 import { Heading, Text } from "@chakra-ui/react";
 import type { InstantiateResult } from "@cosmjs/cosmwasm-stargate";
-import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 import Long from "long";
 import { useRouter } from "next/router";
@@ -14,6 +13,7 @@ import {
   useCelatoneApp,
   useLCDEndpoint,
   useValidateAddress,
+  useCurrentChain,
 } from "lib/app-provider";
 import { AssignMe } from "lib/components/AssignMe";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
@@ -71,7 +71,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
       exampleAddresses: { contract: exampleContractAddress },
     },
   } = useCelatoneApp();
-  const { address = "" } = useWallet();
+  const { address = "" } = useCurrentChain();
   const lcdEndpoint = useLCDEndpoint();
 
   const postInstantiateTx = useInstantiateTx();
diff --git a/src/lib/pages/migrate/components/MigrateContract.tsx b/src/lib/pages/migrate/components/MigrateContract.tsx
index 4c156a773..d883fedf5 100644
--- a/src/lib/pages/migrate/components/MigrateContract.tsx
+++ b/src/lib/pages/migrate/components/MigrateContract.tsx
@@ -1,6 +1,5 @@
 import { Button, Flex, Heading, Text } from "@chakra-ui/react";
 import type { StdFee } from "@cosmjs/stargate";
-import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 import Long from "long";
 import { useCallback, useEffect, useState } from "react";
@@ -10,6 +9,7 @@ import {
   useFabricateFee,
   useSimulateFeeQuery,
   useLCDEndpoint,
+  useCurrentChain,
 } from "lib/app-provider";
 import { useMigrateTx } from "lib/app-provider/tx/migrate";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
@@ -35,7 +35,7 @@ export const MigrateContract = ({
   codeIdParam,
   handleBack,
 }: MigrateContractProps) => {
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const { broadcast } = useTxBroadcast();
   const lcdEndpoint = useLCDEndpoint();
 
diff --git a/src/lib/pages/migrate/index.tsx b/src/lib/pages/migrate/index.tsx
index 7fe569014..228b77837 100644
--- a/src/lib/pages/migrate/index.tsx
+++ b/src/lib/pages/migrate/index.tsx
@@ -1,5 +1,4 @@
 import { Box, Heading, Text } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/router";
 import { useCallback, useEffect } from "react";
@@ -7,6 +6,7 @@ import { useForm } from "react-hook-form";
 
 import {
   useCelatoneApp,
+  useCurrentChain,
   useInternalNavigate,
   useLCDEndpoint,
   useWasmConfig,
@@ -39,7 +39,7 @@ const Migrate = () => {
   const navigate = useInternalNavigate();
   const lcdEndpoint = useLCDEndpoint();
 
-  const { address = "" } = useWallet();
+  const { address = "" } = useCurrentChain();
 
   const { setValue, watch } = useForm<MigratePageState>({
     mode: "all",
diff --git a/src/lib/pages/my-codes/components/MyStoredCodesSection.tsx b/src/lib/pages/my-codes/components/MyStoredCodesSection.tsx
index c91319b75..08bb0aebe 100644
--- a/src/lib/pages/my-codes/components/MyStoredCodesSection.tsx
+++ b/src/lib/pages/my-codes/components/MyStoredCodesSection.tsx
@@ -1,6 +1,6 @@
 import { Box, Flex, Heading, HStack } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 
+import { useCurrentChain } from "lib/app-provider";
 import { MyStoredCodesTable } from "lib/components/table";
 import { useUploadAccessParams } from "lib/services/proposalService";
 import type { Addr, CodeInfo } from "lib/types";
@@ -26,7 +26,7 @@ export const MyStoredCodesSection = ({
   isSearching,
 }: MyStoredCodesSectionProps) => {
   const { data } = useUploadAccessParams();
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const isAllowed = Boolean(data?.addresses?.includes(address as Addr));
 
   const isPermissionedNetwork =
diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx
index 1050c0e83..6d2b53baa 100644
--- a/src/lib/pages/past-txs/index.tsx
+++ b/src/lib/pages/past-txs/index.tsx
@@ -5,12 +5,12 @@ import {
   InputGroup,
   InputRightElement,
 } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
 import type { ChangeEvent } from "react";
 import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 
+import { useCurrentChain } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import PageContainer from "lib/components/PageContainer";
 import { Pagination } from "lib/components/pagination";
@@ -36,7 +36,7 @@ interface PastTxsState {
 
 const PastTxs = () => {
   const router = useRouter();
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
 
   const defaultValues: PastTxsState = {
     search: "",
@@ -131,7 +131,7 @@ const PastTxs = () => {
         display="flex"
         alignItems="center"
       >
-        Past Transactions
+        ß Past Transactions
       </Heading>
       <Flex my={8} gap={3}>
         <InputGroup>
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index bd95636d0..34fbe1962 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -10,7 +10,6 @@ import {
   Box,
 } from "@chakra-ui/react";
 import type { Coin, StdFee } from "@cosmjs/stargate";
-import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
 import { gzip } from "node-gzip";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -25,6 +24,7 @@ import {
 import { getAlert } from "../utils";
 import {
   useCelatoneApp,
+  useCurrentChain,
   useFabricateFee,
   useSimulateFeeForProposalStoreCode,
   useSubmitStoreCodeProposalTx,
@@ -97,7 +97,7 @@ const StoreCodeProposal = () => {
     chainConfig: { prettyName, exampleAddresses },
   } = useCelatoneApp();
   const getMaxLengthError = useGetMaxLengthError();
-  const { address: walletAddress = "" } = useWallet();
+  const { address: walletAddress = "" } = useCurrentChain();
   const fabricateFee = useFabricateFee();
   const { data: govParams } = useGovParams();
   const minDeposit = govParams?.depositParams.minDeposit;
diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index e0be53fbf..25fc5d4bb 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -9,7 +9,6 @@ import {
   AlertDescription,
 } from "@chakra-ui/react";
 import type { Coin, StdFee } from "@cosmjs/stargate";
-import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
@@ -21,6 +20,7 @@ import { SIDEBAR_WHITELIST_DETAILS } from "../constants";
 import { getAlert } from "../utils";
 import {
   useCelatoneApp,
+  useCurrentChain,
   useFabricateFee,
   useSimulateFeeQuery,
   useSubmitWhitelistProposalTx,
@@ -68,7 +68,7 @@ const ProposalToWhitelist = () => {
   const router = useRouter();
   const { constants } = useCelatoneApp();
   const getMaxLengthError = useGetMaxLengthError();
-  const { address: walletAddress = "" } = useWallet();
+  const { address: walletAddress = "" } = useCurrentChain();
   const {
     chainConfig: { prettyName },
   } = useCelatoneApp();
diff --git a/src/lib/pages/proposals/index.tsx b/src/lib/pages/proposals/index.tsx
index 91bf7bd8e..15e81768b 100644
--- a/src/lib/pages/proposals/index.tsx
+++ b/src/lib/pages/proposals/index.tsx
@@ -1,10 +1,9 @@
 import { Flex, Heading, Text, Switch } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
 import type { ChangeEvent } from "react";
 import { useState, useEffect } from "react";
 
-import { useCelatoneApp } from "lib/app-provider";
+import { useCelatoneApp, useCurrentChain } from "lib/app-provider";
 import { NewProposalButton } from "lib/components/button/NewProposalButton";
 import InputWithIcon from "lib/components/InputWithIcon";
 import PageContainer from "lib/components/PageContainer";
@@ -28,7 +27,7 @@ const Proposals = () => {
   const [statuses, setStatuses] = useState<ProposalStatus[]>([]);
   const [types, setTypes] = useState<ProposalType[]>([]);
 
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const [search, setSearch] = useState("");
   const [proposer, setProposer] = useState<Option<Addr>>();
   const [isSelected, setIsSelected] = useState(false);
diff --git a/src/lib/pages/query/components/QueryArea.tsx b/src/lib/pages/query/components/QueryArea.tsx
index ed1254d1e..bcbd4d8eb 100644
--- a/src/lib/pages/query/components/QueryArea.tsx
+++ b/src/lib/pages/query/components/QueryArea.tsx
@@ -1,11 +1,10 @@
 import { Box, Flex, Spacer, Button, ButtonGroup, Text } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 
-import { useLCDEndpoint } from "lib/app-provider";
+import { useCurrentChain, useLCDEndpoint } from "lib/app-provider";
 import { ContractCmdButton } from "lib/components/ContractCmdButton";
 import { CopyButton } from "lib/components/copy";
 import { CustomIcon } from "lib/components/icon";
@@ -44,7 +43,7 @@ export const QueryArea = ({
 
   const userKey = useUserKey();
   const { addActivity } = useContractStore();
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
 
   const [msg, setMsg] = useState("");
   const [res, setRes] = useState("");
diff --git a/src/lib/pages/upload/index.tsx b/src/lib/pages/upload/index.tsx
index ef082dbe6..9452005ff 100644
--- a/src/lib/pages/upload/index.tsx
+++ b/src/lib/pages/upload/index.tsx
@@ -1,9 +1,12 @@
 import { Heading, Text } from "@chakra-ui/react";
-import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
+import {
+  useCurrentChain,
+  useInternalNavigate,
+  useWasmConfig,
+} from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { Stepper } from "lib/components/stepper";
 import { UploadSection } from "lib/components/upload/UploadSection";
@@ -15,7 +18,7 @@ import { AccessConfigPermission } from "lib/types";
 
 const Upload = () => {
   const router = useRouter();
-  const { address } = useWallet();
+  const { address } = useCurrentChain();
   const navigate = useInternalNavigate();
   const { data, isLoading } = useUploadAccessParams();
 
diff --git a/src/lib/types/converter.ts b/src/lib/types/converter.ts
index 0fde10a29..6a875f199 100644
--- a/src/lib/types/converter.ts
+++ b/src/lib/types/converter.ts
@@ -1,9 +1,14 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export type SnakeToCamelCase<S extends string> =
   S extends `${infer T}_${infer U}`
     ? `${T}${Capitalize<SnakeToCamelCase<U>>}`
     : S;
 
-export type SnakeToCamelCaseNested<T> = T extends object
+export type SnakeToCamelCaseNested<T> = T extends (...args: any[]) => any
+  ? T
+  : T extends Array<infer R>
+  ? Array<SnakeToCamelCaseNested<R>>
+  : T extends Record<string, any>
   ? {
       [K in keyof T as SnakeToCamelCase<K & string>]: T[K] extends Array<
         infer R
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index eeaf197c0..1e1a37189 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,6 +1,6 @@
 import type { EndpointOptions } from "@cosmos-kit/core";
 import { wallets } from "@cosmos-kit/keplr";
-import { WalletProvider } from "@cosmos-kit/react";
+import { ChainProvider } from "@cosmos-kit/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { assets, chains } from "chain-registry";
 import localforage from "localforage";
@@ -70,11 +70,12 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
       </Script>
 
       <QueryClientProvider client={queryClient}>
-        <WalletProvider
+        <ChainProvider
           chains={chains}
           assetLists={assets}
           wallets={wallets}
           endpointOptions={availableChainsEndpoints}
+          wrappedWithChakra
         >
           <StoreProvider>
             <AppProvider>
@@ -94,7 +95,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
               </TxBroadcastProvider>
             </AppProvider>
           </StoreProvider>
-        </WalletProvider>
+        </ChainProvider>
       </QueryClientProvider>
     </Chakra>
   );
diff --git a/yarn.lock b/yarn.lock
index 3c8e9740e..90d5d8872 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -209,7 +209,14 @@
   dependencies:
     "@babel/types" "^7.18.9"
 
-"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6":
+"@babel/helper-module-imports@^7.16.7":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz#1a8f4c9f4027d23f520bd76b364d44434a72660c"
+  integrity sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-module-imports@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz"
   integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
@@ -300,6 +307,11 @@
   resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz"
   integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
 
+"@babel/helper-string-parser@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
+  integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
+
 "@babel/helper-validator-identifier@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz"
@@ -310,6 +322,11 @@
   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz"
   integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
 
+"@babel/helper-validator-identifier@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz#9544ef6a33999343c8740fa51350f30eeaaaf193"
+  integrity sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==
+
 "@babel/helper-validator-option@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz"
@@ -376,7 +393,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-syntax-jsx@^7.0.0", "@babel/plugin-syntax-jsx@^7.17.12", "@babel/plugin-syntax-jsx@^7.18.6":
+"@babel/plugin-syntax-jsx@^7.0.0", "@babel/plugin-syntax-jsx@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz"
   integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
@@ -557,14 +574,28 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3":
+"@babel/runtime@7.11.2":
+  version "7.11.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
+  integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3":
   version "7.19.0"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz"
   integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.19.0", "@babel/runtime@^7.19.4":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec"
+  integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
+"@babel/runtime@^7.19.4":
   version "7.20.0"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.0.tgz"
   integrity sha512-NDYdls71fTXoU8TZHfbBWg7DiZfNzClcKui/+kyi6ppD2L1qnWW3VV6CjtaBXSUGGhiTWJ6ereOIkUvenif66Q==
@@ -637,27 +668,36 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
-"@chain-registry/keplr@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@chain-registry/keplr/-/keplr-1.0.0.tgz"
-  integrity sha512-Eja3r5TskhA3/iA0qYPM2lhOIjZd/Ug8ppFP4b88PZqbUmvgjPBcfn2TLoCOIU1FxeYDqQrG5dJ+BqBz1UVHgA==
+"@babel/types@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.5.tgz#cd93eeaab025880a3a47ec881f4b096a5b786fbe"
+  integrity sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.5"
+    to-fast-properties "^2.0.0"
+
+"@chain-registry/keplr@1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@chain-registry/keplr/-/keplr-1.8.0.tgz#1f99b9b93befb481d3a182c89218cb51ba893ce2"
+  integrity sha512-P1IyZihR/rZUBgFZm5DGs4LAVpMSJ7QfQ5YV1ofpMNeB0iXEEGC4BuuT8NonwgAyWGOw9/c8Z/cNN8f9m5nFkQ==
   dependencies:
-    "@babel/runtime" "^7.19.0"
-    "@chain-registry/types" "^0.11.0"
-    "@keplr-wallet/cosmos" "^0.10.24"
-    "@keplr-wallet/crypto" "^0.10.24"
-    semver "^7.3.7"
+    "@babel/runtime" "^7.19.4"
+    "@chain-registry/types" "^0.13.1"
+    "@keplr-wallet/cosmos" "0.11.16"
+    "@keplr-wallet/crypto" "0.11.16"
+    semver "^7.3.8"
 
-"@chain-registry/types@^0.11.0":
-  version "0.11.1"
-  resolved "https://registry.npmjs.org/@chain-registry/types/-/types-0.11.1.tgz"
-  integrity sha512-2zZkjAjK0X+aKef/1kvRs9CoWPFTVt/KUAq1HDajI30nqkwCMs2bGidtRugSbdEG8VtZvUlKg8TAtN69yI8gdw==
+"@chain-registry/types@0.13.0":
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/@chain-registry/types/-/types-0.13.0.tgz#ab910f229579b33c152de468c3eead562f7aee4c"
+  integrity sha512-2xgKaRK6T3qkkzWkj2n5nHzGNl+0RuDDB8nS+oyssBe4tCq835yMkxrVAOivFfEm5YGl92FcaVDLrzmfPUO0MA==
   dependencies:
-    "@babel/runtime" "^7.19.0"
-    "@keplr-wallet/cosmos" "^0.10.24"
-    "@keplr-wallet/crypto" "^0.10.24"
+    "@babel/runtime" "^7.19.4"
+    "@keplr-wallet/cosmos" "^0.11.12"
+    "@keplr-wallet/crypto" "^0.11.12"
 
-"@chain-registry/types@^0.13.1":
+"@chain-registry/types@0.13.1", "@chain-registry/types@^0.13.1":
   version "0.13.1"
   resolved "https://registry.npmjs.org/@chain-registry/types/-/types-0.13.1.tgz"
   integrity sha512-NF4x7pqkQJ/zSQLoT28sYlBdzWUyCTFvWgVE9hJ2jkirX+It9VUHP5j1wtTq+vxQ74SZk2V8vRBo2uuoEYBB1A==
@@ -683,6 +723,19 @@
     "@chakra-ui/react-use-merge-refs" "2.0.4"
     "@chakra-ui/transition" "2.0.11"
 
+"@chakra-ui/accordion@2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/accordion/-/accordion-2.2.0.tgz#a38ed8e7d0a7ccc6910282f913c42cf6deea7215"
+  integrity sha512-2IK1iLzTZ22u8GKPPPn65mqJdZidn4AvkgAbv17ISdKA07VHJ8jSd4QF1T5iCXjKfZ0XaXozmhP4kDhjwF2IbQ==
+  dependencies:
+    "@chakra-ui/descendant" "3.0.14"
+    "@chakra-ui/icon" "3.0.16"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/react-use-controllable-state" "2.0.8"
+    "@chakra-ui/react-use-merge-refs" "2.0.7"
+    "@chakra-ui/shared-utils" "2.0.5"
+    "@chakra-ui/transition" "2.0.16"
+
 "@chakra-ui/alert@2.0.11":
   version "2.0.11"
   resolved "https://registry.npmjs.org/@chakra-ui/alert/-/alert-2.0.11.tgz"
@@ -692,11 +745,26 @@
     "@chakra-ui/react-context" "2.0.4"
     "@chakra-ui/spinner" "2.0.10"
 
+"@chakra-ui/alert@2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/alert/-/alert-2.1.0.tgz#7a234ac6426231b39243088648455cbcf1cbdf24"
+  integrity sha512-OcfHwoXI5VrmM+tHJTHT62Bx6TfyfCxSa0PWUOueJzSyhlUOKBND5we6UtrOB7D0jwX45qKKEDJOLG5yCG21jQ==
+  dependencies:
+    "@chakra-ui/icon" "3.0.16"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/shared-utils" "2.0.5"
+    "@chakra-ui/spinner" "2.0.13"
+
 "@chakra-ui/anatomy@2.0.7":
   version "2.0.7"
   resolved "https://registry.npmjs.org/@chakra-ui/anatomy/-/anatomy-2.0.7.tgz"
   integrity sha512-vzcB2gcsGCxhrKbldQQV6LnBPys4eSSsH2UA2mLsT+J3WlXw0aodZw0eE/nH7yLxe4zaQ4Gnc0KjkFW4EWNKSg==
 
+"@chakra-ui/anatomy@2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/anatomy/-/anatomy-2.1.2.tgz#ea66b1841e7195da08ddc862daaa3f3e56e565f5"
+  integrity sha512-pKfOS/mztc4sUXHNc8ypJ1gPWSolWT770jrgVRfolVbYlki8y5Y+As996zMF6k5lewTu6j9DQequ7Cc9a69IVQ==
+
 "@chakra-ui/anatomy@^2.1.0":
   version "2.1.0"
   resolved "https://registry.npmjs.org/@chakra-ui/anatomy/-/anatomy-2.1.0.tgz"
@@ -711,6 +779,16 @@
     "@chakra-ui/react-children-utils" "2.0.3"
     "@chakra-ui/react-context" "2.0.4"
 
+"@chakra-ui/avatar@2.2.11":
+  version "2.2.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/avatar/-/avatar-2.2.11.tgz#1e5ded963ab3209fe1d16bba21f0aec616be56da"
+  integrity sha512-CJFkoWvlCTDJTUBrKA/aVyG5Zz6TBEIVmmsJtqC6VcQuVDTxkWod8ruXnjb0LT2DUveL7xR5qZM9a5IXcsH3zg==
+  dependencies:
+    "@chakra-ui/image" "2.0.16"
+    "@chakra-ui/react-children-utils" "2.0.6"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/breadcrumb@2.1.0":
   version "2.1.0"
   resolved "https://registry.npmjs.org/@chakra-ui/breadcrumb/-/breadcrumb-2.1.0.tgz"
@@ -719,11 +797,27 @@
     "@chakra-ui/react-children-utils" "2.0.3"
     "@chakra-ui/react-context" "2.0.4"
 
+"@chakra-ui/breadcrumb@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/breadcrumb/-/breadcrumb-2.1.5.tgz#a43b22cc8005291a615696a8c88efc37064562f3"
+  integrity sha512-p3eQQrHQBkRB69xOmNyBJqEdfCrMt+e0eOH+Pm/DjFWfIVIbnIaFbmDCeWClqlLa21Ypc6h1hR9jEmvg8kmOog==
+  dependencies:
+    "@chakra-ui/react-children-utils" "2.0.6"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/breakpoint-utils@2.0.4":
   version "2.0.4"
   resolved "https://registry.npmjs.org/@chakra-ui/breakpoint-utils/-/breakpoint-utils-2.0.4.tgz"
   integrity sha512-SUUEYnA/FCIKYDHMuEXcnBMwet+6RAAjQ+CqGD1hlwKPTfh7EK9fS8FoVAJa9KpRKAc/AawzPkgwvorzPj8NSg==
 
+"@chakra-ui/breakpoint-utils@2.0.8":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/breakpoint-utils/-/breakpoint-utils-2.0.8.tgz#750d3712668b69f6e8917b45915cee0e08688eed"
+  integrity sha512-Pq32MlEX9fwb5j5xx8s18zJMARNHlQZH2VH1RZgfgRDpp7DcEgtRW5AInfN5CfqdHLO1dGxA7I3MqEuL5JnIsA==
+  dependencies:
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/button@2.0.11":
   version "2.0.11"
   resolved "https://registry.npmjs.org/@chakra-ui/button/-/button-2.0.11.tgz"
@@ -733,6 +827,23 @@
     "@chakra-ui/react-use-merge-refs" "2.0.4"
     "@chakra-ui/spinner" "2.0.10"
 
+"@chakra-ui/button@2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/button/-/button-2.0.18.tgz#c13d2e404e22a9873ba5373fde494bedafe32fdd"
+  integrity sha512-E3c99+lOm6ou4nQVOTLkG+IdOPMjsQK+Qe7VyP8A/xeAMFONuibrWPRPpprr4ZkB4kEoLMfNuyH2+aEza3ScUA==
+  dependencies:
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/react-use-merge-refs" "2.0.7"
+    "@chakra-ui/shared-utils" "2.0.5"
+    "@chakra-ui/spinner" "2.0.13"
+
+"@chakra-ui/card@2.1.6":
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/card/-/card-2.1.6.tgz#27176bdee363ecab7d563c4997c4b2fe9e835ecc"
+  integrity sha512-fFd/WAdRNVY/WOSQv4skpy0WeVhhI0f7dTY1Sm0jVl0KLmuP/GnpsWtKtqWjNcV00K963EXDyhlk6+9oxbP4gw==
+  dependencies:
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/card@^2.1.1":
   version "2.1.1"
   resolved "https://registry.npmjs.org/@chakra-ui/card/-/card-2.1.1.tgz"
@@ -740,6 +851,23 @@
   dependencies:
     "@chakra-ui/react-context" "2.0.5"
 
+"@chakra-ui/checkbox@2.2.15":
+  version "2.2.15"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/checkbox/-/checkbox-2.2.15.tgz#e5ff65159f698d50edecee6b661b87e341eace70"
+  integrity sha512-Ju2yQjX8azgFa5f6VLPuwdGYobZ+rdbcYqjiks848JvPc75UsPhpS05cb4XlrKT7M16I8txDA5rPJdqqFicHCA==
+  dependencies:
+    "@chakra-ui/form-control" "2.0.18"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/react-types" "2.0.7"
+    "@chakra-ui/react-use-callback-ref" "2.0.7"
+    "@chakra-ui/react-use-controllable-state" "2.0.8"
+    "@chakra-ui/react-use-merge-refs" "2.0.7"
+    "@chakra-ui/react-use-safe-layout-effect" "2.0.5"
+    "@chakra-ui/react-use-update-effect" "2.0.7"
+    "@chakra-ui/shared-utils" "2.0.5"
+    "@chakra-ui/visually-hidden" "2.0.15"
+    "@zag-js/focus-visible" "0.2.2"
+
 "@chakra-ui/checkbox@2.2.2":
   version "2.2.2"
   resolved "https://registry.npmjs.org/@chakra-ui/checkbox/-/checkbox-2.2.2.tgz"
@@ -763,6 +891,14 @@
   dependencies:
     "@chakra-ui/react-use-merge-refs" "2.0.4"
 
+"@chakra-ui/clickable@2.0.14":
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/clickable/-/clickable-2.0.14.tgz#88093008672a2a30bdd2a30ff815dcc2c88c01a5"
+  integrity sha512-jfsM1qaD74ZykLHmvmsKRhDyokLUxEfL8Il1VoZMNX5RBI0xW/56vKpLTFF/v/+vLPLS+Te2cZdD4+2O+G6ulA==
+  dependencies:
+    "@chakra-ui/react-use-merge-refs" "2.0.7"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/close-button@2.0.11":
   version "2.0.11"
   resolved "https://registry.npmjs.org/@chakra-ui/close-button/-/close-button-2.0.11.tgz"
@@ -770,6 +906,20 @@
   dependencies:
     "@chakra-ui/icon" "3.0.11"
 
+"@chakra-ui/close-button@2.0.17":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/close-button/-/close-button-2.0.17.tgz#d43d3a2ea1f08250f8d0da7704baf0e1fbd91b4b"
+  integrity sha512-05YPXk456t1Xa3KpqTrvm+7smx+95dmaPiwjiBN3p7LHUQVHJd8ZXSDB0V+WKi419k3cVQeJUdU/azDO2f40sw==
+  dependencies:
+    "@chakra-ui/icon" "3.0.16"
+
+"@chakra-ui/color-mode@2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/color-mode/-/color-mode-2.1.12.tgz#c0caeadd5f87fadbeefc6826beabac6c4a88d8f5"
+  integrity sha512-sYyfJGDoJSLYO+V2hxV9r033qhte5Nw/wAn5yRGGZnEEN1dKPEdWQ3XZvglWSDTNd0w9zkoH2w6vP4FBBYb/iw==
+  dependencies:
+    "@chakra-ui/react-use-safe-layout-effect" "2.0.5"
+
 "@chakra-ui/color-mode@2.1.9":
   version "2.1.9"
   resolved "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-2.1.9.tgz"
@@ -782,6 +932,11 @@
   resolved "https://registry.npmjs.org/@chakra-ui/control-box/-/control-box-2.0.10.tgz"
   integrity sha512-sHmZanFLEv4IDATl19ZTxq8Bi8PtjfvnsN6xF4k7JGSYUnk1YXUf1coyW7WKdcsczOASrMikfsLc3iEVAzx4Ng==
 
+"@chakra-ui/control-box@2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/control-box/-/control-box-2.0.13.tgz#ffe9634d0c3aecb8e1eb7da19e64fb3d2b181d03"
+  integrity sha512-FEyrU4crxati80KUF/+1Z1CU3eZK6Sa0Yv7Z/ydtz9/tvGblXW9NFanoomXAOvcIFLbaLQPPATm9Gmpr7VG05A==
+
 "@chakra-ui/counter@2.0.10":
   version "2.0.10"
   resolved "https://registry.npmjs.org/@chakra-ui/counter/-/counter-2.0.10.tgz"
@@ -790,11 +945,25 @@
     "@chakra-ui/number-utils" "2.0.4"
     "@chakra-ui/react-use-callback-ref" "2.0.4"
 
+"@chakra-ui/counter@2.0.14":
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/counter/-/counter-2.0.14.tgz#6e37a863afd2e87d7c94208245e81777640e76e2"
+  integrity sha512-KxcSRfUbb94dP77xTip2myoE7P2HQQN4V5fRJmNAGbzcyLciJ+aDylUU/UxgNcEjawUp6Q242NbWb1TSbKoqog==
+  dependencies:
+    "@chakra-ui/number-utils" "2.0.7"
+    "@chakra-ui/react-use-callback-ref" "2.0.7"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/css-reset@2.0.8":
   version "2.0.8"
   resolved "https://registry.npmjs.org/@chakra-ui/css-reset/-/css-reset-2.0.8.tgz"
   integrity sha512-VuDD1rk1pFc+dItk4yUcstyoC9D2B35hatHDBtlPMqTczFAzpbgVJJYgEHANatXGfulM5SdckmYEIJ3Tac1Rtg==
 
+"@chakra-ui/css-reset@2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/css-reset/-/css-reset-2.1.2.tgz#a4cd1601e8376a74b8dd62a9089cb8aaac1ee800"
+  integrity sha512-4ySTLd+3iRpp4lX0yI9Yo2uQm2f+qwYGNOZF0cNcfN+4UJCd3IsaWxYRR/Anz+M51NVldZbYzC+TEYC/kpJc4A==
+
 "@chakra-ui/descendant@3.0.10":
   version "3.0.10"
   resolved "https://registry.npmjs.org/@chakra-ui/descendant/-/descendant-3.0.10.tgz"
@@ -803,11 +972,24 @@
     "@chakra-ui/react-context" "2.0.4"
     "@chakra-ui/react-use-merge-refs" "2.0.4"
 
+"@chakra-ui/descendant@3.0.14":
+  version "3.0.14"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/descendant/-/descendant-3.0.14.tgz#fe8bac3f0e1ffe562e3e73eac393dbf222d57e13"
+  integrity sha512-+Ahvp9H4HMpfScIv9w1vaecGz7qWAaK1YFHHolz/SIsGLaLGlbdp+5UNabQC7L6TUnzzJDQDxzwif78rTD7ang==
+  dependencies:
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/react-use-merge-refs" "2.0.7"
+
 "@chakra-ui/dom-utils@2.0.3":
   version "2.0.3"
   resolved "https://registry.npmjs.org/@chakra-ui/dom-utils/-/dom-utils-2.0.3.tgz"
   integrity sha512-aeGlRmTxcv0cvW44DyeZHru1i68ZDQsXpfX2dnG1I1yBlT6GlVx1xYjCULis9mjhgvd2O3NfcYPRTkjNWTDUbA==
 
+"@chakra-ui/dom-utils@2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/dom-utils/-/dom-utils-2.1.0.tgz#d15df89e458ef19756db04c7cfd084eb552454f0"
+  integrity sha512-ZmF2qRa1QZ0CMLU8M1zCfmw29DmPNtfjR9iTo74U5FPr3i1aoAh7fbJ4qAlZ197Xw9eAW28tvzQuoVWeL5C7fQ==
+
 "@chakra-ui/editable@2.0.13":
   version "2.0.13"
   resolved "https://registry.npmjs.org/@chakra-ui/editable/-/editable-2.0.13.tgz"
@@ -823,11 +1005,31 @@
     "@chakra-ui/react-use-update-effect" "2.0.4"
     "@chakra-ui/shared-utils" "2.0.2"
 
+"@chakra-ui/editable@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/editable/-/editable-3.0.0.tgz#b61d4fba5a581b41856ebd85fd5d17c96a224323"
+  integrity sha512-q/7C/TM3iLaoQKlEiM8AY565i9NoaXtS6N6N4HWIEL5mZJPbMeHKxrCHUZlHxYuQJqFOGc09ZPD9fAFx1GkYwQ==
+  dependencies:
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/react-types" "2.0.7"
+    "@chakra-ui/react-use-callback-ref" "2.0.7"
+    "@chakra-ui/react-use-controllable-state" "2.0.8"
+    "@chakra-ui/react-use-focus-on-pointer-down" "2.0.6"
+    "@chakra-ui/react-use-merge-refs" "2.0.7"
+    "@chakra-ui/react-use-safe-layout-effect" "2.0.5"
+    "@chakra-ui/react-use-update-effect" "2.0.7"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/event-utils@2.0.5":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@chakra-ui/event-utils/-/event-utils-2.0.5.tgz"
   integrity sha512-VXoOAIsM0PFKDlhm+EZxkWlUXd5UFTb/LTux3y3A+S9G5fDxLRvpiLWByPUgTFTCDFcgTCF+YnQtdWJB4DLyxg==
 
+"@chakra-ui/event-utils@2.0.8":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/event-utils/-/event-utils-2.0.8.tgz#e6439ba200825a2f15d8f1973d267d1c00a6d1b4"
+  integrity sha512-IGM/yGUHS+8TOQrZGpAKOJl/xGBrmRYJrmbHfUE7zrG3PpQyXvbLDP1M+RggkCFVgHlJi2wpYIf0QtQlU0XZfw==
+
 "@chakra-ui/focus-lock@2.0.12":
   version "2.0.12"
   resolved "https://registry.npmjs.org/@chakra-ui/focus-lock/-/focus-lock-2.0.12.tgz"
@@ -836,6 +1038,14 @@
     "@chakra-ui/dom-utils" "2.0.3"
     react-focus-lock "^2.9.1"
 
+"@chakra-ui/focus-lock@2.0.17":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/focus-lock/-/focus-lock-2.0.17.tgz#c1896a80896e752b88e8681f9c9d626046de6dd5"
+  integrity sha512-V+m4Ml9E8QY66DUpHX/imInVvz5XJ5zx59Tl0aNancXgeVY1Rt/ZdxuZdPLCAmPC/MF3GUOgnEA+WU8i+VL6Gw==
+  dependencies:
+    "@chakra-ui/dom-utils" "2.1.0"
+    react-focus-lock "^2.9.4"
+
 "@chakra-ui/form-control@2.0.11":
   version "2.0.11"
   resolved "https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-2.0.11.tgz"
@@ -846,6 +1056,17 @@
     "@chakra-ui/react-types" "2.0.3"
     "@chakra-ui/react-use-merge-refs" "2.0.4"
 
+"@chakra-ui/form-control@2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/form-control/-/form-control-2.0.18.tgz#1923f293afde70b2b07ca731d98fef3660098c56"
+  integrity sha512-I0a0jG01IAtRPccOXSNugyRdUAe8Dy40ctqedZvznMweOXzbMCF1m+sHPLdWeWC/VI13VoAispdPY0/zHOdjsQ==
+  dependencies:
+    "@chakra-ui/icon" "3.0.16"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/react-types" "2.0.7"
+    "@chakra-ui/react-use-merge-refs" "2.0.7"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/hooks@2.1.0":
   version "2.1.0"
   resolved "https://registry.npmjs.org/@chakra-ui/hooks/-/hooks-2.1.0.tgz"
@@ -856,6 +1077,16 @@
     compute-scroll-into-view "1.0.14"
     copy-to-clipboard "3.3.1"
 
+"@chakra-ui/hooks@2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/hooks/-/hooks-2.2.0.tgz#f779bf85542dacd607abe7e67f4571cf8a1102fa"
+  integrity sha512-GZE64mcr20w+3KbCUPqQJHHmiFnX5Rcp8jS3YntGA4D5X2qU85jka7QkjfBwv/iduZ5Ei0YpCMYGCpi91dhD1Q==
+  dependencies:
+    "@chakra-ui/react-utils" "2.0.12"
+    "@chakra-ui/utils" "2.0.15"
+    compute-scroll-into-view "1.0.20"
+    copy-to-clipboard "3.3.3"
+
 "@chakra-ui/icon@3.0.11":
   version "3.0.11"
   resolved "https://registry.npmjs.org/@chakra-ui/icon/-/icon-3.0.11.tgz"
@@ -863,6 +1094,13 @@
   dependencies:
     "@chakra-ui/shared-utils" "2.0.2"
 
+"@chakra-ui/icon@3.0.16":
+  version "3.0.16"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-3.0.16.tgz#6413ec637c0c3acc204301485f05451b5bcd6ba4"
+  integrity sha512-RpA1X5Ptz8Mt39HSyEIW1wxAz2AXyf9H0JJ5HVx/dBdMZaGMDJ0HyyPBVci0m4RCoJuyG1HHG/DXJaVfUTVAeg==
+  dependencies:
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/icons@^2.0.11":
   version "2.0.11"
   resolved "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.0.11.tgz"
@@ -877,6 +1115,14 @@
   dependencies:
     "@chakra-ui/react-use-safe-layout-effect" "2.0.2"
 
+"@chakra-ui/image@2.0.16":
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-2.0.16.tgz#0e3a48c3caa6dc1d340502ea96766d9ef31e27e8"
+  integrity sha512-iFypk1slgP3OK7VIPOtkB0UuiqVxNalgA59yoRM43xLIeZAEZpKngUVno4A2kFS61yKN0eIY4hXD3Xjm+25EJA==
+  dependencies:
+    "@chakra-ui/react-use-safe-layout-effect" "2.0.5"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/input@2.0.12":
   version "2.0.12"
   resolved "https://registry.npmjs.org/@chakra-ui/input/-/input-2.0.12.tgz"
@@ -888,6 +1134,17 @@
     "@chakra-ui/react-context" "2.0.4"
     "@chakra-ui/shared-utils" "2.0.2"
 
+"@chakra-ui/input@2.0.22":
+  version "2.0.22"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/input/-/input-2.0.22.tgz#4c1f166f53555c698bb65950772314f78c147450"
+  integrity sha512-dCIC0/Q7mjZf17YqgoQsnXn0bus6vgriTRn8VmxOc+WcVl+KBSTBWujGrS5yu85WIFQ0aeqQvziDnDQybPqAbA==
+  dependencies:
+    "@chakra-ui/form-control" "2.0.18"
+    "@chakra-ui/object-utils" "2.1.0"
+    "@chakra-ui/react-children-utils" "2.0.6"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/layout@2.1.9":
   version "2.1.9"
   resolved "https://registry.npmjs.org/@chakra-ui/layout/-/layout-2.1.9.tgz"
@@ -900,16 +1157,47 @@
     "@chakra-ui/react-context" "2.0.4"
     "@chakra-ui/shared-utils" "2.0.2"
 
+"@chakra-ui/layout@2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/layout/-/layout-2.2.0.tgz#a0832ba419743d8d7e442acfce59740626664d2f"
+  integrity sha512-WvfsWQjqzbCxv7pbpPGVKxj9eQr7MC2i37ag4Wn7ClIG7uPuwHYTUWOnjnu27O3H/zA4cRVZ4Hs3GpSPbojZFQ==
+  dependencies:
+    "@chakra-ui/breakpoint-utils" "2.0.8"
+    "@chakra-ui/icon" "3.0.16"
+    "@chakra-ui/object-utils" "2.1.0"
+    "@chakra-ui/react-children-utils" "2.0.6"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/lazy-utils@2.0.2":
   version "2.0.2"
   resolved "https://registry.npmjs.org/@chakra-ui/lazy-utils/-/lazy-utils-2.0.2.tgz"
   integrity sha512-MTxutBJZvqNNqrrS0722cI7qrnGu0yUQpIebmTxYwI+F3cOnPEKf5Ni+hrA8hKcw4XJhSY4npAPPYu1zJbOV4w==
 
+"@chakra-ui/lazy-utils@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/lazy-utils/-/lazy-utils-2.0.5.tgz#363c3fa1d421362790b416ffa595acb835e1ae5b"
+  integrity sha512-UULqw7FBvcckQk2n3iPO56TMJvDsNv0FKZI6PlUNJVaGsPbsYxK/8IQ60vZgaTVPtVcjY6BE+y6zg8u9HOqpyg==
+
 "@chakra-ui/live-region@2.0.10":
   version "2.0.10"
   resolved "https://registry.npmjs.org/@chakra-ui/live-region/-/live-region-2.0.10.tgz"
   integrity sha512-eQ2ZIreR/plzi/KGszDYTi1TvIyGEBcPiWP52BQOS7xwpzb1vsoR1FgFAIELxAGJvKnMUs+9qVogfyRBX8PdOg==
 
+"@chakra-ui/live-region@2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/live-region/-/live-region-2.0.13.tgz#1d00a637b74372d1ee0b215c649ebd4a33893e58"
+  integrity sha512-Ja+Slk6ZkxSA5oJzU2VuGU7TpZpbMb/4P4OUhIf2D30ctmIeXkxTWw1Bs1nGJAVtAPcGS5sKA+zb89i8g+0cTQ==
+
+"@chakra-ui/media-query@3.2.12":
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/media-query/-/media-query-3.2.12.tgz#75e31f3c88818e687a4d90a2993286c2c3ca2453"
+  integrity sha512-8pSLDf3oxxhFrhd40rs7vSeIBfvOmIKHA7DJlGUC/y+9irD24ZwgmCtFnn+y3gI47hTJsopbSX+wb8nr7XPswA==
+  dependencies:
+    "@chakra-ui/breakpoint-utils" "2.0.8"
+    "@chakra-ui/react-env" "3.0.0"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/media-query@3.2.7":
   version "3.2.7"
   resolved "https://registry.npmjs.org/@chakra-ui/media-query/-/media-query-3.2.7.tgz"
@@ -918,6 +1206,27 @@
     "@chakra-ui/breakpoint-utils" "2.0.4"
     "@chakra-ui/react-env" "2.0.10"
 
+"@chakra-ui/menu@2.1.15":
+  version "2.1.15"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/menu/-/menu-2.1.15.tgz#116520a2746d848e2a44fdbf03d66353cd1e1b39"
+  integrity sha512-+1fh7KBKZyhy8wi7Q6nQAzrvjM6xggyhGMnSna0rt6FJVA2jlfkjb5FozyIVPnkfJKjkKd8THVhrs9E7pHNV/w==
+  dependencies:
+    "@chakra-ui/clickable" "2.0.14"
+    "@chakra-ui/descendant" "3.0.14"
+    "@chakra-ui/lazy-utils" "2.0.5"
+    "@chakra-ui/popper" "3.0.14"
+    "@chakra-ui/react-children-utils" "2.0.6"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/react-use-animation-state" "2.0.9"
+    "@chakra-ui/react-use-controllable-state" "2.0.8"
+    "@chakra-ui/react-use-disclosure" "2.0.8"
+    "@chakra-ui/react-use-focus-effect" "2.0.11"
+    "@chakra-ui/react-use-merge-refs" "2.0.7"
+    "@chakra-ui/react-use-outside-click" "2.1.0"
+    "@chakra-ui/react-use-update-effect" "2.0.7"
+    "@chakra-ui/shared-utils" "2.0.5"
+    "@chakra-ui/transition" "2.0.16"
+
 "@chakra-ui/menu@2.1.2":
   version "2.1.2"
   resolved "https://registry.npmjs.org/@chakra-ui/menu/-/menu-2.1.2.tgz"
@@ -938,6 +1247,22 @@
     "@chakra-ui/react-use-update-effect" "2.0.4"
     "@chakra-ui/transition" "2.0.11"
 
+"@chakra-ui/modal@2.2.12":
+  version "2.2.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/modal/-/modal-2.2.12.tgz#8c6dc66a6db4abdaf6f5e0dae70183ee41ce361a"
+  integrity sha512-F1nNmYGvyqlmxidbwaBM3y57NhZ/Qeyc8BE9tb1FL1v9nxQhkfrPvMQ9miK0O1syPN6aZ5MMj+uD3AsRFE+/tA==
+  dependencies:
+    "@chakra-ui/close-button" "2.0.17"
+    "@chakra-ui/focus-lock" "2.0.17"
+    "@chakra-ui/portal" "2.0.16"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/react-types" "2.0.7"
+    "@chakra-ui/react-use-merge-refs" "2.0.7"
+    "@chakra-ui/shared-utils" "2.0.5"
+    "@chakra-ui/transition" "2.0.16"
+    aria-hidden "^1.2.2"
+    react-remove-scroll "^2.5.5"
+
 "@chakra-ui/modal@2.2.2":
   version "2.2.2"
   resolved "https://registry.npmjs.org/@chakra-ui/modal/-/modal-2.2.2.tgz"
@@ -970,16 +1295,44 @@
     "@chakra-ui/react-use-safe-layout-effect" "2.0.2"
     "@chakra-ui/react-use-update-effect" "2.0.4"
 
+"@chakra-ui/number-input@2.0.19":
+  version "2.0.19"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/number-input/-/number-input-2.0.19.tgz#82d4522036904c04d07e7050822fc522f9b32233"
+  integrity sha512-HDaITvtMEqOauOrCPsARDxKD9PSHmhWywpcyCSOX0lMe4xx2aaGhU0QQFhsJsykj8Er6pytMv6t0KZksdDv3YA==
+  dependencies:
+    "@chakra-ui/counter" "2.0.14"
+    "@chakra-ui/form-control" "2.0.18"
+    "@chakra-ui/icon" "3.0.16"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/react-types" "2.0.7"
+    "@chakra-ui/react-use-callback-ref" "2.0.7"
+    "@chakra-ui/react-use-event-listener" "2.0.7"
+    "@chakra-ui/react-use-interval" "2.0.5"
+    "@chakra-ui/react-use-merge-refs" "2.0.7"
+    "@chakra-ui/react-use-safe-layout-effect" "2.0.5"
+    "@chakra-ui/react-use-update-effect" "2.0.7"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/number-utils@2.0.4":
   version "2.0.4"
   resolved "https://registry.npmjs.org/@chakra-ui/number-utils/-/number-utils-2.0.4.tgz"
   integrity sha512-MdYd29GboBoKaXY9jhbY0Wl+0NxG1t/fa32ZSIbU6VrfMsZuAMl4NEJsz7Xvhy50fummLdKn5J6HFS7o5iyIgw==
 
+"@chakra-ui/number-utils@2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/number-utils/-/number-utils-2.0.7.tgz#aaee979ca2fb1923a0373a91619473811315db11"
+  integrity sha512-yOGxBjXNvLTBvQyhMDqGU0Oj26s91mbAlqKHiuw737AXHt0aPllOthVUqQMeaYLwLCjGMg0jtI7JReRzyi94Dg==
+
 "@chakra-ui/object-utils@2.0.4":
   version "2.0.4"
   resolved "https://registry.npmjs.org/@chakra-ui/object-utils/-/object-utils-2.0.4.tgz"
   integrity sha512-sY98L4v2wcjpwRX8GCXqT+WzpL0i5FHVxT1Okxw0360T2tGnZt7toAwpMfIOR3dzkemP9LfXMCyBmWR5Hi2zpQ==
 
+"@chakra-ui/object-utils@2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/object-utils/-/object-utils-2.1.0.tgz#a4ecf9cea92f1de09f5531f53ffdc41e0b19b6c3"
+  integrity sha512-tgIZOgLHaoti5PYGPTwK3t/cqtcycW0owaiOXoZOcpwwX/vlVb+H1jFsQyWiiwQVPt9RkoSLtxzXamx+aHH+bQ==
+
 "@chakra-ui/pin-input@2.0.15":
   version "2.0.15"
   resolved "https://registry.npmjs.org/@chakra-ui/pin-input/-/pin-input-2.0.15.tgz"
@@ -991,6 +1344,18 @@
     "@chakra-ui/react-use-controllable-state" "2.0.5"
     "@chakra-ui/react-use-merge-refs" "2.0.4"
 
+"@chakra-ui/pin-input@2.0.20":
+  version "2.0.20"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/pin-input/-/pin-input-2.0.20.tgz#5bf115bf4282b69fc6532a9c542cbf41f815d200"
+  integrity sha512-IHVmerrtHN8F+jRB3W1HnMir1S1TUCWhI7qDInxqPtoRffHt6mzZgLZ0izx8p1fD4HkW4c1d4/ZLEz9uH9bBRg==
+  dependencies:
+    "@chakra-ui/descendant" "3.0.14"
+    "@chakra-ui/react-children-utils" "2.0.6"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/react-use-controllable-state" "2.0.8"
+    "@chakra-ui/react-use-merge-refs" "2.0.7"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/popover@2.1.1":
   version "2.1.1"
   resolved "https://registry.npmjs.org/@chakra-ui/popover/-/popover-2.1.1.tgz"
@@ -1007,6 +1372,32 @@
     "@chakra-ui/react-use-focus-on-pointer-down" "2.0.3"
     "@chakra-ui/react-use-merge-refs" "2.0.4"
 
+"@chakra-ui/popover@2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/popover/-/popover-2.1.12.tgz#093bb60f7c044f829e2acc3a93f0c1077ba58cfb"
+  integrity sha512-Corh8trA1f3ydcMQqomgSvYNNhAlpxiBpMY2sglwYazOJcueHA8CI05cJVD0T/wwoTob7BShabhCGFZThn61Ng==
+  dependencies:
+    "@chakra-ui/close-button" "2.0.17"
+    "@chakra-ui/lazy-utils" "2.0.5"
+    "@chakra-ui/popper" "3.0.14"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/react-types" "2.0.7"
+    "@chakra-ui/react-use-animation-state" "2.0.9"
+    "@chakra-ui/react-use-disclosure" "2.0.8"
+    "@chakra-ui/react-use-focus-effect" "2.0.11"
+    "@chakra-ui/react-use-focus-on-pointer-down" "2.0.6"
+    "@chakra-ui/react-use-merge-refs" "2.0.7"
+    "@chakra-ui/shared-utils" "2.0.5"
+
+"@chakra-ui/popper@3.0.14":
+  version "3.0.14"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/popper/-/popper-3.0.14.tgz#598feec8825df99270585319f7becbb6cf33558a"
+  integrity sha512-RDMmmSfjsmHJbVn2agDyoJpTbQK33fxx//njwJdeyM0zTG/3/4xjI/Cxru3acJ2Y+1jFGmPqhO81stFjnbtfIw==
+  dependencies:
+    "@chakra-ui/react-types" "2.0.7"
+    "@chakra-ui/react-use-merge-refs" "2.0.7"
+    "@popperjs/core" "^2.9.3"
+
 "@chakra-ui/popper@3.0.8":
   version "3.0.8"
   resolved "https://registry.npmjs.org/@chakra-ui/popper/-/popper-3.0.8.tgz"
@@ -1024,6 +1415,14 @@
     "@chakra-ui/react-context" "2.0.4"
     "@chakra-ui/react-use-safe-layout-effect" "2.0.2"
 
+"@chakra-ui/portal@2.0.16":
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/portal/-/portal-2.0.16.tgz#e5ce3f9d9e559f17a95276e0c006d0e9b7703442"
+  integrity sha512-bVID0qbQ0l4xq38LdqAN4EKD4/uFkDnXzFwOlviC9sl0dNhzICDb1ltuH/Adl1d2HTMqyN60O3GO58eHy7plnQ==
+  dependencies:
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/react-use-safe-layout-effect" "2.0.5"
+
 "@chakra-ui/progress@2.0.12":
   version "2.0.12"
   resolved "https://registry.npmjs.org/@chakra-ui/progress/-/progress-2.0.12.tgz"
@@ -1031,6 +1430,13 @@
   dependencies:
     "@chakra-ui/react-context" "2.0.4"
 
+"@chakra-ui/progress@2.1.6":
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/progress/-/progress-2.1.6.tgz#398db20440979c37adb0a34821f805ae3471873b"
+  integrity sha512-hHh5Ysv4z6bK+j2GJbi/FT9CVyto2PtNUNwBmr3oNMVsoOUMoRjczfXvvYqp0EHr9PCpxqrq7sRwgQXUzhbDSw==
+  dependencies:
+    "@chakra-ui/react-context" "2.0.8"
+
 "@chakra-ui/provider@2.0.20":
   version "2.0.20"
   resolved "https://registry.npmjs.org/@chakra-ui/provider/-/provider-2.0.20.tgz"
@@ -1042,6 +1448,17 @@
     "@chakra-ui/system" "2.3.0"
     "@chakra-ui/utils" "2.0.11"
 
+"@chakra-ui/provider@2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/provider/-/provider-2.3.0.tgz#18b3bdc3087e90569049832b2f0f4f8afd5cedf6"
+  integrity sha512-vKgmjoLVS3NnHW8RSYwmhhda2ZTi3fQc1egkYSVwngGky4CsN15I+XDhxJitVd66H41cjah/UNJyoeq7ACseLA==
+  dependencies:
+    "@chakra-ui/css-reset" "2.1.2"
+    "@chakra-ui/portal" "2.0.16"
+    "@chakra-ui/react-env" "3.0.0"
+    "@chakra-ui/system" "2.5.8"
+    "@chakra-ui/utils" "2.0.15"
+
 "@chakra-ui/radio@2.0.12":
   version "2.0.12"
   resolved "https://registry.npmjs.org/@chakra-ui/radio/-/radio-2.0.12.tgz"
@@ -1053,11 +1470,28 @@
     "@chakra-ui/react-use-merge-refs" "2.0.4"
     "@zag-js/focus-visible" "0.1.0"
 
+"@chakra-ui/radio@2.0.22":
+  version "2.0.22"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/radio/-/radio-2.0.22.tgz#fad0ce7c9ba4051991ed517cac4cfe526d6d47d9"
+  integrity sha512-GsQ5WAnLwivWl6gPk8P1x+tCcpVakCt5R5T0HumF7DGPXKdJbjS+RaFySrbETmyTJsKY4QrfXn+g8CWVrMjPjw==
+  dependencies:
+    "@chakra-ui/form-control" "2.0.18"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/react-types" "2.0.7"
+    "@chakra-ui/react-use-merge-refs" "2.0.7"
+    "@chakra-ui/shared-utils" "2.0.5"
+    "@zag-js/focus-visible" "0.2.2"
+
 "@chakra-ui/react-children-utils@2.0.3":
   version "2.0.3"
   resolved "https://registry.npmjs.org/@chakra-ui/react-children-utils/-/react-children-utils-2.0.3.tgz"
   integrity sha512-tPQjLEEuAw/DYLRw0cNs/g8tcdhZ3r21Sr9dTAzoyvfk0vbZ24gCXRElltW2GZLiFA63mAidzhPmc+yQF3Wtgg==
 
+"@chakra-ui/react-children-utils@2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-children-utils/-/react-children-utils-2.0.6.tgz#6c480c6a60678fcb75cb7d57107c7a79e5179b92"
+  integrity sha512-QVR2RC7QsOsbWwEnq9YduhpqSFnZGvjjGREV8ygKi8ADhXh93C8azLECCUVgRJF2Wc+So1fgxmjLcbZfY2VmBA==
+
 "@chakra-ui/react-context@2.0.4":
   version "2.0.4"
   resolved "https://registry.npmjs.org/@chakra-ui/react-context/-/react-context-2.0.4.tgz"
@@ -1068,16 +1502,33 @@
   resolved "https://registry.npmjs.org/@chakra-ui/react-context/-/react-context-2.0.5.tgz"
   integrity sha512-WYS0VBl5Q3/kNShQ26BP+Q0OGMeTQWco3hSiJWvO2wYLY7N1BLq6dKs8vyKHZfpwKh2YL2bQeAObi+vSkXp6tQ==
 
+"@chakra-ui/react-context@2.0.8":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-context/-/react-context-2.0.8.tgz#5e0ed33ac3995875a21dea0e12b0ee5fc4c2e3cc"
+  integrity sha512-tRTKdn6lCTXM6WPjSokAAKCw2ioih7Eg8cNgaYRSwKBck8nkz9YqxgIIEj3dJD7MGtpl24S/SNI98iRWkRwR/A==
+
 "@chakra-ui/react-env@2.0.10":
   version "2.0.10"
   resolved "https://registry.npmjs.org/@chakra-ui/react-env/-/react-env-2.0.10.tgz"
   integrity sha512-3Yab5EbFcCGYzEsoijy4eA3354Z/JoXyk9chYIuW7Uwd+K6g/R8C0mUSAHeTmfp6Fix9kzDgerO5MWNM87b8cA==
 
+"@chakra-ui/react-env@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-env/-/react-env-3.0.0.tgz#2c3c9dc0e529b9b474a386a2b24988317b2a0811"
+  integrity sha512-tfMRO2v508HQWAqSADFrwZgR9oU10qC97oV6zGbjHh9ALP0/IcFR+Bi71KRTveDTm85fMeAzZYGj57P3Dsipkw==
+  dependencies:
+    "@chakra-ui/react-use-safe-layout-effect" "2.0.5"
+
 "@chakra-ui/react-types@2.0.3":
   version "2.0.3"
   resolved "https://registry.npmjs.org/@chakra-ui/react-types/-/react-types-2.0.3.tgz"
   integrity sha512-1mJYOQldFTALE0Wr3j6tk/MYvgQIp6CKkJulNzZrI8QN+ox/bJOh8OVP4vhwqvfigdLTui0g0k8M9h+j2ub/Mw==
 
+"@chakra-ui/react-types@2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-types/-/react-types-2.0.7.tgz#799c166a44882b23059c8f510eac9bd5d0869ac4"
+  integrity sha512-12zv2qIZ8EHwiytggtGvo4iLT0APris7T0qaAWqzpUGS0cdUtR8W+V1BJ5Ocq+7tA6dzQ/7+w5hmXih61TuhWQ==
+
 "@chakra-ui/react-use-animation-state@2.0.5":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@chakra-ui/react-use-animation-state/-/react-use-animation-state-2.0.5.tgz"
@@ -1086,11 +1537,24 @@
     "@chakra-ui/dom-utils" "2.0.3"
     "@chakra-ui/react-use-event-listener" "2.0.4"
 
+"@chakra-ui/react-use-animation-state@2.0.9":
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-animation-state/-/react-use-animation-state-2.0.9.tgz#8e6377e7583cc80c649cdc443c90ab5b48a03e78"
+  integrity sha512-WFoD5OG03PBmzJCoRwM8rVfU442AvKBPPgA0yGGlKioH29OGuX7W78Ml+cYdXxonTiB03YSRZzUwaUnP4wAy1Q==
+  dependencies:
+    "@chakra-ui/dom-utils" "2.1.0"
+    "@chakra-ui/react-use-event-listener" "2.0.7"
+
 "@chakra-ui/react-use-callback-ref@2.0.4":
   version "2.0.4"
   resolved "https://registry.npmjs.org/@chakra-ui/react-use-callback-ref/-/react-use-callback-ref-2.0.4.tgz"
   integrity sha512-he7EQfwMA4mwiDDKvX7cHIJaboCqf7UD3KYHGUcIjsF4dSc2Y8X5Ze4w+hmVZoJWIe4DWUzb3ili2SUm8eTgPg==
 
+"@chakra-ui/react-use-callback-ref@2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-callback-ref/-/react-use-callback-ref-2.0.7.tgz#9b844a81037d0ecaaa8031979fa050165635e211"
+  integrity sha512-YjT76nTpfHAK5NxplAlZsQwNju5KmQExnqsWNPFeOR6vvbC34+iPSTr+r91i1Hdy7gBSbevsOsd5Wm6RN3GuMw==
+
 "@chakra-ui/react-use-controllable-state@2.0.5":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@chakra-ui/react-use-controllable-state/-/react-use-controllable-state-2.0.5.tgz"
@@ -1098,6 +1562,13 @@
   dependencies:
     "@chakra-ui/react-use-callback-ref" "2.0.4"
 
+"@chakra-ui/react-use-controllable-state@2.0.8":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-controllable-state/-/react-use-controllable-state-2.0.8.tgz#6b71187e03be632c244dde9f16ed685428087ec9"
+  integrity sha512-F7rdCbLEmRjwwODqWZ3y+mKgSSHPcLQxeUygwk1BkZPXbKkJJKymOIjIynil2cbH7ku3hcSIWRvuhpCcfQWJ7Q==
+  dependencies:
+    "@chakra-ui/react-use-callback-ref" "2.0.7"
+
 "@chakra-ui/react-use-disclosure@2.0.5":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@chakra-ui/react-use-disclosure/-/react-use-disclosure-2.0.5.tgz"
@@ -1105,6 +1576,13 @@
   dependencies:
     "@chakra-ui/react-use-callback-ref" "2.0.4"
 
+"@chakra-ui/react-use-disclosure@2.0.8":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-disclosure/-/react-use-disclosure-2.0.8.tgz#e0e0445afc6d6d96bb262b99751e675034c31497"
+  integrity sha512-2ir/mHe1YND40e+FyLHnDsnDsBQPwzKDLzfe9GZri7y31oU83JSbHdlAXAhp3bpjohslwavtRCp+S/zRxfO9aQ==
+  dependencies:
+    "@chakra-ui/react-use-callback-ref" "2.0.7"
+
 "@chakra-ui/react-use-event-listener@2.0.4":
   version "2.0.4"
   resolved "https://registry.npmjs.org/@chakra-ui/react-use-event-listener/-/react-use-event-listener-2.0.4.tgz"
@@ -1112,6 +1590,23 @@
   dependencies:
     "@chakra-ui/react-use-callback-ref" "2.0.4"
 
+"@chakra-ui/react-use-event-listener@2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-event-listener/-/react-use-event-listener-2.0.7.tgz#ed08164164e79183d876eeb71e12c6bfaca3ad17"
+  integrity sha512-4wvpx4yudIO3B31pOrXuTHDErawmwiXnvAN7gLEOVREi16+YGNcFnRJ5X5nRrmB7j2MDUtsEDpRBFfw5Z9xQ5g==
+  dependencies:
+    "@chakra-ui/react-use-callback-ref" "2.0.7"
+
+"@chakra-ui/react-use-focus-effect@2.0.11":
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-focus-effect/-/react-use-focus-effect-2.0.11.tgz#9a5c76981677fc356308526c7d2b3dc48101ea06"
+  integrity sha512-/zadgjaCWD50TfuYsO1vDS2zSBs2p/l8P2DPEIA8FuaowbBubKrk9shKQDWmbfDU7KArGxPxrvo+VXvskPPjHw==
+  dependencies:
+    "@chakra-ui/dom-utils" "2.1.0"
+    "@chakra-ui/react-use-event-listener" "2.0.7"
+    "@chakra-ui/react-use-safe-layout-effect" "2.0.5"
+    "@chakra-ui/react-use-update-effect" "2.0.7"
+
 "@chakra-ui/react-use-focus-effect@2.0.5":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@chakra-ui/react-use-focus-effect/-/react-use-focus-effect-2.0.5.tgz"
@@ -1128,6 +1623,13 @@
   dependencies:
     "@chakra-ui/react-use-event-listener" "2.0.4"
 
+"@chakra-ui/react-use-focus-on-pointer-down@2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-focus-on-pointer-down/-/react-use-focus-on-pointer-down-2.0.6.tgz#13330eb518c17e591c908cb8f4a30d43a978e3f2"
+  integrity sha512-OigXiLRVySn3tyVqJ/rn57WGuukW8TQe8fJYiLwXbcNyAMuYYounvRxvCy2b53sQ7QIZamza0N0jhirbH5FNoQ==
+  dependencies:
+    "@chakra-ui/react-use-event-listener" "2.0.7"
+
 "@chakra-ui/react-use-interval@2.0.2":
   version "2.0.2"
   resolved "https://registry.npmjs.org/@chakra-ui/react-use-interval/-/react-use-interval-2.0.2.tgz"
@@ -1135,16 +1637,33 @@
   dependencies:
     "@chakra-ui/react-use-callback-ref" "2.0.4"
 
+"@chakra-ui/react-use-interval@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-interval/-/react-use-interval-2.0.5.tgz#c1a0043bf188b19b790a27668f4e860391335a60"
+  integrity sha512-1nbdwMi2K87V6p5f5AseOKif2CkldLaJlq1TOqaPRwb7v3aU9rltBtYdf+fIyuHSToNJUV6wd9budCFdLCl3Fg==
+  dependencies:
+    "@chakra-ui/react-use-callback-ref" "2.0.7"
+
 "@chakra-ui/react-use-latest-ref@2.0.2":
   version "2.0.2"
   resolved "https://registry.npmjs.org/@chakra-ui/react-use-latest-ref/-/react-use-latest-ref-2.0.2.tgz"
   integrity sha512-Ra/NMV+DSQ3n0AdKsyIqdgnFzls5UntabtIRfDXLrqmJ4tI0a1tDdop2qop0Ue87AcqD9P1KtQue4KPx7wCElw==
 
+"@chakra-ui/react-use-latest-ref@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-latest-ref/-/react-use-latest-ref-2.0.5.tgz#b61dc4dadda340f7b14df0ec1d50ab2e507b3b3e"
+  integrity sha512-3mIuFzMyIo3Ok/D8uhV9voVg7KkrYVO/pwVvNPJOHsDQqCA6DpYE4WDsrIx+fVcwad3Ta7SupexR5PoI+kq6QQ==
+
 "@chakra-ui/react-use-merge-refs@2.0.4":
   version "2.0.4"
   resolved "https://registry.npmjs.org/@chakra-ui/react-use-merge-refs/-/react-use-merge-refs-2.0.4.tgz"
   integrity sha512-aoWvtE5tDQNaLCiNUI6WV+MA2zVcCLR5mHSCISmowlTXyXOqOU5Fo9ZoUftzrmgCJpDu5x1jfUOivxuHUueb0g==
 
+"@chakra-ui/react-use-merge-refs@2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-merge-refs/-/react-use-merge-refs-2.0.7.tgz#1a1fe800fb5501ec3da4088fbac78c03bbad13a7"
+  integrity sha512-zds4Uhsc+AMzdH8JDDkLVet9baUBgtOjPbhC5r3A0ZXjZvGhCztFAVE3aExYiVoMPoHLKbLcqvCWE6ioFKz1lw==
+
 "@chakra-ui/react-use-outside-click@2.0.4":
   version "2.0.4"
   resolved "https://registry.npmjs.org/@chakra-ui/react-use-outside-click/-/react-use-outside-click-2.0.4.tgz"
@@ -1152,6 +1671,13 @@
   dependencies:
     "@chakra-ui/react-use-callback-ref" "2.0.4"
 
+"@chakra-ui/react-use-outside-click@2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-outside-click/-/react-use-outside-click-2.1.0.tgz#f7e27653c470e516c55d79df67ed8b0ba2c4ec8d"
+  integrity sha512-JanCo4QtWvMl9ZZUpKJKV62RlMWDFdPCE0Q64a7eWTOQgWWcpyBW7TOYRunQTqrK30FqkYFJCOlAWOtn+6Rw7A==
+  dependencies:
+    "@chakra-ui/react-use-callback-ref" "2.0.7"
+
 "@chakra-ui/react-use-pan-event@2.0.5":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@chakra-ui/react-use-pan-event/-/react-use-pan-event-2.0.5.tgz"
@@ -1161,16 +1687,42 @@
     "@chakra-ui/react-use-latest-ref" "2.0.2"
     framesync "5.3.0"
 
+"@chakra-ui/react-use-pan-event@2.0.9":
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-pan-event/-/react-use-pan-event-2.0.9.tgz#0ff33a285e75a692d1ed52dbb9f3046a593b8004"
+  integrity sha512-xu35QXkiyrgsHUOnctl+SwNcwf9Rl62uYE5y8soKOZdBm8E+FvZIt2hxUzK1EoekbJCMzEZ0Yv1ZQCssVkSLaQ==
+  dependencies:
+    "@chakra-ui/event-utils" "2.0.8"
+    "@chakra-ui/react-use-latest-ref" "2.0.5"
+    framesync "6.1.2"
+
 "@chakra-ui/react-use-previous@2.0.2":
   version "2.0.2"
   resolved "https://registry.npmjs.org/@chakra-ui/react-use-previous/-/react-use-previous-2.0.2.tgz"
   integrity sha512-ap/teLRPKopaHYD80fnf0TR/NpTWHJO5VdKg6sPyF1y5ediYLAzPT1G2OqMCj4QfJsYDctioT142URDYe0Nn7w==
 
+"@chakra-ui/react-use-previous@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-previous/-/react-use-previous-2.0.5.tgz#65836cc81e3a1bf4252cd08a71094f1be827b56c"
+  integrity sha512-BIZgjycPE4Xr+MkhKe0h67uHXzQQkBX/u5rYPd65iMGdX1bCkbE0oorZNfOHLKdTmnEb4oVsNvfN6Rfr+Mnbxw==
+
 "@chakra-ui/react-use-safe-layout-effect@2.0.2":
   version "2.0.2"
   resolved "https://registry.npmjs.org/@chakra-ui/react-use-safe-layout-effect/-/react-use-safe-layout-effect-2.0.2.tgz"
   integrity sha512-gl5HDq9RVeDJiT8udtpx12KRV8JPLJHDIUX8f/yZcKpXow0C7FFGg5Yy5I9397NQog5ZjKMuOg+AUq9TLJxsyQ==
 
+"@chakra-ui/react-use-safe-layout-effect@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-safe-layout-effect/-/react-use-safe-layout-effect-2.0.5.tgz#6cf388c37fd2a42b5295a292e149b32f860a00a7"
+  integrity sha512-MwAQBz3VxoeFLaesaSEN87reVNVbjcQBDex2WGexAg6hUB6n4gc1OWYH/iXp4tzp4kuggBNhEHkk9BMYXWfhJQ==
+
+"@chakra-ui/react-use-size@2.0.10":
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-size/-/react-use-size-2.0.10.tgz#6131950852490c06e5fb3760bf64097c8057391f"
+  integrity sha512-fdIkH14GDnKQrtQfxX8N3gxbXRPXEl67Y3zeD9z4bKKcQUAYIMqs0MsPZY+FMpGQw8QqafM44nXfL038aIrC5w==
+  dependencies:
+    "@zag-js/element-size" "0.3.2"
+
 "@chakra-ui/react-use-size@2.0.4":
   version "2.0.4"
   resolved "https://registry.npmjs.org/@chakra-ui/react-use-size/-/react-use-size-2.0.4.tgz"
@@ -1185,11 +1737,30 @@
   dependencies:
     "@chakra-ui/react-use-callback-ref" "2.0.4"
 
+"@chakra-ui/react-use-timeout@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-timeout/-/react-use-timeout-2.0.5.tgz#13c4e48e48d4b84ce1e062f0f1c9ec401ece78c9"
+  integrity sha512-QqmB+jVphh3h/CS60PieorpY7UqSPkrQCB7f7F+i9vwwIjtP8fxVHMmkb64K7VlzQiMPzv12nlID5dqkzlv0mw==
+  dependencies:
+    "@chakra-ui/react-use-callback-ref" "2.0.7"
+
 "@chakra-ui/react-use-update-effect@2.0.4":
   version "2.0.4"
   resolved "https://registry.npmjs.org/@chakra-ui/react-use-update-effect/-/react-use-update-effect-2.0.4.tgz"
   integrity sha512-F/I9LVnGAQyvww+x7tQb47wCwjhMYjpxtM1dTg1U3oCEXY0yF1Ts3NJLUAlsr3nAW6epJIwWx61niC7KWpam1w==
 
+"@chakra-ui/react-use-update-effect@2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-use-update-effect/-/react-use-update-effect-2.0.7.tgz#f94b7975ebb150c03d410e754b54f0e9dd263134"
+  integrity sha512-vBM2bmmM83ZdDtasWv3PXPznpTUd+FvqBC8J8rxoRmvdMEfrxTiQRBJhiGHLpS9BPLLPQlosN6KdFU97csB6zg==
+
+"@chakra-ui/react-utils@2.0.12":
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-utils/-/react-utils-2.0.12.tgz#d6b773b9a5b2e51dce61f51ac8a0e9a0f534f479"
+  integrity sha512-GbSfVb283+YA3kA8w8xWmzbjNWk14uhNpntnipHCftBibl0lxtQ9YqMFQLwuFOO0U2gYVocszqqDWX+XNKq9hw==
+  dependencies:
+    "@chakra-ui/utils" "2.0.15"
+
 "@chakra-ui/react-utils@2.0.8":
   version "2.0.8"
   resolved "https://registry.npmjs.org/@chakra-ui/react-utils/-/react-utils-2.0.8.tgz"
@@ -1197,7 +1768,7 @@
   dependencies:
     "@chakra-ui/utils" "2.0.11"
 
-"@chakra-ui/react@^2.2.9", "@chakra-ui/react@^2.3.6":
+"@chakra-ui/react@^2.3.6":
   version "2.3.6"
   resolved "https://registry.npmjs.org/@chakra-ui/react/-/react-2.3.6.tgz"
   integrity sha512-xo43UU+yMqRGHZLU4fSgzojeRl5stlIfT+GLbT9CUVEm0HMJCt2m8RsNPBvGOMzANdC+bzwSiOm+MNzQBi9IBQ==
@@ -1252,6 +1823,64 @@
     "@chakra-ui/utils" "2.0.11"
     "@chakra-ui/visually-hidden" "2.0.11"
 
+"@chakra-ui/react@^2.5.1":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react/-/react-2.7.0.tgz#0fdeb5d5ec0faf97e143cba94498b055a093f671"
+  integrity sha512-+FcUFQMsPfhWuM9Iu7uqufwwhmHN2IX6FWsBixYGOalO86dpgETsILMZP9PuWfgj7GpWiy2Dum6HXekh0Tk2Mg==
+  dependencies:
+    "@chakra-ui/accordion" "2.2.0"
+    "@chakra-ui/alert" "2.1.0"
+    "@chakra-ui/avatar" "2.2.11"
+    "@chakra-ui/breadcrumb" "2.1.5"
+    "@chakra-ui/button" "2.0.18"
+    "@chakra-ui/card" "2.1.6"
+    "@chakra-ui/checkbox" "2.2.15"
+    "@chakra-ui/close-button" "2.0.17"
+    "@chakra-ui/control-box" "2.0.13"
+    "@chakra-ui/counter" "2.0.14"
+    "@chakra-ui/css-reset" "2.1.2"
+    "@chakra-ui/editable" "3.0.0"
+    "@chakra-ui/focus-lock" "2.0.17"
+    "@chakra-ui/form-control" "2.0.18"
+    "@chakra-ui/hooks" "2.2.0"
+    "@chakra-ui/icon" "3.0.16"
+    "@chakra-ui/image" "2.0.16"
+    "@chakra-ui/input" "2.0.22"
+    "@chakra-ui/layout" "2.2.0"
+    "@chakra-ui/live-region" "2.0.13"
+    "@chakra-ui/media-query" "3.2.12"
+    "@chakra-ui/menu" "2.1.15"
+    "@chakra-ui/modal" "2.2.12"
+    "@chakra-ui/number-input" "2.0.19"
+    "@chakra-ui/pin-input" "2.0.20"
+    "@chakra-ui/popover" "2.1.12"
+    "@chakra-ui/popper" "3.0.14"
+    "@chakra-ui/portal" "2.0.16"
+    "@chakra-ui/progress" "2.1.6"
+    "@chakra-ui/provider" "2.3.0"
+    "@chakra-ui/radio" "2.0.22"
+    "@chakra-ui/react-env" "3.0.0"
+    "@chakra-ui/select" "2.0.19"
+    "@chakra-ui/skeleton" "2.0.24"
+    "@chakra-ui/slider" "2.0.25"
+    "@chakra-ui/spinner" "2.0.13"
+    "@chakra-ui/stat" "2.0.18"
+    "@chakra-ui/stepper" "2.2.0"
+    "@chakra-ui/styled-system" "2.9.1"
+    "@chakra-ui/switch" "2.0.27"
+    "@chakra-ui/system" "2.5.8"
+    "@chakra-ui/table" "2.0.17"
+    "@chakra-ui/tabs" "2.1.9"
+    "@chakra-ui/tag" "3.0.0"
+    "@chakra-ui/textarea" "2.0.19"
+    "@chakra-ui/theme" "3.1.2"
+    "@chakra-ui/theme-utils" "2.0.18"
+    "@chakra-ui/toast" "6.1.4"
+    "@chakra-ui/tooltip" "2.2.9"
+    "@chakra-ui/transition" "2.0.16"
+    "@chakra-ui/utils" "2.0.15"
+    "@chakra-ui/visually-hidden" "2.0.15"
+
 "@chakra-ui/select@2.0.12":
   version "2.0.12"
   resolved "https://registry.npmjs.org/@chakra-ui/select/-/select-2.0.12.tgz"
@@ -1259,11 +1888,24 @@
   dependencies:
     "@chakra-ui/form-control" "2.0.11"
 
+"@chakra-ui/select@2.0.19":
+  version "2.0.19"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/select/-/select-2.0.19.tgz#957e95a17a890d8c0a851e2f00a8d8dd17932d66"
+  integrity sha512-eAlFh+JhwtJ17OrB6fO6gEAGOMH18ERNrXLqWbYLrs674Le7xuREgtuAYDoxUzvYXYYTTdOJtVbcHGriI3o6rA==
+  dependencies:
+    "@chakra-ui/form-control" "2.0.18"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/shared-utils@2.0.2":
   version "2.0.2"
   resolved "https://registry.npmjs.org/@chakra-ui/shared-utils/-/shared-utils-2.0.2.tgz"
   integrity sha512-wC58Fh6wCnFFQyiebVZ0NI7PFW9+Vch0QE6qN7iR+bLseOzQY9miYuzPJ1kMYiFd6QTOmPJkI39M3wHqrPYiOg==
 
+"@chakra-ui/shared-utils@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/shared-utils/-/shared-utils-2.0.5.tgz#cb2b49705e113853647f1822142619570feba081"
+  integrity sha512-4/Wur0FqDov7Y0nCXl7HbHzCg4aq86h+SXdoUeuCMD3dSj7dpsVnStLYhng1vxvlbUnLpdF4oz5Myt3i/a7N3Q==
+
 "@chakra-ui/skeleton@2.0.17":
   version "2.0.17"
   resolved "https://registry.npmjs.org/@chakra-ui/skeleton/-/skeleton-2.0.17.tgz"
@@ -1272,6 +1914,15 @@
     "@chakra-ui/media-query" "3.2.7"
     "@chakra-ui/react-use-previous" "2.0.2"
 
+"@chakra-ui/skeleton@2.0.24":
+  version "2.0.24"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/skeleton/-/skeleton-2.0.24.tgz#dc9dcca6fc43005544fabfd38a444943b0a29cad"
+  integrity sha512-1jXtVKcl/jpbrJlc/TyMsFyI651GTXY5ma30kWyTXoby2E+cxbV6OR8GB/NMZdGxbQBax8/VdtYVjI0n+OBqWA==
+  dependencies:
+    "@chakra-ui/media-query" "3.2.12"
+    "@chakra-ui/react-use-previous" "2.0.5"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/slider@2.0.12":
   version "2.0.12"
   resolved "https://registry.npmjs.org/@chakra-ui/slider/-/slider-2.0.12.tgz"
@@ -1288,11 +1939,34 @@
     "@chakra-ui/react-use-size" "2.0.4"
     "@chakra-ui/react-use-update-effect" "2.0.4"
 
+"@chakra-ui/slider@2.0.25":
+  version "2.0.25"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/slider/-/slider-2.0.25.tgz#2d69af68f4afcc648d14603d7c3163660d35e9eb"
+  integrity sha512-FnWSi0AIXP+9sHMCPboOKGqm902k8dJtsJ7tu3D0AcKkE62WtYLZ2sTqvwJxCfSl4KqVI1i571SrF9WadnnJ8w==
+  dependencies:
+    "@chakra-ui/number-utils" "2.0.7"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/react-types" "2.0.7"
+    "@chakra-ui/react-use-callback-ref" "2.0.7"
+    "@chakra-ui/react-use-controllable-state" "2.0.8"
+    "@chakra-ui/react-use-latest-ref" "2.0.5"
+    "@chakra-ui/react-use-merge-refs" "2.0.7"
+    "@chakra-ui/react-use-pan-event" "2.0.9"
+    "@chakra-ui/react-use-size" "2.0.10"
+    "@chakra-ui/react-use-update-effect" "2.0.7"
+
 "@chakra-ui/spinner@2.0.10":
   version "2.0.10"
   resolved "https://registry.npmjs.org/@chakra-ui/spinner/-/spinner-2.0.10.tgz"
   integrity sha512-SwId1xPaaFAaEYrR9eHkQHAuB66CbxwjWaQonEjeEUSh9ecxkd5WbXlsQSyf2hVRIqXJg0m3HIYblcKUsQt9Rw==
 
+"@chakra-ui/spinner@2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/spinner/-/spinner-2.0.13.tgz#64fe919c18305c653ced046e25d5883ee4c1e7d7"
+  integrity sha512-T1/aSkVpUIuiYyrjfn1+LsQEG7Onbi1UE9ccS/evgf61Dzy4GgTXQUnDuWFSgpV58owqirqOu6jn/9eCwDlzlg==
+  dependencies:
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/stat@2.0.11":
   version "2.0.11"
   resolved "https://registry.npmjs.org/@chakra-ui/stat/-/stat-2.0.11.tgz"
@@ -1301,6 +1975,24 @@
     "@chakra-ui/icon" "3.0.11"
     "@chakra-ui/react-context" "2.0.4"
 
+"@chakra-ui/stat@2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/stat/-/stat-2.0.18.tgz#9e5d21d162b7cf2cf92065c19291ead2d4660772"
+  integrity sha512-wKyfBqhVlIs9bkSerUc6F9KJMw0yTIEKArW7dejWwzToCLPr47u+CtYO6jlJHV6lRvkhi4K4Qc6pyvtJxZ3VpA==
+  dependencies:
+    "@chakra-ui/icon" "3.0.16"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/shared-utils" "2.0.5"
+
+"@chakra-ui/stepper@2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/stepper/-/stepper-2.2.0.tgz#c42562fd1b210595303f14970d9df6b32e1ad5a1"
+  integrity sha512-8ZLxV39oghSVtOUGK8dX8Z6sWVSQiKVmsK4c3OQDa8y2TvxP0VtFD0Z5U1xJlOjQMryZRWhGj9JBc3iQLukuGg==
+  dependencies:
+    "@chakra-ui/icon" "3.0.16"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/styled-system@2.3.4":
   version "2.3.4"
   resolved "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-2.3.4.tgz"
@@ -1309,6 +2001,15 @@
     csstype "^3.0.11"
     lodash.mergewith "4.6.2"
 
+"@chakra-ui/styled-system@2.9.1":
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-2.9.1.tgz#888a4901b2afa174461259a8875379adb0363934"
+  integrity sha512-jhYKBLxwOPi9/bQt9kqV3ELa/4CjmNNruTyXlPp5M0v0+pDMUngPp48mVLoskm9RKZGE0h1qpvj/jZ3K7c7t8w==
+  dependencies:
+    "@chakra-ui/shared-utils" "2.0.5"
+    csstype "^3.0.11"
+    lodash.mergewith "4.6.2"
+
 "@chakra-ui/styled-system@^2.3.5":
   version "2.3.5"
   resolved "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-2.3.5.tgz"
@@ -1324,6 +2025,14 @@
   dependencies:
     "@chakra-ui/checkbox" "2.2.2"
 
+"@chakra-ui/switch@2.0.27":
+  version "2.0.27"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/switch/-/switch-2.0.27.tgz#e76e5afdfc837c83fce34480de4431ff8c19fcb8"
+  integrity sha512-z76y2fxwMlvRBrC5W8xsZvo3gP+zAEbT3Nqy5P8uh/IPd5OvDsGeac90t5cgnQTyxMOpznUNNK+1eUZqtLxWnQ==
+  dependencies:
+    "@chakra-ui/checkbox" "2.2.15"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/system@2.3.0":
   version "2.3.0"
   resolved "https://registry.npmjs.org/@chakra-ui/system/-/system-2.3.0.tgz"
@@ -1336,6 +2045,19 @@
     "@chakra-ui/utils" "2.0.11"
     react-fast-compare "3.2.0"
 
+"@chakra-ui/system@2.5.8":
+  version "2.5.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-2.5.8.tgz#9026090b792320683bf1cc3a8f04af7b10c947ce"
+  integrity sha512-Vy8UUaCxikOzOGE54IP8tKouvU38rEYU1HCSquU9+oe7Jd70HaiLa4vmUKvHyMUmxkOzDHIkgZLbVQCubSnN5w==
+  dependencies:
+    "@chakra-ui/color-mode" "2.1.12"
+    "@chakra-ui/object-utils" "2.1.0"
+    "@chakra-ui/react-utils" "2.0.12"
+    "@chakra-ui/styled-system" "2.9.1"
+    "@chakra-ui/theme-utils" "2.0.18"
+    "@chakra-ui/utils" "2.0.15"
+    react-fast-compare "3.2.1"
+
 "@chakra-ui/table@2.0.11":
   version "2.0.11"
   resolved "https://registry.npmjs.org/@chakra-ui/table/-/table-2.0.11.tgz"
@@ -1343,6 +2065,14 @@
   dependencies:
     "@chakra-ui/react-context" "2.0.4"
 
+"@chakra-ui/table@2.0.17":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/table/-/table-2.0.17.tgz#ad394dc6dcbe5a8a9e6d899997ecca3471603977"
+  integrity sha512-OScheTEp1LOYvTki2NFwnAYvac8siAhW9BI5RKm5f5ORL2gVJo4I72RUqE0aKe1oboxgm7CYt5afT5PS5cG61A==
+  dependencies:
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/tabs@2.1.4":
   version "2.1.4"
   resolved "https://registry.npmjs.org/@chakra-ui/tabs/-/tabs-2.1.4.tgz"
@@ -1357,6 +2087,21 @@
     "@chakra-ui/react-use-merge-refs" "2.0.4"
     "@chakra-ui/react-use-safe-layout-effect" "2.0.2"
 
+"@chakra-ui/tabs@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tabs/-/tabs-2.1.9.tgz#2e5214cb453c6cc0c240e82bd88af1042fc6fe0e"
+  integrity sha512-Yf8e0kRvaGM6jfkJum0aInQ0U3ZlCafmrYYni2lqjcTtThqu+Yosmo3iYlnullXxCw5MVznfrkb9ySvgQowuYg==
+  dependencies:
+    "@chakra-ui/clickable" "2.0.14"
+    "@chakra-ui/descendant" "3.0.14"
+    "@chakra-ui/lazy-utils" "2.0.5"
+    "@chakra-ui/react-children-utils" "2.0.6"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/react-use-controllable-state" "2.0.8"
+    "@chakra-ui/react-use-merge-refs" "2.0.7"
+    "@chakra-ui/react-use-safe-layout-effect" "2.0.5"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/tag@2.0.11":
   version "2.0.11"
   resolved "https://registry.npmjs.org/@chakra-ui/tag/-/tag-2.0.11.tgz"
@@ -1365,6 +2110,14 @@
     "@chakra-ui/icon" "3.0.11"
     "@chakra-ui/react-context" "2.0.4"
 
+"@chakra-ui/tag@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tag/-/tag-3.0.0.tgz#d86cdab59bb3ff7fc628c2dbe7a5ff1b36bd3e96"
+  integrity sha512-YWdMmw/1OWRwNkG9pX+wVtZio+B89odaPj6XeMn5nfNN8+jyhIEpouWv34+CO9G0m1lupJTxPSfgLAd7cqXZMA==
+  dependencies:
+    "@chakra-ui/icon" "3.0.16"
+    "@chakra-ui/react-context" "2.0.8"
+
 "@chakra-ui/textarea@2.0.12":
   version "2.0.12"
   resolved "https://registry.npmjs.org/@chakra-ui/textarea/-/textarea-2.0.12.tgz"
@@ -1372,6 +2125,14 @@
   dependencies:
     "@chakra-ui/form-control" "2.0.11"
 
+"@chakra-ui/textarea@2.0.19":
+  version "2.0.19"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/textarea/-/textarea-2.0.19.tgz#470b459f9cb3255d2abbe07d46b0a5b60a6a32c5"
+  integrity sha512-adJk+qVGsFeJDvfn56CcJKKse8k7oMGlODrmpnpTdF+xvlsiTM+1GfaJvgNSpHHuQFdz/A0z1uJtfGefk0G2ZA==
+  dependencies:
+    "@chakra-ui/form-control" "2.0.18"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/theme-tools@2.0.12":
   version "2.0.12"
   resolved "https://registry.npmjs.org/@chakra-ui/theme-tools/-/theme-tools-2.0.12.tgz"
@@ -1380,6 +2141,15 @@
     "@chakra-ui/anatomy" "2.0.7"
     "@ctrl/tinycolor" "^3.4.0"
 
+"@chakra-ui/theme-tools@2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-2.0.18.tgz#8160f0abe331e60b56f77426c28ff9a605c1a5c4"
+  integrity sha512-MbiRuXb2tb41FbnW41zhsYYAU0znlpfYZnu0mxCf8U2otCwPekJCfESUGYypjq4JnydQ7TDOk+Kz/Wi974l4mw==
+  dependencies:
+    "@chakra-ui/anatomy" "2.1.2"
+    "@chakra-ui/shared-utils" "2.0.5"
+    color2k "^2.0.0"
+
 "@chakra-ui/theme-utils@2.0.1":
   version "2.0.1"
   resolved "https://registry.npmjs.org/@chakra-ui/theme-utils/-/theme-utils-2.0.1.tgz"
@@ -1389,6 +2159,16 @@
     "@chakra-ui/theme" "2.1.14"
     lodash.mergewith "4.6.2"
 
+"@chakra-ui/theme-utils@2.0.18":
+  version "2.0.18"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme-utils/-/theme-utils-2.0.18.tgz#c240545d0f00b6cc059195a784683d1f143a44af"
+  integrity sha512-aSbkUUiFpc1NHC7lQdA6uYlr6EcZFXz6b4aJ7VRDpqTiywvqYnvfGzhmsB0z94vgtS9qXc6HoIwBp25jYGV2MA==
+  dependencies:
+    "@chakra-ui/shared-utils" "2.0.5"
+    "@chakra-ui/styled-system" "2.9.1"
+    "@chakra-ui/theme" "3.1.2"
+    lodash.mergewith "4.6.2"
+
 "@chakra-ui/theme@2.1.14":
   version "2.1.14"
   resolved "https://registry.npmjs.org/@chakra-ui/theme/-/theme-2.1.14.tgz"
@@ -1397,6 +2177,15 @@
     "@chakra-ui/anatomy" "2.0.7"
     "@chakra-ui/theme-tools" "2.0.12"
 
+"@chakra-ui/theme@3.1.2":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-3.1.2.tgz#1e78a19083adecb38b884c1c2da6dee2c84c81f2"
+  integrity sha512-ebUXMS3LZw2OZxEQNYaFw3/XuA3jpyprhS/frjHMvZKSOaCjMW+c9z25S0jp1NnpQff08VGI8EWbyVZECXU1QA==
+  dependencies:
+    "@chakra-ui/anatomy" "2.1.2"
+    "@chakra-ui/shared-utils" "2.0.5"
+    "@chakra-ui/theme-tools" "2.0.18"
+
 "@chakra-ui/toast@4.0.0":
   version "4.0.0"
   resolved "https://registry.npmjs.org/@chakra-ui/toast/-/toast-4.0.0.tgz"
@@ -1410,6 +2199,21 @@
     "@chakra-ui/styled-system" "2.3.4"
     "@chakra-ui/theme" "2.1.14"
 
+"@chakra-ui/toast@6.1.4":
+  version "6.1.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/toast/-/toast-6.1.4.tgz#853a844408c0e22f15c66b4f2607b8416300c649"
+  integrity sha512-wAcPHq/N/ar4jQxkUGhnsbp+lx2eKOpHxn1KaWdHXUkqCNUA1z09fvBsoMyzObSiiwbDuQPZG5RxsOhzfPZX4Q==
+  dependencies:
+    "@chakra-ui/alert" "2.1.0"
+    "@chakra-ui/close-button" "2.0.17"
+    "@chakra-ui/portal" "2.0.16"
+    "@chakra-ui/react-context" "2.0.8"
+    "@chakra-ui/react-use-timeout" "2.0.5"
+    "@chakra-ui/react-use-update-effect" "2.0.7"
+    "@chakra-ui/shared-utils" "2.0.5"
+    "@chakra-ui/styled-system" "2.9.1"
+    "@chakra-ui/theme" "3.1.2"
+
 "@chakra-ui/tooltip@2.2.0":
   version "2.2.0"
   resolved "https://registry.npmjs.org/@chakra-ui/tooltip/-/tooltip-2.2.0.tgz"
@@ -1422,11 +2226,32 @@
     "@chakra-ui/react-use-event-listener" "2.0.4"
     "@chakra-ui/react-use-merge-refs" "2.0.4"
 
+"@chakra-ui/tooltip@2.2.9":
+  version "2.2.9"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tooltip/-/tooltip-2.2.9.tgz#a7f25f7e6d1304ea448a3420ed99f79a657537bd"
+  integrity sha512-ZoksllanqXRUyMDaiogvUVJ+RdFXwZrfrwx3RV22fejYZIQ602hZ3QHtHLB5ZnKFLbvXKMZKM23HxFTSb0Ytqg==
+  dependencies:
+    "@chakra-ui/dom-utils" "2.1.0"
+    "@chakra-ui/popper" "3.0.14"
+    "@chakra-ui/portal" "2.0.16"
+    "@chakra-ui/react-types" "2.0.7"
+    "@chakra-ui/react-use-disclosure" "2.0.8"
+    "@chakra-ui/react-use-event-listener" "2.0.7"
+    "@chakra-ui/react-use-merge-refs" "2.0.7"
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/transition@2.0.11":
   version "2.0.11"
   resolved "https://registry.npmjs.org/@chakra-ui/transition/-/transition-2.0.11.tgz"
   integrity sha512-O0grc162LARPurjz1R+J+zr4AAKsVwN5+gaqLfZLMWg6TpvczJhwEA2fLCNAdkC/gomere390bJsy52xfUacUw==
 
+"@chakra-ui/transition@2.0.16":
+  version "2.0.16"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/transition/-/transition-2.0.16.tgz#498c91e6835bb5d950fd1d1402f483b85f7dcd87"
+  integrity sha512-E+RkwlPc3H7P1crEXmXwDXMB2lqY2LLia2P5siQ4IEnRWIgZXlIw+8Em+NtHNgusel2N+9yuB0wT9SeZZeZ3CQ==
+  dependencies:
+    "@chakra-ui/shared-utils" "2.0.5"
+
 "@chakra-ui/utils@2.0.11":
   version "2.0.11"
   resolved "https://registry.npmjs.org/@chakra-ui/utils/-/utils-2.0.11.tgz"
@@ -1437,11 +2262,26 @@
     framesync "5.3.0"
     lodash.mergewith "4.6.2"
 
+"@chakra-ui/utils@2.0.15":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-2.0.15.tgz#bd800b1cff30eb5a5e8c36fa039f49984b4c5e4a"
+  integrity sha512-El4+jL0WSaYYs+rJbuYFDbjmfCcfGDmRY95GO4xwzit6YAPZBLcR65rOEwLps+XWluZTy1xdMrusg/hW0c1aAA==
+  dependencies:
+    "@types/lodash.mergewith" "4.6.7"
+    css-box-model "1.2.1"
+    framesync "6.1.2"
+    lodash.mergewith "4.6.2"
+
 "@chakra-ui/visually-hidden@2.0.11":
   version "2.0.11"
   resolved "https://registry.npmjs.org/@chakra-ui/visually-hidden/-/visually-hidden-2.0.11.tgz"
   integrity sha512-e+5amYvnsmEQdiWH4XMyvrtGTdwz//+48vwj5CsNWWcselzkwqodmciy5rIrT71/SCQDOtmgnL7ZWAUOffxfsQ==
 
+"@chakra-ui/visually-hidden@2.0.15":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/visually-hidden/-/visually-hidden-2.0.15.tgz#60df64e0ab97d95fee4e6c61ccabd15fd5ace398"
+  integrity sha512-WWULIiucYRBIewHKFA7BssQ2ABLHLVd9lrUo3N3SZgR0u4ZRDDVEUNOy+r+9ruDze8+36dGbN9wsN1IdELtdOw==
+
 "@commitlint/cli@^17.1.2":
   version "17.1.2"
   resolved "https://registry.npmjs.org/@commitlint/cli/-/cli-17.1.2.tgz"
@@ -1649,24 +2489,6 @@
     long "^4.0.0"
     pako "^2.0.2"
 
-"@cosmjs/crypto@^0.24.1":
-  version "0.24.1"
-  resolved "https://registry.npmjs.org/@cosmjs/crypto/-/crypto-0.24.1.tgz"
-  integrity sha512-GPhaWmQO06mXldKj/b+oKF5o3jMNfRKpAw+Q8XQhrD7ItinVPDMu8Xgl6frUXWTUdgpYwqpvqOcpm85QUsYV0Q==
-  dependencies:
-    "@cosmjs/encoding" "^0.24.1"
-    "@cosmjs/math" "^0.24.1"
-    "@cosmjs/utils" "^0.24.1"
-    bip39 "^3.0.2"
-    bn.js "^4.11.8"
-    elliptic "^6.5.3"
-    js-sha3 "^0.8.0"
-    libsodium-wrappers "^0.7.6"
-    pbkdf2 "^3.1.1"
-    ripemd160 "^2.0.2"
-    sha.js "^2.4.11"
-    unorm "^1.5.0"
-
 "@cosmjs/crypto@^0.30.1":
   version "0.30.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/crypto/-/crypto-0.30.1.tgz#21e94d5ca8f8ded16eee1389d2639cb5c43c3eb5"
@@ -1682,22 +2504,13 @@
 
 "@cosmjs/encoding@^0.20.0":
   version "0.20.1"
-  resolved "https://registry.npmjs.org/@cosmjs/encoding/-/encoding-0.20.1.tgz"
+  resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.20.1.tgz#1d1162b3eca51b7244cd45102e313612cea77281"
   integrity sha512-aBp153iq2LD4GwDGwodDWZk/eyAUZ8J8bbiqZ1uK8rrylzm9Rdw84aa6JxykezJe+uBPtoI4lx9eH7VQXCGDXw==
   dependencies:
     base64-js "^1.3.0"
     bech32 "^1.1.4"
     readonly-date "^1.0.0"
 
-"@cosmjs/encoding@^0.24.1":
-  version "0.24.1"
-  resolved "https://registry.npmjs.org/@cosmjs/encoding/-/encoding-0.24.1.tgz"
-  integrity sha512-PMr+gaXAuM0XgjeXwB1zdX1QI0t+PgVhbmjgI/RSgswDzdExNH97qUopecL0/HG3p64vhIT/6ZjXYYTljZL7WA==
-  dependencies:
-    base64-js "^1.3.0"
-    bech32 "^1.1.4"
-    readonly-date "^1.0.0"
-
 "@cosmjs/encoding@^0.30.1":
   version "0.30.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/encoding/-/encoding-0.30.1.tgz#b5c4e0ef7ceb1f2753688eb96400ed70f35c6058"
@@ -1715,32 +2528,13 @@
     "@cosmjs/stream" "^0.30.1"
     xstream "^11.14.0"
 
-"@cosmjs/launchpad@^0.24.0-alpha.25", "@cosmjs/launchpad@^0.24.1":
-  version "0.24.1"
-  resolved "https://registry.npmjs.org/@cosmjs/launchpad/-/launchpad-0.24.1.tgz"
-  integrity sha512-syqVGKRH6z1vw4DdAJOSu4OgUXJdkXQozqvDde0cXYwnvhb7EXGSg5CTtp+2GqTBJuNVfMZ2DSvrC2Ig8cWBQQ==
-  dependencies:
-    "@cosmjs/crypto" "^0.24.1"
-    "@cosmjs/encoding" "^0.24.1"
-    "@cosmjs/math" "^0.24.1"
-    "@cosmjs/utils" "^0.24.1"
-    axios "^0.21.1"
-    fast-deep-equal "^3.1.3"
-
 "@cosmjs/math@^0.20.0":
   version "0.20.1"
-  resolved "https://registry.npmjs.org/@cosmjs/math/-/math-0.20.1.tgz"
+  resolved "https://registry.yarnpkg.com/@cosmjs/math/-/math-0.20.1.tgz#c3c2be821b8b5dbbb9b2c0401bd9f1472e821f2a"
   integrity sha512-xt7BmpSw2OVGM2+JhlJvKv9OJs9+3DqgVL6+byUDC355CSISrZhFjJg9GFko1EFssDXz5YgvBZR5FkifC0xazw==
   dependencies:
     bn.js "^4.11.8"
 
-"@cosmjs/math@^0.24.1":
-  version "0.24.1"
-  resolved "https://registry.npmjs.org/@cosmjs/math/-/math-0.24.1.tgz"
-  integrity sha512-eBQk8twgzmpHFCVkoNjTZhsZwWRbR+JXt0FhjXJoD85SBm4K8b2OnOyTg68uPHVKOJjLRwzyRVYgMrg5TBVgwQ==
-  dependencies:
-    bn.js "^4.11.8"
-
 "@cosmjs/math@^0.30.1":
   version "0.30.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/math/-/math-0.30.1.tgz#8b816ef4de5d3afa66cb9fdfb5df2357a7845b8a"
@@ -1748,15 +2542,6 @@
   dependencies:
     bn.js "^5.2.0"
 
-"@cosmjs/proto-signing@^0.24.0-alpha.25":
-  version "0.24.1"
-  resolved "https://registry.npmjs.org/@cosmjs/proto-signing/-/proto-signing-0.24.1.tgz"
-  integrity sha512-/rnyNx+FlG6b6O+igsb42eMN1/RXY+pTrNnAE8/YZaRloP9A6MXiTMO5JdYSTcjaD0mEVhejiy96bcyflKYXBg==
-  dependencies:
-    "@cosmjs/launchpad" "^0.24.1"
-    long "^4.0.0"
-    protobufjs "~6.10.2"
-
 "@cosmjs/proto-signing@^0.30.1":
   version "0.30.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/proto-signing/-/proto-signing-0.30.1.tgz#f0dda372488df9cd2677150b89b3e9c72b3cb713"
@@ -1823,101 +2608,127 @@
 
 "@cosmjs/utils@^0.20.0":
   version "0.20.1"
-  resolved "https://registry.npmjs.org/@cosmjs/utils/-/utils-0.20.1.tgz"
+  resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.20.1.tgz#4d239b7d93c15523cdf109f225cbf61326fb69cd"
   integrity sha512-xl9YnIrAAaBd6nFffwFbyrnKjqjD9zKGP8OBKxzyglxamHfqAS+PcJPEiaEpt+oUt7HAIOyhL3KK75Dh52hGvA==
 
-"@cosmjs/utils@^0.24.1":
-  version "0.24.1"
-  resolved "https://registry.npmjs.org/@cosmjs/utils/-/utils-0.24.1.tgz"
-  integrity sha512-VA3WFx1lMFb7esp9BqHWkDgMvHoA3D9w+uDRvWhVRpUpDc7RYHxMbWExASjz+gNblTCg556WJGzF64tXnf9tdQ==
-
 "@cosmjs/utils@^0.30.1":
   version "0.30.1"
   resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.30.1.tgz#6d92582341be3c2ec8d82090253cfa4b7f959edb"
   integrity sha512-KvvX58MGMWh7xA+N+deCfunkA/ZNDvFLw4YbOmX3f/XBIkqrVY7qlotfy2aNb1kgp6h4B6Yc8YawJPDTfvWX7g==
 
-"@cosmos-kit/config@^0.16.2":
-  version "0.16.2"
-  resolved "https://registry.npmjs.org/@cosmos-kit/config/-/config-0.16.2.tgz"
-  integrity sha512-ywWdW4UOyYP6IOD+WSFoxdtaEEKvY/dYasoNk5FGsL35jE8fpJU2hmm3e0YxiXREafi4i31pv9pE5rtf0ijB3g==
+"@cosmology-ui/react@^0.1.21":
+  version "0.1.21"
+  resolved "https://registry.yarnpkg.com/@cosmology-ui/react/-/react-0.1.21.tgz#53a2a42b6805baec4541928d9a98a9cab0caef31"
+  integrity sha512-eOaYIFhm8XBf1bex49AuZjiv4livhUUXGmq5rJua5m+B4JxKOcyC5w+e38KoYQT9c6yiwsFfBSnIENdTtbRw7g==
   dependencies:
     "@babel/runtime" "^7.11.2"
-    "@chain-registry/types" "^0.11.0"
-    "@cosmos-kit/core" "^0.16.2"
-    "@cosmos-kit/keplr" "^0.16.2"
+    "@chakra-ui/react" "^2.5.1"
+    "@cosmology-ui/utils" "^0.1.24"
+    "@emotion/react" "^11.10.6"
+    "@emotion/styled" "^11.10.6"
+    bowser "2.11.0"
+    chain-registry "^1.5.0"
+    chakra-react-select "^4.4.2"
+    fast-fuzzy "^1.12.0"
+    framer-motion "^9.0.7"
+    qrcode.react "^3.1.0"
+    react "18.2.0"
+    react-icons "^4.4.0"
+    react-resize-detector "^8.0.3"
 
-"@cosmos-kit/core@^0.16.2":
-  version "0.16.2"
-  resolved "https://registry.npmjs.org/@cosmos-kit/core/-/core-0.16.2.tgz"
-  integrity sha512-ogMx4zdxt2sXKtFx/ifUYVDY1sb1QdnegD0FyvQ2rl6iJbAugWHZlRM/0lk+LMFQxrADbV3Fr/jxVyHIVZSYbg==
+"@cosmology-ui/utils@^0.1.24":
+  version "0.1.24"
+  resolved "https://registry.yarnpkg.com/@cosmology-ui/utils/-/utils-0.1.24.tgz#5544cebfca6a6a679a4c13a9d3ed6866712619fd"
+  integrity sha512-jtJGCMVQMt3SrZFMi3WJ+4+ad1Puux4KQmEZGCnlZLMj+6ebEEdkUuYsmVxTdI/qlAo9RlVVIzVgD4gTelbD7w==
   dependencies:
     "@babel/runtime" "^7.11.2"
-    "@chain-registry/types" "^0.11.0"
-    chain-registry "^0.14.0"
+    "@chakra-ui/react" "^2.5.1"
+    "@cosmology-ui/utils" "^0.1.24"
+    "@emotion/react" "^11.10.6"
+    "@emotion/styled" "^11.10.6"
+    bowser "2.11.0"
+    chain-registry "^1.5.0"
+    chakra-react-select "^4.4.2"
+    fast-fuzzy "^1.12.0"
+    framer-motion "^9.0.7"
+    qrcode.react "^3.1.0"
+    react "18.2.0"
+    react-icons "^4.4.0"
+    react-resize-detector "^8.0.3"
 
-"@cosmos-kit/core@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.npmjs.org/@cosmos-kit/core/-/core-0.20.0.tgz"
-  integrity sha512-gy6jarhd2HUwdBe3S3Y88jDp2VTE8Die6ngoNnEWdipiiaMFmw14cGZD0WzskzPI88md05L/r6/pUPeNNZE+DQ==
+"@cosmos-kit/core@^1.5.8":
+  version "1.5.8"
+  resolved "https://registry.yarnpkg.com/@cosmos-kit/core/-/core-1.5.8.tgz#dcbda6d2819c2d69948331004818598db768d56b"
+  integrity sha512-dC8w0k+rNEdCiYOBd8aBM6ZLGxkXRKG9vjWeVmUD5xuNa2YQh192pdOYEu2U2wc8FgjixuR5hOSvUBMsfTt+cw==
   dependencies:
-    "@babel/runtime" "^7.11.2"
-    "@chain-registry/types" "^0.11.0"
-    chain-registry "^0.14.0"
+    "@chain-registry/types" "0.13.0"
+    "@walletconnect/types" "2.7.2"
+    bowser "2.11.0"
+    events "3.3.0"
 
-"@cosmos-kit/keplr@^0.16.2":
-  version "0.16.2"
-  resolved "https://registry.npmjs.org/@cosmos-kit/keplr/-/keplr-0.16.2.tgz"
-  integrity sha512-NV+9zXmpI8EcNWwtKgYoV/PshZSD5Su+RFn+Et3YdWBP2xv4Nfn/7YjkxVqziFeXR198sUcQe51ACsmVN25vuw==
+"@cosmos-kit/keplr-extension@^0.35.9":
+  version "0.35.9"
+  resolved "https://registry.yarnpkg.com/@cosmos-kit/keplr-extension/-/keplr-extension-0.35.9.tgz#a0793b334181e0f2c921071d236dca5b5951dfbd"
+  integrity sha512-ifb3AL7EKmynVRYIbGRNs+QQdoRfOrVPEivBHuaJDQ6tV+d3isV6lNLXCewL/CLS+EaM0qOemMm+PzhNVGJKwA==
   dependencies:
-    "@babel/runtime" "^7.11.2"
-    "@chain-registry/types" "^0.11.0"
-    "@chakra-ui/react" "^2.2.9"
-    "@cosmos-kit/core" "^0.16.2"
-    "@emotion/react" "^11"
-    "@emotion/styled" "^11"
-    "@keplr-wallet/types" "^0.11.3"
-    "@keplr-wallet/wc-client" "^0.11.3"
-    "@walletconnect/client" "1.8.0"
-    "@walletconnect/node" "1.0.0"
-    events "3.3.0"
-    react "18.2.0"
-    react-dom "18.2.0"
-    react-icons "^4.4.0"
+    "@chain-registry/keplr" "1.8.0"
+    "@cosmos-kit/core" "^1.5.8"
 
-"@cosmos-kit/keplr@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.npmjs.org/@cosmos-kit/keplr/-/keplr-0.20.0.tgz"
-  integrity sha512-2LiHZiQQ2mg1G5jivA6UEnb3f/kUi9G9qWUh/GcCgaRHuW+OnlP+/RbwP6dDhK7wxvXLDUo0PKSfsP/ksY1GUw==
+"@cosmos-kit/keplr-mobile@^0.33.38":
+  version "0.33.38"
+  resolved "https://registry.yarnpkg.com/@cosmos-kit/keplr-mobile/-/keplr-mobile-0.33.38.tgz#f0bf7193ef0204883d6603a0d911728eb5aed815"
+  integrity sha512-7BKlmmZF6YwOtFBgaS0HtwhuJrCd313qaetqLSaX8sf1mRSHJjE/UVcBhD1m3Rw/jmclGvuSDcpfF8rp1u8SEg==
   dependencies:
-    "@babel/runtime" "^7.11.2"
-    "@chain-registry/keplr" "1.0.0"
-    "@chain-registry/types" "^0.11.0"
-    "@chakra-ui/react" "^2.2.9"
-    "@cosmos-kit/core" "^0.20.0"
-    "@emotion/react" "^11"
-    "@emotion/styled" "^11"
-    "@keplr-wallet/types" "^0.11.3"
-    "@keplr-wallet/wc-client" "^0.11.3"
-    "@walletconnect/client" "1.8.0"
-    events "3.3.0"
-    react "18.2.0"
-    react-dom "18.2.0"
-    react-icons "^4.4.0"
+    "@chain-registry/keplr" "1.8.0"
+    "@cosmos-kit/core" "^1.5.8"
+    "@cosmos-kit/walletconnect" "^0.3.15"
 
-"@cosmos-kit/react@^0.19.0":
-  version "0.19.0"
-  resolved "https://registry.npmjs.org/@cosmos-kit/react/-/react-0.19.0.tgz"
-  integrity sha512-w8v18Us7t6VD3ERFa1XZvJ2/30vW9qTQ6PGkvoeoIHy3KVIDlLb9hNPgq9rm+wn7/ohGt1KXHiWmd3K5qZiPKg==
+"@cosmos-kit/keplr@^0.33.38":
+  version "0.33.38"
+  resolved "https://registry.yarnpkg.com/@cosmos-kit/keplr/-/keplr-0.33.38.tgz#a1eca7f4030e80a1ade9fc55b61b54d4ce479478"
+  integrity sha512-Txe+RDbtOCNtDw/qzs7MzqR2Yuj0CvMTJTtiO1Tn1SKGIQV7PkW2uoIcoDGnpjOVlmbt0Q2hrAImAzjLknYP6Q==
   dependencies:
-    "@babel/runtime" "^7.11.2"
-    "@chain-registry/types" "^0.11.0"
-    "@chakra-ui/react" "^2.2.9"
-    "@cosmos-kit/config" "^0.16.2"
-    "@emotion/react" "^11"
-    "@emotion/styled" "^11"
-    bowser "2.11.0"
-    qrcode.react "^3.1.0"
-    react-icons "^4.4.0"
+    "@cosmos-kit/keplr-extension" "^0.35.9"
+    "@cosmos-kit/keplr-mobile" "^0.33.38"
+
+"@cosmos-kit/react-lite@^1.4.10":
+  version "1.4.10"
+  resolved "https://registry.yarnpkg.com/@cosmos-kit/react-lite/-/react-lite-1.4.10.tgz#4f405a315fe9f0a4fb2c7a0734a21194d147f04a"
+  integrity sha512-VJi4mR2i2mCUB7NudsktEpDo8Jec9zZVbx0/yC9xxDfi2Q535yGsUxTWxnZpoYTZAh2n0yq7iigNAz5DAk+nJQ==
+  dependencies:
+    "@babel/runtime" "7.11.2"
+    "@chain-registry/types" "0.13.1"
+    "@cosmos-kit/core" "^1.5.8"
+    react "18.2.0"
+
+"@cosmos-kit/react@^1.3.31":
+  version "1.3.31"
+  resolved "https://registry.yarnpkg.com/@cosmos-kit/react/-/react-1.3.31.tgz#735de3c2beb536d4c0f5ab0e54adf6fd438efcce"
+  integrity sha512-5xEMEMdn6xwFQcYXmakaQ0Pyvu7DVMA0pDPAIKqV1ICpl4NlIqX3jhMtfH/535DTjcy8St9lnPlKR75T78uqlQ==
+  dependencies:
+    "@babel/runtime" "7.11.2"
+    "@chain-registry/types" "0.13.1"
+    "@chakra-ui/react" "^2.5.1"
+    "@cosmology-ui/react" "^0.1.21"
+    "@cosmos-kit/core" "^1.5.8"
+    "@cosmos-kit/react-lite" "^1.4.10"
+    "@emotion/react" "^11.10.6"
+    "@emotion/styled" "^11.10.6"
+    framer-motion "^9.0.7"
+    react "18.2.0"
+    react-icons "4.4.0"
+
+"@cosmos-kit/walletconnect@^0.3.15":
+  version "0.3.15"
+  resolved "https://registry.yarnpkg.com/@cosmos-kit/walletconnect/-/walletconnect-0.3.15.tgz#34b6ff1f2a1fe2d8f9a6af0686b4581d50286f2e"
+  integrity sha512-efcGZllo3peO9+vs5imkYG1PSpB4SW2sOwWTB4HfUZtUree5sX1+viDNwinEYjncxc6ScvAxvPPcVuhWW6V9BA==
+  dependencies:
+    "@babel/runtime" "7.11.2"
+    "@cosmos-kit/core" "^1.5.8"
+    "@walletconnect/sign-client" "^2.7.2"
+    "@walletconnect/types" "^2.7.2"
+    "@walletconnect/utils" "^2.7.2"
+    events "3.3.0"
 
 "@cspotcode/source-map-support@^0.8.0":
   version "0.8.1"
@@ -1931,68 +2742,38 @@
   resolved "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz"
   integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==
 
-"@emotion/babel-plugin@^11.10.0":
-  version "11.10.0"
-  resolved "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.0.tgz"
-  integrity sha512-xVnpDAAbtxL1dsuSelU5A7BnY/lftws0wUexNJZTPsvX/1tM4GZJbclgODhvW4E+NH7E5VFcH0bBn30NvniPJA==
+"@emotion/babel-plugin@^11.11.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
+  integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==
   dependencies:
     "@babel/helper-module-imports" "^7.16.7"
-    "@babel/plugin-syntax-jsx" "^7.17.12"
     "@babel/runtime" "^7.18.3"
-    "@emotion/hash" "^0.9.0"
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/serialize" "^1.1.0"
+    "@emotion/hash" "^0.9.1"
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/serialize" "^1.1.2"
     babel-plugin-macros "^3.1.0"
     convert-source-map "^1.5.0"
     escape-string-regexp "^4.0.0"
     find-root "^1.1.0"
     source-map "^0.5.7"
-    stylis "4.0.13"
+    stylis "4.2.0"
 
-"@emotion/babel-plugin@^11.10.5":
-  version "11.10.5"
-  resolved "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz"
-  integrity sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==
+"@emotion/cache@^11.11.0", "@emotion/cache@^11.4.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff"
+  integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==
   dependencies:
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/plugin-syntax-jsx" "^7.17.12"
-    "@babel/runtime" "^7.18.3"
-    "@emotion/hash" "^0.9.0"
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/serialize" "^1.1.1"
-    babel-plugin-macros "^3.1.0"
-    convert-source-map "^1.5.0"
-    escape-string-regexp "^4.0.0"
-    find-root "^1.1.0"
-    source-map "^0.5.7"
-    stylis "4.1.3"
-
-"@emotion/cache@^11.10.0":
-  version "11.10.1"
-  resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.1.tgz"
-  integrity sha512-uZTj3Yz5D69GE25iFZcIQtibnVCFsc/6+XIozyL3ycgWvEdif2uEw9wlUt6umjLr4Keg9K6xRPHmD8LGi+6p1A==
-  dependencies:
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/sheet" "^1.2.0"
-    "@emotion/utils" "^1.2.0"
-    "@emotion/weak-memoize" "^0.3.0"
-    stylis "4.0.13"
-
-"@emotion/cache@^11.10.5":
-  version "11.10.5"
-  resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz"
-  integrity sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==
-  dependencies:
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/sheet" "^1.2.1"
-    "@emotion/utils" "^1.2.0"
-    "@emotion/weak-memoize" "^0.3.0"
-    stylis "4.1.3"
-
-"@emotion/hash@^0.9.0":
-  version "0.9.0"
-  resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz"
-  integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/sheet" "^1.2.2"
+    "@emotion/utils" "^1.2.1"
+    "@emotion/weak-memoize" "^0.3.1"
+    stylis "4.2.0"
+
+"@emotion/hash@^0.9.1":
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
+  integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
 
 "@emotion/is-prop-valid@^0.8.2":
   version "0.8.8"
@@ -2001,126 +2782,84 @@
   dependencies:
     "@emotion/memoize" "0.7.4"
 
-"@emotion/is-prop-valid@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz"
-  integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
+"@emotion/is-prop-valid@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
+  integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
   dependencies:
-    "@emotion/memoize" "^0.8.0"
+    "@emotion/memoize" "^0.8.1"
 
 "@emotion/memoize@0.7.4":
   version "0.7.4"
   resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz"
   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
 
-"@emotion/memoize@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz"
-  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
-
-"@emotion/react@^11":
-  version "11.10.5"
-  resolved "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz"
-  integrity sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==
-  dependencies:
-    "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.10.5"
-    "@emotion/cache" "^11.10.5"
-    "@emotion/serialize" "^1.1.1"
-    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
-    "@emotion/utils" "^1.2.0"
-    "@emotion/weak-memoize" "^0.3.0"
-    hoist-non-react-statics "^3.3.1"
+"@emotion/memoize@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
+  integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
 
-"@emotion/react@^11.10.4":
-  version "11.10.4"
-  resolved "https://registry.npmjs.org/@emotion/react/-/react-11.10.4.tgz"
-  integrity sha512-j0AkMpr6BL8gldJZ6XQsQ8DnS9TxEQu1R+OGmDZiWjBAJtCcbt0tS3I/YffoqHXxH6MjgI7KdMbYKw3MEiU9eA==
+"@emotion/react@^11.10.6", "@emotion/react@^11.8.1":
+  version "11.11.1"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157"
+  integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==
   dependencies:
     "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.10.0"
-    "@emotion/cache" "^11.10.0"
-    "@emotion/serialize" "^1.1.0"
-    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
-    "@emotion/utils" "^1.2.0"
-    "@emotion/weak-memoize" "^0.3.0"
+    "@emotion/babel-plugin" "^11.11.0"
+    "@emotion/cache" "^11.11.0"
+    "@emotion/serialize" "^1.1.2"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
+    "@emotion/utils" "^1.2.1"
+    "@emotion/weak-memoize" "^0.3.1"
     hoist-non-react-statics "^3.3.1"
 
-"@emotion/serialize@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.0.tgz"
-  integrity sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA==
-  dependencies:
-    "@emotion/hash" "^0.9.0"
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/unitless" "^0.8.0"
-    "@emotion/utils" "^1.2.0"
-    csstype "^3.0.2"
-
-"@emotion/serialize@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz"
-  integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==
+"@emotion/serialize@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.2.tgz#017a6e4c9b8a803bd576ff3d52a0ea6fa5a62b51"
+  integrity sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==
   dependencies:
-    "@emotion/hash" "^0.9.0"
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/unitless" "^0.8.0"
-    "@emotion/utils" "^1.2.0"
+    "@emotion/hash" "^0.9.1"
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/unitless" "^0.8.1"
+    "@emotion/utils" "^1.2.1"
     csstype "^3.0.2"
 
-"@emotion/sheet@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.0.tgz"
-  integrity sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w==
-
-"@emotion/sheet@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz"
-  integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==
-
-"@emotion/styled@^11":
-  version "11.10.5"
-  resolved "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.5.tgz"
-  integrity sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==
-  dependencies:
-    "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.10.5"
-    "@emotion/is-prop-valid" "^1.2.0"
-    "@emotion/serialize" "^1.1.1"
-    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
-    "@emotion/utils" "^1.2.0"
+"@emotion/sheet@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec"
+  integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==
 
-"@emotion/styled@^11.10.4":
-  version "11.10.4"
-  resolved "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.4.tgz"
-  integrity sha512-pRl4R8Ez3UXvOPfc2bzIoV8u9P97UedgHS4FPX594ntwEuAMA114wlaHvOK24HB48uqfXiGlYIZYCxVJ1R1ttQ==
+"@emotion/styled@^11.10.6":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.11.0.tgz#26b75e1b5a1b7a629d7c0a8b708fbf5a9cdce346"
+  integrity sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==
   dependencies:
     "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.10.0"
-    "@emotion/is-prop-valid" "^1.2.0"
-    "@emotion/serialize" "^1.1.0"
-    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
-    "@emotion/utils" "^1.2.0"
+    "@emotion/babel-plugin" "^11.11.0"
+    "@emotion/is-prop-valid" "^1.2.1"
+    "@emotion/serialize" "^1.1.2"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
+    "@emotion/utils" "^1.2.1"
 
-"@emotion/unitless@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz"
-  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
+"@emotion/unitless@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
+  integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
 
-"@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz"
-  integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==
+"@emotion/use-insertion-effect-with-fallbacks@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
+  integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==
 
-"@emotion/utils@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz"
-  integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==
+"@emotion/utils@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4"
+  integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==
 
-"@emotion/weak-memoize@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz"
-  integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==
+"@emotion/weak-memoize@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
+  integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
 
 "@eslint/eslintrc@^1.3.3":
   version "1.3.3"
@@ -2139,7 +2878,7 @@
 
 "@ethersproject/address@^5.6.0":
   version "5.7.0"
-  resolved "https://registry.npmjs.org/@ethersproject/address/-/address-5.7.0.tgz"
+  resolved "https://registry.yarnpkg.com/@ethersproject/address/-/address-5.7.0.tgz#19b56c4d74a3b0a46bfdbb6cfcc0a153fc697f37"
   integrity sha512-9wYhYt7aghVGo758POM5nqcOMaE168Q6aRLJZwUmiqSrAungkG74gSSeKEIR7ukixesdRZGPgVqme6vmxs1fkA==
   dependencies:
     "@ethersproject/bignumber" "^5.7.0"
@@ -2150,7 +2889,7 @@
 
 "@ethersproject/bignumber@^5.7.0":
   version "5.7.0"
-  resolved "https://registry.npmjs.org/@ethersproject/bignumber/-/bignumber-5.7.0.tgz"
+  resolved "https://registry.yarnpkg.com/@ethersproject/bignumber/-/bignumber-5.7.0.tgz#e2f03837f268ba655ffba03a57853e18a18dc9c2"
   integrity sha512-n1CAdIHRWjSucQO3MC1zPSVgV/6dy/fjL9pMrPP9peL+QxEg9wOsVqwD4+818B6LUEtaXzVHQiuivzRoxPxUGw==
   dependencies:
     "@ethersproject/bytes" "^5.7.0"
@@ -2159,14 +2898,14 @@
 
 "@ethersproject/bytes@^5.7.0":
   version "5.7.0"
-  resolved "https://registry.npmjs.org/@ethersproject/bytes/-/bytes-5.7.0.tgz"
+  resolved "https://registry.yarnpkg.com/@ethersproject/bytes/-/bytes-5.7.0.tgz#a00f6ea8d7e7534d6d87f47188af1148d71f155d"
   integrity sha512-nsbxwgFXWh9NyYWo+U8atvmMsSdKJprTcICAkvbBffT75qDocbuggBU0SJiVK2MuTrp0q+xvLkTnGMPK1+uA9A==
   dependencies:
     "@ethersproject/logger" "^5.7.0"
 
 "@ethersproject/keccak256@^5.5.0", "@ethersproject/keccak256@^5.7.0":
   version "5.7.0"
-  resolved "https://registry.npmjs.org/@ethersproject/keccak256/-/keccak256-5.7.0.tgz"
+  resolved "https://registry.yarnpkg.com/@ethersproject/keccak256/-/keccak256-5.7.0.tgz#3186350c6e1cd6aba7940384ec7d6d9db01f335a"
   integrity sha512-2UcPboeL/iW+pSg6vZ6ydF8tCnv3Iu/8tUmLLzWWGzxWKFFqOBQFLo6uLUv6BDrLgCDfN28RJ/wtByx+jZ4KBg==
   dependencies:
     "@ethersproject/bytes" "^5.7.0"
@@ -2174,17 +2913,29 @@
 
 "@ethersproject/logger@^5.7.0":
   version "5.7.0"
-  resolved "https://registry.npmjs.org/@ethersproject/logger/-/logger-5.7.0.tgz"
+  resolved "https://registry.yarnpkg.com/@ethersproject/logger/-/logger-5.7.0.tgz#6ce9ae168e74fecf287be17062b590852c311892"
   integrity sha512-0odtFdXu/XHtjQXJYA3u9G0G8btm0ND5Cu8M7i5vhEcE8/HmF4Lbdqanwyv4uQTr2tx6b7fQRmgLrsnpQlmnig==
 
 "@ethersproject/rlp@^5.7.0":
   version "5.7.0"
-  resolved "https://registry.npmjs.org/@ethersproject/rlp/-/rlp-5.7.0.tgz"
+  resolved "https://registry.yarnpkg.com/@ethersproject/rlp/-/rlp-5.7.0.tgz#de39e4d5918b9d74d46de93af80b7685a9c21304"
   integrity sha512-rBxzX2vK8mVF7b0Tol44t5Tb8gomOHkj5guL+HhzQ1yBh/ydjGnpw6at+X6Iw0Kp3OzzzkcKp8N9r0W4kYSs9w==
   dependencies:
     "@ethersproject/bytes" "^5.7.0"
     "@ethersproject/logger" "^5.7.0"
 
+"@floating-ui/core@^1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.6.tgz#d21ace437cc919cdd8f1640302fa8851e65e75c0"
+  integrity sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==
+
+"@floating-ui/dom@^1.0.1":
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.9.tgz#b9ed1c15d30963419a6736f1b7feb350dd49c603"
+  integrity sha512-sosQxsqgxMNkV3C+3UqTS6LxP7isRLwX8WMepp843Rb3/b0Wz8+MdUkxJksByip3C2WwLugLHN1b4ibn//zKwQ==
+  dependencies:
+    "@floating-ui/core" "^1.2.6"
+
 "@graphql-codegen/add@^3.2.1":
   version "3.2.1"
   resolved "https://registry.npmjs.org/@graphql-codegen/add/-/add-3.2.1.tgz"
@@ -2685,7 +3436,7 @@
 
 "@iov/crypto@2.1.0":
   version "2.1.0"
-  resolved "https://registry.npmjs.org/@iov/crypto/-/crypto-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/@iov/crypto/-/crypto-2.1.0.tgz#10e91b6692e154958c11626dfd096a80e8a481a4"
   integrity sha512-jnb4XuK50admolm7fBxOcxfAW2TO+wYrZlhDWiMETItY/Y5gNNa1zaDSO2wNIjjfGng+8nQ1yqnNhqy7busV2Q==
   dependencies:
     "@iov/encoding" "^2.1.0"
@@ -2702,7 +3453,7 @@
 
 "@iov/encoding@2.1.0":
   version "2.1.0"
-  resolved "https://registry.npmjs.org/@iov/encoding/-/encoding-2.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/@iov/encoding/-/encoding-2.1.0.tgz#434203c39874c68bc1d96e1278251f0feb23be07"
   integrity sha512-5IOdLO7Xg/uRykuiCqeMYghQ3IjWDtGxv7NTWXkgpHuna0aewx43mRpT2NPCpOZd1tpuorDtQ7/zbDNRaIIF/w==
   dependencies:
     base64-js "^1.3.0"
@@ -2712,7 +3463,7 @@
 
 "@iov/encoding@^2.1.0":
   version "2.5.0"
-  resolved "https://registry.npmjs.org/@iov/encoding/-/encoding-2.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@iov/encoding/-/encoding-2.5.0.tgz#9612e529f45e63633b2375c13db28b9330ce6293"
   integrity sha512-HGHLlQEvD23rFjW5PQrxD2B/6LiBHVSxqX6gjOz9KfcmIMIftRA0qROrTITfjjjUr/yZZEeNk4qjuBls9TaYcA==
   dependencies:
     "@cosmjs/encoding" "^0.20.0"
@@ -2722,7 +3473,7 @@
 
 "@iov/utils@2.0.2":
   version "2.0.2"
-  resolved "https://registry.npmjs.org/@iov/utils/-/utils-2.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/@iov/utils/-/utils-2.0.2.tgz#3527f376d26100e07ac823bf87bebd0f24680d1c"
   integrity sha512-4D8MEvTcFc/DVy5q25vHxRItmgJyeX85dixMH+MxdKr+yy71h3sYk+sVBEIn70uqGP7VqAJkGOPNFs08/XYELw==
 
 "@jridgewell/gen-mapping@^0.1.0":
@@ -2773,37 +3524,64 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@keplr-wallet/common@0.11.13":
-  version "0.11.13"
-  resolved "https://registry.npmjs.org/@keplr-wallet/common/-/common-0.11.13.tgz"
-  integrity sha512-QRgo4H+/G4YJTVjJRcr+Dpqk8BSa3jS7V007BPkvzLN1swRqFcR541PaNXzX1hCtMtrW5tiXYz9gJt0Z32tYeA==
+"@keplr-wallet/common@0.11.16":
+  version "0.11.16"
+  resolved "https://registry.yarnpkg.com/@keplr-wallet/common/-/common-0.11.16.tgz#a4b0112fc4e27daf194b8fc3ecf056632a9d224a"
+  integrity sha512-RTbfe8LkPzQQqYntx53dZTuDUgx+W6KRY4g3fIv1c59DS/bp9ZqjYfUDmj3yH0GQk822zqJJwCtjk+qsgvyebg==
+  dependencies:
+    "@keplr-wallet/crypto" "0.11.16"
+    buffer "^6.0.3"
+    delay "^4.4.0"
+
+"@keplr-wallet/common@0.11.64":
+  version "0.11.64"
+  resolved "https://registry.yarnpkg.com/@keplr-wallet/common/-/common-0.11.64.tgz#5d4fcc78dca01ebc85576e72a0b07e48184ad7ee"
+  integrity sha512-kEnv6K+TxH+BBwwqUgiTcIXuRLBn6PaZMO4jwJbE1O8C8Qh/2j1QtkMLAMgl3Nj9qQkHgJ/dvA5oIqOIdLVMwg==
   dependencies:
-    "@keplr-wallet/crypto" "0.11.13"
+    "@keplr-wallet/crypto" "0.11.64"
     buffer "^6.0.3"
     delay "^4.4.0"
 
-"@keplr-wallet/cosmos@^0.10.24":
-  version "0.10.24"
-  resolved "https://registry.npmjs.org/@keplr-wallet/cosmos/-/cosmos-0.10.24.tgz"
-  integrity sha512-fKaHoto4+AYL/HKR3ieZYMwYXlN8yTuQuIghAxDXHHaW8r+G2qrt7U1bLZR9E8e9/YxaxzBjiL2Xpd0WNdkjrQ==
+"@keplr-wallet/cosmos@0.11.16":
+  version "0.11.16"
+  resolved "https://registry.yarnpkg.com/@keplr-wallet/cosmos/-/cosmos-0.11.16.tgz#2a356d0d1a3d871f301a9e727c62087f5461c705"
+  integrity sha512-Rgch9zw+GKQ2wAKw6I5+J8AAlKHs4MhnkGFfTuqy0e453Ig0+KCHvs+IgMURM9j6E7K0OPQVc4vCvWnQLs6Zbw==
   dependencies:
-    "@cosmjs/launchpad" "^0.24.0-alpha.25"
     "@ethersproject/address" "^5.6.0"
-    "@keplr-wallet/crypto" "0.10.24"
-    "@keplr-wallet/proto-types" "0.10.24"
-    "@keplr-wallet/types" "0.10.24"
-    "@keplr-wallet/unit" "0.10.24"
+    "@keplr-wallet/common" "0.11.16"
+    "@keplr-wallet/crypto" "0.11.16"
+    "@keplr-wallet/proto-types" "0.11.16"
+    "@keplr-wallet/types" "0.11.16"
+    "@keplr-wallet/unit" "0.11.16"
     axios "^0.27.2"
     bech32 "^1.1.4"
     buffer "^6.0.3"
     long "^4.0.0"
     protobufjs "^6.11.2"
 
-"@keplr-wallet/crypto@0.10.24", "@keplr-wallet/crypto@^0.10.24":
-  version "0.10.24"
-  resolved "https://registry.npmjs.org/@keplr-wallet/crypto/-/crypto-0.10.24.tgz"
-  integrity sha512-NBXOrX+qeVa4Pqr+g5VIswtPz3cIBlF869pIX98F9AN1xLWkSwqysNLWNPgCQaQGqtqrA1izagW3oGmePSpRPQ==
+"@keplr-wallet/cosmos@^0.11.12":
+  version "0.11.64"
+  resolved "https://registry.yarnpkg.com/@keplr-wallet/cosmos/-/cosmos-0.11.64.tgz#a094c884759b687ea9231fe473dece7934211275"
+  integrity sha512-S6pLRaDKOyOFPfry7Km+Bgwr087gwHI4n3fp8NLGHtL75mLnOdeGvSEVW5LXJEWc5EyYgngM2CeS7xNHz+vjHg==
   dependencies:
+    "@ethersproject/address" "^5.6.0"
+    "@keplr-wallet/common" "0.11.64"
+    "@keplr-wallet/crypto" "0.11.64"
+    "@keplr-wallet/proto-types" "0.11.64"
+    "@keplr-wallet/types" "0.11.64"
+    "@keplr-wallet/unit" "0.11.64"
+    axios "^0.27.2"
+    bech32 "^1.1.4"
+    buffer "^6.0.3"
+    long "^4.0.0"
+    protobufjs "^6.11.2"
+
+"@keplr-wallet/crypto@0.11.16":
+  version "0.11.16"
+  resolved "https://registry.yarnpkg.com/@keplr-wallet/crypto/-/crypto-0.11.16.tgz#6cd39fdb7d1df44be05c78bf3244132262c821d4"
+  integrity sha512-th3t05Aq+uQLbhhiqIHbevY3pA4dBKr+vKcUpfdshcc78fI1eGpmzGcQKxlvbectBn4UwamTEANssyplXOGQqg==
+  dependencies:
+    "@ethersproject/keccak256" "^5.5.0"
     bip32 "^2.0.6"
     bip39 "^3.0.3"
     bs58check "^2.1.2"
@@ -2812,10 +3590,10 @@
     elliptic "^6.5.3"
     sha.js "^2.4.11"
 
-"@keplr-wallet/crypto@0.11.13":
-  version "0.11.13"
-  resolved "https://registry.npmjs.org/@keplr-wallet/crypto/-/crypto-0.11.13.tgz"
-  integrity sha512-SNZc34Ry7gNlHB3SeyS326rzqRj0HnetAPeQBR09RqkgAFGsBOq9ZC/eJIVtTYsKv8qEgFZo86/Jo5dQuu8lyQ==
+"@keplr-wallet/crypto@0.11.64", "@keplr-wallet/crypto@^0.11.12":
+  version "0.11.64"
+  resolved "https://registry.yarnpkg.com/@keplr-wallet/crypto/-/crypto-0.11.64.tgz#816aec5b5242e619b084aa7d9ef2821f8c0ebaad"
+  integrity sha512-DMeGhs+UUBpvefYa/0pF8h8D0lVS1T/eTGNKrn7SIO5CBMp1qfght+k1Se0pHGLr4CAtxFSXTDvYm3mr+ovKhg==
   dependencies:
     "@ethersproject/keccak256" "^5.5.0"
     bip32 "^2.0.6"
@@ -2826,79 +3604,56 @@
     elliptic "^6.5.3"
     sha.js "^2.4.11"
 
-"@keplr-wallet/proto-types@0.10.24":
-  version "0.10.24"
-  resolved "https://registry.npmjs.org/@keplr-wallet/proto-types/-/proto-types-0.10.24.tgz"
-  integrity sha512-wcR2AcmYdMF2yQgj1CdNJqUHsvQWj4yFBPfJvZfpA3Cldq3ZRH+/UgpVm0QUYqUbuNmGHQMzkZkAkfZNtr8BSg==
+"@keplr-wallet/proto-types@0.11.16":
+  version "0.11.16"
+  resolved "https://registry.yarnpkg.com/@keplr-wallet/proto-types/-/proto-types-0.11.16.tgz#3546dc7be89decad1ee7384789d23a739f1f072a"
+  integrity sha512-0tX7AN1bmlZdpUwqgjQU6MI+p+qBBaWUxHvOrNYtvX0FShw9RihasWdrV6biciQewVd54fChVIGmYKhCLtwPsg==
   dependencies:
     long "^4.0.0"
     protobufjs "^6.11.2"
 
-"@keplr-wallet/provider@0.11.13":
-  version "0.11.13"
-  resolved "https://registry.npmjs.org/@keplr-wallet/provider/-/provider-0.11.13.tgz"
-  integrity sha512-bFa0If29Gzph5pzQREmCtkoVEuQd6a96YrTdSQC43UFY5WiXeRoey9TLRRWjX/grlvFwl2vHanaBCsbqo6pvOA==
+"@keplr-wallet/proto-types@0.11.64":
+  version "0.11.64"
+  resolved "https://registry.yarnpkg.com/@keplr-wallet/proto-types/-/proto-types-0.11.64.tgz#c5fa5a404737675bd7a54898cbca021f320a6b2a"
+  integrity sha512-3oxfD1+zHPPuyKz41wt5A/gVhf2FQbA/L2u/4TxnmnITkY3IENirvMDrZUDJF0pWyGgZuXjhoVVFN2hMWI++PQ==
   dependencies:
-    "@cosmjs/launchpad" "^0.24.0-alpha.25"
-    "@cosmjs/proto-signing" "^0.24.0-alpha.25"
-    "@keplr-wallet/router" "0.11.13"
-    "@keplr-wallet/types" "0.11.13"
-    buffer "^6.0.3"
-    deepmerge "^4.2.2"
     long "^4.0.0"
-    secretjs "0.17.7"
-
-"@keplr-wallet/router@0.11.13":
-  version "0.11.13"
-  resolved "https://registry.npmjs.org/@keplr-wallet/router/-/router-0.11.13.tgz"
-  integrity sha512-9rlkufUlyFvqR+xTX4xz1FNRQi8XFWrrQ6oKYkkAh3DJ2AdZZ6hUjwLNwzuIXcQBbgR3BBaIwRE8pSQQ/NMVXQ==
+    protobufjs "^6.11.2"
 
-"@keplr-wallet/types@0.10.24":
-  version "0.10.24"
-  resolved "https://registry.npmjs.org/@keplr-wallet/types/-/types-0.10.24.tgz"
-  integrity sha512-L90/1/w2/QS9QMB9T0rqqfduy6qn9Isqjfdmi6AHewhKjy2TfZJaXBFuMvyYmpYBbkhkei+pM9mLh4+f3eblww==
+"@keplr-wallet/types@0.11.16":
+  version "0.11.16"
+  resolved "https://registry.yarnpkg.com/@keplr-wallet/types/-/types-0.11.16.tgz#5080c3f01f89b607ee7167c32d2e59a6d0f614ea"
+  integrity sha512-jkBWj6bcw6BZqPavLms3EcaK6YG4suoTPA9PuO6+eFjj7TomUrzzYdhXyc7Mm0K/KVEz5CjPxjmx7LsPuWYKgg==
   dependencies:
-    "@cosmjs/launchpad" "^0.24.0-alpha.25"
-    "@cosmjs/proto-signing" "^0.24.0-alpha.25"
     axios "^0.27.2"
     long "^4.0.0"
-    secretjs "^0.17.0"
+    secretjs "0.17.7"
 
-"@keplr-wallet/types@0.11.13", "@keplr-wallet/types@^0.11.3":
-  version "0.11.13"
-  resolved "https://registry.npmjs.org/@keplr-wallet/types/-/types-0.11.13.tgz"
-  integrity sha512-bBD2biXaPiDnpL7wP4SgF+rQYIBpQ2WHaP+2azuNqV6ij9RhRktKqJ+srGHp02umT1r4+jAERN8pgA+PckaYag==
+"@keplr-wallet/types@0.11.64":
+  version "0.11.64"
+  resolved "https://registry.yarnpkg.com/@keplr-wallet/types/-/types-0.11.64.tgz#5a308c8c019b4e18f894e0f35f0904b60134d605"
+  integrity sha512-GgzeLDHHfZFyne3O7UIfFHj/uYqVbxAZI31RbBwt460OBbvwQzjrlZwvJW3vieWRAgxKSITjzEDBl2WneFTQdQ==
   dependencies:
-    "@cosmjs/launchpad" "^0.24.0-alpha.25"
-    "@cosmjs/proto-signing" "^0.24.0-alpha.25"
     axios "^0.27.2"
     long "^4.0.0"
-    secretjs "0.17.7"
 
-"@keplr-wallet/unit@0.10.24":
-  version "0.10.24"
-  resolved "https://registry.npmjs.org/@keplr-wallet/unit/-/unit-0.10.24.tgz"
-  integrity sha512-8wDLpBUc/yQ6pWJOotk8V4OlxjPqU8V1OJgzYSQDF4FD9/BjRGifXY1LkYp2QhaJ7c6vKhw8v773SgmBq5w5vg==
+"@keplr-wallet/unit@0.11.16":
+  version "0.11.16"
+  resolved "https://registry.yarnpkg.com/@keplr-wallet/unit/-/unit-0.11.16.tgz#21c19bd985620b32a6de6f06850e9c0fdeb4f88c"
+  integrity sha512-RRVE3oLZq84P4CQONHXDRX+jdqsP9Zar0V9ROAkG4qzitG2glNY/KCVd9SeSOatbGOb/4X88/4pH273TkjtlRA==
   dependencies:
-    "@keplr-wallet/types" "0.10.24"
+    "@keplr-wallet/types" "0.11.16"
     big-integer "^1.6.48"
     utility-types "^3.10.0"
 
-"@keplr-wallet/wc-client@^0.11.3":
-  version "0.11.13"
-  resolved "https://registry.npmjs.org/@keplr-wallet/wc-client/-/wc-client-0.11.13.tgz"
-  integrity sha512-Oi9mQu72WKIOOdPpBogUxBxZ92RnS6JH/4rwWa/nycp99ra5RC7eiLzhrKrAM9/BvFgYrl5HkKg11EE7A56ECQ==
-  dependencies:
-    "@cosmjs/launchpad" "^0.24.0-alpha.25"
-    "@cosmjs/proto-signing" "^0.24.0-alpha.25"
-    "@keplr-wallet/common" "0.11.13"
-    "@keplr-wallet/provider" "0.11.13"
-    "@keplr-wallet/types" "0.11.13"
-    "@walletconnect/types" "^1.6.4"
-    "@walletconnect/utils" "^1.6.4"
-    buffer "^6.0.3"
-    deepmerge "^4.2.2"
-    secretjs "0.17.7"
+"@keplr-wallet/unit@0.11.64":
+  version "0.11.64"
+  resolved "https://registry.yarnpkg.com/@keplr-wallet/unit/-/unit-0.11.64.tgz#0b138b2c750d7c4eaa4d254d3b71349918dc2885"
+  integrity sha512-BKTaDYI17QgEcBBCP5ZqsHsfNH29P6VMRxjR4nOXcJfhsuwvdJxa/p88VwQYbpVBw0oXcDOwudNiu7Bgf8w6QQ==
+  dependencies:
+    "@keplr-wallet/types" "0.11.64"
+    big-integer "^1.6.48"
+    utility-types "^3.10.0"
 
 "@motionone/animation@^10.13.1":
   version "10.14.0"
@@ -3035,6 +3790,11 @@
   resolved "https://registry.npmjs.org/@noble/hashes/-/hashes-1.1.3.tgz"
   integrity sha512-CE0FCR57H2acVI5UOzIGSSIYxZ6v/HOhDR0Ro9VLyhnzLwx0o8W1mmgaqlEUx4049qJDlIBRztv5k+MM8vbO3A==
 
+"@noble/hashes@^1.2.0":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.1.tgz#8831ef002114670c603c458ab8b11328406953a9"
+  integrity sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -3288,21 +4048,155 @@
   resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.37.0.tgz#691b92c5c733ce772d8761a571196f738ca06384"
   integrity sha512-p8iw5oGvWLIk7osMgXhxshUpebJD0riiuT3ihBP0DV+Gs8r0qdQ5gtcStl7Cn0D4013p4j/f3T5q85Z9ENE6fA==
 
-"@sentry/utils@7.37.0":
-  version "7.37.0"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.37.0.tgz#20b367649873f7ff5c6f1071ed2a1069779b2e10"
-  integrity sha512-CN86EKQ07+SgqfgGehMJsgrCEjc0sl1YDcj2xf9dA0Bn3ma2MTDkCyutxVcRfc2IVWfqAN1rn/L8/BH2v2+eqA==
+"@sentry/utils@7.37.0":
+  version "7.37.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.37.0.tgz#20b367649873f7ff5c6f1071ed2a1069779b2e10"
+  integrity sha512-CN86EKQ07+SgqfgGehMJsgrCEjc0sl1YDcj2xf9dA0Bn3ma2MTDkCyutxVcRfc2IVWfqAN1rn/L8/BH2v2+eqA==
+  dependencies:
+    "@sentry/types" "7.37.0"
+    tslib "^1.9.3"
+
+"@sentry/webpack-plugin@1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@sentry/webpack-plugin/-/webpack-plugin-1.20.0.tgz#e7add76122708fb6b4ee7951294b521019720e58"
+  integrity sha512-Ssj1mJVFsfU6vMCOM2d+h+KQR7QHSfeIP16t4l20Uq/neqWXZUQ2yvQfe4S3BjdbJXz/X4Rw8Hfy1Sd0ocunYw==
+  dependencies:
+    "@sentry/cli" "^1.74.6"
+    webpack-sources "^2.0.0 || ^3.0.0"
+
+"@stablelib/aead@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/aead/-/aead-1.0.1.tgz#c4b1106df9c23d1b867eb9b276d8f42d5fc4c0c3"
+  integrity sha512-q39ik6sxGHewqtO0nP4BuSe3db5G1fEJE8ukvngS2gLkBXyy6E7pLubhbYgnkDFv6V8cWaxcE4Xn0t6LWcJkyg==
+
+"@stablelib/binary@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/binary/-/binary-1.0.1.tgz#c5900b94368baf00f811da5bdb1610963dfddf7f"
+  integrity sha512-ClJWvmL6UBM/wjkvv/7m5VP3GMr9t0osr4yVgLZsLCOz4hGN9gIAFEqnJ0TsSMAN+n840nf2cHZnA5/KFqHC7Q==
+  dependencies:
+    "@stablelib/int" "^1.0.1"
+
+"@stablelib/bytes@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/bytes/-/bytes-1.0.1.tgz#0f4aa7b03df3080b878c7dea927d01f42d6a20d8"
+  integrity sha512-Kre4Y4kdwuqL8BR2E9hV/R5sOrUj6NanZaZis0V6lX5yzqC3hBuVSDXUIBqQv/sCpmuWRiHLwqiT1pqqjuBXoQ==
+
+"@stablelib/chacha20poly1305@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/chacha20poly1305/-/chacha20poly1305-1.0.1.tgz#de6b18e283a9cb9b7530d8767f99cde1fec4c2ee"
+  integrity sha512-MmViqnqHd1ymwjOQfghRKw2R/jMIGT3wySN7cthjXCBdO+qErNPUBnRzqNpnvIwg7JBCg3LdeCZZO4de/yEhVA==
+  dependencies:
+    "@stablelib/aead" "^1.0.1"
+    "@stablelib/binary" "^1.0.1"
+    "@stablelib/chacha" "^1.0.1"
+    "@stablelib/constant-time" "^1.0.1"
+    "@stablelib/poly1305" "^1.0.1"
+    "@stablelib/wipe" "^1.0.1"
+
+"@stablelib/chacha@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/chacha/-/chacha-1.0.1.tgz#deccfac95083e30600c3f92803a3a1a4fa761371"
+  integrity sha512-Pmlrswzr0pBzDofdFuVe1q7KdsHKhhU24e8gkEwnTGOmlC7PADzLVxGdn2PoNVBBabdg0l/IfLKg6sHAbTQugg==
+  dependencies:
+    "@stablelib/binary" "^1.0.1"
+    "@stablelib/wipe" "^1.0.1"
+
+"@stablelib/constant-time@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/constant-time/-/constant-time-1.0.1.tgz#bde361465e1cf7b9753061b77e376b0ca4c77e35"
+  integrity sha512-tNOs3uD0vSJcK6z1fvef4Y+buN7DXhzHDPqRLSXUel1UfqMB1PWNsnnAezrKfEwTLpN0cGH2p9NNjs6IqeD0eg==
+
+"@stablelib/ed25519@^1.0.2":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@stablelib/ed25519/-/ed25519-1.0.3.tgz#f8fdeb6f77114897c887bb6a3138d659d3f35996"
+  integrity sha512-puIMWaX9QlRsbhxfDc5i+mNPMY+0TmQEskunY1rZEBPi1acBCVQAhnsk/1Hk50DGPtVsZtAWQg4NHGlVaO9Hqg==
+  dependencies:
+    "@stablelib/random" "^1.0.2"
+    "@stablelib/sha512" "^1.0.1"
+    "@stablelib/wipe" "^1.0.1"
+
+"@stablelib/hash@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/hash/-/hash-1.0.1.tgz#3c944403ff2239fad8ebb9015e33e98444058bc5"
+  integrity sha512-eTPJc/stDkdtOcrNMZ6mcMK1e6yBbqRBaNW55XA1jU8w/7QdnCF0CmMmOD1m7VSkBR44PWrMHU2l6r8YEQHMgg==
+
+"@stablelib/hkdf@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/hkdf/-/hkdf-1.0.1.tgz#b4efd47fd56fb43c6a13e8775a54b354f028d98d"
+  integrity sha512-SBEHYE16ZXlHuaW5RcGk533YlBj4grMeg5TooN80W3NpcHRtLZLLXvKyX0qcRFxf+BGDobJLnwkvgEwHIDBR6g==
+  dependencies:
+    "@stablelib/hash" "^1.0.1"
+    "@stablelib/hmac" "^1.0.1"
+    "@stablelib/wipe" "^1.0.1"
+
+"@stablelib/hmac@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/hmac/-/hmac-1.0.1.tgz#3d4c1b8cf194cb05d28155f0eed8a299620a07ec"
+  integrity sha512-V2APD9NSnhVpV/QMYgCVMIYKiYG6LSqw1S65wxVoirhU/51ACio6D4yDVSwMzuTJXWZoVHbDdINioBwKy5kVmA==
+  dependencies:
+    "@stablelib/constant-time" "^1.0.1"
+    "@stablelib/hash" "^1.0.1"
+    "@stablelib/wipe" "^1.0.1"
+
+"@stablelib/int@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/int/-/int-1.0.1.tgz#75928cc25d59d73d75ae361f02128588c15fd008"
+  integrity sha512-byr69X/sDtDiIjIV6m4roLVWnNNlRGzsvxw+agj8CIEazqWGOQp2dTYgQhtyVXV9wpO6WyXRQUzLV/JRNumT2w==
+
+"@stablelib/keyagreement@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/keyagreement/-/keyagreement-1.0.1.tgz#4612efb0a30989deb437cd352cee637ca41fc50f"
+  integrity sha512-VKL6xBwgJnI6l1jKrBAfn265cspaWBPAPEc62VBQrWHLqVgNRE09gQ/AnOEyKUWrrqfD+xSQ3u42gJjLDdMDQg==
+  dependencies:
+    "@stablelib/bytes" "^1.0.1"
+
+"@stablelib/poly1305@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/poly1305/-/poly1305-1.0.1.tgz#93bfb836c9384685d33d70080718deae4ddef1dc"
+  integrity sha512-1HlG3oTSuQDOhSnLwJRKeTRSAdFNVB/1djy2ZbS35rBSJ/PFqx9cf9qatinWghC2UbfOYD8AcrtbUQl8WoxabA==
+  dependencies:
+    "@stablelib/constant-time" "^1.0.1"
+    "@stablelib/wipe" "^1.0.1"
+
+"@stablelib/random@^1.0.1", "@stablelib/random@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@stablelib/random/-/random-1.0.2.tgz#2dece393636489bf7e19c51229dd7900eddf742c"
+  integrity sha512-rIsE83Xpb7clHPVRlBj8qNe5L8ISQOzjghYQm/dZ7VaM2KHYwMW5adjQjrzTZCchFnNCNhkwtnOBa9HTMJCI8w==
+  dependencies:
+    "@stablelib/binary" "^1.0.1"
+    "@stablelib/wipe" "^1.0.1"
+
+"@stablelib/sha256@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/sha256/-/sha256-1.0.1.tgz#77b6675b67f9b0ea081d2e31bda4866297a3ae4f"
+  integrity sha512-GIIH3e6KH+91FqGV42Kcj71Uefd/QEe7Dy42sBTeqppXV95ggCcxLTk39bEr+lZfJmp+ghsR07J++ORkRELsBQ==
   dependencies:
-    "@sentry/types" "7.37.0"
-    tslib "^1.9.3"
+    "@stablelib/binary" "^1.0.1"
+    "@stablelib/hash" "^1.0.1"
+    "@stablelib/wipe" "^1.0.1"
 
-"@sentry/webpack-plugin@1.20.0":
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/@sentry/webpack-plugin/-/webpack-plugin-1.20.0.tgz#e7add76122708fb6b4ee7951294b521019720e58"
-  integrity sha512-Ssj1mJVFsfU6vMCOM2d+h+KQR7QHSfeIP16t4l20Uq/neqWXZUQ2yvQfe4S3BjdbJXz/X4Rw8Hfy1Sd0ocunYw==
+"@stablelib/sha512@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/sha512/-/sha512-1.0.1.tgz#6da700c901c2c0ceacbd3ae122a38ac57c72145f"
+  integrity sha512-13gl/iawHV9zvDKciLo1fQ8Bgn2Pvf7OV6amaRVKiq3pjQ3UmEpXxWiAfV8tYjUpeZroBxtyrwtdooQT/i3hzw==
   dependencies:
-    "@sentry/cli" "^1.74.6"
-    webpack-sources "^2.0.0 || ^3.0.0"
+    "@stablelib/binary" "^1.0.1"
+    "@stablelib/hash" "^1.0.1"
+    "@stablelib/wipe" "^1.0.1"
+
+"@stablelib/wipe@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@stablelib/wipe/-/wipe-1.0.1.tgz#d21401f1d59ade56a62e139462a97f104ed19a36"
+  integrity sha512-WfqfX/eXGiAd3RJe4VU2snh/ZPwtSjLG4ynQ/vYzvghTh7dHFcI1wl+nrkWG6lGhukOxOsUHfv8dUXr58D0ayg==
+
+"@stablelib/x25519@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@stablelib/x25519/-/x25519-1.0.3.tgz#13c8174f774ea9f3e5e42213cbf9fc68a3c7b7fd"
+  integrity sha512-KnTbKmUhPhHavzobclVJQG5kuivH+qDLpe84iRqX3CLrKp881cF160JvXJ+hjn1aMyCwYOKeIZefIH/P5cJoRw==
+  dependencies:
+    "@stablelib/keyagreement" "^1.0.1"
+    "@stablelib/random" "^1.0.2"
+    "@stablelib/wipe" "^1.0.1"
 
 "@swc/helpers@0.4.11":
   version "0.4.11"
@@ -3393,6 +4287,13 @@
   dependencies:
     "@types/lodash" "*"
 
+"@types/lodash.mergewith@4.6.7":
+  version "4.6.7"
+  resolved "https://registry.yarnpkg.com/@types/lodash.mergewith/-/lodash.mergewith-4.6.7.tgz#eaa65aa5872abdd282f271eae447b115b2757212"
+  integrity sha512-3m+lkO5CLRRYU0fhGRp7zbsGi6+BZj0uTVSwvcKU+nSlhjA9/QRNfuSGnD2mX6hQA7ZbmcCkzk5h4ZYGOtk14A==
+  dependencies:
+    "@types/lodash" "*"
+
 "@types/lodash@*":
   version "4.14.182"
   resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz"
@@ -3422,24 +4323,14 @@
 
 "@types/node@10.12.18":
   version "10.12.18"
-  resolved "https://registry.npmjs.org/@types/node/-/node-10.12.18.tgz"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.18.tgz#1d3ca764718915584fcd9f6344621b7672665c67"
   integrity sha512-fh+pAqt4xRzPfqA6eh3Z2y6fyZavRIumvjhaCL753+TVkGKGhpPeyrJG2JftD0T9q4GF00KjefsQ+PQNDdWQaQ==
 
-"@types/node@11.11.6":
-  version "11.11.6"
-  resolved "https://registry.npmjs.org/@types/node/-/node-11.11.6.tgz"
-  integrity sha512-Exw4yUWMBXM3X+8oqzJNRqZSwUAaS4+7NdvHqQuFi/d+synz++xmX3QIf+BFqneW8N31R8Ky+sikfZUXq07ggQ==
-
 "@types/node@>=13.7.0":
   version "18.11.8"
   resolved "https://registry.npmjs.org/@types/node/-/node-18.11.8.tgz"
   integrity sha512-uGwPWlE0Hj972KkHtCDVwZ8O39GmyjfMane1Z3GUBGGnkZ2USDq7SxLpVIiIHpweY9DS0QTDH0Nw7RNBsAAZ5A==
 
-"@types/node@^13.7.0":
-  version "13.13.52"
-  resolved "https://registry.npmjs.org/@types/node/-/node-13.13.52.tgz"
-  integrity sha512-s3nugnZumCC//n4moGGe6tkNMyYEdaDBitVjwPxXmR5lnMG5dHePinH2EdxkG3Rh1ghFHHixAG4NJhpJW1rthQ==
-
 "@types/node@^14.0.0":
   version "14.18.28"
   resolved "https://registry.npmjs.org/@types/node/-/node-14.18.28.tgz"
@@ -3479,6 +4370,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^4.4.0":
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e"
+  integrity sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^18.0.21":
   version "18.0.21"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.0.21.tgz"
@@ -3585,154 +4483,212 @@
     "@typescript-eslint/types" "5.23.0"
     eslint-visitor-keys "^3.0.0"
 
-"@walletconnect/browser-utils@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.npmjs.org/@walletconnect/browser-utils/-/browser-utils-1.8.0.tgz"
-  integrity sha512-Wcqqx+wjxIo9fv6eBUFHPsW1y/bGWWRboni5dfD8PtOmrihrEpOCmvRJe4rfl7xgJW8Ea9UqKEaq0bIRLHlK4A==
+"@walletconnect/core@2.8.0":
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/core/-/core-2.8.0.tgz#f694e1562413c4eb700f6b3a83fa7964342100c0"
+  integrity sha512-pl7x4sq1nuU0ixA9wF2ecjDecUzIauKr7ZwC29rs9qTcmDpxgJbbOdZwaSl+dJlf1bHC87adVLf5KAkwwo9PzQ==
+  dependencies:
+    "@walletconnect/heartbeat" "1.2.1"
+    "@walletconnect/jsonrpc-provider" "1.0.13"
+    "@walletconnect/jsonrpc-types" "1.0.3"
+    "@walletconnect/jsonrpc-utils" "1.0.8"
+    "@walletconnect/jsonrpc-ws-connection" "^1.0.11"
+    "@walletconnect/keyvaluestorage" "^1.0.2"
+    "@walletconnect/logger" "^2.0.1"
+    "@walletconnect/relay-api" "^1.0.9"
+    "@walletconnect/relay-auth" "^1.0.4"
+    "@walletconnect/safe-json" "^1.0.2"
+    "@walletconnect/time" "^1.0.2"
+    "@walletconnect/types" "2.8.0"
+    "@walletconnect/utils" "2.8.0"
+    events "^3.3.0"
+    lodash.isequal "4.5.0"
+    uint8arrays "^3.1.0"
+
+"@walletconnect/environment@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/environment/-/environment-1.0.1.tgz#1d7f82f0009ab821a2ba5ad5e5a7b8ae3b214cd7"
+  integrity sha512-T426LLZtHj8e8rYnKfzsw1aG6+M0BT1ZxayMdv/p8yM0MU+eJDISqNY3/bccxRr4LrF9csq02Rhqt08Ibl0VRg==
   dependencies:
-    "@walletconnect/safe-json" "1.0.0"
-    "@walletconnect/types" "^1.8.0"
-    "@walletconnect/window-getters" "1.0.0"
-    "@walletconnect/window-metadata" "1.0.0"
-    detect-browser "5.2.0"
+    tslib "1.14.1"
 
-"@walletconnect/client@1.8.0":
-  version "1.8.0"
-  resolved "https://registry.npmjs.org/@walletconnect/client/-/client-1.8.0.tgz"
-  integrity sha512-svyBQ14NHx6Cs2j4TpkQaBI/2AF4+LXz64FojTjMtV4VMMhl81jSO1vNeg+yYhQzvjcGH/GpSwixjyCW0xFBOQ==
+"@walletconnect/events@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/events/-/events-1.0.1.tgz#2b5f9c7202019e229d7ccae1369a9e86bda7816c"
+  integrity sha512-NPTqaoi0oPBVNuLv7qPaJazmGHs5JGyO8eEAk5VGKmJzDR7AHzD4k6ilox5kxk1iwiOnFopBOOMLs86Oa76HpQ==
   dependencies:
-    "@walletconnect/core" "^1.8.0"
-    "@walletconnect/iso-crypto" "^1.8.0"
-    "@walletconnect/types" "^1.8.0"
-    "@walletconnect/utils" "^1.8.0"
+    keyvaluestorage-interface "^1.0.0"
+    tslib "1.14.1"
 
-"@walletconnect/core@^1.0.0", "@walletconnect/core@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.npmjs.org/@walletconnect/core/-/core-1.8.0.tgz"
-  integrity sha512-aFTHvEEbXcZ8XdWBw6rpQDte41Rxwnuk3SgTD8/iKGSRTni50gI9S3YEzMj05jozSiOBxQci4pJDMVhIUMtarw==
+"@walletconnect/heartbeat@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/heartbeat/-/heartbeat-1.2.1.tgz#afaa3a53232ae182d7c9cff41c1084472d8f32e9"
+  integrity sha512-yVzws616xsDLJxuG/28FqtZ5rzrTA4gUjdEMTbWB5Y8V1XHRmqq4efAxCw5ie7WjbXFSUyBHaWlMR+2/CpQC5Q==
   dependencies:
-    "@walletconnect/socket-transport" "^1.8.0"
-    "@walletconnect/types" "^1.8.0"
-    "@walletconnect/utils" "^1.8.0"
+    "@walletconnect/events" "^1.0.1"
+    "@walletconnect/time" "^1.0.2"
+    tslib "1.14.1"
 
-"@walletconnect/crypto@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/@walletconnect/crypto/-/crypto-1.0.2.tgz"
-  integrity sha512-+OlNtwieUqVcOpFTvLBvH+9J9pntEqH5evpINHfVxff1XIgwV55PpbdvkHu6r9Ib4WQDOFiD8OeeXs1vHw7xKQ==
+"@walletconnect/jsonrpc-provider@1.0.13":
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-provider/-/jsonrpc-provider-1.0.13.tgz#9a74da648d015e1fffc745f0c7d629457f53648b"
+  integrity sha512-K73EpThqHnSR26gOyNEL+acEex3P7VWZe6KE12ZwKzAt2H4e5gldZHbjsu2QR9cLeJ8AXuO7kEMOIcRv1QEc7g==
   dependencies:
-    "@walletconnect/encoding" "^1.0.1"
-    "@walletconnect/environment" "^1.0.0"
-    "@walletconnect/randombytes" "^1.0.2"
-    aes-js "^3.1.2"
-    hash.js "^1.1.7"
+    "@walletconnect/jsonrpc-utils" "^1.0.8"
+    "@walletconnect/safe-json" "^1.0.2"
+    tslib "1.14.1"
 
-"@walletconnect/encoding@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/@walletconnect/encoding/-/encoding-1.0.1.tgz"
-  integrity sha512-8opL2rs6N6E3tJfsqwS82aZQDL3gmupWUgmvuZ3CGU7z/InZs3R9jkzH8wmYtpbq0sFK3WkJkQRZFFk4BkrmFA==
+"@walletconnect/jsonrpc-types@1.0.3", "@walletconnect/jsonrpc-types@^1.0.2", "@walletconnect/jsonrpc-types@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-types/-/jsonrpc-types-1.0.3.tgz#65e3b77046f1a7fa8347ae02bc1b841abe6f290c"
+  integrity sha512-iIQ8hboBl3o5ufmJ8cuduGad0CQm3ZlsHtujv9Eu16xq89q+BG7Nh5VLxxUgmtpnrePgFkTwXirCTkwJH1v+Yw==
   dependencies:
-    is-typedarray "1.0.0"
-    typedarray-to-buffer "3.1.5"
+    keyvaluestorage-interface "^1.0.0"
+    tslib "1.14.1"
 
-"@walletconnect/environment@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@walletconnect/environment/-/environment-1.0.0.tgz"
-  integrity sha512-4BwqyWy6KpSvkocSaV7WR3BlZfrxLbJSLkg+j7Gl6pTDE+U55lLhJvQaMuDVazXYxcjBsG09k7UlH7cGiUI5vQ==
+"@walletconnect/jsonrpc-utils@1.0.8", "@walletconnect/jsonrpc-utils@^1.0.6", "@walletconnect/jsonrpc-utils@^1.0.8":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-utils/-/jsonrpc-utils-1.0.8.tgz#82d0cc6a5d6ff0ecc277cb35f71402c91ad48d72"
+  integrity sha512-vdeb03bD8VzJUL6ZtzRYsFMq1eZQcM3EAzT0a3st59dyLfJ0wq+tKMpmGH7HlB7waD858UWgfIcudbPFsbzVdw==
+  dependencies:
+    "@walletconnect/environment" "^1.0.1"
+    "@walletconnect/jsonrpc-types" "^1.0.3"
+    tslib "1.14.1"
 
-"@walletconnect/iso-crypto@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.npmjs.org/@walletconnect/iso-crypto/-/iso-crypto-1.8.0.tgz"
-  integrity sha512-pWy19KCyitpfXb70hA73r9FcvklS+FvO9QUIttp3c2mfW8frxgYeRXfxLRCIQTkaYueRKvdqPjbyhPLam508XQ==
+"@walletconnect/jsonrpc-ws-connection@^1.0.11":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-ws-connection/-/jsonrpc-ws-connection-1.0.11.tgz#1ce59d86f273d576ca73385961303ebd44dd923f"
+  integrity sha512-TiFJ6saasKXD+PwGkm5ZGSw0837nc6EeFmurSPgIT/NofnOV4Tv7CVJqGQN0rQYoJUSYu21cwHNYaFkzNpUN+w==
   dependencies:
-    "@walletconnect/crypto" "^1.0.2"
-    "@walletconnect/types" "^1.8.0"
-    "@walletconnect/utils" "^1.8.0"
+    "@walletconnect/jsonrpc-utils" "^1.0.6"
+    "@walletconnect/safe-json" "^1.0.2"
+    events "^3.3.0"
+    tslib "1.14.1"
+    ws "^7.5.1"
 
-"@walletconnect/jsonrpc-types@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/@walletconnect/jsonrpc-types/-/jsonrpc-types-1.0.1.tgz"
-  integrity sha512-+6coTtOuChCqM+AoYyi4Q83p9l/laI6NvuM2/AHaZFuf0gT0NjW7IX2+86qGyizn7Ptq4AYZmfxurAxTnhefuw==
+"@walletconnect/keyvaluestorage@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/keyvaluestorage/-/keyvaluestorage-1.0.2.tgz#92f5ca0f54c1a88a093778842ce0c874d86369c8"
+  integrity sha512-U/nNG+VLWoPFdwwKx0oliT4ziKQCEoQ27L5Hhw8YOFGA2Po9A9pULUYNWhDgHkrb0gYDNt//X7wABcEWWBd3FQ==
   dependencies:
-    keyvaluestorage-interface "^1.0.0"
+    safe-json-utils "^1.1.1"
+    tslib "1.14.1"
 
-"@walletconnect/jsonrpc-utils@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/@walletconnect/jsonrpc-utils/-/jsonrpc-utils-1.0.3.tgz"
-  integrity sha512-3yb49bPk16MNLk6uIIHPSHQCpD6UAo1OMOx1rM8cW/MPEAYAzrSW5hkhG7NEUwX9SokRIgnZK3QuQkiyNzBMhQ==
+"@walletconnect/logger@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/logger/-/logger-2.0.1.tgz#7f489b96e9a1ff6bf3e58f0fbd6d69718bf844a8"
+  integrity sha512-SsTKdsgWm+oDTBeNE/zHxxr5eJfZmE9/5yp/Ku+zJtcTAjELb3DXueWkDXmE9h8uHIbJzIb5wj5lPdzyrjT6hQ==
   dependencies:
-    "@walletconnect/environment" "^1.0.0"
-    "@walletconnect/jsonrpc-types" "^1.0.1"
+    pino "7.11.0"
+    tslib "1.14.1"
 
-"@walletconnect/node-crypto@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@walletconnect/node-crypto/-/node-crypto-1.0.0.tgz"
-  integrity sha512-0Umq6k3aw5AtnOnyAlQITZgSrPsiUVOh5oLy5wxzKXSMlWSzvtx2/9dzV1AROFXYIfhp2HKXblyxb5e4PFvVcA==
+"@walletconnect/relay-api@^1.0.9":
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/@walletconnect/relay-api/-/relay-api-1.0.9.tgz#f8c2c3993dddaa9f33ed42197fc9bfebd790ecaf"
+  integrity sha512-Q3+rylJOqRkO1D9Su0DPE3mmznbAalYapJ9qmzDgK28mYF9alcP3UwG/og5V7l7CFOqzCLi7B8BvcBUrpDj0Rg==
   dependencies:
-    "@walletconnect/types" "^1.0.0"
-    "@walletconnect/utils" "^1.0.0"
+    "@walletconnect/jsonrpc-types" "^1.0.2"
+    tslib "1.14.1"
 
-"@walletconnect/node@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@walletconnect/node/-/node-1.0.0.tgz"
-  integrity sha512-yk5HGMWnysgqp0ePPuTrIbGB85V2Uhikh/+belffQfp03VYPQJnJj/x117KjMnAZXmzQD5lLl5bkvoy1CTKrJQ==
+"@walletconnect/relay-auth@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@walletconnect/relay-auth/-/relay-auth-1.0.4.tgz#0b5c55c9aa3b0ef61f526ce679f3ff8a5c4c2c7c"
+  integrity sha512-kKJcS6+WxYq5kshpPaxGHdwf5y98ZwbfuS4EE/NkQzqrDFm5Cj+dP8LofzWvjrrLkZq7Afy7WrQMXdLy8Sx7HQ==
   dependencies:
-    "@walletconnect/core" "^1.0.0"
-    "@walletconnect/node-crypto" "^1.0.0"
-    "@walletconnect/types" "^1.0.0"
-    "@walletconnect/utils" "^1.0.0"
+    "@stablelib/ed25519" "^1.0.2"
+    "@stablelib/random" "^1.0.1"
+    "@walletconnect/safe-json" "^1.0.1"
+    "@walletconnect/time" "^1.0.2"
+    tslib "1.14.1"
+    uint8arrays "^3.0.0"
 
-"@walletconnect/randombytes@^1.0.2":
+"@walletconnect/safe-json@^1.0.1", "@walletconnect/safe-json@^1.0.2":
   version "1.0.2"
-  resolved "https://registry.npmjs.org/@walletconnect/randombytes/-/randombytes-1.0.2.tgz"
-  integrity sha512-ivgOtAyqQnN0rLQmOFPemsgYGysd/ooLfaDA/ACQ3cyqlca56t3rZc7pXfqJOIETx/wSyoF5XbwL+BqYodw27A==
+  resolved "https://registry.yarnpkg.com/@walletconnect/safe-json/-/safe-json-1.0.2.tgz#7237e5ca48046e4476154e503c6d3c914126fa77"
+  integrity sha512-Ogb7I27kZ3LPC3ibn8ldyUr5544t3/STow9+lzz7Sfo808YD7SBWk7SAsdBFlYgP2zDRy2hS3sKRcuSRM0OTmA==
+  dependencies:
+    tslib "1.14.1"
+
+"@walletconnect/sign-client@^2.7.2":
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/sign-client/-/sign-client-2.8.0.tgz#735dc8bf120242584fb2ff22c6a3d672c1fae1a1"
+  integrity sha512-+l9qwvVeUGk0fBQsgx6yb6hdGYt8uQ3a9jR9GgsJvm8FjFh1oUzTKqFnG7XdhCBnzFnbSoLr41Xe8PbN8qoUSw==
+  dependencies:
+    "@walletconnect/core" "2.8.0"
+    "@walletconnect/events" "^1.0.1"
+    "@walletconnect/heartbeat" "1.2.1"
+    "@walletconnect/jsonrpc-utils" "1.0.8"
+    "@walletconnect/logger" "^2.0.1"
+    "@walletconnect/time" "^1.0.2"
+    "@walletconnect/types" "2.8.0"
+    "@walletconnect/utils" "2.8.0"
+    events "^3.3.0"
+
+"@walletconnect/time@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/time/-/time-1.0.2.tgz#6c5888b835750ecb4299d28eecc5e72c6d336523"
+  integrity sha512-uzdd9woDcJ1AaBZRhqy5rNC9laqWGErfc4dxA9a87mPdKOgWMD85mcFo9dIYIts/Jwocfwn07EC6EzclKubk/g==
   dependencies:
-    "@walletconnect/encoding" "^1.0.1"
-    "@walletconnect/environment" "^1.0.0"
-    randombytes "^2.1.0"
-
-"@walletconnect/safe-json@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@walletconnect/safe-json/-/safe-json-1.0.0.tgz"
-  integrity sha512-QJzp/S/86sUAgWY6eh5MKYmSfZaRpIlmCJdi5uG4DJlKkZrHEF7ye7gA+VtbVzvTtpM/gRwO2plQuiooIeXjfg==
+    tslib "1.14.1"
 
-"@walletconnect/socket-transport@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.npmjs.org/@walletconnect/socket-transport/-/socket-transport-1.8.0.tgz"
-  integrity sha512-5DyIyWrzHXTcVp0Vd93zJ5XMW61iDM6bcWT4p8DTRfFsOtW46JquruMhxOLeCOieM4D73kcr3U7WtyR4JUsGuQ==
+"@walletconnect/types@2.7.2":
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.7.2.tgz#508d1755110864dee294f955e09b7da3f8ee0064"
+  integrity sha512-1O2UefakZpT0ErRfEAXY7Ls3qdUrKDky/DsK088xR6klyfkQOx+aSVH0fJYLhmnqPTuvp3lrqNbsDc0s6/6nvg==
+  dependencies:
+    "@walletconnect/events" "^1.0.1"
+    "@walletconnect/heartbeat" "1.2.1"
+    "@walletconnect/jsonrpc-types" "^1.0.2"
+    "@walletconnect/keyvaluestorage" "^1.0.2"
+    "@walletconnect/logger" "^2.0.1"
+    events "^3.3.0"
+
+"@walletconnect/types@2.8.0", "@walletconnect/types@^2.7.2":
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-2.8.0.tgz#f8a5f09ee2b31abed231966e7e1eebd22be058a2"
+  integrity sha512-FMeGK3lGXFDwcs5duoN74xL1aLrkgYqnavWE0DnFPt2i1QmSUITU9c8f88EDh8uPXANd2WIYOItm0DVCNxLGGA==
+  dependencies:
+    "@walletconnect/events" "^1.0.1"
+    "@walletconnect/heartbeat" "1.2.1"
+    "@walletconnect/jsonrpc-types" "1.0.3"
+    "@walletconnect/keyvaluestorage" "^1.0.2"
+    "@walletconnect/logger" "^2.0.1"
+    events "^3.3.0"
+
+"@walletconnect/utils@2.8.0", "@walletconnect/utils@^2.7.2":
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-2.8.0.tgz#c219e78fd2c35062cf3e37f84961afde8da9b9a1"
+  integrity sha512-Q8OwMtUevIn1+64LXyTMLlhH58k3UOAjU5b3smYZ7CEEmwEGpOTfTDAWrB3v+ZDIhjyqP94+8fuvKIbcVLKLWA==
+  dependencies:
+    "@stablelib/chacha20poly1305" "1.0.1"
+    "@stablelib/hkdf" "1.0.1"
+    "@stablelib/random" "^1.0.2"
+    "@stablelib/sha256" "1.0.1"
+    "@stablelib/x25519" "^1.0.3"
+    "@walletconnect/relay-api" "^1.0.9"
+    "@walletconnect/safe-json" "^1.0.2"
+    "@walletconnect/time" "^1.0.2"
+    "@walletconnect/types" "2.8.0"
+    "@walletconnect/window-getters" "^1.0.1"
+    "@walletconnect/window-metadata" "^1.0.1"
+    detect-browser "5.3.0"
+    query-string "7.1.3"
+    uint8arrays "^3.1.0"
+
+"@walletconnect/window-getters@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/window-getters/-/window-getters-1.0.1.tgz#f36d1c72558a7f6b87ecc4451fc8bd44f63cbbdc"
+  integrity sha512-vHp+HqzGxORPAN8gY03qnbTMnhqIwjeRJNOMOAzePRg4xVEEE2WvYsI9G2NMjOknA8hnuYbU3/hwLcKbjhc8+Q==
   dependencies:
-    "@walletconnect/types" "^1.8.0"
-    "@walletconnect/utils" "^1.8.0"
-    ws "7.5.3"
-
-"@walletconnect/types@^1.0.0", "@walletconnect/types@^1.6.4", "@walletconnect/types@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.npmjs.org/@walletconnect/types/-/types-1.8.0.tgz"
-  integrity sha512-Cn+3I0V0vT9ghMuzh1KzZvCkiAxTq+1TR2eSqw5E5AVWfmCtECFkVZBP6uUJZ8YjwLqXheI+rnjqPy7sVM4Fyg==
-
-"@walletconnect/utils@^1.0.0", "@walletconnect/utils@^1.6.4", "@walletconnect/utils@^1.8.0":
-  version "1.8.0"
-  resolved "https://registry.npmjs.org/@walletconnect/utils/-/utils-1.8.0.tgz"
-  integrity sha512-zExzp8Mj1YiAIBfKNm5u622oNw44WOESzo6hj+Q3apSMIb0Jph9X3GDIdbZmvVZsNPxWDL7uodKgZcCInZv2vA==
-  dependencies:
-    "@walletconnect/browser-utils" "^1.8.0"
-    "@walletconnect/encoding" "^1.0.1"
-    "@walletconnect/jsonrpc-utils" "^1.0.3"
-    "@walletconnect/types" "^1.8.0"
-    bn.js "4.11.8"
-    js-sha3 "0.8.0"
-    query-string "6.13.5"
-
-"@walletconnect/window-getters@1.0.0", "@walletconnect/window-getters@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@walletconnect/window-getters/-/window-getters-1.0.0.tgz"
-  integrity sha512-xB0SQsLaleIYIkSsl43vm8EwETpBzJ2gnzk7e0wMF3ktqiTGS6TFHxcprMl5R44KKh4tCcHCJwolMCaDSwtAaA==
+    tslib "1.14.1"
 
-"@walletconnect/window-metadata@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/@walletconnect/window-metadata/-/window-metadata-1.0.0.tgz"
-  integrity sha512-9eFvmJxIKCC3YWOL97SgRkKhlyGXkrHwamfechmqszbypFspaSk+t2jQXAEU7YClHF6Qjw5eYOmy1//zFi9/GA==
+"@walletconnect/window-metadata@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@walletconnect/window-metadata/-/window-metadata-1.0.1.tgz#2124f75447b7e989e4e4e1581d55d25bc75f7be5"
+  integrity sha512-9koTqyGrM2cqFRW517BPY/iEtUDx2r1+Pwwu5m7sJ7ka79wi3EyqhqcICk/yDmv6jAS1rjKgTKXlEhanYjijcA==
   dependencies:
-    "@walletconnect/window-getters" "^1.0.0"
+    "@walletconnect/window-getters" "^1.0.1"
+    tslib "1.14.1"
 
 "@whatwg-node/fetch@0.5.1":
   version "0.5.1"
@@ -3782,11 +4738,21 @@
   resolved "https://registry.npmjs.org/@zag-js/element-size/-/element-size-0.1.0.tgz"
   integrity sha512-QF8wp0+V8++z+FHXiIw93+zudtubYszOtYbNgK39fg3pi+nCZtuSm4L1jC5QZMatNZ83MfOzyNCfgUubapagJQ==
 
+"@zag-js/element-size@0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@zag-js/element-size/-/element-size-0.3.2.tgz#ebb76af2a024230482406db41344598d1a9f54f4"
+  integrity sha512-bVvvigUGvAuj7PCkE5AbzvTJDTw5f3bg9nQdv+ErhVN8SfPPppLJEmmWdxqsRzrHXgx8ypJt/+Ty0kjtISVDsQ==
+
 "@zag-js/focus-visible@0.1.0":
   version "0.1.0"
   resolved "https://registry.npmjs.org/@zag-js/focus-visible/-/focus-visible-0.1.0.tgz"
   integrity sha512-PeaBcTmdZWcFf7n1aM+oiOdZc+sy14qi0emPIeUuGMTjbP0xLGrZu43kdpHnWSXy7/r4Ubp/vlg50MCV8+9Isg==
 
+"@zag-js/focus-visible@0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@zag-js/focus-visible/-/focus-visible-0.2.2.tgz#56233480ca1275d3218fb2e10696a33d1a6b9e64"
+  integrity sha512-0j2gZq8HiZ51z4zNnSkF1iSkqlwRDvdH+son3wHdoz+7IUdMN/5Exd4TxMJ+gq2Of1DiXReYLL9qqh2PdQ4wgA==
+
 JSONStream@^1.0.4:
   version "1.3.5"
   resolved "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz"
@@ -3827,11 +4793,6 @@ add-stream@^1.0.0:
   resolved "https://registry.npmjs.org/add-stream/-/add-stream-1.0.0.tgz"
   integrity sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==
 
-aes-js@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.npmjs.org/aes-js/-/aes-js-3.1.2.tgz"
-  integrity sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ==
-
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz"
@@ -3946,6 +4907,13 @@ aria-hidden@^1.1.1:
   dependencies:
     tslib "^1.0.0"
 
+aria-hidden@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954"
+  integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==
+  dependencies:
+    tslib "^2.0.0"
+
 aria-query@^4.2.2:
   version "4.2.2"
   resolved "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz"
@@ -4034,6 +5002,11 @@ at-least-node@^1.0.0:
   resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
+atomic-sleep@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
+  integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
+
 attr-accept@^2.2.2:
   version "2.2.2"
   resolved "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz"
@@ -4051,12 +5024,12 @@ axe-core@^4.3.5:
 
 axios@0.21.1:
   version "0.21.1"
-  resolved "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
   integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
   dependencies:
     follow-redirects "^1.10.0"
 
-axios@^0.21.1, axios@^0.21.2:
+axios@^0.21.2:
   version "0.21.4"
   resolved "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz"
   integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
@@ -4065,7 +5038,7 @@ axios@^0.21.1, axios@^0.21.2:
 
 axios@^0.27.2:
   version "0.27.2"
-  resolved "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
   integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
   dependencies:
     follow-redirects "^1.14.9"
@@ -4087,7 +5060,7 @@ axobject-query@^2.2.0:
 
 babel-plugin-macros@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
   integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
   dependencies:
     "@babel/runtime" "^7.12.5"
@@ -4139,7 +5112,7 @@ balanced-match@^1.0.0:
 
 base-x@^3.0.2:
   version "3.0.9"
-  resolved "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz"
+  resolved "https://registry.yarnpkg.com/base-x/-/base-x-3.0.9.tgz#6349aaabb58526332de9f60995e548a53fe21320"
   integrity sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==
   dependencies:
     safe-buffer "^5.0.1"
@@ -4156,7 +5129,7 @@ bech32@^1.1.3, bech32@^1.1.4:
 
 big-integer@^1.6.48:
   version "1.6.51"
-  resolved "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz"
+  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
   integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
 
 big.js@^6.2.1:
@@ -4171,14 +5144,14 @@ binary-extensions@^2.0.0:
 
 bindings@^1.3.0:
   version "1.5.0"
-  resolved "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
   integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
   dependencies:
     file-uri-to-path "1.0.0"
 
 bip32@^2.0.6:
   version "2.0.6"
-  resolved "https://registry.npmjs.org/bip32/-/bip32-2.0.6.tgz"
+  resolved "https://registry.yarnpkg.com/bip32/-/bip32-2.0.6.tgz#6a81d9f98c4cd57d05150c60d8f9e75121635134"
   integrity sha512-HpV5OMLLGTjSVblmrtYRfFFKuQB+GArM0+XP8HGWfJ5vxYBqo+DesvJwOdC2WJ3bCkZShGf0QIfoIpeomVzVdA==
   dependencies:
     "@types/node" "10.12.18"
@@ -4190,14 +5163,11 @@ bip32@^2.0.6:
     wif "^2.0.6"
 
 bip39@^3.0.2, bip39@^3.0.3:
-  version "3.0.4"
-  resolved "https://registry.npmjs.org/bip39/-/bip39-3.0.4.tgz"
-  integrity sha512-YZKQlb752TrUWqHWj7XAwCSjYEgGAk+/Aas3V7NyjQeZYsztO8JnQUaCWhcnL4T+jL8nvB8typ2jRPzTlgugNw==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/bip39/-/bip39-3.1.0.tgz#c55a418deaf48826a6ceb34ac55b3ee1577e18a3"
+  integrity sha512-c9kiwdk45Do5GL0vJMe7tS95VjCii65mYAH7DfWl3uW8AVzXKQVUm64i3hzVybBDMp9r7j9iNxR85+ul8MdN/A==
   dependencies:
-    "@types/node" "11.11.6"
-    create-hash "^1.1.0"
-    pbkdf2 "^3.0.9"
-    randombytes "^2.0.1"
+    "@noble/hashes" "^1.2.0"
 
 bl@^4.1.0:
   version "4.1.0"
@@ -4208,11 +5178,6 @@ bl@^4.1.0:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
-bn.js@4.11.8:
-  version "4.11.8"
-  resolved "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz"
-  integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
-
 bn.js@^4.11.8, bn.js@^4.11.9:
   version "4.12.0"
   resolved "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz"
@@ -4225,7 +5190,7 @@ bn.js@^5.2.0, bn.js@^5.2.1:
 
 bowser@2.11.0:
   version "2.11.0"
-  resolved "https://registry.npmjs.org/bowser/-/bowser-2.11.0.tgz"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
   integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==
 
 brace-expansion@^1.1.7:
@@ -4267,14 +5232,14 @@ browserslist@^4.20.2, browserslist@^4.21.3:
 
 bs58@^4.0.0:
   version "4.0.1"
-  resolved "https://registry.npmjs.org/bs58/-/bs58-4.0.1.tgz"
+  resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
   integrity sha512-Ok3Wdf5vOIlBrgCvTq96gBkJw+JUEzdBgyaza5HLtPm7yTHkjRy8+JzNyHF7BHa0bNWOQIp3m5YF0nnFcOIKLw==
   dependencies:
     base-x "^3.0.2"
 
 bs58check@<3.0.0, bs58check@^2.1.1, bs58check@^2.1.2:
   version "2.1.2"
-  resolved "https://registry.npmjs.org/bs58check/-/bs58check-2.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc"
   integrity sha512-0TS1jicxdU09dwJMNZtVAfzPi6Q6QeN0pM1Fkzrjn+XYHvzMKPU3pHVpva+769iNVSfIYWf7LJ6WR+BuuMf8cA==
   dependencies:
     bs58 "^4.0.0"
@@ -4300,7 +5265,7 @@ buffer-from@^1.0.0:
 
 buffer@6.0.3, buffer@^6.0.3:
   version "6.0.3"
-  resolved "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
   integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
   dependencies:
     base64-js "^1.3.1"
@@ -4316,7 +5281,7 @@ buffer@^5.5.0:
 
 buffer@~5.4.3:
   version "5.4.3"
-  resolved "https://registry.npmjs.org/buffer/-/buffer-5.4.3.tgz"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.4.3.tgz#3fbc9c69eb713d323e3fc1a895eee0710c072115"
   integrity sha512-zvj65TkFeIt3i6aj5bIvJDzjjQQGs4o/sNoezg1F1kYap9Nu2jcUdpwzRSJTHMMzG0H7bZkn4rNQpImhuxWX2A==
   dependencies:
     base64-js "^1.0.2"
@@ -4388,21 +5353,20 @@ capital-case@^1.0.4:
     tslib "^2.0.3"
     upper-case-first "^2.0.2"
 
-chain-registry@1.13.0:
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/chain-registry/-/chain-registry-1.13.0.tgz#375d7cbc7288f9915bde11758355a49c90395b4d"
-  integrity sha512-LFfKuEN2fV1QHJuTdqz1VmdiMGy87yAAYODy6i6/9tC+m6hwDroIPhR8iwuY4BxyJMZj9yr2cpD8m+8X8cZ/PA==
+chain-registry@^1.14.0, chain-registry@^1.5.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/chain-registry/-/chain-registry-1.14.0.tgz#874f7c4d416b5122f25d7d8e89e22368074bef1b"
+  integrity sha512-j5PgLP8coJ4uIUtpd2fXTLa3ass2ahbx35+g6eLquDZpIg/0Sr7SKX7M2/0jnaT7ohHKnRLMJxOnBHaDpuotoQ==
   dependencies:
     "@babel/runtime" "^7.21.0"
     "@chain-registry/types" "^0.16.0"
 
-chain-registry@^0.14.0:
-  version "0.14.0"
-  resolved "https://registry.npmjs.org/chain-registry/-/chain-registry-0.14.0.tgz"
-  integrity sha512-7nsE0pkdUEuLWxVsLiLTvwrnGFH8ju8aB3y6c/SXZszwsRIQ4umZ2to9KNQHjvVVc2KkiX0//HkZjh+vUxTsOw==
+chakra-react-select@^4.4.2:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/chakra-react-select/-/chakra-react-select-4.6.0.tgz#a1a35ee7c531db47ac9c8bd412fb0a3745e77321"
+  integrity sha512-Ckcs+ofX5LxCc0oOz4SorDIRqF/afd5tAQOa694JVJiIckYorUmZASEUSSDdXaZltsUAtJE11CUmEZgVVsk9Eg==
   dependencies:
-    "@babel/runtime" "^7.19.0"
-    "@chain-registry/types" "^0.11.0"
+    react-select "5.7.0"
 
 chalk@3.0.0:
   version "3.0.0"
@@ -4470,7 +5434,7 @@ chardet@^0.7.0:
 
 charenc@~0.0.1:
   version "0.0.2"
-  resolved "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
   integrity sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==
 
 chokidar@^3.5.2:
@@ -4490,7 +5454,7 @@ chokidar@^3.5.2:
 
 cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
   integrity sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==
   dependencies:
     inherits "^2.0.1"
@@ -4591,6 +5555,11 @@ color-name@~1.1.4:
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color2k@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/color2k/-/color2k-2.0.2.tgz#ac2b4aea11c822a6bcb70c768b5a289f4fffcebb"
+  integrity sha512-kJhwH5nAwb34tmyuqq/lgjEKzlFXn1U99NlnB6Ws4qVaERcRUYeYP1cBw6BJ4vxaWStAUEef4WMr7WjOCnBt8w==
+
 colorette@^2.0.16, colorette@^2.0.17:
   version "2.0.19"
   resolved "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz"
@@ -4659,6 +5628,11 @@ compute-scroll-into-view@1.0.14:
   resolved "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.14.tgz"
   integrity sha512-mKDjINe3tc6hGelUMNDzuhorIUZ7kS7BwyY0r2wQd2HOH2tRuJykiC06iSEX8y1TuhNzvz4GcJnK16mM2J1NMQ==
 
+compute-scroll-into-view@1.0.20:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz#1768b5522d1172754f5d0c9b02de3af6be506a43"
+  integrity sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -4870,7 +5844,12 @@ conventional-recommended-bump@6.1.0:
     meow "^8.0.0"
     q "^1.5.1"
 
-convert-source-map@^1.5.0, convert-source-map@^1.7.0:
+convert-source-map@^1.5.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
+convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz"
   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
@@ -4889,6 +5868,13 @@ copy-to-clipboard@3.3.1:
   dependencies:
     toggle-selection "^1.0.6"
 
+copy-to-clipboard@3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-pure@^3.20.2:
   version "3.22.5"
   resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.22.5.tgz"
@@ -4937,7 +5923,7 @@ cosmjs-types@^0.7.1, cosmjs-types@^0.7.2:
 
 create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
   integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
   dependencies:
     cipher-base "^1.0.1"
@@ -4948,7 +5934,7 @@ create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
 
 create-hmac@^1.1.4, create-hmac@^1.1.7:
   version "1.1.7"
-  resolved "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
   integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
   dependencies:
     cipher-base "^1.0.3"
@@ -4988,12 +5974,12 @@ cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
 
 crypt@~0.0.1:
   version "0.0.2"
-  resolved "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
   integrity sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==
 
 crypto-js@^4.0.0:
   version "4.1.1"
-  resolved "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.1.1.tgz#9e485bcf03521041bd85844786b83fb7619736cf"
   integrity sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==
 
 css-box-model@1.2.1:
@@ -5015,7 +6001,7 @@ csstype@^3.0.11, csstype@^3.0.2:
 
 curve25519-js@0.0.4:
   version "0.0.4"
-  resolved "https://registry.npmjs.org/curve25519-js/-/curve25519-js-0.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/curve25519-js/-/curve25519-js-0.0.4.tgz#e6ad967e8cd284590d657bbfc90d8b50e49ba060"
   integrity sha512-axn2UMEnkhyDUPWOwVKBMVIzSQy2ejH2xRGy1wq81dqRwApXfIzfbE3hIX0ZRFBIihf/KDqK158DLwESu4AK1w==
 
 cz-conventional-changelog@3.3.0:
@@ -5096,10 +6082,10 @@ decamelize@^1.1.0, decamelize@^1.2.0:
   resolved "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
-decode-uri-component@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz"
-  integrity sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==
+decode-uri-component@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
+  integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
 
 dedent@0.7.0:
   version "0.7.0"
@@ -5111,11 +6097,6 @@ deep-is@^0.1.3:
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz"
-  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
-
 defaults@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz"
@@ -5133,7 +6114,7 @@ define-properties@^1.1.3, define-properties@^1.1.4:
 
 delay@^4.4.0:
   version "4.4.1"
-  resolved "https://registry.npmjs.org/delay/-/delay-4.4.1.tgz"
+  resolved "https://registry.yarnpkg.com/delay/-/delay-4.4.1.tgz#6e02d02946a1b6ab98b39262ced965acba2ac4d1"
   integrity sha512-aL3AhqtfhOlT/3ai6sWXeqwnw63ATNpnUiN4HL7x9q+My5QtHlO3OIkasmug9LKzpheLdmUKGRKnYXYAS7FQkQ==
 
 delayed-stream@~1.0.0:
@@ -5151,10 +6132,10 @@ dependency-graph@^0.11.0:
   resolved "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz"
   integrity sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==
 
-detect-browser@5.2.0:
-  version "5.2.0"
-  resolved "https://registry.npmjs.org/detect-browser/-/detect-browser-5.2.0.tgz"
-  integrity sha512-tr7XntDAu50BVENgQfajMLzacmSe34D+qZc4zjnniz0ZVuw/TZcLcyxHQjYpJTM36sGEkZZlYLnIM1hH7alTMA==
+detect-browser@5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/detect-browser/-/detect-browser-5.3.0.tgz#9705ef2bddf46072d0f7265a1fe300e36fe7ceca"
+  integrity sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w==
 
 detect-file@^1.0.0:
   version "1.0.0"
@@ -5207,6 +6188,14 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dot-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz"
@@ -5240,6 +6229,16 @@ dset@3.1.2:
   resolved "https://registry.npmjs.org/dset/-/dset-3.1.2.tgz"
   integrity sha512-g/M9sqy3oHe477Ar4voQxWtaPIFw1jTdKZuomOjhCcBx9nHUNn0pu6NopuFFrTh/TRZIKEj+76vLWFu9BNKk+Q==
 
+duplexify@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-4.1.2.tgz#18b4f8d28289132fa0b9573c898d9f903f81c7b0"
+  integrity sha512-fz3OjcNCHmRP12MJoZMPglx8m4rrFP8rovnk4vT8Fs+aonZoCwGg10dSsQsfP/E62eZcPTMSMP6686fu9Qlqtw==
+  dependencies:
+    end-of-stream "^1.4.1"
+    inherits "^2.0.3"
+    readable-stream "^3.1.1"
+    stream-shift "^1.0.0"
+
 eastasianwidth@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
@@ -5280,6 +6279,13 @@ emoji-regex@^9.2.2:
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
+end-of-stream@^1.4.1:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.0"
+
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
@@ -5642,9 +6648,9 @@ event-target-shim@^5.0.0:
   resolved "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz"
   integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
 
-events@3.3.0:
+events@3.3.0, events@^3.3.0:
   version "3.3.0"
-  resolved "https://registry.npmjs.org/events/-/events-3.3.0.tgz"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
 execa@^5.0.0:
@@ -5705,7 +6711,7 @@ extract-files@^9.0.0:
 
 fast-deep-equal@3.1.1:
   version "3.1.1"
-  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
   integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
 
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
@@ -5718,6 +6724,13 @@ fast-diff@^1.1.2:
   resolved "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
+fast-fuzzy@^1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/fast-fuzzy/-/fast-fuzzy-1.12.0.tgz#f900a8165bffbb7dd5c013a1bb96ee22179ba406"
+  integrity sha512-sXxGgHS+ubYpsdLnvOvJ9w5GYYZrtL9mkosG3nfuD446ahvoWEsSKBP7ieGmWIKVLnaxRDgUJkZMdxRgA2Ni+Q==
+  dependencies:
+    graphemesplit "^2.4.1"
+
 fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz"
@@ -5739,6 +6752,11 @@ fast-levenshtein@^2.0.6:
   resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fast-redact@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/fast-redact/-/fast-redact-3.2.0.tgz#b1e2d39bc731376d28bde844454fa23e26919987"
+  integrity sha512-zaTadChr+NekyzallAMXATXLOR8MNx3zqpZ0MUF2aGf4EathnG0f32VLODNlY8IuGY3HoRO2L6/6fSzNsLaHIw==
+
 fastq@^1.6.0:
   version "1.13.0"
   resolved "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz"
@@ -5794,7 +6812,7 @@ file-selector@^0.6.0:
 
 file-uri-to-path@1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
   integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
 
 fill-range@^7.0.1:
@@ -5804,6 +6822,11 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+filter-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
+  integrity sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==
+
 find-node-modules@^2.1.2:
   version "2.1.3"
   resolved "https://registry.npmjs.org/find-node-modules/-/find-node-modules-2.1.3.tgz"
@@ -5877,6 +6900,13 @@ focus-lock@^0.11.2:
   dependencies:
     tslib "^2.0.3"
 
+focus-lock@^0.11.6:
+  version "0.11.6"
+  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.11.6.tgz#e8821e21d218f03e100f7dc27b733f9c4f61e683"
+  integrity sha512-KSuV3ur4gf2KqMNoZx3nXNVhqCkn42GuTYCX4tXPEwf0MjpFQmNMiN6m7dXaUXgIoivL6/65agoUMg4RLS0Vbg==
+  dependencies:
+    tslib "^2.0.3"
+
 follow-redirects@^1.10.0, follow-redirects@^1.14.0, follow-redirects@^1.14.9, follow-redirects@^1.15.0:
   version "1.15.2"
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
@@ -5927,6 +6957,15 @@ framer-motion@^7.6.12:
   optionalDependencies:
     "@emotion/is-prop-valid" "^0.8.2"
 
+framer-motion@^9.0.7:
+  version "9.1.7"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-9.1.7.tgz#1dc7dbd5bca086c90d09847c3fcaec3ecb7906af"
+  integrity sha512-nKxBkIO4IPkMEqcBbbATxsVjwPYShKl051yhBv9628iAH6JLeHD0siBHxkL62oQzMC1+GNX73XtPjgP753ufuw==
+  dependencies:
+    tslib "^2.4.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
 framesync@5.3.0:
   version "5.3.0"
   resolved "https://registry.npmjs.org/framesync/-/framesync-5.3.0.tgz"
@@ -6207,6 +7246,14 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
+graphemesplit@^2.4.1:
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/graphemesplit/-/graphemesplit-2.4.4.tgz#6d325c61e928efdaec2189f54a9b87babf89b75a"
+  integrity sha512-lKrpp1mk1NH26USxC/Asw4OHbhSQf5XfrWZ+CDv/dFVvd1j17kFgMotdJvOesmHkbFX9P9sBfpH8VogxOWLg8w==
+  dependencies:
+    js-base64 "^3.6.0"
+    unicode-trie "^2.0.0"
+
 graphql-config@4.3.6:
   version "4.3.6"
   resolved "https://registry.npmjs.org/graphql-config/-/graphql-config-4.3.6.tgz"
@@ -6318,14 +7365,14 @@ has@^1.0.3:
 
 hash-base@^3.0.0:
   version "3.1.0"
-  resolved "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33"
   integrity sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==
   dependencies:
     inherits "^2.0.4"
     readable-stream "^3.6.0"
     safe-buffer "^5.2.0"
 
-hash.js@^1.0.0, hash.js@^1.0.3, hash.js@^1.1.7, hash.js@~1.1.7:
+hash.js@^1.0.0, hash.js@^1.0.3, hash.js@~1.1.7:
   version "1.1.7"
   resolved "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz"
   integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
@@ -6560,7 +7607,7 @@ is-boolean-object@^1.1.0:
 
 is-buffer@~1.1.1:
   version "1.1.6"
-  resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
 is-callable@^1.1.4, is-callable@^1.2.4:
@@ -6568,6 +7615,13 @@ is-callable@^1.1.4, is-callable@^1.2.4:
   resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz"
   integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
 
+is-core-module@^2.11.0:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.12.1.tgz#0c0b6885b6f80011c71541ce15c8d66cf5a4f9fd"
+  integrity sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==
+  dependencies:
+    has "^1.0.3"
+
 is-core-module@^2.2.0, is-core-module@^2.5.0, is-core-module@^2.8.1, is-core-module@^2.9.0:
   version "2.10.0"
   resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz"
@@ -6710,11 +7764,6 @@ is-text-path@^1.0.1:
   dependencies:
     text-extensions "^1.0.0"
 
-is-typedarray@1.0.0, is-typedarray@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz"
-  integrity sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==
-
 is-unc-path@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/is-unc-path/-/is-unc-path-1.0.0.tgz"
@@ -6779,6 +7828,11 @@ isomorphic-ws@^4.0.1:
   resolved "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz"
   integrity sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==
 
+js-base64@^3.6.0:
+  version "3.7.5"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.5.tgz#21e24cf6b886f76d6f5f165bfcd69cc55b9e3fca"
+  integrity sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA==
+
 js-base64@^3.7.4:
   version "3.7.4"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.4.tgz#af95b20f23efc8034afd2d1cc5b9d0adf7419037"
@@ -6786,12 +7840,12 @@ js-base64@^3.7.4:
 
 js-crypto-env@^0.3.2:
   version "0.3.2"
-  resolved "https://registry.npmjs.org/js-crypto-env/-/js-crypto-env-0.3.2.tgz"
+  resolved "https://registry.yarnpkg.com/js-crypto-env/-/js-crypto-env-0.3.2.tgz#02195723469da14449338ca2789fd7ff6784c533"
   integrity sha512-F1uHiCkSOo36qBuuZABA4sBf+xeFBzhJZ0Sd7af8FAruszIhm1Xxv+Zr5Ne90Zlh7/fnxCsrdkj0N8f0a3lVlQ==
 
 js-crypto-hash@^0.6.3:
   version "0.6.3"
-  resolved "https://registry.npmjs.org/js-crypto-hash/-/js-crypto-hash-0.6.3.tgz"
+  resolved "https://registry.yarnpkg.com/js-crypto-hash/-/js-crypto-hash-0.6.3.tgz#748e3e1853f69dad714636db3290736825506641"
   integrity sha512-SG8c9tM8y3sUb4k7WvpVfu5vU7zfPvX+eaYR5578TvehkehdaQbqAc+y+1FwxnqQ3WZ0gsYoOKp/mW+mqtNoWA==
   dependencies:
     buffer "~5.4.3"
@@ -6802,7 +7856,7 @@ js-crypto-hash@^0.6.3:
 
 js-crypto-hkdf@0.7.3:
   version "0.7.3"
-  resolved "https://registry.npmjs.org/js-crypto-hkdf/-/js-crypto-hkdf-0.7.3.tgz"
+  resolved "https://registry.yarnpkg.com/js-crypto-hkdf/-/js-crypto-hkdf-0.7.3.tgz#537c394a2e65bca80032daa07d2ffe7e4f78d32f"
   integrity sha512-eAaVArAjS2GCacWGXY4hjBiexrLQYlI0PMOcbwtrSEj84XU3kUfMYZm9bpTyaTXgdHC/eQoXe/Of6biG+RSEaQ==
   dependencies:
     js-crypto-env "^0.3.2"
@@ -6812,7 +7866,7 @@ js-crypto-hkdf@0.7.3:
 
 js-crypto-hmac@^0.6.3:
   version "0.6.3"
-  resolved "https://registry.npmjs.org/js-crypto-hmac/-/js-crypto-hmac-0.6.3.tgz"
+  resolved "https://registry.yarnpkg.com/js-crypto-hmac/-/js-crypto-hmac-0.6.3.tgz#c33352c1ee6076b17b8f4cb0e2167814b2b77d6d"
   integrity sha512-T0pKOaHACOSG6Xs6/06G8RDDeZouQwIQNBq9L/zoUGsd4F67gAjpT3q2lGigAGpUd1hiyy7vnhvLpz7VDt6DbA==
   dependencies:
     js-crypto-env "^0.3.2"
@@ -6820,14 +7874,14 @@ js-crypto-hmac@^0.6.3:
 
 js-crypto-random@^0.4.3:
   version "0.4.3"
-  resolved "https://registry.npmjs.org/js-crypto-random/-/js-crypto-random-0.4.3.tgz"
+  resolved "https://registry.yarnpkg.com/js-crypto-random/-/js-crypto-random-0.4.3.tgz#898c2d91991eead02b4e461005e878fa9827fd74"
   integrity sha512-C3gzphPPfw9jfQ9Q/LjhJMZxQNp3AaoVRDvyZkiB+zYltfs8tKQPsskWkXACpg1Nzh01PtSRUvVijjptd2qGHQ==
   dependencies:
     js-crypto-env "^0.3.2"
 
 js-encoding-utils@0.5.6:
   version "0.5.6"
-  resolved "https://registry.npmjs.org/js-encoding-utils/-/js-encoding-utils-0.5.6.tgz"
+  resolved "https://registry.yarnpkg.com/js-encoding-utils/-/js-encoding-utils-0.5.6.tgz#517351d8f4a85b2ad121183d41df8319981bee03"
   integrity sha512-qnAGsUIWrmzh5n+3AXqbxX1KsB9hkQmJZf3aA9DLAS7GpL/NEHCBreFFbW+imramoU+Q0TDyvkwhRbBRH1TVkg==
 
 js-sdsl@^4.1.4:
@@ -6837,7 +7891,7 @@ js-sdsl@^4.1.4:
 
 js-sha3@0.8.0, js-sha3@^0.8.0:
   version "0.8.0"
-  resolved "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz"
+  resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
   integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
@@ -6976,7 +8030,7 @@ jws@^3.2.2:
 
 keyvaluestorage-interface@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/keyvaluestorage-interface/-/keyvaluestorage-interface-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/keyvaluestorage-interface/-/keyvaluestorage-interface-1.0.0.tgz#13ebdf71f5284ad54be94bd1ad9ed79adad515ff"
   integrity sha512-8t6Q3TclQ4uZynJY9IGr2+SsIGwK9JHcO6ootkHCGA0CrQCRy+VkouYNO2xicET6b9al7QKzpebNow+gkpCL8g==
 
 kind-of@^6.0.3:
@@ -7140,7 +8194,7 @@ lodash.isboolean@^3.0.3:
   resolved "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz"
   integrity sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==
 
-lodash.isequal@^4.5.0:
+lodash.isequal@4.5.0, lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz"
   integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
@@ -7310,7 +8364,7 @@ matchmediaquery@^0.3.0:
 
 md5.js@^1.3.4:
   version "1.3.5"
-  resolved "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz"
+  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
   integrity sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==
   dependencies:
     hash-base "^3.0.0"
@@ -7319,13 +8373,18 @@ md5.js@^1.3.4:
 
 md5@~2.2.1:
   version "2.2.1"
-  resolved "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/md5/-/md5-2.2.1.tgz#53ab38d5fe3c8891ba465329ea23fac0540126f9"
   integrity sha512-PlGG4z5mBANDGCKsYQe0CaUYHdZYZt8ZPZLmEt+Urf0W4GlpTX4HescwHU+dc9+Z/G/vZKYZYFrwgm9VxK6QOQ==
   dependencies:
     charenc "~0.0.1"
     crypt "~0.0.1"
     is-buffer "~1.1.1"
 
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
+
 meow@^8.0.0:
   version "8.1.2"
   resolved "https://registry.npmjs.org/meow/-/meow-8.1.2.tgz"
@@ -7445,7 +8504,7 @@ minimist@1.2.6, minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
 
 miscreant@0.3.2:
   version "0.3.2"
-  resolved "https://registry.npmjs.org/miscreant/-/miscreant-0.3.2.tgz"
+  resolved "https://registry.yarnpkg.com/miscreant/-/miscreant-0.3.2.tgz#a91c046566cca70bd6b5e9fbdd3f67617fa85034"
   integrity sha512-fL9KxsQz9BJB2KGPMHFrReioywkiomBiuaLk6EuChijK0BsJsIKJXdVomR+/bPj5mvbFD6wM0CM3bZio9g7OHA==
 
 mkdirp@^0.5.5:
@@ -7495,6 +8554,11 @@ ms@^2.1.1:
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+multiformats@^9.4.2:
+  version "9.9.0"
+  resolved "https://registry.yarnpkg.com/multiformats/-/multiformats-9.9.0.tgz#c68354e7d21037a8f1f8833c8ccd68618e8f1d37"
+  integrity sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg==
+
 mute-stream@0.0.8:
   version "0.0.8"
   resolved "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz"
@@ -7502,7 +8566,7 @@ mute-stream@0.0.8:
 
 nan@^2.13.2:
   version "2.17.0"
-  resolved "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb"
   integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==
 
 nanoid@^3.3.4:
@@ -7720,7 +8784,12 @@ object.values@^1.1.5:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
-once@^1.3.0:
+on-exit-leak-free@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/on-exit-leak-free/-/on-exit-leak-free-0.2.0.tgz#b39c9e3bf7690d890f4861558b0d7b90a442d209"
+  integrity sha512-dqaz3u44QbRXQooZLTUKU41ZrzYrcvLISVgbrzbyCMxpmSLJvZ3ZamIJIZ29P6OhZIkNIQKosdeM6t1LYbA9hg==
+
+once@^1.3.0, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
   integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
@@ -7841,9 +8910,14 @@ p-try@^2.0.0:
 
 pako@1.0.11:
   version "1.0.11"
-  resolved "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
+pako@^0.2.5:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+  integrity sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==
+
 pako@^2.0.2:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/pako/-/pako-2.1.0.tgz#266cc37f98c7d883545d11335c00fbd4062c9a86"
@@ -7966,9 +9040,9 @@ path-type@^4.0.0:
   resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-pbkdf2@^3.0.16, pbkdf2@^3.0.9, pbkdf2@^3.1.1:
+pbkdf2@^3.0.16:
   version "3.1.2"
-  resolved "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.2.tgz#dd822aa0887580e52f1a039dc3eda108efae3075"
   integrity sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==
   dependencies:
     create-hash "^1.1.2"
@@ -8007,6 +9081,36 @@ pify@^3.0.0:
   resolved "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz"
   integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
 
+pino-abstract-transport@v0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/pino-abstract-transport/-/pino-abstract-transport-0.5.0.tgz#4b54348d8f73713bfd14e3dc44228739aa13d9c0"
+  integrity sha512-+KAgmVeqXYbTtU2FScx1XS3kNyfZ5TrXY07V96QnUSFqo2gAqlvmaxH67Lj7SWazqsMabf+58ctdTcBgnOLUOQ==
+  dependencies:
+    duplexify "^4.1.2"
+    split2 "^4.0.0"
+
+pino-std-serializers@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/pino-std-serializers/-/pino-std-serializers-4.0.0.tgz#1791ccd2539c091ae49ce9993205e2cd5dbba1e2"
+  integrity sha512-cK0pekc1Kjy5w9V2/n+8MkZwusa6EyyxfeQCB799CQRhRt/CqYKiWs5adeu8Shve2ZNffvfC/7J64A2PJo1W/Q==
+
+pino@7.11.0:
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/pino/-/pino-7.11.0.tgz#0f0ea5c4683dc91388081d44bff10c83125066f6"
+  integrity sha512-dMACeu63HtRLmCG8VKdy4cShCPKaYDR4youZqoSWLxl5Gu99HUw8bw75thbPv9Nip+H+QYX8o3ZJbTdVZZ2TVg==
+  dependencies:
+    atomic-sleep "^1.0.0"
+    fast-redact "^3.0.0"
+    on-exit-leak-free "^0.2.0"
+    pino-abstract-transport v0.5.0
+    pino-std-serializers "^4.0.0"
+    process-warning "^1.0.0"
+    quick-format-unescaped "^4.0.3"
+    real-require "^0.1.0"
+    safe-stable-stringify "^2.1.0"
+    sonic-boom "^2.2.1"
+    thread-stream "^0.15.1"
+
 popmotion@11.0.5:
   version "11.0.5"
   resolved "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz"
@@ -8048,6 +9152,11 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
+process-warning@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/process-warning/-/process-warning-1.0.0.tgz#980a0b25dc38cd6034181be4b7726d89066b4616"
+  integrity sha512-du4wfLyj4yCZq1VupnVSZmRsPJsNuxoDQFdCFHLaYiEbFBD7QE0a+I4D7hOxrVnh78QE/YipFAj9lXHiXocV+Q==
+
 progress@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
@@ -8060,7 +9169,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8088,25 +9197,6 @@ protobufjs@6.11.3, protobufjs@^6.11.2, protobufjs@^6.8.8, protobufjs@~6.11.2, pr
     "@types/node" ">=13.7.0"
     long "^4.0.0"
 
-protobufjs@~6.10.2:
-  version "6.10.3"
-  resolved "https://registry.npmjs.org/protobufjs/-/protobufjs-6.10.3.tgz"
-  integrity sha512-yvAslS0hNdBhlSKckI4R1l7wunVilX66uvrjzE4MimiAt7/qw1nLpMhZrn/ObuUTM/c3Xnfl01LYMdcSJe6dwg==
-  dependencies:
-    "@protobufjs/aspromise" "^1.1.2"
-    "@protobufjs/base64" "^1.1.2"
-    "@protobufjs/codegen" "^2.0.4"
-    "@protobufjs/eventemitter" "^1.1.0"
-    "@protobufjs/fetch" "^1.1.0"
-    "@protobufjs/float" "^1.0.2"
-    "@protobufjs/inquire" "^1.1.0"
-    "@protobufjs/path" "^1.1.2"
-    "@protobufjs/pool" "^1.1.0"
-    "@protobufjs/utf8" "^1.1.0"
-    "@types/long" "^4.0.1"
-    "@types/node" "^13.7.0"
-    long "^4.0.0"
-
 proxy-from-env@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
@@ -8136,15 +9226,16 @@ q@^1.5.1:
 
 qrcode.react@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.npmjs.org/qrcode.react/-/qrcode.react-3.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.1.0.tgz#5c91ddc0340f768316fbdb8fff2765134c2aecd8"
   integrity sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==
 
-query-string@6.13.5:
-  version "6.13.5"
-  resolved "https://registry.npmjs.org/query-string/-/query-string-6.13.5.tgz"
-  integrity sha512-svk3xg9qHR39P3JlHuD7g3nRnyay5mHbrPctEBDUxUkHRifPHXJDhBUycdCC0NBjXoDf44Gb+IsOZL1Uwn8M/Q==
+query-string@7.1.3:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.3.tgz#a1cf90e994abb113a325804a972d98276fe02328"
+  integrity sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==
   dependencies:
-    decode-uri-component "^0.2.0"
+    decode-uri-component "^0.2.2"
+    filter-obj "^1.1.0"
     split-on-first "^1.0.0"
     strict-uri-encode "^2.0.0"
 
@@ -8153,6 +9244,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+quick-format-unescaped@^4.0.3:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz#93ef6dd8d3453cbc7970dd614fad4c5954d6b5a7"
+  integrity sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==
+
 quick-lru@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz"
@@ -8165,13 +9261,6 @@ raf@^3.4.1:
   dependencies:
     performance-now "^2.1.0"
 
-randombytes@^2.0.1, randombytes@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz"
-  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
-  dependencies:
-    safe-buffer "^5.1.0"
-
 react-ace@^10.1.0:
   version "10.1.0"
   resolved "https://registry.npmjs.org/react-ace/-/react-ace-10.1.0.tgz"
@@ -8190,7 +9279,7 @@ react-clientside-effect@^1.2.6:
   dependencies:
     "@babel/runtime" "^7.12.13"
 
-react-dom@18.2.0, react-dom@^18.2.0:
+react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -8212,6 +9301,11 @@ react-fast-compare@3.2.0:
   resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
+react-fast-compare@3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.1.tgz#53933d9e14f364281d6cba24bfed7a4afb808b5f"
+  integrity sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg==
+
 react-focus-lock@^2.9.1:
   version "2.9.1"
   resolved "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.9.1.tgz"
@@ -8224,12 +9318,34 @@ react-focus-lock@^2.9.1:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-focus-lock@^2.9.4:
+  version "2.9.4"
+  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.9.4.tgz#4753f6dcd167c39050c9d84f9c63c71b3ff8462e"
+  integrity sha512-7pEdXyMseqm3kVjhdVH18sovparAzLg5h6WvIx7/Ck3ekjhrrDMEegHSa3swwC8wgfdd7DIdUVRGeiHT9/7Sgg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    focus-lock "^0.11.6"
+    prop-types "^15.6.2"
+    react-clientside-effect "^1.2.6"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-hook-form@^7.39.7:
   version "7.39.7"
   resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.39.7.tgz"
   integrity sha512-RT0NE1uW1bY3nAuMdzfqHrpv2+sICVFaxBOvNJsCva4if2sxPxcyJy/CSqU56UXqAdRg724CNDhjMYPSHSF3rg==
 
-react-icons@^4.4.0, react-icons@^4.6.0:
+react-icons@4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.4.0.tgz#a13a8a20c254854e1ec9aecef28a95cdf24ef703"
+  integrity sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==
+
+react-icons@^4.4.0:
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.9.0.tgz#ba44f436a053393adb1bdcafbc5c158b7b70d2a3"
+  integrity sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg==
+
+react-icons@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz"
   integrity sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==
@@ -8255,6 +9371,14 @@ react-remove-scroll-bar@^2.3.3:
     react-style-singleton "^2.2.1"
     tslib "^2.0.0"
 
+react-remove-scroll-bar@^2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
+  integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
 react-remove-scroll@^2.5.4:
   version "2.5.4"
   resolved "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz"
@@ -8266,6 +9390,24 @@ react-remove-scroll@^2.5.4:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-remove-scroll@^2.5.5:
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.6.tgz#7510b8079e9c7eebe00e65a33daaa3aa29a10336"
+  integrity sha512-bO856ad1uDYLefgArk559IzUNeQ6SWH4QnrevIUjH+GczV56giDfl3h0Idptf2oIKxQmd1p9BN25jleKodTALg==
+  dependencies:
+    react-remove-scroll-bar "^2.3.4"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
+react-resize-detector@^8.0.3:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-8.1.0.tgz#1c7817db8bc886e2dbd3fbe3b26ea8e56be0524a"
+  integrity sha512-S7szxlaIuiy5UqLhLL1KY3aoyGHbZzsTpYal9eYMwCyKqoqoVLCmIgAgNyIM1FhnP2KyBygASJxdhejrzjMb+w==
+  dependencies:
+    lodash "^4.17.21"
+
 react-responsive@^9.0.0:
   version "9.0.0"
   resolved "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.0.tgz"
@@ -8276,6 +9418,21 @@ react-responsive@^9.0.0:
     prop-types "^15.6.1"
     shallow-equal "^1.2.1"
 
+react-select@5.7.0:
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.7.0.tgz#82921b38f1fcf1471a0b62304da01f2896cd8ce6"
+  integrity sha512-lJGiMxCa3cqnUr2Jjtg9YHsaytiZqeNOKeibv6WF5zbK/fPegZ1hg3y/9P1RZVLhqBTs0PfqQLKuAACednYGhQ==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.8.1"
+    "@floating-ui/dom" "^1.0.1"
+    "@types/react-transition-group" "^4.4.0"
+    memoize-one "^6.0.0"
+    prop-types "^15.6.0"
+    react-transition-group "^4.3.0"
+    use-isomorphic-layout-effect "^1.1.2"
+
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz"
@@ -8285,6 +9442,16 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
+react-transition-group@^4.3.0:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@18.2.0, react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
@@ -8328,7 +9495,7 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-readable-stream@3, readable-stream@^3.0.0, readable-stream@^3.0.2, readable-stream@^3.4.0, readable-stream@^3.6.0:
+readable-stream@3, readable-stream@^3.0.0, readable-stream@^3.0.2, readable-stream@^3.4.0:
   version "3.6.0"
   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz"
   integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
@@ -8350,6 +9517,15 @@ readable-stream@^2.0.6, readable-stream@~2.3.6:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
+readable-stream@^3.1.1, readable-stream@^3.6.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz"
@@ -8362,6 +9538,11 @@ readonly-date@^1.0.0:
   resolved "https://registry.npmjs.org/readonly-date/-/readonly-date-1.0.0.tgz"
   integrity sha512-tMKIV7hlk0h4mO3JTmmVuIlJVXjKk3Sep9Bf5OH0O+758ruuVkUy2J9SttDLm91IEX/WHlXPSpxMGjPj4beMIQ==
 
+real-require@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/real-require/-/real-require-0.1.0.tgz#736ac214caa20632847b7ca8c1056a0767df9381"
+  integrity sha512-r/H9MzAWtrv8aSVjPCMFpDMl5q66GqtmmRkRjpHTsp4zBAa+snZyiQNlMONiUmEJcsnaw0wCauJ2GWODr/aFkg==
+
 redent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz"
@@ -8468,7 +9649,7 @@ resolve-global@1.0.0, resolve-global@^1.0.0:
   dependencies:
     global-dirs "^0.1.1"
 
-resolve@^1.10.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0:
+resolve@^1.10.0, resolve@^1.20.0, resolve@^1.22.0:
   version "1.22.1"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz"
   integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
@@ -8477,6 +9658,15 @@ resolve@^1.10.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.19.0:
+  version "1.22.2"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
+  integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
+  dependencies:
+    is-core-module "^2.11.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.3:
   version "2.0.0-next.3"
   resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz"
@@ -8512,7 +9702,7 @@ rimraf@^3.0.2:
 
 ripemd160@^2.0.0, ripemd160@^2.0.1, ripemd160@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
   integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
   dependencies:
     hash-base "^3.0.0"
@@ -8559,7 +9749,7 @@ rxjs@^7.5.5:
   dependencies:
     tslib "^2.1.0"
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0:
+safe-buffer@^5.0.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -8569,6 +9759,16 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
+safe-json-utils@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/safe-json-utils/-/safe-json-utils-1.1.1.tgz#0e883874467d95ab914c3f511096b89bfb3e63b1"
+  integrity sha512-SAJWGKDs50tAbiDXLf89PDwt9XYkWyANFWVzn4dTXl5QyI8t2o/bW5/OJl3lvc2WVU4MEpTo9Yz5NVFNsp+OJQ==
+
+safe-stable-stringify@^2.1.0:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/safe-stable-stringify/-/safe-stable-stringify-2.4.3.tgz#138c84b6f6edb3db5f8ef3ef7115b8f55ccbf886"
+  integrity sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g==
+
 "safer-buffer@>= 2.1.2 < 3":
   version "2.1.2"
   resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
@@ -8588,7 +9788,7 @@ scuid@^1.1.0:
 
 secretjs@0.17.7:
   version "0.17.7"
-  resolved "https://registry.npmjs.org/secretjs/-/secretjs-0.17.7.tgz"
+  resolved "https://registry.yarnpkg.com/secretjs/-/secretjs-0.17.7.tgz#a1aef5866a35cf673be9ddd717d20729afd056ac"
   integrity sha512-j39l9+vR2A8067QBqDDejS7LmRLgdkG4uRw2Ar6HMfzDGo26eTh7cIXVlVu/yHBumxtQzKun20epOXwuYHXjQg==
   dependencies:
     "@iov/crypto" "2.1.0"
@@ -8603,26 +9803,9 @@ secretjs@0.17.7:
     protobufjs "6.11.3"
     secure-random "1.1.2"
 
-secretjs@^0.17.0:
-  version "0.17.8"
-  resolved "https://registry.npmjs.org/secretjs/-/secretjs-0.17.8.tgz"
-  integrity sha512-PD/GUF52GjysBo8dDVK8KZXRXON1iPXkkyBNWIBVsaap3A1nZPbqynx/VUOjSpFx103KdjvzeA4+O0+EdWWWmw==
-  dependencies:
-    "@iov/crypto" "2.1.0"
-    "@iov/encoding" "2.1.0"
-    "@iov/utils" "2.0.2"
-    axios "0.21.1"
-    curve25519-js "0.0.4"
-    fast-deep-equal "3.1.1"
-    js-crypto-hkdf "0.7.3"
-    miscreant "0.3.2"
-    pako "1.0.11"
-    protobufjs "6.11.3"
-    secure-random "1.1.2"
-
 secure-random@1.1.2:
   version "1.1.2"
-  resolved "https://registry.npmjs.org/secure-random/-/secure-random-1.1.2.tgz"
+  resolved "https://registry.yarnpkg.com/secure-random/-/secure-random-1.1.2.tgz#ed103b460a851632d420d46448b2a900a41e7f7c"
   integrity sha512-H2bdSKERKdBV1SwoqYm6C0y+9EA94v6SUBOWO8kDndc4NoUih7Dv6Tsgma7zO1lv27wIvjlD0ZpMQk7um5dheQ==
 
 "semver@2 || 3 || 4 || 5", semver@^5.6.0:
@@ -8642,10 +9825,10 @@ semver@^6.0.0, semver@^6.3.0:
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.3.7:
-  version "7.3.8"
-  resolved "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz"
-  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+semver@^7.3.8:
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.1.tgz#c90c4d631cf74720e46b21c1d37ea07edfab91ec"
+  integrity sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==
   dependencies:
     lru-cache "^6.0.0"
 
@@ -8670,7 +9853,7 @@ setimmediate@^1.0.5:
 
 sha.js@^2.4.0, sha.js@^2.4.11, sha.js@^2.4.8:
   version "2.4.11"
-  resolved "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
   integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
   dependencies:
     inherits "^2.0.1"
@@ -8678,7 +9861,7 @@ sha.js@^2.4.0, sha.js@^2.4.11, sha.js@^2.4.8:
 
 sha3@~2.1.0:
   version "2.1.4"
-  resolved "https://registry.npmjs.org/sha3/-/sha3-2.1.4.tgz"
+  resolved "https://registry.yarnpkg.com/sha3/-/sha3-2.1.4.tgz#000fac0fe7c2feac1f48a25e7a31b52a6492cc8f"
   integrity sha512-S8cNxbyb0UGUM2VhRD4Poe5N58gJnJsLJ5vC7FYWGUmGhcsj4++WaIOBFVDxlG0W3To6xBuiRh+i0Qp2oNCOtg==
   dependencies:
     buffer "6.0.3"
@@ -8763,6 +9946,13 @@ snake-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
 
+sonic-boom@^2.2.1:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/sonic-boom/-/sonic-boom-2.8.0.tgz#c1def62a77425090e6ad7516aad8eb402e047611"
+  integrity sha512-kuonw1YOYYNOve5iHdSahXPOK49GqwA+LZhI6Wz/l0rP57iKyXXIHaRagOBHAPmGwJC6od2Z9zgvZ5loSgMlVg==
+  dependencies:
+    atomic-sleep "^1.0.0"
+
 source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
@@ -8770,8 +9960,8 @@ source-map-js@^1.0.2:
 
 source-map@^0.5.7:
   version "0.5.7"
-  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
-  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
 
 source-map@^0.6.1:
   version "0.6.1"
@@ -8806,7 +9996,7 @@ spdx-license-ids@^3.0.0:
 
 split-on-first@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
   integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
 
 split2@^3.0.0:
@@ -8816,6 +10006,11 @@ split2@^3.0.0:
   dependencies:
     readable-stream "^3.0.0"
 
+split2@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/split2/-/split2-4.2.0.tgz#c9c5920904d148bab0b9f67145f245a86aadbfa4"
+  integrity sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==
+
 split@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/split/-/split-1.0.1.tgz"
@@ -8850,6 +10045,11 @@ standard-version@^9.5.0:
     stringify-package "^1.0.1"
     yargs "^16.0.0"
 
+stream-shift@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
+  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
+
 streamsearch@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz"
@@ -8857,7 +10057,7 @@ streamsearch@^1.1.0:
 
 strict-uri-encode@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
   integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
 
 string-argv@^0.3.1:
@@ -9016,15 +10216,10 @@ styled-jsx@5.1.0:
   dependencies:
     client-only "0.0.1"
 
-stylis@4.0.13:
-  version "4.0.13"
-  resolved "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz"
-  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
-
-stylis@4.1.3:
-  version "4.1.3"
-  resolved "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz"
-  integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
+stylis@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
+  integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
 supports-color@^5.3.0:
   version "5.5.0"
@@ -9067,6 +10262,13 @@ text-table@^0.2.0:
   resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+thread-stream@^0.15.1:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/thread-stream/-/thread-stream-0.15.2.tgz#fb95ad87d2f1e28f07116eb23d85aba3bc0425f4"
+  integrity sha512-UkEhKIg2pD+fjkHQKyJO3yoIvAP3N6RlNFt2dUhcS1FGvCD1cQa1M/PGknCLFIyZdtJOWQjejp7bdNqmN7zwdA==
+  dependencies:
+    real-require "^0.1.0"
+
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz"
@@ -9087,6 +10289,11 @@ through@2, "through@>=2.2.7 <3", through@^2.3.6, through@^2.3.8:
   resolved "https://registry.npmjs.org/through/-/through-2.3.8.tgz"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
 
+tiny-inflate@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
+  integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
+
 tiny-invariant@^1.0.6:
   version "1.2.0"
   resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz"
@@ -9094,7 +10301,7 @@ tiny-invariant@^1.0.6:
 
 tiny-secp256k1@^1.1.3:
   version "1.1.6"
-  resolved "https://registry.npmjs.org/tiny-secp256k1/-/tiny-secp256k1-1.1.6.tgz"
+  resolved "https://registry.yarnpkg.com/tiny-secp256k1/-/tiny-secp256k1-1.1.6.tgz#7e224d2bee8ab8283f284e40e6b4acb74ffe047c"
   integrity sha512-FmqJZGduTyvsr2cF3375fqGHUovSwDi/QytexX1Se4BPuPZpTE5Ftp5fg+EFSuEf3lhZqgCRjEG3ydUQ/aNiwA==
   dependencies:
     bindings "^1.3.0"
@@ -9183,16 +10390,16 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@1.14.1, tslib@^1.0.0, tslib@^1.8.1, tslib@^1.9.3:
+  version "1.14.1"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
 tslib@2.4.0, tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
   version "2.4.0"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
-tslib@^1.0.0, tslib@^1.8.1, tslib@^1.9.3:
-  version "1.14.1"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
-  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
-
 tslib@^2.3.1, tslib@^2.4.1, tslib@~2.4.0:
   version "2.4.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz"
@@ -9239,16 +10446,9 @@ type-fest@^0.8.1:
 
 type-tagger@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/type-tagger/-/type-tagger-1.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/type-tagger/-/type-tagger-1.0.0.tgz#dc6297e52e17097c1b92b42c16816a18f631e7f4"
   integrity sha512-FIPqqpmDgdaulCnRoKv1/d3U4xVBUrYn42QXWNP3XYmgfPUDuBUsgFOb9ntT0aIe0UsUP+lknpQ5d9Kn36RssA==
 
-typedarray-to-buffer@3.1.5:
-  version "3.1.5"
-  resolved "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz"
-  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
-  dependencies:
-    is-typedarray "^1.0.0"
-
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz"
@@ -9256,7 +10456,7 @@ typedarray@^0.0.6:
 
 typeforce@^1.11.5:
   version "1.18.0"
-  resolved "https://registry.npmjs.org/typeforce/-/typeforce-1.18.0.tgz"
+  resolved "https://registry.yarnpkg.com/typeforce/-/typeforce-1.18.0.tgz#d7416a2c5845e085034d70fcc5b6cc4a90edbfdc"
   integrity sha512-7uc1O8h1M1g0rArakJdf0uLRSSgFcYexrVoKo+bzJd32gd4gDy2L/Z+8/FjPnU9ydY3pEnVPtr9FyscYY60K1g==
 
 typescript@^4.6.4, typescript@^4.8.4:
@@ -9279,6 +10479,13 @@ uglify-js@^3.1.4:
   resolved "https://registry.npmjs.org/uglify-js/-/uglify-js-3.15.5.tgz"
   integrity sha512-hNM5q5GbBRB5xB+PMqVRcgYe4c8jbyZ1pzZhS6jbq54/4F2gFK869ZheiE5A8/t+W5jtTNpWef/5Q9zk639FNQ==
 
+uint8arrays@^3.0.0, uint8arrays@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/uint8arrays/-/uint8arrays-3.1.1.tgz#2d8762acce159ccd9936057572dade9459f65ae0"
+  integrity sha512-+QJa8QRnbdXVpHYjLoTpJIdCTiw9Ir62nocClWuXIq2JIh4Uta0cQsTSpFL678p2CN8B+XSApwcU+pQEqVpKWg==
+  dependencies:
+    multiformats "^9.4.2"
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz"
@@ -9301,6 +10508,14 @@ undici@^5.12.0, undici@^5.8.0:
   dependencies:
     busboy "^1.6.0"
 
+unicode-trie@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-trie/-/unicode-trie-2.0.0.tgz#8fd8845696e2e14a8b67d78fa9e0dd2cad62fec8"
+  integrity sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==
+  dependencies:
+    pako "^0.2.5"
+    tiny-inflate "^1.0.0"
+
 universalify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz"
@@ -9315,7 +10530,7 @@ unixify@^1.0.0:
 
 unorm@^1.5.0:
   version "1.6.0"
-  resolved "https://registry.npmjs.org/unorm/-/unorm-1.6.0.tgz"
+  resolved "https://registry.yarnpkg.com/unorm/-/unorm-1.6.0.tgz#029b289661fba714f1a9af439eb51d9b16c205af"
   integrity sha512-b2/KCUlYZUeA7JFUuRJZPUtr4gZvBh7tavtv4fvk4+KV9pfGiR6CQAQAWl49ZpR3ts2dk4FYkP7EIgDJoiOLDA==
 
 update-browserslist-db@^1.0.5:
@@ -9361,6 +10576,11 @@ use-clamp-text@^1.1.0:
   dependencies:
     rooks "^5.11.0"
 
+use-isomorphic-layout-effect@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
 use-sidecar@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz"
@@ -9381,7 +10601,7 @@ util-deprecate@^1.0.1, util-deprecate@~1.0.1:
 
 utility-types@^3.10.0:
   version "3.10.0"
-  resolved "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz"
+  resolved "https://registry.yarnpkg.com/utility-types/-/utility-types-3.10.0.tgz#ea4148f9a741015f05ed74fd615e1d20e6bed82b"
   integrity sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==
 
 uuid@^9.0.0:
@@ -9497,7 +10717,7 @@ wide-align@^1.1.0:
 
 wif@^2.0.6:
   version "2.0.6"
-  resolved "https://registry.npmjs.org/wif/-/wif-2.0.6.tgz"
+  resolved "https://registry.yarnpkg.com/wif/-/wif-2.0.6.tgz#08d3f52056c66679299726fade0d432ae74b4704"
   integrity sha512-HIanZn1zmduSF+BQhkE+YXIbEiH0xPr1012QbFEGB0xsKqJii0/SqJjyn8dFv6y36kOznMgMB+LGcbZTJ1xACQ==
   dependencies:
     bs58check "<3.0.0"
@@ -9535,17 +10755,12 @@ wrappy@1:
   resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-ws@7.5.3:
-  version "7.5.3"
-  resolved "https://registry.npmjs.org/ws/-/ws-7.5.3.tgz"
-  integrity sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==
-
 ws@8.11.0:
   version "8.11.0"
   resolved "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz"
   integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
 
-ws@^7:
+ws@^7, ws@^7.5.1:
   version "7.5.9"
   resolved "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz"
   integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==

From 5e0ab8ceaf38b08ba06203b7c9cced5ee307f911 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 13 Jun 2023 10:51:38 +0700
Subject: [PATCH 228/354] chore: remove unintentional special char

---
 src/lib/pages/past-txs/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx
index 6d2b53baa..e93c6f24a 100644
--- a/src/lib/pages/past-txs/index.tsx
+++ b/src/lib/pages/past-txs/index.tsx
@@ -131,7 +131,7 @@ const PastTxs = () => {
         display="flex"
         alignItems="center"
       >
-        ß Past Transactions
+        Past Transactions
       </Heading>
       <Flex my={8} gap={3}>
         <InputGroup>

From 9b958a8dc2aee49f6aac9e62795a63b692037293 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 13 Jun 2023 11:04:59 +0700
Subject: [PATCH 229/354] fix: acceptance test

---
 src/lib/components/pagination/PageButton.tsx | 4 +++-
 src/lib/components/pagination/PageDetail.tsx | 1 +
 src/lib/components/pagination/PageGoTo.tsx   | 6 ++++--
 src/lib/components/pagination/index.tsx      | 4 +++-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/pagination/PageButton.tsx b/src/lib/components/pagination/PageButton.tsx
index f26d45988..e1a59fbc1 100644
--- a/src/lib/components/pagination/PageButton.tsx
+++ b/src/lib/components/pagination/PageButton.tsx
@@ -22,8 +22,10 @@ export const PageButton = ({
         isCurrentPage ? { cursor: "default" } : { background: "gray.700" }
       }
       _active={isCurrentPage ? {} : { background: "gray.600" }}
-      boxSize={10}
+      minH={10}
+      minW={10}
       w="fit-content"
+      size="sm"
     >
       {pageNumber}
     </Button>
diff --git a/src/lib/components/pagination/PageDetail.tsx b/src/lib/components/pagination/PageDetail.tsx
index e7771e195..03b891552 100644
--- a/src/lib/components/pagination/PageDetail.tsx
+++ b/src/lib/components/pagination/PageDetail.tsx
@@ -24,6 +24,7 @@ export const PageDetail = ({
       Items per page:
     </Text>
     <Select
+      h="fit-content"
       border="none"
       w="70px"
       fontSize="12px"
diff --git a/src/lib/components/pagination/PageGoTo.tsx b/src/lib/components/pagination/PageGoTo.tsx
index 7612403ae..8ed6d59a3 100644
--- a/src/lib/components/pagination/PageGoTo.tsx
+++ b/src/lib/components/pagination/PageGoTo.tsx
@@ -17,10 +17,12 @@ export const PageGoTo = ({ lastPage, onPageChange }: PageGoToProps) => {
 
   return (
     <Flex align="center" justify="center" gap={2}>
-      <Text w="fit-content">Go to page:</Text>
+      <Text variant="body2" w="fit-content">
+        Go to page:
+      </Text>
       <Input
         textAlign="center"
-        w="44px"
+        w={16}
         value={newPage}
         onChange={(e) => {
           if (e.target.value.length === 0) setNewPage("");
diff --git a/src/lib/components/pagination/index.tsx b/src/lib/components/pagination/index.tsx
index c1ede2b43..cf68ded3b 100644
--- a/src/lib/components/pagination/index.tsx
+++ b/src/lib/components/pagination/index.tsx
@@ -1,4 +1,4 @@
-import { Flex } from "@chakra-ui/react";
+import { Flex, Spacer } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 import { useEffect, useMemo } from "react";
 
@@ -64,6 +64,7 @@ export const Pagination = ({
         align="center"
         justify="center"
         w="full"
+        pt={6}
       >
         <PageDetail
           pageSize={pageSize}
@@ -72,6 +73,7 @@ export const Pagination = ({
           totalData={totalData}
           onPageSizeChange={onPageSizeChange}
         />
+        <Spacer />
         <PageList
           pageSize={pageSize}
           currentPage={currentPage}

From 18d6ba59fb9b39a83e0ee1128c3d0abbd8cdaa7e Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 13 Jun 2023 11:27:27 +0700
Subject: [PATCH 230/354] fix: handle uppercase address

---
 CHANGELOG.md                            | 1 +
 src/lib/pages/account-details/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b34cf4a7c..b33d89045 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -48,6 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#386](https://github.com/alleslabs/celatone-frontend/pull/386) Handle uppercase address
 - [#382](https://github.com/alleslabs/celatone-frontend/pull/382) Add pool manager v15 msgs to tx details
 - [#371](https://github.com/alleslabs/celatone-frontend/pull/371) Refactor assign me component and fix color in redelegation page
 - [#342](https://github.com/alleslabs/celatone-frontend/pull/342) Add fallback n/a token on asset icon on asset box
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 1cc2c2a31..f790f244e 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -344,7 +344,7 @@ const AccountDetails = () => {
   // TODO: change to `Addr` for correctness (i.e. interchain account)
   const accountAddressParam = getFirstQueryParam(
     router.query.accountAddress
-  ) as HumanAddr;
+  ).toLowerCase() as HumanAddr;
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_ACCOUNT_DETAIL);

From a0a7db8bfb5892d19769296a3c38c931c32dbe38 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 13 Jun 2023 11:30:43 +0700
Subject: [PATCH 231/354] fix: reset proposal table

---
 CHANGELOG.md                      | 1 +
 src/lib/pages/proposals/index.tsx | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b34cf4a7c..70d1ebffe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -59,6 +59,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#386](https://github.com/alleslabs/celatone-frontend/pull/386) Fix reseting proposal table when applying filters
 - [#375](https://github.com/alleslabs/celatone-frontend/pull/375) Fix incorrect display resolve height in proposals page
 - [#356](https://github.com/alleslabs/celatone-frontend/pull/356) Fix store code out of gas error by gzipping file before submitting tx
 - [#344](https://github.com/alleslabs/celatone-frontend/pull/344) Fix enable tx bug in proposal to store code
diff --git a/src/lib/pages/proposals/index.tsx b/src/lib/pages/proposals/index.tsx
index 6618de8e5..af50b126e 100644
--- a/src/lib/pages/proposals/index.tsx
+++ b/src/lib/pages/proposals/index.tsx
@@ -54,6 +54,7 @@ const Proposals = () => {
       isDisabled: false,
     },
   });
+
   const { data: proposals, isLoading } = useProposalList(
     offset,
     pageSize,
@@ -70,7 +71,7 @@ const Proposals = () => {
   useEffect(() => {
     setPageSize(10);
     setCurrentPage(1);
-  }, [chainId, setCurrentPage, setPageSize]);
+  }, [chainId, setCurrentPage, setPageSize, statuses, types, search, proposer]);
 
   useEffect(() => {
     setIsSelected(false);

From 368ce6512c69651c02f9f4d587a16ad5085cf929 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 13 Jun 2023 13:35:30 +0700
Subject: [PATCH 232/354] fix: changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 70d1ebffe..6dda3064e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -59,7 +59,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
-- [#386](https://github.com/alleslabs/celatone-frontend/pull/386) Fix reseting proposal table when applying filters
+- [#387](https://github.com/alleslabs/celatone-frontend/pull/387) Fix reseting proposal table when applying filters
 - [#375](https://github.com/alleslabs/celatone-frontend/pull/375) Fix incorrect display resolve height in proposals page
 - [#356](https://github.com/alleslabs/celatone-frontend/pull/356) Fix store code out of gas error by gzipping file before submitting tx
 - [#344](https://github.com/alleslabs/celatone-frontend/pull/344) Fix enable tx bug in proposal to store code

From 2d56b24491a8cb9e85b7476f3cddf6bbf6da6058 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 13 Jun 2023 16:03:17 +0700
Subject: [PATCH 233/354] fix: comments

---
 src/lib/app-provider/hooks/useAddress.ts   | 24 +++++++++++++---------
 src/lib/app-provider/hooks/useAmplitude.ts |  3 +++
 src/lib/layout/navbar/index.tsx            |  1 +
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/lib/app-provider/hooks/useAddress.ts b/src/lib/app-provider/hooks/useAddress.ts
index 6eae13f91..3b1585b24 100644
--- a/src/lib/app-provider/hooks/useAddress.ts
+++ b/src/lib/app-provider/hooks/useAddress.ts
@@ -73,7 +73,9 @@ const validateAddress = (
 };
 
 export const useGetAddressType = () => {
-  const { chain } = useCurrentChain();
+  const {
+    chain: { bech32_prefix: bech32Prefix },
+  } = useCurrentChain();
   const getAddressTypeByLength = useGetAddressTypeByLength();
   return useCallback(
     (address: Option<string>): AddressReturnType => {
@@ -82,7 +84,7 @@ export const useGetAddressType = () => {
         !address ||
         addressType === "invalid_address" ||
         validateAddress(
-          chain.bech32_prefix,
+          bech32Prefix,
           address,
           addressType,
           getAddressTypeByLength
@@ -91,45 +93,47 @@ export const useGetAddressType = () => {
         return "invalid_address";
       return addressType;
     },
-    [chain, getAddressTypeByLength]
+    [bech32Prefix, getAddressTypeByLength]
   );
 };
 
 // TODO: refactor
 export const useValidateAddress = () => {
-  const { chain } = useCurrentChain();
+  const {
+    chain: { bech32_prefix: bech32Prefix },
+  } = useCurrentChain();
   const getAddressTypeByLength = useGetAddressTypeByLength();
 
   return {
     validateContractAddress: useCallback(
       (address: string) =>
         validateAddress(
-          chain.bech32_prefix,
+          bech32Prefix,
           address,
           "contract_address",
           getAddressTypeByLength
         ),
-      [chain, getAddressTypeByLength]
+      [bech32Prefix, getAddressTypeByLength]
     ),
     validateUserAddress: useCallback(
       (address: string) =>
         validateAddress(
-          chain.bech32_prefix,
+          bech32Prefix,
           address,
           "user_address",
           getAddressTypeByLength
         ),
-      [chain, getAddressTypeByLength]
+      [bech32Prefix, getAddressTypeByLength]
     ),
     validateValidatorAddress: useCallback(
       (address: string) =>
         validateAddress(
-          chain.bech32_prefix,
+          bech32Prefix,
           address,
           "validator_address",
           getAddressTypeByLength
         ),
-      [chain, getAddressTypeByLength]
+      [bech32Prefix, getAddressTypeByLength]
     ),
   };
 };
diff --git a/src/lib/app-provider/hooks/useAmplitude.ts b/src/lib/app-provider/hooks/useAmplitude.ts
index 1feb095d5..95cc5d226 100644
--- a/src/lib/app-provider/hooks/useAmplitude.ts
+++ b/src/lib/app-provider/hooks/useAmplitude.ts
@@ -7,6 +7,9 @@ import * as uuid from "uuid";
 import type { Option } from "lib/types";
 
 export const useAmplitude = (chainName: Option<string>) => {
+  /**
+   * @remarks Revisit default chain name
+   */
   const { address } = useChain(chainName ?? "osmosis");
   if (typeof window !== "undefined") {
     init(process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY ?? "", undefined, {
diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index 2c2843dcd..2ade14c96 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -115,6 +115,7 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
     },
   ];
 
+  // TODO: remove mainnet concept for public project
   if (networkType === "mainnet") {
     navMenu.push({
       category: "Public Projects",

From 6b5e68cc7835df5467570f3bc194702bebbba2c7 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 13 Jun 2023 16:30:54 +0700
Subject: [PATCH 234/354] feat: navbar local

---
 CHANGELOG.md             |  1 +
 src/lib/layout/index.tsx | 18 ++++++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6dda3064e..c4715b016 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#388](https://github.com/alleslabs/celatone-frontend/pull/388) Save Navbar expand/collapse state in the local state
 - [#372](https://github.com/alleslabs/celatone-frontend/pull/372) Add code hash to code details and upload section
 - [#329](https://github.com/alleslabs/celatone-frontend/pull/329) Add allowed user to store code flow
 - [#321](https://github.com/alleslabs/celatone-frontend/pull/321) Add amplitude to proposal to store code page
diff --git a/src/lib/layout/index.tsx b/src/lib/layout/index.tsx
index 6648990f6..0c378dd31 100644
--- a/src/lib/layout/index.tsx
+++ b/src/lib/layout/index.tsx
@@ -12,6 +12,15 @@ import Header from "./Header";
 import Navbar from "./navbar";
 import SubHeader from "./SubHeader";
 
+const getLocalIsExpand = () => {
+  const state = localStorage.getItem("navbar");
+  if (state === null) return null;
+  return state === "expand";
+};
+const setLocalIsExpand = (isExpand: boolean) => {
+  localStorage.setItem("navbar", isExpand ? "expand" : "collapse");
+};
+
 type LayoutProps = {
   children: ReactNode;
 };
@@ -20,7 +29,12 @@ const Layout = ({ children }: LayoutProps) => {
   const router = useRouter();
   const isMobile = useMobile();
 
-  const [isExpand, setIsExpand] = useState(!isMobile);
+  const [isExpand, setIsExpand] = useState(getLocalIsExpand() ?? !isMobile);
+  const handleIsExpand = (newState: boolean) => {
+    setIsExpand(newState);
+    setLocalIsExpand(newState);
+  };
+
   const chainConfig = getChainConfig();
 
   const lightMode = {
@@ -33,7 +47,7 @@ const Layout = ({ children }: LayoutProps) => {
     templateAreas: `"header header""nav main"`,
     templateRows: "70px 1fr",
     templateCols: isExpand ? "224px 1fr" : "48px 1fr",
-    navBar: <Navbar isExpand={isExpand} setIsExpand={setIsExpand} />,
+    navBar: <Navbar isExpand={isExpand} setIsExpand={handleIsExpand} />,
   };
 
   const mode = chainConfig.isWasm ? fullMode : lightMode;

From 530abc0100b93680d608f77c50373b518ffdd089 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 14 Jun 2023 11:46:38 +0700
Subject: [PATCH 235/354] fix: comments

---
 src/lib/components/pagination/PageDetail.tsx | 5 +++--
 src/lib/components/pagination/PageGoTo.tsx   | 6 ++----
 src/lib/components/pagination/PageList.tsx   | 4 ++--
 src/lib/components/pagination/index.tsx      | 9 ++-------
 4 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/pagination/PageDetail.tsx b/src/lib/components/pagination/PageDetail.tsx
index 03b891552..5b7adfae0 100644
--- a/src/lib/components/pagination/PageDetail.tsx
+++ b/src/lib/components/pagination/PageDetail.tsx
@@ -24,9 +24,10 @@ export const PageDetail = ({
       Items per page:
     </Text>
     <Select
-      h="fit-content"
       border="none"
-      w="70px"
+      minW="70px"
+      w="fit-content"
+      h="fit-content"
       fontSize="12px"
       focusBorderColor="none"
       cursor="pointer"
diff --git a/src/lib/components/pagination/PageGoTo.tsx b/src/lib/components/pagination/PageGoTo.tsx
index 8ed6d59a3..28db2d813 100644
--- a/src/lib/components/pagination/PageGoTo.tsx
+++ b/src/lib/components/pagination/PageGoTo.tsx
@@ -17,9 +17,7 @@ export const PageGoTo = ({ lastPage, onPageChange }: PageGoToProps) => {
 
   return (
     <Flex align="center" justify="center" gap={2}>
-      <Text variant="body2" w="fit-content">
-        Go to page:
-      </Text>
+      <Text variant="body2">Go to page:</Text>
       <Input
         textAlign="center"
         w={16}
@@ -38,7 +36,7 @@ export const PageGoTo = ({ lastPage, onPageChange }: PageGoToProps) => {
         variant="ghost-primary"
         margin={0}
         paddingX={2}
-        onClick={() => handleGoTo()}
+        onClick={handleGoTo}
         rightIcon={<CustomIcon name="chevron-right" />}
       >
         Go
diff --git a/src/lib/components/pagination/PageList.tsx b/src/lib/components/pagination/PageList.tsx
index f8458cabf..23ab6dce1 100644
--- a/src/lib/components/pagination/PageList.tsx
+++ b/src/lib/components/pagination/PageList.tsx
@@ -33,7 +33,7 @@ export const PageList = ({
         {currentPage > 2 && (
           <>
             {currentPage > 3 && (
-              <Text mx="2px" px="7px">
+              <Text mx="2px" px={2}>
                 ...
               </Text>
             )}
@@ -61,7 +61,7 @@ export const PageList = ({
               onPageChange={onPageChange}
             />
             {currentPage < lastPage - 2 && (
-              <Text mx="2px" px="7px">
+              <Text mx="2px" px={2}>
                 ...
               </Text>
             )}
diff --git a/src/lib/components/pagination/index.tsx b/src/lib/components/pagination/index.tsx
index cf68ded3b..e151d7c9c 100644
--- a/src/lib/components/pagination/index.tsx
+++ b/src/lib/components/pagination/index.tsx
@@ -2,7 +2,6 @@ import { Flex, Spacer } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 import { useEffect, useMemo } from "react";
 
-import { useMobile } from "lib/app-provider";
 import { scrollToComponent, scrollToTop, scrollYPosition } from "lib/utils";
 
 import { PageDetail } from "./PageDetail";
@@ -30,8 +29,6 @@ export const Pagination = ({
   onPageChange,
   onPageSizeChange,
 }: PaginationProps) => {
-  const isMobile = useMobile();
-
   useEffect(() => {
     const windowPosition = scrollYPosition();
     if (windowPosition) {
@@ -59,10 +56,8 @@ export const Pagination = ({
       onPageChange={onPageChange}
     >
       <Flex
-        direction={isMobile ? "column" : "row"}
-        gap={isMobile ? 4 : 8}
-        align="center"
-        justify="center"
+        direction={{ base: "column", md: "row" }}
+        gap={{ base: 4, md: 8 }}
         w="full"
         pt={6}
       >

From 631a40c6dbd07f5afbfe6c78a7f0ba7513540989 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Wed, 14 Jun 2023 13:45:30 +0700
Subject: [PATCH 236/354] fix: add txs count loading to condition

---
 src/lib/pages/account-details/components/tables/TxsTable.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/pages/account-details/components/tables/TxsTable.tsx b/src/lib/pages/account-details/components/tables/TxsTable.tsx
index 21ccefea5..7fcddd8bc 100644
--- a/src/lib/pages/account-details/components/tables/TxsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/TxsTable.tsx
@@ -169,7 +169,8 @@ export const TxsTable = ({
       />
       {Boolean(transactions?.length) &&
         (onViewMore
-          ? (txsCount === undefined || txsCount > 5) && (
+          ? !txsCountLoading &&
+            (txsCount === undefined || txsCount > 5) && (
               <ViewMore onClick={onViewMore} />
             )
           : txsCount &&

From dfba3882e7485f66d97a59cdd136afdd0ccba17e Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 14 Jun 2023 15:08:38 +0700
Subject: [PATCH 237/354] feat: create useLocalStorage hook

---
 src/lib/hooks/useLocalStorage.ts | 71 ++++++++++++++++++++++++++++++++
 src/lib/layout/index.tsx         | 21 ++--------
 2 files changed, 75 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/hooks/useLocalStorage.ts

diff --git a/src/lib/hooks/useLocalStorage.ts b/src/lib/hooks/useLocalStorage.ts
new file mode 100644
index 000000000..59fa3fab5
--- /dev/null
+++ b/src/lib/hooks/useLocalStorage.ts
@@ -0,0 +1,71 @@
+/* eslint-disable no-console */
+import type { Dispatch, SetStateAction } from "react";
+import { useCallback, useState } from "react";
+
+// Reference: https://usehooks-ts.com/react-hook/use-local-storage
+
+// A wrapper for "JSON.parse()"" to support "undefined" value
+const parseJSON = <T>(value: string): T | undefined => {
+  try {
+    return value === "undefined" ? undefined : JSON.parse(value);
+  } catch {
+    return undefined;
+  }
+};
+
+type SetValue<T> = Dispatch<SetStateAction<T>>;
+
+export const useLocalStorage = <T>(
+  key: string,
+  initialValue: T
+): [T, SetValue<T>] => {
+  // Get from local storage then
+  // parse stored json or return initialValue
+  const readValue = useCallback((): T => {
+    // Prevent build error "window is undefined" but keeps working
+    if (typeof window === "undefined") {
+      return initialValue;
+    }
+
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? (parseJSON(item) as T) : initialValue;
+    } catch (error) {
+      console.warn(`Error reading localStorage key “${key}”:`, error);
+      return initialValue;
+    }
+  }, [initialValue, key]);
+
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState<T>(readValue);
+
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue: SetValue<T> = useCallback(
+    (value) => {
+      // Prevent build error "window is undefined" but keeps working
+      if (typeof window === "undefined") {
+        console.warn(
+          `Tried setting localStorage key “${key}” even though environment is not a client`
+        );
+      }
+
+      try {
+        // Allow value to be a function so we have the same API as useState
+        const newValue = value instanceof Function ? value(storedValue) : value;
+
+        // Save to local storage
+        window.localStorage.setItem(key, JSON.stringify(newValue));
+
+        // Save state
+        setStoredValue(newValue);
+      } catch (error) {
+        console.warn(`Error setting localStorage key “${key}”:`, error);
+      }
+    },
+    [key, storedValue]
+  );
+
+  return [storedValue, setValue];
+};
diff --git a/src/lib/layout/index.tsx b/src/lib/layout/index.tsx
index 0c378dd31..bf2089726 100644
--- a/src/lib/layout/index.tsx
+++ b/src/lib/layout/index.tsx
@@ -1,10 +1,11 @@
 import { Grid, GridItem } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import type { ReactNode } from "react";
-import { useState, useEffect } from "react";
+import { useEffect } from "react";
 
 import { useMobile } from "lib/app-provider";
 import { getChainConfig } from "lib/data";
+import { useLocalStorage } from "lib/hooks/useLocalStorage";
 import { scrollToTop } from "lib/utils";
 
 import Footer from "./Footer";
@@ -12,15 +13,6 @@ import Header from "./Header";
 import Navbar from "./navbar";
 import SubHeader from "./SubHeader";
 
-const getLocalIsExpand = () => {
-  const state = localStorage.getItem("navbar");
-  if (state === null) return null;
-  return state === "expand";
-};
-const setLocalIsExpand = (isExpand: boolean) => {
-  localStorage.setItem("navbar", isExpand ? "expand" : "collapse");
-};
-
 type LayoutProps = {
   children: ReactNode;
 };
@@ -29,12 +21,7 @@ const Layout = ({ children }: LayoutProps) => {
   const router = useRouter();
   const isMobile = useMobile();
 
-  const [isExpand, setIsExpand] = useState(getLocalIsExpand() ?? !isMobile);
-  const handleIsExpand = (newState: boolean) => {
-    setIsExpand(newState);
-    setLocalIsExpand(newState);
-  };
-
+  const [isExpand, setIsExpand] = useLocalStorage("navbar", !isMobile);
   const chainConfig = getChainConfig();
 
   const lightMode = {
@@ -47,7 +34,7 @@ const Layout = ({ children }: LayoutProps) => {
     templateAreas: `"header header""nav main"`,
     templateRows: "70px 1fr",
     templateCols: isExpand ? "224px 1fr" : "48px 1fr",
-    navBar: <Navbar isExpand={isExpand} setIsExpand={handleIsExpand} />,
+    navBar: <Navbar isExpand={isExpand} setIsExpand={setIsExpand} />,
   };
 
   const mode = chainConfig.isWasm ? fullMode : lightMode;

From 2df4b021bc29cfefc2ff3178d4cf4d09e9fec72c Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 15 Jun 2023 11:08:41 +0700
Subject: [PATCH 238/354] fix(components): fix styling bugs

---
 src/config/theme/default.ts                     | 2 +-
 src/lib/components/button/NewProposalButton.tsx | 2 +-
 src/lib/components/button/RedoButton.tsx        | 2 +-
 src/lib/components/button/ResendButton.tsx      | 2 +-
 src/lib/components/modal/RedoModal.tsx          | 2 +-
 src/lib/styles/theme/components/switch.ts       | 1 +
 6 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/config/theme/default.ts b/src/config/theme/default.ts
index 99dd9c617..54c14b4a0 100644
--- a/src/config/theme/default.ts
+++ b/src/config/theme/default.ts
@@ -27,7 +27,7 @@ export const DEFAULT_THEME: ThemeConfig = {
   },
   colors: {
     gradient: {
-      main: "linear(to-tr, #5235EF, #6145FC)",
+      main: "linear(to-tr, #5942F3, #9793F3)",
     },
     error: {
       main: "#FF666E",
diff --git a/src/lib/components/button/NewProposalButton.tsx b/src/lib/components/button/NewProposalButton.tsx
index 442ddb654..f3e47b303 100644
--- a/src/lib/components/button/NewProposalButton.tsx
+++ b/src/lib/components/button/NewProposalButton.tsx
@@ -53,7 +53,7 @@ export const NewProposalButton = () => {
         >
           <MenuItem
             isDisabled={isPermissionless}
-            icon={<CustomIcon name="admin" />}
+            icon={<CustomIcon name="admin" color="gray.600" />}
             onClick={() => {
               navigate({
                 pathname: "/proposals/whitelist",
diff --git a/src/lib/components/button/RedoButton.tsx b/src/lib/components/button/RedoButton.tsx
index 197b97a14..13ac80b96 100644
--- a/src/lib/components/button/RedoButton.tsx
+++ b/src/lib/components/button/RedoButton.tsx
@@ -15,7 +15,7 @@ export const RedoButton = ({ message }: RedoButtonProps) => {
   const { chain } = useCurrentChain();
   return (
     <Button
-      variant="outline"
+      variant="outline-gray"
       size="sm"
       onClick={(e) =>
         onClickRedo(
diff --git a/src/lib/components/button/ResendButton.tsx b/src/lib/components/button/ResendButton.tsx
index c95cf014e..111d8e14e 100644
--- a/src/lib/components/button/ResendButton.tsx
+++ b/src/lib/components/button/ResendButton.tsx
@@ -53,7 +53,7 @@ export const ResendButton = ({ messages }: ResendButtonProps) => {
 
   return (
     <Button
-      variant="outline"
+      variant="outline-gray"
       iconSpacing="0"
       size="sm"
       onClick={(e) => {
diff --git a/src/lib/components/modal/RedoModal.tsx b/src/lib/components/modal/RedoModal.tsx
index 5e7410201..c9f75806a 100644
--- a/src/lib/components/modal/RedoModal.tsx
+++ b/src/lib/components/modal/RedoModal.tsx
@@ -34,7 +34,7 @@ export const RedoModal = ({ message }: RedoModalProps) => {
     <>
       <Button
         leftIcon={<CustomIcon name="redo" />}
-        variant="outline"
+        variant="outline-gray"
         iconSpacing="2"
         size="sm"
         onClick={onOpen}
diff --git a/src/lib/styles/theme/components/switch.ts b/src/lib/styles/theme/components/switch.ts
index 566bb80eb..f24a21d5c 100644
--- a/src/lib/styles/theme/components/switch.ts
+++ b/src/lib/styles/theme/components/switch.ts
@@ -6,6 +6,7 @@ const { definePartsStyle, defineMultiStyleConfig } =
 
 const baseStyle = definePartsStyle({
   track: {
+    bg: "gray.500",
     _checked: {
       bg: "primary.main",
     },

From 1ab54100762cec95d16c28932f379f887170266f Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 15 Jun 2023 11:10:54 +0700
Subject: [PATCH 239/354] fix(components): add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 816c12fd1..213d7062a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -74,6 +74,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#390](https://github.com/alleslabs/celatone-frontend/pull/390) Fix minor styling
 - [#383](https://github.com/alleslabs/celatone-frontend/pull/383) Fix title input field and navigation in sticky bar in proposal to store code, redirect path for wasm flag
 - [#387](https://github.com/alleslabs/celatone-frontend/pull/387) Fix reseting proposal table when applying filters
 - [#375](https://github.com/alleslabs/celatone-frontend/pull/375) Fix incorrect display resolve height in proposals page

From aa9af006b1d6c740b7d0da2c93d0c75a7baf2ba2 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 15 Jun 2023 11:11:18 +0700
Subject: [PATCH 240/354] fix: incorrect past txs empty state

---
 CHANGELOG.md                                  |  1 +
 .../pages/home/components/PastTransaction.tsx | 34 -------------------
 src/lib/pages/past-txs/index.tsx              |  4 ++-
 3 files changed, 4 insertions(+), 35 deletions(-)
 delete mode 100644 src/lib/pages/home/components/PastTransaction.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 816c12fd1..17d027c57 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -74,6 +74,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#390](https://github.com/alleslabs/celatone-frontend/pull/390) Fix incorrect empty state for past txs table
 - [#383](https://github.com/alleslabs/celatone-frontend/pull/383) Fix title input field and navigation in sticky bar in proposal to store code, redirect path for wasm flag
 - [#387](https://github.com/alleslabs/celatone-frontend/pull/387) Fix reseting proposal table when applying filters
 - [#375](https://github.com/alleslabs/celatone-frontend/pull/375) Fix incorrect display resolve height in proposals page
diff --git a/src/lib/pages/home/components/PastTransaction.tsx b/src/lib/pages/home/components/PastTransaction.tsx
deleted file mode 100644
index b73639cfe..000000000
--- a/src/lib/pages/home/components/PastTransaction.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Heading, Box, Flex, Text } from "@chakra-ui/react";
-
-import { AppLink } from "lib/components/AppLink";
-
-/* TODO: Delete after past tx page is done */
-export const PastTransaction = () => (
-  <Box py={8}>
-    <Heading px={12} as="h6" variant="h6" mb={4}>
-      Past Transaction
-    </Heading>
-    <Flex
-      px={12}
-      borderTopWidth={1}
-      borderBottomWidth={1}
-      justifyContent="center"
-      alignItems="center"
-      minH="128px"
-      gap={1}
-    >
-      <Text color="text.dark" variant="body1">
-        Your past transactions will display here. You also able can view all
-      </Text>
-      <AppLink href="/past-txs">
-        <Text
-          color="secondary.main"
-          _hover={{ color: "secondary.light" }}
-          transition="all .25s ease-in-out"
-        >
-          Past Transactions
-        </Text>
-      </AppLink>
-    </Flex>
-  </Box>
-);
diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx
index e93c6f24a..968ae991f 100644
--- a/src/lib/pages/past-txs/index.tsx
+++ b/src/lib/pages/past-txs/index.tsx
@@ -168,7 +168,9 @@ const PastTxs = () => {
         transactions={txs}
         isLoading={isLoading}
         emptyState={
-          !pastTxsState.search.trim().length || !filterSelected.length ? (
+          pastTxsState.search.trim().length > 0 ||
+          pastTxsState.isSigner !== undefined ||
+          filterSelected.length > 0 ? (
             <EmptyState
               imageVariant="not-found"
               message={`

From 73b3a62137a15abda4789a45cfd7347e41ff06f0 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 15 Jun 2023 14:11:02 +0700
Subject: [PATCH 241/354] feat: refactor proposal table

---
 CHANGELOG.md                                  |   1 +
 .../table/proposals}/ProposalTextCell.tsx     |   0
 .../table/proposals/ProposalsTable.tsx        |   9 +-
 .../table/proposals/ProposalsTableHeader.tsx  |  39 +++---
 .../table/proposals/ProposalsTableRow.tsx     |  90 +++++++++++---
 src/lib/pages/proposals/index.tsx             |  26 +++-
 .../pages/proposals/table/ProposalTable.tsx   |  52 --------
 .../proposals/table/ProposalTableHeader.tsx   |  31 -----
 .../proposals/table/ProposalTableRow.tsx      | 117 ------------------
 9 files changed, 130 insertions(+), 235 deletions(-)
 rename src/lib/{pages/proposals/components => components/table/proposals}/ProposalTextCell.tsx (100%)
 delete mode 100644 src/lib/pages/proposals/table/ProposalTable.tsx
 delete mode 100644 src/lib/pages/proposals/table/ProposalTableHeader.tsx
 delete mode 100644 src/lib/pages/proposals/table/ProposalTableRow.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 816c12fd1..450acb661 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -52,6 +52,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#392](https://github.com/alleslabs/celatone-frontend/pull/392) Refactor proposal table and fix empty state of the proposal list table
 - [#374](https://github.com/alleslabs/celatone-frontend/pull/374) Remove testnet, mainnet concepts and use permission from params
 - [#369](https://github.com/alleslabs/celatone-frontend/pull/369) Implement Wasm feature from config
 - [#359](https://github.com/alleslabs/celatone-frontend/pull/359) Remove hardcode constant (length) and use from config
diff --git a/src/lib/pages/proposals/components/ProposalTextCell.tsx b/src/lib/components/table/proposals/ProposalTextCell.tsx
similarity index 100%
rename from src/lib/pages/proposals/components/ProposalTextCell.tsx
rename to src/lib/components/table/proposals/ProposalTextCell.tsx
diff --git a/src/lib/components/table/proposals/ProposalsTable.tsx b/src/lib/components/table/proposals/ProposalsTable.tsx
index 3cf496808..452fa7889 100644
--- a/src/lib/components/table/proposals/ProposalsTable.tsx
+++ b/src/lib/components/table/proposals/ProposalsTable.tsx
@@ -20,16 +20,21 @@ export const ProposalsTable = ({
   if (!proposals?.length) return emptyState;
 
   const templateColumns =
-    "100px minmax(300px, 1fr) 150px 280px 180px 190px 160px";
+    "100px minmax(360px, 2fr) minmax(150px, 1fr) 330px 180px 160px";
+  const boxShadow = "16px 0 32px -10px";
 
   return (
     <TableContainer>
-      <ProposalsTableHeader templateColumns={templateColumns} />
+      <ProposalsTableHeader
+        templateColumns={templateColumns}
+        boxShadow={boxShadow}
+      />
       {proposals.map((proposal) => (
         <ProposalsTableRow
           key={proposal.proposalId}
           proposal={proposal}
           templateColumns={templateColumns}
+          boxShadow={boxShadow}
         />
       ))}
     </TableContainer>
diff --git a/src/lib/components/table/proposals/ProposalsTableHeader.tsx b/src/lib/components/table/proposals/ProposalsTableHeader.tsx
index ca21026f3..abc9b929c 100644
--- a/src/lib/components/table/proposals/ProposalsTableHeader.tsx
+++ b/src/lib/components/table/proposals/ProposalsTableHeader.tsx
@@ -1,20 +1,31 @@
-import type { GridProps } from "@chakra-ui/react";
-import { Grid } from "@chakra-ui/react";
+import type { DividerProps, GridProps } from "@chakra-ui/react";
+import { Grid, Text } from "@chakra-ui/react";
 
-import { TableHeader } from "../tableComponents";
+import { TableHeader, TableHeaderFreeze } from "../tableComponents";
 
 export const ProposalsTableHeader = ({
   templateColumns,
+  boxShadow,
 }: {
   templateColumns: GridProps["templateColumns"];
-}) => (
-  <Grid templateColumns={templateColumns}>
-    <TableHeader>Proposal ID</TableHeader>
-    <TableHeader>Proposal Title</TableHeader>
-    <TableHeader textAlign="center">Status</TableHeader>
-    <TableHeader>Voting ends</TableHeader>
-    <TableHeader>Resolved Block Height</TableHeader>
-    <TableHeader>Type</TableHeader>
-    <TableHeader>Proposer</TableHeader>
-  </Grid>
-);
+  boxShadow: DividerProps["boxShadow"];
+}) => {
+  // TODO - Revisit split columnsWidth
+  const columnsWidth = templateColumns?.toString().split(" ");
+  return (
+    <Grid templateColumns={templateColumns} minW="min-content">
+      <TableHeaderFreeze left="0">Proposal ID</TableHeaderFreeze>
+      <TableHeaderFreeze
+        left={columnsWidth && columnsWidth[0]}
+        boxShadow={boxShadow}
+        color="gray.800"
+      >
+        <Text color="text.main">Proposal Title/Type</Text>
+      </TableHeaderFreeze>
+      <TableHeader textAlign="center">Status</TableHeader>
+      <TableHeader>Voting ends</TableHeader>
+      <TableHeader>Resolved Block Height </TableHeader>
+      <TableHeader>Proposed By </TableHeader>
+    </Grid>
+  );
+};
diff --git a/src/lib/components/table/proposals/ProposalsTableRow.tsx b/src/lib/components/table/proposals/ProposalsTableRow.tsx
index 36c740b65..58767b859 100644
--- a/src/lib/components/table/proposals/ProposalsTableRow.tsx
+++ b/src/lib/components/table/proposals/ProposalsTableRow.tsx
@@ -1,12 +1,17 @@
-import type { GridProps } from "@chakra-ui/react";
-import { Grid, Text } from "@chakra-ui/react";
+import type { DividerProps, GridProps } from "@chakra-ui/react";
+import { Grid } from "@chakra-ui/react";
 
-import { TableRow } from "../tableComponents";
+import { TableRow, TableRowFreeze } from "../tableComponents";
+import { useCelatoneApp } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
+import { StopPropagationBox } from "lib/components/StopPropagationBox";
 import { Proposer } from "lib/components/table/proposals/Proposer";
-import type { Proposal } from "lib/types";
+import { openNewTab } from "lib/hooks";
+import { AmpTrackMintscan } from "lib/services/amplitude";
+import type { Option, Proposal } from "lib/types";
 import { ProposalStatus } from "lib/types";
 
+import { ProposalTextCell } from "./ProposalTextCell";
 import { ResolvedHeight } from "./ResolvedHeight";
 import { StatusChip } from "./StatusChip";
 import { VotingEndTime } from "./VotingEndTime";
@@ -14,29 +19,77 @@ import { VotingEndTime } from "./VotingEndTime";
 export interface ProposalsTableRowProps {
   proposal: Proposal;
   templateColumns: GridProps["templateColumns"];
+  boxShadow: DividerProps["boxShadow"];
 }
 
 export const ProposalsTableRow = ({
   proposal,
   templateColumns,
+  boxShadow,
 }: ProposalsTableRowProps) => {
+  const {
+    chainConfig: {
+      explorerLink: { proposal: explorerProposal },
+    },
+  } = useCelatoneApp();
+
+  // TODO - Revisit split columnsWidth
+  const columnsWidth = templateColumns?.toString().split(" ");
   const isDepositFailed = proposal.status === ProposalStatus.DEPOSIT_FAILED;
   const isDepositOrVoting =
     proposal.status === ProposalStatus.DEPOSIT_PERIOD ||
     proposal.status === ProposalStatus.VOTING_PERIOD;
+
+  const hoverBg = (): Option<string> => {
+    if (proposal.isExpedited && isDepositOrVoting) return "primary.background";
+    return isDepositFailed ? undefined : "gray.900";
+  };
+
   return (
-    <Grid templateColumns={templateColumns}>
-      <TableRow>
+    <Grid
+      templateColumns={templateColumns}
+      minW="min-content"
+      cursor={isDepositFailed ? "default" : "pointer"}
+      _hover={{ "> div": { bgColor: hoverBg } }}
+      onClick={
+        !isDepositFailed
+          ? () => {
+              AmpTrackMintscan("proposal-detail", {
+                type: proposal.type,
+                status: proposal.status,
+              });
+              openNewTab(
+                `${explorerProposal}/${proposal.proposalId.toString()}`
+              );
+            }
+          : undefined
+      }
+    >
+      <TableRowFreeze left="0">
         <ExplorerLink
           isReadOnly={isDepositFailed}
           type="proposal_id"
           value={proposal.proposalId.toString()}
           showCopyOnHover
+          ampCopierSection="proposal-list"
         />
-      </TableRow>
-      <TableRow>{proposal.title}</TableRow>
+      </TableRowFreeze>
+      <TableRowFreeze
+        left={columnsWidth && columnsWidth[0]}
+        boxShadow={boxShadow}
+        color="gray.800"
+      >
+        <ProposalTextCell
+          title={proposal.title}
+          type={proposal.type}
+          isExpedited={proposal.isExpedited}
+          isDepositOrVoting={isDepositOrVoting}
+        />
+      </TableRowFreeze>
       <TableRow justifyContent="center">
-        <StatusChip status={proposal.status} />
+        <StopPropagationBox>
+          <StatusChip status={proposal.status} />
+        </StopPropagationBox>
       </TableRow>
       <TableRow>
         <VotingEndTime
@@ -46,16 +99,19 @@ export const ProposalsTableRow = ({
         />
       </TableRow>
       <TableRow>
-        <ResolvedHeight
-          resolvedHeight={proposal.resolvedHeight}
-          isDepositOrVoting={isDepositOrVoting}
-        />
-      </TableRow>
-      <TableRow>
-        <Text color="text.dark">{proposal.type}</Text>
+        <StopPropagationBox>
+          <ResolvedHeight
+            resolvedHeight={proposal.resolvedHeight}
+            isDepositOrVoting={isDepositOrVoting}
+            amptrackSection="proposal-list"
+          />
+        </StopPropagationBox>
       </TableRow>
       <TableRow>
-        <Proposer proposer={proposal.proposer} />
+        <Proposer
+          proposer={proposal.proposer}
+          amptrackSection="proposal-list"
+        />
       </TableRow>
     </Grid>
   );
diff --git a/src/lib/pages/proposals/index.tsx b/src/lib/pages/proposals/index.tsx
index 6344d0c18..c238549c4 100644
--- a/src/lib/pages/proposals/index.tsx
+++ b/src/lib/pages/proposals/index.tsx
@@ -9,6 +9,8 @@ import InputWithIcon from "lib/components/InputWithIcon";
 import PageContainer from "lib/components/PageContainer";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
+import { EmptyState } from "lib/components/state";
+import { ProposalsTable } from "lib/components/table";
 import { Tooltip } from "lib/components/Tooltip";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import {
@@ -19,7 +21,6 @@ import type { ProposalStatus, ProposalType, Addr, Option } from "lib/types";
 
 import { ProposalStatusFilter } from "./components/ProposalStatusFilter";
 import { ProposalTypeFilter } from "./components/ProposalTypeFilter";
-import { ProposalTable } from "./table/ProposalTable";
 
 const Proposals = () => {
   const { currentChainId } = useCelatoneApp();
@@ -164,7 +165,28 @@ const Proposals = () => {
           />
         </Flex>
       </Flex>
-      <ProposalTable proposals={proposals} isLoading={isLoading} />
+      <ProposalsTable
+        proposals={proposals}
+        isLoading={isLoading}
+        emptyState={
+          statuses.length > 0 ||
+          types.length > 0 ||
+          search.trim().length > 0 ||
+          proposer !== undefined ? (
+            <EmptyState
+              imageVariant="not-found"
+              message="No matches found. Please double-check your input and select correct network."
+              withBorder
+            />
+          ) : (
+            <EmptyState
+              imageVariant="empty"
+              message="There are no proposals on this network."
+              withBorder
+            />
+          )
+        }
+      />
       {countProposals > 10 && (
         <Pagination
           currentPage={currentPage}
diff --git a/src/lib/pages/proposals/table/ProposalTable.tsx b/src/lib/pages/proposals/table/ProposalTable.tsx
deleted file mode 100644
index ea4216127..000000000
--- a/src/lib/pages/proposals/table/ProposalTable.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Loading } from "lib/components/Loading";
-import { EmptyState } from "lib/components/state";
-import { TableContainer } from "lib/components/table";
-import type { Option, Proposal } from "lib/types";
-
-import { ProposalTableHeader } from "./ProposalTableHeader";
-import { ProposalTableRow } from "./ProposalTableRow";
-
-interface ProposalTableProps {
-  proposals: Option<Proposal[]>;
-  isLoading: boolean;
-}
-
-const TEMPLATE_COLUMNS =
-  "100px minmax(360px, 2fr) minmax(150px, 1fr) 330px 180px 160px";
-const BOX_SHADOW = "16px 0 32px -10px";
-
-export const ProposalTable = ({ proposals, isLoading }: ProposalTableProps) => {
-  if (isLoading) return <Loading />;
-  if (!proposals)
-    return (
-      <EmptyState
-        message="There are no proposals on this network."
-        imageVariant="empty"
-        withBorder
-      />
-    );
-  if (!proposals.length)
-    return (
-      <EmptyState
-        message="No matches found. Please double-check your input and select correct network."
-        imageVariant="not-found"
-        withBorder
-      />
-    );
-  return (
-    <TableContainer>
-      <ProposalTableHeader
-        boxShadow={BOX_SHADOW}
-        templateColumns={TEMPLATE_COLUMNS}
-      />
-      {proposals.map((proposal) => (
-        <ProposalTableRow
-          key={proposal.proposalId}
-          proposal={proposal}
-          templateColumns={TEMPLATE_COLUMNS}
-          boxShadow={BOX_SHADOW}
-        />
-      ))}
-    </TableContainer>
-  );
-};
diff --git a/src/lib/pages/proposals/table/ProposalTableHeader.tsx b/src/lib/pages/proposals/table/ProposalTableHeader.tsx
deleted file mode 100644
index 973fda428..000000000
--- a/src/lib/pages/proposals/table/ProposalTableHeader.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { DividerProps, GridProps } from "@chakra-ui/react";
-import { Grid, Text } from "@chakra-ui/react";
-
-import { TableHeader, TableHeaderFreeze } from "lib/components/table";
-
-export const ProposalTableHeader = ({
-  templateColumns,
-  boxShadow,
-}: {
-  templateColumns: GridProps["templateColumns"];
-  boxShadow: DividerProps["boxShadow"];
-}) => {
-  // TODO - Revisit split columnsWidth
-  const columnsWidth = templateColumns?.toString().split(" ");
-  return (
-    <Grid templateColumns={templateColumns} minW="min-content">
-      <TableHeaderFreeze left="0">Proposal ID</TableHeaderFreeze>
-      <TableHeaderFreeze
-        left={columnsWidth && columnsWidth[0]}
-        boxShadow={boxShadow}
-        color="gray.800"
-      >
-        <Text color="text.main">Proposal Title/Type</Text>
-      </TableHeaderFreeze>
-      <TableHeader textAlign="center">Status</TableHeader>
-      <TableHeader>Voting ends</TableHeader>
-      <TableHeader>Resolved Block Height </TableHeader>
-      <TableHeader>Proposed By </TableHeader>
-    </Grid>
-  );
-};
diff --git a/src/lib/pages/proposals/table/ProposalTableRow.tsx b/src/lib/pages/proposals/table/ProposalTableRow.tsx
deleted file mode 100644
index e3657bb37..000000000
--- a/src/lib/pages/proposals/table/ProposalTableRow.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import type { DividerProps, GridProps } from "@chakra-ui/react";
-import { Grid } from "@chakra-ui/react";
-
-import { ProposalTextCell } from "../components/ProposalTextCell";
-import { useCelatoneApp } from "lib/app-provider";
-import { ExplorerLink } from "lib/components/ExplorerLink";
-import { StopPropagationBox } from "lib/components/StopPropagationBox";
-import { TableRow, TableRowFreeze } from "lib/components/table";
-import { Proposer } from "lib/components/table/proposals/Proposer";
-import { ResolvedHeight } from "lib/components/table/proposals/ResolvedHeight";
-import { StatusChip } from "lib/components/table/proposals/StatusChip";
-import { VotingEndTime } from "lib/components/table/proposals/VotingEndTime";
-import { openNewTab } from "lib/hooks";
-import { AmpTrackMintscan } from "lib/services/amplitude";
-import type { Proposal, Option } from "lib/types";
-import { ProposalStatus } from "lib/types";
-
-interface ProposalRowProps {
-  proposal: Proposal;
-  templateColumns: GridProps["templateColumns"];
-  boxShadow: DividerProps["boxShadow"];
-}
-
-export const ProposalTableRow = ({
-  proposal,
-  templateColumns,
-  boxShadow,
-}: ProposalRowProps) => {
-  const {
-    chainConfig: {
-      explorerLink: { proposal: explorerProposal },
-    },
-  } = useCelatoneApp();
-
-  // TODO - Revisit split columnsWidth
-  const columnsWidth = templateColumns?.toString().split(" ");
-  const isDepositFailed = proposal.status === ProposalStatus.DEPOSIT_FAILED;
-  const isDepositOrVoting =
-    proposal.status === ProposalStatus.DEPOSIT_PERIOD ||
-    proposal.status === ProposalStatus.VOTING_PERIOD;
-
-  const hoverBg = (): Option<string> => {
-    if (proposal.isExpedited && isDepositOrVoting) return "primary.background";
-    return isDepositFailed ? undefined : "gray.900";
-  };
-
-  return (
-    <Grid
-      templateColumns={templateColumns}
-      minW="min-content"
-      cursor={isDepositFailed ? "default" : "pointer"}
-      _hover={{ "> div": { bgColor: hoverBg } }}
-      onClick={
-        !isDepositFailed
-          ? () => {
-              AmpTrackMintscan("proposal-detail", {
-                type: proposal.type,
-                status: proposal.status,
-              });
-              openNewTab(
-                `${explorerProposal}/${proposal.proposalId.toString()}`
-              );
-            }
-          : undefined
-      }
-    >
-      <TableRowFreeze left="0">
-        <ExplorerLink
-          isReadOnly={isDepositFailed}
-          type="proposal_id"
-          value={proposal.proposalId.toString()}
-          showCopyOnHover
-          ampCopierSection="proposal-list"
-        />
-      </TableRowFreeze>
-      <TableRowFreeze
-        left={columnsWidth && columnsWidth[0]}
-        boxShadow={boxShadow}
-        color="gray.800"
-      >
-        <ProposalTextCell
-          title={proposal.title}
-          type={proposal.type}
-          isExpedited={proposal.isExpedited}
-          isDepositOrVoting={isDepositOrVoting}
-        />
-      </TableRowFreeze>
-      <TableRow justifyContent="center">
-        <StopPropagationBox>
-          <StatusChip status={proposal.status} />
-        </StopPropagationBox>
-      </TableRow>
-      <TableRow>
-        <VotingEndTime
-          votingEndTime={proposal.votingEndTime}
-          depositEndTime={proposal.depositEndTime}
-          status={proposal.status}
-        />
-      </TableRow>
-      <TableRow>
-        <StopPropagationBox>
-          <ResolvedHeight
-            resolvedHeight={proposal.resolvedHeight}
-            isDepositOrVoting={isDepositOrVoting}
-            amptrackSection="proposal-list"
-          />
-        </StopPropagationBox>
-      </TableRow>
-      <TableRow>
-        <Proposer
-          proposer={proposal.proposer}
-          amptrackSection="proposal-list"
-        />
-      </TableRow>
-    </Grid>
-  );
-};

From 578970207eccc3196e133eadf6493f4e12e65f47 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 15 Jun 2023 16:02:58 +0700
Subject: [PATCH 242/354] fix: format denom fn

---
 .../components/modal/UnsupportedTokensModal.tsx   |  2 +-
 .../components/delegations/RadioCard.tsx          |  2 +-
 .../components/delegations/TotalCard.tsx          |  7 +++----
 .../components/delegations/index.tsx              |  3 ++-
 .../components/tables/TokenCell.tsx               |  8 +++-----
 src/lib/pages/account-details/data.ts             |  6 +++---
 src/lib/services/proposalService.ts               |  3 +--
 src/lib/utils/formatter/denom.ts                  | 14 +++++++++++++-
 src/lib/utils/formatter/formatBalanceWithDenom.ts |  2 +-
 src/lib/utils/formatter/tokenType.ts              | 15 +++++++--------
 10 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx
index 21c5134fd..fa3e3d62a 100644
--- a/src/lib/components/modal/UnsupportedTokensModal.tsx
+++ b/src/lib/components/modal/UnsupportedTokensModal.tsx
@@ -54,7 +54,7 @@ const UnsupportedToken = ({ balance }: UnsupportedTokenProps) => {
   const getAddressType = useGetAddressType();
   // TODO - Move this to utils
   const [tokenLabel, tokenType] = useMemo(() => {
-    const label = getTokenLabel(balance.id);
+    const label = getTokenLabel(balance.id, balance.symbol);
     const type = !balance.id.includes("/")
       ? getTokenTypeWithAddress(balance.type, getAddressType(balance.id))
       : getTokenType(balance.id.split("/")[0]);
diff --git a/src/lib/pages/account-details/components/delegations/RadioCard.tsx b/src/lib/pages/account-details/components/delegations/RadioCard.tsx
index 86de2ce2e..d347e8445 100644
--- a/src/lib/pages/account-details/components/delegations/RadioCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/RadioCard.tsx
@@ -36,7 +36,7 @@ export const RadioCard = ({
                 {formatUTokenWithPrecision(token.amount, token.precision || 0)}
               </Heading>
               <Text variant="body2" textColor="text.main">
-                {token.symbol ?? getTokenLabel(token.denom)}
+                {getTokenLabel(token.denom, token.symbol)}
               </Text>
             </Flex>
           )}
diff --git a/src/lib/pages/account-details/components/delegations/TotalCard.tsx b/src/lib/pages/account-details/components/delegations/TotalCard.tsx
index 2cef8663b..e72c52ec3 100644
--- a/src/lib/pages/account-details/components/delegations/TotalCard.tsx
+++ b/src/lib/pages/account-details/components/delegations/TotalCard.tsx
@@ -43,17 +43,16 @@ export const TotalCard = ({
         ) : (
           <Flex alignItems="center" gap={1}>
             <Heading variant="h6" as="h6">
-              {formatUTokenWithPrecision(token.amount, token.precision || 0)}
+              {formatUTokenWithPrecision(token.amount, token.precision ?? 0)}
             </Heading>
             <Text variant="body1" textColor="text.main">
-              {token.symbol ?? getTokenLabel(token.denom)}
+              {getTokenLabel(token.denom, token.symbol)}
             </Text>
             <Image
               boxSize={6}
               src={token.logo}
-              alt={token.symbol ?? getTokenLabel(token.denom)}
+              alt={getTokenLabel(token.denom, token.symbol)}
               fallback={<NAToken />}
-              fallbackStrategy="onError"
             />
           </Flex>
         )}
diff --git a/src/lib/pages/account-details/components/delegations/index.tsx b/src/lib/pages/account-details/components/delegations/index.tsx
index 3162cba54..daad71816 100644
--- a/src/lib/pages/account-details/components/delegations/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/index.tsx
@@ -63,7 +63,6 @@ export const DelegationsSection = ({
   if (!stakingParams)
     return <EmptyState message="Error fetching delegation data" />;
 
-  const bondDenomLabel = getTokenLabel(stakingParams.bondDenom);
   // TODO: support more than one Asset?
   const defaultToken: TokenWithValue = {
     denom: stakingParams.bondDenom,
@@ -74,6 +73,8 @@ export const DelegationsSection = ({
     value: stakingParams.logo ? (big(0) as USD<Big>) : undefined,
   };
 
+  const bondDenomLabel = getTokenLabel(defaultToken.denom, defaultToken.symbol);
+
   const [totalBondedBondDenom, totalRewardBondDenom, totalCommissionBondDenom] =
     getTotalBondDenom(
       [totalBonded, totalRewards, totalCommission],
diff --git a/src/lib/pages/account-details/components/tables/TokenCell.tsx b/src/lib/pages/account-details/components/tables/TokenCell.tsx
index e8200ce1a..71ecea6a0 100644
--- a/src/lib/pages/account-details/components/tables/TokenCell.tsx
+++ b/src/lib/pages/account-details/components/tables/TokenCell.tsx
@@ -17,18 +17,16 @@ export const TokenCell = ({ token }: TokenCellProps) => (
     <Image
       boxSize={6}
       src={token.logo}
-      alt={token.symbol ?? getTokenLabel(token.denom)}
+      alt={getTokenLabel(token.denom, token.symbol)}
       fallback={<NAToken />}
       fallbackStrategy="onError"
     />
     <Flex direction="column">
       <Flex gap={1} alignItems="center">
         <Text variant="body2" fontWeight={700}>
-          {formatUTokenWithPrecision(token.amount, token.precision || 0)}
-        </Text>
-        <Text variant="body2">
-          {token.symbol ?? getTokenLabel(token.denom)}
+          {formatUTokenWithPrecision(token.amount, token.precision ?? 0)}
         </Text>
+        <Text variant="body2">{getTokenLabel(token.denom, token.symbol)}</Text>
       </Flex>
       <Text variant="body3" textColor="text.dark">
         ({token.value ? formatPrice(token.value) : "-"})
diff --git a/src/lib/pages/account-details/data.ts b/src/lib/pages/account-details/data.ts
index cffd2f385..b4135e52a 100644
--- a/src/lib/pages/account-details/data.ts
+++ b/src/lib/pages/account-details/data.ts
@@ -262,9 +262,9 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
   if (rawStakingParams && assetInfos && validators) {
     const stakingParams = {
       ...rawStakingParams,
-      symbol: assetInfos[rawStakingParams.bondDenom].symbol,
-      logo: assetInfos[rawStakingParams.bondDenom].logo,
-      precision: assetInfos[rawStakingParams.bondDenom].precision,
+      symbol: assetInfos[rawStakingParams.bondDenom]?.symbol,
+      logo: assetInfos[rawStakingParams.bondDenom]?.logo,
+      precision: assetInfos[rawStakingParams.bondDenom]?.precision,
     };
     data.stakingParams = stakingParams;
 
diff --git a/src/lib/services/proposalService.ts b/src/lib/services/proposalService.ts
index be921fc7d..78d695d50 100644
--- a/src/lib/services/proposalService.ts
+++ b/src/lib/services/proposalService.ts
@@ -317,7 +317,7 @@ export const useGovParams = (): UseQueryResult<GovParams> => {
             minDepositParam.amount as U<Token>,
             assetInfo?.precision
           ).toFixed(),
-          getTokenLabel(minDepositParam.denom),
+          getTokenLabel(minDepositParam.denom, assetInfo?.symbol),
         ];
         return {
           depositParams: {
@@ -330,7 +330,6 @@ export const useGovParams = (): UseQueryResult<GovParams> => {
               formattedToken: formatBalanceWithDenom({
                 coin: minDepositParam,
                 precision: assetInfo?.precision,
-                decimalPoints: 2,
               }),
               precision: assetInfo?.precision ?? 0,
             },
diff --git a/src/lib/utils/formatter/denom.ts b/src/lib/utils/formatter/denom.ts
index a904b921b..79aa0b969 100644
--- a/src/lib/utils/formatter/denom.ts
+++ b/src/lib/utils/formatter/denom.ts
@@ -1,9 +1,21 @@
 import type { StdFee } from "@cosmjs/stargate";
 
+import { truncate } from "../truncate";
 import type { Fee, Token, U } from "lib/types";
 
 import { formatToken } from "./currency.format";
-import { getTokenLabel } from "./tokenType";
+
+// NOTE: revisit this if some chain is not using "u"denom
+const getTokenLabel = (denom: string) => {
+  if (denom[0] === "u") {
+    return denom.replace("u", "").toUpperCase();
+  }
+  const splitId = denom.split("/");
+  if (splitId[1]) {
+    splitId[1] = truncate(splitId[1]);
+  }
+  return splitId.length === 1 ? denom : splitId.join("/");
+};
 
 export const formatUFee = (uFee: string) => {
   const regex = /([0-9]+)|([a-zA-Z]+)/g;
diff --git a/src/lib/utils/formatter/formatBalanceWithDenom.ts b/src/lib/utils/formatter/formatBalanceWithDenom.ts
index 64b7eecae..f917083dc 100644
--- a/src/lib/utils/formatter/formatBalanceWithDenom.ts
+++ b/src/lib/utils/formatter/formatBalanceWithDenom.ts
@@ -23,4 +23,4 @@ export const formatBalanceWithDenom = ({
     precision || 0,
     false,
     decimalPoints
-  )} ${getTokenLabel(symbol || coin.denom)}`;
+  )} ${getTokenLabel(coin.denom, symbol)}`;
diff --git a/src/lib/utils/formatter/tokenType.ts b/src/lib/utils/formatter/tokenType.ts
index f48e21217..1056fd369 100644
--- a/src/lib/utils/formatter/tokenType.ts
+++ b/src/lib/utils/formatter/tokenType.ts
@@ -12,13 +12,12 @@ export const getTokenType = (type: string) => {
   }
 };
 
-export const getTokenLabel = (denom: string) => {
-  if (denom[0] === "u") {
-    return denom.replace("u", "").toUpperCase();
-  }
+export const getTokenLabel = (denom: string, symbol?: string) => {
+  if (symbol) return symbol;
+
   const splitId = denom.split("/");
-  if (splitId[1]) {
-    splitId[1] = truncate(splitId[1]);
-  }
-  return splitId.length === 1 ? denom : splitId.join("/");
+  if (splitId.length === 1) return denom;
+
+  splitId[1] = truncate(splitId[1]);
+  return splitId.join("/");
 };

From 1e3a89f8fb9eb8e3da3fbb2e6c30a9907ef4b546 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 15 Jun 2023 16:03:43 +0700
Subject: [PATCH 243/354] fix: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7b777ece2..608655411 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -74,6 +74,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#392](https://github.com/alleslabs/celatone-frontend/pull/392) Fix format denom function
 - [#390](https://github.com/alleslabs/celatone-frontend/pull/390) Fix minor styling
 - [#391](https://github.com/alleslabs/celatone-frontend/pull/391) Fix incorrect empty state for past txs table
 - [#383](https://github.com/alleslabs/celatone-frontend/pull/383) Fix title input field and navigation in sticky bar in proposal to store code, redirect path for wasm flag

From 65b0aea6b486d81daee03a3d4b05e5828b695323 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 15 Jun 2023 16:10:33 +0700
Subject: [PATCH 244/354] fix: remove extra text spacing

---
 src/lib/components/table/proposals/ProposalsTableHeader.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/table/proposals/ProposalsTableHeader.tsx b/src/lib/components/table/proposals/ProposalsTableHeader.tsx
index abc9b929c..c789ec8f9 100644
--- a/src/lib/components/table/proposals/ProposalsTableHeader.tsx
+++ b/src/lib/components/table/proposals/ProposalsTableHeader.tsx
@@ -24,8 +24,8 @@ export const ProposalsTableHeader = ({
       </TableHeaderFreeze>
       <TableHeader textAlign="center">Status</TableHeader>
       <TableHeader>Voting ends</TableHeader>
-      <TableHeader>Resolved Block Height </TableHeader>
-      <TableHeader>Proposed By </TableHeader>
+      <TableHeader>Resolved Block Height</TableHeader>
+      <TableHeader>Proposed By</TableHeader>
     </Grid>
   );
 };

From 7dba5a2bd7cb1547492586dc7276e7bb11206913 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 15 Jun 2023 16:49:39 +0700
Subject: [PATCH 245/354] fix: use api from config

---
 src/lib/hooks/useOpenAssetTab.ts | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/lib/hooks/useOpenAssetTab.ts b/src/lib/hooks/useOpenAssetTab.ts
index 1e789970b..9e57d21e9 100644
--- a/src/lib/hooks/useOpenAssetTab.ts
+++ b/src/lib/hooks/useOpenAssetTab.ts
@@ -1,23 +1,16 @@
-import { useWallet } from "@cosmos-kit/react";
 import { useCallback } from "react";
 
-import { CELATONE_API_ENDPOINT, getChainApiPath } from "env";
-import { useChainId } from "lib/app-provider";
+import { useBaseApiRoute } from "lib/app-provider";
 
 import { openNewTab } from "./useOpenTxTab";
 
 export const useOpenAssetTab = () => {
-  const { currentChainName } = useWallet();
-  const chainId = useChainId();
-
-  const baseUrl = `${CELATONE_API_ENDPOINT}/balances/${getChainApiPath(
-    currentChainName
-  )}/${chainId}`;
+  const balancesApiRoute = useBaseApiRoute("balances");
 
   return useCallback(
     (walletAddr: string) => {
-      openNewTab(`${baseUrl}/${walletAddr}`);
+      openNewTab(`${balancesApiRoute}/${walletAddr}`);
     },
-    [baseUrl]
+    [balancesApiRoute]
   );
 };

From 687f4b9bf1e921a0951f563e866ca83a5dce9f78 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 15 Jun 2023 17:05:18 +0700
Subject: [PATCH 246/354] fix: fix rpc/lcd provider, tweak whitelist msg
 permission, etc

---
 src/lib/pages/admin/index.tsx                 |  1 -
 src/lib/pages/deploy/index.tsx                | 16 ++--
 .../migrate/components/MigrateOptions.tsx     | 77 ++++++++++++++-----
 src/lib/pages/migrate/index.tsx               |  3 +
 .../components/MyStoredCodesSection.tsx       |  3 +-
 src/lib/pages/proposal/constants.tsx          |  9 ++-
 src/lib/pages/proposal/whitelist/index.tsx    |  4 +
 src/pages/_app.tsx                            | 33 ++++----
 8 files changed, 100 insertions(+), 46 deletions(-)

diff --git a/src/lib/pages/admin/index.tsx b/src/lib/pages/admin/index.tsx
index cbdcc7185..88456b7f8 100644
--- a/src/lib/pages/admin/index.tsx
+++ b/src/lib/pages/admin/index.tsx
@@ -212,7 +212,6 @@ const UpdateAdmin = () => {
         helperText="This address will be an admin for the deployed smart contract."
         value={adminAddress}
         setInputState={setAdminAddress}
-        mt={12}
         status={adminFormStatus}
       />
       <Flex
diff --git a/src/lib/pages/deploy/index.tsx b/src/lib/pages/deploy/index.tsx
index 278b36b74..6a5e1e478 100644
--- a/src/lib/pages/deploy/index.tsx
+++ b/src/lib/pages/deploy/index.tsx
@@ -27,7 +27,8 @@ import type { HumanAddr } from "lib/types";
 import { AccessConfigPermission } from "lib/types";
 
 const getAlertContent = (
-  enabled: boolean
+  enabled: boolean,
+  chainPrettyName: string
 ): { variant: AlertProps["variant"]; icon: JSX.Element; description: string } =>
   enabled
     ? {
@@ -50,14 +51,16 @@ const getAlertContent = (
             boxSize={4}
           />
         ),
-        description:
-          "The current network is a permissioned CosmWasm network. Only whitelisted addresses can directly upload Wasm files.",
+        description: `${chainPrettyName} is a permissioned CosmWasm network. Only whitelisted addresses can directly upload Wasm files.`,
       };
 
 const Deploy = () => {
   const router = useRouter();
   const navigate = useInternalNavigate();
-  const { address } = useCurrentChain();
+  const {
+    address,
+    chain: { pretty_name: chainPrettyName },
+  } = useCurrentChain();
   const { data, isFetching } = useUploadAccessParams();
 
   const isPermissionedNetwork =
@@ -75,7 +78,10 @@ const Deploy = () => {
 
   if (isFetching) return <Loading />;
 
-  const { variant, icon, description } = getAlertContent(enableUpload);
+  const { variant, icon, description } = getAlertContent(
+    enableUpload,
+    chainPrettyName
+  );
   return (
     <WasmPageContainer>
       <Text variant="body1" color="text.dark" mb={3} fontWeight={700}>
diff --git a/src/lib/pages/migrate/components/MigrateOptions.tsx b/src/lib/pages/migrate/components/MigrateOptions.tsx
index aa17a1c2d..4d51c8e07 100644
--- a/src/lib/pages/migrate/components/MigrateOptions.tsx
+++ b/src/lib/pages/migrate/components/MigrateOptions.tsx
@@ -1,34 +1,69 @@
-import { Heading } from "@chakra-ui/react";
+import { Alert, AlertDescription, Heading } from "@chakra-ui/react";
 
+import { useCurrentChain } from "lib/app-provider";
 import { ButtonCard } from "lib/components/ButtonCard";
+import { CustomIcon } from "lib/components/icon";
+import type { UploadAccess } from "lib/services/proposal";
+import type { HumanAddr, Option } from "lib/types";
+import { AccessConfigPermission } from "lib/types";
+import { resolvePermission } from "lib/utils";
 
 interface MigrateOptionsProps {
   isAdmin: boolean;
+  uploadAccess: Option<UploadAccess>;
   uploadHandler: () => void;
   existHandler: () => void;
 }
 
 export const MigrateOptions = ({
   isAdmin,
+  uploadAccess,
   uploadHandler,
   existHandler,
-}: MigrateOptionsProps) => (
-  <>
-    <Heading as="h5" variant="h5" mb={6} textAlign="center">
-      Migrate Options
-    </Heading>
-    <ButtonCard
-      disabled={!isAdmin}
-      title="Upload new WASM File"
-      description="Deploy contract by uploading new Wasm file"
-      onClick={uploadHandler}
-      mb={4}
-    />
-    <ButtonCard
-      disabled={!isAdmin}
-      title="Use existing Code IDs"
-      description="Input code ID or select from stored codes or your saved codes"
-      onClick={existHandler}
-    />
-  </>
-);
+}: MigrateOptionsProps) => {
+  const {
+    address,
+    chain: { pretty_name: chainPrettyName },
+  } = useCurrentChain();
+  const isPermissionedNetwork =
+    uploadAccess?.permission !== AccessConfigPermission.EVERYBODY;
+  const isAllowed = resolvePermission(
+    address as HumanAddr,
+    uploadAccess?.permission,
+    uploadAccess?.addresses
+  );
+  return (
+    <>
+      <Heading as="h5" variant="h5" mb={6} textAlign="center">
+        Migrate Options
+      </Heading>
+      {address && !isAllowed && (
+        <Alert variant="primary" mb={4} alignItems="flex-start" gap={2}>
+          <CustomIcon
+            name="info-circle-solid"
+            color="primary.light"
+            boxSize={4}
+          />
+          <AlertDescription>{`${chainPrettyName} is a permissioned CosmWasm network. Only whitelisted addresses can directly upload Wasm files.`}</AlertDescription>
+        </Alert>
+      )}
+      <ButtonCard
+        disabled={!isAdmin || !isAllowed}
+        title="Upload new WASM File"
+        description={
+          isPermissionedNetwork
+            ? "Available for whitelisted addresses only"
+            : "Deploy contract by uploading new Wasm file"
+        }
+        onClick={uploadHandler}
+        mb={4}
+      />
+      <ButtonCard
+        disabled={!isAdmin}
+        title="Use existing Code IDs"
+        description="Input code ID or select from stored codes or your saved codes"
+        onClick={existHandler}
+      />
+    </>
+  );
+};
diff --git a/src/lib/pages/migrate/index.tsx b/src/lib/pages/migrate/index.tsx
index 228b77837..6f9ec8bcb 100644
--- a/src/lib/pages/migrate/index.tsx
+++ b/src/lib/pages/migrate/index.tsx
@@ -17,6 +17,7 @@ import { Stepper } from "lib/components/stepper";
 import WasmPageContainer from "lib/components/WasmPageContainer";
 import { AmpTrackToMigrate } from "lib/services/amplitude";
 import { queryInstantiateInfo } from "lib/services/contract";
+import { useUploadAccessParams } from "lib/services/proposalService";
 import type { ContractAddr } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
@@ -38,6 +39,7 @@ const Migrate = () => {
   const router = useRouter();
   const navigate = useInternalNavigate();
   const lcdEndpoint = useLCDEndpoint();
+  const { data: uploadAccess } = useUploadAccessParams();
 
   const { address = "" } = useCurrentChain();
 
@@ -121,6 +123,7 @@ const Migrate = () => {
         return (
           <MigrateOptions
             isAdmin={admin === address}
+            uploadAccess={uploadAccess}
             uploadHandler={() => {
               setValue("migrateStep", "upload_new_code");
             }}
diff --git a/src/lib/pages/my-codes/components/MyStoredCodesSection.tsx b/src/lib/pages/my-codes/components/MyStoredCodesSection.tsx
index 08bb0aebe..1f16cef95 100644
--- a/src/lib/pages/my-codes/components/MyStoredCodesSection.tsx
+++ b/src/lib/pages/my-codes/components/MyStoredCodesSection.tsx
@@ -6,7 +6,6 @@ import { useUploadAccessParams } from "lib/services/proposalService";
 import type { Addr, CodeInfo } from "lib/types";
 import { AccessConfigPermission } from "lib/types";
 
-import { DeployButton } from "./DeployButton";
 import { ProposalButton } from "./ProposalButton";
 import { UploadButton } from "./UploadButton";
 
@@ -45,7 +44,7 @@ export const MyStoredCodesSection = ({
               <ProposalButton />
             </>
           ) : (
-            <DeployButton />
+            <UploadButton isAllowed />
           )}
         </Flex>
       </HStack>
diff --git a/src/lib/pages/proposal/constants.tsx b/src/lib/pages/proposal/constants.tsx
index e0cf65351..4dce21e1b 100644
--- a/src/lib/pages/proposal/constants.tsx
+++ b/src/lib/pages/proposal/constants.tsx
@@ -75,11 +75,11 @@ export const SIDEBAR_STORE_CODE_DETAILS: (
     },
     permissionless: {
       page: storeCodePage,
-      title: "Do I need to submit Proposal to store code in testnet?",
+      title: `Do I need to submit Proposal to store code on ${chainName}?`,
       description: (
         <span>
-          On the {chainName}, you can store code without submitting a proposal
-          by using{" "}
+          On {chainName}, you can store code without submitting a proposal by
+          using{" "}
           <AppLink
             onClick={() =>
               AmpTrackUseRightHelperPanel(storeCodePage, "to-/deploy")
@@ -96,7 +96,8 @@ export const SIDEBAR_STORE_CODE_DETAILS: (
           process, you can try submitting a proposal.
           <br />
           <br />
-          On the mainnet, submitting a proposal is required to store code.
+          On the permissioned chain, submitting a proposal is required to store
+          code.
         </span>
       ),
       toPage: true,
diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index a2f9523ff..9b1820088 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -131,6 +131,9 @@ const ProposalToWhitelist = () => {
         description,
         changesValue: JSON.stringify({
           ...govParams?.uploadAccess,
+          permission: !isPermissionless
+            ? AccessConfigPermission.ANY_OF_ADDRESSES
+            : AccessConfigPermission.EVERYBODY,
           addresses: govParams?.uploadAccess.addresses?.concat(addressesArray),
         }),
         initialDeposit,
@@ -145,6 +148,7 @@ const ProposalToWhitelist = () => {
       minDeposit,
       title,
       walletAddress,
+      isPermissionless,
     ]
   );
 
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 1e1a37189..4b0a5d525 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -36,20 +36,21 @@ configurePersistable({
   stringify: false,
 });
 
+const availableChainsEndpoints = Object.values(CHAIN_CONFIGS).reduce<
+  EndpointOptions["endpoints"]
+>(
+  (endpoints, config) => ({
+    ...endpoints,
+    [config.registryChainName]: {
+      rpc: [config.rpc],
+      rest: [config.lcd],
+    },
+  }),
+  {}
+);
+
 const MyApp = ({ Component, pageProps }: AppProps) => {
   const queryClient = new QueryClient();
-  const availableChainsEndpoints = Object.values(
-    CHAIN_CONFIGS
-  ).reduce<EndpointOptions>(
-    (endpoints, config) => ({
-      ...endpoints,
-      [config.registryChainName]: {
-        rpc: [config.rpc],
-        rest: [config.lcd],
-      },
-    }),
-    {}
-  );
 
   return (
     <Chakra>
@@ -74,7 +75,13 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
           chains={chains}
           assetLists={assets}
           wallets={wallets}
-          endpointOptions={availableChainsEndpoints}
+          endpointOptions={{
+            isLazy: true,
+            endpoints: availableChainsEndpoints,
+          }}
+          signerOptions={{
+            preferredSignType: () => "direct",
+          }}
           wrappedWithChakra
         >
           <StoreProvider>

From 14a88e68bf54a6277f8067fd4145b20f1892e439 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 15 Jun 2023 17:14:37 +0700
Subject: [PATCH 247/354] fix: disable wasm on account detail

---
 CHANGELOG.md                            |  1 +
 src/lib/pages/account-details/index.tsx | 53 +++++++++++++++----------
 2 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 67a703f44..e7c632257 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -75,6 +75,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#395](https://github.com/alleslabs/celatone-frontend/pull/395) Disable wasm related tabs on the account detail page
 - [#390](https://github.com/alleslabs/celatone-frontend/pull/390) Fix minor styling
 - [#391](https://github.com/alleslabs/celatone-frontend/pull/391) Fix incorrect empty state for past txs table
 - [#383](https://github.com/alleslabs/celatone-frontend/pull/383) Fix title input field and navigation in sticky bar in proposal to store code, redirect path for wasm flag
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 1cc2c2a31..b21cd8970 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -11,7 +11,7 @@ import {
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
-import { useValidateAddress } from "lib/app-provider";
+import { useValidateAddress, useWasmConfig } from "lib/app-provider";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomTab } from "lib/components/CustomTab";
@@ -63,6 +63,8 @@ interface AccountDetailsBodyProps {
 const InvalidAccount = () => <InvalidState title="Account does not exist" />;
 
 const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
+  const wasm = useWasmConfig({ shouldRedirect: false });
+
   const [tabIndex, setTabIndex] = useState(TabIndex.Overview);
   const tableHeaderId = "accountDetailsTab";
   const { data: publicInfo } = usePublicProjectByAccountAddress(accountAddress);
@@ -187,6 +189,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
             count={tableCounts.codesCount}
             isDisabled={!tableCounts.codesCount}
             onClick={() => handleTabChange(TabIndex.Codes)}
+            hidden={!wasm.enabled}
           >
             Codes
           </CustomTab>
@@ -194,6 +197,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
             count={tableCounts.contractsCount}
             isDisabled={!tableCounts.contractsCount}
             onClick={() => handleTabChange(TabIndex.Contracts)}
+            hidden={!wasm.enabled}
           >
             Contracts
           </CustomTab>
@@ -201,6 +205,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
             count={tableCounts.contractsAdminCount}
             isDisabled={!tableCounts.contractsAdminCount}
             onClick={() => handleTabChange(TabIndex.Admins)}
+            hidden={!wasm.enabled}
           >
             Admins
           </CustomTab>
@@ -258,27 +263,31 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
               scrollComponentId={tableHeaderId}
               onViewMore={() => handleTabChange(TabIndex.Txs)}
             />
-            <StoredCodesTable
-              walletAddress={accountAddress}
-              scrollComponentId={tableHeaderId}
-              totalData={tableCounts.codesCount}
-              refetchCount={refetchCodesCount}
-              onViewMore={() => handleTabChange(TabIndex.Codes)}
-            />
-            <InstantiatedContractsTable
-              walletAddress={accountAddress}
-              scrollComponentId={tableHeaderId}
-              totalData={tableCounts.contractsCount}
-              refetchCount={refetchContractsCount}
-              onViewMore={() => handleTabChange(TabIndex.Contracts)}
-            />
-            <AdminContractsTable
-              walletAddress={accountAddress}
-              scrollComponentId={tableHeaderId}
-              totalData={tableCounts.contractsAdminCount}
-              refetchCount={refetchContractsAdminCount}
-              onViewMore={() => handleTabChange(TabIndex.Admins)}
-            />
+            {wasm.enabled && (
+              <>
+                <StoredCodesTable
+                  walletAddress={accountAddress}
+                  scrollComponentId={tableHeaderId}
+                  totalData={tableCounts.codesCount}
+                  refetchCount={refetchCodesCount}
+                  onViewMore={() => handleTabChange(TabIndex.Codes)}
+                />
+                <InstantiatedContractsTable
+                  walletAddress={accountAddress}
+                  scrollComponentId={tableHeaderId}
+                  totalData={tableCounts.contractsCount}
+                  refetchCount={refetchContractsCount}
+                  onViewMore={() => handleTabChange(TabIndex.Contracts)}
+                />
+                <AdminContractsTable
+                  walletAddress={accountAddress}
+                  scrollComponentId={tableHeaderId}
+                  totalData={tableCounts.contractsAdminCount}
+                  refetchCount={refetchContractsAdminCount}
+                  onViewMore={() => handleTabChange(TabIndex.Admins)}
+                />
+              </>
+            )}
             <OpenedProposalsTable
               walletAddress={accountAddress}
               scrollComponentId={tableHeaderId}

From c155ef89e61b931be3e9a483d4338961cb977b94 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 16 Jun 2023 11:02:54 +0700
Subject: [PATCH 248/354] fix: rename old format fn

---
 src/lib/utils/formatter/denom.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/lib/utils/formatter/denom.ts b/src/lib/utils/formatter/denom.ts
index 79aa0b969..fb7726dd5 100644
--- a/src/lib/utils/formatter/denom.ts
+++ b/src/lib/utils/formatter/denom.ts
@@ -6,7 +6,7 @@ import type { Fee, Token, U } from "lib/types";
 import { formatToken } from "./currency.format";
 
 // NOTE: revisit this if some chain is not using "u"denom
-const getTokenLabel = (denom: string) => {
+const getTokenLabelByDenom = (denom: string) => {
   if (denom[0] === "u") {
     return denom.replace("u", "").toUpperCase();
   }
@@ -20,12 +20,14 @@ const getTokenLabel = (denom: string) => {
 export const formatUFee = (uFee: string) => {
   const regex = /([0-9]+)|([a-zA-Z]+)/g;
   const [fee, denom] = uFee.match(regex) as RegExpMatchArray;
-  return `${formatToken(fee as U<Token>, denom)} ${getTokenLabel(denom)}`;
+  return `${formatToken(fee as U<Token>, denom)} ${getTokenLabelByDenom(
+    denom
+  )}`;
 };
 
 export const formatStdFee = (fee: StdFee | Fee) => {
   return `${formatToken(
     fee.amount[0].amount as U<Token>,
     fee.amount[0].denom
-  )} ${getTokenLabel(fee.amount[0].denom)}`;
+  )} ${getTokenLabelByDenom(fee.amount[0].denom)}`;
 };

From 9055f5000dc1f176b83e90d07903490c361631f6 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 16 Jun 2023 11:47:55 +0700
Subject: [PATCH 249/354] chore: change getting prettyname logic

---
 src/lib/pages/deploy/index.tsx                      | 7 ++++---
 src/lib/pages/migrate/components/MigrateOptions.tsx | 8 ++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/lib/pages/deploy/index.tsx b/src/lib/pages/deploy/index.tsx
index 6a5e1e478..52eb8cd7c 100644
--- a/src/lib/pages/deploy/index.tsx
+++ b/src/lib/pages/deploy/index.tsx
@@ -11,6 +11,7 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import {
+  useCelatoneApp,
   useCurrentChain,
   useInternalNavigate,
   useWasmConfig,
@@ -57,10 +58,10 @@ const getAlertContent = (
 const Deploy = () => {
   const router = useRouter();
   const navigate = useInternalNavigate();
+  const { address } = useCurrentChain();
   const {
-    address,
-    chain: { pretty_name: chainPrettyName },
-  } = useCurrentChain();
+    chainConfig: { prettyName: chainPrettyName },
+  } = useCelatoneApp();
   const { data, isFetching } = useUploadAccessParams();
 
   const isPermissionedNetwork =
diff --git a/src/lib/pages/migrate/components/MigrateOptions.tsx b/src/lib/pages/migrate/components/MigrateOptions.tsx
index 4d51c8e07..f7e972088 100644
--- a/src/lib/pages/migrate/components/MigrateOptions.tsx
+++ b/src/lib/pages/migrate/components/MigrateOptions.tsx
@@ -1,6 +1,6 @@
 import { Alert, AlertDescription, Heading } from "@chakra-ui/react";
 
-import { useCurrentChain } from "lib/app-provider";
+import { useCelatoneApp, useCurrentChain } from "lib/app-provider";
 import { ButtonCard } from "lib/components/ButtonCard";
 import { CustomIcon } from "lib/components/icon";
 import type { UploadAccess } from "lib/services/proposal";
@@ -21,10 +21,10 @@ export const MigrateOptions = ({
   uploadHandler,
   existHandler,
 }: MigrateOptionsProps) => {
+  const { address } = useCurrentChain();
   const {
-    address,
-    chain: { pretty_name: chainPrettyName },
-  } = useCurrentChain();
+    chainConfig: { prettyName: chainPrettyName },
+  } = useCelatoneApp();
   const isPermissionedNetwork =
     uploadAccess?.permission !== AccessConfigPermission.EVERYBODY;
   const isAllowed = resolvePermission(

From bd01ac5df28f276b6fbe14585ed452747f21e2ce Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 16 Jun 2023 12:07:58 +0700
Subject: [PATCH 250/354] feat: disable query with wasm config

---
 src/lib/services/codeService.ts     | 14 +++++++++++---
 src/lib/services/contractService.ts | 25 ++++++++++++++++++++-----
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/lib/services/codeService.ts b/src/lib/services/codeService.ts
index 598b589e7..99e2eed3d 100644
--- a/src/lib/services/codeService.ts
+++ b/src/lib/services/codeService.ts
@@ -3,7 +3,7 @@ import type { UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 
-import { useCelatoneApp } from "lib/app-provider";
+import { useCelatoneApp, useWasmConfig } from "lib/app-provider";
 import {
   getCodeDataByCodeId,
   getCodeListByIDsQueryDocument,
@@ -167,6 +167,8 @@ export const useCodeListByWalletAddressPagination = (
   pageSize: number
 ): UseQueryResult<CodeInfo[]> => {
   const { indexerGraphClient } = useCelatoneApp();
+  const wasm = useWasmConfig({ shouldRedirect: false });
+
   const queryFn = useCallback(async () => {
     if (!walletAddress)
       throw new Error(
@@ -202,7 +204,11 @@ export const useCodeListByWalletAddressPagination = (
       walletAddress,
     ],
     createQueryFnWithTimeout(queryFn),
-    { enabled: !!walletAddress, retry: 1, refetchOnWindowFocus: false }
+    {
+      enabled: wasm.enabled && !!walletAddress,
+      retry: 1,
+      refetchOnWindowFocus: false,
+    }
   );
 };
 
@@ -210,6 +216,8 @@ export const useCodeListCountByWalletAddress = (
   walletAddress: Option<HumanAddr>
 ): UseQueryResult<Option<number>> => {
   const { indexerGraphClient } = useCelatoneApp();
+  const wasm = useWasmConfig({ shouldRedirect: false });
+
   const queryFn = useCallback(async () => {
     if (!walletAddress)
       throw new Error(
@@ -228,7 +236,7 @@ export const useCodeListCountByWalletAddress = (
     queryFn,
     {
       keepPreviousData: true,
-      enabled: !!walletAddress,
+      enabled: wasm.enabled && !!walletAddress,
     }
   );
 };
diff --git a/src/lib/services/contractService.ts b/src/lib/services/contractService.ts
index da41364a6..103c28d8e 100644
--- a/src/lib/services/contractService.ts
+++ b/src/lib/services/contractService.ts
@@ -2,7 +2,7 @@ import type { UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 
-import { useCelatoneApp } from "lib/app-provider";
+import { useCelatoneApp, useWasmConfig } from "lib/app-provider";
 import {
   getAdminByContractAddressesQueryDocument,
   getContractListByAdmin,
@@ -70,6 +70,7 @@ export const useInstantiatedCountByUserQuery = (
   walletAddr: Option<HumanAddr>
 ): UseQueryResult<Option<number>> => {
   const { indexerGraphClient } = useCelatoneApp();
+  const wasm = useWasmConfig({ shouldRedirect: false });
 
   const queryFn = useCallback(async () => {
     if (!walletAddr)
@@ -89,7 +90,7 @@ export const useInstantiatedCountByUserQuery = (
     queryFn,
     {
       keepPreviousData: true,
-      enabled: !!walletAddr,
+      enabled: wasm.enabled && !!walletAddr,
     }
   );
 };
@@ -369,6 +370,8 @@ export const useContractListByWalletAddressPagination = (
   pageSize: number
 ): UseQueryResult<ContractInfo[]> => {
   const { indexerGraphClient } = useCelatoneApp();
+  const wasm = useWasmConfig({ shouldRedirect: false });
+
   const queryFn = useCallback(async () => {
     if (!walletAddress)
       throw new Error(
@@ -406,7 +409,11 @@ export const useContractListByWalletAddressPagination = (
       walletAddress,
     ],
     createQueryFnWithTimeout(queryFn),
-    { enabled: !!walletAddress, retry: 1, refetchOnWindowFocus: false }
+    {
+      enabled: wasm.enabled && !!walletAddress,
+      retry: 1,
+      refetchOnWindowFocus: false,
+    }
   );
 };
 
@@ -416,6 +423,8 @@ export const useContractListByAdminPagination = (
   pageSize: number
 ): UseQueryResult<ContractInfo[]> => {
   const { indexerGraphClient } = useCelatoneApp();
+  const wasm = useWasmConfig({ shouldRedirect: false });
+
   const queryFn = useCallback(async () => {
     if (!walletAddress)
       throw new Error(
@@ -452,7 +461,11 @@ export const useContractListByAdminPagination = (
       walletAddress,
     ],
     createQueryFnWithTimeout(queryFn),
-    { enabled: !!walletAddress, retry: 1, refetchOnWindowFocus: false }
+    {
+      enabled: wasm.enabled && !!walletAddress,
+      retry: 1,
+      refetchOnWindowFocus: false,
+    }
   );
 };
 
@@ -460,6 +473,8 @@ export const useContractListCountByAdmin = (
   walletAddress: Option<HumanAddr>
 ): UseQueryResult<Option<number>> => {
   const { indexerGraphClient } = useCelatoneApp();
+  const wasm = useWasmConfig({ shouldRedirect: false });
+
   const queryFn = useCallback(async () => {
     if (!walletAddress)
       throw new Error("Wallet address not found (useContractListCountByAdmin)");
@@ -476,7 +491,7 @@ export const useContractListCountByAdmin = (
     createQueryFnWithTimeout(queryFn),
     {
       keepPreviousData: true,
-      enabled: !!walletAddress,
+      enabled: wasm.enabled && !!walletAddress,
     }
   );
 };

From 84b34bd913044d3de38947d77c98813c36671009 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 16 Jun 2023 12:48:01 +0700
Subject: [PATCH 251/354] fix: add lazy tab

---
 src/lib/pages/account-details/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index b21cd8970..7a9b62415 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -158,7 +158,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
         </Flex>
       )}
 
-      <Tabs index={tabIndex}>
+      <Tabs index={tabIndex} isLazy lazyBehavior="keepMounted">
         <TabList
           borderBottom="1px solid"
           borderColor="gray.700"

From 9d99d6c6b6a4ffeeb5435b87ab3f1ed7570a3d06 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Fri, 16 Jun 2023 13:36:36 +0700
Subject: [PATCH 252/354] feat: implement first version of osmosis v16 pool

---
 src/lib/components/state/EmptyState.tsx       |   6 +-
 src/lib/layout/navbar/index.tsx               |  10 +-
 .../pools/components/FilterByPoolType.tsx     |  21 +-
 src/lib/pages/pools/components/PoolHeader.tsx | 207 ++++++++++--------
 .../pages/pools/components/UnderDevAlert.tsx  |  22 ++
 .../components/pool-details/PoolAssets.tsx    |  57 +++--
 .../pool-details/PoolRelatedTxs.tsx           |  82 +++++--
 .../pool-details/header/PoolInfo.tsx          |  15 +-
 .../pool-assets/PoolAssetsTableHeader.tsx     |   3 +-
 .../tables/pool-assets/PoolAssetsTableRow.tsx |   3 +-
 .../components/supportedSection/PoolCard.tsx  |  98 +++++----
 .../components/supportedSection/index.tsx     |   3 +-
 .../UnsupportedPoolCard.tsx                   | 139 ++++++------
 .../components/unsupportedSection/index.tsx   |   3 +-
 src/lib/pages/pools/constant.ts               |   3 +-
 src/lib/pages/pools/data.ts                   |   3 +
 src/lib/pages/pools/index.tsx                 |   5 +-
 src/lib/pages/pools/poolId.tsx                |   9 +-
 src/lib/services/expression/poolExpression.ts |   3 +-
 src/lib/styles/theme/components/alert.ts      |   8 +-
 src/lib/types/pool.ts                         |  16 +-
 src/lib/types/tx/transaction.ts               |   6 +-
 22 files changed, 462 insertions(+), 260 deletions(-)
 create mode 100644 src/lib/pages/pools/components/UnderDevAlert.tsx

diff --git a/src/lib/components/state/EmptyState.tsx b/src/lib/components/state/EmptyState.tsx
index 9709082a6..1c2e0c434 100644
--- a/src/lib/components/state/EmptyState.tsx
+++ b/src/lib/components/state/EmptyState.tsx
@@ -1,4 +1,4 @@
-import { Flex, Heading } from "@chakra-ui/react";
+import { Flex, Heading, Text } from "@chakra-ui/react";
 import type { ReactElement } from "react";
 
 import type { ImageVariant } from "./StateImage";
@@ -30,9 +30,9 @@ export const EmptyState = ({
           {heading}
         </Heading>
       )}
-      <Flex fontSize="16px" color="text.dark">
+      <Text color="text.dark" textAlign="center" whiteSpace="pre-wrap">
         {message}
-      </Flex>
+      </Text>
     </Flex>
   </Flex>
 );
diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index 034be94bf..2ba4e3acc 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -38,11 +38,11 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
           slug: "/proposals",
           icon: "proposal",
         },
-        // {
-        //   name: "Osmosis Pools",
-        //   slug: "/pools",
-        //   icon: "pool",
-        // },
+        {
+          name: "Osmosis Pools",
+          slug: "/pools",
+          icon: "pool",
+        },
       ],
     },
     {
diff --git a/src/lib/pages/pools/components/FilterByPoolType.tsx b/src/lib/pages/pools/components/FilterByPoolType.tsx
index 8ca210e0b..508092048 100644
--- a/src/lib/pages/pools/components/FilterByPoolType.tsx
+++ b/src/lib/pages/pools/components/FilterByPoolType.tsx
@@ -1,9 +1,10 @@
 import { Grid } from "@chakra-ui/react";
 
-import { BALANCER_ICON, STABLESWAP_ICON } from "../constant";
+import { BALANCER_ICON, COSMWASM_ICON, STABLESWAP_ICON } from "../constant";
 import { SelectInput } from "lib/components/forms";
 import { AmpEvent, AmpTrackUseFilter } from "lib/services/amplitude";
 import type { PoolTypeFilter } from "lib/types";
+import { PoolType } from "lib/types";
 
 interface PoolTypeOption {
   label: string;
@@ -21,21 +22,33 @@ interface FilterByPoolTypeProps {
 const options: PoolTypeOption[] = [
   {
     label: "All Pools",
-    value: "All",
+    value: PoolType.ALL,
     disabled: false,
   },
   {
     label: "Balancer Pools",
-    value: "Balancer",
+    value: PoolType.BALANCER,
     image: BALANCER_ICON,
     disabled: false,
   },
   {
     label: "StableSwap Pools",
-    value: "Stableswap",
+    value: PoolType.STABLESWAP,
     image: STABLESWAP_ICON,
     disabled: false,
   },
+  {
+    label: "Concentrated Liquidity Pools",
+    value: PoolType.CL,
+    image: BALANCER_ICON,
+    disabled: false,
+  },
+  {
+    label: "CosmWasm Pools",
+    value: PoolType.COSMWASM,
+    image: COSMWASM_ICON,
+    disabled: false,
+  },
 ];
 
 export const FilterByPoolType = ({
diff --git a/src/lib/pages/pools/components/PoolHeader.tsx b/src/lib/pages/pools/components/PoolHeader.tsx
index 90ba1efa3..c354ec17b 100644
--- a/src/lib/pages/pools/components/PoolHeader.tsx
+++ b/src/lib/pages/pools/components/PoolHeader.tsx
@@ -1,7 +1,13 @@
 import { Flex, Heading, Text, Box, Image } from "@chakra-ui/react";
 
-import { BALANCER_ICON, STABLESWAP_ICON, SUPERFLUID_ICON } from "../constant";
+import {
+  BALANCER_ICON,
+  COSMWASM_ICON,
+  STABLESWAP_ICON,
+  SUPERFLUID_ICON,
+} from "../constant";
 import type { PoolDetail } from "lib/types/pool";
+import { PoolType } from "lib/types/pool";
 import { getTokenLabel } from "lib/utils";
 
 import { PoolLogo } from "./PoolLogo";
@@ -12,100 +18,123 @@ interface PoolHeaderProps
   poolType: PoolDetail["type"];
 }
 
+const poolTypeRender = (type: PoolDetail["type"]) => {
+  switch (type) {
+    case PoolType.BALANCER:
+      return {
+        text: "Balancer Pool",
+        icon: BALANCER_ICON,
+      };
+    case PoolType.STABLESWAP:
+      return {
+        text: "StableSwap Pool",
+        icon: STABLESWAP_ICON,
+      };
+    case PoolType.COSMWASM:
+      return {
+        text: "CosmWasm Pool",
+        icon: COSMWASM_ICON,
+      };
+    case PoolType.CL:
+      return {
+        text: "Concentrated Liquidity Pool",
+        icon: BALANCER_ICON,
+      };
+    default:
+      return {};
+  }
+};
+
 export const PoolHeader = ({
   poolId,
   isSuperfluid,
   poolType,
   poolLiquidity,
-}: PoolHeaderProps) => (
-  <Flex justifyContent="space-between" w="full">
-    <Flex alignItems="center" gap={4}>
-      <PoolLogo tokens={poolLiquidity} />
-      <Box>
-        <Flex gap={1} flexWrap="wrap">
-          <Heading as="h6" fontWeight="600" variant="h6">
-            {poolLiquidity[0].symbol ?? getTokenLabel(poolLiquidity[0].denom)}
-          </Heading>
-          {poolLiquidity.slice(1, 3).map((item) => (
-            <Flex key={item.denom} gap={1}>
-              <Heading
-                as="h6"
-                id="separator"
-                fontWeight="600"
-                variant="h6"
-                color="honeydew.main"
-              >
-                /
-              </Heading>
-              <Heading as="h6" fontWeight="600" variant="h6">
-                {item.symbol ?? getTokenLabel(item.denom)}
-              </Heading>
-            </Flex>
-          ))}
-          {poolLiquidity.length >= 4 && (
-            <Flex gap={1}>
-              <Heading
-                as="h6"
-                fontWeight="600"
-                variant="h6"
-                color="honeydew.main"
-              >
-                /
-              </Heading>
-              <Heading as="h6" fontWeight="600" variant="h6">
-                {poolLiquidity.length === 4
-                  ? poolLiquidity[3].symbol ??
-                    getTokenLabel(poolLiquidity[3].denom)
-                  : `+${poolLiquidity.length - 3}`}
-              </Heading>
-            </Flex>
-          )}
-        </Flex>
-        <Flex alignItems="center" gap={2} mt={1}>
-          <Text variant="body2" color="lilac.main">
-            #{poolId}
-          </Text>
-          {poolType && (
-            <Flex alignItems="center" gap={2}>
-              <Flex
-                backgroundColor="pebble.600"
-                borderRadius="full"
-                w="6px"
-                h="6px"
-              />
-              <Flex alignItems="center" gap={1}>
-                <Image
-                  boxSize={4}
-                  src={
-                    poolType === "Balancer" ? BALANCER_ICON : STABLESWAP_ICON
-                  }
+}: PoolHeaderProps) => {
+  const poolValue = poolTypeRender(poolType);
+  return (
+    <Flex justifyContent="space-between" w="full">
+      <Flex alignItems="center" gap={4}>
+        <PoolLogo tokens={poolLiquidity} />
+        <Box>
+          <Flex gap={1} flexWrap="wrap">
+            <Heading as="h6" fontWeight="600" variant="h6">
+              {poolLiquidity[0].symbol ?? getTokenLabel(poolLiquidity[0].denom)}
+            </Heading>
+            {poolLiquidity.slice(1, 3).map((item) => (
+              <Flex key={item.denom} gap={1}>
+                <Heading
+                  as="h6"
+                  id="separator"
+                  fontWeight="600"
+                  variant="h6"
+                  color="honeydew.main"
+                >
+                  /
+                </Heading>
+                <Heading as="h6" fontWeight="600" variant="h6">
+                  {item.symbol ?? getTokenLabel(item.denom)}
+                </Heading>
+              </Flex>
+            ))}
+            {poolLiquidity.length >= 4 && (
+              <Flex gap={1}>
+                <Heading
+                  as="h6"
+                  fontWeight="600"
+                  variant="h6"
+                  color="honeydew.main"
+                >
+                  /
+                </Heading>
+                <Heading as="h6" fontWeight="600" variant="h6">
+                  {poolLiquidity.length === 4
+                    ? poolLiquidity[3].symbol ??
+                      getTokenLabel(poolLiquidity[3].denom)
+                    : `+${poolLiquidity.length - 3}`}
+                </Heading>
+              </Flex>
+            )}
+          </Flex>
+          <Flex alignItems="center" gap={2} mt={1}>
+            <Text variant="body2" color="lilac.main">
+              #{poolId}
+            </Text>
+            {poolType && (
+              <Flex alignItems="center" gap={2}>
+                <Flex
+                  backgroundColor="pebble.600"
+                  borderRadius="full"
+                  w="6px"
+                  h="6px"
                 />
-                <Text variant="body2" color="text.dark">
-                  {poolType === "Balancer"
-                    ? "Balancer Pool"
-                    : "StableSwap Pool"}
-                </Text>
+                <Flex alignItems="center" gap={1}>
+                  <Image boxSize={4} src={poolValue.icon} />
+                  <Text variant="body2" color="text.dark">
+                    {poolValue.text}
+                  </Text>
+                </Flex>
               </Flex>
-            </Flex>
-          )}
-          {isSuperfluid && (
-            <Flex alignItems="center" gap={2}>
-              <Flex
-                backgroundColor="pebble.600"
-                borderRadius="full"
-                w="6px"
-                h="6px"
-              />
-              <Flex alignItems="center" gap={1}>
-                <Image boxSize={4} src={SUPERFLUID_ICON} />
-                <Text variant="body2" color="text.dark">
-                  Superfluid
-                </Text>
+            )}
+            {isSuperfluid && (
+              <Flex alignItems="center" gap={2}>
+                <Flex
+                  backgroundColor="pebble.600"
+                  borderRadius="full"
+                  w="6px"
+                  h="6px"
+                />
+                <Flex alignItems="center" gap={1}>
+                  <Image boxSize={4} src={SUPERFLUID_ICON} />
+                  <Text variant="body2" color="text.dark">
+                    Superfluid
+                  </Text>
+                </Flex>
               </Flex>
-            </Flex>
-          )}
-        </Flex>
-      </Box>
+            )}
+          </Flex>
+        </Box>
+      </Flex>
     </Flex>
-  </Flex>
-);
+  );
+};
diff --git a/src/lib/pages/pools/components/UnderDevAlert.tsx b/src/lib/pages/pools/components/UnderDevAlert.tsx
new file mode 100644
index 000000000..dcb55c073
--- /dev/null
+++ b/src/lib/pages/pools/components/UnderDevAlert.tsx
@@ -0,0 +1,22 @@
+import { Alert, Text } from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+import { PoolType } from "lib/types";
+
+interface UnderDevAlertProps {
+  poolType: PoolType;
+}
+
+const poolText = (poolType: PoolType) => {
+  if (poolType === PoolType.CL) return "concentrated liquidity";
+  if (poolType === PoolType.COSMWASM) return "CosmWasm";
+  return "";
+};
+export const UnderDevAlert = ({ poolType }: UnderDevAlertProps) => (
+  <Alert status="info" variant="info">
+    <CustomIcon name="alert-circle-solid" boxSize={4} mr={2} />
+    <Text color="text.dark">
+      Information for pool {poolText(poolType)} is under development
+    </Text>
+  </Alert>
+);
diff --git a/src/lib/pages/pools/components/pool-details/PoolAssets.tsx b/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
index 675f0dd2d..bcd2abc7d 100644
--- a/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
+++ b/src/lib/pages/pools/components/pool-details/PoolAssets.tsx
@@ -4,8 +4,10 @@ import big from "big.js";
 import Link from "next/link";
 
 import { CustomIcon } from "lib/components/icon";
+import { EmptyState } from "lib/components/state";
 import { AmpTrackWebsite } from "lib/services/amplitude";
 import type { PoolDetail, USD } from "lib/types";
+import { PoolType } from "lib/types";
 import { formatPrice } from "lib/utils";
 
 import { PoolAssetsTable } from "./tables/pool-assets";
@@ -34,34 +36,47 @@ export const PoolAssets = ({ pool }: PoolAssetsProps) => {
           <Text variant="body2" color="text.dark" fontWeight={500}>
             Total Liquidity:
             <Text as="span" fontWeight={700} color="text.main" ml={2}>
-              {formatPrice(totalLiquidity)}
+              {pool.poolLiquidity ? formatPrice(totalLiquidity) : "N/A"}
             </Text>
           </Text>
         )}
       </Flex>
-      <PoolAssetsTable pool={pool} totalLiquidity={totalLiquidity} />
-      <Flex gap={2} alignItems="center" mt={4}>
-        <Text variant="body2" color="text.dark">
-          What is asset weight and allocation?
-        </Text>
-        <Link
-          href="https://docs.osmosis.zone/osmosis-core/modules/gamm#weights"
-          target="_blank"
-          rel="noopener noreferrer"
-          onClick={() =>
-            AmpTrackWebsite(
-              "https://docs.osmosis.zone/osmosis-core/modules/gamm#weights"
-            )
+      {pool.type === PoolType.CL ? (
+        <EmptyState
+          imageVariant="empty"
+          heading="Coming soon!"
+          message={
+            "Asset allocation and liquidity information for \n concentrated liquidity pool are under construction."
           }
-        >
-          <Flex gap="2px" alignItems="center">
-            <Text color="lilac.main" variant="body2">
-              Read more
+          withBorder
+        />
+      ) : (
+        <>
+          <PoolAssetsTable pool={pool} totalLiquidity={totalLiquidity} />
+          <Flex gap={2} alignItems="center" mt={4}>
+            <Text variant="body2" color="text.dark">
+              What is asset weight and allocation?
             </Text>
-            <CustomIcon name="launch" color="lilac.main" boxSize={3} />
+            <Link
+              href="https://docs.osmosis.zone/osmosis-core/modules/gamm#weights"
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={() =>
+                AmpTrackWebsite(
+                  "https://docs.osmosis.zone/osmosis-core/modules/gamm#weights"
+                )
+              }
+            >
+              <Flex gap="2px" alignItems="center">
+                <Text color="lilac.main" variant="body2">
+                  Read more
+                </Text>
+                <CustomIcon name="launch" color="lilac.main" boxSize={3} />
+              </Flex>
+            </Link>
           </Flex>
-        </Link>
-      </Flex>
+        </>
+      )}
     </>
   );
 };
diff --git a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
index d06b62ba7..7325b1c4d 100644
--- a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
+++ b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
@@ -12,6 +12,7 @@ import { usePoolTxsCount } from "../../data";
 import { CustomTab } from "lib/components/CustomTab";
 import { AmpTrackUseTab } from "lib/services/amplitude";
 import type { PoolDetail } from "lib/types";
+import { PoolType } from "lib/types";
 
 import { PoolRelatedTxsTable } from "./tables/pool-txs";
 
@@ -58,12 +59,19 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
           >
             Swap
           </CustomTab>
-          <CustomTab
-            count={countDisplayLpTxs}
-            onClick={() => AmpTrackUseTab("LP")}
-          >
-            LP
-          </CustomTab>
+          {/* TODO - Fix count */}
+          {pool.type === PoolType.CL ? (
+            <CustomTab count={0} onClick={() => AmpTrackUseTab("CLP")}>
+              CLP
+            </CustomTab>
+          ) : (
+            <CustomTab
+              count={countDisplayLpTxs}
+              onClick={() => AmpTrackUseTab("LP")}
+            >
+              LP
+            </CustomTab>
+          )}
           <CustomTab
             count={countDisplayBondTxs}
             onClick={() => AmpTrackUseTab("Bonding")}
@@ -78,6 +86,18 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
               Superfluid
             </CustomTab>
           )}
+          {/* TODO - Fix count  */}
+          {pool.type === PoolType.CL && (
+            <CustomTab count={0} onClick={() => AmpTrackUseTab("Collect")}>
+              Collect
+            </CustomTab>
+          )}
+          {/* TODO - Fix count  */}
+          {pool.type === PoolType.CL && (
+            <CustomTab count={0} onClick={() => AmpTrackUseTab("Migrate")}>
+              Migrate
+            </CustomTab>
+          )}
         </TabList>
         <TabPanels>
           <TabPanel p={0}>
@@ -96,14 +116,26 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
               scrollComponentId={tableHeaderId}
             />
           </TabPanel>
-          <TabPanel p={0}>
-            <PoolRelatedTxsTable
-              pool={pool}
-              countTxs={countLpTxs}
-              type="is_lp"
-              scrollComponentId={tableHeaderId}
-            />
-          </TabPanel>
+          {pool.type === PoolType.CL ? (
+            <TabPanel p={0}>
+              {/* TODO - Fix count  */}
+              <PoolRelatedTxsTable
+                pool={pool}
+                countTxs={0}
+                type="is_clp"
+                scrollComponentId={tableHeaderId}
+              />
+            </TabPanel>
+          ) : (
+            <TabPanel p={0}>
+              <PoolRelatedTxsTable
+                pool={pool}
+                countTxs={countLpTxs}
+                type="is_lp"
+                scrollComponentId={tableHeaderId}
+              />
+            </TabPanel>
+          )}
           <TabPanel p={0}>
             <PoolRelatedTxsTable
               pool={pool}
@@ -122,6 +154,28 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
               />
             </TabPanel>
           )}
+          {/* TODO - Fix count */}
+          {pool.type === PoolType.CL && (
+            <TabPanel p={0}>
+              <PoolRelatedTxsTable
+                pool={pool}
+                countTxs={0}
+                type="is_collect"
+                scrollComponentId={tableHeaderId}
+              />
+            </TabPanel>
+          )}
+          {/* TODO - Fix count */}
+          {pool.type === PoolType.CL && (
+            <TabPanel p={0}>
+              <PoolRelatedTxsTable
+                pool={pool}
+                countTxs={0}
+                type="is_migrate"
+                scrollComponentId={tableHeaderId}
+              />
+            </TabPanel>
+          )}
         </TabPanels>
       </Tabs>
     </Box>
diff --git a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
index f93530360..d717cf30c 100644
--- a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Divider, Flex, Text } from "@chakra-ui/react";
 
 import { JsonModalButton } from "../JsonModalButton";
 import { useGetAddressType } from "lib/app-provider";
@@ -55,6 +55,7 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
           ampCopierSection="pool_info"
         />
       </LabelText>
+      <Divider orientation="vertical" h="46px" />
       <LabelText
         label="Swap Fee"
         tooltipText="The fee charged for making a swap in a pool, defined by the pool creator, and paid by traders in the form of a percentage the input swap asset amount"
@@ -87,6 +88,18 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
           </Text>
         )}
       </LabelText>
+      {/* TODO - Change value */}
+      {pool.tickSpacing && (
+        <LabelText label="Tick Spacing" tooltipText="">
+          <Text variant="body2">100</Text>
+        </LabelText>
+      )}
+      {/* TODO - Change value */}
+      {pool.spreadFactor && (
+        <LabelText label="Spread Factor" tooltipText="">
+          <Text variant="body2">{formatRatio(pool.exitFee)}</Text>
+        </LabelText>
+      )}
       {pool.smoothWeightChangeParams && (
         <LabelText label="Smooth weight change params">
           <JsonModalButton
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableHeader.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableHeader.tsx
index 9d7cffd7f..a424e13f7 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableHeader.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableHeader.tsx
@@ -3,6 +3,7 @@ import { Grid } from "@chakra-ui/react";
 
 import { TableHeader } from "lib/components/table/tableComponents";
 import type { PoolDetail } from "lib/types";
+import { PoolType } from "lib/types";
 
 interface PoolHeaderProps {
   poolType: PoolDetail["type"];
@@ -21,7 +22,7 @@ export const PoolAssetsTableHeader = ({
   >
     <TableHeader>Asset</TableHeader>
     <TableHeader textAlign="right">
-      {poolType === "Stableswap" ? "Scaling Factor" : "Weight (%)"}
+      {poolType === PoolType.STABLESWAP ? "Scaling Factor" : "Weight (%)"}
     </TableHeader>
     <TableHeader textAlign="right">{isSupported && "Allocation"}</TableHeader>
     <TableHeader textAlign="right">Amount</TableHeader>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
index 3813a67f6..a928263a7 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
@@ -7,6 +7,7 @@ import { TableRow } from "lib/components/table/tableComponents";
 import { TooltipInfo } from "lib/components/Tooltip";
 import { getUndefinedTokenIcon } from "lib/pages/pools/utils";
 import type { USD, PoolDetail, TokenWithValue, Ratio } from "lib/types";
+import { PoolType } from "lib/types";
 import {
   formatInteger,
   formatPrice,
@@ -82,7 +83,7 @@ export const PoolAssetsTableRow = ({
         </Flex>
       </TableRow>
       <TableRow fontWeight={700} justifyContent="flex-end">
-        {poolType === "Stableswap" ? scalingFactor : tokenWeight}
+        {poolType === PoolType.STABLESWAP ? scalingFactor : tokenWeight}
       </TableRow>
       <TableRow fontWeight={700} justifyContent="flex-end">
         {isSupported && allocation}
diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index c1ecd46bd..d1becf929 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -5,6 +5,7 @@ import big from "big.js";
 import Link from "next/link";
 
 import { PoolHeader } from "../PoolHeader";
+import { UnderDevAlert } from "../UnderDevAlert";
 import { getPoolUrl } from "lib/app-fns/explorer";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
@@ -90,54 +91,59 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
           </Text>
         </Flex>
         <Text variant="body2" color="text.main">
-          {formatPrice(liquidity)}
+          {item.poolLiquidity ? formatPrice(liquidity) : "N/A"}
         </Text>
       </Flex>
-      <SimpleGrid columns={4} gap={2}>
-        <>
-          {item.poolLiquidity.slice(0, 3).map((asset) => (
-            <AllocationBadge
-              key={asset.denom}
-              denom={asset.denom}
-              logo={asset.logo}
-              symbol={asset.symbol}
-              precision={asset.precision}
-              amount={asset.amount}
-              value={asset.value}
-              liquidity={liquidity}
-              mode={mode}
-            />
-          ))}
-          {item.poolLiquidity.length >= 4 && (
-            <AllocationBadge
-              key="OTHERS"
-              denom={is4Assets ? item.poolLiquidity[3].denom : undefined}
-              logo={is4Assets ? item.poolLiquidity[3].logo : undefined}
-              symbol={is4Assets ? item.poolLiquidity[3].symbol : undefined}
-              precision={
-                is4Assets ? item.poolLiquidity[3].precision : undefined
-              }
-              amount={
-                item.poolLiquidity
-                  .slice(3)
-                  .reduce((prev, asset) => prev.add(asset.amount), big(0)) as U<
-                  Token<Big>
-                >
-              }
-              value={
-                item.poolLiquidity
-                  .slice(3)
-                  .reduce(
-                    (prev, asset) => prev.add(asset.value ?? big(0)),
-                    big(0)
-                  ) as USD<Big>
-              }
-              liquidity={liquidity}
-              mode={mode}
-            />
-          )}
-        </>
-      </SimpleGrid>
+      {item.poolLiquidity ? (
+        <SimpleGrid columns={4} gap={2}>
+          <>
+            {item.poolLiquidity.slice(0, 3).map((asset) => (
+              <AllocationBadge
+                key={asset.denom}
+                denom={asset.denom}
+                logo={asset.logo}
+                symbol={asset.symbol}
+                precision={asset.precision}
+                amount={asset.amount}
+                value={asset.value}
+                liquidity={liquidity}
+                mode={mode}
+              />
+            ))}
+            {item.poolLiquidity.length >= 4 && (
+              <AllocationBadge
+                key="OTHERS"
+                denom={is4Assets ? item.poolLiquidity[3].denom : undefined}
+                logo={is4Assets ? item.poolLiquidity[3].logo : undefined}
+                symbol={is4Assets ? item.poolLiquidity[3].symbol : undefined}
+                precision={
+                  is4Assets ? item.poolLiquidity[3].precision : undefined
+                }
+                amount={
+                  item.poolLiquidity
+                    .slice(3)
+                    .reduce(
+                      (prev, asset) => prev.add(asset.amount),
+                      big(0)
+                    ) as U<Token<Big>>
+                }
+                value={
+                  item.poolLiquidity
+                    .slice(3)
+                    .reduce(
+                      (prev, asset) => prev.add(asset.value ?? big(0)),
+                      big(0)
+                    ) as USD<Big>
+                }
+                liquidity={liquidity}
+                mode={mode}
+              />
+            )}
+          </>
+        </SimpleGrid>
+      ) : (
+        <UnderDevAlert poolType={item.type} />
+      )}
     </Flex>
   );
 };
diff --git a/src/lib/pages/pools/components/supportedSection/index.tsx b/src/lib/pages/pools/components/supportedSection/index.tsx
index 1b7998335..ff82dbe49 100644
--- a/src/lib/pages/pools/components/supportedSection/index.tsx
+++ b/src/lib/pages/pools/components/supportedSection/index.tsx
@@ -32,6 +32,7 @@ import {
 import { useAssetInfos } from "lib/services/assetService";
 import { usePoolListCountQuery } from "lib/services/poolService";
 import type { PoolTypeFilter } from "lib/types";
+import { PoolType } from "lib/types";
 import { isPositiveInt } from "lib/utils";
 
 import { SupportedPoolList } from "./SupportedPoolList";
@@ -58,7 +59,7 @@ export const SupportedSection = ({
 
   const { watch, setValue } = useForm<PoolFilterState>({
     defaultValues: {
-      poolTypeValue: "All",
+      poolTypeValue: PoolType.ALL,
       keyword: "",
       isSuperfluidOnly: false,
     },
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index f12026c55..f51cead38 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -14,6 +14,7 @@ import Link from "next/link";
 
 import { getUndefinedTokenIcon } from "../../utils";
 import { PoolHeader } from "../PoolHeader";
+import { UnderDevAlert } from "../UnderDevAlert";
 import { getPoolUrl } from "lib/app-fns/explorer";
 import { useInternalNavigate } from "lib/app-provider";
 import { Copier } from "lib/components/copy";
@@ -110,73 +111,83 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
             </Flex>
           </AccordionButton>
           <AccordionPanel pb={4}>
-            <Flex>
-              <Text
-                color="text.dark"
-                variant="body2"
-                fontWeight="600"
-                w="144px"
-              >
-                Tokens in Pool
-              </Text>
-              <Flex gap={4} flexDirection="column">
-                <Flex gap={2} flexDirection="column">
-                  {item.poolLiquidity.map((asset) => (
-                    <Flex
-                      className="copier-wrapper"
-                      key={asset.denom}
-                      gap={3}
-                      alignItems="center"
+            {item.poolLiquidity ? (
+              <Flex>
+                <Text
+                  color="text.dark"
+                  variant="body2"
+                  fontWeight="600"
+                  w="144px"
+                >
+                  Tokens in Pool
+                </Text>
+                <Flex gap={4} flexDirection="column">
+                  <Flex gap={2} flexDirection="column">
+                    {item.poolLiquidity.map((asset) => (
+                      <Flex
+                        className="copier-wrapper"
+                        key={asset.denom}
+                        gap={3}
+                        alignItems="center"
+                      >
+                        <Image
+                          boxSize={6}
+                          src={asset.logo ?? getUndefinedTokenIcon(asset.denom)}
+                        />
+                        <Text
+                          variant="body2"
+                          color="text.main"
+                          fontWeight="bold"
+                        >
+                          {formatUTokenWithPrecision(
+                            asset.amount,
+                            asset.precision ?? 0
+                          )}
+                        </Text>
+                        <Flex>{asset.symbol ?? asset.denom}</Flex>
+                        <Copier
+                          type={
+                            asset.symbol
+                              ? "supported_asset"
+                              : "unsupported_asset"
+                          }
+                          value={asset.denom}
+                          copyLabel="Token ID Copied!"
+                          display="none"
+                          ml="1px"
+                        />
+                      </Flex>
+                    ))}
+                  </Flex>
+                  <Flex gap={3}>
+                    <Button onClick={handleOnClick} size="sm">
+                      View Pool Details
+                    </Button>
+                    <Button
+                      onClick={() => {
+                        AmpTrackWebsite(
+                          `${getPoolUrl(currentChainName)}/${item.id}`
+                        );
+                        window.open(
+                          `${getPoolUrl(currentChainName)}/${item.id}`,
+                          "_blank",
+                          "noopener,noreferrer"
+                        );
+                      }}
+                      size="sm"
+                      variant="outline-primary"
+                      rightIcon={
+                        <CustomIcon name="launch" color="outline-primary" />
+                      }
                     >
-                      <Image
-                        boxSize={6}
-                        src={asset.logo ?? getUndefinedTokenIcon(asset.denom)}
-                      />
-                      <Text variant="body2" color="text.main" fontWeight="bold">
-                        {formatUTokenWithPrecision(
-                          asset.amount,
-                          asset.precision ?? 0
-                        )}
-                      </Text>
-                      <Flex>{asset.symbol ?? asset.denom}</Flex>
-                      <Copier
-                        type={
-                          asset.symbol ? "supported_asset" : "unsupported_asset"
-                        }
-                        value={asset.denom}
-                        copyLabel="Token ID Copied!"
-                        display="none"
-                        ml="1px"
-                      />
-                    </Flex>
-                  ))}
-                </Flex>
-                <Flex gap={3}>
-                  <Button onClick={handleOnClick} size="sm">
-                    View Pool Details
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      AmpTrackWebsite(
-                        `${getPoolUrl(currentChainName)}/${item.id}`
-                      );
-                      window.open(
-                        `${getPoolUrl(currentChainName)}/${item.id}`,
-                        "_blank",
-                        "noopener,noreferrer"
-                      );
-                    }}
-                    size="sm"
-                    variant="outline-primary"
-                    rightIcon={
-                      <CustomIcon name="launch" color="outline-primary" />
-                    }
-                  >
-                    View in Osmosis
-                  </Button>
+                      View in Osmosis
+                    </Button>
+                  </Flex>
                 </Flex>
               </Flex>
-            </Flex>
+            ) : (
+              <UnderDevAlert poolType={item.type} />
+            )}
           </AccordionPanel>
         </>
       )}
diff --git a/src/lib/pages/pools/components/unsupportedSection/index.tsx b/src/lib/pages/pools/components/unsupportedSection/index.tsx
index 7539b84b3..d2c28af92 100644
--- a/src/lib/pages/pools/components/unsupportedSection/index.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/index.tsx
@@ -29,6 +29,7 @@ import {
 } from "lib/services/amplitude";
 import { usePoolListCountQuery } from "lib/services/poolService";
 import type { PoolTypeFilter } from "lib/types";
+import { PoolType } from "lib/types";
 import { isPositiveInt } from "lib/utils";
 
 import { UnsupportedPoolList } from "./UnsupportedPoolList";
@@ -41,7 +42,7 @@ export const UnsupportedSection = ({
 }: UnsupportedSectionProp) => {
   const { watch, setValue } = useForm<PoolFilterState>({
     defaultValues: {
-      poolTypeValue: "All",
+      poolTypeValue: PoolType.ALL,
       keyword: "",
       isSuperfluidOnly: false,
     },
diff --git a/src/lib/pages/pools/constant.ts b/src/lib/pages/pools/constant.ts
index 220cb4e81..41817d6f7 100644
--- a/src/lib/pages/pools/constant.ts
+++ b/src/lib/pages/pools/constant.ts
@@ -6,8 +6,9 @@ export const UNDEFINED_TOKEN_LIST = [
 
 export const SUPERFLUID_ICON =
   "https://assets.alleslabs.dev/webapp-assets/pool/pool-superfluid.svg";
-
 export const BALANCER_ICON =
   "https://assets.alleslabs.dev/webapp-assets/pool/pool-balancer.svg";
 export const STABLESWAP_ICON =
   "https://assets.alleslabs.dev/webapp-assets/pool/pool-stableswap.svg";
+export const COSMWASM_ICON =
+  "https://assets.alleslabs.dev/webapp-assets/pool/pool-cosmwasm.svg";
diff --git a/src/lib/pages/pools/data.ts b/src/lib/pages/pools/data.ts
index eb7a30652..b9ee8a531 100644
--- a/src/lib/pages/pools/data.ts
+++ b/src/lib/pages/pools/data.ts
@@ -97,6 +97,9 @@ export const usePool = (
       smoothWeightChangeParams: pool.smoothWeightChangeParams,
       scalingFactors: pool.scalingFactors,
       scalingFactorController: pool.scalingFactorController,
+      // TODO - Get data
+      spreadFactor: "",
+      tickSpacing: "",
     },
     isLoading: false,
   };
diff --git a/src/lib/pages/pools/index.tsx b/src/lib/pages/pools/index.tsx
index 1b67614d6..e510a95f8 100644
--- a/src/lib/pages/pools/index.tsx
+++ b/src/lib/pages/pools/index.tsx
@@ -7,6 +7,7 @@ import { LoadingOverlay } from "lib/components/LoadingOverlay";
 import PageContainer from "lib/components/PageContainer";
 import { AmpEvent, AmpTrack, AmpTrackUseTab } from "lib/services/amplitude";
 import { usePoolListCountQuery } from "lib/services/poolService";
+import { PoolType } from "lib/types";
 
 import { SupportedSection } from "./components/supportedSection";
 import { UnsupportedSection } from "./components/unsupportedSection";
@@ -23,14 +24,14 @@ export const PoolIndex = () => {
   const { data: supportedPoolCount, isLoading: isLoadingSupported } =
     usePoolListCountQuery({
       isSupported: true,
-      poolType: "All",
+      poolType: PoolType.ALL,
       isSuperfluidOnly: false,
       search: "",
     });
   const { data: unsupportedPoolCount, isLoading: isLoadingUnsupported } =
     usePoolListCountQuery({
       isSupported: false,
-      poolType: "All",
+      poolType: PoolType.ALL,
       isSuperfluidOnly: false,
       search: "",
     });
diff --git a/src/lib/pages/pools/poolId.tsx b/src/lib/pages/pools/poolId.tsx
index e98580cf4..5884a8f51 100644
--- a/src/lib/pages/pools/poolId.tsx
+++ b/src/lib/pages/pools/poolId.tsx
@@ -6,6 +6,7 @@ import { BackButton } from "lib/components/button";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import { PoolType } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
 import {
@@ -20,10 +21,16 @@ export const PoolId = () => {
   const navigate = useInternalNavigate();
   const poolId = Number(getFirstQueryParam(router.query.poolId));
   const { pool, isLoading } = usePool(poolId);
+  // TODO - Remove this and get from usePool
+  const contractAddress =
+    "osmo1e2c7qawyjk40acehzjpk6fl0gf0xwxrvck88ruc6j4zspr4splxqf8c07y";
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_POOL_DETAIL);
-  }, [router.isReady]);
+    // First version, navigate to contract details page if pool type is CosmWasm
+    if (pool?.type === PoolType.COSMWASM)
+      navigate({ pathname: `/contracts/${contractAddress}`, replace: true });
+  }, [navigate, pool?.type, router.isReady]);
 
   if (isLoading) return <Loading />;
   if (!pool) return navigate({ pathname: `/pool` });
diff --git a/src/lib/services/expression/poolExpression.ts b/src/lib/services/expression/poolExpression.ts
index 3028b7045..e71dfb834 100644
--- a/src/lib/services/expression/poolExpression.ts
+++ b/src/lib/services/expression/poolExpression.ts
@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 
 import type { PoolTypeFilter } from "lib/types";
+import { PoolType } from "lib/types";
 import { isPositiveInt } from "lib/utils";
 
 export const usePoolExpression = (
@@ -12,7 +13,7 @@ export const usePoolExpression = (
   useMemo(
     () => ({
       is_supported: { _eq: isSupported },
-      type: poolType !== "All" ? { _eq: `${poolType}` } : {},
+      type: poolType !== PoolType.ALL ? { _eq: `${poolType}` } : {},
       is_superfluid: isSuperfluidOnly ? { _eq: true } : {},
       id: isPositiveInt(search) ? { _eq: Number(search) } : {},
     }),
diff --git a/src/lib/styles/theme/components/alert.ts b/src/lib/styles/theme/components/alert.ts
index f54696b39..41a73ffba 100644
--- a/src/lib/styles/theme/components/alert.ts
+++ b/src/lib/styles/theme/components/alert.ts
@@ -3,7 +3,7 @@ import type { ColorProps, ComponentStyleConfig } from "@chakra-ui/react";
 const dupStyleKeys = ["title", "container", "description"];
 
 const generateVariantStyle = (
-  variant: "honeydew" | "violet" | "success" | "warning" | "error"
+  variant: "honeydew" | "violet" | "success" | "warning" | "error" | "info"
 ) => {
   let mainColor: ColorProps["color"];
   let bgColor: ColorProps["color"];
@@ -15,6 +15,11 @@ const generateVariantStyle = (
       bgColor = `${variant}.background`;
       borderColor = `${variant}.dark`;
       break;
+    case "info":
+      mainColor = "pebble.400";
+      bgColor = "pebble.800";
+      borderColor = "pebble.700";
+      break;
     case "honeydew":
     case "error":
     default:
@@ -62,5 +67,6 @@ export const Alert: ComponentStyleConfig = {
     success: generateVariantStyle("success"),
     warning: generateVariantStyle("warning"),
     error: generateVariantStyle("error"),
+    info: generateVariantStyle("info"),
   },
 };
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index 2519b1316..91650c707 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -9,7 +9,16 @@ import type {
   TokenWithValue,
 } from "lib/types";
 
-export type PoolTypeFilter = "All" | "Balancer" | "Stableswap";
+// TODO - Recheck type name
+export enum PoolType {
+  ALL = "All",
+  BALANCER = "Balancer",
+  STABLESWAP = "Stableswap",
+  COSMWASM = "Cosmwasm",
+  CL = "ConcentratedLiquidity",
+}
+
+export type PoolTypeFilter = PoolType;
 
 export interface PoolWeight<T extends string | Big = Big> {
   denom: string;
@@ -21,11 +30,12 @@ export interface Pool<
   TLiquidity extends Coin | TokenWithValue = TokenWithValue
 > {
   id: number;
-  type: string;
+  type: PoolType;
   isSuperfluid: boolean;
   poolLiquidity: TLiquidity[];
 }
 
+// TODO - Revisit when backend finished
 export interface PoolDetail<
   TWeight extends string | Big = Big,
   TLiquidity extends Coin | TokenWithValue = TokenWithValue
@@ -41,4 +51,6 @@ export interface PoolDetail<
   smoothWeightChangeParams: object | null;
   scalingFactors: string[] | null;
   scalingFactorController: string | null;
+  spreadFactor: string | null;
+  tickSpacing: string | null;
 }
diff --git a/src/lib/types/tx/transaction.ts b/src/lib/types/tx/transaction.ts
index ba4524a37..78a16a0ce 100644
--- a/src/lib/types/tx/transaction.ts
+++ b/src/lib/types/tx/transaction.ts
@@ -50,9 +50,13 @@ export interface TxFilters {
   isClearAdmin: boolean;
 }
 
+// TODO - Revisit when backend finished
 export type PoolTxFilter =
   | "is_all"
   | "is_swap"
   | "is_lp"
   | "is_bond"
-  | "is_superfluid";
+  | "is_superfluid"
+  | "is_clp"
+  | "is_collect"
+  | "is_migrate";

From 4402c5f3362593aabb21afc87e182c91f217b2ba Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Fri, 16 Jun 2023 13:41:38 +0700
Subject: [PATCH 253/354] chore: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e07fc7f85..6f69db524 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#397](https://github.com/alleslabs/celatone-frontend/pull/397) Implement first version of Osmosis v16 pool
 - [#358](https://github.com/alleslabs/celatone-frontend/pull/358) Add Amp for Pool Detail page
 - [#355](https://github.com/alleslabs/celatone-frontend/pull/355) Add Amp for Pool List page
 - [#294](https://github.com/alleslabs/celatone-frontend/pull/294) Add Pool related txs table

From 5fecda5a145f6158a9ee7eda833901bf53b0a9d7 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 16 Jun 2023 11:08:38 +0700
Subject: [PATCH 254/354] feat: refactor useConfig

---
 src/config/index.ts                           |  9 +++
 src/config/types.ts                           |  9 +++
 src/lib/app-provider/hooks/index.ts           |  3 +-
 src/lib/app-provider/hooks/useConfig.ts       | 81 +++++++++++++++++++
 src/lib/app-provider/hooks/useFaucetConfig.ts | 11 ---
 src/lib/app-provider/hooks/useWasmConfig.ts   | 21 -----
 src/lib/layout/navbar/index.tsx               |  9 +--
 src/lib/pages/faucet/index.tsx                | 13 +--
 src/lib/pages/public-project/index.tsx        |  4 +-
 src/lib/pages/public-project/slug.tsx         |  2 +
 10 files changed, 111 insertions(+), 51 deletions(-)
 create mode 100644 src/lib/app-provider/hooks/useConfig.ts
 delete mode 100644 src/lib/app-provider/hooks/useFaucetConfig.ts
 delete mode 100644 src/lib/app-provider/hooks/useWasmConfig.ts

diff --git a/src/config/index.ts b/src/config/index.ts
index 3bd593fe4..21560fc83 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -20,6 +20,9 @@ export const DEFAULT_CHAIN_CONFIG: ChainConfig = {
     pool: {
       enabled: false,
     },
+    publicProject: {
+      enabled: false,
+    },
   },
   gas: {
     gasPrice: {
@@ -61,6 +64,9 @@ export const CHAIN_CONFIGS: ChainConfigs = {
       pool: {
         enabled: true,
       },
+      publicProject: {
+        enabled: true,
+      },
     },
     gas: {
       gasPrice: {
@@ -105,6 +111,9 @@ export const CHAIN_CONFIGS: ChainConfigs = {
       pool: {
         enabled: true,
       },
+      publicProject: {
+        enabled: false,
+      },
     },
     gas: {
       gasPrice: {
diff --git a/src/config/types.ts b/src/config/types.ts
index 60d4031bf..645df0973 100644
--- a/src/config/types.ts
+++ b/src/config/types.ts
@@ -27,6 +27,14 @@ type PoolConfig =
       enabled: false;
     };
 
+type PublicProjectConfig =
+  | {
+      enabled: true;
+    }
+  | {
+      enabled: false;
+    };
+
 export interface ExplorerConfig {
   validator: string;
   proposal: string;
@@ -44,6 +52,7 @@ export interface ChainConfig {
     faucet: FaucetConfig;
     wasm: WasmConfig;
     pool: PoolConfig;
+    publicProject: PublicProjectConfig;
   };
   gas: {
     gasPrice: {
diff --git a/src/lib/app-provider/hooks/index.ts b/src/lib/app-provider/hooks/index.ts
index 841d3d49a..daffb8fc8 100644
--- a/src/lib/app-provider/hooks/index.ts
+++ b/src/lib/app-provider/hooks/index.ts
@@ -13,6 +13,5 @@ export * from "./useTokensInfo";
 export * from "./useChainRecordAsset";
 export * from "./useBaseApiRoute";
 export * from "./useRPCEndpoint";
-export * from "./useFaucetConfig";
-export * from "./useWasmConfig";
+export * from "./useConfig";
 export * from "./useCurrentChain";
diff --git a/src/lib/app-provider/hooks/useConfig.ts b/src/lib/app-provider/hooks/useConfig.ts
new file mode 100644
index 000000000..c9bae5d12
--- /dev/null
+++ b/src/lib/app-provider/hooks/useConfig.ts
@@ -0,0 +1,81 @@
+import { useCelatoneApp } from "../contexts";
+import type { ChainConfig } from "config/types";
+
+import { useInternalNavigate } from "./useInternalNavigate";
+
+type Features = ChainConfig["features"];
+
+type FeatureVariant = Features[keyof Features];
+
+interface BaseConfigArgs<Feature> {
+  feature: Feature;
+  shouldRedirect: boolean;
+}
+
+const useBaseConfig = <Feature extends FeatureVariant>({
+  feature,
+  shouldRedirect,
+}: BaseConfigArgs<Feature>) => {
+  const navigate = useInternalNavigate();
+
+  if (!feature.enabled && shouldRedirect)
+    navigate({ pathname: "/", replace: true });
+
+  return feature;
+};
+
+export const useWasmConfig = ({
+  shouldRedirect,
+}: {
+  shouldRedirect: boolean;
+}) => {
+  const {
+    chainConfig: {
+      features: { wasm },
+    },
+  } = useCelatoneApp();
+
+  return useBaseConfig({ feature: wasm, shouldRedirect });
+};
+
+export const useFaucetConfig = ({
+  shouldRedirect,
+}: {
+  shouldRedirect: boolean;
+}) => {
+  const {
+    chainConfig: {
+      features: { faucet },
+    },
+  } = useCelatoneApp();
+
+  return useBaseConfig({ feature: faucet, shouldRedirect });
+};
+
+export const usePoolConfig = ({
+  shouldRedirect,
+}: {
+  shouldRedirect: boolean;
+}) => {
+  const {
+    chainConfig: {
+      features: { pool },
+    },
+  } = useCelatoneApp();
+
+  return useBaseConfig({ feature: pool, shouldRedirect });
+};
+
+export const usePublicProjectConfig = ({
+  shouldRedirect,
+}: {
+  shouldRedirect: boolean;
+}) => {
+  const {
+    chainConfig: {
+      features: { publicProject },
+    },
+  } = useCelatoneApp();
+
+  return useBaseConfig({ feature: publicProject, shouldRedirect });
+};
diff --git a/src/lib/app-provider/hooks/useFaucetConfig.ts b/src/lib/app-provider/hooks/useFaucetConfig.ts
deleted file mode 100644
index a8310b21c..000000000
--- a/src/lib/app-provider/hooks/useFaucetConfig.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useCelatoneApp } from "../contexts";
-
-export const useFaucetConfig = () => {
-  const {
-    chainConfig: {
-      features: { faucet },
-    },
-  } = useCelatoneApp();
-
-  return faucet;
-};
diff --git a/src/lib/app-provider/hooks/useWasmConfig.ts b/src/lib/app-provider/hooks/useWasmConfig.ts
deleted file mode 100644
index db11f3bb0..000000000
--- a/src/lib/app-provider/hooks/useWasmConfig.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useCelatoneApp } from "../contexts";
-
-import { useInternalNavigate } from "./useInternalNavigate";
-
-export const useWasmConfig = ({
-  shouldRedirect,
-}: {
-  shouldRedirect: boolean;
-}) => {
-  const {
-    chainConfig: {
-      features: { wasm },
-    },
-  } = useCelatoneApp();
-  const navigate = useInternalNavigate();
-
-  if (!wasm.enabled && shouldRedirect)
-    navigate({ pathname: "/", replace: true });
-
-  return wasm;
-};
diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index 2ade14c96..1a00b1bf9 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -1,7 +1,7 @@
 import { Flex } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 
-import { useCurrentChain } from "lib/app-provider";
+import { usePublicProjectConfig } from "lib/app-provider";
 import { INSTANTIATED_LIST_NAME, SAVED_LIST_NAME } from "lib/data";
 import { useIsCurrentPage } from "lib/hooks";
 import { useContractStore, usePublicProjectStore } from "lib/providers/store";
@@ -20,9 +20,7 @@ interface NavbarProps {
 const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
   const { getContractLists } = useContractStore();
   const { getSavedPublicProjects } = usePublicProjectStore();
-  const {
-    chain: { network_type: networkType },
-  } = useCurrentChain();
+  const publicProject = usePublicProjectConfig({ shouldRedirect: false });
   const isCurrentPage = useIsCurrentPage();
 
   const navMenu: MenuInfo[] = [
@@ -115,8 +113,7 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
     },
   ];
 
-  // TODO: remove mainnet concept for public project
-  if (networkType === "mainnet") {
+  if (publicProject.enabled) {
     navMenu.push({
       category: "Public Projects",
       submenu: [
diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index a18f48c0e..66a56c121 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -15,7 +15,6 @@ import {
   useCelatoneApp,
   useCurrentChain,
   useFaucetConfig,
-  useInternalNavigate,
   useValidateAddress,
 } from "lib/app-provider";
 import { AssignMe } from "lib/components/AssignMe";
@@ -26,7 +25,6 @@ import type { IconKeys } from "lib/components/icon";
 import WasmPageContainer from "lib/components/WasmPageContainer";
 import { useOpenTxTab } from "lib/hooks";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import { capitalize } from "lib/utils";
 
 type ResultStatus = "success" | "error" | "warning";
 
@@ -42,7 +40,6 @@ const STATUS_ICONS: Record<ResultStatus, IconKeys> = {
   warning: "alert-circle-solid",
 };
 
-// todo: handle token symbol by current chain
 const Faucet = () => {
   const { address: walletAddress = "" } = useCurrentChain();
   const [address, setAddress] = useState("");
@@ -51,14 +48,13 @@ const Faucet = () => {
   const [result, setResult] = useState<Result>({});
 
   const { validateUserAddress } = useValidateAddress();
-  const navigate = useInternalNavigate();
   const toast = useToast();
   const router = useRouter();
   const openTxTab = useOpenTxTab("tx-page");
   const {
-    chainConfig: { chain },
+    chainConfig: { prettyName },
   } = useCelatoneApp();
-  const faucet = useFaucetConfig();
+  const faucet = useFaucetConfig({ shouldRedirect: true });
 
   const { faucetUrl, faucetDenom, faucetAmount } = useMemo(() => {
     if (!faucet.enabled)
@@ -78,9 +74,8 @@ const Faucet = () => {
   }, [faucet.enabled]);
 
   useEffect(() => {
-    if (!faucet.enabled) navigate({ pathname: "/", replace: true });
     if (router.isReady) AmpTrack(AmpEvent.TO_FAUCET);
-  }, [faucet, navigate, router]);
+  }, [router]);
 
   useEffect(() => {
     if (address) {
@@ -164,7 +159,7 @@ const Faucet = () => {
   return (
     <WasmPageContainer>
       <Heading as="h5" variant="h5">
-        {capitalize(chain)} Testnet Faucet
+        {prettyName} Faucet
       </Heading>
       <Text variant="body2" color="text.dark" pt={4} textAlign="center" mb={8}>
         The faucet provides {faucetAmount} testnet {faucetDenom} per request.
diff --git a/src/lib/pages/public-project/index.tsx b/src/lib/pages/public-project/index.tsx
index ef51fef9a..df9942e39 100644
--- a/src/lib/pages/public-project/index.tsx
+++ b/src/lib/pages/public-project/index.tsx
@@ -2,14 +2,14 @@ import { Flex, Heading } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { useWasmConfig } from "lib/app-provider";
+import { usePublicProjectConfig } from "lib/app-provider";
 import PageContainer from "lib/components/PageContainer";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 
 import { AllProject } from "./components/AllProject";
 
 export const AllPublicProjectsPage = () => {
-  useWasmConfig({ shouldRedirect: true });
+  usePublicProjectConfig({ shouldRedirect: true });
   const router = useRouter();
 
   useEffect(() => {
diff --git a/src/lib/pages/public-project/slug.tsx b/src/lib/pages/public-project/slug.tsx
index 184c2a7df..0cd03d86a 100644
--- a/src/lib/pages/public-project/slug.tsx
+++ b/src/lib/pages/public-project/slug.tsx
@@ -2,6 +2,7 @@ import { Tabs, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
+import { usePublicProjectConfig } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
@@ -33,6 +34,7 @@ export const ProjectDetail = () => {
     isLoading,
   } = usePublicData();
 
+  usePublicProjectConfig({ shouldRedirect: true });
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_PROJECT_DETAIL);
   }, [router.isReady]);

From 403e34c1e8caa3b9c76500169a2e5f4674393bce Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 16 Jun 2023 12:40:10 +0700
Subject: [PATCH 255/354] fix: network switch bug

---
 src/lib/app-provider/contexts/app.tsx        | 5 +----
 src/lib/app-provider/hooks/useSelectChain.ts | 8 +-------
 2 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/lib/app-provider/contexts/app.tsx b/src/lib/app-provider/contexts/app.tsx
index 7b1366ba2..f4af70003 100644
--- a/src/lib/app-provider/contexts/app.tsx
+++ b/src/lib/app-provider/contexts/app.tsx
@@ -36,7 +36,6 @@ interface AppContextInterface {
   chainConfig: ChainConfig;
   indexerGraphClient: GraphQLClient;
   constants: ProjectConstants;
-  handleOnChainIdChange: (newChainId: string) => void;
 }
 
 const AppContext = createContext<AppContextInterface>({
@@ -45,7 +44,6 @@ const AppContext = createContext<AppContextInterface>({
   chainConfig: DEFAULT_CHAIN_CONFIG,
   indexerGraphClient: new GraphQLClient(DEFAULT_CHAIN_CONFIG.indexer),
   constants: PROJECT_CONSTANTS,
-  handleOnChainIdChange: () => {},
 });
 
 export const AppProvider = observer(({ children }: AppProviderProps) => {
@@ -73,9 +71,8 @@ export const AppProvider = observer(({ children }: AppProviderProps) => {
       chainConfig,
       indexerGraphClient: new GraphQLClient(chainConfig.indexer),
       constants: PROJECT_CONSTANTS,
-      handleOnChainIdChange,
     };
-  }, [currentChainId, handleOnChainIdChange]);
+  }, [currentChainId]);
 
   useEffect(() => {
     if (currentChainName) {
diff --git a/src/lib/app-provider/hooks/useSelectChain.ts b/src/lib/app-provider/hooks/useSelectChain.ts
index d6b70be41..ab5282da7 100644
--- a/src/lib/app-provider/hooks/useSelectChain.ts
+++ b/src/lib/app-provider/hooks/useSelectChain.ts
@@ -1,22 +1,16 @@
 import { useRouter } from "next/router";
 import { useCallback } from "react";
 
-import { useCelatoneApp } from "../contexts/app";
-
 import { useInternalNavigate } from "./useInternalNavigate";
 
 export const useSelectChain = () => {
   const router = useRouter();
   const navigator = useInternalNavigate();
-  const { handleOnChainIdChange } = useCelatoneApp();
 
   return useCallback(
     (chainId: string) => {
       if (router.query.network === chainId) return;
 
-      // Remark: This is workaround solution to set new chainId and replace the pathname
-      handleOnChainIdChange(chainId);
-
       navigator({
         pathname: router.pathname.replace("/[network]", ""),
         query: {
@@ -25,6 +19,6 @@ export const useSelectChain = () => {
         },
       });
     },
-    [handleOnChainIdChange, navigator, router.pathname, router.query]
+    [navigator, router.pathname, router.query]
   );
 };

From e934a3b72d44f8968414abd36d32c6f9cae0fad2 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 16 Jun 2023 13:47:25 +0700
Subject: [PATCH 256/354] feat: validate wasmConfig on public project

---
 src/lib/pages/public-project/index.tsx   |  2 +-
 src/lib/pages/public-project/slug.tsx    | 27 +++++++++++++++---------
 src/lib/services/publicProjectService.ts | 23 +++++++++++++++-----
 3 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/lib/pages/public-project/index.tsx b/src/lib/pages/public-project/index.tsx
index df9942e39..6e06ff21a 100644
--- a/src/lib/pages/public-project/index.tsx
+++ b/src/lib/pages/public-project/index.tsx
@@ -9,9 +9,9 @@ import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { AllProject } from "./components/AllProject";
 
 export const AllPublicProjectsPage = () => {
-  usePublicProjectConfig({ shouldRedirect: true });
   const router = useRouter();
 
+  usePublicProjectConfig({ shouldRedirect: true });
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_ALL_PROJECTS);
   }, [router.isReady]);
diff --git a/src/lib/pages/public-project/slug.tsx b/src/lib/pages/public-project/slug.tsx
index 0cd03d86a..997c9ba3b 100644
--- a/src/lib/pages/public-project/slug.tsx
+++ b/src/lib/pages/public-project/slug.tsx
@@ -2,7 +2,7 @@ import { Tabs, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
-import { usePublicProjectConfig } from "lib/app-provider";
+import { usePublicProjectConfig, useWasmConfig } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
@@ -24,6 +24,7 @@ enum TabIndex {
 
 export const ProjectDetail = () => {
   const router = useRouter();
+  const wasm = useWasmConfig({ shouldRedirect: false });
   const [tabIndex, setTabIndex] = useState(TabIndex.Overview);
   const {
     publicCodes,
@@ -48,7 +49,7 @@ export const ProjectDetail = () => {
   return (
     <PageContainer>
       <DetailHeader details={projectDetail} slug={slug} />
-      <Tabs index={tabIndex}>
+      <Tabs index={tabIndex} isLazy lazyBehavior="keepMounted">
         <TabList my={6} borderBottom="1px" borderColor="gray.800">
           <CustomTab
             count={
@@ -63,6 +64,7 @@ export const ProjectDetail = () => {
           <CustomTab
             count={publicCodes.length}
             isDisabled={!publicCodes.length}
+            hidden={!wasm.enabled}
             onClick={() => setTabIndex(TabIndex.Codes)}
           >
             Codes
@@ -70,6 +72,7 @@ export const ProjectDetail = () => {
           <CustomTab
             count={publicContracts.length}
             isDisabled={!publicContracts.length}
+            hidden={!wasm.enabled}
             onClick={() => setTabIndex(TabIndex.Contracts)}
           >
             Contracts
@@ -85,14 +88,18 @@ export const ProjectDetail = () => {
 
         <TabPanels my={8}>
           <TabPanel p={0}>
-            <PublicProjectCodeTable
-              codes={publicCodes}
-              onViewMore={() => handleOnViewMore(TabIndex.Codes)}
-            />
-            <PublicProjectContractTable
-              contracts={publicContracts}
-              onViewMore={() => handleOnViewMore(TabIndex.Contracts)}
-            />
+            {wasm.enabled && (
+              <>
+                <PublicProjectCodeTable
+                  codes={publicCodes}
+                  onViewMore={() => handleOnViewMore(TabIndex.Codes)}
+                />
+                <PublicProjectContractTable
+                  contracts={publicContracts}
+                  onViewMore={() => handleOnViewMore(TabIndex.Contracts)}
+                />
+              </>
+            )}
             <PublicProjectAccountTable
               accounts={publicAccounts}
               onViewMore={() => handleOnViewMore(TabIndex.Accounts)}
diff --git a/src/lib/services/publicProjectService.ts b/src/lib/services/publicProjectService.ts
index 6f4e0fc6a..8bd40e3e6 100644
--- a/src/lib/services/publicProjectService.ts
+++ b/src/lib/services/publicProjectService.ts
@@ -3,7 +3,11 @@ import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { useCallback } from "react";
 
-import { useBaseApiRoute } from "lib/app-provider";
+import {
+  useBaseApiRoute,
+  usePublicProjectConfig,
+  useWasmConfig,
+} from "lib/app-provider";
 import type {
   PublicContract,
   Option,
@@ -33,6 +37,7 @@ const parseCode = (raw: RawPublicCode): PublicCode => ({
 
 export const usePublicProjects = (): UseQueryResult<PublicProjectInfo[]> => {
   const projectsApiRoute = useBaseApiRoute("projects");
+  const projectConfig = usePublicProjectConfig({ shouldRedirect: false });
 
   const queryFn = useCallback(async () => {
     return axios
@@ -48,6 +53,7 @@ export const usePublicProjects = (): UseQueryResult<PublicProjectInfo[]> => {
 
   return useQuery(["public_project", projectsApiRoute], queryFn, {
     keepPreviousData: true,
+    enabled: projectConfig.enabled,
   });
 };
 
@@ -55,6 +61,7 @@ export const usePublicProjectBySlug = (
   slug: Option<string>
 ): UseQueryResult<PublicProjectInfo> => {
   const projectsApiRoute = useBaseApiRoute("projects");
+  const projectConfig = usePublicProjectConfig({ shouldRedirect: false });
 
   const queryFn = useCallback(async () => {
     if (!slug) throw new Error("No project selected (usePublicProjectBySlug)");
@@ -68,7 +75,7 @@ export const usePublicProjectBySlug = (
   }, [projectsApiRoute, slug]);
 
   return useQuery(["public_project_by_slug", projectsApiRoute, slug], queryFn, {
-    enabled: !!slug,
+    enabled: !!slug && projectConfig.enabled,
   });
 };
 
@@ -76,6 +83,8 @@ export const usePublicProjectByContractAddress = (
   contractAddress: Option<string>
 ): UseQueryResult<PublicInfo> => {
   const projectsApiRoute = useBaseApiRoute("contracts");
+  const projectConfig = usePublicProjectConfig({ shouldRedirect: false });
+  const wasmConfig = useWasmConfig({ shouldRedirect: false });
 
   const queryFn = useCallback(async () => {
     if (!contractAddress)
@@ -92,7 +101,7 @@ export const usePublicProjectByContractAddress = (
     queryFn,
     {
       keepPreviousData: true,
-      enabled: !!contractAddress,
+      enabled: !!contractAddress && projectConfig.enabled && wasmConfig.enabled,
       retry: false,
       refetchOnWindowFocus: false,
     }
@@ -103,6 +112,8 @@ export const usePublicProjectByCodeId = (
   codeId: string
 ): UseQueryResult<PublicCode> => {
   const projectsApiRoute = useBaseApiRoute("codes");
+  const projectConfig = usePublicProjectConfig({ shouldRedirect: false });
+  const wasmConfig = useWasmConfig({ shouldRedirect: false });
 
   const queryFn = useCallback(async () => {
     if (!codeId)
@@ -118,7 +129,7 @@ export const usePublicProjectByCodeId = (
     queryFn,
     {
       keepPreviousData: true,
-      enabled: isCodeId(codeId),
+      enabled: isCodeId(codeId) && projectConfig.enabled && wasmConfig.enabled,
       retry: false,
       refetchOnWindowFocus: false,
     }
@@ -129,6 +140,8 @@ export const usePublicProjectByAccountAddress = (
   accountAddress: Option<string>
 ): UseQueryResult<PublicInfo> => {
   const projectsApiRoute = useBaseApiRoute("accounts");
+  const projectConfig = usePublicProjectConfig({ shouldRedirect: false });
+
   const queryFn = useCallback(async () => {
     if (!accountAddress)
       throw new Error(
@@ -143,7 +156,7 @@ export const usePublicProjectByAccountAddress = (
     queryFn,
     {
       keepPreviousData: true,
-      enabled: !!accountAddress,
+      enabled: !!accountAddress && projectConfig.enabled,
       retry: false,
       refetchOnWindowFocus: false,
     }

From b542f08bd5b6199da72b8ec68383aac8169922f0 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 16 Jun 2023 13:51:45 +0700
Subject: [PATCH 257/354] docs: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 54c80d3cd..7c5c157e8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -52,6 +52,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#396](https://github.com/alleslabs/celatone-frontend/pull/396) Refactor useConfig, disable wasm related tabs on the public project page
 - [#392](https://github.com/alleslabs/celatone-frontend/pull/392) Refactor proposal table and fix empty state of the proposal list table
 - [#374](https://github.com/alleslabs/celatone-frontend/pull/374) Remove testnet, mainnet concepts and use permission from params
 - [#369](https://github.com/alleslabs/celatone-frontend/pull/369) Implement Wasm feature from config

From 93894a4ee89a57018c096ba587d25feaeba6dcaf Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 16 Jun 2023 13:55:05 +0700
Subject: [PATCH 258/354] chore: remove unnecessary types

---
 src/config/types.ts | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/config/types.ts b/src/config/types.ts
index 645df0973..58f5ba489 100644
--- a/src/config/types.ts
+++ b/src/config/types.ts
@@ -19,21 +19,9 @@ type WasmConfig =
       enabled: false;
     };
 
-type PoolConfig =
-  | {
-      enabled: true;
-    }
-  | {
-      enabled: false;
-    };
+type PoolConfig = { enabled: boolean };
 
-type PublicProjectConfig =
-  | {
-      enabled: true;
-    }
-  | {
-      enabled: false;
-    };
+type PublicProjectConfig = { enabled: boolean };
 
 export interface ExplorerConfig {
   validator: string;

From b800c1f191238c25496ac83eeca8b82b2932a06f Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 16 Jun 2023 22:46:57 +0700
Subject: [PATCH 259/354] feat: jest

---
 CHANGELOG.md                   |    1 +
 jest.config.js                 |   15 +
 package.json                   |    5 +-
 src/lib/stores/code.test.ts    |   61 ++
 src/lib/utils/validate.test.ts |   42 +
 tsconfig.json                  |    3 +-
 yarn.lock                      | 1485 +++++++++++++++++++++++++++++++-
 7 files changed, 1593 insertions(+), 19 deletions(-)
 create mode 100644 jest.config.js
 create mode 100644 src/lib/stores/code.test.ts
 create mode 100644 src/lib/utils/validate.test.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 64b79fb7a..1f2b8a539 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#398](https://github.com/alleslabs/celatone-frontend/pull/398) Setup Jest and sample tests
 - [#372](https://github.com/alleslabs/celatone-frontend/pull/372) Add code hash to code details and upload section
 - [#329](https://github.com/alleslabs/celatone-frontend/pull/329) Add allowed user to store code flow
 - [#321](https://github.com/alleslabs/celatone-frontend/pull/321) Add amplitude to proposal to store code page
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 000000000..b53ca008a
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,15 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  verbose: true,
+  preset: "ts-jest",
+
+  moduleDirectories: ["node_modules", "src"],
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
+  transform: {
+    "node_modules/(map-obj|camelcase)/.+\\.(j|t)sx?$": "ts-jest",
+  },
+  testPathIgnorePatterns: ["/node_modules/"],
+  testRegex: ".test.(tsx?)$",
+
+  transformIgnorePatterns: [`/node_modules/(?!(map-obj|camelcase))`],
+};
diff --git a/package.json b/package.json
index e60ff993f..278b1f148 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
   "devDependencies": {
     "@commitlint/config-conventional": "^17.1.0",
     "@commitlint/cz-commitlint": "^17.1.2",
+    "@types/jest": "^29.4.0",
     "@types/node-gzip": "^1.1.0",
     "@types/react": "^18.0.21",
     "@types/react-linkify": "^1.0.1",
@@ -92,10 +93,12 @@
     "eslint-config-next": "^13.0.0",
     "eslint-config-sznm": "^1.0.0",
     "husky": "^8.0.1",
+    "jest": "^29.5.0",
     "lint-staged": "^13.0.3",
     "next-sitemap": "^3.1.25",
     "prettier": "^2.7.1",
     "standard-version": "^9.5.0",
-    "typescript": "^4.8.4"
+    "ts-jest": "^29.0.5",
+    "typescript": "^4.9.5"
   }
 }
diff --git a/src/lib/stores/code.test.ts b/src/lib/stores/code.test.ts
new file mode 100644
index 000000000..7d9d3a679
--- /dev/null
+++ b/src/lib/stores/code.test.ts
@@ -0,0 +1,61 @@
+import type { Addr } from "lib/types";
+
+import { CodeStore } from "./code";
+
+const TEST_USER_KEY = "test-default-address";
+
+const initCodeStore = () => {
+  const codeStore = new CodeStore();
+  codeStore.setCodeUserKey(TEST_USER_KEY);
+  return codeStore;
+};
+
+describe("CodeStore", () => {
+  test("setting userkey", () => {
+    const codeStore = new CodeStore();
+    expect(codeStore.isCodeUserKeyExist()).toBeFalsy();
+    codeStore.setCodeUserKey(TEST_USER_KEY);
+    expect(codeStore.isCodeUserKeyExist()).toBeTruthy();
+  });
+
+  test("code local info", () => {
+    const codeStore = initCodeStore();
+    expect(codeStore.getCodeLocalInfo(1)).toBeUndefined();
+
+    codeStore.updateCodeInfo(
+      1,
+      "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly" as Addr,
+      "code-name"
+    );
+    expect(codeStore.getCodeLocalInfo(1)).toStrictEqual({
+      id: 1,
+      name: "code-name",
+      uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
+    });
+
+    expect(codeStore.lastSavedCodes(TEST_USER_KEY)).toStrictEqual([]);
+    codeStore.saveNewCode(1);
+    expect(codeStore.lastSavedCodes(TEST_USER_KEY)).toStrictEqual([
+      {
+        id: 1,
+        name: "code-name",
+        uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
+      },
+    ]);
+  });
+
+  test("save codes", () => {
+    const codeStore = initCodeStore();
+    expect(codeStore.isCodeIdSaved(1)).toBeFalsy();
+    expect(codeStore.lastSavedCodeIds(TEST_USER_KEY)).toStrictEqual([]);
+
+    codeStore.saveNewCode(2);
+    codeStore.saveNewCode(1);
+    codeStore.saveNewCode(3);
+    expect(codeStore.lastSavedCodeIds(TEST_USER_KEY)).toStrictEqual([3, 1, 2]);
+
+    codeStore.removeSavedCode(4);
+    codeStore.removeSavedCode(1);
+    expect(codeStore.lastSavedCodeIds(TEST_USER_KEY)).toStrictEqual([3, 2]);
+  });
+});
diff --git a/src/lib/utils/validate.test.ts b/src/lib/utils/validate.test.ts
new file mode 100644
index 000000000..2be83ccf6
--- /dev/null
+++ b/src/lib/utils/validate.test.ts
@@ -0,0 +1,42 @@
+import { isCodeId, isTxHash, isBlock } from "./validate";
+
+describe("isCodeId", () => {
+  test("valid", () => {
+    expect(isCodeId("1234")).toBeTruthy();
+  });
+  test("invalid number string", () => {
+    expect(isCodeId("123E")).toBeFalsy();
+  });
+  test("invalid length", () => {
+    expect(isCodeId("12345678")).toBeFalsy();
+  });
+});
+
+describe("isTxHash", () => {
+  test("valid", () => {
+    expect(
+      isTxHash(
+        "DE7C3F5D7C223257877BCF145452D8B5D45BFD55620B14EE97E6C86EDE16BFE7"
+      )
+    ).toBeTruthy();
+  });
+  test("invalid hex", () => {
+    expect(
+      isTxHash(
+        "GE7C3F5D7C223257877BCF145452D8B5D45BFD55620B14EE97E6C86EDE16BFE7"
+      )
+    ).toBeFalsy();
+  });
+  test("invalid length", () => {
+    expect(isTxHash("DE7C3F5D7C223257877BCF145452D8B5")).toBeFalsy();
+  });
+});
+
+describe("isBlock", () => {
+  test("valid", () => {
+    expect(isBlock("12345678")).toBeTruthy();
+  });
+  test("invalid number string", () => {
+    expect(isCodeId("1234ABCD")).toBeFalsy();
+  });
+});
diff --git a/tsconfig.json b/tsconfig.json
index bb55893dd..700a6d7d2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,7 +25,8 @@
     "commitlint.config.js",
     "sentry.client.config.js",
     "sentry.edge.config.js",
-    "sentry.server.config.js"
+    "sentry.server.config.js",
+    "jest.config.js"
   ],
   "exclude": ["node_modules"]
 }
diff --git a/yarn.lock b/yarn.lock
index 3c8e9740e..024849b15 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -56,6 +56,14 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@ampproject/remapping@^2.2.0":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
+  integrity sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
 "@ardatan/relay-compiler@12.0.0":
   version "12.0.0"
   resolved "https://registry.npmjs.org/@ardatan/relay-compiler/-/relay-compiler-12.0.0.tgz"
@@ -93,6 +101,13 @@
   dependencies:
     "@babel/highlight" "^7.18.6"
 
+"@babel/code-frame@^7.12.13", "@babel/code-frame@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.5.tgz#234d98e1551960604f1246e6475891a570ad5658"
+  integrity sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==
+  dependencies:
+    "@babel/highlight" "^7.22.5"
+
 "@babel/compat-data@^7.19.0":
   version "7.19.0"
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.19.0.tgz"
@@ -103,6 +118,32 @@
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.1.tgz"
   integrity sha512-EWZ4mE2diW3QALKvDMiXnbZpRvlj+nayZ112nK93SnhqOtpdsbVD4W+2tEoT3YNBAG9RBR0ISY758ZkOgsn6pQ==
 
+"@babel/compat-data@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.5.tgz#b1f6c86a02d85d2dd3368a2b67c09add8cd0c255"
+  integrity sha512-4Jc/YuIaYqKnDDz892kPIledykKg12Aw1PYX5i/TY28anJtacvM1Rrr8wbieB9GfEJwlzqT0hUEao0CxEebiDA==
+
+"@babel/core@^7.11.6", "@babel/core@^7.12.3":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.22.5.tgz#d67d9747ecf26ee7ecd3ebae1ee22225fe902a89"
+  integrity sha512-SBuTAjg91A3eKOvD+bPEz3LlhHZRNu1nFOVts9lzDJTXshHTjII0BAtDS3Y2DAkdZdDKWVZGVwkDfc4Clxn1dg==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.22.5"
+    "@babel/generator" "^7.22.5"
+    "@babel/helper-compilation-targets" "^7.22.5"
+    "@babel/helper-module-transforms" "^7.22.5"
+    "@babel/helpers" "^7.22.5"
+    "@babel/parser" "^7.22.5"
+    "@babel/template" "^7.22.5"
+    "@babel/traverse" "^7.22.5"
+    "@babel/types" "^7.22.5"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.2"
+    semver "^6.3.0"
+
 "@babel/core@^7.14.0":
   version "7.20.2"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.20.2.tgz"
@@ -142,6 +183,16 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.22.5", "@babel/generator@^7.7.2":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.22.5.tgz#1e7bf768688acfb05cf30b2369ef855e82d984f7"
+  integrity sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==
+  dependencies:
+    "@babel/types" "^7.22.5"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz"
@@ -169,6 +220,17 @@
     browserslist "^4.21.3"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.5.tgz#fc7319fc54c5e2fa14b2909cf3c5fd3046813e02"
+  integrity sha512-Ji+ywpHeuqxB8WDxraCiqR0xfhYjiDE/e6k7FuIaANnoOFxAHskHChz4vA1mJC9Lbm01s1PVAGhQY4FUKSkGZw==
+  dependencies:
+    "@babel/compat-data" "^7.22.5"
+    "@babel/helper-validator-option" "^7.22.5"
+    browserslist "^4.21.3"
+    lru-cache "^5.1.1"
+    semver "^6.3.0"
+
 "@babel/helper-create-class-features-plugin@^7.18.6":
   version "7.19.0"
   resolved "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.19.0.tgz"
@@ -187,6 +249,11 @@
   resolved "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz"
   integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
 
+"@babel/helper-environment-visitor@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz#f06dd41b7c1f44e1f8da6c4055b41ab3a09a7e98"
+  integrity sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==
+
 "@babel/helper-function-name@^7.18.9", "@babel/helper-function-name@^7.19.0":
   version "7.19.0"
   resolved "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz"
@@ -195,6 +262,14 @@
     "@babel/template" "^7.18.10"
     "@babel/types" "^7.19.0"
 
+"@babel/helper-function-name@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz#ede300828905bb15e582c037162f99d5183af1be"
+  integrity sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==
+  dependencies:
+    "@babel/template" "^7.22.5"
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-hoist-variables@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz"
@@ -202,6 +277,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-hoist-variables@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
+  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-member-expression-to-functions@^7.18.9":
   version "7.18.9"
   resolved "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.9.tgz"
@@ -216,6 +298,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-module-imports@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz#1a8f4c9f4027d23f520bd76b364d44434a72660c"
+  integrity sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-module-transforms@^7.19.6", "@babel/helper-module-transforms@^7.20.2":
   version "7.20.2"
   resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.20.2.tgz"
@@ -230,6 +319,20 @@
     "@babel/traverse" "^7.20.1"
     "@babel/types" "^7.20.2"
 
+"@babel/helper-module-transforms@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.22.5.tgz#0f65daa0716961b6e96b164034e737f60a80d2ef"
+  integrity sha512-+hGKDt/Ze8GFExiVHno/2dvG5IdstpzCq0y4Qc9OJ25D4q3pKfiIP/4Vp3/JvhDkLKsDK2api3q3fpIgiIF5bw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-module-imports" "^7.22.5"
+    "@babel/helper-simple-access" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.5"
+    "@babel/template" "^7.22.5"
+    "@babel/traverse" "^7.22.5"
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-optimise-call-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz"
@@ -237,6 +340,11 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
+  integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
+
 "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.8.0":
   version "7.19.0"
   resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.19.0.tgz"
@@ -276,6 +384,13 @@
   dependencies:
     "@babel/types" "^7.20.2"
 
+"@babel/helper-simple-access@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de"
+  integrity sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.18.9":
   version "7.18.9"
   resolved "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.18.9.tgz"
@@ -290,6 +405,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-split-export-declaration@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.5.tgz#88cf11050edb95ed08d596f7a044462189127a08"
+  integrity sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-string-parser@^7.18.10":
   version "7.18.10"
   resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz"
@@ -300,6 +422,11 @@
   resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz"
   integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
 
+"@babel/helper-string-parser@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
+  integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
+
 "@babel/helper-validator-identifier@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz"
@@ -310,11 +437,21 @@
   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz"
   integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
 
+"@babel/helper-validator-identifier@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz#9544ef6a33999343c8740fa51350f30eeaaaf193"
+  integrity sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==
+
 "@babel/helper-validator-option@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz"
   integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
 
+"@babel/helper-validator-option@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz#de52000a15a177413c8234fa3a8af4ee8102d0ac"
+  integrity sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==
+
 "@babel/helpers@^7.20.1":
   version "7.20.1"
   resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.20.1.tgz"
@@ -324,6 +461,15 @@
     "@babel/traverse" "^7.20.1"
     "@babel/types" "^7.20.0"
 
+"@babel/helpers@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.22.5.tgz#74bb4373eb390d1ceed74a15ef97767e63120820"
+  integrity sha512-pSXRmfE1vzcUIDFQcSGA5Mr+GxBV9oiRKDuDxXvWQQBCh8HoIjs/2DlDB7H8smac1IVrB9/xdXj2N3Wol9Cr+Q==
+  dependencies:
+    "@babel/template" "^7.22.5"
+    "@babel/traverse" "^7.22.5"
+    "@babel/types" "^7.22.5"
+
 "@babel/highlight@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz"
@@ -333,6 +479,20 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.5.tgz#aa6c05c5407a67ebce408162b7ede789b4d22031"
+  integrity sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.5"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.5.tgz#721fd042f3ce1896238cf1b341c77eb7dee7dbea"
+  integrity sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==
+
 "@babel/parser@^7.14.0", "@babel/parser@^7.16.8", "@babel/parser@^7.20.1", "@babel/parser@^7.20.2":
   version "7.20.3"
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.20.3.tgz"
@@ -362,7 +522,21 @@
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
     "@babel/plugin-transform-parameters" "^7.20.1"
 
-"@babel/plugin-syntax-class-properties@^7.0.0":
+"@babel/plugin-syntax-async-generators@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-bigint@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
+  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.0.0", "@babel/plugin-syntax-class-properties@^7.8.3":
   version "7.12.13"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz"
   integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
@@ -376,6 +550,20 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
+"@babel/plugin-syntax-import-meta@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
+  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
 "@babel/plugin-syntax-jsx@^7.0.0", "@babel/plugin-syntax-jsx@^7.17.12", "@babel/plugin-syntax-jsx@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz"
@@ -383,6 +571,34 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
+"@babel/plugin-syntax-jsx@^7.7.2":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz#a6b68e84fb76e759fc3b93e901876ffabbe1d918"
+  integrity sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
   version "7.8.3"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz"
@@ -390,6 +606,34 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-top-level-await@^7.8.3":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
+  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-typescript@^7.7.2":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.22.5.tgz#aac8d383b062c5072c647a31ef990c1d0af90272"
+  integrity sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
 "@babel/plugin-transform-arrow-functions@^7.0.0":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.18.6.tgz"
@@ -587,6 +831,15 @@
     "@babel/parser" "^7.18.10"
     "@babel/types" "^7.18.10"
 
+"@babel/template@^7.22.5", "@babel/template@^7.3.3":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
+  integrity sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==
+  dependencies:
+    "@babel/code-frame" "^7.22.5"
+    "@babel/parser" "^7.22.5"
+    "@babel/types" "^7.22.5"
+
 "@babel/traverse@^7.14.0", "@babel/traverse@^7.16.8", "@babel/traverse@^7.19.1", "@babel/traverse@^7.20.1":
   version "7.20.1"
   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.1.tgz"
@@ -619,6 +872,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.22.5", "@babel/traverse@^7.7.2":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.5.tgz#44bd276690db6f4940fdb84e1cb4abd2f729ccd1"
+  integrity sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==
+  dependencies:
+    "@babel/code-frame" "^7.22.5"
+    "@babel/generator" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-function-name" "^7.22.5"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.5"
+    "@babel/parser" "^7.22.5"
+    "@babel/types" "^7.22.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.16.8", "@babel/types@^7.18.13", "@babel/types@^7.20.0", "@babel/types@^7.20.2":
   version "7.20.2"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.20.2.tgz"
@@ -637,6 +906,20 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.20.7", "@babel/types@^7.22.5", "@babel/types@^7.3.3":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.5.tgz#cd93eeaab025880a3a47ec881f4b096a5b786fbe"
+  integrity sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.5"
+    to-fast-properties "^2.0.0"
+
+"@bcoe/v8-coverage@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
+  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
+
 "@chain-registry/keplr@1.0.0":
   version "1.0.0"
   resolved "https://registry.npmjs.org/@chain-registry/keplr/-/keplr-1.0.0.tgz"
@@ -2725,6 +3008,214 @@
   resolved "https://registry.npmjs.org/@iov/utils/-/utils-2.0.2.tgz"
   integrity sha512-4D8MEvTcFc/DVy5q25vHxRItmgJyeX85dixMH+MxdKr+yy71h3sYk+sVBEIn70uqGP7VqAJkGOPNFs08/XYELw==
 
+"@istanbuljs/load-nyc-config@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
+  integrity sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==
+  dependencies:
+    camelcase "^5.3.1"
+    find-up "^4.1.0"
+    get-package-type "^0.1.0"
+    js-yaml "^3.13.1"
+    resolve-from "^5.0.0"
+
+"@istanbuljs/schema@^0.1.2":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
+  integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
+
+"@jest/console@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-29.5.0.tgz#593a6c5c0d3f75689835f1b3b4688c4f8544cb57"
+  integrity sha512-NEpkObxPwyw/XxZVLPmAGKE89IQRp4puc6IQRPru6JKd1M3fW9v1xM1AnzIJE65hbCkzQAdnL8P47e9hzhiYLQ==
+  dependencies:
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^29.5.0"
+    jest-util "^29.5.0"
+    slash "^3.0.0"
+
+"@jest/core@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-29.5.0.tgz#76674b96904484e8214614d17261cc491e5f1f03"
+  integrity sha512-28UzQc7ulUrOQw1IsN/kv1QES3q2kkbl/wGslyhAclqZ/8cMdB5M68BffkIdSJgKBUt50d3hbwJ92XESlE7LiQ==
+  dependencies:
+    "@jest/console" "^29.5.0"
+    "@jest/reporters" "^29.5.0"
+    "@jest/test-result" "^29.5.0"
+    "@jest/transform" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-changed-files "^29.5.0"
+    jest-config "^29.5.0"
+    jest-haste-map "^29.5.0"
+    jest-message-util "^29.5.0"
+    jest-regex-util "^29.4.3"
+    jest-resolve "^29.5.0"
+    jest-resolve-dependencies "^29.5.0"
+    jest-runner "^29.5.0"
+    jest-runtime "^29.5.0"
+    jest-snapshot "^29.5.0"
+    jest-util "^29.5.0"
+    jest-validate "^29.5.0"
+    jest-watcher "^29.5.0"
+    micromatch "^4.0.4"
+    pretty-format "^29.5.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/environment@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-29.5.0.tgz#9152d56317c1fdb1af389c46640ba74ef0bb4c65"
+  integrity sha512-5FXw2+wD29YU1d4I2htpRX7jYnAyTRjP2CsXQdo9SAM8g3ifxWPSV0HnClSn71xwctr0U3oZIIH+dtbfmnbXVQ==
+  dependencies:
+    "@jest/fake-timers" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    jest-mock "^29.5.0"
+
+"@jest/expect-utils@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.5.0.tgz#f74fad6b6e20f924582dc8ecbf2cb800fe43a036"
+  integrity sha512-fmKzsidoXQT2KwnrwE0SQq3uj8Z763vzR8LnLBwC2qYWEFpjX8daRsk6rHUM1QvNlEW/UJXNXm59ztmJJWs2Mg==
+  dependencies:
+    jest-get-type "^29.4.3"
+
+"@jest/expect@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-29.5.0.tgz#80952f5316b23c483fbca4363ce822af79c38fba"
+  integrity sha512-PueDR2HGihN3ciUNGr4uelropW7rqUfTiOn+8u0leg/42UhblPxHkfoh0Ruu3I9Y1962P3u2DY4+h7GVTSVU6g==
+  dependencies:
+    expect "^29.5.0"
+    jest-snapshot "^29.5.0"
+
+"@jest/fake-timers@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-29.5.0.tgz#d4d09ec3286b3d90c60bdcd66ed28d35f1b4dc2c"
+  integrity sha512-9ARvuAAQcBwDAqOnglWq2zwNIRUDtk/SCkp/ToGEhFv5r86K21l+VEs0qNTaXtyiY0lEePl3kylijSYJQqdbDg==
+  dependencies:
+    "@jest/types" "^29.5.0"
+    "@sinonjs/fake-timers" "^10.0.2"
+    "@types/node" "*"
+    jest-message-util "^29.5.0"
+    jest-mock "^29.5.0"
+    jest-util "^29.5.0"
+
+"@jest/globals@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-29.5.0.tgz#6166c0bfc374c58268677539d0c181f9c1833298"
+  integrity sha512-S02y0qMWGihdzNbUiqSAiKSpSozSuHX5UYc7QbnHP+D9Lyw8DgGGCinrN9uSuHPeKgSSzvPom2q1nAtBvUsvPQ==
+  dependencies:
+    "@jest/environment" "^29.5.0"
+    "@jest/expect" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    jest-mock "^29.5.0"
+
+"@jest/reporters@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-29.5.0.tgz#985dfd91290cd78ddae4914ba7921bcbabe8ac9b"
+  integrity sha512-D05STXqj/M8bP9hQNSICtPqz97u7ffGzZu+9XLucXhkOFBqKcXe04JLZOgIekOxdb73MAoBUFnqvf7MCpKk5OA==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^29.5.0"
+    "@jest/test-result" "^29.5.0"
+    "@jest/transform" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@jridgewell/trace-mapping" "^0.3.15"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^5.1.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.1.3"
+    jest-message-util "^29.5.0"
+    jest-util "^29.5.0"
+    jest-worker "^29.5.0"
+    slash "^3.0.0"
+    string-length "^4.0.1"
+    strip-ansi "^6.0.0"
+    v8-to-istanbul "^9.0.1"
+
+"@jest/schemas@^29.4.3":
+  version "29.4.3"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.4.3.tgz#39cf1b8469afc40b6f5a2baaa146e332c4151788"
+  integrity sha512-VLYKXQmtmuEz6IxJsrZwzG9NvtkQsWNnWMsKxqWNu3+CnfzJQhp0WDDKWLVV9hLKr0l3SLLFRqcYHjhtyuDVxg==
+  dependencies:
+    "@sinclair/typebox" "^0.25.16"
+
+"@jest/source-map@^29.4.3":
+  version "29.4.3"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-29.4.3.tgz#ff8d05cbfff875d4a791ab679b4333df47951d20"
+  integrity sha512-qyt/mb6rLyd9j1jUts4EQncvS6Yy3PM9HghnNv86QBlV+zdL2inCdK1tuVlL+J+lpiw2BI67qXOrX3UurBqQ1w==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.15"
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+
+"@jest/test-result@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-29.5.0.tgz#7c856a6ca84f45cc36926a4e9c6b57f1973f1408"
+  integrity sha512-fGl4rfitnbfLsrfx1uUpDEESS7zM8JdgZgOCQuxQvL1Sn/I6ijeAVQWGfXI9zb1i9Mzo495cIpVZhA0yr60PkQ==
+  dependencies:
+    "@jest/console" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-sequencer@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-29.5.0.tgz#34d7d82d3081abd523dbddc038a3ddcb9f6d3cc4"
+  integrity sha512-yPafQEcKjkSfDXyvtgiV4pevSeyuA6MQr6ZIdVkWJly9vkqjnFfcfhRQqpD5whjoU8EORki752xQmjaqoFjzMQ==
+  dependencies:
+    "@jest/test-result" "^29.5.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.5.0"
+    slash "^3.0.0"
+
+"@jest/transform@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-29.5.0.tgz#cf9c872d0965f0cbd32f1458aa44a2b1988b00f9"
+  integrity sha512-8vbeZWqLJOvHaDfeMuoHITGKSz5qWc9u04lnWrQE3VyuSw604PzQM824ZeX9XSjUCeDiE3GuxZe5UKa8J61NQw==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/types" "^29.5.0"
+    "@jridgewell/trace-mapping" "^0.3.15"
+    babel-plugin-istanbul "^6.1.1"
+    chalk "^4.0.0"
+    convert-source-map "^2.0.0"
+    fast-json-stable-stringify "^2.1.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.5.0"
+    jest-regex-util "^29.4.3"
+    jest-util "^29.5.0"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
+    slash "^3.0.0"
+    write-file-atomic "^4.0.2"
+
+"@jest/types@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.5.0.tgz#f59ef9b031ced83047c67032700d8c807d6e1593"
+  integrity sha512-qbu7kN6czmVRc3xWFQcAN03RAUamgppVUdXrvl1Wr3jlNF93o9mJbGcDWrwGB6ht44u7efB1qCFgVQmca24Uog==
+  dependencies:
+    "@jest/schemas" "^29.4.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
 "@jridgewell/gen-mapping@^0.1.0":
   version "0.1.1"
   resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz"
@@ -2733,6 +3224,15 @@
     "@jridgewell/set-array" "^1.0.0"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@jridgewell/gen-mapping@^0.3.0":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
+  integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
 "@jridgewell/gen-mapping@^0.3.2":
   version "0.3.2"
   resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz"
@@ -2742,7 +3242,7 @@
     "@jridgewell/sourcemap-codec" "^1.4.10"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@jridgewell/resolve-uri@^3.0.3":
+"@jridgewell/resolve-uri@3.1.0", "@jridgewell/resolve-uri@^3.0.3":
   version "3.1.0"
   resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz"
   integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
@@ -2752,7 +3252,7 @@
   resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz"
   integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
 
-"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13":
+"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13":
   version "1.4.14"
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
@@ -2765,6 +3265,14 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.15", "@jridgewell/trace-mapping@^0.3.17":
+  version "0.3.18"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
+  integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
+  dependencies:
+    "@jridgewell/resolve-uri" "3.1.0"
+    "@jridgewell/sourcemap-codec" "1.4.14"
+
 "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.15"
   resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz"
@@ -3304,6 +3812,25 @@
     "@sentry/cli" "^1.74.6"
     webpack-sources "^2.0.0 || ^3.0.0"
 
+"@sinclair/typebox@^0.25.16":
+  version "0.25.24"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"
+  integrity sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==
+
+"@sinonjs/commons@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-3.0.0.tgz#beb434fe875d965265e04722ccfc21df7f755d72"
+  integrity sha512-jXBtWAF4vmdNmZgD5FoKsVLv3rPgDnLgPbU84LIJ3otV44vJlDRokVng5v8NFJdCf/da9legHcKaRuZs4L7faA==
+  dependencies:
+    type-detect "4.0.8"
+
+"@sinonjs/fake-timers@^10.0.2":
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-10.2.0.tgz#b3e322a34c5f26e3184e7f6115695f299c1b1194"
+  integrity sha512-OPwQlEdg40HAj5KNF8WW6q2KG4Z+cBCZb3m4ninfTZKaBmbIJodviQsDBoYMPHkOyJJMHnOJo5j2+LKDOhOACg==
+  dependencies:
+    "@sinonjs/commons" "^3.0.0"
+
 "@swc/helpers@0.4.11":
   version "0.4.11"
   resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.11.tgz"
@@ -3349,6 +3876,39 @@
   resolved "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.2.tgz"
   integrity sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==
 
+"@types/babel__core@^7.1.14":
+  version "7.20.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.1.tgz#916ecea274b0c776fec721e333e55762d3a9614b"
+  integrity sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==
+  dependencies:
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__generator@*":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.4.tgz#1f20ce4c5b1990b37900b63f050182d28c2439b7"
+  integrity sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.1.tgz#3d1a48fd9d6c0edfd56f2ff578daed48f36c8969"
+  integrity sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.6":
+  version "7.20.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.20.1.tgz#dd6f1d2411ae677dcb2db008c962598be31d6acf"
+  integrity sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==
+  dependencies:
+    "@babel/types" "^7.20.7"
+
 "@types/big.js@^6.1.6":
   version "6.1.6"
   resolved "https://registry.npmjs.org/@types/big.js/-/big.js-6.1.6.tgz"
@@ -3359,6 +3919,40 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
   integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
 
+"@types/graceful-fs@^4.1.3":
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.6.tgz#e14b2576a1c25026b7f02ede1de3b84c3a1efeae"
+  integrity sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==
+  dependencies:
+    "@types/node" "*"
+
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
+  integrity sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==
+
+"@types/istanbul-lib-report@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
+  integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz#9153fe98bba2bd565a63add9436d6f0d7f8468ff"
+  integrity sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
+"@types/jest@^29.4.0":
+  version "29.5.2"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.2.tgz#86b4afc86e3a8f3005b297ed8a72494f89e6395b"
+  integrity sha512-mSoZVJF5YzGVCk+FsDxzDuH7s+SCkzrgKZzf0Z0T2WudhBUPoF6ktoTPC4R0ZoCPCV5xUvuU6ias5NvxcBcMMg==
+  dependencies:
+    expect "^29.0.0"
+    pretty-format "^29.0.0"
+
 "@types/js-yaml@^4.0.0":
   version "4.0.5"
   resolved "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz"
@@ -3460,6 +4054,11 @@
   resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/prettier@^2.1.5":
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.3.tgz#3e51a17e291d01d17d3fc61422015a933af7a08f"
+  integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==
+
 "@types/prop-types@*":
   version "15.7.5"
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
@@ -3493,6 +4092,11 @@
   resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/stack-utils@^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
+  integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
+
 "@types/uuid@^9.0.0":
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.0.tgz#53ef263e5239728b56096b0a869595135b7952d2"
@@ -3505,6 +4109,18 @@
   dependencies:
     "@types/node" "*"
 
+"@types/yargs-parser@*":
+  version "21.0.0"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
+  integrity sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==
+
+"@types/yargs@^17.0.8":
+  version "17.0.24"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.24.tgz#b3ef8d50ad4aa6aecf6ddc97c580a00f5aa11902"
+  integrity sha512-6i0aC7jV6QzQB8ne1joVZ0eSFIstHsCrobmOtghM11yGlH0j43FKL2UhWdELkyps0zuf7qVTUVCCR+tgSlyLLw==
+  dependencies:
+    "@types/yargs-parser" "*"
+
 "@typescript-eslint/eslint-plugin@^5.23.0":
   version "5.23.0"
   resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.23.0.tgz"
@@ -3903,11 +4519,24 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+ansi-styles@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
+  integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
+
 ansi-styles@^6.0.0:
   version "6.1.0"
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.1.0.tgz"
   integrity sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==
 
+anymatch@^3.0.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz"
@@ -3934,6 +4563,13 @@ arg@^4.1.0:
   resolved "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz"
   integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
 
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
 argparse@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
@@ -4085,6 +4721,40 @@ axobject-query@^2.2.0:
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
   integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
+babel-jest@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-29.5.0.tgz#3fe3ddb109198e78b1c88f9ebdecd5e4fc2f50a5"
+  integrity sha512-mA4eCDh5mSo2EcA9xQjVTpmbbNk32Zb3Q3QFQsNhaK56Q+yoXowzFodLux30HRgyOho5rsQ6B0P9QpMkvvnJ0Q==
+  dependencies:
+    "@jest/transform" "^29.5.0"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.1.1"
+    babel-preset-jest "^29.5.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    slash "^3.0.0"
+
+babel-plugin-istanbul@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
+  integrity sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^5.0.4"
+    test-exclude "^6.0.0"
+
+babel-plugin-jest-hoist@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.5.0.tgz#a97db437936f441ec196990c9738d4b88538618a"
+  integrity sha512-zSuuuAlTMT4mzLj2nPnUm6fsE6270vdOfnpbJ+RmruU75UhLFvL0N2NgI7xpeS7NaB6hGqmd5pVpGTDYvi4Q3w==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.1.14"
+    "@types/babel__traverse" "^7.0.6"
+
 babel-plugin-macros@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz"
@@ -4099,6 +4769,24 @@ babel-plugin-syntax-trailing-function-commas@^7.0.0-beta.0:
   resolved "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz"
   integrity sha512-Xj9XuRuz3nTSbaTXWv3itLOcxyF4oPD8douBBmj7U9BBC6nEBYfyOJYQMf/8PJAFotC62UY5dFfIGEPr7WswzQ==
 
+babel-preset-current-node-syntax@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
+  integrity sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==
+  dependencies:
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-bigint" "^7.8.3"
+    "@babel/plugin-syntax-class-properties" "^7.8.3"
+    "@babel/plugin-syntax-import-meta" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.8.3"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-top-level-await" "^7.8.3"
+
 babel-preset-fbjs@^3.4.0:
   version "3.4.0"
   resolved "https://registry.npmjs.org/babel-preset-fbjs/-/babel-preset-fbjs-3.4.0.tgz"
@@ -4132,6 +4820,14 @@ babel-preset-fbjs@^3.4.0:
     "@babel/plugin-transform-template-literals" "^7.0.0"
     babel-plugin-syntax-trailing-function-commas "^7.0.0-beta.0"
 
+babel-preset-jest@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-29.5.0.tgz#57bc8cc88097af7ff6a5ab59d1cd29d52a5916e2"
+  integrity sha512-JOMloxOqdiBSxMAzjRaH023/vvcaSaec49zvg+2LmNsktC7ei39LTJGw02J+9uUtTZUq6xbLyJ4dxe9sSmIuAg==
+  dependencies:
+    babel-plugin-jest-hoist "^29.5.0"
+    babel-preset-current-node-syntax "^1.0.0"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
@@ -4265,6 +4961,13 @@ browserslist@^4.20.2, browserslist@^4.21.3:
     node-releases "^2.0.6"
     update-browserslist-db "^1.0.5"
 
+bs-logger@0.x:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
+  integrity sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==
+  dependencies:
+    fast-json-stable-stringify "2.x"
+
 bs58@^4.0.0:
   version "4.0.1"
   resolved "https://registry.npmjs.org/bs58/-/bs58-4.0.1.tgz"
@@ -4369,6 +5072,11 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
+camelcase@^6.2.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
+  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+
 camelcase@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/camelcase/-/camelcase-7.0.0.tgz"
@@ -4463,6 +5171,11 @@ change-case@^4.1.2:
     snake-case "^3.0.4"
     tslib "^2.0.3"
 
+char-regex@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
+  integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
+
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz"
@@ -4488,6 +5201,11 @@ chokidar@^3.5.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
+ci-info@^3.2.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.8.0.tgz#81408265a5380c929f0bc665d62256628ce9ef91"
+  integrity sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==
+
 cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.4"
   resolved "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz"
@@ -4496,6 +5214,11 @@ cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+cjs-module-lexer@^1.0.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz#6c370ab19f8a3394e318fe682686ec0ac684d107"
+  integrity sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz"
@@ -4557,16 +5280,35 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.0.0"
+
 clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
+
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==
 
+collect-v8-coverage@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
+  integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
@@ -4877,6 +5619,16 @@ convert-source-map@^1.5.0, convert-source-map@^1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
+convert-source-map@^1.6.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
 cookie@^0.4.1:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
@@ -5101,7 +5853,7 @@ decode-uri-component@^0.2.0:
   resolved "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz"
   integrity sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==
 
-dedent@0.7.0:
+dedent@0.7.0, dedent@^0.7.0:
   version "0.7.0"
   resolved "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz"
   integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
@@ -5166,9 +5918,9 @@ detect-indent@6.1.0, detect-indent@^6.0.0:
   resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz"
   integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
 
-detect-newline@^3.1.0:
+detect-newline@^3.0.0, detect-newline@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
 detect-node-es@^1.1.0:
@@ -5181,6 +5933,11 @@ diff-match-patch@^1.0.5:
   resolved "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz"
   integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==
 
+diff-sequences@^29.4.3:
+  version "29.4.3"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.4.3.tgz#9314bc1fabe09267ffeca9cbafc457d8499a13f2"
+  integrity sha512-ofrBgwpPhCD85kMKtE9RYFFq6OC1A89oW2vvgWZNCwxrUpRUILopY7lsYyMDSjc8g6U6aiO0Qubg6r4Wgt5ZnA==
+
 diff@^4.0.1:
   version "4.0.2"
   resolved "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz"
@@ -5270,6 +6027,11 @@ elliptic@^6.4.0, elliptic@^6.5.3, elliptic@^6.5.4:
     minimalistic-assert "^1.0.1"
     minimalistic-crypto-utils "^1.0.1"
 
+emittery@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
+  integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
@@ -5342,6 +6104,11 @@ escape-string-regexp@^1.0.5:
   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
 escape-string-regexp@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
@@ -5598,6 +6365,11 @@ espree@^9.4.0:
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^3.3.0"
 
+esprima@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
 esquery@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz"
@@ -5677,6 +6449,11 @@ execa@^6.1.0:
     signal-exit "^3.0.7"
     strip-final-newline "^3.0.0"
 
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+  integrity sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==
+
 expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz"
@@ -5684,6 +6461,17 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   dependencies:
     homedir-polyfill "^1.0.1"
 
+expect@^29.0.0, expect@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-29.5.0.tgz#68c0509156cb2a0adb8865d413b137eeaae682f7"
+  integrity sha512-yM7xqUrCO2JdpFo4XpM82t+PJBFybdqoQuJLDGeDX2ij8NZzqRHyu3Hp188/JX7SWqud+7t4MUdvcgGBICMHZg==
+  dependencies:
+    "@jest/expect-utils" "^29.5.0"
+    jest-get-type "^29.4.3"
+    jest-matcher-utils "^29.5.0"
+    jest-message-util "^29.5.0"
+    jest-util "^29.5.0"
+
 external-editor@^3.0.3:
   version "3.1.0"
   resolved "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz"
@@ -5729,7 +6517,7 @@ fast-glob@^3.2.9:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
-fast-json-stable-stringify@^2.0.0:
+fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
@@ -5831,7 +6619,7 @@ find-up@^3.0.0:
   dependencies:
     locate-path "^3.0.0"
 
-find-up@^4.1.0:
+find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz"
   integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
@@ -5965,7 +6753,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@~2.3.2:
+fsevents@^2.3.2, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -6033,6 +6821,11 @@ get-nonce@^1.0.0:
   resolved "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz"
   integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
 
+get-package-type@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
+  integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
+
 get-pkg-repo@^4.0.0:
   version "4.2.1"
   resolved "https://registry.npmjs.org/get-pkg-repo/-/get-pkg-repo-4.2.1.tgz"
@@ -6116,7 +6909,7 @@ glob@7.1.7:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@7.2.3, glob@^7.1.1, glob@^7.1.3, glob@^7.2.0:
+glob@7.2.3, glob@^7.1.1, glob@^7.1.3, glob@^7.1.4, glob@^7.2.0:
   version "7.2.3"
   resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -6202,6 +6995,11 @@ graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
+graceful-fs@^4.2.9:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
 grapheme-splitter@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz"
@@ -6381,6 +7179,11 @@ hosted-git-info@^4.0.0, hosted-git-info@^4.0.1:
   dependencies:
     lru-cache "^6.0.0"
 
+html-escaper@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
+  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
+
 http-proxy-agent@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz"
@@ -6458,6 +7261,14 @@ import-from@4.0.0:
   resolved "https://registry.npmjs.org/import-from/-/import-from-4.0.0.tgz"
   integrity sha512-P9J71vT5nLlDeV8FHs5nNxaLbrpfAV5cF5srvbZfpwpcJoM/xZR3hiv+q+SAnuSmuGbXMWud063iIMx/V/EWZQ==
 
+import-local@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.1.0.tgz#b4479df8a5fd44f6cdce24070675676063c95cb4"
+  integrity sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
@@ -6604,6 +7415,11 @@ is-fullwidth-code-point@^4.0.0:
   resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz"
   integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
 
+is-generator-fn@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
+  integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
+
 is-glob@4.0.3, is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
@@ -6779,6 +7595,409 @@ isomorphic-ws@^4.0.1:
   resolved "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz"
   integrity sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==
 
+istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
+  integrity sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==
+
+istanbul-lib-instrument@^5.0.4, istanbul-lib-instrument@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz#d10c8885c2125574e1c231cacadf955675e1ce3d"
+  integrity sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/parser" "^7.14.7"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.2.0"
+    semver "^6.3.0"
+
+istanbul-lib-report@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
+  integrity sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==
+  dependencies:
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^3.0.0"
+    supports-color "^7.1.0"
+
+istanbul-lib-source-maps@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz#895f3a709fcfba34c6de5a42939022f3e4358551"
+  integrity sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^3.0.0"
+    source-map "^0.6.1"
+
+istanbul-reports@^3.1.3:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.5.tgz#cc9a6ab25cb25659810e4785ed9d9fb742578bae"
+  integrity sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
+
+jest-changed-files@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.5.0.tgz#e88786dca8bf2aa899ec4af7644e16d9dcf9b23e"
+  integrity sha512-IFG34IUMUaNBIxjQXF/iu7g6EcdMrGRRxaUSw92I/2g2YC6vCdTltl4nHvt7Ci5nSJwXIkCu8Ka1DKF+X7Z1Ag==
+  dependencies:
+    execa "^5.0.0"
+    p-limit "^3.1.0"
+
+jest-circus@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-29.5.0.tgz#b5926989449e75bff0d59944bae083c9d7fb7317"
+  integrity sha512-gq/ongqeQKAplVxqJmbeUOJJKkW3dDNPY8PjhJ5G0lBRvu0e3EWGxGy5cI4LAGA7gV2UHCtWBI4EMXK8c9nQKA==
+  dependencies:
+    "@jest/environment" "^29.5.0"
+    "@jest/expect" "^29.5.0"
+    "@jest/test-result" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^0.7.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^29.5.0"
+    jest-matcher-utils "^29.5.0"
+    jest-message-util "^29.5.0"
+    jest-runtime "^29.5.0"
+    jest-snapshot "^29.5.0"
+    jest-util "^29.5.0"
+    p-limit "^3.1.0"
+    pretty-format "^29.5.0"
+    pure-rand "^6.0.0"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-cli@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-29.5.0.tgz#b34c20a6d35968f3ee47a7437ff8e53e086b4a67"
+  integrity sha512-L1KcP1l4HtfwdxXNFCL5bmUbLQiKrakMUriBEcc1Vfz6gx31ORKdreuWvmQVBit+1ss9NNR3yxjwfwzZNdQXJw==
+  dependencies:
+    "@jest/core" "^29.5.0"
+    "@jest/test-result" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    import-local "^3.0.2"
+    jest-config "^29.5.0"
+    jest-util "^29.5.0"
+    jest-validate "^29.5.0"
+    prompts "^2.0.1"
+    yargs "^17.3.1"
+
+jest-config@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-29.5.0.tgz#3cc972faec8c8aaea9ae158c694541b79f3748da"
+  integrity sha512-kvDUKBnNJPNBmFFOhDbm59iu1Fii1Q6SxyhXfvylq3UTHbg6o7j/g8k2dZyXWLvfdKB1vAPxNZnMgtKJcmu3kA==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/test-sequencer" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    babel-jest "^29.5.0"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-circus "^29.5.0"
+    jest-environment-node "^29.5.0"
+    jest-get-type "^29.4.3"
+    jest-regex-util "^29.4.3"
+    jest-resolve "^29.5.0"
+    jest-runner "^29.5.0"
+    jest-util "^29.5.0"
+    jest-validate "^29.5.0"
+    micromatch "^4.0.4"
+    parse-json "^5.2.0"
+    pretty-format "^29.5.0"
+    slash "^3.0.0"
+    strip-json-comments "^3.1.1"
+
+jest-diff@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.5.0.tgz#e0d83a58eb5451dcc1fa61b1c3ee4e8f5a290d63"
+  integrity sha512-LtxijLLZBduXnHSniy0WMdaHjmQnt3g5sa16W4p0HqukYTTsyTW3GD1q41TyGl5YFXj/5B2U6dlh5FM1LIMgxw==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^29.4.3"
+    jest-get-type "^29.4.3"
+    pretty-format "^29.5.0"
+
+jest-docblock@^29.4.3:
+  version "29.4.3"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-29.4.3.tgz#90505aa89514a1c7dceeac1123df79e414636ea8"
+  integrity sha512-fzdTftThczeSD9nZ3fzA/4KkHtnmllawWrXO69vtI+L9WjEIuXWs4AmyME7lN5hU7dB0sHhuPfcKofRsUb/2Fg==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-each@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-29.5.0.tgz#fc6e7014f83eac68e22b7195598de8554c2e5c06"
+  integrity sha512-HM5kIJ1BTnVt+DQZ2ALp3rzXEl+g726csObrW/jpEGl+CDSSQpOJJX2KE/vEg8cxcMXdyEPu6U4QX5eruQv5hA==
+  dependencies:
+    "@jest/types" "^29.5.0"
+    chalk "^4.0.0"
+    jest-get-type "^29.4.3"
+    jest-util "^29.5.0"
+    pretty-format "^29.5.0"
+
+jest-environment-node@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-29.5.0.tgz#f17219d0f0cc0e68e0727c58b792c040e332c967"
+  integrity sha512-ExxuIK/+yQ+6PRGaHkKewYtg6hto2uGCgvKdb2nfJfKXgZ17DfXjvbZ+jA1Qt9A8EQSfPnt5FKIfnOO3u1h9qw==
+  dependencies:
+    "@jest/environment" "^29.5.0"
+    "@jest/fake-timers" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    jest-mock "^29.5.0"
+    jest-util "^29.5.0"
+
+jest-get-type@^29.4.3:
+  version "29.4.3"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.4.3.tgz#1ab7a5207c995161100b5187159ca82dd48b3dd5"
+  integrity sha512-J5Xez4nRRMjk8emnTpWrlkyb9pfRQQanDrvWHhsR1+VUfbwxi30eVcZFlcdGInRibU4G5LwHXpI7IRHU0CY+gg==
+
+jest-haste-map@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-29.5.0.tgz#69bd67dc9012d6e2723f20a945099e972b2e94de"
+  integrity sha512-IspOPnnBro8YfVYSw6yDRKh/TiCdRngjxeacCps1cQ9cgVN6+10JUcuJ1EabrgYLOATsIAigxA0rLR9x/YlrSA==
+  dependencies:
+    "@jest/types" "^29.5.0"
+    "@types/graceful-fs" "^4.1.3"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-regex-util "^29.4.3"
+    jest-util "^29.5.0"
+    jest-worker "^29.5.0"
+    micromatch "^4.0.4"
+    walker "^1.0.8"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
+jest-leak-detector@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-29.5.0.tgz#cf4bdea9615c72bac4a3a7ba7e7930f9c0610c8c"
+  integrity sha512-u9YdeeVnghBUtpN5mVxjID7KbkKE1QU4f6uUwuxiY0vYRi9BUCLKlPEZfDGR67ofdFmDz9oPAy2G92Ujrntmow==
+  dependencies:
+    jest-get-type "^29.4.3"
+    pretty-format "^29.5.0"
+
+jest-matcher-utils@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.5.0.tgz#d957af7f8c0692c5453666705621ad4abc2c59c5"
+  integrity sha512-lecRtgm/rjIK0CQ7LPQwzCs2VwW6WAahA55YBuI+xqmhm7LAaxokSB8C97yJeYyT+HvQkH741StzpU41wohhWw==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^29.5.0"
+    jest-get-type "^29.4.3"
+    pretty-format "^29.5.0"
+
+jest-message-util@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-29.5.0.tgz#1f776cac3aca332ab8dd2e3b41625435085c900e"
+  integrity sha512-Kijeg9Dag6CKtIDA7O21zNTACqD5MD/8HfIV8pdD94vFyFuer52SigdC3IQMhab3vACxXMiFk+yMHNdbqtyTGA==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^29.5.0"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^29.5.0"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-mock@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-29.5.0.tgz#26e2172bcc71d8b0195081ff1f146ac7e1518aed"
+  integrity sha512-GqOzvdWDE4fAV2bWQLQCkujxYWL7RxjCnj71b5VhDAGOevB3qj3Ovg26A5NI84ZpODxyzaozXLOh2NCgkbvyaw==
+  dependencies:
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    jest-util "^29.5.0"
+
+jest-pnp-resolver@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz#930b1546164d4ad5937d5540e711d4d38d4cad2e"
+  integrity sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==
+
+jest-regex-util@^29.4.3:
+  version "29.4.3"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-29.4.3.tgz#a42616141e0cae052cfa32c169945d00c0aa0bb8"
+  integrity sha512-O4FglZaMmWXbGHSQInfXewIsd1LMn9p3ZXB/6r4FOkyhX2/iP/soMG98jGvk/A3HAN78+5VWcBGO0BJAPRh4kg==
+
+jest-resolve-dependencies@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-29.5.0.tgz#f0ea29955996f49788bf70996052aa98e7befee4"
+  integrity sha512-sjV3GFr0hDJMBpYeUuGduP+YeCRbd7S/ck6IvL3kQ9cpySYKqcqhdLLC2rFwrcL7tz5vYibomBrsFYWkIGGjOg==
+  dependencies:
+    jest-regex-util "^29.4.3"
+    jest-snapshot "^29.5.0"
+
+jest-resolve@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-29.5.0.tgz#b053cc95ad1d5f6327f0ac8aae9f98795475ecdc"
+  integrity sha512-1TzxJ37FQq7J10jPtQjcc+MkCkE3GBpBecsSUWJ0qZNJpmg6m0D9/7II03yJulm3H/fvVjgqLh/k2eYg+ui52w==
+  dependencies:
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.5.0"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^29.5.0"
+    jest-validate "^29.5.0"
+    resolve "^1.20.0"
+    resolve.exports "^2.0.0"
+    slash "^3.0.0"
+
+jest-runner@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-29.5.0.tgz#6a57c282eb0ef749778d444c1d758c6a7693b6f8"
+  integrity sha512-m7b6ypERhFghJsslMLhydaXBiLf7+jXy8FwGRHO3BGV1mcQpPbwiqiKUR2zU2NJuNeMenJmlFZCsIqzJCTeGLQ==
+  dependencies:
+    "@jest/console" "^29.5.0"
+    "@jest/environment" "^29.5.0"
+    "@jest/test-result" "^29.5.0"
+    "@jest/transform" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.13.1"
+    graceful-fs "^4.2.9"
+    jest-docblock "^29.4.3"
+    jest-environment-node "^29.5.0"
+    jest-haste-map "^29.5.0"
+    jest-leak-detector "^29.5.0"
+    jest-message-util "^29.5.0"
+    jest-resolve "^29.5.0"
+    jest-runtime "^29.5.0"
+    jest-util "^29.5.0"
+    jest-watcher "^29.5.0"
+    jest-worker "^29.5.0"
+    p-limit "^3.1.0"
+    source-map-support "0.5.13"
+
+jest-runtime@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-29.5.0.tgz#c83f943ee0c1da7eb91fa181b0811ebd59b03420"
+  integrity sha512-1Hr6Hh7bAgXQP+pln3homOiEZtCDZFqwmle7Ew2j8OlbkIu6uE3Y/etJQG8MLQs3Zy90xrp2C0BRrtPHG4zryw==
+  dependencies:
+    "@jest/environment" "^29.5.0"
+    "@jest/fake-timers" "^29.5.0"
+    "@jest/globals" "^29.5.0"
+    "@jest/source-map" "^29.4.3"
+    "@jest/test-result" "^29.5.0"
+    "@jest/transform" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.5.0"
+    jest-message-util "^29.5.0"
+    jest-mock "^29.5.0"
+    jest-regex-util "^29.4.3"
+    jest-resolve "^29.5.0"
+    jest-snapshot "^29.5.0"
+    jest-util "^29.5.0"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+
+jest-snapshot@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-29.5.0.tgz#c9c1ce0331e5b63cd444e2f95a55a73b84b1e8ce"
+  integrity sha512-x7Wolra5V0tt3wRs3/ts3S6ciSQVypgGQlJpz2rsdQYoUKxMxPNaoHMGJN6qAuPJqS+2iQ1ZUn5kl7HCyls84g==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-jsx" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/traverse" "^7.7.2"
+    "@babel/types" "^7.3.3"
+    "@jest/expect-utils" "^29.5.0"
+    "@jest/transform" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/babel__traverse" "^7.0.6"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^29.5.0"
+    graceful-fs "^4.2.9"
+    jest-diff "^29.5.0"
+    jest-get-type "^29.4.3"
+    jest-matcher-utils "^29.5.0"
+    jest-message-util "^29.5.0"
+    jest-util "^29.5.0"
+    natural-compare "^1.4.0"
+    pretty-format "^29.5.0"
+    semver "^7.3.5"
+
+jest-util@^29.0.0, jest-util@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.5.0.tgz#24a4d3d92fc39ce90425311b23c27a6e0ef16b8f"
+  integrity sha512-RYMgG/MTadOr5t8KdhejfvUU82MxsCu5MF6KuDUHl+NuwzUt+Sm6jJWxTJVrDR1j5M/gJVCPKQEpWXY+yIQ6lQ==
+  dependencies:
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
+jest-validate@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-29.5.0.tgz#8e5a8f36178d40e47138dc00866a5f3bd9916ffc"
+  integrity sha512-pC26etNIi+y3HV8A+tUGr/lph9B18GnzSRAkPaaZJIE1eFdiYm6/CewuiJQ8/RlfHd1u/8Ioi8/sJ+CmbA+zAQ==
+  dependencies:
+    "@jest/types" "^29.5.0"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^29.4.3"
+    leven "^3.1.0"
+    pretty-format "^29.5.0"
+
+jest-watcher@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-29.5.0.tgz#cf7f0f949828ba65ddbbb45c743a382a4d911363"
+  integrity sha512-KmTojKcapuqYrKDpRwfqcQ3zjMlwu27SYext9pt4GlF5FUgB+7XE1mcCnSm6a4uUpFyQIkb6ZhzZvHl+jiBCiA==
+  dependencies:
+    "@jest/test-result" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.13.1"
+    jest-util "^29.5.0"
+    string-length "^4.0.1"
+
+jest-worker@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-29.5.0.tgz#bdaefb06811bd3384d93f009755014d8acb4615d"
+  integrity sha512-NcrQnevGoSp4b5kg+akIpthoAFHxPBcb5P6mYPY0fUNT+sSvmtu6jlkEle3anczUKIKEbMxFimk9oTP/tpIPgA==
+  dependencies:
+    "@types/node" "*"
+    jest-util "^29.5.0"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jest@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-29.5.0.tgz#f75157622f5ce7ad53028f2f8888ab53e1f1f24e"
+  integrity sha512-juMg3he2uru1QoXX078zTa7pO85QyB9xajZc6bU+d9yEGwrKX6+vGmJQ3UdVZsvTEUARIdObzH68QItim6OSSQ==
+  dependencies:
+    "@jest/core" "^29.5.0"
+    "@jest/types" "^29.5.0"
+    import-local "^3.0.2"
+    jest-cli "^29.5.0"
+
 js-base64@^3.7.4:
   version "3.7.4"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.4.tgz#af95b20f23efc8034afd2d1cc5b9d0adf7419037"
@@ -6845,6 +8064,14 @@ js-sha3@0.8.0, js-sha3@^0.8.0:
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
+js-yaml@^3.13.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 js-yaml@^4.0.0, js-yaml@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz"
@@ -6914,6 +8141,11 @@ json5@^2.2.1:
   resolved "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
 
+json5@^2.2.2, json5@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
 jsonfile@^6.0.1:
   version "6.1.0"
   resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz"
@@ -6984,6 +8216,11 @@ kind-of@^6.0.3:
   resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
+kleur@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
+  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
+
 language-subtag-registry@~0.3.2:
   version "0.3.21"
   resolved "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz"
@@ -6996,6 +8233,11 @@ language-tags@^1.0.5:
   dependencies:
     language-subtag-registry "~0.3.2"
 
+leven@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
+  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz"
@@ -7175,6 +8417,11 @@ lodash.map@^4.5.1:
   resolved "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz"
   integrity sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=
 
+lodash.memoize@4.x:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+  integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
@@ -7249,6 +8496,13 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+lru-cache@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
+  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
+  dependencies:
+    yallist "^3.0.2"
+
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
@@ -7268,11 +8522,25 @@ magic-string@^0.27.0:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.13"
 
-make-error@^1.1.1:
+make-dir@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
+  dependencies:
+    semver "^6.0.0"
+
+make-error@1.x, make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
 
+makeerror@1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.12.tgz#3e5dd2079a82e812e983cc6610c4a2cb0eaa801a"
+  integrity sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==
+  dependencies:
+    tmpl "1.0.5"
+
 map-cache@^0.2.0:
   version "0.2.2"
   resolved "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz"
@@ -7773,7 +9041,7 @@ os-tmpdir@~1.0.2:
   resolved "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-p-limit@3.1.0, p-limit@^3.0.2:
+p-limit@3.1.0, p-limit@^3.0.2, p-limit@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz"
   integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
@@ -7881,7 +9149,7 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
-parse-json@^5.0.0:
+parse-json@^5.0.0, parse-json@^5.2.0:
   version "5.2.0"
   resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz"
   integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
@@ -7987,7 +9255,7 @@ picocolors@^1.0.0:
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -8007,6 +9275,18 @@ pify@^3.0.0:
   resolved "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz"
   integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
 
+pirates@^4.0.4:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
+  integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
+
+pkg-dir@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
 popmotion@11.0.5:
   version "11.0.5"
   resolved "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz"
@@ -8043,6 +9323,15 @@ prettier@^2.7.1:
   resolved "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz"
   integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
 
+pretty-format@^29.0.0, pretty-format@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.5.0.tgz#283134e74f70e2e3e7229336de0e4fce94ccde5a"
+  integrity sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==
+  dependencies:
+    "@jest/schemas" "^29.4.3"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
@@ -8060,6 +9349,14 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
+prompts@^2.0.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
+  integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.5"
+
 prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
@@ -8117,6 +9414,11 @@ punycode@^2.1.0:
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+pure-rand@^6.0.0:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/pure-rand/-/pure-rand-6.0.2.tgz#a9c2ddcae9b68d736a8163036f088a2781c8b306"
+  integrity sha512-6Yg0ekpKICSjPswYOuC5sku/TSWaRYlA0qsXqJgM/d/4pLPHPuTxK7Nbf7jFKzAeedUhR8C7K9Uv63FBsSo8xQ==
+
 pvtsutils@^1.3.2:
   version "1.3.2"
   resolved "https://registry.npmjs.org/pvtsutils/-/pvtsutils-1.3.2.tgz"
@@ -8239,6 +9541,11 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
 react-linkify@^1.0.0-alpha:
   version "1.0.0-alpha"
   resolved "https://registry.npmjs.org/react-linkify/-/react-linkify-1.0.0-alpha.tgz"
@@ -8443,6 +9750,13 @@ require-main-filename@^2.0.0:
   resolved "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
 resolve-dir@^1.0.0, resolve-dir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz"
@@ -8468,6 +9782,11 @@ resolve-global@1.0.0, resolve-global@^1.0.0:
   dependencies:
     global-dirs "^0.1.1"
 
+resolve.exports@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-2.0.2.tgz#f8c934b8e6a13f539e38b7098e2e36134f01e800"
+  integrity sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==
+
 resolve@^1.10.0, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0:
   version "1.22.1"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz"
@@ -8637,6 +9956,13 @@ semver@7.3.7, semver@^7.1.1, semver@^7.3.4, semver@^7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@7.x:
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.2.tgz#5b851e66d1be07c1cdaf37dfc856f543325a2beb"
+  integrity sha512-SoftuTROv/cRjCze/scjGyiDtcUyxw1rgYQSZY7XTmtR5hX+dm76iDbTH8TkLPHCQmlbQVSSbNZCPM2hb0knnQ==
+  dependencies:
+    lru-cache "^6.0.0"
+
 semver@^6.0.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
@@ -8724,6 +10050,11 @@ signedsource@^1.0.0:
   resolved "https://registry.npmjs.org/signedsource/-/signedsource-1.0.0.tgz"
   integrity sha512-6+eerH9fEnNmi/hyM1DXcRK3pWdoMQtlkQ+ns0ntzunjKqp5i3sKCc80ym8Fib3iaYhdJUOPdhlJWj1tvge2Ww==
 
+sisteransi@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
+  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
@@ -8768,12 +10099,20 @@ source-map-js@^1.0.2:
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+source-map-support@0.5.13:
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
+  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
 source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.1:
+source-map@^0.6.0, source-map@^0.6.1:
   version "0.6.1"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -8830,6 +10169,18 @@ sponge-case@^1.0.1:
   dependencies:
     tslib "^2.0.3"
 
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
+
+stack-utils@^2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.6.tgz#aaf0748169c02fc33c8232abccf933f54a1cc34f"
+  integrity sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
 standard-version@^9.5.0:
   version "9.5.0"
   resolved "https://registry.npmjs.org/standard-version/-/standard-version-9.5.0.tgz"
@@ -8870,6 +10221,14 @@ string-env-interpolation@1.0.1, string-env-interpolation@^1.0.1:
   resolved "https://registry.npmjs.org/string-env-interpolation/-/string-env-interpolation-1.0.1.tgz"
   integrity sha512-78lwMoCcn0nNu8LszbP1UA7g55OeE4v7rCeWnM5B453rnNr4aq+5it3FEYtZrSEiMvHZOZ9Jlqb0OD0M2VInqg==
 
+string-length@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
+  integrity sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==
+  dependencies:
+    char-regex "^1.0.2"
+    strip-ansi "^6.0.0"
+
 string-width@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -8969,7 +10328,7 @@ strip-ansi@^7.0.1:
   dependencies:
     ansi-regex "^6.0.1"
 
-strip-bom@4.0.0:
+strip-bom@4.0.0, strip-bom@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz"
   integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
@@ -9040,6 +10399,13 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+supports-color@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
@@ -9057,6 +10423,15 @@ symbol-observable@^2.0.3:
   resolved "https://registry.npmjs.org/symbol-observable/-/symbol-observable-2.0.3.tgz"
   integrity sha512-sQV7phh2WCYAn81oAkakC5qjq2Ml0g8ozqz03wOGnx9dDlG1de6yrF+0RAzSJD8fPUow3PTSMf2SAbOGxb93BA==
 
+test-exclude@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
+  integrity sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==
+  dependencies:
+    "@istanbuljs/schema" "^0.1.2"
+    glob "^7.1.4"
+    minimatch "^3.0.4"
+
 text-extensions@^1.0.0:
   version "1.9.0"
   resolved "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz"
@@ -9122,6 +10497,11 @@ tmp@^0.0.33:
   dependencies:
     os-tmpdir "~1.0.2"
 
+tmpl@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
+  integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
@@ -9149,6 +10529,20 @@ trim-newlines@^3.0.0:
   resolved "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz"
   integrity sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==
 
+ts-jest@^29.0.5:
+  version "29.1.0"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-29.1.0.tgz#4a9db4104a49b76d2b368ea775b6c9535c603891"
+  integrity sha512-ZhNr7Z4PcYa+JjMl62ir+zPiNJfXJN6E8hSLnaUKhOgqcn8vb3e537cpkd0FuAfRK3sR1LSqM1MOhliXNgOFPA==
+  dependencies:
+    bs-logger "0.x"
+    fast-json-stable-stringify "2.x"
+    jest-util "^29.0.0"
+    json5 "^2.2.3"
+    lodash.memoize "4.x"
+    make-error "1.x"
+    semver "7.x"
+    yargs-parser "^21.0.1"
+
 ts-log@^2.2.3:
   version "2.2.5"
   resolved "https://registry.npmjs.org/ts-log/-/ts-log-2.2.5.tgz"
@@ -9212,6 +10606,11 @@ type-check@^0.4.0, type-check@~0.4.0:
   dependencies:
     prelude-ls "^1.2.1"
 
+type-detect@4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
+
 type-fest@^0.18.0:
   version "0.18.1"
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz"
@@ -9259,11 +10658,16 @@ typeforce@^1.11.5:
   resolved "https://registry.npmjs.org/typeforce/-/typeforce-1.18.0.tgz"
   integrity sha512-7uc1O8h1M1g0rArakJdf0uLRSSgFcYexrVoKo+bzJd32gd4gDy2L/Z+8/FjPnU9ydY3pEnVPtr9FyscYY60K1g==
 
-typescript@^4.6.4, typescript@^4.8.4:
+typescript@^4.6.4:
   version "4.8.4"
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz"
   integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
 
+typescript@^4.9.5:
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
+  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+
 ua-parser-js@^0.7.30:
   version "0.7.32"
   resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.32.tgz"
@@ -9394,6 +10798,15 @@ v8-compile-cache-lib@^3.0.1:
   resolved "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz"
   integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
 
+v8-to-istanbul@^9.0.1:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.1.0.tgz#1b83ed4e397f58c85c266a570fc2558b5feb9265"
+  integrity sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.12"
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz"
@@ -9407,6 +10820,13 @@ value-or-promise@1.0.11, value-or-promise@^1.0.11:
   resolved "https://registry.npmjs.org/value-or-promise/-/value-or-promise-1.0.11.tgz"
   integrity sha512-41BrgH+dIbCFXClcSapVs5M6GkENd3gQOJpEfPDNa71LsUGMXDL0jMWpI/Rh7WhX+Aalfz2TTS3Zt5pUsbnhLg==
 
+walker@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.8.tgz#bd498db477afe573dc04185f011d3ab8a8d7653f"
+  integrity sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==
+  dependencies:
+    makeerror "1.0.12"
+
 wcwidth@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz"
@@ -9535,6 +10955,14 @@ wrappy@1:
   resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
+write-file-atomic@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.2.tgz#a9df01ae5b77858a027fd2e80768ee433555fcfd"
+  integrity sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==
+  dependencies:
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.7"
+
 ws@7.5.3:
   version "7.5.3"
   resolved "https://registry.npmjs.org/ws/-/ws-7.5.3.tgz"
@@ -9573,6 +11001,11 @@ y18n@^5.0.5:
   resolved "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz"
   integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
@@ -9611,6 +11044,11 @@ yargs-parser@^21.0.0:
   resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.1.tgz"
   integrity sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg==
 
+yargs-parser@^21.0.1, yargs-parser@^21.1.1:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
+
 yargs@^15.3.1:
   version "15.4.1"
   resolved "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz"
@@ -9654,6 +11092,19 @@ yargs@^17.0.0:
     y18n "^5.0.5"
     yargs-parser "^21.0.0"
 
+yargs@^17.3.1:
+  version "17.7.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
+  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
+  dependencies:
+    cliui "^8.0.1"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.1.1"
+
 yn@3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz"

From fbb0076fbb386aaf3b5e036b88974e0be35ff353 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 19 Jun 2023 15:51:04 +0700
Subject: [PATCH 260/354] chore: fix overview count in Public Project

---
 src/lib/pages/public-project/slug.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/pages/public-project/slug.tsx b/src/lib/pages/public-project/slug.tsx
index 997c9ba3b..e554d19d5 100644
--- a/src/lib/pages/public-project/slug.tsx
+++ b/src/lib/pages/public-project/slug.tsx
@@ -45,6 +45,10 @@ export const ProjectDetail = () => {
     scrollToTop();
   };
 
+  const overviewCount =
+    publicAccounts.length +
+    (wasm.enabled ? publicCodes.length + publicContracts.length : 0);
+
   if (isLoading) return <Loading />;
   return (
     <PageContainer>
@@ -52,11 +56,7 @@ export const ProjectDetail = () => {
       <Tabs index={tabIndex} isLazy lazyBehavior="keepMounted">
         <TabList my={6} borderBottom="1px" borderColor="gray.800">
           <CustomTab
-            count={
-              publicCodes.length +
-              publicContracts.length +
-              publicAccounts.length
-            }
+            count={overviewCount}
             onClick={() => setTabIndex(TabIndex.Overview)}
           >
             Overview

From 7cb641c8dba727f8008b16898ace3a468b28207c Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 20 Jun 2023 10:54:33 +0700
Subject: [PATCH 261/354] feat: add local osmosis network

---
 src/config/index.ts                    | 47 +++++++++++++++
 src/lib/chain-registry/localosmosis.ts | 81 ++++++++++++++++++++++++++
 src/pages/_app.tsx                     |  8 ++-
 3 files changed, 134 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/chain-registry/localosmosis.ts

diff --git a/src/config/index.ts b/src/config/index.ts
index 21560fc83..a211e8986 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -135,6 +135,53 @@ export const CHAIN_CONFIGS: ChainConfigs = {
       proposal: "https://testnet.mintscan.io/osmosis-testnet/proposals",
     },
   },
+  localosmosis: {
+    chain: "localosmosis",
+    registryChainName: "localosmosis",
+    prettyName: "Local Osmosis",
+    lcd: "http://localhost/lcd",
+    rpc: "http://localhost/rpc/",
+    indexer: "http://localhost/graphql/v1/graphql",
+    api: "http://localhost/api",
+    features: {
+      faucet: {
+        enabled: true,
+        url: "http://localhost:5005/request",
+        denom: "osmo",
+        amount: 10,
+      },
+      wasm: {
+        enabled: true,
+        storeCodeMaxFileSize: 800_000,
+        clearAdminGas: 50_000,
+      },
+      pool: {
+        enabled: false,
+      },
+      publicProject: {
+        enabled: false,
+      },
+    },
+    gas: {
+      gasPrice: {
+        tokenPerGas: 0.025,
+        denom: "uosmo",
+      },
+      gasAdjustment: 1.5,
+      maxGasLimit: 25_000_000,
+    },
+    exampleAddresses: {
+      user: "osmo14wk9zecqam9jsac7xwtf8e349ckquzzlx9k8c3" as HumanAddr,
+      contract:
+        "osmo1p0pxllmqjgl2tefy7grypt34jdpdltg3ka98n8unnl322wqps7lqtu576h" as ContractAddr,
+      validator:
+        "osmovaloper1hh0g5xf23e5zekg45cmerc97hs4n2004dy2t26" as ValidatorAddr,
+    },
+    explorerLink: {
+      validator: "https://www.mintscan.io/osmosis/validators",
+      proposal: "https://www.mintscan.io/osmosis/proposals",
+    },
+  },
 };
 
 export const PROJECT_CONSTANTS: ProjectConstants = {
diff --git a/src/lib/chain-registry/localosmosis.ts b/src/lib/chain-registry/localosmosis.ts
new file mode 100644
index 000000000..19931aca1
--- /dev/null
+++ b/src/lib/chain-registry/localosmosis.ts
@@ -0,0 +1,81 @@
+import type { Chain, AssetList } from "@chain-registry/types";
+
+export const localosmosis: Chain = {
+  $schema: "../chain.schema.json",
+  chain_name: "localosmosis",
+  status: "live",
+  network_type: "devnet",
+  pretty_name: "Local Osmosis",
+  chain_id: "localosmosis",
+  bech32_prefix: "osmo",
+  daemon_name: "osmosisd",
+  node_home: "$HOME/.osmosisd",
+  key_algos: ["secp256k1"],
+  slip44: 118,
+  fees: {
+    fee_tokens: [
+      {
+        denom: "uosmo",
+        fixed_min_gas_price: 0,
+        low_gas_price: 0.0025,
+        average_gas_price: 0.025,
+        high_gas_price: 0.04,
+      },
+    ],
+  },
+  staking: {
+    staking_tokens: [
+      {
+        denom: "uosmo",
+      },
+    ],
+  },
+  apis: {
+    rpc: [
+      {
+        address: "http://localhost/rpc/",
+      },
+    ],
+    rest: [
+      {
+        address: "http://localhost/lcd",
+      },
+    ],
+  },
+  logo_URIs: {
+    png: "https://raw.githubusercontent.com/cosmos/chain-registry/master/osmosis/images/osmosis-chain-logo.png",
+  },
+  keywords: ["devnet"],
+};
+
+export const localosmosisAsset: AssetList = {
+  $schema: "../assetlist.schema.json",
+  chain_name: "localosmosis",
+  assets: [
+    {
+      description: "The native token of Osmosis",
+      denom_units: [
+        {
+          denom: "uosmo",
+          exponent: 0,
+          aliases: [],
+        },
+        {
+          denom: "osmo",
+          exponent: 6,
+          aliases: [],
+        },
+      ],
+      base: "uosmo",
+      name: "Osmosis",
+      display: "osmo",
+      symbol: "OSMO",
+      logo_URIs: {
+        png: "https://raw.githubusercontent.com/cosmos/chain-registry/master/osmosis/images/osmo.png",
+        svg: "https://raw.githubusercontent.com/cosmos/chain-registry/master/osmosis/images/osmo.svg",
+      },
+      coingecko_id: "osmosis",
+      keywords: ["dex", "staking"],
+    },
+  ],
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 4b0a5d525..b3fd3f8a9 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -12,6 +12,10 @@ import Script from "next/script";
 
 import { CHAIN_CONFIGS } from "config";
 import { AppProvider } from "lib/app-provider/contexts/app";
+import {
+  localosmosis,
+  localosmosisAsset,
+} from "lib/chain-registry/localosmosis";
 import { Chakra } from "lib/components/Chakra";
 import { MobileGuard } from "lib/components/MobileGuard";
 import { CelatoneSeo } from "lib/components/Seo";
@@ -72,8 +76,8 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
 
       <QueryClientProvider client={queryClient}>
         <ChainProvider
-          chains={chains}
-          assetLists={assets}
+          chains={[...chains, localosmosis]}
+          assetLists={[...assets, localosmosisAsset]}
           wallets={wallets}
           endpointOptions={{
             isLazy: true,

From 1d39bcd9be210f8ea40c1d3932b37ca6432718cf Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 21 Jun 2023 11:51:50 +0700
Subject: [PATCH 262/354] chore: fixing

---
 src/config/index.ts                    |  8 ++++----
 src/lib/chain-registry/localosmosis.ts |  8 ++++----
 src/lib/services/delegationService.ts  | 12 ++++++------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/config/index.ts b/src/config/index.ts
index a211e8986..e7512ee1d 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -136,12 +136,12 @@ export const CHAIN_CONFIGS: ChainConfigs = {
     },
   },
   localosmosis: {
-    chain: "localosmosis",
+    chain: "osmosis",
     registryChainName: "localosmosis",
     prettyName: "Local Osmosis",
-    lcd: "http://localhost/lcd",
+    lcd: "http://localhost/rest",
     rpc: "http://localhost/rpc/",
-    indexer: "http://localhost/graphql/v1/graphql",
+    indexer: "http://localhost/hasura/v1/graphql",
     api: "http://localhost/api",
     features: {
       faucet: {
@@ -164,7 +164,7 @@ export const CHAIN_CONFIGS: ChainConfigs = {
     },
     gas: {
       gasPrice: {
-        tokenPerGas: 0.025,
+        tokenPerGas: 0.25,
         denom: "uosmo",
       },
       gasAdjustment: 1.5,
diff --git a/src/lib/chain-registry/localosmosis.ts b/src/lib/chain-registry/localosmosis.ts
index 19931aca1..f91ce4652 100644
--- a/src/lib/chain-registry/localosmosis.ts
+++ b/src/lib/chain-registry/localosmosis.ts
@@ -16,10 +16,10 @@ export const localosmosis: Chain = {
     fee_tokens: [
       {
         denom: "uosmo",
-        fixed_min_gas_price: 0,
-        low_gas_price: 0.0025,
+        fixed_min_gas_price: 0.025,
+        low_gas_price: 0.025,
         average_gas_price: 0.025,
-        high_gas_price: 0.04,
+        high_gas_price: 0.025,
       },
     ],
   },
@@ -38,7 +38,7 @@ export const localosmosis: Chain = {
     ],
     rest: [
       {
-        address: "http://localhost/lcd",
+        address: "http://localhost/rest",
       },
     ],
   },
diff --git a/src/lib/services/delegationService.ts b/src/lib/services/delegationService.ts
index 697aba33e..319abd297 100644
--- a/src/lib/services/delegationService.ts
+++ b/src/lib/services/delegationService.ts
@@ -31,7 +31,7 @@ export const useStakingParams = (): UseQueryResult<RawStakingParams> => {
   );
 
   return useQuery(["query", "staking_params", lcdEndpoint], queryFn, {
-    retry: 1,
+    retry: 3,
     refetchOnWindowFocus: false,
   });
 };
@@ -47,7 +47,7 @@ export const useDelegations = (
   );
 
   return useQuery(["query", "delegations", lcdEndpoint, address], queryFn, {
-    retry: 1,
+    retry: 3,
     refetchOnWindowFocus: false,
   });
 };
@@ -63,7 +63,7 @@ export const useUnbondings = (
   );
 
   return useQuery(["query", "unbondings", lcdEndpoint, address], queryFn, {
-    retry: 1,
+    retry: 3,
     refetchOnWindowFocus: false,
   });
 };
@@ -82,7 +82,7 @@ export const useDelegationRewards = (
     ["query", "delegation_rewards", lcdEndpoint, address],
     queryFn,
     {
-      retry: 1,
+      retry: 3,
       refetchOnWindowFocus: false,
     }
   );
@@ -99,7 +99,7 @@ export const useRedelegations = (
   );
 
   return useQuery(["query", "redelegations", lcdEndpoint, address], queryFn, {
-    retry: 1,
+    retry: 3,
     refetchOnWindowFocus: false,
   });
 };
@@ -115,7 +115,7 @@ export const useCommission = (
   );
 
   return useQuery(["query", "commission", lcdEndpoint, address], queryFn, {
-    retry: 1,
+    retry: 3,
     refetchOnWindowFocus: false,
   });
 };

From 3f5f5949fd18a92d6426ab7bb442d4005a0a35e5 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 21 Jun 2023 12:03:38 +0700
Subject: [PATCH 263/354] chore: remove retry

---
 src/lib/services/delegationService.ts | 6 ------
 src/lib/services/validatorService.ts  | 1 -
 2 files changed, 7 deletions(-)

diff --git a/src/lib/services/delegationService.ts b/src/lib/services/delegationService.ts
index 319abd297..b15091407 100644
--- a/src/lib/services/delegationService.ts
+++ b/src/lib/services/delegationService.ts
@@ -31,7 +31,6 @@ export const useStakingParams = (): UseQueryResult<RawStakingParams> => {
   );
 
   return useQuery(["query", "staking_params", lcdEndpoint], queryFn, {
-    retry: 3,
     refetchOnWindowFocus: false,
   });
 };
@@ -47,7 +46,6 @@ export const useDelegations = (
   );
 
   return useQuery(["query", "delegations", lcdEndpoint, address], queryFn, {
-    retry: 3,
     refetchOnWindowFocus: false,
   });
 };
@@ -63,7 +61,6 @@ export const useUnbondings = (
   );
 
   return useQuery(["query", "unbondings", lcdEndpoint, address], queryFn, {
-    retry: 3,
     refetchOnWindowFocus: false,
   });
 };
@@ -82,7 +79,6 @@ export const useDelegationRewards = (
     ["query", "delegation_rewards", lcdEndpoint, address],
     queryFn,
     {
-      retry: 3,
       refetchOnWindowFocus: false,
     }
   );
@@ -99,7 +95,6 @@ export const useRedelegations = (
   );
 
   return useQuery(["query", "redelegations", lcdEndpoint, address], queryFn, {
-    retry: 3,
     refetchOnWindowFocus: false,
   });
 };
@@ -115,7 +110,6 @@ export const useCommission = (
   );
 
   return useQuery(["query", "commission", lcdEndpoint, address], queryFn, {
-    retry: 3,
     refetchOnWindowFocus: false,
   });
 };
diff --git a/src/lib/services/validatorService.ts b/src/lib/services/validatorService.ts
index 25c5f1d81..804aa18e5 100644
--- a/src/lib/services/validatorService.ts
+++ b/src/lib/services/validatorService.ts
@@ -18,7 +18,6 @@ export const useValidators = (): UseQueryResult<
   );
 
   return useQuery(["query", "validators", lcdEndpoint], queryFn, {
-    retry: 1,
     refetchOnWindowFocus: false,
   });
 };

From dbea91c63354987ef97aff8e38fec8e62047d4b4 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 22 Jun 2023 11:55:35 +0700
Subject: [PATCH 264/354] feat: add cicd jest

---
 .github/workflows/{main.yml => changelog.yml} |  2 +-
 .github/workflows/jest.yml                    | 17 +++++++++++++++++
 package.json                                  |  1 +
 3 files changed, 19 insertions(+), 1 deletion(-)
 rename .github/workflows/{main.yml => changelog.yml} (95%)
 create mode 100644 .github/workflows/jest.yml

diff --git a/.github/workflows/main.yml b/.github/workflows/changelog.yml
similarity index 95%
rename from .github/workflows/main.yml
rename to .github/workflows/changelog.yml
index e5a6ced5d..eb0338232 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/changelog.yml
@@ -1,4 +1,4 @@
-name: CheckChangelog
+name: Check Changelog
 on:
   pull_request:
     types: [assigned, opened, synchronize, reopened, labeled, unlabeled]
diff --git a/.github/workflows/jest.yml b/.github/workflows/jest.yml
new file mode 100644
index 000000000..94185a819
--- /dev/null
+++ b/.github/workflows/jest.yml
@@ -0,0 +1,17 @@
+name: Unit Tests
+on:
+  pull_request:
+    types: [assigned, opened, synchronize, reopened, labeled, unlabeled]
+    branches:
+      - main
+      - develop
+
+jobs:
+  Jest:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Run Tests
+        run: |
+          yarn 
+          yarn test
diff --git a/package.json b/package.json
index 278b1f148..1075bdaef 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "test": "jest",
     "postbuild": "next-sitemap --config next-sitemap.config.js",
     "start": "next start",
     "lint": "next lint",

From ad1651386e3809ba52ec4ffda1de5bf6e56ae6c6 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 22 Jun 2023 11:59:15 +0700
Subject: [PATCH 265/354] fix: fallback explorer link for validator/proposal
 and gov params token symbol

---
 CHANGELOG.md                                      |  1 +
 src/config/index.ts                               |  4 ++--
 src/lib/components/EstimatedFeeRender.tsx         |  6 +++++-
 src/lib/components/ExplorerLink.tsx               | 15 +++++++++++----
 .../table/proposals/ProposalsTableRow.tsx         |  7 +++++--
 src/lib/components/tx/modal/ButtonSection.tsx     | 13 +++++++++++--
 src/lib/services/contractService.ts               |  2 +-
 src/lib/services/proposalService.ts               |  1 +
 8 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8d4466e5b..45fbcb301 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -77,6 +77,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#400](https://github.com/alleslabs/celatone-frontend/pull/400) Fallback explorer link for validator/proposal and gov params token symbol
 - [#395](https://github.com/alleslabs/celatone-frontend/pull/395) Disable wasm related tabs on the account detail page
 - [#392](https://github.com/alleslabs/celatone-frontend/pull/392) Fix format denom function
 - [#390](https://github.com/alleslabs/celatone-frontend/pull/390) Fix minor styling
diff --git a/src/config/index.ts b/src/config/index.ts
index e7512ee1d..441dfbd35 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -178,8 +178,8 @@ export const CHAIN_CONFIGS: ChainConfigs = {
         "osmovaloper1hh0g5xf23e5zekg45cmerc97hs4n2004dy2t26" as ValidatorAddr,
     },
     explorerLink: {
-      validator: "https://www.mintscan.io/osmosis/validators",
-      proposal: "https://www.mintscan.io/osmosis/proposals",
+      validator: "",
+      proposal: "",
     },
   },
 };
diff --git a/src/lib/components/EstimatedFeeRender.tsx b/src/lib/components/EstimatedFeeRender.tsx
index d902bbe1a..06285cc68 100644
--- a/src/lib/components/EstimatedFeeRender.tsx
+++ b/src/lib/components/EstimatedFeeRender.tsx
@@ -26,7 +26,11 @@ export const EstimatedFeeRender = ({
   const chainAssetInfo = getAssetInfo(coin.denom);
   return (
     <>
-      {formatBalanceWithDenom({ coin, precision: chainAssetInfo?.precision })}
+      {formatBalanceWithDenom({
+        coin,
+        precision: chainAssetInfo?.precision,
+        symbol: chainAssetInfo?.symbol,
+      })}
     </>
   );
 };
diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
index 3280d142e..0fec98125 100644
--- a/src/lib/components/ExplorerLink.tsx
+++ b/src/lib/components/ExplorerLink.tsx
@@ -5,6 +5,7 @@ import type { ExplorerConfig } from "config/types";
 import type { AddressReturnType } from "lib/app-provider";
 import { useCelatoneApp } from "lib/app-provider/contexts";
 import { useCurrentChain } from "lib/app-provider/hooks/useCurrentChain";
+import { useLCDEndpoint } from "lib/app-provider/hooks/useLCDEndpoint";
 import { AmpTrackMintscan } from "lib/services/amplitude";
 import type { Option } from "lib/types";
 import { truncate } from "lib/utils";
@@ -35,7 +36,8 @@ interface ExplorerLinkProps extends BoxProps {
 const getNavigationUrl = (
   type: ExplorerLinkProps["type"],
   explorerConfig: ExplorerConfig,
-  value: string
+  value: string,
+  lcdEndpoint: string
 ) => {
   let url = "";
   switch (type) {
@@ -49,7 +51,9 @@ const getNavigationUrl = (
       url = "/accounts";
       break;
     case "validator_address":
-      url = explorerConfig.validator;
+      url =
+        explorerConfig.validator ||
+        `${lcdEndpoint}/cosmos/staking/v1beta1/validators`;
       break;
     case "code_id":
       url = "/codes";
@@ -58,7 +62,9 @@ const getNavigationUrl = (
       url = "/blocks";
       break;
     case "proposal_id":
-      url = explorerConfig.proposal;
+      url =
+        explorerConfig.proposal ||
+        `${lcdEndpoint}/cosmos/gov/v1beta1/proposals`;
       break;
     case "invalid_address":
       return "";
@@ -153,6 +159,7 @@ export const ExplorerLink = ({
   ...componentProps
 }: ExplorerLinkProps) => {
   const { address } = useCurrentChain();
+  const lcdEndpoint = useLCDEndpoint();
   const {
     chainConfig: { explorerLink: explorerConfig },
   } = useCelatoneApp();
@@ -165,7 +172,7 @@ export const ExplorerLink = ({
     type === "block_height";
 
   const [hrefLink, textValue] = [
-    getNavigationUrl(type, explorerConfig, copyValue || value),
+    getNavigationUrl(type, explorerConfig, copyValue || value, lcdEndpoint),
     getValueText(value === address, textFormat === "truncate", value),
   ];
 
diff --git a/src/lib/components/table/proposals/ProposalsTableRow.tsx b/src/lib/components/table/proposals/ProposalsTableRow.tsx
index 58767b859..423c0d309 100644
--- a/src/lib/components/table/proposals/ProposalsTableRow.tsx
+++ b/src/lib/components/table/proposals/ProposalsTableRow.tsx
@@ -2,7 +2,7 @@ import type { DividerProps, GridProps } from "@chakra-ui/react";
 import { Grid } from "@chakra-ui/react";
 
 import { TableRow, TableRowFreeze } from "../tableComponents";
-import { useCelatoneApp } from "lib/app-provider";
+import { useCelatoneApp, useLCDEndpoint } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { StopPropagationBox } from "lib/components/StopPropagationBox";
 import { Proposer } from "lib/components/table/proposals/Proposer";
@@ -32,6 +32,7 @@ export const ProposalsTableRow = ({
       explorerLink: { proposal: explorerProposal },
     },
   } = useCelatoneApp();
+  const lcdEndpoint = useLCDEndpoint();
 
   // TODO - Revisit split columnsWidth
   const columnsWidth = templateColumns?.toString().split(" ");
@@ -59,7 +60,9 @@ export const ProposalsTableRow = ({
                 status: proposal.status,
               });
               openNewTab(
-                `${explorerProposal}/${proposal.proposalId.toString()}`
+                explorerProposal
+                  ? `${explorerProposal}/${proposal.proposalId.toString()}`
+                  : `${lcdEndpoint}/cosmos/gov/v1beta1/proposals/${proposal.proposalId.toString()}`
               );
             }
           : undefined
diff --git a/src/lib/components/tx/modal/ButtonSection.tsx b/src/lib/components/tx/modal/ButtonSection.tsx
index c305e7a03..171bb934d 100644
--- a/src/lib/components/tx/modal/ButtonSection.tsx
+++ b/src/lib/components/tx/modal/ButtonSection.tsx
@@ -1,7 +1,11 @@
 import { Button } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 
-import { useInternalNavigate, useCelatoneApp } from "lib/app-provider";
+import {
+  useInternalNavigate,
+  useCelatoneApp,
+  useLCDEndpoint,
+} from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { openNewTab, useOpenTxTab } from "lib/hooks";
 import type { ActionVariant, TxReceipt } from "lib/types";
@@ -26,6 +30,7 @@ export const ButtonSection = ({
       explorerLink: { proposal: explorerProposal },
     },
   } = useCelatoneApp();
+  const lcdEndpoint = useLCDEndpoint();
 
   const openTxExplorer = () => {
     const txHash = receipts
@@ -39,7 +44,11 @@ export const ButtonSection = ({
     const proposalId = receipts
       .find((r) => r.title === "Proposal ID")
       ?.value?.toString();
-    openNewTab(`${explorerProposal}/${proposalId}`);
+    openNewTab(
+      explorerProposal
+        ? `${explorerProposal}/${proposalId}`
+        : `${lcdEndpoint}/cosmos/gov/v1beta1/proposals/${proposalId}`
+    );
     onClose?.();
   };
 
diff --git a/src/lib/services/contractService.ts b/src/lib/services/contractService.ts
index 103c28d8e..ab9f24447 100644
--- a/src/lib/services/contractService.ts
+++ b/src/lib/services/contractService.ts
@@ -121,7 +121,7 @@ export const useInstantiatedListByUserQuery = (
   return useQuery(
     ["instantiated_list_by_user", walletAddr, indexerGraphClient],
     queryFn,
-    { enabled: !!walletAddr }
+    { enabled: !!walletAddr, refetchOnWindowFocus: false }
   );
 };
 
diff --git a/src/lib/services/proposalService.ts b/src/lib/services/proposalService.ts
index 78d695d50..2d7fbad79 100644
--- a/src/lib/services/proposalService.ts
+++ b/src/lib/services/proposalService.ts
@@ -330,6 +330,7 @@ export const useGovParams = (): UseQueryResult<GovParams> => {
               formattedToken: formatBalanceWithDenom({
                 coin: minDepositParam,
                 precision: assetInfo?.precision,
+                symbol: assetInfo?.symbol,
               }),
               precision: assetInfo?.precision ?? 0,
             },

From 14a76f428f0b7463599ad9f8792fb61036f6f4ff Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 22 Jun 2023 13:23:22 +0700
Subject: [PATCH 266/354] refactor: retrieve link from getNavigationUrl

---
 src/lib/components/ExplorerLink.tsx               |  2 +-
 .../table/proposals/ProposalsTableRow.tsx         | 15 ++++++++-------
 src/lib/components/tx/modal/ButtonSection.tsx     | 14 ++++++++------
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
index 0fec98125..3db7411a1 100644
--- a/src/lib/components/ExplorerLink.tsx
+++ b/src/lib/components/ExplorerLink.tsx
@@ -33,7 +33,7 @@ interface ExplorerLinkProps extends BoxProps {
   openNewTab?: boolean;
 }
 
-const getNavigationUrl = (
+export const getNavigationUrl = (
   type: ExplorerLinkProps["type"],
   explorerConfig: ExplorerConfig,
   value: string,
diff --git a/src/lib/components/table/proposals/ProposalsTableRow.tsx b/src/lib/components/table/proposals/ProposalsTableRow.tsx
index 423c0d309..a53ace897 100644
--- a/src/lib/components/table/proposals/ProposalsTableRow.tsx
+++ b/src/lib/components/table/proposals/ProposalsTableRow.tsx
@@ -3,7 +3,7 @@ import { Grid } from "@chakra-ui/react";
 
 import { TableRow, TableRowFreeze } from "../tableComponents";
 import { useCelatoneApp, useLCDEndpoint } from "lib/app-provider";
-import { ExplorerLink } from "lib/components/ExplorerLink";
+import { ExplorerLink, getNavigationUrl } from "lib/components/ExplorerLink";
 import { StopPropagationBox } from "lib/components/StopPropagationBox";
 import { Proposer } from "lib/components/table/proposals/Proposer";
 import { openNewTab } from "lib/hooks";
@@ -28,9 +28,7 @@ export const ProposalsTableRow = ({
   boxShadow,
 }: ProposalsTableRowProps) => {
   const {
-    chainConfig: {
-      explorerLink: { proposal: explorerProposal },
-    },
+    chainConfig: { explorerLink },
   } = useCelatoneApp();
   const lcdEndpoint = useLCDEndpoint();
 
@@ -60,9 +58,12 @@ export const ProposalsTableRow = ({
                 status: proposal.status,
               });
               openNewTab(
-                explorerProposal
-                  ? `${explorerProposal}/${proposal.proposalId.toString()}`
-                  : `${lcdEndpoint}/cosmos/gov/v1beta1/proposals/${proposal.proposalId.toString()}`
+                getNavigationUrl(
+                  "proposal_id",
+                  explorerLink,
+                  proposal.proposalId.toString(),
+                  lcdEndpoint
+                )
               );
             }
           : undefined
diff --git a/src/lib/components/tx/modal/ButtonSection.tsx b/src/lib/components/tx/modal/ButtonSection.tsx
index 171bb934d..8771688f1 100644
--- a/src/lib/components/tx/modal/ButtonSection.tsx
+++ b/src/lib/components/tx/modal/ButtonSection.tsx
@@ -6,6 +6,7 @@ import {
   useCelatoneApp,
   useLCDEndpoint,
 } from "lib/app-provider";
+import { getNavigationUrl } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { openNewTab, useOpenTxTab } from "lib/hooks";
 import type { ActionVariant, TxReceipt } from "lib/types";
@@ -26,9 +27,7 @@ export const ButtonSection = ({
   const navigate = useInternalNavigate();
   const openTxTab = useOpenTxTab("tx-page");
   const {
-    chainConfig: {
-      explorerLink: { proposal: explorerProposal },
-    },
+    chainConfig: { explorerLink },
   } = useCelatoneApp();
   const lcdEndpoint = useLCDEndpoint();
 
@@ -45,9 +44,12 @@ export const ButtonSection = ({
       .find((r) => r.title === "Proposal ID")
       ?.value?.toString();
     openNewTab(
-      explorerProposal
-        ? `${explorerProposal}/${proposalId}`
-        : `${lcdEndpoint}/cosmos/gov/v1beta1/proposals/${proposalId}`
+      getNavigationUrl(
+        "proposal_id",
+        explorerLink,
+        proposalId ?? "",
+        lcdEndpoint
+      )
     );
     onClose?.();
   };

From 0bf815bf1a737705341f239a0279d888194afca3 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 22 Jun 2023 16:16:16 +0700
Subject: [PATCH 267/354] feat: permission in code select

---
 CHANGELOG.md                                  |  1 +
 src/lib/components/select-code/CodeSelect.tsx | 28 ++++++++++++++-----
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 64b79fb7a..5ee98a30d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -48,6 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#401](https://github.com/alleslabs/celatone-frontend/pull/401) Add permission chip to code selection box
 - [#386](https://github.com/alleslabs/celatone-frontend/pull/386) Handle uppercase address
 - [#382](https://github.com/alleslabs/celatone-frontend/pull/382) Add pool manager v15 msgs to tx details
 - [#371](https://github.com/alleslabs/celatone-frontend/pull/371) Refactor assign me component and fix color in redelegation page
diff --git a/src/lib/components/select-code/CodeSelect.tsx b/src/lib/components/select-code/CodeSelect.tsx
index 654cc8243..c381e9e4e 100644
--- a/src/lib/components/select-code/CodeSelect.tsx
+++ b/src/lib/components/select-code/CodeSelect.tsx
@@ -1,10 +1,13 @@
 import type { FlexProps } from "@chakra-ui/react";
 import { Flex, Text } from "@chakra-ui/react";
 
+import { DotSeparator } from "../DotSeparator";
+import { PermissionChip } from "../PermissionChip";
 import type { FormStatus } from "lib/components/forms";
 import { UploadIcon } from "lib/components/icon";
-import { useUserKey } from "lib/hooks";
 import { useCodeStore } from "lib/providers/store";
+import { useCodeDataByCodeId } from "lib/services/codeService";
+import { AccessConfigPermission } from "lib/types";
 
 import { CodeSelectDrawerButton } from "./CodeSelectDrawerButton";
 
@@ -20,9 +23,9 @@ export const CodeSelect = ({
   status,
   ...componentProps
 }: CodeSelectProps) => {
-  const { codeInfo } = useCodeStore();
-  const userKey = useUserKey();
-  const name = codeInfo?.[userKey]?.[Number(codeId)]?.name;
+  const { getCodeLocalInfo } = useCodeStore();
+  const name = getCodeLocalInfo(Number(codeId))?.name;
+  const { data: codeInfo } = useCodeDataByCodeId(Number(codeId));
 
   const isError = status.state === "error";
   return (
@@ -49,9 +52,19 @@ export const CodeSelect = ({
             >
               {name ?? "Untitled Name"}
             </Text>
-            <Text variant="body2" color="text.dark">
-              Code ID {codeId}
-            </Text>
+            <Flex alignItems="center" gap={2}>
+              <Text variant="body2" color="text.dark">
+                Code ID {codeId}
+              </Text>
+              <DotSeparator />
+              <PermissionChip
+                instantiatePermission={
+                  codeInfo?.instantiatePermission ??
+                  AccessConfigPermission.UNKNOWN
+                }
+                permissionAddresses={codeInfo?.permissionAddresses ?? []}
+              />
+            </Flex>
           </Flex>
         ) : (
           <Text variant="body1" fontWeight={500}>
@@ -63,6 +76,7 @@ export const CodeSelect = ({
           buttonText={codeId ? "Change Code" : "Select Code"}
         />
       </Flex>
+
       {isError && (
         <Text variant="body3" color="error.main" mt={1} ml={3}>
           {status.message}

From f7ffbbf831cfeec4e15e6cea56e21affcaca7d0b Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 22 Jun 2023 17:59:25 +0700
Subject: [PATCH 268/354] refactor: remove useSimulateFee

---
 CHANGELOG.md                                  |   1 +
 src/lib/app-provider/hooks/index.ts           |   1 -
 src/lib/app-provider/hooks/useSimulateFee.ts  |  34 ----
 src/lib/components/button/ResendButton.tsx    |  47 +++--
 src/lib/pages/instantiate/completed.tsx       |   2 +-
 .../instantiate/component/FailedModal.tsx     |  60 ------
 src/lib/pages/instantiate/component/index.ts  |   2 +-
 src/lib/pages/instantiate/instantiate.tsx     | 188 +++++++++++-------
 .../migrate/components/MigrateContract.tsx    |  11 +-
 9 files changed, 149 insertions(+), 197 deletions(-)
 delete mode 100644 src/lib/app-provider/hooks/useSimulateFee.ts
 delete mode 100644 src/lib/pages/instantiate/component/FailedModal.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 64b79fb7a..32ae3d53e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -48,6 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#402](https://github.com/alleslabs/celatone-frontend/pull/402) Remove the old redundant useSimulateFee hook
 - [#386](https://github.com/alleslabs/celatone-frontend/pull/386) Handle uppercase address
 - [#382](https://github.com/alleslabs/celatone-frontend/pull/382) Add pool manager v15 msgs to tx details
 - [#371](https://github.com/alleslabs/celatone-frontend/pull/371) Refactor assign me component and fix color in redelegation page
diff --git a/src/lib/app-provider/hooks/index.ts b/src/lib/app-provider/hooks/index.ts
index b3557c30d..5b50039d7 100644
--- a/src/lib/app-provider/hooks/index.ts
+++ b/src/lib/app-provider/hooks/index.ts
@@ -10,7 +10,6 @@ export * from "./useMediaQuery";
 export * from "./useNetworkChange";
 export * from "./useRestrictedInput";
 export * from "./useSelectChain";
-export * from "./useSimulateFee";
 export * from "./useTokensInfo";
 export * from "./useCurrentNetwork";
 export * from "./useChainRecordAsset";
diff --git a/src/lib/app-provider/hooks/useSimulateFee.ts b/src/lib/app-provider/hooks/useSimulateFee.ts
deleted file mode 100644
index f8cb3e918..000000000
--- a/src/lib/app-provider/hooks/useSimulateFee.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useWallet } from "@cosmos-kit/react";
-import { useCallback, useState } from "react";
-
-import type { Gas } from "lib/types";
-import type { ComposedMsg } from "lib/types/tx";
-
-// TODO: remove this hook after migrating to useQuery version
-export const useSimulateFee = () => {
-  const { address, getCosmWasmClient } = useWallet();
-
-  const [loading, setLoading] = useState(false);
-
-  const simulate = useCallback(
-    async (messages: ComposedMsg[], memo?: string) => {
-      setLoading(true);
-      const client = await getCosmWasmClient();
-      if (!client || !address) {
-        setLoading(false);
-        return undefined;
-      }
-      try {
-        const fee = (await client.simulate(address, messages, memo)) as Gas;
-        setLoading(false);
-        return fee;
-      } catch (e) {
-        setLoading(false);
-        throw e;
-      }
-    },
-    [address, getCosmWasmClient, setLoading]
-  );
-
-  return { simulate, loading };
-};
diff --git a/src/lib/components/button/ResendButton.tsx b/src/lib/components/button/ResendButton.tsx
index c95cf014e..50b7d9ea8 100644
--- a/src/lib/components/button/ResendButton.tsx
+++ b/src/lib/components/button/ResendButton.tsx
@@ -2,10 +2,14 @@ import { Button } from "@chakra-ui/react";
 import type { EncodeObject } from "@cosmjs/proto-signing";
 import { useCallback, useState } from "react";
 
-import { useFabricateFee, useResendTx, useSimulateFee } from "lib/app-provider";
+import {
+  useFabricateFee,
+  useResendTx,
+  useSimulateFeeQuery,
+} from "lib/app-provider";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import type { Message, Msg } from "lib/types";
+import type { Gas, Message, Msg, Option } from "lib/types";
 import { camelToSnake, encode } from "lib/utils";
 
 interface ResendButtonProps {
@@ -29,27 +33,34 @@ const formatMsgs = (messages: Message[]) =>
 
 export const ResendButton = ({ messages }: ResendButtonProps) => {
   const fabricateFee = useFabricateFee();
-  const { simulate } = useSimulateFee();
   const resendTx = useResendTx();
   const { broadcast } = useTxBroadcast();
 
   const [isProcessing, setIsProcessing] = useState(false);
+  const composedMsgs = formatMsgs(messages);
 
-  const proceed = useCallback(async () => {
-    AmpTrack(AmpEvent.ACTION_RESEND);
-    const formatedMsgs = formatMsgs(messages);
-    const estimatedGasUsed = await simulate(formatedMsgs);
+  const proceed = useCallback(
+    async (estimatedGasUsed: Option<Gas<number>>) => {
+      AmpTrack(AmpEvent.ACTION_RESEND);
+      const stream = await resendTx({
+        onTxSucceed: () => setIsProcessing(false),
+        onTxFailed: () => setIsProcessing(false),
+        estimatedFee: estimatedGasUsed
+          ? fabricateFee(estimatedGasUsed)
+          : undefined,
+        messages: composedMsgs,
+      });
+      if (stream) broadcast(stream);
+    },
+    [broadcast, composedMsgs, fabricateFee, resendTx]
+  );
 
-    const stream = await resendTx({
-      onTxSucceed: () => setIsProcessing(false),
-      onTxFailed: () => setIsProcessing(false),
-      estimatedFee: estimatedGasUsed
-        ? fabricateFee(estimatedGasUsed)
-        : undefined,
-      messages: formatedMsgs,
-    });
-    if (stream) broadcast(stream);
-  }, [broadcast, fabricateFee, messages, resendTx, simulate]);
+  const { isFetching: isSimulating } = useSimulateFeeQuery({
+    enabled: isProcessing,
+    messages: composedMsgs,
+    onSuccess: (estimatedGasUsed) => proceed(estimatedGasUsed),
+    onError: () => setIsProcessing(false),
+  });
 
   return (
     <Button
@@ -59,8 +70,8 @@ export const ResendButton = ({ messages }: ResendButtonProps) => {
       onClick={(e) => {
         e.stopPropagation();
         setIsProcessing(true);
-        proceed();
       }}
+      isLoading={isSimulating}
       isDisabled={isProcessing}
     >
       Resend
diff --git a/src/lib/pages/instantiate/completed.tsx b/src/lib/pages/instantiate/completed.tsx
index 2eedd0a29..aa08474d1 100644
--- a/src/lib/pages/instantiate/completed.tsx
+++ b/src/lib/pages/instantiate/completed.tsx
@@ -9,7 +9,7 @@ import type { ContractAddr } from "lib/types";
 import { formatUFee } from "lib/utils";
 
 import type { InstantiateTxInfo } from ".";
-import { InstantiateOffChainForm } from "./component/InstantiateOffchainForm";
+import { InstantiateOffChainForm } from "./component";
 
 interface CompletedProps {
   txInfo: InstantiateTxInfo;
diff --git a/src/lib/pages/instantiate/component/FailedModal.tsx b/src/lib/pages/instantiate/component/FailedModal.tsx
deleted file mode 100644
index ea1fedf3c..000000000
--- a/src/lib/pages/instantiate/component/FailedModal.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalCloseButton,
-  ModalBody,
-  ModalFooter,
-  Button,
-  Box,
-  Text,
-  Flex,
-  Heading,
-} from "@chakra-ui/react";
-
-import { CopyButton } from "lib/components/copy";
-import { CustomIcon } from "lib/components/icon";
-
-interface FailedModalProps {
-  errorLog: string;
-  onClose: () => void;
-}
-
-export const FailedModal = ({ errorLog, onClose }: FailedModalProps) => (
-  <Modal isOpen onClose={onClose} size="4xl" isCentered>
-    <ModalOverlay />
-    <ModalContent w="600px">
-      <ModalHeader>
-        <Flex gap={3} align="center">
-          <CustomIcon
-            name="alert-circle-solid"
-            color="error.light"
-            boxSize={5}
-          />
-          <Heading as="h5" variant="h5">
-            Failed to instantiate
-          </Heading>
-        </Flex>
-      </ModalHeader>
-      <ModalCloseButton />
-      <ModalBody>
-        Something went wrong. Here are the error logs.
-        <Box bg="background.main" borderRadius="8px" p={2} mt={4}>
-          <Text>{errorLog}</Text>
-        </Box>
-      </ModalBody>
-
-      <ModalFooter gap={2}>
-        <CopyButton
-          value={errorLog}
-          size="md"
-          amptrackSection="tx_modal_fail_rawlog"
-        />
-        <Button variant="outline-primary" onClick={onClose}>
-          Close
-        </Button>
-      </ModalFooter>
-    </ModalContent>
-  </Modal>
-);
diff --git a/src/lib/pages/instantiate/component/index.ts b/src/lib/pages/instantiate/component/index.ts
index 1f544d6f6..0420bd267 100644
--- a/src/lib/pages/instantiate/component/index.ts
+++ b/src/lib/pages/instantiate/component/index.ts
@@ -1,2 +1,2 @@
-export * from "./FailedModal";
 export * from "./Footer";
+export * from "./InstantiateOffchainForm";
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index 5b7683ccd..f4712ae17 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -1,5 +1,6 @@
-import { Heading, Text } from "@chakra-ui/react";
+import { Flex, Heading, Text } from "@chakra-ui/react";
 import type { InstantiateResult } from "@cosmjs/cosmwasm-stargate";
+import type { StdFee } from "@cosmjs/stargate";
 import { useWallet } from "@cosmos-kit/react";
 import { useQuery } from "@tanstack/react-query";
 import Long from "long";
@@ -9,20 +10,22 @@ import { useForm } from "react-hook-form";
 
 import {
   useFabricateFee,
-  useSimulateFee,
   useInstantiateTx,
   useCelatoneApp,
   useLCDEndpoint,
   useValidateAddress,
+  useSimulateFeeQuery,
 } from "lib/app-provider";
 import { AssignMe } from "lib/components/AssignMe";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
+import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
 import type { FormStatus } from "lib/components/forms";
 import { ControllerInput } from "lib/components/forms";
 import { AttachFund } from "lib/components/fund";
 import { defaultAsset, defaultAssetJsonStr } from "lib/components/fund/data";
 import type { AttachFundsState } from "lib/components/fund/types";
 import { AttachFundsType } from "lib/components/fund/types";
+import { CustomIcon } from "lib/components/icon";
 import JsonInput from "lib/components/json/JsonInput";
 import { CodeSelectSection } from "lib/components/select-code";
 import { Stepper } from "lib/components/stepper";
@@ -35,7 +38,7 @@ import {
   AmpTrackToInstantiate,
 } from "lib/services/amplitude";
 import { getCodeIdInfo } from "lib/services/code";
-import type { HumanAddr } from "lib/types";
+import type { ComposedMsg, HumanAddr } from "lib/types";
 import { AccessConfigPermission, MsgType } from "lib/types";
 import {
   composeMsg,
@@ -45,7 +48,7 @@ import {
   libDecode,
 } from "lib/utils";
 
-import { FailedModal, Footer } from "./component";
+import { Footer } from "./component";
 import type { InstantiateRedoMsg } from "./types";
 
 interface InstantiatePageState {
@@ -72,7 +75,6 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   const { address = "" } = useWallet();
   const endpoint = useLCDEndpoint();
   const postInstantiateTx = useInstantiateTx();
-  const { simulate } = useSimulateFee();
   const fabricateFee = useFabricateFee();
   const { broadcast } = useTxBroadcast();
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
@@ -91,7 +93,6 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
     formState: { errors: formErrors },
     setValue,
     watch,
-    handleSubmit,
   } = useForm<InstantiatePageState>({
     mode: "all",
     defaultValues: {
@@ -99,16 +100,9 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
       label: "",
       adminAddress: "",
       initMsg: "",
-      simulateError: "",
     },
   });
-
-  const {
-    codeId,
-    adminAddress: watchAdminAddress,
-    initMsg: watchInitMsg,
-    simulateError,
-  } = watch();
+  const { codeId, label, adminAddress, initMsg } = watch();
 
   const {
     control: assetsControl,
@@ -122,20 +116,20 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
       attachFundsOption: AttachFundsType.ATTACH_FUNDS_NULL,
     },
   });
-
   const { assetsSelect, assetsJsonStr, attachFundsOption } = watchAssets();
 
-  const disableInstantiate = useMemo(() => {
-    return (
-      !codeId ||
-      !address ||
-      !!jsonValidate(watchInitMsg) ||
-      Object.keys(formErrors).length > 0 ||
-      status.state !== "success"
-    );
-    // formErrors change doesnt trigger this effect
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [codeId, address, watchInitMsg, Object.keys(formErrors), status.state]);
+  const [composedTxMsg, setComposedTxMsg] = useState<ComposedMsg[]>([]);
+  const [estimatedFee, setEstimatedFee] = useState<StdFee>();
+  const [simulateError, setSimulateError] = useState("");
+
+  const enableInstantiate = useMemo(
+    () =>
+      !!address &&
+      codeId.length > 0 &&
+      jsonValidate(initMsg) === null &&
+      status.state === "success",
+    [address, codeId.length, initMsg, status.state]
+  );
 
   const funds = getAttachFunds({
     attachFundsOption,
@@ -143,6 +137,19 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
     assetsSelect,
   });
 
+  const { isFetching: isSimulating } = useSimulateFeeQuery({
+    enabled: composedTxMsg.length > 0,
+    messages: composedTxMsg,
+    onSuccess: (gasRes) => {
+      if (gasRes) setEstimatedFee(fabricateFee(gasRes));
+      else setEstimatedFee(undefined);
+    },
+    onError: (e) => {
+      setSimulateError(e.message);
+      setEstimatedFee(undefined);
+    },
+  });
+
   const { refetch } = useQuery(
     ["query", endpoint, codeId],
     async () => getCodeIdInfo(endpoint, Number(codeId)),
@@ -176,51 +183,31 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   // ------------------------------------------//
   // ----------------FUNCTIONS-----------------//
   // ------------------------------------------//
-  const proceed = useCallback(() => {
-    handleSubmit(async ({ adminAddress, label, initMsg }) => {
-      AmpTrackAction(AmpEvent.ACTION_EXECUTE, funds.length, attachFundsOption);
-
-      setSimulating(true);
+  const proceed = useCallback(async () => {
+    AmpTrackAction(AmpEvent.ACTION_EXECUTE, funds.length, attachFundsOption);
+    const stream = await postInstantiateTx({
+      codeId: Number(codeId),
+      initMsg: JSON.parse(initMsg),
+      label,
+      admin: adminAddress,
+      funds,
+      estimatedFee,
+      onTxSucceed: onComplete,
+    });
 
-      const msg = composeMsg(MsgType.INSTANTIATE, {
-        sender: address as HumanAddr,
-        admin: adminAddress as HumanAddr,
-        codeId: Long.fromString(codeId),
-        label,
-        msg: Buffer.from(initMsg),
-        funds,
-      });
-      try {
-        const estimatedFee = await simulate([msg]);
-        const stream = await postInstantiateTx({
-          estimatedFee: estimatedFee ? fabricateFee(estimatedFee) : undefined,
-          codeId: Number(codeId),
-          initMsg: JSON.parse(initMsg),
-          label,
-          admin: adminAddress,
-          funds,
-          onTxSucceed: onComplete,
-        });
-
-        if (stream) broadcast(stream);
-        setSimulating(false);
-      } catch (e) {
-        setValue("simulateError", (e as Error).message);
-        setSimulating(false);
-      }
-    })();
+    if (stream) broadcast(stream);
+    setSimulating(false);
   }, [
-    funds,
-    handleSubmit,
+    adminAddress,
     attachFundsOption,
-    address,
+    broadcast,
     codeId,
-    simulate,
-    postInstantiateTx,
-    fabricateFee,
+    estimatedFee,
+    funds,
+    initMsg,
+    label,
     onComplete,
-    broadcast,
-    setValue,
+    postInstantiateTx,
   ]);
 
   // ------------------------------------------//
@@ -239,6 +226,35 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
     return () => {};
   }, [address, codeId, refetch]);
 
+  useEffect(() => {
+    if (enableInstantiate) {
+      setSimulateError("");
+      const composedMsg = composeMsg(MsgType.INSTANTIATE, {
+        sender: address as HumanAddr,
+        admin: adminAddress as HumanAddr,
+        codeId: Long.fromString(codeId),
+        label,
+        msg: Buffer.from(initMsg),
+        funds,
+      });
+      const timeoutId = setTimeout(() => {
+        setComposedTxMsg([composedMsg]);
+      }, 1000);
+      return () => clearTimeout(timeoutId);
+    }
+    return () => {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    address,
+    adminAddress,
+    codeId,
+    enableInstantiate,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(funds),
+    initMsg,
+    label,
+  ]);
+
   useEffect(() => {
     if (codeIdQuery) setValue("codeId", codeIdQuery);
     if (msgQuery) {
@@ -318,14 +334,14 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             placeholder={`ex. ${exampleContractAddress}`}
             helperText="The contract's admin will be able to migrate and update future admins."
             variant="floating"
-            error={validateAdmin(watchAdminAddress)}
+            error={validateAdmin(adminAddress)}
             helperAction={
               <AssignMe
                 onClick={() => {
                   AmpTrack(AmpEvent.USE_ASSIGN_ME);
                   setValue("adminAddress", address);
                 }}
-                isDisable={watchAdminAddress === address}
+                isDisable={adminAddress === address}
               />
             }
           />
@@ -333,7 +349,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             Instantiate Message
           </Heading>
           <JsonInput
-            text={watchInitMsg}
+            text={initMsg}
             setText={(newVal: string) => setValue("initMsg", newVal)}
             minLines={10}
           />
@@ -346,18 +362,38 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             attachFundsOption={attachFundsOption}
           />
         </form>
+        {simulateError && (
+          <Flex gap={2} mb={4}>
+            <CustomIcon
+              name="alert-circle-solid"
+              boxSize={3}
+              color="error.main"
+            />
+            <Text variant="body3" color="error.main">
+              {simulateError}
+            </Text>
+          </Flex>
+        )}
+        <Flex
+          fontSize="14px"
+          color="text.dark"
+          alignSelf="flex-start"
+          alignItems="center"
+          display="flex"
+          gap={1}
+        >
+          <p>Transaction Fee:</p>
+          <EstimatedFeeRender
+            estimatedFee={estimatedFee}
+            loading={isSimulating}
+          />
+        </Flex>
       </WasmPageContainer>
       <Footer
         onInstantiate={proceed}
-        disabled={disableInstantiate}
+        disabled={!enableInstantiate}
         loading={simulating}
       />
-      {simulateError && (
-        <FailedModal
-          errorLog={simulateError}
-          onClose={() => setValue("simulateError", "")}
-        />
-      )}
     </>
   );
 };
diff --git a/src/lib/pages/migrate/components/MigrateContract.tsx b/src/lib/pages/migrate/components/MigrateContract.tsx
index 9662fc63b..ba9efb367 100644
--- a/src/lib/pages/migrate/components/MigrateContract.tsx
+++ b/src/lib/pages/migrate/components/MigrateContract.tsx
@@ -57,13 +57,12 @@ export const MigrateContract = ({
   const [simulateError, setSimulateError] = useState("");
   const [processing, setProcessing] = useState(false);
 
-  const enableMigrate = !!(
-    address &&
-    codeId.length &&
-    migrateMsg.trim().length &&
+  const enableMigrate =
+    !!address &&
+    codeId.length > 0 &&
+    migrateMsg.trim().length > 0 &&
     jsonValidate(migrateMsg) === null &&
-    status.state === "success"
-  );
+    status.state === "success";
 
   const { isFetching: isSimulating } = useSimulateFeeQuery({
     enabled: composedTxMsg.length > 0,

From e664f5c0f8e69e38e4195f9e753cd485ad814615 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 22 Jun 2023 18:07:34 +0700
Subject: [PATCH 269/354] fix: instantiate button behavior

---
 src/lib/app-fns/tx/instantiate.tsx        |  4 +++-
 src/lib/app-provider/tx/instantiate.ts    |  7 ++++--
 src/lib/pages/instantiate/instantiate.tsx | 26 +++++++++++++----------
 3 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/lib/app-fns/tx/instantiate.tsx b/src/lib/app-fns/tx/instantiate.tsx
index e0ce180ce..83dda08a4 100644
--- a/src/lib/app-fns/tx/instantiate.tsx
+++ b/src/lib/app-fns/tx/instantiate.tsx
@@ -23,6 +23,7 @@ interface InstantiateTxParams {
   funds: Coin[];
   client: SigningCosmWasmClient;
   onTxSucceed?: (txInfo: InstantiateResult, contractLabel: string) => void;
+  onTxFailed?: () => void;
 }
 
 export const instantiateContractTx = ({
@@ -35,6 +36,7 @@ export const instantiateContractTx = ({
   funds,
   client,
   onTxSucceed,
+  onTxFailed,
 }: InstantiateTxParams): Observable<TxResultRendering> => {
   return pipe(
     sendingTx(fee),
@@ -51,5 +53,5 @@ export const instantiateContractTx = ({
       // TODO: this is type hack
       return null as unknown as TxResultRendering;
     }
-  )().pipe(catchTxError());
+  )().pipe(catchTxError(onTxFailed));
 };
diff --git a/src/lib/app-provider/tx/instantiate.ts b/src/lib/app-provider/tx/instantiate.ts
index 2b894cd4e..2cbc3d20d 100644
--- a/src/lib/app-provider/tx/instantiate.ts
+++ b/src/lib/app-provider/tx/instantiate.ts
@@ -6,13 +6,14 @@ import { useCallback } from "react";
 import { instantiateContractTx } from "lib/app-fns/tx/instantiate";
 
 export interface InstantiateStreamParams {
-  onTxSucceed?: (txResult: InstantiateResult, contractLabel: string) => void;
   estimatedFee: StdFee | undefined;
   codeId: number;
   initMsg: object;
   label: string;
   admin: string;
   funds: Coin[];
+  onTxSucceed?: (txResult: InstantiateResult, contractLabel: string) => void;
+  onTxFailed?: () => void;
 }
 
 export const useInstantiateTx = () => {
@@ -20,13 +21,14 @@ export const useInstantiateTx = () => {
 
   return useCallback(
     async ({
-      onTxSucceed,
       estimatedFee,
       codeId,
       initMsg,
       label,
       admin,
       funds,
+      onTxSucceed,
+      onTxFailed,
     }: InstantiateStreamParams) => {
       const client = await getCosmWasmClient();
       if (!address || !client)
@@ -43,6 +45,7 @@ export const useInstantiateTx = () => {
         funds,
         client,
         onTxSucceed,
+        onTxFailed,
       });
     },
     [address, getCosmWasmClient]
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index f4712ae17..f23becd9b 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -82,9 +82,11 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   // ------------------------------------------//
   // ------------------STATES------------------//
   // ------------------------------------------//
-  const [simulating, setSimulating] = useState(false);
   const [status, setStatus] = useState<FormStatus>({ state: "init" });
-
+  const [composedTxMsg, setComposedTxMsg] = useState<ComposedMsg[]>([]);
+  const [estimatedFee, setEstimatedFee] = useState<StdFee>();
+  const [simulateError, setSimulateError] = useState("");
+  const [processing, setProcessing] = useState(false);
   // ------------------------------------------//
   // ----------------FORM HOOKS----------------//
   // ------------------------------------------//
@@ -118,10 +120,6 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   });
   const { assetsSelect, assetsJsonStr, attachFundsOption } = watchAssets();
 
-  const [composedTxMsg, setComposedTxMsg] = useState<ComposedMsg[]>([]);
-  const [estimatedFee, setEstimatedFee] = useState<StdFee>();
-  const [simulateError, setSimulateError] = useState("");
-
   const enableInstantiate = useMemo(
     () =>
       !!address &&
@@ -192,11 +190,17 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
       admin: adminAddress,
       funds,
       estimatedFee,
-      onTxSucceed: onComplete,
+      onTxSucceed: (txResult, contractLabel) => {
+        setProcessing(false);
+        onComplete(txResult, contractLabel);
+      },
+      onTxFailed: () => setProcessing(false),
     });
 
-    if (stream) broadcast(stream);
-    setSimulating(false);
+    if (stream) {
+      setProcessing(true);
+      broadcast(stream);
+    }
   }, [
     adminAddress,
     attachFundsOption,
@@ -391,8 +395,8 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
       </WasmPageContainer>
       <Footer
         onInstantiate={proceed}
-        disabled={!enableInstantiate}
-        loading={simulating}
+        disabled={!enableInstantiate || isSimulating}
+        loading={processing}
       />
     </>
   );

From 561cf36c5c7bbdec480d2a154d7885c6b7172e06 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 23 Jun 2023 11:56:41 +0700
Subject: [PATCH 270/354] fix: retrieve faucet information from faucet url

---
 src/config/index.ts               |  4 ----
 src/config/types.ts               |  2 --
 src/lib/pages/faucet/index.tsx    | 18 +++++++++-----
 src/lib/services/faucet.ts        | 18 ++++++++++++++
 src/lib/services/faucetService.ts | 40 +++++++++++++++++++++++++++++++
 5 files changed, 70 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/services/faucet.ts
 create mode 100644 src/lib/services/faucetService.ts

diff --git a/src/config/index.ts b/src/config/index.ts
index e7512ee1d..1ac35a1aa 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -100,8 +100,6 @@ export const CHAIN_CONFIGS: ChainConfigs = {
       faucet: {
         enabled: true,
         url: "https://faucet.alleslabs.dev",
-        denom: "osmo",
-        amount: 10,
       },
       wasm: {
         enabled: true,
@@ -147,8 +145,6 @@ export const CHAIN_CONFIGS: ChainConfigs = {
       faucet: {
         enabled: true,
         url: "http://localhost:5005/request",
-        denom: "osmo",
-        amount: 10,
       },
       wasm: {
         enabled: true,
diff --git a/src/config/types.ts b/src/config/types.ts
index 58f5ba489..82c782eb6 100644
--- a/src/config/types.ts
+++ b/src/config/types.ts
@@ -4,8 +4,6 @@ type FaucetConfig =
   | {
       enabled: true;
       url: string;
-      denom: string;
-      amount: number;
     }
   | { enabled: false };
 
diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index 66a56c121..9a62ff3c0 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -25,6 +25,7 @@ import type { IconKeys } from "lib/components/icon";
 import WasmPageContainer from "lib/components/WasmPageContainer";
 import { useOpenTxTab } from "lib/hooks";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import { useFaucetInfo } from "lib/services/faucetService";
 
 type ResultStatus = "success" | "error" | "warning";
 
@@ -55,6 +56,7 @@ const Faucet = () => {
     chainConfig: { prettyName },
   } = useCelatoneApp();
   const faucet = useFaucetConfig({ shouldRedirect: true });
+  const { data: faucetInfo } = useFaucetInfo();
 
   const { faucetUrl, faucetDenom, faucetAmount } = useMemo(() => {
     if (!faucet.enabled)
@@ -67,11 +69,11 @@ const Faucet = () => {
 
     return {
       faucetUrl: faucet.url,
-      faucetDenom: faucet.denom.toUpperCase(),
-      faucetAmount: faucet.amount,
+      faucetDenom: faucetInfo?.formattedDenom ?? "token",
+      faucetAmount: faucetInfo?.formattedAmount,
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [faucet.enabled]);
+  }, [faucet.enabled, faucetInfo]);
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_FAUCET);
@@ -124,7 +126,11 @@ const Faucet = () => {
         setIsLoading(false);
         setResult({
           status: "success",
-          message: `Sent ${faucetAmount} testnet ${faucetDenom} from the faucet. You will need to wait for another hour to request again.`,
+          message: `Sent ${faucetAmount} testnet ${faucetDenom} from the faucet. ${
+            faucetInfo?.RateLimit
+              ? "You will need to wait for another hour to request again."
+              : ""
+          }`,
           txHash,
         });
       })
@@ -163,8 +169,8 @@ const Faucet = () => {
       </Heading>
       <Text variant="body2" color="text.dark" pt={4} textAlign="center" mb={8}>
         The faucet provides {faucetAmount} testnet {faucetDenom} per request.
-        Requests are limited to once per hour for each receiving address and IP
-        address.
+        {faucetInfo?.RateLimit &&
+          "Requests are limited to once per hour for each receiving address and IP address."}
       </Text>
       <TextInput
         variant="floating"
diff --git a/src/lib/services/faucet.ts b/src/lib/services/faucet.ts
new file mode 100644
index 000000000..f61735546
--- /dev/null
+++ b/src/lib/services/faucet.ts
@@ -0,0 +1,18 @@
+import axios from "axios";
+
+export interface FaucetResponse {
+  ChainID: string;
+  NodeURI: string;
+  GasPrices: string;
+  Port: string;
+  Amount: number;
+  Denom: string;
+  RateLimit: boolean;
+}
+
+export const queryFaucetInfo = async (
+  faucetUrl: string
+): Promise<FaucetResponse> => {
+  const { data } = await axios.get(faucetUrl);
+  return data;
+};
diff --git a/src/lib/services/faucetService.ts b/src/lib/services/faucetService.ts
new file mode 100644
index 000000000..32280a174
--- /dev/null
+++ b/src/lib/services/faucetService.ts
@@ -0,0 +1,40 @@
+import type { UseQueryResult } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
+import big from "big.js";
+
+import { useChainRecordAsset, useFaucetConfig } from "lib/app-provider";
+import type { Token, U } from "lib/types";
+import { deexponentify, getTokenLabel } from "lib/utils";
+
+import type { FaucetResponse } from "./faucet";
+import { queryFaucetInfo } from "./faucet";
+
+interface FaucetInfo extends FaucetResponse {
+  formattedAmount: string;
+  formattedDenom: string;
+}
+
+export const useFaucetInfo = (): UseQueryResult<FaucetInfo> => {
+  const faucet = useFaucetConfig({ shouldRedirect: false });
+  const getAssetInfo = useChainRecordAsset();
+  const queryFn = async (): Promise<FaucetInfo> => {
+    const faucetInfo = await queryFaucetInfo(faucet.enabled ? faucet.url : "");
+    const assetInfo = getAssetInfo(faucetInfo.Denom);
+    const [formattedAmount, formattedDenom] = [
+      deexponentify(
+        big(faucetInfo.Amount).toFixed() as U<Token>,
+        assetInfo?.precision
+      ).toFixed(),
+      getTokenLabel(faucetInfo.Denom, assetInfo?.symbol),
+    ];
+    return { ...faucetInfo, formattedAmount, formattedDenom };
+  };
+
+  return useQuery({
+    queryKey: ["query", "faucet_info", faucet],
+    queryFn,
+    enabled: faucet.enabled,
+    retry: 1,
+    refetchOnWindowFocus: false,
+  });
+};

From 8885582bb30a6345029c4dd6bf1bb504923063ee Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 23 Jun 2023 14:36:51 +0700
Subject: [PATCH 271/354] refactor: use internal navigate instead of app link
 for block navigation

---
 CHANGELOG.md                                  |  1 +
 .../components/BlockDetailsTop.tsx            | 32 ++++++++++++-------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8d4466e5b..88044bb75 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -52,6 +52,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#404](https://github.com/alleslabs/celatone-frontend/pull/404) Use internal navigate instead of app link for block navigation
 - [#396](https://github.com/alleslabs/celatone-frontend/pull/396) Refactor useConfig, disable wasm related tabs on the public project page
 - [#392](https://github.com/alleslabs/celatone-frontend/pull/392) Refactor proposal table and fix empty state of the proposal list table
 - [#374](https://github.com/alleslabs/celatone-frontend/pull/374) Remove testnet, mainnet concepts and use permission from params
diff --git a/src/lib/pages/block-details/components/BlockDetailsTop.tsx b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
index 8c05813a8..ffc2c021f 100644
--- a/src/lib/pages/block-details/components/BlockDetailsTop.tsx
+++ b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
@@ -7,8 +7,7 @@ import {
   Button,
 } from "@chakra-ui/react";
 
-import { useLCDEndpoint } from "lib/app-provider";
-import { AppLink } from "lib/components/AppLink";
+import { useInternalNavigate, useLCDEndpoint } from "lib/app-provider";
 import { CopyLink } from "lib/components/CopyLink";
 import { DotSeparator } from "lib/components/DotSeparator";
 import { CustomIcon } from "lib/components/icon";
@@ -31,6 +30,7 @@ interface BlockDetailsTopProps {
 export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
   const block = Number(blockData.height);
   const lcdEndpoint = useLCDEndpoint();
+  const navigate = useInternalNavigate();
   const openLcdPage = () =>
     openNewTab(
       `${lcdEndpoint}/cosmos/base/tendermint/v1beta1/blocks/${blockData.height}`
@@ -54,19 +54,27 @@ export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
           </Flex>
           <Flex gap={2}>
             {!disablePrevious && (
-              <AppLink href={`/block/${block - 1}`}>
-                <StyledIconButton
-                  icon={<CustomIcon name="chevron-left" />}
-                  variant="ghost-gray"
-                />
-              </AppLink>
-            )}
-            <AppLink href={`/block/${block + 1}`}>
               <StyledIconButton
-                icon={<CustomIcon name="chevron-right" />}
+                icon={<CustomIcon name="chevron-left" />}
                 variant="ghost-gray"
+                onClick={() =>
+                  navigate({
+                    pathname: "/blocks/[height]",
+                    query: { height: block - 1 },
+                  })
+                }
               />
-            </AppLink>
+            )}
+            <StyledIconButton
+              icon={<CustomIcon name="chevron-right" />}
+              variant="ghost-gray"
+              onClick={() =>
+                navigate({
+                  pathname: "/blocks/[height]",
+                  query: { height: block + 1 },
+                })
+              }
+            />
             <Button
               variant="ghost-gray"
               padding={2}

From 8105b37e8dbae019d916a50c73c681a221d7cfaf Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 23 Jun 2023 14:26:07 +0700
Subject: [PATCH 272/354] fix: use api instead of lcd to prevent CORS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

d
:wq
:wq
---
 CHANGELOG.md                                       |  1 +
 src/lib/app-provider/hooks/useBaseApiRoute.ts      |  3 +++
 src/lib/components/ContractSelectSection.tsx       |  4 ++--
 src/lib/components/modal/code/SaveNewCode.tsx      |  4 ++--
 .../components/modal/contract/SaveNewContract.tsx  |  4 ++--
 .../select-contract/SelectContractInstantiator.tsx |  4 ++--
 src/lib/hooks/useQueryCmds.ts                      |  4 ++--
 src/lib/model/code.ts                              | 10 +++++-----
 src/lib/model/contract.ts                          |  3 +--
 src/lib/pages/admin/index.tsx                      |  4 ++--
 .../block-details/components/BlockDetailsTop.tsx   |  4 ++--
 src/lib/pages/instantiate/instantiate.tsx          |  4 ++--
 .../pages/migrate/components/MigrateContract.tsx   |  4 ++--
 src/lib/pages/migrate/index.tsx                    |  4 ++--
 src/lib/pages/query/components/QueryArea.tsx       |  4 ++--
 src/lib/pages/query/index.tsx                      |  4 ++--
 src/lib/services/delegationService.ts              | 14 +++++++-------
 src/lib/services/proposalService.ts                |  6 +++---
 src/lib/services/searchService.ts                  |  4 ++--
 src/lib/services/validatorService.ts               |  4 ++--
 20 files changed, 48 insertions(+), 45 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8d4466e5b..71c9efde1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -77,6 +77,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#403](https://github.com/alleslabs/celatone-frontend/pull/403) Retrieve faucet information from api and use api instead of lcd to prevent CORS
 - [#395](https://github.com/alleslabs/celatone-frontend/pull/395) Disable wasm related tabs on the account detail page
 - [#392](https://github.com/alleslabs/celatone-frontend/pull/392) Fix format denom function
 - [#390](https://github.com/alleslabs/celatone-frontend/pull/390) Fix minor styling
diff --git a/src/lib/app-provider/hooks/useBaseApiRoute.ts b/src/lib/app-provider/hooks/useBaseApiRoute.ts
index 097f30741..404ba37e2 100644
--- a/src/lib/app-provider/hooks/useBaseApiRoute.ts
+++ b/src/lib/app-provider/hooks/useBaseApiRoute.ts
@@ -9,6 +9,7 @@ export const useBaseApiRoute = (
     | "contracts"
     | "codes"
     | "accounts"
+    | "rest"
 ): string => {
   const {
     chainConfig: { chain, api },
@@ -33,6 +34,8 @@ export const useBaseApiRoute = (
       return `${api}/codes/${chain}/${currentChainId}`;
     case "accounts":
       return `${api}/accounts/${chain}/${currentChainId}`;
+    case "rest":
+      return `${api}/rest/${chain}/${currentChainId}`;
     default:
       throw new Error(
         "Error retrieving chain, api, or currentChainId from chain config."
diff --git a/src/lib/components/ContractSelectSection.tsx b/src/lib/components/ContractSelectSection.tsx
index c22136d8f..4c5f07838 100644
--- a/src/lib/components/ContractSelectSection.tsx
+++ b/src/lib/components/ContractSelectSection.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 
-import { useCelatoneApp, useLCDEndpoint, useMobile } from "lib/app-provider";
+import { useBaseApiRoute, useCelatoneApp, useMobile } from "lib/app-provider";
 import { useContractStore } from "lib/providers/store";
 import { queryInstantiateInfo } from "lib/services/contract";
 import type { ContractLocalInfo } from "lib/stores/contract";
@@ -134,7 +134,7 @@ export const ContractSelectSection = observer(
     const { getContractLocalInfo } = useContractStore();
     const { indexerGraphClient } = useCelatoneApp();
     const isMobile = useMobile();
-    const lcdEndpoint = useLCDEndpoint();
+    const lcdEndpoint = useBaseApiRoute("rest");
 
     const contractLocalInfo = getContractLocalInfo(contractAddress);
     const {
diff --git a/src/lib/components/modal/code/SaveNewCode.tsx b/src/lib/components/modal/code/SaveNewCode.tsx
index e2f485de0..81d36e407 100644
--- a/src/lib/components/modal/code/SaveNewCode.tsx
+++ b/src/lib/components/modal/code/SaveNewCode.tsx
@@ -5,9 +5,9 @@ import { useEffect, useMemo, useState } from "react";
 
 import { ActionModal } from "../ActionModal";
 import {
+  useBaseApiRoute,
   useCelatoneApp,
   useCurrentChain,
-  useLCDEndpoint,
 } from "lib/app-provider";
 import type { FormStatus } from "lib/components/forms";
 import { TextInput, NumberInput } from "lib/components/forms";
@@ -60,7 +60,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
   const toast = useToast();
   const { isCodeIdSaved, saveNewCode, updateCodeInfo, getCodeLocalInfo } =
     useCodeStore();
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const { refetch, isFetching, isRefetching } = useQuery(
     ["query", lcdEndpoint, codeId],
diff --git a/src/lib/components/modal/contract/SaveNewContract.tsx b/src/lib/components/modal/contract/SaveNewContract.tsx
index 98914d85d..e5f7506f0 100644
--- a/src/lib/components/modal/contract/SaveNewContract.tsx
+++ b/src/lib/components/modal/contract/SaveNewContract.tsx
@@ -7,8 +7,8 @@ import { useForm } from "react-hook-form";
 
 import { ActionModal } from "../ActionModal";
 import {
+  useBaseApiRoute,
   useCelatoneApp,
-  useLCDEndpoint,
   useValidateAddress,
 } from "lib/app-provider";
 import type { FormStatus } from "lib/components/forms";
@@ -41,7 +41,7 @@ export function SaveNewContractModal({
   list,
   buttonProps,
 }: SaveNewContractModalProps) {
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const { indexerGraphClient } = useCelatoneApp();
   const { getContractLocalInfo } = useContractStore();
diff --git a/src/lib/components/select-contract/SelectContractInstantiator.tsx b/src/lib/components/select-contract/SelectContractInstantiator.tsx
index 30c6370f0..ae9c067e2 100644
--- a/src/lib/components/select-contract/SelectContractInstantiator.tsx
+++ b/src/lib/components/select-contract/SelectContractInstantiator.tsx
@@ -19,8 +19,8 @@ import { useState } from "react";
 
 import { CustomIcon } from "../icon";
 import {
+  useBaseApiRoute,
   useCelatoneApp,
-  useLCDEndpoint,
   useValidateAddress,
 } from "lib/app-provider";
 import { DEFAULT_RPC_ERROR } from "lib/data";
@@ -63,7 +63,7 @@ export const SelectContractInstantiator = ({
   const contractLists = [instantiatedListInfo, ...getContractLists()];
   const contractList = contractLists.find((item) => item.slug === listSlug);
 
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const resetOnClose = () => {
     setListSlug("");
diff --git a/src/lib/hooks/useQueryCmds.ts b/src/lib/hooks/useQueryCmds.ts
index 13b252782..eb2bc0f45 100644
--- a/src/lib/hooks/useQueryCmds.ts
+++ b/src/lib/hooks/useQueryCmds.ts
@@ -2,13 +2,13 @@ import { useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 import { useState } from "react";
 
-import { useLCDEndpoint } from "lib/app-provider";
+import { useBaseApiRoute } from "lib/app-provider";
 import { queryData } from "lib/services/contract";
 import type { ContractAddr, RpcQueryError } from "lib/types";
 
 export const useQueryCmds = (contractAddress: ContractAddr) => {
   const [queryCmds, setQueryCmds] = useState<[string, string][]>([]);
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const { isFetching } = useQuery(
     ["query", "cmds", lcdEndpoint, contractAddress, '{"": {}}'],
diff --git a/src/lib/model/code.ts b/src/lib/model/code.ts
index 95ba30e76..7e1619f16 100644
--- a/src/lib/model/code.ts
+++ b/src/lib/model/code.ts
@@ -2,9 +2,9 @@ import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 
 import {
+  useBaseApiRoute,
   useCelatoneApp,
   useCurrentChain,
-  useLCDEndpoint,
 } from "lib/app-provider";
 import type { PermissionFilterValue } from "lib/hooks";
 import {
@@ -50,7 +50,7 @@ export interface CodeDataState {
 
 export const useCodeData = (codeId: string): CodeDataState => {
   const { currentChainId } = useCelatoneApp();
-  const endpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const { data: codeInfo, isLoading } = useCodeDataByCodeId(codeId);
   const { data: publicCodeInfo } = usePublicProjectByCodeId(codeId);
@@ -62,9 +62,9 @@ export const useCodeData = (codeId: string): CodeDataState => {
     isLoading: isLcdCodeLoading,
     error: isLcdCodeError,
   } = useQuery(
-    ["query", "code_data", endpoint, codeId],
-    async () => getCodeIdInfo(endpoint, codeId),
-    { enabled: Boolean(endpoint) && Boolean(codeId), retry: false }
+    ["query", "code_data", lcdEndpoint, codeId],
+    async () => getCodeIdInfo(lcdEndpoint, codeId),
+    { enabled: Boolean(lcdEndpoint) && Boolean(codeId), retry: false }
   );
 
   return {
diff --git a/src/lib/model/contract.ts b/src/lib/model/contract.ts
index f79b6acc5..e90abe834 100644
--- a/src/lib/model/contract.ts
+++ b/src/lib/model/contract.ts
@@ -4,7 +4,6 @@ import {
   useBaseApiRoute,
   useCelatoneApp,
   useCurrentChain,
-  useLCDEndpoint,
 } from "lib/app-provider";
 import { DEFAULT_TX_FILTERS, INSTANTIATED_LIST_NAME } from "lib/data";
 import { useCodeStore, useContractStore } from "lib/providers/store";
@@ -99,7 +98,7 @@ export const useContractData = (
   const { indexerGraphClient, currentChainId } = useCelatoneApp();
   const { getCodeLocalInfo } = useCodeStore();
   const { getContractLocalInfo } = useContractStore();
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const { assetInfos } = useAssetInfos();
   const { data: publicInfo } =
diff --git a/src/lib/pages/admin/index.tsx b/src/lib/pages/admin/index.tsx
index 88456b7f8..009bcb574 100644
--- a/src/lib/pages/admin/index.tsx
+++ b/src/lib/pages/admin/index.tsx
@@ -10,11 +10,11 @@ import {
   useInternalNavigate,
   useSimulateFeeQuery,
   useUpdateAdminTx,
-  useLCDEndpoint,
   useGetAddressType,
   useValidateAddress,
   useWasmConfig,
   useCurrentChain,
+  useBaseApiRoute,
 } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
@@ -44,7 +44,7 @@ const UpdateAdmin = () => {
   const fabricateFee = useFabricateFee();
   const updateAdminTx = useUpdateAdminTx();
   const { broadcast } = useTxBroadcast();
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const { indexerGraphClient } = useCelatoneApp();
 
diff --git a/src/lib/pages/block-details/components/BlockDetailsTop.tsx b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
index 8c05813a8..4662a612b 100644
--- a/src/lib/pages/block-details/components/BlockDetailsTop.tsx
+++ b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
@@ -7,7 +7,7 @@ import {
   Button,
 } from "@chakra-ui/react";
 
-import { useLCDEndpoint } from "lib/app-provider";
+import { useBaseApiRoute } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import { CopyLink } from "lib/components/CopyLink";
 import { DotSeparator } from "lib/components/DotSeparator";
@@ -30,7 +30,7 @@ interface BlockDetailsTopProps {
 
 export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
   const block = Number(blockData.height);
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
   const openLcdPage = () =>
     openNewTab(
       `${lcdEndpoint}/cosmos/base/tendermint/v1beta1/blocks/${blockData.height}`
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index deab436cd..d00bd1790 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -11,9 +11,9 @@ import {
   useSimulateFee,
   useInstantiateTx,
   useCelatoneApp,
-  useLCDEndpoint,
   useValidateAddress,
   useCurrentChain,
+  useBaseApiRoute,
 } from "lib/app-provider";
 import { AssignMe } from "lib/components/AssignMe";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
@@ -72,7 +72,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
     },
   } = useCelatoneApp();
   const { address = "" } = useCurrentChain();
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const postInstantiateTx = useInstantiateTx();
   const { simulate } = useSimulateFee();
diff --git a/src/lib/pages/migrate/components/MigrateContract.tsx b/src/lib/pages/migrate/components/MigrateContract.tsx
index d883fedf5..c2b85e39a 100644
--- a/src/lib/pages/migrate/components/MigrateContract.tsx
+++ b/src/lib/pages/migrate/components/MigrateContract.tsx
@@ -8,8 +8,8 @@ import { useForm } from "react-hook-form";
 import {
   useFabricateFee,
   useSimulateFeeQuery,
-  useLCDEndpoint,
   useCurrentChain,
+  useBaseApiRoute,
 } from "lib/app-provider";
 import { useMigrateTx } from "lib/app-provider/tx/migrate";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
@@ -37,7 +37,7 @@ export const MigrateContract = ({
 }: MigrateContractProps) => {
   const { address } = useCurrentChain();
   const { broadcast } = useTxBroadcast();
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const migrateTx = useMigrateTx();
   const fabricateFee = useFabricateFee();
diff --git a/src/lib/pages/migrate/index.tsx b/src/lib/pages/migrate/index.tsx
index 6f9ec8bcb..de52ca6b5 100644
--- a/src/lib/pages/migrate/index.tsx
+++ b/src/lib/pages/migrate/index.tsx
@@ -5,10 +5,10 @@ import { useCallback, useEffect } from "react";
 import { useForm } from "react-hook-form";
 
 import {
+  useBaseApiRoute,
   useCelatoneApp,
   useCurrentChain,
   useInternalNavigate,
-  useLCDEndpoint,
   useWasmConfig,
 } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
@@ -38,7 +38,7 @@ const Migrate = () => {
   const { indexerGraphClient } = useCelatoneApp();
   const router = useRouter();
   const navigate = useInternalNavigate();
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
   const { data: uploadAccess } = useUploadAccessParams();
 
   const { address = "" } = useCurrentChain();
diff --git a/src/lib/pages/query/components/QueryArea.tsx b/src/lib/pages/query/components/QueryArea.tsx
index bcbd4d8eb..4aaab2960 100644
--- a/src/lib/pages/query/components/QueryArea.tsx
+++ b/src/lib/pages/query/components/QueryArea.tsx
@@ -4,7 +4,7 @@ import type { AxiosError } from "axios";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 
-import { useCurrentChain, useLCDEndpoint } from "lib/app-provider";
+import { useBaseApiRoute, useCurrentChain } from "lib/app-provider";
 import { ContractCmdButton } from "lib/components/ContractCmdButton";
 import { CopyButton } from "lib/components/copy";
 import { CustomIcon } from "lib/components/icon";
@@ -39,7 +39,7 @@ export const QueryArea = ({
   initialMsg,
   cmds,
 }: QueryAreaProps) => {
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const userKey = useUserKey();
   const { addActivity } = useContractStore();
diff --git a/src/lib/pages/query/index.tsx b/src/lib/pages/query/index.tsx
index 2160bc207..9a2a160d0 100644
--- a/src/lib/pages/query/index.tsx
+++ b/src/lib/pages/query/index.tsx
@@ -5,8 +5,8 @@ import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
 import {
+  useBaseApiRoute,
   useInternalNavigate,
-  useLCDEndpoint,
   useWasmConfig,
 } from "lib/app-provider";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
@@ -29,7 +29,7 @@ const Query = () => {
   useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const navigate = useInternalNavigate();
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const [contractAddress, setContractAddress] = useState("" as ContractAddr);
   const [initialMsg, setInitialMsg] = useState("");
diff --git a/src/lib/services/delegationService.ts b/src/lib/services/delegationService.ts
index b15091407..b454ba01b 100644
--- a/src/lib/services/delegationService.ts
+++ b/src/lib/services/delegationService.ts
@@ -2,7 +2,7 @@ import type { UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 
-import { useLCDEndpoint } from "lib/app-provider";
+import { useBaseApiRoute } from "lib/app-provider";
 import type { Addr, ValidatorAddr } from "lib/types";
 
 import type {
@@ -23,7 +23,7 @@ import {
 } from "./delegation";
 
 export const useStakingParams = (): UseQueryResult<RawStakingParams> => {
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const queryFn = useCallback(
     async () => getStakingParams(lcdEndpoint),
@@ -38,7 +38,7 @@ export const useStakingParams = (): UseQueryResult<RawStakingParams> => {
 export const useDelegations = (
   address: Addr
 ): UseQueryResult<RawDelegation[]> => {
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const queryFn = useCallback(
     async () => getDelegations(lcdEndpoint, address),
@@ -53,7 +53,7 @@ export const useDelegations = (
 export const useUnbondings = (
   address: Addr
 ): UseQueryResult<RawUnbonding[]> => {
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const queryFn = useCallback(
     async () => getUnbondings(lcdEndpoint, address),
@@ -68,7 +68,7 @@ export const useUnbondings = (
 export const useDelegationRewards = (
   address: Addr
 ): UseQueryResult<RawDelegationRewards> => {
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const queryFn = useCallback(
     async () => getDelegationRewards(lcdEndpoint, address),
@@ -87,7 +87,7 @@ export const useDelegationRewards = (
 export const useRedelegations = (
   address: Addr
 ): UseQueryResult<RawRedelegation[]> => {
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const queryFn = useCallback(
     async () => getRedelegations(lcdEndpoint, address),
@@ -102,7 +102,7 @@ export const useRedelegations = (
 export const useCommission = (
   address: ValidatorAddr
 ): UseQueryResult<RawCommission> => {
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const queryFn = useCallback(
     async () => getCommission(lcdEndpoint, address),
diff --git a/src/lib/services/proposalService.ts b/src/lib/services/proposalService.ts
index 78d695d50..0464f01d7 100644
--- a/src/lib/services/proposalService.ts
+++ b/src/lib/services/proposalService.ts
@@ -4,9 +4,9 @@ import big from "big.js";
 import { useCallback } from "react";
 
 import {
+  useBaseApiRoute,
   useCelatoneApp,
   useChainRecordAsset,
-  useLCDEndpoint,
 } from "lib/app-provider";
 import {
   getProposalList,
@@ -301,7 +301,7 @@ export interface GovParams {
 }
 
 export const useGovParams = (): UseQueryResult<GovParams> => {
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
   const getAssetInfo = useChainRecordAsset();
   const queryFn = useCallback(
     () =>
@@ -351,7 +351,7 @@ export const useGovParams = (): UseQueryResult<GovParams> => {
 };
 
 export const useUploadAccessParams = (): UseQueryResult<UploadAccess> => {
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
   return useQuery(
     ["upload_access", lcdEndpoint],
     () => fetchGovUploadAccessParams(lcdEndpoint),
diff --git a/src/lib/services/searchService.ts b/src/lib/services/searchService.ts
index 95cc47080..9638f7a4b 100644
--- a/src/lib/services/searchService.ts
+++ b/src/lib/services/searchService.ts
@@ -2,9 +2,9 @@ import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 
 import {
+  useBaseApiRoute,
   useCelatoneApp,
   useGetAddressType,
-  useLCDEndpoint,
 } from "lib/app-provider";
 import type { ContractAddr } from "lib/types";
 import { isBlock, isCodeId, isTxHash } from "lib/utils";
@@ -35,7 +35,7 @@ export const useSearchHandler = (
       },
     },
   } = useCelatoneApp();
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
   const getAddressType = useGetAddressType();
   const addressType = getAddressType(debouncedKeyword);
   const { data: txData, isLoading: txLoading } = useTxData(debouncedKeyword);
diff --git a/src/lib/services/validatorService.ts b/src/lib/services/validatorService.ts
index 804aa18e5..7fed550d5 100644
--- a/src/lib/services/validatorService.ts
+++ b/src/lib/services/validatorService.ts
@@ -2,7 +2,7 @@ import type { UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 
-import { useLCDEndpoint } from "lib/app-provider";
+import { useBaseApiRoute } from "lib/app-provider";
 
 import type { RawValidator } from "./validator";
 import { getValidators } from "./validator";
@@ -10,7 +10,7 @@ import { getValidators } from "./validator";
 export const useValidators = (): UseQueryResult<
   Record<string, RawValidator>
 > => {
-  const lcdEndpoint = useLCDEndpoint();
+  const lcdEndpoint = useBaseApiRoute("rest");
 
   const queryFn = useCallback(
     async () => getValidators(lcdEndpoint),

From fd33f327fb33cd9a53ddf4845642ff2e1da996d6 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 23 Jun 2023 16:18:23 +0700
Subject: [PATCH 273/354] fix: increase simulate execute commands retry

---
 src/lib/app-provider/queries/simulateFee.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/app-provider/queries/simulateFee.ts b/src/lib/app-provider/queries/simulateFee.ts
index 769239985..43f6f1867 100644
--- a/src/lib/app-provider/queries/simulateFee.ts
+++ b/src/lib/app-provider/queries/simulateFee.ts
@@ -66,7 +66,7 @@ export const useSimulateFeeQuery = ({
     queryFn: async ({ queryKey }) => simulateFn(queryKey[3] as ComposedMsg[]),
     enabled,
     keepPreviousData: true,
-    retry: false,
+    retry: 2,
     refetchOnReconnect: false,
     refetchOnWindowFocus: false,
     onSuccess,

From 55496f51d58456de83e8abe5216becd53baf712a Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 23 Jun 2023 16:37:22 +0700
Subject: [PATCH 274/354] fix: faucet alert styling and retry

---
 src/lib/pages/faucet/index.tsx    | 1 +
 src/lib/services/faucetService.ts | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index 9a62ff3c0..f3b80246a 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -216,6 +216,7 @@ const Faucet = () => {
               variant="unstyled"
               minW="unset"
               size="sm"
+              ml="auto"
               _hover={{ background: "success.dark" }}
               style={{ padding: "4px 12px" }}
               onClick={() => openTxTab(result.txHash)}
diff --git a/src/lib/services/faucetService.ts b/src/lib/services/faucetService.ts
index 32280a174..c0ffe64e8 100644
--- a/src/lib/services/faucetService.ts
+++ b/src/lib/services/faucetService.ts
@@ -34,7 +34,7 @@ export const useFaucetInfo = (): UseQueryResult<FaucetInfo> => {
     queryKey: ["query", "faucet_info", faucet],
     queryFn,
     enabled: faucet.enabled,
-    retry: 1,
+    retry: 2,
     refetchOnWindowFocus: false,
   });
 };

From bd1dfb33999c241c0a501631aae6b407c86db895 Mon Sep 17 00:00:00 2001
From: poom <52099595+poomthiti@users.noreply.github.com>
Date: Mon, 26 Jun 2023 14:22:53 +0700
Subject: [PATCH 275/354] Update README.md

1. Add nvm instruction
2. Change `Yarn` url
---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 44f5ecda0..1010b2010 100644
--- a/README.md
+++ b/README.md
@@ -15,8 +15,8 @@ The Celatone frontend uses the following technologies:
 
 ### Prerequisites
 
-1. [Node.js](https://nodejs.org/en/) (version >= 14) or nvm installed.
-2. [`Yarn`](https://yarnpkg.com/) installed.
+1. [Node.js](https://nodejs.org/en/) (version >= 16) or using node version manager [nvm](https://github.com/nvm-sh/nvm#intro) (recommended, installation guide for nvm [here](https://collabnix.com/how-to-install-and-configure-nvm-on-mac-os/)).
+2. [`Yarn`](https://yarnpkg.com/getting-started/install) installed.
 
 ### Develop
 

From 89f5e382aa6f84db27a63aa30272a7b21a585aa7 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 26 Jun 2023 14:49:01 +0700
Subject: [PATCH 276/354] feat: add test for token.ts

---
 CHANGELOG.md                          |   1 +
 src/lib/utils/formatter/token.test.ts | 219 ++++++++++++++++++++++++++
 src/lib/utils/formatter/token.ts      |  63 +++++---
 3 files changed, 258 insertions(+), 25 deletions(-)
 create mode 100644 src/lib/utils/formatter/token.test.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1f2b8a539..234da4d0b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#405](https://github.com/alleslabs/celatone-frontend/pull/405) add test cases for `utils/formatter/token.ts`
 - [#398](https://github.com/alleslabs/celatone-frontend/pull/398) Setup Jest and sample tests
 - [#372](https://github.com/alleslabs/celatone-frontend/pull/372) Add code hash to code details and upload section
 - [#329](https://github.com/alleslabs/celatone-frontend/pull/329) Add allowed user to store code flow
diff --git a/src/lib/utils/formatter/token.test.ts b/src/lib/utils/formatter/token.test.ts
new file mode 100644
index 000000000..e0499553e
--- /dev/null
+++ b/src/lib/utils/formatter/token.test.ts
@@ -0,0 +1,219 @@
+import type { Big, BigSource } from "big.js";
+import big from "big.js";
+
+import type { Token, U, USD } from "lib/types";
+
+import {
+  formatDecimal,
+  d2Formatter,
+  d6Formatter,
+  toToken,
+  formatUTokenWithPrecision,
+  formatPrice,
+  formatInteger,
+} from "./token";
+
+const FALLBACK = "fallback";
+
+describe("formatDecimal", () => {
+  const f = formatDecimal({ decimalPoints: 4, delimiter: false });
+  const fDelim = formatDecimal({ decimalPoints: 4, delimiter: true });
+
+  test("invalid", () => {
+    expect(f("invalid value", FALLBACK)).toEqual(FALLBACK);
+    expect(f(NaN, FALLBACK)).toEqual(FALLBACK);
+    expect(f("0x13ac", FALLBACK)).toEqual(FALLBACK);
+  });
+
+  test("from string", () => {
+    expect(f("12345678", FALLBACK)).toEqual("12345678.0000");
+    expect(f("12345.678", FALLBACK)).toEqual("12345.6780");
+
+    expect(f("-12345678", FALLBACK)).toEqual("-12345678.0000");
+    expect(f("-12345.678", FALLBACK)).toEqual("-12345.6780");
+
+    expect(fDelim("123", FALLBACK)).toEqual("123.0000");
+    expect(fDelim("01234", FALLBACK)).toEqual("1,234.0000");
+    expect(fDelim("12340", FALLBACK)).toEqual("12,340.0000");
+    expect(fDelim("12345678", FALLBACK)).toEqual("12,345,678.0000");
+    expect(fDelim("12345.678", FALLBACK)).toEqual("12,345.6780");
+    expect(fDelim("123.45678", FALLBACK)).toEqual("123.4567");
+
+    expect(fDelim("-123", FALLBACK)).toEqual("-123.0000");
+    expect(fDelim("-01234", FALLBACK)).toEqual("-1,234.0000");
+    expect(fDelim("-12340", FALLBACK)).toEqual("-12,340.0000");
+    expect(fDelim("-12345678", FALLBACK)).toEqual("-12,345,678.0000");
+    expect(fDelim("-12345.678", FALLBACK)).toEqual("-12,345.6780");
+    expect(fDelim("-123.45678", FALLBACK)).toEqual("-123.4567");
+  });
+
+  test("from number", () => {
+    expect(f(12345678, FALLBACK)).toEqual("12345678.0000");
+    expect(f(12345.678, FALLBACK)).toEqual("12345.6780");
+
+    expect(f(-12345678, FALLBACK)).toEqual("-12345678.0000");
+    expect(f(-12345.678, FALLBACK)).toEqual("-12345.6780");
+
+    expect(fDelim(123, FALLBACK)).toEqual("123.0000");
+    expect(fDelim(12340, FALLBACK)).toEqual("12,340.0000");
+    expect(fDelim(12345678, FALLBACK)).toEqual("12,345,678.0000");
+    expect(fDelim(12345.678, FALLBACK)).toEqual("12,345.6780");
+    expect(fDelim(123.45678, FALLBACK)).toEqual("123.4567");
+
+    expect(fDelim(-123, FALLBACK)).toEqual("-123.0000");
+    expect(fDelim(-12340, FALLBACK)).toEqual("-12,340.0000");
+    expect(fDelim(-12345678, FALLBACK)).toEqual("-12,345,678.0000");
+    expect(fDelim(-12345.678, FALLBACK)).toEqual("-12,345.6780");
+    expect(fDelim(-123.45678, FALLBACK)).toEqual("-123.4567");
+  });
+
+  test("from big", () => {
+    expect(f(big(1234), FALLBACK)).toEqual("1234.0000");
+    expect(f(big(123456.789), FALLBACK)).toEqual("123456.7890");
+
+    expect(f(big(-123456789), FALLBACK)).toEqual("-123456789.0000");
+    expect(f(big(-123456.789), FALLBACK)).toEqual("-123456.7890");
+
+    expect(fDelim(big(123456.789), FALLBACK)).toEqual("123,456.7890");
+    expect(fDelim(big(123.456789), FALLBACK)).toEqual("123.4567");
+
+    expect(fDelim(big(-123456.789), FALLBACK)).toEqual("-123,456.7890");
+    expect(fDelim(big(-123.456789), FALLBACK)).toEqual("-123.4567");
+  });
+});
+
+describe("d2Formatter", () => {
+  test("positive", () => {
+    expect(d2Formatter("1234.5678", FALLBACK)).toEqual("1,234.56");
+    expect(d2Formatter(1234.5, FALLBACK)).toEqual("1,234.50");
+  });
+  test("negative", () => {
+    expect(d2Formatter("-1234.5678", FALLBACK)).toEqual("-1,234.56");
+    expect(d2Formatter(-1234.5, FALLBACK)).toEqual("-1,234.50");
+  });
+});
+
+describe("d6Formatter", () => {
+  test("positive", () => {
+    expect(d6Formatter("0.123456789", FALLBACK)).toEqual("0.123456");
+    expect(d6Formatter(0.1234, FALLBACK)).toEqual("0.123400");
+  });
+  test("negative", () => {
+    expect(d6Formatter("-0.123456789", FALLBACK)).toEqual("-0.123456");
+    expect(d6Formatter(-0.1234, FALLBACK)).toEqual("-0.123400");
+  });
+});
+
+describe("toToken", () => {
+  test("invalid", () => {
+    expect(toToken(NaN as U<Token<BigSource>>, 6)).toEqual(
+      big(0) as Token<Big>
+    );
+  });
+  test("more than 1", () => {
+    expect(toToken(12345678 as U<Token<BigSource>>, 6)).toEqual(
+      big(12.345678) as Token<Big>
+    );
+  });
+  test("less than 1", () => {
+    expect(toToken(1234 as U<Token<BigSource>>, 6)).toEqual(
+      big(0.001234) as Token<Big>
+    );
+  });
+});
+
+describe("formatUTokenWithPrecision", () => {
+  test("invalid", () => {
+    expect(
+      formatUTokenWithPrecision("" as U<Token<BigSource>>, 6, false)
+    ).toEqual("0.000000");
+    expect(
+      formatUTokenWithPrecision(NaN as U<Token<BigSource>>, 8, false)
+    ).toEqual("0.00000000");
+    expect(
+      formatUTokenWithPrecision(NaN as U<Token<BigSource>>, 6, true, 3)
+    ).toEqual("0.000");
+  });
+  test("no suffix", () => {
+    expect(
+      formatUTokenWithPrecision(
+        "12345678901234567890" as U<Token<BigSource>>,
+        6,
+        false
+      )
+    ).toEqual("12,345,678,901,234.567890");
+    expect(
+      formatUTokenWithPrecision(
+        "12345678901234567890" as U<Token<BigSource>>,
+        6,
+        false,
+        2
+      )
+    ).toEqual("12,345,678,901,234.56");
+    expect(
+      formatUTokenWithPrecision(
+        "12345678901234567890" as U<Token<BigSource>>,
+        6,
+        false,
+        8
+      )
+    ).toEqual("12,345,678,901,234.56789000");
+  });
+  test("with suffix", () => {
+    expect(
+      formatUTokenWithPrecision(
+        "12345678901234567890" as U<Token<BigSource>>,
+        6,
+        true
+      )
+    ).toEqual("12,345.67B");
+    expect(
+      formatUTokenWithPrecision(
+        "12345678901234" as U<Token<BigSource>>,
+        6,
+        true
+      )
+    ).toEqual("12.34M");
+    expect(
+      formatUTokenWithPrecision("1234567890" as U<Token<BigSource>>, 6, true)
+    ).toEqual("1,234.56");
+    expect(
+      formatUTokenWithPrecision("123456789" as U<Token<BigSource>>, 6, true)
+    ).toEqual("123.456789");
+    expect(
+      formatUTokenWithPrecision("123456789" as U<Token<BigSource>>, 6, true, 3)
+    ).toEqual("123.456");
+  });
+});
+
+describe("formatPrice", () => {
+  test("invalid", () => {
+    expect(formatPrice(NaN as USD<BigSource>)).toEqual("$0.00");
+    expect(formatPrice("" as USD<BigSource>)).toEqual("$0.00");
+  });
+  test("0", () => {
+    expect(formatPrice(0 as USD<BigSource>)).toEqual("$0.00");
+  });
+  test("> 1", () => {
+    expect(formatPrice(1.0 as USD<BigSource>)).toEqual("$1.00");
+    expect(formatPrice(1.234 as USD<BigSource>)).toEqual("$1.23");
+  });
+  test("< 0.000001", () => {
+    expect(formatPrice(0.0000001 as USD<BigSource>)).toEqual("<$0.000001");
+  });
+  test("0.000001 <= x < 1", () => {
+    expect(formatPrice(0.123 as USD<BigSource>)).toEqual("$0.123000");
+    expect(formatPrice(0.123456789 as USD<BigSource>)).toEqual("$0.123456");
+  });
+});
+
+describe("formatInteger", () => {
+  test("invalid", () => {
+    expect(formatInteger(NaN as BigSource)).toEqual("Not Available");
+    expect(formatInteger("" as BigSource)).toEqual("Not Available");
+  });
+  test("valid", () => {
+    expect(formatInteger("1234.567890" as BigSource)).toEqual("1,234");
+    expect(formatInteger(1234 as BigSource)).toEqual("1,234");
+  });
+});
diff --git a/src/lib/utils/formatter/token.ts b/src/lib/utils/formatter/token.ts
index c74b4ab22..0ee623baa 100644
--- a/src/lib/utils/formatter/token.ts
+++ b/src/lib/utils/formatter/token.ts
@@ -16,23 +16,26 @@ export const formatDecimal =
     delimiter: boolean;
   }) =>
   (n: BigSource, fallbackValue: string): string => {
-    const num = big(
-      big(n)
-        .mul(10 ** decimalPoints)
-        .toFixed()
-        .split(".")[0]
-    )
-      .div(10 ** decimalPoints)
-      .toFixed(decimalPoints);
-    if (num === "NaN") return fallbackValue;
+    try {
+      const num = big(
+        big(n)
+          .mul(10 ** decimalPoints)
+          .toFixed()
+          .split(".")[0]
+      )
+        .div(10 ** decimalPoints)
+        .toFixed(decimalPoints);
 
-    const [i, d] = num.split(".");
-    const thousands = /\B(?=(\d{3})+(?!\d))/g;
+      const [i, d] = num.split(".");
+      const thousands = /\B(?=(\d{3})+(?!\d))/g;
 
-    const ii = delimiter ? i.replace(thousands, ",") : i;
-    const dd = d ? `.${d}` : "";
+      const ii = delimiter ? i.replace(thousands, ",") : i;
+      const dd = d ? `.${d}` : "";
 
-    return (ii === "0" && num[0] === "-" ? "-" : "") + ii + dd;
+      return (ii === "0" && num[0] === "-" ? "-" : "") + ii + dd;
+    } catch (e) {
+      return fallbackValue;
+    }
   };
 
 export const d2Formatter = formatDecimal({ decimalPoints: 2, delimiter: true });
@@ -42,7 +45,13 @@ export const toToken = (
   uAmount: U<Token<BigSource>>,
   precision: number
   // TODO: try toFixed(precision) here after having unit test?
-): Token<Big> => big(uAmount).div(big(10).pow(precision)) as Token<Big>;
+): Token<Big> => {
+  try {
+    return big(uAmount).div(big(10).pow(precision)) as Token<Big>;
+  } catch {
+    return big(0) as Token<Big>;
+  }
+};
 
 /**
  * @remarks
@@ -75,20 +84,24 @@ export const formatUTokenWithPrecision = (
  * <$0.000001 -> <$0.000001
  */
 export const formatPrice = (value: USD<BigSource>): string => {
-  const price = big(value);
-  const lowestThreshold = 0.000001;
+  try {
+    const price = big(value);
+    const lowestThreshold = 0.000001;
 
-  const d2 = d2Formatter(price, "0.00");
-  const d6 = d6Formatter(price, "0.00");
+    const d2 = d2Formatter(price, "0.00");
+    const d6 = d6Formatter(price, "0.00");
 
-  if (price.eq(0) || price.gte(1)) {
-    return `$${d2}`;
-  }
+    if (price.eq(0) || price.gte(1)) {
+      return `$${d2}`;
+    }
 
-  if (price.lt(lowestThreshold)) {
-    return `<$${lowestThreshold}`;
+    if (price.lt(lowestThreshold)) {
+      return `<$${lowestThreshold}`;
+    }
+    return `$${d6}`;
+  } catch {
+    return "$0.00";
   }
-  return `$${d6}`;
 };
 
 export const formatInteger = (n: BigSource): string => {

From 1537934ea1a5207f3170d4ce2aa45e7bc37432cc Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 26 Jun 2023 14:50:16 +0700
Subject: [PATCH 277/354] fix: changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 234da4d0b..3e0fc2dad 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,7 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#405](https://github.com/alleslabs/celatone-frontend/pull/405) add test cases for `utils/formatter/token.ts`
+- [#406](https://github.com/alleslabs/celatone-frontend/pull/406) add test cases for `utils/formatter/token.ts`
 - [#398](https://github.com/alleslabs/celatone-frontend/pull/398) Setup Jest and sample tests
 - [#372](https://github.com/alleslabs/celatone-frontend/pull/372) Add code hash to code details and upload section
 - [#329](https://github.com/alleslabs/celatone-frontend/pull/329) Add allowed user to store code flow

From 6bee91e57c1d45fc28414bbfff1c269f6fd94cd4 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 26 Jun 2023 17:31:55 +0700
Subject: [PATCH 278/354] feat: upload code err msg

---
 CHANGELOG.md                          |  1 +
 src/lib/components/dropzone/index.tsx | 67 +++++++++++++++------------
 2 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 64b79fb7a..03ca43dff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#407](https://github.com/alleslabs/celatone-frontend/pull/407) Add code upload error message under the dropzone
 - [#372](https://github.com/alleslabs/celatone-frontend/pull/372) Add code hash to code details and upload section
 - [#329](https://github.com/alleslabs/celatone-frontend/pull/329) Add allowed user to store code flow
 - [#321](https://github.com/alleslabs/celatone-frontend/pull/321) Add amplitude to proposal to store code page
diff --git a/src/lib/components/dropzone/index.tsx b/src/lib/components/dropzone/index.tsx
index 53656e2df..90877734a 100644
--- a/src/lib/components/dropzone/index.tsx
+++ b/src/lib/components/dropzone/index.tsx
@@ -19,7 +19,7 @@ export function DropZone({ setFile, ...componentProps }: DropZoneProps) {
     [setFile]
   );
 
-  const { getRootProps, getInputProps } = useDropzone({
+  const { getRootProps, getInputProps, fileRejections } = useDropzone({
     onDrop,
     maxFiles: 1,
     accept: {
@@ -29,37 +29,44 @@ export function DropZone({ setFile, ...componentProps }: DropZoneProps) {
   });
 
   return (
-    <Flex
-      border="1px dashed"
-      borderColor="gray.700"
-      w="full"
-      p="24px 16px"
-      borderRadius="8px"
-      align="center"
-      direction="column"
-      _hover={{ bg: "gray.900" }}
-      transition="all .25s ease-in-out"
-      cursor="pointer"
-      {...getRootProps()}
-      {...componentProps}
-    >
-      <input {...getInputProps()} />
-      <UploadIcon />
-      <Flex my={2} gap={1}>
-        <Text
-          variant="body1"
-          color="secondary.main"
-          transition="all .25s ease-in-out"
-          _hover={{ color: "secondary.light" }}
-          style={{ textDecoration: "underline" }}
-        >
-          Click to upload
+    <Flex direction="column">
+      <Flex
+        border="1px dashed"
+        borderColor={fileRejections.length > 0 ? "error.main" : "gray.700"}
+        w="full"
+        p="24px 16px"
+        borderRadius="8px"
+        align="center"
+        direction="column"
+        _hover={{ bg: "gray.900" }}
+        transition="all .25s ease-in-out"
+        cursor="pointer"
+        {...getRootProps()}
+        {...componentProps}
+      >
+        <input {...getInputProps()} />
+        <UploadIcon />
+        <Flex my={2} gap={1}>
+          <Text
+            variant="body1"
+            color="secondary.main"
+            transition="all .25s ease-in-out"
+            _hover={{ color: "secondary.light" }}
+            style={{ textDecoration: "underline" }}
+          >
+            Click to upload
+          </Text>
+          <Text variant="body1">or drag Wasm file here</Text>
+        </Flex>
+        <Text variant="body2" color="text.dark">
+          .wasm (max. {MAX_FILE_SIZE / 1000}KB)
         </Text>
-        <Text variant="body1">or drag Wasm file here</Text>
       </Flex>
-      <Text variant="body2" color="text.dark">
-        .wasm (max. 800KB)
-      </Text>
+      {fileRejections.length > 0 && (
+        <Text variant="body3" color="error.main">
+          {fileRejections[0].errors[0].message}
+        </Text>
+      )}
     </Flex>
   );
 }

From d3a6dcff7bb5a8105b745aec6640c9b703e6b6fc Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 27 Jun 2023 14:12:08 +0700
Subject: [PATCH 279/354] fix: add more tests as commented

---
 src/lib/utils/formatter/token.test.ts | 29 ++++++++++++++++++---------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/lib/utils/formatter/token.test.ts b/src/lib/utils/formatter/token.test.ts
index e0499553e..94e6ad9b9 100644
--- a/src/lib/utils/formatter/token.test.ts
+++ b/src/lib/utils/formatter/token.test.ts
@@ -26,6 +26,10 @@ describe("formatDecimal", () => {
   });
 
   test("from string", () => {
+    expect(f(0xab, FALLBACK)).toEqual("171.0000");
+    expect(f(1e2, FALLBACK)).toEqual("100.0000");
+    expect(f(0b111, FALLBACK)).toEqual("7.0000");
+
     expect(f("12345678", FALLBACK)).toEqual("12345678.0000");
     expect(f("12345.678", FALLBACK)).toEqual("12345.6780");
 
@@ -86,6 +90,7 @@ describe("d2Formatter", () => {
   test("positive", () => {
     expect(d2Formatter("1234.5678", FALLBACK)).toEqual("1,234.56");
     expect(d2Formatter(1234.5, FALLBACK)).toEqual("1,234.50");
+    expect(d2Formatter(1234, FALLBACK)).toEqual("1,234.00");
   });
   test("negative", () => {
     expect(d2Formatter("-1234.5678", FALLBACK)).toEqual("-1,234.56");
@@ -97,6 +102,7 @@ describe("d6Formatter", () => {
   test("positive", () => {
     expect(d6Formatter("0.123456789", FALLBACK)).toEqual("0.123456");
     expect(d6Formatter(0.1234, FALLBACK)).toEqual("0.123400");
+    expect(d6Formatter(1234, FALLBACK)).toEqual("1,234.000000");
   });
   test("negative", () => {
     expect(d6Formatter("-0.123456789", FALLBACK)).toEqual("-0.123456");
@@ -168,20 +174,16 @@ describe("formatUTokenWithPrecision", () => {
       )
     ).toEqual("12,345.67B");
     expect(
-      formatUTokenWithPrecision(
-        "12345678901234" as U<Token<BigSource>>,
-        6,
-        true
-      )
+      formatUTokenWithPrecision(12345678901234 as U<Token<BigSource>>, 6, true)
     ).toEqual("12.34M");
     expect(
-      formatUTokenWithPrecision("1234567890" as U<Token<BigSource>>, 6, true)
+      formatUTokenWithPrecision(1234567890 as U<Token<BigSource>>, 6, true)
     ).toEqual("1,234.56");
     expect(
-      formatUTokenWithPrecision("123456789" as U<Token<BigSource>>, 6, true)
+      formatUTokenWithPrecision(123456789 as U<Token<BigSource>>, 6, true)
     ).toEqual("123.456789");
     expect(
-      formatUTokenWithPrecision("123456789" as U<Token<BigSource>>, 6, true, 3)
+      formatUTokenWithPrecision(123456789 as U<Token<BigSource>>, 6, true, 3)
     ).toEqual("123.456");
   });
 });
@@ -191,19 +193,24 @@ describe("formatPrice", () => {
     expect(formatPrice(NaN as USD<BigSource>)).toEqual("$0.00");
     expect(formatPrice("" as USD<BigSource>)).toEqual("$0.00");
   });
-  test("0", () => {
+  test("0 -> 2 decimal points", () => {
     expect(formatPrice(0 as USD<BigSource>)).toEqual("$0.00");
+    expect(formatPrice("0" as USD<BigSource>)).toEqual("$0.00");
   });
   test("> 1", () => {
     expect(formatPrice(1.0 as USD<BigSource>)).toEqual("$1.00");
-    expect(formatPrice(1.234 as USD<BigSource>)).toEqual("$1.23");
+    expect(formatPrice(1.23 as USD<BigSource>)).toEqual("$1.23");
+    expect(formatPrice("1.234" as USD<BigSource>)).toEqual("$1.23");
   });
   test("< 0.000001", () => {
     expect(formatPrice(0.0000001 as USD<BigSource>)).toEqual("<$0.000001");
+    expect(formatPrice("0.00000001" as USD<BigSource>)).toEqual("<$0.000001");
   });
   test("0.000001 <= x < 1", () => {
     expect(formatPrice(0.123 as USD<BigSource>)).toEqual("$0.123000");
+    expect(formatPrice("0.123" as USD<BigSource>)).toEqual("$0.123000");
     expect(formatPrice(0.123456789 as USD<BigSource>)).toEqual("$0.123456");
+    expect(formatPrice("0.123456789" as USD<BigSource>)).toEqual("$0.123456");
   });
 });
 
@@ -214,6 +221,8 @@ describe("formatInteger", () => {
   });
   test("valid", () => {
     expect(formatInteger("1234.567890" as BigSource)).toEqual("1,234");
+    expect(formatInteger("-1234.567890" as BigSource)).toEqual("-1,234");
     expect(formatInteger(1234 as BigSource)).toEqual("1,234");
+    expect(formatInteger(-1234 as BigSource)).toEqual("-1,234");
   });
 });

From 2af0b31e7a1fb7d0a301b775381ea7849b055f32 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 27 Jun 2023 14:14:45 +0700
Subject: [PATCH 280/354] fix: add tests

---
 src/lib/utils/formatter/token.test.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/lib/utils/formatter/token.test.ts b/src/lib/utils/formatter/token.test.ts
index 94e6ad9b9..8e17872fa 100644
--- a/src/lib/utils/formatter/token.test.ts
+++ b/src/lib/utils/formatter/token.test.ts
@@ -115,16 +115,23 @@ describe("toToken", () => {
     expect(toToken(NaN as U<Token<BigSource>>, 6)).toEqual(
       big(0) as Token<Big>
     );
+    expect(toToken("" as U<Token<BigSource>>, 6)).toEqual(big(0) as Token<Big>);
   });
   test("more than 1", () => {
     expect(toToken(12345678 as U<Token<BigSource>>, 6)).toEqual(
       big(12.345678) as Token<Big>
     );
+    expect(toToken("123456789" as U<Token<BigSource>>, 6)).toEqual(
+      big(123.456789) as Token<Big>
+    );
   });
   test("less than 1", () => {
     expect(toToken(1234 as U<Token<BigSource>>, 6)).toEqual(
       big(0.001234) as Token<Big>
     );
+    expect(toToken("234" as U<Token<BigSource>>, 6)).toEqual(
+      big(0.000234) as Token<Big>
+    );
   });
 });
 

From c53f8a501a87e115b19cac65a4fc4e64869c6bbe Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 27 Jun 2023 14:35:23 +0700
Subject: [PATCH 281/354] fix: add margin top

---
 src/lib/components/dropzone/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/dropzone/index.tsx b/src/lib/components/dropzone/index.tsx
index 90877734a..17e74e9cf 100644
--- a/src/lib/components/dropzone/index.tsx
+++ b/src/lib/components/dropzone/index.tsx
@@ -63,7 +63,7 @@ export function DropZone({ setFile, ...componentProps }: DropZoneProps) {
         </Text>
       </Flex>
       {fileRejections.length > 0 && (
-        <Text variant="body3" color="error.main">
+        <Text variant="body3" color="error.main" mt="2px">
           {fileRejections[0].errors[0].message}
         </Text>
       )}

From 5d462b480bb96f46650e004cea32b9370726df85 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 27 Jun 2023 14:42:03 +0700
Subject: [PATCH 282/354] fix: add space

---
 src/lib/pages/faucet/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index f3b80246a..25f9ba23c 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -168,7 +168,7 @@ const Faucet = () => {
         {prettyName} Faucet
       </Heading>
       <Text variant="body2" color="text.dark" pt={4} textAlign="center" mb={8}>
-        The faucet provides {faucetAmount} testnet {faucetDenom} per request.
+        The faucet provides {faucetAmount} testnet {faucetDenom} per request.{" "}
         {faucetInfo?.RateLimit &&
           "Requests are limited to once per hour for each receiving address and IP address."}
       </Text>

From 37b3eca171ce503563eaf328e4c1444c078e6f25 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 27 Jun 2023 14:51:57 +0700
Subject: [PATCH 283/354] fix: add retries to other simulate queries

---
 src/lib/app-provider/queries/simulateFee.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/lib/app-provider/queries/simulateFee.ts b/src/lib/app-provider/queries/simulateFee.ts
index 43f6f1867..aebf36772 100644
--- a/src/lib/app-provider/queries/simulateFee.ts
+++ b/src/lib/app-provider/queries/simulateFee.ts
@@ -65,7 +65,6 @@ export const useSimulateFeeQuery = ({
     ],
     queryFn: async ({ queryKey }) => simulateFn(queryKey[3] as ComposedMsg[]),
     enabled,
-    keepPreviousData: true,
     retry: 2,
     refetchOnReconnect: false,
     refetchOnWindowFocus: false,
@@ -120,7 +119,7 @@ export const useSimulateFeeForStoreCode = ({
     ],
     queryFn: async () => simulateFn(),
     enabled,
-    retry: false,
+    retry: 2,
     refetchOnReconnect: false,
     refetchOnWindowFocus: false,
     onSuccess,
@@ -210,7 +209,7 @@ export const useSimulateFeeForProposalStoreCode = ({
     ],
     queryFn: async () => simulateFn(),
     enabled,
-    retry: false,
+    retry: 2,
     refetchOnReconnect: false,
     refetchOnWindowFocus: false,
     onSuccess,

From 43e711a5dc8dabafe3f3671be0df687f27a58936 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 27 Jun 2023 16:34:18 +0700
Subject: [PATCH 284/354] refactor: restructure files

---
 .../components/modal/UnsupportedTokensModal.tsx  | 12 +++++++-----
 .../table/proposals/ProposalsTableRow.tsx        |  2 +-
 src/lib/components/tx/modal/ButtonSection.tsx    |  3 ++-
 src/lib/hooks/index.ts                           |  2 +-
 src/lib/hooks/useOpenAssetTab.ts                 | 16 ----------------
 src/lib/hooks/{useOpenTxTab.ts => useOpenTab.ts} | 15 ++++++++++++---
 .../account-details/components/asset/index.tsx   |  4 ++--
 .../block-details/components/BlockDetailsTop.tsx |  3 +--
 src/lib/utils/index.ts                           |  1 +
 src/lib/utils/window.ts                          |  2 ++
 10 files changed, 29 insertions(+), 31 deletions(-)
 delete mode 100644 src/lib/hooks/useOpenAssetTab.ts
 rename src/lib/hooks/{useOpenTxTab.ts => useOpenTab.ts} (64%)
 create mode 100644 src/lib/utils/window.ts

diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx
index 21c5134fd..bbb5817ee 100644
--- a/src/lib/components/modal/UnsupportedTokensModal.tsx
+++ b/src/lib/components/modal/UnsupportedTokensModal.tsx
@@ -155,16 +155,18 @@ export const UnsupportedTokensModal = ({
 
   return (
     <>
-      <Flex
+      <Button
+        variant="ghost-gray"
+        mb={1}
+        size="sm"
+        {...buttonProps}
         onClick={() => {
           AmpTrackUnsupportedToken(amptrackSection);
           onOpen();
         }}
       >
-        <Button variant="ghost-gray" mb={1} size="sm" {...buttonProps}>
-          {`View ${unsupportedAssets.length} Unsupported Assets`}
-        </Button>
-      </Flex>
+        {`View ${unsupportedAssets.length} Unsupported Assets`}
+      </Button>
       <Modal isOpen={isOpen} onClose={onClose} isCentered>
         <ModalOverlay />
         <ModalContent w="800px">
diff --git a/src/lib/components/table/proposals/ProposalsTableRow.tsx b/src/lib/components/table/proposals/ProposalsTableRow.tsx
index 58767b859..1800e1816 100644
--- a/src/lib/components/table/proposals/ProposalsTableRow.tsx
+++ b/src/lib/components/table/proposals/ProposalsTableRow.tsx
@@ -6,10 +6,10 @@ import { useCelatoneApp } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { StopPropagationBox } from "lib/components/StopPropagationBox";
 import { Proposer } from "lib/components/table/proposals/Proposer";
-import { openNewTab } from "lib/hooks";
 import { AmpTrackMintscan } from "lib/services/amplitude";
 import type { Option, Proposal } from "lib/types";
 import { ProposalStatus } from "lib/types";
+import { openNewTab } from "lib/utils";
 
 import { ProposalTextCell } from "./ProposalTextCell";
 import { ResolvedHeight } from "./ResolvedHeight";
diff --git a/src/lib/components/tx/modal/ButtonSection.tsx b/src/lib/components/tx/modal/ButtonSection.tsx
index c305e7a03..a82e05515 100644
--- a/src/lib/components/tx/modal/ButtonSection.tsx
+++ b/src/lib/components/tx/modal/ButtonSection.tsx
@@ -3,8 +3,9 @@ import { useRouter } from "next/router";
 
 import { useInternalNavigate, useCelatoneApp } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
-import { openNewTab, useOpenTxTab } from "lib/hooks";
+import { useOpenTxTab } from "lib/hooks";
 import type { ActionVariant, TxReceipt } from "lib/types";
+import { openNewTab } from "lib/utils";
 
 // TODO: refactor props to pass param in txResultRendering instead of receipt
 interface ButtonSectionProps {
diff --git a/src/lib/hooks/index.ts b/src/lib/hooks/index.ts
index 62a7c4777..cd025d8c0 100644
--- a/src/lib/hooks/index.ts
+++ b/src/lib/hooks/index.ts
@@ -6,6 +6,6 @@ export * from "./useRedo";
 export * from "./useSingleMessageProps";
 export * from "./useToast";
 export * from "./useUserKey";
-export * from "./useOpenTxTab";
+export * from "./useOpenTab";
 export * from "./useIsCurrentPage";
 export * from "./useGetMaxLengthError";
diff --git a/src/lib/hooks/useOpenAssetTab.ts b/src/lib/hooks/useOpenAssetTab.ts
deleted file mode 100644
index 9e57d21e9..000000000
--- a/src/lib/hooks/useOpenAssetTab.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useCallback } from "react";
-
-import { useBaseApiRoute } from "lib/app-provider";
-
-import { openNewTab } from "./useOpenTxTab";
-
-export const useOpenAssetTab = () => {
-  const balancesApiRoute = useBaseApiRoute("balances");
-
-  return useCallback(
-    (walletAddr: string) => {
-      openNewTab(`${balancesApiRoute}/${walletAddr}`);
-    },
-    [balancesApiRoute]
-  );
-};
diff --git a/src/lib/hooks/useOpenTxTab.ts b/src/lib/hooks/useOpenTab.ts
similarity index 64%
rename from src/lib/hooks/useOpenTxTab.ts
rename to src/lib/hooks/useOpenTab.ts
index a8717bde7..d2800e147 100644
--- a/src/lib/hooks/useOpenTxTab.ts
+++ b/src/lib/hooks/useOpenTab.ts
@@ -2,9 +2,7 @@ import { useCallback } from "react";
 
 import { useBaseApiRoute, useCelatoneApp } from "lib/app-provider";
 import type { Option } from "lib/types";
-
-export const openNewTab = (url: string) =>
-  window.open(url, "_blank", "noopener,noreferrer");
+import { openNewTab } from "lib/utils";
 
 export const useOpenTxTab = (type: "lcd" | "tx-page") => {
   const { currentChainId } = useCelatoneApp();
@@ -18,3 +16,14 @@ export const useOpenTxTab = (type: "lcd" | "tx-page") => {
     [baseUrl]
   );
 };
+
+export const useOpenAssetTab = () => {
+  const balancesApiRoute = useBaseApiRoute("balances");
+
+  return useCallback(
+    (walletAddr: string) => {
+      openNewTab(`${balancesApiRoute}/${walletAddr}`);
+    },
+    [balancesApiRoute]
+  );
+};
diff --git a/src/lib/pages/account-details/components/asset/index.tsx b/src/lib/pages/account-details/components/asset/index.tsx
index 4810720e8..7b236cca6 100644
--- a/src/lib/pages/account-details/components/asset/index.tsx
+++ b/src/lib/pages/account-details/components/asset/index.tsx
@@ -7,7 +7,7 @@ import { Loading } from "lib/components/Loading";
 import { UnsupportedTokensModal } from "lib/components/modal";
 import { TableTitle, ViewMore } from "lib/components/table";
 import { TokenCard } from "lib/components/TokenCard";
-import { useOpenAssetTab } from "lib/hooks/useOpenAssetTab";
+import { useOpenAssetTab } from "lib/hooks/useOpenTab";
 import { useUserAssetInfos } from "lib/pages/account-details/data";
 import { AmpTrackViewJson } from "lib/services/amplitude";
 import type { BalanceWithAssetInfo, HumanAddr, Option, USD } from "lib/types";
@@ -68,7 +68,7 @@ export const AssetsSection = ({
   if (isLoading) return <Loading />;
 
   const totalAsset =
-    (supportedAssets?.length || 0) + (unsupportedAssets?.length || 0);
+    (supportedAssets?.length ?? 0) + (unsupportedAssets?.length ?? 0);
 
   return (
     <Flex direction="column" gap={4} my={8} width="full">
diff --git a/src/lib/pages/block-details/components/BlockDetailsTop.tsx b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
index 8c05813a8..251981ba5 100644
--- a/src/lib/pages/block-details/components/BlockDetailsTop.tsx
+++ b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
@@ -12,9 +12,8 @@ import { AppLink } from "lib/components/AppLink";
 import { CopyLink } from "lib/components/CopyLink";
 import { DotSeparator } from "lib/components/DotSeparator";
 import { CustomIcon } from "lib/components/icon";
-import { openNewTab } from "lib/hooks";
 import type { BlockDetails } from "lib/types";
-import { dateFromNow, formatUTC } from "lib/utils";
+import { dateFromNow, formatUTC, openNewTab } from "lib/utils";
 
 const StyledIconButton = chakra(IconButton, {
   baseStyle: {
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index c81a6156f..bbe9dd6d5 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -30,3 +30,4 @@ export * from "./bech32";
 export * from "./proposal";
 export * from "./codeHash";
 export * from "./icon";
+export * from "./window";
diff --git a/src/lib/utils/window.ts b/src/lib/utils/window.ts
new file mode 100644
index 000000000..06762accb
--- /dev/null
+++ b/src/lib/utils/window.ts
@@ -0,0 +1,2 @@
+export const openNewTab = (url: string) =>
+  window.open(url, "_blank", "noopener,noreferrer");

From bdd0db2c229c4026857e660643315f2ffe15c916 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Wed, 28 Jun 2023 14:41:52 +0700
Subject: [PATCH 285/354] refactor: add todos

---
 src/lib/components/table/proposals/ProposalsTableRow.tsx | 1 +
 src/lib/components/tx/modal/ButtonSection.tsx            | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/lib/components/table/proposals/ProposalsTableRow.tsx b/src/lib/components/table/proposals/ProposalsTableRow.tsx
index a53ace897..e585d0c51 100644
--- a/src/lib/components/table/proposals/ProposalsTableRow.tsx
+++ b/src/lib/components/table/proposals/ProposalsTableRow.tsx
@@ -57,6 +57,7 @@ export const ProposalsTableRow = ({
                 type: proposal.type,
                 status: proposal.status,
               });
+              // TOOD: revisit retrieving url (make a proper hook)
               openNewTab(
                 getNavigationUrl(
                   "proposal_id",
diff --git a/src/lib/components/tx/modal/ButtonSection.tsx b/src/lib/components/tx/modal/ButtonSection.tsx
index 8771688f1..1cd7c57b6 100644
--- a/src/lib/components/tx/modal/ButtonSection.tsx
+++ b/src/lib/components/tx/modal/ButtonSection.tsx
@@ -43,6 +43,7 @@ export const ButtonSection = ({
     const proposalId = receipts
       .find((r) => r.title === "Proposal ID")
       ?.value?.toString();
+    // TOOD: revisit retrieving url (make a proper hook)
     openNewTab(
       getNavigationUrl(
         "proposal_id",

From 95972d114cedf90b9ba4b8660b41f9397c3d13dc Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 28 Jun 2023 15:24:44 +0700
Subject: [PATCH 286/354] chore: fix dependencies array

---
 src/lib/pages/faucet/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index 25f9ba23c..08c8c41ec 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -73,7 +73,7 @@ const Faucet = () => {
       faucetAmount: faucetInfo?.formattedAmount,
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [faucet.enabled, faucetInfo]);
+  }, [faucet.enabled, faucetInfo?.formattedAmount, faucetInfo?.formattedDenom]);
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_FAUCET);

From 013827942546416d8e6b4915a209c7968fdedaeb Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 28 Jun 2023 15:38:22 +0700
Subject: [PATCH 287/354] fix: comments

---
 package.json                   |  2 +-
 src/lib/stores/code.test.ts    | 16 +++++-------
 src/lib/utils/validate.test.ts | 47 ++++++++++++++++++++++------------
 3 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 1075bdaef..18c0501d7 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "test": "jest",
+    "test": "jest --coverage",
     "postbuild": "next-sitemap --config next-sitemap.config.js",
     "start": "next start",
     "lint": "next lint",
diff --git a/src/lib/stores/code.test.ts b/src/lib/stores/code.test.ts
index 7d9d3a679..410eec08f 100644
--- a/src/lib/stores/code.test.ts
+++ b/src/lib/stores/code.test.ts
@@ -4,22 +4,21 @@ import { CodeStore } from "./code";
 
 const TEST_USER_KEY = "test-default-address";
 
-const initCodeStore = () => {
+test("CodeStore setting userkey", () => {
   const codeStore = new CodeStore();
+  expect(codeStore.isCodeUserKeyExist()).toBeFalsy();
   codeStore.setCodeUserKey(TEST_USER_KEY);
-  return codeStore;
-};
+  expect(codeStore.isCodeUserKeyExist()).toBeTruthy();
+});
 
 describe("CodeStore", () => {
-  test("setting userkey", () => {
-    const codeStore = new CodeStore();
-    expect(codeStore.isCodeUserKeyExist()).toBeFalsy();
+  let codeStore: CodeStore;
+  beforeEach(() => {
+    codeStore = new CodeStore();
     codeStore.setCodeUserKey(TEST_USER_KEY);
-    expect(codeStore.isCodeUserKeyExist()).toBeTruthy();
   });
 
   test("code local info", () => {
-    const codeStore = initCodeStore();
     expect(codeStore.getCodeLocalInfo(1)).toBeUndefined();
 
     codeStore.updateCodeInfo(
@@ -45,7 +44,6 @@ describe("CodeStore", () => {
   });
 
   test("save codes", () => {
-    const codeStore = initCodeStore();
     expect(codeStore.isCodeIdSaved(1)).toBeFalsy();
     expect(codeStore.lastSavedCodeIds(TEST_USER_KEY)).toStrictEqual([]);
 
diff --git a/src/lib/utils/validate.test.ts b/src/lib/utils/validate.test.ts
index 2be83ccf6..d1a60f09b 100644
--- a/src/lib/utils/validate.test.ts
+++ b/src/lib/utils/validate.test.ts
@@ -4,11 +4,16 @@ describe("isCodeId", () => {
   test("valid", () => {
     expect(isCodeId("1234")).toBeTruthy();
   });
-  test("invalid number string", () => {
-    expect(isCodeId("123E")).toBeFalsy();
-  });
-  test("invalid length", () => {
-    expect(isCodeId("12345678")).toBeFalsy();
+  describe("invalid", () => {
+    test("empty string", () => {
+      expect(isCodeId("")).toBeFalsy();
+    });
+    test("non-number string", () => {
+      expect(isCodeId("123E")).toBeFalsy();
+    });
+    test("length too long", () => {
+      expect(isCodeId("12345678")).toBeFalsy();
+    });
   });
 });
 
@@ -20,15 +25,20 @@ describe("isTxHash", () => {
       )
     ).toBeTruthy();
   });
-  test("invalid hex", () => {
-    expect(
-      isTxHash(
-        "GE7C3F5D7C223257877BCF145452D8B5D45BFD55620B14EE97E6C86EDE16BFE7"
-      )
-    ).toBeFalsy();
-  });
-  test("invalid length", () => {
-    expect(isTxHash("DE7C3F5D7C223257877BCF145452D8B5")).toBeFalsy();
+  describe("invalid", () => {
+    test("empty", () => {
+      expect(isTxHash("")).toBeFalsy();
+    });
+    test("hex", () => {
+      expect(
+        isTxHash(
+          "GE7C3F5D7C223257877BCF145452D8B5D45BFD55620B14EE97E6C86EDE16BFE7"
+        )
+      ).toBeFalsy();
+    });
+    test("incorrect length", () => {
+      expect(isTxHash("DE7C3F5D7C223257877BCF145452D8B5")).toBeFalsy();
+    });
   });
 });
 
@@ -36,7 +46,12 @@ describe("isBlock", () => {
   test("valid", () => {
     expect(isBlock("12345678")).toBeTruthy();
   });
-  test("invalid number string", () => {
-    expect(isCodeId("1234ABCD")).toBeFalsy();
+  describe("invalid", () => {
+    test("empty string", () => {
+      expect(isCodeId("1234ABCD")).toBeFalsy();
+    });
+    test("non-number string", () => {
+      expect(isCodeId("1234ABCD")).toBeFalsy();
+    });
   });
 });

From 21994a89ad9e2374062c5967776e2606f0bf8c4d Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 28 Jun 2023 16:45:45 +0700
Subject: [PATCH 288/354] docs: add readme

---
 README.md | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1010b2010..2adff71d6 100644
--- a/README.md
+++ b/README.md
@@ -41,7 +41,15 @@ cd celatone-frontend
 yarn
 ```
 
-3. Finally, run the development server
+3. Create a `.env.local` file in the root of the project and add the following environment variables
+
+```bash
+# The mnemonic of the wallet that will be used for estimate gas fees
+NEXT_PUBLIC_DUMMY_MNEMONIC="your mnemonic here"
+NEXT_PUBLIC_SUPPORTED_CHAIN_IDS=osmosis-1,osmo-test-5
+```
+
+4. Finally, run the development server
 
 ```bash
 yarn dev

From 6c5402334b59047f979a1e96066e8a79acd0a76b Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 28 Jun 2023 16:50:02 +0700
Subject: [PATCH 289/354] docs: edit changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07c0abf3d..c49811e73 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -69,6 +69,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [#338](https://github.com/alleslabs/celatone-frontend/pull/338) Use gas from chain config
 - [#333](https://github.com/alleslabs/celatone-frontend/pull/333) Update endpoints including LCD, RPC, Graphql
 - [#335](https://github.com/alleslabs/celatone-frontend/pull/335) Refactor hardcoded api route to utils
+- [#373](https://github.com/alleslabs/celatone-frontend/pull/373) Add view in Json for assets in account details page
 - [#376](https://github.com/alleslabs/celatone-frontend/pull/376) Fix pluralize and capitalize
 - [#401](https://github.com/alleslabs/celatone-frontend/pull/401) Add permission chip to code selection box
 - [#386](https://github.com/alleslabs/celatone-frontend/pull/386) Handle uppercase address
@@ -106,7 +107,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
-- [#373](https://github.com/alleslabs/celatone-frontend/pull/373) Add view in Json for assets in account details page
 - [#364](https://github.com/alleslabs/celatone-frontend/pull/364) (Contract Details) use instantiated height and time from indexer as fallback
 - [#323](https://github.com/alleslabs/celatone-frontend/pull/323) Revise back button and breadcrumb components
 - [#339](https://github.com/alleslabs/celatone-frontend/pull/339) Update all routes to plural form, and patch all codes

From a66184a31e0cf0a18d539ba0fe8cac1345918aba Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 28 Jun 2023 17:09:07 +0700
Subject: [PATCH 290/354] fix: make tests more specific

---
 src/lib/utils/formatter/token.test.ts | 224 +++++++++++++++++---------
 1 file changed, 146 insertions(+), 78 deletions(-)

diff --git a/src/lib/utils/formatter/token.test.ts b/src/lib/utils/formatter/token.test.ts
index 8e17872fa..7124a3fa4 100644
--- a/src/lib/utils/formatter/token.test.ts
+++ b/src/lib/utils/formatter/token.test.ts
@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 import type { Big, BigSource } from "big.js";
 import big from "big.js";
 
@@ -19,17 +20,22 @@ describe("formatDecimal", () => {
   const f = formatDecimal({ decimalPoints: 4, delimiter: false });
   const fDelim = formatDecimal({ decimalPoints: 4, delimiter: true });
 
-  test("invalid", () => {
-    expect(f("invalid value", FALLBACK)).toEqual(FALLBACK);
-    expect(f(NaN, FALLBACK)).toEqual(FALLBACK);
-    expect(f("0x13ac", FALLBACK)).toEqual(FALLBACK);
+  describe("invalid", () => {
+    test("empty string", () => {
+      expect(f("invalid value", FALLBACK)).toEqual(FALLBACK);
+    });
+    test("non-number string", () => {
+      expect(f("invalid value", FALLBACK)).toEqual(FALLBACK);
+    });
+    test("hexstring is not acceptable", () => {
+      expect(f("0x13ac", FALLBACK)).toEqual(FALLBACK);
+    });
+    test("NaN", () => {
+      expect(f(NaN, FALLBACK)).toEqual(FALLBACK);
+    });
   });
 
   test("from string", () => {
-    expect(f(0xab, FALLBACK)).toEqual("171.0000");
-    expect(f(1e2, FALLBACK)).toEqual("100.0000");
-    expect(f(0b111, FALLBACK)).toEqual("7.0000");
-
     expect(f("12345678", FALLBACK)).toEqual("12345678.0000");
     expect(f("12345.678", FALLBACK)).toEqual("12345.6780");
 
@@ -52,6 +58,10 @@ describe("formatDecimal", () => {
   });
 
   test("from number", () => {
+    expect(f(0xab, FALLBACK)).toEqual("171.0000");
+    expect(f(1e2, FALLBACK)).toEqual("100.0000");
+    expect(f(0b111, FALLBACK)).toEqual("7.0000");
+
     expect(f(12345678, FALLBACK)).toEqual("12345678.0000");
     expect(f(12345.678, FALLBACK)).toEqual("12345.6780");
 
@@ -87,35 +97,46 @@ describe("formatDecimal", () => {
 });
 
 describe("d2Formatter", () => {
-  test("positive", () => {
+  test("from string", () => {
+    expect(d2Formatter("-1234.5678", FALLBACK)).toEqual("-1,234.56");
     expect(d2Formatter("1234.5678", FALLBACK)).toEqual("1,234.56");
+  });
+  test("from number", () => {
     expect(d2Formatter(1234.5, FALLBACK)).toEqual("1,234.50");
     expect(d2Formatter(1234, FALLBACK)).toEqual("1,234.00");
-  });
-  test("negative", () => {
-    expect(d2Formatter("-1234.5678", FALLBACK)).toEqual("-1,234.56");
     expect(d2Formatter(-1234.5, FALLBACK)).toEqual("-1,234.50");
   });
 });
 
 describe("d6Formatter", () => {
-  test("positive", () => {
+  test("from string", () => {
     expect(d6Formatter("0.123456789", FALLBACK)).toEqual("0.123456");
+    expect(d6Formatter("-0.123456789", FALLBACK)).toEqual("-0.123456");
+  });
+  test("from number", () => {
     expect(d6Formatter(0.1234, FALLBACK)).toEqual("0.123400");
     expect(d6Formatter(1234, FALLBACK)).toEqual("1,234.000000");
-  });
-  test("negative", () => {
-    expect(d6Formatter("-0.123456789", FALLBACK)).toEqual("-0.123456");
     expect(d6Formatter(-0.1234, FALLBACK)).toEqual("-0.123400");
   });
 });
 
 describe("toToken", () => {
-  test("invalid", () => {
-    expect(toToken(NaN as U<Token<BigSource>>, 6)).toEqual(
-      big(0) as Token<Big>
-    );
-    expect(toToken("" as U<Token<BigSource>>, 6)).toEqual(big(0) as Token<Big>);
+  describe("invalid", () => {
+    test("empty string", () => {
+      expect(toToken("" as U<Token<BigSource>>, 6)).toEqual(
+        big(0) as Token<Big>
+      );
+    });
+    test("non-number string", () => {
+      expect(toToken("ABC" as U<Token<BigSource>>, 6)).toEqual(
+        big(0) as Token<Big>
+      );
+    });
+    test("NaN", () => {
+      expect(toToken(NaN as U<Token<BigSource>>, 6)).toEqual(
+        big(0) as Token<Big>
+      );
+    });
   });
   test("more than 1", () => {
     expect(toToken(12345678 as U<Token<BigSource>>, 6)).toEqual(
@@ -136,16 +157,23 @@ describe("toToken", () => {
 });
 
 describe("formatUTokenWithPrecision", () => {
-  test("invalid", () => {
-    expect(
-      formatUTokenWithPrecision("" as U<Token<BigSource>>, 6, false)
-    ).toEqual("0.000000");
-    expect(
-      formatUTokenWithPrecision(NaN as U<Token<BigSource>>, 8, false)
-    ).toEqual("0.00000000");
-    expect(
-      formatUTokenWithPrecision(NaN as U<Token<BigSource>>, 6, true, 3)
-    ).toEqual("0.000");
+  describe("invalid", () => {
+    test("empty string", () => {
+      expect(
+        formatUTokenWithPrecision("" as U<Token<BigSource>>, 6, false)
+      ).toEqual("0.000000");
+      expect(
+        formatUTokenWithPrecision("" as U<Token<BigSource>>, 6, true, 1)
+      ).toEqual("0.0");
+    });
+    test("NaN", () => {
+      expect(
+        formatUTokenWithPrecision(NaN as U<Token<BigSource>>, 8, false)
+      ).toEqual("0.00000000");
+      expect(
+        formatUTokenWithPrecision(NaN as U<Token<BigSource>>, 6, true, 3)
+      ).toEqual("0.000");
+    });
   });
   test("no suffix", () => {
     expect(
@@ -172,64 +200,104 @@ describe("formatUTokenWithPrecision", () => {
       )
     ).toEqual("12,345,678,901,234.56789000");
   });
-  test("with suffix", () => {
-    expect(
-      formatUTokenWithPrecision(
-        "12345678901234567890" as U<Token<BigSource>>,
-        6,
-        true
-      )
-    ).toEqual("12,345.67B");
-    expect(
-      formatUTokenWithPrecision(12345678901234 as U<Token<BigSource>>, 6, true)
-    ).toEqual("12.34M");
-    expect(
-      formatUTokenWithPrecision(1234567890 as U<Token<BigSource>>, 6, true)
-    ).toEqual("1,234.56");
-    expect(
-      formatUTokenWithPrecision(123456789 as U<Token<BigSource>>, 6, true)
-    ).toEqual("123.456789");
-    expect(
-      formatUTokenWithPrecision(123456789 as U<Token<BigSource>>, 6, true, 3)
-    ).toEqual("123.456");
+  describe("with suffix", () => {
+    test(">= B", () => {
+      expect(
+        formatUTokenWithPrecision(
+          "12345678901234567890" as U<Token<BigSource>>,
+          6,
+          true
+        )
+      ).toEqual("12,345.67B");
+    });
+    test(">= M", () => {
+      expect(
+        formatUTokenWithPrecision(
+          12345678901234 as U<Token<BigSource>>,
+          6,
+          true
+        )
+      ).toEqual("12.34M");
+    });
+    test(">= K", () => {
+      expect(
+        formatUTokenWithPrecision(1234567890 as U<Token<BigSource>>, 6, true)
+      ).toEqual("1,234.56");
+    });
+    test("< K", () => {
+      expect(
+        formatUTokenWithPrecision(123456789 as U<Token<BigSource>>, 6, true)
+      ).toEqual("123.456789");
+      expect(
+        formatUTokenWithPrecision(123456789 as U<Token<BigSource>>, 6, true, 3)
+      ).toEqual("123.456");
+    });
   });
 });
 
 describe("formatPrice", () => {
-  test("invalid", () => {
-    expect(formatPrice(NaN as USD<BigSource>)).toEqual("$0.00");
-    expect(formatPrice("" as USD<BigSource>)).toEqual("$0.00");
+  describe("invalid", () => {
+    test("empty string", () => {
+      expect(formatPrice("" as USD<BigSource>)).toEqual("$0.00");
+    });
+    test("NaN", () => {
+      expect(formatPrice(NaN as USD<BigSource>)).toEqual("$0.00");
+    });
   });
-  test("0 -> 2 decimal points", () => {
-    expect(formatPrice(0 as USD<BigSource>)).toEqual("$0.00");
-    expect(formatPrice("0" as USD<BigSource>)).toEqual("$0.00");
+  describe("if 0, use 2 decimal points", () => {
+    test("from string", () => {
+      expect(formatPrice("0" as USD<BigSource>)).toEqual("$0.00");
+    });
+    test("from number", () => {
+      expect(formatPrice(0 as USD<BigSource>)).toEqual("$0.00");
+    });
   });
-  test("> 1", () => {
-    expect(formatPrice(1.0 as USD<BigSource>)).toEqual("$1.00");
-    expect(formatPrice(1.23 as USD<BigSource>)).toEqual("$1.23");
-    expect(formatPrice("1.234" as USD<BigSource>)).toEqual("$1.23");
+  describe("> 1", () => {
+    test("from string", () => {
+      expect(formatPrice("1.234" as USD<BigSource>)).toEqual("$1.23");
+    });
+    test("from number", () => {
+      expect(formatPrice(1.0 as USD<BigSource>)).toEqual("$1.00");
+      expect(formatPrice(1.23 as USD<BigSource>)).toEqual("$1.23");
+    });
   });
-  test("< 0.000001", () => {
-    expect(formatPrice(0.0000001 as USD<BigSource>)).toEqual("<$0.000001");
-    expect(formatPrice("0.00000001" as USD<BigSource>)).toEqual("<$0.000001");
+  describe("< 0.000001", () => {
+    test("from string", () => {
+      expect(formatPrice("0.00000001" as USD<BigSource>)).toEqual("<$0.000001");
+    });
+    test("from number", () => {
+      expect(formatPrice(0.0000001 as USD<BigSource>)).toEqual("<$0.000001");
+    });
   });
-  test("0.000001 <= x < 1", () => {
-    expect(formatPrice(0.123 as USD<BigSource>)).toEqual("$0.123000");
-    expect(formatPrice("0.123" as USD<BigSource>)).toEqual("$0.123000");
-    expect(formatPrice(0.123456789 as USD<BigSource>)).toEqual("$0.123456");
-    expect(formatPrice("0.123456789" as USD<BigSource>)).toEqual("$0.123456");
+  describe("0.000001 <= x < 1", () => {
+    test("from string", () => {
+      expect(formatPrice("0.123" as USD<BigSource>)).toEqual("$0.123000");
+      expect(formatPrice("0.123456789" as USD<BigSource>)).toEqual("$0.123456");
+    });
+    test("from number", () => {
+      expect(formatPrice(0.123 as USD<BigSource>)).toEqual("$0.123000");
+      expect(formatPrice(0.123456789 as USD<BigSource>)).toEqual("$0.123456");
+    });
   });
 });
 
 describe("formatInteger", () => {
-  test("invalid", () => {
-    expect(formatInteger(NaN as BigSource)).toEqual("Not Available");
-    expect(formatInteger("" as BigSource)).toEqual("Not Available");
-  });
-  test("valid", () => {
-    expect(formatInteger("1234.567890" as BigSource)).toEqual("1,234");
-    expect(formatInteger("-1234.567890" as BigSource)).toEqual("-1,234");
-    expect(formatInteger(1234 as BigSource)).toEqual("1,234");
-    expect(formatInteger(-1234 as BigSource)).toEqual("-1,234");
+  describe("invalid", () => {
+    test("empty string", () => {
+      expect(formatInteger("" as BigSource)).toEqual("Not Available");
+    });
+    test("NaN", () => {
+      expect(formatInteger(NaN as BigSource)).toEqual("Not Available");
+    });
+  });
+  describe("valid", () => {
+    test("from string", () => {
+      expect(formatInteger("1234.567890" as BigSource)).toEqual("1,234");
+      expect(formatInteger("-1234.567890" as BigSource)).toEqual("-1,234");
+    });
+    test("from string", () => {
+      expect(formatInteger(1234 as BigSource)).toEqual("1,234");
+      expect(formatInteger(-1234 as BigSource)).toEqual("-1,234");
+    });
   });
 });

From 066e890f2b948d1d352baf42a3be67efbb0b22d6 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 28 Jun 2023 18:10:47 +0700
Subject: [PATCH 291/354] fix: comment

---
 src/lib/utils/validate.test.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/lib/utils/validate.test.ts b/src/lib/utils/validate.test.ts
index d1a60f09b..447043103 100644
--- a/src/lib/utils/validate.test.ts
+++ b/src/lib/utils/validate.test.ts
@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 import { isCodeId, isTxHash, isBlock } from "./validate";
 
 describe("isCodeId", () => {
@@ -26,10 +27,10 @@ describe("isTxHash", () => {
     ).toBeTruthy();
   });
   describe("invalid", () => {
-    test("empty", () => {
+    test("empty string", () => {
       expect(isTxHash("")).toBeFalsy();
     });
-    test("hex", () => {
+    test("non-hexstring", () => {
       expect(
         isTxHash(
           "GE7C3F5D7C223257877BCF145452D8B5D45BFD55620B14EE97E6C86EDE16BFE7"
@@ -48,7 +49,7 @@ describe("isBlock", () => {
   });
   describe("invalid", () => {
     test("empty string", () => {
-      expect(isCodeId("1234ABCD")).toBeFalsy();
+      expect(isCodeId("")).toBeFalsy();
     });
     test("non-number string", () => {
       expect(isCodeId("1234ABCD")).toBeFalsy();

From 6ae9c8b1f1b2a88bbcddaf8b36862a94e33e986b Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 28 Jun 2023 18:36:50 +0700
Subject: [PATCH 292/354] fix: handle coverage in stores/code.ts

---
 src/lib/stores/code.test.ts | 48 +++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/lib/stores/code.test.ts b/src/lib/stores/code.test.ts
index 410eec08f..b0e67b479 100644
--- a/src/lib/stores/code.test.ts
+++ b/src/lib/stores/code.test.ts
@@ -3,6 +3,7 @@ import type { Addr } from "lib/types";
 import { CodeStore } from "./code";
 
 const TEST_USER_KEY = "test-default-address";
+const EMPTY_USER_KEY = "empty-user-address";
 
 test("CodeStore setting userkey", () => {
   const codeStore = new CodeStore();
@@ -20,6 +21,17 @@ describe("CodeStore", () => {
 
   test("code local info", () => {
     expect(codeStore.getCodeLocalInfo(1)).toBeUndefined();
+    // Do nothing as no code is saved
+    codeStore.removeSavedCode(1);
+
+    codeStore.updateCodeInfo(
+      1,
+      "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly" as Addr
+    );
+    expect(codeStore.getCodeLocalInfo(1)).toStrictEqual({
+      id: 1,
+      uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
+    });
 
     codeStore.updateCodeInfo(
       1,
@@ -31,6 +43,7 @@ describe("CodeStore", () => {
       name: "code-name",
       uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
     });
+    expect(codeStore.getCodeLocalInfo(2)).toBeUndefined();
 
     expect(codeStore.lastSavedCodes(TEST_USER_KEY)).toStrictEqual([]);
     codeStore.saveNewCode(1);
@@ -41,6 +54,41 @@ describe("CodeStore", () => {
         uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
       },
     ]);
+
+    expect(codeStore.lastSavedCodes(EMPTY_USER_KEY)).toStrictEqual([]);
+
+    expect(codeStore.isCodeIdSaved(2)).toBeFalsy();
+    codeStore.saveNewCode(2);
+    expect(codeStore.lastSavedCodes(TEST_USER_KEY)).toStrictEqual([
+      {
+        id: 2,
+        name: undefined,
+        uploader: "N/A",
+      },
+      {
+        id: 1,
+        name: "code-name",
+        uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
+      },
+    ]);
+
+    codeStore.updateCodeInfo(
+      2,
+      "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly" as Addr,
+      ""
+    );
+    expect(codeStore.lastSavedCodes(TEST_USER_KEY)).toStrictEqual([
+      {
+        id: 2,
+        name: undefined,
+        uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
+      },
+      {
+        id: 1,
+        name: "code-name",
+        uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
+      },
+    ]);
   });
 
   test("save codes", () => {

From 80ab75faae3eb37a0d9f727987b6384a7346e7fa Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 29 Jun 2023 15:22:23 +0700
Subject: [PATCH 293/354] feat: add override api endpoint

---
 src/env.ts                                    |  3 +++
 src/lib/app-provider/hooks/useBaseApiRoute.ts | 11 ++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/env.ts b/src/env.ts
index 36675f879..f9f274035 100644
--- a/src/env.ts
+++ b/src/env.ts
@@ -18,6 +18,9 @@ export const DEFAULT_SUPPORTED_CHAIN_ID = SUPPORTED_CHAIN_IDS[0];
 
 export const DUMMY_MNEMONIC = process.env.NEXT_PUBLIC_DUMMY_MNEMONIC;
 
+export const OVERRIDE_API_ENDPOINT =
+  process.env.NEXT_PUBLIC_OVERRIDE_API_ENDPOINT;
+
 // CURRENT THEME CONFIG
 export const CURR_THEME = (() => {
   switch (process.env.NEXT_PUBLIC_THEME) {
diff --git a/src/lib/app-provider/hooks/useBaseApiRoute.ts b/src/lib/app-provider/hooks/useBaseApiRoute.ts
index 404ba37e2..6456f2659 100644
--- a/src/lib/app-provider/hooks/useBaseApiRoute.ts
+++ b/src/lib/app-provider/hooks/useBaseApiRoute.ts
@@ -1,4 +1,5 @@
 import { useCelatoneApp } from "../contexts";
+import { OVERRIDE_API_ENDPOINT } from "env";
 
 export const useBaseApiRoute = (
   type:
@@ -12,13 +13,17 @@ export const useBaseApiRoute = (
     | "rest"
 ): string => {
   const {
-    chainConfig: { chain, api },
+    chainConfig: { chain, api: configApi },
     currentChainId,
   } = useCelatoneApp();
-  if (!chain || !api || !currentChainId)
+
+  if (!chain || !currentChainId || !configApi)
     throw new Error(
-      "Error retrieving chain, api, or currentChainId from chain config."
+      "Error retrieving chain, api,  or currentChainId from chain config."
     );
+
+  const api = OVERRIDE_API_ENDPOINT || configApi;
+
   switch (type) {
     case "txs":
       return `${api}/txs/${chain}/${currentChainId}`;

From 2d569f30f86f89b71b65c35e4ea56fd90109ecb1 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 29 Jun 2023 15:23:21 +0700
Subject: [PATCH 294/354] docs: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c49811e73..87f146ad1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#411](https://github.com/alleslabs/celatone-frontend/pull/411) Add override api endpoint
 - [#385](https://github.com/alleslabs/celatone-frontend/pull/385) Upgrade cosmos kit major version and replace hooks
 - [#380](https://github.com/alleslabs/celatone-frontend/pull/380) Support local network
 - [#363](https://github.com/alleslabs/celatone-frontend/pull/363) Add config not found page and rewrite network logic

From a6a8311f01b9cf03e0f5c7d47c94700c329ea801 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 29 Jun 2023 15:28:24 +0700
Subject: [PATCH 295/354] fix: exceed whitespace

---
 src/lib/app-provider/hooks/useBaseApiRoute.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/app-provider/hooks/useBaseApiRoute.ts b/src/lib/app-provider/hooks/useBaseApiRoute.ts
index 6456f2659..4e986b481 100644
--- a/src/lib/app-provider/hooks/useBaseApiRoute.ts
+++ b/src/lib/app-provider/hooks/useBaseApiRoute.ts
@@ -19,7 +19,7 @@ export const useBaseApiRoute = (
 
   if (!chain || !currentChainId || !configApi)
     throw new Error(
-      "Error retrieving chain, api,  or currentChainId from chain config."
+      "Error retrieving chain, api, or currentChainId from chain config."
     );
 
   const api = OVERRIDE_API_ENDPOINT || configApi;

From 4da2d58cf9f5f49ade86ab4e51b5d3a3f564026c Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 29 Jun 2023 15:31:32 +0700
Subject: [PATCH 296/354] chore: change name

---
 src/env.ts                                    | 4 ++--
 src/lib/app-provider/hooks/useBaseApiRoute.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/env.ts b/src/env.ts
index f9f274035..cfce90d6b 100644
--- a/src/env.ts
+++ b/src/env.ts
@@ -18,8 +18,8 @@ export const DEFAULT_SUPPORTED_CHAIN_ID = SUPPORTED_CHAIN_IDS[0];
 
 export const DUMMY_MNEMONIC = process.env.NEXT_PUBLIC_DUMMY_MNEMONIC;
 
-export const OVERRIDE_API_ENDPOINT =
-  process.env.NEXT_PUBLIC_OVERRIDE_API_ENDPOINT;
+export const CELATONE_API_OVERRIDE =
+  process.env.NEXT_PUBLIC_CELATONE_API_OVERRIDE;
 
 // CURRENT THEME CONFIG
 export const CURR_THEME = (() => {
diff --git a/src/lib/app-provider/hooks/useBaseApiRoute.ts b/src/lib/app-provider/hooks/useBaseApiRoute.ts
index 4e986b481..4d9011300 100644
--- a/src/lib/app-provider/hooks/useBaseApiRoute.ts
+++ b/src/lib/app-provider/hooks/useBaseApiRoute.ts
@@ -1,5 +1,5 @@
 import { useCelatoneApp } from "../contexts";
-import { OVERRIDE_API_ENDPOINT } from "env";
+import { CELATONE_API_OVERRIDE } from "env";
 
 export const useBaseApiRoute = (
   type:
@@ -22,7 +22,7 @@ export const useBaseApiRoute = (
       "Error retrieving chain, api, or currentChainId from chain config."
     );
 
-  const api = OVERRIDE_API_ENDPOINT || configApi;
+  const api = CELATONE_API_OVERRIDE || configApi;
 
   switch (type) {
     case "txs":

From 19d559d224a00e0582188066d0cbfe3e1569755e Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 30 Jun 2023 11:21:12 +0700
Subject: [PATCH 297/354] test: add test cases for date utils

---
 CHANGELOG.md               |   1 +
 package.json               |   1 +
 src/lib/utils/date.test.ts | 219 +++++++++++++++++++++++++++++++++++++
 src/lib/utils/date.ts      |   7 +-
 yarn.lock                  |   5 +
 5 files changed, 231 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/utils/date.test.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ece2dcd41..b86576b2f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -56,6 +56,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#413](https://github.com/alleslabs/celatone-frontend/pull/413) Add jest test cases for date utils
 - [#404](https://github.com/alleslabs/celatone-frontend/pull/404) Use internal navigate instead of app link for block navigation
 - [#396](https://github.com/alleslabs/celatone-frontend/pull/396) Refactor useConfig, disable wasm related tabs on the public project page
 - [#392](https://github.com/alleslabs/celatone-frontend/pull/392) Refactor proposal table and fix empty state of the proposal list table
diff --git a/package.json b/package.json
index 2f55c8500..d1fde484a 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
     "husky": "^8.0.1",
     "jest": "^29.5.0",
     "lint-staged": "^13.0.3",
+    "mockdate": "^3.0.5",
     "next-sitemap": "^3.1.25",
     "prettier": "^2.7.1",
     "standard-version": "^9.5.0",
diff --git a/src/lib/utils/date.test.ts b/src/lib/utils/date.test.ts
new file mode 100644
index 000000000..3b3e5af30
--- /dev/null
+++ b/src/lib/utils/date.test.ts
@@ -0,0 +1,219 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import MockDate from "mockdate";
+
+import {
+  getDefaultDate,
+  getCurrentDate,
+  parseDate,
+  parseDateOpt,
+  parseDateDefault,
+  formatUTC,
+  dateFromNow,
+  formatSeconds,
+} from "./date";
+
+const MOCK_CURRENT_ISO = "2026-06-06T06:00:00.000Z";
+const DEFAULT_ISO = "1970-01-01T00:00:00.000Z";
+
+beforeEach(() => {
+  MockDate.set(new Date(MOCK_CURRENT_ISO));
+});
+
+afterEach(() => {
+  MockDate.reset();
+});
+
+describe("getDefaultDate", () => {
+  test("should correctly return default date", () => {
+    expect(getDefaultDate().toISOString()).toEqual(DEFAULT_ISO);
+  });
+});
+
+describe("getCurrentDate", () => {
+  test("should correctly return current date", () => {
+    expect(getCurrentDate().toISOString()).toEqual(MOCK_CURRENT_ISO);
+  });
+});
+
+describe("parseDate", () => {
+  test("should correctly parse date from string", () => {
+    let d = "2018";
+    expect(parseDate(d).toISOString()).toEqual("2018-01-01T00:00:00.000Z");
+    d = "2018-04";
+    expect(parseDate(d).toISOString()).toEqual("2018-04-01T00:00:00.000Z");
+    d = "2018-04-24";
+    expect(parseDate(d).toISOString()).toEqual("2018-04-24T00:00:00.000Z");
+    d = "2018-04-24 11:12";
+    expect(parseDate(d).toISOString()).toEqual("2018-04-24T11:12:00.000Z");
+    d = "2018-05-02 11:12:13";
+    expect(parseDate(d).toISOString()).toEqual("2018-05-02T11:12:13.000Z");
+    d = "2018-05-02 11:12:13.998";
+    expect(parseDate(d).toISOString()).toEqual("2018-05-02T11:12:13.998Z");
+    d = "2018036187";
+    expect(parseDate(d).toISOString()).toEqual("2018-05-03T15:00:00.000Z");
+  });
+});
+
+describe("parseDateOpt", () => {
+  test("should correctly parse date from string", () => {
+    let d = "2018";
+    expect(parseDateOpt(d)?.toISOString()).toEqual("2018-01-01T00:00:00.000Z");
+    d = "2018-04";
+    expect(parseDateOpt(d)?.toISOString()).toEqual("2018-04-01T00:00:00.000Z");
+    d = "2018-04-24";
+    expect(parseDateOpt(d)?.toISOString()).toEqual("2018-04-24T00:00:00.000Z");
+    d = "2018-04-24 11:12";
+    expect(parseDateOpt(d)?.toISOString()).toEqual("2018-04-24T11:12:00.000Z");
+    d = "2018-05-02 11:12:13";
+    expect(parseDateOpt(d)?.toISOString()).toEqual("2018-05-02T11:12:13.000Z");
+    d = "2018-05-02 11:12:13.998";
+    expect(parseDateOpt(d)?.toISOString()).toEqual("2018-05-02T11:12:13.998Z");
+    d = "2018036187";
+    expect(parseDateOpt(d)?.toISOString()).toEqual("2018-05-03T15:00:00.000Z");
+  });
+  test("should correctly return undefined for undefined/falsy parameter", () => {
+    // undefined and falsy cases
+    expect(parseDateOpt(undefined)).toBeUndefined();
+    expect(parseDateOpt("")).toBeUndefined();
+  });
+});
+
+describe("parseDateDefault", () => {
+  test("should correctly parse date from string", () => {
+    let d = "2018";
+    expect(parseDateDefault(d).toISOString()).toEqual(
+      "2018-01-01T00:00:00.000Z"
+    );
+    d = "2018-04";
+    expect(parseDateDefault(d).toISOString()).toEqual(
+      "2018-04-01T00:00:00.000Z"
+    );
+    d = "2018-04-24";
+    expect(parseDateDefault(d).toISOString()).toEqual(
+      "2018-04-24T00:00:00.000Z"
+    );
+    d = "2018-04-24 11:12";
+    expect(parseDateDefault(d).toISOString()).toEqual(
+      "2018-04-24T11:12:00.000Z"
+    );
+    d = "2018-05-02 11:12:13";
+    expect(parseDateDefault(d).toISOString()).toEqual(
+      "2018-05-02T11:12:13.000Z"
+    );
+    d = "2018-05-02 11:12:13.998";
+    expect(parseDateDefault(d).toISOString()).toEqual(
+      "2018-05-02T11:12:13.998Z"
+    );
+    d = "2018036187";
+    expect(parseDateDefault(d).toISOString()).toEqual(
+      "2018-05-03T15:00:00.000Z"
+    );
+  });
+  test("should correctly return default value for undefined/falsy parameter", () => {
+    // undefined and falsy cases
+    expect(parseDateDefault(undefined).toISOString()).toEqual(DEFAULT_ISO);
+    expect(parseDateDefault("").toISOString()).toEqual(DEFAULT_ISO);
+  });
+});
+
+describe("formatUTC", () => {
+  test("should correctly format date to UTC string", () => {
+    let d = parseDate("2018");
+    expect(formatUTC(d)).toEqual("Jan 01, 2018, 12:00:00 AM (UTC)");
+    d = parseDate("2018-04");
+    expect(formatUTC(d)).toEqual("Apr 01, 2018, 12:00:00 AM (UTC)");
+    d = parseDate("2018-04-24");
+    expect(formatUTC(d)).toEqual("Apr 24, 2018, 12:00:00 AM (UTC)");
+    d = parseDate("2018-04-24 11:12");
+    expect(formatUTC(d)).toEqual("Apr 24, 2018, 11:12:00 AM (UTC)");
+    d = parseDate("2018-05-02 11:12:13");
+    expect(formatUTC(d)).toEqual("May 02, 2018, 11:12:13 AM (UTC)");
+    d = parseDate("2018-05-02 11:12:13.998");
+    expect(formatUTC(d)).toEqual("May 02, 2018, 11:12:13 AM (UTC)");
+    d = parseDate("2018036187");
+    expect(formatUTC(d)).toEqual("May 03, 2018, 3:00:00 PM (UTC)");
+  });
+});
+
+describe("dateFromNow", () => {
+  test("(Past) should correctly get date from now", () => {
+    // Past
+    let d = parseDate("2026-06-06T05:59:30.000Z");
+    expect(dateFromNow(d)).toEqual("a few seconds ago");
+    d = parseDate("2026-06-06T05:59:00.000Z");
+    expect(dateFromNow(d)).toEqual("a minute ago");
+    d = parseDate("2026-06-06T05:30:00.000Z");
+    expect(dateFromNow(d)).toEqual("30 minutes ago");
+    d = parseDate("2026-06-06T05:00:00.000Z");
+    expect(dateFromNow(d)).toEqual("an hour ago");
+    d = parseDate("2026-06-06T00:00:00.000Z");
+    expect(dateFromNow(d)).toEqual("6 hours ago");
+    d = parseDate("2026-06-05T06:00:00.000Z");
+    expect(dateFromNow(d)).toEqual("a day ago");
+    d = parseDate("2026-05-31T06:00:00.000Z");
+    expect(dateFromNow(d)).toEqual("6 days ago");
+    d = parseDate("2026-05-06T06:00:00.000Z");
+    expect(dateFromNow(d)).toEqual("a month ago");
+    d = parseDate("2025-12-06T06:00:00.000Z");
+    expect(dateFromNow(d)).toEqual("6 months ago");
+    d = parseDate("2025-06-06T06:00:00.000Z");
+    expect(dateFromNow(d)).toEqual("a year ago");
+    d = parseDate("2012-06-06T06:00:00.000Z");
+    expect(dateFromNow(d)).toEqual("14 years ago");
+  });
+
+  test("(Future) should correctly get date from now", () => {
+    // Future
+    let d = parseDate("2026-06-06T06:00:30.000Z");
+    expect(dateFromNow(d)).toEqual("in a few seconds");
+    d = parseDate("2026-06-06T06:00:50.000Z");
+    expect(dateFromNow(d)).toEqual("in a minute");
+    d = parseDate("2026-06-06T06:30:00.000Z");
+    expect(dateFromNow(d)).toEqual("in 30 minutes");
+    d = parseDate("2026-06-06T07:00:00.000Z");
+    expect(dateFromNow(d)).toEqual("in an hour");
+    d = parseDate("2026-06-06T12:00:00.000Z");
+    expect(dateFromNow(d)).toEqual("in 6 hours");
+    d = parseDate("2026-06-07T06:00:00.000Z");
+    expect(dateFromNow(d)).toEqual("in a day");
+    d = parseDate("2026-06-12T06:00:00.000Z");
+    expect(dateFromNow(d)).toEqual("in 6 days");
+    d = parseDate("2026-07-06T06:00:00.000Z");
+    expect(dateFromNow(d)).toEqual("in a month");
+    d = parseDate("2026-12-06T06:00:00.000Z");
+    expect(dateFromNow(d)).toEqual("in 6 months");
+    d = parseDate("2027-06-06T06:00:00.000Z");
+    expect(dateFromNow(d)).toEqual("in a year");
+    d = parseDate("2040-06-06T06:00:00.000Z");
+    expect(dateFromNow(d)).toEqual("in 14 years");
+  });
+});
+
+describe("formatSeconds", () => {
+  test("should correctly format seconds", () => {
+    let s = "1000000s";
+    expect(formatSeconds(s)).toEqual("11 days");
+    s = "86400s";
+    expect(formatSeconds(s)).toEqual("1 day");
+    s = "7200s";
+    expect(formatSeconds(s)).toEqual("2 hours");
+    s = "3600s";
+    expect(formatSeconds(s)).toEqual("1 hour");
+    s = "120s";
+    expect(formatSeconds(s)).toEqual("2 minutes");
+    s = "60s";
+    expect(formatSeconds(s)).toEqual("1 minute");
+    s = "30s";
+    expect(formatSeconds(s)).toEqual("30 seconds");
+    s = "1s";
+    expect(formatSeconds(s)).toEqual("1 second");
+    s = "0s";
+    expect(formatSeconds(s)).toEqual("0 second");
+  });
+  test("should correctly return fallback for undefined/NaN/lesser than 0 parameter", () => {
+    expect(formatSeconds(undefined)).toEqual("N/A");
+    expect(formatSeconds("")).toEqual("N/A");
+    expect(formatSeconds("ABCDEs")).toEqual("N/A");
+    expect(formatSeconds("-1s")).toEqual("N/A");
+  });
+});
diff --git a/src/lib/utils/date.ts b/src/lib/utils/date.ts
index 89173bbee..70600dd90 100644
--- a/src/lib/utils/date.ts
+++ b/src/lib/utils/date.ts
@@ -27,9 +27,10 @@ export const formatUTC = (date: Date) =>
 export const dateFromNow = (date: Date) => dayjs.utc(date).fromNow();
 
 export const formatSeconds = (sec: Option<string>) => {
-  if (!sec) return "N/A";
+  if (sec === undefined || Number.isNaN(parseInt(sec, 10))) return "N/A";
   const formatSec = big(sec.replace("s", ""));
 
+  // TODO: use `pluralize` here
   switch (true) {
     case formatSec.gte(86400): {
       const days = formatSec.div(86400).round(0, 0).toNumber();
@@ -43,7 +44,9 @@ export const formatSeconds = (sec: Option<string>) => {
       const mins = formatSec.div(60).round(0, 0).toNumber();
       return `${mins} minute`.concat(mins > 1 ? "s" : "");
     }
+    case formatSec.lt(0):
+      return "N/A";
     default:
-      return `${formatSec.toFixed()} seconds`;
+      return `${formatSec.toFixed()} second`.concat(formatSec.gt(1) ? "s" : "");
   }
 };
diff --git a/yarn.lock b/yarn.lock
index 42b92ff7b..794e353a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9781,6 +9781,11 @@ mobx@^6.6.2:
   resolved "https://registry.npmjs.org/mobx/-/mobx-6.6.2.tgz"
   integrity sha512-IOpS0bf3+hXIhDIy+CmlNMBfFpAbHS0aVHcNC+xH/TFYEKIIVDKNYRh9eKlXuVfJ1iRKAp0cRVmO145CyJAMVQ==
 
+mockdate@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/mockdate/-/mockdate-3.0.5.tgz#789be686deb3149e7df2b663d2bc4392bc3284fb"
+  integrity sha512-iniQP4rj1FhBdBYS/+eQv7j1tadJ9lJtdzgOpvsOHng/GbcDh2Fhdeq+ZRldrPYdXvCyfFUmFeEwEGXZB5I/AQ==
+
 modify-values@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz"

From 6125de3847dfef294fa53e4da14a51fc588344a6 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 30 Jun 2023 12:51:53 +0700
Subject: [PATCH 298/354] fix: add more comment

---
 src/lib/stores/code.test.ts | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/lib/stores/code.test.ts b/src/lib/stores/code.test.ts
index b0e67b479..34f8a1bb4 100644
--- a/src/lib/stores/code.test.ts
+++ b/src/lib/stores/code.test.ts
@@ -20,10 +20,12 @@ describe("CodeStore", () => {
   });
 
   test("code local info", () => {
+    // 1. after initialization nothing in the store
     expect(codeStore.getCodeLocalInfo(1)).toBeUndefined();
-    // Do nothing as no code is saved
+    // -- Do nothing as no code is saved
     codeStore.removeSavedCode(1);
 
+    // 2. add info for code 1 with no code name
     codeStore.updateCodeInfo(
       1,
       "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly" as Addr
@@ -33,6 +35,7 @@ describe("CodeStore", () => {
       uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
     });
 
+    // 3. update name for code 1
     codeStore.updateCodeInfo(
       1,
       "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly" as Addr,
@@ -43,8 +46,8 @@ describe("CodeStore", () => {
       name: "code-name",
       uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
     });
-    expect(codeStore.getCodeLocalInfo(2)).toBeUndefined();
 
+    // 4. add code 1 to the saved codes list
     expect(codeStore.lastSavedCodes(TEST_USER_KEY)).toStrictEqual([]);
     codeStore.saveNewCode(1);
     expect(codeStore.lastSavedCodes(TEST_USER_KEY)).toStrictEqual([
@@ -54,10 +57,14 @@ describe("CodeStore", () => {
         uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
       },
     ]);
-
+    // -- There should be no update to another user's last saved codes list
     expect(codeStore.lastSavedCodes(EMPTY_USER_KEY)).toStrictEqual([]);
 
+    // 5. add code 2 (with no info) to the saved codes list
+    // -- Validate code 2 is never saved and have no info
     expect(codeStore.isCodeIdSaved(2)).toBeFalsy();
+    expect(codeStore.getCodeLocalInfo(2)).toBeUndefined();
+
     codeStore.saveNewCode(2);
     expect(codeStore.lastSavedCodes(TEST_USER_KEY)).toStrictEqual([
       {
@@ -72,6 +79,7 @@ describe("CodeStore", () => {
       },
     ]);
 
+    // 6. update info for code 2
     codeStore.updateCodeInfo(
       2,
       "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly" as Addr,

From 86031c9ae315bb176a12ad9fa2ba14e0b8dd302f Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 30 Jun 2023 13:37:06 +0700
Subject: [PATCH 299/354] fix: add cases

---
 src/lib/utils/formatter/token.test.ts | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/lib/utils/formatter/token.test.ts b/src/lib/utils/formatter/token.test.ts
index 7124a3fa4..1a95b42a4 100644
--- a/src/lib/utils/formatter/token.test.ts
+++ b/src/lib/utils/formatter/token.test.ts
@@ -22,7 +22,7 @@ describe("formatDecimal", () => {
 
   describe("invalid", () => {
     test("empty string", () => {
-      expect(f("invalid value", FALLBACK)).toEqual(FALLBACK);
+      expect(f("", FALLBACK)).toEqual(FALLBACK);
     });
     test("non-number string", () => {
       expect(f("invalid value", FALLBACK)).toEqual(FALLBACK);
@@ -42,6 +42,9 @@ describe("formatDecimal", () => {
     expect(f("-12345678", FALLBACK)).toEqual("-12345678.0000");
     expect(f("-12345.678", FALLBACK)).toEqual("-12345.6780");
 
+    expect(fDelim("00.000", FALLBACK)).toEqual("0.0000");
+    expect(fDelim("0.0000001", FALLBACK)).toEqual("0.0000");
+    expect(fDelim("0.123", FALLBACK)).toEqual("0.1230");
     expect(fDelim("123", FALLBACK)).toEqual("123.0000");
     expect(fDelim("01234", FALLBACK)).toEqual("1,234.0000");
     expect(fDelim("12340", FALLBACK)).toEqual("12,340.0000");
@@ -49,6 +52,10 @@ describe("formatDecimal", () => {
     expect(fDelim("12345.678", FALLBACK)).toEqual("12,345.6780");
     expect(fDelim("123.45678", FALLBACK)).toEqual("123.4567");
 
+    expect(fDelim("-0", FALLBACK)).toEqual("0.0000");
+    expect(fDelim("-0.0000001", FALLBACK)).toEqual("0.0000");
+    expect(fDelim("-0.123", FALLBACK)).toEqual("-0.1230");
+    expect(fDelim("-01.230", FALLBACK)).toEqual("-1.2300");
     expect(fDelim("-123", FALLBACK)).toEqual("-123.0000");
     expect(fDelim("-01234", FALLBACK)).toEqual("-1,234.0000");
     expect(fDelim("-12340", FALLBACK)).toEqual("-12,340.0000");
@@ -68,12 +75,16 @@ describe("formatDecimal", () => {
     expect(f(-12345678, FALLBACK)).toEqual("-12345678.0000");
     expect(f(-12345.678, FALLBACK)).toEqual("-12345.6780");
 
+    expect(fDelim(0, FALLBACK)).toEqual("0.0000");
+    expect(fDelim(0.123, FALLBACK)).toEqual("0.1230");
     expect(fDelim(123, FALLBACK)).toEqual("123.0000");
     expect(fDelim(12340, FALLBACK)).toEqual("12,340.0000");
     expect(fDelim(12345678, FALLBACK)).toEqual("12,345,678.0000");
     expect(fDelim(12345.678, FALLBACK)).toEqual("12,345.6780");
     expect(fDelim(123.45678, FALLBACK)).toEqual("123.4567");
 
+    expect(fDelim(-0, FALLBACK)).toEqual("0.0000");
+    expect(fDelim(-0.123, FALLBACK)).toEqual("-0.1230");
     expect(fDelim(-123, FALLBACK)).toEqual("-123.0000");
     expect(fDelim(-12340, FALLBACK)).toEqual("-12,340.0000");
     expect(fDelim(-12345678, FALLBACK)).toEqual("-12,345,678.0000");
@@ -205,8 +216,7 @@ describe("formatUTokenWithPrecision", () => {
       expect(
         formatUTokenWithPrecision(
           "12345678901234567890" as U<Token<BigSource>>,
-          6,
-          true
+          6
         )
       ).toEqual("12,345.67B");
     });

From 31dc16981fd0c326bac9cedfd18833048792da9a Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 30 Jun 2023 14:04:02 +0700
Subject: [PATCH 300/354] fix: remove beforeEach

---
 src/lib/stores/code.test.ts | 150 +++++++++++++++++++-----------------
 1 file changed, 80 insertions(+), 70 deletions(-)

diff --git a/src/lib/stores/code.test.ts b/src/lib/stores/code.test.ts
index 34f8a1bb4..1598eb67b 100644
--- a/src/lib/stores/code.test.ts
+++ b/src/lib/stores/code.test.ts
@@ -14,92 +14,102 @@ test("CodeStore setting userkey", () => {
 
 describe("CodeStore", () => {
   let codeStore: CodeStore;
-  beforeEach(() => {
+  const initCodeStore = () => {
     codeStore = new CodeStore();
     codeStore.setCodeUserKey(TEST_USER_KEY);
-  });
+  };
 
-  test("code local info", () => {
-    // 1. after initialization nothing in the store
-    expect(codeStore.getCodeLocalInfo(1)).toBeUndefined();
-    // -- Do nothing as no code is saved
-    codeStore.removeSavedCode(1);
+  describe("code local info", () => {
+    test("after initialization nothing in the store", () => {
+      initCodeStore();
 
-    // 2. add info for code 1 with no code name
-    codeStore.updateCodeInfo(
-      1,
-      "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly" as Addr
-    );
-    expect(codeStore.getCodeLocalInfo(1)).toStrictEqual({
-      id: 1,
-      uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
+      expect(codeStore.getCodeLocalInfo(1)).toBeUndefined();
+      // Do nothing as no code is saved
+      codeStore.removeSavedCode(1);
     });
 
-    // 3. update name for code 1
-    codeStore.updateCodeInfo(
-      1,
-      "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly" as Addr,
-      "code-name"
-    );
-    expect(codeStore.getCodeLocalInfo(1)).toStrictEqual({
-      id: 1,
-      name: "code-name",
-      uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
+    test("add info for code 1 with no code name", () => {
+      codeStore.updateCodeInfo(
+        1,
+        "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly" as Addr
+      );
+      expect(codeStore.getCodeLocalInfo(1)).toStrictEqual({
+        id: 1,
+        uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
+      });
     });
 
-    // 4. add code 1 to the saved codes list
-    expect(codeStore.lastSavedCodes(TEST_USER_KEY)).toStrictEqual([]);
-    codeStore.saveNewCode(1);
-    expect(codeStore.lastSavedCodes(TEST_USER_KEY)).toStrictEqual([
-      {
+    test("update name for code 1", () => {
+      codeStore.updateCodeInfo(
+        1,
+        "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly" as Addr,
+        "code-name"
+      );
+      expect(codeStore.getCodeLocalInfo(1)).toStrictEqual({
         id: 1,
         name: "code-name",
         uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
-      },
-    ]);
-    // -- There should be no update to another user's last saved codes list
-    expect(codeStore.lastSavedCodes(EMPTY_USER_KEY)).toStrictEqual([]);
+      });
+    });
 
-    // 5. add code 2 (with no info) to the saved codes list
-    // -- Validate code 2 is never saved and have no info
-    expect(codeStore.isCodeIdSaved(2)).toBeFalsy();
-    expect(codeStore.getCodeLocalInfo(2)).toBeUndefined();
+    test("add code 1 to the saved codes list", () => {
+      expect(codeStore.lastSavedCodes(TEST_USER_KEY)).toStrictEqual([]);
+      codeStore.saveNewCode(1);
+      expect(codeStore.lastSavedCodes(TEST_USER_KEY)).toStrictEqual([
+        {
+          id: 1,
+          name: "code-name",
+          uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
+        },
+      ]);
+      // There should be no update to another user's last saved codes list
+      expect(codeStore.lastSavedCodes(EMPTY_USER_KEY)).toStrictEqual([]);
+    });
 
-    codeStore.saveNewCode(2);
-    expect(codeStore.lastSavedCodes(TEST_USER_KEY)).toStrictEqual([
-      {
-        id: 2,
-        name: undefined,
-        uploader: "N/A",
-      },
-      {
-        id: 1,
-        name: "code-name",
-        uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
-      },
-    ]);
-
-    // 6. update info for code 2
-    codeStore.updateCodeInfo(
-      2,
-      "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly" as Addr,
-      ""
-    );
-    expect(codeStore.lastSavedCodes(TEST_USER_KEY)).toStrictEqual([
-      {
-        id: 2,
-        name: undefined,
-        uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
-      },
-      {
-        id: 1,
-        name: "code-name",
-        uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
-      },
-    ]);
+    test("add code 2 (with no info) to the saved codes list", () => {
+      // validate code 2 is never saved and have no info
+      expect(codeStore.isCodeIdSaved(2)).toBeFalsy();
+      expect(codeStore.getCodeLocalInfo(2)).toBeUndefined();
+
+      codeStore.saveNewCode(2);
+      expect(codeStore.lastSavedCodes(TEST_USER_KEY)).toStrictEqual([
+        {
+          id: 2,
+          name: undefined,
+          uploader: "N/A",
+        },
+        {
+          id: 1,
+          name: "code-name",
+          uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
+        },
+      ]);
+    });
+
+    test("update info for code 2", () => {
+      codeStore.updateCodeInfo(
+        2,
+        "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly" as Addr,
+        ""
+      );
+      expect(codeStore.lastSavedCodes(TEST_USER_KEY)).toStrictEqual([
+        {
+          id: 2,
+          name: undefined,
+          uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
+        },
+        {
+          id: 1,
+          name: "code-name",
+          uploader: "celat1r02tlyyaqs6tmrfa4jf37t7ewuxr57qp8ghzly",
+        },
+      ]);
+    });
   });
 
   test("save codes", () => {
+    initCodeStore();
+
     expect(codeStore.isCodeIdSaved(1)).toBeFalsy();
     expect(codeStore.lastSavedCodeIds(TEST_USER_KEY)).toStrictEqual([]);
 

From c4d969c3f6c935e8a84c21ed9022d00b30f0e915 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 30 Jun 2023 15:02:26 +0700
Subject: [PATCH 301/354] fix: add negative cases

---
 src/lib/utils/formatter/token.test.ts | 122 +++++++++++---------------
 src/lib/utils/formatter/token.ts      |  13 ++-
 2 files changed, 59 insertions(+), 76 deletions(-)

diff --git a/src/lib/utils/formatter/token.test.ts b/src/lib/utils/formatter/token.test.ts
index 1a95b42a4..2435785d7 100644
--- a/src/lib/utils/formatter/token.test.ts
+++ b/src/lib/utils/formatter/token.test.ts
@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-import type { Big, BigSource } from "big.js";
+import type { Big } from "big.js";
 import big from "big.js";
 
 import type { Token, U, USD } from "lib/types";
@@ -134,112 +134,87 @@ describe("d6Formatter", () => {
 describe("toToken", () => {
   describe("invalid", () => {
     test("empty string", () => {
-      expect(toToken("" as U<Token<BigSource>>, 6)).toEqual(
-        big(0) as Token<Big>
-      );
+      expect(toToken("" as U<Token>, 6)).toEqual(big(0) as Token<Big>);
     });
     test("non-number string", () => {
-      expect(toToken("ABC" as U<Token<BigSource>>, 6)).toEqual(
-        big(0) as Token<Big>
-      );
+      expect(toToken("ABC" as U<Token>, 6)).toEqual(big(0) as Token<Big>);
     });
     test("NaN", () => {
-      expect(toToken(NaN as U<Token<BigSource>>, 6)).toEqual(
-        big(0) as Token<Big>
-      );
+      expect(toToken(NaN as U<Token<number>>, 6)).toEqual(big(0) as Token<Big>);
+    });
+    test("negative number", () => {
+      expect(toToken(-1 as U<Token<number>>, 6)).toEqual(big(0) as Token<Big>);
     });
   });
   test("more than 1", () => {
-    expect(toToken(12345678 as U<Token<BigSource>>, 6)).toEqual(
+    expect(toToken(12345678 as U<Token<number>>, 6)).toEqual(
       big(12.345678) as Token<Big>
     );
-    expect(toToken("123456789" as U<Token<BigSource>>, 6)).toEqual(
+    expect(toToken("123456789" as U<Token>, 6)).toEqual(
       big(123.456789) as Token<Big>
     );
   });
   test("less than 1", () => {
-    expect(toToken(1234 as U<Token<BigSource>>, 6)).toEqual(
+    expect(toToken(0 as U<Token<number>>, 6)).toEqual(big(0.0) as Token<Big>);
+    expect(toToken(1234 as U<Token<number>>, 6)).toEqual(
       big(0.001234) as Token<Big>
     );
-    expect(toToken("234" as U<Token<BigSource>>, 6)).toEqual(
-      big(0.000234) as Token<Big>
-    );
+    expect(toToken("234" as U<Token>, 6)).toEqual(big(0.000234) as Token<Big>);
   });
 });
 
 describe("formatUTokenWithPrecision", () => {
   describe("invalid", () => {
     test("empty string", () => {
-      expect(
-        formatUTokenWithPrecision("" as U<Token<BigSource>>, 6, false)
-      ).toEqual("0.000000");
-      expect(
-        formatUTokenWithPrecision("" as U<Token<BigSource>>, 6, true, 1)
-      ).toEqual("0.0");
+      expect(formatUTokenWithPrecision("" as U<Token>, 6, false)).toEqual(
+        "0.000000"
+      );
+      expect(formatUTokenWithPrecision("" as U<Token>, 6, true, 1)).toEqual(
+        "0.0"
+      );
     });
     test("NaN", () => {
       expect(
-        formatUTokenWithPrecision(NaN as U<Token<BigSource>>, 8, false)
+        formatUTokenWithPrecision(NaN as U<Token<number>>, 8, false)
       ).toEqual("0.00000000");
       expect(
-        formatUTokenWithPrecision(NaN as U<Token<BigSource>>, 6, true, 3)
+        formatUTokenWithPrecision(NaN as U<Token<number>>, 6, true, 3)
       ).toEqual("0.000");
     });
   });
   test("no suffix", () => {
     expect(
-      formatUTokenWithPrecision(
-        "12345678901234567890" as U<Token<BigSource>>,
-        6,
-        false
-      )
+      formatUTokenWithPrecision("12345678901234567890" as U<Token>, 6, false)
     ).toEqual("12,345,678,901,234.567890");
     expect(
-      formatUTokenWithPrecision(
-        "12345678901234567890" as U<Token<BigSource>>,
-        6,
-        false,
-        2
-      )
+      formatUTokenWithPrecision("12345678901234567890" as U<Token>, 6, false, 2)
     ).toEqual("12,345,678,901,234.56");
     expect(
-      formatUTokenWithPrecision(
-        "12345678901234567890" as U<Token<BigSource>>,
-        6,
-        false,
-        8
-      )
+      formatUTokenWithPrecision("12345678901234567890" as U<Token>, 6, false, 8)
     ).toEqual("12,345,678,901,234.56789000");
   });
   describe("with suffix", () => {
     test(">= B", () => {
       expect(
-        formatUTokenWithPrecision(
-          "12345678901234567890" as U<Token<BigSource>>,
-          6
-        )
+        formatUTokenWithPrecision("12345678901234567890" as U<Token>, 6)
       ).toEqual("12,345.67B");
     });
     test(">= M", () => {
       expect(
-        formatUTokenWithPrecision(
-          12345678901234 as U<Token<BigSource>>,
-          6,
-          true
-        )
+        formatUTokenWithPrecision(12345678901234 as U<Token<number>>, 6, true)
       ).toEqual("12.34M");
     });
     test(">= K", () => {
       expect(
-        formatUTokenWithPrecision(1234567890 as U<Token<BigSource>>, 6, true)
+        formatUTokenWithPrecision(1234567890 as U<Token<number>>, 6, true)
       ).toEqual("1,234.56");
     });
     test("< K", () => {
       expect(
-        formatUTokenWithPrecision(123456789 as U<Token<BigSource>>, 6, true)
+        formatUTokenWithPrecision(123456789 as U<Token<number>>, 6, true)
       ).toEqual("123.456789");
       expect(
-        formatUTokenWithPrecision(123456789 as U<Token<BigSource>>, 6, true, 3)
+        formatUTokenWithPrecision(123456789 as U<Token<number>>, 6, true, 3)
       ).toEqual("123.456");
     });
   });
@@ -248,45 +223,48 @@ describe("formatUTokenWithPrecision", () => {
 describe("formatPrice", () => {
   describe("invalid", () => {
     test("empty string", () => {
-      expect(formatPrice("" as USD<BigSource>)).toEqual("$0.00");
+      expect(formatPrice("" as USD)).toEqual("Not Available");
     });
     test("NaN", () => {
-      expect(formatPrice(NaN as USD<BigSource>)).toEqual("$0.00");
+      expect(formatPrice(NaN as USD<number>)).toEqual("Not Available");
+    });
+    test("negative number", () => {
+      expect(formatPrice(-1 as USD<number>)).toEqual("Not Available");
     });
   });
   describe("if 0, use 2 decimal points", () => {
     test("from string", () => {
-      expect(formatPrice("0" as USD<BigSource>)).toEqual("$0.00");
+      expect(formatPrice("0" as USD)).toEqual("$0.00");
     });
     test("from number", () => {
-      expect(formatPrice(0 as USD<BigSource>)).toEqual("$0.00");
+      expect(formatPrice(0 as USD<number>)).toEqual("$0.00");
     });
   });
   describe("> 1", () => {
     test("from string", () => {
-      expect(formatPrice("1.234" as USD<BigSource>)).toEqual("$1.23");
+      expect(formatPrice("1.234" as USD)).toEqual("$1.23");
     });
     test("from number", () => {
-      expect(formatPrice(1.0 as USD<BigSource>)).toEqual("$1.00");
-      expect(formatPrice(1.23 as USD<BigSource>)).toEqual("$1.23");
+      expect(formatPrice(1.0 as USD<number>)).toEqual("$1.00");
+      expect(formatPrice(1.23 as USD<number>)).toEqual("$1.23");
     });
   });
   describe("< 0.000001", () => {
     test("from string", () => {
-      expect(formatPrice("0.00000001" as USD<BigSource>)).toEqual("<$0.000001");
+      expect(formatPrice("0.00000001" as USD)).toEqual("<$0.000001");
     });
     test("from number", () => {
-      expect(formatPrice(0.0000001 as USD<BigSource>)).toEqual("<$0.000001");
+      expect(formatPrice(0.0000001 as USD<number>)).toEqual("<$0.000001");
     });
   });
   describe("0.000001 <= x < 1", () => {
     test("from string", () => {
-      expect(formatPrice("0.123" as USD<BigSource>)).toEqual("$0.123000");
-      expect(formatPrice("0.123456789" as USD<BigSource>)).toEqual("$0.123456");
+      expect(formatPrice("0.123" as USD)).toEqual("$0.123000");
+      expect(formatPrice("0.123456789" as USD)).toEqual("$0.123456");
     });
     test("from number", () => {
-      expect(formatPrice(0.123 as USD<BigSource>)).toEqual("$0.123000");
-      expect(formatPrice(0.123456789 as USD<BigSource>)).toEqual("$0.123456");
+      expect(formatPrice(0.123 as USD<number>)).toEqual("$0.123000");
+      expect(formatPrice(0.123456789 as USD<number>)).toEqual("$0.123456");
     });
   });
 });
@@ -294,20 +272,20 @@ describe("formatPrice", () => {
 describe("formatInteger", () => {
   describe("invalid", () => {
     test("empty string", () => {
-      expect(formatInteger("" as BigSource)).toEqual("Not Available");
+      expect(formatInteger("")).toEqual("Not Available");
     });
     test("NaN", () => {
-      expect(formatInteger(NaN as BigSource)).toEqual("Not Available");
+      expect(formatInteger(NaN)).toEqual("Not Available");
     });
   });
   describe("valid", () => {
     test("from string", () => {
-      expect(formatInteger("1234.567890" as BigSource)).toEqual("1,234");
-      expect(formatInteger("-1234.567890" as BigSource)).toEqual("-1,234");
+      expect(formatInteger("1234.567890")).toEqual("1,234");
+      expect(formatInteger("-1234.567890")).toEqual("-1,234");
     });
     test("from string", () => {
-      expect(formatInteger(1234 as BigSource)).toEqual("1,234");
-      expect(formatInteger(-1234 as BigSource)).toEqual("-1,234");
+      expect(formatInteger(1234)).toEqual("1,234");
+      expect(formatInteger(-1234)).toEqual("-1,234");
     });
   });
 });
diff --git a/src/lib/utils/formatter/token.ts b/src/lib/utils/formatter/token.ts
index 0ee623baa..7a7f6eda7 100644
--- a/src/lib/utils/formatter/token.ts
+++ b/src/lib/utils/formatter/token.ts
@@ -3,6 +3,8 @@ import big from "big.js";
 
 import type { Token, U, USD } from "lib/types";
 
+const NOT_AVAILABLE = "Not Available";
+
 const B = 1_000_000_000;
 const M = 1_000_000;
 const K = 1_000;
@@ -47,7 +49,8 @@ export const toToken = (
   // TODO: try toFixed(precision) here after having unit test?
 ): Token<Big> => {
   try {
-    return big(uAmount).div(big(10).pow(precision)) as Token<Big>;
+    const value = big(uAmount).div(big(10).pow(precision));
+    return (value.gte(0) ? value : big(0)) as Token<Big>;
   } catch {
     return big(0) as Token<Big>;
   }
@@ -73,7 +76,7 @@ export const formatUTokenWithPrecision = (
   return formatDecimal({
     decimalPoints: decimalPoints || precision,
     delimiter: true,
-  })(token, "0.00");
+  })(token, NOT_AVAILABLE);
 };
 
 /**
@@ -91,6 +94,8 @@ export const formatPrice = (value: USD<BigSource>): string => {
     const d2 = d2Formatter(price, "0.00");
     const d6 = d6Formatter(price, "0.00");
 
+    if (price.lt(0)) return NOT_AVAILABLE;
+
     if (price.eq(0) || price.gte(1)) {
       return `$${d2}`;
     }
@@ -100,11 +105,11 @@ export const formatPrice = (value: USD<BigSource>): string => {
     }
     return `$${d6}`;
   } catch {
-    return "$0.00";
+    return NOT_AVAILABLE;
   }
 };
 
 export const formatInteger = (n: BigSource): string => {
   const formatter = formatDecimal({ decimalPoints: 0, delimiter: true });
-  return formatter(n, "Not Available");
+  return formatter(n, NOT_AVAILABLE);
 };

From 445aa911ba863ec92516e68e44e46fc097217105 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 30 Jun 2023 15:11:11 +0700
Subject: [PATCH 302/354] fix: n/a text

---
 src/lib/utils/formatter/token.test.ts | 11 ++++++-----
 src/lib/utils/formatter/token.ts      | 10 +++++-----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/lib/utils/formatter/token.test.ts b/src/lib/utils/formatter/token.test.ts
index 2435785d7..410adc6f0 100644
--- a/src/lib/utils/formatter/token.test.ts
+++ b/src/lib/utils/formatter/token.test.ts
@@ -155,6 +155,7 @@ describe("toToken", () => {
     );
   });
   test("less than 1", () => {
+    expect(toToken("0.0" as U<Token>, 6)).toEqual(big(0.0) as Token<Big>);
     expect(toToken(0 as U<Token<number>>, 6)).toEqual(big(0.0) as Token<Big>);
     expect(toToken(1234 as U<Token<number>>, 6)).toEqual(
       big(0.001234) as Token<Big>
@@ -223,13 +224,13 @@ describe("formatUTokenWithPrecision", () => {
 describe("formatPrice", () => {
   describe("invalid", () => {
     test("empty string", () => {
-      expect(formatPrice("" as USD)).toEqual("Not Available");
+      expect(formatPrice("" as USD)).toEqual("N/A");
     });
     test("NaN", () => {
-      expect(formatPrice(NaN as USD<number>)).toEqual("Not Available");
+      expect(formatPrice(NaN as USD<number>)).toEqual("N/A");
     });
     test("negative number", () => {
-      expect(formatPrice(-1 as USD<number>)).toEqual("Not Available");
+      expect(formatPrice(-1 as USD<number>)).toEqual("N/A");
     });
   });
   describe("if 0, use 2 decimal points", () => {
@@ -272,10 +273,10 @@ describe("formatPrice", () => {
 describe("formatInteger", () => {
   describe("invalid", () => {
     test("empty string", () => {
-      expect(formatInteger("")).toEqual("Not Available");
+      expect(formatInteger("")).toEqual("N/A");
     });
     test("NaN", () => {
-      expect(formatInteger(NaN)).toEqual("Not Available");
+      expect(formatInteger(NaN)).toEqual("N/A");
     });
   });
   describe("valid", () => {
diff --git a/src/lib/utils/formatter/token.ts b/src/lib/utils/formatter/token.ts
index 7a7f6eda7..28ade2824 100644
--- a/src/lib/utils/formatter/token.ts
+++ b/src/lib/utils/formatter/token.ts
@@ -3,7 +3,7 @@ import big from "big.js";
 
 import type { Token, U, USD } from "lib/types";
 
-const NOT_AVAILABLE = "Not Available";
+const INVALID = "N/A";
 
 const B = 1_000_000_000;
 const M = 1_000_000;
@@ -76,7 +76,7 @@ export const formatUTokenWithPrecision = (
   return formatDecimal({
     decimalPoints: decimalPoints || precision,
     delimiter: true,
-  })(token, NOT_AVAILABLE);
+  })(token, INVALID);
 };
 
 /**
@@ -94,7 +94,7 @@ export const formatPrice = (value: USD<BigSource>): string => {
     const d2 = d2Formatter(price, "0.00");
     const d6 = d6Formatter(price, "0.00");
 
-    if (price.lt(0)) return NOT_AVAILABLE;
+    if (price.lt(0)) return INVALID;
 
     if (price.eq(0) || price.gte(1)) {
       return `$${d2}`;
@@ -105,11 +105,11 @@ export const formatPrice = (value: USD<BigSource>): string => {
     }
     return `$${d6}`;
   } catch {
-    return NOT_AVAILABLE;
+    return INVALID;
   }
 };
 
 export const formatInteger = (n: BigSource): string => {
   const formatter = formatDecimal({ decimalPoints: 0, delimiter: true });
-  return formatter(n, NOT_AVAILABLE);
+  return formatter(n, INVALID);
 };

From 138bc952a1db180e41029763d647b0d2e0767c5e Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 3 Jul 2023 11:26:52 +0700
Subject: [PATCH 303/354] fix: changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2a33ea4d8..5e8174370 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -57,7 +57,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
-- [#402](https://github.com/alleslabs/celatone-frontend/pull/402) Remove the old redundant useSimulateFee hook
+- [#416](https://github.com/alleslabs/celatone-frontend/pull/416) Remove the old redundant useSimulateFee hook
 - [#413](https://github.com/alleslabs/celatone-frontend/pull/413) Add jest test cases for date utils
 - [#404](https://github.com/alleslabs/celatone-frontend/pull/404) Use internal navigate instead of app link for block navigation
 - [#396](https://github.com/alleslabs/celatone-frontend/pull/396) Refactor useConfig, disable wasm related tabs on the public project page

From ff3f850ab8cfa2f2c784e21526f6f736bcb8b2ec Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 3 Jul 2023 13:58:03 +0700
Subject: [PATCH 304/354] fix: add case

---
 src/lib/utils/formatter/token.test.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/utils/formatter/token.test.ts b/src/lib/utils/formatter/token.test.ts
index 410adc6f0..826334c12 100644
--- a/src/lib/utils/formatter/token.test.ts
+++ b/src/lib/utils/formatter/token.test.ts
@@ -260,10 +260,12 @@ describe("formatPrice", () => {
   });
   describe("0.000001 <= x < 1", () => {
     test("from string", () => {
+      expect(formatPrice("0.000001" as USD)).toEqual("$0.000001");
       expect(formatPrice("0.123" as USD)).toEqual("$0.123000");
       expect(formatPrice("0.123456789" as USD)).toEqual("$0.123456");
     });
     test("from number", () => {
+      expect(formatPrice(0.000001 as USD<number>)).toEqual("$0.000001");
       expect(formatPrice(0.123 as USD<number>)).toEqual("$0.123000");
       expect(formatPrice(0.123456789 as USD<number>)).toEqual("$0.123456");
     });

From 8bf1d518a34c8d5c4dc240e138ecb4ec8e643564 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 3 Jul 2023 14:14:56 +0700
Subject: [PATCH 305/354] fix: comment

---
 src/lib/utils/formatter/token.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/utils/formatter/token.ts b/src/lib/utils/formatter/token.ts
index 28ade2824..a52c8a995 100644
--- a/src/lib/utils/formatter/token.ts
+++ b/src/lib/utils/formatter/token.ts
@@ -74,7 +74,7 @@ export const formatUTokenWithPrecision = (
     if (token.gte(K)) return `${d2Formatter(token, "0.00")}`;
   }
   return formatDecimal({
-    decimalPoints: decimalPoints || precision,
+    decimalPoints: decimalPoints ?? precision,
     delimiter: true,
   })(token, INVALID);
 };

From a63cba2bb5e8511ee6438683d05b33a2bfdebe83 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 4 Jul 2023 16:12:44 +0700
Subject: [PATCH 306/354] feat: add gitignore for new yarn version

---
 .gitignore   | 4 ++++
 CHANGELOG.md | 1 +
 package.json | 3 ++-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 946a6e448..b0b829f40 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,3 +50,7 @@ next.config.original.js
 .sentryclirc
 next.config.original.js
 next.config.wizardcopy.js
+
+# yarn 
+/.yarn
+.yarnrc.yml
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 476f80132..29824857a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#418](https://github.com/alleslabs/celatone-frontend/pull/418) Add gitignore for new yarn version
 - [#406](https://github.com/alleslabs/celatone-frontend/pull/406) add test cases for `utils/formatter/token.ts`
 - [#398](https://github.com/alleslabs/celatone-frontend/pull/398) Setup Jest and sample tests
 - [#411](https://github.com/alleslabs/celatone-frontend/pull/411) Add override api endpoint
diff --git a/package.json b/package.json
index d1fde484a..b0eae819b 100644
--- a/package.json
+++ b/package.json
@@ -101,5 +101,6 @@
     "standard-version": "^9.5.0",
     "ts-jest": "^29.0.5",
     "typescript": "^4.9.5"
-  }
+  },
+  "packageManager": "yarn@1.22.19"
 }

From 116d9db3c7c5a0856dfc062913ed21e4b06045be Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 5 Jul 2023 10:45:26 +0700
Subject: [PATCH 307/354] fix(layout): fix proposal page layout

---
 CHANGELOG.md                                | 1 +
 src/lib/pages/proposal/store-code/index.tsx | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 29824857a..3fbf463c4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -59,6 +59,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#420](https://github.com/alleslabs/celatone-frontend/pull/420) Unify create proposal page layout
 - [#413](https://github.com/alleslabs/celatone-frontend/pull/413) Add jest test cases for date utils
 - [#404](https://github.com/alleslabs/celatone-frontend/pull/404) Use internal navigate instead of app link for block navigation
 - [#396](https://github.com/alleslabs/celatone-frontend/pull/396) Refactor useConfig, disable wasm related tabs on the public project page
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index 07da86614..f9832a320 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -344,8 +344,7 @@ const StoreCodeProposal = () => {
       <PageContainer>
         <Grid
           templateAreas={`"prespace main sidebar postspace"`}
-          templateColumns="1fr 45% 4fr 1fr"
-          gap={4}
+          templateColumns="1fr 6fr 4fr 1fr"
         >
           <GridItem area="main">
             <Heading as="h5" variant="h5">

From 578cbcc653b25a14fe23496db97321fcd4224d68 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Wed, 5 Jul 2023 11:07:10 +0700
Subject: [PATCH 308/354] fix: comment

---
 src/lib/pages/migrate/components/MigrateContract.tsx | 1 -
 src/lib/utils/json.ts                                | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/pages/migrate/components/MigrateContract.tsx b/src/lib/pages/migrate/components/MigrateContract.tsx
index 22fd6076c..94312ede1 100644
--- a/src/lib/pages/migrate/components/MigrateContract.tsx
+++ b/src/lib/pages/migrate/components/MigrateContract.tsx
@@ -61,7 +61,6 @@ export const MigrateContract = ({
   const enableMigrate =
     !!address &&
     codeId.length > 0 &&
-    migrateMsg.trim().length > 0 &&
     jsonValidate(migrateMsg) === null &&
     status.state === "success";
 
diff --git a/src/lib/utils/json.ts b/src/lib/utils/json.ts
index 05b82ebd1..48f0670d4 100644
--- a/src/lib/utils/json.ts
+++ b/src/lib/utils/json.ts
@@ -1,8 +1,8 @@
 export const jsonValidate = (text: string) => {
   try {
-    if (text !== "") JSON.parse(text);
     if (text.trim().length === 0)
       throw new SyntaxError(`Can't use empty string`);
+    JSON.parse(text);
     return null;
   } catch (error) {
     return (error as SyntaxError).message;

From 80ab991fd99bf339613a56c4603a50442d4e3bd8 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 6 Jul 2023 10:38:34 +0700
Subject: [PATCH 309/354] fix: wireup v16 pool

---
 src/lib/layout/navbar/index.tsx               |  10 +-
 .../pages/pools/components/UnderDevAlert.tsx  |   2 +-
 .../pool-details/PoolRelatedTxs.tsx           |  32 ++++--
 .../pool-details/header/PoolInfo.tsx          | 101 ++++++++++--------
 .../components/supportedSection/PoolCard.tsx  |  24 +++--
 .../UnsupportedPoolCard.tsx                   |   6 +-
 src/lib/pages/pools/data.ts                   |   6 +-
 src/lib/pages/pools/poolId.tsx                |  10 +-
 src/lib/query/pool.ts                         |   3 +
 src/lib/services/poolService.ts               |  11 +-
 src/lib/styles/theme/components/alert.ts      |   6 +-
 src/lib/types/pool.ts                         |  13 +--
 src/lib/utils/assetValue.ts                   |  15 +--
 13 files changed, 137 insertions(+), 102 deletions(-)

diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index 705c1e193..1a00b1bf9 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -38,11 +38,11 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
           slug: "/proposals",
           icon: "proposal",
         },
-        {
-          name: "Osmosis Pools",
-          slug: "/pools",
-          icon: "pool",
-        },
+        // {
+        //   name: "Osmosis Pools",
+        //   slug: "/pools",
+        //   icon: "pool",
+        // },
       ],
     },
     {
diff --git a/src/lib/pages/pools/components/UnderDevAlert.tsx b/src/lib/pages/pools/components/UnderDevAlert.tsx
index dcb55c073..a799b72b6 100644
--- a/src/lib/pages/pools/components/UnderDevAlert.tsx
+++ b/src/lib/pages/pools/components/UnderDevAlert.tsx
@@ -16,7 +16,7 @@ export const UnderDevAlert = ({ poolType }: UnderDevAlertProps) => (
   <Alert status="info" variant="info">
     <CustomIcon name="alert-circle-solid" boxSize={4} mr={2} />
     <Text color="text.dark">
-      Information for pool {poolText(poolType)} is under development
+      Information for {poolText(poolType)} pool is under development
     </Text>
   </Alert>
 );
diff --git a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
index bab6a0ed5..27d49df4d 100644
--- a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
+++ b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
@@ -31,6 +31,12 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
     usePoolTxsCount(pool.id, "is_bond");
   const { count: countSuperfluidTxs, countDisplay: countDisplaySuperfluidTxs } =
     usePoolTxsCount(pool.id, "is_superfluid");
+  const { count: countClpTxs, countDisplay: countDisplayClpTxs } =
+    usePoolTxsCount(pool.id, "is_clp");
+  const { count: countCollectTxs, countDisplay: countDisplayCollectTxs } =
+    usePoolTxsCount(pool.id, "is_collect");
+  const { count: countMigrateTxs, countDisplay: countDisplayMigrateTxs } =
+    usePoolTxsCount(pool.id, "is_migrate");
 
   const tableHeaderId = "poolTableHeader";
   return (
@@ -59,9 +65,11 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
           >
             Swap
           </CustomTab>
-          {/* TODO - Fix count */}
           {pool.type === PoolType.CL ? (
-            <CustomTab count={0} onClick={() => AmpTrackUseTab("CLP")}>
+            <CustomTab
+              count={countDisplayClpTxs}
+              onClick={() => AmpTrackUseTab("CLP")}
+            >
               CLP
             </CustomTab>
           ) : (
@@ -88,13 +96,18 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
           )}
           {/* TODO - Fix count  */}
           {pool.type === PoolType.CL && (
-            <CustomTab count={0} onClick={() => AmpTrackUseTab("Collect")}>
+            <CustomTab
+              count={countDisplayCollectTxs}
+              onClick={() => AmpTrackUseTab("Collect")}
+            >
               Collect
             </CustomTab>
           )}
-          {/* TODO - Fix count  */}
           {pool.type === PoolType.CL && (
-            <CustomTab count={0} onClick={() => AmpTrackUseTab("Migrate")}>
+            <CustomTab
+              count={countDisplayMigrateTxs}
+              onClick={() => AmpTrackUseTab("Migrate")}
+            >
               Migrate
             </CustomTab>
           )}
@@ -118,10 +131,9 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
           </TabPanel>
           {pool.type === PoolType.CL ? (
             <TabPanel p={0}>
-              {/* TODO - Fix count  */}
               <PoolRelatedTxsTable
                 pool={pool}
-                countTxs={0}
+                countTxs={countClpTxs}
                 type="is_clp"
                 scrollComponentId={tableHeaderId}
               />
@@ -154,23 +166,21 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
               />
             </TabPanel>
           )}
-          {/* TODO - Fix count */}
           {pool.type === PoolType.CL && (
             <TabPanel p={0}>
               <PoolRelatedTxsTable
                 pool={pool}
-                countTxs={0}
+                countTxs={countCollectTxs}
                 type="is_collect"
                 scrollComponentId={tableHeaderId}
               />
             </TabPanel>
           )}
-          {/* TODO - Fix count */}
           {pool.type === PoolType.CL && (
             <TabPanel p={0}>
               <PoolRelatedTxsTable
                 pool={pool}
-                countTxs={0}
+                countTxs={countMigrateTxs}
                 type="is_migrate"
                 scrollComponentId={tableHeaderId}
               />
diff --git a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
index 9538b5f14..f1b115eca 100644
--- a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
@@ -5,7 +5,7 @@ import { useGetAddressType } from "lib/app-provider";
 import { CopyLink } from "lib/components/CopyLink";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { LabelText } from "lib/components/LabelText";
-import type { PoolDetail } from "lib/types";
+import type { PoolDetail, Ratio } from "lib/types";
 import { formatRatio } from "lib/utils";
 
 interface PoolInfoProps {
@@ -23,7 +23,7 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
       borderRadius="8px"
       px={4}
       py={3}
-      columnGap={12}
+      columnGap="43px"
       rowGap={6}
       mt={6}
       wrap="wrap"
@@ -58,51 +58,66 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
         />
       </LabelText>
       <Divider orientation="vertical" h="46px" />
-      <LabelText
-        label="Swap Fee"
-        tooltipText="The fee charged for making a swap in a pool, defined by the pool creator, and paid by traders in the form of a percentage the input swap asset amount"
-      >
-        <Text variant="body2">{formatRatio(pool.swapFee)}</Text>
-      </LabelText>
-      <LabelText
-        label="Exit Fee"
-        tooltipText="The fee charged when withdrawing from a pool, defined by the pool creator, and paid by the withdrawer in the form of LP tokens"
-      >
-        <Text variant="body2">{formatRatio(pool.exitFee)}</Text>
-      </LabelText>
-      <LabelText label="Future Governor">
-        {futurePoolGovernorType !== "invalid_address" ? (
-          <ExplorerLink
-            type={futurePoolGovernorType}
-            value={pool.futurePoolGovernor ?? "N/A"}
-            isReadOnly={!pool.futurePoolGovernor}
-            showCopyOnHover
-            textFormat="truncate"
-            w="140px"
-          />
-        ) : (
-          <Text
-            as="p"
-            color={pool.futurePoolGovernor ? "text.main" : "text.disabled"}
-            variant="body2"
-          >
-            {pool.futurePoolGovernor ?? "N/A"}
+      {pool.swapFee !== null && (
+        <LabelText
+          label="Swap Fee"
+          tooltipText="The fee charged for making a swap in a pool, defined by the pool creator, and paid by traders in the form of a percentage the input swap asset amount"
+        >
+          <Text variant="body2">
+            {formatRatio(Number(pool.swapFee) as Ratio<number>)}
           </Text>
-        )}
-      </LabelText>
-      {/* TODO - Change value */}
-      {pool.tickSpacing && (
-        <LabelText label="Tick Spacing" tooltipText="">
-          <Text variant="body2">100</Text>
         </LabelText>
       )}
-      {/* TODO - Change value */}
-      {pool.spreadFactor && (
-        <LabelText label="Spread Factor" tooltipText="">
-          <Text variant="body2">{formatRatio(pool.exitFee)}</Text>
+      {pool.exitFee !== null && (
+        <LabelText
+          label="Exit Fee"
+          tooltipText="The fee charged when withdrawing from a pool, defined by the pool creator, and paid by the withdrawer in the form of LP tokens"
+        >
+          <Text variant="body2">
+            {formatRatio(Number(pool.exitFee) as Ratio<number>)}
+          </Text>
+        </LabelText>
+      )}
+      {pool.futurePoolGovernor !== null && (
+        <LabelText label="Future Governor">
+          {futurePoolGovernorType !== "invalid_address" ? (
+            <ExplorerLink
+              type={futurePoolGovernorType}
+              value={pool.futurePoolGovernor ?? "N/A"}
+              isReadOnly={!pool.futurePoolGovernor}
+              showCopyOnHover
+              textFormat="truncate"
+              w="140px"
+            />
+          ) : (
+            <Text
+              as="p"
+              color={pool.futurePoolGovernor ? "text.main" : "text.disabled"}
+              variant="body2"
+            >
+              {pool.futurePoolGovernor ?? "N/A"}
+            </Text>
+          )}
+        </LabelText>
+      )}
+
+      {pool.tickSpacing !== null && (
+        <LabelText
+          label="Tick Spacing"
+          tooltipText="The distance between two ticks."
+        >
+          <Text variant="body2">{pool.tickSpacing}</Text>
+        </LabelText>
+      )}
+      {pool.spreadFactor !== null && (
+        <LabelText
+          label="Spread Factor"
+          tooltipText="Swap fee to be paid by swapper."
+        >
+          <Text variant="body2">{pool.spreadFactor}</Text>
         </LabelText>
       )}
-      {pool.smoothWeightChangeParams && (
+      {pool.smoothWeightChangeParams !== null && (
         <LabelText label="Smooth weight change params">
           <JsonModalButton
             modalHeader="Smooth weight change params"
@@ -110,7 +125,7 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
           />
         </LabelText>
       )}
-      {pool.scalingFactors && (
+      {pool.scalingFactors !== null && (
         <LabelText label="Scaling Factors">
           <JsonModalButton
             modalHeader="Scaling Factors"
diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index d2c588140..d9be77f6d 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -8,6 +8,7 @@ import { PoolHeader } from "../PoolHeader";
 import { UnderDevAlert } from "../UnderDevAlert";
 import { useInternalNavigate, usePoolConfig } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
+import { LabelText } from "lib/components/LabelText";
 import { Tooltip } from "lib/components/Tooltip";
 import { AmpTrackWebsite } from "lib/services/amplitude";
 import type { USD, Pool, Token, U } from "lib/types";
@@ -43,6 +44,7 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
 
   return (
     <Flex
+      justifyContent="space-between"
       gap={4}
       flexDirection="column"
       onClick={handleOnClick}
@@ -90,16 +92,22 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
         </Tooltip>
       </Flex>
       <Flex justifyContent="space-between">
-        <Flex alignItems="center">
-          <Text variant="body2" color="text.dark" fontWeight="600">
-            Liquidity
-          </Text>
-        </Flex>
+        <LabelText
+          label="Liquidity"
+          tooltipText="The total amount of asset liquidity provided in the pool."
+        >
+          {" "}
+        </LabelText>
+
         <Text variant="body2" color="text.main">
-          {item.poolLiquidity ? formatPrice(liquidity) : "N/A"}
+          {item.poolLiquidity.some((coin) => !coin.amount)
+            ? "N/A"
+            : formatPrice(liquidity)}
         </Text>
       </Flex>
-      {item.poolLiquidity ? (
+      {item.poolLiquidity.some((coin) => !coin.amount) ? (
+        <UnderDevAlert poolType={item.type} />
+      ) : (
         <SimpleGrid columns={4} gap={2}>
           <>
             {item.poolLiquidity.slice(0, 3).map((asset) => (
@@ -146,8 +154,6 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
             )}
           </>
         </SimpleGrid>
-      ) : (
-        <UnderDevAlert poolType={item.type} />
       )}
     </Flex>
   );
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index 291fa09e7..c1f52f3b5 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -114,7 +114,9 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
             </Flex>
           </AccordionButton>
           <AccordionPanel pb={4}>
-            {item.poolLiquidity ? (
+            {item.poolLiquidity.some((coin) => !coin.amount) ? (
+              <UnderDevAlert poolType={item.type} />
+            ) : (
               <Flex>
                 <Text
                   color="text.dark"
@@ -182,8 +184,6 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
                   </Flex>
                 </Flex>
               </Flex>
-            ) : (
-              <UnderDevAlert poolType={item.type} />
             )}
           </AccordionPanel>
         </>
diff --git a/src/lib/pages/pools/data.ts b/src/lib/pages/pools/data.ts
index b9ee8a531..72cc421be 100644
--- a/src/lib/pages/pools/data.ts
+++ b/src/lib/pages/pools/data.ts
@@ -97,9 +97,9 @@ export const usePool = (
       smoothWeightChangeParams: pool.smoothWeightChangeParams,
       scalingFactors: pool.scalingFactors,
       scalingFactorController: pool.scalingFactorController,
-      // TODO - Get data
-      spreadFactor: "",
-      tickSpacing: "",
+      spreadFactor: pool.spreadFactor,
+      tickSpacing: pool.tickSpacing,
+      contractAddress: pool.contractAddress,
     },
     isLoading: false,
   };
diff --git a/src/lib/pages/pools/poolId.tsx b/src/lib/pages/pools/poolId.tsx
index 5884a8f51..790dc47a5 100644
--- a/src/lib/pages/pools/poolId.tsx
+++ b/src/lib/pages/pools/poolId.tsx
@@ -21,16 +21,16 @@ export const PoolId = () => {
   const navigate = useInternalNavigate();
   const poolId = Number(getFirstQueryParam(router.query.poolId));
   const { pool, isLoading } = usePool(poolId);
-  // TODO - Remove this and get from usePool
-  const contractAddress =
-    "osmo1e2c7qawyjk40acehzjpk6fl0gf0xwxrvck88ruc6j4zspr4splxqf8c07y";
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_POOL_DETAIL);
     // First version, navigate to contract details page if pool type is CosmWasm
     if (pool?.type === PoolType.COSMWASM)
-      navigate({ pathname: `/contracts/${contractAddress}`, replace: true });
-  }, [navigate, pool?.type, router.isReady]);
+      navigate({
+        pathname: `/contracts/${pool.contractAddress}`,
+        replace: true,
+      });
+  }, [navigate, pool, pool?.contractAddress, pool?.type, router.isReady]);
 
   if (isLoading) return <Loading />;
   if (!pool) return navigate({ pathname: `/pool` });
diff --git a/src/lib/query/pool.ts b/src/lib/query/pool.ts
index 215c3bf5b..ffd2be9ba 100644
--- a/src/lib/query/pool.ts
+++ b/src/lib/query/pool.ts
@@ -92,6 +92,9 @@ export const getPoolByPoolId = graphql(`
       smooth_weight_change_params
       scaling_factors
       scaling_factor_controller
+      spread_factor
+      tick_spacing
+      contract_address
     }
   }
 `);
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index 6812ec559..9adfe0e2d 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -1,6 +1,7 @@
 import type { Coin } from "@cosmjs/stargate";
 import type { UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
+import type { RequestDocument } from "graphql-request";
 import { useCallback } from "react";
 
 import { useCelatoneApp } from "lib/app-provider";
@@ -140,8 +141,9 @@ export const usePoolByPoolId = (
 
   const queryFn = useCallback(async () => {
     if (!poolId) throw new Error("Pool ID is undefined.");
+    // TODO - Remove assertion when backend is implemented
     return indexerGraphClient
-      .request(getPoolByPoolId, {
+      .request(getPoolByPoolId as RequestDocument, {
         poolId,
       })
       .then(({ pools_by_pk }) =>
@@ -155,13 +157,16 @@ export const usePoolByPoolId = (
               blockHeight: pools_by_pk.transaction?.block_height,
               creator: pools_by_pk.account?.address,
               poolAddress: pools_by_pk.address,
-              swapFee: Number(pools_by_pk.swap_fee),
-              exitFee: Number(pools_by_pk.exit_fee),
+              swapFee: pools_by_pk.swap_fee,
+              exitFee: pools_by_pk.exit_fee,
               futurePoolGovernor: pools_by_pk.future_pool_governor,
               weight: pools_by_pk.weight,
               smoothWeightChangeParams: pools_by_pk.smooth_weight_change_params,
               scalingFactors: pools_by_pk.scaling_factors,
               scalingFactorController: pools_by_pk.scaling_factor_controller,
+              spreadFactor: pools_by_pk.spread_factor,
+              tickSpacing: pools_by_pk.tick_spacing,
+              contractAddress: pools_by_pk.contract_address,
             } as PoolDetail<string, Coin>)
           : undefined
       );
diff --git a/src/lib/styles/theme/components/alert.ts b/src/lib/styles/theme/components/alert.ts
index c739bc84b..c80d194cc 100644
--- a/src/lib/styles/theme/components/alert.ts
+++ b/src/lib/styles/theme/components/alert.ts
@@ -16,9 +16,9 @@ const generateVariantStyle = (
       borderColor = `${variant}.dark`;
       break;
     case "info":
-      mainColor = "pebble.400";
-      bgColor = "pebble.800";
-      borderColor = "pebble.700";
+      mainColor = "gray.400";
+      bgColor = "gray.800";
+      borderColor = "gray.700";
       break;
     case "accent":
     case "error":
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index 91650c707..05dd0dbc3 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -1,13 +1,7 @@
 import type { Coin } from "@cosmjs/stargate";
 import type { Big } from "big.js";
 
-import type {
-  Addr,
-  ContractAddr,
-  Option,
-  Ratio,
-  TokenWithValue,
-} from "lib/types";
+import type { Addr, ContractAddr, Option, TokenWithValue } from "lib/types";
 
 // TODO - Recheck type name
 export enum PoolType {
@@ -44,8 +38,8 @@ export interface PoolDetail<
   blockHeight: Option<number>;
   creator: Option<Addr>;
   poolAddress: ContractAddr;
-  swapFee: Ratio<number>;
-  exitFee: Ratio<number>;
+  swapFee: string | null;
+  exitFee: string | null;
   futurePoolGovernor: string | null;
   weight: PoolWeight<TWeight>[] | null;
   smoothWeightChangeParams: object | null;
@@ -53,4 +47,5 @@ export interface PoolDetail<
   scalingFactorController: string | null;
   spreadFactor: string | null;
   tickSpacing: string | null;
+  contractAddress: ContractAddr;
 }
diff --git a/src/lib/utils/assetValue.ts b/src/lib/utils/assetValue.ts
index 93b84aab4..c14bfd729 100644
--- a/src/lib/utils/assetValue.ts
+++ b/src/lib/utils/assetValue.ts
@@ -41,7 +41,7 @@ export const coinToTokenWithValue = (
   amount: string,
   assetInfo: Option<AssetInfo>
 ): TokenWithValue => {
-  const tokenAmount = big(amount) as U<Token<Big>>;
+  const tokenAmount = (amount.length === 0 ? 0 : big(amount)) as U<Token<Big>>;
   return {
     denom,
     amount: tokenAmount,
@@ -49,12 +49,13 @@ export const coinToTokenWithValue = (
     logo: assetInfo?.logo,
     precision: assetInfo?.precision,
     price: assetInfo ? (big(assetInfo.price).toFixed() as USD) : undefined,
-    value: assetInfo
-      ? calculateAssetValue(
-          toToken(tokenAmount, assetInfo.precision),
-          assetInfo.price as USD<number>
-        )
-      : undefined,
+    value:
+      assetInfo && tokenAmount
+        ? calculateAssetValue(
+            toToken(tokenAmount, assetInfo.precision),
+            assetInfo.price as USD<number>
+          )
+        : undefined,
   };
 };
 

From 5c3b93e30527c950cf9daf0236afe70386174c63 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 6 Jul 2023 14:04:09 +0700
Subject: [PATCH 310/354] fix: type

---
 src/lib/types/pool.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index 05dd0dbc3..67c5f0df3 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -46,6 +46,6 @@ export interface PoolDetail<
   scalingFactors: string[] | null;
   scalingFactorController: string | null;
   spreadFactor: string | null;
-  tickSpacing: string | null;
+  tickSpacing: number | null;
   contractAddress: ContractAddr;
 }

From 11b6af77266ee7fc2efcc47a1c3edc65896d6f88 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 6 Jul 2023 14:21:56 +0700
Subject: [PATCH 311/354] fix: codegen graphql

---
 src/lib/gql/gql.ts                            |   6 +-
 src/lib/gql/graphql.ts                        | 110 ++++++++++++++++++
 .../pool-details/PoolRelatedTxs.tsx           |   1 -
 .../pool-details/header/PoolInfo.tsx          |   2 +-
 src/lib/services/poolService.ts               |   4 +-
 5 files changed, 115 insertions(+), 8 deletions(-)

diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index 27fbeab1a..0ed577071 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -59,7 +59,7 @@ const documents = {
     types.GetPoolListByDenomsDocument,
   "\n  query getPoolListByDenomsCount(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n  ) {\n    pools_aggregate: search_pools_with_denoms_aggregate(\n      args: { denoms: $denoms }\n      where: $expression\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetPoolListByDenomsCountDocument,
-  "\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n    }\n  }\n":
+  "\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n      spread_factor\n      tick_spacing\n      contract_address\n    }\n  }\n":
     types.GetPoolByPoolIdDocument,
   "\n  query getPoolsByPoolIds($poolIds: [Int!]!) {\n    pools(where: { id: { _in: $poolIds } }) {\n      id\n      liquidity\n    }\n  }\n":
     types.GetPoolsByPoolIdsDocument,
@@ -180,8 +180,8 @@ export function graphql(
   source: "\n  query getPoolListByDenomsCount(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n  ) {\n    pools_aggregate: search_pools_with_denoms_aggregate(\n      args: { denoms: $denoms }\n      where: $expression\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getPoolListByDenomsCount(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n  ) {\n    pools_aggregate: search_pools_with_denoms_aggregate(\n      args: { denoms: $denoms }\n      where: $expression\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n    }\n  }\n"
-): typeof documents["\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n    }\n  }\n"];
+  source: "\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n      spread_factor\n      tick_spacing\n      contract_address\n    }\n  }\n"
+): typeof documents["\n  query getPoolByPoolId($poolId: Int!) {\n    pools_by_pk(id: $poolId) {\n      id\n      type\n      is_superfluid\n      is_supported\n      liquidity\n      transaction {\n        block_height\n      }\n      account {\n        address\n      }\n      address\n      swap_fee\n      exit_fee\n      future_pool_governor\n      weight\n      smooth_weight_change_params\n      scaling_factors\n      scaling_factor_controller\n      spread_factor\n      tick_spacing\n      contract_address\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getPoolsByPoolIds($poolIds: [Int!]!) {\n    pools(where: { id: { _in: $poolIds } }) {\n      id\n      liquidity\n    }\n  }\n"
 ): typeof documents["\n  query getPoolsByPoolIds($poolIds: [Int!]!) {\n    pools(where: { id: { _in: $poolIds } }) {\n      id\n      liquidity\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index ac13b0388..c68fdc315 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -6195,7 +6195,10 @@ export type Pool_Transactions = {
   block: Blocks;
   block_height: Scalars["Int"];
   is_bond: Scalars["Boolean"];
+  is_clp: Scalars["Boolean"];
+  is_collect: Scalars["Boolean"];
   is_lp: Scalars["Boolean"];
+  is_migrate: Scalars["Boolean"];
   is_superfluid: Scalars["Boolean"];
   is_swap: Scalars["Boolean"];
   /** An object relationship */
@@ -6305,7 +6308,10 @@ export type Pool_Transactions_Bool_Exp = {
   block?: InputMaybe<Blocks_Bool_Exp>;
   block_height?: InputMaybe<Int_Comparison_Exp>;
   is_bond?: InputMaybe<Boolean_Comparison_Exp>;
+  is_clp?: InputMaybe<Boolean_Comparison_Exp>;
+  is_collect?: InputMaybe<Boolean_Comparison_Exp>;
   is_lp?: InputMaybe<Boolean_Comparison_Exp>;
+  is_migrate?: InputMaybe<Boolean_Comparison_Exp>;
   is_superfluid?: InputMaybe<Boolean_Comparison_Exp>;
   is_swap?: InputMaybe<Boolean_Comparison_Exp>;
   pool?: InputMaybe<Pools_Bool_Exp>;
@@ -6326,7 +6332,10 @@ export type Pool_Transactions_Insert_Input = {
   block?: InputMaybe<Blocks_Obj_Rel_Insert_Input>;
   block_height?: InputMaybe<Scalars["Int"]>;
   is_bond?: InputMaybe<Scalars["Boolean"]>;
+  is_clp?: InputMaybe<Scalars["Boolean"]>;
+  is_collect?: InputMaybe<Scalars["Boolean"]>;
   is_lp?: InputMaybe<Scalars["Boolean"]>;
+  is_migrate?: InputMaybe<Scalars["Boolean"]>;
   is_superfluid?: InputMaybe<Scalars["Boolean"]>;
   is_swap?: InputMaybe<Scalars["Boolean"]>;
   pool?: InputMaybe<Pools_Obj_Rel_Insert_Input>;
@@ -6379,7 +6388,10 @@ export type Pool_Transactions_Order_By = {
   block?: InputMaybe<Blocks_Order_By>;
   block_height?: InputMaybe<Order_By>;
   is_bond?: InputMaybe<Order_By>;
+  is_clp?: InputMaybe<Order_By>;
+  is_collect?: InputMaybe<Order_By>;
   is_lp?: InputMaybe<Order_By>;
+  is_migrate?: InputMaybe<Order_By>;
   is_superfluid?: InputMaybe<Order_By>;
   is_swap?: InputMaybe<Order_By>;
   pool?: InputMaybe<Pools_Order_By>;
@@ -6395,8 +6407,14 @@ export enum Pool_Transactions_Select_Column {
   /** column name */
   IsBond = "is_bond",
   /** column name */
+  IsClp = "is_clp",
+  /** column name */
+  IsCollect = "is_collect",
+  /** column name */
   IsLp = "is_lp",
   /** column name */
+  IsMigrate = "is_migrate",
+  /** column name */
   IsSuperfluid = "is_superfluid",
   /** column name */
   IsSwap = "is_swap",
@@ -6411,8 +6429,14 @@ export enum Pool_Transactions_Select_Column_Pool_Transactions_Aggregate_Bool_Exp
   /** column name */
   IsBond = "is_bond",
   /** column name */
+  IsClp = "is_clp",
+  /** column name */
+  IsCollect = "is_collect",
+  /** column name */
   IsLp = "is_lp",
   /** column name */
+  IsMigrate = "is_migrate",
+  /** column name */
   IsSuperfluid = "is_superfluid",
   /** column name */
   IsSwap = "is_swap",
@@ -6423,8 +6447,14 @@ export enum Pool_Transactions_Select_Column_Pool_Transactions_Aggregate_Bool_Exp
   /** column name */
   IsBond = "is_bond",
   /** column name */
+  IsClp = "is_clp",
+  /** column name */
+  IsCollect = "is_collect",
+  /** column name */
   IsLp = "is_lp",
   /** column name */
+  IsMigrate = "is_migrate",
+  /** column name */
   IsSuperfluid = "is_superfluid",
   /** column name */
   IsSwap = "is_swap",
@@ -6434,7 +6464,10 @@ export enum Pool_Transactions_Select_Column_Pool_Transactions_Aggregate_Bool_Exp
 export type Pool_Transactions_Set_Input = {
   block_height?: InputMaybe<Scalars["Int"]>;
   is_bond?: InputMaybe<Scalars["Boolean"]>;
+  is_clp?: InputMaybe<Scalars["Boolean"]>;
+  is_collect?: InputMaybe<Scalars["Boolean"]>;
   is_lp?: InputMaybe<Scalars["Boolean"]>;
+  is_migrate?: InputMaybe<Scalars["Boolean"]>;
   is_superfluid?: InputMaybe<Scalars["Boolean"]>;
   is_swap?: InputMaybe<Scalars["Boolean"]>;
   pool_id?: InputMaybe<Scalars["Int"]>;
@@ -6498,7 +6531,10 @@ export type Pool_Transactions_Stream_Cursor_Input = {
 export type Pool_Transactions_Stream_Cursor_Value_Input = {
   block_height?: InputMaybe<Scalars["Int"]>;
   is_bond?: InputMaybe<Scalars["Boolean"]>;
+  is_clp?: InputMaybe<Scalars["Boolean"]>;
+  is_collect?: InputMaybe<Scalars["Boolean"]>;
   is_lp?: InputMaybe<Scalars["Boolean"]>;
+  is_migrate?: InputMaybe<Scalars["Boolean"]>;
   is_superfluid?: InputMaybe<Scalars["Boolean"]>;
   is_swap?: InputMaybe<Scalars["Boolean"]>;
   pool_id?: InputMaybe<Scalars["Int"]>;
@@ -6580,6 +6616,7 @@ export type Pools = {
   /** An object relationship */
   account?: Maybe<Accounts>;
   address: Scalars["String"];
+  contract_address?: Maybe<Scalars["String"]>;
   create_tx_id?: Maybe<Scalars["Int"]>;
   creator?: Maybe<Scalars["Int"]>;
   exit_fee: Scalars["String"];
@@ -6595,7 +6632,9 @@ export type Pools = {
   scaling_factor_controller?: Maybe<Scalars["String"]>;
   scaling_factors?: Maybe<Scalars["json"]>;
   smooth_weight_change_params?: Maybe<Scalars["json"]>;
+  spread_factor?: Maybe<Scalars["String"]>;
   swap_fee: Scalars["String"];
+  tick_spacing?: Maybe<Scalars["Int"]>;
   total_shares: Scalars["json"];
   /** An object relationship */
   transaction?: Maybe<Transactions>;
@@ -6730,6 +6769,7 @@ export type Pools_Avg_Fields = {
   create_tx_id?: Maybe<Scalars["Float"]>;
   creator?: Maybe<Scalars["Float"]>;
   id?: Maybe<Scalars["Float"]>;
+  tick_spacing?: Maybe<Scalars["Float"]>;
 };
 
 /** order by avg() on columns of table "pools" */
@@ -6737,6 +6777,7 @@ export type Pools_Avg_Order_By = {
   create_tx_id?: InputMaybe<Order_By>;
   creator?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  tick_spacing?: InputMaybe<Order_By>;
 };
 
 /** Boolean expression to filter rows from the table "pools". All fields are combined with a logical 'AND'. */
@@ -6746,6 +6787,7 @@ export type Pools_Bool_Exp = {
   _or?: InputMaybe<Array<Pools_Bool_Exp>>;
   account?: InputMaybe<Accounts_Bool_Exp>;
   address?: InputMaybe<String_Comparison_Exp>;
+  contract_address?: InputMaybe<String_Comparison_Exp>;
   create_tx_id?: InputMaybe<Int_Comparison_Exp>;
   creator?: InputMaybe<Int_Comparison_Exp>;
   exit_fee?: InputMaybe<String_Comparison_Exp>;
@@ -6759,7 +6801,9 @@ export type Pools_Bool_Exp = {
   scaling_factor_controller?: InputMaybe<String_Comparison_Exp>;
   scaling_factors?: InputMaybe<Json_Comparison_Exp>;
   smooth_weight_change_params?: InputMaybe<Json_Comparison_Exp>;
+  spread_factor?: InputMaybe<String_Comparison_Exp>;
   swap_fee?: InputMaybe<String_Comparison_Exp>;
+  tick_spacing?: InputMaybe<Int_Comparison_Exp>;
   total_shares?: InputMaybe<Json_Comparison_Exp>;
   transaction?: InputMaybe<Transactions_Bool_Exp>;
   type?: InputMaybe<Pooltype_Comparison_Exp>;
@@ -6777,12 +6821,14 @@ export type Pools_Inc_Input = {
   create_tx_id?: InputMaybe<Scalars["Int"]>;
   creator?: InputMaybe<Scalars["Int"]>;
   id?: InputMaybe<Scalars["Int"]>;
+  tick_spacing?: InputMaybe<Scalars["Int"]>;
 };
 
 /** input type for inserting data into table "pools" */
 export type Pools_Insert_Input = {
   account?: InputMaybe<Accounts_Obj_Rel_Insert_Input>;
   address?: InputMaybe<Scalars["String"]>;
+  contract_address?: InputMaybe<Scalars["String"]>;
   create_tx_id?: InputMaybe<Scalars["Int"]>;
   creator?: InputMaybe<Scalars["Int"]>;
   exit_fee?: InputMaybe<Scalars["String"]>;
@@ -6795,7 +6841,9 @@ export type Pools_Insert_Input = {
   scaling_factor_controller?: InputMaybe<Scalars["String"]>;
   scaling_factors?: InputMaybe<Scalars["json"]>;
   smooth_weight_change_params?: InputMaybe<Scalars["json"]>;
+  spread_factor?: InputMaybe<Scalars["String"]>;
   swap_fee?: InputMaybe<Scalars["String"]>;
+  tick_spacing?: InputMaybe<Scalars["Int"]>;
   total_shares?: InputMaybe<Scalars["json"]>;
   transaction?: InputMaybe<Transactions_Obj_Rel_Insert_Input>;
   type?: InputMaybe<Scalars["pooltype"]>;
@@ -6806,26 +6854,32 @@ export type Pools_Insert_Input = {
 export type Pools_Max_Fields = {
   __typename?: "pools_max_fields";
   address?: Maybe<Scalars["String"]>;
+  contract_address?: Maybe<Scalars["String"]>;
   create_tx_id?: Maybe<Scalars["Int"]>;
   creator?: Maybe<Scalars["Int"]>;
   exit_fee?: Maybe<Scalars["String"]>;
   future_pool_governor?: Maybe<Scalars["String"]>;
   id?: Maybe<Scalars["Int"]>;
   scaling_factor_controller?: Maybe<Scalars["String"]>;
+  spread_factor?: Maybe<Scalars["String"]>;
   swap_fee?: Maybe<Scalars["String"]>;
+  tick_spacing?: Maybe<Scalars["Int"]>;
   type?: Maybe<Scalars["pooltype"]>;
 };
 
 /** order by max() on columns of table "pools" */
 export type Pools_Max_Order_By = {
   address?: InputMaybe<Order_By>;
+  contract_address?: InputMaybe<Order_By>;
   create_tx_id?: InputMaybe<Order_By>;
   creator?: InputMaybe<Order_By>;
   exit_fee?: InputMaybe<Order_By>;
   future_pool_governor?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
   scaling_factor_controller?: InputMaybe<Order_By>;
+  spread_factor?: InputMaybe<Order_By>;
   swap_fee?: InputMaybe<Order_By>;
+  tick_spacing?: InputMaybe<Order_By>;
   type?: InputMaybe<Order_By>;
 };
 
@@ -6833,26 +6887,32 @@ export type Pools_Max_Order_By = {
 export type Pools_Min_Fields = {
   __typename?: "pools_min_fields";
   address?: Maybe<Scalars["String"]>;
+  contract_address?: Maybe<Scalars["String"]>;
   create_tx_id?: Maybe<Scalars["Int"]>;
   creator?: Maybe<Scalars["Int"]>;
   exit_fee?: Maybe<Scalars["String"]>;
   future_pool_governor?: Maybe<Scalars["String"]>;
   id?: Maybe<Scalars["Int"]>;
   scaling_factor_controller?: Maybe<Scalars["String"]>;
+  spread_factor?: Maybe<Scalars["String"]>;
   swap_fee?: Maybe<Scalars["String"]>;
+  tick_spacing?: Maybe<Scalars["Int"]>;
   type?: Maybe<Scalars["pooltype"]>;
 };
 
 /** order by min() on columns of table "pools" */
 export type Pools_Min_Order_By = {
   address?: InputMaybe<Order_By>;
+  contract_address?: InputMaybe<Order_By>;
   create_tx_id?: InputMaybe<Order_By>;
   creator?: InputMaybe<Order_By>;
   exit_fee?: InputMaybe<Order_By>;
   future_pool_governor?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
   scaling_factor_controller?: InputMaybe<Order_By>;
+  spread_factor?: InputMaybe<Order_By>;
   swap_fee?: InputMaybe<Order_By>;
+  tick_spacing?: InputMaybe<Order_By>;
   type?: InputMaybe<Order_By>;
 };
 
@@ -6883,6 +6943,7 @@ export type Pools_On_Conflict = {
 export type Pools_Order_By = {
   account?: InputMaybe<Accounts_Order_By>;
   address?: InputMaybe<Order_By>;
+  contract_address?: InputMaybe<Order_By>;
   create_tx_id?: InputMaybe<Order_By>;
   creator?: InputMaybe<Order_By>;
   exit_fee?: InputMaybe<Order_By>;
@@ -6895,7 +6956,9 @@ export type Pools_Order_By = {
   scaling_factor_controller?: InputMaybe<Order_By>;
   scaling_factors?: InputMaybe<Order_By>;
   smooth_weight_change_params?: InputMaybe<Order_By>;
+  spread_factor?: InputMaybe<Order_By>;
   swap_fee?: InputMaybe<Order_By>;
+  tick_spacing?: InputMaybe<Order_By>;
   total_shares?: InputMaybe<Order_By>;
   transaction?: InputMaybe<Transactions_Order_By>;
   type?: InputMaybe<Order_By>;
@@ -6912,6 +6975,8 @@ export enum Pools_Select_Column {
   /** column name */
   Address = "address",
   /** column name */
+  ContractAddress = "contract_address",
+  /** column name */
   CreateTxId = "create_tx_id",
   /** column name */
   Creator = "creator",
@@ -6934,8 +6999,12 @@ export enum Pools_Select_Column {
   /** column name */
   SmoothWeightChangeParams = "smooth_weight_change_params",
   /** column name */
+  SpreadFactor = "spread_factor",
+  /** column name */
   SwapFee = "swap_fee",
   /** column name */
+  TickSpacing = "tick_spacing",
+  /** column name */
   TotalShares = "total_shares",
   /** column name */
   Type = "type",
@@ -6962,6 +7031,7 @@ export enum Pools_Select_Column_Pools_Aggregate_Bool_Exp_Bool_Or_Arguments_Colum
 /** input type for updating data in table "pools" */
 export type Pools_Set_Input = {
   address?: InputMaybe<Scalars["String"]>;
+  contract_address?: InputMaybe<Scalars["String"]>;
   create_tx_id?: InputMaybe<Scalars["Int"]>;
   creator?: InputMaybe<Scalars["Int"]>;
   exit_fee?: InputMaybe<Scalars["String"]>;
@@ -6973,7 +7043,9 @@ export type Pools_Set_Input = {
   scaling_factor_controller?: InputMaybe<Scalars["String"]>;
   scaling_factors?: InputMaybe<Scalars["json"]>;
   smooth_weight_change_params?: InputMaybe<Scalars["json"]>;
+  spread_factor?: InputMaybe<Scalars["String"]>;
   swap_fee?: InputMaybe<Scalars["String"]>;
+  tick_spacing?: InputMaybe<Scalars["Int"]>;
   total_shares?: InputMaybe<Scalars["json"]>;
   type?: InputMaybe<Scalars["pooltype"]>;
   weight?: InputMaybe<Scalars["json"]>;
@@ -6985,6 +7057,7 @@ export type Pools_Stddev_Fields = {
   create_tx_id?: Maybe<Scalars["Float"]>;
   creator?: Maybe<Scalars["Float"]>;
   id?: Maybe<Scalars["Float"]>;
+  tick_spacing?: Maybe<Scalars["Float"]>;
 };
 
 /** order by stddev() on columns of table "pools" */
@@ -6992,6 +7065,7 @@ export type Pools_Stddev_Order_By = {
   create_tx_id?: InputMaybe<Order_By>;
   creator?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  tick_spacing?: InputMaybe<Order_By>;
 };
 
 /** aggregate stddev_pop on columns */
@@ -7000,6 +7074,7 @@ export type Pools_Stddev_Pop_Fields = {
   create_tx_id?: Maybe<Scalars["Float"]>;
   creator?: Maybe<Scalars["Float"]>;
   id?: Maybe<Scalars["Float"]>;
+  tick_spacing?: Maybe<Scalars["Float"]>;
 };
 
 /** order by stddev_pop() on columns of table "pools" */
@@ -7007,6 +7082,7 @@ export type Pools_Stddev_Pop_Order_By = {
   create_tx_id?: InputMaybe<Order_By>;
   creator?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  tick_spacing?: InputMaybe<Order_By>;
 };
 
 /** aggregate stddev_samp on columns */
@@ -7015,6 +7091,7 @@ export type Pools_Stddev_Samp_Fields = {
   create_tx_id?: Maybe<Scalars["Float"]>;
   creator?: Maybe<Scalars["Float"]>;
   id?: Maybe<Scalars["Float"]>;
+  tick_spacing?: Maybe<Scalars["Float"]>;
 };
 
 /** order by stddev_samp() on columns of table "pools" */
@@ -7022,6 +7099,7 @@ export type Pools_Stddev_Samp_Order_By = {
   create_tx_id?: InputMaybe<Order_By>;
   creator?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  tick_spacing?: InputMaybe<Order_By>;
 };
 
 /** Streaming cursor of the table "pools" */
@@ -7035,6 +7113,7 @@ export type Pools_Stream_Cursor_Input = {
 /** Initial value of the column from where the streaming should start */
 export type Pools_Stream_Cursor_Value_Input = {
   address?: InputMaybe<Scalars["String"]>;
+  contract_address?: InputMaybe<Scalars["String"]>;
   create_tx_id?: InputMaybe<Scalars["Int"]>;
   creator?: InputMaybe<Scalars["Int"]>;
   exit_fee?: InputMaybe<Scalars["String"]>;
@@ -7046,7 +7125,9 @@ export type Pools_Stream_Cursor_Value_Input = {
   scaling_factor_controller?: InputMaybe<Scalars["String"]>;
   scaling_factors?: InputMaybe<Scalars["json"]>;
   smooth_weight_change_params?: InputMaybe<Scalars["json"]>;
+  spread_factor?: InputMaybe<Scalars["String"]>;
   swap_fee?: InputMaybe<Scalars["String"]>;
+  tick_spacing?: InputMaybe<Scalars["Int"]>;
   total_shares?: InputMaybe<Scalars["json"]>;
   type?: InputMaybe<Scalars["pooltype"]>;
   weight?: InputMaybe<Scalars["json"]>;
@@ -7058,6 +7139,7 @@ export type Pools_Sum_Fields = {
   create_tx_id?: Maybe<Scalars["Int"]>;
   creator?: Maybe<Scalars["Int"]>;
   id?: Maybe<Scalars["Int"]>;
+  tick_spacing?: Maybe<Scalars["Int"]>;
 };
 
 /** order by sum() on columns of table "pools" */
@@ -7065,6 +7147,7 @@ export type Pools_Sum_Order_By = {
   create_tx_id?: InputMaybe<Order_By>;
   creator?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  tick_spacing?: InputMaybe<Order_By>;
 };
 
 /** update columns of table "pools" */
@@ -7072,6 +7155,8 @@ export enum Pools_Update_Column {
   /** column name */
   Address = "address",
   /** column name */
+  ContractAddress = "contract_address",
+  /** column name */
   CreateTxId = "create_tx_id",
   /** column name */
   Creator = "creator",
@@ -7094,8 +7179,12 @@ export enum Pools_Update_Column {
   /** column name */
   SmoothWeightChangeParams = "smooth_weight_change_params",
   /** column name */
+  SpreadFactor = "spread_factor",
+  /** column name */
   SwapFee = "swap_fee",
   /** column name */
+  TickSpacing = "tick_spacing",
+  /** column name */
   TotalShares = "total_shares",
   /** column name */
   Type = "type",
@@ -7118,6 +7207,7 @@ export type Pools_Var_Pop_Fields = {
   create_tx_id?: Maybe<Scalars["Float"]>;
   creator?: Maybe<Scalars["Float"]>;
   id?: Maybe<Scalars["Float"]>;
+  tick_spacing?: Maybe<Scalars["Float"]>;
 };
 
 /** order by var_pop() on columns of table "pools" */
@@ -7125,6 +7215,7 @@ export type Pools_Var_Pop_Order_By = {
   create_tx_id?: InputMaybe<Order_By>;
   creator?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  tick_spacing?: InputMaybe<Order_By>;
 };
 
 /** aggregate var_samp on columns */
@@ -7133,6 +7224,7 @@ export type Pools_Var_Samp_Fields = {
   create_tx_id?: Maybe<Scalars["Float"]>;
   creator?: Maybe<Scalars["Float"]>;
   id?: Maybe<Scalars["Float"]>;
+  tick_spacing?: Maybe<Scalars["Float"]>;
 };
 
 /** order by var_samp() on columns of table "pools" */
@@ -7140,6 +7232,7 @@ export type Pools_Var_Samp_Order_By = {
   create_tx_id?: InputMaybe<Order_By>;
   creator?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  tick_spacing?: InputMaybe<Order_By>;
 };
 
 /** aggregate variance on columns */
@@ -7148,6 +7241,7 @@ export type Pools_Variance_Fields = {
   create_tx_id?: Maybe<Scalars["Float"]>;
   creator?: Maybe<Scalars["Float"]>;
   id?: Maybe<Scalars["Float"]>;
+  tick_spacing?: Maybe<Scalars["Float"]>;
 };
 
 /** order by variance() on columns of table "pools" */
@@ -7155,6 +7249,7 @@ export type Pools_Variance_Order_By = {
   create_tx_id?: InputMaybe<Order_By>;
   creator?: InputMaybe<Order_By>;
   id?: InputMaybe<Order_By>;
+  tick_spacing?: InputMaybe<Order_By>;
 };
 
 /** Boolean expression to compare columns of type "pooltype". All fields are combined with logical 'AND'. */
@@ -12285,6 +12380,9 @@ export type GetPoolByPoolIdQuery = {
     smooth_weight_change_params?: any | null;
     scaling_factors?: any | null;
     scaling_factor_controller?: string | null;
+    spread_factor?: string | null;
+    tick_spacing?: number | null;
+    contract_address?: string | null;
     transaction?: { __typename?: "transactions"; block_height: number } | null;
     account?: { __typename?: "accounts"; address: string } | null;
   } | null;
@@ -16383,6 +16481,18 @@ export const GetPoolByPoolIdDocument = {
                   kind: "Field",
                   name: { kind: "Name", value: "scaling_factor_controller" },
                 },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "spread_factor" },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "tick_spacing" },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "contract_address" },
+                },
               ],
             },
           },
diff --git a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
index 27d49df4d..a9b036181 100644
--- a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
+++ b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
@@ -94,7 +94,6 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
               Superfluid
             </CustomTab>
           )}
-          {/* TODO - Fix count  */}
           {pool.type === PoolType.CL && (
             <CustomTab
               count={countDisplayCollectTxs}
diff --git a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
index f1b115eca..e86879f88 100644
--- a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
@@ -78,7 +78,7 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
           </Text>
         </LabelText>
       )}
-      {pool.futurePoolGovernor !== null && (
+      {pool.futurePoolGovernor && (
         <LabelText label="Future Governor">
           {futurePoolGovernorType !== "invalid_address" ? (
             <ExplorerLink
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index 9adfe0e2d..99224c1e0 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -1,7 +1,6 @@
 import type { Coin } from "@cosmjs/stargate";
 import type { UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
-import type { RequestDocument } from "graphql-request";
 import { useCallback } from "react";
 
 import { useCelatoneApp } from "lib/app-provider";
@@ -141,9 +140,8 @@ export const usePoolByPoolId = (
 
   const queryFn = useCallback(async () => {
     if (!poolId) throw new Error("Pool ID is undefined.");
-    // TODO - Remove assertion when backend is implemented
     return indexerGraphClient
-      .request(getPoolByPoolId as RequestDocument, {
+      .request(getPoolByPoolId, {
         poolId,
       })
       .then(({ pools_by_pk }) =>

From fd6c56aa0fcf62fa582b5d37f91f35a50277f303 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 6 Jul 2023 16:17:58 +0700
Subject: [PATCH 312/354] fix: fix comment

---
 src/lib/gql/gql.ts                                   | 12 ++++++------
 src/lib/gql/graphql.ts                               | 10 ++++++++++
 .../components/pool-details/header/PoolInfo.tsx      | 12 ++++--------
 .../pools/components/supportedSection/PoolCard.tsx   | 10 +++++++++-
 .../unsupportedSection/UnsupportedPoolCard.tsx       | 11 ++++++++++-
 src/lib/pages/pools/data.ts                          |  1 +
 src/lib/pages/pools/poolId.tsx                       |  9 +--------
 src/lib/query/pool.ts                                |  2 ++
 src/lib/services/poolService.ts                      |  9 ++++++++-
 src/lib/types/pool.ts                                |  1 +
 10 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index 0ed577071..6583b47c6 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -51,11 +51,11 @@ const documents = {
     types.GetContractListByAdminPaginationDocument,
   "\n  query getContractListCountByAdmin($walletAddress: String!) {\n    contracts_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetContractListCountByAdminDocument,
-  "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n":
+  "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n":
     types.GetPoolListDocument,
   "\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetPoolListCountDocument,
-  "\n  query getPoolListByDenoms(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools: search_pools_with_denoms(\n      args: { denoms: $denoms }\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n":
+  "\n  query getPoolListByDenoms(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools: search_pools_with_denoms(\n      args: { denoms: $denoms }\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n":
     types.GetPoolListByDenomsDocument,
   "\n  query getPoolListByDenomsCount(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n  ) {\n    pools_aggregate: search_pools_with_denoms_aggregate(\n      args: { denoms: $denoms }\n      where: $expression\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetPoolListByDenomsCountDocument,
@@ -168,14 +168,14 @@ export function graphql(
   source: "\n  query getContractListCountByAdmin($walletAddress: String!) {\n    contracts_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getContractListCountByAdmin($walletAddress: String!) {\n    contracts_aggregate(\n      where: { account: { address: { _eq: $walletAddress } } }\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n"
-): typeof documents["\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n"];
+  source: "\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"
+): typeof documents["\n  query getPoolList(\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools(\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getPoolListCount($expression: pools_bool_exp) {\n    pools_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getPoolListByDenoms(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools: search_pools_with_denoms(\n      args: { denoms: $denoms }\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n"
-): typeof documents["\n  query getPoolListByDenoms(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools: search_pools_with_denoms(\n      args: { denoms: $denoms }\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n    }\n  }\n"];
+  source: "\n  query getPoolListByDenoms(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools: search_pools_with_denoms(\n      args: { denoms: $denoms }\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"
+): typeof documents["\n  query getPoolListByDenoms(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n    $order: order_by\n    $offset: Int!\n    $pageSize: Int!\n  ) {\n    pools: search_pools_with_denoms(\n      args: { denoms: $denoms }\n      where: $expression\n      order_by: { id: $order }\n      offset: $offset\n      limit: $pageSize\n    ) {\n      id\n      type\n      is_superfluid\n      liquidity\n      contract_address\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getPoolListByDenomsCount(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n  ) {\n    pools_aggregate: search_pools_with_denoms_aggregate(\n      args: { denoms: $denoms }\n      where: $expression\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getPoolListByDenomsCount(\n    $denoms: _varchar\n    $expression: pools_bool_exp\n  ) {\n    pools_aggregate: search_pools_with_denoms_aggregate(\n      args: { denoms: $denoms }\n      where: $expression\n    ) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index c68fdc315..c3f481fa2 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -12312,6 +12312,7 @@ export type GetPoolListQuery = {
     type: any;
     is_superfluid: boolean;
     liquidity: any;
+    contract_address?: string | null;
   }>;
 };
 
@@ -12343,6 +12344,7 @@ export type GetPoolListByDenomsQuery = {
     type: any;
     is_superfluid: boolean;
     liquidity: any;
+    contract_address?: string | null;
   }>;
 };
 
@@ -16076,6 +16078,10 @@ export const GetPoolListDocument = {
                   name: { kind: "Name", value: "is_superfluid" },
                 },
                 { kind: "Field", name: { kind: "Name", value: "liquidity" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "contract_address" },
+                },
               ],
             },
           },
@@ -16285,6 +16291,10 @@ export const GetPoolListByDenomsDocument = {
                   name: { kind: "Name", value: "is_superfluid" },
                 },
                 { kind: "Field", name: { kind: "Name", value: "liquidity" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "contract_address" },
+                },
               ],
             },
           },
diff --git a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
index e86879f88..6ec3e5f2e 100644
--- a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
@@ -23,7 +23,7 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
       borderRadius="8px"
       px={4}
       py={3}
-      columnGap="43px"
+      columnGap={12}
       rowGap={6}
       mt={6}
       wrap="wrap"
@@ -83,19 +83,15 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
           {futurePoolGovernorType !== "invalid_address" ? (
             <ExplorerLink
               type={futurePoolGovernorType}
-              value={pool.futurePoolGovernor ?? "N/A"}
+              value={pool.futurePoolGovernor}
               isReadOnly={!pool.futurePoolGovernor}
               showCopyOnHover
               textFormat="truncate"
               w="140px"
             />
           ) : (
-            <Text
-              as="p"
-              color={pool.futurePoolGovernor ? "text.main" : "text.disabled"}
-              variant="body2"
-            >
-              {pool.futurePoolGovernor ?? "N/A"}
+            <Text as="p" color="text.main" variant="body2">
+              {pool.futurePoolGovernor}
             </Text>
           )}
         </LabelText>
diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index d9be77f6d..fec519988 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -12,6 +12,7 @@ import { LabelText } from "lib/components/LabelText";
 import { Tooltip } from "lib/components/Tooltip";
 import { AmpTrackWebsite } from "lib/services/amplitude";
 import type { USD, Pool, Token, U } from "lib/types";
+import { PoolType } from "lib/types";
 import { formatPrice } from "lib/utils";
 
 import { AllocationBadge } from "./AllocationBadge";
@@ -33,7 +34,14 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
 
   const navigate = useInternalNavigate();
   const handleOnClick = () => {
-    navigate({ pathname: `/pools/[poolId]`, query: { poolId: item.id } });
+    // First version, navigate to contract details page if pool type is CosmWasm
+    if (item?.type === PoolType.COSMWASM && item.contractAddress)
+      navigate({
+        pathname: `/contracts/${item.contractAddress}`,
+      });
+    else {
+      navigate({ pathname: `/pools/[poolId]`, query: { poolId: item.id } });
+    }
   };
 
   const liquidity = item.poolLiquidity.reduce(
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index c1f52f3b5..4c0ac88a1 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -21,6 +21,7 @@ import { CustomIcon } from "lib/components/icon";
 import { Tooltip } from "lib/components/Tooltip";
 import { AmpTrackExpand, AmpTrackWebsite } from "lib/services/amplitude";
 import type { Pool } from "lib/types";
+import { PoolType } from "lib/types";
 import { formatUTokenWithPrecision, openNewTab } from "lib/utils";
 
 interface UnsupportedPoolCardProps {
@@ -47,7 +48,15 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
 
   const navigate = useInternalNavigate();
   const handleOnClick = () => {
-    navigate({ pathname: `/pools/[poolId]`, query: { poolId: item.id } });
+    // First version, navigate to contract details page if pool type is CosmWasm
+    if (item?.type === PoolType.COSMWASM && item.contractAddress)
+      navigate({
+        pathname: `/contracts/${item.contractAddress}`,
+        replace: true,
+      });
+    else {
+      navigate({ pathname: `/pools/[poolId]`, query: { poolId: item.id } });
+    }
   };
 
   return (
diff --git a/src/lib/pages/pools/data.ts b/src/lib/pages/pools/data.ts
index 72cc421be..9e6cd7f3b 100644
--- a/src/lib/pages/pools/data.ts
+++ b/src/lib/pages/pools/data.ts
@@ -44,6 +44,7 @@ export const usePools = (
     poolLiquidity: pool.poolLiquidity.map<TokenWithValue>((coin) =>
       coinToTokenWithValue(coin.denom, coin.amount, assetInfos?.[coin.denom])
     ),
+    contractAddress: pool.contractAddress,
   }));
 
   return {
diff --git a/src/lib/pages/pools/poolId.tsx b/src/lib/pages/pools/poolId.tsx
index 790dc47a5..e98580cf4 100644
--- a/src/lib/pages/pools/poolId.tsx
+++ b/src/lib/pages/pools/poolId.tsx
@@ -6,7 +6,6 @@ import { BackButton } from "lib/components/button";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import { PoolType } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
 import {
@@ -24,13 +23,7 @@ export const PoolId = () => {
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_POOL_DETAIL);
-    // First version, navigate to contract details page if pool type is CosmWasm
-    if (pool?.type === PoolType.COSMWASM)
-      navigate({
-        pathname: `/contracts/${pool.contractAddress}`,
-        replace: true,
-      });
-  }, [navigate, pool, pool?.contractAddress, pool?.type, router.isReady]);
+  }, [router.isReady]);
 
   if (isLoading) return <Loading />;
   if (!pool) return navigate({ pathname: `/pool` });
diff --git a/src/lib/query/pool.ts b/src/lib/query/pool.ts
index ffd2be9ba..eecfdc9ad 100644
--- a/src/lib/query/pool.ts
+++ b/src/lib/query/pool.ts
@@ -17,6 +17,7 @@ export const getPoolList = graphql(`
       type
       is_superfluid
       liquidity
+      contract_address
     }
   }
 `);
@@ -50,6 +51,7 @@ export const getPoolListByDenoms = graphql(`
       type
       is_superfluid
       liquidity
+      contract_address
     }
   }
 `);
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index 99224c1e0..a9a5cc3e6 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -13,7 +13,13 @@ import {
   getPoolListCount,
   getPoolsByPoolIds,
 } from "lib/query";
-import type { Option, Pool, PoolDetail, PoolTypeFilter } from "lib/types";
+import type {
+  ContractAddr,
+  Option,
+  Pool,
+  PoolDetail,
+  PoolTypeFilter,
+} from "lib/types";
 import { isPositiveInt } from "lib/utils";
 
 import { usePoolExpression } from "./expression/poolExpression";
@@ -65,6 +71,7 @@ export const usePoolListQuery = ({
         type: pool.type,
         isSuperfluid: pool.is_superfluid,
         poolLiquidity: pool.liquidity,
+        contractAddress: pool.contract_address as ContractAddr,
       }))
     );
   }, [expression, indexerGraphClient, offset, order, pageSize, search]);
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index 67c5f0df3..73e7464db 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -27,6 +27,7 @@ export interface Pool<
   type: PoolType;
   isSuperfluid: boolean;
   poolLiquidity: TLiquidity[];
+  contractAddress: Option<ContractAddr | null>;
 }
 
 // TODO - Revisit when backend finished

From 9c3a92bce25a3040c3e28cdd19813de5904c0a46 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 6 Jul 2023 16:28:16 +0700
Subject: [PATCH 313/354] fix: ui, type, add comment

---
 src/lib/pages/pools/components/PoolHeader.tsx                  | 2 +-
 .../pages/pools/components/pool-details/header/PoolInfo.tsx    | 1 -
 src/lib/pages/pools/components/supportedSection/PoolCard.tsx   | 1 +
 .../components/unsupportedSection/UnsupportedPoolCard.tsx      | 1 +
 src/lib/services/poolService.ts                                | 1 +
 src/lib/types/pool.ts                                          | 2 +-
 src/lib/utils/assetValue.ts                                    | 3 +++
 7 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/lib/pages/pools/components/PoolHeader.tsx b/src/lib/pages/pools/components/PoolHeader.tsx
index ae7d91348..ac332c2d1 100644
--- a/src/lib/pages/pools/components/PoolHeader.tsx
+++ b/src/lib/pages/pools/components/PoolHeader.tsx
@@ -119,7 +119,7 @@ export const PoolHeader = ({
             {isSuperfluid && (
               <Flex alignItems="center" gap={2}>
                 <Flex
-                  backgroundColor="pebble.600"
+                  backgroundColor="gray.600"
                   borderRadius="full"
                   w="6px"
                   h="6px"
diff --git a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
index 6ec3e5f2e..aaa7abc34 100644
--- a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
@@ -84,7 +84,6 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
             <ExplorerLink
               type={futurePoolGovernorType}
               value={pool.futurePoolGovernor}
-              isReadOnly={!pool.futurePoolGovernor}
               showCopyOnHover
               textFormat="truncate"
               w="140px"
diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index fec519988..54ee14c26 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -113,6 +113,7 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
             : formatPrice(liquidity)}
         </Text>
       </Flex>
+      {/* TODO - Revisit later */}
       {item.poolLiquidity.some((coin) => !coin.amount) ? (
         <UnderDevAlert poolType={item.type} />
       ) : (
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index 4c0ac88a1..afce67aad 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -123,6 +123,7 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
             </Flex>
           </AccordionButton>
           <AccordionPanel pb={4}>
+            {/* TODO - Revisit later */}
             {item.poolLiquidity.some((coin) => !coin.amount) ? (
               <UnderDevAlert poolType={item.type} />
             ) : (
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index a9a5cc3e6..f2a2bcd8a 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -152,6 +152,7 @@ export const usePoolByPoolId = (
         poolId,
       })
       .then(({ pools_by_pk }) =>
+        // TODO: revisit to remove this assertion later
         pools_by_pk
           ? ({
               id: pools_by_pk.id,
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index 73e7464db..e35073119 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -48,5 +48,5 @@ export interface PoolDetail<
   scalingFactorController: string | null;
   spreadFactor: string | null;
   tickSpacing: number | null;
-  contractAddress: ContractAddr;
+  contractAddress: ContractAddr | null;
 }
diff --git a/src/lib/utils/assetValue.ts b/src/lib/utils/assetValue.ts
index c14bfd729..bbf059661 100644
--- a/src/lib/utils/assetValue.ts
+++ b/src/lib/utils/assetValue.ts
@@ -41,6 +41,9 @@ export const coinToTokenWithValue = (
   amount: string,
   assetInfo: Option<AssetInfo>
 ): TokenWithValue => {
+  /**
+   * @remarks Assuming if liquidty amount does not exist, it will result in empty string
+   */
   const tokenAmount = (amount.length === 0 ? 0 : big(amount)) as U<Token<Big>>;
   return {
     denom,

From 7aedb58a9be2ed1570da6edb4fc0db6562952405 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 6 Jul 2023 18:31:36 +0700
Subject: [PATCH 314/354] fix: miscellaneous

---
 .../pages/pools/components/UnderDevAlert.tsx  |  22 ---
 .../pool-details/header/PoolInfo.tsx          |  18 ++-
 .../supportedSection/AllocationBadge.tsx      |   3 +-
 .../components/supportedSection/PoolCard.tsx  | 101 +++++++-------
 .../UnsupportedPoolCard.tsx                   | 132 ++++++++----------
 src/lib/types/pool.ts                         |   2 -
 src/lib/types/tx/transaction.ts               |   1 -
 src/lib/utils/assetValue.ts                   |  18 +--
 src/lib/utils/index.ts                        |   1 +
 src/lib/utils/math.ts                         |  10 ++
 10 files changed, 142 insertions(+), 166 deletions(-)
 delete mode 100644 src/lib/pages/pools/components/UnderDevAlert.tsx
 create mode 100644 src/lib/utils/math.ts

diff --git a/src/lib/pages/pools/components/UnderDevAlert.tsx b/src/lib/pages/pools/components/UnderDevAlert.tsx
deleted file mode 100644
index a799b72b6..000000000
--- a/src/lib/pages/pools/components/UnderDevAlert.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Alert, Text } from "@chakra-ui/react";
-
-import { CustomIcon } from "lib/components/icon";
-import { PoolType } from "lib/types";
-
-interface UnderDevAlertProps {
-  poolType: PoolType;
-}
-
-const poolText = (poolType: PoolType) => {
-  if (poolType === PoolType.CL) return "concentrated liquidity";
-  if (poolType === PoolType.COSMWASM) return "CosmWasm";
-  return "";
-};
-export const UnderDevAlert = ({ poolType }: UnderDevAlertProps) => (
-  <Alert status="info" variant="info">
-    <CustomIcon name="alert-circle-solid" boxSize={4} mr={2} />
-    <Text color="text.dark">
-      Information for {poolText(poolType)} pool is under development
-    </Text>
-  </Alert>
-);
diff --git a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
index aaa7abc34..b227ac086 100644
--- a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
@@ -12,6 +12,7 @@ interface PoolInfoProps {
   pool: PoolDetail;
 }
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 export const PoolInfo = ({ pool }: PoolInfoProps) => {
   const getAddressType = useGetAddressType();
   const futurePoolGovernorType = getAddressType(
@@ -78,19 +79,28 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
           </Text>
         </LabelText>
       )}
-      {pool.futurePoolGovernor && (
+      {pool.futurePoolGovernor !== null && (
         <LabelText label="Future Governor">
           {futurePoolGovernorType !== "invalid_address" ? (
             <ExplorerLink
               type={futurePoolGovernorType}
-              value={pool.futurePoolGovernor}
+              value={
+                pool.futurePoolGovernor.length ? pool.futurePoolGovernor : "N/A"
+              }
+              isReadOnly={!pool.futurePoolGovernor}
               showCopyOnHover
               textFormat="truncate"
               w="140px"
             />
           ) : (
-            <Text as="p" color="text.main" variant="body2">
-              {pool.futurePoolGovernor}
+            <Text
+              as="p"
+              color={
+                pool.futurePoolGovernor.length ? "text.main" : "text.disabled"
+              }
+              variant="body2"
+            >
+              {pool.futurePoolGovernor.length ? pool.futurePoolGovernor : "N/A"}
             </Text>
           )}
         </LabelText>
diff --git a/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
index cf868ba2a..4de95a049 100644
--- a/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
+++ b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
@@ -8,6 +8,7 @@ import {
   getTokenLabel,
   formatUTokenWithPrecision,
   formatRatio,
+  divWithDefault,
 } from "lib/utils";
 
 interface AllocationBadgeProps {
@@ -32,7 +33,7 @@ export const AllocationBadge = ({
   mode,
 }: AllocationBadgeProps) => {
   const formattedValue = formatRatio(
-    (value ?? big(0)).div(liquidity) as Ratio<Big>
+    divWithDefault(value ?? big(0), liquidity, 0) as Ratio<Big>
   );
   const formattedAmount = denom
     ? formatUTokenWithPrecision(amount, precision ?? 0)
diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index 54ee14c26..060a001bc 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -5,7 +5,6 @@ import Link from "next/link";
 import { useMemo } from "react";
 
 import { PoolHeader } from "../PoolHeader";
-import { UnderDevAlert } from "../UnderDevAlert";
 import { useInternalNavigate, usePoolConfig } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
@@ -37,7 +36,8 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
     // First version, navigate to contract details page if pool type is CosmWasm
     if (item?.type === PoolType.COSMWASM && item.contractAddress)
       navigate({
-        pathname: `/contracts/${item.contractAddress}`,
+        pathname: `/contracts/[contractAddress]`,
+        query: { contractAddress: item.contractAddress },
       });
     else {
       navigate({ pathname: `/pools/[poolId]`, query: { poolId: item.id } });
@@ -48,6 +48,7 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
     (total, asset) => total.add(asset.value ?? big(0)) as USD<Big>,
     big(0) as USD<Big>
   );
+
   const is4Assets = item.poolLiquidity.length === 4;
 
   return (
@@ -113,57 +114,51 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
             : formatPrice(liquidity)}
         </Text>
       </Flex>
-      {/* TODO - Revisit later */}
-      {item.poolLiquidity.some((coin) => !coin.amount) ? (
-        <UnderDevAlert poolType={item.type} />
-      ) : (
-        <SimpleGrid columns={4} gap={2}>
-          <>
-            {item.poolLiquidity.slice(0, 3).map((asset) => (
-              <AllocationBadge
-                key={asset.denom}
-                denom={asset.denom}
-                logo={asset.logo}
-                symbol={asset.symbol}
-                precision={asset.precision}
-                amount={asset.amount}
-                value={asset.value}
-                liquidity={liquidity}
-                mode={mode}
-              />
-            ))}
-            {item.poolLiquidity.length >= 4 && (
-              <AllocationBadge
-                key="OTHERS"
-                denom={is4Assets ? item.poolLiquidity[3].denom : undefined}
-                logo={is4Assets ? item.poolLiquidity[3].logo : undefined}
-                symbol={is4Assets ? item.poolLiquidity[3].symbol : undefined}
-                precision={
-                  is4Assets ? item.poolLiquidity[3].precision : undefined
-                }
-                amount={
-                  item.poolLiquidity
-                    .slice(3)
-                    .reduce(
-                      (prev, asset) => prev.add(asset.amount),
-                      big(0)
-                    ) as U<Token<Big>>
-                }
-                value={
-                  item.poolLiquidity
-                    .slice(3)
-                    .reduce(
-                      (prev, asset) => prev.add(asset.value ?? big(0)),
-                      big(0)
-                    ) as USD<Big>
-                }
-                liquidity={liquidity}
-                mode={mode}
-              />
-            )}
-          </>
-        </SimpleGrid>
-      )}
+      <SimpleGrid columns={4} gap={2}>
+        <>
+          {item.poolLiquidity.slice(0, 3).map((asset) => (
+            <AllocationBadge
+              key={asset.denom}
+              denom={asset.denom}
+              logo={asset.logo}
+              symbol={asset.symbol}
+              precision={asset.precision}
+              amount={asset.amount}
+              value={asset.value}
+              liquidity={liquidity}
+              mode={mode}
+            />
+          ))}
+          {item.poolLiquidity.length >= 4 && (
+            <AllocationBadge
+              key="OTHERS"
+              denom={is4Assets ? item.poolLiquidity[3].denom : undefined}
+              logo={is4Assets ? item.poolLiquidity[3].logo : undefined}
+              symbol={is4Assets ? item.poolLiquidity[3].symbol : undefined}
+              precision={
+                is4Assets ? item.poolLiquidity[3].precision : undefined
+              }
+              amount={
+                item.poolLiquidity
+                  .slice(3)
+                  .reduce((prev, asset) => prev.add(asset.amount), big(0)) as U<
+                  Token<Big>
+                >
+              }
+              value={
+                item.poolLiquidity
+                  .slice(3)
+                  .reduce(
+                    (prev, asset) => prev.add(asset.value ?? big(0)),
+                    big(0)
+                  ) as USD<Big>
+              }
+              liquidity={liquidity}
+              mode={mode}
+            />
+          )}
+        </>
+      </SimpleGrid>
     </Flex>
   );
 };
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index afce67aad..57f2f3e73 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -14,7 +14,6 @@ import { useMemo } from "react";
 
 import { getUndefinedTokenIcon } from "../../utils";
 import { PoolHeader } from "../PoolHeader";
-import { UnderDevAlert } from "../UnderDevAlert";
 import { useInternalNavigate, usePoolConfig } from "lib/app-provider";
 import { Copier } from "lib/components/copy";
 import { CustomIcon } from "lib/components/icon";
@@ -51,8 +50,8 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
     // First version, navigate to contract details page if pool type is CosmWasm
     if (item?.type === PoolType.COSMWASM && item.contractAddress)
       navigate({
-        pathname: `/contracts/${item.contractAddress}`,
-        replace: true,
+        pathname: `/contracts/[contractAddress]`,
+        query: { contractAddress: item.contractAddress },
       });
     else {
       navigate({ pathname: `/pools/[poolId]`, query: { poolId: item.id } });
@@ -123,78 +122,67 @@ export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
             </Flex>
           </AccordionButton>
           <AccordionPanel pb={4}>
-            {/* TODO - Revisit later */}
-            {item.poolLiquidity.some((coin) => !coin.amount) ? (
-              <UnderDevAlert poolType={item.type} />
-            ) : (
-              <Flex>
-                <Text
-                  color="text.dark"
-                  variant="body2"
-                  fontWeight="600"
-                  w="144px"
-                >
-                  Tokens in Pool
-                </Text>
-                <Flex gap={4} flexDirection="column">
-                  <Flex gap={2} flexDirection="column">
-                    {item.poolLiquidity.map((asset) => (
-                      <Flex
-                        className="copier-wrapper"
-                        key={asset.denom}
-                        gap={3}
-                        alignItems="center"
-                      >
-                        <Image
-                          boxSize={6}
-                          src={asset.logo ?? getUndefinedTokenIcon(asset.denom)}
-                        />
-                        <Text
-                          variant="body2"
-                          color="text.main"
-                          fontWeight="bold"
-                        >
-                          {formatUTokenWithPrecision(
-                            asset.amount,
-                            asset.precision ?? 0
-                          )}
-                        </Text>
-                        <Flex>{asset.symbol ?? asset.denom}</Flex>
-                        <Copier
-                          type={
-                            asset.symbol
-                              ? "supported_asset"
-                              : "unsupported_asset"
-                          }
-                          value={asset.denom}
-                          copyLabel="Token ID Copied!"
-                          display="none"
-                          ml="1px"
-                        />
-                      </Flex>
-                    ))}
-                  </Flex>
-                  <Flex gap={3}>
-                    <Button onClick={handleOnClick} size="sm">
-                      View Pool Details
-                    </Button>
-                    <Button
-                      onClick={() => {
-                        AmpTrackWebsite(`${poolUrl}/${item.id}`);
-                        openNewTab(`${poolUrl}/${item.id}`);
-                      }}
-                      size="sm"
-                      variant="outline-primary"
-                      rightIcon={
-                        <CustomIcon name="launch" color="outline-primary" />
-                      }
+            <Flex>
+              <Text
+                color="text.dark"
+                variant="body2"
+                fontWeight="600"
+                w="144px"
+              >
+                Tokens in Pool
+              </Text>
+              <Flex gap={4} flexDirection="column">
+                <Flex gap={2} flexDirection="column">
+                  {item.poolLiquidity.map((asset) => (
+                    <Flex
+                      className="copier-wrapper"
+                      key={asset.denom}
+                      gap={3}
+                      alignItems="center"
                     >
-                      View in Osmosis
-                    </Button>
-                  </Flex>
+                      <Image
+                        boxSize={6}
+                        src={asset.logo ?? getUndefinedTokenIcon(asset.denom)}
+                      />
+                      <Text variant="body2" color="text.main" fontWeight="bold">
+                        {formatUTokenWithPrecision(
+                          asset.amount,
+                          asset.precision ?? 0
+                        )}
+                      </Text>
+                      <Flex>{asset.symbol ?? asset.denom}</Flex>
+                      <Copier
+                        type={
+                          asset.symbol ? "supported_asset" : "unsupported_asset"
+                        }
+                        value={asset.denom}
+                        copyLabel="Token ID Copied!"
+                        display="none"
+                        ml="1px"
+                      />
+                    </Flex>
+                  ))}
+                </Flex>
+                <Flex gap={3}>
+                  <Button onClick={handleOnClick} size="sm">
+                    View Pool Details
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      AmpTrackWebsite(`${poolUrl}/${item.id}`);
+                      openNewTab(`${poolUrl}/${item.id}`);
+                    }}
+                    size="sm"
+                    variant="outline-primary"
+                    rightIcon={
+                      <CustomIcon name="launch" color="outline-primary" />
+                    }
+                  >
+                    View in Osmosis
+                  </Button>
                 </Flex>
               </Flex>
-            )}
+            </Flex>
           </AccordionPanel>
         </>
       )}
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index e35073119..678caa32e 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -3,7 +3,6 @@ import type { Big } from "big.js";
 
 import type { Addr, ContractAddr, Option, TokenWithValue } from "lib/types";
 
-// TODO - Recheck type name
 export enum PoolType {
   ALL = "All",
   BALANCER = "Balancer",
@@ -30,7 +29,6 @@ export interface Pool<
   contractAddress: Option<ContractAddr | null>;
 }
 
-// TODO - Revisit when backend finished
 export interface PoolDetail<
   TWeight extends string | Big = Big,
   TLiquidity extends Coin | TokenWithValue = TokenWithValue
diff --git a/src/lib/types/tx/transaction.ts b/src/lib/types/tx/transaction.ts
index 78a16a0ce..cfcd465d2 100644
--- a/src/lib/types/tx/transaction.ts
+++ b/src/lib/types/tx/transaction.ts
@@ -50,7 +50,6 @@ export interface TxFilters {
   isClearAdmin: boolean;
 }
 
-// TODO - Revisit when backend finished
 export type PoolTxFilter =
   | "is_all"
   | "is_swap"
diff --git a/src/lib/utils/assetValue.ts b/src/lib/utils/assetValue.ts
index bbf059661..93b84aab4 100644
--- a/src/lib/utils/assetValue.ts
+++ b/src/lib/utils/assetValue.ts
@@ -41,10 +41,7 @@ export const coinToTokenWithValue = (
   amount: string,
   assetInfo: Option<AssetInfo>
 ): TokenWithValue => {
-  /**
-   * @remarks Assuming if liquidty amount does not exist, it will result in empty string
-   */
-  const tokenAmount = (amount.length === 0 ? 0 : big(amount)) as U<Token<Big>>;
+  const tokenAmount = big(amount) as U<Token<Big>>;
   return {
     denom,
     amount: tokenAmount,
@@ -52,13 +49,12 @@ export const coinToTokenWithValue = (
     logo: assetInfo?.logo,
     precision: assetInfo?.precision,
     price: assetInfo ? (big(assetInfo.price).toFixed() as USD) : undefined,
-    value:
-      assetInfo && tokenAmount
-        ? calculateAssetValue(
-            toToken(tokenAmount, assetInfo.precision),
-            assetInfo.price as USD<number>
-          )
-        : undefined,
+    value: assetInfo
+      ? calculateAssetValue(
+          toToken(tokenAmount, assetInfo.precision),
+          assetInfo.price as USD<number>
+        )
+      : undefined,
   };
 };
 
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index bbe9dd6d5..6c4f2cb77 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -31,3 +31,4 @@ export * from "./proposal";
 export * from "./codeHash";
 export * from "./icon";
 export * from "./window";
+export * from "./math";
diff --git a/src/lib/utils/math.ts b/src/lib/utils/math.ts
new file mode 100644
index 000000000..1c3281958
--- /dev/null
+++ b/src/lib/utils/math.ts
@@ -0,0 +1,10 @@
+import type { BigSource, Big } from "big.js";
+import big from "big.js";
+
+export function divWithDefault(
+  a: BigSource,
+  b: BigSource,
+  _default: BigSource
+): Big {
+  return big(b).eq(0) ? big(_default) : big(a).div(b);
+}

From 1499b5a2aae1e644a6f93f35ac2659cb1f0c87f6 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Thu, 6 Jul 2023 18:39:04 +0700
Subject: [PATCH 315/354] fix: miscellaneous

---
 .../pool-details/header/PoolInfo.tsx          |  5 +-
 .../components/supportedSection/PoolCard.tsx  | 82 +++++++++----------
 2 files changed, 40 insertions(+), 47 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
index b227ac086..4bd7c0a4d 100644
--- a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
@@ -84,10 +84,7 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
           {futurePoolGovernorType !== "invalid_address" ? (
             <ExplorerLink
               type={futurePoolGovernorType}
-              value={
-                pool.futurePoolGovernor.length ? pool.futurePoolGovernor : "N/A"
-              }
-              isReadOnly={!pool.futurePoolGovernor}
+              value={pool.futurePoolGovernor}
               showCopyOnHover
               textFormat="truncate"
               w="140px"
diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index 060a001bc..1d31b13e5 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -115,49 +115,45 @@ export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
         </Text>
       </Flex>
       <SimpleGrid columns={4} gap={2}>
-        <>
-          {item.poolLiquidity.slice(0, 3).map((asset) => (
-            <AllocationBadge
-              key={asset.denom}
-              denom={asset.denom}
-              logo={asset.logo}
-              symbol={asset.symbol}
-              precision={asset.precision}
-              amount={asset.amount}
-              value={asset.value}
-              liquidity={liquidity}
-              mode={mode}
-            />
-          ))}
-          {item.poolLiquidity.length >= 4 && (
-            <AllocationBadge
-              key="OTHERS"
-              denom={is4Assets ? item.poolLiquidity[3].denom : undefined}
-              logo={is4Assets ? item.poolLiquidity[3].logo : undefined}
-              symbol={is4Assets ? item.poolLiquidity[3].symbol : undefined}
-              precision={
-                is4Assets ? item.poolLiquidity[3].precision : undefined
-              }
-              amount={
-                item.poolLiquidity
-                  .slice(3)
-                  .reduce((prev, asset) => prev.add(asset.amount), big(0)) as U<
-                  Token<Big>
-                >
-              }
-              value={
-                item.poolLiquidity
-                  .slice(3)
-                  .reduce(
-                    (prev, asset) => prev.add(asset.value ?? big(0)),
-                    big(0)
-                  ) as USD<Big>
-              }
-              liquidity={liquidity}
-              mode={mode}
-            />
-          )}
-        </>
+        {item.poolLiquidity.slice(0, 3).map((asset) => (
+          <AllocationBadge
+            key={asset.denom}
+            denom={asset.denom}
+            logo={asset.logo}
+            symbol={asset.symbol}
+            precision={asset.precision}
+            amount={asset.amount}
+            value={asset.value}
+            liquidity={liquidity}
+            mode={mode}
+          />
+        ))}
+        {item.poolLiquidity.length >= 4 && (
+          <AllocationBadge
+            key="OTHERS"
+            denom={is4Assets ? item.poolLiquidity[3].denom : undefined}
+            logo={is4Assets ? item.poolLiquidity[3].logo : undefined}
+            symbol={is4Assets ? item.poolLiquidity[3].symbol : undefined}
+            precision={is4Assets ? item.poolLiquidity[3].precision : undefined}
+            amount={
+              item.poolLiquidity
+                .slice(3)
+                .reduce((prev, asset) => prev.add(asset.amount), big(0)) as U<
+                Token<Big>
+              >
+            }
+            value={
+              item.poolLiquidity
+                .slice(3)
+                .reduce(
+                  (prev, asset) => prev.add(asset.value ?? big(0)),
+                  big(0)
+                ) as USD<Big>
+            }
+            liquidity={liquidity}
+            mode={mode}
+          />
+        )}
       </SimpleGrid>
     </Flex>
   );

From b29aad6ae596dfbaa529896ee3abc549f1af7262 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 6 Jul 2023 22:15:45 +0700
Subject: [PATCH 316/354] docs: edit changelog

---
 CHANGELOG.md | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f40c12a83..5641bcbea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -46,12 +46,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [#296](https://github.com/alleslabs/celatone-frontend/pull/296) Add pool header and pool assets section for pool details page
 - [#295](https://github.com/alleslabs/celatone-frontend/pull/295) Add expand/collapse all for unsupported pool list
 - [#277](https://github.com/alleslabs/celatone-frontend/pull/277) Wire up data for pool navigation page
-- [#275](https://github.com/alleslabs/celatone-frontend/pull/275) Add Pool navigation and pool detail data
+- [#276](https://github.com/alleslabs/celatone-frontend/pull/276) Add Pool navigation and pool detail data
 - [#270](https://github.com/alleslabs/celatone-frontend/pull/270) Add Pool navigation and detail page
-
-### Improvements
-
-- [#283](https://github.com/alleslabs/celatone-frontend/pull/283) Change unsupported token icon render logic
 - [#418](https://github.com/alleslabs/celatone-frontend/pull/418) Add gitignore for new yarn version
 - [#406](https://github.com/alleslabs/celatone-frontend/pull/406) add test cases for `utils/formatter/token.ts`
 - [#398](https://github.com/alleslabs/celatone-frontend/pull/398) Setup Jest and sample tests
@@ -72,6 +68,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#283](https://github.com/alleslabs/celatone-frontend/pull/283) Change unsupported token icon render logic
 - [#413](https://github.com/alleslabs/celatone-frontend/pull/413) Add jest test cases for date utils
 - [#404](https://github.com/alleslabs/celatone-frontend/pull/404) Use internal navigate instead of app link for block navigation
 - [#396](https://github.com/alleslabs/celatone-frontend/pull/396) Refactor useConfig, disable wasm related tabs on the public project page

From 3271016c1a87f07740ce124733ba2f1892656ead Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 7 Jul 2023 08:14:20 +0700
Subject: [PATCH 317/354] chore: prevent div by zero case

---
 .../pool-details/tables/pool-assets/PoolAssetsTableRow.tsx  | 3 ++-
 src/lib/pages/pools/data.ts                                 | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
index a928263a7..d6352df78 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
@@ -14,6 +14,7 @@ import {
   formatUTokenWithPrecision,
   getTokenLabel,
   formatRatio,
+  divWithDefault,
 } from "lib/utils";
 
 interface PoolAssetsTableRowProps {
@@ -32,7 +33,7 @@ export const PoolAssetsTableRow = ({
   liquidityIndex,
 }: PoolAssetsTableRowProps) => {
   const allocation = token.value
-    ? formatRatio(token.value.div(totalLiquidity) as Ratio<Big>)
+    ? formatRatio(divWithDefault(token.value, totalLiquidity, 0) as Ratio<Big>)
     : undefined;
   const tokenWeight = weight?.find(
     (w) => w.denom === token.denom
diff --git a/src/lib/pages/pools/data.ts b/src/lib/pages/pools/data.ts
index 9e6cd7f3b..e7df12fad 100644
--- a/src/lib/pages/pools/data.ts
+++ b/src/lib/pages/pools/data.ts
@@ -15,7 +15,7 @@ import type {
   Ratio,
   TokenWithValue,
 } from "lib/types";
-import { coinToTokenWithValue, formatRatio } from "lib/utils";
+import { coinToTokenWithValue, divWithDefault, formatRatio } from "lib/utils";
 
 export const usePools = (
   isSupported: boolean,
@@ -91,7 +91,9 @@ export const usePool = (
             weight: bigWeight,
             percentWeight:
               totalPoolWeight && totalPoolWeight.gt(0)
-                ? formatRatio(bigWeight.div(totalPoolWeight) as Ratio<Big>)
+                ? formatRatio(
+                    divWithDefault(bigWeight, totalPoolWeight, 0) as Ratio<Big>
+                  )
                 : null,
           };
         }) ?? null,

From 21b005d3b7a596e4efaec1a6e3417c9ddd41a251 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 7 Jul 2023 10:57:12 +0700
Subject: [PATCH 318/354] feat: add redirect rules, enable nav

---
 next.config.js                  |  1 +
 src/lib/layout/navbar/index.tsx | 17 +++++++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/next.config.js b/next.config.js
index ca23ae1e6..c4058f97d 100644
--- a/next.config.js
+++ b/next.config.js
@@ -45,6 +45,7 @@ const nextConfig = {
       "contract-list",
       "past-tx",
       "my-code",
+      "pool",
     ];
 
     return routes.reduce((acc, route) => {
diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index 1a00b1bf9..c2d883165 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -1,7 +1,7 @@
 import { Flex } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 
-import { usePublicProjectConfig } from "lib/app-provider";
+import { usePoolConfig, usePublicProjectConfig } from "lib/app-provider";
 import { INSTANTIATED_LIST_NAME, SAVED_LIST_NAME } from "lib/data";
 import { useIsCurrentPage } from "lib/hooks";
 import { useContractStore, usePublicProjectStore } from "lib/providers/store";
@@ -19,6 +19,7 @@ interface NavbarProps {
 
 const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
   const { getContractLists } = useContractStore();
+  const poolConfig = usePoolConfig({ shouldRedirect: false });
   const { getSavedPublicProjects } = usePublicProjectStore();
   const publicProject = usePublicProjectConfig({ shouldRedirect: false });
   const isCurrentPage = useIsCurrentPage();
@@ -38,11 +39,15 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
           slug: "/proposals",
           icon: "proposal",
         },
-        // {
-        //   name: "Osmosis Pools",
-        //   slug: "/pools",
-        //   icon: "pool",
-        // },
+        ...(poolConfig.enabled
+          ? ([
+              {
+                name: "Osmosis Pools",
+                slug: "/pools",
+                icon: "pool",
+              },
+            ] as const)
+          : []),
       ],
     },
     {

From 5b1ea0998db2d3174e5ba564d4f2524132670396 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 7 Jul 2023 11:50:54 +0700
Subject: [PATCH 319/354] chore: refactor getTokenLabel

---
 src/lib/components/ToggleWithName.tsx                  |  2 +-
 src/lib/pages/pools/components/PoolHeader.tsx          | 10 ++++++----
 .../tables/pool-assets/PoolAssetsTableRow.tsx          |  2 +-
 .../pool-txs/messages/components/PoolAssetCard.tsx     |  2 +-
 .../pool-txs/messages/swap/components/PoolRoute.tsx    |  2 +-
 .../components/supportedSection/AllocationBadge.tsx    |  2 +-
 6 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/ToggleWithName.tsx b/src/lib/components/ToggleWithName.tsx
index 3ba7fbab4..2273fa0c7 100644
--- a/src/lib/components/ToggleWithName.tsx
+++ b/src/lib/components/ToggleWithName.tsx
@@ -13,7 +13,7 @@ export const ToggleWithName = ({
   options,
   selectOption,
 }: ToggleWithNameProps) => (
-  <Flex p="1" borderRadius={4} border="1px" borderColor="gray.700">
+  <Flex p={1} borderRadius={4} border="1px" borderColor="gray.700">
     {options.map((item) => (
       <Button
         key={item.value}
diff --git a/src/lib/pages/pools/components/PoolHeader.tsx b/src/lib/pages/pools/components/PoolHeader.tsx
index ac332c2d1..965b81ed9 100644
--- a/src/lib/pages/pools/components/PoolHeader.tsx
+++ b/src/lib/pages/pools/components/PoolHeader.tsx
@@ -59,7 +59,7 @@ export const PoolHeader = ({
         <Box>
           <Flex gap={1} flexWrap="wrap">
             <Heading as="h6" fontWeight="600" variant="h6">
-              {poolLiquidity[0].symbol ?? getTokenLabel(poolLiquidity[0].denom)}
+              {getTokenLabel(poolLiquidity[0].denom, poolLiquidity[0].symbol)}
             </Heading>
             {poolLiquidity.slice(1, 3).map((item) => (
               <Flex key={item.denom} gap={1}>
@@ -73,7 +73,7 @@ export const PoolHeader = ({
                   /
                 </Heading>
                 <Heading as="h6" fontWeight="600" variant="h6">
-                  {item.symbol ?? getTokenLabel(item.denom)}
+                  {getTokenLabel(item.denom, item.symbol)}
                 </Heading>
               </Flex>
             ))}
@@ -89,8 +89,10 @@ export const PoolHeader = ({
                 </Heading>
                 <Heading as="h6" fontWeight="600" variant="h6">
                   {poolLiquidity.length === 4
-                    ? poolLiquidity[3].symbol ??
-                      getTokenLabel(poolLiquidity[3].denom)
+                    ? getTokenLabel(
+                        poolLiquidity[3].denom,
+                        poolLiquidity[3].symbol
+                      )
                     : `+${poolLiquidity.length - 3}`}
                 </Heading>
               </Flex>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
index d6352df78..b77749128 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-assets/PoolAssetsTableRow.tsx
@@ -58,7 +58,7 @@ export const PoolAssetsTableRow = ({
           <Flex flexDirection="column">
             <Flex align="center" gap={1}>
               <Text variant="body2" fontWeight={600} color="text.main">
-                {token.symbol ?? getTokenLabel(token.denom)}
+                {getTokenLabel(token.denom, token.symbol)}
               </Text>
               <Flex className="widget" display="none" align="center" gap={1}>
                 <TooltipInfo
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
index 49decb2c2..2bbbc7c42 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
@@ -94,7 +94,7 @@ export const PoolAssetCard = ({
                 fontWeight={400}
                 color="text.main"
               >
-                {token.symbol ?? getTokenLabel(token.denom)}
+                {getTokenLabel(token.denom, token.symbol)}
                 <Text as="span" fontWeight={400} color="accent.main">
                   {" "}
                   /
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
index 6ac75fc62..2f27c0ffd 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/swap/components/PoolRoute.tsx
@@ -81,7 +81,7 @@ export const PoolRoute = ({
                           : "text.main"
                       }
                     >
-                      {token.symbol ?? getTokenLabel(token.denom)}
+                      {getTokenLabel(token.denom, token.symbol)}
                       <Text as="span" fontWeight={400} color="accent.main">
                         {" "}
                         /
diff --git a/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
index 4de95a049..0277018b9 100644
--- a/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
+++ b/src/lib/pages/pools/components/supportedSection/AllocationBadge.tsx
@@ -60,7 +60,7 @@ export const AllocationBadge = ({
           color="text.dark"
           fontWeight="600"
         >
-          {denom ? symbol ?? getTokenLabel(denom) : "OTHERS"}
+          {denom ? getTokenLabel(denom, symbol) : "OTHERS"}
         </Text>
         <Text variant="body3" color="text.main">
           {mode === "percent-value"

From ce79c91ef53e2be97ffc903cd719d0796b78f27a Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 7 Jul 2023 13:17:54 +0700
Subject: [PATCH 320/354] fix: remove unnecessary option

---
 src/lib/services/expression/txExpression.ts | 2 +-
 src/lib/services/txService.ts               | 9 +++++----
 src/lib/services/validatorService.ts        | 4 ++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/lib/services/expression/txExpression.ts b/src/lib/services/expression/txExpression.ts
index 19b1155a6..04ba3fb68 100644
--- a/src/lib/services/expression/txExpression.ts
+++ b/src/lib/services/expression/txExpression.ts
@@ -82,7 +82,7 @@ export const usePoolTxExpression = (
 ) =>
   useMemo(
     () => ({
-      pool_id: poolId ? { _eq: poolId } : {},
+      ...(poolId ? { pool_id: { _eq: poolId } } : {}),
       ...(type !== "is_all" ? { [type]: { _eq: true } } : {}),
     }),
     [poolId, type]
diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index 6a4d661c2..77bbf9d3b 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -203,7 +203,7 @@ export const useTxsCountByAddress = (
 };
 
 export const useTxsByPoolIdPagination = (
-  poolId: Option<number>,
+  poolId: number,
   type: PoolTxFilter,
   offset: number,
   pageSize: number
@@ -219,9 +219,10 @@ export const useTxsByPoolIdPagination = (
         pageSize,
       })
       .then(({ pool_transactions }) =>
-        pool_transactions.map((transaction) => ({
+        pool_transactions.map<Transaction>((transaction) => ({
           hash: parseTxHash(transaction.transaction.hash),
-          messages: snakeToCamel(transaction.transaction.messages),
+          // TODO: revisit this
+          messages: snakeToCamel(transaction.transaction.messages) as Message[],
           sender: transaction.transaction.account.address as Addr,
           isSigner: true,
           height: transaction.block.height,
@@ -252,7 +253,7 @@ export const useTxsByPoolIdPagination = (
 };
 
 export const useTxsCountByPoolId = (
-  poolId: Option<number>,
+  poolId: number,
   type: PoolTxFilter
 ): UseQueryResult<Option<number>> => {
   const { indexerGraphClient } = useCelatoneApp();
diff --git a/src/lib/services/validatorService.ts b/src/lib/services/validatorService.ts
index 9abeb352a..064f6db67 100644
--- a/src/lib/services/validatorService.ts
+++ b/src/lib/services/validatorService.ts
@@ -6,13 +6,13 @@ import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 
 import { useBaseApiRoute } from "lib/app-provider";
-import type { Option, ValidatorAddr } from "lib/types";
+import type { ValidatorAddr } from "lib/types";
 
 import type { RawValidator } from "./validator";
 import { getValidator, getValidators } from "./validator";
 
 export const useValidator = (
-  validatorAddr: Option<ValidatorAddr>,
+  validatorAddr: ValidatorAddr,
   enabled = true
 ): UseQueryResult<RawValidator> => {
   const lcdEndpoint = useBaseApiRoute("rest");

From 20b3fec3052e7558d2e971e5796d9e69b8e514e1 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Fri, 7 Jul 2023 13:26:27 +0700
Subject: [PATCH 321/354] fix: miscellaneous

---
 src/lib/components/CopyLink.tsx                               | 1 +
 .../pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx  | 2 +-
 .../pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx  | 2 +-
 .../tx-details/components/tx-message/msg-receipts/index.tsx   | 4 ++--
 src/lib/types/pool.ts                                         | 4 ++--
 src/lib/utils/tx/types.ts                                     | 2 +-
 6 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/CopyLink.tsx b/src/lib/components/CopyLink.tsx
index 9788708ff..6e3ac3b08 100644
--- a/src/lib/components/CopyLink.tsx
+++ b/src/lib/components/CopyLink.tsx
@@ -26,6 +26,7 @@ export const CopyLink = ({
   const { onCopy, hasCopied } = useClipboard(value);
   const [isHover, setIsHover] = useState(false);
 
+  // TODO - Refactor
   const displayIcon = useMemo<IconProps["display"]>(() => {
     if (showCopyOnHover) {
       if (isHover) {
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx
index 6cb9d4932..8b3ae1601 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutAction.tsx
@@ -38,7 +38,7 @@ export const MsgJoinSwapShareAmountOutAction = ({
       <PoolLogoLink pool={pool} ampCopierSection={ampCopierSection} />
       <CustomIcon name="arrow-right" boxSize={4} color="accent.main" />
       <MsgToken
-        coin={{ amount: msg.share_amount_out, denom: poolDenom }}
+        coin={{ amount: msg.share_out_amount, denom: poolDenom }}
         symbol={poolAssetInfo?.symbol}
         precision={poolAssetInfo?.precision}
         fontWeight={700}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
index d2d48b23f..8e4087326 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/MsgJoinSwapShareAmountOutDetail.tsx
@@ -51,7 +51,7 @@ export const MsgJoinSwapShareAmountOutDetail = ({
       <LiquidityDivider />
       <PoolLPCard
         msgIndex={msgIndex}
-        msgShareAmount={msg.share_amount_out}
+        msgShareAmount={msg.share_out_amount}
         poolId={msg.pool_id}
         assetInfos={assetInfos}
         isJoin
diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
index 6a21980d3..425a80968 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/index.tsx
@@ -1607,8 +1607,8 @@ export const generateReceipts = (
           value: details.token_in_denom,
         },
         {
-          title: "Share Amount Out",
-          value: details.share_amount_out,
+          title: "Share Out Amount",
+          value: details.share_out_amount,
         },
         {
           title: "Token In Max Amount",
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index 678caa32e..1fec9a39f 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -7,8 +7,8 @@ export enum PoolType {
   ALL = "All",
   BALANCER = "Balancer",
   STABLESWAP = "Stableswap",
-  COSMWASM = "Cosmwasm",
-  CL = "ConcentratedLiquidity",
+  COSMWASM = "CosmWasm",
+  CL = "Concentrated",
 }
 
 export type PoolTypeFilter = PoolType;
diff --git a/src/lib/utils/tx/types.ts b/src/lib/utils/tx/types.ts
index 1400c4083..9319debc2 100644
--- a/src/lib/utils/tx/types.ts
+++ b/src/lib/utils/tx/types.ts
@@ -413,7 +413,7 @@ export interface MsgJoinSwapShareAmountOutDetails extends MsgBaseDetails {
   sender: Addr;
   pool_id: string;
   token_in_denom: string;
-  share_amount_out: string;
+  share_out_amount: string;
   token_in_max_amount: string;
 }
 export interface MsgExitSwapShareAmountInDetails extends MsgBaseDetails {

From 9601bba138f3b1f47bcad89ee7eae2e7ba6bf0e2 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Fri, 7 Jul 2023 13:39:02 +0700
Subject: [PATCH 322/354] fix: type

---
 .../pools/components/pool-details/header/PoolInfo.tsx  | 10 +++++++---
 src/lib/types/pool.ts                                  |  6 +++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
index 4bd7c0a4d..85d43c1d4 100644
--- a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
@@ -6,6 +6,7 @@ import { CopyLink } from "lib/components/CopyLink";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { LabelText } from "lib/components/LabelText";
 import type { PoolDetail, Ratio } from "lib/types";
+import { PoolType } from "lib/types";
 import { formatRatio } from "lib/utils";
 
 interface PoolInfoProps {
@@ -59,7 +60,8 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
         />
       </LabelText>
       <Divider orientation="vertical" h="46px" />
-      {pool.swapFee !== null && (
+      {(pool.type === PoolType.BALANCER ||
+        pool.type === PoolType.STABLESWAP) && (
         <LabelText
           label="Swap Fee"
           tooltipText="The fee charged for making a swap in a pool, defined by the pool creator, and paid by traders in the form of a percentage the input swap asset amount"
@@ -69,7 +71,8 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
           </Text>
         </LabelText>
       )}
-      {pool.exitFee !== null && (
+      {(pool.type === PoolType.BALANCER ||
+        pool.type === PoolType.STABLESWAP) && (
         <LabelText
           label="Exit Fee"
           tooltipText="The fee charged when withdrawing from a pool, defined by the pool creator, and paid by the withdrawer in the form of LP tokens"
@@ -79,7 +82,8 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
           </Text>
         </LabelText>
       )}
-      {pool.futurePoolGovernor !== null && (
+      {(pool.type === PoolType.BALANCER ||
+        pool.type === PoolType.STABLESWAP) && (
         <LabelText label="Future Governor">
           {futurePoolGovernorType !== "invalid_address" ? (
             <ExplorerLink
diff --git a/src/lib/types/pool.ts b/src/lib/types/pool.ts
index 1fec9a39f..dd0a7b338 100644
--- a/src/lib/types/pool.ts
+++ b/src/lib/types/pool.ts
@@ -37,9 +37,9 @@ export interface PoolDetail<
   blockHeight: Option<number>;
   creator: Option<Addr>;
   poolAddress: ContractAddr;
-  swapFee: string | null;
-  exitFee: string | null;
-  futurePoolGovernor: string | null;
+  swapFee: string;
+  exitFee: string;
+  futurePoolGovernor: string;
   weight: PoolWeight<TWeight>[] | null;
   smoothWeightChangeParams: object | null;
   scalingFactors: string[] | null;

From b3611a15be8f5f29617d73111918eeab4bca7679 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 7 Jul 2023 13:43:56 +0700
Subject: [PATCH 323/354] chore: remove useMemo on pool url

---
 .../pages/pools/components/pool-details/header/index.tsx  | 8 ++------
 .../pages/pools/components/supportedSection/PoolCard.tsx  | 8 ++------
 .../components/unsupportedSection/UnsupportedPoolCard.tsx | 8 ++------
 3 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/header/index.tsx b/src/lib/pages/pools/components/pool-details/header/index.tsx
index 359370720..ba532c24b 100644
--- a/src/lib/pages/pools/components/pool-details/header/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/index.tsx
@@ -1,5 +1,4 @@
 import { Button, Flex } from "@chakra-ui/react";
-import { useMemo } from "react";
 
 import { PoolHeader } from "../../PoolHeader";
 import { useBaseApiRoute, usePoolConfig } from "lib/app-provider";
@@ -16,11 +15,8 @@ interface PoolTopSectionProps {
 
 export const PoolTopSection = ({ pool }: PoolTopSectionProps) => {
   const poolConfig = usePoolConfig({ shouldRedirect: true });
-  const poolUrl = useMemo(() => {
-    if (!poolConfig.enabled) return "";
-    return poolConfig.url;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [poolConfig.enabled]);
+  // Remark: the empty string has never been used when poolConfig is disabled
+  const poolUrl = poolConfig.enabled ? poolConfig.url : "";
 
   const lcdEndpoint = useBaseApiRoute("rest");
   const openPoolLcd = () => {
diff --git a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
index 1d31b13e5..cd951e334 100644
--- a/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
+++ b/src/lib/pages/pools/components/supportedSection/PoolCard.tsx
@@ -2,7 +2,6 @@ import { Flex, IconButton, SimpleGrid, Text } from "@chakra-ui/react";
 import type { Big } from "big.js";
 import big from "big.js";
 import Link from "next/link";
-import { useMemo } from "react";
 
 import { PoolHeader } from "../PoolHeader";
 import { useInternalNavigate, usePoolConfig } from "lib/app-provider";
@@ -25,11 +24,8 @@ interface PoolCardProps {
 
 export const PoolCard = ({ item, mode = "percent-value" }: PoolCardProps) => {
   const poolConfig = usePoolConfig({ shouldRedirect: true });
-  const poolUrl = useMemo(() => {
-    if (!poolConfig.enabled) return "";
-    return poolConfig.url;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [poolConfig.enabled]);
+  // Remark: the empty string has never been used when poolConfig is disabled
+  const poolUrl = poolConfig.enabled ? poolConfig.url : "";
 
   const navigate = useInternalNavigate();
   const handleOnClick = () => {
diff --git a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
index 57f2f3e73..c20ec4d71 100644
--- a/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
+++ b/src/lib/pages/pools/components/unsupportedSection/UnsupportedPoolCard.tsx
@@ -10,7 +10,6 @@ import {
   Button,
 } from "@chakra-ui/react";
 import Link from "next/link";
-import { useMemo } from "react";
 
 import { getUndefinedTokenIcon } from "../../utils";
 import { PoolHeader } from "../PoolHeader";
@@ -39,11 +38,8 @@ const hoverBgColor = "gray.700";
 
 export const UnsupportedPoolCard = ({ item }: UnsupportedPoolCardProps) => {
   const poolConfig = usePoolConfig({ shouldRedirect: true });
-  const poolUrl = useMemo(() => {
-    if (!poolConfig.enabled) return "";
-    return poolConfig.url;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [poolConfig.enabled]);
+  // Remark: the empty string has never been used when poolConfig is disabled
+  const poolUrl = poolConfig.enabled ? poolConfig.url : "";
 
   const navigate = useInternalNavigate();
   const handleOnClick = () => {

From 90483f58a27e20667e4a234c3175efcabc59d48f Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 7 Jul 2023 13:49:51 +0700
Subject: [PATCH 324/354] fix: change TokenWithValue.price to USD<Big>

---
 src/lib/components/action-msg/SingleMsg.tsx | 1 +
 src/lib/types/asset.ts                      | 2 +-
 src/lib/utils/assetValue.ts                 | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/action-msg/SingleMsg.tsx b/src/lib/components/action-msg/SingleMsg.tsx
index 58552bf44..41f6643e9 100644
--- a/src/lib/components/action-msg/SingleMsg.tsx
+++ b/src/lib/components/action-msg/SingleMsg.tsx
@@ -58,6 +58,7 @@ export const SingleMsg = ({
           }
           symbol={token.symbol}
           precision={token.precision}
+          // TODO: add `ampCopierSection` later
         />
       ))}
       {/* Tags  */}
diff --git a/src/lib/types/asset.ts b/src/lib/types/asset.ts
index 080ba86db..d1affa365 100644
--- a/src/lib/types/asset.ts
+++ b/src/lib/types/asset.ts
@@ -8,6 +8,6 @@ export interface TokenWithValue {
   symbol: Option<string>;
   logo: Option<string>;
   precision: Option<number>;
-  price?: Option<USD>;
+  price?: Option<USD<Big>>;
   value: Option<USD<Big>>;
 }
diff --git a/src/lib/utils/assetValue.ts b/src/lib/utils/assetValue.ts
index 93b84aab4..fcb1d8ede 100644
--- a/src/lib/utils/assetValue.ts
+++ b/src/lib/utils/assetValue.ts
@@ -48,7 +48,7 @@ export const coinToTokenWithValue = (
     symbol: assetInfo?.symbol,
     logo: assetInfo?.logo,
     precision: assetInfo?.precision,
-    price: assetInfo ? (big(assetInfo.price).toFixed() as USD) : undefined,
+    price: assetInfo ? (big(assetInfo.price) as USD<Big>) : undefined,
     value: assetInfo
       ? calculateAssetValue(
           toToken(tokenAmount, assetInfo.precision),

From 584dfa0fc78f9cd7f542dce862b723eae50485b6 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Fri, 7 Jul 2023 14:19:04 +0700
Subject: [PATCH 325/354] fix: handle weird cases of pool id

---
 src/lib/pages/pools/data.ts     |  5 ++++-
 src/lib/pages/pools/poolId.tsx  |  2 +-
 src/lib/services/poolService.ts | 14 +++-----------
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/lib/pages/pools/data.ts b/src/lib/pages/pools/data.ts
index e7df12fad..64bb25105 100644
--- a/src/lib/pages/pools/data.ts
+++ b/src/lib/pages/pools/data.ts
@@ -54,11 +54,14 @@ export const usePools = (
 };
 
 export const usePool = (
-  poolId: Option<number>
+  poolId: number
 ): { pool: Option<PoolDetail>; isLoading: boolean } => {
   const { assetInfos, isLoading: isLoadingAssetInfos } = useAssetInfos();
   const { data: pool, isLoading: isLoadingPoolInfo } = usePoolByPoolId(poolId);
 
+  if (!Number.isInteger(poolId) || poolId <= 0)
+    return { pool: undefined, isLoading: false };
+
   if (!assetInfos || !pool)
     return {
       pool: undefined,
diff --git a/src/lib/pages/pools/poolId.tsx b/src/lib/pages/pools/poolId.tsx
index e98580cf4..a11d70cda 100644
--- a/src/lib/pages/pools/poolId.tsx
+++ b/src/lib/pages/pools/poolId.tsx
@@ -26,7 +26,7 @@ export const PoolId = () => {
   }, [router.isReady]);
 
   if (isLoading) return <Loading />;
-  if (!pool) return navigate({ pathname: `/pool` });
+  if (!pool) return navigate({ pathname: `/pools` });
   return (
     <PageContainer>
       <BackButton />
diff --git a/src/lib/services/poolService.ts b/src/lib/services/poolService.ts
index f2a2bcd8a..ec8431463 100644
--- a/src/lib/services/poolService.ts
+++ b/src/lib/services/poolService.ts
@@ -13,13 +13,7 @@ import {
   getPoolListCount,
   getPoolsByPoolIds,
 } from "lib/query";
-import type {
-  ContractAddr,
-  Option,
-  Pool,
-  PoolDetail,
-  PoolTypeFilter,
-} from "lib/types";
+import type { ContractAddr, Pool, PoolDetail, PoolTypeFilter } from "lib/types";
 import { isPositiveInt } from "lib/utils";
 
 import { usePoolExpression } from "./expression/poolExpression";
@@ -141,7 +135,7 @@ export const usePoolListCountQuery = ({
 };
 
 export const usePoolByPoolId = (
-  poolId: Option<number>
+  poolId: number
 ): UseQueryResult<PoolDetail<string, Coin>> => {
   const { indexerGraphClient } = useCelatoneApp();
 
@@ -178,9 +172,7 @@ export const usePoolByPoolId = (
       );
   }, [poolId, indexerGraphClient]);
 
-  return useQuery(["pool_by_pool_id", poolId, indexerGraphClient], queryFn, {
-    enabled: !!poolId,
-  });
+  return useQuery(["pool_by_pool_id", poolId, indexerGraphClient], queryFn);
 };
 
 export const usePoolAssetsbyPoolIds = (

From ad0d77f1e54e7913174974ebca5d68d7feeb00c1 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Fri, 7 Jul 2023 16:20:15 +0700
Subject: [PATCH 326/354] fix: add new cl msg

---
 .../pool-details/tables/pool-txs/messages/utils.ts     | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts
index bf046fda9..92927594c 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts
@@ -69,6 +69,16 @@ export const extractPoolMsgs = (msgs: Message[], poolId: number) => {
       case "/osmosis.superfluid.MsgSuperfluidUnbondLock":
       case "/osmosis.superfluid.MsgUnPoolWhitelistedPool":
       case "/osmosis.superfluid.MsgSuperfluidUndelegateAndUnbondLock":
+      case "/osmosis.superfluid.MsgLockExistingFullRangePositionAndSFStake":
+      case "/osmosis.superfluid.MsgAddToConcentratedLiquiditySuperfluidPosition":
+      case "/osmosis.superfluid.MsgUnlockAndMigrateSharesToFullRangeConcentratedPosition":
+      case "/osmosis.superfluid.MsgCreateFullRangePositionAndSuperfluidDelegate":
+      case "/osmosis.concentratedliquidity.v1beta1.MsgCreatePosition":
+      case "/osmosis.concentratedliquidity.v1beta1.MsgAddToPosition":
+      case "/osmosis.concentratedliquidity.v1beta1.MsgWithdrawPosition":
+      case "/osmosis.concentratedliquidity.v1beta1.MsgCollectSpreadRewards":
+      case "/osmosis.concentratedliquidity.v1beta1.MsgFungifyChargedPositions":
+      case "/osmosis.concentratedliquidity.v1beta1.MsgCollectIncentives":
       case "/cosmos.authz.v1beta1.MsgExec":
       case "/ibc.core.channel.v1.MsgRecvPacket":
       case "/cosmwasm.wasm.v1.MsgInstantiateContract1":

From 377f9f1e515506febc79a2eeadcfa17107377075 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Fri, 7 Jul 2023 23:04:43 +0700
Subject: [PATCH 327/354] fix: handle more v16 msg in pool

---
 .../components/pool-details/tables/pool-txs/messages/utils.ts  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts
index 92927594c..6b9bea8fc 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/utils.ts
@@ -60,10 +60,13 @@ export const extractPoolMsgs = (msgs: Message[], poolId: number) => {
         break;
       }
 
+      case "/osmosis.poolmanager.v1beta1.MsgSplitRouteSwapExactAmountIn":
+      case "/osmosis.poolmanager.v1beta1.MsgSplitRouteSwapExactAmountOut":
       case "/osmosis.lockup.MsgBeginUnlockingAll":
       case "/osmosis.lockup.MsgBeginUnlocking":
       case "/osmosis.lockup.MsgForceUnlock":
       case "/osmosis.lockup.MsgExtendLockup":
+      case "/osmosis.lockup.MsgSetRewardReceiverAddress":
       case "/osmosis.superfluid.MsgSuperfluidDelegate":
       case "/osmosis.superfluid.MsgSuperfluidUndelegate":
       case "/osmosis.superfluid.MsgSuperfluidUnbondLock":

From 8de986ad64d40c1f1e5d2f5659871b44e602587b Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Fri, 7 Jul 2023 23:18:26 +0700
Subject: [PATCH 328/354] fix: change spread factor to percent

---
 .../pages/pools/components/pool-details/header/PoolInfo.tsx   | 4 ++--
 src/lib/utils/formatter/percentage.ts                         | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
index 85d43c1d4..68feac3f5 100644
--- a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
@@ -7,7 +7,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { LabelText } from "lib/components/LabelText";
 import type { PoolDetail, Ratio } from "lib/types";
 import { PoolType } from "lib/types";
-import { formatRatio } from "lib/utils";
+import { formatRatio, toPercent } from "lib/utils";
 
 interface PoolInfoProps {
   pool: PoolDetail;
@@ -120,7 +120,7 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
           label="Spread Factor"
           tooltipText="Swap fee to be paid by swapper."
         >
-          <Text variant="body2">{pool.spreadFactor}</Text>
+          <Text variant="body2">{toPercent(pool.spreadFactor)}%</Text>
         </LabelText>
       )}
       {pool.smoothWeightChangeParams !== null && (
diff --git a/src/lib/utils/formatter/percentage.ts b/src/lib/utils/formatter/percentage.ts
index 0b1e99fde..4177dc8e0 100644
--- a/src/lib/utils/formatter/percentage.ts
+++ b/src/lib/utils/formatter/percentage.ts
@@ -5,6 +5,9 @@ import type { Percent, Ratio } from "lib/types";
 
 import { d2Formatter, d6Formatter } from "./token";
 
+export const toPercent = (value: BigSource): string =>
+  big(value).times(100).toFixed();
+
 export const formatPercent = (value: Percent<BigSource>): string => {
   const x = big(value);
   const lowestThreshold = 0.000001;

From 66c841b3ed04a780f80ae4b682a8034058dd966d Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Sun, 9 Jul 2023 09:42:34 +0700
Subject: [PATCH 329/354] fix: remove toPercent util

---
 .../pages/pools/components/pool-details/header/PoolInfo.tsx | 6 ++++--
 src/lib/utils/formatter/percentage.ts                       | 3 ---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
index 68feac3f5..a7df11ef4 100644
--- a/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/PoolInfo.tsx
@@ -7,7 +7,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { LabelText } from "lib/components/LabelText";
 import type { PoolDetail, Ratio } from "lib/types";
 import { PoolType } from "lib/types";
-import { formatRatio, toPercent } from "lib/utils";
+import { formatRatio } from "lib/utils";
 
 interface PoolInfoProps {
   pool: PoolDetail;
@@ -120,7 +120,9 @@ export const PoolInfo = ({ pool }: PoolInfoProps) => {
           label="Spread Factor"
           tooltipText="Swap fee to be paid by swapper."
         >
-          <Text variant="body2">{toPercent(pool.spreadFactor)}%</Text>
+          <Text variant="body2">
+            {formatRatio(Number(pool.spreadFactor) as Ratio<number>)}
+          </Text>
         </LabelText>
       )}
       {pool.smoothWeightChangeParams !== null && (
diff --git a/src/lib/utils/formatter/percentage.ts b/src/lib/utils/formatter/percentage.ts
index 4177dc8e0..0b1e99fde 100644
--- a/src/lib/utils/formatter/percentage.ts
+++ b/src/lib/utils/formatter/percentage.ts
@@ -5,9 +5,6 @@ import type { Percent, Ratio } from "lib/types";
 
 import { d2Formatter, d6Formatter } from "./token";
 
-export const toPercent = (value: BigSource): string =>
-  big(value).times(100).toFixed();
-
 export const formatPercent = (value: Percent<BigSource>): string => {
   const x = big(value);
   const lowestThreshold = 0.000001;

From 494b405bce3726dec7442db235be14208cfe4756 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Sun, 9 Jul 2023 11:10:22 +0700
Subject: [PATCH 330/354] fix: proper pool asset name

---
 .../tables/pool-txs/messages/components/PoolAssetCard.tsx    | 5 ++++-
 .../tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx  | 1 +
 .../tables/pool-txs/messages/lp/components/PoolLPCard.tsx    | 1 +
 .../superfluid/MsgLockAndSuperfluidDelegateDetail.tsx        | 1 +
 4 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
index 2bbbc7c42..5520833ba 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolAssetCard.tsx
@@ -5,6 +5,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
 import { PoolLogo } from "lib/pages/pools/components/PoolLogo";
+import type { AssetInfosOpt } from "lib/services/assetService";
 import { usePoolAssetsbyPoolIds } from "lib/services/poolService";
 import type { AssetInfo, Option, TokenWithValue } from "lib/types";
 import {
@@ -19,6 +20,7 @@ interface PoolAssetCardProps {
   assetText: string;
   poolAsset: Coin;
   poolAssetInfo: Option<AssetInfo>;
+  assetInfos: AssetInfosOpt;
   isOpened: boolean;
   ampCopierSection?: string;
 }
@@ -29,6 +31,7 @@ export const PoolAssetCard = ({
   assetText,
   poolAsset,
   poolAssetInfo,
+  assetInfos,
   isOpened,
   ampCopierSection,
 }: PoolAssetCardProps) => {
@@ -44,7 +47,7 @@ export const PoolAssetCard = ({
     );
 
   const tokens = poolAssets[poolId].map<TokenWithValue>((denom) =>
-    coinToTokenWithValue(denom, "0", poolAssetInfo)
+    coinToTokenWithValue(denom, "0", assetInfos?.[denom])
   );
   return (
     <>
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
index 609c74c75..50cd0e1ba 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensDetail.tsx
@@ -83,6 +83,7 @@ export const MsgLockTokensDetail = ({
           assetText="Bonded"
           poolAsset={poolAsset}
           poolAssetInfo={poolAssetInfo}
+          assetInfos={assetInfos}
           isOpened={isOpened}
           ampCopierSection={ampCopierSection}
         />
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
index a837154ff..271dccd76 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lp/components/PoolLPCard.tsx
@@ -61,6 +61,7 @@ export const PoolLPCard = ({
         assetText={isJoin ? "Received" : "Burn"}
         poolAsset={{ amount: shareAmount, denom: poolDenom }}
         poolAssetInfo={assetInfos?.[poolDenom]}
+        assetInfos={assetInfos}
         isOpened={isOpened}
         ampCopierSection={ampCopierSection}
       />
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
index 6fed0b391..499ee29e3 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/superfluid/MsgLockAndSuperfluidDelegateDetail.tsx
@@ -93,6 +93,7 @@ export const MsgLockAndSuperfluidDelegateDetail = ({
           assetText="Bonded"
           poolAsset={poolAsset}
           poolAssetInfo={poolAssetInfo}
+          assetInfos={assetInfos}
           isOpened={isOpened}
           ampCopierSection={ampCopierSection}
         />

From 681c7a58d2c42724ad6d897931a48cc73ef32d01 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 10 Jul 2023 08:55:55 +0700
Subject: [PATCH 331/354] feat: responsive support, theme

---
 CHANGELOG.md                                  |   1 +
 public/celatone-logo.svg                      |  28 --
 src/config/index.ts                           | 100 ++++++-
 src/config/theme/default.ts                   |  23 +-
 src/config/theme/index.ts                     |   1 +
 src/config/theme/osmosis.ts                   |  26 +-
 src/config/theme/sei.ts                       | 151 ++++++++++
 src/config/theme/types.ts                     |  37 ++-
 src/config/types.ts                           |   1 +
 src/env.ts                                    |   3 +-
 src/lib/app-provider/hooks/useMediaQuery.ts   |   2 +-
 src/lib/chain-registry/sei.ts                 | 115 ++++++++
 src/lib/components/AppLink.tsx                |   7 +-
 src/lib/components/Breadcrumb.tsx             |   6 +-
 src/lib/components/ContractSelectSection.tsx  |  14 +-
 src/lib/components/CopyLink.tsx               |   3 +
 src/lib/components/CustomTab.tsx              |   3 +
 src/lib/components/ExplorerLink.tsx           |  20 +-
 src/lib/components/ListSelection.tsx          |   2 +-
 src/lib/components/MobileGuard.tsx            |  22 +-
 src/lib/components/PageContainer.tsx          |   7 +-
 src/lib/components/PermissionChip.tsx         |   6 +-
 src/lib/components/PublicDescription.tsx      |   2 +-
 src/lib/components/TxFilterSelection.tsx      |   8 +-
 src/lib/components/TxRelationSelection.tsx    |   3 +
 src/lib/components/ValidatorBadge.tsx         |  29 +-
 src/lib/components/action-msg/MsgToken.tsx    |   4 +-
 .../action-msg/MultipleActionsMsg.tsx         |   6 +-
 src/lib/components/action-msg/SingleMsg.tsx   |  13 +-
 src/lib/components/button/AdminButton.tsx     |   1 +
 .../components/button/InstantiateButton.tsx   |   1 +
 src/lib/components/card/AccountCard.tsx       |  53 ++++
 src/lib/components/card/BlockCard.tsx         |  75 +++++
 src/lib/components/card/ContractCard.tsx      |  87 ++++++
 src/lib/components/card/DefaultMobileCard.tsx |  43 +++
 src/lib/components/card/MigrationCard.tsx     |  99 +++++++
 src/lib/components/card/ProposalCard.tsx      |  77 +++++
 .../components/card/PublicContractCard.tsx    |  77 +++++
 src/lib/components/card/StoredCodeCard.tsx    |  80 ++++++
 src/lib/components/card/TransactionCard.tsx   |  82 ++++++
 src/lib/components/copy/Copier.tsx            |   5 +-
 src/lib/components/copy/CopyTemplate.tsx      |   1 +
 .../components/forms/FilterByPermission.tsx   |   2 +-
 src/lib/components/forms/SelectInput.tsx      |   4 +-
 src/lib/components/icon/CustomIcon.tsx        |  63 ++++-
 src/lib/components/json/JsonInput.tsx         |   1 +
 src/lib/components/json/JsonReadOnly.tsx      |   1 +
 src/lib/components/links/GitHubLink.tsx       |   2 +-
 src/lib/components/modal/ActionModal.tsx      |   2 +-
 .../modal/UnsupportedTokensModal.tsx          |   1 -
 .../components/modal/code/SaveOrEditCode.tsx  |   7 +-
 .../modal/contract/AddToOtherList.tsx         |   1 +
 .../components/modal/list/CreateNewList.tsx   |   2 +-
 .../select-code/CodeSelectDrawerButton.tsx    |   2 +-
 .../select-contract/ContractListCard.tsx      |   5 +-
 .../select-contract/SelectContractAdmin.tsx   |   2 +-
 .../SelectContractInstantiator.tsx            |  45 +--
 src/lib/components/state/EmptyState.tsx       |   5 +-
 src/lib/components/stepper/StepperItem.tsx    |   2 +-
 src/lib/components/table/EditableCell.tsx     |   1 +
 .../table/contracts/ContractsTableRow.tsx     |  13 +-
 .../table/contracts/ContractsTableRowCTA.tsx  | 109 ++++----
 .../components/table/contracts/TagsCell.tsx   |  16 +-
 .../components/table/proposals/Proposer.tsx   |   6 +-
 .../table/proposals/ResolvedHeight.tsx        |  15 +-
 .../table/proposals/VotingEndTime.tsx         |   8 +-
 .../table/transactions/RelationChip.tsx       |  14 +-
 .../transactions/TransactionsTableRow.tsx     |   2 +-
 src/lib/components/tx/TxReceiptRender.tsx     |   6 +-
 src/lib/config/terra2testnet.ts               |  89 ------
 src/lib/gql/gql.ts                            |   5 +
 src/lib/gql/graphql.ts                        |  94 +++++++
 src/lib/layout/Footer.tsx                     |  55 ++--
 src/lib/layout/Header.tsx                     |   4 +-
 src/lib/layout/Searchbar.tsx                  | 102 ++++++-
 src/lib/layout/SubHeader.tsx                  |   1 +
 src/lib/layout/index.tsx                      |  98 +++++--
 src/lib/layout/mobile/MobileHeader.tsx        |  41 +++
 src/lib/layout/mobile/NavDrawer.tsx           | 264 ++++++++++++++++++
 src/lib/layout/navbar/Collapse.tsx            |   2 +-
 src/lib/layout/navbar/Expand.tsx              |   2 +-
 src/lib/layout/navbar/index.tsx               |  30 +-
 .../account-details/components/AccountTop.tsx |  91 ++++++
 .../components/TotalAccountValue.tsx          |  43 +++
 .../components/asset/index.tsx                | 177 ++++++++----
 .../components/delegations/DelegationInfo.tsx | 107 +++++++
 .../delegations/DelegationsBody.tsx           |   8 +-
 .../components/delegations/DelegationsTab.tsx |  92 ++++++
 .../delegations/NonRedelegatableSection.tsx   |  15 +-
 .../delegations/NonRedelegatablesMobile.tsx   |  44 +++
 .../delegations/RedelegationsMobile.tsx       |  79 ++++++
 .../delegations/RedelegationsSection.tsx      |  62 ++--
 .../components/delegations/index.tsx          | 101 +++----
 .../mobile/MobileDelegationTitle.tsx          |  30 ++
 .../components/mobile/MobileLabel.tsx         |  19 ++
 .../components/mobile/MobileTitle.tsx         |  26 ++
 .../components/tables/AdminContractsTable.tsx |  88 ++++--
 .../components/tables/ContractsBody.tsx       |  53 ++++
 .../tables/InstantiatedContractsTable.tsx     |  88 ++++--
 .../tables/bonded/DelegationsTable.tsx        |   8 +-
 .../tables/codes/StoredCodesBody.tsx          |  48 ++++
 .../tables/{ => codes}/StoredCodesTable.tsx   |  90 ++++--
 .../components/tables/codes/index.ts          |   2 +
 .../components/tables/index.ts                |  13 +-
 .../tables/proposals/OpenProposalsBody.tsx    |  41 +++
 .../{ => proposals}/OpenedProposalsTable.tsx  |  80 ++++--
 .../components/tables/proposals/index.ts      |   1 +
 .../components/tables/txs/TxsAlert.tsx        |  18 ++
 .../components/tables/txs/TxsBody.tsx         |  44 +++
 .../components/tables/{ => txs}/TxsTable.tsx  | 121 ++++----
 .../components/tables/txs/TxsTop.tsx          |  36 +++
 .../components/tables/txs/index.ts            |   2 +
 src/lib/pages/account-details/index.tsx       | 135 ++-------
 .../components/BlockDetailsTop.tsx            | 113 ++++----
 .../block-details/components/BlockInfo.tsx    |  28 +-
 .../components/BlockTxsTable.tsx              |  52 +++-
 src/lib/pages/block-details/index.tsx         |   1 -
 .../pages/blocks/components/BlocksTable.tsx   |  31 +-
 src/lib/pages/blocks/index.tsx                |   4 +-
 .../code-details/components/CTASection.tsx    |   6 +-
 .../components/CodeInfoSection.tsx            |  16 +-
 .../components/table/CodeContractsTable.tsx   |  36 ++-
 .../components/table/NoContracts.tsx          |  45 +--
 src/lib/pages/code-details/index.tsx          | 104 ++++---
 src/lib/pages/codes/index.tsx                 |  67 +++--
 .../components/CommandSection.tsx             |   6 +-
 .../components/ContractTop.tsx                | 254 +++++++++--------
 .../components/InstantiateInfo.tsx            | 134 +++++----
 .../components/TokenSection.tsx               |   9 +-
 .../contract-description/UserContractDesc.tsx |   2 +-
 .../components/contract-description/index.tsx |  35 ++-
 .../tables/RelatedProposalsTable.tsx          |  36 ++-
 .../components/tables/TxsTable.tsx            |  42 ++-
 .../tables/migration/MigrationRow.tsx         |   4 +-
 .../components/tables/migration/index.tsx     |  57 ++--
 src/lib/pages/contract-details/index.tsx      |  29 +-
 src/lib/pages/contract-list/slug.tsx          |   2 +-
 src/lib/pages/contracts/index.tsx             |  65 +++--
 .../pages/dev-home/components/QuickMenu.tsx   | 171 ++++++++++++
 .../components/RecentActivities.tsx           |  15 +-
 src/lib/pages/dev-home/index.tsx              |  30 ++
 .../pages/execute/components/ExecuteArea.tsx  |   4 +-
 src/lib/pages/home/components/QuickMenu.tsx   | 114 --------
 src/lib/pages/home/index.tsx                  |  30 +-
 src/lib/pages/network-overview/index.tsx      | 100 +++++--
 src/lib/pages/proposals/index.tsx             |   1 -
 .../public-project/components/AllProject.tsx  |  12 +-
 .../components/BookmarkButton.tsx             |   3 +-
 .../components/DetailHeader.tsx               |   8 +-
 .../components/PublicProjectCard.tsx          |   2 +-
 .../table/account/PublicProjectAccountRow.tsx |   2 +-
 .../account/PublicProjectAccountTable.tsx     |  62 ++--
 .../table/code/PublicProjectCodeTable.tsx     |  67 +++--
 .../contract/PublicProjectContractTable.tsx   |  69 +++--
 src/lib/pages/public-project/slug.tsx         |   8 +-
 src/lib/pages/query/components/QueryArea.tsx  |  12 +-
 src/lib/pages/query/index.tsx                 |  29 +-
 .../tx-details/components/MessageSection.tsx  |   8 +-
 .../pages/tx-details/components/TxHeader.tsx  | 190 ++++++++-----
 .../tx-details/components/TxInfoMobile.tsx    |  77 +++++
 src/lib/pages/tx-details/components/index.ts  |   1 +
 .../components/tx-message/TxMsgExpand.tsx     | 118 ++++----
 .../tx-message/msg-receipts/CoinComponent.tsx |   7 +-
 src/lib/pages/tx-details/index.tsx            |  12 +-
 src/lib/pages/txs/components/TxsTable.tsx     |  39 ++-
 src/lib/pages/txs/index.tsx                   |   4 +-
 src/lib/query/block.ts                        |  13 +
 src/lib/services/blockService.ts              |  20 ++
 src/lib/styles/globals.css                    |   3 +-
 src/lib/styles/theme/components/button.ts     | 127 ++++++---
 src/lib/styles/theme/components/tag.ts        |   7 +
 src/lib/types/block.ts                        |   5 +
 src/pages/[network]/dev-home.tsx              |   3 +
 src/pages/_app.tsx                            |   5 +-
 src/pages/dev-home.tsx                        |   3 +
 175 files changed, 5131 insertions(+), 1638 deletions(-)
 delete mode 100644 public/celatone-logo.svg
 create mode 100644 src/config/theme/sei.ts
 create mode 100644 src/lib/chain-registry/sei.ts
 create mode 100644 src/lib/components/card/AccountCard.tsx
 create mode 100644 src/lib/components/card/BlockCard.tsx
 create mode 100644 src/lib/components/card/ContractCard.tsx
 create mode 100644 src/lib/components/card/DefaultMobileCard.tsx
 create mode 100644 src/lib/components/card/MigrationCard.tsx
 create mode 100644 src/lib/components/card/ProposalCard.tsx
 create mode 100644 src/lib/components/card/PublicContractCard.tsx
 create mode 100644 src/lib/components/card/StoredCodeCard.tsx
 create mode 100644 src/lib/components/card/TransactionCard.tsx
 delete mode 100644 src/lib/config/terra2testnet.ts
 create mode 100644 src/lib/layout/mobile/MobileHeader.tsx
 create mode 100644 src/lib/layout/mobile/NavDrawer.tsx
 create mode 100644 src/lib/pages/account-details/components/AccountTop.tsx
 create mode 100644 src/lib/pages/account-details/components/TotalAccountValue.tsx
 create mode 100644 src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
 create mode 100644 src/lib/pages/account-details/components/delegations/DelegationsTab.tsx
 create mode 100644 src/lib/pages/account-details/components/delegations/NonRedelegatablesMobile.tsx
 create mode 100644 src/lib/pages/account-details/components/delegations/RedelegationsMobile.tsx
 create mode 100644 src/lib/pages/account-details/components/mobile/MobileDelegationTitle.tsx
 create mode 100644 src/lib/pages/account-details/components/mobile/MobileLabel.tsx
 create mode 100644 src/lib/pages/account-details/components/mobile/MobileTitle.tsx
 create mode 100644 src/lib/pages/account-details/components/tables/ContractsBody.tsx
 create mode 100644 src/lib/pages/account-details/components/tables/codes/StoredCodesBody.tsx
 rename src/lib/pages/account-details/components/tables/{ => codes}/StoredCodesTable.tsx (57%)
 create mode 100644 src/lib/pages/account-details/components/tables/codes/index.ts
 create mode 100644 src/lib/pages/account-details/components/tables/proposals/OpenProposalsBody.tsx
 rename src/lib/pages/account-details/components/tables/{ => proposals}/OpenedProposalsTable.tsx (54%)
 create mode 100644 src/lib/pages/account-details/components/tables/proposals/index.ts
 create mode 100644 src/lib/pages/account-details/components/tables/txs/TxsAlert.tsx
 create mode 100644 src/lib/pages/account-details/components/tables/txs/TxsBody.tsx
 rename src/lib/pages/account-details/components/tables/{ => txs}/TxsTable.tsx (64%)
 create mode 100644 src/lib/pages/account-details/components/tables/txs/TxsTop.tsx
 create mode 100644 src/lib/pages/account-details/components/tables/txs/index.ts
 create mode 100644 src/lib/pages/dev-home/components/QuickMenu.tsx
 rename src/lib/pages/{home => dev-home}/components/RecentActivities.tsx (91%)
 create mode 100644 src/lib/pages/dev-home/index.tsx
 delete mode 100644 src/lib/pages/home/components/QuickMenu.tsx
 create mode 100644 src/lib/pages/tx-details/components/TxInfoMobile.tsx
 create mode 100644 src/pages/[network]/dev-home.tsx
 create mode 100644 src/pages/dev-home.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a37f174d1..6adbd11e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -68,6 +68,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#417](https://github.com/alleslabs/celatone-frontend/pull/417) Config responsive design for tx detail and account detail page
 - [#283](https://github.com/alleslabs/celatone-frontend/pull/283) Change unsupported token icon render logic
 - [#420](https://github.com/alleslabs/celatone-frontend/pull/420) Unify create proposal page layout
 - [#416](https://github.com/alleslabs/celatone-frontend/pull/416) Remove the old redundant useSimulateFee hook
diff --git a/public/celatone-logo.svg b/public/celatone-logo.svg
deleted file mode 100644
index dd5dd1627..000000000
--- a/public/celatone-logo.svg
+++ /dev/null
@@ -1,28 +0,0 @@
-<svg width="322" height="49" viewBox="0 0 322 49" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M61.3369 29.6012C61.3369 20.3894 68.3434 13.4531 77.6569 13.4531C85.1685 13.4531 91.0909 17.9776 92.9637 24.8783C93.1261 25.4768 92.6683 26.0635 92.0509 26.0635H85.5998C85.2571 26.0635 84.9351 25.8768 84.7756 25.5716C83.3608 22.8487 80.7259 21.2664 77.6067 21.2664C73.1139 21.2664 69.7347 24.8842 69.7347 29.6457C69.7347 34.4071 73.17 38.1168 77.6067 38.1168C80.7761 38.1168 83.3194 36.4427 84.7668 33.4738C84.9204 33.1568 85.2512 32.9612 85.6027 32.9612H92.1632C92.7776 32.9612 93.2325 33.5449 93.0789 34.1405C91.2416 41.216 85.2069 45.9301 77.6067 45.9301C68.3877 45.9301 61.334 38.8101 61.334 29.5983L61.3369 29.6012Z" fill="white"/>
-<path d="M129.134 29.5855C129.134 30.1099 129.111 30.6314 129.066 31.1558C129.025 31.6447 128.614 32.021 128.127 32.021H106.969C106.339 32.021 105.884 32.6314 106.065 33.2388C107.075 36.661 109.662 38.5277 113.272 38.5277C115.972 38.5277 118.217 37.3277 119.525 35.3632C119.697 35.1055 119.998 34.9603 120.308 34.9603H127.117C127.784 34.9603 128.251 35.6447 127.991 36.261C125.468 42.2077 119.915 45.9291 113.275 45.9291C104.227 45.9291 97.3804 38.901 97.3804 29.6892C97.3804 20.4773 104.18 13.4492 113.275 13.4492C122.37 13.4492 129.14 20.7262 129.14 29.5795L129.134 29.5855ZM107.317 26.347H119.475C120.163 26.347 120.624 25.627 120.332 25.0018C118.979 22.107 116.515 20.5514 113.269 20.5514C110.023 20.5514 107.645 22.1959 106.446 25.0344C106.183 25.6566 106.644 26.347 107.317 26.347Z" fill="white"/>
-<path d="M136.536 3.43457H142.937C143.457 3.43457 143.879 3.85827 143.879 4.37975V45.1174C143.879 45.6389 143.457 46.0626 142.937 46.0626H136.536C136.016 46.0626 135.594 45.6389 135.594 45.1174V4.37975C135.594 3.85827 136.016 3.43457 136.536 3.43457Z" fill="white"/>
-<path d="M183.593 15.3509V45.1552C183.593 45.6767 183.171 46.1004 182.651 46.1004H177.875C177.423 46.1004 177.036 45.7804 176.95 45.336L176.386 42.3967C173.754 44.7078 170.322 46.0619 166.455 46.0619C157.236 46.0619 150.38 39.0812 150.38 29.7775C150.38 20.4738 157.236 13.585 166.455 13.585C170.39 13.585 173.875 14.9746 176.522 17.3449L177.204 15.0783C177.325 14.6783 177.692 14.4057 178.105 14.4087H182.648C183.168 14.4087 183.59 14.8324 183.59 15.3538L183.593 15.3509ZM175.473 29.7775C175.473 24.9479 171.943 21.3538 167.132 21.3538C162.32 21.3538 158.778 24.9597 158.778 29.7775C158.778 34.5953 162.317 38.2012 167.132 38.2012C171.946 38.2012 175.473 34.6042 175.473 29.7775Z" fill="white"/>
-<path d="M210.866 39.6069V45.118C210.866 45.6395 210.444 46.0632 209.924 46.0632H204.979C198.235 46.0632 194.094 41.9091 194.094 35.0854V22.9492C194.094 22.4277 193.672 22.004 193.152 22.004H189.492C188.972 22.004 188.55 21.5803 188.55 21.0588V16.2677C188.55 15.7462 188.972 15.3225 189.492 15.3225H193.152C193.672 15.3225 194.094 14.8988 194.094 14.3773V8.24401C194.094 7.72253 194.517 7.29883 195.036 7.29883H201.299C201.818 7.29883 202.241 7.72253 202.241 8.24401V14.3773C202.241 14.8988 202.663 15.3225 203.183 15.3225H209.755C210.275 15.3225 210.698 15.7462 210.698 16.2677V21.0588C210.698 21.5803 210.275 22.004 209.755 22.004H203.322C202.802 22.004 202.38 22.4277 202.38 22.9492V33.9862C202.38 36.958 204.081 38.6647 207.1 38.6647H209.924C210.444 38.6647 210.866 39.0884 210.866 39.6098V39.6069Z" fill="white"/>
-<path d="M214.792 29.823C214.792 20.4985 221.866 13.583 231.357 13.583C240.848 13.583 247.922 20.5074 247.922 29.823C247.922 39.1385 240.803 46.0629 231.357 46.0629C221.911 46.0629 214.792 39.094 214.792 29.823ZM239.524 29.823C239.524 24.8452 236.133 21.3963 231.357 21.3963C226.581 21.3963 223.19 24.8422 223.19 29.823C223.19 34.8037 226.581 38.2466 231.357 38.2466C236.133 38.2466 239.524 34.8007 239.524 29.823Z" fill="white"/>
-<path d="M283.224 27.4323V45.1181C283.224 45.6396 282.801 46.0633 282.281 46.0633H275.877C275.358 46.0633 274.935 45.6396 274.935 45.1181V28.7774C274.935 24.1315 273.178 21.8886 269.592 21.8886C265.32 21.8886 262.715 24.9582 262.715 29.9034V45.1152C262.715 45.6367 262.293 46.0604 261.773 46.0604H255.372C254.852 46.0604 254.43 45.6367 254.43 45.1152V16.2649C254.43 15.7434 254.852 15.3197 255.372 15.3197H259.493C259.871 15.3197 260.21 15.5449 260.358 15.8945L261.729 19.1212C264.047 16.3508 267.71 14.5908 271.881 14.5908C278.867 14.5908 283.221 19.6456 283.221 27.4293L283.224 27.4323Z" fill="white"/>
-<path d="M321.121 29.7144C321.121 30.2388 321.097 30.7603 321.053 31.2847C321.012 31.7736 320.601 32.1499 320.114 32.1499H298.955C298.326 32.1499 297.871 32.7603 298.051 33.3677C299.062 36.7899 301.649 38.6566 305.259 38.6566C307.959 38.6566 310.204 37.4566 311.512 35.4921C311.683 35.2344 311.985 35.0892 312.295 35.0892H319.103C319.771 35.0892 320.238 35.7736 319.978 36.3899C317.455 42.3366 311.902 46.058 305.262 46.058C296.214 46.058 289.367 39.0299 289.367 29.8181C289.367 20.6063 296.167 13.5781 305.262 13.5781C314.357 13.5781 321.127 20.8551 321.127 29.7085L321.121 29.7144ZM299.304 26.4759H311.462C312.15 26.4759 312.611 25.7559 312.319 25.1307C310.966 22.2359 308.502 20.6803 305.256 20.6803C302.01 20.6803 299.632 22.3248 298.433 25.1633C298.17 25.7855 298.63 26.4759 299.304 26.4759Z" fill="white"/>
-<path d="M7.03076 41.7372C11.5641 46.2706 17.5909 48.7672 24.0009 48.7672C30.411 48.7672 36.4377 46.2706 40.9711 41.7372C45.5044 37.2038 48.0011 31.1771 48.0011 24.767C48.0011 18.357 45.5044 12.3302 40.9711 7.79688L35.3143 13.4536C38.2144 16.3536 40.0077 20.3537 40.0077 24.767C40.0077 29.0437 38.341 33.0638 35.3177 36.0871C32.2943 39.1105 28.2743 40.7772 23.9976 40.7772C19.5842 40.7772 15.5808 38.9805 12.6841 36.0838L7.03076 41.7372Z" fill="url(#paint0_linear_158_13030)"/>
-<path d="M40.9704 7.79764C36.437 3.26427 30.4103 0.767578 24.0002 0.767578C17.5902 0.767578 11.5634 3.26427 7.03006 7.79764C2.49669 12.331 0 18.3577 0 24.7678C0 31.1778 2.49669 37.2046 7.03006 41.7379L12.6868 36.0812C9.78675 33.1812 7.99341 29.1812 7.99341 24.7678C7.99341 20.4911 9.66009 16.4711 12.6834 13.4477C15.7068 10.4243 19.7268 8.75765 24.0035 8.75765C28.4169 8.75765 32.4203 10.5543 35.317 13.451L40.9704 7.79764Z" fill="#5942F3"/>
-<path d="M11.2169 40.2705C12.779 38.7084 13.4365 36.8331 12.6854 36.082C11.9343 35.3309 10.059 35.9883 8.49691 37.5505C6.9348 39.1126 6.27735 40.9878 7.02847 41.7389C7.77958 42.49 9.65482 41.8326 11.2169 40.2705Z" fill="#1F00D9"/>
-<path d="M39.5001 11.9892C41.0622 10.4271 41.7197 8.55188 40.9686 7.80077C40.2175 7.04965 38.3422 7.70709 36.7801 9.2692C35.218 10.8313 34.5606 12.7066 35.3117 13.4577C36.0628 14.2088 37.938 13.5513 39.5001 11.9892Z" fill="#1F00D9"/>
-<path d="M15.5093 33.2555C20.1893 37.9356 27.806 37.9356 32.4894 33.2555C37.1695 28.5755 37.1695 20.9588 32.4894 16.2754L26.8294 21.9454C28.3861 23.5021 28.3861 26.0355 26.8294 27.5922C25.2727 29.1488 22.7393 29.1488 21.1827 27.5922L15.5126 33.2522L15.5093 33.2555Z" fill="#5942F3"/>
-<path d="M21.1695 27.5863C19.6128 26.0296 19.6128 23.4963 21.1695 21.9396C22.7262 20.3829 25.2595 20.3829 26.8162 21.9396L32.4863 16.2796C27.8062 11.5995 20.1895 11.5995 15.5061 16.2796C10.8261 20.9596 10.8261 28.5763 15.5061 33.2597L21.1662 27.5897L21.1695 27.5863Z" fill="url(#paint1_linear_158_13030)"/>
-<path d="M31.0167 20.4658C32.5789 18.9037 33.2363 17.0284 32.4852 16.2773C31.7341 15.5262 29.8588 16.1837 28.2967 17.7458C26.7346 19.3079 26.0772 21.1831 26.8283 21.9342C27.5794 22.6853 29.4546 22.0279 31.0167 20.4658Z" fill="#1F00D9"/>
-<path d="M19.6994 31.7881C21.2615 30.2259 21.9189 28.3507 21.1678 27.5996C20.4167 26.8485 18.5414 27.5059 16.9793 29.068C15.4172 30.6301 14.7598 32.5054 15.5109 33.2565C16.262 34.0076 18.1372 33.3502 19.6994 31.7881Z" fill="#1F00D9"/>
-<defs>
-<linearGradient id="paint0_linear_158_13030" x1="15.5161" y1="50.2195" x2="49.4552" y2="16.2804" gradientUnits="userSpaceOnUse">
-<stop stop-color="#AAC700"/>
-<stop offset="1" stop-color="#D7F067"/>
-</linearGradient>
-<linearGradient id="paint1_linear_158_13030" x1="11.9961" y1="23.013" x2="32.4863" y2="23.013" gradientUnits="userSpaceOnUse">
-<stop stop-color="#AAC700"/>
-<stop offset="1" stop-color="#D7F067"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/src/config/index.ts b/src/config/index.ts
index 75d9dfe69..b9e493db4 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -41,8 +41,11 @@ export const DEFAULT_CHAIN_CONFIG: ChainConfig = {
     validator: "",
     proposal: "",
   },
+  hasSubHeader: false,
 };
 
+const DEFAULT_CELATONE_API_ENDPOINT = "https://celatone-api.alleslabs.dev";
+
 export const CHAIN_CONFIGS: ChainConfigs = {
   "osmosis-1": {
     chain: "osmosis",
@@ -51,7 +54,7 @@ export const CHAIN_CONFIGS: ChainConfigs = {
     lcd: "https://lcd.osmosis.zone",
     rpc: "https://rpc.osmosis.zone",
     indexer: "https://osmosis-mainnet-graphql.alleslabs.dev/v1/graphql",
-    api: "https://celatone-api.alleslabs.dev",
+    api: DEFAULT_CELATONE_API_ENDPOINT,
     features: {
       faucet: {
         enabled: false,
@@ -88,6 +91,7 @@ export const CHAIN_CONFIGS: ChainConfigs = {
       validator: "https://www.mintscan.io/osmosis/validators",
       proposal: "https://www.mintscan.io/osmosis/proposals",
     },
+    hasSubHeader: false,
   },
   "osmo-test-5": {
     chain: "osmosis",
@@ -96,7 +100,7 @@ export const CHAIN_CONFIGS: ChainConfigs = {
     lcd: "https://lcd.osmotest5.osmosis.zone",
     rpc: "https://rpc.osmotest5.osmosis.zone",
     indexer: "https://osmo-test-5-graphql.alleslabs.dev/v1/graphql",
-    api: "https://celatone-api.alleslabs.dev",
+    api: DEFAULT_CELATONE_API_ENDPOINT,
     features: {
       faucet: {
         enabled: true,
@@ -134,6 +138,97 @@ export const CHAIN_CONFIGS: ChainConfigs = {
       validator: "https://testnet.mintscan.io/osmosis-testnet/validators",
       proposal: "https://testnet.mintscan.io/osmosis-testnet/proposals",
     },
+    hasSubHeader: false,
+  },
+  "pacific-1": {
+    chain: "sei",
+    registryChainName: "sei",
+    prettyName: "Sei",
+    lcd: "https://sei-api.polkachu.com",
+    rpc: "https://sei-rpc.polkachu.com",
+    indexer: "https://pacific-1-graphql.alleslabs.dev/v1/graphql",
+    api: DEFAULT_CELATONE_API_ENDPOINT,
+    features: {
+      faucet: {
+        enabled: false,
+      },
+      wasm: {
+        enabled: true,
+        storeCodeMaxFileSize: 800_000,
+        clearAdminGas: 50_000,
+      },
+      pool: {
+        enabled: false,
+      },
+      publicProject: {
+        enabled: true,
+      },
+    },
+    gas: {
+      gasPrice: {
+        tokenPerGas: 0.025,
+        denom: "usei",
+      },
+      gasAdjustment: 1.5,
+      maxGasLimit: 25_000_000,
+    },
+    exampleAddresses: {
+      user: "sei1acqpnvg2t4wmqfdv8hq47d3petfksjs5xjfnyj" as HumanAddr,
+      contract:
+        "sei18l6zzyyhrl7j9zw2lew50677va25rtsa2s4yy5gdpg4nxz3y3j9se47f0k" as ContractAddr,
+      validator:
+        "seivaloper1hh0g5xf23e5zekg45cmerc97hs4n2004dy2t26" as ValidatorAddr,
+    },
+    explorerLink: {
+      validator: "https://mintscan.io/sei/validators",
+      proposal: "https://mintscan.io/sei/proposals",
+    },
+    hasSubHeader: true,
+  },
+  "atlantic-2": {
+    chain: "sei",
+    registryChainName: "seitestnet2",
+    prettyName: "Sei Testnet2",
+    lcd: "https://rest.atlantic-2.seinetwork.io",
+    rpc: "https://rpc.atlantic-2.seinetwork.io",
+    indexer: "https://atlantic-2-graphql.alleslabs.dev/v1/graphql",
+    api: DEFAULT_CELATONE_API_ENDPOINT,
+    features: {
+      faucet: {
+        enabled: false,
+      },
+      wasm: {
+        enabled: true,
+        storeCodeMaxFileSize: 800_000,
+        clearAdminGas: 50_000,
+      },
+      pool: {
+        enabled: false,
+      },
+      publicProject: {
+        enabled: false,
+      },
+    },
+    gas: {
+      gasPrice: {
+        tokenPerGas: 0.025,
+        denom: "usei",
+      },
+      gasAdjustment: 1.5,
+      maxGasLimit: 25_000_000,
+    },
+    exampleAddresses: {
+      user: "sei1acqpnvg2t4wmqfdv8hq47d3petfksjs5xjfnyj" as HumanAddr,
+      contract:
+        "sei18l6zzyyhrl7j9zw2lew50677va25rtsa2s4yy5gdpg4nxz3y3j9se47f0k" as ContractAddr,
+      validator:
+        "seivaloper1hh0g5xf23e5zekg45cmerc97hs4n2004dy2t26" as ValidatorAddr,
+    },
+    explorerLink: {
+      validator: "https://testnet.mintscan.io/sei-testnet/validators",
+      proposal: "https://testnet.mintscan.io/sei-testnet/proposals",
+    },
+    hasSubHeader: true,
   },
   localosmosis: {
     chain: "osmosis",
@@ -179,6 +274,7 @@ export const CHAIN_CONFIGS: ChainConfigs = {
       validator: "",
       proposal: "",
     },
+    hasSubHeader: false,
   },
 };
 
diff --git a/src/config/theme/default.ts b/src/config/theme/default.ts
index 54c14b4a0..0712e2671 100644
--- a/src/config/theme/default.ts
+++ b/src/config/theme/default.ts
@@ -5,7 +5,7 @@ export const DEFAULT_THEME: ThemeConfig = {
     logo: "https://assets.alleslabs.dev/branding/logo/logo.svg",
     favicon: "https://assets.alleslabs.dev/branding/favicon.ico",
     seo: {
-      appName: "celatone",
+      appName: "Celatone",
       title: "Celatone Explorer for Cosmos chain",
       description: "A smart contract powered explorer for the Cosmos.",
       image: "https://assets.alleslabs.dev/branding/celatone-cover.jpg",
@@ -89,6 +89,27 @@ export const DEFAULT_THEME: ThemeConfig = {
       900: "#1A1A22",
     },
   },
+  tag: {
+    signer: {
+      bg: "accent.darker",
+      color: "inherit",
+    },
+    related: {
+      bg: "primary.dark",
+      color: "text.main",
+    },
+  },
+  borderRadius: {
+    default: "8px",
+    iconButton: "36px",
+    viewButton: "0 0 8px 8px",
+    uploadButton: "50%",
+    tag: "full",
+    badge: "16px",
+    radio: "12px",
+    indicator: "2px",
+    stepper: "full",
+  },
   jsonTheme: "monokai",
   illustration: {
     error: "https://assets.alleslabs.dev/illustration/404.svg",
diff --git a/src/config/theme/index.ts b/src/config/theme/index.ts
index 16ba88a09..5c652a933 100644
--- a/src/config/theme/index.ts
+++ b/src/config/theme/index.ts
@@ -1,2 +1,3 @@
 export * from "./default";
 export * from "./osmosis";
+export * from "./sei";
diff --git a/src/config/theme/osmosis.ts b/src/config/theme/osmosis.ts
index e7cc28d05..f10afd502 100644
--- a/src/config/theme/osmosis.ts
+++ b/src/config/theme/osmosis.ts
@@ -67,8 +67,8 @@ export const OSMOSIS_THEME: ThemeConfig = {
       background: "#201865",
     },
     secondary: {
-      main: "#9895FF",
-      light: "#ACA9FF",
+      main: "#8481F8",
+      light: "#9B99FF",
       dark: "#6A67EA",
       darker: "#5855DB",
       background: "#2F306A",
@@ -91,6 +91,27 @@ export const OSMOSIS_THEME: ThemeConfig = {
       900: "#140F34",
     },
   },
+  tag: {
+    signer: {
+      bg: "accent.darker",
+      color: "inherit",
+    },
+    related: {
+      bg: "primary.dark",
+      color: "text.main",
+    },
+  },
+  borderRadius: {
+    default: "8px",
+    iconButton: "36px",
+    viewButton: "0 0 8px 8px",
+    uploadButton: "50%",
+    tag: "full",
+    badge: "16px",
+    radio: "12px",
+    indicator: "2px",
+    stepper: "full",
+  },
   jsonTheme: "pastel_on_dark",
   illustration: {
     error:
@@ -106,6 +127,7 @@ export const OSMOSIS_THEME: ThemeConfig = {
     logo: "https://assets.alleslabs.dev/integrations/osmosis/logo.png",
     description:
       "A Smart Contract Explorer for Osmosis | Explore, deploy, execute, and query smart contracts on Osmosis from a user-friendly web UI",
+    iconStyle: "rounded",
   },
   socialMedia: {
     website: "https://osmosis.zone/",
diff --git a/src/config/theme/sei.ts b/src/config/theme/sei.ts
new file mode 100644
index 000000000..901dc85eb
--- /dev/null
+++ b/src/config/theme/sei.ts
@@ -0,0 +1,151 @@
+import type { ThemeConfig } from "config/theme/types";
+
+export const SEI_THEME: ThemeConfig = {
+  branding: {
+    logo: "https://assets.alleslabs.dev/integrations/sei/logo.svg",
+    favicon: "https://assets.alleslabs.dev/integrations/sei/favicon.ico",
+    seo: {
+      appName: "SeiScan",
+      title: "SeiScan powered by Celatone",
+      description:
+        "Explore, deploy, execute, and query smart contracts on Sei from a user-friendly web UI",
+      image: "https://assets.alleslabs.dev/integrations/sei/cover.jpg",
+      twitter: {
+        handle: "@SeiNetwork",
+        cardType: "summary_large_image",
+      },
+    },
+  },
+  fonts: {
+    heading: {
+      url: "https://fonts.cdnfonts.com/css/satoshi?styles=135009,135005,135007,135002,135000",
+      name: "Satoshi, sans-serif",
+    },
+    body: {
+      url: "https://fonts.cdnfonts.com/css/satoshi?styles=135009,135005,135007,135002,135000",
+      name: "Satoshi, sans-serif",
+    },
+  },
+  colors: {
+    gradient: {
+      main: "linear(55deg, #1D343F 0%, #184354 100%)",
+    },
+    error: {
+      main: "#FF666E",
+      light: "#FF8086",
+      dark: "#B43E44",
+      background: "#4C1A1D",
+    },
+    warning: {
+      main: "#FFBB33",
+      light: "#FFCC66",
+      dark: "#CC8800",
+      background: "#523600",
+    },
+    success: {
+      main: "#42BEA6",
+      light: "#67CBB7",
+      dark: "#207966",
+      background: "#102E28",
+    },
+    background: {
+      main: "#000E13",
+      overlay: "rgba(6, 21, 27, 0.7)",
+    },
+    text: {
+      main: "#FCFCFD",
+      dark: "#92A4B5",
+      disabled: "#586D81",
+    },
+    primary: {
+      main: "#F0E3CF",
+      light: "#FAF6EF",
+      lighter: "#FAF6EF",
+      dark: "#C0B8A9",
+      darker: "#787971",
+      background: "#303939",
+    },
+    secondary: {
+      main: "#6C80B2",
+      light: "#8797C0",
+      dark: "#184354",
+      darker: "#3F4F78",
+      background: "#203043",
+    },
+    accent: {
+      main: "#6C80B2",
+      light: "#8797C0",
+      lighter: "#8797C0",
+      dark: "#516799",
+      darker: "#3F4F78",
+      background: "#203043",
+    },
+    gray: {
+      100: "#FCFCFD",
+      400: "#92A4B5",
+      500: "#586D81",
+      600: "#40566A",
+      700: "#1D343F",
+      800: "#132730",
+      900: "#0C1C23",
+    },
+  },
+  tag: {
+    signer: {
+      bg: "accent.darker",
+      color: "inherit",
+    },
+    related: {
+      bg: "primary.dark",
+      color: "gray.900",
+    },
+  },
+  button: {
+    primary: {
+      background: "#F0E3CF",
+      color: "#0C1C23",
+      disabledBackground: "#787971",
+      disabledColor: "#0C1C23",
+    },
+    outlinePrimary: {
+      borderColor: "#787971",
+      color: "#F0E3CF",
+      disabledBorderColor: "#1D343F",
+      disabledColor: "#40566A",
+    },
+  },
+  borderRadius: {
+    default: "8px",
+    iconButton: "36px",
+    viewButton: "0 0 8px 8px",
+    uploadButton: "50%",
+    tag: "full",
+    badge: "16px",
+    radio: "12px",
+    indicator: "2px",
+    stepper: "full",
+  },
+  jsonTheme: "one_dark",
+  illustration: {
+    error: "https://assets.alleslabs.dev/integrations/sei/illustration/404.svg",
+    searchNotFound:
+      "https://assets.alleslabs.dev/integrations/sei/illustration/search-not-found.svg",
+    searchEmpty:
+      "https://assets.alleslabs.dev/integrations/sei/illustration/search-empty.svg",
+    disconnected:
+      "https://assets.alleslabs.dev/integrations/sei/illustration/disconnected.svg",
+  },
+  footer: {
+    logo: "https://www.sei.io/_next/static/media/logo-light.1249fa55.svg",
+    description:
+      "A Smart Contract Explorer for Sei | Explore, deploy, execute, and query smart contracts on Sei from a user-friendly web UI",
+    iconStyle: "rounded",
+  },
+  socialMedia: {
+    website: "https://www.sei.io/",
+    github: "https://github.com/sei-protocol/sei-chain",
+    discord: "https://discord.com/invite/sei",
+    twitter: "https://twitter.com/SeiNetwork",
+    telegram: "https://t.me/seinetwork",
+  },
+};
diff --git a/src/config/theme/types.ts b/src/config/theme/types.ts
index b1e999e18..f09d4403f 100644
--- a/src/config/theme/types.ts
+++ b/src/config/theme/types.ts
@@ -87,6 +87,41 @@ export type ThemeConfig = {
       900: string;
     };
   };
+  tag: {
+    signer: {
+      bg: string;
+      color: string;
+    };
+    related: {
+      bg: string;
+      color: string;
+    };
+  };
+  button?: {
+    primary?: {
+      background: string;
+      color: string;
+      disabledBackground: string;
+      disabledColor: string;
+    };
+    outlinePrimary?: {
+      borderColor: string;
+      color: string;
+      disabledBorderColor: string;
+      disabledColor: string;
+    };
+  };
+  borderRadius: {
+    default: string;
+    iconButton: string;
+    viewButton: string;
+    uploadButton: string;
+    tag: string;
+    badge: string;
+    radio: string;
+    indicator: string;
+    stepper: string;
+  };
   illustration: {
     error: string;
     searchNotFound: string;
@@ -97,6 +132,7 @@ export type ThemeConfig = {
   footer?: {
     logo: string;
     description: string;
+    iconStyle: "rounded" | "regular";
   };
   socialMedia?: {
     website?: string;
@@ -107,6 +143,5 @@ export type ThemeConfig = {
     telegram?: string;
     reddit?: string;
     linkedin?: string;
-    facebook?: string;
   };
 };
diff --git a/src/config/types.ts b/src/config/types.ts
index e2b76b587..87ed0c9dc 100644
--- a/src/config/types.ts
+++ b/src/config/types.ts
@@ -59,6 +59,7 @@ export interface ChainConfig {
     contract: ContractAddr;
   };
   explorerLink: ExplorerConfig;
+  hasSubHeader: boolean;
 }
 
 export interface ChainConfigs {
diff --git a/src/env.ts b/src/env.ts
index cfce90d6b..2327f6798 100644
--- a/src/env.ts
+++ b/src/env.ts
@@ -1,4 +1,4 @@
-import { DEFAULT_THEME, OSMOSIS_THEME } from "config/theme";
+import { DEFAULT_THEME, OSMOSIS_THEME, SEI_THEME } from "config/theme";
 
 export const SUPPORTED_CHAIN_IDS: string[] = (() => {
   const chainIds = process.env.NEXT_PUBLIC_SUPPORTED_CHAIN_IDS?.split(",");
@@ -27,6 +27,7 @@ export const CURR_THEME = (() => {
     case "osmosis":
       return OSMOSIS_THEME;
     case "sei":
+      return SEI_THEME;
     default:
       return DEFAULT_THEME;
   }
diff --git a/src/lib/app-provider/hooks/useMediaQuery.ts b/src/lib/app-provider/hooks/useMediaQuery.ts
index 82d5bda47..da5491531 100644
--- a/src/lib/app-provider/hooks/useMediaQuery.ts
+++ b/src/lib/app-provider/hooks/useMediaQuery.ts
@@ -1,3 +1,3 @@
 import { useMediaQuery } from "react-responsive";
 
-export const useMobile = () => useMediaQuery({ query: "(max-width: 540px)" });
+export const useMobile = () => useMediaQuery({ query: "(max-width: 767px)" });
diff --git a/src/lib/chain-registry/sei.ts b/src/lib/chain-registry/sei.ts
new file mode 100644
index 000000000..02ffb0254
--- /dev/null
+++ b/src/lib/chain-registry/sei.ts
@@ -0,0 +1,115 @@
+import type { Chain, AssetList } from "@chain-registry/types";
+
+export const sei: Chain = {
+  $schema: "../chain.schema.json",
+  chain_name: "sei",
+  status: "live",
+  website: "https://www.sei.io/",
+  network_type: "mainnet",
+  pretty_name: "Sei",
+  chain_id: "pacific-1",
+  bech32_prefix: "sei",
+  daemon_name: "seid",
+  node_home: "$HOME/.sei",
+  key_algos: ["secp256k1"],
+  slip44: 118,
+  fees: {
+    fee_tokens: [
+      {
+        denom: "usei",
+        fixed_min_gas_price: 0,
+        low_gas_price: 0,
+        average_gas_price: 0.025,
+        high_gas_price: 0.04,
+      },
+    ],
+  },
+  staking: {
+    staking_tokens: [
+      {
+        denom: "usei",
+      },
+    ],
+  },
+  codebase: {
+    git_repo: "https://github.com/sei-protocol/sei-chain",
+    recommended_version: "v3.0.0",
+    compatible_versions: ["v3.0.0"],
+    cosmos_sdk_version: "",
+    cosmwasm_enabled: true,
+    genesis: {
+      genesis_url: "",
+    },
+    versions: [
+      {
+        name: "v1",
+      },
+    ],
+  },
+  logo_URIs: {
+    png: "",
+    svg: "",
+  },
+  peers: {
+    seeds: [
+      {
+        id: "20e1000e88125698264454a884812746c2eb4807",
+        address: "seeds.lavenderfive.com:11956",
+      },
+    ],
+    persistent_peers: [
+      {
+        id: "20e1000e88125698264454a884812746c2eb4807",
+        address: "seeds.lavenderfive.com:11956",
+      },
+    ],
+  },
+  apis: {
+    rpc: [
+      {
+        address: "https://sei-rpc.lavenderfive.com:443",
+      },
+    ],
+    rest: [
+      {
+        address: "https://sei-api.lavenderfive.com:443",
+        provider: "Lavender.Five Nodes 🐝",
+      },
+    ],
+    grpc: [
+      {
+        address: "https://sei-grpc.lavenderfive.com:443",
+        provider: "Lavender.Five Nodes 🐝",
+      },
+    ],
+  },
+  explorers: [
+    {
+      kind: "ping.pub",
+      url: "https://ping.pub/sei",
+    },
+  ],
+};
+export const seiAssets: AssetList = {
+  $schema: "../assetlist.schema.json",
+  chain_name: "sei",
+  assets: [
+    {
+      description: "The native staking token of Sei.",
+      denom_units: [
+        {
+          denom: "usei",
+          exponent: 0,
+        },
+        {
+          denom: "sei",
+          exponent: 6,
+        },
+      ],
+      base: "usei",
+      name: "Sei",
+      display: "sei",
+      symbol: "SEI",
+    },
+  ],
+};
diff --git a/src/lib/components/AppLink.tsx b/src/lib/components/AppLink.tsx
index d18836ec3..a3a87f86d 100644
--- a/src/lib/components/AppLink.tsx
+++ b/src/lib/components/AppLink.tsx
@@ -21,7 +21,12 @@ export const AppLink = ({
   return (
     <Link {...linkProps} href={`/${network}${componentHref}`}>
       {typeof children === "string" ? (
-        <Text variant="body2" color={linkProps.color}>
+        <Text
+          variant={{ base: "body3", md: "body2" }}
+          w={{ base: "max-content", md: "auto" }}
+          color={linkProps.color}
+          h="auto"
+        >
           {children}
         </Text>
       ) : (
diff --git a/src/lib/components/Breadcrumb.tsx b/src/lib/components/Breadcrumb.tsx
index c2d43a717..e7d3265ec 100644
--- a/src/lib/components/Breadcrumb.tsx
+++ b/src/lib/components/Breadcrumb.tsx
@@ -24,7 +24,9 @@ export const Breadcrumb = ({ items, mb = 0 }: BreadcrumbProps) => (
     w="full"
     spacing="4px"
     mb={mb}
-    separator={<CustomIcon name="chevron-right" boxSize={3} color="gray.600" />}
+    separator={
+      <CustomIcon name="chevron-right" boxSize={3} color="gray.600" mb="6px" />
+    }
   >
     {items.map((item) =>
       item.href ? (
@@ -42,7 +44,7 @@ export const Breadcrumb = ({ items, mb = 0 }: BreadcrumbProps) => (
       ) : (
         <ChakraBreadcrumbItem isCurrentPage key={`bc-${item.href}`}>
           <Text
-            variant="body2"
+            variant={{ base: "body3", md: "body2" }}
             className="ellipsis"
             fontWeight={600}
             width="250px"
diff --git a/src/lib/components/ContractSelectSection.tsx b/src/lib/components/ContractSelectSection.tsx
index 4c5f07838..72682e755 100644
--- a/src/lib/components/ContractSelectSection.tsx
+++ b/src/lib/components/ContractSelectSection.tsx
@@ -92,7 +92,9 @@ const ContractDetailsButton = ({
   instantiator,
   label,
 }: ContractDetailsButtonProps) => {
+  const isMobile = useMobile();
   const isExist = !!contractLocalInfo?.lists;
+  if (isMobile) return null;
   return isExist ? (
     <EditContractDetailsModal
       contractLocalInfo={contractLocalInfo}
@@ -204,8 +206,11 @@ export const ContractSelectSection = observer(
         align="center"
         width="full"
       >
-        <Flex gap={4} width="100%">
-          <Flex direction="column" width={style.contractAddrContainer}>
+        <Flex gap={4} width="100%" direction={{ base: "column", md: "row" }}>
+          <Flex
+            direction="column"
+            width={{ base: "auto", md: style.contractAddrContainer }}
+          >
             Contract Address
             {!notSelected ? (
               <ExplorerLink
@@ -226,7 +231,10 @@ export const ContractSelectSection = observer(
               </Text>
             )}
           </Flex>
-          <Flex direction="column" width={style.contractNameContainer}>
+          <Flex
+            direction="column"
+            width={{ base: "auto", md: style.contractNameContainer }}
+          >
             Contract Name
             <DisplayName
               notSelected={notSelected}
diff --git a/src/lib/components/CopyLink.tsx b/src/lib/components/CopyLink.tsx
index 6e3ac3b08..c3de6c80c 100644
--- a/src/lib/components/CopyLink.tsx
+++ b/src/lib/components/CopyLink.tsx
@@ -45,6 +45,7 @@ export const CopyLink = ({
     >
       <Flex
         align="center"
+        display={{ base: "inline", md: "flex" }}
         onClick={() => {
           AmpTrackCopier(amptrackSection, type);
           onCopy();
@@ -60,9 +61,11 @@ export const CopyLink = ({
         {...flexProps}
       >
         <Text
+          wordBreak={{ base: "break-all", md: "inherit" }}
           variant="body2"
           color="secondary.main"
           transition="all .25s ease-in-out"
+          display="inline"
         >
           {value === address ? `${value} (Me)` : value}
         </Text>
diff --git a/src/lib/components/CustomTab.tsx b/src/lib/components/CustomTab.tsx
index 1305e15a0..96ef8ed87 100644
--- a/src/lib/components/CustomTab.tsx
+++ b/src/lib/components/CustomTab.tsx
@@ -25,6 +25,9 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
         "&[aria-selected=true]": {
           color: "primary.light",
         },
+        "&[aria-selected=false]": {
+          color: "gray.500",
+        },
       }}
       _active={{
         bg: "unset",
diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
index 7bac09e7d..a8b082468 100644
--- a/src/lib/components/ExplorerLink.tsx
+++ b/src/lib/components/ExplorerLink.tsx
@@ -1,11 +1,12 @@
 import type { BoxProps, TextProps } from "@chakra-ui/react";
-import { Box, Text } from "@chakra-ui/react";
+import { Box, Text, Flex } from "@chakra-ui/react";
 
 import type { ExplorerConfig } from "config/types";
 import type { AddressReturnType } from "lib/app-provider";
 import { useCelatoneApp } from "lib/app-provider/contexts";
 import { useBaseApiRoute } from "lib/app-provider/hooks/useBaseApiRoute";
 import { useCurrentChain } from "lib/app-provider/hooks/useCurrentChain";
+import { useMobile } from "lib/app-provider/hooks/useMediaQuery";
 import { AmpTrackMintscan } from "lib/services/amplitude";
 import type { Option } from "lib/types";
 import { truncate } from "lib/utils";
@@ -32,6 +33,7 @@ interface ExplorerLinkProps extends BoxProps {
   textVariant?: TextProps["variant"];
   ampCopierSection?: string;
   openNewTab?: boolean;
+  fixedHeight?: boolean;
 }
 
 export const getNavigationUrl = (
@@ -124,6 +126,9 @@ const LinkRender = ({
       className={isEllipsis ? "ellipsis" : undefined}
       maxW={maxWidth}
       pointerEvents={hrefLink ? "auto" : "none"}
+      wordBreak={{ base: "break-all", md: "inherit" }}
+      display={{ base: "inline", md: "flex" }}
+      align={{ base: "start", md: "center" }}
     >
       {textValue}
     </Text>
@@ -160,6 +165,7 @@ export const ExplorerLink = ({
   textVariant = "body2",
   ampCopierSection,
   openNewTab,
+  fixedHeight = true,
   ...componentProps
 }: ExplorerLinkProps) => {
   const { address } = useCurrentChain();
@@ -182,7 +188,7 @@ export const ExplorerLink = ({
   ];
 
   const readOnly = isReadOnly || !hrefLink;
-
+  const isMobile = useMobile();
   return (
     <Box
       className="copier-wrapper"
@@ -202,7 +208,11 @@ export const ExplorerLink = ({
           {textValue}
         </Text>
       ) : (
-        <>
+        <Flex
+          display={{ base: "inline-flex", md: "flex" }}
+          align="center"
+          h={fixedHeight ? "24px" : "auto"}
+        >
           <LinkRender
             type={type}
             isInternal={isInternal}
@@ -217,11 +227,11 @@ export const ExplorerLink = ({
             type={type}
             value={copyValue || value}
             copyLabel={copyValue ? `${getCopyLabel(type)} Copied!` : undefined}
-            display={showCopyOnHover ? "none" : "block"}
+            display={showCopyOnHover && !isMobile ? "none" : "inline"}
             ml={2}
             amptrackSection={ampCopierSection}
           />
-        </>
+        </Flex>
       )}
     </Box>
   );
diff --git a/src/lib/components/ListSelection.tsx b/src/lib/components/ListSelection.tsx
index 2edfae202..e46a92325 100644
--- a/src/lib/components/ListSelection.tsx
+++ b/src/lib/components/ListSelection.tsx
@@ -144,7 +144,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                     <Tag
                       cursor="pointer"
                       whiteSpace="nowrap"
-                      variant="primary-light"
+                      variant="primary-dark"
                       gap={1}
                       mr={1}
                     >
diff --git a/src/lib/components/MobileGuard.tsx b/src/lib/components/MobileGuard.tsx
index 344085f78..464a03d88 100644
--- a/src/lib/components/MobileGuard.tsx
+++ b/src/lib/components/MobileGuard.tsx
@@ -1,6 +1,7 @@
+import { useRouter } from "next/router";
 import type { ReactNode } from "react";
 
-import { useMobile } from "lib/app-provider";
+import { useCelatoneApp, useMobile } from "lib/app-provider";
 
 import { NoMobile } from "./modal";
 
@@ -8,6 +9,23 @@ interface MobileGuardProps {
   children: ReactNode;
 }
 export const MobileGuard = ({ children }: MobileGuardProps) => {
+  const router = useRouter();
+  const pathName = router.asPath;
   const isMobile = useMobile();
-  return isMobile ? <NoMobile /> : <>{children}</>;
+  const { currentChainId } = useCelatoneApp();
+  const isResponsive =
+    pathName.includes(`account`) ||
+    pathName.includes(`/txs`) ||
+    pathName.includes(`/blocks`) ||
+    pathName.includes(`/contract`) ||
+    pathName.includes(`/projects`) ||
+    pathName.includes(`/code`) ||
+    pathName.includes(`/query`) ||
+    pathName.includes(`/network-overview`) ||
+    pathName.includes(`/dev-home`) ||
+    pathName === `/${currentChainId}`;
+
+  if (isResponsive && isMobile) return <>{children}</>;
+  if (!isResponsive && isMobile) return <NoMobile />;
+  return <>{children}</>;
 };
diff --git a/src/lib/components/PageContainer.tsx b/src/lib/components/PageContainer.tsx
index d1130c281..7bc305562 100644
--- a/src/lib/components/PageContainer.tsx
+++ b/src/lib/components/PageContainer.tsx
@@ -6,7 +6,12 @@ type PageContainerProps = {
 };
 
 const PageContainer = ({ children }: PageContainerProps) => (
-  <Box as="main" p={12} overflowX="hidden" minH="inherit">
+  <Box
+    as="main"
+    p={{ base: "16px", md: "48px" }}
+    overflowX="hidden"
+    minH="inherit"
+  >
     {children}
   </Box>
 );
diff --git a/src/lib/components/PermissionChip.tsx b/src/lib/components/PermissionChip.tsx
index f8a0ece03..f7acb2f73 100644
--- a/src/lib/components/PermissionChip.tsx
+++ b/src/lib/components/PermissionChip.tsx
@@ -13,11 +13,13 @@ import { Tooltip } from "./Tooltip";
 interface PermissionChipProps {
   instantiatePermission: AccessConfigPermission;
   permissionAddresses: PermissionAddresses;
+  tagSize?: string;
 }
 
 export const PermissionChip = ({
   instantiatePermission,
   permissionAddresses,
+  tagSize = "md",
 }: PermissionChipProps) => {
   const { address } = useCurrentChain();
 
@@ -35,8 +37,8 @@ export const PermissionChip = ({
 
   return (
     <Tooltip label={message}>
-      <Flex>
-        <Tag size="md" variant={isAllowed ? "accent-darker" : "gray"}>
+      <Flex onClick={(e) => e.stopPropagation()}>
+        <Tag size={tagSize} variant={isAllowed ? "accent-darker" : "gray"}>
           {instantiatePermission}
         </Tag>
       </Flex>
diff --git a/src/lib/components/PublicDescription.tsx b/src/lib/components/PublicDescription.tsx
index a84040874..b8f831acb 100644
--- a/src/lib/components/PublicDescription.tsx
+++ b/src/lib/components/PublicDescription.tsx
@@ -34,7 +34,7 @@ export const PublicDescription = ({
       maxW="100%"
       borderRadius="8px"
       p={4}
-      my={6}
+      mt={{ base: 4, md: 6 }}
       flex="1"
     >
       <Flex align="center" gap={1} h="32px">
diff --git a/src/lib/components/TxFilterSelection.tsx b/src/lib/components/TxFilterSelection.tsx
index dc06a1b13..f7c1be62d 100644
--- a/src/lib/components/TxFilterSelection.tsx
+++ b/src/lib/components/TxFilterSelection.tsx
@@ -28,6 +28,8 @@ export interface TxFilterSelectionProps extends InputProps {
   label?: string;
   boxWidth?: LayoutProps["width"];
   boxHeight?: LayoutProps["height"];
+  size?: string | object;
+  tagSize?: string | object;
 }
 
 const listItemProps: CSSProperties = {
@@ -52,6 +54,8 @@ export const TxFilterSelection = forwardRef<
       label = "Filter by Action",
       boxWidth = "full",
       boxHeight = "56px",
+      size = "lg",
+      tagSize = "md",
       ...rest
     }: TxFilterSelectionProps,
     ref
@@ -130,6 +134,7 @@ export const TxFilterSelection = forwardRef<
                       mr={1}
                       whiteSpace="nowrap"
                       cursor="pointer"
+                      size={tagSize}
                     >
                       {displayActionValue(option)}
                       <CustomIcon name="close" boxSize={3} />
@@ -143,7 +148,7 @@ export const TxFilterSelection = forwardRef<
               autoComplete="off"
               w="100%"
               minW="200px"
-              size="lg"
+              size={size}
               placeholder={result.length ? "" : placeholder}
               onChange={(e) => filterOptions(e.currentTarget.value)}
               onFocus={() => {
@@ -198,7 +203,6 @@ export const TxFilterSelection = forwardRef<
                 >
                   <Flex alignItems="center" justifyContent="space-between">
                     <Text>{displayActionValue(option)}</Text>
-
                     {isOptionSelected(option) && (
                       <CustomIcon
                         name="check"
diff --git a/src/lib/components/TxRelationSelection.tsx b/src/lib/components/TxRelationSelection.tsx
index d4b44fb6a..c365ce7db 100644
--- a/src/lib/components/TxRelationSelection.tsx
+++ b/src/lib/components/TxRelationSelection.tsx
@@ -31,15 +31,18 @@ const relationOptions = [
 
 interface TxRelationSelectionProps extends BoxProps {
   setValue: (value: Option<boolean>) => void;
+  size?: string | object;
 }
 
 export const TxRelationSelection = ({
   setValue,
+  size = "lg",
   ...props
 }: TxRelationSelectionProps) => (
   <Box {...props}>
     <SelectInput
       formLabel="Filter by Relation"
+      size={size}
       options={relationOptions}
       onChange={(value: RelationType) =>
         setValue(
diff --git a/src/lib/components/ValidatorBadge.tsx b/src/lib/components/ValidatorBadge.tsx
index cd78b2617..a4e36a637 100644
--- a/src/lib/components/ValidatorBadge.tsx
+++ b/src/lib/components/ValidatorBadge.tsx
@@ -2,8 +2,9 @@ import type { ImageProps } from "@chakra-ui/react";
 import { Flex, Image, Text } from "@chakra-ui/react";
 
 import { CURR_THEME } from "env";
-import { useCelatoneApp } from "lib/app-provider";
+import { useCelatoneApp, useMobile } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
+import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
 import type { ValidatorInfo } from "lib/types";
 import { removeSpecialChars } from "lib/utils";
 
@@ -11,6 +12,8 @@ interface ValidatorBadgeProps {
   validator: ValidatorInfo | null;
   badgeSize?: ImageProps["boxSize"];
   ampCopierSection?: string;
+  maxWidth?: string;
+  hasLabel?: boolean;
 }
 
 const FallbackRender = ({
@@ -35,10 +38,13 @@ export const ValidatorBadge = ({
   validator,
   badgeSize = 10,
   ampCopierSection,
+  maxWidth = "160px",
+  hasLabel = true,
 }: ValidatorBadgeProps) => {
   const {
     chainConfig: { chain },
   } = useCelatoneApp();
+  const isMobile = useMobile();
   return (
     <Flex alignItems="center" gap={2}>
       {validator ? (
@@ -55,14 +61,19 @@ export const ValidatorBadge = ({
             )}&color=fff`}
             borderRadius="50%"
           />
-          <ExplorerLink
-            value={validator.moniker ?? validator.validatorAddress}
-            copyValue={validator.validatorAddress}
-            type="validator_address"
-            textFormat="ellipsis"
-            showCopyOnHover
-            ampCopierSection={ampCopierSection}
-          />
+          <Flex direction="column">
+            {isMobile && hasLabel && <MobileLabel label="Validator" />}
+            <ExplorerLink
+              value={validator.moniker ?? validator.validatorAddress}
+              copyValue={validator.validatorAddress}
+              type="validator_address"
+              textFormat="ellipsis"
+              showCopyOnHover
+              ampCopierSection={ampCopierSection}
+              maxWidth={maxWidth}
+              fixedHeight
+            />
+          </Flex>
         </>
       ) : (
         <FallbackRender badgeSize={badgeSize} />
diff --git a/src/lib/components/action-msg/MsgToken.tsx b/src/lib/components/action-msg/MsgToken.tsx
index 5fdc446c7..5dffbbdb2 100644
--- a/src/lib/components/action-msg/MsgToken.tsx
+++ b/src/lib/components/action-msg/MsgToken.tsx
@@ -21,7 +21,7 @@ export const MsgToken = ({
   ampCopierSection,
 }: MsgTokenProps) => (
   <Flex role="group" align="center" gap={1}>
-    <Text fontWeight={fontWeight}>
+    <Text fontWeight={fontWeight} variant={{ base: "body2", md: "body1" }}>
       {formatBalanceWithDenom({
         coin,
         symbol,
@@ -38,7 +38,7 @@ export const MsgToken = ({
       value={coin.denom}
       copyLabel="Token ID Copied!"
       display="none"
-      ml="4px"
+      ml={1}
       amptrackSection={ampCopierSection}
     />
   </Flex>
diff --git a/src/lib/components/action-msg/MultipleActionsMsg.tsx b/src/lib/components/action-msg/MultipleActionsMsg.tsx
index d3fa3a12a..9f664ece3 100644
--- a/src/lib/components/action-msg/MultipleActionsMsg.tsx
+++ b/src/lib/components/action-msg/MultipleActionsMsg.tsx
@@ -1,4 +1,4 @@
-import { Badge, Flex } from "@chakra-ui/react";
+import { Badge, Flex, Text } from "@chakra-ui/react";
 
 import type { Message } from "lib/types";
 import { countMessages } from "lib/utils";
@@ -10,11 +10,13 @@ export const MultipleActionsMsg = ({ messages }: MultipleActionsMsgProps) => {
   const displayMessagesCount = countMessages(messages).filter(
     (msg) => msg.count !== 0
   );
+
   return (
     <Flex gap={1} flexWrap="wrap">
       {displayMessagesCount.map((msg, index) => (
         <Flex key={msg.type} gap={1}>
-          {msg.type} <Badge>{msg.count}</Badge>
+          <Text variant={{ base: "body2", md: "body1" }}>{msg.type} </Text>
+          <Badge>{msg.count}</Badge>
           {index < displayMessagesCount.length - 1 && ","}
         </Flex>
       ))}
diff --git a/src/lib/components/action-msg/SingleMsg.tsx b/src/lib/components/action-msg/SingleMsg.tsx
index 41f6643e9..ea5f69b38 100644
--- a/src/lib/components/action-msg/SingleMsg.tsx
+++ b/src/lib/components/action-msg/SingleMsg.tsx
@@ -43,10 +43,15 @@ export const SingleMsg = ({
   text3,
   link2,
 }: SingleMsgProps) => {
-  if (!type) return <Text>Message Unavailable</Text>;
+  if (!type)
+    return (
+      <Text variant={{ base: "body2", md: "body1" }}>Message Unavailable</Text>
+    );
   return (
     <Flex gap={1} alignItems="center" flexWrap="wrap">
-      {type} {text1}
+      <Text variant={{ base: "body2", md: "body1" }}>
+        {type} {text1}
+      </Text>
       {tokens?.map((token: Token, index: number) => (
         <MsgToken
           key={index.toString() + token}
@@ -80,7 +85,7 @@ export const SingleMsg = ({
         </Tag>
       )}
       {/* Text2 */}
-      {text2}
+      <Text variant={{ base: "body2", md: "body1" }}>{text2}</Text>
       {/* Link */}
       {link1 && (
         <ExplorerLink
@@ -93,7 +98,7 @@ export const SingleMsg = ({
         />
       )}
       {/* Text3 */}
-      {text3}
+      <Text variant={{ base: "body2", md: "body1" }}>{text3}</Text>
       {/* Link2 */}
       {link2 && (
         <ExplorerLink
diff --git a/src/lib/components/button/AdminButton.tsx b/src/lib/components/button/AdminButton.tsx
index f84edb204..77ce763c7 100644
--- a/src/lib/components/button/AdminButton.tsx
+++ b/src/lib/components/button/AdminButton.tsx
@@ -24,6 +24,7 @@ export const AdminButton = ({ contractAddress, admin }: AdminButtonProps) => {
       >
         <MenuButton
           variant="outline-gray"
+          size={{ base: "sm", md: "md" }}
           as={Button}
           isDisabled={!isAdmin}
           rightIcon={<CustomIcon name="chevron-down" />}
diff --git a/src/lib/components/button/InstantiateButton.tsx b/src/lib/components/button/InstantiateButton.tsx
index 0cff55e7c..87a080524 100644
--- a/src/lib/components/button/InstantiateButton.tsx
+++ b/src/lib/components/button/InstantiateButton.tsx
@@ -86,6 +86,7 @@ export const InstantiateButton = ({
   return (
     <Tooltip label={tooltipLabel}>
       <Button
+        w={{ base: "full", md: "auto" }}
         // Change to isDisabled when create proposal flow is done
         disabled={!isAllowed || !isWalletConnected}
         // disabled={isDisabled}
diff --git a/src/lib/components/card/AccountCard.tsx b/src/lib/components/card/AccountCard.tsx
new file mode 100644
index 000000000..b0a9d53c3
--- /dev/null
+++ b/src/lib/components/card/AccountCard.tsx
@@ -0,0 +1,53 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { ExplorerLink } from "../ExplorerLink";
+import { useInternalNavigate } from "lib/app-provider";
+import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
+import { getNavigationArgs } from "lib/pages/public-project/components/table/account/PublicProjectAccountRow";
+import type { Account } from "lib/types";
+
+import { DefaultMobileCard } from "./DefaultMobileCard";
+
+interface AccountCardProps {
+  accountInfo: Account;
+}
+export const AccountCard = ({ accountInfo }: AccountCardProps) => {
+  const navigate = useInternalNavigate();
+  const goToDetail = () => {
+    navigate(getNavigationArgs(accountInfo));
+  };
+
+  return (
+    <DefaultMobileCard
+      onClick={goToDetail}
+      topContent={
+        <Flex gap={2} align="center">
+          <MobileLabel variant="body2" label="Address" />
+          <ExplorerLink
+            value={accountInfo.address.toString()}
+            type={
+              accountInfo.type === "account"
+                ? "user_address"
+                : "contract_address"
+            }
+            showCopyOnHover
+          />
+        </Flex>
+      }
+      middleContent={
+        <Flex direction="column" gap={3}>
+          <Flex direction="column">
+            <MobileLabel variant="body2" label="Address" />
+            <Text variant="body2">{accountInfo.name}</Text>
+          </Flex>
+          <Flex direction="column">
+            <MobileLabel variant="body2" label="Description" />
+            <Text variant="body2" color="text.dark" whiteSpace="break-spaces">
+              {accountInfo.description || "N/A"}
+            </Text>
+          </Flex>
+        </Flex>
+      }
+    />
+  );
+};
diff --git a/src/lib/components/card/BlockCard.tsx b/src/lib/components/card/BlockCard.tsx
new file mode 100644
index 000000000..522114104
--- /dev/null
+++ b/src/lib/components/card/BlockCard.tsx
@@ -0,0 +1,75 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { ExplorerLink } from "../ExplorerLink";
+import { ValidatorBadge } from "../ValidatorBadge";
+import { useInternalNavigate } from "lib/app-provider";
+import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
+import type { BlockInfo } from "lib/types/block";
+import { dateFromNow, formatUTC, truncate } from "lib/utils";
+
+import { DefaultMobileCard } from "./DefaultMobileCard";
+
+interface BlockCardProps {
+  blockData: BlockInfo;
+}
+export const BlockCard = ({ blockData }: BlockCardProps) => {
+  const navigate = useInternalNavigate();
+  return (
+    <DefaultMobileCard
+      onClick={() =>
+        navigate({
+          pathname: "/blocks/[blockHeight]",
+          query: { blockHeight: blockData.height },
+        })
+      }
+      topContent={
+        <Flex align="center" justify="center" gap={2} w="full">
+          <Flex direction="column" flex="1">
+            <MobileLabel label="Block Height" />
+            <ExplorerLink
+              type="block_height"
+              value={blockData.height.toString()}
+              showCopyOnHover
+            >
+              {blockData.height}
+            </ExplorerLink>
+          </Flex>
+          <Flex direction="column" flex="1">
+            <MobileLabel label="Block Hash" />
+            <Flex h={6} align="end">
+              <Text variant="body2" color="text.main">
+                {truncate(blockData.hash.toUpperCase())}
+              </Text>
+            </Flex>
+          </Flex>
+          <Flex direction="column" flex="1">
+            <MobileLabel label="Transactions" />
+            <Flex h={6} align="end">
+              <Text
+                variant="body2"
+                color={blockData.txCount === 0 ? "text.dark" : "text.main"}
+              >
+                {blockData.txCount}
+              </Text>
+            </Flex>
+          </Flex>
+        </Flex>
+      }
+      middleContent={
+        <Flex>
+          <ValidatorBadge validator={blockData.proposer} />
+        </Flex>
+      }
+      bottomContent={
+        <Flex direction="column" gap={3}>
+          <Flex direction="column" gap={0}>
+            <Text variant="body3">{formatUTC(blockData.timestamp)}</Text>
+            <Text variant="body3" color="text.dark">
+              {`(${dateFromNow(blockData.timestamp)})`}
+            </Text>
+          </Flex>
+        </Flex>
+      }
+    />
+  );
+};
diff --git a/src/lib/components/card/ContractCard.tsx b/src/lib/components/card/ContractCard.tsx
new file mode 100644
index 000000000..21ea07baf
--- /dev/null
+++ b/src/lib/components/card/ContractCard.tsx
@@ -0,0 +1,87 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { ExplorerLink } from "../ExplorerLink";
+import { ContractNameCell } from "../table";
+import { InstantiatorRender } from "../table/contracts/ContractsTableRow";
+import { useInternalNavigate } from "lib/app-provider";
+import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
+import type { ContractHistoryRemark, ContractInfo, Option } from "lib/types";
+import { RemarkOperation } from "lib/types";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+import { DefaultMobileCard } from "./DefaultMobileCard";
+
+interface InstantiatedContractCardProps {
+  contractInfo: ContractInfo;
+}
+const instantiatorRemark = (remark: Option<ContractHistoryRemark>) => {
+  if (!remark) {
+    return <MobileLabel label="Instantiated by" />;
+  }
+  if (
+    remark.operation ===
+    RemarkOperation.CONTRACT_CODE_HISTORY_OPERATION_TYPE_GENESIS
+  )
+    return <MobileLabel label="Genesis" />;
+  if (
+    remark.operation ===
+    RemarkOperation.CONTRACT_CODE_HISTORY_OPERATION_TYPE_MIGRATE
+  )
+    return <MobileLabel label="Migrated by" />;
+
+  return <MobileLabel label="Instantiated by" />;
+};
+export const InstantiatedContractCard = ({
+  contractInfo,
+}: InstantiatedContractCardProps) => {
+  const navigate = useInternalNavigate();
+  return (
+    <DefaultMobileCard
+      onClick={() =>
+        navigate({
+          pathname: "/contracts/[contractAddr]",
+          query: { contractAddr: contractInfo.contractAddress },
+        })
+      }
+      topContent={
+        <Flex gap={2} align="center">
+          <MobileLabel variant="body2" label="Contract Address" />
+          <ExplorerLink
+            value={contractInfo.contractAddress}
+            type="contract_address"
+            showCopyOnHover
+          />
+        </Flex>
+      }
+      middleContent={
+        <Flex gap={3} direction="column">
+          <Flex direction="column">
+            <MobileLabel label="Contract Name" />
+            <ContractNameCell contractLocalInfo={contractInfo} isReadOnly />
+          </Flex>
+          <Flex direction="column">
+            {instantiatorRemark(contractInfo.remark)}
+            <InstantiatorRender
+              contractInfo={contractInfo}
+              isReadOnly={false}
+            />
+          </Flex>
+        </Flex>
+      }
+      bottomContent={
+        <>
+          {contractInfo.latestUpdated && (
+            <Flex direction="column">
+              <Text variant="body3">
+                {formatUTC(contractInfo.latestUpdated)}
+              </Text>
+              <Text variant="body3" color="text.dark">
+                {`(${dateFromNow(contractInfo.latestUpdated)})`}
+              </Text>
+            </Flex>
+          )}
+        </>
+      }
+    />
+  );
+};
diff --git a/src/lib/components/card/DefaultMobileCard.tsx b/src/lib/components/card/DefaultMobileCard.tsx
new file mode 100644
index 000000000..c4cdb3bf7
--- /dev/null
+++ b/src/lib/components/card/DefaultMobileCard.tsx
@@ -0,0 +1,43 @@
+import { Flex } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+
+interface CardProps {
+  topContent: ReactNode;
+  middleContent: ReactNode;
+  bottomContent?: ReactNode;
+  onClick?: () => void;
+}
+export const DefaultMobileCard = ({
+  topContent,
+  middleContent,
+  bottomContent,
+  onClick,
+}: CardProps) => {
+  return (
+    <Flex
+      borderRadius="8px"
+      background="gray.900"
+      p={3}
+      cursor="pointer"
+      direction="column"
+      gap={3}
+      w="full"
+      onClick={onClick}
+    >
+      <Flex align="center" justify="space-between">
+        {topContent}
+      </Flex>
+      <Flex
+        borderTop="1px solid"
+        borderBottom={bottomContent ? "1px solid" : "0px"}
+        borderColor="gray.700"
+        pt={3}
+        pb={bottomContent ? 3 : 0}
+        direction="column"
+      >
+        {middleContent}
+      </Flex>
+      {bottomContent && <Flex>{bottomContent}</Flex>}
+    </Flex>
+  );
+};
diff --git a/src/lib/components/card/MigrationCard.tsx b/src/lib/components/card/MigrationCard.tsx
new file mode 100644
index 000000000..2833d5e27
--- /dev/null
+++ b/src/lib/components/card/MigrationCard.tsx
@@ -0,0 +1,99 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { ExplorerLink } from "../ExplorerLink";
+import { CodeNameCell } from "../table";
+import { useGetAddressType, useInternalNavigate } from "lib/app-provider";
+import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
+import { RemarkRender } from "lib/pages/contract-details/components/tables/migration/MigrationRow";
+import type { ContractMigrationHistory } from "lib/types";
+import { dateFromNow, formatUTC, getCw2Info } from "lib/utils";
+
+import { DefaultMobileCard } from "./DefaultMobileCard";
+
+interface MigrationCardProps {
+  history: ContractMigrationHistory;
+}
+export const MigrationCard = ({ history }: MigrationCardProps) => {
+  const getAddressType = useGetAddressType();
+  const cw2Info = getCw2Info(history.cw2Contract, history.cw2Version);
+  const navigate = useInternalNavigate();
+  return (
+    <DefaultMobileCard
+      onClick={() =>
+        navigate({
+          pathname: "/codes/[codeId]",
+          query: { codeId: history.codeId.toString() },
+        })
+      }
+      topContent={
+        <Flex w="full">
+          <Flex flex="1" gap={2} align="center">
+            <MobileLabel label="Code ID" variant="body2" />
+            <ExplorerLink
+              type="code_id"
+              value={history.codeId.toString()}
+              showCopyOnHover
+            />
+          </Flex>
+        </Flex>
+      }
+      middleContent={
+        <Flex direction="column" gap={3}>
+          <Flex direction="column">
+            <MobileLabel variant="body3" label="Code Name" />
+            <CodeNameCell
+              code={{
+                id: history.codeId,
+                uploader: history.uploader,
+                name: history.codeName,
+              }}
+            />
+          </Flex>
+          <Flex direction="column">
+            <MobileLabel variant="body3" label="CW2 Info" />
+            <Text
+              variant="body2"
+              color={cw2Info ? "text.main" : "text.disabled"}
+              wordBreak="break-all"
+            >
+              {cw2Info ?? "N/A"}
+            </Text>
+          </Flex>
+          <Flex direction="column">
+            <MobileLabel variant="body3" label="Remark" />
+            <RemarkRender remark={history.remark} />
+          </Flex>
+        </Flex>
+      }
+      bottomContent={
+        <Flex w="full" direction="column" gap={3}>
+          <Flex>
+            <Flex flex="1" direction="column">
+              <MobileLabel label="Sender" />
+              <ExplorerLink
+                type={getAddressType(history.sender)}
+                value={history.sender}
+                textFormat="truncate"
+                showCopyOnHover
+              />
+            </Flex>
+            <Flex flex="1" direction="column">
+              <MobileLabel label="Block Height" />
+              <ExplorerLink
+                value={history.height.toString()}
+                type="block_height"
+                showCopyOnHover
+              />
+            </Flex>
+          </Flex>
+          <Flex direction="column">
+            <Text variant="body3">{formatUTC(history.timestamp)}</Text>
+            <Text variant="body3" color="text.dark">
+              ({dateFromNow(history.timestamp)})
+            </Text>
+          </Flex>
+        </Flex>
+      }
+    />
+  );
+};
diff --git a/src/lib/components/card/ProposalCard.tsx b/src/lib/components/card/ProposalCard.tsx
new file mode 100644
index 000000000..6d7074e39
--- /dev/null
+++ b/src/lib/components/card/ProposalCard.tsx
@@ -0,0 +1,77 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { ExplorerLink } from "../ExplorerLink";
+import { Proposer } from "../table/proposals/Proposer";
+import { ResolvedHeight } from "../table/proposals/ResolvedHeight";
+import { StatusChip } from "../table/proposals/StatusChip";
+import { VotingEndTime } from "../table/proposals/VotingEndTime";
+import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
+import type { Proposal } from "lib/types";
+import { ProposalStatus } from "lib/types";
+
+import { DefaultMobileCard } from "./DefaultMobileCard";
+
+export interface ProposalCardProps {
+  proposal: Proposal;
+}
+
+export const ProposalCard = ({ proposal }: ProposalCardProps) => {
+  const isDepositFailed = proposal.status === ProposalStatus.DEPOSIT_FAILED;
+  const isDepositOrVoting =
+    proposal.status === ProposalStatus.DEPOSIT_PERIOD ||
+    proposal.status === ProposalStatus.VOTING_PERIOD;
+  return (
+    <DefaultMobileCard
+      topContent={
+        <>
+          <Flex gap={2} align="center">
+            <MobileLabel label="Proposal ID" variant="body2" />
+            <ExplorerLink
+              isReadOnly={isDepositFailed}
+              type="proposal_id"
+              value={proposal.proposalId.toString()}
+              showCopyOnHover
+            />
+          </Flex>
+          <StatusChip status={proposal.status} />
+        </>
+      }
+      middleContent={
+        <Flex direction="column" gap={3}>
+          <Flex direction="column" gap={1}>
+            <MobileLabel label="Proposal Title" />
+            <Text color="text.main" variant="body2">
+              {proposal.title}
+            </Text>
+            <Text color="text.dark" variant="body3">
+              Type: {proposal.type}
+            </Text>
+          </Flex>
+          <Flex direction="column" gap={1}>
+            <MobileLabel label="Voting Ends" />
+            <VotingEndTime
+              votingEndTime={proposal.votingEndTime}
+              depositEndTime={proposal.depositEndTime}
+              status={proposal.status}
+            />
+          </Flex>
+        </Flex>
+      }
+      bottomContent={
+        <>
+          <Flex direction="column" flex="1">
+            <MobileLabel label="Resolved Block Height" />
+            <ResolvedHeight
+              resolvedHeight={proposal.resolvedHeight}
+              isDepositOrVoting={isDepositOrVoting}
+            />
+          </Flex>
+          <Flex direction="column" flex="1">
+            <MobileLabel label="Proposed by" />
+            <Proposer proposer={proposal.proposer} />
+          </Flex>
+        </>
+      }
+    />
+  );
+};
diff --git a/src/lib/components/card/PublicContractCard.tsx b/src/lib/components/card/PublicContractCard.tsx
new file mode 100644
index 000000000..cf004a1d2
--- /dev/null
+++ b/src/lib/components/card/PublicContractCard.tsx
@@ -0,0 +1,77 @@
+import { Button, Flex } from "@chakra-ui/react";
+
+import { AppLink } from "../AppLink";
+import { ExplorerLink } from "../ExplorerLink";
+import { ContractNameCell } from "../table";
+import {
+  useGetAddressTypeByLength,
+  useInternalNavigate,
+} from "lib/app-provider";
+import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
+import type { PublicContract } from "lib/types";
+
+import { DefaultMobileCard } from "./DefaultMobileCard";
+
+interface PublicContractCardProps {
+  publicInfo: PublicContract;
+}
+
+export const PublicContractCard = ({ publicInfo }: PublicContractCardProps) => {
+  const navigate = useInternalNavigate();
+  const getAddressTypeByLength = useGetAddressTypeByLength();
+
+  return (
+    <DefaultMobileCard
+      onClick={() =>
+        navigate({
+          pathname: "/contracts/[contractAddr]",
+          query: { contractAddr: publicInfo.contractAddress },
+        })
+      }
+      topContent={
+        <>
+          <Flex align="start" direction="column">
+            <MobileLabel variant="body2" label="Contract Address" />
+            <ExplorerLink
+              value={publicInfo.contractAddress}
+              type="contract_address"
+              showCopyOnHover
+            />
+          </Flex>
+          <Flex
+            gap={3}
+            alignItems="center"
+            justifyContent="center"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <AppLink href={`/query?contract=${publicInfo.contractAddress}`}>
+              <Button variant="outline-gray" size="sm">
+                Query
+              </Button>
+            </AppLink>
+          </Flex>
+        </>
+      }
+      middleContent={
+        <Flex direction="column" gap={3}>
+          <Flex flex="1" direction="column">
+            <Flex direction="column">
+              <MobileLabel label="Contract Name" />
+              <ContractNameCell contractLocalInfo={publicInfo} isReadOnly />
+            </Flex>
+          </Flex>
+          <Flex flex="1" direction="column">
+            <Flex direction="column">
+              <MobileLabel label="Instantiated By" />
+              <ExplorerLink
+                value={publicInfo.instantiator}
+                type={getAddressTypeByLength(publicInfo.instantiator)}
+                showCopyOnHover
+              />
+            </Flex>
+          </Flex>
+        </Flex>
+      }
+    />
+  );
+};
diff --git a/src/lib/components/card/StoredCodeCard.tsx b/src/lib/components/card/StoredCodeCard.tsx
new file mode 100644
index 000000000..af002173d
--- /dev/null
+++ b/src/lib/components/card/StoredCodeCard.tsx
@@ -0,0 +1,80 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { ExplorerLink } from "../ExplorerLink";
+import { PermissionChip } from "../PermissionChip";
+import { CodeNameCell } from "../table";
+import { useInternalNavigate } from "lib/app-provider";
+import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
+import type { CodeInfo, PublicCode } from "lib/types";
+import { getCw2Info } from "lib/utils";
+
+import { DefaultMobileCard } from "./DefaultMobileCard";
+
+interface StoredCodeCardProps {
+  codeInfo: CodeInfo | PublicCode;
+}
+export const StoredCodeCard = ({ codeInfo }: StoredCodeCardProps) => {
+  const cw2Info = getCw2Info(codeInfo.cw2Contract, codeInfo.cw2Version);
+  const navigate = useInternalNavigate();
+  return (
+    <DefaultMobileCard
+      onClick={() =>
+        navigate({
+          pathname: "/codes/[codeId]",
+          query: { codeId: codeInfo.id.toString() },
+        })
+      }
+      topContent={
+        <Flex gap={2} align="center">
+          <MobileLabel variant="body2" label="Code ID" />
+          <ExplorerLink
+            type="code_id"
+            value={codeInfo.id.toString()}
+            showCopyOnHover
+          />
+        </Flex>
+      }
+      middleContent={
+        <Flex direction="column" gap={3}>
+          <Flex direction="column">
+            <MobileLabel label="Code Name" />
+            <CodeNameCell code={codeInfo} isReadOnly />
+          </Flex>
+          <Flex direction="column">
+            <MobileLabel label="CW2 Info" />
+            <Text
+              color={cw2Info ? "text.main" : "text.disabled"}
+              wordBreak="break-all"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {cw2Info ?? "N/A"}
+            </Text>
+          </Flex>
+        </Flex>
+      }
+      bottomContent={
+        <Flex gap={3} w="full">
+          <Flex direction="column" flex="1">
+            <MobileLabel label="Contracts" />
+            <Text
+              variant="body3"
+              onClick={(e) => e.stopPropagation()}
+              cursor="text"
+              color={codeInfo.contractCount ? "text.main" : "text.disabled"}
+            >
+              {codeInfo.contractCount ?? "N/A"}
+            </Text>
+          </Flex>
+          <Flex direction="column" flex="1">
+            <MobileLabel label="Permission" />
+            <PermissionChip
+              instantiatePermission={codeInfo.instantiatePermission}
+              permissionAddresses={codeInfo.permissionAddresses}
+              tagSize="xs"
+            />
+          </Flex>
+        </Flex>
+      }
+    />
+  );
+};
diff --git a/src/lib/components/card/TransactionCard.tsx b/src/lib/components/card/TransactionCard.tsx
new file mode 100644
index 000000000..2c358f2ce
--- /dev/null
+++ b/src/lib/components/card/TransactionCard.tsx
@@ -0,0 +1,82 @@
+import { Flex, Tag, Text } from "@chakra-ui/react";
+
+import { RenderActionMessages } from "../action-msg/ActionMessages";
+import { ExplorerLink } from "../ExplorerLink";
+import { CustomIcon } from "../icon";
+import { RelationChip } from "../table/transactions/RelationChip";
+import { useInternalNavigate } from "lib/app-provider";
+import { MobileLabel } from "lib/pages/account-details/components/mobile/MobileLabel";
+import type { Transaction } from "lib/types";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+import { DefaultMobileCard } from "./DefaultMobileCard";
+
+interface TransactionCardProps {
+  transaction: Transaction;
+  showRelations?: boolean;
+  showTimestamp?: boolean;
+}
+export const TransactionCard = ({
+  transaction,
+  showRelations = true,
+  showTimestamp = true,
+}: TransactionCardProps) => {
+  const navigate = useInternalNavigate();
+  return (
+    <DefaultMobileCard
+      onClick={() =>
+        navigate({
+          pathname: "/txs/[txHash]",
+          query: { txHash: transaction.hash.toLocaleUpperCase() },
+        })
+      }
+      topContent={
+        <>
+          <Flex align="center" gap={2}>
+            {transaction.success ? (
+              <CustomIcon name="check" color="success.main" />
+            ) : (
+              <CustomIcon name="close" color="error.main" />
+            )}
+            <ExplorerLink
+              value={transaction.hash.toLocaleUpperCase()}
+              type="tx_hash"
+              showCopyOnHover
+            />
+          </Flex>
+          {showRelations && <RelationChip isSigner={transaction.isSigner} />}
+        </>
+      }
+      middleContent={
+        <Flex>
+          <RenderActionMessages transaction={transaction} />
+          {transaction.isIbc && (
+            <Tag variant="accent-dark" size="sm" w={8} justifyContent="center">
+              IBC
+            </Tag>
+          )}
+        </Flex>
+      }
+      bottomContent={
+        <Flex direction="column" gap={3}>
+          <Flex direction="column">
+            <MobileLabel label="sender" />
+            <ExplorerLink
+              value={transaction.sender}
+              type="user_address"
+              showCopyOnHover
+            />
+          </Flex>
+          {showTimestamp && (
+            <Flex direction="column">
+              <Text variant="body3">{formatUTC(transaction.created)}</Text>
+              <Text variant="body3" color="text.dark">
+                {`(${dateFromNow(transaction.created)})`}
+              </Text>
+            </Flex>
+          )}
+        </Flex>
+      }
+    />
+  );
+};
diff --git a/src/lib/components/copy/Copier.tsx b/src/lib/components/copy/Copier.tsx
index 6893a3b6d..875b018ee 100644
--- a/src/lib/components/copy/Copier.tsx
+++ b/src/lib/components/copy/Copier.tsx
@@ -18,7 +18,7 @@ export const Copier = ({
   type,
   value,
   copyLabel,
-  display = "block",
+  display = "inline",
   ml = 2,
   amptrackSection,
 }: CopierProps) => (
@@ -28,6 +28,7 @@ export const Copier = ({
     triggerElement={
       <CustomIcon
         id={type}
+        h={6}
         className="copier"
         display={display}
         cursor="pointer"
@@ -35,7 +36,7 @@ export const Copier = ({
         marginLeft={ml}
         onClick={() => AmpTrackCopier(amptrackSection, type)}
         name="copy"
-        boxSize={4}
+        boxSize={3}
         color="gray.600"
       />
     }
diff --git a/src/lib/components/copy/CopyTemplate.tsx b/src/lib/components/copy/CopyTemplate.tsx
index 8eb7ae387..362ed2abd 100644
--- a/src/lib/components/copy/CopyTemplate.tsx
+++ b/src/lib/components/copy/CopyTemplate.tsx
@@ -22,6 +22,7 @@ export const CopyTemplate = ({
   return (
     <Tooltip isOpen={!isDisabled && hasCopied} label={copyLabel}>
       <Box
+        display="inline"
         onClick={(e) => {
           onCopy();
           e.stopPropagation();
diff --git a/src/lib/components/forms/FilterByPermission.tsx b/src/lib/components/forms/FilterByPermission.tsx
index fc24e90a8..bd549f322 100644
--- a/src/lib/components/forms/FilterByPermission.tsx
+++ b/src/lib/components/forms/FilterByPermission.tsx
@@ -44,7 +44,7 @@ export const FilterByPermission = ({
   initialSelected,
   labelBgColor = "background.main",
 }: FilterByPermissionProps) => (
-  <Grid columnGap={4} w="full" mb={4} maxW="360px">
+  <Grid columnGap={4} w="full" mb={4} maxW={{ md: "360px" }}>
     <SelectInput<PermissionFilterValue>
       formLabel="Filter by Instantiate Permission"
       options={options}
diff --git a/src/lib/components/forms/SelectInput.tsx b/src/lib/components/forms/SelectInput.tsx
index 40df4c933..637346b81 100644
--- a/src/lib/components/forms/SelectInput.tsx
+++ b/src/lib/components/forms/SelectInput.tsx
@@ -35,6 +35,7 @@ interface SelectInputProps<T extends string> {
   hasDivider?: boolean;
   helperTextComponent?: ReactNode;
   labelBgColor?: string;
+  size?: string | object;
 }
 
 interface SelectItemProps {
@@ -69,6 +70,7 @@ export const SelectInput = <T extends string>({
   hasDivider = false,
   helperTextComponent,
   labelBgColor = "background.main",
+  size = "lg",
 }: SelectInputProps<T>) => {
   const optionRef = useRef() as MutableRefObject<HTMLElement>;
   const inputRef = useRef() as MutableRefObject<HTMLInputElement>;
@@ -132,7 +134,7 @@ export const SelectInput = <T extends string>({
           )}
           <Input
             ref={inputRef}
-            size="lg"
+            size={size}
             textAlign="start"
             type="button"
             value={selected || placeholder}
diff --git a/src/lib/components/icon/CustomIcon.tsx b/src/lib/components/icon/CustomIcon.tsx
index f27579d61..6f2e54325 100644
--- a/src/lib/components/icon/CustomIcon.tsx
+++ b/src/lib/components/icon/CustomIcon.tsx
@@ -661,6 +661,15 @@ export const ICONS = {
     viewBox: "0 -1.5 16 16",
   },
   discord: {
+    svg: (
+      <path
+        d="M12.1651 3.80398C11.3767 3.42298 10.5444 3.15268 9.68945 3C9.57246 3.22076 9.4666 3.44789 9.37232 3.68045C8.46162 3.53559 7.5355 3.53559 6.6248 3.68045C6.53048 3.44792 6.42462 3.22079 6.30767 3C5.45217 3.15397 4.6193 3.42491 3.8301 3.80598C2.26332 6.2528 1.83859 8.63884 2.05096 10.991C2.9685 11.7066 3.99549 12.2508 5.08729 12.6C5.33313 12.251 5.55067 11.8807 5.7376 11.4931C5.38255 11.3532 5.03988 11.1805 4.71353 10.9771C4.79942 10.9113 4.88342 10.8436 4.96459 10.7778C5.91419 11.2492 6.95062 11.4936 7.99998 11.4936C9.04934 11.4936 10.0858 11.2492 11.0354 10.7778C11.1175 10.8486 11.2015 10.9163 11.2864 10.9771C10.9594 11.1808 10.6161 11.3538 10.2605 11.4941C10.4472 11.8815 10.6647 12.2515 10.9108 12.6C12.0035 12.2522 13.0313 11.7082 13.949 10.992C14.1982 8.26425 13.5233 5.90012 12.1651 3.80398ZM6.00659 9.54445C5.4148 9.54445 4.92589 8.97757 4.92589 8.28019C4.92589 7.58281 5.39781 7.01095 6.0047 7.01095C6.61159 7.01095 7.09672 7.58281 7.08634 8.28019C7.07596 8.97757 6.6097 9.54445 6.00659 9.54445ZM9.99337 9.54445C9.40064 9.54445 8.91362 8.97757 8.91362 8.28019C8.91362 7.58281 9.38554 7.01095 9.99337 7.01095C10.6012 7.01095 11.0826 7.58281 11.0722 8.28019C11.0618 8.97757 10.5965 9.54445 9.99337 9.54445Z"
+        fill="currentColor"
+      />
+    ),
+    viewBox: viewboxDefault,
+  },
+  "discord-solid": {
     svg: (
       <path
         fillRule="evenodd"
@@ -880,6 +889,15 @@ export const ICONS = {
     viewBox: viewBox011616,
   },
   github: {
+    svg: (
+      <path
+        d="M10.5849 14.431L10.5858 14.1079C10.5858 14.0112 10.5874 13.8422 10.5895 13.6164L10.5895 13.6161C10.5937 13.1616 10.6001 12.4771 10.6001 11.6886C10.6001 10.8577 10.3254 10.3331 10.007 10.0562C11.9602 9.83749 14 9.0943 14 5.71284C14 4.75089 13.6673 3.96388 13.103 3.3518C13.1897 3.13323 13.4938 2.22942 13.0162 1.01974C13.0162 1.01974 12.2784 0.786502 10.6146 1.92338C9.92006 1.73396 9.16793 1.63182 8.4301 1.63182C7.69224 1.63265 6.9577 1.73068 6.24543 1.92338C4.5818 0.786502 3.84398 1.01974 3.84398 1.01974C3.3664 2.22942 3.6703 3.13323 3.75705 3.3518C3.20721 3.96388 2.86021 4.75089 2.86021 5.71284C2.86021 9.0943 4.9 9.85216 6.83873 10.0562C6.59279 10.2748 6.36116 10.6683 6.2889 11.2368C5.78253 11.47 4.52385 11.8488 3.74274 10.5081C3.74274 10.5081 3.27965 9.66274 2.39713 9.60443C2.39713 9.60443 1.54358 9.60443 2.33917 10.1437C2.33917 10.1437 2.91799 10.4059 3.30863 11.4262C3.30863 11.4262 3.81482 13.0004 6.24561 12.4756C6.24561 12.9522 6.25173 13.4163 6.25597 13.7375V13.7376C6.25821 13.9075 6.25992 14.0375 6.25992 14.1081L6.25977 14.4305C6.25972 14.4858 6.30452 14.5306 6.3598 14.5306L10.4849 14.5308C10.5401 14.5308 10.5848 14.4861 10.5849 14.431Z"
+        fill="currentColor"
+      />
+    ),
+    viewBox: viewboxDefault,
+  },
+  "github-solid": {
     svg: (
       <path
         fillRule="evenodd"
@@ -968,7 +986,7 @@ export const ICONS = {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58167 12.4183 0 8 0C3.58173 0 0 3.58167 0 8C0 12.4183 3.58173 16 8 16ZM5.90094 11C7.50299 11 8.80176 9.65686 8.80176 8C8.80176 6.34326 7.50308 5 5.90094 5C4.2988 5 3 6.34351 3 8C3 9.65662 4.29889 11 5.90094 11ZM10.5338 10.8245C11.3348 10.8245 11.9842 9.55969 11.9842 8.00012C11.9841 6.44019 11.3347 5.17578 10.5337 5.17578C9.73257 5.17578 9.08328 6.44055 9.08328 8.00012C9.08328 9.55969 9.73267 10.8245 10.5338 10.8245ZM13.2855 8.00012C13.2855 9.39709 13.0572 10.5303 12.7754 10.5303C12.4936 10.5303 12.2654 9.39746 12.2654 8.00012C12.2654 6.60291 12.4937 5.46997 12.7754 5.46997C13.0571 5.46997 13.2855 6.60278 13.2855 8.00012Z"
+        d="M9.02514 7.66684C9.02514 10.2442 7.00477 12.3335 4.51265 12.3335C2.02053 12.3335 0 10.2437 0 7.66684C0 5.08997 2.02037 3 4.51265 3C7.00492 3 9.02514 5.08949 9.02514 7.66684ZM13.9756 7.66691C13.9756 10.0929 12.9654 12.0604 11.7193 12.0604C10.4731 12.0604 9.46295 10.0929 9.46295 7.66691C9.46295 5.2409 10.473 3.27344 11.7191 3.27344C12.9653 3.27344 13.9754 5.24027 13.9754 7.66691H13.9756ZM15.2066 11.6029C15.6449 11.6029 16.0001 9.84014 16.0001 7.66703C16.0001 5.49329 15.6447 3.73117 15.2066 3.73117C14.7684 3.73117 14.4132 5.49344 14.4132 7.66703C14.4132 9.84061 14.7683 11.6029 15.2066 11.6029Z"
         fill="currentColor"
       />
     ),
@@ -985,6 +1003,27 @@ export const ICONS = {
     ),
     viewBox: viewboxDefault,
   },
+  menu: {
+    svg: (
+      <>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1.16667 12C0.522334 12 0 12.4477 0 13C0 13.5523 0.522334 14 1.16667 14H12.8333C13.4777 14 14 13.5523 14 13C14 12.4477 13.4777 12 12.8333 12H1.16667Z"
+          fill="currentColor"
+        />
+        <path
+          d="M0 1C0 0.447715 0.522334 0 1.16667 0H12.8333C13.4777 0 14 0.447715 14 1C14 1.55228 13.4777 2 12.8333 2H1.16667C0.522334 2 0 1.55228 0 1Z"
+          fill="currentColor"
+        />
+        <path
+          d="M3.2 6C2.53726 6 2 6.44772 2 7C2 7.55228 2.53726 8 3.2 8H12.8C13.4627 8 14 7.55228 14 7C14 6.44772 13.4627 6 12.8 6H3.2Z"
+          fill="currentColor"
+        />
+      </>
+    ),
+    viewBox: viewBox011616,
+  },
   migrate: {
     svg: (
       <path
@@ -1249,6 +1288,17 @@ export const ICONS = {
     viewBox: viewboxDefault,
   },
   telegram: {
+    svg: (
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.82494 7.28115C6.04616 5.87772 8.19414 4.95249 9.26889 4.50546C12.3375 3.22911 12.9751 3.0074 13.3907 3.00008C13.4822 2.99847 13.6865 3.02112 13.8189 3.12855C13.9307 3.21925 13.9615 3.34179 13.9762 3.42779C13.9909 3.51379 14.0092 3.7097 13.9947 3.86278C13.8284 5.61 13.1088 9.85005 12.7428 11.807C12.5879 12.635 12.2829 12.9127 11.9876 12.9398C11.346 12.9989 10.8587 12.5158 10.2372 12.1084C9.26468 11.4709 8.71527 11.074 7.77127 10.4519C6.68032 9.73301 7.38754 9.33788 8.00927 8.69212C8.17198 8.52313 10.9992 5.95152 11.054 5.71824C11.0608 5.68906 11.0671 5.58031 11.0025 5.52288C10.9379 5.46546 10.8426 5.48509 10.7738 5.50071C10.6762 5.52285 9.1226 6.54973 6.11292 8.58135C5.67193 8.88417 5.2725 9.03171 4.91462 9.02398C4.52009 9.01545 3.76117 8.8009 3.19699 8.61751C2.505 8.39257 1.95502 8.27365 2.00291 7.89163C2.02785 7.69265 2.30186 7.48916 2.82494 7.28115Z"
+        fill="currentColor"
+      />
+    ),
+    viewBox: viewboxDefault,
+  },
+  "telegram-solid": {
     svg: (
       <path
         fillRule="evenodd"
@@ -1260,6 +1310,17 @@ export const ICONS = {
     viewBox: viewboxDefault,
   },
   twitter: {
+    svg: (
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.0419 5.81675C13.0419 9.15183 10.5026 13 5.85864 13C4.43455 13 3.10471 12.5812 2 11.8586C2.19895 11.8848 2.39791 11.8953 2.60209 11.8953C3.78534 11.8953 4.87435 11.4921 5.73822 10.8168C4.63351 10.7958 3.70157 10.0681 3.3822 9.06283C3.53927 9.09424 3.69634 9.10995 3.85864 9.10995C4.08901 9.10995 4.31414 9.07853 4.52356 9.02094C3.36649 8.78534 2.49738 7.76963 2.49738 6.5445V6.51309C2.8377 6.70157 3.22513 6.81675 3.63874 6.82723C2.95812 6.37696 2.51309 5.60209 2.51309 4.72775C2.51309 4.26702 2.63874 3.83246 2.8534 3.46073C4.09948 4.98953 5.95812 5.99476 8.05759 6.09948C8.01047 5.91623 7.98953 5.72251 7.98953 5.52356C7.98953 4.13089 9.12042 3 10.5131 3C11.2408 3 11.8953 3.30366 12.356 3.79581C12.9319 3.68063 13.4712 3.4712 13.9581 3.18325C13.7696 3.77487 13.3717 4.26702 12.8482 4.58115C13.3613 4.51832 13.8482 4.3822 14.2984 4.18325C13.9581 4.6911 13.5288 5.13613 13.0366 5.49215C13.0419 5.59686 13.0419 5.70681 13.0419 5.81675Z"
+        fill="currentColor"
+      />
+    ),
+    viewBox: viewboxDefault,
+  },
+  "twitter-solid": {
     svg: (
       <path
         d="M16 8C16 12.42 12.42 16 8 16C3.58 16 0 12.42 0 8C0 3.58 3.58 0 8 0C12.42 0 16 3.58 16 8ZM6.536 12.22C10.084 12.22 12.024 9.28 12.024 6.732C12.024 6.648 12.024 6.564 12.02 6.484C12.396 6.212 12.724 5.872 12.984 5.484C12.64 5.636 12.268 5.74 11.876 5.788C12.276 5.548 12.58 5.172 12.724 4.72C12.352 4.94 11.94 5.1 11.5 5.188C11.148 4.812 10.648 4.58 10.092 4.58C9.028 4.58 8.164 5.444 8.164 6.508C8.164 6.66 8.18 6.808 8.216 6.948C6.612 6.868 5.192 6.1 4.24 4.932C4.076 5.216 3.98 5.548 3.98 5.9C3.98 6.568 4.32 7.16 4.84 7.504C4.524 7.496 4.228 7.408 3.968 7.264C3.968 7.272 3.968 7.28 3.968 7.288C3.968 8.224 4.632 9 5.516 9.18C5.356 9.224 5.184 9.248 5.008 9.248C4.884 9.248 4.764 9.236 4.644 9.212C4.888 9.98 5.6 10.536 6.444 10.552C5.784 11.068 4.952 11.376 4.048 11.376C3.892 11.376 3.74 11.368 3.588 11.348C4.432 11.9 5.448 12.22 6.536 12.22Z"
diff --git a/src/lib/components/json/JsonInput.tsx b/src/lib/components/json/JsonInput.tsx
index 30bcd438f..f312f427a 100644
--- a/src/lib/components/json/JsonInput.tsx
+++ b/src/lib/components/json/JsonInput.tsx
@@ -112,6 +112,7 @@ const JsonInput = ({
         borderColor="gray.700"
         borderRadius="8px"
         position="relative"
+        minH={32}
         transition="all .25s ease-in-out"
         _hover={{
           borderColor: "gray.600",
diff --git a/src/lib/components/json/JsonReadOnly.tsx b/src/lib/components/json/JsonReadOnly.tsx
index ffcb01190..6435f7386 100644
--- a/src/lib/components/json/JsonReadOnly.tsx
+++ b/src/lib/components/json/JsonReadOnly.tsx
@@ -55,6 +55,7 @@ const JsonReadOnly = ({
 
   return (
     <Box
+      minH={{ base: "360px", md: "auto" }}
       position="relative"
       borderWidth="thin"
       borderColor={!isJsonValid ? "error.main" : "gray.700"}
diff --git a/src/lib/components/links/GitHubLink.tsx b/src/lib/components/links/GitHubLink.tsx
index 26472ad7c..ce88e2552 100644
--- a/src/lib/components/links/GitHubLink.tsx
+++ b/src/lib/components/links/GitHubLink.tsx
@@ -10,7 +10,7 @@ interface GitHubLinkProps {
 export const GitHubLink = ({ github }: GitHubLinkProps) => {
   const [, , , org, repo] = github.split("/");
   return (
-    <Flex gap={2}>
+    <Flex gap={{ base: 0, md: 2 }} direction={{ base: "column", md: "row" }}>
       <Text fontWeight={500} color="text.dark" variant="body2">
         GitHub:
       </Text>
diff --git a/src/lib/components/modal/ActionModal.tsx b/src/lib/components/modal/ActionModal.tsx
index 01edb83b5..438f25073 100644
--- a/src/lib/components/modal/ActionModal.tsx
+++ b/src/lib/components/modal/ActionModal.tsx
@@ -94,7 +94,7 @@ export function ActionModal({
             <Box w="full">
               <Flex alignItems="center" gap={3}>
                 <CustomIcon name={icon} color={iconColor} boxSize={5} />
-                <Heading as="h5" variant="h5">
+                <Heading as="h5" variant={{ base: "h6", md: "h5" }}>
                   {title}
                 </Heading>
               </Flex>
diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx
index 679d3c9ca..ec29de7cf 100644
--- a/src/lib/components/modal/UnsupportedTokensModal.tsx
+++ b/src/lib/components/modal/UnsupportedTokensModal.tsx
@@ -178,7 +178,6 @@ export const UnsupportedTokensModal = ({
               </Heading>
             </Flex>
           </ModalHeader>
-
           <ModalCloseButton color="gray.600" />
           <ModalBody maxH="400px" overflow="overlay" pb={6}>
             <Flex direction="column" gap={5}>
diff --git a/src/lib/components/modal/code/SaveOrEditCode.tsx b/src/lib/components/modal/code/SaveOrEditCode.tsx
index 21ffa1699..20267008f 100644
--- a/src/lib/components/modal/code/SaveOrEditCode.tsx
+++ b/src/lib/components/modal/code/SaveOrEditCode.tsx
@@ -20,6 +20,7 @@ export const SaveOrEditCodeModal = observer(
         triggerElement={
           <Button
             variant="outline-gray"
+            size={{ base: "sm", md: "md" }}
             leftIcon={<CustomIcon name="bookmark" />}
           >
             Save Code
@@ -30,7 +31,11 @@ export const SaveOrEditCodeModal = observer(
       <EditCodeDetailsModal
         codeInfo={codeInfo}
         triggerElement={
-          <Button variant="ghost-gray" leftIcon={<CustomIcon name="edit" />}>
+          <Button
+            variant="ghost-gray"
+            size={{ base: "sm", md: "md" }}
+            leftIcon={<CustomIcon name="edit" />}
+          >
             Edit
           </Button>
         }
diff --git a/src/lib/components/modal/contract/AddToOtherList.tsx b/src/lib/components/modal/contract/AddToOtherList.tsx
index aea4f260d..ca4cc64a0 100644
--- a/src/lib/components/modal/contract/AddToOtherList.tsx
+++ b/src/lib/components/modal/contract/AddToOtherList.tsx
@@ -54,6 +54,7 @@ export const AddToOtherListModal = observer(
                 {contractLocalInfo.name ?? contractLocalInfo.label}
               </Text>
               <ExplorerLink
+                fixedHeight
                 value={contractLocalInfo.contractAddress}
                 type="contract_address"
               />
diff --git a/src/lib/components/modal/list/CreateNewList.tsx b/src/lib/components/modal/list/CreateNewList.tsx
index 568bc7b07..74ff1aa0d 100644
--- a/src/lib/components/modal/list/CreateNewList.tsx
+++ b/src/lib/components/modal/list/CreateNewList.tsx
@@ -98,7 +98,7 @@ export function CreateNewListModal({
     <ActionModal
       title="Create a New List"
       icon="add-new-solid"
-      trigger={trigger || <Button {...buttonProps} />}
+      trigger={trigger || <Button {...buttonProps} as="button" />}
       mainBtnTitle="Create"
       mainAction={handleCreate}
       disabledMain={status.state !== "success"}
diff --git a/src/lib/components/select-code/CodeSelectDrawerButton.tsx b/src/lib/components/select-code/CodeSelectDrawerButton.tsx
index 70d041d39..e9f55e5ae 100644
--- a/src/lib/components/select-code/CodeSelectDrawerButton.tsx
+++ b/src/lib/components/select-code/CodeSelectDrawerButton.tsx
@@ -95,7 +95,7 @@ export const CodeSelectDrawerButton = ({
             </Heading>
           </DrawerHeader>
           <DrawerCloseButton color="text.dark" />
-          <DrawerBody px={0} overflow="scroll">
+          <DrawerBody px={0} overflow="scroll" py={4}>
             <Flex gap={2} px={6} py={2}>
               <InputWithIcon
                 placeholder="Search with Code ID or Code Name"
diff --git a/src/lib/components/select-contract/ContractListCard.tsx b/src/lib/components/select-contract/ContractListCard.tsx
index 9c351cfb1..7ab12d75f 100644
--- a/src/lib/components/select-contract/ContractListCard.tsx
+++ b/src/lib/components/select-contract/ContractListCard.tsx
@@ -58,7 +58,10 @@ export const ContractListCard = ({
           <Badge>{item.contracts.length}</Badge>
         </Flex>
         {isInstantiatedByMe && (
-          <Text variant="body3" color="text.dark">
+          <Text
+            variant="body3"
+            textColor={isDisabled ? "text.disabled" : "text.dark"}
+          >
             Updated {dateFromNow(item.lastUpdated)}
           </Text>
         )}
diff --git a/src/lib/components/select-contract/SelectContractAdmin.tsx b/src/lib/components/select-contract/SelectContractAdmin.tsx
index 0de1187e3..e11945ea1 100644
--- a/src/lib/components/select-contract/SelectContractAdmin.tsx
+++ b/src/lib/components/select-contract/SelectContractAdmin.tsx
@@ -88,7 +88,7 @@ export const SelectContractAdmin = ({
             </Heading>
           </DrawerHeader>
           <DrawerCloseButton />
-          <DrawerBody overflowY="scroll">
+          <DrawerBody overflowY="scroll" py={4}>
             <ContractListDetail
               contractListInfo={contractList}
               isLoading={isLoading}
diff --git a/src/lib/components/select-contract/SelectContractInstantiator.tsx b/src/lib/components/select-contract/SelectContractInstantiator.tsx
index ae9c067e2..7d1d16c55 100644
--- a/src/lib/components/select-contract/SelectContractInstantiator.tsx
+++ b/src/lib/components/select-contract/SelectContractInstantiator.tsx
@@ -21,6 +21,7 @@ import { CustomIcon } from "../icon";
 import {
   useBaseApiRoute,
   useCelatoneApp,
+  useMobile,
   useValidateAddress,
 } from "lib/app-provider";
 import { DEFAULT_RPC_ERROR } from "lib/data";
@@ -100,6 +101,7 @@ export const SelectContractInstantiator = ({
     setListSlug(slug);
   };
 
+  const isMobile = useMobile();
   return (
     <>
       <Button
@@ -117,9 +119,13 @@ export const SelectContractInstantiator = ({
       >
         {notSelected ? "Select Contract" : "Change Contract"}
       </Button>
-      <Drawer isOpen={isOpen} onClose={resetOnClose} placement="bottom">
+      <Drawer
+        isOpen={isOpen}
+        onClose={resetOnClose}
+        placement={isMobile ? "top" : "bottom"}
+      >
         <DrawerOverlay />
-        <DrawerContent h="80%">
+        <DrawerContent h={{ base: "auto", md: "80%" }}>
           {listSlug.length === 0 || !contractList ? (
             <>
               <DrawerHeader>
@@ -169,22 +175,25 @@ export const SelectContractInstantiator = ({
                 <Text variant="body3" color="error.main" mt={1} ml={3}>
                   {invalid}
                 </Text>
-
-                <Flex my={6} gap={2} alignItems="center">
-                  <Divider borderColor="gray.700" />
-                  <Text variant="body1">OR</Text>
-                  <Divider borderColor="gray.700" />
-                </Flex>
-
-                <Heading as="h6" variant="h6" mb={4}>
-                  Select from your Contract List
-                </Heading>
-                <AllContractLists
-                  contractLists={contractLists}
-                  handleListSelect={handleListSelect}
-                  isReadOnly
-                  formLabelBgColor="gray.900"
-                />
+                {!isMobile && (
+                  <>
+                    <Flex my={6} gap={2} alignItems="center">
+                      <Divider borderColor="gray.700" />
+                      <Text variant="body1">OR</Text>
+                      <Divider borderColor="gray.700" />
+                    </Flex>
+
+                    <Heading as="h6" variant="h6" mb={4}>
+                      Select from your Contract List
+                    </Heading>
+                    <AllContractLists
+                      contractLists={contractLists}
+                      handleListSelect={handleListSelect}
+                      isReadOnly
+                      formLabelBgColor="gray.900"
+                    />
+                  </>
+                )}
               </DrawerBody>
             </>
           ) : (
diff --git a/src/lib/components/state/EmptyState.tsx b/src/lib/components/state/EmptyState.tsx
index 6ab9d633e..854c53730 100644
--- a/src/lib/components/state/EmptyState.tsx
+++ b/src/lib/components/state/EmptyState.tsx
@@ -9,6 +9,7 @@ export interface EmptyStateProps {
   message: string | ReactElement;
   heading?: string;
   withBorder?: boolean;
+  my?: number;
 }
 
 export const EmptyState = ({
@@ -16,9 +17,11 @@ export const EmptyState = ({
   imageVariant,
   heading,
   withBorder = false,
+  my = 12,
 }: EmptyStateProps) => (
   <Flex
-    py={12}
+    py={8}
+    my={my}
     direction="column"
     borderY={withBorder ? "1px solid" : undefined}
     borderColor="gray.700"
diff --git a/src/lib/components/stepper/StepperItem.tsx b/src/lib/components/stepper/StepperItem.tsx
index e6ab67010..4c337e972 100644
--- a/src/lib/components/stepper/StepperItem.tsx
+++ b/src/lib/components/stepper/StepperItem.tsx
@@ -21,7 +21,7 @@ const StepLabel = ({
   <Flex
     justify="center"
     align="center"
-    backgroundColor={disabled ? "text.disabled" : "primary.main"}
+    backgroundColor={disabled ? "text.disabled" : "accent.main"}
     width="24px"
     height="24px"
     borderRadius="50%"
diff --git a/src/lib/components/table/EditableCell.tsx b/src/lib/components/table/EditableCell.tsx
index bd8d6a0c3..66467dab4 100644
--- a/src/lib/components/table/EditableCell.tsx
+++ b/src/lib/components/table/EditableCell.tsx
@@ -163,6 +163,7 @@ export const EditableCell = ({
               variant="body2"
               className="ellipsis"
               maxW="full"
+              onClick={(e) => e.stopPropagation()}
               onMouseOver={handleMouseEnterText}
               ref={textRef}
               {...getInputValueTextProps(
diff --git a/src/lib/components/table/contracts/ContractsTableRow.tsx b/src/lib/components/table/contracts/ContractsTableRow.tsx
index 43496eb8c..f64652662 100644
--- a/src/lib/components/table/contracts/ContractsTableRow.tsx
+++ b/src/lib/components/table/contracts/ContractsTableRow.tsx
@@ -1,7 +1,7 @@
 import { Flex, Text, Grid } from "@chakra-ui/react";
 
 import { TableRow } from "../tableComponents";
-import { useGetAddressType } from "lib/app-provider";
+import { useGetAddressType, useMobile } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { ContractAddr, ContractInfo } from "lib/types";
 import { RemarkOperation } from "lib/types";
@@ -20,13 +20,14 @@ interface ContractsTableRowProps {
   withoutTag?: boolean;
 }
 
-const InstantiatorRender = ({
+export const InstantiatorRender = ({
   contractInfo: { instantiator, remark, latestUpdater },
   isReadOnly,
 }: {
   contractInfo: ContractInfo;
   isReadOnly: boolean;
 }) => {
+  const isMobile = useMobile();
   const getAddressType = useGetAddressType();
 
   /**
@@ -58,9 +59,11 @@ const InstantiatorRender = ({
     case RemarkOperation.CONTRACT_CODE_HISTORY_OPERATION_TYPE_MIGRATE:
       return (
         <Flex direction="column" onClick={(e) => e.stopPropagation()}>
-          <Text variant="body3" color="text.dark">
-            Migrated by
-          </Text>
+          {!isMobile && (
+            <Text variant="body3" color="text.dark">
+              Migrated by
+            </Text>
+          )}
           <ExplorerLink
             value={latestUpdater}
             type={updaterType}
diff --git a/src/lib/components/table/contracts/ContractsTableRowCTA.tsx b/src/lib/components/table/contracts/ContractsTableRowCTA.tsx
index 84361dbcc..6b664017c 100644
--- a/src/lib/components/table/contracts/ContractsTableRowCTA.tsx
+++ b/src/lib/components/table/contracts/ContractsTableRowCTA.tsx
@@ -13,7 +13,11 @@ import {
 } from "@chakra-ui/react";
 
 import { TableRow } from "../tableComponents";
-import { useCurrentChain, useInternalNavigate } from "lib/app-provider";
+import {
+  useCurrentChain,
+  useInternalNavigate,
+  useMobile,
+} from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import { CustomIcon } from "lib/components/icon";
 import {
@@ -42,16 +46,19 @@ export interface CTAInfo {
 interface ContractsTableRowCTAProps {
   contractInfo: ContractInfo;
   withCTA?: CTAInfo;
+  showLastUpdate?: boolean;
 }
 
 export const ContractsTableRowCTA = ({
   contractInfo,
   withCTA,
+  showLastUpdate = true,
 }: ContractsTableRowCTAProps) => {
   const { address } = useCurrentChain();
   const navigate = useInternalNavigate();
 
   const isAdmin = !!address && address === contractInfo.admin;
+  const isMobile = useMobile();
   return withCTA ? (
     <>
       <TableRow>
@@ -77,7 +84,6 @@ export const ContractsTableRowCTA = ({
           </AppLink>
         </Flex>
       </TableRow>
-
       <TableRow>
         <Menu>
           <MenuButton
@@ -165,55 +171,58 @@ export const ContractsTableRowCTA = ({
     </>
   ) : (
     <>
-      <TableRow>
-        <Flex
-          direction="column"
-          gap={1}
-          onClick={(e) => e.stopPropagation()}
-          cursor="text"
-        >
-          {contractInfo.latestUpdated ? (
-            <>
-              <Text variant="body2">
-                {formatUTC(contractInfo.latestUpdated)}
-              </Text>
-              <Text variant="body3" color="text.dark">
-                {`(${dateFromNow(contractInfo.latestUpdated)})`}
+      {showLastUpdate && (
+        <TableRow>
+          <Flex
+            direction="column"
+            gap={1}
+            onClick={(e) => e.stopPropagation()}
+            cursor="text"
+          >
+            {contractInfo.latestUpdated ? (
+              <>
+                <Text variant="body2">
+                  {formatUTC(contractInfo.latestUpdated)}
+                </Text>
+                <Text variant="body3" color="text.dark">
+                  {`(${dateFromNow(contractInfo.latestUpdated)})`}
+                </Text>
+              </>
+            ) : (
+              <Text variant="body2" color="text.dark">
+                N/A
               </Text>
-            </>
-          ) : (
-            <Text variant="body2" color="text.dark">
-              N/A
-            </Text>
-          )}
-        </Flex>
-      </TableRow>
-
-      <TableRow>
-        <Box onClick={(e) => e.stopPropagation()}>
-          {contractInfo.lists ? (
-            <AddToOtherListModal
-              contractLocalInfo={contractInfo}
-              triggerElement={
-                <StyledIconButton
-                  icon={<CustomIcon name="bookmark-solid" />}
-                  variant="ghost-primary"
-                />
-              }
-            />
-          ) : (
-            <SaveContractDetailsModal
-              contractLocalInfo={contractInfo}
-              triggerElement={
-                <StyledIconButton
-                  icon={<CustomIcon name="bookmark" />}
-                  variant="ghost-gray"
-                />
-              }
-            />
-          )}
-        </Box>
-      </TableRow>
+            )}
+          </Flex>
+        </TableRow>
+      )}
+      {!isMobile && (
+        <TableRow>
+          <Box onClick={(e) => e.stopPropagation()}>
+            {contractInfo.lists ? (
+              <AddToOtherListModal
+                contractLocalInfo={contractInfo}
+                triggerElement={
+                  <StyledIconButton
+                    icon={<CustomIcon name="bookmark-solid" />}
+                    variant="ghost-primary"
+                  />
+                }
+              />
+            ) : (
+              <SaveContractDetailsModal
+                contractLocalInfo={contractInfo}
+                triggerElement={
+                  <StyledIconButton
+                    icon={<CustomIcon name="bookmark" />}
+                    variant="ghost-gray"
+                  />
+                }
+              />
+            )}
+          </Box>
+        </TableRow>
+      )}
     </>
   );
 };
diff --git a/src/lib/components/table/contracts/TagsCell.tsx b/src/lib/components/table/contracts/TagsCell.tsx
index 9d631f600..96bbf997b 100644
--- a/src/lib/components/table/contracts/TagsCell.tsx
+++ b/src/lib/components/table/contracts/TagsCell.tsx
@@ -9,11 +9,13 @@ import { EditTags } from "./EditTags";
 interface TagsCellProps {
   contractLocalInfo: ContractLocalInfo;
   isReadOnly?: boolean;
+  tagSize?: string;
 }
 
 export const TagsCell = ({
   contractLocalInfo,
   isReadOnly = false,
+  tagSize = "md",
 }: TagsCellProps) => {
   const tags = getTagsDefault(contractLocalInfo.tags);
   const [isHover, setIsHover] = useState(false);
@@ -40,13 +42,17 @@ export const TagsCell = ({
         }}
       >
         {tags.length ? (
-          <Tag>{tags.at(0)}</Tag>
+          <Tag size={tagSize}>{tags.at(0)}</Tag>
         ) : (
           <Text variant="body2" color="text.dark">
             Not Tagged
           </Text>
         )}
-        <Tag variant="gray" display={tags.length > 1 ? "flex" : "none"}>
+        <Tag
+          size={tagSize}
+          variant="gray"
+          display={tags.length > 1 ? "flex" : "none"}
+        >
           {tags.length - 1}+
         </Tag>
       </Flex>
@@ -76,7 +82,11 @@ export const TagsCell = ({
           >
             {tags.length ? (
               tags.map((item) => {
-                return <Tag key={item}>{item}</Tag>;
+                return (
+                  <Tag size={tagSize} key={item}>
+                    {item}
+                  </Tag>
+                );
               })
             ) : (
               <Text variant="body2" color="text.dark">
diff --git a/src/lib/components/table/proposals/Proposer.tsx b/src/lib/components/table/proposals/Proposer.tsx
index 563f29a6e..178f30ac5 100644
--- a/src/lib/components/table/proposals/Proposer.tsx
+++ b/src/lib/components/table/proposals/Proposer.tsx
@@ -12,15 +12,17 @@ export const Proposer = ({
   amptrackSection?: string;
 }) => {
   const getAddressType = useGetAddressType();
-
   return proposer ? (
     <ExplorerLink
       type={getAddressType(proposer)}
       value={proposer}
       showCopyOnHover
       ampCopierSection={amptrackSection}
+      textVariant="body2"
     />
   ) : (
-    <Text color="text.dark">N/A</Text>
+    <Text color="text.dark" variant="body2">
+      N/A
+    </Text>
   );
 };
diff --git a/src/lib/components/table/proposals/ResolvedHeight.tsx b/src/lib/components/table/proposals/ResolvedHeight.tsx
index e6ee86d49..5775cef15 100644
--- a/src/lib/components/table/proposals/ResolvedHeight.tsx
+++ b/src/lib/components/table/proposals/ResolvedHeight.tsx
@@ -13,14 +13,25 @@ export const ResolvedHeight = ({
   isDepositOrVoting: boolean;
   amptrackSection?: string;
 }) => {
-  if (isDepositOrVoting) return <Text color="text.dark">Pending</Text>;
-  if (!resolvedHeight) return <Text color="text.dark">N/A</Text>;
+  if (isDepositOrVoting)
+    return (
+      <Text color="text.dark" variant="body2">
+        Pending
+      </Text>
+    );
+  if (!resolvedHeight)
+    return (
+      <Text color="text.dark" variant="body2">
+        N/A
+      </Text>
+    );
   return (
     <ExplorerLink
       type="block_height"
       value={resolvedHeight.toString()}
       showCopyOnHover
       ampCopierSection={amptrackSection}
+      textVariant="body2"
     />
   );
 };
diff --git a/src/lib/components/table/proposals/VotingEndTime.tsx b/src/lib/components/table/proposals/VotingEndTime.tsx
index 401b25e97..94aa4583b 100644
--- a/src/lib/components/table/proposals/VotingEndTime.tsx
+++ b/src/lib/components/table/proposals/VotingEndTime.tsx
@@ -34,14 +34,16 @@ export const VotingEndTime = ({
       onClick={(e) => e.stopPropagation()}
       cursor="initial"
     >
-      <p>{isDepositPeriod ? "Voting not started" : formatUTC(votingEndTime)}</p>
-      <p>
+      <Text variant={{ base: "body3", md: "body2" }}>
+        {isDepositPeriod ? "Voting not started" : formatUTC(votingEndTime)}
+      </Text>
+      <Text variant={{ base: "body3", md: "body2" }}>
         (
         {isDepositPeriod
           ? `Deposit Period ends ${dateFromNow(depositEndTime)}`
           : dateFromNow(votingEndTime)}
         )
-      </p>
+      </Text>
     </Flex>
   );
 };
diff --git a/src/lib/components/table/transactions/RelationChip.tsx b/src/lib/components/table/transactions/RelationChip.tsx
index 4b28333fb..27b44a6ae 100644
--- a/src/lib/components/table/transactions/RelationChip.tsx
+++ b/src/lib/components/table/transactions/RelationChip.tsx
@@ -1,6 +1,7 @@
 import { Tag } from "@chakra-ui/react";
 import type { CSSProperties } from "react";
 
+import { CURR_THEME } from "env";
 import { Tooltip } from "lib/components/Tooltip";
 
 interface RelationChipProps {
@@ -12,12 +13,19 @@ export const RelationChip = ({ isSigner }: RelationChipProps) => {
     ? "‘Signer’ or ‘The signing address’ is the account address that signs the transaction."
     : "‘Related' or ‘The related address’ is related to the transaction, even if not signing it; e.g., as a recipient address.";
   const tagBgColor: CSSProperties["backgroundColor"] = isSigner
-    ? "primary.dark"
-    : "gray.700";
+    ? CURR_THEME.tag.signer.bg
+    : CURR_THEME.tag.related.bg;
 
   return (
     <Tooltip label={message}>
-      <Tag bgColor={tagBgColor}>{isSigner ? "Signer" : "Related"}</Tag>
+      <Tag
+        bgColor={tagBgColor}
+        color={
+          isSigner ? CURR_THEME.tag.signer.color : CURR_THEME.tag.related.color
+        }
+      >
+        {isSigner ? "Signer" : "Related"}
+      </Tag>
     </Tooltip>
   );
 };
diff --git a/src/lib/components/table/transactions/TransactionsTableRow.tsx b/src/lib/components/table/transactions/TransactionsTableRow.tsx
index fa3d714dd..39f2773fe 100644
--- a/src/lib/components/table/transactions/TransactionsTableRow.tsx
+++ b/src/lib/components/table/transactions/TransactionsTableRow.tsx
@@ -79,7 +79,7 @@ export const TransactionsTableRow = ({
           )}
         </TableRow>
         <TableRow>
-          <Flex gap={1} flexWrap="wrap">
+          <Flex gap={1} flexWrap="wrap" align="center">
             <RenderActionMessages transaction={transaction} />
             {transaction.isIbc && (
               <Tag variant="accent-dark" size="sm">
diff --git a/src/lib/components/tx/TxReceiptRender.tsx b/src/lib/components/tx/TxReceiptRender.tsx
index 9514c0680..03dd7868d 100644
--- a/src/lib/components/tx/TxReceiptRender.tsx
+++ b/src/lib/components/tx/TxReceiptRender.tsx
@@ -46,8 +46,10 @@ const variantStyle: Record<
 };
 
 const ReceiptRow = ({ title, value, html }: TxReceipt) => (
-  <Flex fontSize="14px" w="full">
-    <Text variant="body2">{title}</Text>
+  <Flex fontSize="14px" w="full" direction={{ base: "column", md: "row" }}>
+    <Text variant="body2" mb={{ base: 1, md: 0 }}>
+      {title}
+    </Text>
     {html || (
       <Text
         variant="body2"
diff --git a/src/lib/config/terra2testnet.ts b/src/lib/config/terra2testnet.ts
deleted file mode 100644
index 1b55c860e..000000000
--- a/src/lib/config/terra2testnet.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import type { Chain, AssetList } from "@chain-registry/types";
-
-export const terra2testnet: Chain = {
-  $schema: "../../chain.schema.json",
-  chain_name: "terra2testnet",
-  status: "live",
-  network_type: "testnet",
-  pretty_name: "Terra Testnet",
-  chain_id: "pisco-1",
-  bech32_prefix: "terra",
-  daemon_name: "terrad",
-  node_home: "$HOME/.terrad",
-  slip44: 330,
-  fees: {
-    fee_tokens: [
-      {
-        denom: "uluna",
-        fixed_min_gas_price: 0,
-        low_gas_price: 0.15,
-        average_gas_price: 0.15,
-        high_gas_price: 0.15,
-      },
-    ],
-  },
-  staking: {
-    staking_tokens: [
-      {
-        denom: "uluna",
-      },
-    ],
-  },
-  codebase: {
-    git_repo: "https://github.com/terra-money/core",
-    recommended_version: "v2.2.0",
-    compatible_versions: ["v2.2.0"],
-    cosmos_sdk_version: "0.45.10",
-    tendermint_version: "0.34.22",
-    cosmwasm_version: "0.27",
-    cosmwasm_enabled: true,
-  },
-  apis: {
-    rpc: [
-      {
-        address: "https://terra-testnet-rpc.polkachu.com/",
-      },
-    ],
-    rest: [
-      {
-        address: "https://pisco-lcd.terra.dev/",
-      },
-    ],
-    grpc: [],
-  },
-  logo_URIs: {
-    png: "https://raw.githubusercontent.com/cosmos/chain-registry/master/terra2/images/luna.png",
-  },
-  keywords: ["testnet"],
-};
-
-export const terra2testnetAssets: AssetList = {
-  $schema: "../../assetlist.schema.json",
-  chain_name: "terra2testnet",
-  assets: [
-    {
-      description: "The native token of Terra",
-      denom_units: [
-        {
-          denom: "uluna",
-          exponent: 0,
-          aliases: [],
-        },
-        {
-          denom: "luna",
-          exponent: 6,
-          aliases: [],
-        },
-      ],
-      base: "uluna",
-      name: "Luna",
-      display: "luna",
-      symbol: "LUNA",
-      logo_URIs: {
-        png: "https://raw.githubusercontent.com/cosmos/chain-registry/master/terra2/images/luna.png",
-      },
-      coingecko_id: "terra",
-      keywords: ["staking"],
-    },
-  ],
-};
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index 6583b47c6..437488cf3 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -13,6 +13,8 @@ const documents = {
     types.GetBlockDetailsByHeightDocument,
   "\n  query getLatestBlockInfo {\n    blocks(limit: 1, order_by: { height: desc }) {\n      height\n      timestamp\n    }\n  }\n":
     types.GetLatestBlockInfoDocument,
+  "\n  query getBlockTime {\n    hundred: blocks(order_by: { height: desc }, offset: 100, limit: 1) {\n      height\n      timestamp\n    }\n    latest: blocks(order_by: { height: desc }, limit: 1) {\n      height\n      timestamp\n    }\n  }\n":
+    types.GetBlockTimeDocument,
   "\n  query getCodeListQuery {\n    codes(limit: 100, offset: 0, order_by: { id: desc }) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n":
     types.GetCodeListQueryDocument,
   "\n  query getCodeListByUserQuery($walletAddr: String!) {\n    codes(\n      where: { account: { address: { _eq: $walletAddr } } }\n      limit: 100\n      offset: 0\n      order_by: { id: desc }\n    ) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n":
@@ -110,6 +112,9 @@ export function graphql(
 export function graphql(
   source: "\n  query getLatestBlockInfo {\n    blocks(limit: 1, order_by: { height: desc }) {\n      height\n      timestamp\n    }\n  }\n"
 ): typeof documents["\n  query getLatestBlockInfo {\n    blocks(limit: 1, order_by: { height: desc }) {\n      height\n      timestamp\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getBlockTime {\n    hundred: blocks(order_by: { height: desc }, offset: 100, limit: 1) {\n      height\n      timestamp\n    }\n    latest: blocks(order_by: { height: desc }, limit: 1) {\n      height\n      timestamp\n    }\n  }\n"
+): typeof documents["\n  query getBlockTime {\n    hundred: blocks(order_by: { height: desc }, offset: 100, limit: 1) {\n      height\n      timestamp\n    }\n    latest: blocks(order_by: { height: desc }, limit: 1) {\n      height\n      timestamp\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getCodeListQuery {\n    codes(limit: 100, offset: 0, order_by: { id: desc }) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"
 ): typeof documents["\n  query getCodeListQuery {\n    codes(limit: 100, offset: 0, order_by: { id: desc }) {\n      id\n      contracts_aggregate {\n        aggregate {\n          count\n        }\n      }\n      account {\n        uploader: address\n      }\n      access_config_permission\n      access_config_addresses\n      cw2_contract\n      cw2_version\n    }\n  }\n"];
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index c3f481fa2..cfaf98e97 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -11919,6 +11919,14 @@ export type GetLatestBlockInfoQuery = {
   blocks: Array<{ __typename?: "blocks"; height: number; timestamp: any }>;
 };
 
+export type GetBlockTimeQueryVariables = Exact<{ [key: string]: never }>;
+
+export type GetBlockTimeQuery = {
+  __typename?: "query_root";
+  hundred: Array<{ __typename?: "blocks"; height: number; timestamp: any }>;
+  latest: Array<{ __typename?: "blocks"; height: number; timestamp: any }>;
+};
+
 export type GetCodeListQueryQueryVariables = Exact<{ [key: string]: never }>;
 
 export type GetCodeListQueryQuery = {
@@ -13060,6 +13068,92 @@ export const GetLatestBlockInfoDocument = {
   GetLatestBlockInfoQuery,
   GetLatestBlockInfoQueryVariables
 >;
+export const GetBlockTimeDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getBlockTime" },
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            alias: { kind: "Name", value: "hundred" },
+            name: { kind: "Name", value: "blocks" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "order_by" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "height" },
+                      value: { kind: "EnumValue", value: "desc" },
+                    },
+                  ],
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "offset" },
+                value: { kind: "IntValue", value: "100" },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "limit" },
+                value: { kind: "IntValue", value: "1" },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "height" } },
+                { kind: "Field", name: { kind: "Name", value: "timestamp" } },
+              ],
+            },
+          },
+          {
+            kind: "Field",
+            alias: { kind: "Name", value: "latest" },
+            name: { kind: "Name", value: "blocks" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "order_by" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "height" },
+                      value: { kind: "EnumValue", value: "desc" },
+                    },
+                  ],
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "limit" },
+                value: { kind: "IntValue", value: "1" },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "height" } },
+                { kind: "Field", name: { kind: "Name", value: "timestamp" } },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<GetBlockTimeQuery, GetBlockTimeQueryVariables>;
 export const GetCodeListQueryDocument = {
   kind: "Document",
   definitions: [
diff --git a/src/lib/layout/Footer.tsx b/src/lib/layout/Footer.tsx
index dc964c0e7..1874e4202 100644
--- a/src/lib/layout/Footer.tsx
+++ b/src/lib/layout/Footer.tsx
@@ -132,6 +132,7 @@ const IconLink = ({
   >
     <Flex
       gap={1}
+      mr={{ base: 6, md: 0 }}
       align="center"
       _hover={{
         "& svg": {
@@ -166,37 +167,54 @@ const Footer = () => {
   return isThemed ? (
     <Flex
       as="footer"
-      align="end"
+      direction={{ base: "column", md: "row" }}
+      align={{ base: "center", md: "end" }}
       justifyContent="space-between"
-      px={12}
+      px={{ base: 6, md: 12 }}
       py={6}
-      mx={1}
+      mx={{ md: 1 }}
       background="background.overlay"
     >
-      <Flex direction="column" gap={2}>
-        <Flex direction="row" gap={1} align="center">
+      <Flex direction="column" gap={2} align={{ base: "center", md: "start" }}>
+        <Flex direction={{ base: "column", md: "row" }} gap={1} align="center">
           <Link
             href={CURR_THEME.socialMedia?.website ?? ""}
             target="_blank"
             rel="noopener noreferrer"
           >
-            <Image src={isThemed.logo} h={8} mr={2} />
+            <Image src={isThemed.logo} h={{ base: 6, md: 8 }} mr={2} />
           </Link>
-          <SocialMenuRender isThemed iconSize={5} />
+          <Flex mt={{ base: 2, md: 0 }}>
+            <SocialMenuRender isThemed iconSize={5} />
+          </Flex>
         </Flex>
-        <Text variant="body3" color="gray.400">
+        <Text
+          variant="body3"
+          color="gray.400"
+          textAlign={{ base: "center", md: "left" }}
+        >
           {isThemed.description}
         </Text>
       </Flex>
-      <Flex align="end" justifyContent="flex-end" gap={1}>
-        <IconLink
-          href="https://celat.one/"
-          icon="celatone"
-          text1="Powered by"
-          text2="Celatone"
-        />
-        <AllesFeedback />
-        <SocialMenuRender iconSize={4} />
+      <Flex
+        direction={{ base: "column", md: "row" }}
+        align={{ base: "center", md: "end" }}
+        justifyContent={{ base: "center", md: "flex-end" }}
+        gap={1}
+        mt={{ base: 6, md: 0 }}
+      >
+        <Flex gap={1}>
+          <IconLink
+            href="https://celat.one/"
+            icon="celatone"
+            text1="Powered by"
+            text2="Celatone"
+          />
+        </Flex>
+        <Flex gap={1}>
+          <AllesFeedback />
+          <SocialMenuRender iconSize={4} />
+        </Flex>
       </Flex>
     </Flex>
   ) : (
@@ -207,8 +225,9 @@ const Footer = () => {
       px={12}
       py={4}
       mx={1}
+      direction={{ base: "column", md: "row" }}
     >
-      <Flex direction="row" gap={1} align="center">
+      <Flex direction="row" gap={1} align="center" mb={{ base: 2, md: 0 }}>
         <SocialMenuRender iconSize={5} />
         <AllesFeedback />
       </Flex>
diff --git a/src/lib/layout/Header.tsx b/src/lib/layout/Header.tsx
index 8c7cba852..3087108e9 100644
--- a/src/lib/layout/Header.tsx
+++ b/src/lib/layout/Header.tsx
@@ -12,7 +12,6 @@ import { CHAIN_CONFIGS } from "config";
 import { CURR_THEME } from "env";
 import { useCelatoneApp, useSelectChain } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
-import { FaucetBtn } from "lib/components/button";
 import { CustomIcon } from "lib/components/icon";
 import { WalletSection } from "lib/components/Wallet";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
@@ -22,7 +21,6 @@ import Searchbar from "./Searchbar";
 const Header = () => {
   const { availableChainIds, currentChainId } = useCelatoneApp();
   const selectChain = useSelectChain();
-
   return (
     <Flex
       as="header"
@@ -48,7 +46,7 @@ const Header = () => {
       </AppLink>
       <Searchbar />
       <Flex gap={4}>
-        <FaucetBtn />
+        {/* <FaucetBtn /> */}
         <Menu onOpen={() => AmpTrack(AmpEvent.USE_SELECT_NETWORK)}>
           <MenuButton
             pl={4}
diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx
index 38f67d2ef..97892f78b 100644
--- a/src/lib/layout/Searchbar.tsx
+++ b/src/lib/layout/Searchbar.tsx
@@ -9,11 +9,24 @@ import {
   useOutsideClick,
   Spinner,
   chakra,
+  useDisclosure,
+  Button,
+  Drawer,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerBody,
+  IconButton,
+  Flex,
 } from "@chakra-ui/react";
 import { useCallback, useRef, useState } from "react";
 import type { ChangeEvent, KeyboardEvent } from "react";
 
-import { useCelatoneApp, useInternalNavigate } from "lib/app-provider";
+import { CURR_THEME } from "env";
+import {
+  useCelatoneApp,
+  useInternalNavigate,
+  useMobile,
+} from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { AmpTrackUseMainSearch } from "lib/services/amplitude";
 import type { SearchResultType } from "lib/services/searchService";
@@ -157,6 +170,7 @@ const getPlaceholder = (isWasm: boolean) => {
   return `Search by Wallet Address / Tx Hash / Block ${wasmText}`;
 };
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 const Searchbar = () => {
   const [keyword, setKeyword] = useState("");
   const [displayResults, setDisplayResults] = useState(false);
@@ -228,8 +242,90 @@ const Searchbar = () => {
     ref: boxRef,
     handler: () => setDisplayResults(false),
   });
-
-  return (
+  const isMobile = useMobile();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return isMobile ? (
+    <>
+      <Button variant="outline-gray" size="sm" onClick={() => onOpen()}>
+        <CustomIcon name="search" boxSize={3} />
+      </Button>
+      <Drawer isOpen={isOpen} onClose={onClose} placement="top">
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerBody overflowY="scroll" p={2} m={2}>
+            <FormControl ref={boxRef}>
+              <InputGroup mb={4} alignItems="center">
+                <IconButton
+                  fontSize="24px"
+                  variant="gray"
+                  aria-label="back"
+                  onClick={() => onClose()}
+                  color="gray.600"
+                  icon={<CustomIcon name="chevron-left" />}
+                />
+                <Input
+                  value={keyword}
+                  h="36px"
+                  onChange={handleSearchChange}
+                  placeholder="Type your keyword ..."
+                  focusBorderColor="secondary.main"
+                  onFocus={() => setDisplayResults(keyword.length > 0)}
+                  onKeyDown={handleOnKeyEnter}
+                  autoComplete="off"
+                />
+                <InputRightElement pointerEvents="none" h="full">
+                  <CustomIcon name="search" color="gray.600" />
+                </InputRightElement>
+              </InputGroup>
+              {displayResults ? (
+                <List borderRadius="8px" bg="gray.900" w="full">
+                  {isLoading || isTyping ? (
+                    <StyledListItem
+                      display="flex"
+                      alignItems="center"
+                      gap={2}
+                      p={4}
+                    >
+                      <Spinner color="gray.600" size="sm" />
+                      <Text
+                        color="text.disabled"
+                        variant="body2"
+                        fontWeight={500}
+                      >
+                        Looking for results ...
+                      </Text>
+                    </StyledListItem>
+                  ) : (
+                    <ResultRender
+                      cursor={cursor}
+                      setCursor={setCursor}
+                      results={results}
+                      keyword={keyword}
+                      handleSelectResult={handleSelectResult}
+                    />
+                  )}
+                </List>
+              ) : (
+                <Flex
+                  bg="background.main"
+                  p={5}
+                  justify="center"
+                  borderRadius={CURR_THEME.borderRadius.default}
+                >
+                  <Text variant="body2" color="text.dark">
+                    Your result will display here
+                  </Text>
+                </Flex>
+              )}
+            </FormControl>
+            <Text variant="body3" color="text.dark" textAlign="center" mt={2}>
+              {getPlaceholder(isWasm)}
+            </Text>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  ) : (
     <FormControl ref={boxRef}>
       <InputGroup>
         <Input
diff --git a/src/lib/layout/SubHeader.tsx b/src/lib/layout/SubHeader.tsx
index fb133ae63..82756934b 100644
--- a/src/lib/layout/SubHeader.tsx
+++ b/src/lib/layout/SubHeader.tsx
@@ -16,6 +16,7 @@ const SubHeader = () => {
     { name: "Overview", slug: "/", icon: "home" },
     { name: "Transactions", slug: "/txs", icon: "file" },
     { name: "Blocks", slug: "/blocks", icon: "block" },
+    { name: "Proposals", slug: "/proposals", icon: "proposal" },
     // { name: "Validators", slug: "/validators", icon: "admin" },
   ];
   const { address } = useCurrentChain();
diff --git a/src/lib/layout/index.tsx b/src/lib/layout/index.tsx
index c6b604479..e18388e95 100644
--- a/src/lib/layout/index.tsx
+++ b/src/lib/layout/index.tsx
@@ -1,14 +1,15 @@
 import { Grid, GridItem } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import type { ReactNode } from "react";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 
-import { useMobile, useWasmConfig } from "lib/app-provider";
+import { useCelatoneApp, useMobile, useWasmConfig } from "lib/app-provider";
 import { useLocalStorage } from "lib/hooks/useLocalStorage";
 import { scrollToTop } from "lib/utils";
 
 import Footer from "./Footer";
 import Header from "./Header";
+import MobileHeader from "./mobile/MobileHeader";
 import Navbar from "./navbar";
 import SubHeader from "./SubHeader";
 
@@ -17,26 +18,68 @@ type LayoutProps = {
 };
 
 const Layout = ({ children }: LayoutProps) => {
+  const {
+    chainConfig: { hasSubHeader },
+  } = useCelatoneApp();
   const router = useRouter();
   const isMobile = useMobile();
   const wasm = useWasmConfig({ shouldRedirect: false });
 
   const [isExpand, setIsExpand] = useLocalStorage("navbar", !isMobile);
+  const defaultRow = "70px 48px 1fr";
+  const mode = useMemo(() => {
+    if (hasSubHeader) {
+      if (isMobile)
+        return {
+          templateAreas: `"header""main"`,
+          templateRows: "60px 1fr",
+          templateCols: "1fr",
+          header: <MobileHeader />,
+          subHeader: undefined,
+        };
 
-  const lightMode = {
-    templateAreas: `"header""nav""main"`,
-    templateRows: "70px 48px 1fr",
-    templateCols: "1fr",
-    navBar: <SubHeader />,
-  };
-  const fullMode = {
-    templateAreas: `"header header""nav main"`,
-    templateRows: "70px 1fr",
-    templateCols: isExpand ? "224px 1fr" : "48px 1fr",
-    navBar: <Navbar isExpand={isExpand} setIsExpand={setIsExpand} />,
-  };
+      if (wasm.enabled)
+        return {
+          templateAreas: `"header header""subheader subheader""nav main"`,
+          templateRows: defaultRow,
+          templateCols: isExpand ? "224px 1fr" : "48px 1fr",
+          header: <Header />,
+          subHeader: <SubHeader />,
+        };
 
-  const mode = wasm.enabled ? fullMode : lightMode;
+      return {
+        templateAreas: `"header""nav""main"`,
+        templateRows: defaultRow,
+        templateCols: "1fr",
+        navBar: <SubHeader />,
+      };
+    }
+
+    if (isMobile)
+      return {
+        templateAreas: `"header""main"`,
+        templateRows: "60px 1fr",
+        templateCols: "1fr",
+        header: <MobileHeader />,
+        subHeader: undefined,
+      };
+
+    if (wasm.enabled)
+      return {
+        templateAreas: `"header header""nav main"`,
+        templateRows: "70px 1fr",
+        templateCols: isExpand ? "224px 1fr" : "48px 1fr",
+        header: <Header />,
+        subHeader: undefined,
+      };
+
+    return {
+      templateAreas: `"header""nav""main"`,
+      templateRows: defaultRow,
+      templateCols: "1fr",
+      navBar: <SubHeader />,
+    };
+  }, [isMobile, wasm.enabled, isExpand, hasSubHeader]);
 
   useEffect(() => {
     scrollToTop();
@@ -49,15 +92,30 @@ const Layout = ({ children }: LayoutProps) => {
       gridTemplateColumns={mode.templateCols}
       h="100vh"
       overflowX="hidden"
+      overflowY="scroll"
       bg="background.main"
     >
       <GridItem bg="gray.900" area="header" mb={1}>
-        <Header />
-      </GridItem>
-      <GridItem bg="gray.900" area="nav" overflowY="auto">
-        {mode.navBar}
+        {mode.header}
       </GridItem>
-      <GridItem area="main" overflowY="auto" id="content">
+      {!isMobile && (
+        <>
+          <GridItem
+            bg={{ base: "background.main", md: "gray.900" }}
+            area="subheader"
+            mb="1"
+            overflowY={isMobile ? "visible" : "auto"}
+            py={{ base: 2, md: 0 }}
+            px={{ base: 4, md: 0 }}
+          >
+            {mode.subHeader}
+          </GridItem>
+          <GridItem bg={{ base: "background.main", md: "gray.900" }} area="nav">
+            <Navbar isExpand={isExpand} setIsExpand={setIsExpand} />
+          </GridItem>
+        </>
+      )}
+      <GridItem area="main" overflowX="hidden" id="content">
         <div style={{ minHeight: `calc(100vh - 129px)` }}>{children}</div>
         <Footer />
       </GridItem>
diff --git a/src/lib/layout/mobile/MobileHeader.tsx b/src/lib/layout/mobile/MobileHeader.tsx
new file mode 100644
index 000000000..af5fadcab
--- /dev/null
+++ b/src/lib/layout/mobile/MobileHeader.tsx
@@ -0,0 +1,41 @@
+import { Flex, Image } from "@chakra-ui/react";
+
+import Searchbar from "../Searchbar";
+import { CURR_THEME } from "env";
+import { AppLink } from "lib/components/AppLink";
+
+import { NavDrawer } from "./NavDrawer";
+
+const Header = () => {
+  return (
+    <Flex
+      as="header"
+      width="100vw"
+      height="full"
+      align="center"
+      justifyContent="space-between"
+      px={6}
+      mb={1}
+      gap={6}
+    >
+      <AppLink href="/">
+        <Image
+          src={CURR_THEME.branding.logo}
+          alt="Celatone"
+          minWidth="128px"
+          width="128px"
+          maxWidth="128px"
+          mr={8}
+          transition="all 0.25s ease-in-out"
+          _hover={{ cursor: "pointer", opacity: 0.85 }}
+        />
+      </AppLink>
+      <Flex gap={2}>
+        <Searchbar />
+        <NavDrawer />
+      </Flex>
+    </Flex>
+  );
+};
+
+export default Header;
diff --git a/src/lib/layout/mobile/NavDrawer.tsx b/src/lib/layout/mobile/NavDrawer.tsx
new file mode 100644
index 000000000..361a45d89
--- /dev/null
+++ b/src/lib/layout/mobile/NavDrawer.tsx
@@ -0,0 +1,264 @@
+import {
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  Text,
+  DrawerOverlay,
+  useDisclosure,
+  Image,
+  Flex,
+  Box,
+  DrawerHeader,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  IconButton,
+} from "@chakra-ui/react";
+
+import type { MenuInfo } from "../navbar/type";
+import { CHAIN_CONFIGS } from "config";
+import {
+  useCelatoneApp,
+  usePublicProjectConfig,
+  useSelectChain,
+} from "lib/app-provider";
+import { AppLink } from "lib/components/AppLink";
+import { CustomIcon } from "lib/components/icon";
+import { useIsCurrentPage } from "lib/hooks";
+import { usePublicProjectStore } from "lib/providers/store";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+
+export const NavDrawer = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { currentChainId, availableChainIds } = useCelatoneApp();
+  const isCurrentPage = useIsCurrentPage();
+  const { getSavedPublicProjects } = usePublicProjectStore();
+  const publicProject = usePublicProjectConfig({ shouldRedirect: false });
+  const selectChain = useSelectChain();
+  const mobileMenu: MenuInfo[] = [
+    {
+      category: "Overview",
+      submenu: [
+        { name: "Overview", slug: "/", icon: "home" },
+        {
+          name: "Transactions",
+          slug: "/txs",
+          icon: "file",
+        },
+        {
+          name: "Blocks",
+          slug: "/blocks",
+          icon: "block",
+        },
+        {
+          name: "Recent Codes",
+          slug: "/codes",
+          icon: "code",
+        },
+        {
+          name: "Recent Contracts",
+          slug: "/contracts",
+          icon: "contract-address",
+        },
+        {
+          name: "Query",
+          slug: "/query",
+          icon: "query",
+        },
+      ],
+    },
+  ];
+
+  if (publicProject.enabled) {
+    mobileMenu.push({
+      category: "Public Projects",
+      submenu: [
+        ...getSavedPublicProjects().map((list) => ({
+          name: list.name,
+          slug: `/projects/${list.slug}`,
+          logo: list.logo,
+        })),
+        {
+          name: "View All Projects",
+          slug: "/projects",
+          icon: "public-project",
+        },
+      ],
+    });
+  }
+
+  return (
+    <>
+      <Button variant="outline-gray" size="sm" gap={1} onClick={() => onOpen()}>
+        <CustomIcon name="menu" boxSize={3} />
+        Menu
+      </Button>
+      <Drawer isOpen={isOpen} onClose={onClose} placement="right">
+        <DrawerOverlay />
+        <DrawerContent w="90%">
+          <DrawerHeader alignItems="center" px={4}>
+            <Flex align="center" justify="space-between" w="full">
+              <Menu onOpen={() => AmpTrack(AmpEvent.USE_SELECT_NETWORK)}>
+                <MenuButton
+                  pl={4}
+                  pr={2}
+                  py={1}
+                  borderRadius="8px"
+                  borderWidth="1px"
+                  borderColor="gray.600"
+                  _hover={{ bg: "gray.700" }}
+                  transition="all .25s ease-in-out"
+                  w="220px"
+                >
+                  <Flex
+                    alignItems="center"
+                    justifyContent="space-between"
+                    display="flex"
+                  >
+                    <Text
+                      textOverflow="ellipsis"
+                      variant="body2"
+                      overflow="hidden"
+                      whiteSpace="nowrap"
+                      maxW="220px"
+                    >
+                      {currentChainId}
+                    </Text>
+                    <CustomIcon name="chevron-down" color="gray.600" />
+                  </Flex>
+                </MenuButton>
+                <MenuList zIndex="dropdown">
+                  {availableChainIds.map((chainId) => {
+                    const noConfig = !(chainId in CHAIN_CONFIGS);
+                    return (
+                      <MenuItem
+                        key={chainId}
+                        onClick={() => {
+                          selectChain(chainId);
+                        }}
+                        flexDirection="column"
+                        alignItems="flex-start"
+                        _hover={{
+                          backgroundColor: "gray.800",
+                        }}
+                        transition="all .25s ease-in-out"
+                        isDisabled={noConfig}
+                      >
+                        <Flex justify="space-between" align="center" w="full">
+                          <Flex direction="column">
+                            <Text variant="body2">
+                              {CHAIN_CONFIGS[chainId]?.prettyName || chainId}
+                            </Text>
+                            <Text color="text.dark" variant="body3">
+                              {chainId}
+                            </Text>
+                          </Flex>
+                          {chainId === currentChainId && (
+                            <CustomIcon
+                              name="check"
+                              boxSize={3}
+                              color="gray.600"
+                            />
+                          )}
+                        </Flex>
+                      </MenuItem>
+                    );
+                  })}
+                </MenuList>
+              </Menu>
+              <IconButton
+                variant="gray"
+                aria-label="close"
+                onClick={() => onClose()}
+                color="gray.600"
+                icon={<CustomIcon name="close" />}
+              />
+            </Flex>
+          </DrawerHeader>
+          <DrawerBody overflowY="scroll" px={4} pb={4}>
+            <Box overflowY="auto">
+              {mobileMenu.map((item) => (
+                <Box
+                  pb={4}
+                  mb={4}
+                  key={item.category}
+                  borderBottom="1px solid"
+                  borderColor="gray.700"
+                  sx={{
+                    "&:last-of-type": {
+                      borderBottom: "none",
+                      paddingBottom: "0px",
+                      marginBottom: "0px",
+                    },
+                  }}
+                >
+                  <Flex justifyContent="space-between" alignItems="center">
+                    <Text py={2} variant="body3" fontWeight={700}>
+                      {item.category}
+                    </Text>
+                  </Flex>
+                  {item.submenu.map((submenu) => (
+                    <AppLink
+                      href={submenu.slug}
+                      key={submenu.slug}
+                      onClick={() => {
+                        AmpTrack(AmpEvent.USE_SIDEBAR);
+                        onClose();
+                      }}
+                    >
+                      <Flex
+                        gap={2}
+                        p={2}
+                        cursor="pointer"
+                        _hover={{ bg: "gray.700", borderRadius: "8px" }}
+                        my="1px"
+                        transition="all .25s ease-in-out"
+                        alignItems="center"
+                        position="relative"
+                        bgColor={
+                          isCurrentPage(submenu.slug)
+                            ? "gray.800"
+                            : "transparent"
+                        }
+                        borderRadius={
+                          isCurrentPage(submenu.slug) ? "8px" : "0px"
+                        }
+                      >
+                        <Flex
+                          opacity={isCurrentPage(submenu.slug) ? 1 : 0}
+                          width="3px"
+                          height="20px"
+                          bgColor="primary.light"
+                          position="absolute"
+                          top="10px"
+                          borderRadius="2px"
+                          left="0px"
+                        />
+                        {submenu.icon && (
+                          <CustomIcon name={submenu.icon} color="gray.600" />
+                        )}
+                        {submenu.logo && (
+                          <Image
+                            src={submenu.logo}
+                            borderRadius="full"
+                            alt={submenu.slug}
+                            boxSize={5}
+                          />
+                        )}
+                        <Text variant="body2" className="ellipsis">
+                          {submenu.name}
+                        </Text>
+                      </Flex>
+                    </AppLink>
+                  ))}
+                </Box>
+              ))}
+            </Box>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};
diff --git a/src/lib/layout/navbar/Collapse.tsx b/src/lib/layout/navbar/Collapse.tsx
index 49197ce4a..a10475df4 100644
--- a/src/lib/layout/navbar/Collapse.tsx
+++ b/src/lib/layout/navbar/Collapse.tsx
@@ -32,7 +32,7 @@ export const CollapseNavMenu = ({
           }}
         >
           <Flex justifyContent="space-between" alignItems="center">
-            {!isMobile && item.category === "Overview" && (
+            {!isMobile && item.category === "Your Account" && (
               <Tooltip label="Expand" placement="right">
                 <IconButton
                   aria-label="overview"
diff --git a/src/lib/layout/navbar/Expand.tsx b/src/lib/layout/navbar/Expand.tsx
index d2009e2dc..0e1267405 100644
--- a/src/lib/layout/navbar/Expand.tsx
+++ b/src/lib/layout/navbar/Expand.tsx
@@ -32,7 +32,7 @@ export const ExpandNavMenu = ({
           <Text py={2} variant="body3" fontWeight={700}>
             {item.category}
           </Text>
-          {item.category === "Overview" && (
+          {item.category === "Your Account" && (
             <Button
               variant="ghost-accent"
               size="xs"
diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx
index c2d883165..8bc65cf82 100644
--- a/src/lib/layout/navbar/index.tsx
+++ b/src/lib/layout/navbar/index.tsx
@@ -1,7 +1,11 @@
 import { Flex } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 
-import { usePoolConfig, usePublicProjectConfig } from "lib/app-provider";
+import {
+  usePoolConfig,
+  useCelatoneApp,
+  usePublicProjectConfig,
+} from "lib/app-provider";
 import { INSTANTIATED_LIST_NAME, SAVED_LIST_NAME } from "lib/data";
 import { useIsCurrentPage } from "lib/hooks";
 import { useContractStore, usePublicProjectStore } from "lib/providers/store";
@@ -23,22 +27,30 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
   const { getSavedPublicProjects } = usePublicProjectStore();
   const publicProject = usePublicProjectConfig({ shouldRedirect: false });
   const isCurrentPage = useIsCurrentPage();
-
+  const {
+    chainConfig: { hasSubHeader },
+  } = useCelatoneApp();
   const navMenu: MenuInfo[] = [
     {
-      category: "Overview",
+      category: hasSubHeader ? "Your Account" : "Overview",
       submenu: [
-        { name: "Overview", slug: "/", icon: "home" },
+        hasSubHeader
+          ? { name: "Developer Home", slug: "/dev-home", icon: "home" }
+          : { name: "Overview", slug: "/", icon: "home" },
         {
           name: "Past Transactions",
           slug: "/past-txs",
           icon: "history",
         },
-        {
-          name: "Proposals",
-          slug: "/proposals",
-          icon: "proposal",
-        },
+        ...(!hasSubHeader
+          ? [
+              {
+                name: "Proposals",
+                slug: "/proposals",
+                icon: "proposal" as const,
+              },
+            ]
+          : []),
         ...(poolConfig.enabled
           ? ([
               {
diff --git a/src/lib/pages/account-details/components/AccountTop.tsx b/src/lib/pages/account-details/components/AccountTop.tsx
new file mode 100644
index 000000000..c2550dfb3
--- /dev/null
+++ b/src/lib/pages/account-details/components/AccountTop.tsx
@@ -0,0 +1,91 @@
+import { Flex, Image, Heading, Text } from "@chakra-ui/react";
+
+import { Breadcrumb } from "lib/components/Breadcrumb";
+import { CopyLink } from "lib/components/CopyLink";
+import { CustomIcon } from "lib/components/icon";
+import type { HumanAddr, PublicDetail, PublicInfo } from "lib/types";
+import { truncate } from "lib/utils";
+
+interface AccountTopProps {
+  accountAddress: HumanAddr;
+  publicDetail: PublicDetail | undefined;
+  displayName: string;
+  publicInfo: PublicInfo | undefined;
+}
+export const AccountTop = ({
+  accountAddress,
+  publicDetail,
+  displayName,
+  publicInfo,
+}: AccountTopProps) => {
+  return (
+    <>
+      <Flex direction="column" gap={1} mt={2} mb={6}>
+        {publicDetail && (
+          <Breadcrumb
+            items={[
+              { text: "Public Projects", href: "/projects" },
+              {
+                text: publicDetail?.name,
+                href: `/projects/${publicInfo?.slug}`,
+              },
+              { text: truncate(accountAddress) },
+            ]}
+            mb={6}
+          />
+        )}
+        <Flex gap={1} minH="36px" align="center">
+          <CustomIcon name="wallet" boxSize={5} color="secondary.main" />
+          {publicDetail?.logo && (
+            <Image
+              src={publicDetail.logo}
+              borderRadius="full"
+              alt={publicDetail.name}
+              width={7}
+              height={7}
+            />
+          )}
+          <Heading as="h5" variant={{ base: "h6", md: "h5" }}>
+            {displayName}
+          </Heading>
+        </Flex>
+        <Flex
+          gap={{ base: 0, md: 2 }}
+          mt={{ base: 1, md: 0 }}
+          direction={{ base: "column", md: "row" }}
+        >
+          <Text fontWeight={500} color="text.dark" variant="body2">
+            Wallet Address:
+          </Text>
+          <CopyLink
+            value={accountAddress}
+            amptrackSection="account_top"
+            type="user_address"
+          />
+        </Flex>
+      </Flex>
+      {publicInfo?.description && (
+        <Flex
+          direction="column"
+          bg="gray.900"
+          maxW="100%"
+          borderRadius="8px"
+          py={4}
+          px={4}
+          my={6}
+          flex="1"
+        >
+          <Flex alignItems="center" gap={1} minH="32px">
+            <CustomIcon name="website" ml="0" mb="6px" color="gray.600" />
+            <Text variant="body2" fontWeight={500} color="text.dark">
+              Public Account Description
+            </Text>
+          </Flex>
+          <Text variant="body2" color="text.main" mb="1">
+            {publicInfo?.description}
+          </Text>
+        </Flex>
+      )}
+    </>
+  );
+};
diff --git a/src/lib/pages/account-details/components/TotalAccountValue.tsx b/src/lib/pages/account-details/components/TotalAccountValue.tsx
new file mode 100644
index 000000000..a04406164
--- /dev/null
+++ b/src/lib/pages/account-details/components/TotalAccountValue.tsx
@@ -0,0 +1,43 @@
+import { Flex, Heading, Text } from "@chakra-ui/react";
+
+import { useAccountTotalValue } from "../data";
+import { Loading } from "lib/components/Loading";
+import type { HumanAddr } from "lib/types";
+import { formatPrice } from "lib/utils";
+
+interface TotalAccountValueProps {
+  accountAddress: HumanAddr;
+}
+export const TotalAccountValue = ({
+  accountAddress,
+}: TotalAccountValueProps) => {
+  const { totalAccountValue, isLoading } = useAccountTotalValue(accountAddress);
+  return (
+    <Flex
+      pt={{ base: 6, md: 8 }}
+      pb={{ base: 2, md: 8 }}
+      direction="column"
+      borderBottom={{ base: "0px", md: "1px solid" }}
+      borderBottomColor={{ base: "transparent", md: "gray.700" }}
+    >
+      <Text variant="body2" fontWeight={500} color="text.dark">
+        Total Account Value
+      </Text>
+      {isLoading ? (
+        <Loading />
+      ) : (
+        <Heading
+          as="h5"
+          variant="h5"
+          color={
+            !totalAccountValue || totalAccountValue.eq(0)
+              ? "text.dark"
+              : "text.main"
+          }
+        >
+          {totalAccountValue ? formatPrice(totalAccountValue) : "N/A"}
+        </Heading>
+      )}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/components/asset/index.tsx b/src/lib/pages/account-details/components/asset/index.tsx
index 7b236cca6..1d25b2a2f 100644
--- a/src/lib/pages/account-details/components/asset/index.tsx
+++ b/src/lib/pages/account-details/components/asset/index.tsx
@@ -1,13 +1,14 @@
-import { Button, Flex, Grid, Text } from "@chakra-ui/react";
+import { Flex, Grid, Text, Button } from "@chakra-ui/react";
 import type { Big } from "big.js";
 import big from "big.js";
 
+import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { UnsupportedTokensModal } from "lib/components/modal";
 import { TableTitle, ViewMore } from "lib/components/table";
 import { TokenCard } from "lib/components/TokenCard";
-import { useOpenAssetTab } from "lib/hooks/useOpenTab";
+import { useOpenAssetTab } from "lib/hooks";
 import { useUserAssetInfos } from "lib/pages/account-details/data";
 import { AmpTrackViewJson } from "lib/services/amplitude";
 import type { BalanceWithAssetInfo, HumanAddr, Option, USD } from "lib/types";
@@ -26,8 +27,75 @@ interface AssetSectionContentProps {
   error: Error;
 }
 
+interface AssetCtaProps {
+  walletAddress: HumanAddr;
+}
 const MaxAssetsShow = 12;
 
+const AssetTitle = ({
+  onViewMore,
+  assetCount,
+  children,
+}: {
+  onViewMore: AssetsSectionProps["onViewMore"];
+  assetCount: number;
+  children: JSX.Element;
+}) => {
+  const isMobile = useMobile();
+
+  if (!isMobile && !onViewMore) return null;
+
+  if (isMobile && onViewMore)
+    return (
+      <Flex
+        justify="space-between"
+        w="full"
+        bg="gray.900"
+        borderRadius="8px"
+        p={4}
+        onClick={onViewMore}
+      >
+        <Flex direction="column" gap={2}>
+          <TableTitle title="Assets" count={assetCount} mb={0} />
+          {children}
+        </Flex>
+        <CustomIcon name="chevron-right" color="gray.600" />
+      </Flex>
+    );
+
+  return <TableTitle title="Assets" count={assetCount} mb={0} />;
+};
+
+const AssetCta = ({ walletAddress }: AssetCtaProps) => {
+  const { supportedAssets, unsupportedAssets } =
+    useUserAssetInfos(walletAddress);
+  const openAssetTab = useOpenAssetTab();
+  const totalAsset =
+    (supportedAssets?.length ?? 0) + (unsupportedAssets?.length ?? 0);
+  return (
+    <Flex>
+      {totalAsset > 0 && (
+        <Button
+          variant="ghost-gray"
+          size="sm"
+          rightIcon={<CustomIcon name="launch" boxSize={3} color="text.dark" />}
+          onClick={() => {
+            AmpTrackViewJson("account_details_page_assets");
+            openAssetTab(walletAddress);
+          }}
+        >
+          View in JSON
+        </Button>
+      )}
+      {unsupportedAssets && (
+        <UnsupportedTokensModal
+          unsupportedAssets={unsupportedAssets}
+          address={walletAddress}
+        />
+      )}
+    </Flex>
+  );
+};
 const AssetSectionContent = ({
   supportedAssets,
   onViewMore,
@@ -39,9 +107,11 @@ const AssetSectionContent = ({
         Error fetching assets data.
       </Text>
     );
-
   return supportedAssets?.length ? (
-    <Grid gridGap={4} gridTemplateColumns="repeat(4, 1fr)">
+    <Grid
+      gridGap={4}
+      gridTemplateColumns={{ base: "1 fr", md: "repeat(4, 1fr)" }}
+    >
       {supportedAssets
         .slice(0, onViewMore ? MaxAssetsShow : undefined)
         .map((asset) => (
@@ -54,69 +124,68 @@ const AssetSectionContent = ({
     </Text>
   );
 };
+
 export const AssetsSection = ({
   walletAddress,
   onViewMore,
 }: AssetsSectionProps) => {
-  const openAssetTab = useOpenAssetTab();
   const { supportedAssets, unsupportedAssets, isLoading, error } =
     useUserAssetInfos(walletAddress);
 
   let totalValue = big(0) as USD<Big>;
   if (supportedAssets) totalValue = calTotalValue(supportedAssets);
 
-  if (isLoading) return <Loading />;
-
-  const totalAsset =
-    (supportedAssets?.length ?? 0) + (unsupportedAssets?.length ?? 0);
+  const isMobile = useMobile();
+  const TotalAssetValueInfo = (
+    <UserAssetInfoCard
+      value={totalValue && supportedAssets ? formatPrice(totalValue) : "N/A"}
+      isZeroValue={totalValue.eq(0) || !supportedAssets}
+      helperText="Total Asset Value"
+    />
+  );
+  let isMobileDetail = null;
+  if (isMobile && onViewMore) {
+    isMobileDetail = false;
+  } else {
+    isMobileDetail = true;
+  }
 
+  if (isLoading) return <Loading />;
   return (
-    <Flex direction="column" gap={4} my={8} width="full">
-      {onViewMore && <TableTitle title="Assets" count={totalAsset} mb={0} />}
-      <Flex justify="space-between" width="full" align="center">
-        <Flex gap={12}>
-          <UserAssetInfoCard
-            value={
-              totalValue && supportedAssets ? formatPrice(totalValue) : "N/A"
-            }
-            isZeroValue={totalValue.eq(0) || !supportedAssets}
-            helperText="Total Asset Value"
-          />
-        </Flex>
-        <Flex>
-          {totalAsset > 0 && (
-            <Button
-              variant="ghost-gray"
-              size="sm"
-              rightIcon={
-                <CustomIcon name="launch" boxSize={3} color="text.dark" />
-              }
-              onClick={() => {
-                AmpTrackViewJson("account_details_page_assets");
-                openAssetTab(walletAddress);
-              }}
-            >
-              View in JSON
-            </Button>
-          )}
-          {unsupportedAssets && (
-            <UnsupportedTokensModal
-              unsupportedAssets={unsupportedAssets}
-              address={walletAddress}
-            />
-          )}
-        </Flex>
-      </Flex>
-      <AssetSectionContent
-        supportedAssets={supportedAssets}
+    <Flex
+      direction="column"
+      gap={4}
+      mt={{ base: 4, md: 8 }}
+      mb={{ base: 0, md: 8 }}
+      width="full"
+    >
+      <AssetTitle
         onViewMore={onViewMore}
-        error={error}
-      />
-      {supportedAssets &&
-        onViewMore &&
-        supportedAssets.length > MaxAssetsShow && (
-          <ViewMore onClick={onViewMore} />
-        )}
+        assetCount={
+          (supportedAssets?.length ?? 0) + (unsupportedAssets?.length ?? 0)
+        }
+      >
+        {TotalAssetValueInfo}
+      </AssetTitle>
+      {isMobileDetail && (
+        <>
+          <Flex justify="space-between" width="full" align="center">
+            <Flex gap="50px">{TotalAssetValueInfo}</Flex>
+            <AssetCta walletAddress={walletAddress} />
+          </Flex>
+          <AssetSectionContent
+            supportedAssets={supportedAssets}
+            onViewMore={onViewMore}
+            error={error}
+          />
+        </>
+      )}
+      {!isMobile ||
+        (supportedAssets &&
+          onViewMore &&
+          supportedAssets.length > MaxAssetsShow && (
+            <ViewMore onClick={onViewMore} />
+          ))}
     </Flex>
   );
 };
diff --git a/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx b/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
new file mode 100644
index 000000000..033fb4fc8
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/DelegationInfo.tsx
@@ -0,0 +1,107 @@
+import { Button, Flex, Heading } from "@chakra-ui/react";
+import type { MouseEventHandler, ReactNode } from "react";
+
+import { MobileDelegationTitle } from "../mobile/MobileDelegationTitle";
+import { useMobile } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+
+interface DelegationInfoProps {
+  onViewMore?: () => void;
+  infoCards: ReactNode;
+  redelegationCount: number;
+  onClickToggle?: MouseEventHandler<HTMLButtonElement> | undefined;
+  TotalBondedCard: JSX.Element;
+}
+const DelegationsTitle = ({
+  onViewMore,
+  TotalBondedCard,
+}: {
+  onViewMore?: () => void;
+  TotalBondedCard: JSX.Element;
+}) => {
+  const isMobile = useMobile();
+  if (!isMobile && !onViewMore) return null;
+  if (isMobile && onViewMore)
+    return (
+      <MobileDelegationTitle onViewMore={onViewMore}>
+        {TotalBondedCard}
+      </MobileDelegationTitle>
+    );
+  return (
+    <Heading
+      variant="h6"
+      as="h6"
+      display="flex"
+      alignItems="center"
+      height={{ base: "29px", md: "auto" }}
+    >
+      Delegations
+    </Heading>
+  );
+};
+export const DelegationInfo = ({
+  onViewMore,
+  onClickToggle,
+  redelegationCount,
+  infoCards,
+  TotalBondedCard,
+}: DelegationInfoProps) => {
+  const isMobile = useMobile();
+  let isMobileDetail = null;
+  if (isMobile && onViewMore) {
+    isMobileDetail = false;
+  } else {
+    isMobileDetail = true;
+  }
+  return (
+    <>
+      <DelegationsTitle
+        onViewMore={onViewMore}
+        TotalBondedCard={TotalBondedCard}
+      />
+      {isMobileDetail && (
+        <Flex
+          direction={{ base: "column", md: "row" }}
+          alignItems={{ base: "start", md: "center" }}
+          justify="space-between"
+          overflowX="scroll"
+        >
+          <Flex gap={8} direction={{ base: "column", md: "row" }}>
+            {infoCards}
+          </Flex>
+          {onViewMore ? (
+            <Button
+              variant="ghost-gray"
+              minW="fit-content"
+              rightIcon={<CustomIcon name="chevron-right" />}
+              onClick={() => {
+                AmpTrack(AmpEvent.USE_VIEW_MORE);
+                onViewMore();
+              }}
+            >
+              View Delegation Info
+            </Button>
+          ) : (
+            <Flex
+              w={{ base: "full", md: "auto" }}
+              justify={{ base: "center", md: "inherit" }}
+              mt={{ base: 6, md: 0 }}
+            >
+              <Button
+                variant="ghost-gray"
+                minW="fit-content"
+                leftIcon={<CustomIcon name="history" />}
+                rightIcon={<CustomIcon name="chevron-right" />}
+                isDisabled={!redelegationCount}
+                onClick={onClickToggle}
+              >
+                See Active Redelegations ({redelegationCount})
+              </Button>
+            </Flex>
+          )}
+        </Flex>
+      )}
+    </>
+  );
+};
diff --git a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
index f5e555111..044c0a27d 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
@@ -1,11 +1,12 @@
 import { Flex, RadioGroup, Stack } from "@chakra-ui/react";
 import { useState } from "react";
 
-import { DelegationsTable, UnbondingsTable } from "../tables";
+import { UnbondingsTable } from "../tables";
 import type { Delegation, Unbonding } from "lib/pages/account-details/data";
 import { AmpTrackUseRadio } from "lib/services/amplitude";
 import type { Option, TokenWithValue } from "lib/types";
 
+import { DelegationsTab } from "./DelegationsTab";
 import { RadioCard } from "./RadioCard";
 
 interface DelegationsBodyProps {
@@ -31,7 +32,6 @@ export const DelegationsBody = ({
 }: DelegationsBodyProps) => {
   // NOTE: set between "Delegated" and "Unbonding"
   const [value, setValue] = useState("Delegated");
-
   return (
     <Flex direction="column" gap={8}>
       <RadioGroup
@@ -42,7 +42,7 @@ export const DelegationsBody = ({
         value={value}
         overflowX="scroll"
       >
-        <Stack direction="row">
+        <Stack direction={{ base: "column", md: "row" }}>
           <RadioCard
             value="Delegated"
             total={totalDelegations}
@@ -58,7 +58,7 @@ export const DelegationsBody = ({
         </Stack>
       </RadioGroup>
       {value === "Delegated" ? (
-        <DelegationsTable
+        <DelegationsTab
           delegations={delegations}
           rewards={rewards}
           defaultToken={defaultToken}
diff --git a/src/lib/pages/account-details/components/delegations/DelegationsTab.tsx b/src/lib/pages/account-details/components/delegations/DelegationsTab.tsx
new file mode 100644
index 000000000..de2ff8446
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/DelegationsTab.tsx
@@ -0,0 +1,92 @@
+import { Flex } from "@chakra-ui/react";
+
+import type { Delegation } from "../../data";
+import { MobileLabel } from "../mobile/MobileLabel";
+import { DelegationsTable } from "../tables";
+import { TokenCell } from "../tables/TokenCell";
+import { useMobile } from "lib/app-provider";
+import { Loading } from "lib/components/Loading";
+import { EmptyState } from "lib/components/state";
+import { ValidatorBadge } from "lib/components/ValidatorBadge";
+import type { Option, TokenWithValue } from "lib/types";
+
+interface DelegationsTabProps {
+  delegations: Option<Delegation[]>;
+  rewards: Option<Record<string, TokenWithValue[]>>;
+  defaultToken: TokenWithValue;
+  isLoading: boolean;
+}
+export const DelegationsTab = ({
+  delegations,
+  rewards,
+  defaultToken,
+  isLoading,
+}: DelegationsTabProps) => {
+  const isMobile = useMobile();
+  if (isLoading) return <Loading />;
+  if (!delegations?.length)
+    return (
+      <EmptyState
+        message="This account did not delegate their assets to any validators."
+        withBorder
+      />
+    );
+
+  return (
+    <Flex w="full">
+      {isMobile ? (
+        <Flex direction="column" gap={4} w="full">
+          {delegations.map((delegation) => (
+            <Flex
+              key={
+                delegation.validator.validatorAddress +
+                delegation.token.amount +
+                delegation.token.denom
+              }
+              borderRadius="8px"
+              background="gray.900"
+              p={3}
+              direction="column"
+              gap={3}
+              w="full"
+            >
+              <ValidatorBadge
+                validator={delegation.validator}
+                badgeSize={{ sm: 8, md: 6 }}
+              />
+              <Flex
+                direction="column"
+                gap={3}
+                borderTop="1px solid"
+                borderTopColor="gray.700"
+                pt={3}
+              >
+                <Flex direction="column" gap={1}>
+                  <MobileLabel label="Amount" />
+                  <TokenCell token={delegation.token} />
+                </Flex>
+                <Flex direction="column" gap={1}>
+                  <MobileLabel label="Reward" />
+                  <TokenCell
+                    token={
+                      rewards?.[delegation.validator.validatorAddress]?.find(
+                        (token) => token.denom === defaultToken.denom
+                      ) ?? defaultToken
+                    }
+                  />
+                </Flex>
+              </Flex>
+            </Flex>
+          ))}
+        </Flex>
+      ) : (
+        <DelegationsTable
+          delegations={delegations}
+          rewards={rewards}
+          defaultToken={defaultToken}
+          isLoading={isLoading}
+        />
+      )}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx b/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx
index 1bb68325a..2f5d473de 100644
--- a/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx
+++ b/src/lib/pages/account-details/components/delegations/NonRedelegatableSection.tsx
@@ -1,9 +1,12 @@
 import { Box, Text } from "@chakra-ui/react";
 
 import { NonRedelegatablesTable } from "../tables";
+import { useMobile } from "lib/app-provider";
 import type { Redelegation } from "lib/pages/account-details/data";
 import type { NonRedelegatable } from "lib/pages/account-details/type";
 
+import { NonRedelegatablesMobile } from "./NonRedelegatablesMobile";
+
 interface NonRedelegatableSectionProps {
   redelegations: Redelegation[];
 }
@@ -27,11 +30,11 @@ export const NonRedelegatableSection = ({
       });
     }, [])
     .reverse();
-
+  const isMobile = useMobile();
   return (
     <Box
-      px={6}
-      py={4}
+      px={{ base: 3, md: 6 }}
+      py={{ base: 3, md: 4 }}
       bgColor="gray.900"
       border="1px solid"
       borderColor="gray.700"
@@ -45,7 +48,11 @@ export const NonRedelegatableSection = ({
         </span>
         until their active redelegations have completed.
       </Text>
-      <NonRedelegatablesTable nonRedelegatables={nonRedelegatables} />
+      {isMobile ? (
+        <NonRedelegatablesMobile nonRedelegatables={nonRedelegatables} />
+      ) : (
+        <NonRedelegatablesTable nonRedelegatables={nonRedelegatables} />
+      )}
     </Box>
   );
 };
diff --git a/src/lib/pages/account-details/components/delegations/NonRedelegatablesMobile.tsx b/src/lib/pages/account-details/components/delegations/NonRedelegatablesMobile.tsx
new file mode 100644
index 000000000..9ee20675e
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/NonRedelegatablesMobile.tsx
@@ -0,0 +1,44 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { MobileLabel } from "../mobile/MobileLabel";
+import { ValidatorBadge } from "lib/components/ValidatorBadge";
+import type { NonRedelegatable } from "lib/pages/account-details/type";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+interface NonRedelegatablesMobileProps {
+  nonRedelegatables: NonRedelegatable[];
+}
+
+export const NonRedelegatablesMobile = ({
+  nonRedelegatables,
+}: NonRedelegatablesMobileProps) => (
+  <Flex>
+    {nonRedelegatables.map((nonRedelegatable) => (
+      <Flex
+        direction="column"
+        gap={2}
+        w="full"
+        borderTop="1px solid"
+        borderTopColor="gray.700"
+        pt={3}
+        my={3}
+        key={`nonredelegatable_${nonRedelegatable.dstValidator.validatorAddress}_${nonRedelegatable.dstValidator.moniker}`}
+      >
+        <MobileLabel label="Cannot Redelegate From" />
+        <ValidatorBadge
+          badgeSize={{ sm: 8, md: 6 }}
+          validator={nonRedelegatable.dstValidator}
+        />
+        <MobileLabel label="Cannot Redelegate Until" />
+        <Flex direction="column">
+          <Text variant="body2">
+            {formatUTC(nonRedelegatable.completionTime)}
+          </Text>
+          <Text variant="body3" color="text.disabled">
+            {`(${dateFromNow(nonRedelegatable.completionTime)})`}
+          </Text>
+        </Flex>
+      </Flex>
+    ))}
+  </Flex>
+);
diff --git a/src/lib/pages/account-details/components/delegations/RedelegationsMobile.tsx b/src/lib/pages/account-details/components/delegations/RedelegationsMobile.tsx
new file mode 100644
index 000000000..9b93c8230
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/RedelegationsMobile.tsx
@@ -0,0 +1,79 @@
+import { Flex, Grid, Text } from "@chakra-ui/react";
+
+import { MobileLabel } from "../mobile/MobileLabel";
+import { TokenCell } from "../tables/TokenCell";
+import { CustomIcon } from "lib/components/icon";
+import { ValidatorBadge } from "lib/components/ValidatorBadge";
+import type { Redelegation } from "lib/pages/account-details/data";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+interface RedelegationsMobileProps {
+  redelegations: Redelegation[];
+}
+
+export const RedelegationsMobile = ({
+  redelegations,
+}: RedelegationsMobileProps) => {
+  return (
+    <Flex w="full">
+      {redelegations.map((redelegation) => (
+        <Flex
+          key={
+            redelegation.srcValidator.validatorAddress +
+            redelegation.dstValidator.validatorAddress +
+            redelegation.token.amount +
+            redelegation.token.denom +
+            redelegation.completionTime
+          }
+          background="gray.900"
+          borderRadius="8px"
+          p={3}
+          direction="column"
+          gap={3}
+          w="full"
+        >
+          <Grid
+            borderBottom="1px solid"
+            pb={3}
+            borderBottomColor="gray.700"
+            templateColumns="1fr 32px 1fr"
+            alignItems="center"
+          >
+            <Flex direction="column" gap={1}>
+              <MobileLabel label="From validator" />
+              <ValidatorBadge
+                maxWidth="100px"
+                badgeSize={{ sm: 8, md: 6 }}
+                validator={redelegation.srcValidator}
+              />
+            </Flex>
+            <CustomIcon name="arrow-right" boxSize={3} color="gray.600" />
+            <Flex direction="column" gap={1}>
+              <MobileLabel label="To validator" />
+              <ValidatorBadge
+                maxWidth="100px"
+                badgeSize={{ sm: 8, md: 6 }}
+                validator={redelegation.dstValidator}
+              />
+            </Flex>
+          </Grid>
+          <Flex direction="column" gap={1}>
+            <MobileLabel label="Amount" />
+            <TokenCell token={redelegation.token} />
+          </Flex>
+          <Flex direction="column" gap={1}>
+            <MobileLabel label="Completed by" />
+            <Flex direction="column">
+              <Text variant="body2">
+                {formatUTC(redelegation.completionTime)}
+              </Text>
+              <Text variant="body3" color="text.disabled">
+                {`(${dateFromNow(redelegation.completionTime)})`}
+              </Text>
+            </Flex>
+          </Flex>
+        </Flex>
+      ))}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/components/delegations/RedelegationsSection.tsx b/src/lib/pages/account-details/components/delegations/RedelegationsSection.tsx
index 63fb71857..802ed4d72 100644
--- a/src/lib/pages/account-details/components/delegations/RedelegationsSection.tsx
+++ b/src/lib/pages/account-details/components/delegations/RedelegationsSection.tsx
@@ -2,6 +2,7 @@ import type { FlexProps } from "@chakra-ui/react";
 import { Button, Flex } from "@chakra-ui/react";
 
 import { RedelegationsTable } from "../tables";
+import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { TableTitle } from "lib/components/table";
@@ -11,6 +12,7 @@ import type {
 } from "lib/pages/account-details/data";
 
 import { NonRedelegatableSection } from "./NonRedelegatableSection";
+import { RedelegationsMobile } from "./RedelegationsMobile";
 
 interface RedelegationsSectionProps extends FlexProps {
   stakingParams: StakingParams;
@@ -25,26 +27,42 @@ export const RedelegationsSection = ({
   isLoading,
   onBack,
   ...props
-}: RedelegationsSectionProps) => (
-  <Flex direction="column" gap={4} {...props}>
-    <Flex gap={3} alignItems="center">
-      <Button variant="ghost-secondary" p={0} onClick={onBack}>
-        <CustomIcon name="chevron-left" boxSize={6} />
-      </Button>
-      <TableTitle
-        title="Active Redelegations"
-        count={redelegations.length}
-        helperText={`Each wallet can redelegate up to ${stakingParams.maxEntries} entries between same pair of validators within last ${stakingParams.unbondingTime} timeframe`}
-        mb={0}
-      />
+}: RedelegationsSectionProps) => {
+  const isMobile = useMobile();
+  return (
+    <Flex direction="column" gap={4} {...props}>
+      <Flex
+        gap={3}
+        alignItems={{ base: "start", md: "center" }}
+        direction={{ base: "column", md: "row" }}
+      >
+        <Button
+          variant="ghost-secondary"
+          size={{ base: "xs", md: "md" }}
+          p={0}
+          onClick={onBack}
+        >
+          <CustomIcon name="chevron-left" boxSize={6} />
+        </Button>
+        <TableTitle
+          title="Active Redelegations"
+          count={redelegations.length}
+          helperText={`Each wallet can redelegate up to ${stakingParams.maxEntries} entries between same pair of validators within last ${stakingParams.unbondingTime} timeframe`}
+          mb={0}
+        />
+      </Flex>
+      {isLoading ? (
+        <Loading />
+      ) : (
+        <>
+          <NonRedelegatableSection redelegations={redelegations} />
+          {isMobile ? (
+            <RedelegationsMobile redelegations={redelegations} />
+          ) : (
+            <RedelegationsTable redelegations={redelegations} />
+          )}
+        </>
+      )}
     </Flex>
-    {isLoading ? (
-      <Loading />
-    ) : (
-      <>
-        <NonRedelegatableSection redelegations={redelegations} />
-        <RedelegationsTable redelegations={redelegations} />
-      </>
-    )}
-  </Flex>
-);
+  );
+};
diff --git a/src/lib/pages/account-details/components/delegations/index.tsx b/src/lib/pages/account-details/components/delegations/index.tsx
index daad71816..54a18059d 100644
--- a/src/lib/pages/account-details/components/delegations/index.tsx
+++ b/src/lib/pages/account-details/components/delegations/index.tsx
@@ -1,8 +1,7 @@
-import { Button, Flex, Heading, useDisclosure } from "@chakra-ui/react";
+import { Flex, useDisclosure } from "@chakra-ui/react";
 import type Big from "big.js";
 import big from "big.js";
 
-import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
 import { useUserDelegationInfos } from "lib/pages/account-details/data";
@@ -17,6 +16,7 @@ import type {
 } from "lib/types";
 import { getTokenLabel } from "lib/utils";
 
+import { DelegationInfo } from "./DelegationInfo";
 import { DelegationsBody } from "./DelegationsBody";
 import { RedelegationsSection } from "./RedelegationsSection";
 import { TotalCard } from "./TotalCard";
@@ -84,8 +84,23 @@ export const DelegationsSection = ({
 
   const redelegationCount = redelegations?.length ?? 0;
 
+  const TotalBondedCard = (
+    <TotalCard
+      title="Total Bonded"
+      message={`Total delegated and unbonding ${bondDenomLabel}, including those delegated through vesting`}
+      token={totalBondedBondDenom}
+      isLoading={isLoadingTotalBonded}
+    />
+  );
+
   return (
-    <Flex my={8} position="relative" overflow="hidden" width="full">
+    <Flex
+      mt={{ base: 4, md: 8 }}
+      mb={{ base: 0, md: 8 }}
+      position="relative"
+      overflow="hidden"
+      width="full"
+    >
       <Flex
         direction="column"
         gap={4}
@@ -95,62 +110,34 @@ export const DelegationsSection = ({
         left={isOpen ? "-100%" : "0"}
         transition="all 0.25s"
       >
-        {onViewMore && (
-          <Heading variant="h6" as="h6">
-            Delegations
-          </Heading>
-        )}
-        <Flex justify="space-between" alignItems="center" overflowX="scroll">
-          <Flex gap={8}>
-            <TotalCard
-              title="Total Bonded"
-              message={`Total delegated and unbonding ${bondDenomLabel}, including those delegated through vesting`}
-              token={totalBondedBondDenom}
-              isLoading={isLoadingTotalBonded}
-            />
-            <TotalCard
-              title="Reward"
-              message={`Total rewards earned from delegated ${bondDenomLabel} across all validators`}
-              token={totalRewardBondDenom}
-              isLoading={isLoadingRewards}
-            />
-            {isValidator && (
+        <DelegationInfo
+          TotalBondedCard={TotalBondedCard}
+          infoCards={
+            <>
+              {TotalBondedCard}
               <TotalCard
-                title="Commission"
-                message="Total commission reward earned by your validator"
-                token={totalCommissionBondDenom}
-                isLoading={isLoadingTotalCommission}
+                title="Reward"
+                message={`Total rewards earned from delegated ${bondDenomLabel} across all validators`}
+                token={totalRewardBondDenom}
+                isLoading={isLoadingRewards}
               />
-            )}
-          </Flex>
-          {onViewMore ? (
-            <Button
-              variant="ghost-gray"
-              minW="fit-content"
-              rightIcon={<CustomIcon name="chevron-right" />}
-              onClick={() => {
-                AmpTrack(AmpEvent.USE_VIEW_MORE);
-                onViewMore();
-              }}
-            >
-              View Delegation Info
-            </Button>
-          ) : (
-            <Button
-              variant="ghost-gray"
-              minW="fit-content"
-              leftIcon={<CustomIcon name="history" />}
-              rightIcon={<CustomIcon name="chevron-right" />}
-              isDisabled={!redelegationCount}
-              onClick={() => {
-                AmpTrack(AmpEvent.USE_SEE_REDELEGATIONS);
-                onToggle();
-              }}
-            >
-              See Active Redelegations ({redelegationCount})
-            </Button>
-          )}
-        </Flex>
+              {isValidator && (
+                <TotalCard
+                  title="Commission"
+                  message="Total commission reward earned by your validator"
+                  token={totalCommissionBondDenom}
+                  isLoading={isLoadingTotalCommission}
+                />
+              )}
+            </>
+          }
+          onViewMore={onViewMore}
+          redelegationCount={redelegationCount}
+          onClickToggle={() => {
+            AmpTrack(AmpEvent.USE_SEE_REDELEGATIONS);
+            onToggle();
+          }}
+        />
         {!onViewMore && (
           <DelegationsBody
             totalDelegations={totalDelegations}
diff --git a/src/lib/pages/account-details/components/mobile/MobileDelegationTitle.tsx b/src/lib/pages/account-details/components/mobile/MobileDelegationTitle.tsx
new file mode 100644
index 000000000..4eb8026a5
--- /dev/null
+++ b/src/lib/pages/account-details/components/mobile/MobileDelegationTitle.tsx
@@ -0,0 +1,30 @@
+import { Flex, Heading } from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+
+export const MobileDelegationTitle = ({
+  onViewMore,
+  children,
+}: {
+  onViewMore: () => void;
+  children: JSX.Element;
+}) => {
+  return (
+    <Flex
+      justify="space-between"
+      w="full"
+      bg="gray.900"
+      borderRadius="8px"
+      p={4}
+      onClick={onViewMore}
+    >
+      <Flex direction="column" gap={2}>
+        <Heading variant="h6" as="h6">
+          Delegations
+        </Heading>
+        {children}
+      </Flex>
+      <CustomIcon name="chevron-right" color="gray.600" />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/components/mobile/MobileLabel.tsx b/src/lib/pages/account-details/components/mobile/MobileLabel.tsx
new file mode 100644
index 000000000..b001e353b
--- /dev/null
+++ b/src/lib/pages/account-details/components/mobile/MobileLabel.tsx
@@ -0,0 +1,19 @@
+import { Text } from "@chakra-ui/react";
+
+interface MobileLabelProps {
+  label: string;
+  fontWeight?: number;
+  variant?: string;
+}
+
+export const MobileLabel = ({
+  label,
+  fontWeight = 600,
+  variant = "body3",
+}: MobileLabelProps) => {
+  return (
+    <Text color="text.dark" variant={variant} fontWeight={fontWeight}>
+      {label}
+    </Text>
+  );
+};
diff --git a/src/lib/pages/account-details/components/mobile/MobileTitle.tsx b/src/lib/pages/account-details/components/mobile/MobileTitle.tsx
new file mode 100644
index 000000000..23dda8dfe
--- /dev/null
+++ b/src/lib/pages/account-details/components/mobile/MobileTitle.tsx
@@ -0,0 +1,26 @@
+import { Flex } from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+import { TableTitle } from "lib/components/table";
+
+interface MobileTitleProps {
+  title: string;
+  count: string | number;
+  onViewMore?: () => void;
+}
+
+export const MobileTitle = ({ onViewMore, title, count }: MobileTitleProps) => {
+  return (
+    <Flex
+      justify="space-between"
+      w="full"
+      bg="gray.900"
+      borderRadius="8px"
+      p={4}
+      onClick={onViewMore}
+    >
+      <TableTitle title={title} count={count} mb={0} />
+      <CustomIcon name="chevron-right" color="gray.600" />
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx b/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx
index 7b170b119..aee28caf7 100644
--- a/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/AdminContractsTable.tsx
@@ -2,14 +2,17 @@ import { Box } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
 import { ErrorFetching } from "../ErrorFetching";
-import { useInternalNavigate } from "lib/app-provider";
+import { MobileTitle } from "../mobile/MobileTitle";
+import { useInternalNavigate, useMobile } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
-import { ContractsTable, TableTitle, ViewMore } from "lib/components/table";
+import { TableTitle, ViewMore } from "lib/components/table";
 import { useAccountAdminContracts } from "lib/pages/account-details/data";
 import type { ContractAddr, HumanAddr, Option } from "lib/types";
 
+import { ContractsBody } from "./ContractsBody";
+
 interface AdminContractsTableProps {
   walletAddress: HumanAddr;
   scrollComponentId: string;
@@ -18,6 +21,31 @@ interface AdminContractsTableProps {
   onViewMore?: () => void;
 }
 
+const AdminTitle = ({
+  onViewMore,
+  totalData,
+}: {
+  onViewMore: AdminContractsTableProps["onViewMore"];
+  totalData: Option<number>;
+}) => {
+  const isMobile = useMobile();
+  if (isMobile && onViewMore)
+    return (
+      <MobileTitle
+        title="Contract Admins"
+        count={totalData ?? 0}
+        onViewMore={onViewMore}
+      />
+    );
+  return (
+    <TableTitle
+      title="Contract Admins"
+      count={totalData ?? 0}
+      helperText="This account is the admin for following contracts"
+      mb={2}
+    />
+  );
+};
 export const AdminContractsTable = ({
   walletAddress,
   scrollComponentId,
@@ -64,35 +92,39 @@ export const AdminContractsTable = ({
     setPageSize(size);
     setCurrentPage(1);
   };
-
+  const isMobile = useMobile();
+  let isMobileDetail = null;
+  if (isMobile && onViewMore) {
+    isMobileDetail = false;
+  } else {
+    isMobileDetail = true;
+  }
   return (
-    <Box mt={8}>
-      <TableTitle
-        title="Contract Admins"
-        count={totalData ?? 0}
-        helperText="This account is the admin for following contracts"
-        mb={2}
-      />
-      <ContractsTable
-        contracts={contracts}
-        isLoading={isLoading}
-        emptyState={
-          <EmptyState
-            message={
-              !contracts ? (
-                <ErrorFetching />
-              ) : (
-                "This account does not have any admin access for any contracts."
-              )
-            }
-            withBorder
-          />
-        }
-        onRowSelect={onRowSelect}
-      />
+    <Box mt={{ base: 4, md: 8 }}>
+      <AdminTitle totalData={totalData} onViewMore={onViewMore} />
+      {isMobileDetail && (
+        <ContractsBody
+          contracts={contracts}
+          isLoading={isLoading}
+          emptyState={
+            <EmptyState
+              message={
+                !contracts ? (
+                  <ErrorFetching />
+                ) : (
+                  "This account does not have any admin access for any contracts."
+                )
+              }
+              withBorder
+            />
+          }
+          onRowSelect={onRowSelect}
+          onViewMore={onViewMore}
+        />
+      )}
       {!!totalData &&
         (onViewMore
-          ? totalData > 5 && <ViewMore onClick={onViewMore} />
+          ? totalData > 5 && !isMobile && <ViewMore onClick={onViewMore} />
           : totalData > 10 && (
               <Pagination
                 currentPage={currentPage}
diff --git a/src/lib/pages/account-details/components/tables/ContractsBody.tsx b/src/lib/pages/account-details/components/tables/ContractsBody.tsx
new file mode 100644
index 000000000..2dd3c67bc
--- /dev/null
+++ b/src/lib/pages/account-details/components/tables/ContractsBody.tsx
@@ -0,0 +1,53 @@
+import { Flex } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+import { InstantiatedContractCard } from "lib/components/card/ContractCard";
+import { Loading } from "lib/components/Loading";
+import { ContractsTable } from "lib/components/table";
+import type { ContractAddr, Option, ContractInfo } from "lib/types";
+
+interface ContractsBodyProps {
+  contracts: Option<ContractInfo[]>;
+  isLoading: boolean;
+  emptyState: JSX.Element;
+  onRowSelect: (contract: ContractAddr) => void;
+  onViewMore?: () => void;
+}
+
+export const ContractsBody = ({
+  contracts,
+  isLoading,
+  emptyState,
+  onRowSelect,
+  onViewMore,
+}: ContractsBodyProps) => {
+  const isMobile = useMobile();
+  if (isLoading) return <Loading />;
+  if (!contracts?.length) return emptyState;
+  if (isMobile && !onViewMore)
+    return (
+      <Flex direction="column" gap={4} w="full" mt={4}>
+        {contracts.map((contractInfo) => (
+          <InstantiatedContractCard
+            contractInfo={contractInfo}
+            key={
+              contractInfo.name +
+              contractInfo.contractAddress +
+              contractInfo.description +
+              contractInfo.tags +
+              contractInfo.lists
+            }
+          />
+        ))}
+      </Flex>
+    );
+  if (isMobile && onViewMore) return null;
+  return (
+    <ContractsTable
+      contracts={contracts}
+      isLoading={isLoading}
+      emptyState={emptyState}
+      onRowSelect={onRowSelect}
+    />
+  );
+};
diff --git a/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx b/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx
index 3bd31c1fc..7e2581906 100644
--- a/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx
@@ -2,14 +2,17 @@ import { Box } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
 import { ErrorFetching } from "../ErrorFetching";
-import { useInternalNavigate } from "lib/app-provider";
+import { MobileTitle } from "../mobile/MobileTitle";
+import { useInternalNavigate, useMobile } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
-import { ContractsTable, TableTitle, ViewMore } from "lib/components/table";
+import { TableTitle, ViewMore } from "lib/components/table";
 import { useAccountContracts } from "lib/pages/account-details/data";
 import type { ContractAddr, HumanAddr, Option } from "lib/types";
 
+import { ContractsBody } from "./ContractsBody";
+
 interface InstantiatedContractsTableProps {
   walletAddress: HumanAddr;
   scrollComponentId: string;
@@ -18,6 +21,31 @@ interface InstantiatedContractsTableProps {
   onViewMore?: () => void;
 }
 
+const ContractTitle = ({
+  onViewMore,
+  totalData,
+}: {
+  onViewMore: InstantiatedContractsTableProps["onViewMore"];
+  totalData: Option<number>;
+}) => {
+  const isMobile = useMobile();
+  if (isMobile && onViewMore)
+    return (
+      <MobileTitle
+        title="Contract Instances"
+        count={totalData ?? 0}
+        onViewMore={onViewMore}
+      />
+    );
+  return (
+    <TableTitle
+      title="Contract Instances"
+      count={totalData ?? 0}
+      helperText="This account instantiated the following contracts"
+      mb={2}
+    />
+  );
+};
 export const InstantiatedContractsTable = ({
   walletAddress,
   scrollComponentId,
@@ -64,35 +92,39 @@ export const InstantiatedContractsTable = ({
     setPageSize(size);
     setCurrentPage(1);
   };
-
+  const isMobile = useMobile();
+  let isMobileDetail = null;
+  if (isMobile && onViewMore) {
+    isMobileDetail = false;
+  } else {
+    isMobileDetail = true;
+  }
   return (
-    <Box mt={8}>
-      <TableTitle
-        title="Contract Instances"
-        count={totalData ?? 0}
-        helperText="This account instantiated the following contracts"
-        mb={2}
-      />
-      <ContractsTable
-        contracts={contracts}
-        isLoading={isLoading}
-        emptyState={
-          <EmptyState
-            message={
-              !contracts ? (
-                <ErrorFetching />
-              ) : (
-                "This account did not instantiate any contracts before."
-              )
-            }
-            withBorder
-          />
-        }
-        onRowSelect={onRowSelect}
-      />
+    <Box mt={{ base: 4, md: 8 }}>
+      <ContractTitle totalData={totalData} onViewMore={onViewMore} />
+      {isMobileDetail && (
+        <ContractsBody
+          contracts={contracts}
+          isLoading={isLoading}
+          emptyState={
+            <EmptyState
+              message={
+                !contracts ? (
+                  <ErrorFetching />
+                ) : (
+                  "This account did not instantiate any contracts before."
+                )
+              }
+              withBorder
+            />
+          }
+          onRowSelect={onRowSelect}
+          onViewMore={onViewMore}
+        />
+      )}
       {!!totalData &&
         (onViewMore
-          ? totalData > 5 && <ViewMore onClick={onViewMore} />
+          ? totalData > 5 && !isMobile && <ViewMore onClick={onViewMore} />
           : totalData > 10 && (
               <Pagination
                 currentPage={currentPage}
diff --git a/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx b/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
index 6dd5894bb..aaa5dbd90 100644
--- a/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
@@ -1,4 +1,4 @@
-import { TableContainer } from "@chakra-ui/react";
+import { Box, TableContainer } from "@chakra-ui/react";
 
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
@@ -33,7 +33,7 @@ const DelegationsTableBody = ({
     );
 
   return (
-    <TableContainer>
+    <TableContainer width="100%">
       <BondedTableHeader templateColumns={TEMPLATE_COLUMNS} isDelegation />
       {delegations.map((delegation) => (
         <BondedTableRow
@@ -63,7 +63,7 @@ export const DelegationsTable = ({
   defaultToken,
   isLoading,
 }: DelegationsTableProps) => (
-  <div>
+  <Box width="100%">
     <TableTitle title="Delegated to" count={delegations?.length ?? 0} mb={2} />
     <DelegationsTableBody
       delegations={delegations}
@@ -71,5 +71,5 @@ export const DelegationsTable = ({
       defaultToken={defaultToken}
       isLoading={isLoading}
     />
-  </div>
+  </Box>
 );
diff --git a/src/lib/pages/account-details/components/tables/codes/StoredCodesBody.tsx b/src/lib/pages/account-details/components/tables/codes/StoredCodesBody.tsx
new file mode 100644
index 000000000..f74f970ea
--- /dev/null
+++ b/src/lib/pages/account-details/components/tables/codes/StoredCodesBody.tsx
@@ -0,0 +1,48 @@
+import { Flex } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+import { StoredCodeCard } from "lib/components/card/StoredCodeCard";
+import { Loading } from "lib/components/Loading";
+import { EmptyState } from "lib/components/state";
+import { CodesTable } from "lib/components/table";
+import type { CodeInfo, Option } from "lib/types";
+
+interface StoredCodesBodyProps {
+  codes: Option<CodeInfo[]>;
+  isLoading: boolean;
+  emptyState: JSX.Element;
+  onRowSelect: (codeId: number) => void;
+  onViewMore?: () => void;
+}
+
+export const StoredCodesBody = ({
+  codes,
+  isLoading,
+  emptyState,
+  onRowSelect,
+  onViewMore,
+}: StoredCodesBodyProps) => {
+  const isMobile = useMobile();
+  if (isLoading) return <Loading />;
+  if (!codes?.length) return emptyState;
+  if (isMobile && !onViewMore)
+    return (
+      <Flex direction="column" gap={4} w="full" mt={4}>
+        {codes.map((code) => (
+          <StoredCodeCard
+            key={code.id + code.uploader + code.name}
+            codeInfo={code}
+          />
+        ))}
+      </Flex>
+    );
+  if (isMobile && onViewMore) return null;
+  return (
+    <CodesTable
+      codes={codes}
+      isLoading={isLoading}
+      emptyState={<EmptyState message={emptyState} withBorder />}
+      onRowSelect={onRowSelect}
+    />
+  );
+};
diff --git a/src/lib/pages/account-details/components/tables/StoredCodesTable.tsx b/src/lib/pages/account-details/components/tables/codes/StoredCodesTable.tsx
similarity index 57%
rename from src/lib/pages/account-details/components/tables/StoredCodesTable.tsx
rename to src/lib/pages/account-details/components/tables/codes/StoredCodesTable.tsx
index 377f58a71..b68643385 100644
--- a/src/lib/pages/account-details/components/tables/StoredCodesTable.tsx
+++ b/src/lib/pages/account-details/components/tables/codes/StoredCodesTable.tsx
@@ -1,15 +1,18 @@
 import { Box } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
-import { ErrorFetching } from "../ErrorFetching";
-import { useInternalNavigate } from "lib/app-provider";
+import { ErrorFetching } from "../../ErrorFetching";
+import { MobileTitle } from "../../mobile/MobileTitle";
+import { useInternalNavigate, useMobile } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
-import { CodesTable, TableTitle, ViewMore } from "lib/components/table";
+import { TableTitle, ViewMore } from "lib/components/table";
 import { useAccountCodes } from "lib/pages/account-details/data";
 import type { HumanAddr, Option } from "lib/types";
 
+import { StoredCodesBody } from "./StoredCodesBody";
+
 interface StoredCodesTableProps {
   walletAddress: HumanAddr;
   scrollComponentId: string;
@@ -18,6 +21,31 @@ interface StoredCodesTableProps {
   onViewMore?: () => void;
 }
 
+const CodeTitle = ({
+  onViewMore,
+  totalData,
+}: {
+  onViewMore: StoredCodesTableProps["onViewMore"];
+  totalData: Option<number>;
+}) => {
+  const isMobile = useMobile();
+  if (isMobile && onViewMore)
+    return (
+      <MobileTitle
+        title="Stored Codes"
+        count={totalData ?? 0}
+        onViewMore={onViewMore}
+      />
+    );
+  return (
+    <TableTitle
+      title="Stored Codes"
+      count={totalData ?? 0}
+      mb={2}
+      helperText="This account stored the following codes"
+    />
+  );
+};
 export const StoredCodesTable = ({
   walletAddress,
   scrollComponentId,
@@ -64,35 +92,39 @@ export const StoredCodesTable = ({
     setPageSize(size);
     setCurrentPage(1);
   };
-
+  const isMobile = useMobile();
+  let isMobileDetail = null;
+  if (isMobile && onViewMore) {
+    isMobileDetail = false;
+  } else {
+    isMobileDetail = true;
+  }
   return (
-    <Box mt={8}>
-      <TableTitle
-        title="Stored Codes"
-        count={totalData ?? 0}
-        helperText="This account stored the following codes"
-        mb={2}
-      />
-      <CodesTable
-        codes={codes}
-        isLoading={isLoading}
-        emptyState={
-          <EmptyState
-            message={
-              !codes ? (
-                <ErrorFetching />
-              ) : (
-                "This account did not stored any codes before."
-              )
-            }
-            withBorder
-          />
-        }
-        onRowSelect={onRowSelect}
-      />
+    <Box mt={{ base: 4, md: 8 }}>
+      <CodeTitle onViewMore={onViewMore} totalData={totalData} />
+      {isMobileDetail && (
+        <StoredCodesBody
+          codes={codes}
+          isLoading={isLoading}
+          emptyState={
+            <EmptyState
+              message={
+                !codes ? (
+                  <ErrorFetching />
+                ) : (
+                  "This account did not stored any codes before."
+                )
+              }
+              withBorder
+            />
+          }
+          onRowSelect={onRowSelect}
+          onViewMore={onViewMore}
+        />
+      )}
       {!!totalData &&
         (onViewMore
-          ? totalData > 5 && <ViewMore onClick={onViewMore} />
+          ? totalData > 5 && !isMobile && <ViewMore onClick={onViewMore} />
           : totalData > 10 && (
               <Pagination
                 currentPage={currentPage}
diff --git a/src/lib/pages/account-details/components/tables/codes/index.ts b/src/lib/pages/account-details/components/tables/codes/index.ts
new file mode 100644
index 000000000..6367725dd
--- /dev/null
+++ b/src/lib/pages/account-details/components/tables/codes/index.ts
@@ -0,0 +1,2 @@
+export * from "./StoredCodesBody";
+export * from "./StoredCodesTable";
diff --git a/src/lib/pages/account-details/components/tables/index.ts b/src/lib/pages/account-details/components/tables/index.ts
index bc8c82699..00478cd5a 100644
--- a/src/lib/pages/account-details/components/tables/index.ts
+++ b/src/lib/pages/account-details/components/tables/index.ts
@@ -1,8 +1,9 @@
-export * from "./AdminContractsTable";
+export * from "./redelegation";
+export * from "./nonRedelegatable";
 export * from "./bonded";
+export * from "./txs";
+export * from "./codes";
 export * from "./InstantiatedContractsTable";
-export * from "./nonRedelegatable";
-export * from "./OpenedProposalsTable";
-export * from "./redelegation";
-export * from "./StoredCodesTable";
-export * from "./TxsTable";
+export * from "./ContractsBody";
+export * from "./AdminContractsTable";
+export * from "./proposals";
diff --git a/src/lib/pages/account-details/components/tables/proposals/OpenProposalsBody.tsx b/src/lib/pages/account-details/components/tables/proposals/OpenProposalsBody.tsx
new file mode 100644
index 000000000..ab3cdfbdc
--- /dev/null
+++ b/src/lib/pages/account-details/components/tables/proposals/OpenProposalsBody.tsx
@@ -0,0 +1,41 @@
+import { Flex } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+import { ProposalCard } from "lib/components/card/ProposalCard";
+import { Loading } from "lib/components/Loading";
+import { ProposalsTable } from "lib/components/table";
+import type { Option, Proposal } from "lib/types";
+
+interface OpenedProposalsBodyProps {
+  proposals: Option<Proposal[]>;
+  isLoading: boolean;
+  emptyState: JSX.Element;
+  onViewMore?: () => void;
+}
+
+export const OpenedProposalsBody = ({
+  proposals,
+  isLoading,
+  emptyState,
+  onViewMore,
+}: OpenedProposalsBodyProps) => {
+  const isMobile = useMobile();
+  if (isLoading) return <Loading />;
+  if (!proposals?.length) return emptyState;
+  if (isMobile && !onViewMore)
+    return (
+      <Flex direction="column" gap={4} w="full" mt={4}>
+        {proposals.map((proposal) => (
+          <ProposalCard key={proposal.proposalId} proposal={proposal} />
+        ))}
+      </Flex>
+    );
+  if (isMobile && onViewMore) return null;
+  return (
+    <ProposalsTable
+      proposals={proposals}
+      isLoading={isLoading}
+      emptyState={emptyState}
+    />
+  );
+};
diff --git a/src/lib/pages/account-details/components/tables/OpenedProposalsTable.tsx b/src/lib/pages/account-details/components/tables/proposals/OpenedProposalsTable.tsx
similarity index 54%
rename from src/lib/pages/account-details/components/tables/OpenedProposalsTable.tsx
rename to src/lib/pages/account-details/components/tables/proposals/OpenedProposalsTable.tsx
index af7aeb2bf..8e639fdf4 100644
--- a/src/lib/pages/account-details/components/tables/OpenedProposalsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/proposals/OpenedProposalsTable.tsx
@@ -1,14 +1,18 @@
 import { Box } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
-import { ErrorFetching } from "../ErrorFetching";
+import { ErrorFetching } from "../../ErrorFetching";
+import { MobileTitle } from "../../mobile/MobileTitle";
+import { useMobile } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
-import { ProposalsTable, TableTitle, ViewMore } from "lib/components/table";
+import { TableTitle, ViewMore } from "lib/components/table";
 import { useProposalsByWalletAddressPagination } from "lib/services/proposalService";
 import type { HumanAddr, Option } from "lib/types";
 
+import { OpenedProposalsBody } from "./OpenProposalsBody";
+
 interface OpenedProposalsTableProps {
   walletAddress: HumanAddr;
   scrollComponentId: string;
@@ -17,6 +21,30 @@ interface OpenedProposalsTableProps {
   onViewMore?: () => void;
 }
 
+const ProposalTitle = ({
+  onViewMore,
+  totalData,
+}: {
+  onViewMore: OpenedProposalsTableProps["onViewMore"];
+  totalData: Option<number>;
+}) => {
+  const isMobile = useMobile();
+  if (isMobile && onViewMore)
+    return (
+      <MobileTitle
+        title="Opened Proposals"
+        count={totalData ?? 0}
+        onViewMore={onViewMore}
+      />
+    );
+  return (
+    <TableTitle
+      title="Opened Proposals"
+      count={totalData ?? 0}
+      mb={{ base: 0, md: 2 }}
+    />
+  );
+};
 export const OpenedProposalsTable = ({
   walletAddress,
   scrollComponentId,
@@ -56,28 +84,38 @@ export const OpenedProposalsTable = ({
     setPageSize(size);
     setCurrentPage(1);
   };
+  const isMobile = useMobile();
+  let isMobileDetail = null;
+  if (isMobile && onViewMore) {
+    isMobileDetail = false;
+  } else {
+    isMobileDetail = true;
+  }
   return (
-    <Box mt={8}>
-      <TableTitle title="Opened Proposals" count={totalData ?? 0} mb={2} />
-      <ProposalsTable
-        proposals={proposals}
-        isLoading={isLoading}
-        emptyState={
-          <EmptyState
-            message={
-              !proposals ? (
-                <ErrorFetching />
-              ) : (
-                "This account did not open any proposals before."
-              )
-            }
-            withBorder
-          />
-        }
-      />
+    <Box mt={{ base: 4, md: 8 }}>
+      <ProposalTitle totalData={totalData} onViewMore={onViewMore} />
+      {isMobileDetail && (
+        <OpenedProposalsBody
+          proposals={proposals}
+          isLoading={isLoading}
+          emptyState={
+            <EmptyState
+              message={
+                !proposals ? (
+                  <ErrorFetching />
+                ) : (
+                  "This account did not open any proposals before."
+                )
+              }
+              withBorder
+            />
+          }
+          onViewMore={onViewMore}
+        />
+      )}
       {!!totalData &&
         (onViewMore
-          ? totalData > 5 && <ViewMore onClick={onViewMore} />
+          ? totalData > 5 && !isMobile && <ViewMore onClick={onViewMore} />
           : totalData > 10 && (
               <Pagination
                 currentPage={currentPage}
diff --git a/src/lib/pages/account-details/components/tables/proposals/index.ts b/src/lib/pages/account-details/components/tables/proposals/index.ts
new file mode 100644
index 000000000..a3adf3e1e
--- /dev/null
+++ b/src/lib/pages/account-details/components/tables/proposals/index.ts
@@ -0,0 +1 @@
+export * from "./OpenedProposalsTable";
diff --git a/src/lib/pages/account-details/components/tables/txs/TxsAlert.tsx b/src/lib/pages/account-details/components/tables/txs/TxsAlert.tsx
new file mode 100644
index 000000000..d9acad76c
--- /dev/null
+++ b/src/lib/pages/account-details/components/tables/txs/TxsAlert.tsx
@@ -0,0 +1,18 @@
+import { Alert, AlertDescription } from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+
+export const TxsAlert = () => {
+  return (
+    <Alert my={6} variant="error" gap={4}>
+      <CustomIcon name="alert-circle-solid" boxSize={4} color="error.main" />
+      <AlertDescription>
+        This account has a high volume of transactions. Kindly note that{" "}
+        <span style={{ fontWeight: 700 }}>
+          we are only able to display up to 50 recent filtered transactions
+        </span>{" "}
+        at the time due to the large number of transactions.
+      </AlertDescription>
+    </Alert>
+  );
+};
diff --git a/src/lib/pages/account-details/components/tables/txs/TxsBody.tsx b/src/lib/pages/account-details/components/tables/txs/TxsBody.tsx
new file mode 100644
index 000000000..d2fa3097c
--- /dev/null
+++ b/src/lib/pages/account-details/components/tables/txs/TxsBody.tsx
@@ -0,0 +1,44 @@
+import { Flex } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+import { TransactionCard } from "lib/components/card/TransactionCard";
+import { Loading } from "lib/components/Loading";
+import { TransactionsTable } from "lib/components/table";
+import type { Option, Transaction } from "lib/types";
+
+interface TxsBodyProps {
+  transactions: Option<Transaction[]>;
+  isLoading: boolean;
+  emptyState: JSX.Element;
+  showRelations: boolean;
+  onViewMore?: () => void;
+}
+
+export const TxsBody = ({
+  transactions,
+  isLoading,
+  emptyState,
+  showRelations,
+  onViewMore,
+}: TxsBodyProps) => {
+  const isMobile = useMobile();
+  if (isLoading) return <Loading />;
+  if (!transactions?.length) return emptyState;
+  if (isMobile && !onViewMore)
+    return (
+      <Flex direction="column" gap={4} w="full" mt={4}>
+        {transactions.map((transaction) => (
+          <TransactionCard transaction={transaction} key={transaction.hash} />
+        ))}
+      </Flex>
+    );
+  if (isMobile && onViewMore) return null;
+  return (
+    <TransactionsTable
+      transactions={transactions}
+      isLoading={isLoading}
+      emptyState={emptyState}
+      showRelations={showRelations}
+    />
+  );
+};
diff --git a/src/lib/pages/account-details/components/tables/TxsTable.tsx b/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx
similarity index 64%
rename from src/lib/pages/account-details/components/tables/TxsTable.tsx
rename to src/lib/pages/account-details/components/tables/txs/TxsTable.tsx
index 7fcddd8bc..40c9ef48c 100644
--- a/src/lib/pages/account-details/components/tables/TxsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx
@@ -1,14 +1,15 @@
-import { Alert, AlertDescription, Box, Flex } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 import { useEffect, useState } from "react";
 
-import { ErrorFetching } from "../ErrorFetching";
-import { CustomIcon } from "lib/components/icon";
+import { ErrorFetching } from "../../ErrorFetching";
+import { MobileTitle } from "../../mobile/MobileTitle";
+import { useMobile } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import type { EmptyStateProps } from "lib/components/state";
 import { EmptyState } from "lib/components/state";
-import { TableTitle, TransactionsTable, ViewMore } from "lib/components/table";
+import { TableTitle, ViewMore } from "lib/components/table";
 import { TxFilterSelection } from "lib/components/TxFilterSelection";
 import { TxRelationSelection } from "lib/components/TxRelationSelection";
 import { DEFAULT_TX_FILTERS } from "lib/data";
@@ -18,6 +19,10 @@ import {
 } from "lib/services/txService";
 import type { HumanAddr, Option, Transaction, TxFilters } from "lib/types";
 
+import { TxsAlert } from "./TxsAlert";
+import { TxsBody } from "./TxsBody";
+import { TxsTop } from "./TxsTop";
+
 interface TxsTableProps {
   walletAddress: HumanAddr;
   accountId?: Option<number>;
@@ -42,6 +47,33 @@ const getEmptyStateProps = (
   };
 };
 
+const TxTitle = ({
+  onViewMore,
+  failureReason,
+  txsCount,
+}: {
+  onViewMore: TxsTableProps["onViewMore"];
+  failureReason: unknown;
+  txsCount: number;
+}) => {
+  const isMobile = useMobile();
+
+  if (isMobile && onViewMore)
+    return (
+      <MobileTitle
+        title="Transactions"
+        count={failureReason ? "N/A" : txsCount}
+        onViewMore={onViewMore}
+      />
+    );
+  return (
+    <TableTitle
+      title="Transactions"
+      count={failureReason ? "N/A" : txsCount}
+      mb={2}
+    />
+  );
+};
 export const TxsTable = ({
   walletAddress,
   accountId,
@@ -113,50 +145,41 @@ export const TxsTable = ({
   useEffect(() => {
     if (failureReason) setPageSize(50);
   }, [failureReason, setPageSize]);
-
+  const isMobile = useMobile();
   return (
-    <Box mt={8}>
-      <Flex direction="row" justify="space-between" alignItems="center">
-        <TableTitle
-          title="Transactions"
-          count={txsCount === undefined ? "N/A" : txsCount}
-          mb={2}
-        />
-        {!onViewMore && (
-          <Flex gap={4}>
-            <TxRelationSelection
-              setValue={(value: Option<boolean>) => {
-                resetPagination();
-                setIsSigner(value);
-              }}
-              w="200px"
-            />
-            <TxFilterSelection
-              result={filterSelected}
-              setResult={handleSetFilters}
-              boxWidth="285px"
-              placeholder="All"
-            />
-          </Flex>
-        )}
-      </Flex>
-      {Boolean(failureReason) && transactions?.length && (
-        <Alert my={6} variant="error" gap={4}>
-          <CustomIcon
-            name="alert-circle-solid"
-            boxSize={4}
-            color="error.main"
+    <Box mt={{ base: 4, md: 8 }}>
+      <TxsTop
+        title={
+          <TxTitle
+            onViewMore={onViewMore}
+            failureReason={failureReason}
+            txsCount={10} // TODO: txsCount
+          />
+        }
+        onViewMore={onViewMore}
+        relationSelection={
+          <TxRelationSelection
+            setValue={(value: Option<boolean>) => {
+              resetPagination();
+              setIsSigner(value);
+            }}
+            w={{ base: "full", md: "200px" }}
+            size={{ base: "md", md: "lg" }}
           />
-          <AlertDescription>
-            This account has a high volume of transactions. Kindly note that{" "}
-            <span style={{ fontWeight: 700 }}>
-              we are only able to display up to 50 recent filtered transactions
-            </span>{" "}
-            at the time due to the large number of transactions.
-          </AlertDescription>
-        </Alert>
-      )}
-      <TransactionsTable
+        }
+        txTypeSelection={
+          <TxFilterSelection
+            result={filterSelected}
+            setResult={handleSetFilters}
+            boxWidth={{ base: "full", md: "285px" }}
+            placeholder="All"
+            size={{ base: "md", md: "lg" }}
+            tagSize={{ base: "sm", md: "md" }}
+          />
+        }
+      />
+      {Boolean(failureReason) && transactions?.length && <TxsAlert />}
+      <TxsBody
         transactions={transactions}
         isLoading={isLoading || txsCountLoading}
         emptyState={
@@ -166,13 +189,13 @@ export const TxsTable = ({
           />
         }
         showRelations
+        onViewMore={onViewMore}
       />
       {Boolean(transactions?.length) &&
         (onViewMore
           ? !txsCountLoading &&
-            (txsCount === undefined || txsCount > 5) && (
-              <ViewMore onClick={onViewMore} />
-            )
+            (txsCount === undefined || txsCount > 5) &&
+            !isMobile && <ViewMore onClick={onViewMore} />
           : txsCount &&
             txsCount > 10 && (
               <Pagination
diff --git a/src/lib/pages/account-details/components/tables/txs/TxsTop.tsx b/src/lib/pages/account-details/components/tables/txs/TxsTop.tsx
new file mode 100644
index 000000000..7ce47dbad
--- /dev/null
+++ b/src/lib/pages/account-details/components/tables/txs/TxsTop.tsx
@@ -0,0 +1,36 @@
+import { Flex } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+
+interface TxsTopProps {
+  title: ReactNode;
+  onViewMore?: () => void;
+  relationSelection: ReactNode;
+  txTypeSelection: ReactNode;
+}
+export const TxsTop = ({
+  title,
+  onViewMore,
+  relationSelection,
+  txTypeSelection,
+}: TxsTopProps) => {
+  return (
+    <Flex
+      direction={{ base: "column", md: "row" }}
+      justify="space-between"
+      alignItems={{ base: "start", md: "center" }}
+    >
+      {title}
+      {!onViewMore && (
+        <Flex
+          gap={{ base: 6, md: 4 }}
+          mt={{ base: 4, md: 0 }}
+          w={{ base: "full", md: "auto" }}
+          direction={{ base: "column", md: "row" }}
+        >
+          {relationSelection}
+          {txTypeSelection}
+        </Flex>
+      )}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/components/tables/txs/index.ts b/src/lib/pages/account-details/components/tables/txs/index.ts
new file mode 100644
index 000000000..64533f525
--- /dev/null
+++ b/src/lib/pages/account-details/components/tables/txs/index.ts
@@ -0,0 +1,2 @@
+export * from "./TxsBody";
+export * from "./TxsTable";
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index c32459d3c..a3fc7aa5e 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -1,22 +1,9 @@
-import {
-  Flex,
-  Heading,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-  Text,
-  Image,
-} from "@chakra-ui/react";
+import { Flex, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import { useValidateAddress, useWasmConfig } from "lib/app-provider";
-import { Breadcrumb } from "lib/components/Breadcrumb";
-import { CopyLink } from "lib/components/CopyLink";
 import { CustomTab } from "lib/components/CustomTab";
-import { CustomIcon } from "lib/components/icon";
-import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { InvalidState } from "lib/components/state";
 import { useAccountDetailsTableCounts } from "lib/model/account";
@@ -27,13 +14,9 @@ import {
   usePublicProjectBySlug,
 } from "lib/services/publicProjectService";
 import type { HumanAddr } from "lib/types";
-import {
-  formatPrice,
-  getFirstQueryParam,
-  scrollToTop,
-  truncate,
-} from "lib/utils";
+import { getFirstQueryParam, scrollToTop } from "lib/utils";
 
+import { AccountTop } from "./components/AccountTop";
 import { AssetsSection } from "./components/asset";
 import { DelegationsSection } from "./components/delegations";
 import {
@@ -43,7 +26,7 @@ import {
   StoredCodesTable,
   TxsTable,
 } from "./components/tables";
-import { useAccountTotalValue } from "./data";
+import { TotalAccountValue } from "./components/TotalAccountValue";
 
 enum TabIndex {
   Overview,
@@ -72,7 +55,6 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
   const { data: accountId } = useAccountId(accountAddress);
 
   const publicDetail = publicInfoBySlug?.details;
-
   const {
     tableCounts,
     refetchCodesCount,
@@ -82,8 +64,6 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
     loadingState: { txCountLoading },
   } = useAccountDetailsTableCounts(accountAddress, accountId);
 
-  const { totalAccountValue, isLoading } = useAccountTotalValue(accountAddress);
-
   const handleTabChange = (tab: TabIndex) => {
     AmpTrackUseTab(TabIndex[tab]);
     setTabIndex(tab);
@@ -94,72 +74,13 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
 
   return (
     <>
-      <Flex direction="column" mb={6}>
-        {publicDetail && (
-          <Breadcrumb
-            items={[
-              { text: "Public Projects", href: "/projects" },
-              {
-                text: publicDetail?.name,
-                href: `/projects/${publicInfo?.slug}`,
-              },
-              { text: truncate(accountAddress) },
-            ]}
-            mb={6}
-          />
-        )}
-        <Flex direction="column" gap={2}>
-          <Flex gap={1} minH="36px" align="center">
-            <CustomIcon name="wallet" boxSize={5} color="secondary.main" />
-            {publicDetail?.logo && (
-              <Image
-                src={publicDetail.logo}
-                borderRadius="full"
-                alt={publicDetail.name}
-                width={7}
-                height={7}
-              />
-            )}
-            <Heading as="h5" variant="h5">
-              {displayName}
-            </Heading>
-          </Flex>
-          <Flex gap={2}>
-            <Text fontWeight={500} color="text.dark" variant="body2">
-              Wallet Address:
-            </Text>
-            <CopyLink
-              value={accountAddress}
-              amptrackSection="account_top"
-              type="user_address"
-            />
-          </Flex>
-        </Flex>
-      </Flex>
-      {publicInfo?.description && (
-        <Flex
-          direction="column"
-          bg="gray.900"
-          maxW="100%"
-          borderRadius="8px"
-          py={4}
-          px={4}
-          my={6}
-          flex="1"
-        >
-          <Flex alignItems="center" gap={1} minH="32px">
-            <CustomIcon name="website" ml={0} mb={2} color="gray.600" />
-            <Text variant="body2" fontWeight={500} color="text.dark">
-              Public Account Description
-            </Text>
-          </Flex>
-          <Text variant="body2" color="text.main" mb={1}>
-            {publicInfo?.description}
-          </Text>
-        </Flex>
-      )}
-
-      <Tabs index={tabIndex} isLazy lazyBehavior="keepMounted">
+      <AccountTop
+        accountAddress={accountAddress}
+        publicDetail={publicDetail}
+        displayName={displayName}
+        publicInfo={publicInfo}
+      />
+      <Tabs index={tabIndex}>
         <TabList
           borderBottom="1px solid"
           borderColor="gray.700"
@@ -220,39 +141,20 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
         </TabList>
         <TabPanels>
           <TabPanel p={0}>
+            <TotalAccountValue accountAddress={accountAddress} />
             <Flex
-              mt={8}
-              pb={8}
-              direction="column"
-              borderBottom="1px solid"
-              borderBottomColor="gray.700"
+              borderBottom={{ base: "0px", md: "1px solid" }}
+              borderBottomColor={{ base: "transparent", md: "gray.700" }}
             >
-              <Text variant="body2" fontWeight={500} color="text.dark">
-                Total Account Value
-              </Text>
-              {isLoading ? (
-                <Loading />
-              ) : (
-                <Heading
-                  as="h5"
-                  variant="h5"
-                  color={
-                    !totalAccountValue || totalAccountValue.eq(0)
-                      ? "text.dark"
-                      : "text.main"
-                  }
-                >
-                  {totalAccountValue ? formatPrice(totalAccountValue) : "N/A"}
-                </Heading>
-              )}
-            </Flex>
-            <Flex borderBottom="1px solid" borderBottomColor="gray.700">
               <AssetsSection
                 walletAddress={accountAddress}
                 onViewMore={() => handleTabChange(TabIndex.Assets)}
               />
             </Flex>
-            <Flex borderBottom="1px solid" borderBottomColor="gray.700">
+            <Flex
+              borderBottom={{ base: "0px", md: "1px solid" }}
+              borderBottomColor={{ base: "transparent", md: "gray.700" }}
+            >
               <DelegationsSection
                 walletAddress={accountAddress}
                 onViewMore={() => handleTabChange(TabIndex.Delegations)}
@@ -359,7 +261,6 @@ const AccountDetails = () => {
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_ACCOUNT_DETAIL);
   }, [router.isReady]);
-
   return (
     <PageContainer>
       {validateUserAddress(accountAddressParam) &&
diff --git a/src/lib/pages/block-details/components/BlockDetailsTop.tsx b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
index c3b02ffd5..0e8381c08 100644
--- a/src/lib/pages/block-details/components/BlockDetailsTop.tsx
+++ b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
@@ -7,7 +7,8 @@ import {
   Button,
 } from "@chakra-ui/react";
 
-import { useBaseApiRoute, useInternalNavigate } from "lib/app-provider";
+import { useBaseApiRoute } from "lib/app-provider";
+import { AppLink } from "lib/components/AppLink";
 import { CopyLink } from "lib/components/CopyLink";
 import { DotSeparator } from "lib/components/DotSeparator";
 import { CustomIcon } from "lib/components/icon";
@@ -29,7 +30,7 @@ interface BlockDetailsTopProps {
 export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
   const block = Number(blockData.height);
   const lcdEndpoint = useBaseApiRoute("rest");
-  const navigate = useInternalNavigate();
+
   const openLcdPage = () =>
     openNewTab(
       `${lcdEndpoint}/cosmos/base/tendermint/v1beta1/blocks/${blockData.height}`
@@ -37,78 +38,84 @@ export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
   const disablePrevious = block <= 1;
   return (
     <Flex
-      mb={12}
-      pb={12}
-      mt={6}
+      justify="space-between"
+      mb={{ base: 8, md: 12 }}
+      pb={{ base: 8, md: 12 }}
       borderBottomColor="gray.700"
       borderBottomWidth="1px"
     >
-      <Flex direction="column" gap={2} width="full">
-        <Flex justifyContent="space-between" alignItems="center" width="full">
-          <Flex alignItems="center">
+      <Flex direction="column" gap={1} w="full">
+        <Flex
+          justify="space-between"
+          align="center"
+          width="full"
+          mt={{ base: 2, md: 5 }}
+          mb={{ base: 2, md: 0 }}
+        >
+          <Flex align="center">
             <CustomIcon name="block" boxSize={5} color="secondary.main" />
-            <Heading as="h5" variant="h5" className="ellipsis">
+            <Heading
+              as="h5"
+              variant={{ base: "h6", md: "h5" }}
+              className="ellipsis"
+            >
               {blockData.height}
             </Heading>
           </Flex>
-          <Flex gap={2}>
+          <Flex gap={{ base: 1, md: 2 }} align="center">
             {!disablePrevious && (
+              <AppLink href={`/blocks/${block - 1}`}>
+                <StyledIconButton
+                  icon={<CustomIcon name="chevron-left" />}
+                  variant="ghost-gray"
+                />
+              </AppLink>
+            )}
+            <AppLink href={`/blocks/${block + 1}`}>
               <StyledIconButton
-                icon={<CustomIcon name="chevron-left" />}
+                icon={<CustomIcon name="chevron-right" />}
                 variant="ghost-gray"
-                onClick={() =>
-                  navigate({
-                    pathname: "/blocks/[height]",
-                    query: { height: block - 1 },
-                  })
-                }
               />
-            )}
-            <StyledIconButton
-              icon={<CustomIcon name="chevron-right" />}
-              variant="ghost-gray"
-              onClick={() =>
-                navigate({
-                  pathname: "/blocks/[height]",
-                  query: { height: block + 1 },
-                })
-              }
-            />
+            </AppLink>
             <Button
               variant="ghost-gray"
-              padding={2}
-              rightIcon={
-                <CustomIcon name="launch" boxSize={3} color="text.dark" />
-              }
+              size={{ base: "sm", md: "md" }}
+              rightIcon={<CustomIcon name="launch" boxSize={3} />}
               onClick={openLcdPage}
             >
               View in JSON
             </Button>
           </Flex>
         </Flex>
-        <Flex direction="column" gap={1}>
-          <Flex gap={2}>
-            <Text variant="body2" color="text.dark">
-              Block Hash:
-            </Text>
-            <CopyLink
-              value={blockData.hash.toUpperCase()}
-              amptrackSection="block_details_top"
-              type="block_hash"
-            />
-          </Flex>
-          <Flex gap={2} alignItems="center">
-            <Flex gap={1} alignItems="center">
-              <CustomIcon name="history" boxSize={3} color="gray.600" />
-              <Text variant="body2" color="text.dark">
-                {dateFromNow(blockData.timestamp)}
-              </Text>
-            </Flex>
-            <DotSeparator />
-            <Text variant="body2" color="text.dark">
-              {formatUTC(blockData.timestamp)}
+        <Flex
+          gap={{ base: 0, md: 2 }}
+          direction={{ base: "column", md: "row" }}
+        >
+          <Text
+            variant="body2"
+            fontWeight={500}
+            color="text.dark"
+            display="inline"
+          >
+            Block Hash:
+          </Text>
+          <CopyLink
+            value={blockData.hash.toUpperCase()}
+            amptrackSection="block_details_top"
+            type="block_hash"
+          />
+        </Flex>
+        <Flex gap={2} mt={1} alignItems="center">
+          <Flex gap={1} alignItems="center">
+            <CustomIcon name="history" boxSize={3} color="gray.600" />
+            <Text variant={{ base: "body3", md: "body2" }} color="text.dark">
+              {dateFromNow(blockData.timestamp)}
             </Text>
           </Flex>
+          <DotSeparator />
+          <Text variant={{ base: "body3", md: "body2" }} color="text.dark">
+            {formatUTC(blockData.timestamp)}
+          </Text>
         </Flex>
       </Flex>
     </Flex>
diff --git a/src/lib/pages/block-details/components/BlockInfo.tsx b/src/lib/pages/block-details/components/BlockInfo.tsx
index b4e9a496d..4353de52b 100644
--- a/src/lib/pages/block-details/components/BlockInfo.tsx
+++ b/src/lib/pages/block-details/components/BlockInfo.tsx
@@ -13,17 +13,25 @@ export const BlockInfo = ({ blockData }: BlockInfoProps) => {
   return (
     <Box mb={12}>
       <Heading as="h6" variant="h6" mb={6}>
-        Block Information
+        Block Info
       </Heading>
-      <Flex gap={16}>
-        <LabelText label="Network">{blockData.network}</LabelText>
-        <LabelText label="Gas (Used/Wanted)">
-          {`${blockData.gasUsed ? formatInteger(blockData.gasUsed) : 0} / ${
-            blockData.gasLimit ? formatInteger(blockData.gasLimit) : 0
-          }`}
-        </LabelText>
-        <LabelText label="Proposed by">
-          <ValidatorBadge validator={blockData.proposer} badgeSize={6} />
+      <Flex gap={{ base: 4, md: 12 }} direction={{ base: "column", md: "row" }}>
+        <Flex direction="row" flex="1" maxW={{ md: "400px" }}>
+          <LabelText flex="1" label="Network">
+            {blockData.network}
+          </LabelText>
+          <LabelText flex="1" label="Gas (Used/Wanted)">
+            {`${blockData.gasUsed ? formatInteger(blockData.gasUsed) : 0} / ${
+              blockData.gasLimit ? formatInteger(blockData.gasLimit) : 0
+            }`}
+          </LabelText>
+        </Flex>
+        <LabelText label="Proposed by" flex="1">
+          <ValidatorBadge
+            validator={blockData.proposer}
+            badgeSize={6}
+            hasLabel={false}
+          />
         </LabelText>
       </Flex>
     </Box>
diff --git a/src/lib/pages/block-details/components/BlockTxsTable.tsx b/src/lib/pages/block-details/components/BlockTxsTable.tsx
index e30aa3f86..4fc662c4e 100644
--- a/src/lib/pages/block-details/components/BlockTxsTable.tsx
+++ b/src/lib/pages/block-details/components/BlockTxsTable.tsx
@@ -1,5 +1,8 @@
+import { Flex } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
+import { useMobile } from "lib/app-provider";
+import { TransactionCard } from "lib/components/card/TransactionCard";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
@@ -32,7 +35,7 @@ export const BlockTxsTable = ({ height }: BlockTxsTableProps) => {
       isDisabled: false,
     },
   });
-
+  const isMobile = useMobile();
   const { data: blockTxs, isLoading: isBlockTxsLoading } =
     useTxsByBlockHeightPagination(height, pageSize, offset);
 
@@ -45,22 +48,41 @@ export const BlockTxsTable = ({ height }: BlockTxsTableProps) => {
     setPageSize(size);
     setCurrentPage(1);
   };
-
+  if (!blockTxs?.length)
+    return (
+      <EmptyState
+        imageVariant="empty"
+        message="There are no submitted transactions in this block"
+        withBorder
+      />
+    );
   return (
     <>
-      <TransactionsTable
-        transactions={blockTxs}
-        isLoading={isBlockTxsLoading}
-        emptyState={
-          <EmptyState
-            imageVariant="empty"
-            message="There are no submitted transactions in this block"
-            withBorder
-          />
-        }
-        showRelations={false}
-        showTimestamp={false}
-      />
+      {isMobile ? (
+        <Flex direction="column" gap={4} w="full" mt={4}>
+          {blockTxs.map((transaction) => (
+            <TransactionCard
+              transaction={transaction}
+              showRelations={false}
+              showTimestamp={false}
+            />
+          ))}
+        </Flex>
+      ) : (
+        <TransactionsTable
+          transactions={blockTxs}
+          isLoading={isBlockTxsLoading}
+          emptyState={
+            <EmptyState
+              imageVariant="empty"
+              message="There are no submitted transactions in this block"
+              withBorder
+            />
+          }
+          showRelations={false}
+          showTimestamp={false}
+        />
+      )}
       {blockTxsCount > 10 && (
         <Pagination
           currentPage={currentPage}
diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx
index 0b2ebe843..7146cb701 100644
--- a/src/lib/pages/block-details/index.tsx
+++ b/src/lib/pages/block-details/index.tsx
@@ -19,7 +19,6 @@ const BlockDetail = () => {
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_BLOCK_DETAIL);
   }, [router.isReady]);
-
   if (isLoading) return <Loading />;
 
   return (
diff --git a/src/lib/pages/blocks/components/BlocksTable.tsx b/src/lib/pages/blocks/components/BlocksTable.tsx
index 6095bc20e..7519707f3 100644
--- a/src/lib/pages/blocks/components/BlocksTable.tsx
+++ b/src/lib/pages/blocks/components/BlocksTable.tsx
@@ -1,5 +1,8 @@
+import { Flex } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
+import { useMobile } from "lib/app-provider";
+import { BlockCard } from "lib/components/card/BlockCard";
 import { Loading } from "lib/components/Loading";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
@@ -56,7 +59,7 @@ export const BlocksTable = ({ isViewMore }: BlocksTableProps) => {
     setPageSize(size);
     setCurrentPage(1);
   };
-
+  const isMobile = useMobile();
   if (isLoading) return <Loading />;
   if (error)
     return (
@@ -78,15 +81,23 @@ export const BlocksTable = ({ isViewMore }: BlocksTableProps) => {
 
   return (
     <>
-      <TableContainer>
-        <BlocksHeader
-          templateColumns={TEMPLATE_COLUMNS}
-          scrollComponentId={scrollComponentId}
-        />
-        {blocksData.map((block) => (
-          <BlocksRow templateColumns={TEMPLATE_COLUMNS} blockData={block} />
-        ))}
-      </TableContainer>
+      {isMobile ? (
+        <Flex direction="column" gap={4} w="full" mt={4}>
+          {blocksData.map((block) => (
+            <BlockCard blockData={block} />
+          ))}
+        </Flex>
+      ) : (
+        <TableContainer>
+          <BlocksHeader
+            templateColumns={TEMPLATE_COLUMNS}
+            scrollComponentId={scrollComponentId}
+          />
+          {blocksData.map((block) => (
+            <BlocksRow templateColumns={TEMPLATE_COLUMNS} blockData={block} />
+          ))}
+        </TableContainer>
+      )}
       {!isViewMore && blockCount > 10 && (
         <Pagination
           currentPage={currentPage}
diff --git a/src/lib/pages/blocks/index.tsx b/src/lib/pages/blocks/index.tsx
index f692c4dfa..2222e9afc 100644
--- a/src/lib/pages/blocks/index.tsx
+++ b/src/lib/pages/blocks/index.tsx
@@ -15,10 +15,10 @@ const BlocksPage = () => {
 
   return (
     <PageContainer>
-      <Heading as="h5" variant="h5">
+      <Heading as="h5" variant="h5" minH="36px">
         Blocks
       </Heading>
-      <Text variant="body2" fontWeight={500} color="text.dark" mt={1} mb={8}>
+      <Text variant="body2" fontWeight={500} color="text.dark" mb={8}>
         This page displays all blocks on this network sorted by recency
       </Text>
       <BlocksTable />
diff --git a/src/lib/pages/code-details/components/CTASection.tsx b/src/lib/pages/code-details/components/CTASection.tsx
index ad1a0d7c6..0077cd5ab 100644
--- a/src/lib/pages/code-details/components/CTASection.tsx
+++ b/src/lib/pages/code-details/components/CTASection.tsx
@@ -10,9 +10,8 @@ import type { CodeInfo } from "lib/types";
 export const CTASection = observer((codeInfo: CodeInfo) => {
   const { isCodeIdSaved, getCodeLocalInfo } = useCodeStore();
   const isSaved = isCodeIdSaved(codeInfo.id);
-
   return (
-    <Flex gap={4}>
+    <Flex gap={{ base: 2, md: 4 }} my={{ base: 8, md: 0 }} justify="center">
       {(getCodeLocalInfo(codeInfo.id)?.name || isSaved) && (
         <SaveOrEditCodeModal mode="edit" codeInfo={codeInfo} />
       )}
@@ -20,7 +19,7 @@ export const CTASection = observer((codeInfo: CodeInfo) => {
         instantiatePermission={codeInfo.instantiatePermission}
         permissionAddresses={codeInfo.permissionAddresses}
         codeId={codeInfo.id}
-        size="md"
+        size={{ base: "sm", md: "md" }}
       />
       {isSaved ? (
         <RemoveCodeModal
@@ -29,6 +28,7 @@ export const CTASection = observer((codeInfo: CodeInfo) => {
           trigger={
             <Button
               variant="outline-gray"
+              size={{ base: "sm", md: "md" }}
               leftIcon={<CustomIcon name="check" />}
             >
               Saved
diff --git a/src/lib/pages/code-details/components/CodeInfoSection.tsx b/src/lib/pages/code-details/components/CodeInfoSection.tsx
index 24f930b19..fcb5fe5aa 100644
--- a/src/lib/pages/code-details/components/CodeInfoSection.tsx
+++ b/src/lib/pages/code-details/components/CodeInfoSection.tsx
@@ -115,9 +115,16 @@ export const CodeInfoSection = ({
   return (
     <Box mb={12}>
       <Heading as="h6" variant="h6" mb={6}>
-        Code Information
+        Code Info
       </Heading>
-      <Grid templateColumns="repeat(5, 1fr)" columnGap={12}>
+      <Grid
+        templateColumns={{
+          base: "1fr 1fr",
+          md: "repeat(5, 1fr)",
+        }}
+        columnGap={12}
+        rowGap={{ base: 6, md: 0 }}
+      >
         <LabelText label="Network">{chainId}</LabelText>
         <LabelText label="Uploaded by">
           <Flex direction="column" gap={1}>
@@ -144,7 +151,10 @@ export const CodeInfoSection = ({
             />
           </Flex>
         </LabelText>
-        <LabelText label="Stored on block">
+        <LabelText
+          label="Stored on block"
+          gridColumn={{ base: "1 / span 2", md: "5 / span 1" }}
+        >
           <Flex direction="column" gap={1}>
             {storedBlockRender}
           </Flex>
diff --git a/src/lib/pages/code-details/components/table/CodeContractsTable.tsx b/src/lib/pages/code-details/components/table/CodeContractsTable.tsx
index 49177303d..ac49e6c44 100644
--- a/src/lib/pages/code-details/components/table/CodeContractsTable.tsx
+++ b/src/lib/pages/code-details/components/table/CodeContractsTable.tsx
@@ -1,8 +1,10 @@
+import { Flex } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import type { ChangeEvent } from "react";
 import { useEffect } from "react";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useMobile } from "lib/app-provider";
+import { InstantiatedContractCard } from "lib/components/card/ContractCard";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { ContractsTable, TableTitle } from "lib/components/table";
@@ -64,7 +66,8 @@ export const CodeContractsTable = observer(
     };
 
     const tableHeaderId = "contractTableHeader";
-
+    const isMobile = useMobile();
+    if (!contracts?.length) return <NoContracts />;
     return (
       <>
         <TableTitle
@@ -72,12 +75,29 @@ export const CodeContractsTable = observer(
           count={totalData ?? 0}
           id={tableHeaderId}
         />
-        <ContractsTable
-          contracts={contracts}
-          isLoading={isLoading}
-          emptyState={<NoContracts />}
-          onRowSelect={onRowSelect}
-        />
+        {isMobile ? (
+          <Flex direction="column" gap={4} w="full" mt={4}>
+            {contracts.map((contractInfo) => (
+              <InstantiatedContractCard
+                contractInfo={contractInfo}
+                key={
+                  contractInfo.name +
+                  contractInfo.contractAddress +
+                  contractInfo.description +
+                  contractInfo.tags +
+                  contractInfo.lists
+                }
+              />
+            ))}
+          </Flex>
+        ) : (
+          <ContractsTable
+            contracts={contracts}
+            isLoading={isLoading}
+            emptyState={<NoContracts />}
+            onRowSelect={onRowSelect}
+          />
+        )}
         {!!totalData && totalData > 10 && (
           <Pagination
             currentPage={currentPage}
diff --git a/src/lib/pages/code-details/components/table/NoContracts.tsx b/src/lib/pages/code-details/components/table/NoContracts.tsx
index 2196da7d8..8318be2ff 100644
--- a/src/lib/pages/code-details/components/table/NoContracts.tsx
+++ b/src/lib/pages/code-details/components/table/NoContracts.tsx
@@ -1,30 +1,35 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import { useCurrentChain } from "lib/app-provider";
+import { useCurrentChain, useMobile } from "lib/app-provider";
 import { ConnectWalletBtn } from "lib/components/button";
 import { EmptyState, StateImage } from "lib/components/state";
 
-const DisconnectedState = () => (
-  <Flex
-    direction="column"
-    alignItems="center"
-    gap={4}
-    py={12}
-    borderY="1px solid"
-    borderColor="gray.700"
-  >
-    <StateImage imageVariant="empty" />
-    <Text variant="body1" color="text.dark">
-      No contract instances from this code.
-    </Text>
-    <Flex align="center" alignItems="center">
-      <Text variant="body1" color="text.dark" mr={2}>
-        In order to instantiate contract from this code, you need to
+const DisconnectedState = () => {
+  const isMobile = useMobile();
+  return (
+    <Flex
+      direction="column"
+      alignItems="center"
+      gap={4}
+      py={12}
+      borderY="1px solid"
+      borderColor="gray.700"
+    >
+      <StateImage imageVariant="empty" />
+      <Text variant="body1" color="text.dark">
+        No contract instances from this code.
       </Text>
-      <ConnectWalletBtn />
+      {!isMobile && (
+        <Flex align="center" alignItems="center">
+          <Text variant="body1" color="text.dark" mr={2}>
+            In order to instantiate contract from this code, you need to
+          </Text>
+          <ConnectWalletBtn />
+        </Flex>
+      )}
     </Flex>
-  </Flex>
-);
+  );
+};
 
 export const NoContracts = () => {
   const { isWalletConnected } = useCurrentChain();
diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index 95d54e2f9..85b85da2e 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { useWasmConfig } from "lib/app-provider";
+import { useWasmConfig, useMobile } from "lib/app-provider";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
@@ -62,6 +62,7 @@ const CodeDetailsBody = observer(
       publicProject,
       lcdCodeData: { codeHash, isLcdCodeLoading, isLcdCodeError },
     } = codeDataState;
+    const isMobile = useMobile();
 
     if (!codeData) return <InvalidCode />;
 
@@ -84,48 +85,50 @@ const CodeDetailsBody = observer(
             { text: codeId.toString() },
           ]}
         />
-        <Flex direction="column" gap={2} w="full" mt={6}>
-          <Flex justify="space-between" align="center">
-            <Flex gap={1}>
-              <CustomIcon name="code" boxSize={5} color="secondary.main" />
-              {publicProject.publicDetail?.logo && (
-                <Image
-                  src={publicProject.publicDetail.logo}
-                  borderRadius="full"
-                  alt={publicProject.publicDetail.name}
-                  width={7}
-                  height={7}
-                />
-              )}
-              <Heading as="h5" variant="h5">
-                {localCodeInfo?.name ??
-                  publicProject.publicCodeData?.name ??
-                  codeId}
-              </Heading>
+        <Flex
+          justify="space-between"
+          mt={{ base: 3, md: 6 }}
+          direction={{ base: "column", md: "row" }}
+        >
+          <Flex direction="column" gap={{ base: 2, md: 1 }}>
+            <Flex
+              justify={{ base: "space-between", md: "start" }}
+              align="center"
+            >
+              <Flex gap={1} minH="36px" align="center">
+                <CustomIcon name="code" boxSize={5} color="secondary.main" />
+                {publicProject.publicDetail?.logo && (
+                  <Image
+                    src={publicProject.publicDetail.logo}
+                    borderRadius="full"
+                    alt={publicProject.publicDetail.name}
+                    width={7}
+                    height={7}
+                  />
+                )}
+                <Heading as="h5" variant={{ base: "h6", md: "h5" }}>
+                  {localCodeInfo?.name ??
+                    publicProject.publicCodeData?.name ??
+                    codeId}
+                </Heading>
+              </Flex>
             </Flex>
-            <CTASection
-              id={codeId}
-              uploader={localCodeInfo?.uploader ?? codeData.uploader}
-              name={localCodeInfo?.name}
-              instantiatePermission={
-                codeData.instantiatePermission ?? AccessConfigPermission.UNKNOWN
-              }
-              permissionAddresses={codeData.permissionAddresses ?? []}
-              contractCount={undefined}
-              cw2Contract={undefined}
-              cw2Version={undefined}
-            />
-          </Flex>
-          <Flex direction="column" gap={1}>
             {publicProject.publicCodeData?.name && (
-              <Flex gap={2}>
+              <Flex
+                mt={{ base: 2, md: 0 }}
+                gap={{ base: 0, md: 2 }}
+                direction={{ base: "column", md: "row" }}
+              >
                 <Text fontWeight={500} color="text.dark" variant="body2">
                   Public Code Name:
                 </Text>
                 <Text variant="body2">{publicProject.publicCodeData.name}</Text>
               </Flex>
             )}
-            <Flex gap={2}>
+            <Flex
+              gap={{ base: 0, md: 2 }}
+              direction={{ base: "column", md: "row" }}
+            >
               <Text fontWeight={500} color="text.dark" variant="body2">
                 Code ID:
               </Text>
@@ -135,7 +138,10 @@ const CodeDetailsBody = observer(
                 type="code_id"
               />
             </Flex>
-            <Flex gap={2}>
+            <Flex
+              gap={{ base: 0, md: 2 }}
+              direction={{ base: "column", md: "row" }}
+            >
               <Text fontWeight={500} color="text.dark" variant="body2">
                 Code Hash:
               </Text>
@@ -145,7 +151,10 @@ const CodeDetailsBody = observer(
                 codeHash={codeHash}
               />
             </Flex>
-            <Flex gap={2}>
+            <Flex
+              gap={{ base: 0, md: 2 }}
+              direction={{ base: "column", md: "row" }}
+            >
               <Text fontWeight={500} color="text.dark" variant="body2">
                 CW2 Info:
               </Text>
@@ -161,16 +170,33 @@ const CodeDetailsBody = observer(
               <GitHubLink github={publicProject.publicCodeData.github} />
             )}
           </Flex>
+          <Flex direction="column" gap={1}>
+            {!isMobile && (
+              <CTASection
+                id={codeId}
+                uploader={localCodeInfo?.uploader ?? codeData.uploader}
+                name={localCodeInfo?.name}
+                instantiatePermission={
+                  codeData.instantiatePermission ??
+                  AccessConfigPermission.UNKNOWN
+                }
+                permissionAddresses={codeData.permissionAddresses ?? []}
+                contractCount={undefined}
+                cw2Contract={undefined}
+                cw2Version={undefined}
+              />
+            )}
+          </Flex>
         </Flex>
         {publicProject.publicCodeData?.description && (
           <PublicDescription
             title="Public Code Description"
             description={publicProject.publicCodeData.description}
             textLine={2}
-            icon={<CustomIcon name="website" ml={0} mb={2} color="gray.600" />}
+            icon={<CustomIcon name="public-project" ml={0} color="gray.600" />}
           />
         )}
-        <Divider borderColor="gray.700" my={12} />
+        <Divider borderColor="gray.700" my={{ base: 6, md: 12 }} />
         <CodeInfoSection codeData={codeData} chainId={chainId} />
         <CodeContractsTable codeId={codeId} />
       </>
diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx
index 527b0af7f..34c798ffc 100644
--- a/src/lib/pages/codes/index.tsx
+++ b/src/lib/pages/codes/index.tsx
@@ -5,7 +5,12 @@ import type { ChangeEvent } from "react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 
-import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
+import {
+  useInternalNavigate,
+  useWasmConfig,
+  useMobile,
+} from "lib/app-provider";
+import { StoredCodeCard } from "lib/components/card/StoredCodeCard";
 import { FilterByPermission } from "lib/components/forms";
 import InputWithIcon from "lib/components/InputWithIcon";
 import PageContainer from "lib/components/PageContainer";
@@ -48,23 +53,21 @@ const RecentCodes = observer(() => {
   }, [router.isReady]);
 
   const isSearching = Boolean(keyword) || permissionValue !== "all";
-
+  const isMobile = useMobile();
   return (
     <PageContainer>
-      <Box pb={12}>
-        <Heading
-          variant="h5"
-          as="h5"
-          minH="36px"
-          display="flex"
-          alignItems="center"
-        >
+      <Box pb={{ base: 0, md: 12 }}>
+        <Heading variant="h5" as="h5" minH="36px">
           Recent Codes
         </Heading>
-        <Text variant="body2" color="text.dark" fontWeight="500">
+        <Text variant="body2" color="text.dark" fontWeight="500" mb={8}>
           These codes are the most recently stored on this network
         </Text>
-        <Flex gap={3} mt={8}>
+        <Flex
+          gap={{ base: 6, md: 3 }}
+          mt={8}
+          direction={{ base: "column", md: "row" }}
+        >
           <InputWithIcon
             placeholder="Search with Code ID or Code Name"
             value={keyword}
@@ -82,22 +85,30 @@ const RecentCodes = observer(() => {
           />
         </Flex>
       </Box>
-      <CodesTable
-        codes={recentCodes}
-        isLoading={isLoading}
-        emptyState={
-          <EmptyState
-            imageVariant={isSearching ? "not-found" : "empty"}
-            message={
-              isSearching
-                ? "No matched codes found"
-                : "Most recent 100 code IDs will display here."
-            }
-            withBorder
-          />
-        }
-        onRowSelect={onRowSelect}
-      />
+      {isMobile ? (
+        <Flex direction="column" gap={4} w="full" mt={4}>
+          {recentCodes.map((code) => (
+            <StoredCodeCard codeInfo={code} />
+          ))}
+        </Flex>
+      ) : (
+        <CodesTable
+          codes={recentCodes}
+          isLoading={isLoading}
+          emptyState={
+            <EmptyState
+              imageVariant={isSearching ? "not-found" : "empty"}
+              message={
+                isSearching
+                  ? "No matched codes found"
+                  : "Most recent 100 code IDs will display here."
+              }
+              withBorder
+            />
+          }
+          onRowSelect={onRowSelect}
+        />
+      )}
     </PageContainer>
   );
 });
diff --git a/src/lib/pages/contract-details/components/CommandSection.tsx b/src/lib/pages/contract-details/components/CommandSection.tsx
index 4e3816f5f..b51e7b128 100644
--- a/src/lib/pages/contract-details/components/CommandSection.tsx
+++ b/src/lib/pages/contract-details/components/CommandSection.tsx
@@ -67,7 +67,11 @@ export const CommandSection = () => {
   };
 
   return (
-    <Flex gap={6}>
+    <Flex
+      gap={{ base: 4, md: 6 }}
+      direction={{ base: "column", md: "row" }}
+      mt={{ base: 4, md: 0 }}
+    >
       <Flex
         direction="column"
         bg="gray.900"
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index 355e7d26f..efce41a1e 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/src/lib/pages/contract-details/components/ContractTop.tsx
@@ -8,7 +8,7 @@ import {
 } from "@chakra-ui/react";
 import router from "next/router";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useMobile } from "lib/app-provider";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { AdminButton } from "lib/components/button";
 import { CopyLink } from "lib/components/CopyLink";
@@ -29,7 +29,7 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
   const navigate = useInternalNavigate();
   const { contractLocalInfo, instantiateInfo, publicProject } = contractData;
   const contractAddress = getFirstQueryParam(router.query.contractAddress);
-
+  const isMobile = useMobile();
   const displayName =
     contractLocalInfo?.name ||
     publicProject.publicInfo?.name ||
@@ -59,6 +59,7 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
             <IconButton
               fontSize="24px"
               variant="none"
+              size={{ base: "sm", md: "md" }}
               aria-label="save"
               icon={
                 contractLocalInfo.lists ? (
@@ -96,120 +97,155 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
   };
 
   return (
-    <Flex justify="space-between" mb={6}>
-      <Flex direction="column" w="full">
-        <Breadcrumb
-          items={[
-            {
-              text: publicName ? "Public Projects" : "Contracts",
-              href: publicName ? "/projects" : "/contracts",
-            },
-            {
-              text: publicName,
-              href: `/projects/${publicProject.publicInfo?.slug}`,
-            },
-            { text: truncate(contractAddress) },
-          ]}
-          mb={6}
-        />
-
-        <Flex direction="column" gap={2} textOverflow="ellipsis" w="full">
-          <Flex justify="space-between" align="center">
-            <Flex gap={1} maxW="670px">
-              <CustomIcon
-                name="contract-address"
-                boxSize="5"
-                color="secondary.main"
-              />
-              {publicProject.publicDetail?.logo && (
-                <Image
-                  src={publicProject.publicDetail.logo}
-                  borderRadius="full"
-                  alt={publicProject.publicDetail.name}
-                  width={7}
-                  height={7}
-                />
-              )}
-              <Heading as="h5" variant="h5" className="ellipsis">
-                {displayName}
-              </Heading>
-            </Flex>
-            <Flex gap={4}>
-              <AdminButton
-                contractAddress={contractAddress as ContractAddr}
-                admin={instantiateInfo?.admin}
+    <Flex direction="column">
+      <Breadcrumb
+        items={[
+          {
+            text: publicName ? "Public Projects" : "Contracts",
+            href: publicName ? "/projects" : "/contracts",
+          },
+          {
+            text: publicName,
+            href: `/projects/${publicProject.publicInfo?.slug}`,
+          },
+          { text: truncate(contractAddress) },
+        ]}
+      />
+      <Flex
+        justify="space-between"
+        mt={{ base: 3, md: 6 }}
+        direction={{ base: "column", md: "row" }}
+        gap={{ md: 4 }}
+      >
+        <Flex
+          direction="column"
+          textOverflow="ellipsis"
+          gap={{ base: 2, md: 1 }}
+        >
+          <Flex
+            gap={1}
+            align={{ base: "start", md: "center" }}
+            maxW={{ md: "670px" }}
+          >
+            <CustomIcon
+              name="contract-address"
+              boxSize={5}
+              color="secondary.main"
+            />
+            {publicProject.publicDetail?.logo && (
+              <Image
+                src={publicProject.publicDetail.logo}
+                borderRadius="full"
+                alt={publicProject.publicDetail.name}
+                width={7}
+                height={7}
               />
-              <Button
-                variant="outline-primary"
-                leftIcon={<CustomIcon name="query" color="primary.light" />}
-                onClick={goToQuery}
-              >
-                Query
-              </Button>
-              <Button
-                variant="outline-primary"
-                leftIcon={<CustomIcon name="execute" color="primary.light" />}
-                onClick={goToExecute}
-              >
-                Execute
-              </Button>
-              <Flex>
-                {contractLocalInfo && (
-                  <EditContractDetailsModal
-                    contractLocalInfo={contractLocalInfo}
-                    triggerElement={
-                      <IconButton
-                        fontSize="24px"
-                        variant="none"
-                        aria-label="edit"
-                        color="gray.600"
-                        icon={<CustomIcon name="edit" />}
-                      />
-                    }
-                  />
-                )}
-                {renderSaveButton()}
-              </Flex>
-            </Flex>
+            )}
+            <Heading
+              as="h5"
+              mt={{ base: 1, md: 0 }}
+              ml={{ base: 1, md: 0 }}
+              variant={{ base: "h6", md: "h5" }}
+              className={!isMobile ? "ellipsis" : ""}
+            >
+              {displayName}
+            </Heading>
           </Flex>
-          <Flex direction="column" gap={1}>
-            <Flex gap={2}>
-              <Text
-                color="text.dark"
-                variant="body2"
-                fontWeight={500}
-                whiteSpace="nowrap"
-              >
-                Contract Address:
-              </Text>
-              <CopyLink
-                value={contractAddress}
-                amptrackSection="contract_top"
-                type="contract_address"
-              />
-            </Flex>
-            <Flex gap={2}>
+          <Flex
+            mt={{ base: 2, md: 0 }}
+            gap={{ base: 0, md: 2 }}
+            direction={{ base: "column", md: "row" }}
+          >
+            <Text
+              color="text.dark"
+              variant="body2"
+              fontWeight={500}
+              whiteSpace="nowrap"
+            >
+              Contract Address:
+            </Text>
+            <CopyLink
+              value={contractAddress}
+              amptrackSection="contract_top"
+              type="contract_address"
+            />
+          </Flex>
+          <Flex
+            gap={{ base: 0, md: 2 }}
+            direction={{ base: "column", md: "row" }}
+          >
+            <Text color="text.dark" variant="body2" fontWeight={500}>
+              Label:
+            </Text>
+            <Text variant="body2" className="ellipsis">
+              {contractData.instantiateInfo?.label}
+            </Text>
+          </Flex>
+          {publicProject.publicInfo?.name && (
+            <Flex
+              direction={{ base: "column", md: "row" }}
+              gap={{ base: 0, md: 2 }}
+            >
               <Text color="text.dark" variant="body2" fontWeight={500}>
-                Label:
+                Public Contract Name:
               </Text>
               <Text variant="body2" className="ellipsis">
-                {contractData.instantiateInfo?.label}
+                {publicProject.publicInfo?.name}
               </Text>
             </Flex>
-            {publicProject.publicInfo?.name && (
-              <Flex gap={2}>
-                <Text color="text.dark" variant="body2" fontWeight={500}>
-                  Public Contract Name:
-                </Text>
-                <Text variant="body2" className="ellipsis">
-                  {publicProject.publicInfo?.name}
-                </Text>
-              </Flex>
-            )}
-            {publicProject.publicInfo?.github && (
-              <GitHubLink github={publicProject.publicInfo?.github} />
-            )}
-          </Flex>
+          )}
+          {publicProject.publicInfo?.github && (
+            <GitHubLink github={publicProject.publicInfo?.github} />
+          )}
+        </Flex>
+        <Flex
+          gap={{ base: 2, md: 4 }}
+          mt={{ base: 8, md: 0 }}
+          w={{ base: "full", md: "auto" }}
+        >
+          {!isMobile && (
+            <AdminButton
+              contractAddress={contractAddress as ContractAddr}
+              admin={instantiateInfo?.admin}
+            />
+          )}
+          <Button
+            variant="outline-primary"
+            w={{ base: "full", md: "auto" }}
+            leftIcon={<CustomIcon name="query" />}
+            onClick={goToQuery}
+            size={{ base: "sm", md: "md" }}
+          >
+            Query
+          </Button>
+          <Button
+            variant="outline-primary"
+            w={{ base: "full", md: "auto" }}
+            leftIcon={<CustomIcon name="execute" />}
+            onClick={goToExecute}
+            size={{ base: "sm", md: "md" }}
+          >
+            Execute
+          </Button>
+          {!isMobile && (
+            <Flex>
+              {contractLocalInfo && (
+                <EditContractDetailsModal
+                  contractLocalInfo={contractLocalInfo}
+                  triggerElement={
+                    <IconButton
+                      fontSize="24px"
+                      variant="none"
+                      aria-label="edit"
+                      color="gray.600"
+                      icon={<CustomIcon name="edit" />}
+                    />
+                  }
+                />
+              )}
+              {renderSaveButton()}
+            </Flex>
+          )}
         </Flex>
       </Flex>
     </Flex>
diff --git a/src/lib/pages/contract-details/components/InstantiateInfo.tsx b/src/lib/pages/contract-details/components/InstantiateInfo.tsx
index 937386c83..5e2a17119 100644
--- a/src/lib/pages/contract-details/components/InstantiateInfo.tsx
+++ b/src/lib/pages/contract-details/components/InstantiateInfo.tsx
@@ -61,6 +61,7 @@ const InitRender = ({
           type="tx_hash"
           value={initTxHash.toUpperCase()}
           showCopyOnHover
+          fixedHeight
         />
       </LabelText>
     );
@@ -76,6 +77,7 @@ const InitRender = ({
           type="proposal_id"
           value={initProposalId.toString()}
           showCopyOnHover
+          fixedHeight
         />
       </LabelText>
     );
@@ -121,50 +123,54 @@ export const InstantiateInfo = ({
   const adminType = getAddressType(instantiateInfo.admin);
 
   return (
-    <Container>
-      <LabelText label="Network">{chainId}</LabelText>
-
-      <LabelText label="From Code" helperText1={codeInfo?.name}>
-        <ExplorerLink
-          type="code_id"
-          value={instantiateInfo.codeId}
-          showCopyOnHover
-        />
-      </LabelText>
-
-      <LabelText label="CW2 Info">
-        {contractCw2Info ? (
-          <Text variant="body2">
-            {contractCw2Info.contract} ({contractCw2Info.version})
-          </Text>
-        ) : (
-          <Text variant="body2" color="text.dark">
-            No Info
-          </Text>
-        )}
-      </LabelText>
-
-      {instantiateInfo.admin ? (
-        <LabelText
-          label="Admin Address"
-          helperText1={getAddressTypeText(adminType)}
-        >
+    <Container w={{ base: "full", md: "auto" }}>
+      <Flex direction={{ base: "row", md: "column" }} gap={{ base: 1, md: 6 }}>
+        <LabelText flex="1" label="Network">
+          {chainId}
+        </LabelText>
+        <LabelText flex="1" label="From Code" helperText1={codeInfo?.name}>
           <ExplorerLink
-            type={adminType}
-            value={instantiateInfo.admin}
+            type="code_id"
+            value={instantiateInfo.codeId}
             showCopyOnHover
+            fixedHeight
           />
         </LabelText>
-      ) : (
-        <LabelText label="Admin Address">
-          <Text variant="body2" color="text.dark">
-            No Admin
-          </Text>
+      </Flex>
+      <Flex direction={{ base: "row", md: "column" }} gap={{ base: 1, md: 6 }}>
+        <LabelText flex="1" label="CW2 Info">
+          {contractCw2Info ? (
+            <Text variant="body2">
+              {contractCw2Info.contract} ({contractCw2Info.version})
+            </Text>
+          ) : (
+            <Text variant="body2" color="text.dark">
+              No Info
+            </Text>
+          )}
         </LabelText>
-      )}
-
+        {instantiateInfo.admin ? (
+          <LabelText
+            flex="1"
+            label="Admin Address"
+            helperText1={getAddressTypeText(adminType)}
+          >
+            <ExplorerLink
+              type={adminType}
+              value={instantiateInfo.admin}
+              showCopyOnHover
+              fixedHeight
+            />
+          </LabelText>
+        ) : (
+          <LabelText flex="1" label="Admin Address">
+            <Text variant="body2" color="text.dark">
+              No Admin
+            </Text>
+          </LabelText>
+        )}
+      </Flex>
       <Divider border="1px solid" borderColor="gray.700" />
-
       {createdHeight ? (
         <LabelText
           label="Instantiated Block Height"
@@ -175,35 +181,41 @@ export const InstantiateInfo = ({
             type="block_height"
             value={createdHeight.toString()}
             showCopyOnHover
+            fixedHeight
           />
         </LabelText>
       ) : (
         <LabelText label="Instantiated Block Height">N/A</LabelText>
       )}
-
-      <LabelText
-        label="Instantiated by"
-        helperText1={getAddressTypeText(instantiatorType)}
-      >
-        <ExplorerLink
-          type={instantiatorType}
-          value={instantiateInfo.instantiator}
-          showCopyOnHover
-        />
-      </LabelText>
-
-      <InitRender
-        initTxHash={initTxHash}
-        initProposalId={initProposalId}
-        initProposalTitle={initProposalTitle}
-        createdHeight={instantiateInfo.createdHeight}
-      />
-
-      {instantiateInfo.ibcPortId && (
-        <LabelText label="IBC Port ID">
-          <PortIdRender portId={instantiateInfo.ibcPortId} />
+      <Flex direction={{ base: "row", md: "column" }} gap={{ base: 1, md: 6 }}>
+        <LabelText
+          flex="1"
+          label="Instantiated by"
+          helperText1={getAddressTypeText(instantiatorType)}
+        >
+          <ExplorerLink
+            type={instantiatorType}
+            value={instantiateInfo.instantiator}
+            showCopyOnHover
+            fixedHeight
+          />
         </LabelText>
-      )}
+        <Flex flex="1">
+          <InitRender
+            initTxHash={initTxHash}
+            initProposalId={initProposalId}
+            initProposalTitle={initProposalTitle}
+            createdHeight={instantiateInfo.createdHeight}
+          />
+        </Flex>
+      </Flex>
+      <Flex direction={{ base: "row", md: "column" }} gap={{ base: 1, md: 6 }}>
+        {instantiateInfo.ibcPortId && (
+          <LabelText label="IBC Port ID">
+            <PortIdRender portId={instantiateInfo.ibcPortId} />
+          </LabelText>
+        )}
+      </Flex>
     </Container>
   );
 };
diff --git a/src/lib/pages/contract-details/components/TokenSection.tsx b/src/lib/pages/contract-details/components/TokenSection.tsx
index 2de5c7496..c73394f95 100644
--- a/src/lib/pages/contract-details/components/TokenSection.tsx
+++ b/src/lib/pages/contract-details/components/TokenSection.tsx
@@ -36,7 +36,10 @@ export const TokenSection = ({ balances, amptrackPage }: TokenSectionProps) => {
     }
     return (
       <>
-        <Grid gridGap={4} gridTemplateColumns="repeat(4, 1fr)">
+        <Grid
+          gridGap={4}
+          gridTemplateColumns={{ base: "1fr", md: "repeat(4, 1fr)" }}
+        >
           {supportedAssets.map((balance, index) => {
             if (!showMore && index >= 4) {
               return null;
@@ -58,8 +61,8 @@ export const TokenSection = ({ balances, amptrackPage }: TokenSectionProps) => {
 
   return (
     <>
-      <Flex justify="space-between">
-        <Text variant="body2" color="text.dark" mb={1} fontWeight={500}>
+      <Flex justify="space-between" align="center" mb={{ base: 2, md: 1 }}>
+        <Text variant="body2" color="text.dark" fontWeight={500}>
           Assets
         </Text>
         <UnsupportedTokensModal
diff --git a/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx b/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
index c8c899691..fe2887a6d 100644
--- a/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
+++ b/src/lib/pages/contract-details/components/contract-description/UserContractDesc.tsx
@@ -63,7 +63,7 @@ export const UserContractDesc = ({ contractData }: UserContractDescProps) => {
       maxW="100%"
       borderRadius="8px"
       p={4}
-      my={6}
+      my={{ base: 0, md: 6 }}
       flex="1"
       role="group"
     >
diff --git a/src/lib/pages/contract-details/components/contract-description/index.tsx b/src/lib/pages/contract-details/components/contract-description/index.tsx
index 237477a99..ae57816fe 100644
--- a/src/lib/pages/contract-details/components/contract-description/index.tsx
+++ b/src/lib/pages/contract-details/components/contract-description/index.tsx
@@ -1,5 +1,6 @@
 import { Flex } from "@chakra-ui/react";
 
+import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { PublicDescription } from "lib/components/PublicDescription";
 import type { ContractData } from "lib/types";
@@ -9,16 +10,24 @@ import { UserContractDesc } from "./UserContractDesc";
 interface ContractDescProps {
   contractData: ContractData;
 }
-export const ContractDesc = ({ contractData }: ContractDescProps) => (
-  <Flex gap={6}>
-    {contractData.publicProject.publicInfo?.description && (
-      <PublicDescription
-        title="Public Contract Description"
-        description={contractData.publicProject.publicInfo.description}
-        textLine={contractData.contractLocalInfo?.description ? 4 : 2}
-        icon={<CustomIcon name="website" ml={0} mb={2} color="gray.600" />}
-      />
-    )}
-    <UserContractDesc contractData={contractData} />
-  </Flex>
-);
+export const ContractDesc = ({ contractData }: ContractDescProps) => {
+  const isMobile = useMobile();
+  return (
+    <Flex
+      gap={{ base: 4, md: 6 }}
+      direction={{ base: "column", md: "row" }}
+      mt={{ base: 4, md: 0 }}
+      mb={4}
+    >
+      {contractData.publicProject.publicInfo?.description && (
+        <PublicDescription
+          title="Public Contract Description"
+          description={contractData.publicProject.publicInfo.description}
+          textLine={contractData.contractLocalInfo?.description ? 4 : 2}
+          icon={<CustomIcon name="public-project" color="gray.600" />}
+        />
+      )}
+      {!isMobile && <UserContractDesc contractData={contractData} />}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx b/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx
index 346ca1593..c27c9c29a 100644
--- a/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx
+++ b/src/lib/pages/contract-details/components/tables/RelatedProposalsTable.tsx
@@ -1,5 +1,8 @@
+import { Flex } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
+import { useMobile } from "lib/app-provider";
+import { ProposalCard } from "lib/components/card/ProposalCard";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
@@ -54,20 +57,29 @@ export const RelatedProposalsTable = ({
     setPageSize(size);
     setCurrentPage(1);
   };
-
+  const isMobile = useMobile();
+  const emptyState = (
+    <EmptyState
+      imageVariant="empty"
+      message="This contract does not have related proposals yet."
+    />
+  );
+  if (!relatedProposals?.length) return emptyState;
   return (
     <>
-      <ProposalsTable
-        proposals={relatedProposals}
-        isLoading={isLoading}
-        emptyState={
-          <EmptyState
-            imageVariant="empty"
-            message="This contract does not have related proposals yet."
-            withBorder
-          />
-        }
-      />
+      {isMobile ? (
+        <Flex direction="column" gap={4} w="full" mt={4}>
+          {relatedProposals.map((proposal) => (
+            <ProposalCard key={proposal.proposalId} proposal={proposal} />
+          ))}
+        </Flex>
+      ) : (
+        <ProposalsTable
+          proposals={relatedProposals}
+          isLoading={isLoading}
+          emptyState={emptyState}
+        />
+      )}
       {!!totalData && totalData > 10 && (
         <Pagination
           currentPage={currentPage}
diff --git a/src/lib/pages/contract-details/components/tables/TxsTable.tsx b/src/lib/pages/contract-details/components/tables/TxsTable.tsx
index 085b40a0b..9ed71c47c 100644
--- a/src/lib/pages/contract-details/components/tables/TxsTable.tsx
+++ b/src/lib/pages/contract-details/components/tables/TxsTable.tsx
@@ -1,5 +1,8 @@
+import { Flex } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
+import { useMobile } from "lib/app-provider";
+import { TransactionCard } from "lib/components/card/TransactionCard";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
@@ -58,21 +61,34 @@ export const TxsTable = ({
     setPageSize(size);
     setCurrentPage(1);
   };
-
+  const isMobile = useMobile();
+  const emptyState = (
+    <EmptyState
+      imageVariant="empty"
+      message="This contract does not have any transactions"
+    />
+  );
+  if (!transactions?.length) return emptyState;
   return (
     <>
-      <TransactionsTable
-        transactions={transactions}
-        isLoading={isLoading}
-        emptyState={
-          <EmptyState
-            imageVariant="empty"
-            message="This contract does not have any transactions"
-            withBorder
-          />
-        }
-        showRelations={false}
-      />
+      {isMobile ? (
+        <Flex direction="column" gap={4} w="full" mt={4}>
+          {transactions.map((transaction) => (
+            <TransactionCard
+              transaction={transaction}
+              key={`contract-detail-txs-${transaction.hash}`}
+              showRelations={false}
+            />
+          ))}
+        </Flex>
+      ) : (
+        <TransactionsTable
+          transactions={transactions}
+          isLoading={isLoading}
+          emptyState={emptyState}
+          showRelations={false}
+        />
+      )}
       {!!totalData && totalData > 10 && (
         <Pagination
           currentPage={currentPage}
diff --git a/src/lib/pages/contract-details/components/tables/migration/MigrationRow.tsx b/src/lib/pages/contract-details/components/tables/migration/MigrationRow.tsx
index 1bffa24f7..639e6cd74 100644
--- a/src/lib/pages/contract-details/components/tables/migration/MigrationRow.tsx
+++ b/src/lib/pages/contract-details/components/tables/migration/MigrationRow.tsx
@@ -13,7 +13,7 @@ interface MigrationRowProps {
   history: ContractMigrationHistory;
 }
 
-const RemarkRender = ({
+export const RemarkRender = ({
   remark,
 }: {
   remark: ContractMigrationHistory["remark"];
@@ -38,9 +38,9 @@ const RemarkRender = ({
         "& > p:first-of-type": {
           color: "text.dark",
           fontSize: "12px",
-          mb: "2px",
         },
       }}
+      mb={{ base: 0, md: "2px" }}
     >
       <p>{isGovernance ? `${prefix} Proposal ID` : `${prefix} Tx`}</p>
       <ExplorerLink
diff --git a/src/lib/pages/contract-details/components/tables/migration/index.tsx b/src/lib/pages/contract-details/components/tables/migration/index.tsx
index cee6f7b62..dc689e0bc 100644
--- a/src/lib/pages/contract-details/components/tables/migration/index.tsx
+++ b/src/lib/pages/contract-details/components/tables/migration/index.tsx
@@ -1,5 +1,8 @@
+import { Flex } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
+import { useMobile } from "lib/app-provider";
+import { MigrationCard } from "lib/components/card/MigrationCard";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
@@ -56,7 +59,7 @@ export const MigrationTable = ({
     setPageSize(size);
     setCurrentPage(1);
   };
-
+  const isMobile = useMobile();
   if (!migrationHistories?.length)
     return (
       <EmptyState
@@ -70,21 +73,41 @@ export const MigrationTable = ({
     "90px minmax(300px, 1fr) minmax(220px, 1fr) repeat(2, max(150px)) max(232px) max(180px)";
 
   return (
-    <TableContainer>
-      <MigrationHeader templateColumns={templateColumns} />
-      {migrationHistories.map((history, idx) => (
-        <MigrationRow
-          key={
-            history.codeId +
-            history.remark.operation +
-            history.remark.type +
-            history.remark.value +
-            idx.toString()
-          }
-          history={history}
-          templateColumns={templateColumns}
-        />
-      ))}
+    <>
+      {isMobile ? (
+        <Flex direction="column" gap={4} w="full" mt={4}>
+          {migrationHistories.map((history, idx) => (
+            <MigrationCard
+              key={`mobile-${
+                history.codeId +
+                history.remark.operation +
+                history.remark.type +
+                history.remark.value +
+                idx.toString()
+              }`}
+              history={history}
+            />
+          ))}
+        </Flex>
+      ) : (
+        <TableContainer>
+          <MigrationHeader templateColumns={templateColumns} />
+          {migrationHistories.map((history, idx) => (
+            <MigrationRow
+              key={
+                history.codeId +
+                history.remark.operation +
+                history.remark.type +
+                history.remark.value +
+                idx.toString()
+              }
+              history={history}
+              templateColumns={templateColumns}
+            />
+          ))}
+        </TableContainer>
+      )}
+
       {!!totalData && totalData > 10 && (
         <Pagination
           currentPage={currentPage}
@@ -97,6 +120,6 @@ export const MigrationTable = ({
           onPageSizeChange={onPageSizeChange}
         />
       )}
-    </TableContainer>
+    </>
   );
 };
diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index 8b105f3e5..8dd83913e 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -10,7 +10,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { useValidateAddress, useWasmConfig } from "lib/app-provider";
+import { useValidateAddress, useWasmConfig, useMobile } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
@@ -51,14 +51,14 @@ const ContractDetailsBody = observer(
       refetchTransactions,
       refetchRelatedProposals,
     } = useContractDetailsTableCounts(contractAddress);
-
+    const isMobile = useMobile();
     if (!contractData.instantiateInfo) return <InvalidContract />;
 
     return (
       <>
         <ContractTop contractData={contractData} />
         {/* Tokens Section */}
-        <Flex direction="column">
+        <Flex direction="column" mt={{ base: 8, md: 4 }}>
           <TokenSection balances={contractData.balances} />
         </Flex>
         {/* Contract Description Section */}
@@ -66,11 +66,20 @@ const ContractDetailsBody = observer(
         {/* Query/Execute commands section */}
         <CommandSection />
         {/* Instantiate/Contract Info Section */}
-        <Flex my={12} justify="space-between">
+        <Flex
+          my={12}
+          justify="space-between"
+          direction={{ base: "column", md: "row" }}
+        >
           {/* Instantiate Info */}
+          {isMobile && (
+            <Heading as="h6" variant="h6" mb={6} id={tableHeaderId}>
+              Instantiate Info
+            </Heading>
+          )}
           <InstantiateInfo contractData={contractData} />
           {/* Contract Info (Expand) */}
-          <Flex direction="column" flex={0.8} gap={4}>
+          <Flex direction="column" flex={0.8} gap={4} mt={{ base: 12, md: 0 }}>
             <JsonInfo
               header="Contract Info"
               jsonString={jsonPrettify(
@@ -90,8 +99,13 @@ const ContractDetailsBody = observer(
         <Heading as="h6" variant="h6" mb={6} id={tableHeaderId}>
           History
         </Heading>
-        <Tabs>
-          <TabList borderBottom="1px solid" borderColor="gray.700">
+        <Tabs isLazy lazyBehavior="keepMounted">
+          <TabList
+            borderBottom="1px solid"
+            borderColor="gray.700"
+            overflowX={{ base: "scroll", md: "auto" }}
+            w={{ base: "max-content", md: "auto" }}
+          >
             <CustomTab count={tableCounts.transactionsCount}>
               Transactions
             </CustomTab>
@@ -140,7 +154,6 @@ const ContractDetails = observer(() => {
     router.query.contractAddress
   ) as ContractAddr;
   const { isLoading, contractData } = useContractData(contractAddressParam);
-
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_CONTRACT_DETAIL);
   }, [router.isReady]);
diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx
index 6ceae4939..1399831bb 100644
--- a/src/lib/pages/contract-list/slug.tsx
+++ b/src/lib/pages/contract-list/slug.tsx
@@ -80,7 +80,7 @@ const ContractsByList = observer(() => {
     <PageContainer>
       <Breadcrumb
         items={[
-          { text: "Contract Lists", href: "/contract-list" },
+          { text: "Contract Lists", href: "/contract-lists" },
           { text: contractListInfo.name },
         ]}
       />
diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contracts/index.tsx
index 3c42ca8ba..d3d2807e4 100644
--- a/src/lib/pages/contracts/index.tsx
+++ b/src/lib/pages/contracts/index.tsx
@@ -2,7 +2,12 @@ import { Heading, Box, Flex, Text } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { useState } from "react";
 
-import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
+import {
+  useInternalNavigate,
+  useWasmConfig,
+  useMobile,
+} from "lib/app-provider";
+import { InstantiatedContractCard } from "lib/components/card/ContractCard";
 import { TextInput } from "lib/components/forms";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
@@ -24,23 +29,17 @@ const RecentContracts = observer(() => {
   const { recentContracts, isLoading } = useRecentContractsData(searchKeyword);
 
   const isSearching = Boolean(searchKeyword);
-
+  const isMobile = useMobile();
   return (
     <PageContainer>
-      <Box pb={16}>
-        <Heading
-          variant="h5"
-          as="h5"
-          minH="36px"
-          display="flex"
-          alignItems="center"
-        >
+      <Box pb={{ base: 0, md: 12 }}>
+        <Heading variant="h5" as="h5" minH="36px">
           Recent Contracts
         </Heading>
-        <Text variant="body2" color="text.dark" fontWeight={500}>
+        <Text variant="body2" color="text.dark" fontWeight={500} mb={8}>
           These contracts are the most recently instantiated on this network
         </Text>
-        <Flex mt={8}>
+        <Flex>
           <TextInput
             variant="floating"
             value={searchKeyword}
@@ -50,23 +49,31 @@ const RecentContracts = observer(() => {
           />
         </Flex>
       </Box>
-      <ContractsTable
-        contracts={recentContracts}
-        isLoading={isLoading}
-        emptyState={
-          <EmptyState
-            imageVariant={isSearching ? "not-found" : "empty"}
-            message={
-              isSearching
-                ? "No matched contracts found"
-                : "Most recent 100 contracts will display here."
-            }
-            withBorder
-          />
-        }
-        onRowSelect={onRowSelect}
-        withoutTag
-      />
+      {isMobile ? (
+        <Flex direction="column" gap={4} w="full" mt={4}>
+          {recentContracts.map((contract) => (
+            <InstantiatedContractCard contractInfo={contract} />
+          ))}
+        </Flex>
+      ) : (
+        <ContractsTable
+          contracts={recentContracts}
+          isLoading={isLoading}
+          emptyState={
+            <EmptyState
+              imageVariant={isSearching ? "not-found" : "empty"}
+              message={
+                isSearching
+                  ? "No matched contracts found"
+                  : "Most recent 100 contracts will display here."
+              }
+              withBorder
+            />
+          }
+          onRowSelect={onRowSelect}
+          withoutTag
+        />
+      )}
     </PageContainer>
   );
 });
diff --git a/src/lib/pages/dev-home/components/QuickMenu.tsx b/src/lib/pages/dev-home/components/QuickMenu.tsx
new file mode 100644
index 000000000..6b5597747
--- /dev/null
+++ b/src/lib/pages/dev-home/components/QuickMenu.tsx
@@ -0,0 +1,171 @@
+import { Flex, Heading, Box, Text, SimpleGrid } from "@chakra-ui/react";
+
+import { CURR_THEME } from "env";
+import { useMobile } from "lib/app-provider";
+import { AppLink } from "lib/components/AppLink";
+import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
+import { CustomIcon } from "lib/components/icon";
+import type { IconKeys } from "lib/components/icon";
+
+const cardProps = {
+  width: "100%",
+  padding: "16px",
+  borderRadius: "8px",
+  justifyContent: "space-between",
+  height: "100%",
+};
+
+interface SecondaryMenuType {
+  title: string;
+  subtitle: string;
+  slug: string;
+  icon: IconKeys;
+}
+
+const secondaryMenu: SecondaryMenuType[] = [
+  {
+    title: "Query",
+    subtitle: "Query and get contract state data",
+    slug: "query",
+    icon: "query",
+  },
+  {
+    title: "Execute",
+    subtitle: "Send transactions to contracts",
+    slug: "execute",
+    icon: "execute",
+  },
+  {
+    title: "Migrate",
+    subtitle: "Migrate contract to new code ID",
+    slug: "migrate",
+    icon: "migrate",
+  },
+  {
+    title: "Update Admin",
+    subtitle: "Change contract admin",
+    slug: "admin",
+    icon: "admin",
+  },
+];
+
+export const QuickMenu = () => {
+  const isMobile = useMobile();
+  return (
+    <Flex direction="column" gap={4} bg="gray.900" p={{ sm: 8, md: 12 }}>
+      <Heading as="h5" variant="h5">
+        Start using {CURR_THEME.branding.seo.appName}
+      </Heading>
+      {!isMobile && (
+        <ConnectWalletAlert
+          title={`Connect wallet to start using ${CURR_THEME.branding.seo.appName}`}
+          subtitle="Actions such as deploying new contracts or sending transactions require a wallet connection"
+        />
+      )}
+      <Flex gap={4} direction={{ sm: "column", md: "row" }}>
+        {!isMobile && (
+          <Flex width={{ sm: "full", md: "55%" }}>
+            <AppLink href="/deploy" style={{ width: "100%" }}>
+              <Flex
+                bgGradient={CURR_THEME.colors.gradient?.main}
+                _hover={{ opacity: "85%" }}
+                style={cardProps}
+                transition="all .25s ease-in-out"
+                alignItems="flex-end"
+                h="full"
+              >
+                <Flex direction="column" justifyItems="center">
+                  <Text variant="body1" fontWeight="800">
+                    Deploy a new contract
+                  </Text>
+                  <Text variant="body2" color="text.dark">
+                    Upload a new wasm code or instantiate a new contract
+                  </Text>
+                </Flex>
+                <CustomIcon
+                  name="chevron-right"
+                  color="text.main"
+                  boxSize="24px"
+                />
+              </Flex>
+            </AppLink>
+          </Flex>
+        )}
+        <SimpleGrid columns={{ sm: 1, md: 2 }} spacing={3} w="full">
+          {secondaryMenu.map((item) => (
+            <>
+              {!isMobile || item.slug === "query" ? (
+                <AppLink href={`/${item.slug}`} key={item.slug}>
+                  <Flex
+                    style={cardProps}
+                    _hover={{ bg: "gray.700" }}
+                    transition="all .25s ease-in-out"
+                    bg="gray.800"
+                    alignItems="center"
+                  >
+                    <Flex alignItems="center" gap={3}>
+                      <CustomIcon
+                        name={item.icon}
+                        boxSize="24px"
+                        color="gray.600"
+                      />
+                      <Box>
+                        <Text variant="body1" fontWeight="800">
+                          {item.title}
+                        </Text>
+                        <Text
+                          textDecoration="none"
+                          variant="body2"
+                          color="text.dark"
+                        >
+                          {item.subtitle}
+                        </Text>
+                      </Box>
+                    </Flex>
+                    <CustomIcon
+                      name="chevron-right"
+                      boxSize="24px"
+                      color="gray.600"
+                    />
+                  </Flex>
+                </AppLink>
+              ) : (
+                <Flex
+                  opacity={0.5}
+                  style={cardProps}
+                  _hover={{ bg: "gray.700" }}
+                  transition="all .25s ease-in-out"
+                  bg="gray.800"
+                  alignItems="center"
+                >
+                  <Flex alignItems="center" gap={3}>
+                    <CustomIcon
+                      name={item.icon}
+                      boxSize="24px"
+                      color="gray.600"
+                    />
+                    <Box>
+                      <Text variant="body1" fontWeight="800">
+                        {item.title}
+                      </Text>
+                      <Text
+                        textDecoration="none"
+                        variant="body2"
+                        color="text.dark"
+                      >
+                        {item.subtitle}
+                      </Text>
+                    </Box>
+                  </Flex>
+                  <Text variant="body2" color="text.primary">
+                    On Mobile Soon
+                  </Text>
+                </Flex>
+              )}
+            </>
+          ))}
+        </SimpleGrid>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/home/components/RecentActivities.tsx b/src/lib/pages/dev-home/components/RecentActivities.tsx
similarity index 91%
rename from src/lib/pages/home/components/RecentActivities.tsx
rename to src/lib/pages/dev-home/components/RecentActivities.tsx
index 2ce585659..2daaaa89c 100644
--- a/src/lib/pages/home/components/RecentActivities.tsx
+++ b/src/lib/pages/dev-home/components/RecentActivities.tsx
@@ -21,11 +21,22 @@ export const RecentActivities = observer(() => {
 
   return (
     <Box py={8}>
-      <Heading px={12} as="h5" variant="h5" mb={4}>
+      <Heading
+        px={{ sm: 8, md: 12 }}
+        as="h5"
+        variant={{ sm: "h6", md: "h5" }}
+        mb={4}
+      >
         Recent Queries and Executes on this device
       </Heading>
       {activities.length ? (
-        <Flex px={12} gap={4} overflowX="scroll" w="100%">
+        <Flex
+          px={{ sm: 8, md: 12 }}
+          gap={4}
+          overflowX={{ md: "scroll" }}
+          w="100%"
+          direction={{ sm: "column", md: "row" }}
+        >
           {activities.map((item) => (
             <Flex
               direction="column"
diff --git a/src/lib/pages/dev-home/index.tsx b/src/lib/pages/dev-home/index.tsx
new file mode 100644
index 000000000..398750059
--- /dev/null
+++ b/src/lib/pages/dev-home/index.tsx
@@ -0,0 +1,30 @@
+import { Box } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+import NetworkOverview from "../network-overview";
+import { useWasmConfig } from "lib/app-provider";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+
+import { QuickMenu } from "./components/QuickMenu";
+import { RecentActivities } from "./components/RecentActivities";
+
+const DevHome = () => {
+  const router = useRouter();
+  const wasm = useWasmConfig({ shouldRedirect: false });
+
+  useEffect(() => {
+    if (router.isReady) AmpTrack(AmpEvent.TO_OVERVIEW);
+  }, [router.isReady]);
+
+  return wasm.enabled ? (
+    <Box mx={1}>
+      <QuickMenu />
+      <RecentActivities />
+    </Box>
+  ) : (
+    <NetworkOverview />
+  );
+};
+
+export default DevHome;
diff --git a/src/lib/pages/execute/components/ExecuteArea.tsx b/src/lib/pages/execute/components/ExecuteArea.tsx
index 91833687d..f316f2e6f 100644
--- a/src/lib/pages/execute/components/ExecuteArea.tsx
+++ b/src/lib/pages/execute/components/ExecuteArea.tsx
@@ -8,6 +8,7 @@ import {
   useFabricateFee,
   useExecuteContractTx,
   useCurrentChain,
+  useMobile,
 } from "lib/app-provider";
 import { useSimulateFeeQuery } from "lib/app-provider/queries";
 import { ContractCmdButton } from "lib/components/ContractCmdButton";
@@ -216,6 +217,7 @@ export const ExecuteArea = ({
     };
   });
 
+  const isMobile = useMobile();
   return (
     <Box my={4}>
       {contractAddress && (
@@ -293,7 +295,7 @@ export const ExecuteArea = ({
             isLoading={processing}
             sx={{ pointerEvents: processing && "none" }}
           >
-            Execute (Ctrl + Enter)
+            Execute {!isMobile && "(Ctrl + Enter)"}
           </Button>
         </Flex>
       </Flex>
diff --git a/src/lib/pages/home/components/QuickMenu.tsx b/src/lib/pages/home/components/QuickMenu.tsx
deleted file mode 100644
index 0d4ba1bb3..000000000
--- a/src/lib/pages/home/components/QuickMenu.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { Flex, Heading, Box, Text, SimpleGrid } from "@chakra-ui/react";
-
-import { CURR_THEME } from "env";
-import { AppLink } from "lib/components/AppLink";
-import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
-import { CustomIcon } from "lib/components/icon";
-import type { IconKeys } from "lib/components/icon";
-
-const cardProps = {
-  width: "100%",
-  padding: "16px",
-  borderRadius: "8px",
-  justifyContent: "space-between",
-  height: "100%",
-};
-
-interface SecondaryMenuType {
-  title: string;
-  subtitle: string;
-  slug: string;
-  icon: IconKeys;
-}
-
-const secondaryMenu: SecondaryMenuType[] = [
-  {
-    title: "Query",
-    subtitle: "Query and get contract state data",
-    slug: "query",
-    icon: "query",
-  },
-  {
-    title: "Execute",
-    subtitle: "Send transactions to contracts",
-    slug: "execute",
-    icon: "execute",
-  },
-  {
-    title: "Migrate",
-    subtitle: "Migrate contract to new code ID",
-    slug: "migrate",
-    icon: "migrate",
-  },
-  {
-    title: "Update Admin",
-    subtitle: "Change contract admin",
-    slug: "admin",
-    icon: "admin",
-  },
-];
-
-export const QuickMenu = () => (
-  <Flex direction="column" gap={4} bg="gray.900" p={12}>
-    <Heading as="h5" variant="h5">
-      Start using Celatone
-    </Heading>
-    <ConnectWalletAlert
-      title="Connect wallet to start using Celatone"
-      subtitle="Actions such as deploying new contracts or sending transactions require a wallet connection"
-    />
-    <Flex gap={4}>
-      <AppLink href="/deploy" style={{ width: "55%" }}>
-        <Flex
-          bgGradient={CURR_THEME.colors.gradient?.main}
-          _hover={{ opacity: "85%" }}
-          style={cardProps}
-          transition="all .25s ease-in-out"
-          alignItems="flex-end"
-          h="full"
-        >
-          <Flex direction="column" justifyItems="center">
-            <Text variant="body1" fontWeight="800">
-              Deploy a new contract
-            </Text>
-            <Text variant="body2">
-              Upload a new wasm code or instantiate a new contract
-            </Text>
-          </Flex>
-          <CustomIcon name="chevron-right" color="text.main" boxSize="24px" />
-        </Flex>
-      </AppLink>
-
-      <SimpleGrid columns={2} spacing={3} w="full">
-        {secondaryMenu.map((item) => (
-          <AppLink href={`/${item.slug}`} key={item.slug}>
-            <Flex
-              style={cardProps}
-              _hover={{ bg: "gray.700" }}
-              transition="all .25s ease-in-out"
-              bg="gray.800"
-              alignItems="center"
-            >
-              <Flex alignItems="center" gap={3}>
-                <CustomIcon name={item.icon} boxSize="24px" color="gray.600" />
-                <Box>
-                  <Text variant="body1" fontWeight="800">
-                    {item.title}
-                  </Text>
-                  <Text textDecoration="none" variant="body2" color="text.dark">
-                    {item.subtitle}
-                  </Text>
-                </Box>
-              </Flex>
-              <CustomIcon
-                name="chevron-right"
-                boxSize="24px"
-                color="gray.600"
-              />
-            </Flex>
-          </AppLink>
-        ))}
-      </SimpleGrid>
-    </Flex>
-  </Flex>
-);
diff --git a/src/lib/pages/home/index.tsx b/src/lib/pages/home/index.tsx
index e994c22be..b7ad58c12 100644
--- a/src/lib/pages/home/index.tsx
+++ b/src/lib/pages/home/index.tsx
@@ -1,30 +1,14 @@
-import { Box } from "@chakra-ui/react";
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-
+import DevHome from "../dev-home";
 import NetworkOverview from "../network-overview";
-import { useWasmConfig } from "lib/app-provider";
-import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-
-import { QuickMenu } from "./components/QuickMenu";
-import { RecentActivities } from "./components/RecentActivities";
+import { useCelatoneApp } from "lib/app-provider";
 
 const Home = () => {
-  const router = useRouter();
-  const wasm = useWasmConfig({ shouldRedirect: false });
-
-  useEffect(() => {
-    if (router.isReady) AmpTrack(AmpEvent.TO_OVERVIEW);
-  }, [router.isReady]);
+  const {
+    chainConfig: { hasSubHeader },
+  } = useCelatoneApp();
 
-  return wasm.enabled ? (
-    <Box mx={1}>
-      <QuickMenu />
-      <RecentActivities />
-    </Box>
-  ) : (
-    <NetworkOverview />
-  );
+  if (hasSubHeader) return <NetworkOverview />;
+  return <DevHome />;
 };
 
 export default Home;
diff --git a/src/lib/pages/network-overview/index.tsx b/src/lib/pages/network-overview/index.tsx
index 826e0b602..cdc352098 100644
--- a/src/lib/pages/network-overview/index.tsx
+++ b/src/lib/pages/network-overview/index.tsx
@@ -2,7 +2,7 @@ import { Box, Flex, Heading, Spinner, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useCelatoneApp, useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import PageContainer from "lib/components/PageContainer";
 import { ViewMore } from "lib/components/table";
@@ -10,8 +10,12 @@ import { Tooltip } from "lib/components/Tooltip";
 import { BlocksTable } from "lib/pages/blocks/components/BlocksTable";
 import { TxsTable } from "lib/pages/txs/components/TxsTable";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import { useLatestBlockInfo } from "lib/services/blockService";
+import {
+  useAverageBlockTime,
+  useLatestBlockInfo,
+} from "lib/services/blockService";
 import { useTxsCount } from "lib/services/txService";
+import type { Option } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 const cardProps = {
@@ -30,12 +34,22 @@ const txInfo = {
     "Verified transactions track network activity and growth, indicating ecosystem health.",
 };
 
+const blockTimeInfo = {
+  title: "Average Block Time",
+  tooltip: "Average time to finality between the last 100 indexed blocks.",
+};
+
 const blockInfo = {
   title: "Latest Block Height",
   tooltip:
     "Latest Block Height tracks transactions and network growth for a healthy blockchain ecosystem.",
 };
 
+const indexedBlockInfo = {
+  title: "Latest Indexed Block Height",
+  tooltip: "The latest block height indexed by the indexer.",
+};
+
 interface CardInfoProps {
   title: string;
   tooltip: string;
@@ -56,6 +70,7 @@ const CardInfo = ({
     transition="all .25s ease-in-out"
     bg="gray.800"
     onClick={navigate}
+    cursor="pointer"
   >
     <Box>
       <Flex alignItems="center" gap={1} mb={2}>
@@ -80,19 +95,38 @@ const CardInfo = ({
   </Flex>
 );
 
+const calculateAverageBlockTime = (
+  latest: Option<Date>,
+  hundred: Option<Date>
+) => {
+  if (!latest || !hundred) return "N/A";
+  return `${((latest.getTime() - hundred.getTime()) / 100 / 1000)
+    .toFixed(3)
+    .toString()}s`;
+};
+
 const NetworkOverview = () => {
   const router = useRouter();
+
   const navigate = useInternalNavigate();
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_NETWORK_OVERVIEW);
   }, [router.isReady]);
 
+  const {
+    chainConfig: { chain },
+  } = useCelatoneApp();
   const {
     data: latestBlockInfo,
     isLoading: isLoadingLatestBlockInfo,
     error: latestBlockInfoError,
   } = useLatestBlockInfo();
+  const { data } = useAverageBlockTime();
+  const averageBlockTime = calculateAverageBlockTime(
+    data?.latest,
+    data?.hundred
+  );
   const { data: txsCount, isLoading: isLoadingTxsCount } = useTxsCount();
 
   const toTxs = () =>
@@ -107,8 +141,13 @@ const NetworkOverview = () => {
 
   return (
     <PageContainer>
-      <Flex justifyContent="space-between" mb={5}>
-        <Heading as="h4" variant="h4">
+      <Flex
+        justifyContent={{ base: "start", md: "space-between" }}
+        align={{ base: "start", md: "start" }}
+        mb={5}
+        direction={{ base: "column", md: "row" }}
+      >
+        <Heading as="h4" variant="h4" mb={{ base: 4, md: 0 }}>
           Network Overview
         </Heading>
         {isLoadingLatestBlockInfo ? (
@@ -122,7 +161,7 @@ const NetworkOverview = () => {
           <Text
             variant="body2"
             color="text.dark"
-            textAlign="right"
+            textAlign={{ base: "left", md: "right" }}
             whiteSpace="pre-line"
             lineHeight={3}
           >
@@ -134,23 +173,42 @@ const NetworkOverview = () => {
           </Text>
         )}
       </Flex>
-      <Flex gap={4} mb={16}>
-        <CardInfo
-          title={txInfo.title}
-          tooltip={txInfo.tooltip}
-          value={txsCount?.toLocaleString() ?? "N/A"}
-          isLoading={isLoadingTxsCount}
-          navigate={toTxs}
-        />
-        <CardInfo
-          title={blockInfo.title}
-          tooltip={blockInfo.tooltip}
-          value={latestBlockInfo?.height?.toString() ?? "N/A"}
-          isLoading={isLoadingLatestBlockInfo}
-          navigate={toBlocks}
-        />
+      <Flex gap={4} mb={16} direction={{ base: "column", md: "row" }}>
+        {chain === "sei" ? (
+          <CardInfo
+            title={blockTimeInfo.title}
+            tooltip={blockTimeInfo.tooltip}
+            value={averageBlockTime}
+            isLoading={isLoadingTxsCount}
+            navigate={toTxs}
+          />
+        ) : (
+          <CardInfo
+            title={txInfo.title}
+            tooltip={txInfo.tooltip}
+            value={txsCount?.toLocaleString() ?? "N/A"}
+            isLoading={isLoadingTxsCount}
+            navigate={toTxs}
+          />
+        )}
+        {chain === "sei" ? (
+          <CardInfo
+            title={indexedBlockInfo.title}
+            tooltip={indexedBlockInfo.tooltip}
+            value={latestBlockInfo?.height?.toString() ?? "N/A"}
+            isLoading={isLoadingLatestBlockInfo}
+            navigate={toBlocks}
+          />
+        ) : (
+          <CardInfo
+            title={blockInfo.title}
+            tooltip={blockInfo.tooltip}
+            value={latestBlockInfo?.height?.toString() ?? "N/A"}
+            isLoading={isLoadingLatestBlockInfo}
+            navigate={toBlocks}
+          />
+        )}
       </Flex>
-
       <Box>
         <Heading as="h5" variant="h5" mb={5}>
           Recent Transactions
diff --git a/src/lib/pages/proposals/index.tsx b/src/lib/pages/proposals/index.tsx
index 26a6286ba..0ec37a5f8 100644
--- a/src/lib/pages/proposals/index.tsx
+++ b/src/lib/pages/proposals/index.tsx
@@ -63,7 +63,6 @@ const Proposals = () => {
     search,
     proposer
   );
-
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_PROPOSAL_LIST);
   }, [router.isReady]);
diff --git a/src/lib/pages/public-project/components/AllProject.tsx b/src/lib/pages/public-project/components/AllProject.tsx
index 20798e906..8fbdc19c2 100644
--- a/src/lib/pages/public-project/components/AllProject.tsx
+++ b/src/lib/pages/public-project/components/AllProject.tsx
@@ -73,8 +73,8 @@ export const AllProject = observer(() => {
         setInputState={setSearchKeyword}
         labelBgColor="background"
         placeholder="Search for existing public projects by project name"
-        size="lg"
-        mb={12}
+        size={{ base: "md", md: "lg" }}
+        mb={{ base: 6, md: 12 }}
       />
       {!filteredPublicProjects.length ? (
         <EmptyState
@@ -92,7 +92,13 @@ export const AllProject = observer(() => {
           ))}
         </SimpleGrid>
       )}
-      <Flex justifyContent="center" gap={2} w="100%" mt={16}>
+      <Flex
+        justifyContent="center"
+        gap={2}
+        w="100%"
+        mt={{ base: 8, md: 16 }}
+        mb={{ base: 4, md: 0 }}
+      >
         <Text color="text.dark" variant="body2">
           Want your project here?
         </Text>
diff --git a/src/lib/pages/public-project/components/BookmarkButton.tsx b/src/lib/pages/public-project/components/BookmarkButton.tsx
index 5301a6b4f..c646f28b0 100644
--- a/src/lib/pages/public-project/components/BookmarkButton.tsx
+++ b/src/lib/pages/public-project/components/BookmarkButton.tsx
@@ -16,7 +16,6 @@ interface BookmarkButtonProps {
 }
 
 const buttonTextProps: CSSProperties = {
-  padding: "6px 16px",
   minWidth: "auto",
   height: "auto",
   borderRadius: "8px",
@@ -51,6 +50,8 @@ const StyledButton = ({
     style={hasText ? buttonTextProps : buttonIconProps}
     gap={2}
     onClick={action}
+    padding={{ base: "4px", md: "6px 16px" }}
+    size={{ base: "xs", md: "md" }}
   >
     <CustomIcon
       name={icon}
diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx
index 6321074af..6ab153d7f 100644
--- a/src/lib/pages/public-project/components/DetailHeader.tsx
+++ b/src/lib/pages/public-project/components/DetailHeader.tsx
@@ -25,6 +25,7 @@ export const DetailHeader = ({ details, slug }: DetailHeaderProps) => (
       w="full"
       mt={6}
       gap={5}
+      direction={{ base: "column", md: "row" }}
     >
       <Box>
         <Flex gap={1} align="center" minH="36px">
@@ -45,7 +46,12 @@ export const DetailHeader = ({ details, slug }: DetailHeaderProps) => (
           {getNameAndDescriptionDefault(details?.description)}
         </Text>
       </Box>
-      <Flex alignItems="center" gap={4}>
+      <Flex
+        alignItems="center"
+        justify="space-between"
+        gap={4}
+        w={{ base: "full", md: "auto" }}
+      >
         <SocialMedia details={details} />
         <BookmarkButton details={details} slug={slug} />
       </Flex>
diff --git a/src/lib/pages/public-project/components/PublicProjectCard.tsx b/src/lib/pages/public-project/components/PublicProjectCard.tsx
index 23239b357..6ae727531 100644
--- a/src/lib/pages/public-project/components/PublicProjectCard.tsx
+++ b/src/lib/pages/public-project/components/PublicProjectCard.tsx
@@ -77,7 +77,7 @@ export const PublicProjectCard = observer(
             </Flex>
             <Text
               ref={ref as React.MutableRefObject<HTMLParagraphElement>}
-              variant="body3"
+              variant="body2"
               color="text.dark"
               pt={3}
             >
diff --git a/src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx b/src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx
index c16e631e0..5105463b5 100644
--- a/src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx
+++ b/src/lib/pages/public-project/components/table/account/PublicProjectAccountRow.tsx
@@ -11,7 +11,7 @@ interface AccountTableRowProps {
   templateColumns: string;
 }
 
-const getNavigationArgs = (accountInfo: Account): NavigationArgs => {
+export const getNavigationArgs = (accountInfo: Account): NavigationArgs => {
   switch (accountInfo.type) {
     case "account":
       return {
diff --git a/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx b/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
index daac3f458..375c668f7 100644
--- a/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
+++ b/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
@@ -1,7 +1,9 @@
-import { TableContainer, Grid, Box } from "@chakra-ui/react";
+import { TableContainer, Grid, Box, Flex } from "@chakra-ui/react";
 import { matchSorter } from "match-sorter";
 import { useMemo, useState } from "react";
 
+import { useMobile } from "lib/app-provider";
+import { AccountCard } from "lib/components/card/AccountCard";
 import { TextInput } from "lib/components/forms";
 import { EmptyState } from "lib/components/state";
 import { TableHeader, TableTitle, ViewMore } from "lib/components/table";
@@ -38,8 +40,24 @@ export const PublicProjectAccountTable = ({
         });
   }, [accounts, onViewMore, searchKeyword]);
 
+  const isMobile = useMobile();
+  if (!filteredAccounts.length)
+    return (
+      <>
+        <TableTitle
+          title="Accounts"
+          count={accounts.length}
+          mt={{ base: 8, md: 12 }}
+        />
+        <EmptyState
+          message="There is currently no accounts related to this project."
+          imageVariant={onViewMore && "empty"}
+          withBorder
+        />
+      </>
+    );
   return (
-    <Box mt={12} mb={4}>
+    <Box mt={{ base: 8, md: 12 }} mb={4}>
       <TableTitle title="Accounts" count={accounts.length} />
       {!onViewMore && (
         <TextInput
@@ -47,33 +65,29 @@ export const PublicProjectAccountTable = ({
           value={searchKeyword}
           setInputState={setSearchKeyword}
           placeholder="Search with Account Address, Name, or Description"
-          size="lg"
+          size={{ base: "md", md: "lg" }}
           mb={6}
         />
       )}
-      {!filteredAccounts.length ? (
-        <EmptyState
-          message="There is currently no accounts related to this project."
-          imageVariant={onViewMore && "empty"}
-          withBorder
-        />
+      {isMobile ? (
+        <Flex direction="column" gap={4} w="full" mt={4}>
+          {filteredAccounts.map((account) => (
+            <AccountCard key={account.address} accountInfo={account} />
+          ))}
+        </Flex>
       ) : (
-        <>
-          <TableContainer mb={4}>
-            <AccountTableHeader />
-            {filteredAccounts.map((account) => (
-              <PublicProjectAccountRow
-                key={account.address}
-                accountInfo={account}
-                templateColumns={TEMPLATE_COLUMNS}
-              />
-            ))}
-          </TableContainer>
-          {accounts.length > 5 && onViewMore && (
-            <ViewMore onClick={onViewMore} />
-          )}
-        </>
+        <TableContainer mb={4}>
+          <AccountTableHeader />
+          {filteredAccounts.map((account) => (
+            <PublicProjectAccountRow
+              key={account.address}
+              accountInfo={account}
+              templateColumns={TEMPLATE_COLUMNS}
+            />
+          ))}
+        </TableContainer>
       )}
+      {accounts.length > 5 && onViewMore && <ViewMore onClick={onViewMore} />}
     </Box>
   );
 };
diff --git a/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx b/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
index 3a67ee7c8..93d0bfe08 100644
--- a/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
+++ b/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
@@ -1,8 +1,10 @@
-import { TableContainer, Grid, Box } from "@chakra-ui/react";
+import { TableContainer, Grid, Box, Flex } from "@chakra-ui/react";
 import { matchSorter } from "match-sorter";
 import { observer } from "mobx-react-lite";
 import { useMemo, useState } from "react";
 
+import { useMobile } from "lib/app-provider";
+import { StoredCodeCard } from "lib/components/card/StoredCodeCard";
 import { TextInput } from "lib/components/forms";
 import { EmptyState } from "lib/components/state";
 import { TableHeader, TableTitle, ViewMore } from "lib/components/table";
@@ -49,7 +51,7 @@ export const PublicProjectCodeTable = observer(
             threshold: matchSorter.rankings.CONTAINS,
           });
     }, [codes, onViewMore, searchKeyword]);
-
+    const isMobile = useMobile();
     const publicCodes: Option<PublicCodeInfo[]> = filteredCodes?.map(
       (code) => ({
         localInfo: {
@@ -69,8 +71,24 @@ export const PublicProjectCodeTable = observer(
       })
     );
 
+    if (!publicCodes.length)
+      return (
+        <>
+          <TableTitle
+            title="Codes"
+            count={codes.length}
+            mt={{ base: 8, md: 12 }}
+          />
+          <EmptyState
+            my={4}
+            message="There is currently no code related to this project."
+            imageVariant={onViewMore && "empty"}
+            withBorder
+          />
+        </>
+      );
     return (
-      <Box mt={12} mb={4}>
+      <Box mt={{ base: 8, md: 12 }} mb={4}>
         <TableTitle title="Codes" count={codes.length} />
         {!onViewMore && (
           <TextInput
@@ -78,33 +96,32 @@ export const PublicProjectCodeTable = observer(
             value={searchKeyword}
             setInputState={setSearchKeyword}
             placeholder="Search with Code ID or Code Name"
-            size="lg"
+            size={{ base: "md", md: "lg" }}
             mb={6}
           />
         )}
-        {!publicCodes.length ? (
-          <EmptyState
-            message="There is currently no code related to this project."
-            imageVariant={onViewMore && "empty"}
-            withBorder
-          />
+        {isMobile ? (
+          <Flex direction="column" gap={4} w="full" mt={4}>
+            {publicCodes.map((code) => (
+              <StoredCodeCard
+                key={code.publicInfo.id}
+                codeInfo={code.publicInfo}
+              />
+            ))}
+          </Flex>
         ) : (
-          <>
-            <TableContainer>
-              <CodeTableHeader />
-              {publicCodes.map((code) => (
-                <PublicProjectCodeRow
-                  key={code.publicInfo.id}
-                  publicCodeInfo={code}
-                  templateColumns={TEMPLATE_COLUMNS}
-                />
-              ))}
-            </TableContainer>
-            {codes.length > 5 && onViewMore && (
-              <ViewMore onClick={onViewMore} />
-            )}
-          </>
+          <TableContainer>
+            <CodeTableHeader />
+            {publicCodes.map((code) => (
+              <PublicProjectCodeRow
+                key={code.publicInfo.id}
+                publicCodeInfo={code}
+                templateColumns={TEMPLATE_COLUMNS}
+              />
+            ))}
+          </TableContainer>
         )}
+        {codes.length > 5 && onViewMore && <ViewMore onClick={onViewMore} />}
       </Box>
     );
   }
diff --git a/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx b/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
index 4ff37df2d..066ab0c91 100644
--- a/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
+++ b/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
@@ -1,8 +1,10 @@
-import { TableContainer, Grid, Box } from "@chakra-ui/react";
+import { TableContainer, Grid, Box, Flex } from "@chakra-ui/react";
 import { matchSorter } from "match-sorter";
 import { observer } from "mobx-react-lite";
 import { useMemo, useState } from "react";
 
+import { useMobile } from "lib/app-provider";
+import { PublicContractCard } from "lib/components/card/PublicContractCard";
 import { TextInput } from "lib/components/forms";
 import { EmptyState } from "lib/components/state";
 import { TableHeader, TableTitle, ViewMore } from "lib/components/table";
@@ -58,9 +60,25 @@ export const PublicProjectContractTable = observer(
           ...contract,
         },
       }));
-
+    const isMobile = useMobile();
+    if (!publicContracts.length)
+      return (
+        <>
+          <TableTitle
+            title="Contracts"
+            count={contracts.length}
+            mt={{ base: 8, md: 12 }}
+          />
+          <EmptyState
+            my={4}
+            message="There is currently no contracts related to this project."
+            imageVariant={onViewMore && "empty"}
+            withBorder
+          />
+        </>
+      );
     return (
-      <Box mt={12} mb={4}>
+      <Box mt={{ base: 8, md: 12 }} mb={4}>
         <TableTitle title="Contracts" count={contracts.length} />
         {!onViewMore && (
           <TextInput
@@ -68,32 +86,33 @@ export const PublicProjectContractTable = observer(
             value={searchKeyword}
             setInputState={setSearchKeyword}
             placeholder="Search with Contract Address or Contract Name"
-            size="lg"
+            size={{ base: "md", md: "lg" }}
             mb={6}
           />
         )}
-        {!publicContracts.length ? (
-          <EmptyState
-            message="There is currently no contracts related to this project."
-            imageVariant={onViewMore && "empty"}
-            withBorder
-          />
+        {isMobile ? (
+          <Flex direction="column" gap={4} w="full" mt={4}>
+            {publicContracts.map((contract) => (
+              <PublicContractCard
+                publicInfo={contract.publicInfo}
+                key={contract.publicInfo.contractAddress}
+              />
+            ))}
+          </Flex>
         ) : (
-          <>
-            <TableContainer>
-              <ContractTableHeader />
-              {publicContracts.map((contract) => (
-                <PublicProjectContractRow
-                  key={contract.publicInfo.contractAddress}
-                  publicContractInfo={contract}
-                  templateColumns={TEMPLATE_COLUMNS}
-                />
-              ))}
-            </TableContainer>
-            {contracts.length > 5 && onViewMore && (
-              <ViewMore onClick={onViewMore} />
-            )}
-          </>
+          <TableContainer>
+            <ContractTableHeader />
+            {publicContracts.map((contract) => (
+              <PublicProjectContractRow
+                key={contract.publicInfo.contractAddress}
+                publicContractInfo={contract}
+                templateColumns={TEMPLATE_COLUMNS}
+              />
+            ))}
+          </TableContainer>
+        )}
+        {contracts.length > 5 && onViewMore && (
+          <ViewMore onClick={onViewMore} />
         )}
       </Box>
     );
diff --git a/src/lib/pages/public-project/slug.tsx b/src/lib/pages/public-project/slug.tsx
index e554d19d5..17c455923 100644
--- a/src/lib/pages/public-project/slug.tsx
+++ b/src/lib/pages/public-project/slug.tsx
@@ -54,7 +54,12 @@ export const ProjectDetail = () => {
     <PageContainer>
       <DetailHeader details={projectDetail} slug={slug} />
       <Tabs index={tabIndex} isLazy lazyBehavior="keepMounted">
-        <TabList my={6} borderBottom="1px" borderColor="gray.800">
+        <TabList
+          my={6}
+          borderBottom="1px solid"
+          borderColor="gray.700"
+          overflowX="scroll"
+        >
           <CustomTab
             count={overviewCount}
             onClick={() => setTabIndex(TabIndex.Overview)}
@@ -85,7 +90,6 @@ export const ProjectDetail = () => {
             Accounts
           </CustomTab>
         </TabList>
-
         <TabPanels my={8}>
           <TabPanel p={0}>
             {wasm.enabled && (
diff --git a/src/lib/pages/query/components/QueryArea.tsx b/src/lib/pages/query/components/QueryArea.tsx
index 4aaab2960..3c942331e 100644
--- a/src/lib/pages/query/components/QueryArea.tsx
+++ b/src/lib/pages/query/components/QueryArea.tsx
@@ -4,7 +4,7 @@ import type { AxiosError } from "axios";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 
-import { useBaseApiRoute, useCurrentChain } from "lib/app-provider";
+import { useBaseApiRoute, useCurrentChain, useMobile } from "lib/app-provider";
 import { ContractCmdButton } from "lib/components/ContractCmdButton";
 import { CopyButton } from "lib/components/copy";
 import { CustomIcon } from "lib/components/icon";
@@ -93,6 +93,7 @@ export const QueryArea = ({
     };
   });
 
+  const isMobile = useMobile();
   return (
     <Flex direction="column">
       <Box width="full" mt={4} mb={8} alignItems="center">
@@ -132,11 +133,11 @@ export const QueryArea = ({
           )
         )}
       </Box>
-      <Flex gap={4}>
+      <Flex gap={4} direction={{ base: "column", md: "row" }}>
         <Box w="full">
           <JsonInput topic="Query Msg" text={msg} setText={setMsg} />
-          <Flex align="center" justify="space-between">
-            <Flex gap={2}>
+          <Flex align="center" justify="space-between" gap={{ base: 1, md: 0 }}>
+            <Flex gap={{ base: 1, md: 2 }}>
               <CopyButton
                 isDisable={!msg.length}
                 value={msg}
@@ -152,12 +153,13 @@ export const QueryArea = ({
               variant="primary"
               fontSize="14px"
               p="6px 16px"
+              size={{ base: "sm", md: "md" }}
               onClick={handleQuery}
               isDisabled={jsonValidate(msg) !== null}
               isLoading={isFetching || isRefetching}
               leftIcon={<CustomIcon name="query" />}
             >
-              Query (Ctrl + Enter)
+              Query {!isMobile && "(Ctrl + Enter)"}
             </Button>
           </Flex>
         </Box>
diff --git a/src/lib/pages/query/index.tsx b/src/lib/pages/query/index.tsx
index 9a2a160d0..0d816ff63 100644
--- a/src/lib/pages/query/index.tsx
+++ b/src/lib/pages/query/index.tsx
@@ -8,6 +8,7 @@ import {
   useBaseApiRoute,
   useInternalNavigate,
   useWasmConfig,
+  useMobile,
 } from "lib/app-provider";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
 import { CustomIcon } from "lib/components/icon";
@@ -34,7 +35,7 @@ const Query = () => {
   const [contractAddress, setContractAddress] = useState("" as ContractAddr);
   const [initialMsg, setInitialMsg] = useState("");
   const [cmds, setCmds] = useState<[string, string][]>([]);
-
+  const isMobile = useMobile();
   const goToExecute = () => {
     navigate({
       pathname: "/execute",
@@ -101,18 +102,20 @@ const Query = () => {
         <Heading as="h5" variant="h5">
           Query Contract
         </Heading>
-        <Box>
-          <Button
-            variant="ghost-secondary"
-            size="sm"
-            p="unset"
-            pl={2}
-            onClick={goToExecute}
-          >
-            Go To Execute
-            <CustomIcon name="chevron-right" boxSize={3} />
-          </Button>
-        </Box>
+        {!isMobile && (
+          <Box>
+            <Button
+              variant="ghost-secondary"
+              size="sm"
+              p="unset"
+              pl={2}
+              onClick={goToExecute}
+            >
+              Go To Execute
+              <CustomIcon name="chevron-right" boxSize={3} />
+            </Button>
+          </Box>
+        )}
       </Flex>
 
       <ContractSelectSection
diff --git a/src/lib/pages/tx-details/components/MessageSection.tsx b/src/lib/pages/tx-details/components/MessageSection.tsx
index 1fd62af75..55b1ec3ce 100644
--- a/src/lib/pages/tx-details/components/MessageSection.tsx
+++ b/src/lib/pages/tx-details/components/MessageSection.tsx
@@ -20,16 +20,18 @@ interface MessageSectionProps {
 export const MessageSection = ({ txData, assetInfos }: MessageSectionProps) => {
   const msgs = txData.tx.body.messages;
   return (
-    <Flex direction="column" flex={1} gap={4}>
+    <Flex direction="column" flex={1} gap={4} w="full">
       {txData.isTxFailed && (
         <Alert variant="error" mb={2} alignItems="center">
-          <Flex gap={2} align="center">
+          <Flex gap={2} align="start">
             <CustomIcon
               name="alert-circle-solid"
               color="error.main"
               boxSize={4}
             />
-            <AlertDescription>{txData.raw_log}</AlertDescription>
+            <AlertDescription wordBreak="break-word">
+              {txData.raw_log}
+            </AlertDescription>
           </Flex>
         </Alert>
       )}
diff --git a/src/lib/pages/tx-details/components/TxHeader.tsx b/src/lib/pages/tx-details/components/TxHeader.tsx
index d86061073..d5ff47ecb 100644
--- a/src/lib/pages/tx-details/components/TxHeader.tsx
+++ b/src/lib/pages/tx-details/components/TxHeader.tsx
@@ -1,6 +1,7 @@
 import type { FlexProps } from "@chakra-ui/react";
 import { Button, Box, Flex, Heading, Text } from "@chakra-ui/react";
 
+import { useMobile } from "lib/app-provider";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
 import { useOpenTxTab } from "lib/hooks";
@@ -18,74 +19,137 @@ const DotSeparator = () => (
 
 export const TxHeader = ({ txData, ...flexProps }: TxHeaderProps) => {
   const openLcdTab = useOpenTxTab("lcd");
+  const isMobile = useMobile();
   return (
     <Flex direction="column" gap={2} {...flexProps}>
       <Flex justify="space-between" align="center">
-        <Heading as="h5" variant="h5">
-          Transaction Details
-        </Heading>
-        <Button
-          variant="ghost-gray"
-          padding={2}
-          rightIcon={<CustomIcon name="launch" boxSize={3} color="text.dark" />}
-          onClick={() => {
-            AmpTrackViewJson("tx_page_transaction_hash");
-            openLcdTab(txData.txhash);
-          }}
-        >
-          View in JSON
-        </Button>
-      </Flex>
-      <Flex direction="column" gap={1}>
-        <Flex gap={2} fontSize="14px" w="full">
-          <Text variant="body2" fontWeight={500} color="text.dark">
-            Transaction Hash:
-          </Text>
-          <CopyLink
-            value={txData.txhash}
-            amptrackSection="tx_header"
-            type="tx_hash"
-          />
-        </Flex>
-        <Flex gap={2} fontSize="14px" color="text.dark" align="center">
-          <Flex
-            align="center"
-            gap={1}
-            color={txData.isTxFailed ? "error.main" : "success.main"}
-          >
-            {txData.isTxFailed ? (
-              <>
-                <CustomIcon
-                  name="close-circle-solid"
-                  boxSize={3}
-                  m={0}
-                  color="error.main"
-                />
-                <p>Failed</p>
-              </>
-            ) : (
-              <>
-                <CustomIcon
-                  name="check-circle-solid"
-                  boxSize={3}
-                  m={0}
-                  color="success.main"
-                />
-                <p>Success</p>
-              </>
-            )}
-          </Flex>
-          <DotSeparator />
-          {txData.timestamp ? (
-            <>
-              <p>{dateFromNow(txData.timestamp)}</p>
-              <DotSeparator />
-              <p>{formatUTC(txData.timestamp)}</p>
-            </>
-          ) : (
-            <p>N/A</p>
+        <Flex gap={2} mt={{ base: 2, md: 4 }} mb={{ base: 2, md: 0 }}>
+          <Heading as="h5" variant={{ base: "h6", md: "h5" }}>
+            Transaction Details
+          </Heading>
+          {isMobile && (
+            <Flex
+              align="center"
+              gap={1}
+              color={txData.isTxFailed ? "error.main" : "success.main"}
+            >
+              {txData.isTxFailed ? (
+                <>
+                  <CustomIcon
+                    name="close-circle-solid"
+                    boxSize={3}
+                    m={0}
+                    color="error.main"
+                  />
+                  <Text variant="body2" color="error.main">
+                    Failed
+                  </Text>
+                </>
+              ) : (
+                <>
+                  <CustomIcon
+                    name="check-circle-solid"
+                    boxSize={3}
+                    m={0}
+                    color="success.main"
+                  />
+                  <Text variant="body2" color="success.main">
+                    Success
+                  </Text>
+                </>
+              )}
+            </Flex>
           )}
         </Flex>
+        {!isMobile && (
+          <Button
+            variant="ghost-gray"
+            rightIcon={<CustomIcon name="launch" boxSize={3} m={0} />}
+            onClick={() => {
+              AmpTrackViewJson("tx_page_transaction_hash");
+              openLcdTab(txData.txhash);
+            }}
+          >
+            View in JSON
+          </Button>
+        )}
+      </Flex>
+      <Flex
+        gap={{ base: 1, md: 2 }}
+        fontSize="14px"
+        w="full"
+        direction={{ base: "column", md: "row" }}
+      >
+        <Text variant="body2" fontWeight={500} color="text.dark">
+          Transaction Hash:
+        </Text>
+        <CopyLink
+          value={txData.txhash}
+          amptrackSection="tx_header"
+          type="tx_hash"
+        />
+      </Flex>
+      <Flex gap={2} fontSize="14px" color="text.dark" align="center">
+        {!isMobile && (
+          <>
+            <Flex
+              align="center"
+              gap={1}
+              color={txData.isTxFailed ? "error.main" : "success.main"}
+            >
+              {txData.isTxFailed ? (
+                <>
+                  <CustomIcon
+                    name="close-circle-solid"
+                    boxSize={3}
+                    m={0}
+                    color="error.main"
+                  />
+                  <Text variant="body2" color="error.main">
+                    Failed
+                  </Text>
+                </>
+              ) : (
+                <>
+                  <CustomIcon
+                    name="check-circle-solid"
+                    boxSize={3}
+                    m={0}
+                    color="success.main"
+                  />
+                  <Text variant="body2" color="success.main">
+                    Success
+                  </Text>
+                </>
+              )}
+            </Flex>
+            <DotSeparator />
+          </>
+        )}
+        {txData.timestamp ? (
+          <>
+            <Flex gap={1} alignItems="center">
+              <CustomIcon name="history" boxSize={3} color="gray.600" />
+              <Text
+                variant={{ base: "body3", md: "body2" }}
+                color="text.dark"
+                display="inline"
+              >
+                {dateFromNow(txData.timestamp)}
+              </Text>
+            </Flex>
+            <DotSeparator />
+            <Text
+              variant={{ base: "body3", md: "body2" }}
+              color="text.dark"
+              display="inline"
+            >
+              {formatUTC(txData.timestamp)}
+            </Text>
+          </>
+        ) : (
+          <p>N/A</p>
+        )}
       </Flex>
     </Flex>
   );
diff --git a/src/lib/pages/tx-details/components/TxInfoMobile.tsx b/src/lib/pages/tx-details/components/TxInfoMobile.tsx
new file mode 100644
index 000000000..a02fed8ee
--- /dev/null
+++ b/src/lib/pages/tx-details/components/TxInfoMobile.tsx
@@ -0,0 +1,77 @@
+import type { FlexProps } from "@chakra-ui/react";
+import { Text, chakra, Flex } from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { LabelText } from "lib/components/LabelText";
+import type { AssetInfosOpt } from "lib/services/assetService";
+import type { TxData } from "lib/services/txService";
+import { formatBalanceWithDenom, formatInteger } from "lib/utils";
+
+interface TxInfoMobileProps extends FlexProps {
+  txData: TxData;
+  assetInfos: AssetInfosOpt;
+}
+
+const Container = chakra(Flex, {
+  baseStyle: {
+    flexDir: "column",
+    background: "gray.900",
+    borderRadius: 2,
+    padding: 3,
+    gap: 6,
+    marginY: 6,
+  },
+});
+
+export const TxInfoMobile = ({
+  txData,
+  assetInfos,
+  ...flexProps
+}: TxInfoMobileProps) => {
+  const feeCoin = txData.tx.auth_info.fee?.amount.at(0);
+  const assetInfo = feeCoin ? assetInfos?.[feeCoin.denom] : undefined;
+  return (
+    <Container {...flexProps}>
+      <Flex>
+        <LabelText flex="1" label="Network">
+          {txData.chainId}
+        </LabelText>
+        <LabelText flex="1" label="Block Height">
+          <ExplorerLink
+            value={txData.height}
+            type="block_height"
+            showCopyOnHover
+            ampCopierSection="tx_page_block_height"
+          />
+        </LabelText>
+      </Flex>
+      <Flex>
+        <LabelText flex="1" label="Transaction Fee">
+          {feeCoin ? (
+            formatBalanceWithDenom({
+              coin: feeCoin,
+              symbol: assetInfo?.symbol,
+              precision: assetInfo?.precision,
+            })
+          ) : (
+            <Text variant="body2" color="text.dark">
+              No Fee
+            </Text>
+          )}
+        </LabelText>
+        <LabelText flex="1" label="Gas Used/Wanted">
+          {`${formatInteger(txData.gas_used)}/${formatInteger(
+            txData.gas_wanted
+          )}`}
+        </LabelText>
+      </Flex>
+      <LabelText label="Memo">
+        {txData.tx.body.memo || (
+          <Text variant="body2" color="text.dark">
+            No Memo
+          </Text>
+        )}
+      </LabelText>
+    </Container>
+  );
+};
diff --git a/src/lib/pages/tx-details/components/index.ts b/src/lib/pages/tx-details/components/index.ts
index c36abca20..f6012327a 100644
--- a/src/lib/pages/tx-details/components/index.ts
+++ b/src/lib/pages/tx-details/components/index.ts
@@ -1,3 +1,4 @@
 export * from "./TxHeader";
 export * from "./TxInfo";
+export * from "./TxInfoMobile";
 export * from "./tx-message";
diff --git a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
index 7e73ebbe8..bdbb9dcf0 100644
--- a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
@@ -4,7 +4,7 @@ import type { Coin } from "@cosmjs/stargate";
 import { findAttribute } from "@cosmjs/stargate/build/logs";
 import type { ReactNode } from "react";
 
-import { useGetAddressType } from "lib/app-provider";
+import { useGetAddressType, useMobile } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import type { IconKeys } from "lib/components/icon";
 import { CustomIcon } from "lib/components/icon";
@@ -30,22 +30,22 @@ export const TxMsgExpand = ({
 }: TxMsgExpandProps) => {
   const getAddressType = useGetAddressType();
   const { "@type": type, ...body } = msgBody;
+  const isMobile = useMobile();
   const isIBC =
     Boolean(log?.events?.find((event) => event.type === "send_packet")) ||
     type.startsWith("/ibc");
   let msgIcon: IconKeys = "info-circle";
   let content: ReactNode;
-
   switch (type) {
     case "/cosmwasm.wasm.v1.MsgStoreCode":
       msgIcon = "upload";
       content = (
-        <>
-          Upload Wasm
+        <Flex display="inline">
+          Upload Wasm{" "}
           {log && (
             <>
               {" "}
-              and stored as
+              and stored as{" "}
               <ExplorerLink
                 type="code_id"
                 value={findAttribute([log], "store_code", "code_id").value}
@@ -56,14 +56,14 @@ export const TxMsgExpand = ({
               />
             </>
           )}
-        </>
+        </Flex>
       );
       break;
     case "/cosmwasm.wasm.v1.MsgInstantiateContract":
       msgIcon = "instantiate";
       content = (
-        <>
-          Instantiate
+        <Flex display="inline">
+          Instantiate{" "}
           {log && (
             <ExplorerLink
               type="contract_address"
@@ -74,8 +74,8 @@ export const TxMsgExpand = ({
               textVariant="body1"
               ampCopierSection="tx_page_message_header_contract"
             />
-          )}
-          <p>from</p>
+          )}{" "}
+          from{" "}
           <ExplorerLink
             type="code_id"
             value={body.code_id}
@@ -83,14 +83,14 @@ export const TxMsgExpand = ({
             textVariant="body1"
             ampCopierSection="tx_page_message_header_code"
           />
-        </>
+        </Flex>
       );
       break;
     case "/cosmwasm.wasm.v1.MsgInstantiateContract2":
       msgIcon = "instantiate";
       content = (
-        <>
-          Instantiate2
+        <Flex display="inline">
+          Instantiate2{" "}
           {log && (
             <ExplorerLink
               type="contract_address"
@@ -101,8 +101,8 @@ export const TxMsgExpand = ({
               textVariant="body1"
               ampCopierSection="tx_page_message_header_contract"
             />
-          )}
-          <p>from</p>
+          )}{" "}
+          from{" "}
           <ExplorerLink
             type="code_id"
             value={body.code_id}
@@ -110,16 +110,16 @@ export const TxMsgExpand = ({
             textVariant="body1"
             ampCopierSection="tx_page_message_header_code"
           />
-        </>
+        </Flex>
       );
       break;
     case "/cosmwasm.wasm.v1.MsgExecuteContract":
       msgIcon = "execute";
       content = (
-        <>
-          Execute
-          <span style={{ fontWeight: 700 }}>{Object.keys(body.msg).at(0)}</span>
-          on
+        <Flex display="inline">
+          Execute{" "}
+          <span style={{ fontWeight: 700 }}>{Object.keys(body.msg).at(0)}</span>{" "}
+          on{" "}
           <ExplorerLink
             type="contract_address"
             value={body.contract}
@@ -127,13 +127,13 @@ export const TxMsgExpand = ({
             textVariant="body1"
             ampCopierSection="tx_page_message_header_contract"
           />
-        </>
+        </Flex>
       );
       break;
     case "/cosmwasm.wasm.v1.MsgMigrateContract":
       msgIcon = "migrate";
       content = (
-        <>
+        <Flex display="inline">
           Migrate{" "}
           <ExplorerLink
             type="contract_address"
@@ -150,13 +150,13 @@ export const TxMsgExpand = ({
             textVariant="body1"
             ampCopierSection="tx_page_message_header_code"
           />
-        </>
+        </Flex>
       );
       break;
     case "/cosmwasm.wasm.v1.MsgUpdateAdmin":
       msgIcon = "admin-edit";
       content = (
-        <>
+        <Flex display="inline">
           Update admin on{" "}
           <ExplorerLink
             type="contract_address"
@@ -173,13 +173,13 @@ export const TxMsgExpand = ({
             textVariant="body1"
             ampCopierSection="tx_page_message_header_admin"
           />
-        </>
+        </Flex>
       );
       break;
     case "/cosmwasm.wasm.v1.MsgClearAdmin":
       msgIcon = "admin-clear";
       content = (
-        <>
+        <Flex display="inline">
           Clear admin on{" "}
           <ExplorerLink
             type="contract_address"
@@ -188,7 +188,7 @@ export const TxMsgExpand = ({
             textVariant="body1"
             ampCopierSection="tx_page_message_header_contract"
           />
-        </>
+        </Flex>
       );
       break;
     case "/cosmos.bank.v1beta1.MsgSend":
@@ -206,8 +206,8 @@ export const TxMsgExpand = ({
               });
         msgIcon = "send";
         content = (
-          <>
-            Send {assetText} to
+          <Flex display="inline">
+            Send {assetText} to{" "}
             <ExplorerLink
               type={getAddressType(toAddress)}
               value={toAddress}
@@ -215,18 +215,18 @@ export const TxMsgExpand = ({
               textVariant="body1"
               ampCopierSection="tx_page_message_header_send_address"
             />
-          </>
+          </Flex>
         );
       }
       break;
     case "/cosmos.gov.v1beta1.MsgSubmitProposal":
       msgIcon = "submit-proposal";
       content = (
-        <>
+        <Flex display="inline">
           Submit Proposal {body.is_expedited && " Expedited "}
           {log && (
             <>
-              <p>ID</p>
+              ID{" "}
               <ExplorerLink
                 type="proposal_id"
                 value={
@@ -238,13 +238,13 @@ export const TxMsgExpand = ({
               />
             </>
           )}
-        </>
+        </Flex>
       );
       break;
     case "/cosmos.gov.v1beta1.MsgVote":
       msgIcon = "vote";
       content = (
-        <>
+        <Flex display="inline">
           Vote{" "}
           <span style={{ fontWeight: 700 }}>
             {voteOption[body.option as VoteOption]}
@@ -257,13 +257,13 @@ export const TxMsgExpand = ({
             textVariant="body1"
             ampCopierSection="tx_page_message_header_proposal"
           />
-        </>
+        </Flex>
       );
       break;
     case "/cosmos.staking.v1beta1.MsgDelegate":
       msgIcon = "delegate";
       content = (
-        <>
+        <Flex display="inline">
           Delegate by{" "}
           <ExplorerLink
             type={getAddressType(body.delegator_address)}
@@ -280,7 +280,7 @@ export const TxMsgExpand = ({
             textVariant="body1"
             ampCopierSection="tx_page_message_header_validator"
           />
-        </>
+        </Flex>
       );
       break;
     default: {
@@ -319,19 +319,41 @@ export const TxMsgExpand = ({
         bg: "gray.700",
       }}
     >
-      <Flex align="center" gap={2} fontSize="16px" fontWeight={500}>
-        <CustomIcon name={msgIcon} boxSize={4} color="secondary.main" m={0} />
+      <Flex
+        align={{ base: "start", md: "center" }}
+        gap={2}
+        fontSize="16px"
+        fontWeight={500}
+      >
+        <CustomIcon
+          name={msgIcon}
+          boxSize={4}
+          color="secondary.main"
+          m={0}
+          mt={{ base: 1, md: 0 }}
+        />
         {content}
-        {isIBC && <Tag variant="accent-dark">IBC</Tag>}
+        {isIBC && !isMobile && (
+          <Tag mx={2} variant="accent-dark" size="md" minW="hug-content">
+            IBC
+          </Tag>
+        )}
+      </Flex>
+      <Flex>
+        {isIBC && isMobile && (
+          <Tag mx={2} variant="accent-dark" size="sm" minW="hug-content">
+            IBC
+          </Tag>
+        )}
+        <CustomIcon
+          name="chevron-down"
+          color="gray.600"
+          boxSize={4}
+          transform={isExpand ? "rotate(180deg)" : "rotate(0)"}
+          transition="all .25s ease-in-out"
+          m={0}
+        />
       </Flex>
-      <CustomIcon
-        name="chevron-down"
-        color="gray.600"
-        boxSize={4}
-        transform={isExpand ? "rotate(180deg)" : "rotate(0)"}
-        transition="all .25s ease-in-out"
-        m={0}
-      />
     </Flex>
   );
 };
diff --git a/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx b/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
index 00e158f9a..025a4378c 100644
--- a/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/msg-receipts/CoinComponent.tsx
@@ -2,6 +2,7 @@ import { Flex, Grid } from "@chakra-ui/react";
 import type { Coin } from "@cosmjs/stargate";
 import { useState } from "react";
 
+import { useMobile } from "lib/app-provider";
 import { ShowMoreButton } from "lib/components/button";
 import { UnsupportedTokensModal } from "lib/components/modal/UnsupportedTokensModal";
 import { TokenCard } from "lib/components/TokenCard";
@@ -29,10 +30,11 @@ const MultiCoin = ({
   const [showMore, setShowMore] = useState(false);
 
   const hasSupportedCoins = supportedCoins.length > 0;
+  const isMobile = useMobile();
   return (
     <Flex direction="column" w="full">
       {hasSupportedCoins && (
-        <Grid gridGap={4} gridTemplateColumns="1fr 1fr">
+        <Grid gridGap={4} gridTemplateColumns={isMobile ? "1fr " : "1fr 1fr"}>
           {supportedCoins.slice(0, showMore ? undefined : 2).map((coin) => {
             const assetInfo = assetInfos[coin.denom];
             return (
@@ -113,7 +115,8 @@ const SingleCoin = ({
         assetInfo,
       }}
       amptrackSection="tx_msg_receipts_assets"
-      w="50%"
+      w={{ base: "100%", md: "50%" }}
+      mt={{ base: 2, md: 0 }}
     />
   ) : (
     <UnsupportedTokensModal
diff --git a/src/lib/pages/tx-details/index.tsx b/src/lib/pages/tx-details/index.tsx
index 29e886633..5daa0a911 100644
--- a/src/lib/pages/tx-details/index.tsx
+++ b/src/lib/pages/tx-details/index.tsx
@@ -2,6 +2,7 @@ import { Flex } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
+import { useMobile } from "lib/app-provider";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
@@ -11,13 +12,13 @@ import { useAssetInfos } from "lib/services/assetService";
 import { useTxData } from "lib/services/txService";
 import { getFirstQueryParam, truncate } from "lib/utils";
 
-import { TxHeader, TxInfo } from "./components";
+import { TxHeader, TxInfo, TxInfoMobile } from "./components";
 import { MessageSection } from "./components/MessageSection";
 
 const TxDetails = () => {
   const router = useRouter();
   const hashParam = getFirstQueryParam(router.query.txHash);
-
+  const isMobile = useMobile();
   const {
     data: txData,
     isLoading: txLoading,
@@ -52,9 +53,10 @@ const TxDetails = () => {
       />
       {txData ? (
         <>
-          <TxHeader mt={6} txData={txData} />
-          <Flex my={12} justify="space-between">
-            <TxInfo txData={txData} assetInfos={assetInfos} />
+          <TxHeader mt={2} txData={txData} />
+          {isMobile && <TxInfoMobile txData={txData} assetInfos={assetInfos} />}
+          <Flex my={{ base: 0, md: 12 }} justify="space-between">
+            {!isMobile && <TxInfo txData={txData} assetInfos={assetInfos} />}
             <MessageSection txData={txData} assetInfos={assetInfos} />
           </Flex>
         </>
diff --git a/src/lib/pages/txs/components/TxsTable.tsx b/src/lib/pages/txs/components/TxsTable.tsx
index 0dc16c94f..217231b62 100644
--- a/src/lib/pages/txs/components/TxsTable.tsx
+++ b/src/lib/pages/txs/components/TxsTable.tsx
@@ -1,7 +1,9 @@
+import { Flex } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 import { useEffect } from "react";
 
-import { useCelatoneApp } from "lib/app-provider";
+import { useCelatoneApp, useMobile } from "lib/app-provider";
+import { TransactionCard } from "lib/components/card/TransactionCard";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
@@ -43,7 +45,7 @@ export const TxsTable = ({ isViewMore }: TxsTableProps) => {
     setPageSize(size);
     setCurrentPage(1);
   };
-
+  const isMobile = useMobile();
   useEffect(() => {
     if (!isViewMore) setPageSize(10);
     setCurrentPage(1);
@@ -57,6 +59,39 @@ export const TxsTable = ({ isViewMore }: TxsTableProps) => {
         message="There is an error during fetching transactions."
       />
     );
+  if (isMobile)
+    return (
+      <>
+        {txs ? (
+          <Flex direction="column" gap={4} w="full" mt={4}>
+            {txs?.map((transaction) => (
+              <TransactionCard
+                transaction={transaction}
+                key={transaction.hash}
+                showRelations={false}
+              />
+            ))}
+            {!isViewMore && countTxs > 10 && (
+              <Pagination
+                currentPage={currentPage}
+                pagesQuantity={pagesQuantity}
+                offset={offset}
+                totalData={countTxs}
+                pageSize={pageSize}
+                onPageChange={onPageChange}
+                onPageSizeChange={onPageSizeChange}
+              />
+            )}
+          </Flex>
+        ) : (
+          <EmptyState
+            withBorder
+            imageVariant="empty"
+            message="There are no transactions in this network."
+          />
+        )}
+      </>
+    );
   return (
     <>
       <TransactionsTable
diff --git a/src/lib/pages/txs/index.tsx b/src/lib/pages/txs/index.tsx
index 875bed30a..800749ec7 100644
--- a/src/lib/pages/txs/index.tsx
+++ b/src/lib/pages/txs/index.tsx
@@ -15,10 +15,10 @@ const Txs = () => {
 
   return (
     <PageContainer>
-      <Heading variant="h5" as="h5">
+      <Heading variant="h5" as="h5" minH="36px">
         Transactions
       </Heading>
-      <Text variant="body2" color="text.dark" mb={8} mt={1}>
+      <Text variant="body2" color="text.dark" mb={8}>
         This page displays all transactions on this network sorted by recency
       </Text>
       <TxsTable isViewMore={false} />
diff --git a/src/lib/query/block.ts b/src/lib/query/block.ts
index e961d9e27..2b04d8f62 100644
--- a/src/lib/query/block.ts
+++ b/src/lib/query/block.ts
@@ -57,3 +57,16 @@ export const getLatestBlockInfoQueryDocument = graphql(`
     }
   }
 `);
+
+export const getBlockTimeQueryDocument = graphql(`
+  query getBlockTime {
+    hundred: blocks(order_by: { height: desc }, offset: 100, limit: 1) {
+      height
+      timestamp
+    }
+    latest: blocks(order_by: { height: desc }, limit: 1) {
+      height
+      timestamp
+    }
+  }
+`);
diff --git a/src/lib/services/blockService.ts b/src/lib/services/blockService.ts
index c94360580..1bf012fc7 100644
--- a/src/lib/services/blockService.ts
+++ b/src/lib/services/blockService.ts
@@ -7,10 +7,12 @@ import {
   getLatestBlockInfoQueryDocument,
   getBlockDetailsByHeightQueryDocument,
   getBlockListQueryDocument,
+  getBlockTimeQueryDocument,
 } from "lib/query";
 import type {
   BlockDetails,
   BlockInfo,
+  BlockTimeInfo,
   LatestBlock,
   ValidatorAddr,
 } from "lib/types";
@@ -127,3 +129,21 @@ export const useLatestBlockInfo = (): UseQueryResult<LatestBlock> => {
 
   return useQuery(["latest_block_info", indexerGraphClient], queryFn);
 };
+
+export const useAverageBlockTime = (): UseQueryResult<BlockTimeInfo> => {
+  const { indexerGraphClient } = useCelatoneApp();
+  const queryFn = useCallback(
+    async () =>
+      indexerGraphClient
+        .request(getBlockTimeQueryDocument)
+        .then(({ hundred, latest }) => {
+          return {
+            hundred: parseDateOpt(hundred[0].timestamp),
+            latest: parseDateOpt(latest[0].timestamp),
+          };
+        }),
+    [indexerGraphClient]
+  );
+
+  return useQuery(["average_block_time", indexerGraphClient], queryFn);
+};
diff --git a/src/lib/styles/globals.css b/src/lib/styles/globals.css
index 35b439a64..96c442899 100644
--- a/src/lib/styles/globals.css
+++ b/src/lib/styles/globals.css
@@ -1,6 +1,7 @@
 /* Global Styling here */
 .copier-wrapper:hover .copier {
-  display: block;
+  display: inline;
+  max-height: 11px;
 }
 
 .accordion-stepper-wrapper:not(:first-of-type) div#before-stepper {
diff --git a/src/lib/styles/theme/components/button.ts b/src/lib/styles/theme/components/button.ts
index b2c3c2dcc..818a55058 100644
--- a/src/lib/styles/theme/components/button.ts
+++ b/src/lib/styles/theme/components/button.ts
@@ -1,6 +1,8 @@
 import type { ComponentStyleConfig } from "@chakra-ui/react";
 import { defineStyle } from "@chakra-ui/react";
 
+import { CURR_THEME } from "env";
+
 const gray500 = "gray.500";
 const gray600 = "gray.600";
 const gray700 = "gray.700";
@@ -70,24 +72,43 @@ export const Button: ComponentStyleConfig = {
     },
   },
   variants: {
-    primary: generateStyle({
-      basic: {
-        background: "primary.main",
-        color: "text.main",
-        "& span": {
-          color: "text.main",
-        },
-      },
-      disabled: {
-        background: primaryBg,
-        color: gray600,
-        "& span": {
-          color: gray600,
-        },
-      },
-      hoverBg: primaryDark,
-      activeBg: primaryLight,
-    }),
+    primary: CURR_THEME.button?.primary
+      ? generateStyle({
+          basic: {
+            background: CURR_THEME.button.primary.background,
+            color: CURR_THEME.button.primary.color,
+            "& span": {
+              color: CURR_THEME.button.primary.color,
+            },
+          },
+          disabled: {
+            background: CURR_THEME.button.primary.disabledBackground,
+            color: CURR_THEME.button.primary.disabledColor,
+            "& span": {
+              color: CURR_THEME.button.primary.disabledColor,
+            },
+          },
+          hoverBg: primaryDark,
+          activeBg: primaryLight,
+        })
+      : generateStyle({
+          basic: {
+            background: "primary.main",
+            color: "text.main",
+            "& span": {
+              color: "text.main",
+            },
+          },
+          disabled: {
+            background: primaryBg,
+            color: gray600,
+            "& span": {
+              color: gray600,
+            },
+          },
+          hoverBg: primaryDark,
+          activeBg: primaryLight,
+        }),
     "gray-solid": generateStyle({
       basic: {
         background: gray800,
@@ -109,29 +130,53 @@ export const Button: ComponentStyleConfig = {
       hoverBg: errorDark,
       activeBg: "error.light",
     }),
-    "outline-primary": generateStyle({
-      basic: {
-        border: borderDefualt,
-        borderColor: primaryLight,
-        color: primaryLight,
-        "> div": {
-          color: primaryLight,
-        },
-        "> svg": {
-          color: primaryLight,
-        },
-      },
-      disabled: {
-        border: borderDefualt,
-        borderColor: gray700,
-        color: gray600,
-        "> svg": {
-          color: gray600,
-        },
-      },
-      hoverBg: primaryBg,
-      activeBg: "transparent",
-    }),
+    "outline-primary": CURR_THEME.button?.outlinePrimary
+      ? generateStyle({
+          basic: {
+            border: borderDefualt,
+            borderColor: CURR_THEME.button.outlinePrimary.borderColor,
+            color: CURR_THEME.button.outlinePrimary.color,
+            "> div": {
+              color: CURR_THEME.button.outlinePrimary.color,
+            },
+            "> svg": {
+              color: CURR_THEME.button.outlinePrimary.color,
+            },
+          },
+          disabled: {
+            border: borderDefualt,
+            borderColor: CURR_THEME.button.outlinePrimary.disabledBorderColor,
+            color: CURR_THEME.button.outlinePrimary.disabledColor,
+            "& span": {
+              color: CURR_THEME.button.outlinePrimary.disabledColor,
+            },
+          },
+          hoverBg: primaryDark,
+          activeBg: primaryLight,
+        })
+      : generateStyle({
+          basic: {
+            border: borderDefualt,
+            borderColor: primaryLight,
+            color: primaryLight,
+            "> div": {
+              color: primaryLight,
+            },
+            "> svg": {
+              color: primaryLight,
+            },
+          },
+          disabled: {
+            border: borderDefualt,
+            borderColor: gray700,
+            color: gray600,
+            "> svg": {
+              color: gray600,
+            },
+          },
+          hoverBg: primaryBg,
+          activeBg: "transparent",
+        }),
     "outline-gray": generateStyle({
       basic: {
         border: borderDefualt,
diff --git a/src/lib/styles/theme/components/tag.ts b/src/lib/styles/theme/components/tag.ts
index b376e313a..f85c810b4 100644
--- a/src/lib/styles/theme/components/tag.ts
+++ b/src/lib/styles/theme/components/tag.ts
@@ -43,6 +43,13 @@ export const Tag = defineMultiStyleConfig({
     },
   },
   sizes: {
+    xs: {
+      container: {
+        maxH: "18px",
+        height: "18px",
+        fontSize: "12px",
+      },
+    },
     sm: {
       container: {
         maxH: "20px",
diff --git a/src/lib/types/block.ts b/src/lib/types/block.ts
index 194d79a94..cf798e944 100644
--- a/src/lib/types/block.ts
+++ b/src/lib/types/block.ts
@@ -19,3 +19,8 @@ export interface LatestBlock {
   height: Option<number>;
   timestamp: Option<Date>;
 }
+
+export interface BlockTimeInfo {
+  hundred: Date;
+  latest: Date;
+}
diff --git a/src/pages/[network]/dev-home.tsx b/src/pages/[network]/dev-home.tsx
new file mode 100644
index 000000000..470983d5e
--- /dev/null
+++ b/src/pages/[network]/dev-home.tsx
@@ -0,0 +1,3 @@
+import DevHome from "lib/pages/dev-home";
+
+export default DevHome;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index b3fd3f8a9..9a6becab3 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -16,6 +16,7 @@ import {
   localosmosis,
   localosmosisAsset,
 } from "lib/chain-registry/localosmosis";
+import { sei, seiAssets } from "lib/chain-registry/sei";
 import { Chakra } from "lib/components/Chakra";
 import { MobileGuard } from "lib/components/MobileGuard";
 import { CelatoneSeo } from "lib/components/Seo";
@@ -76,8 +77,8 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
 
       <QueryClientProvider client={queryClient}>
         <ChainProvider
-          chains={[...chains, localosmosis]}
-          assetLists={[...assets, localosmosisAsset]}
+          chains={[...chains, localosmosis, sei]}
+          assetLists={[...assets, localosmosisAsset, seiAssets]}
           wallets={wallets}
           endpointOptions={{
             isLazy: true,
diff --git a/src/pages/dev-home.tsx b/src/pages/dev-home.tsx
new file mode 100644
index 000000000..470983d5e
--- /dev/null
+++ b/src/pages/dev-home.tsx
@@ -0,0 +1,3 @@
+import DevHome from "lib/pages/dev-home";
+
+export default DevHome;

From 3e11300c3965ac9972f134ff264c8984ce43eda5 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 10 Jul 2023 10:32:53 +0700
Subject: [PATCH 332/354] docs: edit changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6adbd11e2..ee6708eb6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -68,7 +68,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
-- [#417](https://github.com/alleslabs/celatone-frontend/pull/417) Config responsive design for tx detail and account detail page
+- [#417](https://github.com/alleslabs/celatone-frontend/pull/417) Support responsive and add new theme
 - [#283](https://github.com/alleslabs/celatone-frontend/pull/283) Change unsupported token icon render logic
 - [#420](https://github.com/alleslabs/celatone-frontend/pull/420) Unify create proposal page layout
 - [#416](https://github.com/alleslabs/celatone-frontend/pull/416) Remove the old redundant useSimulateFee hook

From 2dafcfc4056a0dd8e3f561616559c51daa2246e1 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 10 Jul 2023 13:37:14 +0700
Subject: [PATCH 333/354] fix: expand/collapse btn nav bar

---
 src/lib/layout/navbar/Collapse.tsx | 34 ++++++++++++++++--------------
 src/lib/layout/navbar/Expand.tsx   |  3 ++-
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/lib/layout/navbar/Collapse.tsx b/src/lib/layout/navbar/Collapse.tsx
index a10475df4..692d12e86 100644
--- a/src/lib/layout/navbar/Collapse.tsx
+++ b/src/lib/layout/navbar/Collapse.tsx
@@ -32,22 +32,24 @@ export const CollapseNavMenu = ({
           }}
         >
           <Flex justifyContent="space-between" alignItems="center">
-            {!isMobile && item.category === "Your Account" && (
-              <Tooltip label="Expand" placement="right">
-                <IconButton
-                  aria-label="overview"
-                  variant="ghost-accent"
-                  fontSize="24px"
-                  height="fit-content"
-                  minW="fit-content"
-                  p={1}
-                  mt={2}
-                  mx={2}
-                  icon={<CustomIcon name="double-chevron-right" />}
-                  onClick={() => setIsExpand(true)}
-                />
-              </Tooltip>
-            )}
+            {!isMobile &&
+              (item.category === "Your Account" ||
+                item.category === "Overview") && (
+                <Tooltip label="Expand" placement="right">
+                  <IconButton
+                    aria-label="overview"
+                    variant="ghost-accent"
+                    fontSize="24px"
+                    height="fit-content"
+                    minW="fit-content"
+                    p={1}
+                    mt={2}
+                    mx={2}
+                    icon={<CustomIcon name="double-chevron-right" />}
+                    onClick={() => setIsExpand(true)}
+                  />
+                </Tooltip>
+              )}
           </Flex>
           {item.submenu.map((submenu) => (
             <AppLink
diff --git a/src/lib/layout/navbar/Expand.tsx b/src/lib/layout/navbar/Expand.tsx
index 0e1267405..ea8bc2385 100644
--- a/src/lib/layout/navbar/Expand.tsx
+++ b/src/lib/layout/navbar/Expand.tsx
@@ -32,7 +32,8 @@ export const ExpandNavMenu = ({
           <Text py={2} variant="body3" fontWeight={700}>
             {item.category}
           </Text>
-          {item.category === "Your Account" && (
+          {(item.category === "Your Account" ||
+            item.category === "Overview") && (
             <Button
               variant="ghost-accent"
               size="xs"

From 466cbd6d8a0c23692da7ea6659949d4259a056a2 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Mon, 10 Jul 2023 17:47:07 +0700
Subject: [PATCH 334/354] fix: get gas from config instead of hardcode

---
 src/lib/components/modal/CodeSnippet.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/modal/CodeSnippet.tsx b/src/lib/components/modal/CodeSnippet.tsx
index a6dcdb50f..9617bf869 100644
--- a/src/lib/components/modal/CodeSnippet.tsx
+++ b/src/lib/components/modal/CodeSnippet.tsx
@@ -55,7 +55,13 @@ const CodeSnippet = ({
   const isDisabled = !contractAddress || !message.length;
   const lcdEndpoint = useLCDEndpoint();
   const rpcEndpoint = useRPCEndpoint();
-  const { currentChainId } = useCelatoneApp();
+  const {
+    currentChainId,
+    chainConfig: {
+      gas: { gasPrice },
+    },
+  } = useCelatoneApp();
+
   const codeSnippets: Record<
     string,
     { name: string; mode: string; snippet: string }[]
@@ -156,7 +162,7 @@ const execute = async () => {
     rpcEndpoint,
     signer,
     {
-      gasPrice: GasPrice.fromString("0.025uosmo"),
+      gasPrice: GasPrice.fromString("${gasPrice.tokenPerGas}${gasPrice.denom}"),
     }
   );
 

From ccc2d6bf5759b5d75709e42371f73ea329d482a6 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 10 Jul 2023 18:26:46 +0700
Subject: [PATCH 335/354] fix: reset past tx stage and wasm

---
 CHANGELOG.md                                  |  1 +
 src/lib/components/TxRelationSelection.tsx    | 50 ++++++++++++-------
 src/lib/components/modal/ActionModal.tsx      |  3 +-
 .../components/tables/txs/TxsTable.tsx        | 14 +++++-
 src/lib/pages/deploy/index.tsx                |  2 +-
 src/lib/pages/migrate/index.tsx               |  4 +-
 src/lib/pages/past-txs/index.tsx              | 24 ++++++++-
 7 files changed, 74 insertions(+), 24 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee6708eb6..881cc219c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -102,6 +102,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#424](https://github.com/alleslabs/celatone-frontend/pull/424) Fix reset past tx filter state and permission alert on migration page
 - [#365](https://github.com/alleslabs/celatone-frontend/pull/365) Fix pool page UI including helper text gap, icon alignment in pool asset table, empty state border, add message type, input selection icon, and accordion alignment
 - [#362](https://github.com/alleslabs/celatone-frontend/pull/362) Fix missed out hard-coded osmosis testnet 4 in code
 - [#361](https://github.com/alleslabs/celatone-frontend/pull/361) Fix incorrect assigned message index for each pool message in pool tx tables
diff --git a/src/lib/components/TxRelationSelection.tsx b/src/lib/components/TxRelationSelection.tsx
index c365ce7db..76dfd3dd6 100644
--- a/src/lib/components/TxRelationSelection.tsx
+++ b/src/lib/components/TxRelationSelection.tsx
@@ -30,28 +30,44 @@ const relationOptions = [
 ];
 
 interface TxRelationSelectionProps extends BoxProps {
+  value: Option<boolean>;
   setValue: (value: Option<boolean>) => void;
   size?: string | object;
 }
 
 export const TxRelationSelection = ({
+  value,
   setValue,
   size = "lg",
   ...props
-}: TxRelationSelectionProps) => (
-  <Box {...props}>
-    <SelectInput
-      formLabel="Filter by Relation"
-      size={size}
-      options={relationOptions}
-      onChange={(value: RelationType) =>
-        setValue(
-          value === RelationType.ALL
-            ? undefined
-            : value === RelationType.SIGNING
-        )
-      }
-      initialSelected={RelationType.ALL}
-    />
-  </Box>
-);
+}: TxRelationSelectionProps) => {
+  let initialValue;
+  switch (value) {
+    case undefined:
+      initialValue = RelationType.ALL;
+      break;
+    case false:
+      initialValue = RelationType.SIGNING;
+      break;
+    default:
+      initialValue = RelationType.RELATED;
+  }
+
+  return (
+    <Box {...props}>
+      <SelectInput
+        formLabel="Filter by Relation"
+        size={size}
+        options={relationOptions}
+        onChange={(newValue: RelationType) =>
+          setValue(
+            newValue === RelationType.ALL
+              ? undefined
+              : newValue === RelationType.SIGNING
+          )
+        }
+        initialSelected={initialValue}
+      />
+    </Box>
+  );
+};
diff --git a/src/lib/components/modal/ActionModal.tsx b/src/lib/components/modal/ActionModal.tsx
index 438f25073..d3143e70b 100644
--- a/src/lib/components/modal/ActionModal.tsx
+++ b/src/lib/components/modal/ActionModal.tsx
@@ -72,7 +72,8 @@ export function ActionModal({
   return (
     <>
       <Flex
-        onClick={() => {
+        onClick={(e) => {
+          e.stopPropagation();
           AmpTrackUseOtherModal(title);
           onOpen();
         }}
diff --git a/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx b/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx
index 40c9ef48c..3eb8bcb5a 100644
--- a/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 
 import { ErrorFetching } from "../../ErrorFetching";
 import { MobileTitle } from "../../mobile/MobileTitle";
-import { useMobile } from "lib/app-provider";
+import { useCurrentChain, useMobile } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import type { EmptyStateProps } from "lib/components/state";
@@ -80,8 +80,12 @@ export const TxsTable = ({
   scrollComponentId,
   onViewMore,
 }: TxsTableProps) => {
+  const {
+    chain: { chain_id: chainId },
+  } = useCurrentChain();
   const [isSigner, setIsSigner] = useState<Option<boolean>>();
   const [filters, setFilters] = useState<TxFilters>(DEFAULT_TX_FILTERS);
+  const isMobile = useMobile();
 
   const {
     data: txsCount,
@@ -145,7 +149,12 @@ export const TxsTable = ({
   useEffect(() => {
     if (failureReason) setPageSize(50);
   }, [failureReason, setPageSize]);
-  const isMobile = useMobile();
+
+  useEffect(() => {
+    setIsSigner(undefined);
+    setFilters(DEFAULT_TX_FILTERS);
+  }, [chainId]);
+
   return (
     <Box mt={{ base: 4, md: 8 }}>
       <TxsTop
@@ -159,6 +168,7 @@ export const TxsTable = ({
         onViewMore={onViewMore}
         relationSelection={
           <TxRelationSelection
+            value={isSigner}
             setValue={(value: Option<boolean>) => {
               resetPagination();
               setIsSigner(value);
diff --git a/src/lib/pages/deploy/index.tsx b/src/lib/pages/deploy/index.tsx
index 52eb8cd7c..da3e81dd3 100644
--- a/src/lib/pages/deploy/index.tsx
+++ b/src/lib/pages/deploy/index.tsx
@@ -77,7 +77,7 @@ const Deploy = () => {
     if (router.isReady) AmpTrack(AmpEvent.TO_DEPLOY);
   }, [router.isReady]);
 
-  if (isFetching) return <Loading />;
+  if (isFetching) return <Loading withBorder={false} />;
 
   const { variant, icon, description } = getAlertContent(
     enableUpload,
diff --git a/src/lib/pages/migrate/index.tsx b/src/lib/pages/migrate/index.tsx
index de52ca6b5..337cf43c9 100644
--- a/src/lib/pages/migrate/index.tsx
+++ b/src/lib/pages/migrate/index.tsx
@@ -13,6 +13,7 @@ import {
 } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
+import { Loading } from "lib/components/Loading";
 import { Stepper } from "lib/components/stepper";
 import WasmPageContainer from "lib/components/WasmPageContainer";
 import { AmpTrackToMigrate } from "lib/services/amplitude";
@@ -39,7 +40,7 @@ const Migrate = () => {
   const router = useRouter();
   const navigate = useInternalNavigate();
   const lcdEndpoint = useBaseApiRoute("rest");
-  const { data: uploadAccess } = useUploadAccessParams();
+  const { data: uploadAccess, isFetching } = useUploadAccessParams();
 
   const { address = "" } = useCurrentChain();
 
@@ -135,6 +136,7 @@ const Migrate = () => {
     }
   };
 
+  if (isFetching) return <Loading withBorder={false} />;
   return (
     <WasmPageContainer>
       {firstStep ? (
diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx
index 2b5746765..964f0dd92 100644
--- a/src/lib/pages/past-txs/index.tsx
+++ b/src/lib/pages/past-txs/index.tsx
@@ -36,7 +36,10 @@ interface PastTxsState {
 
 const PastTxs = () => {
   const router = useRouter();
-  const { address } = useCurrentChain();
+  const {
+    address,
+    chain: { chain_id: chainId },
+  } = useCurrentChain();
 
   const defaultValues: PastTxsState = {
     search: "",
@@ -44,7 +47,7 @@ const PastTxs = () => {
     isSigner: undefined,
   };
 
-  const { watch, setValue } = useForm({
+  const { watch, setValue, reset } = useForm({
     defaultValues,
     mode: "all",
   });
@@ -122,6 +125,22 @@ const PastTxs = () => {
     if (router.isReady) AmpTrack(AmpEvent.TO_PAST_TXS);
   }, [router.isReady]);
 
+  useEffect(() => {
+    setPageSize(10);
+    setCurrentPage(1);
+  }, [
+    chainId,
+    setCurrentPage,
+    setPageSize,
+    pastTxsState.search,
+    pastTxsState.isSigner,
+    pastTxsState.filters,
+  ]);
+
+  useEffect(() => {
+    reset();
+  }, [chainId, address, reset]);
+
   return (
     <PageContainer>
       <Heading
@@ -150,6 +169,7 @@ const PastTxs = () => {
         </InputGroup>
         <Flex gap={3}>
           <TxRelationSelection
+            value={pastTxsState.isSigner}
             setValue={(value) => {
               resetPagination();
               setValue("isSigner", value);

From d2a365bc46f9a17c579c78685af91ba4ddc5f340 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 10 Jul 2023 18:28:52 +0700
Subject: [PATCH 336/354] fix: changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 881cc219c..68f271827 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -102,7 +102,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
-- [#424](https://github.com/alleslabs/celatone-frontend/pull/424) Fix reset past tx filter state and permission alert on migration page
+- [#425](https://github.com/alleslabs/celatone-frontend/pull/425) Fix reset past tx filter state and permission alert on migration page
 - [#365](https://github.com/alleslabs/celatone-frontend/pull/365) Fix pool page UI including helper text gap, icon alignment in pool asset table, empty state border, add message type, input selection icon, and accordion alignment
 - [#362](https://github.com/alleslabs/celatone-frontend/pull/362) Fix missed out hard-coded osmosis testnet 4 in code
 - [#361](https://github.com/alleslabs/celatone-frontend/pull/361) Fix incorrect assigned message index for each pool message in pool tx tables

From 2442c504db8304afa49575b0cf9fe8bd82eb5e78 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 10 Jul 2023 18:22:09 +0700
Subject: [PATCH 337/354] fix(components): fix bugs from bug bash

---
 src/lib/components/ListSelection.tsx          |  2 +-
 src/lib/components/MobileGuard.tsx            |  3 +-
 src/lib/components/TokenCard.tsx              |  2 +-
 src/lib/components/copy/Copier.tsx            |  1 +
 .../components/forms/FilterByPermission.tsx   |  4 +-
 src/lib/components/json/JsonReadOnly.tsx      |  2 +
 src/lib/components/pagination/PageButton.tsx  |  4 +-
 src/lib/components/pagination/PageDetail.tsx  | 59 ++++++------
 src/lib/components/pagination/PageGoTo.tsx    |  2 +-
 src/lib/components/table/codes/CodesTable.tsx |  2 +-
 .../table/contracts/ContractsTable.tsx        |  2 +-
 src/lib/layout/Searchbar.tsx                  | 19 +++-
 src/lib/layout/mobile/NavDrawer.tsx           |  1 +
 .../components/asset/index.tsx                | 16 +++-
 .../delegations/DelegationsBody.tsx           |  7 +-
 .../components/delegations/DelegationsTab.tsx | 25 +++--
 .../components/delegations/UnbondingTab.tsx   | 93 +++++++++++++++++++
 .../components/mobile/MobileTitle.tsx         | 16 ++--
 .../tables/bonded/BondedTableRow.tsx          |  2 +-
 .../tables/bonded/DelegationsTable.tsx        | 17 +++-
 .../tables/bonded/UnbondingsTable.tsx         |  8 +-
 src/lib/pages/codes/index.tsx                 | 50 +++++-----
 .../components/InstantiateInfo.tsx            |  7 +-
 src/lib/pages/contract-details/index.tsx      |  6 +-
 src/lib/pages/contracts/index.tsx             | 52 +++++------
 .../pages/dev-home/components/QuickMenu.tsx   | 21 +++--
 .../dev-home/components/RecentActivities.tsx  | 35 +++----
 src/lib/pages/network-overview/index.tsx      |  6 +-
 src/lib/pages/query/components/QueryArea.tsx  |  7 +-
 src/lib/pages/txs/components/TxsTable.tsx     | 16 ++++
 30 files changed, 324 insertions(+), 163 deletions(-)
 create mode 100644 src/lib/pages/account-details/components/delegations/UnbondingTab.tsx

diff --git a/src/lib/components/ListSelection.tsx b/src/lib/components/ListSelection.tsx
index e46a92325..2edfae202 100644
--- a/src/lib/components/ListSelection.tsx
+++ b/src/lib/components/ListSelection.tsx
@@ -144,7 +144,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                     <Tag
                       cursor="pointer"
                       whiteSpace="nowrap"
-                      variant="primary-dark"
+                      variant="primary-light"
                       gap={1}
                       mr={1}
                     >
diff --git a/src/lib/components/MobileGuard.tsx b/src/lib/components/MobileGuard.tsx
index 464a03d88..602304486 100644
--- a/src/lib/components/MobileGuard.tsx
+++ b/src/lib/components/MobileGuard.tsx
@@ -17,12 +17,13 @@ export const MobileGuard = ({ children }: MobileGuardProps) => {
     pathName.includes(`account`) ||
     pathName.includes(`/txs`) ||
     pathName.includes(`/blocks`) ||
-    pathName.includes(`/contract`) ||
+    pathName.includes(`/contracts/`) ||
     pathName.includes(`/projects`) ||
     pathName.includes(`/code`) ||
     pathName.includes(`/query`) ||
     pathName.includes(`/network-overview`) ||
     pathName.includes(`/dev-home`) ||
+    pathName === `/${currentChainId}/contracts` ||
     pathName === `/${currentChainId}`;
 
   if (isResponsive && isMobile) return <>{children}</>;
diff --git a/src/lib/components/TokenCard.tsx b/src/lib/components/TokenCard.tsx
index 563bbb93b..d2af5f3ea 100644
--- a/src/lib/components/TokenCard.tsx
+++ b/src/lib/components/TokenCard.tsx
@@ -65,7 +65,7 @@ export const TokenCard = ({
             type={price ? "supported_asset" : "unsupported_asset"}
             value={id}
             copyLabel="Token ID Copied!"
-            display="none"
+            display={{ base: "flex", md: "none" }}
             ml={1}
             amptrackSection={amptrackSection}
           />
diff --git a/src/lib/components/copy/Copier.tsx b/src/lib/components/copy/Copier.tsx
index 875b018ee..74000ad8e 100644
--- a/src/lib/components/copy/Copier.tsx
+++ b/src/lib/components/copy/Copier.tsx
@@ -38,6 +38,7 @@ export const Copier = ({
         name="copy"
         boxSize={3}
         color="gray.600"
+        minH={{ base: 6, md: "auto" }}
       />
     }
   />
diff --git a/src/lib/components/forms/FilterByPermission.tsx b/src/lib/components/forms/FilterByPermission.tsx
index bd549f322..07ff00633 100644
--- a/src/lib/components/forms/FilterByPermission.tsx
+++ b/src/lib/components/forms/FilterByPermission.tsx
@@ -16,6 +16,7 @@ interface FilterByPermissionProps {
   setPermissionValue: (newVal: PermissionFilterValue) => void;
   initialSelected: string;
   labelBgColor?: string;
+  maxWidth?: string;
 }
 
 const options: PermissionOption[] = [
@@ -43,8 +44,9 @@ export const FilterByPermission = ({
   setPermissionValue,
   initialSelected,
   labelBgColor = "background.main",
+  maxWidth = "360px",
 }: FilterByPermissionProps) => (
-  <Grid columnGap={4} w="full" mb={4} maxW={{ md: "360px" }}>
+  <Grid columnGap={4} w="full" mb={4} maxW={{ md: maxWidth }}>
     <SelectInput<PermissionFilterValue>
       formLabel="Filter by Instantiate Permission"
       options={options}
diff --git a/src/lib/components/json/JsonReadOnly.tsx b/src/lib/components/json/JsonReadOnly.tsx
index 6435f7386..2a5a340ab 100644
--- a/src/lib/components/json/JsonReadOnly.tsx
+++ b/src/lib/components/json/JsonReadOnly.tsx
@@ -56,6 +56,7 @@ const JsonReadOnly = ({
   return (
     <Box
       minH={{ base: "360px", md: "auto" }}
+      p="16px 12px"
       position="relative"
       borderWidth="thin"
       borderColor={!isJsonValid ? "error.main" : "gray.700"}
@@ -78,6 +79,7 @@ const JsonReadOnly = ({
       {!!topic && (
         <Text
           top="-10px"
+          w="fit-content"
           background="background.main"
           color={!isJsonValid ? "error.main" : "text.dark"}
           fontSize="12px"
diff --git a/src/lib/components/pagination/PageButton.tsx b/src/lib/components/pagination/PageButton.tsx
index e1a59fbc1..27f740231 100644
--- a/src/lib/components/pagination/PageButton.tsx
+++ b/src/lib/components/pagination/PageButton.tsx
@@ -14,9 +14,7 @@ export const PageButton = ({
   const isCurrentPage = pageNumber === currentPage;
   return (
     <Button
-      bgColor={isCurrentPage ? "primary.dark" : "transparent"}
-      border={isCurrentPage ? "2px solid" : "1px solid"}
-      borderColor={isCurrentPage ? "primary.main" : "gray.700"}
+      variant={isCurrentPage ? "primary" : "outline-gray"}
       onClick={isCurrentPage ? undefined : () => onPageChange(pageNumber)}
       _hover={
         isCurrentPage ? { cursor: "default" } : { background: "gray.700" }
diff --git a/src/lib/components/pagination/PageDetail.tsx b/src/lib/components/pagination/PageDetail.tsx
index 5b7adfae0..a652679c8 100644
--- a/src/lib/components/pagination/PageDetail.tsx
+++ b/src/lib/components/pagination/PageDetail.tsx
@@ -19,32 +19,39 @@ export const PageDetail = ({
   totalData,
   onPageSizeChange,
 }: PageDetailProps) => (
-  <Flex align="center" justify="center">
-    <Text variant="body3" color="text.dark" minW="fit-content">
-      Items per page:
-    </Text>
-    <Select
-      border="none"
-      minW="70px"
-      w="fit-content"
-      h="fit-content"
-      fontSize="12px"
-      focusBorderColor="none"
-      cursor="pointer"
-      value={pageSize}
-      onChange={(e) => {
-        AmpTrack(AmpEvent.USE_PAGINATION_PAGE_SIZE, {
-          pageSize: e.target.value,
-        });
-        onPageSizeChange(e);
-      }}
-    >
-      <option value="10">10</option>
-      <option value="20">20</option>
-      <option value="50">50</option>
-      <option value="100">100</option>
-      <CustomIcon name="chevron-down" color="gray.600" />
-    </Select>
+  <Flex
+    align="center"
+    justify="center"
+    direction={{ base: "column", md: "row" }}
+    gap={2}
+  >
+    <Flex align="center" justify="center">
+      <Text variant="body3" color="text.dark" minW="fit-content">
+        Items per page:
+      </Text>
+      <Select
+        border="none"
+        minW="70px"
+        w="fit-content"
+        h="fit-content"
+        fontSize="12px"
+        focusBorderColor="none"
+        cursor="pointer"
+        value={pageSize}
+        onChange={(e) => {
+          AmpTrack(AmpEvent.USE_PAGINATION_PAGE_SIZE, {
+            pageSize: e.target.value,
+          });
+          onPageSizeChange(e);
+        }}
+      >
+        <option value="10">10</option>
+        <option value="20">20</option>
+        <option value="50">50</option>
+        <option value="100">100</option>
+        <CustomIcon name="chevron-down" color="gray.600" />
+      </Select>
+    </Flex>
     <Text variant="body3" minW="fit-content" ml={7}>
       {`${offsetData.toLocaleString()} - ${lastDataInPage.toLocaleString()} of ${totalData.toLocaleString()} items`}
     </Text>
diff --git a/src/lib/components/pagination/PageGoTo.tsx b/src/lib/components/pagination/PageGoTo.tsx
index 28db2d813..f623fa9e9 100644
--- a/src/lib/components/pagination/PageGoTo.tsx
+++ b/src/lib/components/pagination/PageGoTo.tsx
@@ -35,7 +35,7 @@ export const PageGoTo = ({ lastPage, onPageChange }: PageGoToProps) => {
       <Button
         variant="ghost-primary"
         margin={0}
-        paddingX={2}
+        px={2}
         onClick={handleGoTo}
         rightIcon={<CustomIcon name="chevron-right" />}
       >
diff --git a/src/lib/components/table/codes/CodesTable.tsx b/src/lib/components/table/codes/CodesTable.tsx
index fe8b0f622..c9af9b670 100644
--- a/src/lib/components/table/codes/CodesTable.tsx
+++ b/src/lib/components/table/codes/CodesTable.tsx
@@ -28,7 +28,7 @@ export const CodesTable = ({
     : "max(100px) minmax(250px, 1fr) minmax(200px, 1fr) max(100px) max(160px) 150px 180px";
 
   return (
-    <TableContainer>
+    <TableContainer pb={6}>
       <CodesTableHeader
         templateColumns={templateColumns}
         isReadOnly={isReadOnly}
diff --git a/src/lib/components/table/contracts/ContractsTable.tsx b/src/lib/components/table/contracts/ContractsTable.tsx
index ad967fb02..59b8b854d 100644
--- a/src/lib/components/table/contracts/ContractsTable.tsx
+++ b/src/lib/components/table/contracts/ContractsTable.tsx
@@ -39,7 +39,7 @@ export const ContractsTable = ({
       "160px minmax(300px, 3fr) minmax(200px, 2fr) 150px 260px 80px";
 
   return (
-    <TableContainer>
+    <TableContainer pb={6}>
       <ContractsTableHeader
         templateColumns={templateColumns}
         isReadOnly={isReadOnly}
diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx
index 97892f78b..154d4cc5c 100644
--- a/src/lib/layout/Searchbar.tsx
+++ b/src/lib/layout/Searchbar.tsx
@@ -50,6 +50,7 @@ interface ResultItemProps {
   cursor: Option<number>;
   setCursor: (index: Option<number>) => void;
   handleSelectResult: (type?: SearchResultType, isClick?: boolean) => void;
+  onClose?: () => void;
 }
 
 const getRouteOptions = (
@@ -84,6 +85,7 @@ const ResultItem = ({
   cursor,
   setCursor,
   handleSelectResult,
+  onClose,
 }: ResultItemProps) => {
   const route = getRouteOptions(type)?.pathname;
 
@@ -102,7 +104,10 @@ const ResultItem = ({
           transition="all 0.25s ease-in-out"
           bg={index === cursor ? "gray.800" : undefined}
           onMouseMove={() => index !== cursor && setCursor(index)}
-          onClick={() => handleSelectResult(type, true)}
+          onClick={() => {
+            handleSelectResult(type, true);
+            onClose?.();
+          }}
         >
           {value}
         </Text>
@@ -117,12 +122,14 @@ const ResultRender = ({
   cursor,
   setCursor,
   handleSelectResult,
+  onClose,
 }: {
   results: SearchResultType[];
   keyword: string;
   cursor: Option<number>;
   setCursor: (index: Option<number>) => void;
   handleSelectResult: (type?: SearchResultType, isClick?: boolean) => void;
+  onClose?: () => void;
 }) => (
   <>
     {!results.length ? (
@@ -141,6 +148,7 @@ const ResultRender = ({
           cursor={cursor}
           setCursor={setCursor}
           handleSelectResult={handleSelectResult}
+          onClose={onClose}
         />
       ))
     )}
@@ -215,7 +223,7 @@ const Searchbar = () => {
   );
 
   const handleOnKeyEnter = useCallback(
-    (e: KeyboardEvent<HTMLInputElement>) => {
+    (e: KeyboardEvent<HTMLInputElement>, onClose?: () => void) => {
       if (!results.length) return;
       switch (e.key) {
         case "ArrowUp":
@@ -230,6 +238,7 @@ const Searchbar = () => {
         }
         case "Enter":
           handleSelectResult(results.at(cursor ?? 0));
+          onClose?.();
           break;
         default:
           break;
@@ -246,7 +255,7 @@ const Searchbar = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   return isMobile ? (
     <>
-      <Button variant="outline-gray" size="sm" onClick={() => onOpen()}>
+      <Button variant="outline-gray" size="sm" onClick={onOpen}>
         <CustomIcon name="search" boxSize={3} />
       </Button>
       <Drawer isOpen={isOpen} onClose={onClose} placement="top">
@@ -269,8 +278,9 @@ const Searchbar = () => {
                   onChange={handleSearchChange}
                   placeholder="Type your keyword ..."
                   focusBorderColor="secondary.main"
+                  autoFocus
                   onFocus={() => setDisplayResults(keyword.length > 0)}
-                  onKeyDown={handleOnKeyEnter}
+                  onKeyDown={(e) => handleOnKeyEnter(e, onClose)}
                   autoComplete="off"
                 />
                 <InputRightElement pointerEvents="none" h="full">
@@ -302,6 +312,7 @@ const Searchbar = () => {
                       results={results}
                       keyword={keyword}
                       handleSelectResult={handleSelectResult}
+                      onClose={onClose}
                     />
                   )}
                 </List>
diff --git a/src/lib/layout/mobile/NavDrawer.tsx b/src/lib/layout/mobile/NavDrawer.tsx
index 361a45d89..e7af39dca 100644
--- a/src/lib/layout/mobile/NavDrawer.tsx
+++ b/src/lib/layout/mobile/NavDrawer.tsx
@@ -137,6 +137,7 @@ export const NavDrawer = () => {
                         key={chainId}
                         onClick={() => {
                           selectChain(chainId);
+                          onClose();
                         }}
                         flexDirection="column"
                         alignItems="flex-start"
diff --git a/src/lib/pages/account-details/components/asset/index.tsx b/src/lib/pages/account-details/components/asset/index.tsx
index 1d25b2a2f..4471212f1 100644
--- a/src/lib/pages/account-details/components/asset/index.tsx
+++ b/src/lib/pages/account-details/components/asset/index.tsx
@@ -73,7 +73,11 @@ const AssetCta = ({ walletAddress }: AssetCtaProps) => {
   const totalAsset =
     (supportedAssets?.length ?? 0) + (unsupportedAssets?.length ?? 0);
   return (
-    <Flex>
+    <Flex
+      w={{ base: "full", md: "auto" }}
+      justify="center"
+      mb={{ base: 4, md: 0 }}
+    >
       {totalAsset > 0 && (
         <Button
           variant="ghost-gray"
@@ -169,15 +173,21 @@ export const AssetsSection = ({
       </AssetTitle>
       {isMobileDetail && (
         <>
-          <Flex justify="space-between" width="full" align="center">
+          <Flex
+            justify={{ base: "flex-start", md: "space-between" }}
+            width="full"
+            align={{ base: "start", md: "center" }}
+            direction={{ base: "column", md: "row" }}
+          >
             <Flex gap="50px">{TotalAssetValueInfo}</Flex>
-            <AssetCta walletAddress={walletAddress} />
+            {!isMobile && <AssetCta walletAddress={walletAddress} />}
           </Flex>
           <AssetSectionContent
             supportedAssets={supportedAssets}
             onViewMore={onViewMore}
             error={error}
           />
+          {isMobile && <AssetCta walletAddress={walletAddress} />}
         </>
       )}
       {!isMobile ||
diff --git a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
index 044c0a27d..2398d6752 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationsBody.tsx
@@ -1,13 +1,13 @@
 import { Flex, RadioGroup, Stack } from "@chakra-ui/react";
 import { useState } from "react";
 
-import { UnbondingsTable } from "../tables";
 import type { Delegation, Unbonding } from "lib/pages/account-details/data";
 import { AmpTrackUseRadio } from "lib/services/amplitude";
 import type { Option, TokenWithValue } from "lib/types";
 
 import { DelegationsTab } from "./DelegationsTab";
 import { RadioCard } from "./RadioCard";
+import { UnbondingTab } from "./UnbondingTab";
 
 interface DelegationsBodyProps {
   totalDelegations: Option<Record<string, TokenWithValue>>;
@@ -65,10 +65,7 @@ export const DelegationsBody = ({
           isLoading={isLoadingDelegations}
         />
       ) : (
-        <UnbondingsTable
-          unbondings={unbondings}
-          isLoading={isLoadingUnbondings}
-        />
+        <UnbondingTab unbondings={unbondings} isLoading={isLoadingUnbondings} />
       )}
     </Flex>
   );
diff --git a/src/lib/pages/account-details/components/delegations/DelegationsTab.tsx b/src/lib/pages/account-details/components/delegations/DelegationsTab.tsx
index de2ff8446..db9d1a8c1 100644
--- a/src/lib/pages/account-details/components/delegations/DelegationsTab.tsx
+++ b/src/lib/pages/account-details/components/delegations/DelegationsTab.tsx
@@ -1,4 +1,4 @@
-import { Flex } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 
 import type { Delegation } from "../../data";
 import { MobileLabel } from "../mobile/MobileLabel";
@@ -7,6 +7,7 @@ import { TokenCell } from "../tables/TokenCell";
 import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
+import { TableTitle } from "lib/components/table";
 import { ValidatorBadge } from "lib/components/ValidatorBadge";
 import type { Option, TokenWithValue } from "lib/types";
 
@@ -26,16 +27,25 @@ export const DelegationsTab = ({
   if (isLoading) return <Loading />;
   if (!delegations?.length)
     return (
-      <EmptyState
-        message="This account did not delegate their assets to any validators."
-        withBorder
-      />
+      <Box>
+        <TableTitle title="Delegated to" count={delegations?.length ?? 0} />
+        <EmptyState
+          my={0}
+          message="This account did not delegate their assets to any validators."
+          withBorder
+        />
+      </Box>
     );
 
   return (
     <Flex w="full">
       {isMobile ? (
         <Flex direction="column" gap={4} w="full">
+          <TableTitle
+            title="Delegated to"
+            count={delegations?.length ?? 0}
+            mb={2}
+          />
           {delegations.map((delegation) => (
             <Flex
               key={
@@ -50,10 +60,7 @@ export const DelegationsTab = ({
               gap={3}
               w="full"
             >
-              <ValidatorBadge
-                validator={delegation.validator}
-                badgeSize={{ sm: 8, md: 6 }}
-              />
+              <ValidatorBadge validator={delegation.validator} />
               <Flex
                 direction="column"
                 gap={3}
diff --git a/src/lib/pages/account-details/components/delegations/UnbondingTab.tsx b/src/lib/pages/account-details/components/delegations/UnbondingTab.tsx
new file mode 100644
index 000000000..fa55daba9
--- /dev/null
+++ b/src/lib/pages/account-details/components/delegations/UnbondingTab.tsx
@@ -0,0 +1,93 @@
+import { Box, Flex, Text } from "@chakra-ui/react";
+
+import type { Unbonding } from "../../data";
+import { MobileLabel } from "../mobile/MobileLabel";
+import { UnbondingsTable } from "../tables";
+import { TokenCell } from "../tables/TokenCell";
+import { useMobile } from "lib/app-provider";
+import { Loading } from "lib/components/Loading";
+import { EmptyState } from "lib/components/state";
+import { TableTitle } from "lib/components/table";
+import { ValidatorBadge } from "lib/components/ValidatorBadge";
+import type { Option } from "lib/types";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+interface UnbondingTabProps {
+  unbondings: Option<Unbonding[]>;
+  isLoading: boolean;
+}
+export const UnbondingTab = ({
+  unbondings,
+
+  isLoading,
+}: UnbondingTabProps) => {
+  const isMobile = useMobile();
+  if (isLoading) return <Loading />;
+  if (!unbondings?.length)
+    return (
+      <Box>
+        <TableTitle title="Unbonding" count={unbondings?.length ?? 0} />
+        <EmptyState
+          my={0}
+          message="This account does not have any assets that is currently unbonding."
+          withBorder
+        />
+      </Box>
+    );
+
+  return (
+    <Flex w="full">
+      {isMobile ? (
+        <Flex direction="column" gap={4} w="full">
+          <TableTitle
+            title="Unbonding"
+            count={unbondings?.length ?? 0}
+            mb={2}
+          />
+          {unbondings.map((item) => (
+            <Flex
+              key={
+                item.validator.validatorAddress +
+                item.token.amount +
+                item.token.denom
+              }
+              borderRadius="8px"
+              background="gray.900"
+              p={3}
+              direction="column"
+              gap={3}
+              w="full"
+            >
+              <ValidatorBadge validator={item.validator} />
+              <Flex
+                direction="column"
+                gap={3}
+                borderTop="1px solid"
+                borderTopColor="gray.700"
+                pt={3}
+              >
+                <Flex direction="column" gap={1}>
+                  <MobileLabel label="Amount" />
+                  <TokenCell token={item.token} />
+                </Flex>
+                {item.completionTime && (
+                  <Flex direction="column">
+                    <MobileLabel label="Unbond Completed By" />
+                    <Text variant="body2" color="text.dark" mt={1}>
+                      {formatUTC(item.completionTime)}
+                    </Text>
+                    <Text variant="body3" color="text.disabled">
+                      {`(${dateFromNow(item.completionTime)})`}
+                    </Text>
+                  </Flex>
+                )}
+              </Flex>
+            </Flex>
+          ))}
+        </Flex>
+      ) : (
+        <UnbondingsTable unbondings={unbondings} isLoading={isLoading} />
+      )}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/components/mobile/MobileTitle.tsx b/src/lib/pages/account-details/components/mobile/MobileTitle.tsx
index 23dda8dfe..4c8261512 100644
--- a/src/lib/pages/account-details/components/mobile/MobileTitle.tsx
+++ b/src/lib/pages/account-details/components/mobile/MobileTitle.tsx
@@ -8,16 +8,20 @@ interface MobileTitleProps {
   count: string | number;
   onViewMore?: () => void;
 }
-
+const cardProps = {
+  width: "100%",
+  justifyContent: "space-between",
+  background: "gray.900",
+  padding: "16px",
+  borderRadius: "8px",
+};
 export const MobileTitle = ({ onViewMore, title, count }: MobileTitleProps) => {
   return (
     <Flex
-      justify="space-between"
-      w="full"
+      style={cardProps}
+      onClick={count === 0 ? undefined : onViewMore}
       bg="gray.900"
-      borderRadius="8px"
-      p={4}
-      onClick={onViewMore}
+      opacity={count === 0 ? 0.5 : 1}
     >
       <TableTitle title={title} count={count} mb={0} />
       <CustomIcon name="chevron-right" color="gray.600" />
diff --git a/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx b/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
index 1960f8460..e033ebb65 100644
--- a/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx
@@ -6,7 +6,7 @@ import { ValidatorBadge } from "lib/components/ValidatorBadge";
 import type { TokenWithValue, ValidatorInfo } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
-interface BondedInfo {
+export interface BondedInfo {
   validator: ValidatorInfo;
   amount: TokenWithValue;
   reward?: TokenWithValue;
diff --git a/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx b/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
index aaa5dbd90..4501eb24d 100644
--- a/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx
@@ -1,4 +1,4 @@
-import { Box, TableContainer } from "@chakra-ui/react";
+import { Box, Flex, TableContainer } from "@chakra-ui/react";
 
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
@@ -26,10 +26,17 @@ const DelegationsTableBody = ({
   if (isLoading) return <Loading />;
   if (!delegations?.length)
     return (
-      <EmptyState
-        message="This account did not delegate their assets to any validators."
-        withBorder
-      />
+      <Flex>
+        <TableTitle
+          title="Delegated to"
+          count={delegations?.length ?? 0}
+          mb={2}
+        />
+        <EmptyState
+          message="This account did not delegate their assets to any validators."
+          withBorder
+        />
+      </Flex>
     );
 
   return (
diff --git a/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx b/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx
index a6297e4be..a1f3d254a 100644
--- a/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx
@@ -1,4 +1,4 @@
-import { TableContainer } from "@chakra-ui/react";
+import { Box, TableContainer } from "@chakra-ui/react";
 
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
@@ -29,7 +29,7 @@ const UnbondingsTableBody = ({
     );
 
   return (
-    <TableContainer>
+    <TableContainer width="100%">
       <BondedTableHeader
         templateColumns={TEMPLATE_COLUMNS}
         isDelegation={false}
@@ -58,8 +58,8 @@ export const UnbondingsTable = ({
   unbondings,
   isLoading,
 }: UnbondingsTableProps) => (
-  <div>
+  <Box width="100%">
     <TableTitle title="Unbonding" count={unbondings?.length ?? 0} mb={2} />
     <UnbondingsTableBody unbondings={unbondings} isLoading={isLoading} />
-  </div>
+  </Box>
 );
diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx
index 34c798ffc..3aefd0d0a 100644
--- a/src/lib/pages/codes/index.tsx
+++ b/src/lib/pages/codes/index.tsx
@@ -1,7 +1,6 @@
 import { Heading, Box, Flex, Text } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
-import type { ChangeEvent } from "react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 
@@ -12,7 +11,7 @@ import {
 } from "lib/app-provider";
 import { StoredCodeCard } from "lib/components/card/StoredCodeCard";
 import { FilterByPermission } from "lib/components/forms";
-import InputWithIcon from "lib/components/InputWithIcon";
+import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
 import { CodesTable } from "lib/components/table";
@@ -52,8 +51,26 @@ const RecentCodes = observer(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_RECENT_CODES);
   }, [router.isReady]);
 
-  const isSearching = Boolean(keyword) || permissionValue !== "all";
+  const emptyState = (
+    <EmptyState
+      imageVariant="empty"
+      message="Most recent 100 code IDs will display here."
+      withBorder
+    />
+  );
   const isMobile = useMobile();
+  const MobileSection = () => {
+    if (isLoading) return <Loading />;
+    if (!recentCodes?.length) return emptyState;
+    return (
+      <Flex direction="column" gap={4} w="full" mt={4}>
+        {recentCodes.map((code) => (
+          <StoredCodeCard codeInfo={code} />
+        ))}
+      </Flex>
+    );
+  };
+
   return (
     <PageContainer>
       <Box pb={{ base: 0, md: 12 }}>
@@ -68,15 +85,8 @@ const RecentCodes = observer(() => {
           mt={8}
           direction={{ base: "column", md: "row" }}
         >
-          <InputWithIcon
-            placeholder="Search with Code ID or Code Name"
-            value={keyword}
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-              setValue("keyword", e.target.value)
-            }
-            size="lg"
-          />
           <FilterByPermission
+            maxWidth="full"
             initialSelected="all"
             setPermissionValue={(newVal: PermissionFilterValue) => {
               if (newVal === permissionValue) return;
@@ -86,26 +96,12 @@ const RecentCodes = observer(() => {
         </Flex>
       </Box>
       {isMobile ? (
-        <Flex direction="column" gap={4} w="full" mt={4}>
-          {recentCodes.map((code) => (
-            <StoredCodeCard codeInfo={code} />
-          ))}
-        </Flex>
+        <MobileSection />
       ) : (
         <CodesTable
           codes={recentCodes}
           isLoading={isLoading}
-          emptyState={
-            <EmptyState
-              imageVariant={isSearching ? "not-found" : "empty"}
-              message={
-                isSearching
-                  ? "No matched codes found"
-                  : "Most recent 100 code IDs will display here."
-              }
-              withBorder
-            />
-          }
+          emptyState={emptyState}
           onRowSelect={onRowSelect}
         />
       )}
diff --git a/src/lib/pages/contract-details/components/InstantiateInfo.tsx b/src/lib/pages/contract-details/components/InstantiateInfo.tsx
index 5e2a17119..a0d50e679 100644
--- a/src/lib/pages/contract-details/components/InstantiateInfo.tsx
+++ b/src/lib/pages/contract-details/components/InstantiateInfo.tsx
@@ -124,7 +124,7 @@ export const InstantiateInfo = ({
 
   return (
     <Container w={{ base: "full", md: "auto" }}>
-      <Flex direction={{ base: "row", md: "column" }} gap={{ base: 1, md: 6 }}>
+      <Flex direction={{ base: "row", md: "column" }} gap={{ base: 4, md: 6 }}>
         <LabelText flex="1" label="Network">
           {chainId}
         </LabelText>
@@ -137,10 +137,10 @@ export const InstantiateInfo = ({
           />
         </LabelText>
       </Flex>
-      <Flex direction={{ base: "row", md: "column" }} gap={{ base: 1, md: 6 }}>
+      <Flex direction={{ base: "row", md: "column" }} gap={{ base: 4, md: 6 }}>
         <LabelText flex="1" label="CW2 Info">
           {contractCw2Info ? (
-            <Text variant="body2">
+            <Text variant="body2" wordBreak="break-all">
               {contractCw2Info.contract} ({contractCw2Info.version})
             </Text>
           ) : (
@@ -173,6 +173,7 @@ export const InstantiateInfo = ({
       <Divider border="1px solid" borderColor="gray.700" />
       {createdHeight ? (
         <LabelText
+          flex="1"
           label="Instantiated Block Height"
           helperText1={createdTime ? formatUTC(createdTime) : undefined}
           helperText2={createdTime ? dateFromNow(createdTime) : undefined}
diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index 8dd83913e..44a337d08 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -104,13 +104,15 @@ const ContractDetailsBody = observer(
             borderBottom="1px solid"
             borderColor="gray.700"
             overflowX={{ base: "scroll", md: "auto" }}
-            w={{ base: "max-content", md: "auto" }}
           >
             <CustomTab count={tableCounts.transactionsCount}>
               Transactions
             </CustomTab>
             <CustomTab count={tableCounts.migrationCount}>Migrations</CustomTab>
-            <CustomTab count={tableCounts.relatedProposalsCount}>
+            <CustomTab
+              count={tableCounts.relatedProposalsCount}
+              whiteSpace="nowrap"
+            >
               Related Proposals
             </CustomTab>
           </TabList>
diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contracts/index.tsx
index d3d2807e4..3165c8498 100644
--- a/src/lib/pages/contracts/index.tsx
+++ b/src/lib/pages/contracts/index.tsx
@@ -1,6 +1,5 @@
 import { Heading, Box, Flex, Text } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
-import { useState } from "react";
 
 import {
   useInternalNavigate,
@@ -8,7 +7,7 @@ import {
   useMobile,
 } from "lib/app-provider";
 import { InstantiatedContractCard } from "lib/components/card/ContractCard";
-import { TextInput } from "lib/components/forms";
+import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
 import { ContractsTable } from "lib/components/table";
@@ -24,12 +23,28 @@ const RecentContracts = observer(() => {
       pathname: "/contracts/[contract]",
       query: { contract },
     });
-  const [searchKeyword, setSearchKeyword] = useState("");
 
-  const { recentContracts, isLoading } = useRecentContractsData(searchKeyword);
+  const { recentContracts, isLoading } = useRecentContractsData("");
 
-  const isSearching = Boolean(searchKeyword);
+  const emptyState = (
+    <EmptyState
+      imageVariant="empty"
+      message="Most recent 100 contracts will display here."
+      withBorder
+    />
+  );
   const isMobile = useMobile();
+  const MobileSection = () => {
+    if (isLoading) return <Loading />;
+    if (!recentContracts?.length) return emptyState;
+    return (
+      <Flex direction="column" gap={4} w="full" mt={4}>
+        {recentContracts.map((contract) => (
+          <InstantiatedContractCard contractInfo={contract} />
+        ))}
+      </Flex>
+    );
+  };
   return (
     <PageContainer>
       <Box pb={{ base: 0, md: 12 }}>
@@ -39,37 +54,14 @@ const RecentContracts = observer(() => {
         <Text variant="body2" color="text.dark" fontWeight={500} mb={8}>
           These contracts are the most recently instantiated on this network
         </Text>
-        <Flex>
-          <TextInput
-            variant="floating"
-            value={searchKeyword}
-            setInputState={setSearchKeyword}
-            placeholder="Search with Contract Address, Name, or Label"
-            size="lg"
-          />
-        </Flex>
       </Box>
       {isMobile ? (
-        <Flex direction="column" gap={4} w="full" mt={4}>
-          {recentContracts.map((contract) => (
-            <InstantiatedContractCard contractInfo={contract} />
-          ))}
-        </Flex>
+        <MobileSection />
       ) : (
         <ContractsTable
           contracts={recentContracts}
           isLoading={isLoading}
-          emptyState={
-            <EmptyState
-              imageVariant={isSearching ? "not-found" : "empty"}
-              message={
-                isSearching
-                  ? "No matched contracts found"
-                  : "Most recent 100 contracts will display here."
-              }
-              withBorder
-            />
-          }
+          emptyState={emptyState}
           onRowSelect={onRowSelect}
           withoutTag
         />
diff --git a/src/lib/pages/dev-home/components/QuickMenu.tsx b/src/lib/pages/dev-home/components/QuickMenu.tsx
index 6b5597747..fa946b0be 100644
--- a/src/lib/pages/dev-home/components/QuickMenu.tsx
+++ b/src/lib/pages/dev-home/components/QuickMenu.tsx
@@ -52,7 +52,7 @@ const secondaryMenu: SecondaryMenuType[] = [
 export const QuickMenu = () => {
   const isMobile = useMobile();
   return (
-    <Flex direction="column" gap={4} bg="gray.900" p={{ sm: 8, md: 12 }}>
+    <Flex direction="column" gap={4} bg="gray.900" p={{ base: 6, md: 12 }}>
       <Heading as="h5" variant="h5">
         Start using {CURR_THEME.branding.seo.appName}
       </Heading>
@@ -85,7 +85,7 @@ export const QuickMenu = () => {
                 <CustomIcon
                   name="chevron-right"
                   color="text.main"
-                  boxSize="24px"
+                  boxSize={{ base: 5, md: 6 }}
                 />
               </Flex>
             </AppLink>
@@ -106,7 +106,7 @@ export const QuickMenu = () => {
                     <Flex alignItems="center" gap={3}>
                       <CustomIcon
                         name={item.icon}
-                        boxSize="24px"
+                        boxSize={{ base: 5, md: 6 }}
                         color="gray.600"
                       />
                       <Box>
@@ -124,7 +124,7 @@ export const QuickMenu = () => {
                     </Flex>
                     <CustomIcon
                       name="chevron-right"
-                      boxSize="24px"
+                      boxSize={{ base: 5, md: 6 }}
                       color="gray.600"
                     />
                   </Flex>
@@ -133,15 +133,13 @@ export const QuickMenu = () => {
                 <Flex
                   opacity={0.5}
                   style={cardProps}
-                  _hover={{ bg: "gray.700" }}
-                  transition="all .25s ease-in-out"
                   bg="gray.800"
                   alignItems="center"
                 >
                   <Flex alignItems="center" gap={3}>
                     <CustomIcon
                       name={item.icon}
-                      boxSize="24px"
+                      boxSize={{ base: 5, md: 6 }}
                       color="gray.600"
                     />
                     <Box>
@@ -157,15 +155,20 @@ export const QuickMenu = () => {
                       </Text>
                     </Box>
                   </Flex>
-                  <Text variant="body2" color="text.primary">
+                  {/* <Text variant="body2" color="text.primary">
                     On Mobile Soon
-                  </Text>
+                  </Text> */}
                 </Flex>
               )}
             </>
           ))}
         </SimpleGrid>
       </Flex>
+      {isMobile && (
+        <Text variant="body3" color="text.primary" textAlign="center">
+          Some features will available on mobile soon
+        </Text>
+      )}
     </Flex>
   );
 };
diff --git a/src/lib/pages/dev-home/components/RecentActivities.tsx b/src/lib/pages/dev-home/components/RecentActivities.tsx
index 2daaaa89c..bc30d0c87 100644
--- a/src/lib/pages/dev-home/components/RecentActivities.tsx
+++ b/src/lib/pages/dev-home/components/RecentActivities.tsx
@@ -20,28 +20,23 @@ export const RecentActivities = observer(() => {
   }, [getRecentActivities, userKey, isHydrated]);
 
   return (
-    <Box py={8}>
-      <Heading
-        px={{ sm: 8, md: 12 }}
-        as="h5"
-        variant={{ sm: "h6", md: "h5" }}
-        mb={4}
-      >
+    <Box py={8} px={{ base: 6, md: 0 }}>
+      <Heading as="h5" variant="h5" mb={4} px={{ md: 12 }}>
         Recent Queries and Executes on this device
       </Heading>
       {activities.length ? (
         <Flex
-          px={{ sm: 8, md: 12 }}
+          px={{ md: 12 }}
           gap={4}
           overflowX={{ md: "scroll" }}
           w="100%"
-          direction={{ sm: "column", md: "row" }}
+          direction={{ base: "column", md: "row" }}
         >
           {activities.map((item) => (
             <Flex
               direction="column"
               gap={3}
-              minW="360px"
+              minW={{ md: "360px" }}
               cursor="pointer"
               p={6}
               bg="gray.900"
@@ -65,7 +60,11 @@ export const RecentActivities = observer(() => {
                   {item.type === "query" ? "Query" : "Execute"}
                 </Text>
               </Flex>
-              <Flex alignItems="center" gap={1}>
+              <Flex
+                alignItems={{ base: "start", md: "center" }}
+                gap={1}
+                direction={{ base: "column", md: "row" }}
+              >
                 <Text
                   variant="body3"
                   padding="4px 8px"
@@ -74,12 +73,14 @@ export const RecentActivities = observer(() => {
                 >
                   {item.action}
                 </Text>
-                <Text variant="body3">on</Text>
-                <ExplorerLink
-                  value={item.contractAddress}
-                  type="contract_address"
-                  showCopyOnHover
-                />
+                <Flex alignItems="center" gap={1}>
+                  <Text variant="body3">on</Text>
+                  <ExplorerLink
+                    value={item.contractAddress}
+                    type="contract_address"
+                    showCopyOnHover
+                  />
+                </Flex>
               </Flex>
               <Flex gap={1}>
                 <Text variant="body2">{dateFromNow(item.timestamp)}</Text>
diff --git a/src/lib/pages/network-overview/index.tsx b/src/lib/pages/network-overview/index.tsx
index cdc352098..7da8671fe 100644
--- a/src/lib/pages/network-overview/index.tsx
+++ b/src/lib/pages/network-overview/index.tsx
@@ -147,7 +147,11 @@ const NetworkOverview = () => {
         mb={5}
         direction={{ base: "column", md: "row" }}
       >
-        <Heading as="h4" variant="h4" mb={{ base: 4, md: 0 }}>
+        <Heading
+          as="h4"
+          variant={{ base: "h5", md: "h4" }}
+          mb={{ base: 4, md: 0 }}
+        >
           Network Overview
         </Heading>
         {isLoadingLatestBlockInfo ? (
diff --git a/src/lib/pages/query/components/QueryArea.tsx b/src/lib/pages/query/components/QueryArea.tsx
index 3c942331e..79b7655ec 100644
--- a/src/lib/pages/query/components/QueryArea.tsx
+++ b/src/lib/pages/query/components/QueryArea.tsx
@@ -163,7 +163,12 @@ export const QueryArea = ({
             </Button>
           </Flex>
         </Box>
-        <Spacer />
+        <Spacer
+          border={{ base: "1px solid", md: "0px" }}
+          borderColor="gray.700"
+          my={4}
+        />
+
         <Box w="full">
           <JsonReadOnly
             topic="Return Output"
diff --git a/src/lib/pages/txs/components/TxsTable.tsx b/src/lib/pages/txs/components/TxsTable.tsx
index 217231b62..bdeb8bcea 100644
--- a/src/lib/pages/txs/components/TxsTable.tsx
+++ b/src/lib/pages/txs/components/TxsTable.tsx
@@ -4,6 +4,7 @@ import { useEffect } from "react";
 
 import { useCelatoneApp, useMobile } from "lib/app-provider";
 import { TransactionCard } from "lib/components/card/TransactionCard";
+import { Loading } from "lib/components/Loading";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
@@ -59,6 +60,21 @@ export const TxsTable = ({ isViewMore }: TxsTableProps) => {
         message="There is an error during fetching transactions."
       />
     );
+  if (isMobile && isLoading)
+    return (
+      <>
+        <Loading />
+        <Pagination
+          currentPage={currentPage}
+          pagesQuantity={pagesQuantity}
+          offset={offset}
+          totalData={countTxs}
+          pageSize={pageSize}
+          onPageChange={onPageChange}
+          onPageSizeChange={onPageSizeChange}
+        />
+      </>
+    );
   if (isMobile)
     return (
       <>

From 07902b7884b8407622a2d05ee20998ad03b3bed0 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Mon, 10 Jul 2023 23:02:01 +0700
Subject: [PATCH 338/354] fix: validator link, json editor

---
 src/config/index.ts                    | 4 ++--
 src/lib/components/json/JsonEditor.tsx | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/config/index.ts b/src/config/index.ts
index b9e493db4..5743858d5 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -180,8 +180,8 @@ export const CHAIN_CONFIGS: ChainConfigs = {
         "seivaloper1hh0g5xf23e5zekg45cmerc97hs4n2004dy2t26" as ValidatorAddr,
     },
     explorerLink: {
-      validator: "https://mintscan.io/sei/validators",
-      proposal: "https://mintscan.io/sei/proposals",
+      validator: "",
+      proposal: "",
     },
     hasSubHeader: true,
   },
diff --git a/src/lib/components/json/JsonEditor.tsx b/src/lib/components/json/JsonEditor.tsx
index cb3c3786d..dffce5ef3 100644
--- a/src/lib/components/json/JsonEditor.tsx
+++ b/src/lib/components/json/JsonEditor.tsx
@@ -35,7 +35,6 @@ const JsonEditor = ({
       readOnly={readOnly}
       style={{
         width: "100%",
-        height: "100%",
         background: "transparent",
         color: readOnly && !isValid ? "error.light" : "text.main",
         offset: 0,

From 1bd594f7329381d17efa35650581d4c8e71b805a Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 11 Jul 2023 10:43:33 +0700
Subject: [PATCH 339/354] fix: fix upload access endpoint, Public project
 searchbar bug, account tx bug

---
 CHANGELOG.md                                  |  1 +
 src/lib/app-provider/hooks/useBaseApiRoute.ts |  3 +
 src/lib/components/table/TableTitle.tsx       | 12 ++-
 src/lib/model/account.ts                      |  2 +-
 .../components/mobile/MobileTitle.tsx         |  3 +-
 .../components/tables/txs/TxsTable.tsx        | 34 +++-----
 src/lib/pages/account-details/index.tsx       |  9 +-
 .../account/PublicProjectAccountTable.tsx     | 74 +++++++++--------
 .../table/code/PublicProjectCodeTable.tsx     | 73 +++++++++--------
 .../contract/PublicProjectContractTable.tsx   | 82 +++++++++++--------
 src/lib/services/accountService.ts            |  4 +-
 src/lib/services/expression/txExpression.ts   |  2 +-
 src/lib/services/proposal.ts                  |  4 +-
 src/lib/services/proposalService.ts           | 11 +--
 src/lib/services/txService.ts                 | 29 ++++---
 15 files changed, 174 insertions(+), 169 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee6708eb6..a8bfcd2e3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -102,6 +102,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#427](https://github.com/alleslabs/celatone-frontend/pull/427) Fix upload access endpoint, Public project searchbar bug, account tx bug
 - [#365](https://github.com/alleslabs/celatone-frontend/pull/365) Fix pool page UI including helper text gap, icon alignment in pool asset table, empty state border, add message type, input selection icon, and accordion alignment
 - [#362](https://github.com/alleslabs/celatone-frontend/pull/362) Fix missed out hard-coded osmosis testnet 4 in code
 - [#361](https://github.com/alleslabs/celatone-frontend/pull/361) Fix incorrect assigned message index for each pool message in pool tx tables
diff --git a/src/lib/app-provider/hooks/useBaseApiRoute.ts b/src/lib/app-provider/hooks/useBaseApiRoute.ts
index 4d9011300..bf0a81686 100644
--- a/src/lib/app-provider/hooks/useBaseApiRoute.ts
+++ b/src/lib/app-provider/hooks/useBaseApiRoute.ts
@@ -11,6 +11,7 @@ export const useBaseApiRoute = (
     | "codes"
     | "accounts"
     | "rest"
+    | "cosmwasm"
 ): string => {
   const {
     chainConfig: { chain, api: configApi },
@@ -41,6 +42,8 @@ export const useBaseApiRoute = (
       return `${api}/accounts/${chain}/${currentChainId}`;
     case "rest":
       return `${api}/rest/${chain}/${currentChainId}`;
+    case "cosmwasm":
+      return `${api}/cosmwasm/${chain}/${currentChainId}`;
     default:
       throw new Error(
         "Error retrieving chain, api, or currentChainId from chain config."
diff --git a/src/lib/components/table/TableTitle.tsx b/src/lib/components/table/TableTitle.tsx
index 97f322230..d8307e5c9 100644
--- a/src/lib/components/table/TableTitle.tsx
+++ b/src/lib/components/table/TableTitle.tsx
@@ -1,9 +1,11 @@
 import type { BoxProps } from "@chakra-ui/react";
 import { Badge, Box, Flex, Heading, Text } from "@chakra-ui/react";
 
+import type { Option } from "lib/types";
+
 interface TableTitleProps extends BoxProps {
   title: string;
-  count: number | string;
+  count: Option<number>;
   helperText?: string;
 }
 
@@ -19,12 +21,8 @@ export const TableTitle = ({
       <Heading as="h6" variant="h6">
         {title}
       </Heading>
-      <Badge
-        textColor={
-          count && typeof count !== "string" ? "text.main" : "text.disabled"
-        }
-      >
-        {count}
+      <Badge textColor={count ? "text.main" : "text.disabled"}>
+        {count ?? "N/A"}
       </Badge>
     </Flex>
     <Text variant="body2" textColor="text.dark">
diff --git a/src/lib/model/account.ts b/src/lib/model/account.ts
index 5ec2b0c6b..7cd70f783 100644
--- a/src/lib/model/account.ts
+++ b/src/lib/model/account.ts
@@ -16,7 +16,7 @@ import type { HumanAddr, Option } from "lib/types";
  */
 export const useAccountDetailsTableCounts = (
   walletAddress: HumanAddr,
-  accountId: Option<number>
+  accountId: Option<number | null>
 ) => {
   const { data: codesCount, refetch: refetchCodesCount } =
     useCodeListCountByWalletAddress(walletAddress);
diff --git a/src/lib/pages/account-details/components/mobile/MobileTitle.tsx b/src/lib/pages/account-details/components/mobile/MobileTitle.tsx
index 23dda8dfe..0455785ea 100644
--- a/src/lib/pages/account-details/components/mobile/MobileTitle.tsx
+++ b/src/lib/pages/account-details/components/mobile/MobileTitle.tsx
@@ -2,10 +2,11 @@ import { Flex } from "@chakra-ui/react";
 
 import { CustomIcon } from "lib/components/icon";
 import { TableTitle } from "lib/components/table";
+import type { Option } from "lib/types";
 
 interface MobileTitleProps {
   title: string;
-  count: string | number;
+  count: Option<number>;
   onViewMore?: () => void;
 }
 
diff --git a/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx b/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx
index 40c9ef48c..2a65d1e72 100644
--- a/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx
@@ -17,15 +17,14 @@ import {
   useTxsByAddressPagination,
   useTxsCountByAddress,
 } from "lib/services/txService";
-import type { HumanAddr, Option, Transaction, TxFilters } from "lib/types";
+import type { Option, Transaction, TxFilters } from "lib/types";
 
 import { TxsAlert } from "./TxsAlert";
 import { TxsBody } from "./TxsBody";
 import { TxsTop } from "./TxsTop";
 
 interface TxsTableProps {
-  walletAddress: HumanAddr;
-  accountId?: Option<number>;
+  accountId?: Option<number | null>;
   scrollComponentId: string;
   onViewMore?: () => void;
 }
@@ -49,12 +48,10 @@ const getEmptyStateProps = (
 
 const TxTitle = ({
   onViewMore,
-  failureReason,
   txsCount,
 }: {
   onViewMore: TxsTableProps["onViewMore"];
-  failureReason: unknown;
-  txsCount: number;
+  txsCount: Option<number>;
 }) => {
   const isMobile = useMobile();
 
@@ -62,20 +59,13 @@ const TxTitle = ({
     return (
       <MobileTitle
         title="Transactions"
-        count={failureReason ? "N/A" : txsCount}
+        count={txsCount}
         onViewMore={onViewMore}
       />
     );
-  return (
-    <TableTitle
-      title="Transactions"
-      count={failureReason ? "N/A" : txsCount}
-      mb={2}
-    />
-  );
+  return <TableTitle title="Transactions" count={txsCount} mb={0} />;
 };
 export const TxsTable = ({
-  walletAddress,
   accountId,
   scrollComponentId,
   onViewMore,
@@ -88,7 +78,7 @@ export const TxsTable = ({
     refetch: refetchTxsCount,
     isLoading: txsCountLoading,
     failureReason,
-  } = useTxsCountByAddress(walletAddress, accountId, "", filters, isSigner);
+  } = useTxsCountByAddress(undefined, accountId, "", filters, isSigner);
 
   const {
     pagesQuantity,
@@ -149,13 +139,7 @@ export const TxsTable = ({
   return (
     <Box mt={{ base: 4, md: 8 }}>
       <TxsTop
-        title={
-          <TxTitle
-            onViewMore={onViewMore}
-            failureReason={failureReason}
-            txsCount={10} // TODO: txsCount
-          />
-        }
+        title={<TxTitle onViewMore={onViewMore} txsCount={txsCount} />}
         onViewMore={onViewMore}
         relationSelection={
           <TxRelationSelection
@@ -178,7 +162,9 @@ export const TxsTable = ({
           />
         }
       />
-      {Boolean(failureReason) && transactions?.length && <TxsAlert />}
+      {Boolean(failureReason) && Number(transactions?.length) > 0 && (
+        <TxsAlert />
+      )}
       <TxsBody
         transactions={transactions}
         isLoading={isLoading || txsCountLoading}
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index a3fc7aa5e..c8b63c85d 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -88,7 +88,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
           id={tableHeaderId}
         >
           <CustomTab onClick={() => handleTabChange(TabIndex.Overview)}>
-            Overall
+            Overview
           </CustomTab>
           <CustomTab
             count={tableCounts.assetsCount}
@@ -161,7 +161,6 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
               />
             </Flex>
             <TxsTable
-              walletAddress={accountAddress}
               accountId={accountId}
               scrollComponentId={tableHeaderId}
               onViewMore={() => handleTabChange(TabIndex.Txs)}
@@ -206,11 +205,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
             <DelegationsSection walletAddress={accountAddress} />
           </TabPanel>
           <TabPanel p={0}>
-            <TxsTable
-              walletAddress={accountAddress}
-              accountId={accountId}
-              scrollComponentId={tableHeaderId}
-            />
+            <TxsTable accountId={accountId} scrollComponentId={tableHeaderId} />
           </TabPanel>
           <TabPanel p={0}>
             <StoredCodesTable
diff --git a/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx b/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
index 375c668f7..985a874cf 100644
--- a/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
+++ b/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
@@ -26,11 +26,39 @@ const AccountTableHeader = () => (
   </Grid>
 );
 
+const ContentRender = ({
+  filteredAccounts,
+  isMobile,
+}: {
+  filteredAccounts: Account[];
+  isMobile: boolean;
+}) =>
+  isMobile ? (
+    <Flex direction="column" gap={4} w="full" mt={4}>
+      {filteredAccounts.map((account) => (
+        <AccountCard key={account.address} accountInfo={account} />
+      ))}
+    </Flex>
+  ) : (
+    <TableContainer mb={4}>
+      <AccountTableHeader />
+      {filteredAccounts.map((account) => (
+        <PublicProjectAccountRow
+          key={account.address}
+          accountInfo={account}
+          templateColumns={TEMPLATE_COLUMNS}
+        />
+      ))}
+    </TableContainer>
+  );
+
 export const PublicProjectAccountTable = ({
   accounts = [],
   onViewMore,
 }: PublicProjectAccountTableProps) => {
   const [searchKeyword, setSearchKeyword] = useState("");
+  const isMobile = useMobile();
+
   const filteredAccounts = useMemo(() => {
     return onViewMore
       ? accounts.slice(0, 5)
@@ -40,22 +68,6 @@ export const PublicProjectAccountTable = ({
         });
   }, [accounts, onViewMore, searchKeyword]);
 
-  const isMobile = useMobile();
-  if (!filteredAccounts.length)
-    return (
-      <>
-        <TableTitle
-          title="Accounts"
-          count={accounts.length}
-          mt={{ base: 8, md: 12 }}
-        />
-        <EmptyState
-          message="There is currently no accounts related to this project."
-          imageVariant={onViewMore && "empty"}
-          withBorder
-        />
-      </>
-    );
   return (
     <Box mt={{ base: 8, md: 12 }} mb={4}>
       <TableTitle title="Accounts" count={accounts.length} />
@@ -69,23 +81,21 @@ export const PublicProjectAccountTable = ({
           mb={6}
         />
       )}
-      {isMobile ? (
-        <Flex direction="column" gap={4} w="full" mt={4}>
-          {filteredAccounts.map((account) => (
-            <AccountCard key={account.address} accountInfo={account} />
-          ))}
-        </Flex>
+      {filteredAccounts.length ? (
+        <ContentRender
+          filteredAccounts={filteredAccounts}
+          isMobile={isMobile}
+        />
       ) : (
-        <TableContainer mb={4}>
-          <AccountTableHeader />
-          {filteredAccounts.map((account) => (
-            <PublicProjectAccountRow
-              key={account.address}
-              accountInfo={account}
-              templateColumns={TEMPLATE_COLUMNS}
-            />
-          ))}
-        </TableContainer>
+        <EmptyState
+          message={
+            accounts.length
+              ? "No matching account found for this project. Make sure you are searching with Account Address or Account Name"
+              : "There is currently no accounts related to this project."
+          }
+          imageVariant={onViewMore && "empty"}
+          withBorder
+        />
       )}
       {accounts.length > 5 && onViewMore && <ViewMore onClick={onViewMore} />}
     </Box>
diff --git a/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx b/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
index 93d0bfe08..2554b4245 100644
--- a/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
+++ b/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
@@ -38,6 +38,32 @@ const CodeTableHeader = () => (
   </Grid>
 );
 
+const ContentRender = ({
+  publicCodes,
+  isMobile,
+}: {
+  publicCodes: PublicCodeInfo[];
+  isMobile: boolean;
+}) =>
+  isMobile ? (
+    <Flex direction="column" gap={4} w="full" mt={4}>
+      {publicCodes.map((code) => (
+        <StoredCodeCard key={code.publicInfo.id} codeInfo={code.publicInfo} />
+      ))}
+    </Flex>
+  ) : (
+    <TableContainer>
+      <CodeTableHeader />
+      {publicCodes.map((code) => (
+        <PublicProjectCodeRow
+          key={code.publicInfo.id}
+          publicCodeInfo={code}
+          templateColumns={TEMPLATE_COLUMNS}
+        />
+      ))}
+    </TableContainer>
+  );
+
 export const PublicProjectCodeTable = observer(
   ({ codes = [], onViewMore }: PublicProjectCodeTableProps) => {
     const [searchKeyword, setSearchKeyword] = useState("");
@@ -71,22 +97,6 @@ export const PublicProjectCodeTable = observer(
       })
     );
 
-    if (!publicCodes.length)
-      return (
-        <>
-          <TableTitle
-            title="Codes"
-            count={codes.length}
-            mt={{ base: 8, md: 12 }}
-          />
-          <EmptyState
-            my={4}
-            message="There is currently no code related to this project."
-            imageVariant={onViewMore && "empty"}
-            withBorder
-          />
-        </>
-      );
     return (
       <Box mt={{ base: 8, md: 12 }} mb={4}>
         <TableTitle title="Codes" count={codes.length} />
@@ -100,26 +110,19 @@ export const PublicProjectCodeTable = observer(
             mb={6}
           />
         )}
-        {isMobile ? (
-          <Flex direction="column" gap={4} w="full" mt={4}>
-            {publicCodes.map((code) => (
-              <StoredCodeCard
-                key={code.publicInfo.id}
-                codeInfo={code.publicInfo}
-              />
-            ))}
-          </Flex>
+        {publicCodes.length ? (
+          <ContentRender publicCodes={publicCodes} isMobile={isMobile} />
         ) : (
-          <TableContainer>
-            <CodeTableHeader />
-            {publicCodes.map((code) => (
-              <PublicProjectCodeRow
-                key={code.publicInfo.id}
-                publicCodeInfo={code}
-                templateColumns={TEMPLATE_COLUMNS}
-              />
-            ))}
-          </TableContainer>
+          <EmptyState
+            my={4}
+            message={
+              codes.length
+                ? "No matching code found for this project. Make sure you are searching with Code ID or Code Name"
+                : "There is currently no code related to this project."
+            }
+            imageVariant={onViewMore && "empty"}
+            withBorder
+          />
         )}
         {codes.length > 5 && onViewMore && <ViewMore onClick={onViewMore} />}
       </Box>
diff --git a/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx b/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
index 066ab0c91..716062c2c 100644
--- a/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
+++ b/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
@@ -34,10 +34,40 @@ const ContractTableHeader = () => (
   </Grid>
 );
 
+const ContentRender = ({
+  publicContracts,
+  isMobile,
+}: {
+  publicContracts: PublicContractInfo[];
+  isMobile: boolean;
+}) =>
+  isMobile ? (
+    <Flex direction="column" gap={4} w="full" mt={4}>
+      {publicContracts.map((contract) => (
+        <PublicContractCard
+          publicInfo={contract.publicInfo}
+          key={contract.publicInfo.contractAddress}
+        />
+      ))}
+    </Flex>
+  ) : (
+    <TableContainer>
+      <ContractTableHeader />
+      {publicContracts.map((contract) => (
+        <PublicProjectContractRow
+          key={contract.publicInfo.contractAddress}
+          publicContractInfo={contract}
+          templateColumns={TEMPLATE_COLUMNS}
+        />
+      ))}
+    </TableContainer>
+  );
+
 export const PublicProjectContractTable = observer(
   ({ contracts = [], onViewMore }: PublicProjectContractTableProps) => {
     const [searchKeyword, setSearchKeyword] = useState("");
     const { getContractLocalInfo } = useContractStore();
+    const isMobile = useMobile();
 
     const filteredContracts = useMemo(() => {
       return onViewMore
@@ -60,23 +90,7 @@ export const PublicProjectContractTable = observer(
           ...contract,
         },
       }));
-    const isMobile = useMobile();
-    if (!publicContracts.length)
-      return (
-        <>
-          <TableTitle
-            title="Contracts"
-            count={contracts.length}
-            mt={{ base: 8, md: 12 }}
-          />
-          <EmptyState
-            my={4}
-            message="There is currently no contracts related to this project."
-            imageVariant={onViewMore && "empty"}
-            withBorder
-          />
-        </>
-      );
+
     return (
       <Box mt={{ base: 8, md: 12 }} mb={4}>
         <TableTitle title="Contracts" count={contracts.length} />
@@ -90,26 +104,22 @@ export const PublicProjectContractTable = observer(
             mb={6}
           />
         )}
-        {isMobile ? (
-          <Flex direction="column" gap={4} w="full" mt={4}>
-            {publicContracts.map((contract) => (
-              <PublicContractCard
-                publicInfo={contract.publicInfo}
-                key={contract.publicInfo.contractAddress}
-              />
-            ))}
-          </Flex>
+        {publicContracts.length ? (
+          <ContentRender
+            publicContracts={publicContracts}
+            isMobile={isMobile}
+          />
         ) : (
-          <TableContainer>
-            <ContractTableHeader />
-            {publicContracts.map((contract) => (
-              <PublicProjectContractRow
-                key={contract.publicInfo.contractAddress}
-                publicContractInfo={contract}
-                templateColumns={TEMPLATE_COLUMNS}
-              />
-            ))}
-          </TableContainer>
+          <EmptyState
+            my={4}
+            message={
+              contracts.length
+                ? "No matching contract found for this project. Make sure you are searching with Contract Address or Contract Name"
+                : "There is currently no contracts related to this project."
+            }
+            imageVariant={onViewMore && "empty"}
+            withBorder
+          />
         )}
         {contracts.length > 5 && onViewMore && (
           <ViewMore onClick={onViewMore} />
diff --git a/src/lib/services/accountService.ts b/src/lib/services/accountService.ts
index b7246c017..7bc7967cd 100644
--- a/src/lib/services/accountService.ts
+++ b/src/lib/services/accountService.ts
@@ -21,14 +21,14 @@ export const useAccountBalances = (
 
 export const useAccountId = (
   walletAddress: Option<Addr>
-): UseQueryResult<Option<number>> => {
+): UseQueryResult<number | null> => {
   const { indexerGraphClient } = useCelatoneApp();
   const queryFn = () => {
     if (!walletAddress)
       throw new Error("Error fetching account id: failed to retrieve address.");
     return indexerGraphClient
       .request(getAccountIdByAddressQueryDocument, { address: walletAddress })
-      .then<Option<number>>(({ accounts_by_pk }) => accounts_by_pk?.id);
+      .then<number | null>(({ accounts_by_pk }) => accounts_by_pk?.id ?? null);
   };
   return useQuery(["account_id", indexerGraphClient, walletAddress], queryFn, {
     enabled: Boolean(walletAddress),
diff --git a/src/lib/services/expression/txExpression.ts b/src/lib/services/expression/txExpression.ts
index 04ba3fb68..7cd3f3ad0 100644
--- a/src/lib/services/expression/txExpression.ts
+++ b/src/lib/services/expression/txExpression.ts
@@ -42,7 +42,7 @@ export const useTxExpression = ({
   isSigner,
 }: {
   address?: Option<Addr>;
-  accountId?: Option<number>;
+  accountId?: Option<number | null>;
   search: string;
   filters: TxFilters;
   isSigner: Option<boolean>;
diff --git a/src/lib/services/proposal.ts b/src/lib/services/proposal.ts
index bd62b1887..359930c91 100644
--- a/src/lib/services/proposal.ts
+++ b/src/lib/services/proposal.ts
@@ -64,6 +64,4 @@ export interface UploadAccess {
 export const fetchGovUploadAccessParams = async (
   lcdEndpoint: string
 ): Promise<UploadAccess> =>
-  axios
-    .get(`${lcdEndpoint}/cosmwasm/wasm/v1/codes/params`)
-    .then(({ data }) => data.params.code_upload_access);
+  axios.get(`${lcdEndpoint}/upload_access`).then(({ data }) => data);
diff --git a/src/lib/services/proposalService.ts b/src/lib/services/proposalService.ts
index 87c0a65d6..211007477 100644
--- a/src/lib/services/proposalService.ts
+++ b/src/lib/services/proposalService.ts
@@ -302,12 +302,13 @@ export interface GovParams {
 
 export const useGovParams = (): UseQueryResult<GovParams> => {
   const lcdEndpoint = useBaseApiRoute("rest");
+  const cosmwasmEndpoint = useBaseApiRoute("cosmwasm");
   const getAssetInfo = useChainRecordAsset();
   const queryFn = useCallback(
     () =>
       Promise.all([
         fetchGovDepositParams(lcdEndpoint),
-        fetchGovUploadAccessParams(lcdEndpoint),
+        fetchGovUploadAccessParams(cosmwasmEndpoint),
         fetchGovVotingParams(lcdEndpoint),
       ]).then<GovParams>((params) => {
         const minDepositParam = params[0].minDeposit[0];
@@ -342,7 +343,7 @@ export const useGovParams = (): UseQueryResult<GovParams> => {
           votingParams: params[2],
         };
       }),
-    [lcdEndpoint, getAssetInfo]
+    [lcdEndpoint, cosmwasmEndpoint, getAssetInfo]
   );
 
   return useQuery(["gov_params", lcdEndpoint], queryFn, {
@@ -352,10 +353,10 @@ export const useGovParams = (): UseQueryResult<GovParams> => {
 };
 
 export const useUploadAccessParams = (): UseQueryResult<UploadAccess> => {
-  const lcdEndpoint = useBaseApiRoute("rest");
+  const cosmwasmEndpoint = useBaseApiRoute("cosmwasm");
   return useQuery(
-    ["upload_access", lcdEndpoint],
-    () => fetchGovUploadAccessParams(lcdEndpoint),
+    ["upload_access", cosmwasmEndpoint],
+    () => fetchGovUploadAccessParams(cosmwasmEndpoint),
     { keepPreviousData: true, refetchOnWindowFocus: false }
   );
 };
diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index 77bbf9d3b..4fb741b41 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -73,7 +73,7 @@ export const useTxData = (
 
 export const useTxsByAddressPagination = (
   address: Option<Addr>,
-  accountId: Option<number>,
+  accountId: Option<number | null>,
   search: string,
   filters: TxFilters,
   isSigner: Option<boolean>,
@@ -157,7 +157,7 @@ export const useTxsByAddressPagination = (
 
 export const useTxsCountByAddress = (
   address: Option<Addr>,
-  accountId: Option<number>,
+  accountId: Option<number | null>,
   search: string,
   filters: TxFilters,
   isSigner: Option<boolean>
@@ -171,18 +171,17 @@ export const useTxsCountByAddress = (
     isSigner,
   });
 
-  const queryFn = useCallback(
-    async () =>
-      indexerGraphClient
-        .request(getTxsCountByAddress, {
-          expression,
-        })
-        .then(
-          ({ account_transactions_aggregate }) =>
-            account_transactions_aggregate.aggregate?.count
-        ),
-    [expression, indexerGraphClient]
-  );
+  const queryFn = useCallback(async () => {
+    if (!address && !accountId) return 0;
+    return indexerGraphClient
+      .request(getTxsCountByAddress, {
+        expression,
+      })
+      .then(
+        ({ account_transactions_aggregate }) =>
+          account_transactions_aggregate.aggregate?.count
+      );
+  }, [expression, indexerGraphClient, accountId, address]);
 
   return useQuery(
     [
@@ -195,7 +194,7 @@ export const useTxsCountByAddress = (
     ],
     queryFn,
     {
-      enabled: !!address || !!accountId,
+      enabled: !!address || accountId !== undefined,
       retry: 0,
       refetchOnWindowFocus: false,
     }

From fde2f88a897be009038bd46ee94af05281465c0b Mon Sep 17 00:00:00 2001
From: Ramida J <jennieramida@gmail.com>
Date: Tue, 11 Jul 2023 11:27:32 +0700
Subject: [PATCH 340/354] fix(components): fix tooltips in mobile

---
 src/lib/components/MobileGuard.tsx             |  1 +
 src/lib/components/PermissionChip.tsx          | 18 +++++++++++++-----
 src/lib/components/card/PublicContractCard.tsx |  5 ++++-
 src/lib/components/table/EditableCell.tsx      |  4 +++-
 src/lib/pages/codes/index.tsx                  |  2 +-
 src/lib/pages/contracts/index.tsx              |  2 +-
 6 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/MobileGuard.tsx b/src/lib/components/MobileGuard.tsx
index 602304486..9c71cbb52 100644
--- a/src/lib/components/MobileGuard.tsx
+++ b/src/lib/components/MobileGuard.tsx
@@ -23,6 +23,7 @@ export const MobileGuard = ({ children }: MobileGuardProps) => {
     pathName.includes(`/query`) ||
     pathName.includes(`/network-overview`) ||
     pathName.includes(`/dev-home`) ||
+    pathName.includes(`/404`) ||
     pathName === `/${currentChainId}/contracts` ||
     pathName === `/${currentChainId}`;
 
diff --git a/src/lib/components/PermissionChip.tsx b/src/lib/components/PermissionChip.tsx
index f7acb2f73..df3bfbc75 100644
--- a/src/lib/components/PermissionChip.tsx
+++ b/src/lib/components/PermissionChip.tsx
@@ -1,6 +1,6 @@
 import { Flex, Tag } from "@chakra-ui/react";
 
-import { useCurrentChain } from "lib/app-provider";
+import { useCurrentChain, useMobile } from "lib/app-provider";
 import type {
   HumanAddr,
   PermissionAddresses,
@@ -34,10 +34,18 @@ export const PermissionChip = ({
     instantiatePermission,
     permissionAddresses
   );
-
-  return (
-    <Tooltip label={message}>
-      <Flex onClick={(e) => e.stopPropagation()}>
+  const isMobile = useMobile();
+  return isMobile ? (
+    <Tooltip label={message} placement="top-start">
+      <Flex w="fit-content">
+        <Tag size={tagSize} variant={isAllowed ? "accent-darker" : "gray"}>
+          {instantiatePermission}
+        </Tag>
+      </Flex>
+    </Tooltip>
+  ) : (
+    <Tooltip label={message} placement="top-start">
+      <Flex onClick={(e) => e.stopPropagation()} w="fit-content">
         <Tag size={tagSize} variant={isAllowed ? "accent-darker" : "gray"}>
           {instantiatePermission}
         </Tag>
diff --git a/src/lib/components/card/PublicContractCard.tsx b/src/lib/components/card/PublicContractCard.tsx
index cf004a1d2..3dba99bc3 100644
--- a/src/lib/components/card/PublicContractCard.tsx
+++ b/src/lib/components/card/PublicContractCard.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex } from "@chakra-ui/react";
+import { Button, Flex, Text } from "@chakra-ui/react";
 
 import { AppLink } from "../AppLink";
 import { ExplorerLink } from "../ExplorerLink";
@@ -58,6 +58,9 @@ export const PublicContractCard = ({ publicInfo }: PublicContractCardProps) => {
             <Flex direction="column">
               <MobileLabel label="Contract Name" />
               <ContractNameCell contractLocalInfo={publicInfo} isReadOnly />
+              <Text variant="body3" color="text.dark" pt={1}>
+                {publicInfo.description}
+              </Text>
             </Flex>
           </Flex>
           <Flex flex="1" direction="column">
diff --git a/src/lib/components/table/EditableCell.tsx b/src/lib/components/table/EditableCell.tsx
index 66467dab4..dda0766c3 100644
--- a/src/lib/components/table/EditableCell.tsx
+++ b/src/lib/components/table/EditableCell.tsx
@@ -5,6 +5,7 @@ import { useRef, useState, useEffect } from "react";
 
 import { CustomIcon } from "../icon";
 import { Tooltip } from "../Tooltip";
+import { useMobile } from "lib/app-provider";
 
 interface EditableCellProps {
   initialValue?: string;
@@ -85,6 +86,7 @@ export const EditableCell = ({
 
   useEffect(() => setInputValue(initialValue), [initialValue]);
 
+  const isMobile = useMobile();
   return (
     <>
       {isEditCellOpen && (
@@ -188,7 +190,7 @@ export const EditableCell = ({
                 {inputValue}
               </Text>
             )}
-            {!!tooltip && (
+            {!isMobile && !!tooltip && (
               <Tooltip label={tooltip}>
                 <p>
                   <CustomIcon
diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx
index 3aefd0d0a..9ef742ee8 100644
--- a/src/lib/pages/codes/index.tsx
+++ b/src/lib/pages/codes/index.tsx
@@ -73,7 +73,7 @@ const RecentCodes = observer(() => {
 
   return (
     <PageContainer>
-      <Box pb={{ base: 0, md: 12 }}>
+      <Box>
         <Heading variant="h5" as="h5" minH="36px">
           Recent Codes
         </Heading>
diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contracts/index.tsx
index 3165c8498..54c598020 100644
--- a/src/lib/pages/contracts/index.tsx
+++ b/src/lib/pages/contracts/index.tsx
@@ -47,7 +47,7 @@ const RecentContracts = observer(() => {
   };
   return (
     <PageContainer>
-      <Box pb={{ base: 0, md: 12 }}>
+      <Box>
         <Heading variant="h5" as="h5" minH="36px">
           Recent Contracts
         </Heading>

From 00d41de02fa7004434af3559c4a2c9d180c96f98 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 11 Jul 2023 12:33:58 +0700
Subject: [PATCH 341/354] feat: validator list from gql

---
 CHANGELOG.md                         |  1 +
 src/lib/gql/gql.ts                   |  5 ++
 src/lib/gql/graphql.ts               | 73 ++++++++++++++++++++++++++++
 src/lib/query/validator.ts           | 19 ++++++++
 src/lib/services/validator.ts        | 29 +----------
 src/lib/services/validatorService.ts | 38 +++++++++------
 src/lib/types/validator.ts           |  6 +++
 7 files changed, 130 insertions(+), 41 deletions(-)
 create mode 100644 src/lib/query/validator.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee6708eb6..6fa801c44 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -68,6 +68,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#428](https://github.com/alleslabs/celatone-frontend/pull/428) Get all validators from graphql
 - [#417](https://github.com/alleslabs/celatone-frontend/pull/417) Support responsive and add new theme
 - [#283](https://github.com/alleslabs/celatone-frontend/pull/283) Change unsupported token icon render logic
 - [#420](https://github.com/alleslabs/celatone-frontend/pull/420) Unify create proposal page layout
diff --git a/src/lib/gql/gql.ts b/src/lib/gql/gql.ts
index 437488cf3..e5eaa13a9 100644
--- a/src/lib/gql/gql.ts
+++ b/src/lib/gql/gql.ts
@@ -95,6 +95,8 @@ const documents = {
     types.GetBlockTransactionsByHeightQueryDocument,
   "\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetBlockTransactionCountByHeightQueryDocument,
+  "\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      min_self_delegation\n      moniker\n      operator_address\n      website\n    }\n  }\n":
+    types.GetValidatorsDocument,
 };
 
 export function graphql(
@@ -235,6 +237,9 @@ export function graphql(
 export function graphql(
   source: "\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      min_self_delegation\n      moniker\n      operator_address\n      website\n    }\n  }\n"
+): typeof documents["\n  query getValidators {\n    validators {\n      commission_max_change\n      commission_max_rate\n      commission_rate\n      consensus_address\n      details\n      identity\n      jailed\n      min_self_delegation\n      moniker\n      operator_address\n      website\n    }\n  }\n"];
 
 export function graphql(source: string): unknown;
 export function graphql(source: string) {
diff --git a/src/lib/gql/graphql.ts b/src/lib/gql/graphql.ts
index cfaf98e97..593475e18 100644
--- a/src/lib/gql/graphql.ts
+++ b/src/lib/gql/graphql.ts
@@ -12683,6 +12683,26 @@ export type GetBlockTransactionCountByHeightQueryQuery = {
   };
 };
 
+export type GetValidatorsQueryVariables = Exact<{ [key: string]: never }>;
+
+export type GetValidatorsQuery = {
+  __typename?: "query_root";
+  validators: Array<{
+    __typename?: "validators";
+    commission_max_change: string;
+    commission_max_rate: string;
+    commission_rate: string;
+    consensus_address: string;
+    details: string;
+    identity: string;
+    jailed: boolean;
+    min_self_delegation: string;
+    moniker: string;
+    operator_address: string;
+    website: string;
+  }>;
+};
+
 export const GetAccountIdByAddressQueryDocumentDocument = {
   kind: "Document",
   definitions: [
@@ -18336,3 +18356,56 @@ export const GetBlockTransactionCountByHeightQueryDocument = {
   GetBlockTransactionCountByHeightQueryQuery,
   GetBlockTransactionCountByHeightQueryQueryVariables
 >;
+export const GetValidatorsDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getValidators" },
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "validators" },
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "commission_max_change" },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "commission_max_rate" },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "commission_rate" },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "consensus_address" },
+                },
+                { kind: "Field", name: { kind: "Name", value: "details" } },
+                { kind: "Field", name: { kind: "Name", value: "identity" } },
+                { kind: "Field", name: { kind: "Name", value: "jailed" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "min_self_delegation" },
+                },
+                { kind: "Field", name: { kind: "Name", value: "moniker" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "operator_address" },
+                },
+                { kind: "Field", name: { kind: "Name", value: "website" } },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<GetValidatorsQuery, GetValidatorsQueryVariables>;
diff --git a/src/lib/query/validator.ts b/src/lib/query/validator.ts
new file mode 100644
index 000000000..32dee8613
--- /dev/null
+++ b/src/lib/query/validator.ts
@@ -0,0 +1,19 @@
+import { graphql } from "lib/gql";
+
+export const getValidators = graphql(`
+  query getValidators {
+    validators {
+      commission_max_change
+      commission_max_rate
+      commission_rate
+      consensus_address
+      details
+      identity
+      jailed
+      min_self_delegation
+      moniker
+      operator_address
+      website
+    }
+  }
+`);
diff --git a/src/lib/services/validator.ts b/src/lib/services/validator.ts
index 7b55eee07..275a18092 100644
--- a/src/lib/services/validator.ts
+++ b/src/lib/services/validator.ts
@@ -1,6 +1,6 @@
 import axios from "axios";
 
-import type { ValidatorAddr } from "lib/types";
+import type { Validator, ValidatorAddr } from "lib/types";
 
 interface ValidatorResponse {
   operator_address: ValidatorAddr;
@@ -32,16 +32,10 @@ interface ValidatorResponse {
   min_self_delegation: string;
 }
 
-export interface RawValidator {
-  validatorAddress: ValidatorAddr;
-  moniker: string;
-  identity: string;
-}
-
 export const getValidator = async (
   endpoint: string,
   validatorAddr: ValidatorAddr
-): Promise<RawValidator> => {
+): Promise<Validator> => {
   const { data } = await axios.get<{ validator: ValidatorResponse }>(
     `${endpoint}/cosmos/staking/v1beta1/validators/${validatorAddr}`
   );
@@ -51,22 +45,3 @@ export const getValidator = async (
     identity: data.validator.description.identity,
   };
 };
-
-export const getValidators = async (
-  endpoint: string
-): Promise<Record<string, RawValidator>> => {
-  const { data } = await axios.get<{ validators: ValidatorResponse[] }>(
-    `${endpoint}/cosmos/staking/v1beta1/validators?pagination.limit=500`
-  );
-  return data.validators.reduce<Record<string, RawValidator>>(
-    (all, validator) => ({
-      ...all,
-      [validator.operator_address]: {
-        validatorAddress: validator.operator_address,
-        moniker: validator.description.moniker,
-        identity: validator.description.identity,
-      },
-    }),
-    {}
-  );
-};
diff --git a/src/lib/services/validatorService.ts b/src/lib/services/validatorService.ts
index 064f6db67..9ea14c5aa 100644
--- a/src/lib/services/validatorService.ts
+++ b/src/lib/services/validatorService.ts
@@ -5,16 +5,16 @@ import type {
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 
-import { useBaseApiRoute } from "lib/app-provider";
-import type { ValidatorAddr } from "lib/types";
+import { useBaseApiRoute, useCelatoneApp } from "lib/app-provider";
+import { getValidators } from "lib/query/validator";
+import type { Validator, ValidatorAddr } from "lib/types";
 
-import type { RawValidator } from "./validator";
-import { getValidator, getValidators } from "./validator";
+import { getValidator } from "./validator";
 
 export const useValidator = (
   validatorAddr: ValidatorAddr,
   enabled = true
-): UseQueryResult<RawValidator> => {
+): UseQueryResult<Validator> => {
   const lcdEndpoint = useBaseApiRoute("rest");
   const queryFn = async ({ queryKey }: QueryFunctionContext<string[]>) =>
     getValidator(queryKey[2], queryKey[3] as ValidatorAddr);
@@ -30,16 +30,26 @@ export const useValidator = (
   );
 };
 
-export const useValidators = (): UseQueryResult<
-  Record<string, RawValidator>
-> => {
-  const lcdEndpoint = useBaseApiRoute("rest");
-  const queryFn = useCallback(
-    async () => getValidators(lcdEndpoint),
-    [lcdEndpoint]
-  );
+export const useValidators = (): UseQueryResult<Record<string, Validator>> => {
+  const { indexerGraphClient } = useCelatoneApp();
+
+  const queryFn = useCallback(async () => {
+    return indexerGraphClient.request(getValidators).then(({ validators }) =>
+      validators.reduce<Record<string, Validator>>(
+        (all, validator) => ({
+          ...all,
+          [validator.operator_address]: {
+            validatorAddress: validator.operator_address,
+            moniker: validator.moniker,
+            identity: validator.identity,
+          } as Validator,
+        }),
+        {}
+      )
+    );
+  }, [indexerGraphClient]);
 
-  return useQuery(["query", "validators", lcdEndpoint], queryFn, {
+  return useQuery(["query", "validators", indexerGraphClient], queryFn, {
     refetchOnWindowFocus: false,
   });
 };
diff --git a/src/lib/types/validator.ts b/src/lib/types/validator.ts
index 65dde1455..93f16fdc8 100644
--- a/src/lib/types/validator.ts
+++ b/src/lib/types/validator.ts
@@ -1,6 +1,12 @@
 import type { ValidatorAddr } from "./addrs";
 import type { Option } from "./common";
 
+export interface Validator {
+  validatorAddress: ValidatorAddr;
+  moniker: string;
+  identity: string;
+}
+
 export interface ValidatorInfo {
   validatorAddress: ValidatorAddr;
   moniker: Option<string>;

From 13ad63e1318b78b47bb5247381317e45e3cafa12 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Tue, 11 Jul 2023 13:43:44 +0700
Subject: [PATCH 342/354] fix: format duration and add migrate tab to balancer
 pool

---
 .../pool-details/PoolRelatedTxs.tsx           |  4 ++--
 .../messages/lockup/MsgLockTokensAction.tsx   |  7 +++----
 src/lib/utils/date.ts                         | 20 +++++++++++++++++++
 src/lib/utils/tx/types.ts                     |  4 ++--
 4 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
index a9b036181..c23c64572 100644
--- a/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
+++ b/src/lib/pages/pools/components/pool-details/PoolRelatedTxs.tsx
@@ -102,7 +102,7 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
               Collect
             </CustomTab>
           )}
-          {pool.type === PoolType.CL && (
+          {(pool.type === PoolType.CL || pool.type === PoolType.BALANCER) && (
             <CustomTab
               count={countDisplayMigrateTxs}
               onClick={() => AmpTrackUseTab("Migrate")}
@@ -175,7 +175,7 @@ export const PoolRelatedTxs = ({ pool }: PoolRelatedTxsProps) => {
               />
             </TabPanel>
           )}
-          {pool.type === PoolType.CL && (
+          {(pool.type === PoolType.CL || pool.type === PoolType.BALANCER) && (
             <TabPanel p={0}>
               <PoolRelatedTxsTable
                 pool={pool}
diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx
index 1fb6324e7..3e1b2107e 100644
--- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx
+++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/lockup/MsgLockTokensAction.tsx
@@ -5,6 +5,7 @@ import { getPoolDenom } from "../utils";
 import { MsgToken } from "lib/components/action-msg/MsgToken";
 import type { AssetInfosOpt } from "lib/services/assetService";
 import type { PoolDetail } from "lib/types";
+import { formatDuration } from "lib/utils";
 import type { MsgLockTokensDetails } from "lib/utils/tx/types";
 
 interface MsgLockTokensActionProps {
@@ -39,10 +40,8 @@ export const MsgLockTokensAction = ({
       to
       <PoolLogoLink pool={pool} ampCopierSection={ampCopierSection} />
       with
-      <span style={{ fontWeight: 700 }}>
-        {Number(msg.duration) / (24 * 60 * 60 * 1e9)}
-      </span>
-      days unbonding
+      <span style={{ fontWeight: 700 }}>{formatDuration(msg.duration)}</span>
+      unbonding
     </Flex>
   );
 };
diff --git a/src/lib/utils/date.ts b/src/lib/utils/date.ts
index 70600dd90..04db645a7 100644
--- a/src/lib/utils/date.ts
+++ b/src/lib/utils/date.ts
@@ -50,3 +50,23 @@ export const formatSeconds = (sec: Option<string>) => {
       return `${formatSec.toFixed()} second`.concat(formatSec.gt(1) ? "s" : "");
   }
 };
+
+// TODO - Add unit test
+export const formatDuration = (duration: string | number) => {
+  if (typeof duration === "number" || Number.isInteger(duration))
+    return formatSeconds(big(duration).div(1e9).toFixed());
+  let value = big(duration.slice(0, -1));
+  switch (true) {
+    case duration.endsWith("h"):
+      value = value.mul(360);
+      break;
+    case duration.endsWith("m"):
+      value = value.mul(60);
+      break;
+    case duration.endsWith("s"):
+      break;
+    default:
+      break;
+  }
+  return formatSeconds(value.toFixed());
+};
diff --git a/src/lib/utils/tx/types.ts b/src/lib/utils/tx/types.ts
index 9319debc2..4217981e7 100644
--- a/src/lib/utils/tx/types.ts
+++ b/src/lib/utils/tx/types.ts
@@ -448,7 +448,7 @@ export interface MsgAddToGaugeDetails extends MsgBaseDetails {
 // osmosis/lockup
 export interface MsgLockTokensDetails extends MsgBaseDetails {
   owner: Addr;
-  duration: string;
+  duration: string | number;
   coins: Coin[];
 }
 export interface MsgBeginUnlockingAllDetails extends MsgBaseDetails {
@@ -462,7 +462,7 @@ export interface MsgBeginUnlockingDetails extends MsgBaseDetails {
 export interface MsgExtendLockupDetails extends MsgBaseDetails {
   owner: Addr;
   ID: string;
-  duration: string;
+  duration: string | number;
 }
 export interface MsgForceUnlockDetails extends MsgBaseDetails {
   owner: Addr;

From 0a0454c5b97d3bb997da4856870ca1746f46f7c8 Mon Sep 17 00:00:00 2001
From: bkioshn <bkioshn@gmail.com>
Date: Tue, 11 Jul 2023 13:54:52 +0700
Subject: [PATCH 343/354] chore: add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a37f174d1..f8483731c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -101,6 +101,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#429](https://github.com/alleslabs/celatone-frontend/pull/429) Fix duration formatter, type and add migrate tab to balancer pool
 - [#365](https://github.com/alleslabs/celatone-frontend/pull/365) Fix pool page UI including helper text gap, icon alignment in pool asset table, empty state border, add message type, input selection icon, and accordion alignment
 - [#362](https://github.com/alleslabs/celatone-frontend/pull/362) Fix missed out hard-coded osmosis testnet 4 in code
 - [#361](https://github.com/alleslabs/celatone-frontend/pull/361) Fix incorrect assigned message index for each pool message in pool tx tables

From 11603ec755d4b2738231ebc9304d12b568a41bc6 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 11 Jul 2023 14:40:27 +0700
Subject: [PATCH 344/354] fix: key type

---
 src/lib/services/validatorService.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/lib/services/validatorService.ts b/src/lib/services/validatorService.ts
index 9ea14c5aa..50d842575 100644
--- a/src/lib/services/validatorService.ts
+++ b/src/lib/services/validatorService.ts
@@ -30,12 +30,14 @@ export const useValidator = (
   );
 };
 
-export const useValidators = (): UseQueryResult<Record<string, Validator>> => {
+export const useValidators = (): UseQueryResult<
+  Record<ValidatorAddr, Validator>
+> => {
   const { indexerGraphClient } = useCelatoneApp();
 
   const queryFn = useCallback(async () => {
     return indexerGraphClient.request(getValidators).then(({ validators }) =>
-      validators.reduce<Record<string, Validator>>(
+      validators.reduce<Record<ValidatorAddr, Validator>>(
         (all, validator) => ({
           ...all,
           [validator.operator_address]: {

From c66cc04c04e3020f8a7803b6fe8d650bfb8271ce Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 11 Jul 2023 15:05:32 +0700
Subject: [PATCH 345/354] fix(components): fix explorer link

---
 src/lib/components/PermissionChip.tsx            | 16 ++++------------
 src/lib/components/tx/TxReceiptRender.tsx        |  7 ++++++-
 .../components/tx-message/EventBox.tsx           |  3 +++
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/PermissionChip.tsx b/src/lib/components/PermissionChip.tsx
index df3bfbc75..c41748d76 100644
--- a/src/lib/components/PermissionChip.tsx
+++ b/src/lib/components/PermissionChip.tsx
@@ -1,6 +1,6 @@
 import { Flex, Tag } from "@chakra-ui/react";
 
-import { useCurrentChain, useMobile } from "lib/app-provider";
+import { useCurrentChain } from "lib/app-provider";
 import type {
   HumanAddr,
   PermissionAddresses,
@@ -34,17 +34,9 @@ export const PermissionChip = ({
     instantiatePermission,
     permissionAddresses
   );
-  const isMobile = useMobile();
-  return isMobile ? (
-    <Tooltip label={message} placement="top-start">
-      <Flex w="fit-content">
-        <Tag size={tagSize} variant={isAllowed ? "accent-darker" : "gray"}>
-          {instantiatePermission}
-        </Tag>
-      </Flex>
-    </Tooltip>
-  ) : (
-    <Tooltip label={message} placement="top-start">
+
+  return (
+    <Tooltip label={message}>
       <Flex onClick={(e) => e.stopPropagation()} w="fit-content">
         <Tag size={tagSize} variant={isAllowed ? "accent-darker" : "gray"}>
           {instantiatePermission}
diff --git a/src/lib/components/tx/TxReceiptRender.tsx b/src/lib/components/tx/TxReceiptRender.tsx
index 03dd7868d..e60d7768e 100644
--- a/src/lib/components/tx/TxReceiptRender.tsx
+++ b/src/lib/components/tx/TxReceiptRender.tsx
@@ -46,7 +46,12 @@ const variantStyle: Record<
 };
 
 const ReceiptRow = ({ title, value, html }: TxReceipt) => (
-  <Flex fontSize="14px" w="full" direction={{ base: "column", md: "row" }}>
+  <Flex
+    fontSize="14px"
+    w="full"
+    gap={title.includes("Event Log") ? 2 : 0}
+    direction={{ base: "column", md: "row" }}
+  >
     <Text variant="body2" mb={{ base: 1, md: 0 }}>
       {title}
     </Text>
diff --git a/src/lib/pages/tx-details/components/tx-message/EventBox.tsx b/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
index bf00e6dd0..1ac2aae54 100644
--- a/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/EventBox.tsx
@@ -41,6 +41,7 @@ export const EventBox = ({ event, msgIndex }: EventBoxProps) => {
           <ExplorerLink
             type={addrType}
             value={value}
+            fixedHeight={false}
             showCopyOnHover
             textFormat="normal"
             maxWidth="full"
@@ -56,6 +57,7 @@ export const EventBox = ({ event, msgIndex }: EventBoxProps) => {
             value={value}
             showCopyOnHover
             textFormat="normal"
+            fixedHeight={false}
             maxWidth="full"
             ampCopierSection="tx_page_event_logs"
           />
@@ -68,6 +70,7 @@ export const EventBox = ({ event, msgIndex }: EventBoxProps) => {
             value={value}
             showCopyOnHover
             textFormat="normal"
+            fixedHeight={false}
             maxWidth="full"
             ampCopierSection="tx_page_event_logs"
           />

From 84033e48804437c320ebedf491a04ad410f9c8f9 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 11 Jul 2023 15:40:00 +0700
Subject: [PATCH 346/354] fix: rewrite useTxsCountByAddress props

rewrite useTxsCountByAddress props
---
 src/lib/model/account.ts                      | 12 +++++------
 src/lib/model/contract.ts                     | 14 ++++++-------
 .../components/tables/txs/TxsTable.tsx        |  8 ++++++-
 src/lib/pages/past-txs/index.tsx              | 12 +++++------
 src/lib/services/txService.ts                 | 21 ++++++++++++-------
 5 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/src/lib/model/account.ts b/src/lib/model/account.ts
index 7cd70f783..c9694b717 100644
--- a/src/lib/model/account.ts
+++ b/src/lib/model/account.ts
@@ -26,13 +26,13 @@ export const useAccountDetailsTableCounts = (
     useInstantiatedCountByUserQuery(walletAddress);
   const { data: proposalsCount, refetch: refetchProposalsCount } =
     useProposalsCountByWalletAddress(walletAddress);
-  const { data: txsCount, isFetching: txCountFetching } = useTxsCountByAddress(
-    undefined,
+  const { data: txsCount, isFetching: txCountFetching } = useTxsCountByAddress({
+    address: undefined,
     accountId,
-    "",
-    DEFAULT_TX_FILTERS,
-    undefined
-  );
+    search: "",
+    filters: DEFAULT_TX_FILTERS,
+    isSigner: undefined,
+  });
 
   const { totalData: assetsCount } = useUserAssetInfos(walletAddress);
 
diff --git a/src/lib/model/contract.ts b/src/lib/model/contract.ts
index e90abe834..cf06e4a1b 100644
--- a/src/lib/model/contract.ts
+++ b/src/lib/model/contract.ts
@@ -188,13 +188,13 @@ export const useContractDetailsTableCounts = (
   const { data: migrationCount, refetch: refetchMigration } =
     useMigrationHistoriesCountByContractAddress(contractAddress);
   const { data: transactionsCount, refetch: refetchTransactions } =
-    useTxsCountByAddress(
-      contractAddress,
-      undefined,
-      "",
-      DEFAULT_TX_FILTERS,
-      undefined
-    );
+    useTxsCountByAddress({
+      address: contractAddress,
+      accountId: undefined,
+      search: "",
+      filters: DEFAULT_TX_FILTERS,
+      isSigner: undefined,
+    });
   const { data: relatedProposalsCount, refetch: refetchRelatedProposals } =
     useRelatedProposalsCountByContractAddress(contractAddress);
 
diff --git a/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx b/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx
index 2a65d1e72..71658bf07 100644
--- a/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx
+++ b/src/lib/pages/account-details/components/tables/txs/TxsTable.tsx
@@ -78,7 +78,13 @@ export const TxsTable = ({
     refetch: refetchTxsCount,
     isLoading: txsCountLoading,
     failureReason,
-  } = useTxsCountByAddress(undefined, accountId, "", filters, isSigner);
+  } = useTxsCountByAddress({
+    address: undefined,
+    accountId,
+    search: "",
+    filters,
+    isSigner,
+  });
 
   const {
     pagesQuantity,
diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx
index 2b5746765..d0ce60d2f 100644
--- a/src/lib/pages/past-txs/index.tsx
+++ b/src/lib/pages/past-txs/index.tsx
@@ -52,13 +52,13 @@ const PastTxs = () => {
   const pastTxsState = watch();
 
   const { data: accountId } = useAccountId(address as HumanAddr);
-  const { data: countTxs = 0 } = useTxsCountByAddress(
-    undefined,
+  const { data: countTxs = 0 } = useTxsCountByAddress({
+    address: undefined,
     accountId,
-    pastTxsState.search,
-    pastTxsState.filters,
-    pastTxsState.isSigner
-  );
+    search: pastTxsState.search,
+    filters: pastTxsState.filters,
+    isSigner: pastTxsState.isSigner,
+  });
 
   const {
     pagesQuantity,
diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index 4fb741b41..06252d4e0 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -155,13 +155,19 @@ export const useTxsByAddressPagination = (
   );
 };
 
-export const useTxsCountByAddress = (
-  address: Option<Addr>,
-  accountId: Option<number | null>,
-  search: string,
-  filters: TxFilters,
-  isSigner: Option<boolean>
-): UseQueryResult<Option<number>> => {
+export const useTxsCountByAddress = ({
+  address,
+  accountId,
+  search,
+  filters,
+  isSigner,
+}: {
+  address: Option<Addr>;
+  accountId: Option<number | null>;
+  search: string;
+  filters: TxFilters;
+  isSigner: Option<boolean>;
+}): UseQueryResult<Option<number>> => {
   const { indexerGraphClient } = useCelatoneApp();
   const expression = useTxExpression({
     address,
@@ -194,7 +200,6 @@ export const useTxsCountByAddress = (
     ],
     queryFn,
     {
-      enabled: !!address || accountId !== undefined,
       retry: 0,
       refetchOnWindowFocus: false,
     }

From 1a1af600862f557cd1f53b8d50b52dbc6b4e352e Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 11 Jul 2023 16:23:09 +0700
Subject: [PATCH 347/354] fix: add enable tx count on account detail

---
 src/lib/services/txService.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/services/txService.ts b/src/lib/services/txService.ts
index 06252d4e0..74b1f95db 100644
--- a/src/lib/services/txService.ts
+++ b/src/lib/services/txService.ts
@@ -200,6 +200,7 @@ export const useTxsCountByAddress = ({
     ],
     queryFn,
     {
+      enabled: !!address || accountId !== undefined,
       retry: 0,
       refetchOnWindowFocus: false,
     }

From ffa8fe4c640a87824ec0344022884e6285f14b50 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 11 Jul 2023 17:46:18 +0700
Subject: [PATCH 348/354] fix: layout, icon, key components

---
 src/lib/components/icon/CustomIcon.tsx |  4 +---
 src/lib/layout/index.tsx               | 13 ++++++++++---
 src/lib/pages/codes/index.tsx          |  2 +-
 src/lib/pages/contracts/index.tsx      |  5 ++++-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/icon/CustomIcon.tsx b/src/lib/components/icon/CustomIcon.tsx
index 6f2e54325..8407221da 100644
--- a/src/lib/components/icon/CustomIcon.tsx
+++ b/src/lib/components/icon/CustomIcon.tsx
@@ -1168,9 +1168,7 @@ export const ICONS = {
   reddit: {
     svg: (
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.0861 6.95191C11.2905 6.74747 11.5687 6.61679 11.8849 6.61679C13.0504 6.61679 13.4383 8.17859 12.3865 8.71815C12.4329 8.88466 12.4519 9.07014 12.4519 9.24718C12.4519 11.0134 10.4622 12.4445 8.00886 12.4445C5.56605 12.4445 3.57639 11.0134 3.57639 9.24718C3.57639 9.07014 3.59325 8.89309 3.63119 8.72658C2.55838 8.18912 2.94198 6.61679 4.11385 6.61679C4.43001 6.61679 4.71876 6.74747 4.9232 6.96034C5.67776 6.43974 6.68102 6.10462 7.79598 6.05825L8.43672 3.15808C8.46412 3.0548 8.56529 2.98103 8.66856 3.00843L10.7214 3.46369C10.8606 3.19601 11.1409 3 11.4655 3C11.9313 3 12.3022 3.38149 12.3022 3.83675C12.3022 4.29201 11.9292 4.6735 11.4655 4.6735C11.0102 4.6735 10.6393 4.30255 10.6393 3.84729L8.78027 3.42997L8.19644 6.06036C9.31984 6.09619 10.3336 6.43131 11.0861 6.95191ZM6.16885 8.00154C5.70305 8.00154 5.3321 8.3746 5.3321 8.83829C5.3321 9.29355 5.70516 9.66661 6.16885 9.66451C6.62411 9.66451 6.99506 9.29355 6.99506 8.83829C6.99506 8.37249 6.62411 8.00154 6.16885 8.00154ZM6.14988 10.809C6.91708 11.5762 9.08167 11.5762 9.84887 10.809C9.93318 10.7352 9.93318 10.6045 9.84676 10.5202C9.77299 10.4465 9.64231 10.4465 9.56855 10.5202C8.95732 11.1315 7.01403 11.1209 6.42809 10.5202C6.35432 10.4465 6.22365 10.4465 6.14988 10.5202C6.06557 10.6045 6.06557 10.7352 6.14988 10.809ZM9.00579 8.8404C9.00579 9.29566 9.37675 9.66661 9.83201 9.66661C10.2957 9.66661 10.6666 9.29355 10.6688 8.8404C10.6688 8.3746 10.2957 8.00365 9.83201 8.00365C9.37675 8.00365 9.00579 8.37671 9.00579 8.8404Z"
+        d="M13.4388 6.06351C12.9962 6.06351 12.6067 6.24645 12.3205 6.53268C11.2671 5.80384 9.84777 5.33467 8.27502 5.28451L9.09238 1.60196L11.695 2.18621C11.695 2.82357 12.2143 3.3429 12.8516 3.3429C13.5008 3.3429 14.0231 2.80882 14.0231 2.17145C14.0231 1.53409 13.5038 1 12.8516 1C12.3972 1 12.0048 1.27442 11.81 1.64917L8.93599 1.0118C8.7914 0.973443 8.64976 1.07672 8.6114 1.22131L7.71437 5.28155C6.15342 5.34647 4.74886 5.81564 3.69249 6.54448C3.40626 6.24645 3.00201 6.06351 2.55939 6.06351C0.918771 6.06351 0.381732 8.26477 1.88367 9.01722C1.83056 9.25033 1.80695 9.49819 1.80695 9.74606C1.80695 12.2188 4.59247 14.2224 8.0124 14.2224C11.4471 14.2224 14.2326 12.2188 14.2326 9.74606C14.2326 9.49819 14.206 9.23853 14.1411 9.00541C15.6136 8.25002 15.0706 6.06351 13.4388 6.06351ZM4.26493 9.17361C4.26493 8.52444 4.78427 8.00216 5.43639 8.00216C6.07375 8.00216 6.59308 8.52149 6.59308 9.17361C6.59308 9.81097 6.07375 10.3303 5.43639 10.3303C4.78722 10.3333 4.26493 9.81097 4.26493 9.17361ZM10.5884 11.9326C9.51434 13.0066 6.48391 13.0066 5.40983 11.9326C5.2918 11.8293 5.2918 11.6463 5.40983 11.5283C5.51311 11.425 5.69605 11.425 5.79933 11.5283C6.61964 12.3693 9.34024 12.384 10.196 11.5283C10.2992 11.425 10.4822 11.425 10.5855 11.5283C10.7064 11.6463 10.7064 11.8293 10.5884 11.9326ZM10.5648 10.3333C9.92744 10.3333 9.40811 9.81392 9.40811 9.17656C9.40811 8.52739 9.92744 8.00511 10.5648 8.00511C11.214 8.00511 11.7363 8.52444 11.7363 9.17656C11.7333 9.81097 11.214 10.3333 10.5648 10.3333Z"
         fill="currentColor"
       />
     ),
diff --git a/src/lib/layout/index.tsx b/src/lib/layout/index.tsx
index e18388e95..6f1f1b0de 100644
--- a/src/lib/layout/index.tsx
+++ b/src/lib/layout/index.tsx
@@ -104,19 +104,26 @@ const Layout = ({ children }: LayoutProps) => {
             bg={{ base: "background.main", md: "gray.900" }}
             area="subheader"
             mb="1"
-            overflowY={isMobile ? "visible" : "auto"}
             py={{ base: 2, md: 0 }}
             px={{ base: 4, md: 0 }}
           >
             {mode.subHeader}
           </GridItem>
-          <GridItem bg={{ base: "background.main", md: "gray.900" }} area="nav">
+          <GridItem
+            bg={{ base: "background.main", md: "gray.900" }}
+            area="nav"
+            overflowY="auto"
+          >
             <Navbar isExpand={isExpand} setIsExpand={setIsExpand} />
           </GridItem>
         </>
       )}
       <GridItem area="main" overflowX="hidden" id="content">
-        <div style={{ minHeight: `calc(100vh - 129px)` }}>{children}</div>
+        <div
+          style={{ minHeight: `calc(100vh - ${hasSubHeader ? 129 : 66}px)` }}
+        >
+          {children}
+        </div>
         <Footer />
       </GridItem>
     </Grid>
diff --git a/src/lib/pages/codes/index.tsx b/src/lib/pages/codes/index.tsx
index 9ef742ee8..ec67d18c5 100644
--- a/src/lib/pages/codes/index.tsx
+++ b/src/lib/pages/codes/index.tsx
@@ -65,7 +65,7 @@ const RecentCodes = observer(() => {
     return (
       <Flex direction="column" gap={4} w="full" mt={4}>
         {recentCodes.map((code) => (
-          <StoredCodeCard codeInfo={code} />
+          <StoredCodeCard codeInfo={code} key={code.uploader + code.id} />
         ))}
       </Flex>
     );
diff --git a/src/lib/pages/contracts/index.tsx b/src/lib/pages/contracts/index.tsx
index 54c598020..074a8fd31 100644
--- a/src/lib/pages/contracts/index.tsx
+++ b/src/lib/pages/contracts/index.tsx
@@ -40,7 +40,10 @@ const RecentContracts = observer(() => {
     return (
       <Flex direction="column" gap={4} w="full" mt={4}>
         {recentContracts.map((contract) => (
-          <InstantiatedContractCard contractInfo={contract} />
+          <InstantiatedContractCard
+            contractInfo={contract}
+            key={contract.contractAddress}
+          />
         ))}
       </Flex>
     );

From 5141277d16841f13b2c77372c14f279be990db69 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 11 Jul 2023 18:18:50 +0700
Subject: [PATCH 349/354] fix(components): fix accordion

---
 src/lib/components/StickySidebar.tsx          | 10 +++-
 .../components/mobile/MobileLabel.tsx         |  7 ++-
 src/lib/styles/theme/components/accordion.ts  | 51 ++++++++++++++-----
 3 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/StickySidebar.tsx b/src/lib/components/StickySidebar.tsx
index 57225b8df..732654c3b 100644
--- a/src/lib/components/StickySidebar.tsx
+++ b/src/lib/components/StickySidebar.tsx
@@ -66,11 +66,16 @@ export const StickySidebar = ({
   return (
     <Box flex="4" px={8} position="relative" {...boxProps}>
       <Flex position="fixed" width="full">
-        <Accordion allowToggle width={96} defaultIndex={[0]}>
+        <Accordion
+          allowToggle
+          width={96}
+          defaultIndex={[0]}
+          variant="transparent"
+        >
           <AccordionItem borderTop="none" borderColor="gray.700">
             <AccordionButton py={3} px={0}>
               <Text
-                variant="body2"
+                variant="body1"
                 fontWeight={700}
                 color="text.main"
                 textAlign="start"
@@ -80,6 +85,7 @@ export const StickySidebar = ({
               <AccordionIcon color="gray.600" ml="auto" />
             </AccordionButton>
             <AccordionPanel
+              bg="transparent"
               py={3}
               px={0}
               borderTop="1px solid"
diff --git a/src/lib/pages/account-details/components/mobile/MobileLabel.tsx b/src/lib/pages/account-details/components/mobile/MobileLabel.tsx
index b001e353b..bf44613cc 100644
--- a/src/lib/pages/account-details/components/mobile/MobileLabel.tsx
+++ b/src/lib/pages/account-details/components/mobile/MobileLabel.tsx
@@ -12,7 +12,12 @@ export const MobileLabel = ({
   variant = "body3",
 }: MobileLabelProps) => {
   return (
-    <Text color="text.dark" variant={variant} fontWeight={fontWeight}>
+    <Text
+      color="text.dark"
+      variant={variant}
+      fontWeight={fontWeight}
+      textTransform="capitalize"
+    >
       {label}
     </Text>
   );
diff --git a/src/lib/styles/theme/components/accordion.ts b/src/lib/styles/theme/components/accordion.ts
index 4071013fc..7076deb97 100644
--- a/src/lib/styles/theme/components/accordion.ts
+++ b/src/lib/styles/theme/components/accordion.ts
@@ -1,6 +1,35 @@
-import type { ComponentStyleConfig } from "@chakra-ui/react";
+import { accordionAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 
-export const Accordion: ComponentStyleConfig = {
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(accordionAnatomy.keys);
+
+const gray900 = definePartsStyle({
+  container: {
+    bg: "gray.900",
+    borderRadius: "8px",
+    hover: {
+      bg: "gray.800",
+    },
+  },
+  panel: {
+    borderRadius: "0px 8px 8px 0px",
+  },
+});
+const transparent = definePartsStyle({
+  container: {
+    bg: "transparent",
+    borderRadius: "0px",
+    hover: {
+      bg: "gray.900",
+    },
+  },
+  button: { padding: "12px 0px" },
+  panel: {
+    borderRadius: "0px",
+  },
+});
+export const Accordion = defineMultiStyleConfig({
   baseStyle: {
     button: {
       p: "0",
@@ -8,15 +37,13 @@ export const Accordion: ComponentStyleConfig = {
     container: {
       borderWidth: "0",
       borderColor: "transparent",
-      p: 0,
-      bg: "gray.900",
-      hover: {
-        bg: "gray.800",
-      },
-      borderRadius: "8px",
-    },
-    panel: {
-      borderRadius: "0px 8px 8px 0px",
     },
   },
-};
+  variants: {
+    gray900,
+    transparent,
+  },
+  defaultProps: {
+    variant: "gray900",
+  },
+});

From 34ada9041b4d2be038c803629f89fc01d4e86093 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 11 Jul 2023 18:23:11 +0700
Subject: [PATCH 350/354] fix(components): fix placeholder

---
 src/lib/pages/public-project/components/AllProject.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/public-project/components/AllProject.tsx b/src/lib/pages/public-project/components/AllProject.tsx
index 8fbdc19c2..0c7e1b107 100644
--- a/src/lib/pages/public-project/components/AllProject.tsx
+++ b/src/lib/pages/public-project/components/AllProject.tsx
@@ -72,7 +72,7 @@ export const AllProject = observer(() => {
         value={searchKeyword}
         setInputState={setSearchKeyword}
         labelBgColor="background"
-        placeholder="Search for existing public projects by project name"
+        placeholder="Search for Existing Public Projects by Project Name"
         size={{ base: "md", md: "lg" }}
         mb={{ base: 6, md: 12 }}
       />

From 42cae326a861224c627be6de33a7aec7b98efddb Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 11 Jul 2023 18:36:29 +0700
Subject: [PATCH 351/354] fix: hour duration, default case

---
 src/lib/utils/date.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/utils/date.ts b/src/lib/utils/date.ts
index 04db645a7..d5310267d 100644
--- a/src/lib/utils/date.ts
+++ b/src/lib/utils/date.ts
@@ -55,10 +55,11 @@ export const formatSeconds = (sec: Option<string>) => {
 export const formatDuration = (duration: string | number) => {
   if (typeof duration === "number" || Number.isInteger(duration))
     return formatSeconds(big(duration).div(1e9).toFixed());
+
   let value = big(duration.slice(0, -1));
   switch (true) {
     case duration.endsWith("h"):
-      value = value.mul(360);
+      value = value.mul(3600);
       break;
     case duration.endsWith("m"):
       value = value.mul(60);
@@ -66,7 +67,7 @@ export const formatDuration = (duration: string | number) => {
     case duration.endsWith("s"):
       break;
     default:
-      break;
+      return "N/A";
   }
   return formatSeconds(value.toFixed());
 };

From aa5afcaf0e4e7b76e8a268fcab5bbf990268488c Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 11 Jul 2023 18:53:07 +0700
Subject: [PATCH 352/354] fix: z-index of search bar

---
 src/lib/layout/Searchbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx
index 154d4cc5c..5b2af0e96 100644
--- a/src/lib/layout/Searchbar.tsx
+++ b/src/lib/layout/Searchbar.tsx
@@ -337,7 +337,7 @@ const Searchbar = () => {
       </Drawer>
     </>
   ) : (
-    <FormControl ref={boxRef}>
+    <FormControl ref={boxRef} zIndex={3}>
       <InputGroup>
         <Input
           value={keyword}

From 945c0644a711e15c1f970d14858eba45b3c26936 Mon Sep 17 00:00:00 2001
From: Kanisorn Peach <kanisorn.peach@gmail.com>
Date: Wed, 12 Jul 2023 10:51:01 +0700
Subject: [PATCH 353/354] Merge pull request #434 from
 alleslabs/fix/stepper-color

fix: stepper item bg color
---
 CHANGELOG.md                               | 1 +
 src/lib/components/stepper/StepperItem.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 10bbe521e..3c251f580 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -111,6 +111,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#434](https://github.com/alleslabs/celatone-frontend/pull/434) Fix stepper item bg color
 - [#429](https://github.com/alleslabs/celatone-frontend/pull/429) Fix duration formatter, type and add migrate tab to balancer pool
 - [#427](https://github.com/alleslabs/celatone-frontend/pull/427) Fix upload access endpoint, Public project searchbar bug, account tx bug
 - [#425](https://github.com/alleslabs/celatone-frontend/pull/425) Fix reset past tx filter state and permission alert on migration page
diff --git a/src/lib/components/stepper/StepperItem.tsx b/src/lib/components/stepper/StepperItem.tsx
index 4c337e972..e6ab67010 100644
--- a/src/lib/components/stepper/StepperItem.tsx
+++ b/src/lib/components/stepper/StepperItem.tsx
@@ -21,7 +21,7 @@ const StepLabel = ({
   <Flex
     justify="center"
     align="center"
-    backgroundColor={disabled ? "text.disabled" : "accent.main"}
+    backgroundColor={disabled ? "text.disabled" : "primary.main"}
     width="24px"
     height="24px"
     borderRadius="50%"

From bfdf4871480a95b1a8a9d550151e59c16cd328e8 Mon Sep 17 00:00:00 2001
From: bkioshn <35752733+bkioshn@users.noreply.github.com>
Date: Wed, 12 Jul 2023 11:51:55 +0700
Subject: [PATCH 354/354] Merge pull request #410 from
 alleslabs/fix/attach-fund-precision

fix: remove hardcode precision in attach funds
---
 CHANGELOG.md                                  |  1 +
 README.md                                     |  3 ++
 src/lib/app-provider/hooks/index.ts           |  2 -
 src/lib/app-provider/hooks/useAttachFunds.ts  | 40 +++++++++++++++++++
 src/lib/app-provider/hooks/useBaseApiRoute.ts |  3 ++
 .../app-provider/hooks/useChainRecordAsset.ts | 38 ------------------
 src/lib/app-provider/hooks/useTokensInfo.ts   | 11 -----
 src/lib/components/EstimatedFeeRender.tsx     |  9 +++--
 src/lib/components/fund/selectFund.tsx        | 17 +++++---
 src/lib/data/constant.ts                      |  2 -
 .../pages/execute/components/ExecuteArea.tsx  | 32 +++++++--------
 src/lib/pages/instantiate/instantiate.tsx     | 27 +++++--------
 .../pages/proposal/components/AssetBox.tsx    | 14 +++----
 src/lib/services/asset.ts                     |  7 ++++
 src/lib/services/assetService.ts              | 24 ++++++++++-
 src/lib/services/faucetService.ts             |  9 +++--
 src/lib/services/proposalService.ts           | 15 +++----
 src/lib/utils/formatter/currency.ts           | 13 ------
 src/lib/utils/funds.ts                        | 22 ++++++----
 src/lib/utils/getAttachFunds.ts               | 33 ---------------
 src/lib/utils/index.ts                        |  1 -
 21 files changed, 148 insertions(+), 175 deletions(-)
 create mode 100644 src/lib/app-provider/hooks/useAttachFunds.ts
 delete mode 100644 src/lib/app-provider/hooks/useChainRecordAsset.ts
 delete mode 100644 src/lib/app-provider/hooks/useTokensInfo.ts
 delete mode 100644 src/lib/utils/getAttachFunds.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3c251f580..3d71df88c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -111,6 +111,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#410](https://github.com/alleslabs/celatone-frontend/pull/410) Remove hardcode precision in attach funds dropdown selection and get assets from API, delete microfy and demicrofy function, remove useChainRecordAsset
 - [#434](https://github.com/alleslabs/celatone-frontend/pull/434) Fix stepper item bg color
 - [#429](https://github.com/alleslabs/celatone-frontend/pull/429) Fix duration formatter, type and add migrate tab to balancer pool
 - [#427](https://github.com/alleslabs/celatone-frontend/pull/427) Fix upload access endpoint, Public project searchbar bug, account tx bug
diff --git a/README.md b/README.md
index 2adff71d6..70eea40d1 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,9 @@ The Celatone frontend uses the following technologies:
 
 1. [Node.js](https://nodejs.org/en/) (version >= 16) or using node version manager [nvm](https://github.com/nvm-sh/nvm#intro) (recommended, installation guide for nvm [here](https://collabnix.com/how-to-install-and-configure-nvm-on-mac-os/)).
 2. [`Yarn`](https://yarnpkg.com/getting-started/install) installed.
+```bash
+npm install -g yarn
+```
 
 ### Develop
 
diff --git a/src/lib/app-provider/hooks/index.ts b/src/lib/app-provider/hooks/index.ts
index 440865dd7..9f5478234 100644
--- a/src/lib/app-provider/hooks/index.ts
+++ b/src/lib/app-provider/hooks/index.ts
@@ -8,8 +8,6 @@ export * from "./useMediaQuery";
 export * from "./useNetworkChange";
 export * from "./useRestrictedInput";
 export * from "./useSelectChain";
-export * from "./useTokensInfo";
-export * from "./useChainRecordAsset";
 export * from "./useBaseApiRoute";
 export * from "./useRPCEndpoint";
 export * from "./useConfig";
diff --git a/src/lib/app-provider/hooks/useAttachFunds.ts b/src/lib/app-provider/hooks/useAttachFunds.ts
new file mode 100644
index 000000000..248c68a2f
--- /dev/null
+++ b/src/lib/app-provider/hooks/useAttachFunds.ts
@@ -0,0 +1,40 @@
+import type { Coin } from "@cosmjs/stargate";
+import { useCallback } from "react";
+
+import { AttachFundsType } from "lib/components/fund/types";
+import { useAssetInfos } from "lib/services/assetService";
+import { fabricateFunds, sortDenoms } from "lib/utils";
+
+export const useAttachFunds = () => {
+  const { assetInfos } = useAssetInfos();
+
+  return useCallback(
+    (
+      attachFundsOption: AttachFundsType,
+      assetsJsonStr: string,
+      assetsSelect: Coin[]
+    ) => {
+      const assetsSelectWithPrecision = assetsSelect.map((coin) => {
+        return {
+          ...coin,
+          precision: assetInfos?.[coin.denom]?.precision,
+        };
+      });
+
+      switch (attachFundsOption) {
+        case AttachFundsType.ATTACH_FUNDS_SELECT:
+          return fabricateFunds(assetsSelectWithPrecision);
+        case AttachFundsType.ATTACH_FUNDS_JSON:
+          try {
+            return sortDenoms(JSON.parse(assetsJsonStr));
+          } catch {
+            return [];
+          }
+        default:
+          return [];
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(assetInfos)]
+  );
+};
diff --git a/src/lib/app-provider/hooks/useBaseApiRoute.ts b/src/lib/app-provider/hooks/useBaseApiRoute.ts
index bf0a81686..95d877f96 100644
--- a/src/lib/app-provider/hooks/useBaseApiRoute.ts
+++ b/src/lib/app-provider/hooks/useBaseApiRoute.ts
@@ -11,6 +11,7 @@ export const useBaseApiRoute = (
     | "codes"
     | "accounts"
     | "rest"
+    | "native_tokens"
     | "cosmwasm"
 ): string => {
   const {
@@ -42,6 +43,8 @@ export const useBaseApiRoute = (
       return `${api}/accounts/${chain}/${currentChainId}`;
     case "rest":
       return `${api}/rest/${chain}/${currentChainId}`;
+    case "native_tokens":
+      return `${api}/native-assets/${chain}/${currentChainId}`;
     case "cosmwasm":
       return `${api}/cosmwasm/${chain}/${currentChainId}`;
     default:
diff --git a/src/lib/app-provider/hooks/useChainRecordAsset.ts b/src/lib/app-provider/hooks/useChainRecordAsset.ts
deleted file mode 100644
index cb831cad7..000000000
--- a/src/lib/app-provider/hooks/useChainRecordAsset.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { Asset } from "@chain-registry/types";
-import { useCallback } from "react";
-
-import type { SnakeToCamelCaseNested } from "lib/types";
-import { snakeToCamel } from "lib/utils";
-
-import { useCurrentChain } from "./useCurrentChain";
-
-interface ChainRecordAsset extends Asset {
-  precision: number;
-}
-
-type InternalChainRecordAsset = SnakeToCamelCaseNested<ChainRecordAsset>;
-
-export const useChainRecordAsset = () => {
-  const { assets } = useCurrentChain();
-
-  return useCallback(
-    (denom: string): InternalChainRecordAsset | null => {
-      const assetInfo = assets?.assets.find((asset) => asset.base === denom);
-      return assetInfo
-        ? (snakeToCamel({
-            ...assetInfo,
-            precision:
-              assetInfo?.denom_units.find(
-                (unit) =>
-                  /**
-                   * @remarks Might have to revisit this logic later. Edge case is when only uToken config is supplied (no token counterpart)
-                   */
-                  unit.denom ===
-                  (denom[0] === "u" ? denom.slice(1) : "u".concat(denom))
-              )?.exponent ?? 0,
-          }) as InternalChainRecordAsset)
-        : null;
-    },
-    [assets]
-  );
-};
diff --git a/src/lib/app-provider/hooks/useTokensInfo.ts b/src/lib/app-provider/hooks/useTokensInfo.ts
deleted file mode 100644
index 47af749a3..000000000
--- a/src/lib/app-provider/hooks/useTokensInfo.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useMemo } from "react";
-
-import { useCurrentChain } from "./useCurrentChain";
-
-export const useNativeTokensInfo = () => {
-  const { assets } = useCurrentChain();
-  return useMemo(
-    () => assets?.assets.filter((asset) => !asset.base.includes("cw20")) ?? [],
-    [assets]
-  );
-};
diff --git a/src/lib/components/EstimatedFeeRender.tsx b/src/lib/components/EstimatedFeeRender.tsx
index 06285cc68..edcea89eb 100644
--- a/src/lib/components/EstimatedFeeRender.tsx
+++ b/src/lib/components/EstimatedFeeRender.tsx
@@ -1,7 +1,7 @@
 import { Spinner } from "@chakra-ui/react";
 import type { StdFee } from "@cosmjs/stargate";
 
-import { useChainRecordAsset } from "lib/app-provider";
+import { useAssetInfos } from "lib/services/assetService";
 import { formatBalanceWithDenom } from "lib/utils";
 
 export const EstimatedFeeRender = ({
@@ -11,8 +11,8 @@ export const EstimatedFeeRender = ({
   estimatedFee: StdFee | undefined;
   loading: boolean;
 }) => {
-  const getAssetInfo = useChainRecordAsset();
-  if (loading) {
+  const { assetInfos, isLoading } = useAssetInfos();
+  if (loading || isLoading) {
     return (
       <>
         <Spinner size="sm" mx={1} /> Estimating ...
@@ -23,7 +23,8 @@ export const EstimatedFeeRender = ({
 
   if (!coin) return <>--</>;
 
-  const chainAssetInfo = getAssetInfo(coin.denom);
+  const chainAssetInfo = assetInfos?.[coin.denom];
+
   return (
     <>
       {formatBalanceWithDenom({
diff --git a/src/lib/components/fund/selectFund.tsx b/src/lib/components/fund/selectFund.tsx
index 510a7e111..dc7979d41 100644
--- a/src/lib/components/fund/selectFund.tsx
+++ b/src/lib/components/fund/selectFund.tsx
@@ -4,8 +4,8 @@ import { useMemo } from "react";
 import type { Control, UseFormSetValue } from "react-hook-form";
 import { useFieldArray } from "react-hook-form";
 
-import { useNativeTokensInfo } from "lib/app-provider";
 import { AssetInput, ControllerInput } from "lib/components/forms";
+import { useAssetInfoList } from "lib/services/assetService";
 
 import { ASSETS_SELECT } from "./data";
 import type { AttachFundsState } from "./types";
@@ -15,12 +15,16 @@ interface SelectFundProps {
   setValue: UseFormSetValue<AttachFundsState>;
   assetsSelect: Coin[];
 }
+
+/**
+ * @remarks amount in assetsSelect is an amount before multiplying precision, the multiplication will be done before sending transaction
+ */
 export const SelectFund = ({
   control,
   setValue,
   assetsSelect,
 }: SelectFundProps) => {
-  const nativeTokensInfo = useNativeTokensInfo();
+  const { data: assetInfos = [] } = useAssetInfoList();
   const { fields, append, remove } = useFieldArray({
     control,
     name: ASSETS_SELECT,
@@ -30,12 +34,12 @@ export const SelectFund = ({
 
   const assetOptions = useMemo(
     () =>
-      nativeTokensInfo.map((asset) => ({
+      assetInfos.map((asset) => ({
         label: asset.symbol,
-        value: asset.base,
-        disabled: selectedAssets.includes(asset.base),
+        value: asset.id,
+        disabled: selectedAssets.includes(asset.id),
       })),
-    [nativeTokensInfo, selectedAssets]
+    [assetInfos, selectedAssets]
   );
 
   const rules = {
@@ -72,6 +76,7 @@ export const SelectFund = ({
       <Button
         variant="outline-primary"
         mt={8}
+        mb={5}
         mx="auto"
         onClick={() => append({ denom: "", amount: "" })}
         disabled={assetOptions.length === selectedAssets.length}
diff --git a/src/lib/data/constant.ts b/src/lib/data/constant.ts
index ef65d5dcd..44e3073b2 100644
--- a/src/lib/data/constant.ts
+++ b/src/lib/data/constant.ts
@@ -21,8 +21,6 @@ export const DEFAULT_LIST: LVPair[] = [
 
 export const DEFAULT_ADDRESS = "default-address";
 
-export const MICRO = 1_000_000;
-
 export const typeUrlDict = {
   [MsgType.STORE_CODE]: "/cosmwasm.wasm.v1.MsgStoreCode",
   [MsgType.INSTANTIATE]: "/cosmwasm.wasm.v1.MsgInstantiateContract",
diff --git a/src/lib/pages/execute/components/ExecuteArea.tsx b/src/lib/pages/execute/components/ExecuteArea.tsx
index f316f2e6f..37353c0a6 100644
--- a/src/lib/pages/execute/components/ExecuteArea.tsx
+++ b/src/lib/pages/execute/components/ExecuteArea.tsx
@@ -10,6 +10,7 @@ import {
   useCurrentChain,
   useMobile,
 } from "lib/app-provider";
+import { useAttachFunds } from "lib/app-provider/hooks/useAttachFunds";
 import { useSimulateFeeQuery } from "lib/app-provider/queries";
 import { ContractCmdButton } from "lib/components/ContractCmdButton";
 import { CopyButton } from "lib/components/copy";
@@ -32,12 +33,7 @@ import { AmpEvent, AmpTrack, AmpTrackAction } from "lib/services/amplitude";
 import type { Activity } from "lib/stores/contract";
 import type { ComposedMsg, ContractAddr, HumanAddr } from "lib/types";
 import { MsgType } from "lib/types";
-import {
-  composeMsg,
-  getAttachFunds,
-  jsonPrettify,
-  jsonValidate,
-} from "lib/utils";
+import { composeMsg, jsonPrettify, jsonValidate } from "lib/utils";
 
 const CodeSnippet = dynamic(() => import("lib/components/modal/CodeSnippet"), {
   ssr: false,
@@ -67,6 +63,7 @@ export const ExecuteArea = ({
   const executeTx = useExecuteContractTx();
   const { broadcast } = useTxBroadcast();
   const { addActivity } = useContractStore();
+  const getAttachFunds = useAttachFunds();
   const [fee, setFee] = useState<StdFee>();
   const [msg, setMsg] = useState(initialMsg);
 
@@ -142,13 +139,12 @@ export const ExecuteArea = ({
     },
   });
 
-  const funds = getAttachFunds({
-    attachFundsOption,
-    assetsJsonStr,
-    assetsSelect,
-  });
-
   const proceed = useCallback(async () => {
+    const funds = getAttachFunds(
+      attachFundsOption,
+      assetsJsonStr,
+      assetsSelect
+    );
     AmpTrackAction(AmpEvent.ACTION_EXECUTE, funds.length, attachFundsOption);
     const stream = await executeTx({
       onTxSucceed: (userKey: string, activity: Activity) => {
@@ -166,12 +162,14 @@ export const ExecuteArea = ({
       broadcast(stream);
     }
   }, [
-    funds,
+    attachFundsOption,
     executeTx,
     fee,
     contractAddress,
     msg,
-    attachFundsOption,
+    getAttachFunds,
+    assetsJsonStr,
+    assetsSelect,
     addActivity,
     broadcast,
   ]);
@@ -185,7 +183,7 @@ export const ExecuteArea = ({
         sender: address as HumanAddr,
         contract: contractAddress as ContractAddr,
         msg: Buffer.from(msg),
-        funds,
+        funds: getAttachFunds(attachFundsOption, assetsJsonStr, assetsSelect),
       });
 
       const timeoutId = setTimeout(() => {
@@ -199,9 +197,11 @@ export const ExecuteArea = ({
     contractAddress,
     enableExecute,
     msg,
-    funds,
     assetsJsonStr,
     assetsSelectString,
+    getAttachFunds,
+    attachFundsOption,
+    assetsSelect,
   ]);
 
   useEffect(() => {
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index 4ae5359ec..72105ade2 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -16,6 +16,7 @@ import {
   useCurrentChain,
   useBaseApiRoute,
 } from "lib/app-provider";
+import { useAttachFunds } from "lib/app-provider/hooks/useAttachFunds";
 import { AssignMe } from "lib/components/AssignMe";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
@@ -40,13 +41,7 @@ import {
 import { getCodeIdInfo } from "lib/services/code";
 import type { ComposedMsg, HumanAddr } from "lib/types";
 import { AccessConfigPermission, MsgType } from "lib/types";
-import {
-  composeMsg,
-  getAttachFunds,
-  jsonPrettify,
-  jsonValidate,
-  libDecode,
-} from "lib/utils";
+import { composeMsg, jsonPrettify, jsonValidate, libDecode } from "lib/utils";
 
 import { Footer } from "./component";
 import type { InstantiateRedoMsg } from "./types";
@@ -81,6 +76,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   const fabricateFee = useFabricateFee();
   const { broadcast } = useTxBroadcast();
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
+  const getAttachFunds = useAttachFunds();
 
   // ------------------------------------------//
   // ------------------STATES------------------//
@@ -123,6 +119,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   });
   const { assetsSelect, assetsJsonStr, attachFundsOption } = watchAssets();
 
+  const funds = getAttachFunds(attachFundsOption, assetsJsonStr, assetsSelect);
   const enableInstantiate = useMemo(
     () =>
       !!address &&
@@ -132,12 +129,6 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
     [address, codeId.length, initMsg, status.state]
   );
 
-  const funds = getAttachFunds({
-    attachFundsOption,
-    assetsJsonStr,
-    assetsSelect,
-  });
-
   const { isFetching: isSimulating } = useSimulateFeeQuery({
     enabled: composedTxMsg.length > 0,
     messages: composedTxMsg,
@@ -205,16 +196,16 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
       broadcast(stream);
     }
   }, [
-    adminAddress,
+    funds,
     attachFundsOption,
-    broadcast,
+    postInstantiateTx,
     codeId,
-    estimatedFee,
-    funds,
     initMsg,
     label,
+    adminAddress,
+    estimatedFee,
     onComplete,
-    postInstantiateTx,
+    broadcast,
   ]);
 
   // ------------------------------------------//
diff --git a/src/lib/pages/proposal/components/AssetBox.tsx b/src/lib/pages/proposal/components/AssetBox.tsx
index f55085782..a83ead045 100644
--- a/src/lib/pages/proposal/components/AssetBox.tsx
+++ b/src/lib/pages/proposal/components/AssetBox.tsx
@@ -1,7 +1,7 @@
 import { Box, chakra, Flex, Image, Text } from "@chakra-ui/react";
 
-import { useNativeTokensInfo } from "lib/app-provider";
 import { NAToken } from "lib/icon";
+import { useAssetInfos } from "lib/services/assetService";
 import type { Option } from "lib/types";
 
 const AssetLabel = chakra(Text, {
@@ -26,8 +26,9 @@ const AssetLabel = chakra(Text, {
 });
 
 export const AssetBox = ({ baseDenom }: { baseDenom: Option<string> }) => {
-  const nativeTokensInfo = useNativeTokensInfo();
-  const tokenInfo = nativeTokensInfo.find((asset) => asset.base === baseDenom);
+  const { assetInfos } = useAssetInfos();
+  const tokenInfo = baseDenom ? assetInfos?.[baseDenom] : undefined;
+
   return (
     <Box
       h="56px"
@@ -42,12 +43,7 @@ export const AssetBox = ({ baseDenom }: { baseDenom: Option<string> }) => {
     >
       <AssetLabel>Asset</AssetLabel>
       <Flex align="center" gap={1}>
-        <Image
-          h="24px"
-          w="24px"
-          src={tokenInfo?.logo_URIs?.png}
-          fallback={<NAToken />}
-        />
+        <Image h="24px" w="24px" src={tokenInfo?.logo} fallback={<NAToken />} />
         {tokenInfo?.symbol ?? "N/A"}
       </Flex>
     </Box>
diff --git a/src/lib/services/asset.ts b/src/lib/services/asset.ts
index d222cf2d6..f754c0574 100644
--- a/src/lib/services/asset.ts
+++ b/src/lib/services/asset.ts
@@ -17,3 +17,10 @@ export const getAssetInfos = async (
   const { data } = await axios.get<AssetInfo[]>(`${baseApiRoute}/prices`);
   return data;
 };
+
+export const getNativeAssetInfos = async (
+  baseApiRoute: string
+): Promise<AssetInfo[]> => {
+  const { data } = await axios.get<AssetInfo[]>(`${baseApiRoute}`);
+  return data;
+};
diff --git a/src/lib/services/assetService.ts b/src/lib/services/assetService.ts
index 9ff79d1b4..19b7f774f 100644
--- a/src/lib/services/assetService.ts
+++ b/src/lib/services/assetService.ts
@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 
 import { useBaseApiRoute } from "lib/app-provider";
-import { getAssetInfos } from "lib/services/asset";
+import { getAssetInfos, getNativeAssetInfos } from "lib/services/asset";
 import type { AssetInfo, Option } from "lib/types";
 
 export type AssetInfosOpt = Option<{ [key: string]: AssetInfo }>;
@@ -26,3 +26,25 @@ export const useAssetInfos = (): {
     isLoading,
   };
 };
+
+export const useAssetInfoList = () => {
+  const assetsApiRoute = useBaseApiRoute("assets");
+  return useQuery(
+    ["query", "assetInfosList", assetsApiRoute],
+    async () => getAssetInfos(assetsApiRoute),
+    { enabled: !!assetsApiRoute, retry: 1, refetchOnWindowFocus: false }
+  );
+};
+
+export const useNativeTokensInfo = () => {
+  const nativeTokensApiRoute = useBaseApiRoute("native_tokens");
+
+  return useQuery(
+    ["query", "nativeTokensInfo", nativeTokensApiRoute],
+    async () => getNativeAssetInfos(nativeTokensApiRoute),
+    {
+      enabled: !!nativeTokensApiRoute,
+      refetchOnWindowFocus: false,
+    }
+  );
+};
diff --git a/src/lib/services/faucetService.ts b/src/lib/services/faucetService.ts
index c0ffe64e8..84b139226 100644
--- a/src/lib/services/faucetService.ts
+++ b/src/lib/services/faucetService.ts
@@ -2,10 +2,11 @@ import type { UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import big from "big.js";
 
-import { useChainRecordAsset, useFaucetConfig } from "lib/app-provider";
+import { useFaucetConfig } from "lib/app-provider";
 import type { Token, U } from "lib/types";
 import { deexponentify, getTokenLabel } from "lib/utils";
 
+import { useAssetInfos } from "./assetService";
 import type { FaucetResponse } from "./faucet";
 import { queryFaucetInfo } from "./faucet";
 
@@ -16,10 +17,10 @@ interface FaucetInfo extends FaucetResponse {
 
 export const useFaucetInfo = (): UseQueryResult<FaucetInfo> => {
   const faucet = useFaucetConfig({ shouldRedirect: false });
-  const getAssetInfo = useChainRecordAsset();
+  const { assetInfos } = useAssetInfos();
   const queryFn = async (): Promise<FaucetInfo> => {
     const faucetInfo = await queryFaucetInfo(faucet.enabled ? faucet.url : "");
-    const assetInfo = getAssetInfo(faucetInfo.Denom);
+    const assetInfo = assetInfos?.[faucetInfo.Denom];
     const [formattedAmount, formattedDenom] = [
       deexponentify(
         big(faucetInfo.Amount).toFixed() as U<Token>,
@@ -31,7 +32,7 @@ export const useFaucetInfo = (): UseQueryResult<FaucetInfo> => {
   };
 
   return useQuery({
-    queryKey: ["query", "faucet_info", faucet],
+    queryKey: ["query", "faucet_info", faucet, assetInfos],
     queryFn,
     enabled: faucet.enabled,
     retry: 2,
diff --git a/src/lib/services/proposalService.ts b/src/lib/services/proposalService.ts
index 211007477..da8219d4e 100644
--- a/src/lib/services/proposalService.ts
+++ b/src/lib/services/proposalService.ts
@@ -3,11 +3,7 @@ import { useQuery } from "@tanstack/react-query";
 import big from "big.js";
 import { useCallback } from "react";
 
-import {
-  useBaseApiRoute,
-  useCelatoneApp,
-  useChainRecordAsset,
-} from "lib/app-provider";
+import { useBaseApiRoute, useCelatoneApp } from "lib/app-provider";
 import {
   getProposalList,
   getProposalListCount,
@@ -37,6 +33,7 @@ import {
   parseProposalStatus,
 } from "lib/utils";
 
+import { useAssetInfos } from "./assetService";
 import { useProposalListExpression } from "./expression";
 import type {
   DepositParamsInternal,
@@ -303,7 +300,7 @@ export interface GovParams {
 export const useGovParams = (): UseQueryResult<GovParams> => {
   const lcdEndpoint = useBaseApiRoute("rest");
   const cosmwasmEndpoint = useBaseApiRoute("cosmwasm");
-  const getAssetInfo = useChainRecordAsset();
+  const { assetInfos } = useAssetInfos();
   const queryFn = useCallback(
     () =>
       Promise.all([
@@ -312,7 +309,7 @@ export const useGovParams = (): UseQueryResult<GovParams> => {
         fetchGovVotingParams(lcdEndpoint),
       ]).then<GovParams>((params) => {
         const minDepositParam = params[0].minDeposit[0];
-        const assetInfo = getAssetInfo(minDepositParam.denom);
+        const assetInfo = assetInfos?.[minDepositParam.denom];
         const [minDepositAmount, minDepositDenom] = [
           deexponentify(
             minDepositParam.amount as U<Token>,
@@ -343,10 +340,10 @@ export const useGovParams = (): UseQueryResult<GovParams> => {
           votingParams: params[2],
         };
       }),
-    [lcdEndpoint, cosmwasmEndpoint, getAssetInfo]
+    [lcdEndpoint, cosmwasmEndpoint, assetInfos]
   );
 
-  return useQuery(["gov_params", lcdEndpoint], queryFn, {
+  return useQuery(["gov_params", lcdEndpoint, assetInfos], queryFn, {
     keepPreviousData: true,
     refetchOnWindowFocus: false,
   });
diff --git a/src/lib/utils/formatter/currency.ts b/src/lib/utils/formatter/currency.ts
index bb4920764..9526a4032 100644
--- a/src/lib/utils/formatter/currency.ts
+++ b/src/lib/utils/formatter/currency.ts
@@ -1,22 +1,9 @@
 import type { Big, BigSource } from "big.js";
 import big from "big.js";
 
-import { MICRO } from "lib/data";
 import type { NominalType, Option, Token, U } from "lib/types";
 
 /* eslint-disable */
-export function microfy<T extends Token<BigSource>>(
-  amount: T
-): T extends NominalType<infer N> ? U<Big & NominalType<N>> : U<T> {
-  return big(amount).mul(MICRO) as any;
-}
-
-export function demicrofy<T extends Token<BigSource>>(
-  amount: U<T>
-): T extends NominalType<infer N> ? Big & NominalType<N> : T {
-  return big(amount).div(MICRO) as any;
-}
-
 export function exponentify<T extends Token<BigSource>>(
   amount: T,
   precision: Option<number>
diff --git a/src/lib/utils/funds.ts b/src/lib/utils/funds.ts
index 909652511..59fdc112f 100644
--- a/src/lib/utils/funds.ts
+++ b/src/lib/utils/funds.ts
@@ -1,18 +1,24 @@
 import type { Coin } from "@cosmjs/stargate";
 
-import type { Token } from "lib/types";
+import type { Token, Option } from "lib/types";
 
-import { microfy } from "./formatter/currency";
+import { exponentify } from "./formatter";
 
 export const sortDenoms = (assets: Coin[]): Coin[] =>
   assets.sort(({ denom: aDenom }, { denom: bDenom }) =>
     aDenom.localeCompare(bDenom)
   );
 
-export const fabricateFunds = (assets: Coin[]): Coin[] =>
-  sortDenoms(assets.filter((asset) => Number(asset.amount) && asset.denom)).map(
-    (asset) => ({
-      ...asset,
-      amount: microfy(asset.amount as Token).toFixed(0),
-    })
+interface CoinWithPrecision extends Coin {
+  precision: Option<number>;
+}
+
+export const fabricateFunds = (assets: CoinWithPrecision[]): Coin[] =>
+  sortDenoms(
+    assets
+      .filter((asset) => Number(asset.amount) && asset.denom)
+      .map((asset) => ({
+        denom: asset.denom,
+        amount: exponentify(asset.amount as Token, asset.precision).toFixed(0),
+      }))
   );
diff --git a/src/lib/utils/getAttachFunds.ts b/src/lib/utils/getAttachFunds.ts
deleted file mode 100644
index 8ca8f2fc3..000000000
--- a/src/lib/utils/getAttachFunds.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { Coin } from "@cosmjs/stargate";
-
-import { AttachFundsType } from "lib/components/fund/types";
-
-import { fabricateFunds, sortDenoms } from "./funds";
-
-interface AttachFundsParams {
-  attachFundsOption: AttachFundsType;
-  assetsJsonStr: string;
-  assetsSelect: Coin[];
-}
-
-export const getAttachFunds = ({
-  attachFundsOption,
-  assetsJsonStr,
-  assetsSelect,
-}: AttachFundsParams) => {
-  switch (attachFundsOption) {
-    case AttachFundsType.ATTACH_FUNDS_SELECT:
-      return fabricateFunds(assetsSelect);
-    case AttachFundsType.ATTACH_FUNDS_JSON:
-      try {
-        if (JSON.parse(assetsJsonStr)) {
-          return sortDenoms(JSON.parse(assetsJsonStr) as Coin[]);
-        }
-      } catch {
-        return [];
-      }
-      return [];
-    default:
-      return [];
-  }
-};
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 6c4f2cb77..99f0b4fc6 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -21,7 +21,6 @@ export * from "./msgFurtherAction";
 export * from "./extractActionValue";
 export * from "./mergeRefs";
 export * from "./funds";
-export * from "./getAttachFunds";
 export * from "./assetValue";
 export * from "./codePermission";
 export * from "./executeTags";