FuelLabs · luizstacio · Apr 1, 2024 · Mar 29, 2024 · Mar 29, 2024 · Mar 29, 2024
@@ -0,0 +1,2 @@
+---
+---
@@ -1,12 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Fuel Connectors</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <link rel="icon" href="./logo.png" />
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Fuel enables developers to build integrations with any wallet." />
+  <title>Fuel Connectors</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
@@ -8,10 +8,12 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@radix-ui/react-toast": "1.1.5",
+    "clsx": "2.1.0",
+    "fuels": "0.79.0",
     "@fuels/connectors": "workspace:*",
     "@fuels/react": "0.18.0",
     "@tanstack/react-query": "5.28.8",
-    "fuels": "0.79.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -20,6 +22,9 @@
     "@types/react": "18.2.71",
     "@types/react-dom": "18.2.22",
     "@vitejs/plugin-react": "4.2.1",
+    "tailwindcss": "3.4.1",
+    "autoprefixer": "10.4.19",
+    "postcss": "8.4.38",
     "typescript": "5.4.3",
     "vite": "5.2.6"
   }

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
@@ -1,55 +1,110 @@
-import {
-  useAccounts,
-  useConnectUI,
-  useDisconnect,
-  useIsConnected,
-} from '@fuels/react';
-import './App.css';
+import Account from './components/account';
+import Balance from './components/balance';
+import Button from './components/button';
+import Counter from './components/counter';
+import Transfer from './components/transfer';
+import { useWallet } from './hooks/useWallet';
 
-function App() {
-  const { connect, error, isError, theme, setTheme, isConnecting } =
-    useConnectUI();
-  const { disconnect } = useDisconnect();
-  const { isConnected } = useIsConnected();
-  const { accounts } = useAccounts();
-  const lightTheme = theme === 'light';
+export default function App() {
+  const {
+    currentConnector,
+    isConnected,
+    isConnecting,
+    isLoading,
+    isFetching,
+    connect,
+  } = useWallet();
 
   return (
-    <div className="App" data-theme={theme}>
-      <div className="Actions">
-        <button
-          type="button"
-          onClick={() => {
-            connect();
-          }}
+    <main
+      data-theme="dark"
+      className="flex items-center justify-center lg:h-screen dark:text-zinc-50/90"
+    >
+      <div id="container" className="mx-8 mb-32 w-full max-w-5xl lg:mb-0">
+        <nav
+          id="nav"
+          className="flex items-center justify-center py-6 lg:pb-10 lg:pt-0"
         >
-          {isConnecting ? 'Connecting' : 'Connect'}
-        </button>
-        {isConnected && (
-          <button type="button" onClick={() => disconnect()}>
-            Disconnect
-          </button>
-        )}
-        <button
-          type="button"
-          onClick={() => setTheme(lightTheme ? 'dark' : 'light')}
-        >
-          {lightTheme ? '🌙' : '☀️'}
-        </button>
-      </div>
-      {isError && <p className="Error">{error?.message}</p>}
-      {isConnected && (
-        <div className="Accounts">
-          <h3>Connected accounts</h3>
-          {accounts?.map((account) => (
-            <div key={account}>
-              <b>Account:</b> {account}
+          <a href="https://fuel.network/" target="_blank" rel="noreferrer">
+            <img src="./logo_white.png" alt="Fuel Logo" className="w-[124px]" />
+          </a>
+        </nav>
+
+        <div className="gradient-border rounded-2xl">
+          <div className="grain rounded-2xl p-1.5 drop-shadow-xl">
+            <div
+              id="grid"
+              className="lg:grid lg:grid-cols-7 lg:grid-rows-1 lg:gap-12"
+            >
+              <div
+                id="text"
+                className="col-span-3 px-4 py-8 sm:px-8 sm:py-8 md:px-10 md:py-12"
+              >
+                <div className="flex h-20 items-end">
+                  <img
+                    src={currentConnector.logo}
+                    alt={currentConnector.title}
+                    className="w-20"
+                  />
+                </div>
+                <h1 className="pb-1 pt-6 text-3xl font-medium">
+                  {currentConnector.title}
+                </h1>
+                <p>
+                  Fuel enables developers to build integrations with any wallet.
+                </p>
+
+                <ul className="list-inside list-disc pt-8">
+                  <li>Reduce friction for users</li>
+                  <li>Build using any signature scheme</li>
+                  <li>
+                    Use predicates, a new type of stateless smart contract
+                  </li>
+                </ul>
+                <a
+                  href="https://github.com/FuelLabs/fuel-connectors"
+                  target="_blank"
+                  className="block pt-4 text-green-500/80 transition-colors hover:text-green-500"
+                  rel="noreferrer"
+                >
+                  Build your own wallet integration
+                </a>
+              </div>
+
+              <div className="col-span-4">
+                <div className="gradient-border h-full rounded-xl bg-gradient-to-b from-zinc-900 to-zinc-950/80">
+                  {!isConnected && (
+                    <section className="flex h-full flex-col items-center justify-center px-4 py-8 sm:px-8 sm:py-8 md:px-10 md:py-12">
+                      <Button
+                        onClick={connect}
+                        loading={isConnecting}
+                        loadingText="Connecting"
+                      >
+                        Connect Wallet
+                      </Button>
+                    </section>
+                  )}
+
+                  {(isLoading ?? isFetching) && (
+                    <section className="flex h-full flex-col items-center justify-center px-4 py-8 sm:px-8 sm:py-8 md:px-10 md:py-12">
+                      <p>Loading...</p>
+                    </section>
+                  )}
+
+                  {isConnected && !isLoading && (
+                    <section className="flex h-full flex-col justify-center space-y-6 px-4 py-8 sm:px-8 sm:py-8 md:px-10 md:py-12">
+                      <Account />
+                      <Balance />
+                      <Counter />
+                      <Transfer />
+                    </section>
+                  )}
+                </div>
+              </div>
             </div>
-          ))}
+          </div>
         </div>
-      )}
-    </div>
+      </div>
+    </main>
   );
 }
-
-export default App;