Skip to content

Commit

Permalink
feat: add button to get extension
Browse files Browse the repository at this point in the history
  • Loading branch information
@hstove
hstove committed Aug 11, 2020
1 parent e14afcf commit f0ba354
Show file tree
Hide file tree
Showing 7 changed files with 572 additions and 8 deletions.
102 changes: 102 additions & 0 deletions packages/app/src/components/extension-button.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
import React, { FC } from 'react';
import { Box, Text, Flex, PseudoBox, ChevronIcon, BoxProps } from '@blockstack/ui';
import { PoweredBy } from '@blockstack/connect';
import { buildEnterKeyEvent } from '@blockstack/connect';
import { ChromeIcon } from '@components/icons/chrome-icon';
import { FirefoxIcon } from '@components/icons/firefox-icon';

// https://stackoverflow.com/a/13348618
const isChrome = () => {
const isChromium = window.chrome;
const winNav = window.navigator;
const vendorName = winNav.vendor;
const isOpera = typeof (window as any).opr !== 'undefined';
const isIEedge = winNav.userAgent.includes('Edge');
const isIOSChrome = /CriOS/.exec(winNav.userAgent);

if (isIOSChrome) {
return false;
} else if (
isChromium !== null &&
typeof isChromium !== 'undefined' &&
vendorName === 'Google Inc.' &&
isOpera === false &&
isIEedge === false
) {
return true;
} else {
return false;
}
};

interface Browser {
name: 'Chrome' | 'Firefox';
icon: typeof FirefoxIcon | typeof ChromeIcon;
}

const getBrowser = (): Browser | null => {
if (isChrome()) {
return {
name: 'Chrome',
icon: ChromeIcon,
};
} else if (window.navigator.userAgent.includes('Firefox')) {
return {
name: 'Firefox',
icon: FirefoxIcon,
};
}
return null;
};

export const ExtensionButton: FC<BoxProps> = ({ ...rest }) => {
const browser = getBrowser();

if (browser === null) {
return <PoweredBy />;
}

const onClick = () => {
if (browser.name === 'Firefox') {
window.open('https://addons.mozilla.org/en-US/firefox/addon/blockstack/', '_blank');
} else if (browser.name === 'Chrome') {
window.open(
'https://chrome.google.com/webstore/detail/blockstack/mdhmgoflnkccjhcfbojdagggmklgfloo',
'_blank'
);
}
};

return (
<Flex
fontSize={['12px', '14px']}
justifyContent="center"
color="ink.600"
textAlign="center"
width="100%"
my="loose"
{...rest}
>
<PseudoBox
textAlign="center"
onClick={onClick}
onKeyPress={buildEnterKeyEvent(onClick)}
textStyle="caption"
display="flex"
alignSelf="flex-end"
tabIndex={0}
_hover={{
cursor: 'pointer',
}}
>
<Box backgroundColor="blue.100" borderRadius="16px" py={2} px={4} height="32px">
<browser.icon display="inline" />
<Text style={{ position: 'relative', top: '-2px' }} color="blue">
Get the {browser.name} extension
<ChevronIcon display="inline" style={{ position: 'relative', top: '-1px' }} />
</Text>
</Box>
</PseudoBox>
</Flex>
);
};
227 changes: 227 additions & 0 deletions packages/app/src/components/icons/chrome-icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
import React from 'react';
import { Svg, BoxProps } from '@blockstack/ui';

export const ChromeIcon: React.FC<BoxProps> = props => (
<Svg {...props}>
<circle cx="9" cy="9" r="8.5" fill="#C4C4C4" stroke="white" />
<mask
id="mask0"
mask-type="alpha"
maskUnits="userSpaceOnUse"
x="1"
y="1"
width="16"
height="16"
>
<circle cx="9" cy="9" r="8" fill="#C4C4C4" />
</mask>
<g mask="url(#mask0)">
<path d="M2.27002 1V10.8182H5.85093L9.00002 5.36364H17V1H2.27002Z" fill="#DB4437" />
<path
d="M2.27002 1V10.8182H5.85093L9.00002 5.36364H17V1H2.27002Z"
fill="url(#paint0_linear)"
/>
<path
d="M5.93731 10.7863L2.3164 4.57629L2.26367 4.6672L5.85822 10.8308L5.93731 10.7863Z"
fill="#3E2723"
fill-opacity="0.15"
/>
<path d="M1 17H8.61545L12.15 13.4654V10.8182H5.85091L1 2.49817V17Z" fill="#0F9D58" />
<path
d="M1 17H8.61545L12.15 13.4654V10.8182H5.85091L1 2.49817V17Z"
fill="url(#paint1_linear)"
/>
<path
d="M12.0764 10.939L12.001 10.8954L8.51099 16.9999H8.61553L12.0792 10.9417L12.0764 10.939Z"
fill="#263238"
fill-opacity="0.15"
/>
<path d="M9.00002 5.36365L12.15 10.8182L8.61548 17H17V5.36365H9.00002Z" fill="#FFCD40" />
<path
d="M9.00002 5.36365L12.15 10.8182L8.61548 17H17V5.36365H9.00002Z"
fill="url(#paint2_linear)"
/>
<path d="M9.00002 5.36365L12.15 10.8182L8.61548 17H17V5.36365H9.00002Z" fill="#FFCD40" />
<path
d="M9.00002 5.36365L12.15 10.8182L8.61548 17H17V5.36365H9.00002Z"
fill="url(#paint3_linear)"
/>
<path d="M2.27002 1V10.8182H5.85093L9.00002 5.36364H17V1H2.27002Z" fill="#DB4437" />
<path
d="M2.27002 1V10.8182H5.85093L9.00002 5.36364H17V1H2.27002Z"
fill="url(#paint4_linear)"
/>
<path d="M9 5.36365V7.26819L16.1273 5.36365H9Z" fill="url(#paint5_radial)" />
<path
d="M0.90918 17H8.52463L10.7728 13.2727L12.0592 10.8182H5.76009L0.90918 2.49817V17Z"
fill="#0F9D58"
/>
<path
d="M1 17.0001H8.61545L10.9091 13.0001L12.15 10.8183H5.85091L1 2.49829V17.0001Z"
fill="url(#paint6_linear)"
/>
<path
d="M2.27002 4.67725L7.47457 9.88088L5.85093 10.8182L2.27002 4.67725Z"
fill="url(#paint7_radial)"
/>
<path
d="M8.62085 16.99L10.5263 9.88086L12.1499 10.8181L8.62085 16.99Z"
fill="url(#paint8_radial)"
/>
<path
d="M8.99989 12.6364C11.0082 12.6364 12.6363 11.0083 12.6363 9.00001C12.6363 6.9917 11.0082 5.36365 8.99989 5.36365C6.99158 5.36365 5.36353 6.9917 5.36353 9.00001C5.36353 11.0083 6.99158 12.6364 8.99989 12.6364Z"
fill="#F1F1F1"
/>
<path
d="M8.99967 11.9095C10.6063 11.9095 11.9088 10.607 11.9088 9.0004C11.9088 7.39375 10.6063 6.09131 8.99967 6.09131C7.39302 6.09131 6.09058 7.39375 6.09058 9.0004C6.09058 10.607 7.39302 11.9095 8.99967 11.9095Z"
fill="#4285F4"
/>
<path
d="M8.99989 5.27283C6.99171 5.27283 5.36353 6.90101 5.36353 8.90919V9.0001C5.36353 6.99192 6.99171 5.36374 8.99989 5.36374H16.9999V5.27283H8.99989Z"
fill="#3E2723"
fill-opacity="0.2"
/>
<path
d="M12.1455 10.8182C11.5164 11.9036 10.3445 12.6364 9 12.6364C7.65455 12.6364 6.48273 11.9036 5.85364 10.8182H5.85L1 2.49817V2.58908L5.85091 10.9091H5.85455C6.48364 11.9945 7.65546 12.7273 9.00091 12.7273C10.3455 12.7273 11.5173 11.9954 12.1464 10.9091H12.1509V10.8182H12.1455Z"
fill="white"
fill-opacity="0.1"
/>
<path
opacity="0.1"
d="M9.09086 5.36377C9.07541 5.36377 9.06086 5.36559 9.04541 5.3665C11.0327 5.39104 12.6363 7.00741 12.6363 9.00013C12.6363 10.9929 11.0327 12.6092 9.04541 12.6338C9.06086 12.6338 9.07541 12.6365 9.09086 12.6365C11.099 12.6365 12.7272 11.0083 12.7272 9.00013C12.7272 6.99195 11.099 5.36377 9.09086 5.36377Z"
fill="#3E2723"
/>
<path
d="M12.1818 10.9393C12.4909 10.4047 12.67 9.78654 12.67 9.12473C12.67 8.74109 12.61 8.372 12.5 8.02563C12.5864 8.33654 12.6364 8.66291 12.6364 9.00109C12.6364 9.66291 12.4573 10.2811 12.1482 10.8156L12.15 10.8193L8.61548 17.0011H8.72093L10.3637 13.9436L12.1837 10.9429L12.1818 10.9393Z"
fill="white"
fill-opacity="0.2"
/>
<path
d="M9 1.09091C13.4027 1.09091 16.9745 4.64818 16.9991 9.04545C16.9991 9.03 17 9.01546 17 9C17 4.58182 13.4182 1 9 1C4.58182 1 1 4.58182 1 9C1 9.01546 1.00091 9.03 1.00091 9.04545C1.02545 4.64818 4.59727 1.09091 9 1.09091Z"
fill="white"
fill-opacity="0.2"
/>
<path
d="M9 16.9091C13.4027 16.9091 16.9745 13.3519 16.9991 8.95459C16.9991 8.97004 17 8.98459 17 9.00004C17 13.4182 13.4182 17 9 17C4.58182 17 1 13.4182 1 9.00004C1 8.98459 1.00091 8.97004 1.00091 8.95459C1.02545 13.3519 4.59727 16.9091 9 16.9091Z"
fill="#3E2723"
fill-opacity="0.15"
/>
<path
d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z"
fill="url(#paint9_radial)"
/>
</g>
<defs>
<linearGradient
id="paint0_linear"
x1="2.93975"
y1="7.09282"
x2="7.71247"
y2="4.30491"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#A52714" stop-opacity="0.6" />
<stop offset="0.66" stop-color="#A52714" stop-opacity="0" />
</linearGradient>
<linearGradient
id="paint1_linear"
x1="10.3518"
y1="15.2273"
x2="5.04891"
y2="12.1209"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#055524" stop-opacity="0.4" />
<stop offset="0.33" stop-color="#055524" stop-opacity="0" />
</linearGradient>
<linearGradient
id="paint2_linear"
x1="11.3509"
y1="4.80037"
x2="12.6864"
y2="10.6482"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#EA6100" stop-opacity="0.3" />
<stop offset="0.66" stop-color="#EA6100" stop-opacity="0" />
</linearGradient>
<linearGradient
id="paint3_linear"
x1="11.3509"
y1="4.80037"
x2="12.6864"
y2="10.6482"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#EA6100" stop-opacity="0.3" />
<stop offset="0.66" stop-color="#EA6100" stop-opacity="0" />
</linearGradient>
<linearGradient
id="paint4_linear"
x1="2.93975"
y1="7.09282"
x2="7.71247"
y2="4.30491"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#A52714" stop-opacity="0.6" />
<stop offset="0.66" stop-color="#A52714" stop-opacity="0" />
</linearGradient>
<radialGradient
id="paint5_radial"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(8.65273 5.35892) scale(7.64345)"
>
<stop stop-color="#3E2723" stop-opacity="0.2" />
<stop offset="1" stop-color="#3E2723" stop-opacity="0" />
</radialGradient>
<linearGradient
id="paint6_linear"
x1="10.3518"
y1="15.2274"
x2="5.04891"
y2="12.121"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#055524" stop-opacity="0.4" />
<stop offset="0.33" stop-color="#055524" stop-opacity="0" />
</linearGradient>
<radialGradient
id="paint7_radial"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(2.26184 4.68361) scale(7.09491)"
>
<stop stop-color="#3E2723" stop-opacity="0.2" />
<stop offset="1" stop-color="#3E2723" stop-opacity="0" />
</radialGradient>
<radialGradient
id="paint8_radial"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(8.98539 9.0125) scale(7.98818)"
>
<stop stop-color="#263238" stop-opacity="0.2" />
<stop offset="1" stop-color="#263238" stop-opacity="0" />
</radialGradient>
<radialGradient
id="paint9_radial"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(3.38964 3.18309) scale(16.0682)"
>
<stop stop-color="white" stop-opacity="0.1" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</radialGradient>
</defs>
</Svg>
);
Loading

0 comments on commit f0ba354

Please sign in to comment.