WIP - test animations

appveyor.yml

@@ -39,7 +39,6 @@ build_script:
 
 # Upload build artifacts but only for commits pushes, no pull requests.
 after_build:
-- if defined APPVEYOR_PULL_REQUEST_NUMBER appveyor exit
 # %APPVEYOR_BUILD_FOLDER% is the path to the git clone.
 - mkdir %APPVEYOR_BUILD_FOLDER%
 # Copy build artifacts back to the git clone dir because they can only be

frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.tsx

@@ -1,3 +1,5 @@
+//@ts-nocheck
+
 /**
  * Copyright 2018 Shift Devices AG
  * Copyright 2023 Shift Crypto AG
@@ -24,6 +26,7 @@ import { View, ViewContent } from '@/components/view/view';
 import { BitBox02, BitBox02Inverted } from '@/components/icon/logo';
 import { Status } from '@/components/status/status';
 import { ToggleShowFirmwareHash } from './toggleshowfirmwarehash';
+import { FreshInstall } from '@/components/devices/bitbox02bootloader/freshinstall';
 
 type TProps = {
   deviceID: string;
@@ -38,6 +41,13 @@ export const BitBox02Bootloader = ({ deviceID }: TProps) => {
   );
   const versionInfo = useLoad(() => bitbox02BootloaderAPI.getVersionInfo(deviceID));
 
+  return <View fitContent verticallyCentered width="960px">
+    <ViewContent>
+      <FreshInstall deviceID={deviceID} />
+    </ViewContent>
+  </View>;
+
+
   if (versionInfo === undefined) {
     return null;
   }

frontends/web/src/components/devices/bitbox02bootloader/freshinstall.tsx

@@ -0,0 +1,136 @@
+
+import { BitBox02StylizedDark, BitBox02StylizedLight } from '@/components/icon';
+
+import { useTranslation } from 'react-i18next';
+import * as bitbox02BootloaderAPI from '@/api/bitbox02bootloader';
+import { useLoad, useSync } from '@/hooks/api';
+import { useDarkmode } from '@/hooks/darkmode';
+import { Button } from '@/components/forms';
+import styles from './styles.module.css';
+import { useState } from 'react';
+
+
+type TProps = {
+    deviceID: string;
+  }
+
+export const FreshInstall = ({ deviceID }: TProps) => {
+  const { t } = useTranslation();
+  const [fadeOut, setFadeout] = useState(false);
+  const [successInstall, setSuccessInstal] = useState(false);
+
+
+  //   const status = {
+  //     upgrading: true,
+  //     errMsg: undefined,
+  //     progress: 0.3,
+  //     upgradeSuccessful: false
+  //   };
+
+
+
+  const status = useSync(
+    () => bitbox02BootloaderAPI.getStatus(deviceID),
+    bitbox02BootloaderAPI.syncStatus(deviceID),
+  );
+
+  //   useEffect(() => {
+  //     if (status?.upgradeSuccessful) {
+  //       //Hides div2, div3.
+  //       setSuccessInstal(true);
+  //       //Fly in div1 (bitbox div)
+
+
+  //     }
+  //   }, [status?.upgradeSuccessful]);
+
+
+
+  const versionInfo = useLoad(() => bitbox02BootloaderAPI.getVersionInfo(deviceID));
+
+  if (versionInfo === undefined) {
+    return null;
+  }
+
+  return (
+    <div className={styles.freshinstallContainer}>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <div className={`${styles.fadeDiv} 
+        ${successInstall ? styles.gone : styles.div2}
+        `}>
+          <h2>Your bitcoin journey starts now</h2>
+          <p>Thank you for choosing the BitBox02 hardware wallet.</p>
+        </div>
+        <div style={{ marginTop: 48 }}>
+          {status?.upgrading ? <InProgress status={status} versionInfo={versionInfo} /> :
+            <>
+              <div className={
+                `
+          ${styles.fadeDiv} 
+        ${fadeOut ? styles.gone : styles.div3}
+        `}>
+                <p>To get started, install the latest firmware onto your device</p>
+                <Button
+                  style={{ marginTop: 32 }}
+                  primary
+                  onClick={async () => {
+                    setFadeout(true);
+                    setTimeout(async() => {
+                      setSuccessInstal(true);
+                    }, 600);
+                  }}>
+                  {t('bootloader.button', { context: (versionInfo.erased ? 'install' : '') })}
+                </Button>
+                <div>
+                  {t('bb02Bootloader.orientation')}&nbsp;
+                  <Button
+                    onClick={() => bitbox02BootloaderAPI.screenRotate(deviceID)}
+                    style={{ height: 'auto', padding: 0, textDecoration: 'underline' }}
+                    transparent>
+                    {t('bb02Bootloader.flipscreen')}
+                  </Button>
+                </div>
+
+              </div>
+            </>}
+        </div>
+      </div>
+      <div className={`${styles.fadeDiv} ${styles.div1} ${successInstall ? styles.flyIn : styles.bitbox02}`}>
+        <BitBox />
+      </div>
+    </div>
+  );
+};
+
+const BitBox = () => {
+  const { isDarkMode } = useDarkmode();
+  return (<>
+    { isDarkMode
+      ? (<BitBox02StylizedLight/>)
+      : (<BitBox02StylizedDark />)
+    }
+  </>);
+};
+
+const InProgress = ({ status, versionInfo }: { status: bitbox02BootloaderAPI.TStatus, versionInfo: any }) => {
+  const value = Math.round(status.progress * 100);
+  const { t } = useTranslation();
+  return (
+    <>
+
+      { versionInfo.additionalUpgradeFollows ? (
+        <>
+          <p>{t('bb02Bootloader.additionalUpgradeFollows1')}</p>
+          <p>{t('bb02Bootloader.additionalUpgradeFollows2')}</p>
+        </>
+      ) : null }
+      <progress value={value} max="100">{value}%</progress>
+      <p style={{ marginBottom: 0 }}>
+        {t('bootloader.progress', {
+          progress: value.toString(),
+          context: (versionInfo.erased ? 'install' : ''),
+        })}
+      </p>
+    </>
+  );
+};

frontends/web/src/components/devices/bitbox02bootloader/styles.module.css

@@ -0,0 +1,100 @@
+/* Initial state for all divs */
+.fadeDiv {
+    opacity: 0;
+    animation-fill-mode: forwards; /* Ensure the final state is kept */
+    width: 100%;
+}
+
+/* Sequential fade-in for each div */
+.div1 {
+    animation: fadeIn 1s ease-in-out 0.5s forwards;
+}
+
+.div2 {
+    animation: fadeIn 1s ease-in-out 1.5s forwards;
+}
+
+.div3 {
+    animation: fadeIn 1s ease-in-out 2.5s forwards;
+}
+
+
+/* Keyframes for the fade-in */
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+/* Fade-out when the 'gone' class is added */
+.gone {
+    animation: fadeOut 1s ease-in-out forwards;
+}
+
+/* Keyframes for the fade-out */
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+
+.bitbox02 {
+    display: inline-block;
+    max-width: 360px;
+    position: absolute;
+    transform: translate(195%, 0%) rotate(270deg); 
+    transition: 1.5s all;
+    opacity: 0;
+}
+
+.flyIn {
+    animation: flyIn 1.5s ease-in-out forwards; 
+}
+
+
+@keyframes flyIn {
+    0% {
+        display: inline-block;
+        max-width: 360px;
+        position: absolute;
+        transform: translate(195%, 0%) rotate(270deg); 
+        transition: 1.5s all;
+        opacity: 1;
+    }
+    100% {
+        display: inline-block;
+        max-width: 360px;
+        position: absolute;
+        transform: translate(85%, 50%) rotate(180deg); /* Fly into center and rotate to 180deg */
+        transition: 1.5s all;
+        opacity: 1;
+    }
+}
+
+
+.freshinstallContainer {
+    display: flex;
+    flex-direction: row;
+    min-height: 400px;
+    background-color: transparent;
+    position: relative;
+
+}
+
+.freshinstallContainer * {
+    margin: 0;
+}
+
+
+
+.bitbox02 img,
+.flyIn img {
+    width: 100%;
+}

frontends/web/src/routes/settings/general.tsx

@@ -1,3 +1,5 @@
+//@ts-nocheck
+
 /**
  * Copyright 2023-2024 Shift Crypto AG
  *
@@ -33,9 +35,16 @@ import { SubTitle } from '@/components/title';
 import { TPagePropsWithSettingsTabs } from './types';
 import { GlobalBanners } from '@/components/globalbanners/globalbanners';
 import { ContentWrapper } from '@/components/contentwrapper/contentwrapper';
+import { FreshInstall } from '@/components/devices/bitbox02bootloader/freshinstall';
 
 export const General = ({ deviceIDs, hasAccounts }: TPagePropsWithSettingsTabs) => {
   const { t } = useTranslation();
+
+  return <View fitContent verticallyCentered width="960px">
+    <ViewContent>
+      <FreshInstall deviceID={deviceIDs[0]} />
+    </ViewContent>
+  </View>;
   return (
     <GuideWrapper>
       <GuidedContent>