@pioneer-platform/pioneer-react 0.2.35 → 0.2.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pioneer-platform/pioneer-react",
-  "version": "0.2.35",
+  "version": "0.2.37",
   "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,251 @@
+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");
+            alert("Wallet Saved to localstorage. please restart app /n (Note: this is not secure! use a hardware wallet!)");
+            onClose()
+        }
+    };
+
+    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/modals/SettingsModal.tsx

@@ -18,6 +18,7 @@ import Balances from "lib/components/pioneer/Pioneer/Balances";
 import Wallets from "lib/components/pioneer/Pioneer/Wallets";
 import Paths from "lib/components/pioneer/Pioneer/Paths";
 import Pubkeys from "lib/components/pioneer/Pioneer/Pubkeys";
+import Onboarding from "lib/components/Onboarding";
 import { usePioneer } from "lib/context/Pioneer";
 
 interface SettingsModalProps {
@@ -28,6 +29,22 @@ interface SettingsModalProps {
 const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose }) => {
   const { state } = usePioneer();
   const { app, status } = state;
+  const [isOnboarded, setIsOnboarded] = useState(false);
+
+  const onStart = async function(){
+    try{
+      console.log("onStart")
+      let isOnboarded = await localStorage.getItem("isOnboarded")
+      if(!isOnboarded){
+        console.log("Starting onboarding process")
+      }
+    }catch(e){
+      console.error(e)
+    }
+  }
+  useEffect(() => {
+    onStart()
+  }, []);
 
   useEffect(() => {
     //console.log("app: ", app);
@@ -37,37 +54,39 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose }) => {
     <Modal isOpen={isOpen} onClose={onClose} size={"xl"}>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader>Pioneer Settings</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <Tabs variant="enclosed">
-            <TabList>
-              <Tab>Wallets</Tab>
-              <Tab>Nodes</Tab>
-              <Tab>PubKeys</Tab>
-              <Tab>Balances</Tab>
-            </TabList>
-            <TabPanels>
-              <TabPanel>
-                <Wallets wallets={app?.wallets || []} />
-              </TabPanel>
-              {/*<TabPanel>*/}
-              {/*  <Paths paths={app?.paths || []} />*/}
-              {/*</TabPanel>*/}
-              <TabPanel>
-                <Pubkeys pubkeys={app?.pubkeys || []} />
-              </TabPanel>
-              <TabPanel>
-                <Balances balances={app?.balances || []} />
-              </TabPanel>
-            </TabPanels>
-          </Tabs>
-        </ModalBody>
-        <ModalFooter>
-          <Button colorScheme="blue" mr={3} onClick={onClose}>
-            Close
-          </Button>
-        </ModalFooter>
+        {!isOnboarded ? (<Onboarding onClose={onClose} />) : (<div>
+          <ModalHeader>Pioneer Settings</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Tabs variant="enclosed">
+              <TabList>
+                <Tab>Wallets</Tab>
+                <Tab>Nodes</Tab>
+                <Tab>PubKeys</Tab>
+                <Tab>Balances</Tab>
+              </TabList>
+              <TabPanels>
+                <TabPanel>
+                  <Wallets wallets={app?.wallets || []} />
+                </TabPanel>
+                {/*<TabPanel>*/}
+                {/*  <Paths paths={app?.paths || []} />*/}
+                {/*</TabPanel>*/}
+                <TabPanel>
+                  <Pubkeys pubkeys={app?.pubkeys || []} />
+                </TabPanel>
+                <TabPanel>
+                  <Balances balances={app?.balances || []} />
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </ModalBody>
+          <ModalFooter>
+            <Button colorScheme="blue" mr={3} onClick={onClose}>
+              Close
+            </Button>
+          </ModalFooter>
+        </div>)}
       </ModalContent>
     </Modal>
   );

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

@@ -136,6 +136,22 @@ const Pioneer = () => {
   const [pubkeys, setPubkeys] = useState([]);
   const [balances, setBalances] = useState([]);
 
+  const onStart = async function(){
+    try{
+      console.log("onStart")
+      let isOnboarded = await localStorage.getItem("isOnboarded")
+      if(!isOnboarded){
+        console.log("Starting onboarding process")
+        onOpen();
+      }
+    }catch(e){
+      console.error(e)
+    }
+  }
+  useEffect(() => {
+    onStart()
+  }, []);
+
   const settingsSelected = async function () {
     try {
       //console.log("settingsSelected");
@@ -224,20 +240,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
@@ -248,9 +264,12 @@ const Pioneer = () => {
               dispatch({ type: "SET_PUBKEY_CONTEXT", payload: pubkeyContext });
             }
           }
+
           //if address[0] !== pubkey
 
-          // re-register metamask with more pubkeys
+          //
+
+
         });
       }
     } catch (e) {

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