chore: lint with new versions

.eslintrc.js

@@ -15,7 +15,7 @@ module.exports = {
     project: './tsconfig.json',
     tsconfigRootDir: __dirname,
   },
-  plugins: ['@typescript-eslint', 'react', 'jest'],
+  plugins: ['@typescript-eslint', 'react', 'jest', 'prettier'],
   env: {
     browser: true,
     node: true,

packages/connect/src/popup.ts

@@ -13,7 +13,12 @@ const defaultHeight = 532;
 const defaultTitle = 'Continue with Secret Key';
 
 // https://developer.mozilla.org/en-US/docs/Web/API/Window/open
-export const popupCenter = ({ url, title = defaultTitle, w = defaultWidth, h = defaultHeight }: PopupOptions) => {
+export const popupCenter = ({
+  url,
+  title = defaultTitle,
+  w = defaultWidth,
+  h = defaultHeight,
+}: PopupOptions) => {
   const win = window;
   // Safari reports an incorrect browser height
   const isSafari = (win as any).safari !== undefined;
@@ -26,16 +31,22 @@ export const popupCenter = ({ url, title = defaultTitle, w = defaultWidth, h = d
   const browserSidepanelWidth = win.outerWidth - win.innerWidth;
 
   // Such as fixed operating system UI
-  const removeUnusableSpaceX = (coord: number) => coord - (win.screen.width - win.screen.availWidth);
-  const removeUnusableSpaceY = (coord: number) => coord - (win.screen.height - win.screen.availHeight);
+  const removeUnusableSpaceX = (coord: number) =>
+    coord - (win.screen.width - win.screen.availWidth);
+  const removeUnusableSpaceY = (coord: number) =>
+    coord - (win.screen.height - win.screen.availHeight);
 
   const browserPosition = {
     x: removeUnusableSpaceX(win.screenX),
     y: removeUnusableSpaceY(win.screenY),
   };
 
   const left = browserPosition.x + browserSidepanelWidth + (browserViewport.width - w) / 2;
-  const top = browserPosition.y + browserToolbarHeight + (browserViewport.height - h) / 2 + (isSafari ? 48 : 0);
+  const top =
+    browserPosition.y +
+    browserToolbarHeight +
+    (browserViewport.height - h) / 2 +
+    (isSafari ? 48 : 0);
 
   const options = {
     scrollbars: 'no',

packages/connect/src/react/components/checkmark.tsx

@@ -1,8 +1,20 @@
 import React from 'react';
 
 export const CheckmarkIcon = ({ size = 72 }: { size?: number }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill="none" viewBox="0 0 72 72">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    fill="none"
+    viewBox="0 0 72 72"
+  >
     <circle cx="36" cy="36" r="34.5" fill="#fff" stroke="#00A73E" strokeWidth="3"></circle>
-    <path stroke="#00A73E" strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M21 37l10 10 20-22"></path>
+    <path
+      stroke="#00A73E"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="3"
+      d="M21 37l10 10 20-22"
+    ></path>
   </svg>
 );

packages/connect/src/react/components/connect/context.tsx

@@ -99,7 +99,13 @@ const ConnectContext = createContext<State>(initialState);
 
 const ConnectDispatchContext = createContext<Dispatch | undefined>(undefined);
 
-const ConnectProvider = ({ authOptions, children }: { authOptions: AuthOptions; children: any }) => {
+const ConnectProvider = ({
+  authOptions,
+  children,
+}: {
+  authOptions: AuthOptions;
+  children: any;
+}) => {
   const [state, dispatch] = useReducer(connectReducer, initialState);
 
   return (
@@ -109,4 +115,11 @@ const ConnectProvider = ({ authOptions, children }: { authOptions: AuthOptions;
   );
 };
 
-export { initialState, connectReducer, ConnectContext, ConnectDispatchContext, ConnectProvider, States };
+export {
+  initialState,
+  connectReducer,
+  ConnectContext,
+  ConnectDispatchContext,
+  ConnectProvider,
+  States,
+};

packages/connect/src/react/components/link/index.tsx

@@ -7,7 +7,11 @@ interface LinkProps extends BoxProps {
 
 const Link: React.FC<LinkProps> = ({ _hover = {}, children, ...rest }) => (
   <Box {...rest}>
-    <Text color="blue" _hover={{ textDecoration: 'underline', cursor: 'pointer', ..._hover }} fontWeight="medium">
+    <Text
+      color="blue"
+      _hover={{ textDecoration: 'underline', cursor: 'pointer', ..._hover }}
+      fontWeight="medium"
+    >
       {children}
     </Text>
   </Box>

packages/connect/src/react/components/modal/index.tsx

@@ -84,9 +84,15 @@ const ModalHeader = ({ title, back, hideIcon, close, hideTitleElements, ...rest
       borderBottomColor="inherit"
       {...rest}
     >
-      {back ? <ModalHeaderIconButton onClick={() => doChangeScreen(back)} icon={ChevronIcon} size={22} /> : null}
+      {back ? (
+        <ModalHeaderIconButton onClick={() => doChangeScreen(back)} icon={ChevronIcon} size={22} />
+      ) : null}
       {!hideTitleElements ? (
-        <Flex align="center" mx={back ? 'auto' : 'unset'} transform={back ? 'translateX(-15px)' : 'unset'}>
+        <Flex
+          align="center"
+          mx={back ? 'auto' : 'unset'}
+          transform={back ? 'translateX(-15px)' : 'unset'}
+        >
           <HeaderTitle hideIcon={hideIcon} title={title} />
         </Flex>
       ) : (

packages/connect/src/react/components/powered-by.tsx

@@ -8,7 +8,14 @@ const onClick = () => {
 };
 
 export const PoweredBy: React.FC = () => (
-  <Flex fontSize={['12px', '14px']} justifyContent="center" color="ink.600" textAlign="center" width="100%" my="loose">
+  <Flex
+    fontSize={['12px', '14px']}
+    justifyContent="center"
+    color="ink.600"
+    textAlign="center"
+    width="100%"
+    my="loose"
+  >
     <PseudoBox
       textAlign="center"
       onClick={onClick}

packages/connect/src/react/components/screen/screen-body.tsx

@@ -11,7 +11,12 @@ export interface ScreenBodyProps extends FlexProps {
   titleProps?: FlexProps;
 }
 
-export const ScreenBody = ({ body, pretitle, fullWidth, ...rest }: Omit<ScreenBodyProps, 'title'>) => {
+export const ScreenBody = ({
+  body,
+  pretitle,
+  fullWidth,
+  ...rest
+}: Omit<ScreenBodyProps, 'title'>) => {
   return (
     <Flex mx={fullWidth ? 0 : PX} flexDirection="column" {...rest}>
       {pretitle && <Pretitle>{pretitle}</Pretitle>}

packages/connect/src/react/components/screen/screen.tsx

@@ -9,7 +9,13 @@ interface ScreenBodyProps extends FlexProps {
   onSubmit?: () => void;
 }
 
-export const Screen: React.FC<ScreenBodyProps> = ({ noMinHeight, isLoading, children, onSubmit, ...rest }) => {
+export const Screen: React.FC<ScreenBodyProps> = ({
+  noMinHeight,
+  isLoading,
+  children,
+  onSubmit,
+  ...rest
+}) => {
   const handleSubmit = onSubmit
     ? (e: React.FormEvent<HTMLInputElement>) => {
         e.preventDefault();

packages/connect/src/react/components/screens/finished.tsx

@@ -32,7 +32,8 @@ export const Finished = () => {
         body={[
           <Title>{name} has been connected to your Secret Key</Title>,
           <Box mt="tight">
-            Everything you do in {name} will be private, secure, and only accessible with your Secret Key.
+            Everything you do in {name} will be private, secure, and only accessible with your
+            Secret Key.
           </Box>,
         ]}
       />

packages/connect/src/react/components/screens/how-it-works.tsx

@@ -17,8 +17,8 @@ const howSecretKeyWorks = ({ name }: { name: string }): InfoSection[] => [
     title: 'What is Blockstack?',
     body: (
       <span>
-        Blockstack is the open-source technology that generates your Secret Key. There&apos;s no company that owns or
-        controls Blockstack, it is independent. Go to{' '}
+        Blockstack is the open-source technology that generates your Secret Key. There&apos;s no
+        company that owns or controls Blockstack, it is independent. Go to{' '}
         <Link
           color="blue"
           display="inline-block"
@@ -54,10 +54,12 @@ export const HowItWorks: React.FC = () => {
       <ScreenBody
         pretitle="How it works"
         body={[
-          <Title>{name} keeps everything you do private with Blockstack&apos;s Secret Key technology</Title>,
+          <Title>
+            {name} keeps everything you do private with Blockstack&apos;s Secret Key technology
+          </Title>,
           <Text mt="tight" display="block">
-            Normally, apps keep your data for them to use. When you have a Secret Key, you no longer have to trust{' '}
-            {name} with your data because {name} won&apos;t have access.
+            Normally, apps keep your data for them to use. When you have a Secret Key, you no longer
+            have to trust {name} with your data because {name} won&apos;t have access.
           </Text>,
           <Box mt="tight">
             {howSecretKeyWorks({ name }).map(({ title, body }, key) => (

packages/connect/src/react/components/typography/index.tsx

@@ -2,7 +2,14 @@ import React from 'react';
 import { Text, BoxProps } from '@blockstack/ui';
 
 const Title = (props: BoxProps) => (
-  <Text width="100%" fontWeight="medium" fontSize="24px" lineHeight="32px" display="inline-block" {...props} />
+  <Text
+    width="100%"
+    fontWeight="medium"
+    fontSize="24px"
+    lineHeight="32px"
+    display="inline-block"
+    {...props}
+  />
 );
 
 const Pretitle = (props: BoxProps) => (

packages/connect/src/react/components/vector/index.tsx

@@ -9,7 +9,14 @@ const AppsIcon: React.FC = props => (
       d="M13.5697 10.9091H22.2999C23.0625 10.9091 23.5444 10.0897 23.1739 9.42317L18.8088 1.57201C18.4277 0.886573 17.4419 0.886572 17.0608 1.572L12.6957 9.42316C12.3251 10.0897 12.8071 10.9091 13.5697 10.9091Z"
       fill="currentColor"
     />
-    <rect opacity="0.64" y="13.7327" width="10.4348" height="10.2674" rx="5.13369" fill="currentColor" />
+    <rect
+      opacity="0.64"
+      y="13.7327"
+      width="10.4348"
+      height="10.2674"
+      rx="5.13369"
+      fill="currentColor"
+    />
     <path
       opacity="0.4"
       fillRule="evenodd"

packages/connect/src/react/hooks/use-scroll-lock.tsx

@@ -19,7 +19,8 @@ if (typeof window !== 'undefined') {
 }
 
 const originalStyle = () => {
-  window.__useScrollLockStyle = window.__useScrollLockStyle || window.getComputedStyle(document.body).overflow;
+  window.__useScrollLockStyle =
+    window.__useScrollLockStyle || window.getComputedStyle(document.body).overflow;
 
   return window.__useScrollLockStyle;
 };

packages/keychain/src/identity.ts

@@ -3,7 +3,12 @@ import { getPublicKeyFromPrivate } from 'blockstack/lib/keys';
 import { makeAuthResponse } from 'blockstack/lib/auth/authMessages';
 
 import { IdentityKeyPair } from './utils/index';
-import { makeGaiaAssociationToken, DEFAULT_GAIA_HUB, getHubInfo, connectToGaiaHubWithConfig } from './utils/gaia';
+import {
+  makeGaiaAssociationToken,
+  DEFAULT_GAIA_HUB,
+  getHubInfo,
+  connectToGaiaHubWithConfig,
+} from './utils/gaia';
 import IdentityAddressOwnerNode from './nodes/identity-address-owner-node';
 import { Profile, fetchProfile, DEFAULT_PROFILE, signAndUploadProfile } from './profiles';
 import { ecPairToAddress } from 'blockstack';
@@ -27,7 +32,13 @@ export class Identity {
   public usernames: string[];
   public profile?: Profile;
 
-  constructor({ keyPair, address, usernames, defaultUsername, profile }: IdentityConstructorOptions) {
+  constructor({
+    keyPair,
+    address,
+    usernames,
+    defaultUsername,
+    profile,
+  }: IdentityConstructorOptions) {
     this.keyPair = keyPair;
     this.address = address;
     this.usernames = usernames || [];
@@ -49,14 +60,16 @@ export class Identity {
     const appPrivateKey = await this.appPrivateKey(appDomain);
     const hubInfo = await getHubInfo(gaiaUrl);
     const profileUrl = await this.profileUrl(hubInfo.read_url_prefix);
-    const profile = (await fetchProfile({ identity: this, gaiaUrl: hubInfo.read_url_prefix })) || DEFAULT_PROFILE;
+    const profile =
+      (await fetchProfile({ identity: this, gaiaUrl: hubInfo.read_url_prefix })) || DEFAULT_PROFILE;
     if (scopes.includes('publish_data')) {
-      // console.log(profile)
       if (!profile.apps) {
         profile.apps = {};
       }
       const challengeSigner = ECPair.fromPrivateKey(Buffer.from(appPrivateKey, 'hex'));
-      profile.apps[appDomain] = `${hubInfo.read_url_prefix}${await ecPairToAddress(challengeSigner)}`;
+      profile.apps[appDomain] = `${hubInfo.read_url_prefix}${await ecPairToAddress(
+        challengeSigner
+      )}`;
       const gaiaHubConfig = await connectToGaiaHubWithConfig({
         hubInfo,
         privateKey: this.keyPair.key,

packages/keychain/src/profiles.ts

@@ -1,4 +1,9 @@
-import { signProfileToken, wrapProfileToken, connectToGaiaHub, makeProfileZoneFile } from 'blockstack';
+import {
+  signProfileToken,
+  wrapProfileToken,
+  connectToGaiaHub,
+  makeProfileZoneFile,
+} from 'blockstack';
 import { IdentityKeyPair } from './utils';
 import Identity from './identity';
 import { uploadToGaiaHub, GaiaHubConfig } from 'blockstack/lib/storage/hub';
@@ -63,9 +68,15 @@ export async function uploadProfile(
   signedProfileTokenData: string,
   gaiaHubConfig?: GaiaHubConfig
 ) {
-  const identityHubConfig = gaiaHubConfig || (await connectToGaiaHub(gaiaHubUrl, identity.keyPair.key));
-
-  return uploadToGaiaHub(DEFAULT_PROFILE_FILE_NAME, signedProfileTokenData, identityHubConfig, 'application/json');
+  const identityHubConfig =
+    gaiaHubConfig || (await connectToGaiaHub(gaiaHubUrl, identity.keyPair.key));
+
+  return uploadToGaiaHub(
+    DEFAULT_PROFILE_FILE_NAME,
+    signedProfileTokenData,
+    identityHubConfig,
+    'application/json'
+  );
 }
 
 interface SendToRegistrarParams {
@@ -75,7 +86,12 @@ interface SendToRegistrarParams {
   identity: Identity;
 }
 
-const sendUsernameToRegistrar = async ({ username, subdomain, zoneFile, identity }: SendToRegistrarParams) => {
+const sendUsernameToRegistrar = async ({
+  username,
+  subdomain,
+  zoneFile,
+  identity,
+}: SendToRegistrarParams) => {
   const { registerUrl } = registrars[subdomain];
 
   const registrationRequestBody = JSON.stringify({
@@ -118,7 +134,12 @@ interface RegisterParams {
 /**
  * Register a subdomain for a given identity
  */
-export const registerSubdomain = async ({ identity, gaiaHubUrl, username, subdomain }: RegisterParams) => {
+export const registerSubdomain = async ({
+  identity,
+  gaiaHubUrl,
+  username,
+  subdomain,
+}: RegisterParams) => {
   // const profile = identity.profile || DEFAULT_PROFILE
   const profile = DEFAULT_PROFILE;
   const signedProfileTokenData = await signProfileForUpload(profile, identity.keyPair);
@@ -152,7 +173,13 @@ export const signAndUploadProfile = async ({
   await uploadProfile(gaiaHubUrl, identity, signedProfileTokenData, gaiaHubConfig);
 };
 
-export const fetchProfile = async ({ identity, gaiaUrl }: { identity: Identity; gaiaUrl: string }) => {
+export const fetchProfile = async ({
+  identity,
+  gaiaUrl,
+}: {
+  identity: Identity;
+  gaiaUrl: string;
+}) => {
   try {
     const url = await identity.profileUrl(gaiaUrl);
     const res = await fetch(url);