@pioneer-platform/pioneer-react 0.2.35 → 0.2.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pioneer-platform/pioneer-react",
-  "version": "0.2.35",
+  "version": "0.2.36",
   "author": "highlander",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -33,13 +33,15 @@
     "@keepkey/hdwallet-keepkey-rest": "^1.40.29",
     "@keepkey/keepkey-sdk": "^0.2.48",
     "@pioneer-platform/pioneer-client": "^9.0.6",
-    "@pioneer-sdk/sdk": "1.1.158",
+    "@pioneer-sdk/sdk": "1.1.160",
     "@shapeshiftoss/hdwallet-core": "^1.50.0",
     "@shapeshiftoss/hdwallet-metamask": "^1.50.0",
     "@shapeshiftoss/hdwallet-native": "^1.50.3",
-    "@shapeshiftoss/metamask-snaps-adapter": "^1.0.1",
+    "@shapeshiftoss/hdwallet-shapeshift-multichain": "1.50.5-alpha.70",
+    "@shapeshiftoss/metamask-snaps-adapter": "1.0.3",
     "@types/uuid": "^9.0.1",
     "assert": "^2.0.0",
+    "bip39": "^3.1.0",
     "dotenv": "^16.3.1",
     "events": "^3.3.0",
     "framer-motion": "^10.12.4",

package/src/index.tsx

@@ -18,15 +18,15 @@ import App from "./App";
 
 // To publish run as dev uncomment
 
-const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
-);
-root.render(
-  <>
-    <ColorModeScript initialColorMode={theme.config?.initialColorMode} />
-    <App />
-  </>
-);
+// const root = ReactDOM.createRoot(
+//   document.getElementById("root") as HTMLElement
+// );
+// root.render(
+//   <>
+//     <ColorModeScript initialColorMode={theme.config?.initialColorMode} />
+//     <App />
+//   </>
+// );
 
 //end dev mode
 

package/src/lib/components/AssetSelect/index.tsx

@@ -28,9 +28,9 @@ export default function AssetSelect({ onClose }) {
 
   const handleSelectClick = async (asset: any) => {
     try {
-     //console.log("asset select: ", asset.name);
+      //console.log("asset select: ", asset.name);
       const changeAssetContext = await app.setAssetContext(asset);
-     //console.log("changeAssetContext: ", changeAssetContext);
+      //console.log("changeAssetContext: ", changeAssetContext);
       onClose();
     } catch (e) {
       console.error(e);
@@ -43,7 +43,7 @@ export default function AssetSelect({ onClose }) {
         alert("Failed to init API!");
         return;
       }
-     //console.log("searchQuery: ", searchQuery);
+      //console.log("searchQuery: ", searchQuery);
       const search = {
         limit: itemsPerPage,
         skip: currentPageIndex * itemsPerPage, // Use currentPageIndex for pagination

package/src/lib/components/Onboarding/index.tsx

@@ -0,0 +1,249 @@
+import {
+    Box,
+    Text,
+    Button,
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalCloseButton,
+    ModalBody,
+    ModalFooter,
+    Tabs,
+    TabList,
+    Tab,
+    TabPanels,
+    Card,
+    CardBody,
+    TabPanel,
+    Avatar,
+    SimpleGrid,
+    AvatarBadge,
+    Input,
+    FormControl,
+    FormLabel,
+    FormErrorMessage,
+    VStack,
+    Radio,
+    RadioGroup
+} from "@chakra-ui/react";
+import { useState, useEffect } from "react";
+import * as bip39 from 'bip39';
+// @ts-ignore
+import KEEPKEY_ICON from "lib/assets/png/keepkey.png";
+// @ts-ignore
+import METAMASK_ICON from "lib/assets/png/metamask.png";
+// @ts-ignore
+import PIONEER_ICON from "lib/assets/png/pioneer.png";
+
+import { usePioneer } from "lib/context/Pioneer";
+
+interface ModalProps {
+    onClose: () => void;
+}
+//@ts-ignore
+const Onboarding: React.FC<ModalProps> = ({ onClose }) => {
+    const { state, dispatch } = usePioneer();
+    const { api, app, user, context } = state;
+    const [walletDescriptions, setWalletDescriptions] = useState([]);
+    const [balances, setBalances] = useState([]);
+    const [metamaskPaired, setMetamaskPaired] = useState(false);
+    const [keepkeyPaired, setKeepkeyPaired] = useState(false);
+    const [nativePaired, setNativePaired] = useState(false);
+    const [walletType, setWalletType] = useState("");
+    const [pubkeyContext, setPubkeyContext] = useState("");
+    const [seedPhrase, setSeedPhrase] = useState('');
+    const [error, setError] = useState(null);
+    const [isValid, setIsValid] = useState(false);
+    const [action, setAction] = useState(null);
+
+    const setUser = async function () {
+        try {
+            if (user && user.wallets) {
+                const { wallets, walletDescriptions, balances, pubkeys } = user;
+                setWalletDescriptions(walletDescriptions);
+                setBalances(balances);
+            }
+        } catch (e) {
+            console.error("header e: ", e);
+        }
+    };
+
+    const setContextWallet = async function (wallet: string) {
+        try {
+            //console.log("setContextWallet: ", wallet);
+            // eslint-disable-next-line no-console
+            //console.log("wallets: ", app.wallets);
+            const matchedWallet = app.wallets.find(
+                (w: { type: string }) => w.type === wallet
+            );
+            //console.log("matchedWallet: ", matchedWallet);
+            if (matchedWallet) {
+                setWalletType(matchedWallet.type);
+                const context = await app.setContext(matchedWallet.wallet);
+                //console.log("result change: ", context);
+                //console.log("app.context: ", app.context);
+
+                //console.log(
+                //   "app.pubkeyContext: ",
+                //   app.pubkeyContext.master || app.pubkeyContext.pubkey
+                // );
+
+                const pubkeyContext =
+                    app.pubkeyContext.master || app.pubkeyContext.pubkey;
+
+                setPubkeyContext(pubkeyContext);
+                dispatch({ type: "SET_CONTEXT", payload: app.context });
+                dispatch({ type: "SET_PUBKEY_CONTEXT", payload: app.pubkeyContext });
+                // dispatch({ type: "SET_WALLET", payload: wallet });
+            } else {
+                //console.log("No wallet matched the type of the context");
+            }
+        } catch (e) {
+            console.error("header e: ", e);
+        }
+    };
+
+    useEffect(() => {
+        setUser();
+    }, [user]); // once on startup
+
+    useEffect(() => {
+        const words = seedPhrase.trim().split(' ');
+        if (words.length === 12 && words.every(word => word.length > 0)) {
+            setError(null);
+            setIsValid(true);
+        } else {
+            // @ts-ignore
+            setError('Seed phrase must be exactly 12 words');
+            setIsValid(false);
+        }
+    }, [seedPhrase]);
+
+    const handleSubmit = (event: { preventDefault: () => void; }) => {
+        event.preventDefault();
+        if (isValid) {
+            console.log('Seed Phrase Submitted:', seedPhrase);
+            //save to local storage
+            localStorage.setItem("seedPhrase", seedPhrase);
+            // @ts-ignore
+            localStorage.setItem("isOnboarded", "true");
+        }
+    };
+
+    const handleActionSelection = (value: string) => {
+        console.log("value: ", value);
+        // @ts-ignore
+        setAction(value);
+        if (value === 'import'){
+            setSeedPhrase('');
+        }
+    };
+
+    const handleImport = () => {
+        setSeedPhrase("");
+        // @ts-ignore
+        setAction('import')
+    };
+
+    const handleGenerate = () => {
+        const newSeedPhrase = bip39.generateMnemonic();
+        setSeedPhrase(newSeedPhrase);
+        // @ts-ignore
+        setAction('generate');
+    };
+
+    return (
+        <Box>
+            Welcome to Pioneer SDK! Please select a wallet to continue.
+            <br/>
+            <Avatar size="lg" src={PIONEER_ICON}>
+            </Avatar>
+            {action ? (
+                <>
+                    <form onSubmit={handleSubmit}>
+                        <FormControl isInvalid={!!error}>
+                            <FormLabel htmlFor="seedPhrase">Seed Phrase</FormLabel>
+                            <Input
+                                id="seedPhrase"
+                                name="seedPhrase"
+                                type="text"
+                                value={seedPhrase}
+                                onChange={(e) => setSeedPhrase(e.target.value)}
+                                borderColor={isValid ? 'green.500' : 'red.500'}
+                            />
+                            <FormErrorMessage>{error}</FormErrorMessage>
+                        </FormControl>
+                        <Button mt={4} colorScheme="teal" type="submit">
+                            Submit
+                        </Button>
+                    </form>
+                    <Button mt={4} onClick={() => setAction(null)}>
+                        Go Back
+                    </Button>
+                </>
+            ) : (
+                <VStack spacing={4}>
+                    <Button colorScheme="teal" onClick={handleGenerate}>
+                        Generate New Seed Phrase
+                    </Button>
+                    <Button colorScheme="teal" onClick={handleImport}>
+                        Import Seed Phrase
+                    </Button>
+                </VStack>
+            )}
+            {/*<SimpleGrid columns={3} row={1}>*/}
+            {/*    <Card align="center" onClick={() => setContextWallet("native")}>*/}
+            {/*        <CardBody>*/}
+            {/*            <Avatar src={PIONEER_ICON}>*/}
+            {/*                {nativePaired ? (*/}
+            {/*                    <div>*/}
+            {/*                        <AvatarBadge boxSize="1.25em" bg="green.500" />*/}
+            {/*                    </div>*/}
+            {/*                ) : (*/}
+            {/*                    <div>*/}
+            {/*                        <AvatarBadge boxSize="1.25em" bg="red.500" />*/}
+            {/*                    </div>*/}
+            {/*                )}*/}
+            {/*            </Avatar>*/}
+            {/*        </CardBody>*/}
+            {/*        <small>Pioneer</small>*/}
+            {/*    </Card>*/}
+            {/*    <Card align="center" onClick={() => setContextWallet("metamask")}>*/}
+            {/*        <CardBody>*/}
+            {/*            <Avatar src={METAMASK_ICON}>*/}
+            {/*                {metamaskPaired ? (*/}
+            {/*                    <div>*/}
+            {/*                        <AvatarBadge boxSize="1.25em" bg="green.500" />*/}
+            {/*                    </div>*/}
+            {/*                ) : (*/}
+            {/*                    <div>*/}
+            {/*                        <AvatarBadge boxSize="1.25em" bg="red.500" />*/}
+            {/*                    </div>*/}
+            {/*                )}*/}
+            {/*            </Avatar>*/}
+            {/*        </CardBody>*/}
+            {/*        <small>MetaMask</small>*/}
+            {/*    </Card>*/}
+            {/*    <Card align="center" onClick={() => setContextWallet("keepkey")}>*/}
+            {/*        <CardBody>*/}
+            {/*            <Avatar src={KEEPKEY_ICON}>*/}
+            {/*                {keepkeyPaired ? (*/}
+            {/*                    <div>*/}
+            {/*                        <AvatarBadge boxSize="1.25em" bg="green.500" />*/}
+            {/*                    </div>*/}
+            {/*                ) : (*/}
+            {/*                    <div>*/}
+            {/*                        <AvatarBadge boxSize="1.25em" bg="red.500" />*/}
+            {/*                    </div>*/}
+            {/*                )}*/}
+            {/*            </Avatar>*/}
+            {/*        </CardBody>*/}
+            {/*        <small>KeepKey</small>*/}
+            {/*    </Card>*/}
+            {/*</SimpleGrid>*/}
+        </Box>
+    );
+};
+
+export default Onboarding;

package/src/lib/components/pioneer/Pioneer/Balances.tsx

@@ -123,7 +123,7 @@ export default function Balances({ balances }: { balances: Balance[] }) {
   useEffect(() => {
     const setUser = async () => {
       try {
-        console.log("balances: ",app.balances)
+        console.log("balances: ", app.balances);
         if (app && app.wallets) {
           const { wallets, balances } = app;
           const updatedBalances = balances.map((balance: Balance) => {

package/src/lib/components/pioneer/index.tsx

@@ -224,20 +224,20 @@ const Pioneer = () => {
         if (balances) {
           setBalances(balances);
         }
-
+        
         // @ts-ignore
         window.ethereum.on("accountsChanged", async function (accounts: any) {
           // Time to reload your interface with accounts[0]!
-          // //console.log('accountsChanged: ', accounts);
+          console.log('accountsChanged: ', accounts);
           // TODO register new pubkeys
           const walletsPaired = app.wallets;
           //console.log("walletsPaired: ", walletsPaired);
           //console.log("pioneer context: ", app?.context);
           //if context is metamask
           if (app?.context === "metamask.wallet") {
-            //console.log("MetaMask is in context");
+            console.log("MetaMask is in context");
             const addressMetaMask = accounts[0];
-            //console.log("addressMetaMask: ", addressMetaMask);
+            console.log("addressMetaMask: ", addressMetaMask);
             setPubkeyContext(addressMetaMask);
             if (addressMetaMask !== app.pubkey) {
               //push event

package/src/lib/components/utils/index.tsx

@@ -38,10 +38,10 @@ export const MiddleEllipsis: React.FC<MiddleEllipsisProps> = ({ text }) => {
   const backPart = text.slice(-10);
 
   return (
-      <span>
+    <span>
       {frontPart}
-        {ellipsis}
-        {backPart}
+      {ellipsis}
+      {backPart}
     </span>
   );
 };

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>);