Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-29 06:17:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add theme to transferQORT

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-19 08:47:34 +02:00
parent 18ec6126b7
commit c45d23a1cc
4 changed files with 239 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
src/App.tsx
View File

@ -71,11 +71,9 @@ import { PasswordField, ErrorText } from './components';
import { Group, requestQueueMemberNames } from './components/Group/Group'; import { Group, requestQueueMemberNames } from './components/Group/Group';
import { TaskManager } from './components/TaskManager/TaskManager.tsx'; import { TaskManager } from './components/TaskManager/TaskManager.tsx';
import { useModal } from './common/useModal'; import { useModal } from './common/useModal';
import { Label } from './components/Group/AddGroup';
import { CustomizedSnackbars } from './components/Snackbar/Snackbar'; import { CustomizedSnackbars } from './components/Snackbar/Snackbar';
import SettingsIcon from '@mui/icons-material/Settings'; import SettingsIcon from '@mui/icons-material/Settings';
import HelpIcon from '@mui/icons-material/Help'; import HelpIcon from '@mui/icons-material/Help';
import { import {
cleanUrl, cleanUrl,
getProtocol, getProtocol,
@ -119,11 +117,6 @@ import {
} from './atoms/global'; } from './atoms/global';
import { useAppFullScreen } from './useAppFullscreen'; import { useAppFullScreen } from './useAppFullscreen';
import { NotAuthenticated } from './ExtStates/NotAuthenticated'; import { NotAuthenticated } from './ExtStates/NotAuthenticated';
import {
openIndexedDB,
showSaveFilePicker,
} from './components/Apps/useQortalMessageListener';
import { fileToBase64 } from './utils/fileReading';
import { handleGetFileFromIndexedDB } from './utils/indexedDB'; import { handleGetFileFromIndexedDB } from './utils/indexedDB';
import { CoreSyncStatus } from './components/CoreSyncStatus'; import { CoreSyncStatus } from './components/CoreSyncStatus';
import { Wallets } from './Wallets'; import { Wallets } from './Wallets';
@ -131,7 +124,6 @@ import { RandomSentenceGenerator } from './utils/seedPhrase/RandomSentenceGenera
import { useFetchResources } from './common/useFetchResources'; import { useFetchResources } from './common/useFetchResources';
import { Tutorials } from './components/Tutorials/Tutorials'; import { Tutorials } from './components/Tutorials/Tutorials';
import { useHandleTutorials } from './components/Tutorials/useHandleTutorials'; import { useHandleTutorials } from './components/Tutorials/useHandleTutorials';
import BoundedNumericTextField from './common/BoundedNumericTextField';
import { useHandleUserInfo } from './components/Group/useHandleUserInfo'; import { useHandleUserInfo } from './components/Group/useHandleUserInfo';
import { Minting } from './components/Minting/Minting'; import { Minting } from './components/Minting/Minting';
import { isRunningGateway } from './qortalRequests'; import { isRunningGateway } from './qortalRequests';
@ -139,7 +131,6 @@ import { QMailStatus } from './components/QMailStatus';
import { GlobalActions } from './components/GlobalActions/GlobalActions'; import { GlobalActions } from './components/GlobalActions/GlobalActions';
import { useBlockedAddresses } from './components/Group/useBlockUsers'; import { useBlockedAddresses } from './components/Group/useBlockUsers';
import { WalletIcon } from './assets/Icons/WalletIcon'; import { WalletIcon } from './assets/Icons/WalletIcon';
import { DrawerUserLookup } from './components/Drawer/DrawerUserLookup';
import { UserLookup } from './components/UserLookup.tsx/UserLookup'; import { UserLookup } from './components/UserLookup.tsx/UserLookup';
import { RegisterName } from './components/RegisterName'; import { RegisterName } from './components/RegisterName';
import { BuyQortInformation } from './components/BuyQortInformation'; import { BuyQortInformation } from './components/BuyQortInformation';
@ -1350,13 +1341,13 @@ function App() {
slotProps={{ slotProps={{
tooltip: { tooltip: {
sx: { sx: {
color: '#ffffff', color: theme.palette.text.primary,
backgroundColor: '#444444', backgroundColor: theme.palette.background.default,
}, },
}, },
arrow: { arrow: {
sx: { sx: {
color: '#444444', color: theme.palette.text.primary,
}, },
}, },
}} }}
@ -1387,13 +1378,13 @@ function App() {
slotProps={{ slotProps={{
tooltip: { tooltip: {
sx: { sx: {
color: '#ffffff', color: theme.palette.text.primary,
backgroundColor: '#444444', backgroundColor: theme.palette.background.default,
}, },
}, },
arrow: { arrow: {
sx: { sx: {
color: '#444444', color: theme.palette.text.primary,
}, },
}, },
}} }}
@ -1438,10 +1429,10 @@ function App() {
> >
<TextP <TextP
sx={{ sx={{
textAlign: 'center',
lineHeight: '24px',
fontSize: '20px', fontSize: '20px',
fontWeight: 700, fontWeight: 700,
lineHeight: '24px',
textAlign: 'center',
}} }}
> >
{ltcBalance} LTC {ltcBalance} LTC
@ -1496,10 +1487,10 @@ function App() {
> >
<TextP <TextP
sx={{ sx={{
textAlign: 'center',
lineHeight: '24px',
fontSize: '20px', fontSize: '20px',
fontWeight: 700, fontWeight: 700,
lineHeight: '24px',
textAlign: 'center',
}} }}
> >
{balance?.toFixed(2)} QORT {balance?.toFixed(2)} QORT
@ -1518,13 +1509,13 @@ function App() {
{userInfo && !userInfo?.name && ( {userInfo && !userInfo?.name && (
<TextP <TextP
sx={{ sx={{
textAlign: 'center', color: 'red',
lineHeight: 1.2, cursor: 'pointer',
fontSize: '16px', fontSize: '16px',
fontWeight: 500, fontWeight: 500,
cursor: 'pointer', lineHeight: 1.2,
marginTop: '10px', marginTop: '10px',
color: 'red', textAlign: 'center',
textDecoration: 'underline', textDecoration: 'underline',
}} }}
onClick={() => { onClick={() => {
@ -1549,12 +1540,12 @@ function App() {
)} )}
<TextP <TextP
sx={{ sx={{
textAlign: 'center', cursor: 'pointer',
lineHeight: '24px',
fontSize: '12px', fontSize: '12px',
fontWeight: 500, fontWeight: 500,
cursor: 'pointer', lineHeight: '24px',
marginTop: '10px', marginTop: '10px',
textAlign: 'center',
textDecoration: 'underline', textDecoration: 'underline',
}} }}
onClick={async () => { onClick={async () => {
@ -1574,18 +1565,18 @@ function App() {
return ( return (
<AuthenticatedContainer <AuthenticatedContainer
sx={{ sx={{
width: isMobile ? '100vw' : 'auto', backgroundColor: theme.palette.background.default,
display: 'flex', display: 'flex',
backgroundColor: 'var(--bg-2)',
justifyContent: 'flex-end', justifyContent: 'flex-end',
width: isMobile ? '100vw' : 'auto',
}} }}
> >
{isMobile && ( {isMobile && (
<Box <Box
sx={{ sx={{
padding: '10px',
display: 'flex', display: 'flex',
justifyContent: 'flex-end', justifyContent: 'flex-end',
padding: '10px',
}} }}
> >
<CloseIcon <CloseIcon
@ -1610,10 +1601,10 @@ function App() {
> >
<Box <Box
sx={{ sx={{
width: '100%', alignItems: 'center',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', width: '100%',
}} }}
> >
<Spacer height="20px" /> <Spacer height="20px" />
@ -1638,13 +1629,13 @@ function App() {
slotProps={{ slotProps={{
tooltip: { tooltip: {
sx: { sx: {
color: '#ffffff', color: theme.palette.text.primary,
backgroundColor: '#444444', backgroundColor: theme.palette.background.default,
}, },
}, },
arrow: { arrow: {
sx: { sx: {
color: '#444444', color: theme.palette.text.primary,
}, },
}, },
}} }}
@ -1687,13 +1678,13 @@ function App() {
slotProps={{ slotProps={{
tooltip: { tooltip: {
sx: { sx: {
color: '#ffffff', color: theme.palette.text.primary,
backgroundColor: '#444444', backgroundColor: theme.palette.background.default,
}, },
}, },
arrow: { arrow: {
sx: { sx: {
color: '#444444', color: theme.palette.text.primary,
}, },
}, },
}} }}
@ -1724,13 +1715,13 @@ function App() {
slotProps={{ slotProps={{
tooltip: { tooltip: {
sx: { sx: {
color: '#ffffff', color: theme.palette.text.primary,
backgroundColor: '#444444', backgroundColor: theme.palette.background.default,
}, },
}, },
arrow: { arrow: {
sx: { sx: {
color: '#444444', color: theme.palette.text.primary,
}, },
}, },
}} }}
@ -1761,13 +1752,13 @@ function App() {
slotProps={{ slotProps={{
tooltip: { tooltip: {
sx: { sx: {
color: '#ffffff', color: theme.palette.text.primary,
backgroundColor: '#444444', // TODO: use theme and adapt colors backgroundColor: theme.palette.background.default,
}, },
}, },
arrow: { arrow: {
sx: { sx: {
color: '#444444', color: theme.palette.text.primary,
}, },
}, },
}} }}
@ -1797,13 +1788,13 @@ function App() {
slotProps={{ slotProps={{
tooltip: { tooltip: {
sx: { sx: {
color: '#ffffff', color: theme.palette.text.primary,
backgroundColor: '#444444', backgroundColor: theme.palette.background.default,
}, },
}, },
arrow: { arrow: {
sx: { sx: {
color: '#444444', color: theme.palette.text.primary,
}, },
}, },
}} }}
@ -1904,13 +1895,13 @@ function App() {
slotProps={{ slotProps={{
tooltip: { tooltip: {
sx: { sx: {
color: '#ffffff', color: theme.palette.text.primary,
backgroundColor: '#444444', backgroundColor: theme.palette.background.default,
}, },
}, },
arrow: { arrow: {
sx: { sx: {
color: '#444444', color: theme.palette.text.primary,
}, },
}, },
}} }}
@ -1947,13 +1938,13 @@ function App() {
slotProps={{ slotProps={{
tooltip: { tooltip: {
sx: { sx: {
color: '#ffffff', color: theme.palette.text.primary,
backgroundColor: '#444444', backgroundColor: theme.palette.background.default,
}, },
}, },
arrow: { arrow: {
sx: { sx: {
color: '#444444', color: theme.palette.text.primary,
}, },
}, },
}} }}
@ -1976,13 +1967,13 @@ function App() {
slotProps={{ slotProps={{
tooltip: { tooltip: {
sx: { sx: {
color: '#ffffff', color: theme.palette.text.primary,
backgroundColor: '#444444', backgroundColor: theme.palette.background.default,
}, },
}, },
arrow: { arrow: {
sx: { sx: {
color: '#444444', color: theme.palette.text.primary,
}, },
}, },
}} }}
@ -2104,7 +2095,7 @@ function App() {
width: '100%', width: '100%',
height: '100%', height: '100%',
position: 'fixed', position: 'fixed',
background: '#27282c', background: theme.palette.background.default,
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
@ -2573,6 +2564,7 @@ function App() {
<img src={Logo1Dark} className="base-image" /> <img src={Logo1Dark} className="base-image" />
</div> </div>
<Spacer height="38px" /> <Spacer height="38px" />
<TextP <TextP
sx={{ sx={{
textAlign: 'center', textAlign: 'center',
@ -2583,7 +2575,9 @@ function App() {
<TextItalic>{requestConnection?.hostname}</TextItalic> <br></br> <TextItalic>{requestConnection?.hostname}</TextItalic> <br></br>
<TextSpan>requests authentication</TextSpan> <TextSpan>requests authentication</TextSpan>
</TextP> </TextP>
<Spacer height="38px" /> <Spacer height="38px" />
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
@ -2591,12 +2585,16 @@ function App() {
gap: '14px', gap: '14px',
}} }}
></Box> ></Box>
<Spacer height="38px" /> <Spacer height="38px" />
<CustomButton {...getRootProps()}> <CustomButton {...getRootProps()}>
<input {...getInputProps()} /> <input {...getInputProps()} />
Authenticate Authenticate
</CustomButton> </CustomButton>
<Spacer height="6px" /> <Spacer height="6px" />
<CustomButton <CustomButton
onClick={() => { onClick={() => {
setExtstate('create-wallet'); setExtstate('create-wallet');
@ -2609,14 +2607,15 @@ function App() {
{extState === 'wallets' && ( {extState === 'wallets' && (
<> <>
<Spacer height="22px" /> <Spacer height="22px" />
<Box <Box
sx={{ sx={{
display: 'flex',
width: '100%',
justifyContent: 'flex-start',
paddingLeft: '22px',
boxSizing: 'border-box', boxSizing: 'border-box',
display: 'flex',
justifyContent: 'flex-start',
maxWidth: '700px', maxWidth: '700px',
paddingLeft: '22px',
width: '100%',
}} }}
> >
<Return <Return
@ -2631,6 +2630,7 @@ function App() {
}} }}
/> />
</Box> </Box>
<Wallets <Wallets
setRawWallet={setRawWallet} setRawWallet={setRawWallet}
setExtState={setExtstate} setExtState={setExtstate}
@ -2643,12 +2643,12 @@ function App() {
<Spacer height="22px" /> <Spacer height="22px" />
<Box <Box
sx={{ sx={{
display: 'flex',
width: '100%',
justifyContent: 'flex-start',
paddingLeft: '22px',
boxSizing: 'border-box', boxSizing: 'border-box',
display: 'flex',
justifyContent: 'flex-start',
maxWidth: '700px', maxWidth: '700px',
paddingLeft: '22px',
width: '100%',
}} }}
> >
<Return <Return
@ -2684,7 +2684,9 @@ function App() {
<Typography> <Typography>
{rawWallet?.name ? rawWallet?.name : rawWallet?.address0} {rawWallet?.name ? rawWallet?.name : rawWallet?.address0}
</Typography> </Typography>
<Spacer height="10px" /> <Spacer height="10px" />
<TextP <TextP
sx={{ sx={{
textAlign: 'start', textAlign: 'start',
@ -2696,13 +2698,16 @@ function App() {
Authenticate Authenticate
</TextP> </TextP>
</Box> </Box>
<Spacer height="35px" /> <Spacer height="35px" />
<> <>
<CustomLabel htmlFor="standard-adornment-password"> <CustomLabel htmlFor="standard-adornment-password">
Wallet Password Wallet Password
</CustomLabel> </CustomLabel>
<Spacer height="5px" /> <Spacer height="5px" />
<PasswordField <PasswordField
id="standard-adornment-password" id="standard-adornment-password"
value={authenticatePassword} value={authenticatePassword}
@ -2739,9 +2744,11 @@ function App() {
)} )}
<Spacer height="20px" /> <Spacer height="20px" />
<CustomButton onClick={authenticateWallet}> <CustomButton onClick={authenticateWallet}>
Authenticate Authenticate
</CustomButton> </CustomButton>
<ErrorText>{walletToBeDecryptedError}</ErrorText> <ErrorText>{walletToBeDecryptedError}</ErrorText>
</> </>
</> </>
@ -2751,12 +2758,12 @@ function App() {
<Spacer height="22px" /> <Spacer height="22px" />
<Box <Box
sx={{ sx={{
display: 'flex',
width: '100%',
justifyContent: 'flex-start',
paddingLeft: '22px',
boxSizing: 'border-box', boxSizing: 'border-box',
display: 'flex',
justifyContent: 'flex-start',
maxWidth: '700px', maxWidth: '700px',
paddingLeft: '22px',
width: '100%',
}} }}
> >
<Return <Return
@ -2777,7 +2784,9 @@ function App() {
> >
<img src={Logo1Dark} className="base-image" /> <img src={Logo1Dark} className="base-image" />
</div> </div>
<Spacer height="35px" /> <Spacer height="35px" />
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
@ -2796,7 +2805,9 @@ function App() {
Download Account Download Account
</TextP> </TextP>
</Box> </Box>
<Spacer height="35px" /> <Spacer height="35px" />
{!walletToBeDownloaded && ( {!walletToBeDownloaded && (
<> <>
<CustomLabel htmlFor="standard-adornment-password"> <CustomLabel htmlFor="standard-adornment-password">
@ -2841,12 +2852,12 @@ function App() {
<Spacer height="22px" /> <Spacer height="22px" />
<Box <Box
sx={{ sx={{
display: 'flex',
width: '100%',
justifyContent: 'flex-start',
paddingLeft: '22px',
boxSizing: 'border-box', boxSizing: 'border-box',
display: 'flex',
justifyContent: 'flex-start',
maxWidth: '700px', maxWidth: '700px',
paddingLeft: '22px',
width: '100%',
}} }}
> >
<Return <Return
@ -2947,7 +2958,6 @@ function App() {
sx={{ sx={{
fontSize: '18px', fontSize: '18px',
marginTop: '15px', marginTop: '15px',
textAlign: 'center', textAlign: 'center',
}} }}
> >
@ -2988,11 +2998,11 @@ function App() {
<DialogContent> <DialogContent>
<Box <Box
sx={{ sx={{
flexDirection: 'column',
maxWidth: '400px',
alignItems: 'center', alignItems: 'center',
gap: '10px',
display: showSeed ? 'flex' : 'none', display: showSeed ? 'flex' : 'none',
flexDirection: 'column',
gap: '10px',
maxWidth: '400px',
}} }}
> >
<Typography <Typography
@ -3005,11 +3015,11 @@ function App() {
<Box <Box
sx={{ sx={{
textAlign: 'center', background: theme.palette.background.paper,
width: '100%',
backgroundColor: '#1f2023',
borderRadius: '5px', borderRadius: '5px',
padding: '10px', padding: '10px',
textAlign: 'center',
width: '100%',
}} }}
> >
{generatorRef.current?.parsedString} {generatorRef.current?.parsedString}
@ -3036,6 +3046,7 @@ function App() {
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</Box> </Box>
<Box <Box
sx={{ sx={{
display: creationStep === 2 ? 'flex' : 'none', display: creationStep === 2 ? 'flex' : 'none',
@ -3044,10 +3055,13 @@ function App() {
}} }}
> >
<Spacer height="14px" /> <Spacer height="14px" />
<CustomLabel htmlFor="standard-adornment-password"> <CustomLabel htmlFor="standard-adornment-password">
Wallet Password Wallet Password
</CustomLabel> </CustomLabel>
<Spacer height="5px" /> <Spacer height="5px" />
<PasswordField <PasswordField
id="standard-adornment-password" id="standard-adornment-password"
value={walletToBeDownloadedPassword} value={walletToBeDownloadedPassword}
@ -3055,11 +3069,15 @@ function App() {
setWalletToBeDownloadedPassword(e.target.value) setWalletToBeDownloadedPassword(e.target.value)
} }
/> />
<Spacer height="6px" /> <Spacer height="6px" />
<CustomLabel htmlFor="standard-adornment-password"> <CustomLabel htmlFor="standard-adornment-password">
Confirm Wallet Password Confirm Wallet Password
</CustomLabel> </CustomLabel>
<Spacer height="5px" /> <Spacer height="5px" />
<PasswordField <PasswordField
id="standard-adornment-password" id="standard-adornment-password"
value={walletToBeDownloadedPasswordConfirm} value={walletToBeDownloadedPasswordConfirm}
@ -3068,9 +3086,11 @@ function App() {
} }
/> />
<Spacer height="5px" /> <Spacer height="5px" />
<Typography variant="body2"> <Typography variant="body2">
There is no minimum length requirement There is no minimum length requirement
</Typography> </Typography>
<Spacer height="17px" /> <Spacer height="17px" />
<CustomButton onClick={createAccountFunc}> <CustomButton onClick={createAccountFunc}>
@ -3127,13 +3147,13 @@ function App() {
{isOpenSendQortSuccess && ( {isOpenSendQortSuccess && (
<Box <Box
sx={{ sx={{
width: '100%', alignItems: 'center',
height: '100%', background: theme.palette.background.default,
position: 'fixed',
background: '#27282c',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', height: '100%',
position: 'fixed',
width: '100%',
zIndex: 10000, zIndex: 10000,
}} }}
> >
@ -3260,7 +3280,7 @@ function App() {
<Button <Button
sx={{ sx={{
backgroundColor: 'var(--green)', backgroundColor: 'var(--green)',
color: 'black', color: theme.palette.text.primary,
fontWeight: 'bold', fontWeight: 'bold',
opacity: 0.7, opacity: 0.7,
'&:hover': { '&:hover': {

46
src/components/QortPayment.tsx
View File

@ -1,5 +1,5 @@
import { Box, CircularProgress } from '@mui/material'; import { Box, CircularProgress, useTheme } from '@mui/material';
import React, { useEffect, useState } from 'react'; import { useState } from 'react';
import { import {
CustomButton, CustomButton,
CustomInput, CustomInput,
@ -13,6 +13,7 @@ import { ErrorText } from './ErrorText/ErrorText';
import { getFee } from '../background'; import { getFee } from '../background';
export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => { export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
const theme = useTheme();
const [paymentTo, setPaymentTo] = useState<string>(defaultPaymentTo); const [paymentTo, setPaymentTo] = useState<string>(defaultPaymentTo);
const [paymentAmount, setPaymentAmount] = useState<number>(0); const [paymentAmount, setPaymentAmount] = useState<number>(0);
const [paymentPassword, setPaymentPassword] = useState<string>(''); const [paymentPassword, setPaymentPassword] = useState<string>('');
@ -42,7 +43,9 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
message: `Would you like to transfer ${Number(paymentAmount)} QORT?`, message: `Would you like to transfer ${Number(paymentAmount)} QORT?`,
paymentFee: fee.fee + ' QORT', paymentFee: fee.fee + ' QORT',
}); });
setIsLoadingSendCoin(true); setIsLoadingSendCoin(true);
window window
.sendMessage('sendCoin', { .sendMessage('sendCoin', {
amount: Number(paymentAmount), amount: Number(paymentAmount),
@ -62,65 +65,76 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
setIsLoadingSendCoin(false); setIsLoadingSendCoin(false);
}); });
} catch (error) { } catch (error) {
// error console.log(error);
} }
}; };
return ( return (
<> <>
<Box <Box
sx={{ sx={{
alignItems: 'flex-start',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'flex-start',
}} }}
> >
<TextP <TextP
sx={{ sx={{
textAlign: 'start',
lineHeight: '24px',
fontSize: '20px', fontSize: '20px',
fontWeight: 600, fontWeight: 600,
lineHeight: '24px',
textAlign: 'start',
}} }}
> >
Transfer QORT Transfer QORT
</TextP> </TextP>
<Spacer height="35px" /> <Spacer height="35px" />
<TextP <TextP
sx={{ sx={{
textAlign: 'start', color: theme.palette.text.primary,
lineHeight: '16px',
fontSize: '20px', fontSize: '20px',
fontWeight: 600, fontWeight: 600,
color: 'rgba(255, 255, 255, 0.5)', lineHeight: '16px',
textAlign: 'start',
}} }}
> >
Balance: Balance:
</TextP> </TextP>
<TextP <TextP
sx={{ sx={{
textAlign: 'start',
lineHeight: '24px',
fontSize: '20px', fontSize: '20px',
fontWeight: 700, fontWeight: 700,
lineHeight: '24px',
textAlign: 'start',
}} }}
> >
{balance?.toFixed(2)} QORT {balance?.toFixed(2)} QORT
</TextP> </TextP>
</Box> </Box>
<Spacer height="35px" /> <Spacer height="35px" />
<Box> <Box>
<CustomLabel htmlFor="standard-adornment-name">To</CustomLabel> <CustomLabel htmlFor="standard-adornment-name">To</CustomLabel>
<Spacer height="5px" /> <Spacer height="5px" />
<CustomInput <CustomInput
id="standard-adornment-name" id="standard-adornment-name"
value={paymentTo} value={paymentTo}
onChange={(e) => setPaymentTo(e.target.value)} onChange={(e) => setPaymentTo(e.target.value)}
autoComplete="off" autoComplete="off"
/> />
<Spacer height="6px" /> <Spacer height="6px" />
<CustomLabel htmlFor="standard-adornment-amount">Amount</CustomLabel> <CustomLabel htmlFor="standard-adornment-amount">Amount</CustomLabel>
<Spacer height="5px" /> <Spacer height="5px" />
<BoundedNumericTextField <BoundedNumericTextField
value={paymentAmount} value={paymentAmount}
minValue={0} minValue={0}
@ -130,11 +144,15 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
allowNegatives={false} allowNegatives={false}
afterChange={(e: string) => setPaymentAmount(+e)} afterChange={(e: string) => setPaymentAmount(+e)}
/> />
<Spacer height="6px" /> <Spacer height="6px" />
<CustomLabel htmlFor="standard-adornment-password"> <CustomLabel htmlFor="standard-adornment-password">
Confirm Wallet Password Confirm Wallet Password
</CustomLabel> </CustomLabel>
<Spacer height="5px" /> <Spacer height="5px" />
<PasswordField <PasswordField
id="standard-adornment-password" id="standard-adornment-password"
value={paymentPassword} value={paymentPassword}
@ -142,10 +160,14 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
autoComplete="off" autoComplete="off"
/> />
</Box> </Box>
<Spacer height="10px" /> <Spacer height="10px" />
<ErrorText>{sendPaymentError}</ErrorText> <ErrorText>{sendPaymentError}</ErrorText>
{/* <Typography>{sendPaymentSuccess}</Typography> */} {/* <Typography>{sendPaymentSuccess}</Typography> */}
<Spacer height="25px" /> <Spacer height="25px" />
<CustomButton <CustomButton
sx={{ sx={{
cursor: isLoadingSendCoin ? 'default' : 'pointer', cursor: isLoadingSendCoin ? 'default' : 'pointer',
@ -159,7 +181,7 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
<CircularProgress <CircularProgress
size={16} size={16}
sx={{ sx={{
color: 'white', color: theme.palette.text.primary,
}} }}
/> />
)} )}

1
src/components/UserLookup.tsx/UserLookup.tsx
View File

@ -497,6 +497,7 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
</ButtonBase> </ButtonBase>
</Tooltip> </Tooltip>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Tooltip <Tooltip
title={ title={

222
src/styles/App-styles.ts
View File

@ -2,113 +2,106 @@ import { Typography, Box, TextField, InputLabel } from '@mui/material';
import { styled } from '@mui/system'; import { styled } from '@mui/system';
export const AppContainer = styled(Box)(({ theme }) => ({ export const AppContainer = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center', alignItems: 'center',
flexDirection: 'column',
width: '100vw',
height: '100vh',
radius: '15px',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
display: 'flex',
flexDirection: 'column',
height: '100vh',
overflow: 'hidden', overflow: 'hidden',
radius: '15px',
width: '100vw',
})); }));
export const AuthenticatedContainer = styled(Box)(({ theme }) => ({ export const AuthenticatedContainer = styled(Box)(({ theme }) => ({
display: 'flex',
width: '100%',
height: '100%',
justifyContent: 'space-between',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
display: 'flex',
height: '100%',
justifyContent: 'space-between',
width: '100%',
})); }));
export const AuthenticatedContainerInnerLeft = styled(Box)(({ theme }) => ({ export const AuthenticatedContainerInnerLeft = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center', alignItems: 'center',
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
display: 'flex',
flexDirection: 'column', flexDirection: 'column',
height: '100%', height: '100%',
width: '100%', width: '100%',
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
})); }));
export const AuthenticatedContainerInnerRight = styled(Box)(({ theme }) => ({ export const AuthenticatedContainerInnerRight = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center', alignItems: 'center',
flexDirection: 'column',
width: '60px',
height: '100%',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
display: 'flex',
flexDirection: 'column',
height: '100%',
width: '60px',
})); }));
export const AuthenticatedContainerInnerTop = styled(Box)(({ theme }) => ({ export const AuthenticatedContainerInnerTop = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'flex-start',
width: '100%px',
height: '60px',
padding: '20px',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
display: 'flex',
height: '60px',
justifyContent: 'flex-start',
padding: '20px',
width: '100%px',
})); }));
export const TextP = styled(Typography)(({ theme }) => ({ export const TextP = styled(Typography)(({ theme }) => ({
fontSize: '13px',
fontWeight: 600,
fontFamily: 'Inter',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
fontFamily: 'Inter',
fontSize: '13px',
fontWeight: 600,
})); }));
export const TextItalic = styled('span')(({ theme }) => ({ export const TextItalic = styled('span')(({ theme }) => ({
fontSize: '13px',
fontWeight: 600,
fontFamily: 'Inter',
fontStyle: 'italic',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
fontFamily: 'Inter',
fontSize: '13px',
fontStyle: 'italic',
fontWeight: 600,
})); }));
export const TextSpan = styled('span')(({ theme }) => ({ export const TextSpan = styled('span')(({ theme }) => ({
fontSize: '13px',
fontFamily: 'Inter',
fontWeight: 800,
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary, color: theme.palette.text.primary,
fontFamily: 'Inter',
fontSize: '13px',
fontWeight: 800,
})); }));
export const AddressBox = styled(Box)(({ theme }) => ({ export const AddressBox = styled(Box)(({ theme }) => ({
display: 'flex',
border: `1px solid ${
theme.palette.mode === 'dark'
? 'rgba(255, 255, 255, 0.5)'
: 'rgba(0, 0, 0, 0.3)'
}`,
justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
width: 'auto', backgroundColor: theme.palette.background.default,
height: '25px', borderColor: theme.palette.background.paper,
padding: '5px 15px',
gap: '5px',
borderRadius: '100px', borderRadius: '100px',
borderStyle: 'solid',
borderWidth: '1px',
color: theme.palette.text.primary,
cursor: 'pointer',
display: 'flex',
fontFamily: 'Inter', fontFamily: 'Inter',
fontSize: '12px', fontSize: '12px',
fontWeight: 600, fontWeight: 600,
gap: '5px',
height: '25px',
justifyContent: 'space-between',
lineHeight: '14.52px', lineHeight: '14.52px',
padding: '5px 15px',
textAlign: 'left', textAlign: 'left',
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
cursor: 'pointer',
transition: 'all 0.2s', transition: 'all 0.2s',
width: 'auto',
'&:hover': { '&:hover': {
backgroundColor: backgroundColor: theme.palette.background.paper,
theme.palette.mode === 'dark' color: theme.palette.text.secondary,
? 'rgba(41, 41, 43, 1)'
: 'rgba(240, 240, 240, 1)',
color: theme.palette.mode === 'dark' ? '#fff' : '#000',
'svg path': { 'svg path': {
fill: theme.palette.mode === 'dark' ? '#fff' : '#000', fill: theme.palette.mode === 'dark' ? '#fff' : '#000',
}, },
@ -116,40 +109,29 @@ export const AddressBox = styled(Box)(({ theme }) => ({
})); }));
export const CustomButton = styled(Box)(({ theme }) => ({ export const CustomButton = styled(Box)(({ theme }) => ({
boxSizing: 'border-box',
padding: '15px 20px',
gap: '10px',
border: `0.5px solid ${
theme.palette.mode === 'dark'
? 'rgba(255, 255, 255, 0.5)'
: 'rgba(0, 0, 0, 0.3)'
}`,
filter: 'drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3))',
borderRadius: '5px',
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
width: 'fit-content',
minWidth: '160px',
cursor: 'pointer',
transition: 'all 0.2s',
fontWeight: 600,
fontFamily: 'Inter',
textAlign: 'center',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
borderColor: theme.palette.background.paper,
borderRadius: '5px',
borderStyle: 'solid',
borderWidth: '0.5px',
boxSizing: 'border-box',
color: theme.palette.text.primary, color: theme.palette.text.primary,
cursor: 'pointer',
display: 'inline-flex',
filter: 'drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3))',
fontFamily: 'Inter',
fontWeight: 600,
gap: '10px',
justifyContent: 'center',
minWidth: '160px',
padding: '15px 20px',
textAlign: 'center',
transition: 'all 0.2s',
width: 'fit-content',
'&:hover': { '&:hover': {
backgroundColor: backgroundColor: theme.palette.background.default,
theme.palette.mode === 'dark'
? 'rgb(136, 130, 130)'
: 'rgb(173, 173, 180)',
color: '#fff', color: '#fff',
'svg path': { 'svg path': {
fill: '#fff', fill: '#fff',
}, },
@ -163,40 +145,30 @@ interface CustomButtonProps {
export const CustomButtonAccept = styled(Box)<CustomButtonProps>( export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
({ bgColor, color, theme }) => ({ ({ bgColor, color, theme }) => ({
boxSizing: 'border-box',
padding: '15px 20px',
gap: '10px',
border: `0.5px solid ${
theme.palette.mode === 'dark'
? 'rgba(255, 255, 255, 0.5)'
: 'rgba(0, 0, 0, 0.3)'
}`,
filter: 'drop-shadow(1px 4px 10.5px rgba(0,0,0,0.3))',
borderRadius: 5,
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
width: 'fit-content', backgroundColor: bgColor || theme.palette.background.default,
transition: 'all 0.2s', borderColor: theme.palette.background.paper,
minWidth: 160, borderRadius: 5,
borderStyle: 'solid',
borderWidth: '0.5px',
boxSizing: 'border-box',
color: color || theme.palette.background.default,
cursor: 'pointer', cursor: 'pointer',
fontWeight: 600, display: 'inline-flex',
filter: 'drop-shadow(1px 4px 10.5px rgba(0,0,0,0.3))',
fontFamily: 'Inter', fontFamily: 'Inter',
textAlign: 'center', fontWeight: 600,
gap: '10px',
justifyContent: 'center',
minWidth: 160,
opacity: 0.7, opacity: 0.7,
padding: '15px 20px',
// Color and backgroundColor with fallbacks textAlign: 'center',
backgroundColor: transition: 'all 0.2s',
bgColor || (theme.palette.mode === 'dark' ? '#1d1d1d' : '#f5f5f5'), width: 'fit-content',
color: color || (theme.palette.mode === 'dark' ? '#fff' : '#000'),
'&:hover': { '&:hover': {
opacity: 1, opacity: 1,
backgroundColor: backgroundColor: bgColor || theme.palette.background.default,
bgColor ||
(theme.palette.mode === 'dark'
? 'rgba(41, 41, 43, 1)'
: 'rgba(230, 230, 230, 1)'),
color: color || '#fff', color: color || '#fff',
svg: { svg: {
path: { path: {
@ -208,33 +180,39 @@ export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
); );
export const CustomInput = styled(TextField)(({ theme }) => ({ export const CustomInput = styled(TextField)(({ theme }) => ({
width: '183px', // Adjust the width as needed
borderRadius: '5px',
// backgroundColor: "rgba(30, 30, 32, 1)",
outline: 'none',
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
borderColor: theme.palette.background.paper,
borderRadius: '5px',
color: theme.palette.text.primary, color: theme.palette.text.primary,
outline: 'none',
width: '183px', // Adjust the width as needed
input: { input: {
fontSize: 10, fontSize: 10,
fontFamily: 'Inter', fontFamily: 'Inter',
fontWeight: 400, fontWeight: 400,
color: 'white', color: theme.palette.text.primary,
'&::placeholder': { '&::placeholder': {
fontSize: 16, fontSize: 16,
color: 'rgba(255, 255, 255, 0.2)', color: theme.palette.text.secondary,
}, },
outline: 'none', outline: 'none',
padding: '10px', padding: '10px',
}, },
'& .MuiOutlinedInput-root': { '& .MuiOutlinedInput-root': {
'& fieldset': { '& fieldset': {
border: '0.5px solid rgba(255, 255, 255, 0.5)', borderColor: theme.palette.background.paper,
borderRadius: '0.5px',
borderStyle: 'solid',
}, },
'&:hover fieldset': { '&:hover fieldset': {
border: '0.5px solid rgba(255, 255, 255, 0.5)', borderColor: theme.palette.background.paper,
borderRadius: '0.5px',
borderStyle: 'solid',
}, },
'&.Mui-focused fieldset': { '&.Mui-focused fieldset': {
border: '0.5px solid rgba(255, 255, 255, 0.5)', borderColor: theme.palette.background.paper,
borderRadius: '0.5px',
borderStyle: 'solid',
}, },
}, },
'& .MuiInput-underline:before': { '& .MuiInput-underline:before': {
@ -249,12 +227,10 @@ export const CustomInput = styled(TextField)(({ theme }) => ({
})); }));
export const CustomLabel = styled(InputLabel)(({ theme }) => ({ export const CustomLabel = styled(InputLabel)(({ theme }) => ({
fontWeight: 400, backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
fontFamily: 'Inter', fontFamily: 'Inter',
fontSize: '10px', fontSize: '10px',
fontWeight: 400,
lineHeight: '12px', lineHeight: '12px',
color:
theme.palette.mode === 'dark'
? 'rgba(255, 255, 255, 0.5)'
: 'rgba(0, 0, 0, 0.5)',
})); }));