Merge pull request #1 from ntsd/feat/token

Feat/token
ntsd · Jun 11, 2023 · c663aca · c663aca
2 parents 626a14d + 6b2010c
commit c663aca
Show file tree

Hide file tree

Showing 46 changed files with 1,248 additions and 288 deletions.
diff --git a/config/tailwind.config.cjs b/config/tailwind.config.cjs
@@ -5,34 +5,60 @@ module.exports = {
     extend: {}
   },
   plugins: [require('daisyui')],
+	darkMode: ['media'],
   daisyui: {
     styled: true,
-    themes: true,
     base: true,
     utils: true,
     logs: false,
     rtl: false,
     prefix: '',
     themes: [
       {
-        ZeroShare: {
+        light: {
           'color-scheme': 'light',
           fontFamily:
             'SFMono-Regular, Consolas, Menlo, Monaco, Liberation Mono, Courier New, monospace',
           primary: '#3b5bfb',
-          'primary-content': '#ffffff',
-          secondary: '#7b92b2',
-          'secondary-content': '#181a2a',
+          'primary-content': '#fff',
+          secondary: '#5b7292',
+          'secondary-content': '#fff',
           accent: '#67cba0',
+					'accent-content': '#fff',
           neutral: '#181a2a',
-          'neutral-content': '#edf2f7',
-          'base-100': '#ffffff',
+          'neutral-content': '#fff',
+          'base-100': '#fff',
+					'base-200': '#eee',
+					'base-300': '#ddd',
           'base-content': '#181a2a',
           '--rounded-box': '0',
           '--rounded-btn': '0',
           '--rounded-badge': '0',
           '--tab-radius': '0'
-        }
+        },
+      },
+			{
+        dark: {
+          'color-scheme': 'dark',
+          fontFamily:
+            'SFMono-Regular, Consolas, Menlo, Monaco, Liberation Mono, Courier New, monospace',
+          primary: '#3b5bfb',
+          'primary-content': '#fff',
+          secondary: '#5b7292',
+          'secondary-content': '#fff',
+          accent: '#67cba0',
+					'accent-content': '#fff',
+          neutral: '#181a2a',
+          'neutral-content': '#fff',
+          'base-100': '#0d1117',
+					'base-200': '#1d2127',
+					'base-300': '#2d3137',
+          'base-content': '#fff',
+          '--rounded-box': '0',
+          '--rounded-btn': '0',
+          '--rounded-badge': '0',
+          '--tab-radius': '0'
+        },
       }
     ]
   }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,15 +31,16 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@hotcode/cron-schedule": "^4.0.0",
 		"@macfja/svelte-persistent-store": "^2.3.0",
 		"autoprefixer": "^10.4.14",
-		"@hotcode/cron-schedule": "^4.0.0",
 		"crypto-js": "^4.1.1",
 		"daisyui": "^2.51.6",
+		"node-machine-id": "^1.1.12",
 		"postcss": "^8.4.23",
 		"svelte": "^3.44.2",
 		"svelte-spa-router": "^3.3.0",
 		"tailwindcss": "^3.3.2",
 		"web3": "^1.6.1"
 	}
-}
+}
diff --git a/src/components/BottomNav.svelte b/src/components/BottomNav.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { link } from 'svelte-spa-router';
+	import active from 'svelte-spa-router/active';
+	import { menus } from '../configs';
+</script>
+
+<div class="btm-nav lg:hidden">
+	{#each menus as menu}
+		<a href={menu.href} use:link use:active={{ className: 'active' }}>
+            <!-- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg> -->
+			<span class="btm-nav-label">{menu.name}</span>
+        </a>
+	{/each}
+</div>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -2,7 +2,7 @@
   import { githubLink } from '../configs';
 </script>
 
-<footer class="footer footer-center pt-10 p-5 text-base-content gap-4">
+<footer class="footer footer-center pt-10 p-5 text-base-content gap-4 hidden lg:block">
   <div class="grid grid-flow-col gap-4">
     <a
       aria-label="Github"
@@ -15,14 +15,14 @@
         height="20"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 512 512"
-        class="inline-block h-5 w-5 fill-current md:h-6 md:w-6"
+        class="inline-block h-5 w-5 fill-current lg:h-6 lg:w-6"
         ><path
           d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z"
         /></svg
       ></a
     >
   </div>
-  <div class="text-xs md:text-sm">
+  <div class="text-xs lg:text-sm">
     <p>
       This project is open-source
       <a

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { githubLink } from '../configs';
+</script>
+
+<div class="navbar w-full lg:px-8">
+	<div class="navbar-start" />
+	<div class="navbar-center">
+		<span class="text-xl font-bold">Auto EVM Wallet</span>
+	</div>
+	<div class="navbar-end">
+		<a
+			aria-label="Github"
+			href={githubLink}
+			target="_blank"
+			rel="noopener noreferrer"
+			class="btn btn-ghost drawer-button btn-square normal-case"
+			><svg
+				width="20"
+				height="20"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 512 512"
+				class="inline-block h-5 w-5 fill-current lg:h-6 lg:w-6"
+				><path
+					d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z"
+				/></svg
+			></a
+		>
+	</div>
+</div>
diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { link } from 'svelte-spa-router';
+	import active from 'svelte-spa-router/active';
+	import { menus } from '../configs';
+</script>
+
+<div class="navbar w-full lg:px-8 hidden lg:flex">
+	<div class="navbar-start" />
+	<div class="navbar-center hidden lg:flex flex-row gap-8">
+		{#each menus as menu}
+			<a href={menu.href} use:link class="link" use:active={{ className: 'link' }}>{menu.name}</a>
+		{/each}
+	</div>
+	<div class="navbar-end" />
+</div>
diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
diff --git a/src/components/contract/SmartContractList.svelte b/src/components/contract/SmartContractList.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { contractsStore, removeContract } from '../../stores/contractsStore';
 	import SmartContractModal from './SmartContractModal.svelte';
+
+	export let chainId: string;
 </script>
 
 <div class="overflow-x-auto">
@@ -18,7 +20,7 @@
 					<td>{contract.name}</td>
 					<td>{contract.address}</td>
 					<td>
-						<SmartContractModal isEdit {contract} />
+						<SmartContractModal isEdit {contract} {chainId} />
 						<button
 							class="btn btn-accent"
 							on:click={() => {

diff --git a/src/components/contract/SmartContractManager.svelte b/src/components/contract/SmartContractManager.svelte
@@ -1,12 +1,23 @@
 <script lang="ts">
 	import SmartContractModal from './SmartContractModal.svelte';
 	import SmartContractList from './SmartContractList.svelte';
+	import { networksStore } from '../../stores/networksStore';
+
+	let chainId = $networksStore.length > 0 ? $networksStore[0].chainId : '';
 </script>
 
 <div class="p-4 space-y-4">
-	<div class="flex justify-between">
+	<div class="flex flex-col lg:flex-row justify-between">
 		<h2 class="text-2xl mb-4">Contracts</h2>
-		<SmartContractModal />
+		<div class="flex flex-col lg:flex-row">
+			<select bind:value={chainId} class="select select-bordered">
+				<option value="">Select a network</option>
+				{#each $networksStore as network}
+					<option value={network.chainId}>{network.name}</option>
+				{/each}
+			</select>
+			<SmartContractModal {chainId} />
+		</div>
 	</div>
-	<SmartContractList />
+	<SmartContractList {chainId} />
 </div>
diff --git a/src/components/contract/SmartContractModal.svelte b/src/components/contract/SmartContractModal.svelte
@@ -4,11 +4,12 @@
 	import { addToastMessage } from '../../stores/toastStore';
 	import type { SmartContract } from '../../types';
 
+	export let chainId: string;
 	export let isEdit: boolean = false;
 	export let contract: SmartContract = {
 		name: '',
 		address: '',
-		chainId: ''
+		chainId: chainId
 	};
 
 	let forId = isEdit ? `edit-contract-${contract.address}` : 'add-contract';
@@ -32,7 +33,7 @@
 
 		contract.name = '';
 		contract.address = '';
-		contract.chainId = '';
+		contract.chainId = chainId;
 	}
 </script>
 
@@ -72,17 +73,6 @@
 					class="input input-bordered"
 				/>
 			</div>
-			<div class="form-control">
-				<div class="label">
-					<span class="label-text">Network</span>
-				</div>
-				<select bind:value={contract.chainId} class="select select-bordered">
-					<option value="">Select a network</option>
-					{#each $networksStore as network}
-						<option value={network.chainId}>{network.name}</option>
-					{/each}
-				</select>
-			</div>
 			<div class="form-control">
 				{#if isEdit}
 					<button on:click={updateContractController} class="btn btn-primary"> Save </button>