Skip to content

feat: add kitchen sink example #281

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 3, 2024
Merged

feat: add kitchen sink example #281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e414b19
feat: add kitchen sink example
MartianGreed Sep 25, 2024
6a8d9f0
feat: deploy dashboard
MartianGreed Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
node_modules
docs

.DS_Store
.DS_Store
# Local Netlify folder
.netlify
8 changes: 7 additions & 1 deletion .gitmodules
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
[submodule "dojo-starter"]
path = worlds/dojo-starter
url = https://github.com/dojoengine/dojo-starter
url = https://github.com/dojoengine/dojo-starter
[submodule "onchain-dash"]
path = worlds/onchain-dash
url = https://github.com/MartianGreed/onchain-dash
[submodule "worlds/onchain-dash"]
path = worlds/onchain-dash
url = https://github.com/MartianGreed/onchain-dash
6 changes: 6 additions & 0 deletions examples/example-vite-kitchen-sink/.env.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
VITE_RPC_URL="http://localhost:5050"
VITE_RPC_API_KEY=""
VITE_CONTROLLER_URL="https://x.cartridge.gg/mainnet"
VITE_CONTROLLER_RPC="https://x.cartridge.gg/mainnet"
VITE_TORII_URL="http://localhost:8080"
VITE_RELAY_URL="/ip4/127.0.0.1/tcp/9090"
3 changes: 3 additions & 0 deletions examples/example-vite-kitchen-sink/.eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": ["next/core-web-vitals", "next/typescript"]
}
Comment on lines +1 to +3
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

⚠️ Potential issue

ESLint configuration appears unused and inconsistent with project setup

The ESLint configuration in examples/example-vite-kitchen-sink/.eslintrc.json extends Next.js-specific rules. However, ESLint does not seem to be utilized in this project:

  • No ESLint dependencies are listed in package.json.
  • No ESLint scripts are defined in package.json.

Consider either removing the ESLint configuration if linting is not required or properly integrating ESLint by adding the necessary dependencies and scripts aligned with the Vite and Dojo.js setup.

🔗 Analysis chain

Revise ESLint configuration for consistency with project setup

The current ESLint configuration extends Next.js-specific rules, which seems inconsistent with a Vite-based Dojo.js project. This could lead to irrelevant linting rules and potential conflicts. Consider the following suggestions:

  1. Replace Next.js configurations with more appropriate ones for a Vite and Dojo.js project. For example:

    • Use eslint:recommended as a base.
    • Add plugin:@typescript-eslint/recommended for TypeScript support.
    • Include any Dojo.js specific ESLint plugins or configurations if available.

  2. Add custom rules or overrides that are specific to your kitchen sink example.

  3. Consider adding a comment explaining the purpose of this configuration file for the kitchen sink example.

Here's a suggested revision:

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "plugins": ["@typescript-eslint"],
  "rules": {
    // Add any custom rules here
  },
  "overrides": [
    // Add any specific overrides for the kitchen sink example
  ]
}

Don't forget to install the necessary ESLint plugins for this configuration.

To ensure we're using the correct ESLint configuration for this project, let's check for any existing ESLint configurations and the project's package.json:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
echo "Searching for ESLint configurations:"
fd -e json -e js -e yaml -e yml --glob '*eslint*'
echo "\nChecking package.json for ESLint related dependencies:"
jq '.dependencies + .devDependencies | with_entries(select(.key | test("eslint")))' package.json

Length of output: 408

Script:

#!/bin/bash
echo "Inspecting package.json scripts for ESLint usage:"
jq '.scripts | to_entries[] | select(.value | test("eslint")) | {script: .key, command: .value}' package.json

Length of output: 220

38 changes: 38 additions & 0 deletions examples/example-vite-kitchen-sink/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
Comment on lines +3 to +7
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Adjust .gitignore for Vite project and remove Next.js-specific entries

The current .gitignore file contains Next.js-specific entries, but the PR objectives and directory name suggest this is a Vite project for dojo.js. Please consider the following adjustments:

  1. Remove Next.js-specific entries (/.next/, /out/).
  2. Add Vite-specific build output directory to ignore list.

Apply this diff to align the .gitignore with a Vite project:

 # dependencies
 /node_modules
 /.pnp
 .pnp.js
 .yarn/install-state.gz

 # testing
 /coverage

-# next.js
-/.next/
-/out/
-
 # production
 /build
+# vite
+/dist

Also, please verify if the /.pnp, .pnp.js, and .yarn/install-state.gz entries are necessary for your project's package manager configuration.

Also applies to: 12-17


# testing
/coverage
/dist/

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local

Comment on lines +29 to +31
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Reconsider ignoring the .env file

While ignoring local environment files (.env*.local) is a good practice, ignoring the .env file might not be suitable for a shared example. Consider the following:

  1. If the .env file contains non-sensitive, example-specific configurations, it should be tracked in the repository.
  2. If it contains sensitive information, consider using a .env.example file instead.

Apply this diff to adjust the environment file ignore patterns:

 # local env files
 .env*.local

+# environment files
+.env.example
-
-.env

Also, create a .env.example file with placeholder values for any required environment variables.

Also applies to: 37-37

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts
Comment on lines +32 to +37
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove Vercel-specific entries and keep TypeScript ignores

The Vercel-specific ignore pattern might not be necessary for a Vite project. However, the TypeScript-related ignore patterns are appropriate.

Apply this diff to remove Vercel-specific entries:

-# vercel
-.vercel
-
 # typescript
 *.tsbuildinfo
 next-env.d.ts

The TypeScript-related ignore patterns are correct and should be kept.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
# typescript
*.tsbuildinfo
next-env.d.ts

.env
49 changes: 49 additions & 0 deletions examples/example-vite-kitchen-sink/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
# OnChainDash Vite Kitchen Sink

This project aims at showcasing dojo's capabilities outside of gaming.
Comment on lines +1 to +3
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance the introduction with more context and explanation

The introduction provides a basic overview, but it could be more informative. Consider the following improvements:

  1. Add a brief explanation of what dojo.js is for context.
  2. Clarify what a "kitchen sink" example means in this context.
  3. Fix the minor grammatical issue in line 3.

Here's a suggested revision:

# OnChainDash Vite Kitchen Sink

This project serves as a comprehensive "kitchen sink" example, showcasing the full range of dojo.js capabilities outside of gaming. Dojo.js is a powerful framework for building onchain applications and games.

The project aims to demonstrate dojo's versatility by implementing various features and use cases in a non-gaming context.

This enhancement provides more context and clarity for users unfamiliar with dojo.js or the concept of a kitchen sink example.

🧰 Tools
🪛 LanguageTool

[uncategorized] ~3-~3: You might be missing the article “the” here.
Context: ...n Sink This project aims at showcasing dojo's capabilities outside of gaming. ## G...

(AI_EN_LECTOR_MISSING_DETERMINER_THE)


## Getting Started

First, install dependencies:

```bash
pnpm install
```

In one terminal window, start katana (the sequencer). If you want to use sepolia / mainnet contracts, you can just use a classic rpc (e.g. `https://rpc.netermind.io/(mainnet|sepolia)-juno`). If this is the case, you can skip the next command.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix typo in RPC URL example

There's a small typo in the RPC URL example. Please correct it as follows:

- In one terminal window, start katana (the sequencer). If you want to use sepolia / mainnet contracts, you can just use a classic rpc (e.g. `https://rpc.netermind.io/(mainnet|sepolia)-juno`). If this is the case, you can skip the next command.
+ In one terminal window, start katana (the sequencer). If you want to use sepolia / mainnet contracts, you can just use a classic rpc (e.g. `https://rpc.nethermind.io/(mainnet|sepolia)-juno`). If this is the case, you can skip the next command.

This ensures that users can correctly access the RPC endpoint.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
In one terminal window, start katana (the sequencer). If you want to use sepolia / mainnet contracts, you can just use a classic rpc (e.g. `https://rpc.netermind.io/(mainnet|sepolia)-juno`). If this is the case, you can skip the next command.
In one terminal window, start katana (the sequencer). If you want to use sepolia / mainnet contracts, you can just use a classic rpc (e.g. `https://rpc.nethermind.io/(mainnet|sepolia)-juno`). If this is the case, you can skip the next command.


```bash
katana --disable-fee --allowed-origins "*"
```
Comment on lines +16 to +17
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve flexibility of katana and torii commands

The current katana and torii commands use hardcoded values, which might not be suitable for all users. Consider making these commands more flexible:

  1. For the katana command, add an option to specify the network:
katana --disable-fee --allowed-origins "*" [--network <network_name>]
  1. For the torii commands, use environment variables or command-line arguments for the world address:
# with katana
torii --world $WORLD_ADDRESS --allowed-origins "*"

# with mainnet|sepolia
torii --world $WORLD_ADDRESS --allowed-origins "*" --rpc $RPC_URL -s $STARTING_BLOCK

These changes allow users to easily customize the commands for their specific setup without modifying the README.

Also applies to: 22-25


In another terminal window, start torii server

```bash
# with katana
torii --world 0x6dd367f5e11f11e0502cb2c4db7ae9bb6d8b5a4a431750bed7bec88b218e12 --allowed-origins "*"
# with mainnet|sepolia
torii --world 0x6dd367f5e11f11e0502cb2c4db7ae9bb6d8b5a4a431750bed7bec88b218e12 --allowed-origins "*" --rpc "https://rpc.nethermind.io/(mainnet|sepolia)-juno?apikey={apikey}" -s 204922
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix typo in RPC URL

There's a typo in the RPC URL for mainnet/sepolia. Please correct it as follows:

- torii --world 0x6dd367f5e11f11e0502cb2c4db7ae9bb6d8b5a4a431750bed7bec88b218e12 --allowed-origins "*" --rpc "https://rpc.nethermind.io/(mainnet|sepolia)-juno?apikey={apikey}" -s 204922 
+ torii --world 0x6dd367f5e11f11e0502cb2c4db7ae9bb6d8b5a4a431750bed7bec88b218e12 --allowed-origins "*" --rpc "https://rpc.nethermind.io/(mainnet|sepolia)-juno?apikey={apikey}" -s 204922

This ensures that users can correctly access the RPC endpoint.

Committable suggestion was skipped due to low confidence.

```

Then, start the development server:

```bash
pnpm run dev
```

Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.

## Local Contracts deployment

In order to make those commands work, you need to have torii & katana running.

```bash
cd src/onchain
sozo build
sozo migrate apply
```

### Notes

- you main want to update `actions` contract address in `src/components/caller-counter.tsx` & `src/components/global-counter.tsx` which is hardcoded in those files.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix typo in the first note

There's a small typo in the first note.

Please apply the following change:

- - you main want to update `actions` contract address in `src/components/caller-counter.tsx` & `src/components/global-counter.tsx` which is hardcoded in those files.
+ - you may want to update `actions` contract address in `src/components/caller-counter.tsx` & `src/components/global-counter.tsx` which is hardcoded in those files.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
- you main want to update `actions` contract address in `src/components/caller-counter.tsx` & `src/components/global-counter.tsx` which is hardcoded in those files.
- you may want to update `actions` contract address in `src/components/caller-counter.tsx` & `src/components/global-counter.tsx` which is hardcoded in those files.
🧰 Tools
🪛 LanguageTool

[uncategorized] ~48-~48: You might be missing the article “the” here.
Context: ... ### Notes - you main want to updateactionscontract address insrc/compon...

(AI_EN_LECTOR_MISSING_DETERMINER_THE)

- if you want to have braavos & argent wallet working, you need to deploy classes and deploy your wallet manually.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Expand on wallet compatibility note

The note about wallet compatibility could be more informative. Consider expanding it as follows:

- For compatibility with Braavos and Argent wallets, you need to manually deploy wallet classes. This involves:
  1. Deploying the necessary smart contract classes for these wallets.
  2. Manually creating and deploying your wallet using these classes.
  3. Ensuring your dApp is configured to work with these custom wallet deployments.

  Refer to the documentation of respective wallets for detailed instructions on this process.

This expansion provides users with a clearer understanding of what's required for wallet compatibility and points them towards finding more detailed instructions.

Comment on lines +1 to +49
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance README with additional sections

While the current README provides essential setup and deployment instructions, consider adding the following sections to make it more comprehensive:

  1. Project Structure: Provide an overview of the project's directory structure and main components.

  2. Features Demonstrated: List and briefly explain the dojo.js features showcased in this kitchen sink example.

  3. Configuration: If there are any configuration options or environment variables, document them here.

  4. Troubleshooting: Add a section with common issues and their solutions.

  5. Contributing: Include guidelines for how others can contribute to this example project.

  6. License: Specify the license under which this example is released.

These additions would significantly enhance the README, making it more informative and user-friendly. Would you like assistance in drafting content for these sections?

🧰 Tools
🪛 LanguageTool

[uncategorized] ~3-~3: You might be missing the article “the” here.
Context: ...n Sink This project aims at showcasing dojo's capabilities outside of gaming. ## G...

(AI_EN_LECTOR_MISSING_DETERMINER_THE)

[style] ~37-~37: Consider a shorter alternative to avoid wordiness.
Context: ...result. ## Local Contracts deployment In order to make those commands work, you need to h...

(IN_ORDER_TO_PREMIUM)

[uncategorized] ~48-~48: You might be missing the article “the” here.
Context: ... ### Notes - you main want to updateactionscontract address insrc/compon...

(AI_EN_LECTOR_MISSING_DETERMINER_THE)

20 changes: 20 additions & 0 deletions examples/example-vite-kitchen-sink/components.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "zinc",
"cssVariables": true,
"prefix": ""
},
Comment on lines +6 to +12
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

CSS file not found and missing Vite configuration.

The Tailwind configuration references a CSS file at app/globals.css, which does not exist in the repository. Additionally, no Vite configuration file was found in the root directory.

  • Verify and correct the CSS file path in the Tailwind configuration or ensure that app/globals.css is added to the project.
  • Add a Vite configuration file (e.g., vite.config.ts) to the root directory to ensure proper project setup and compatibility with Vite.
🔗 Analysis chain

Verify CSS file path and consider adding a prefix.

The Tailwind configuration looks good overall, but there are two points to consider:

  1. The CSS file path "app/globals.css" suggests a Next.js-like structure. Verify if this path is correct for a Vite project, as Vite typically uses a different directory structure.

  2. The prefix is currently empty. While this is valid, consider adding a prefix (e.g., "djs-" for dojo.js) to avoid potential class name conflicts, especially in larger projects or when integrating with other libraries.

To verify the CSS file path, run the following script:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check if the specified CSS file exists and search for alternative locations if not found.

# Test: Check if the specified CSS file exists
if [ -f "app/globals.css" ]; then
    echo "The specified CSS file exists at app/globals.css"
else
    echo "The specified CSS file was not found at app/globals.css"
    echo "Searching for alternative locations:"
    fd -e css -d 3
fi

Length of output: 320

Script:

#!/bin/bash
# Description: Verify the existence of the specified CSS file and check for Vite configuration.

# Check if the specified CSS file exists
if [ -f "app/globals.css" ]; then
    echo "The specified CSS file exists at app/globals.css"
else
    echo "The specified CSS file was not found at app/globals.css"
    echo "Searching for alternative CSS file locations:"
    fd -e css -d 3
fi

# Check for Vite configuration files in the root directory
vite_config=$(fd -e js -e ts 'vite.config' -d 1)
if [ -n "$vite_config" ]; then
    echo "Vite configuration file found: $vite_config"
else
    echo "No Vite configuration file found in the root directory."
fi

Length of output: 454

"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
}
}
13 changes: 13 additions & 0 deletions examples/example-vite-kitchen-sink/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dojo Onchain Dash</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
21 changes: 21 additions & 0 deletions examples/example-vite-kitchen-sink/netlify.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# example netlify.toml
[build]
command = "pnpm run build"
functions = "netlify/functions"
publish = "examples/example-vite-kitchen-sink/dist"

## Uncomment to use this redirect for Single Page Applications like create-react-app.
## Not needed for static site generators.
#[[redirects]]
# from = "/*"
# to = "/index.html"
# status = 200

## (optional) Settings for Netlify Dev
## https://github.com/netlify/cli/blob/main/docs/netlify-dev.md#project-detection
#[dev]
# command = "yarn start" # Command to start your dev server
# port = 3000 # Port that the dev server will be listening on
# publish = "dist" # Folder with the static content for _redirect file
Comment on lines +14 to +19
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Update Netlify Dev command for consistency.

The Netlify Dev settings section is a helpful inclusion for local development. However, there's an inconsistency in the package manager used. The build command uses pnpm, but the Netlify Dev command uses yarn. For consistency, consider updating the command to use pnpm:

  #[dev]
- #  command = "yarn start" # Command to start your dev server
+ #  command = "pnpm start" # Command to start your dev server
  #  port = 3000 # Port that the dev server will be listening on
  #  publish = "dist" # Folder with the static content for _redirect file

This change will ensure that the same package manager is used throughout the configuration, reducing potential confusion or errors.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
## (optional) Settings for Netlify Dev
## https://github.com/netlify/cli/blob/main/docs/netlify-dev.md#project-detection
#[dev]
# command = "yarn start" # Command to start your dev server
# port = 3000 # Port that the dev server will be listening on
# publish = "dist" # Folder with the static content for _redirect file
## (optional) Settings for Netlify Dev
## https://github.com/netlify/cli/blob/main/docs/netlify-dev.md#project-detection
#[dev]
# command = "pnpm start" # Command to start your dev server
# port = 3000 # Port that the dev server will be listening on
# publish = "dist" # Folder with the static content for _redirect file


## more info on configuring this file: https://ntl.fyi/file-based-build-config
59 changes: 59 additions & 0 deletions examples/example-vite-kitchen-sink/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
{
"name": "sink",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@cartridge/connector": "^0.3.46",
"@dojoengine/core": "workspace:*",
"@dojoengine/sdk": "workspace:*",
"@dojoengine/torii-wasm": "workspace:*",
"@dojoengine/torii-client": "workspace:*",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2",
"@starknet-react/chains": "^3.0.0",
"@starknet-react/core": "2.9.0",
"@t3-oss/env-core": "^0.11.1",
"@t3-oss/env-nextjs": "^0.11.1",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"dotenv": "^16.4.5",
"jiti": "^1.21.6",
"lucide-react": "^0.441.0",
"next": "14.2.12",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.53.0",
"starknet": "6.11.0",
"tailwind-merge": "^2.5.2",
"tailwindcss-animate": "^1.0.7",
"vaul": "^0.9.9",
"zod": "^3.23.8"
},
"devDependencies": {
"@types/node": "^20.16.10",
"@types/react": "^18.3.10",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.2",
"eslint": "^8.57.1",
"eslint-config-next": "14.2.12",
"postcss": "^8.4.47",
"tailwindcss": "^3.4.13",
"typescript": "^5.6.2",
"vite": "^5.4.8",
"vite-plugin-top-level-await": "^1.4.4",
"vite-plugin-wasm": "^3.3.0",
"vite-preset-react": "^2.3.0"
}
}
8 changes: 8 additions & 0 deletions examples/example-vite-kitchen-sink/postcss.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
},
};

export default config;
8 changes: 8 additions & 0 deletions examples/example-vite-kitchen-sink/public/dojo-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/example-vite-kitchen-sink/src/app/favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file added examples/example-vite-kitchen-sink/src/app/fonts/GeistMonoVF.woff
View file
Open in desktop
Binary file not shown.
Binary file added examples/example-vite-kitchen-sink/src/app/fonts/GeistVF.woff
View file
Open in desktop
Binary file not shown.
111 changes: 111 additions & 0 deletions examples/example-vite-kitchen-sink/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
color: hsl(var(--foreground));
background: hsl(var(--background));
}

@layer utilities {
.text-balance {
text-wrap: balance;
}
}

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
--font-body: var(--font-geist-sans);
--font-heading: var(--font-geist-mono);
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
.dojo {
--background: 20 14.3% 4.1%;
--foreground: 0 0% 95%;
--card: 24 9.8% 10%;
--card-foreground: 0 0% 95%;
--popover: 0 0% 9%;
--popover-foreground: 0 0% 95%;
--primary: 346.8 77.2% 49.8%;
--primary-foreground: 355.7 100% 97.3%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 15%;
--muted-foreground: 240 5% 64.9%;
--accent: 12 6.5% 15.1%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 85.7% 97.3%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 346.8 77.2% 49.8%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}

@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
font-family: var(--font-geist-sans);
}
h1, h2, h3, h4, h5, h6, h7 {
font-family: var(--font-geist-sans);
}
}
22 changes: 22 additions & 0 deletions examples/example-vite-kitchen-sink/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { TooltipProvider } from "@/components/ui/tooltip";

import Sidebar from "@/components/sidebar";
import Header from "@/components/header";
import StarknetProvider from "@/components/starknet-provider";


export default function RootLayout({ children }: React.PropsWithChildren<{}>) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Simplify the type definition for RootLayout.

To address the static analysis hint and improve type clarity, you can simplify the type definition for RootLayout. Since no additional props are used besides children, you can use React.PropsWithChildren without the empty object type.

-export default function RootLayout({ children }: React.PropsWithChildren<{}>) {
+export default function RootLayout({ children }: React.PropsWithChildren) {
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export default function RootLayout({ children }: React.PropsWithChildren<{}>) {
export default function RootLayout({ children }: React.PropsWithChildren) {
🧰 Tools
🪛 Biome

[error] 8-8: Don't use '{}' as a type.

Prefer explicitly define the object shape. '{}' means "any non-nullable value".

(lint/complexity/noBannedTypes)

return (
<StarknetProvider>
<TooltipProvider delayDuration={400}>
<div className="grid h-screen w-full pl-[53px]">
<Sidebar />
<div className="flex flex-col">
<Header />
{children}
</div>
</div>
</TooltipProvider>
</StarknetProvider>
);
}
Loading
Loading