-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: make
create-fuels template app responsive (#3011)
* feat: make `create-fuels` template app responsive * add changeset * enable pr release * run integration tests * revert integration test comments --------- Co-authored-by: Sérgio Torres <30977845+Torres-ssf@users.noreply.github.com>
- Loading branch information
1 parent
b67ded2
commit e04947a
Showing
9 changed files
with
355 additions
and
193 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "create-fuels": patch | ||
| --- | ||
|
|
||
| feat: make `create-fuels` template app responsive |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,162 @@ | ||
| import { FC, useState } from "react"; | ||
| import { Link } from "./Link"; | ||
| import { CURRENT_ENVIRONMENT, NODE_URL, TESTNET_FAUCET_LINK } from "@/lib"; | ||
| import { useConnectUI, useDisconnect } from "@fuels/react"; | ||
| import { useBrowserWallet } from "@/hooks/useBrowserWallet"; | ||
| import { useActiveWallet } from "@/hooks/useActiveWallet"; | ||
| import { Button } from "./Button"; | ||
| import { WalletDisplay } from "./WalletDisplay"; | ||
| import { bn } from "fuels"; | ||
| import { useFaucet } from "@/hooks/useFaucet"; | ||
| import toast from "react-hot-toast"; | ||
|
|
||
| export const Navbar: FC = () => { | ||
| const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); | ||
|
|
||
| const { faucetWallet } = useFaucet(); | ||
|
|
||
| const { | ||
| wallet: browserWallet, | ||
| isConnected: isBrowserWalletConnected, | ||
| network: browserWalletNetwork, | ||
| } = useBrowserWallet(); | ||
|
|
||
| const { connect } = useConnectUI(); | ||
| const { disconnect } = useDisconnect(); | ||
|
|
||
| const { wallet, refreshWalletBalance, walletBalance } = useActiveWallet(); | ||
|
|
||
| const topUpWallet = async () => { | ||
| if (!wallet) { | ||
| return console.error("Unable to topup wallet because wallet is not set."); | ||
| } | ||
|
|
||
| /** | ||
| * If the current environment is local, transfer 5 ETH to the wallet | ||
| * from the local faucet wallet | ||
| */ | ||
| if (CURRENT_ENVIRONMENT === "local") { | ||
| if (!faucetWallet) { | ||
| return toast.error("Faucet wallet not found."); | ||
| } | ||
|
|
||
| const tx = await faucetWallet?.transfer( | ||
| wallet.address, | ||
| bn.parseUnits("5"), | ||
| ); | ||
| await tx?.waitForResult(); | ||
|
|
||
| toast.success("Wallet topped up!"); | ||
|
|
||
| return await refreshWalletBalance?.(); | ||
| } | ||
|
|
||
| // If the current environment is testnet, open the testnet faucet link in a new tab | ||
| if (CURRENT_ENVIRONMENT === "testnet") { | ||
| return window.open( | ||
| `${TESTNET_FAUCET_LINK}?address=${wallet.address.toAddress()}`, | ||
| "_blank", | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| const showTopUpButton = walletBalance?.lt(bn.parseUnits("5")); | ||
|
|
||
| const showAddNetworkButton = | ||
| browserWallet && | ||
| browserWalletNetwork && | ||
| browserWalletNetwork?.url !== NODE_URL; | ||
|
|
||
| const tryToAddNetwork = () => { | ||
| return alert( | ||
| `Please add the network ${NODE_URL} to your Fuel wallet, or swtich to it if you have it already, and refresh the page.`, | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| {/* Larger screens */} | ||
| <nav className="hidden md:flex justify-between items-center p-4 bg-black text-white gap-6"> | ||
| <Link href="/">Home</Link> | ||
|
|
||
| <Link | ||
| href={ | ||
| CURRENT_ENVIRONMENT === "local" ? "/faucet" : TESTNET_FAUCET_LINK | ||
| } | ||
| target={CURRENT_ENVIRONMENT === "local" ? "_self" : "_blank"} | ||
| > | ||
| Faucet | ||
| </Link> | ||
|
|
||
| {isBrowserWalletConnected && ( | ||
| <Button onClick={disconnect}>Disconnect Wallet</Button> | ||
| )} | ||
| {!isBrowserWalletConnected && ( | ||
| <Button onClick={connect}>Connect Wallet</Button> | ||
| )} | ||
|
|
||
| {showAddNetworkButton && ( | ||
| <Button onClick={tryToAddNetwork} className="bg-red-500"> | ||
| Wrong Network | ||
| </Button> | ||
| )} | ||
|
|
||
| <div className="ml-auto"> | ||
| <WalletDisplay /> | ||
| </div> | ||
|
|
||
| {showTopUpButton && ( | ||
| <Button onClick={() => topUpWallet()}>Top-up Wallet</Button> | ||
| )} | ||
| </nav> | ||
|
|
||
| {/* Mobile. Should be a hamburger menu */} | ||
| <nav className="flex flex-col md:hidden p-4 bg-black text-white items-center gap-4"> | ||
| <img | ||
| src={isMobileMenuOpen ? "/close.svg" : "/hamburger.svg"} | ||
| alt="menu" | ||
| className="w-8 h-8 ml-auto cursor-pointer" | ||
| onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} | ||
| /> | ||
|
|
||
| {isMobileMenuOpen && ( | ||
| <> | ||
| <Link href="/">Home</Link> | ||
|
|
||
| <Link | ||
| href={ | ||
| CURRENT_ENVIRONMENT === "local" | ||
| ? "/faucet" | ||
| : TESTNET_FAUCET_LINK | ||
| } | ||
| target={CURRENT_ENVIRONMENT === "local" ? "_self" : "_blank"} | ||
| > | ||
| Faucet | ||
| </Link> | ||
|
|
||
| {isBrowserWalletConnected && ( | ||
| <Button onClick={disconnect}>Disconnect Wallet</Button> | ||
| )} | ||
| {!isBrowserWalletConnected && ( | ||
| <Button onClick={connect}>Connect Wallet</Button> | ||
| )} | ||
|
|
||
| {showAddNetworkButton && ( | ||
| <Button onClick={() => toast.success("Adding network")}> | ||
| Add Network | ||
| </Button> | ||
| )} | ||
|
|
||
| <div> | ||
| <WalletDisplay /> | ||
| </div> | ||
|
|
||
| {showTopUpButton && ( | ||
| <Button onClick={() => topUpWallet()}>Top-up Wallet</Button> | ||
| )} | ||
| </> | ||
| )} | ||
| </nav> | ||
| </> | ||
| ); | ||
| }; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.