@sei-js/create-sei 0.0.0-internal-20240708184136

package/dist/templates/templates/vite-wagmi-template/src/components/Homepage/Homepage.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+import Examples from './Examples';
+import "./Homepage.css"
+
+type HelpItem = {
+	title: string;
+	description: string;
+	link: string;
+};
+
+const renderHelpItem = ({ title, description, link }: HelpItem) => (
+	<div className="card secondary">
+		<div className="card-header">
+			<p className="card__title">
+				<a href={link} target='_blank' rel='noopener noreferrer' className="external-link">
+					{title} {externalIcon}
+				</a>
+			</p>
+			<small className="card__description">
+				{description}
+			</small>
+		</div>
+	</div>
+);
+
+const helpItems: HelpItem[] = [
+	{
+		title: 'Sei Docs',
+		description: 'Find in-depth information about Sei.',
+		link: 'https://docs.sei.io/'
+	},
+	{
+		title: 'Wagmi',
+		description: "Learn about Wagmi and it's hooks for chain interaction.",
+		link: 'https://wagmi.sh/'
+	},
+	{
+		title: 'Viem',
+		description: 'Interact with Sei using Viem modules + Wagmi.',
+		link: 'https://viem.sh/'
+	},
+	{
+		title: 'EVM JSON-RPC API',
+		description: 'Learn about the EVM api available on Sei.',
+		link: 'https://ethereum.org/en/developers/docs/apis/json-rpc/'
+	}
+];
+
+const externalIcon = (
+	<svg
+	  width="16"
+	  height="16"
+	  viewBox="0 0 16 16"
+	  fill="none"
+	  xmlns="http://www.w3.org/2000/svg"
+	>
+	  <path
+		d="M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333"
+		stroke="#9F1239"
+		strokeWidth="1.33333"
+		strokeLinecap="round"
+		strokeLinejoin="round"
+	  />
+	  <path
+		d="M10 2H14V6"
+		stroke="#9F1239"
+		strokeWidth="1.33333"
+		strokeLinecap="round"
+		strokeLinejoin="round"
+	  />
+	  <path
+		d="M6.66663 9.33333L14 2"
+		stroke="#9F1239"
+		strokeWidth="1.33333"
+		strokeLinecap="round"
+		strokeLinejoin="round"
+	  />
+	</svg>
+  );
+
+function Homepage() {
+
+	return (
+      <div className="container">
+		<img src="sei-logotype.svg" className="logo" alt="SEI logotype" />
+		<div className="card intro">
+            <div className="card-header">
+              <p className="card__title">Wallet address</p>
+              <small className="card__description">
+                Connect wallet to see your address and balance
+              </small>
+            </div>
+            <ConnectButton/>
+        </div>
+		<Examples />
+        <div className="get-started">
+          Get started by editing <code>src/App.tsx</code>
+        </div>
+		<div className="grid docs">
+			{helpItems.map((item, index) => (renderHelpItem(item)))}
+		</div>
+      </div>
+	);
+}
+
+export default Homepage;

package/dist/templates/templates/vite-wagmi-template/src/components/Web3Provider.tsx

@@ -0,0 +1,71 @@
+import { RainbowKitProvider, connectorsForWallets, lightTheme } from '@rainbow-me/rainbowkit';
+import { metaMaskWallet } from '@rainbow-me/rainbowkit/wallets';
+import { Buffer } from 'buffer';
+import { ReactNode, useMemo } from 'react';
+import { WagmiProvider, createConfig, http } from 'wagmi';
+
+import '@rainbow-me/rainbowkit/styles.css';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { selectedChain } from '../constants';
+
+const queryClient = new QueryClient();
+
+interface Web3ProviderProps {
+	children: ReactNode;
+}
+
+const connectors = connectorsForWallets(
+    [
+      {
+        groupName: 'Recommended',
+        wallets: [metaMaskWallet],
+      },
+    ],
+    {
+      appName: '<YOUR_APPNAME_HERE>',
+      projectId: "<YOUR_ID_HERE>",
+    }
+  );
+  
+function Web3Provider({ children }: Web3ProviderProps) {
+	// Buffer polyfill
+	if (typeof window !== 'undefined') {
+		window.Buffer = window.Buffer ?? Buffer;
+	}
+	const chainConfig = selectedChain;
+	const config = useMemo(
+		() =>
+			createConfig({
+				chains: [chainConfig],
+				connectors,
+				transports: {
+					[chainConfig.id]: http()
+				}
+			}),
+		[chainConfig]
+	);
+
+	return (
+		<WagmiProvider config={config}>
+			<QueryClientProvider client={queryClient}>
+                <RainbowKitProvider
+                    theme={lightTheme({
+                        accentColor: '#7e1914',
+                        accentColorForeground: 'white',
+                        borderRadius: 'medium',
+                        fontStack: 'system',
+                    })}
+                    appInfo={{
+                        appName: '<APP-NAME-HERE>',
+                        learnMoreUrl: 'https://www.docs.sei.io/user-guides/wallet-setup'
+                    }}
+                    modalSize='compact'
+                    initialChain={chainConfig.id}>
+                    {children}
+                </RainbowKitProvider>
+            </QueryClientProvider>
+		</WagmiProvider>
+	);
+}
+
+export default Web3Provider;

package/dist/templates/templates/vite-wagmi-template/src/constants/chain.ts

@@ -0,0 +1,5 @@
+import { ARCTIC_1_VIEM_CHAIN } from '@sei-js/evm';
+
+// Set your selected chain here
+// To point to mainnet, use PACIFIC_1_VIEM_CHAIN
+export const selectedChain = ARCTIC_1_VIEM_CHAIN

package/dist/templates/templates/vite-wagmi-template/src/constants/index.ts

@@ -0,0 +1 @@
+export * from './chain';

package/dist/templates/templates/vite-wagmi-template/src/index.css

@@ -0,0 +1,170 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+/*
+  2. Remove default margin
+*/
+* {
+  margin: 0;
+}
+/*
+  Typographic tweaks!
+  3. Add accessible line-height
+  4. Improve text rendering
+*/
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+  5. Improve media defaults
+*/
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+/*
+  6. Remove built-in form typography styles
+*/
+input, button, textarea, select {
+  font: inherit;
+}
+/*
+  7. Avoid text overflows
+*/
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+  line-height: 1;
+}
+/*
+  8. Create a root stacking context
+*/
+#root, #__next {
+  isolation: isolate;
+}
+
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color:#000;
+  background: var(--background);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  --primary-color: #9F1239;
+  --primary-color-hover: #7F0A2E;
+  --background: linear-gradient(180deg, #F5F5F4 0%, #FFF 100%);
+  --border: #D6D3D1;
+  --card: #FFF;
+  --card-foreground: #242424;
+}
+
+a {
+  font-weight: 500;
+  color: var(--primary-color);
+  text-decoration: inherit;
+}
+a:hover {
+  color: var(--primary-color-hover)
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1;
+}
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+    display: inline-flex;
+    border-radius: 4px;
+    padding: 0.1rem 0.4rem;
+    background-color: #d7cccc;
+    color: var(--card-foreground);
+}
+
+button {
+  border-radius: 4rem;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #cec9c1;
+  cursor: pointer;
+  transition: all 0.25s ease;
+}
+button:hover {
+  background-color: #b5afa7;
+}
+
+button:disabled {
+  filter:grayscale(1) opacity(0.5);
+  color: rgb(56, 55, 55);
+  pointer-events: none;
+}
+
+button.primary {
+  background-color: var(--primary-color);
+  color: #fff;
+}
+button.outline {
+  background-color: transparent;
+  border: 1px solid var(--border);
+}
+
+button.primary:hover {
+  background-color: var(--primary-color-hover);
+}
+
+button.secondary {
+  background-color: #000;
+  color: #fff;
+}
+
+button.secondary:hover {
+  background-color: #2b2b2b;
+}
+
+button:active {
+  transform: translateY(1px);
+}
+
+button.small {
+  padding: 0.4em 0.8em;
+  font-size: 0.8em;
+}
+
+
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+  outline-offset: 4px;
+}
+
+.header {
+  width: 100%;
+  height: 4rem;
+  padding: 0 1%;
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  background-color: transparent;
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  background: #F5F5F4;
+}

package/dist/templates/templates/vite-wagmi-template/src/main.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import Web3Provider from './components/Web3Provider.tsx'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <Web3Provider>
+      <App />
+    </Web3Provider>
+  </React.StrictMode>,
+)

package/dist/templates/templates/vite-wagmi-template/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/dist/templates/templates/vite-wagmi-template/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/dist/templates/templates/vite-wagmi-template/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/dist/templates/templates/vite-wagmi-template/tsconfig.node.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+		"allowImportingTsExtensions": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

package/dist/templates/templates/vite-wagmi-template/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    exclude: ['js-big-decimal']
+  }
+})