Replace with* with useContext as applicable (#135)

packages/extension-ui/src/Popup/Accounts/Account.tsx

@@ -2,22 +2,20 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { OnActionFromCtx } from '../../components/types';
+import React, { useContext, useState } from 'react';
-
-import React, { useState } from 'react';
 import styled from 'styled-components';
 
-import { ActionBar, Address, Link, withOnAction } from '../../components';
+import { ActionBar, ActionContext, Address, Link } from '../../components';
 import { editAccount } from '../../messaging';
 import { Name } from '../../partials';
 
 interface Props {
   address: string;
   className?: string;
-  onAction: OnActionFromCtx;
 }
 
-function Account ({ address, className, onAction }: Props): React.ReactElement<Props> {
+function Account ({ address, className }: Props): React.ReactElement<Props> {
+  const onAction = useContext(ActionContext);
   const [isEditing, setEditing] = useState(false);
   const [editedName, setName] = useState<string | null>(null);
 
@@ -56,11 +54,11 @@ function Account ({ address, className, onAction }: Props): React.ReactElement<P
   );
 }
 
-export default withOnAction(styled(Account)`
+export default styled(Account)`
   .edit-name {
     left: 4.75rem;
     position: absolute;
     right: 0.75rem;
     top: -0.5rem;
   }
-`);
+`;

packages/extension-ui/src/Popup/Accounts/index.tsx

@@ -2,18 +2,14 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { AccountsFromCtx } from '../../components/types';
+import React, { useContext } from 'react';
 
-import React from 'react';
+import { AccountContext, Button, Header, Link, Tip, unicode } from '../../components';
-
-import { Button, Header, Link, Tip, unicode, withAccounts } from '../../components';
 import Account from './Account';
 
-interface Props {
+export default function Accounts (): React.ReactElement<{}> {
-  accounts: AccountsFromCtx;
+  const accounts = useContext(AccountContext);
-}
 
-function Accounts ({ accounts }: Props): React.ReactElement<Props> {
   return (
     <div>
       <Header
@@ -41,5 +37,3 @@ function Accounts ({ accounts }: Props): React.ReactElement<Props> {
     </div>
   );
 }
-
-export default withAccounts(Accounts);

packages/extension-ui/src/Popup/Authorize/Request.tsx

@@ -3,24 +3,23 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { MessageAuthorize } from '@polkadot/extension/background/types';
-import { OnActionFromCtx } from '../../components/types';
 
-import React from 'react';
+import React, { useContext } from 'react';
 import styled from 'styled-components';
 
-import { ActionBar, Button, Icon, IconBox, Link, Tip, defaults, withOnAction } from '../../components';
+import { ActionBar, ActionContext, Button, Icon, IconBox, Link, Tip, defaults } from '../../components';
 import { approveAuthRequest, rejectAuthRequest } from '../../messaging';
 
 interface Props {
   authId: string;
   className?: string;
   isFirst: boolean;
-  onAction: OnActionFromCtx;
   request: MessageAuthorize;
   url: string;
 }
 
-function Request ({ authId, className, isFirst, onAction, request: { origin }, url }: Props): React.ReactElement<Props> {
+function Request ({ authId, className, isFirst, request: { origin }, url }: Props): React.ReactElement<Props> {
+  const onAction = useContext(ActionContext);
   const onApprove = (): Promise<void> =>
     approveAuthRequest(authId)
       .then((): void => onAction())
@@ -59,7 +58,7 @@ function Request ({ authId, className, isFirst, onAction, request: { origin }, u
   );
 }
 
-export default withOnAction(styled(Request)`
+export default styled(Request)`
   .icon {
     background: ${defaults.btnBgDanger};
     color: ${defaults.btnColorDanger};
@@ -78,4 +77,4 @@ export default withOnAction(styled(Request)`
     text-overflow: ellipsis;
     vertical-align: top;
   }
-`);
+`;

packages/extension-ui/src/Popup/Authorize/index.tsx

@@ -2,18 +2,14 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { AuthRequestsFromCtx } from '../../components/types';
+import React, { useContext } from 'react';
 
-import React from 'react';
+import { AuthorizeContext, Header } from '../../components';
-
-import { Header, withAuthRequests } from '../../components';
 import Request from './Request';
 
-interface Props {
+export default function Authorize (): React.ReactElement<{}> {
-  requests: AuthRequestsFromCtx;
+  const requests = useContext(AuthorizeContext);
-}
 
-function Authorize ({ requests }: Props): React.ReactElement<Props> {
   return (
     <div>
       <Header label='authorize' />
@@ -29,5 +25,3 @@ function Authorize ({ requests }: Props): React.ReactElement<Props> {
     </div>
   );
 }
-
-export default withAuthRequests(Authorize);

packages/extension-ui/src/Popup/Create.tsx

@@ -2,19 +2,16 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { OnActionFromCtx } from '../components/types';
+import React, { useContext, useEffect, useState } from 'react';
 
-import React, { useState, useEffect } from 'react';
+import { ActionContext, Address, Button, Header, Loading, TextArea } from '../components';
-
-import { Address, Button, Header, Loading, TextArea, withOnAction } from '../components';
 import { createAccount, createSeed } from '../messaging';
 import { Back, Name, Password } from '../partials';
 
-interface Props {
+type Props = {};
-  onAction: OnActionFromCtx;
-}
 
-function Create ({ onAction }: Props): React.ReactElement<Props> {
+export default function Create (): React.ReactElement<Props> {
+  const onAction = useContext(ActionContext);
   const [account, setAccount] = useState<null | { address: string; seed: string }>(null);
   const [name, setName] = useState<string | null>(null);
   const [password, setPassword] = useState<string | null>(null);
@@ -67,5 +64,3 @@ function Create ({ onAction }: Props): React.ReactElement<Props> {
     </div>
   );
 }
-
-export default withOnAction(Create);

packages/extension-ui/src/Popup/Forget.tsx

@@ -2,20 +2,17 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { OnActionFromCtx } from '../components/types';
+import React, { useContext } from 'react';
-
-import React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
 
-import { Address, Button, Header, Tip, withOnAction } from '../components';
+import { ActionContext, Address, Button, Header, Tip } from '../components';
 import { forgetAccount } from '../messaging';
 import { Back } from '../partials';
 
-interface Props extends RouteComponentProps<{ address: string }> {
+type Props = RouteComponentProps<{ address: string }>;
-  onAction: OnActionFromCtx;
-}
 
-function Forget ({ match: { params: { address } }, onAction }: Props): React.ReactElement<Props> {
+function Forget ({ match: { params: { address } } }: Props): React.ReactElement<Props> {
+  const onAction = useContext(ActionContext);
   const onClick = (): Promise<void> =>
     forgetAccount(address)
       .then((): void => onAction('/'))
@@ -37,4 +34,4 @@ function Forget ({ match: { params: { address } }, onAction }: Props): React.Rea
   );
 }
 
-export default withOnAction(withRouter(Forget));
+export default withRouter(Forget);

packages/extension-ui/src/Popup/Import.tsx

@@ -2,19 +2,16 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { OnActionFromCtx } from '../components/types';
+import React, { useContext, useState } from 'react';
 
-import React, { useState } from 'react';
+import { ActionContext, Address, Button, Header, TextArea } from '../components';
-
-import { Address, Button, Header, TextArea, withOnAction } from '../components';
 import { createAccount, validateSeed } from '../messaging';
 import { Back, Name, Password } from '../partials';
 
-interface Props {
+type Props = {};
-  onAction: OnActionFromCtx;
-}
 
-function Import ({ onAction }: Props): React.ReactElement<Props> {
+export default function Import (): React.ReactElement<Props> {
+  const onAction = useContext(ActionContext);
   const [account, setAccount] = useState<null | { address: string; suri: string }>(null);
   const [name, setName] = useState<string | null>(null);
   const [password, setPassword] = useState<string | null>(null);
@@ -60,5 +57,3 @@ function Import ({ onAction }: Props): React.ReactElement<Props> {
     </div>
   );
 }
-
-export default withOnAction(Import);

packages/extension-ui/src/Popup/Signing/Request.tsx

@@ -3,25 +3,24 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { MessageExtrinsicSign } from '@polkadot/extension/background/types';
-import { OnActionFromCtx } from '../../components/types';
 
-import React from 'react';
+import React, { useContext } from 'react';
 import { createType } from '@polkadot/types';
 
-import { ActionBar, Address, Link, withOnAction } from '../../components';
+import { ActionBar, ActionContext, Address, Link } from '../../components';
 import { approveSignRequest, cancelSignRequest } from '../../messaging';
 import Details from './Details';
 import Unlock from './Unlock';
 
 interface Props {
   isFirst: boolean;
-  onAction: OnActionFromCtx;
   request: MessageExtrinsicSign;
   signId: string;
   url: string;
 }
 
-function Request ({ isFirst, onAction, request, signId, url }: Props): React.ReactElement<Props> {
+export default function Request ({ isFirst, request, signId, url }: Props): React.ReactElement<Props> {
+  const onAction = useContext(ActionContext);
   const onCancel = (): Promise<void> =>
     cancelSignRequest(signId)
       .then((): void => onAction())
@@ -49,5 +48,3 @@ function Request ({ isFirst, onAction, request, signId, url }: Props): React.Rea
     </Address>
   );
 }
-
-export default withOnAction(Request);

packages/extension-ui/src/Popup/Signing/index.tsx

@@ -2,18 +2,14 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { SignRequestsFromCtx } from '../../components/types';
+import React, { useContext } from 'react';
 
-import React from 'react';
+import { Header, SigningContext } from '../../components';
-
-import { Header, withSignRequests } from '../../components';
 import Request from './Request';
 
-interface Props {
+export default function Signing (): React.ReactElement<{}> {
-  requests: SignRequestsFromCtx;
+  const requests = useContext(SigningContext);
-}
 
-function Signing ({ requests }: Props): React.ReactElement<Props> {
   return (
     <div>
       <Header label='transactions' />
@@ -29,5 +25,3 @@ function Signing ({ requests }: Props): React.ReactElement<Props> {
     </div>
   );
 }
-
-export default withSignRequests(Signing);

packages/extension-ui/src/Popup/Welcome.tsx

@@ -2,17 +2,14 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { OnActionFromCtx } from '../components/types';
+import React, { useContext } from 'react';
 
-import React from 'react';
+import { ActionContext, Box, Button, Header } from '../components';
 
-import { Box, Button, Header, withOnAction } from '../components';
+type Props = {};
 
-interface Props {
+export default function Welcome (): React.ReactElement<Props> {
-  onAction: OnActionFromCtx;
+  const onAction = useContext(ActionContext);
-}
-
-function Welcome ({ onAction }: Props): React.ReactElement<Props> {
   const onClick = (): void => {
     window.localStorage.setItem('welcome_read', 'ok');
     onAction();
@@ -37,5 +34,3 @@ function Welcome ({ onAction }: Props): React.ReactElement<Props> {
     </div>
   );
 }
-
-export default withOnAction(Welcome);

packages/extension-ui/src/components/Address.tsx

@@ -4,19 +4,17 @@
 
 import { KeyringJson } from '@polkadot/ui-keyring/types';
 import { Prefix } from '@polkadot/util-crypto/address/types';
-import { AccountsFromCtx } from './types';
 
-import React, { useState, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import Identicon from '@polkadot/react-identicon';
 import settings from '@polkadot/ui-settings';
 
 import IconBox from './IconBox';
-import { withAccounts } from './contexts';
+import { AccountContext } from './contexts';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 
 interface Props {
-  accounts: AccountsFromCtx;
   address?: string | null;
   children?: React.ReactNode;
   className?: string;
@@ -24,7 +22,8 @@ interface Props {
   theme?: 'polkadot' | 'substrate';
 }
 
-function Address ({ accounts, address, children, className, name, theme = 'polkadot' }: Props): React.ReactElement<Props> {
+function Address ({ address, children, className, name, theme = 'polkadot' }: Props): React.ReactElement<Props> {
+  const accounts = useContext(AccountContext);
   const [account, setAccount] = useState<KeyringJson | null>(null);
   const [formatted, setFormatted] = useState<string | null>(null);
 
@@ -69,7 +68,7 @@ function Address ({ accounts, address, children, className, name, theme = 'polka
   );
 }
 
-export default withAccounts(styled(Address)`
+export default styled(Address)`
   .address {
     opacity: 0.5;
     overflow: hidden;
@@ -79,4 +78,4 @@ export default withAccounts(styled(Address)`
   .name {
     padding-bottom: 0.5rem;
   }
-`);
+`;

packages/extension-ui/src/components/contexts.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { AccountsFromCtx, OnActionFromCtx, AuthRequestsFromCtx, SignRequestsFromCtx, SubtractProps } from './types';
+import { AccountsFromCtx, OnActionFromCtx, AuthRequestsFromCtx, SignRequestsFromCtx } from './types';
 
 import React from 'react';
 
@@ -22,71 +22,3 @@ export {
   AuthorizeContext,
   SigningContext
 };
-
-export function withAccounts<P extends { accounts: AccountsFromCtx }> (Component: React.ComponentType<P>): React.ComponentType<SubtractProps<P, { accounts: AccountsFromCtx }>> {
-  // eslint-disable-next-line react/display-name,@typescript-eslint/explicit-function-return-type
-  return (props: SubtractProps<P, { accounts: AccountsFromCtx }>) => {
-    return (
-      <AccountContext.Consumer>
-        {(accounts): React.ReactNode => (
-          <Component
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            {...props as any}
-            accounts={accounts}
-          />
-        )}
-      </AccountContext.Consumer>
-    );
-  };
-}
-
-export function withOnAction<P extends { onAction: OnActionFromCtx }> (Component: React.ComponentType<P>): React.ComponentType<SubtractProps<P, { onAction: OnActionFromCtx }>> {
-  // eslint-disable-next-line react/display-name,@typescript-eslint/explicit-function-return-type
-  return (props: SubtractProps<P, { onAction: OnActionFromCtx }>) => {
-    return (
-      <ActionContext.Consumer>
-        {(onAction): React.ReactNode => (
-          <Component
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            {...props as any}
-            onAction={onAction}
-          />
-        )}
-      </ActionContext.Consumer>
-    );
-  };
-}
-
-export function withAuthRequests<P extends { requests: AuthRequestsFromCtx }> (Component: React.ComponentType<P>): React.ComponentType<SubtractProps<P, { requests: AuthRequestsFromCtx }>> {
-  // eslint-disable-next-line react/display-name,@typescript-eslint/explicit-function-return-type
-  return (props: SubtractProps<P, { requests: AuthRequestsFromCtx }>) => {
-    return (
-      <AuthorizeContext.Consumer>
-        {(requests): React.ReactNode => (
-          <Component
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            {...props as any}
-            requests={requests}
-          />
-        )}
-      </AuthorizeContext.Consumer>
-    );
-  };
-}
-
-export function withSignRequests<P extends { requests: SignRequestsFromCtx }> (Component: React.ComponentType<P>): React.ComponentType<SubtractProps<P, { requests: SignRequestsFromCtx }>> {
-  // eslint-disable-next-line react/display-name,@typescript-eslint/explicit-function-return-type
-  return (props: SubtractProps<P, { requests: SignRequestsFromCtx }>) => {
-    return (
-      <SigningContext.Consumer>
-        {(requests): React.ReactNode => (
-          <Component
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            {...props as any}
-            requests={requests}
-          />
-        )}
-      </SigningContext.Consumer>
-    );
-  };
-}

packages/extension-ui/src/partials/Name.tsx

@@ -2,14 +2,11 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { AccountsFromCtx } from '../components/types';
+import React, { useContext, useEffect, useState } from 'react';
 
-import React, { useEffect, useState } from 'react';
+import { AccountContext, Input } from '../components';
-
-import { Input, withAccounts } from '../components';
 
 interface Props {
-  accounts: AccountsFromCtx;
   address?: string;
   className?: string;
   defaultValue?: string | null;
@@ -21,7 +18,8 @@ interface Props {
 
 const MIN_LENGTH = 3;
 
-function Name ({ accounts, address, className, defaultValue, isFocussed, label = 'a descriptive name for this account', onBlur, onChange }: Props): React.ReactElement<Props> {
+export default function Name ({ address, className, defaultValue, isFocussed, label = 'a descriptive name for this account', onBlur, onChange }: Props): React.ReactElement<Props> {
+  const accounts = useContext(AccountContext);
   const [name, setName] = useState('');
   const account = accounts.find((account): boolean => account.address === address);
   const startValue = (account && account.meta.name) || defaultValue;
@@ -50,5 +48,3 @@ function Name ({ accounts, address, className, defaultValue, isFocussed, label =
     />
   );
 }
-
-export default withAccounts(Name);