-
Notifications
You must be signed in to change notification settings - Fork 1
/
flags.json
43 lines (43 loc) · 52.2 KB
/
flags.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
{
"components": {
"client/widget/app.learn-more.page": {
"code": "import React from 'react'\n\nconst LearnMorePage = () => {\n return (\n <div>\n this is learn more\n </div>\n )\n}\n\nexport default LearnMorePage\n"
},
"client/widget/app.campaign.page": {
"code": "'use client';\nimport {useEffect, useState} from \"react\";\nimport { useAppSelector } from \"@/context/store\";\nimport { selectWallet } from \"@/features/walletSlice\";\n\nimport Search from \"@/components/Search\";\n\nimport ImageCard from \"../../components/ImageCard\"\nimport UserCard from \"../../components/UserCard\"\nimport Tab from '../../components/Tabs';\nimport TabContent from '../../components/TabsContent';\n\nimport clsx from 'clsx'\nimport { Play, Amatic_SC } from \"@next/font/google\"\nimport Button from \"../../components/Button\"\nimport Image from \"next/image\"\n\nimport AllMark from \"/public/images/AllMark.svg\"\nimport ActiveMark from \"/public/images/ActiveMark.svg\"\nimport ProgressMark from \"/public/images/ProgressMark.svg\"\nimport CancelMark from \"/public/images/CancelMark.svg\"\n\nimport bg from \"/public/images/img65.png\"\nimport avatar from \"/public/images/Avatar.png\"\n\nimport {BiRocket,BiPlus} from \"react-icons/bi\";\n// import { Wallet } from \"@near-wallet-selector/core\";\n// import { Wallet } from \"@/utils/near-wallet\";\n\n\nconst play = Play({\n subsets: ['latin'],\n weight: ['400', '700']\n})\n\nconst amatic_SC = Amatic_SC({\n subsets: ['latin'],\n weight: ['400', '700']\n})\n\nconst SearchSection = () => {\n\n const [searchValue, setSearchValue] = useState('');\n\n const handleSearch = (value) => {\n // Here, you can access the search value when Enter is pressed\n console.log(value);\n setSearchValue(value);\n };\n\n return (\n <div className=\"flex flex-row justify-between text-black max-w-[1440px] mx-auto lg:w-10/12 mt-40 p-10 border-2 border-grey rounded-xl\">\n <div className=\"flex flex-col justify-center items-start\">\n <h1 className={\"text-2xl tracking-wide font-bold\"}>\n Welcome Báo con\n </h1>\n <p className={\"text-lg tracking-wide\"}>\n Manage your active Campaign from here. \n </p>\n \n </div>\n\n <div className=\"flex items-center w-80\">\n <div className=\"z-10 w-full max-w-md items-center justify-between font-mono text-sm lg:flex-inline\">\n <Search onSearch={handleSearch} />\n {/* <h2 className={'text-2xl mt-20 mx-2 underline'}>Searched for:</h2>\n <p className={'text-2xl m-2'}> {searchValue}</p> */}\n </div>\n </div>\n <div className=\"flex items-center \">\n <Button href={\"/create\"} classes={\"text-white bg-[#174931] rounded-xl\"} content={\"Start Campaign\"} icon={<BiPlus/>}></Button> \n </div>\n </div>\n )\n}\n\nconst CampaignSection = ( { campaignData }) => {\n \n\n const activeCampaignsCount = campaignData ? campaignData.filter(campaign => campaign.status === \"Active\").length : 0;\n const initCampaignsCount = campaignData ? campaignData.filter(campaign => campaign.status === \"Init\").length : 0;\n const doneCampaignsCount = campaignData ? campaignData.filter(campaign => campaign.status === \"Done\").length : 0;\n\n\n return (\n <div className=\"flex flex-col justify-between text-black max-w-[1440px] mx-auto lg:w-10/12 my-8\">\n <div className=\"grid grid-cols-4 gap-8 \">\n <div className=\"flex flex-row bg-[#D7FFDB] rounded-2xl h-24 items-center\">\n <Image\n src={AllMark}\n alt={\"image\"}\n className=\"h-1/2 mx-6\"\n ></Image>\n <div className=\"flex flex-col\">\n <p className=\"text-2xl tracking-wide font-bold\">{campaignData?.length} </p>\n <p className=\"font-light\">All </p>\n </div>\n \n </div>\n \n <div className=\"flex flex-row bg-[#D7FFDB] rounded-2xl h-24 items-center\">\n <Image\n src={ActiveMark}\n alt={\"image\"}\n className=\"h-1/2 mx-6\"\n ></Image>\n <div className=\"flex flex-col\">\n <p className=\"text-2xl tracking-wide font-bold\">{activeCampaignsCount} </p>\n <p className=\"font-light\">Active </p>\n\n </div>\n \n </div>\n\n <div className=\"flex flex-row bg-[#D7FFDB] rounded-2xl h-24 items-center\">\n <Image\n src={ProgressMark}\n alt={\"image\"}\n className=\"h-1/2 mx-6\"\n ></Image>\n <div className=\"flex flex-col\">\n <p className=\"text-2xl tracking-wide font-bold\">{initCampaignsCount} </p>\n <p className=\"font-light\">In Progress</p>\n\n </div>\n \n </div>\n\n <div className=\"flex flex-row bg-[#D7FFDB] rounded-2xl h-24 items-center\">\n <Image\n src={CancelMark}\n alt={\"image\"}\n className=\"h-1/2 mx-6\"\n ></Image>\n <div className=\"flex flex-col\">\n <p className=\"text-2xl tracking-wide font-bold\">{doneCampaignsCount} </p>\n <p className=\"font-light\">Done </p>\n\n </div>\n \n </div>\n </div>\n \n </div>\n )\n}\n\nconst VolunteSection = ({ campaignData }) => {\n\n const activeCampaigns = campaignData ? campaignData.filter(campaign => campaign.status === \"Active\") : [];\n const maxDisplayedCampaigns = 6;\n \n const isValidUrl = (url) => {\n try {\n new URL(url);\n return true;\n } catch (error) {\n return false;\n }\n };\n\n return (\n <div className=\"flex flex-col text-black max-w-[1440px] mx-auto lg:w-10/12 my-8\">\n <div className=\" flex flex-row mb-8\">\n \n <p className=\"text-3xl tracking-wide font-bold text-[#2bd03b]\">\n 3 Active \n </p>\n <p className=\"text-3xl tracking-wide mx-2\">Campaigns</p>\n </div>\n\n <div className=\"grid grid-cols-3 gap-6 justify-between px-16\">\n {activeCampaigns.slice(0, maxDisplayedCampaigns).map(campaign => (\n <div key={campaign.id}>\n <ImageCard\n src={ isValidUrl(campaign.meta_data.image) ? campaign.meta_data.image : bg}\n alt=\"Image 65\"\n title={campaign?.meta_data.title}\n owner = {campaign.owner}\n description={campaign?.meta_data.content}\n linkTo={\"/over-view\"} \n dataToSend={campaign}\n />\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nconst NewsSection = ({ campaignData }) => {\n const initCampaigns = campaignData ? campaignData.filter(campaign => campaign.status === \"Init\") : [];\n const maxDisplayedCampaigns = 6;\n const isValidUrl = (url) => {\n try {\n new URL(url);\n return true;\n } catch (error) {\n return false;\n }\n };\n return (\n <div className=\"flex flex-col text-black max-w-[1440px] mx-auto lg:w-10/12 my-8\">\n \n <div className=\"text-[#2bd03b] mb-8\">\n <p className=\"text-3xl tracking-wide font-semibold\">\n News\n </p>\n </div>\n \n <div className=\"flex flex-row justify-between px-16\">\n {initCampaigns.slice(0, maxDisplayedCampaigns).map(campaign => (\n <div key={campaign.id}>\n <ImageCard\n src={ isValidUrl(campaign.meta_data.image) ? campaign.meta_data.image : bg}\n alt=\"Image 65\"\n title={campaign?.meta_data.title}\n owner = {campaign.owner}\n description={campaign?.meta_data.content}\n linkTo={\"/over-view\"}\n dataToSend={campaign}\n />\n </div>\n ))}\n </div>\n <div className=\"w-full flex justify-center mt-16\">\n <Button href={\"/over-view\"} classes={\"text-white bg-[#174931] rounded-md text-2xl\"} content={\"See More Campaign\"}></Button> \n </div>\n </div>\n \n )\n }\n\n const CollectorSection = ({ campaignData }) => {\n const wallet = useAppSelector(selectWallet);\n const initCampaigns = campaignData ? campaignData.filter(campaign => campaign.status === \"Init\") : [];\n const maxDisplayedCampaigns = 10;\n\n const [userData, setUserData] = useState(null);\n\n const isValidUrl = (url) => {\n try {\n new URL(url);\n return true;\n } catch (error) {\n return false;\n }\n };\n\n const fetchData = async () => {\n try {\n const getUserResponse = await wallet.viewMethod({\n contractId: \"dev-1690642410974-51262377694618\",\n method: \"get_user_by_id\",\n args: { id: wallet.accountId }\n });\n \n setUserData(getUserResponse);\n \n } catch (error) {\n console.error(\"Error fetching data:\");\n }\n };\n \n\n const change_role = async(camp) =>{\n await fetchData();\n\n if(userData?.role!==\"Collector\")\n {\n await wallet.callMethod({contractId:\"dev-1690642410974-51262377694618\", method: \"new_collector\" })\n }\n const deposit = camp?.fund+'00000000000000000000000'\n\n await wallet.callMethod({contractId:\"dev-1690642410974-51262377694618\", method: \"apply_collector_in_camp\",deposit: deposit,args: {camp_id: camp?.id} })\n }\n \n\n return (\n <div className=\"flex flex-col text-black max-w-[1440px] mx-auto lg:w-10/12 my-8\">\n <div className=\"flex flex-col justify-between px-16 space-y-8\">\n {initCampaigns.slice(0, maxDisplayedCampaigns).map(campaign => (\n <div key={campaign.id} className=\"flex flex-row border border-2 rounded-xl border-[#59ec7a]\">\n <div className=\"flex justify-center items-center w-2/5\">\n <Image\n src={ isValidUrl(campaign.meta_data.image) ? campaign.meta_data.image : bg}\n alt={\"image\"}\n className=\"w-1/2 h-1/2 rounded-full\"\n width={400} \n height={200}\n >\n </Image>\n </div>\n \n <div className=\"flex flex-col w-2/5\">\n <p className=\"text-2xl\">{campaign?.meta_data.title}</p>\n <p className=\"text-lg\">Pool: {campaign?.fund}</p>\n </div>\n <div className=\"flex w-1/5 justify-center items-center\">\n {/* <Button href={\"/\"} classes={\"text-white bg-[#174931] rounded-md text-2xl\"} content={\"Aply collector\"}></Button> */}\n <button \n onClick={() =>{ change_role(campaign)}}\n >\n Apply collector\n </button>\n </div>\n \n </div>\n ))}\n </div>\n \n </div>\n \n )\n }\n\n const TableSection = () => {\n return (\n <div className=\"flex flex-col text-black max-w-[1440px] mx-auto lg:w-10/12 my-8\">\n <div >\n <p className=\"text-3xl tracking-wide font-bold\">\n Recycle\n </p>\n </div>\n <table className=\"table-auto w-full text-left text-xl \">\n <thead>\n <tr>\n <th className=\" \">No</th>\n <th className=\" \">Item List</th>\n <th className=\" \">Open Price</th>\n <th className=\" \">Your Offer</th>\n <th className=\" \">Recent Offer</th>\n <th className=\" \">Time left</th>\n </tr>\n </thead>\n <tbody>\n <tr >\n <td>1</td>\n <td className=\" \"> \n <div className=\"flex flex-row\">\n <Image\n src={bg}\n alt={\"image\"}\n className=\"rounded-full h-8 w-14\"\n ></Image>\n Item List\n </div>\n </td>\n <td className=\" \">Item List</td>\n <td className=\" \">Item List</td>\n <td className=\" \">Item List</td>\n <td className=\" \">Item List</td>\n </tr>\n <tr >\n <td>2</td>\n <td className=\" \"> \n <div className=\"flex flex-row\">\n <Image\n src={bg}\n alt={\"image\"}\n className=\"rounded-full h-8 w-14\"\n ></Image>\n Item List\n </div>\n </td>\n <td className=\" \">Item List</td>\n <td className=\" \">Item List</td>\n <td className=\" \">Item List</td>\n <td className=\" \">Item List</td>\n </tr>\n <tr >\n <td>3</td>\n <td className=\" \"> \n <div className=\"flex flex-row\">\n <Image\n src={bg}\n alt={\"image\"}\n className=\"rounded-full h-8 w-14\"\n ></Image>\n Item List\n </div>\n </td>\n <td className=\" \">Item List</td>\n <td className=\" \">Item List</td>\n <td className=\" \">Item List</td>\n <td className=\" \">Item List</td>\n </tr>\n </tbody>\n </table>\n \n </div>\n \n )\n }\n\n const TopSection = () => {\n return (\n <div className=\"flex flex-col text-black max-w-[1440px] mx-auto lg:w-10/12 my-8\">\n <div className=\"flex flex-row\">\n <div className=\"text-[#0b3d16] whitespace-nowrap\">\n <p className=\"text-4xl tracking-wide font-bold my-4\">\n Top Collector\n </p>\n <p className=\"text-2xl tracking-wide\">\n Checkout Our Top Rated Collector\n </p>\n </div>\n <div className=\"w-full h-1/2 flex justify-end mt-auto\">\n <Button href={\"/\"} classes={\"text-black bg-white rounded-2xl text-xl border border-2 border-black\"} content={\"View Rankings\"} icon={<BiRocket/>}></Button> \n </div>\n </div>\n \n \n <div className=\"grid grid-cols-4 gap-8 mx-28 my-8\">\n <div>\n <UserCard\n src={avatar} alt=\"Image 65\" title={\"@better step\"} \n description={\"34.53 ETH\"} />\n </div>\n <div>\n <UserCard\n src={avatar} alt=\"Image 65\" title={\"@better step\"} \n description={\"34.53 ETH\"} />\n </div>\n <div>\n <UserCard\n src={avatar} alt=\"Image 65\" title={\"@better step\"} \n description={\"34.53 ETH\"} />\n </div>\n <div>\n <UserCard\n src={avatar} alt=\"Image 65\" title={\"@better step\"} \n description={\"34.53 ETH\"} />\n </div>\n <div>\n <UserCard\n src={avatar} alt=\"Image 65\" title={\"@better step\"} \n description={\"34.53 ETH\"} />\n </div>\n <div>\n <UserCard\n src={avatar} alt=\"Image 65\" title={\"@better step\"} \n description={\"34.53 ETH\"} />\n </div>\n <div>\n <UserCard\n src={avatar} alt=\"Image 65\" title={\"@better step\"} \n description={\"34.53 ETH\"} />\n </div>\n <div>\n <UserCard\n src={avatar} alt=\"Image 65\" title={\"@better step\"} \n description={\"34.53 ETH\"} />\n </div>\n </div>\n </div>\n \n )\n }\n\nexport default function Home() {\n const wallet = useAppSelector(selectWallet);\n const [campaignData, setCampaignData] = useState(null);\n\n useEffect(() => {\n const savedData = localStorage.getItem(\"campaignData\");\n if (savedData) {\n setCampaignData(JSON.parse(savedData));\n } else {\n get_campaigns();\n }\n }, []);\n \n\n const get_campaigns = async () => {\n const data = await wallet?.viewMethod({\n contractId: \"dev-1690642410974-51262377694618\",\n method: \"get_all_campaigns\"\n });\n localStorage.setItem(\"campaignData\", JSON.stringify(data));\n setCampaignData(data);\n };\n\n const [activeTab, setActiveTab] = useState('User');\n const change =()=>{\n const savedData = localStorage.getItem(\"userData\");\n\n if(savedData?.role!==\"Collector\")\n {\n wallet.callMethod({contractId:\"dev-1690642410974-51262377694618\", method: \"new_collector\" })\n }\n }\n\n const handleTabClick = (tabLabel) => {\n \n setActiveTab(tabLabel);\n\n };\n\n return (\n <main>\n <div className={clsx(\"flex flex-col\", play.className)}>\n <SearchSection/>\n <CampaignSection campaignData={campaignData}/>\n <div className=\"flex space-x-4 ml-36\">\n <Tab label=\"User\" activeTab={activeTab} onClick={handleTabClick} />\n <Tab label=\"Collector\" activeTab={activeTab} onClick= {() => {\n handleTabClick();\n change(); // Execute function2 when the button is clicked\n }}/>\n </div>\n <div>\n <TabContent label=\"User\" activeTab={activeTab}>\n {/* User Section */}\n <VolunteSection campaignData={campaignData}/>\n <NewsSection campaignData={campaignData}/>\n </TabContent>\n <TabContent label=\"Collector\" activeTab={activeTab}>\n {/* Collector Section */}\n <CollectorSection campaignData={campaignData}/>\n </TabContent> \n </div>\n \n \n \n <TableSection/> \n <TopSection/>\n\n </div>\n </main>\n );\n}\n"
},
"client/widget/app.ConnectButton": {
"code": "\"use client\";\n\nimport { memo, useEffect, useRef,useState } from \"react\";\nimport { useAppSelector } from \"@/context/store\";\nimport { selectWallet } from \"@/features/walletSlice\";\nimport { Wallet } from \"@near-wallet-selector/core\";\nimport Popup from \"../components/PopUp\";\nimport Button from \"../components/Button\"\n\nimport { date } from \"yup\";\n\nfunction ConnectWalletButton() {\n const wallet = useAppSelector(selectWallet);\n const [isPopupOpen, setIsPopupOpen] = useState(false);\n const [userData, setUserData] = useState(null);\n \n const handleOpenPopup = () => {\n setIsPopupOpen(true);\n };\n\n const handleClosePopup = () => {\n setIsPopupOpen(false);\n };\n\n const onConnectWalletClicked = async () => {\n if (!wallet)\n return {\n title: \"Wallet not initialized\",\n description: \"Please try again later\",\n status: \"error\",\n };\n\n if (wallet.accountId) {\n return {\n title: \"Wallet already connected\",\n status: \"info\",\n };\n }\n\n wallet.signIn();\n };\n\n const signOutClick = async () => {\n if (!wallet)\n return {\n title: \"Wallet not initialized\",\n description: \"Please try again later\",\n status: \"error\",\n };\n\n wallet.signOut();\n };\n\n const isWalletConnected = !!wallet?.accountId;\n \n // if (isWalletConnected){\n // wallet.viewMethod({contractId:\"dev-1690642410974-51262377694618\", method: \"check_new_user\", })\n // }\n\n if (isWalletConnected){\n wallet.viewMethod({contractId:\"dev-1690642410974-51262377694618\", method: \"check_new_user\",args: {id: wallet.accountId} })\n .then((data)=>{\n if(!data)\n {\n wallet.callMethod({contractId:\"dev-1690642410974-51262377694618\",method:\"new_user\" })\n }\n })\n wallet.viewMethod({contractId:\"dev-1690642410974-51262377694618\", method: \"get_user_by_id\",args: {id: wallet.accountId} })\n .then((data)=>{console.log(data)})\n\n }\n\n const update_user_info = async () => {\n if(wallet)\n {\n wallet.callMethod({contractId:\"dev-1690642410974-51262377694618\", method: \"update_user\",args: {name: \"helo\", email_address: \"[email protected]\", image: \"aaaaa\" } })\n .then((data)=>{console.log(data)})\n }\n\n };\n\n useEffect(() => {\n if (isWalletConnected) {\n fetchData();\n }\n }, [isWalletConnected]);\n\n const fetchData = async () => {\n try {\n const checkNewUserResponse = await wallet.viewMethod({\n contractId: \"dev-1690642410974-51262377694618\",\n method: \"check_new_user\",\n args: { id: wallet.accountId }\n });\n\n if (!checkNewUserResponse) {\n await wallet.callMethod({\n contractId: \"dev-1690642410974-51262377694618\",\n method: \"new_user\"\n });\n }\n\n const getUserResponse = await wallet.viewMethod({\n contractId: \"dev-1690642410974-51262377694618\",\n method: \"get_user_by_id\",\n args: { id: wallet.accountId }\n });\n\n setUserData(getUserResponse);\n } catch (error) {\n console.error(\"Error fetching data:\", error);\n }\n };\n\n return isWalletConnected ? (\n <>\n {/* <Button href={\"/profile\"} classes={\"border border-gray-600 px-4 py-2 rounded-md text-gray-600 hover:bg-gray-300 hover:border-b-4 hover:border-r-4 transition-all duration-100 font-medium ease-in-out\"} content={wallet.accountId?.split(\".\")[0]}></Button> */}\n <button\n onClick={handleOpenPopup}\n className=\"border border-gray-600 px-4 py-2 rounded-md text-gray-600 hover:bg-gray-300 hover:border-b-4 hover:border-r-4 transition-all duration-100 font-medium ease-in-out\"\n >\n {wallet.accountId?.split(\".\")[0]}\n </button>\n <Popup isOpen={isPopupOpen} onClose={handleClosePopup} signOut={signOutClick} update={update_user_info} userData={userData}/>\n\n </>\n ) : (\n <button\n onClick={onConnectWalletClicked}\n className=\"border border-gray-600 px-4 py-2 rounded-md text-gray-600 hover:bg-gray-300 hover:border-b-4 hover:border-r-4 transition-all duration-100 font-medium ease-in-out\"\n >\n Connect\n </button>\n );\n}\n\nexport default ConnectWalletButton;\n"
},
"client/widget/app.profile.page": {
"code": "import { useAppSelector } from \"@/context/store\";\nimport { selectWallet } from \"@/features/walletSlice\";\nimport { Wallet } from \"@near-wallet-selector/core\";\n\nimport Search from \"@/components/Search\";\n\nimport ImageCard from \"../../components/ImageCard\"\nimport UserCard from \"../../components/UserCard\"\n\n\nimport clsx from 'clsx'\nimport { Play, Amatic_SC } from \"@next/font/google\"\nimport Button from \"../../components/Button\"\nimport Image from \"next/image\"\n\nimport AllMark from \"/public/images/AllMark.png\"\nimport ActiveMark from \"/public/images/ActiveMark.png\"\nimport ProgressMark from \"/public/images/ProgressMark.png\"\nimport CancelMark from \"/public/images/CancelMark.png\"\n\nimport bg from \"/public/images/img65.png\"\nimport avatar from \"/public/images/Avatar.png\"\n\nimport {BiRocket,BiPlus} from \"react-icons/bi\";\n\n\nconst play = Play({\n subsets: ['latin'],\n weight: ['400', '700']\n})\n\nconst amatic_SC = Amatic_SC({\n subsets: ['latin'],\n weight: ['400', '700']\n})\n\nconst ProfileSection = (userData) => {\n\n return (\n <div className=\"flex flex-row justify-between text-black max-w-[1440px] mx-auto lg:w-10/12 mt-40 p-10 border border-2 border-grey rounded-xl\">\n <div className=\"popup-content flex-col min-w-[1000px] min-h-[600px] flex \">\n <div className=\"flex flex-row justify-between pb-8\">\n <p className=\"text-black text-4xl font-normal\">\n Your Profile\n </p>\n {/* <button className=\"text-red-500\" onClick={onClose}>x</button> */}\n </div>\n \n <div className='flex flex-row justify-center items-center'>\n <div className=\"w-1/3 flex justify-center\">\n <Image\n className=\" object-cover rounded-full w-28 h-28 border border-2 border-[#59EC7A] shadow-xl\"\n src={avatar}\n alt=\"form-learn\"\n />\n </div>\n \n <div className='flex flex-col font-light text-black tracking-wide w-2/3'>\n <p className=\"text-4xl\">\n Name: {userData?.meta_data.name}\n </p>\n <p>\n Acount id: {userData?.id}\n </p>\n\n <label\n htmlFor=\"name\"\n className={'block font-latoBold'}>\n Email\n </label>\n <input\n type=\"email\"\n value={newEmail}\n placeholder= {userData?.meta_data.email_address}\n onChange={handleEmailChange}\n className=\"border-none border-gray-300 rounded-lg\"\n />\n \n <p>\n Role: {userData?.role}\n </p>\n <p>\n Token amount: {userData?.meta_data.balance}\n </p>\n </div>\n </div>\n\n \n <button className=\"text-green-400 rounded-lg mt-10 font-light border border-2 border-green-400\" onClick={update}>Edit</button>\n\n <button className=\"text-green-400 rounded-lg mt-10 font-light border border-2 border-green-400\" onClick={update}>Update</button>\n <button className=\"text-red-500 rounded-lg mt-10 font-light\" onClick={signOut}>Sign Out</button>\n \n </div>\n\n \n </div>\n )\n}\n\n\n\nexport default function Home() {\n return (\n <main>\n <div className={clsx(\"flex flex-col\", play.className)}>\n <ProfileSection/>\n </div>\n </main>\n );\n}\n"
},
"client/widget/app.over-view.page": {
"code": "\"use client\";\nimport clsx from \"clsx\";\nimport { Play, Amatic_SC } from \"@next/font/google\";\nimport { redirect, useSearchParams } from \"next/navigation\";\nimport { useAppSelector } from \"@/context/store\";\nimport { selectWallet } from \"@/features/walletSlice\";\nimport { useEffect, useState } from \"react\";\nimport { useRouter } from \"next/navigation\";\n\nimport ProgressBar from \"../../components/ProgressBar\";\nimport Image from \"next/image\";\nimport globe from \"/public/images/Globe.svg\";\nimport coin from \"/public/images/coin.svg\";\nimport pj_title from \"/public/images/pj_title.png\";\nimport { BiSolidStar, BiMap } from \"react-icons/bi\";\nimport Popup2 from \"@/components/Popup2\";\nimport recycleImg from \"/public/images/recycle.png\"\nimport { FaCheck, FaTimes } from \"react-icons/fa\";\n\nconst play = Play({\n subsets: [\"latin\"],\n weight: [\"400\", \"700\"],\n});\n\nconst amatic_SC = Amatic_SC({\n subsets: [\"latin\"],\n weight: [\"400\", \"700\"],\n});\n\nconst IntroSection = ({ parsedData, setOpenForm }) => {\n const dateObject = new Date(parsedData.deadline);\n const startDateObject = new Date(parsedData.init_time);\n const wallet = useAppSelector(selectWallet);\n const router = useRouter();\n\n useEffect(() => {\n const urlParams = new URLSearchParams(window.location.search);\n const txhash = urlParams.get(\"transactionHashes\");\n\n if (txhash) {\n if (parsedData.status == \"Active\") {\n parsedData.status = \"Done\";\n router.replace(\"/over-view?data=\" + JSON.stringify(parsedData));\n }\n\n if (parsedData.status == \"Init\") {\n parsedData.status = \"Active\";\n router.replace(\"/over-view?data=\" + JSON.stringify(parsedData));\n }\n }\n }, []);\n\n const getDayWithOrdinalSuffix = (day) => {\n const suffixes = [\"st\", \"nd\", \"rd\"];\n const specialCases = [11, 12, 13]; // 11th, 12th, 13th are exceptions\n\n const digit = day % 10;\n const suffix = suffixes[digit - 1] || \"th\";\n\n if (specialCases.includes(day)) {\n return day + \"th\";\n }\n\n return day + suffix;\n };\n\n const monthNames = [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n ];\n\n const getDaysLeft = (startDate, endDate) => {\n // Parse the date strings to Date objects\n const start = new Date(startDate);\n const end = new Date(endDate);\n\n // Calculate the difference between the dates in milliseconds\n const difference = end.getTime() - start.getTime();\n\n // Convert the difference to days\n const daysLeft = Math.ceil(difference / (1000 * 60 * 60 * 24));\n\n return daysLeft;\n };\n\n // Get the day (1-31)\n const day = dateObject.getDate();\n\n // Get the month (0-11). Note: January is 0, February is 1, and so on.\n const monthIndex = dateObject.getMonth();\n const monthName = monthNames[monthIndex];\n // Get the year (4 digits)\n const year = dateObject.getFullYear();\n\n const updateStatus = async () => {\n await wallet.callMethod({\n contractId: \"dev-1690642410974-51262377694618\",\n method: \"set_camp_status\",\n args: { status: \"Active\", camp_id: parsedData?.id },\n });\n };\n\n const isValidUrl = (url) => {\n try {\n new URL(url);\n return true;\n } catch (error) {\n return false;\n }\n };\n\n return (\n <div className=\"flex flex-col\">\n <div className=\"flex flex-col text-black max-w-[1440px] mx-auto lg:w-10/12 mt-40 p-12 shadow-xl rounded-xl\">\n <div className=\"flex flex-row justify-between\">\n <div className=\" flex flex-col \">\n <h1\n className={clsx(\n \"text-6xl tracking-wide font-bold\",\n amatic_SC.className\n )}\n >\n {parsedData?.meta_data.title}\n </h1>\n <p\n className={clsx(\n \"text-2xl tracking-wide my-2\",\n amatic_SC.className\n )}\n >\n {parsedData?.owner}\n </p>\n </div>\n <div>\n <Image\n src={globe}\n alt={\"globe\"}\n layout=\"responsive\"\n className=\"h-1/2\"\n ></Image>\n </div>\n </div>\n\n <div className=\"flex flex-row justify-center items-start gap-y-8\">\n <div className=\"grid grid-cols-3 gap-3 w-1/2\">\n <Image\n src={\n isValidUrl(parsedData.meta_data.image)\n ? parsedData.meta_data.image\n : pj_title\n }\n alt={\"image\"}\n width={400}\n height={400}\n layout=\"responsive\"\n // objectFit='contain'\n className=\"w-1/3 h-1/2\"\n ></Image>\n </div>\n <div className=\"flex flex-col w-1/2 ml-20\">\n <h1\n className={clsx(\n \"text-6xl tracking-wide font-bold text-[#73d88b]\",\n amatic_SC.className\n )}\n >\n Date: {monthName} {getDayWithOrdinalSuffix(day)} {year}\n </h1>\n <p className=\"text-2xl tracking-wide \">\n {getDaysLeft(startDateObject, dateObject)} day left\n </p>\n <div className=\"flex space-x-3\">\n <p className=\"\">Status: {parsedData?.status}</p>\n {wallet?.accountId === parsedData?.owner &&\n (parsedData?.status == \"Init\" ||\n parsedData?.status == \"Active\") && (\n <button\n onClick={updateStatus}\n className=\"border-2 bg-[#FFE500] border-black rounded-lg px-3\"\n >\n Update\n </button>\n )}\n </div>\n <div className=\"flex flex-row\">\n <Image src={coin} alt={\"coin\"}></Image>\n <p className=\"text-2xl tracking-wide\">{parsedData?.fund}</p>\n </div>\n\n <div className=\"pt-8\">\n <div className=\"flex flex-row justify-between\">\n <p>Goal</p>\n <p>\n {parsedData?.total_products}/\n {parsedData?.total_products_expected}\n </p>\n </div>\n <ProgressBar\n value={parsedData?.total_products}\n max={parsedData?.total_products_expected}\n />\n <div className=\"flex flex-row justify-around pt-8\">\n {/* <Button href={\"/\"} classes={\"text-white\"} content={<Image src={buttonDonate} alt=\"buttonApply\"/>}></Button> */}\n\n <button\n type=\"button\"\n onClick={() => {\n setOpenForm(true);\n }}\n className={\n \"text-black rounded-lg px-5 py-2 bg-[#FFE500] border-2 border-black\"\n }\n >\n Add Product\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nconst DesciptionSection = ({ parsedData }) => {\n return (\n <div className=\"flex flex-col text-black max-w-[1440px] mx-auto lg:w-10/12 mt-8 p-8 \">\n <div className=\" flex flex-row justify-between\">\n <div>\n <h1 className={\"text-4xl tracking-wide mb-8\"}>\n <BiMap className=\"text-[#73d88b] text-6xl\" />\n District 7, HoChiMinh City\n </h1>\n </div>\n\n <div className=\"flex flex-col \">\n <div className=\"flex flex-row\">\n <BiSolidStar size={24} className=\"text-yellow-500\" />\n <BiSolidStar size={24} className=\"text-yellow-500\" />\n <BiSolidStar size={24} className=\"text-yellow-500\" />\n <BiSolidStar size={24} className=\"text-yellow-500\" />\n <BiSolidStar size={24} className=\"text-yellow-500\" />\n </div>\n <div>\n <p className=\"text-xl\">10 reviews</p>\n </div>\n </div>\n </div>\n <div>\n <p className=\"text-justify\">{parsedData?.meta_data.content}</p>\n </div>\n </div>\n );\n};\n\nconst ValidatorSection = ({ data, wallet, userData }) => {\n\n const handleClick = async (target, id, camp_id) => {\n // console.log(target);\n\n let type = null\n while(type === null){\n target = target.parentElement\n type = target.getAttribute('data-type')\n }\n\n if(type === \"cancel\"){\n await wallet.callMethod({contractId: \"dev-1690642410974-51262377694618\", method: \"set_state_product\", args: {id, camp_id, is_valid: false}})\n }\n\n if(type === \"accept\"){\n await wallet.callMethod({contractId: \"dev-1690642410974-51262377694618\", method: \"set_state_product\", args: {id, camp_id, is_valid: true}})\n }\n }\n\n return (\n <div className=\"flex flex-col text-black max-w-[1440px] mx-auto lg:w-10/12 mt-8 p-8\">\n <h1 className=\"text-5xl font-bold\">Validation</h1>\n <div className=\"p-5 mt-10 grid grid-cols-4 gap-4\">\n {data?.products.map((product, index) => {\n return (\n <div key={index} className=\"border py-3 border-black px-3 xy-5 rounded-lg flex flex-row items-center space-x-2 justify-center\">\n <Image src={recycleImg} alt=\"...\" width={50} height={50}/>\n <h1 className=\"me-20\">{product.meta_data.name}</h1>\n {\n (userData.id === data.campaign.owner || userData.role === \"Collector\") && \n <div className=\"\" id={product.id} >\n <button data-type=\"cancel\" onClick={(e) => {handleClick(e.target, product.id, product.campaign_id)}} className=\"border border-black rounded-full p-1 bg-[#EC5959] me-2\"><FaTimes/></button>\n <button data-type=\"accept\" onClick={(e) => {handleClick(e.target, product.id, product.campaign_id)}} className=\"border border-black rounded-full p-1 bg-[#59EC7A]\"><FaCheck/></button>\n </div>\n }\n </div>\n )\n })}\n </div>\n </div>\n );\n};\n\nfunction ProductForm({ data }) {\n const wallet = useAppSelector(selectWallet);\n const [state, setState] = useState({\n description: \"\",\n image: \"\",\n camp_id: data.id,\n });\n\n const handleClick = async () => {\n wallet.callMethod({\n contractId: \"dev-1690642410974-51262377694618\",\n method: \"new_product\",\n args: { ...state, total_supply: Number(state.total_supply) },\n });\n };\n\n const handleChange = ({ target }) => {\n setState((prev) => ({\n ...prev,\n [target.getAttribute(\"name\")]: target.value,\n }));\n };\n\n return (\n <div className=\"flex flex-col space-y-5\">\n <div className=\"bg-[#59EC7A] border border-black rounded-full px-5 py-2 w-1/3 text-center\">\n Baos Qui\n </div>\n <span className=\"flex flex-col text-base\">\n <label>Product's name</label>\n <input\n name=\"name\"\n type=\"text\"\n className=\"border-2 border-black rounded-lg\"\n onChange={handleChange}\n value={state.name}\n />\n </span>\n <span className=\"flex flex-col text-base\">\n <label>Location</label>\n <input\n name=\"location\"\n type=\"text\"\n className=\"border-2 border-black rounded-lg\"\n onChange={handleChange}\n value={state.location}\n />\n </span>\n <div className=\"flex flex-row space-x-10 items-end\">\n <span className=\"flex flex-col text-base\">\n <label>Amount</label>\n <input\n name=\"total_supply\"\n type=\"number\"\n className=\"border-2 border-black rounded-lg\"\n onChange={handleChange}\n value={state.total_supply}\n />\n </span>\n\n <button\n onClick={handleClick}\n className=\"rounded-lg bg-[#59EC7A] h-10 px-10\"\n >\n Accept\n </button>\n </div>\n </div>\n );\n}\n\nexport default function Home() {\n const searchParams = useSearchParams();\n const data = searchParams.get(\"data\");\n const parsedData = JSON.parse(data);\n const [addProductForm, setAddProductForm] = useState(false);\n const wallet = useAppSelector(selectWallet);\n const [information, setInformation] = useState();\n const [userData, setUserData] = useState()\n\n useEffect(() => {\n async function fetchData() {\n const data = await wallet?.viewMethod({\n contractId: \"dev-1690642410974-51262377694618\",\n method: \"get_camp_data\",\n args: { camp_id: parsedData.id },\n })\n \n const dataUser = await wallet?.viewMethod({contractId:\"dev-1690642410974-51262377694618\", method: \"get_user_by_id\",args: {id: wallet.accountId} })\n \n setInformation(data)\n setUserData(dataUser)\n }\n fetchData()\n }, [wallet])\n\n console.log(information)\n\n return (\n <main>\n <div className={clsx(\"flex flex-col\", play.className)}>\n <IntroSection parsedData={parsedData} setOpenForm={setAddProductForm} />\n <DesciptionSection parsedData={parsedData} />\n {/* <h1 className='text-5xl fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 tra'>heloooooooooooooooooooooooo</h1> */}\n <Popup2\n isOpen={addProductForm}\n setIsOpen={setAddProductForm}\n content={<ProductForm data={parsedData} />}\n />\n <ValidatorSection data={information} wallet={wallet} userData={userData}/>\n </div>\n </main>\n );\n}\n"
},
"client/widget/app.create.page": {
"code": "\"use client\"\n\nimport { useAppSelector } from \"@/context/store\";\nimport { selectWallet } from \"@/features/walletSlice\";\nimport { useState, useEffect, memo } from \"react\";\nimport clsx from \"clsx\";\n\nconst initState = {\n account_balance: 100,\n fund: 0,\n title: \"\",\n content: \"\",\n image: \"123\",\n amount: 0,\n init_time: \"\",\n deadline: \"\"\n}\n\nconst page = () => {\n\n const [state, setState] = useState(initState)\n const [isSuccess, setIsSuccess] = useState(false)\n const wallet = useAppSelector(selectWallet);\n const isWalletConnected = !!wallet?.accountId;\n\n function handleChange({target}){\n console.log(state)\n setState((prev) => ({\n ...prev,\n [target.getAttribute(\"name\")]: target.value\n }))\n }\n\n async function createCampaign(e){\n e.preventDefault()\n const args = {...state, fund: Number(state.fund), amount: Number(state.amount), deadline: new Date(state.deadline).getTime(), init_time: new Date(state.init_time).getTime()}\n console.log(args)\n if(isWalletConnected){\n await wallet.callMethod({contractId: 'dev-1690561706410-52327007706627', deposit: \"1000000000000000000000000\", method: 'new_campaign', args })\n }\n\n }\n\n useEffect(() => {\n const urlParams = new URLSearchParams(window.location.search);\n const txhash = urlParams.get(\"transactionHashes\")\n\n setIsSuccess(!!txhash)\n if(txhash) alert(\"thành công!!!!\")\n }, [])\n\n return <>\n {isSuccess ?\n (<div>Thành công!!!!!</div>\n ) : (\n <div className=\" max-w-[1440px] mx-auto lg:w-10/12 pt-28\">\n <form action=\"\" className=\"flex flex-col\">\n <span>Campain Title</span>\n <input name=\"title\" type=\"text\" placeholder='Enter the title of campaign' onChange={handleChange} value={state.title}/>\n <span>Description</span>\n <input name=\"content\" type=\"text\" placeholder='Enter the description about the program ' onChange={handleChange} value={state.content}/>\n <span>Goal amount</span>\n <input name=\"amount\" type=\"number\" placeholder='Enter a number' onChange={handleChange} value={state.amount}/>\n <span>Tokens amount</span>\n <input name=\"fund\" type=\"number\" placeholder='' onChange={handleChange} value={state.fund}/>\n <span>Start day</span>\n <input name=\"init_time\" type=\"date\" placeholder='' onChange={handleChange} value={state.init_time}/>\n <span>End date</span>\n <input name=\"deadline\" type=\"date\" placeholder='' onChange={handleChange} value={state.deadline}/>\n <button className=\"bg-lime-500\">Add collector</button>\n <button onClick={createCampaign}>Create Campaign</button>\n </form>\n </div>\n )}\n </>\n}\n\nexport default memo(page)\n"
},
"client/widget/components.TabsContent": {
"code": "import React from 'react';\n\nconst TabContent = ({ children, activeTab, label }) => {\n if (activeTab !== label) return null;\n\n return (\n <div className=\" p-4 rounded-b-lg\">\n {children}\n </div>\n );\n};\n\nexport default TabContent;\n"
},
"client/widget/components.Button": {
"code": "import Link from \"next/link\";\nimport clsx from 'clsx'\n\nconst Button = ({content, classes, href, icon=null}) => {\n return (\n <Link \n href={href}\n className={clsx(classes, \"py-3 px-6\", \"flex items-center justify-center\")}\n >\n {icon && (\n <span className=\"inline-flex items-center mr-2\">\n {icon}\n </span>\n )}\n {content}\n </Link>\n )\n}\n\nexport default Button\n"
},
"client/widget/components.ImageCard": {
"code": "import React from \"react\";\nimport Image from \"next/image\";\nimport Button from \"./Button\";\n\nconst ImageCard = ({src, alt, title, description}) => {\n\n return (\n <div className=\"relative max-w-xs overflow-hidden rounded-2xl shadow-lg group \">\n <div className=\"group-hover:scale-110 transform transition-transform\">\n <Image\n src={src}\n alt={alt}\n className=\"\"\n />\n <div className=\"p-8 bg-[#d7ffdb]\">\n <h2 className=\"text-lg font-bold mb-2\">{title}</h2>\n <p className=\"text-gray-500\">{description}</p>\n <div className=\"flex flex-row justify-around pt-4 pb-8\" >\n <div >\n <Button href={\"/\"} classes={\" text-white bg-black rounded-full px-8\"} content={\"Donate\"}></Button>\n </div>\n <div >\n <Button href={\"/\"} classes={\"text-white bg-[#3580ef] rounded-full px-8\"} content={\"Recycle\"}></Button>\n </div>\n </div>\n </div>\n </div>\n \n\n </div>\n );\n};\n\nexport default ImageCard;"
},
"client/widget/components.Tabs": {
"code": "import React from 'react';\n\nconst Tab = ({ label, activeTab, onClick }) => {\n const isActive = activeTab === label;\n\n return (\n <button\n className={`px-4 py-2 rounded-lg ${\n isActive ? 'bg-blue-500 text-white' : 'bg-gray-300 text-gray-700'\n }`}\n onClick={() => onClick(label)}\n >\n {label}\n </button>\n );\n};\n\nexport default Tab;\n"
},
"client/widget/components.PopUp": {
"code": "import React, { useState } from \"react\";\nimport avatar from \"/public/images/Avatar.png\";\nimport Image from \"next/image\";\nimport { useAppSelector } from \"@/context/store\";\nimport { selectWallet } from \"@/features/walletSlice\";\n\nconst Popup = ({ isOpen, onClose, signOut, userData }) => {\n const wallet = useAppSelector(selectWallet);\n const [newEmail, setNewEmail] = useState(\"\");\n const [newName, setNewName] = useState(\"\");\n const [isEditing, setIsEditing] = useState(false);\n\n const update_user_info = async () => {\n if(wallet)\n {\n wallet.callMethod({contractId:\"dev-1690642410974-51262377694618\", method: \"update_user\",args: {name: newName, email_address: newEmail, image: \"aaaaa\" } })\n }\n\n };\n\n const handleEmailChange = (event) => {\n setNewEmail(event.target.value);\n };\n\n const handleNameChange = (event) => {\n setNewName(event.target.value);\n };\n\n const handleEditClick = () => {\n setIsEditing(true);\n };\n const handleBackClick = () => {\n setIsEditing(false);\n };\n\n const handleUpdateClick = () => {\n // Call the update_user_info function here with newName and newEmail\n update_user_info();\n setIsEditing(false);\n };\n\n return (\n <div className={`popup ${isOpen ? \"open\" : \"\"}`}>\n <div className=\"popup-content flex-col min-w-[1000px] min-h-[600px] flex\">\n <div className=\"flex flex-row justify-between pb-8\">\n <p className=\"text-black text-4xl font-normal\">\n Your Profile\n </p>\n <button className=\"text-red-500\" onClick={onClose}>x</button>\n </div>\n <div className=\"flex flex-row justify-center items-center\">\n <div className=\"w-1/3 flex justify-center\">\n <Image\n className=\" object-cover rounded-full w-28 h-28 border border-2 border-[#59EC7A] shadow-xl\"\n src={avatar}\n alt=\"form-learn\"\n />\n </div>\n\n <div className=\"flex flex-col font-light text-black tracking-wide w-2/3\">\n <label htmlFor=\"name\" className={\"block\"}>\n Account Name\n </label>\n <input\n type=\"text\"\n value={newName}\n name=\"name\"\n placeholder={userData?.meta_data.name}\n onChange={handleNameChange}\n className={`border-none border-gray-300 rounded-lg ${\n isEditing ? \"bg-gray-100\" : \"\"\n }`}\n disabled={!isEditing}\n />\n <p>Acount id: {userData?.id}</p>\n\n <label htmlFor=\"email\" className={\"block\"}>\n Email\n </label>\n <input\n type=\"email\"\n value={newEmail}\n name=\"email\"\n placeholder={userData?.meta_data.email_address}\n onChange={handleEmailChange}\n className={`border-none border-gray-300 rounded-lg ${\n isEditing ? \"bg-gray-100\" : \"\"\n }`}\n disabled={!isEditing}\n />\n\n <p>Role: {userData?.role}</p>\n <p>Token amount: {userData?.meta_data.balance}</p>\n </div>\n </div>\n\n {!isEditing ? (\n <button\n className=\"text-green-400 rounded-lg mt-10 font-light border border-2 border-green-400\"\n onClick={handleEditClick}\n >\n Edit\n </button>\n ) : (\n <>\n\n <button\n className=\"text-green-400 rounded-lg mt-10 font-light border border-2 border-green-400\"\n onClick={handleUpdateClick}\n >\n Update\n </button>\n <button\n className=\"text-red-500 rounded-lg mt-10 font-light border border-2 border-gray-400\"\n onClick={handleBackClick}\n >\n Back\n </button>\n </>\n )}\n <button\n className=\"text-red-500 rounded-lg mt-10 font-light border border-2 border-red-400\"\n onClick={signOut}\n >\n Sign Out\n </button>\n </div>\n </div>\n );\n};\n\nexport default Popup;\n"
},
"client/widget/components.ProgressBar": {
"code": "import React from \"react\";\n\nconst ProgressBar = ({ value , max}) => {\n return (\n <progress className=\"w-full h-1 bg-gray-200 rounded-xl\" \n value={value} \n max={max}>\n {value}%\n </progress>\n );\n};\n\nexport default ProgressBar;\n"
},
"client/widget/components.UserCard": {
"code": "import React from \"react\";\nimport Image from \"next/image\";\n\nconst UserCard = ({src, alt, title, description}) => {\n\n return (\n <div className=\"relative w-64 h-64 overflow-hidden rounded-xl bg-[#6fffcb]\">\n <div className=\"flex flex-col justify-center items-center w-full h-full \">\n <Image\n src={src}\n alt={alt}\n className=\"w-1/2 h-1/2 object-cover rounded-full mb-4\"\n />\n <p className=\"text-2xl font-semibold text-white\">{title}</p>\n <p className=\" text-white\"> Total Sales: {description}</p>\n </div>\n \n </div>\n );\n};\n\nexport default UserCard;"
}
}
}