Working UI Branch

.github/workflows/testuideploy.yaml

@@ -4,13 +4,19 @@ on:
   push:
     paths:
       - web-ui/**
+  pull_request:
+    paths:
+      - web-ui/**
 
   workflow_dispatch:
 
 permissions:
-  contents: read
+  contents: write
   pages: write
   id-token: write
+  actions: write
+  deployments: write
+  pull-requests: write
 
 concurrency:
   group: "pages"
@@ -47,4 +53,4 @@ jobs:
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./out
+          publish_dir: ./web-ui/out

web-ui/.env

@@ -9,4 +9,4 @@ 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"
+NEXT_PUBLIC_WHITELISTED_ZONES="osmosis-1,stargaze-1,regen-1,cosmoshub-4,sommelier-3"

web-ui/.env.development

@@ -0,0 +1,24 @@
+NEXT_PUBLIC_CHAIN_ENV="testnet"
+NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_QUICKSILVER="http://lcd.quicksilver.zone/"
+NEXT_PUBLIC_TESTNET_RPC_ENDPOINT_QUICKSILVER="http://rpc.quicksilver.zone/"
+NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_COSMOSHUB=http://lcd.cosmoshub-4.quicksilver.zone
+NEXT_PUBLIC_TESTNET_RPC_ENDPOINT_COSMOSHUB=http://rpc.cosmoshub-4.quicksilver.zone
+NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_OSMOSIS="http://lcd.osmosis-1.quicksilver.zone"
+NEXT_PUBLIC_TESTNET_RPC_ENDPOINT_OSMOSIS="http://rpc.osmosis-1.quicksilver.zone"
+NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_STARGAZE="http://lcd.stargaze-1.quicksilver.zone"
+NEXT_PUBLIC_TESTNET_RPC_ENDPOINT_STARGAZE="http://rpc.stargaze-1.quicksilver.zone"
+NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_REGEN="http://lcd.regen-1.quicksilver.zone"
+NEXT_PUBLIC_TESTNET_RPC_ENDPOINT_REGEN="http://rpc.regen-1.quicksilver.zone"
+NEXT_PUBLIC_TESTNET_LCD_ENDPOINT_SOMMELIER="http://lcd.sommelier-3.quicksilver.zone"
+NEXT_PUBLIC_TESTNET_RPC_ENDPOINT_SOMMELIER="http://rpc.sommelier-3.quicksilver.zone"
+NEXT_PUBLIC_QUICKSILVER_API="http://lcd.quicksilver.zone"
+NEXT_PUBLIC_QUICKSILVER_DATA_API="http://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/.env.production

@@ -0,0 +1,24 @@
+NEXT_PUBLIC_CHAIN_ENV="mainnet"
+NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_QUICKSILVER="https://lcd.quicksilver.zone/"
+NEXT_PUBLIC_MAINNET_RPC_ENDPOINT_QUICKSILVER="https://rpc.quicksilver.zone/"
+NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_COSMOSHUB=https://lcd.cosmoshub-4.quicksilver.zone
+NEXT_PUBLIC_MAINNET_RPC_ENDPOINT_COSMOSHUB=https://rpc.cosmoshub-4.quicksilver.zone
+NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_OSMOSIS="https://lcd.osmosis-1.quicksilver.zone"
+NEXT_PUBLIC_MAINNET_RPC_ENDPOINT_OSMOSIS="https://rpc.osmosis-1.quicksilver.zone"
+NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_STARGAZE="https://lcd.stargaze-1.quicksilver.zone"
+NEXT_PUBLIC_MAINNET_RPC_ENDPOINT_STARGAZE="https://rpc.stargaze-1.quicksilver.zone"
+NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_REGEN="https://lcd.regen-1.quicksilver.zone"
+NEXT_PUBLIC_MAINNET_RPC_ENDPOINT_REGEN="https://rpc.regen-1.quicksilver.zone"
+NEXT_PUBLIC_MAINNET_LCD_ENDPOINT_SOMMELIER="https://lcd.sommelier-3.quicksilver.zone"
+NEXT_PUBLIC_MAINNET_RPC_ENDPOINT_SOMMELIER="https://rpc.sommelier-3.quicksilver.zone"
+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/components/Airdrop/airdropSection.tsx

@@ -0,0 +1,111 @@
+import {
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
+  Box,
+  Button,
+  Flex,
+  Text,
+  Progress,
+  Tooltip,
+  VStack,
+  HStack,
+  useColorModeValue,
+  Icon,
+  Badge,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon, InfoOutlineIcon } from '@chakra-ui/icons';
+import { useAccordionStyles } from '@chakra-ui/accordion';
+import { useState } from 'react';
+
+interface AirdropAccordionItemProps {
+  index: number;
+  defaultIsOpen?: boolean;
+}
+
+const AirdropAccordionItem: React.FC<AirdropAccordionItemProps> = ({ index, defaultIsOpen }) => {
+  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen });
+
+  return (
+    <AccordionItem
+      mb="30px"
+      borderRadius={isOpen ? '20px 20px 0 0' : '20px'}
+      h="80px"
+      borderBottomColor={'transparent'}
+      zIndex={10 - index}
+      borderTopColor={'transparent'}
+      bgColor={'rgba(255, 128, 0, 1)'}
+      shadow={'md'}
+      position="relative"
+      _hover={{ bgColor: 'rgba(255, 128, 0, 0.9)' }}
+    >
+      <h2>
+        <AccordionButton onClick={onToggle} h="80px" justifyContent="space-between">
+          <Badge borderRadius="full" px={3} py={1.5} mr={3} colorScheme="orange">
+            {index + 1}
+          </Badge>
+          <Box flex="1" textAlign="left" alignItems={'center'} fontSize="lg" fontWeight="semibold">
+            <Text fontSize={'2xl'}>{index === 0 ? 'CLAIM INITIAL QCK AIRDROP' : 'ACTION DESCRIPTION'}</Text>
+          </Box>
+          <ChevronDownIcon />
+        </AccordionButton>
+      </h2>
+      {isOpen && (
+        <AccordionPanel p={4} borderBottomRadius="20px" h="120px" pb={'30px'} bgColor="rgba(255, 128, 0, 1)">
+          <Text>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </Text>
+        </AccordionPanel>
+      )}
+    </AccordionItem>
+  );
+};
+
+const AirdropSection = () => {
+  const { isOpen, onToggle } = useDisclosure();
+
+  return (
+    <VStack spacing={4} align="stretch">
+      <Box bg={'rgba(255,255,255,0.1)'} p={5} shadow="md" borderRadius="lg">
+        <Flex justifyContent="space-between" alignItems="center" mb={5}>
+          <Text fontSize="xl" fontWeight="bold">
+            Cosmos Hub Active Airdrop
+          </Text>
+          <Tooltip label="This is your total allocation" aria-label="A tooltip">
+            <Icon as={InfoOutlineIcon} />
+          </Tooltip>
+        </Flex>
+        <Progress colorScheme="orange" size="sm" value={40} mb={5} />
+        <Accordion allowToggle defaultIndex={[0]}>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <AirdropAccordionItem key={index} index={index} defaultIsOpen={index === 0} />
+          ))}
+        </Accordion>
+      </Box>
+      <Box bg={'rgba(255,255,255,0.1)'} p={5} shadow="md" borderRadius="lg">
+        <Flex justifyContent="space-between" alignItems="center" mb={5}>
+          <Text fontSize="xl" fontWeight="bold">
+            Participate in Other Airdrops
+          </Text>
+        </Flex>
+        <HStack overflow="auto">
+          {/* Replace these with actual chain data */}
+          {['OSMOSIS', 'JUNO', 'STARGAZE', 'REGEN', 'COSMOS'].map((chain) => (
+            <VStack key={chain} spacing={3} align="center">
+              <Box w="100px" h="100px" bg="gray.100" borderRadius="md" />
+              <Text fontSize="md">{chain}</Text>
+              <Button rightIcon={<ChevronRightIcon />} colorScheme="teal" variant="link">
+                View Airdrop
+              </Button>
+            </VStack>
+          ))}
+        </HStack>
+      </Box>
+    </VStack>
+  );
+};
+
+export default AirdropSection;