diff --git a/components/chain-list/all-chains-item.tsx b/components/chain-list/all-chains-item.tsx index d2e8c93..c501842 100644 --- a/components/chain-list/all-chains-item.tsx +++ b/components/chain-list/all-chains-item.tsx @@ -4,7 +4,6 @@ import { Dispatch, FunctionComponent, SetStateAction } from "react"; import { ChainImage } from "./chain-image"; import { Flex1 } from "../../styles/flex-1"; import { - ChainImageContainer, ChainInfoContainer, ChainItemContainer, ChainName, @@ -35,13 +34,11 @@ export const AllChainsItem: FunctionComponent = (props) => { checked={allChecked} onClick={checkHandler} > - - - + {`.${chainItem.prefix}`} {chainItem.address} diff --git a/components/chain-list/chain-image.tsx b/components/chain-list/chain-image.tsx index fab6dfe..ada2f8f 100644 --- a/components/chain-list/chain-image.tsx +++ b/components/chain-list/chain-image.tsx @@ -21,6 +21,10 @@ export const ChainImage = ({ src, ...props }: ImageProps) => { }; const ImageWrapper = styled.div` + position: relative; + width: 3rem; + height: 3rem; + img { border-radius: 50%; } diff --git a/components/chain-list/chain-item.tsx b/components/chain-list/chain-item.tsx index c572151..317f319 100644 --- a/components/chain-list/chain-item.tsx +++ b/components/chain-list/chain-item.tsx @@ -1,4 +1,4 @@ -import { ChainItemType, WidthHeightProps } from "../../types"; +import { ChainItemType } from "../../types"; import { FunctionComponent, useEffect, useState } from "react"; import color from "../../styles/color"; @@ -39,13 +39,11 @@ export const ChainItem: FunctionComponent = (props) => { checked={checked} onClick={checkHandler} > - - - + {`.${chainItem.prefix}`} {chainItem.address} @@ -90,13 +88,6 @@ export const ChainItemContainer = styled.div<{ } `; -export const ChainImageContainer = styled.div` - width: ${(props) => props.width}; - height: ${(props) => props.height}; - - position: relative; -`; - export const ChainInfoContainer = styled.div` display: flex; flex-direction: column; diff --git a/components/skeleton/skeleton-chain-list.tsx b/components/skeleton/skeleton-chain-list.tsx index ffc0170..4a22be2 100644 --- a/components/skeleton/skeleton-chain-list.tsx +++ b/components/skeleton/skeleton-chain-list.tsx @@ -21,7 +21,6 @@ import { } from "../twitter-profile"; import { ChainContainer, - ChainImageContainer, ChainInfoContainer, ChainItemContainer, } from "../chain-list"; @@ -60,9 +59,9 @@ export const SkeletonChainList: FunctionComponent = () => ( .map((_, index) => (
- + - + @@ -93,6 +92,13 @@ const SkeletonTitle = styled.div` background-color: ${color.grey["800"]}; `; +const SkeletonImageContainer = styled.div` + width: 3rem; + height: 3rem; + + position: relative; +`; + const SkeletonButtonContainer = styled.div` margin-top: 1.5rem; `;