diff --git a/.yarn/cache/@notifi-network-notifi-axios-adapter-npm-0.86.0-fd2b0b19a2-59115912e1.zip b/.yarn/cache/@notifi-network-notifi-axios-adapter-npm-0.86.0-fd2b0b19a2-59115912e1.zip new file mode 100644 index 000000000..654de4d05 Binary files /dev/null and b/.yarn/cache/@notifi-network-notifi-axios-adapter-npm-0.86.0-fd2b0b19a2-59115912e1.zip differ diff --git a/.yarn/cache/@notifi-network-notifi-axios-utils-npm-0.86.0-d3a9133501-a510d0bb14.zip b/.yarn/cache/@notifi-network-notifi-axios-utils-npm-0.86.0-d3a9133501-a510d0bb14.zip new file mode 100644 index 000000000..3922532db Binary files /dev/null and b/.yarn/cache/@notifi-network-notifi-axios-utils-npm-0.86.0-d3a9133501-a510d0bb14.zip differ diff --git a/.yarn/cache/@notifi-network-notifi-core-npm-0.86.0-314a7e7553-55263fc642.zip b/.yarn/cache/@notifi-network-notifi-core-npm-0.86.0-314a7e7553-55263fc642.zip new file mode 100644 index 000000000..860062091 Binary files /dev/null and b/.yarn/cache/@notifi-network-notifi-core-npm-0.86.0-314a7e7553-55263fc642.zip differ diff --git a/.yarn/cache/@notifi-network-notifi-frontend-client-npm-0.86.0-4c90045f4d-3b2943444e.zip b/.yarn/cache/@notifi-network-notifi-frontend-client-npm-0.86.0-4c90045f4d-3b2943444e.zip new file mode 100644 index 000000000..aa786a161 Binary files /dev/null and b/.yarn/cache/@notifi-network-notifi-frontend-client-npm-0.86.0-4c90045f4d-3b2943444e.zip differ diff --git a/.yarn/cache/@notifi-network-notifi-graphql-npm-0.86.0-7468ee3eb2-c312a29b92.zip b/.yarn/cache/@notifi-network-notifi-graphql-npm-0.86.0-7468ee3eb2-c312a29b92.zip new file mode 100644 index 000000000..0399f4505 Binary files /dev/null and b/.yarn/cache/@notifi-network-notifi-graphql-npm-0.86.0-7468ee3eb2-c312a29b92.zip differ diff --git a/.yarn/cache/@notifi-network-notifi-react-card-npm-0.86.0-cac9927206-996138e513.zip b/.yarn/cache/@notifi-network-notifi-react-card-npm-0.86.0-cac9927206-996138e513.zip new file mode 100644 index 000000000..6abf62b61 Binary files /dev/null and b/.yarn/cache/@notifi-network-notifi-react-card-npm-0.86.0-cac9927206-996138e513.zip differ diff --git a/.yarn/cache/@notifi-network-notifi-react-hooks-npm-0.86.0-9f0c5e9c6e-c0aae8315e.zip b/.yarn/cache/@notifi-network-notifi-react-hooks-npm-0.86.0-9f0c5e9c6e-c0aae8315e.zip new file mode 100644 index 000000000..146ef2602 Binary files /dev/null and b/.yarn/cache/@notifi-network-notifi-react-hooks-npm-0.86.0-9f0c5e9c6e-c0aae8315e.zip differ diff --git a/.yarn/cache/@virtuoso.dev-react-urx-npm-0.2.13-778c2d6bbd-173e91c21f.zip b/.yarn/cache/@virtuoso.dev-react-urx-npm-0.2.13-778c2d6bbd-173e91c21f.zip new file mode 100644 index 000000000..a29495bb7 Binary files /dev/null and b/.yarn/cache/@virtuoso.dev-react-urx-npm-0.2.13-778c2d6bbd-173e91c21f.zip differ diff --git a/.yarn/cache/@virtuoso.dev-urx-npm-0.2.13-c1ced89fba-682a99cf40.zip b/.yarn/cache/@virtuoso.dev-urx-npm-0.2.13-c1ced89fba-682a99cf40.zip new file mode 100644 index 000000000..a9eda6b0f Binary files /dev/null and b/.yarn/cache/@virtuoso.dev-urx-npm-0.2.13-c1ced89fba-682a99cf40.zip differ diff --git a/.yarn/cache/immediate-npm-3.0.6-c27588a2d3-f9b3486477.zip b/.yarn/cache/immediate-npm-3.0.6-c27588a2d3-f9b3486477.zip new file mode 100644 index 000000000..d3f74981e Binary files /dev/null and b/.yarn/cache/immediate-npm-3.0.6-c27588a2d3-f9b3486477.zip differ diff --git a/.yarn/cache/libphonenumber-js-npm-1.10.44-bfa0edfc7a-ada1bc135c.zip b/.yarn/cache/libphonenumber-js-npm-1.10.44-bfa0edfc7a-ada1bc135c.zip new file mode 100644 index 000000000..ee2a6c668 Binary files /dev/null and b/.yarn/cache/libphonenumber-js-npm-1.10.44-bfa0edfc7a-ada1bc135c.zip differ diff --git a/.yarn/cache/lie-npm-3.1.1-91350720d9-6da9f2121d.zip b/.yarn/cache/lie-npm-3.1.1-91350720d9-6da9f2121d.zip new file mode 100644 index 000000000..dfbd4858e Binary files /dev/null and b/.yarn/cache/lie-npm-3.1.1-91350720d9-6da9f2121d.zip differ diff --git a/.yarn/cache/localforage-npm-1.10.0-cf9ea9a436-f2978b434d.zip b/.yarn/cache/localforage-npm-1.10.0-cf9ea9a436-f2978b434d.zip new file mode 100644 index 000000000..b9f85f795 Binary files /dev/null and b/.yarn/cache/localforage-npm-1.10.0-cf9ea9a436-f2978b434d.zip differ diff --git a/.yarn/cache/react-virtuoso-npm-3.1.5-16c6f94f84-c6dd6921e7.zip b/.yarn/cache/react-virtuoso-npm-3.1.5-16c6f94f84-c6dd6921e7.zip new file mode 100644 index 000000000..d3649e6a2 Binary files /dev/null and b/.yarn/cache/react-virtuoso-npm-3.1.5-16c6f94f84-c6dd6921e7.zip differ diff --git a/v2/components/Navigation/Navigation.tsx b/v2/components/Navigation/Navigation.tsx index 97665c3a7..198d84b75 100644 --- a/v2/components/Navigation/Navigation.tsx +++ b/v2/components/Navigation/Navigation.tsx @@ -22,7 +22,6 @@ import { GuideIcon, NineDots, LoansIcon, - // NotificationsIcon, OptimismIcon, // SettingsIcon, StakingIcon, @@ -45,6 +44,7 @@ import { WalletModal } from '@snx-v2/WalletModal'; import { ContractContext } from '@snx-v2/ContractContext'; import { useDelegateWallet } from '@snx-v2/useDelegateWallet'; import { EXTERNAL_LINKS } from '@snx-v2/Constants'; +import { NotifiButton, NotifiContextWrapper } from '@snx-v2/NotifiButton'; interface NavigationProps { currentNetwork: NetworkId; @@ -112,6 +112,15 @@ export const NavigationUI = ({ > {size === 'desktop' ? : } + {isWalletConnected && walletAddress && !delegateWallet && ( + <> + {size === 'desktop' && ( + + + + )} + + )} {isWalletConnected && walletAddress && ( <> {size === 'desktop' && ( diff --git a/v2/components/Navigation/package.json b/v2/components/Navigation/package.json index 1d4ecad14..50ab99b81 100644 --- a/v2/components/Navigation/package.json +++ b/v2/components/Navigation/package.json @@ -8,6 +8,7 @@ "@snx-v2/Constants": "workspace:*", "@snx-v2/ContractContext": "workspace:*", "@snx-v2/EpochPrice": "workspace:^", + "@snx-v2/NotifiButton": "workspace:*", "@snx-v2/UserBalances": "workspace:*", "@snx-v2/WalletModal": "workspace:*", "@snx-v2/formatters": "workspace:*", diff --git a/v2/components/Notifi/NotifiCard.tsx b/v2/components/Notifi/NotifiCard.tsx new file mode 100644 index 000000000..a777c3cfc --- /dev/null +++ b/v2/components/Notifi/NotifiCard.tsx @@ -0,0 +1,70 @@ +import { + NotifiInputFieldsText, + NotifiInputSeparators, + NotifiSubscriptionCard, +} from '@notifi-network/notifi-react-card'; +import './notifi.css'; +import React, { useContext } from 'react'; +import { ContractContext } from '@snx-v2/ContractContext'; +import { NetworkIdByName } from '@snx-v2/useSynthetixContracts'; + +const isTestnet = (networkId: null | number) => { + if (networkId === NetworkIdByName['mainnet-ovm'] || networkId === NetworkIdByName['mainnet']) { + return false; + } + return true; +}; +export const NotifiCard: React.FC<{ onClose: () => void }> = ({ onClose }) => { + const { networkId, walletAddress } = useContext(ContractContext); + if (walletAddress === null || networkId === null) { + // account is required + return null; + } + const isL2 = networkId === NetworkIdByName['mainnet-ovm']; + const isMainnet = !isTestnet(networkId); + + const cardId = isMainnet + ? isL2 + ? '283fa53b4b8e4ed1a2234615bf01d240' + : '5ece3cd3ec504576b10ab396d619dc9b' + : '8a569abd38974f76837960bd9bf36049'; + + const inputLabels: NotifiInputFieldsText = { + label: {}, + placeholderText: { + email: 'Email address', + telegram: 'Telegram ID', + }, + }; + + const inputSeparators: NotifiInputSeparators = { + emailSeparator: { + content: 'OR', + }, + telegramSeparator: { + content: 'OR', + }, + }; + + return ( + + ); +}; diff --git a/v2/components/Notifi/index.ts b/v2/components/Notifi/index.ts new file mode 100644 index 000000000..d19973301 --- /dev/null +++ b/v2/components/Notifi/index.ts @@ -0,0 +1,3 @@ +import { NotifiCard } from './NotifiCard'; +export { NotifiCard } from './NotifiCard'; +export default NotifiCard; diff --git a/v2/components/Notifi/notifi.css b/v2/components/Notifi/notifi.css new file mode 100644 index 000000000..7b1559e7f --- /dev/null +++ b/v2/components/Notifi/notifi.css @@ -0,0 +1,1744 @@ +a { + text-decoration: none; +} +.notifi__dark { + --notifi-card-secondary-background: #2a2a3b; + --notifi-placeholder-color: rgba(255, 255, 255, 0.2); + --notifi-focus-color: #fff; + --notifi-toggle-handle: #fff; + --notifi-toggle-inactive: #b6b8d5; + --notifi-toggle-active: #82f7c5; + --notifi-tooltip-background: #2a2a3b; + --notifi-alert-color: #f37884; + --notifi-link-color: #82f7c5; + --notifi-checkmark-color: #82f7c5; + --notifi-font-color: #fff; + --notifi-secondary-font-color: #fff; + --notifi-card-background: #06061a; + --notifi-intro-color: #b6b8d5; + --notifi-input-background: #2e2e3f; + --notifi-input-border: #23262f; + --notifi-button-color: #82f7c5; + --notifi-button-disabled-color: #385f58; + --notifi-button-text-color: #000000; + --notifi-incoming-message: #474858; + --notifi-outgoing-message: #678afc; + --notifi-settings-icon-color: #fff; + --notifi-confirmation-color: #82f7c5; + --notifi-banner-background: #222222; + --notifi-banner-icon-color: #262949; + --notifi-divider-line: rgba(119, 126, 144, 0.1); +} +input:autofill, +input:-webkit-autofill { + border: none; + transition: background-color 50000s ease-in-out 0s; + -webkit-text-fill-color: var(--notifi-font-color); +} +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +.NotifiSubscriptionCard__container, +.NotifiIntercomCard__Container { + color: var(--notifi-font-color); + display: flex; + flex-direction: column; + /* font-family: Graphik; */ + background-color: var(--notifi-card-background); + border-radius: 4px; + border: 1px solid #303036; + padding: 20px 0px 5px 0px; + min-height: 510px; + min-width: 333px; + margin: 0; +} +.NotifiPreviewCard__container { + flex-grow: 1; +} +.NotifiPreviewCard__dividerLine { + height: 1px; + background: #fff; + opacity: 0.2; + margin: 20px 16px; +} +.NotifiPreviewCard__title { + line-height: 133.187%; + letter-spacing: 0.12px; + padding: 0px 20px; + opacity: 0.6; + margin-top: 17.5px; + margin-bottom: 17.5px !important; + font-size: 12px; + font-weight: 400; +} +.NotifiInputContainer { + flex-grow: 1; + display: flex; + flex-direction: column; + margin: 10px 20px; +} +.NotifiInputHeading { + color: var(--notifi-font-color); + font-weight: 700; + font-size: 16px; + line-height: 24px; + margin-top: 24px !important; + margin-bottom: 16px !important; +} +.NotifiSubscriptionCard__container *:not(:last-child) { + margin-bottom: 10px; +} +.NotifiSubscriptionCardV1__alertContainer { + display: flex; + position: relative; + flex-direction: column; + flex-grow: 1; + margin-bottom: 0px !important; +} +.NotifiVerifyContainer { + display: flex; + flex-direction: column; + justify-content: space-between; + flex: 1; +} +.NotifiVerifyContainer ul { + padding-left: 0; + margin: 0; +} +.ConnectWalletRow__container { + padding: 16px 0; + display: flex; + flex-direction: column; + align-items: stretch; + margin-bottom: 0 !important; + margin-top: 0 !important; + border-bottom: 1px solid var(--notifi-input-border); +} +.ConnectWalletRow__topRow { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} +.ConnectWalletRow__messageRow { + display: flex; + flex-direction: row; + align-items: center; + color: var(--notifi-secondary-font-color); + text-align: justify; + line-height: 1.25em; +} +.ConnectWalletRow__bottomRow { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; +} +.ConnectWalletRow__verified, +.ConnectWalletRow__publicKey, +.ConnectWalletRow__container, +.ConnectWalletRow__bottomRow { + margin: 0 !important; +} +.NotifiIntercomCard__container { + background-color: var(--notifi-card-background); + box-shadow: 0px 4px 30px 30px #0000000a; + width: 364px; + padding: 0; + height: 500px; + display: flex; + flex-direction: column; +} +.NotifiFooter__container { + display: flex; + flex-direction: column; + font-size: 12px; + line-height: 14px; + justify-content: center; + align-items: center; + padding: 12px 0px; +} +.NotifiFooter__poweredByContainer { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} +.NotifiFooter__poweredBy { + font-size: 8px; + line-height: 14px; + color: var(--notifi-font-color); + margin-bottom: 0 !important; +} +.NotifiFooter__logoSvg { + height: 12px; + position: relative; + padding-top: 2px; + margin-left: 4px; + top: -2px; +} +.NotifiFooter__spacer { + flex-grow: 1; +} +.NotifiFooter__link a { + color: var(--notifi-font-color); + font-size: 12px; + line-height: 14px; +} +.NotifiDisclosure__hyperlink { + color: var(--notifi-link-color); +} +.NotifiAlertBox__container { + display: flex; + align-items: center; + padding: 0px 20px; +} +.NotifiAlertBox__btn--left { + width: 18px; + height: 18px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + margin-bottom: 0 !important; + margin-right: 12px; +} + +.NotifiAlertBox__btn--right { + width: 18px; + height: 18px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + margin-bottom: 0 !important; + margin-left: 12px; +} +.NotifiAlertBox__btn--right svg { + color: var(--notifi-font-color); +} +.NotifiAlertBox__btn--spacer:empty { + width: 24px; + height: 24px; +} +.NotifiAlertBox__btn--spacer { + width: 24px; + height: 24px; + visibility: hidden; + margin-bottom: 0 !important; +} +.NotifiAlertBox__content { + flex: 1; + display: flex; + margin-left: 8px; + margin-right: 8px; + color: var(--notifi-secondary-font-color); + font-weight: 400; + font-size: 14px; + line-height: 18px; + text-align: center; + justify-content: center; + margin-bottom: 0 !important; +} +.NotifiAlertBox__content h2 { + color: var(--notifi-font-color); + font-weight: 600; + font-size: 14px; + line-height: 133.187%; + text-align: center; + /* margin: 0 auto !important; */ +} +.NotifiAlertBox__iconSvg { + width: 24px; + height: 24px; +} +.NotifiAlertHistory__label { + font-size: 16px; + margin-bottom: 0px !important; + color: var(--notifi-font-color); + text-align: center; +} +.NotifiAlertHistory__notificationRow { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 10px 0 0 0px; + flex-grow: 1; + overflow: hidden; + border-bottom: 1px solid var(--notifi-divider-line); +} +.NotifiAlertHistory__content, +.SignupBanner__Content { + display: flex; + flex-direction: column; + flex-grow: 1; + padding-right: 20px; + text-align: start; + width: 50%; + white-space: nowrap; +} +.NotifiAlertHistory__notificationRow:hover { + cursor: pointer; + /* background-color: var(--notifi-card-secondary-background); */ + /* border-radius: 16px; */ +} +.DividerLine.history { + height: 1px; + background-color: rgba(255, 255, 255, 0.2); +} +.NotifiAlertHistory__notificationDate { + font-size: 12px; + line-height: normal; + color: var(--notifi-font-color); + opacity: 0.7; +} +.NotifiAlertHistory__notificationTitle, +.SignupBanner__Title { + font-size: 14px; + line-height: normal; + overflow: hidden; + color: var(--notifi-font-color); + font-weight: 500; + width: 100%; + white-space: pre-line; + word-wrap: break-word; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} +.NotifiAlertHistory__notificationImage { + width: 18px; + height: 18px; + margin-right: 10px; + color: var(--notifi-settings-icon-color); + margin-top: -3px; +} +.NotifiAlertHistory_noAlertDescription { + font-size: 14px; + line-height: 14px; + font-family: inherit; + color: var(--notifi-secondary-font-color); + text-align: center; +} +.NotifiAlertHistory__notificationSubject, +.SignupBanner__Subject { + font-size: 12px; + line-height: normal; + font-weight: 400; + color: var(--notifi-font-color); + opacity: 0.7; + overflow: hidden; + white-space: pre-wrap; + word-wrap: break-word; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} +.NotifiAlertHistory__manageAlertLink { + font-size: 14px; + line-height: 14px; + color: var(--notifi-link-color); + cursor: pointer; +} +.NotifiEmailInput__container, +.NotifiSmsInput__container, +.NotifiTelegramInput__container { + display: flex; + flex-direction: row; + background-color: var(--notifi-input-background); + border: 1.5px solid var(--notifi-input-border); + border-radius: 6px; + padding: 16px 16px; + align-items: center; + max-height: 18px; + box-sizing: content-box; + align-self: stretch; +} +.NotifiEmailInput::after, +.NotifiSmsInput::after { + content: 'OR'; +} +.NotifiEmailInput__container:focus-within, +.NotifiSmsInput__container:focus-within, +.NotifiTelegramInput__container:focus-within { + box-shadow: inset 0px 0px 0px 1px var(--notifi-focus-color); +} +.NotifiEmailInput__errorMessage, +.NotifiSmsInput__errorMessage, +.NotifiTelegramInput__errorMessage { + color: var(--notifi-alert-color); + font-size: 14px; + margin-bottom: 0px !important; + text-align: center; +} +.NotifiEmailInput__input, +.NotifiSmsInput__input, +.NotifiTelegramInput__input { + flex-shrink: 1; + font-size: 14px; + line-height: normal; + height: 47px; + width: 100%; + display: flex; + background: none; + outline: none; + border: none; + color: var(--notifi-font-color); + font-weight: 400; +} +.NotifiEmailInput__input::placeholder, +.NotifiSmsInput__input::placeholder, +.NotifiTelegramInput__input::placeholder { + color: var(--notifi-placeholder-color); +} +.NotifiIntercomEmailInput__input::placeholder, +.NotifiIntercomSmsInput__input::placeholder, +.NotifiIntercomTelegramInput__input::placeholder { + font-size: 14px; + font-weight: 500; + line-height: 17px; + text-align: left; + color: #80829d; +} +.NotifiInput__icon { + margin-right: 10px; + margin-bottom: 0px !important; +} +.NotifiToggle__container { + --notifi-toggle-size: 14px; + --notifi-toggle-padding: 1px; + --notifi-toggle-container: calc(var(--notifi-toggle-size) + 2 * var(--notifi-toggle-padding)); + position: relative; + display: inline-block; + width: calc(var(--notifi-toggle-container) + var(--notifi-toggle-size)); + height: var(--notifi-toggle-container); +} +.NotifiEmailInput__label, +.NotifiDiscordInput__label, +.NotifiSmsInput__label, +.NotifiTelegramInput__label { + display: flex; + margin-bottom: 12px !important; + color: var(--notifi-font-color); + opacity: 0.5; + font-size: 12px; + line-height: 18px; +} +.NotifiToggle__input { + opacity: 0; + width: 0; + height: 0; +} +.NotifiToggle__slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--notifi-toggle-inactive); + border-radius: var(--notifi-toggle-container); + transition: 0.2s; +} +.NotifiToggle__slider:before { + position: absolute; + content: ''; + height: var(--notifi-toggle-size); + width: var(--notifi-toggle-size); + left: var(--notifi-toggle-padding); + bottom: var(--notifi-toggle-padding); + background-color: var(--notifi-toggle-handle); + border-radius: 50%; + transition: 0.2s; +} +.NotifiToggle__input:checked + .NotifiToggle__slider { + background: var(--notifi-toggle-active); +} +.NotifiToggle__input:checked + .NotifiToggle__slider:before { + transform: translateX(var(--notifi-toggle-size)); +} +.NotifiToggleSlider--disabled { + cursor: progress; +} +.NotifiIntercomToggle__input:checked + .NotifiToggle__slider { + background-color: #1448f3; +} +.NotifiHwWalletToggle__container, +.NotifiDiscordToggle__container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 10px; + padding-top: 10px; +} +.NotifiHwWalletToggle__label, +.NotifiDiscordToggle__label { + font-size: 14px; + line-height: 20px; + color: var(--notifi-font-color); + margin-bottom: 0px !important; +} +.NotifiEventTypeContainer { + padding: 0 20px; +} +.EventTypeLabelRow__container, +.EventTypeBroadcastRow__container, +.EventTypeDirectPushRow__container, +.EventTypeCustomHealthCheckRow__container, +.EventTypeHealthCheckRow__container, +.EventTypeCustomToggleRow__container, +.EventTypeWalletBalanceRow__container, +.EventTypePriceChangeRow__container, +.EventTypeFusionToggleRow__container, +.EventTypeXMTPRow__container, +.BrowserAlertToggle__container { + display: flex; + flex-direction: row; +} +.EventTypeBroadcastRow__label, +.EventTypePriceChangeRow__label, +.EventTypeDirectPushRow__label, +.EventTypeCustomToggleRow_label, +.EventTypeHealthCheckRow__label, +.EventTypeFusionToggleRow__label, +.EventTypeFusionMultiThresholdRow__label, +.EventTypeCustomHealthCheckRow__label, +.EventTypeCustomToggleRow__label, +.EventTypeWalletBalanceRow__label, +.EventTypeXMTPRow__label, +.BrowserAlertToggle__label { + display: flex; + flex-direction: row; + flex-grow: 1; + margin-right: 10px; + font-size: 12px; + font-weight: 400; + line-height: normal; + text-align: left; + letter-spacing: 0.24px; + color: var(--notifi-font-color); +} +.EventTypeFusionMultiThresholdRow__container, +.EventTypeFusionMultiThresholdRow__label, +.EventTypeHealthCheckRow__container, +.EventTypeHealthCheckRow__label { + margin-bottom: 0 !important; +} +.EventTypeFusionMultiThresholdRow__content, +.EventTypeHealthCheckRow__content { + font-size: 12px; + color: var(--notifi-secondary-font-color); + font-style: normal; + font-weight: 400; + line-height: 133.187%; /* 15.982px */ + letter-spacing: 0.12px; + opacity: 0.7; +} +.EventTypeLabelRow__label { + color: var(--notifi-secondary-font-color); + flex-grow: 1; + margin-right: 10px; + font-size: 14px; + line-height: 16px; + text-align: left; +} +.EventTypeUnsupportedRow__container { + display: none; +} +.NotifiCardButton__button, +.NotifiSubscribeButton__button { + background: linear-gradient(87deg, #73e6be 1.24%, #5fcff7 80.94%); + border: none; + cursor: pointer; + color: var(--notifi-button-text-color); + width: 100%; + display: block; + font-size: 14px; + line-height: normal; + height: 43px; + letter-spacing: 0.07px; + font-weight: 600; + padding: 12px 16px; + border-radius: 6px; + margin-top: 20px; +} +.NotifiCardButton__button:disabled, +.NotifiSubscribeButton__button:disabled, +.NotifiStartChatButton__button:disabled, +.NotifiIntercomSendMessageSection__button:disabled { + cursor: default; + background-color: var(--notifi-button-disabled-color); +} +.NotifiSmsInput__dropdownContainer { + position: relative; + margin-bottom: 0 !important; +} +.NotifiSmsInput__input { + padding-left: 10px; +} +.NotifiSmsInput__dropdownSelect { + height: 35px; + border-radius: 5px; + font-size: 16px; + color: var(--notifi-font-color); + background-color: var(--notifi-input-background); + display: flex; +} +.NotifiSmsInput__dropdownSelect:focus-visible { + outline: none; + box-shadow: 0px 0px 0px 1px var(--notifi-focus-color); +} +.NotifiSmsInput__dropdownSelected { + display: flex; + align-items: center; + color: var(--notifi-font-color); + background-color: var(--notifi-input-background); + margin-top: 0; + margin-bottom: 0 !important; + cursor: pointer; + flex: 1; +} +.NotifiSmsInput__dropdownSelectValue { + margin-top: 0; + margin-bottom: 0 !important; + padding: 10px 25px 10px 0; + height: auto; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.NotifiSmsInput__dropdownInput { + bottom: 0px; + left: 0px; + position: absolute; + opacity: 0; + pointer-events: none; + width: 100%; + margin-bottom: 0 !important; +} +.NotifiSmsInput__dropdownSelectIcon { + position: absolute; + top: 50%; + right: 10px; + width: 10px; + height: 5px; + transition: 0.2s ease; + z-index: 9999; + cursor: pointer; + fill: var(--notifi-button-disabled-color); +} +.NotifiSmsInput__dropdownOptionList { + position: absolute; + background-color: var(--notifi-card-background); + border-radius: 4px; + top: calc(100% + 10px); + left: 0; + right: 0; + padding-left: 0; + margin-bottom: 0; + margin-top: 0; + min-width: 300px; + height: 270px; + overflow-y: scroll; + z-index: 99; + box-shadow: rgb(0 0 0 / 20%) 0px 5px 5px -3px, rgb(0 0 0 / 14%) 0px 8px 10px 1px, + rgb(0 0 0 / 12%) 0px 3px 14px 2px; +} +.NotifiSmsInput__dropdownOptionList::-webkit-scrollbar { + width: 5px; +} +.NotifiSmsInput__dropdownOptionList::-webkit-scrollbar-thumb { + background-clip: padding-box; + border: 4px solid var(--notifi-input-border); + border-radius: 10px; +} +.NotifiSmsInput__dropdownOption { + padding: 10px 16px; + background-color: transparent; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0 !important; + transition: 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + cursor: pointer; +} +.NotifiSmsInput__dropdownOption-selected, +.NotifiSmsInput__dropdownOption:hover { + background-color: rgba(234, 126, 104, 0.08); + transition: 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; +} +.NotifiSmsInput__dropdownCountry { + display: flex; + flex-direction: row; + margin-bottom: 0 !important; + flex: 1 1 auto; +} +.NotifiSmsInput__dropdownFlag { + margin-right: 16px; + font-weight: 400; +} +.NotifiSmsInput__dropdownFlag, +.NotifiSmsInput__dropdownName { + margin-top: 0; + margin-bottom: 0 !important; +} +.NotifiInputSeparator__container { + display: flex; + align-items: center; + flex-direction: row; + overflow: hidden; + text-align: center; + justify-content: center; + font-size: 10px; + margin-top: 10px; +} +.NotifiInputSeparator__container:before, +.NotifiInputSeparator__container:after, +.NotifiPreviewCardSeparator:before, +.NotifiPreviewCardSeparator::after { + background-color: rgba(119, 126, 144, 0.1); + content: ''; + display: inline-block; + height: 1px; + position: relative; + vertical-align: middle; + width: 45%; +} +.NotifiPreviewCard__backArrowContainer { + height: 20px; + width: 20px; + cursor: pointer; +} +.NotifiIntercomInputSeparator__container { + margin: 10px 20px 10px 20px; + color: #80829d; + opacity: 45%; +} +.NotifiInputSeparator__content { + padding: 0px 8px 0px 8px; + color: var(--notifi-placeholder-color); +} +.NotifiUserInfoPanelContainer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding: 16px; + border-radius: 4px; + background-color: var(--notifi-card-secondary-background); + margin: 0px 20px; +} +.NotifiPreviewCard__editButton { + display: flex; + align-items: center; + width: 58px; + height: 16px; + padding: 8px 0px; + background-color: transparent; + font-weight: 500; + border: none; + font-size: 12px; + line-height: normal; + cursor: pointer; + color: var(--notifi-checkmark-color); +} +.NotifiPreviewCard__editButton svg { + display: none; +} +.NotifiUserInfoPanel__emailConfirmation, +.NotifiUserInfoPanel__telegramConfirmation { + flex-shrink: 0; + margin-left: 8px; +} +.ConnectWalletRow__verified { + display: block; + font-size: 14px; + color: var(--notifi-secondary-font-color); +} +.ConnectWalletRow__button, +.ConnectWalletRow__connectAnywayButton, +.NotifiUserInfoPanel__myWalletConfirmation, +.NotifiUserInfoPanel__emailConfirmationLabel, +.NotifiUserInfoPanel__telegramConfirmationLabel, +.DestinationErrorMessage__confirmationLinkLabel { + cursor: pointer; + font-size: 12px; + color: var(--notifi-checkmark-color); + font-weight: 500; + line-height: normal; + background-color: transparent; + border: 0; + box-shadow: 0; + outline: none; + word-wrap: nowrap; + white-space: nowrap; +} +.ConnectWalletRow__connectAnywayButton:disabled, +.ConnectWalletRow__button:disabled { + cursor: default; + color: var(--notifi-secondary-font-color); +} +.NotifiUserInfoPanel__myWallet, +.NotifiUserInfoPanel__email, +.NotifiUserInfoPanel__telegram, +.NotifiUserInfoPanel__sms, +.NotifiUserInfoPanel__discord { + width: 100%; + display: flex; + justify-content: space-between; + text-align: left; + align-items: baseline; +} +.NotifiUserInfoPanel__myWalletLabel, +.NotifiUserInfoPanel__emailLabel, +.NotifiUserInfoPanel__smsLabel, +.NotifiUserInfoPanel__smsLabel, +.NotifiUserInfoPanel__telegramLabel, +.NotifiUserInfoPanel__discordLabel { + margin-bottom: 0 !important; + font-size: 12px; + line-height: normal; + font-weight: 400; + color: var(--notifi-font-color); + margin-right: 20px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.NotifiTooltip__infoIcon { + margin-left: 10px; + margin-bottom: 0 !important; + fill: var(--notifi-placeholder-color); + width: 14px; + height: 14px; +} +.NotifiTooltip__body { + width: 180px; + visibility: hidden; + position: absolute; + left: -70px; + bottom: calc(100% + var(--notifi-tooltip-arrow-offset)); + font-size: 12px; + z-index: 1; +} +.NotifiTooltip__body::before { + content: ''; + display: block; + width: var(--notifi-tooltip-arrow-size); + height: var(--notifi-tooltip-arrow-size); + transform: translate(-50%) rotate(45deg); + background-color: var(--notifi-tooltip-background); + position: absolute; + top: calc(100% - var(--notifi-tooltip-arrow-offset)); + left: 50%; +} +.NotifiTooltip__container:hover > .NotifiTooltip__body { + visibility: visible; +} +.NotifiTooltip__container { + margin-bottom: 0 !important; + position: relative; + --notifi-tooltip-arrow-size: 10px; + --notifi-tooltip-arrow-offset: 7px; +} +.NotifiTooltip__label { + padding: 16px; + color: var(--notifi-font-color); + text-align: left; + background-color: var(--notifi-tooltip-background); + border: 1px solid #303036; + border-radius: 8px; + white-space: pre-line; + line-height: 15px; +} +.NotifiAlertHistory__settingsIcon { + position: absolute; + right: 0px; + height: 20px; +} +.NotifiAlertHistory__settingsIcon path { + fill: var(notifi-settings-icon-color); + cursor: pointer; +} +.NotifiAlertHistory__emptyAlertsBellIcon path { + fill: var(--notifi-button-color); + cursor: pointer; +} +.NotifiAlertHistory__noAlertContainer { + padding-top: 67px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.NotifiAlertDetails__container { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: stretch; + margin: 0px 20px; +} +.NotifiAlertDetails__topContentContainer { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + margin-top: 26px; +} +.NotifiAlertDetails__topContent { + text-align: start; + font-weight: 700; + font-size: 14px; + white-space: pre-wrap; + word-wrap: break-word; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} +.NotifiAlertDetails__bottomContent { + text-align: start; + font-size: 12px; + overflow-wrap: break-word; + white-space: pre-wrap; + word-wrap: break-word; +} +.NotifiAlertDetails__timestamp { + font-size: 12px; + text-align: right; + margin-top: 2px; +} +.NotifiAlertListContainer__container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.NotifiAlertListPreview__descriptionText { + font-size: 11px; + font-weight: 400; + padding-bottom: 8px; + text-align: center; + color: var(--notifi-secondary-font-color); + text-align: center; + opacity: 0.7; +} +.NotifiAlertListContainer__checkmarkIcon { + margin-bottom: 0px !important; + height: 24px; + width: 24px; +} +.NotifiAlertListContainer__checkmarkIcon path { + stroke: var(--notifi-checkmark-color); + stroke-width: 2px; +} +.NotifiAlertList__listItem { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 5px; +} +.NotifiAlertLisPreview__checkmarkContainer { + justify-content: center; +} +.NotifiAlertListContainer__listItemContent { + font-weight: 400; + font-size: 12px; + margin-left: 14px; +} +.NotifiStartChatButton__button { + height: 49px; + width: 266px; + background-color: var(--notifi-button-color); + border-radius: 16px; + font-weight: 400; + letter-spacing: 0.24px; + border: 0; + margin: 28px 48px 28px 48px; + cursor: pointer; +} +.NotifiStartChatButton__label { + color: #ffffff; + font-size: 16px; + font-weight: 700; + line-height: 19px; + text-align: center; +} +.NotifiIntercomCard__title { + margin-top: 35px; + font-size: 22px; + font-weight: 700; + line-height: 27px; + text-align: center; + color: var(--notifi-font-color); +} +.NotifiIntercomCard__subtitle1 { + margin-left: 20px; + margin-right: 20px; + color: var(--notifi-font-color); + font-size: 16px; + font-weight: 700; + line-height: 19px; + text-align: center; +} +.NotifiIntercomCard__subtitle2 { + margin-left: 20px; + margin-right: 20px; + font-size: 16px; + font-weight: 800; + line-height: 19px; + margin-top: 20px; + margin-bottom: 20px; + text-align: center; + color: var(--notifi-secondary-font-color); +} +.NotifiSupportNotificationOption__container { + margin: 50px 28px 10px 28px; +} +.NotifiIntercomEmailInput__container, +.NotifiIntercomSmsInput__container, +.NotifiIntercomTelegramInput__container { + background-color: var(--notifi-input-background); + border-radius: 6px; + margin: 20px; + margin-top: 10px; +} +.NotifiIntercomTelegramInput__container { + margin-bottom: 10px; +} +.NotifiIntercomEmailInput__container:focus-within, +.NotifiIntercomSmsInput__container:focus-within, +.NotifiIntercomTelegramInput__container:focus-within { + box-shadow: inset 0px 0px 0px 1px var(--notifi-focus-color); +} +.NotifiIntercomSmsInput__dropdownContainer { + background-color: var(--notifi-input-background); +} +.NotifiIntercomSmsInput__dropdownSelect { + background-color: var(--notifi-input-background); + border: 0; +} +.NotifiIntercomSmsInput__dropdownSelect:focus-visible { + box-shadow: none; +} +.BrowserAlertToggle__label { + font-size: 14px; + font-weight: 500; +} +.BrowserAlertToggle__container { + margin-top: 12px; +} +.NotifiIntercomHeader__container { + height: 49px; + border-bottom: 1px solid #e8ebf5; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + padding-left: 20px; + padding-right: 20px; +} +.NotifiIntercomHeader__content { + color: var(--notifi-font-color); + font-size: 14px; + font-weight: 600; + line-height: 17px; + text-align: left; + margin-left: 25px; +} +.NotifiIntercomHeader__leftContainer { + display: flex; + flex-direction: row; + align-items: center; +} +.NotifiIntercomHeader__leftContainer svg path { + stroke: var(--notifi-button-color); +} +.NotifiIntercomChatMessageSection__container { + display: flex; + flex-direction: column; + align-items: center; + height: 270px; + overflow-y: auto; +} +.NotifiIntercomChatMessageList__groupContainer { + display: flex; + flex-direction: row; +} +.ChatWindowIntro__virtualContainer { + height: 80px; + color: red; +} +.NotifiIntercomCard__container .virtual-container { + color: var(--notifi-font-color); +} +.NotifiIntercomChatMessageSectionIntro__content { + font-size: 16px; + font-weight: 600; + line-height: 20px; + margin-bottom: 12px; + color: var(--notifi-intro-color); +} +.NotifiIntercomChatMessageDate__container { + display: flex; + justify-content: center; +} +.NotifiIntercomChatMessageDate__body { + text-align: center; + display: inline-block; + width: 64px; + padding: 5px; + background: var(--notifi-incoming-message); + border-radius: 30px; + margin: 10px; +} +.NotifiIntercomChatMessageDate__content { + font-size: 10px; + font-weight: 800; + line-height: 12px; + color: var(--notifi-secondary-font-color); +} +.NotifiIntercomSendMessageSection__container { + display: flex; + flex-direction: column; + flex-shrink: 0; +} +.NotifiIntercomSendMessageSection__textarea { + resize: none; + font-family: inherit; + font-size: 16px; + height: 100px; + border-bottom: 1px solid var(--notifi-input-border); + border-top: 1px solid var(--notifi-input-border); + border-right: none; + border-left: none; + padding: 12px 20px; + background-color: transparent; + color: var(--notifi-font-color); +} +.NotifiIntercomSendMessageSection__textarea:focus-visible { + outline: none; +} +.NotifiIntercomSendMessageSection__button { + height: 28px; + width: 62px; + border-radius: 4px; + background-color: var(--notifi-button-color); + text-align: center; + border: none; + color: #ffffff; + margin-left: 20px; + margin-top: 15px; + margin-bottom: 15px; + cursor: pointer; +} +.NotifiIntercomChatIncomingMessageGroup__container { + display: flex; + flex-direction: column; + align-items: flex-start; +} +.NotifiIntercomChatOutgoingMessageGroup__container { + display: flex; + flex-direction: column; + align-items: flex-end; +} +.NotifiIntercomChatIncomingMessage__container { + display: flex; + flex-direction: row; +} +.NotifiIntercomChatIncomingMessage__body { + padding: 12px 20px 24px 20px; + max-width: 288px; + border-radius: 16px; + background: var(--notifi-incoming-message); + text-align: left; + margin: 0 16px 8px 12px; + position: relative; + overflow-wrap: break-word; + border-radius: 0 16px 16px 16px; + color: var(--notifi-font-color); +} +.NotifiIntercomChatOutgoingMessage__body { + padding: 12px 20px 24px 20px; + max-width: 250px; + border-radius: 16px; + background: var(--notifi-outgoing-message); + text-align: left; + margin: 0 16px 8px 12px; + position: relative; + overflow-wrap: break-word; + border-radius: 16px 0 16px 16px; + color: var(--notifi-font-color); +} +.NotifiIntercomChatOutgoingMessage__timeStamp { + position: absolute; + font-size: 10px; + font-weight: 600; + line-height: 12px; + color: var(--notifi-font-color); + min-width: 35px; + bottom: 7px; + right: 7px; +} +.NotifiIntercomChatOutgoingMessage__sender { + font-size: 16px; + font-weight: 600; + line-height: 20px; + text-align: left; + margin-bottom: 4px; +} +.NotifiIntercomChatWindow__settingIcon, +.NotifiIntercomSettingHeader__backArrow { + cursor: pointer; +} +.NotifiIntercomChatWindow__settingIcon svg path { + fill: #80829d; +} +.NotifiIntercomCardSettingContent__container { + padding: 20px 0 0 0; +} +.NotifiEmailVerification__button, +.NotifiTelegramVerification__button { + margin-left: 20px; + margin-right: 20px; + cursor: pointer; + font-size: 13px; + font-weight: 800; + line-height: 16px; + text-align: right; + color: var(--notifi-checkmark-color); +} +.NotifiIntercomChatMessage__avatar { + display: block; + border-radius: 20px; + background-color: #f5f6fb; + height: 34px; + margin-left: 16px; +} +.NotifiExpiredTokenCard__container { + display: flex; + flex-direction: column; + align-items: center; + flex: 1; + padding-top: 32px; +} +.NotifiExpiredTokenCard__title { + font-weight: 500; + font-size: 16px; +} +.NotifiExpiredTokenCard__subtitle { + font-size: 13px; + opacity: 0.5; + padding-bottom: 24px; +} +.NotifiExpiredTokenCard__button { + background-color: var(--notifi-button-color); + color: var(--notifi-button-text-color); + border-radius: 16px; + border: 0; + width: 243px; + height: 50px; + cursor: pointer; +} +.NotifiExpiredTokenCard__buttonLabel { + color: #ffffff; + font-size: 16px; + font-weight: 700; + text-align: center; +} +.EventTypeHealthCheckRow__button { + display: flex; + flex: 1; + justify-content: center; + align-items: center; + background-color: #24272e; + color: var(--notifi-font-color); + height: 47px; + overflow: auto; + border-radius: 8px; + opacity: 90%; + margin-right: 16px; + font-size: 14px; + font-weight: 500; + line-height: 20px; + border: 1px solid #24272e; + cursor: pointer; +} +.EventTypeHealthCheckRow__buttonSelected { + border: 1px solid var(--notifi-button-color); + color: var(--notifi-button-color); +} +.EventTypeHealthCheckRow__customButton { + text-align: center; + overflow: auto; +} +.EventTypeHealthCheckRow__customButton:focus { + border: 1px solid var(--notifi-button-color); +} + +.EventTypeHealthCheckRow__customButton:focus-visible { + outline: 1px solid var(--notifi-button-color) inset; +} +.EventTypeHealthCheckRow__buttonContainer { + display: flex; + flex-direction: row; + justify-content: flex-start; +} + +.EventTypeTradingPairsRow__container { + display: flex; + align-items: stretch; + flex-direction: column; +} +.EventTypeTradingPairsRow__container > * { + margin-bottom: 0 !important; +} +.EventTypeTradingPairsRow__container > *:not(:first-child) { + padding-top: 10px; +} +.EventTypeTradingPairsRow__container > *:not(:last-child) { + padding-bottom: 10px; + border-bottom: 1px var(--notifi-font-color) solid; +} +.EventTypeTradingPairsRow__addPair { + display: inline-block; + align-self: flex-start; + cursor: pointer; + padding: 0; + border: none; + background: none; + color: var(--notifi-link-color); + font-size: 16px; + line-height: 20px; +} +.EventTypeTradingPairsRow__addPair:disabled { + cursor: default; + color: var(--notifi-secondary-font-color); +} +.EventTypeTradingPairsRow__addPair::before { + content: '+ '; +} +.TradingPairSettingsRow__container { + display: flex; + align-items: stretch; + flex-direction: column; + padding: 10px 0; +} +.TradingPairSettingsRow__dropdownContainer { + background-color: var(--notifi-input-background); + display: flex; + align-items: center; + border: 1px var(--notifi-input-border) solid; + border-radius: 5px; +} +.TradingPairSettingsRow__dropdownContainer::after { + content: ''; + width: 1em; + height: 1em; + margin-right: 10px; + background-color: var(--notifi-font-color); + clip-path: polygon(90% 30%, 10% 30%, 50% 70%); +} +.TradingPairSettingsRow__dropdown { + box-sizing: border-box; + appearance: none; + background-color: transparent; + border: none; + padding: 10px 20px; + margin: 0; + width: 100%; + color: inherit; + cursor: inherit; + font-family: inherit; + font-size: inherit; + line-height: inherit; + outline: none; +} +.TradingPairSettingsRow__radioButton { + font-size: 14px; + line-height: 20px; + padding: 10px 30px; + margin-right: 10px; + margin-bottom: 0 !important; + border-radius: 5px; + border: none; + color: rgba(255, 255, 255, 0.7); + background-color: var(--notifi-tooltip-background); + cursor: pointer; +} +.TradingPairSettingsRow__radioSelected { + color: var(--notifi-button-text); + background-color: var(--notifi-button-color); +} +.TradingPairAlertRow__container { + display: flex; + flex-direction: row; + align-items: center; + padding: 10px 0; +} +.TradingPairAlertRow__textContainer { + display: flex; + flex-grow: 1; + flex-direction: column; + align-items: stretch; + margin-right: 10px; + margin-bottom: 0 !important; +} +.TradingPairAlertRow__name { + display: block; + font-size: 16px; + line-height: 20px; + color: var(--notifi-font-color); +} +.TradingPairAlertRow__description { + display: block; + font-size: 14px; + line-height: 18px; + color: var(--notifi-secondary-font-color); +} +.TradingPairAlertRow__deleteIcon { + width: 24px; + height: 24px; + flex-shrink: 0; + fill: var(--notifi-font-color); + cursor: pointer; +} +.TradingPairSettingsRow__priceInputContainer { + background-color: var(--notifi-input-background); + display: flex; + align-items: center; + border: 1px var(--notifi-input-border) solid; + border-radius: 5px; +} +.TradingPairSettingsRow__priceInput { + box-sizing: border-box; + appearance: none; + background-color: transparent; + border: none; + padding: 10px 20px; + margin: 0; + width: 100%; + color: inherit; + cursor: inherit; + font-family: inherit; + font-size: inherit; + line-height: inherit; + outline: none; +} +.TradingPairSettingsRow__saveButton { + font-size: 16px; + line-height: 20px; + padding: 5px 20px; + align-self: flex-start; + border-radius: 5px; + border: none; + color: var(--notifi-button-text); + background-color: var(--notifi-button-color); + cursor: pointer; +} +.TradingPairSettingsRow__saveButton:disabled { + cursor: default; + color: var(--notifi-secondary-font-color); + background-color: var(--notifi-button-disabled-color); +} +.EventTypeFusionMultiThresholdRow__container { + display: flex; + align-items: stretch; + flex-direction: column; +} + +.EventTypeFusionMultiThresholdRow__container > * { + margin-bottom: 0 !important; +} + +.EventTypeFusionMultiThresholdRow__container > *:not(:first-child) { + padding-top: 10px; +} +.EventTypeFusionMultiThresholdRow__container > :last-child { + padding-bottom: 10px; +} + +.EventTypeFusionMultiThresholdRow__container > *:not(:last-child):not(:first-child) { + padding-bottom: 10px; +} + +.EventTypeFusionMultiThresholdRow__addThreshold { + display: inline-block; + align-self: flex-start; + cursor: pointer; + padding: 0; + border: none; + background: none; + color: var(--notifi-link-color); + font-size: 12px; + line-height: 20px; +} + +.EventTypeFusionMultiThresholdRow__addThreshold:disabled { + display: none; +} + +.EventTypeFusionMultiThresholdRow__addThreshold::before { + content: '+ '; +} + +.FusionMultiThresholdSettingsRow__container { + display: flex; + align-items: stretch; + flex-direction: column; + padding: 10px 0; + padding-bottom: 20px !important; +} + +.FusionMultiThresholdSettingsRow__radioButton { + font-size: 14px; + font-weight: 500; + line-height: normal; + margin-right: 10px; + margin-bottom: 0 !important; + height: 47px; + width: 85px; + flex-shrink: 0; + border-radius: 5px; + border: none; + color: rgba(255, 255, 255, 0.7); + background-color: var(--notifi-card-secondary-background); + cursor: pointer; +} + +.FusionMultiThresholdSettingsRow__radioSelected { + color: #82f7c5; + border: 1px solid #82f7c5; +} + +.FusionMultiThresholdAlertRow__container { + display: flex; + flex-direction: row; + align-items: center; + padding: 10px 0; + border-bottom: 1px rgba(255, 255, 255, 0.2) solid; +} + +.FusionMultiThresholdAlertRow__textContainer { + display: flex; + flex-grow: 1; + flex-direction: column; + align-items: stretch; + margin-right: 10px; + margin-bottom: 0 !important; +} + +.FusionMultiThresholdAlertRow__name { + display: block; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; + color: var(--notifi-font-color); +} + +.FusionMultiThresholdAlertRow__description { + display: block; + font-size: 14px; + line-height: normal; + color: var(--notifi-secondary-font-color); +} + +.FusionMultiThresholdAlertRow__deleteIcon { + width: 24px; + height: 24px; + flex-shrink: 0; + fill: #80829d; + cursor: pointer; +} + +.FusionMultiThresholdSettingsRow__thresholdInputContainer { + background-color: var(--notifi-input-background); + display: flex; + align-items: center; + border: 1px var(--notifi-input-border) solid; + border-radius: 6px; + height: 47px; +} + +.FusionMultiThresholdSettingsRow__thresholdInput { + box-sizing: border-box; + appearance: none; + background-color: transparent; + border: none; + padding: 10px 20px; + margin: 0; + width: 100%; + color: inherit; + cursor: inherit; + font-family: inherit; + font-size: 14px; + line-height: normal; + outline: none; +} + +.FusionMultiThresholdSettingsRow__thresholdInputContainer::after { + margin-right: 10px; + content: '%'; + opacity: 0.7; +} + +.FusionMultiThresholdSettingsRow__saveButton { + visibility: hidden; +} +.FusionMultiThresholdSettingsRow__saveButton::after { + font-size: 14px; + font-weight: 600; + letter-spacing: 0.07px; + line-height: normal; + padding: 5px 20px; + align-self: flex-start; + border-radius: 6px; + border: none; + color: var(--notifi-button-text-color); + background-color: #5fcefa; + cursor: pointer; + height: 30px; + content: 'Add'; + visibility: visible; + display: block; + position: absolute; + margin-top: -25px; +} + +.FusionMultiThresholdSettingsRow__saveButton:disabled { + cursor: default; + color: var(--notifi-secondary-font-color); + background-color: var(--notifi-button-disabled-color); +} + +.NotifiAlertHistory__container { + display: flex; + flex-direction: column; + flex-grow: 1; + visibility: visible; + margin: 0px 20px; + border-radius: 12px; +} +.NotifiAlertHistory__container.NotifiAlertHistory__container--hidden { + visibility: hidden; +} +.NotifiAlertHistory__virtuoso { + overflow-x: hidden; +} +.notifiLogo-letters { + fill: var(--notifi-font-color); +} +.buttonDisabled { + pointer-events: none; +} +.NotifiSpinner { + display: inline-block; + width: 50px; + height: 50px; + border: 5px solid rgba(255, 255, 255, 0.3); + border-radius: 50%; + border-top-color: var(--notifi-font-color); + animation: spin 1s ease-in-out infinite; + -webkit-animation: spin 1s ease-in-out infinite; +} +@keyframes spin { + to { + -webkit-transform: rotate(360deg); + } +} +@-webkit-keyframes spin { + to { + -webkit-transform: rotate(360deg); + } +} +.NotifiLoadingStateCard__container { + margin-top: 90px; + display: flex; + flex: 1; + flex-direction: column; + align-items: center; + justify-content: flex-start; + gap: 20px; +} +.NotifiUserInfoPanel__emailConfirmationSent, +.DestinationError__emailConfirmationSent { + color: var(--notifi-confirmation-color); +} +.DestinationErrorMessage__ErrorMessageLabel { + font-size: 16px; + color: var(--notifi-button-disabled-color); + font-weight: 600; +} +.DestinationErrorMessage__ErrorMessageContainer { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} +.DestinationErrorMessage__ErrorMessageLabel { + margin-bottom: 0 !important; +} +.DestinationErrorMessage__tooltipIcon { + margin-left: 4px; + fill: var(--notifi-button-disabled-color); + height: 15px; + display: flex; + width: 15px; + margin-bottom: 4px; +} +.ErrorStateCard__errorMessage { + display: flex; + justify-content: center; + align-items: center; + position: relative; + top: -80px; + flex-grow: 1; + padding: 0 20px; +} +.NotifiInputContainer__LoadingSpinner { + display: flex; + justify-content: center; + align-items: center; + flex-grow: 1; +} +.SignupBanner { + display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--notifi-banner-background); +} +.SignupBanner__Column { + flex-direction: column; + padding: 14px 0 20px 0; + margin: 0px 20px; + border-radius: 4px; +} +.SignupBanner__Label { + display: flex; + justify-content: space-between; + padding: 10px 0 0 10px; +} +.SignupBanner__Image { + width: 24px; + height: 24px; + color: var(--notifi-banner-icon-color); + background-color: var(--notifi-settings-icon-color); + margin-right: 10px; + border-radius: 50px; + overflow: hidden; + border: 2px solid var(--notifi-checkmark-color); +} +.SignupBanner__Button { + width: 72px; + height: 29px; + border-radius: 4.04px; + margin-right: 10px; + cursor: pointer; + border: none; +} +/*# sourceMappingURL=index.css.map */ diff --git a/v2/components/Notifi/package.json b/v2/components/Notifi/package.json new file mode 100644 index 000000000..c230898b6 --- /dev/null +++ b/v2/components/Notifi/package.json @@ -0,0 +1,12 @@ +{ + "name": "@snx-v2/Notifi", + "private": true, + "main": "index.ts", + "version": "0.0.1", + "dependencies": { + "@notifi-network/notifi-react-card": "^0.86.0", + "@snx-v2/ContractContext": "workspace:*", + "@snx-v2/useSynthetixContracts": "workspace:*", + "react": "^18.2.0" + } +} diff --git a/v2/components/NotifiButton/NotifiButton.tsx b/v2/components/NotifiButton/NotifiButton.tsx new file mode 100644 index 000000000..1654d8c0d --- /dev/null +++ b/v2/components/NotifiButton/NotifiButton.tsx @@ -0,0 +1,46 @@ +import { lazy, Suspense } from 'react'; +import { Button, Popover, PopoverTrigger, PopoverContent, useDisclosure } from '@chakra-ui/react'; +import { NotificationsIcon } from '@snx-v2/icons'; +import { safeImport } from '@synthetixio/safe-import'; +import './notifibutton.css'; +import { useUnreadState } from '@notifi-network/notifi-react-card'; + +const NotifiCard = lazy(() => safeImport(() => import('@snx-v2/Notifi'))); + +export const NotifiButton: React.FC = () => { + const notifiModal = useDisclosure(); + const { hasUnreadNotification, unreadNotificationCount } = useUnreadState(); + + return ( + + + + + + + + + + + ); +}; diff --git a/v2/components/NotifiButton/NotifiContextWrapper.tsx b/v2/components/NotifiButton/NotifiContextWrapper.tsx new file mode 100644 index 000000000..34e1b2c0a --- /dev/null +++ b/v2/components/NotifiButton/NotifiContextWrapper.tsx @@ -0,0 +1,44 @@ +import { arrayify } from '@ethersproject/bytes'; +import { NotifiContext } from '@notifi-network/notifi-react-card'; +import React, { PropsWithChildren, useContext } from 'react'; +import { ContractContext } from '@snx-v2/ContractContext'; +import { SignerContext } from '@snx-v2/SignerContext'; +import { NetworkIdByName } from '@snx-v2/useSynthetixContracts'; + +const isTestnet = (networkId: null | number) => { + if (networkId === NetworkIdByName['mainnet-ovm'] || networkId === NetworkIdByName['mainnet']) { + return false; + } + return true; +}; + +export const NotifiContextWrapper: React.FC> = ({ + children, +}: PropsWithChildren<{}>) => { + const { networkId, walletAddress } = useContext(ContractContext); + const signer = useContext(SignerContext); + if (signer === null || walletAddress === null || networkId === null) { + // account is required + return null; + } + const isL2 = networkId === NetworkIdByName['mainnet-ovm']; + const isMainnet = !isTestnet(networkId); + const walletBlockchain = isL2 ? 'OPTIMISM' : 'ETHEREUM'; + + const env = isMainnet ? 'Production' : 'Development'; + + return ( + { + const result = await signer.signMessage(message); + return arrayify(result); + }} + walletPublicKey={walletAddress} + walletBlockchain={walletBlockchain} + > + {children} + + ); +}; diff --git a/v2/components/NotifiButton/index.ts b/v2/components/NotifiButton/index.ts new file mode 100644 index 000000000..aa3390d9d --- /dev/null +++ b/v2/components/NotifiButton/index.ts @@ -0,0 +1,2 @@ +export * from './NotifiButton'; +export * from './NotifiContextWrapper'; diff --git a/v2/components/NotifiButton/notifibutton.css b/v2/components/NotifiButton/notifibutton.css new file mode 100644 index 000000000..ba3ff0f20 --- /dev/null +++ b/v2/components/NotifiButton/notifibutton.css @@ -0,0 +1,17 @@ +.notifi-unread-counter { + position: absolute; + top: 0.2rem; + bottom: 0; + left: 1.2rem; + right: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.7rem; + color: #000; + text-align: center; + width: 1.05rem; + height: 1.05rem; + background-color: #82f7c5; + border-radius: 50px; +} diff --git a/v2/components/NotifiButton/package.json b/v2/components/NotifiButton/package.json new file mode 100644 index 000000000..d9a0cd554 --- /dev/null +++ b/v2/components/NotifiButton/package.json @@ -0,0 +1,18 @@ +{ + "name": "@snx-v2/NotifiButton", + "private": true, + "main": "index.ts", + "version": "0.0.1", + "dependencies": { + "@chakra-ui/react": "^2.5.0", + "@ethersproject/bytes": "^5.7.0", + "@notifi-network/notifi-react-card": "^0.86.0", + "@snx-v2/ContractContext": "workspace:*", + "@snx-v2/Notifi": "workspace:*", + "@snx-v2/SignerContext": "workspace:*", + "@snx-v2/icons": "workspace:*", + "@snx-v2/useSynthetixContracts": "workspace:*", + "@synthetixio/safe-import": "workspace:*", + "react": "^18.2.0" + } +} diff --git a/v2/ui/package.json b/v2/ui/package.json index 9ddcc9729..378a0c293 100644 --- a/v2/ui/package.json +++ b/v2/ui/package.json @@ -3,7 +3,7 @@ "private": true, "version": "2.45.15", "engines": { - "node": "16.x" + "node": "18.x" }, "scripts": { "start": "webpack-cli serve", diff --git a/yarn.lock b/yarn.lock index f23c494dd..4ff876c05 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5473,6 +5473,88 @@ __metadata: languageName: node linkType: hard +"@notifi-network/notifi-axios-adapter@npm:^0.86.0": + version: 0.86.0 + resolution: "@notifi-network/notifi-axios-adapter@npm:0.86.0" + dependencies: + "@notifi-network/notifi-axios-utils": ^0.86.0 + peerDependencies: + axios: ^0.26.0 + checksum: 59115912e1667bf899c2b000615fb5310b2c15250b33928ee7e9cda37c909e784a54e419fbdbc6ac0930535b95b01e980bc3d471b089cf2939eb66be282cc765 + languageName: node + linkType: hard + +"@notifi-network/notifi-axios-utils@npm:^0.86.0": + version: 0.86.0 + resolution: "@notifi-network/notifi-axios-utils@npm:0.86.0" + peerDependencies: + axios: ^0.26.1 + checksum: a510d0bb1447d798f9f61290cd9fde03e8c703c037a3646074bf6865782db08a999eab86e80a73355ba72b379a2fa7b81cb4118baa097cf8e2565b2ad7435a32 + languageName: node + linkType: hard + +"@notifi-network/notifi-core@npm:^0.86.0": + version: 0.86.0 + resolution: "@notifi-network/notifi-core@npm:0.86.0" + dependencies: + "@notifi-network/notifi-graphql": ^0.86.0 + checksum: 55263fc6424c3163a2193e0575cd5cb0972e553333a20ac69794c5eca475ab07ba44a949dd4271c3a936d3088f963ec57ed43a105e3e9e83ba223afc3276bb97 + languageName: node + linkType: hard + +"@notifi-network/notifi-frontend-client@npm:^0.86.0": + version: 0.86.0 + resolution: "@notifi-network/notifi-frontend-client@npm:0.86.0" + dependencies: + "@notifi-network/notifi-graphql": ^0.86.0 + graphql-request: 5.1.0 + localforage: ^1.10.0 + checksum: 3b2943444eab1ad8086efe080f94bff1d65af93745ea4d774bcfe681a4669eb1fa73d807b9698bc8683969250b81aa6214b009bab504a688871de7f04be98047 + languageName: node + linkType: hard + +"@notifi-network/notifi-graphql@npm:^0.86.0": + version: 0.86.0 + resolution: "@notifi-network/notifi-graphql@npm:0.86.0" + dependencies: + graphql: ^16.6.0 + graphql-request: 5.1.0 + uuid: ^8.3.2 + checksum: c312a29b928e9cf6094cf01b04047265854217352246e52d15e7f5aefcfc86e6f597a2ab7908adefa8875ededf702faa41b138b9c02609bd54a55defa204ffb6 + languageName: node + linkType: hard + +"@notifi-network/notifi-react-card@npm:^0.86.0": + version: 0.86.0 + resolution: "@notifi-network/notifi-react-card@npm:0.86.0" + dependencies: + "@notifi-network/notifi-frontend-client": ^0.86.0 + "@notifi-network/notifi-react-hooks": ^0.86.0 + clsx: ^1.2.1 + date-fns: ^2.29.3 + libphonenumber-js: ^1.10.13 + react-virtuoso: ^3.1.1 + checksum: 996138e5138ce6a0d4bb67f84b2ffc42300686542d407adf10b4a886b8f38ebfad09b519057abe29a70a30f629433ece6ab253bfe555f6e71e87f05438b140d8 + languageName: node + linkType: hard + +"@notifi-network/notifi-react-hooks@npm:^0.86.0": + version: 0.86.0 + resolution: "@notifi-network/notifi-react-hooks@npm:0.86.0" + dependencies: + "@notifi-network/notifi-axios-adapter": ^0.86.0 + "@notifi-network/notifi-axios-utils": ^0.86.0 + "@notifi-network/notifi-core": ^0.86.0 + axios: ^0.26.0 + localforage: ^1.10.0 + typescript: ^4.5.5 + peerDependencies: + react: ^17.0.2 || ^18.0 + react-dom: ^17.0.2 || ^18.0 + checksum: c0aae8315ef9920ba91e19b9baf8e1d82d9c8fa1ffbb0505540f5fb268be64b57abc3a727fecb5a6a545dc0fa49f183a8db86b29886c4bca59b40090d3d19c36 + languageName: node + linkType: hard + "@npmcli/fs@npm:^1.0.0": version: 1.1.1 resolution: "@npmcli/fs@npm:1.1.1" @@ -6320,6 +6402,7 @@ __metadata: "@snx-v2/Constants": "workspace:*" "@snx-v2/ContractContext": "workspace:*" "@snx-v2/EpochPrice": "workspace:^" + "@snx-v2/NotifiButton": "workspace:*" "@snx-v2/UserBalances": "workspace:*" "@snx-v2/WalletModal": "workspace:*" "@snx-v2/formatters": "workspace:*" @@ -6338,6 +6421,34 @@ __metadata: languageName: unknown linkType: soft +"@snx-v2/Notifi@workspace:*, @snx-v2/Notifi@workspace:v2/components/Notifi": + version: 0.0.0-use.local + resolution: "@snx-v2/Notifi@workspace:v2/components/Notifi" + dependencies: + "@notifi-network/notifi-react-card": ^0.86.0 + "@snx-v2/ContractContext": "workspace:*" + "@snx-v2/useSynthetixContracts": "workspace:*" + react: ^18.2.0 + languageName: unknown + linkType: soft + +"@snx-v2/NotifiButton@workspace:*, @snx-v2/NotifiButton@workspace:v2/components/NotifiButton": + version: 0.0.0-use.local + resolution: "@snx-v2/NotifiButton@workspace:v2/components/NotifiButton" + dependencies: + "@chakra-ui/react": ^2.5.0 + "@ethersproject/bytes": ^5.7.0 + "@notifi-network/notifi-react-card": ^0.86.0 + "@snx-v2/ContractContext": "workspace:*" + "@snx-v2/Notifi": "workspace:*" + "@snx-v2/SignerContext": "workspace:*" + "@snx-v2/icons": "workspace:*" + "@snx-v2/useSynthetixContracts": "workspace:*" + "@synthetixio/safe-import": "workspace:*" + react: ^18.2.0 + languageName: unknown + linkType: soft + "@snx-v2/RewardsItem@workspace:^, @snx-v2/RewardsItem@workspace:v2/components/RewardsItem": version: 0.0.0-use.local resolution: "@snx-v2/RewardsItem@workspace:v2/components/RewardsItem" @@ -10789,6 +10900,24 @@ __metadata: languageName: node linkType: hard +"@virtuoso.dev/react-urx@npm:^0.2.12": + version: 0.2.13 + resolution: "@virtuoso.dev/react-urx@npm:0.2.13" + dependencies: + "@virtuoso.dev/urx": ^0.2.13 + peerDependencies: + react: ">=16" + checksum: 173e91c21f6a8cd506ad3b72af10656897fe1951124ed9eeb1fd85575534993bea2f97cba3f81c08ae1e88a2613df348e2c80d0ceecb3021f8c8c8fe0e053ee2 + languageName: node + linkType: hard + +"@virtuoso.dev/urx@npm:^0.2.12, @virtuoso.dev/urx@npm:^0.2.13": + version: 0.2.13 + resolution: "@virtuoso.dev/urx@npm:0.2.13" + checksum: 682a99cf40ccc429241268dd37495cd1ed4695ae58b5a1169c75df1630d5dc3fd8eb3aaa655f71c37f39ba9c23c0aaf4401b76d8a986986d1a38a422d596a6ba + languageName: node + linkType: hard + "@vue/compiler-core@npm:3.2.36": version: 3.2.36 resolution: "@vue/compiler-core@npm:3.2.36" @@ -12989,7 +13118,7 @@ __metadata: languageName: node linkType: hard -"axios@npm:^0.26.1": +"axios@npm:^0.26.0, axios@npm:^0.26.1": version: 0.26.1 resolution: "axios@npm:0.26.1" dependencies: @@ -14799,7 +14928,7 @@ __metadata: languageName: node linkType: hard -"clsx@npm:^1.0.4, clsx@npm:^1.1.0": +"clsx@npm:^1.0.4, clsx@npm:^1.1.0, clsx@npm:^1.2.1": version: 1.2.1 resolution: "clsx@npm:1.2.1" checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12 @@ -19437,7 +19566,7 @@ __metadata: languageName: node linkType: hard -"graphql-request@npm:^5.0.0, graphql-request@npm:^5.1.0": +"graphql-request@npm:5.1.0, graphql-request@npm:^5.0.0, graphql-request@npm:^5.1.0": version: 5.1.0 resolution: "graphql-request@npm:5.1.0" dependencies: @@ -20251,6 +20380,13 @@ __metadata: languageName: node linkType: hard +"immediate@npm:~3.0.5": + version: 3.0.6 + resolution: "immediate@npm:3.0.6" + checksum: f9b3486477555997657f70318cc8d3416159f208bec4cca3ff3442fd266bc23f50f0c9bd8547e1371a6b5e82b821ec9a7044a4f7b944798b25aa3cc6d5e63e62 + languageName: node + linkType: hard + "immer@npm:^9.0.7": version: 9.0.15 resolution: "immer@npm:9.0.15" @@ -23025,6 +23161,22 @@ __metadata: languageName: node linkType: hard +"libphonenumber-js@npm:^1.10.13": + version: 1.10.44 + resolution: "libphonenumber-js@npm:1.10.44" + checksum: ada1bc135ce4b77eaa859a2c39d5b64cf142a76d203cb52f8f0e3097c30acba8a8faa4c6d975968333216d48448c589eb640b829ae5e95de706415684791cad9 + languageName: node + linkType: hard + +"lie@npm:3.1.1": + version: 3.1.1 + resolution: "lie@npm:3.1.1" + dependencies: + immediate: ~3.0.5 + checksum: 6da9f2121d2dbd15f1eca44c0c7e211e66a99c7b326ec8312645f3648935bc3a658cf0e9fa7b5f10144d9e2641500b4f55bd32754607c3de945b5f443e50ddd1 + languageName: node + linkType: hard + "lilconfig@npm:2.0.6": version: 2.0.6 resolution: "lilconfig@npm:2.0.6" @@ -23205,6 +23357,15 @@ __metadata: languageName: node linkType: hard +"localforage@npm:^1.10.0": + version: 1.10.0 + resolution: "localforage@npm:1.10.0" + dependencies: + lie: 3.1.1 + checksum: f2978b434dafff9bcb0d9498de57d97eba165402419939c944412e179cab1854782830b5ec196212560b22712d1dd03918939f59cf1d4fc1d756fca7950086cf + languageName: node + linkType: hard + "locate-path@npm:^3.0.0": version: 3.0.0 resolution: "locate-path@npm:3.0.0" @@ -27567,6 +27728,19 @@ __metadata: languageName: node linkType: hard +"react-virtuoso@npm:^3.1.1": + version: 3.1.5 + resolution: "react-virtuoso@npm:3.1.5" + dependencies: + "@virtuoso.dev/react-urx": ^0.2.12 + "@virtuoso.dev/urx": ^0.2.12 + peerDependencies: + react: ">=16 || >=17 || >= 18" + react-dom: ">=16 || >=17 || >= 18" + checksum: c6dd6921e73ec1f88ae99c0eb002df24cdd73eb9154d71be43ea957b613ca9e976d6b0625b78f25a4dafc415ac680c6de576466847887d1da57bb3313cce7ec8 + languageName: node + linkType: hard + "react@npm:^18.2.0": version: 18.2.0 resolution: "react@npm:18.2.0" @@ -31167,7 +31341,7 @@ __metadata: languageName: node linkType: hard -"typescript@npm:^4.9.5": +"typescript@npm:^4.5.5, typescript@npm:^4.9.5": version: 4.9.5 resolution: "typescript@npm:4.9.5" bin: @@ -31177,7 +31351,7 @@ __metadata: languageName: node linkType: hard -"typescript@patch:typescript@^4.9.5#~builtin": +"typescript@patch:typescript@^4.5.5#~builtin, typescript@patch:typescript@^4.9.5#~builtin": version: 4.9.5 resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin::version=4.9.5&hash=23ec76" bin: