Skip to content

Commit

Permalink
Merge pull request #3143 from near/feat/enhance-ui
Browse files Browse the repository at this point in the history 
Landing page improvements & redesign
  • Loading branch information
@trechriron
trechriron authored Nov 19, 2024
2 parents 1d4cb53 + 54c8e95 commit 977e1d4
Show file tree
Hide file tree
Showing 8 changed files with 171 additions and 1,030 deletions.
2 changes: 1 addition & 1 deletion packages/frontend/package.json
View file
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
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

0 comments on commit 977e1d4

Please sign in to comment.