feat: lens v2 (#51)

codegen.yml

@@ -1,4 +1,4 @@
-schema: https://staging-api-social-mumbai.lens.crtlkey.com
+schema: https://api-v2-mumbai.lens.dev
 documents: ['./src/graphql/queries/*.graphql', './src/graphql/fragments/*.graphql']
 
 hooks:

src/components/Network.tsx

@@ -1,23 +1,16 @@
 import { Listbox, Transition } from '@headlessui/react';
-import { BeakerIcon, ChevronUpDownIcon, CubeIcon, WrenchIcon } from '@heroicons/react/24/outline';
+import { ChevronUpDownIcon, CubeIcon, WrenchIcon } from '@heroicons/react/24/outline';
 import React, { Fragment } from 'react';
-import { useAccount } from 'wagmi';
 
-import { FEATURE_FLAGS } from '@/constants';
 import { useAppPersistStore } from '@/store/app';
-import getIsFeatureEnabled from '@/utils/getIsFeatureEnabled';
 
 export const allNetworks = [
   { name: 'Mainnet', id: 'mainnet', icon: <CubeIcon className="h-4 w-4" /> },
-  { name: 'Staging', id: 'staging', icon: <BeakerIcon className="h-4 w-4" /> },
   { name: 'Testnet', id: 'testnet', icon: <WrenchIcon className="h-4 w-4" /> }
 ];
 
 const Network = () => {
-  const { address } = useAccount();
-  const networks = getIsFeatureEnabled(FEATURE_FLAGS.STAGING_ENVIRONMENT, address as string)
-    ? allNetworks
-    : allNetworks.filter((n) => n.id !== 'staging');
+  const networks = allNetworks;
   const selectedEnvironment = useAppPersistStore((state) => state.selectedEnvironment);
   const setSelectedEnvironment = useAppPersistStore((state) => state.setSelectedEnvironment);
 

src/components/Stats.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import React, { useEffect } from 'react';
 
-import { useDaSummaryLazyQuery, useDataAvailabilitySubmittersLazyQuery } from '@/generated';
+import { useMomokaSubmittersLazyQuery, useMomokaSummaryLazyQuery } from '@/generated';
 import useSubmitterSpent from '@/hooks/useSubmitterSpent';
 import { useAppStore } from '@/store/app';
 import formatNumber from '@/utils/formatNumber';
@@ -20,20 +20,20 @@ const Stats = () => {
   const totalSpent = useAppStore((state) => state.totalSpent);
   const maticMarketPrice = useAppStore((state) => state.maticMarketPrice);
 
-  const [fetchTopSubmitter, { loading: submittersDataLoading }] = useDataAvailabilitySubmittersLazyQuery({
+  const [fetchTopSubmitter, { loading: submittersDataLoading }] = useMomokaSubmittersLazyQuery({
     fetchPolicy: 'no-cache'
   });
-  const [fetchAllCount, { loading }] = useDaSummaryLazyQuery({ fetchPolicy: 'no-cache' });
+  const [fetchAllCount, { loading }] = useMomokaSummaryLazyQuery({ fetchPolicy: 'no-cache' });
   const { fetchData: fetchSpentAmount, loading: fetchingSpentAmount } = useSubmitterSpent();
 
   const fetchCounts = async () => {
     const { data: countData } = await fetchAllCount();
     const { data: submittersData } = await fetchTopSubmitter();
-    setAllTransactionsCount(countData?.dataAvailabilitySummary.totalTransactions ?? 0);
-    if (submittersData?.dataAvailabilitySubmitters?.items[0]) {
-      const submitters = submittersData?.dataAvailabilitySubmitters.items.map((el) => el.address);
+    setAllTransactionsCount(countData?.momokaSummary.totalTransactions ?? 0);
+    if (submittersData?.momokaSubmitters?.items[0]) {
+      const submitters = submittersData?.momokaSubmitters.items.map((el) => el.address);
       fetchSpentAmount(submitters);
-      setTopSubmitter(submittersData?.dataAvailabilitySubmitters?.items[0]);
+      setTopSubmitter(submittersData?.momokaSubmitters?.items[0]);
     }
   };
 

src/components/Transaction/MoreDetails.tsx

@@ -5,29 +5,28 @@ import type { FC } from 'react';
 import { useEffect, useState } from 'react';
 import ReactJson from 'react-json-view';
 
-import type { DataAvailabilityTransactionUnion } from '@/generated';
+import type { MomokaTransaction } from '@/generated';
 import { usePublicationQuery } from '@/generated';
 
 import Card from '../ui/Card';
 import { Meta } from '.';
-import Verify from './Verify';
 
 interface MoreDetailsProps {
-  dataAvailabilityTransaction: DataAvailabilityTransactionUnion;
+  momokaTransaction: MomokaTransaction;
 }
 
-const MoreDetails: FC<MoreDetailsProps> = ({ dataAvailabilityTransaction }) => {
+const MoreDetails: FC<MoreDetailsProps> = ({ momokaTransaction }) => {
   const { resolvedTheme } = useTheme();
   const [transactionData, setTransactionData] = useState<any>(null);
 
   const { data } = usePublicationQuery({
-    variables: { request: { publicationId: dataAvailabilityTransaction.publicationId } },
-    skip: !dataAvailabilityTransaction.publicationId
+    variables: { request: { forId: momokaTransaction.publication.id } },
+    skip: !momokaTransaction.publication.id
   });
 
   useEffect(() => {
     const getData = async () => {
-      const data = await fetch(`https://arweave.net/${dataAvailabilityTransaction.transactionId}`);
+      const data = await fetch(`https://arweave.net/${momokaTransaction.transactionId}`);
       const dataJson = await data.json();
       setTransactionData(dataJson);
     };
@@ -46,7 +45,9 @@ const MoreDetails: FC<MoreDetailsProps> = ({ dataAvailabilityTransaction }) => {
               <ChevronUpIcon className={`${!open ? 'rotate-180 transform' : ''} h-5 w-5`} />
             </Disclosure.Button>
             <Disclosure.Panel className="pb-2 text-sm">
-              <Meta title="On-chain Content URI" value={data?.publication?.onChainContentURI} />
+              {(data?.publication as any)?.metadata?.rawUri ? (
+                <Meta title="On-chain Content URI" value={(data?.publication as any)?.metadata.rawUri} />
+              ) : null}
               <Meta
                 title="Transaction Data"
                 value={
@@ -64,10 +65,7 @@ const MoreDetails: FC<MoreDetailsProps> = ({ dataAvailabilityTransaction }) => {
                   ) : null
                 }
               />
-              <Meta
-                title="Verify with a node"
-                value={<Verify dataAvailabilityTransaction={dataAvailabilityTransaction} />}
-              />
+              {/* <Meta title="Verify with a node" value={<Verify momokaTransaction={momokaTransaction} />} /> */}
             </Disclosure.Panel>
           </>
         )}

src/components/Transaction/Verify.tsx

@@ -3,18 +3,18 @@ import { CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/solid';
 import type { FC } from 'react';
 import { useState } from 'react';
 
-import type { DataAvailabilityTransactionUnion } from '@/generated';
+import type { MomokaTransaction } from '@/generated';
 import { useAppPersistStore } from '@/store/app';
 import isDataVerified from '@/utils/isDataVerified';
 
 import { Button } from '../ui/Button';
 import { Input } from '../ui/Input';
 
 interface VerifyProps {
-  dataAvailabilityTransaction: DataAvailabilityTransactionUnion;
+  momokaTransaction: MomokaTransaction;
 }
 
-const Verify: FC<VerifyProps> = ({ dataAvailabilityTransaction }) => {
+const Verify: FC<VerifyProps> = ({ momokaTransaction }) => {
   const selectedEnvironment = useAppPersistStore((state) => state.selectedEnvironment);
   const [nodeUrl, setNodeUrl] = useState<string>(
     selectedEnvironment.id === 'mainnet'
@@ -43,7 +43,7 @@ const Verify: FC<VerifyProps> = ({ dataAvailabilityTransaction }) => {
           className="px-5 py-3 text-[13px] font-bold uppercase leading-[13px] text-[#383838]"
           onClick={() => {
             setLoading(true);
-            isDataVerified(dataAvailabilityTransaction.transactionId, nodeUrl, selectedEnvironment.id)
+            isDataVerified(momokaTransaction.transactionId, nodeUrl, selectedEnvironment.id)
               .then(({ verified, message }) => {
                 setStatus(verified ? 'VERIFIED' : 'NOT_VERIFIED');
                 setMessage(message);

src/components/Transaction/index.tsx

@@ -1,21 +1,19 @@
-import { XCircleIcon } from '@heroicons/react/20/solid';
 import {
   ArrowTopRightOnSquareIcon,
   BoltIcon,
   ClockIcon,
   DocumentDuplicateIcon
 } from '@heroicons/react/24/outline';
 import { CheckCircleIcon } from '@heroicons/react/24/solid';
-import clsx from 'clsx';
 import dayjs from 'dayjs';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import type { FC, ReactNode } from 'react';
 import { useEffect, useState } from 'react';
 
 import { apps } from '@/data/apps';
-import type { DataAvailabilityTransactionUnion, Profile as TProfile } from '@/generated';
-import { useDataAvailabilityTransactionQuery } from '@/generated';
+import type { MomokaTransaction, Profile as TProfile } from '@/generated';
+import { useMomokaTransactionQuery } from '@/generated';
 import Custom404 from '@/pages/404';
 import { useAppPersistStore } from '@/store/app';
 import capitalizeCase from '@/utils/capitalizeCase';
@@ -75,22 +73,21 @@ const Transaction: FC = () => {
   const { query, push } = useRouter();
   const selectedEnvironment = useAppPersistStore((state) => state.selectedEnvironment);
 
-  const { data, loading } = useDataAvailabilityTransactionQuery({
-    variables: { request: { id: query.transactionId as string } },
+  const { data, loading } = useMomokaTransactionQuery({
+    variables: { request: { for: query.transactionId as string } },
     skip: !query.transactionId
   });
 
   if (loading || !data) {
     return <TransactionShimmer />;
   }
 
-  if (!data?.dataAvailabilityTransaction) {
+  if (!data?.momokaTransaction) {
     return <Custom404 />;
   }
 
-  const { dataAvailabilityTransaction } = data;
-  const isVerified =
-    dataAvailabilityTransaction.verificationStatus.__typename === 'DataAvailabilityVerificationStatusSuccess';
+  const { momokaTransaction } = data;
+  const isVerified = momokaTransaction.verificationStatus.__typename === 'MomokaVerificationStatusSuccess';
 
   return (
     <>
@@ -101,7 +98,7 @@ const Transaction: FC = () => {
             <p className="text-sm opacity-60">All Transaction related information will be displayed here.</p>
           </div>
           <Favorite
-            dataAvailabilityTransaction={dataAvailabilityTransaction as DataAvailabilityTransactionUnion}
+            momokaTransaction={momokaTransaction as MomokaTransaction}
             renderItem={(isFavorite) => {
               return (
                 <Button className="px-5 py-3 text-[13px] font-bold uppercase leading-[13px] text-[#383838]">
@@ -117,10 +114,10 @@ const Transaction: FC = () => {
             value={
               <Link
                 className="flex items-center space-x-2 break-all text-[#3D794E] underline dark:text-[#D0DBFF]"
-                href={`https://arweave.app/tx/${dataAvailabilityTransaction?.transactionId}`}
+                href={`https://arweave.app/tx/${momokaTransaction?.transactionId}`}
                 target="_blank"
               >
-                <span>ar://{dataAvailabilityTransaction?.transactionId}</span>
+                <span>ar://{momokaTransaction?.transactionId}</span>
                 <ArrowTopRightOnSquareIcon className="h-4 w-4" />
               </Link>
             }
@@ -131,13 +128,13 @@ const Transaction: FC = () => {
               <div className="flex items-center space-x-2">
                 <ClockIcon className="h-4 w-4" />
                 <span>
-                  <b>{getRelativeTime(dataAvailabilityTransaction?.createdAt)}</b> (
-                  {dayjs(new Date(dataAvailabilityTransaction?.createdAt)).format('MMM DD YYYY, hh:mm A')})
+                  <b>{getRelativeTime(momokaTransaction?.createdAt)}</b> (
+                  {dayjs(new Date(momokaTransaction?.createdAt)).format('MMM DD YYYY, hh:mm A')})
                 </span>
               </div>
             }
           />
-          <Meta
+          {/* <Meta
             title="Status"
             value={
               <div className="flex items-center space-x-2">
@@ -152,51 +149,47 @@ const Transaction: FC = () => {
                   {isVerified ? <CheckCircleIcon className="w- h-4" /> : <XCircleIcon className="w- h-4" />}
                   <span>{isVerified ? 'Verified' : 'Unverified'}</span>
                 </div>
-                {dataAvailabilityTransaction.verificationStatus.__typename ===
-                  'DataAvailabilityVerificationStatusFailure' && (
+                {momokaTransaction.verificationStatus.__typename === 'MomokaVerificationStatusFailure' && (
                   <div className="truncate text-sm leading-3">
                     <b>Reason: </b>
-                    <span>{dataAvailabilityTransaction.verificationStatus.status}</span>
+                    <span>{momokaTransaction.verificationStatus.status}</span>
                   </div>
                 )}
               </div>
             }
-          />
+          /> */}
           <Meta
             title="Submitter"
             value={
               <div className="flex items-center space-x-2 break-all">
                 <BoltIcon className="h-4 w-4" />
-                <b>{dataAvailabilityTransaction?.submitter}</b>
+                <b>{momokaTransaction?.submitter}</b>
               </div>
             }
-            copyValue={dataAvailabilityTransaction?.submitter}
+            copyValue={momokaTransaction?.submitter}
           />
           <Meta
-            title={`${capitalizeCase(dataAvailabilityTransaction?.__typename as string)?.replace(
-              'DataAvailability',
-              ''
-            )}ed by`}
-            value={<Profile profile={dataAvailabilityTransaction?.profile as TProfile} />}
+            title={`${capitalizeCase(momokaTransaction?.__typename as string)
+              ?.replace('Momoka', '')
+              .replace('Transaction', '')}ed by`}
+            value={<Profile profile={momokaTransaction?.publication.by as TProfile} />}
           />
           {isVerified && (
             <Meta
               title="Publication ID"
               value={
                 <Link
                   className="flex items-center space-x-2 text-[#3D794E] underline dark:text-[#D0DBFF]"
-                  href={`${getHeyLink(selectedEnvironment.id)}/posts/${
-                    dataAvailabilityTransaction?.publicationId
-                  }`}
+                  href={`${getHeyLink(selectedEnvironment.id)}/posts/${momokaTransaction?.publication.id}`}
                   target="_blank"
                 >
-                  <span>{dataAvailabilityTransaction?.publicationId}</span>
+                  <span>{momokaTransaction?.publication.id}</span>
                   <ArrowTopRightOnSquareIcon className="h-4 w-4" />
                 </Link>
               }
             />
           )}
-          {dataAvailabilityTransaction?.__typename === 'DataAvailabilityMirror' && (
+          {momokaTransaction?.__typename === 'MomokaMirrorTransaction' && (
             <>
               <div className="border-b-[0.5px] border-b-gray-100 dark:border-gray-950" />
               <Meta
@@ -206,22 +199,22 @@ const Transaction: FC = () => {
                     <Link
                       className="flex items-center space-x-2 text-[#3D794E] underline dark:text-[#D0DBFF]"
                       href={`${getHeyLink(selectedEnvironment.id)}/posts/${
-                        dataAvailabilityTransaction?.mirrorOfPublicationId
+                        momokaTransaction?.publication.id
                       }`}
-                      onClick={() => push(`/tx/${dataAvailabilityTransaction?.mirrorOfPublicationId}`)}
+                      onClick={() => push(`/tx/${momokaTransaction?.publication.id}`)}
                       target="_blank"
                     >
-                      <span>{dataAvailabilityTransaction?.mirrorOfPublicationId}</span>
+                      <span>{momokaTransaction?.publication.id}</span>
                       <ArrowTopRightOnSquareIcon className="h-4 w-4" />
                     </Link>
-                    <Profile profile={dataAvailabilityTransaction?.mirrorOfProfile as TProfile} />
+                    <Profile profile={momokaTransaction?.publication.by as TProfile} />
                   </div>
                 }
               />
               <div className="border-b-[0.5px] border-b-gray-100 dark:border-gray-950" />
             </>
           )}
-          {dataAvailabilityTransaction?.__typename === 'DataAvailabilityComment' && (
+          {momokaTransaction?.__typename === 'MomokaCommentTransaction' && (
             <>
               <div className="border-b-[0.5px] border-b-gray-100 dark:border-gray-950" />
 
@@ -232,15 +225,15 @@ const Transaction: FC = () => {
                     <Link
                       className="flex items-center space-x-2 text-[#3D794E] underline dark:text-[#D0DBFF]"
                       href={`${getHeyLink(selectedEnvironment.id)}/posts/${
-                        dataAvailabilityTransaction?.commentedOnPublicationId
+                        momokaTransaction?.publication.id
                       }`}
-                      onClick={() => push(`/tx/${dataAvailabilityTransaction?.commentedOnPublicationId}`)}
+                      onClick={() => push(`/tx/${momokaTransaction?.publication.id}`)}
                       target="_blank"
                     >
-                      <span>{dataAvailabilityTransaction?.commentedOnPublicationId}</span>
+                      <span>{momokaTransaction?.publication.id}</span>
                       <ArrowTopRightOnSquareIcon className="h-4 w-4" />
                     </Link>
-                    <Profile profile={dataAvailabilityTransaction?.commentedOnProfile as TProfile} />
+                    <Profile profile={momokaTransaction?.publication.by as TProfile} />
                   </div>
                 }
               />
@@ -251,23 +244,21 @@ const Transaction: FC = () => {
             title="Posted via"
             value={
               <div className="flex items-center space-x-2">
-                {apps.includes(dataAvailabilityTransaction?.appId) && (
+                {apps.includes(momokaTransaction?.app?.id) && (
                   <img
-                    src={`https://static-assets.hey.xyz/images/source/${dataAvailabilityTransaction?.appId}.jpeg`}
+                    src={`https://static-assets.hey.xyz/images/source/${momokaTransaction?.app?.id}.jpeg`}
                     className="h-5 w-5 rounded-full"
-                    alt={dataAvailabilityTransaction?.appId}
+                    alt={momokaTransaction?.app?.id}
                     draggable={false}
                   />
                 )}
-                <span>{capitalizeCase(dataAvailabilityTransaction?.appId)}</span>
+                <span>{capitalizeCase(momokaTransaction?.app?.id)}</span>
               </div>
             }
           />
         </div>
       </Card>
-      <MoreDetails
-        dataAvailabilityTransaction={dataAvailabilityTransaction as DataAvailabilityTransactionUnion}
-      />
+      <MoreDetails momokaTransaction={momokaTransaction as MomokaTransaction} />
     </>
   );
 };