diff --git a/README.md b/README.md index b58e0af..4df4db1 100644 --- a/README.md +++ b/README.md @@ -1,46 +1,21 @@ -# Getting Started with Create React App +# Token-Dashboard -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). +## The process of creating a new View component in plasmics -## Available Scripts +- Go to the [plasmic website](https://www.plasmic.app) +- Log in to the application by clicking on the Sign In + button - We get to the page of your projects, select the project you need (In my case, this is Marsbase Components) +- Select the Outline item in the left menu (You can see the name of the item if you put the cursor on it and wait a little) +- To the right of the menu is the control panel based on the selected menu +- Let's go through the interface of the panel, from above we see the search and to the right of it the add entity button +- Click on the add button to the right of the search +- Select New component +- A modal window opens, enter a new name for the component, click on the Create component button +- After you will be transferred to the editing panel of the coponent you created +- Congratulations, a new component has been created -In the project directory, you can run: +Plasmic has an excellent interactive guide to all the necessary basics [Plasmic Levels](https://studio.plasmic.app/projects/neE2eL2574vq4hqWRfrzQK) -### `yarn start` +## How to throw propses into components in plasmics -Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.\ -You will also see any lint errors in the console. - -### `yarn test` - -Launches the test runner in the interactive watch mode.\ -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. - -### `yarn build` - -Builds the app for production to the `build` folder.\ -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.\ -Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -### `yarn eject` - -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** - -If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. - -You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). +- All props are created automatically based on the added options \ No newline at end of file diff --git a/package.json b/package.json index c60dbd2..2c28b50 100644 --- a/package.json +++ b/package.json @@ -8,11 +8,13 @@ "@otcmarsbase/token-contract-types": "^0.1.1", "@plasmicapp/loader-react": "^1.0.54", "@plasmicapp/react-web": "^0.2.96", + "@types/react-modal": "^3.13.1", "babel-polyfill": "^6.26.0", "ethers": "^5.6.4", "metamask-react": "^2.4.0", "react": "^18.0.0", "react-dom": "^18.0.0", + "react-modal": "^3.15.1", "react-spinners": "^0.12.0", "swr": "^1.3.0", "typestyle": "^2.3.0", diff --git a/plasmic.json b/plasmic.json index c654e87..f82de93 100644 --- a/plasmic.json +++ b/plasmic.json @@ -160,6 +160,19 @@ "cssFilePath": "plasmic/marsbase_components/PlasmicContainer.module.css", "scheme": "blackbox", "componentType": "component" + }, + { + "id": "OWF7fqE1kH", + "name": "RootContainer", + "type": "managed", + "projectId": "ujWBNnbL2n4RZDdiZiYFdw", + "renderModuleFilePath": "plasmic/marsbase_components/PlasmicRootContainer.tsx", + "importSpec": { + "modulePath": "RootContainer.tsx" + }, + "cssFilePath": "plasmic/marsbase_components/PlasmicRootContainer.module.css", + "scheme": "blackbox", + "componentType": "component" } ], "icons": [ @@ -248,6 +261,6 @@ ] }, "wrapPagesWithGlobalContexts": true, - "cliVersion": "0.1.178", - "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.178/dist/plasmic.schema.json" + "cliVersion": "0.1.182", + "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.182/dist/plasmic.schema.json" } diff --git a/plasmic.lock b/plasmic.lock index 470f26c..e84e756 100644 --- a/plasmic.lock +++ b/plasmic.lock @@ -9,32 +9,32 @@ { "type": "renderModule", "assetId": "IDy-UAQYMv", - "checksum": "02b819a040b7a8e07be867cfef05c39f" + "checksum": "5bae766e79de614345aad85ae3e8a559" }, { "type": "cssRules", "assetId": "IDy-UAQYMv", - "checksum": "02b819a040b7a8e07be867cfef05c39f" + "checksum": "5bae766e79de614345aad85ae3e8a559" }, { "type": "renderModule", "assetId": "sIxKMhfpOf", - "checksum": "4e85a0efacf99a92140eae2bfb3753a9" + "checksum": "8c6861a78ab89fcf9c9be7819ccfaec8" }, { "type": "cssRules", "assetId": "sIxKMhfpOf", - "checksum": "4e85a0efacf99a92140eae2bfb3753a9" + "checksum": "8c6861a78ab89fcf9c9be7819ccfaec8" }, { "type": "renderModule", "assetId": "ArKwfI2osU", - "checksum": "fde4bb3fb282fa515ae8e1783b241b49" + "checksum": "dfc4236e16bd17ace6fdad25f25e932f" }, { "type": "cssRules", "assetId": "ArKwfI2osU", - "checksum": "fde4bb3fb282fa515ae8e1783b241b49" + "checksum": "dfc4236e16bd17ace6fdad25f25e932f" }, { "type": "renderModule", @@ -154,17 +154,27 @@ { "type": "renderModule", "assetId": "514gf0jdxr", - "checksum": "2886a67efb7c0562732c087b28a07214" + "checksum": "88968b9df0564f2ccbb823e258482367" }, { "type": "cssRules", "assetId": "514gf0jdxr", - "checksum": "2886a67efb7c0562732c087b28a07214" + "checksum": "88968b9df0564f2ccbb823e258482367" }, { "type": "globalVariant", "assetId": "3lOXnHZSFmncl", - "checksum": "6f88bbd1e5f3edd6b37f1182c64cbbcb" + "checksum": "8c89fccd16276fb11024eb39e8907277" + }, + { + "type": "renderModule", + "assetId": "OWF7fqE1kH", + "checksum": "f6a1f5f230400688565e88bb827c4554" + }, + { + "type": "cssRules", + "assetId": "OWF7fqE1kH", + "checksum": "f6a1f5f230400688565e88bb827c4554" }, { "assetId": "ujWBNnbL2n4RZDdiZiYFdw", diff --git a/src/components/Input2.tsx b/src/components/Input2.tsx deleted file mode 100644 index aa3fe1d..0000000 --- a/src/components/Input2.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from "react"; -import { - PlasmicInput2, - DefaultInput2Props -} from "./plasmic/marsbase_components/PlasmicInput2"; -import { TextInputRef } from "@plasmicapp/react-web"; - -interface Input2Props extends DefaultInput2Props {} - -function Input2_(props: Input2Props, ref: TextInputRef) { - // @ts-ignore - const { plasmicProps } = PlasmicInput2.useBehavior(props, ref); - return ; -} - -const Input2 = React.forwardRef(Input2_); - -export default Object.assign(Input2, { - __plumeType: "text-input" -}); diff --git a/src/components/InputNew.tsx b/src/components/InputNew.tsx deleted file mode 100644 index 6e4dcdf..0000000 --- a/src/components/InputNew.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from "react"; -import { - PlasmicInputNew, - DefaultInputNewProps -} from "./plasmic/marsbase_components/PlasmicInputNew"; -import { TextInputRef } from "@plasmicapp/react-web"; - -interface InputNewProps extends DefaultInputNewProps {} - -function InputNew_(props: InputNewProps, ref: TextInputRef) { - const { plasmicProps } = PlasmicInputNew.useBehavior( - props, - ref - ); - return ; -} - -const InputNew = React.forwardRef(InputNew_); - -export default Object.assign(InputNew, { - __plumeType: "text-input" -}); diff --git a/src/components/RootContainer.tsx b/src/components/RootContainer.tsx new file mode 100644 index 0000000..247eece --- /dev/null +++ b/src/components/RootContainer.tsx @@ -0,0 +1,48 @@ +// This is a skeleton starter React component generated by Plasmic. +// This file is owned by you, feel free to edit as you see fit. +import * as React from "react"; +import { + PlasmicRootContainer, + DefaultRootContainerProps +} from "./plasmic/marsbase_components/PlasmicRootContainer"; +import { HTMLElementRefOf } from "@plasmicapp/react-web"; + +// Your component props start with props for variants and slots you defined +// in Plasmic, but you can add more here, like event handlers that you can +// attach to named nodes in your component. +// +// If you don't want to expose certain variants or slots as a prop, you can use +// Omit to hide them: +// +// interface RootContainerProps extends Omit { +// // etc. +// } +// +// You can also stop extending from DefaultRootContainerProps altogether and have +// total control over the props for your component. +export interface RootContainerProps extends DefaultRootContainerProps {} + +function RootContainer_( + props: RootContainerProps, + ref: HTMLElementRefOf<"div"> +) { + // Use PlasmicRootContainer to render this component as it was + // designed in Plasmic, by activating the appropriate variants, + // attaching the appropriate event handlers, etc. You + // can also install whatever React hooks you need here to manage state or + // fetch data. + // + // Props you can pass into PlasmicRootContainer are: + // 1. Variants you want to activate, + // 2. Contents for slots you want to fill, + // 3. Overrides for any named node in the component to attach behavior and data, + // 4. Props to set on the root node. + // + // By default, we are just piping all RootContainerProps here, but feel free + // to do whatever works for you. + + return ; +} + +const RootContainer = React.forwardRef(RootContainer_); +export default RootContainer; diff --git a/src/components/molecules/ClaimRewardsModal.tsx b/src/components/molecules/ClaimRewardsModal.tsx index 120c914..eefc48b 100644 --- a/src/components/molecules/ClaimRewardsModal.tsx +++ b/src/components/molecules/ClaimRewardsModal.tsx @@ -1,4 +1,4 @@ -import React, {FC, useContext, useEffect} from 'react'; +import React, {FC, memo, useContext, useEffect} from 'react'; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; import {createPortal} from "react-dom"; import {style} from "typestyle"; @@ -9,12 +9,10 @@ import Input from "../Input"; import questionIcon from '../../assets/question.png'; import {ClaimRewardsModalProps, ClaimRewardsModalLocalizedProps} from "./types"; import {DictionaryContext} from "../../contexts/DictionaryContext"; +import Container from "../Container"; +import {colors} from "./CONSTANTS"; const ClaimRewardsModal: FC = ({all, ...props}) => { - const modalsRoot = document.getElementById('modals'); - - if (!modalsRoot) return null; - const isMobile = useMediaQuery(Queries.mobile) const isTablet = useMediaQuery(Queries.tablet) @@ -26,9 +24,9 @@ const ClaimRewardsModal: FC = ({all, ...props}) => { } }, []) - return createPortal( + return (
-
+
@@ -42,8 +40,9 @@ const ClaimRewardsModal: FC = ({all, ...props}) => { {!all && ( -
- +
+ {props.amount} {props.token}
)} @@ -57,15 +56,23 @@ const ClaimRewardsModal: FC = ({all, ...props}) => { } showUpLabel color={'whiteStroke'} + value={props.availableForClaim} + onChange={props.onAvailableForClaimChange} /> - + + + +
-
, modalsRoot) +
+ ) }; export const ClaimRewardsModalLocalized: FC = (props) => { @@ -97,11 +104,11 @@ const container = (isMobile: boolean) => style({ backdropFilter: `blur(15px)` }) -const modalContainer = style({ +const modalContainer = (isMobile: boolean) => style({ display: 'flex', width: '100%', justifyContent: 'center', - marginBottom: '83px', + marginBottom: isMobile ? '80px' : 'unset' }) const modalWrapper = (isMobile: boolean) => style({ @@ -127,9 +134,9 @@ const modalContent = style({ padding: '23px' }) -const vestingAssetCard = style({ +const vestingAssetCard = (color: string) => style({ backgroundColor: 'rgba(42,42,44,0.4)', - borderLeft: '6px solid rgba(152, 81, 255, 1)', + borderLeft: '6px solid ' + color, padding: '14px', display: 'flex', alignItems: 'center', diff --git a/src/components/molecules/HeaderActions.tsx b/src/components/molecules/HeaderActions.tsx index b0201a8..f4c587e 100644 --- a/src/components/molecules/HeaderActions.tsx +++ b/src/components/molecules/HeaderActions.tsx @@ -15,15 +15,23 @@ export const HeaderActions: FC = ( onSellWithPremium, onBuyNow }) => { - const isMobile = useMediaQuery(Queries.mobile) + const isMobile = useMediaQuery(Queries.mobile); + const isTablet = useMediaQuery(Queries.tablet); + const isDesktop = (!isMobile && !isTablet) return ( - + ) diff --git a/src/components/molecules/HeaderOverview.tsx b/src/components/molecules/HeaderOverview.tsx index a09246f..d60fe54 100644 --- a/src/components/molecules/HeaderOverview.tsx +++ b/src/components/molecules/HeaderOverview.tsx @@ -6,14 +6,17 @@ import {DictionaryContext} from "../../contexts/DictionaryContext" import question from '../../assets/question.png'; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; import {HeaderOverviewProps} from "./types"; +import Container from "../Container"; -const HeaderOverviewVisual: FC = ({title, subTitle}) => { +const HeaderOverviewVisual: FC = ({title, subTitle, howToUseText}) => { - const isMobile = useMediaQuery(Queries.mobile) + const isMobile = useMediaQuery(Queries.mobile); + const isTablet = useMediaQuery(Queries.tablet); + const isDesktop = (!isMobile && !isTablet) return ( -
-
+ + {title} {isMobile ? @@ -24,20 +27,23 @@ const HeaderOverviewVisual: FC = ({title, subTitle}) => { iconLeft={} withIconLeft > - How to use? + {howToUseText} )} - -
-
- {subTitle} -
-
+ + + {subTitle} + + ) } export const NftOverviewLocalized: React.FC = () => { const {nft} = useContext(DictionaryContext); - return + return } diff --git a/src/components/molecules/HowIsDistributionDone.tsx b/src/components/molecules/HowIsDistributionDone.tsx index d01f3ec..3d78baf 100644 --- a/src/components/molecules/HowIsDistributionDone.tsx +++ b/src/components/molecules/HowIsDistributionDone.tsx @@ -3,6 +3,7 @@ import {style} from "typestyle"; import {Text} from '../atoms/Text'; import cosmonaut from '../../assets/cosmonautpng.png'; import {DictionaryContext} from "../../contexts/DictionaryContext"; +import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; interface HowIsProps { title: ReactNode; @@ -10,6 +11,15 @@ interface HowIsProps { } const HowIsDistributionDone: FC = ({title, subTitle}) => { + const isMobile = useMediaQuery(Queries.mobile); + const isTablet = useMediaQuery(Queries.tablet); + + const isDesktop = (!isMobile && !isTablet); + + if (!isDesktop) { + return null; + } + return (
@@ -22,7 +32,6 @@ const HowIsDistributionDone: FC = ({title, subTitle}) => {
-
); }; @@ -36,7 +45,6 @@ const imageContainer = style({ const container = style({ background: `linear-gradient(45deg, rgba(46,23,19,1) 0%, rgba(31,20,43,1) 100%)`, borderRadius: '16px', - marginTop: '90px' }) const content = style({ diff --git a/src/components/molecules/IsBeingSplitted.tsx b/src/components/molecules/IsBeingSplitted.tsx index d64ce7c..9f3d5ec 100644 --- a/src/components/molecules/IsBeingSplitted.tsx +++ b/src/components/molecules/IsBeingSplitted.tsx @@ -3,26 +3,17 @@ import React, {FC, useContext} from 'react'; import {Text} from '../atoms/Text'; import beingSplitted from '../../assets/beingSplitted.png'; -import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; import {IsBeingSplittedLocalizedProps, IsBeingSplittedProps} from "./types"; import {DictionaryContext} from "../../contexts/DictionaryContext"; +import Container from "../Container"; const IsBeingSplitted: FC = ({title, subTitle}) => { - const isMobile = useMediaQuery(Queries.mobile); - const isTablet = useMediaQuery(Queries.tablet); - return ( -
- + + {title} {subTitle} -
+ ); }; diff --git a/src/components/molecules/LearningBlock.tsx b/src/components/molecules/LearningBlock.tsx deleted file mode 100644 index de3c10c..0000000 --- a/src/components/molecules/LearningBlock.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from "react" - -import { FC } from "react" -import { style } from "typestyle" -import { Text } from "../atoms/Text" -import {LearningBlockProps} from "./types"; - -export const LearningBlock: FC = ({ titleText, subtitleText, backgroundImage, videoAttributes, sources }) => { - return ( -
-
- {titleText} - {subtitleText} -
-
- -
-
- ) -} - -const container = (backgroundImage: string) => style({ - backgroundImage: `url(${backgroundImage})`, - backgroundSize: "cover", - backgroundRepeat: "no-repeat", - display: "flex", - flexDirection: "column", - backgroundColor: "grey", - width: "300px", - height: "200px", - color: "white" -}) - -const header = style({ - display: "flex", - flexDirection: "column" -}) - -const video = style({ - width: "200px", - marginTop: "50px", - marginLeft: "20px" -}) diff --git a/src/components/molecules/NftCard.tsx b/src/components/molecules/NftCard.tsx index 2bf5b06..e1464a6 100644 --- a/src/components/molecules/NftCard.tsx +++ b/src/components/molecules/NftCard.tsx @@ -3,23 +3,25 @@ import React, {FC} from 'react'; import {NftCardProps} from "./types"; import {NftCardOverviewLocalized} from "./NftCardOverview"; import Container from "../Container"; -import NftCardActions from "./NftCardActions"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; -import {NftCardMobileProgressBar} from "./NftMobileProgressBar"; +import {NftCardActionsLocalized} from "./NftCardActions"; +import {NftCardProgressLocalized} from "./NftCardProgress"; const NftCard: FC = (props) => { const isMobile = useMediaQuery(Queries.mobile); const isTablet = useMediaQuery(Queries.tablet); - const isNotDesktop = (isMobile || isTablet); + const isDesktop = (!isMobile && !isTablet); return ( = (props) => { amount={props.amount} amountUsd={props.amountUsd} /> - - ); diff --git a/src/components/molecules/NftCardActions.tsx b/src/components/molecules/NftCardActions.tsx index ce2aedf..bef54ab 100644 --- a/src/components/molecules/NftCardActions.tsx +++ b/src/components/molecules/NftCardActions.tsx @@ -1,9 +1,13 @@ -import React, {FC} from 'react'; +import React, {FC, useContext} from 'react'; import {Button} from "../atoms/Button"; -import {NftCardActionsProps} from "./types"; +import {NftCardActionsLocalizedProps, NftCardActionsProps} from "./types"; import {Text} from "../atoms/Text"; import Container from "../Container"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; +import {DictionaryContext} from "../../contexts/DictionaryContext"; +import Modal from 'react-modal'; +import {ClaimRewardsModalLocalized} from "./ClaimRewardsModal"; +import {useModal} from "../../hooks/modal"; const NftCardActions: FC = ( { @@ -12,36 +16,59 @@ const NftCardActions: FC = ( id, unclaimed, availableUsd, - token + token, + amount, + kind }) => { const isMobile = useMediaQuery(Queries.mobile); const isTablet = useMediaQuery(Queries.tablet); - const isOther = (!isMobile && !isTablet); + const isDesktop = (!isMobile && !isTablet); + const [Modal, ,setModal] = useModal(); return ( - - - {!isOther && ( - - Available for claim - - )} -
- {unclaimed} {token} - ~{availableUsd}$ -
+ <> + + + {!isDesktop && ( + + Available for claim + + )} + + {unclaimed} {token} + ~{availableUsd}$ + + + + + + - - - - - + + setModal(false)} + availableForClaim={unclaimed} + onClaim={() => onClaim(id)} + kind={kind} + onAvailableForClaimChange={e => console.log(e.target.value)} + /> + + + ); }; -export default NftCardActions; \ No newline at end of file +export const NftCardActionsLocalized: FC = (props) => { + const {nft} = useContext(DictionaryContext); + return +} \ No newline at end of file diff --git a/src/components/molecules/NftCardOverview.tsx b/src/components/molecules/NftCardOverview.tsx index 186ddcf..81654e1 100644 --- a/src/components/molecules/NftCardOverview.tsx +++ b/src/components/molecules/NftCardOverview.tsx @@ -15,24 +15,25 @@ export const NftCardOverview: FC = ( startedText, priceText, amount, - amountUsd + amountUsd, + lotOfNftText }) => { const isMobile = useMediaQuery(Queries.mobile); const isTablet = useMediaQuery(Queries.tablet); - const isOther = (!isMobile && !isTablet); + const isDesktop = (!isMobile && !isTablet); return ( - - - {isOther && ( + {`${kind} + + {isDesktop && ( {amount} MBase ~{amountUsd}$ )} - + - {!isOther && ( + {!isDesktop && ( - Lot of NFT + {lotOfNftText} )} - {!isOther && ( + {!isDesktop && ( {amount} MBase ~{amountUsd}$ @@ -67,6 +68,7 @@ export const NftCardOverviewLocalized: FC = (prop return } \ No newline at end of file diff --git a/src/components/molecules/NftMobileProgressBar.tsx b/src/components/molecules/NftCardProgress.tsx similarity index 58% rename from src/components/molecules/NftMobileProgressBar.tsx rename to src/components/molecules/NftCardProgress.tsx index 1b9a593..436bd57 100644 --- a/src/components/molecules/NftMobileProgressBar.tsx +++ b/src/components/molecules/NftCardProgress.tsx @@ -1,10 +1,11 @@ -import React, {FC} from 'react'; +import React, {FC, useContext} from 'react'; import {Text} from "../atoms/Text"; import {style} from "typestyle"; -import {NftCardProps} from "./types"; +import {NftCardProgressProps} from "./types"; +import {DictionaryContext} from "../../contexts/DictionaryContext"; +import Container from "../Container"; -export const NftCardMobileProgressBar: FC> = ( +const NftCardProgress: FC = ( { locked, token, @@ -12,19 +13,18 @@ export const NftCardMobileProgressBar: FC { + return ( -
+
{locked} {token} Locked
-
-
-
-
+
+
-
+
{100 - percentComplete}% {timePassed} @@ -33,16 +33,27 @@ export const NftCardMobileProgressBar: FC{percentComplete}% {timeLeft}
-
-
+ + ); }; +type NftCardProgressLocalizedProps = Omit + +export const NftCardProgressLocalized: FC = (props) => { + const {nft} = useContext(DictionaryContext); + + return +} + const progressContainer = style({ backgroundColor: 'rgba(104, 106, 110, 1)', borderRadius: '4px', position: 'relative', - height: '6px' + height: '6px', + width: '100%' }) const progressLine = (progress: number) => style({ diff --git a/src/components/molecules/NftDetailsItem.tsx b/src/components/molecules/NftDetailsItem.tsx deleted file mode 100644 index 3ecc7d2..0000000 --- a/src/components/molecules/NftDetailsItem.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React, {FC, ReactNode} from 'react'; -import {Text} from '../atoms/Text'; -import {style} from "typestyle"; -import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; -import {NftDetailsItemProps} from "./types"; - -const NftDetailsItem: FC = ( - { - title, - dates, - usd, - amount, - buyPrice, - token - }) => { - const isMobile = useMediaQuery(Queries.mobile) - const isTablet = useMediaQuery(Queries.tablet) - - return ( -
- - {title} - -
- {amount} {token} - ~{usd} $ -
-
- ); -}; - -const styledContainer = (isMobile: boolean) => style({ - display: 'flex', - flexDirection: isMobile ? 'row' : 'column', - justifyContent: isMobile ? 'space-between' : '', - alignItems: isMobile ? 'start' : 'unset', - gap: '5px', - width: '100%' -}) - -const styledHeader = style({ - display: "flex", - gap: '10px' -}) - -const styledFooter = style({ - display: 'flex', - flexDirection: 'column', - alignItems: 'flex-start' -}) - -export default NftDetailsItem; \ No newline at end of file diff --git a/src/components/molecules/NftOverview.tsx b/src/components/molecules/NftOverview.tsx deleted file mode 100644 index ac1723b..0000000 --- a/src/components/molecules/NftOverview.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React, {FC, ReactNode} from "react" -import {style} from "typestyle" -import {DictionaryContext} from "../../contexts/DictionaryContext" -import {Label} from "../atoms/Label"; -import {Text} from '../atoms/Text' -import {NftOverviewLocalizedProps, NftOverviewProps, NftOverviewWrapperProps} from "./types"; -import {colors} from "./CONSTANTS"; - -export const NftOverviewVisual: FC = (props) => { - const {amount, amountUsd, labelColor, priceLabel} = props; - - return ( -
- -
-
- {amount} - {amountUsd} -
-
- - -
-
-
- ) -} - -export const NftOverviewLocalized: React.FC = (props) => { - let dict = React.useContext(DictionaryContext) - let nft_card = dict.nft.dashboard.nft_table.nft_card - - return ( - - ) -} - -export const formatDate = (datestring: string) => new Date(Date.parse(datestring)).toLocaleDateString('ru') - -export const NftOverviewWrapper: React.FC = (props) => { - return ( - - ) -} - -const container = style({ - display: "flex", - flexDirection: "row", - alignItems: 'center', - padding: '16px' -}) - -const header = style({ - display: 'flex', - gap: '4px' -}) - -const footer = style({ - display: "flex", - gap: "4px" -}) diff --git a/src/components/molecules/NftProgress.tsx b/src/components/molecules/NftProgress.tsx deleted file mode 100644 index b794e95..0000000 --- a/src/components/molecules/NftProgress.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from "react" - -import {FC, useContext} from "react" -import {style} from "typestyle" -import {DictionaryContext} from "../../contexts/DictionaryContext" -import {Text} from "../atoms/Text" -import {NftProgressLocalizedProps, NftProgressProps} from "./types"; - -export const NftProgress: FC = ( - { - token, - locked, - percentComplete, - timePassed, - percentLeft, - timeLeft, - lockedCaption - }) => { - - return ( -
-
- - {`${locked} ${token} ${lockedCaption}`} - -
-
-
-
-
-
-
-
- {percentLeft}% - {timePassed} -
-
- {percentComplete}% - {timeLeft} -
-
-
- ) -} - -export const NftProgressLocalized: FC = (props) => { - const {nft} = useContext(DictionaryContext) - - return -} - -const progressContainer = style({ - backgroundColor: 'rgba(104,106,110,0.2)', - borderRadius: '4px', - position: 'relative', - height: '6px', - width: '100%', -}) - -const progressLine = (progress: number) => style({ - position: 'absolute', - width: `${progress}%`, - left: 0, - top: 0, - bottom: 0, - right: 0, - background: 'linear-gradient(90deg, #FF1414 0%, #EAEE2C 48.44%, #7BDA1D 100%)', - borderRadius: '4px', -}) - - - - diff --git a/src/components/molecules/NftSelectCard.tsx b/src/components/molecules/NftSelectCard.tsx index b5f074f..adc50e4 100644 --- a/src/components/molecules/NftSelectCard.tsx +++ b/src/components/molecules/NftSelectCard.tsx @@ -1,72 +1,39 @@ -import React, {FC} from 'react'; -import purpleNft from "../../assets/purpleNft.svg"; -import goldNft from "../../assets/goldNft.svg"; -import goldDarkNft from "../../assets/goldDarkNft.svg"; -import redNft from "../../assets/redNft.svg"; -import silverNft from "../../assets/silverNft.svg"; +import React, {FC, useContext} from 'react'; import {Text} from '../atoms/Text' import {Label} from '../atoms/Label' import {style} from "typestyle"; import {INftSelectCard} from "./types"; +import {colors} from './CONSTANTS'; +import {DictionaryContext} from "../../contexts/DictionaryContext"; const NftSelectCard: FC = ( { active, - color, + kind, amount, token, usd, price, - started + started, + priceText, + startedText }) => { + return ( -
-
- {(() => { - switch (color) { - case "purple": - return - case "gold": - return - case "goldDark": - return - case "red": - return - case "silver": - return - } - })()} -
+
+ {`${colors[kind].icon}
{`${amount} ${token}`} ~{usd}$
- {(() => { - switch (color) { - case "purple": - return - case "gold": - case "goldDark": - return - case "red": - return - case "silver": - return - } - })()} +
@@ -74,15 +41,22 @@ const NftSelectCard: FC = ( ); }; -const container = style({ - display: 'flex', - padding: '12px 24px 12px 24px' -}) +type NftSelectCardLocalizedProps = Omit -const containerActive = style({ +export const NftSelectCardLocalized: FC = (props) => { + const {nft} = useContext(DictionaryContext); + + return ( + + ) +} + +const container = (active?: boolean) => style({ display: 'flex', padding: '12px 24px 12px 24px', - backgroundColor: 'rgba(173, 54, 19, 0.2)' -}); - -export default NftSelectCard; \ No newline at end of file + backgroundColor: active ? 'rgba(173, 54, 19, 0.2)' : 'unset' +}) \ No newline at end of file diff --git a/src/components/molecules/NftViewHeader.tsx b/src/components/molecules/NftViewHeader.tsx new file mode 100644 index 0000000..ffcacac --- /dev/null +++ b/src/components/molecules/NftViewHeader.tsx @@ -0,0 +1,42 @@ +import React, {FC, ReactNode, useContext} from 'react'; +import {Text} from "../atoms/Text"; +import {Label} from "../atoms/Label"; +import gold2 from "../../assets/gold-2.svg"; +import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; +import {DictionaryContext} from "../../contexts/DictionaryContext"; +import {NftViewHeaderLocalizedProps, NftViewHeaderProps} from "./types"; + +const NftViewHeader: FC = ( + { + viewText, + nftDetailsText, + buyPriceText, + usd + }) => { + const isMobile = useMediaQuery(Queries.mobile) + + return ( +
+
+ {viewText} + {nftDetailsText} + +
+ {isMobile && nft gold} +
+ ); +}; + +export const NftViewHeaderLocalized: FC = (props) => { + const {nft} = useContext(DictionaryContext) + + return +} \ No newline at end of file diff --git a/src/components/molecules/Notification.tsx b/src/components/molecules/Notification.tsx index 20801bc..d19b7c7 100644 --- a/src/components/molecules/Notification.tsx +++ b/src/components/molecules/Notification.tsx @@ -1,43 +1,51 @@ -import React, {FC} from 'react'; +import React, {FC, useContext} from 'react'; import {style} from "typestyle"; -import {createPortal} from "react-dom"; import {Text} from '../atoms/Text'; import doneIcon from '../../assets/doneIcon.png' import errorIcon from '../../assets/errorIcon.png' import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; +import {NotificationsProps} from "./types"; +import Container from "../Container"; +import {DictionaryContext} from "../../contexts/DictionaryContext"; -interface NotificationsProps { - type: 'success' | 'error' -} - -const Notification: FC = ({type}) => { - const modalsRoot = document.getElementById('modals'); - - if (!modalsRoot) return null; - +const Notification: FC = ({type, title, subTitle}) => { const isMobile = useMediaQuery(Queries.mobile); const isTablet = useMediaQuery(Queries.tablet) const isPc = (!isMobile && !isTablet); - return createPortal( + return (
-
-
{type === 'success' ? : - }
+ +
+ {'notification +
- Done + {title} {isPc && ( - Every time after using Mars Base, we recommend you to disconnect. + {subTitle} )}
X
-
+
- , modalsRoot); + ); }; +type NotificationLocalizedProps = Omit + +export const NotificationLocalized: FC = (props) => { + const {nft} = useContext(DictionaryContext); + + return +} + const container = (type: string, isMobile: boolean) => style({ position: 'absolute', top: '20px', @@ -48,9 +56,4 @@ const container = (type: string, isMobile: boolean) => style({ borderRadius: '6px', padding: '16px 26px 16px 20px', width: isMobile ? 'unset' : '368px', -}) - -const content = style({ - display: 'flex', - alignItems: 'center' }) \ No newline at end of file diff --git a/src/components/molecules/SplitDetailsSection.tsx b/src/components/molecules/SplitDetailsSection.tsx index 081126c..2bdc630 100644 --- a/src/components/molecules/SplitDetailsSection.tsx +++ b/src/components/molecules/SplitDetailsSection.tsx @@ -1,16 +1,8 @@ -import React, {FC} from 'react'; +import React, {FC, ReactNode, useContext} from 'react'; import {Text} from "../atoms/Text"; import {style} from "typestyle"; - -interface SplitDetailsSectionProps { - amount?: number; - token?: string; - usd?: number; - percent?: number; - partIndex?: number; - totalFee?: boolean; - totalParts?: number; -} +import {SplitDetailsSectionLocalizedProps, SplitDetailsSectionProps} from "./types"; +import {DictionaryContext} from "../../contexts/DictionaryContext"; const SplitDetailsSection: FC = ( { @@ -20,14 +12,18 @@ const SplitDetailsSection: FC = ( percent, partIndex, totalFee, - totalParts + totalParts, + totalPartsLabel, + totalFeeLabel, + partsLabel }) => { + return (
- {totalFee && Total fee} - {partIndex && Part ${partIndex}} - {totalParts && Total parts} + {totalFee && {totalPartsLabel}} + {partIndex && {partsLabel} ${partIndex}} + {totalParts && {totalFeeLabel}}
{totalParts} @@ -35,7 +31,7 @@ const SplitDetailsSection: FC = ( <> {amount} {token} ({percent}%) {usd && ( - ~20,000,00 $ + ~{usd} $ )} )} @@ -44,6 +40,17 @@ const SplitDetailsSection: FC = ( ); }; +export const SplitDetailsSectionLocalized: FC = (props) => { + const {nft} = useContext(DictionaryContext); + + return +} + const container = style({ display: 'flex', justifyContent: 'space-between', @@ -51,6 +58,4 @@ const container = style({ paddingBottom: '10px', borderBottom: '1px solid rgba(42, 42, 44, 1)', marginBottom: '10px' -}) - -export default SplitDetailsSection; \ No newline at end of file +}) \ No newline at end of file diff --git a/src/components/molecules/SplitError.tsx b/src/components/molecules/SplitError.tsx index c3412b4..70cdabf 100644 --- a/src/components/molecules/SplitError.tsx +++ b/src/components/molecules/SplitError.tsx @@ -1,30 +1,47 @@ -import React from 'react'; +import React, {FC, useContext} from 'react'; import {Text} from '../atoms/Text' import {Button} from '../atoms/Button' import splitError from '../../assets/splitErrorIllustration.png'; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; +import {SplitErrorProps, SplitErrorPropsLocalized} from "./types"; +import {DictionaryContext} from "../../contexts/DictionaryContext"; -const SplitError = () => { +const SplitError: FC = ( + { + title, + subTitle, + backText, + tryAgainText + }) => { const isMobile = useMediaQuery(Queries.mobile) const isTablet = useMediaQuery(Queries.tablet) return (
- NFT could not be splitted - Whoops, something went wrong. Please try again later. + {title} + {subTitle}
); }; -export default SplitError; \ No newline at end of file +export const SplitErrorLocalized: FC = (props) => { + const {nft} = useContext(DictionaryContext) + return +} \ No newline at end of file diff --git a/src/components/molecules/SummaryDestribution.tsx b/src/components/molecules/SummaryDestribution.tsx index a05b0b8..880a399 100644 --- a/src/components/molecules/SummaryDestribution.tsx +++ b/src/components/molecules/SummaryDestribution.tsx @@ -8,40 +8,33 @@ import {Count} from "../atoms/Count" import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; import flyUsdIcon from '../../assets/flyUsd.png'; import {SummaryDestributionProps} from "./types"; +import Container from "../Container"; const SummaryDestribution: FC = ({title, subTitle, count}) => { - const isMobile = useMediaQuery(Queries.mobile) + const isMobile = useMediaQuery(Queries.mobile); + const isTablet = useMediaQuery(Queries.tablet); + const isDesktop = (!isMobile && !isTablet) return ( -
+ -
-
+ + {title} - {count} + +
+ {count} +
+ -
+ {subTitle} -
-
+ + ) } -const container = (isMobile: boolean) => style({ - display: "flex", - width: isMobile ? '100%' : "300px" -}) -const content = style({ - display: "flex", - flexDirection: "column" -}) - -const contentHeader = style({ - display: "flex", - gap: "5px" -}) - type SummaryDestributionLocalizedProps = Pick export const SummaryDestributionLocalized: FC = (props) => { diff --git a/src/components/molecules/TablePagination.tsx b/src/components/molecules/TablePagination.tsx deleted file mode 100644 index 360e05e..0000000 --- a/src/components/molecules/TablePagination.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React from "react" - -import { FC, ReactNode, useContext } from "react" -import { style } from "typestyle" -import {Text} from '../atoms/Text' -import {Count} from '../atoms/Count' -import { DictionaryContext } from "../../contexts/DictionaryContext" - -interface TablePaginationProps { - prevText: ReactNode - nextText: ReactNode - startNumbers: ReactNode[] - endNumbers: ReactNode[] -} - -export const TablePagination: FC = ({ prevText, nextText, startNumbers, endNumbers }) => { - return ( -
-
- - Prev - - - 1 - - - 2 - - - 3 - - - ... - - - 25 - - - 25 - - - 26 - - - Next - -
-
- ) -} - -const container = style({ - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - width: '100%' -}) - -const numbers = style({ - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - width: '300px' -}) - - -type TablePaginationLocalizedProps = Omit - -export const TablePaginationLocalized: FC = (props) => { - const { nft } = useContext(DictionaryContext) - - return -} - -interface TablePaginationWrapperProps { - startNumbers: number[]; - endNumbers: number[]; -} - -export const TablePaginationWrapper: FC = (props) => { - return -} diff --git a/src/components/molecules/TableSorter.tsx b/src/components/molecules/TableSorter.tsx index 17f9881..c38e00e 100644 --- a/src/components/molecules/TableSorter.tsx +++ b/src/components/molecules/TableSorter.tsx @@ -8,7 +8,7 @@ interface TableSorterProps { const TableSorter: FC = ({sorters}) => { return ( - + {sorters.map((name, index) => ( null}/> ))} diff --git a/src/components/molecules/TokenDashboardHeader.tsx b/src/components/molecules/TokenDashboardHeader.tsx index 255c86c..8d2a3f2 100644 --- a/src/components/molecules/TokenDashboardHeader.tsx +++ b/src/components/molecules/TokenDashboardHeader.tsx @@ -4,8 +4,10 @@ import { HandlersContext } from "../../contexts/HandlersContext" import { NftOverviewLocalized } from "./HeaderOverview"; import { HeaderActionsLocalized } from "./HeaderActions"; import Container from "../Container"; -import { Queries, useMediaQuery } from "../../hooks/mediaQuery"; -import { AppStateContext } from "../../contexts/AppStateContext"; +import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; +import RootContainer from "../RootContainer"; +import {style} from "typestyle"; +import {AppStateContext} from "../../contexts/AppStateContext"; export const TokenDashboardHeader = () => { const { data } = useContext(AppStateContext) @@ -14,17 +16,29 @@ export const TokenDashboardHeader = () => { const isMobile = useMediaQuery(Queries.mobile); const isTablet = useMediaQuery(Queries.tablet); - const isOther = (!isMobile && !isTablet); + const isDesktop = (!isMobile && !isTablet); return ( - - - - + + + + + + ) } +const styledRootContainer = style({ + borderBottom: '1px solid rgba(104,106,110,0.6)', + background: 'linear-gradient(97deg, rgba(0,0,0,1) 0%, rgba(26,1,47,1) 100%)', + marginBottom: '32px' +}) + diff --git a/src/components/molecules/VestingActions.tsx b/src/components/molecules/VestingActions.tsx index cf7d46b..90f4873 100644 --- a/src/components/molecules/VestingActions.tsx +++ b/src/components/molecules/VestingActions.tsx @@ -37,7 +37,7 @@ const VestingActions: FC = (props) => { type VestingActionsLocalizedProps = Omit -const VestingActionsLocalized: FC = (props) => { +export const VestingActionsLocalized: FC = (props) => { const {nft} = useContext(DictionaryContext); return ( @@ -49,15 +49,6 @@ const VestingActionsLocalized: FC = (props) => { ) } -interface VestingActionsWrapperProps { - token: string; - onSellWithPremium: () => void; - onBuyNow: () => void -} - -export const VestingActionsWrapper: FC = (props) => { - return -} const container = (isMobile: boolean) => style({ display: 'flex', diff --git a/src/components/molecules/VestingSplitOverview.tsx b/src/components/molecules/VestingSplitOverview.tsx index ecdb6f5..54a5d78 100644 --- a/src/components/molecules/VestingSplitOverview.tsx +++ b/src/components/molecules/VestingSplitOverview.tsx @@ -4,12 +4,7 @@ import {style} from 'typestyle'; import {DictionaryContext} from "../../contexts/DictionaryContext"; import q from '../../assets/question.png'; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; - -interface VestingSplitOverviewProps { - title: ReactNode - howToUse: ReactNode; - subTitle: ReactNode -} +import {VestingSplitOverviewProps} from "../organisms/types"; const VestingSplitOverview: FC = ( { @@ -17,8 +12,8 @@ const VestingSplitOverview: FC = ( howToUse, subTitle }) => { - const isMobile = useMediaQuery(Queries.mobile) - const isTablet = useMediaQuery(Queries.tablet) + const isMobile = useMediaQuery(Queries.mobile); + const isTablet = useMediaQuery(Queries.tablet); return (
@@ -37,7 +32,7 @@ const VestingSplitOverview: FC = ( ); }; -const VestingSplitOverviewLocalized = () => { +export const VestingSplitOverviewLocalized = () => { const {nft} = useContext(DictionaryContext); return { const container = (isMobile: boolean) => style({ width: isMobile ? '100%' : '500px' -}) - -export const VestingSplitOverviewWrapper = () => - -export default VestingSplitOverview; \ No newline at end of file +}) \ No newline at end of file diff --git a/src/components/molecules/types.ts b/src/components/molecules/types.ts index a562d29..7ea8995 100644 --- a/src/components/molecules/types.ts +++ b/src/components/molecules/types.ts @@ -15,6 +15,7 @@ export type HeaderActionsLocalizedProps = Omit void + availableForClaim: ReactNode; + onClaim: () => void + btnClaimLoad?: boolean + kind: TagLabelColors; + onAvailableForClaimChange: (e: React.ChangeEvent) => void } export type ClaimRewardsModalLocalizedProps = Omit +export type IsBeingSplittedLocalizedProps = Omit export interface NftCardProps extends INft { onClaim: (nftId: string) => void; @@ -138,7 +145,14 @@ export interface NftCardProps extends INft { export type IColors = { [color in TagLabelColors]: { border: string; icon: string, label: TagLabelColors } }; -export type NftCardActionsProps = Pick +export type NftCardActionsProps = + Pick + & { claim_btn: ReactNode, actions_btn: ReactNode } + +export type NftCardActionsLocalizedProps = Omit + +export type NftCardProgressProps = Pick & { claim_btn: ReactNode } export type NftOverviewProps = { amount: React.ReactNode @@ -151,8 +165,47 @@ export type NftOverviewProps = { export type NftCardOverviewProps = Pick - & { startedText: string, priceText: string } + & { startedText: ReactNode, priceText: ReactNode, lotOfNftText: ReactNode } + +export type NftCardOverviewLocalizedProps = Omit + +export type NotificationsProps = { + type: 'success' | 'error' +} & { title: ReactNode, subTitle: ReactNode } + +export interface SelectNftModalProps { + nfts: INft[] +} -export type NftCardOverviewLocalizedProps = Omit +export interface SplitDetailsSectionProps { + amount?: ReactNode + token?: ReactNode + usd?: ReactNode + percent?: ReactNode + partIndex?: ReactNode + totalFee?: ReactNode + totalParts?: ReactNode + totalFeeLabel: ReactNode + totalPartsLabel: ReactNode + partsLabel: ReactNode +} + +export type SplitDetailsSectionLocalizedProps = Omit + +export type NftViewHeaderProps = { + viewText: ReactNode; + nftDetailsText: ReactNode; + buyPriceText: ReactNode; + usd: ReactNode; +} + +export type NftViewHeaderLocalizedProps = Omit; + +export type SplitErrorProps = { + title: ReactNode; + subTitle: ReactNode; + backText: ReactNode; + tryAgainText: ReactNode; +} -export type NftCardMobileProgressProps = Omit \ No newline at end of file +export type SplitErrorPropsLocalized = Omit \ No newline at end of file diff --git a/src/components/organisms/MetaMaskStateWrappers.tsx b/src/components/organisms/MetaMaskStateWrappers.tsx index 139cd9d..3a343b5 100644 --- a/src/components/organisms/MetaMaskStateWrappers.tsx +++ b/src/components/organisms/MetaMaskStateWrappers.tsx @@ -3,9 +3,10 @@ import { EvmNetwork } from "../../config" import { AppStateProvider } from "../../contexts/AppStateContext" import { HandlersProvider } from "../../contexts/HandlersContext" import { NftsContextProvider } from "../../contexts/NftsContext" -import { RoundingContext, RoundingContextProvider } from "../../contexts/RoundingsContext" +import { RoundingContextProvider } from "../../contexts/RoundingsContext" import { MarsbaseTokenProvider, MarsbaseVestingProvider } from "../../hooks/mbase-contract" import TokenDashboard from "../pages/TokenDashboard" +import {VestingSplit} from "../pages/VestingSplit"; export const MetamaskConnected: React.FC<{ network: EvmNetwork }> = props => ( @@ -14,7 +15,8 @@ export const MetamaskConnected: React.FC<{ network: EvmNetwork }> = props => ( - + {/**/} + diff --git a/src/components/organisms/NftTable.tsx b/src/components/organisms/NftTable.tsx index 2367acc..7155092 100644 --- a/src/components/organisms/NftTable.tsx +++ b/src/components/organisms/NftTable.tsx @@ -5,17 +5,26 @@ import {NftTableProps} from "./types"; import TableSorterState from "../stateful/TableSorterState"; import {NftsContainer} from "../stateful/NftContainer"; import Container from "../Container"; +import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; export const NftTable: FC = ({nfts, onClaim, onActions}) => { + const isMobile = useMediaQuery(Queries.mobile); + return ( - - - + + + + + ) } diff --git a/src/components/organisms/NftTableSummary.tsx b/src/components/organisms/NftTableSummary.tsx index c98febf..9088614 100644 --- a/src/components/organisms/NftTableSummary.tsx +++ b/src/components/organisms/NftTableSummary.tsx @@ -1,7 +1,6 @@ import React, {FC} from "react" import {SummaryDestributionWrapper} from "../molecules/SummaryDestribution" -import {style} from "typestyle" import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; import {SummaryTotalUnclaimedWrapper} from "../stateful/SummaryTotalUnclaimedWrapper"; import Container from "../Container"; @@ -20,13 +19,16 @@ export const NftTableSummary: FC = ( unclaimedTotal, token }) => { - const isMobile = useMediaQuery(Queries.mobile); - const isTablet = useMediaQuery(Queries.tablet); - const isDesktop = useMediaQuery(Queries.tablet); return ( - + = ( ) } -const container = style({ - display: "flex", - alignItems: "center", - justifyContent: "space-between", - width: "100%", -}) - diff --git a/src/components/organisms/NftView.tsx b/src/components/organisms/NftView.tsx index 4919f12..73081c2 100644 --- a/src/components/organisms/NftView.tsx +++ b/src/components/organisms/NftView.tsx @@ -3,9 +3,9 @@ import {Text} from '../atoms/Text' import {Button} from '../atoms/Button' import {Label} from '../atoms/Label' import {style} from 'typestyle'; -import NftDetailsItem from "../molecules/NftDetailsItem"; import gold2 from '../../assets/gold-2.svg'; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; +import {NftViewHeaderLocalized} from "../molecules/NftViewHeader"; const NftView = () => { const isMobile = useMediaQuery(Queries.mobile) @@ -45,17 +45,7 @@ const NftView = () => {
-
-
- VIEW - NFT Details - -
- {isMobile && nft gold} -
+ {nftDetails.map((nftDetail, index) =>
@@ -94,7 +84,7 @@ const container = (isMobile: boolean, isTablet: boolean) => style({ width: isTablet ? 'unset' : '822px', padding: '16px', borderRadius: '20px', - background: `linear-gradient(34deg, rgba(27, 27, 28,100%) 48%, rgba(255,227,161,40%) 100%)` + background: `linear-gradient(34deg, rgba(27, 27, 28,100%) 48%, rgba(255,227,161,40%) 100%)`, }) const containerBody = (isMobile: boolean) => style({ diff --git a/src/components/organisms/SelectNftModal.tsx b/src/components/organisms/SelectNftModal.tsx index 98a146a..fa36c9f 100644 --- a/src/components/organisms/SelectNftModal.tsx +++ b/src/components/organisms/SelectNftModal.tsx @@ -1,94 +1,55 @@ -import React, {useEffect} from 'react'; +import React, {FC} from 'react'; import {style} from "typestyle"; import changeViewIcon from '../../assets/changeViewIcon.svg'; import sortIcon from '../../assets/sortIcon.svg'; -import X from '../../assets/X.png'; import {Text} from '../atoms/Text' -import NftSelectCard from "../molecules/NftSelectCard"; -import {createPortal} from "react-dom"; +import {NftSelectCardLocalized} from "../molecules/NftSelectCard"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; +import {SelectNftModalProps} from "../molecules/types"; -const SelectNftModal = () => { - const modalsRoot = document.getElementById('modals'); - - if (!modalsRoot) return null; - +const SelectNftModal: FC = ({nfts}) => { const isMobile = useMediaQuery(Queries.mobile) const isTablet = useMediaQuery(Queries.tablet) - useEffect(() => { - document.body.style.overflow = 'hidden'; - - return () => { - document.body.style.overflow = 'unset'; - } - }, []) - - return createPortal(
-
-
-
-
-
-
- Select nft -
-
-
- changeViewIcon + return ( +
+
+
+
+
+
+
+ Select nft
-
- +
+
+ changeViewIcon +
+
+ +
-
-
- - - - - - - +
+ {nfts.map(nft => ( + + ))} +
-
, modalsRoot) + ) }; const container = style({ diff --git a/src/components/organisms/TokenDasboardNavbar.tsx b/src/components/organisms/TokenDasboardNavbar.tsx index d5da0a5..de6e5f4 100644 --- a/src/components/organisms/TokenDasboardNavbar.tsx +++ b/src/components/organisms/TokenDasboardNavbar.tsx @@ -11,6 +11,7 @@ import {createPortal} from "react-dom"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; interface INavbarMenu { + id: number; text: string; icon: string; alt: string; @@ -21,6 +22,7 @@ interface INavbarMenu { const navbarMenu: INavbarMenu[] = [ { + id: 1, text: 'Create Offer', icon: plusIcon, alt: 'Create Offer Menu Item', @@ -29,6 +31,7 @@ const navbarMenu: INavbarMenu[] = [ active: false }, { + id: 2, text: 'OTC desk', icon: otcDeskIcon, alt: 'OTC desk Menu Item', @@ -36,6 +39,7 @@ const navbarMenu: INavbarMenu[] = [ active: false, }, { + id: 3, text: 'Dashboard', icon: dashboardIcon, alt: 'Dashboard Menu Item', @@ -43,6 +47,7 @@ const navbarMenu: INavbarMenu[] = [ active: true }, { + id: 4, text: 'Profile', icon: profileIcon, alt: 'Profile Menu Item', @@ -50,6 +55,7 @@ const navbarMenu: INavbarMenu[] = [ active: false }, { + id: 5, text: 'More', icon: moreIcon, alt: 'More Menu Item', @@ -62,20 +68,21 @@ const TokenDashboardNavbar = () => { const modalsRoot = document.getElementById('modals'); const isMobile = useMediaQuery(Queries.mobile); const isTablet = useMediaQuery(Queries.tablet); + const isDesktop = (!isMobile && !isTablet) if (!modalsRoot) { return null; } - if(!isMobile || !isTablet) { + if(isDesktop) { return null } - return createPortal( + return (
{navbarMenu.map(menuItem => ( -
+
{menuItem.alt}/ { ))}
- , modalsRoot); + ) }; const navbar = style({ diff --git a/src/components/organisms/VestingSplitDetails.tsx b/src/components/organisms/VestingSplitDetails.tsx index 9372765..e4c9b86 100644 --- a/src/components/organisms/VestingSplitDetails.tsx +++ b/src/components/organisms/VestingSplitDetails.tsx @@ -12,7 +12,7 @@ import infoIcon from "../../assets/info.png"; import {style} from "typestyle"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; -import SplitDetailsSection from "../molecules/SplitDetailsSection"; +import {SplitDetailsSectionLocalized} from "../molecules/SplitDetailsSection"; const VestingSplitDetailsExample: React.FC = () => { @@ -53,24 +53,24 @@ const VestingSplitDetails: React.FC = props => {
- - - - = props => { -
diff --git a/src/components/organisms/VestingSplitHeader.tsx b/src/components/organisms/VestingSplitHeader.tsx index 3190c12..ba82342 100644 --- a/src/components/organisms/VestingSplitHeader.tsx +++ b/src/components/organisms/VestingSplitHeader.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import {VestingSplitOverviewWrapper} from "../molecules/VestingSplitOverview"; import {style} from 'typestyle'; -import {VestingActionsWrapper} from "../molecules/VestingActions"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; +import {VestingSplitOverviewLocalized} from "../molecules/VestingSplitOverview"; +import {VestingActionsLocalized} from "../molecules/VestingActions"; const VestingSplitHeader = () => { const isMobile = useMediaQuery(Queries.mobile) @@ -11,8 +11,8 @@ const VestingSplitHeader = () => { return (
- - null} onSellWithPremium={() => null}/> + + null} onSellWithPremium={() => null}/>
); }; diff --git a/src/components/organisms/VestingSplitSteps.tsx b/src/components/organisms/VestingSplitSteps.tsx index cb1aea2..088084a 100644 --- a/src/components/organisms/VestingSplitSteps.tsx +++ b/src/components/organisms/VestingSplitSteps.tsx @@ -1,47 +1,37 @@ -import React from 'react'; +import React, {FC, useContext} from 'react'; import VestingStepCard from "../molecules/VestingStepCard"; -import {style} from "typestyle"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; +import Container from "../Container"; +import {DictionaryContext} from "../../contexts/DictionaryContext"; +import {VestingSplitStepsLocalizedProps, VestingSplitStepsProps} from "./types"; -const container = style({ - width: '100%', - display: 'flex', - justifyContent: 'space-between', - gap: '32px', - marginBottom: '66px' -}) +const VestingSplitSteps: FC = ({steps}) => { + const isMobile = useMediaQuery(Queries.mobile); -const VestingSplitSteps = () => { - const steps = [ - { - active: false, - title: 'Parameters', - subTitle: 'Set suitable conditions' - }, - { - active: true, - title: 'Split details', - subTitle: 'Verify and approve the offer' - }, - { - active: false, - title: 'Publication', - subTitle: 'Send the offer to the market' - } - ] + const formattedSteps = () => { + return steps.map((step, idx) => ({active: idx === 1, ...step})); + }; - const isMobile = useMediaQuery(Queries.mobile) - const isTablet = useMediaQuery(Queries.tablet) + const getActiveStep = () => formattedSteps().filter(s => s.active); return ( -
- {(isMobile ? steps.filter(s => s.active) : steps).map((step, index) => ( + + {(isMobile ? getActiveStep() : steps).map((step, index) => ( + index={index + 1} + {...step} + /> ))} -
+ ); }; -export default VestingSplitSteps; \ No newline at end of file +export const VestingSplitStepsLocalized: FC = (props) => { + const {nft} = useContext(DictionaryContext); + + return +} \ No newline at end of file diff --git a/src/components/organisms/types.ts b/src/components/organisms/types.ts index 768fa38..3140e0b 100644 --- a/src/components/organisms/types.ts +++ b/src/components/organisms/types.ts @@ -28,4 +28,16 @@ export interface NftTableProps { onActions: (nftId: string) => void } -export type IMobileNftsContainer = Pick \ No newline at end of file +export type IMobileNftsContainer = Pick; + +export interface VestingSplitOverviewProps { + title: ReactNode + howToUse: ReactNode; + subTitle: ReactNode +} + +export interface VestingSplitStepsProps { + steps: { title: string, subTitle: string }[] +} + +export type VestingSplitStepsLocalizedProps = Omit; \ No newline at end of file diff --git a/src/components/pages/TokenDashboard.tsx b/src/components/pages/TokenDashboard.tsx index b4cbe20..ad5a2f3 100644 --- a/src/components/pages/TokenDashboard.tsx +++ b/src/components/pages/TokenDashboard.tsx @@ -1,58 +1,55 @@ import React from "react" - -import { TokenDashboardTemplate } from "../templates/TokenDashboardTemplate" import TokenDashboardNavbar from "../organisms/TokenDasboardNavbar"; -import { useContext } from "react" -import { HandlersContext } from "../../contexts/HandlersContext" -import { ConnectWithMetamask } from "../organisms/ConnectWithMetamask" -import { Header } from "../templates" -import { NftsContext } from "../../contexts/NftsContext"; -import { NftTableSummaryWrapper } from "../stateful/NftTableSummaryWrapper"; -import { NftTable } from "../organisms/NftTable"; -import { TokenDashboardHeader } from "../molecules/TokenDashboardHeader"; -import TableLoading from "../molecules/TableLoading"; - - +import {TokenDashboardHeader} from "../molecules/TokenDashboardHeader" +import {useContext} from "react" +import {ConnectWithMetamask} from "../organisms/ConnectWithMetamask" +import {NftsContext} from "../../contexts/NftsContext"; +import {NftTableSummaryWrapper} from "../stateful/NftTableSummaryWrapper"; +import {NftTable} from "../organisms/NftTable"; +import RootContainer from "../RootContainer"; +import Container from "../Container"; +import {HowIsLocalized} from "../molecules/HowIsDistributionDone"; +import {HandlersContext} from "../../contexts/HandlersContext"; +import {IsBeingSplittedLocalized} from "../molecules/IsBeingSplitted"; +import {NftAvailableClaimLocalized} from "../molecules/NftAvailableClaim"; +import {useModal} from "../../hooks/modal"; +import SelectNftModal from "../organisms/SelectNftModal"; const TokenDashboard = () => { - const { handlers } = useContext(HandlersContext) - const { nftsG, loading, error, repeatRequest } = useContext(NftsContext) + const {handlers} = useContext(HandlersContext) + const {nftsG} = useContext(NftsContext); return ( <> - - {error ? : ''} - - - {loading ? : - { - console.log(nftId) - handlers.onClaim(nftId) - .then(() => { - console.log('confirmed') - repeatRequest() - }) - }} - onActions={handlers.onActions} - /> - } - - + + + + + + + + + + + ) } const MemoHeader = React.memo(() => ( -
- - -
+ <> + + + + )) const MemoTableSummary = React.memo(() => ( - + )) export default TokenDashboard diff --git a/src/components/pages/VestingSplit.tsx b/src/components/pages/VestingSplit.tsx index 1c92285..3a76b81 100644 --- a/src/components/pages/VestingSplit.tsx +++ b/src/components/pages/VestingSplit.tsx @@ -1,44 +1,38 @@ import React from 'react'; import VestingSplitHeader from "../organisms/VestingSplitHeader"; -import VestingSplitSteps from "../organisms/VestingSplitSteps"; import {style} from "typestyle"; import NftView from "../organisms/NftView"; -import VestingSplitDetails from "../organisms/VestingSplitDetails"; import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; import VestingSplitNavbar from "../organisms/TokenDasboardNavbar"; +import RootContainer from "../RootContainer"; +import VestingToSplit from "../organisms/VestingToSplit"; +import {VestingSplitStepsLocalized} from '../organisms/VestingSplitSteps'; +import Container from "../Container"; -const VestingSplit = () => { - const isMobile = useMediaQuery(Queries.mobile) - const isTablet = useMediaQuery(Queries.tablet) +export const VestingSplit = () => { + const isMobile = useMediaQuery(Queries.mobile); + const isTablet = useMediaQuery(Queries.tablet); + const isDesktop = (!isMobile || !isTablet) return ( -
+ - + {/**/} {/**/} {/**/}
- {/**/} - + + {/**/}
- {(isTablet || isMobile) && } + {/**/} -
+ ); }; -const container = style({ - display: 'flex', - flexDirection: 'column', - maxWidth: '1433px', - width: '100%', - margin: 'auto', - position: 'relative', -}) - const body = (isTablet: boolean) => style({ display: 'flex', flexDirection: isTablet ? 'column' : 'row', diff --git a/src/components/plasmic/marsbase_components/PlasmicButton.module.css b/src/components/plasmic/marsbase_components/PlasmicButton.module.css index a957f6f..74de300 100644 --- a/src/components/plasmic/marsbase_components/PlasmicButton.module.css +++ b/src/components/plasmic/marsbase_components/PlasmicButton.module.css @@ -16,6 +16,7 @@ background: #bc401c; display: flex; flex-direction: column; + cursor: pointer; border-radius: 8px; padding: 4px 10px; border-width: 1px; @@ -36,7 +37,7 @@ background: none; border: 2px solid #ffffff1a; } -.buttonisDisable { +.buttondisabled { opacity: 0.5; background: #686a6e33; cursor: not-allowed; @@ -66,6 +67,10 @@ .buttonsize_sm { padding: 6px 12px; } +.buttonloading { + background: #686a6e66; + cursor: not-allowed; +} .buttonsize_md { padding: 10px 16px; } @@ -118,7 +123,7 @@ .slotTargetChildrencolors_dark { text-align: center; } -.slotTargetChildrenisDisable { +.slotTargetChildrendisabled { text-align: center; color: #333333; } @@ -128,6 +133,9 @@ .slotTargetChildrensize_sm { text-align: center; } +.slotTargetChildrenloading { + color: #ffffff66; +} .slotTargetChildrensize_md { text-align: center; } diff --git a/src/components/plasmic/marsbase_components/PlasmicButton.tsx b/src/components/plasmic/marsbase_components/PlasmicButton.tsx index 30e02b1..68b5374 100644 --- a/src/components/plasmic/marsbase_components/PlasmicButton.tsx +++ b/src/components/plasmic/marsbase_components/PlasmicButton.tsx @@ -49,7 +49,7 @@ export type PlasmicButton__VariantMembers = { | "redStroke" | "dark" | "defaultStroke"; - isDisable: "isDisable"; + disabled: "disabled"; showStartIcon: "showStartIcon"; showEndIcon: "showEndIcon"; прозрачность: "_10" | "_20"; @@ -68,7 +68,7 @@ export type PlasmicButton__VariantsArgs = { | "dark" | "defaultStroke" >; - isDisable?: SingleBooleanChoiceArg<"isDisable">; + disabled?: SingleBooleanChoiceArg<"disabled">; showStartIcon?: SingleBooleanChoiceArg<"showStartIcon">; showEndIcon?: SingleBooleanChoiceArg<"showEndIcon">; прозрачность?: SingleChoiceArg<"_10" | "_20">; @@ -80,7 +80,7 @@ type VariantPropType = keyof PlasmicButton__VariantsArgs; export const PlasmicButton__VariantProps = new Array( "size", "colors", - "isDisable", + "disabled", "showStartIcon", "showEndIcon", "прозрачность", @@ -112,7 +112,7 @@ export interface DefaultButtonProps { | "dark" | "defaultStroke" >; - isDisable?: SingleBooleanChoiceArg<"isDisable">; + disabled?: SingleBooleanChoiceArg<"disabled">; showStartIcon?: SingleBooleanChoiceArg<"showStartIcon">; showEndIcon?: SingleBooleanChoiceArg<"showEndIcon">; прозрачность?: SingleChoiceArg<"_10" | "_20">; @@ -150,7 +150,7 @@ function PlasmicButton__RenderFunc(props: { sty.root, { [sty.rootauto]: hasVariant(variants, "auto", "auto"), - [sty.rootisDisable]: hasVariant(variants, "isDisable", "isDisable") + [sty.rootdisabled]: hasVariant(variants, "disabled", "disabled") } )} > @@ -186,7 +186,8 @@ function PlasmicButton__RenderFunc(props: { "colors", "standart" ), - [sty.buttonisDisable]: hasVariant(variants, "isDisable", "isDisable"), + [sty.buttondisabled]: hasVariant(variants, "disabled", "disabled"), + [sty.buttonloading]: hasVariant(variants, "loading", "loading"), [sty.buttonshowEndIcon]: hasVariant( variants, "showEndIcon", @@ -214,7 +215,7 @@ function PlasmicButton__RenderFunc(props: { ) })} disabled={ - hasVariant(variants, "isDisable", "isDisable") ? true : undefined + hasVariant(variants, "disabled", "disabled") ? true : undefined } > {( @@ -270,10 +271,15 @@ function PlasmicButton__RenderFunc(props: { "colors", "standart" ), - [sty.slotTargetChildrenisDisable]: hasVariant( + [sty.slotTargetChildrendisabled]: hasVariant( variants, - "isDisable", - "isDisable" + "disabled", + "disabled" + ), + [sty.slotTargetChildrenloading]: hasVariant( + variants, + "loading", + "loading" ), [sty.slotTargetChildrenshowStartIcon]: hasVariant( variants, diff --git a/src/components/plasmic/marsbase_components/PlasmicContainer.module.css b/src/components/plasmic/marsbase_components/PlasmicContainer.module.css index c62cdae..0bd8a4a 100644 --- a/src/components/plasmic/marsbase_components/PlasmicContainer.module.css +++ b/src/components/plasmic/marsbase_components/PlasmicContainer.module.css @@ -12,13 +12,14 @@ align-items: center; min-width: 0; } -@media (min-width: 1024px) { +@media (min-width: 1440px) { .root { width: 100%; + max-width: 1488px; min-width: 0; } } -@media (min-width: 1024px) { +@media (min-width: 1440px) { .root > :global(.__wab_flex-container) { min-width: 0; } @@ -45,6 +46,10 @@ > img { margin-top: 0px; } +.rootalign_end > :global(.__wab_flex-container) { + justify-content: center; + align-items: flex-end; +} .rootjustify_between > :global(.__wab_flex-container) { justify-content: space-between; } @@ -60,24 +65,167 @@ width: auto; display: inline-flex; } -.rootbackgroud_mobileCard { +.rootbackgroud_dark1 { background: #0d0d0d; } -.rootborder__4 { +.rootbackgroud_dark2 { + background: #101012; +} +.rootborderRadius__4 { border-radius: 4px; } -.rootborder__8 { +.rootborderRadius__8 { border-radius: 8px; } +.rootmargin__5 { + margin: 5px; +} .rootpadding__0 { padding: 20px; } +.rootmargin__10 { + max-width: 295px; + width: 100%; + min-width: 0; + margin: 10px; +} +.rootmargin__10 > :global(.__wab_flex-container) { + min-width: 0; +} +.rootmb__5 { + margin-bottom: 5px; +} +.rootmb__10 { + margin-bottom: 10px; +} +.rootmb__15 { + margin-bottom: 15px; +} +.rootmb__20 { + margin-bottom: 20px; +} +.rootmb__25 { + margin-bottom: 25px; +} +.rootmb__30 { + margin-bottom: 30px; +} +.rootgapRow__5 { + display: flex; + flex-direction: row; +} +.rootgapRow__5 > :global(.__wab_flex-container) { + flex-direction: row; + align-items: center; + justify-content: center; + margin-left: calc(0px - 5px); + width: calc(100% + 5px); + margin-top: calc(0px - 0px); + height: calc(100% + 0px); +} +.rootgapRow__5 > :global(.__wab_flex-container) > *, +.rootgapRow__5 > :global(.__wab_flex-container) > :global(.__wab_slot) > *, +.rootgapRow__5 > :global(.__wab_flex-container) > picture > img, +.rootgapRow__5 + > :global(.__wab_flex-container) + > :global(.__wab_slot) + > picture + > img { + margin-left: 5px; + margin-top: 0px; +} +.rootgapRow__10 { + display: flex; + flex-direction: row; +} +.rootgapRow__10 > :global(.__wab_flex-container) { + flex-direction: row; + margin-left: calc(0px - 10px); + width: calc(100% + 10px); + margin-top: calc(0px - 0px); + height: calc(100% + 0px); +} +.rootgapRow__10 > :global(.__wab_flex-container) > *, +.rootgapRow__10 > :global(.__wab_flex-container) > :global(.__wab_slot) > *, +.rootgapRow__10 > :global(.__wab_flex-container) > picture > img, +.rootgapRow__10 + > :global(.__wab_flex-container) + > :global(.__wab_slot) + > picture + > img { + margin-left: 10px; + margin-top: 0px; +} +.rootgapRow__30 { + display: flex; + flex-direction: row; +} +.rootgapRow__30 > :global(.__wab_flex-container) { + flex-direction: row; + margin-left: calc(0px - 30px); + width: calc(100% + 30px); + margin-top: calc(0px - 0px); + height: calc(100% + 0px); +} +.rootgapRow__30 > :global(.__wab_flex-container) > *, +.rootgapRow__30 > :global(.__wab_flex-container) > :global(.__wab_slot) > *, +.rootgapRow__30 > :global(.__wab_flex-container) > picture > img, +.rootgapRow__30 + > :global(.__wab_flex-container) + > :global(.__wab_slot) + > picture + > img { + margin-left: 30px; + margin-top: 0px; +} .rootpadding__10 { padding: 10px; } +.rootmr__5 { + margin-right: 5px; +} +.rootmr__10 { + margin-right: 10px; +} +.rootmr__15 { + margin-right: 15px; +} +.rootreverse { + flex-direction: column-reverse; +} +.rootreverse > :global(.__wab_flex-container) { + flex-direction: column-reverse; + margin-left: calc(0px - 0px); + width: calc(100% + 0px); +} +.rootreverse > :global(.__wab_flex-container) > *, +.rootreverse > :global(.__wab_flex-container) > :global(.__wab_slot) > *, +.rootreverse > :global(.__wab_flex-container) > picture > img, +.rootreverse + > :global(.__wab_flex-container) + > :global(.__wab_slot) + > picture + > img { + margin-left: 0px; +} +.rootborderTop_cyan { + border-top: 6px solid #73fff780; +} +.rootborderTop_yellow { + border-top: 6px solid #ffd66c80; +} +.rootborderTop_red { + border-top: 6px solid #ec683e80; +} +.rootborderTop_silver { + border-top: 6px solid #dddddd80; +} .rootpadding__15 { padding: 15px; } +.rootpadding__20 { + padding: 20px; +} .rootgap__5 > :global(.__wab_flex-container) { margin-left: calc(0px - 0px); width: calc(100% + 0px); @@ -133,7 +281,31 @@ justify-content: center; align-items: flex-start; } -.rootalign_end > :global(.__wab_flex-container) { - justify-content: center; - align-items: flex-end; +.rootgap__5_direction_horizontal { + display: flex; + flex-direction: row; +} +.rootgap__5_direction_horizontal > :global(.__wab_flex-container) { + flex-direction: row; + margin-left: calc(0px - 5px); + width: calc(100% + 5px); + margin-top: calc(0px - 0px); + height: calc(100% + 0px); +} +.rootgap__5_direction_horizontal > :global(.__wab_flex-container) > *, +.rootgap__5_direction_horizontal + > :global(.__wab_flex-container) + > :global(.__wab_slot) + > *, +.rootgap__5_direction_horizontal + > :global(.__wab_flex-container) + > picture + > img, +.rootgap__5_direction_horizontal + > :global(.__wab_flex-container) + > :global(.__wab_slot) + > picture + > img { + margin-left: 5px; + margin-top: 0px; } diff --git a/src/components/plasmic/marsbase_components/PlasmicContainer.tsx b/src/components/plasmic/marsbase_components/PlasmicContainer.tsx index c6f175a..b1ef42b 100644 --- a/src/components/plasmic/marsbase_components/PlasmicContainer.tsx +++ b/src/components/plasmic/marsbase_components/PlasmicContainer.tsx @@ -39,24 +39,36 @@ import sty from "./PlasmicContainer.module.css"; // plasmic-import: 514gf0jdxr/c export type PlasmicContainer__VariantMembers = { direction: "horizontal"; - padding: "_0" | "_10" | "_15"; + padding: "_0" | "_10" | "_15" | "_20"; gap: "_5" | "_10" | "_15"; align: "start" | "end"; justify: "between" | "start" | "end"; auto: "auto"; - backgroud: "mobileCard"; - border: "_4" | "_8"; + backgroud: "dark1" | "dark2"; + borderRadius: "_4" | "_8"; + margin: "_5" | "_10"; + mb: "_5" | "_10" | "_15" | "_20" | "_25" | "_30"; + gapRow: "_5" | "_10" | "_30"; + mr: "_5" | "_10" | "_15"; + reverse: "reverse"; + borderTop: "cyan" | "yellow" | "red" | "silver"; }; export type PlasmicContainer__VariantsArgs = { direction?: SingleChoiceArg<"horizontal">; - padding?: SingleChoiceArg<"_0" | "_10" | "_15">; + padding?: SingleChoiceArg<"_0" | "_10" | "_15" | "_20">; gap?: SingleChoiceArg<"_5" | "_10" | "_15">; align?: SingleChoiceArg<"start" | "end">; justify?: SingleChoiceArg<"between" | "start" | "end">; auto?: SingleBooleanChoiceArg<"auto">; - backgroud?: SingleChoiceArg<"mobileCard">; - border?: SingleChoiceArg<"_4" | "_8">; + backgroud?: SingleChoiceArg<"dark1" | "dark2">; + borderRadius?: SingleChoiceArg<"_4" | "_8">; + margin?: SingleChoiceArg<"_5" | "_10">; + mb?: SingleChoiceArg<"_5" | "_10" | "_15" | "_20" | "_25" | "_30">; + gapRow?: MultiChoiceArg<"_5" | "_10" | "_30">; + mr?: SingleChoiceArg<"_5" | "_10" | "_15">; + reverse?: SingleBooleanChoiceArg<"reverse">; + borderTop?: SingleChoiceArg<"cyan" | "yellow" | "red" | "silver">; }; type VariantPropType = keyof PlasmicContainer__VariantsArgs; @@ -68,7 +80,13 @@ export const PlasmicContainer__VariantProps = new Array( "justify", "auto", "backgroud", - "border" + "borderRadius", + "margin", + "mb", + "gapRow", + "mr", + "reverse", + "borderTop" ); export type PlasmicContainer__ArgsType = { @@ -85,13 +103,19 @@ export type PlasmicContainer__OverridesType = { export interface DefaultContainerProps { children?: React.ReactNode; direction?: SingleChoiceArg<"horizontal">; - padding?: SingleChoiceArg<"_0" | "_10" | "_15">; + padding?: SingleChoiceArg<"_0" | "_10" | "_15" | "_20">; gap?: SingleChoiceArg<"_5" | "_10" | "_15">; align?: SingleChoiceArg<"start" | "end">; justify?: SingleChoiceArg<"between" | "start" | "end">; auto?: SingleBooleanChoiceArg<"auto">; - backgroud?: SingleChoiceArg<"mobileCard">; - border?: SingleChoiceArg<"_4" | "_8">; + backgroud?: SingleChoiceArg<"dark1" | "dark2">; + borderRadius?: SingleChoiceArg<"_4" | "_8">; + margin?: SingleChoiceArg<"_5" | "_10">; + mb?: SingleChoiceArg<"_5" | "_10" | "_15" | "_20" | "_25" | "_30">; + gapRow?: MultiChoiceArg<"_5" | "_10" | "_30">; + mr?: SingleChoiceArg<"_5" | "_10" | "_15">; + reverse?: SingleBooleanChoiceArg<"reverse">; + borderTop?: SingleChoiceArg<"cyan" | "yellow" | "red" | "silver">; className?: string; } @@ -128,27 +152,55 @@ function PlasmicContainer__RenderFunc(props: { [sty.rootalign_end]: hasVariant(variants, "align", "end"), [sty.rootalign_start]: hasVariant(variants, "align", "start"), [sty.rootauto]: hasVariant(variants, "auto", "auto"), - [sty.rootbackgroud_mobileCard]: hasVariant( + [sty.rootbackgroud_dark1]: hasVariant(variants, "backgroud", "dark1"), + [sty.rootbackgroud_dark2]: hasVariant(variants, "backgroud", "dark2"), + [sty.rootborderRadius__4]: hasVariant(variants, "borderRadius", "_4"), + [sty.rootborderRadius__8]: hasVariant(variants, "borderRadius", "_8"), + [sty.rootborderTop_cyan]: hasVariant(variants, "borderTop", "cyan"), + [sty.rootborderTop_red]: hasVariant(variants, "borderTop", "red"), + [sty.rootborderTop_silver]: hasVariant( variants, - "backgroud", - "mobileCard" + "borderTop", + "silver" + ), + [sty.rootborderTop_yellow]: hasVariant( + variants, + "borderTop", + "yellow" ), - [sty.rootborder__4]: hasVariant(variants, "border", "_4"), - [sty.rootborder__8]: hasVariant(variants, "border", "_8"), [sty.rootdirection_horizontal]: hasVariant( variants, "direction", "horizontal" ), + [sty.rootgapRow__10]: hasVariant(variants, "gapRow", "_10"), + [sty.rootgapRow__30]: hasVariant(variants, "gapRow", "_30"), + [sty.rootgapRow__5]: hasVariant(variants, "gapRow", "_5"), [sty.rootgap__10]: hasVariant(variants, "gap", "_10"), [sty.rootgap__15]: hasVariant(variants, "gap", "_15"), [sty.rootgap__5]: hasVariant(variants, "gap", "_5"), + [sty.rootgap__5_direction_horizontal]: + hasVariant(variants, "gap", "_5") && + hasVariant(variants, "direction", "horizontal"), [sty.rootjustify_between]: hasVariant(variants, "justify", "between"), [sty.rootjustify_end]: hasVariant(variants, "justify", "end"), [sty.rootjustify_start]: hasVariant(variants, "justify", "start"), + [sty.rootmargin__10]: hasVariant(variants, "margin", "_10"), + [sty.rootmargin__5]: hasVariant(variants, "margin", "_5"), + [sty.rootmb__10]: hasVariant(variants, "mb", "_10"), + [sty.rootmb__15]: hasVariant(variants, "mb", "_15"), + [sty.rootmb__20]: hasVariant(variants, "mb", "_20"), + [sty.rootmb__25]: hasVariant(variants, "mb", "_25"), + [sty.rootmb__30]: hasVariant(variants, "mb", "_30"), + [sty.rootmb__5]: hasVariant(variants, "mb", "_5"), + [sty.rootmr__10]: hasVariant(variants, "mr", "_10"), + [sty.rootmr__15]: hasVariant(variants, "mr", "_15"), + [sty.rootmr__5]: hasVariant(variants, "mr", "_5"), [sty.rootpadding__0]: hasVariant(variants, "padding", "_0"), [sty.rootpadding__10]: hasVariant(variants, "padding", "_10"), - [sty.rootpadding__15]: hasVariant(variants, "padding", "_15") + [sty.rootpadding__15]: hasVariant(variants, "padding", "_15"), + [sty.rootpadding__20]: hasVariant(variants, "padding", "_20"), + [sty.rootreverse]: hasVariant(variants, "reverse", "reverse") } )} > diff --git a/src/components/plasmic/marsbase_components/PlasmicCount.module.css b/src/components/plasmic/marsbase_components/PlasmicCount.module.css index b08d023..00f2635 100644 --- a/src/components/plasmic/marsbase_components/PlasmicCount.module.css +++ b/src/components/plasmic/marsbase_components/PlasmicCount.module.css @@ -21,20 +21,10 @@ height: 17px; justify-content: center; align-items: center; -} -.freeBox { - display: flex; - position: relative; - flex-direction: column; - align-items: center; - justify-content: center; - width: 36px; - height: 36px; - max-width: 100%; - flex-shrink: 0; -} -.freeBoxdistribution { - align-self: center; + width: auto; + padding-left: 8px; + padding-right: 8px; + display: inline-flex; } .slotTargetChildren > *, .slotTargetChildren > .__wab_slot > *, diff --git a/src/components/plasmic/marsbase_components/PlasmicCount.tsx b/src/components/plasmic/marsbase_components/PlasmicCount.tsx index b9cb389..49b5801 100644 --- a/src/components/plasmic/marsbase_components/PlasmicCount.tsx +++ b/src/components/plasmic/marsbase_components/PlasmicCount.tsx @@ -62,7 +62,6 @@ export const PlasmicCount__ArgProps = new Array("children"); export type PlasmicCount__OverridesType = { root?: p.Flex<"div">; - freeBox?: p.Flex<"div">; }; export interface DefaultCountProps { @@ -110,43 +109,29 @@ function PlasmicCount__RenderFunc(props: { } )} > -
- {p.renderPlasmicSlot({ - defaultContents: null, - value: args.children, - className: classNames(sty.slotTargetChildren, { - [sty.slotTargetChildrendistribution]: hasVariant( - variants, - "distribution", - "distribution" - ) - }) - })} -
+ }) + })}
) as React.ReactElement | null; } const PlasmicDescendants = { - root: ["root", "freeBox"], - freeBox: ["freeBox"] + root: ["root"] } as const; type NodeNameType = keyof typeof PlasmicDescendants; type DescendantsType = typeof PlasmicDescendants[T][number]; type NodeDefaultElementType = { root: "div"; - freeBox: "div"; }; type ReservedPropsType = "variants" | "args" | "overrides"; @@ -206,7 +191,6 @@ export const PlasmicCount = Object.assign( makeNodeComponent("root"), { // Helper components rendering sub-elements - freeBox: makeNodeComponent("freeBox"), // Metadata about props expected for PlasmicCount internalVariantProps: PlasmicCount__VariantProps, diff --git a/src/components/plasmic/marsbase_components/PlasmicGlobalVariant__Screen.tsx b/src/components/plasmic/marsbase_components/PlasmicGlobalVariant__Screen.tsx index edbed8d..77a74cc 100644 --- a/src/components/plasmic/marsbase_components/PlasmicGlobalVariant__Screen.tsx +++ b/src/components/plasmic/marsbase_components/PlasmicGlobalVariant__Screen.tsx @@ -4,7 +4,7 @@ /* prettier-ignore-start */ import * as React from "react"; import * as p from "@plasmicapp/react-web"; -export type ScreenValue = "tablet" | "desktop"; +export type ScreenValue = "tablet" | "desktop" | "laptop"; export const ScreenContext = React.createContext( "PLEASE_RENDER_INSIDE_PROVIDER" as any ); @@ -23,7 +23,8 @@ export function ScreenVariantProvider(props: React.PropsWithChildren) { export const useScreenVariants = p.createUseScreenVariants(true, { tablet: "(min-width:512px)", - desktop: "(min-width:1024px)", + desktop: "(min-width:1440px)", + laptop: "(min-width:1024px)", }); export default ScreenContext; diff --git a/src/components/plasmic/marsbase_components/PlasmicRootContainer.module.css b/src/components/plasmic/marsbase_components/PlasmicRootContainer.module.css new file mode 100644 index 0000000..bd4a1a7 --- /dev/null +++ b/src/components/plasmic/marsbase_components/PlasmicRootContainer.module.css @@ -0,0 +1,30 @@ +.root { + display: flex; + flex-direction: column; + position: relative; + width: 100%; + height: auto; + justify-content: flex-start; + align-items: center; + min-width: 0; +} +.freeBox { + display: flex; + position: relative; + flex-direction: column; + align-items: center; + justify-content: flex-start; + width: 100%; + height: auto; + min-width: 0; + padding: 20px; +} +@media (min-width: 1440px) { + .freeBox { + max-width: 1488px; + padding: 0px; + } +} +.freeBoxmb__110 { + margin-bottom: 110px; +} diff --git a/src/components/plasmic/marsbase_components/PlasmicRootContainer.tsx b/src/components/plasmic/marsbase_components/PlasmicRootContainer.tsx new file mode 100644 index 0000000..8ba6690 --- /dev/null +++ b/src/components/plasmic/marsbase_components/PlasmicRootContainer.tsx @@ -0,0 +1,197 @@ +// @ts-nocheck +/* eslint-disable */ +/* tslint:disable */ +/* prettier-ignore-start */ + +/** @jsxRuntime classic */ +/** @jsx createPlasmicElementProxy */ +/** @jsxFrag React.Fragment */ + +// This class is auto-generated by Plasmic; please do not edit! +// Plasmic Project: ujWBNnbL2n4RZDdiZiYFdw +// Component: OWF7fqE1kH +import * as React from "react"; + +import * as p from "@plasmicapp/react-web"; +import * as ph from "@plasmicapp/host"; + +import { + hasVariant, + classNames, + wrapWithClassName, + createPlasmicElementProxy, + makeFragment, + MultiChoiceArg, + SingleBooleanChoiceArg, + SingleChoiceArg, + pick, + omit, + useTrigger, + StrictProps, + deriveRenderOpts, + ensureGlobalVariants +} from "@plasmicapp/react-web"; + +import "@plasmicapp/react-web/lib/plasmic.css"; + +import projectcss from "./plasmic_marsbase_components.module.css"; // plasmic-import: ujWBNnbL2n4RZDdiZiYFdw/projectcss +import sty from "./PlasmicRootContainer.module.css"; // plasmic-import: OWF7fqE1kH/css + +export type PlasmicRootContainer__VariantMembers = { + mb: "_110"; +}; + +export type PlasmicRootContainer__VariantsArgs = { + mb?: SingleChoiceArg<"_110">; +}; + +type VariantPropType = keyof PlasmicRootContainer__VariantsArgs; +export const PlasmicRootContainer__VariantProps = new Array( + "mb" +); + +export type PlasmicRootContainer__ArgsType = { + children?: React.ReactNode; +}; + +type ArgPropType = keyof PlasmicRootContainer__ArgsType; +export const PlasmicRootContainer__ArgProps = new Array( + "children" +); + +export type PlasmicRootContainer__OverridesType = { + root?: p.Flex<"div">; + freeBox?: p.Flex<"div">; +}; + +export interface DefaultRootContainerProps { + children?: React.ReactNode; + mb?: SingleChoiceArg<"_110">; + className?: string; +} + +export const defaultRootContainer__Args: Partial = + {}; + +function PlasmicRootContainer__RenderFunc(props: { + variants: PlasmicRootContainer__VariantsArgs; + args: PlasmicRootContainer__ArgsType; + overrides: PlasmicRootContainer__OverridesType; + + forNode?: string; +}) { + const { variants, overrides, forNode } = props; + const args = Object.assign({}, defaultRootContainer__Args, props.args); + const $props = args; + const $ctx = ph.useDataEnv?.() || {}; + + return ( +
+
+ {p.renderPlasmicSlot({ + defaultContents: null, + value: args.children + })} +
+
+ ) as React.ReactElement | null; +} + +const PlasmicDescendants = { + root: ["root", "freeBox"], + freeBox: ["freeBox"] +} as const; +type NodeNameType = keyof typeof PlasmicDescendants; +type DescendantsType = + typeof PlasmicDescendants[T][number]; +type NodeDefaultElementType = { + root: "div"; + freeBox: "div"; +}; + +type ReservedPropsType = "variants" | "args" | "overrides"; +type NodeOverridesType = Pick< + PlasmicRootContainer__OverridesType, + DescendantsType +>; +type NodeComponentProps = + // Explicitly specify variants, args, and overrides as objects + { + variants?: PlasmicRootContainer__VariantsArgs; + args?: PlasmicRootContainer__ArgsType; + overrides?: NodeOverridesType; + } & Omit & // Specify variants directly as props + // Specify args directly as props + Omit & + // Specify overrides for each element directly as props + Omit< + NodeOverridesType, + ReservedPropsType | VariantPropType | ArgPropType + > & + // Specify props for the root element + Omit< + Partial>, + ReservedPropsType | VariantPropType | ArgPropType | DescendantsType + >; + +function makeNodeComponent(nodeName: NodeName) { + type PropsType = NodeComponentProps & { key?: React.Key }; + const func = function ( + props: T & StrictProps + ) { + const { variants, args, overrides } = deriveRenderOpts(props, { + name: nodeName, + descendantNames: [...PlasmicDescendants[nodeName]], + internalArgPropNames: PlasmicRootContainer__ArgProps, + internalVariantPropNames: PlasmicRootContainer__VariantProps + }); + + return PlasmicRootContainer__RenderFunc({ + variants, + args, + overrides, + forNode: nodeName + }); + }; + if (nodeName === "root") { + func.displayName = "PlasmicRootContainer"; + } else { + func.displayName = `PlasmicRootContainer.${nodeName}`; + } + return func; +} + +export const PlasmicRootContainer = Object.assign( + // Top-level PlasmicRootContainer renders the root element + makeNodeComponent("root"), + { + // Helper components rendering sub-elements + freeBox: makeNodeComponent("freeBox"), + + // Metadata about props expected for PlasmicRootContainer + internalVariantProps: PlasmicRootContainer__VariantProps, + internalArgProps: PlasmicRootContainer__ArgProps + } +); + +export default PlasmicRootContainer; +/* prettier-ignore-end */ diff --git a/src/components/plasmic/marsbase_components/PlasmicText.module.css b/src/components/plasmic/marsbase_components/PlasmicText.module.css index baa18c6..13f2598 100644 --- a/src/components/plasmic/marsbase_components/PlasmicText.module.css +++ b/src/components/plasmic/marsbase_components/PlasmicText.module.css @@ -116,10 +116,14 @@ font-size: 12px; font-family: var(--token-t77KRyK74); font-weight: 600; + white-space: pre; } .slotTargetChildrenwithIconLeft { white-space: pre-wrap; } +.slotTargetChildrennoWrap { + white-space: pre; +} .slotTargetChildrenweight_light { font-weight: 300; } @@ -147,6 +151,9 @@ flex-direction: row; min-width: 0; } +.freeBoxtitle__4__lzUj9Fj1Lh { + display: none; +} .icon__aKwMs:global(.__wab_instance) { max-width: 100%; position: relative; diff --git a/src/components/plasmic/marsbase_components/PlasmicText.tsx b/src/components/plasmic/marsbase_components/PlasmicText.tsx index b5473f2..08168ff 100644 --- a/src/components/plasmic/marsbase_components/PlasmicText.tsx +++ b/src/components/plasmic/marsbase_components/PlasmicText.tsx @@ -48,6 +48,7 @@ export type PlasmicText__VariantMembers = { title: "_1" | "_2" | "_3" | "_4"; withIconRight: "withIconRight"; withIconLeft: "withIconLeft"; + noWrap: "noWrap"; }; export type PlasmicText__VariantsArgs = { @@ -60,6 +61,7 @@ export type PlasmicText__VariantsArgs = { title?: SingleChoiceArg<"_1" | "_2" | "_3" | "_4">; withIconRight?: SingleBooleanChoiceArg<"withIconRight">; withIconLeft?: SingleBooleanChoiceArg<"withIconLeft">; + noWrap?: SingleBooleanChoiceArg<"noWrap">; }; type VariantPropType = keyof PlasmicText__VariantsArgs; @@ -70,7 +72,8 @@ export const PlasmicText__VariantProps = new Array( "opacity", "title", "withIconRight", - "withIconLeft" + "withIconLeft", + "noWrap" ); export type PlasmicText__ArgsType = { @@ -104,6 +107,7 @@ export interface DefaultTextProps { title?: SingleChoiceArg<"_1" | "_2" | "_3" | "_4">; withIconRight?: SingleBooleanChoiceArg<"withIconRight">; withIconLeft?: SingleBooleanChoiceArg<"withIconLeft">; + noWrap?: SingleBooleanChoiceArg<"noWrap">; className?: string; } @@ -195,6 +199,11 @@ function PlasmicText__RenderFunc(props: { "colors", "white" ), + [sty.freeBoxnoWrap___4Jz6KQ9LeL]: hasVariant( + variants, + "noWrap", + "noWrap" + ), [sty.freeBoxsize__10___4Jz6KPsPn]: hasVariant( variants, "size", @@ -281,6 +290,11 @@ function PlasmicText__RenderFunc(props: { "colors", "red" ), + [sty.slotTargetChildrennoWrap]: hasVariant( + variants, + "noWrap", + "noWrap" + ), [sty.slotTargetChildrenopacity__10]: hasVariant( variants, "opacity", @@ -375,57 +389,71 @@ function PlasmicText__RenderFunc(props: { })}
-
- {true ? ( - - ) : null} -
- + {(hasVariant(variants, "title", "_4") ? true : true) ? ( +
+ {true ? ( + + ) : null} +
+ ) : null} {true ? (

> = ( { @@ -14,23 +14,30 @@ export const NftsContainer: FC> = ( }) => { const isMobile = useMediaQuery(Queries.mobile); const isTablet = useMediaQuery(Queries.tablet); + const isDesktop = (!isMobile && !isTablet); + + return ( -
- {nfts.map((nft) => - - )} -
+ <> + {isDesktop && } +
+ {nfts.map((nft) => + + )} +
+ ) } const nftContainer = (isMobile: boolean, isTablet: boolean) => style({ display: 'grid', gridTemplateColumns: `repeat(${(!isMobile && isTablet) ? '2' : '1'}, 1fr)`, - gap: isTablet ? '16px' : '32px', + gap: isTablet ? '15px' : '30px', + width: '100%', }) \ No newline at end of file diff --git a/src/components/stateful/NftTableSummaryWrapper.tsx b/src/components/stateful/NftTableSummaryWrapper.tsx index 1a3d22d..2283811 100644 --- a/src/components/stateful/NftTableSummaryWrapper.tsx +++ b/src/components/stateful/NftTableSummaryWrapper.tsx @@ -1,23 +1,34 @@ -import { BigNumber, utils } from "ethers"; -import React, { FC, ReactNode, useContext } from "react"; -import { NFTS_PER_TRANSACTION } from "../../config"; -import { AppStateContext } from "../../contexts/AppStateContext"; -import { HandlersContext } from "../../contexts/HandlersContext"; -import { NftsContext } from "../../contexts/NftsContext"; -import { TxSasResult, useCurrentUser } from "../../hooks/jrpc-provider"; -import { useMarsbaseContracts } from "../../hooks/mbase-contract"; -import { NftTableSummary } from "../organisms/NftTableSummary"; +import React, {FC, ReactNode, useContext} from "react"; +import {AppStateContext} from "../../contexts/AppStateContext"; +import {NftTableSummary} from "../organisms/NftTableSummary"; +import {ClaimRewardsModalLocalized} from "../molecules/ClaimRewardsModal"; +import {useModal} from "../../hooks/modal"; export const NftTableSummaryWrapper = () => { - const { data } = useContext(AppStateContext) - const { handlers } = useContext(HandlersContext); + const {data} = useContext(AppStateContext); + const [Modal, visible, setVisible] = useModal(); return ( - + <> + setVisible(true)} + /> + + setVisible(false)} + token={'MBase'} + amount={3600000} + availableForClaim={123123123} + onClaim={() => console.log('on claim click')} + btnClaimLoad={false} + kind={'silver'} + onAvailableForClaimChange={e => console.log(e)} + /> + + ) } \ No newline at end of file diff --git a/src/components/templates/TokenDashboardTemplate.tsx b/src/components/templates/TokenDashboardTemplate.tsx deleted file mode 100644 index ef5b055..0000000 --- a/src/components/templates/TokenDashboardTemplate.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, {FC, ReactNode} from "react" -import {style} from "typestyle" -import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; -import {HowIsLocalized} from "../molecules/HowIsDistributionDone"; -import Container from "../Container"; - -export const TokenDashboardTemplate: FC<{ children: ReactNode }> = ({children}) => { - const isMobile = useMediaQuery(Queries.mobile); - const isTablet = useMediaQuery(Queries.tablet) - - return ( -
- - {children} - - {(isMobile || !isTablet) && ( - - )} -
- ) -} - -const main = (isMobile: boolean, isTablet: boolean) => style({ - display: "flex", - flexDirection: isMobile ? 'column' : "row", - gap: "20px", - maxWidth: '1433px', - backgroundColor: (!isMobile && isTablet) ? 'rgba(27, 27, 28, 0.4)' : 'unset', - margin: '10px auto', - borderRadius: '12px', - // width: '100%' -}) diff --git a/src/components/templates/VestingSplitTemplate.tsx b/src/components/templates/VestingSplitTemplate.tsx deleted file mode 100644 index 8cec2e9..0000000 --- a/src/components/templates/VestingSplitTemplate.tsx +++ /dev/null @@ -1 +0,0 @@ -export {}; \ No newline at end of file diff --git a/src/components/templates/index.tsx b/src/components/templates/index.tsx deleted file mode 100644 index 6cf79e8..0000000 --- a/src/components/templates/index.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, {FC, ReactNode, useEffect} from 'react'; -import {Queries, useMediaQuery} from "../../hooks/mediaQuery"; -import {style} from "typestyle"; - -export const Header: FC<{children: ReactNode}> = ({ children }) => { - return
-
- {children} -
-
-} - -const container = style({ - borderBottom: '1px solid rgba(104,106,110,0.6)', - marginBottom: '41px', - width: '100%', - margin: 'auto', - background: 'linear-gradient(97deg, rgba(0,0,0,1) 0%, rgba(26,1,47,1) 100%)' -}) - -const content = style({ - maxWidth: '1433px', - margin: 'auto', - padding: '0 20px 0 20px' -}) \ No newline at end of file diff --git a/src/config.ts b/src/config.ts index e3bed84..c1edbfd 100644 --- a/src/config.ts +++ b/src/config.ts @@ -3,7 +3,7 @@ const chainIdToHex = (chainId: number) => `0x${chainId.toString(16)}` const mbaseTokenAddress = '0x765Eb9A1518C2906D11D330a11dBA294a7673E84' -const mbaseVestingAddress = '0xd37A38DC1BE88c33033821025A7CC5664d2b7328' +const mbaseVestingAddress = '0x9184B801B148838436E15B399681B40A37F7f009' export const NETWORKS = ([ { diff --git a/src/data.ts b/src/data.ts index 6d27376..99a97b1 100644 --- a/src/data.ts +++ b/src/data.ts @@ -1,5 +1,6 @@ import { FixedNumber } from "ethers" import {INft} from "./components/organisms/types"; +import {ReactNode} from "react"; export type LocalizedDictionary = typeof DICT[keyof typeof DICT] export const DICT = { @@ -55,6 +56,16 @@ export const DICT = { title: 'NFT is being splitted', subTitle: 'Please wait for a few moments. Colonizing Mars make take a while...' } + }, + notifications: { + success: { + title: 'Done', + subTitle: 'Every time after using Mars Base, we recommend you to disconnect.' + }, + error: { + title: 'Error', + subTitle: 'Every time after using Mars Base, we recommend you to disconnect.' + } } }, vestingSplit: { @@ -64,6 +75,39 @@ export const DICT = { "without slippage or market price impact", sell_with_premium_btn: (token: string) => `Sell ${token} with premium`, buy_now_btn: (token: string) => `Buy ${token} now`, + split_details: { + total_fee_label: 'Total fee', + parts_label: 'Part', + total_parts_label: 'Total parts' + }, + steps: [ + { + active: false, + title: 'Parameters', + subTitle: 'Set suitable conditions' + }, + { + active: true, + title: 'Split details', + subTitle: 'Verify and approve the offer' + }, + { + active: false, + title: 'Publication', + subTitle: 'Send the offer to the market' + } + ], + nft_view_card: { + view_text: "View", + nft_details_text: "NFT Details", + buy_price_text: "Buy price " + }, + split_error: { + title: "", + sub_title: "", + back_text: "Back to dashboard", + try_again_text: "" + } } } }, diff --git a/src/hooks/modal.ts b/src/hooks/modal.ts deleted file mode 100644 index 90e47de..0000000 --- a/src/hooks/modal.ts +++ /dev/null @@ -1,46 +0,0 @@ -import {createPortal} from "react-dom"; -import { - Dispatch, - FC, - ReactNode, - SetStateAction, - useState -} from "react"; - -export const useModal = (id: string): [FC, boolean, Dispatch>] => { - const [open, setOpen] = useState(false); - - const handleOpen = (children: ReactNode) => { - const element = document.createElement("div"); - element.setAttribute("id", id); - - const modalRoot = document.getElementById('modal-root'); - - if (!modalRoot) { - throw new Error('modalRoot not exist') - } - - modalRoot.appendChild(element); - - return createPortal(children, element) - } - - const handleClose = () => { - const el = document.getElementById(id); - - if (el) { - el.remove() - } - - return null; - } - - - const Modal: FC = ({children}) => { - return open - ? handleOpen(children) - : handleClose() - } - - return [Modal, open, setOpen] -} \ No newline at end of file diff --git a/src/hooks/modal.tsx b/src/hooks/modal.tsx new file mode 100644 index 0000000..ff196e1 --- /dev/null +++ b/src/hooks/modal.tsx @@ -0,0 +1,36 @@ +import { + Dispatch, + FC, PropsWithChildren, + SetStateAction, + useState +} from "react"; +import Modal from "react-modal"; +import React from "react" + +Modal.setAppElement('#modals'); + +export const useModal = (): [FC>, boolean, Dispatch>] => { + const [modalIsOpen, setIsOpen] = useState(false); + + const customStyles = { + overlay: { + backgroundColor: 'unset', + }, + content: { + inset: 0, + border: 'unset', + borderRadius: 'unset', + backgroundColor: 'unset', + }, + }; + + const ReturnModal: FC> = ({children}) => { + return modalIsOpen + ? + {children} + + : null + } + + return [ReturnModal, modalIsOpen, setIsOpen] +} \ No newline at end of file diff --git a/src/plasmic-host.tsx b/src/plasmic-host.tsx index 44509f9..5dfa37b 100644 --- a/src/plasmic-host.tsx +++ b/src/plasmic-host.tsx @@ -8,35 +8,8 @@ const root = createRoot(rootElement!) root.render() - -import { registerComponent } from '@plasmicapp/host' - const wrap = (FC: React.FC) => class extends React.Component { render() { return } } - -import { NftOverviewWrapper } from "./components/molecules/NftOverview" -registerComponent(wrap(NftOverviewWrapper), { - name: "NftOverviewWrapper", - importPath: "./components/molecules/NftOverview", - props: { - amount: "string", - token: "string", - buyPrice: "number", - usdValue: "number", - kind: "string", - unvestStartTimestamp: "string", - } -}) - -import { SummaryDestributionWrapper } from "./components/molecules/SummaryDestribution" -registerComponent(wrap(SummaryDestributionWrapper), { - name: "SummaryDestributionWrapper", - importPath: "./components/molecules/SummaryDestribution", - props: { - count: "number", - icon: "imageUrl", - } -}) diff --git a/yarn.lock b/yarn.lock index 40abc5c..281bb1f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17,12 +17,38 @@ dependencies: "@babel/highlight" "^7.16.7" -"@babel/compat-data@^7.13.11", "@babel/compat-data@^7.17.10": +"@babel/compat-data@^7.13.11": version "7.17.10" resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.10.tgz#711dc726a492dfc8be8220028b1b92482362baab" integrity sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw== -"@babel/core@^7.12.3", "@babel/core@^7.17.10": +"@babel/compat-data@^7.17.10": + version "7.18.5" + resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.5.tgz#acac0c839e317038c73137fbb6ef71a1d6238471" + integrity sha512-BxhE40PVCBxVEJsSBhB6UWyAuqJRxGsAw8BdHMJ3AKGydcwuWW4kOO3HmqBQAdcq/OP+/DlTVxLvsCzRTnZuGg== + +"@babel/core@^7.12.3": + version "7.18.5" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.5.tgz#c597fa680e58d571c28dda9827669c78cdd7f000" + integrity sha512-MGY8vg3DxMnctw0LdvSEojOsumc70g0t18gNyUdAZqB1Rpd1Bqo/svHGvt+UJ6JcGX+DIekGFDxxIWofBxLCnQ== + dependencies: + "@ampproject/remapping" "^2.1.0" + "@babel/code-frame" "^7.16.7" + "@babel/generator" "^7.18.2" + "@babel/helper-compilation-targets" "^7.18.2" + "@babel/helper-module-transforms" "^7.18.0" + "@babel/helpers" "^7.18.2" + "@babel/parser" "^7.18.5" + "@babel/template" "^7.16.7" + "@babel/traverse" "^7.18.5" + "@babel/types" "^7.18.4" + convert-source-map "^1.7.0" + debug "^4.1.0" + gensync "^1.0.0-beta.2" + json5 "^2.2.1" + semver "^6.3.0" + +"@babel/core@^7.17.10": version "7.17.10" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.10.tgz#74ef0fbf56b7dfc3f198fc2d927f4f03e12f4b05" integrity sha512-liKoppandF3ZcBnIYFjfSDHZLKdLHGJRkoWtG8zQyGJBQfIYobpnVGI5+pLBNtS6psFLDzyq8+h5HiVljW9PNA== @@ -43,13 +69,13 @@ json5 "^2.2.1" semver "^6.3.0" -"@babel/generator@^7.12.1", "@babel/generator@^7.17.10": - version "7.17.10" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.10.tgz#c281fa35b0c349bbe9d02916f4ae08fc85ed7189" - integrity sha512-46MJZZo9y3o4kmhBVc7zW7i8dtR1oIK/sdO5NcfcZRhTGYi+KKJRtHNgsU6c4VUcJmUNV/LQdebD/9Dlv4K+Tg== +"@babel/generator@^7.12.1", "@babel/generator@^7.17.10", "@babel/generator@^7.18.2": + version "7.18.2" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.2.tgz#33873d6f89b21efe2da63fe554460f3df1c5880d" + integrity sha512-W1lG5vUwFvfMd8HVXqdfbuG7RuaSrTCCD8cl8fP8wOivdbtbIg2Db3IWUcgvfxKbbn6ZBGYRW/Zk1MIwK49mgw== dependencies: - "@babel/types" "^7.17.10" - "@jridgewell/gen-mapping" "^0.1.0" + "@babel/types" "^7.18.2" + "@jridgewell/gen-mapping" "^0.3.0" jsesc "^2.5.1" "@babel/helper-annotate-as-pure@^7.16.7": @@ -59,7 +85,7 @@ dependencies: "@babel/types" "^7.16.7" -"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.17.10": +"@babel/helper-compilation-targets@^7.13.0": version "7.17.10" resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.10.tgz#09c63106d47af93cf31803db6bc49fef354e2ebe" integrity sha512-gh3RxjWbauw/dFiU/7whjd0qN9K6nPJMqe6+Er7rOavFh0CQUSwhAE3IcTho2rywPJFxej6TUUHDkWcYI6gGqQ== @@ -69,6 +95,16 @@ browserslist "^4.20.2" semver "^6.3.0" +"@babel/helper-compilation-targets@^7.17.10", "@babel/helper-compilation-targets@^7.18.2": + version "7.18.2" + resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.2.tgz#67a85a10cbd5fc7f1457fec2e7f45441dc6c754b" + integrity sha512-s1jnPotJS9uQnzFtiZVBUxe67CuBa679oWFHpxYYnTpRL/1ffhyX44R9uYiXoa/pLXcY9H2moJta0iaanlk/rQ== + dependencies: + "@babel/compat-data" "^7.17.10" + "@babel/helper-validator-option" "^7.16.7" + browserslist "^4.20.2" + semver "^6.3.0" + "@babel/helper-define-polyfill-provider@^0.3.1": version "0.3.1" resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz#52411b445bdb2e676869e5a74960d2d3826d2665" @@ -83,12 +119,10 @@ resolve "^1.14.2" semver "^6.1.2" -"@babel/helper-environment-visitor@^7.16.7": - version "7.16.7" - resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7" - integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag== - dependencies: - "@babel/types" "^7.16.7" +"@babel/helper-environment-visitor@^7.16.7", "@babel/helper-environment-visitor@^7.18.2": + version "7.18.2" + resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.2.tgz#8a6d2dedb53f6bf248e31b4baf38739ee4a637bd" + integrity sha512-14GQKWkX9oJzPiQQ7/J36FTXcD4kSp8egKjO9nINlSKiHITRA9q/R74qu8S9xlc/b/yjsJItQUeeh3xnGN0voQ== "@babel/helper-function-name@^7.17.9": version "7.17.9" @@ -112,10 +146,10 @@ dependencies: "@babel/types" "^7.16.7" -"@babel/helper-module-transforms@^7.17.7": - version "7.17.7" - resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz#3943c7f777139e7954a5355c815263741a9c1cbd" - integrity sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw== +"@babel/helper-module-transforms@^7.17.7", "@babel/helper-module-transforms@^7.18.0": + version "7.18.0" + resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.0.tgz#baf05dec7a5875fb9235bd34ca18bad4e21221cd" + integrity sha512-kclUYSUBIjlvnzN2++K9f2qzYKFgjmnmjwL4zlmU5f8ZtzgWe8s0rUPSTGy2HmK4P8T52MQsS+HTQAgZd3dMEA== dependencies: "@babel/helper-environment-visitor" "^7.16.7" "@babel/helper-module-imports" "^7.16.7" @@ -123,8 +157,8 @@ "@babel/helper-split-export-declaration" "^7.16.7" "@babel/helper-validator-identifier" "^7.16.7" "@babel/template" "^7.16.7" - "@babel/traverse" "^7.17.3" - "@babel/types" "^7.17.0" + "@babel/traverse" "^7.18.0" + "@babel/types" "^7.18.0" "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.16.7": version "7.16.7" @@ -137,11 +171,11 @@ integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA== "@babel/helper-simple-access@^7.17.7": - version "7.17.7" - resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz#aaa473de92b7987c6dfa7ce9a7d9674724823367" - integrity sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA== + version "7.18.2" + resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.18.2.tgz#4dc473c2169ac3a1c9f4a51cfcd091d1c36fcff9" + integrity sha512-7LIrjYzndorDY88MycupkpQLKS1AFfsVRm2k/9PtKScSy5tZq0McZTj+DiMRynboZfIqOKvo03pmhTaUgiD6fQ== dependencies: - "@babel/types" "^7.17.0" + "@babel/types" "^7.18.2" "@babel/helper-split-export-declaration@^7.16.7": version "7.16.7" @@ -160,28 +194,28 @@ resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23" integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ== -"@babel/helpers@^7.17.9": - version "7.17.9" - resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.9.tgz#b2af120821bfbe44f9907b1826e168e819375a1a" - integrity sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q== +"@babel/helpers@^7.17.9", "@babel/helpers@^7.18.2": + version "7.18.2" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.18.2.tgz#970d74f0deadc3f5a938bfa250738eb4ac889384" + integrity sha512-j+d+u5xT5utcQSzrh9p+PaJX94h++KN+ng9b9WEJq7pkUPAd61FGqhjuUEdfknb3E/uDBb7ruwEeKkIxNJPIrg== dependencies: "@babel/template" "^7.16.7" - "@babel/traverse" "^7.17.9" - "@babel/types" "^7.17.0" + "@babel/traverse" "^7.18.2" + "@babel/types" "^7.18.2" "@babel/highlight@^7.16.7": - version "7.17.9" - resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.9.tgz#61b2ee7f32ea0454612def4fccdae0de232b73e3" - integrity sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg== + version "7.17.12" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.12.tgz#257de56ee5afbd20451ac0a75686b6b404257351" + integrity sha512-7yykMVF3hfZY2jsHZEEgLc+3x4o1O+fYyULu11GynEUQNwB6lua+IIQn1FiJxNucd5UlyJryrwsOh8PL9Sn8Qg== dependencies: "@babel/helper-validator-identifier" "^7.16.7" chalk "^2.0.0" js-tokens "^4.0.0" -"@babel/parser@*", "@babel/parser@^7.1.0", "@babel/parser@^7.12.3", "@babel/parser@^7.16.7", "@babel/parser@^7.17.10": - version "7.17.10" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.10.tgz#873b16db82a8909e0fbd7f115772f4b739f6ce78" - integrity sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ== +"@babel/parser@*", "@babel/parser@^7.1.0", "@babel/parser@^7.12.3", "@babel/parser@^7.16.7", "@babel/parser@^7.17.10", "@babel/parser@^7.18.5": + version "7.18.5" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.5.tgz#337062363436a893a2d22faa60be5bb37091c83c" + integrity sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw== "@babel/plugin-syntax-jsx@^7.12.13": version "7.17.12" @@ -264,7 +298,23 @@ "@babel/parser" "^7.16.7" "@babel/types" "^7.16.7" -"@babel/traverse@^7.12.1", "@babel/traverse@^7.13.0", "@babel/traverse@^7.17.10", "@babel/traverse@^7.17.3", "@babel/traverse@^7.17.9": +"@babel/traverse@^7.12.1", "@babel/traverse@^7.17.10", "@babel/traverse@^7.18.0", "@babel/traverse@^7.18.2", "@babel/traverse@^7.18.5": + version "7.18.5" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.5.tgz#94a8195ad9642801837988ab77f36e992d9a20cd" + integrity sha512-aKXj1KT66sBj0vVzk6rEeAO6Z9aiiQ68wfDgge3nHhA/my6xMM/7HGQUNumKZaoa2qUPQ5whJG9aAifsxUKfLA== + dependencies: + "@babel/code-frame" "^7.16.7" + "@babel/generator" "^7.18.2" + "@babel/helper-environment-visitor" "^7.18.2" + "@babel/helper-function-name" "^7.17.9" + "@babel/helper-hoist-variables" "^7.16.7" + "@babel/helper-split-export-declaration" "^7.16.7" + "@babel/parser" "^7.18.5" + "@babel/types" "^7.18.4" + debug "^4.1.0" + globals "^11.1.0" + +"@babel/traverse@^7.13.0": version "7.17.10" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.10.tgz#1ee1a5ac39f4eac844e6cf855b35520e5eb6f8b5" integrity sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw== @@ -280,10 +330,10 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.16.7", "@babel/types@^7.17.0", "@babel/types@^7.17.10", "@babel/types@^7.3.0": - version "7.17.10" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.10.tgz#d35d7b4467e439fcf06d195f8100e0fea7fc82c4" - integrity sha512-9O26jG0mBYfGkUYCYZRnBwbVLd1UZOICEr2Em6InB6jVfsAv1GKgwXHmrSg+WFWDmeKTA6vyTZiN8tCSM5Oo3A== +"@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.16.7", "@babel/types@^7.17.0", "@babel/types@^7.17.10", "@babel/types@^7.18.0", "@babel/types@^7.18.2", "@babel/types@^7.18.4", "@babel/types@^7.3.0": + version "7.18.4" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.4.tgz#27eae9b9fd18e9dccc3f9d6ad051336f307be354" + integrity sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw== dependencies: "@babel/helper-validator-identifier" "^7.16.7" to-fast-properties "^2.0.0" @@ -794,6 +844,15 @@ "@jridgewell/set-array" "^1.0.0" "@jridgewell/sourcemap-codec" "^1.4.10" +"@jridgewell/gen-mapping@^0.3.0": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.1.tgz#cf92a983c83466b8c0ce9124fadeaf09f7c66ea9" + integrity sha512-GcHwniMlA2z+WFPWuY8lp3fsza0I8xPFMWL5+n8LYyP6PSvPrXf4+n8stDHZY2DM0zy9sVkRDy1jDI4XGzYVqg== + dependencies: + "@jridgewell/set-array" "^1.0.0" + "@jridgewell/sourcemap-codec" "^1.4.10" + "@jridgewell/trace-mapping" "^0.3.9" + "@jridgewell/resolve-uri@^3.0.3": version "3.0.7" resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz#30cd49820a962aff48c8fffc5cd760151fca61fe" @@ -856,9 +915,9 @@ "@openzeppelin/contracts" "^4.5.0" "@plasmicapp/cli@^0.1.178": - version "0.1.178" - resolved "https://registry.yarnpkg.com/@plasmicapp/cli/-/cli-0.1.178.tgz#71045f4bd9df3c9e189c02e39a716602fd391097" - integrity sha512-GEl7Bw7pNvXZkSWqkOZZEuIBNemLJESGYr3EV54bwXdQ0VESI+BQdq8Ehphtnr/rELXjZF6XD9eQwsfsppPjkQ== + version "0.1.182" + resolved "https://registry.yarnpkg.com/@plasmicapp/cli/-/cli-0.1.182.tgz#02670a1e8d6453adc0f3bd9df35d490388a702c4" + integrity sha512-c4vDsNulHhMoDMFmNeS8dWRQKB36Ob6dalCijqvSDzk//lAD039xwswDH9KtCRapdbIZyf8i3lS8ZWnzhMg8Ew== dependencies: "@babel/core" "^7.12.3" "@babel/generator" "^7.12.1" @@ -1500,6 +1559,13 @@ dependencies: "@types/react" "*" +"@types/react-modal@^3.13.1": + version "3.13.1" + resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.13.1.tgz#5b9845c205fccc85d9a77966b6e16dc70a60825a" + integrity sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@^18.0.6": version "18.0.9" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.9.tgz#d6712a38bd6cd83469603e7359511126f122e878" @@ -1579,9 +1645,9 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0: color-convert "^2.0.1" async@^3.2.3: - version "3.2.3" - resolved "https://registry.yarnpkg.com/async/-/async-3.2.3.tgz#ac53dafd3f4720ee9e8a160628f18ea91df196c9" - integrity sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g== + version "3.2.4" + resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c" + integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ== axios@^0.21.1: version "0.21.4" @@ -1643,7 +1709,7 @@ babel-runtime@^6.26.0: backo2@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947" - integrity sha1-MasayLEpNjRj41s+u2n038+6eUc= + integrity sha512-zj6Z6M7Eq+PBZ7PQxl5NT665MvJdAkzp0f60nAJ+sLaSCBPMwVak5ZegFbgVCzFcCJTKFoMizvM5Ld7+JrRJHA== balanced-match@^1.0.0: version "1.0.2" @@ -1653,7 +1719,7 @@ balanced-match@^1.0.0: base64-arraybuffer@0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz#9818c79e059b1355f97e0428a017c838e90ba812" - integrity sha1-mBjHngWbE1X5fgQooBfIOOkLqBI= + integrity sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg== bech32@1.1.4: version "1.1.4" @@ -1699,7 +1765,18 @@ brorand@^1.1.0: resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f" integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8= -browserslist@^4.20.2, browserslist@^4.20.3: +browserslist@^4.20.2: + version "4.20.4" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.4.tgz#98096c9042af689ee1e0271333dbc564b8ce4477" + integrity sha512-ok1d+1WpnU24XYN7oC3QWgTyMhY/avPJ/r9T00xxvUOIparA/gc+UPUMaod3i+G6s+nI2nUb9xZ5k794uIwShw== + dependencies: + caniuse-lite "^1.0.30001349" + electron-to-chromium "^1.4.147" + escalade "^3.1.1" + node-releases "^2.0.5" + picocolors "^1.0.0" + +browserslist@^4.20.3: version "4.20.3" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.3.tgz#eb7572f49ec430e054f56d52ff0ebe9be915f8bf" integrity sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg== @@ -1733,10 +1810,10 @@ camelcase@^5.0.0, camelcase@^5.3.1: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320" integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== -caniuse-lite@^1.0.30001332: - version "1.0.30001340" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001340.tgz#029a2f8bfc025d4820fafbfaa6259fd7778340c7" - integrity sha512-jUNz+a9blQTQVu4uFcn17uAD8IDizPzQkIKh3LCJfg9BkyIqExYYdyc/ZSlWUSKb8iYiXxKsxbv4zYSvkqjrxw== +caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001349: + version "1.0.30001354" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001354.tgz#95c5efdb64148bb4870771749b9a619304755ce5" + integrity sha512-mImKeCkyGDAHNywYFA4bqnLAzTUvVkqPvhY4DV47X+Gl2c5Z8c3KNETnXp14GQt11LvxE8AwjzGxJ+rsikiOzg== chalk@^2.0.0: version "2.4.2" @@ -1807,7 +1884,7 @@ cliui@^6.0.0: clone-response@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.2.tgz#d1dc973920314df67fbeb94223b4ee350239e96b" - integrity sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws= + integrity sha512-yjLXh88P599UOyPTFX0POsd7WxnbsVsGohcwzHOLspIhhpalPw1BcqED8NblyZLKcGrL8dTgMlcaZxV2jAD41Q== dependencies: mimic-response "^1.0.0" @@ -1833,7 +1910,7 @@ color-convert@^2.0.1: color-name@1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" - integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= + integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw== color-name@^1.0.0, color-name@~1.1.4: version "1.1.4" @@ -1872,7 +1949,7 @@ component-emitter@~1.3.0: concat-map@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" - integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= + integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg== configstore@^5.0.1: version "5.0.1" @@ -1947,12 +2024,12 @@ debug@4, debug@^4.1.0, debug@^4.1.1, debug@~4.3.1: decamelize@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" - integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA= + integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA== decompress-response@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-3.3.0.tgz#80a4dd323748384bfa248083622aedec982adff3" - integrity sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M= + integrity sha512-BzRPQuY1ip+qDonAOz42gRm/pg9F768C+npV/4JOsxRC2sq+Rlk+Q4ZCAsOhnIaMrgarILY+RMUIvMmmX1qAEA== dependencies: mimic-response "^1.0.0" @@ -1974,7 +2051,7 @@ define-lazy-prop@^2.0.0: detect-file@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7" - integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc= + integrity sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q== diff@^4.0.2: version "4.0.2" @@ -1999,12 +2076,12 @@ dot-prop@^5.2.0: duplexer3@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2" - integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI= + integrity sha512-CEj8FwwNA4cVH2uFCoHUrmojhYh1vmCdOaneKJXwkeY1i9jnlslVo9dx+hQ5Hl9GnH/Bwy/IjxAyOePyPKYnzA== -electron-to-chromium@^1.4.118: - version "1.4.137" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz#186180a45617283f1c012284458510cd99d6787f" - integrity sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA== +electron-to-chromium@^1.4.118, electron-to-chromium@^1.4.147: + version "1.4.155" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.155.tgz#9c7190bf5e8608c5a5e4953b1ccf0facf3d1b49d" + integrity sha512-niPzKBSYPG06gxLKO0c2kEmgdRMTtIbNrBlvD31Ld8Q57b/K0218U4j8u/OOt25XE1eFOn47FcmQVdx9R1qqxA== elliptic@6.5.4: version "6.5.4" @@ -2205,7 +2282,7 @@ escape-goat@^2.0.0: escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" - integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= + integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg== escape-string-regexp@^4.0.0: version "4.0.0" @@ -2253,10 +2330,15 @@ ethers@^5.6.4: "@ethersproject/web" "5.6.0" "@ethersproject/wordlists" "5.6.0" +exenv@^1.2.0: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw== + expand-tilde@^2.0.0, expand-tilde@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502" - integrity sha1-l+gBqgUt8CRU3kawK/YhZCzchQI= + integrity sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw== dependencies: homedir-polyfill "^1.0.1" @@ -2335,9 +2417,9 @@ fn.name@1.x.x: integrity sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw== follow-redirects@^1.14.0: - version "1.15.0" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.0.tgz#06441868281c86d0dda4ad8bdaead2d02dca89d4" - integrity sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ== + version "1.15.1" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5" + integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA== free-style@3.1.0: version "3.1.0" @@ -2347,12 +2429,12 @@ free-style@3.1.0: fs.realpath@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" - integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8= + integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== fs@^0.0.1-security: version "0.0.1-security" resolved "https://registry.yarnpkg.com/fs/-/fs-0.0.1-security.tgz#8a7bd37186b6dddf3813f23858b57ecaaf5e41d4" - integrity sha1-invTcYa23d84E/I4WLV+yq9eQdQ= + integrity sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w== fsevents@~2.3.2: version "2.3.2" @@ -2396,14 +2478,14 @@ glob-parent@^5.1.2: is-glob "^4.0.1" glob@^7.1.6: - version "7.2.0" - resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023" - integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q== + version "7.2.3" + resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b" + integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q== dependencies: fs.realpath "^1.0.0" inflight "^1.0.4" inherits "2" - minimatch "^3.0.4" + minimatch "^3.1.1" once "^1.3.0" path-is-absolute "^1.0.0" @@ -2426,7 +2508,7 @@ global-modules@^1.0.0: global-prefix@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe" - integrity sha1-2/dDxsFJklk8ZVVoy2btMsASLr4= + integrity sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg== dependencies: expand-tilde "^2.0.2" homedir-polyfill "^1.0.1" @@ -2464,12 +2546,12 @@ graceful-fs@^4.1.2: has-cors@1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39" - integrity sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk= + integrity sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA== has-flag@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" - integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0= + integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw== has-flag@^4.0.0: version "4.0.0" @@ -2550,17 +2632,17 @@ import-fresh@^3.1.0: import-lazy@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43" - integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM= + integrity sha512-m7ZEHgtw69qOGw+jwxXkHlrlIPdTGkyh66zXZ1ajZbxkDBNjSY/LGbmjc7h0s2ELsUDTAhFr55TrPSSqJGPG0A== imurmurhash@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" - integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= + integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA== inflight@^1.0.4: version "1.0.6" resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" - integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk= + integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA== dependencies: once "^1.3.0" wrappy "1" @@ -2573,7 +2655,7 @@ inherits@2, inherits@^2.0.3, inherits@^2.0.4: inherits@2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de" - integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4= + integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw== ini@1.3.7: version "1.3.7" @@ -2646,7 +2728,7 @@ is-docker@^2.0.0, is-docker@^2.1.1: is-extglob@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2" - integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI= + integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ== is-fullwidth-code-point@^3.0.0: version "3.0.0" @@ -2696,7 +2778,7 @@ is-stream@^2.0.0: is-typedarray@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" - integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= + integrity sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA== is-windows@^1.0.1: version "1.0.2" @@ -2718,7 +2800,7 @@ is-yarn-global@^0.3.0: isexe@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10" - integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA= + integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw== isomorphic-unfetch@^3.1.0: version "3.1.0" @@ -2746,7 +2828,7 @@ jsesc@^2.5.1: json-buffer@3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.0.tgz#5b1f397afc75d677bde8bcfc0e47e1f9a3d9a898" - integrity sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg= + integrity sha512-CuUqjv0FUZIdXkHPI8MezCnFCdaTAacej1TZYulLoAg1h/PhwkdXFN4V/gzY4g+fMBCOV2xF+rp7t2XD2ns/NQ== json-logic-js@^2.0.2: version "2.0.2" @@ -2815,7 +2897,7 @@ logform@^2.3.2, logform@^2.4.0: safe-stable-stringify "^2.3.1" triple-beam "^1.3.0" -loose-envify@^1.1.0, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -2842,7 +2924,7 @@ lru-cache@^6.0.0: lru_map@^0.3.3: version "0.3.3" resolved "https://registry.yarnpkg.com/lru_map/-/lru_map-0.3.3.tgz#b5c8351b9464cbd750335a79650a0ec0e56118dd" - integrity sha1-tcg1G5Rky9dQM1p5ZQoOwOVhGN0= + integrity sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ== make-dir@^3.0.0: version "3.1.0" @@ -2889,7 +2971,7 @@ minimalistic-crypto-utils@^1.0.1: resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a" integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo= -minimatch@^3.0.4: +minimatch@^3.1.1: version "3.1.2" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b" integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw== @@ -2933,10 +3015,10 @@ node-fetch@^2.6.1: dependencies: whatwg-url "^5.0.0" -node-releases@^2.0.3: - version "2.0.4" - resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.4.tgz#f38252370c43854dc48aa431c766c6c398f40476" - integrity sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ== +node-releases@^2.0.3, node-releases@^2.0.5: + version "2.0.5" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.5.tgz#280ed5bc3eba0d96ce44897d8aee478bfb3d9666" + integrity sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q== normalize-url@^4.1.0: version "4.5.1" @@ -2951,7 +3033,7 @@ object-assign@^4.1.1: once@^1.3.0, once@^1.3.1, once@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" - integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E= + integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w== dependencies: wrappy "1" @@ -2981,7 +3063,7 @@ open@^8.0.9: os-tmpdir@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274" - integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ= + integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g== p-cancelable@^1.0.0: version "1.1.0" @@ -3042,7 +3124,7 @@ parse-json@^5.0.0: parse-passwd@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6" - integrity sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY= + integrity sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q== parseqs@0.0.6: version "0.0.6" @@ -3067,7 +3149,7 @@ path-exists@^4.0.0: path-is-absolute@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" - integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18= + integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg== path-parse@^1.0.7: version "1.0.7" @@ -3082,7 +3164,7 @@ path-type@^4.0.0: path@^0.12.7: version "0.12.7" resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f" - integrity sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8= + integrity sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q== dependencies: process "^0.11.1" util "^0.10.3" @@ -3109,19 +3191,19 @@ postcss@^8.4.13: prepend-http@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897" - integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc= + integrity sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA== prettier@^2.0.5: - version "2.6.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032" - integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew== + version "2.7.0" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.0.tgz#a4fdae07e5596c51c9857ea676cd41a0163879d6" + integrity sha512-nwoX4GMFgxoPC6diHvSwmK/4yU8FFH3V8XWtLQrbj4IBsK2pkYhG4kf/ljF/haaZ/aii+wNJqISrCDPgxGWDVQ== process@^0.11.1: version "0.11.10" resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" - integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI= + integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A== -prop-types@^15.6.2: +prop-types@^15.6.2, prop-types@^15.7.2: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -3178,6 +3260,21 @@ react-is@^17.0.2: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== +react-lifecycles-compat@^3.0.0: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + +react-modal@^3.15.1: + version "3.15.1" + resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.15.1.tgz#950ce67bfef80971182dd0ed38f2d9b1a681288b" + integrity sha512-duB9bxOaYg7Zt6TMFldIFxQRtSP+Dg3F1ZX3FXxSUn+3tZZ/9JCgeAQKDg7rhZSAqopq8TFRw3yIbnx77gyFTw== + dependencies: + exenv "^1.2.0" + prop-types "^15.7.2" + react-lifecycles-compat "^3.0.0" + warning "^4.0.3" + react-refresh@^0.13.0: version "0.13.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.13.0.tgz#cbd01a4482a177a5da8d44c9755ebb1f26d5a1c1" @@ -3253,7 +3350,7 @@ registry-url@^5.0.0: require-directory@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42" - integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I= + integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q== require-main-filename@^2.0.0: version "2.0.0" @@ -3263,7 +3360,7 @@ require-main-filename@^2.0.0: resolve-dir@^1.0.0, resolve-dir@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43" - integrity sha1-eaQGRMNivoLybv/nOcm7U4IEb0M= + integrity sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg== dependencies: expand-tilde "^2.0.0" global-modules "^1.0.0" @@ -3285,7 +3382,7 @@ resolve@^1.12.0, resolve@^1.14.2, resolve@^1.22.0: responselike@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7" - integrity sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec= + integrity sha512-/Fpe5guzJk1gPqdJLJR5u7eG/gNY4nImjbRDaVWVMRhne55TCmj2i9Q+54PBRfatRC8v/rIiv9BN0pMd9OV5EQ== dependencies: lowercase-keys "^1.0.0" @@ -3387,7 +3484,7 @@ semver@^7.3.2: set-blocking@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7" - integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc= + integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw== signal-exit@^3.0.2: version "3.0.7" @@ -3397,7 +3494,7 @@ signal-exit@^3.0.2: simple-swizzle@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" - integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo= + integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg== dependencies: is-arrayish "^0.3.1" @@ -3436,7 +3533,7 @@ source-map@^0.5.7: stack-trace@0.0.x: version "0.0.10" resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0" - integrity sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA= + integrity sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg== string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0: version "4.2.3" @@ -3464,7 +3561,7 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1: strip-json-comments@~2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" - integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo= + integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ== stylis@4.0.13: version "4.0.13" @@ -3508,7 +3605,7 @@ text-hex@1.0.x: through@^2.3.6: version "2.3.8" resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" - integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU= + integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg== tmp@^0.0.33: version "0.0.33" @@ -3520,7 +3617,7 @@ tmp@^0.0.33: to-fast-properties@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" - integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4= + integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog== to-readable-stream@^1.0.0: version "1.0.0" @@ -3628,7 +3725,7 @@ update-notifier@^4.1.0: url-parse-lax@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-3.0.0.tgz#16b5cafc07dbe3676c1b1999177823d6503acb0c" - integrity sha1-FrXK/Afb42dsGxmZF3gj1lA6yww= + integrity sha512-NjFKA0DidqPa5ciFcSrXnAltTtzz84ogy+NebPvfEgAck0+TNg4UJ4IN+fB7zRZfbgUf0syOo9MDxFkDSMuFaQ== dependencies: prepend-http "^2.0.0" @@ -3640,7 +3737,7 @@ use-metamask@^1.3.2: util-deprecate@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" - integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8= + integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw== util@^0.10.3: version "0.10.4" @@ -3676,6 +3773,13 @@ vite@^2.9.5: optionalDependencies: fsevents "~2.3.2" +warning@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" + integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== + dependencies: + loose-envify "^1.0.0" + webidl-conversions@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871" @@ -3692,7 +3796,7 @@ whatwg-url@^5.0.0: which-module@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a" - integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho= + integrity sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q== which@^1.2.14: version "1.3.1" @@ -3759,7 +3863,7 @@ wrap-ansi@^7.0.0: wrappy@1: version "1.0.2" resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" - integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= + integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ== write-file-atomic@^3.0.0: version "3.0.3" @@ -3829,4 +3933,4 @@ yargs@^15.4.1: yeast@0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419" - integrity sha1-AI4G2AlDIMNy28L47XagymyKxBk= + integrity sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg==