diff --git a/examples/asset-list/hooks/queries/useTotalAssets.ts b/examples/asset-list/hooks/queries/useTotalAssets.ts index eb965e165..9dc893caf 100644 --- a/examples/asset-list/hooks/queries/useTotalAssets.ts +++ b/examples/asset-list/hooks/queries/useTotalAssets.ts @@ -124,12 +124,12 @@ export const useTotalAssets = (chainName: string) => { queriesData; const stakedTotal = delegations - .map((coin) => calcCoinDollarValue(prices, coin)) + ?.map((coin) => calcCoinDollarValue(prices, coin)) .reduce((total, cur) => total.plus(cur), zero) .toString(); const balancesTotal = allBalances - .filter(({ denom }) => !denom.startsWith('gamm') && prices[denom]) + ?.filter(({ denom }) => !denom.startsWith('gamm') && prices[denom]) .map((coin) => calcCoinDollarValue(prices, coin)) .reduce((total, cur) => total.plus(cur), zero) .toString(); diff --git a/examples/asset-list/package.json b/examples/asset-list/package.json index c2d621f85..b73b1118e 100644 --- a/examples/asset-list/package.json +++ b/examples/asset-list/package.json @@ -34,18 +34,19 @@ "chakra-react-select": "4.4.3", "fast-fuzzy": "1.12.0", "framer-motion": "9.0.7", - "long": "5.2.1", "next": "12.2.5", "osmo-query": "16.5.1", "react": "18.2.0", "react-dom": "18.2.0", - "react-icons": "4.6.0" + "react-icons": "4.6.0", + "react-no-ssr": "1.1.0" }, "devDependencies": { "@tanstack/react-query-devtools": "4.32.0", "@types/node": "18.11.9", "@types/react": "18.0.25", "@types/react-dom": "18.0.9", + "@types/react-no-ssr": "1.1.3", "eslint": "8.28.0", "eslint-config-next": "13.0.5", "generate-lockfile": "0.0.12", diff --git a/examples/asset-list/pages/multi-chain.tsx b/examples/asset-list/pages/multi-chain.tsx index 3cb1608ba..d7836c165 100644 --- a/examples/asset-list/pages/multi-chain.tsx +++ b/examples/asset-list/pages/multi-chain.tsx @@ -1,15 +1,10 @@ -import { AssetListSection, Layout, WalletSection } from '@/components'; -import { useEffect, useState } from 'react'; +import { useState } from 'react'; +import NoSSR from 'react-no-ssr'; import { ChainName } from '@cosmos-kit/core'; +import { AssetListSection, Layout, WalletSection } from '@/components'; export default function MultiChain() { const [chainName, setChainName] = useState(); - const [content, setContent] = useState(); - - useEffect(() => { - if (!chainName) return; - setContent(); - }, [chainName]); return ( @@ -18,7 +13,7 @@ export default function MultiChain() { providedChainName={chainName} setChainName={setChainName} /> - {content} + {chainName && } ); } diff --git a/examples/asset-list/pages/single-chain.tsx b/examples/asset-list/pages/single-chain.tsx index b3a18bfb4..614f5128e 100644 --- a/examples/asset-list/pages/single-chain.tsx +++ b/examples/asset-list/pages/single-chain.tsx @@ -1,19 +1,14 @@ +import NoSSR from 'react-no-ssr'; import { defaultChainName } from '@/config'; -import { AssetListSection, Layout } from '@/components'; -import { WalletSection } from '@/components/wallet'; -import { useState, useEffect } from 'react'; +import { AssetListSection, Layout, WalletSection } from '@/components'; export default function SingleChain() { - const [content, setContent] = useState(); - - useEffect(() => { - setContent(); - }, []); - return ( - {content} + + + ); } diff --git a/examples/ibc-transfer/__tests__/index.test.js b/examples/ibc-transfer/__tests__/index.test.js deleted file mode 100644 index 83e01b68d..000000000 --- a/examples/ibc-transfer/__tests__/index.test.js +++ /dev/null @@ -1,51 +0,0 @@ -import { - denomToAsset, - denomToExponent, -} from '../components/react/ibc-transfer'; -import { getIbcInfo } from '../components/react/input-fields'; - -describe('denomToAsset()', () => { - it('should return Osmosis', () => { - expect( - denomToAsset( - 'ibc/0471F1C4E7AFD3F07702BEF6DC365268D64570F7C1FDC98EA6098DD6DE59817B' - ).name - ).toBe('Osmosis'); - }); - - it('should return Cosmos Hub Atom', () => { - expect( - denomToAsset( - 'ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2' - ).name - ).toBe('Cosmos Hub Atom'); - }); -}); - -describe('denomToExponent()', () => { - it('should return 6', () => { - expect( - denomToExponent( - 'ibc/1849A429022CBAAB619074CA4412D0016F262218BE6DD828BA8A3DD97D6B52BB' - ) - ).toBe(6); - }); - - it('should return 18', () => { - expect( - denomToExponent( - 'ibc/3B3D6D224E3B1BD8BEE2B2763966F4E8784EFD871C7F26CA3305D6B2C4E3BC7E' - ) - ).toBe(18); - }); -}); - -describe('getIbcInfo()', () => { - it('should return channel-2', () => { - expect(getIbcInfo('agoric', 'crescent').sourceChannel).toBe('channel-2'); - }); - - it('should return channel-11', () => { - expect(getIbcInfo('crescent', 'agoric').sourceChannel).toBe('channel-11'); - }); -}); diff --git a/examples/ibc-transfer/__tests__/index.test.ts b/examples/ibc-transfer/__tests__/index.test.ts new file mode 100644 index 000000000..7c9d5d224 --- /dev/null +++ b/examples/ibc-transfer/__tests__/index.test.ts @@ -0,0 +1,69 @@ +import { denomToAsset, denomToExponent, getIbcInfo } from '../utils'; + +describe('denomToAsset()', () => { + it('should return OSMO', () => { + const denom = + 'ibc/ED07A3391A112B175915CD8FAF43A2DA8E4790EDE12566649D0C2F97716B8518'; + const symbol = denomToAsset('juno', denom)?.symbol; + expect(symbol).toBe('OSMO'); + }); + + it('should return ATOM', () => { + const denom = + 'ibc/C4CFF46FD6DE35CA4CF4CE031E643C8FDC9BA4B99AE598E9B0ED98FE3A2319F9'; + const symbol = denomToAsset('juno', denom)?.symbol; + expect(symbol).toBe('ATOM'); + }); + + it('should return JUNO', () => { + const denom = 'ujuno'; + const symbol = denomToAsset('juno', denom)?.symbol; + expect(symbol).toBe('JUNO'); + }); + + it('should return undefined', () => { + const denom = 'ujuno'; + const symbol = denomToAsset('osmosis', denom)?.symbol; + expect(symbol).toBeUndefined(); + }); + + it('should return ION', () => { + const denom = 'uion'; + const symbol = denomToAsset('osmosis', denom)?.symbol; + expect(symbol).toBe('ION'); + }); +}); + +describe('denomToExponent()', () => { + it('should return 6', () => { + const denom = + 'ibc/F6B367385300865F654E110976B838502504231705BAC0849B0651C226385885'; + expect(denomToExponent('juno', denom)).toBe(6); + }); + + it('should return 18', () => { + const denom = + 'ibc/7E4A6EEFA0425CF99DE169A586D9BADF39C40153194CD6784BF8C9F6123BF5D0'; + expect(denomToExponent('juno', denom)).toBe(18); + }); + + it('should return 6', () => { + const denom = 'ujuno'; + expect(denomToExponent('juno', denom)).toBe(6); + }); + + it('should return 6', () => { + const denom = 'uion'; + expect(denomToExponent('osmosis', denom)).toBe(6); + }); +}); + +describe('getIbcInfo()', () => { + it('should return channel-2', () => { + expect(getIbcInfo('agoric', 'crescent').sourceChannel).toBe('channel-2'); + }); + + it('should return channel-11', () => { + expect(getIbcInfo('crescent', 'agoric').sourceChannel).toBe('channel-11'); + }); +}); diff --git a/examples/ibc-transfer/components/features.tsx b/examples/ibc-transfer/components/common/Footer.tsx similarity index 59% rename from examples/ibc-transfer/components/features.tsx rename to examples/ibc-transfer/components/common/Footer.tsx index c4e9cea55..b3d742398 100644 --- a/examples/ibc-transfer/components/features.tsx +++ b/examples/ibc-transfer/components/common/Footer.tsx @@ -1,16 +1,24 @@ -import { LinkIcon } from '@chakra-ui/icons'; import { Box, + Divider, + Grid, Heading, - Icon, - Link, - Stack, Text, - useColorModeValue + Stack, + Link, + Icon, + useColorModeValue, } from '@chakra-ui/react'; -import { FeatureProps } from './types'; +import { dependencies, products } from '../../config'; +import { LinkIcon } from '@chakra-ui/icons'; -export const Product = ({ title, text, href }: FeatureProps) => { +interface IFeature { + title: string; + text: string; + href: string; +} + +const Product = ({ title, text, href }: IFeature) => { return ( { boxShadow: useColorModeValue( '0 2px 5px #bca5e9', '0 0 3px rgba(150, 75, 213, 0.8), 0 3px 8px -2px rgba(175, 89, 246, 0.9)' - ) + ), }} > {title} → @@ -39,7 +47,7 @@ export const Product = ({ title, text, href }: FeatureProps) => { ); }; -export const Dependency = ({ title, text, href }: FeatureProps) => { +const Dependency = ({ title, text, href }: IFeature) => { return ( { boxShadow: useColorModeValue( '0 2px 5px #ccc', '0 1px 3px #727272, 0 2px 12px -2px #2f2f2f' - ) + ), }} > @@ -77,3 +85,46 @@ export const Dependency = ({ title, text, href }: FeatureProps) => { ); }; + +export const Footer = () => { + return ( + <> + + {products.map((product) => ( + + ))} + + + {dependencies.map((dependency) => ( + + ))} + + + + + + Built with + + Cosmology + + + + ); +}; diff --git a/examples/ibc-transfer/components/common/Header.tsx b/examples/ibc-transfer/components/common/Header.tsx new file mode 100644 index 000000000..0f88070ef --- /dev/null +++ b/examples/ibc-transfer/components/common/Header.tsx @@ -0,0 +1,52 @@ +import { + Box, + Heading, + Text, + Button, + Flex, + Icon, + useColorMode, + useColorModeValue, +} from '@chakra-ui/react'; +import { BsFillMoonStarsFill, BsFillSunFill } from 'react-icons/bs'; + +const stacks = ['CosmosKit', 'Next.js']; + +export const Header = () => { + const { colorMode, toggleColorMode } = useColorMode(); + + return ( + <> + + + + + + Create Cosmos App + + + Welcome to  + + {stacks.join(' + ')} + + + + + ); +}; diff --git a/examples/ibc-transfer/components/common/Layout.tsx b/examples/ibc-transfer/components/common/Layout.tsx new file mode 100644 index 000000000..c25860dc7 --- /dev/null +++ b/examples/ibc-transfer/components/common/Layout.tsx @@ -0,0 +1,19 @@ +import Head from 'next/head'; +import { Container } from '@chakra-ui/react'; +import { Header } from './Header'; +import { Footer } from './Footer'; + +export const Layout = ({ children }: { children: React.ReactNode }) => { + return ( + + + Create Cosmos App + + + +
+ {children} +