Merge pull request #99 from FuelLabs/sophie/disconnect

feat: add disconnect button
FuelLabs · Sep 17, 2024 · 5edcbe9 · 5edcbe9
2 parents 222d9eb + 8497e81
commit 5edcbe9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/app/src/components/Providers.tsx b/app/src/components/Providers.tsx
@@ -12,7 +12,7 @@ type ProvidersProps = {
 };
 
 export function Providers({ children }: ProvidersProps) {
-  const { muiTheme } = useTheme();
+  const { muiTheme, theme } = useTheme();
 
   return (
     <ThemeProvider theme={muiTheme}>
@@ -21,6 +21,7 @@ export function Providers({ children }: ProvidersProps) {
           fuelConfig={{
             connectors: defaultConnectors({ devMode: true }),
           }}
+          theme={theme}
         >
           {globalCss()()}
           {children}

diff --git a/app/src/features/toolbar/components/ActionToolbar.tsx b/app/src/features/toolbar/components/ActionToolbar.tsx
@@ -12,6 +12,8 @@ import {
 } from "../../../utils/localStorage";
 import { useIsMobile } from "../../../hooks/useIsMobile";
 import SwitchThemeButton from "./SwitchThemeButton";
+import { useConnectIfNotAlready } from "../hooks/useConnectIfNotAlready";
+import { useDisconnect } from "@fuels/react";
 
 export interface ActionToolbarProps {
   deployState: DeployState;
@@ -41,6 +43,8 @@ function ActionToolbar({
   updateLog,
 }: ActionToolbarProps) {
   const isMobile = useIsMobile();
+  const { isConnected } = useConnectIfNotAlready();
+  const { disconnect } = useDisconnect();
 
   const onDocsClick = useCallback(() => {
     window.open("https://docs.fuel.network/docs/sway", "_blank", "noreferrer");
@@ -108,6 +112,14 @@ function ActionToolbar({
         text="SHARE"
         tooltip={"Get a shareable link to your code"}
       />
+      {isConnected && !isMobile && (
+        <SecondaryButton
+          header={true}
+          onClick={disconnect}
+          text="DISCONNECT"
+          tooltip={"Disconnect from the wallet"}
+        />
+      )}
       {!isMobile && <SwitchThemeButton />}
     </div>
   );