Componets optimisation Wave 2

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

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",

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"
 }

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",

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<DefaultRootContainerProps, "hideProps1"|"hideProp2"> {
+//   // 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 <PlasmicRootContainer root={{ ref }} {...props} />;
+}
+
+const RootContainer = React.forwardRef(RootContainer_);
+export default RootContainer;

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<ClaimRewardsModalProps> = ({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<ClaimRewardsModalProps> = ({all, ...props}) => {
         }
     }, [])
 
-    return createPortal(
+    return (
         <div className={container(isMobile)}>
-            <div className={modalContainer}>
+            <div className={modalContainer(isMobile)}>
                 <div className={modalWrapper(isMobile)}>
                     <div className={modal(isMobile, isTablet)}>
                         <div className={modalContent}>
@@ -42,8 +40,9 @@ const ClaimRewardsModal: FC<ClaimRewardsModalProps> = ({all, ...props}) => {
                                 </Text>
                             </span>
                             {!all && (
-                                <div className={vestingAssetCard}>
-                                    <img src={purpleNftIcon} style={{marginRight: '10px', height: '60px'}} alt=""/>
+                                <div className={vestingAssetCard(colors[props.kind].border)}>
+                                    <img src={colors[props.kind].icon} style={{marginRight: '10px', height: '60px'}}
+                                         alt=""/>
                                     <Text>{props.amount} {props.token}</Text>
                                 </div>
                             )}
@@ -57,15 +56,23 @@ const ClaimRewardsModal: FC<ClaimRewardsModalProps> = ({all, ...props}) => {
                                     </Text>}
                                 showUpLabel
                                 color={'whiteStroke'}
+                                value={props.availableForClaim}
+                                onChange={props.onAvailableForClaimChange}
                             />
-                            <Button onClick={() => null} size={'lg'} auto>
-                                <Text weight={'medium'} size={'_14'}>{props.btnClaim}</Text>
-                            </Button>
+                            <Container direction={'horizontal'} gapRow={'_10'}>
+                                <Button colors={'defaultStroke'} onClick={props.onClose} size={'lg'} auto>
+                                    <Text weight={'medium'} size={'_14'}>Close</Text>
+                                </Button>
+                                <Button disabled={props.btnClaimLoad} onClick={props.onClaim} size={'lg'} auto>
+                                    <Text weight={'medium'} size={'_14'}>{props.btnClaim}</Text>
+                                </Button>
+                            </Container>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>, modalsRoot)
+        </div>
+    )
 };
 
 export const ClaimRewardsModalLocalized: FC<ClaimRewardsModalLocalizedProps> = (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',

src/components/molecules/HeaderActions.tsx

@@ -15,15 +15,23 @@ export const HeaderActions: FC<HeaderActionsProps> = (
         onSellWithPremium,
         onBuyNow
     }) => {
-    const isMobile = useMediaQuery(Queries.mobile)
+    const isMobile = useMediaQuery(Queries.mobile);
+    const isTablet = useMediaQuery(Queries.tablet);
+    const isDesktop = (!isMobile && !isTablet)
 
     return (
-        <Container auto={!isMobile} gap={'_15'} direction={isMobile ? undefined : 'horizontal'}>
+        <Container
+            auto={isDesktop}
+            direction={isMobile ? undefined : 'horizontal'}
+            gapRow={isDesktop ? '_10' : undefined}
+            justify={isTablet ? 'start' : undefined}
+            gap={isDesktop ? undefined : '_15'}
+        >
             <Button auto={isMobile} onClick={onSellWithPremium} size={"md"} colors={'defaultStroke'}>
-                <Text title={'_4'}>{btnText}</Text>
+                <Text title={'_4'} noWrap>{btnText}</Text>
             </Button>
             <Button auto={isMobile} onClick={onBuyNow} size={"md"} colors={'gradient'}>
-                <Text title={'_4'}>{btnGradientText}</Text>
+                <Text title={'_4'} noWrap>{btnGradientText}</Text>
             </Button>
         </Container>
     )