chore: Various minor configuration improvements

README.md

@@ -213,7 +213,7 @@ One key element making this boilerplate so flexible is the usage of environment
 
 </details>
 
-All environment variables are imported from `process.env` in [`frontend/src/config/environment.ts`](https://github.com/scio-labs/inkathon/blob/main/frontend/src/config/environment.ts) for type safety.
+All environment variables are imported from `process.env` in [`frontend/src/config/environment.ts`](https://github.com/scio-labs/inkathon/blob/main/frontend/src/config/environment.ts) and re-exported from there. For improved type safety, Always only import environment variables from `@/config/environment` and never directly from `process.env`.
 
 | Environment Variables           | [Default Values](https://github.com/scio-labs/inkathon/blob/main/frontend/.env.local.example) | Description                                                                                                                                                         |
 | ------------------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

contracts/.eslintignore

@@ -1,4 +1,6 @@
 node_modules
 deployments
 target
-src
+src
+dist
+.node-data

contracts/.prettierignore

@@ -1,4 +1,6 @@
 node_modules
 deployments
 target
-src
+src
+dist
+.node-data

contracts/package.json

@@ -16,8 +16,7 @@
     "sync-types": "typesync",
     "lint": "prettier . --check && eslint",
     "lint:fix": "prettier . --write && eslint --fix",
-    "lint:format": "prettier . --write",
-    "eslint": "eslint . --ext .js,.ts"
+    "lint:format": "prettier . --write"
   },
   "devDependencies": {
     "@polkadot/api": "^10.11.1",

contracts/tsconfig.json

@@ -16,6 +16,6 @@
     "baseUrl": ".",
     "composite": true
   },
-  "exclude": ["./*/target"],
+  "exclude": ["node_modules", "dist", "target", "./*/target"],
   "include": ["./deployments/**/*.json", "./deployments/**/*.ts", "./scripts/**/*.ts"]
 }

frontend/.eslintrc.json

@@ -19,6 +19,7 @@
     "react-hooks/exhaustive-deps": "off",
     "react/jsx-no-target-blank": "off",
     "no-extra-boolean-cast": "off",
-    "prefer-const": "warn"
+    "prefer-const": "warn",
+    "no-restricted-imports": ["warn", { "patterns": ["process"] }]
   }
 }

frontend/.prettierrc.js

@@ -8,7 +8,7 @@ module.exports = {
   importOrder: [
     '^((react|next)/(.*)$)|^((react|next)$)',
     '<THIRD_PARTY_MODULES>',
-    '^@(config|types|styles|shared|lib|utils|hooks|components|app|pages|features)/(.*)$',
+    '^@/(config|types|styles|shared|lib|utils|hooks|components|app|pages|features)/(.*)$',
     '^[./]',
   ],
   importOrderSeparation: true,
@@ -21,4 +21,6 @@ module.exports = {
       },
     },
   ],
+  tailwindConfig: 'tailwind.config.ts',
+  tailwindFunctions: ['clsx', 'cva'],
 }

frontend/package.json

@@ -13,8 +13,7 @@
     "sync-types": "typesync",
     "lint": "prettier . --check && eslint",
     "lint:fix": "prettier . --write && eslint --fix",
-    "lint:format": "prettier . --write",
-    "eslint": "eslint . --ext .js,.jsx,.ts,.tsx"
+    "lint:format": "prettier . --write"
   },
   "dependencies": {
     "@azns/resolver-core": "^1.6.0",

frontend/src/app/components/home-page-title.tsx

@@ -2,12 +2,13 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { AnchorHTMLAttributes, FC } from 'react'
 
-import { cn } from '@/utils/cn'
 import githubIcon from 'public/icons/github-button.svg'
 import telegramIcon from 'public/icons/telegram-button.svg'
 import vercelIcon from 'public/icons/vercel-button.svg'
 import inkathonLogo from 'public/images/inkathon-logo.png'
 
+import { cn } from '@/utils/cn'
+
 interface StyledIconLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   href: string
   className?: string

frontend/src/app/layout.tsx

@@ -1,12 +1,13 @@
 import { Metadata, Viewport } from 'next'
 import { PropsWithChildren } from 'react'
 
+import { GeistMono } from 'geist/font/mono'
+import { GeistSans } from 'geist/font/sans'
+
 import { ToastConfig } from '@/app/toast-config'
 import { TooltipProvider } from '@/components/ui/tooltip'
 import { env } from '@/config/environment'
 import { cn } from '@/utils/cn'
-import { GeistMono } from 'geist/font/mono'
-import { GeistSans } from 'geist/font/sans'
 
 import './globals.css'
 import ClientProviders from './providers'

frontend/src/app/page.tsx

@@ -2,12 +2,13 @@
 
 import { useEffect } from 'react'
 
+import { useInkathon } from '@scio-labs/use-inkathon'
+import { toast } from 'react-hot-toast'
+
 import { HomePageTitle } from '@/app/components/home-page-title'
 import { ChainInfo } from '@/components/web3/chain-info'
 import { ConnectButton } from '@/components/web3/connect-button'
 import { GreeterContractInteractions } from '@/components/web3/greeter-contract-interactions'
-import { useInkathon } from '@scio-labs/use-inkathon'
-import { toast } from 'react-hot-toast'
 
 export default function HomePage() {
   // Display `useInkathon` error messages (optional)

frontend/src/app/providers.tsx

@@ -2,10 +2,11 @@
 
 import { PropsWithChildren } from 'react'
 
-import { env } from '@/config/environment'
 import { getDeployments } from '@/deployments/deployments'
 import { UseInkathonProvider } from '@scio-labs/use-inkathon'
 
+import { env } from '@/config/environment'
+
 export default function ClientProviders({ children }: PropsWithChildren) {
   return (
     <UseInkathonProvider

frontend/src/components/web3/chain-info.tsx

@@ -3,11 +3,12 @@
 import Link from 'next/link'
 import { FC, useEffect, useState } from 'react'
 
-import { Card, CardContent, CardFooter } from '@/components/ui/card'
-import { Spinner } from '@/components/ui/spinner'
 import { useInkathon } from '@scio-labs/use-inkathon'
 import { HiOutlineExternalLink } from 'react-icons/hi'
 
+import { Card, CardContent, CardFooter } from '@/components/ui/card'
+import { Spinner } from '@/components/ui/spinner'
+
 export const ChainInfo: FC = () => {
   const { api, activeChain } = useInkathon()
   const [chainInfo, setChainInfo] = useState<{ [_: string]: any }>()

frontend/src/components/web3/connect-button.tsx

@@ -4,16 +4,6 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { FC, useMemo, useState } from 'react'
 
-import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { env } from '@/config/environment'
-import { truncateHash } from '@/utils/truncate-hash'
 import { SupportedChainId } from '@azns/resolver-core'
 import { useResolveAddressToDomain } from '@azns/resolver-react'
 import { InjectedAccount } from '@polkadot/extension-inject/types'
@@ -34,6 +24,17 @@ import { AiOutlineCheckCircle, AiOutlineDisconnect } from 'react-icons/ai'
 import { FiChevronDown, FiExternalLink } from 'react-icons/fi'
 import { RiArrowDownSLine } from 'react-icons/ri'
 
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { env } from '@/config/environment'
+import { truncateHash } from '@/utils/truncate-hash'
+
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
 
 export interface ConnectButtonProps {}

frontend/src/components/web3/greeter-contract-interactions.tsx

@@ -2,12 +2,7 @@
 
 import { FC, useEffect, useState } from 'react'
 
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Form, FormControl, FormItem, FormLabel } from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
 import { ContractIds } from '@/deployments/deployments'
-import { contractTxWithToast } from '@/utils/contract-tx-with-toast'
 import {
   contractQuery,
   decodeOutput,
@@ -17,6 +12,12 @@ import {
 import { useForm } from 'react-hook-form'
 import toast from 'react-hot-toast'
 
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Form, FormControl, FormItem, FormLabel } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { contractTxWithToast } from '@/utils/contract-tx-with-toast'
+
 type UpdateGreetingValues = { newMessage: string }
 
 export const GreeterContractInteractions: FC = () => {

frontend/src/deployments/deployments.ts

@@ -1,6 +1,7 @@
-import { env } from '@/config/environment'
 import { SubstrateDeployment } from '@scio-labs/use-inkathon'
 
+import { env } from '@/config/environment'
+
 /**
  * Add or change your custom contract ids here
  * DOCS: https://github.com/scio-labs/inkathon#2-custom-contracts

frontend/tsconfig.json

@@ -24,14 +24,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.js",
-    "**/*.jsx",
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.json",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": ["node_modules"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules", ".next", "out"]
 }

inkathon.code-workspace

@@ -22,8 +22,8 @@
     "search.useParentIgnoreFiles": true,
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.organizeImports": true,
-      "source.fixAll.eslint": true
+      "source.organizeImports": "always",
+      "source.fixAll.eslint": "always"
     },
     "files.associations": {
       ".env.*": "dotenv",