TW-1547: [evm] Settings. DApps (#1214)

* TW-1547: [evm] Settings. DApps. Refactor * TW-1547: [evm] Settings. DApps. + Connections list. WIP * TW-1547: [evm] Settings. DApps. + Unlinking * TW-1547: [evm] Settings. DApps. Refactor * TW-1547: [evm] Settings. DApps. + Filtering by account * TW-1547: [evm] Settings. DApps. + Current connection * TW-1547: [evm] Settings. DApps. -- DApps page * TW-1547: [evm] Settings. DApps. Fix unit tests. Beacon * TW-1547: [evm] Settings. DApps. -- Old Settings * TW-1547: [evm] Settings. DApps. -- 'safari' * TW-1547: [evm] Settings. DApps. Refactor * TW-1547: [evm] Settings. DApps. + Icon plug * TW-1547: [evm] Settings. DApps. + Disabled 'Disconnect all' button
madfish-solutions · Nov 4, 2024 · 50a474d · 50a474d
1 parent 63c9e85
commit 50a474d
Show file tree

Hide file tree

Showing 92 changed files with 619 additions and 1,841 deletions.
diff --git a/package.json b/package.json
@@ -16,8 +16,6 @@
     "build:chrome:core": "cross-env CORE_BUILD=true run-s build:chrome",
     "build:firefox": "cross-env TARGET_BROWSER=firefox run-s build",
     "build:firefox:core": "cross-env CORE_BUILD=true run-s build:firefox",
-    "build:safari": "cross-env TARGET_BROWSER=safari run-s build",
-    "build:safari:core": "cross-env CORE_BUILD=true run-s build:safari",
     "build:opera": "cross-env TARGET_BROWSER=opera run-s build",
     "build:opera:core": "cross-env CORE_BUILD=true run-s build:opera",
     "test": "jest",

diff --git a/src/app/ConfirmPage.tsx b/src/app/ConfirmPage.tsx
@@ -4,6 +4,7 @@ import clsx from 'clsx';
 
 import { AccountTypeBadge, Alert, FormSubmitButton, FormSecondaryButton } from 'app/atoms';
 import ConfirmLedgerOverlay from 'app/atoms/ConfirmLedgerOverlay';
+import DAppLogo from 'app/atoms/DAppLogo';
 import HashShortView from 'app/atoms/HashShortView';
 import Money from 'app/atoms/Money';
 import Name from 'app/atoms/Name';
@@ -16,7 +17,6 @@ import AccountBanner from 'app/templates/AccountBanner';
 import { TezosBalance } from 'app/templates/Balance';
 import ConnectBanner from 'app/templates/ConnectBanner';
 import CustomSelect, { OptionRenderProps } from 'app/templates/CustomSelect';
-import DAppLogo from 'app/templates/DAppLogo';
 import { ModifyFeeAndLimit } from 'app/templates/ExpensesView/ExpensesView';
 import NetworkBanner from 'app/templates/NetworkBanner';
 import OperationView from 'app/templates/OperationView';
@@ -278,7 +278,7 @@ const ConfirmDAppForm = memo(() => {
           want: (
             <div className="mb-2 text-sm text-center text-gray-700 flex flex-col items-center">
               <div className="flex items-center justify-center">
-                <DAppLogo icon={payload.appMeta.icon} origin={payload.origin} size={16} className="mr-1" />
+                <DAppLogo icon={payload.appMeta.icon} origin={payload.origin} size={16} className="mr-1 shadow-xs" />
                 <Name className="font-semibold" style={{ maxWidth: '10rem' }}>
                   {payload.appMeta.name}
                 </Name>
@@ -305,7 +305,7 @@ const ConfirmDAppForm = memo(() => {
           want: (
             <div className="mb-2 text-sm text-center text-gray-700 flex flex-col items-center">
               <div className="flex items-center justify-center">
-                <DAppLogo icon={payload.appMeta.icon} origin={payload.origin} size={16} className="mr-1" />
+                <DAppLogo icon={payload.appMeta.icon} origin={payload.origin} size={16} className="mr-1 shadow-xs" />
                 <Name className="font-semibold" style={{ maxWidth: '10rem' }}>
                   {payload.appMeta.name}
                 </Name>

diff --git a/src/app/PageRouter.tsx b/src/app/PageRouter.tsx
@@ -7,7 +7,6 @@ import Exolix from 'app/pages/Buy/Crypto/Exolix/Exolix';
 import { BuyWithCreditCard } from 'app/pages/BuyWithCreditCard/BuyWithCreditCard';
 import CollectiblePage from 'app/pages/Collectibles/CollectiblePage';
 import ConnectLedger from 'app/pages/ConnectLedger/ConnectLedger';
-import DApps from 'app/pages/DApps';
 import Delegate from 'app/pages/Delegate';
 import Home from 'app/pages/Home/Home';
 import AttentionPage from 'app/pages/Onboarding/pages/AttentionPage';
@@ -85,7 +84,6 @@ const ROUTE_MAP = Woozie.createMap<RouteContext>([
   ['/swap', onlyReady(() => <Swap />)],
   ['/delegate/:tezosChainId', onlyReady(({ tezosChainId }) => <Delegate tezosChainId={tezosChainId!} />)],
   ['/staking/:tezosChainId', onlyReady(({ tezosChainId }) => <StakingPage tezosChainId={tezosChainId!} />)],
-  ['/dapps', onlyReady(() => <DApps />)],
   [
     '/collectible/:chainKind?/:chainId?/:assetSlug?',
     onlyReady(({ chainKind, chainId, assetSlug }) => (

diff --git a/src/app/atoms/DAppLogo/index.tsx b/src/app/atoms/DAppLogo/index.tsx
@@ -0,0 +1,42 @@
+import React, { CSSProperties, memo, useMemo } from 'react';
+
+import clsx from 'clsx';
+
+import { ImageStacked } from 'lib/ui/ImageStacked';
+
+import { IconBase } from '../IconBase';
+
+import { ReactComponent as PlugSvg } from './plug.svg';
+
+interface DAppLogoProps {
+  origin: string;
+  size: number;
+  className?: string;
+  icon?: string;
+  style?: CSSProperties;
+}
+
+const DAppLogo = memo<DAppLogoProps>(({ origin, size, icon, className, style }) => {
+  const faviconSrc = useMemo(() => [icon ? icon : `${origin}/favicon.ico`], [origin, icon]);
+
+  const styleMemo = useMemo(() => ({ width: size, height: size, ...style }), [style, size]);
+
+  const placeholder = (
+    <div className={clsx('flex items-center bg-grey-4', className)} style={styleMemo}>
+      <IconBase Icon={PlugSvg} size={16} className="mx-auto text-grey-1" />
+    </div>
+  );
+
+  return (
+    <ImageStacked
+      sources={faviconSrc}
+      alt={origin}
+      style={styleMemo}
+      className={className}
+      loader={placeholder}
+      fallback={placeholder}
+    />
+  );
+});
+
+export default DAppLogo;
diff --git a/src/app/atoms/DAppLogo/plug.svg b/src/app/atoms/DAppLogo/plug.svg
diff --git a/src/app/atoms/EmptyState.tsx b/src/app/atoms/EmptyState.tsx
@@ -4,18 +4,25 @@ import clsx from 'clsx';
 
 import { ReactComponent as SadSearchIcon } from 'app/icons/monochrome/sad-search.svg';
 import { ReactComponent as SadUniversalIcon } from 'app/icons/monochrome/sad-universal.svg';
-import { T } from 'lib/i18n';
+import { T, TID } from 'lib/i18n';
 
 interface EmptyStateProps {
-  className?: string;
-  variant: 'tokenSearch' | 'universal' | 'searchUniversal';
+  forSearch?: boolean;
+  textI18n?: TID;
+  text?: string;
+  stretch?: boolean;
 }
 
-export const EmptyState = memo<EmptyStateProps>(({ className, variant }) => (
-  <div className={clsx(className, 'w-full py-7 flex flex-col items-center gap-2')}>
-    {variant === 'universal' ? <SadUniversalIcon className="w-[92px]" /> : <SadSearchIcon className="w-[92px]" />}
-    <span className="text-font-medium-bold text-grey-2">
-      <T id={variant === 'tokenSearch' ? 'tokensNotFound' : 'notFound'} />
-    </span>
-  </div>
-));
+export const EmptyState = memo<EmptyStateProps>(({ forSearch = true, textI18n, text, stretch }) => {
+  const Icon = forSearch ? SadSearchIcon : SadUniversalIcon;
+
+  return (
+    <div className={clsx('w-full py-7 flex flex-col items-center gap-2', stretch && 'flex-grow justify-center')}>
+      <Icon className="w-[92px] fill-grey-3 stroke-grey-3" />
+
+      <span className="text-font-medium-bold text-grey-2">
+        {textI18n ? <T id={textI18n} /> : text || <T id="notFound" />}
+      </span>
+    </div>
+  );
+});
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/PageModal/actions-buttons-box.tsx b/src/app/atoms/PageModal/actions-buttons-box.tsx
@@ -8,12 +8,12 @@ import { setToastsContainerBottomShiftAction } from 'app/store/settings/actions'
 
 interface ActionsButtonsBoxProps extends HTMLAttributes<HTMLDivElement> {
   shouldCastShadow?: boolean;
-  flexDirection?: 'row' | 'col';
+  bgSet?: false;
   shouldChangeBottomShift?: boolean;
 }
 
 export const ActionsButtonsBox = memo<ActionsButtonsBoxProps>(
-  ({ className, shouldCastShadow, flexDirection = 'col', shouldChangeBottomShift = true, ...restProps }) => {
+  ({ className, shouldCastShadow, bgSet = true, shouldChangeBottomShift = true, ...restProps }) => {
     const dispatch = useDispatch();
 
     useEffect(() => {
@@ -23,7 +23,7 @@ export const ActionsButtonsBox = memo<ActionsButtonsBoxProps>(
     const handleResize = useMemo(
       () =>
         throttle<ResizeObserverCallback>(entries => {
-          const borderBoxSize = entries.map(entry => entry.borderBoxSize?.[0]).filter(Boolean)[0];
+          const borderBoxSize = entries.map(entry => entry.borderBoxSize[0]).filter(Boolean)[0];
 
           if (borderBoxSize && shouldChangeBottomShift) {
             dispatch(setToastsContainerBottomShiftAction(borderBoxSize.blockSize - 24));
@@ -48,8 +48,8 @@ export const ActionsButtonsBox = memo<ActionsButtonsBoxProps>(
     return (
       <div
         className={clsx(
-          'p-4 pb-6 flex bg-white',
-          `flex-${flexDirection}`,
+          'p-4 pb-6 flex flex-col',
+          bgSet && 'bg-white',
           shouldCastShadow && 'shadow-bottom border-t-0.5 border-lines overflow-y-visible',
           className
         )}

diff --git a/src/app/atoms/ScrollView.tsx b/src/app/atoms/ScrollView.tsx
@@ -0,0 +1,62 @@
+import React, { FC, UIEventHandler, useCallback, useMemo, useRef } from 'react';
+
+import clsx from 'clsx';
+import { throttle } from 'lodash';
+
+import { useSafeState } from 'lib/ui/hooks';
+import { useWillUnmount } from 'lib/ui/hooks/useWillUnmount';
+
+interface Props extends PropsWithChildren {
+  className?: string;
+}
+
+export const ScrollView: FC<Props> = ({ className, children }) => {
+  const [contentHiding, setContentHiding] = useSafeState(false);
+
+  const ref = useRef<HTMLDivElement | nullish>();
+
+  const setContentHidingThrottled = useMemo(() => throttle((value: boolean) => setContentHiding(value), 300), []);
+
+  const onScroll = useCallback<UIEventHandler<HTMLDivElement>>(event => {
+    const node = event.currentTarget;
+
+    setContentHidingThrottled(isContentHidingBelow(node));
+  }, []);
+
+  const resizeObserver = useMemo(
+    () =>
+      new ResizeObserver(() => {
+        const node = ref.current;
+
+        if (node) setContentHidingThrottled(isContentHidingBelow(node));
+      }),
+    []
+  );
+
+  useWillUnmount(() => void resizeObserver.disconnect());
+
+  const refFn = useCallback((node: HTMLDivElement | null) => {
+    ref.current = node;
+    if (!node) return void setContentHiding(false);
+
+    resizeObserver.observe(node);
+
+    setContentHiding(isContentHidingBelow(node));
+  }, []);
+
+  return (
+    <div
+      ref={refFn}
+      className={clsx('flex-grow flex flex-col overflow-y-auto', className, contentHiding && 'shadow-inner-bottom')}
+      onScroll={onScroll}
+    >
+      {children}
+    </div>
+  );
+};
+
+function isContentHidingBelow(node: HTMLDivElement) {
+  const scrollBottom = node.scrollHeight - node.clientHeight - node.scrollTop;
+
+  return node.scrollHeight > node.clientHeight && scrollBottom > 0;
+}
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/icons/base/unlink.svg b/src/app/icons/base/unlink.svg
diff --git a/src/app/icons/monochrome/apps-alt.svg b/src/app/icons/monochrome/apps-alt.svg
diff --git a/src/app/icons/monochrome/sad-search.svg b/src/app/icons/monochrome/sad-search.svg
diff --git a/src/app/icons/monochrome/sad-universal.svg b/src/app/icons/monochrome/sad-universal.svg