approval flow loading text

packages/approval-controller/src/ApprovalController.test.ts

@@ -10,6 +10,7 @@ import {
 import {
   ApprovalRequestNoResultSupportError,
   EndInvalidFlowError,
+  MissingApprovalFlowError,
   NoApprovalFlowsError,
 } from './errors';
 
@@ -1015,14 +1016,15 @@ describe('approval controller', () => {
     it.each([
       ['no options passed', undefined],
       ['partial options passed', {}],
-      ['options passed', { id: 'id' }],
+      ['options passed', { id: 'id', loadingText: 'loadingText' }],
     ])(
       'adds flow to state and calls showApprovalRequest with %s',
-      (_, approvalFlowOptions?: StartFlowOptions) => {
-        const result = approvalController.startFlow(approvalFlowOptions);
+      (_, opts?: StartFlowOptions) => {
+        const result = approvalController.startFlow(opts);
 
         const expectedFlow = {
-          id: approvalFlowOptions?.id ?? expect.any(String),
+          id: opts?.id ?? expect.any(String),
+          loadingText: opts?.loadingText ?? null,
         };
         expect(result).toStrictEqual(expectedFlow);
         expect(showApprovalRequest).toHaveBeenCalledTimes(1);
@@ -1061,6 +1063,51 @@ describe('approval controller', () => {
       );
     });
   });
+
+  describe('setFlowLoadingText', () => {
+    const flowId = 'flowId';
+
+    beforeEach(() => {
+      approvalController.startFlow({ id: flowId });
+    });
+
+    afterEach(() => {
+      approvalController.endFlow({ id: flowId });
+    });
+
+    it('fails to set flow loading text if the flow id does not exist', () => {
+      expect(() =>
+        approvalController.setFlowLoadingText({
+          id: 'wrongId',
+          loadingText: null,
+        }),
+      ).toThrow(MissingApprovalFlowError);
+    });
+
+    it('changes the loading text for the approval flow', () => {
+      const mockLoadingText = 'Mock Loading Text';
+      approvalController.setFlowLoadingText({
+        id: flowId,
+        loadingText: mockLoadingText,
+      });
+
+      expect(
+        approvalController.state[APPROVAL_FLOWS_STORE_KEY].find(
+          (flow) => flow.id === flowId,
+        )?.loadingText,
+      ).toStrictEqual(mockLoadingText);
+    });
+
+    it('sets the loading text back to null for the approval the flow', () => {
+      approvalController.setFlowLoadingText({ id: flowId, loadingText: null });
+
+      expect(
+        approvalController.state[APPROVAL_FLOWS_STORE_KEY].find(
+          (flow) => flow.id === flowId,
+        )?.loadingText,
+      ).toBeNull();
+    });
+  });
 });
 
 // helpers

packages/approval-controller/src/ApprovalController.ts

@@ -11,6 +11,7 @@ import {
   ApprovalRequestNoResultSupportError,
   EndInvalidFlowError,
   NoApprovalFlowsError,
+  MissingApprovalFlowError,
 } from './errors';
 
 const controllerName = 'ApprovalController';
@@ -70,6 +71,7 @@ type ShowApprovalRequest = () => void | Promise<void>;
 
 type ApprovalFlow = {
   id: string;
+  loadingText: string | null;
 };
 
 export type ApprovalFlowState = ApprovalFlow;
@@ -194,12 +196,17 @@ export type AddResult = {
   resultCallbacks?: AcceptResultCallbacks;
 };
 
-export type StartFlowOptions = OptionalField<ApprovalFlow, 'id'>;
+export type StartFlowOptions = OptionalField<
+  ApprovalFlow,
+  'id' | 'loadingText'
+>;
 
 export type ApprovalFlowStartResult = ApprovalFlow;
 
 export type EndFlowOptions = Pick<ApprovalFlow, 'id'>;
 
+export type SetFlowLoadingTextOptions = ApprovalFlow;
+
 export type StartFlow = {
   type: `${typeof controllerName}:startFlow`;
   handler: ApprovalController['startFlow'];
@@ -210,6 +217,11 @@ export type EndFlow = {
   handler: ApprovalController['endFlow'];
 };
 
+export type SetFlowLoadingText = {
+  type: `${typeof controllerName}:setFlowLoadingText`;
+  handler: ApprovalController['setFlowLoadingText'];
+};
+
 export type ApprovalControllerActions =
   | GetApprovalsState
   | ClearApprovalRequests
@@ -219,7 +231,8 @@ export type ApprovalControllerActions =
   | RejectRequest
   | UpdateRequestState
   | StartFlow
-  | EndFlow;
+  | EndFlow
+  | SetFlowLoadingText;
 
 export type ApprovalStateChange = {
   type: `${typeof controllerName}:stateChange`;
@@ -344,6 +357,11 @@ export class ApprovalController extends BaseControllerV2<
       `${controllerName}:endFlow` as const,
       this.endFlow.bind(this),
     );
+
+    this.messagingSystem.registerActionHandler(
+      `${controllerName}:setFlowLoadingText` as const,
+      this.setFlowLoadingText.bind(this),
+    );
   }
 
   /**
@@ -659,19 +677,20 @@ export class ApprovalController extends BaseControllerV2<
    *
    * @param opts - Options bag.
    * @param opts.id - The id of the approval flow.
+   * @param opts.loadingText - The loading text that will be associated to the approval flow.
    * @returns The object containing the approval flow id.
    */
   startFlow(opts: StartFlowOptions = {}): ApprovalFlowStartResult {
     const id = opts.id ?? nanoid();
-    const finalOptions = { id };
+    const loadingText = opts.loadingText ?? null;
 
     this.update((draftState) => {
-      draftState.approvalFlows.push(finalOptions);
+      draftState.approvalFlows.push({ id, loadingText });
     });
 
     this._showApprovalRequest();
 
-    return { id };
+    return { id, loadingText };
   }
 
   /**
@@ -699,6 +718,27 @@ export class ApprovalController extends BaseControllerV2<
     });
   }
 
+  /**
+   * Sets the loading text for the approval flow.
+   *
+   * @param opts - Options bag.
+   * @param opts.id - The approval flow loading text that will be displayed.
+   * @param opts.loadingText - The loading text that will be associated to the approval flow.
+   */
+  setFlowLoadingText({ id, loadingText }: SetFlowLoadingTextOptions) {
+    const flowIndex = this.state.approvalFlows.findIndex(
+      (flow) => flow.id === id,
+    );
+
+    if (flowIndex === -1) {
+      throw new MissingApprovalFlowError(id);
+    }
+
+    this.update((draftState) => {
+      draftState.approvalFlows[flowIndex].loadingText = loadingText;
+    });
+  }
+
   /**
    * Implementation of add operation.
    *

packages/approval-controller/src/errors.ts

@@ -27,3 +27,9 @@ export class EndInvalidFlowError extends Error {
     );
   }
 }
+
+export class MissingApprovalFlowError extends Error {
+  constructor(id: string) {
+    super(`No approval flows found with id '${id}'.`);
+  }
+}