LaconicNetwork/icns-frontend
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add select wallet modal component

Browse Source
This commit is contained in:
HeesungB 2022-12-12 15:51:25 +09:00
parent b33309493a
commit 564b401331
18 changed files with 455 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
.pnp.cjs generated
View File

@ -33,6 +33,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["@types/node", "npm:18.11.9"],\
["@types/react", "npm:18.0.25"],\
["@types/react-dom", "npm:18.0.9"],\
["@types/react-modal", "npm:3.13.1"],\
["@types/styled-components", "npm:5.1.26"],\
["@typescript-eslint/eslint-plugin", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:5.45.0"],\
["@typescript-eslint/parser", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:5.45.0"],\
@ -53,6 +54,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["react", "npm:18.2.0"],\
["react-dom", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:18.2.0"],\
["react-is", "npm:18.2.0"],\
["react-modal", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:3.16.1"],\
["styled-components", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:5.3.6"],\
["typescript", "patch:typescript@npm%3A4.9.3#~builtin<compat/typescript>::version=4.9.3&hash=d73830"]\
],\
@ -933,6 +935,16 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
"linkType": "HARD"\
}]\
]],\
["@types/react-modal", [\
["npm:3.13.1", {\
"packageLocation": "./.yarn/cache/@types-react-modal-npm-3.13.1-6bb3eb42bb-b0ad403e00.zip/node_modules/@types/react-modal/",\
"packageDependencies": [\
["@types/react-modal", "npm:3.13.1"],\
["@types/react", "npm:18.0.25"]\
],\
"linkType": "HARD"\
}]\
]],\
["@types/scheduler", [\
["npm:0.16.2", {\
"packageLocation": "./.yarn/cache/@types-scheduler-npm-0.16.2-ba3a7d8c68-b6b4dcfeae.zip/node_modules/@types/scheduler/",\
@ -2488,6 +2500,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
"linkType": "HARD"\
}]\
]],\
["exenv", [\
["npm:1.2.2", {\
"packageLocation": "./.yarn/cache/exenv-npm-1.2.2-eeb9069149-a894f3b60a.zip/node_modules/exenv/",\
"packageDependencies": [\
["exenv", "npm:1.2.2"]\
],\
"linkType": "HARD"\
}]\
]],\
["fast-deep-equal", [\
["npm:3.1.3", {\
"packageLocation": "./.yarn/cache/fast-deep-equal-npm-3.1.3-790edcfcf5-e21a9d8d84.zip/node_modules/fast-deep-equal/",\
@ -2923,6 +2944,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["@types/node", "npm:18.11.9"],\
["@types/react", "npm:18.0.25"],\
["@types/react-dom", "npm:18.0.9"],\
["@types/react-modal", "npm:3.13.1"],\
["@types/styled-components", "npm:5.1.26"],\
["@typescript-eslint/eslint-plugin", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:5.45.0"],\
["@typescript-eslint/parser", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:5.45.0"],\
@ -2943,6 +2965,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["react", "npm:18.2.0"],\
["react-dom", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:18.2.0"],\
["react-is", "npm:18.2.0"],\
["react-modal", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:3.16.1"],\
["styled-components", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:5.3.6"],\
["typescript", "patch:typescript@npm%3A4.9.3#~builtin<compat/typescript>::version=4.9.3&hash=d73830"]\
],\
@ -4108,6 +4131,45 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
"linkType": "HARD"\
}]\
]],\
["react-lifecycles-compat", [\
["npm:3.0.4", {\
"packageLocation": "./.yarn/cache/react-lifecycles-compat-npm-3.0.4-d5e285a39e-a904b0fc0a.zip/node_modules/react-lifecycles-compat/",\
"packageDependencies": [\
["react-lifecycles-compat", "npm:3.0.4"]\
],\
"linkType": "HARD"\
}]\
]],\
["react-modal", [\
["npm:3.16.1", {\
"packageLocation": "./.yarn/cache/react-modal-npm-3.16.1-3ba7cf9e93-978936e932.zip/node_modules/react-modal/",\
"packageDependencies": [\
["react-modal", "npm:3.16.1"]\
],\
"linkType": "SOFT"\
}],\
["virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:3.16.1", {\
"packageLocation": "./.yarn/__virtual__/react-modal-virtual-f4afc3f69f/0/cache/react-modal-npm-3.16.1-3ba7cf9e93-978936e932.zip/node_modules/react-modal/",\
"packageDependencies": [\
["react-modal", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:3.16.1"],\
["@types/react", "npm:18.0.25"],\
["@types/react-dom", "npm:18.0.9"],\
["exenv", "npm:1.2.2"],\
["prop-types", "npm:15.8.1"],\
["react", "npm:18.2.0"],\
["react-dom", "virtual:4b77e00d446246df1ed27001550885fbf1b51be18c660c1b5c357d3d763078ecef2a676194291a120f149b87573081e5af0621dc83cf1f83383639f39ac133c7#npm:18.2.0"],\
["react-lifecycles-compat", "npm:3.0.4"],\
["warning", "npm:4.0.3"]\
],\
"packagePeers": [\
"@types/react-dom",\
"@types/react",\
"react-dom",\
"react"\
],\
"linkType": "HARD"\
}]\
]],\
["read-pkg", [\
["npm:5.2.0", {\
"packageLocation": "./.yarn/cache/read-pkg-npm-5.2.0-50426bd8dc-eb696e6052.zip/node_modules/read-pkg/",\
@ -4805,6 +4867,16 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
"linkType": "HARD"\
}]\
]],\
["warning", [\
["npm:4.0.3", {\
"packageLocation": "./.yarn/cache/warning-npm-4.0.3-291e921d6d-4f2cb6a957.zip/node_modules/warning/",\
"packageDependencies": [\
["warning", "npm:4.0.3"],\
["loose-envify", "npm:1.4.0"]\
],\
"linkType": "HARD"\
}]\
]],\
["webcrypto-core", [\
["npm:1.7.5", {\
"packageLocation": "./.yarn/cache/webcrypto-core-npm-1.7.5-4734fab0f3-f6e529ca5c.zip/node_modules/webcrypto-core/",\

BIN
.yarn/cache/@types-react-modal-npm-3.13.1-6bb3eb42bb-b0ad403e00.zip vendored Normal file
View File

Binary file not shown.

BIN
.yarn/cache/exenv-npm-1.2.2-eeb9069149-a894f3b60a.zip vendored Normal file
View File

Binary file not shown.

BIN
.yarn/cache/react-lifecycles-compat-npm-3.0.4-d5e285a39e-a904b0fc0a.zip vendored Normal file
View File

Binary file not shown.

BIN
.yarn/cache/react-modal-npm-3.16.1-3ba7cf9e93-978936e932.zip vendored Normal file
View File

Binary file not shown.

BIN
.yarn/cache/warning-npm-4.0.3-291e921d6d-4f2cb6a957.zip vendored Normal file
View File

Binary file not shown.

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

@ -8,6 +8,7 @@ import {
import Image from "next/image";
import color from "../../styles/color";
import { Flex1 } from "../../styles/flex-1";
import styled from "styled-components";
interface Props {
@ -53,10 +54,6 @@ const WalletAddress = styled.div`
color: ${color.grey["400"]};
`;
const Flex1 = styled.div`
flex: 1;
`;
const ChainCheckBox = styled.input.attrs({ type: "checkbox" })`
width: 1.5rem;
height: 1.5rem;

74
components/connect-wallet-modal/index.tsx Normal file
View File

@ -0,0 +1,74 @@
import { FunctionComponent } from "react";
import ReactModal from "react-modal";
import styled from "styled-components";
import color from "../../styles/color";
import { WalletList } from "../../constants/wallet";
import { WalletItem } from "./wallet-item";
interface Props {
isModalOpen: boolean;
onCloseModal: () => void;
}
export const ConnectWalletModal: FunctionComponent<Props> = (props) => {
const { isModalOpen, onCloseModal } = props;
return (
<ReactModal
isOpen={isModalOpen}
onRequestClose={onCloseModal}
style={{
overlay: { background: "#181818b3" },
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
padding: 0,
marginRight: "-50%",
transform: "translate(-50%, -50%)",
background: color.grey["800"],
border: 0,
},
}}
>
<ModalContainer>
<ModalTitle>Connect Wallet</ModalTitle>
<ModalDescription>
Plz check which account is selected after you connect it
</ModalDescription>
{WalletList.map((walletItem) => {
return <WalletItem wallet={walletItem} key={walletItem.name} />;
})}
</ModalContainer>
</ReactModal>
);
};
const ModalContainer = styled.div`
display: flex;
flex-direction: column;
gap: 0.9rem;
padding: 2.2rem;
`;
const ModalTitle = styled.div`
font-family: "Inter", serif;
font-style: normal;
font-weight: 600;
font-size: 1.5rem;
line-height: 1.8rem;
color: ${color.white};
`;
const ModalDescription = styled.div`
font-family: "Inter", serif;
font-style: normal;
font-weight: 500;
font-size: 0.8rem;
line-height: 1.1rem;
color: ${color.grey["400"]};
`;

98
components/connect-wallet-modal/modal.tsx Normal file
View File

@ -0,0 +1,98 @@
import ReactModal from "react-modal";
import { FunctionComponent } from "react";
import styled from "styled-components";
import color from "../../styles/color";
interface Props {
isModalOpen: boolean;
onCloseModal: () => void;
}
export const ConnectWalletModal: FunctionComponent<Props> = (props) => {
const { isModalOpen, onCloseModal } = props;
return (
<ReactModal
isOpen={isModalOpen}
onRequestClose={onCloseModal}
style={{
overlay: { background: "#181818b3" },
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
padding: 0,
marginRight: "-50%",
transform: "translate(-50%, -50%)",
background: color.grey["800"],
border: 0,
},
}}
>
<ModalContainer>
<ModalTitle>Connect Wallet</ModalTitle>
<ModalDescription>
Plz check which account is selected after you connect it
</ModalDescription>
{/*<ChainConnectItem>*/}
{/* <ChainConnectIcon>*/}
{/* <Image src={KeplrIcon} fill={true} alt="Keplr Icon" />*/}
{/* </ChainConnectIcon>*/}
{/* <ChainConnectContentContainer>*/}
{/* <ChainConnectContentTitle>Keplr</ChainConnectContentTitle>*/}
{/* </ChainConnectContentContainer>*/}
{/* <Flex1 />*/}
{/* <Image src={ArrowRightIcon} alt="arrow right icon" />*/}
{/*</ChainConnectItem>*/}
{/*<ChainConnectItem>*/}
{/* <ChainConnectIcon>*/}
{/* <Image src={CosmostationIcon} fill={true} alt="Cosmostation Icon" />*/}
{/* </ChainConnectIcon>*/}
{/* <ChainConnectContentContainer>*/}
{/* <ChainConnectContentTitle>Cosmostation</ChainConnectContentTitle>*/}
{/* <ChainConnectContentDescription>*/}
{/* Coming soon*/}
{/* </ChainConnectContentDescription>*/}
{/* </ChainConnectContentContainer>*/}
{/* <Flex1 />*/}
{/* <Image src={ArrowRightIcon} alt="arrow right icon" />*/}
{/*</ChainConnectItem>*/}
</ModalContainer>
</ReactModal>
);
};
const ModalContainer = styled.div`
display: flex;
flex-direction: column;
gap: 0.9rem;
padding: 2.2rem;
`;
const ModalTitle = styled.div`
font-family: "Inter", serif;
font-style: normal;
font-weight: 600;
font-size: 1.5rem;
line-height: 1.8rem;
color: ${color.white};
`;
const ModalDescription = styled.div`
font-family: "Inter", serif;
font-style: normal;
font-weight: 500;
font-size: 0.8rem;
line-height: 1.1rem;
color: ${color.grey["400"]};
`;

92
components/connect-wallet-modal/wallet-item.tsx Normal file
View File

@ -0,0 +1,92 @@
import { FunctionComponent } from "react";
import ArrowRightIcon from "../../public/images/svg/arrow-right.svg";
import color from "../../styles/color";
import { Flex1 } from "../../styles/flex-1";
import styled from "styled-components";
import Image from "next/image";
import { WalletType } from "../../constants/wallet";
import { TwitterAuthUrlResponse } from "../../types";
interface Props {
wallet: WalletType;
}
export const WalletItem: FunctionComponent<Props> = (props: Props) => {
const { wallet } = props;
const onClickWalletItem = async () => {
const { authUrl }: TwitterAuthUrlResponse = await (
await fetch("/api/twitter-auth-url")
).json();
window.location.href = authUrl;
};
return (
<WalletContainer isReady={wallet.isReady} onClick={onClickWalletItem}>
<WalletIcon>
<Image src={wallet.image} fill={true} alt="wallet Icon" />
</WalletIcon>
<WalletContentContainer>
<WalletName>{wallet.name}</WalletName>
{wallet.isReady ? null : (
<WalletDescription>Comming soon</WalletDescription>
)}
</WalletContentContainer>
<Flex1 />
<Image src={ArrowRightIcon} alt="arrow right icon" />
</WalletContainer>
);
};
const WalletContainer = styled.div<{ isReady: boolean }>`
display: flex;
flex-direction: row;
align-items: center;
height: 5.8rem;
padding: 1rem;
background-color: ${color.grey["600"]};
opacity: ${(props) => (props.isReady ? 1 : 0.3)};
cursor: ${(props) => (props.isReady ? "pointer" : "default")};
`;
const WalletIcon = styled.div`
position: relative;
width: 3.75rem;
height: 3.75rem;
`;
const WalletContentContainer = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
padding-left: 1rem;
`;
const WalletName = styled.div`
font-family: "Inter", serif;
font-style: normal;
font-weight: 600;
font-size: 1.3rem;
line-height: 1.5rem;
text-align: center;
color: ${color.white};
`;
const WalletDescription = styled.div`
font-family: "Inter", serif;
font-style: normal;
font-weight: 600;
font-size: 0.8rem;
line-height: 1.1rem;
color: ${color.grey["300"]};
`;

23
constants/wallet.ts Normal file
View File

@ -0,0 +1,23 @@
import { StaticImageData } from "next/image";
import KeplrIcon from "../public/images/svg/keplr-icon.svg";
import CosmostationIcon from "../public/images/svg/cosmostation-icon.svg";
export interface WalletType {
name: string;
image: StaticImageData;
isReady: boolean;
}
export const WalletList: WalletType[] = [
{
name: "Keplr",
image: KeplrIcon,
isReady: true,
},
{
name: "Cosmostation",
image: CosmostationIcon,
isReady: false,
},
];

2
package.json
View File

@ -16,6 +16,7 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"react-is": "^18.2.0",
"react-modal": "^3.16.1",
"styled-components": "^5.3.6"
},
"devDependencies": {
@ -24,6 +25,7 @@
"@types/node": "18.11.9",
"@types/react": "18.0.25",
"@types/react-dom": "18.0.9",
"@types/react-modal": "^3",
"@types/styled-components": "^5",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",

23
pages/index.tsx
View File

@ -1,12 +1,8 @@
// NextJs
import Image from "next/image";
import Link from "next/link";
// Types
import { TwitterAuthUrlResponse } from "../types/api-response";
// Styles
import styled, { useTheme } from "styled-components";
import styled from "styled-components";
import color from "../styles/color";
// Components
@ -17,14 +13,14 @@ import MainTitle from "../public/images/svg/main-title.svg";
import MainLogo from "../public/images/svg/main-logo.svg";
import CheckIcon from "../public/images/svg/check-icon.svg";
import { Logo } from "../components/logo";
import { useState } from "react";
import { ConnectWalletModal } from "../components/connect-wallet-modal";
export default function Home() {
const handleSignInWithTwitter = async () => {
const { authUrl }: TwitterAuthUrlResponse = await (
await fetch("/api/twitter-auth-url")
).json();
const [isModalOpen, setModalOpen] = useState(false);
window.location.href = authUrl;
const onClickConnectWalletButton = async () => {
setModalOpen(true);
};
return (
@ -40,7 +36,7 @@ export default function Home() {
</MainTitleImageBackground>
<ConnectButtonContainer>
<PrimaryButton onClick={handleSignInWithTwitter}>
<PrimaryButton onClick={onClickConnectWalletButton}>
Connect Wallet
</PrimaryButton>
</ConnectButtonContainer>
@ -66,6 +62,11 @@ export default function Home() {
<Image src={MainLogo} layout="fixed" fill={true} alt="Main Logo" />
</MainLogoContainer>
</MainContainer>
<ConnectWalletModal
isModalOpen={isModalOpen}
onCloseModal={() => setModalOpen(false)}
/>
</Container>
);
}

3
public/images/svg/arrow-right.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="26" height="27" viewBox="0 0 26 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.9906 6.4124L21.0781 13.4999L13.9906 20.5874M20.0938 13.4999L5.72188 13.4999" stroke="#6F6F6F" stroke-width="2" stroke-linecap="square"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 253 B

12
public/images/svg/cosmostation-icon.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="81" height="80" viewBox="0 0 81 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.25" width="80" height="80" rx="20" fill="#1B1B21"/>
<g clip-path="url(#clip0_249_4007)">
<path d="M30.5465 56.0417L19.3466 37.1577C18.779 36.2007 18.779 35.0167 19.3466 34.0597L30.5465 15.1855C31.1141 14.2285 32.1682 13.6365 33.3034 13.6365H55.7032C56.8384 13.6365 57.8925 14.2285 58.4601 15.1855L69.6598 34.0696L64.1562 37.1676L53.8583 19.8325H35.1278L25.7624 35.6186L36.04 52.9538L30.5363 56.0516L30.5465 56.0417Z" fill="#9C6CFF"/>
<path d="M46.5965 66.3028H24.2067C23.0716 66.3028 22.0175 65.7109 21.4499 64.7539L10.25 45.8698L15.7537 42.7718L26.0312 60.1068H44.7515L54.1171 44.3208L43.8396 26.9857L49.3432 23.8877L60.5429 42.7718C61.1105 43.7288 61.1105 44.9127 60.5429 45.8698L49.3432 64.7539C48.7756 65.7109 47.7215 66.3028 46.5863 66.3028H46.5965Z" fill="#05D2DD"/>
</g>
<defs>
<clipPath id="clip0_249_4007">
<rect width="59.0909" height="52.7273" fill="white" transform="translate(10.25 13.6365)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

10
public/images/svg/keplr-icon.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

5
styles/flex-1.ts Normal file
View File

@ -0,0 +1,5 @@
import styled from "styled-components";
export const Flex1 = styled.div`
flex: 1;
`;

53
yarn.lock
View File

@ -732,6 +732,15 @@ __metadata:
languageName: node
linkType: hard
"@types/react-modal@npm:^3":
version: 3.13.1
resolution: "@types/react-modal@npm:3.13.1"
dependencies:
"@types/react": "*"
checksum: b0ad403e0051a2882e9086c6006cc342901b1c90caf760893b31717a5cbc04f86cc1ea7b5ce12a2c8350c9c09e9b344de3783404e70b7c7ea6a037d0ffd70e99
languageName: node
linkType: hard
"@types/react@npm:*, @types/react@npm:18.0.25":
version: 18.0.25
resolution: "@types/react@npm:18.0.25"
@ -1867,6 +1876,13 @@ __metadata:
languageName: node
linkType: hard
"exenv@npm:^1.2.0":
version: 1.2.2
resolution: "exenv@npm:1.2.2"
checksum: a894f3b60ab8419e0b6eec99c690a009c8276b4c90655ccaf7d28faba2de3a6b93b3d92210f9dc5efd36058d44f04098f6bbccef99859151104bfd49939904dc
languageName: node
linkType: hard
"fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
version: 3.1.3
resolution: "fast-deep-equal@npm:3.1.3"
@ -2253,6 +2269,7 @@ __metadata:
"@types/node": 18.11.9
"@types/react": 18.0.25
"@types/react-dom": 18.0.9
"@types/react-modal": ^3
"@types/styled-components": ^5
"@typescript-eslint/eslint-plugin": ^5.45.0
"@typescript-eslint/parser": ^5.45.0
@ -2273,6 +2290,7 @@ __metadata:
react: 18.2.0
react-dom: 18.2.0
react-is: ^18.2.0
react-modal: ^3.16.1
styled-components: ^5.3.6
typescript: 4.9.3
languageName: unknown
@ -2759,7 +2777,7 @@ __metadata:
languageName: node
linkType: hard
"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
version: 1.4.0
resolution: "loose-envify@npm:1.4.0"
dependencies:
@ -3225,7 +3243,7 @@ __metadata:
languageName: node
linkType: hard
"prop-types@npm:^15.8.1":
"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
version: 15.8.1
resolution: "prop-types@npm:15.8.1"
dependencies:
@ -3292,6 +3310,28 @@ __metadata:
languageName: node
linkType: hard
"react-lifecycles-compat@npm:^3.0.0":
version: 3.0.4
resolution: "react-lifecycles-compat@npm:3.0.4"
checksum: a904b0fc0a8eeb15a148c9feb7bc17cec7ef96e71188280061fc340043fd6d8ee3ff233381f0e8f95c1cf926210b2c4a31f38182c8f35ac55057e453d6df204f
languageName: node
linkType: hard
"react-modal@npm:^3.16.1":
version: 3.16.1
resolution: "react-modal@npm:3.16.1"
dependencies:
exenv: ^1.2.0
prop-types: ^15.7.2
react-lifecycles-compat: ^3.0.0
warning: ^4.0.3
peerDependencies:
react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
react-dom: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
checksum: 978936e9320fad839c039b9ee4de55d40888156cb40e093615d6fbc2ff07139d5db06f14782cb7767f780bd5fb57956778669426c535ebc0068a7a03882c7e75
languageName: node
linkType: hard
"react@npm:18.2.0":
version: 18.2.0
resolution: "react@npm:18.2.0"
@ -3926,6 +3966,15 @@ __metadata:
languageName: node
linkType: hard
"warning@npm:^4.0.3":
version: 4.0.3
resolution: "warning@npm:4.0.3"
dependencies:
loose-envify: ^1.0.0
checksum: 4f2cb6a9575e4faf71ddad9ad1ae7a00d0a75d24521c193fa464f30e6b04027bd97aa5d9546b0e13d3a150ab402eda216d59c1d0f2d6ca60124d96cd40dfa35c
languageName: node
linkType: hard
"webcrypto-core@npm:^1.7.4":
version: 1.7.5
resolution: "webcrypto-core@npm:1.7.5"