Add disabled chain list

components/chain-list/all-chains-item.tsx

@@ -1,20 +1,16 @@
 import { ChainItemType } from "../../types";
+import { Dispatch, FunctionComponent, SetStateAction } from "react";
+
+import { ChainImage } from "./chain-image";
+import { Flex1 } from "../../styles/flex-1";
 import {
-  ChangeEvent,
-  Dispatch,
-  FunctionComponent,
-  SetStateAction,
-  useEffect,
-  useState,
-} from "react";
-import {
+  ChainCheckBox,
   ChainImageContainer,
   ChainInfoContainer,
   ChainItemContainer,
-} from "./chain-list";
-import { ChainImage } from "./chain-image";
-import { Flex1 } from "../../styles/flex-1";
-import { ChainCheckBox, ChainName, WalletAddress } from "./chain-item";
+  ChainName,
+  WalletAddress,
+} from "./chain-item";
 import color from "../../styles/color";
 import styled from "styled-components";
 

components/chain-list/chain-item.tsx

@@ -1,17 +1,5 @@
-import { ChainItemType } from "../../types";
-import {
-  ChangeEvent,
-  Dispatch,
-  FunctionComponent,
-  SetStateAction,
-  useEffect,
-  useState,
-} from "react";
-import {
-  ChainImageContainer,
-  ChainInfoContainer,
-  ChainItemContainer,
-} from "./chain-list";
+import { ChainItemType, WidthHeightProps } from "../../types";
+import { FunctionComponent, useEffect, useState } from "react";
 
 import color from "../../styles/color";
 import { Flex1 } from "../../styles/flex-1";
@@ -22,26 +10,31 @@ interface Props {
   chainItem: ChainItemType;
   checkedItemHandler: (chainItem: ChainItemType, isChecked: boolean) => void;
   checkedItems: Set<unknown>;
+  disabled?: boolean;
 }
 
 export const ChainItem: FunctionComponent<Props> = (props) => {
-  const { chainItem, checkedItemHandler, checkedItems } = props;
-  const [checked, setChecked] = useState(false);
+  const { chainItem, checkedItemHandler, checkedItems, disabled } = props;
+  const [checked, setChecked] = useState(disabled);
 
   const checkHandler = () => {
-    setChecked(!checked);
-    checkedItemHandler(chainItem, !checked);
+    if (!disabled) {
+      setChecked(!checked);
+      checkedItemHandler(chainItem, !checked);
+    }
   };
 
   useEffect(() => {
-    setChecked(checkedItems.has(chainItem));
+    if (!disabled) {
+      setChecked(checkedItems.has(chainItem));
+    }
   }, [checkedItems]);
 
   return (
     <ChainItemContainer
       key={chainItem.prefix}
       isLoading={false}
-      checked={checked}
+      disabled={disabled}
       onClick={checkHandler}
     >
       <ChainImageContainer width="3rem" height="3rem">
@@ -63,6 +56,41 @@ export const ChainItem: FunctionComponent<Props> = (props) => {
   );
 };
 
+export const ChainItemContainer = styled.div<{
+  isLoading: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+}>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  gap: 1rem;
+
+  padding: 1.5rem;
+
+  cursor: pointer;
+
+  opacity: ${(props) => (props.disabled ? "0.3" : "1")};
+
+  &:hover {
+    background: ${(props) => (props.isLoading ? null : color.grey["600"])};
+  }
+`;
+
+export const ChainImageContainer = styled.div<WidthHeightProps>`
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+
+  position: relative;
+`;
+
+export const ChainInfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
 export const ChainName = styled.div`
   font-weight: 600;
   font-size: 0.8rem;

components/chain-list/chain-list.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, FunctionComponent, SetStateAction, useEffect } from "react";
-import { ChainItemType, WidthHeightProps } from "../../types";
+import { ChainItemType } from "../../types";
 import color from "../../styles/color";
 import styled from "styled-components";
 import { ChainItem } from "./chain-item";
@@ -8,6 +8,7 @@ interface Props {
   allChecked: boolean;
   setAllChecked: Dispatch<SetStateAction<boolean>>;
   chainList: ChainItemType[];
+  disabledChainList: ChainItemType[];
   checkedItems: Set<unknown>;
   setCheckedItems: Dispatch<SetStateAction<Set<unknown>>>;
 }
@@ -17,6 +18,7 @@ export const ChainList: FunctionComponent<Props> = (props) => {
     allChecked,
     setAllChecked,
     chainList,
+    disabledChainList,
     checkedItems,
     setCheckedItems,
   } = props;
@@ -59,6 +61,15 @@ export const ChainList: FunctionComponent<Props> = (props) => {
           checkedItems={checkedItems}
         />
       ))}
+      {disabledChainList.map((chainItem) => (
+        <ChainItem
+          key={chainItem.address}
+          chainItem={chainItem}
+          checkedItemHandler={checkedItemHandler}
+          checkedItems={checkedItems}
+          disabled={true}
+        />
+      ))}
     </ChainContainer>
   );
 };
@@ -72,35 +83,3 @@ export const ChainContainer = styled.div`
 
   background-color: ${(props) => props.color};
 `;
-
-export const ChainItemContainer = styled.div<{
-  isLoading: boolean;
-  checked?: boolean;
-}>`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  gap: 1rem;
-
-  padding: 1.5rem;
-
-  cursor: pointer;
-
-  &:hover {
-    background: ${(props) => (props.isLoading ? null : color.grey["700"])};
-  }
-`;
-
-export const ChainImageContainer = styled.div<WidthHeightProps>`
-  width: ${(props) => props.width};
-  height: ${(props) => props.height};
-
-  position: relative;
-`;
-
-export const ChainInfoContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-`;

components/connect-wallet-modal/wallet-item.tsx

@@ -10,12 +10,13 @@ import {
   WalletType,
 } from "../../constants/wallet";
 import { getKeplrFromWindow, KeplrWallet } from "../../wallets";
-import { loginWithTwitter } from "../../repository";
+import { loginWithTwitter } from "../../queries";
 
 interface Props {
   wallet: WalletType;
 }
 
+// Todo: Wallet 관련된 부분을 Context로 빼는 부분
 export const WalletItem: FunctionComponent<Props> = (props: Props) => {
   const { wallet } = props;