Skip to content

Commit 355d021

Browse files
marc2332evavirseda
marc2332
and
evavirseda
authored
chore(create-dapp): Overhaul create-dapp (#91)
iotaledger/iota#10801 --------- Co-authored-by: evavirseda <[email protected]>
1 parent 21255a9 commit 355d021

27 files changed

Lines changed: 426 additions & 654 deletions

‎.changeset/yellow-dancers-share.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@iota/create-dapp': minor
3+
---
4+
5+
Overhaul of create-dapp. Switches eslint and prettier to oxlint and oxfmt. Removes radix and adds tailwind, removes unnecessary config files, simplifies code and has less deps.

‎sdk/create-dapp/templates/react-client-dapp/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ Client dApp using the following tools:
66
- [React](https://react.dev/) as the UI framework
77
- [TypeScript](https://www.typescriptlang.org/) for type checking
88
- [Vite](https://vitejs.dev/) for build tooling
9-
- [Radix UI](https://www.radix-ui.com/) for pre-built UI components
10-
- [ESLint](https://eslint.org/)
9+
- [Tailwind CSS](https://tailwindcss.com/) for styling
10+
- [oxlint](https://oxc.rs/docs/guide/usage/linter) for linting
1111
- [`@iota/dapp-kit`](https://docs.iota.org/developer/ts-sdk/dapp-kit) for
1212
connecting to wallets and loading data
1313
- [pnpm](https://pnpm.io/) for package management

‎sdk/create-dapp/templates/react-client-dapp/eslint.config.js‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎sdk/create-dapp/templates/react-client-dapp/index.html‎

Lines changed: 11 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,13 @@
11
<!doctype html>
2-
<html lang="en" class="dark-theme" style="color-scheme: dark">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>IOTA dApp Starter</title>
8-
9-
<style>
10-
/*
11-
Josh's Custom CSS Reset
12-
https://www.joshwcomeau.com/css/custom-css-reset/
13-
*/
14-
*,
15-
*::before,
16-
*::after {
17-
box-sizing: border-box;
18-
}
19-
* {
20-
margin: 0;
21-
}
22-
body {
23-
line-height: 1.5;
24-
-webkit-font-smoothing: antialiased;
25-
}
26-
img,
27-
picture,
28-
video,
29-
canvas,
30-
svg {
31-
display: block;
32-
max-width: 100%;
33-
}
34-
input,
35-
button,
36-
textarea,
37-
select {
38-
font: inherit;
39-
}
40-
p,
41-
h1,
42-
h2,
43-
h3,
44-
h4,
45-
h5,
46-
h6 {
47-
overflow-wrap: break-word;
48-
}
49-
#root,
50-
#__next {
51-
isolation: isolate;
52-
}
53-
</style>
54-
</head>
55-
<body>
56-
<div id="root"></div>
57-
<script type="module" src="/src/main.tsx"></script>
58-
</body>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>IOTA dApp Starter</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
5913
</html>

‎sdk/create-dapp/templates/react-client-dapp/package.json‎

Lines changed: 29 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,31 @@
11
{
2-
"name": "@iota/template-react-client-app",
3-
"private": true,
4-
"version": "0.0.0",
5-
"type": "module",
6-
"scripts": {
7-
"dev": "vite",
8-
"build": "tsc && vite build",
9-
"lint": "eslint .",
10-
"preview": "vite preview",
11-
"format": "prettier -w ."
12-
},
13-
"dependencies": {
14-
"@iota/dapp-kit": "workspace:*",
15-
"@iota/iota-sdk": "workspace:*",
16-
"@radix-ui/themes": "^3.1.1",
17-
"@tanstack/react-query": "^5.50.1",
18-
"react": "^18.3.1",
19-
"react-dom": "^18.3.1"
20-
},
21-
"devDependencies": {
22-
"@eslint/js": "^9.17.0",
23-
"@types/react": "^18.3.3",
24-
"@types/react-dom": "^18.3.0",
25-
"@typescript-eslint/eslint-plugin": "^8.18.0",
26-
"@typescript-eslint/parser": "^8.18.0",
27-
"@vitejs/plugin-react-swc": "^3.7.0",
28-
"eslint": "^9.17.0",
29-
"eslint-plugin-react-hooks": "^5.1.0",
30-
"eslint-plugin-react-refresh": "^0.4.7",
31-
"eslint-plugin-react": "^7.37.2",
32-
"typescript-eslint": "^8.18.0",
33-
"prettier": "^3.3.2",
34-
"typescript": "^5.5.3",
35-
"vite": "^5.4.12"
36-
}
2+
"name": "@iota/template-react-client-app",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"lint": "oxlint .",
10+
"format": "oxfmt --write src/",
11+
"preview": "vite preview"
12+
},
13+
"dependencies": {
14+
"@iota/dapp-kit": "workspace:*",
15+
"@iota/iota-sdk": "workspace:*",
16+
"@tanstack/react-query": "^5.91.2",
17+
"react": "^18.3.1",
18+
"react-dom": "^18.3.1"
19+
},
20+
"devDependencies": {
21+
"@tailwindcss/vite": "^4.2.2",
22+
"@types/react": "^18.3.28",
23+
"@types/react-dom": "^18.3.7",
24+
"@vitejs/plugin-react": "^6.0.1",
25+
"oxfmt": "^0.41.0",
26+
"oxlint": "^1.56.0",
27+
"tailwindcss": "^4.2.2",
28+
"typescript": "^5.9.3",
29+
"vite": "^8.0.1"
30+
}
3731
}

‎sdk/create-dapp/templates/react-client-dapp/prettier.config.cjs‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎sdk/create-dapp/templates/react-client-dapp/src/App.tsx‎

Lines changed: 15 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,20 @@
1-
import { ConnectButton } from "@iota/dapp-kit";
2-
import { Box, Container, Flex, Heading } from "@radix-ui/themes";
3-
import { WalletStatus } from "./WalletStatus";
1+
import { ConnectButton } from '@iota/dapp-kit';
2+
import { WalletStatus } from './WalletStatus';
43

54
function App() {
6-
return (
7-
<>
8-
<Flex
9-
position="sticky"
10-
px="4"
11-
py="2"
12-
justify="between"
13-
style={{
14-
borderBottom: "1px solid var(--gray-a2)",
15-
}}
16-
>
17-
<Box>
18-
<Heading>dApp Starter Template</Heading>
19-
</Box>
20-
21-
<Box>
22-
<ConnectButton />
23-
</Box>
24-
</Flex>
25-
<Container>
26-
<Container
27-
mt="5"
28-
pt="2"
29-
px="4"
30-
style={{ background: "var(--gray-a2)", minHeight: 500 }}
31-
>
32-
<WalletStatus />
33-
</Container>
34-
</Container>
35-
</>
36-
);
5+
return (
6+
<>
7+
<div className="sticky top-0 flex px-4 py-2 justify-between items-center border-b border-gray-800 bg-gray-950">
8+
<h1 className="text-2xl font-bold">dApp Starter Template</h1>
9+
<ConnectButton />
10+
</div>
11+
<div className="max-w-4xl mx-auto">
12+
<div className="mt-5 pt-2 px-4 bg-gray-900 min-h-[500px] rounded">
13+
<WalletStatus />
14+
</div>
15+
</div>
16+
</>
17+
);
3718
}
3819

3920
export default App;

‎sdk/create-dapp/templates/react-client-dapp/src/OwnedObjects.tsx‎

Lines changed: 34 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,41 @@
1-
import { useCurrentAccount, useIotaClientQuery } from "@iota/dapp-kit";
2-
import { Flex, Heading, Text } from "@radix-ui/themes";
1+
import { useCurrentAccount, useIotaClientQuery } from '@iota/dapp-kit';
32

43
export function OwnedObjects() {
5-
const account = useCurrentAccount();
6-
const { data, isPending, error } = useIotaClientQuery(
7-
"getOwnedObjects",
8-
{
9-
owner: account?.address as string,
10-
},
11-
{
12-
enabled: !!account,
13-
},
14-
);
4+
const account = useCurrentAccount();
5+
const { data, isPending, error } = useIotaClientQuery(
6+
'getOwnedObjects',
7+
{
8+
owner: account?.address as string,
9+
},
10+
{
11+
enabled: !!account,
12+
},
13+
);
1514

16-
if (!account) {
17-
return;
18-
}
15+
if (!account) {
16+
return;
17+
}
1918

20-
if (error) {
21-
return <Flex>Error: {error.message}</Flex>;
22-
}
19+
if (error) {
20+
return <div className="flex">Error: {error.message}</div>;
21+
}
2322

24-
if (isPending || !data) {
25-
return <Flex>Loading...</Flex>;
26-
}
23+
if (isPending || !data) {
24+
return <div className="flex">Loading...</div>;
25+
}
2726

28-
return (
29-
<Flex direction="column" my="2">
30-
{data.data.length === 0 ? (
31-
<Text>No objects owned by the connected wallet</Text>
32-
) : (
33-
<Heading size="4">Objects owned by the connected wallet</Heading>
34-
)}
35-
{data.data.map((object) => (
36-
<Flex key={object.data?.objectId}>
37-
<Text>Object ID: {object.data?.objectId}</Text>
38-
</Flex>
39-
))}
40-
</Flex>
41-
);
27+
return (
28+
<div className="flex flex-col my-2">
29+
{data.data.length === 0 ? (
30+
<p className="text-gray-300">No objects owned by the connected wallet</p>
31+
) : (
32+
<h3 className="text-lg font-semibold">Objects owned by the connected wallet</h3>
33+
)}
34+
{data.data.map((object) => (
35+
<div className="flex" key={object.data?.objectId}>
36+
<p className="text-gray-300">Object ID: {object.data?.objectId}</p>
37+
</div>
38+
))}
39+
</div>
40+
);
4241
}

‎sdk/create-dapp/templates/react-client-dapp/src/WalletStatus.tsx‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
1-
import { useCurrentAccount } from "@iota/dapp-kit";
2-
import { Container, Flex, Heading, Text } from "@radix-ui/themes";
3-
import { OwnedObjects } from "./OwnedObjects";
1+
import { useCurrentAccount } from '@iota/dapp-kit';
2+
import { OwnedObjects } from './OwnedObjects';
43

54
export function WalletStatus() {
6-
const account = useCurrentAccount();
5+
const account = useCurrentAccount();
76

8-
return (
9-
<Container my="2">
10-
<Heading mb="2">Wallet Status</Heading>
7+
return (
8+
<div className="my-2">
9+
<h2 className="text-xl font-semibold mb-2">Wallet Status</h2>
1110

12-
{account ? (
13-
<Flex direction="column">
14-
<Text>Wallet connected</Text>
15-
<Text>Address: {account.address}</Text>
16-
</Flex>
17-
) : (
18-
<Text>Wallet not connected</Text>
19-
)}
20-
<OwnedObjects />
21-
</Container>
22-
);
11+
{account ? (
12+
<div className="flex flex-col">
13+
<p className="text-gray-300">Wallet connected</p>
14+
<p className="text-gray-300">Address: {account.address}</p>
15+
</div>
16+
) : (
17+
<p className="text-gray-300">Wallet not connected</p>
18+
)}
19+
<OwnedObjects />
20+
</div>
21+
);
2322
}

‎sdk/create-dapp/templates/react-client-dapp/src/index.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@import 'tailwindcss';
2+
3+
:root {
4+
color-scheme: dark;
5+
}
6+
7+
body {
8+
@apply bg-gray-950 text-gray-100;
9+
}

0 commit comments

Comments
 (0)