fix: APP-3098 - Refactor IPFS pinning and fetching to use Pinata

.github/workflows/pull_request_webapp_preview.yml

@@ -51,6 +51,9 @@ jobs:
           VITE_WALLET_CONNECT_PROJECT_ID: ${{secrets.VITE_WALLET_CONNECT_PROJECT_ID}}
           VITE_COVALENT_API_KEY: ${{secrets.VITE_COVALENT_API_KEY}}
           VITE_SENTRY_DNS: ${{secrets.VITE_SENTRY_DNS}}
+          VITE_PINATA_CID_VERSION: ${{vars.VITE_PINATA_CID_VERSION}}
+          VITE_PINATA_GATEWAY: ${{vars.VITE_PINATA_GATEWAY}}
+          VITE_PINATA_JWT_API_KEY: ${{secrets.VITE_PINATA_JWT_API_KEY}}
       - name: Sentry sourcemap
         env:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}

.github/workflows/webapp-deploy.yml

@@ -54,6 +54,9 @@ jobs:
           VITE_GATEWAY_RPC_API_KEY: ${{secrets.VITE_GATEWAY_RPC_API_KEY}}
           VITE_COVALENT_API_KEY: ${{secrets.VITE_COVALENT_API_KEY}}
           VITE_SENTRY_DNS: ${{secrets.VITE_SENTRY_DNS}}
+          VITE_PINATA_CID_VERSION: ${{vars.VITE_PINATA_CID_VERSION}}
+          VITE_PINATA_GATEWAY: ${{vars.VITE_PINATA_GATEWAY}}
+          VITE_PINATA_JWT_API_KEY: ${{secrets.VITE_PINATA_JWT_API_KEY}}
 
       - name: Sentry sourcemap
         env:

.github/workflows/webapp-test.yml

@@ -32,3 +32,6 @@ jobs:
           VITE_REACT_APP_ANALYTICS_KEY: ${{ secrets.VITE_REACT_APP_ANALYTICS_KEY }}
           VITE_GATEWAY_IPFS_API_KEY: ${{secrets.VITE_GATEWAY_IPFS_API_KEY}}
           VITE_ETHERSCAN_API_KEY: ${{secrets.VITE_ETHERSCAN_API_KEY}}
+          VITE_PINATA_CID_VERSION: ${{vars.VITE_PINATA_CID_VERSION}}
+          VITE_PINATA_GATEWAY: ${{vars.VITE_PINATA_GATEWAY}}
+          VITE_PINATA_JWT_API_KEY: ${{secrets.VITE_PINATA_JWT_API_KEY}}

src/hooks/useDaoDetails.tsx

@@ -1,17 +1,26 @@
-import {Client, DaoDetails} from '@aragon/sdk-client';
+import {Client, DaoDetails, InstalledPluginListItem} from '@aragon/sdk-client';
 import {JsonRpcProvider} from '@ethersproject/providers';
 import {useQuery} from '@tanstack/react-query';
 import {isAddress} from 'ethers/lib/utils';
 import {useCallback, useEffect, useMemo} from 'react';
 import {useLocation, useNavigate, useParams} from 'react-router-dom';
 
 import {useNetwork} from 'context/network';
+import {QueryDao, toDaoDetails} from 'services/aragon-sdk/queryHelpers/dao';
 import {useProviders} from 'context/providers';
-import {CHAIN_METADATA} from 'utils/constants';
+import {
+  CHAIN_METADATA,
+  SUBGRAPH_API_URL,
+  SupportedNetworks,
+} from 'utils/constants';
 import {toDisplayEns} from 'utils/library';
 import {NotFound} from 'utils/paths';
 import {useClient} from './useClient';
 import {resolveIpfsCid} from '@aragon/sdk-client-common';
+import request from 'graphql-request';
+import {SubgraphDao} from 'utils/types';
+import {ipfsService} from 'services/ipfs/ipfsService';
+import {isEnsDomain} from '@aragon/ods-old';
 
 /**
  * Fetches DAO data for a given DAO address or ENS name using a given client.
@@ -25,41 +34,53 @@ async function fetchDaoDetails(
   daoAddressOrEns: string | undefined,
   provider: JsonRpcProvider,
   isL2NetworkEns: boolean,
+  network: SupportedNetworks,
   redirectDaoToAddress: (address: string | null) => void
 ): Promise<DaoDetails | null> {
   if (!daoAddressOrEns)
     return Promise.reject(new Error('daoAddressOrEns must be defined'));
 
   if (!client) return Promise.reject(new Error('client must be defined'));
 
+  const address = isEnsDomain(daoAddressOrEns)
+    ? await provider.resolveName(daoAddressOrEns as string)
+    : daoAddressOrEns;
+
   // if network is l2 and has ens name, resolve to address
   if (isL2NetworkEns) {
-    const address = await provider.resolveName(daoAddressOrEns as string);
     redirectDaoToAddress(address);
   }
 
-  // Note: SDK doesn't support ens names in L2 chains so we need to resolve the address first
-  const daoDetails = await client.methods.getDao(daoAddressOrEns.toLowerCase());
+  const {dao} = await request<{dao: SubgraphDao}>(
+    SUBGRAPH_API_URL[network]!,
+    QueryDao,
+    {
+      address: address?.toLowerCase() ?? daoAddressOrEns?.toLowerCase(),
+    }
+  );
+
+  const metadata = await ipfsService.getData(dao.metadata);
+  const daoDetails = toDaoDetails(dao, metadata);
+
   const avatar = daoDetails?.metadata.avatar;
   if (avatar)
     if (typeof avatar !== 'string') {
       daoDetails.metadata.avatar = URL.createObjectURL(avatar);
     } else if (/^ipfs/.test(avatar) && client) {
       try {
         const cid = resolveIpfsCid(avatar);
-        const ipfsClient = client.ipfs.getClient();
-        const imageBytes = await ipfsClient.cat(cid); // Uint8Array
-        const imageBlob = new Blob([imageBytes] as unknown as BlobPart[]);
 
-        daoDetails.metadata.avatar = URL.createObjectURL(imageBlob);
+        daoDetails.metadata.avatar = `${
+          import.meta.env.VITE_PINATA_GATEWAY
+        }/${cid}`;
       } catch (err) {
         console.warn('Error resolving DAO avatar IPFS Cid', err);
       }
     } else {
       daoDetails.metadata.avatar = avatar;
     }
 
-  daoDetails?.plugins.sort(a => {
+  daoDetails?.plugins.sort((a: InstalledPluginListItem) => {
     if (
       a.id === 'token-voting.plugin.dao.eth' ||
       a.id === 'multisig.plugin.dao.eth'
@@ -132,9 +153,17 @@ export const useDaoQuery = (
       daoAddressOrEns,
       provider,
       isL2NetworkEns,
+      network,
       redirectDaoToAddress
     );
-  }, [client, daoAddressOrEns, isL2NetworkEns, provider, redirectDaoToAddress]);
+  }, [
+    client,
+    daoAddressOrEns,
+    isL2NetworkEns,
+    network,
+    provider,
+    redirectDaoToAddress,
+  ]);
 
   return useQuery<DaoDetails | null>({
     queryKey: ['daoDetails', daoAddressOrEns, queryNetwork],

src/hooks/useUploadIpfsData.tsx

@@ -1,9 +1,8 @@
 import {useCallback} from 'react';
-import {useAddData} from 'services/ipfs/mutations/useAddData';
 import {usePinData} from 'services/ipfs/mutations/usePinData';
 import {useClient} from './useClient';
-import {IAddDataProps} from 'services/ipfs/ipfsService.api';
 import {ILoggerErrorContext, logger} from 'services/logger';
+import {IPinDataProps, IPinDataResult} from 'services/ipfs/ipfsService.api';
 
 interface IUseUploadIpfsDataParams {
   /**
@@ -20,66 +19,46 @@ interface IUseUploadIpfsDataParams {
   onError?: (error: unknown) => void;
 }
 
-export enum UploadIpfsDataStep {
-  ADD_DATA = 'ADD_DATA',
-  PIN_DATA = 'PIN_DATA',
-}
-
 export const useUploadIpfsData = (params: IUseUploadIpfsDataParams = {}) => {
   const {onSuccess, onError, logContext} = params;
 
   const {client} = useClient();
 
-  const handleUploadIpfsError =
-    (step: UploadIpfsDataStep) => (error: unknown) => {
-      if (logContext) {
-        const {stack, data} = logContext;
-        logger.error(error, {stack, step, data});
-      }
+  const handleUploadIpfsError = (error: unknown) => {
+    if (logContext) {
+      const {stack, data} = logContext;
+      logger.error(error, {stack, step: 'PIN_DATA', data});
+    }
 
-      onError?.(error);
-    };
+    onError?.(error);
+  };
 
   const {
-    isPending: isPinDataLoading,
-    isError: isPinDataError,
+    isPending,
+    isError,
     isSuccess,
     mutate: pinData,
     reset: resetPinData,
   } = usePinData({
-    onSuccess: (_data, params) => onSuccess?.(params.cid),
-    onError: handleUploadIpfsError(UploadIpfsDataStep.PIN_DATA),
-  });
-
-  const handleAddDataSuccess = (cid: string) => pinData({client: client!, cid});
-
-  const {
-    isPending: isAddDataLoading,
-    isError: isAddDataError,
-    mutate: addData,
-    reset: resetAddData,
-  } = useAddData({
-    onSuccess: handleAddDataSuccess,
-    onError: handleUploadIpfsError(UploadIpfsDataStep.ADD_DATA),
+    onSuccess: (_data: IPinDataResult) => {
+      onSuccess?.(_data.IpfsHash);
+    },
+    onError: handleUploadIpfsError,
   });
 
   const uploadIpfsData = useCallback(
-    (data: IAddDataProps['data']) => {
+    (data: IPinDataProps) => {
       if (client == null) {
         return;
       }
 
       // Reset previous states in case of retries
-      resetAddData();
       resetPinData();
 
-      addData({client, data});
+      pinData(data);
     },
-    [addData, resetAddData, resetPinData, client]
+    [client, resetPinData, pinData]
   );
 
-  const isPending = isPinDataLoading || isAddDataLoading;
-  const isError = isPinDataError || isAddDataError;
-
   return {uploadIpfsData, isPending, isSuccess, isError};
 };

src/services/aragon-sdk/queries/use-proposal.ts

@@ -1,23 +1,116 @@
 import {MultisigProposal, TokenVotingProposal} from '@aragon/sdk-client';
 import {UseQueryOptions, useQuery} from '@tanstack/react-query';
 import {GaslessVotingProposal} from '@vocdoni/gasless-voting';
+import request from 'graphql-request';
 
+import {
+  InvalidCidError,
+  UNAVAILABLE_PROPOSAL_METADATA,
+  UNSUPPORTED_PROPOSAL_METADATA_LINK,
+  getExtendedProposalId,
+} from '@aragon/sdk-client-common';
 import {useNetwork} from 'context/network';
-import {PluginClient, usePluginClient} from 'hooks/usePluginClient';
-import {CHAIN_METADATA} from 'utils/constants';
+import {
+  PluginClient,
+  isMultisigClient,
+  isTokenVotingClient,
+  usePluginClient,
+} from 'hooks/usePluginClient';
+import {ipfsService} from 'services/ipfs/ipfsService';
+import {
+  CHAIN_METADATA,
+  SUBGRAPH_API_URL,
+  SupportedNetworks,
+} from 'utils/constants';
 import {invariant} from 'utils/invariant';
 import {IFetchProposalParams} from '../aragon-sdk-service.api';
 import {aragonSdkQueryKeys} from '../query-keys';
-import {syncProposalData, transformProposal} from '../selectors';
+import {
+  syncProposalData,
+  toMultisigProposal,
+  toTokenVotingProposal,
+  transformProposal,
+} from '../selectors';
+import {
+  QueryTokenVotingProposal,
+  QueryMultisigProposal,
+} from '../queryHelpers/proposal';
+
+async function getProposal(
+  client: PluginClient,
+  proposalId: string,
+  network: SupportedNetworks
+): Promise<
+  MultisigProposal | TokenVotingProposal | GaslessVotingProposal | null
+> {
+  const extendedProposalId = getExtendedProposalId(proposalId);
+
+  let subgraphProposal;
+
+  if (isTokenVotingClient(client)) {
+    const {tokenVotingProposal} = await request<{
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      tokenVotingProposal: any;
+    }>(SUBGRAPH_API_URL[network]!, QueryTokenVotingProposal, {
+      proposalId: extendedProposalId,
+    });
+
+    try {
+      const metadata = await ipfsService.getData(tokenVotingProposal.metadata);
+      subgraphProposal = toTokenVotingProposal(tokenVotingProposal, metadata);
+    } catch (err) {
+      if (err instanceof InvalidCidError) {
+        return toTokenVotingProposal(
+          tokenVotingProposal,
+          UNSUPPORTED_PROPOSAL_METADATA_LINK
+        );
+      }
+      return toTokenVotingProposal(
+        tokenVotingProposal,
+        UNAVAILABLE_PROPOSAL_METADATA
+      );
+    }
+
+    const metadata = await ipfsService.getData(tokenVotingProposal.metadata);
+    subgraphProposal = toTokenVotingProposal(tokenVotingProposal, metadata);
+  } else if (isMultisigClient(client)) {
+    const {multisigProposal} = await request<{
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      multisigProposal: any;
+    }>(SUBGRAPH_API_URL[network]!, QueryMultisigProposal, {
+      proposalId: extendedProposalId,
+    });
+
+    try {
+      const metadata = await ipfsService.getData(multisigProposal.metadata);
+      subgraphProposal = toMultisigProposal(multisigProposal, metadata);
+    } catch (err) {
+      if (err instanceof InvalidCidError) {
+        return toMultisigProposal(
+          multisigProposal,
+          UNSUPPORTED_PROPOSAL_METADATA_LINK
+        );
+      }
+      return toMultisigProposal(
+        multisigProposal,
+        UNAVAILABLE_PROPOSAL_METADATA
+      );
+    }
+  }
+
+  return subgraphProposal as TokenVotingProposal | MultisigProposal;
+}
 
 async function fetchProposal(
   params: IFetchProposalParams,
-  client: PluginClient | undefined
+  client: PluginClient | undefined,
+  network: SupportedNetworks
 ): Promise<
   MultisigProposal | TokenVotingProposal | GaslessVotingProposal | null
 > {
   invariant(!!client, 'fetchProposal: client is not defined');
-  const data = await client?.methods.getProposal(params.id);
+
+  const data = await getProposal(client, params.id, network);
   return data;
 }
 
@@ -46,7 +139,7 @@ export const useProposal = (
   return useQuery({
     queryKey: aragonSdkQueryKeys.proposal(params),
     queryFn: async () => {
-      const serverData = await fetchProposal(params, client);
+      const serverData = await fetchProposal(params, client, network);
       return syncProposalData(chainId, params.id, serverData);
     },
     select: options.select ?? defaultSelect,