aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src')
-rw-r--r--packages/instant/src/components/animations/full_rotation.tsx5
-rw-r--r--packages/instant/src/components/animations/position_animation.tsx5
-rw-r--r--packages/instant/src/components/css_reset.tsx6
-rw-r--r--packages/instant/src/components/timed_progress_bar.tsx5
-rw-r--r--packages/instant/src/components/ui/circle.tsx19
-rw-r--r--packages/instant/src/components/ui/container.tsx5
-rw-r--r--packages/instant/src/components/ui/flex.tsx5
-rw-r--r--packages/instant/src/components/ui/input.tsx10
-rw-r--r--packages/instant/src/components/ui/overlay.tsx5
-rw-r--r--packages/instant/src/components/ui/text.tsx5
-rw-r--r--packages/instant/src/constants.ts2
-rw-r--r--packages/instant/src/containers/latest_error.tsx5
-rw-r--r--packages/instant/src/types.ts1
-rw-r--r--packages/instant/src/util/asset.ts26
-rw-r--r--packages/instant/src/util/buy_quote_updater.ts7
-rw-r--r--packages/instant/src/util/env.ts9
16 files changed, 63 insertions, 57 deletions
diff --git a/packages/instant/src/components/animations/full_rotation.tsx b/packages/instant/src/components/animations/full_rotation.tsx
index 9adb565f9..1dff1b1fc 100644
--- a/packages/instant/src/components/animations/full_rotation.tsx
+++ b/packages/instant/src/components/animations/full_rotation.tsx
@@ -14,10 +14,7 @@ to {
}
`;
-export const FullRotation =
- styled.div <
- FullRotationProps >
- `
+export const FullRotation = styled.div<FullRotationProps>`
animation: ${rotatingKeyframes} 2s linear infinite;
height: ${props => props.height};
width: ${props => props.width};
diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
index 8b3b294b7..4f8f25679 100644
--- a/packages/instant/src/components/animations/position_animation.tsx
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -95,10 +95,7 @@ const animationForSize = (
return animationSettingsForSize && mediaFn`${generatePositionAnimationCss(animationSettingsForSize)}`;
};
-export const PositionAnimation =
- styled.div <
- PositionAnimationProps >
- `
+export const PositionAnimation = styled.div<PositionAnimationProps>`
&& {
${props => props.zIndex && stylesForMedia<number>('z-index', props.zIndex)}
${props => defaultAnimation(props.positionSettings)}
diff --git a/packages/instant/src/components/css_reset.tsx b/packages/instant/src/components/css_reset.tsx
index 0bef85389..d1b20f4c9 100644
--- a/packages/instant/src/components/css_reset.tsx
+++ b/packages/instant/src/components/css_reset.tsx
@@ -4,9 +4,9 @@ import { createGlobalStyle } from '../style/theme';
export interface CSSResetProps {}
/*
-* Derived from
-* https://github.com/jtrost/Complete-CSS-Reset
-*/
+ * Derived from
+ * https://github.com/jtrost/Complete-CSS-Reset
+ */
export const CSSReset = createGlobalStyle`
.${INJECTED_DIV_CLASS} {
a, abbr, area, article, aside, audio, b, bdo, blockquote, body, button,
diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx
index b1644b871..287269af7 100644
--- a/packages/instant/src/components/timed_progress_bar.tsx
+++ b/packages/instant/src/components/timed_progress_bar.tsx
@@ -68,10 +68,7 @@ interface ProgressProps {
animationSettings?: WidthAnimationSettings;
}
-export const Progress =
- styled.div <
- ProgressProps >
- `
+export const Progress = styled.div<ProgressProps>`
&& {
background-color: ${props => props.theme[ColorOption.primaryColor]};
border-radius: 6px;
diff --git a/packages/instant/src/components/ui/circle.tsx b/packages/instant/src/components/ui/circle.tsx
index 4f9f56f12..e4f2c5260 100644
--- a/packages/instant/src/components/ui/circle.tsx
+++ b/packages/instant/src/components/ui/circle.tsx
@@ -8,16 +8,15 @@ export interface CircleProps {
}
export const Circle = withTheme(
- styled.div <
- CircleProps >
- `
- && {
- width: ${props => props.diameter}px;
- height: ${props => props.diameter}px;
- background-color: ${props => (props.rawColor ? props.rawColor : props.theme[props.color || ColorOption.white])};
- border-radius: 50%;
- }
-`,
+ styled.div<CircleProps>`
+ && {
+ width: ${props => props.diameter}px;
+ height: ${props => props.diameter}px;
+ background-color: ${props =>
+ props.rawColor ? props.rawColor : props.theme[props.color || ColorOption.white]};
+ border-radius: 50%;
+ }
+ `,
);
Circle.displayName = 'Circle';
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 58d7d5871..59b733f3e 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -51,10 +51,7 @@ const getBackgroundColor = (theme: any, backgroundColor?: ColorOption, rawBackgr
return 'none';
};
-export const Container =
- styled.div <
- ContainerProps >
- `
+export const Container = styled.div<ContainerProps>`
&& {
box-sizing: border-box;
${props => cssRuleIfExists(props, 'flex-grow')}
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index 274c46b9e..145e654f1 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -14,10 +14,7 @@ export interface FlexProps {
flexGrow?: number | string;
}
-export const Flex =
- styled.div <
- FlexProps >
- `
+export const Flex = styled.div<FlexProps>`
&& {
display: ${props => (props.inline ? 'inline-flex' : 'flex')};
flex-direction: ${props => props.direction};
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index 53c43ea0b..024e81b15 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -14,10 +14,7 @@ export interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}
-export const Input =
- styled.input <
- InputProps >
- `
+export const Input = styled.input<InputProps>`
&& {
all: initial;
font-size: ${props => props.fontSize};
@@ -32,10 +29,11 @@ export const Input =
color: ${props => props.theme[props.fontColor || 'white']} !important;
opacity: 0.5 !important;
}
- &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+ &::-webkit-outer-spin-button,
+ &::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
- }
+ }
}
`;
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index 0b5eaf299..0b1be6a65 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -12,10 +12,7 @@ export interface OverlayProps {
showMaxWidth?: ScreenWidths;
}
-export const Overlay =
- styled.div <
- OverlayProps >
- `
+export const Overlay = styled.div<OverlayProps>`
&& {
position: fixed;
top: 0;
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index 282477758..ca120f3bd 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -31,10 +31,7 @@ export const Text: React.StatelessComponent<TextProps> = ({ href, onClick, ...re
};
const opacityOnHoverAmount = 0.5;
-export const StyledText =
- styled.div <
- TextProps >
- `
+export const StyledText = styled.div<TextProps>`
&& {
font-family: 'Inter UI', sans-serif;
font-style: ${props => props.fontStyle};
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 22f0cb6a4..bfd9e9098 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -16,6 +16,7 @@ export const ONE_SECOND_MS = 1000;
export const ONE_MINUTE_MS = ONE_SECOND_MS * 60;
export const GIT_SHA = process.env.GIT_SHA;
export const NODE_ENV = process.env.NODE_ENV;
+export const SLIPPAGE_PERCENTAGE = 0.2;
export const NPM_PACKAGE_VERSION = process.env.NPM_PACKAGE_VERSION;
export const DEFAULT_UNKOWN_ASSET_NAME = '???';
export const ACCOUNT_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 5;
@@ -73,5 +74,6 @@ export const PROVIDER_TYPE_TO_NAME: { [key in ProviderType]: string } = {
[ProviderType.CoinbaseWallet]: 'Coinbase Wallet',
[ProviderType.Parity]: 'Parity',
[ProviderType.TrustWallet]: 'Trust Wallet',
+ [ProviderType.Opera]: 'Opera Wallet',
[ProviderType.Fallback]: 'Fallback',
};
diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx
index 6da4558ef..57a2dbdc2 100644
--- a/packages/instant/src/containers/latest_error.tsx
+++ b/packages/instant/src/containers/latest_error.tsx
@@ -62,4 +62,7 @@ const mapDispatchToProps = (dispatch: Dispatch<Action>, _ownProps: LatestErrorPr
},
});
-export const LatestError = connect(mapStateToProps, mapDispatchToProps)(LatestErrorComponent);
+export const LatestError = connect(
+ mapStateToProps,
+ mapDispatchToProps,
+)(LatestErrorComponent);
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index ae672c919..f07a407da 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -183,6 +183,7 @@ export enum ProviderType {
CoinbaseWallet = 'COINBASE_WALLET',
Cipher = 'CIPHER',
TrustWallet = 'TRUST_WALLET',
+ Opera = 'OPERA',
Fallback = 'FALLBACK',
}
diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts
index faaeb7c22..709561dbc 100644
--- a/packages/instant/src/util/asset.ts
+++ b/packages/instant/src/util/asset.ts
@@ -1,8 +1,10 @@
-import { AssetBuyerError } from '@0x/asset-buyer';
+import { AssetBuyerError, InsufficientAssetLiquidityError } from '@0x/asset-buyer';
import { AssetProxyId, ObjectMap } from '@0x/types';
+import { BigNumber } from '@0x/utils';
+import { Web3Wrapper } from '@0x/web3-wrapper';
import * as _ from 'lodash';
-import { DEFAULT_UNKOWN_ASSET_NAME } from '../constants';
+import { BIG_NUMBER_ZERO, DEFAULT_UNKOWN_ASSET_NAME } from '../constants';
import { assetDataNetworkMapping } from '../data/asset_data_network_mapping';
import { Asset, AssetMetaData, ERC20Asset, Network, ZeroExInstantError } from '../types';
@@ -102,15 +104,29 @@ export const assetUtils = {
return assetDataGroupIfExists[Network.Mainnet];
},
getERC20AssetsFromAssets: (assets: Asset[]): ERC20Asset[] => {
- const erc20sOrUndefined = _.map(
- assets,
- asset => (asset.metaData.assetProxyId === AssetProxyId.ERC20 ? (asset as ERC20Asset) : undefined),
+ const erc20sOrUndefined = _.map(assets, asset =>
+ asset.metaData.assetProxyId === AssetProxyId.ERC20 ? (asset as ERC20Asset) : undefined,
);
return _.compact(erc20sOrUndefined);
},
assetBuyerErrorMessage: (asset: ERC20Asset, error: Error): string | undefined => {
if (error.message === AssetBuyerError.InsufficientAssetLiquidity) {
const assetName = assetUtils.bestNameForAsset(asset, 'of this asset');
+ if (
+ error instanceof InsufficientAssetLiquidityError &&
+ error.amountAvailableToFill.greaterThan(BIG_NUMBER_ZERO)
+ ) {
+ const unitAmountAvailableToFill = Web3Wrapper.toUnitAmount(
+ error.amountAvailableToFill,
+ asset.metaData.decimals,
+ );
+ const roundedUnitAmountAvailableToFill = unitAmountAvailableToFill.round(2, BigNumber.ROUND_DOWN);
+
+ if (roundedUnitAmountAvailableToFill.greaterThan(BIG_NUMBER_ZERO)) {
+ return `There are only ${roundedUnitAmountAvailableToFill} ${assetName} available to buy`;
+ }
+ }
+
return `Not enough ${assetName} available`;
} else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) {
return 'Not enough ZRX available';
diff --git a/packages/instant/src/util/buy_quote_updater.ts b/packages/instant/src/util/buy_quote_updater.ts
index 6191c92e3..37974e71c 100644
--- a/packages/instant/src/util/buy_quote_updater.ts
+++ b/packages/instant/src/util/buy_quote_updater.ts
@@ -5,6 +5,7 @@ import * as _ from 'lodash';
import { Dispatch } from 'redux';
import { oc } from 'ts-optchain';
+import { SLIPPAGE_PERCENTAGE } from '../constants';
import { Action, actions } from '../redux/actions';
import { AffiliateInfo, ERC20Asset, QuoteFetchOrigin } from '../types';
import { analytics } from '../util/analytics';
@@ -33,8 +34,12 @@ export const buyQuoteUpdater = {
}
const feePercentage = oc(options.affiliateInfo).feePercentage();
let newBuyQuote: BuyQuote | undefined;
+ const slippagePercentage = SLIPPAGE_PERCENTAGE;
try {
- newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue, { feePercentage });
+ newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue, {
+ feePercentage,
+ slippagePercentage,
+ });
} catch (error) {
const errorMessage = assetUtils.assetBuyerErrorMessage(asset, error);
diff --git a/packages/instant/src/util/env.ts b/packages/instant/src/util/env.ts
index aedf4f5d6..7d4f836ff 100644
--- a/packages/instant/src/util/env.ts
+++ b/packages/instant/src/util/env.ts
@@ -42,18 +42,21 @@ export const envUtil = {
}
},
getProviderType(provider: Provider): ProviderType | undefined {
+ const anyProvider = provider as any;
if (provider.constructor.name === 'EthereumProvider') {
return ProviderType.Mist;
- } else if ((provider as any).isTrust) {
+ } else if (anyProvider.isTrust) {
return ProviderType.TrustWallet;
- } else if ((provider as any).isParity) {
+ } else if (anyProvider.isParity) {
return ProviderType.Parity;
- } else if ((provider as any).isMetaMask) {
+ } else if (anyProvider.isMetaMask) {
return ProviderType.MetaMask;
} else if (!_.isUndefined(_.get(window, 'SOFA'))) {
return ProviderType.CoinbaseWallet;
} else if (!_.isUndefined(_.get(window, '__CIPHER__'))) {
return ProviderType.Cipher;
+ } else if (envUtil.getBrowser() === Browser.Opera && !anyProvider.isMetaMask) {
+ return ProviderType.Opera;
}
return;
},
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-28 23:47:23 +0800