feat: Zapping;

.env.development

@@ -2,6 +2,7 @@ NEXT_PUBLIC_ENVIRONMENT=development
 NEXT_PUBLIC_SITE_URL=https://develop.jumper.exchange
 NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID=G-T6ZDXLLXB5
 NEXT_PUBLIC_LIFI_API_URL=https://api-develop.jumper.exchange/p/lifi
+NEXT_PUBLIC_ZAP_API_URL=https://api-develop.jumper.exchange/zaps
 NEXT_PUBLIC_WIDGET_INTEGRATOR=dev.jumper.exchange
 NEXT_PUBLIC_WIDGET_INTEGRATOR_REFUEL=dev.jumper.exchange.gas
 NEXT_PUBLIC_WIDGET_INTEGRATOR_BLOG=dev.jumper.exchange.blog

.env.localhost

@@ -2,6 +2,7 @@ NEXT_PUBLIC_ENVIRONMENT=localhost
 NEXT_PUBLIC_SITE_URL=http://localhost:3000
 NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID=G-T6ZDXLLXB5
 NEXT_PUBLIC_LIFI_API_URL=http://localhost:8000/v1
+NEXT_PUBLIC_ZAP_API_URL=http://localhost:8000/zaps
 NEXT_PUBLIC_WIDGET_INTEGRATOR=loc.jumper.exchange
 NEXT_PUBLIC_WIDGET_INTEGRATOR_REFUEL=loc.jumper.exchange.gas
 NEXT_PUBLIC_WIDGET_INTEGRATOR_BLOG=loc.jumper.exchange.blog

.env.production

@@ -2,6 +2,7 @@ NEXT_PUBLIC_ENVIRONMENT=production
 NEXT_PUBLIC_SITE_URL=https://jumper.exchange
 NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID=G-7YZS76QSV1
 NEXT_PUBLIC_LIFI_API_URL=https://api.jumper.exchange/p/lifi
+NEXT_PUBLIC_ZAP_API_URL=https://api.jumper.exchange/zaps
 NEXT_PUBLIC_WIDGET_INTEGRATOR=jumper.exchange
 NEXT_PUBLIC_WIDGET_INTEGRATOR_REFUEL=jumper.exchange.gas
 NEXT_PUBLIC_WIDGET_INTEGRATOR_BLOG=jumper.exchange.blog

.env.staging

@@ -2,6 +2,7 @@ NEXT_PUBLIC_ENVIRONMENT=staging
 NEXT_PUBLIC_SITE_URL=https://staging.jumper.exchange
 NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID=G-T6ZDXLLXB5
 NEXT_PUBLIC_LIFI_API_URL=https://api-staging.jumper.exchange/p/lifi
+NEXT_PUBLIC_ZAP_API_URL=https://api-staging.jumper.exchange/zaps
 NEXT_PUBLIC_WIDGET_INTEGRATOR=stg.jumper.exchange
 NEXT_PUBLIC_WIDGET_INTEGRATOR_REFUEL=stg.jumper.exchange.gas
 NEXT_PUBLIC_WIDGET_INTEGRATOR_BLOG=stg.jumper.exchange.blog

README.md

@@ -64,5 +64,3 @@ Register on Crowdin and you can start translating the project into your preferre
 Your contributions will help make our project accessible to a wider audience around the world.
 
 Thank you for your support!
-
-

package.json

@@ -13,8 +13,8 @@
     "@headlessui/react": "^2.2.0",
     "@lifi/explorer": "^0.0.3",
     "@lifi/sdk": "^3.4.1",
-    "@lifi/wallet-management": "^3.4.4",
-    "@lifi/widget": "^3.12.1",
+    "@lifi/wallet-management": "3.4.6-beta.0",
+    "@lifi/widget": "3.12.3-beta.0",
     "@metaplex-foundation/mpl-core": "^1.1.1",
     "@metaplex-foundation/umi": "^0.9.2",
     "@metaplex-foundation/umi-bundle-defaults": "^0.9.2",
@@ -108,6 +108,9 @@
     "pre-push": "yarn && yarn build",
     "i18next-resources-for-ts": "i18next-resources-for-ts interface -i ./src/i18n/translations/en -o ./src/i18n/resources.d.ts"
   },
+  "resolutions": {
+    "@metamask/sdk": "0.30.0"
+  },
   "lint-staged": {
     "**/*.(ts|tsx|js)": [
       "bash -c tsc --noEmit",

src/app/[lng]/custom-widget/layout.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from 'next';
+import type { PropsWithChildren } from 'react';
+import { Layout } from 'src/Layout';
+import { WalletProviderZap } from 'src/providers/WalletProvider/ZapWalletProvider';
+
+export const metadata: Metadata = {
+  other: {
+    'partner-theme': 'default',
+  },
+};
+
+export default async function MainLayout({ children }: PropsWithChildren) {
+  return (
+    <>
+      <WalletProviderZap>
+        <Layout>{children}</Layout>
+      </WalletProviderZap>
+    </>
+  );
+}

src/app/[lng]/custom-widget/page.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from 'next';
+import CustomWidgetPage from '@/app/ui/custom-widget/CustomWidgetPage';
+import { getSiteUrl } from '@/const/urls';
+
+export const metadata: Metadata = {
+  title: 'Jumper Custom Widget',
+  description:
+    'Jumper Custom Widget is the custom widget page of Jumper Exchange.',
+  alternates: {
+    canonical: `${getSiteUrl()}/custom-widget`,
+  },
+};
+
+export default async function Page() {
+  // hardcoded for now
+  const projectData = {
+    chain: 'ethereum',
+    project: 'mellow',
+    address: '0xBEEF69Ac7870777598A04B2bd4771c71212E6aBc',
+  };
+
+  return <CustomWidgetPage projectData={projectData} />;
+}

src/app/[lng]/quests/[slug]/page.tsx

@@ -1,22 +1,63 @@
-// todo: adjust metadata for quests-page
-// export const metadata: Metadata = {
-//   title: 'Jumper | Quests',
-//   description: 'Dive into the Quests',
-//   alternates: {
-//     canonical: `${process.env.NEXT_PUBLIC_SITE_URL}/quests/`,
-//   },
-// };
-
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { siteName } from 'src/app/lib/metadata';
+import { getSiteUrl } from 'src/const/urls';
+import type { QuestAttributes } from 'src/types/loyaltyPass';
+import { sliceStrToXChar } from 'src/utils/splitStringToXChar';
 import { getQuestBySlug } from '../../../lib/getQuestBySlug';
 import QuestPage from '../../../ui/quests/QuestMissionPage';
-import { notFound } from 'next/navigation';
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug: string };
+}): Promise<Metadata> {
+  try {
+    const quest = await getQuestBySlug(params.slug);
+
+    if (!quest || !quest.data) {
+      throw new Error();
+    }
+
+    const questData = quest.data.attributes as QuestAttributes;
+
+    const openGraph: Metadata['openGraph'] = {
+      title: `Jumper Quest | ${sliceStrToXChar(questData.Title, 45)}`,
+      description: `${sliceStrToXChar(questData.Information || 'Quest description', 60)}`,
+      siteName: siteName,
+      url: `${getSiteUrl()}/quests/${params.slug}`,
+      images: [
+        {
+          url: `${quest.url}${questData.Image.data.attributes?.url}`,
+          width: 900,
+          height: 450,
+          alt: 'banner image',
+        },
+      ],
+      type: 'article',
+    };
+
+    return {
+      title: `Jumper Quest | ${sliceStrToXChar(questData.Title, 45)}`,
+      description: questData.Subtitle,
+      alternates: {
+        canonical: `${getSiteUrl()}/quests/${params.slug}`,
+      },
+      twitter: openGraph,
+      openGraph,
+    };
+  } catch (err) {
+    return {
+      title: `Jumper Quest | ${sliceStrToXChar(params.slug.replaceAll('-', ' '), 45)}`,
+      description: `This is the description for the quest "${params.slug.replaceAll('-', ' ')}".`,
+    };
+  }
+}
 
 export default async function Page({ params }: { params: { slug: string } }) {
   const { data, url } = await getQuestBySlug(params.slug);
-
-  if (!data?.data?.[0]) {
+  if (!data) {
     return notFound();
   }
-
-  return <QuestPage quest={data?.data?.[0]} url={url} />;
+  return <QuestPage quest={data} url={url} />;
 }

src/app/[lng]/superfest/[slug]/page.tsx

@@ -1,6 +1,6 @@
+import { notFound } from 'next/navigation';
 import { getQuestBySlug } from 'src/app/lib/getQuestBySlug';
 import SuperfestPage from 'src/app/ui/superfest/SuperfestMissionPage';
-import { notFound } from 'next/navigation';
 
 // export async function generateMetadata({
 //   params,
@@ -44,10 +44,8 @@ import { notFound } from 'next/navigation';
 
 export default async function Page({ params }: { params: { slug: string } }) {
   const { data, url } = await getQuestBySlug(params.slug);
-
-  if (!data?.data?.[0]) {
+  if (!data) {
     return notFound();
   }
-
-  return <SuperfestPage quest={data?.data?.[0]} url={url} />;
+  return <SuperfestPage quest={data} url={url} />;
 }

src/app/[lng]/zap/[slug]/page.tsx

@@ -0,0 +1,75 @@
+import { type Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { getQuestBySlug } from 'src/app/lib/getQuestBySlug';
+import { siteName } from 'src/app/lib/metadata';
+import ZapPage from 'src/app/ui/zap/ZapPage';
+import { zapMarkets } from 'src/components/Zap/zapExampleData';
+import { getSiteUrl } from 'src/const/urls';
+import type { QuestAttributes } from 'src/types/loyaltyPass';
+import { sliceStrToXChar } from 'src/utils/splitStringToXChar';
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug: string };
+}): Promise<Metadata> {
+  try {
+    const quest = await getQuestBySlug(params.slug);
+
+    if (!quest || !quest.data) {
+      throw new Error();
+    }
+
+    const questData = quest.data.attributes as QuestAttributes;
+
+    const openGraph: Metadata['openGraph'] = {
+      title: `Jumper | Zaps - ${sliceStrToXChar(questData.Title, 45)}`,
+      description: `${sliceStrToXChar(questData.Information || 'Zap description', 60)}`,
+      siteName: siteName,
+      url: `${getSiteUrl()}/zap/${params.slug}`,
+      images: [
+        {
+          url: `${quest.url}${questData.Image.data.attributes?.url}`,
+          width: 900,
+          height: 450,
+          alt: 'banner image',
+        },
+      ],
+      type: 'article',
+    };
+
+    return {
+      title: `Jumper | Zaps - ${sliceStrToXChar(questData.Title, 45)}`,
+      description: questData.Subtitle,
+      alternates: {
+        canonical: `${getSiteUrl()}/zap/${params.slug}`,
+      },
+      twitter: openGraph,
+      openGraph,
+    };
+  } catch (err) {
+    return {
+      title: `Jumper | Zaps - ${sliceStrToXChar(params.slug.replaceAll('-', ' '), 45)}`,
+      description: 'Use Jumper to zap into DeFi protocols',
+    };
+  }
+}
+
+export default async function Page({ params }: { params: { slug: string } }) {
+  const { data } = await getQuestBySlug(params.slug, 'ExtendedQuest');
+
+  if (!data) {
+    return notFound();
+  }
+
+  const questData = data;
+
+  if (questData) {
+    const protocolDetails = zapMarkets.filter(
+      (market) => market.slug === questData.attributes.Slug,
+    );
+    questData.protocolInfos = protocolDetails[0];
+  }
+
+  return <ZapPage market={questData} />;
+}

src/app/[lng]/zap/layout.tsx

@@ -0,0 +1,18 @@
+import type { Metadata } from 'next';
+import type { PropsWithChildren } from 'react';
+import { Layout } from 'src/Layout';
+import { WalletProviderZap } from 'src/providers/WalletProvider/ZapWalletProvider';
+
+export const metadata: Metadata = {
+  other: {
+    'partner-theme': 'default',
+  },
+};
+
+export default async function MainLayout({ children }: PropsWithChildren) {
+  return (
+    <WalletProviderZap>
+      <Layout>{children}</Layout>
+    </WalletProviderZap>
+  );
+}

src/app/lib/getQuestBySlug.ts

@@ -1,6 +1,21 @@
 import { QuestStrapiApi } from '@/utils/strapi/StrapiApi';
+import type { Quest } from 'src/types/loyaltyPass';
+import type { ExtendedQuest } from 'src/types/questDetails';
 
-export async function getQuestBySlug(slug: string) {
+export async function getQuestBySlug(
+  slug: string,
+  type?: 'Quest',
+): Promise<{ data: Quest; url: string }>;
+
+export async function getQuestBySlug(
+  slug: string,
+  type?: 'ExtendedQuest',
+): Promise<{ data: ExtendedQuest; url: string }>;
+
+export async function getQuestBySlug(
+  slug: string,
+  type?: 'Quest' | 'ExtendedQuest',
+): Promise<{ data?: Quest | ExtendedQuest; url: string }> {
   const urlParams = new QuestStrapiApi().filterBySlug(slug);
   const apiBaseUrl = urlParams.getApiBaseUrl();
   const apiUrl = urlParams.getApiUrl();
@@ -18,5 +33,12 @@ export async function getQuestBySlug(slug: string) {
 
   const data = await res.json(); // Extract data from the response
 
-  return { data, url: apiBaseUrl }; // Return a plain object
+  if (!data || !Array.isArray(data.data) || data.data.length === 0) {
+    return { data: undefined, url: apiBaseUrl };
+  }
+  if (type === 'ExtendedQuest') {
+    return { data: data.data[0] as ExtendedQuest, url: apiBaseUrl };
+  } else {
+    return { data: data.data[0] as Quest, url: apiBaseUrl };
+  }
 }

src/app/ui/custom-widget/CustomWidgetPage.tsx

@@ -0,0 +1,18 @@
+'use client';
+import {
+  CustomWidget as CustomWidgetComponent,
+  ProjectData,
+} from '@/components/CustomWidget/CustomWidget';
+import { useAccount } from '@lifi/wallet-management';
+
+interface CustomWidgetPageProps {
+  projectData: ProjectData;
+}
+
+const CustomWidgetPage = ({ projectData }: CustomWidgetPageProps) => {
+  const { account } = useAccount();
+
+  return <CustomWidgetComponent account={account} projectData={projectData} />;
+};
+
+export default CustomWidgetPage;

src/app/ui/zap/ZapPage.tsx

@@ -0,0 +1,18 @@
+'use client';
+import { ZapAction } from 'src/components/Zap/ZapAction/ZapAction';
+import type { ExtendedQuest } from 'src/types/questDetails';
+
+interface ZapPageProps {
+  market?: ExtendedQuest;
+}
+
+const ZapPage = ({ market }: ZapPageProps) => {
+  return (
+    <ZapAction
+      market={market}
+      detailInformation={market?.attributes.CustomInformation}
+    />
+  );
+};
+
+export default ZapPage;