feat(frontend): add permissioned warning when creating campaigns (#447)

* feat(frontend): add permissioned warning when creating campaings * docs: add changeset * fix(frontend): add missing wallet disconnected warning for permissioned * fix(frontend): add screen height for campaigns and creation pages * feat(frontend): make back button variant primary * feat(frontend): add new permissioned mode message * fix(frontend): move condition into existing ternary operator * fix(frontend): make the loading state the first
carrot-kpi · Oct 23, 2023 · 3618287 · 3618287
1 parent ca19ac8
commit 3618287
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 42 deletions.
diff --git a/.changeset/neat-pens-lick.md b/.changeset/neat-pens-lick.md
@@ -0,0 +1,5 @@
+---
+"@carrot-kpi/host-frontend": minor
+---
+
+Add permissioned mode warning when creating campaigns
diff --git a/packages/frontend/src/components/permissioned/index.tsx b/packages/frontend/src/components/permissioned/index.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { t } from "i18next";
+import ErrorIcon from "../../icons/error";
+import { Button, Typography } from "@carrot-kpi/ui";
+import { useAccount } from "wagmi";
+import WalletDisconnected from "../../icons/wallet-disconnected";
+
+interface PermissionedProps {
+    onBack: () => void;
+}
+
+export const Permissioned = ({ onBack }: PermissionedProps) => {
+    const { address } = useAccount();
+
+    return (
+        <div className="w-full h-full flex justify-center">
+            <div className="h-fit flex flex-col gap-4 items-center p-8 max-w-lg rounded-xl border border-black dark:border-white bg-white dark:bg-black mx-4">
+                {address ? (
+                    <>
+                        <ErrorIcon className="w-40 h-40 fill-orange stroke-orange" />
+                        <Typography
+                            variant="xl"
+                            weight="bold"
+                            className={{ root: "text-center" }}
+                        >
+                            {t("permissioned.mode.title")}
+                        </Typography>
+                        <Typography
+                            className={{
+                                root: "text-center mb-4",
+                            }}
+                        >
+                            {t("permissioned.mode.description")}
+                        </Typography>
+                        <Button size="small" onClick={onBack}>
+                            {t("permissioned.mode.back")}
+                        </Button>
+                    </>
+                ) : (
+                    <>
+                        <WalletDisconnected className="w-52" />
+                        <div className="flex flex-col gap-3 items-center">
+                            <Typography variant="h4">
+                                {t("wallet.disconnected.title")}
+                            </Typography>
+                            <Typography>
+                                {t("wallet.disconnected.description")}
+                            </Typography>
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
diff --git a/packages/frontend/src/i18n/resources/en.ts b/packages/frontend/src/i18n/resources/en.ts
@@ -90,5 +90,9 @@ export const en = {
         "wallet.disconnected.title": "Wallet disconnected",
         "wallet.disconnected.description":
             "A connected wallet is required to continue.",
+        "permissioned.mode.title": "Permissioned mode enabled",
+        "permissioned.mode.description":
+            "The campaign creation is under an allowlist right now. If you are looking to throw some carrots to your community, please reach out to us in Discord and we will help you in!",
+        "permissioned.mode.back": "Back",
     },
 } as const;
diff --git a/packages/frontend/src/icons/error.tsx b/packages/frontend/src/icons/error.tsx
@@ -16,7 +16,6 @@ const Arrow = (props: SVGIcon) => (
                 cy="140.58"
                 r="74.877"
                 fill="none"
-                stroke="#000"
                 strokeLinejoin="round"
                 strokeWidth="13.229"
             />
@@ -26,10 +25,18 @@ const Arrow = (props: SVGIcon) => (
                         x="92.746"
                         y="92.93"
                         width="15"
+                        fill="#000"
+                        stroke="#000"
                         height="70"
                         ry="7.5"
                     />
-                    <circle cx="100.25" cy="176.83" r="8.5" />
+                    <circle
+                        cx="100.25"
+                        cy="176.83"
+                        r="8.5"
+                        fill="#000"
+                        stroke="#000"
+                    />
                 </g>
             </g>
         </g>

diff --git a/packages/frontend/src/pages/campaigns/index.tsx b/packages/frontend/src/pages/campaigns/index.tsx
@@ -107,39 +107,43 @@ export const Campaigns = () => {
 
     return (
         <Layout navbarBgColor="orange">
-            <div className="w-full relative flex flex-col items-center px-4 md:px-10 lg:px-14 xl:px-40">
-                <div className="py-16 w-full max-w-screen-2xl">
-                    <Typography variant="h1">{t("campaign.all")}</Typography>
+            <div className="h-screen">
+                <div className="w-full relative flex flex-col items-center px-4 md:px-10 lg:px-14 xl:px-40">
+                    <div className="py-16 w-full max-w-screen-2xl">
+                        <Typography variant="h1">
+                            {t("campaign.all")}
+                        </Typography>
+                    </div>
                 </div>
-            </div>
-            <div className="w-full" id="__campaigns_page">
-                <CampaignsTopNav
-                    sortOptions={SORT_OPTIONS}
-                    stateOptions={STATE_OPTIONS}
-                    state={state}
-                    sort={sort}
-                    filtersOpen={filtersOpen}
-                    setSearchQuery={setSearchQuery}
-                    onOrderingChange={handleSortChange}
-                    onStateChange={handleStateChange}
-                    onToggleFilters={toggleFilters}
-                />
-            </div>
-            <div className="w-full flex flex-col items-center px-4 md:px-10 lg:px-14 xl:px-40">
-                <SideFilters
-                    open={filtersOpen}
-                    selectedTemplates={templates}
-                    setSelectedTemplates={handleTemplatesUpdate}
-                    selectedOracles={oracles}
-                    setSelectedOracles={handleOraclesTemplatesUpdate}
-                    toggleFilters={toggleFilters}
-                />
-                <div className="flex flex-col items-center w-full py-12 md:py-16">
-                    <div className="flex flex-wrap justify-center gap-5 lg:justify-start">
-                        <Grid
-                            loading={loading}
-                            items={sortedAndfilteredKPITokens}
-                        />
+                <div className="w-full" id="__campaigns_page">
+                    <CampaignsTopNav
+                        sortOptions={SORT_OPTIONS}
+                        stateOptions={STATE_OPTIONS}
+                        state={state}
+                        sort={sort}
+                        filtersOpen={filtersOpen}
+                        setSearchQuery={setSearchQuery}
+                        onOrderingChange={handleSortChange}
+                        onStateChange={handleStateChange}
+                        onToggleFilters={toggleFilters}
+                    />
+                </div>
+                <div className="w-full flex flex-col items-center px-4 md:px-10 lg:px-14 xl:px-40">
+                    <SideFilters
+                        open={filtersOpen}
+                        selectedTemplates={templates}
+                        setSelectedTemplates={handleTemplatesUpdate}
+                        selectedOracles={oracles}
+                        setSelectedOracles={handleOraclesTemplatesUpdate}
+                        toggleFilters={toggleFilters}
+                    />
+                    <div className="flex flex-col items-center w-full py-12 md:py-16">
+                        <div className="flex flex-wrap justify-center gap-5 lg:justify-start">
+                            <Grid
+                                loading={loading}
+                                items={sortedAndfilteredKPITokens}
+                            />
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/packages/frontend/src/pages/create-with-template-id/index.tsx b/packages/frontend/src/pages/create-with-template-id/index.tsx
@@ -6,14 +6,27 @@ import {
 } from "@carrot-kpi/react";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { useAccount, useNetwork, usePublicClient } from "wagmi";
-import { Fetcher, ResolvedTemplate } from "@carrot-kpi/sdk";
+import {
+    useAccount,
+    useNetwork,
+    usePublicClient,
+    type Address,
+    useContractRead,
+} from "wagmi";
+import {
+    CHAIN_ADDRESSES,
+    ChainId,
+    FACTORY_ABI,
+    Fetcher,
+    ResolvedTemplate,
+} from "@carrot-kpi/sdk";
 import { ErrorFeedback, Loader } from "@carrot-kpi/ui";
 import { useAddTransaction } from "../../hooks/useAddTransaction";
 import { Authenticate } from "../../components/authenticate";
 import { useIsPinningProxyAuthenticated } from "../../hooks/useIsPinningProxyAuthenticated";
 import { useInvalidateLatestKPITokens } from "../../hooks/useInvalidateLatestKPITokens";
 import { Layout } from "../../components/layout";
+import { Permissioned } from "../../components/permissioned";
 
 export const CreateWithTemplateId = () => {
     const { i18n, t } = useTranslation();
@@ -111,6 +124,15 @@ export const CreateWithTemplateId = () => {
         templateId,
     ]);
 
+    const { data: creatorAllowed, isLoading: loadingCreatorAllowed } =
+        useContractRead({
+            address: CHAIN_ADDRESSES[chain?.id as ChainId].factory,
+            abi: FACTORY_ABI,
+            functionName: "creatorAllowed",
+            args: [address as Address],
+            enabled: !!chain?.id && !!address,
+        });
+
     const handleCreate = useCallback(() => {
         invalidateLatestKPITokens();
     }, [invalidateLatestKPITokens]);
@@ -121,15 +143,19 @@ export const CreateWithTemplateId = () => {
 
     return (
         <Layout navbarBgColor="green" noMarquee>
-            <div className="flex-grow bg-grid-light bg-left-top bg-green">
-                {!pinningProxyAuthenticated ? (
-                    <div className="py-20">
-                        <Authenticate onCancel={handleDismiss} />
-                    </div>
-                ) : loading ? (
+            <div className="h-screen flex-grow bg-grid-light bg-left-top bg-green">
+                {loading || loadingCreatorAllowed ? (
                     <div className="py-20 text-black flex justify-center">
                         <Loader />
                     </div>
+                ) : !creatorAllowed ? (
+                    <div className="py-20">
+                        <Permissioned onBack={handleDismiss} />
+                    </div>
+                ) : !pinningProxyAuthenticated ? (
+                    <div className="py-20">
+                        <Authenticate onCancel={handleDismiss} />
+                    </div>
                 ) : template ? (
                     <KPITokenCreationForm
                         key={formKey}