@pioneer-platform/pioneer-react 0.2.35 → 0.2.37

package/src/lib/context/Pioneer/index.tsx

@@ -39,9 +39,15 @@ import { KkRestAdapter } from "@keepkey/hdwallet-keepkey-rest";
 import { KeepKeySdk } from "@keepkey/keepkey-sdk";
 import { SDK } from "@pioneer-sdk/sdk";
 import * as core from "@shapeshiftoss/hdwallet-core";
-import { enableShapeShiftSnap, shapeShiftSnapInstalled } from '@shapeshiftoss/metamask-snaps-adapter'
+import {
+  enableShapeShiftSnap,
+  shapeShiftSnapInstalled,
+} from "@shapeshiftoss/metamask-snaps-adapter";
 // import * as keplr from "@shapeshiftoss/hdwallet-keplr";
-import * as metaMask from "@shapeshiftoss/hdwallet-metamask";
+// import * as metaMask from "@shapeshiftoss/hdwallet-metamask";
+import * as metaMask from "@shapeshiftoss/hdwallet-shapeshift-multichain";
+import { MetaMaskAdapter as MetaMaskSnapAdapter } from '@shapeshiftoss/hdwallet-shapeshift-multichain'
+import { MetaMaskShapeShiftMultiChainHDWallet } from '@shapeshiftoss/hdwallet-shapeshift-multichain'
 import type { NativeHDWallet } from "@shapeshiftoss/hdwallet-native";
 import { EventEmitter } from "events";
 import { NativeAdapter } from "@shapeshiftoss/hdwallet-native";
@@ -60,11 +66,12 @@ import { checkKeepkeyAvailability, timeout } from "lib/components/utils";
 
 const eventEmitter = new EventEmitter();
 
-const SNAP_ID = "npm:@shapeshiftoss/metamask-snaps"
+const SNAP_ID = "npm:@shapeshiftoss/metamask-snaps";
 
 export enum WalletActions {
   SET_STATUS = "SET_STATUS",
   SET_USERNAME = "SET_USERNAME",
+  OPEN_MODAL = "OPEN_MODAL",
   SET_API = "SET_API",
   SET_APP = "SET_APP",
   SET_WALLET = "SET_WALLET",
@@ -124,6 +131,7 @@ export interface IPioneerContext {
 export type ActionTypes =
   | { type: WalletActions.SET_STATUS; payload: any }
   | { type: WalletActions.SET_USERNAME; payload: string }
+  | { type: WalletActions.OPEN_MODAL; payload: string }
   | { type: WalletActions.SET_APP; payload: any }
   | { type: WalletActions.SET_API; payload: any }
   | { type: WalletActions.SET_CONTEXT; payload: any }
@@ -153,6 +161,8 @@ const reducer = (state: InitialState, action: ActionTypes) => {
     case WalletActions.SET_USERNAME:
       //eventEmitter.emit("SET_USERNAME", action.payload);
       return { ...state, username: action.payload };
+    case WalletActions.OPEN_MODAL:
+      return { ...state, payload: action.payload };
     case WalletActions.SET_APP:
       return { ...state, app: action.payload };
     case WalletActions.SET_API:
@@ -181,13 +191,24 @@ export const PioneerProvider = ({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   const [state, dispatch] = useReducer(reducer, initialState);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const showModal = (message:string) => {
+    console.log("OPEN MODAL: modal: ", message)
+    setIsModalOpen(true);
+    // Optional: You can also set a message to be displayed in the modal
+  };
+
+  const hideModal = () => {
+    setIsModalOpen(false);
+  };
 
   //TODO add wallet to state
-  const connectWallet = async function(wallet:string){
-    try{
-      console.log("connectWallet: ",wallet)
+  const connectWallet = async function (wallet: string) {
+    try {
+      console.log("connectWallet: ", wallet);
 
-      if(wallet === "metamask"){
+      if (wallet === "metamask") {
         // walletMetaMask = await metaMaskAdapter.pairDevice();
         // if (walletMetaMask) {
         //   // pair metamask
@@ -222,16 +243,13 @@ export const PioneerProvider = ({
         //     payload: "MetaMask connected!",
         //   });
         // }
-      }else if (wallet === "keepkey"){
+      } else if (wallet === "keepkey") {
 
       }
-
-
-
-    }catch(e){
-      console.error(e)
+    } catch (e) {
+      console.error(e);
     }
-  }
+  };
 
   const onStart = async function () {
     try {
@@ -242,8 +260,11 @@ export const PioneerProvider = ({
       dispatch({ type: WalletActions.SET_USERNAME, payload: username });
 
       //if auto connecting
-      let metamaskPaired = localStorage.getItem("metamaskPaired");
-      console.log("metamaskPaired: ", metamaskPaired);
+      const isOnboarded = localStorage.getItem("userOnboarded");
+      console.log("isOnboarded: ", isOnboarded);
+
+      //
+
 
       const isKeepkeyAvailable = await checkKeepkeyAvailability();
       console.log("isKeepkeyAvailable: ", isKeepkeyAvailable);
@@ -251,15 +272,13 @@ export const PioneerProvider = ({
       //is metamask available?
       const isMetaMaskAvailable = (): boolean => {
         return (
-            (window as any).ethereum !== undefined &&
-            (window as any).ethereum.isMetaMask
+          (window as any).ethereum !== undefined &&
+          (window as any).ethereum.isMetaMask
         );
       };
       const keyring = new core.Keyring();
       const metaMaskAdapter = metaMask.MetaMaskAdapter.useKeyring(keyring);
 
-
-
       if (!queryKey) {
         queryKey = `key:${uuidv4()}`;
         localStorage.setItem("queryKey", queryKey);
@@ -282,7 +301,7 @@ export const PioneerProvider = ({
 
       // @TODO add custom paths from localstorage
       const paths: any = [];
-      console.log("VITE_PIONEER_URL_SPEC: ",)
+      console.log("VITE_PIONEER_URL_SPEC: ");
       const spec =
         //@ts-ignore
         "https://pioneers.dev/spec/swagger.json";
@@ -304,17 +323,18 @@ export const PioneerProvider = ({
       // @ts-ignore
       dispatch({ type: WalletActions.SET_APP, payload: appInit });
       // Example usage
+      // @ts-ignore
       let walletMetaMask: metaMask.MetaMaskHDWallet | undefined;
       if (isMetaMaskAvailable()) {
         //is snap enabled?
-        let isSnapInstalled = await shapeShiftSnapInstalled(SNAP_ID);
-        console.log(isSnapInstalled)
+        const isSnapInstalled = await shapeShiftSnapInstalled(SNAP_ID);
+        console.log(isSnapInstalled);
 
         //if not installed install snap
-        if(!isSnapInstalled){
-            //install it
-            let result = await enableShapeShiftSnap(SNAP_ID);
-            console.log("result: ", result)
+        if (!isSnapInstalled) {
+          //install it
+          const result = await enableShapeShiftSnap(SNAP_ID,"1.0.0");
+          console.log("result: ", result);
         }
 
         //console.log("isMetaMaskAvailable ")
@@ -322,7 +342,7 @@ export const PioneerProvider = ({
         if (walletMetaMask) {
           // pair metamask
           await walletMetaMask.initialize();
-          //console.log("walletMetaMask: ", walletMetaMask);
+          console.log("walletMetaMask: ", walletMetaMask);
 
           // get all accounts
           //@ts-ignore
@@ -335,9 +355,9 @@ export const PioneerProvider = ({
 
           const successMetaMask = await appInit.pairWallet(walletMetaMask);
           console.log("successMetaMask: ", successMetaMask);
-          if(successMetaMask){
+          if (successMetaMask) {
             // @ts-ignore
-            if (appInit.pubkeyContext?.master || appInit?.pubkey){
+            if (appInit.pubkeyContext?.master || appInit?.pubkey) {
               // @ts-ignore
               dispatch({
                 type: WalletActions.SET_PUBKEY_CONTEXT,
@@ -395,57 +415,35 @@ export const PioneerProvider = ({
           alert("Please restart your KeepKey and try again.");
         }
       }
-
+      
       let walletSoftware: NativeHDWallet | null;
-      let mnemonic;
-      let hashStored;
-      let hash;
+      //if native wallet saved
+      let mnemonic = localStorage.getItem("seedPhrase");
       const nativeAdapter = NativeAdapter.useKeyring(keyring);
-      //is metamask available AND no KeepKey
-      hashStored = localStorage.getItem("hash");
-
-      if (hashStored) {
-        //generate software from metamask
-        //console.log('hashStored: ', hashStored);
-        const hashSplice = (str: string | any[] | null) => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          return str.slice(0, 34);
-        };
-        // @ts-ignore
-        hash = hashSplice(hashStored);
-        // eslint-disable-next-line no-console
-        //console.log('hash (trimmed): ', hash);
-        // @ts-ignore
-        const hashBytes = hash.replace("0x", "");
-        //console.log('hashBytes', hashBytes);
-        //console.log('hashBytes', hashBytes.length);
-        mnemonic = entropyToMnemonic(hashBytes.toString(`hex`));
 
+      if(mnemonic){
+        console.log("mnemonic: ", mnemonic);
+        
+        //if no metamask AND no keepkey
         // get walletSoftware
         walletSoftware = await nativeAdapter.pairDevice("testid");
         await nativeAdapter.initialize();
         // @ts-ignore
         await walletSoftware.loadDevice({ mnemonic });
+        console.log("walletSoftware: ", walletSoftware);
         const successSoftware = await appInit.pairWallet(walletSoftware);
-        //console.log("successSoftware: ", successSoftware);
+        console.log("successSoftware: ", successSoftware);
+        // @ts-ignore
+        dispatch({ type: WalletActions.ADD_WALLET, payload: walletSoftware });
+        // @ts-ignore
+        dispatch({
+          type: WalletActions.SET_STATUS,
+          payload: "Software wallet connected!",
+        });
+      }
 
-        //events!
-        const events = await appInit.startSocket();
 
-        events.on("message", (event: any) => {
-          //console.log("message: ", event);
-        });
 
-        events.on("blocks", (event: any) => {
-          //console.log("blocks: ", event);
-          // @ts-ignore
-          dispatch({
-            type: WalletActions.SET_STATUS,
-            payload: "Block Scanned!",
-          });
-        });
-      }
     } catch (e) {
       // eslint-disable-next-line no-console
       console.error(e);
@@ -454,6 +452,7 @@ export const PioneerProvider = ({
 
   // onstart get data
   useEffect(() => {
+    showModal('foo');
     onStart();
   }, []);
 
@@ -465,5 +464,9 @@ export const PioneerProvider = ({
   );
 };
 
+type ModalProps = {
+  onClose: () => void;
+};
+
 export const usePioneer = (): any =>
   useContext(PioneerContext as unknown as React.Context<IPioneerContext>);

package/src/lib/pages/home/index.tsx

@@ -17,12 +17,13 @@ import WalletSelect from "lib/components/WalletSelect";
 
 const Home = () => {
   const { state } = usePioneer();
-  const { api, app, context, assetContext, blockchainContext, pubkeyContext } =
+  const { api, app, context, assetContext, blockchainContext, pubkeyContext, modals } =
     state;
   const [address, setAddress] = useState("");
   const [modalType, setModalType] = useState("");
   const { isOpen, onOpen, onClose } = useDisclosure();
 
+
   useEffect(() => {
     console.log("2 pubkeyContext: ", pubkeyContext);
     setAddress(pubkeyContext.master || pubkeyContext.pubkey || pubkeyContext);
@@ -33,6 +34,13 @@ const Home = () => {
     onOpen();
   };
 
+  let refresh = async () => {
+      //TODO why do I need to press refresh?
+      console.log("2 pubkeyContext: ", pubkeyContext);
+      setAddress(pubkeyContext.master || pubkeyContext.pubkey || pubkeyContext);
+      console.log("assetContext: ",assetContext)
+  }
+
   return (
     <div>
       <Modal isOpen={isOpen} onClose={() => onClose()} size="xl">
@@ -58,6 +66,11 @@ const Home = () => {
               </div>
             )}
             {modalType === "View Address" && <div>address: {address}</div>}
+            {modalType === "Select Outbound" && (
+              <div>
+                <BlockchainSelect onClose={onClose}></BlockchainSelect>
+              </div>
+            )}
           </ModalBody>
           <ModalFooter>
             <Button colorScheme="blue" onClick={onClose}>
@@ -66,7 +79,7 @@ const Home = () => {
           </ModalFooter>
         </ModalContent>
       </Modal>
-      Context: {context}
+      Wallet Context: {context}
       <Button onClick={() => openModal("Select wallet")}>Select wallet</Button>
       <br />
       Asset Context: {assetContext?.name}
@@ -77,9 +90,13 @@ const Home = () => {
         Select Blockchain
       </Button>
       <br />
-      Address: {address}
+      Address for context: {address}
       <Button onClick={() => openModal("View Address")}>View Address</Button>
       <br />
+      Outbound asset context: {address}
+      <Button onClick={() => openModal("Select Outbound")}>Select asset</Button>
+      <br />
+      <Button onClick={refresh}>refresh</Button>
     </div>
   );
 };

package/dist/index_622864fe.js

@@ -1,205 +0,0 @@
-import { u as usePioneer, j as jsxRuntimeExports, S as Search2Icon, M as MiddleEllipsis, W as WalletSelect, A as AssetSelect } from "./index_bc632802.js";
-import { Stack, InputGroup, InputLeftElement, Input, Box, Text, Checkbox, HStack, Avatar, Button, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter } from "@chakra-ui/react";
-import { useState, useEffect } from "react";
-import "react-dom";
-import "@emotion/react";
-function BlockchainSelect({ onClose }) {
-  const { state, dispatch } = usePioneer();
-  const { api, app, user } = state;
-  const [searchQuery, setSearchQuery] = useState("");
-  const [currentPage, setCurrentPage] = useState([]);
-  const [currentPageIndex, setCurrentPageIndex] = useState(0);
-  const [showOwnedAssets, setShowOwnedAssets] = useState(false);
-  const [timeOut, setTimeOut] = useState(null);
-  const itemsPerPage = 6;
-  const handleSelectClick = async (asset) => {
-    try {
-      const changeAssetContext = await app.setAssetContext(asset);
-      onClose();
-    } catch (e) {
-      console.error(e);
-    }
-  };
-  const onSearch = async function(searchQuery2) {
-    try {
-      if (!api) {
-        alert("Failed to init API!");
-        return;
-      }
-      const search = {
-        limit: itemsPerPage,
-        skip: currentPageIndex * itemsPerPage,
-        // Use currentPageIndex for pagination
-        collection: "blockchains",
-        searchQuery: searchQuery2,
-        searchFields: ["name", "symbol"]
-      };
-      const info = await api.SearchAtlas(search);
-      const currentPageData = info.data.results;
-      setCurrentPage(currentPageData);
-      setTotalBlockchains(info.data.total);
-    } catch (e) {
-      console.error(e);
-    }
-  };
-  const fetchPage = async (pageIndex) => {
-    try {
-      if (!api) {
-        alert("Failed to init API!");
-        return;
-      }
-      const search = {
-        limit: itemsPerPage,
-        skip: pageIndex * itemsPerPage,
-        collection: "blockchains",
-        ownedBy: showOwnedAssets ? user.id : void 0
-      };
-      const info = await api.SearchAtlas(search);
-      const currentPageData = info.data.results;
-      setCurrentPage(currentPageData);
-      setTotalBlockchains(info.data.total);
-    } catch (e) {
-      console.error(e);
-    }
-  };
-  useEffect(() => {
-    fetchPage(currentPageIndex);
-  }, [currentPageIndex, showOwnedAssets]);
-  const [totalBlockchains, setTotalBlockchains] = useState(0);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { spacing: 4, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(InputGroup, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(InputLeftElement, { pointerEvents: "none", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Search2Icon, { color: "gray.300" }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Input,
-        {
-          placeholder: "Bitcoin...",
-          type: "text",
-          value: searchQuery,
-          onChange: (e) => {
-            setSearchQuery(e.target.value);
-            if (timeOut) {
-              clearTimeout(timeOut);
-            }
-            setTimeOut(
-              // @ts-ignore
-              setTimeout(() => {
-                setCurrentPageIndex(0);
-                onSearch(e.target.value);
-              }, 1e3)
-            );
-          }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { fontSize: "2xl", children: [
-        "Total Chains: ",
-        totalBlockchains
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Checkbox,
-        {
-          isChecked: showOwnedAssets,
-          onChange: () => setShowOwnedAssets(!showOwnedAssets),
-          children: "Show only blockchains you have assets on"
-        }
-      ),
-      currentPage.map((blockchain, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(HStack, { spacing: 4, alignItems: "center", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Avatar, { src: blockchain == null ? void 0 : blockchain.image }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { children: [
-              "blockchain: ",
-              /* @__PURE__ */ jsxRuntimeExports.jsx(MiddleEllipsis, { text: blockchain == null ? void 0 : blockchain.caip })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { children: [
-              "name: ",
-              blockchain.name
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(HStack, { mt: 2, spacing: 2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
-          {
-            size: "sm",
-            variant: "outline",
-            onClick: () => handleSelectClick(blockchain),
-            children: "Select"
-          }
-        ) })
-      ] }, index))
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(HStack, { mt: 4, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          isDisabled: currentPageIndex === 0,
-          onClick: () => setCurrentPageIndex(currentPageIndex - 1),
-          children: "Previous Page"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          isDisabled: currentPage.length < itemsPerPage,
-          onClick: () => setCurrentPageIndex(currentPageIndex + 1),
-          children: "Next Page"
-        }
-      )
-    ] })
-  ] });
-}
-const Home = () => {
-  const { state } = usePioneer();
-  const { api, app, context, assetContext, blockchainContext, pubkeyContext } = state;
-  const [address, setAddress] = useState("");
-  const [modalType, setModalType] = useState("");
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  useEffect(() => {
-    console.log("2 pubkeyContext: ", pubkeyContext);
-    setAddress(pubkeyContext.master || pubkeyContext.pubkey || pubkeyContext);
-  }, [pubkeyContext]);
-  const openModal = (type) => {
-    setModalType(type);
-    onOpen();
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Modal, { isOpen, onClose: () => onClose(), size: "xl", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ModalOverlay, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(ModalContent, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ModalHeader, { children: modalType }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ModalCloseButton, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(ModalBody, { children: [
-          modalType === "Select wallet" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(WalletSelect, { onClose }) }),
-          modalType === "Select Asset" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AssetSelect, { onClose }) }),
-          modalType === "Select Blockchain" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(BlockchainSelect, { onClose }) }),
-          modalType === "View Address" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-            "address: ",
-            address
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ModalFooter, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { colorScheme: "blue", onClick: onClose, children: "Close" }) })
-      ] })
-    ] }),
-    "Context: ",
-    context,
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: () => openModal("Select wallet"), children: "Select wallet" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-    "Asset Context: ",
-    assetContext == null ? void 0 : assetContext.name,
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: () => openModal("Select Asset"), children: "Select Asset" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-    "Blockchain Context: ",
-    blockchainContext == null ? void 0 : blockchainContext.name,
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: () => openModal("Select Blockchain"), children: "Select Blockchain" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-    "Address: ",
-    address,
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: () => openModal("View Address"), children: "View Address" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
-  ] });
-};
-export {
-  Home as default
-};