Use toggle for account visibility

packages/common-components/src/ToggleSwitch/ToggleSwitch.tsx

@@ -1,6 +1,6 @@
 import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"
 import clsx from "clsx"
-import React, { ReactNode, useCallback, useMemo, useState } from "react"
+import React, { ReactNode, useCallback, useEffect, useMemo, useState } from "react"
 import { Typography } from "../Typography"
 
 interface IStyleProps {
@@ -120,6 +120,10 @@ const ToggleSwitch = ({ injectedClasses, disabled, left, right, onChange, value,
   const classes = useStyles({ size: resolvedSize })
   const [side, setSide] = useState<"left" | "right">(value && right.value === value ? "right" : "left")
 
+  useEffect(() => {
+    setSide(value && right.value === value ?  "right" : "left")
+  }, [right.value, value])
+
   const onToggle = useCallback(() => {
     if (disabled) return
     if (side === "left") {

packages/files-ui/src/Components/Modules/Settings/ProfileTab/index.tsx

@@ -6,8 +6,8 @@ import {
   useToasts,
   TextInput,
   CheckIcon,
-  CheckboxInput,
-  Divider
+  Divider,
+  ToggleSwitch
 } from "@chainsafe/common-components"
 import { makeStyles, createStyles, debounce } from "@chainsafe/common-theme"
 import { CopyIcon } from "@chainsafe/common-components"
@@ -46,6 +46,7 @@ const useStyles = makeStyles(({ constants, breakpoints, palette }: CSFTheme) =>
     walletAddressContainer: {
       display: "flex",
       justifyContent: "space-between",
+      alignItems: "center",
       marginBottom: constants.generalUnit * 0.5
     },
     input: {
@@ -134,6 +135,9 @@ const useStyles = makeStyles(({ constants, breakpoints, palette }: CSFTheme) =>
       [breakpoints.up("md")]: {
         paddingLeft: constants.generalUnit * 2
       }
+    },
+    lookupText: {
+      paddingLeft: constants.generalUnit
     }
   })
 )
@@ -283,6 +287,7 @@ const ProfileView = () => {
         <div className={classes.container}>
           <div
             id="profile"
+            data-cy="label-profile-header"
           >
             <Typography
               variant="h3"
@@ -293,11 +298,31 @@ const ProfileView = () => {
             </Typography>
             <Divider />
             <div className={classes.profileBox}>
-              {profile?.publicAddress &&
-                <div
-                  className={classes.boxContainer}
-                  data-cy="label-profile-header"
+              <div className={classes.boxContainer}>
+                <Typography
+                  variant="h4"
+                  component="h4"
+                  className={classes.label}
                 >
+                  <Trans>Account visibility</Trans>
+                </Typography>
+                <div className={classes.walletAddressContainer}>
+                  <ToggleSwitch
+                    left={{ value: false }}
+                    right={{ value: true }}
+                    testId="address-lookup"
+                    onChange={toggleLookupConsent}
+                    value={profile?.lookupConsent || false}
+                  />
+                  <Typography className={classes.lookupText}>
+                    <Trans>
+                      Allow lookup by sharing key, wallet address, username or ENS
+                    </Trans>
+                  </Typography>
+                </div>
+              </div>
+              {profile?.publicAddress &&
+                <div className={classes.boxContainer}>
                   <div className={classes.walletAddressContainer}>
                     <Typography
                       variant="h4"
@@ -445,10 +470,6 @@ const ProfileView = () => {
                     }
                   </>
                 }
-                <CheckboxInput
-                  label={t`Allow lookup by sharing key, wallet address, username or ENS`}
-                  value={profile?.lookupConsent || false}
-                  onChange={toggleLookupConsent} />
               </div>
               {/* <FormikProvider value={formik}>
                 <Form>

packages/files-ui/src/locales/de/messages.po

@@ -52,6 +52,9 @@ msgstr "Konto"
 msgid "Account is restricted"
 msgstr ""
 
+msgid "Account visibility"
+msgstr ""
+
 msgid "Add Card"
 msgstr ""
 

packages/files-ui/src/locales/en/messages.po

@@ -52,6 +52,9 @@ msgstr "Account"
 msgid "Account is restricted"
 msgstr "Account is restricted"
 
+msgid "Account visibility"
+msgstr "Account visibility"
+
 msgid "Add Card"
 msgstr "Add Card"
 

packages/files-ui/src/locales/es/messages.po

@@ -53,6 +53,9 @@ msgstr "Cuenta"
 msgid "Account is restricted"
 msgstr ""
 
+msgid "Account visibility"
+msgstr ""
+
 msgid "Add Card"
 msgstr ""
 

packages/files-ui/src/locales/fr/messages.po

@@ -53,6 +53,9 @@ msgstr "Compte"
 msgid "Account is restricted"
 msgstr "Ce compte est limité"
 
+msgid "Account visibility"
+msgstr ""
+
 msgid "Add Card"
 msgstr "Ajouter une carte"
 

packages/files-ui/src/locales/no/messages.po

@@ -52,6 +52,9 @@ msgstr "Konto"
 msgid "Account is restricted"
 msgstr ""
 
+msgid "Account visibility"
+msgstr ""
+
 msgid "Add Card"
 msgstr ""