Mobile. A/B test: txs/token transfers table view (address details page) (#3241)

* Mobile. A/B test: txs/token transfers table view (address details page)

Resolves #3230

* fixes and test

* [skip ci] change mixpanel event

Author: tom2drum

icons/list_view.svg

@@ -26,6 +26,7 @@ export enum NAMES {
   UUID = 'uuid',
   SHOW_SCAM_TOKENS = 'show_scam_tokens',
   APP_PROFILE = 'app_profile',
+  TABLE_VIEW_ON_MOBILE = 'table_view_on_mobile',
 }
 
 /**

lib/cookies.ts

@@ -7,6 +7,7 @@ import { STORAGE_KEY, STORAGE_LIMIT } from './consts';
 
 export interface GrowthBookFeatures {
   test_value: string;
+  txns_view_exp: 'table_view' | 'list_view';
 }
 
 export const initGrowthBook = (uuid: string) => {

lib/growthbook/init.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import * as cookies from 'lib/cookies';
+import useFeatureValue from 'lib/growthbook/useFeatureValue';
+import * as mixpanel from 'lib/mixpanel';
+
+export default function useTableViewValue() {
+  const cookieValue = cookies.get(cookies.NAMES.TABLE_VIEW_ON_MOBILE);
+  const [ value, setValue ] = React.useState<boolean | undefined>(cookieValue ? cookieValue === 'true' : undefined);
+  const { value: featureFlag, isLoading: isFeatureLoading } = useFeatureValue('txns_view_exp', 'list_view');
+
+  const onToggle = React.useCallback(() => {
+    setValue((prev) => {
+      const nextValue = !prev;
+      cookies.set(cookies.NAMES.TABLE_VIEW_ON_MOBILE, nextValue ? 'true' : 'false');
+      mixpanel.logEvent(mixpanel.EventTypes.PAGE_WIDGET, {
+        Type: 'Txn view switch',
+        Info: nextValue ? 'Table view' : 'List view',
+        Source: 'Address page',
+      });
+      return nextValue;
+    });
+  }, []);
+
+  React.useEffect(() => {
+    if (!isFeatureLoading) {
+      setValue((prev) => {
+        if (prev === undefined) {
+          return featureFlag === 'table_view';
+        }
+        return prev;
+      });
+    }
+  }, [ featureFlag, isFeatureLoading ]);
+
+  return React.useMemo(() => {
+    if (value !== undefined) {
+      return {
+        value,
+        isLoading: false,
+        onToggle,
+      };
+    }
+
+    return { value: featureFlag === 'table_view', isLoading: isFeatureLoading, onToggle };
+  }, [ featureFlag, isFeatureLoading, onToggle, value ]);
+}

lib/hooks/useTableViewValue.tsx

@@ -147,6 +147,10 @@ Type extends EventTypes.PAGE_WIDGET ? (
     Type: 'Chain switch';
     Info: string;
     Source: 'Revoke essential dapp';
+  } | {
+    Type: 'Txn view switch';
+    Info: 'Table view' | 'List view';
+    Source: 'Address page';
   }
 ) :
 Type extends EventTypes.TX_INTERPRETATION_INTERACTION ? {

lib/mixpanel/utils.ts

@@ -85,6 +85,7 @@
 	| "lightning"
 	| "link_external"
 	| "link"
+	| "list_view"
 	| "lock"
 	| "merits_colored"
 	| "merits_with_dot"

public/icons/name.d.ts

@@ -58,10 +58,10 @@ test.describe('base view', () => {
   });
 });
 
-test.describe('base view', () => {
+test.describe('mobile', () => {
   test.use({ viewport: pwConfig.viewport.mobile });
 
-  test('mobile', async({ render, mockApiResponse }) => {
+  test.beforeEach(async({ mockApiResponse }) => {
     await mockApiResponse(
       'general:address_txs',
       {
@@ -73,6 +73,20 @@ test.describe('base view', () => {
       },
       { pathParams: { hash: CURRENT_ADDRESS } },
     );
+  });
+
+  test('base view', async({ render }) => {
+    const component = await render(
+      <Box pt={{ base: '134px', lg: 6 }}>
+        <AddressTxs/>
+      </Box>,
+      { hooksConfig },
+    );
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('table view', async({ render, mockFeatures }) => {
+    await mockFeatures([ [ 'txns_view_exp', 'table_view' ] ]);
     const component = await render(
       <Box pt={{ base: '134px', lg: 6 }}>
         <AddressTxs/>

ui/address/AddressTxs.pw.tsx

@@ -69,6 +69,7 @@ const AddressTxs = ({ shouldRender = true, isQueryEnabled = true }: Props) => {
         top={ ACTION_BAR_HEIGHT_DESKTOP }
         sorting={ sort }
         setSort={ setSort }
+        showTableViewButton
       />
     </>
   );