+
+
+ );
+};
+
+Footer.defaultProps = {
+ copyrighttext: '© 2023 Casper Dash. All rights reserved.',
+ joincommunitytext: 'Join our community',
+};
+
+export default Footer;
diff --git a/packages/admin/src/components/LayoutHeader/index.tsx b/packages/admin/src/components/LayoutHeader/index.tsx
new file mode 100644
index 00000000..292a0ed7
--- /dev/null
+++ b/packages/admin/src/components/LayoutHeader/index.tsx
@@ -0,0 +1,176 @@
+import React from 'react';
+import { useEffect } from 'react';
+import { useState } from 'react';
+
+import { useDisconnect } from '@casperdash/usewallet';
+import { Img } from '@mlem-admin/components/Img';
+import { Text } from '@mlem-admin/components/Text';
+import { CookieKeys } from '@mlem-admin/enums/cookieKeys.enum';
+import { AdminPaths, PublicPaths } from '@mlem-admin/enums/paths.enum';
+import { useI18nToast } from '@mlem-admin/hooks/useToast';
+import { logout } from '@mlem-admin/services/auth';
+import Cookies from 'js-cookie';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useMutation } from 'react-query';
+
+// error TS2339: Property 'userId' does not exist on type '{}'.
+// Define interface for loggedUser object
+interface LoggedUser {
+ userId: string; // Assuming userId is a string
+ // Add other properties if necessary
+}
+
+const Header = () => {
+ const { toastSuccess } = useI18nToast();
+ const [loggedUser, setLoggedUser] = useState
+
+
+
+
+ 
+
+ {props?.copyrighttext}
+
+
+
+
+
+ {props?.joincommunitytext}
+
+
+ {props?.copyrighttext}
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Dashboard
+
+
+
+
+
+
+
+
+
+
+ logoutMutation.mutate()}
+ >
+ Logout
+
+
+ 
setOpenMobi((prev) => !prev)}
+ />
+
+ setOpenMobi((prev) => !prev)}
+ />
+
+
+
+ router.push(AdminPaths.CREATE_CAMPAIGN_STEP_NFT_COLLECTION)
+ }
+ >
+ Create Campaign
+
+ logoutMutation.mutate()}
+ >
+ Logout
+
+
+ 
+ 
+
+
+ );
+};
+
+export default Header;
diff --git a/packages/admin/src/components/LayoutInfo/index.tsx b/packages/admin/src/components/LayoutInfo/index.tsx
new file mode 100644
index 00000000..d1c6457d
--- /dev/null
+++ b/packages/admin/src/components/LayoutInfo/index.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import { useEffect, useState } from 'react';
+
+import { useAccount } from '@casperdash/usewallet';
+import { Img } from '@mlem-admin/components/Img';
+import { Text } from '@mlem-admin/components/Text';
+import { AdminPaths } from '@mlem-admin/enums/paths.enum';
+import { useGetAccountBalance } from '@mlem-admin/hooks/queries/useGetAccountBalance';
+import { useRouter } from 'next/router';
+
+// error TS2339: Property 'userId' does not exist on type '{}'.
+// Define interface for loggedUser object
+interface LoggedUser {
+ userId: string; // Assuming userId is a string
+ // Add other properties if necessary
+}
+
+const ListLeftInfo = () => {
+ const [loggedUser, setLoggedUser] = useState
+
+
+
+
+ );
+};
+
+export default ListLeftInfo;
diff --git a/packages/admin/src/components/LayoutTab/index.tsx b/packages/admin/src/components/LayoutTab/index.tsx
new file mode 100644
index 00000000..f0a641ae
--- /dev/null
+++ b/packages/admin/src/components/LayoutTab/index.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+
+import { AdminPaths } from '@mlem-admin/enums/paths.enum';
+import { useRouter } from 'next/router';
+
+type TabProps = {
+ activeTab: string;
+};
+
+const TabContentHeader = ({ activeTab }: TabProps) => {
+ // Destructure TabProps
+ const router = useRouter();
+
+ return (
+ <>
+
+ 
+
+
+
+
+
+
+
+ {loggedUser?.userId}
+
+
+ {isLoading ? '...' : balance} CSPR
+
+
+
+ 
setOpenMobi((prev) => !prev)}
+ />
+
+ setOpenMobi((prev) => !prev)}
+ />
+
+
+ router.push(AdminPaths.LIST_CAMPAIGNS)}
+ >
+ Campaigns
+
+ router.push(AdminPaths.LIST_NFT_COLLECTIONS)}
+ >
+ NFT Collections
+
+ router.push(AdminPaths.LIST_BROKERS)}
+ >
+ Brokers
+
+ router.push(AdminPaths.LIST_NFT_MINTS)}
+ >
+ NFTs
+
+ router.push(AdminPaths.LIST_BENEFITS)}
+ >
+ Benefits
+
+ router.push(AdminPaths.LIST_BENEFIT_CATEGORIES)}
+ >
+ Benefit Categories
+
+ router.push(AdminPaths.LIST_CLAIMS)}
+ >
+ Claims
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+TabContentHeader.defaultProps = {};
+
+export default TabContentHeader;
diff --git a/packages/admin/src/components/List/index.tsx b/packages/admin/src/components/List/index.tsx
new file mode 100644
index 00000000..c683bca1
--- /dev/null
+++ b/packages/admin/src/components/List/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export type ListProps = React.DetailedHTMLProps<
+ React.HTMLAttributes
+ {children}
+
+ );
+};
+export { List };
diff --git a/packages/admin/src/components/Text/index.tsx b/packages/admin/src/components/Text/index.tsx
new file mode 100644
index 00000000..d0443628
--- /dev/null
+++ b/packages/admin/src/components/Text/index.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+
+const sizeClasses = {
+ txtLexendRegular14Gray600: 'font-lexend font-normal',
+ txtBasierCircleMedium14: 'font-basiercircle font-medium',
+ txtLexendRegular14Bluegray50: 'font-lexend font-normal',
+ txtLexendSemiBold16: 'font-lexend font-semibold',
+ txtBeVietnamProSemiBold24: 'font-bevietnampro font-semibold',
+ txtLexendBold64: 'font-bold font-lexend',
+ txtLexendSemiBold12: 'font-lexend font-semibold',
+ txtLexendSemiBold14: 'font-lexend font-semibold',
+ txtBeVietnamProSemiBold16: 'font-bevietnampro font-semibold',
+ txtBeVietnamProSemiBold14Deeppurple20001: 'font-bevietnampro font-semibold',
+ txtLexendSemiBold16WhiteA700: 'font-lexend font-semibold',
+ txtLexendSemiBold14Gray300: 'font-lexend font-semibold',
+ txtLexendRegular8: 'font-lexend font-normal',
+ txtBeVietnamProSemiBold16Black90001: 'font-bevietnampro font-semibold',
+ txtLexendRegular14Bluegray100: 'font-lexend font-normal',
+ txtInterSemiBold14: 'font-inter font-semibold',
+ txtBeVietnamProRegular14: 'font-bevietnampro font-normal',
+ txtBeVietnamProSemiBold14: 'font-bevietnampro font-semibold',
+ txtLexendRegular14: 'font-lexend font-normal',
+ txtLexendSemiBold24: 'font-lexend font-semibold',
+ txtBeVietnamProSemiBold16Gray100: 'font-bevietnampro font-semibold',
+ txtBeVietnamProSemiBold14Gray400: 'font-bevietnampro font-semibold',
+ txtInterRegular12: 'font-inter font-normal',
+ txtInterRegular14: 'font-inter font-normal',
+ txtBeVietnamProSemiBold16WhiteA700: 'font-bevietnampro font-semibold',
+} as const;
+
+export type TextProps = Partial<{
+ className: string;
+ size: keyof typeof sizeClasses;
+ as: any;
+}> &
+ React.DetailedHTMLProps<
+ React.HTMLAttributes
+
+
+ );
+};
+
+export default LayoutAdmin;
diff --git a/packages/admin/src/modules/AdmBenefit/components/ItemCreate/DiscountsField.tsx b/packages/admin/src/modules/AdmBenefit/components/ItemCreate/DiscountsField.tsx
new file mode 100644
index 00000000..b43c704f
--- /dev/null
+++ b/packages/admin/src/modules/AdmBenefit/components/ItemCreate/DiscountsField.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { Text } from '@mlem-admin/components/Text';
+import { BeneiftSourceEnum } from '@mlem-admin/modules/AdmBenefit/components/ItemCreate/index';
+import {
+ TextFieldElement,
+ useFormContext,
+ useWatch,
+} from 'react-hook-form-mui';
+
+const DiscountsField = () => {
+ const { control } = useFormContext();
+ const source = useWatch({
+ control,
+ name: 'source',
+ });
+
+ if (source !== BeneiftSourceEnum.WOOCOMMERCE) {
+ return null;
+ }
+
+ return (
+ <>
+
+
+
+
+
+ {children}
+
+
+
+
+ );
+};
+
+export default DiscountsField;
diff --git a/packages/admin/src/modules/AdmBenefit/components/ItemCreate/index.tsx b/packages/admin/src/modules/AdmBenefit/components/ItemCreate/index.tsx
new file mode 100644
index 00000000..bf386587
--- /dev/null
+++ b/packages/admin/src/modules/AdmBenefit/components/ItemCreate/index.tsx
@@ -0,0 +1,218 @@
+import React from 'react';
+import { useState } from 'react';
+
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Img } from '@mlem-admin/components/Img';
+import { Text } from '@mlem-admin/components/Text';
+import { QueryKeys } from '@mlem-admin/enums/queryKeys.enum';
+import { useMutateCreateBenefit } from '@mlem-admin/hooks/mutations';
+import { useGetAdminBenefitCategories } from '@mlem-admin/hooks/queries';
+import { useI18nToast } from '@mlem-admin/hooks/useToast';
+import { Benefit } from '@mlem-admin/types/benefit';
+import { BenefitCategory } from '@mlem-admin/types/benefit-category';
+import { Modal } from 'flowbite-react';
+import {
+ FormContainer,
+ TextFieldElement,
+ SelectElement,
+ useForm,
+} from 'react-hook-form-mui';
+import { useQueryClient } from 'react-query';
+import * as yup from 'yup';
+
+import DiscountsField from './DiscountsField';
+
+export enum BeneiftSourceEnum {
+ WOOCOMMERCE = 'woocommerce',
+ MANUAL = 'manual',
+}
+
+const validationSchema = yup.object({
+ amount: yup
+ .number()
+ .typeError('Total must be number')
+ .min(1)
+ .max(100)
+ .optional(),
+ name: yup.string().required('This field is required'),
+});
+
+const ItemCreate = () => {
+ const [openModal, setOpenModal] = useState(false);
+ const [modalPlacement] = useState('center');
+
+ function openPopup() {
+ setOpenModal(true);
+ }
+
+ const { toastSuccess } = useI18nToast();
+ const { data: { items } = { items: [] } } = useGetAdminBenefitCategories();
+ const formContext = useForm
+
+
+
+ Discounts (%) (*)
+
+
+
+
+
+
+
+
+
+
+
+
+ Name (*)
+
+
+
+
+
+
+ Description
+
+
+
+
+
+
+ Benefit Category
+
+ {
+ return {
+ id: benefitCategory.id,
+ label: benefitCategory.name,
+ };
+ })}
+ />
+
+
+
+
+
+ Source (*)
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AdmList;
diff --git a/packages/admin/src/modules/AdmBenefitCategory/components/ItemCreate/index.tsx b/packages/admin/src/modules/AdmBenefitCategory/components/ItemCreate/index.tsx
new file mode 100644
index 00000000..ae75dee2
--- /dev/null
+++ b/packages/admin/src/modules/AdmBenefitCategory/components/ItemCreate/index.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import { useState } from 'react';
+
+import { Img } from '@mlem-admin/components/Img';
+import { Text } from '@mlem-admin/components/Text';
+import { QueryKeys } from '@mlem-admin/enums/queryKeys.enum';
+import { useMutateCreateBenefitCategory } from '@mlem-admin/hooks/mutations';
+import { useI18nToast } from '@mlem-admin/hooks/useToast';
+import { BenefitCategory } from '@mlem-admin/types/benefit-category';
+import { Modal } from 'flowbite-react';
+import { FormContainer, TextFieldElement } from 'react-hook-form-mui';
+import { useQueryClient } from 'react-query';
+
+const ItemCreate = () => {
+ const [openModal, setOpenModal] = useState(false);
+ const [modalPlacement] = useState('center');
+
+ function openPopup() {
+ setOpenModal(true);
+ }
+
+ const { toastSuccess } = useI18nToast();
+ const queryClient = useQueryClient();
+ const createBenefitMutation = useMutateCreateBenefitCategory({
+ onSuccess: async () => {
+ toastSuccess('item_updated');
+ await queryClient.invalidateQueries({
+ queryKey: [QueryKeys.BENEFIT_CATEGORIES],
+ });
+ setOpenModal(false);
+ },
+ });
+
+ const handleOnSubmitForm = (benefitCategory: BenefitCategory) => {
+ createBenefitMutation.mutate(benefitCategory);
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name (*)
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AdmList;
diff --git a/packages/admin/src/modules/AdmBroker/components/ItemCreate/index.tsx b/packages/admin/src/modules/AdmBroker/components/ItemCreate/index.tsx
new file mode 100644
index 00000000..38c8e731
--- /dev/null
+++ b/packages/admin/src/modules/AdmBroker/components/ItemCreate/index.tsx
@@ -0,0 +1,200 @@
+import React from 'react';
+import { useState } from 'react';
+
+import { useAccount } from '@casperdash/usewallet';
+import { Img } from '@mlem-admin/components/Img';
+import { Text } from '@mlem-admin/components/Text';
+import { QueryKeys } from '@mlem-admin/enums/queryKeys.enum';
+import { useMutateCreateBroker } from '@mlem-admin/hooks/mutations/useMutateCreateBroker';
+import { useGetAccountBalance } from '@mlem-admin/hooks/queries/useGetAccountBalance';
+import { useI18nToast } from '@mlem-admin/hooks/useToast';
+import { CreateBrokerParams } from '@mlem-admin/services/admin/broker/types';
+import { Modal } from 'flowbite-react';
+import { FormContainer, TextFieldElement } from 'react-hook-form-mui';
+import { useQueryClient } from 'react-query';
+
+type FormProps = {
+ onSuccess?: () => void;
+};
+const ESTIMATE_FEE = 110;
+
+const ItemCreate = ({ onSuccess }: FormProps) => {
+ const [openModal, setOpenModal] = useState(false);
+ const [modalPlacement] = useState('center');
+
+ function openPopup() {
+ setOpenModal(true);
+ }
+
+ const { toastSuccess } = useI18nToast();
+ const queryClient = useQueryClient();
+ const createBrokerMutation = useMutateCreateBroker({
+ onSuccess: async () => {
+ toastSuccess('item_updated');
+ await queryClient.invalidateQueries({
+ queryKey: [QueryKeys.BROKERS],
+ });
+ onSuccess?.();
+ },
+ });
+ const { publicKey } = useAccount();
+ const { data: { balance = 0 } = { balance: 0 } } = useGetAccountBalance({
+ publicKey,
+ });
+
+ const handleOnSubmitForm = async (createBrokerParams: CreateBrokerParams) => {
+ createBrokerMutation.mutate({
+ ...createBrokerParams,
+ });
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name (*)
+
+
+
+
+
+
+ Description
+
+
+
+
+
+
+ Max Owned Token (*)
+
+
+
+
+
+
+ Minting Fee (CSPR) (*)
+
+
+
+
+
+
+ Estimated Fee
+
+
+
+
+ {ESTIMATE_FEE} CSPR
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Minting Fee (CSPR) (*)
+
+
+
+
+
+
+ Estimated Fee
+
+
+
+
+ {ESTIMATE_FEE} CSPR
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AdmList;
diff --git a/packages/admin/src/modules/AdmClaim/components/ItemList/ClaimButtonMenu.tsx b/packages/admin/src/modules/AdmClaim/components/ItemList/ClaimButtonMenu.tsx
new file mode 100644
index 00000000..0045e1d2
--- /dev/null
+++ b/packages/admin/src/modules/AdmClaim/components/ItemList/ClaimButtonMenu.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { ClaimStatusEnum } from '@mlem-admin/types/claim';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state';
+import { PopupState as PopupStateProps } from 'material-ui-popup-state/core';
+
+type ClaimButtonMenuProps = {
+ onClick?: (claimStatus: ClaimStatusEnum, popupState: PopupStateProps) => void;
+ defaultValue?: ClaimStatusEnum;
+ popupId?: string;
+};
+
+const ClaimButtonMenu: React.FC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AdmList;
diff --git a/packages/admin/src/modules/AdmDashboard/components/FormNftCollections/index.tsx b/packages/admin/src/modules/AdmDashboard/components/FormNftCollections/index.tsx
new file mode 100644
index 00000000..3e3bb177
--- /dev/null
+++ b/packages/admin/src/modules/AdmDashboard/components/FormNftCollections/index.tsx
@@ -0,0 +1,59 @@
+import { MintingMode } from '@mlem-admin/contracts/cep78';
+import { DeployStatusEnum } from '@mlem-admin/enums';
+import { useGetAllNftCollections } from '@mlem-admin/hooks/queries';
+import { NftCollection } from '@mlem-admin/types/nft-collection';
+import { getMintingModeName } from '@mlem-admin/utils/format';
+import { AutocompleteElement } from 'react-hook-form-mui';
+
+type Props = {
+ name: string;
+ campaignId?: string;
+};
+
+const FormNftCollections = ({ name, campaignId }: Props) => {
+ const {
+ data: { items: nftCollections = [] } = { items: [], total: 0 },
+ isLoading,
+ } = useGetAllNftCollections();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name (*)
+
+
+
+
+
+
+ Short Description
+
+
+
+
+
+
+ Type (*)
+
+
+
+
+
+
+ Thumbnail URL
+
+
+
+
+
+
+ Image URL (*)
+
+
+
+
+
+
+ Start Date (*)
+
+
+
+
+
+
+ End Date (*)
+
+
+
+
+
+
+ NFT Collections (*)
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default StepCampaign;
diff --git a/packages/admin/src/modules/AdmDashboard/components/ItemCreate/StepNftCollection/Create/index.tsx b/packages/admin/src/modules/AdmDashboard/components/ItemCreate/StepNftCollection/Create/index.tsx
new file mode 100644
index 00000000..4355c242
--- /dev/null
+++ b/packages/admin/src/modules/AdmDashboard/components/ItemCreate/StepNftCollection/Create/index.tsx
@@ -0,0 +1,230 @@
+import React from 'react';
+
+import { useAccount } from '@casperdash/usewallet';
+import { Img } from '@mlem-admin/components/Img';
+import { Text } from '@mlem-admin/components/Text';
+import { MintingMode } from '@mlem-admin/contracts/cep78';
+import { ContractType } from '@mlem-admin/enums/contractType.enum';
+import { AdminPaths } from '@mlem-admin/enums/paths.enum';
+import { QueryKeys } from '@mlem-admin/enums/queryKeys.enum';
+import { useMutateCreateNftCollection } from '@mlem-admin/hooks/mutations';
+import { useGetAccountBalance } from '@mlem-admin/hooks/queries/useGetAccountBalance';
+import { useI18nToast } from '@mlem-admin/hooks/useToast';
+import FormBenefits from '@mlem-admin/modules/AdmNftCollection/components/FormBenefits';
+import { CreateNftCollectionParams } from '@mlem-admin/services/admin/nft-collection/types';
+import { useRouter } from 'next/router';
+import {
+ FormContainer,
+ TextFieldElement,
+ SelectElement,
+} from 'react-hook-form-mui';
+import { useQueryClient } from 'react-query';
+
+type FormProps = {
+ onSuccess?: () => void;
+};
+const ESTIMATE_FEE = 300;
+
+const StepNftCollectionCreate = ({ onSuccess }: FormProps) => {
+ const router = useRouter();
+
+ const { toastSuccess } = useI18nToast();
+ const queryClient = useQueryClient();
+ const createNftCollectionMutation = useMutateCreateNftCollection({
+ onSuccess: async () => {
+ toastSuccess('item_updated');
+ await queryClient.invalidateQueries({
+ queryKey: [QueryKeys.NFT_COLLECTIONS],
+ });
+ onSuccess?.();
+
+ router.push(AdminPaths.CREATE_CAMPAIGN);
+ },
+ });
+ const { publicKey } = useAccount();
+ const { data: { balance = 0 } = { balance: 0 } } = useGetAccountBalance({
+ publicKey,
+ });
+
+ const handleOnSubmitForm = async (
+ createNftCollectionParams: CreateNftCollectionParams
+ ) => {
+ createNftCollectionMutation.mutate({
+ ...createNftCollectionParams,
+ });
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name (*)
+
+
+
+
+
+
+ Symbol (*)
+
+
+
+
+
+
+ Minting Mode (*)
+
+
+
+
+
+
+ Total Token Supply (*)
+
+
+
+
+
+
+ Description
+
+
+
+
+
+
+ Contract Type (*)
+
+
+
+
+
+
+ Benefits
+
+
+
+
+
+
+
+
+ Estimated Fee
+
+
+
+
+ {ESTIMATE_FEE} CSPR
+
+
+
+
+
+
+
+
+ );
+};
+
+export default StepNftCollection;
diff --git a/packages/admin/src/modules/AdmDashboard/components/ItemCreate/Steps/index.tsx b/packages/admin/src/modules/AdmDashboard/components/ItemCreate/Steps/index.tsx
new file mode 100644
index 00000000..875adee3
--- /dev/null
+++ b/packages/admin/src/modules/AdmDashboard/components/ItemCreate/Steps/index.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { Text } from '@mlem-admin/components/Text';
+import { AdminPaths } from '@mlem-admin/enums/paths.enum';
+import { useRouter } from 'next/router';
+
+interface CreateItemStepProps {
+ current: number;
+}
+
+const CreateItemStep: React.FC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default CreateItemStep;
diff --git a/packages/admin/src/modules/AdmDashboard/components/ItemList/index.tsx b/packages/admin/src/modules/AdmDashboard/components/ItemList/index.tsx
new file mode 100644
index 00000000..8c2c6f29
--- /dev/null
+++ b/packages/admin/src/modules/AdmDashboard/components/ItemList/index.tsx
@@ -0,0 +1,87 @@
+import { Img } from '@mlem-admin/components/Img';
+import { Text } from '@mlem-admin/components/Text';
+import { useGetAllCampaigns } from '@mlem-admin/hooks/queries';
+import ItemUpdate from '@mlem-admin/modules/AdmDashboard/components/ItemUpdate';
+import { Campaign } from '@mlem-admin/types/campaign';
+
+const ItemList = () => {
+ const { data: { items = [] } = { items: [], total: 0 } } =
+ useGetAllCampaigns();
+
+ return (
+ <>
+ {items.map((item: Campaign) => {
+ return (
+ <>
+
+
+
+
+
+
+ 1
+
+
+
+
+ 2
+
+
+
+
+ router.push(AdminPaths.CREATE_CAMPAIGN_STEP_NFT_COLLECTION)
+ }
+ >
+ Step 1: Configure NFT Collection
+
+ router.push(AdminPaths.CREATE_CAMPAIGN)}
+ >
+ Step 2: Configure Campaign
+
+
+
+
+
+ );
+ })}
+
+ );
+};
+
+export default ItemList;
diff --git a/packages/admin/src/modules/AdmDashboard/components/ItemUpdate/index.tsx b/packages/admin/src/modules/AdmDashboard/components/ItemUpdate/index.tsx
new file mode 100644
index 00000000..49947151
--- /dev/null
+++ b/packages/admin/src/modules/AdmDashboard/components/ItemUpdate/index.tsx
@@ -0,0 +1,235 @@
+import { useState } from 'react';
+
+import { Text } from '@mlem-admin/components/Text';
+import { QueryKeys } from '@mlem-admin/enums/queryKeys.enum';
+import { useMutateUpdateCampaign } from '@mlem-admin/hooks/mutations';
+import { useI18nToast } from '@mlem-admin/hooks/useToast';
+import FormNftCollections from '@mlem-admin/modules/AdmDashboard/components/FormNftCollections';
+import { UpdateCampaignParams } from '@mlem-admin/services/admin/campaign/types';
+import { Campaign } from '@mlem-admin/types/campaign';
+import dayjs from 'dayjs';
+import { Modal } from 'flowbite-react';
+import {
+ DatePickerElement,
+ FormContainer,
+ TextFieldElement,
+ SelectElement,
+} from 'react-hook-form-mui';
+import { BsPencil } from 'react-icons/bs';
+import { useQueryClient } from 'react-query';
+
+type ItemUpdateProps = {
+ item: Campaign;
+};
+
+const ItemUpdate = ({ item }: ItemUpdateProps) => {
+ const [openModal, setOpenModal] = useState(false);
+ const [modalPlacement] = useState('center');
+
+ const queryClient = useQueryClient();
+ const { toastSuccess } = useI18nToast();
+ const updateCampaignMutation = useMutateUpdateCampaign({
+ onSuccess: async () => {
+ toastSuccess('item_updated');
+ await queryClient.invalidateQueries({ queryKey: [QueryKeys.CAMPAIGNS] });
+ setOpenModal(false);
+ },
+ });
+ const handleOnSubmitForm = (updateCampaignParams: UpdateCampaignParams) => {
+ updateCampaignMutation.mutate({
+ ...updateCampaignParams,
+ id: item.id,
+ });
+ };
+
+ return (
+ <>
+
+
+
+ 
+
+
+
+
+
+ {item.id}
+
+
+ {item.name}
+
+
+
+ {item.nftCollections &&
+ item.nftCollections.map((nftCollectionItem) => {
+ return (
+ <>
+
+
+
+ {nftCollectionItem.name}
+
+
+
+ );
+ })}
+
+ {item.benefits &&
+ item.benefits.map((nftBenefit) => {
+ return (
+ <>
+
+
+
+ {nftBenefit.name}
+
+
+
+ );
+ })}
+
+
+
+
+
+
+ Name (*)
+
+
+
+
+
+
+ Short Description
+
+
+
+
+
+
+ Type (*)
+
+
+
+
+
+
+ Thumbnail URL
+
+
+
+
+
+
+ Image URL (*)
+
+
+
+
+
+
+ Start Date (*)
+
+
+
+
+
+
+ End Date (*)
+
+
+
+
+
+
+ NFT Collections (*)
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AdmList;
diff --git a/packages/admin/src/modules/AdmNftCollection/components/FormBenefits/index.tsx b/packages/admin/src/modules/AdmNftCollection/components/FormBenefits/index.tsx
new file mode 100644
index 00000000..a734987b
--- /dev/null
+++ b/packages/admin/src/modules/AdmNftCollection/components/FormBenefits/index.tsx
@@ -0,0 +1,32 @@
+import { useGetBenefits } from '@mlem-admin/hooks/queries';
+import { Benefit } from '@mlem-admin/types/benefit';
+import { AutocompleteElement } from 'react-hook-form-mui';
+
+type Props = {
+ name: string;
+};
+
+const FormBenefits = ({ name }: Props) => {
+ const {
+ data: { items: benefits = [] } = { items: [], total: 0 },
+ isLoading: isLoadingBenefits,
+ } = useGetBenefits();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name (*)
+
+
+
+
+
+
+ Symbol (*)
+
+
+
+
+
+
+ Minting Mode (*)
+
+
+
+
+
+
+ Total Token Supply (*)
+
+
+
+
+
+
+ Description
+
+
+
+
+
+
+ Contract Type (*)
+
+
+
+
+
+
+ Benefits
+
+
+
+
+
+
+
+
+ Estimated Fee
+
+
+
+
+ {ESTIMATE_FEE} CSPR
+
+
+
+
+
+
+
+
+
+ );
+ })}
+
+ );
+};
+
+export default ItemList;
diff --git a/packages/admin/src/modules/AdmNftCollection/components/ItemUpdate/index.tsx b/packages/admin/src/modules/AdmNftCollection/components/ItemUpdate/index.tsx
new file mode 100644
index 00000000..34ca7768
--- /dev/null
+++ b/packages/admin/src/modules/AdmNftCollection/components/ItemUpdate/index.tsx
@@ -0,0 +1,50 @@
+import { useState } from 'react';
+
+import { MintingMode } from '@mlem-admin/contracts/cep78';
+import ItemUpdateBroker from '@mlem-admin/modules/AdmNftCollection/components/ItemUpdateBroker';
+import ItemUpdateInfo from '@mlem-admin/modules/AdmNftCollection/components/ItemUpdateInfo';
+import { NftCollection } from '@mlem-admin/types/nft-collection';
+import Link from 'next/link';
+import { BsPencil } from 'react-icons/bs';
+
+interface ItemUpdateProps {
+ item: NftCollection;
+}
+
+const ItemUpdate = ({ item }: ItemUpdateProps) => {
+ const [open, setOpen] = useState(false);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ {item.id}
+
+
+ {item.name}
+
+
+ {'Deploy Status: ' + item.deployStatus}
+
+
+
+
+ {itemMode}
+
+
+
+ {item.benefits &&
+ item.benefits.map((nftBenefit) => {
+ return (
+ <>
+
+
+
+ {nftBenefit.name}
+
+
+
+ );
+ })}
+
+
+
+ );
+};
+
+export default ItemUpdate;
diff --git a/packages/admin/src/modules/AdmNftCollection/components/ItemUpdateBroker/index.tsx b/packages/admin/src/modules/AdmNftCollection/components/ItemUpdateBroker/index.tsx
new file mode 100644
index 00000000..e6978b30
--- /dev/null
+++ b/packages/admin/src/modules/AdmNftCollection/components/ItemUpdateBroker/index.tsx
@@ -0,0 +1,200 @@
+import { useState } from 'react';
+
+import { Text } from '@mlem-admin/components/Text';
+import { DeployStatusEnum } from '@mlem-admin/enums';
+import { QueryKeys } from '@mlem-admin/enums/queryKeys.enum';
+import { useMutateAssignContractBroker } from '@mlem-admin/hooks/mutations/useMutateAssignContractBroker';
+import { useMutateDeleteBrokerOnNftCollection } from '@mlem-admin/hooks/mutations/useMutateDeleteBrokerOnNftCollection';
+import { useGetBrokers } from '@mlem-admin/hooks/queries/useGetBrokers';
+import { useI18nToast } from '@mlem-admin/hooks/useToast';
+import FormBroker from '@mlem-admin/modules/AdmNftCollection/components/FormBroker';
+import { NftCollection } from '@mlem-admin/types/nft-collection';
+import { Modal } from 'flowbite-react';
+import { FormContainer } from 'react-hook-form-mui';
+import { useQueryClient } from 'react-query';
+
+interface ItemUpdateBrokerProps {
+ item: NftCollection;
+}
+
+const ItemUpdateBroker = ({ item }: ItemUpdateBrokerProps) => {
+ const [openModal, setOpenModal] = useState(false);
+ const [modalPlacement] = useState('center');
+
+ function openPopup() {
+ setOpenModal(true);
+ }
+
+ const queryClient = useQueryClient();
+ const { toastSuccess, toastError } = useI18nToast();
+ const { data: { items: brokers = [] } = { items: [], total: 0 } } =
+ useGetBrokers();
+
+ const deleteBrokerMutation = useMutateDeleteBrokerOnNftCollection({
+ onSuccess: async () => {
+ toastSuccess('item_updated');
+ await queryClient.invalidateQueries({
+ queryKey: [QueryKeys.NFT_COLLECTIONS],
+ });
+ setOpenModal(false);
+ },
+ onError: () => {
+ toastError('item_update_error');
+ },
+ });
+ const assignContractBrokerMutation = useMutateAssignContractBroker({
+ onSuccess: async () => {
+ toastSuccess('item_updated');
+ await queryClient.invalidateQueries({
+ queryKey: [QueryKeys.NFT_COLLECTIONS],
+ });
+ setOpenModal(false);
+ },
+ onError: () => {
+ toastError('item_update_error');
+ },
+ });
+
+ const handleOnSubmitForm = (updateParams: { brokerId: string }) => {
+ const broker = brokers.find(
+ (broker) => broker.id === updateParams.brokerId
+ );
+
+ if (!broker) {
+ if (!item.brokerId) {
+ toastError('item_update_error');
+ return;
+ }
+
+ deleteBrokerMutation.mutate({
+ nftCollectionId: item.id,
+ });
+
+ return;
+ }
+
+ assignContractBrokerMutation.mutate({
+ ...updateParams,
+ nftCollectionId: item.id,
+ brokerContractHash: broker.contractHash,
+ nftContractHash: item.tokenAddress,
+ });
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+ {item.mintingMode == MintingMode.ACL && (
+
+ Integrate With Broker
+
+
+
+
+
+
+
+
+ Broker
+
+
+
+
+
+
+ Status
+
+
+
+
+
+
+ Integrated Status
+
+
+
+ {item.brokerDeployStatus === DeployStatusEnum.PENDING && (
+
+ Pending
+
+ )}
+ {item.brokerDeployStatus === DeployStatusEnum.COMPLETED && (
+
+ Completed
+
+ )}
+
+
+
+
+
+ Estimated Fee
+
+
+
+
+ 5 CSPR
+
+
+
+
+
+
+
+ Update
+
+
+
+
+
+
+
+
+ Name (*)
+
+
+
+
+
+
+ Short Description
+
+
+
+
+
+
+ NFT Image URL
+
+
+
+
+
+
+ Broker
+
+
+
+
+
+
+
+
+ Benefits
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name (*)
+
+
+
+
+
+
+ Slug
+
+
+
+
+
+
+ Description
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name (*)
+
+
+
+
+
+
+ Slug
+
+
+
+
+
+
+ Description
+
+
+
+
+
+
+ Benefits
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AdmManageTiers;
diff --git a/packages/admin/src/modules/AdmNftCollection/index.tsx b/packages/admin/src/modules/AdmNftCollection/index.tsx
new file mode 100644
index 00000000..b6743467
--- /dev/null
+++ b/packages/admin/src/modules/AdmNftCollection/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import LayoutInfo from '@mlem-admin/components/LayoutInfo';
+import LayoutTab from '@mlem-admin/components/LayoutTab';
+import ItemCreate from '@mlem-admin/modules/AdmNftCollection/components/ItemCreate';
+import ItemList from '@mlem-admin/modules/AdmNftCollection/components/ItemList';
+
+const AdmList = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ NFT Collection:
+
+
+ {nftCollectionId}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AdmList;
diff --git a/packages/admin/src/modules/AdmNftMint/components/FormTiers/index.tsx b/packages/admin/src/modules/AdmNftMint/components/FormTiers/index.tsx
new file mode 100644
index 00000000..39c9ee72
--- /dev/null
+++ b/packages/admin/src/modules/AdmNftMint/components/FormTiers/index.tsx
@@ -0,0 +1,35 @@
+import { useGetTiersByNftCollection } from '@mlem-admin/hooks/queries/useGetTiersByNftCollection';
+import { Tier } from '@mlem-admin/types/tier';
+import { AutocompleteElement } from 'react-hook-form-mui';
+
+type Props = {
+ name: string;
+ nftCollectionId?: string;
+};
+
+const FormTiers = ({ name, nftCollectionId }: Props) => {
+ const {
+ data: { items: tiers = [] } = { items: [], total: 0 },
+ isLoading: isLoadingBenefits,
+ } = useGetTiersByNftCollection({
+ nftCollectionId: nftCollectionId,
+ limit: 1000,
+ });
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name (*)
+
+
+
+
+
+
+ NFT Collection (*)
+
+
+
+ {
+ return {
+ id: nftCollection.tokenAddress,
+ label: nftCollection.name,
+ };
+ }
+ )}
+ required
+ />
+
+
+
+
+
+ Image Url (*)
+
+
+
+
+
+
+ Benefits
+
+
+
+ {
+ return {
+ id: item.id,
+ label: item.name,
+ };
+ })}
+ />
+
+
+
+
+
+ Tiers
+
+
+
+
+
+
+
+
+ Estimated Fee
+
+
+
+
+ {ESTIMATE_FEE} CSPR
+
+
+
+
+
+
+ By default, the NFT will have the benefits of the NFT
+ Collection. You can add extra benefits by choosing more from
+ this list.
+
+
+
+
+
+
+
+
+
+ );
+ })}
+
+ );
+};
+
+export default ItemList;
diff --git a/packages/admin/src/modules/AdmNftMint/components/ItemUpdate/index.tsx b/packages/admin/src/modules/AdmNftMint/components/ItemUpdate/index.tsx
new file mode 100644
index 00000000..88fcb349
--- /dev/null
+++ b/packages/admin/src/modules/AdmNftMint/components/ItemUpdate/index.tsx
@@ -0,0 +1,49 @@
+import { useState } from 'react';
+
+import ItemUpdateInfo from '@mlem-admin/modules/AdmNftMint/components/ItemUpdateInfo';
+import { Nft } from '@mlem-admin/types/nft';
+import { generateMetadataUrl } from '@mlem-admin/utils/metadata';
+import Link from 'next/link';
+import { BsPencil } from 'react-icons/bs';
+
+interface ItemUpdateProps {
+ item: Nft;
+}
+
+const ItemUpdate = ({ item }: ItemUpdateProps) => {
+ const [open, setOpen] = useState(false);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ {item.id}
+
+
+ {item.name}
+
+
+ {'Deploy Status: ' + item.deployStatus}
+
+
+
+
+
+ );
+};
+
+export default ItemUpdate;
diff --git a/packages/admin/src/modules/AdmNftMint/components/ItemUpdateInfo/index.tsx b/packages/admin/src/modules/AdmNftMint/components/ItemUpdateInfo/index.tsx
new file mode 100644
index 00000000..346bd384
--- /dev/null
+++ b/packages/admin/src/modules/AdmNftMint/components/ItemUpdateInfo/index.tsx
@@ -0,0 +1,178 @@
+import { useState } from 'react';
+
+import { Text } from '@mlem-admin/components/Text';
+import { QueryKeys } from '@mlem-admin/enums/queryKeys.enum';
+import { useMutateUpdateNft } from '@mlem-admin/hooks/mutations';
+import { useGetBenefits } from '@mlem-admin/hooks/queries';
+import { useI18nToast } from '@mlem-admin/hooks/useToast';
+import FormTiers from '@mlem-admin/modules/AdmNftMint/components/FormTiers';
+import { UpdateNftParams } from '@mlem-admin/services/admin/nft/types';
+import { Benefit } from '@mlem-admin/types/benefit';
+import { Nft } from '@mlem-admin/types/nft';
+import { Modal } from 'flowbite-react';
+import {
+ FormContainer,
+ TextFieldElement,
+ AutocompleteElement,
+} from 'react-hook-form-mui';
+import { useQueryClient } from 'react-query';
+
+interface ItemUpdateInfoProps {
+ item: Nft;
+}
+
+const ItemUpdateInfo = ({ item }: ItemUpdateInfoProps) => {
+ const [openModal, setOpenModal] = useState(false);
+ const [modalPlacement] = useState('center');
+
+ function openPopup() {
+ setOpenModal(true);
+ }
+
+ const { toastSuccess } = useI18nToast();
+ const { data: { items = [] } = { items: [], total: 0 } } = useGetBenefits();
+ const queryClient = useQueryClient();
+ const updateNftMutation = useMutateUpdateNft({
+ onSuccess: async () => {
+ toastSuccess('item_updated');
+ await queryClient.invalidateQueries({ queryKey: [QueryKeys.LIST_NFTS] });
+ setOpenModal(false);
+ },
+ });
+
+ const handleOnSubmitForm = (updateNftParams: UpdateNftParams) => {
+ updateNftMutation.mutate({
+ ...updateNftParams,
+ id: item.id,
+ });
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+ Update
+
+
+
+
+
+
+
+
+ Name (*)
+
+
+
+
+
+
+ Description
+
+
+
+
+
+
+ Benefits
+
+
+
+ {
+ return {
+ id: item.id,
+ label: item.name,
+ };
+ })}
+ />
+
+
+
+
+
+ Tiers
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default AdmList;
diff --git a/packages/admin/src/modules/AdminNft/AdminNftTable/index.tsx b/packages/admin/src/modules/AdminNft/AdminNftTable/index.tsx
index a7d86963..d9ba99cf 100644
--- a/packages/admin/src/modules/AdminNft/AdminNftTable/index.tsx
+++ b/packages/admin/src/modules/AdminNft/AdminNftTable/index.tsx
@@ -4,7 +4,7 @@ import ToastMessage from '@mlem-admin/components/Toast';
import { useGetAdminNfts } from '@mlem-admin/hooks/queries';
import { Nft } from '@mlem-admin/types/nft';
import { generateMetadataUrl } from '@mlem-admin/utils/metadata';
-import { mapDeployStatus } from '@mlem-admin/utils/status';
+// import { mapDeployStatus } from '@mlem-admin/utils/status';
import { Box, Button, Chip } from '@mui/material';
import copy from 'copy-to-clipboard';
import dayjs from 'dayjs';
@@ -73,7 +73,7 @@ const AdminNftTable = () => {
return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
- Welcome to Melem Campaigner Dashboard
-
-
- Connect your wallet to claim the exclusive benefits from Melem
-
-
- To access the Beta Dashboard, please go to the{' '}
-
- Melem Telegram Channel
- {' '}
- and request the beta account
-
-
-
-
+
);
};
diff --git a/packages/admin/src/modules/AdminWelcome/styled.tsx b/packages/admin/src/modules/AdminWelcome/styled.tsx
deleted file mode 100644
index 9cebefac..00000000
--- a/packages/admin/src/modules/AdminWelcome/styled.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { Paper, Box, Container } from '@mui/material';
-import Button from '@mui/material/Button';
-import MenuItem from '@mui/material/MenuItem';
-import { styled } from '@mui/material/styles';
-
-export const StyledWelcomePage = styled(Container)`
- display: flex;
- height: 100vh;
-`;
-
-export const StyledWelcomeBlock = styled(Paper)`
- background-color: ${({ theme }) => theme.palette.primary.dark};
- max-width: 520px;
- margin-left: auto;
- margin-right: auto;
- padding: 24px;
- border-radius: ${(props) => props.theme.spacing(4)};
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-125%, -50%);
- min-width: 460px;
- padding: ${(props) => props.theme.spacing(6)};
- color: ${({ theme }) => {
- const textColor = theme.palette.getContrastText(theme.palette.primary.dark);
- return textColor ?? theme.palette.primary.contrastText;
- }};
-`;
-
-export const StyledBox = styled(Box)`
- flex: 0 0 auto;
- position: relative;
-
- &.left {
- width: 70%;
- height: 100%;
- }
-
- &.right {
- width: 30%;
- }
-`;
-
-export const StyledImageOverlay = styled(Box)`
- background-color: ${({ theme }) => theme.palette.primary.dark};
- position: absolute;
- width: 100%;
- height: 100%;
-`;
-
-// const Keyframes = styled("div")({
-// "@keyframes bgAnimate": {
-// 0% {
-// background-position: 76% 0%;
-// }
-// 50% {
-// background-position:25% 100%;
-// }
-// 100% {
-// background-position:76% 0%
-// }
-// },
-// background: linear-gradient(205deg, #04011c, #7040f2);
-// background-size: 400% 400%;
-
-// -webkit-animation: AnimationName 31s ease infinite;
-// -moz-animation: AnimationName 31s ease infinite;
-// animation: AnimationName 31s ease infinite;
-// }
-// animation: "bgAnimate 1s infinite ease",
-// position: "absolute"
-// });
-
-export const BoxGradientBG = styled('div')`
- @keyframes bgAnimate {
- 0% {
- background-position: 76% 0%;
- }
- 50% {
- background-position:25% 100%;
- }
- 100% {
- background-position:76% 0%
- }
- }
- background: ${() => {
- return `linear-gradient(90deg, #48176C 0%, #070326 100%);`;
- }}
- background-size: 400% 400%;
- height: 100%;
-
- -webkit-animation: bgAnimate 12s ease infinite;
- -moz-animation: bgAnimate 12s ease infinite;
- animation: bgAnimate 12s ease infinite;
- position: absolute;
- width: 100%;
-}`;
-
-export const StyledButton = styled(Button)`
- padding: ${(props) => {
- return `${props.theme.spacing(2)} ${props.theme.spacing(5)}`;
- }};
- font-weight: 500;
- font-size: ${(props) => props.theme.typography.pxToRem(14)};
- border-radius: ${(props) => props.theme.spacing(4)};
- margin-top: ${(props) => props.theme.spacing(3)};
-`;
-
-export const StyledMenuItem = styled(MenuItem)`
- width: 260px;
-
- .icon {
- width: 30px;
- margin-right: ${(props) => props.theme.spacing(1.5)};
- min-width: 30px;
-
- .image--provider {
- max-width: 100%;
- height: auto;
-
- &.casperdash {
- transform: scale(1.35);
- }
-
- &.trust {
- transform: scale(0.95);
- }
- }
- }
-
- .wallet-name {
- padding-top: ${(props) => props.theme.spacing(1.5)};
- padding-bottom: ${(props) => props.theme.spacing(1.5)};
- font-size: ${(props) => props.theme.typography.pxToRem(14)};
- }
-`;
diff --git a/packages/admin/src/modules/Broker/BrokerTable/index.tsx b/packages/admin/src/modules/Broker/BrokerTable/index.tsx
index 64be3c62..fd5ab749 100644
--- a/packages/admin/src/modules/Broker/BrokerTable/index.tsx
+++ b/packages/admin/src/modules/Broker/BrokerTable/index.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
import { useGetBrokers } from '@mlem-admin/hooks/queries/useGetBrokers';
import { Broker } from '@mlem-admin/types/broker';
-import { mapDeployStatus } from '@mlem-admin/utils/status';
+// import { mapDeployStatus } from '@mlem-admin/utils/status';
import { Box, Chip } from '@mui/material';
import dayjs from 'dayjs';
import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
@@ -47,7 +47,7 @@ const BrokerTable = () => {
return (
+
-
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Connect your wallet to claim the exclusive benefits
+ from Melem
+
+ To access the Beta Dashboard, please go to the{' '} + + Melem Telegram Channel + {' '} + and request the beta account +
+
+
+
+ <>
+ Welcome to Melem
+
+ Campaigner Dashboard + +
+
+ + Campaigner Dashboard + +
+ To access the Beta Dashboard, please go to the{' '} + + Melem Telegram Channel + {' '} + and request the beta account +
+
+ connectCasperDashAsync()}
+ className="bg-amber-500 flex flex-1 flex-row gap-3 items-center justify-start p-4 rounded w-full cursor-pointer"
+ >
+
+ Casperdash
+
+
+
+
+ connectCasperWalletAsync()}
+ className="bg-amber-500 flex flex-1 flex-row gap-3 items-center justify-start p-4 rounded w-full cursor-pointer"
+ >
+
+ Casper Wallet
+
+
+
+
+ hello userrrr