Remove ContractAddressInput component and minor fixes

chainapsis · Jul 10, 2023 · b685e00 · b685e00
1 parent 951e7d1
commit b685e00
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 116 deletions.
diff --git a/packages/extension/src/components/contract-address-book-modal/index.tsx b/packages/extension/src/components/contract-address-book-modal/index.tsx
@@ -9,10 +9,10 @@ import { useFocusOnMount } from "../../hooks/use-focus-on-mount";
 import { SearchTextInput } from "../input";
 import { ContractAddressItem } from "../contract-item";
 import styled from "styled-components";
-import { TokenContract } from "../../stores/token-contracts";
 import SimpleBar from "simplebar-react";
 import { EmptyView } from "../empty-view";
 import { FormattedMessage, useIntl } from "react-intl";
+import { useStore } from "../../stores";
 
 const Styles = {
   Container: styled.div`
@@ -40,10 +40,17 @@ const Styles = {
 
 export const ContractAddressBookModal: FunctionComponent<{
   isOpen: boolean;
-  contracts: TokenContract[];
+
+  chainId: string;
   onSelect: (address: string) => void;
   close: () => void;
-}> = observer(({ isOpen, onSelect, contracts, close }) => {
+}> = observer(({ isOpen, chainId, onSelect, close }) => {
+  const { queriesStore } = useStore();
+
+  const contracts = queriesStore
+    .get(chainId)
+    .tokenContracts.queryTokenContracts.get(chainId).tokenContracts;
+
   const [search, setSearch] = useState("");
   const searchRef = useFocusOnMount<HTMLInputElement>();
   const intl = useIntl();

diff --git a/packages/extension/src/components/input/contract-input/contract-input.tsx b/packages/extension/src/components/input/contract-input/contract-input.tsx
diff --git a/packages/extension/src/components/input/contract-input/index.ts b/packages/extension/src/components/input/contract-input/index.ts
diff --git a/packages/extension/src/pages/setting/token/add/index.tsx b/packages/extension/src/pages/setting/token/add/index.tsx
@@ -26,8 +26,11 @@ import { Body3, Subtitle2 } from "../../../../components/typography";
 import { Toggle } from "../../../../components/toggle";
 import { useForm } from "react-hook-form";
 import { useNotification } from "../../../../hooks/notification";
-import { ContractAddressInput } from "../../../../components/input/contract-input";
 import { FormattedMessage, useIntl } from "react-intl";
+import { Bech32Address } from "@keplr-wallet/cosmos";
+import { ContractAddressBookModal } from "../../../../components/contract-address-book-modal";
+import { IconButton } from "../../../../components/icon-button";
+import { MenuIcon } from "../../../../components/icon";
 
 const Styles = {
   Container: styled(Stack)`
@@ -51,6 +54,8 @@ export const SettingTokenAddPage: FunctionComponent = observer(() => {
   const [searchParams] = useSearchParams();
   const paramChainId = searchParams.get("chainId");
 
+  const [isAddressBookModalOpen, setIsAddressBookModalOpen] = useState(false);
+
   const { setValue, handleSubmit, register, formState, watch } =
     useForm<FormData>({
       defaultValues: {
@@ -282,16 +287,53 @@ export const SettingTokenAddPage: FunctionComponent = observer(() => {
           </Box>
         ) : null}
 
-        <ContractAddressInput
-          chainId={chainId}
+        <TextInput
+          label={intl.formatMessage({
+            id: "page.setting.token.add.contract-address-label",
+          })}
           isLoading={queryContract.isFetching}
           readOnly={interactionInfo.interaction}
+          right={
+            <IconButton
+              onClick={() => {
+                setIsAddressBookModalOpen(true);
+              }}
+              hoverColor={
+                theme.mode === "light"
+                  ? ColorPalette["gray-50"]
+                  : ColorPalette["gray-500"]
+              }
+              padding="0.25rem"
+            >
+              <MenuIcon
+                width="1.5rem"
+                height="1.5rem"
+                color={
+                  theme.mode === "light"
+                    ? ColorPalette["gray-300"]
+                    : ColorPalette["gray-10"]
+                }
+              />
+            </IconButton>
+          }
           error={
             formState.errors.contractAddress?.message ||
             (queryContract.error?.data as any)?.message
           }
-          setValue={setValue}
-          register={register}
+          {...register("contractAddress", {
+            required: true,
+            validate: (value): string | undefined => {
+              try {
+                const chainInfo = chainStore.getChain(chainId);
+                Bech32Address.validate(
+                  value,
+                  chainInfo.bech32Config.bech32PrefixAccAddr
+                );
+              } catch (e) {
+                return e.message || e.toString();
+              }
+            },
+          })}
         />
         <TextInput
           label={intl.formatMessage({
@@ -375,6 +417,16 @@ export const SettingTokenAddPage: FunctionComponent = observer(() => {
           </Stack>
         ) : null}
       </Styles.Container>
+
+      <ContractAddressBookModal
+        isOpen={isAddressBookModalOpen}
+        chainId={chainId}
+        onSelect={(address: string) => {
+          setValue("contractAddress", address);
+          setIsAddressBookModalOpen(false);
+        }}
+        close={() => setIsAddressBookModalOpen(false)}
+      />
     </HeaderLayout>
   );
 });
diff --git a/packages/extension/src/stores/token-contracts/names.ts b/packages/extension/src/stores/token-contracts/names.ts
@@ -17,7 +17,7 @@ export class ObservableQueryTokenContractsInner extends ObservableQuery<
     );
   }
 
-  get getTokenContracts(): TokenContract[] {
+  get tokenContracts(): TokenContract[] {
     if (!this.response || !this.response.data) {
       return [];
     }