diff options
Diffstat (limited to 'packages/website')
-rw-r--r-- | packages/website/package.json | 6 | ||||
-rw-r--r-- | packages/website/public/images/developers/tutorials/integrate_0x_instant.svg | 3 | ||||
-rw-r--r-- | packages/website/public/index.html | 2 | ||||
-rw-r--r-- | packages/website/translations/english.json | 3 | ||||
-rw-r--r-- | packages/website/ts/pages/documentation/docs_home.tsx | 8 | ||||
-rw-r--r-- | packages/website/ts/pages/instant/fee_percentage_slider.tsx | 60 | ||||
-rw-r--r-- | packages/website/ts/types.ts | 2 |
7 files changed, 52 insertions, 32 deletions
diff --git a/packages/website/package.json b/packages/website/package.json index b0b0c8340..0ac4c9db6 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -1,6 +1,6 @@ { "name": "@0x/website", - "version": "0.0.61", + "version": "0.0.63", "engines": { "node": ">=6.12" }, @@ -20,7 +20,7 @@ "author": "Fabio Berger", "license": "Apache-2.0", "dependencies": { - "@0x/asset-buyer": "^3.0.2", + "@0x/asset-buyer": "^3.0.4", "@0x/contract-addresses": "^2.0.0", "@0x/contract-wrappers": "^4.1.1", "@0x/json-schemas": "^2.1.2", @@ -42,7 +42,7 @@ "blockies": "^0.0.2", "bowser": "^1.9.3", "deep-equal": "^1.0.1", - "ethereum-types": "^1.1.2", + "ethereum-types": "^1.1.4", "ethereumjs-util": "^5.1.1", "find-versions": "^2.0.0", "jsonschema": "^1.2.0", diff --git a/packages/website/public/images/developers/tutorials/integrate_0x_instant.svg b/packages/website/public/images/developers/tutorials/integrate_0x_instant.svg new file mode 100644 index 000000000..e9c9278a8 --- /dev/null +++ b/packages/website/public/images/developers/tutorials/integrate_0x_instant.svg @@ -0,0 +1,3 @@ +<svg width="32" height="39" viewBox="0 0 32 39" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M16 1L1 23.242H16L16.0412 38L31 15.7159H16V1Z" stroke="#3289F1" stroke-width="1.5" stroke-miterlimit="10" stroke-linejoin="round"/> +</svg> diff --git a/packages/website/public/index.html b/packages/website/public/index.html index 3f013f128..538eca6d9 100644 --- a/packages/website/public/index.html +++ b/packages/website/public/index.html @@ -23,7 +23,7 @@ <link rel="stylesheet" href="/css/basscss_responsive_type_scale.css" /> </head> - <body> + <body style="margin: 0px; min-width: 355px;"> <!-- Heap SDK --> <script type="text/javascript"> (window.heap = window.heap || []), diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index 78f29d0f6..2914ffead 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -92,6 +92,9 @@ "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_NETWORKED_LIQUIDITY": "use networked liquidity", "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API", + "INTEGRATE_0X_INSTANT": "add seamless purchasing of crypto assets to your website or app", + "INTEGRATE_0X_INSTANT_DESCRIPTION": + "learn how to use 0x Instant or AssetBuyer to give your users the power of purchasing crypto assets using 0x", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index f68d2892f..9dc779e96 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -44,6 +44,14 @@ const TUTORIALS: TutorialInfo[] = [ to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, }, + { + iconUrl: '/images/developers/tutorials/integrate_0x_instant.svg', + description: Key.Integrate0xInstantDescription, + link: { + title: Key.Integrate0xInstant, + to: `${WebsitePaths.Wiki}#Get-Started-With-Instant`, + }, + }, ]; const CATEGORY_TO_PACKAGES: ObjectMap<Package[]> = { diff --git a/packages/website/ts/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/pages/instant/fee_percentage_slider.tsx index 176240f2e..d76cee58f 100644 --- a/packages/website/ts/pages/instant/fee_percentage_slider.tsx +++ b/packages/website/ts/pages/instant/fee_percentage_slider.tsx @@ -1,23 +1,52 @@ import Slider from 'rc-slider'; -//import 'rc-slider/assets/index.css'; +import 'rc-slider/assets/index.css'; import * as React from 'react'; -import styled from 'styled-components'; import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; +import { injectGlobal } from 'ts/style/theme'; const SliderWithTooltip = (Slider as any).createSliderWithTooltip(Slider); // tslint:disable-next-line:no-unused-expression +injectGlobal` + .rc-slider-tooltip-inner { + box-shadow: none !important; + background-color: ${colors.white} !important; + border-radius: 4px !important; + padding: 3px 12px !important; + height: auto !important; + position: relative; + top: 7px; + &: after { + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-width: 6px; + bottom: 100%; + left: 100%; + border-bottom-color: ${colors.white}; + margin-left: -60%; + } + } + .rc-slider-disabled { + background-color: inherit !important; + } +`; export interface FeePercentageSliderProps { value: number; + isDisabled: boolean; onChange: (value: number) => void; } export class FeePercentageSlider extends React.Component<FeePercentageSliderProps> { public render(): React.ReactNode { return ( - <StyledSlider + <SliderWithTooltip + disabled={this.props.isDisabled} min={0} max={0.05} step={0.0025} @@ -46,28 +75,3 @@ export class FeePercentageSlider extends React.Component<FeePercentageSliderProp return <Text fontColor={colors.black} fontSize="14px" fontWeight={700}>{`${(value * 100).toFixed(2)}%`}</Text>; }; } - -const StyledSlider = styled(SliderWithTooltip)` - .rc-slider-tooltip-inner { - box-shadow: none !important; - background-color: ${colors.white} !important; - border-radius: 4px !important; - padding: 3px 12px !important; - height: auto !important; - position: relative; - top: 7px; - &:after { - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-width: 6px; - bottom: 100%; - left: 100%; - border-bottom-color: ${colors.white}; - margin-left: -60%; - } - } -`; diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index a668681d5..73e248713 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -480,6 +480,8 @@ export enum Key { OrderBasicsDescription = 'ORDER_BASICS_DESCRIPTION', UseNetworkedLiquidity = 'USE_NETWORKED_LIQUIDITY', UseNetworkedLiquidityDescription = 'USE_NETWORKED_LIQUIDITY_DESCRIPTION', + Integrate0xInstant = 'INTEGRATE_0X_INSTANT', + Integrate0xInstantDescription = 'INTEGRATE_0X_INSTANT_DESCRIPTION', ViewAllDocumentation = 'VIEW_ALL_DOCUMENTATION', Sandbox = 'SANDBOX', Github = 'GITHUB', |