From 5a73a8fa047493de3e19f76398a41b3d79b0f7b5 Mon Sep 17 00:00:00 2001 From: Danny Cho Date: Wed, 9 Aug 2023 15:05:29 +1200 Subject: [PATCH 1/4] feat: update on transfer wizard banner style and context --- .../src/components/common/MigrationBanner.js | 92 +++++++++++++------ .../frontend/src/components/svg/CloseIcon.js | 12 +++ .../frontend/src/components/wallet/Wallet.js | 5 +- .../frontend/src/translations/en.global.json | 6 +- 4 files changed, 79 insertions(+), 36 deletions(-) create mode 100644 packages/frontend/src/components/svg/CloseIcon.js diff --git a/packages/frontend/src/components/common/MigrationBanner.js b/packages/frontend/src/components/common/MigrationBanner.js index 8582dc0aa1..9446c4980a 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,10 @@ const ContentWrapper = styled(Container)` display: flex; align-items: flex-start; flex-wrap: none; - color: #CD2B31; + color: #AD5700; > div > span > a { - color: #CD2B31; + color: #AD5700; text-decoration: underline; } @@ -92,8 +86,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 +101,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 EXPIRARY_DATE = 604800000; // 7 days in milliseconds + useEffect(() => { + if (!migrationBannerCloseTime || (Date.now() - migrationBannerCloseTime) > EXPIRARY_DATE) { + setShowBanner(true); + localStorage.removeItem('migrationBannerCloseTime'); + } else { + setShowBanner(false); + } + }, []); + const availableAccounts = useSelector(selectAvailableAccounts); const availableAccountsIsLoading = useSelector(selectAvailableAccountsIsLoading); @@ -124,19 +145,29 @@ 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 ? @@ -153,8 +184,8 @@ const MigrationBanner = ({ account, onTransfer }) => { { availableAccounts.length - ? - : + ? + : } { @@ -163,6 +194,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/translations/en.global.json b/packages/frontend/src/translations/en.global.json index 9ab492e8af..9d606c6a5f 100644 --- a/packages/frontend/src/translations/en.global.json +++ b/packages/frontend/src/translations/en.global.json @@ -791,9 +791,9 @@ } }, "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", + "readMore": "", + "redirect": "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" }, From b9ce911e65ac5099e93492277e0199082eba219a Mon Sep 17 00:00:00 2001 From: Danny Cho Date: Wed, 9 Aug 2023 15:06:02 +1200 Subject: [PATCH 2/4] chore: add sender wallet details on transfer wizard static page --- packages/frontend/src/routes/TransferWizardWrapper.js | 11 +++++++++++ 1 file changed, 11 insertions(+) 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?

From 668753292bc99e02f22538059e4ff7a8f5b7a344 Mon Sep 17 00:00:00 2001 From: Danny Cho Date: Wed, 9 Aug 2023 19:32:50 +1200 Subject: [PATCH 3/4] feat: update new translation on transfer wizard with RU and KR languages --- .../frontend/src/components/common/MigrationBanner.js | 11 ++--------- packages/frontend/src/translations/en.global.json | 2 -- packages/frontend/src/translations/kr.global.json | 3 +-- packages/frontend/src/translations/ru.global.json | 4 +--- 4 files changed, 4 insertions(+), 16 deletions(-) diff --git a/packages/frontend/src/components/common/MigrationBanner.js b/packages/frontend/src/components/common/MigrationBanner.js index 9446c4980a..69a9bb5d66 100644 --- a/packages/frontend/src/components/common/MigrationBanner.js +++ b/packages/frontend/src/components/common/MigrationBanner.js @@ -74,6 +74,7 @@ const ContentWrapper = styled(Container)` flex-wrap: none; color: #AD5700; + > div > span > span > a, > div > span > a { color: #AD5700; text-decoration: underline; @@ -168,15 +169,7 @@ const MigrationBanner = ({ account, onTransfer }) => {
- { - availableAccounts.length - ? - : - } -
-
- {availableAccounts.length > 0 && } - +
diff --git a/packages/frontend/src/translations/en.global.json b/packages/frontend/src/translations/en.global.json index 9d606c6a5f..20fe888f24 100644 --- a/packages/frontend/src/translations/en.global.json +++ b/packages/frontend/src/translations/en.global.json @@ -792,8 +792,6 @@ }, "migration": { "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", - "readMore": "", - "redirect": "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" }, From 7bbb78743375cd3116dc2097574d5692e4d16dc4 Mon Sep 17 00:00:00 2001 From: Danny Cho Date: Thu, 10 Aug 2023 10:21:21 +1200 Subject: [PATCH 4/4] fix: syntax improvements --- packages/frontend/src/components/common/MigrationBanner.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/components/common/MigrationBanner.js b/packages/frontend/src/components/common/MigrationBanner.js index 69a9bb5d66..a0a334e25e 100644 --- a/packages/frontend/src/components/common/MigrationBanner.js +++ b/packages/frontend/src/components/common/MigrationBanner.js @@ -122,9 +122,9 @@ const CloseButton = styled.button` const MigrationBanner = ({ account, onTransfer }) => { const migrationBannerCloseTime = localStorage.getItem('migrationBannerCloseTime'); const [showBanner, setShowBanner] = useState(true); - const EXPIRARY_DATE = 604800000; // 7 days in milliseconds + const EXPIRY_DATE = 604800000; // 7 days in milliseconds useEffect(() => { - if (!migrationBannerCloseTime || (Date.now() - migrationBannerCloseTime) > EXPIRARY_DATE) { + if (!migrationBannerCloseTime || (Date.now() - migrationBannerCloseTime) > EXPIRY_DATE) { setShowBanner(true); localStorage.removeItem('migrationBannerCloseTime'); } else {