feat(frontend): add setup share and form auto complete for amm campaign

packages/chains/src/types/protocol.ts

@@ -6,6 +6,7 @@ import {
     SupportedLiquityV2,
     TargetType,
 } from "@metrom-xyz/sdk";
+import { SupportedChain } from "@metrom-xyz/contracts";
 
 export enum ProtocolType {
     Dex = "dex",
@@ -34,6 +35,10 @@ export interface DexProtocol extends ProtocolBase<SupportedDex> {
     supportsFetchAllPools: boolean;
 }
 
+export type WithChain<T extends ProtocolBase> = T & {
+    chainId: SupportedChain;
+};
+
 export interface LiquityV2Protocol extends ProtocolBase<SupportedLiquityV2> {
     type: ProtocolType.LiquityV2;
     debtToken: Erc20Token;

packages/frontend/SUPPORTED_PROTOCOLS.md

@@ -1,12 +1,12 @@
-||Telos|Gnosis|Sonic|Lens|Sei Network|LightLink|Swell|Base|Hemi|Taiko|Scroll|Lumia|
-|---|---|---|---|---|---|---|---|---|---|---|---|---
-|[Uniswap v3](https://app.uniswap.org/)|✅|✅|✅|✅|-|✅|-|✅|✅|✅|✅|-|
-|[Swapr](https://swapr.eth.link/)|-|✅|-|-|-|-|-|-|-|-|-|-|
-|[SilverSwap](https://silverswap.io/)|-|-|✅|-|-|-|-|-|-|-|-|-|
-|[Carbon DeFi](https://carbondefi.xyz/)|-|-|-|-|✅|-|-|-|-|-|-|-|
-|[Velodrome](https://velodrome.finance/)|-|-|-|-|-|-|✅|-|-|-|-|-|
-|[Kim](https://www.kim.exchange)|-|-|-|-|-|-|-|✅|-|-|-|-|
-|[BaseSwap](https://baseswap.fi/)|-|-|-|-|-|-|-|✅|-|-|-|-|
-|[Unagi](https://unagiswap.xyz/)|-|-|-|-|-|-|-|-|-|✅|-|-|
-|[Scribe](https://scribe.exchange)|-|-|-|-|-|-|-|-|-|-|✅|-|
-|[Morphex](https://morphex.exchange/)|-|-|-|-|-|-|-|-|-|-|-|✅|
+|                                         | Telos | Gnosis | Sonic | Lens | Sei Network | LightLink | Swell | Base | Hemi | Taiko | Scroll | Lumia |
+| --------------------------------------- | ----- | ------ | ----- | ---- | ----------- | --------- | ----- | ---- | ---- | ----- | ------ | ----- |
+| [Uniswap v3](https://app.uniswap.org/)  | ✅    | ✅     | ✅    | ✅   | -           | ✅        | -     | ✅   | ✅   | ✅    | ✅     | -     |
+| [Swapr](https://swapr.eth.link/)        | -     | ✅     | -     | -    | -           | -         | -     | -    | -    | -     | -      | -     |
+| [SilverSwap](https://silverswap.io/)    | -     | -      | ✅    | -    | -           | -         | -     | -    | -    | -     | -      | -     |
+| [Carbon DeFi](https://carbondefi.xyz/)  | -     | -      | -     | -    | ✅          | -         | -     | -    | -    | -     | -      | -     |
+| [Velodrome](https://velodrome.finance/) | -     | -      | -     | -    | -           | -         | ✅    | -    | -    | -     | -      | -     |
+| [Kim](https://www.kim.exchange)         | -     | -      | -     | -    | -           | -         | -     | ✅   | -    | -     | -      | -     |
+| [BaseSwap](https://baseswap.fi/)        | -     | -      | -     | -    | -           | -         | -     | ✅   | -    | -     | -      | -     |
+| [Unagi](https://unagiswap.xyz/)         | -     | -      | -     | -    | -           | -         | -     | -    | -    | ✅    | -      | -     |
+| [Scribe](https://scribe.exchange)       | -     | -      | -     | -    | -           | -         | -     | -    | -    | -     | ✅     | -     |
+| [Morphex](https://morphex.exchange/)    | -     | -      | -     | -    | -           | -         | -     | -    | -    | -     | -      | ✅    |

packages/frontend/messages/en.json

@@ -340,6 +340,16 @@
                 "approve": "Approve {amount} {symbol} ({currentIndex}/{totalAmount})"
             },
             "preview": "Campaign preview"
+        },
+        "notifications": {
+            "setupFail": {
+                "title": "Setup failed",
+                "message": "Something went wrong"
+            },
+            "setupSuccess": {
+                "title": "Setup successful",
+                "message": "Campaign imported"
+            }
         }
     },
     "campaignPreview": {
@@ -395,8 +405,10 @@
             "allows": "Allows {count, plural, =0 {} =1 {# address} other {# adresses}}"
         },
         "errors": {
-            "specification": "An error occurred while processing the campaign specification"
+            "specification": "An error occurred while processing the campaign specification",
+            "setup": "An error occurred while processing the campaign setup"
         },
+        "share": "Share campaign setup",
         "deploy": "Launch campaign",
         "connectWallet": "Connect wallet",
         "congratulations": "Congratulations!",
@@ -408,7 +420,17 @@
             }
         },
         "allCampaigns": "All campaigns",
-        "newCampaign": "New campaign"
+        "newCampaign": "New campaign",
+        "notifications": {
+            "linkCopied": {
+                "title": "Link copied to clipboard",
+                "message": "Expires in 1 day"
+            },
+            "linkError": {
+                "title": "Link generation failed",
+                "message": "Something went wrong"
+            }
+        }
     },
     "campaignDuration": {
         "startDate": "Start date",

packages/frontend/src/app/[locale]/campaigns/create/[type]/page.tsx

@@ -2,6 +2,7 @@ import { CreateCampaignForm } from "@/src/components/create-campaign/form";
 import { routing, type Locale } from "@/src/i18n/routing";
 import { CampaignType } from "@/src/types/campaign";
 import { setRequestLocale } from "next-intl/server";
+import { Suspense } from "react";
 
 interface Params {
     type: CampaignType;
@@ -26,7 +27,11 @@ export default async function CampaignFormPage({
 
     setRequestLocale(locale);
 
-    return <CreateCampaignForm type={type} />;
+    return (
+        <Suspense>
+            <CreateCampaignForm type={type} />
+        </Suspense>
+    );
 }
 
 export async function generateStaticParams() {

packages/frontend/src/components/campaigns/index.tsx

@@ -304,7 +304,9 @@ export function Campaigns() {
             const params = new URLSearchParams(searchParams.toString());
             if (!chain.query) params.delete("chain");
             else params.set("chain", chain.query);
-            router.replace(`${pathname}?${params.toString()}`);
+            router.replace(`${pathname}?${params.toString()}`, {
+                scroll: false,
+            });
         },
         [pathname, router, searchParams],
     );
@@ -329,7 +331,7 @@ export function Campaigns() {
 
         const params = new URLSearchParams(searchParams.toString());
         params.delete("chain");
-        router.replace(`${pathname}?${params.toString()}`);
+        router.replace(`${pathname}?${params.toString()}`, { scroll: false });
     }, [pathname, searchParams, router]);
 
     function handlePreviousPage() {

packages/frontend/src/components/create-campaign/form/amm-pool-liquidity-form/index.tsx

@@ -4,10 +4,17 @@ import {
     AmmPoolLiquidityCampaignPreviewPayload,
     type AmmPoolLiquidityCampaignPayloadPart,
     type CampaignPreviewDistributables,
+    CampaignKind,
 } from "@/src/types/campaign";
 import { useTranslations } from "next-intl";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useChainId } from "wagmi";
+import {
+    useCallback,
+    useEffect,
+    useLayoutEffect,
+    useMemo,
+    useState,
+} from "react";
+import { useChainId, useSwitchChain } from "wagmi";
 import {
     AmmPoolLiquidityType,
     DistributablesType,
@@ -28,8 +35,16 @@ import {
     AMM_SUPPORTS_TOKENS_RATIO,
 } from "@/src/commons";
 import { WeightingStep } from "../../steps/weighting";
+import { usePathname } from "@/i18n/routing";
+import dayjs from "dayjs";
+import { useCampaignSetup } from "@/src/hooks/useCampaignSetup";
+import { toast } from "sonner";
+import { SetupFail } from "../notifications/setup-fail";
+import { SetupSuccess } from "../notifications/setup-success";
+import { useRouter, useSearchParams } from "next/navigation";
 
 import styles from "./styles.module.css";
+import { decodeCampaignSetup } from "@/src/utils/campaign";
 
 function validatePayload(
     payload: AmmPoolLiquidityCampaignPayload,
@@ -88,11 +103,79 @@ export function AmmPoolLiquidityForm({
     onPreviewClick,
 }: AmmPoolLiquidityFormProps) {
     const t = useTranslations("newCampaign");
+
     const chainId = useChainId();
+    const router = useRouter();
+    const pathname = usePathname();
+    const { switchChainAsync, isPending: switchingChain } = useSwitchChain();
+    const searchParams = useSearchParams();
+    const {
+        loading: loadingSetup,
+        error: setupError,
+        setup,
+    } = useCampaignSetup({
+        hash: searchParams.get("setup"),
+        enabled: !!searchParams.get("setup"),
+    });
 
     const [payload, setPayload] = useState(initialPayload);
     const [errors, setErrors] = useState<CampaignPayloadErrors>({});
 
+    // This hook auto fills the form state when a campaign setup is available.
+    useLayoutEffect(() => {
+        // Remove the 'setup' parameter from the URL after parsing.
+        // This ensures the form behaves correctly after autocomplete completes.
+        const params = new URLSearchParams(searchParams.toString());
+
+        if (setupError) {
+            params.delete("setup");
+            router.replace(`${pathname}?${params.toString()}`, {
+                scroll: false,
+            });
+        }
+
+        if (!setup) return;
+
+        const autocompletePayload = async () => {
+            const decodedSetup = decodeCampaignSetup(setup);
+            if (decodedSetup.kind !== CampaignKind.AmmPoolLiquidity) return;
+
+            const payload = decodedSetup as AmmPoolLiquidityCampaignPayload;
+            if (!payload.dex?.chainId) return;
+
+            const { dex } = payload;
+
+            if (dex.chainId !== chainId)
+                await switchChainAsync({ chainId: dex.chainId });
+
+            params.delete("setup");
+            router.replace(`${pathname}?${params.toString()}`, {
+                scroll: false,
+            });
+
+            setPayload(payload);
+        };
+
+        autocompletePayload();
+    }, [
+        loadingSetup,
+        setupError,
+        searchParams,
+        chainId,
+        setup,
+        pathname,
+        router,
+        switchChainAsync,
+    ]);
+
+    useEffect(() => {
+        if (!loadingSetup && setupError)
+            toast.custom((toastId) => <SetupFail toastId={toastId} />);
+
+        if (!loadingSetup && !setupError && !!setup)
+            toast.custom((toastId) => <SetupSuccess toastId={toastId} />);
+    }, [loadingSetup, setupError, setup]);
+
     const previewPayload = useMemo(() => {
         if (Object.values(errors).some((error) => !!error)) return null;
         return validatePayload(payload);
@@ -155,36 +238,43 @@ export function AmmPoolLiquidityForm({
         onPreviewClick(previewPayload);
     }
 
+    const loading = loadingSetup || switchingChain;
+
     return (
         <div className={styles.root}>
             <div className={styles.stepsWrapper}>
                 <DexStep
+                    loading={loading}
                     disabled={unsupportedChain}
                     dex={payload.dex}
                     onDexChange={handlePayloadOnChange}
                 />
                 <PoolStep
+                    loading={loading}
                     disabled={!payload.dex || unsupportedChain}
                     dex={payload.dex}
                     pool={payload.pool}
                     onPoolChange={handlePayloadOnChange}
                     onError={handlePayloadOnError}
                 />
                 <StartDateStep
+                    loading={loading}
                     disabled={!payload.pool || unsupportedChain}
                     startDate={payload.startDate}
                     endDate={payload.endDate}
                     onStartDateChange={handlePayloadOnChange}
                     onError={handlePayloadOnError}
                 />
                 <EndDateStep
+                    loading={loading}
                     disabled={!payload.startDate || unsupportedChain}
                     startDate={payload.startDate}
                     endDate={payload.endDate}
                     onEndDateChange={handlePayloadOnChange}
                     onError={handlePayloadOnError}
                 />
                 <RewardsStep
+                    loading={loading}
                     disabled={!payload.endDate || unsupportedChain}
                     distributables={payload.distributables}
                     startDate={payload.startDate}
@@ -195,13 +285,15 @@ export function AmmPoolLiquidityForm({
                 {tokensRatioSupported && (
                     <WeightingStep
                         pool={payload.pool}
+                        distributablesType={payload.distributables?.type}
                         disabled={noDistributables || unsupportedChain}
                         weighting={payload.weighting}
                         onWeightingChange={handlePayloadOnChange}
                         onError={handlePayloadOnError}
                     />
                 )}
                 <KpiStep
+                    loading={loading}
                     disabled={noDistributables || unsupportedChain}
                     pool={payload.pool}
                     distributables={
@@ -223,6 +315,7 @@ export function AmmPoolLiquidityForm({
                     payload.pool.liquidityType ===
                         AmmPoolLiquidityType.Concentrated && (
                         <RangeStep
+                            autoCompleting={!!setup}
                             disabled={noDistributables || unsupportedChain}
                             distributablesType={payload.distributables?.type}
                             pool={payload.pool}
@@ -234,6 +327,7 @@ export function AmmPoolLiquidityForm({
                         />
                     )}
                 <RestrictionsStep
+                    loading={loading}
                     disabled={missingDistributables || unsupportedChain}
                     restrictions={payload.restrictions}
                     onRestrictionsChange={handlePayloadOnChange}
@@ -243,6 +337,7 @@ export function AmmPoolLiquidityForm({
             <Button
                 icon={ArrowRightIcon}
                 iconPlacement="right"
+                loading={loading}
                 disabled={!previewPayload}
                 className={{ root: styles.button }}
                 onClick={handlePreviewOnClick}

packages/frontend/src/components/create-campaign/form/header/index.tsx

@@ -23,7 +23,7 @@ export function FormHeader({ type }: FormHeaderProps) {
     const router = useRouter();
 
     function handleBackOnClick() {
-        router.back();
+        router.push("/campaigns/create");
     }
 
     return (

packages/frontend/src/components/create-campaign/form/index.tsx

@@ -48,6 +48,14 @@ export function CreateCampaignForm<T extends CampaignType>({
     const [view, setView] = useState(View.Form);
     const [payload, setPayload] = useState<CampaignPreviewPayload | null>(null);
 
+    const unsupportedChain = useMemo(() => {
+        return (
+            isConnected &&
+            (!connectedChain ||
+                !chains.some((chain) => chain.id === selectedChain))
+        );
+    }, [chains, connectedChain, isConnected, selectedChain]);
+
     function handlePreviewOnClick(payload: CampaignPreviewPayload | null) {
         setPayload(payload);
         setView(View.Preview);
@@ -62,14 +70,6 @@ export function CreateCampaignForm<T extends CampaignType>({
         router.push("/campaigns/create");
     }
 
-    const unsupportedChain = useMemo(() => {
-        return (
-            isConnected &&
-            (!connectedChain ||
-                !chains.some((chain) => chain.id === selectedChain))
-        );
-    }, [chains, connectedChain, isConnected, selectedChain]);
-
     return (
         <div className={styles.root}>
             {dexesProtocols.length > 0 && liquityV2Protocols.length > 0 && (