Merge pull request #7 from sayandcode/docs/personal-portfolio-interop

Add documentation to interoperate with personal portfolio

.github/workflows/deploy-web-app.yml

@@ -42,4 +42,4 @@ jobs:
         run: |
           cd web-app/infra
           echo "$WEB_APP_INFRA_ENV" > .env
-          npm run deploy
+          npm run deploy:ci

contracts/.env.sample

@@ -5,7 +5,7 @@ DEPLOYER_ACC_NAME=''
 CHAIN_NAME="sepolia"
 
 # The API key for verifying contract code on etherscan
-ETHER_SCAN_API_KEY="4R9KW77TXKSQ1PV4STEWF1ZHHNZDZ2YAIG"
+ETHER_SCAN_API_KEY=""
 
 # The RPC URL for broadcasting the contract deployment
-RPC_URL="https://eth-sepolia.g.alchemy.com/v2/mf16xqfXJrEylHiHuhg4nPfg6H5T9n2l"
+RPC_URL=""

contracts/README.md

@@ -1,4 +1,4 @@
-# @dev README
+# @dev README - Contracts
 
 This project is built with [foundry](https://book.getfoundry.sh/).
 

documentation/screenshots/count.txt

@@ -0,0 +1 @@
+6

web-app/infra/.env..sample → web-app/infra/.env.sample

@@ -2,7 +2,7 @@
 STAKING_CONTRACT_ADDRESS=""
 STAKING_TOKEN_ADDRESS=""
 REWARD_TOKEN_ADDRESS=""
-PRODUCTION_CHAIN_INFO='{"iconUrls":[],"nativeCurrency":{"name":"xANV","symbol":"xANV","decimals":18},"rpcUrls":["http://localhost:8545"],"chainId":"0x7a69","chainName":"Anvil", "blockExplorerUrls": ["https://mumbai.polygonscan.com"]}'
+PRODUCTION_CHAIN_INFO=''
 BLOCK_EXPLORER_TX_URL=""
 BLOCK_EXPLORER_ADDRESS_URL=""
 STATIC_CACHE_TIME_IN_S=""

web-app/infra/README.md

@@ -1,14 +1,12 @@
-# Welcome to your CDK TypeScript project
+# @dev README - Infrastructure as Code
 
-This is a blank project for CDK development with TypeScript.
-
-The `cdk.json` file tells the CDK Toolkit how to execute your app.
+## Prerequisites
+Create a _.env_ file with the secrets defined as per [.env schema](/web-app/infra/lib/utils/env.ts)
 
 ## Useful commands
-
-* `npm run build`   compile typescript to js
-* `npm run watch`   watch for changes and compile
-* `npm run test`    perform the jest unit tests
-* `npx cdk deploy`  deploy this stack to your default AWS account/region
-* `npx cdk diff`    compare deployed stack with current state
-* `npx cdk synth`   emits the synthesized CloudFormation template
+* `npm run build` - Builds the application src and the infrastructure template
+* `npm run deploy` - Deploy this stack 
+* `npm run deploy:ci` - Deploy this stack while on CI server
+* `npm run undeploy` - Destroys the stack
+* `npm run typecheck` - Runs typescript compiler for typechecking (doesn't emit compiled files)
+* `npm run lint` - Lints with ESLint

web-app/src/.env.sample

@@ -1,8 +1,8 @@
 STAKING_CONTRACT_ADDRESS=""
 STAKING_TOKEN_ADDRESS=""
 REWARD_TOKEN_ADDRESS=""
-PRODUCTION_CHAIN_INFO='{"iconUrls":[],"nativeCurrency":{"name":"xANV","symbol":"xANV","decimals":18},"rpcUrls":["http://localhost:8545"],"chainId":"0x7a69","chainName":"Anvil", "blockExplorerUrls":["https://etherscan.io/"]}'
-BLOCK_EXPLORER_TX_URL="https://etherscan.io/tx/"
-BLOCK_EXPLORER_ADDRESS_URL="https://etherscan.io/address/"
-STATIC_CACHE_TIME_IN_S="60"
-RPC_QUERY_MAX_BLOCK_COUNT="2"
+PRODUCTION_CHAIN_INFO=''
+BLOCK_EXPLORER_TX_URL=""
+BLOCK_EXPLORER_ADDRESS_URL=""
+STATIC_CACHE_TIME_IN_S=""
+RPC_QUERY_MAX_BLOCK_COUNT=""

web-app/src/README.md

@@ -1,7 +1,10 @@
-# Finthetix Web App
+# @dev README - Web App
 
-## Development Server
-### Step 1: Deploy in Local Anvil Chain
+## Prerequisites
+### BlockChain RPC with deployed Finthetix Contracts
+You need a running RPC node which will relay your requests to the blockchain. Set this up before you start your web server. You make the web server aware of he RPC URL, via [.env variables](#env-vars)
+
+#### Development
 You need a local anvil chain running for development purposes. First start the chain by
 ```sh
 $ anvil
@@ -12,23 +15,26 @@ $ sudo apt install make #optional
 /contracts$ make deploy-dev
 ```
 
-You will receive the deployed contract addresses in the CLI output
+You will receive the deployed contract addresses in the CLI output similar to the following
 > == Return ==
 >
 > stakingTokenAddr: address 0x5FbDB2315678afecb367f032d93F642f64180aa3
 > stakingContractAddr: address 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512
 > rewardTokenAddr: address 0xCafac3dD18aC6c6e92c921884f9E4176737C052c
 
-Copy these to the _web-app/src/.env_ as per the next step.
+Copy these (what's in your CLI, not what's above) to the _web-app/src/.env_ as per the next step.
 
-### Step 2: Env vars
+#### Production
+You may directly interact with smart contracts deployed to an actual blockchain. Just provide, in the .env file, a valid RPC URL ([Alchemy](https://www.alchemy.com/) or [Infura](https://www.infura.io/) will help here), and the addresses of the smart contracts on the deployed chain.
+
+### Env vars
 Add the env variables, for the app to function properly. 
 
 The `PRODUCTION_CHAIN_INFO` is not a necessity in development server, as we hardcode the anvil chain for `NODE_ENV="development"`. But the smart contract addresses obtained after deploying the smart contract
 
 The block explorer related env variables are only used for rendering links, not any computation. So you may use dummy values in development.
 
-### Step 3: Start server
+## Development Server
 Run the following command to start the dev server
 ```sh
 /web-app/src$ npm run dev
@@ -37,12 +43,18 @@ Run the following command to start the dev server
 ## Production Server
 The current production environment is a lambda hosting an express server, on which Remix is a handler on an endpoint. This is as per the official express-adapter for Remix
 
+### Building
+First [setup environment variables](#env-vars). Then, build the production server with
+```sh
+/web-app/src$ npm run build
+```
+
 ### Running locally
-You can optionally run the express server locally, so that you can interact with the production smart contract. In production mode,  the `PRODUCTION_CHAIN_INFO` environment variable is picked up, instead of the hardcoded anvil chain.
+You can optionally run the express server locally **after building**, so that you can interact with the production smart contract. This is because, in production mode,  the `PRODUCTION_CHAIN_INFO` environment variable is picked up, instead of the hardcoded local anvil chain.
 
 To start the server run
 ```sh
 /web-app/src$ npm run start
 ```
 
-For actual production use, we use an express server mounted on a lambda handler. For running this setup locally, we just start the express server as a standalone server using `app.listen(3000)`
+For actual production use, we mount the express server on a lambda handler using [Serverless HTTP](https://www.npmjs.com/package/serverless-http). For running this setup locally, we just start the express server as a standalone server using `app.listen(3000)`

web-app/src/app/root.tsx

@@ -116,7 +116,7 @@ export function ErrorBoundary() {
         <Links />
       </head>
       <body>
-        <div className="h-dvh flex flex-col justify-center items-center text-center gap-y-2">
+        <div className="h-svh flex flex-col justify-center items-center text-center gap-y-2">
           <h1 className="text-3xl font-semibold">
             Oops! Something went wrong (
             {validatedError.status }

web-app/src/app/routes/$/route.tsx

@@ -23,7 +23,7 @@ export const headers: HeadersFunction = () => {
 export default function SplatRoute() {
   const { pathname } = useLocation();
   return (
-    <div className="flex flex-col justify-center items-center h-[80dvh] gap-4 px-2">
+    <div className="flex flex-col justify-center items-center h-[80svh] gap-4 px-2">
       <img src={img404} alt="" className="max-w-xs w-2/3 md:w-full" />
       <UnderlineLink
         className="text-sm mx-auto text-center block"

web-app/src/app/routes/_index/subcomponents/HeroSection/index.tsx

@@ -17,7 +17,7 @@ export default function HeroSection() {
   const isBtnDisabled = isUserLoading || isUserLoggedIn;
 
   return (
-    <section className="flex flex-col gap-y-2 items-center justify-center h-dvh text-center">
+    <section className="flex flex-col gap-y-2 items-center justify-center h-svh text-center">
       <h1 className="text-5xl sm:text-6xl font-bold">Finthetix</h1>
       <p className="text-xl">Earn rewards by staking tokens</p>
       <Button onClick={login} disabled={isBtnDisabled}>

web-app/src/app/routes/_index/subcomponents/RippleHeroBg/index.tsx

@@ -2,7 +2,7 @@ import customstyles from './index.module.css';
 
 export default function RippleHeroBg() {
   const styles = `
-  -z-10 h-[120dvh] w-full absolute top-0 left-0 ${customstyles.ripple}
+  -z-10 h-[120svh] w-full absolute top-0 left-0 ${customstyles.ripple}
   `;
 
   return (