diff --git a/packages/frontend/src/components/landing/GuestLanding.js b/packages/frontend/src/components/landing/GuestLanding.js index 7f647ee50d..a9aaa6a56f 100644 --- a/packages/frontend/src/components/landing/GuestLanding.js +++ b/packages/frontend/src/components/landing/GuestLanding.js @@ -3,6 +3,7 @@ import { Translate } from 'react-localize-redux'; import HereWalletIcon from '../../images/wallet-icons/here-wallet-icon.png'; import MeteorWalletIcon from '../../images/wallet-icons/meteor-wallet-icon.png'; +import NearMobileIcon from '../../images/wallet-icons/near-mobile-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'; @@ -10,93 +11,130 @@ import WellDoneWalletIcon from '../../images/wallet-icons/welldone-wallet-icon.p import FormButton from '../common/FormButton'; import { WalletSelectorGetAWallet } from '../common/wallet_selector/WalletSelectorGetAWallet'; import NavigationWrapperV2 from '../navigation/NavigationWrapperV2'; -import {recordWalletMigrationEvent} from '../wallet-migration/metrics'; +import { recordWalletMigrationEvent } from '../wallet-migration/metrics'; import { CardContainer, CardsSection, - DefaultContainer, FlexBox, FlexItem, FormButtonContainer, InfoSection, + DefaultContainer, + FlexBox, + FlexItem, + FormButtonContainer, + InfoSection, MainContainer, - MainSection, MainSectionButtons, - MainSectionInfo, SecondaryText, SecondaryTitle, - Section, SingleCard, - StyledContainer, TransferSection, TransferSectionWrapper + MainSection, + MainSectionButtons, + MainSectionInfo, + SecondaryText, + SecondaryTitle, + Section, + SingleCard, + StyledContainer, + TransferSection, + TransferSectionWrapper, } from './GuestLanding.styles'; -export function GuestLanding({ history, accountFound, onTransfer }) { - +export function GuestLanding({ history, accountFound, onTransfer }) { const [walletSelectorModal, setWalletSelectorModal] = useState(); const [showModal, setShowModal] = useState(); - + useEffect(() => { recordWalletMigrationEvent('LANDING_PAGE'); }, []); return ( <> - - - setWalletSelectorModal(modal)} - setShowModal={(modal) => { - setShowModal(null); - if (modal === 'wallet-selector') { - walletSelectorModal.show(); + + + + setWalletSelectorModal(modal) } - }} - showModal={showModal} - /> - - - -

-

- - { - 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 && ( + setShowModal={(modal) => { + setShowModal(null); + if (modal === 'wallet-selector') { + walletSelectorModal.show(); + } + }} + showModal={showModal} + /> + + + +

+ +

+

+ +

+ { + 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" + 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'); + 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' + className="dark-gray-transparent" + color="dark-gray-transparent" trackingId="Click create account button" data-test-id="landingPageCreateAccount" > @@ -104,19 +142,26 @@ export function GuestLanding({ history, accountFound, onTransfer }) {
- { accountFound && ( + {accountFound && ( -

+

+ +

{ - recordWalletMigrationEvent('click', { element: { type: 'button', description: 'Transfer Guide' }}); + recordWalletMigrationEvent('click', { + element: { + type: 'button', + description: 'Transfer Guide', + }, + }); history.push('/transfer-wizard'); }} - className='dark-gray-transparent' - color='dark-gray-transparent' + className="dark-gray-transparent" + color="dark-gray-transparent" trackingId="Click create account button" data-test-id="landingPageCreateAccount" > @@ -127,10 +172,16 @@ export function GuestLanding({ history, accountFound, onTransfer }) {
- + + + {accountFound ? ( - {accountFound ? : } + {accountFound ? ( + + ) : ( + + )} ) : ( @@ -141,11 +192,19 @@ export function GuestLanding({ history, accountFound, onTransfer }) { { - recordWalletMigrationEvent('click', { element: { type: 'button', description: 'Compare Wallets' }}); - window.open('https://docs.google.com/spreadsheets/d/1JeF9ZKmg1IHvTlgIv0ymGNMIeps6khcr3ElfIpEJHGs/edit#gid=0', '_blank'); + 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' + className="dark-gray-transparent" + color="dark-gray-transparent" trackingId="Click create account button" data-test-id="landingPageCreateAccount" > @@ -155,47 +214,152 @@ export function GuestLanding({ history, accountFound, onTransfer }) { - { - recordWalletMigrationEvent('click', { element: { type: 'link', description: 'MyNearWallet Wallet' }}); - }}> - near-wallet-icon + { + recordWalletMigrationEvent('click', { + element: { + type: 'link', + description: 'MyNearWallet Wallet', + }, + }); + }} + > + near-wallet-icon

MyNearWallet

-

+

+ +

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

Meteor Wallet

-

+

+ +

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

Sender Wallet

-

+

+ +

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

HERE Wallet

-

+

+ +

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

Nightly Wallet

-

+

+ +

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

WELLDONE Wallet

-

+

+ +

+
+ { + recordWalletMigrationEvent('click', { + element: { + type: 'link', + description: 'NEAR Mobile', + }, + }); + }} + > + near-mobile-icon +

NEAR Mobile

+

+ +

@@ -209,13 +373,15 @@ export function GuestLanding({ history, accountFound, onTransfer }) {

-

+

+ +

diff --git a/packages/frontend/src/images/wallet-icons/near-mobile-icon.png b/packages/frontend/src/images/wallet-icons/near-mobile-icon.png new file mode 100644 index 0000000000..0054137c89 Binary files /dev/null and b/packages/frontend/src/images/wallet-icons/near-mobile-icon.png differ diff --git a/packages/frontend/src/translations/en.global.json b/packages/frontend/src/translations/en.global.json index fc617716bf..c74aa268f8 100644 --- a/packages/frontend/src/translations/en.global.json +++ b/packages/frontend/src/translations/en.global.json @@ -346,7 +346,7 @@ "disabling2FA": "Disabling 2FA", "transferGuide": "Transfer Guide", "compareWallets": "Compare Wallets", - "transferAccounts": "Transfer Accounts" + "transferAccounts": "Transfer Accounts" }, "buyNear": { "bridgeSubTitle": "Transfer your tokens from Ethereum to NEAR using the Rainbow Bridge.", @@ -691,13 +691,13 @@ "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." + "wellDone": "A multi-chain extension wallet that gives you control over all your assets from a single platform.", + "nearMobile": "A non-custodial wallet that is easy to use and well designed to manage your crypto wherever you go." }, "transfer": { "title": "You have accounts that need to be transferred", "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.",