feat: add mobile styles

hyperweb-io · Sep 22, 2024 · 40df1d9 · 40df1d9
1 parent 8088abc
commit 40df1d9
Show file tree

Hide file tree

Showing 13 changed files with 114 additions and 60 deletions.
diff --git a/examples/chain-template/components/common/Stepper.tsx b/examples/chain-template/components/common/Stepper.tsx
@@ -19,6 +19,31 @@ type StepperProps = {
   direction?: 'row' | 'column';
 };
 
+const getSeparatorStyles = (direction: 'row' | 'column', status: Status) => {
+  const isColumn = direction === 'column';
+  const isDone = status === Status.DONE;
+
+  const commonStyles = {
+    backgroundColor: isDone ? '$purple400' : '$blackAlpha300',
+  };
+
+  const directionStyles = isColumn
+    ? {
+        width: `${STEP_SEPARATOR_WIDTH}px`,
+        height: '30px',
+        ml: `${STEP_SEPARATOR_OFFSET}px`,
+        my: '4px',
+      }
+    : {
+        width: '30px',
+        height: `${STEP_SEPARATOR_WIDTH}px`,
+        mt: `${STEP_SEPARATOR_OFFSET}px`,
+        mx: '4px',
+      };
+
+  return { ...commonStyles, ...directionStyles };
+};
+
 export const Stepper: React.FC<StepperProps> = ({
   steps,
   activeStep,
@@ -35,7 +60,7 @@ export const Stepper: React.FC<StepperProps> = ({
               : Status.TODO;
 
         return (
-          <Box key={index} display="flex" flexDirection="column">
+          <Box key={index} display="flex" flexDirection={direction}>
             <Box display="flex" alignItems="center" gap="10px">
               <Box
                 width={`${STEP_INDICATOR_SIZE}px`}
@@ -66,15 +91,7 @@ export const Stepper: React.FC<StepperProps> = ({
               </Text>
             </Box>
             {index < steps.length - 1 && (
-              <Box
-                width={`${STEP_SEPARATOR_WIDTH}px`}
-                height="30px"
-                backgroundColor={
-                  status === Status.DONE ? '$purple400' : '$blackAlpha300'
-                }
-                ml={`${STEP_SEPARATOR_OFFSET}px`}
-                my="4px"
-              />
+              <Box {...getSeparatorStyles(direction, status)} />
             )}
           </Box>
         );

diff --git a/examples/chain-template/components/contract/AttachFundsRadio.tsx b/examples/chain-template/components/contract/AttachFundsRadio.tsx
@@ -38,11 +38,13 @@ type FundsOption = {
 type AttachFundsRadioProps = {
   setFunds: (funds: Coin[]) => void;
   setIsAssetListJsonValid: (isValid: boolean) => void;
+  direction?: 'row' | 'column';
 };
 
 export const AttachFundsRadio = ({
   setFunds,
   setIsAssetListJsonValid,
+  direction = 'row',
 }: AttachFundsRadioProps) => {
   const [selectedOptionKey, setSelectedOptionKey] =
     useState<FundsOptionKey>('no_funds');
@@ -126,7 +128,7 @@ export const AttachFundsRadio = ({
       gap={selectedOptionKey === 'json_asset_list' ? '10px' : '20px'}
     >
       <RadioGroup
-        direction="row"
+        direction={direction}
         name="attach_funds"
         value={selectedOptionKey}
         onChange={(val) => {

diff --git a/examples/chain-template/components/contract/ContractAddressField.tsx b/examples/chain-template/components/contract/ContractAddressField.tsx
@@ -10,7 +10,7 @@ import {
 } from '@interchain-ui/react';
 
 import { InputField } from './InputField';
-import { useContractInfo, useMyContracts } from '@/hooks';
+import { useContractInfo, useDetectBreakpoints, useMyContracts } from '@/hooks';
 import { shortenAddress, validateContractAddress } from '@/utils';
 import { InputStatus } from './CodeIdField';
 import { useChainStore } from '@/contexts';
@@ -69,7 +69,6 @@ export const ContractAddressField = ({
   });
   const { data: myContracts = [] } = useMyContracts();
 
-  // TODO: fix width not correct on first render on small screen
   useEffect(() => {
     const updateWidth = () => {
       const newWidth = containerRef.current?.clientWidth;
@@ -79,13 +78,17 @@ export const ContractAddressField = ({
     };
 
     updateWidth();
-    const timeoutId = setTimeout(updateWidth, 0);
 
-    window.addEventListener('resize', updateWidth);
+    const resizeObserver = new ResizeObserver(updateWidth);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
 
     return () => {
-      clearTimeout(timeoutId);
-      window.removeEventListener('resize', updateWidth);
+      if (containerRef.current) {
+        resizeObserver.unobserve(containerRef.current);
+      }
+      resizeObserver.disconnect();
     };
   }, []);
 
@@ -128,6 +131,8 @@ export const ContractAddressField = ({
 
   const { icon, text, textColor } = displayStatus(status);
 
+  const { isMobile } = useDetectBreakpoints();
+
   return (
     <Box width="100%" ref={containerRef}>
       <InputField title="Contract Address">
@@ -147,7 +152,7 @@ export const ContractAddressField = ({
             <Combobox.Item key={address} textValue={address}>
               <Box transform="translateY(2px)">
                 <Text>
-                  {`${shortenAddress(address, 18)} (`}
+                  {`${shortenAddress(address, isMobile ? 8 : 18)} (`}
                   <Text as="span" fontWeight="600">
                     {`${contractInfo?.label || 'Unnamed'}`}
                   </Text>

diff --git a/examples/chain-template/components/contract/CreateFromCodeId.tsx b/examples/chain-template/components/contract/CreateFromCodeId.tsx
@@ -2,6 +2,7 @@ import { Box } from '@interchain-ui/react';
 
 import { BackButton } from './BackButton';
 import { InstantiateContract } from './InstantiateContract';
+import { useDetectBreakpoints } from '@/hooks';
 
 type CreateFromCodeIdProps = {
   onBack: () => void;
@@ -12,19 +13,16 @@ export const CreateFromCodeId = ({
   onBack,
   switchTab,
 }: CreateFromCodeIdProps) => {
+  const { isTablet } = useDetectBreakpoints();
+
   return (
     <Box position="relative">
-      <Box
-        position="absolute"
-        top="0"
-        left="0"
-        display="flex"
-        flexDirection="column"
-        gap="40px"
-      >
+      <Box position={isTablet ? 'relative' : 'absolute'} top="0" left="0">
         <BackButton onClick={onBack} />
       </Box>
-      <InstantiateContract switchTab={switchTab} onViewMyContracts={onBack} />
+      <Box mt={isTablet ? '40px' : '0'}>
+        <InstantiateContract switchTab={switchTab} onViewMyContracts={onBack} />
+      </Box>
     </Box>
   );
 };
diff --git a/examples/chain-template/components/contract/CreateFromUpload.tsx b/examples/chain-template/components/contract/CreateFromUpload.tsx
@@ -5,6 +5,7 @@ import { UploadContract } from './UploadContract';
 import { BackButton } from './BackButton';
 import { Stepper } from '../common';
 import { InstantiateContract } from './InstantiateContract';
+import { useDetectBreakpoints } from '@/hooks';
 
 type CreateFromUploadProps = {
   onBack: () => void;
@@ -35,40 +36,48 @@ export const CreateFromUpload = ({
     }
   };
 
+  const { isTablet } = useDetectBreakpoints();
+
   return (
     <Box position="relative">
       <Box
-        position="absolute"
+        position={isTablet ? 'relative' : 'absolute'}
         top="0"
         left="0"
         display="flex"
         flexDirection="column"
+        alignItems="center"
         gap="40px"
       >
-        <BackButton onClick={onBack} />
+        <Box alignSelf="flex-start">
+          <BackButton onClick={onBack} />
+        </Box>
         <Stepper
           steps={steps}
           activeStep={completed ? steps.length : steps.indexOf(activeStepName)}
+          direction={isTablet ? 'row' : 'column'}
+        />
+      </Box>
+      <Box mt={isTablet ? '40px' : '0'}>
+        <UploadContract
+          show={activeStepName === Step.Upload}
+          onSuccess={(codeId) => {
+            setCodeId(codeId);
+            nextStep();
+          }}
+        />
+        <InstantiateContract
+          show={activeStepName === Step.Instantiate}
+          defaultCodeId={codeId}
+          switchTab={switchTab}
+          onSuccess={nextStep}
+          onCreateNewContract={() => {
+            setCompleted(false);
+            setActiveStepName(Step.Upload);
+          }}
+          onViewMyContracts={onBack}
         />
       </Box>
-      <UploadContract
-        show={activeStepName === Step.Upload}
-        onSuccess={(codeId) => {
-          setCodeId(codeId);
-          nextStep();
-        }}
-      />
-      <InstantiateContract
-        show={activeStepName === Step.Instantiate}
-        defaultCodeId={codeId}
-        switchTab={switchTab}
-        onSuccess={nextStep}
-        onCreateNewContract={() => {
-          setCompleted(false);
-          setActiveStepName(Step.Upload);
-        }}
-        onViewMyContracts={onBack}
-      />
     </Box>
   );
 };
diff --git a/examples/chain-template/components/contract/ExecuteTab.tsx b/examples/chain-template/components/contract/ExecuteTab.tsx
@@ -9,7 +9,7 @@ import { JsonInput } from './JsonInput';
 import { AttachFundsRadio } from './AttachFundsRadio';
 import { Button } from '../common';
 import { useChainStore } from '@/contexts';
-import { useExecuteContractTx } from '@/hooks';
+import { useDetectBreakpoints, useExecuteContractTx } from '@/hooks';
 import { validateJson } from '@/utils';
 
 const INPUT_LINES = 12;
@@ -61,6 +61,8 @@ export const ExecuteTab = ({ show, initialAddress }: ExecuteTabProps) => {
     return !contractAddress || !isMsgValid || !isAssetListJsonValid;
   }, [address, contractAddress, isMsgValid, isAssetListJsonValid]);
 
+  const { isMobile } = useDetectBreakpoints();
+
   return (
     <Box
       display={show ? 'flex' : 'none'}
@@ -93,6 +95,7 @@ export const ExecuteTab = ({ show, initialAddress }: ExecuteTabProps) => {
         <AttachFundsRadio
           setFunds={setFunds}
           setIsAssetListJsonValid={setIsAssetListJsonValid}
+          direction={isMobile ? 'column' : 'row'}
         />
       </InputField>
       <Button

diff --git a/examples/chain-template/components/contract/InstantiateContract.tsx b/examples/chain-template/components/contract/InstantiateContract.tsx
@@ -23,7 +23,11 @@ import { JsonInput } from './JsonInput';
 import { useChainStore } from '@/contexts';
 import { AttachFundsRadio } from './AttachFundsRadio';
 import { Button } from '../common';
-import { useInstantiateTx, useMyContracts } from '@/hooks';
+import {
+  useDetectBreakpoints,
+  useInstantiateTx,
+  useMyContracts,
+} from '@/hooks';
 import { TxInfoItem, TxSuccessCard } from './TxSuccessCard';
 import { TabLabel } from '@/pages/contract';
 import styles from '@/styles/comp.module.css';
@@ -170,6 +174,8 @@ export const InstantiateContract = ({
     );
   }
 
+  const { isMobile } = useDetectBreakpoints();
+
   return (
     <Box
       display={show ? 'flex' : 'none'}
@@ -276,6 +282,7 @@ export const InstantiateContract = ({
           <AttachFundsRadio
             setFunds={setFunds}
             setIsAssetListJsonValid={setIsAssetListJsonValid}
+            direction={isMobile ? 'column' : 'row'}
           />
         </InputField>
       </Box>

diff --git a/examples/chain-template/components/contract/InstantiatePermissionRadio.tsx b/examples/chain-template/components/contract/InstantiatePermissionRadio.tsx
@@ -28,13 +28,15 @@ type Props = {
   permission: Permission;
   setAddresses: (addresses: Address[]) => void;
   setPermission: (permission: Permission) => void;
+  direction?: 'row' | 'column';
 };
 
 export const InstantiatePermissionRadio = ({
   addresses,
   permission,
   setAddresses,
   setPermission,
+  direction = 'row',
 }: Props) => {
   const { selectedChain } = useChainStore();
   const { chain } = useChain(selectedChain);
@@ -79,7 +81,7 @@ export const InstantiatePermissionRadio = ({
   return (
     <>
       <RadioGroup
-        direction="row"
+        direction={direction}
         name="instantiate_permission"
         value={permission.toString()}
         onChange={(val) => {

diff --git a/examples/chain-template/components/contract/MyContractsTab.tsx b/examples/chain-template/components/contract/MyContractsTab.tsx
@@ -31,7 +31,7 @@ export const MyContractsTab = ({ show, switchTab }: MyContractsTabProps) => {
   );
 
   return (
-    <Box display={show ? 'block' : 'none'}>
+    <Box display={show ? 'block' : 'none'} maxWidth="980px" mx="auto">
       <MyContractsTable
         title="My Contracts"
         show={contentView === ContentViews.MY_CONTRACTS}

diff --git a/examples/chain-template/components/contract/MyContractsTable.tsx b/examples/chain-template/components/contract/MyContractsTable.tsx
@@ -2,7 +2,11 @@ import { useMemo, useState } from 'react';
 import { useChain } from '@cosmos-kit/react';
 import { Box, Icon, Spinner, Text, TextField } from '@interchain-ui/react';
 
-import { useCopyToClipboard, useMyContracts } from '@/hooks';
+import {
+  useCopyToClipboard,
+  useDetectBreakpoints,
+  useMyContracts,
+} from '@/hooks';
 import { Button, Table } from '../common';
 import { shortenAddress } from '@/utils';
 import { TabLabel } from '@/pages/contract';
@@ -38,19 +42,23 @@ export const MyContractsTable = ({
     );
   }, [myContracts, searchValue]);
 
+  const { isSmMobile } = useDetectBreakpoints();
+
   return (
-    <Box display={show ? 'block' : 'none'} maxWidth="900px" mx="auto">
+    <Box display={show ? 'block' : 'none'} maxWidth="860px" mx="auto">
       <Text color="$blackAlpha600" fontSize="24px" fontWeight="700">
         {title}
       </Text>
       <Box
         display="flex"
+        flexDirection={isSmMobile ? 'column-reverse' : 'row'}
         justifyContent="space-between"
         alignItems="center"
+        gap="14px"
         mt="30px"
         mb="10px"
       >
-        <Box position="relative" width="220px">
+        <Box position="relative" width={isSmMobile ? '100%' : '220px'}>
           <Icon
             name="magnifier"
             color="$blackAlpha500"