Fix CI test jobs fail to detect build failure

.github/workflows/run-tests-build.yaml

@@ -0,0 +1,82 @@
+name: Build Next.js examples
+
+on:
+  workflow_dispatch:
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      max-parallel: 4
+      fail-fast: true
+      matrix:
+        example:
+          [
+            asset-list,
+            authz,
+            vote-proposal,
+            ibc-transfer,
+            swap-tokens,
+            provide-liquidity,
+            nft,
+            connect-chain,
+            connect-multi-chain,
+          ]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set template_path Environment Variable
+        run: |
+          example_value="${{ matrix.example }}"
+
+          if [[ "$example_value" == "connect-chain" ]] || [[ "$example_value" == "connect-multi-chain" ]]; then
+            echo "template_path=templates" >> $GITHUB_ENV
+            echo "ci_template_path=dest" >> $GITHUB_ENV
+          else
+            echo "template_path=examples" >> $GITHUB_ENV
+            echo "ci_template_path=dest" >> $GITHUB_ENV
+          fi
+
+      - name: Log
+        run: |
+          echo "Using template_path: $template_path"
+          echo "Using ci_template_path: $ci_template_path"
+
+      - name: Clone example
+        run: |
+          echo "Cloning example: ./$template_path/${{ matrix.example }}/" into "${{ github.workspace }}/$ci_template_path/${{ matrix.example }}"
+
+          mkdir -p ${{ github.workspace }}/$ci_template_path/${{ matrix.example }}
+          cp -r ./$template_path/${{ matrix.example }}/ ${{ github.workspace }}/$ci_template_path/
+          cd ${{ github.workspace }}/$ci_template_path/${{ matrix.example }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Set up Yarn
+        uses: threeal/[email protected]
+
+      - name: Cache NextJS
+        uses: actions/cache@v4
+        with:
+          path: |
+            ${{ github.workspace }}/.next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-
+
+      - name: Build example project
+        run: |
+          echo "Building example: ${{ matrix.example }} in directory ${{ github.workspace }}/$ci_template_path/${{ matrix.example }}"
+          cd ${{ github.workspace }}/$ci_template_path/${{ matrix.example }}
+          ls -la
+          yarn install
+          yarn build

.github/workflows/run-tests.yaml

@@ -1,9 +1,9 @@
-name: Run Tests
+name: Run Tests Prod
 
 on:
   push:
-  pull_request:
-    types: [opened, synchronized, reopened]
+    branches:
+      - main
   workflow_dispatch:
 
 jobs:
@@ -18,23 +18,23 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20.x"
+          node-version: '20.x'
 
       - name: Install Dependencies
         run: npm install -g create-cosmos-app
 
+      - name: asset-list
+        run: |
+          cca --example asset-list --name asset-list
+          cd asset-list
+          yarn build
+
       - name: vote-proposal
         run: |
           cca --example vote-proposal --name vote-proposal
           cd vote-proposal
           yarn build
 
-      # - name: asset-list
-      #   run: |
-      #     cca --example asset-list --name asset-list
-      #     cd asset-list
-      #     yarn build
-
       # - name: ibc-transfer
       #   run: |
       #     cca --example ibc-transfer --name ibc-transfer

boilerplates/ts-codegen-npm-module/package.json

@@ -52,10 +52,10 @@
     "publish-scripts": "0.1.0",
     "rimraf": "^5.0.0",
     "ts-jest": "^29.1.0",
-    "typescript": "^5.0.4"
+    "typescript": "^5.1.6"
   },
   "dependencies": {
     "@cosmjs/cosmwasm-stargate": "^0.31.0",
     "@cosmwasm/ts-codegen": "^0.31.6"
   }
-}
+}

boilerplates/website/package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
-    "@interchain-ui/react": "^1.21.16",
+    "@interchain-ui/react": "^1.23.16",
     "framer-motion": "9.0.7",
     "next": "^13",
     "react": "18.2.0",
@@ -34,6 +34,6 @@
     "eslint": "8.28.0",
     "eslint-config-next": "13.0.5",
     "generate-lockfile": "0.0.12",
-    "typescript": "4.9.3"
+    "typescript": "^5.1.6"
   }
 }

examples/asset-list/components/common/Layout.tsx

@@ -13,7 +13,7 @@ export const Layout = ({ children }: { children?: React.ReactNode }) => {
       bottom="0"
       left="0"
       right="0"
-      height="max(1dvh, 100%)"
+      flex={1}
       backgroundColor={theme === 'light' ? '$white' : '$gray900'}
       data-part-id="layout-container"
     >

examples/asset-list/components/wallet/WalletConnect.tsx

@@ -56,16 +56,16 @@ export const ConnectWalletButton = ({
         gap="$4"
         as="span"
         borderRadius="8px"
-        // @ts-ignore
-        style={{
-          zIndex: '1',
-        }}
+        zIndex={1}
+        color={useColorModeValue('$textInverse', '$text')}
       >
         <Box as="span">
           <IoWallet />
         </Box>
 
-        <Box as="span">{buttonText ? buttonText : 'Connect Wallet'}</Box>
+        <Box as="span" fontSize="$md" color="inherit">
+          {buttonText ? buttonText : 'Connect Wallet'}
+        </Box>
       </Box>
     </Button>
   );

examples/asset-list/package.json

@@ -27,7 +27,8 @@
     "@cosmos-kit/react": "2.10.9",
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
-    "@interchain-ui/react": "^1.21.16",
+    "@interchain-ui/react": "^1.23.16",
+    "@interchain-ui/react-no-ssr": "^0.1.2",
     "@tanstack/react-query": "4.32.0",
     "@uidotdev/usehooks": "2.4.1",
     "bignumber.js": "^9.1.2",
@@ -40,18 +41,16 @@
     "osmo-query": "16.5.1",
     "react": "^18.2",
     "react-dom": "^18.2",
-    "react-icons": "^4.12.0",
-    "react-no-ssr": "1.1.0"
+    "react-icons": "^4.12.0"
   },
   "devDependencies": {
     "@tanstack/react-query-devtools": "4.32.0",
     "@types/node": "^20.8.4",
     "@types/react": "^18.2.50",
     "@types/react-dom": "^18.2.18",
-    "@types/react-no-ssr": "^1.1.7",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.1.0",
     "generate-lockfile": "0.0.12",
-    "typescript": "^5"
+    "typescript": "^5.1.6"
   }
 }

examples/asset-list/pages/_app.tsx

@@ -69,8 +69,6 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) {
       >
         <QueryClientProvider client={queryClient}>
           <main id="main" className={themeClass}>
-            {/* TODO fix type error */}
-            {/* @ts-ignore */}
             <Component {...pageProps} />
           </main>
         </QueryClientProvider>

examples/asset-list/pages/multi-chain.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import NoSSR from 'react-no-ssr';
+import { ReactNoSSR } from '@interchain-ui/react-no-ssr';
 import { ChainName } from 'cosmos-kit';
 import { AssetListSection, Layout, WalletSection } from '@/components';
 
@@ -13,10 +13,9 @@ export default function MultiChain() {
         providedChainName={chainName}
         setChainName={setChainName}
       />
-      {/* TODO fix type error */}
-      {/* Type error: This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided. */}
-      {/* @ts-ignore */}
-      <NoSSR>{chainName && <AssetListSection chainName={chainName} />}</NoSSR>
+      <ReactNoSSR>
+        {chainName && <AssetListSection chainName={chainName} />}
+      </ReactNoSSR>
     </Layout>
   );
 }

examples/asset-list/pages/single-chain.tsx

@@ -1,17 +1,14 @@
-import NoSSR from 'react-no-ssr';
 import { defaultChainName } from '@/config';
+import { ReactNoSSR } from '@interchain-ui/react-no-ssr';
 import { AssetListSection, Layout, WalletSection } from '@/components';
 
 export default function SingleChain() {
   return (
     <Layout>
       <WalletSection isMultiChain={false} />
-      {/* TODO fix type error */}
-      {/* Type error: This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided. */}
-      {/* @ts-ignore */}
-      <NoSSR>
+      <ReactNoSSR>
         <AssetListSection chainName={defaultChainName} />
-      </NoSSR>
+      </ReactNoSSR>
     </Layout>
   );
 }

examples/asset-list/styles/globals.css

@@ -97,4 +97,6 @@ h6 {
 
 #main {
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }