diff --git a/.changeset/neat-pens-lick.md b/.changeset/neat-pens-lick.md new file mode 100644 index 000000000..6768ccd86 --- /dev/null +++ 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 new file mode 100644 index 000000000..8333d95fe --- /dev/null +++ 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 ( +
+
+ {address ? ( + <> + + + {t("permissioned.mode.title")} + + + {t("permissioned.mode.description")} + + + + ) : ( + <> + +
+ + {t("wallet.disconnected.title")} + + + {t("wallet.disconnected.description")} + +
+ + )} +
+
+ ); +}; diff --git a/packages/frontend/src/i18n/resources/en.ts b/packages/frontend/src/i18n/resources/en.ts index e03bc172c..525f3da4b 100644 --- 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 index 642488b99..efd00a8ef 100644 --- 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" /> - + diff --git a/packages/frontend/src/pages/campaigns/index.tsx b/packages/frontend/src/pages/campaigns/index.tsx index 87c40c8a1..88ced4f2d 100644 --- a/packages/frontend/src/pages/campaigns/index.tsx +++ b/packages/frontend/src/pages/campaigns/index.tsx @@ -107,39 +107,43 @@ export const Campaigns = () => { return ( -
-
- {t("campaign.all")} +
+
+
+ + {t("campaign.all")} + +
-
-
- -
-
- -
-
- +
+ +
+
+ +
+
+ +
diff --git a/packages/frontend/src/pages/create-with-template-id/index.tsx b/packages/frontend/src/pages/create-with-template-id/index.tsx index 56df50abf..9c831608c 100644 --- 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 ( -
- {!pinningProxyAuthenticated ? ( -
- -
- ) : loading ? ( +
+ {loading || loadingCreatorAllowed ? (
+ ) : !creatorAllowed ? ( +
+ +
+ ) : !pinningProxyAuthenticated ? ( +
+ +
) : template ? (