LaconicNetwork/icns-frontend
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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> <ModalContainer>
<ModalTitle>Connect Wallet</ModalTitle> <ModalTitle>Connect Wallet</ModalTitle>
<ModalDescription> <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> </ModalDescription>
{WalletList.map((walletItem) => { {WalletList.map((walletItem) => {
@ -53,7 +54,7 @@ const ModalContainer = styled.div`
gap: 0.9rem; gap: 0.9rem;
padding: 2.2rem; padding: 2.2rem;
min-width: 28rem; max-width: 28.5rem;
`; `;
const ModalTitle = styled.div` 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 ( return (
<WalletContainer isReady={wallet.isReady} onClick={onClickWalletItem}> <WalleButton disabled={!wallet.isReady} onClick={onClickWalletItem}>
<WalletIcon> <WalletIcon>
<Image <Image
src={wallet.image} src={wallet.image}
@ -82,29 +82,38 @@ export const WalletItem: FunctionComponent<Props> = (props: Props) => {
<WalletDescription>Go to install Keplr Extension</WalletDescription> <WalletDescription>Go to install Keplr Extension</WalletDescription>
) )
) : ( ) : (
<WalletDescription>Comming soon</WalletDescription> <WalletDescription>Coming soon</WalletDescription>
)} )}
</WalletContentContainer> </WalletContentContainer>
<Flex1 /> <Flex1 />
<Image src={ArrowRightIcon} alt="arrow right icon" /> <Image src={ArrowRightIcon} alt="arrow right icon" />
</WalletContainer> </WalleButton>
); );
}; };
const WalletContainer = styled.div<{ isReady: boolean }>` const WalleButton = styled.button`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
border: none;
height: 5.8rem; height: 5.8rem;
padding: 1rem; padding: 1rem;
background-color: ${color.grey["600"]}; 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` const WalletIcon = styled.div`