Merge branch 'master' into dp/create-fuels-mobile-friendly

FuelLabs · Aug 29, 2024 · ab2d389 · ab2d389
2 parents a2ddb07 + e87b51b
commit ab2d389
Show file tree

Hide file tree

Showing 7 changed files with 306 additions and 165 deletions.
diff --git a/.changeset/new-rivers-rescue.md b/.changeset/new-rivers-rescue.md
@@ -0,0 +1,5 @@
+---
+"create-fuels": patch
+---
+
+feat: add missing connectors to `create fuels` template
diff --git a/.changeset/stupid-books-pull.md b/.changeset/stupid-books-pull.md
@@ -0,0 +1,5 @@
+---
+"create-fuels": patch
+---
+
+feat: embed testnet faucet in `create-fuels` template
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/templates/nextjs/src/app/faucet/page.tsx b/templates/nextjs/src/app/faucet/page.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/Button";
 import { Input } from "@/components/Input";
 import { useActiveWallet } from "@/hooks/useActiveWallet";
 import { useFaucet } from "@/hooks/useFaucet";
+import { CURRENT_ENVIRONMENT, Environments, TESTNET_FAUCET_LINK } from "@/lib";
 import { bn } from "fuels";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
@@ -50,36 +51,54 @@ export default function Faucet() {
 
   return (
     <>
-      <h3 className="text-2xl font-semibold">Local Faucet</h3>
-
-      <div className="flex gap-4 items-center">
-        <label htmlFor="receiver-address-input" className="text-gray-400">
-          Receiving address:
-        </label>
-        <Input
-          className="w-full"
-          value={receiverAddress}
-          onChange={(e) => setReceiverAddress(e.target.value)}
-          placeholder="0x..."
-          id="receiver-address-input"
-        />
-      </div>
-
-      <div className="flex gap-4 items-center">
-        <label htmlFor="amount-input" className="text-gray-400">
-          Amount (ETH):
-        </label>
-        <Input
-          className="w-full"
-          value={amountToSend}
-          onChange={(e) => setAmountToSend(e.target.value)}
-          placeholder="5"
-          type="number"
-          id="amount-input"
-        />
-      </div>
-
-      <Button onClick={sendFunds}>Send Funds</Button>
+      {CURRENT_ENVIRONMENT === Environments.LOCAL && (
+        <>
+          <h3 className="text-2xl font-semibold">Local Faucet</h3>
+
+          <div className="flex gap-4 items-center">
+            <label htmlFor="receiver-address-input" className="text-gray-400">
+              Receiving address:
+            </label>
+            <Input
+              className="w-full"
+              value={receiverAddress}
+              onChange={(e) => setReceiverAddress(e.target.value)}
+              placeholder="0x..."
+              id="receiver-address-input"
+            />
+          </div>
+
+          <div className="flex gap-4 items-center">
+            <label htmlFor="amount-input" className="text-gray-400">
+              Amount (ETH):
+            </label>
+            <Input
+              className="w-full"
+              value={amountToSend}
+              onChange={(e) => setAmountToSend(e.target.value)}
+              placeholder="5"
+              type="number"
+              id="amount-input"
+            />
+          </div>
+
+          <Button onClick={sendFunds}>Send Funds</Button>
+        </>
+      )}
+
+      {CURRENT_ENVIRONMENT === Environments.TESTNET && (
+        <>
+          <iframe
+            src={
+              wallet
+                ? `${TESTNET_FAUCET_LINK}?address=${wallet.address.toB256()}`
+                : TESTNET_FAUCET_LINK
+            }
+            title="faucet"
+            className="w-full h-screen overflow-scroll"
+          />
+        </>
+      )}
     </>
   );
 }
diff --git a/templates/nextjs/src/app/layout.tsx b/templates/nextjs/src/app/layout.tsx
@@ -13,6 +13,7 @@ import {
   FuelWalletDevelopmentConnector,
   FueletWalletConnector,
   WalletConnectConnector,
+  SolanaConnector,
 } from "@fuels/connectors";
 import { NODE_URL } from "@/lib";
 import { ActiveWalletProvider } from "@/hooks/useActiveWallet";
@@ -70,6 +71,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
                   new BakoSafeConnector(),
                   new FueletWalletConnector(),
                   new FuelWalletDevelopmentConnector(),
+                  new SolanaConnector({
+                    fuelProvider: providerToUse,
+                  }),
                 ],
               }}
             >

diff --git a/templates/vite/src/routes/__root.tsx b/templates/vite/src/routes/__root.tsx
@@ -13,6 +13,7 @@ import {
   FuelWalletDevelopmentConnector,
   FueletWalletConnector,
   WalletConnectConnector,
+  SolanaConnector,
 } from "@fuels/connectors";
 import { ActiveWalletProvider } from "../hooks/useActiveWallet";
 
@@ -60,6 +61,9 @@ export const Route = createRootRoute({
                 new BakoSafeConnector(),
                 new FueletWalletConnector(),
                 new FuelWalletDevelopmentConnector(),
+                new SolanaConnector({
+                  fuelProvider: providerToUse,
+                }),
               ],
             }}
           >

diff --git a/templates/vite/src/routes/faucet.lazy.tsx b/templates/vite/src/routes/faucet.lazy.tsx
@@ -6,6 +6,7 @@ import { useFaucet } from "../hooks/useFaucet";
 import { bn } from "fuels";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
+import { CURRENT_ENVIRONMENT, Environments, TESTNET_FAUCET_LINK } from "../lib";
 
 export const Route = createLazyFileRoute("/faucet")({
   component: Index,
@@ -53,36 +54,54 @@ function Index() {
 
   return (
     <>
-      <h3 className="text-2xl font-semibold">Local Faucet</h3>
-
-      <div className="flex gap-4 items-center">
-        <label htmlFor="receiver-address-input" className="text-gray-400">
-          Receiving address:
-        </label>
-        <Input
-          className="w-full"
-          value={receiverAddress}
-          onChange={(e) => setReceiverAddress(e.target.value)}
-          placeholder="0x..."
-          id="receiver-address-input"
-        />
-      </div>
-
-      <div className="flex gap-4 items-center">
-        <label htmlFor="amount-input" className="text-gray-400">
-          Amount (ETH):
-        </label>
-        <Input
-          className="w-full"
-          value={amountToSend}
-          onChange={(e) => setAmountToSend(e.target.value)}
-          placeholder="5"
-          type="number"
-          id="amount-input"
-        />
-      </div>
-
-      <Button onClick={sendFunds}>Send Funds</Button>
+      {CURRENT_ENVIRONMENT === Environments.LOCAL && (
+        <>
+          <h3 className="text-2xl font-semibold">Local Faucet</h3>
+
+          <div className="flex gap-4 items-center">
+            <label htmlFor="receiver-address-input" className="text-gray-400">
+              Receiving address:
+            </label>
+            <Input
+              className="w-full"
+              value={receiverAddress}
+              onChange={(e) => setReceiverAddress(e.target.value)}
+              placeholder="0x..."
+              id="receiver-address-input"
+            />
+          </div>
+
+          <div className="flex gap-4 items-center">
+            <label htmlFor="amount-input" className="text-gray-400">
+              Amount (ETH):
+            </label>
+            <Input
+              className="w-full"
+              value={amountToSend}
+              onChange={(e) => setAmountToSend(e.target.value)}
+              placeholder="5"
+              type="number"
+              id="amount-input"
+            />
+          </div>
+
+          <Button onClick={sendFunds}>Send Funds</Button>
+        </>
+      )}
+
+      {CURRENT_ENVIRONMENT === Environments.TESTNET && (
+        <>
+          <iframe
+            src={
+              wallet
+                ? `${TESTNET_FAUCET_LINK}?address=${wallet.address.toB256()}`
+                : TESTNET_FAUCET_LINK
+            }
+            title="faucet"
+            className="w-full h-screen overflow-scroll"
+          />
+        </>
+      )}
     </>
   );
 }