Migrate example app to Vite

secretkeylabs · Jul 4, 2024 · e928ace · e928ace
1 parent 2a4a5ba
commit e928ace
Show file tree

Hide file tree

Showing 27 changed files with 3,596 additions and 16,469 deletions.
diff --git a/example/.eslintrc.cjs b/example/.eslintrc.cjs
@@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended-type-checked',
+    'plugin:@typescript-eslint/stylistic-type-checked',
+    'plugin:react-hooks/recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+  },
+};
diff --git a/example/index.html b/example/index.html
@@ -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>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -1,46 +1,36 @@
 {
   "name": "dapp-cookie-cutter",
-  "version": "0.1.0",
   "private": false,
+  "version": "0.1.0",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/secretkeylabs/dapp-cookie-cutter"
   },
-  "license": "ISC",
   "description": "A cookie cutter for dapps using sats-connect",
   "scripts": {
-    "prepare": "cd .. && npm i && npm run build && cd example",
-    "start": "GENERATE_SOURCEMAP=false PORT=3001 react-scripts start",
-    "build": "react-scripts build",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@types/node": "^16.18.87",
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "eslint-plugin-react": "^7.34.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "sats-connect": "file:..",
-    "styled-components": "6.1.11",
-    "typescript": "^4.9.5"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "styled-components": "6.1.11"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1"
   }
 }
diff --git a/example/src/App.css b/example/src/App.css
diff --git a/example/src/App.styles.ts b/example/src/App.styles.ts
@@ -5,3 +5,101 @@ export const ConnectButtonsContainer = styled.div({
   flexDirection: 'column',
   gap: '0.5rem',
 });
+
+export const Container = styled.div({
+  minHeight: '100vh',
+  backgroundColor: '#282c34',
+  color: '#aeaeae',
+  fontSize: 'calc(10px + 1vmin)',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const Body = styled.div({
+  backgroundColor: 'black',
+  minHeight: '100vh',
+  width: '100vw',
+  maxWidth: '1000px',
+  padding: '30px',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const Header = styled.header({
+  backgroundColor: 'black',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '50px',
+  borderRadius: '20px',
+});
+
+export const Logo = styled.img({
+  marginBottom: '20px',
+});
+
+export const Action = styled.span({
+  color: '#ff4d00',
+});
+
+export const NetworkSelectionButton = styled.button({
+  textAlign: 'center',
+  marginBottom: '20px',
+});
+
+export const Card = styled.div({
+  backgroundColor: 'white',
+  color: '#282c34',
+  padding: '0 20px 20px 20px',
+  marginBottom: '30px',
+  borderRadius: '20px',
+});
+
+export const Success = styled.div({
+  color: 'green',
+});
+
+export const Button = styled.button({
+  opacity: 0.9,
+  padding: '10px 20px',
+  minWidth: '130px',
+  backgroundColor: '#ff4d00',
+  color: 'white',
+  fontWeight: 'bold',
+  border: 'none',
+  borderRadius: '5px',
+  cursor: 'pointer',
+  ':hover': {
+    opacity: 1,
+  },
+  ':active': {
+    backgroundColor: '#ff6a00',
+  },
+  ':disabled': {
+    opacity: 0.5,
+    backgroundColor: '#ff4d00',
+    cursor: 'not-allowed',
+  },
+});
+
+export const Input = styled.input({
+  marginTop: '5px',
+  width: '300px',
+  padding: '10px',
+  fontWeight: 'bold',
+  fontSize: '1rem',
+  ':focus-visible': {
+    outline: '#ff4d00 auto 1px',
+  },
+});
+
+export const H4 = styled.h4({
+  marginBlockEnd: '0.5em',
+});
+
+export const Code = styled.code({
+  fontFamily: 'source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace',
+});
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,5 +1,4 @@
 import Wallet, { type Address, AddressPurpose, BitcoinNetworkType } from 'sats-connect';
-import './App.css';
 import {
   AddressDisplay,
   EtchRunes,
@@ -12,7 +11,7 @@ import { useLocalStorage } from './hooks';
 import { useCallback } from 'react';
 import GetBtcBalance from './components/GetBtcBalance';
 import GetRunesBalance from './components/GetRunesBalance';
-import { ConnectButtonsContainer } from './App.styles';
+import { Container, ConnectButtonsContainer, Header, Logo, Body, Button } from './App.styles';
 import GetInscriptions from './components/GetInscriptions';
 
 function App() {
@@ -79,25 +78,25 @@ function App() {
 
   if (!isConnected) {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img className="logo" src="/sats-connect.svg" alt="SatsConnect" />
+      <Container>
+        <Header>
+          <Logo src="/sats-connect.svg" alt="SatsConnect" />
           <NetworkSelector network={network} setNetwork={setNetwork} />
           <p>Click the button to connect your wallet</p>
           <ConnectButtonsContainer>
-            <button onClick={onConnect}>Connect</button>
-            <button onClick={onConnectLegacy}>Connect (Legacy)</button>
+            <Button onClick={onConnect}>Connect</Button>
+            <Button onClick={onConnectLegacy}>Connect (Legacy)</Button>
           </ConnectButtonsContainer>
-        </header>
-      </div>
+        </Header>
+      </Container>
     );
   }
 
   return (
-    <div className="App">
-      <div className="App-body">
+    <Container>
+      <Body>
         <div>
-          <img className="logo" src="/sats-connect.svg" alt="SatsConnect" />
+          <Logo src="/sats-connect.svg" alt="SatsConnect" />
         </div>
         <AddressDisplay
           network={network}
@@ -111,8 +110,8 @@ function App() {
         <EtchRunes network={network} addresses={[...btcAddressInfo, ...legacyAddressInfo]} />
         <GetRunesBalance />
         <GetInscriptions />
-      </div>
-    </div>
+      </Body>
+    </Container>
   );
 }
 

diff --git a/example/src/components/AddressDisplay/index.tsx b/example/src/components/AddressDisplay/index.tsx
@@ -1,4 +1,5 @@
 import { Address, BitcoinNetworkType } from 'sats-connect';
+import { Button, Card, H4 } from '../../App.styles';
 
 type Props = {
   network: BitcoinNetworkType;
@@ -8,19 +9,19 @@ type Props = {
 
 const AddressDisplay = ({ network, addresses, onDisconnect }: Props) => {
   return (
-    <div className="card">
+    <Card>
       <h3>Connected Addresses - ({network})</h3>
       {addresses.map((address) => (
         <div key={address.purpose}>
-          <h4>{address.purpose}</h4>
+          <H4>{address.purpose}</H4>
           <div>Address: {address.address}</div>
           <div>Public key: {address.publicKey}</div>
         </div>
       ))}
       <div>
-        <button onClick={onDisconnect}>Disconnect</button>
+        <Button onClick={onDisconnect}>Disconnect</Button>
       </div>
-    </div>
+    </Card>
   );
 };
 

diff --git a/example/src/components/EtchRunes/index.styles.ts b/example/src/components/EtchRunes/index.styles.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const Container = styled.div({
+  display: 'flex',
+  flexWrap: 'wrap',
+  justifyContent: 'space-between',
+  paddingRight: 100,
+  marginBottom: 20,
+});