feat: Create Permit Simulation

app/component-library/components/Buttons/ButtonPill/ButtonPill.styles.ts

@@ -0,0 +1,49 @@
+// Third party dependencies.
+import { StyleSheet } from 'react-native';
+
+// External dependencies.
+import { Theme } from '../../../../util/theme/models';
+
+/**
+ * Style sheet input parameters.
+ */
+export interface ButtonPillStyleSheetVars {
+  pressed: boolean;
+  isDisabled: boolean;
+}
+
+/**
+ * Style sheet function for ButtonPill component
+ *
+ * @param params Style sheet params
+ * @param params.theme Theme object
+ * @param params.vars Arbitrary inputs this style sheet depends on
+ * @returns StyleSheet object
+ */
+const styleSheet = (params: {
+  theme: Theme;
+  vars: ButtonPillStyleSheetVars;
+}) => {
+  const {
+    theme: { colors },
+    vars: { pressed, isDisabled }
+  } = params;
+
+  return StyleSheet.create({
+    base: {
+      backgroundColor: colors.background.alternative,
+      color: colors.text.default,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 99,
+      opacity: isDisabled ? 0.5 : 1,
+      ...(pressed && {
+        backgroundColor: colors.background.alternativePressed,
+      }),
+    },
+  });
+};
+
+export default styleSheet;

app/component-library/components/Buttons/ButtonPill/ButtonPill.test.tsx

@@ -0,0 +1,15 @@
+// Third party dependencies.
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+// Internal dependencies.
+import ButtonPill from './ButtonPill';
+
+describe('ButtonPill', () => {
+  it('should render correctly', () => {
+    const { toJSON } = render(
+      <ButtonPill onPress={jest.fn} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

app/component-library/components/Buttons/ButtonPill/ButtonPill.tsx

@@ -0,0 +1,69 @@
+// Third party dependencies.
+import React, { useCallback, useState } from 'react';
+import { GestureResponderEvent, TouchableOpacity, TouchableOpacityProps } from 'react-native';
+
+// External dependencies.
+import { useStyles } from '../../../hooks';
+
+// Internal dependencies.
+import stylesheet from './ButtonPill.styles';
+
+/**
+ * ButtonPill component props.
+ */
+export interface ButtonPillProps extends TouchableOpacityProps {
+  /**
+   * Optional param to disable the button.
+   */
+  isDisabled?: boolean;
+}
+
+const ButtonPill = ({
+  onPress,
+  onPressIn,
+  onPressOut,
+  style,
+  isDisabled = false,
+  children,
+  ...props
+}: ButtonPillProps) => {
+  const [pressed, setPressed] = useState(false);
+  const { styles } = useStyles(stylesheet, {
+    style,
+    pressed,
+    isDisabled,
+  });
+
+  const triggerOnPressedIn = useCallback(
+    (e: GestureResponderEvent) => {
+      setPressed(true);
+      onPressIn?.(e);
+    },
+    [setPressed, onPressIn],
+  );
+
+  const triggerOnPressedOut = useCallback(
+    (e: GestureResponderEvent) => {
+      setPressed(false);
+      onPressOut?.(e);
+    },
+    [setPressed, onPressOut],
+  );
+
+  return (
+    <TouchableOpacity
+      style={styles.base}
+      onPress={!isDisabled ? onPress : undefined}
+      onPressIn={!isDisabled ? triggerOnPressedIn : undefined}
+      onPressOut={!isDisabled ? triggerOnPressedOut : undefined}
+      accessible
+      activeOpacity={1}
+      disabled={isDisabled}
+      {...props}
+    >
+      {children}
+    </TouchableOpacity>
+  );
+};
+
+export default ButtonPill;

app/component-library/components/Buttons/ButtonPill/__snapshots__/ButtonPill.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonPill should render correctly 1`] = `
+<TouchableOpacity
+  accessible={true}
+  activeOpacity={1}
+  disabled={false}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "backgroundColor": "#f2f4f6",
+      "borderRadius": 99,
+      "color": "#141618",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 8,
+      "paddingVertical": 4,
+    }
+  }
+/>
+`;

app/component-library/components/Buttons/ButtonPill/index.ts

@@ -0,0 +1 @@
+export { default } from './ButtonPill';

app/components/UI/Name/Name.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import { TextProps, View } from 'react-native';
+import { TextProps, View, ViewStyle } from 'react-native';
 
 import { useStyles } from '../../../component-library/hooks';
 import Text, {
@@ -34,11 +34,12 @@ const NameLabel: React.FC<{
   );
 };
 
-const UnknownEthereumAddress: React.FC<{ address: string }> = ({ address }) => {
+const UnknownEthereumAddress: React.FC<{ address: string, style?: ViewStyle }> = ({ address, style }) => {
   const displayNameVariant = DisplayNameVariant.Unknown;
   const { styles } = useStyles(styleSheet, { displayNameVariant });
+
   return (
-    <View style={styles.base}>
+    <View style={[styles.base, style]}>
       <Icon name={IconName.Question} />
       <NameLabel displayNameVariant={displayNameVariant} ellipsizeMode="middle">
         {renderShortAddress(address, 5)}
@@ -52,6 +53,7 @@ const Name: React.FC<NameProperties> = ({
   type,
   value,
   variation,
+  style,
 }) => {
   if (type !== NameType.EthereumAddress) {
     throw new Error('Unsupported NameType: ' + type);
@@ -69,11 +71,11 @@ const Name: React.FC<NameProperties> = ({
   });
 
   if (variant === DisplayNameVariant.Unknown) {
-    return <UnknownEthereumAddress address={value} />;
+    return <UnknownEthereumAddress address={value} style={style} />;
   }
 
   return (
-    <View style={styles.base}>
+    <View style={[styles.base, style]}>
       <Identicon
         address={value}
         diameter={16}

app/components/UI/Name/Name.types.ts

@@ -1,4 +1,4 @@
-import { ViewProps } from 'react-native';
+import { ViewProps, ViewStyle } from 'react-native';
 
 /**
  * The name types supported by the NameController.
@@ -15,4 +15,5 @@ export interface NameProperties extends ViewProps {
   type: NameType;
   value: string;
   variation: string;
+  style?: ViewStyle;
 }

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

@@ -3,17 +3,20 @@
 exports[`Name recognized address should render image 1`] = `
 <View
   style={
-    {
-      "alignItems": "center",
-      "alignSelf": "center",
-      "backgroundColor": "#f2f4f6",
-      "borderRadius": 99,
-      "flexDirection": "row",
-      "gap": 5,
-      "paddingLeft": 8,
-      "paddingRight": 8,
-      "paddingVertical": 4,
-    }
+    [
+      {
+        "alignItems": "center",
+        "alignSelf": "center",
+        "backgroundColor": "#f2f4f6",
+        "borderRadius": 99,
+        "flexDirection": "row",
+        "gap": 5,
+        "paddingLeft": 8,
+        "paddingRight": 8,
+        "paddingVertical": 4,
+      },
+      undefined,
+    ]
   }
 >
   <View
@@ -102,17 +105,20 @@ exports[`Name recognized address should render image 1`] = `
 exports[`Name recognized address should return name 1`] = `
 <View
   style={
-    {
-      "alignItems": "center",
-      "alignSelf": "center",
-      "backgroundColor": "#f2f4f6",
-      "borderRadius": 99,
-      "flexDirection": "row",
-      "gap": 5,
-      "paddingLeft": 8,
-      "paddingRight": 8,
-      "paddingVertical": 4,
-    }
+    [
+      {
+        "alignItems": "center",
+        "alignSelf": "center",
+        "backgroundColor": "#f2f4f6",
+        "borderRadius": 99,
+        "flexDirection": "row",
+        "gap": 5,
+        "paddingLeft": 8,
+        "paddingRight": 8,
+        "paddingVertical": 4,
+      },
+      undefined,
+    ]
   }
 >
   <View
@@ -201,17 +207,20 @@ exports[`Name recognized address should return name 1`] = `
 exports[`Name unknown address displays checksummed address 1`] = `
 <View
   style={
-    {
-      "alignItems": "center",
-      "alignSelf": "center",
-      "backgroundColor": "#f2f4f6",
-      "borderRadius": 99,
-      "flexDirection": "row",
-      "gap": 5,
-      "paddingLeft": 8,
-      "paddingRight": 8,
-      "paddingVertical": 4,
-    }
+    [
+      {
+        "alignItems": "center",
+        "alignSelf": "center",
+        "backgroundColor": "#f2f4f6",
+        "borderRadius": 99,
+        "flexDirection": "row",
+        "gap": 5,
+        "paddingLeft": 8,
+        "paddingRight": 8,
+        "paddingVertical": 4,
+      },
+      undefined,
+    ]
   }
 >
   <SvgMock