Merge pull request #14 from storyprotocol/feat/magma-alpha

Add route for magma - `/view/[ipOrgId]/[ipAssetId]`
storyprotocol · Feb 1, 2024 · 1f8d928 · 1f8d928
2 parents 2fc0b6b + 5fd51df
commit 1f8d928
Show file tree

Hide file tree

Showing 62 changed files with 2,032 additions and 1,397 deletions.
diff --git a/.env.example b/.env.example
@@ -1 +1,22 @@
-NEXT_PUBLIC_WC_PROJECT_ID=
+NEXT_PUBLIC_API_BASE_URL =
+NEXT_PUBLIC_PROTOCOL_VERSION =
+NEXT_PUBLIC_CHAIN =
+NEXT_PUBLIC_EXTERNAL_CHAIN_EXPLORER_URL = 
+
+NEXT_PUBLIC_STORY_PROTOCOL_CONTRACT = 
+NEXT_PUBLIC_IP_ASSET_REGISTRY_CONTRACT = 
+NEXT_PUBLIC_IP_ORG_CONTROLLER_CONTRACT = 
+NEXT_PUBLIC_RELATIONSHIP_MODULE_CONTRACT = 
+NEXT_PUBLIC_REGISTRATION_MODULE_CONTRACT = 
+NEXT_PUBLIC_LICENSE_REGISTRY_CONTRACT = 
+NEXT_PUBLIC_MODULE_REGISTRY_CONTRACT = 
+NEXT_PUBLIC_LICENSE_MODULE_CONTRACT = 
+
+# TEST CONFIGs
+RPC_PROVIDER_URL = 
+WALLET_PRIVATE_KEY = 
+TEST_WALLET_ADDRESS = 
+
+NEXT_PUBLIC_WC_PROJECT_ID =
+NEXT_PUBLIC_ALCHEMY_ID = 
+ALCHEMY_ID = 
diff --git a/.gitignore b/.gitignore
@@ -26,7 +26,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
-.env
+.env*
 
 # vercel
 .vercel

diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v20.6.1
diff --git a/app/(creatorView)/layout.tsx b/app/(creatorView)/layout.tsx
@@ -0,0 +1,18 @@
+import '../globals.css';
+
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/...ipOrgId]/[ipAssetId]/AssetBreadcrumbs.tsx → ...ipOrgId]/[ipAssetId]/AssetBreadcrumbs.tsx b/...ipOrgId]/[ipAssetId]/AssetBreadcrumbs.tsx → ...ipOrgId]/[ipAssetId]/AssetBreadcrumbs.tsx
diff --git a/...[ipOrgId]/[ipAssetId]/AssetDetailCard.tsx → ...[ipOrgId]/[ipAssetId]/AssetDetailCard.tsx b/...[ipOrgId]/[ipAssetId]/AssetDetailCard.tsx → ...[ipOrgId]/[ipAssetId]/AssetDetailCard.tsx
@@ -67,7 +67,7 @@ export default async function AssetDetailCard({ ipAssetId }: { ipAssetId: string
             {/* <Link
           target="_blank"
           rel="noopener noreferrer"
-          href={`https://sepolia.etherscan.io/tx/${ipAsset.txHash}`}
+          href={`${process.env.NEXT_PUBLIC_EXTERNAL_CHAIN_EXPLORER_URL}/tx/${ipAsset.txHash}`}
           className="rounded-full bg-[#aeb4e8] px-4 py-2 text-white hover:bg-[#8888f5] focus:outline-none disabled:opacity-50 dark:bg-[#aeb4e8] dark:text-[#2C2B35] dark:hover:bg-[#8888f5] text-[13px] font-bold uppercase leading-[13px]"
         >
           Etherscan
@@ -77,7 +77,7 @@ export default async function AssetDetailCard({ ipAssetId }: { ipAssetId: string
             <Row label="TxHash">
               <span className="truncate">
                 <a
-                  href={`https://sepolia.etherscan.io/tx/${ipAsset.txHash}`}
+                  href={`${process.env.NEXT_PUBLIC_EXTERNAL_CHAIN_EXPLORER_URL}/tx/${ipAsset.txHash}`}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="flex font-mono items-center space-x-2 break-all text-indigo-400 underline dark:text-[#D0DBFF]"

diff --git a/...Id]/[ipAssetId]/AssetDisplayComponent.tsx → ...Id]/[ipAssetId]/AssetDisplayComponent.tsx b/...Id]/[ipAssetId]/AssetDisplayComponent.tsx → ...Id]/[ipAssetId]/AssetDisplayComponent.tsx
diff --git a/app/ipa/[ipOrgId]/[ipAssetId]/TimeSince.tsx → .../view/[ipOrgId]/[ipAssetId]/TimeSince.tsx b/app/ipa/[ipOrgId]/[ipAssetId]/TimeSince.tsx → .../view/[ipOrgId]/[ipAssetId]/TimeSince.tsx
diff --git a/app/(creatorView)/view/[ipOrgId]/[ipAssetId]/page.tsx b/app/(creatorView)/view/[ipOrgId]/[ipAssetId]/page.tsx
@@ -0,0 +1,111 @@
+import { Suspense } from 'react';
+
+import SkeletonTable from '@/components/Skeletons/SkeletonTable';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import TransactionTableWrapper from '@/components/views/Transactions/TransactionTableWrapper';
+
+import AssetDetailCard, { Fallback as FallbackDetailsCard } from './AssetDetailCard';
+import AssetBreadcrumbs, { Fallback as FallbackBreadcrumbs } from './AssetBreadcrumbs';
+import LicenseReadAccordion from '@/app/(main)/admin/LicenseReadAccordion';
+import AssetRelationshipTableWrapper from '@/components/views/Asset/AssetRelationshipTableWrapper';
+import IpOrgLicenseDataViewer from '@/components/views/Licenses';
+import CreateIpaBoundLicenseWriteAccordion from '@/app/(main)/admin/CreateIpaBoundLicenseWriteAccordion';
+import { CreateLicenseRequest } from '@story-protocol/core-sdk';
+import RelationshipWriteAccordion from '@/app/(main)/admin/RelationshipWriteAccordion';
+
+export const revalidate = 60;
+export const fetchCache = 'force-no-store';
+
+
+export default function AssetDetailPage({
+  params: { ipAssetId, ipOrgId },
+}: {
+  params: { ipAssetId: string; ipOrgId: string };
+}) {
+  const defaultIpAssetValues = {
+    ipAssetId,
+    ipOrgId,
+  };
+
+  const defaultRegisterRelationshipValues = {
+    ...defaultIpAssetValues,
+    relationshipType: '',
+    srcContract: process.env.IP_ASSET_REGISTRY_CONTRACT,
+    srcTokenId: ipAssetId,
+  };
+
+  const defaultCreateIpaBoundLicenseValues: CreateLicenseRequest = {
+    ...defaultIpAssetValues,
+    ipaId: ipAssetId,
+    parentLicenseId: '',
+    params: [],
+    preHookData: [],
+    postHookData: [],
+    txOptions: {
+      waitForTransaction: true,
+    },
+  };
+
+  return (
+    <div className="w-full px-4 md:px-8 max-w-[1600px] mx-auto">
+      <div className="flex flex-col items-left gap-6 my-6">
+        <div className="">
+          <div className='flex flex-row gap-4 items-center mb-4'>
+            <h1 className="text-xl md:text-4xl font-semibold leading-none">IP Asset Detail</h1>
+          </div>
+          <Suspense fallback={<FallbackBreadcrumbs />}>
+            <AssetBreadcrumbs ipAssetId={ipAssetId} ipOrgId={ipOrgId} />
+          </Suspense>
+        </div>
+
+        {/* <div className="grid grid-cols-12 gap-2"> */}
+        {/* <div className="flex h-52 md:h-72 xl:h-full col-span-12 xl:col-span-5 rounded-xl bg-indigo-100 overflow-hidden justify-center items-center">
+            <PuzzlePieceIcon className="w-20 h-20 text-indigo-500" />
+          </div> */}
+        {/* <div className="flex h-full  col-span-12 xl:col-span-7"> */}
+        <Suspense fallback={<FallbackDetailsCard />}>
+          <AssetDetailCard ipAssetId={ipAssetId} ipOrgId={ipOrgId} />
+        </Suspense>
+        {/* </div> */}
+        {/* </div> */}
+
+        <div className="grid grid-cols-12 gap-2">
+          <div className="flex col-span-12">
+            <Tabs defaultValue="tx" className="w-full">
+              <TabsList>
+                <TabsTrigger value="tx">TX</TabsTrigger>
+                <TabsTrigger value="licenses">Licenses</TabsTrigger>
+                <TabsTrigger value="relationships">Relationships</TabsTrigger>
+                <TabsTrigger value="actions">Actions</TabsTrigger>
+              </TabsList>
+              <TabsContent value="tx">
+                <Suspense fallback={<SkeletonTable />}>
+                  <TransactionTableWrapper ipOrgId={ipOrgId} ipAssetId={ipAssetId} />
+                </Suspense>
+              </TabsContent>
+              <TabsContent value="relationships">
+                <Suspense fallback={<SkeletonTable />}>
+                  <AssetRelationshipTableWrapper ipOrgId={ipOrgId} ipAssetId={ipAssetId} />
+                </Suspense>
+              </TabsContent>
+              <TabsContent value="licenses">
+                <Suspense fallback={<SkeletonTable />}>
+                  <IpOrgLicenseDataViewer ipAssetId={ipAssetId} />
+                </Suspense>
+              </TabsContent>
+              <TabsContent value="actions">
+                <Suspense fallback={<SkeletonTable />}>
+                  <div className="flex flex-col gap-4">
+                    <RelationshipWriteAccordion defaultValues={defaultRegisterRelationshipValues} />
+                    <LicenseReadAccordion defaultValues={defaultIpAssetValues} />
+                    <CreateIpaBoundLicenseWriteAccordion defaultValues={defaultCreateIpaBoundLicenseValues} />
+                  </div>
+                </Suspense>
+              </TabsContent>
+            </Tabs>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/admin/AccordionInputForm.tsx → app/(main)/admin/AccordionInputForm.tsx b/app/admin/AccordionInputForm.tsx → app/(main)/admin/AccordionInputForm.tsx
diff --git a/app/admin/CollectReadAccordion.tsx → app/(main)/admin/CollectReadAccordion.tsx b/app/admin/CollectReadAccordion.tsx → app/(main)/admin/CollectReadAccordion.tsx
diff --git a/...nfigureLicenseWriteAccordionInputForm.tsx → ...nfigureLicenseWriteAccordionInputForm.tsx b/...nfigureLicenseWriteAccordionInputForm.tsx → ...nfigureLicenseWriteAccordionInputForm.tsx
diff --git a/...n/CreateIpaBoundLicenseWriteAccordion.tsx → ...n/CreateIpaBoundLicenseWriteAccordion.tsx b/...n/CreateIpaBoundLicenseWriteAccordion.tsx → ...n/CreateIpaBoundLicenseWriteAccordion.tsx
diff --git a/app/admin/CreateLicenseNftWriteAccordion.tsx → .../admin/CreateLicenseNftWriteAccordion.tsx b/app/admin/CreateLicenseNftWriteAccordion.tsx → .../admin/CreateLicenseNftWriteAccordion.tsx
diff --git a/app/admin/HookReadAccordion.tsx → app/(main)/admin/HookReadAccordion.tsx b/app/admin/HookReadAccordion.tsx → app/(main)/admin/HookReadAccordion.tsx
diff --git a/app/admin/IPAssetReadAccordion.tsx → app/(main)/admin/IPAssetReadAccordion.tsx b/app/admin/IPAssetReadAccordion.tsx → app/(main)/admin/IPAssetReadAccordion.tsx
diff --git a/app/admin/IPAssetWriteAccordion.tsx → app/(main)/admin/IPAssetWriteAccordion.tsx b/app/admin/IPAssetWriteAccordion.tsx → app/(main)/admin/IPAssetWriteAccordion.tsx
diff --git a/app/admin/IPOrgReadAccordion.tsx → app/(main)/admin/IPOrgReadAccordion.tsx b/app/admin/IPOrgReadAccordion.tsx → app/(main)/admin/IPOrgReadAccordion.tsx
diff --git a/app/admin/IPOrgWriteAccordion.tsx → app/(main)/admin/IPOrgWriteAccordion.tsx b/app/admin/IPOrgWriteAccordion.tsx → app/(main)/admin/IPOrgWriteAccordion.tsx
diff --git a/app/admin/LicenseReadAccordion.tsx → app/(main)/admin/LicenseReadAccordion.tsx b/app/admin/LicenseReadAccordion.tsx → app/(main)/admin/LicenseReadAccordion.tsx
diff --git a/app/admin/LicenseWriteAccordionInputForm.tsx → .../admin/LicenseWriteAccordionInputForm.tsx b/app/admin/LicenseWriteAccordionInputForm.tsx → .../admin/LicenseWriteAccordionInputForm.tsx
diff --git a/app/admin/ModuleReadAccordion.tsx → app/(main)/admin/ModuleReadAccordion.tsx b/app/admin/ModuleReadAccordion.tsx → app/(main)/admin/ModuleReadAccordion.tsx
diff --git a/app/admin/RelationshipReadAccordion.tsx → ...main)/admin/RelationshipReadAccordion.tsx b/app/admin/RelationshipReadAccordion.tsx → ...main)/admin/RelationshipReadAccordion.tsx
diff --git a/app/admin/RelationshipTypeReadAccordion.tsx → ...)/admin/RelationshipTypeReadAccordion.tsx b/app/admin/RelationshipTypeReadAccordion.tsx → ...)/admin/RelationshipTypeReadAccordion.tsx
diff --git a/app/admin/RelationshipTypeWriteAccordion.tsx → .../admin/RelationshipTypeWriteAccordion.tsx b/app/admin/RelationshipTypeWriteAccordion.tsx → .../admin/RelationshipTypeWriteAccordion.tsx
diff --git a/app/admin/RelationshipWriteAccordion.tsx → ...ain)/admin/RelationshipWriteAccordion.tsx b/app/admin/RelationshipWriteAccordion.tsx → ...ain)/admin/RelationshipWriteAccordion.tsx
diff --git a/app/admin/TransactionReadAccordion.tsx → ...(main)/admin/TransactionReadAccordion.tsx b/app/admin/TransactionReadAccordion.tsx → ...(main)/admin/TransactionReadAccordion.tsx
diff --git a/app/admin/WriteAccordionInputForm.tsx → app/(main)/admin/WriteAccordionInputForm.tsx b/app/admin/WriteAccordionInputForm.tsx → app/(main)/admin/WriteAccordionInputForm.tsx
diff --git a/app/admin/page.tsx → app/(main)/admin/page.tsx b/app/admin/page.tsx → app/(main)/admin/page.tsx
diff --git a/app/context/StoryClientContext.tsx → app/(main)/context/StoryClientContext.tsx b/app/context/StoryClientContext.tsx → app/(main)/context/StoryClientContext.tsx
diff --git a/app/(main)/ipa/[ipOrgId]/[ipAssetId]/AssetBreadcrumbs.tsx b/app/(main)/ipa/[ipOrgId]/[ipAssetId]/AssetBreadcrumbs.tsx
@@ -0,0 +1,22 @@
+import storyClient from '@/lib/SP';
+import { Breadcrumbs } from '@/components/ui/breadcrumbs';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ChevronRight } from 'lucide-react';
+import { GetIpAssetRequest, GetIpAssetResponse, IPAsset } from '@story-protocol/core-sdk';
+
+export const Fallback = () => (
+  <div className="flex h-6 md:mb-2 items-center">
+    <Skeleton className="h-4 w-[100px] bg-gray-500" />
+    <ChevronRight className="inline-block w-4 h-4 mx-1 text-gray-500" />
+    <Skeleton className="h-4 w-[100px] bg-gray-500" />
+  </div>
+);
+
+export default async function AssetBreadcrumbs({ ipAssetId }: { ipAssetId: string; ipOrgId: string }) {
+  const getReq: GetIpAssetRequest = {
+    ipAssetId,
+  };
+  const getRes: GetIpAssetResponse = await storyClient.ipAsset.get(getReq);
+  const ipAsset: IPAsset = getRes.ipAsset;
+  return <Breadcrumbs crumbs={[{ url: '/assets', name: 'IP Assets' }, { name: ipAsset.name }]} className="md:mb-2" />;
+}
diff --git a/app/(main)/ipa/[ipOrgId]/[ipAssetId]/AssetDetailCard.tsx b/app/(main)/ipa/[ipOrgId]/[ipAssetId]/AssetDetailCard.tsx
@@ -0,0 +1,143 @@
+import React, { Suspense } from 'react';
+
+import storyClient from '@/lib/SP';
+import { cn } from '@/utils';
+import Icons from '@/components/ui/icons';
+import SuccessBadge from '@/components/badges/SuccessBadge';
+import { Skeleton } from '@/components/ui/skeleton';
+
+import TimeSince, { Fallback as TimeSinceFallback } from './TimeSince';
+import Link from 'next/link';
+import { GetIpAssetRequest, GetIpAssetResponse, IPAsset } from '@story-protocol/core-sdk';
+import AddressComponent from '@/components/snippets/AddressComponent';
+import AssetDisplayComponent from './AssetDisplayComponent';
+
+const Row = ({ label, children }: { label: string; children: React.ReactNode }) => {
+  return (
+    <div className="py-4 sm:grid sm:grid-cols-5 sm:gap-4">
+      <dt className="text-sm font-medium leading-6 text-gray-900 dark:text-gray-300">{label}</dt>
+      <dd className="relative w-full truncate mt-1 flex items-center space-x-2 text-sm leading-6 text-gray-700 dark:text-gray-200 sm:col-span-4 sm:mt-0">
+        {children}
+      </dd>
+    </div>
+  );
+};
+
+const FallbackRow = ({ label }: { label: string }) => {
+  return (
+    <div className="py-4 sm:grid sm:grid-cols-5 sm:gap-4">
+      {/* <Skeleton className="h-6 w-full" /> */}
+      <dt className="text-sm font-medium leading-6 text-gray-900 dark:text-gray-300">{label}</dt>
+      <Skeleton className="relative w-72 mt-1 flex space-x-2 h-6 sm:col-span-4 sm:mt-0" />
+    </div>
+  );
+};
+
+export const Fallback = () => (
+  <div className={cn('relative rounded-xl px-6 py-2 bg-[#FFFFFF] dark:bg-[#2C2B35] w-full')}>
+    <div className="flex items-center justify-between py-4">
+      <Skeleton className="w-[100px] h-8" />
+    </div>
+    <div className="border-t py-4 border-gray-200 dark:border-gray-900">
+      <FallbackRow label="TxHash" />
+      <FallbackRow label="Created At" />
+      <FallbackRow label="IPO ID" />
+      <FallbackRow label="IPA ID" />
+      <FallbackRow label="Posted By" />
+      <FallbackRow label="Status" />
+    </div>
+  </div>
+);
+
+export default async function AssetDetailCard({ ipAssetId }: { ipAssetId: string; ipOrgId: string }) {
+  const getReq: GetIpAssetRequest = {
+    ipAssetId,
+  };
+  const getRes: GetIpAssetResponse = await storyClient.ipAsset.get(getReq);
+  const ipAsset: IPAsset = getRes.ipAsset;
+
+  return (
+    <div className="grid grid-cols-12 gap-2">
+      <AssetDisplayComponent data={ipAsset} />
+      <div className="flex h-full  col-span-12 xl:col-span-7">
+        <div className={cn('relative rounded-xl px-6 py-2 bg-[#FFFFFF] dark:bg-[#2C2B35] w-full')}>
+          <div className="flex items-center justify-between py-4">
+            <h1 className="font-medium md:text-2xl">{ipAsset.name}</h1>
+          </div>
+          <div className="border-t py-4 border-gray-200 dark:border-gray-900">
+            <Row label="TxHash">
+              <span className="truncate">
+                <a
+                  href={`${process.env.NEXT_PUBLIC_EXTERNAL_CHAIN_EXPLORER_URL}/tx/${ipAsset.txHash}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex font-mono items-center space-x-2 break-all text-indigo-400 underline dark:text-[#D0DBFF]"
+                >
+                  <span className="shrink truncate">{ipAsset.txHash}</span>
+                  <Icons.externalLink className="h-4 w-4 shrink-0" />
+                </a>
+              </span>
+            </Row>
+
+            <Row label="Created At">
+              <Suspense fallback={<TimeSinceFallback />}>
+                <TimeSince txHash={ipAsset.txHash} />
+              </Suspense>
+            </Row>
+
+            <Row label="IP Org ID">
+              <Link href={`/ipo/${ipAsset.ipOrgId}`}>
+                <span className="font-mono truncate text-indigo-400 hover:underline">{ipAsset.ipOrgId}</span>
+              </Link>
+            </Row>
+
+            <Row label="IPA ID">
+              <span className="truncate font-mono text-gray-500">{ipAsset.id}</span>
+            </Row>
+
+            <Row label="IPA Type">
+              <span className="truncate font-mono text-gray-500">{JSON.stringify(ipAsset.type)}</span>
+            </Row>
+
+            <Row label="Content Hash">
+              <p className="font-mono text-gray-500">{ipAsset.contentHash}</p>
+            </Row>
+            {ipAsset.mediaUrl && (
+              <Row label="Media URL">
+                <Link
+                  href={ipAsset.mediaUrl}
+                  target="_blank"
+                  className="flex font-mono items-center space-x-2 break-all text-indigo-400 underline dark:text-[#D0DBFF]"
+                >
+                  <span>{ipAsset.mediaUrl}</span>
+                  <Icons.externalLink className="h-4 w-4 shrink-0" />
+                </Link>
+              </Row>
+            )}
+
+            {/* <Row label="Submitted"><></></Row> */}
+
+            <Row label="Posted By">
+              {/* <div className="flex items-center space-x-2 break-all">          
+            <img
+              src="https://cdn.stamp.fyi/avatar/eth:0x7941983a3e1001dc3bdde75a0c29b281760f0413?s=300"
+              alt={ipAsset.owner}
+              className="h-8 w-8 rounded-full"
+            />
+            <b className="shrink truncate">{truncateEthAddress(ipAsset.owner)}</b>
+            <button className="shrink-0">
+              <Icons.copy className="h-4 w-4 text-gray-500 dark:text-gray-400" />
+            </button>
+          </div> */}
+              <AddressComponent address={ipAsset.owner} />
+            </Row>
+
+            <Row label="Status">
+              <SuccessBadge>Verified</SuccessBadge>
+            </Row>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,7 +26,7 @@ yarn-error.log* @@
     # local env files
     .env*.local
-    .env
+    .env*
     # vercel
     .vercel
@@ Expand Down @@