From 029d26056994664331d5bf69753885bf98616d2c Mon Sep 17 00:00:00 2001
From: luca <uniqueye608@gmail.com>
Date: Thu, 19 Sep 2024 16:45:17 +0800
Subject: [PATCH] feat: add contract address input field

---
 .../components/contract/CodeIdField.tsx       |   4 +-
 .../contract/ContractAddressField.tsx         | 148 ++++++++++++++++++
 .../components/contract/QueryTab.tsx          |  48 +++++-
 3 files changed, 196 insertions(+), 4 deletions(-)
 create mode 100644 examples/chain-template/components/contract/ContractAddressField.tsx

diff --git a/examples/chain-template/components/contract/CodeIdField.tsx b/examples/chain-template/components/contract/CodeIdField.tsx
index f637d853..3e294274 100644
--- a/examples/chain-template/components/contract/CodeIdField.tsx
+++ b/examples/chain-template/components/contract/CodeIdField.tsx
@@ -7,7 +7,7 @@ import { useCodeDetails } from '@/hooks';
 import { useChainStore } from '@/contexts';
 import { CodeInfo, isValidCodeId, resolvePermission } from '@/utils';
 
-type Status = {
+export type InputStatus = {
   state: 'init' | 'loading' | 'success' | 'error';
   message?: string;
 };
@@ -25,7 +25,7 @@ export const CodeIdField = ({
   readonly?: boolean;
   defaultCodeId?: string;
 }) => {
-  const [status, setStatus] = useState<Status>({ state: 'init' });
+  const [status, setStatus] = useState<InputStatus>({ state: 'init' });
 
   const { selectedChain } = useChainStore();
   const { address } = useChain(selectedChain);
diff --git a/examples/chain-template/components/contract/ContractAddressField.tsx b/examples/chain-template/components/contract/ContractAddressField.tsx
new file mode 100644
index 00000000..b745a6e5
--- /dev/null
+++ b/examples/chain-template/components/contract/ContractAddressField.tsx
@@ -0,0 +1,148 @@
+import {
+  Box,
+  Combobox,
+  Icon,
+  Spinner,
+  Text,
+  TextProps,
+} from '@interchain-ui/react';
+import { InputField } from './InputField';
+import { useContractInfo, useMyContracts } from '@/hooks';
+import { shortenAddress, validateContractAddress } from '@/utils';
+import { useEffect, useState } from 'react';
+import { InputStatus } from './CodeIdField';
+import { useChainStore } from '@/contexts';
+import { useChain } from '@cosmos-kit/react';
+
+type StatusDisplay = {
+  icon?: React.ReactNode;
+  text?: string;
+  textColor?: TextProps['color'];
+};
+
+const displayStatus = (status: InputStatus) => {
+  const statusMap: Record<InputStatus['state'], StatusDisplay> = {
+    loading: {
+      icon: <Spinner size="$lg" color="$textSecondary" />,
+      text: 'Checking contract address...',
+      textColor: '$textSecondary',
+    },
+
+    success: {
+      icon: <Icon name="checkboxCircle" size="18px" color="$textSuccess" />,
+      text: 'Valid contract address',
+      textColor: '$text',
+    },
+
+    error: {
+      icon: <Icon name="errorWarningLine" size="18px" color="$textDanger" />,
+      text: status.message || 'Invalid contract address',
+      textColor: '$textDanger',
+    },
+
+    init: {},
+  };
+
+  return statusMap[status.state];
+};
+
+type ContractAddressFieldProps = {
+  width?: string;
+  initialAddress?: string;
+  setContractAddress?: (address: string) => void;
+};
+
+export const ContractAddressField = ({
+  width = '560px',
+  initialAddress,
+  setContractAddress,
+}: ContractAddressFieldProps) => {
+  const [input, setInput] = useState('');
+  const [status, setStatus] = useState<InputStatus>({ state: 'init' });
+
+  const { selectedChain } = useChainStore();
+  const { chain } = useChain(selectedChain);
+  const { refetch: fetchContractInfo } = useContractInfo({
+    contractAddress: input,
+    enabled: false,
+  });
+  const { data: myContracts = [] } = useMyContracts();
+
+  useEffect(() => {
+    if (initialAddress) {
+      setInput(initialAddress);
+    }
+  }, [initialAddress]);
+
+  useEffect(() => {
+    setStatus({ state: 'init' });
+    setContractAddress?.('');
+
+    if (input.length) {
+      const error = validateContractAddress(input, chain.bech32_prefix);
+
+      if (error) {
+        return setStatus({ state: 'error', message: error });
+      }
+
+      setStatus({ state: 'loading' });
+
+      const timer = setTimeout(() => {
+        fetchContractInfo().then(({ data }) => {
+          if (!data) {
+            return setStatus({
+              state: 'error',
+              message: 'This contract does not exist',
+            });
+          }
+
+          setStatus({ state: 'success' });
+          setContractAddress?.(input);
+        });
+      }, 500);
+
+      return () => clearTimeout(timer);
+    }
+  }, [input, fetchContractInfo, chain.bech32_prefix]);
+
+  const { icon, text, textColor } = displayStatus(status);
+
+  return (
+    <InputField title="Contract Address">
+      <Combobox
+        openOnFocus
+        allowsCustomValue
+        inputValue={input}
+        onInputChange={(input) => {
+          setInput(input);
+        }}
+        onSelectionChange={(value) => {
+          if (value) setInput(value as string);
+        }}
+        styleProps={{ width }}
+      >
+        {myContracts.map(({ address, contractInfo }) => (
+          <Combobox.Item key={address} textValue={address}>
+            <Box transform="translateY(2px)">
+              <Text>
+                {`${shortenAddress(address, 18)} (`}
+                <Text as="span" fontWeight="600">
+                  {`${contractInfo?.label || 'Unnamed'}`}
+                </Text>
+                {')'}
+              </Text>
+            </Box>
+          </Combobox.Item>
+        ))}
+      </Combobox>
+      {status.state !== 'init' && (
+        <Box display="flex" alignItems="center" gap="6px">
+          {icon}
+          <Text color={textColor} fontSize="12px">
+            {text}
+          </Text>
+        </Box>
+      )}
+    </InputField>
+  );
+};
diff --git a/examples/chain-template/components/contract/QueryTab.tsx b/examples/chain-template/components/contract/QueryTab.tsx
index 745c1f21..eb6f2b18 100644
--- a/examples/chain-template/components/contract/QueryTab.tsx
+++ b/examples/chain-template/components/contract/QueryTab.tsx
@@ -1,4 +1,6 @@
 import { Box, Text } from '@interchain-ui/react';
+import { ContractAddressField } from './ContractAddressField';
+import { useEffect, useRef, useState } from 'react';
 
 type QueryTabProps = {
   show: boolean;
@@ -11,9 +13,51 @@ export const QueryTab = ({
   initialAddress,
   clearInitAddress,
 }: QueryTabProps) => {
+  const [contractAddress, setContractAddress] = useState('');
+  const [fieldWidth, setFieldWidth] = useState('560px');
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const updateWidth = () => {
+      const newWidth = containerRef.current?.clientWidth;
+      if (newWidth) {
+        setFieldWidth(`${newWidth}px`);
+      }
+    };
+
+    updateWidth();
+    const timeoutId = setTimeout(updateWidth, 0);
+
+    window.addEventListener('resize', updateWidth);
+
+    return () => {
+      clearTimeout(timeoutId);
+      window.removeEventListener('resize', updateWidth);
+    };
+  }, [show]);
+
   return (
-    <Box display={show ? 'block' : 'none'}>
-      <Text>Query Contract</Text>
+    <Box
+      display={show ? 'flex' : 'none'}
+      maxWidth="560px"
+      mx="auto"
+      flexDirection="column"
+      gap="20px"
+      ref={containerRef}
+    >
+      <Text
+        fontSize="24px"
+        fontWeight="500"
+        color="$blackAlpha600"
+        textAlign="center"
+      >
+        Query Contract
+      </Text>
+      <ContractAddressField
+        width={fieldWidth}
+        initialAddress={initialAddress}
+        setContractAddress={setContractAddress}
+      />
     </Box>
   );
 };