Page Menu
Home
Phabricator
Search
Configure Global Search
Log In
Files
F14865024
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
6 KB
Subscribers
None
View Options
diff --git a/web/cashtab/src/components/Common/Notifications.js b/web/cashtab/src/components/Common/Notifications.js
index 9a33a3cc3..4b0e7943d 100644
--- a/web/cashtab/src/components/Common/Notifications.js
+++ b/web/cashtab/src/components/Common/Notifications.js
@@ -1,156 +1,182 @@
import * as React from 'react';
import { notification } from 'antd';
import {
CashReceivedNotificationIcon,
TokenReceivedNotificationIcon,
} from '@components/Common/CustomIcons';
import Paragraph from 'antd/lib/typography/Paragraph';
import { currency } from '@components/Common/Ticker';
import { MessageSignedNotificationIcon } from '@components/Common/CustomIcons';
+import { isMobile } from 'react-device-detect';
+
+const getDeviceNotificationStyle = () => {
+ if (isMobile) {
+ const notificationStyle = {
+ width: '100%',
+ marginTop: '10%',
+ };
+ return notificationStyle;
+ }
+ if (!isMobile) {
+ const notificationStyle = {
+ width: '100%',
+ };
+ return notificationStyle;
+ }
+};
// Success Notifications:
const sendXecNotification = link => {
+ const notificationStyle = getDeviceNotificationStyle();
notification.success({
message: 'Success',
description: (
<a href={link} target="_blank" rel="noopener noreferrer">
<Paragraph>
Transaction successful. Click to view in block explorer.
</Paragraph>
</a>
),
duration: currency.notificationDurationShort,
icon: <CashReceivedNotificationIcon />,
- style: { width: '100%' },
+ style: notificationStyle,
});
};
const createTokenNotification = link => {
+ const notificationStyle = getDeviceNotificationStyle();
notification.success({
message: 'Success',
description: (
<a href={link} target="_blank" rel="noopener noreferrer">
<Paragraph>
Token created! Click to view in block explorer.
</Paragraph>
</a>
),
icon: <TokenReceivedNotificationIcon />,
- style: { width: '100%' },
+ style: notificationStyle,
});
};
const tokenIconSubmitSuccess = () => {
+ const notificationStyle = getDeviceNotificationStyle();
notification.success({
message: 'Success',
description: (
<Paragraph>Your eToken icon was successfully submitted.</Paragraph>
),
icon: <TokenReceivedNotificationIcon />,
- style: { width: '100%' },
+ style: notificationStyle,
});
};
const sendTokenNotification = link => {
+ const notificationStyle = getDeviceNotificationStyle();
notification.success({
message: 'Success',
description: (
<a href={link} target="_blank" rel="noopener noreferrer">
<Paragraph>
Transaction successful. Click to view in block explorer.
</Paragraph>
</a>
),
duration: currency.notificationDurationShort,
icon: <TokenReceivedNotificationIcon />,
- style: { width: '100%' },
+ style: notificationStyle,
});
};
const xecReceivedNotification = (
balances,
previousBalances,
cashtabSettings,
fiatPrice,
) => {
+ const notificationStyle = getDeviceNotificationStyle();
notification.success({
message: 'Transaction received',
description: (
<Paragraph>
+{' '}
{parseFloat(
Number(
balances.totalBalance - previousBalances.totalBalance,
).toFixed(currency.cashDecimals),
).toLocaleString()}{' '}
{currency.ticker}{' '}
{cashtabSettings &&
cashtabSettings.fiatCurrency &&
`(${
currency.fiatCurrencies[cashtabSettings.fiatCurrency]
.symbol
}${(
Number(
balances.totalBalance -
previousBalances.totalBalance,
) * fiatPrice
).toFixed(
currency.cashDecimals,
)} ${cashtabSettings.fiatCurrency.toUpperCase()})`}
</Paragraph>
),
duration: currency.notificationDurationShort,
icon: <CashReceivedNotificationIcon />,
- style: { width: '100%' },
+ style: notificationStyle,
});
};
const eTokenReceivedNotification = (
currency,
receivedSlpTicker,
receivedSlpQty,
receivedSlpName,
) => {
+ const notificationStyle = getDeviceNotificationStyle();
notification.success({
message: `${currency.tokenTicker} transaction received: ${receivedSlpTicker}`,
description: (
<Paragraph>
You received {receivedSlpQty.toString()} {receivedSlpName}
</Paragraph>
),
duration: currency.notificationDurationShort,
icon: <TokenReceivedNotificationIcon />,
- style: { width: '100%' },
+ style: notificationStyle,
});
};
// Error Notification:
const errorNotification = (error, message, stringDescribingCallEvent) => {
+ const notificationStyle = getDeviceNotificationStyle();
console.log(error, message, stringDescribingCallEvent);
notification.error({
message: 'Error',
description: message,
duration: currency.notificationDurationLong,
+ style: notificationStyle,
});
};
const messageSignedNotification = msgSignature => {
+ const notificationStyle = getDeviceNotificationStyle();
notification.success({
message: 'Message Signature Generated',
description: <Paragraph>{msgSignature}</Paragraph>,
icon: <MessageSignedNotificationIcon />,
- style: { width: '100%' },
+ style: notificationStyle,
});
};
export {
sendXecNotification,
createTokenNotification,
tokenIconSubmitSuccess,
sendTokenNotification,
xecReceivedNotification,
eTokenReceivedNotification,
errorNotification,
messageSignedNotification,
};
File Metadata
Details
Attached
Mime Type
text/x-diff
Expires
Thu, May 22, 00:28 (19 h, 55 s)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5866215
Default Alt Text
(6 KB)
Attached To
rABC Bitcoin ABC
Event Timeline
Log In to Comment