feat: add initial work for Fairside integration

.example.env

@@ -42,3 +42,6 @@ NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=XXX
 
 # Add a Reservoir API key for NFT price information
 RESERVOIR_API_KEY=XXX
+
+#
+NEXT_PUBLIC_FAIRSIDE_API_KEY=zrvPR6NlCgtFRljj89db

app/[locale]/address/[addressOrName]/coverage/page.tsx

@@ -0,0 +1,21 @@
+import CoverageDashboard from 'components/coverage/CoverageDashboard';
+import type { NextPage } from 'next';
+import { unstable_setRequestLocale } from 'next-intl/server';
+
+// Re-use metadata generation from the address page
+export { generateMetadata } from '../page';
+
+interface Props {
+  params: {
+    locale: string;
+    addressOrName: string;
+  };
+}
+
+const AddressSignaturesPage: NextPage<Props> = ({ params }) => {
+  unstable_setRequestLocale(params.locale);
+
+  return <CoverageDashboard isActive={true} coverageAmount={100} />;
+};
+
+export default AddressSignaturesPage;

components/address/navigation/AddressNavigation.tsx

@@ -10,12 +10,13 @@ const AddressNavigation = () => {
 
   const basePath = `/address/${addressOrName}`;
   const signaturesPath = `${basePath}/signatures`;
-
+  const coveragePath = `${basePath}/coverage`;
   return (
     <div className="flex overflow-x-scroll scrollbar-hide overflow-y-hidden w-full justify-center sm:justify-start">
       <nav className="flex gap-4">
         <AddressNavigationTab name={t('address.navigation.allowances')} href={basePath} />
         <AddressNavigationTab name={t('address.navigation.signatures')} href={signaturesPath} />
+        <AddressNavigationTab name={t('address.navigation.coverage')} href={coveragePath} />
       </nav>
     </div>
   );

components/coverage/CoverageDashboard.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { Env, FsdSDK } from '@fairside-foundation/sdk';
+import { FAIRSIDE_API_KEY } from 'lib/constants';
+import { useAddressPageContext } from 'lib/hooks/page-context/AddressPageContext';
+import { useMounted } from 'lib/hooks/useMounted';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import CoverageDetailsCard from './CoverageDetailsCard';
+import CoverageInfo from './CoverageInfo';
+import MembershipCard from './MembershipCard';
+import WalletDetails from './WalletDetails';
+
+interface Props {
+  isActive: boolean;
+  coverageAmount?: number | null;
+}
+
+interface MembershipInfo {
+  statusCode: number;
+  hasCover: boolean;
+  isActive: boolean;
+  validFrom: string | null;
+  validUntil: string | null;
+  coverAmount: number | null;
+  activeClaims: string[];
+}
+
+const CoverageDashboard = ({ isActive = false, coverageAmount = null }: Props) => {
+  const isMounted = useMounted();
+  const { address } = useAddressPageContext();
+  const [token, setToken] = useState<string | null>(null);
+  const t = useTranslations();
+
+  const { fsdAPI, fsdContract, fsdConfig } = FsdSDK({
+    apiKey: FAIRSIDE_API_KEY ?? '',
+    env: Env.TestNet,
+  });
+  const [membershipInfo, setMembershipInfo] = useState<MembershipInfo | null>(null);
+  useEffect(() => {
+    async function fetchMembershipInfo() {
+      const results = await fsdAPI.getPublicMembershipInfo({ walletAddress: address });
+      setMembershipInfo(results);
+    }
+    fetchMembershipInfo();
+  }, [address, fsdAPI.getPublicMembershipInfo]);
+  return (
+    <div className="flex flex-col gap-8">
+      {isMounted && membershipInfo && (
+        <div className="flex flex-col md:flex-row justify-center gap-4">
+          <div className="flex flex-col gap-y-4 max-w-[400px] md:w-[400px]">
+            <MembershipCard isActive={membershipInfo.isActive} coverageAmount={membershipInfo.coverAmount} />
+            {membershipInfo.isActive && (
+              <WalletDetails
+                isAuthenticated={token != null}
+                fsdAPI={fsdAPI}
+                walletAddress={address}
+                token={token}
+                setToken={setToken}
+              />
+            )}
+          </div>
+          {!membershipInfo.isActive && <CoverageInfo />}
+          {membershipInfo.isActive && (
+            <div className="flex flex-col h-[500px] w-[75%]">
+              <CoverageDetailsCard
+                coverageAmount={membershipInfo.coverAmount}
+                validFrom={membershipInfo.validFrom}
+                validUntil={membershipInfo.validUntil}
+                claimsCount={membershipInfo.activeClaims.length}
+                onIncrease={() => window.open('https://test.fairside.dev/', '_blank')}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CoverageDashboard;

components/coverage/CoverageDetailsCard.tsx

@@ -0,0 +1,101 @@
+import { useTranslations } from 'next-intl';
+import { twMerge } from 'tailwind-merge';
+
+const formatDate = (dateString: string | null): string => {
+  if (!dateString) return '';
+
+  const date = new Date(dateString);
+  const month = date.toLocaleString('en-US', { month: 'short' });
+  const day = date.getDate();
+  const year = date.getFullYear();
+
+  // Add appropriate suffix to day
+  const suffix = ['th', 'st', 'nd', 'rd'][day % 10 > 3 ? 0 : day % 10] || 'th';
+  return `${month} ${day}${suffix}, ${year}`;
+};
+
+const getExpiryInfo = (validUntil: string | null): { text: string; isWarning: boolean; isDanger: boolean } => {
+  if (!validUntil) return { text: '', isWarning: false, isDanger: false };
+
+  const now = new Date();
+  const expiryDate = new Date(validUntil);
+  const daysUntilExpiry = Math.ceil((expiryDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
+
+  return {
+    text: `Expires in ${daysUntilExpiry} days!`,
+    isWarning: daysUntilExpiry <= 60,
+    isDanger: daysUntilExpiry <= 30,
+  };
+};
+
+interface CoverageDetailsProps {
+  coverageAmount: number | null;
+  validFrom: string | null;
+  validUntil: string | null;
+  claimsCount: number | null;
+  onIncrease?: () => void;
+  className?: string;
+}
+
+const CoverageDetailsCard = ({
+  coverageAmount,
+  validFrom,
+  validUntil,
+  claimsCount,
+  onIncrease,
+  className,
+}: CoverageDetailsProps) => {
+  const t = useTranslations('address.coverage');
+
+  const expiryInfo = getExpiryInfo(validUntil);
+  const expiryClass = twMerge(
+    'text-sm text-gray-500 dark:text-gray-400 italic',
+    expiryInfo.isWarning && 'text-yellow-500 dark:text-yellow-400',
+    expiryInfo.isDanger && 'text-red-500 dark:text-red-400',
+  );
+
+  return (
+    <div className={twMerge('border border-gray-400 dark:border-gray-700 rounded-lg overflow-hidden', className)}>
+      <div className="px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 font-medium">
+        {t('membership_card_title')}
+      </div>
+
+      <div className="px-4 py-3 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
+        <span className="text-gray-600 dark:text-gray-400">{t('amount')}:</span>
+        <div className="text-black dark:text-white font-medium flex items-center gap-2">
+          {coverageAmount} ETH
+          {onIncrease && (
+            <button
+              type="button"
+              onClick={onIncrease}
+              className="px-3 py-1 text-sm bg-white hover:bg-white/80 text-black rounded-full transition-colors border border-gray-800 hover:shadow-[0_8px_8px_rgba(0,0,0,0.25)] duration-300 ease-in-out"
+            >
+              Increase!
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="px-4 py-3 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
+        <span className="text-gray-600 dark:text-gray-400">Timeframe:</span>
+        <div className="text-right">
+          <div className="text-black dark:text-white font-medium flex items-center gap-2">
+            {`${formatDate(validFrom)} - ${formatDate(validUntil)}`}
+          </div>
+          <div className={expiryClass}>{expiryInfo.text}</div>
+        </div>
+      </div>
+
+      <div className="px-4 py-3 flex justify-between items-center border-b-0 border-gray-200 dark:border-gray-700">
+        <span className="text-gray-600 dark:text-gray-400">{t('claims')}:</span>
+        <div className="text-black dark:text-white font-medium flex items-center gap-2">
+          <span className="text-amber-600 dark:text-amber-500">
+            {claimsCount === 0 ? t('not_covered') : `${claimsCount} claims`}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CoverageDetailsCard;

components/coverage/CoverageInfo.tsx

@@ -0,0 +1,25 @@
+import Card from 'components/common/Card';
+import { useTranslations } from 'next-intl';
+
+const CoverageInfo = () => {
+  const t = useTranslations('address.coverage.info');
+
+  return (
+    <div className="flex flex-col md:flex-row gap-4 md:w-[75%]">
+      <Card className="">
+        <div className="flex flex-col gap-2">
+          <h3 className="font-bold text-lg">{t('what.title')}</h3>
+          <p>{t('what.description')}</p>
+        </div>
+      </Card>
+      <Card className="">
+        <div className="flex flex-col gap-2">
+          <h3 className="font-bold text-lg">{t('how.title')}</h3>
+          <p>{t('how.description')}</p>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default CoverageInfo;

components/coverage/MembershipCard.tsx

@@ -0,0 +1,34 @@
+import { useTranslations } from 'next-intl';
+import { twMerge } from 'tailwind-merge';
+
+interface Props {
+  isActive: boolean;
+  coverageAmount?: number | null;
+}
+
+const MembershipCard = ({ isActive, coverageAmount = null }: Props) => {
+  const t = useTranslations();
+
+  return (
+    <div className="flex flex-col gap-4 h-[150px] justify-between rounded-xl border border-gray-700 p-4 bg-gradient-to-t from-[#C5C5C5] to-white shadow-[0_8px_8px_rgba(0,0,0,0.25)] hover:scale-105 transition-all duration-300 ease-in-out duration-300ms">
+      <div className="font-bold text-xl">{t('address.coverage.membership_card_title')}</div>
+      <div className="flex flex-row gap-2 justify-between">
+        <div className="flex flex-col justify-between items-start">
+          <span className="text-sm font-bold">{t('address.coverage.status')}:</span>
+          <span className={twMerge('font-bold text-lg', isActive ? 'text-green-500' : 'text-red-500')}>
+            {isActive ? t('address.coverage.covered') : t('address.coverage.not_covered')}
+          </span>
+        </div>
+
+        {isActive && coverageAmount && (
+          <div className="flex flex-col justify-between items-start">
+            <span className="text-sm font-bold">{t('address.coverage.amount')}:</span>
+            <span className="font-lg font-bold">{coverageAmount} ETH</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MembershipCard;