Piyal dev

public/backgroundComponents/externalMessageListener/index.ts

@@ -1,11 +1,12 @@
 import StellarSdk from "stellar-sdk";
 
-import { ExternalRequest as Request } from "../../../src/services/types";
+import { ExternalRequest as Request } from "../../../src/api/types";
 import { Sender, SendResponseInterface } from "../types";
 import { EXTERNAL_SERVICE_TYPES } from "../../../src/statics";
 import { responseQueue, uiData, transactionQueue } from "../messageListener";
 
 const WHITELIST_ID = "whitelist";
+const WINDOW_DIMENSIONS = "height=600,width=357";
 
 export const externalMessageListener = (
   request: Request,
@@ -33,6 +34,8 @@ export const externalMessageListener = (
 
     window.open(
       chrome.runtime.getURL(`/index.html#/grant-access?${encodeOrigin}`),
+      "Lyra: Connect",
+      WINDOW_DIMENSIONS,
     );
 
     const response = (url?: string) => {
@@ -71,6 +74,8 @@ export const externalMessageListener = (
       chrome.runtime.getURL(
         `/index.html#/sign-transaction?${encodetransactionInfo}`,
       ),
+      "Lyra: Sign Transaction",
+      WINDOW_DIMENSIONS,
     );
 
     const response = (transactionStatus: string) => {

public/backgroundComponents/messageListener.ts

@@ -8,7 +8,7 @@ import {
   APPLICATION_STATE,
   SERVER_URL,
 } from "../../src/statics";
-import { Response as Request } from "../../src/services/types";
+import { Response as Request } from "../../src/api/types";
 import { Sender, SendResponseInterface } from "./types";
 
 const server = new StellarSdk.Server(SERVER_URL);

public/contentScript.js

@@ -1,4 +1,4 @@
-const url = chrome.extension.getURL("api.min.js");
+const url = chrome.extension.getURL("lyraApi.min.js");
 const s = document.createElement("script");
 s.src = url;
 (document.head || document.documentElement).appendChild(s);

public/static/manifest.json

@@ -16,7 +16,7 @@
   "externally_connectable": {
     "matches": ["*://*.stellar.org/*", "*://*.lyraclient.com/*"]
   },
-  "web_accessible_resources": ["api.min.js"],
+  "web_accessible_resources": ["lyraApi.min.js"],
   "page_action": {
     "default_popup": "index.html",
     "default_icon": {

src/Router.tsx

@@ -39,7 +39,7 @@ const ProtectedRoute = (props: RouteProps) => {
     return (
       <Redirect
         to={{
-          pathname: "/recover-account",
+          pathname: "/unlock-account",
           search: location.search,
           state: { from: location },
         }}
@@ -68,7 +68,6 @@ const HomeRoute = () => {
 };
 
 const Routes = () => {
-  const applicationState = useSelector(applicationStateSelector);
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(loadAccount());
@@ -89,7 +88,7 @@ const Routes = () => {
         <ProtectedRoute path="/mnemonic-phrase">
           <MnemonicPhrase />
         </ProtectedRoute>
-        <Route path="/unlock">
+        <Route path="/unlock-account">
           <UnlockAccount />
         </Route>
         <Route path="/mnemonic-phrase-confirmed">
@@ -99,13 +98,9 @@ const Routes = () => {
           <CreatePassword />
         </Route>
         <Route path="/recover-account">
-          {applicationState !== APPLICATION_STATE.APPLICATION_STARTED ? (
-            <UnlockAccount />
-          ) : (
-            <RecoverAccount />
-          )}
-          <HomeRoute />
+          <RecoverAccount />
         </Route>
+        <HomeRoute />
       </Switch>
     </HashRouter>
   );

src/services/external/index.ts → src/api/external/index.ts

@@ -1,6 +1,6 @@
 import { EXTERNAL_SERVICE_TYPES } from "statics";
-import { sendMessageAndAwaitResponseExternal } from "services/utils";
-import { ExternalRequest } from "services/types";
+import { sendMessageAndAwaitResponseExternal } from "api/helpers";
+import { ExternalRequest } from "api/types";
 
 export const requestAccess = async (): Promise<{
   publicKey: string;

src/api/index.ts

@@ -1,15 +1,227 @@
-import connect from "./connect";
-import submitTransaction from "./submitTransaction";
+import StellarSdk from "stellar-sdk";
 
-const injectApi = () => ({
-  connect,
-  submitTransaction,
-});
+import {
+  EXTENSION_ID,
+  SERVER_URL,
+  SERVICE_TYPES,
+  DEVELOPMENT,
+  APPLICATION_STATE,
+} from "statics";
+import { Response } from "./types";
 
-declare global {
-  interface Window {
-    lyra: any;
+const server = new StellarSdk.Server(SERVER_URL);
+
+export const createAccount = async (
+  password: string,
+): Promise<{ publicKey: string }> => {
+  let publicKey = "";
+
+  try {
+    ({ publicKey } = await sendMessageAndAwaitResponse({
+      password,
+      type: SERVICE_TYPES.CREATE_ACCOUNT,
+    }));
+  } catch (e) {
+    console.error(e);
+  }
+
+  return { publicKey };
+};
+
+export const loadAccount = async (): Promise<{
+  publicKey: string;
+  applicationState: APPLICATION_STATE;
+}> => {
+  let response = {
+    publicKey: "",
+    applicationState: APPLICATION_STATE.APPLICATION_STARTED,
+  };
+
+  try {
+    response = await sendMessageAndAwaitResponse({
+      type: SERVICE_TYPES.LOAD_ACCOUNT,
+    });
+  } catch (e) {
+    console.error(e);
+  }
+  return response;
+};
+
+export const getMnemonicPhrase = async (): Promise<{
+  mnemonicPhrase: string;
+}> => {
+  let response = { mnemonicPhrase: "" };
+
+  try {
+    response = await sendMessageAndAwaitResponse({
+      type: SERVICE_TYPES.GET_MNEMONIC_PHRASE,
+    });
+  } catch (e) {
+    console.error(e);
+  }
+  return response;
+};
+
+export const confirmMnemonicPhrase = async (
+  mnemonicPhraseToConfirm: string,
+): Promise<{
+  isCorrectPhrase: boolean;
+  applicationState: APPLICATION_STATE;
+}> => {
+  let response = {
+    isCorrectPhrase: false,
+    applicationState: APPLICATION_STATE.PASSWORD_CREATED,
+  };
+
+  try {
+    response = await sendMessageAndAwaitResponse({
+      mnemonicPhraseToConfirm,
+      type: SERVICE_TYPES.CONFIRM_MNEMONIC_PHRASE,
+    });
+  } catch (e) {
+    console.error(e);
+  }
+  return response;
+};
+
+export const recoverAccount = async (
+  password: string,
+  recoverMnemonic: string,
+): Promise<{ publicKey: string }> => {
+  let publicKey = "";
+
+  try {
+    ({ publicKey } = await sendMessageAndAwaitResponse({
+      password,
+      recoverMnemonic,
+      type: SERVICE_TYPES.RECOVER_ACCOUNT,
+    }));
+  } catch (e) {
+    console.error(e);
+  }
+
+  return { publicKey };
+};
+
+export const confirmPassword = async (
+  password: string,
+): Promise<{ publicKey: string; applicationState: APPLICATION_STATE }> => {
+  let response = {
+    publicKey: "",
+    applicationState: APPLICATION_STATE.MNEMONIC_PHRASE_CONFIRMED,
+  };
+  try {
+    response = await sendMessageAndAwaitResponse({
+      password,
+      type: SERVICE_TYPES.CONFIRM_PASSWORD,
+    });
+  } catch (e) {
+    console.error(e);
   }
-}
 
-window.lyra = injectApi();
+  return response;
+};
+
+export const getAccountBalance = async (
+  publicKey: string,
+): Promise<{
+  balance: string;
+}> => {
+  let response = { balances: [] };
+
+  try {
+    response = await server.loadAccount(publicKey);
+  } catch (e) {
+    console.error(e);
+  }
+  return response.balances[0];
+};
+
+export const getPublicKey = async (): Promise<{ publicKey: string }> => {
+  let publicKey = "";
+
+  try {
+    ({ publicKey } = await sendMessageAndAwaitResponsePublic({
+      type: SERVICE_TYPES.LOAD_ACCOUNT,
+    }));
+  } catch (e) {
+    console.error(e);
+  }
+  return { publicKey };
+};
+
+export const rejectAccess = async (): Promise<void> => {
+  try {
+    await sendMessageAndAwaitResponse({
+      type: SERVICE_TYPES.REJECT_ACCESS,
+    });
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+export const grantAccess = async (url: string): Promise<void> => {
+  try {
+    await sendMessageAndAwaitResponse({
+      url,
+      type: SERVICE_TYPES.GRANT_ACCESS,
+    });
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+export const signTransaction = async ({
+  password,
+  transaction,
+}: {
+  password: string;
+  transaction: {};
+}): Promise<void> => {
+  try {
+    await sendMessageAndAwaitResponse({
+      password,
+      transaction,
+      type: SERVICE_TYPES.SIGN_TRANSACTION,
+    });
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+export const signOut = async (): Promise<{
+  publicKey: string;
+  applicationState: APPLICATION_STATE;
+}> => {
+  let response = {
+    publicKey: "",
+    applicationState: APPLICATION_STATE.MNEMONIC_PHRASE_CONFIRMED,
+  };
+  try {
+    response = await sendMessageAndAwaitResponse({
+      type: SERVICE_TYPES.SIGN_OUT,
+    });
+  } catch (e) {
+    console.error(e);
+  }
+
+  return response;
+};
+
+export const sendMessageAndAwaitResponse = (msg: {}): Promise<Response> =>
+  new Promise((resolve) => {
+    if (DEVELOPMENT) {
+      chrome.runtime.sendMessage(EXTENSION_ID, msg, (res: Response) =>
+        resolve(res),
+      );
+    } else {
+      chrome.runtime.sendMessage(msg, (res: Response) => resolve(res));
+    }
+  });
+
+export const sendMessageAndAwaitResponsePublic = (msg: {}): Promise<Response> =>
+  new Promise((resolve) => {
+    chrome.runtime.sendMessage(EXTENSION_ID, msg, (res: Response) =>
+      resolve(res),
+    );
+  });

src/components/Tooltip/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import styled from "styled-components";
+
+const TooltipEl = styled.span`
+  background: yellow;
+  color: black;
+  font-size: 0.7em;
+  margin-top: -4em;
+  position: absolute;
+  visibility: hidden;
+  text-shadow: none;
+`;
+
+interface TooltipProps {
+  className?: string;
+  text: string;
+}
+
+const Tooltip = ({ className, text }: TooltipProps) => (
+  <TooltipEl className={className}>{text}</TooltipEl>
+);
+
+export default Tooltip;

src/components/form/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import styled from "styled-components";
+
+const ErrorEl = styled.p`
+  color: red;
+  font-weight: bold;
+`;
+
+interface ErrorMessageProps {
+  authError: string;
+}
+
+export const ErrorMessage = ({ authError }: ErrorMessageProps) => (
+  <>{authError ? <ErrorEl>{authError}</ErrorEl> : null}</>
+);