feat: disable wallet buttons for accounts that cannot sign transactions

app/components/UI/AssetOverview/__snapshots__/AssetOverview.test.tsx.snap

@@ -390,6 +390,7 @@ exports[`AssetOverview should render correctly 1`] = `
  }
  >
  <TouchableOpacity
+ disabled={false}
  onPress={[Function]}
  style={
  {
@@ -448,7 +449,11 @@ exports[`AssetOverview should render correctly 1`] = `
  accessibilityRole="text"
  style={
  {
- "color": "#6a737d",
+ "0": {
+ "color": "#6a737d",
+ },
+ "1": undefined,
+ "color": "#141618",
  "fontFamily": "EuclidCircularB-Regular",
  "fontSize": 14,
  "fontWeight": "400",
@@ -485,6 +490,7 @@ exports[`AssetOverview should render correctly 1`] = `
  }
  >
  <TouchableOpacity
+ disabled={false}
  onPress={[Function]}
  style={
  {
@@ -543,7 +549,11 @@ exports[`AssetOverview should render correctly 1`] = `
  accessibilityRole="text"
  style={
  {
- "color": "#6a737d",
+ "0": {
+ "color": "#6a737d",
+ },
+ "1": undefined,
+ "color": "#141618",
  "fontFamily": "EuclidCircularB-Regular",
  "fontSize": 14,
  "fontWeight": "400",
@@ -580,6 +590,7 @@ exports[`AssetOverview should render correctly 1`] = `
  }
  >
  <TouchableOpacity
+ disabled={false}
  onPress={[Function]}
  style={
  {
@@ -638,7 +649,11 @@ exports[`AssetOverview should render correctly 1`] = `
  accessibilityRole="text"
  style={
  {
- "color": "#6a737d",
+ "0": {
+ "color": "#6a737d",
+ },
+ "1": undefined,
+ "color": "#141618",
  "fontFamily": "EuclidCircularB-Regular",
  "fontSize": 14,
  "fontWeight": "400",
@@ -675,6 +690,7 @@ exports[`AssetOverview should render correctly 1`] = `
  }
  >
  <TouchableOpacity
+ disabled={false}
  onPress={[Function]}
  style={
  {
@@ -733,7 +749,11 @@ exports[`AssetOverview should render correctly 1`] = `
  accessibilityRole="text"
  style={
  {
- "color": "#6a737d",
+ "0": {
+ "color": "#6a737d",
+ },
+ "1": undefined,
+ "color": "#141618",
  "fontFamily": "EuclidCircularB-Regular",
  "fontSize": 14,
  "fontWeight": "400",
@@ -770,6 +790,7 @@ exports[`AssetOverview should render correctly 1`] = `
  }
  >
  <TouchableOpacity
+ disabled={false}
  onPress={[Function]}
  style={
  {
@@ -828,7 +849,11 @@ exports[`AssetOverview should render correctly 1`] = `
  accessibilityRole="text"
  style={
  {
- "color": "#6a737d",
+ "0": {
+ "color": "#6a737d",
+ },
+ "1": undefined,
+ "color": "#141618",
  "fontFamily": "EuclidCircularB-Regular",
  "fontSize": 14,
  "fontWeight": "400",

app/components/UI/WalletAction/WalletAction.tsx

@@ -1,51 +1,81 @@
 // Third party dependencies.
-import React from 'react';
-import { View, TouchableOpacity } from 'react-native';
+import React, { useMemo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
 import { lightTheme } from '@metamask/design-tokens';
 
 // External dependencies.
 import Text, {
  TextVariant,
 } from '../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../component-library/hooks';
+
 // Internal dependencies.
-import { WalletActionProps } from './WalletAction.types';
+import { walletActionDetails, WalletActionProps } from './WalletAction.types';
 import styleSheet from './WalletAction.styles';
 import Avatar, {
  AvatarVariant,
 } from '../../../component-library/components/Avatars/Avatar';
 
 const WalletAction = ({
- actionTitle,
- actionDescription,
+ actionType,
  iconName,
  iconSize,
  onPress,
  containerStyle,
  iconStyle,
  actionID,
+ disabled,
  ...props
 }: WalletActionProps) => {
+ const actionStrings = actionType ? walletActionDetails[actionType] : null;
+ const actionTitle = actionStrings?.title ?? '';
+ const actionDescription = disabled
+ ? actionStrings?.disabledDescription
+ : actionStrings?.description;
  const { colors } = lightTheme;
  const { styles } = useStyles(styleSheet, {});
+
+ const avatarStyle = useMemo(
+ () => ({
+ ...iconStyle,
+ backgroundColor: disabled ? colors.primary.muted : colors.primary.default,
+ }),
+ [disabled, colors, iconStyle],
+ );
+
+ const titleStyle = useMemo(
+ () => (disabled ? { color: colors.text.muted } : undefined),
+ [disabled, colors],
+ );
+
+ const descriptionStyle = useMemo(
+ () => [
+ styles.descriptionLabel,
+ disabled ? { color: colors.text.muted } : undefined,
+ ],
+ [styles, disabled, colors],
+ );
+
  return (
  <TouchableOpacity
  style={{ ...styles.base, ...containerStyle }}
  onPress={onPress}
  testID={actionID}
+ disabled={disabled}
  {...props}
  >
  <Avatar
  variant={AvatarVariant.Icon}
- style={iconStyle}
+ style={avatarStyle}
  size={iconSize}
  name={iconName}
- backgroundColor={colors.primary.default}
  iconColor={colors.background.default}
  />
  <View>
- <Text variant={TextVariant.BodyLGMedium}>{actionTitle}</Text>
- <Text variant={TextVariant.BodyMD} style={styles.descriptionLabel}>
+ <Text variant={TextVariant.BodyLGMedium} style={titleStyle}>
+ {actionTitle}
+ </Text>
+ <Text variant={TextVariant.BodyMD} style={descriptionStyle}>
  {actionDescription}
  </Text>
  </View>

app/components/UI/WalletAction/WalletAction.types.ts

@@ -1,14 +1,64 @@
 import { ImageStyle, ViewStyle } from 'react-native';
 import { IconName } from '../../../component-library/components/Icons/Icon';
 import { AvatarSize } from '../../../component-library/components/Avatars/Avatar';
+import { strings } from '../../../../locales/i18n';
+
+export enum WalletActionType {
+ Buy = 'Buy',
+ Sell = 'Sell',
+ Swap = 'Swap',
+ Bridge = 'Bridge',
+ Send = 'Send',
+ Receive = 'Receive',
+}
+
+export interface WalletActionDetail {
+ title: string;
+ description: string;
+ disabledDescription: string;
+}
+
+export const walletActionDetails: Record<WalletActionType, WalletActionDetail> =
+ {
+ [WalletActionType.Buy]: {
+ title: strings('asset_overview.buy_button'),
+ description: strings('asset_overview.buy_description'),
+ disabledDescription: strings('asset_overview.disabled_button.buy'),
+ },
+ [WalletActionType.Sell]: {
+ title: strings('asset_overview.sell_button'),
+ description: strings('asset_overview.sell_description'),
+ disabledDescription: strings('asset_overview.disabled_button.sell'),
+ },
+ [WalletActionType.Swap]: {
+ title: strings('asset_overview.swap'),
+ description: strings('asset_overview.swap_description'),
+ disabledDescription: strings('asset_overview.disabled_button.swap'),
+ },
+ [WalletActionType.Bridge]: {
+ title: strings('asset_overview.bridge'),
+ description: strings('asset_overview.bridge_description'),
+ disabledDescription: strings('asset_overview.disabled_button.bridge'),
+ },
+ [WalletActionType.Send]: {
+ title: strings('asset_overview.send_button'),
+ description: strings('asset_overview.send_description'),
+ disabledDescription: strings('asset_overview.disabled_button.send'),
+ },
+ [WalletActionType.Receive]: {
+ title: strings('asset_overview.receive_button'),
+ description: strings('asset_overview.receive_description'),
+ disabledDescription: strings('asset_overview.disabled_button.receive'),
+ },
+ };
 
 export interface WalletActionProps {
- actionTitle?: string;
- actionDescription?: string;
+ actionType?: WalletActionType;
  iconName: IconName;
  iconSize: AvatarSize;
  onPress: () => void;
  containerStyle?: ViewStyle;
  iconStyle?: ImageStyle;
  actionID?: string;
+ disabled?: boolean;
 }