Merge pull request #3098 from near/master

2023-08-14 Release
near · Aug 14, 2023 · 0f0a4ab · 0f0a4ab
2 parents 98d5132 + 618384c
commit 0f0a4ab
Show file tree

Hide file tree

Showing 10 changed files with 185 additions and 58 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/GetYourTickets.js b/packages/frontend/src/components/wallet/GetYourTickets.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import NearCon from '../../images/nearcon-wallet.png';
+
+const Container = styled.div`
+    && {
+        border-radius: 8px;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        color: #d5d4d8;
+        font-size: 14px;
+        margin-bottom: 40px;
+
+        & div {
+            position: relative;
+        }
+    }
+`;
+
+const StyledBannerLink = styled.a`
+    margin-top: 12px;
+    width: 270px;
+    height: 35px;
+    background: #604cc8;
+    color: #fff;
+    border: 2px solid #604cc8;
+    border-radius: 50px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    position: absolute;
+    left: 24px;
+    bottom: 18px;
+
+    &:hover {
+        color: #fff;
+        text-decoration: none;
+        cursor: pointer;
+    }
+`;
+
+const GetYourTicket = () => {
+    return (
+        <Container>
+            <div>
+                <img src={NearCon} alt='NearCon-wallet'/>
+                <StyledBannerLink href="https://near.org/nearcon23.near/widget/Index" target="_blank">
+                    GET YOUR TICKETS
+                </StyledBannerLink>
+            </div>
+        </Container>
+    );
+};
+
+export default GetYourTicket;
diff --git a/packages/frontend/src/components/wallet/SidebarNearcon.js b/packages/frontend/src/components/wallet/SidebarNearcon.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import GetYourTicket from './GetYourTickets';
+
+const StyledContainer = styled.div`
+    background-color: transparent;
+    border-radius: 8px;
+    padding-bottom: 30px;
+    margin-bottom: 35px;
+    height: 400px;
+    
+    color: #25272A;
+`;
+
+const StyledBanner = styled.div`
+    height: 395px;
+    margin-bottom: 10px;
+`;
+
+export default () => { 
+    return (
+        <StyledContainer>
+            <StyledBanner>
+                <GetYourTicket />
+            </StyledBanner>
+        </StyledContainer>
+    );
+};
diff --git a/packages/frontend/src/components/wallet/Wallet.js b/packages/frontend/src/components/wallet/Wallet.js
@@ -24,20 +24,15 @@ import AllTokensTotalBalanceUSD from './AllTokensTotalBalanceUSD';
 import CreateCustomNameModal from './CreateCustomNameModal';
 import CreateFromImplicitSuccessModal from './CreateFromImplicitSuccessModal';
 import DepositNearBanner from './DepositNearBanner';
-import ExploreApps from './ExploreApps';
 import LinkDropSuccessModal from './LinkDropSuccessModal';
 import NFTs from './NFTs';
-import Sidebar from './Sidebar';
-import SidebarLight from './SidebarLight';
+import SidebarNearcon from './SidebarNearcon';
 import Tokens from './Tokens';
 import { ZeroBalanceAccountImportedModal } from './ZeroBalanceAccountImportedModal';
 
 const StyledContainer = styled(Container)`
     @media (max-width: 991px) {
-        margin: -5px auto 0 auto;
-        &.showing-banner {
-            margin-top: -15px;
-        }
+        margin-top: 0px;
     }
     
     .coingecko {
@@ -370,11 +365,8 @@ export function Wallet({
                     )}
                 </div>
                 <div className="right">
-                    {isWhitelabel
-                        ? <SidebarLight availableAccounts={accountExists && availableAccounts} />
-                        : accountExists
-                            ? <Sidebar availableAccounts={availableAccounts} />
-                            : <ExploreApps />
+                    {
+                        <SidebarNearcon/ >
                     }
                     <ActivitiesWrapper />
                 </div>

diff --git a/packages/frontend/src/images/nearcon-wallet.png b/packages/frontend/src/images/nearcon-wallet.png
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": "As of <b>October 31st, 2023</b> the NEAR wallet will be discontinued. No changes will be made to your account or its assets. Use your recovery phrase or the <a href='/transfer-wizard' target='_blank' rel='noopener noreferrer'>Transfer Wizard</a> to securely migrate to a different wallet. <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,6 @@
         }
     },
     "migration": {
-        "message": "곧 NEAR 지갑(wallet.near.org)은 더 이상 지원되지 않습니다. 계정을 다른 지갑에 전송하거나 <a href='/profile'>계정 설정에서 개인 키를 내보내십시오.</a>",
-        "redirect": "곧 NEAR 지갑(wallet.near.org)은 더 이상 지원되지 않습니다. 12-단어 복구 구문을 사용해서 계정을 다른 지갑에 보내거나 <a href='/recover-account'>계정을 복구하여 내보내십시오.</a>",
         "redirectCaption": "더 알아보기",
         "transferCaption": "계정 전송"
     },

diff --git a/packages/frontend/src/translations/ru.global.json b/packages/frontend/src/translations/ru.global.json
@@ -551,9 +551,6 @@
         }
     },
     "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>",
         "transferCaption": "Перенести Мои Аккаунты",
         "redirectCaption": "Перейти на MyNearWallet"
     },