aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/package.json1
-rw-r--r--packages/instant/src/components/erc20_asset_amount_input.tsx3
-rw-r--r--packages/instant/src/components/instant_heading.tsx4
-rw-r--r--packages/instant/src/components/scaling_amount_input.tsx3
-rw-r--r--packages/instant/src/components/scaling_input.tsx5
-rw-r--r--packages/instant/src/components/ui/text.tsx4
-rw-r--r--packages/instant/src/components/zero_ex_instant_provider.tsx17
-rw-r--r--packages/instant/src/util/analytics.ts27
8 files changed, 53 insertions, 11 deletions
diff --git a/packages/instant/package.json b/packages/instant/package.json
index d3a85a646..4422dc83f 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -4,6 +4,7 @@
"engines": {
"node": ">=6.12"
},
+ "private": true,
"description": "0x Instant React Component",
"main": "lib/index.js",
"types": "lib/index.d.ts",
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index b825255c4..ff900842a 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -64,6 +64,9 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
maxFontSizePx={this.props.startingFontSizePx}
onAmountChange={this._handleChange}
onFontSizeChange={this._handleFontSizeChange}
+ hasAutofocus={true}
+ /* We send in a key of asset data to force a rerender of this component when the user selects a new asset. We do this so the autofocus attribute will bring focus onto this input */
+ key={asset.assetData}
/>
</Container>
<Container
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 002695269..ace577824 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -107,7 +107,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
private readonly _renderEthAmount = (): React.ReactNode => {
return (
- <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
+ <Text fontSize="16px" textAlign="right" width="100%" fontColor={ColorOption.white} fontWeight={500}>
{format.ethBaseUnitAmount(
this.props.totalEthBaseUnitAmount,
4,
@@ -119,7 +119,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
private readonly _renderDollarAmount = (): React.ReactNode => {
return (
- <Text fontSize="16px" fontColor={ColorOption.white}>
+ <Text fontSize="16px" textAlign="right" width="100%" fontColor={ColorOption.white}>
{format.ethBaseUnitAmountInUsd(
this.props.totalEthBaseUnitAmount,
this.props.ethUsdPrice,
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 5dc719293..0861bbe05 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -18,6 +18,7 @@ export interface ScalingAmountInputProps {
value?: BigNumber;
onAmountChange: (value?: BigNumber) => void;
onFontSizeChange: (fontSizePx: number) => void;
+ hasAutofocus: boolean;
}
interface ScalingAmountInputState {
stringValue: string;
@@ -29,6 +30,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
onAmountChange: util.boundNoop,
onFontSizeChange: util.boundNoop,
isDisabled: false,
+ hasAutofocus: false,
};
public constructor(props: ScalingAmountInputProps) {
super(props);
@@ -64,6 +66,7 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
placeholder="0.00"
emptyInputWidthCh={3.5}
isDisabled={this.props.isDisabled}
+ hasAutofocus={this.props.hasAutofocus}
/>
);
}
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx
index e1599a316..129162a74 100644
--- a/packages/instant/src/components/scaling_input.tsx
+++ b/packages/instant/src/components/scaling_input.tsx
@@ -28,6 +28,7 @@ export interface ScalingInputProps {
maxLength?: number;
scalingSettings: ScalingSettings;
isDisabled: boolean;
+ hasAutofocus: boolean;
}
export interface ScalingInputState {
@@ -51,6 +52,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
maxLength: 7,
scalingSettings: defaultScalingSettings,
isDisabled: false,
+ hasAutofocus: false,
};
public state: ScalingInputState = {
inputWidthPxAtPhaseChange: undefined,
@@ -123,7 +125,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
}
}
public render(): React.ReactNode {
- const { isDisabled, fontColor, onChange, placeholder, value, maxLength } = this.props;
+ const { hasAutofocus, isDisabled, fontColor, onChange, placeholder, value, maxLength } = this.props;
const phase = ScalingInput.getPhaseFromProps(this.props);
return (
<Input
@@ -136,6 +138,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu
width={this._calculateWidth(phase)}
maxLength={maxLength}
disabled={isDisabled}
+ autoFocus={hasAutofocus}
/>
);
}
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index fd14cc4d1..8e573d7b9 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -11,6 +11,7 @@ export interface TextProps {
fontSize?: string;
opacity?: number;
letterSpacing?: string;
+ textAlign?: string;
textTransform?: string;
lineHeight?: string;
className?: string;
@@ -22,6 +23,7 @@ export interface TextProps {
noWrap?: boolean;
display?: string;
href?: string;
+ width?: string;
}
export const Text: React.StatelessComponent<TextProps> = ({ href, onClick, ...rest }) => {
@@ -51,6 +53,8 @@ export const StyledText =
${props => (props.display ? `display: ${props.display}` : '')};
${props => (props.letterSpacing ? `letter-spacing: ${props.letterSpacing}` : '')};
${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')};
+ ${props => (props.textAlign ? `text-align: ${props.textAlign}` : '')};
+ ${props => (props.width ? `width: ${props.width}` : '')};
&:hover {
${props =>
props.onClick ? `color: ${darken(darkenOnHoverAmount, props.theme[props.fontColor || 'white'])}` : ''};
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 9814aabf8..fe34c4466 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -125,14 +125,15 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
// Analytics
disableAnalytics(this.props.shouldDisableAnalyticsTracking || false);
- analytics.addEventProperties({
- embeddedHost: window.location.host,
- embeddedUrl: window.location.href,
- networkId: state.network,
- providerName: state.providerState.name,
- gitSha: process.env.GIT_SHA,
- npmVersion: process.env.NPM_PACKAGE_VERSION,
- });
+ analytics.addEventProperties(
+ analytics.generateEventProperties(
+ state.network,
+ this.props.orderSource,
+ state.providerState,
+ window,
+ this.props.affiliateInfo,
+ ),
+ );
analytics.trackInstantOpened();
}
public componentWillUnmount(): void {
diff --git a/packages/instant/src/util/analytics.ts b/packages/instant/src/util/analytics.ts
index e389e1530..cec99dd1b 100644
--- a/packages/instant/src/util/analytics.ts
+++ b/packages/instant/src/util/analytics.ts
@@ -1,3 +1,5 @@
+import { AffiliateInfo, Network, OrderSource, ProviderState } from '../types';
+
import { EventProperties, heapUtil } from './heap';
let isDisabled = false;
@@ -47,6 +49,9 @@ export interface AnalyticsEventOptions {
providerName?: string;
gitSha?: string;
npmVersion?: string;
+ orderSource?: string;
+ affiliateAddress?: string;
+ affiliateFeePercent?: number;
}
export const analytics = {
@@ -60,6 +65,28 @@ export const analytics = {
heapUtil.evaluateHeapCall(heap => heap.addEventProperties(properties));
});
},
+ generateEventProperties: (
+ network: Network,
+ orderSource: OrderSource,
+ providerState: ProviderState,
+ window: Window,
+ affiliateInfo?: AffiliateInfo,
+ ): AnalyticsEventOptions => {
+ const affiliateAddress = affiliateInfo ? affiliateInfo.feeRecipient : 'none';
+ const affiliateFeePercent = affiliateInfo ? parseFloat(affiliateInfo.feePercentage.toFixed(4)) : 0;
+ const orderSourceName = typeof orderSource === 'string' ? orderSource : 'provided';
+ return {
+ embeddedHost: window.location.host,
+ embeddedUrl: window.location.href,
+ networkId: network,
+ providerName: providerState.name,
+ gitSha: process.env.GIT_SHA,
+ npmVersion: process.env.NPM_PACKAGE_VERSION,
+ orderSource: orderSourceName,
+ affiliateAddress,
+ affiliateFeePercent,
+ };
+ },
trackInstantOpened: trackingEventFnWithoutPayload(EventNames.INSTANT_OPENED),
trackAccountLocked: trackingEventFnWithoutPayload(EventNames.ACCOUNT_LOCKED),
trackAccountReady: (address: string) => trackingEventFnWithPayload(EventNames.ACCOUNT_READY)({ address }),
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-17 00:06:11 +0800