Skip to content

Commit

Permalink
feat:add saga (#1435)
Browse files Browse the repository at this point in the history 
* feat:add saga

* lint
  • Loading branch information
@chalabi2
chalabi2 authored Apr 15, 2024
1 parent a9ddc55 commit afd9438
Show file tree
Hide file tree
Showing 18 changed files with 215 additions and 168 deletions.
7 changes: 5 additions & 2 deletions web-ui/.env
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,21 @@ 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_MAINNET_LCD_ENDPOINT_SAGA="https://lcd.ssc-1.quicksilver.zone/"
NEXT_PUBLIC_MAINNET_RPC_ENDPOINT_SAGA="https://rpc.ssc-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,ujuno,udydx"
NEXT_PUBLIC_WHITELISTED_ZONES="osmosis-1,stargaze-1,regen-1,cosmoshub-4,sommelier-3,juno-1,dydx-mainnet-1"
NEXT_PUBLIC_WHITELISTED_DENOM="uatom,ustars,uosmo,usomm,uregen,ujuno,udydx,usaga"
NEXT_PUBLIC_WHITELISTED_ZONES="osmosis-1,stargaze-1,regen-1,cosmoshub-4,sommelier-3,juno-1,dydx-mainnet-1,ssc-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_DYDX_CHAIN_ID=dydx-mainnet-1
NEXT_PUBLIC_DYDX_CHAIN_ID=ssc-1
NEXT_PRIVATE_WALLET_CONNECT_TOKEN="41a0749c331d209190beeac1c2530c90"
Binary file modified web-ui/bun.lockb
View file
Binary file not shown.
137 changes: 67 additions & 70 deletions web-ui/components/Assets/assetsGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,12 @@ import {
} from '@chakra-ui/react';
import React, { useEffect, useState } from 'react';



import { shiftDigits, formatQasset, formatNumber } from '@/utils';

import QDepositModal from './modals/qTokenDepositModal';
import QWithdrawModal from './modals/qTokenWithdrawlModal';




interface AssetCardProps {
address: string;
assetName: string;
Expand Down Expand Up @@ -88,6 +84,7 @@ const AssetCard: React.FC<AssetCardProps> = ({ address, assetName, balance, apy,
'regen-1': 'regen',
'juno-1': 'juno',
'dydx-mainnet-1': 'dydx',
'ssc-1': 'saga',
};

const getChainName = (chainId: string) => {
Expand Down Expand Up @@ -179,38 +176,35 @@ const AssetCard: React.FC<AssetCardProps> = ({ address, assetName, balance, apy,
<Divider bgColor={'complimentary.900'} />
<HStack h="140px" justifyContent={'space-between'} w="full">
<VStack minH="150px" alignItems="left">
<Stat color={'white'}>
<StatLabel fontSize={'lg'}>On Quicksilver</StatLabel>

{!balance || !liquidRewards ? (
<Skeleton startColor="complimentary.900"
endColor="complimentary.100" height="10px" width="auto" />
) : (
<StatNumber color={'complimentary.900'} fontSize={'md'}>
{formatNumber(parseFloat(balance))} {assetName}
</StatNumber>
)}

{!balance || !liquidRewards ?(
<>
<Skeleton startColor="complimentary.900"
endColor="complimentary.100" height="10px" width="auto" mt={2} />
<Skeleton startColor="complimentary.900"
endColor="complimentary.100" height="10px" width="auto" mt={2} />
</>
) : (
Number(balance) > 0 && (
<>
<StatHelpText mt={2} fontSize={'md'}>
Redeem For
</StatHelpText>
<StatHelpText mt={-2} color={'complimentary.400'} fontSize={'sm'}>
{formatNumber(parseFloat(balance) / Number(redemptionRates))} {assetName.replace('q', '')}
</StatHelpText>
</>
)
)}
</Stat>
<Stat color={'white'}>
<StatLabel fontSize={'lg'}>On Quicksilver</StatLabel>

{!balance || !liquidRewards ? (
<Skeleton startColor="complimentary.900" endColor="complimentary.100" height="10px" width="auto" />
) : (
<StatNumber color={'complimentary.900'} fontSize={'md'}>
{formatNumber(parseFloat(balance))} {assetName}
</StatNumber>
)}

{!balance || !liquidRewards ? (
<>
<Skeleton startColor="complimentary.900" endColor="complimentary.100" height="10px" width="auto" mt={2} />
<Skeleton startColor="complimentary.900" endColor="complimentary.100" height="10px" width="auto" mt={2} />
</>
) : (
Number(balance) > 0 && (
<>
<StatHelpText mt={2} fontSize={'md'}>
Redeem For
</StatHelpText>
<StatHelpText mt={-2} color={'complimentary.400'} fontSize={'sm'}>
{formatNumber(parseFloat(balance) / Number(redemptionRates))} {assetName.replace('q', '')}
</StatHelpText>
</>
)
)}
</Stat>
<Button
_active={{ transform: 'scale(0.95)', color: 'complimentary.800' }}
_hover={{ bgColor: 'rgba(255,128,0, 0.25)', color: 'complimentary.300' }}
Expand All @@ -223,42 +217,45 @@ const AssetCard: React.FC<AssetCardProps> = ({ address, assetName, balance, apy,
>
Withdraw
</Button>
<QWithdrawModal refetch={refetch} max={balance} isOpen={withdrawDisclosure.isOpen} onClose={withdrawDisclosure.onClose} token={assetName} />
<QWithdrawModal
refetch={refetch}
max={balance}
isOpen={withdrawDisclosure.isOpen}
onClose={withdrawDisclosure.onClose}
token={assetName}
/>
</VStack>

<VStack minH="150px" alignItems="left">
<Stat color={'white'}>
<StatLabel fontSize={'lg'}>Interchain</StatLabel>

{!balance || !liquidRewards || !interchainBalance ? (
<Skeleton startColor="complimentary.900"
endColor="complimentary.100" height="10px" width="auto" />
) : (
<StatNumber color={'complimentary.900'} fontSize={'md'}>
{formatNumber(parseFloat(interchainBalance))} {assetName}
</StatNumber>
)}

{!balance || !liquidRewards || !interchainBalance ? (
<>
<Skeleton startColor="complimentary.900"
endColor="complimentary.100" height="10px" width="auto" mt={2} />
<Skeleton startColor="complimentary.900"
endColor="complimentary.100" height="10px" width="auto" mt={2} />
</>
) : (
Number(interchainBalance) > 0 && (
<>
<StatHelpText mt={2} fontSize={'md'}>
Redeem For
</StatHelpText>
<StatHelpText mt={-2} color={'complimentary.400'} fontSize={'sm'}>
{formatNumber(parseFloat(interchainBalance) / Number(redemptionRates))} {assetName.replace('q', '')}
</StatHelpText>
</>
)
)}
</Stat>
<Stat color={'white'}>
<StatLabel fontSize={'lg'}>Interchain</StatLabel>

{!balance || !liquidRewards || !interchainBalance ? (
<Skeleton startColor="complimentary.900" endColor="complimentary.100" height="10px" width="auto" />
) : (
<StatNumber color={'complimentary.900'} fontSize={'md'}>
{formatNumber(parseFloat(interchainBalance))} {assetName}
</StatNumber>
)}

{!balance || !liquidRewards || !interchainBalance ? (
<>
<Skeleton startColor="complimentary.900" endColor="complimentary.100" height="10px" width="auto" mt={2} />
<Skeleton startColor="complimentary.900" endColor="complimentary.100" height="10px" width="auto" mt={2} />
</>
) : (
Number(interchainBalance) > 0 && (
<>
<StatHelpText mt={2} fontSize={'md'}>
Redeem For
</StatHelpText>
<StatHelpText mt={-2} color={'complimentary.400'} fontSize={'sm'}>
{formatNumber(parseFloat(interchainBalance) / Number(redemptionRates))} {assetName.replace('q', '')}
</StatHelpText>
</>
)
)}
</Stat>
<Button
_active={{ transform: 'scale(0.95)', color: 'complimentary.800' }}
_hover={{ bgColor: 'rgba(255,128,0, 0.25)', color: 'complimentary.300' }}
Expand All @@ -272,7 +269,7 @@ const AssetCard: React.FC<AssetCardProps> = ({ address, assetName, balance, apy,
Deposit
</Button>
<QDepositModal
refetch={refetch}
refetch={refetch}
interchainDetails={interchainDetails}
isOpen={depositDisclosure.isOpen}
onClose={depositDisclosure.onClose}
Expand Down
6 changes: 1 addition & 5 deletions web-ui/components/Assets/intents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,12 @@ import {
import { Key, useCallback, useState } from 'react';



import { useIntentQuery, useValidatorLogos, useValidatorsQuery } from '@/hooks/useQueries';
import { networks as prodNetworks, testNetworks as devNetworks } from '@/state/chains/prod';
import { truncateString } from '@/utils';

import SignalIntentModal from './modals/signalIntentProcess';


export interface StakingIntentProps {
address: string;
isWalletConnected: boolean;
Expand All @@ -34,7 +32,7 @@ export interface StakingIntentProps {
const StakingIntent: React.FC<StakingIntentProps> = ({ address, isWalletConnected }) => {
const networks = process.env.NEXT_PUBLIC_CHAIN_ENV === 'mainnet' ? prodNetworks : devNetworks;

const chains = ['Cosmos', 'Osmosis', 'Dydx', 'Stargaze', 'Regen', 'Sommelier', 'Juno'];
const chains = ['Cosmos', 'Osmosis', 'Dydx', 'Stargaze', 'Regen', 'Sommelier', 'Juno', 'Saga'];
const [currentChainIndex, setCurrentChainIndex] = useState(0);
const [isBottomVisible, setIsBottomVisible] = useState(true);

Expand All @@ -55,8 +53,6 @@ const StakingIntent: React.FC<StakingIntentProps> = ({ address, isWalletConnecte

const { intent, refetch } = useIntentQuery(currentNetwork.chainName, address ?? '');



interface ValidatorDetails {
moniker: string;
logoUrl: string | undefined;
Expand Down
18 changes: 13 additions & 5 deletions web-ui/components/Assets/modals/qTokenDepositModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import { handleSelectChainDropdown, ChainOption, ChooseChainInfo } from '@/compo
import { useTx } from '@/hooks';
import { useFeeEstimation } from '@/hooks/useFeeEstimation';
import { ibcDenomDepositMapping } from '@/state/chains/prod';
import { getCoin, getIbcInfo } from '@/utils';
import { getCoin, getExponent, getIbcInfo } from '@/utils';

export interface QDepositModalProps {
token: string;
Expand Down Expand Up @@ -90,8 +90,8 @@ const QDepositModal: React.FC<QDepositModalProps> = ({ token, isOpen, onClose, i

const onSubmitClick = async () => {
setIsLoading(true);

const transferAmount = new BigNumber(amount).shiftedBy(6).toString();
const exp = token === 'qDYDX' ? 18 : 6;
const transferAmount = new BigNumber(amount).shiftedBy(exp).toString();

const { source_port, source_channel } = getIbcInfo(fromChain ?? '', toChain ?? '');

Expand Down Expand Up @@ -160,7 +160,9 @@ const QDepositModal: React.FC<QDepositModalProps> = ({ token, isOpen, onClose, i
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent bgColor="rgb(32,32,32)">
<ModalHeader color="white"><Text>Deposit {token} Tokens</Text> <Divider mt={3} bgColor={'cyan.500'} /></ModalHeader>
<ModalHeader color="white">
<Text>Deposit {token} Tokens</Text> <Divider mt={3} bgColor={'cyan.500'} />
</ModalHeader>
<ModalCloseButton color={'complimentary.900'} />
<ModalBody>
{/* Chain Selection Dropdown */}
Expand Down Expand Up @@ -205,7 +207,13 @@ const QDepositModal: React.FC<QDepositModalProps> = ({ token, isOpen, onClose, i
size="xs"
_active={{ transform: 'scale(0.95)', color: 'complimentary.800' }}
_hover={{ bgColor: 'transparent', color: 'complimentary.400' }}
onClick={() => setAmount(BigNumber(parseFloat(maxAmount) / 2).toFixed(6).toString())}
onClick={() =>
setAmount(
BigNumber(parseFloat(maxAmount) / 2)
.toFixed(6)
.toString(),
)
}
>
Half
</Button>
Expand Down
19 changes: 14 additions & 5 deletions web-ui/components/Assets/modals/qTokenWithdrawlModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import { useTx } from '@/hooks';
import { useFeeEstimation } from '@/hooks/useFeeEstimation';
import { useIbcBalanceQuery } from '@/hooks/useQueries';
import { ibcDenomWithdrawMapping } from '@/state/chains/prod';
import { getCoin, getIbcInfo } from '@/utils';
import { getCoin, getExponent, getIbcInfo } from '@/utils';

interface QDepositModalProps {
max: string;
Expand Down Expand Up @@ -88,8 +88,9 @@ const QWithdrawModal: React.FC<QDepositModalProps> = ({ max, token, isOpen, onCl

const onSubmitClick = async () => {
setIsLoading(true);
const exp = token === 'qDYDX' ? 18 : 6;

const transferAmount = new BigNumber(amount).shiftedBy(6).toString();
const transferAmount = new BigNumber(amount).shiftedBy(exp).toString();

const { source_port, source_channel } = getIbcInfo(fromChain ?? '', toChain ?? '');

Expand Down Expand Up @@ -159,7 +160,9 @@ const QWithdrawModal: React.FC<QDepositModalProps> = ({ max, token, isOpen, onCl
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent bgColor="rgb(32,32,32)">
<ModalHeader color="white"><Text>Withdraw {token} Tokens</Text> <Divider mt={3} bgColor={'cyan.500'} /></ModalHeader>
<ModalHeader color="white">
<Text>Withdraw {token} Tokens</Text> <Divider mt={3} bgColor={'cyan.500'} />
</ModalHeader>
<ModalCloseButton color={'complimentary.900'} />
<ModalBody>
{/* Chain Selection Dropdown */}
Expand Down Expand Up @@ -196,15 +199,21 @@ const QWithdrawModal: React.FC<QDepositModalProps> = ({ max, token, isOpen, onCl
placeholder="Enter amount"
/>
<InputRightElement>
<HStack mr={14} spacing={1}>
<HStack mr={14} spacing={1}>
<Button
variant={'ghost'}
color="complimentary.900"
h="1.75rem"
size="xs"
_active={{ transform: 'scale(0.95)', color: 'complimentary.800' }}
_hover={{ bgColor: 'transparent', color: 'complimentary.400' }}
onClick={() => setAmount(BigNumber(parseFloat(max) / 2).toFixed(6).toString())}
onClick={() =>
setAmount(
BigNumber(parseFloat(max) / 2)
.toFixed(6)
.toString(),
)
}
>
Half
</Button>
Expand Down
10 changes: 5 additions & 5 deletions web-ui/components/Assets/portfolio.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,10 +116,10 @@ const MyPortfolio: React.FC<MyPortfolioProps> = ({
</Flex>
{isLoading && (
<Flex w="100%" justifyContent="center" alignItems="center">
<SkeletonText noOfLines={1} h={'20px'} w={'120px'} startColor='compplimentary.900' endColor='complimentary.100' />
<SkeletonText noOfLines={1} h={'20px'} w={'120px'} startColor='rgb(107, 105, 105)' endColor='rgb(168, 168, 168)' />
<SkeletonText noOfLines={1} h={'20px'} w={'120px'} startColor='compplimentary.900' endColor='complimentary.100' />
<SkeletonText noOfLines={1} h={'20px'} w={'120px'} startColor='rgb(107, 105, 105)' endColor='rgb(168, 168, 168)' />
<SkeletonText noOfLines={1} h={'20px'} w={'120px'} startColor="compplimentary.900" endColor="complimentary.100" />
<SkeletonText noOfLines={1} h={'20px'} w={'120px'} startColor="rgb(107, 105, 105)" endColor="rgb(168, 168, 168)" />
<SkeletonText noOfLines={1} h={'20px'} w={'120px'} startColor="compplimentary.900" endColor="complimentary.100" />
<SkeletonText noOfLines={1} h={'20px'} w={'120px'} startColor="rgb(107, 105, 105)" endColor="rgb(168, 168, 168)" />
</Flex>
)}
{totalValue === 0 && (
Expand Down Expand Up @@ -185,7 +185,7 @@ interface PortfolioItemProps {
const PortfolioItem: React.FC<PortfolioItemProps> = ({ title, amount, qTokenPrice, index }) => {
const tokenValue = Number(amount) * qTokenPrice;

const imgType = title === 'qATOM' ? 'svg' : 'png';
const imgType = title === 'qATOM' || title === 'qSAGA' ? 'svg' : 'png';

return (
<SimpleGrid
Expand Down
4 changes: 3 additions & 1 deletion web-ui/components/Assets/unbondingTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ interface UnbondingAssetsTableProps {
}

const UnbondingAssetsTable: React.FC<UnbondingAssetsTableProps> = ({ address, isWalletConnected }) => {
const chains = ['Cosmos', 'Stargaze', 'Osmosis', 'Regen', 'Sommelier', 'Juno', 'Dydx'];
const chains = ['Cosmos', 'Stargaze', 'Osmosis', 'Regen', 'Sommelier', 'Juno', 'Dydx', 'Saga'];
const [currentChainIndex, setCurrentChainIndex] = useState(0);

// Switcher lets us use a pretty name for the chain in the UI, but query the chain by its actual name.
Expand All @@ -56,6 +56,8 @@ const UnbondingAssetsTable: React.FC<UnbondingAssetsTableProps> = ({ address, is
newChainName = 'juno';
} else if (currentChainName === 'Dydx') {
newChainName = 'dydx';
} else if (currentChainName === 'Saga') {
newChainName = 'saga';
} else {
// Default case
newChainName = currentChainName;
Expand Down
1 change: 0 additions & 1 deletion web-ui/components/Staking/networkSelectButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ export const NetworkSelect: React.FC<CustomMenuProps> = ({ buttonTextColor = 'wh
_active={{
bgColor: 'rgba(255,128,0, 0.25)',
}}

_focus={{
bgColor: 'rgba(255,128,0, 0.25)',
}}
Expand Down
Loading

0 comments on commit afd9438

Please sign in to comment.