updated to vite

0xsequence · Sep 7, 2023 · 2ca3c26 · 2ca3c26
1 parent 9a92d5a
commit 2ca3c26
Show file tree

Hide file tree

Showing 12 changed files with 893 additions and 5,049 deletions.
diff --git a/examples/react/public/index.html → examples/react/index.html b/examples/react/public/index.html → examples/react/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/favicon.svg">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -13,7 +13,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -28,15 +28,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -19,25 +19,27 @@
     "framer-motion": "^8.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
     "typescript": "^5.0.4",
     "viem": "1.4.1",
     "wagmi": "^1.3.9",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
-    "@craco/craco": "7.0.0-alpha.9",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.11",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
-    "@vanilla-extract/webpack-plugin": "^2.3.0"
+    "@vanilla-extract/webpack-plugin": "^2.3.0",
+    "@vanilla-extract/vite-plugin": "^3.7.1",
+    "@vitejs/plugin-react": "^3.1.0",
+    "vite": "^4.1.1",
+    "vite-plugin-svgr": "^2.4.0",
+    "vite-tsconfig-paths": "^4.0.5"
   },
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
-    "test": "craco test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
   },
   "eslintConfig": {
     "extends": [

diff --git a/examples/react/tsconfig.json b/examples/react/tsconfig.json
@@ -1,7 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2021",
-    "module": "esnext",
+    "target": "ESNext",
     "lib": [
       "dom",
       "dom.iterable",
@@ -11,14 +10,16 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "strict": true,
+    "strict": false,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["vite/client", "vite-plugin-svgr/client"],
   },
   "include": [
     "src"

diff --git a/examples/react/vite.config.js b/examples/react/vite.config.js
@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite';
+import dns from 'dns'
+import react from '@vitejs/plugin-react';
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import viteTsconfigPaths from 'vite-tsconfig-paths';
+import svgrPlugin from 'vite-plugin-svgr'
+
+dns.setDefaultResultOrder('verbatim')
+
+export default defineConfig(() => {
+  return {
+    // build: {
+    //   outDir: 'build',
+    // },
+    plugins: [
+      react(),
+      viteTsconfigPaths(),
+      svgrPlugin(),
+      vanillaExtractPlugin(),
+    ],
+    server: {
+      port: 4444,
+      fs: {
+        // Allow serving files from one level up to the project root
+        allow: ['..']
+      }
+    },
+    base: '/',
+  };
+});
diff --git a/packages/connectors/package.json b/packages/connectors/package.json
@@ -14,8 +14,7 @@
   },
   "dependencies": {
     "@0xsequence/provider": "^1.1.13",
-    "@0xsequence/wagmi-connector": "^2.1.0",
-    "buffer": "^6.0.3"
+    "@0xsequence/wagmi-connector": "^2.1.0"
   },
   "devDependencies": {
     "@0xsequence/design-system": "^1.0.11",

diff --git a/packages/connectors/src/connectors/apple/apple.ts b/packages/connectors/src/connectors/apple/apple.ts
@@ -3,8 +3,6 @@ import { SocialConnector, SocialConnectorOptions } from '../wagmiConnectors';
 
 import { getAppleLogo, getAppleMiniLogo } from './AppleLogo'
 
-window.Buffer = window.Buffer || require("buffer").Buffer;
-
 export interface AppleOptions {
   chains: Chain[];
   options?: SocialConnectorOptions;

diff --git a/packages/connectors/src/connectors/discord/discord.ts b/packages/connectors/src/connectors/discord/discord.ts
@@ -3,8 +3,6 @@ import {  SocialConnector, SocialConnectorOptions } from '../wagmiConnectors';
 
 import { getDiscordLogo } from './DiscordLogo'
 
-window.Buffer = window.Buffer || require("buffer").Buffer;
-
 export interface DiscordOptions {
   chains: Chain[];
   options?: SocialConnectorOptions;

diff --git a/packages/connectors/src/connectors/email/email.ts b/packages/connectors/src/connectors/email/email.ts
@@ -5,7 +5,6 @@ import { getEmailLogo } from './EmailLogo'
 
 export const EMAIL_CONNECTOR_LOCAL_STORAGE_KEY = '@sequence.kit.connector.email'
 
-window.Buffer = window.Buffer || require("buffer").Buffer;
 
 export interface EmailOptions {
   chains: Chain[];

diff --git a/packages/connectors/src/connectors/facebook/facebook.ts b/packages/connectors/src/connectors/facebook/facebook.ts
@@ -3,8 +3,6 @@ import { SocialConnector, SocialConnectorOptions } from '../wagmiConnectors';
 
 import { FacebookLogo, getFacebookMiniLogo } from './FacebookLogo'
 
-window.Buffer = window.Buffer || require("buffer").Buffer;
-
 export interface FacebookOptions {
   chains: Chain[];
   options?: SocialConnectorOptions;

diff --git a/packages/connectors/src/connectors/google/google.ts b/packages/connectors/src/connectors/google/google.ts
@@ -3,8 +3,6 @@ import { SocialConnector, SocialConnectorOptions } from '../wagmiConnectors';
 
 import { GoogleLogo, getMiniGoogleLogo } from './GoogleLogo'
 
-window.Buffer = window.Buffer || require("buffer").Buffer;
-
 export interface GoogleOptions {
   chains: Chain[];
   options?: SocialConnectorOptions;

diff --git a/packages/connectors/src/connectors/walletConnect/walletConnect.ts b/packages/connectors/src/connectors/walletConnect/walletConnect.ts
@@ -2,8 +2,6 @@ import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
 
 import { WalletConnectLogo } from './WalletConnectLogo'
 
-window.Buffer = window.Buffer || require("buffer").Buffer;
-
 export type WalletConnectWalletOptions = ConstructorParameters<
   typeof WalletConnectConnector
 >[0];