Skip to content

Commit a209db4

Browse files
Dhaiwat10Dhaiwat10
authored
Clean up some stories (#129)
1 parent 3f0bc64 commit a209db4

File tree

6 files changed

+59
-59
lines changed

6 files changed

+59
-59
lines changed

‎packages/components/src/components/Address/Address.stories.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { Address } from '.';
33

44
import { useWallet, Provider, NETWORKS } from '@web3-ui/hooks';
5-
import { Button } from '@chakra-ui/react';
5+
import { Button, VStack } from '@chakra-ui/react';
66

77
export default {
88
title: 'Components/Address',
@@ -25,14 +25,14 @@ const AddressUsingProvider = (props: AddressProps) => {
2525
const { connected, connectWallet, connection } = useWallet();
2626

2727
return (
28-
<>
28+
<VStack>
2929
<Address
3030
copiable
3131
value={connected ? connection.ens || connection.userAddress || '' : 'Not connected'}
3232
shortened={props.shortened}
3333
/>
3434
<Button onClick={connectWallet}>Connect wallet</Button>
35-
</>
35+
</VStack>
3636
);
3737
};
3838

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

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { AddressInput } from '.';
33
import { ethers } from 'ethers';
44
import { NETWORKS, Provider, useWallet } from '@web3-ui/hooks';
5-
import { Text } from '@chakra-ui/layout';
5+
import { Text, VStack } from '@chakra-ui/react';
66

77
export default {
88
title: 'Components/AddressInput',
@@ -18,27 +18,35 @@ const WithUseWallet = () => {
1818
const [value, setValue] = React.useState('');
1919

2020
return (
21-
<>
22-
<AddressInput value={value} onChange={(e) => setValue(e)} provider={provider!} />
23-
<Text>value: {value}</Text>
24-
</>
21+
<VStack>
22+
<AddressInput value={value} onChange={e => setValue(e)} provider={provider!} />
23+
<Text>Value: {value}</Text>
24+
<Text fontSize='sm'>
25+
You need to be connected to the Ethereum mainnet for ENS to work right now. We are working
26+
on adding better support for ENS.
27+
</Text>
28+
</VStack>
2529
);
2630
};
2731

2832
const Component = ({ ...props }) => {
2933
const provider = new ethers.providers.Web3Provider(window.ethereum);
3034
const [value, setValue] = React.useState('');
3135
return (
32-
<>
36+
<VStack>
3337
<AddressInput
3438
value={value}
35-
onChange={(e) => setValue(e)}
39+
onChange={e => setValue(e)}
3640
provider={provider}
3741
placeholder='Enter input address'
3842
{...props}
3943
/>
40-
<Text>value: {value}</Text>
41-
</>
44+
<Text>Value: {value}</Text>
45+
<Text fontSize='sm'>
46+
You need to be connected to the Ethereum mainnet for ENS to work right now. We are working
47+
on adding better support for ENS.
48+
</Text>
49+
</VStack>
4250
);
4351
};
4452

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export interface AddressInputProps {
2424
}
2525

2626
/**
27-
* 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.
27+
* 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.
2828
*/
2929
export const AddressInput: React.FC<AddressInputProps & InputProps> = ({
3030
provider,
@@ -58,7 +58,7 @@ export const AddressInput: React.FC<AddressInputProps & InputProps> = ({
5858
if (regex.test(debouncedValue)) {
5959
onChange(debouncedValue);
6060
} else if (debouncedValue.endsWith('.eth') || debouncedValue.endsWith('.xyz')) {
61-
getAddressFromEns().then((address) => onChange(address ? address : ''));
61+
getAddressFromEns().then(address => onChange(address ? address : ''));
6262
}
6363
}
6464
}, [debouncedValue]);
@@ -76,7 +76,7 @@ export const AddressInput: React.FC<AddressInputProps & InputProps> = ({
7676
<Input
7777
isInvalid={!!error}
7878
value={inputValue}
79-
onChange={(e) => setInputValue(e.target.value)}
79+
onChange={e => setInputValue(e.target.value)}
8080
{...props}
8181
/>
8282
<FormErrorMessage>{error ? ' ' + error : ''}</FormErrorMessage>

‎packages/hooks/src/stories/ConnectWallet.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const DefaultUsingProvider = () => {
2121

2222
useEffect(() => {
2323
if (!correctNetwork) {
24-
alert('Please connect to the correct network');
24+
alert('Please connect to Rinkeby.');
2525
}
2626
}, [correctNetwork]);
2727

‎packages/hooks/src/stories/UseContract.stories.tsx

Lines changed: 26 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { storiesOf } from '@storybook/react';
22
import React from 'react';
33
import { Provider, useWallet, useContract } from '..';
4-
import { Button, Input, Grid, GridItem } from '@chakra-ui/react';
4+
import { Button, Input, Divider, VStack } from '@chakra-ui/react';
55
import { ethers } from 'ethers';
66

77
const ADDRESS = '0x7e1D33FcF1C6b6fd301e0B7305dD40E543CF7135'; // Rinkeby
@@ -68,11 +68,9 @@ const Default = () => {
6868
});
6969

7070
const handleGreet = async () => alert(await contract.greet());
71-
const handleChangeState =
72-
(stateName: string) =>
73-
({ target: { value } }) => {
74-
setState({ ...state, [stateName]: value });
75-
};
71+
const handleChangeState = (stateName: string) => ({ target: { value } }) => {
72+
setState({ ...state, [stateName]: value });
73+
};
7674
const handleSetGreeting = async () => {
7775
await contract.setGreeting(state.newGreeting);
7876
setState({ ...state, newGreeting: '' });
@@ -84,36 +82,30 @@ const Default = () => {
8482

8583
if (connected) {
8684
return (
87-
<div>
85+
<VStack>
8886
<Button onClick={disconnectWallet}>Disconnect wallet</Button>
8987
<h3>Contract Methods</h3>
90-
<Grid templateColumns='repeat(5, 1fr)' columnGap={5}>
91-
<GridItem colSpan={5}>
92-
<Button onClick={handleGreet}>greet</Button>
93-
</GridItem>
94-
<GridItem colSpan={5}>
95-
<Button disabled={!state.newGreeting} onClick={handleSetGreeting}>
96-
setGreeting
97-
</Button>
98-
<Input
99-
value={state.newGreeting}
100-
placeholder='New Greeting!'
101-
onChange={handleChangeState('newGreeting')}
102-
/>
103-
</GridItem>
104-
<GridItem colSpan={5}>
105-
<Button disabled={!(state.toAddress && state.amount)} onClick={handleTransferTo}>
106-
transferTo
107-
</Button>
108-
<Input
109-
value={state.toAddress}
110-
placeholder='0xjA123....'
111-
onChange={handleChangeState('toAddress')}
112-
/>
113-
<Input placeholder='0.2' value={state.amount} onChange={handleChangeState('amount')} />
114-
</GridItem>
115-
</Grid>
116-
</div>
88+
<Button onClick={handleGreet}>greet</Button>
89+
<Divider />
90+
<Button disabled={!state.newGreeting} onClick={handleSetGreeting}>
91+
setGreeting
92+
</Button>
93+
<Input
94+
value={state.newGreeting}
95+
placeholder='New Greeting!'
96+
onChange={handleChangeState('newGreeting')}
97+
/>
98+
<Divider />
99+
<Button disabled={!(state.toAddress && state.amount)} onClick={handleTransferTo}>
100+
transferTo
101+
</Button>
102+
<Input
103+
value={state.toAddress}
104+
placeholder='0xjA123....'
105+
onChange={handleChangeState('toAddress')}
106+
/>
107+
<Input placeholder='0.2' value={state.amount} onChange={handleChangeState('amount')} />
108+
</VStack>
117109
);
118110
}
119111

‎packages/hooks/src/stories/UseTokenBalance.stories.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { storiesOf } from '@storybook/react';
22
import React from 'react';
3-
import { Button } from '@chakra-ui/react';
3+
import { Button, VStack, Text } from '@chakra-ui/react';
44
import { NETWORKS, Provider, useTokenBalance, useWallet } from '..';
55

66
const GTC_ADDRESS = '0xde30da39c46104798bb5aa3fe8b9e0e1f348163f';
@@ -14,23 +14,23 @@ const Default = () => {
1414

1515
if (connected) {
1616
return (
17-
<div>
17+
<VStack>
1818
<Button onClick={disconnectWallet}>Disconnect wallet</Button>
19-
<p>{connection.ens || connection.userAddress}</p>
19+
<Text>{connection.ens || connection.userAddress}</Text>
2020
{error ? (
21-
<p>Error occured while trying to fetch balance.</p>
21+
<Text>Error occured while trying to fetch balance.</Text>
2222
) : loading ? (
23-
<p>Loading...</p>
23+
<Text>Loading...</Text>
2424
) : (
25-
<p>
25+
<Text>
2626
GTC balance: {balance} wei, {formattedBalance} GTC
27-
</p>
27+
</Text>
2828
)}
29-
</div>
29+
</VStack>
3030
);
3131
}
3232

33-
return <button onClick={connectWallet}>Connect Wallet</button>;
33+
return <Button onClick={connectWallet}>Connect Wallet</Button>;
3434
};
3535

3636
storiesOf('Hooks/useTokenBalance', module).add('Default', () => (

0 commit comments

Comments
 (0)