Skip to content

Commit

Permalink
Merge pull request #392 from lidofinance/develop
Browse files Browse the repository at this point in the history 
Develop to main
  • Loading branch information
@jake4take
jake4take authored Jul 10, 2024
2 parents 1ecf741 + 8ca6ef9 commit 7fe1a76
Show file tree
Hide file tree
Showing 32 changed files with 1,669 additions and 1,193 deletions.
14 changes: 14 additions & 0 deletions assets/icons/chevron-blue.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions assets/icons/jumper.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions consts/matomo-click-events.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export const enum MATOMO_CLICK_EVENTS_TYPES {
withdrawalGoToCowSwap = 'withdrawalGoToCowSwap',
withdrawalGoToParaswap = 'withdrawalGoToParaswap',
withdrawalGoToOpenOcean = 'withdrawalGoToOpenOcean',
withdrawalGoToJumper = 'withdrawalGoToJumper',
withdrawalEtherscanSuccessTemplate = 'withdrawalEtherscanSuccessTemplate',
withdrawalGuideSuccessTemplate = 'withdrawalGuideSuccessTemplate',

Expand Down Expand Up @@ -318,6 +319,11 @@ export const MATOMO_CLICK_EVENTS: Record<
'Click on «Go to OpenOcean in aggregators list on Request tab',
'eth_withdrawals_request_go_to_OpenOcean',
],
[MATOMO_CLICK_EVENTS_TYPES.withdrawalGoToJumper]: [
'Ethereum_Withdrawals_Widget',
'Click on «Go to Jumper in aggregators list on Request tab',
'eth_withdrawals_request_go_to_Jumper',
],
[MATOMO_CLICK_EVENTS_TYPES.withdrawalEtherscanSuccessTemplate]: [
'Ethereum_Withdrawals_Widget',
'Click on "Etherscan" on success template after withdrawal request',
Expand Down
112 changes: 32 additions & 80 deletions consts/matomo-wallets-events.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { MatomoEventType, trackEvent } from '@lidofinance/analytics-matomo';
import { Metrics as WalletsMetrics } from 'reef-knot/connect-wallet-modal';
import { Metrics } from 'reef-knot/connect-wallet-modal';
import { WalletIdsEthereum } from 'reef-knot/wallets';

export const enum MATOMO_WALLETS_EVENTS_TYPES {
onClickAmbire = 'onClickAmbire',
Expand Down Expand Up @@ -166,92 +167,43 @@ export const MATOMO_WALLETS_EVENTS: Record<
],
};

export const walletsMetrics: WalletsMetrics = {
const getMetricHandler = (event: Parameters<typeof trackEvent>) => () =>
trackEvent(...event);

export const walletsMetrics: Metrics<WalletIdsEthereum> = {
events: {
click: {
handlers: {
onClickAmbire: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onClickAmbire);
},
onClickBrave: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onClickBrave);
},
onClickCoin98: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onClickCoin98);
},
onClickCoinbase: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onClickCoinbase);
},
onClickExodus: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onClickExodus);
},
onClickImToken: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onClickImToken);
},
onClickLedger: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onClickLedger);
},
onClickMetamask: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onClickMetamask);
},
onClickTrust: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onClickTrust);
},
onClickWalletconnect: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onClickWC);
},
onClickXdefi: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onClickXdefi);
},
onClickOkx: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onClickOkx);
},
onClickBitget: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onClickBitget);
},
ambire: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickAmbire),
brave: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickBrave),
coin98: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickCoin98),
coinbase: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickCoinbase),
exodus: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickExodus),
imToken: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickImToken),
ledgerHID: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickLedger),
metaMask: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickMetamask),
trust: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickTrust),
walletConnect: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickWC),
xdefi: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickXdefi),
okx: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickOkx),
bitget: getMetricHandler(MATOMO_WALLETS_EVENTS.onClickBitget),
},
},
connect: {
handlers: {
onConnectAmbire: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onConnectAmbire);
},
onConnectBrave: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onConnectBrave);
},
onConnectCoin98: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onConnectCoin98);
},
onConnectCoinbase: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onConnectCoinbase);
},
onConnectExodus: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onConnectExodus);
},
onConnectImToken: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onConnectImToken);
},
onConnectLedger: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onConnectLedger);
},
onConnectMetamask: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onConnectMetamask);
},
onConnectTrust: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onConnectTrust);
},
onConnectWalletconnect: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onConnectWC);
},
onConnectXdefi: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onConnectXdefi);
},
onConnectOkx: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onConnectOkx);
},
onConnectBitget: () => {
trackEvent(...MATOMO_WALLETS_EVENTS.onConnectBitget);
},
ambire: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectAmbire),
brave: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectBrave),
coin98: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectCoin98),
coinbase: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectCoinbase),
exodus: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectExodus),
imToken: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectImToken),
ledgerHID: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectLedger),
metaMask: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectMetamask),
trust: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectTrust),
walletConnect: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectWC),
xdefi: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectXdefi),
okx: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectOkx),
bitget: getMetricHandler(MATOMO_WALLETS_EVENTS.onConnectBitget),
},
},
},
Expand Down
5 changes: 2 additions & 3 deletions features/ipfs/rpc-availability-check-result-box/styles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ import {
Text as TextOriginal,
themeDefault,
} from '@lidofinance/lido-ui';

import { NAV_MOBILE_MEDIA } from 'styles/constants';
import { devicesHeaderMedia } from 'styles/global';

type TextProps = Omit<ComponentProps<typeof TextOriginal>, 'color'> & {
color?: keyof typeof themeDefault.colors;
Expand Down Expand Up @@ -38,7 +37,7 @@ export const Wrap = styled.div`
border-radius: 2px 0 0 0;
background: var(--lido-color-accent);
${NAV_MOBILE_MEDIA} {
@media ${devicesHeaderMedia.mobile} {
display: none;
}
}
Expand Down
2 changes: 1 addition & 1 deletion features/stake/hooks.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useMemo } from 'react';
import { isDesktop } from 'react-device-detect';
import { useConnectorInfo } from 'reef-knot/web3-react';
import { useConnectorInfo } from 'reef-knot/core-react';

const LEDGER_LIVE_ONE_INCH_DESKTOP_DEEPLINK = 'ledgerlive://discover/1inch-lld';
const LEDGER_LIVE_ONE_INCH_MOBILE_DEEPLINK = 'ledgerlive://discover/1inch-llm';
Expand Down
78 changes: 53 additions & 25 deletions ...wals/request/form/options/dex-options.tsx → .../form/options/dex-options/dex-options.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,16 @@ import {
DexOptionStyled,
DexOptionsContainer,
DexOptionAmount,
InlineLoaderSmall,
DexOptionLoader,
DexWarning,
DexOptionsShowMore,
DexOptionsCheckMarkIcon,
} from './styles';
import { ReactComponent as AttentionTriangle } from 'assets/icons/attention-triangle.svg';
import { useState } from 'react';
import { InlineLoaderSmall } from '../styles';

const MAX_SHOWN_ELEMENTS = 3;

type DexOptionProps = {
title: string;
Expand Down Expand Up @@ -66,36 +71,59 @@ const DexOption: React.FC<DexOptionProps> = ({
export const DexOptions: React.FC<
React.ComponentProps<typeof DexOptionsContainer>
> = (props) => {
const [showMore, setShowMore] = useState(false);
const [buttonText, setButtonText] = useState('See all options');
const { data, initialLoading, amount, selectedToken, enabledDexes } =
useWithdrawalRates();

const isAnyDexEnabled = enabledDexes.length > 0;
const allowExpand = enabledDexes.length > MAX_SHOWN_ELEMENTS;

return (
<DexOptionsContainer data-testid="dexOptionContainer" {...props}>
{!isAnyDexEnabled && (
<DexWarning>
<AttentionTriangle />
<div>Aggregator&apos;s prices are not available now</div>
</DexWarning>
<>
<DexOptionsContainer
data-testid="dexOptionContainer"
$maxElements={showMore ? enabledDexes.length : MAX_SHOWN_ELEMENTS}
onTransitionEnd={() =>
setButtonText(showMore ? 'Hide' : 'See all options')
}
{...props}
>
{!isAnyDexEnabled && (
<DexWarning>
<AttentionTriangle />
<div>Aggregator&apos;s prices are not available now</div>
</DexWarning>
)}
{isAnyDexEnabled &&
initialLoading &&
enabledDexes.map((_, i) => <DexOptionLoader key={i} />)}
{isAnyDexEnabled &&
!initialLoading &&
data?.map(({ title, toReceive, link, rate, matomoEvent, icon }) => {
return (
<DexOption
title={title}
icon={icon}
onClickGoTo={() => trackMatomoEvent(matomoEvent)}
url={link(amount, selectedToken)}
key={title}
toReceive={rate ? toReceive : null}
/>
);
})}
</DexOptionsContainer>
{allowExpand && (
<DexOptionsShowMore
onClick={(e) => {
e.preventDefault();
setShowMore(!showMore);
}}
>
{buttonText}
<DexOptionsCheckMarkIcon $active={showMore} />
</DexOptionsShowMore>
)}
{isAnyDexEnabled &&
initialLoading &&
enabledDexes.map((_, i) => <DexOptionLoader key={i} />)}
{isAnyDexEnabled &&
!initialLoading &&
data?.map(({ title, toReceive, link, rate, matomoEvent, icon }) => {
return (
<DexOption
title={title}
icon={icon}
onClickGoTo={() => trackMatomoEvent(matomoEvent)}
url={link(amount, selectedToken)}
key={title}
toReceive={rate ? toReceive : null}
/>
);
})}
</DexOptionsContainer>
</>
);
};
1 change: 1 addition & 0 deletions features/withdrawals/request/form/options/dex-options/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { DexOptions } from './dex-options';
Loading

0 comments on commit 7fe1a76

Please sign in to comment.