“Add Token” via freighter-api

@shared/api/external.ts

@@ -40,6 +40,28 @@ export const requestPublicKey = async (): Promise<{
   return { publicKey: response?.publicKey || "", error: response?.apiError };
 };
 
+export const submitToken = async (args: {
+  contractId: string;
+  networkPassphrase?: string;
+}): Promise<{
+  error?: FreighterApiError;
+}> => {
+  let response;
+  try {
+    response = await sendMessageToContentScript({
+      contractId: args.contractId,
+      networkPassphrase: args.networkPassphrase,
+      type: EXTERNAL_SERVICE_TYPES.SUBMIT_TOKEN,
+    });
+  } catch (e) {
+    return {
+      error: FreighterApiInternalError,
+    };
+  }
+
+  return { error: response?.apiError };
+};
+
 export const submitTransaction = async (
   transactionXdr: string,
   opts?:

@shared/api/internal.ts

@@ -957,6 +957,16 @@ export const handleSignedHwPayload = async ({
   }
 };
 
+export const addToken = async (): Promise<void> => {
+  try {
+    await sendMessageToBackground({
+      type: SERVICE_TYPES.ADD_TOKEN,
+    });
+  } catch (e) {
+    console.error(e);
+  }
+};
+
 export const signTransaction = async (): Promise<void> => {
   try {
     await sendMessageToBackground({

@shared/api/types.ts

@@ -103,15 +103,19 @@ export interface MemoRequiredAccount {
 }
 
 export interface ExternalRequestBase {
-  network: string;
-  networkPassphrase: string;
   accountToSign?: string;
   address?: string;
+  networkPassphrase?: string;
   type: EXTERNAL_SERVICE_TYPES;
 }
 
+export interface ExternalRequestToken extends ExternalRequestBase {
+  contractId: string;
+}
+
 export interface ExternalRequestTx extends ExternalRequestBase {
   transactionXdr: string;
+  network?: string;
 }
 
 export interface ExternalRequestBlob extends ExternalRequestBase {
@@ -124,6 +128,7 @@ export interface ExternalRequestAuthEntry extends ExternalRequestBase {
 }
 
 export type ExternalRequest =
+  | ExternalRequestToken
   | ExternalRequestTx
   | ExternalRequestBlob
   | ExternalRequestAuthEntry;

@shared/constants/services.ts

@@ -14,6 +14,7 @@ export enum SERVICE_TYPES {
   CONFIRM_PASSWORD = "CONFIRM_PASSWORD",
   REJECT_ACCESS = "REJECT_ACCESS",
   GRANT_ACCESS = "GRANT_ACCESS",
+  ADD_TOKEN = "ADD_TOKEN",
   SIGN_TRANSACTION = "SIGN_TRANSACTION",
   SIGN_BLOB = "SIGN_BLOB",
   SIGN_AUTH_ENTRY = "SIGN_AUTH_ENTRY",
@@ -53,6 +54,7 @@ export enum SERVICE_TYPES {
 export enum EXTERNAL_SERVICE_TYPES {
   REQUEST_ACCESS = "REQUEST_ACCESS",
   REQUEST_PUBLIC_KEY = "REQUEST_PUBLIC_KEY",
+  SUBMIT_TOKEN = "SUBMIT_TOKEN",
   SUBMIT_TRANSACTION = "SUBMIT_TRANSACTION",
   SUBMIT_BLOB = "SUBMIT_BLOB",
   SUBMIT_AUTH_ENTRY = "SUBMIT_AUTH_ENTRY",

@stellar/freighter-api/src/addToken.ts

@@ -0,0 +1,23 @@
+import { submitToken } from "@shared/api/external";
+import { FreighterApiError } from "@shared/api/types";
+import { FreighterApiNodeError } from "@shared/api/helpers/extensionMessaging";
+import { isBrowser } from ".";
+
+export const addToken = async (args: {
+  contractId: string;
+  networkPassphrase?: string;
+}): Promise<{
+  error?: FreighterApiError;
+}> => {
+  if (isBrowser) {
+    const req = await submitToken(args);
+
+    if (req.error) {
+      return { error: req.error };
+    }
+
+    return {};
+  }
+
+  return { error: FreighterApiNodeError };
+};

@stellar/freighter-api/src/index.ts

@@ -1,4 +1,5 @@
 import { getAddress } from "./getAddress";
+import { addToken } from "./addToken";
 import { signTransaction } from "./signTransaction";
 import { signMessage } from "./signMessage";
 import { signAuthEntry } from "./signAuthEntry";
@@ -14,6 +15,7 @@ export const isBrowser = typeof window !== "undefined";
 
 export {
   getAddress,
+  addToken,
   signTransaction,
   signMessage,
   signAuthEntry,
@@ -27,6 +29,7 @@ export {
 };
 export default {
   getAddress,
+  addToken,
   signTransaction,
   signMessage,
   signAuthEntry,

README.md

@@ -96,6 +96,8 @@ That should launch your project in xcode. You should run the project, with a tar
 
 [The `signTransaction` playground](http://localhost:3000/docs/playground/signTransaction)
 
+[The `addToken` playground](http://localhost:3000/docs/playground/addToken)
+
 It's important to note that these last functions won't interact with the _dev server_ popup
 UI on `localhost:9000` — you'll need to re-install the unpacked extension each
 time you make a change.

docs/docs/playground/addToken.mdx

@@ -0,0 +1,11 @@
+---
+id: addToken
+title: addToken
+---
+
+#### `addToken({ contractId: string, networkPassphrase?: string }) -> <Promise<{ error?: string; }>>`
+
+import { AddTokenDemo } from "./components/AddTokenDemo";
+
+<strong>Test Freighter's `addToken` method:</strong>
+<AddTokenDemo />

docs/docs/playground/components/AddTokenDemo.tsx

@@ -0,0 +1,56 @@
+import { addToken } from "@stellar/freighter-api";
+import React, { useState } from "react";
+import { PlaygroundInput, PlaygroundTextarea } from "./basics/inputs";
+
+export const AddTokenDemo = () => {
+  const [contractId, setContractId] = useState("");
+  const [networkPassphrase, setNetworkPassphrase] = useState("");
+  const [result, setResult] = useState("");
+
+  const contractIdOnChangeHandler = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setContractId(e.currentTarget.value);
+  };
+
+  const networkPassphraseOnChangeHandler = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setNetworkPassphrase(e.currentTarget.value);
+  };
+
+  const btnHandler = async () => {
+    let tokenResult;
+
+    tokenResult = await addToken({
+      contractId,
+      networkPassphrase,
+    });
+
+    if (tokenResult.error) {
+      setResult(JSON.stringify(tokenResult.error));
+    } else {
+      setResult("Token info successfully sent.");
+    }
+  };
+
+  return (
+    <section>
+      <div>
+        Enter Token's Contract Id:
+        <PlaygroundInput onChange={contractIdOnChangeHandler} />
+      </div>
+      <div>
+        Enter network passphrase:
+        <PlaygroundInput onChange={networkPassphraseOnChangeHandler} />
+      </div>
+      <div>
+        Result:
+        <PlaygroundTextarea readOnly value={result} />
+      </div>
+      <button type="button" onClick={btnHandler}>
+        Add Token
+      </button>
+    </section>
+  );
+};

docs/docs/playground/components/SignTransactionDemo.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
 import { signTransaction } from "@stellar/freighter-api";
+import React, { useState } from "react";
 import { PlaygroundInput, PlaygroundTextarea } from "./basics/inputs";
 
 export const SignTransactionDemo = () => {

docs/sidebars.js

@@ -7,6 +7,7 @@ const playgroundPaths = [
   "getAddress",
   "getNetwork",
   "getNetworkDetails",
+  "addToken",
   "signTransaction",
   "signAuthEntry",
   "signMessage",

extension/src/background/helpers/account.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import {
   ACCOUNT_NAME_LIST_ID,
   ALLOWLIST_ID,
@@ -238,11 +239,9 @@ export const subscribeAccount = async (publicKey: string) => {
     const options = {
       method: "POST",
       headers: {
-        // eslint-disable-next-line
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        // eslint-disable-next-line
         pub_key: publicKey,
         network: networkDetails.network,
       }),
@@ -266,26 +265,28 @@ export const subscribeAccount = async (publicKey: string) => {
   return { publicKey };
 };
 
-export const subscribeTokenBalance = async (
-  publicKey: string,
-  contractId: string,
-) => {
+export const subscribeTokenBalance = async ({
+  publicKey,
+  contractId,
+  network,
+}: {
+  publicKey: string;
+  contractId: string;
+  network: string;
+}) => {
   try {
-    const networkDetails = await getNetworkDetails();
     const options = {
       method: "POST",
       headers: {
-        // eslint-disable-next-line
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        // eslint-disable-next-line
         pub_key: publicKey,
-        // eslint-disable-next-line
         contract_id: contractId,
-        network: networkDetails.network,
+        network,
       }),
     };
+
     const res = await fetch(
       `${INDEXER_URL}/subscription/token-balance`,
       options,
@@ -301,20 +302,28 @@ export const subscribeTokenBalance = async (
   }
 };
 
-export const subscribeTokenHistory = async (
-  publicKey: string,
-  contractId: string,
-) => {
+export const subscribeTokenHistory = async ({
+  publicKey,
+  contractId,
+  network,
+}: {
+  publicKey: string;
+  contractId: string;
+  network: string;
+}) => {
   try {
     const options = {
       method: "POST",
       headers: {
-        // eslint-disable-next-line
         "Content-Type": "application/json",
       },
-      // eslint-disable-next-line
-      body: JSON.stringify({ pub_key: publicKey, contract_id: contractId }),
+      body: JSON.stringify({
+        pub_key: publicKey,
+        contract_id: contractId,
+        network,
+      }),
     };
+
     const res = await fetch(`${INDEXER_URL}/subscription/token`, options);
 
     if (!res.ok) {