Fix: #9241 supported chains ca sdk layout enhancement

docs/faq/ca/faq.md

@@ -21,7 +21,7 @@ arcana:
     Download and [[ca-sdk-installation|install the appropriate CA SDK flavor]] as per the app type. 
 
     * **Web3 apps**: Install the [{{config.extra.arcana.ca_sdk_name}}](https://www.npmjs.com/package/@arcana/ca-sdk). Check out the integration example in [codesandbox]({{config.extra.arcana.ca_sdk_sandbox_url}})
-    * Web3 apps using the **Wagmi library**: Install the [{{config.extra.arcana.ca_wagmi_sdk_name}}](https://www.npmjs.com/package/@arcana/ca-wagmi). Try the [codesandbox]({{config.extra.arcana.ca_wagmi_sdk_sandbox_url}}) integration example.
+    * Web3 apps using the **Wagmi library**: Install the [{{config.extra.arcana.ca_wagmi_sdk_name}}](https://www.npmjs.com/package/@arcana/ca-wagmi). Try the [codesandbox]({{config.extra.arcana.ca_wagmi_sdk_codesandbox_url}}) integration example.
 
     Refer to the respective SDK quick start guide for integration details.
 

docs/stylesheets/custom.css

@@ -756,6 +756,51 @@ details.an-abstract {
 
 /* Grid Cards: Arcana Styling */
 
+/* Img card styling */
+
+.img-grid-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem; /* Spacing between cards */
+  justify-content: space-between; /* Center cards horizontally */
+}
+
+.img-grid-cards > * {
+  flex: 0 0 20vw; /* Fixed width for cards */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.1rem; /* Inner padding */
+  border: 1px solid #e0e0e0; /* Tiling border */
+  border-radius: 0.5rem; /* Rounded corners */
+  background: #fff; /* Card background */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+}
+
+.img-grid-cards > *, :after, :before {
+  box-sizing: content-box;
+}
+
+.img-grid-cards img {
+  display: block;
+  max-width: 100%;
+  height: 2vw;
+  margin-bottom: 0.5rem; /* Space between logo and text */
+}
+
+/* Adjust card width for different viewports */
+@media (max-width: 600px) {
+  .img-grid-cards > * {
+      flex: 0 0 120px; /* Smaller cards on mobile */
+  }
+}
+
+@media (min-width: 1200px) {
+  .img-grid-cards > * {
+      flex: 0 0 160px; /* Larger cards on desktop */
+  }
+}
+
 /*.md-typeset .grid.cards>ol>li, .md-typeset .grid.cards>ul>li, .md-typeset .grid>.card {*/
 .md-typeset .grid.cards>ul>li{
   border-radius: 9px;

docs/web3-stack/ca_stack.md

@@ -8,45 +8,43 @@ arcana:
 
 # Chain Abstraction Scope
 
-## {{config.extra.arcana.company_name}} CA SDK
-
-[[concept-ca|Chain abstraction]] enables [[concept-unified-balance|unified balance]] of assets across many chains. The {{config.extra.arcana.company_name}} [[ca-sdk-installation|CA SDK]] helps Web3 dApps enable unified balance for app users. Users can sign transactions using any third-aprty browser-based wallet.
+[[concept-ca|Chain abstraction]] helps to solve liquidity fragmentation in Web3 and enables [[concept-unified-balance|unified balance]] of assets across chains. The {{config.extra.arcana.company_name}} [[ca-sdk-installation|chain abstraction SDKs]] help Web3 dApps to enable unified balance for app users and let them spend on any chain. Users can sign transactions using any third-party browser-based wallet.
 
 {% include "./text-snippets/warn_ca_mainnet_only.md" %}
 
 !!! an-caution "Supported Chains & Tokens"
 
     Note that the list of supported chains and tokens for the unified balance feature **may vary** across the {{config.extra.arcana.company_name}} chain abstraction offerings:
 
-    * {{config.extra.arcana.ca_sdk_name}}
-    * Standalone {{config.extra.arcana.company_name}} CA wallet.
+    * SDKs: {{config.extra.arcana.ca_sdk_name}}, {{config.extra.arcana.ca_wagmi_sdk_name}}
+    * {{config.extra.arcana.company_name}} CA wallet.
 
 ## {{config.extra.arcana.ca_sdk_name}}
 
 **Any Web3 app** can integrate with the {{config.extra.arcana.ca_sdk_name}} to enable unified balance for users while deploying any third-party browser-based wallet to sign blockchain transactions.
 
 The {{config.extra.arcana.ca_sdk_name}} supports unified balance feature across the following chains and tokens:
 
-### Chains
-
-{% include "./text-snippets/ca_supported_chains.md" %}
-
 ### Tokens
 
 {% include "./text-snippets/ca_supported_tokens.md" %}
 
+### Chains
+
+{% include "./text-snippets/ca_supported_chains.md" %}
+
 ## {{config.extra.arcana.company_name}} CA Wallet
 
 Web3 wallet users can install the [standalone {{config.extra.arcana.company_name}} CA Wallet]({{config.extra.arcana.ca_wallet_download_url}}) browser extension. This enables unified balance support for the following apps:
 
-### Apps
+### Tokens
 
-{% include "./text-snippets/ca_wallet_supported_apps.md" %}
+{% include "./text-snippets/ca_supported_tokens.md" %}
 
 ### Chains
 
 {% include "./text-snippets/ca_wallet_supported_chains.md" %}
 
-### Tokens
+### Apps
 
-{% include "./text-snippets/ca_supported_tokens.md" %}
+{% include "./text-snippets/ca_wallet_supported_apps.md" %}

includes/text-snippets/ca_supported_chains.md

@@ -1,7 +1,47 @@
+<!---
 * Arbitrum
 * Base
 * Ethereum
 * Linea
 * Optimism
 * Polygon
-* Scroll
+* Scroll
+* --->
+<div class="img-grid-cards">
+
+    <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/arbitrum.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Arbitrum</figcaption>
+    </figure>
+
+    <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/base.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Base</figcaption>
+    </figure>
+
+    <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/ethereum.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Ethereum</figcaption>
+    </figure>
+
+    <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/linea.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Linea</figcaption>
+    </figure>
+
+    <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/optimism.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Optimism</figcaption>
+    </figure>
+
+    <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/polygon.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Polygon</figcaption>
+    </figure>
+
+    <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/scroll.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Scroll</figcaption>
+    </figure>
+
+</div>

includes/text-snippets/ca_wallet_supported_apps.md

@@ -1,3 +1,4 @@
+<!---
 * Aave
 * CowSwap
 * Galaxy Platform
@@ -6,4 +7,57 @@
 * Jumper
 * Polymarket
 * Renzo
-* Uniswap
+* Uniswap
+--->
+
+<div class="img-grid-cards">
+
+      <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/aave.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Aave</figcaption>
+      </figure>
+
+
+      <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/cowswap.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Cowswap</figcaption>
+      </figure>
+
+
+      <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/galaxy.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Galaxy</figcaption>
+      </figure>
+
+
+      <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/griffy.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Griffy</figcaption>
+      </figure>
+
+
+      <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/hyperliquid.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Hyperliquid</figcaption>
+      </figure>
+
+      <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/jumper.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Jumper</figcaption>
+      </figure>      
+
+      <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/polymarket.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Polymarket</figcaption>
+      </figure>
+
+       <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/renzo.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Renzo</figcaption>
+      </figure>     
+
+      <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/uniswap.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Uniswap</figcaption>
+      </figure>     
+</div>

includes/text-snippets/ca_wallet_supported_chains.md

@@ -1,8 +1,54 @@
+<!---
 * Arbitrum
 * Base
 * Ethereum
 * Fuel
 * Linea
 * Optimism
 * Polygon
-* Scroll
+* Scroll
+--->
+
+<div class="img-grid-cards">
+
+      <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/arbitrum.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Arbitrum</figcaption>
+      </figure>
+
+      <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/base.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Base</figcaption>
+      </figure>
+
+      <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/ethereum.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Ethereum</figcaption>
+      </figure>
+
+      <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/fuel.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Fuel</figcaption>
+      </figure>
+
+      <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/linea.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Linea</figcaption>
+      </figure>
+
+      <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/optimism.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Optimism</figcaption>
+      </figure>
+
+      <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/polygon.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Polygon</figcaption>
+      </figure>
+
+      <figure markdown="span">
+        <img src="{{config.extra.arcana.img_dir}}/logos/scroll.{{config.extra.arcana.img_png}}"/>
+        <figcaption>Scroll</figcaption>
+      </figure>
+
+</div>

mkdocs.yml

@@ -505,7 +505,6 @@ nav:
         - Supported Chains: web3-stack/ca_stack.md
         - Architecture: ca/introduction/ca.md
         - Use Cases: ca/introduction/use-cases.md
-        - CA Futures: ca/introduction/futures.md
         - Archives: 
           - relnotes/archives/ca-index.md
           - CA SDK: