From 850db40d5e439ca3ec996d63c9f70596e99394d1 Mon Sep 17 00:00:00 2001
From: martines3000 <domajnko.martin@gmail.com>
Date: Fri, 7 Jun 2024 11:16:35 +0200
Subject: [PATCH] feat: address identicons, deployment url handling

---
 packages/dapp/.env.example                    |   4 +
 packages/dapp/package.json                    |   1 +
 packages/dapp/public/endorse.png              | Bin 0 -> 9190 bytes
 packages/dapp/src/app/api/og/route.tsx        |  27 +++----
 packages/dapp/src/app/layout.tsx              |  10 +--
 packages/dapp/src/app/opengraph-image.tsx     |  12 +--
 .../src/app/profile/[slug]/ShareDialog.tsx    |   4 +-
 .../dapp/src/app/profile/[slug]/UserBadge.tsx |   3 +-
 packages/dapp/src/app/profile/[slug]/page.tsx |  28 ++++---
 packages/dapp/src/app/profile/page.tsx        |   2 +-
 .../dapp/src/components/Address/index.tsx     |  31 +-------
 .../dapp/src/components/CopyIcon/index.tsx    |  36 +++++++++
 .../src/components/EndorseForm/FeeDisplay.tsx |   2 +-
 .../src/components/Endorsee/EndorseeBadge.tsx |  69 +-----------------
 .../src/components/ProfileAvatar/index.tsx    |  32 ++------
 packages/dapp/src/utils/appUrl.ts             |   7 ++
 packages/dapp/src/utils/index.ts              |   2 +
 pnpm-lock.yaml                                |   9 +++
 18 files changed, 116 insertions(+), 163 deletions(-)
 create mode 100644 packages/dapp/public/endorse.png
 create mode 100644 packages/dapp/src/components/CopyIcon/index.tsx
 create mode 100644 packages/dapp/src/utils/appUrl.ts

diff --git a/packages/dapp/.env.example b/packages/dapp/.env.example
index 281623c..0aa4dc5 100644
--- a/packages/dapp/.env.example
+++ b/packages/dapp/.env.example
@@ -18,3 +18,7 @@ NEXT_PUBLIC_SEPOLIA_ENDPOINT=
 # Airstack
 AIRSTACK_API_URL=
 AIRSTACK_API_KEY=
+
+# Next.js Vercel
+# Should be only set for local development, on Vercel it will be set automatically
+NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL=
diff --git a/packages/dapp/package.json b/packages/dapp/package.json
index 1ecdd65..88c490b 100644
--- a/packages/dapp/package.json
+++ b/packages/dapp/package.json
@@ -30,6 +30,7 @@
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.11",
     "@wagmi/core": "^2.10.5",
+    "blo": "^1.2.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
diff --git a/packages/dapp/public/endorse.png b/packages/dapp/public/endorse.png
new file mode 100644
index 0000000000000000000000000000000000000000..e0648d7af698134e3ef60bf03787582756856784
GIT binary patch
literal 9190
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
Zk!q+k!$LbB71_T7P*v1asFJe`{XaNyS=ayo

literal 0
HcmV?d00001

diff --git a/packages/dapp/src/app/api/og/route.tsx b/packages/dapp/src/app/api/og/route.tsx
index 547f62a..5f40dc6 100644
--- a/packages/dapp/src/app/api/og/route.tsx
+++ b/packages/dapp/src/app/api/og/route.tsx
@@ -7,6 +7,8 @@ import {
 } from '@/utils';
 import { ImageResponse } from 'next/og';
 import type { NextRequest } from 'next/server';
+import { blo } from 'blo';
+import { APP_URL } from '@/utils';
 
 export const runtime = 'edge';
 
@@ -25,7 +27,6 @@ export async function GET(req: NextRequest) {
 
     const _platform = validateOrGetDefaultPlatform(platform);
 
-    // FIXME: Add description
     const { address, avatar, description, displayName, error } =
       _platform === PlatformType.ethereum
         ? await getMinimalProfileFromAddress(account as `0x${string}`)
@@ -54,18 +55,12 @@ export async function GET(req: NextRequest) {
         <div tw="flex justify-center">
           <div tw="flex justify-center w-full flex-col p-12 md:flex-row md:items-center">
             <div tw="pl-8 flex flex-3 flex-col">
-              {avatar ? (
-                <img
-                  tw="rounded-full"
-                  alt="Profile avatar"
-                  width={160}
-                  src={avatar}
-                />
-              ) : (
-                <div tw="w-[160px] h-[160px] flex items-center justify-center text-7xl font-semibold bg-blue-200 text-primary-800 rounded-full">
-                  {/* TODO */}A
-                </div>
-              )}
+              <img
+                tw="rounded-full"
+                alt="Profile avatar"
+                width={160}
+                src={avatar ?? blo(address, 160)}
+              />
               <h2
                 tw="text-6xl"
                 style={{
@@ -78,11 +73,7 @@ export async function GET(req: NextRequest) {
               {description && <div tw="flex text-2xl">{description}</div>}{' '}
             </div>
             <div tw="flex flex-2 flex-col items-center justify-end">
-              <img
-                alt="EES Logo"
-                width={256}
-                src="https://i.imgur.com/QpxIqHT.png" //FIXME: Replace with deployed URL and fetch from PUBLIC folder
-              />
+              <img alt="EES Logo" width={256} src={`${APP_URL}/endorse.png`} />
             </div>
           </div>
         </div>
diff --git a/packages/dapp/src/app/layout.tsx b/packages/dapp/src/app/layout.tsx
index 6d30841..5bb3749 100644
--- a/packages/dapp/src/app/layout.tsx
+++ b/packages/dapp/src/app/layout.tsx
@@ -16,23 +16,23 @@ const inter = Inter({ subsets: ['latin'] });
 export const metadata: Metadata = {
   metadataBase: new URL('https://ees-eosin.vercel.app'),
   title: 'Endorse - Ethereum Endorsement Service',
-  description: '', // FIXME: Add description
+  description: 'The next generation Web3 social layer.',
   robots: {
     // FIXME: Update for production release
     index: false,
     follow: false,
   },
   openGraph: {
-    description: 'TODO', // FIXME: Add description
+    description: 'The next generation Web3 social layer.',
     siteName: 'Endorse.fun',
-    title: 'Endorse - Ethereum Endorsement Service', // FIXME: Add description
+    title: 'Endorse - Ethereum Endorsement Service',
     type: 'article',
     url: '/',
   },
   twitter: {
     card: 'summary_large_image',
-    title: 'Endorse - Ethereum Endorsement Service', // FIXME: Add description
-    description: 'TODO', // FIXME: Add description
+    title: 'Endorse - Ethereum Endorsement Service',
+    description: 'The next generation Web3 social layer.',
   },
 };
 
diff --git a/packages/dapp/src/app/opengraph-image.tsx b/packages/dapp/src/app/opengraph-image.tsx
index 2ca6196..4a74734 100644
--- a/packages/dapp/src/app/opengraph-image.tsx
+++ b/packages/dapp/src/app/opengraph-image.tsx
@@ -1,6 +1,7 @@
+import { APP_URL } from '@/utils';
 import { ImageResponse } from 'next/og';
 
-export const runtime = 'nodejs'; // TODO: Test both nodejs and edge
+export const runtime = 'nodejs';
 export const alt = 'Check out my profile on Endorse.fun!';
 export const size = {
   width: 1200,
@@ -44,11 +45,12 @@ export default async function Image() {
           </div>
           <div tw="h-[256px] w-[2px] bg-gray-600 mx-8" />
           <div tw="flex flex-2 flex-col items-center justify-center">
-            <img
-              alt="EES Logo"
+            {/* FIXME: Use in next commit */}
+            {/* <img
+              alt="EES Logo with text"
               width={256}
-              src="https://i.imgur.com/QpxIqHT.png" //FIXME: Replace with deployed URL and fetch from PUBLIC folder
-            />
+              src={`${APP_URL}/endorse.png`}
+            /> */}
           </div>
         </div>
       </div>
diff --git a/packages/dapp/src/app/profile/[slug]/ShareDialog.tsx b/packages/dapp/src/app/profile/[slug]/ShareDialog.tsx
index abd0f28..c70d952 100644
--- a/packages/dapp/src/app/profile/[slug]/ShareDialog.tsx
+++ b/packages/dapp/src/app/profile/[slug]/ShareDialog.tsx
@@ -19,12 +19,14 @@ import { MemoizedImage } from '@/components/MemoizedImage';
 
 type ShareDialogProps = {
   avatar: string | null;
+  address: `0x${string}`;
   shareLink: string;
   displayName: string;
 };
 
 export function ShareDialog({
   avatar,
+  address,
   shareLink,
   displayName,
 }: ShareDialogProps) {
@@ -49,7 +51,7 @@ export function ShareDialog({
         </DialogHeader>
 
         <Card className="flex gap-x-2 p-4 items-center">
-          <ProfileAvatar avatar={avatar} size="2xl" />
+          <ProfileAvatar avatar={avatar} address={address} size="2xl" />
           <div className="text-3xl font-semibold">{displayName}</div>
         </Card>
 
diff --git a/packages/dapp/src/app/profile/[slug]/UserBadge.tsx b/packages/dapp/src/app/profile/[slug]/UserBadge.tsx
index 6fde70f..7341f49 100644
--- a/packages/dapp/src/app/profile/[slug]/UserBadge.tsx
+++ b/packages/dapp/src/app/profile/[slug]/UserBadge.tsx
@@ -1,6 +1,5 @@
 import { Card } from '@/components/ui/card';
 import { ProfileAvatar } from '@/components/ProfileAvatar';
-
 import { getMinimalProfileFromAddress } from '@/lib/airstack/getMinimalProfileFromAddress';
 import { formatAddress } from '@/utils';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -29,7 +28,7 @@ export const UserBadge = async ({
     <div className="flex justify-center items-center">
       <div className="w-[128px] h-[120px] relative">
         <div className="w-full flex justify-center">
-          <ProfileAvatar avatar={data.avatar} size="3xl" />
+          <ProfileAvatar avatar={data.avatar} address={address} size="3xl" />
         </div>
         <Card className="absolute h-18 text-sm w-full bottom-[-16px] p-2 hover:bg-gray-50 animated-transition overflow-hidden text-nowrap">
           <div className="w-full flex flex-col justify-center items-center font-medium">
diff --git a/packages/dapp/src/app/profile/[slug]/page.tsx b/packages/dapp/src/app/profile/[slug]/page.tsx
index ebaba4e..b2a818f 100644
--- a/packages/dapp/src/app/profile/[slug]/page.tsx
+++ b/packages/dapp/src/app/profile/[slug]/page.tsx
@@ -1,16 +1,21 @@
+import Link from 'next/link';
+import type { Metadata } from 'next';
 import { Address } from '@/components/Address';
 import { Container } from '@/components/Container';
-import { getAvatarForPlatform, getProfileInfo } from '@/lib/airstack';
-import { getBasicPlatformProfileInfo } from '@/lib/airstack/getBasicPlatformProfileInfo';
-import { formatAddress } from '@/utils';
-import { validateOrGetDefaultPlatform } from '@/utils/platform';
+import {
+  getAvatarForPlatform,
+  getProfileInfo,
+  getBasicPlatformProfileInfo,
+} from '@/lib/airstack';
+import { APP_URL, formatAddress } from '@/utils';
+import {
+  validateOrGetDefaultPlatform,
+  validateOrGetDefaultNetwork,
+} from '@/utils';
 import { Badges } from './Badges';
-import Link from 'next/link';
 import { ShareDialog } from './ShareDialog';
 import { ProfileAvatar } from '@/components/ProfileAvatar';
 import { Feed } from './Feed';
-import { validateOrGetDefaultNetwork } from '@/utils/validateOrGetDefaultNetwork';
-import type { Metadata } from 'next';
 
 type PageProps = {
   params: { slug: string };
@@ -34,7 +39,7 @@ export default async function Page({
       <div className="flex max-lg:flex-col w-full gap-4">
         <div className="lg:w-[30%] min-w-[300px] w-full">
           <div className="flex flex-col gap-y-2 text-center items-center">
-            <ProfileAvatar avatar={avatar} size="5xl" />
+            <ProfileAvatar avatar={avatar} address={mainAddress} size="5xl" />
             <div className="text-3xl font-semibold">
               {basicProfileInfo.name ?? formatAddress(mainAddress)}
             </div>
@@ -42,9 +47,8 @@ export default async function Page({
               <Address address={mainAddress} />
               <ShareDialog
                 avatar={avatar}
-                shareLink={
-                  'http://localhost:3000/profile/pseudobun.eth?platform=ens'
-                }
+                address={mainAddress}
+                shareLink={`${APP_URL}/profile/${slug}?platform=${_platform}`}
                 displayName={
                   basicProfileInfo.name ?? formatAddress(mainAddress)
                 }
@@ -85,7 +89,7 @@ export async function generateMetadata({
     description: 'Check out my profile on Endorse.fun!',
     openGraph: {
       siteName: 'Endorse.fun',
-      description: '', // FIXME: Add description
+      description: 'The next generation Web3 social layer.',
       images: [
         {
           url: `/api/og?account=${slug}&platform=${searchParams.platform}`,
diff --git a/packages/dapp/src/app/profile/page.tsx b/packages/dapp/src/app/profile/page.tsx
index 93a8079..2d573a5 100644
--- a/packages/dapp/src/app/profile/page.tsx
+++ b/packages/dapp/src/app/profile/page.tsx
@@ -3,7 +3,7 @@ import type { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'Profile',
-  description: '', // TODO: Add description
+  description: 'Explore any address, ENS domain or social profile.',
 };
 
 export default function Page() {
diff --git a/packages/dapp/src/components/Address/index.tsx b/packages/dapp/src/components/Address/index.tsx
index 360cfc7..76fef49 100644
--- a/packages/dapp/src/components/Address/index.tsx
+++ b/packages/dapp/src/components/Address/index.tsx
@@ -1,42 +1,15 @@
-'use client';
-
-import { cn } from '@/lib/utils';
 import { formatAddress } from '@/utils';
-import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
-import { Check } from 'lucide-react';
-import { useState } from 'react';
+import { CopyIcon } from '@/components/CopyIcon';
 
 export const Address = ({ address }: { address: string }) => {
-  const [isCopied, setIsCopied] = useState(false);
-
   const formattedAddress = formatAddress(address);
 
-  const handleCopy = () => {
-    setIsCopied(true);
-    navigator.clipboard.writeText(address);
-    setTimeout(() => {
-      setIsCopied(false);
-    }, 1000);
-  };
-
   return (
     <div className="flex items-center gap-x-1">
       <div className="flex-1 flex items-center justify-end">
         <div className="font-semibold bg-slate-200 px-4 flex items-center py-1 rounded-full gap-x-1">
           {formattedAddress}
-          <DocumentDuplicateIcon
-            className={cn(
-              'w-4 h-4 cursor-pointer hover:text-primary-400',
-              isCopied && 'hidden'
-            )}
-            onMouseDown={handleCopy}
-          />
-          <Check
-            className={cn(
-              'w-4 h-4 cursor-pointer hover:text-primary-400',
-              !isCopied && 'hidden'
-            )}
-          />
+          <CopyIcon value={address} />
         </div>
       </div>
     </div>
diff --git a/packages/dapp/src/components/CopyIcon/index.tsx b/packages/dapp/src/components/CopyIcon/index.tsx
new file mode 100644
index 0000000..ea46ed0
--- /dev/null
+++ b/packages/dapp/src/components/CopyIcon/index.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
+import { Check } from 'lucide-react';
+import { useState } from 'react';
+
+export const CopyIcon = ({ value }: { value: string }) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopy = () => {
+    setIsCopied(true);
+    navigator.clipboard.writeText(value);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 1000);
+  };
+
+  return (
+    <>
+      <DocumentDuplicateIcon
+        className={cn(
+          'w-4 h-4 cursor-pointer hover:text-primary-400',
+          isCopied && 'hidden'
+        )}
+        onMouseDown={handleCopy}
+      />
+      <Check
+        className={cn(
+          'w-4 h-4 cursor-pointer hover:text-primary-400',
+          !isCopied && 'hidden'
+        )}
+      />
+    </>
+  );
+};
diff --git a/packages/dapp/src/components/EndorseForm/FeeDisplay.tsx b/packages/dapp/src/components/EndorseForm/FeeDisplay.tsx
index c702799..ce53236 100644
--- a/packages/dapp/src/components/EndorseForm/FeeDisplay.tsx
+++ b/packages/dapp/src/components/EndorseForm/FeeDisplay.tsx
@@ -45,7 +45,7 @@ export const FeeDisplay = ({
     data: endorsementPrice,
     isPending: isEndorsementPricePending,
     isError: isEndorsementPriceError,
-  } = useEndorsmentPrice(chainId ?? DEFAULT_CHAIN_ID); // FIXME: Replace with proper chainId
+  } = useEndorsmentPrice(chainId ?? DEFAULT_CHAIN_ID);
 
   const {
     data: feesPerGas,
diff --git a/packages/dapp/src/components/Endorsee/EndorseeBadge.tsx b/packages/dapp/src/components/Endorsee/EndorseeBadge.tsx
index 2ce9ef3..2f645d1 100644
--- a/packages/dapp/src/components/Endorsee/EndorseeBadge.tsx
+++ b/packages/dapp/src/components/Endorsee/EndorseeBadge.tsx
@@ -1,15 +1,9 @@
-'use client';
-
-import { useMemo, useState } from 'react';
-
-import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
 import { PLATFORM_DATA, PlatformType } from '@/utils/platform';
 import { cn } from '@/lib/utils';
-import { Skeleton } from '@/components/ui/skeleton';
 import { formatAddress } from '@/utils';
-import { Check } from 'lucide-react';
-import { MemoizedImage } from '@/components/MemoizedImage';
 import { MemoizedSVG } from '@/components/MemoizedSVG';
+import { ProfileAvatar } from '@/components/ProfileAvatar';
+import { CopyIcon } from '@/components/CopyIcon';
 
 type EndorseeBadgeProps = {
   type: PlatformType;
@@ -24,49 +18,6 @@ export const EndorseeBadge = ({
   handle,
   address,
 }: EndorseeBadgeProps) => {
-  // Local state
-  const [avatarLoading, setAvatarLoading] = useState(true);
-  const [isCopied, setIsCopied] = useState(false);
-
-  // Hooks
-  const Avatar = useMemo(() => {
-    if (!avatar) {
-      return (
-        <div className="h-[80px] w-[80px] flex items-center justify-center text-3xl font-semibold bg-primary-200 text-primary-800 rounded-full">
-          {/* FIXME: First leter of handle if it exists */}TODO
-        </div>
-      );
-    }
-
-    return (
-      <div className="relative h-[80px] w-[80px]">
-        <MemoizedImage
-          className={cn('absolute rounded-full')}
-          src={avatar}
-          alt="Avatar"
-          width={80}
-          height={80}
-          onLoad={() => setAvatarLoading(false)}
-        />
-        <Skeleton
-          className={cn(
-            'absolute h-[80px] w-[80px] rounded-full bg-primary-200',
-            !avatarLoading && 'hidden'
-          )}
-        />
-      </div>
-    );
-  }, [avatar, avatarLoading, handle]);
-
-  // Functions
-  const handleCopy = () => {
-    setIsCopied(true);
-    navigator.clipboard.writeText(address);
-    setTimeout(() => {
-      setIsCopied(false);
-    }, 1000);
-  };
-
   switch (type) {
     case PlatformType.ens:
     case PlatformType.lens:
@@ -75,7 +26,7 @@ export const EndorseeBadge = ({
       return (
         <>
           <div className="relative sm:mt-3">
-            {Avatar}
+            <ProfileAvatar avatar={avatar} address={address} size="2xl" />
             <div className={'absolute -bottom-2 -right-2'}>
               <MemoizedSVG
                 fill={PLATFORM_DATA[type].color as string}
@@ -98,19 +49,7 @@ export const EndorseeBadge = ({
             </div>
             <div className="flex items-center text-sm sm:text-md text-gray-600 font-normal max-sm:justify-center gap-x-1">
               {formatAddress(address)}
-              <DocumentDuplicateIcon
-                className={cn(
-                  'w-4 h-4 cursor-pointer hover:text-primary-400',
-                  isCopied && 'hidden'
-                )}
-                onMouseDown={handleCopy}
-              />
-              <Check
-                className={cn(
-                  'w-4 h-4 cursor-pointer hover:text-primary-400',
-                  !isCopied && 'hidden'
-                )}
-              />
+              <CopyIcon value={address} />
             </div>
           </div>
         </>
diff --git a/packages/dapp/src/components/ProfileAvatar/index.tsx b/packages/dapp/src/components/ProfileAvatar/index.tsx
index 01aecba..59f8028 100644
--- a/packages/dapp/src/components/ProfileAvatar/index.tsx
+++ b/packages/dapp/src/components/ProfileAvatar/index.tsx
@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils';
 import { useState } from 'react';
 import { Skeleton } from '@/components/ui/skeleton';
 import { MemoizedImage } from '@/components/MemoizedImage';
+import { blo } from 'blo';
 
 type AvatarSize =
   | 'xs'
@@ -19,6 +20,7 @@ type AvatarSize =
 
 type ProfileAvatarProps = {
   avatar: string | null;
+  address: `0x${string}`;
   size?: AvatarSize;
 };
 
@@ -35,31 +37,13 @@ const AVATAR_SIZES = {
   '6xl': 192,
 };
 
-export const ProfileAvatar = ({ avatar, size = 'md' }: ProfileAvatarProps) => {
+export const ProfileAvatar = ({
+  avatar,
+  address,
+  size = 'md',
+}: ProfileAvatarProps) => {
   const [isLoading, setIsLoading] = useState(true);
 
-  if (!avatar) {
-    return (
-      <div
-        className={cn(
-          'flex items-center justify-center text-7xl font-semibold bg-primary-200 text-primary-800 rounded-full',
-          size === 'xs' && 'w-[14px] h-[14px]',
-          size === 'sm' && 'w-[24px] h-[24px]',
-          size === 'md' && 'w-[36px] h-[36px]',
-          size === 'lg' && 'w-[48px] h-[48px]',
-          size === 'xl' && 'w-[64px] h-[64px]',
-          size === '2xl' && 'w-[80px] h-[80px]',
-          size === '3xl' && 'w-[96px] h-[96px]',
-          size === '4xl' && 'w-[128px] h-[128px]',
-          size === '5xl' && 'w-[160px] h-[160px]',
-          size === '6xl' && 'w-[192px] h-[192px]'
-        )}
-      >
-        V
-      </div>
-    );
-  }
-
   return (
     <div
       className={cn(
@@ -78,7 +62,7 @@ export const ProfileAvatar = ({ avatar, size = 'md' }: ProfileAvatarProps) => {
     >
       <MemoizedImage
         className={cn('absolute rounded-full')}
-        src={avatar}
+        src={avatar ?? blo(address, AVATAR_SIZES[size])}
         alt="Profile avatar"
         width={AVATAR_SIZES[size]}
         height={AVATAR_SIZES[size]}
diff --git a/packages/dapp/src/utils/appUrl.ts b/packages/dapp/src/utils/appUrl.ts
new file mode 100644
index 0000000..346d59d
--- /dev/null
+++ b/packages/dapp/src/utils/appUrl.ts
@@ -0,0 +1,7 @@
+// TODO[Martin]: Verify this sets the staging/dev URL to staging.endorse.fun
+export const APP_URL = !process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL
+  ? 'http://localhost:3000'
+  : process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL.startsWith('https') ||
+      process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL.startsWith('http')
+    ? process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL
+    : `https://${process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL}`;
diff --git a/packages/dapp/src/utils/index.ts b/packages/dapp/src/utils/index.ts
index 2f03d7f..308b065 100644
--- a/packages/dapp/src/utils/index.ts
+++ b/packages/dapp/src/utils/index.ts
@@ -2,3 +2,5 @@ export * from './formatAddress';
 export * from './platform';
 export * from './appEnv';
 export * from './calculateNetworkCost';
+export * from './appUrl';
+export * from './validateOrGetDefaultNetwork';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a0ff6a8..ac96d80 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -144,6 +144,9 @@ importers:
       '@wagmi/core':
         specifier: ^2.10.5
         version: 2.10.5(@tanstack/query-core@5.40.0)(@types/react@18.3.3)(bufferutil@4.0.8)(immer@10.0.2)(react@19.0.0-rc.0)(typescript@5.4.5)(utf-8-validate@6.0.4)(viem@2.13.2(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@6.0.4))
+      blo:
+        specifier: ^1.2.0
+        version: 1.2.0
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
@@ -5139,6 +5142,10 @@ packages:
   blakejs@1.2.1:
     resolution: {integrity: sha512-QXUSXI3QVc/gJME0dBpXrag1kbzOqCjCX8/b54ntNyW6sjtoqxqRk3LTmXzaJoh71zMsDCjM+47jS7XiwN/+fQ==}
 
+  blo@1.2.0:
+    resolution: {integrity: sha512-bZES7RzJ14B4WBT3JuOHSOAvCBmUhqznrojQ8xRjN1Fx9X9N7R+rygOFS3k4wXel2nFg4lwzL3luAYzObaDLng==}
+    engines: {node: '>=16'}
+
   blob-to-it@1.0.4:
     resolution: {integrity: sha512-iCmk0W4NdbrWgRRuxOriU8aM5ijeVLI61Zulsmg/lUHNr7pYjoj+U77opLefNagevtrrbMt3JQ5Qip7ar178kA==}
 
@@ -18392,6 +18399,8 @@ snapshots:
 
   blakejs@1.2.1: {}
 
+  blo@1.2.0: {}
+
   blob-to-it@1.0.4:
     dependencies:
       browser-readablestream-to-it: 1.0.3