cerc-io/icns-frontend
16
0
Fork 0
forked from LaconicNetwork/icns-frontend
Code Pull Requests Actions Activity

Remove chain image warning

Browse Source
This commit is contained in:
HeesungB 2022-12-17 21:34:14 +09:00
parent 7b8f4910bb
commit 76b74d2c96
4 changed files with 24 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/chain-list/all-chains-item.tsx
View File

@ -4,7 +4,6 @@ import { Dispatch, FunctionComponent, SetStateAction } from "react";
import { ChainImage } from "./chain-image"; import { ChainImage } from "./chain-image";
import { Flex1 } from "../../styles/flex-1"; import { Flex1 } from "../../styles/flex-1";
import { import {
ChainImageContainer,
ChainInfoContainer, ChainInfoContainer,
ChainItemContainer, ChainItemContainer,
ChainName, ChainName,
@ -35,13 +34,11 @@ export const AllChainsItem: FunctionComponent<Props> = (props) => {
checked={allChecked} checked={allChecked}
onClick={checkHandler} onClick={checkHandler}
> >
<ChainImageContainer width="3rem" height="3rem"> <ChainImage
<ChainImage src={chainItem.chainImageUrl}
src={chainItem.chainImageUrl} fill={true}
fill={true} alt={`${chainItem.prefix} chain image`}
alt={`${chainItem.prefix} chain image`} />
/>
</ChainImageContainer>
<ChainInfoContainer> <ChainInfoContainer>
<ChainName>{`.${chainItem.prefix}`}</ChainName> <ChainName>{`.${chainItem.prefix}`}</ChainName>
<WalletAddress>{chainItem.address}</WalletAddress> <WalletAddress>{chainItem.address}</WalletAddress>

4
components/chain-list/chain-image.tsx
View File

@ -21,6 +21,10 @@ export const ChainImage = ({ src, ...props }: ImageProps) => {
}; };
const ImageWrapper = styled.div` const ImageWrapper = styled.div`
position: relative;
width: 3rem;
height: 3rem;
img { img {
border-radius: 50%; border-radius: 50%;
} }

21
components/chain-list/chain-item.tsx
View File

@ -1,4 +1,4 @@
import { ChainItemType, WidthHeightProps } from "../../types"; import { ChainItemType } from "../../types";
import { FunctionComponent, useEffect, useState } from "react"; import { FunctionComponent, useEffect, useState } from "react";
import color from "../../styles/color"; import color from "../../styles/color";
@ -39,13 +39,11 @@ export const ChainItem: FunctionComponent<Props> = (props) => {
checked={checked} checked={checked}
onClick={checkHandler} onClick={checkHandler}
> >
<ChainImageContainer width="3rem" height="3rem"> <ChainImage
<ChainImage src={chainItem.chainImageUrl}
src={chainItem.chainImageUrl} fill={true}
fill={true} alt={`${chainItem.prefix} chain image`}
alt={`${chainItem.prefix} chain image`} />
/>
</ChainImageContainer>
<ChainInfoContainer> <ChainInfoContainer>
<ChainName>{`.${chainItem.prefix}`}</ChainName> <ChainName>{`.${chainItem.prefix}`}</ChainName>
<WalletAddress>{chainItem.address}</WalletAddress> <WalletAddress>{chainItem.address}</WalletAddress>
@ -90,13 +88,6 @@ export const ChainItemContainer = styled.div<{
} }
`; `;
export const ChainImageContainer = styled.div<WidthHeightProps>`
width: ${(props) => props.width};
height: ${(props) => props.height};
position: relative;
`;
export const ChainInfoContainer = styled.div` export const ChainInfoContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;

12
components/skeleton/skeleton-chain-list.tsx
View File

@ -21,7 +21,6 @@ import {
} from "../twitter-profile"; } from "../twitter-profile";
import { import {
ChainContainer, ChainContainer,
ChainImageContainer,
ChainInfoContainer, ChainInfoContainer,
ChainItemContainer, ChainItemContainer,
} from "../chain-list"; } from "../chain-list";
@ -60,9 +59,9 @@ export const SkeletonChainList: FunctionComponent = () => (
.map((_, index) => ( .map((_, index) => (
<div key={index}> <div key={index}>
<ChainItemContainer isLoading={true} isSkeleton={true}> <ChainItemContainer isLoading={true} isSkeleton={true}>
<ChainImageContainer width="3rem" height="3rem"> <SkeletonImageContainer>
<SkeletonCircle width="3rem" height="3rem" /> <SkeletonCircle width="3rem" height="3rem" />
</ChainImageContainer> </SkeletonImageContainer>
<ChainInfoContainer> <ChainInfoContainer>
<SkeletonText width="4rem" height="1rem" /> <SkeletonText width="4rem" height="1rem" />
<SkeletonText width="12rem" height="1rem" /> <SkeletonText width="12rem" height="1rem" />
@ -93,6 +92,13 @@ const SkeletonTitle = styled.div`
background-color: ${color.grey["800"]}; background-color: ${color.grey["800"]};
`; `;
const SkeletonImageContainer = styled.div`
width: 3rem;
height: 3rem;
position: relative;
`;
const SkeletonButtonContainer = styled.div` const SkeletonButtonContainer = styled.div`
margin-top: 1.5rem; margin-top: 1.5rem;
`; `;