Component: Contract Box Update (#5328)

* can press contract address
MetaMask · Dec 1, 2022 · 09b2cbc · 09b2cbc
1 parent 8d47108
commit 09b2cbc
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 8 deletions.
diff --git a/app/component-library/components-temp/Contracts/ContractBox/ContractBox.constants.ts b/app/component-library/components-temp/Contracts/ContractBox/ContractBox.constants.ts
@@ -18,3 +18,7 @@ export const CONTRACT_COPY_ADDRESS = () => {
 export const CONTRACT_EXPORT_ADDRESS = () => {
   console.log('export address');
 };
+
+export const CONTRACT_ON_PRESS = () => {
+  console.log('contract pressed');
+};
diff --git a/app/component-library/components-temp/Contracts/ContractBox/ContractBox.stories.tsx b/app/component-library/components-temp/Contracts/ContractBox/ContractBox.stories.tsx
@@ -10,6 +10,7 @@ import {
   CONTRACT_LOCAL_IMAGE,
   CONTRACT_COPY_ADDRESS,
   CONTRACT_EXPORT_ADDRESS,
+  CONTRACT_ON_PRESS,
 } from './ContractBox.constants';
 
 storiesOf('Component Library / Contract Box', module)
@@ -19,6 +20,7 @@ storiesOf('Component Library / Contract Box', module)
       contractLocalImage={CONTRACT_LOCAL_IMAGE}
       onCopyAddress={CONTRACT_COPY_ADDRESS}
       onExportAddress={CONTRACT_EXPORT_ADDRESS}
+      onContractPress={CONTRACT_ON_PRESS}
     />
   ))
   .add('Saved Address', () => (
@@ -28,5 +30,6 @@ storiesOf('Component Library / Contract Box', module)
       contractLocalImage={CONTRACT_LOCAL_IMAGE}
       onCopyAddress={CONTRACT_COPY_ADDRESS}
       onExportAddress={CONTRACT_EXPORT_ADDRESS}
+      onContractPress={CONTRACT_ON_PRESS}
     />
   ));
diff --git a/app/component-library/components-temp/Contracts/ContractBox/ContractBox.test.tsx b/app/component-library/components-temp/Contracts/ContractBox/ContractBox.test.tsx
@@ -9,6 +9,7 @@ import {
   CONTRACT_LOCAL_IMAGE,
   CONTRACT_COPY_ADDRESS,
   CONTRACT_EXPORT_ADDRESS,
+  CONTRACT_ON_PRESS,
 } from './ContractBox.constants';
 
 describe('ContractBox', () => {
@@ -20,6 +21,7 @@ describe('ContractBox', () => {
         contractLocalImage={CONTRACT_LOCAL_IMAGE}
         onCopyAddress={CONTRACT_COPY_ADDRESS}
         onExportAddress={CONTRACT_EXPORT_ADDRESS}
+        onContractPress={CONTRACT_ON_PRESS}
       />,
     );
     const singleSelectComponent = wrapper.findWhere(

diff --git a/app/component-library/components-temp/Contracts/ContractBox/ContractBox.tsx b/app/component-library/components-temp/Contracts/ContractBox/ContractBox.tsx
@@ -12,6 +12,7 @@ const ContractBox = ({
   contractLocalImage,
   onExportAddress,
   onCopyAddress,
+  onContractPress,
 }: ContractBoxProps) => (
   <View testID={CONTRACT_BOX_TEST_ID}>
     <Card style={styles.container}>
@@ -21,6 +22,7 @@ const ContractBox = ({
         contractLocalImage={contractLocalImage}
         onExportAddress={onExportAddress}
         onCopyAddress={onCopyAddress}
+        onContractPress={onContractPress}
       />
     </Card>
   </View>

diff --git a/app/component-library/components-temp/Contracts/ContractBoxBase/ContractBoxBase.tsx b/app/component-library/components-temp/Contracts/ContractBoxBase/ContractBoxBase.tsx
@@ -11,6 +11,7 @@ import Text, { TextVariants } from '../../../components/Texts/Text';
 import { formatAddress } from '../../../../util/address';
 import Icon, { IconName, IconSize } from '../../../components/Icon';
 import { useStyles } from '../../../hooks';
+import ButtonLink from '../../../components/Buttons/Button/variants/ButtonLink';
 
 // Internal dependencies.
 import { ContractBoxBaseProps, IconViewProps } from './ContractBoxBase.types';
@@ -28,6 +29,7 @@ const ContractBoxBase = ({
   contractPetName,
   onCopyAddress,
   onExportAddress,
+  onContractPress,
 }: ContractBoxBaseProps) => {
   const formattedAddress = formatAddress(contractAddress, 'short');
   const { styles } = useStyles(styleSheet, {});
@@ -47,17 +49,21 @@ const ContractBoxBase = ({
           imageSource={contractLocalImage}
         />
         {contractPetName ? (
-          <View>
+          <Pressable onPress={onContractPress}>
             <Text style={styles.header} variant={TextVariants.sHeadingMD}>
               {contractPetName}
             </Text>
             <Text variant={TextVariants.sBodyMD}>{formattedAddress}</Text>
-          </View>
+          </Pressable>
         ) : (
           <View testID={CONTRACT_BOX_NO_PET_NAME_TEST_ID}>
-            <Text style={styles.header} variant={TextVariants.sHeadingMD}>
+            <ButtonLink
+              textVariants={TextVariants.sHeadingMD}
+              style={styles.header}
+              onPress={onContractPress}
+            >
               {formattedAddress}
-            </Text>
+            </ButtonLink>
           </View>
         )}
       </View>

diff --git a/app/component-library/components-temp/Contracts/ContractBoxBase/ContractBoxBase.types.ts b/app/component-library/components-temp/Contracts/ContractBoxBase/ContractBoxBase.types.ts
@@ -10,9 +10,13 @@ export interface ContractBoxBaseProps {
    */
   onCopyAddress: () => void;
   /**
-   * function that opens contract in block explorer
+   * function that opens contract in block explorer if present
    */
-  onExportAddress: () => void;
+  onExportAddress?: () => void;
+  /**
+   * functions that called when the user clicks on the contract name
+   */
+  onContractPress: () => void;
 }
 
 export interface IconViewProps {

diff --git a/...ary/components-temp/Contracts/ContractBoxBase/__snapshots__/ContractBoxBase.test.tsx.snap b/...ary/components-temp/Contracts/ContractBoxBase/__snapshots__/ContractBoxBase.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`Component ContractBoxBase should render correctly 1`] = `
       size="48"
       variant="Token"
     />
-    <View>
+    <Component>
       <Text
         style={
           Object {
@@ -44,7 +44,7 @@ exports[`Component ContractBoxBase should render correctly 1`] = `
       >
         0x2990...a21a
       </Text>
-    </View>
+    </Component>
   </View>
   <View
     style={