@ludo.ninja/components 2.3.68 → 2.3.70

package/build/components/submitNewProjectForm/blockchainSelect/index.d.ts

@@ -6,6 +6,7 @@ interface Props {
     onChangeHandler: (fieldName: keyof ICreationFilterInput & keyof ICollectionFilterInput, fieldValue: string) => Promise<void>;
     name: string;
     isError: boolean;
+    menuPortalTarget?: HTMLElement;
 }
 declare const BlockChainSelect: React.FC<Props>;
 export default BlockChainSelect;

package/build/components/submitNewProjectForm/blockchainSelect/index.js

@@ -9,6 +9,7 @@ const ScreenWidth_1 = require("../../../styles/ScreenWidth");
 const DesktopSelect_1 = __importDefault(require("../../../system/Forms/Selects/DesktopSelect"));
 const core_1 = require("@ludo.ninja/core");
 const data_1 = require("@ludo.ninja/core/build/blockchains/data");
+const vars_1 = require("@ludo.ninja/ui/build/fonts/vars");
 const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
 const typography_1 = require("@ludo.ninja/ui/build/styles/typography");
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
@@ -28,9 +29,10 @@ const StyledSelect = (0, styled_components_1.default)(DesktopSelect_1.default) `
     .react-select__option {
       padding: 0;
       font-weight: 400;
-        &.react-select__option--is-focused{
-            background: ${colors_1.BackgroundColorLight};
-        }
+
+      &.react-select__option--is-focused {
+        background: ${colors_1.BackgroundColorLight};
+      }
     }
   }
 
@@ -122,8 +124,55 @@ const Option = (props) => {
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_select_1.components.Option, { ...props, children: (0, jsx_runtime_1.jsxs)(OptionWrapper, { children: [(0, jsx_runtime_1.jsx)(StyledImg, { width: 20, height: 20, src: props.data.icon, alt: props.label }), props.label] }) }) }));
 };
 const SingleValue = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(react_select_1.components.SingleValue, { ...props, children: (0, jsx_runtime_1.jsxs)(SingleValueWrapper, { children: [(0, jsx_runtime_1.jsx)(StyledImg, { width: 20, height: 20, src: props.data.icon, alt: props.data.label }), children] }) }));
-const BlockChainSelect = ({ isLoading, isError, onChangeHandler, defaultOptionValue, name }) => {
+const BlockChainSelect = ({ menuPortalTarget, isLoading, isError, onChangeHandler, defaultOptionValue, name, }) => {
     const getStaticENVDomain = (0, env_1.useEnvStore)((state) => state.getStaticDomain);
-    return ((0, jsx_runtime_1.jsx)(StyledSelect, { isError: isError, options: getBlockchainOptions(getStaticENVDomain()), isLoading: isLoading, isSearchable: true, onChangeHandler: onChangeHandler, name: name, customComponents: { Option, SingleValue }, defaultOptionValue: defaultOptionValue, placeholder: "Blockchain" }));
+    return ((0, jsx_runtime_1.jsx)(StyledSelect, { isError: isError, options: getBlockchainOptions(getStaticENVDomain()), isLoading: isLoading, isSearchable: true, onChangeHandler: onChangeHandler, name: name, customComponents: { Option, SingleValue }, ...(menuPortalTarget
+            ? {
+                styles: {
+                    menuPortal: (base) => ({
+                        ...base,
+                        zIndex: 999999,
+                        fontFamily: vars_1.dmsansFontVarCss.css,
+                        ".react-select__menu": {
+                            boxShadow: " 0 8px 16px 0 rgba(33, 21, 95, 0.1)",
+                            fontSize: "15px",
+                            fontWeight: "400",
+                            lineHeight: "22px",
+                            color: colors_1.TextGrayColor,
+                            margin: "4px 0",
+                            [ScreenWidth_1.mediaQuery.minWidthFourK]: {
+                                fontSize: `${(0, _4k_1.getAdaptiveValue)({ currentSize: 15, windowWidth: window.innerWidth })}px`,
+                                lineHeight: `${(0, _4k_1.getAdaptiveValue)({ currentSize: 22, windowWidth: window.innerWidth })}px`,
+                                margin: `${(0, _4k_1.getAdaptiveValue)({ currentSize: 4, windowWidth: window.innerWidth })}px 0`,
+                            },
+                        },
+                        ".react-select__menu-list": {
+                            padding: "8px",
+                            [ScreenWidth_1.mediaQuery.minWidthFourK]: {
+                                padding: `${(0, _4k_1.getAdaptiveValue)({ currentSize: 8, windowWidth: window.innerWidth })}px`,
+                            },
+                            ".react-select__option": {
+                                padding: "0",
+                                fontWeight: "400",
+                                "&.react-select__option--is-focused": {
+                                    background: colors_1.BackgroundColorLight,
+                                },
+                            },
+                            ".react-select__option--is-selected": {
+                                backgroundColor: "transparent",
+                                color: colors_1.BlackColor,
+                            },
+                            ".react-select__option--is-focused": {
+                                backgroundColor: "transparent",
+                                color: colors_1.BlackColor,
+                                transition: "font-weight 0.3s ease-in-out",
+                                cursor: "pointer",
+                            },
+                        },
+                    }),
+                },
+                menuPortalTarget: menuPortalTarget,
+            }
+            : {}), defaultOptionValue: defaultOptionValue, placeholder: "Blockchain" }));
 };
 exports.default = BlockChainSelect;

package/build/utils/withTimestampSSR/index.js

@@ -14,8 +14,12 @@ exports.hashString = hashString;
 const withTimestampSSR = (getServerSideProps) => {
     return async (context) => {
         const now = Date.now();
-        const currentUrl = context.resolvedUrl || '/';
-        const hash = (0, exports.hashString)(currentUrl);
+        const req = context.req;
+        const protocol = req.headers['x-forwarded-proto'] || 'http';
+        const host = req.headers.host;
+        const path = context.resolvedUrl;
+        const fullUrl = `${protocol}://${host}${path}`;
+        const hash = (0, exports.hashString)(fullUrl);
         const secondsAgo = (hash % 59) + 2;
         let proposedTimestamp = now - secondsAgo * 1000;
         if (proposedTimestamp <= lastTimestamp) {
@@ -32,7 +36,7 @@ const withTimestampSSR = (getServerSideProps) => {
             minute: '2-digit',
             second: '2-digit',
         });
-        const checksum = (0, exports.hashString)(currentUrl + isoTimestamp);
+        const checksum = (0, exports.hashString)(fullUrl + isoTimestamp);
         if (getServerSideProps) {
             const result = await getServerSideProps(context);
             if ('props' in result) {
@@ -42,7 +46,7 @@ const withTimestampSSR = (getServerSideProps) => {
                         isoTimestamp,
                         displayTimestamp,
                         checksum,
-                        currentUrl,
+                        currentUrl: fullUrl,
                     },
                 };
             }
@@ -53,7 +57,7 @@ const withTimestampSSR = (getServerSideProps) => {
                 isoTimestamp,
                 displayTimestamp,
                 checksum,
-                currentUrl,
+                currentUrl: fullUrl,
             },
         };
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "2.3.68",
+  "version": "2.3.70",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -23,7 +23,7 @@
     "publish": "npm publish --access public -workspace @ludo.ninja/components"
   },
   "dependencies": {
-    "@ludo.ninja/api": "^3.0.91",
+    "@ludo.ninja/api": "^3.2.6",
     "@react-three/drei": "^9.68.3",
     "@react-three/fiber": "^8.13.0",
     "chart.js": "^4.4.3",