update packages and migrate code

package.json

@@ -18,7 +18,8 @@
     "ci:check": "npm run format:check:app && npm run lint && npm run types"
   },
   "dependencies": {
-    "@apollo/react-hooks": "^3.1.5",
+    "@apollo/client": "^3.11.8",
+    "@apollo/react-hooks": "^4.0.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.3",
@@ -31,13 +32,8 @@
     "@sentry/react": "^7.44.0",
     "@sentry/tracing": "^7.44.0",
     "allotment": "^1.17.0",
-    "apollo-cache-inmemory": "^1.6.6",
-    "apollo-client": "^2.6.10",
-    "apollo-link": "^1.2.14",
-    "apollo-link-debounce": "^2.1.0",
-    "apollo-link-error": "^1.1.13",
-    "apollo-link-http": "^1.5.17",
-    "apollo-link-serialize": "^2.1.0",
+    "apollo-link-debounce": "^3.0.0",
+    "apollo-link-serialize": "^4.0.0",
     "cross-fetch": "^3.1.5",
     "date-fns": "^2.29.3",
     "detect-browser": "^5.3.0",

src/api/apollo/client.ts

@@ -1,20 +1,37 @@
-import { InMemoryCache } from 'apollo-cache-inmemory';
-import { ApolloClient } from 'apollo-client';
-import { ApolloLink } from 'apollo-link';
+import {
+  ApolloClient,
+  InMemoryCache,
+  ApolloLink,
+  HttpLink,
+  gql,
+  makeVar,
+} from '@apollo/client';
 import DebounceLink from 'apollo-link-debounce';
-import { HttpLink } from 'apollo-link-http';
 import SerializingLink from 'apollo-link-serialize';
 import fetch from 'cross-fetch';
 import { ResultType } from './generated/graphql';
 import localResolvers from './resolvers';
-import { onError } from 'apollo-link-error';
+import { onError } from '@apollo/client/link/error';
 import { GET_APPLICATION_ERRORS } from './queries';
 import * as Sentry from '@sentry/react';
-import { GraphQLError, GraphQLErrorExtensions } from 'graphql';
+import { GraphQLErrorExtensions, GraphQLFormattedError } from 'graphql';
 const PLAYGROUND_API = process.env.PLAYGROUND_API;
 const DEFAULT_DEBOUNCE_TIMEOUT = 1200; // Debounce time in ms
 const { detect } = require('detect-browser');
-const cache = new InMemoryCache();
+export const errorMessageVar = makeVar('');
+const cache = new InMemoryCache({
+  typePolicies: {
+    Query: {
+      fields: {
+        errorMessage: {
+          read() {
+            return errorMessageVar();
+          },
+        },
+      },
+    },
+  },
+});
 const client = new ApolloClient({
   cache: cache,
   link: ApolloLink.from([
@@ -23,7 +40,7 @@ const client = new ApolloClient({
     onError(({ graphQLErrors, networkError }) => {
       let errorMessage: string,
         extensions: GraphQLErrorExtensions = { code: '' },
-        gqlError: GraphQLError;
+        gqlError: GraphQLFormattedError;
 
       if (graphQLErrors) {
         gqlError = graphQLErrors[0];
@@ -84,19 +101,32 @@ const client = new ApolloClient({
   resolvers: localResolvers,
 });
 
-cache.writeData({
+cache.writeQuery({
+  query: gql`
+    query InitValues {
+      activeProjectId
+      activeProject
+    }
+  `,
   data: {
-    localProject: null,
     activeProjectId: null,
     activeProject: false,
-    errorMessage: '',
-    cachedExecutionResults: {
-      id: '0',
-      __typename: 'ExecutionResults',
-      [ResultType.Transaction]: [],
-      [ResultType.Script]: [],
-      [ResultType.Contract]: [],
-    },
+  },
+});
+
+cache.writeFragment({
+  id: 'ExecutionResults:0',
+  fragment: gql`
+    fragment ExecutionResultFields on ExecutionResult {
+      ${ResultType.Transaction}
+      ${ResultType.Script}
+      ${ResultType.Contract}
+    }
+  `,
+  data: {
+    [ResultType.Transaction]: [],
+    [ResultType.Script]: [],
+    [ResultType.Contract]: [],
   },
 });
 

src/api/apollo/local.graphql

@@ -42,3 +42,7 @@ type Mutation {
   ): Boolean
   clearCachedExecutionResults(resultType: ResultType!): Boolean
 }
+
+extend type Query {
+  errorMessage: String
+}

src/api/apollo/resolvers.ts

@@ -1,5 +1,4 @@
-import { InMemoryCache } from 'apollo-cache-inmemory';
-import gql from 'graphql-tag';
+import { InMemoryCache, gql } from '@apollo/client';
 import { normalizeInteractionResponse } from 'util/normalize-interaction-response';
 import {
   ClearExecutionResultsMutationVariables,
@@ -152,7 +151,12 @@ const localResolvers = {
       { id }: any,
       { cache }: { cache: InMemoryCache },
     ): any => {
-      cache.writeData({
+      cache.writeQuery({
+        query: gql`
+          query GetActiveProjectId {
+            activeProjectId
+          }
+        `,
         data: {
           activeProjectId: id,
         },

src/components/AccountAvatars.tsx

@@ -55,7 +55,7 @@ export const AvatarList = ({ children }: ChildProps) => {
         flex: '1 1 auto',
         alignItems: 'center',
         justifyContent: 'space-between',
-        overflowX: 'scroll',
+        overflowX: 'auto',
       }}
     >
       {children}

src/components/Editor/CadenceEditor/ControlPanel/index.tsx

@@ -54,12 +54,12 @@ import {
   StatusMessage,
 } from './Arguments/styles';
 import { SignersPanel } from 'components/Editor/CadenceEditor/ControlPanel/SignersPanel';
-import { Template } from 'src/types';
 import DismissiblePopup from 'components/DismissiblePopup';
 import { userModalKeys } from 'util/localstorage';
 import { addressToAccount } from 'util/accounts';
 import { Argument } from './Arguments/types';
 import { useThemeUI } from 'theme-ui';
+import { getContractName } from 'util/generator';
 
 const ButtonActionLabels = {
   [String(EntityType.TransactionTemplate)]: 'Send',
@@ -252,7 +252,7 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
     const user = selectedAccounts[0];
     const acct = accounts[user];
     const template = project.contractTemplates[activeIndex];
-    const templateContract = (template as Template)?.name;
+    const templateContract = getContractName(template.script);
     return (acct?.deployedContracts || []).includes(templateContract);
   };
 
@@ -283,7 +283,7 @@ const ControlPanel: React.FC<ControlPanelProps> = (props) => {
 
     // determine if other contracts will need to be redeployed and prompt user
     const template = project.contractTemplates[active.index];
-    const contractName = (template as Template)?.name;
+    const contractName = getContractName(template.script);
     if (!contractName) return send(true);
 
     const deployment = project.contractDeployments.find(

src/components/Editor/FileExplorer/MenuList.tsx

@@ -168,7 +168,6 @@ const MenuList: React.FC<MenuListProps> = ({
       let _editing = [...editing];
       _editing.splice(_editing.indexOf(i), 1);
       setEditing(_editing);
-      items[i].title = newTitle;
       onUpdate(items[i].id, items[i].script, newTitle);
       return;
     }

src/providers/Project/index.tsx

@@ -5,7 +5,7 @@ import {
   Project,
 } from 'api/apollo/generated/graphql';
 import React, { createContext, useEffect, useState } from 'react';
-import { ChildProps, Template } from 'src/types';
+import { ChildProps } from 'src/types';
 import { getHashLineNumber, getParams, LOCAL_PROJECT_ID } from 'util/url';
 import ProjectMutator from './projectMutator';
 import { storageMapByAddress } from 'util/accounts';
@@ -301,28 +301,6 @@ export const ProjectProvider: React.FC<ProjectProviderProps> = ({
     return res;
   };
 
-  const stripComments = (code: string) => {
-    const commentsRegExp = /(\/\*[\s\S]*?\*\/)|(\/\/.*)/g;
-    return code.replace(commentsRegExp, '');
-  };
-
-  const getContractName = (cadenceCode: string): string => {
-    if (cadenceCode === '') return null;
-    const complexMatcher = /(resource|struct)\s+\w+\s*{[\s\S]+?}/g;
-    const noCommentsCode = stripComments(cadenceCode);
-    const noComplex = noCommentsCode.replace(complexMatcher, '');
-    const pattern =
-      /(?:access\(\w+\)|pub)\s+contract\s+(?:interface)*\s*(\w*)[:\s\w]*(\s*{[.\s\S]*init\s*\((.*?)\)[.\s\S]*})?/g;
-    // Search for the pattern in the Cadence code
-    const match = pattern.exec(noComplex);
-    if (!match) {
-      console.log('Could not get contract name');
-      setApplicationErrorMessage('Could not parse contract name');
-    }
-    // Return the contract name if found, otherwise return null
-    return match ? match[1] : null;
-  };
-
   const updateContractTemplate = async (script: string, title: string) => {
     setIsSaving(true);
     let res;
@@ -334,9 +312,6 @@ export const ProjectProvider: React.FC<ProjectProviderProps> = ({
         title,
         active.index,
       );
-      template.script = script;
-      template.title = title;
-      (template as Template).name = getContractName(script);
     } catch (e) {
       console.error(e);
       checkAppErrors();
@@ -358,8 +333,6 @@ export const ProjectProvider: React.FC<ProjectProviderProps> = ({
         contractTemplate.title,
         active.index,
       );
-      contractTemplate.script = script;
-      (contractTemplate as Template).name = getContractName(script);
     } catch (e) {
       console.error(e);
       checkAppErrors();
@@ -379,9 +352,6 @@ export const ProjectProvider: React.FC<ProjectProviderProps> = ({
     let res;
     try {
       res = await mutator.updateScriptTemplate(templateId, script, title);
-      const template = project.scriptTemplates.find((t) => t.id === templateId);
-      template.script = script;
-      template.title = title;
     } catch (e) {
       console.error(e);
       checkAppErrors();
@@ -411,11 +381,6 @@ export const ProjectProvider: React.FC<ProjectProviderProps> = ({
     let res;
     try {
       res = await mutator.updateTransactionTemplate(templateId, script, title);
-      const template = project.transactionTemplates.find(
-        (t) => t.id === templateId,
-      );
-      template.script = script;
-      template.title = title;
     } catch (e) {
       console.error(e);
       checkAppErrors();
@@ -429,8 +394,6 @@ export const ProjectProvider: React.FC<ProjectProviderProps> = ({
   const updateActiveScriptTemplate = async (script: string) => {
     setIsSaving(true);
     let res;
-    const template = project.scriptTemplates[active.index];
-    template.script = script;
     try {
       res = await mutator.updateScriptTemplate(
         project.scriptTemplates[active.index].id,
@@ -450,8 +413,6 @@ export const ProjectProvider: React.FC<ProjectProviderProps> = ({
   const updateActiveTransactionTemplate = async (script: string) => {
     setIsSaving(true);
     let res;
-    const template = project.transactionTemplates[active.index];
-    template.script = script;
     try {
       res = await mutator.updateTransactionTemplate(
         project.transactionTemplates[active.index].id,
@@ -815,7 +776,6 @@ export const ProjectProvider: React.FC<ProjectProviderProps> = ({
         });
         const template = project.contractTemplates[templateIndex];
         const templateId = template.id;
-        (template as Template).name = getContractName(template.script);
         return (
           <Redirect
             noThrow

src/providers/Project/projectDefault.ts

@@ -111,7 +111,7 @@ export function createLocalProject(
   const accountEntities: Account[] = accounts.map((_account) => {
     return {
       __typename: 'Account',
-      address: _account.padStart(16, "0"),
+      address: _account.padStart(16, '0'),
       deployedContracts: [],
       state: DEFAULT_ACCOUNT_STATE,
     };

src/providers/Project/projectHooks.ts

@@ -8,6 +8,7 @@ import { ProjectContext, ProjectContextValue } from './index';
 import { createDefaultProject, createLocalProject } from './projectDefault';
 import { PROJECT_SERIALIZATION_KEY } from './projectMutator';
 import { LOCAL_PROJECT_ID } from 'util/url';
+import { ApolloClient, gql } from '@apollo/client';
 
 function formatProject(project: Project) {
   if (!project) return project;
@@ -18,18 +19,24 @@ function formatProject(project: Project) {
   return project;
 }
 
-function writeDefaultProject(client: any) {
+function writeDefaultProject(client: ApolloClient<object>) {
   const defaultProject = createDefaultProject();
 
-  client.writeData({
+  client.writeQuery({
+    query: gql`
+      query InitValues {
+        activeProject
+        localProject
+      }
+    `,
     data: {
       activeProject: true,
       localProject: defaultProject,
     },
   });
 }
 
-function cloneProject(client: any, project: Project) {
+function cloneProject(client: ApolloClient<object>, project: Project) {
   const localProject = createLocalProject(
     project.id,
     project.seed,
@@ -53,7 +60,13 @@ function cloneProject(client: any, project: Project) {
       title: tpl.title,
     })),
   );
-  client.writeData({
+  client.writeQuery({
+    query: gql`
+      query InitValues {
+        activeProject
+        localProject
+      }
+    `,
     data: {
       activeProject: true,
       localProject: localProject,
@@ -62,7 +75,7 @@ function cloneProject(client: any, project: Project) {
 }
 
 export default function useGetProject(
-  client: any,
+  client: ApolloClient<object>,
   projectId: string | null,
   isActiveProject: boolean,
 ): {
@@ -136,7 +149,7 @@ export function useProject(): ProjectContextValue {
   return useContext(ProjectContext);
 }
 
-function readLocalProject(client: any): any {
+function readLocalProject(client: ApolloClient<object>): any {
   const { project } = client.readQuery({ query: GET_LOCAL_PROJECT });
   return project;
 }