From c8b2a975f47bdacd1cc255c92ffbe3906b36e7be Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 13 Nov 2018 14:30:27 -0800 Subject: feat: change install wallet panel content based on browser and os --- .../src/components/coinbase_wallet_logo.tsx | 34 ++++++ .../components/install_wallet_panel_content.tsx | 124 +++++++++++++++++---- packages/instant/src/components/meta_mask_logo.tsx | 2 + .../src/components/standard_panel_content.tsx | 14 ++- packages/instant/src/constants.ts | 5 + packages/instant/src/style/theme.ts | 2 + packages/instant/src/types.ts | 19 ++++ packages/instant/src/util/env.ts | 42 +++++++ 8 files changed, 214 insertions(+), 28 deletions(-) create mode 100644 packages/instant/src/components/coinbase_wallet_logo.tsx create mode 100644 packages/instant/src/util/env.ts diff --git a/packages/instant/src/components/coinbase_wallet_logo.tsx b/packages/instant/src/components/coinbase_wallet_logo.tsx new file mode 100644 index 000000000..1fe8df807 --- /dev/null +++ b/packages/instant/src/components/coinbase_wallet_logo.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; + +export interface CoinbaseWalletLogoProps { + width?: number; + height?: number; +} + +export const CoinbaseWalletLogo: React.StatelessComponent = ({ width, height }) => ( + + + + + +); + +CoinbaseWalletLogo.displayName = 'CoinbaseWalletLogo'; + +CoinbaseWalletLogo.defaultProps = { + width: 164, + height: 28, +}; diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx index 546874212..6cddb81f5 100644 --- a/packages/instant/src/components/install_wallet_panel_content.tsx +++ b/packages/instant/src/components/install_wallet_panel_content.tsx @@ -1,32 +1,112 @@ import * as React from 'react'; -import { META_MASK_CHROME_STORE_URL, META_MASK_SITE_URL } from '../constants'; +import { + COINBASE_WALLET_ANDROID_APP_STORE_URL, + COINBASE_WALLET_IOS_APP_STORE_URL, + COINBASE_WALLET_SITE_URL, + META_MASK_CHROME_STORE_URL, + META_MASK_FIREFOX_STORE_URL, + META_MASK_OPERA_STORE_URL, + META_MASK_SITE_URL, +} from '../constants'; import { ColorOption } from '../style/theme'; +import { Browser, OperatingSystem } from '../types'; +import { envUtil } from '../util/env'; +import { CoinbaseWalletLogo } from './coinbase_wallet_logo'; import { MetaMaskLogo } from './meta_mask_logo'; -import { StandardPanelContent } from './standard_panel_content'; +import { StandardPanelContent, StandardPanelContentProps } from './standard_panel_content'; import { Button } from './ui/button'; export interface InstallWalletPanelContentProps {} -export const InstallWalletPanelContent: React.StatelessComponent = () => ( - } - title="Install MetaMask" - description="Please install the MetaMask wallet extension from the Chrome Store." - moreInfoSettings={{ - href: META_MASK_SITE_URL, - text: 'What is MetaMask?', - }} - action={ - +export class InstallWalletPanelContent extends React.Component { + public render(): React.ReactNode { + const panelProps = this._getStandardPanelContentProps(); + return ; + } + private readonly _getStandardPanelContentProps = (): StandardPanelContentProps => { + const isMobileOS = envUtil.isMobileOperatingSystem(); + const browser = envUtil.getBrowser(); + const operatingSystem = envUtil.getOperatingSystem(); + if (isMobileOS) { + let description = 'Please install the Coinbase Wallet app.'; + let actionText = 'Learn More'; + let actionUrl = COINBASE_WALLET_SITE_URL; + switch (operatingSystem) { + case OperatingSystem.Android: + description = 'Please install the Coinbase Wallet app from the Google Play Store.'; + actionText = 'Get Coinbase Wallet'; + actionUrl = COINBASE_WALLET_ANDROID_APP_STORE_URL; + break; + case OperatingSystem.iOS: + description = 'Please install the Coinbase Wallet app from the iOS App Store.'; + actionText = 'Get Coinbase Wallet'; + actionUrl = COINBASE_WALLET_IOS_APP_STORE_URL; + break; + default: + break; + } + return { + image: , + description, + moreInfoSettings: { + href: COINBASE_WALLET_SITE_URL, + text: 'What is Coinbase Wallet?', + }, + action: ( + + ), + }; + } else { + let description = 'Please install the MetaMask wallet browser extension.'; + let actionText = 'Learn More'; + let actionUrl = META_MASK_SITE_URL; + switch (browser) { + case Browser.Chrome: + description = 'Please install the MetaMask wallet browser extension from the Chrome Store.'; + actionText = 'Get Chrome Extension'; + actionUrl = META_MASK_CHROME_STORE_URL; + break; + case Browser.Firefox: + description = 'Please install the MetaMask wallet browser extension from the Firefox Store.'; + actionText = 'Get Firefox Extension'; + actionUrl = META_MASK_FIREFOX_STORE_URL; + break; + case Browser.Opera: + description = 'Please install the MetaMask wallet browser extension from the Opera Store.'; + actionText = 'Get Opera Add-on'; + actionUrl = META_MASK_OPERA_STORE_URL; + break; + default: + break; + } + return { + image: , + title: 'Install MetaMask', + description, + moreInfoSettings: { + href: META_MASK_SITE_URL, + text: 'What is MetaMask?', + }, + action: ( + + ), + }; } - /> -); + }; +} diff --git a/packages/instant/src/components/meta_mask_logo.tsx b/packages/instant/src/components/meta_mask_logo.tsx index d1ad10c23..bfbc67270 100644 --- a/packages/instant/src/components/meta_mask_logo.tsx +++ b/packages/instant/src/components/meta_mask_logo.tsx @@ -72,6 +72,8 @@ export const MetaMaskLogo: React.StatelessComponent = ({ widt ); +MetaMaskLogo.displayName = 'MetaMaskLogo'; + MetaMaskLogo.defaultProps = { width: 85, height: 80, diff --git a/packages/instant/src/components/standard_panel_content.tsx b/packages/instant/src/components/standard_panel_content.tsx index 89e4da70c..582b3318e 100644 --- a/packages/instant/src/components/standard_panel_content.tsx +++ b/packages/instant/src/components/standard_panel_content.tsx @@ -13,7 +13,7 @@ export interface MoreInfoSettings { export interface StandardPanelContentProps { image: React.ReactNode; - title: string; + title?: string; description: string; moreInfoSettings?: MoreInfoSettings; action: React.ReactNode; @@ -31,11 +31,13 @@ export const StandardPanelContent: React.StatelessComponent {image} - - - {title} - - + {title && ( + + + {title} + + + )} {description} diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index 2bf7849ec..8170ae354 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -19,8 +19,13 @@ export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info'; export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2'; export const PROGRESS_STALL_AT_WIDTH = '95%'; export const PROGRESS_FINISH_ANIMATION_TIME_MS = 200; +export const COINBASE_WALLET_IOS_APP_STORE_URL = 'https://itunes.apple.com/us/app/coinbase-wallet/id1278383455?mt=8'; +export const COINBASE_WALLET_ANDROID_APP_STORE_URL = 'https://play.google.com/store/apps/details?id=org.toshi&hl=en'; +export const COINBASE_WALLET_SITE_URL = 'https://wallet.coinbase.com/'; +export const META_MASK_FIREFOX_STORE_URL = 'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/'; export const META_MASK_CHROME_STORE_URL = 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en'; +export const META_MASK_OPERA_STORE_URL = 'https://addons.opera.com/en/extensions/details/metamask/'; export const META_MASK_SITE_URL = 'https://metamask.io/'; export const ETHEREUM_NODE_URL_BY_NETWORK = { [Network.Mainnet]: 'https://mainnet.infura.io/', diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts index 1e9f55e00..489f11dc3 100644 --- a/packages/instant/src/style/theme.ts +++ b/packages/instant/src/style/theme.ts @@ -17,6 +17,7 @@ export enum ColorOption { darkOrange = 'darkOrange', green = 'green', red = 'red', + blue = 'blue', } export const theme: Theme = { @@ -32,6 +33,7 @@ export const theme: Theme = { darkOrange: '#F2994C', green: '#3CB34F', red: '#D00000', + blue: '#135df6', }; export const transparentWhite = 'rgba(255,255,255,0.3)'; diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index b6f449f38..e2ba9238a 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -137,3 +137,22 @@ export interface StandardSlidingPanelSettings { animationState: SlideAnimationState; content: StandardSlidingPanelContent; } + +export enum Browser { + Chrome = 'Chrome', + Firefox = 'Firefox', + Opera = 'Opera', + Safari = 'Safari', + Edge = 'Edge', + Other = 'Other', +} + +export enum OperatingSystem { + Android = 'Android', + iOS = 'iOS', + Mac = 'Mac', + Windows = 'Windows', + WindowsPhone = 'WindowsPhone', + Linux = 'Linux', + Other = 'Other', +} diff --git a/packages/instant/src/util/env.ts b/packages/instant/src/util/env.ts new file mode 100644 index 000000000..038ec6c88 --- /dev/null +++ b/packages/instant/src/util/env.ts @@ -0,0 +1,42 @@ +import * as bowser from 'bowser'; + +import { Browser, OperatingSystem } from '../types'; + +export const envUtil = { + getBrowser(): Browser { + if (bowser.chrome) { + return Browser.Chrome; + } else if (bowser.firefox) { + return Browser.Firefox; + } else if (bowser.opera) { + return Browser.Opera; + } else if (bowser.msedge) { + return Browser.Edge; + } else if (bowser.safari) { + return Browser.Safari; + } else { + return Browser.Other; + } + }, + isMobileOperatingSystem(): boolean { + return true; + }, + getOperatingSystem(): OperatingSystem { + return OperatingSystem.iOS; + // if (bowser.android) { + // return OperatingSystem.Android; + // } else if (bowser.ios) { + // return OperatingSystem.iOS; + // } else if (bowser.mac) { + // return OperatingSystem.Mac; + // } else if (bowser.windows) { + // return OperatingSystem.Windows; + // } else if (bowser.windowsphone) { + // return OperatingSystem.WindowsPhone; + // } else if (bowser.linux) { + // return OperatingSystem.Linux; + // } else { + // return OperatingSystem.Other; + // } + }, +}; -- cgit From 35bfd493e87b5d6c76f5bb2176b0992891a4a555 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 13 Nov 2018 17:07:38 -0800 Subject: feat: display the correct provider type and change unlock / install prompt content --- packages/instant/package.json | 1 + .../src/components/coinbase_wallet_logo.tsx | 6 +-- .../components/install_wallet_panel_content.tsx | 2 +- packages/instant/src/components/payment_method.tsx | 43 ++++----------- packages/instant/src/components/wallet_prompt.tsx | 32 ++++++++++++ .../containers/connected_account_payment_method.ts | 1 + packages/instant/src/types.ts | 9 ++++ packages/instant/src/util/env.ts | 61 +++++++++++++++------- .../instant/src/util/provider_state_factory.ts | 4 ++ yarn.lock | 45 +++------------- 10 files changed, 110 insertions(+), 94 deletions(-) create mode 100644 packages/instant/src/components/wallet_prompt.tsx diff --git a/packages/instant/package.json b/packages/instant/package.json index f71fe45ef..aa9157bcc 100644 --- a/packages/instant/package.json +++ b/packages/instant/package.json @@ -54,6 +54,7 @@ "@0x/typescript-typings": "^3.0.4", "@0x/utils": "^2.0.4", "@0x/web3-wrapper": "^3.1.3", + "bowser": "^2.0.0-beta.3", "copy-to-clipboard": "^3.0.8", "ethereum-types": "^1.1.2", "lodash": "^4.17.10", diff --git a/packages/instant/src/components/coinbase_wallet_logo.tsx b/packages/instant/src/components/coinbase_wallet_logo.tsx index 1fe8df807..f5a7be81c 100644 --- a/packages/instant/src/components/coinbase_wallet_logo.tsx +++ b/packages/instant/src/components/coinbase_wallet_logo.tsx @@ -2,11 +2,10 @@ import * as React from 'react'; export interface CoinbaseWalletLogoProps { width?: number; - height?: number; } -export const CoinbaseWalletLogo: React.StatelessComponent = ({ width, height }) => ( - +export const CoinbaseWalletLogo: React.StatelessComponent = ({ width }) => ( + , + image: , description, moreInfoSettings: { href: COINBASE_WALLET_SITE_URL, diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 49ec22164..0f9f3ebfa 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -3,7 +3,9 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; import { Account, AccountState, Network } from '../types'; +import { envUtil } from '../util/env'; +import { CoinbaseWalletLogo } from './coinbase_wallet_logo'; import { MetaMaskLogo } from './meta_mask_logo'; import { PaymentMethodDropdown } from './payment_method_dropdown'; import { Circle } from './ui/circle'; @@ -11,10 +13,12 @@ import { Container } from './ui/container'; import { Flex } from './ui/flex'; import { Icon } from './ui/icon'; import { Text } from './ui/text'; +import { WalletPrompt } from './wallet_prompt'; export interface PaymentMethodProps { account: Account; network: Network; + walletName: string; onInstallWalletClick: () => void; onUnlockWalletClick: () => void; } @@ -62,7 +66,7 @@ export class PaymentMethod extends React.Component { - MetaMask + {this.props.walletName} @@ -72,6 +76,9 @@ export class PaymentMethod extends React.Component { }; private readonly _renderMainContent = (): React.ReactNode => { const { account, network } = this.props; + const isMobile = envUtil.isMobileOperatingSystem(); + // TODO: Use Toshi logo + const logo = isMobile ? undefined : ; switch (account.state) { case AccountState.Loading: // Just take up the same amount of space as the other states. @@ -82,16 +89,13 @@ export class PaymentMethod extends React.Component { onClick={this.props.onUnlockWalletClick} image={} > - Please Unlock MetaMask + Please Unlock {this.props.walletName} ); case AccountState.None: return ( - } - > - Install MetaMask + + {isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'} ); case AccountState.Ready: @@ -105,28 +109,3 @@ export class PaymentMethod extends React.Component { } }; } - -interface WalletPromptProps { - image: React.ReactNode; - onClick?: () => void; -} - -const WalletPrompt: React.StatelessComponent = ({ onClick, image, children }) => ( - - - {image} - - {children} - - - -); diff --git a/packages/instant/src/components/wallet_prompt.tsx b/packages/instant/src/components/wallet_prompt.tsx new file mode 100644 index 000000000..cd0a7828b --- /dev/null +++ b/packages/instant/src/components/wallet_prompt.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Container } from './ui/container'; +import { Flex } from './ui/flex'; +import { Text } from './ui/text'; + +export interface WalletPromptProps { + image: React.ReactNode; + onClick?: () => void; +} + +export const WalletPrompt: React.StatelessComponent = ({ onClick, image, children }) => ( + + + {image} + + {children} + + + +); diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts index 65b3710a6..69c2ddf19 100644 --- a/packages/instant/src/containers/connected_account_payment_method.ts +++ b/packages/instant/src/containers/connected_account_payment_method.ts @@ -47,6 +47,7 @@ const mergeProps = ( network: connectedState.network, account: connectedState.providerState.account, onInstallWalletClick: connectedDispatch.onInstallWalletClick, + walletName: connectedState.providerState.name, onUnlockWalletClick: () => { connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState); }, diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index e2ba9238a..cbb1e2caf 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -95,6 +95,7 @@ export interface AffiliateInfo { } export interface ProviderState { + name: string; provider: Provider; assetBuyer: AssetBuyer; web3Wrapper: Web3Wrapper; @@ -156,3 +157,11 @@ export enum OperatingSystem { Linux = 'Linux', Other = 'Other', } + +export enum ProviderType { + Parity = 'Parity', + MetaMask = 'MetaMask', + Mist = 'Mist', + CoinbaseWallet = 'Coinbase Wallet', + Cipher = 'Cipher', +} diff --git a/packages/instant/src/util/env.ts b/packages/instant/src/util/env.ts index 038ec6c88..448ad5262 100644 --- a/packages/instant/src/util/env.ts +++ b/packages/instant/src/util/env.ts @@ -1,6 +1,8 @@ import * as bowser from 'bowser'; +import { Provider } from 'ethereum-types'; +import * as _ from 'lodash'; -import { Browser, OperatingSystem } from '../types'; +import { Browser, OperatingSystem, ProviderType } from '../types'; export const envUtil = { getBrowser(): Browser { @@ -19,24 +21,47 @@ export const envUtil = { } }, isMobileOperatingSystem(): boolean { - return true; + return bowser.mobile; }, getOperatingSystem(): OperatingSystem { - return OperatingSystem.iOS; - // if (bowser.android) { - // return OperatingSystem.Android; - // } else if (bowser.ios) { - // return OperatingSystem.iOS; - // } else if (bowser.mac) { - // return OperatingSystem.Mac; - // } else if (bowser.windows) { - // return OperatingSystem.Windows; - // } else if (bowser.windowsphone) { - // return OperatingSystem.WindowsPhone; - // } else if (bowser.linux) { - // return OperatingSystem.Linux; - // } else { - // return OperatingSystem.Other; - // } + if (bowser.android) { + return OperatingSystem.Android; + } else if (bowser.ios) { + return OperatingSystem.iOS; + } else if (bowser.mac) { + return OperatingSystem.Mac; + } else if (bowser.windows) { + return OperatingSystem.Windows; + } else if (bowser.windowsphone) { + return OperatingSystem.WindowsPhone; + } else if (bowser.linux) { + return OperatingSystem.Linux; + } else { + return OperatingSystem.Other; + } + }, + getProviderName(provider: Provider): ProviderType | string { + const constructorName = provider.constructor.name; + let parsedProviderName = constructorName; + // https://ethereum.stackexchange.com/questions/24266/elegant-way-to-detect-current-provider-int-web3-js + switch (constructorName) { + case 'EthereumProvider': + parsedProviderName = ProviderType.Mist; + break; + + default: + parsedProviderName = constructorName; + break; + } + if ((provider as any).isParity) { + parsedProviderName = ProviderType.Parity; + } else if ((provider as any).isMetaMask) { + parsedProviderName = ProviderType.MetaMask; + } else if (!_.isUndefined(_.get(window, 'SOFA'))) { + parsedProviderName = ProviderType.CoinbaseWallet; + } else if (!_.isUndefined(_.get(window, '__CIPHER__'))) { + parsedProviderName = ProviderType.Cipher; + } + return parsedProviderName; }, }; diff --git a/packages/instant/src/util/provider_state_factory.ts b/packages/instant/src/util/provider_state_factory.ts index 3281f6bfb..452a71460 100644 --- a/packages/instant/src/util/provider_state_factory.ts +++ b/packages/instant/src/util/provider_state_factory.ts @@ -4,6 +4,7 @@ import * as _ from 'lodash'; import { LOADING_ACCOUNT, NO_ACCOUNT } from '../constants'; import { Maybe, Network, OrderSource, ProviderState } from '../types'; +import { envUtil } from '../util/env'; import { assetBuyerFactory } from './asset_buyer_factory'; import { providerFactory } from './provider_factory'; @@ -29,6 +30,7 @@ export const providerStateFactory = { provider: Provider, ): ProviderState => { const providerState: ProviderState = { + name: envUtil.getProviderName(provider), provider, web3Wrapper: new Web3Wrapper(provider), assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network), @@ -40,6 +42,7 @@ export const providerStateFactory = { const injectedProviderIfExists = providerFactory.getInjectedProviderIfExists(); if (!_.isUndefined(injectedProviderIfExists)) { const providerState: ProviderState = { + name: envUtil.getProviderName(injectedProviderIfExists), provider: injectedProviderIfExists, web3Wrapper: new Web3Wrapper(injectedProviderIfExists), assetBuyer: assetBuyerFactory.getAssetBuyer(injectedProviderIfExists, orderSource, network), @@ -53,6 +56,7 @@ export const providerStateFactory = { getInitialProviderStateFallback: (orderSource: OrderSource, network: Network): ProviderState => { const provider = providerFactory.getFallbackNoSigningProvider(network); const providerState: ProviderState = { + name: envUtil.getProviderName(provider), provider, web3Wrapper: new Web3Wrapper(provider), assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network), diff --git a/yarn.lock b/yarn.lock index 928326e00..2a44c7c80 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1906,10 +1906,6 @@ aes-js@^0.2.3: version "0.2.4" resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-0.2.4.tgz#94b881ab717286d015fa219e08fb66709dda5a3d" -aes-js@^3.1.1: - version "3.1.2" - resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.1.2.tgz#db9aabde85d5caabbfc0d4f2a4446960f627146a" - agent-base@4, agent-base@^4.1.0, agent-base@~4.2.0: version "4.2.1" resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9" @@ -3201,6 +3197,10 @@ bowser@^1.7.3, bowser@^1.9.3: version "1.9.3" resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.3.tgz#6643ae4d783f31683f6d23156976b74183862162" +bowser@^2.0.0-beta.3: + version "2.0.0-beta.3" + resolved "https://registry.npmjs.org/bowser/-/bowser-2.0.0-beta.3.tgz#1b74d4fd69199aa237bc0f1f4c5e80df711635d8" + boxen@^1.2.1: version "1.3.0" resolved "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b" @@ -3347,7 +3347,7 @@ bs-logger@0.x: dependencies: fast-json-stable-stringify "^2.0.0" -bs58@=4.0.1, bs58@^4.0.0: +bs58@=4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a" dependencies: @@ -3370,14 +3370,6 @@ bs58check@^1.0.8: bs58 "^3.1.0" create-hash "^1.1.0" -bs58check@^2.1.2: - version "2.1.2" - resolved "https://registry.yarnpkg.com/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc" - dependencies: - bs58 "^4.0.0" - create-hash "^1.1.0" - safe-buffer "^5.1.2" - bser@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719" @@ -5965,19 +5957,6 @@ ethereumjs-wallet@0.6.0: utf8 "^2.1.1" uuid "^2.0.1" -ethereumjs-wallet@~0.6.0: - version "0.6.2" - resolved "https://registry.yarnpkg.com/ethereumjs-wallet/-/ethereumjs-wallet-0.6.2.tgz#67244b6af3e8113b53d709124b25477b64aeccda" - dependencies: - aes-js "^3.1.1" - bs58check "^2.1.2" - ethereumjs-util "^5.2.0" - hdkey "^1.0.0" - safe-buffer "^5.1.2" - scrypt.js "^0.2.0" - utf8 "^3.0.0" - uuid "^3.3.2" - ethers@~4.0.4: version "4.0.4" resolved "https://registry.yarnpkg.com/ethers/-/ethers-4.0.4.tgz#d3f85e8b27f4b59537e06526439b0fb15b44dc65" @@ -6786,7 +6765,7 @@ ganache-core@0xProject/ganache-core#monorepo-dep: ethereumjs-tx "0xProject/ethereumjs-tx#fake-tx-include-signature-by-default" ethereumjs-util "^5.2.0" ethereumjs-vm "2.3.5" - ethereumjs-wallet "0.6.0" + ethereumjs-wallet "~0.6.0" fake-merkle-patricia-tree "~1.0.1" heap "~0.2.6" js-scrypt "^0.2.0" @@ -7511,14 +7490,6 @@ hdkey@^0.7.0, hdkey@^0.7.1: coinstring "^2.0.0" secp256k1 "^3.0.1" -hdkey@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/hdkey/-/hdkey-1.1.0.tgz#e74e7b01d2c47f797fa65d1d839adb7a44639f29" - dependencies: - coinstring "^2.0.0" - safe-buffer "^5.1.1" - secp256k1 "^3.0.1" - he@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" @@ -15605,10 +15576,6 @@ utf8@^2.1.1: version "2.1.2" resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.2.tgz#1fa0d9270e9be850d9b05027f63519bf46457d96" -utf8@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1" - util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" -- cgit From d19c8ae9b1469ae4f3bd5b4cb76c3ad679e9d641 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 13 Nov 2018 17:46:58 -0800 Subject: feat: add coinbase wallet app logo to wallet prompt --- packages/instant/src/components/coinbase_wallet_logo.tsx | 16 ++++++++++++++++ packages/instant/src/components/payment_method.tsx | 5 ++--- packages/instant/src/components/wallet_prompt.tsx | 10 ++++++---- 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/packages/instant/src/components/coinbase_wallet_logo.tsx b/packages/instant/src/components/coinbase_wallet_logo.tsx index f5a7be81c..f3c9ccdc2 100644 --- a/packages/instant/src/components/coinbase_wallet_logo.tsx +++ b/packages/instant/src/components/coinbase_wallet_logo.tsx @@ -30,3 +30,19 @@ CoinbaseWalletLogo.displayName = 'CoinbaseWalletLogo'; CoinbaseWalletLogo.defaultProps = { width: 164, }; + +export interface CoinbaseWalletAppLogoProps { + width?: number; +} + +export const CoinbaseWalletAppLogo: React.StatelessComponent = ({ width }) => ( + + + + +); diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 0f9f3ebfa..02c2b12bf 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -5,7 +5,7 @@ import { ColorOption } from '../style/theme'; import { Account, AccountState, Network } from '../types'; import { envUtil } from '../util/env'; -import { CoinbaseWalletLogo } from './coinbase_wallet_logo'; +import { CoinbaseWalletAppLogo, CoinbaseWalletLogo } from './coinbase_wallet_logo'; import { MetaMaskLogo } from './meta_mask_logo'; import { PaymentMethodDropdown } from './payment_method_dropdown'; import { Circle } from './ui/circle'; @@ -77,8 +77,7 @@ export class PaymentMethod extends React.Component { private readonly _renderMainContent = (): React.ReactNode => { const { account, network } = this.props; const isMobile = envUtil.isMobileOperatingSystem(); - // TODO: Use Toshi logo - const logo = isMobile ? undefined : ; + const logo = isMobile ? : ; switch (account.state) { case AccountState.Loading: // Just take up the same amount of space as the other states. diff --git a/packages/instant/src/components/wallet_prompt.tsx b/packages/instant/src/components/wallet_prompt.tsx index cd0a7828b..bcf66ee81 100644 --- a/packages/instant/src/components/wallet_prompt.tsx +++ b/packages/instant/src/components/wallet_prompt.tsx @@ -23,10 +23,12 @@ export const WalletPrompt: React.StatelessComponent = ({ onCl boxShadowOnHover={!!onClick} > - {image} - - {children} - + {image} + + + {children} + + ); -- cgit From fe1746c7ac90efada77cb204414d2fca377f8a65 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 13 Nov 2018 17:50:15 -0800 Subject: chore: remove unused import --- packages/instant/src/components/payment_method.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 02c2b12bf..0897045ce 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -5,7 +5,7 @@ import { ColorOption } from '../style/theme'; import { Account, AccountState, Network } from '../types'; import { envUtil } from '../util/env'; -import { CoinbaseWalletAppLogo, CoinbaseWalletLogo } from './coinbase_wallet_logo'; +import { CoinbaseWalletAppLogo } from './coinbase_wallet_logo'; import { MetaMaskLogo } from './meta_mask_logo'; import { PaymentMethodDropdown } from './payment_method_dropdown'; import { Circle } from './ui/circle'; -- cgit From 1a1caa1ca21f3e86985bb18be233c3efcade52d1 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 13 Nov 2018 18:04:44 -0800 Subject: feat: center title label with circle --- packages/instant/src/components/payment_method.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx index 0897045ce..f9d02ec5b 100644 --- a/packages/instant/src/components/payment_method.tsx +++ b/packages/instant/src/components/payment_method.tsx @@ -38,7 +38,7 @@ export class PaymentMethod extends React.Component { > {this._renderTitleText()} - {this._renderTitleLabel()} + {this._renderTitleLabel()} {this._renderMainContent()} @@ -62,14 +62,14 @@ export class PaymentMethod extends React.Component { if (account.state === AccountState.Ready || account.state === AccountState.Locked) { const circleColor: ColorOption = account.state === AccountState.Ready ? ColorOption.green : ColorOption.red; return ( - + {this.props.walletName} - + ); } return null; -- cgit From 921ef90a14003ff72f8a11d00519806251e85778 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 13 Nov 2018 19:34:34 -0800 Subject: feat: dont show payment dropdown content on mobile --- packages/instant/src/components/payment_method_dropdown.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/instant/src/components/payment_method_dropdown.tsx b/packages/instant/src/components/payment_method_dropdown.tsx index 58f1cc044..b330dbcd6 100644 --- a/packages/instant/src/components/payment_method_dropdown.tsx +++ b/packages/instant/src/components/payment_method_dropdown.tsx @@ -3,6 +3,7 @@ import copy from 'copy-to-clipboard'; import * as React from 'react'; import { Network } from '../types'; +import { envUtil } from '../util/env'; import { etherscanUtil } from '../util/etherscan'; import { format } from '../util/format'; @@ -22,6 +23,9 @@ export class PaymentMethodDropdown extends React.Component; } private readonly _getDropdownItemConfigs = (): DropdownItemConfig[] => { + if (envUtil.isMobileOperatingSystem()) { + return []; + } const viewOnEtherscan = { text: 'View on Etherscan', onClick: this._handleEtherscanClick, -- cgit From 15105cde0f69bd6faaa0d35a32797f77b7b163b5 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 13 Nov 2018 19:44:31 -0800 Subject: refactor: move wallet panel content os switching logic into two methods --- .../components/install_wallet_panel_content.tsx | 157 +++++++++++---------- 1 file changed, 79 insertions(+), 78 deletions(-) diff --git a/packages/instant/src/components/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx index 0700e9051..5cba8d996 100644 --- a/packages/instant/src/components/install_wallet_panel_content.tsx +++ b/packages/instant/src/components/install_wallet_panel_content.tsx @@ -27,86 +27,87 @@ export class InstallWalletPanelContent extends React.Component { const isMobileOS = envUtil.isMobileOperatingSystem(); - const browser = envUtil.getBrowser(); - const operatingSystem = envUtil.getOperatingSystem(); if (isMobileOS) { - let description = 'Please install the Coinbase Wallet app.'; - let actionText = 'Learn More'; - let actionUrl = COINBASE_WALLET_SITE_URL; - switch (operatingSystem) { - case OperatingSystem.Android: - description = 'Please install the Coinbase Wallet app from the Google Play Store.'; - actionText = 'Get Coinbase Wallet'; - actionUrl = COINBASE_WALLET_ANDROID_APP_STORE_URL; - break; - case OperatingSystem.iOS: - description = 'Please install the Coinbase Wallet app from the iOS App Store.'; - actionText = 'Get Coinbase Wallet'; - actionUrl = COINBASE_WALLET_IOS_APP_STORE_URL; - break; - default: - break; - } - return { - image: , - description, - moreInfoSettings: { - href: COINBASE_WALLET_SITE_URL, - text: 'What is Coinbase Wallet?', - }, - action: ( - - ), - }; + return this._getMobilePanelContentProps(); } else { - let description = 'Please install the MetaMask wallet browser extension.'; - let actionText = 'Learn More'; - let actionUrl = META_MASK_SITE_URL; - switch (browser) { - case Browser.Chrome: - description = 'Please install the MetaMask wallet browser extension from the Chrome Store.'; - actionText = 'Get Chrome Extension'; - actionUrl = META_MASK_CHROME_STORE_URL; - break; - case Browser.Firefox: - description = 'Please install the MetaMask wallet browser extension from the Firefox Store.'; - actionText = 'Get Firefox Extension'; - actionUrl = META_MASK_FIREFOX_STORE_URL; - break; - case Browser.Opera: - description = 'Please install the MetaMask wallet browser extension from the Opera Store.'; - actionText = 'Get Opera Add-on'; - actionUrl = META_MASK_OPERA_STORE_URL; - break; - default: - break; - } - return { - image: , - title: 'Install MetaMask', - description, - moreInfoSettings: { - href: META_MASK_SITE_URL, - text: 'What is MetaMask?', - }, - action: ( - - ), - }; + return this._getDesktopPanelContentProps(); + } + }; + private readonly _getDesktopPanelContentProps = (): StandardPanelContentProps => { + const browser = envUtil.getBrowser(); + let description = 'Please install the MetaMask wallet browser extension.'; + let actionText = 'Learn More'; + let actionUrl = META_MASK_SITE_URL; + switch (browser) { + case Browser.Chrome: + description = 'Please install the MetaMask wallet browser extension from the Chrome Store.'; + actionText = 'Get Chrome Extension'; + actionUrl = META_MASK_CHROME_STORE_URL; + break; + case Browser.Firefox: + description = 'Please install the MetaMask wallet browser extension from the Firefox Store.'; + actionText = 'Get Firefox Extension'; + actionUrl = META_MASK_FIREFOX_STORE_URL; + break; + case Browser.Opera: + description = 'Please install the MetaMask wallet browser extension from the Opera Store.'; + actionText = 'Get Opera Add-on'; + actionUrl = META_MASK_OPERA_STORE_URL; + break; + default: + break; + } + return { + image: , + title: 'Install MetaMask', + description, + moreInfoSettings: { + href: META_MASK_SITE_URL, + text: 'What is MetaMask?', + }, + action: ( + + ), + }; + }; + private readonly _getMobilePanelContentProps = (): StandardPanelContentProps => { + const operatingSystem = envUtil.getOperatingSystem(); + let description = 'Please install the Coinbase Wallet app.'; + let actionText = 'Learn More'; + let actionUrl = COINBASE_WALLET_SITE_URL; + switch (operatingSystem) { + case OperatingSystem.Android: + description = 'Please install the Coinbase Wallet app from the Google Play Store.'; + actionText = 'Get Coinbase Wallet'; + actionUrl = COINBASE_WALLET_ANDROID_APP_STORE_URL; + break; + case OperatingSystem.iOS: + description = 'Please install the Coinbase Wallet app from the iOS App Store.'; + actionText = 'Get Coinbase Wallet'; + actionUrl = COINBASE_WALLET_IOS_APP_STORE_URL; + break; + default: + break; } + return { + image: , + description, + moreInfoSettings: { + href: COINBASE_WALLET_SITE_URL, + text: 'What is Coinbase Wallet?', + }, + action: ( + + ), + }; }; } -- cgit From 80e7e84a06319a79a757406b58df318cce3dfa08 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 13 Nov 2018 19:49:06 -0800 Subject: fix: do not remove payment dropdown when confirmation pending --- .../src/containers/connected_buy_order_progress_or_payment_method.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/instant/src/containers/connected_buy_order_progress_or_payment_method.tsx b/packages/instant/src/containers/connected_buy_order_progress_or_payment_method.tsx index 05071c8c3..cace18e7e 100644 --- a/packages/instant/src/containers/connected_buy_order_progress_or_payment_method.tsx +++ b/packages/instant/src/containers/connected_buy_order_progress_or_payment_method.tsx @@ -18,8 +18,7 @@ export const BuyOrderProgressOrPaymentMethod = (props: BuyOrderProgressOrPayment orderProcessState === OrderProcessState.Failure ) { return ; - } - if (orderProcessState === OrderProcessState.None) { + } else { return ; } return null; -- cgit From fe23bf9e51dab87ee8c8995a9d53438daff19ea0 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 14 Nov 2018 14:54:41 -0800 Subject: feat: use capital values for enums --- packages/instant/src/constants.ts | 9 ++++++++- packages/instant/src/types.ts | 36 ++++++++++++++++++------------------ packages/instant/src/util/env.ts | 36 +++++++++++++++++------------------- yarn.lock | 39 ++++++++++++++++++++++++++++++++++++++- 4 files changed, 81 insertions(+), 39 deletions(-) diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index 8170ae354..5bd2349b3 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -1,6 +1,6 @@ import { BigNumber } from '@0x/utils'; -import { AccountNotReady, AccountState, Network } from './types'; +import { AccountNotReady, AccountState, Network, ProviderType } from './types'; export const BIG_NUMBER_ZERO = new BigNumber(0); export const ETH_DECIMALS = 18; @@ -41,3 +41,10 @@ export const LOADING_ACCOUNT: AccountNotReady = { export const LOCKED_ACCOUNT: AccountNotReady = { state: AccountState.Locked, }; +export const PROVIDER_TYPE_TO_NAME: { [key in ProviderType]: string } = { + [ProviderType.Cipher]: 'Cipher', + [ProviderType.MetaMask]: 'MetaMask', + [ProviderType.Mist]: 'Mist', + [ProviderType.CoinbaseWallet]: 'Coinbase Wallet', + [ProviderType.Parity]: 'Parity', +}; diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index cbb1e2caf..67f21a396 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -140,28 +140,28 @@ export interface StandardSlidingPanelSettings { } export enum Browser { - Chrome = 'Chrome', - Firefox = 'Firefox', - Opera = 'Opera', - Safari = 'Safari', - Edge = 'Edge', - Other = 'Other', + Chrome = 'CHROME', + Firefox = 'FIREFOX', + Opera = 'OPERA', + Safari = 'SAFARI', + Edge = 'EDGE', + Other = 'OTHER', } export enum OperatingSystem { - Android = 'Android', - iOS = 'iOS', - Mac = 'Mac', - Windows = 'Windows', - WindowsPhone = 'WindowsPhone', - Linux = 'Linux', - Other = 'Other', + Android = 'ANDROID', + iOS = 'IOS', + Mac = 'MAC', + Windows = 'WINDOWS', + WindowsPhone = 'WINDOWS_PHONE', + Linux = 'LINUX', + Other = 'OTHER', } export enum ProviderType { - Parity = 'Parity', - MetaMask = 'MetaMask', - Mist = 'Mist', - CoinbaseWallet = 'Coinbase Wallet', - Cipher = 'Cipher', + Parity = 'PARITY', + MetaMask = 'META_MASK', + Mist = 'MIST', + CoinbaseWallet = 'COINBASE_WALLET', + Cipher = 'CIPHER', } diff --git a/packages/instant/src/util/env.ts b/packages/instant/src/util/env.ts index 448ad5262..4a32f9cb1 100644 --- a/packages/instant/src/util/env.ts +++ b/packages/instant/src/util/env.ts @@ -2,6 +2,7 @@ import * as bowser from 'bowser'; import { Provider } from 'ethereum-types'; import * as _ from 'lodash'; +import { PROVIDER_TYPE_TO_NAME } from '../constants'; import { Browser, OperatingSystem, ProviderType } from '../types'; export const envUtil = { @@ -40,28 +41,25 @@ export const envUtil = { return OperatingSystem.Other; } }, - getProviderName(provider: Provider): ProviderType | string { - const constructorName = provider.constructor.name; - let parsedProviderName = constructorName; - // https://ethereum.stackexchange.com/questions/24266/elegant-way-to-detect-current-provider-int-web3-js - switch (constructorName) { - case 'EthereumProvider': - parsedProviderName = ProviderType.Mist; - break; - - default: - parsedProviderName = constructorName; - break; - } - if ((provider as any).isParity) { - parsedProviderName = ProviderType.Parity; + getProviderType(provider: Provider): ProviderType | undefined { + if (provider.constructor.name === 'EthereumProvider') { + return ProviderType.Mist; + } else if ((provider as any).isParity) { + return ProviderType.Parity; } else if ((provider as any).isMetaMask) { - parsedProviderName = ProviderType.MetaMask; + return ProviderType.MetaMask; } else if (!_.isUndefined(_.get(window, 'SOFA'))) { - parsedProviderName = ProviderType.CoinbaseWallet; + return ProviderType.CoinbaseWallet; } else if (!_.isUndefined(_.get(window, '__CIPHER__'))) { - parsedProviderName = ProviderType.Cipher; + return ProviderType.Cipher; + } + return; + }, + getProviderName(provider: Provider): string { + const providerTypeIfExists = envUtil.getProviderType(provider); + if (_.isUndefined(providerTypeIfExists)) { + return provider.constructor.name; } - return parsedProviderName; + return PROVIDER_TYPE_TO_NAME[providerTypeIfExists]; }, }; diff --git a/yarn.lock b/yarn.lock index 2a44c7c80..568ba5564 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1906,6 +1906,10 @@ aes-js@^0.2.3: version "0.2.4" resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-0.2.4.tgz#94b881ab717286d015fa219e08fb66709dda5a3d" +aes-js@^3.1.1: + version "3.1.2" + resolved "https://registry.npmjs.org/aes-js/-/aes-js-3.1.2.tgz#db9aabde85d5caabbfc0d4f2a4446960f627146a" + agent-base@4, agent-base@^4.1.0, agent-base@~4.2.0: version "4.2.1" resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9" @@ -3347,7 +3351,7 @@ bs-logger@0.x: dependencies: fast-json-stable-stringify "^2.0.0" -bs58@=4.0.1: +bs58@=4.0.1, bs58@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a" dependencies: @@ -3370,6 +3374,14 @@ bs58check@^1.0.8: bs58 "^3.1.0" create-hash "^1.1.0" +bs58check@^2.1.2: + version "2.1.2" + resolved "https://registry.npmjs.org/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc" + dependencies: + bs58 "^4.0.0" + create-hash "^1.1.0" + safe-buffer "^5.1.2" + bser@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719" @@ -5957,6 +5969,19 @@ ethereumjs-wallet@0.6.0: utf8 "^2.1.1" uuid "^2.0.1" +ethereumjs-wallet@~0.6.0: + version "0.6.2" + resolved "https://registry.npmjs.org/ethereumjs-wallet/-/ethereumjs-wallet-0.6.2.tgz#67244b6af3e8113b53d709124b25477b64aeccda" + dependencies: + aes-js "^3.1.1" + bs58check "^2.1.2" + ethereumjs-util "^5.2.0" + hdkey "^1.0.0" + safe-buffer "^5.1.2" + scrypt.js "^0.2.0" + utf8 "^3.0.0" + uuid "^3.3.2" + ethers@~4.0.4: version "4.0.4" resolved "https://registry.yarnpkg.com/ethers/-/ethers-4.0.4.tgz#d3f85e8b27f4b59537e06526439b0fb15b44dc65" @@ -7490,6 +7515,14 @@ hdkey@^0.7.0, hdkey@^0.7.1: coinstring "^2.0.0" secp256k1 "^3.0.1" +hdkey@^1.0.0: + version "1.1.0" + resolved "https://registry.npmjs.org/hdkey/-/hdkey-1.1.0.tgz#e74e7b01d2c47f797fa65d1d839adb7a44639f29" + dependencies: + coinstring "^2.0.0" + safe-buffer "^5.1.1" + secp256k1 "^3.0.1" + he@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" @@ -15576,6 +15609,10 @@ utf8@^2.1.1: version "2.1.2" resolved "https://registry.yarnpkg.com/utf8/-/utf8-2.1.2.tgz#1fa0d9270e9be850d9b05027f63519bf46457d96" +utf8@^3.0.0: + version "3.0.0" + resolved "https://registry.npmjs.org/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1" + util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" -- cgit