Skip to content

Commit 7ad3037

Browse files
sinziisinzii
authored
feat: add multi clients support (#247)
* add multi networks support * okay good networks dashboard * good improvements * clean up * remove ready states map * good clean up * networkId clean up * good more clean up * good clean up * add network connection * rename hook * fix tests * good fix ci * initialize all networks at once * update hooks * good fix ci * fix ci * supress ts complains * update balance check * good tests * good * remove skipped tests * add unit tests * fix faucet link * remove setNetworkId * rename
1 parent b16a27f commit 7ad3037

File tree

101 files changed

+8466
-415
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

101 files changed

+8466
-415
lines changed

‎examples/demo-general/src/components/shared/NetworkSelection.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@ function NetworkDetails({ network, selectedEndpoint, onEndpointChange }: Network
324324
}
325325

326326
export default function NetworkSelection() {
327-
const { network, setNetwork, supportedNetworks, selectedProvider } = useTypink();
327+
const { network, setNetwork, supportedNetworks, networkConnection } = useTypink();
328328
const { isOpen, onOpen, onClose } = useDisclosure();
329329
const [smallest] = useMediaQuery('(max-width: 325px)');
330330
const [isMobile] = useMediaQuery('(max-width: 768px)');
@@ -382,8 +382,8 @@ export default function NetworkSelection() {
382382
if (networkInfo && networkInfo.providers.length > 0) {
383383
// If selecting the same network as currently connected, use the current provider
384384
// Otherwise, default to random selection for new networks
385-
if (networkId === network.id && selectedProvider) {
386-
setSelectedEndpoint(selectedProvider);
385+
if (networkId === network.id && networkConnection) {
386+
setSelectedEndpoint(networkConnection.provider!);
387387
} else {
388388
setSelectedEndpoint(''); // Always default to random RPC for new network selections
389389
}
@@ -432,6 +432,8 @@ export default function NetworkSelection() {
432432
// Initialize with current network
433433
setSelectedNetworkId(network.id);
434434
if (network.providers.length > 0) {
435+
const selectedProvider = networkConnection.provider;
436+
435437
// Check user's previous selection using explicit string types
436438
if (selectedProvider === 'light-client') {
437439
setSelectedEndpoint('light-client');

‎examples/demo-inkv5/src/components/shared/NetworkSelection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function NetworkStatusIndicator() {
1212
}
1313

1414
export default function NetworkSelection() {
15-
const { network, setNetworkId, supportedNetworks } = useTypink();
15+
const { network, setNetwork, supportedNetworks } = useTypink();
1616
const [smallest] = useMediaQuery('(max-width: 325px)');
1717

1818
return (
@@ -31,7 +31,7 @@ export default function NetworkSelection() {
3131
{Object.values(supportedNetworks).map((one) => (
3232
<MenuItem
3333
key={one.id}
34-
onClick={() => setNetworkId(one.id as string)}
34+
onClick={() => setNetwork(one.id as string)}
3535
backgroundColor={one.id === network.id ? 'gray.200' : ''}>
3636
<Flex direction='row' align='center' gap={2}>
3737
<img src={one.logo} alt={one.name} width={18} style={{ borderRadius: 4 }} />

‎examples/demo-inkv6/src/components/shared/NetworkSelection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function NetworkStatusIndicator() {
1212
}
1313

1414
export default function NetworkSelection() {
15-
const { network, setNetworkId, supportedNetworks } = useTypink();
15+
const { network, setNetwork, supportedNetworks } = useTypink();
1616
const [smallest] = useMediaQuery('(max-width: 325px)');
1717

1818
return (
@@ -31,7 +31,7 @@ export default function NetworkSelection() {
3131
{Object.values(supportedNetworks).map((one) => (
3232
<MenuItem
3333
key={one.id}
34-
onClick={() => setNetworkId(one.id as string)}
34+
onClick={() => setNetwork(one.id as string)}
3535
backgroundColor={one.id === network.id ? 'gray.200' : ''}>
3636
<Flex direction='row' align='center' gap={2}>
3737
<img src={one.logo} alt={one.name} width={18} style={{ borderRadius: 4 }} />

‎examples/demo-multi-clients/.eslintrc.cjs‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:@typescript-eslint/recommended',
7+
'plugin:react-hooks/recommended',
8+
],
9+
ignorePatterns: ['dist', '.eslintrc.cjs'],
10+
parser: '@typescript-eslint/parser',
11+
plugins: ['react-refresh'],
12+
rules: {
13+
'react-refresh/only-export-components': [
14+
'warn',
15+
{ allowConstantExport: true },
16+
],
17+
"@typescript-eslint/no-explicit-any": "off"
18+
},
19+
}

‎examples/demo-multi-clients/README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Example Dapp
2+
3+
- Start the application by running:
4+
```shell
5+
# From examples/dapp folder
6+
yarn dev
7+
8+
# From the project root folder
9+
yarn workspace demo dev
10+
```

‎examples/demo-multi-clients/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Typink Dapp</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎examples/demo-multi-clients/package.json‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "demo-multi-clients",
3+
"private": true,
4+
"version": "0.0.1",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"@chakra-ui/icons": "2.2.5",
14+
"@chakra-ui/react": "^2.10.5",
15+
"@chakra-ui/system": "^2.6.2",
16+
"@dedot/react-identicon": "^0.1.0",
17+
"@emotion/react": "^11.14.0",
18+
"@emotion/styled": "^11.14.0",
19+
"dedot": "^0.15.0",
20+
"framer-motion": "^10.18.0",
21+
"react": "^19.0.0",
22+
"react-dom": "^19.0.0",
23+
"react-toastify": "^10.0.6",
24+
"react-use": "^17.6.0",
25+
"typink": "workspace:*"
26+
},
27+
"devDependencies": {
28+
"@dedot/chaintypes": "^0.132.0",
29+
"@types/react": "^19.0.10",
30+
"@types/react-dom": "^19.0.4",
31+
"@typescript-eslint/eslint-plugin": "^6.21.0",
32+
"@typescript-eslint/parser": "^6.21.0",
33+
"@vitejs/plugin-react": "^4.3.4",
34+
"eslint": "^8.57.1",
35+
"eslint-plugin-react-hooks": "^4.6.2",
36+
"eslint-plugin-react-refresh": "^0.4.16",
37+
"typescript": "^5.5.2",
38+
"vite": "^6.0.5",
39+
"vite-tsconfig-paths": "^5.1.4"
40+
}
41+
}

‎examples/demo-multi-clients/public/favicon.ico‎

15 KB
Binary file not shown.

‎examples/demo-multi-clients/public/typink-logo.png‎

111 KB
Loading

‎examples/demo-multi-clients/src/App.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Box, Flex, VStack } from '@chakra-ui/react';
2+
import BalanceInsufficientAlert from '@/components/shared/BalanceInsufficientAlert.tsx';
3+
import MainFooter from '@/components/shared/MainFooter';
4+
import MainHeader from '@/components/shared/MainHeader';
5+
import NetworkStatusDashboard from '@/components/NetworkStatusDashboard';
6+
import MultiNetworkBalanceDashboard from '@/components/MultiNetworkBalanceDashboard';
7+
8+
function App() {
9+
return (
10+
<Flex direction='column' minHeight='100vh'>
11+
<MainHeader />
12+
<Box maxWidth='760px' mx='auto' my={4} px={4} flex={1} w='full'>
13+
<BalanceInsufficientAlert />
14+
<VStack spacing={6} align='stretch'>
15+
<NetworkStatusDashboard />
16+
<MultiNetworkBalanceDashboard />
17+
</VStack>
18+
</Box>
19+
<MainFooter />
20+
</Flex>
21+
);
22+
}
23+
24+
export default App;

0 commit comments

Comments
 (0)