Release/2.3.0

.github/workflows/buildTranslations.yml

@@ -0,0 +1,33 @@
+name: Build translations
+
+on:
+  pull_request:
+    paths:
+      - "extension/**/*"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          persist-credentials: false
+          fetch-depth: 0
+      - name: Run translation job
+        run: |
+          yarn && yarn build:freighter-api && yarn build:extension:translations
+      - name: Verify diff
+        id: verify_diff
+        run: |
+          git diff --quiet  || echo "::set-output name=new_translations_exist::true"
+      - name: Commit files
+        if: steps.verify_diff.outputs.new_translations_exist == 'true'
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git commit -m "Add translations" -a
+      - name: Push changes
+        uses: ad-m/github-push-action@master
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          branch: ${{ github.head_ref }}

@shared/api/internal.ts

@@ -12,6 +12,7 @@ import {
 import { MAINNET_NETWORK_DETAILS, NetworkDetails } from "../helpers/stellar";
 import { SERVICE_TYPES } from "../constants/services";
 import { APPLICATION_STATE } from "../constants/applicationState";
+import { WalletType } from "../constants/hardwareWallet";
 import { sendMessageToBackground } from "./helpers/extensionMessaging";
 import { getIconUrlFromIssuer } from "./helpers/getIconUrlFromIssuer";
 
@@ -115,9 +116,41 @@ export const importAccount = async (
   return { allAccounts, publicKey, hasPrivateKey };
 };
 
+export const importHardwareWallet = async (
+  publicKey: string,
+  hardwareWalletType: WalletType,
+  bipPath: string,
+) => {
+  let _publicKey = "";
+  let allAccounts = [] as Array<Account>;
+  let hasPrivateKey = false;
+  let _bipPath = "";
+  try {
+    ({
+      publicKey: _publicKey,
+      allAccounts,
+      hasPrivateKey,
+      bipPath: _bipPath,
+    } = await sendMessageToBackground({
+      publicKey,
+      hardwareWalletType,
+      bipPath,
+      type: SERVICE_TYPES.IMPORT_HARDWARE_WALLET,
+    }));
+  } catch (e) {
+    console.log({ e });
+  }
+  return {
+    allAccounts,
+    publicKey: _publicKey,
+    hasPrivateKey,
+    bipPath: _bipPath,
+  };
+};
+
 export const makeAccountActive = (
   publicKey: string,
-): Promise<{ publicKey: string; hasPrivateKey: boolean }> =>
+): Promise<{ publicKey: string; hasPrivateKey: boolean; bipPath: string }> =>
   sendMessageToBackground({
     publicKey,
     type: SERVICE_TYPES.MAKE_ACCOUNT_ACTIVE,
@@ -136,6 +169,7 @@ export const loadAccount = (): Promise<{
   publicKey: string;
   applicationState: APPLICATION_STATE;
   allAccounts: Array<Account>;
+  bipPath: string;
 }> =>
   sendMessageToBackground({
     type: SERVICE_TYPES.LOAD_ACCOUNT,
@@ -210,12 +244,14 @@ export const confirmPassword = async (
   hasPrivateKey: boolean;
   applicationState: APPLICATION_STATE;
   allAccounts: Array<Account>;
+  bipPath: string;
 }> => {
   let response = {
     publicKey: "",
     hasPrivateKey: false,
     applicationState: APPLICATION_STATE.MNEMONIC_PHRASE_CONFIRMED,
     allAccounts: [] as Array<Account>,
+    bipPath: "",
   };
   try {
     response = await sendMessageToBackground({
@@ -376,6 +412,21 @@ export const grantAccess = async (url: string): Promise<void> => {
   }
 };
 
+export const handleSignedHwTransaction = async ({
+  signedTransaction,
+}: {
+  signedTransaction: string;
+}): Promise<void> => {
+  try {
+    await sendMessageToBackground({
+      signedTransaction,
+      type: SERVICE_TYPES.HANDLE_SIGNED_HW_TRANSACTION,
+    });
+  } catch (e) {
+    console.error(e);
+  }
+};
+
 export const signTransaction = async ({
   transaction,
 }: {
@@ -413,13 +464,17 @@ export const signFreighterTransaction = async ({
 
 export const submitFreighterTransaction = async ({
   signedXDR,
-  networkUrl,
+  networkDetails,
 }: {
   signedXDR: string;
-  networkUrl: string;
+  networkDetails: NetworkDetails;
 }) => {
-  const server = new StellarSdk.Server(networkUrl);
-  return await server.submitTransaction(signedXDR);
+  const tx = StellarSdk.TransactionBuilder.fromXDR(
+    signedXDR,
+    networkDetails.networkPassphrase,
+  );
+  const server = new StellarSdk.Server(networkDetails.networkUrl);
+  return await server.submitTransaction(tx);
 };
 
 export const addRecentAddress = async ({

@shared/api/types.ts

@@ -3,6 +3,7 @@ import { Types } from "@stellar/wallet-sdk";
 
 import { SERVICE_TYPES, EXTERNAL_SERVICE_TYPES } from "../constants/services";
 import { APPLICATION_STATE } from "../constants/applicationState";
+import { WalletType } from "../constants/hardwareWallet";
 import { NetworkDetails } from "../helpers/stellar";
 
 export interface Response {
@@ -38,6 +39,8 @@ export interface Response {
   iconUrl: string;
   network: string;
   recentAddresses: Array<string>;
+  hardwareWalletType: WalletType;
+  bipPath: string;
 }
 
 export interface ExternalRequest {
@@ -51,6 +54,7 @@ export interface Account {
   publicKey: string;
   name: string;
   imported: boolean;
+  hardwareWalletType?: WalletType;
 }
 
 export interface Settings {

@shared/constants/hardwareWallet.ts

@@ -0,0 +1,4 @@
+export enum WalletType {
+  LEDGER = "Ledger",
+  NONE = "",
+}

@shared/constants/services.ts

@@ -3,6 +3,7 @@ export enum SERVICE_TYPES {
   FUND_ACCOUNT = "FUND_ACCOUNT",
   ADD_ACCOUNT = "ADD_ACCOUNT",
   IMPORT_ACCOUNT = "IMPORT_ACCOUNT",
+  IMPORT_HARDWARE_WALLET = "IMPORT_HARDWARE_WALLET",
   LOAD_ACCOUNT = "LOAD_ACCOUNT",
   MAKE_ACCOUNT_ACTIVE = "MAKE_ACCOUNT_ACTIVE",
   UPDATE_ACCOUNT_NAME = "UPDATE_ACCOUNT_NAME",
@@ -13,6 +14,7 @@ export enum SERVICE_TYPES {
   REJECT_ACCESS = "REJECT_ACCESS",
   GRANT_ACCESS = "GRANT_ACCESS",
   SIGN_TRANSACTION = "SIGN_TRANSACTION",
+  HANDLE_SIGNED_HW_TRANSACTION = "HANDLE_SIGNED_HW_TRANSACTION",
   REJECT_TRANSACTION = "REJECT_TRANSACTION",
   SIGN_FREIGHTER_TRANSACTION = "SIGN_FREIGHTER_TRANSACTION",
   ADD_RECENT_ADDRESS = "ADD_RECENT_ADDRESS",

extension/LOCALIZATION.MD

@@ -0,0 +1,41 @@
+# Freighter Localization
+
+## How It Works
+
+We're using the library `react-i18next` to translate strings for us. At runtime,
+the app will detect the user's language preference from their browser settings
+and translate all strings that have been wrapped in the `t` function the
+`useTranslation` hook provides.
+
+Using the selected language, it will find the corresponding json file in
+`locales`. If the language is not found, it will fallback to the `en` json file.
+The string that is passed to `t` acts a key in this json file. The corresponding
+value is the translated string in that locale's language.
+
+Using the english version of the string as a key in the json file allows us to
+easily grep through our codebase to find specific components. For example, if
+I'm looking for a button that says `Add Asset`, I can still just search for that
+string to find where this component lives in this codebase. The alternative
+would be to use a key called `AddAssetCopy`, that would map to the translated
+string in the given language. While that works, it adds an unnecessary layer of
+abstraction. In addition, this allows community members to run through a
+language json file and simply translate the all the keys listed in the json.
+
+## How To Build
+
+As you maye have surmised, every time you add new copy, you will need to wrap
+the string in `t` AND add a key/value pair for it in EVERY language json file.
+This is annoying and time consuming. There is a build command you run that will
+statically run through the codebase, find all `t` function calls, and add a
+corresponding key/value pair to the needed json files. It will default to adding
+the english language version as the value so as to not show an empty string if
+the translation hasn't been done yet.
+
+These default translations can be generated by running:
+`yarn build:translations`
+
+## How To Test Translations
+
+1. Go into your browser settings and change your language preference.
+2. `react-i18next` also saves the preferred language in the UI's localStorage.
+   Clear this value and refresh your dev page or reopen the popup.

extension/package.json

@@ -7,11 +7,14 @@
     "build": "webpack --config webpack.extension.js",
     "build:experimental": "yarn build --env.EXPERIMENTAL=true",
     "build:production": "yarn build --env.PRODUCTION",
+    "build:translations": "yarn build --env.TRANSLATIONS=true",
     "start": "webpack-dev-server --config webpack.dev.js",
     "start:experimental": "yarn start --env.EXPERIMENTAL=true",
     "start:unpacked-extension": "yarn build --watch --info-verbosity verbose"
   },
   "dependencies": {
+    "@ledgerhq/hw-app-str": "^6.27.1",
+    "@ledgerhq/hw-transport-webusb": "^6.27.1",
     "@reduxjs/toolkit": "^1.5.0",
     "@sentry/browser": "^6.0.0",
     "@sentry/tracing": "^6.0.0",
@@ -44,6 +47,10 @@
     "history": "^4",
     "html-loader": "^1.0.0",
     "html-webpack-plugin": "^4.0.1",
+    "i18next": "^21.8.13",
+    "i18next-browser-languagedetector": "^6.1.4",
+    "i18next-resources-to-backend": "^1.0.0",
+    "i18next-scanner-webpack": "^0.9.1",
     "lodash": "^4.17.15",
     "mini-css-extract-plugin": "^1.6.2",
     "prettier": "^2.0.5",
@@ -54,6 +61,7 @@
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^17.0.2",
+    "react-i18next": "^11.18.0",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
     "redux": "^4.0.5",
@@ -69,4 +77,4 @@
     "webextension-polyfill-ts": "^0.19.0",
     "yup": "^0.29.1"
   }
-}
+}

extension/public/static/manifest.json

@@ -10,19 +10,13 @@
     }
   },
   "background": {
-    "scripts": [
-      "background.min.js"
-    ],
+    "scripts": ["background.min.js"],
     "persistent": true
   },
   "content_scripts": [
     {
-      "matches": [
-        "<all_urls>"
-      ],
-      "js": [
-        "contentScript.min.js"
-      ],
+      "matches": ["<all_urls>"],
+      "js": ["contentScript.min.js"],
       "run_at": "document_start"
     }
   ],
@@ -42,4 +36,4 @@
     "128": "images/icon128.png"
   },
   "manifest_version": 2
-}
+}

extension/src/background/ducks/session.ts

@@ -1,6 +1,7 @@
 import { createSelector, createSlice } from "@reduxjs/toolkit";
 
 import { Account } from "@shared/api/types";
+import { getIsHardwareWalletActive } from "background/helpers/account";
 
 const initialState = {
   publicKey: "",
@@ -23,6 +24,7 @@ export const sessionSlice = createSlice({
   name: "session",
   initialState,
   reducers: {
+    reset: () => initialState,
     logIn: (state, action: { payload: UiData }) => {
       const {
         publicKey,
@@ -38,7 +40,7 @@ export const sessionSlice = createSlice({
       };
     },
     logOut: () => initialState,
-    grantAccountAccess: (state, action: { payload: AppData }) => {
+    setActivePrivateKey: (state, action: { payload: AppData }) => {
       const { privateKey } = action.payload;
 
       return {
@@ -87,9 +89,10 @@ export const sessionSelector = (state: { session: UiData & AppData }) =>
 
 export const {
   actions: {
+    reset,
     logIn,
     logOut,
-    grantAccountAccess,
+    setActivePrivateKey,
     setActivePublicKey,
     timeoutAccountAccess,
     updateAllAccountsAccountName,
@@ -110,7 +113,7 @@ export const allAccountsSelector = createSelector(
 );
 export const hasPrivateKeySelector = createSelector(
   sessionSelector,
-  (session) => !!session.privateKey.length,
+  (session) => getIsHardwareWalletActive() || !!session.privateKey.length,
 );
 export const privateKeySelector = createSelector(
   sessionSelector,

extension/src/background/helpers/account.ts

@@ -1,6 +1,7 @@
 import {
   ACCOUNT_NAME_LIST_ID,
   KEY_ID_LIST,
+  KEY_ID,
   IS_TESTNET_ID,
   IS_VALIDATING_MEMO_ID,
   IS_VALIDATING_SAFETY_ID,
@@ -41,3 +42,15 @@ export const getIsMemoValidationEnabled = () =>
 
 export const getIsSafetyValidationEnabled = () =>
   JSON.parse(localStorage.getItem(IS_VALIDATING_SAFETY_ID) || "true");
+
+// hardware wallet helpers
+export const HW_PREFIX = "hw:";
+
+export const getIsHardwareWalletActive = () =>
+  (localStorage.getItem(KEY_ID) || "").indexOf(HW_PREFIX) > -1;
+
+export const getBipPath = () => {
+  const keyId = localStorage.getItem(KEY_ID) || "";
+  const hwData = JSON.parse(localStorage.getItem(keyId) || "{}");
+  return hwData.bipPath || "";
+};