diff --git a/package.json b/package.json
index ec01aa2c29..0004e2aa28 100644
--- 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
index 34959ae857..637a1debf1 100644
--- 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: (
-
+
{payload.appMeta.name}
@@ -305,7 +305,7 @@ const ConfirmDAppForm = memo(() => {
want: (
-
+
{payload.appMeta.name}
diff --git a/src/app/PageRouter.tsx b/src/app/PageRouter.tsx
index b1809b6bce..6aacd1cb91 100644
--- 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
([
['/swap', onlyReady(() => )],
['/delegate/:tezosChainId', onlyReady(({ tezosChainId }) => )],
['/staking/:tezosChainId', onlyReady(({ tezosChainId }) => )],
- ['/dapps', onlyReady(() => )],
[
'/collectible/:chainKind?/:chainId?/:assetSlug?',
onlyReady(({ chainKind, chainId, assetSlug }) => (
diff --git a/src/app/atoms/DAppLogo/index.tsx b/src/app/atoms/DAppLogo/index.tsx
new file mode 100644
index 0000000000..fa8c17a019
--- /dev/null
+++ 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(({ 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 = (
+
+
+
+ );
+
+ return (
+
+ );
+});
+
+export default DAppLogo;
diff --git a/src/app/atoms/DAppLogo/plug.svg b/src/app/atoms/DAppLogo/plug.svg
new file mode 100644
index 0000000000..bfedc9554e
--- /dev/null
+++ b/src/app/atoms/DAppLogo/plug.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/app/atoms/EmptyState.tsx b/src/app/atoms/EmptyState.tsx
index 29b88abd0d..1c93a6e9f0 100644
--- 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(({ className, variant }) => (
-
- {variant === 'universal' ? : }
-
-
-
-
-));
+export const EmptyState = memo(({ forSearch = true, textI18n, text, stretch }) => {
+ const Icon = forSearch ? SadSearchIcon : SadUniversalIcon;
+
+ return (
+
+
+
+
+ {textI18n ? : text || }
+
+
+ );
+});
diff --git a/src/app/atoms/loader/index.tsx b/src/app/atoms/Loader/index.tsx
similarity index 100%
rename from src/app/atoms/loader/index.tsx
rename to src/app/atoms/Loader/index.tsx
diff --git a/src/app/atoms/loader/loader.module.css b/src/app/atoms/Loader/loader.module.css
similarity index 100%
rename from src/app/atoms/loader/loader.module.css
rename to 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
index 3bffb75ac1..71d1aa3083 100644
--- 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 {
shouldCastShadow?: boolean;
- flexDirection?: 'row' | 'col';
+ bgSet?: false;
shouldChangeBottomShift?: boolean;
}
export const ActionsButtonsBox = memo(
- ({ 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(
const handleResize = useMemo(
() =>
throttle(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(
return (
= ({ className, children }) => {
+ const [contentHiding, setContentHiding] = useSafeState(false);
+
+ const ref = useRef
();
+
+ const setContentHidingThrottled = useMemo(() => throttle((value: boolean) => setContentHiding(value), 300), []);
+
+ const onScroll = useCallback>(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 (
+
+ {children}
+
+ );
+};
+
+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
index ea7231d992..31b210f61f 100644
--- 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
new file mode 100644
index 0000000000..5f0af3a231
--- /dev/null
+++ b/src/app/icons/base/unlink.svg
@@ -0,0 +1,19 @@
+
diff --git a/src/app/icons/monochrome/apps-alt.svg b/src/app/icons/monochrome/apps-alt.svg
deleted file mode 100644
index 4c2e3e3d99..0000000000
--- a/src/app/icons/monochrome/apps-alt.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-
diff --git a/src/app/icons/monochrome/sad-search.svg b/src/app/icons/monochrome/sad-search.svg
index da3ab1bb7c..b1f9265b86 100644
--- a/src/app/icons/monochrome/sad-search.svg
+++ b/src/app/icons/monochrome/sad-search.svg
@@ -1,11 +1,13 @@
-