Return provider from useWallet and re-factor AddressInput stories

Author: Dhaiwat10

packages/components/src/components/AddressInput/AddressInput.stories.tsx

@@ -1,21 +1,21 @@
-import React, { useEffect } from 'react';
-import { storiesOf } from '@storybook/react';
+import React from 'react';
 import { AddressInput } from '.';
 import { ethers } from 'ethers';
 import { Provider, useWallet } from '@web3-ui/hooks';
 import { Text } from '@chakra-ui/layout';
 
+export default {
+  title: 'Components/AddressInput',
+  component: AddressInput,
+};
+
 const WithUseWallet = () => {
-  const { connectWallet, connection } = useWallet();
+  const { provider } = useWallet();
   const [value, setValue] = React.useState('');
 
-  useEffect(() => {
-    connectWallet!();
-  }, []);
-
   return (
     <>
-      <AddressInput value={value} onChange={(e) => setValue(e)} provider={connection.signer!} />
+      <AddressInput value={value} onChange={(e) => setValue(e)} provider={provider!} />
       <Text>value: {value}</Text>
     </>
   );
@@ -38,17 +38,12 @@ const Component = ({ ...props }) => {
   );
 };
 
-storiesOf('Components/AddressInput', module)
-  .add('Default', () => {
-    return <Component />;
-  })
-  .add('Using @web3-hook', () => {
-    return (
-      <Provider network='mainnet'>
-        <WithUseWallet />
-      </Provider>
-    );
-  })
-  .add('With label', () => {
-    return <Component label='Address' />;
-  });
+export const Default = () => <Component />;
+export const UsingWeb3Hooks = () => {
+  return (
+    <Provider network='mainnet'>
+      <WithUseWallet />
+    </Provider>
+  );
+};
+export const Label = () => <Component label='Address' />;

packages/components/src/components/AddressInput/AddressInput.tsx

@@ -6,35 +6,25 @@ import { JsonRpcSigner } from '@ethersproject/providers/src.ts/json-rpc-provider
 
 export interface AddressInputProps {
   /**
-   * @dev The provider or signer to fetch the address from the ens
-   * @type JsonRpcSigner or ethers.providers.Web3Provider
+   * The provider or signer to fetch the address from the ens
    */
   provider: ethers.providers.Web3Provider | JsonRpcSigner;
   /**
-   * @dev The value for the input
-   * @type string
-   * @default ''
+   * The value for the input
    */
   value: string;
   /**
-   * @dev The label for the input
-   * @type string
-   * @default null
+   * The label for the input
    */
   label?: string;
   /**
-   * @dev Change handler for the text input
-   * @type (value: string) => void
+   * Change handler for the text input
    */
   onChange: (value: string) => void;
 }
 
 /**
- * @dev A text input component that is used to get the address of the user from the ens. You can also pass all the styling props of the Chakra UI Input component.
- * @param provider The provider or signer to fetch the address from the ens
- * @param value The value for the input
- * @param onChange Change hanlder for the text input
- * @returns JSX.Element
+ * A text input component that is used to get the address of the user from the ens. You can also pass all the styling props of the Chakra UI Input component.
  */
 export const AddressInput: React.FC<AddressInputProps & InputProps> = ({
   provider,

packages/hooks/src/hooks/useWallet.ts

@@ -29,5 +29,6 @@ export function useWallet() {
       ens,
     },
     connected: context?.connected,
+    provider: context?.provider,
   };
 }