Clean up accounts

src/components/ContextMenu.tsx

@@ -29,6 +29,7 @@ export const ContextMenu = ({ options, showEllipsis }: ContextMenuType) => {
     },
     menuRelative: {
       position: 'relative',
+      visibility: isOpen ? 'visible' : 'hidden',
     },
     menuAbsolute: {
       display: 'flex',
@@ -71,6 +72,7 @@ export const ContextMenu = ({ options, showEllipsis }: ContextMenuType) => {
   };
 
   const ref = useRef(null);
+  const menuRef = useRef(null);
 
   useEffect(() => {
     const handleClickOutside = (event: Event) => {
@@ -86,6 +88,14 @@ export const ContextMenu = ({ options, showEllipsis }: ContextMenuType) => {
 
   if (!showEllipsis) return null;
 
+  if (isOpen) {
+    const rect = menuRef?.current?.getBoundingClientRect();
+    const scrollTop = document.documentElement.scrollTop;
+    const top = rect.top + scrollTop;
+    if (top < 0) {
+      menuRef.current.style.bottom = `-${rect.height}px`;
+    }
+  }
   return (
     <Container sx={styles.container} ref={ref}>
       <Button
@@ -96,25 +106,23 @@ export const ContextMenu = ({ options, showEllipsis }: ContextMenuType) => {
       >
         {ExplorerEllipseIcon()}
       </Button>
-      {isOpen && (
-        <Flex sx={styles.menuRelative}>
-          <Flex sx={styles.menuAbsolute}>
-            {options.map(
-              ({ icon, name, onClick, args }: ContextMenuOptionsType) => (
-                <Button
-                  sx={styles.ctaOption}
-                  variant="explorer"
-                  key={name}
-                  onClick={() => clickOption(onClick, args)}
-                >
-                  {getIcon(icon)}
-                  <Text>{name}</Text>
-                </Button>
-              ),
-            )}
-          </Flex>
+      <Flex sx={styles.menuRelative}>
+        <Flex sx={styles.menuAbsolute} ref={menuRef}>
+          {options.map(
+            ({ icon, name, onClick, args }: ContextMenuOptionsType) => (
+              <Button
+                sx={styles.ctaOption}
+                variant="explorer"
+                key={name}
+                onClick={() => clickOption(onClick, args)}
+              >
+                {getIcon(icon)}
+                <Text>{name}</Text>
+              </Button>
+            ),
+          )}
         </Flex>
-      )}
+      </Flex>
     </Container>
   );
 };

src/providers/Project/projectDefault.ts

@@ -5,136 +5,59 @@ import {
   ScriptTemplate,
   TransactionTemplate,
 } from 'api/apollo/generated/graphql';
+import { accountIndexes } from 'util/accounts';
 import { strToSeed, uuid } from 'util/rng';
 import { LOCAL_PROJECT_ID } from 'util/url';
 
-const DEFAULT_CONTRACT_1 = `// HelloWorld.cdc
+const HelloWorldContract = `// HelloWorld.cdc
 //
 // Welcome to Cadence! This is one of the simplest programs you can deploy on Flow.
 //
 // The HelloWorld contract contains a single string field and a public getter function.
 //
 // Follow the "Hello, World!" tutorial to learn more: https://docs.onflow.org/cadence/tutorial/02-hello-world/
-
-access(all) contract HelloWorld {
-
-    // Declare a public field of type String.
-    //
-    // All fields must be initialized in the init() function.
-    access(all) let greeting: String
-
-    // The init() function is required if the contract contains any fields.
-    init() {
-        self.greeting = "Hello, World!"
-    }
-
-    // Public function that returns our friendly greeting!
-    access(all) fun hello(): String {
-        return self.greeting
-    }
-}
-`;
-
-const DEFAULT_CONTRACT_2 = `access(all) contract HelloWorld {
-
+pub contract HelloWorld {
   // Declare a public field of type String.
   //
   // All fields must be initialized in the init() function.
-  access(all) let greeting: String
-
-  // The init() function is required if the contract contains any fields.
-  init() {
-      self.greeting = "Hello from account 2!"
-  }
+  pub var greeting: String
 
   // Public function that returns our friendly greeting!
-  access(all) fun hello(): String {
-      return self.greeting
-  }
-}
-`;
-
-const DEFAULT_CONTRACT_3 = `access(all) contract HelloWorld {
-
-  // Declare a public field of type String.
-  //
-  // All fields must be initialized in the init() function.
-  access(all) let greeting: String
-
-  // The init() function is required if the contract contains any fields.
-  init() {
-      self.greeting = "Hello from account 3!"
+  access(all) fun changeGreeting(newGreeting: String) {
+    self.greeting = newGreeting
   }
 
   // Public function that returns our friendly greeting!
   access(all) fun hello(): String {
       return self.greeting
   }
-}
-`;
-
-const DEFAULT_CONTRACT_4 = `access(all) contract HelloWorld {
-
-  // Declare a public field of type String.
-  //
-  // All fields must be initialized in the init() function.
-  access(all) let greeting: String
 
   // The init() function is required if the contract contains any fields.
   init() {
-      self.greeting = "Hello from account 4!"
-  }
-
-  // Public function that returns our friendly greeting!
-  access(all) fun hello(): String {
-      return self.greeting
-  }
-}
-`;
-
-const DEFAULT_CONTRACT_5 = `access(all) contract HelloWorld {
-
-  // Declare a public field of type String.
-  //
-  // All fields must be initialized in the init() function.
-  access(all) let greeting: String
-
-  // The init() function is required if the contract contains any fields.
-  init() {
-      self.greeting = "Hello from account 5!"
-  }
-
-  // Public function that returns our friendly greeting!
-  access(all) fun hello(): String {
-      return self.greeting
+    self.greeting = "Hello, World!"
   }
 }
 `;
 
 export const DEFAULT_ACCOUNT_STATE = '{}';
 
-const DEFAULT_CONTRACTS = [
-  DEFAULT_CONTRACT_1,
-  DEFAULT_CONTRACT_2,
-  DEFAULT_CONTRACT_3,
-  DEFAULT_CONTRACT_4,
-  DEFAULT_CONTRACT_5,
-];
-
 const DEFAULT_TRANSACTION = `import HelloWorld from 0x05
 
-transaction {
+transaction(greeting: String) {
 
-  prepare(acct: AuthAccount) {}
+  prepare(acct: AuthAccount) {
+    log(acct.address)
+  }
 
   execute {
-    log(HelloWorld.hello())
+    HelloWorld.changeGreeting(newGreeting: greeting)
   }
 }
 `;
 
-const DEFAULT_SCRIPT = `pub fun main(): Int {
-  return 1
+const DEFAULT_SCRIPT = `import HelloWorld from 0x05
+pub fun main() {
+  log(HelloWorld.hello())
 }
 `;
 
@@ -155,13 +78,15 @@ export function createDefaultProject(): Project {
     SEED_TITLE,
     SEED_DESCRIPTION,
     SEED_README,
-    DEFAULT_CONTRACTS.map((contract) => contract),
-    DEFAULT_CONTRACTS.map((contract, i) => ({
-      title: `Contract ${i + 1}`,
-      code: contract,
-    })),
-    [{ title: 'Transaction', code: DEFAULT_TRANSACTION }],
-    [{ title: 'Script', code: DEFAULT_SCRIPT }],
+    accountIndexes(),
+    [
+      {
+        title: `HelloWorld`,
+        code: HelloWorldContract,
+      },
+    ],
+    [{ title: 'ChangeGreeting', code: DEFAULT_TRANSACTION }],
+    [{ title: 'GetGreeting', code: DEFAULT_SCRIPT }],
   );
 }
 
@@ -181,10 +106,10 @@ export function createLocalProject(
   transactionTemplates: Array<ScriptDetails>,
   scriptTemplates: Array<ScriptDetails>,
 ): Project {
-  const accountEntities: Account[] = accounts.map((_account, i) => {
+  const accountEntities: Account[] = accounts.map((_account) => {
     return {
       __typename: 'Account',
-      address: `000000000000000${i + 1}`,
+      address: `000000000000000${_account}`,
       deployedContracts: [],
       state: DEFAULT_ACCOUNT_STATE,
     };

src/util/accounts.ts

@@ -1,3 +1,4 @@
+const accountAddressIndexes = ['5', '6', '7', '8', '9'];
 const accountAddresses = ['0x05', '0x06', '0x07', '0x08', '0x09'];
 export const storageMapByIndex = (index: number): string => {
   if (index < 0) return null;
@@ -13,3 +14,7 @@ export const addressToAccount = (address: string): string => {
   const acctNum = address.charAt(address.length - 1);
   return `0x0${acctNum}`;
 };
+
+export const accountIndexes = (): string[] => {
+  return accountAddressIndexes;
+};