forked from LaconicNetwork/icns-frontend
122 lines
2.7 KiB
TypeScript
122 lines
2.7 KiB
TypeScript
import { ChainItemType, WidthHeightProps } from "../../types";
|
|
import { FunctionComponent, useEffect, useState } from "react";
|
|
|
|
import color from "../../styles/color";
|
|
import { Flex1 } from "../../styles/flex-1";
|
|
import styled from "styled-components";
|
|
import { ChainImage } from "./chain-image";
|
|
|
|
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, disabled } = props;
|
|
const [checked, setChecked] = useState(disabled);
|
|
|
|
const checkHandler = () => {
|
|
if (!disabled) {
|
|
setChecked(!checked);
|
|
checkedItemHandler(chainItem, !checked);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!disabled) {
|
|
setChecked(checkedItems.has(chainItem));
|
|
}
|
|
}, [checkedItems]);
|
|
|
|
return (
|
|
<ChainItemContainer
|
|
key={chainItem.prefix}
|
|
isLoading={false}
|
|
disabled={disabled}
|
|
onClick={checkHandler}
|
|
>
|
|
<ChainImageContainer width="3rem" height="3rem">
|
|
<ChainImage
|
|
src={chainItem.chainImageUrl}
|
|
fill={true}
|
|
alt={`${chainItem.prefix} chain image`}
|
|
/>
|
|
</ChainImageContainer>
|
|
<ChainInfoContainer>
|
|
<ChainName>{`.${chainItem.prefix}`}</ChainName>
|
|
<WalletAddress>{chainItem.address}</WalletAddress>
|
|
</ChainInfoContainer>
|
|
|
|
<Flex1 />
|
|
|
|
<ChainCheckBox checked={checked} readOnly />
|
|
</ChainItemContainer>
|
|
);
|
|
};
|
|
|
|
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;
|
|
line-height: 1rem;
|
|
|
|
color: ${color.white};
|
|
`;
|
|
|
|
export const WalletAddress = styled.div`
|
|
font-weight: 500;
|
|
font-size: 0.8rem;
|
|
line-height: 1rem;
|
|
|
|
max-height: 2rem;
|
|
max-width: 27rem;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
color: ${color.grey["400"]};
|
|
`;
|
|
|
|
export const ChainCheckBox = styled.input.attrs({ type: "checkbox" })`
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
`;
|