Merge pull request #6 from vacuumlabs/refactor-fe

Refactor CAP related things

Author: goktug-gurbuzturk-wp

package-lock.json

@@ -22,6 +22,7 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-replace": "^6.0.2",
     "ethers": "^5.5.1",
     "rollup": "^2.58.0",
     "rollup-plugin-copy": "^3.4.0",

package.json

@@ -7,6 +7,7 @@ import css from 'rollup-plugin-css-only';
 import copy from 'rollup-plugin-copy';
 import gzipPlugin from 'rollup-plugin-gzip';
 import { brotliCompressSync } from 'zlib';
+import replace from '@rollup/plugin-replace';
 
 const production = !process.env.ROLLUP_WATCH;
 const hash = String(require('child_process').execSync('git rev-parse --short HEAD')).trim(); // append short git commit to bundles
@@ -48,6 +49,12 @@ export default {
 			}
 		}),
 
+		replace({
+			preventAssignment: true,
+			'process.env.DEFAULT_CHAIN_ID': process.env.DEFAULT_CHAIN_ID || 31338,
+			'process.env.DEFAULT_RPC_URL': JSON.stringify(process.env.DEFAULT_RPC_URL || 'http://localhost:8555'),
+		}),
+
 		production && gzipPlugin(),
 		production && gzipPlugin({
             customCompression: content =>

rollup.config.js

@@ -116,8 +116,6 @@
 
 </style>
 
-<div class='notice'>PLEASE DO NOT USE THIS WEBSITE. A new version of CAP is now available. Check it out <a href='https://cap.io'>here</a>.</div>
-
 <Modals />
 <Toasts />
 

src/App.svelte

@@ -287,11 +287,4 @@
 
 	</div>
 
-	{#if !$address}
-	<div class='note'>CAP is an open protocol to trade crypto perpetuals with low fees. <a data-intercept="true" on:click={() => {showModal('Connect')}}>Connect your wallet</a> on Arbitrum to get started.</div>
-	{:else if $address && balance * 1 == 0}
-	<div class='note'><a href='https://docs.cap.finance/setting-up-your-wallet' target='_blank'>Bridge funds</a> to Arbitrum to start trading.</div>
-	{/if}
-	
-
 </div>

src/components/Order.svelte

@@ -11,10 +11,16 @@
 
 	import { shortAddress, showModal } from '../lib/utils'
 
+	import {CHAINDATA} from '../lib/constants'
+
 	onMount(async () => {
 		await checkMetamaskSession();
 	});
 
+	// TODO (autonom): Find another solution when we support multiple L2 chains
+	const DEFAULT_CHAIN_ID = Number(process.env.DEFAULT_CHAIN_ID);
+	const CHAIN_NAME = CHAINDATA[DEFAULT_CHAIN_ID]?.name;
+
 </script>
 
 <style>
@@ -56,7 +62,7 @@
 <div class='wallet'>
 
 	{#if $address && $wrongNetwork}
-	<div class='wrong-network' on:click={() => {switchChains()}}>Switch to Arbitrum</div>
+	<div class='wrong-network' on:click={() => {switchChains()}}>Switch to {CHAIN_NAME}</div>
 	{/if}
 
 	{#if $address}

src/components/Wallet.svelte

@@ -83,12 +83,9 @@
 	<div class='inner' class:home={!$currentPage || $currentPage == 'home'}>
 
 		<div class='left'>
-			<a class='logo' class:active={!$currentPage || $currentPage == 'home'} href='/'>
-				<img src='/logos/CAP.svg' title='CAP Home' alt='CAP Home' />
-			</a>
+			<!-- TODO (autonom): add Autonom logo here -->
 			<a class='link' class:active={$currentPage == 'trade'} href='#/trade'>Trade</a>
 			<a class='link' class:active={$currentPage == 'pool'} href='#/pool'>Pool</a>
-			<a class='link' href='https://docs.cap.finance' target='_blank'>Docs</a>
 		</div>
 
 		<div class='right'>

src/components/layout/Header.svelte

@@ -1,6 +1,6 @@
 <script>
 	import Modal from '../modals/Modal.svelte'
-	import { connectMetamask, connectWalletConnect } from '../../lib/wallet'
+	import { connectMetamask } from '../../lib/wallet'
 	
 </script>
 
@@ -50,9 +50,4 @@
 		<div>MetaMask</div>
 	</div>
 
-	<div class='row' on:click={() => {connectWalletConnect()}} data-intercept="true">
-		<img src='https://raw.githubusercontent.com/WalletConnect/walletconnect-assets/master/Icon/Blue%20(Default)/Icon.svg'>
-		<div>WalletConnect</div>
-	</div>
-
 </Modal>

src/components/modals/Connect.svelte

@@ -3,6 +3,12 @@
 	import Button from '../layout/Button.svelte'
 
 	import { switchChains } from '../../lib/wallet'
+
+	import {CHAINDATA} from '../../lib/constants'
+
+	// TODO (autonom): Find another solution when we support multiple L2 chains
+	const DEFAULT_CHAIN_ID = Number(process.env.DEFAULT_CHAIN_ID);
+	const CHAIN_NAME = CHAINDATA[DEFAULT_CHAIN_ID]?.name;
 </script>
 
 <style>
@@ -17,9 +23,9 @@
 <Modal title='Invalid Network' showHeader={true} showCancel={true}>
 
 	<div class='note'>
-		Select Arbitrum as your wallet's network to trade or pool on CAP.
+		Select {CHAIN_NAME} as your wallet's network to trade or pool on CAP.
 	</div>
 
-	<Button wrap={true} onClick={() => {switchChains()}} label={`Switch to Arbitrum`} />
+	<Button wrap={true} onClick={() => {switchChains()}} label={`Switch to ${CHAIN_NAME}`} />
 
 </Modal>

src/components/modals/Network.svelte

@@ -26,7 +26,7 @@
 		grid-template-rows: calc(var(--ticker-height) + var(--chart-resolution-height) + var(--chart-height) + 3 * var(--grid-gap)) auto;
 		background-color: var(--rich-black-fogra);
 		position: absolute;
-		top: calc(var(--header-height) + var(--grid-gap) + 44px);
+		top: calc(var(--header-height) + var(--grid-gap));
 		bottom: 0;
 		left: 0;
 		right: 0;