From eb399930ddcdfa5b169ea3a9bcf10255f7444cab Mon Sep 17 00:00:00 2001
From: Hayden Briese <haydenbriese@gmail.com>
Date: Tue, 20 Aug 2024 09:43:58 +1000
Subject: [PATCH] feat(app): zksync support behind feature flag

---
 app/src/components/CreateAccount.tsx        |  6 +++++-
 app/src/components/fields/ChainSelector.tsx | 11 ++---------
 app/src/lib/network/chains.tsx              |  2 +-
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/app/src/components/CreateAccount.tsx b/app/src/components/CreateAccount.tsx
index 96b4ed80d..472bdb50d 100644
--- a/app/src/components/CreateAccount.tsx
+++ b/app/src/components/CreateAccount.tsx
@@ -15,6 +15,7 @@ import { graphql } from 'relay-runtime';
 import { useLazyQuery } from '~/api';
 import { CreateAccountScreenQuery } from '~/api/__generated__/CreateAccountScreenQuery.graphql';
 import { useCreateAccount } from '~/hooks/mutations/useCreateAccount';
+import { experiment } from '~/lib/experiment';
 
 const Query = graphql`
   query CreateAccountScreenQuery {
@@ -49,7 +50,10 @@ export function CreateAccount({ onCreate }: CreateAccountScreenProps) {
   const { user } = query;
 
   const { control, handleSubmit, reset, watch } = useForm<Inputs>({
-    defaultValues: { name: '', chain: 'zksync-sepolia' },
+    defaultValues: {
+      name: '',
+      chain: experiment.variant('zksync-supported').value === 'on' ? 'zksync' : 'zksync-sepolia',
+    },
     mode: 'onChange',
   });
 
diff --git a/app/src/components/fields/ChainSelector.tsx b/app/src/components/fields/ChainSelector.tsx
index 434315536..3bcd4a8dd 100644
--- a/app/src/components/fields/ChainSelector.tsx
+++ b/app/src/components/fields/ChainSelector.tsx
@@ -5,6 +5,7 @@ import { SUPPORTED_CHAIN_KEYS } from '@network/chains';
 import { ICON_SIZE } from '@theme/paper';
 import { createStyles, useStyles } from '@theme/styles';
 import { ItemList, ItemListProps } from '#/layout/ItemList';
+import { experiment } from '~/lib/experiment';
 
 const descriptions: Record<Chain, string> = {
   zksync: 'Fast & low-cost layer 2 secured by Ethereum',
@@ -22,14 +23,6 @@ export function ChainSelector({ value: selected, onChange, ...props }: ChainSele
 
   return (
     <ItemList {...props}>
-      <ListItem
-        leading={<ChainIcon chain="zksync" size={ICON_SIZE.medium} />}
-        headline={CHAINS['zksync'].name + ' - coming soon'}
-        supporting={descriptions['zksync']}
-        containerStyle={styles.item}
-        disabled
-      />
-
       {SUPPORTED_CHAIN_KEYS.map((c) => (
         <ListItem
           key={c}
@@ -41,7 +34,7 @@ export function ChainSelector({ value: selected, onChange, ...props }: ChainSele
           onPress={() => {
             onChange(c);
           }}
-          disabled={selected !== c}
+          disabled={c === 'zksync' && experiment.variant('zksync-supported').value !== 'on'}
         />
       ))}
     </ItemList>
diff --git a/app/src/lib/network/chains.tsx b/app/src/lib/network/chains.tsx
index e0472bdfa..186d9a5bb 100644
--- a/app/src/lib/network/chains.tsx
+++ b/app/src/lib/network/chains.tsx
@@ -3,7 +3,7 @@ import { SelectEntry } from '#/fields/SelectChip';
 import { CHAINS, Chain } from 'chains';
 import _ from 'lodash';
 
-export const SUPPORTED_CHAIN_KEYS = ['zksync-sepolia'] satisfies Chain[];
+export const SUPPORTED_CHAIN_KEYS = ['zksync', 'zksync-sepolia'] satisfies Chain[];
 export const SUPPORTED_CHAINS = _.pick(CHAINS, SUPPORTED_CHAIN_KEYS);
 
 export const CHAIN_ENTRIES = Object.values(SUPPORTED_CHAINS).map(