Skip to content

Commit c8f4b45

Browse files
TrofimovAnton85TrofimovAnton85
committed
fix(faucet): hide login flow for mobile devices
1 parent 2ea5f94 commit c8f4b45

File tree

4 files changed

+138
-87
lines changed

4 files changed

+138
-87
lines changed

‎package-lock.json‎

Lines changed: 40 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
"prism-react-renderer": "^2.1.0",
6262
"react": "^18.0.0",
6363
"react-alert": "^7.0.3",
64+
"react-device-detect": "^2.2.3",
6465
"react-dom": "^18.0.0",
6566
"react-dropdown-select": "^4.11.2",
6667
"react-modal": "^3.16.1",

‎src/components/Faucet/Hero.tsx‎

Lines changed: 95 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useContext, useEffect, useState } from "react";
2+
import { BrowserView, MobileView } from "react-device-detect";
23
import Text from "@site/src/components/Text";
34
import Button from "@site/src/components/Button";
45
import Input from "@site/src/components/Input";
@@ -103,96 +104,103 @@ export default function Hero({
103104
wallet.
104105
</span>
105106
</Text>
106-
<Text as="p">
107-
{!isExtensionActive
108-
? "Install MetaMask for your browser to get started and request ETH."
109-
: !Object.keys(projects).length
110-
? walletLinked === undefined
111-
? "Connect your MetaMask wallet to get started and request ETH."
112-
: walletLinked === WALLET_LINK_TYPE.NO
113-
? "Link your Infura account to get started and request ETH."
114-
: "Select your Infura account to get started and request ETH."
115-
: "Enter your MetaMask wallet address and request ETH."}
116-
</Text>
117-
<div className={styles.actions}>
118-
{!!Object.keys(projects).length && (
119-
<div className={styles.inputCont}>
120-
<Input
121-
label="Wallet address"
122-
disabled={isLoading}
123-
value={inputValue}
124-
placeholder="ex. 0x or ENS"
125-
onChange={handleOnInputChange}
126-
/>
127-
{isLimitedUserPlan && (
128-
<p className={styles.caption}>
129-
The amount of {network === "linea" && "Linea Sepolia"}
130-
{network === "sepolia" && "Sepolia"} ETH you'll get is
131-
determined by your address's Ethereum Mainnet activity to ensure
132-
fair and bot-free distribution.
133-
</p>
134-
)}
135-
</div>
136-
)}
137-
<div
138-
className={clsx(
139-
!!Object.keys(projects).length && styles.alignedButtons,
140-
)}
141-
>
142-
{!isExtensionActive ? (
143-
<Button
144-
testId="hero-cta-install-metamask"
145-
className={styles.button}
146-
onClick={handleConnectWallet}
147-
>
148-
Install MetaMask
149-
</Button>
150-
) : !Object.keys(projects).length ? (
151-
<>
152-
{walletLinked === undefined && (
153-
<Button
154-
testId="hero-cta-connect-metamask"
155-
className={styles.button}
156-
onClick={handleConnectWallet}
157-
isLoading={isWalletLinking}
158-
>
159-
Connect MetaMask
160-
</Button>
161-
)}
162-
{walletLinked === WALLET_LINK_TYPE.NO && (
163-
<Button
164-
testId="hero-cta-link-infura-account"
165-
className={styles.button}
166-
onClick={handleLinkWallet}
167-
isLoading={isWalletLinking}
168-
>
169-
Link Infura Account
170-
</Button>
107+
<BrowserView>
108+
<Text as="p">
109+
{!isExtensionActive
110+
? "Install MetaMask for your browser to get started and request ETH."
111+
: !Object.keys(projects).length
112+
? walletLinked === undefined
113+
? "Connect your MetaMask wallet to get started and request ETH."
114+
: walletLinked === WALLET_LINK_TYPE.NO
115+
? "Link your Infura account to get started and request ETH."
116+
: "Select your Infura account to get started and request ETH."
117+
: "Enter your MetaMask wallet address and request ETH."}
118+
</Text>
119+
<div className={styles.actions}>
120+
{!!Object.keys(projects).length && (
121+
<div className={styles.inputCont}>
122+
<Input
123+
label="Wallet address"
124+
disabled={isLoading}
125+
value={inputValue}
126+
placeholder="ex. 0x or ENS"
127+
onChange={handleOnInputChange}
128+
/>
129+
{isLimitedUserPlan && (
130+
<p className={styles.caption}>
131+
The amount of {network === "linea" && "Linea Sepolia"}
132+
{network === "sepolia" && "Sepolia"} ETH you'll get is
133+
determined by your address's Ethereum Mainnet activity to ensure
134+
fair and bot-free distribution.
135+
</p>
171136
)}
172-
{walletLinked === WALLET_LINK_TYPE.MULTIPLE && (
173-
<Button
174-
testId="hero-cta-select-infura-account"
175-
className={styles.button}
176-
onClick={handleLinkWallet}
177-
isLoading={isWalletLinking}
178-
>
179-
Select Infura Account
180-
</Button>
181-
)}
182-
</>
183-
) : (
184-
<Button
185-
testId="hero-cta-request-eth"
186-
isLoading={isLoading}
187-
disabled={!inputValue}
188-
className={styles.button}
189-
onClick={handleRequestEth}
190-
>
191-
Request ETH
192-
</Button>
137+
</div>
193138
)}
139+
<div
140+
className={clsx(
141+
!!Object.keys(projects).length && styles.alignedButtons,
142+
)}
143+
>
144+
{!isExtensionActive ? (
145+
<Button
146+
testId="hero-cta-install-metamask"
147+
className={styles.button}
148+
onClick={handleConnectWallet}
149+
>
150+
Install MetaMask
151+
</Button>
152+
) : !Object.keys(projects).length ? (
153+
<>
154+
{walletLinked === undefined && (
155+
<Button
156+
testId="hero-cta-connect-metamask"
157+
className={styles.button}
158+
onClick={handleConnectWallet}
159+
isLoading={isWalletLinking}
160+
>
161+
Connect MetaMask
162+
</Button>
163+
)}
164+
{walletLinked === WALLET_LINK_TYPE.NO && (
165+
<Button
166+
testId="hero-cta-link-infura-account"
167+
className={styles.button}
168+
onClick={handleLinkWallet}
169+
isLoading={isWalletLinking}
170+
>
171+
Link Infura Account
172+
</Button>
173+
)}
174+
{walletLinked === WALLET_LINK_TYPE.MULTIPLE && (
175+
<Button
176+
testId="hero-cta-select-infura-account"
177+
className={styles.button}
178+
onClick={handleLinkWallet}
179+
isLoading={isWalletLinking}
180+
>
181+
Select Infura Account
182+
</Button>
183+
)}
184+
</>
185+
) : (
186+
<Button
187+
testId="hero-cta-request-eth"
188+
isLoading={isLoading}
189+
disabled={!inputValue}
190+
className={styles.button}
191+
onClick={handleRequestEth}
192+
>
193+
Request ETH
194+
</Button>
195+
)}
196+
</div>
194197
</div>
195-
</div>
198+
</BrowserView>
199+
<MobileView>
200+
<Text as="p">
201+
Please open the application on desktop to get started and request ETH
202+
</Text>
203+
</MobileView>
196204
</div>
197205
);
198206
}

‎src/components/NavbarWallet/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useEffect, useState, useRef, FC, useContext } from "react";
2+
import { isBrowser } from "react-device-detect";
23
import ldClient from "launchdarkly";
34
import clsx from "clsx";
45
import Button from "@site/src/components/Button";
@@ -248,6 +249,7 @@ const NavbarWallet = (props) => {
248249

249250
return (
250251
ldReady &&
252+
isBrowser &&
251253
loginEnabled && (
252254
<BrowserOnly>{() => <NavbarWalletComponent {...props} />}</BrowserOnly>
253255
)

0 commit comments

Comments
 (0)