This commit is contained in:
PhilReact 2025-05-03 00:12:39 +03:00
parent 1a14a5f62c
commit ab1eaeb338
7 changed files with 147 additions and 42 deletions

View File

@ -1028,12 +1028,7 @@ function App() {
const logoutFunc = useCallback(async () => { const logoutFunc = useCallback(async () => {
try { try {
if (hasSettingsChanged) { if (extState === 'authenticated') {
await showUnsavedChanges({
message:
'Your settings have changed. If you logout you will lose your changes. Click on the save button in the header to keep your changed settings.',
}); // TODO translate
} else if (extState === 'authenticated') {
await showUnsavedChanges({ await showUnsavedChanges({
message: 'Are you sure you would like to logout?', message: 'Are you sure you would like to logout?',
}); });
@ -3014,13 +3009,16 @@ function App() {
})} })}
</TextP> </TextP>
<Spacer height="100px" /> <Spacer height="100px" />
<CustomButton <ButtonBase
autoFocus
onClick={() => { onClick={() => {
returnToMain(); returnToMain();
}} }}
> >
{t('core:action.continue', { postProcess: 'capitalize' })} <CustomButton>
</CustomButton> {t('core:action.continue', { postProcess: 'capitalize' })}
</CustomButton>
</ButtonBase>
</Box> </Box>
)} )}
{extState === 'transfer-success-request' && ( {extState === 'transfer-success-request' && (
@ -3221,7 +3219,7 @@ function App() {
onClick={onOkUnsavedChanges} onClick={onOkUnsavedChanges}
autoFocus autoFocus
> >
{t('core:action.decline', { {t('core:action.continue_logout', {
postProcess: 'capitalize', postProcess: 'capitalize',
})} })}
</Button> </Button>
@ -3270,6 +3268,8 @@ function App() {
lineHeight: 1.2, lineHeight: 1.2,
maxWidth: '90%', maxWidth: '90%',
textAlign: 'center', textAlign: 'center',
fontSize: '16px',
marginBottom: '10px',
}} }}
> >
{messageQortalRequestExtension?.text1} {messageQortalRequestExtension?.text1}
@ -3342,11 +3342,15 @@ function App() {
)} )}
{messageQortalRequestExtension?.html && ( {messageQortalRequestExtension?.html && (
<div <>
dangerouslySetInnerHTML={{ <Spacer height="15px" />
__html: messageQortalRequestExtension?.html,
}} <div
/> dangerouslySetInnerHTML={{
__html: messageQortalRequestExtension?.html,
}}
/>
</>
)} )}
<Spacer height="15px" /> <Spacer height="15px" />

View File

@ -414,8 +414,23 @@ export const AppsDesktop = ({
setDesktopViewMode('dev'); setDesktopViewMode('dev');
}} }}
> >
<IconWrapper label="Dev" disableWidth> <IconWrapper
<AppsIcon height={30} /> color={
desktopViewMode === 'dev'
? theme.palette.text.primary
: theme.palette.text.secondary
}
label="Dev"
disableWidth
>
<AppsIcon
color={
desktopViewMode === 'dev'
? theme.palette.text.primary
: theme.palette.text.secondary
}
height={30}
/>
</IconWrapper> </IconWrapper>
</ButtonBase> </ButtonBase>
)} )}

View File

@ -158,6 +158,12 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
value={paymentPassword} value={paymentPassword}
onChange={(e) => setPaymentPassword(e.target.value)} onChange={(e) => setPaymentPassword(e.target.value)}
autoComplete="off" autoComplete="off"
onKeyDown={(e) => {
if (e.key === 'Enter') {
if (isLoadingSendCoin) return;
sendCoinFunc();
}
}}
/> />
</Box> </Box>

View File

@ -27,15 +27,25 @@ export const ReactionPicker = ({ onReaction }) => {
if (showPicker) { if (showPicker) {
setShowPicker(false); setShowPicker(false);
} else { } else {
// Get the button's position
const buttonRect = buttonRef.current.getBoundingClientRect(); const buttonRect = buttonRef.current.getBoundingClientRect();
const pickerWidth = 350; const pickerWidth = 350;
const pickerHeight = 400; // Match Picker height prop
// Calculate position to align the right edge of the picker with the button's right edge // Initial position (below the button)
setPickerPosition({ let top = buttonRect.bottom + window.scrollY;
top: buttonRect.bottom + window.scrollY, // Position below the button let left = buttonRect.right + window.scrollX - pickerWidth;
left: buttonRect.right + window.scrollX - pickerWidth, // Align right edges
}); // If picker would overflow bottom, show it above the button
const overflowBottom =
top + pickerHeight > window.innerHeight + window.scrollY;
if (overflowBottom) {
top = buttonRect.top + window.scrollY - pickerHeight;
}
// Optional: prevent overflow on the left too
if (left < 0) left = 0;
setPickerPosition({ top, left });
setShowPicker(true); setShowPicker(true);
} }
}; };
@ -92,12 +102,13 @@ export const ReactionPicker = ({ onReaction }) => {
allowExpandReactions={true} allowExpandReactions={true}
autoFocusSearch={false} autoFocusSearch={false}
emojiStyle={EmojiStyle.NATIVE} emojiStyle={EmojiStyle.NATIVE}
height="450" height={400}
onEmojiClick={handlePicker} onEmojiClick={handlePicker}
onReactionClick={handleReaction} onReactionClick={handleReaction}
reactionsDefaultOpen={true} // reactionsDefaultOpen={true}
// open={true}
theme={Theme.DARK} theme={Theme.DARK}
width="350" width={350}
/> />
</div>, </div>,
document.body document.body

View File

@ -25,7 +25,7 @@ const ThemeContext = createContext({
toggleTheme: () => {}, toggleTheme: () => {},
userThemes: [defaultTheme], userThemes: [defaultTheme],
addUserTheme: (themes) => {}, addUserTheme: (themes) => {},
setUserTheme: (theme) => {}, setUserTheme: (theme, themes) => {},
currentThemeId: 'default', currentThemeId: 'default',
}); });
@ -83,13 +83,13 @@ export const ThemeProvider = ({ children }) => {
saveSettings(themes); saveSettings(themes);
}; };
const setUserTheme = (theme) => { const setUserTheme = (theme, themes) => {
if (theme.id === 'default') { if (theme.id === 'default') {
setCurrentThemeId('default'); setCurrentThemeId('default');
saveSettings(userThemes, themeMode, 'default'); saveSettings(themes || userThemes, themeMode, 'default');
} else { } else {
setCurrentThemeId(theme.id); setCurrentThemeId(theme.id);
saveSettings(userThemes, themeMode, theme.id); saveSettings(themes || userThemes, themeMode, theme.id);
} }
}; };

View File

@ -119,7 +119,7 @@ export default function ThemeManager() {
const newTheme = { ...themeDraft, id: uid.rnd() }; const newTheme = { ...themeDraft, id: uid.rnd() };
const updatedThemes = [...userThemes, newTheme]; const updatedThemes = [...userThemes, newTheme];
addUserTheme(updatedThemes); addUserTheme(updatedThemes);
setUserTheme(newTheme); setUserTheme(newTheme, updatedThemes);
} }
setOpenEditor(false); setOpenEditor(false);
}; };
@ -135,19 +135,22 @@ export default function ThemeManager() {
); );
if (defaultTheme) { if (defaultTheme) {
setUserTheme(defaultTheme); setUserTheme(defaultTheme, updatedThemes);
} else { } else {
// Emergency fallback // Emergency fallback
setUserTheme({ setUserTheme(
light: lightThemeOptions, {
dark: darkThemeOptions, light: lightThemeOptions,
}); dark: darkThemeOptions,
},
updatedThemes
);
} }
} }
}; };
const handleApplyTheme = (theme) => { const handleApplyTheme = (theme) => {
setUserTheme(theme); setUserTheme(theme, null);
}; };
const handleColorChange = (mode, fieldPath, color) => { const handleColorChange = (mode, fieldPath, color) => {
@ -210,7 +213,8 @@ export default function ThemeManager() {
const newTheme = { ...importedTheme, id: uid.rnd() }; const newTheme = { ...importedTheme, id: uid.rnd() };
const updatedThemes = [...userThemes, newTheme]; const updatedThemes = [...userThemes, newTheme];
addUserTheme(updatedThemes); addUserTheme(updatedThemes);
setUserTheme(newTheme);
setUserTheme(newTheme, updatedThemes);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }

View File

@ -2680,7 +2680,7 @@ export const updateForeignFee = async (data) => {
const { coin, type, value } = data; const { coin, type, value } = data;
const url = `/crosschain/${coin.toLowerCase()}/update${type}`; const url = `/crosschain/${coin.toLowerCase()}/update${type}`;
const valueStringified = JSON.stringify(+value);
try { try {
const endpoint = await createEndpoint(url); const endpoint = await createEndpoint(url);
const response = await fetch(endpoint, { const response = await fetch(endpoint, {
@ -2689,7 +2689,7 @@ export const updateForeignFee = async (data) => {
Accept: '*/*', Accept: '*/*',
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify({ value }), body: valueStringified,
}); });
if (!response.ok) throw new Error('Failed to update foreign fee'); if (!response.ok) throw new Error('Failed to update foreign fee');
@ -3493,6 +3493,35 @@ export const sendCoin = async (data, isFromExtension) => {
} }
}; };
function calculateFeeFromRate(feePerKb, sizeInBytes) {
return (feePerKb / 1000) * sizeInBytes;
}
const getBuyingFees = async (foreignBlockchain) => {
const ticker = sellerForeignFee[foreignBlockchain].ticker;
if (!ticker) throw new Error('invalid foreign blockchain');
const unlockFee = await getForeignFee({
coin: ticker,
type: 'feerequired',
});
const lockFee = await getForeignFee({
coin: ticker,
type: 'feekb',
});
return {
ticker: ticker,
lock: {
sats: lockFee,
fee: lockFee / QORT_DECIMALS,
},
unlock: {
sats: unlockFee,
fee: unlockFee / QORT_DECIMALS,
byteFee300: calculateFeeFromRate(+unlockFee, 300) / QORT_DECIMALS,
},
};
};
export const createBuyOrder = async (data, isFromExtension) => { export const createBuyOrder = async (data, isFromExtension) => {
const requiredFields = ['crosschainAtInfo', 'foreignBlockchain']; const requiredFields = ['crosschainAtInfo', 'foreignBlockchain'];
const missingFields: string[] = []; const missingFields: string[] = [];
@ -3528,6 +3557,7 @@ export const createBuyOrder = async (data, isFromExtension) => {
const crosschainAtInfo = await Promise.all(atPromises); const crosschainAtInfo = await Promise.all(atPromises);
try { try {
const buyingFees = await getBuyingFees(foreignBlockchain);
const resPermission = await getUserPermission( const resPermission = await getUserPermission(
{ {
text1: text1:
@ -3541,10 +3571,45 @@ export const createBuyOrder = async (data, isFromExtension) => {
return latest + +cur?.expectedForeignAmount; return latest + +cur?.expectedForeignAmount;
}, 0) }, 0)
)} )}
${` ${crosschainAtInfo?.[0]?.foreignBlockchain}`}`, ${` ${buyingFees.ticker}`}`,
highlightedText: `Is using public node: ${isGateway}`, highlightedText: `Is using public node: ${isGateway}`,
fee: '', fee: '',
foreignFee: `${sellerForeignFee[foreignBlockchain].value} ${sellerForeignFee[foreignBlockchain].ticker}`, html: `
<div style="max-height: 30vh; overflow-y: auto; font-family: sans-serif;">
<style>
.fee-container {
background-color: #1e1e1e;
color: #e0e0e0;
border: 1px solid #444;
border-radius: 8px;
padding: 16px;
margin-bottom: 12px;
}
.fee-label {
font-weight: bold;
color: #bb86fc;
margin-bottom: 4px;
}
.fee-description {
font-size: 14px;
color: #cccccc;
margin-bottom: 16px;
}
</style>
<div class="fee-container">
<div class="fee-label">Total Unlocking Fee:</div>
<div>${(+buyingFees?.unlock?.byteFee300 * atAddresses?.length)?.toFixed(8)} ${buyingFees.ticker}</div>
<div class="fee-description">
This fee is an estimate based on ${atAddresses?.length} ${atAddresses?.length > 1 ? 'orders' : 'order'} at a 300 byte cost of ${buyingFees?.unlock?.byteFee300?.toFixed(8)}
</div>
<div class="fee-label">Total Locking Fee:</div>
<div>${+buyingFees?.unlock.fee.toFixed(8)} ${buyingFees.ticker} per kb</div>
</div>
</div>
`,
}, },
isFromExtension isFromExtension
); );