feat: address identicons, deployment url handling

lutralabs · Jun 7, 2024 · 850db40 · 850db40
1 parent 1e6df71
commit 850db40
Show file tree

Hide file tree

Showing 18 changed files with 116 additions and 163 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,17 +39,16 @@ 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>
             <div className="flex gap-x-1 items-center text-md text-gray-600 font-medium">
               <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
@@ -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
@@ -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
@@ -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
@@ -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,