qs 2.0 ui

.github/workflows/buildtest.yaml

@@ -1,5 +1,4 @@
 # This is a basic workflow that is manually triggered
-
 name: build and test
 
 # Controls when the action will run. Workflow runs when manually triggered using the UI

.github/workflows/testuideploy.yaml

@@ -0,0 +1,33 @@
+name: Test Deploy to GitHub Pages
+
+on:
+  push:
+    paths:
+      - web-ui/**
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest # or specify a version
+
+      - name: Install Dependencies
+        run: bun install
+
+      - name: Build Project
+        run: bun run build
+
+      - name: Export Project
+        run: bun export
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./out

web-ui/.env

@@ -0,0 +1,12 @@
+NEXT_PUBLIC_CHAIN_ENV="preprod"
+NEXT_PUBLIC_QUICKSILVER_API="https://lcd.quicksilver.zone"
+NEXT_PUBLIC_QUICKSILVER_DATA_API="https://data.quicksilver.zone"
+ZONE_URL="quicksilver.zone"
+REACT_APP_WHITELISTED_ZONES="osmosis-1,stargaze-1,regen-1,cosmoshub-4,sommelier-3"
+REACT_APP_ENABLE_UNBONDING="true"
+REACT_APP_ENABLE_SET_INTENT="true"
+REACT_APP_ENABLE_CLAIMS="true"
+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"

web-ui/.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "extends": "next/core-web-vitals",
+  "plugins": ["import"],
+  "rules": {
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          ["builtin", "external"],
+          "internal",
+          ["parent", "sibling", "index"]
+        ],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ]
+  }
+}

web-ui/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+.vscode
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

web-ui/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 140,
+  "tabWidth": 2
+}

web-ui/LISCENSE

@@ -0,0 +1,19 @@
+Unauthorized production use of this software, via any platform, is strictly prohibited.
+
+Proprietary and confidential.
+
+Terms and Conditions:
+
+1. You may not use, modify, copy, or distribute this software with the intent to launch it publicly without express written permission from the author.
+
+2. You may not reverse-engineer, decompile, or disassemble the software.
+
+3. You may not sublicense or create derivative works based on the software.
+
+4. Use of this software without agreement to these terms is unauthorized use and subject to legal action.
+
+5. The author makes no warranties or representations about the software's fitness for any particular purpose. You use the software at your own risk.
+
+Contact Information:
+
+For permission to use the software or any other inquiries, contact the author at [email protected].

web-ui/README.md

@@ -0,0 +1,64 @@
+This is the Quicksilver Liquid Staking App bootstrapped with [`create-cosmos-app`](https://github.com/cosmology-tech/create-cosmos-app) and re-templated to work with Bun.
+
+## Getting Started
+
+First, install the packages and run the development server:
+
+```bash
+bun install && bun run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the webpage.
+
+## Making Contributions
+
+Please work on a branch with a title that reflects what you aim to contribute and open a pull request to the `main` branch.
+
+### Dependencies
+
+Please use this Prettier config to format your code before opening a pull request.
+
+```
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2
+}
+
+```
+
+Please ensure your IDE is configured to use Typescript v4.9.3
+
+### Development ToDo
+
+**Staking Page**
+
+- figure out a better way to fit the custom weight Ui into the modal.
+
+- need to handle number displays better, sometimes they show NaN or undefined but quickly render
+
+- need to update any QS endpoints that will potentially be outdated with the coming of 1.4
+
+**UI/UX**
+
+- customize wallet connect modal
+
+- threejs liquid metal sphere landing page
+
+- Mobile breakpoints
+
+**Defi**
+
+- design
+
+- build
+
+**Assets**
+
+- design
+
+- build
+
+**Mobile Menu**

web-ui/components/Assets/assetsGrid.tsx

@@ -0,0 +1,174 @@
+import { Box, SimpleGrid, VStack, Text, Button, Divider, useColorModeValue, HStack, Flex, Grid, GridItem } from '@chakra-ui/react';
+import React from 'react';
+
+interface AssetCardProps {
+  assetName: string;
+  balance: string;
+  apy: string;
+  nativeAssetName: string;
+}
+
+const AssetCard: React.FC<AssetCardProps> = ({ assetName, balance, apy, nativeAssetName }) => {
+  return (
+    <VStack bg={'rgba(255,255,255,0.1)'} p={4} boxShadow="lg" align="center" spacing={4} borderRadius="lg">
+      <VStack w="full" align="center" alignItems={'center'} spacing={3}>
+        <HStack w="full" justify="space-between">
+          <Text fontWeight="bold" fontSize={'xl'} isTruncated>
+            {assetName}
+          </Text>
+          <HStack>
+            <Text fontSize="xs" fontWeight="light" isTruncated>
+              APY:
+            </Text>
+            <Text fontSize="md" fontWeight="bold" isTruncated>
+              {apy}
+            </Text>
+          </HStack>
+        </HStack>
+        <Divider />
+        <Grid mt={4} templateColumns="repeat(2, 1fr)" gap={4} w="full">
+          <GridItem>
+            <Text fontSize="md" textAlign="left">
+              ON QUICKSILVER:
+            </Text>
+          </GridItem>
+          <GridItem>
+            <Text fontSize="md" textAlign="right" fontWeight="semibold">
+              {balance}
+            </Text>
+          </GridItem>
+          <GridItem>
+            <Text fontSize="md" textAlign="left">
+              NON-NATIVE:
+            </Text>
+          </GridItem>
+          <GridItem>
+            <Text fontSize="md" textAlign="right" fontWeight="semibold">
+              {balance}
+            </Text>
+          </GridItem>
+        </Grid>
+      </VStack>
+
+      <HStack borderBottom="1px" borderBottomColor="complimentary.900" w="full" pb={4} pt={4} spacing={2}>
+        <Button
+          _active={{
+            transform: 'scale(0.95)',
+            color: 'complimentary.800',
+          }}
+          _hover={{
+            bgColor: 'rgba(255,128,0, 0.25)',
+            color: 'complimentary.300',
+          }}
+          color="white"
+          flex={1}
+          size="sm"
+          variant="outline"
+        >
+          Deposit
+        </Button>
+        <Button
+          _active={{
+            transform: 'scale(0.95)',
+            color: 'complimentary.800',
+          }}
+          _hover={{
+            bgColor: 'rgba(255,128,0, 0.25)',
+            color: 'complimentary.300',
+          }}
+          color="white"
+          flex={1}
+          size="sm"
+          variant="outline"
+        >
+          Withdraw
+        </Button>
+      </HStack>
+      <HStack w="full" justify="space-between">
+        <VStack>
+          <Text fontWeight="bold" fontSize={'xl'} isTruncated>
+            {nativeAssetName}
+          </Text>
+          <Divider />
+        </VStack>
+        <VStack>
+          <Text fontSize="md" fontWeight="bold" isTruncated></Text>
+          <Text fontSize="xs" fontWeight="light" isTruncated></Text>
+        </VStack>
+      </HStack>
+      <Grid templateColumns="repeat(2, 1fr)" gap={4} w="full">
+        <GridItem>
+          <Text fontSize="md" textAlign="left">
+            ON QUICKSILVER:
+          </Text>
+        </GridItem>
+        <GridItem>
+          <Text fontSize="md" textAlign="right" fontWeight="semibold">
+            {balance}
+          </Text>
+        </GridItem>
+      </Grid>
+      <HStack w="full" pb={4} pt={4} spacing={2}>
+        <Button
+          _active={{
+            transform: 'scale(0.95)',
+            color: 'complimentary.800',
+          }}
+          _hover={{
+            bgColor: 'rgba(255,128,0, 0.25)',
+            color: 'complimentary.300',
+          }}
+          flex={1}
+          size="sm"
+          variant="solid"
+        >
+          Deposit
+        </Button>
+        <Button
+          _active={{
+            transform: 'scale(0.95)',
+            color: 'complimentary.800',
+          }}
+          _hover={{
+            bgColor: 'rgba(255,128,0, 0.25)',
+            color: 'complimentary.300',
+          }}
+          flex={1}
+          size="sm"
+          variant="solid"
+        >
+          Withdraw
+        </Button>
+      </HStack>
+    </VStack>
+  );
+};
+
+const AssetsGrid = () => {
+  const assets = [
+    { name: 'qATOM', balance: '0.123', apy: '12.34%', native: 'ATOM' },
+    { name: 'qREGEN', balance: '0.123', apy: '12.34%', native: 'REGEN' },
+    { name: 'qOSMO', balance: '0.123', apy: '12.34%', native: 'OSMO' },
+    { name: 'qSTARS', balance: '0.123', apy: '12.34%', native: 'STARS' },
+    { name: 'qSOMM', balance: '0.123', apy: '12.34%', native: 'SOMM' },
+  ];
+
+  return (
+    <>
+      <Text fontSize="xl" fontWeight="bold" color="white" mb={4}>
+        Assets (qAssets + Native Balance)
+      </Text>
+      <Box overflowX="auto" w="full">
+        <Flex gap="8">
+          {assets.map((asset, index) => (
+            <Box key={index} minW="350px">
+              {' '}
+              <AssetCard assetName={asset.name} nativeAssetName={asset.native} balance={asset.balance} apy={asset.apy} />
+            </Box>
+          ))}
+        </Flex>
+      </Box>
+    </>
+  );
+};
+export default AssetsGrid;