From 66d67352ea47b7b1af88af9e8ba3cc418e65a785 Mon Sep 17 00:00:00 2001 From: Henry Boldizsar Date: Fri, 15 Oct 2021 02:26:58 -0500 Subject: [PATCH 1/5] Add the first page for the menu/settings tab A WIP. I'd like to split out some of these pieces into their own component file. And this is all just visual. --- ui/pages/Menu.tsx | 189 +++++++++++++++++++++++++++++++++-- ui/public/images/lock@2x.png | Bin 0 -> 618 bytes 2 files changed, 179 insertions(+), 10 deletions(-) create mode 100644 ui/public/images/lock@2x.png diff --git a/ui/pages/Menu.tsx b/ui/pages/Menu.tsx index 0499ac6f0c..4772e8d4c4 100644 --- a/ui/pages/Menu.tsx +++ b/ui/pages/Menu.tsx @@ -1,22 +1,191 @@ -import React, { ReactElement } from "react" +import React, { useState, ReactElement } from "react" +import classNames from "classnames" import CorePage from "../components/Core/CorePage" +import SharedButton from "../components/Shared/SharedButton" + +function ToggleButton(): ReactElement { + const [isActive, setIsActive] = useState(false) + + return ( +
{ + setIsActive(!isActive) + }} + > +
+ +
+ ) +} + +function SettingRow(props: { title: string; action: any }): ReactElement { + const { title, action } = props + + return ( +
  • +
    {title}
    +
    {action()}
    + +
    • + ) +} + +function ArrowRightIcon() { + return ( + <> +
    + + + + ) +} + +const settings = [ + { + title: "Main Currency", + action: () => { + return ( + <> + + USD + + + ) + }, + }, + { + title: "Hide asset balance under $2", + action: ToggleButton, + }, + { + title: "Use Tally as default wallet", + action: ToggleButton, + }, + { + title: "Token list", + action: ArrowRightIcon, + }, + { + title: "Show testnet networks", + action: ToggleButton, + }, + { + title: "Contracts deployed by users", + action: ArrowRightIcon, + }, +] export default function Menu(): ReactElement { return ( <> - - Menu + +
    +

    Settings

    +
    +

    General

    +
      + {settings.slice(0, 4).map((setting) => { + return ( + <> + + + ) + })} +
    +
    +

    Developer

    +
      + {settings.slice(4, 6).map((setting) => { + return ( + <> + + + ) + })} +
    +
    diff --git a/ui/public/images/lock@2x.png b/ui/public/images/lock@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..531bbc89fa702e0407b70d7708f4f12e0365ddb5 GIT binary patch literal 618 zcmV-w0+s!VP)VL6djvdzbVpsm5j+8U0z}4zD{1vZ{bo=4wH969CbefL@%&unQTInShz& z2lxmJr?)bu4?1_QhJDBY3o>Bjo!qeVJ&1N*P!P7F4P-!S0i(8CBckTgt&r=tG@Uxd z%K?f@lnJ22&&G2j(Z+AN7m$)vA>`kc3YbTqi?)1SK=^s;)Q97Z_8!|4K69}sZ-q1= z$GP5YABR*UfH@FhAf4yf#$08a^8)dVFkgZ1k+30;sYXG01bnY-BTe4sb)J}&xD!)O z_@1nWEb7Rq_d`%XeFUcO#id%1B&$f7^tOGhR0(A511;knh#J+`>ezD*vPqu`FNYFiQ4C+yakpf1Z>k&cfJ&Our zPsQ8s=1(?}A;iv~fhG{K7G-k?(JaD7>?~mq1Z|hr``(7hLb@>mbYleQCQcev!f%zD zoX2M;4{;VGRZIx!#t6`j$wJ$ZS*Hm*#)Ob=i~!vj0lJBkM#UNC?B8_hUv*zZp1H<2 zm7or2g1^>NlufKt2EXk-uwfPUc(5ft+^)9Z2E$+C3qVe>nfvk$u>b%707*qoM6N<$ Eg8Fa@pa1{> literal 0 HcmV?d00001 From 60fddd6a6288e6a720ec31d2d0d0750fe7c440f4 Mon Sep 17 00:00:00 2001 From: Henry Boldizsar Date: Mon, 18 Oct 2021 22:23:01 -0500 Subject: [PATCH 2/5] Add and use `SharedToggleButton` component Originally was in the Menu page itself --- ui/components/Shared/SharedToggleButton.tsx | 43 ++++++++++++++++++ ui/pages/Menu.tsx | 49 +++------------------ 2 files changed, 48 insertions(+), 44 deletions(-) create mode 100644 ui/components/Shared/SharedToggleButton.tsx diff --git a/ui/components/Shared/SharedToggleButton.tsx b/ui/components/Shared/SharedToggleButton.tsx new file mode 100644 index 0000000000..b8e7b29758 --- /dev/null +++ b/ui/components/Shared/SharedToggleButton.tsx @@ -0,0 +1,43 @@ +import React, { useState, ReactElement } from "react" +import classNames from "classnames" + +export default function SharedToggleButton(): ReactElement { + const [isActive, setIsActive] = useState(false) + + return ( + + ) +} diff --git a/ui/pages/Menu.tsx b/ui/pages/Menu.tsx index 4772e8d4c4..d79a1901db 100644 --- a/ui/pages/Menu.tsx +++ b/ui/pages/Menu.tsx @@ -2,46 +2,7 @@ import React, { useState, ReactElement } from "react" import classNames from "classnames" import CorePage from "../components/Core/CorePage" import SharedButton from "../components/Shared/SharedButton" - -function ToggleButton(): ReactElement { - const [isActive, setIsActive] = useState(false) - - return ( -
    { - setIsActive(!isActive) - }} - > -
    - -
    - ) -} +import SharedToggleButton from "../components/Shared/SharedToggleButton" function SettingRow(props: { title: string; action: any }): ReactElement { const { title, action } = props @@ -107,11 +68,11 @@ const settings = [ }, { title: "Hide asset balance under $2", - action: ToggleButton, + action: SharedToggleButton, }, { title: "Use Tally as default wallet", - action: ToggleButton, + action: SharedToggleButton, }, { title: "Token list", @@ -119,7 +80,7 @@ const settings = [ }, { title: "Show testnet networks", - action: ToggleButton, + action: SharedToggleButton, }, { title: "Contracts deployed by users", @@ -133,7 +94,7 @@ export default function Menu(): ReactElement {

    Settings

    -
    +

    General

      {settings.slice(0, 4).map((setting) => { From 74e65e919fed7b1149509bcaedc933ec99dde8e2 Mon Sep 17 00:00:00 2001 From: Henry Boldizsar Date: Mon, 18 Oct 2021 22:09:41 -0500 Subject: [PATCH 3/5] Remove useless fragment --- ui/pages/Menu.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/ui/pages/Menu.tsx b/ui/pages/Menu.tsx index d79a1901db..0b99a86a03 100644 --- a/ui/pages/Menu.tsx +++ b/ui/pages/Menu.tsx @@ -33,9 +33,7 @@ function SettingRow(props: { title: string; action: any }): ReactElement { function ArrowRightIcon() { return ( - <> -
      - +
      - +
      ) } From 1659e64342353d352d860fb8ec7256cd60033182 Mon Sep 17 00:00:00 2001 From: Henry Boldizsar Date: Tue, 19 Oct 2021 12:58:55 -0500 Subject: [PATCH 4/5] Remove needless code wrapping `SettingsRow` in map Co-authored-by: Rachel Fish --- ui/pages/Menu.tsx | 20 ++++++-------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/ui/pages/Menu.tsx b/ui/pages/Menu.tsx index 0b99a86a03..47baac081e 100644 --- a/ui/pages/Menu.tsx +++ b/ui/pages/Menu.tsx @@ -95,24 +95,16 @@ export default function Menu(): ReactElement {

      General

        - {settings.slice(0, 4).map((setting) => { - return ( - <> - - - ) - })} + {settings.slice(0, 4).map((setting) => ( + + ))}

      Developer

        - {settings.slice(4, 6).map((setting) => { - return ( - <> - - - ) - })} + {settings.slice(4, 6).map((setting) => ( + + ))}
    From fa2c9d278b6e34b4cf27cdb40ee1be4665f4640e Mon Sep 17 00:00:00 2001 From: Henry Boldizsar Date: Tue, 19 Oct 2021 13:10:25 -0500 Subject: [PATCH 5/5] Separate attributes for setting sections Co-authored-by: Rachel Fish --- ui/pages/Menu.tsx | 66 ++++++++++++++++++++++++----------------------- 1 file changed, 34 insertions(+), 32 deletions(-) diff --git a/ui/pages/Menu.tsx b/ui/pages/Menu.tsx index 47baac081e..6302e80add 100644 --- a/ui/pages/Menu.tsx +++ b/ui/pages/Menu.tsx @@ -51,40 +51,42 @@ function ArrowRightIcon() { ) } -const settings = [ - { - title: "Main Currency", - action: () => { - return ( - <> +const settings = { + general: [ + { + title: "Main Currency", + action: () => { + return ( USD - - ) + ) + }, }, - }, - { - title: "Hide asset balance under $2", - action: SharedToggleButton, - }, - { - title: "Use Tally as default wallet", - action: SharedToggleButton, - }, - { - title: "Token list", - action: ArrowRightIcon, - }, - { - title: "Show testnet networks", - action: SharedToggleButton, - }, - { - title: "Contracts deployed by users", - action: ArrowRightIcon, - }, -] + { + title: "Hide asset balance under $2", + action: SharedToggleButton, + }, + { + title: "Use Tally as default wallet", + action: SharedToggleButton, + }, + { + title: "Token list", + action: ArrowRightIcon, + }, + ], + developer: [ + { + title: "Show testnet networks", + action: SharedToggleButton, + }, + { + title: "Contracts deployed by users", + action: ArrowRightIcon, + }, + ], +} export default function Menu(): ReactElement { return ( @@ -95,14 +97,14 @@ export default function Menu(): ReactElement {

    General

      - {settings.slice(0, 4).map((setting) => ( + {settings.general.map((setting) => ( ))}

    Developer

      - {settings.slice(4, 6).map((setting) => ( + {settings.developer.map((setting) => ( ))}