Add support for SEP-0007 payment requests

i18n/en.ts

@@ -7,6 +7,7 @@ import Generic from "./locales/en/generic.json"
 import Operations from "./locales/en/operations.json"
 import Payment from "./locales/en/payment.json"
 import Trading from "./locales/en/trading.json"
+import TransactionRequest from "./locales/en/transaction-request.json"
 import TransferService from "./locales/en/transfer-service.json"
 
 const translations = {
@@ -19,6 +20,7 @@ const translations = {
   operations: Operations,
   payment: Payment,
   trading: Trading,
+  "transaction-request": TransactionRequest,
   "transfer-service": TransferService
 } as const
 

i18n/locales/en/generic.json

@@ -31,12 +31,14 @@
     "request-failed-error": "Request to {{target}} failed with status {{status}}: {{message}}",
     "stellar-address-not-found-error": "Stellar address not found: {{address}}",
     "stellar-address-request-failed-error": "Stellar address resolution of {{address}} failed.",
+    "stellar-uri-verification-error": "Stellar URI's signature could not be verified.",
     "submission-failed-error": "Submitting transaction to {{endpoint}} failed with status {{status}}: {{message}}",
     "testnet-endpoint-not-available-error": "{{service}} does not provide a testnet endpoint.",
     "timeout-error": "Request timed out",
     "unexpected-action-error": "Unexpected action: {{action}}",
     "unexpected-state-error": "Encountered unexpected state: {{state}}",
     "unexpected-response-type-error": "Unexpected response type: {{type}} / ${dataType}",
+    "unexpected-stellar-uri-type-error": "Incoming uri {{incomingURI}} does not match any expected type.",
     "unknown-error": "An unknown error occured.",
     "update-already-running-error": "Update is already running!",
     "wrong-password-error": "Wrong password.",

i18n/locales/en/transaction-request.json

@@ -0,0 +1,38 @@
+{
+  "payment-account-selection": {
+    "account-selector": "Select the account to use",
+    "action": {
+      "dismiss": "Dismiss",
+      "select": "Select"
+    },
+    "error": {
+      "no-activated-accounts": "No activated accounts found.",
+      "no-accounts-with-trustline": "No accounts with matching trustline found."
+    },
+    "header": {
+      "origin-domain": "The following transaction has been proposed by <1>{{originDomain}}<3>",
+      "no-origin-domain": "You opened the following payment request from an unknown origin."
+    },
+    "uri-content": {
+      "any": "Any",
+      "pay": "Pay",
+      "to": "To",
+      "memo": "Memo",
+      "message": "Message"
+    },
+    "title": "Transaction proposed",
+    "warning": "This request did not include a signature! Make sure that you trust the source of this link!"
+  },
+  "verify-trusted-service": {
+    "action": {
+      "trust": "Trust",
+      "cancel": "Cancel"
+    },
+    "title": "Verify Trusted Service",
+    "info": {
+      "1": "You opened a Stellar URI originating from an unknown origin",
+      "2": "If you trust this domain you can add this service to your list of trusted services.",
+      "3": "You can view and edit your list of trusted services anytime in the application settings."
+    }
+  }
+}

package.json

@@ -45,6 +45,7 @@
     }
   },
   "dependencies": {
+    "@stellarguard/stellar-uri": "^2.0.0",
     "electron-context-menu": "^0.15.0",
     "electron-debug": "^3.0.1",
     "electron-is-dev": "^1.1.0",

shared/types/platform.d.ts

@@ -1,6 +1,6 @@
 interface TrustedService {
   domain: string
-  signingKey: string
+  signingKey?: string
 }
 
 declare namespace Platform {

src/App/bootstrap/app-stage2.tsx

@@ -7,6 +7,7 @@ import { VerticalLayout } from "~Layout/components/Box"
 import { appIsLoaded } from "~SplashScreen/splash-screen"
 import ConnectionErrorListener from "~Toasts/components/ConnectionErrorListener"
 import NotificationContainer from "~Toasts/components/NotificationContainer"
+import TransactionRequestHandler from "~Transaction/components/TransactionRequestHandler"
 import AllAccountsPage from "../components/AccountListView"
 import AndroidBackButton from "../components/AndroidBackButton"
 import DesktopNotifications from "../components/DesktopNotifications"
@@ -72,6 +73,7 @@ function Stage2() {
       <React.Suspense fallback={null}>
         {/* Notifications need to come after the -webkit-overflow-scrolling element on iOS */}
         <DesktopNotifications />
+        <TransactionRequestHandler />
       </React.Suspense>
       {process.env.PLATFORM === "android" ? <AndroidBackButton /> : null}
       {process.env.PLATFORM === "android" || process.env.PLATFORM === "ios" ? <LinkHandler /> : null}

src/App/bootstrap/context.tsx

@@ -5,17 +5,20 @@ import { NotificationsProvider } from "../contexts/notifications"
 import { SettingsProvider } from "../contexts/settings"
 import { SignatureDelegationProvider } from "../contexts/signatureDelegation"
 import { StellarProvider } from "../contexts/stellar"
+import { TransactionRequestProvider } from "../contexts/transactionRequest"
 
 export function ContextProviders(props: { children: React.ReactNode }) {
   return (
     <StellarProvider>
       <AccountsProvider>
         <SettingsProvider>
-          <CachingProviders>
-            <NotificationsProvider>
-              <SignatureDelegationProvider>{props.children}</SignatureDelegationProvider>
-            </NotificationsProvider>
-          </CachingProviders>
+          <TransactionRequestProvider>
+            <CachingProviders>
+              <NotificationsProvider>
+                <SignatureDelegationProvider>{props.children}</SignatureDelegationProvider>
+              </NotificationsProvider>
+            </CachingProviders>
+          </TransactionRequestProvider>
         </SettingsProvider>
       </AccountsProvider>
     </StellarProvider>

src/App/contexts/transactionRequest.tsx

@@ -0,0 +1,67 @@
+import React from "react"
+import { StellarUri, StellarUriType } from "@stellarguard/stellar-uri"
+import { CustomError } from "~Generic/lib/errors"
+import { subscribeToDeepLinkURLs } from "~Platform/protocol-handler"
+import { verifyTransactionRequest } from "~Transaction/lib/stellar-uri"
+import { trackError } from "./notifications"
+
+const allowUnsafeTestnetURIs = Boolean(process.env.ALLOW_UNSAFE_TESTNET_URIS)
+
+interface Props {
+  children: React.ReactNode
+}
+
+interface ContextType {
+  uri: StellarUri | null
+  clearURI: () => void
+}
+
+const initialValues: ContextType = {
+  uri: null,
+  clearURI: () => undefined
+}
+
+const TransactionRequestContext = React.createContext<ContextType>(initialValues)
+
+export function TransactionRequestProvider(props: Props) {
+  const [uri, setURI] = React.useState<StellarUri | null>(null)
+
+  const clearURI = React.useCallback(() => setURI(null), [])
+
+  const verifyStellarURI = React.useCallback(async (incomingURI: string) => {
+    try {
+      const parsedURI = await verifyTransactionRequest(incomingURI, { allowUnsafeTestnetURIs })
+      setURI(parsedURI)
+    } catch (error) {
+      trackError(error)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    const unsubscribe = subscribeToDeepLinkURLs(async incomingURI => {
+      const url = new URL(incomingURI)
+      switch (url.pathname) {
+        case StellarUriType.Transaction:
+        case StellarUriType.Pay:
+          verifyStellarURI(incomingURI)
+          break
+        default:
+          trackError(
+            CustomError(
+              "UnexpectedStellarUriTypeError",
+              `Incoming uri ${incomingURI} does not match any expected type.`,
+              { incomingURI }
+            )
+          )
+          break
+      }
+    })
+    return unsubscribe
+  }, [verifyStellarURI])
+
+  return (
+    <TransactionRequestContext.Provider value={{ uri, clearURI }}>{props.children}</TransactionRequestContext.Provider>
+  )
+}
+
+export { ContextType as TransactionRequestContextType, TransactionRequestContext }

src/AppSettings/components/AppSettings.tsx

@@ -34,7 +34,6 @@ function AppSettings() {
 
   const { accounts } = React.useContext(AccountsContext)
   const settings = React.useContext(SettingsContext)
-  const trustedServicesEnabled = process.env.TRUSTED_SERVICES && process.env.TRUSTED_SERVICES === "enabled"
 
   const getEffectiveLanguage = <L extends string | undefined, F extends any>(lang: L, fallback: F) => {
     return availableLanguages.indexOf(lang as any) > -1 ? lang : fallback
@@ -73,7 +72,7 @@ function AppSettings() {
         />
         <HideMemoSetting onToggle={settings.toggleHideMemos} value={settings.hideMemos} />
         <MultiSigSetting onToggle={settings.toggleMultiSignature} value={settings.multiSignature} />
-        {trustedServicesEnabled ? <TrustedServicesSetting onClick={navigateToTrustedServices} /> : undefined}
+        <TrustedServicesSetting onClick={navigateToTrustedServices} />
       </List>
       <SettingsDialogs />
     </Carousel>

src/Generic/components/AssetSelector.tsx

@@ -72,6 +72,7 @@ interface AssetSelectorProps {
   assets: Array<Asset | Horizon.BalanceLine>
   children?: React.ReactNode
   className?: string
+  disabled?: boolean
   disabledAssets?: Asset[]
   disableUnderline?: boolean
   helperText?: TextFieldProps["helperText"]
@@ -123,6 +124,7 @@ function AssetSelector(props: AssetSelectorProps) {
     <TextField
       autoFocus={props.autoFocus}
       className={props.className}
+      disabled={props.disabled}
       error={Boolean(props.inputError)}
       helperText={props.helperText}
       label={props.inputError ? props.inputError : props.label}

src/Payment/components/PaymentDialog.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { useTranslation } from "react-i18next"
-import { Asset, Server, Transaction } from "stellar-sdk"
+import { Asset, MemoType, Server, Transaction } from "stellar-sdk"
 import { Account } from "~App/contexts/accounts"
 import { trackError } from "~App/contexts/notifications"
 import { useLiveAccountData, useLiveAccountOffers } from "~Generic/hooks/stellar-subscriptions"
@@ -15,12 +15,21 @@ import MainTitle from "~Generic/components/MainTitle"
 import TransactionSender from "~Transaction/components/TransactionSender"
 import PaymentForm from "./PaymentForm"
 
+export interface PaymentParams {
+  amount?: string
+  asset?: Asset
+  destination?: string
+  memo?: string
+  memoType?: MemoType
+}
+
 interface Props {
   account: Account
   accountData: AccountData
   horizon: Server
   onClose: () => void
   openOrdersCount: number
+  paymentParams?: PaymentParams
   sendTransaction: (transaction: Transaction) => Promise<any>
 }
 
@@ -75,6 +84,7 @@ function PaymentDialog(props: Props) {
         onCancel={props.onClose}
         onSubmit={handleSubmit}
         openOrdersCount={props.openOrdersCount}
+        preselectedParams={props.paymentParams}
         testnet={props.account.testnet}
         trustedAssets={trustedAssets}
         txCreationPending={txCreationPending}
@@ -83,12 +93,14 @@ function PaymentDialog(props: Props) {
   )
 }
 
-function ConnectedPaymentDialog(props: Pick<Props, "account" | "onClose">) {
+function ConnectedPaymentDialog(
+  props: Pick<Props, "account" | "onClose" | "paymentParams"> & { onSubmissionCompleted?: () => void }
+) {
   const accountData = useLiveAccountData(props.account.publicKey, props.account.testnet)
   const { offers: openOrders } = useLiveAccountOffers(props.account.publicKey, props.account.testnet)
 
   return (
-    <TransactionSender account={props.account} onSubmissionCompleted={props.onClose}>
+    <TransactionSender account={props.account} onSubmissionCompleted={props.onSubmissionCompleted || props.onClose}>
       {({ horizon, sendTransaction }) => (
         <PaymentDialog
           {...props}