From 5868c15d15ae1f72bf863c77bdd1a394d5aea03c Mon Sep 17 00:00:00 2001 From: "jackson@near.org" Date: Wed, 17 Apr 2024 21:15:43 -0700 Subject: [PATCH 1/3] fix: add Explore wallets button for signed out users and modify hero section --- .../src/components/common/FormButton.js | 222 +++-- .../src/components/landing/GuestLanding.js | 763 ++++++++++++++++-- .../components/landing/GuestLanding.styles.js | 213 ++--- .../frontend/src/translations/en.global.json | 3 +- .../frontend/src/translations/it.global.json | 1 + .../frontend/src/translations/kr.global.json | 5 +- .../frontend/src/translations/pt.global.json | 1 + .../frontend/src/translations/ru.global.json | 5 +- .../frontend/src/translations/tr.global.json | 1 + .../frontend/src/translations/ua.global.json | 1 + .../frontend/src/translations/vi.global.json | 1 + .../src/translations/zh-hans.global.json | 1 + .../src/translations/zh-hant.global.json | 3 +- 13 files changed, 916 insertions(+), 304 deletions(-) diff --git a/packages/frontend/src/components/common/FormButton.js b/packages/frontend/src/components/common/FormButton.js index affc3104c1..a1d935570b 100644 --- a/packages/frontend/src/components/common/FormButton.js +++ b/packages/frontend/src/components/common/FormButton.js @@ -1,18 +1,18 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import { Translate } from 'react-localize-redux'; -import { withRouter } from 'react-router'; -import styled from 'styled-components'; +import PropTypes from "prop-types"; +import React from "react"; +import { Translate } from "react-localize-redux"; +import { withRouter } from "react-router"; +import styled from "styled-components"; -import ArrowGrnImage from '../../images/icon-arrow-grn.svg'; -import ArrowWhiteImage from '../../images/icon-arrow-white.svg'; -import { Mixpanel } from '../../mixpanel/index'; -import classNames from '../../utils/classNames'; +import ArrowGrnImage from "../../images/icon-arrow-grn.svg"; +import ArrowWhiteImage from "../../images/icon-arrow-white.svg"; +import { Mixpanel } from "../../mixpanel/index"; +import classNames from "../../utils/classNames"; const CustomButton = styled.button` &&& { color: #fff; - margin: ${({ swapButton }) => (swapButton ? 0 : '24px 0 0 0')}; + margin: ${({ swapButton }) => (swapButton ? 0 : "24px 0 0 0")}; border: 2px solid; font-weight: 600; height: 56px; @@ -36,7 +36,7 @@ const CustomButton = styled.button` height: 36px; border-radius: 20px; padding: 0px 0px; - + font-size: 14px; } @@ -60,14 +60,14 @@ const CustomButton = styled.button` background: #e6e6e6; border-color: #e6e6e6; opacity: 1 !important; - color: #A2A2A8; + color: #a2a2a8; } } - + &.dark-gray-light-blue { - background-color: #37383C; - border-color: #37383C; - color: #8EBAF0; + background-color: #37383c; + border-color: #37383c; + color: #8ebaf0; :hover { background-color: black; @@ -77,13 +77,13 @@ const CustomButton = styled.button` background: #e6e6e6; border-color: #e6e6e6; opacity: 1 !important; - color: #A2A2A8; + color: #a2a2a8; } } &.dark-gray-black { background-color: #000000; - color: #FFFFFF; + color: #ffffff; padding: 0 20px; margin: 0; :hover { @@ -94,14 +94,14 @@ const CustomButton = styled.button` background: #e6e6e6; border-color: #e6e6e6; opacity: 1 !important; - color: #A2A2A8; + color: #a2a2a8; } } &.gray-gray { - background-color: #F0F0F1; - border-color: #F0F0F1; - color: #3F4045; + background-color: #f0f0f1; + border-color: #f0f0f1; + color: #3f4045; :hover { background-color: #ececec; @@ -113,9 +113,9 @@ const CustomButton = styled.button` } &.light-blue { - background-color: #D6EDFF; + background-color: #d6edff; border: 0; - color: #0072CE; + color: #0072ce; border-radius: 4px; &.small { @@ -127,24 +127,25 @@ const CustomButton = styled.button` &.rounded { border-radius: 50px; - padding: ${({ swapButton }) => (swapButton ? '6px 12px' : '12px 15px')}; + padding: ${({ swapButton }) => + swapButton ? "6px 12px" : "12px 15px"}; width: auto; } :hover { color: white; - background-color: #0072CE; + background-color: #0072ce; } :disabled { - background-color: #F0F0F1; - color: #A2A2A8; + background-color: #f0f0f1; + color: #a2a2a8; } } &.red { - border-color: #E5484D; - background: #E5484D; + border-color: #e5484d; + background: #e5484d; :disabled { background: #e6e6e6; @@ -154,9 +155,9 @@ const CustomButton = styled.button` :active, :hover, :focus { - border-color: #E5484D; + border-color: #e5484d; background: #fff; - color: #E5484D; + color: #e5484d; } &.dots { color: #fff; @@ -176,7 +177,7 @@ const CustomButton = styled.button` background: #e6e6e6; border-color: #e6e6e6; opacity: 1 !important; - color: #A2A2A8; + color: #a2a2a8; } } &.seafoam-blue { @@ -191,7 +192,7 @@ const CustomButton = styled.button` :active, :hover, :focus { - opacity: 0.8; + opacity: 0.8; } } &.seafoam-blue-white { @@ -207,7 +208,7 @@ const CustomButton = styled.button` :active, :hover, :focus { - opacity: 0.8; + opacity: 0.8; } } &.dark-gray-transparent { @@ -219,20 +220,20 @@ const CustomButton = styled.button` :hover { background-color: #000000; - color: #FFFFFF; + color: #ffffff; } :disabled { background: #e6e6e6; border-color: #e6e6e6; opacity: 1 !important; - color: #A2A2A8; + color: #a2a2a8; } } &.dark-green-transparent { background-color: transparent; - border-color: #00EC97; - color: #FFFFFF; + border-color: #00ec97; + color: #ffffff; margin: 0; padding: 10px 24px; @@ -245,12 +246,12 @@ const CustomButton = styled.button` background: #e6e6e6; border-color: #e6e6e6; opacity: 1 !important; - color: #A2A2A8; + color: #a2a2a8; } } &.light-green-transparent { - background-color: #00EC97; - border-color: #00EC97; + background-color: #00ec97; + border-color: #00ec97; color: #000000; margin: 0; padding: 10px 24px; @@ -263,13 +264,12 @@ const CustomButton = styled.button` background: #e6e6e6; border-color: #e6e6e6; opacity: 1 !important; - color: #A2A2A8; + color: #a2a2a8; } } &.green { border-color: #5ace84; background: #5ace84; - :disabled { border-color: #e6e6e6; @@ -284,8 +284,8 @@ const CustomButton = styled.button` } } &.green-dark { - background-color: #00C08B; - color: #00261C; + background-color: #00c08b; + color: #00261c; border: 0; font-weight: 600 !important; @@ -294,9 +294,9 @@ const CustomButton = styled.button` } &.border { - color: #008D6A !important; - background-color: #C8F6E0 !important; - border: 2px solid #56BC8F !important; + color: #008d6a !important; + background-color: #c8f6e0 !important; + border: 2px solid #56bc8f !important; } } &.green-white-arrow { @@ -324,8 +324,8 @@ const CustomButton = styled.button` } } &.green-pastel { - background-color: #4DD5A6; - color: #00261C; + background-color: #4dd5a6; + color: #00261c; border: 0; :hover { @@ -351,21 +351,21 @@ const CustomButton = styled.button` } } &.gray-red { - color: #FF585D; + color: #ff585d; border: none; - background-color: #F0F0F1; + background-color: #f0f0f1; :hover, :active, :focus { color: #fff; - background-color: #FF585D; + background-color: #ff585d; } } &.gray-blue { color: #0072ce; - border-color: #F0F0F1; - background: #F0F0F1; + border-color: #f0f0f1; + background: #f0f0f1; :disabled { border-color: #e6e6e6; @@ -376,18 +376,18 @@ const CustomButton = styled.button` :hover, :focus { color: #0072ce; - border-color: #F0F0F1; + border-color: #f0f0f1; background: #fff; } &.dark { - border-color: #EFEFEF; - background: #EFEFEF; + border-color: #efefef; + background: #efefef; } &.border { background: none; - border-color: #E6E5E3; + border-color: #e6e5e3; :hover { border-color: #0072ce; } @@ -425,20 +425,20 @@ const CustomButton = styled.button` } &.gray { - color: #72727A; + color: #72727a; :hover, :focus { - color: #72727A; + color: #72727a; } } &.light-gray { - color: #A2A2A8; + color: #a2a2a8; :hover, :focus { - color: #A2A2A8; + color: #a2a2a8; } } @@ -464,7 +464,6 @@ const CustomButton = styled.button` text-decoration: none; } } - } &.dots { @@ -481,31 +480,27 @@ const CustomButton = styled.button` border-color: #cccccc; } :after { - content: '.'; + content: "."; animation: dots 1s steps(5, end) infinite; - + @keyframes dots { - 0%, 20% { - color: rgba(0,0,0,0); - text-shadow: - .3em 0 0 rgba(0,0,0,0), - .6em 0 0 rgba(0,0,0,0); + 0%, + 20% { + color: rgba(0, 0, 0, 0); + text-shadow: 0.3em 0 0 rgba(0, 0, 0, 0), + 0.6em 0 0 rgba(0, 0, 0, 0); } 40% { color: white; - text-shadow: - .3em 0 0 rgba(0,0,0,0), - .6em 0 0 rgba(0,0,0,0); + text-shadow: 0.3em 0 0 rgba(0, 0, 0, 0), + 0.6em 0 0 rgba(0, 0, 0, 0); } 60% { - text-shadow: - .3em 0 0 white, - .6em 0 0 rgba(0,0,0,0); + text-shadow: 0.3em 0 0 white, 0.6em 0 0 rgba(0, 0, 0, 0); } - 80%, 100% { - text-shadow: - .3em 0 0 white, - .6em 0 0 white; + 80%, + 100% { + text-shadow: 0.3em 0 0 white, 0.6em 0 0 white; } } } @@ -526,31 +521,28 @@ const CustomButton = styled.button` border: 0; } :after { - content: '.'; + content: "."; animation: link 1s steps(5, end) infinite; - + @keyframes link { - 0%, 20% { - color: rgba(0,0,0,0); - text-shadow: - .3em 0 0 rgba(0,0,0,0), - .6em 0 0 rgba(0,0,0,0); + 0%, + 20% { + color: rgba(0, 0, 0, 0); + text-shadow: 0.3em 0 0 rgba(0, 0, 0, 0), + 0.6em 0 0 rgba(0, 0, 0, 0); } 40% { color: #24272a; - text-shadow: - .3em 0 0 rgba(0,0,0,0), - .6em 0 0 rgba(0,0,0,0); + text-shadow: 0.3em 0 0 rgba(0, 0, 0, 0), + 0.6em 0 0 rgba(0, 0, 0, 0); } 60% { - text-shadow: - .3em 0 0 #24272a, - .6em 0 0 rgba(0,0,0,0); + text-shadow: 0.3em 0 0 #24272a, + 0.6em 0 0 rgba(0, 0, 0, 0); } - 80%, 100% { - text-shadow: - .3em 0 0 #24272a, - .6em 0 0 #24272a; + 80%, + 100% { + text-shadow: 0.3em 0 0 #24272a, 0.6em 0 0 #24272a; } } } @@ -564,10 +556,10 @@ const CustomButton = styled.button` } `; -const FormButton = ({ - children, - type, - color = 'blue', +const FormButton = ({ + children, + type, + color = "blue", disabled = false, onClick, sending = false, @@ -579,28 +571,32 @@ const FormButton = ({ id, trackingId, swapButton, - 'data-test-id': testId, - style + "data-test-id": testId, + style, }) => ( { onClick && onClick(e); - linkTo && (linkTo.toLowerCase().startsWith('http') ? window.open(linkTo, '_blank') : history.push(linkTo)); + linkTo && + (linkTo.toLowerCase().startsWith("http") + ? window.open(linkTo, "_blank") + : history.push(linkTo)); trackingId && Mixpanel.track(trackingId); }} - tabIndex='3' + tabIndex="3" data-test-id={testId} style={style} > - {sending - ? - : children - } + {sending ? ( + + ) : ( + children + )} ); @@ -614,7 +610,7 @@ FormButton.propTypes = { size: PropTypes.string, linkTo: PropTypes.string, className: PropTypes.string, - trackingId: PropTypes.string + trackingId: PropTypes.string, }; export default withRouter(FormButton); diff --git a/packages/frontend/src/components/landing/GuestLanding.js b/packages/frontend/src/components/landing/GuestLanding.js index a3520c47d6..44088778cf 100644 --- a/packages/frontend/src/components/landing/GuestLanding.js +++ b/packages/frontend/src/components/landing/GuestLanding.js @@ -1,18 +1,21 @@ -import React, { useEffect, useState } from 'react'; -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 MintbaseWalletIcon from '../../images/wallet-icons/mintbase-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'; -import WellDoneWalletIcon from '../../images/wallet-icons/welldone-wallet-icon.png'; -import FormButton from '../common/FormButton'; -import { WalletSelectorGetAWallet } from '../common/wallet_selector/WalletSelectorGetAWallet'; -import NavigationWrapperV2 from '../navigation/NavigationWrapperV2'; -import { recordWalletMigrationEvent } from '../wallet-migration/metrics'; +import React, { useEffect, useState, useRef } from "react"; +import { Translate } from "react-localize-redux"; +import styled from "styled-components"; + +import ArrowGrnImage from "../../images/icon-arrow-grn.svg"; +import ArrowWhiteImage from "../../images/icon-arrow-white.svg"; +import HereWalletIcon from "../../images/wallet-icons/here-wallet-icon.png"; +import MeteorWalletIcon from "../../images/wallet-icons/meteor-wallet-icon.png"; +import MintbaseWalletIcon from "../../images/wallet-icons/mintbase-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"; +import WellDoneWalletIcon from "../../images/wallet-icons/welldone-wallet-icon.png"; +import FormButton from "../common/FormButton"; +import { WalletSelectorGetAWallet } from "../common/wallet_selector/WalletSelectorGetAWallet"; +import NavigationWrapperV2 from "../navigation/NavigationWrapperV2"; +import { recordWalletMigrationEvent } from "../wallet-migration/metrics"; import { CardContainer, CardsSection, @@ -32,17 +35,606 @@ import { StyledContainer, TransferSection, TransferSectionWrapper, -} from './GuestLanding.styles'; +} from "./GuestLanding.styles"; + +const CustomButton = styled.button` + &&& { + color: #fff; + margin: ${({ swapButton }) => (swapButton ? 0 : "24px 0 0 0")}; + border: 2px solid; + font-weight: 600; + height: 56px; + border-radius: 30px; + transition: 100ms; + font-size: 14px; + word-break: keep-all; + + :disabled { + cursor: not-allowed; + } + + svg { + width: 16px; + height: 16px; + margin: 0 0 -4px 8px; + } + + &.small { + width: 110px; + height: 36px; + border-radius: 20px; + padding: 0px 0px; + + font-size: 14px; + } + + &.black { + background-color: black; + + :hover { + background-color: #1f1f1f; + } + } + + &.dark-gray { + background-color: #272729; + border-color: #272729; + + :hover { + background-color: black; + } + + :disabled { + background: #e6e6e6; + border-color: #e6e6e6; + opacity: 1 !important; + color: #a2a2a8; + } + } + + &.dark-gray-light-blue { + background-color: #37383c; + border-color: #37383c; + color: #8ebaf0; + + :hover { + background-color: black; + } + + :disabled { + background: #e6e6e6; + border-color: #e6e6e6; + opacity: 1 !important; + color: #a2a2a8; + } + } + + &.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; + color: #3f4045; + + :hover { + background-color: #ececec; + } + + :disabled { + opacity: 0.8; + } + } + + &.light-blue { + background-color: #d6edff; + border: 0; + color: #0072ce; + border-radius: 4px; + + &.small { + padding: 6px 12px; + height: auto; + font-weight: 400 !important; + font-size: 12px; + } + + &.rounded { + border-radius: 50px; + padding: ${({ swapButton }) => + swapButton ? "6px 12px" : "12px 15px"}; + width: auto; + } + + :hover { + color: white; + background-color: #0072ce; + } + + :disabled { + background-color: #f0f0f1; + color: #a2a2a8; + } + } + + &.red { + border-color: #e5484d; + background: #e5484d; + + :disabled { + background: #e6e6e6; + border-color: #e6e6e6; + opacity: 1 !important; + } + :active, + :hover, + :focus { + border-color: #e5484d; + background: #fff; + color: #e5484d; + } + &.dots { + color: #fff; + } + } + &.blue { + border-color: #0072ce; + background: #0072ce; + + :active, + :hover, + :focus { + border-color: #007fe6; + background: #007fe6; + } + :disabled { + background: #e6e6e6; + border-color: #e6e6e6; + opacity: 1 !important; + color: #a2a2a8; + } + } + &.seafoam-blue { + border-color: #6ad1e3; + background: #6ad1e3; + + :disabled { + background: #e6e6e6; + border-color: #e6e6e6; + opacity: 1 !important; + } + :active, + :hover, + :focus { + opacity: 0.8; + } + } + &.seafoam-blue-white { + border-color: #6ad1e3; + background: #fff; + color: #6ad1e3; + + :disabled { + background: #fff; + border-color: #e6e6e6; + opacity: 1 !important; + } + :active, + :hover, + :focus { + 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; + + :disabled { + border-color: #e6e6e6; + background: #e6e6e6; + opacity: 1 !important; + } + :active, + :hover, + :focus { + border-color: #61de8d; + background: #61de8d; + } + } + &.green-dark { + background-color: #00c08b; + color: #00261c; + border: 0; + font-weight: 600 !important; + + :disabled { + opacity: 0.5; + } + + &.border { + color: #008d6a !important; + background-color: #c8f6e0 !important; + border: 2px solid #56bc8f !important; + } + } + &.green-white-arrow { + color: #5ace84; + border-color: #5ace84; + background-color: #fff; + background-image: url(${ArrowGrnImage}); + background-repeat: no-repeat; + background-position: 90% center; + background-size: 14px 20px; + + :disabled { + color: #e6e6e6; + border-color: #e6e6e6; + background: #fff; + opacity: 1 !important; + } + :active, + :hover, + :focus { + color: #fff; + border-color: #61de8d; + background-color: #61de8d; + background-image: url(${ArrowWhiteImage}); + } + } + &.green-pastel { + background-color: #4dd5a6; + color: #00261c; + border: 0; + + :hover { + background-color: #49cc9f; + } + } + &.gray-white { + color: #cccccc; + border-color: #cccccc; + background: #fff; + + :disabled { + border-color: #e6e6e6; + background: #e6e6e6; + opacity: 1 !important; + } + :active, + :hover, + :focus { + color: #fff; + border-color: #cccccc; + background: #cccccc; + } + } + &.gray-red { + color: #ff585d; + border: none; + background-color: #f0f0f1; + :hover, + :active, + :focus { + color: #fff; + background-color: #ff585d; + } + } + &.gray-blue { + color: #0072ce; + border-color: #f0f0f1; + background: #f0f0f1; + + :disabled { + border-color: #e6e6e6; + background: #e6e6e6; + opacity: 1 !important; + } + :active, + :hover, + :focus { + color: #0072ce; + border-color: #f0f0f1; + background: #fff; + } + + &.dark { + border-color: #efefef; + background: #efefef; + } + + &.border { + background: none; + border-color: #e6e5e3; + :hover { + border-color: #0072ce; + } + } + } + &.white-blue { + background-color: white; + border: 0; + color: #0072ce; + + :active, + :hover, + :focus { + color: white; + background: #0072ce; + } + } + &.link { + width: auto !important; + height: auto; + min-height: 50px; + padding: 0; + margin: 0; + border-radius: 0px; + background: none; + border: none; + display: inline; + color: #0072ce; + + :hover, + :focus { + color: #0072ce; + background-color: transparent; + text-decoration: underline; + } + + &.gray { + color: #72727a; + + :hover, + :focus { + color: #72727a; + } + } + + &.light-gray { + color: #a2a2a8; + + :hover, + :focus { + color: #a2a2a8; + } + } + + &.red { + color: #ff585d; + + :disabled { + opacity: 0.8; + background: transparent !important; + } + } + + &.normal { + font-weight: 400; + font-size: 16px; + } + + &.underline { + font-weight: 400; + text-decoration: underline; + + :hover { + text-decoration: none; + } + } + } + + &.dots { + color: #fff; + border-color: #cccccc; + background-color: #cccccc; + cursor: default; + + :active, + :hover, + :focus, + :disabled { + background: #cccccc; + border-color: #cccccc; + } + :after { + content: "."; + animation: dots 1s steps(5, end) infinite; + + @keyframes dots { + 0%, + 20% { + color: rgba(0, 0, 0, 0); + text-shadow: 0.3em 0 0 rgba(0, 0, 0, 0), + 0.6em 0 0 rgba(0, 0, 0, 0); + } + 40% { + color: white; + text-shadow: 0.3em 0 0 rgba(0, 0, 0, 0), + 0.6em 0 0 rgba(0, 0, 0, 0); + } + 60% { + text-shadow: 0.3em 0 0 white, 0.6em 0 0 rgba(0, 0, 0, 0); + } + 80%, + 100% { + text-shadow: 0.3em 0 0 white, 0.6em 0 0 white; + } + } + } + } + + &.link.dots { + color: #24272a; + border: 0; + background-color: transparent; + text-transform: lowercase; + text-decoration: none; + + :active, + :hover, + :focus, + :disabled { + background: transparent; + border: 0; + } + :after { + content: "."; + animation: link 1s steps(5, end) infinite; + + @keyframes link { + 0%, + 20% { + color: rgba(0, 0, 0, 0); + text-shadow: 0.3em 0 0 rgba(0, 0, 0, 0), + 0.6em 0 0 rgba(0, 0, 0, 0); + } + 40% { + color: #24272a; + text-shadow: 0.3em 0 0 rgba(0, 0, 0, 0), + 0.6em 0 0 rgba(0, 0, 0, 0); + } + 60% { + text-shadow: 0.3em 0 0 #24272a, + 0.6em 0 0 rgba(0, 0, 0, 0); + } + 80%, + 100% { + text-shadow: 0.3em 0 0 #24272a, 0.6em 0 0 #24272a; + } + } + } + } + &.bold { + font-weight: 500; + } + @media screen and (max-width: 767px) { + width: 100%; + } + } +`; + +const Pattern = styled.div` + width: 100%; + min-height: 540px; + display: flex; + align-items: center; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGeSURBVHgB7doxTisxEAbgeY/mvQro6NiSDo6QkpJbcA2OwjWooKQMJ2DpKENJBV7FEYoBeQSIZr9PGk2cItWvsdfZnSBjKHVf6rnUbdD1N8g4K7VX6jhIEaycofaTIEWwcoam0yFYOYe179WiQ7Byhk8+8wnB6munlHNWgmD1tUGyFSYIVl8bJFcOCYLV106s/aBrJ2hNE+qo1GmpRanz2J5aB6X+x/oQv/l+FWz5E/O1iHU4pom0W/u0/uoZahnrgN2VGuv6Jpidl1+o2T5BznkrfKj9MdZT6l9836r+3k2pq1KXMVNz3gpbU7hOmj49AQ7x/lJ0WWsK5xhv2+AYkHQR29vbddDluqFvbNZPQZdg9S07az4gWH3tHZVgJQhW3xjb4XIZyo+Z3nffHN79CZ1gYuXc1b4KEytFsHLGptMhWDlj7Q9BimDlbJ4Ex4AftggHdwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIpXoUVLSWulnzoAAAAASUVORK5CYII="); + background-size: 75px 75px; + background-repeat: repeat; + background-position: center top; + + @media (max-width: 900px) { + min-height: 390px; + } +`; + +const PatternContent = styled.div` + padding: 1rem; + max-width: 496px; + margin: 0 auto; + background-color: var(--background-color); + display: flex; + align-items: center; + min-height: 260px; + + @media (max-width: 900px) { + min-height: 0px; + } +`; export function GuestLanding({ history, accountFound, onTransfer }) { const [walletSelectorModal, setWalletSelectorModal] = useState(); const [showModal, setShowModal] = useState(); + const ref = useRef(null); + console.log("accountFound", accountFound); + useEffect(() => { - recordWalletMigrationEvent('LANDING_PAGE'); + recordWalletMigrationEvent("LANDING_PAGE"); }, []); + const scrollToWalletSection = () => { + ref.current?.scrollIntoView({ + behavior: "smooth", + block: "start", + }); + const elementTop = ref.current.getBoundingClientRect().top; + + const offset = 100; + window.scrollBy({ top: elementTop - offset, behavior: "smooth" }); + }; + return ( <> @@ -53,7 +645,7 @@ export function GuestLanding({ history, accountFound, onTransfer }) { } setShowModal={(modal) => { setShowModal(null); - if (modal === 'wallet-selector') { + if (modal === "wallet-selector") { walletSelectorModal.show(); } }} @@ -71,15 +663,15 @@ export function GuestLanding({ history, accountFound, onTransfer }) { { - recordWalletMigrationEvent('click', { + recordWalletMigrationEvent("click", { element: { - type: 'button', - description: 'Learn More', + type: "button", + description: "Learn More", }, }); window.open( - 'https://medium.com/nearprotocol/near-opens-the-door-to-more-wallets-255eee58eb97', - '_blank' + "https://medium.com/nearprotocol/near-opens-the-door-to-more-wallets-255eee58eb97", + "_blank" ); }} className="dark-gray-transparent" @@ -89,7 +681,7 @@ export function GuestLanding({ history, accountFound, onTransfer }) { > - {accountFound && ( + {accountFound ? ( + ) : ( + + + )} { window.open( - 'https://near.org/', - '_blank' + "https://near.org/", + "_blank" ); }} className="dark-gray-transparent" @@ -137,15 +739,15 @@ export function GuestLanding({ history, accountFound, onTransfer }) {
{ - recordWalletMigrationEvent('click', { + recordWalletMigrationEvent("click", { element: { - type: 'button', - description: 'Learn More', + type: "button", + description: "Learn More", }, }); window.open( - 'https://medium.com/nearprotocol/near-opens-the-door-to-more-wallets-255eee58eb97', - '_blank' + "https://medium.com/nearprotocol/near-opens-the-door-to-more-wallets-255eee58eb97", + "_blank" ); }} className="dark-gray-transparent" @@ -167,13 +769,13 @@ export function GuestLanding({ history, accountFound, onTransfer }) {

{ - recordWalletMigrationEvent('click', { + recordWalletMigrationEvent("click", { element: { - type: 'button', - description: 'Transfer Guide', + type: "button", + description: "Transfer Guide", }, }); - history.push('/transfer-wizard'); + history.push("/transfer-wizard"); }} className="dark-gray-transparent" color="dark-gray-transparent" @@ -187,35 +789,37 @@ export function GuestLanding({ history, accountFound, onTransfer }) {
- - - - {accountFound ? ( - - {accountFound ? ( - - ) : ( +
+ + + + {accountFound ? ( + + {accountFound ? ( + + ) : ( + + )} + + ) : ( + - )} - - ) : ( - - - - )} + + )} +
{ - recordWalletMigrationEvent('click', { + recordWalletMigrationEvent("click", { element: { - type: 'button', - description: 'Compare Wallets', + type: "button", + description: "Compare Wallets", }, }); window.open( - 'https://docs.google.com/spreadsheets/d/1JeF9ZKmg1IHvTlgIv0ymGNMIeps6khcr3ElfIpEJHGs/edit#gid=0', - '_blank' + "https://docs.google.com/spreadsheets/d/1JeF9ZKmg1IHvTlgIv0ymGNMIeps6khcr3ElfIpEJHGs/edit#gid=0", + "_blank" ); }} className="dark-gray-transparent" @@ -233,10 +837,10 @@ export function GuestLanding({ history, accountFound, onTransfer }) { href="https://mynearwallet.com" target="_blank" onClick={() => { - recordWalletMigrationEvent('click', { + recordWalletMigrationEvent("click", { element: { - type: 'link', - description: 'MyNearWallet Wallet', + type: "link", + description: "MyNearWallet Wallet", }, }); }} @@ -254,10 +858,10 @@ export function GuestLanding({ history, accountFound, onTransfer }) { href="https://wallet.meteorwallet.app" target="_blank" onClick={() => { - recordWalletMigrationEvent('click', { + recordWalletMigrationEvent("click", { element: { - type: 'link', - description: 'Meteor Wallet', + type: "link", + description: "Meteor Wallet", }, }); }} @@ -275,10 +879,10 @@ export function GuestLanding({ history, accountFound, onTransfer }) { href="https://sender.org" target="_blank" onClick={() => { - recordWalletMigrationEvent('click', { + recordWalletMigrationEvent("click", { element: { - type: 'link', - description: 'Sender Wallet', + type: "link", + description: "Sender Wallet", }, }); }} @@ -296,10 +900,10 @@ export function GuestLanding({ history, accountFound, onTransfer }) { href="https://www.herewallet.app" target="_blank" onClick={() => { - recordWalletMigrationEvent('click', { + recordWalletMigrationEvent("click", { element: { - type: 'link', - description: 'HERE Wallet', + type: "link", + description: "HERE Wallet", }, }); }} @@ -317,10 +921,10 @@ export function GuestLanding({ history, accountFound, onTransfer }) { href="https://wallet.nightly.app/download" target="_blank" onClick={() => { - recordWalletMigrationEvent('click', { + recordWalletMigrationEvent("click", { element: { - type: 'link', - description: 'Nightly Wallet', + type: "link", + description: "Nightly Wallet", }, }); }} @@ -338,10 +942,10 @@ export function GuestLanding({ history, accountFound, onTransfer }) { href="https://welldonestudio.io/" target="_blank" onClick={() => { - recordWalletMigrationEvent('click', { + recordWalletMigrationEvent("click", { element: { - type: 'link', - description: 'WELLDONE Wallet', + type: "link", + description: "WELLDONE Wallet", }, }); }} @@ -359,10 +963,10 @@ export function GuestLanding({ history, accountFound, onTransfer }) { href="https://nearmobile.app/" target="_blank" onClick={() => { - recordWalletMigrationEvent('click', { + recordWalletMigrationEvent("click", { element: { - type: 'link', - description: 'NEAR Mobile', + type: "link", + description: "NEAR Mobile", }, }); }} @@ -380,15 +984,14 @@ export function GuestLanding({ history, accountFound, onTransfer }) { href="https://wallet.mintbase.xyz" target="_blank" onClick={() => { - recordWalletMigrationEvent('click', { + recordWalletMigrationEvent("click", { element: { - type: 'link', - description: 'Mintbase Wallet', + type: "link", + description: "Mintbase Wallet", }, }); }} > - meteor-wallet-icon props.accountFound ? '430px' : '100%'}; - padding-bottom: 48px; - @media(max-width: 768px) { - max-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; - } + 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` @@ -318,11 +321,11 @@ export const FormButtonContainer = styled.div` text-align: right; min-width: 500px; - @media(max-width: 1352px) { + @media (max-width: 1352px) { min-width: 300px; } - @media(max-width: 768px) { + @media (max-width: 768px) { min-width: 100%; } `; @@ -335,8 +338,8 @@ export const CardsSection = styled.div` export const CardContainer = styled.div` display: grid; grid-template-columns: repeat(3, 1fr); - grid-auto-rows: minmax(100px, auto); - gap: 24px; + grid-auto-rows: minmax(100px, auto); + gap: 24px; min-width: 300px; @media (max-width: 600px) { grid-template-columns: 1fr; @@ -344,30 +347,30 @@ export const CardContainer = styled.div` `; 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; + border: 1px solid #1b1b18; + transition: all 0.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; - } + 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; @@ -381,9 +384,9 @@ export const SingleCard = styled.a` `; export const TransferSection = styled.div` background-color: #000000; - color: #FFFFFF; + color: #ffffff; padding: 80px 0; - @media(max-width: 768px) { + @media (max-width: 768px) { padding: 50px 30px; } `; @@ -392,31 +395,31 @@ export const TransferSectionWrapper = styled.div` display: flex; justify-content: space-between; align-items: end; - @media(max-width: 768px) { + @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; + 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; + 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; + display: flex; + justify-content: space-between; + gap: 24px; `; diff --git a/packages/frontend/src/translations/en.global.json b/packages/frontend/src/translations/en.global.json index a2c1caf5fe..9e1d1486f4 100644 --- a/packages/frontend/src/translations/en.global.json +++ b/packages/frontend/src/translations/en.global.json @@ -283,6 +283,7 @@ "enable": "Enable", "enabling": "Enabling", "exploreNEAR": "Explore NEAR", + "exploreWallets": "Explore Wallets", "findMyAccount": "Find My Account", "finish": "Finish", "fundWith": "Fund with", @@ -2027,4 +2028,4 @@ "title": "Your account is now active!" } } -} \ No newline at end of file +} diff --git a/packages/frontend/src/translations/it.global.json b/packages/frontend/src/translations/it.global.json index 25efb71f1e..e15aaa137b 100644 --- a/packages/frontend/src/translations/it.global.json +++ b/packages/frontend/src/translations/it.global.json @@ -225,6 +225,7 @@ "enable": "Abilita", "enabling": "Abilitando", "exploreNEAR": "Esplora NEAR", + "exploreWallets": "Esplora Wallets", "findMyAccount": "Trova il mio Account", "finish": "Completo", "fundWith": "Deposita con", diff --git a/packages/frontend/src/translations/kr.global.json b/packages/frontend/src/translations/kr.global.json index 438c318e24..6d10dabc9b 100644 --- a/packages/frontend/src/translations/kr.global.json +++ b/packages/frontend/src/translations/kr.global.json @@ -283,6 +283,7 @@ "enable": "활성화", "enabling": "활성화 중", "exploreNEAR": "NEAR 탐색", + "exploreWallets": "Wallets 탐색", "findMyAccount": "계정 찾기", "finish": "완료", "fundWith": "Fund with", @@ -1901,7 +1902,7 @@ "removeDesc": "이메일과 SMS 복구 방법, 이전 복구 구문, NEAR CLI에서 생성된 Full 액세스 키", "removeKeys": "키 제거", "title": "Full 액세스 키 비워내기", - "verifyPassphrase": { + "verifyPassphrase": { "desc": "복구 구문을 입력하여 다음 계정의 Full 액세스 키를 삭제하십시오: ${accountId}", "keyMessages": { "doesNotExist": "입력된 시드 문구에 부합하는 ${accountId}의 Full 액세스 키가 존재하지 않습니다.", @@ -1983,4 +1984,4 @@ "title": "이제 계정이 활성화되었습니다!" } } -} \ No newline at end of file +} diff --git a/packages/frontend/src/translations/pt.global.json b/packages/frontend/src/translations/pt.global.json index 8ad10cc3dd..15e1552877 100644 --- a/packages/frontend/src/translations/pt.global.json +++ b/packages/frontend/src/translations/pt.global.json @@ -228,6 +228,7 @@ "enable": "Ativar", "enabling": "Ativando", "exploreNEAR": "Explorar NEAR", + "exploreWallet": "Explorar Wallets", "findMyAccount": "Encontrar Minha Conta", "finish": "Finalizar", "fundWith": "Adicionar Fundos", diff --git a/packages/frontend/src/translations/ru.global.json b/packages/frontend/src/translations/ru.global.json index d466803133..c87d611e6c 100644 --- a/packages/frontend/src/translations/ru.global.json +++ b/packages/frontend/src/translations/ru.global.json @@ -182,7 +182,7 @@ "title": "Добро пожаловать в MyNearWallet!", "desc": "Введите ваш пароль для переноса аккаунтов:", "placeholder": "2cCzKMPiCkFnF5mGbJcPgTGNykvxK4f3xyNAio4q931b", - "confirmCaption": "Подтвердить пароль", + "confirmCaption": "Подтвердить пароль" }, "importScreen": { "desc": "Начните перенос и подтвердите каждую учетную запись
при появлении соответствующего запроса.", @@ -231,6 +231,7 @@ "enable": "Включить", "enabling": "Включение", "exploreNEAR": "Исследовать NEAR", + "exploreWallet": "Исследовать Wallets", "findMyAccount": "НАЙТИ УЧЕТНУЮ ЗАПИСЬ", "finish": "Закончить", "goBack": "Вернуться назад", @@ -756,7 +757,7 @@ }, "title": "Метод восстановления", "unsupportedMethodEmail": "Мы прекращаем поддержку метода восстановления аккаунта с помощью email. Отключив этот способ, вы больше не сможете подключить его обратно", - "unsupportedMethodPhone": "Мы прекращаем поддержку метода восстановления аккаунта с помощью SMS. Отключив этот способ, вы больше не сможете подключить его обратно", + "unsupportedMethodPhone": "Мы прекращаем поддержку метода восстановления аккаунта с помощью SMS. Отключив этот способ, вы больше не сможете подключить его обратно" }, "reduxActions": { "ADD_ACCESS_KEY": { diff --git a/packages/frontend/src/translations/tr.global.json b/packages/frontend/src/translations/tr.global.json index d4b3f58fd8..8ebaaad753 100644 --- a/packages/frontend/src/translations/tr.global.json +++ b/packages/frontend/src/translations/tr.global.json @@ -209,6 +209,7 @@ "enable": "Etkinleştir", "enabling": "Etkinleştiriliyor", "exploreNEAR": "NEAR'ı Keşfet", + "exploreWallets": "Cüzdanları Keşfet", "findMyAccount": "Hesabımı Bul", "finish": "Bitiş", "fundWith": "-ile Yatır", diff --git a/packages/frontend/src/translations/ua.global.json b/packages/frontend/src/translations/ua.global.json index d142c4b015..238be5be08 100644 --- a/packages/frontend/src/translations/ua.global.json +++ b/packages/frontend/src/translations/ua.global.json @@ -226,6 +226,7 @@ "enable": "Увімкнути", "enabling": "Увімкнення", "exploreNEAR": "Досліджуйте NEAR", + "exploreWallet": "Досліджуйте Wallets", "findMyAccount": "Знайти свій акаунт", "finish": "Завершити", "fundWith": "Поповнити через", diff --git a/packages/frontend/src/translations/vi.global.json b/packages/frontend/src/translations/vi.global.json index 1bf1180131..38053b30cc 100644 --- a/packages/frontend/src/translations/vi.global.json +++ b/packages/frontend/src/translations/vi.global.json @@ -207,6 +207,7 @@ "enable": "Bật", "enabling": "Đang bật", "exploreNEAR": "Khám phá NEAR", + "exploreWallets": "Khám phá Wallets", "findMyAccount": "Tìm tài khoản của tôi", "finish": "Hoàn thành", "goBack": "Quay lại", diff --git a/packages/frontend/src/translations/zh-hans.global.json b/packages/frontend/src/translations/zh-hans.global.json index f03377f314..a6501da726 100644 --- a/packages/frontend/src/translations/zh-hans.global.json +++ b/packages/frontend/src/translations/zh-hans.global.json @@ -276,6 +276,7 @@ "enable": "启用", "enabling": "正在开启", "exploreNEAR": "探索NEAR", + "exploreWallet": "探索Wallets", "findMyAccount": "查找我的账户", "finish": "完成", "fundWith": "充值", diff --git a/packages/frontend/src/translations/zh-hant.global.json b/packages/frontend/src/translations/zh-hant.global.json index f5aa6e0922..f4cac65ea1 100644 --- a/packages/frontend/src/translations/zh-hant.global.json +++ b/packages/frontend/src/translations/zh-hant.global.json @@ -275,7 +275,8 @@ "edit": "編輯", "enable": "啟用", "enabling": "正在開啟", - "exploreNEAR":"探索NEAR", + "exploreNEAR": "探索NEAR", + "exploreWallet": "探索Wallets", "findMyAccount": "查找我的賬戶", "finish": "完成", "fundWith": "充值", From 262748d67cd992bd06c109ad802aa6bc089eaff0 Mon Sep 17 00:00:00 2001 From: "jackson@near.org" Date: Wed, 17 Apr 2024 21:22:26 -0700 Subject: [PATCH 2/3] chore: clean up console logs and unused styles --- .../src/components/landing/GuestLanding.js | 30 ------------------- 1 file changed, 30 deletions(-) diff --git a/packages/frontend/src/components/landing/GuestLanding.js b/packages/frontend/src/components/landing/GuestLanding.js index 44088778cf..830280b100 100644 --- a/packages/frontend/src/components/landing/GuestLanding.js +++ b/packages/frontend/src/components/landing/GuestLanding.js @@ -584,41 +584,11 @@ const CustomButton = styled.button` } `; -const Pattern = styled.div` - width: 100%; - min-height: 540px; - display: flex; - align-items: center; - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGeSURBVHgB7doxTisxEAbgeY/mvQro6NiSDo6QkpJbcA2OwjWooKQMJ2DpKENJBV7FEYoBeQSIZr9PGk2cItWvsdfZnSBjKHVf6rnUbdD1N8g4K7VX6jhIEaycofaTIEWwcoam0yFYOYe179WiQ7Byhk8+8wnB6munlHNWgmD1tUGyFSYIVl8bJFcOCYLV106s/aBrJ2hNE+qo1GmpRanz2J5aB6X+x/oQv/l+FWz5E/O1iHU4pom0W/u0/uoZahnrgN2VGuv6Jpidl1+o2T5BznkrfKj9MdZT6l9836r+3k2pq1KXMVNz3gpbU7hOmj49AQ7x/lJ0WWsK5xhv2+AYkHQR29vbddDluqFvbNZPQZdg9S07az4gWH3tHZVgJQhW3xjb4XIZyo+Z3nffHN79CZ1gYuXc1b4KEytFsHLGptMhWDlj7Q9BimDlbJ4Ex4AftggHdwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIpXoUVLSWulnzoAAAAASUVORK5CYII="); - background-size: 75px 75px; - background-repeat: repeat; - background-position: center top; - - @media (max-width: 900px) { - min-height: 390px; - } -`; - -const PatternContent = styled.div` - padding: 1rem; - max-width: 496px; - margin: 0 auto; - background-color: var(--background-color); - display: flex; - align-items: center; - min-height: 260px; - - @media (max-width: 900px) { - min-height: 0px; - } -`; - export function GuestLanding({ history, accountFound, onTransfer }) { const [walletSelectorModal, setWalletSelectorModal] = useState(); const [showModal, setShowModal] = useState(); const ref = useRef(null); - console.log("accountFound", accountFound); useEffect(() => { recordWalletMigrationEvent("LANDING_PAGE"); From 4fca856a099dfff9e14f1fd7262073b4edcfe5b0 Mon Sep 17 00:00:00 2001 From: "jackson@near.org" Date: Wed, 17 Apr 2024 21:39:46 -0700 Subject: [PATCH 3/3] chore: run linter --- .../src/components/common/FormButton.js | 32 ++-- .../src/components/landing/GuestLanding.js | 142 +++++++++--------- .../components/landing/GuestLanding.styles.js | 6 +- 3 files changed, 90 insertions(+), 90 deletions(-) diff --git a/packages/frontend/src/components/common/FormButton.js b/packages/frontend/src/components/common/FormButton.js index a1d935570b..13904371bf 100644 --- a/packages/frontend/src/components/common/FormButton.js +++ b/packages/frontend/src/components/common/FormButton.js @@ -1,18 +1,18 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Translate } from "react-localize-redux"; -import { withRouter } from "react-router"; -import styled from "styled-components"; +import PropTypes from 'prop-types'; +import React from 'react'; +import { Translate } from 'react-localize-redux'; +import { withRouter } from 'react-router'; +import styled from 'styled-components'; -import ArrowGrnImage from "../../images/icon-arrow-grn.svg"; -import ArrowWhiteImage from "../../images/icon-arrow-white.svg"; -import { Mixpanel } from "../../mixpanel/index"; -import classNames from "../../utils/classNames"; +import ArrowGrnImage from '../../images/icon-arrow-grn.svg'; +import ArrowWhiteImage from '../../images/icon-arrow-white.svg'; +import { Mixpanel } from '../../mixpanel/index'; +import classNames from '../../utils/classNames'; const CustomButton = styled.button` &&& { color: #fff; - margin: ${({ swapButton }) => (swapButton ? 0 : "24px 0 0 0")}; + margin: ${({ swapButton }) => (swapButton ? 0 : '24px 0 0 0')}; border: 2px solid; font-weight: 600; height: 56px; @@ -128,7 +128,7 @@ const CustomButton = styled.button` &.rounded { border-radius: 50px; padding: ${({ swapButton }) => - swapButton ? "6px 12px" : "12px 15px"}; + swapButton ? '6px 12px' : '12px 15px'}; width: auto; } @@ -559,7 +559,7 @@ const CustomButton = styled.button` const FormButton = ({ children, type, - color = "blue", + color = 'blue', disabled = false, onClick, sending = false, @@ -571,7 +571,7 @@ const FormButton = ({ id, trackingId, swapButton, - "data-test-id": testId, + 'data-test-id': testId, style, }) => ( { onClick && onClick(e); linkTo && - (linkTo.toLowerCase().startsWith("http") - ? window.open(linkTo, "_blank") + (linkTo.toLowerCase().startsWith('http') + ? window.open(linkTo, '_blank') : history.push(linkTo)); trackingId && Mixpanel.track(trackingId); }} @@ -593,7 +593,7 @@ const FormButton = ({ style={style} > {sending ? ( - + ) : ( children )} diff --git a/packages/frontend/src/components/landing/GuestLanding.js b/packages/frontend/src/components/landing/GuestLanding.js index 830280b100..cf6a283113 100644 --- a/packages/frontend/src/components/landing/GuestLanding.js +++ b/packages/frontend/src/components/landing/GuestLanding.js @@ -1,21 +1,21 @@ -import React, { useEffect, useState, useRef } from "react"; -import { Translate } from "react-localize-redux"; -import styled from "styled-components"; - -import ArrowGrnImage from "../../images/icon-arrow-grn.svg"; -import ArrowWhiteImage from "../../images/icon-arrow-white.svg"; -import HereWalletIcon from "../../images/wallet-icons/here-wallet-icon.png"; -import MeteorWalletIcon from "../../images/wallet-icons/meteor-wallet-icon.png"; -import MintbaseWalletIcon from "../../images/wallet-icons/mintbase-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"; -import WellDoneWalletIcon from "../../images/wallet-icons/welldone-wallet-icon.png"; -import FormButton from "../common/FormButton"; -import { WalletSelectorGetAWallet } from "../common/wallet_selector/WalletSelectorGetAWallet"; -import NavigationWrapperV2 from "../navigation/NavigationWrapperV2"; -import { recordWalletMigrationEvent } from "../wallet-migration/metrics"; +import React, { useEffect, useState, useRef } from 'react'; +import { Translate } from 'react-localize-redux'; +import styled from 'styled-components'; + +import ArrowGrnImage from '../../images/icon-arrow-grn.svg'; +import ArrowWhiteImage from '../../images/icon-arrow-white.svg'; +import HereWalletIcon from '../../images/wallet-icons/here-wallet-icon.png'; +import MeteorWalletIcon from '../../images/wallet-icons/meteor-wallet-icon.png'; +import MintbaseWalletIcon from '../../images/wallet-icons/mintbase-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'; +import WellDoneWalletIcon from '../../images/wallet-icons/welldone-wallet-icon.png'; +import FormButton from '../common/FormButton'; +import { WalletSelectorGetAWallet } from '../common/wallet_selector/WalletSelectorGetAWallet'; +import NavigationWrapperV2 from '../navigation/NavigationWrapperV2'; +import { recordWalletMigrationEvent } from '../wallet-migration/metrics'; import { CardContainer, CardsSection, @@ -35,12 +35,12 @@ import { StyledContainer, TransferSection, TransferSectionWrapper, -} from "./GuestLanding.styles"; +} from './GuestLanding.styles'; const CustomButton = styled.button` &&& { color: #fff; - margin: ${({ swapButton }) => (swapButton ? 0 : "24px 0 0 0")}; + margin: ${({ swapButton }) => (swapButton ? 0 : '24px 0 0 0')}; border: 2px solid; font-weight: 600; height: 56px; @@ -156,7 +156,7 @@ const CustomButton = styled.button` &.rounded { border-radius: 50px; padding: ${({ swapButton }) => - swapButton ? "6px 12px" : "12px 15px"}; + swapButton ? '6px 12px' : '12px 15px'}; width: auto; } @@ -591,18 +591,18 @@ export function GuestLanding({ history, accountFound, onTransfer }) { const ref = useRef(null); useEffect(() => { - recordWalletMigrationEvent("LANDING_PAGE"); + recordWalletMigrationEvent('LANDING_PAGE'); }, []); const scrollToWalletSection = () => { ref.current?.scrollIntoView({ - behavior: "smooth", - block: "start", + behavior: 'smooth', + block: 'start', }); const elementTop = ref.current.getBoundingClientRect().top; const offset = 100; - window.scrollBy({ top: elementTop - offset, behavior: "smooth" }); + window.scrollBy({ top: elementTop - offset, behavior: 'smooth' }); }; return ( @@ -615,7 +615,7 @@ export function GuestLanding({ history, accountFound, onTransfer }) { } setShowModal={(modal) => { setShowModal(null); - if (modal === "wallet-selector") { + if (modal === 'wallet-selector') { walletSelectorModal.show(); } }} @@ -633,15 +633,15 @@ export function GuestLanding({ history, accountFound, onTransfer }) { { - recordWalletMigrationEvent("click", { + recordWalletMigrationEvent('click', { element: { - type: "button", - description: "Learn More", + type: 'button', + description: 'Learn More', }, }); window.open( - "https://medium.com/nearprotocol/near-opens-the-door-to-more-wallets-255eee58eb97", - "_blank" + 'https://medium.com/nearprotocol/near-opens-the-door-to-more-wallets-255eee58eb97', + '_blank' ); }} className="dark-gray-transparent" @@ -675,8 +675,8 @@ export function GuestLanding({ history, accountFound, onTransfer }) { { window.open( - "https://near.org/", - "_blank" + 'https://near.org/', + '_blank' ); }} className="dark-gray-transparent" @@ -709,15 +709,15 @@ export function GuestLanding({ history, accountFound, onTransfer }) {
{ - recordWalletMigrationEvent("click", { + recordWalletMigrationEvent('click', { element: { - type: "button", - description: "Learn More", + type: 'button', + description: 'Learn More', }, }); window.open( - "https://medium.com/nearprotocol/near-opens-the-door-to-more-wallets-255eee58eb97", - "_blank" + 'https://medium.com/nearprotocol/near-opens-the-door-to-more-wallets-255eee58eb97', + '_blank' ); }} className="dark-gray-transparent" @@ -739,13 +739,13 @@ export function GuestLanding({ history, accountFound, onTransfer }) {

{ - recordWalletMigrationEvent("click", { + recordWalletMigrationEvent('click', { element: { - type: "button", - description: "Transfer Guide", + type: 'button', + description: 'Transfer Guide', }, }); - history.push("/transfer-wizard"); + history.push('/transfer-wizard'); }} className="dark-gray-transparent" color="dark-gray-transparent" @@ -781,15 +781,15 @@ export function GuestLanding({ history, accountFound, onTransfer }) { { - recordWalletMigrationEvent("click", { + recordWalletMigrationEvent('click', { element: { - type: "button", - description: "Compare Wallets", + type: 'button', + description: 'Compare Wallets', }, }); window.open( - "https://docs.google.com/spreadsheets/d/1JeF9ZKmg1IHvTlgIv0ymGNMIeps6khcr3ElfIpEJHGs/edit#gid=0", - "_blank" + 'https://docs.google.com/spreadsheets/d/1JeF9ZKmg1IHvTlgIv0ymGNMIeps6khcr3ElfIpEJHGs/edit#gid=0', + '_blank' ); }} className="dark-gray-transparent" @@ -807,10 +807,10 @@ export function GuestLanding({ history, accountFound, onTransfer }) { href="https://mynearwallet.com" target="_blank" onClick={() => { - recordWalletMigrationEvent("click", { + recordWalletMigrationEvent('click', { element: { - type: "link", - description: "MyNearWallet Wallet", + type: 'link', + description: 'MyNearWallet Wallet', }, }); }} @@ -828,10 +828,10 @@ export function GuestLanding({ history, accountFound, onTransfer }) { href="https://wallet.meteorwallet.app" target="_blank" onClick={() => { - recordWalletMigrationEvent("click", { + recordWalletMigrationEvent('click', { element: { - type: "link", - description: "Meteor Wallet", + type: 'link', + description: 'Meteor Wallet', }, }); }} @@ -849,10 +849,10 @@ export function GuestLanding({ history, accountFound, onTransfer }) { href="https://sender.org" target="_blank" onClick={() => { - recordWalletMigrationEvent("click", { + recordWalletMigrationEvent('click', { element: { - type: "link", - description: "Sender Wallet", + type: 'link', + description: 'Sender Wallet', }, }); }} @@ -870,10 +870,10 @@ export function GuestLanding({ history, accountFound, onTransfer }) { href="https://www.herewallet.app" target="_blank" onClick={() => { - recordWalletMigrationEvent("click", { + recordWalletMigrationEvent('click', { element: { - type: "link", - description: "HERE Wallet", + type: 'link', + description: 'HERE Wallet', }, }); }} @@ -891,10 +891,10 @@ export function GuestLanding({ history, accountFound, onTransfer }) { href="https://wallet.nightly.app/download" target="_blank" onClick={() => { - recordWalletMigrationEvent("click", { + recordWalletMigrationEvent('click', { element: { - type: "link", - description: "Nightly Wallet", + type: 'link', + description: 'Nightly Wallet', }, }); }} @@ -912,10 +912,10 @@ export function GuestLanding({ history, accountFound, onTransfer }) { href="https://welldonestudio.io/" target="_blank" onClick={() => { - recordWalletMigrationEvent("click", { + recordWalletMigrationEvent('click', { element: { - type: "link", - description: "WELLDONE Wallet", + type: 'link', + description: 'WELLDONE Wallet', }, }); }} @@ -933,10 +933,10 @@ export function GuestLanding({ history, accountFound, onTransfer }) { href="https://nearmobile.app/" target="_blank" onClick={() => { - recordWalletMigrationEvent("click", { + recordWalletMigrationEvent('click', { element: { - type: "link", - description: "NEAR Mobile", + type: 'link', + description: 'NEAR Mobile', }, }); }} @@ -954,10 +954,10 @@ export function GuestLanding({ history, accountFound, onTransfer }) { href="https://wallet.mintbase.xyz" target="_blank" onClick={() => { - recordWalletMigrationEvent("click", { + recordWalletMigrationEvent('click', { element: { - type: "link", - description: "Mintbase Wallet", + type: 'link', + description: 'Mintbase Wallet', }, }); }} diff --git a/packages/frontend/src/components/landing/GuestLanding.styles.js b/packages/frontend/src/components/landing/GuestLanding.styles.js index 1c2c0a8841..3b82d14af5 100644 --- a/packages/frontend/src/components/landing/GuestLanding.styles.js +++ b/packages/frontend/src/components/landing/GuestLanding.styles.js @@ -1,6 +1,6 @@ -import styled from "styled-components"; +import styled from 'styled-components'; -import PlusIcon from "../../images/plus-icon.png"; +import PlusIcon from '../../images/plus-icon.png'; export const StyledContainer = styled.div` background-image: url(${PlusIcon}); @@ -279,7 +279,7 @@ export const FlexItem = styled.div` line-height: 150%; letter-spacing: 0.32px; color: #000000; - max-width: ${(props) => (props.accountFound ? "430px" : "100%")}; + max-width: ${(props) => (props.accountFound ? '430px' : '100%')}; padding-bottom: 48px; @media (max-width: 768px) { max-width: 100%;