Merge branch 'staging'

src/app/App.tsx

@@ -34,44 +34,44 @@ const App = () => {
   const { element: routes } = useNav()
 
   return (
-    <Layout>
-      <Banner>
-        <UpdateExtension />
-      </Banner>
+    <InitBankBalance>
+      <Layout>
+        <Banner>
+          <UpdateExtension />
+        </Banner>
 
-      <Sidebar>
-        <Nav />
-        <Aside />
-      </Sidebar>
+        <Sidebar>
+          <Nav />
+          <Aside />
+        </Sidebar>
 
-      <Header>
-        <NetworkHeader />
+        <Header>
+          <NetworkHeader />
 
-        <Actions>
-          <DevTools />
-          <section>
-            <Refresh />
-            <Preferences />
-            <NetworkStatus />
-          </section>
-          <ValidatorButton />
-          <ConnectWallet />
-          <NavButton />
-        </Actions>
-        <LatestTx />
-      </Header>
+          <Actions>
+            <DevTools />
+            <section>
+              <Refresh />
+              <Preferences />
+              <NetworkStatus />
+            </section>
+            <ValidatorButton />
+            <ConnectWallet />
+            <NavButton />
+          </Actions>
+          <LatestTx />
+        </Header>
 
-      <Content>
-        <ErrorBoundary fallback={fallback}>
-          <InitBankBalance>
+        <Content>
+          <ErrorBoundary fallback={fallback}>
             <MainContainer>
               {routes}
               <Wallet />
             </MainContainer>
-          </InitBankBalance>
-        </ErrorBoundary>
-      </Content>
-    </Layout>
+          </ErrorBoundary>
+        </Content>
+      </Layout>
+    </InitBankBalance>
   )
 }
 

src/app/components/PopoverNone.tsx

@@ -5,9 +5,12 @@ import styles from "./PopoverNone.module.scss"
 
 interface Props {
   className?: string
+  small?: boolean
   footer?: { children: ReactNode; onClick: () => void; to?: string }
 }
 
+const cx = classNames.bind(styles)
+
 const PopoverNone = (props: PropsWithChildren<Props>) => {
   const { className, children, footer } = props
 
@@ -19,7 +22,7 @@ const PopoverNone = (props: PropsWithChildren<Props>) => {
   }
 
   return (
-    <div className={classNames(styles.component, className)}>
+    <div className={cx(styles.component, className)}>
       <div className={styles.inner}>{children}</div>
       {renderFooter()}
     </div>

src/app/routes.tsx

@@ -41,7 +41,8 @@ import Auth from "auth/modules/Auth"
 //import AddNetworkPage from "auth/networks/AddNetworkPage"
 
 /* settings */
-import Settings from "pages/Settings"
+import Settings from "components/layout/GasAdjustment"
+import { useDevMode } from "utils/localStorage"
 
 /* labs */
 import Labs from "pages/labs/Labs"
@@ -54,16 +55,9 @@ const ICON_SIZE = { width: 20, height: 20 }
 
 export const useNav = () => {
   const { t } = useTranslation()
+  const { devMode } = useDevMode()
 
   const menu = [
-    /*
-    {
-      path: "/",
-      element: <Dashboard />,
-      title: t("Dashboard"),
-      icon: <WalletIcon {...ICON_SIZE} />,
-    },
-    */
     {
       path: "/",
       element: <SwapTx />,
@@ -88,21 +82,16 @@ export const useNav = () => {
       title: t("Governance"),
       icon: <GovernanceIcon {...ICON_SIZE} />,
     },
-    {
-      path: "/contract",
-      element: <Contract />,
-      title: t("Contract"),
-      icon: <ContractIcon {...ICON_SIZE} />,
-    },
-    /*
-    {
-      path: "/nft",
-      element: <NFT />,
-      title: t("NFT"),
-      icon: <NFTIcon {...ICON_SIZE} />,
-    },
-
-    */
+    ...(devMode
+      ? [
+          {
+            path: "/contract",
+            element: <Contract />,
+            title: t("Contract"),
+            icon: <ContractIcon {...ICON_SIZE} />,
+          },
+        ]
+      : []),
   ]
 
   const routes = [

src/app/sections/AdvancedSettings.tsx

@@ -0,0 +1,25 @@
+import { useDevMode } from "utils/localStorage"
+import SettingsSelectorToggle from "components/layout/SettingsSelectorToggle"
+import { FlexColumn, GasAdjustment } from "components/layout"
+import { TooltipIcon } from "components/display"
+import { DevModeTooltip } from "./DevModeTooltips"
+
+const AdvancedSettings = () => {
+  const { devMode, changeDevMode } = useDevMode()
+  const options = [
+    { value: "devMode", selected: devMode, label: "Developer Mode" },
+  ]
+
+  return (
+    <FlexColumn gap={10}>
+      <SettingsSelectorToggle
+        onChange={changeDevMode}
+        extra={<TooltipIcon content={<DevModeTooltip />} />}
+        options={options}
+      />
+      <GasAdjustment />
+    </FlexColumn>
+  )
+}
+
+export default AdvancedSettings

src/app/sections/Connected.module.scss

@@ -4,13 +4,6 @@
   border-radius: var(--border-radius);
 }
 
-.modal {
-  color: var(--text);
-  font-size: 18px;
-  font-weight: var(--bold);
-  margin-bottom: 4px;
-}
-
 .button {
   min-width: 0;
 }

src/app/sections/DevModeTooltips.tsx

@@ -0,0 +1,27 @@
+import { useTranslation } from "react-i18next"
+
+export const DevModeTooltip = () => {
+  const { t } = useTranslation()
+
+  return (
+    <article>
+      <h1>{t("Developer mode enables the following")}:</h1>
+      <ul>
+        <li>{t("Contracts page")}</li>
+        <li>{t("Copy token addresses from your wallet")}</li>
+      </ul>
+    </article>
+  )
+}
+export const GasAdjustmentTooltip = () => {
+  const { t } = useTranslation()
+  return (
+    <article>
+      <p>
+        {t(
+          "Set a gas adjustment coefficient in case none is specified by the chain"
+        )}
+      </p>
+    </article>
+  )
+}

src/app/sections/DisplayChainsSetting.tsx

@@ -0,0 +1,60 @@
+import WithSearchInput from "pages/custom/WithSearchInput"
+import { useDisplayChains, useSelectedDisplayChain } from "utils/localStorage"
+import SettingsSelectorToggle from "components/layout/SettingsSelectorToggle"
+import { useNetwork } from "data/wallet"
+import { ChainButton } from "components/general"
+
+import { isTerraChain } from "utils/chain"
+
+const DisplayChainsSetting = () => {
+  const { displayChains, changeDisplayChains } = useDisplayChains()
+  const { selectedDisplayChain, changeSelectedDisplayChain } =
+    useSelectedDisplayChain()
+  const network = useNetwork()
+
+  const onChange = (value: string) => {
+    const newDisplayChains = displayChains.includes(value)
+      ? displayChains.filter((chainID) => chainID !== value)
+      : [...displayChains, value]
+    changeDisplayChains(newDisplayChains)
+    if (value === selectedDisplayChain) {
+      changeSelectedDisplayChain(undefined)
+    }
+  }
+
+  return (
+    <WithSearchInput
+      placeholder="Search for chains..."
+      extra={<ChainButton />}
+      gap={8}
+    >
+      {(input) => (
+        <SettingsSelectorToggle
+          onChange={onChange}
+          options={Object.keys(network)
+            .filter(
+              (chainID) =>
+                network[chainID].name
+                  .toLowerCase()
+                  .includes(input.toLowerCase()) ||
+                chainID.toLowerCase().includes(input.toLowerCase())
+            )
+            .map((chainID) => ({
+              value: chainID,
+              selected: displayChains.includes(chainID),
+              label: network[chainID].name,
+              icon: network[chainID].icon,
+            }))
+            .sort((a, b) => {
+              if (isTerraChain(a.value) !== isTerraChain(b.value))
+                return isTerraChain(a.value) ? -1 : 1
+              if (a.selected !== b.selected) return a.selected ? -1 : 1
+              return 0
+            })}
+        />
+      )}
+    </WithSearchInput>
+  )
+}
+
+export default DisplayChainsSetting

src/app/sections/Preferences.module.scss

@@ -1,13 +1,19 @@
 .back {
   position: absolute;
   left: 40px;
-  transform: translate(0, 50%);
 
-  svg path {
-    fill: var(--text);
-  }
+  top: 40px;
+}
+.extra {
+  position: absolute;
+  right: 40px;
+  top: 40px;
 }
 
 .button__container {
   width: 100%;
 }
+
+.advanced {
+  margin-top: 30px;
+}