addDydx

.github/workflows/deploytestweb.yaml

@@ -0,0 +1,41 @@
+name: Web UI Dev Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches: [main]
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  Deploy-Dev:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install Vercel CLI
+        run: npm install --global vercel@^33.2.0 # Replace with the current major version
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest # or specify a version
+
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Deploy to Vercel Action
+        uses: BetaHuhn/deploy-to-vercel-action@v1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GH_PAT }}
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+          ALIAS_DOMAINS: |
+            {BRANCH}.app-dev.quicksilver.zone
+          PR_PREVIEW_DOMAIN: "pr-{PR}.app-dev.quicksilver.zone"
+

web-ui/.env

@@ -13,16 +13,20 @@ NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_SOMMELIER="https://lcd.sommelier-3.quicksilver.
 NEXT_PUBLIC_MAINNET_RPC_ENDPOINT_SOMMELIER="https://rpc.sommelier-3.quicksilver.zone"
 NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_JUNO="https://lcd.juno-1.quicksilver.zone"
 NEXT_PUBLIC_MAINNET_RPC_ENDPOINT_JUNO="https://rpc.juno-1.quicksilver.zone"
+NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_DYDX="https://lcd.dydx-mainnet-1.quicksilver.zone"
+NEXT_PUBLIC_MAINNET_RPC_ENDPOINT_DYDX="https://rpc.dydx-mainnet-1.quicksilver.zone"
 NEXT_PUBLIC_QUICKSILVER_API="https://lcd.quicksilver.zone"
 NEXT_PUBLIC_QUICKSILVER_DATA_API="https://data.quicksilver.zone"
 ZONE_URL="quicksilver.zone"
 APY_ZONES_ENDPOINT = "https://chains.cosmos.directory"
 NEXT_PUBLIC_OSMOSIS_API="https://api.osmosis.zone"
-NEXT_PUBLIC_WHITELISTED_DENOM="uatom,ustars,uosmo,usomm,uregen"
-NEXT_PUBLIC_WHITELISTED_ZONES="osmosis-1,stargaze-1,regen-1,cosmoshub-4,sommelier-3"
+NEXT_PUBLIC_WHITELISTED_DENOM="uatom,ustars,uosmo,usomm,uregen,ujuno,udydx"
+NEXT_PUBLIC_WHITELISTED_ZONES="osmosis-1,stargaze-1,regen-1,cosmoshub-4,sommelier-3,juno-1,dydx-mainnet-1"
 NEXT_PUBLIC_COSMOSHUB_CHAIN_ID=cosmoshub-4
 NEXT_PUBLIC_OSMOSIS_CHAIN_ID=osmosis-1
 NEXT_PUBLIC_STARGAZE_CHAIN_ID=stargaze-1
 NEXT_PUBLIC_REGEN_CHAIN_ID=regen-1
 NEXT_PUBLIC_SOMMELIER_CHAIN_ID=sommelier-3
-NEXT_PUBLIC_JUNO_CHAIN_ID=juno-1
+NEXT_PUBLIC_JUNO_CHAIN_ID=juno-1
+NEXT_PUBLIC_DYDX_CHAIN_ID=dydx-mainnet-1
+NEXT_PRIVATE_WALLET_CONNECT_TOKEN="41a0749c331d209190beeac1c2530c90"

web-ui/README.md

@@ -31,25 +31,33 @@ Please use this Prettier config to format your code before opening a pull reques
 
 Please ensure your IDE is configured to use Typescript v4.9.3
 
-### Development ToDo
+### TODO:
 
-**Governance**
+**Staking**
+
+- [ ] Add support for Dymension
+- [ ] Add more weight options IE `equal`, `custom`, `most votes`, `lowest commission` etc
+- [x] Make back button in staking modal larger
+- [x] Fix skeleton spam when searching for non existent validator in staking modal
 
-- add liquid staked governance (when its built)
+**Governance**
 
 **UI/UX**
 
-- focus on mobile landscape breakpoints, (mainly staking page)
+- [ ] Double check breakpoints
 
 **Mobile Menu**
 
-- graphic elements
+- [ ] improve mobile menu
 
 **DevOps**
 
-- make onboarding networks seamless
+- [ ] Add doc for adding networks
+
+**Has Blockers**
+
+- [ ] Build liquid governance page
 
-**Blockers**
+**Assets**
 
-- main net reward current & epoch queries
-- update grantee address in query & tx
+- [ ] Fix the way queries for networks and entries in components are created. Rather than defining one for each network, create a function that iterates through the .env entry or liveNetworks call for live networks and creates the queries and components for each. `pages/assets.tsx`

web-ui/addNetworks.md

@@ -0,0 +1,134 @@
+# Adding Networks
+
+This document will guide you through the process of adding networks to the web UI.
+
+## Table of Contents
+
+- [.env](#.env)
+- [Files](#files)
+- [Queries](#queries)
+- [Components](#components)
+
+### .env
+
+You will need to add a couple of environment variables to the `.env` file in the root of the project. These variables are used to configure the networks that are available to the user and the endpoints that the web UI will use to interact with the blockchain.
+
+**Example .env file additions**
+
+```bash
+NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_NETWORK_NAME="REST_ENDPOINT" # change `NETWORK_NAME`, `REST_ENDPOINT` to the name & endpoint of the network you are adding.
+NEXT_PUBLIC_MAINNET_RPC_ENDPOINT_NETWORK_NAME="RPC_ENDPOINT" # change `NETWORK_NAME` and `RPC_ENDPOINT` to the name & endpoint of the network you are adding.
+
+NEXT_PUBLIC_WHITELISTED_DENOM="uatom,ustars,uosmo,usomm,uregen,ujuno,udydx,NEW_UDENOM" # change `NEW_UDENOM` to the appropriate denom for the network you are adding.
+NEXT_PUBLIC_WHITELISTED_ZONES="osmosis-1,stargaze-1,regen-1,cosmoshub-4,sommelier-3,juno-1,dydx-mainnet-1,NEW_CHAIN_ID" # change `NEW_CHAIN_ID` to the appropriate chain_id for the network you are adding.
+
+NEXT_PUBLIC_CHAIN_NAME_CHAIN_ID="CHAIN_ID" # change `CHAIN_ID` to the appropriate chain_id for the network you are adding.
+```
+
+### Files
+
+There are various files that will require updates to add a new network to the web UI. These files include:
+
+- `hooks/useGrpcQueryClient.ts`
+- `hooks/useRpcQueryClient.ts`
+- `pages/_app.tsx`
+-
+
+### Queries & Signing
+
+The web UI uses tanstack react-query for data fetching and cosmology for query client building. You will need to add a new entry in `hooks/useGrpcQueryClient.ts` & `hooks/useRpcQueryClient.ts` in order to fetch data for your additional network.
+
+Here we rely on the entries in the `.env` file to determine which endpoint to use for the network we are fetching data for so be sure to use the correct endpoint or the query will be broken.
+
+**Example useGrpcQueryClient.ts**
+
+```typescript
+const endpoints: { [key: string]: string | undefined } = {
+  quicksilver:
+    env === 'testnet' ? process.env.NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_QUICKSILVER : process.env.NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_QUICKSILVER,
+  cosmoshub:
+    env === 'testnet' ? process.env.NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_COSMOSHUB : process.env.NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_COSMOSHUB,
+  sommelier:
+    env === 'testnet' ? process.env.NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_SOMMELIER : process.env.NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_SOMMELIER,
+  stargaze:
+    env === 'testnet' ? process.env.NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_STARGAZE : process.env.NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_STARGAZE,
+  regen: env === 'testnet' ? process.env.NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_REGEN : process.env.NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_REGEN,
+  osmosis: env === 'testnet' ? process.env.NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_OSMOSIS : process.env.NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_OSMOSIS,
+  juno: env === 'testnet' ? process.env.NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_JUNO : process.env.NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_JUNO,
+  dydx: env === 'testnet' ? process.env.NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_DYDX : process.env.NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_DYDX,
+  NEW_NETWORK:
+    env === 'testnet' ? process.env.NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_NEW_NETWORK : process.env.NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_NEW_NETWORK,
+};
+```
+
+**Example useRpcQueryClient.ts**
+
+```typescript
+const endpoints: { [key: string]: string | undefined } = {
+  quicksilver: env === 'testnet' ? process.env.TESTNET_RPC_ENDPOINT_QUICKSILVER : process.env.MAINNET_RPC_ENDPOINT_QUICKSILVER,
+  cosmoshub: env === 'testnet' ? process.env.TESTNET_RPC_ENDPOINT_COSMOSHUB : process.env.MAINNET_RPC_ENDPOINT_COSMOSHUB,
+  sommelier: env === 'testnet' ? process.env.TESTNET_RPC_ENDPOINT_SOMMELIER : process.env.MAINNET_RPC_ENDPOINT_SOMMELIER,
+  stargaze: env === 'testnet' ? process.env.TESTNET_RPC_ENDPOINT_STARGAZE : process.env.MAINNET_RP_ENDPOINTC_STARGAZE,
+  regen: env === 'testnet' ? process.env.TESTNET_RPC_ENDPOINT_REGEN : process.env.MAINNET_RPC_ENDPOINT_REGEN,
+  osmosis: env === 'testnet' ? process.env.TESTNET_RPC_ENDPOINT_OSMOSIS : process.env.MAINNET_RPC_ENDPOINT_OSMOSIS,
+  juno: env === 'testnet' ? process.env.TESTNET_RPC_ENDPOINT_JUNO : process.env.MAINNET_RPC_ENDPOINT_JUNO,
+  dydx: env === 'testnet' ? process.env.TESTNET_RPC_ENDPOINT_DYDX : process.env.MAINNET_RPC_ENDPOINT_DYDX,
+  NEW_NETWORK: env === 'testnet' ? process.env.TESTNET_RPC_ENDPOINT_NEW_NETWORK : process.env.MAINNET_RPC_ENDPOINT_NEW_NETWORK,
+};
+```
+
+For signing we must update the `pages/_app.tsx` file to include the new network in the `ChainProvider` `endpointOptions` array. This array is used to determine which endpoints to use.
+
+```typescript
+            endpointOptions={{
+              isLazy: true,
+              endpoints: {
+                quicksilver: {
+                  rpc: [rpcEndpoints.quicksilver ?? ''],
+                  rest: [lcdEndpoints.quicksilver ?? ''],
+                },
+                quicksilvertestnet: {
+                  rest: ['https://lcd.test.quicksilver.zone/'],
+                  rpc: ['https://rpc.test.quicksilver.zone'],
+                },
+                cosmoshub: {
+                  rpc: [rpcEndpoints.cosmoshub ?? ''],
+                  rest: [lcdEndpoints.cosmoshub ?? ''],
+                },
+                sommelier: {
+                  rpc: [rpcEndpoints.sommelier ?? ''],
+                  rest: [lcdEndpoints.sommelier ?? ''],
+                },
+                stargaze: {
+                  rpc: [rpcEndpoints.stargaze ?? ''],
+                  rest: [lcdEndpoints.stargaze ?? ''],
+                },
+                regen: {
+                  rpc: [rpcEndpoints.regen ?? ''],
+                  rest: [lcdEndpoints.regen ?? ''],
+                },
+                osmosis: {
+                  rpc: [rpcEndpoints.osmosis ?? ''],
+                  rest: [lcdEndpoints.osmosis ?? ''],
+                },
+                osmosistestnet: {
+                  rpc: [rpcEndpoints.osmosis ?? ''],
+                  rest: [lcdEndpoints.osmosis ?? ''],
+                },
+                umee: {
+                  rpc: ['https://rpc-umee-ia.cosmosia.notional.ventures/'],
+                  rest: ['https://api-umee-ia.cosmosia.notional.ventures/'],
+                },
+                dydx: {
+                  rpc: [rpcEndpoints.dydx ?? ''],
+                  rest: [lcdEndpoints.dydx ?? ''],
+                },
+                NEW_NETWORK: {
+                  rpc: [rpcEndpoints.NEW_NETWORK ?? ''],
+                  rest: [lcdEndpoints.NEW_NETWORK ?? ''],
+                },
+              },
+            }}
+```
+
+### Components