Merge pull request #2276 from near/issue-2275

App login: display contract ID
near · Dec 1, 2021 · 64cbb4f · 64cbb4f
2 parents 87f06c9 + bffe0db
commit 64cbb4f
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 15 deletions.
diff --git a/packages/frontend/src/components/login/v2/ConfirmLogin.js b/packages/frontend/src/components/login/v2/ConfirmLogin.js
@@ -21,7 +21,7 @@ export default ({
     appReferrer,
     contractId,
     publicKey,
-    EXPLORER_URL
+    contractIdUrl
 }) => {
     const [loggingIn, setLoggingIn] = useState(false);
     const [showGrantFullAccessModal, setShowGrantFullAccessModal] = useState(false);
@@ -50,7 +50,7 @@ export default ({
                                 <SafeTranslate
                                     id='login.v2.connectConfirm.desc'
                                     data={{
-                                        contractIdUrl: `${EXPLORER_URL}/accounts/${contractId}`,
+                                        contractIdUrl: contractIdUrl,
                                         appReferrer: appReferrer || translate('sign.unknownApp'),
                                         accessType: translate(`login.v2.connectConfirm.${loginAccessType}`)
                                     }}
@@ -63,7 +63,7 @@ export default ({
                         : <FullAccessUI />
                     }
                     {publicKey && loginAccessType === LOGIN_ACCESS_TYPES.LIMITED_ACCESS &&
-                        <NetworkFeeAllowance />
+                        <NetworkFeeAllowance contractId={contractId} contractIdUrl={contractIdUrl}/>
                     }
                     <FormButtonGroup>
                         <FormButton
@@ -97,6 +97,8 @@ export default ({
                     onConfirm={handleClickConnect}
                     signedInAccountId={signedInAccountId}
                     appReferrer={appReferrer}
+                    contractId={contractId}
+                    contractIdUrl={contractIdUrl}
                     loggingIn={loggingIn}
                 />
             }

diff --git a/packages/frontend/src/components/login/v2/ConfirmLoginWrapper.js b/packages/frontend/src/components/login/v2/ConfirmLoginWrapper.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
-import { EXPLORER_URL } from '../../../config';
 import { Mixpanel } from '../../../mixpanel/index';
 import { allowLogin } from '../../../redux/actions/account';
 import { showCustomAlert } from '../../../redux/actions/status';
@@ -14,6 +13,7 @@ import ConfirmLogin from './ConfirmLogin';
 export default ({
     loginAccessType,
     contractId,
+    contractIdUrl,
     onClickCancel,
     publicKey
 }) => {
@@ -44,7 +44,7 @@ export default ({
                     }
                 );
             }}
-            EXPLORER_URL={EXPLORER_URL}
+            contractIdUrl={contractIdUrl}
         />
     );
 };
diff --git a/packages/frontend/src/components/login/v2/ConnectWithApplication.js b/packages/frontend/src/components/login/v2/ConnectWithApplication.js
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import GlobeIcon from '../../svg/GlobeIcon';
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.a`
     border: 1px solid #D6EDFF;
     background-color: #F0F9FF;
     color: #005497;
@@ -14,14 +14,15 @@ const StyledContainer = styled.div`
     align-items: center;
     justify-content: center;
     width: fit-content;
+    cursor: pointer;
 
     > svg {
         margin-right: 10px;
     }
 `;
 
-export default ({ appReferrer }) => (
-    <StyledContainer className='connect-with-application'>
+export default ({ appReferrer, contractIdUrl }) => (
+    <StyledContainer className='connect-with-application' href={contractIdUrl} target='_blank' rel='noreferrer'>
         <GlobeIcon/>
         {appReferrer || <Translate id='sign.unknownApp' />}
     </StyledContainer>

diff --git a/packages/frontend/src/components/login/v2/GrantFullAccessModal.js b/packages/frontend/src/components/login/v2/GrantFullAccessModal.js
@@ -71,6 +71,8 @@ export default ({
     onClose,
     onConfirm,
     appReferrer,
+    contractId,
+    contractIdUrl,
     signedInAccountId,
     loggingIn
 }) => {
@@ -92,7 +94,10 @@ export default ({
                     <div className='upper-body'>
                         <div className='alert-triangle'><AlertTriangleIcon color='#DC1F25' /></div>
                         <h3><Translate id='login.v2.connectConfirm.fullAccessModal.title' /></h3>
-                        <ConnectWithApplication appReferrer={appReferrer} />
+                        <ConnectWithApplication
+                            appReferrer={appReferrer}
+                            contractIdUrl={contractIdUrl}
+                        />
                         <div className='desc'>
                             <Translate id='login.v2.connectConfirm.fullAccessModal.desc' />
                         </div>

diff --git a/packages/frontend/src/components/login/v2/NetworkFeeAllowance.js b/packages/frontend/src/components/login/v2/NetworkFeeAllowance.js
@@ -4,6 +4,7 @@ import { Translate } from 'react-localize-redux';
 import styled from 'styled-components';
 
 import { ACCESS_KEY_FUNDING_AMOUNT } from '../../../config';
+import ArrowUpRight from '../..//svg/ArrowUpRight';
 import Balance from '../../common/balance/Balance';
 
 const StyledContainer = styled.div`
@@ -13,6 +14,19 @@ const StyledContainer = styled.div`
     color: #72727A;
     margin: 50px 0 -20px 0;
 
+    .contract-wrapper {
+        border-bottom: 1px solid #F0F0F1;
+        padding-bottom: 16px;
+        a {
+            display: flex;
+            align-items: center;
+
+            svg {
+                margin-left: 5px;
+            }
+        }
+    }
+
     > div {
         display: flex;
         justify-content: space-between;
@@ -26,8 +40,14 @@ const StyledContainer = styled.div`
     }
 `;
 
-export default () => (
+export default ({ contractId, contractIdUrl }) => (
     <StyledContainer>
+        {contractId &&
+            <div className='contract-wrapper'>
+                <div className='title'>Contract</div>
+                <a href={contractIdUrl} target='_blank' rel='noreferrer'>{contractId}<ArrowUpRight /></a>
+            </div>
+        }
         <div>
             <div className='title'><Translate id='login.v2.connectConfirm.feeAllowance.title' /></div>
             <Balance

diff --git a/packages/frontend/src/components/login/v2/SelectAccountLogin.js b/packages/frontend/src/components/login/v2/SelectAccountLogin.js
@@ -20,7 +20,8 @@ export default ({
     onClickCancel,
     onClickNext,
     loginAccessType,
-    appReferrer
+    appReferrer,
+    contractIdUrl
 }) => (
     <Container className='small-centered border'>
         <LoginStyle className={loginAccessType === LOGIN_ACCESS_TYPES.FULL_ACCESS ? 'full-access' : ''}>
@@ -35,7 +36,10 @@ export default ({
                     )}
                 </Translate>
             </div>
-            <ConnectWithApplication appReferrer={appReferrer} />
+            <ConnectWithApplication
+                appReferrer={appReferrer}
+                contractIdUrl={contractIdUrl}
+            />
             <LoadingDots />
             <AccountSelector
                 signedInAccountId={signedInAccountId}

diff --git a/packages/frontend/src/components/login/v2/SelectAccountLoginWrapper.js b/packages/frontend/src/components/login/v2/SelectAccountLoginWrapper.js
@@ -18,6 +18,8 @@ import SelectAccountLogin from './SelectAccountLogin';
 
 export default ({
     loginAccessType,
+    contractId,
+    contractIdUrl,
     onClickNext,
     failureUrl
 }) => {
@@ -42,6 +44,8 @@ export default ({
             }}
             loginAccessType={loginAccessType}
             appReferrer={accountUrlReferrer}
+            contractId={contractId}
+            contractIdUrl={contractIdUrl}
             onClickCancel={() => {
                 Mixpanel.track("LOGIN Click deny button");
                 if (failureUrl) {

diff --git a/packages/frontend/src/components/svg/ArrowUpRight.js b/packages/frontend/src/components/svg/ArrowUpRight.js
@@ -3,8 +3,8 @@ import React from 'react';
 const ArrowUpRight = () => {
     return (
         <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M4.66699 11.6032L11.3337 4.93652" stroke="#2B9AF4" stroke-width="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-            <path d="M4.66699 4.93652H11.3337V11.6032" stroke="#2B9AF4" stroke-width="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            <path d="M4.66699 11.6032L11.3337 4.93652" stroke="#2B9AF4" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            <path d="M4.66699 4.93652H11.3337V11.6032" stroke="#2B9AF4" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
         </svg>
     );
 };

diff --git a/packages/frontend/src/redux/actions/account.js b/packages/frontend/src/redux/actions/account.js
@@ -92,8 +92,8 @@ export const handleRefreshUrl = (prevRouter) => (dispatch, getState) => {
 
     if ([...WALLET_CREATE_NEW_ACCOUNT_FLOW_URLS, WALLET_LOGIN_URL, WALLET_SIGN_URL, WALLET_LINKDROP_URL].includes(currentPage)) {
         const parsedUrl = {
-            referrer: document.referrer && new URL(document.referrer).hostname,
             ...parse(search),
+            referrer: document.referrer ? new URL(document.referrer).hostname : undefined,
             redirect_url: prevRouter ? prevRouter.location.pathname : undefined
         };
         if ([WALLET_CREATE_NEW_ACCOUNT_URL, WALLET_LINKDROP_URL].includes(currentPage) && search !== '') {

diff --git a/packages/frontend/src/routes/LoginWrapper.js b/packages/frontend/src/routes/LoginWrapper.js
@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux';
 import ConfirmLoginWrapper from '../components/login/v2/ConfirmLoginWrapper';
 import InvalidContractId from '../components/login/v2/InvalidContractId';
 import SelectAccountLoginWrapper from '../components/login/v2/SelectAccountLoginWrapper';
+import { EXPLORER_URL } from '../config';
 import { Mixpanel } from '../mixpanel/index';
 import {
     selectAccountLocalStorageAccountId
@@ -27,6 +28,8 @@ export function LoginWrapper() {
     const failureUrl = URLParams.get('failure_url');
     const invalidContractId = URLParams.get('invalidContractId');
 
+    const contractIdUrl = `${EXPLORER_URL}/accounts/${contractId}`;
+
     const accountLocalStorageAccountId = useSelector(selectAccountLocalStorageAccountId);
 
     let requestingFullAccess = !contractId || (publicKey && contractId?.endsWith(`.${LOCKUP_ACCOUNT_ID_SUFFIX}`)) || contractId === accountLocalStorageAccountId;
@@ -53,6 +56,7 @@ export function LoginWrapper() {
             <ConfirmLoginWrapper
                 loginAccessType={loginAccessType}
                 contractId={contractId}
+                contractIdUrl={contractIdUrl}
                 onClickCancel={() => setConfirmLogin(false)}
                 publicKey={publicKey}
             />
@@ -62,6 +66,8 @@ export function LoginWrapper() {
     return (
         <SelectAccountLoginWrapper
             loginAccessType={loginAccessType}
+            contractId={contractId}
+            contractIdUrl={contractIdUrl}
             failureUrl={failureUrl}
             onClickNext={() => { setConfirmLogin(true); window.scrollTo(0, 0); }}
         />