-
Notifications
You must be signed in to change notification settings - Fork 82
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f92fc05
commit e4b6b89
Showing
5 changed files
with
255 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
136 changes: 136 additions & 0 deletions
136
frontends/web/src/components/devices/bitbox02bootloader/freshinstall.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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')} | ||
<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> | ||
</> | ||
); | ||
}; |
100 changes: 100 additions & 0 deletions
100
frontends/web/src/components/devices/bitbox02bootloader/styles.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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%; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters