Merge branch 'main' of github.com:Panda-Wallet/panda-wallet

Author: danwag06

package-lock.json

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { ChangeEvent } from "react";
-import { Theme } from "../theme";
+import { ColorThemeProps, Theme } from "../theme";
 
 const Label = styled.label`
   display: flex;
@@ -9,52 +9,58 @@ const Label = styled.label`
   cursor: pointer;
 `;
 
-const Switch = styled.div`
+const Switch = styled.div<ColorThemeProps>`
   position: relative;
-  width: 60px;
-  height: 28px;
-  background: #b3b3b3;
-  border-radius: 32px;
-  padding: 4px;
+  width: 2rem;
+  height: 1rem;
+  background: ${({ theme }) => theme.darkAccent + "70"};
+  border-radius: 2rem;
+  padding: 0.25rem;
   transition: 300ms all;
 
   &:before {
     transition: 300ms all;
     content: "";
     position: absolute;
-    width: 28px;
-    height: 28px;
-    border-radius: 35px;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 2.1875rem;
     top: 50%;
-    left: 4px;
-    background: white;
+    left: 0rem;
+    background: ${({ theme }) => theme.white};
     transform: translate(0, -50%);
   }
 `;
 
-const Input = styled.input`
+const Input = styled.input<ColorThemeProps>`
   opacity: 0;
   position: absolute;
 
   &:checked + ${Switch} {
-    background: green;
+    background: ${({ theme }) => theme.primaryButton + "95"};
 
     &:before {
-      transform: translate(32px, -50%);
+      transform: translate(1.25rem, -50%);
     }
   }
 `;
 
+const Text = styled.p<ColorThemeProps>`
+  color: ${({ theme }) => theme.white};
+  font-size: 0.85rem;
+`;
+
 export type ToggleSwitchProps = {
   on: boolean;
-  label: string;
   onLabel: string;
   offLabel: string;
   theme: Theme;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 };
 
 export const ToggleSwitch = (props: ToggleSwitchProps) => {
+  const { on, onLabel, offLabel, theme } = props;
+
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (props.onChange) {
       props.onChange(e);
@@ -63,11 +69,14 @@ export const ToggleSwitch = (props: ToggleSwitchProps) => {
 
   return (
     <Label>
-      <span>
-        {props.label}: {props.on ? props.onLabel : props.offLabel}
-      </span>
-      <Input checked={props.on} type="checkbox" onChange={handleChange} />
-      <Switch />
+      <Text theme={theme}>{on ? onLabel : offLabel}</Text>
+      <Input
+        checked={on}
+        type="checkbox"
+        onChange={handleChange}
+        theme={theme}
+      />
+      <Switch theme={theme} />
     </Label>
   );
 };

src/components/ToggleSwitch.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, createContext, useState } from "react";
 import { Snackbar } from "../components/Snackbar";
 import { useTheme } from "../hooks/useTheme";
+import { SNACKBAR_TIMEOUT } from "../utils/constants";
 
 export type SnackbarType = "error" | "info" | "success";
 
@@ -29,7 +30,7 @@ export const SnackbarProvider = (props: SnackbarProviderProps) => {
     setTimeout(() => {
       setMessage(null);
       setSnackBarType(null);
-    }, 2500);
+    }, SNACKBAR_TIMEOUT);
   };
 
   return (

src/contexts/SnackbarContext.tsx

@@ -39,8 +39,7 @@ export const WalletLockProvider = (props: WalletLockProviderProps) => {
         }
 
         if (currentTime - lastActiveTime > INACTIVITY_LIMIT) {
-          setIsLocked(true);
-          storage.remove("appState");
+          lockWallet();
         } else {
           setIsLocked(false);
         }

src/contexts/WalletLockContext.tsx

@@ -11,13 +11,14 @@ import { useTheme } from "../hooks/useTheme";
 import { useWalletLockState } from "../hooks/useWalletLockState";
 import { ToggleSwitch } from "../components/ToggleSwitch";
 import { NetWork, useNetwork } from "../hooks/useNetwork";
+import { useSnackbar } from "../hooks/useSnackbar";
+import { SNACKBAR_TIMEOUT } from "../utils/constants";
 
 const Content = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
-  position: relative;
 `;
 
 const TitleText = styled.h1<ColorThemeProps>`
@@ -29,12 +30,19 @@ const TitleText = styled.h1<ColorThemeProps>`
   text-align: center;
 `;
 
+const SwitchWrapper = styled.div`
+  position: absolute;
+  top: 1rem;
+  right: 2rem;
+`;
+
 export const Settings = () => {
   const { theme } = useTheme();
   const { setSelected } = useBottomMenu();
   const { lockWallet } = useWalletLockState();
   const [showSpeedBump, setShowSpeedBump] = useState(false);
   const { network, updateNetwork } = useNetwork();
+  const { addSnackbar } = useSnackbar();
 
   const handleSignOut = async () => {
     await storage.clear();
@@ -51,15 +59,31 @@ export const Settings = () => {
 
   const handleLock = () => {
     lockWallet();
-    setSelected("bsv");
+    // setSelected("bsv");
   };
 
   const handleNetworkChange = (e: any) => {
-    updateNetwork(e.target.checked ? NetWork.Mainnet : NetWork.Testnet)
+    const network = e.target.checked ? NetWork.Mainnet : NetWork.Testnet;
+    updateNetwork(network);
+
+    // The provider relies on appState in local storage to accurately return addresses. This is an easy way to handle making sure the state is always up to date.
+    addSnackbar(`Switching to ${network}`, "info");
+    setTimeout(() => {
+      window.location.reload();
+    }, SNACKBAR_TIMEOUT - 500);
   };
 
   return (
     <Content>
+      <SwitchWrapper>
+        <ToggleSwitch
+          theme={theme}
+          on={network === NetWork.Mainnet}
+          onChange={handleNetworkChange}
+          onLabel="Mainnet"
+          offLabel="Testnet"
+        />
+      </SwitchWrapper>
       <Show
         when={!showSpeedBump}
         whenFalseContent={
@@ -75,15 +99,6 @@ export const Settings = () => {
         <TitleText theme={theme}>⚙️</TitleText>
         <TitleText theme={theme}>My Settings</TitleText>
         <Text theme={theme}>Page is under active development.</Text>
-
-        <ToggleSwitch
-          theme={theme}
-          on={network === NetWork.Mainnet}
-          onChange={handleNetworkChange}
-          label="Network"
-          onLabel="Mainnet"
-          offLabel="Testnet"
-        />
         <Button
           theme={theme}
           label="Sign Out"

src/pages/Settings.tsx

@@ -9,3 +9,4 @@ export const GORILLA_POOL_ARC_URL = "https://arc.gorillapool.io/v1";
 export const BSV_DECIMAL_CONVERSION = 100000000;
 export const FEE_PER_BYTE = 0.02;
 export const INACTIVITY_LIMIT = 10 * 60 * 1000; // 10 minutes
+export const SNACKBAR_TIMEOUT = 2.5 * 1000; // 2.5 seconds