@ludo.ninja/components 2.3.54 → 2.3.56

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

@@ -0,0 +1,11 @@
+import { ICollectionFilterInput, ICreationFilterInput } from "@ludo.ninja/api/build/graphql_tools/__generated__/searchHost/schema";
+import React from "react";
+interface Props {
+    defaultOptionValue?: string;
+    isLoading?: boolean;
+    onChangeHandler: (fieldName: keyof ICreationFilterInput & keyof ICollectionFilterInput, fieldValue: string) => Promise<void>;
+    name: string;
+    isError: boolean;
+}
+declare const BlockChainSelect: React.FC<Props>;
+export default BlockChainSelect;

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

@@ -0,0 +1,129 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const env_1 = require("../../../store/env");
+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 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");
+const react_select_1 = require("react-select");
+const styled_components_1 = __importDefault(require("styled-components"));
+const StyledSelect = (0, styled_components_1.default)(DesktopSelect_1.default) `
+  border-radius: 6px;
+  border: 1px solid ${(props) => (props.isError ? colors_1.ErrorColor : colors_1.BorderColorLight)};
+
+  .react-select__value-container {
+    padding-left: 8px;
+  }
+
+  .react-select__menu-list {
+    padding: 8px;
+
+    .react-select__option {
+      padding: 0;
+      font-weight: 400;
+        &.react-select__option--is-focused{
+            background: ${colors_1.BackgroundColorLight};
+        }
+    }
+  }
+
+  .react-select__menu {
+    box-shadow: 0 8px 16px 0 rgba(33, 21, 95, 0.1);
+  }
+
+  .react-select__placeholder {
+    ${typography_1.MainText};
+  }
+
+  .react-select__input-container {
+    ${typography_1.MainText};
+  }
+
+  .react-select__single-value {
+    padding-left: 2px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+
+    .react-select__value-container {
+      padding-left: ${(0, _4k_1.adaptiveValueCalc)(8)};
+    }
+
+    .react-select__menu-list {
+      padding: ${(0, _4k_1.adaptiveValueCalc)(8)};
+    }
+
+    .react-select__single-value {
+      padding-left: ${(0, _4k_1.adaptiveValueCalc)(2)};
+    }
+  }
+`;
+const getBlockchainOptions = (domain) => {
+    const data = [];
+    for (const buildBlockchainsDatum in data_1.blockChainData) {
+        const key = buildBlockchainsDatum;
+        const test = new core_1.BlockChainEntity(key);
+        if (key !== core_1.BlockChainKeys.no_blockchain) {
+            data.push({
+                id: data_1.blockChainData[key].blockchainPrivateLabel,
+                label: data_1.blockChainData[key].blockchainPublicLabel,
+                icon: test.getBlockChainIconRegular({ domain }),
+            });
+        }
+    }
+    return data.sort((a, b) => a.label.localeCompare(b.label));
+};
+const StyledImg = styled_components_1.default.img `
+  border-radius: 50%;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(20)};
+    height: ${(0, _4k_1.adaptiveValueCalc)(20)};
+    margin-right: ${(0, _4k_1.adaptiveValueCalc)(6)};
+  }
+`;
+const OptionWrapper = styled_components_1.default.div `
+  display: flex;
+  padding: 6px 8px;
+  align-items: center;
+  gap: 10px;
+  border-radius: 4px;
+
+  &:hover {
+    background: ${colors_1.BackgroundColorLight};
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding: ${(0, _4k_1.adaptiveValueCalc)(6)} ${(0, _4k_1.adaptiveValueCalc)(8)};
+    gap: ${(0, _4k_1.adaptiveValueCalc)(10)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(4)};
+  }
+`;
+const SingleValueWrapper = styled_components_1.default.div `
+  display: flex;
+  padding: 6px 0;
+  align-items: center;
+  gap: 10px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding: ${(0, _4k_1.adaptiveValueCalc)(6)} 0;
+    gap: ${(0, _4k_1.adaptiveValueCalc)(10)};
+  }
+`;
+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 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" }));
+};
+exports.default = BlockChainSelect;

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

@@ -1,2 +1,5 @@
-declare const SubmitNewProjectForm: () => import("react/jsx-runtime").JSX.Element;
+declare const SubmitNewProjectForm: ({ blockchain, contractAddress }: {
+    blockchain?: string;
+    contractAddress?: string;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SubmitNewProjectForm;

package/build/components/submitNewProjectForm/index.js

@@ -7,11 +7,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const resultSubmitNewProjectModal_1 = __importDefault(require("./resultSubmitNewProjectModal"));
 const ui_1 = require("../../store/ui");
 const Forms_1 = require("../../system/Forms");
-const DesktopSelect_1 = __importDefault(require("../../system/Forms/Selects/DesktopSelect"));
 const api_1 = require("@ludo.ninja/api");
 const schema_1 = require("@ludo.ninja/api/build/graphql_tools/__generated__/opportunitiesHost/schema");
-const blockchains_1 = require("@ludo.ninja/core/build/blockchains");
-const data_1 = require("@ludo.ninja/core/build/blockchains/data");
 const ScreenWidth_1 = require("@ludo.ninja/ui/build/styles/ScreenWidth");
 const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
 const typography_1 = require("@ludo.ninja/ui/build/styles/typography");
@@ -19,21 +16,11 @@ const type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
 const MainButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Buttons/MainButton"));
 const Text_1 = require("@ludo.ninja/ui/build/system/Text");
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const styled_components_1 = __importDefault(require("styled-components"));
-const getBlockchainOptions = () => {
-    const data = [];
-    for (const buildBlockchainsDatum in data_1.blockChainData) {
-        const key = buildBlockchainsDatum;
-        if (key !== blockchains_1.BlockChainKeys.no_blockchain) {
-            data.push({
-                id: data_1.blockChainData[key].blockchainPrivateLabel,
-                label: data_1.blockChainData[key].blockchainPublicLabel,
-            });
-        }
-    }
-    return data;
-};
+const validateTokenAddress_1 = require("../../utils/validateTokenAddress");
+const blockchainSelect_1 = __importDefault(require("./blockchainSelect"));
 const StyledCreateForm = styled_components_1.default.div `
     min-width: 392px;
     margin-top: -18px;
@@ -118,33 +105,19 @@ const StyledCreateForm = styled_components_1.default.div `
         }
     }
 `;
-const StyledSelect = (0, styled_components_1.default)(DesktopSelect_1.default) `
-  border-radius: 6px;
-  border: 1px solid ${(props) => (props.isError ? colors_1.ErrorColor : colors_1.BorderColorLight)};
-  height: 46px;
-
-  .react-select__menu {
-    box-shadow: 0 8px 16px 0 rgba(33, 21, 95, 0.1);
-  }
-
-  .react-select__placeholder {
-    ${typography_1.MainText};
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    height: ${(0, _4k_1.adaptiveValueCalc)(46)};
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
-    border: ${(0, _4k_1.adaptiveValueCalc)(1)} solid #cfd5ea;
-
-    .react-select__menu {
-      box-shadow: 0 ${(0, _4k_1.adaptiveValueCalc)(8)} ${(0, _4k_1.adaptiveValueCalc)(16)} 0 rgba(33, 21, 95, 0.1);
-    }
-  }
-`;
-const SubmitNewProjectForm = () => {
-    const { control, register, handleSubmit, formState: { errors }, setError, } = (0, react_hook_form_1.useForm)({
-        mode: "all",
+const SubmitNewProjectForm = ({ blockchain, contractAddress }) => {
+    const { control, register, handleSubmit, formState: { errors }, setError, setFocus, watch, } = (0, react_hook_form_1.useForm)({
+        mode: 'all',
+        defaultValues: {
+            blockchain: blockchain || '',
+            contract: contractAddress || '',
+        },
     });
+    (0, react_1.useEffect)(() => {
+        setTimeout(() => {
+            setFocus('contract');
+        }, 1);
+    }, [setFocus]);
     const openAlert = (0, ui_1.useUiStore)((state) => state.openAlert);
     const closeModalSidebarPortal = (0, ui_1.useUiStore)((state) => state.closeModalSidebarPortal);
     const openModalSidebarPortal = (0, ui_1.useUiStore)((state) => state.openModalSidebarPortal);
@@ -154,12 +127,15 @@ const SubmitNewProjectForm = () => {
         },
     });
     const dataForContract = {
-        labelText: "Project contract ID",
-        name: "contract",
-        placeHolder: "Project contract ID",
+        labelText: 'Project contract ID',
+        name: 'contract',
+        placeHolder: 'Project contract ID',
     };
-    const registerContract = register("contract", {
-        required: { message: "Project contract ID is required", value: true },
+    const blockchainValue = watch('blockchain');
+    const registerContract = register('contract', {
+        required: { message: 'Project contract ID is required', value: true },
+        validate: (value) => (0, validateTokenAddress_1.validateTokenAddress)(value, blockchainValue),
+        setValueAs: (value) => value.trim(),
     });
     const errorContract = {
         isNeedShowError: Boolean(errors?.contract),
@@ -182,20 +158,20 @@ const SubmitNewProjectForm = () => {
                 openModalSidebarPortal((0, jsx_runtime_1.jsx)(resultSubmitNewProjectModal_1.default, { status: registerNewProject.status, projectInfo: registerNewProject.project }));
             },
             onError: () => {
-                setError("contract", {
-                    type: "custom",
-                    message: "Provided address is not matching the token address",
+                setError('contract', {
+                    type: 'custom',
+                    message: 'Provided address is not matching the token address',
                 });
                 openAlert({
                     type: type_1.alertVariants.error,
-                    caption: "Project can not be registered",
+                    caption: 'Project can not be registered',
                 });
             },
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(StyledCreateForm, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "head", children: [(0, jsx_runtime_1.jsx)("h3", { className: "tittle", children: "Submit New Project" }), (0, jsx_runtime_1.jsx)(Text_1.MainText, { color: colors_1.TextGrayColor, children: "Add your favorite project to follow up it on Ludo" })] }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit(onSubmit), children: [(0, jsx_runtime_1.jsxs)("div", { className: "content", children: [(0, jsx_runtime_1.jsx)("div", { className: "input_group", children: (0, jsx_runtime_1.jsx)(Forms_1.Input, { register: registerContract, error: errorContract, data: dataForContract }) }), (0, jsx_runtime_1.jsx)("div", { className: "input_group", children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "blockchain", control: control, rules: {
-                                        required: { message: "Blockchain is required", value: true },
-                                    }, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledSelect, { isError: Boolean(errors.blockchain), options: getBlockchainOptions(), isLoading: false, onChangeHandler: async (fieldName, fieldValue) => field.onChange(fieldValue), name: field.name, placeholder: "Blockchain" }), errors.blockchain && (0, jsx_runtime_1.jsx)(Forms_1.BasicErrorLabel, { children: errors.blockchain.message })] })) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "btns", children: [(0, jsx_runtime_1.jsx)(MainButton_1.default, { text: "Add", type: "submit", variant: "primaryM", disabled: loading, onClick: () => null }), (0, jsx_runtime_1.jsx)(MainButton_1.default, { text: "Cancel", variant: "outline", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(StyledCreateForm, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'head', children: [(0, jsx_runtime_1.jsx)("h3", { className: 'tittle', children: 'Submit New Project' }), (0, jsx_runtime_1.jsx)(Text_1.MainText, { color: colors_1.TextGrayColor, children: "Add your favorite project to follow up it on Ludo" })] }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit(onSubmit), children: [(0, jsx_runtime_1.jsxs)("div", { className: 'content', children: [(0, jsx_runtime_1.jsx)("div", { className: "input_group", children: (0, jsx_runtime_1.jsx)(Forms_1.Input, { register: registerContract, error: errorContract, data: dataForContract }) }), (0, jsx_runtime_1.jsx)("div", { className: "input_group", children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "blockchain", control: control, rules: {
+                                        required: { message: 'Blockchain is required', value: true },
+                                    }, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(blockchainSelect_1.default, { isError: Boolean(errors.blockchain), isLoading: false, onChangeHandler: async (fieldName, fieldValue) => field.onChange(fieldValue), name: field.name }), errors.blockchain && ((0, jsx_runtime_1.jsx)(Forms_1.BasicErrorLabel, { children: errors.blockchain.message }))] })) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "btns", children: [(0, jsx_runtime_1.jsx)(MainButton_1.default, { text: 'Add', type: 'submit', variant: "primaryM", disabled: loading, onClick: () => null }), (0, jsx_runtime_1.jsx)(MainButton_1.default, { text: 'Cancel', variant: "outline", onClick: () => {
                                     closeModalSidebarPortal();
                                 } })] })] })] }));
 };

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

@@ -15,6 +15,8 @@ const ScreenWidth_1 = require("@ludo.ninja/ui/build/styles/ScreenWidth");
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
 const utils_1 = require("@ludo.ninja/utils");
 const styled_components_1 = __importDefault(require("styled-components"));
+const MainButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Buttons/MainButton"));
+const submitNewProjectForm_1 = __importDefault(require(".."));
 const Wrapper = styled_components_1.default.div `
   width: 290px;
   display: flex;
@@ -79,17 +81,23 @@ const ProjectTitleWrapper = styled_components_1.default.div `
 const ResultSubmitNewProjectModal = ({ status, projectInfo, }) => {
     const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
     const closeModalSidebarPortal = (0, ui_1.useUiStore)((state) => state.closeModalSidebarPortal);
+    const openModalSidebarPortal = (0, ui_1.useUiStore)((state) => state.openModalSidebarPortal);
     const handleProjectClick = () => {
         if (projectInfo?.slug) {
-            window.open(`${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["welcome"]}/x/${projectInfo.slug}`, "_blank");
+            window.open(`${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]['welcome']}/x/${projectInfo.slug}`, '_blank');
             closeModalSidebarPortal();
         }
     };
+    const handleAddNewProjectClick = () => {
+        closeModalSidebarPortal();
+        openModalSidebarPortal((0, jsx_runtime_1.jsx)(submitNewProjectForm_1.default, {}));
+    };
     switch (status) {
         case schema_1.IProjectRegistrationStatus.Submitted:
-            return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(success_svg_1.default, {}), (0, jsx_runtime_1.jsx)(ui_2.H3, { children: "Project submitted successfully and added to the review queue" })] }));
+            return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(success_svg_1.default, {}), (0, jsx_runtime_1.jsx)(ui_2.H3, { children: "Project submitted successfully and added to the review queue" }), (0, jsx_runtime_1.jsx)(MainButton_1.default, { text: 'Add new Project', type: 'submit', variant: "primaryM", onClick: handleAddNewProjectClick })] }));
         case schema_1.IProjectRegistrationStatus.Exists:
-            return ((0, jsx_runtime_1.jsxs)(ProjectExist, { children: [(0, jsx_runtime_1.jsx)(ui_2.H3, { children: "This project already exists in our system" }), Boolean(projectInfo) && ((0, jsx_runtime_1.jsxs)(ProjectTitleWrapper, { onClick: handleProjectClick, children: [(0, jsx_runtime_1.jsxs)("div", { className: "name", children: [(0, jsx_runtime_1.jsx)(ui_2.H1, { color: "#6048FF", children: projectInfo?.name || (0, utils_1.shortenedText)(projectInfo?.contract) }), projectInfo?.verified && (0, jsx_runtime_1.jsx)(badge_svg_1.default, { style: { color: "#43A5FF" } })] }), (0, jsx_runtime_1.jsx)(ui_2.H2, { color: "#696F90", children: projectInfo?.symbol })] }))] }));
+            return ((0, jsx_runtime_1.jsxs)(ProjectExist, { children: [(0, jsx_runtime_1.jsx)(ui_2.H3, { children: "This project already exists in our system" }), Boolean(projectInfo) && ((0, jsx_runtime_1.jsxs)(ProjectTitleWrapper, { onClick: handleProjectClick, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'name', children: [(0, jsx_runtime_1.jsx)(ui_2.H1, { color: '#6048FF', children: projectInfo?.name ||
+                                            (0, utils_1.shortenedText)(projectInfo?.contract) }), projectInfo?.verified && ((0, jsx_runtime_1.jsx)(badge_svg_1.default, { style: { color: '#43A5FF' } }))] }), (0, jsx_runtime_1.jsx)(ui_2.H2, { color: '#696F90', children: projectInfo?.symbol })] }))] }));
     }
 };
 exports.default = ResultSubmitNewProjectModal;

package/build/system/Forms/Selects/DesktopSelect/index.d.ts

@@ -1,12 +1,16 @@
 import { ISelectInput } from '../MobileSelect';
 import { ICollectionFilterInput, ICreationFilterInput } from "@ludo.ninja/api/build/graphql_tools/__generated__/searchHost/schema";
 import React from "react";
+import { GroupBase } from "react-select";
+import { SelectComponents } from "react-select/dist/declarations/src/components";
 interface Props {
     options: ISelectInput[];
     defaultOptionValue?: string;
     isLoading?: boolean;
+    isSearchable?: boolean;
     onChangeHandler: (fieldName: keyof ICreationFilterInput & keyof ICollectionFilterInput, fieldValue: string) => Promise<void>;
     name: string;
+    customComponents?: Partial<SelectComponents<unknown, boolean, GroupBase<unknown>>>;
 }
 declare const DesktopSelect: React.FC<Props>;
 export default DesktopSelect;

package/build/system/Forms/Selects/DesktopSelect/index.js

@@ -149,7 +149,7 @@ const DropdownIndicator = (props) => {
                 transform: props.selectProps.menuIsOpen ? "rotate(180deg)" : "rotate(0)",
             }, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M16 11L12 15L8 11", stroke: "#696F91", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
 };
-const DesktopSelect = ({ options, isLoading, onChangeHandler, defaultOptionValue, name, ...props }) => {
+const DesktopSelect = ({ options, isLoading, onChangeHandler, defaultOptionValue, name, customComponents, isSearchable, ...props }) => {
     const [selectedOption, setSelectedOption] = (0, react_1.useState)(options.find((option) => {
         return defaultOptionValue === option.id;
     }) || null);
@@ -172,9 +172,10 @@ const DesktopSelect = ({ options, isLoading, onChangeHandler, defaultOptionValue
     const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
     if (isLoading)
         return (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { height: `${minHeight}px`, width: "154px" });
-    return ((0, jsx_runtime_1.jsx)(SelectElement, { id: String(Math.random()), minHeight: minHeight, scale: (0, scale_1.getAdaptiveScale)({ windowDimensions, currentSize: 1 }), classNamePrefix: "react-select", name: name, getOptionLabel: (option) => getOptionLabel(option), getOptionValue: (option) => getOptionValue(option), options: options, value: selectedOption, defaultValue: selectedOption, onChange: (option) => handleChangeOption(option), isSearchable: false, components: {
+    return ((0, jsx_runtime_1.jsx)(SelectElement, { id: String(Math.random()), minHeight: minHeight, scale: (0, scale_1.getAdaptiveScale)({ windowDimensions, currentSize: 1 }), classNamePrefix: "react-select", name: name, getOptionLabel: (option) => getOptionLabel(option), getOptionValue: (option) => getOptionValue(option), options: options, value: selectedOption, defaultValue: selectedOption, onChange: (option) => handleChangeOption(option), isSearchable: isSearchable, components: {
             DropdownIndicator,
             IndicatorSeparator: () => null,
+            ...customComponents
         }, ...props }));
 };
 exports.default = DesktopSelect;

package/build/system/Forms/Selects/MobileSelect/index.d.ts

@@ -3,6 +3,7 @@ import { ICollectionFilterInput, ICreationFilterInput } from '@ludo.ninja/api/bu
 export interface ISelectInput {
     id: string;
     label: string;
+    icon?: string;
 }
 interface Props {
     options: ISelectInput[];

package/build/utils/validateTokenAddress/index.d.ts

@@ -0,0 +1,2 @@
+import { BlockChainKeys } from '@ludo.ninja/core/src/blockchains/type';
+export declare const validateTokenAddress: (address: string, blockchain: BlockChainKeys) => true | string;

package/build/utils/validateTokenAddress/index.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateTokenAddress = void 0;
+const validateTokenAddress = (address, blockchain) => {
+    const ethLikeRegex = /^0x[a-fA-F0-9]{40}$/;
+    const base58Regex = /^[1-9A-HJ-NP-Za-km-z]{32,44}$/;
+    const nearRegex = /^[.a-z0-9_-]+\.near$/;
+    const tezosRegex = /^(tz1|tz2|tz3|KT1)[1-9A-HJ-NP-Za-km-z]{33}$/;
+    const flowRegex = /^0x[a-fA-F0-9]{16}$/;
+    const tonRegex = /^[a-fA-F0-9]{64}$/;
+    const waxRegex = /^[a-z1-5.]{12}$/;
+    switch (blockchain) {
+        case 'ethereum':
+        case 'arbitrum':
+        case 'arbitrum-nova':
+        case 'avalanche':
+        case 'base':
+        case 'binance':
+        case 'cronos':
+        case 'immutablex':
+        case 'klaytn':
+        case 'moonbeam':
+        case 'optimism':
+        case 'polygon':
+        case 'polygonzkevm':
+        case 'skale':
+            return ethLikeRegex.test(address) || 'Invalid EVM address';
+        case 'solana':
+            return base58Regex.test(address) || 'Invalid Solana address';
+        case 'elrond':
+            return base58Regex.test(address) || 'Invalid MultiversX address';
+        case 'near':
+            return nearRegex.test(address) || 'Invalid Near address';
+        case 'tezos':
+            return tezosRegex.test(address) || 'Invalid Tezos address';
+        case 'flow':
+            return flowRegex.test(address) || 'Invalid Flow address';
+        case 'ton':
+            return tonRegex.test(address) || 'Invalid TON address';
+        case 'wax':
+            return waxRegex.test(address) || 'Invalid Wax address';
+        default:
+            return true;
+    }
+};
+exports.validateTokenAddress = validateTokenAddress;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "2.3.54",
+  "version": "2.3.56",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",