mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-04-28 22:07:52 +00:00
Add theme to transferQORT
This commit is contained in:
Nicola Benaglia
parent
18ec6126b7
commit
c45d23a1cc
190
src/App.tsx
190
src/App.tsx
@ -71,11 +71,9 @@ import { PasswordField, ErrorText } from './components';
|
||||
import { Group, requestQueueMemberNames } from './components/Group/Group';
|
||||
import { TaskManager } from './components/TaskManager/TaskManager.tsx';
|
||||
import { useModal } from './common/useModal';
|
||||
import { Label } from './components/Group/AddGroup';
|
||||
import { CustomizedSnackbars } from './components/Snackbar/Snackbar';
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import HelpIcon from '@mui/icons-material/Help';
|
||||
|
||||
import {
|
||||
cleanUrl,
|
||||
getProtocol,
|
||||
@ -119,11 +117,6 @@ import {
|
||||
} from './atoms/global';
|
||||
import { useAppFullScreen } from './useAppFullscreen';
|
||||
import { NotAuthenticated } from './ExtStates/NotAuthenticated';
|
||||
import {
|
||||
openIndexedDB,
|
||||
showSaveFilePicker,
|
||||
} from './components/Apps/useQortalMessageListener';
|
||||
import { fileToBase64 } from './utils/fileReading';
|
||||
import { handleGetFileFromIndexedDB } from './utils/indexedDB';
|
||||
import { CoreSyncStatus } from './components/CoreSyncStatus';
|
||||
import { Wallets } from './Wallets';
|
||||
@ -131,7 +124,6 @@ import { RandomSentenceGenerator } from './utils/seedPhrase/RandomSentenceGenera
|
||||
import { useFetchResources } from './common/useFetchResources';
|
||||
import { Tutorials } from './components/Tutorials/Tutorials';
|
||||
import { useHandleTutorials } from './components/Tutorials/useHandleTutorials';
|
||||
import BoundedNumericTextField from './common/BoundedNumericTextField';
|
||||
import { useHandleUserInfo } from './components/Group/useHandleUserInfo';
|
||||
import { Minting } from './components/Minting/Minting';
|
||||
import { isRunningGateway } from './qortalRequests';
|
||||
@ -139,7 +131,6 @@ import { QMailStatus } from './components/QMailStatus';
|
||||
import { GlobalActions } from './components/GlobalActions/GlobalActions';
|
||||
import { useBlockedAddresses } from './components/Group/useBlockUsers';
|
||||
import { WalletIcon } from './assets/Icons/WalletIcon';
|
||||
import { DrawerUserLookup } from './components/Drawer/DrawerUserLookup';
|
||||
import { UserLookup } from './components/UserLookup.tsx/UserLookup';
|
||||
import { RegisterName } from './components/RegisterName';
|
||||
import { BuyQortInformation } from './components/BuyQortInformation';
|
||||
@ -1350,13 +1341,13 @@ function App() {
|
||||
slotProps={{
|
||||
tooltip: {
|
||||
sx: {
|
||||
color: '#ffffff',
|
||||
backgroundColor: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
},
|
||||
arrow: {
|
||||
sx: {
|
||||
color: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
},
|
||||
}}
|
||||
@ -1387,13 +1378,13 @@ function App() {
|
||||
slotProps={{
|
||||
tooltip: {
|
||||
sx: {
|
||||
color: '#ffffff',
|
||||
backgroundColor: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
},
|
||||
arrow: {
|
||||
sx: {
|
||||
color: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
},
|
||||
}}
|
||||
@ -1438,10 +1429,10 @@ function App() {
|
||||
>
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
lineHeight: '24px',
|
||||
fontSize: '20px',
|
||||
fontWeight: 700,
|
||||
lineHeight: '24px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{ltcBalance} LTC
|
||||
@ -1496,10 +1487,10 @@ function App() {
|
||||
>
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
lineHeight: '24px',
|
||||
fontSize: '20px',
|
||||
fontWeight: 700,
|
||||
lineHeight: '24px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{balance?.toFixed(2)} QORT
|
||||
@ -1518,13 +1509,13 @@ function App() {
|
||||
{userInfo && !userInfo?.name && (
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
lineHeight: 1.2,
|
||||
color: 'red',
|
||||
cursor: 'pointer',
|
||||
fontSize: '16px',
|
||||
fontWeight: 500,
|
||||
cursor: 'pointer',
|
||||
lineHeight: 1.2,
|
||||
marginTop: '10px',
|
||||
color: 'red',
|
||||
textAlign: 'center',
|
||||
textDecoration: 'underline',
|
||||
}}
|
||||
onClick={() => {
|
||||
@ -1549,12 +1540,12 @@ function App() {
|
||||
)}
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
lineHeight: '24px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '12px',
|
||||
fontWeight: 500,
|
||||
cursor: 'pointer',
|
||||
lineHeight: '24px',
|
||||
marginTop: '10px',
|
||||
textAlign: 'center',
|
||||
textDecoration: 'underline',
|
||||
}}
|
||||
onClick={async () => {
|
||||
@ -1574,18 +1565,18 @@ function App() {
|
||||
return (
|
||||
<AuthenticatedContainer
|
||||
sx={{
|
||||
width: isMobile ? '100vw' : 'auto',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
display: 'flex',
|
||||
backgroundColor: 'var(--bg-2)',
|
||||
justifyContent: 'flex-end',
|
||||
width: isMobile ? '100vw' : 'auto',
|
||||
}}
|
||||
>
|
||||
{isMobile && (
|
||||
<Box
|
||||
sx={{
|
||||
padding: '10px',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
padding: '10px',
|
||||
}}
|
||||
>
|
||||
<CloseIcon
|
||||
@ -1610,10 +1601,10 @@ function App() {
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Spacer height="20px" />
|
||||
@ -1638,13 +1629,13 @@ function App() {
|
||||
slotProps={{
|
||||
tooltip: {
|
||||
sx: {
|
||||
color: '#ffffff',
|
||||
backgroundColor: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
},
|
||||
arrow: {
|
||||
sx: {
|
||||
color: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
},
|
||||
}}
|
||||
@ -1687,13 +1678,13 @@ function App() {
|
||||
slotProps={{
|
||||
tooltip: {
|
||||
sx: {
|
||||
color: '#ffffff',
|
||||
backgroundColor: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
},
|
||||
arrow: {
|
||||
sx: {
|
||||
color: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
},
|
||||
}}
|
||||
@ -1724,13 +1715,13 @@ function App() {
|
||||
slotProps={{
|
||||
tooltip: {
|
||||
sx: {
|
||||
color: '#ffffff',
|
||||
backgroundColor: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
},
|
||||
arrow: {
|
||||
sx: {
|
||||
color: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
},
|
||||
}}
|
||||
@ -1761,13 +1752,13 @@ function App() {
|
||||
slotProps={{
|
||||
tooltip: {
|
||||
sx: {
|
||||
color: '#ffffff',
|
||||
backgroundColor: '#444444', // TODO: use theme and adapt colors
|
||||
color: theme.palette.text.primary,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
},
|
||||
arrow: {
|
||||
sx: {
|
||||
color: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
},
|
||||
}}
|
||||
@ -1797,13 +1788,13 @@ function App() {
|
||||
slotProps={{
|
||||
tooltip: {
|
||||
sx: {
|
||||
color: '#ffffff',
|
||||
backgroundColor: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
},
|
||||
arrow: {
|
||||
sx: {
|
||||
color: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
},
|
||||
}}
|
||||
@ -1904,13 +1895,13 @@ function App() {
|
||||
slotProps={{
|
||||
tooltip: {
|
||||
sx: {
|
||||
color: '#ffffff',
|
||||
backgroundColor: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
},
|
||||
arrow: {
|
||||
sx: {
|
||||
color: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
},
|
||||
}}
|
||||
@ -1947,13 +1938,13 @@ function App() {
|
||||
slotProps={{
|
||||
tooltip: {
|
||||
sx: {
|
||||
color: '#ffffff',
|
||||
backgroundColor: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
},
|
||||
arrow: {
|
||||
sx: {
|
||||
color: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
},
|
||||
}}
|
||||
@ -1976,13 +1967,13 @@ function App() {
|
||||
slotProps={{
|
||||
tooltip: {
|
||||
sx: {
|
||||
color: '#ffffff',
|
||||
backgroundColor: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
},
|
||||
arrow: {
|
||||
sx: {
|
||||
color: '#444444',
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
},
|
||||
}}
|
||||
@ -2104,7 +2095,7 @@ function App() {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'fixed',
|
||||
background: '#27282c',
|
||||
background: theme.palette.background.default,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
@ -2573,6 +2564,7 @@ function App() {
|
||||
<img src={Logo1Dark} className="base-image" />
|
||||
</div>
|
||||
<Spacer height="38px" />
|
||||
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
@ -2583,7 +2575,9 @@ function App() {
|
||||
<TextItalic>{requestConnection?.hostname}</TextItalic> <br></br>
|
||||
<TextSpan>requests authentication</TextSpan>
|
||||
</TextP>
|
||||
|
||||
<Spacer height="38px" />
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
@ -2591,12 +2585,16 @@ function App() {
|
||||
gap: '14px',
|
||||
}}
|
||||
></Box>
|
||||
|
||||
<Spacer height="38px" />
|
||||
|
||||
<CustomButton {...getRootProps()}>
|
||||
<input {...getInputProps()} />
|
||||
Authenticate
|
||||
</CustomButton>
|
||||
|
||||
<Spacer height="6px" />
|
||||
|
||||
<CustomButton
|
||||
onClick={() => {
|
||||
setExtstate('create-wallet');
|
||||
@ -2609,14 +2607,15 @@ function App() {
|
||||
{extState === 'wallets' && (
|
||||
<>
|
||||
<Spacer height="22px" />
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
justifyContent: 'flex-start',
|
||||
paddingLeft: '22px',
|
||||
boxSizing: 'border-box',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
maxWidth: '700px',
|
||||
paddingLeft: '22px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Return
|
||||
@ -2631,6 +2630,7 @@ function App() {
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Wallets
|
||||
setRawWallet={setRawWallet}
|
||||
setExtState={setExtstate}
|
||||
@ -2643,12 +2643,12 @@ function App() {
|
||||
<Spacer height="22px" />
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
justifyContent: 'flex-start',
|
||||
paddingLeft: '22px',
|
||||
boxSizing: 'border-box',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
maxWidth: '700px',
|
||||
paddingLeft: '22px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Return
|
||||
@ -2684,7 +2684,9 @@ function App() {
|
||||
<Typography>
|
||||
{rawWallet?.name ? rawWallet?.name : rawWallet?.address0}
|
||||
</Typography>
|
||||
|
||||
<Spacer height="10px" />
|
||||
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: 'start',
|
||||
@ -2696,13 +2698,16 @@ function App() {
|
||||
Authenticate
|
||||
</TextP>
|
||||
</Box>
|
||||
|
||||
<Spacer height="35px" />
|
||||
|
||||
<>
|
||||
<CustomLabel htmlFor="standard-adornment-password">
|
||||
Wallet Password
|
||||
</CustomLabel>
|
||||
|
||||
<Spacer height="5px" />
|
||||
|
||||
<PasswordField
|
||||
id="standard-adornment-password"
|
||||
value={authenticatePassword}
|
||||
@ -2739,9 +2744,11 @@ function App() {
|
||||
)}
|
||||
|
||||
<Spacer height="20px" />
|
||||
|
||||
<CustomButton onClick={authenticateWallet}>
|
||||
Authenticate
|
||||
</CustomButton>
|
||||
|
||||
<ErrorText>{walletToBeDecryptedError}</ErrorText>
|
||||
</>
|
||||
</>
|
||||
@ -2751,12 +2758,12 @@ function App() {
|
||||
<Spacer height="22px" />
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
justifyContent: 'flex-start',
|
||||
paddingLeft: '22px',
|
||||
boxSizing: 'border-box',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
maxWidth: '700px',
|
||||
paddingLeft: '22px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Return
|
||||
@ -2777,7 +2784,9 @@ function App() {
|
||||
>
|
||||
<img src={Logo1Dark} className="base-image" />
|
||||
</div>
|
||||
|
||||
<Spacer height="35px" />
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
@ -2796,7 +2805,9 @@ function App() {
|
||||
Download Account
|
||||
</TextP>
|
||||
</Box>
|
||||
|
||||
<Spacer height="35px" />
|
||||
|
||||
{!walletToBeDownloaded && (
|
||||
<>
|
||||
<CustomLabel htmlFor="standard-adornment-password">
|
||||
@ -2841,12 +2852,12 @@ function App() {
|
||||
<Spacer height="22px" />
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
justifyContent: 'flex-start',
|
||||
paddingLeft: '22px',
|
||||
boxSizing: 'border-box',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
maxWidth: '700px',
|
||||
paddingLeft: '22px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Return
|
||||
@ -2947,7 +2958,6 @@ function App() {
|
||||
sx={{
|
||||
fontSize: '18px',
|
||||
marginTop: '15px',
|
||||
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
@ -2988,11 +2998,11 @@ function App() {
|
||||
<DialogContent>
|
||||
<Box
|
||||
sx={{
|
||||
flexDirection: 'column',
|
||||
maxWidth: '400px',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
display: showSeed ? 'flex' : 'none',
|
||||
flexDirection: 'column',
|
||||
gap: '10px',
|
||||
maxWidth: '400px',
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
@ -3005,11 +3015,11 @@ function App() {
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
width: '100%',
|
||||
backgroundColor: '#1f2023',
|
||||
background: theme.palette.background.paper,
|
||||
borderRadius: '5px',
|
||||
padding: '10px',
|
||||
textAlign: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{generatorRef.current?.parsedString}
|
||||
@ -3036,6 +3046,7 @@ function App() {
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: creationStep === 2 ? 'flex' : 'none',
|
||||
@ -3044,10 +3055,13 @@ function App() {
|
||||
}}
|
||||
>
|
||||
<Spacer height="14px" />
|
||||
|
||||
<CustomLabel htmlFor="standard-adornment-password">
|
||||
Wallet Password
|
||||
</CustomLabel>
|
||||
|
||||
<Spacer height="5px" />
|
||||
|
||||
<PasswordField
|
||||
id="standard-adornment-password"
|
||||
value={walletToBeDownloadedPassword}
|
||||
@ -3055,11 +3069,15 @@ function App() {
|
||||
setWalletToBeDownloadedPassword(e.target.value)
|
||||
}
|
||||
/>
|
||||
|
||||
<Spacer height="6px" />
|
||||
|
||||
<CustomLabel htmlFor="standard-adornment-password">
|
||||
Confirm Wallet Password
|
||||
</CustomLabel>
|
||||
|
||||
<Spacer height="5px" />
|
||||
|
||||
<PasswordField
|
||||
id="standard-adornment-password"
|
||||
value={walletToBeDownloadedPasswordConfirm}
|
||||
@ -3068,9 +3086,11 @@ function App() {
|
||||
}
|
||||
/>
|
||||
<Spacer height="5px" />
|
||||
|
||||
<Typography variant="body2">
|
||||
There is no minimum length requirement
|
||||
</Typography>
|
||||
|
||||
<Spacer height="17px" />
|
||||
|
||||
<CustomButton onClick={createAccountFunc}>
|
||||
@ -3127,13 +3147,13 @@ function App() {
|
||||
{isOpenSendQortSuccess && (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'fixed',
|
||||
background: '#27282c',
|
||||
alignItems: 'center',
|
||||
background: theme.palette.background.default,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
position: 'fixed',
|
||||
width: '100%',
|
||||
zIndex: 10000,
|
||||
}}
|
||||
>
|
||||
@ -3260,7 +3280,7 @@ function App() {
|
||||
<Button
|
||||
sx={{
|
||||
backgroundColor: 'var(--green)',
|
||||
color: 'black',
|
||||
color: theme.palette.text.primary,
|
||||
fontWeight: 'bold',
|
||||
opacity: 0.7,
|
||||
'&:hover': {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Box, CircularProgress } from '@mui/material';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Box, CircularProgress, useTheme } from '@mui/material';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
CustomButton,
|
||||
CustomInput,
|
||||
@ -13,6 +13,7 @@ import { ErrorText } from './ErrorText/ErrorText';
|
||||
import { getFee } from '../background';
|
||||
|
||||
export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
|
||||
const theme = useTheme();
|
||||
const [paymentTo, setPaymentTo] = useState<string>(defaultPaymentTo);
|
||||
const [paymentAmount, setPaymentAmount] = useState<number>(0);
|
||||
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?`,
|
||||
paymentFee: fee.fee + ' QORT',
|
||||
});
|
||||
|
||||
setIsLoadingSendCoin(true);
|
||||
|
||||
window
|
||||
.sendMessage('sendCoin', {
|
||||
amount: Number(paymentAmount),
|
||||
@ -62,65 +65,76 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
|
||||
setIsLoadingSendCoin(false);
|
||||
});
|
||||
} catch (error) {
|
||||
// error
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
alignItems: 'flex-start',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
}}
|
||||
>
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: 'start',
|
||||
lineHeight: '24px',
|
||||
fontSize: '20px',
|
||||
fontWeight: 600,
|
||||
lineHeight: '24px',
|
||||
textAlign: 'start',
|
||||
}}
|
||||
>
|
||||
Transfer QORT
|
||||
</TextP>
|
||||
|
||||
<Spacer height="35px" />
|
||||
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: 'start',
|
||||
lineHeight: '16px',
|
||||
color: theme.palette.text.primary,
|
||||
fontSize: '20px',
|
||||
fontWeight: 600,
|
||||
color: 'rgba(255, 255, 255, 0.5)',
|
||||
lineHeight: '16px',
|
||||
textAlign: 'start',
|
||||
}}
|
||||
>
|
||||
Balance:
|
||||
</TextP>
|
||||
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: 'start',
|
||||
lineHeight: '24px',
|
||||
fontSize: '20px',
|
||||
fontWeight: 700,
|
||||
lineHeight: '24px',
|
||||
textAlign: 'start',
|
||||
}}
|
||||
>
|
||||
{balance?.toFixed(2)} QORT
|
||||
</TextP>
|
||||
</Box>
|
||||
|
||||
<Spacer height="35px" />
|
||||
|
||||
<Box>
|
||||
<CustomLabel htmlFor="standard-adornment-name">To</CustomLabel>
|
||||
|
||||
<Spacer height="5px" />
|
||||
|
||||
<CustomInput
|
||||
id="standard-adornment-name"
|
||||
value={paymentTo}
|
||||
onChange={(e) => setPaymentTo(e.target.value)}
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<Spacer height="6px" />
|
||||
|
||||
<CustomLabel htmlFor="standard-adornment-amount">Amount</CustomLabel>
|
||||
|
||||
<Spacer height="5px" />
|
||||
|
||||
<BoundedNumericTextField
|
||||
value={paymentAmount}
|
||||
minValue={0}
|
||||
@ -130,11 +144,15 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
|
||||
allowNegatives={false}
|
||||
afterChange={(e: string) => setPaymentAmount(+e)}
|
||||
/>
|
||||
|
||||
<Spacer height="6px" />
|
||||
|
||||
<CustomLabel htmlFor="standard-adornment-password">
|
||||
Confirm Wallet Password
|
||||
</CustomLabel>
|
||||
|
||||
<Spacer height="5px" />
|
||||
|
||||
<PasswordField
|
||||
id="standard-adornment-password"
|
||||
value={paymentPassword}
|
||||
@ -142,10 +160,14 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
|
||||
autoComplete="off"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Spacer height="10px" />
|
||||
|
||||
<ErrorText>{sendPaymentError}</ErrorText>
|
||||
{/* <Typography>{sendPaymentSuccess}</Typography> */}
|
||||
|
||||
<Spacer height="25px" />
|
||||
|
||||
<CustomButton
|
||||
sx={{
|
||||
cursor: isLoadingSendCoin ? 'default' : 'pointer',
|
||||
@ -159,7 +181,7 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
|
||||
<CircularProgress
|
||||
size={16}
|
||||
sx={{
|
||||
color: 'white',
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -497,6 +497,7 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
|
||||
</ButtonBase>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<Tooltip
|
||||
title={
|
||||
|
||||
@ -2,113 +2,106 @@ import { Typography, Box, TextField, InputLabel } from '@mui/material';
|
||||
import { styled } from '@mui/system';
|
||||
|
||||
export const AppContainer = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
radius: '15px',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100vh',
|
||||
overflow: 'hidden',
|
||||
radius: '15px',
|
||||
width: '100vw',
|
||||
}));
|
||||
|
||||
export const AuthenticatedContainer = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
}));
|
||||
|
||||
export const AuthenticatedContainerInnerLeft = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
}));
|
||||
|
||||
export const AuthenticatedContainerInnerRight = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
width: '60px',
|
||||
height: '100%',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
width: '60px',
|
||||
}));
|
||||
|
||||
export const AuthenticatedContainerInnerTop = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
width: '100%px',
|
||||
height: '60px',
|
||||
padding: '20px',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
display: 'flex',
|
||||
height: '60px',
|
||||
justifyContent: 'flex-start',
|
||||
padding: '20px',
|
||||
width: '100%px',
|
||||
}));
|
||||
|
||||
export const TextP = styled(Typography)(({ theme }) => ({
|
||||
fontSize: '13px',
|
||||
fontWeight: 600,
|
||||
fontFamily: 'Inter',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
fontFamily: 'Inter',
|
||||
fontSize: '13px',
|
||||
fontWeight: 600,
|
||||
}));
|
||||
|
||||
export const TextItalic = styled('span')(({ theme }) => ({
|
||||
fontSize: '13px',
|
||||
fontWeight: 600,
|
||||
fontFamily: 'Inter',
|
||||
fontStyle: 'italic',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
fontFamily: 'Inter',
|
||||
fontSize: '13px',
|
||||
fontStyle: 'italic',
|
||||
fontWeight: 600,
|
||||
}));
|
||||
|
||||
export const TextSpan = styled('span')(({ theme }) => ({
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Inter',
|
||||
fontWeight: 800,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
fontFamily: 'Inter',
|
||||
fontSize: '13px',
|
||||
fontWeight: 800,
|
||||
}));
|
||||
|
||||
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',
|
||||
width: 'auto',
|
||||
height: '25px',
|
||||
padding: '5px 15px',
|
||||
gap: '5px',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
borderColor: theme.palette.background.paper,
|
||||
borderRadius: '100px',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '1px',
|
||||
color: theme.palette.text.primary,
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
fontFamily: 'Inter',
|
||||
fontSize: '12px',
|
||||
fontWeight: 600,
|
||||
gap: '5px',
|
||||
height: '25px',
|
||||
justifyContent: 'space-between',
|
||||
lineHeight: '14.52px',
|
||||
padding: '5px 15px',
|
||||
textAlign: 'left',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s',
|
||||
|
||||
width: 'auto',
|
||||
'&:hover': {
|
||||
backgroundColor:
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgba(41, 41, 43, 1)'
|
||||
: 'rgba(240, 240, 240, 1)',
|
||||
color: theme.palette.mode === 'dark' ? '#fff' : '#000',
|
||||
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
color: theme.palette.text.secondary,
|
||||
'svg path': {
|
||||
fill: theme.palette.mode === 'dark' ? '#fff' : '#000',
|
||||
},
|
||||
@ -116,40 +109,29 @@ export const AddressBox = 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',
|
||||
|
||||
width: 'fit-content',
|
||||
minWidth: '160px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s',
|
||||
|
||||
fontWeight: 600,
|
||||
fontFamily: 'Inter',
|
||||
textAlign: 'center',
|
||||
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,
|
||||
|
||||
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': {
|
||||
backgroundColor:
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgb(136, 130, 130)'
|
||||
: 'rgb(173, 173, 180)',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: '#fff',
|
||||
|
||||
'svg path': {
|
||||
fill: '#fff',
|
||||
},
|
||||
@ -163,40 +145,30 @@ interface CustomButtonProps {
|
||||
|
||||
export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
|
||||
({ 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',
|
||||
width: 'fit-content',
|
||||
transition: 'all 0.2s',
|
||||
minWidth: 160,
|
||||
backgroundColor: bgColor || theme.palette.background.default,
|
||||
borderColor: theme.palette.background.paper,
|
||||
borderRadius: 5,
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '0.5px',
|
||||
boxSizing: 'border-box',
|
||||
color: color || theme.palette.background.default,
|
||||
cursor: 'pointer',
|
||||
fontWeight: 600,
|
||||
display: 'inline-flex',
|
||||
filter: 'drop-shadow(1px 4px 10.5px rgba(0,0,0,0.3))',
|
||||
fontFamily: 'Inter',
|
||||
textAlign: 'center',
|
||||
fontWeight: 600,
|
||||
gap: '10px',
|
||||
justifyContent: 'center',
|
||||
minWidth: 160,
|
||||
opacity: 0.7,
|
||||
|
||||
// Color and backgroundColor with fallbacks
|
||||
backgroundColor:
|
||||
bgColor || (theme.palette.mode === 'dark' ? '#1d1d1d' : '#f5f5f5'),
|
||||
color: color || (theme.palette.mode === 'dark' ? '#fff' : '#000'),
|
||||
|
||||
padding: '15px 20px',
|
||||
textAlign: 'center',
|
||||
transition: 'all 0.2s',
|
||||
width: 'fit-content',
|
||||
'&:hover': {
|
||||
opacity: 1,
|
||||
backgroundColor:
|
||||
bgColor ||
|
||||
(theme.palette.mode === 'dark'
|
||||
? 'rgba(41, 41, 43, 1)'
|
||||
: 'rgba(230, 230, 230, 1)'),
|
||||
backgroundColor: bgColor || theme.palette.background.default,
|
||||
color: color || '#fff',
|
||||
svg: {
|
||||
path: {
|
||||
@ -208,33 +180,39 @@ export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
|
||||
);
|
||||
|
||||
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,
|
||||
borderColor: theme.palette.background.paper,
|
||||
borderRadius: '5px',
|
||||
color: theme.palette.text.primary,
|
||||
outline: 'none',
|
||||
width: '183px', // Adjust the width as needed
|
||||
input: {
|
||||
fontSize: 10,
|
||||
fontFamily: 'Inter',
|
||||
fontWeight: 400,
|
||||
color: 'white',
|
||||
color: theme.palette.text.primary,
|
||||
'&::placeholder': {
|
||||
fontSize: 16,
|
||||
color: 'rgba(255, 255, 255, 0.2)',
|
||||
color: theme.palette.text.secondary,
|
||||
},
|
||||
outline: 'none',
|
||||
padding: '10px',
|
||||
},
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'& fieldset': {
|
||||
border: '0.5px solid rgba(255, 255, 255, 0.5)',
|
||||
borderColor: theme.palette.background.paper,
|
||||
borderRadius: '0.5px',
|
||||
borderStyle: 'solid',
|
||||
},
|
||||
'&: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': {
|
||||
border: '0.5px solid rgba(255, 255, 255, 0.5)',
|
||||
borderColor: theme.palette.background.paper,
|
||||
borderRadius: '0.5px',
|
||||
borderStyle: 'solid',
|
||||
},
|
||||
},
|
||||
'& .MuiInput-underline:before': {
|
||||
@ -249,12 +227,10 @@ export const CustomInput = styled(TextField)(({ theme }) => ({
|
||||
}));
|
||||
|
||||
export const CustomLabel = styled(InputLabel)(({ theme }) => ({
|
||||
fontWeight: 400,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
fontFamily: 'Inter',
|
||||
fontSize: '10px',
|
||||
fontWeight: 400,
|
||||
lineHeight: '12px',
|
||||
color:
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgba(255, 255, 255, 0.5)'
|
||||
: 'rgba(0, 0, 0, 0.5)',
|
||||
}));
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user