From e04947a219b61e4b21151a3ed866bfbff44d68a8 Mon Sep 17 00:00:00 2001 From: Dhaiwat Date: Thu, 29 Aug 2024 18:24:15 +0530 Subject: [PATCH] feat: make `create-fuels` template app responsive (#3011) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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> --- .changeset/tall-hairs-sit.md | 5 + templates/nextjs/public/close.svg | 4 + templates/nextjs/public/hamburger.svg | 6 + templates/nextjs/src/components/Layout.tsx | 98 +------------ templates/nextjs/src/components/Navbar.tsx | 162 +++++++++++++++++++++ templates/vite/public/close.svg | 4 + templates/vite/public/hamburger.svg | 6 + templates/vite/src/components/Layout.tsx | 101 +------------ templates/vite/src/components/Navbar.tsx | 162 +++++++++++++++++++++ 9 files changed, 355 insertions(+), 193 deletions(-) create mode 100644 .changeset/tall-hairs-sit.md create mode 100644 templates/nextjs/public/close.svg create mode 100644 templates/nextjs/public/hamburger.svg create mode 100644 templates/nextjs/src/components/Navbar.tsx create mode 100644 templates/vite/public/close.svg create mode 100644 templates/vite/public/hamburger.svg create mode 100644 templates/vite/src/components/Navbar.tsx diff --git a/.changeset/tall-hairs-sit.md b/.changeset/tall-hairs-sit.md new file mode 100644 index 00000000000..fd87075d307 --- /dev/null +++ b/.changeset/tall-hairs-sit.md @@ -0,0 +1,5 @@ +--- +"create-fuels": patch +--- + +feat: make `create-fuels` template app responsive diff --git a/templates/nextjs/public/close.svg b/templates/nextjs/public/close.svg new file mode 100644 index 00000000000..68c77b1b014 --- /dev/null +++ b/templates/nextjs/public/close.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/templates/nextjs/public/hamburger.svg b/templates/nextjs/public/hamburger.svg new file mode 100644 index 00000000000..6e4f6fd75ca --- /dev/null +++ b/templates/nextjs/public/hamburger.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/templates/nextjs/src/components/Layout.tsx b/templates/nextjs/src/components/Layout.tsx index 04788ae4cff..4e9ba2c6796 100644 --- a/templates/nextjs/src/components/Layout.tsx +++ b/templates/nextjs/src/components/Layout.tsx @@ -1,75 +1,8 @@ -import toast, { Toaster } from "react-hot-toast"; -import { Link } from "./Link"; -import { Button } from "./Button"; -import { CURRENT_ENVIRONMENT, NODE_URL, TESTNET_FAUCET_LINK } from "@/lib"; -import { useConnectUI, useDisconnect } from "@fuels/react"; -import { WalletDisplay } from "./WalletDisplay"; -import { useBrowserWallet } from "@/hooks/useBrowserWallet"; -import { useActiveWallet } from "@/hooks/useActiveWallet"; -import { useFaucet } from "@/hooks/useFaucet"; +import { Toaster } from "react-hot-toast"; import Head from "next/head"; -import { bn } from "fuels"; -import { useRouter } from "next/navigation"; +import { Navbar } from "./Navbar"; export const Layout = ({ children }: { children: React.ReactNode }) => { - const { faucetWallet } = useFaucet(); - const router = useRouter(); - - 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 faucet page - if (CURRENT_ENVIRONMENT === "testnet") { - return router.push("/faucet"); - } - }; - - 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 ( <> @@ -78,32 +11,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
- +
{children} diff --git a/templates/nextjs/src/components/Navbar.tsx b/templates/nextjs/src/components/Navbar.tsx new file mode 100644 index 00000000000..e4c6f2a3f49 --- /dev/null +++ b/templates/nextjs/src/components/Navbar.tsx @@ -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 */} + + + {/* Mobile. Should be a hamburger menu */} + + + ); +}; diff --git a/templates/vite/public/close.svg b/templates/vite/public/close.svg new file mode 100644 index 00000000000..68c77b1b014 --- /dev/null +++ b/templates/vite/public/close.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/templates/vite/public/hamburger.svg b/templates/vite/public/hamburger.svg new file mode 100644 index 00000000000..6e4f6fd75ca --- /dev/null +++ b/templates/vite/public/hamburger.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/templates/vite/src/components/Layout.tsx b/templates/vite/src/components/Layout.tsx index 9811bb6702d..18e376882ba 100644 --- a/templates/vite/src/components/Layout.tsx +++ b/templates/vite/src/components/Layout.tsx @@ -1,107 +1,12 @@ -import toast, { Toaster } from "react-hot-toast"; -import { Link } from "./Link"; -import { Button } from "./Button"; -import { CURRENT_ENVIRONMENT, NODE_URL } from "../lib"; -import { useConnectUI, useDisconnect } from "@fuels/react"; -import { WalletDisplay } from "./WalletDisplay"; -import { useBrowserWallet } from "../hooks/useBrowserWallet"; -import { useActiveWallet } from "../hooks/useActiveWallet"; -import { useFaucet } from "../hooks/useFaucet"; -import { bn } from "fuels"; -import { useRouter } from "@tanstack/react-router"; +import { Toaster } from "react-hot-toast"; +import { Navbar } from "./Navbar"; export const Layout = ({ children }: { children: React.ReactNode }) => { - const { faucetWallet } = useFaucet(); - - const { navigate } = useRouter(); - - 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 faucet page - if (CURRENT_ENVIRONMENT === "testnet") { - return navigate({ - to: "/faucet", - }); - } - }; - - 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 ( <>
- +
{children} diff --git a/templates/vite/src/components/Navbar.tsx b/templates/vite/src/components/Navbar.tsx new file mode 100644 index 00000000000..e031af5f899 --- /dev/null +++ b/templates/vite/src/components/Navbar.tsx @@ -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 */} + + + {/* Mobile. Should be a hamburger menu */} + + + ); +};