diff --git a/packages/frontend/src/components/Routing.js b/packages/frontend/src/components/Routing.js index 5f6e44c7f4..b47246a407 100644 --- a/packages/frontend/src/components/Routing.js +++ b/packages/frontend/src/components/Routing.js @@ -1,8 +1,6 @@ import { ConnectedRouter, getRouter } from 'connected-react-router'; import isString from 'lodash.isstring'; -import { parseSeedPhrase } from 'near-seed-phrase'; import PropTypes from 'prop-types'; -import { stringify } from 'query-string'; import React, { Component } from 'react'; import ReactDOMServer from 'react-dom/server'; import { withLocalize } from 'react-localize-redux'; @@ -10,14 +8,14 @@ import { connect } from 'react-redux'; import { Redirect, Switch } from 'react-router-dom'; import styled, { ThemeProvider } from 'styled-components'; -import { SHOW_MIGRATION_BANNER, WEB3AUTH, WEP_DISABLE_ACCOUNT_CREATION, WEP_PHASE_ONE } from '../../../../features'; +import { WEB3AUTH, WEP_PHASE_ONE } from '../../../../features'; import favicon from '../../src/images/mynearwallet-cropped.svg'; import TwoFactorVerifyModal from '../components/accounts/two_factor/TwoFactorVerifyModal'; import { IS_MAINNET, PUBLIC_URL, SHOW_PRERELEASE_WARNING, - DISABLE_CREATE_ACCOUNT, + // DISABLE_CREATE_ACCOUNT, } from '../config'; import { isWhitelabel } from '../config/whitelabel'; import { Mixpanel } from '../mixpanel/index'; @@ -26,16 +24,8 @@ import { handleClearAlert } from '../redux/reducers/status'; import { selectAccountSlice } from '../redux/slices/account'; import { actions as flowLimitationActions } from '../redux/slices/flowLimitation'; import { actions as tokenFiatValueActions } from '../redux/slices/tokenFiatValues'; -import { CreateImplicitAccountWrapper } from '../routes/CreateImplicitAccountWrapper'; -import { ImportAccountWithLinkWrapper } from '../routes/ImportAccountWithLinkWrapper'; -import { LoginWrapper } from '../routes/LoginWrapper'; -import { SetupLedgerNewAccountWrapper } from '../routes/SetupLedgerNewAccountWrapper'; -import { SetupPassphraseNewAccountWrapper } from '../routes/SetupPassphraseNewAccountWrapper'; -import { SetupRecoveryImplicitAccountWrapper } from '../routes/SetupRecoveryImplicitAccountWrapper'; -import { SignWrapper } from '../routes/SignWrapper'; import { TransferWizardWrapper } from '../routes/TransferWizardWrapper'; import { VerifyOwnerWrapper } from '../routes/VerifyOwnerWrapper'; -import { WalletWrapper } from '../routes/WalletWrapper'; import translations_en from '../translations/en.global.json'; import translations_it from '../translations/it.global.json'; import translations_kr from '../translations/kr.global.json'; @@ -56,54 +46,26 @@ import { WALLET_SIGN_URL, WALLET_SEND_MONEY_URL, } from '../utils/wallet'; -import AccessKeysWrapper from './access-keys/v2/AccessKeysWrapper'; -import { AutoImportWrapper } from './accounts/auto_import/AutoImportWrapper'; -import BatchImportAccounts from './accounts/batch_import_accounts'; -import BatchLedgerExport from './accounts/batch_ledger_export'; -import { ExistingAccountWrapper } from './accounts/create/existing_account/ExistingAccountWrapper'; -import { InitialDepositWrapper } from './accounts/create/initial_deposit/InitialDepositWrapper'; -import { CreateAccountLanding } from './accounts/create/landing/CreateAccountLanding'; -import { VerifyAccountWrapper } from './accounts/create/verify_account/VerifyAccountWrapper'; -import { CreateAccountWithRouter } from './accounts/CreateAccount'; import LedgerConfirmActionModal from './accounts/ledger/LedgerConfirmActionModal'; import LedgerConnectModal from './accounts/ledger/LedgerConnectModal/LedgerConnectModalWrapper'; -import { SetupLedgerWithRouter } from './accounts/ledger/SetupLedger'; -import { SetupLedgerSuccessWithRouter } from './accounts/ledger/SetupLedgerSuccess'; -import { SignInLedgerWrapper } from './accounts/ledger/SignInLedgerWrapper'; -import { LinkdropLandingWithRouter } from './accounts/LinkdropLanding'; -import { RecoverAccountSeedPhraseWithRouter } from './accounts/RecoverAccountSeedPhrase'; -import { RecoverAccountWrapper } from './accounts/RecoverAccountWrapper'; -import { SetupRecoveryMethodWithRouter } from './accounts/recovery_setup/SetupRecoveryMethod'; -import { SetupImplicitWithRouter } from './accounts/SetupImplicit'; -import { SetupSeedPhraseWithRouter } from './accounts/SetupSeedPhrase'; import { DisableTwoFactor } from './accounts/two_factor/DisableTwoFactor'; -import { EnableTwoFactor } from './accounts/two_factor/EnableTwoFactor'; -import { BuyNear } from './buy/BuyNear'; import Footer from './common/Footer'; import GlobalAlert from './common/GlobalAlert'; -import GuestLandingRoute from './common/GuestLandingRoute'; import MigrationBanner from './common/MigrationBanner'; import NetworkBanner from './common/NetworkBanner'; import PrivateRoute from './common/routing/PrivateRoute'; -import PublicRoute from './common/routing/PublicRoute'; import Route from './common/routing/Route'; -import TwoFactorDisableBanner from './common/TwoFactorDisableBanner'; -import { ExploreContainer } from './explore/ExploreContainer'; import GlobalStyle from './GlobalStyle'; -import { LoginCliLoginSuccess } from './login/LoginCliLoginSuccess'; +import { GuestLanding } from './landing/GuestLanding'; import NavigationWrapper from './navigation/NavigationWrapper'; -import { NFTDetailWrapper } from './nft/NFTDetailWrapper'; import { PageNotFound } from './page-not-found/PageNotFound'; import Privacy from './privacy/Privacy'; -import { Profile } from './profile/Profile'; -import { ReceiveContainerWrapper } from './receive-money/ReceiveContainerWrapper'; -import { SendContainerWrapper } from './send/SendContainerWrapper'; -import { StakingContainer } from './staking/StakingContainer'; -import Swap from './swap/Swap'; import Terms from './terms/Terms'; -import '../index.css'; +import { initAnalytics } from './wallet-migration/metrics'; import { getMigrationStep } from './wallet-migration/utils'; import WalletMigration, { WALLET_MIGRATION_VIEWS } from './wallet-migration/WalletMigration'; +import '../index.css'; + const { fetchTokenFiatValues, getTokenWhiteList } = tokenFiatValueActions; const { @@ -123,7 +85,7 @@ const PATH_PREFIX = PUBLIC_URL; const Container = styled.div` min-height: 100vh; - padding-bottom: 230px; + padding-bottom: 100px; padding-top: 75px; @media (max-width: 991px) { .App { @@ -224,6 +186,8 @@ class Routing extends Component { document.querySelector('link[rel~="icon"]').href = favicon; } + await initAnalytics(); + const { refreshAccount, handleRefreshUrl, @@ -322,23 +286,9 @@ class Routing extends Component { render() { const { search, - query: { tab }, - hash, pathname, } = this.props.router.location; const { account } = this.props; - const setTab = (nextTab) => { - if (tab !== nextTab) { - // Ensure any `hash` value remains in the URL when we toggle tab - this.props.history.push({ - search: stringify( - { tab: nextTab }, - { skipNull: true, skipEmptyString: true } - ), - hash, - }); - } - }; const hideFooterOnMobile = [ WALLET_LOGIN_URL, @@ -369,19 +319,9 @@ class Routing extends Component { > - - + {pathname !== '/' && } + {pathname !== '/' && } - { - // TODO: Remove TwoFactorDisableBanner when we push MigrationBanner to mainnet - !isWhitelabel && !SHOW_MIGRATION_BANNER && ( - - - - ) - } { WEP_PHASE_ONE && ( @@ -441,81 +381,10 @@ class Routing extends Component { search: search, }} /> - ( - - )} - accountFound={accountFound} - indexBySearchEngines={!accountFound} - /> - - - { - if (WEP_DISABLE_ACCOUNT_CREATION) { - return this.props.history.push('/'); - } else { - if (accountFound || !DISABLE_CREATE_ACCOUNT) { - return ; - } else { - return ; - } - } - }} - // Logged in users always create a named account - /> - - - - - - this.handleTransferClick()} accountFound={accountFound} />} /> )} /> - - - - - - - - - - - - { - const importString = decodeURIComponent( - location.hash.substring(1) - ); - const hasAccountId = - importString.includes('/'); - const seedPhrase = hasAccountId - ? importString.split('/')[1] - : importString; - const { secretKey } = - parseSeedPhrase(seedPhrase); - return ( - - ); - }} - /> - { - const importString = decodeURIComponent( - location.hash.substring(1) - ); - const hasAccountId = - importString.includes('/'); - return ( - - ); - }} - /> - - ( this.props.history.replace('/')} />)} - /> - - - - ( - - )} - /> - ( - - )} - /> - - - - - - - - - ( - - )} - /> - {isWhitelabel && ( - - )} - { return ( -
- { - isWhitelabel ? ( - - - - ) : NEAR - } + +
+ { + isWhitelabel ? ( + + + + ) : NEAR + } +
-
- - + ); }; diff --git a/packages/frontend/src/components/common/FormButton.js b/packages/frontend/src/components/common/FormButton.js index 54239150e1..affc3104c1 100644 --- a/packages/frontend/src/components/common/FormButton.js +++ b/packages/frontend/src/components/common/FormButton.js @@ -81,6 +81,23 @@ const CustomButton = styled.button` } } + &.dark-gray-black { + background-color: #000000; + color: #FFFFFF; + padding: 0 20px; + margin: 0; + :hover { + background-color: #706f6c; + } + + :disabled { + background: #e6e6e6; + border-color: #e6e6e6; + opacity: 1 !important; + color: #A2A2A8; + } + } + &.gray-gray { background-color: #F0F0F1; border-color: #F0F0F1; @@ -193,6 +210,62 @@ const CustomButton = styled.button` opacity: 0.8; } } + &.dark-gray-transparent { + background-color: transparent; + border-color: #000000; + color: #000000; + margin: 0; + padding: 10px 24px; + + :hover { + background-color: #000000; + color: #FFFFFF; + } + + :disabled { + background: #e6e6e6; + border-color: #e6e6e6; + opacity: 1 !important; + color: #A2A2A8; + } + } + &.dark-green-transparent { + background-color: transparent; + border-color: #00EC97; + color: #FFFFFF; + margin: 0; + padding: 10px 24px; + + :hover { + background-color: rgb(0, 236, 151); + color: #000000; + } + + :disabled { + background: #e6e6e6; + border-color: #e6e6e6; + opacity: 1 !important; + color: #A2A2A8; + } + } + &.light-green-transparent { + background-color: #00EC97; + border-color: #00EC97; + color: #000000; + margin: 0; + padding: 10px 24px; + + :hover { + background-color: #45e394; + } + + :disabled { + background: #e6e6e6; + border-color: #e6e6e6; + opacity: 1 !important; + color: #A2A2A8; + } + } &.green { border-color: #5ace84; background: #5ace84; @@ -236,7 +309,7 @@ const CustomButton = styled.button` background-size: 14px 20px; :disabled { - color: e6e6e6; + color: #e6e6e6; border-color: #e6e6e6; background: #fff; opacity: 1 !important; diff --git a/packages/frontend/src/components/common/MigrationBanner.js b/packages/frontend/src/components/common/MigrationBanner.js index a0a334e25e..a61455c5ca 100644 --- a/packages/frontend/src/components/common/MigrationBanner.js +++ b/packages/frontend/src/components/common/MigrationBanner.js @@ -1,19 +1,15 @@ -import React, {useCallback, useEffect, useState} from 'react'; +import { parse } from 'query-string'; +import React, { useEffect, useState } from 'react'; import { Translate } from 'react-localize-redux'; -import {useSelector} from 'react-redux'; +import { useHistory } from 'react-router-dom'; import styled from 'styled-components'; -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` - background-color: #FFF4D5; + background-color: #FAC7BE; display: flex; align-items: flex-start; @@ -22,6 +18,10 @@ const StyledContainer = styled.div` margin-top: -15px; align-items: center; + @media (max-width: 768px) { + margin-bottom: 20px; + } + .alert-container { padding: 9px; margin-right: 16px; @@ -49,11 +49,13 @@ const StyledContainer = styled.div` const ContentWrapper = styled(Container)` display: flex; - align-items: center; - justify-content: space-between; margin-top: 0; padding: 0; + align-items: center; + justify-content: space-around; + margin-top: 10px; + &>*:first-child{ margin-right: 10px; } @@ -70,9 +72,9 @@ const ContentWrapper = styled(Container)` & .content { display: flex; - align-items: flex-start; + align-items: center; flex-wrap: none; - color: #AD5700; + color: black; > div > span > span > a, > div > span > a { @@ -87,27 +89,23 @@ const ContentWrapper = styled(Container)` `; const CustomButton = styled(FormButton)` - color: #AD5700 !important; - background: #FFE3A2 !important; - border: none !important; + color: black !important; + background: transparent !important; + border: black 1px solid !important; white-space: nowrap; padding: 9.5px 16px; margin: 0 !important; height: 40px !important; + font-weight: 300 !important; @media (max-width: 768px) { margin-top: 16px !important; } -`; - -const IconWrapper = styled.div` - display: inline; - margin-right: 10px; - margin-left: -10px; + margin-left: 24px !important; `; const CloseButton = styled.button` - height: 25px; - width: 25px; + height: 20px; + width: 20px; border: none; margin-left: 30px; cursor: pointer; @@ -120,75 +118,42 @@ const CloseButton = styled.button` `; const MigrationBanner = ({ account, onTransfer }) => { - const migrationBannerCloseTime = localStorage.getItem('migrationBannerCloseTime'); - const [showBanner, setShowBanner] = useState(true); - const EXPIRY_DATE = 604800000; // 7 days in milliseconds + const [showBanner, setShowBanner] = useState(false); + const history = useHistory(); + useEffect(() => { - if (!migrationBannerCloseTime || (Date.now() - migrationBannerCloseTime) > EXPIRY_DATE) { - setShowBanner(true); - localStorage.removeItem('migrationBannerCloseTime'); - } else { - setShowBanner(false); - } + const isRedirect = parse(window.location.search).previousPath; + setShowBanner(isRedirect); }, []); - - const availableAccounts = useSelector(selectAvailableAccounts); - const availableAccountsIsLoading = useSelector(selectAvailableAccountsIsLoading); - - const walletUrl = getNearOrgWalletUrl().replace('https://', ''); - - const onTransferClick = useCallback(() => { - if (availableAccounts.length) { - onTransfer(); - return; - } - - 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) { + + + + if (!showBanner) { return null; } const hideBanner = () => { setShowBanner(false); - localStorage.setItem('migrationBannerCloseTime', Date.now()); + history.replace('/'); + }; + + const onLearnMoreClick = () => { + window.open('https://near.org/blog/embracing-decentralization-whats-next-for-the-near-wallet', '_blank'); }; return (
-
- -
- +
+ + +
- - - - { - availableAccounts.length - ? - : - } - - { - availableAccounts.length - ? - : - } - - + diff --git a/packages/frontend/src/components/common/NetworkBanner.js b/packages/frontend/src/components/common/NetworkBanner.js index c25b58d7f0..70790173ce 100644 --- a/packages/frontend/src/components/common/NetworkBanner.js +++ b/packages/frontend/src/components/common/NetworkBanner.js @@ -78,10 +78,10 @@ const NetworkBanner = ({ account }) => { const setBannerHeight = () => { const banner = document.getElementById('top-banner'); const bannerHeight = banner ? banner.getBoundingClientRect().top + banner.offsetHeight : 0; - const app = document.getElementById('app-container'); + // const app = document.getElementById('app-container'); const navContainer = document.getElementById('nav-container'); navContainer.style.top = bannerHeight ? `${bannerHeight}px` : 0; - app.style.paddingTop = bannerHeight ? `${bannerHeight + 85}px` : '75px'; + // app.style.paddingTop = bannerHeight ? `${bannerHeight + 85}px` : '75px'; }; if (!IS_MAINNET) { diff --git a/packages/frontend/src/components/landing/GuestLanding.js b/packages/frontend/src/components/landing/GuestLanding.js index c21253c21f..20cef340aa 100644 --- a/packages/frontend/src/components/landing/GuestLanding.js +++ b/packages/frontend/src/components/landing/GuestLanding.js @@ -1,151 +1,42 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { Translate } from 'react-localize-redux'; -import styled from 'styled-components'; - -import { WEP_DISABLE_ACCOUNT_CREATION, WEP_PHASE_ONE } from '../../../../../features'; -import iPhoneMockup from '../../images/iphone-mockup.png'; +import {useSelector} from 'react-redux'; + +import HereWalletIcon from '../../images/wallet-icons/here-wallet-icon.png'; +import MeteorWalletIcon from '../../images/wallet-icons/meteor-wallet-icon.png'; +import NearWalletIcon from '../../images/wallet-icons/near-wallet-icon.png'; +import NightlyWalletIcon from '../../images/wallet-icons/nightly-wallet-icon.png'; +import SenderWalletIcon from '../../images/wallet-icons/sender-wallet-icon.png'; +import WellDoneWalletIcon from '../../images/wallet-icons/welldone-wallet-icon.png'; +import {selectAvailableAccounts} from '../../redux/slices/availableAccounts'; import FormButton from '../common/FormButton'; -import Container from '../common/styled/Container.css'; import { WalletSelectorGetAWallet } from '../common/wallet_selector/WalletSelectorGetAWallet'; -import LandingBackground from './LandingBackground'; - -const StyledContainer = styled.div` - - &&& { - margin: 35px 5px 0 5px; - position: relative; - text-align: center; - - @media (max-width: 767px) { - margin: 0; - overflow: hidden; - margin-top: -13px; - } - - svg { - opacity: 0.4; - position: absolute; - left: 0; - right: 0; - top: 0; - z-index: -1; - - @media (max-width: 992px) { - top: -120px; - } - - @media (max-width: 470px) { - top: -86px; - width: 900px; - left: unset; - } - } - - .small-centered { - padding-top: 20px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - } - - h1 { - font-weight: 600; - } - - h3 { - font-weight: 400 !important; - line-height: 150%; - - span { - span { - font-weight: 500; - } - } - - @media (max-width: 767px) { - font-size: 16px !important; - } - } - - .buttons { - margin-top: 30px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - z-index: 1; - - .blue { - font-weight: 500 !important; - margin: 0; - text-transform: none; - - :not(.link) { - min-width: 200px; - max-width: 220px; - height: auto; - text-transform: none; - padding: 12px 6px; - } - } - - .link { - text-decoration: none; - padding: 0; - :hover { - background-color: transparent; - text-decoration: underline; - } - } - - span { - margin: 20px; - } - - @media (min-width: 768px) { - flex-direction: row; - } - } - - .img-wrapper { - min-height: 300px; - - @media (min-width: 768px) { - min-height: 600px; - } - } - - img { - margin-top: 65px; - margin-bottom: 50px; - width: 500px; - height: auto; - - @media (min-width: 768px) { - width: 675px; - margin-bottom: 75px; - } - } - - .email-subscribe { - margin-top: -140px; - margin-bottom: 50px; - padding-top: 80px; - - @media (max-width: 767px) { - margin-bottom: 0; - margin-top: -100px; - } - } - } -`; +import NavigationWrapperV2 from '../navigation/NavigationWrapperV2'; +import {recordWalletMigrationEvent} from '../wallet-migration/metrics'; +import { + CardContainer, + CardsSection, + DefaultContainer, FlexBox, FlexItem, FormButtonContainer, InfoSection, + MainContainer, + MainSection, MainSectionButtons, + MainSectionInfo, SecondaryText, SecondaryTitle, + Section, SingleCard, + StyledContainer, TransferSection, TransferSectionWrapper +} from './GuestLanding.styles'; + +export function GuestLanding({ history, accountFound, onTransfer }) { + const availableAccounts = useSelector(selectAvailableAccounts); -export function GuestLanding({ history }) { const [walletSelectorModal, setWalletSelectorModal] = useState(); const [showModal, setShowModal] = useState(); + + useEffect(() => { + recordWalletMigrationEvent('LANDING_PAGE'); + }, []); return ( + <> + setWalletSelectorModal(modal)} @@ -157,36 +48,194 @@ export function GuestLanding({ history }) { }} showModal={showModal} /> - - -

-

-
- { - if (WEP_DISABLE_ACCOUNT_CREATION) { - setShowModal('more-near-wallets'); - } else { - history.push('/create'); - } - }} - trackingId="Click create account button" - data-test-id="landingPageCreateAccount" - > - - - - - {WEP_PHASE_ONE ? : } - -
-
Sign up
- + + + +

+

+ + { + recordWalletMigrationEvent('click', { element: { type: 'button', description: 'Learn More' }}); + window.open('https://medium.com/nearprotocol/near-opens-the-door-to-more-wallets-255eee58eb97', '_blank'); + }} + className='dark-gray-transparent' + color='dark-gray-transparent' + trackingId="Click create account button" + data-test-id="landingPageLearMore" + > + + + {accountFound && ( + + + + )} + + + + +
+ +

+

+ + +

+

+ +

+
+ { + recordWalletMigrationEvent('click', { element: { type: 'button', description: 'Learn More' }}); + window.open('https://medium.com/nearprotocol/near-opens-the-door-to-more-wallets-255eee58eb97', '_blank'); + }} + className='dark-gray-transparent' + color='dark-gray-transparent' + trackingId="Click create account button" + data-test-id="landingPageCreateAccount" + > + + +
+ + { accountFound && ( + +

+

+ +

+ { + recordWalletMigrationEvent('click', { element: { type: 'button', description: 'Transfer Guide' }}); + history.push('/transfer-wizard'); + }} + className='dark-gray-transparent' + color='dark-gray-transparent' + trackingId="Click create account button" + data-test-id="landingPageCreateAccount" + > + + + + )} + + +
+ + {accountFound ? ( + + {accountFound ? : } + + ) : ( + + + + )} +
+ + { + recordWalletMigrationEvent('click', { element: { type: 'button', description: 'Compare Wallets' }}); + window.open('https://docs.google.com/spreadsheets/d/1JeF9ZKmg1IHvTlgIv0ymGNMIeps6khcr3ElfIpEJHGs/edit#gid=0', '_blank'); + }} + className='dark-gray-transparent' + color='dark-gray-transparent' + trackingId="Click create account button" + data-test-id="landingPageCreateAccount" + > + + + + + + + { + recordWalletMigrationEvent('click', { element: { type: 'link', description: 'MyNearWallet Wallet' }}); + }}> + near-wallet-icon +

MyNearWallet

+

+ + { + recordWalletMigrationEvent('click', { element: { type: 'link', description: 'Meteor Wallet' }}); + }}> + meteor-wallet-icon +

Meteor Wallet

+

+ + { + recordWalletMigrationEvent('click', { element: { type: 'link', description: 'Sender Wallet' }}); + }}> + sender-wallet-icon +

Sender Wallet

+

+ + { + recordWalletMigrationEvent('click', { element: { type: 'link', description: 'HERE Wallet' }}); + }}> + here-wallet-icon +

HERE Wallet

+

+ + { + recordWalletMigrationEvent('click', { element: { type: 'link', description: 'Nightly Wallet' }}); + }}> + nightly-wallet-icon +

Nightly Wallet

+

+ + + wellDone-wallet-icon +

WELLDONE Wallet

+

+ + + + +
+ {accountFound && ( + + + +
+

+ {availableAccounts.length === 1 ? ( + + ) : ( + + )} +

+

+
+ + + + + + + + + )} + ); } diff --git a/packages/frontend/src/components/landing/GuestLanding.styles.js b/packages/frontend/src/components/landing/GuestLanding.styles.js new file mode 100644 index 0000000000..ac6fd70222 --- /dev/null +++ b/packages/frontend/src/components/landing/GuestLanding.styles.js @@ -0,0 +1,402 @@ +import styled from 'styled-components'; + +import PlusIcon from '../../images/plus-icon.png'; + +export const StyledContainer = styled.div` + + &&& { + margin: 35px auto 100px auto; + max-width: 1224px; + position: relative; + + @media (max-width: 767px) { + margin: 0; + overflow: hidden; + margin-top: -13px; + } + + svg { + opacity: 0.4; + position: absolute; + left: 0; + right: 0; + top: 0; + z-index: -1; + + @media (max-width: 992px) { + top: -120px; + } + + @media (max-width: 470px) { + top: -86px; + width: 900px; + left: unset; + } + } + + .small-centered { + padding-top: 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + h1 { + font-weight: 500; + font-size: 72px; + padding-bottom: 40px; + margin: 0; + letter-spacing: -1.08px; + line-height: 100%; + @media(max-width: 768px) { + font-size: 60px; + } + } + + h2 { + @media(max-width: 768px) { + font-size: 45px; + } + + @media(max-width: 576px) { + font-size: 40px; + } + } + + h3 { + font-size: 20px; + font-weight: 400 !important; + line-height: 130%; + letter-spacing: 0.3px; + padding-bottom: 48px; + + span { + span { + font-weight: 500; + } + } + + @media (max-width: 767px) { + font-size: 16px !important; + } + } + + .buttons { + margin-top: 30px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 1; + + .blue { + font-weight: 500 !important; + margin: 0; + text-transform: none; + + :not(.link) { + min-width: 200px; + max-width: 220px; + height: auto; + text-transform: none; + padding: 12px 6px; + } + } + + .link { + text-decoration: none; + padding: 0; + :hover { + background-color: transparent; + text-decoration: underline; + } + } + + span { + margin: 20px; + } + + @media (min-width: 768px) { + flex-direction: row; + } + } + + .img-wrapper { + min-height: 300px; + + @media (min-width: 768px) { + min-height: 600px; + } + } + + img { + margin-top: 65px; + margin-bottom: 50px; + width: 500px; + height: auto; + + @media (min-width: 768px) { + width: 675px; + margin-bottom: 75px; + } + } + + .email-subscribe { + margin-top: -140px; + margin-bottom: 50px; + padding-top: 80px; + + @media (max-width: 767px) { + margin-bottom: 0; + margin-top: -100px; + } + } + } +`; + +export const Section = styled.div` + width: 100%; + position: relative; + background-color: #F2F1EA; + padding: 100px 0 60px 0; + @media(max-width: 768px) { + padding: 50px 30px; + } + h2 { + color: #000000; + font-size: 56px; + font-style: normal; + font-weight: 500; + line-height: 130%; + padding-bottom: 42px; + @media(max-width: 576px) { + font-size: 40px; + } + } + h3 { + color: #000000; + padding-bottom: 120px; + @media(max-width: 768px) { + padding-bottom: 50px; + font-size: 20px; + } + font-size: 30px; + font-style: normal; + font-weight: 400; + line-height: 130%; + } +`; + +export const MainContainer = styled.div` + background-image: url(${PlusIcon}); + background-size: 100px 95px; + min-height: 680px; + display: flex; + width: 100%; + -webkit-box-align: center; + align-items: center; + background-repeat: repeat; + background-position: center top; + @media(max-width: 768px) { + margin-bottom: 20px; + } +`; + +export const MainSection = styled.div` + padding: 1rem; + max-width: 675px; + margin: 0 auto; + background-color: #FFFFFF; + display: flex; + -webkit-box-align: center; + align-items: center; + min-height: 260px; + @media(max-width: 768px) { + flex-wrap: wrap; + } +`; + +export const MainSectionInfo = styled.div` + display: flex; + -webkit-box-align: center; + align-items: center; + flex-flow: column; + text-align: center; +`; + +export const DefaultContainer = styled.div` + max-width: 1224px; + margin: 0 auto; + position: relative; +`; + +export const FlexBox = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: 120px; + @media(max-width: 768px) { + flex-wrap: wrap; + row-gap: 50px; + padding-bottom: 50px; + } +`; + +export const FlexItem = styled.div` + width: 100%; + h4 { + margin: 0; + font-size: 24px; + font-style: normal; + font-weight: 600; + line-height: 150%; + padding-bottom: 32px; + } + p { + margin: 0; + font-size: 16px; + font-style: normal; + font-weight: 450; + line-height: 150%; + letter-spacing: 0.32px; + color: #000000; + max-width: ${(props) => props.accountFound ? '430px' : '100%'}; + padding-bottom: 48px; + @media(max-width: 768px) { + max-width: 100%; + } + } +`; + +export const InfoSection = styled.div` + display: flex; + align-items: end; + justify-content: space-between; + padding-bottom: 60px; + @media(max-width: 768px) { + flex-wrap: wrap; + row-gap: 50px; + } +`; + +export const SecondaryTitle = styled.h4` + margin: 0; + font-size: 24px; + font-style: normal; + font-weight: 500; + line-height: 130%; + padding-bottom: 32px; +`; + +export const SecondaryText = styled.p` + margin: 0; + font-size: 16px; + font-style: normal; + font-weight: 450; + line-height: 150%; + letter-spacing: 0.32px; + color: #000000; +`; + +export const FormButtonContainer = styled.div` + min-width: 500px; + text-align: right; + @media(max-width: 768px) { + min-width: 100%; + } +`; + +export const CardsSection = styled.div` + position: relative; + margin-bottom: 60px; +`; + +export const CardContainer = styled.div` + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); + gap: 24px; + min-width: 300px; + @media (max-width: 600px) { + grid-template-columns: 1fr; + } +`; + +export const SingleCard = styled.a` + border: 1px solid #1B1B18; + transition: all .4s; + border-radius: 8px; + padding: 32px; + cursor: pointer; + outline: none; + &:hover { + background-color: #E3E3E0; + text-decoration: none; + } + img { + width: 52px; + padding-bottom: 32px; + } + h3 { + margin: 0; + padding: 0; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: 130%; + letter-spacing: 0.3px; + padding-bottom: 24px; + } + p { + margin: 0; + padding: 0; + font-size: 14px; + font-style: normal; + font-weight: 450; + line-height: 150%; + letter-spacing: 0.14px; + color: black; + } +`; +export const TransferSection = styled.div` + background-color: #000000; + color: #FFFFFF; + padding: 80px 0; + @media(max-width: 768px) { + padding: 50px 30px; + } +`; + +export const TransferSectionWrapper = styled.div` + display: flex; + justify-content: space-between; + align-items: end; + @media(max-width: 768px) { + flex-wrap: wrap; + row-gap: 50px; + } + h4 { + margin: 0; + font-size: 24px; + font-style: normal; + font-weight: 500; + line-height: 130%; + padding-bottom: 32px; + color: #FFFFFF; + } + p { + margin: 0; + font-size: 16px; + font-style: normal; + font-weight: 450; + line-height: 150%; + letter-spacing: 0.32px; + } +`; + +export const MainSectionButtons = styled.div` + display: flex; + justify-content: space-between; + gap: 24px; +`; diff --git a/packages/frontend/src/components/navigation/DesktopContainer.js b/packages/frontend/src/components/navigation/DesktopContainer.js index 984dcea9e9..841b45ac25 100644 --- a/packages/frontend/src/components/navigation/DesktopContainer.js +++ b/packages/frontend/src/components/navigation/DesktopContainer.js @@ -2,26 +2,21 @@ import React, { Component } from 'react'; import styled from 'styled-components'; import { isWhitelabel } from '../../config/whitelabel'; -import languagesIcon from '../../images/icon-languages.svg'; -import LanguageToggle from '../common/LangSwitcher'; -import ConnectLedger from './ConnectLedger'; import DeprecatedLogo from './DeprecatedLogo'; import DesktopMenu from './DesktopMenu'; import Logo from './Logo'; import NavLinks from './NavLinks'; -import UserAccount from './UserAccount'; const Container = styled.div` display: none; color: white; position: relative; font-size: 14px; - margin-bottom: 20px; padding: 0 15px; - border-bottom: 1px solid #F0F0F1; @media (min-width: 992px) { display: flex; + justify-content: space-between; } background-color: white; @@ -45,49 +40,6 @@ const Container = styled.div` `; -const Lang = styled.div` - margin-left: auto; - position: relative; - - &:after { - content: ''; - border-color: #72727A; - border-style: solid; - border-width: 2px 2px 0 0; - display: inline-block; - position: absolute; - right: 10px; - top: calc(50% - 10px); - transform: rotate(135deg) translateY(-50%); - height: 9px; - width: 9px; - } - - &:last-child { - margin-right: 15px; - } - - .lang-selector { - appearance: none; - background: transparent url(${languagesIcon}) no-repeat 5px center / 20px 20px; - border: 0; - cursor: pointer; - font-size: 16px; - height: 32px; - outline: none; - padding-right: 54px; - position: relative; - user-select: none; - width: 54px; - z-index: 1; - text-indent: 54px; - - &::-ms-expand { - display: none; - } - } -`; - class DesktopContainer extends Component { render() { const { @@ -98,9 +50,9 @@ class DesktopContainer extends Component { handleSelectAccount, showNavLinks, flowLimitationMainMenu, - flowLimitationSubMenu, refreshBalance, - onClickCreateNewAccount + onClickCreateNewAccount, + onTransfer } = this.props; const showAllNavigationLinks = showNavLinks && !flowLimitationMainMenu; @@ -112,34 +64,22 @@ class DesktopContainer extends Component { : } - {showAllNavigationLinks && - + {showAllNavigationLinks && account.accountId && + } - - - - {showNavLinks && ( - <> -
- - - + )} ); diff --git a/packages/frontend/src/components/navigation/DesktopMenu.js b/packages/frontend/src/components/navigation/DesktopMenu.js index 8f37c47487..b66bdec348 100644 --- a/packages/frontend/src/components/navigation/DesktopMenu.js +++ b/packages/frontend/src/components/navigation/DesktopMenu.js @@ -14,7 +14,7 @@ const Menu = styled.div` background-color: white; color: #4a4f54; width: 320px; - box-shadow: 0px 45px 56px rgba(0, 0, 0, 0.07), 0px 10.0513px 12.5083px rgba(0, 0, 0, 0.0417275), 0px 2.99255px 3.72406px rgba(0, 0, 0, 0.0282725); + box-shadow: 0 45px 56px rgba(0, 0, 0, 0.07), 0 10.0513px 12.5083px rgba(0, 0, 0, 0.0417275), 0 2.99255px 3.72406px rgba(0, 0, 0, 0.0282725); padding: 16px; .user-links { diff --git a/packages/frontend/src/components/navigation/MobileContainer.js b/packages/frontend/src/components/navigation/MobileContainer.js index 8fd7d5c7e6..c6f74689fc 100644 --- a/packages/frontend/src/components/navigation/MobileContainer.js +++ b/packages/frontend/src/components/navigation/MobileContainer.js @@ -1,31 +1,25 @@ import React, { Component } from 'react'; -import { Translate } from 'react-localize-redux'; +import {Translate} from 'react-localize-redux'; import styled from 'styled-components'; import { isWhitelabel } from '../../config/whitelabel'; -import languagesIcon from '../../images/icon-languages.svg'; -import AccountSelector from '../accounts/account_selector/AccountSelector'; -import LanguageToggle from '../common/LangSwitcher'; -import UserIcon from '../svg/UserIcon'; -import AccessAccountBtn from './AccessAccountBtn'; -import CreateAccountBtn from './CreateAccountBtn'; +import FormButton from '../common/FormButton'; import DeprecatedLogo from './DeprecatedLogo'; import Logo from './Logo'; -import NavLinks from './NavLinks'; -import UserAccount from './UserAccount'; const Container = styled.div` display: none; color: white; font-size: 15px; - margin-bottom: 20px; background-color: white; height: 70px; position: relative; padding: 0 14px; border-bottom: 1px solid #F0F0F1; transition: 300ms; - + & button { + max-width: 200px; + } ::-webkit-scrollbar { display: none; } @@ -91,94 +85,14 @@ const Collapsed = styled.div` } `; -const LowerSection = styled.div` - background-color: white; - margin: 0px -20px 0 -20px; - padding: 20px 20px 100% 20px; -`; - -const Lang = styled.div` - border-top: 1px solid #efefef; - padding: 14px; - position: relative; - max-height: 58px; - margin: 0 -14px; - - &.mobile-lang { - background-color: #FAFAFA; - border-bottom: 1px solid #efefef; - } - - &:after { - content: ''; - border-color: #72727A; - border-style: solid; - border-width: 2px 2px 0 0; - display: inline-block; - position: absolute; - right: 24px; - top: calc(50% - 10px); - transform: rotate(135deg) translateY(-50%); - height: 9px; - width: 9px; - } - - &:last-child { - border-top: 0; - margin-top: 0; - margin-left: auto; - padding: 0; - - .lang-selector { - color: #24272a; - width: 54px; - } - } - - .lang-selector { - appearance: none; - background: transparent url(${languagesIcon}) no-repeat 0px center / 24px 24px; - border: 0; - color: #72727A; - cursor: pointer; - height: 32px; - outline: none; - padding-right: 62px; - position: relative; - width: 100%; - z-index: 1; - text-indent: 54px; - } - - &.mobile-lang .lang-selector { - text-indent: 32px; - - &:active, - &:focus, - &:hover { - option { - background-color: #24272a; - border: 0; - color: #f8f8f8; - } - } - } -`; class MobileContainer extends Component { render() { const { - account, - handleSelectAccount, - availableAccounts, menuOpen, - toggleMenu, showNavLinks, flowLimitationMainMenu, - flowLimitationSubMenu, - refreshBalance, - onClickCreateNewAccount } = this.props; return ( @@ -190,43 +104,16 @@ class MobileContainer extends Component { } {showNavLinks && ( - <> - - - - )} - {!showNavLinks && ( - - - + + + )} - {menuOpen && ( - <> - - - - - -
- - - - - - )} ); } diff --git a/packages/frontend/src/components/navigation/NavLinks.js b/packages/frontend/src/components/navigation/NavLinks.js index 4061863989..74a8081736 100644 --- a/packages/frontend/src/components/navigation/NavLinks.js +++ b/packages/frontend/src/components/navigation/NavLinks.js @@ -1,21 +1,12 @@ import React from 'react'; import { Translate } from 'react-localize-redux'; -import { NavLink } from 'react-router-dom'; import styled from 'styled-components'; -import { DONATE_TO_UKRAINE } from '../../../../../features'; -import { IS_MAINNET } from '../../config'; -import { isWhitelabel } from '../../config/whitelabel'; -import { Mixpanel } from '../../mixpanel/index'; -import DonateToUkraineIcon from '../svg/DonateToUkraineIcon'; -import ExploreIcon from '../svg/ExploreIcon'; -import HelpIcon from '../svg/HelpIcon'; -import UserIcon from '../svg/UserIcon'; -import VaultIcon from '../svg/VaultIcon'; -import WalletIcon from '../svg/WalletIcon'; +import FormButton from '../common/FormButton'; const Container = styled.div` display: flex; + justify-content: flex-end; width: 100%; a { display: flex; @@ -106,40 +97,17 @@ const Container = styled.div` } `; -const NavLinks = () => ( +const NavLinks = ({ onTransfer }) => ( - Mixpanel.track('Click Wallet button on nav')}> - - - - Mixpanel.track('Click Staking button on nav')}> - - - - {isWhitelabel && ( - Mixpanel.track('Click Explore button on nav')}> - - - - )} - Mixpanel.track('Click Account button on nav')}> - - - - Mixpanel.track('Click Help button on nav')}> - - - - {DONATE_TO_UKRAINE && ( - Mixpanel.track('Click Donate button on nav')} - > - - - - )} + + + ); diff --git a/packages/frontend/src/components/navigation/Navigation.js b/packages/frontend/src/components/navigation/Navigation.js index b2f04f687c..70970636fc 100644 --- a/packages/frontend/src/components/navigation/Navigation.js +++ b/packages/frontend/src/components/navigation/Navigation.js @@ -13,6 +13,8 @@ const Container = styled.div` left: 0; right: 0; z-index: 1000; + max-width: 1224px; + margin: auto; @media (max-width: 991px) { bottom: ${(props) => props.open ? '0' : 'unset'}; } diff --git a/packages/frontend/src/components/navigation/NavigationV2.js b/packages/frontend/src/components/navigation/NavigationV2.js new file mode 100644 index 0000000000..b04d15b766 --- /dev/null +++ b/packages/frontend/src/components/navigation/NavigationV2.js @@ -0,0 +1,147 @@ +import React, { useState, useEffect, useCallback } from 'react'; +import styled from 'styled-components'; + +import { WalletSelectorGetAWallet } from '../common/wallet_selector/WalletSelectorGetAWallet'; +import DesktopContainer from './DesktopContainer'; +import MobileContainer from './MobileContainer'; + +const Container = styled.div` + &&& { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + border-bottom: 1px solid #F0F0F1; + background-color: #FFFFFF; + margin: auto; + @media (max-width: 991px) { + bottom: ${(props) => props.open ? '0' : 'unset'}; + border: none; + } + + h6 { + font-size: 13px; + margin-bottom: 5px; + color: #72727A; + font-weight: normal; + } + + .account-selector { + padding: 0; + box-shadow: none; + border-radius: 0; + } + } +`; + +const InnerContainer = styled.div` + &&& { + max-width: 1224px; + margin: 0 auto; + } +`; + +export default ({ + selectAccount, + showNavLinks, + flowLimitationMainMenu, + flowLimitationSubMenu, + refreshBalance, + availableAccounts, + account, + history, + onTransfer +}) => { + const [menuOpen, setMenuOpen] = useState(false); + const [walletSelectorModal, setWalletSelectorModal] = useState(); + const [showModal, setShowModal] = useState(); + + useEffect(() => { + if (menuOpen) { + document.addEventListener('keydown', handleKeyDown); + document.addEventListener('click', handleClick); + } else { + document.removeEventListener('keydown', handleKeyDown); + document.removeEventListener('click', handleClick); + } + }, [menuOpen]); + + const handleKeyDown = useCallback((e) => { + if (e.keyCode === 27) { + setMenuOpen(false); + } + }, []); + + const handleClick = useCallback((e) => { + const desktopMenu = document.getElementById('desktop-menu'); + const mobileMenu = document.getElementById('mobile-menu'); + + if (e.target.tagName === 'SPAN') { + return false; + } + + if (e.target.tagName === 'BUTTON' || e.target.tagName === 'A' || (!desktopMenu?.contains(e.target) && !mobileMenu?.contains(e.target))) { + setMenuOpen(false); + } + }, []); + + const toggleMenu = useCallback(() => { + if (menuOpen) { + setMenuOpen(false); + } else { + setMenuOpen(true); + } + }, [menuOpen]); + + const handleSelectAccount = useCallback((accountId) => { + selectAccount(accountId); + setMenuOpen(false); + }, []); + + const handleOnClickCreateNewAccount = () => { + setShowModal('more-near-wallets'); + }; + + return ( + + + setWalletSelectorModal(modal)} + setShowModal={(modal) => { + setShowModal(null); + if (modal === 'wallet-selector') { + walletSelectorModal.show(); + } + }} + showModal={showModal} + /> + + + + + ); +}; diff --git a/packages/frontend/src/components/navigation/NavigationWrapperV2.js b/packages/frontend/src/components/navigation/NavigationWrapperV2.js new file mode 100644 index 0000000000..b49cc3c55c --- /dev/null +++ b/packages/frontend/src/components/navigation/NavigationWrapperV2.js @@ -0,0 +1,35 @@ +import React, { useCallback } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; + +import { switchAccount, getAccountBalance } from '../../redux/actions/account'; +import { selectAccountSlice } from '../../redux/slices/account'; +import { selectAvailableAccounts } from '../../redux/slices/availableAccounts'; +import { selectFlowLimitationMainMenu, selectFlowLimitationSubMenu } from '../../redux/slices/flowLimitation'; +import NavigationV2 from './NavigationV2'; + +export default ({ history, onTransfer }) => { + const dispatch = useDispatch(); + + const account = useSelector(selectAccountSlice); + const flowLimitationMainMenu = useSelector(selectFlowLimitationMainMenu); + const flowLimitationSubMenu = useSelector(selectFlowLimitationSubMenu); + const availableAccounts = useSelector(selectAvailableAccounts); + + return ( + { + dispatch(switchAccount({ accountId })); + }, [])} + showNavLinks={account.localStorage?.accountFound} + flowLimitationMainMenu={flowLimitationMainMenu} + flowLimitationSubMenu={flowLimitationSubMenu} + refreshBalance={useCallback((accountId) => { + dispatch(getAccountBalance(accountId)); + }, [])} + availableAccounts={availableAccounts} + account={account} + history={history} + onTransfer={onTransfer} + /> + ); +}; diff --git a/packages/frontend/src/components/page-not-found/PageNotFound.js b/packages/frontend/src/components/page-not-found/PageNotFound.js index 509bd5e7f0..fe108b9d5e 100644 --- a/packages/frontend/src/components/page-not-found/PageNotFound.js +++ b/packages/frontend/src/components/page-not-found/PageNotFound.js @@ -1,10 +1,11 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { Translate } from 'react-localize-redux'; import styled from 'styled-components'; import textBackgroundImage from '../../images/bg-landing-patterned.svg'; import FormButton from '../common/FormButton'; import Container from '../common/styled/Container.css'; +import { recordWalletMigrationEvent } from '../wallet-migration/metrics'; const StyledContainer = styled(Container)` &&& { @@ -44,7 +45,12 @@ const StyledContainer = styled(Container)` } `; -export function PageNotFound() { +export function PageNotFound({ history }) { + useEffect(() => { + recordWalletMigrationEvent('REDIRECT'); + const path = window.location.pathname; + history.push('/?previousPath=' + path); + }, []); return (

diff --git a/packages/frontend/src/images/plus-icon.png b/packages/frontend/src/images/plus-icon.png new file mode 100644 index 0000000000..939f237be5 Binary files /dev/null and b/packages/frontend/src/images/plus-icon.png differ diff --git a/packages/frontend/src/images/plus-icon.svg b/packages/frontend/src/images/plus-icon.svg new file mode 100644 index 0000000000..120e8af801 --- /dev/null +++ b/packages/frontend/src/images/plus-icon.svg @@ -0,0 +1,9 @@ + + New Project + + + + + + \ No newline at end of file diff --git a/packages/frontend/src/images/wallet-icons/here-wallet-icon.png b/packages/frontend/src/images/wallet-icons/here-wallet-icon.png new file mode 100644 index 0000000000..28d63c5ef7 Binary files /dev/null and b/packages/frontend/src/images/wallet-icons/here-wallet-icon.png differ diff --git a/packages/frontend/src/images/wallet-icons/meteor-wallet-icon.png b/packages/frontend/src/images/wallet-icons/meteor-wallet-icon.png new file mode 100644 index 0000000000..73798879d8 Binary files /dev/null and b/packages/frontend/src/images/wallet-icons/meteor-wallet-icon.png differ diff --git a/packages/frontend/src/images/wallet-icons/near-wallet-icon.png b/packages/frontend/src/images/wallet-icons/near-wallet-icon.png new file mode 100644 index 0000000000..d5873c806c Binary files /dev/null and b/packages/frontend/src/images/wallet-icons/near-wallet-icon.png differ diff --git a/packages/frontend/src/images/wallet-icons/nightly-wallet-icon.png b/packages/frontend/src/images/wallet-icons/nightly-wallet-icon.png new file mode 100644 index 0000000000..bd3e873873 Binary files /dev/null and b/packages/frontend/src/images/wallet-icons/nightly-wallet-icon.png differ diff --git a/packages/frontend/src/images/wallet-icons/sender-wallet-icon.png b/packages/frontend/src/images/wallet-icons/sender-wallet-icon.png new file mode 100644 index 0000000000..04cbb91067 Binary files /dev/null and b/packages/frontend/src/images/wallet-icons/sender-wallet-icon.png differ diff --git a/packages/frontend/src/images/wallet-icons/welldone-wallet-icon.png b/packages/frontend/src/images/wallet-icons/welldone-wallet-icon.png new file mode 100644 index 0000000000..5c618c8ea6 Binary files /dev/null and b/packages/frontend/src/images/wallet-icons/welldone-wallet-icon.png differ diff --git a/packages/frontend/src/translations/en.global.json b/packages/frontend/src/translations/en.global.json index 4bd1c9538d..80df6a7265 100644 --- a/packages/frontend/src/translations/en.global.json +++ b/packages/frontend/src/translations/en.global.json @@ -343,7 +343,10 @@ "viewOnExplorer": "View on Explorer", "viewPrivateKey": "View private key", "withdrawing": "Withdrawing", - "disabling2FA": "Disabling 2FA" + "disabling2FA": "Disabling 2FA", + "transferGuide": "Transfer Guide", + "compareWallets": "Compare Wallets", + "transferAccounts": "Transfer Accounts" }, "buyNear": { "bridgeSubTitle": "Transfer your tokens from Ethereum to NEAR using the Rainbow Bridge.", @@ -580,7 +583,7 @@ }, "footer": { "contactSupport": "Join Community", - "copyrights": "MyNearWallet LLC. All Rights Reserved.", + "copyrights": "Near.org", "desc": "NEAR is a scalable computing and storage platform that changes how the web works for the better.", "learnMore": "Learn More", "needHelp": "Questions?", @@ -670,9 +673,32 @@ }, "landing": { "banner": "NEAR Wallet is in Private Beta", - "desc": "Securely store and stake your NEAR tokens and compatible assets with NEAR Wallet.", + "desc": "The NEAR wallet has been discontinued. Explore a range of user-friendly wallets designed to meet your needs.", "or": "or", - "title": "NEAR is here." + "title": "A new era for NEAR wallets", + "decentralize": "Decentralization means strength in numbers.", + "decentralizeSubtitle": "Signifying the substantial growth of the ecosystem, NEAR now supports a diverse list of high-quality wallets.", + "landingSectionTitle": "What happened to NEAR Wallet?", + "landingSectionSubTitle": "Transfer your accounts with ease.", + "landingSectionSubDescription": "To make the transition easier, you can securely migrate your accounts to a new wallet using the Transfer Wizard. Review the transfer-compatible wallet options below or move your accounts manually with your recovery phrase.", + "landingSectionDescription": "As we embrace a more decentralized future, the NEAR Wallet will be discontinued. This change invites you to discover a variety of new and secure wallet options within our ecosystem. Don’t worry, no changes will be made to your account or assets.", + "wallet": { + "title": "Find the right wallet for you.", + "secondaryDescription": "Check out our diverse list of community-built wallet options.", + "description": "You can transfer your accounts to any of the wallets below or manually import them to the wallet of your choice using your recovery phrase.", + "near": "A browser based wallet that offers the same UI and features of the Near wallet.", + "meteor": "Both a browser and extension wallet, with advanced NFT features.", + "sender": "Security-audited mobile & extension wallet with 1M+ users, supporting NEAR & Aurora.", + "here": "Non-custodial mobile wallet with a friendly user interface and advanced features.", + "nightly": "A mobile and extension wallet, with support for multiple ecosystems.", + "wellDone": "A multi-chain extension wallet that gives you control over all your assets from a single platform." + }, + "transfer": { + "titleSingular": "You have ${accountCount} account ready to transfer.", + "titlePlural": "You have ${accountCount} accounts ready to transfer.", + "description": "To continue using NEAR apps and managing your assets you need to migrate your accounts to a different wallet." + } + }, "ledgerSignTxModal": { "ADD_ACCESS_KEY": "You will need to confirm login details on your Ledger.", @@ -793,7 +819,8 @@ "migration": { "message": "As of January 8th, 2024 the NEAR wallet will be discontinued. No changes will be made to your account or its assets. Use your recovery phrase or the Transfer Wizard to securely migrate to a different wallet. Learn More", "redirectCaption": "Learn More", - "transferCaption": "Transfer My Accounts" + "transferCaption": "Transfer My Accounts", + "redirect": "This function is no longer available. Try using a different wallet." }, "minimumBalance": "This is the minimum NEAR balance your account must maintain to remain active. This balance represents the storage space your account is using on the NEAR blockchain (with a small buffer), and will go up or down as you use more or less space.", "mobileDeviceAccess": {