v3.2.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zkbob-ui",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "private": true,
   "dependencies": {
     "@dicebear/avatars": "^4.10.2",

src/components/AccountSetUpModal/Confirm/index.js

@@ -59,7 +59,11 @@ export default ({ mnemonic, confirmMnemonic }) => {
           );
         })}
       </Words>
-      <Button disabled={!match} onClick={confirmMnemonic}>Verify</Button>
+      <Button
+        disabled={!match}
+        onClick={confirmMnemonic}
+        data-ga-id="signup-secret-phrase-confirm"
+      >Verify</Button>
     </Container>
   );
 };

src/components/AccountSetUpModal/Generate/index.js

@@ -12,7 +12,10 @@ export default ({ next, isCreation }) => {
           : 'Select the wallet you used to create your zkAccount'
         }
       </Description>
-      <WalletConnectors callback={next} />
+      <WalletConnectors
+        callback={next}
+        gaIdPrefix={(isCreation ? 'signup-' : 'login-')}
+      />
     </Container>
   );
 };

src/components/AccountSetUpModal/Password/index.js

@@ -64,7 +64,7 @@ export default ({ confirmPassword }) => {
         <Rule $error={lengthError}>Please enter 6 or more characters</Rule>
         <Rule $error={matchError}>Password should match</Rule>
       </RulesContainer>
-      <Button onClick={confirm}>Verify</Button>
+      <Button onClick={confirm} data-ga-id="password-confirm">Verify</Button>
     </Container>
   );
 };

src/components/AccountSetUpModal/Restore/index.js

@@ -30,7 +30,9 @@ export default ({ restore }) => {
         Input your saved secret phrase to restore an existing account
       </Description>
       <TextArea value={mnemonic} onChange={onChange} $error={error} />
-      <Button onClick={onRestore}>Restore account</Button>
+      <Button onClick={onRestore} data-ga-id="login-secret-phrase-confirm">
+        Restore account
+      </Button>
     </Container>
   );
 };

src/components/AccountSetUpModal/index.js

@@ -35,21 +35,21 @@ const Start = ({ setStep }) => (
     <Description>
       To start working with zkBob you need a zkAccount
     </Description>
-    <Button onClick={() => setStep(STEP.CREATE_OPTIONS)}>
+    <Button onClick={() => setStep(STEP.CREATE_OPTIONS)} data-ga-id="signup-start">
       Create new zkAccount
     </Button>
-    <SecondButton onClick={() => setStep(STEP.RESTORE_OPTIONS)}>
+    <SecondButton onClick={() => setStep(STEP.RESTORE_OPTIONS)} data-ga-id="login-start">
       I already have a zkAccount
     </SecondButton>
   </Container>
 );
 
 const CreateOptions = ({ setStep }) => (
   <Container>
-    <Button onClick={() => setStep(STEP.CREATE_WITH_WALLET)}>
+    <Button onClick={() => setStep(STEP.CREATE_WITH_WALLET)} data-ga-id="signup-web3-wallet">
       Use my Web3 wallet
     </Button>
-    <SecondButton onClick={() => setStep(STEP.CREATE_WITH_SECRET)}>
+    <SecondButton onClick={() => setStep(STEP.CREATE_WITH_SECRET)} data-ga-id="signup-secret-phrase">
       Use zkBob secret phrase
     </SecondButton>
     <Description>
@@ -63,10 +63,10 @@ const CreateOptions = ({ setStep }) => (
 
 const RestoreOptions = ({ setStep }) => (
   <Container>
-    <Button onClick={() => setStep(STEP.RESTORE_WITH_WALLET)}>
+    <Button onClick={() => setStep(STEP.RESTORE_WITH_WALLET)} data-ga-id="login-web3-wallet">
       I used a Web3 wallet
     </Button>
-    <SecondButton onClick={() => setStep(STEP.RESTORE_WITH_SECRET)}>
+    <SecondButton onClick={() => setStep(STEP.RESTORE_WITH_SECRET)} data-ga-id="login-secret-phrase">
       I used zkBob secret phrase
     </SecondButton>
   </Container>
@@ -77,10 +77,10 @@ const PasswordPrompt = ({ setStep, close }) => (
     <Description>
       You can create a secure password that we'll ask you every time when you log in to zkAccount
     </Description>
-    <Button onClick={() => setStep(STEP.CREATE_PASSWORD)}>
+    <Button onClick={() => setStep(STEP.CREATE_PASSWORD)} data-ga-id="password-set">
       Set a password
     </Button>
-    <SecondButton onClick={close}>
+    <SecondButton onClick={close} data-ga-id="password-skip">
       Skip
     </SecondButton>
   </Container>
@@ -163,7 +163,7 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, closePasswordModal })
       break;
     case STEP.CREATE_WITH_WALLET:
       title = 'Create new zkAccount';
-      component = <Generate next={() => setStep(STEP.SING_MESSAGE_TO_CREATE)} />;
+      component = <Generate isCreation next={() => setStep(STEP.SING_MESSAGE_TO_CREATE)} />;
       prevStep = STEP.CREATE_OPTIONS;
       break;
     case STEP.CREATE_WITH_SECRET:

src/components/ConfirmTransactionModal/index.js

@@ -84,7 +84,12 @@ export default ({
             )}
           </Row>
         </DetailsContainer>
-        <Button onClick={onConfirm}>Confirm {isMultitransfer && 'multitransfer'}</Button>
+        <Button
+          onClick={onConfirm}
+          data-ga-id="confirm-operation"
+        >
+          Confirm {isMultitransfer && 'multitransfer'}
+        </Button>
       </Container>
     </Modal>
   );

src/components/ConvertOptions/index.js

@@ -31,7 +31,11 @@ export default ({
         <Text style={{ marginRight: 8 }}>
           Convert some {currentPool.tokenSymbol} to {details.toTokenSymbol} on withdrawal
         </Text>
-        <Switch checked={isConverting} onChange={setIsConverting} />
+        <Switch
+          checked={isConverting}
+          onChange={setIsConverting}
+          data-ga-id={`turn-${isConverting ? 'off' : 'on'}-convert-native-token`}
+        />
       </Row>
       {isConverting && (
         <Row>
@@ -45,6 +49,7 @@ export default ({
                 onClick={() => setAmountToConvert(option)}
                 active={amountToConvert.eq(option)}
                 disabled={option.gt(amountToWithdraw) || option.gt(maxAmountToWithdraw)}
+                data-ga-id={`native-token-convert-tier${index + 1}`}
               >
                 <TextBold>{formatNumber(option, currentPool.tokenDecimals)} {currentPool.tokenSymbol}</TextBold>
                 <Text>

src/components/Header/index.js

@@ -110,14 +110,14 @@ export default ({ empty }) => {
       </AccountDropdownButton>
     </WalletDropdown>
   ) : (
-    <Button small onClick={openWalletModal}>
+    <Button small onClick={openWalletModal} data-ga-id="wallet-header">
       Connect wallet
     </Button>
   );
 
   const zkAccountDropdown = zkAccount ? (
     <ZkAccountDropdown>
-      <AccountDropdownButton $refreshing={isLoadingState}>
+      <AccountDropdownButton $refreshing={isLoadingState} data-ga-id="zkaccount-profile">
         <Row>
           <ZkAvatar seed={zkAccount} size={16} />
           <Address>zkAccount</Address>
@@ -141,6 +141,7 @@ export default ({ empty }) => {
       contrast
       disabled={isLoadingZkAccount}
       onClick={openAccountSetUpModal}
+      data-ga-id="zkaccount-header"
     >
       {isLoadingZkAccount ? (isMobile ? 'Loading' : 'Loading zkAccount') : 'zkAccount'}
     </Button>
@@ -154,7 +155,7 @@ export default ({ empty }) => {
         </LogoSection>
         <AccountSection>
           {!isMobile && networkDropdown}
-          <BridgeButton small onClick={openSwapModal}>
+          <BridgeButton small onClick={openSwapModal} data-ga-id="get-token-header">
             Get {currentPool.tokenSymbol}
           </BridgeButton>
           {!isMobile && walletDropdown}
@@ -169,7 +170,7 @@ export default ({ empty }) => {
             </RefreshButtonContainer>
           )}
           <MoreDropdown>
-            <DropdownButton>
+            <DropdownButton data-ga-id="extra-menu-header">
               <DotsIcon />
             </DropdownButton>
           </MoreDropdown>

src/components/IncreasedLimitsBanner/index.js

@@ -17,7 +17,7 @@ export default ({ status, account, openModal, kycUrls }) => {
       component = <>
         <InfinityLoopIcon />
         <Text>Want to increase your deposit limits?</Text>
-        <Button type="link" onClick={openModal}>Learn more</Button>
+        <Button type="link" onClick={openModal} data-ga-id="kyc-banner">Learn more</Button>
       </>;
       break;
     case INCREASED_LIMITS_STATUSES.ACTIVE:

src/components/IncreasedLimitsModal/index.js

@@ -33,11 +33,16 @@ export default ({ isOpen, onClose, account, isWalletModalOpen, openWalletModal,
           That's it. Your deposit limits will automatically increase if your connected wallet contains a BAB token.
         </Text>
         {account ? (
-          <LinkButton href={currentPool.kycUrls?.homepage.replace('%s', account)}>
+          <LinkButton
+            href={currentPool.kycUrls?.homepage.replace('%s', account)}
+            data-ga-id="kyc-banner-verify-bab"
+          >
             Verify my BAB token
           </LinkButton>
         ) : (
-          <Button onClick={openWalletModal}>Connect wallet</Button>
+          <Button onClick={openWalletModal} data-ga-id="kyc-banner-connect-wallet">
+            Connect wallet
+          </Button>
         )}
       </Container>
     </Modal>

src/components/MoreDropdown/index.js

@@ -7,9 +7,9 @@ import OptionButton from 'components/OptionButton';
 import { ModalContext } from 'contexts';
 
 const links = [
-  { name: 'Dune Analytics', href: 'https://dune.com/projects/zkBob' },
-  { name: 'Documentation', href: 'https://docs.zkbob.com/' },
-  { name: 'Linktree', href: 'https://linktr.ee/zkbob' },
+  { name: 'Dune Analytics', href: 'https://dune.com/projects/zkBob', gaIdPostfix: 'dune' },
+  { name: 'Documentation', href: 'https://docs.zkbob.com/', gaIdPostfix: 'docs' },
+  { name: 'Linktree', href: 'https://linktr.ee/zkbob', gaIdPostfix: 'linktree' },
 ];
 
 const Content = ({ close }) => (
@@ -21,6 +21,7 @@ const Content = ({ close }) => (
         type="link"
         href={link.href}
         onClick={close}
+        data-ga-id={'extra-menu-' + link.gaIdPostfix}
       >
         {link.name}
       </OptionButton>

src/components/NetworkDropdown/index.js

@@ -72,6 +72,7 @@ const Content = ({ switchToPool, currentPool, close }) => {
                   key={index}
                   onClick={() => onSwitchPool(pool.alias)}
                   className={currentPool.alias === pool.alias ? 'active' : ''}
+                  data-ga-id={`pool-${pool.alias.toLowerCase()}`}
                 >
                   <RowSpaceBetween>
                     <Row>

src/components/Tabs/index.js

@@ -10,6 +10,7 @@ export default ({ tabs, activeTab, onTabClick, showBadge }) => {
           active={activeTab === index}
           onClick={() => onTabClick(index)}
           $showBadge={showBadge && tab.badge}
+          data-ga-id={`tab-${tab.name.toLowerCase()}`}
         >{tab.name}</Tab>
       )}
     </Tabs>

src/components/TransferInput/index.js

@@ -16,7 +16,7 @@ import { TOKENS_ICONS } from 'constants';
 export default ({
   amount, onChange, balance, nativeBalance, isLoadingBalance, fee,
   shielded, setMax, maxAmountExceeded, isLoadingFee, currentPool,
-  isNativeSelected, setIsNativeSelected, isNativeTokenUsed,
+  isNativeSelected, setIsNativeSelected, isNativeTokenUsed, gaIdPostfix,
 }) => {
   const displayedFee = useDisplayedFee(currentPool, fee);
   const [showTooltip, setShowTooltip] = useState(false);
@@ -74,7 +74,12 @@ export default ({
                   {formatNumber(isNativeTokenUsed ? nativeBalance : balance, currentPool.tokenDecimals)}{' '}
                   {currentPool.tokenSymbol}
                 </Text>
-                <MaxButton type="link" onClick={setMax} tabIndex="-1">Max</MaxButton>
+                <MaxButton
+                  type="link"
+                  onClick={setMax}
+                  tabIndex="-1"
+                  data-ga-id={`max-${gaIdPostfix}`}
+                >Max</MaxButton>
                 <Tooltip
                   content={`Click Max to set the maximum amount of ${currentPool.tokenSymbol} you can send including all fees and limits`}
                   placement="right"

src/components/WalletConnectors/index.js

@@ -10,7 +10,7 @@ const getConnectorName = connector => {
   return connector.name;
 }
 
-export default ({ callback }) => {
+export default ({ callback, gaIdPrefix = '' }) => {
   const { connector: activeConnector } = useAccount();
   const { connectAsync, connectors } = useConnect();
   const { disconnectAsync } = useDisconnect();
@@ -29,6 +29,7 @@ export default ({ callback }) => {
         <WalletConnector
           key={index}
           onClick={() => connectWallet(connector)}
+          data-ga-id={gaIdPrefix + connector.name}
         >
           <WalletConnectorName>{getConnectorName(connector)}</WalletConnectorName>
           <WalletConnectorIcon src={CONNECTORS_ICONS[connector.name]} />

src/components/ZkAccountDropdown/index.js

@@ -61,8 +61,16 @@ const Content = ({
   }, [close]);
 
   const settingsOptions = [
-    { text: 'Show secret phrase', action: showSeedPhrase },
-    { text: `${hasPassword ? 'Disable' : 'Set'} password`, action: hasPassword ? removePassword : setPassword  },
+    {
+      text: 'Show secret phrase',
+      action: showSeedPhrase,
+      gaIdPostfix: 'secret-phrase',
+    },
+    {
+      text: `${hasPassword ? 'Disable' : 'Set'} password`,
+      action: hasPassword ? removePassword : setPassword,
+      gaIdPostfix: `${hasPassword ? 'disable' : 'enable'}-password`,
+    },
   ];
 
   if (showQRCode) {
@@ -88,7 +96,11 @@ const Content = ({
         <BackIcon onClick={() => setShowSettings(false)} />
         <Title style={{ marginBottom: 20 }}>Settings</Title>
         {settingsOptions.map((item, index) =>
-          <OptionButton key={index} onClick={() => handleOptionClick(item.action)}>
+          <OptionButton
+            key={index}
+            onClick={() => handleOptionClick(item.action)}
+            data-ga-id={`zkaccount-settings-${item.gaIdPostfix}`}
+          >
             {item.text}
           </OptionButton>
         )}
@@ -108,13 +120,22 @@ const Content = ({
           <Balance style={{ marginLeft: 5 }}>{currentPool.tokenSymbol}</Balance>
         </Row>
       </RowSpaceBetween>
-      <Button style={{ marginBottom: 10 }} onClick={generateQRCode} disabled={isLoadingState}>
+      <Button
+        style={{ marginBottom: 10 }}
+        onClick={generateQRCode}
+        disabled={isLoadingState}
+        data-ga-id="zkaccount-generate-qr-code"
+      >
         Generate QR code address
       </Button>
       {privateAddress ? (
         <PrivateAddress>{privateAddress}</PrivateAddress>
       ) : (
-        <Button onClick={generatePrivateAddress} disabled={isLoadingState}>
+        <Button
+          onClick={generatePrivateAddress}
+          disabled={isLoadingState}
+          data-ga-id="zkaccount-generate-address"
+        >
           Generate receiving address
         </Button>
       )}
@@ -124,17 +145,17 @@ const Content = ({
         Receive tokens to this address or a previously generated address.
       </Description>
       {currentPool.paymentContractAddress && (
-        <OptionButton onClick={() => handleOptionClick(generatePaymentLink)}>
+        <OptionButton onClick={() => handleOptionClick(generatePaymentLink)} data-ga-id="zkaccount-payment-link">
           Get payment link
         </OptionButton>
       )}
       <QRCodeReader onResult={initGiftCard}>
-        <OptionButton>Redeem gift card</OptionButton>
+        <OptionButton data-ga-id="zkaccount-gift-card">Redeem gift card</OptionButton>
       </QRCodeReader>
-      <OptionButton onClick={() => setShowSettings(true)}>
+      <OptionButton onClick={() => setShowSettings(true)} data-ga-id="zkaccount-settings">
         Settings
       </OptionButton>
-      <OptionButton onClick={() => handleOptionClick(logout)}>
+      <OptionButton onClick={() => handleOptionClick(logout)} data-ga-id="zkaccount-logout">
         Log out
       </OptionButton>
     </Container>

src/containers/AccountSetUpButton/index.js

@@ -13,6 +13,7 @@ export default () => {
       contrast
       disabled={isLoadingZkAccount}
       onClick={openAccountSetUpModal}
+      data-ga-id="zkaccount-get-started"
     >
       {isLoadingZkAccount ? 'Loading...' : 'Get started!'}
     </Button>