TW-1547: [evm] Settings. DApps. + Disabled 'Disconnect all' button

madfish-solutions · Oct 31, 2024 · 5067e88 · 5067e88
1 parent 1ad5b1f
commit 5067e88
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 20 deletions.
diff --git a/src/app/atoms/loader/index.tsx → src/app/atoms/Loader/index.tsx b/src/app/atoms/loader/index.tsx → src/app/atoms/Loader/index.tsx
diff --git a/src/app/atoms/loader/loader.module.css → src/app/atoms/Loader/loader.module.css b/src/app/atoms/loader/loader.module.css → src/app/atoms/Loader/loader.module.css
diff --git a/src/app/atoms/index.ts b/src/app/atoms/index.ts
@@ -24,6 +24,8 @@ export { HashChip } from './HashChip';
 
 export { Lines } from './Lines';
 
+export { Loader } from './Loader';
+
 export { ExternalLinkChip } from './ExternalLinkChip';
 
 export { default as SubTitle } from './SubTitle';

diff --git a/src/app/pages/Settings/DApps.tsx b/src/app/pages/Settings/DApps.tsx
@@ -20,30 +20,32 @@ export const DAppsSettings = memo(() => {
 
   const onRemoveAllClick = useCallback(() => disconnectDApps(dapps.map(([o]) => o)), [disconnectDApps, dapps]);
 
-  if (!dapps.length) return <EmptyState forSearch={false} text="No connections" stretch />;
-
   return (
     <>
-      <ScrollView className="gap-y-6 px-4 py-6">
-        {activeDApp ? (
-          <Section title="Current connection">
-            <DAppItem dapp={activeDApp[1]} origin={activeDApp[0]} onRemoveClick={disconnectOne} />
-          </Section>
-        ) : null}
+      {dapps.length ? (
+        <ScrollView className="gap-y-6 px-4 py-6">
+          {activeDApp ? (
+            <Section title="Current connection">
+              <DAppItem dapp={activeDApp[1]} origin={activeDApp[0]} onRemoveClick={disconnectOne} />
+            </Section>
+          ) : null}
 
-        {displayedDapps.length ? (
-          <Section title="Connected Dapps">
-            <div className="flex flex-col gap-y-3">
-              {displayedDapps.map(([origin, dapp]) => (
-                <DAppItem key={dapp.appMeta.name} dapp={dapp} origin={origin} onRemoveClick={disconnectOne} />
-              ))}
-            </div>
-          </Section>
-        ) : null}
-      </ScrollView>
+          {displayedDapps.length ? (
+            <Section title="Connected Dapps">
+              <div className="flex flex-col gap-y-3">
+                {displayedDapps.map(([origin, dapp]) => (
+                  <DAppItem key={dapp.appMeta.name} dapp={dapp} origin={origin} onRemoveClick={disconnectOne} />
+                ))}
+              </div>
+            </Section>
+          ) : null}
+        </ScrollView>
+      ) : (
+        <EmptyState forSearch={false} text="No connections" stretch />
+      )}
 
       <ActionsButtonsBox className="sticky left-0 bottom-0" bgSet={false}>
-        <StyledButton className="flex-1" size="L" color="red-low" onClick={onRemoveAllClick}>
+        <StyledButton className="flex-1" size="L" color="red-low" disabled={!dapps.length} onClick={onRemoveAllClick}>
           Disconnect All
         </StyledButton>
       </ActionsButtonsBox>

diff --git a/src/lib/ui/use-styled-button-or-link-props.tsx b/src/lib/ui/use-styled-button-or-link-props.tsx
@@ -2,8 +2,8 @@ import React, { useMemo } from 'react';
 
 import clsx from 'clsx';
 
+import { Loader } from 'app/atoms';
 import { ButtonProps } from 'app/atoms/Button';
-import { Loader } from 'app/atoms/loader';
 import { LinkProps } from 'lib/woozie/Link';
 
 type Size = 'L' | 'M' | 'S';