chore: update prettier setup with twin.macro plugin

.prettierrc.json → .prettierrc.js

@@ -1,7 +1,7 @@
-{
+module.exports = {
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "es5",
+  "trailingComma": "all",
   "printWidth": 100,
   "tabWidth": 2,
   "useTabs": false

packages/contracts/.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ...require('../../.prettierrc.js'),
+}

packages/frontend/.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  ...require('../../.prettierrc.js'),
+  plugins: [require('prettier-plugin-twin.macro')],
+}

packages/frontend/package.json

@@ -17,16 +17,16 @@
     "eslint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@ethathon/contracts": "workspace:*",
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.5",
+    "@ethathon/contracts": "workspace:*",
     "@rainbow-me/rainbowkit": "^0.7.4",
     "ethers": "^5.7.2",
     "next": "^13.0.1",
-    "next-transpile-modules": "^10.0.0",
     "next-seo": "^5.13.0",
+    "next-transpile-modules": "^10.0.0",
     "nprogress": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -56,6 +56,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.10",
     "prettier": "^2.7.1",
+    "prettier-plugin-twin.macro": "^1.0.10",
     "tailwindcss": "^3.2.1",
     "twin.macro": "rc",
     "typescript": "^4.8.4"

packages/frontend/src/components/layout/BaseLayout.tsx

@@ -4,8 +4,8 @@ import 'twin.macro'
 export const BaseLayout: FC<PropsWithChildren> = ({ children }) => {
   return (
     <>
-      <div tw="min-h-full flex flex-col relative">
-        <main tw="grow flex flex-col relative">{children}</main>
+      <div tw="relative flex min-h-full flex-col">
+        <main tw="relative flex grow flex-col">{children}</main>
       </div>
     </>
   )

packages/frontend/src/components/layout/CenterBody.tsx

@@ -1,3 +1,3 @@
 import tw from 'twin.macro'
 
-export const CenterBody = tw.div`h-full flex flex-col justify-center items-center relative`
+export const CenterBody = tw.div`relative flex h-full flex-col items-center justify-center`

packages/frontend/src/components/layout/Wrapper.tsx

@@ -6,10 +6,10 @@ export interface WrapperProps {
 }
 export const Wrapper = styled.div(({ noVerticalPadding, noHorizontalPadding }: WrapperProps) => [
   tw`relative mx-auto w-full max-w-[1200px]`,
-  noVerticalPadding ? tw`py-0` : tw`py-4 sm:(py-6) lg:py-8`,
-  noHorizontalPadding ? tw`px-4` : tw`sm:(px-8)`,
+  noVerticalPadding ? tw`py-0` : tw`py-4 sm:py-6 lg:py-8`,
+  noHorizontalPadding ? tw`px-4` : tw`sm:px-8`,
 ])
 
 export const NegativeWrapper = styled.div(() => [
-  tw`relative -mx-4 -my-4 sm:(-mx-6) lg:(-mx-8 -my-6)`,
+  tw`relative -mx-4 -my-4 sm:-mx-6 lg:(-mx-8 -my-6)`,
 ])

packages/frontend/src/deployments/deployments.ts

@@ -12,5 +12,5 @@ export const deployments: DeploymentsType = env.supportedChains.reduce(
     ...acc,
     [chainId]: import(`@ethathon/contracts/deployments/${chainId}.json`),
   }),
-  {}
+  {},
 )

packages/frontend/src/pages/index.tsx

@@ -11,7 +11,7 @@ import toast from 'react-hot-toast'
 import tw from 'twin.macro'
 import { useSigner } from 'wagmi'
 
-const Button = tw.button`m-2 px-2 py-1 rounded-lg border border-current text-gray-400 font-semibold hover:(text-white)`
+const Button = tw.button`m-2 rounded-lg border border-current px-2 py-1 font-semibold text-gray-400 hover:text-white`
 
 const HomePage: NextPage = () => {
   const { data: signer } = useSigner()
@@ -52,16 +52,16 @@ const HomePage: NextPage = () => {
           <Link
             href="https://github.com/ethathon/ethathon"
             target="_blank"
-            tw="mb-2 opacity-50 cursor-pointer hover:opacity-100"
+            tw="mb-2 cursor-pointer opacity-50 hover:opacity-100"
           >
             <Image src={githubIcon} priority width={42} height={42} alt="Github Logo" />
           </Link>
-          <h1 tw="text-3xl font-bold tracking-tight">ETHathon</h1>
-          <p tw="text-gray-400 mt-1">Smart Contract & DApp Development Boilerplate</p>
+          <h1 tw="font-bold text-3xl tracking-tight">ETHathon</h1>
+          <p tw="mt-1 text-gray-400">Smart Contract & DApp Development Boilerplate</p>
           <a tw="mt-4" href="https://github.com/ethathon/ethathon#deployment">
             <Image src={vercelIcon} priority width={92} height={32} alt="Deploy with Vercel" />
           </a>
-          <div tw="w-14 h-[2px] bg-gray-800 my-14" />
+          <div tw="my-14 w-14 bg-gray-800 h-[2px]" />
         </div>
 
         {/* Rainbowkit Connect Button */}
@@ -70,7 +70,7 @@ const HomePage: NextPage = () => {
         {/* Lock.sol Contract Interactions */}
         {signer && (
           <div tw="mt-6 flex items-center">
-            <div tw="text-gray-400 mr-2">Lock.sol:</div>
+            <div tw="mr-2 text-gray-400">Lock.sol:</div>
             <Button onClick={() => getOwner()}>Get Owner</Button>
             <Button onClick={() => withdraw()}>Withdraw</Button>
           </div>

packages/frontend/src/shared/wagmiClient.ts

@@ -9,7 +9,7 @@ import { env } from './environment'
  */
 
 export const defaultChain: Chain | undefined = allChains.find(
-  (chain) => env.defaultChain === chain.id
+  (chain) => env.defaultChain === chain.id,
 )
 
 export const isChainSupported = (chainId?: number): boolean => {
@@ -37,7 +37,7 @@ export const {
       },
     }),
     publicProvider(),
-  ]
+  ],
 )
 
 const { connectors } = getDefaultWallets({

packages/frontend/src/styles/GlobalStyles.tsx

@@ -7,13 +7,13 @@ const customStyles = css`
     ${tw`scroll-smooth antialiased`}
   }
   body {
-    ${tw`bg-black text-white font-mono`}
-    ${tw`h-screen min-h-screen relative`}
+    ${tw`bg-black font-mono text-white`}
+    ${tw`relative h-screen min-h-screen`}
   }
 
   #__next,
   #__next > div {
-    ${tw`h-full min-h-full flex flex-col relative`}
+    ${tw`relative flex h-full min-h-full flex-col`}
   }
 
   /* Progress Bar */