refactor folder structure

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();

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",

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<ChainName>();
-  const [content, setContent] = useState<JSX.Element>();
-
-  useEffect(() => {
-    if (!chainName) return;
-    setContent(<AssetListSection chainName={chainName} />);
-  }, [chainName]);
 
   return (
     <Layout>
@@ -18,7 +13,7 @@ export default function MultiChain() {
         providedChainName={chainName}
         setChainName={setChainName}
       />
-      {content}
+      <NoSSR>{chainName && <AssetListSection chainName={chainName} />}</NoSSR>
     </Layout>
   );
 }

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<JSX.Element>();
-
-  useEffect(() => {
-    setContent(<AssetListSection chainName={defaultChainName} />);
-  }, []);
-
   return (
     <Layout>
       <WalletSection isMultiChain={false} />
-      {content}
+      <NoSSR>
+        <AssetListSection chainName={defaultChainName} />
+      </NoSSR>
     </Layout>
   );
 }

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');
+  });
+});

examples/ibc-transfer/components/features.tsx → 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 (
     <Link href={href} target="_blank" _hover={{ textDecoration: 'none' }}>
       <Stack
@@ -29,7 +37,7 @@ export const Product = ({ title, text, href }: FeatureProps) => {
           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)'
-          )
+          ),
         }}
       >
         <Heading fontSize="xl">{title}&ensp;&rarr;</Heading>
@@ -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 (
     <Link href={href} target="_blank" _hover={{ textDecoration: 'none' }}>
       <Stack
@@ -56,7 +64,7 @@ export const Dependency = ({ title, text, href }: FeatureProps) => {
           boxShadow: useColorModeValue(
             '0 2px 5px #ccc',
             '0 1px 3px #727272, 0 2px 12px -2px #2f2f2f'
-          )
+          ),
         }}
       >
         <Box color={useColorModeValue('primary.500', 'primary.200')}>
@@ -77,3 +85,46 @@ export const Dependency = ({ title, text, href }: FeatureProps) => {
     </Link>
   );
 };
+
+export const Footer = () => {
+  return (
+    <>
+      <Grid
+        templateColumns={{
+          md: 'repeat(2, 1fr)',
+          lg: 'repeat(3, 1fr)',
+        }}
+        gap={8}
+        mb={14}
+      >
+        {products.map((product) => (
+          <Product key={product.title} {...product}></Product>
+        ))}
+      </Grid>
+      <Grid templateColumns={{ md: '1fr 1fr' }} gap={8} mb={20}>
+        {dependencies.map((dependency) => (
+          <Dependency key={dependency.title} {...dependency}></Dependency>
+        ))}
+      </Grid>
+      <Box mb={3}>
+        <Divider />
+      </Box>
+      <Stack
+        isInline={true}
+        spacing={1}
+        justifyContent="center"
+        opacity={0.5}
+        fontSize="sm"
+      >
+        <Text>Built with</Text>
+        <Link
+          href="https://cosmology.tech/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Cosmology
+        </Link>
+      </Stack>
+    </>
+  );
+};

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 (
+    <>
+      <Flex justifyContent="end" mb={4}>
+        <Button variant="outline" px={0} onClick={toggleColorMode}>
+          <Icon
+            as={colorMode === 'light' ? BsFillMoonStarsFill : BsFillSunFill}
+          />
+        </Button>
+      </Flex>
+      <Box textAlign="center">
+        <Heading
+          as="h1"
+          fontSize={{ base: '3xl', sm: '4xl', md: '5xl' }}
+          fontWeight="extrabold"
+          mb={3}
+        >
+          Create Cosmos App
+        </Heading>
+        <Heading
+          as="h1"
+          fontWeight="bold"
+          fontSize={{ base: '2xl', sm: '3xl', md: '4xl' }}
+        >
+          <Text as="span">Welcome to&nbsp;</Text>
+          <Text
+            as="span"
+            color={useColorModeValue('primary.500', 'primary.200')}
+          >
+            {stacks.join(' + ')}
+          </Text>
+        </Heading>
+      </Box>
+    </>
+  );
+};

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 (
+    <Container maxW="5xl" py={10}>
+      <Head>
+        <title>Create Cosmos App</title>
+        <meta name="description" content="Generated by create cosmos app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Header />
+      {children}
+      <Footer />
+    </Container>
+  );
+};

examples/ibc-transfer/components/common/index.ts

@@ -0,0 +1 @@
+export * from './Layout';