update packages and migrate code

onflow · Sep 17, 2024 · de10ceb · de10ceb
1 parent ca3f5c2
commit de10ceb
Show file tree

Hide file tree

Showing 11 changed files with 414 additions and 386 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/api/apollo/client.ts b/src/api/apollo/client.ts
@@ -1,16 +1,13 @@
-import { InMemoryCache } from 'apollo-cache-inmemory';
-import { ApolloClient } from 'apollo-client';
-import { ApolloLink } from 'apollo-link';
+import { ApolloClient, InMemoryCache, ApolloLink, HttpLink, gql } 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');
@@ -23,7 +20,7 @@ const client = new ApolloClient({
     onError(({ graphQLErrors, networkError }) => {
       let errorMessage: string,
         extensions: GraphQLErrorExtensions = { code: '' },
-        gqlError: GraphQLError;
+        gqlError: GraphQLFormattedError;
 
       if (graphQLErrors) {
         gqlError = graphQLErrors[0];
@@ -84,7 +81,21 @@ const client = new ApolloClient({
   resolvers: localResolvers,
 });
 
-cache.writeData({
+cache.writeQuery({
+  query: gql`
+    query InitValues {
+      localProject
+      activeProjectId
+      activeProject
+      errorMessage
+      cachedExecutionResults {
+        id
+        ${ResultType.Transaction}
+        ${ResultType.Script}
+        ${ResultType.Contract}
+      }
+    }
+  `,
   data: {
     localProject: null,
     activeProjectId: null,

diff --git a/src/api/apollo/resolvers.ts b/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 GetActiveProject {
+            activeProjectId
+          }
+        `,
         data: {
           activeProjectId: id,
         },

diff --git a/src/components/AccountAvatars.tsx b/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}

diff --git a/src/components/Editor/CadenceEditor/ControlPanel/index.tsx b/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,8 @@ 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;
+    console.log(template)
+    const templateContract = getContractName(template.script);
     return (acct?.deployedContracts || []).includes(templateContract);
   };
 
@@ -283,7 +284,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(

diff --git a/src/components/Editor/FileExplorer/MenuList.tsx b/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;
     }

diff --git a/src/providers/Project/index.tsx b/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';
@@ -334,9 +334,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 +355,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 +374,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 +403,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 +416,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 +435,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 +798,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

diff --git a/src/providers/Project/projectHooks.ts b/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;
 }
diff --git a/src/providers/Project/projectMutator.ts b/src/providers/Project/projectMutator.ts
@@ -1,4 +1,4 @@
-import ApolloClient from 'apollo-client';
+import { ApolloClient, gql } from '@apollo/client';
 import { navigate } from '@reach/router';
 
 import {
@@ -41,6 +41,7 @@ import {
 import { createDefaultProject, DEFAULT_ACCOUNT_STATE } from './projectDefault';
 import { UrlRewritter, FILE_TYPE_NAME } from 'util/urlRewritter';
 import { Template } from 'src/types';
+import { getContractName } from 'util/generator';
 
 // TODO: Switch to directives for serialization keys after upgrading to the newest Apollo/apollo-link-serialize
 export const PROJECT_SERIALIZATION_KEY = 'PROJECT_SERIALIZATION_KEY';
@@ -222,22 +223,16 @@ export default class ProjectMutator {
     description: string,
     readme: string,
   ) {
-    const project = this.client.readQuery({
-      query: GET_LOCAL_PROJECT,
-    }).project;
-
-    project.title = title || project.title;
-    project.description = description || project.description;
-    project.readme = readme || project.readme;
-    project.updatedAt = null;
-    project.contractDeployments = [];
-
-    this.client.writeQuery({
-      query: GET_PROJECT,
-      variables: {
-        projectId: project.id,
-      },
-      data: { project },
+    this.client.writeFragment({
+      id: `Project:${this.projectId}`,
+      fragment: gql`
+        fragment ProjectFields on Project {
+          title
+          description
+          readme
+        }
+      `,
+      data: { title, description, readme },
     });
   }
 
@@ -250,8 +245,16 @@ export default class ProjectMutator {
 
     const key = ['SAVE_PROJECT', this.projectId];
 
-    this.client.writeData({
+    this.client.writeFragment({
       id: `Project:${this.projectId}`,
+      fragment: gql`
+        fragment ProjectFields on Project {
+          title
+          description
+          readme
+          persist
+        }
+      `,
       data: {
         title,
         description,
@@ -352,8 +355,14 @@ export default class ProjectMutator {
     script: string,
     title: string,
   ) {
-    this.client.writeData({
+    this.client.writeFragment({
       id: `TransactionTemplate:${templateId}`,
+      fragment: gql`
+        fragment TransactionTemplateFields on TransactionTemplate {
+          script
+          title
+        }
+      `,
       data: {
         script,
         title,
@@ -480,8 +489,14 @@ export default class ProjectMutator {
     script: string,
     title: string,
   ) {
-    this.client.writeData({
+    this.client.writeFragment({
       id: `ScriptTemplate:${templateId}`,
+      fragment: gql`
+        fragment ScriptTemplateFields on ScriptTemplate {
+          script
+          title
+        }
+      `,
       data: {
         script: script,
         title: title,
@@ -754,6 +769,7 @@ export default class ProjectMutator {
         script: script,
         index,
         projectId: this.projectId,
+        name: getContractName(script),
       },
       refetchQueries: [
         {