diff --git a/packages/frontend/src/components/common/MigrationBanner.js b/packages/frontend/src/components/common/MigrationBanner.js index 8582dc0aa1..a0a334e25e 100644 --- a/packages/frontend/src/components/common/MigrationBanner.js +++ b/packages/frontend/src/components/common/MigrationBanner.js @@ -1,4 +1,4 @@ -import React, {useCallback} from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; import { Translate } from 'react-localize-redux'; import {useSelector} from 'react-redux'; import styled from 'styled-components'; @@ -7,37 +7,22 @@ import IconOffload from '../../images/IconOffload'; import { selectAvailableAccounts, selectAvailableAccountsIsLoading } from '../../redux/slices/availableAccounts'; import { getNearOrgWalletUrl } from '../../utils/getWalletURL'; import AlertTriangleIcon from '../svg/AlertTriangleIcon'; +import CloseSvg from '../svg/CloseIcon'; import InfoIcon from '../svg/InfoIcon'; import FormButton from './FormButton'; import Container from './styled/Container.css'; const StyledContainer = styled.div` - border: 2px solid #DC1F26; - border-radius: 16px; - background-color: #FFFCFC; + background-color: #FFF4D5; display: flex; align-items: flex-start; flex-direction: row; - padding: 25px; - margin: 25px auto; - line-height: 1.5; - - @media (min-width: 768px) { - width: 720px; - } - - @media (min-width: 992px) { - width: 920px; - } - - @media (min-width: 1200px) { - width: 1000px; - } + padding: 15px 0; + margin-top: -15px; + align-items: center; .alert-container { - background-color: #FFEFEF; - border-radius: 50%; padding: 9px; margin-right: 16px; display: flex; @@ -51,6 +36,15 @@ const StyledContainer = styled.div` } } + + .message-container { + display: flex; + align-items: center; + justify-content: center; + flex: 1; + height: 100%; + line-height: 1.5; + } `; const ContentWrapper = styled(Container)` @@ -78,10 +72,11 @@ const ContentWrapper = styled(Container)` display: flex; align-items: flex-start; flex-wrap: none; - color: #CD2B31; + color: #AD5700; + > div > span > span > a, > div > span > a { - color: #CD2B31; + color: #AD5700; text-decoration: underline; } @@ -92,8 +87,8 @@ const ContentWrapper = styled(Container)` `; const CustomButton = styled(FormButton)` - color: #FEF2F2 !important; - background: #FC5B5B !important; + color: #AD5700 !important; + background: #FFE3A2 !important; border: none !important; white-space: nowrap; padding: 9.5px 16px; @@ -107,9 +102,36 @@ const CustomButton = styled(FormButton)` const IconWrapper = styled.div` display: inline; margin-right: 10px; + margin-left: -10px; +`; + +const CloseButton = styled.button` + height: 25px; + width: 25px; + border: none; + margin-left: 30px; + cursor: pointer; + background-color: transparent; + padding: 0; + + @media (max-width: 768px) { + margin: 15px auto 0; + } `; const MigrationBanner = ({ account, onTransfer }) => { + const migrationBannerCloseTime = localStorage.getItem('migrationBannerCloseTime'); + const [showBanner, setShowBanner] = useState(true); + const EXPIRY_DATE = 604800000; // 7 days in milliseconds + useEffect(() => { + if (!migrationBannerCloseTime || (Date.now() - migrationBannerCloseTime) > EXPIRY_DATE) { + setShowBanner(true); + localStorage.removeItem('migrationBannerCloseTime'); + } else { + setShowBanner(false); + } + }, []); + const availableAccounts = useSelector(selectAvailableAccounts); const availableAccountsIsLoading = useSelector(selectAvailableAccountsIsLoading); @@ -124,28 +146,30 @@ const MigrationBanner = ({ account, onTransfer }) => { window.open('/transfer-wizard', '_blank'); }, [availableAccounts]); + // If banner is closed and still not past expirary date, don't show the banner + if (!showBanner) { + return null; + } + // If accounts area loading, don't show the banner if (availableAccountsIsLoading) { return null; } + const hideBanner = () => { + setShowBanner(false); + localStorage.setItem('migrationBannerCloseTime', Date.now()); + }; + return (
- +
-
- { - availableAccounts.length - ? - : - } -
-
- {availableAccounts.length > 0 && } - +
+
@@ -153,8 +177,8 @@ const MigrationBanner = ({ account, onTransfer }) => { { availableAccounts.length - ? - : + ? + : } { @@ -163,6 +187,9 @@ const MigrationBanner = ({ account, onTransfer }) => { : } + + + ); diff --git a/packages/frontend/src/components/svg/CloseIcon.js b/packages/frontend/src/components/svg/CloseIcon.js new file mode 100644 index 0000000000..d4c76799f6 --- /dev/null +++ b/packages/frontend/src/components/svg/CloseIcon.js @@ -0,0 +1,12 @@ +import React from 'react'; + +const CloseIcon = ({ color, className }) => { + const stroke = color || '#ccc'; + return ( + + ); +}; + +export default CloseIcon; + + diff --git a/packages/frontend/src/components/wallet/Wallet.js b/packages/frontend/src/components/wallet/Wallet.js index 57dcb66e2e..b450617980 100644 --- a/packages/frontend/src/components/wallet/Wallet.js +++ b/packages/frontend/src/components/wallet/Wallet.js @@ -34,10 +34,7 @@ import { ZeroBalanceAccountImportedModal } from './ZeroBalanceAccountImportedMod const StyledContainer = styled(Container)` @media (max-width: 991px) { - margin: -5px auto 0 auto; - &.showing-banner { - margin-top: -15px; - } + margin-top: 0px; } .coingecko { diff --git a/packages/frontend/src/routes/TransferWizardWrapper.js b/packages/frontend/src/routes/TransferWizardWrapper.js index 5b07721a30..41342ba90d 100644 --- a/packages/frontend/src/routes/TransferWizardWrapper.js +++ b/packages/frontend/src/routes/TransferWizardWrapper.js @@ -125,6 +125,17 @@ export const TransferWizardWrapper = () => {

A multi-chain extension wallet that gives you control over all your assets from a single platform.

+ + +

Sender Wallet

+ + +

https://senderwallet.io/

+ + +

Security-audited mobile & extension wallet with 1M+ users, supporting NEAR & Aurora. Sender is backed by Pantera, Binance and MetaWeb.

+ +

How does the Wizard Work?

diff --git a/packages/frontend/src/translations/en.global.json b/packages/frontend/src/translations/en.global.json index 9ab492e8af..20fe888f24 100644 --- a/packages/frontend/src/translations/en.global.json +++ b/packages/frontend/src/translations/en.global.json @@ -791,9 +791,7 @@ } }, "migration": { - "message": "Soon NEAR wallet (${walletUrl}) will no longer be supported. Transfer your accounts to a different wallet or export your private keys from account settings.", - "readMore": "Please see the official announcement and transfer wizard document for more details.", - "redirect": "Soon NEAR wallet (${walletUrl}) will no longer be supported. Use your 12-word recovery phrase to import your account(s) to a different wallet or recover and export your account(s).", + "message": "The NEAR Wallet will no longer be available after October 31st, 2023. Migrate accounts with your recovery phrase or the Transfer Wizard to ensure uninterrupted account access. Learn More", "redirectCaption": "Learn More", "transferCaption": "Transfer My Accounts" }, diff --git a/packages/frontend/src/translations/kr.global.json b/packages/frontend/src/translations/kr.global.json index 6449023212..3889b14440 100644 --- a/packages/frontend/src/translations/kr.global.json +++ b/packages/frontend/src/translations/kr.global.json @@ -790,8 +790,7 @@ } }, "migration": { - "message": "곧 NEAR 지갑(wallet.near.org)은 더 이상 지원되지 않습니다. 계정을 다른 지갑에 전송하거나 계정 설정에서 개인 키를 내보내십시오.", - "redirect": "곧 NEAR 지갑(wallet.near.org)은 더 이상 지원되지 않습니다. 12-단어 복구 구문을 사용해서 계정을 다른 지갑에 보내거나 계정을 복구하여 내보내십시오.", + "message": "NEAR Wallet은 2023년 10월 31일 이후에는 더 이상 사용하실 수 없습니다. 복구 단어(Passphrase)들을 사용하여 계정을 다른 지갑에서 등록 하시거나계정 이전 도우미를 사용하여 계정을 이전 후 다른 지갑에서 계속 사용 하실수 있습니다. 자세히 알아보기", "redirectCaption": "더 알아보기", "transferCaption": "계정 전송" }, diff --git a/packages/frontend/src/translations/ru.global.json b/packages/frontend/src/translations/ru.global.json index d230edf2d6..aa429bdfa9 100644 --- a/packages/frontend/src/translations/ru.global.json +++ b/packages/frontend/src/translations/ru.global.json @@ -551,9 +551,7 @@ } }, "migration": { - "message": "Скоро кошелек NEAR (${walletUrl}) перестанет поддерживаться. Перенесите свои аккаунты на другой кошелек или экспортируйте свои приватные ключи из настроек аккаунта.", - "readMore": "Пожалуйста, ознакомьтесь с официальным объявлением и инструкциями по переносу для получения более подробной информации.", - "redirect": "Скоро кошелек NEAR (${walletUrl}) перестанет поддерживаться. Используйте фразу восстановления из 12 слов для импортирования своего аккаунта на другой кошелек или для восстановления и экспортирования своего аккаунта.", + "message": "Кошелёк NEAR будет недоступен с 31го октября 2023. Перенесите свои аккаунты с помощью фразы восстановления из 12 слов или инструкции по переносу для дальнейшего использования своего аккаунта. Узнать больше", "transferCaption": "Перенести Мои Аккаунты", "redirectCaption": "Перейти на MyNearWallet" },