Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-20 10:05:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

new user tooltips

Browse Source
This commit is contained in:
PhilReact 2025-01-31 16:50:35 +02:00
parent 99e01c7df7
commit ba47989feb
5 changed files with 115 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/App.tsx
View File

@ -357,7 +357,7 @@ function App() {
const {downloadResource} = useFetchResources()
const holdRefExtState = useRef<extStates>("not-authenticated");
const isFocusedRef = useRef<boolean>(true);
const {showTutorial, openTutorialModal, shownTutorialsInitiated, setOpenTutorialModal} = useHandleTutorials()
const {showTutorial, openTutorialModal, shownTutorialsInitiated, setOpenTutorialModal, hasSeenGettingStarted} = useHandleTutorials()
const { isShow, onCancel, onOk, show, message } = useModal();
const {
isShow: isShowUnsavedChanges,
@ -1708,7 +1708,8 @@ function App() {
showTutorial,
openTutorialModal,
setOpenTutorialModal,
downloadResource
downloadResource,
hasSeenGettingStarted
}}>
<Tutorials />
{extState === "not-authenticated" && (
@ -2277,8 +2278,7 @@ function App() {
height: "154px",
}}
>
<img src={Logo1} className="base-image" />
<img src={Logo1Dark} className="hover-image" />
<img src={Logo1Dark} className="base-image" />
</div>
<Spacer height="38px" />
<TextP
@ -2340,8 +2340,7 @@ function App() {
height: "154px",
}}
>
<img src={Logo1} className="base-image" />
<img src={Logo1Dark} className="hover-image" />
<img src={Logo1Dark} className="base-image" />
</div>
<Spacer height="38px" />
<TextP
@ -2437,8 +2436,7 @@ function App() {
height: "154px",
}}
>
<img src={Logo1} className="base-image" />
<img src={Logo1Dark} className="hover-image" />
<img src={Logo1Dark} className="base-image" />
</div>
<Spacer height="35px" />
<Box
@ -2539,8 +2537,7 @@ function App() {
height: "154px",
}}
>
<img src={Logo1} className="base-image" />
<img src={Logo1Dark} className="hover-image" />
<img src={Logo1Dark} className="base-image" />
</div>
<Spacer height="35px" />
<Box
@ -2640,14 +2637,14 @@ function App() {
height: "154px",
}}
>
<img src={Logo1} className="base-image" />
<img src={Logo1Dark} className="hover-image" />
<img src={Logo1Dark} className="base-image" />
</div>
<Spacer height="38px" />
<TextP
sx={{
textAlign: "center",
lineHeight: "15px",
lineHeight: 1.2,
fontSize: '18px'
}}
>
Set up your Qortal account
@ -2686,7 +2683,7 @@ function App() {
If you wish to VIEW THE SEEDPHRASE, click the word 'SEEDPHRASE' in this text. Seedphrases are used to generate the private key for your Qortal account. For security by default, seedphrases are NOT displayed unless specifically chosen.
</Typography>
<Typography sx={{
fontSize: '16px',
fontSize: '18px',
marginTop: '15px',
textAlign: 'center'

83
src/ExtStates/NotAuthenticated.tsx
View File

@ -12,8 +12,8 @@ import {
DialogTitle,
FormControlLabel,
Input,
styled,
Switch,
Tooltip,
Typography,
} from "@mui/material";
import Logo1 from "../assets/svgs/Logo1.svg";
@ -24,12 +24,24 @@ import { CustomizedSnackbars } from "../components/Snackbar/Snackbar";
import { set } from "lodash";
import { cleanUrl, gateways, isUsingLocal } from "../background";
import { GlobalContext } from "../App";
import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
const manifestData = {
version: "0.5.1",
};
export const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
<Tooltip {...props} classes={{ popper: className }} />
))(({ theme }) => ({
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: '#232428',
color: 'white',
maxWidth: 320,
padding: '20px',
fontSize: theme.typography.pxToRem(12),
},
}));
function removeTrailingSlash(url) {
return url.replace(/\/+$/, '');
}
@ -66,7 +78,7 @@ export const NotAuthenticated = ({
const [customApikey, setCustomApiKey] = React.useState("");
const [customNodeToSaveIndex, setCustomNodeToSaveIndex] =
React.useState(null);
const { showTutorial } = useContext(GlobalContext);
const { showTutorial, hasSeenGettingStarted } = useContext(GlobalContext);
const importedApiKeyRef = useRef(null);
const currentNodeRef = useRef(null);
@ -354,18 +366,22 @@ export const NotAuthenticated = ({
height: "154px",
}}
>
<img src={Logo1} className="base-image" />
<img src={Logo1Dark} className="hover-image" />
<img src={Logo1Dark} className="base-image" />
</div>
<Spacer height="30px" />
<TextP
sx={{
textAlign: "center",
lineHeight: "15px",
lineHeight: 1.2,
fontSize: '18px'
}}
>
WELCOME TO <TextItalic>YOUR</TextItalic> <br></br>
<TextSpan> QORTAL WALLET</TextSpan>
WELCOME TO <TextItalic sx={{
fontSize: '18px'
}}>YOUR</TextItalic> <br></br>
<TextSpan sx={{
fontSize: '18px'
}}> QORTAL WALLET</TextSpan>
</TextP>
<Spacer height="30px" />
@ -375,11 +391,23 @@ export const NotAuthenticated = ({
gap: "10px",
alignItems: "center",
}}
>
<HtmlTooltip
disableHoverListener={hasSeenGettingStarted === true}
placement="left"
title={
<React.Fragment>
<Typography color="inherit" sx={{
fontSize: '16px'
}}>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.</Typography>
</React.Fragment>
}
>
<CustomButton onClick={()=> setExtstate('wallets')}>
{/* <input {...getInputProps()} /> */}
Wallets
</CustomButton>
</HtmlTooltip>
{/* <Tooltip title="Authenticate by importing your Qortal JSON file" arrow>
<img src={Info} />
</Tooltip> */}
@ -391,16 +419,41 @@ export const NotAuthenticated = ({
display: "flex",
gap: "10px",
alignItems: "center",
}}
>
<HtmlTooltip
disableHoverListener={hasSeenGettingStarted === true}
placement="right"
title={
<React.Fragment>
<Typography color="inherit" sx={{
fontWeight: 'bold',
fontSize: '18px'
}}>New users start here!</Typography>
<Spacer height='10px'/>
<Typography color="inherit" sx={{
fontSize: '16px'
}}>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.</Typography>
</React.Fragment>
}
>
<CustomButton
onClick={() => {
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
</CustomButton>
</HtmlTooltip>
</Box>
<Spacer height="15px" />
@ -421,9 +474,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',
}}
>
<>
<Typography sx={{
textDecoration: 'underline'
}}>For advanced users</Typography>
<Box
sx={{
display: "flex",
@ -434,6 +493,12 @@ export const NotAuthenticated = ({
}}
>
<FormControlLabel
sx={{
"& .MuiFormControlLabel-label": {
fontSize: '14px'
}
}}
control={
<Switch
sx={{

29
src/Wallets.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from "react";
import React, { useContext, useEffect, useRef, useState } from "react";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import Divider from "@mui/material/Divider";
@ -19,6 +19,8 @@ import { decryptStoredWalletFromSeedPhrase } from "./utils/decryptWallet";
import { crypto } from "./constants/decryptWallet";
import { LoadingButton } from "@mui/lab";
import { PasswordField } from "./components";
import { HtmlTooltip } from "./ExtStates/NotAuthenticated";
import { GlobalContext } from "./App";
const parsefilenameQortal = (filename)=> {
return filename.startsWith("qortal_backup_") ? filename.slice(14) : filename;
@ -30,6 +32,7 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => {
const [seedValue, setSeedValue] = useState("");
const [seedName, setSeedName] = useState("");
const [seedError, setSeedError] = useState("");
const { hasSeenGettingStarted } = useContext(GlobalContext);
const [password, setPassword] = useState("");
const [isOpenSeedModal, setIsOpenSeedModal] = useState(false);
@ -228,6 +231,17 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => {
bottom: wallets?.length === 0 ? 'unset' : '20px',
right: wallets?.length === 0 ? 'unset' : '20px'
}}
>
<HtmlTooltip
disableHoverListener={hasSeenGettingStarted === true}
title={
<React.Fragment>
<Typography color="inherit" sx={{
fontSize: '16px'
}}>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.</Typography>
</React.Fragment>
}
>
<CustomButton onClick={handleSetSeedValue} sx={{
padding: '10px'
@ -235,12 +249,25 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => {
Add seed-phrase
</CustomButton>
</HtmlTooltip>
<HtmlTooltip
disableHoverListener={hasSeenGettingStarted === true}
title={
<React.Fragment>
<Typography color="inherit" sx={{
fontSize: '16px'
}}>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.</Typography>
</React.Fragment>
}
>
<CustomButton sx={{
padding: '10px'
}} {...getRootProps()}>
<input {...getInputProps()} />
Add wallets
</CustomButton>
</HtmlTooltip>
</Box>
<Dialog

1
src/components/Tutorials/useHandleTutorials.tsx
View File

@ -175,6 +175,7 @@ useEffect(()=> {
}, [shownTutorials]);
return {
showTutorial,
hasSeenGettingStarted: shownTutorials === null ? null : !!(shownTutorials || {})['getting-started'],
openTutorialModal,
setOpenTutorialModal,
shownTutorialsInitiated: !!shownTutorials

2
src/index.css
View File

@ -65,7 +65,7 @@ body {
}
.image-container:hover .base-image {
opacity: 0;
opacity: 0.6;
}
::-webkit-scrollbar-track {