use placeholder popup in AccountBottomBar

Author: hichana

src/components/AccountBottomBar.tsx

@@ -6,6 +6,7 @@ import {IoMdAddCircleOutline} from "react-icons/io";
 import { useProject } from 'providers/Project/projectHooks';
 import { isUUUID } from "../util/url";
 import useMousePosition from '../hooks/useMousePosition';
+import AutoTemplatePopup from 'components/AutoTemplatePopup'
 import { Feedback as FeedbackRoot } from 'layout/Feedback';
 import { FeedbackActions } from 'layout/FeedbackActions';
 import { SidebarItemInsert } from 'layout/SidebarItemInsert';
@@ -149,7 +150,7 @@ const IdentifierList: React.FC<TypeListProps> = ({
                 {types[identifier] == "Link" &&
                   <BottomBarItemInsert onClick={ async () => {
                     const res = await mutator.createTransactionTemplate("", `New Transaction`)
-                    navigate(`/${projectPath}?type=tx&id=${res.data?.createTransactionTemplate?.id}&storage=${selectedResourceAccount + 1 || 'none'}`)
+                    navigate(`/${projectPath}?type=tx&id=${res.data?.createTransactionTemplate?.id}&storage=${selectedResourceAccount || 'none'}`)
                   }}>
                     <IoMdAddCircleOutline size="20px" />
                   </BottomBarItemInsert>
@@ -320,6 +321,8 @@ const AccountState: React.FC<{
 const AccountBottomBar: React.FC = () => {
   const { project, isLoading, selectedResourceAccount } = useProject();
 
+  const [showTemplatePopup, toggleShowTemplatePopup] = useState< boolean >(false)
+
   const storageMap: { [account: string]: number} = {
     "0x01": 0,
     "0x02": 1,
@@ -340,6 +343,10 @@ const AccountBottomBar: React.FC = () => {
               return <FeedbackActions />;
             }}
           />
+        <AutoTemplatePopup visible={showTemplatePopup} triggerClose={()=>{
+          toggleShowTemplatePopup(false)
+        }}/>
+
         </>
       )}
     </FeedbackRoot>

src/components/AutoTemplatePopup.tsx

@@ -0,0 +1,147 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { uniqueNamesGenerator, adjectives, colors, } from 'unique-names-generator';
+import { FaSyncAlt } from 'react-icons/fa';
+import { useProject } from 'providers/Project/projectHooks';
+import { default as FlowButton } from 'components/Button';
+
+import {
+  FullScreenContainer,
+  PopupContainer,
+  PopupHeader,
+  WhiteOverlay,
+  SpaceBetween,
+} from 'components/Common';
+
+import { createZip } from '../util/generator';
+
+import {
+  Input,
+  InputBlock, InputIcon,
+  Label,
+} from 'components/Arguments/SingleArgument/styles';
+
+const generateProjectName = () => {
+  const prefix: string = uniqueNamesGenerator({
+    dictionaries: [colors, adjectives],
+    separator: '-',
+    length: 2,
+  })
+
+  return `${prefix}-playground`
+}
+
+const AutoTemplatePopup: React.FC<{
+  visible: boolean;
+  triggerClose?: (e: React.SyntheticEvent) => any;
+}> = ({ visible, triggerClose }) => {
+  const { project } = useProject();
+  const [processing, setProcessing] = useState(false);
+  const [projectName, setProjectName] = useState(generateProjectName());
+  const [folderName, setFolderName] = useState('cadence');
+
+  const regenerateProjectName = () => {
+    const newName = generateProjectName()
+    setProjectName(newName)
+  }
+
+  const firstInput = useRef<HTMLInputElement>(null!);
+
+  useEffect(() => {
+    firstInput.current.focus();
+  }, [firstInput.current]);
+
+  const containerFrames = {
+    visible: {
+      display: 'flex',
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+      zIndex: 20,
+    },
+    hidden: {
+      opacity: 0,
+      transition: {
+        when: 'afterChildren',
+        staggerChildren: 0,
+        staggerDirection: -1,
+      },
+      zIndex: -1,
+    },
+  };
+
+  const spring = {
+    type: 'spring',
+    damping: 11,
+    stiffness: 120,
+  };
+
+  const popupFrames = {
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: spring,
+    },
+    hidden: {
+      opacity: 0,
+      y: -200,
+      transition: {
+        ease: [1, 0.5, 0, 0]
+      },
+    },
+  };
+
+  return (
+    <FullScreenContainer
+      elevation={15}
+      initial="hidden"
+      animate={visible ? 'visible' : 'hidden'}
+      variants={containerFrames}
+    >
+      <PopupContainer width="350px" variants={popupFrames}>
+        <PopupHeader mb="20px" color="#575E89" lineColor="#B4BEFC">
+          Export Project
+        </PopupHeader>
+        <InputBlock mb={'12px'}>
+          <Label>Project Name</Label>
+          <Input
+            ref={firstInput}
+            value={projectName}
+            onChange={event => setProjectName(event.target.value)}
+          />
+          <InputIcon icon={<FaSyncAlt/>} onClick={regenerateProjectName}/>
+        </InputBlock>
+        <InputBlock mb={'30px'}>
+          <Label>Cadence Folder</Label>
+          <Input
+            value={folderName}
+            onChange={event => setFolderName(event.target.value)}
+          />
+        </InputBlock>
+        {processing ? (
+          <p>Processing...</p>
+        ) : (
+          <SpaceBetween>
+            <FlowButton className="grey modal" onClick={triggerClose}>
+              Close
+            </FlowButton>
+            <FlowButton
+              className="violet modal"
+              onClick={async () => {
+                setProcessing(true);
+                await createZip(folderName, projectName, project);
+                setProcessing(false);
+                triggerClose(null);
+              }}
+            >
+              Export
+            </FlowButton>
+          </SpaceBetween>
+        )}
+      </PopupContainer>
+      <WhiteOverlay onClick={triggerClose} />
+    </FullScreenContainer>
+  );
+};
+
+export default AutoTemplatePopup;