Merge pull request #3095 from near/transfer-wizard-updates

Transfer wizard updates
near · Aug 9, 2023 · c4ffd80 · c4ffd80
2 parents 831af0b + 7bbb787
commit c4ffd80
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 50 deletions.
diff --git 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,37 +146,39 @@ 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 (
         <StyledContainer id='migration-banner'>
             <ContentWrapper>
                 <div className='content'>
                     <div className='alert-container'>
-                        <AlertTriangleIcon color={'#E5484D'} />
+                        <AlertTriangleIcon color={'#FFA01C'} />
                     </div>
-                    <div>
-                        {
-                            availableAccounts.length
-                                ? <Translate id='migration.message' data={{ walletUrl }}/>
-                                : <Translate id='migration.redirect' data={{ walletUrl }}/>
-                        }
-                        <br />
-                        <br />
-                        {availableAccounts.length > 0 && <Translate id='migration.readMore' />}
-
+                    <div className='message-container'>
+                        <Translate id='migration.message' data={{ walletUrl }}/>
                     </div>
                 </div>
 
                 <CustomButton onClick={onTransferClick}>
                     <IconWrapper>
                         {
                             availableAccounts.length
-                                ? <IconOffload stroke="#fff" />
-                                : <InfoIcon color="#fff" />
+                                ? <IconOffload stroke="#AD5700" />
+                                : <InfoIcon color="#AD5700" />
                         }    
                     </IconWrapper>
                     {
@@ -163,6 +187,9 @@ const MigrationBanner = ({ account, onTransfer }) => {
                             : <Translate id='migration.redirectCaption' />
                     }
                 </CustomButton>
+                <CloseButton onClick={hideBanner}>
+                    <CloseSvg color={'#AD5700'} />
+                </CloseButton>
             </ContentWrapper>
         </StyledContainer>
     );

diff --git a/packages/frontend/src/components/svg/CloseIcon.js 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 (
+        <svg className={className} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke={stroke} stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m1 1 18 18"/><path d="m19 1-18 18"/></g></svg>
+    );
+};
+
+export default CloseIcon;
+
+
diff --git 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
@@ -125,6 +125,17 @@ export const TransferWizardWrapper = () => {
                         <p>A multi-chain extension wallet that gives you control over all your assets from a single platform.</p>
                     </td>
                 </tr>
+                <tr>
+                    <td>
+                        <p>Sender Wallet</p>
+                    </td>
+                    <td>
+                        <p><a target="blank" href="https://senderwallet.io/">https://senderwallet.io/</a></p>
+                    </td>
+                    <td>
+                        <p>Security-audited mobile & extension wallet with 1M+ users, supporting NEAR & Aurora. Sender is backed by Pantera, Binance and MetaWeb.</p>
+                    </td>
+                </tr>
             </Table>
             <br />
             <h3>How does the Wizard Work?</h3>

diff --git 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 <a href='/profile'>account settings.</a>",
-        "readMore": "Please see <a href='https://near.org/blog/embracing-decentralization-whats-next-for-the-near-wallet' target='_blank' rel='noopener noreferrer'>the official announcement</a> and <a href='/transfer-wizard' target='_blank' rel='noopener noreferrer'>transfer wizard document</a> 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 <a href='/recover-account'>recover and export your account(s).</a>",
+        "message": "The NEAR Wallet will no longer be available after <b>October 31st, 2023</b>. Migrate accounts with your recovery phrase or the <a href='/transfer-wizard' target='_blank' rel='noopener noreferrer'>Transfer Wizard</a> to ensure uninterrupted account access. <a href='https://near.org/blog/embracing-decentralization-whats-next-for-the-near-wallet' target='_blank' rel='noopener noreferrer'><b>Learn More</b></a>",
         "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
@@ -790,8 +790,7 @@
         }
     },
     "migration": {
-        "message": "곧 NEAR 지갑(wallet.near.org)은 더 이상 지원되지 않습니다. 계정을 다른 지갑에 전송하거나 <a href='/profile'>계정 설정에서 개인 키를 내보내십시오.</a>",
-        "redirect": "곧 NEAR 지갑(wallet.near.org)은 더 이상 지원되지 않습니다. 12-단어 복구 구문을 사용해서 계정을 다른 지갑에 보내거나 <a href='/recover-account'>계정을 복구하여 내보내십시오.</a>",
+        "message": "NEAR Wallet은 <b>2023년 10월 31일</b> 이후에는 더 이상 사용하실 수 없습니다. 복구 단어(Passphrase)들을 사용하여 계정을 다른 지갑에서 등록 하시거나<a href='/transfer-wizard' target='_blank' rel='noopener noreferrer'>계정 이전 도우미</a>를 사용하여 계정을 이전 후 다른 지갑에서 계속 사용 하실수 있습니다. <a href='https://near.org/blog/embracing-decentralization-whats-next-for-the-near-wallet' target='_blank' rel='noopener noreferrer'><b>자세히 알아보기</b></a>",
         "redirectCaption": "더 알아보기",
         "transferCaption": "계정 전송"
     },

diff --git a/packages/frontend/src/translations/ru.global.json b/packages/frontend/src/translations/ru.global.json
@@ -551,9 +551,7 @@
         }
     },
     "migration": {
-        "message": "Скоро кошелек NEAR (${walletUrl}) перестанет поддерживаться. Перенесите свои аккаунты на другой кошелек или экспортируйте свои приватные ключи из настроек <a href='/profile'>аккаунта.</a>",
-        "readMore": "Пожалуйста, ознакомьтесь с <a href='https://near.org/blog/embracing-decentralization-whats-next-for-the-near-wallet' target='_blank' rel='noopener noreferrer'>официальным объявлением</a> и <a href='/transfer-wizard' target='_blank' rel='noopener noreferrer'>инструкциями по переносу</a> для получения более подробной информации.",
-        "redirect": "Скоро кошелек NEAR (${walletUrl}) перестанет поддерживаться. Используйте фразу восстановления из 12 слов для импортирования своего аккаунта на другой кошелек или <a href='/recover-account'>для восстановления и экспортирования своего аккаунта.</a>",
+        "message": "Кошелёк NEAR будет недоступен с <b>31го октября 2023</b>. Перенесите свои аккаунты с помощью фразы восстановления из 12 слов или <a href='/transfer-wizard' target='_blank' rel='noopener noreferrer'>инструкции по переносу</a> для дальнейшего использования своего аккаунта. <a href='https://near.org/blog/embracing-decentralization-whats-next-for-the-near-wallet' target='_blank' rel='noopener noreferrer'><b>Узнать больше</b></a>",
         "transferCaption": "Перенести Мои Аккаунты",
         "redirectCaption": "Перейти на MyNearWallet"
     },