Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Landing page improvements & redesign #3143

Merged
merged 23 commits into from
Nov 19, 2024
Merged

Landing page improvements & redesign #3143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
1017ef3
fix: remove comparison button
thisisjoshford Nov 13, 2024
622fd3c
fix: remove xfer wizard from guest landing
thisisjoshford Nov 13, 2024
d57b46a
fix: remove unused elements
thisisjoshford Nov 13, 2024
978d749
fix: promote wallets to top of page
thisisjoshford Nov 13, 2024
c8d1106
fix: update caniuse-lite
thisisjoshford Nov 13, 2024
887c4a7
fix: remove explore
thisisjoshford Nov 13, 2024
95b36cd
fix: remove duplicate blogpost copy & button
thisisjoshford Nov 13, 2024
fc9697d
fix: remove bottom section
thisisjoshford Nov 13, 2024
31ff755
fix: remove unused imports
thisisjoshford Nov 13, 2024
cc293f1
fix: reorder wallets per request
thisisjoshford Nov 13, 2024
9bff31e
fix: remove nav wrapper and footer
thisisjoshford Nov 13, 2024
3fb11cd
fix: route all to GuestLanding
thisisjoshford Nov 13, 2024
dfe6f2e
fix: remove network banners and wallet creation
thisisjoshford Nov 13, 2024
eccf3f1
fix: remove migration banners
thisisjoshford Nov 13, 2024
ccf0a1b
fix: add note to keep recovery path
thisisjoshford Nov 13, 2024
f3a70c7
fix: remove ledger
thisisjoshford Nov 13, 2024
50e26be
fix: remove token polling
thisisjoshford Nov 13, 2024
db14aa3
fix: use near logo favicon and remove scroll to top
thisisjoshford Nov 13, 2024
b8791c9
fix: remove nav wrappper and formatting
thisisjoshford Nov 14, 2024
8bcb96d
feat: improve wallet migration instructions
thisisjoshford Nov 14, 2024
d60d216
feat: add eth & hot wallet cards
thisisjoshford Nov 19, 2024
8074b1f
feat: add eth & hot wallet cards
thisisjoshford Nov 19, 2024
54c8e95
feat: add near logo with link
thisisjoshford Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
"scripts": {
"predeploy": "yarn build",
"update:static": "cp src/wasm/multisig.wasm dist/multisig.wasm && cp src/wasm/main.wasm dist/main.wasm && cp src/wasm/state_cleanup.wasm dist/state_cleanup.wasm",
"start": "yarn update:static; parcel src/index.html --https --cert devServerCertificates/primary.crt --key devServerCertificates/private.pem",
"start": "NEAR_WALLET_ENV=development yarn update:static; parcel src/index.html --https --cert devServerCertificates/primary.crt --key devServerCertificates/private.pem",
"prebuild": "rm -rf dist/",
"build": "yarn run bundle && yarn run sentry",
"bundle": "NODE_ENV=production node ci/runBundler.js",
Expand Down
244 changes: 28 additions & 216 deletions packages/frontend/src/components/Routing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,14 @@ import { connect } from 'react-redux';
import { Redirect, Switch } from 'react-router-dom';
import styled, { ThemeProvider } from 'styled-components';

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,
} from '../config';
import { WEB3AUTH } from '../../../../features';
import NEARLogo from '../../src/images/near-logo.svg';
import { PUBLIC_URL } from '../config';
import { isWhitelabel } from '../config/whitelabel';
import { Mixpanel } from '../mixpanel/index';
import * as accountActions from '../redux/actions/account';
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 { TransferWizardWrapper } from '../routes/TransferWizardWrapper';
import { VerifyOwnerWrapper } from '../routes/VerifyOwnerWrapper';
import translations_en from '../translations/en.global.json';
import translations_it from '../translations/it.global.json';
import translations_kr from '../translations/kr.global.json';
Expand All @@ -39,36 +29,17 @@ import translations_zh_hant from '../translations/zh-hant.global.json';
import classNames from '../utils/classNames';
import getBrowserLocale from '../utils/getBrowserLocale';
import { reportUiActiveMixpanelThrottled } from '../utils/reportUiActiveMixpanelThrottled';
import ScrollToTop from '../utils/ScrollToTop';
import {
WALLET_CREATE_NEW_ACCOUNT_FLOW_URLS,
WALLET_LOGIN_URL,
WALLET_SIGN_URL,
WALLET_SEND_MONEY_URL,
} from '../utils/wallet';
import LedgerConfirmActionModal from './accounts/ledger/LedgerConfirmActionModal';
import LedgerConnectModal from './accounts/ledger/LedgerConnectModal/LedgerConnectModalWrapper';
import { DisableTwoFactor } from './accounts/two_factor/DisableTwoFactor';
import Footer from './common/Footer';
import GlobalAlert from './common/GlobalAlert';
import MigrationBanner from './common/MigrationBanner';
import NetworkBanner from './common/NetworkBanner';
import PrivateRoute from './common/routing/PrivateRoute';
import Route from './common/routing/Route';
import GlobalStyle from './GlobalStyle';
import { GuestLanding } from './landing/GuestLanding';
import NavigationWrapper from './navigation/NavigationWrapper';
import { PageNotFound } from './page-not-found/PageNotFound';
import Privacy from './privacy/Privacy';
import Terms from './terms/Terms';
import { initAnalytics } from './wallet-migration/metrics';
import RecoveryRedirect from './wallet-migration/RecoveryRedirect';
import { getMigrationStep } from './wallet-migration/utils';
import WalletMigration, { WALLET_MIGRATION_VIEWS } from './wallet-migration/WalletMigration';
import '../index.css';

const { fetchTokenFiatValues, getTokenWhiteList } = tokenFiatValueActions;

const {
handleClearUrl,
handleRedirectUrl,
Expand All @@ -87,22 +58,14 @@ const PATH_PREFIX = PUBLIC_URL;
const Container = styled.div`
min-height: 100vh;
padding-bottom: 100px;
padding-top: 75px;
padding-top: 25px;
@media (max-width: 991px) {
.App {
.main {
padding-bottom: 0px;
}
}
}
&.network-banner {
@media (max-width: 450px) {
.alert-banner,
.lockup-avail-transfer {
margin-top: -45px;
}
}
}

@media (max-width: 767px) {
&.hide-footer-mobile {
Expand All @@ -117,8 +80,6 @@ class Routing extends Component {
constructor(props) {
super(props);

this.pollTokenFiatValue = null;

const languages = [
{ name: 'English', code: 'en' },
{ name: 'Italiano', code: 'it' },
Expand All @@ -129,7 +90,7 @@ class Routing extends Component {
{ name: '繁體中文', code: 'zh-hant' },
{ name: 'Türkçe', code: 'tr' },
{ name: 'Українська', code: 'ua' },
{ name: '한국어', code: 'kr' }
{ name: '한국어', code: 'kr' },
];

const browserLanguage = getBrowserLocale(languages.map((l) => l.code));
Expand All @@ -142,10 +103,7 @@ class Routing extends Component {
languages,
options: {
defaultLanguage: 'en',
onMissingTranslation: ({
translationId,
defaultTranslation,
}) => {
onMissingTranslation: ({ defaultTranslation }) => {
if (isString(defaultTranslation)) {
// do anything to change the defaultTranslation as you wish
return defaultTranslation;
Expand Down Expand Up @@ -183,8 +141,7 @@ class Routing extends Component {

componentDidMount = async () => {
if (isWhitelabel && document) {
document.title = 'MyNearWallet';
document.querySelector('link[rel~="icon"]').href = favicon;
document.title = 'NEAR Ecosystem Wallets';
}

await initAnalytics();
Expand All @@ -206,174 +163,39 @@ class Routing extends Component {
history.listen(async () => {
handleRedirectUrl(this.props.router.location);
handleClearUrl();
if (
!WALLET_CREATE_NEW_ACCOUNT_FLOW_URLS.find(
(path) =>
this.props.router.location.pathname.indexOf(path) > -1
)
) {
await refreshAccount(true);
}

handleClearAlert();
handleFlowLimitation();
});
};

componentDidUpdate(prevProps) {
const { activeLanguage, fetchTokenFiatValues, account } = this.props;

if (
prevProps.account.accountId !== account.accountId &&
account.accountId !== undefined
) {
this.props.getTokenWhiteList(account.accountId);
fetchTokenFiatValues({ accountId: account.accountId });
this.startPollingTokenFiatValue();
}

const prevLangCode =
prevProps.activeLanguage && prevProps.activeLanguage.code;
const curLangCode = activeLanguage && activeLanguage.code;
const hasLanguageChanged = prevLangCode !== curLangCode;

if (hasLanguageChanged) {
// this.addTranslationsForActiveLanguage(curLangCode)
localStorage.setItem('languageCode', curLangCode);
}
}

componentWillUnmount = () => {
this.stopPollingTokenFiatValue();
};

startPollingTokenFiatValue = () => {
const { fetchTokenFiatValues, account } = this.props;

const handlePollTokenFiatValue = async () => {
await fetchTokenFiatValues({ accountId: account.accountId }).catch(() => {});
if (this.pollTokenFiatValue) {
this.pollTokenFiatValue = setTimeout(
() => handlePollTokenFiatValue(),
30000
);
}
};
this.pollTokenFiatValue = setTimeout(
() => handlePollTokenFiatValue(),
30000
);
};

stopPollingTokenFiatValue = () => {
clearTimeout(this.pollTokenFiatValue);
this.pollTokenFiatValue = null;
};

handleTransferClick = () => {

this.setState({ openTransferPopup: true });
const migrationStep = getMigrationStep();

if (window?.ExportModal?.show && ![WALLET_MIGRATION_VIEWS.LOG_OUT, WALLET_MIGRATION_VIEWS.VERIFYING].includes(migrationStep)) {
window?.ExportModal?.show();
}
}

closeTransferPopup = () => {
this.setState({ openTransferPopup: false });
}

render() {
const {
search,
pathname,
} = this.props.router.location;
const { account } = this.props;

const hideFooterOnMobile = [
WALLET_LOGIN_URL,
WALLET_SEND_MONEY_URL,
WALLET_SIGN_URL,
].includes(pathname.replace(/\//g, ''));

const accountFound = this.props.account.localStorage?.accountFound;
const { search } = this.props.router.location;

reportUiActiveMixpanelThrottled();

return (
<Container
className={classNames([
'App',
{
'network-banner':
!IS_MAINNET || SHOW_PRERELEASE_WARNING,
},
{ 'hide-footer-mobile': hideFooterOnMobile },
])}
id="app-container"
>
<Container className={classNames(['App'])} id="app-container">
<GlobalStyle />
<ConnectedRouter
basename={PATH_PREFIX}
history={this.props.history}
>
<ThemeProvider theme={theme}>
<ScrollToTop />
{pathname !== '/' && <NetworkBanner account={account} />}
{pathname !== '/' && <NavigationWrapper history={this.props.history}/> }
<GlobalAlert />
{

WEP_PHASE_ONE && (
<Switch>
<Route
path={['/', '/staking', '/profile']} render={() => (
<MigrationBanner
account={account}
onTransfer={this.handleTransferClick}
/>
)}
/>
</Switch>
)
}
{
WEP_PHASE_ONE && (
<WalletMigration
open={this.state.openTransferPopup}
history={this.props.history}
onClose={this.closeTransferPopup}
/>
)
}
<LedgerConfirmActionModal />
<LedgerConnectModal />
{account.requestPending !== null && (
<TwoFactorVerifyModal
onClose={(verified, error) => {
const { account, promptTwoFactor } =
this.props;
Mixpanel.track('2FA Modal Verify start');
// requestPending will resolve (verified == true) or reject the Promise being awaited in the method that dispatched promptTwoFactor
account.requestPending(verified, error);
// clears requestPending and closes the modal
promptTwoFactor(null);
if (error) {
// tracking error
Mixpanel.track(
'2FA Modal Verify fail',
{ error: error.message }
);
}
if (verified) {
Mixpanel.track(
'2FA Modal Verify finish'
);
}
<a
href="https://near.org"
target="_blank"
rel="noopener noreferrer"
>
<img
src={NEARLogo}
alt="near-logo"
style={{
paddingLeft: '20px',
paddingBottom: '20px',
height: '60px',
}}
/>
)}
</a>
<Switch>
<Redirect
from="//*"
Expand All @@ -382,25 +204,16 @@ class Routing extends Component {
search: search,
}}
/>
<Route
exact
path="/"
render={(props) => <GuestLanding {...props} onTransfer={() => this.handleTransferClick()} accountFound={accountFound} />}
/>
<Route exact path="/" component={GuestLanding} />
<Route
exact
path="/transfer-wizard"
render={() => (
<TransferWizardWrapper
account={account}
onTransfer={() => this.handleTransferClick()}
/>
)}
component={GuestLanding}
/>
<PrivateRoute
exact
path="/disable-two-factor"
component={DisableTwoFactor}
component={GuestLanding}
/>
<Route
exact
Expand All @@ -418,17 +231,18 @@ class Routing extends Component {
<PrivateRoute
exact
path="/verify-owner"
component={VerifyOwnerWrapper}
component={GuestLanding}
/>
)}
{/* NOTE: Please keep this route and ensure its working as expected.
This redirects email & text recovery links to an external wallet (MNW) */}
<Route
exact
path="/recover-with-link/:accountId/:seedPhrase"
component={RecoveryRedirect}
/>
<PrivateRoute component={PageNotFound} />
</Switch>
<Footer />
</ThemeProvider>
</ConnectedRouter>
</Container>
Expand All @@ -447,10 +261,8 @@ const mapDispatchToProps = {
handleClearUrl,
promptTwoFactor,
redirectTo,
fetchTokenFiatValues,
handleClearAlert,
handleFlowLimitation,
getTokenWhiteList,
};

const mapStateToProps = (state) => ({
Expand Down
Loading
Loading