Clean up some stories (#129)

Developer-DAO · Dec 17, 2021 · a209db4 · a209db4
1 parent 3f0bc64
commit a209db4
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 59 deletions.
diff --git a/packages/components/src/components/Address/Address.stories.tsx b/packages/components/src/components/Address/Address.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Address } from '.';
 
 import { useWallet, Provider, NETWORKS } from '@web3-ui/hooks';
-import { Button } from '@chakra-ui/react';
+import { Button, VStack } from '@chakra-ui/react';
 
 export default {
   title: 'Components/Address',
@@ -25,14 +25,14 @@ const AddressUsingProvider = (props: AddressProps) => {
   const { connected, connectWallet, connection } = useWallet();
 
   return (
-    <>
+    <VStack>
       <Address
         copiable
         value={connected ? connection.ens || connection.userAddress || '' : 'Not connected'}
         shortened={props.shortened}
       />
       <Button onClick={connectWallet}>Connect wallet</Button>
-    </>
+    </VStack>
   );
 };
 

diff --git a/packages/components/src/components/AddressInput/AddressInput.stories.tsx b/packages/components/src/components/AddressInput/AddressInput.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { AddressInput } from '.';
 import { ethers } from 'ethers';
 import { NETWORKS, Provider, useWallet } from '@web3-ui/hooks';
-import { Text } from '@chakra-ui/layout';
+import { Text, VStack } from '@chakra-ui/react';
 
 export default {
   title: 'Components/AddressInput',
@@ -18,27 +18,35 @@ const WithUseWallet = () => {
   const [value, setValue] = React.useState('');
 
   return (
-    <>
-      <AddressInput value={value} onChange={(e) => setValue(e)} provider={provider!} />
-      <Text>value: {value}</Text>
-    </>
+    <VStack>
+      <AddressInput value={value} onChange={e => setValue(e)} provider={provider!} />
+      <Text>Value: {value}</Text>
+      <Text fontSize='sm'>
+        You need to be connected to the Ethereum mainnet for ENS to work right now. We are working
+        on adding better support for ENS.
+      </Text>
+    </VStack>
   );
 };
 
 const Component = ({ ...props }) => {
   const provider = new ethers.providers.Web3Provider(window.ethereum);
   const [value, setValue] = React.useState('');
   return (
-    <>
+    <VStack>
       <AddressInput
         value={value}
-        onChange={(e) => setValue(e)}
+        onChange={e => setValue(e)}
         provider={provider}
         placeholder='Enter input address'
         {...props}
       />
-      <Text>value: {value}</Text>
-    </>
+      <Text>Value: {value}</Text>
+      <Text fontSize='sm'>
+        You need to be connected to the Ethereum mainnet for ENS to work right now. We are working
+        on adding better support for ENS.
+      </Text>
+    </VStack>
   );
 };
 

diff --git a/packages/components/src/components/AddressInput/AddressInput.tsx b/packages/components/src/components/AddressInput/AddressInput.tsx
@@ -24,7 +24,7 @@ export interface AddressInputProps {
 }
 
 /**
- * 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.
+ * A text input component that is used to get ETH addresses. ENS support included. You can also pass all the styling props of the Chakra UI Input component.
  */
 export const AddressInput: React.FC<AddressInputProps & InputProps> = ({
   provider,
@@ -58,7 +58,7 @@ export const AddressInput: React.FC<AddressInputProps & InputProps> = ({
       if (regex.test(debouncedValue)) {
         onChange(debouncedValue);
       } else if (debouncedValue.endsWith('.eth') || debouncedValue.endsWith('.xyz')) {
-        getAddressFromEns().then((address) => onChange(address ? address : ''));
+        getAddressFromEns().then(address => onChange(address ? address : ''));
       }
     }
   }, [debouncedValue]);
@@ -76,7 +76,7 @@ export const AddressInput: React.FC<AddressInputProps & InputProps> = ({
       <Input
         isInvalid={!!error}
         value={inputValue}
-        onChange={(e) => setInputValue(e.target.value)}
+        onChange={e => setInputValue(e.target.value)}
         {...props}
       />
       <FormErrorMessage>{error ? ' ' + error : ''}</FormErrorMessage>

diff --git a/packages/hooks/src/stories/ConnectWallet.stories.tsx b/packages/hooks/src/stories/ConnectWallet.stories.tsx
@@ -21,7 +21,7 @@ const DefaultUsingProvider = () => {
 
   useEffect(() => {
     if (!correctNetwork) {
-      alert('Please connect to the correct network');
+      alert('Please connect to Rinkeby.');
     }
   }, [correctNetwork]);
 

diff --git a/packages/hooks/src/stories/UseContract.stories.tsx b/packages/hooks/src/stories/UseContract.stories.tsx
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { Provider, useWallet, useContract } from '..';
-import { Button, Input, Grid, GridItem } from '@chakra-ui/react';
+import { Button, Input, Divider, VStack } from '@chakra-ui/react';
 import { ethers } from 'ethers';
 
 const ADDRESS = '0x7e1D33FcF1C6b6fd301e0B7305dD40E543CF7135'; // Rinkeby
@@ -68,11 +68,9 @@ const Default = () => {
   });
 
   const handleGreet = async () => alert(await contract.greet());
-  const handleChangeState =
-    (stateName: string) =>
-    ({ target: { value } }) => {
-      setState({ ...state, [stateName]: value });
-    };
+  const handleChangeState = (stateName: string) => ({ target: { value } }) => {
+    setState({ ...state, [stateName]: value });
+  };
   const handleSetGreeting = async () => {
     await contract.setGreeting(state.newGreeting);
     setState({ ...state, newGreeting: '' });
@@ -84,36 +82,30 @@ const Default = () => {
 
   if (connected) {
     return (
-      <div>
+      <VStack>
         <Button onClick={disconnectWallet}>Disconnect wallet</Button>
         <h3>Contract Methods</h3>
-        <Grid templateColumns='repeat(5, 1fr)' columnGap={5}>
-          <GridItem colSpan={5}>
-            <Button onClick={handleGreet}>greet</Button>
-          </GridItem>
-          <GridItem colSpan={5}>
-            <Button disabled={!state.newGreeting} onClick={handleSetGreeting}>
-              setGreeting
-            </Button>
-            <Input
-              value={state.newGreeting}
-              placeholder='New Greeting!'
-              onChange={handleChangeState('newGreeting')}
-            />
-          </GridItem>
-          <GridItem colSpan={5}>
-            <Button disabled={!(state.toAddress && state.amount)} onClick={handleTransferTo}>
-              transferTo
-            </Button>
-            <Input
-              value={state.toAddress}
-              placeholder='0xjA123....'
-              onChange={handleChangeState('toAddress')}
-            />
-            <Input placeholder='0.2' value={state.amount} onChange={handleChangeState('amount')} />
-          </GridItem>
-        </Grid>
-      </div>
+        <Button onClick={handleGreet}>greet</Button>
+        <Divider />
+        <Button disabled={!state.newGreeting} onClick={handleSetGreeting}>
+          setGreeting
+        </Button>
+        <Input
+          value={state.newGreeting}
+          placeholder='New Greeting!'
+          onChange={handleChangeState('newGreeting')}
+        />
+        <Divider />
+        <Button disabled={!(state.toAddress && state.amount)} onClick={handleTransferTo}>
+          transferTo
+        </Button>
+        <Input
+          value={state.toAddress}
+          placeholder='0xjA123....'
+          onChange={handleChangeState('toAddress')}
+        />
+        <Input placeholder='0.2' value={state.amount} onChange={handleChangeState('amount')} />
+      </VStack>
     );
   }
 

diff --git a/packages/hooks/src/stories/UseTokenBalance.stories.tsx b/packages/hooks/src/stories/UseTokenBalance.stories.tsx
@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import { Button } from '@chakra-ui/react';
+import { Button, VStack, Text } from '@chakra-ui/react';
 import { NETWORKS, Provider, useTokenBalance, useWallet } from '..';
 
 const GTC_ADDRESS = '0xde30da39c46104798bb5aa3fe8b9e0e1f348163f';
@@ -14,23 +14,23 @@ const Default = () => {
 
   if (connected) {
     return (
-      <div>
+      <VStack>
         <Button onClick={disconnectWallet}>Disconnect wallet</Button>
-        <p>{connection.ens || connection.userAddress}</p>
+        <Text>{connection.ens || connection.userAddress}</Text>
         {error ? (
-          <p>Error occured while trying to fetch balance.</p>
+          <Text>Error occured while trying to fetch balance.</Text>
         ) : loading ? (
-          <p>Loading...</p>
+          <Text>Loading...</Text>
         ) : (
-          <p>
+          <Text>
             GTC balance: {balance} wei, {formattedBalance} GTC
-          </p>
+          </Text>
         )}
-      </div>
+      </VStack>
     );
   }
 
-  return <button onClick={connectWallet}>Connect Wallet</button>;
+  return <Button onClick={connectWallet}>Connect Wallet</Button>;
 };
 
 storiesOf('Hooks/useTokenBalance', module).add('Default', () => (