feat: add windowless frame

stacks-archive · Sep 25, 2020 · 26a99ad · 26a99ad
1 parent 344afbb
commit 26a99ad
Show file tree

Hide file tree

Showing 12 changed files with 64 additions and 10 deletions.
diff --git a/app/app.html b/app/app.html
@@ -19,6 +19,7 @@
     </script>
   </head>
   <body>
+    <div class="draggable-bar"></div>
     <div id="root"></div>
     <script>
       if (typeof process === 'object') {

diff --git a/app/components/onboarding/onboarding-back-button.tsx b/app/components/onboarding/onboarding-back-button.tsx
@@ -10,7 +10,7 @@ export const OnboardingBackButton: React.FC<OnboardingBackButton> = props => (
     width="32px"
     height="32px"
     type="button"
-    top="20px"
+    top="60px"
     left="20px"
     style={{
       position: 'absolute',

diff --git a/app/hooks/use-back-url.hook.ts b/app/hooks/use-back-url.hook.ts
@@ -0,0 +1,12 @@
+import { useEffect, useContext } from 'react';
+import { BackContext } from '../pages/root';
+
+export function useBackButton(urlToGoBackTo?: string | null) {
+  const { backUrl, setBackUrl } = useContext(BackContext);
+  useEffect(() => {
+    if (!urlToGoBackTo) return;
+    setBackUrl(urlToGoBackTo);
+    return () => setBackUrl(null);
+  }, [setBackUrl, urlToGoBackTo]);
+  return backUrl;
+}
diff --git a/app/main.dev.ts b/app/main.dev.ts
@@ -67,6 +67,7 @@ const createWindow = async () => {
     show: false,
     width: 1024,
     height: 728,
+    titleBarStyle: 'hiddenInset',
     webPreferences:
       // SECURITY: Remove node env
       process.env.NODE_ENV === 'development' || process.env.E2E_BUILD === 'true'

diff --git a/app/pages/onboarding/01-welcome/welcome.tsx b/app/pages/onboarding/01-welcome/welcome.tsx
@@ -8,9 +8,11 @@ import {
   OnboardingButton,
   OnboardingText,
 } from '../../../components/onboarding';
+import { useBackButton } from '../../../hooks/use-back-url.hook';
 
 export const Welcome: React.FC = () => {
   const history = useHistory();
+  useBackButton(null);
   return (
     <Onboarding>
       <OnboardingTitle>Stacks Wallet</OnboardingTitle>

diff --git a/app/pages/onboarding/02-create-wallet/create-wallet.tsx b/app/pages/onboarding/02-create-wallet/create-wallet.tsx
@@ -13,10 +13,12 @@ import {
   OnboardingFooterLink,
   OnboardingBackButton,
 } from '../../../components/onboarding';
+import { useBackButton } from '../../../hooks/use-back-url.hook';
 
 export const CreateWallet: React.FC = () => {
   const dispatch = useDispatch();
   const history = useHistory();
+  useBackButton(routes.WELCOME);
 
   const createSoftwareWallet = () => {
     dispatch(onboardingMnemonicGenerationStep({ stepDelayMs: 1_500 }));

diff --git a/app/pages/onboarding/03-restore-wallet/restore-wallet.tsx b/app/pages/onboarding/03-restore-wallet/restore-wallet.tsx
@@ -10,6 +10,7 @@ import { ErrorLabel } from '../../../components/error-label';
 import { ErrorText } from '../../../components/error-text';
 import { persistMnemonic } from '../../../store/keys/keys.actions';
 import { safeAwait } from '../../../utils/safe-await';
+import { useBackButton } from '../../../hooks/use-back-url.hook';
 import {
   Onboarding,
   OnboardingTitle,
@@ -24,6 +25,7 @@ export const RestoreWallet: React.FC = () => {
   const [mnemonic, setMnemonic] = useState('');
   const [error, setError] = useState<string | null>(null);
   const history = useHistory();
+  useBackButton(routes.WELCOME);
   const dispatch = useDispatch();
 
   const handleMnemonicInput = (e: React.FormEvent<HTMLInputElement>) => {

diff --git a/app/pages/onboarding/05-secret-key/secret-key.tsx b/app/pages/onboarding/05-secret-key/secret-key.tsx
@@ -16,11 +16,13 @@ import {
   OnboardingBackButton,
 } from '../../../components/onboarding';
 import { selectMnemonic } from '../../../store/keys/keys.reducer';
+import { useBackButton } from '../../../hooks/use-back-url.hook';
 
 const COPY_TOAST_TIMEOUT = 2_500;
 
 export const SecretKey: React.FC = () => {
   const history = useHistory();
+  useBackButton(routes.CREATE);
   const [copied, setCopiedState] = useState(false);
   const mnemonic = useSelector(selectMnemonic);
 

diff --git a/app/pages/onboarding/06-save-key/save-key.tsx b/app/pages/onboarding/06-save-key/save-key.tsx
@@ -10,9 +10,11 @@ import {
   OnboardingBackButton,
 } from '../../../components/onboarding';
 import { Collapse, onboardingFaq } from '../../../components/secret-key-faq';
+import { useBackButton } from '../../../hooks/use-back-url.hook';
 
 export const SaveKey: React.FC = () => {
   const history = useHistory();
+  useBackButton(routes.SECRET_KEY);
   return (
     <Onboarding>
       <OnboardingTitle>Save your Secret Key</OnboardingTitle>

diff --git a/app/pages/onboarding/07-verify-key/verify-key.tsx b/app/pages/onboarding/07-verify-key/verify-key.tsx
@@ -8,6 +8,7 @@ import routes from '../../../constants/routes.json';
 import { selectMnemonic } from '../../../store/keys';
 import { ErrorLabel } from '../../../components/error-label';
 import { ErrorText } from '../../../components/error-text';
+import { useBackButton } from '../../../hooks/use-back-url.hook';
 import {
   Onboarding,
   OnboardingTitle,
@@ -20,6 +21,7 @@ import {
 
 export const VerifyKey: React.FC = () => {
   const history = useHistory();
+  useBackButton(routes.SECRET_KEY);
   const mnemonic = useSelector(selectMnemonic);
   const [inputMnemonic, setInputMnemonic] = useState('');
   const [hasSubmitted, setHasSubmitted] = useState(false);

diff --git a/app/pages/root.tsx b/app/pages/root.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState, createContext } from 'react';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router';
 import { createGlobalStyle } from 'styled-components';
@@ -16,24 +16,49 @@ const GlobalStyle = createGlobalStyle`
     min-height: 100vh;
     max-height: 100vh;
   }
+  .draggable-bar {
+    position: absolute;
+    height: 44px;
+    width: 100%;
+    z-index: 9;
+    padding-left: 90px;
+    box-shadow: 0px 1px 2px rgba(15, 17, 23, 0.08);
+    -webkit-user-select: none;
+    -webkit-app-region: drag;
+  }
 `;
 
 interface RootProps {
   store: Store;
   history: History;
 }
 
+interface BackContext {
+  backUrl: null | string;
+  setBackUrl(url: null | string): void;
+}
+
+export const BackContext = createContext<BackContext>({
+  backUrl: null,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setBackUrl: (_url: string) => {},
+});
+
 function Root({ store, history }: RootProps) {
+  const [backUrl, setBackUrl] = useState<string | null>(null);
+
   useEffect(() => void loadFonts(), []);
 
   return (
     <Provider store={store}>
-      <CSSReset />
-      <GlobalStyle />
-      <NetworkMessage />
-      <ConnectedRouter history={history}>
-        <Routes />
-      </ConnectedRouter>
+      <BackContext.Provider value={{ backUrl, setBackUrl }}>
+        <CSSReset />
+        <GlobalStyle />
+        <NetworkMessage />
+        <ConnectedRouter history={history}>
+          <Routes />
+        </ConnectedRouter>
+      </BackContext.Provider>
     </Provider>
   );
 }

diff --git a/app/routes.tsx b/app/routes.tsx
@@ -1,6 +1,9 @@
-import React from 'react';
-import { useStore } from 'react-redux';
+import React, { useContext } from 'react';
+import ReactDOM from 'react-dom';
 import { Switch, Route, Redirect } from 'react-router-dom';
+import { useHistory } from 'react-router';
+import { useStore } from 'react-redux';
+import { Button, ArrowIcon } from '@blockstack/ui';
 
 import routes from './constants/routes.json';
 import { Home } from './pages/home/home';