status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Login wallet (#164)

This commit is contained in:
Maria Rushkova 2022-01-03 09:19:13 +01:00 committed by GitHub
parent 094976642a
commit 4ee1535f09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 487 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/react-chat/src/components/Chat.tsx
View File

@ -10,11 +10,14 @@ import { ChatBody } from "./Chat/ChatBody";
import { ChatCreation } from "./Chat/ChatCreation"; import { ChatCreation } from "./Chat/ChatCreation";
import { Community } from "./Community"; import { Community } from "./Community";
import { Members } from "./Members/Members"; import { Members } from "./Members/Members";
import { CoinbaseModal } from "./Modals/CoinbaseModal";
import { CommunityModal } from "./Modals/CommunityModal"; import { CommunityModal } from "./Modals/CommunityModal";
import { EditModal } from "./Modals/EditModal"; import { EditModal } from "./Modals/EditModal";
import { ProfileModal } from "./Modals/ProfileModal"; import { ProfileModal } from "./Modals/ProfileModal";
import { StatusModal } from "./Modals/StatusModal"; import { StatusModal } from "./Modals/StatusModal";
import { UserCreationModal } from "./Modals/UserCreationModal"; import { UserCreationModal } from "./Modals/UserCreationModal";
import { WalletConnectModal } from "./Modals/WalletConnectModal";
import { WalletModal } from "./Modals/WalletModal";
import { ToastMessageList } from "./ToastMessages/ToastMessageList"; import { ToastMessageList } from "./ToastMessages/ToastMessageList";
import { UserCreation } from "./UserCreation/UserCreation"; import { UserCreation } from "./UserCreation/UserCreation";
@ -26,6 +29,9 @@ function Modals() {
<EditModal /> <EditModal />
<ProfileModal /> <ProfileModal />
<StatusModal /> <StatusModal />
<WalletModal />
<WalletConnectModal />
<CoinbaseModal />
</> </>
); );
} }

17
packages/react-chat/src/components/Form/CopyInput.tsx
View File

@ -3,21 +3,28 @@ import React from "react";
import { copy } from "../../utils/copy"; import { copy } from "../../utils/copy";
import { reduceString } from "../../utils/reduceString"; import { reduceString } from "../../utils/reduceString";
import { ButtonWrapper, InputBtn, Label, Text, Wrapper } from "./inputStyles"; import {
ButtonWrapper,
InputBtn,
InputWrapper,
Label,
Text,
Wrapper,
} from "./inputStyles";
interface CopyInputProps { interface CopyInputProps {
label: string; label?: string;
value: string; value: string;
} }
export const CopyInput = ({ label, value }: CopyInputProps) => ( export const CopyInput = ({ label, value }: CopyInputProps) => (
<div> <InputWrapper>
<Label>{label}</Label> {label && <Label>{label}</Label>}
<Wrapper> <Wrapper>
<Text>{reduceString(value, 15, 15)}</Text> <Text>{reduceString(value, 15, 15)}</Text>
<ButtonWrapper> <ButtonWrapper>
<InputBtn onClick={() => copy(value)}>Copy</InputBtn> <InputBtn onClick={() => copy(value)}>Copy</InputBtn>
</ButtonWrapper> </ButtonWrapper>
</Wrapper> </Wrapper>
</div> </InputWrapper>
); );

9
packages/react-chat/src/components/Form/PasteInput.tsx
View File

@ -7,6 +7,7 @@ import {
ButtonWrapper, ButtonWrapper,
InputBtn, InputBtn,
inputStyles, inputStyles,
InputWrapper,
Label, Label,
Wrapper, Wrapper,
} from "./inputStyles"; } from "./inputStyles";
@ -16,7 +17,7 @@ interface PasteInputProps {
} }
export const PasteInput = ({ label }: PasteInputProps) => ( export const PasteInput = ({ label }: PasteInputProps) => (
<PasteWrapper> <InputWrapper>
<Label>{label}</Label> <Label>{label}</Label>
<Wrapper> <Wrapper>
<Input id="pasteInput" type="text" placeholder="eg. 0x2Ef19" /> <Input id="pasteInput" type="text" placeholder="eg. 0x2Ef19" />
@ -24,13 +25,9 @@ export const PasteInput = ({ label }: PasteInputProps) => (
<InputBtn onClick={() => paste("pasteInput")}>Paste</InputBtn> <InputBtn onClick={() => paste("pasteInput")}>Paste</InputBtn>
</ButtonWrapper> </ButtonWrapper>
</Wrapper> </Wrapper>
</PasteWrapper> </InputWrapper>
); );
const PasteWrapper = styled.div`
width: 100%;
`;
const Input = styled.input` const Input = styled.input`
${inputStyles} ${inputStyles}
width: 100%; width: 100%;

4
packages/react-chat/src/components/Form/inputStyles.ts
View File

@ -27,6 +27,10 @@ export const Label = styled.p`
${textSmallStyles} ${textSmallStyles}
`; `;
export const InputWrapper = styled.div`
width: 100%;
`;
export const Wrapper = styled.div` export const Wrapper = styled.div`
position: relative; position: relative;
padding: 14px 70px 14px 8px; padding: 14px 70px 14px 8px;

50
packages/react-chat/src/components/Icons/CoinbaseLogo.tsx Normal file
View File

@ -0,0 +1,50 @@
import React from "react";
export const CoinbaseLogo = () => {
return (
<svg
width="40"
height="40"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32C24.8366 32 32 24.8366 32 16Z"
fill="url(#paint0_linear_1510_436085)"
/>
<path
d="M25 16C25 11.0294 20.9706 7 16 7C11.0294 7 7 11.0294 7 16C7 20.9706 11.0294 25 16 25C20.9706 25 25 20.9706 25 16Z"
fill="white"
/>
<path
d="M18 13H14C13.4477 13 13 13.4477 13 14V18C13 18.5523 13.4477 19 14 19H18C18.5523 19 19 18.5523 19 18V14C19 13.4477 18.5523 13 18 13Z"
fill="url(#paint1_linear_1510_436085)"
/>
<defs>
<linearGradient
id="paint0_linear_1510_436085"
x1="16"
y1="0"
x2="16"
y2="32"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#2D66F5" />
<stop offset="1" stopColor="#144ADF" />
</linearGradient>
<linearGradient
id="paint1_linear_1510_436085"
x1="16"
y1="13"
x2="16"
y2="19"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#2D66F5" />
<stop offset="1" stopColor="#144ADF" />
</linearGradient>
</defs>
</svg>
);
};

217
packages/react-chat/src/components/Icons/MetamaskLogo.tsx Normal file
View File

@ -0,0 +1,217 @@
import React from "react";
export const MetamaskLogo = () => {
return (
<svg
width="40"
height="38"
viewBox="0 0 40 38"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M38.009 0.457031L22.4014 12.049L25.2876 5.20991L38.009 0.457031Z"
fill="#E2761B"
stroke="#E2761B"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1.97632 0.457031L17.4585 12.1588L14.7134 5.20991L1.97632 0.457031Z"
fill="#E4761B"
stroke="#E4761B"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M32.3912 27.3257L28.2344 33.6942L37.1284 36.1413L39.6852 27.4669L32.3912 27.3257Z"
fill="#E4761B"
stroke="#E4761B"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M0.329346 27.4669L2.87049 36.1413L11.7645 33.6942L7.60768 27.3257L0.329346 27.4669Z"
fill="#E4761B"
stroke="#E4761B"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11.2618 16.5667L8.78345 20.3157L17.6147 20.7078L17.301 11.2178L11.2618 16.5667Z"
fill="#E4761B"
stroke="#E4761B"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M28.7224 16.5686L22.6048 11.1099L22.4009 20.7097L31.2164 20.3176L28.7224 16.5686Z"
fill="#E4761B"
stroke="#E4761B"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11.7637 33.6939L17.0656 31.1057L12.4852 27.5293L11.7637 33.6939Z"
fill="#E4761B"
stroke="#E4761B"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M22.917 31.1057L28.2346 33.6939L27.4973 27.5293L22.917 31.1057Z"
fill="#E4761B"
stroke="#E4761B"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M28.2353 33.6929L22.9177 31.1047L23.3412 34.5714L23.2942 36.0302L28.2353 33.6929Z"
fill="#D7C1B3"
stroke="#D7C1B3"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11.7644 33.6929L16.7055 36.0302L16.6741 34.5714L17.0663 31.1047L11.7644 33.6929Z"
fill="#D7C1B3"
stroke="#D7C1B3"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M16.7867 25.2418L12.3633 23.9399L15.4848 22.5125L16.7867 25.2418Z"
fill="#233447"
stroke="#233447"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M23.2019 25.2418L24.5038 22.5125L27.6411 23.9399L23.2019 25.2418Z"
fill="#233447"
stroke="#233447"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11.7645 33.6942L12.5174 27.3257L7.60767 27.4669L11.7645 33.6942Z"
fill="#CD6116"
stroke="#CD6116"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M27.4832 27.3257L28.2361 33.6942L32.3929 27.4669L27.4832 27.3257Z"
fill="#CD6116"
stroke="#CD6116"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M31.214 20.3125L22.3984 20.7047L23.2141 25.2379L24.5161 22.5085L27.6533 23.936L31.214 20.3125Z"
fill="#CD6116"
stroke="#CD6116"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12.3604 23.936L15.4976 22.5085L16.7838 25.2379L17.6152 20.7047L8.78394 20.3125L12.3604 23.936Z"
fill="#CD6116"
stroke="#CD6116"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8.78467 20.3125L12.4866 27.5281L12.3611 23.936L8.78467 20.3125Z"
fill="#E4751F"
stroke="#E4751F"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M27.6539 23.936L27.4971 27.5281L31.2146 20.3125L27.6539 23.936Z"
fill="#E4751F"
stroke="#E4751F"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17.6153 20.7063L16.7839 25.2396L17.8192 30.5885L18.0545 23.5455L17.6153 20.7063Z"
fill="#E4751F"
stroke="#E4751F"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M22.4011 20.7063L21.9775 23.5298L22.1658 30.5885L23.2167 25.2396L22.4011 20.7063Z"
fill="#E4751F"
stroke="#E4751F"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M23.2175 25.2402L22.1665 30.5891L22.9194 31.1068L27.4998 27.5304L27.6566 23.9382L23.2175 25.2402Z"
fill="#F6851B"
stroke="#F6851B"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12.3628 23.9382L12.4883 27.5304L17.0686 31.1068L17.8215 30.5891L16.7863 25.2402L12.3628 23.9382Z"
fill="#F6851B"
stroke="#F6851B"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M23.2942 36.0362L23.3412 34.5774L22.9491 34.2323H17.0354L16.6746 34.5774L16.706 36.0362L11.7649 33.699L13.4904 35.1107L16.9884 37.5421H22.9961L26.5098 35.1107L28.2353 33.699L23.2942 36.0362Z"
fill="#C0AD9E"
stroke="#C0AD9E"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M22.9191 31.1055L22.1661 30.5879H17.8211L17.0682 31.1055L16.676 34.5722L17.0368 34.2271H22.9505L23.3426 34.5722L22.9191 31.1055Z"
fill="#161616"
stroke="#161616"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M38.6668 12.802L40.0001 6.40205L38.008 0.457031L22.918 11.6569L28.7218 16.5666L36.9256 18.9666L38.7452 16.849L37.9609 16.2843L39.2158 15.1392L38.2433 14.3863L39.4981 13.4294L38.6668 12.802Z"
fill="#763D16"
stroke="#763D16"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M0 6.40205L1.33332 12.802L0.486268 13.4294L1.74115 14.3863L0.784303 15.1392L2.03919 16.2843L1.25489 16.849L3.05878 18.9666L11.2626 16.5666L17.0664 11.6569L1.97644 0.457031L0 6.40205Z"
fill="#763D16"
stroke="#763D16"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M36.9273 18.9686L28.7235 16.5686L31.2176 20.3176L27.5 27.5332L32.3941 27.4704H39.6881L36.9273 18.9686Z"
fill="#F6851B"
stroke="#F6851B"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11.2625 16.5686L3.05872 18.9686L0.329346 27.4704H7.60768L12.486 27.5332L8.78413 20.3176L11.2625 16.5686Z"
fill="#F6851B"
stroke="#F6851B"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M22.4008 20.7073L22.9184 11.6564L25.3027 5.20947H14.7146L17.0675 11.6564L17.6165 20.7073L17.8048 23.5622L17.8204 30.5895H22.1655L22.1969 23.5622L22.4008 20.7073Z"
fill="#F6851B"
stroke="#F6851B"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};

35
packages/react-chat/src/components/Icons/WalletConnectLogo.tsx Normal file
View File

@ -0,0 +1,35 @@
import React from "react";
export const WalletConnectLogo = () => {
return (
<svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40C31.0457 40 40 31.0457 40 20Z"
fill="url(#paint0_radial_1477_437373)"
/>
<path
d="M13.2191 14.4198C16.9638 10.7533 23.0353 10.7533 26.7801 14.4198L27.2307 14.861C27.418 15.0443 27.418 15.3416 27.2307 15.5249L25.689 17.0344C25.5954 17.126 25.4436 17.126 25.35 17.0344L24.7298 16.4271C22.1174 13.8693 17.8818 13.8693 15.2693 16.4271L14.6051 17.0774C14.5115 17.1691 14.3597 17.1691 14.2661 17.0774L12.7244 15.5679C12.5372 15.3846 12.5372 15.0874 12.7244 14.9041L13.2191 14.4198ZM29.9685 17.5415L31.3406 18.8849C31.5278 19.0683 31.5278 19.3655 31.3406 19.5488L25.1536 25.6065C24.9663 25.7898 24.6628 25.7898 24.4755 25.6065C24.4755 25.6065 24.4755 25.6065 24.4755 25.6065L20.0843 21.3072C20.0375 21.2614 19.9616 21.2614 19.9148 21.3072C19.9148 21.3072 19.9148 21.3072 19.9148 21.3072L15.5237 25.6065C15.3365 25.7898 15.0329 25.7898 14.8457 25.6065C14.8457 25.6065 14.8457 25.6065 14.8457 25.6065L8.6585 19.5487C8.47126 19.3654 8.47126 19.0682 8.6585 18.8849L10.0306 17.5414C10.2179 17.3581 10.5214 17.3581 10.7087 17.5414L15.0999 21.8408C15.1467 21.8867 15.2226 21.8867 15.2694 21.8408C15.2694 21.8408 15.2694 21.8408 15.2694 21.8408L19.6605 17.5414C19.8477 17.3581 20.1513 17.3581 20.3385 17.5414C20.3385 17.5414 20.3385 17.5414 20.3385 17.5414L24.7297 21.8408C24.7766 21.8866 24.8524 21.8866 24.8993 21.8408L29.2904 17.5415C29.4777 17.3582 29.7812 17.3582 29.9685 17.5415Z"
fill="white"
/>
<defs>
<radialGradient
id="paint0_radial_1477_437373"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(0 20) scale(40)"
>
<stop stopColor="#5D9DF6" />
<stop offset="1" stopColor="#006FFF" />
</radialGradient>
</defs>
</svg>
);
};

18
packages/react-chat/src/components/Modals/CoinbaseModal.tsx Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
import { ConnectModal } from "./ConnectModal";
import { Modal } from "./Modal";
export const CoinbaseModalName = "CoinbaseModal";
export function CoinbaseModal() {
return (
<Modal name={CoinbaseModalName}>
<ConnectModal
name="Coinbase Wallet"
text="Scan QR code or copy and pase it in your Coinbase Wallet."
address="https://www.coinbase.com/wallet"
/>
</Modal>
);
}

32
packages/react-chat/src/components/Modals/ConnectModal.tsx Normal file
View File

@ -0,0 +1,32 @@
import QRCode from "qrcode.react";
import React from "react";
import { CopyInput } from "../Form/CopyInput";
import { Heading, MiddleSection, QRWrapper, Section, Text } from "./ModalStyle";
export const ConnectModalName = "ConnectModal";
interface ConnectModalProps {
name: string;
address: string;
text: string;
}
export function ConnectModal({ name, address, text }: ConnectModalProps) {
return (
<>
<Section>
<Heading>Connect with {name}</Heading>
</Section>
<MiddleSection>
<Text>{text}</Text>
<QRWrapper>
{" "}
<QRCode value={address} size={224} />
</QRWrapper>
<CopyInput value="2Ef1907d50926...6dt4cEbd975aC5E0Ba" />
</MiddleSection>
</>
);
}

10
packages/react-chat/src/components/Modals/ModalStyle.tsx
View File

@ -11,6 +11,12 @@ export const Section = styled.div`
} }
`; `;
export const MiddleSection = styled(Section)`
display: flex;
flex-direction: column;
align-items: center;
`;
export const Heading = styled.p` export const Heading = styled.p`
color: ${({ theme }) => theme.primary}; color: ${({ theme }) => theme.primary};
font-weight: bold; font-weight: bold;
@ -73,3 +79,7 @@ export const AddWrapper = styled.div`
background: ${({ theme }) => theme.tertiary}; background: ${({ theme }) => theme.tertiary};
border-radius: 50%; border-radius: 50%;
`; `;
export const QRWrapper = styled.div`
margin: 30px 0;
`;

11
packages/react-chat/src/components/Modals/StatusModal.tsx
View File

@ -7,7 +7,7 @@ import { LoginInstructions } from "../Form/LoginInstructions";
import { PasteInput } from "../Form/PasteInput"; import { PasteInput } from "../Form/PasteInput";
import { Modal } from "./Modal"; import { Modal } from "./Modal";
import { Heading, Section } from "./ModalStyle"; import { Heading, MiddleSection, Section } from "./ModalStyle";
export const StatusModalName = "StatusModal"; export const StatusModalName = "StatusModal";
@ -32,7 +32,7 @@ export function StatusModal() {
<Section> <Section>
<Heading>Sync with Status profile</Heading> <Heading>Sync with Status profile</Heading>
</Section> </Section>
<MiddleSection> <MiddleSectionStatus>
<Switch> <Switch>
<SwitchBtn <SwitchBtn
className={`${modalState === StatusModalState.Mobile && "active"}`} className={`${modalState === StatusModalState.Mobile && "active"}`}
@ -53,15 +53,12 @@ export function StatusModal() {
{desktopFlow && <PasteInput label="Paste sync code" />} {desktopFlow && <PasteInput label="Paste sync code" />}
<LoginInstructions mobileFlow={mobileFlow} /> <LoginInstructions mobileFlow={mobileFlow} />
</MiddleSection> </MiddleSectionStatus>
</Modal> </Modal>
); );
} }
const MiddleSection = styled(Section)` const MiddleSectionStatus = styled(MiddleSection)`
display: flex;
flex-direction: column;
align-items: center;
height: 514px; height: 514px;
`; `;

19
packages/react-chat/src/components/Modals/WalletConnectModal.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from "react";
import { ConnectModal } from "./ConnectModal";
import { Modal } from "./Modal";
export const WalletConnectModalName = "WalletConnectModal";
export function WalletConnectModal() {
return (
<Modal name={WalletConnectModalName}>
<ConnectModal
name="WalletConnect"
text="Scan QR code with a WallectConnect-compatible wallet or copy code and
paste it in your hardware wallet."
address="https://walletconnect.com/"
/>
</Modal>
);
}

72
packages/react-chat/src/components/Modals/WalletModal.tsx Normal file
View File

@ -0,0 +1,72 @@
import React from "react";
import styled from "styled-components";
import { useModal } from "../../contexts/modalProvider";
import { CoinbaseLogo } from "../Icons/CoinbaseLogo";
import { MetamaskLogo } from "../Icons/MetamaskLogo";
import { WalletConnectLogo } from "../Icons/WalletConnectLogo";
import { CoinbaseModalName } from "./CoinbaseModal";
import { Modal } from "./Modal";
import { Heading, MiddleSection, Section, Text } from "./ModalStyle";
import { WalletConnectModalName } from "./WalletConnectModal";
export const WalletModalName = "WalletModal";
export function WalletModal() {
const { setModal } = useModal(WalletModalName);
const { setModal: setWalleConnectModal } = useModal(WalletConnectModalName);
const { setModal: setCoinbaseModal } = useModal(CoinbaseModalName);
return (
<Modal name={WalletModalName}>
<Section>
<Heading>Connect an Ethereum Wallet</Heading>
</Section>
<MiddleSectionWallet>
<Text>Choose a way to chat using your Ethereum address.</Text>
<Wallets>
<Wallet onClick={() => (setModal(false), setWalleConnectModal(true))}>
<Heading>WalletConnect</Heading>
<WalletConnectLogo />
</Wallet>
<Wallet onClick={() => (setModal(false), setCoinbaseModal(true))}>
<Heading>Coinbase Wallet</Heading>
<CoinbaseLogo />
</Wallet>
<Wallet>
<Heading>MetaMask</Heading>
<MetamaskLogo />
</Wallet>
</Wallets>
</MiddleSectionWallet>
</Modal>
);
}
const MiddleSectionWallet = styled(MiddleSection)`
align-items: stretch;
`;
const Wallets = styled.div`
display: flex;
flex-direction: column;
align-items: center;
margin-top: 16px;
`;
const Wallet = styled.div`
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
padding: 12px 16px;
border: 1px solid ${({ theme }) => theme.skeletonDark};
border-radius: 8px;
cursor: pointer;
&:hover {
background: ${({ theme }) => theme.buttonBgHover};
}
`;

6
packages/react-chat/src/components/UserCreation/UserCreation.tsx
View File

@ -6,11 +6,13 @@ import { buttonStyles, buttonTransparentStyles } from "../Buttons/buttonStyle";
import { ColorChatIcon } from "../Icons/ColorChatIcon"; import { ColorChatIcon } from "../Icons/ColorChatIcon";
import { StatusModalName } from "../Modals/StatusModal"; import { StatusModalName } from "../Modals/StatusModal";
import { UserCreationModalName } from "../Modals/UserCreationModal"; import { UserCreationModalName } from "../Modals/UserCreationModal";
import { WalletModalName } from "../Modals/WalletModal";
import { textSmallStyles } from "../Text"; import { textSmallStyles } from "../Text";
export function UserCreation() { export function UserCreation() {
const { setModal } = useModal(UserCreationModalName); const { setModal } = useModal(UserCreationModalName);
const { setModal: setStatusModal } = useModal(StatusModalName); const { setModal: setStatusModal } = useModal(StatusModalName);
const { setModal: setWalletModal } = useModal(WalletModalName);
return ( return (
<Wrapper> <Wrapper>
@ -19,7 +21,9 @@ export function UserCreation() {
<LoginBtn onClick={() => setStatusModal(true)}> <LoginBtn onClick={() => setStatusModal(true)}>
Sync with Status profile Sync with Status profile
</LoginBtn> </LoginBtn>
<LoginBtn>Connect Ethereum Wallet</LoginBtn> <LoginBtn onClick={() => setWalletModal(true)}>
Connect Ethereum Wallet
</LoginBtn>
<ThrowAwayButton onClick={() => setModal(true)}> <ThrowAwayButton onClick={() => setModal(true)}>
Use a throwaway account Use a throwaway account
</ThrowAwayButton> </ThrowAwayButton>