feat: integrate api for submit claims

app/scripts/controller-init/messengers/subscription/subscription-service-messenger.ts

@@ -1,10 +1,8 @@
 import { Messenger } from '@metamask/base-controller';
-import type {
-  SubscriptionControllerActions,
-  SubscriptionControllerEvents,
-} from '@metamask/subscription-controller';
+import type { SubscriptionControllerEvents } from '@metamask/subscription-controller';
 import {
   SERVICE_NAME,
+  SubscriptionServiceAction,
   SubscriptionServiceMessenger,
 } from '../../../services/subscription/types';
 
@@ -16,10 +14,7 @@ import {
  * @returns The restricted messenger.
  */
 export function getSubscriptionServiceMessenger(
-  messenger: Messenger<
-    SubscriptionControllerActions,
-    SubscriptionControllerEvents
-  >,
+  messenger: Messenger<SubscriptionServiceAction, SubscriptionControllerEvents>,
 ): SubscriptionServiceMessenger {
   return messenger.getRestricted({
     name: SERVICE_NAME,
@@ -30,6 +25,7 @@ export function getSubscriptionServiceMessenger(
       'SubscriptionController:updatePaymentMethod',
       'SubscriptionController:getCryptoApproveTransactionParams',
       'SubscriptionController:getBillingPortalUrl',
+      'AuthenticationController:getBearerToken',
     ],
     allowedEvents: [],
   });

app/scripts/metamask-controller.js

@@ -2288,6 +2288,9 @@ export default class MetamaskController extends EventEmitter {
         this.SubscriptionService.updateSubscriptionCryptoPaymentMethod.bind(
           this.SubscriptionService,
         ),
+      submitShieldClaim: this.SubscriptionService.submitShieldClaim.bind(
+        this.SubscriptionService,
+      ),
 
       // hardware wallets
       connectHardware: this.connectHardware.bind(this),

app/scripts/services/subscription/subscription-service.ts

@@ -4,6 +4,7 @@ import {
   StartSubscriptionRequest,
   UpdatePaymentMethodOpts,
 } from '@metamask/subscription-controller';
+import { handleFetch } from '@metamask/controller-utils';
 import ExtensionPlatform from '../../platforms/extension';
 import { WebAuthenticator } from '../oauth/types';
 import {
@@ -128,6 +129,44 @@ export class SubscriptionService {
     return subscriptions;
   }
 
+  async submitShieldClaim(params: {
+    email: string;
+    impactedWalletAddress: string;
+    impactedTransactionHash: string;
+    reimbursementWalletAddress: string;
+    caseDescription: string;
+    files: File[];
+  }) {
+    console.log('check: submitShieldClaim', params);
+    const url = 'https://claims.dev-api.cx.metamask.io/claims';
+    const formData = new FormData();
+    formData.append('email', params.email);
+    formData.append('impactedWalletAddress', params.impactedWalletAddress);
+    formData.append('impactedTransactionHash', params.impactedTransactionHash);
+    formData.append(
+      'reimbursementWalletAddress',
+      params.reimbursementWalletAddress,
+    );
+    formData.append('caseDescription', params.caseDescription);
+    // add multiple files to formData
+    params.files.forEach((file) => {
+      formData.append('attachments', file);
+    });
+
+    console.log('check: formData', formData);
+    const accessToken = await this.#messenger.call(
+      'AuthenticationController:getBearerToken',
+    );
+    return await handleFetch(url, {
+      method: 'POST',
+      body: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data',
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+  }
+
   async #openAndWaitForTabToClose(params: { url: string; successUrl: string }) {
     const openedTab = await this.#platform.openTab({ url: params.url });
 

app/scripts/services/subscription/types.ts

@@ -1,10 +1,13 @@
 import { RestrictedMessenger } from '@metamask/base-controller';
 import {
+  SubscriptionControllerGetBillingPortalUrlAction,
+  SubscriptionControllerGetCryptoApproveTransactionParamsAction,
   SubscriptionControllerGetPricingAction,
   SubscriptionControllerGetSubscriptionsAction,
   SubscriptionControllerStartShieldSubscriptionWithCardAction,
   SubscriptionControllerUpdatePaymentMethodAction,
 } from '@metamask/subscription-controller';
+import { AuthenticationControllerGetBearerToken } from '@metamask/profile-sync-controller/auth';
 import ExtensionPlatform from '../../platforms/extension';
 import { WebAuthenticator } from '../oauth/types';
 
@@ -16,7 +19,10 @@ export type SubscriptionServiceAction =
   | SubscriptionControllerGetPricingAction
   | SubscriptionControllerStartShieldSubscriptionWithCardAction
   | SubscriptionControllerUpdatePaymentMethodAction
-  | SubscriptionControllerGetSubscriptionsAction;
+  | SubscriptionControllerGetSubscriptionsAction
+  | SubscriptionControllerGetCryptoApproveTransactionParamsAction
+  | SubscriptionControllerGetBillingPortalUrlAction
+  | AuthenticationControllerGetBearerToken;
 
 export type SubscriptionServiceEvent = never;
 

shared/constants/app-state.ts

@@ -44,6 +44,11 @@ export enum PasswordChangeToastType {
   Errored = 'errored',
 }
 
+export enum ClaimSubmitToastType {
+  Success = 'success',
+  Errored = 'errored',
+}
+
 export type NetworkConnectionBanner =
   | { status: 'unknown' | 'available' }
   | {

test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json

@@ -69,6 +69,7 @@
     "showNewSrpAddedToast": "boolean",
     "showPasswordChangeToast": null,
     "showCopyAddressToast": "boolean",
+    "showClaimSubmitToast": null,
     "showSupportDataConsentModal": "boolean",
     "showConnectionsRemovedModal": "boolean"
   },

ui/components/app/toast-master/selectors.ts

@@ -18,7 +18,10 @@ import {
   isSolanaAccount,
 } from '../../../selectors';
 import { MetaMaskReduxState } from '../../../store/store';
-import { PasswordChangeToastType } from '../../../../shared/constants/app-state';
+import {
+  PasswordChangeToastType,
+  ClaimSubmitToastType,
+} from '../../../../shared/constants/app-state';
 import { AccountGroupWithInternalAccounts } from '../../../selectors/multichain-accounts/account-tree.types';
 import { getCaip25CaveatValueFromPermissions } from '../../../pages/permissions-connect/connect-page/utils';
 import { supportsChainIds } from '../../../hooks/useAccountGroupsForPermissions';
@@ -32,6 +35,7 @@ type State = {
       | 'showNewSrpAddedToast'
       | 'showPasswordChangeToast'
       | 'showCopyAddressToast'
+      | 'showClaimSubmitToast'
     >
   >;
   metamask: Partial<
@@ -192,3 +196,15 @@ export function selectShowCopyAddressToast(
 ): boolean {
   return Boolean(state.appState.showCopyAddressToast);
 }
+
+/**
+ * Retrieves the state for the "Claim Submit" toast
+ *
+ * @param state - Redux state object.
+ * @returns ClaimSubmitToastType or null
+ */
+export function selectClaimSubmitToast(
+  state: Pick<State, 'appState'>,
+): ClaimSubmitToastType | null {
+  return state.appState.showClaimSubmitToast || null;
+}

ui/components/app/toast-master/toast-master.js

@@ -43,7 +43,10 @@ import { AvatarNetwork, Icon, IconName } from '../../component-library';
 import { PreferredAvatar } from '../preferred-avatar';
 import { Toast, ToastContainer } from '../../multichain';
 import { SurveyToast } from '../../ui/survey-toast';
-import { PasswordChangeToastType } from '../../../../shared/constants/app-state';
+import {
+  PasswordChangeToastType,
+  ClaimSubmitToastType,
+} from '../../../../shared/constants/app-state';
 import { getDappActiveNetwork } from '../../../selectors/dapp';
 import {
   getAccountGroupWithInternalAccounts,
@@ -60,6 +63,7 @@ import {
   selectPasswordChangeToast,
   selectShowCopyAddressToast,
   selectShowConnectAccountGroupToast,
+  selectClaimSubmitToast,
 } from './selectors';
 import {
   setNewPrivacyPolicyToastClickedOrClosed,
@@ -69,6 +73,7 @@ import {
   setShowNewSrpAddedToast,
   setShowPasswordChangeToast,
   setShowCopyAddressToast,
+  setShowClaimSubmitToast,
 } from './utils';
 
 export function ToastMaster() {
@@ -103,6 +108,7 @@ export function ToastMaster() {
     return (
       <ToastContainer>
         <PasswordChangeToast />
+        <ClaimSubmitToast />
       </ToastContainer>
     );
   }
@@ -514,3 +520,50 @@ function CopyAddressToast() {
     )
   );
 }
+
+const ClaimSubmitToast = () => {
+  const t = useI18nContext();
+  const dispatch = useDispatch();
+
+  const showClaimSubmitToast = useSelector(selectClaimSubmitToast);
+  const autoHideToastDelay = 5 * SECOND;
+
+  return (
+    showClaimSubmitToast !== null && (
+      <Toast
+        dataTestId={
+          showClaimSubmitToast === ClaimSubmitToastType.Success
+            ? 'claim-submit-toast-success'
+            : 'claim-submit-toast-error'
+        }
+        key="claim-submit-toast"
+        text={
+          showClaimSubmitToast === ClaimSubmitToastType.Success
+            ? t('shieldClaimSubmitSuccess')
+            : t('shieldClaimSubmitError')
+        }
+        startAdornment={
+          <Icon
+            name={
+              showClaimSubmitToast === ClaimSubmitToastType.Success
+                ? IconName.Check
+                : IconName.Danger
+            }
+            color={
+              showClaimSubmitToast === ClaimSubmitToastType.Success
+                ? IconColor.successDefault
+                : IconColor.errorDefault
+            }
+          />
+        }
+        autoHideTime={autoHideToastDelay}
+        onAutoHideToast={() => {
+          dispatch(setShowClaimSubmitToast(null));
+        }}
+        onClose={() => {
+          dispatch(setShowClaimSubmitToast(null));
+        }}
+      />
+    )
+  );
+};

ui/components/app/toast-master/utils.ts

@@ -4,10 +4,14 @@ import {
   SET_SHOW_NEW_SRP_ADDED_TOAST,
   SET_SHOW_PASSWORD_CHANGE_TOAST,
   SET_SHOW_COPY_ADDRESS_TOAST,
+  SET_SHOW_CLAIM_SUBMIT_TOAST,
   SHOW_NFT_DETECTION_ENABLEMENT_TOAST,
 } from '../../../store/actionConstants';
 import { submitRequestToBackground } from '../../../store/background-connection';
-import { PasswordChangeToastType } from '../../../../shared/constants/app-state';
+import {
+  PasswordChangeToastType,
+  ClaimSubmitToastType,
+} from '../../../../shared/constants/app-state';
 
 /**
  * Returns true if the privacy policy toast was shown either never, or less than a day ago.
@@ -92,3 +96,10 @@ export function setShowCopyAddressToast(value: boolean) {
     payload: value,
   };
 }
+
+export function setShowClaimSubmitToast(value: ClaimSubmitToastType | null) {
+  return {
+    type: SET_SHOW_CLAIM_SUBMIT_TOAST,
+    payload: value,
+  };
+}

ui/ducks/app/app.ts

@@ -9,7 +9,10 @@ import {
   WebHIDConnectedStatuses,
 } from '../../../shared/constants/hardware-wallets';
 import * as actionConstants from '../../store/actionConstants';
-import { PasswordChangeToastType } from '../../../shared/constants/app-state';
+import {
+  PasswordChangeToastType,
+  ClaimSubmitToastType,
+} from '../../../shared/constants/app-state';
 
 type AppState = {
   customNonceValue: string;
@@ -130,6 +133,7 @@ type AppState = {
   showPasswordChangeToast: PasswordChangeToastType | null;
   showConnectionsRemovedModal: boolean;
   showCopyAddressToast: boolean;
+  showClaimSubmitToast: ClaimSubmitToastType | null;
 };
 
 export type AppSliceState = {
@@ -230,6 +234,7 @@ const initialState: AppState = {
   showNewSrpAddedToast: false,
   showPasswordChangeToast: null,
   showCopyAddressToast: false,
+  showClaimSubmitToast: null,
   showSupportDataConsentModal: false,
   showConnectionsRemovedModal: false,
 };
@@ -775,6 +780,12 @@ export default function reduceApp(
         showCopyAddressToast: action.payload,
       };
 
+    case actionConstants.SET_SHOW_CLAIM_SUBMIT_TOAST:
+      return {
+        ...appState,
+        showClaimSubmitToast: action.payload,
+      };
+
     case actionConstants.SET_SHOW_SUPPORT_DATA_CONSENT_MODAL:
       return {
         ...appState,