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

Update style of wallet connect modal

Browse Source
This commit is contained in:
delivan 2022-12-19 16:38:50 +09:00
parent e25963c81b
commit 92142dce9a
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/connect-wallet-modal/modal.tsx
View File

@ -36,7 +36,8 @@ export const ConnectWalletModal: FunctionComponent<Props> = (props) => {
<ModalContainer>
<ModalTitle>Connect Wallet</ModalTitle>
<ModalDescription>
Plz check which account is selected after you connect it
Make sure you have the correst account to cliam your ICNS name is
slelected on your wallet
</ModalDescription>
{WalletList.map((walletItem) => {
@ -53,7 +54,7 @@ const ModalContainer = styled.div`
gap: 0.9rem;
padding: 2.2rem;
min-width: 28rem;
max-width: 28.5rem;
`;
const ModalTitle = styled.div`

21
components/connect-wallet-modal/wallet-item.tsx
View File

@ -66,7 +66,7 @@ export const WalletItem: FunctionComponent<Props> = (props: Props) => {
};
return (
<WalletContainer isReady={wallet.isReady} onClick={onClickWalletItem}>
<WalleButton disabled={!wallet.isReady} onClick={onClickWalletItem}>
<WalletIcon>
<Image
src={wallet.image}
@ -82,29 +82,38 @@ export const WalletItem: FunctionComponent<Props> = (props: Props) => {
<WalletDescription>Go to install Keplr Extension</WalletDescription>
)
) : (
<WalletDescription>Comming soon</WalletDescription>
<WalletDescription>Coming soon</WalletDescription>
)}
</WalletContentContainer>
<Flex1 />
<Image src={ArrowRightIcon} alt="arrow right icon" />
</WalletContainer>
</WalleButton>
);
};
const WalletContainer = styled.div<{ isReady: boolean }>`
const WalleButton = styled.button`
display: flex;
flex-direction: row;
align-items: center;
border: none;
height: 5.8rem;
padding: 1rem;
background-color: ${color.grey["600"]};
opacity: ${(props) => (props.isReady ? 1 : 0.3)};
cursor: ${(props) => (props.isReady ? "pointer" : "default")};
&:hover:not(:disabled) {
background-color: ${color.grey["700"]};
cursor: pointer;
}
&:disabled {
opacity: 0.3;
cursor: not-allowed;
}
`;
const WalletIcon = styled.div`