feat: add chain configuration to Demo

apps/builder/components/chain-list.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import type { ChainNamespace } from '@reown/appkit-common'
+import { RoundOptionItem } from './ui/round-option-item'
+import { useAppKitContext } from '@/hooks/use-appkit'
+import { useAppKitAccount } from '@reown/appkit-core/react'
+import { AlertDescription } from '@/components/ui/alert'
+import { Alert } from '@/components/ui/alert'
+
+const CHAIN_OPTIONS = [
+  { id: 'eip155', name: 'EVM', imageSrc: '/ethereum.png' },
+  { id: 'solana', name: 'Solana', imageSrc: '/solana.png' },
+  { id: 'bip122', name: 'Bitcoin', imageSrc: '/bitcoin.png' }
+] as {
+  id: ChainNamespace
+  name: string
+  imageSrc: string
+}[]
+
+export function ChainList() {
+  const { caipAddress } = useAppKitAccount()
+  const { enabledChains, removeChain, addChain } = useAppKitContext()
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex gap-2">
+        {CHAIN_OPTIONS.map(chain => (
+          <RoundOptionItem
+            key={chain.id}
+            enabled={enabledChains.includes(chain.id)}
+            disabled={
+              Boolean(caipAddress) ||
+              (enabledChains.includes(chain.id) && enabledChains.length === 1)
+            }
+            imageSrc={chain.imageSrc}
+            onChange={() => {
+              if (enabledChains.includes(chain.id)) {
+                if (enabledChains.length > 1) {
+                  removeChain(chain.id)
+                }
+              } else {
+                addChain(chain.id)
+              }
+            }}
+            name={chain.name}
+          />
+        ))}
+      </div>
+      {caipAddress ? (
+        <Alert>
+          <div className="flex items-center gap-3">
+            <svg className="min-w-[22px]" width="22" height="22" viewBox="0 0 22 22" fill="none">
+              <path
+                d="M11 2.0625C9.23233 2.0625 7.50436 2.58668 6.03459 3.56874C4.56483 4.55081 3.41929 5.94665 2.74283 7.57977C2.06637 9.21288 1.88938 11.0099 2.23424 12.7436C2.57909 14.4773 3.43031 16.0698 4.68024 17.3198C5.93017 18.5697 7.52268 19.4209 9.25638 19.7658C10.9901 20.1106 12.7871 19.9336 14.4202 19.2572C16.0534 18.5807 17.4492 17.4352 18.4313 15.9654C19.4133 14.4956 19.9375 12.7677 19.9375 11C19.935 8.6304 18.9926 6.35856 17.317 4.683C15.6414 3.00743 13.3696 2.065 11 2.0625ZM10.6563 6.1875C10.8602 6.1875 11.0596 6.24798 11.2292 6.3613C11.3988 6.47461 11.531 6.63567 11.609 6.82411C11.6871 7.01254 11.7075 7.21989 11.6677 7.41994C11.6279 7.61998 11.5297 7.80373 11.3855 7.94795C11.2412 8.09218 11.0575 8.19039 10.8574 8.23018C10.6574 8.26998 10.45 8.24955 10.2616 8.1715C10.0732 8.09345 9.91212 7.96127 9.7988 7.79168C9.68549 7.62209 9.625 7.42271 9.625 7.21875C9.625 6.94525 9.73365 6.68294 9.92705 6.48955C10.1204 6.29615 10.3827 6.1875 10.6563 6.1875ZM11.6875 15.8125C11.3228 15.8125 10.9731 15.6676 10.7152 15.4098C10.4574 15.1519 10.3125 14.8022 10.3125 14.4375V11C10.1302 11 9.9553 10.9276 9.82637 10.7986C9.69744 10.6697 9.625 10.4948 9.625 10.3125C9.625 10.1302 9.69744 9.9553 9.82637 9.82636C9.9553 9.69743 10.1302 9.625 10.3125 9.625C10.6772 9.625 11.0269 9.76987 11.2848 10.0277C11.5426 10.2856 11.6875 10.6353 11.6875 11V14.4375C11.8698 14.4375 12.0447 14.5099 12.1736 14.6389C12.3026 14.7678 12.375 14.9427 12.375 15.125C12.375 15.3073 12.3026 15.4822 12.1736 15.6111C12.0447 15.7401 11.8698 15.8125 11.6875 15.8125Z"
+                fill="#9A9A9A"
+              />
+            </svg>
+            <AlertDescription>Customizing the chains available when disconnected</AlertDescription>
+          </div>
+        </Alert>
+      ) : null}
+    </div>
+  )
+}

apps/builder/components/configuration-sections/section-connect-options.tsx

@@ -24,6 +24,10 @@ const SortableConnectMethodList = dynamic(
   }
 )
 
+const ChainList = dynamic(() => import('@/components/chain-list').then(mod => mod.ChainList), {
+  ssr: false
+})
+
 export function SectionConnectOptions() {
   const { config, updateFeatures, updateSocials, updateEnableWallets } = useAppKitContext()
   const collapseWallets = config.features.collapseWallets
@@ -60,19 +64,21 @@ export function SectionConnectOptions() {
 
   return (
     <div className="flex-grow">
+      <div className="text-sm text-text-secondary mb-2">Connect Options</div>
       <SortableConnectMethodList
         items={connectMethodsOrder}
         onToggleOption={handleToggleOption}
         handleNewOrder={handleNewOrder}
         handle={true}
       />
-      <div className="flex flex-col gap-2 h-2"></div>
-      <div className="text-sm text-text-secondary mt-6 mb-2">Wallet options</div>
+      <div className="text-sm text-text-secondary mt-4 mb-2">Layout options</div>
       <FeatureButton
         label="Collapse wallets"
         isEnabled={collapseWallets}
         onClick={toggleCollapseWallets}
       />
+      <div className="text-sm text-text-secondary mt-4 mb-2">Chains</div>
+      <ChainList />
     </div>
   )
 }

apps/builder/components/connect-method-item/connect-method-item.module.css

@@ -17,25 +17,25 @@
     scaleY(var(--scale-y, 1));
   transform-origin: 0 0;
   touch-action: manipulation;
+}
 
-  &.fadeIn {
-    animation: fadeIn 500ms ease;
-  }
+.Wrapper.fadeIn {
+  animation: fadeIn 500ms ease;
+}
 
-  &.dragOverlay {
-    transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-    box-shadow: var(--box-shadow-picked-up);
-    z-index: 999;
-    opacity: 1;
-  }
+.Wrapper.dragOverlay {
+  transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+  box-shadow: var(--box-shadow-picked-up);
+  z-index: 999;
+  opacity: 1;
+}
 
-  &.dragging:not(.dragOverlay) {
-    opacity: 0.5;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    z-index: 0;
-  }
+.Wrapper.dragging:not(.dragOverlay) {
+  opacity: 0.5;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  z-index: 0;
 }
 
 .Item {
@@ -50,19 +50,19 @@
   list-style: none;
   transform-origin: 50% 50%;
   white-space: nowrap;
+}
 
-  &:not(.withHandle) {
-    touch-action: manipulation;
-    cursor: grab;
-  }
+.Item:not(.withHandle) {
+  touch-action: manipulation;
+  cursor: grab;
+}
 
-  &.disabled {
-    color: #999;
-    background-color: #f1f1f1;
-    cursor: not-allowed;
-  }
+.Item.disabled {
+  color: #999;
+  background-color: #f1f1f1;
+  cursor: not-allowed;
+}
 
-  & span {
-    user-select: none;
-  }
+.Item span {
+  user-select: none;
 }

apps/builder/components/social-option-item/social-option-item.tsx

@@ -122,7 +122,7 @@ export const SocialOptionItem = React.memo(
             dragOverlay && styles.dragOverlay,
             socials.includes(value as SocialProvider)
               ? 'border border-border-accent bg-background-accent-primary/10'
-              : 'border border-neutral-700'
+              : 'border border-neutral-300 dark:border-neutral-700'
           )}
           style={
             {

apps/builder/components/social-option-item/sortable-social-item.module.css

@@ -31,25 +31,25 @@
     scaleY(var(--scale-y, 1));
   transform-origin: 0 0;
   touch-action: manipulation;
+}
 
-  &.fadeIn {
-    animation: fadeIn 500ms ease;
-  }
+.Wrapper.fadeIn {
+  animation: fadeIn 500ms ease;
+}
 
-  &.dragOverlay {
-    --scale: 1.05;
-    --box-shadow: $box-shadow;
-    --box-shadow-picked-up: $box-shadow-border, -1px 0 15px 0 rgba(34, 33, 81, 0.01),
-      0px 15px 15px 0 rgba(34, 33, 81, 0.25);
-    z-index: 999;
-    opacity: 1;
-  }
+.Wrapper.dragOverlay {
+  --scale: 1.05;
+  --box-shadow: $box-shadow;
+  --box-shadow-picked-up: $box-shadow-border, -1px 0 15px 0 rgba(34, 33, 81, 0.01),
+    0px 15px 15px 0 rgba(34, 33, 81, 0.25);
+  z-index: 999;
+  opacity: 1;
+}
 
-  &.enabled {
-    --tw-border-opacity: 1;
-    border: 1px solid var(--wallet-connect-border-border-accent-primary, #0988f0);
-    background: var(--foreground-foreground-accent-primary-010, rgba(9, 136, 240, 0.1));
-  }
+.Wrapper.enabled {
+  --tw-border-opacity: 1;
+  border: 1px solid var(--wallet-connect-border-border-accent-primary, #0988f0);
+  background: var(--foreground-foreground-accent-primary-010, rgba(9, 136, 240, 0.1));
 }
 
 .ListItem {
@@ -70,61 +70,56 @@
   user-select: none;
   width: 32px;
   height: 32px;
-
   -webkit-tap-highlight-color: transparent;
-
   transform: scale(var(--scale, 1));
   transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+}
 
-  &:not(.withHandle) {
-    touch-action: manipulation;
-    cursor: grab;
-  }
+.Item:not(.withHandle) {
+  touch-action: manipulation;
+  cursor: grab;
+}
 
-  &.dragging:not(.dragOverlay) {
-    opacity: var(--dragging-opacity, 0.5);
-    z-index: 0;
-  }
+.Item.dragging:not(.dragOverlay) {
+  opacity: var(--dragging-opacity, 0.5);
+  z-index: 0;
+}
 
-  &.disabled {
-    color: #999;
-    background-color: #f1f1f1;
-    cursor: not-allowed;
-  }
+.Item.disabled {
+  color: #999;
+  background-color: #f1f1f1;
+  cursor: not-allowed;
+}
 
-  &.dragOverlay {
-    cursor: inherit;
-    /* box-shadow: 0 0px 6px 2px $focused-outline-color; */
-    animation: pop 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-    transform: scale(var(--scale));
-    opacity: 1;
-  }
+.Item.dragOverlay {
+  cursor: inherit;
+  animation: pop 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+  transform: scale(var(--scale));
+  opacity: 1;
+}
 
-  &.color:before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 0;
-    height: 100%;
-    width: 3px;
-    display: block;
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
+.Item.color:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0;
+  height: 100%;
+  width: 3px;
+  display: block;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
 
-  &:hover {
-    .Remove {
-      visibility: visible;
-    }
-  }
+.Item:hover .Remove {
+  visibility: visible;
+}
 
-  & span {
-    user-select: none;
-  }
+.Item span {
+  user-select: none;
+}
 
-  & wui-logo {
-    width: 32px;
-    height: 32px;
-  }
+.Item wui-logo {
+  width: 32px;
+  height: 32px;
 }

apps/builder/components/social-options-grid/social-options-grid.module.css

@@ -4,12 +4,16 @@
   grid-template-columns: repeat(var(--col-count), 1fr);
   grid-gap: 10px;
   padding: 20px;
+}
 
-  @media (max-width: 850px) {
+@media (max-width: 850px) {
+  .GridContainer {
     grid-template-columns: repeat(calc(var(--col-count) - 1), 1fr);
   }
+}
 
-  @media (max-width: 650px) {
+@media (max-width: 650px) {
+  .GridContainer {
     grid-template-columns: repeat(calc(var(--col-count) - 2), 1fr);
   }
 }

apps/builder/components/ui/round-option-item.tsx

@@ -0,0 +1,44 @@
+import { cn } from '@/lib/utils'
+import Image from 'next/image'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
+
+interface RoundOptionItemProps {
+  enabled: boolean
+  imageSrc: string
+  onChange: () => void
+  disabled?: boolean
+  name: string
+}
+
+export function RoundOptionItem({
+  enabled,
+  imageSrc,
+  onChange,
+  disabled,
+  name
+}: RoundOptionItemProps) {
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={500}>
+        <TooltipTrigger asChild>
+          <button
+            onClick={onChange}
+            disabled={disabled}
+            className={cn(
+              'w-12 h-12 rounded-full transition-all flex items-center justify-center',
+              enabled
+                ? 'border border-border-accent bg-background-accent-primary/10 dark:bg-background-accent-primary/10'
+                : 'border border-neutral-300 dark:border-neutral-700',
+              disabled && 'opacity-50 cursor-not-allowed'
+            )}
+          >
+            <Image src={imageSrc} alt={name} width={32} height={32} />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{name}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}