kylefang/connect
1
0
Fork 0
mirror of https://github.com/zhigang1992/connect.git synced 2026-04-24 05:05:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add button to get extension

Browse Source
This commit is contained in:
Hank Stoever
2020-06-09 08:26:38 -07:00
parent e14afcf036
commit f0ba354522
7 changed files with 572 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
packages/app/src/components/extension-button.tsx Normal file
View File

@@ -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
packages/app/src/components/icons/chrome-icon.tsx Normal file
View File

@@ -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>
);

232
packages/app/src/components/icons/firefox-icon.tsx Normal file
View File

@@ -0,0 +1,232 @@
import React from 'react';
import { Svg, BoxProps } from '@blockstack/ui';
export const FirefoxIcon: React.FC<BoxProps> = props => (
<Svg {...props}>
<circle cx="9" cy="9.5" r="8.5" fill="white" stroke="white" />
<path
d="M16.4208 6.53533C16.0728 5.69926 15.3668 4.79655 14.8139 4.51118C15.2083 5.27362 15.4819 6.09243 15.6251 6.93851L15.6266 6.95192C14.7209 4.69771 13.1852 3.78881 11.9309 1.80964C11.8675 1.70957 11.804 1.60929 11.7422 1.50344C11.7069 1.44298 11.6786 1.38851 11.654 1.33837C11.602 1.23779 11.5619 1.1315 11.5345 1.02165C11.5346 1.01658 11.5327 1.01167 11.5294 1.00787C11.526 1.00406 11.5214 1.00162 11.5163 1.00101C11.5114 0.999662 11.5062 0.999662 11.5013 1.00101C11.5002 1.00101 11.4986 1.00287 11.4973 1.00328C11.4961 1.0037 11.4934 1.00555 11.4915 1.00638L11.4946 1.00101C9.48272 2.17712 8.80009 4.35437 8.73727 5.44341C7.9338 5.49855 7.16563 5.79415 6.53294 6.29165C6.46693 6.23583 6.39794 6.18362 6.32627 6.13525C6.14376 5.49745 6.13598 4.82245 6.30374 4.18064C5.56489 4.53799 4.90837 5.04457 4.37573 5.66831H4.37201C4.05456 5.26658 4.07688 3.94191 4.09507 3.66521C4.00116 3.70289 3.91152 3.75041 3.82764 3.80696C3.54741 4.00665 3.28543 4.23071 3.04478 4.47652C2.77055 4.75411 2.52009 5.05414 2.29602 5.37346V5.3747V5.37325C1.78105 6.10214 1.4158 6.92565 1.22134 7.79624L1.2106 7.84907C1.19551 7.91943 1.14115 8.27185 1.13185 8.3484C1.13185 8.35438 1.13061 8.35995 1.12999 8.36594C1.05988 8.72977 1.01643 9.09823 1 9.46838V9.50965C1.00176 11.512 1.75579 13.4408 3.11309 14.9149C4.47038 16.3891 6.33218 17.3012 8.33052 17.4711C10.3289 17.6411 12.3183 17.0564 13.9058 15.8326C15.4932 14.6089 16.5631 12.8352 16.904 10.862C16.9174 10.7588 16.9284 10.6567 16.9404 10.5525C17.1053 9.19112 16.9267 7.81019 16.4208 6.53533ZM7.1889 12.7951C7.22631 12.8131 7.26144 12.8325 7.29988 12.8496L7.30546 12.8531C7.26661 12.8345 7.22776 12.8152 7.1889 12.7951ZM15.6272 6.95378V6.94614L15.6286 6.9546L15.6272 6.95378Z"
fill="url(#paint0_linear)"
/>
<path
d="M16.4208 6.53538C16.0728 5.69931 15.3668 4.79659 14.8139 4.51123C15.2083 5.27366 15.4819 6.09248 15.6251 6.93856V6.94619L15.6266 6.95465C16.2439 8.7185 16.1546 10.6523 15.3773 12.352C14.4593 14.3185 12.2372 16.3342 8.75897 16.2362C5.00069 16.13 1.69089 13.3457 1.07213 9.69891C0.959493 9.12385 1.07213 8.8323 1.12875 8.36495C1.05151 8.72797 1.0084 9.0974 1 9.46843V9.5097C1.00176 11.512 1.75579 13.4409 3.11309 14.915C4.47038 16.3891 6.33218 17.3013 8.33052 17.4712C10.3289 17.6411 12.3183 17.0564 13.9058 15.8327C15.4932 14.609 16.5631 12.8352 16.904 10.862C16.9174 10.7588 16.9284 10.6567 16.9404 10.5525C17.1053 9.19116 16.9267 7.81023 16.4208 6.53538Z"
fill="url(#paint1_radial)"
/>
<path
d="M16.4208 6.53538C16.0728 5.69931 15.3668 4.79659 14.8139 4.51123C15.2083 5.27366 15.4819 6.09248 15.6251 6.93856V6.94619L15.6266 6.95465C16.2439 8.7185 16.1546 10.6523 15.3773 12.352C14.4593 14.3185 12.2372 16.3342 8.75897 16.2362C5.00069 16.13 1.69089 13.3457 1.07213 9.69891C0.959493 9.12385 1.07213 8.8323 1.12875 8.36495C1.05151 8.72797 1.0084 9.0974 1 9.46843V9.5097C1.00176 11.512 1.75579 13.4409 3.11309 14.915C4.47038 16.3891 6.33218 17.3013 8.33052 17.4712C10.3289 17.6411 12.3183 17.0564 13.9058 15.8327C15.4932 14.609 16.5631 12.8352 16.904 10.862C16.9174 10.7588 16.9284 10.6567 16.9404 10.5525C17.1053 9.19116 16.9267 7.81023 16.4208 6.53538Z"
fill="url(#paint2_radial)"
/>
<path
d="M12.5284 7.47536C12.5458 7.48753 12.5619 7.4997 12.5782 7.51188C12.377 7.15568 12.1266 6.82956 11.8342 6.54313C9.3447 4.05721 11.1818 1.15305 11.4916 1.00552L11.4947 1.00098C9.48276 2.17709 8.80013 4.35433 8.7373 5.44337C8.83072 5.43697 8.92331 5.42913 9.01879 5.42913C9.73266 5.43044 10.4335 5.62046 11.0499 5.97987C11.6664 6.33928 12.1765 6.85527 12.5284 7.47536Z"
fill="url(#paint3_radial)"
/>
<path
d="M9.0238 7.97186C9.01057 8.17077 8.30666 8.85684 8.06051 8.85684C5.78282 8.85684 5.41309 10.2325 5.41309 10.2325C5.51394 11.3908 6.32243 12.3449 7.29977 12.8496C7.34441 12.8727 7.38967 12.8936 7.43493 12.914C7.51332 12.9487 7.59172 12.9807 7.67012 13.0102C8.00553 13.1287 8.35684 13.1963 8.71235 13.2109C12.7046 13.3979 13.4779 8.44458 10.597 7.00725C11.2766 6.91896 11.9649 7.0858 12.5283 7.47542C12.1763 6.85533 11.6662 6.33935 11.0498 5.97994C10.4333 5.62052 9.7325 5.43051 9.01863 5.4292C8.92356 5.4292 8.83056 5.43704 8.73715 5.44344C7.93368 5.49858 7.16551 5.79418 6.53282 6.29168C6.65496 6.39485 6.79281 6.53268 7.08318 6.81845C7.62672 7.35307 9.0207 7.90687 9.0238 7.97186Z"
fill="url(#paint4_radial)"
/>
<path
d="M9.0238 7.97186C9.01057 8.17077 8.30666 8.85684 8.06051 8.85684C5.78282 8.85684 5.41309 10.2325 5.41309 10.2325C5.51394 11.3908 6.32243 12.3449 7.29977 12.8496C7.34441 12.8727 7.38967 12.8936 7.43493 12.914C7.51332 12.9487 7.59172 12.9807 7.67012 13.0102C8.00553 13.1287 8.35684 13.1963 8.71235 13.2109C12.7046 13.3979 13.4779 8.44458 10.597 7.00725C11.2766 6.91896 11.9649 7.0858 12.5283 7.47542C12.1763 6.85533 11.6662 6.33935 11.0498 5.97994C10.4333 5.62052 9.7325 5.43051 9.01863 5.4292C8.92356 5.4292 8.83056 5.43704 8.73715 5.44344C7.93368 5.49858 7.16551 5.79418 6.53282 6.29168C6.65496 6.39485 6.79281 6.53268 7.08318 6.81845C7.62672 7.35307 9.0207 7.90687 9.0238 7.97186Z"
fill="url(#paint5_radial)"
/>
<path
d="M6.15947 6.02571C6.22437 6.06698 6.27789 6.10288 6.32481 6.13528C6.1423 5.49748 6.13452 4.82248 6.30228 4.18066C5.56343 4.53802 4.90691 5.0446 4.37427 5.66834C4.41333 5.66731 5.57522 5.64647 6.15947 6.02571Z"
fill="url(#paint6_radial)"
/>
<path
d="M1.07304 9.69882C1.69118 13.3456 5.0016 16.1299 8.75988 16.2361C12.2381 16.3343 14.4602 14.3185 15.3782 12.3519C16.1556 10.6522 16.2449 8.71841 15.6275 6.95457V6.94693C15.6275 6.94095 15.6262 6.93744 15.6275 6.9393L15.6289 6.95271C15.9131 8.80498 14.9694 10.5995 13.4942 11.8129L13.4897 11.8232C10.6153 14.1604 7.86459 13.2333 7.30782 12.8549C7.26897 12.8364 7.23011 12.817 7.19126 12.7969C5.51538 11.9972 4.82304 10.4728 4.97143 9.16544C4.57361 9.17131 4.18263 9.06186 3.84586 8.85036C3.50908 8.63887 3.24097 8.33441 3.074 7.97386C3.51392 7.70479 4.01553 7.55267 4.53102 7.53201C5.04652 7.51135 5.55872 7.62283 6.01883 7.85584C6.96741 8.28577 8.04682 8.32813 9.02627 7.97386C9.02317 7.90886 7.62919 7.35486 7.08565 6.82045C6.79528 6.53467 6.65743 6.39705 6.53529 6.29367C6.46928 6.23785 6.40029 6.18564 6.32862 6.13727C6.28109 6.10488 6.22756 6.0698 6.16329 6.02771C5.57904 5.64846 4.41714 5.6693 4.3787 5.67034H4.37498C4.05754 5.2686 4.07986 3.94393 4.09805 3.66724C4.00414 3.70492 3.91449 3.75243 3.83062 3.80899C3.55038 4.00867 3.28841 4.23273 3.04776 4.47855C2.77255 4.75535 2.52105 5.05469 2.2959 5.37342V5.37466V5.37321C1.78093 6.1021 1.41567 6.92562 1.22122 7.79621C1.21729 7.81251 0.932709 9.05464 1.07304 9.69882Z"
fill="url(#paint7_radial)"
/>
<path
d="M11.8347 6.54317C12.1271 6.82991 12.3776 7.15638 12.5787 7.51295C12.6227 7.54617 12.6638 7.57918 12.6988 7.61116C14.5148 9.28247 13.5633 11.645 13.4924 11.8132C14.9676 10.5997 15.9104 8.80522 15.6271 6.95295C14.721 4.69771 13.1853 3.78881 11.931 1.80964C11.8675 1.70957 11.8041 1.60929 11.7423 1.50344C11.707 1.44298 11.6786 1.38851 11.6541 1.33837C11.602 1.23779 11.5619 1.1315 11.5346 1.02165C11.5346 1.01658 11.5328 1.01167 11.5294 1.00787C11.5261 1.00406 11.5215 1.00162 11.5164 1.00101C11.5115 0.999662 11.5063 0.999662 11.5013 1.00101C11.5003 1.00101 11.4986 1.00287 11.4974 1.00328C11.4962 1.0037 11.4935 1.00555 11.4916 1.00638C11.1818 1.15308 9.34474 4.05725 11.8347 6.54317Z"
fill="url(#paint8_radial)"
/>
<path
d="M12.6972 7.61013C12.6623 7.57815 12.6212 7.54513 12.5771 7.51191C12.5608 7.49974 12.5447 7.48756 12.5273 7.47539C11.9639 7.08577 11.2757 6.91893 10.596 7.00722C13.477 8.44537 12.704 13.3978 8.71141 13.2109C8.35591 13.1963 8.0046 13.1286 7.66918 13.0101C7.59078 12.9808 7.51239 12.9488 7.43399 12.914C7.38873 12.8933 7.34347 12.8727 7.29883 12.8496L7.30441 12.8531C7.86117 13.2325 10.6111 14.1596 13.4863 11.8214L13.4908 11.8111C13.5625 11.644 14.514 9.28082 12.6972 7.61013Z"
fill="url(#paint9_radial)"
/>
<path
d="M5.41333 10.2325C5.41333 10.2325 5.78307 8.85683 8.06076 8.85683C8.3069 8.85683 9.01144 8.17077 9.02404 7.97186C8.04459 8.32613 6.96518 8.28377 6.0166 7.85384C5.5565 7.62084 5.04429 7.50936 4.5288 7.53002C4.0133 7.55068 3.5117 7.70279 3.07178 7.97186C3.23874 8.33241 3.50686 8.63687 3.84363 8.84837C4.18041 9.05986 4.57139 9.16931 4.9692 9.16345C4.82082 10.471 5.51316 11.9954 7.18903 12.7949C7.22644 12.8129 7.26157 12.8323 7.30001 12.8494C6.32185 12.3449 5.51419 11.3908 5.41333 10.2325Z"
fill="url(#paint10_radial)"
/>
<path
d="M16.4208 6.53533C16.0728 5.69926 15.3668 4.79655 14.8139 4.51118C15.2083 5.27362 15.4819 6.09243 15.6251 6.93851L15.6266 6.95192C14.7209 4.69771 13.1852 3.78881 11.9309 1.80964C11.8675 1.70957 11.804 1.60929 11.7422 1.50344C11.7069 1.44298 11.6786 1.38851 11.654 1.33837C11.602 1.23779 11.5619 1.1315 11.5345 1.02165C11.5346 1.01658 11.5327 1.01167 11.5294 1.00787C11.526 1.00406 11.5214 1.00162 11.5163 1.00101C11.5114 0.999662 11.5062 0.999662 11.5013 1.00101C11.5002 1.00101 11.4986 1.00287 11.4973 1.00328C11.4961 1.0037 11.4934 1.00555 11.4915 1.00638L11.4946 1.00101C9.48272 2.17712 8.80009 4.35437 8.73727 5.44341C8.83068 5.43701 8.92327 5.42917 9.01875 5.42917C9.73262 5.43048 10.4334 5.6205 11.0499 5.97991C11.6663 6.33932 12.1765 6.8553 12.5284 7.47539C11.965 7.08577 11.2767 6.91893 10.5971 7.00722C13.478 8.44537 12.7051 13.3978 8.71247 13.2109C8.35696 13.1963 8.00565 13.1286 7.67023 13.0101C7.59184 12.9808 7.51344 12.9488 7.43505 12.914C7.38979 12.8933 7.34452 12.8727 7.29988 12.8496L7.30546 12.8531C7.26661 12.8345 7.22776 12.8152 7.1889 12.7951C7.22631 12.8131 7.26144 12.8325 7.29988 12.8496C6.32172 12.3449 5.51406 11.3908 5.4132 10.2324C5.4132 10.2324 5.78294 8.85681 8.06063 8.85681C8.30677 8.85681 9.01131 8.17074 9.02392 7.97184C9.02081 7.90684 7.62683 7.35283 7.0833 6.81842C6.79293 6.53265 6.65508 6.39502 6.53294 6.29165C6.46693 6.23583 6.39794 6.18362 6.32627 6.13525C6.14376 5.49745 6.13598 4.82245 6.30374 4.18064C5.56489 4.53799 4.90837 5.04457 4.37573 5.66831H4.37201C4.05456 5.26658 4.07688 3.94191 4.09507 3.66521C4.00116 3.70289 3.91152 3.75041 3.82764 3.80696C3.54741 4.00665 3.28543 4.23071 3.04478 4.47652C2.77055 4.75411 2.52009 5.05414 2.29602 5.37346V5.3747V5.37325C1.78105 6.10214 1.4158 6.92565 1.22134 7.79624L1.2106 7.84907C1.19551 7.91943 1.12793 8.2768 1.11821 8.35356C1.11821 8.35933 1.11821 8.34757 1.11821 8.35356C1.0564 8.72246 1.01693 9.09474 1 9.46838V9.50965C1.00176 11.512 1.75579 13.4408 3.11309 14.9149C4.47038 16.3891 6.33218 17.3012 8.33052 17.4711C10.3289 17.6411 12.3183 17.0564 13.9058 15.8326C15.4932 14.6089 16.5631 12.8352 16.904 10.862C16.9174 10.7588 16.9284 10.6567 16.9404 10.5525C17.1053 9.19112 16.9267 7.81019 16.4208 6.53533ZM15.6262 6.94614L15.6276 6.9546L15.6262 6.94614Z"
fill="url(#paint11_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="15.3606"
y1="3.55627"
x2="2.08445"
y2="16.386"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.048" stop-color="#FFF44F" />
<stop offset="0.111" stop-color="#FFE847" />
<stop offset="0.225" stop-color="#FFC830" />
<stop offset="0.368" stop-color="#FF980E" />
<stop offset="0.401" stop-color="#FF8B16" />
<stop offset="0.462" stop-color="#FF672A" />
<stop offset="0.534" stop-color="#FF3647" />
<stop offset="0.705" stop-color="#E31587" />
</linearGradient>
<radialGradient
id="paint1_radial"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(14.7462 2.83123) scale(16.6982 16.6712)"
>
<stop offset="0.129" stop-color="#FFBD4F" />
<stop offset="0.186" stop-color="#FFAC31" />
<stop offset="0.247" stop-color="#FF9D17" />
<stop offset="0.283" stop-color="#FF980E" />
<stop offset="0.403" stop-color="#FF563B" />
<stop offset="0.467" stop-color="#FF3750" />
<stop offset="0.71" stop-color="#F5156C" />
<stop offset="0.782" stop-color="#EB0878" />
<stop offset="0.86" stop-color="#E50080" />
</radialGradient>
<radialGradient
id="paint2_radial"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(8.64449 9.64693) scale(16.6982 16.6712)"
>
<stop offset="0.3" stop-color="#960E18" />
<stop offset="0.351" stop-color="#B11927" stop-opacity="0.74" />
<stop offset="0.435" stop-color="#DB293D" stop-opacity="0.343" />
<stop offset="0.497" stop-color="#F5334B" stop-opacity="0.094" />
<stop offset="0.53" stop-color="#FF3750" stop-opacity="0" />
</radialGradient>
<radialGradient
id="paint3_radial"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(10.6576 -0.952194) scale(12.0971 12.0776)"
>
<stop offset="0.132" stop-color="#FFF44F" />
<stop offset="0.252" stop-color="#FFDC3E" />
<stop offset="0.506" stop-color="#FF9D12" />
<stop offset="0.526" stop-color="#FF980E" />
</radialGradient>
<radialGradient
id="paint4_radial"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(6.79737 14.0015) scale(7.95075 7.93791)"
>
<stop offset="0.353" stop-color="#3A8EE6" />
<stop offset="0.472" stop-color="#5C79F0" />
<stop offset="0.669" stop-color="#9059FF" />
<stop offset="1" stop-color="#C139E6" />
</radialGradient>
<radialGradient
id="paint5_radial"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(9.55682 8.28064) rotate(-13.5704) scale(4.21507 4.9277)"
>
<stop offset="0.206" stop-color="#9059FF" stop-opacity="0" />
<stop offset="0.278" stop-color="#8C4FF3" stop-opacity="0.064" />
<stop offset="0.747" stop-color="#7716A8" stop-opacity="0.45" />
<stop offset="0.975" stop-color="#6E008B" stop-opacity="0.6" />
</radialGradient>
<radialGradient
id="paint6_radial"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(8.43366 2.14913) scale(5.71976 5.71053)"
>
<stop stop-color="#FFE226" />
<stop offset="0.121" stop-color="#FFDB27" />
<stop offset="0.295" stop-color="#FFC82A" />
<stop offset="0.502" stop-color="#FFA930" />
<stop offset="0.732" stop-color="#FF7E37" />
<stop offset="0.792" stop-color="#FF7139" />
</radialGradient>
<radialGradient
id="paint7_radial"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(12.9294 -1.47307) scale(24.4037 24.3642)"
>
<stop offset="0.113" stop-color="#FFF44F" />
<stop offset="0.456" stop-color="#FF980E" />
<stop offset="0.622" stop-color="#FF5634" />
<stop offset="0.716" stop-color="#FF3647" />
<stop offset="0.904" stop-color="#E31587" />
</radialGradient>
<radialGradient
id="paint8_radial"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(10.8728 -0.118248) rotate(83.9663) scale(17.8575 11.7382)"
>
<stop stop-color="#FFF44F" />
<stop offset="0.06" stop-color="#FFE847" />
<stop offset="0.168" stop-color="#FFC830" />
<stop offset="0.304" stop-color="#FF980E" />
<stop offset="0.356" stop-color="#FF8B16" />
<stop offset="0.455" stop-color="#FF672A" />
<stop offset="0.57" stop-color="#FF3647" />
<stop offset="0.737" stop-color="#E31587" />
</radialGradient>
<radialGradient
id="paint9_radial"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(8.29873 4.26424) scale(15.2356 15.211)"
>
<stop offset="0.137" stop-color="#FFF44F" />
<stop offset="0.48" stop-color="#FF980E" />
<stop offset="0.592" stop-color="#FF5634" />
<stop offset="0.655" stop-color="#FF3647" />
<stop offset="0.904" stop-color="#E31587" />
</radialGradient>
<radialGradient
id="paint10_radial"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(12.3208 5.1545) scale(16.6753 16.6483)"
>
<stop offset="0.094" stop-color="#FFF44F" />
<stop offset="0.231" stop-color="#FFE141" />
<stop offset="0.509" stop-color="#FFAF1E" />
<stop offset="0.626" stop-color="#FF980E" />
</radialGradient>
<linearGradient
id="paint11_linear"
x1="15.2008"
y1="3.48776"
x2="3.90483"
y2="14.8018"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.167" stop-color="#FFF44F" stop-opacity="0.8" />
<stop offset="0.266" stop-color="#FFF44F" stop-opacity="0.634" />
<stop offset="0.489" stop-color="#FFF44F" stop-opacity="0.217" />
<stop offset="0.6" stop-color="#FFF44F" stop-opacity="0" />
</linearGradient>
</defs>
</Svg>
);

5
packages/app/src/pages/connect/choose-account.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { PoweredBy, Screen, ScreenBody, ScreenFooter, Title } from '@blockstack/connect';
import { Screen, ScreenBody, ScreenFooter, Title } from '@blockstack/connect';
import { Box, PseudoBox, Text } from '@blockstack/ui';
import { ScreenHeader } from '@components/connected-screen-header';
import { Accounts } from '@components/accounts';
@@ -10,6 +10,7 @@ import { selectAppName, selectDecodedAuthRequest } from '@store/onboarding/selec
import { Drawer } from '@components/drawer';
import { ConfigApp } from '@blockstack/keychain';
import { gaiaUrl } from '@common/constants';
import { ExtensionButton } from '@components/extension-button';
import {
CHOOSE_ACCOUNT_CHOSEN,
CHOOSE_ACCOUNT_REUSE_WARNING,
@@ -127,7 +128,7 @@ export const ChooseAccount: React.FC<ChooseAccountProps> = ({ next }) => {
]}
/>
<ScreenFooter>
<PoweredBy />
<ExtensionButton />
</ScreenFooter>
</Screen>
</Box>

6
packages/app/src/pages/sign-in/initial.tsx
View File

@@ -8,7 +8,7 @@ import {
ScreenFooter,
} from '@blockstack/connect';
import { ScreenHeader } from '@components/connected-screen-header';
import { Box, Text, Input, Flex, Button } from '@blockstack/ui';
import { Box, Text, Input, Flex, Button, space } from '@blockstack/ui';
import { AppIcon } from '@components/app-icon';
import { Link } from '@components/link';
import useDocumentTitle from '@rehooks/document-title';
@@ -21,6 +21,7 @@ import { selectAppName } from '@store/onboarding/selectors';
import { doStoreSeed } from '@store/wallet';
import { ErrorLabel } from '@components/error-label';
import { useAnalytics } from '@common/hooks/use-analytics';
import { ExtensionButton } from '@components/extension-button';
const textAreaRef = createRef<HTMLTextAreaElement>();
@@ -128,7 +129,8 @@ export const SignIn: React.FC<SignInProps> = props => {
</Button>
</Flex>
</ScreenActions>
<ScreenFooter>
<ScreenFooter flexWrap="wrap" mt={space('base')}>
<ExtensionButton my={space('base')} />
<PoweredBy />
</ScreenFooter>
</Screen>

2
packages/connect/src/react/index.ts
View File

@@ -3,4 +3,4 @@ export { useConnect } from './hooks/use-connect';
export * from './components/screen';
export * from './components/powered-by';
export { Title } from './components/typography';
export { Link } from './components/link';
export { Link, buildEnterKeyEvent } from './components/link';

6
yarn.lock
View File

@@ -7820,9 +7820,9 @@ electron-to-chromium@^1.3.363:
integrity sha512-esh5mmjAGl6HhAaYgHlDZme+jCIc+XIrLrBTwxviE+pM64UBmdLUIHLlrPzJGbit7hQI1TR/oGDQWCvQZ5yrFA==
electron-to-chromium@^1.3.413:
version "1.3.474"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.474.tgz#161af012e11f96795eade84bf03b8ddc039621b9"
integrity sha512-fPkSgT9IBKmVJz02XioNsIpg0WYmkPrvU1lUJblMMJALxyE7/32NGvbJQKKxpNokozPvqfqkuUqVClYsvetcLw==
version "1.3.477"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.477.tgz#7e6b931d0c1a2572101a6e9a835128c50fd49323"
integrity sha512-81p6DZ/XmHDD7O0ITJMa7ESo9bSCfE+v3Fny3MIYR0y77xmhoriu2ShNOLXcPS4eowF6dkxw6d2QqxTkS3DjBg==
elliptic@^6.0.0, elliptic@^6.4.0, elliptic@^6.4.1, elliptic@^6.5.1, elliptic@^6.5.2:
version "6.5.3"