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

Author: danwag06

src/components/ToggleSwitch.tsx

@@ -0,0 +1,73 @@
+import styled from "styled-components";
+import { ChangeEvent } from "react";
+import { Theme } from "../theme";
+
+const Label = styled.label`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+`;
+
+const Switch = styled.div`
+  position: relative;
+  width: 60px;
+  height: 28px;
+  background: #b3b3b3;
+  border-radius: 32px;
+  padding: 4px;
+  transition: 300ms all;
+
+  &:before {
+    transition: 300ms all;
+    content: "";
+    position: absolute;
+    width: 28px;
+    height: 28px;
+    border-radius: 35px;
+    top: 50%;
+    left: 4px;
+    background: white;
+    transform: translate(0, -50%);
+  }
+`;
+
+const Input = styled.input`
+  opacity: 0;
+  position: absolute;
+
+  &:checked + ${Switch} {
+    background: green;
+
+    &:before {
+      transform: translate(32px, -50%);
+    }
+  }
+`;
+
+export type ToggleSwitchProps = {
+  on: boolean;
+  label: string;
+  onLabel: string;
+  offLabel: string;
+  theme: Theme;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+
+export const ToggleSwitch = (props: ToggleSwitchProps) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (props.onChange) {
+      props.onChange(e);
+    }
+  };
+
+  return (
+    <Label>
+      <span>
+        {props.label}: {props.on ? props.onLabel : props.offLabel}
+      </span>
+      <Input checked={props.on} type="checkbox" onChange={handleChange} />
+      <Switch />
+    </Label>
+  );
+};

src/hooks/useBsv.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useKeys } from "./useKeys";
 import {
+  ChainParams,
   ECDSA,
   Hash,
   P2PKHAddress,
@@ -16,6 +17,7 @@ import {
 import { UTXO, WocUtxo, useWhatsOnChain } from "./useWhatsOnChain";
 import { SignMessageResponse } from "../pages/requests/SignMessageRequest";
 import { useBsvWasm } from "./useBsvWasm";
+import { NetWork, useNetwork } from "./useNetwork";
 
 type SendBsvResponse = {
   txid?: string;
@@ -53,8 +55,12 @@ export const useBsv = () => {
     useWhatsOnChain();
   const { retrieveKeys, bsvAddress, verifyPassword, bsvPubKey } = useKeys();
   const { bsvWasmInitialized } = useBsvWasm();
+  const { network } = useNetwork();
+  useEffect(() => { }, []);
 
-  useEffect(() => {}, []);
+  const getChainParams = (network: NetWork): ChainParams => {
+    return network === NetWork.Mainnet ? ChainParams.mainnet() : ChainParams.testnet();
+  }
 
   const sendBsv = async (
     request: Web3SendBsvRequest,
@@ -74,7 +80,7 @@ export const useBsv = () => {
       if (!keys?.walletWif || !keys.walletPubKey) throw Error("Undefined key");
       const paymentPk = PrivateKey.from_wif(keys.walletWif);
       const pubKey = paymentPk.to_public_key();
-      const fromAddress = pubKey.to_address().to_string();
+      const fromAddress = pubKey.to_address().set_chain_params(getChainParams(network)).to_string();
       const amount = request.reduce((a, r) => a + r.satAmount, 0);
 
       // Format in and outs
@@ -227,7 +233,7 @@ export const useBsv = () => {
       const hash = Hash.sha_256(Buffer.from(message)).to_hex();
       const privateKey = PrivateKey.from_wif(keys.walletWif);
       const publicKey = privateKey.to_public_key();
-      const address = publicKey.to_address().to_string();
+      const address = publicKey.to_address().set_chain_params(getChainParams(network)).to_string();
       const encoder = new TextEncoder();
       const encodedMessage = encoder.encode(hash);
       const signature = privateKey.sign_message(encodedMessage);

src/hooks/useKeys.ts

@@ -7,6 +7,9 @@ import {
 } from "../utils/crypto";
 import { Keys, getKeys } from "../utils/keys";
 import { storage } from "../utils/storage";
+import { NetWork, useNetwork } from "./useNetwork";
+import { ChainParams, P2PKHAddress } from "bsv-wasm-web";
+import { useBsvWasm } from "./useBsvWasm";
 
 export type KeyStorage = {
   encryptedKeys: string;
@@ -19,6 +22,14 @@ export const useKeys = () => {
   const [ordAddress, setOrdAddress] = useState("");
   const [bsvPubKey, setBsvPubKey] = useState("");
   const [ordPubKey, setOrdPubKey] = useState("");
+  const { network } = useNetwork();
+  const { bsvWasmInitialized } = useBsvWasm();
+
+  const getChainParams = (network: NetWork): ChainParams => {
+    return network === NetWork.Mainnet ? ChainParams.mainnet() : ChainParams.testnet();
+  }
+
+
   const generateSeedAndStoreEncrypted = (
     password: string,
     mnemonic?: string
@@ -42,20 +53,32 @@ export const useKeys = () => {
         ["encryptedKeys", "passKey", "salt"],
         async (result: KeyStorage) => {
           try {
+            if (!bsvWasmInitialized) throw Error("bsv-wasm not initialized!");
             if (!result.encryptedKeys || !result.passKey) return;
             const d = decrypt(result.encryptedKeys, result.passKey);
             const keys: Keys = JSON.parse(d);
-            setBsvAddress(keys.walletAddress);
-            setOrdAddress(keys.ordAddress);
+
+            const walletAddress = P2PKHAddress.from_string(keys.walletAddress)
+              .set_chain_params(getChainParams(network))
+              .to_string();
+
+            const ordAddress = P2PKHAddress.from_string(keys.ordAddress)
+              .set_chain_params(getChainParams(network))
+              .to_string();
+            setBsvAddress(walletAddress);
+            setOrdAddress(ordAddress);
             setBsvPubKey(keys.walletPubKey);
             setOrdPubKey(keys.ordPubKey);
             if (password) {
               const isVerified = await verifyPassword(password);
-              isVerified ? resolve(keys) : reject("Unauthorized!");
+              isVerified ? resolve(Object.assign({}, keys, {
+                ordAddress,
+                walletAddress,
+              })) : reject("Unauthorized!");
             } else {
               resolve({
-                ordAddress: keys.ordAddress,
-                walletAddress: keys.walletAddress,
+                ordAddress,
+                walletAddress,
                 walletPubKey: keys.walletPubKey,
                 ordPubKey: keys.ordPubKey,
               });
@@ -82,9 +105,10 @@ export const useKeys = () => {
   };
 
   useEffect(() => {
+    if (!bsvWasmInitialized) return
     retrieveKeys();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [bsvWasmInitialized]);
 
   return {
     generateSeedAndStoreEncrypted,

src/hooks/useNetwork.ts

@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+import { storage } from "../utils/storage";
+
+export type NetWorkStorage = {
+  network: NetWork;
+};
+
+export const enum NetWork {
+  Mainnet = "mainnet",
+  Testnet = "testnet",
+}
+
+export const useNetwork = () => {
+  const [network, setNetwork] = useState(NetWork.Mainnet);
+
+  const retrieveNetwork = (): Promise<NetWork> => {
+    return new Promise((resolve, reject) => {
+      storage.get(
+        ["network"],
+        async (result: NetWorkStorage) => {
+          try {
+            if (!result.network) {
+              setNetwork(NetWork.Mainnet);
+              resolve(NetWork.Mainnet);
+              return;
+            }
+
+            setNetwork(result.network);
+            resolve(result.network);
+          } catch (error) {
+            reject(error);
+          }
+        }
+      );
+    });
+  };
+
+  const updateNetwork = (n: NetWork): void => {
+    storage.set({
+      network: n
+    });
+    setNetwork(n)
+  };
+
+
+  useEffect(() => {
+    retrieveNetwork();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return {
+    retrieveNetwork,
+    network,
+    updateNetwork
+  };
+};

src/hooks/useOrds.ts

@@ -1,12 +1,13 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
-import { FEE_PER_BYTE, GP_BASE_URL } from "../utils/constants";
+import { FEE_PER_BYTE, GP_BASE_URL, GP_TESTNET_BASE_URL } from "../utils/constants";
 import { useKeys } from "./useKeys";
 import { UTXO, WocUtxo, useWhatsOnChain } from "./useWhatsOnChain";
 import { sendOrdinal } from "js-1sat-ord-web";
 import { P2PKHAddress, PrivateKey, Transaction } from "bsv-wasm-web";
 import { useBsvWasm } from "./useBsvWasm";
 import { Outpoint } from "../utils/outpoint";
+import { NetWork, useNetwork } from "./useNetwork";
 
 export class InscriptionData {
   type?: string = '';
@@ -30,7 +31,7 @@ export class Origin {
   outpoint: Outpoint = new Outpoint();
   data?: TxoData;
   num?: number;
-  map?: {[key: string]:any};
+  map?: { [key: string]: any };
   claims?: Claim[]
 }
 
@@ -43,20 +44,20 @@ export enum Bsv20Status {
 export class TxoData {
   types?: string[];
   insc?: File;
-  map?: {[key: string]:any};
+  map?: { [key: string]: any };
   b?: File;
   sigma?: Sigma[];
   list?: {
-      price: number;
-      payout: string;
+    price: number;
+    payout: string;
   };
   bsv20?: {
-      id?:  Outpoint;
-      p: string;
-      op: string;
-      tick?: string;
-      amt: string;
-      status?: Bsv20Status 
+    id?: Outpoint;
+    p: string;
+    op: string;
+    tick?: string;
+    amt: string;
+    status?: Bsv20Status
   };
 }
 
@@ -145,13 +146,18 @@ export const useOrds = () => {
   const [ordinals, setOrdinals] = useState<OrdinalResponse>([]);
   const [isProcessing, setIsProcessing] = useState(false);
   const { bsvWasmInitialized } = useBsvWasm();
+  const { network } = useNetwork();
+
+  const getOrdinalsBaseUrl = () => {
+    return network === NetWork.Mainnet ? GP_BASE_URL : GP_TESTNET_BASE_URL;
+  };
 
   const getOrdinals = async () => {
     try {
       //   setIsProcessing(true); // TODO: set this to true if call is taking more than a second
       //TODO: Implement infinite scroll to handle instances where user has more than 100 items.
       const res = await axios.get(
-        `${GP_BASE_URL}/api/txos/address/${ordAddress}/unspent?limit=100&offset=0`
+        `${getOrdinalsBaseUrl()}/api/txos/address/${ordAddress}/unspent?limit=100&offset=0`
       );
 
       const ordList: OrdinalResponse = res.data;
@@ -313,7 +319,7 @@ export const useOrds = () => {
         return [];
       }
       const r = await axios.get(
-        `${GP_BASE_URL}/api/txos/address/${ordAddress}/unspent?limit=100&offset=0`
+        `${getOrdinalsBaseUrl()}/api/txos/address/${ordAddress}/unspent?limit=100&offset=0`
       );
 
       const utxos = r.data as OrdinalResponse;
@@ -343,5 +349,6 @@ export const useOrds = () => {
     isProcessing,
     transferOrdinal,
     setIsProcessing,
+    getOrdinalsBaseUrl,
   };
 };