mirror of
https://github.com/Qortal/chrome-extension.git
synced 2025-02-11 17:55:49 +00:00
new user tooltips
This commit is contained in:
parent
8b73020ce7
commit
513fd0375d
20
src/App.tsx
20
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<HTMLInputElement>(null);
|
||||
@ -1761,7 +1761,8 @@ function App() {
|
||||
showTutorial,
|
||||
openTutorialModal,
|
||||
setOpenTutorialModal,
|
||||
downloadResource
|
||||
downloadResource,
|
||||
hasSeenGettingStarted
|
||||
}}>
|
||||
<Tutorials />
|
||||
|
||||
@ -2318,8 +2319,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
|
||||
@ -2381,8 +2381,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
|
||||
@ -2478,8 +2477,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
|
||||
@ -2556,8 +2554,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
|
||||
@ -2649,8 +2646,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
|
||||
|
||||
@ -14,7 +14,10 @@ import {
|
||||
Switch,
|
||||
Tooltip,
|
||||
Typography,
|
||||
ButtonBase
|
||||
ButtonBase,
|
||||
styled,
|
||||
tooltipClasses,
|
||||
TooltipProps
|
||||
} from "@mui/material";
|
||||
import Logo1 from "../assets/svgs/Logo1.svg";
|
||||
import Logo1Dark from "../assets/svgs/Logo1Dark.svg";
|
||||
@ -27,6 +30,18 @@ import { GlobalContext } from "../App";
|
||||
|
||||
const manifestData = chrome?.runtime?.getManifest();
|
||||
|
||||
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),
|
||||
},
|
||||
}));
|
||||
|
||||
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",
|
||||
}}
|
||||
>
|
||||
<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" />
|
||||
<Box
|
||||
@ -257,10 +278,22 @@ 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')}>
|
||||
Wallets
|
||||
</CustomButton>
|
||||
</HtmlTooltip>
|
||||
</Box>
|
||||
|
||||
<Spacer height="6px" />
|
||||
@ -270,15 +303,39 @@ export const NotAuthenticated = ({
|
||||
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" />
|
||||
@ -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',
|
||||
}}
|
||||
>
|
||||
<>
|
||||
<Typography sx={{
|
||||
textDecoration: 'underline'
|
||||
}}>For advanced users</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
@ -312,6 +375,12 @@ export const NotAuthenticated = ({
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
sx={{
|
||||
"& .MuiFormControlLabel-label": {
|
||||
fontSize: '14px'
|
||||
}
|
||||
|
||||
}}
|
||||
control={
|
||||
<Switch
|
||||
sx={{
|
||||
|
||||
@ -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, walletVersion } from "./constants/decryptWallet";
|
||||
import { LoadingButton } from "@mui/lab";
|
||||
import { PasswordField } from "./components";
|
||||
import { GlobalContext } from "./App";
|
||||
import { HtmlTooltip } from "./ExtStates/NotAuthenticated";
|
||||
|
||||
const parsefilenameQortal = (filename)=> {
|
||||
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'
|
||||
}}
|
||||
>
|
||||
<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
|
||||
|
||||
@ -176,6 +176,7 @@ useEffect(()=> {
|
||||
return {
|
||||
showTutorial,
|
||||
openTutorialModal,
|
||||
hasSeenGettingStarted: shownTutorials === null ? null : !!(shownTutorials || {})['getting-started'],
|
||||
setOpenTutorialModal,
|
||||
shownTutorialsInitiated: !!shownTutorials
|
||||
};
|
||||
|
||||
@ -64,7 +64,7 @@ body {
|
||||
}
|
||||
|
||||
.image-container:hover .base-image {
|
||||
opacity: 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user