feat: collective review feedbacks + tracking (#200)

* fix: open links in another window * added thumbnail * fix: trpc type * show transfer time estimation in lounge * unframed website link * feat: added tracking
ArkProjectNFTs · Apr 24, 2024 · a0a2f07 · a0a2f07
1 parent 89eb1d8
commit a0a2f07
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 69 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -22,6 +22,7 @@
     "@trpc/next": "^10.26.0",
     "@trpc/react-query": "^10.26.0",
     "@trpc/server": "^10.26.0",
+    "@vercel/analytics": "^1.2.2",
     "alchemy-sdk": "^2.8.3",
     "clsx": "^2.1.0",
     "design-system": "workspace:*",

diff --git a/apps/web/public/medias/bridge_thumbnail.png b/apps/web/public/medias/bridge_thumbnail.png
diff --git a/apps/web/src/app/(routes)/layout.tsx b/apps/web/src/app/(routes)/layout.tsx
@@ -1,38 +1,33 @@
-"use client";
-
+import { Analytics } from "@vercel/analytics/react";
 import clsx from "clsx";
-// import { type Metadata } from "next";
+import { type Metadata } from "next";
 import localFont from "next/font/local";
+import { type PropsWithChildren } from "react";
 
 import "~/styles/globals.css";
-import { api } from "~/utils/api";
 
-import Header from "../_components/Header";
-import MobilePlaceholder from "../_components/MobilePlaceholder";
-import useCurrentChain from "../_hooks/useCurrentChain";
-import Providers from "./providers";
+import RootLayoutContainer from "./root-layout-container";
 
-// export const metadata: Metadata = {
-//   description: "",
-//   // openGraph: {
-//   //   description:
-//   //     "",
-//   //   images: [""],
-//   //   title: "ArkProject",
-//   //   type: "website",
-//   //   url: "https://www.arkproject.dev",
-//   // },
-//   title: "ArkProject Bridge",
-//   // twitter: {
-//   //   card: "summary_large_image",
-//   //   creator: "@ArkProjectNFTs",
-//   //   description:
-//   //     "",
-//   //   images: [""],
-//   //   site: "@ArkProjectNFTs",
-//   //   title: "ArkProject",
-//   // },
-// };
+export const metadata: Metadata = {
+  description: "Start moving your Everai on Starknet",
+  metadataBase: new URL("https://bridge.arkproject.dev"),
+  openGraph: {
+    description: "Start moving your Everai on Starknet",
+    images: ["https://bridge.arkproject.dev/medias/bridge_thumbnail.png"],
+    title: "ArkProject",
+    type: "website",
+    url: "https://bridge.arkproject.dev",
+  },
+  title: "ArkProject Bridge",
+  twitter: {
+    card: "summary_large_image",
+    creator: "@ArkProjectNFTs",
+    description: "Start moving your Everai on Starknet",
+    images: ["https://bridge.arkproject.dev/medias/bridge_thumbnail.png"],
+    site: "@ArkProjectNFTs",
+    title: "ArkProject",
+  },
+};
 
 const arkProjectFont = localFont({
   src: [
@@ -91,32 +86,18 @@ const styreneAFont = localFont({
   variable: "--font-styrene-a",
 });
 
-function RootLayout({ children }: { children: React.ReactNode }) {
-  const { targetChain } = useCurrentChain();
-
+function RootLayout({ children }: PropsWithChildren) {
   return (
     <html
       className={clsx(arkProjectFont.variable, styreneAFont.variable)}
       lang="en"
       // suppresHydrationWarning only applies one level deep, necessary because <html> is updated before page load by next-themes
       suppressHydrationWarning
     >
-      <body
-        className={clsx(
-          "bg-space-blue-50 text-galaxy-blue dark:bg-void-black dark:text-white",
-          targetChain
-        )}
-      >
-        <Providers>
-          <Header />
-          <div className="hidden min-h-screen md:block">{children}</div>
-        </Providers>
-        <div className="block h-screen md:hidden">
-          <MobilePlaceholder />
-        </div>
-      </body>
+      <RootLayoutContainer>{children}</RootLayoutContainer>
+      <Analytics />
     </html>
   );
 }
 
-export default api.withTRPC(RootLayout);
+export default RootLayout;
diff --git a/apps/web/src/app/(routes)/lounge/_components/CongratsModal.tsx b/apps/web/src/app/(routes)/lounge/_components/CongratsModal.tsx
@@ -220,7 +220,7 @@ export default function CongratsModal({ isFromTransfer }: CongratsModalProps) {
             </Typography>
             <a
               className="mt-6 flex h-12 items-center rounded-full bg-space-blue-source px-5 text-white transition-colors hover:bg-space-blue-500 dark:text-galaxy-blue"
-              href="https://twitter.com/intent/tweet?text=I've just transferred my @Everai(s) on @Starknet using the ArkProject Bridge! Let's come together, holders and hit a new milestone on Ark Quests! https://quests.arkproject.dev/"
+              href="https://twitter.com/intent/tweet?text=I've just transferred my @Everai(s) on @Starknet using the ArkProject Bridge! Let's come together and hit a new milestone on Ark Quests! https://bridge.arkproject.dev/"
               rel="noreferrer"
               target="_blank"
             >

diff --git a/apps/web/src/app/(routes)/lounge/_components/MarketplacesList.tsx b/apps/web/src/app/(routes)/lounge/_components/MarketplacesList.tsx
@@ -15,6 +15,8 @@ export default function MarketplacesList() {
         <a
           className="flex h-[5.625rem] items-center justify-between rounded-xl border border-asteroid-grey-100 bg-white px-6 transition-colors hover:bg-space-blue-100 dark:border-space-blue-800 dark:bg-space-blue-900 dark:hover:bg-space-blue-800"
           href="https://element.market/collections/everai-starknet"
+          rel="noreferrer"
+          target="_blank"
         >
           <Image
             alt="Element"
@@ -34,7 +36,9 @@ export default function MarketplacesList() {
         </a>
         <a
           className="flex h-[5.625rem] items-center justify-between rounded-xl border border-asteroid-grey-100 bg-white px-6 transition-colors hover:bg-space-blue-100 dark:border-space-blue-800 dark:bg-space-blue-900 dark:hover:bg-space-blue-800"
-          href="/"
+          href="https://unframed.co/"
+          rel="noreferrer"
+          target="_blank"
         >
           <Image
             alt="Unframed"
@@ -55,6 +59,8 @@ export default function MarketplacesList() {
         <a
           className="flex h-[5.625rem] items-center justify-between rounded-xl border border-asteroid-grey-100 bg-white px-6 transition-colors hover:bg-space-blue-100 dark:border-space-blue-800 dark:bg-space-blue-900 dark:hover:bg-space-blue-800"
           href="https://pyramid.market/collection/0x2acee8c430f62333cf0e0e7a94b2347b5513b4c25f699461dd8d7b23c072478"
+          rel="noreferrer"
+          target="_blank"
         >
           <Image
             alt="Pyramid"
@@ -75,6 +81,8 @@ export default function MarketplacesList() {
         {/* <a
           className="flex h-[5.625rem] items-center justify-between rounded-xl border border-asteroid-grey-100 bg-white px-6 transition-colors hover:bg-space-blue-100 dark:border-space-blue-800 dark:bg-space-blue-900 dark:hover:bg-space-blue-800"
           href="https://hyperflex.market/starknet/collection/0x02acee8c430f62333cf0e0e7a94b2347b5513b4c25f699461dd8d7b23c072478"
+          rel="noreferrer"
+          target="_blank"
         >
           <Image
             alt="Flex"
@@ -95,6 +103,8 @@ export default function MarketplacesList() {
         <a
           className="flex h-[5.625rem] items-center justify-between rounded-xl border border-asteroid-grey-100 bg-white px-6 transition-colors hover:bg-space-blue-100 dark:border-space-blue-800 dark:bg-space-blue-900 dark:hover:bg-space-blue-800"
           href="https://ventory.gg/collection/0x02acee8c430f62333cf0e0e7a94b2347b5513b4c25f699461dd8d7b23c072478"
+          rel="noreferrer"
+          target="_blank"
         >
           <Image
             alt="Ventory"

diff --git a/apps/web/src/app/(routes)/lounge/_components/NftTransferItem.tsx b/apps/web/src/app/(routes)/lounge/_components/NftTransferItem.tsx
@@ -122,9 +122,26 @@ export default function NftTransferItem({
           <NftTransferStatus className="ml-3" status={status} />
 
           <div className="ml-2 flex flex-col items-start gap-1">
-            <Typography variant="button_text_s">
-              {getDisplayedDate(arrivalTimestamp)}
-            </Typography>
+            {arrivalTimestamp !== undefined && (
+              <Typography variant="button_text_s">
+                {getDisplayedDate(arrivalTimestamp)}
+              </Typography>
+            )}
+            {status === "deposit_initiated_l1" ? (
+              <Typography
+                className="text-asteroid-grey-400"
+                variant="body_text_14"
+              >
+                Transfer can take few minutes
+              </Typography>
+            ) : status === "deposit_initiated_l2" ? (
+              <Typography
+                className="text-asteroid-grey-400"
+                variant="body_text_14"
+              >
+                Transfer can take up to 4 hours
+              </Typography>
+            ) : null}
             <div className="flex items-center gap-2">
               {arrivalChain === "Ethereum" ? (
                 <Image
@@ -169,7 +186,11 @@ export default function NftTransferItem({
                   </a>
                 ) : (
                   <>
-                    <a href={`https://voyager.online/tx/${txHash}`}>
+                    <a
+                      href={`https://voyager.online/tx/${txHash}`}
+                      rel="noreferrer"
+                      target="_blank"
+                    >
                       <Typography
                         className="underline"
                         component="p"
@@ -178,7 +199,11 @@ export default function NftTransferItem({
                         View on Voyager
                       </Typography>
                     </a>
-                    <a href={`https://starkscan.co/tx/${txHash}`}>
+                    <a
+                      href={`https://starkscan.co/tx/${txHash}`}
+                      rel="noreferrer"
+                      target="_blank"
+                    >
                       <Typography
                         className="underline"
                         component="p"

diff --git a/apps/web/src/app/(routes)/root-layout-container.tsx b/apps/web/src/app/(routes)/root-layout-container.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import clsx from "clsx";
+import React, { type PropsWithChildren } from "react";
+
+import { api } from "~/utils/api";
+
+import Header from "../_components/Header";
+import MobilePlaceholder from "../_components/MobilePlaceholder";
+import useCurrentChain from "../_hooks/useCurrentChain";
+import Providers from "./providers";
+
+function RootLayoutContainer({ children }: PropsWithChildren) {
+  const { targetChain } = useCurrentChain();
+
+  return (
+    <body
+      className={clsx(
+        "bg-space-blue-50 text-galaxy-blue dark:bg-void-black dark:text-white",
+        targetChain
+      )}
+    >
+      <Providers>
+        <Header />
+        <div className="hidden min-h-screen md:block">{children}</div>
+      </Providers>
+      <div className="block h-screen md:hidden">
+        <MobilePlaceholder />
+      </div>
+    </body>
+  );
+}
+
+const Component = api.withTRPC(
+  RootLayoutContainer
+) as React.FC<PropsWithChildren>;
+
+export default Component;
diff --git a/apps/web/src/utils/api.ts b/apps/web/src/utils/api.ts
@@ -1,3 +1,4 @@
+"use client";
 /**
  * This is the client-side entrypoint for your tRPC API. It is used to create the `api` object which
  * contains the Next.js App-wrapper, as well as your type-safe React Query hooks.

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml