diff --git a/src/App.tsx b/src/App.tsx index b904dbf..6de20ac 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -384,7 +384,7 @@ function App() { const seedPhrase = generatorRef.current.parsedString saveSeedPhraseToDisk(seedPhrase) } - const {showTutorial, openTutorialModal, shownTutorialsInitiated, setOpenTutorialModal} = useHandleTutorials() + const {showTutorial, openTutorialModal, shownTutorialsInitiated, setOpenTutorialModal, hasSeenGettingStarted} = useHandleTutorials() const {getIndividualUserInfo} = useHandleUserInfo() const passwordRef = useRef(null); @@ -1761,7 +1761,8 @@ function App() { showTutorial, openTutorialModal, setOpenTutorialModal, - downloadResource + downloadResource, + hasSeenGettingStarted }}> @@ -2318,8 +2319,7 @@ function App() { height: "154px", }} > - - + - - + - - + - - + - - + ( + +))(({ theme }) => ({ + [`& .${tooltipClasses.tooltip}`]: { + backgroundColor: '#232428', + color: 'white', + maxWidth: 320, + padding: '20px', + fontSize: theme.typography.pxToRem(12), + }, +})); + export const NotAuthenticated = ({ getRootProps, getInputProps, @@ -58,7 +73,7 @@ export const NotAuthenticated = ({ const importedApiKeyRef = useRef(null) const currentNodeRef = useRef(null) const hasLocalNodeRef = useRef(null) - const { showTutorial } = useContext(GlobalContext); + const { showTutorial, hasSeenGettingStarted } = useContext(GlobalContext); const isLocal = cleanUrl(currentNode?.url) === "127.0.0.1:12391"; const handleFileChangeApiKey = (event) => { @@ -74,6 +89,8 @@ export const NotAuthenticated = ({ } }; + + const checkIfUserHasLocalNode = useCallback(async () => { try { const url = `http://127.0.0.1:12391/admin/status`; @@ -237,18 +254,22 @@ export const NotAuthenticated = ({ height: "154px", }} > - - + - WELCOME TO YOUR

- QORTAL WALLET + WELCOME TO YOUR

+ QORTAL WALLET
+ + Your wallet is like your digital ID on Qortal, and is how you will login to the Qortal User Interface. It holds your public address and the Qortal name you will eventually choose. Every transaction you make is linked to your ID, and this is where you manage all your QORT and other tradeable cryptocurrencies on Qortal. + + } > setExtstate('wallets')}> Wallets + @@ -270,15 +303,39 @@ export const NotAuthenticated = ({ gap: "10px", alignItems: "center", }} + > + + New users start here! + + Creating an account means creating a new wallet and digital ID to start using Qortal. Once you have made your account, you can start doing things like obtaining some QORT, buying a name and avatar, publishing videos and blogs, and much more. + + } > { setExtstate("create-wallet"); }} + sx={{ + backgroundColor: hasSeenGettingStarted === false && 'var(--green)', + color: hasSeenGettingStarted === false && 'black', + "&:hover": { + backgroundColor: hasSeenGettingStarted === false && 'var(--green)', + color: hasSeenGettingStarted === false && 'black' + } + }} > - Create account + Create wallet - +
@@ -299,9 +356,15 @@ export const NotAuthenticated = ({ gap: "10px", alignItems: "center", flexDirection: "column", + outline: '0.5px solid rgba(255, 255, 255, 0.5)', + padding: '20px 30px', + borderRadius: '5px', }} > <> + For advanced users { return filename.startsWith("qortal_backup_") ? filename.slice(14) : filename; @@ -34,6 +36,7 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => { const [password, setPassword] = useState(""); const [isOpenSeedModal, setIsOpenSeedModal] = useState(false); const [isLoadingEncryptSeed, setIsLoadingEncryptSeed] = useState(false); + const { hasSeenGettingStarted } = useContext(GlobalContext); const { isShow, onCancel, onOk, show, } = useModal(); @@ -228,6 +231,17 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => { bottom: wallets?.length === 0 ? 'unset' : '20px', right: wallets?.length === 0 ? 'unset' : '20px' }} + > + + Already have a Qortal account? Enter your secret backup phrase here to access it. This phrase is one of the ways to recover your account. + + } > { Add seed-phrase + + + Use this option to connect additional Qortal wallets you've already made, in order to login with them afterwards. You will need access to your backup JSON file in order to do so. + + } + > Add wallets + { return { showTutorial, openTutorialModal, + hasSeenGettingStarted: shownTutorials === null ? null : !!(shownTutorials || {})['getting-started'], setOpenTutorialModal, shownTutorialsInitiated: !!shownTutorials }; diff --git a/src/index.css b/src/index.css index 0c7b61a..d55d2e8 100644 --- a/src/index.css +++ b/src/index.css @@ -64,7 +64,7 @@ body { } .image-container:hover .base-image { - opacity: 0; + opacity: 0.6; } ::-webkit-scrollbar-track {