Skip to content

Commit

Permalink
Merge pull request #2979 from near/wep-204
Browse files Browse the repository at this point in the history
feat: Disable new account creation in NW
  • Loading branch information
Patrick1904 authored Nov 29, 2022
2 parents 556c143 + c3c094e commit 312abbe
Show file tree
Hide file tree
Showing 17 changed files with 1,783 additions and 41 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/pull-request.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ jobs:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 12.x
node-version: 14.x
cache: 'yarn'
- run: yarn install --frozen-lockfile
- run: yarn lint
Expand Down
16 changes: 16 additions & 0 deletions packages/frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,22 @@
},
"dependencies": {
"@ledgerhq/hw-transport-u2f": "^5.34.0",
"@near-wallet-selector/coin98-wallet": "^7.2.0",
"@near-wallet-selector/default-wallets": "^7.2.0",
"@near-wallet-selector/here-wallet": "^7.2.0",
"@near-wallet-selector/ledger": "^7.2.0",
"@near-wallet-selector/math-wallet": "^7.2.0",
"@near-wallet-selector/meteor-wallet": "^7.2.0",
"@near-wallet-selector/modal-ui": "^7.2.0",
"@near-wallet-selector/near-wallet": "^7.2.0",
"@near-wallet-selector/nearfi": "^7.2.0",
"@near-wallet-selector/neth": "^7.2.0",
"@near-wallet-selector/nightly": "^7.2.0",
"@near-wallet-selector/nightly-connect": "^7.2.0",
"@near-wallet-selector/opto-wallet": "^7.2.0",
"@near-wallet-selector/sender": "^7.2.0",
"@near-wallet-selector/wallet-connect": "^7.2.0",
"@near-wallet-selector/welldone-wallet": "^7.2.0",
"@near-wallet/feature-flags": "^0.2.0",
"@reduxjs/toolkit": "1.6.2",
"@sentry/browser": "^6.4.1",
Expand Down
13 changes: 13 additions & 0 deletions packages/frontend/src/components/GlobalStyle.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,19 @@ export default createGlobalStyle`
position: relative;
}
html {
.wallet-selector-get-a-wallet-modal {
.modal-left {
display: none;
}
.modal-right {
width: 100% !important;
}
.wallet-info-wrapper {
max-width: 500px;
margin: 91px auto 0 auto;
}
}
box-sizing: border-box;
min-height: 100vh;
height: auto !important;
Expand Down
22 changes: 12 additions & 10 deletions packages/frontend/src/components/Routing.js
Original file line number Diff line number Diff line change
Expand Up @@ -359,7 +359,7 @@ class Routing extends Component {
<ThemeProvider theme={theme}>
<ScrollToTop />
<NetworkBanner account={account} />
<NavigationWrapper />
<NavigationWrapper history={this.props.history}/>
<GlobalAlert />
{
// TODO: Remove TwoFactorDisableBanner when we push MigrationBanner to mainnet
Expand Down Expand Up @@ -456,15 +456,17 @@ class Routing extends Component {
<Route
exact
path="/create"
render={(props) =>
accountFound || !DISABLE_CREATE_ACCOUNT ? (
<CreateAccountWithRouter
{...props}
/>
) : (
<CreateAccountLanding />
)
}
render={(props) => {
if (WEP_PHASE_ONE) {
return this.props.history.push('/');
} else {
if (accountFound || !DISABLE_CREATE_ACCOUNT) {
return <CreateAccountWithRouter {...props} />;
} else {
return <CreateAccountLanding />;
}
}
}}
// Logged in users always create a named account
/>
<Route
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const CloseButton = ({ onClick, device }) => (
<Container onClick={onClick} title='Close' className={classNames(['modal-close-btn', device])}>
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path className='background' d="M35 17.5C35 27.165 27.165 35 17.5 35C7.83502 35 0 27.165 0 17.5C0 7.83502 7.83502 0 17.5 0C27.165 0 35 7.83502 35 17.5Z" fill="#ECECEC"/>
<path className='icon' d="M22.9954 11.6817L11.6817 22.9954M11.6817 11.632L22.9954 22.9458" stroke="black" strokeWidth="2.5" strokeLinecap="round"/>
<path className='icon' d="M22.9954 11.6817L11.6817 22.9954M11.6817 11.632L22.9954 22.9458" stroke="#A2A2A8" strokeWidth="2" strokeLinecap="round"/>
</svg>
</Container>
);
Expand Down
3 changes: 2 additions & 1 deletion packages/frontend/src/components/common/modal/Style.css.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const Style = styled.div`
switch (props.modalSize) {
case 'lg': return '800';
case 'md': return '550';
case 'sm-md': return '496';
case 'sm': return '400';
case 'xs': return '300';
default: return '650';
Expand Down Expand Up @@ -63,7 +64,7 @@ const Style = styled.div`
z-index: 1050;
width: 100%;
background-color: white;
border-radius: 6px;
border-radius: 16px;
transition: 0.3s;
padding: 25px;
position: relative;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import React from 'react';
import { Translate } from 'react-localize-redux';
import styled from 'styled-components';

import AlertTriangleIcon from '../../svg/AlertTriangleIcon';
import FormButton from '../FormButton';
import Modal from '../modal/Modal';
import ModalFooter from '../modal/ModalFooter';

const StyledContainer = styled.div`
.more-wallets-body {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
h3 {
margin: 25px 0;
}
p {
margin-top: 0;
line-height: 21px;
}
}
.alert-triangle {
margin-top: 40px;
background-color: #FFF8F8;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
> svg {
min-width: 21px;
min-height: 21px;
}
}
&& {
.modal-footer {
display: flex;
flex-direction: column;
button {
&.link {
margin-top: 20px;
}
}
}
}
`;

const MoreNearWalletsModal = ({ open, onClose, onClickSeeMoreWallets }) => {
return (
<Modal
id='more-near-wallets-modal'
isOpen={open}
onClose={onClose}
closeButton='desktop'
modalSize='sm-md'
>
<StyledContainer>
<div className='more-wallets-body'>
<div className='alert-triangle'><AlertTriangleIcon color='#E5484D' /></div>
<h3><Translate id='moreNearWalletsModal.title' /></h3>
<p><Translate id='moreNearWalletsModal.desc' /></p>
</div>
<ModalFooter>
<FormButton onClick={onClickSeeMoreWallets}>
<Translate id='moreNearWalletsModal.primaryButton' />
</FormButton>
<FormButton color='link' id='close-button'>
<Translate id='button.dismiss' />
</FormButton>
</ModalFooter>
</StyledContainer>
</Modal>
);
};

export default MoreNearWalletsModal;
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import { setupCoin98Wallet } from '@near-wallet-selector/coin98-wallet';
import { setupWalletSelector } from '@near-wallet-selector/core';
import { setupHereWallet } from '@near-wallet-selector/here-wallet';
import { setupLedger } from '@near-wallet-selector/ledger';
import { setupMathWallet } from '@near-wallet-selector/math-wallet';
import { setupMeteorWallet } from '@near-wallet-selector/meteor-wallet';
import { setupModal } from '@near-wallet-selector/modal-ui';
import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';
import { setupNearWallet } from '@near-wallet-selector/near-wallet';
import { setupNearFi } from '@near-wallet-selector/nearfi';
import { setupNightly } from '@near-wallet-selector/nightly';
import { setupOptoWallet } from '@near-wallet-selector/opto-wallet';
import { setupSender } from '@near-wallet-selector/sender';
import { setupWelldoneWallet } from '@near-wallet-selector/welldone-wallet';
import React, { useEffect } from 'react';

import { IS_MAINNET } from '../../../config';
import MoreNearWalletsModal from './MoreNearWalletsModal';
import '@near-wallet-selector/modal-ui/styles.css';

// This Wallet Selector component is for displaying a list of available wallets only.
// The Wallet Selector CSS has been modified to omit the 'Connect a wallet' section.

export function WalletSelectorGetAWallet({
setWalletSelectorModal,
showModal,
setShowModal
}) {

const walletWrapperDiv = document.getElementById('near-wallet-selector-modal');
walletWrapperDiv?.classList.add('wallet-selector-get-a-wallet-modal');

useEffect(() => {

const initSelector = async () => {
const selector = await setupWalletSelector({
network: IS_MAINNET ? 'mainnet' : 'testnet',
modules: [
setupNearWallet(),
setupMyNearWallet(),
setupSender(),
setupHereWallet(),
setupMathWallet(),
setupNightly(),
setupMeteorWallet(),
setupWelldoneWallet(),
setupLedger(),
setupNearFi(),
setupCoin98Wallet(),
setupOptoWallet()
],
});

setWalletSelectorModal(setupModal(selector, {
contractId: 'dontcare'
}));
};

initSelector();

}, []);

return (
<>
{
showModal && (
<MoreNearWalletsModal
open={showModal}
onClose={() => setShowModal(null)}
onClickSeeMoreWallets={() => setShowModal('wallet-selector')}
/>
)
}
</>
);
};
26 changes: 23 additions & 3 deletions packages/frontend/src/components/landing/GuestLanding.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React from 'react';
import React, { useState } from 'react';
import { Translate } from 'react-localize-redux';
import styled from 'styled-components';

import { WEP_PHASE_ONE } from '../../../../../features';
import iPhoneMockup from '../../images/iphone-mockup.png';
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`
Expand Down Expand Up @@ -140,16 +141,35 @@ const StyledContainer = styled.div`
}
`;

export function GuestLanding() {
export function GuestLanding({ history }) {
const [walletSelectorModal, setWalletSelectorModal] = useState();
const [showModal, setShowModal] = useState();

return (
<StyledContainer>
<WalletSelectorGetAWallet
setWalletSelectorModal={(modal) => setWalletSelectorModal(modal)}
setShowModal={(modal) => {
setShowModal(null);
if (modal === 'wallet-selector') {
walletSelectorModal.show();
}
}}
showModal={showModal}
/>
<LandingBackground />
<Container className='small-centered'>
<h1><Translate id='landing.title' /></h1>
<h3><Translate id='landing.desc' /></h3>
<div className='buttons'>
<FormButton
linkTo="/create"
onClick={() => {
if (WEP_PHASE_ONE) {
setShowModal('more-near-wallets');
} else {
history.push('/create');
}
}}
trackingId="Click create account button"
data-test-id="landingPageCreateAccount"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ const Button = styled(FormButton)`
}
`;

const CreateAccountBtn = () => (
<Button linkTo='/create' trackingId='CA Click create new account button' color='gray-blue'>
const CreateAccountBtn = ({ onClick }) => (
<Button onClick={onClick} trackingId='CA Click create new account button' color='gray-blue'>
<PlusSignIcon color='#0072CE'/>
<Translate id='button.createNewAccount'/>
</Button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ class DesktopContainer extends Component {
flowLimitationMainMenu,
flowLimitationSubMenu,
refreshBalance,
onClickCreateNewAccount
} = this.props;

const showAllNavigationLinks = showNavLinks && !flowLimitationMainMenu;
Expand Down Expand Up @@ -136,6 +137,7 @@ class DesktopContainer extends Component {
accountsBalance={account.accountsBalance}
balance={account.balance}
refreshBalance={refreshBalance}
onClickCreateNewAccount={onClickCreateNewAccount}
/>
</>
)}
Expand Down
5 changes: 3 additions & 2 deletions packages/frontend/src/components/navigation/DesktopMenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ const DesktopMenu = ({
handleSelectAccount,
accountIdLocalStorage,
accountsBalance,
refreshBalance
refreshBalance,
onClickCreateNewAccount
}) => {
if (show) {
return (
Expand All @@ -47,7 +48,7 @@ const DesktopMenu = ({
showBalanceInUSD={true}
/>
<AccessAccountBtn />
<CreateAccountBtn />
<CreateAccountBtn onClick={onClickCreateNewAccount}/>
</Menu>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,8 @@ class MobileContainer extends Component {
showNavLinks,
flowLimitationMainMenu,
flowLimitationSubMenu,
refreshBalance
refreshBalance,
onClickCreateNewAccount
} = this.props;

return (
Expand Down Expand Up @@ -222,7 +223,7 @@ class MobileContainer extends Component {
showBalanceInUSD={true}
/>
<AccessAccountBtn />
<CreateAccountBtn />
<CreateAccountBtn onClick={onClickCreateNewAccount}/>
</LowerSection>
</>
)}
Expand Down
Loading

0 comments on commit 312abbe

Please sign in to comment.