From e3789a1fbf4a07063f5b51c03b86d93c90fd1ae1 Mon Sep 17 00:00:00 2001
From: hichana <hichana@gmail.com>
Date: Thu, 28 Oct 2021 16:18:46 +0900
Subject: [PATCH 1/3] squash merge with for flip 58 submission

---
 src/App.tsx                             |  12 +-
 src/components/AccountList.tsx          |   2 +-
 src/components/Arguments/components.tsx |   2 +-
 src/components/Examples.tsx             |   2 -
 src/components/Sidebar.tsx              |   2 +-
 src/containers/Editor/index.tsx         | 135 ++++++++++++++++++++---
 src/providers/Project/index.tsx         | 141 ++----------------------
 src/providers/Project/projectMutator.ts |   6 +-
 8 files changed, 140 insertions(+), 162 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 9461e2b7..adc3654a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 // import { Helmet } from 'react-helmet';
 import { Global } from '@emotion/core';
 import { ThemeProvider, Text } from 'theme-ui';
-import { Router, Redirect, globalHistory } from '@reach/router';
+import { Router, globalHistory } from '@reach/router';
 import { ApolloProvider } from '@apollo/react-hooks';
 import AppMobileWrapper from 'containers/AppMobileWrapper';
 import BrowserDetector from 'components/BrowserDetector';
@@ -54,11 +54,11 @@ const App: React.FC = () => {
         <ThemeProvider theme={theme}>
           <AppMobileWrapper>
             <Router>
-              <Base path="/">
-                <FourOhFour path="404" />
-                <Playground path=":projectId" />
-                <Redirect noThrow={true} from="*" to="local" />
-              </Base>
+                <Base path="/">
+                  <FourOhFour path="404" />
+                  <Playground path="/" />
+                  <Playground path="/:projectId" />
+                </Base>
             </Router>
             {version}
           </AppMobileWrapper>
diff --git a/src/components/AccountList.tsx b/src/components/AccountList.tsx
index 023aa0d5..c860c2e7 100644
--- a/src/components/AccountList.tsx
+++ b/src/components/AccountList.tsx
@@ -37,7 +37,7 @@ const AccountList: React.FC = () => {
 
   const location = useLocation();
   const params = getParams(location.search)
-  const projectPath = isUUUID(project.id) ? project.id : "local"
+  const projectPath = isUUUID(project.id) ? project.id : "LOCAL-project"
 
   return (
     <Root>
diff --git a/src/components/Arguments/components.tsx b/src/components/Arguments/components.tsx
index 4a509af6..6c580c94 100644
--- a/src/components/Arguments/components.tsx
+++ b/src/components/Arguments/components.tsx
@@ -214,7 +214,7 @@ export const Hints: React.FC<HintsProps> = (props: HintsProps) => {
 const getLabel = (type: EntityType) => {
   const { project, active } = useProject();
   const { accounts } = project;
-
+  
   switch (true) {
     case type === EntityType.Account:
       return accounts[active.index].deployedCode ? 'Redeploy' : 'Deploy';
diff --git a/src/components/Examples.tsx b/src/components/Examples.tsx
index fd3a4d83..86423306 100644
--- a/src/components/Examples.tsx
+++ b/src/components/Examples.tsx
@@ -245,7 +245,6 @@ const Examples: React.FC<{
                         href={_example.docsLink}
                         target="_blank"
                         rel="noopener"
-                        key={index}
                         onClick={() => {
                           Mixpanel.track("Redirect to project documentation", {
                             link: _example.docsLink,
@@ -261,7 +260,6 @@ const Examples: React.FC<{
                         href={_example.projectLink}
                         target="_blank"
                         rel="noopener"
-                        key={index}
                         onClick={() => {
                           Mixpanel.track("Open example project", {
                             link: _example.projectLink,
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index d95f090b..a97976ef 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -22,7 +22,7 @@ const Sidebar: React.FC = () => {
 
   if (isLoading) return <p>Loading...</p>;
 
-  const projectPath = isUUUID(project.id) ? project.id : "local"
+  const projectPath = isUUUID(project.id) ? project.id : "LOCAL-project"
 
   return (
     <SidebarRoot>
diff --git a/src/containers/Editor/index.tsx b/src/containers/Editor/index.tsx
index d956e2a6..785b3b57 100644
--- a/src/containers/Editor/index.tsx
+++ b/src/containers/Editor/index.tsx
@@ -1,35 +1,140 @@
-import React from "react";
-import { Redirect } from "@reach/router";
+import React, { useEffect, useState } from "react";
+import { useApolloClient } from '@apollo/react-hooks';
 import { ProjectProvider } from "providers/Project";
 import { Base } from "layout/Base"
+import { useGetActiveProjectQuery } from "api/apollo/generated/graphql";
+import useGetProject from '../../providers/Project/projectHooks';
+import { EntityType } from "providers/Project";
 
 import EditorLayout from "./layout";
 import { isUUUID, getParams, scriptTypes } from "../../util/url";
+import { navigate } from "@reach/router";
 
 const Playground: any = (props: any) => {
-  const params = getParams(props.location.search)
+
   const { projectId } = props;
+  
+  const params = getParams(props.location.search);
+  const { type, id } = params;
 
-  const isLocalProject = projectId === "local";
+  const isLocalProject = projectId === "LOCAL-project";
   const correctUUID = isUUUID(projectId);
+  
+  const { data } = useGetActiveProjectQuery();
+  const isActiveProject = data.activeProject;
 
-  const wrongProjectUUID = !correctUUID && !isLocalProject
-  const correctProject = !isLocalProject && correctUUID;
+  const client = useApolloClient();
+  const resolvedProjectId = correctUUID ? projectId : null
+  
+  const {
+    project
+  } = useGetProject(client, resolvedProjectId, isActiveProject);
+  
+  const [active, setActive] = useState<{ type: EntityType; index: number }>({
+    type: EntityType.Account,
+    index: 0,
+  });
 
-  const correctScriptType = scriptTypes.includes(params.type)
+  useEffect(() => {
+    if (project) {
 
-  if (wrongProjectUUID){
-    return <Redirect noThrow={true} to={"/"}/>
-  }
+      let activeType;
+      if (type == '' || type === undefined || !scriptTypes.includes(type)) {
+        activeType = 'account';
+      } else {
+        activeType = type;
+      };
+      
+      if (id == '' || id === undefined) {
+        switch (activeType) {
+          case 'tx':
+            setActive({
+              type: EntityType.TransactionTemplate,
+              index: 0,
+            });
+            break;
+          case 'script':
+            setActive({
+              type: EntityType.ScriptTemplate,
+              index: 0,
+            });
+            break;
+          case 'account':
+          default:
+            setActive({
+              type: EntityType.Account,
+              index: 0,
+            });
+            break;
+        }
+      } else {
+        let foundIndex;
+        switch (activeType) {
+          case 'tx':
+            foundIndex = project.transactionTemplates.findIndex(
+              (template: { id: string; }) => template.id === id,
+            );
+            if (foundIndex > 0) {
+              setActive({
+                type: EntityType.TransactionTemplate,
+                index: foundIndex,
+              });
+            } else {
+              setActive({
+                type: EntityType.TransactionTemplate,
+                index: 0,
+              });
+              navigate(`/${projectId}?type=tx&id=${project.transactionTemplates[0].id}`)
+            }
+            break;
+          case 'script':
+            foundIndex = project.scriptTemplates.findIndex(
+              (template: { id: string; }) => template.id === id,
+            );
+            if (foundIndex > 0) {
+              setActive({
+                type: EntityType.ScriptTemplate,
+                index: foundIndex,
+              });
+            } else {
+              setActive({
+                type: EntityType.ScriptTemplate,
+                index: 0,
+              });
+              navigate(`/${projectId}?type=script&id=${project.scriptTemplates[0].id}`)
+            }
+            break;
+          case 'account':
+          default:
+            foundIndex = project.accounts.findIndex(
+              (template: { id: string; }) => template.id === id,
+            );
+            if (foundIndex > 0) {
+              setActive({
+                type: EntityType.Account,
+                index: foundIndex,
+              });
 
-  if (correctProject && !correctScriptType){
-    const to = `/${projectId}?type=account&id=0`
-    return <Redirect noThrow={true} to={to}/>
-  }
+            } else {
+              setActive({
+                type: EntityType.Account,
+                index: 0,
+              });
+              navigate(`/${projectId}?type=account&id=${project.accounts[0].id}`)
+            }
+            break;
+        }
+      }
+    }
+  },[project, type, id])
 
   return (
     <Base>
-      <ProjectProvider urlProjectId={isLocalProject ? null : projectId}>
+      <ProjectProvider 
+        urlProjectId={isLocalProject ? null : projectId}
+        active={active}
+        setActive={setActive}
+      >
         <EditorLayout />
       </ProjectProvider>
     </Base>
diff --git a/src/providers/Project/index.tsx b/src/providers/Project/index.tsx
index f759499f..9b66be00 100644
--- a/src/providers/Project/index.tsx
+++ b/src/providers/Project/index.tsx
@@ -1,12 +1,11 @@
 import React, { createContext, useState } from 'react';
 import { useApolloClient, useQuery } from '@apollo/react-hooks';
-import { navigate, Redirect, useLocation } from '@reach/router';
+import { navigate } from '@reach/router';
 import ProjectMutator from './projectMutator';
 import useGetProject from './projectHooks';
 
 import { GET_ACTIVE_PROJECT } from 'api/apollo/queries';
 import { Project, Account } from 'api/apollo/generated/graphql';
-import { getParams, scriptTypes } from '../../util/url';
 
 export enum EntityType {
   Account = 1,
@@ -64,11 +63,15 @@ export const ProjectContext: React.Context<ProjectContextValue> = createContext(
 interface ProjectProviderProps {
   children: any;
   urlProjectId: string | null;
+  active: any;
+  setActive: any;
 }
 
 export const ProjectProvider: React.FC<ProjectProviderProps> = ({
   children,
   urlProjectId,
+  active,
+  setActive
 }) => {
   const client = useApolloClient();
 
@@ -94,15 +97,9 @@ export const ProjectProvider: React.FC<ProjectProviderProps> = ({
     navigate('/404');
   }
 
-  const [initialLoad, setInitialLoad] = useState<boolean>(true);
   const [transactionAccounts, setTransactionAccounts] = useState<number[]>([0]);
   const [isSavingCode, setIsSaving] = useState(false);
 
-  const [active, setActive] = useState<{ type: EntityType; index: number }>({
-    type: EntityType.Account,
-    index: 0,
-  });
-
   const projectID = project ? project.id : null;
 
   const mutator = new ProjectMutator(client, projectID, isLocal);
@@ -257,6 +254,8 @@ export const ProjectProvider: React.FC<ProjectProviderProps> = ({
   };
 
   const getActiveEditor = (): ActiveEditor => {
+    // console.log("GET ACTIVE EDITOR ACTIVE:", active);
+    
     switch (active.type) {
       case EntityType.Account:
         return {
@@ -283,136 +282,12 @@ export const ProjectProvider: React.FC<ProjectProviderProps> = ({
 
   const activeEditor = getActiveEditor();
 
-  const location = useLocation();
-
   if (isLoading) return null;
   if (!isLoading && !project) {
-    navigate('/404');
+    navigate('/');
     return null;
   }
 
-  const params = getParams(location.search || '');
-  const { type, id } = params;
-
-  // TODO: check if that project is local
-  // TODO: check that active item have the same id
-
-  if (type == '' || type === undefined || !scriptTypes.includes(type)) {
-    return (
-      <Redirect
-        to={`/${project.id}?type=account&id=${project.accounts[0].id}`}
-      />
-    );
-  }
-
-  if (id == '' || id === undefined) {
-    let firstItemId;
-    switch (type) {
-      case 'tx':
-        setActive({
-          type: EntityType.TransactionTemplate,
-          index: 0,
-        });
-        firstItemId = project.transactionTemplates[0].id;
-        break;
-      case 'script':
-        setActive({
-          type: EntityType.ScriptTemplate,
-          index: 0,
-        });
-        firstItemId = project.scriptTemplates[0].id;
-        break;
-      case 'account':
-      default:
-        setActive({
-          type: EntityType.Account,
-          index: 0,
-        });
-        firstItemId = project.accounts[0].id;
-        break;
-    }
-    return <Redirect to={`/${project.id}?type=${type}&id=${firstItemId}`} />;
-  }
-
-  const activeType = type || 'account';
-
-  let templateIndex = 0;
-  switch (activeType) {
-    case 'tx': {
-      if (id && id !== '') {
-        const foundIndex = project.transactionTemplates.findIndex(
-          (template) => template.id === id,
-        );
-        if (foundIndex > 0) {
-          templateIndex = foundIndex;
-        }
-      }
-
-      const sameType = active.type == EntityType.TransactionTemplate;
-      const sameIndex = active.index == templateIndex;
-
-      if (!sameIndex || !sameType || initialLoad) {
-        setInitialLoad(false);
-        setActive({
-          type: EntityType.TransactionTemplate,
-          index: templateIndex,
-        });
-        const templateId = project.transactionTemplates[templateIndex].id;
-        return <Redirect to={`/${project.id}?type=tx&id=${templateId}`} />;
-      }
-      break;
-    }
-    case 'script': {
-      if (id && id !== '') {
-        const foundIndex = project.scriptTemplates.findIndex(
-          (template) => template.id === id,
-        );
-        if (foundIndex > 0) {
-          templateIndex = foundIndex;
-        }
-      }
-      const sameType = active.type == EntityType.ScriptTemplate;
-      const sameIndex = active.index == templateIndex;
-
-      if (!sameIndex || !sameType || initialLoad) {
-        setInitialLoad(false);
-        setActive({
-          type: EntityType.ScriptTemplate,
-          index: templateIndex,
-        });
-        const templateId = project.scriptTemplates[templateIndex].id;
-        return <Redirect to={`/${project.id}?type=script&id=${templateId}`} />;
-      }
-      break;
-    }
-
-    case 'account': {
-      if (id && id !== '') {
-        const foundIndex = project.accounts.findIndex(
-          (template) => template.id === id,
-        );
-        if (foundIndex > 0) {
-          templateIndex = foundIndex;
-        }
-      }
-      const sameType = active.type == EntityType.Account;
-      const sameIndex = active.index == templateIndex;
-
-      if (!sameIndex || !sameType || initialLoad) {
-        setInitialLoad(false);
-        setActive({
-          type: EntityType.Account,
-          index: templateIndex,
-        });
-        const templateId = project.accounts[templateIndex].id;
-        return <Redirect to={`/${project.id}?type=account&id=${templateId}`} />;
-      }
-      break;
-    }
-    default:
-      return null;
-  }
-
   return (
     <ProjectContext.Provider
       value={{
diff --git a/src/providers/Project/projectMutator.ts b/src/providers/Project/projectMutator.ts
index c4937a29..a5d97f08 100644
--- a/src/providers/Project/projectMutator.ts
+++ b/src/providers/Project/projectMutator.ts
@@ -100,14 +100,14 @@ export default class ProjectMutator {
         projectId: this.projectId,
       },
     });
-
+    
     if (isFork) {
       Mixpanel.track('Project forked', { projectId: this.projectId });
     } else {
       Mixpanel.track('Project saved', { projectId: this.projectId });
     }
-
-    navigate(`/${this.projectId}`, { replace: true });
+    
+    navigate(`/${this.projectId}`, { replace: true});
   }
 
   async updateAccountDraftCode(account: Account, code: string) {

From 229bc3a2798aea6500f113680702b47b542b666f Mon Sep 17 00:00:00 2001
From: hichana <hichana@gmail.com>
Date: Tue, 2 Nov 2021 09:09:05 +0900
Subject: [PATCH 2/3] add revisions based on feedback from Max

---
 src/components/AccountList.tsx          | 4 ++--
 src/components/ExportButton.tsx         | 3 ++-
 src/components/Sidebar.tsx              | 4 ++--
 src/containers/Editor/index.tsx         | 4 ++--
 src/providers/Project/index.tsx         | 1 -
 src/providers/Project/projectDefault.ts | 9 +++++----
 src/util/url.ts                         | 2 ++
 7 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/AccountList.tsx b/src/components/AccountList.tsx
index c860c2e7..6e222719 100644
--- a/src/components/AccountList.tsx
+++ b/src/components/AccountList.tsx
@@ -11,7 +11,7 @@ import {useProject} from "providers/Project/projectHooks";
 import Avatar from "components/Avatar";
 import styled from "@emotion/styled";
 import {ExportButton} from "components/ExportButton";
-import {getParams, isUUUID} from "../util/url";
+import {getParams, isUUUID, localProjectId} from "../util/url";
 
 function getDeployedContracts(account: Account): string {
   const contracts = account.deployedContracts.map(
@@ -37,7 +37,7 @@ const AccountList: React.FC = () => {
 
   const location = useLocation();
   const params = getParams(location.search)
-  const projectPath = isUUUID(project.id) ? project.id : "LOCAL-project"
+  const projectPath = isUUUID(project.id) ? project.id : localProjectId 
 
   return (
     <Root>
diff --git a/src/components/ExportButton.tsx b/src/components/ExportButton.tsx
index a6d2e0c8..9cced4fb 100644
--- a/src/components/ExportButton.tsx
+++ b/src/components/ExportButton.tsx
@@ -4,6 +4,7 @@ import { FaClipboard, FaClipboardCheck } from 'react-icons/fa';
 import { SidebarItemExport } from 'layout/SidebarItemExport';
 import { useProject } from 'providers/Project/projectHooks';
 import { generateCode } from '../util/generate-code';
+import { localProjectId } from '../util/url'
 
 type ExportButtonProps = {
   id: string;
@@ -18,7 +19,7 @@ export const ExportButton = (props: ExportButtonProps) => {
     successDuration: 1000,
   });
 
-  return project.id === 'LOCAL-project' ? null : (
+  return project.id === localProjectId ? null : (
     <SidebarItemExport
       onClick={setCopied}
       title={'Copy snippet to clipboard'}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index a97976ef..212c073b 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -6,7 +6,7 @@ import { Sidebar as SidebarRoot } from "layout/Sidebar";
 
 import { useProject } from "providers/Project/projectHooks";
 import { navigate } from "@reach/router";
-import { isUUUID } from "../util/url";
+import { isUUUID, localProjectId } from "../util/url";
 
 const Sidebar: React.FC = () => {
   const {
@@ -22,7 +22,7 @@ const Sidebar: React.FC = () => {
 
   if (isLoading) return <p>Loading...</p>;
 
-  const projectPath = isUUUID(project.id) ? project.id : "LOCAL-project"
+  const projectPath = isUUUID(project.id) ? project.id : localProjectId
 
   return (
     <SidebarRoot>
diff --git a/src/containers/Editor/index.tsx b/src/containers/Editor/index.tsx
index 785b3b57..034d9398 100644
--- a/src/containers/Editor/index.tsx
+++ b/src/containers/Editor/index.tsx
@@ -7,7 +7,7 @@ import useGetProject from '../../providers/Project/projectHooks';
 import { EntityType } from "providers/Project";
 
 import EditorLayout from "./layout";
-import { isUUUID, getParams, scriptTypes } from "../../util/url";
+import { isUUUID, getParams, scriptTypes, localProjectId } from "../../util/url";
 import { navigate } from "@reach/router";
 
 const Playground: any = (props: any) => {
@@ -17,7 +17,7 @@ const Playground: any = (props: any) => {
   const params = getParams(props.location.search);
   const { type, id } = params;
 
-  const isLocalProject = projectId === "LOCAL-project";
+  const isLocalProject = projectId === localProjectId;
   const correctUUID = isUUUID(projectId);
   
   const { data } = useGetActiveProjectQuery();
diff --git a/src/providers/Project/index.tsx b/src/providers/Project/index.tsx
index 9b66be00..cdf4c77e 100644
--- a/src/providers/Project/index.tsx
+++ b/src/providers/Project/index.tsx
@@ -254,7 +254,6 @@ export const ProjectProvider: React.FC<ProjectProviderProps> = ({
   };
 
   const getActiveEditor = (): ActiveEditor => {
-    // console.log("GET ACTIVE EDITOR ACTIVE:", active);
     
     switch (active.type) {
       case EntityType.Account:
diff --git a/src/providers/Project/projectDefault.ts b/src/providers/Project/projectDefault.ts
index c607aa9a..663d5a20 100644
--- a/src/providers/Project/projectDefault.ts
+++ b/src/providers/Project/projectDefault.ts
@@ -5,6 +5,7 @@ import {
   ScriptTemplate
 } from "api/apollo/generated/graphql";
 import { strToSeed, uuid } from "../../util/rng";
+import { localProjectId } from "../../util/url";
 
 const DEFAULT_ACCOUNT_1 = `// HelloWorld.cdc
 //
@@ -159,7 +160,7 @@ export function createLocalProject(
   const accountEntities: Account[] = accounts.map((script, i) => {
     return {
       __typename: "Account",
-      id: `LOCAL-account-${i}`,
+      id: `local-account-${i}`,
       address: `000000000000000000000000000000000000000${i + 1}`,
       title: "",
       draftCode: script,
@@ -174,7 +175,7 @@ export function createLocalProject(
       const { title, code } = script
       return {
         __typename: "TransactionTemplate",
-        id: `LOCAL-tx-temp-${i}`,
+        id: `local-tx-temp-${i}`,
         title: title || `Transaction ${i + 1}`,
         script: code,
         index: i,
@@ -187,7 +188,7 @@ export function createLocalProject(
       const { title, code } = script
       return {
         __typename: "ScriptTemplate",
-        id: `LOCAL-script-temp-${i}`,
+        id: `local-script-temp-${i}`,
         title: title || `Script ${i + 1}`,
         script: code,
         index: i,
@@ -197,7 +198,7 @@ export function createLocalProject(
 
   return {
     __typename: "Project",
-    id: "LOCAL-project",
+    id: localProjectId,
     publicId: "",
     persist: false,
     mutable: false,
diff --git a/src/util/url.ts b/src/util/url.ts
index 5edb7a12..aa6b9c37 100644
--- a/src/util/url.ts
+++ b/src/util/url.ts
@@ -12,3 +12,5 @@ export const getParams = (url: string): any =>  {
 }
 
 export const scriptTypes = ["account", "tx", "script"]
+
+export const localProjectId = "local-project"

From 39e9b5376061dfb59a7f37415b43cc050ad8708a Mon Sep 17 00:00:00 2001
From: hichana <hichana@gmail.com>
Date: Wed, 3 Nov 2021 09:06:33 +0900
Subject: [PATCH 3/3] make localProjectId into a const naming convention
 'LOCAL_PROJECT_ID'

---
 src/components/AccountList.tsx          | 4 ++--
 src/components/ExportButton.tsx         | 4 ++--
 src/components/Sidebar.tsx              | 4 ++--
 src/containers/Editor/index.tsx         | 4 ++--
 src/providers/Project/projectDefault.ts | 4 ++--
 src/util/url.ts                         | 2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/AccountList.tsx b/src/components/AccountList.tsx
index 6e222719..0def0584 100644
--- a/src/components/AccountList.tsx
+++ b/src/components/AccountList.tsx
@@ -11,7 +11,7 @@ import {useProject} from "providers/Project/projectHooks";
 import Avatar from "components/Avatar";
 import styled from "@emotion/styled";
 import {ExportButton} from "components/ExportButton";
-import {getParams, isUUUID, localProjectId} from "../util/url";
+import {getParams, isUUUID, LOCAL_PROJECT_ID} from "../util/url";
 
 function getDeployedContracts(account: Account): string {
   const contracts = account.deployedContracts.map(
@@ -37,7 +37,7 @@ const AccountList: React.FC = () => {
 
   const location = useLocation();
   const params = getParams(location.search)
-  const projectPath = isUUUID(project.id) ? project.id : localProjectId 
+  const projectPath = isUUUID(project.id) ? project.id : LOCAL_PROJECT_ID 
 
   return (
     <Root>
diff --git a/src/components/ExportButton.tsx b/src/components/ExportButton.tsx
index 9cced4fb..f88b5fa8 100644
--- a/src/components/ExportButton.tsx
+++ b/src/components/ExportButton.tsx
@@ -4,7 +4,7 @@ import { FaClipboard, FaClipboardCheck } from 'react-icons/fa';
 import { SidebarItemExport } from 'layout/SidebarItemExport';
 import { useProject } from 'providers/Project/projectHooks';
 import { generateCode } from '../util/generate-code';
-import { localProjectId } from '../util/url'
+import { LOCAL_PROJECT_ID } from '../util/url'
 
 type ExportButtonProps = {
   id: string;
@@ -19,7 +19,7 @@ export const ExportButton = (props: ExportButtonProps) => {
     successDuration: 1000,
   });
 
-  return project.id === localProjectId ? null : (
+  return project.id === LOCAL_PROJECT_ID ? null : (
     <SidebarItemExport
       onClick={setCopied}
       title={'Copy snippet to clipboard'}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 212c073b..fb38e0b5 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -6,7 +6,7 @@ import { Sidebar as SidebarRoot } from "layout/Sidebar";
 
 import { useProject } from "providers/Project/projectHooks";
 import { navigate } from "@reach/router";
-import { isUUUID, localProjectId } from "../util/url";
+import { isUUUID, LOCAL_PROJECT_ID } from "../util/url";
 
 const Sidebar: React.FC = () => {
   const {
@@ -22,7 +22,7 @@ const Sidebar: React.FC = () => {
 
   if (isLoading) return <p>Loading...</p>;
 
-  const projectPath = isUUUID(project.id) ? project.id : localProjectId
+  const projectPath = isUUUID(project.id) ? project.id : LOCAL_PROJECT_ID
 
   return (
     <SidebarRoot>
diff --git a/src/containers/Editor/index.tsx b/src/containers/Editor/index.tsx
index 034d9398..15b491b9 100644
--- a/src/containers/Editor/index.tsx
+++ b/src/containers/Editor/index.tsx
@@ -7,7 +7,7 @@ import useGetProject from '../../providers/Project/projectHooks';
 import { EntityType } from "providers/Project";
 
 import EditorLayout from "./layout";
-import { isUUUID, getParams, scriptTypes, localProjectId } from "../../util/url";
+import { isUUUID, getParams, scriptTypes, LOCAL_PROJECT_ID } from "../../util/url";
 import { navigate } from "@reach/router";
 
 const Playground: any = (props: any) => {
@@ -17,7 +17,7 @@ const Playground: any = (props: any) => {
   const params = getParams(props.location.search);
   const { type, id } = params;
 
-  const isLocalProject = projectId === localProjectId;
+  const isLocalProject = projectId === LOCAL_PROJECT_ID;
   const correctUUID = isUUUID(projectId);
   
   const { data } = useGetActiveProjectQuery();
diff --git a/src/providers/Project/projectDefault.ts b/src/providers/Project/projectDefault.ts
index 663d5a20..c9b653dd 100644
--- a/src/providers/Project/projectDefault.ts
+++ b/src/providers/Project/projectDefault.ts
@@ -5,7 +5,7 @@ import {
   ScriptTemplate
 } from "api/apollo/generated/graphql";
 import { strToSeed, uuid } from "../../util/rng";
-import { localProjectId } from "../../util/url";
+import { LOCAL_PROJECT_ID } from "../../util/url";
 
 const DEFAULT_ACCOUNT_1 = `// HelloWorld.cdc
 //
@@ -198,7 +198,7 @@ export function createLocalProject(
 
   return {
     __typename: "Project",
-    id: localProjectId,
+    id: LOCAL_PROJECT_ID,
     publicId: "",
     persist: false,
     mutable: false,
diff --git a/src/util/url.ts b/src/util/url.ts
index aa6b9c37..feb102ee 100644
--- a/src/util/url.ts
+++ b/src/util/url.ts
@@ -13,4 +13,4 @@ export const getParams = (url: string): any =>  {
 
 export const scriptTypes = ["account", "tx", "script"]
 
-export const localProjectId = "local-project"
+export const LOCAL_PROJECT_ID = "local-project"