aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/package.json10
-rw-r--r--packages/instant/src/components/install_wallet_panel_content.tsx9
-rw-r--r--packages/instant/src/components/standard_panel_content.tsx13
-rw-r--r--packages/instant/src/containers/connected_account_payment_method.ts37
-rw-r--r--packages/instant/src/redux/analytics_middleware.ts14
-rw-r--r--packages/instant/src/types.ts5
-rw-r--r--packages/instant/src/util/analytics.ts23
7 files changed, 86 insertions, 25 deletions
diff --git a/packages/instant/package.json b/packages/instant/package.json
index 4422dc83f..c75e2408d 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -1,6 +1,6 @@
{
"name": "@0x/instant",
- "version": "1.0.1",
+ "version": "1.0.2",
"engines": {
"node": ">=6.12"
},
@@ -46,14 +46,14 @@
"homepage": "https://github.com/0xProject/0x-monorepo/packages/instant/README.md",
"dependencies": {
"@0x/assert": "^1.0.18",
- "@0x/asset-buyer": "^3.0.1",
+ "@0x/asset-buyer": "^3.0.2",
"@0x/json-schemas": "^2.1.2",
- "@0x/order-utils": "^3.0.3",
- "@0x/subproviders": "^2.1.5",
+ "@0x/order-utils": "^3.0.4",
+ "@0x/subproviders": "^2.1.6",
"@0x/types": "^1.3.0",
"@0x/typescript-typings": "^3.0.4",
"@0x/utils": "^2.0.6",
- "@0x/web3-wrapper": "^3.1.5",
+ "@0x/web3-wrapper": "^3.1.6",
"bowser": "^1.9.4",
"copy-to-clipboard": "^3.0.8",
"ethereum-types": "^1.1.2",
diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx
index 88c26f59c..481d82da0 100644
--- a/packages/instant/src/components/install_wallet_panel_content.tsx
+++ b/packages/instant/src/components/install_wallet_panel_content.tsx
@@ -8,7 +8,9 @@ import {
} from '../constants';
import { ColorOption } from '../style/theme';
import { Browser } from '../types';
+import { analytics } from '../util/analytics';
import { envUtil } from '../util/env';
+import { util } from '../util/util';
import { MetaMaskLogo } from './meta_mask_logo';
import { StandardPanelContent, StandardPanelContentProps } from './standard_panel_content';
@@ -45,6 +47,10 @@ export class InstallWalletPanelContent extends React.Component<InstallWalletPane
default:
break;
}
+ const onActionClick = () => {
+ analytics.trackInstallWalletModalClickedGet();
+ util.createOpenUrlInNewWindow(actionUrl)();
+ };
return {
image: <MetaMaskLogo width={85} height={80} />,
title: 'Install MetaMask',
@@ -52,10 +58,11 @@ export class InstallWalletPanelContent extends React.Component<InstallWalletPane
moreInfoSettings: {
href: META_MASK_SITE_URL,
text: 'What is MetaMask?',
+ onClick: analytics.trackInstallWalletModalClickedExplanation,
},
action: (
<Button
- href={actionUrl}
+ onClick={onActionClick}
width="100%"
fontColor={ColorOption.white}
backgroundColor={ColorOption.darkOrange}
diff --git a/packages/instant/src/components/standard_panel_content.tsx b/packages/instant/src/components/standard_panel_content.tsx
index 582b3318e..79b7bff24 100644
--- a/packages/instant/src/components/standard_panel_content.tsx
+++ b/packages/instant/src/components/standard_panel_content.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import { ColorOption } from '../style/theme';
+import { util } from '../util/util';
import { Container } from './ui/container';
import { Flex } from './ui/flex';
@@ -9,6 +10,7 @@ import { Text } from './ui/text';
export interface MoreInfoSettings {
text: string;
href: string;
+ onClick?: () => void;
}
export interface StandardPanelContentProps {
@@ -21,6 +23,15 @@ export interface StandardPanelContentProps {
const SPACING_BETWEEN_PX = '20px';
+const onMoreInfoClick = (href: string, onClick?: () => void) => {
+ return () => {
+ if (onClick) {
+ onClick();
+ }
+ util.createOpenUrlInNewWindow(href)();
+ };
+};
+
export const StandardPanelContent: React.StatelessComponent<StandardPanelContentProps> = ({
image,
title,
@@ -50,7 +61,7 @@ export const StandardPanelContent: React.StatelessComponent<StandardPanelContent
fontSize="13px"
textDecorationLine="underline"
fontColor={ColorOption.lightGrey}
- href={moreInfoSettings.href}
+ onClick={onMoreInfoClick(moreInfoSettings.href, moreInfoSettings.onClick)}
>
{moreInfoSettings.text}
</Text>
diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts
index cdeb49a25..e9327a288 100644
--- a/packages/instant/src/containers/connected_account_payment_method.ts
+++ b/packages/instant/src/containers/connected_account_payment_method.ts
@@ -11,7 +11,7 @@ import {
import { Action, actions } from '../redux/actions';
import { asyncData } from '../redux/async_data';
import { State } from '../redux/reducer';
-import { Network, Omit, OperatingSystem, ProviderState, StandardSlidingPanelContent } from '../types';
+import { Network, Omit, OperatingSystem, ProviderState, StandardSlidingPanelContent, WalletSuggestion } from '../types';
import { analytics } from '../util/analytics';
import { envUtil } from '../util/env';
@@ -60,23 +60,28 @@ const mergeProps = (
onUnlockWalletClick: () => connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState),
onInstallWalletClick: () => {
const isMobile = envUtil.isMobileOperatingSystem();
- if (!isMobile) {
+ const walletSuggestion: WalletSuggestion = isMobile
+ ? WalletSuggestion.CoinbaseWallet
+ : WalletSuggestion.MetaMask;
+
+ analytics.trackInstallWalletClicked(walletSuggestion);
+ if (walletSuggestion === WalletSuggestion.MetaMask) {
connectedDispatch.openInstallWalletPanel();
- return;
- }
- const operatingSystem = envUtil.getOperatingSystem();
- let url = COINBASE_WALLET_SITE_URL;
- switch (operatingSystem) {
- case OperatingSystem.Android:
- url = COINBASE_WALLET_ANDROID_APP_STORE_URL;
- break;
- case OperatingSystem.iOS:
- url = COINBASE_WALLET_IOS_APP_STORE_URL;
- break;
- default:
- break;
+ } else {
+ const operatingSystem = envUtil.getOperatingSystem();
+ let url = COINBASE_WALLET_SITE_URL;
+ switch (operatingSystem) {
+ case OperatingSystem.Android:
+ url = COINBASE_WALLET_ANDROID_APP_STORE_URL;
+ break;
+ case OperatingSystem.iOS:
+ url = COINBASE_WALLET_IOS_APP_STORE_URL;
+ break;
+ default:
+ break;
+ }
+ window.open(url, '_blank');
}
- window.open(url, '_blank');
},
});
diff --git a/packages/instant/src/redux/analytics_middleware.ts b/packages/instant/src/redux/analytics_middleware.ts
index 8aa76eb77..3dc5fe924 100644
--- a/packages/instant/src/redux/analytics_middleware.ts
+++ b/packages/instant/src/redux/analytics_middleware.ts
@@ -3,7 +3,7 @@ import * as _ from 'lodash';
import { Middleware } from 'redux';
import { ETH_DECIMALS } from '../constants';
-import { Account, AccountState } from '../types';
+import { Account, AccountState, StandardSlidingPanelContent } from '../types';
import { analytics } from '../util/analytics';
import { Action, ActionTypes } from './actions';
@@ -77,6 +77,18 @@ export const analyticsMiddleware: Middleware = store => next => middlewareAction
});
}
break;
+ case ActionTypes.OPEN_STANDARD_SLIDING_PANEL:
+ const openSlidingContent = curState.standardSlidingPanelSettings.content;
+ if (openSlidingContent === StandardSlidingPanelContent.InstallWallet) {
+ analytics.trackInstallWalletModalOpened();
+ }
+ break;
+ case ActionTypes.CLOSE_STANDARD_SLIDING_PANEL:
+ const closeSlidingContent = curState.standardSlidingPanelSettings.content;
+ if (closeSlidingContent === StandardSlidingPanelContent.InstallWallet) {
+ analytics.trackInstallWalletModalClosed();
+ }
+ break;
}
return nextAction;
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index ea2bcbc2f..2d73ba29e 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -154,6 +154,11 @@ export enum Browser {
Other = 'OTHER',
}
+export enum WalletSuggestion {
+ CoinbaseWallet = 'Coinbase Wallet',
+ MetaMask = 'MetaMask',
+}
+
export enum OperatingSystem {
Android = 'ANDROID',
iOS = 'IOS',
diff --git a/packages/instant/src/util/analytics.ts b/packages/instant/src/util/analytics.ts
index 99e8736d3..1468ef4a8 100644
--- a/packages/instant/src/util/analytics.ts
+++ b/packages/instant/src/util/analytics.ts
@@ -2,7 +2,15 @@ import { BuyQuote } from '@0x/asset-buyer';
import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
-import { AffiliateInfo, Asset, Network, OrderSource, ProviderState, QuoteFetchOrigin } from '../types';
+import {
+ AffiliateInfo,
+ Asset,
+ Network,
+ OrderSource,
+ ProviderState,
+ QuoteFetchOrigin,
+ WalletSuggestion,
+} from '../types';
import { EventProperties, heapUtil } from './heap';
@@ -34,6 +42,11 @@ enum EventNames {
BUY_TX_SUBMITTED = 'Buy - Tx Submitted',
BUY_TX_SUCCEEDED = 'Buy - Tx Succeeded',
BUY_TX_FAILED = 'Buy - Tx Failed',
+ INSTALL_WALLET_CLICKED = 'Install Wallet - Clicked',
+ INSTALL_WALLET_MODAL_OPENED = 'Install Wallet - Modal - Opened',
+ INSTALL_WALLET_MODAL_CLICKED_EXPLANATION = 'Install Wallet - Modal - Clicked Explanation',
+ INSTALL_WALLET_MODAL_CLICKED_GET = 'Install Wallet - Modal - Clicked Get',
+ INSTALL_WALLET_MODAL_CLOSED = 'Install Wallet - Modal - Closed',
TOKEN_SELECTOR_OPENED = 'Token Selector - Opened',
TOKEN_SELECTOR_CLOSED = 'Token Selector - Closed',
TOKEN_SELECTOR_CHOSE = 'Token Selector - Chose',
@@ -173,6 +186,14 @@ export const analytics = {
expectedTxTimeMs: expectedEndTimeUnix - startTimeUnix,
actualTxTimeMs: new Date().getTime() - startTimeUnix,
}),
+ trackInstallWalletClicked: (walletSuggestion: WalletSuggestion) =>
+ trackingEventFnWithPayload(EventNames.INSTALL_WALLET_CLICKED)({ walletSuggestion }),
+ trackInstallWalletModalClickedExplanation: trackingEventFnWithoutPayload(
+ EventNames.INSTALL_WALLET_MODAL_CLICKED_EXPLANATION,
+ ),
+ trackInstallWalletModalClickedGet: trackingEventFnWithoutPayload(EventNames.INSTALL_WALLET_MODAL_CLICKED_GET),
+ trackInstallWalletModalOpened: trackingEventFnWithoutPayload(EventNames.INSTALL_WALLET_MODAL_OPENED),
+ trackInstallWalletModalClosed: trackingEventFnWithoutPayload(EventNames.INSTALL_WALLET_MODAL_CLOSED),
trackTokenSelectorOpened: trackingEventFnWithoutPayload(EventNames.TOKEN_SELECTOR_OPENED),
trackTokenSelectorClosed: (closedVia: TokenSelectorClosedVia) =>
trackingEventFnWithPayload(EventNames.TOKEN_SELECTOR_CLOSED)({ closedVia }),
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-16 16:42:53 +0800