feat: add chain configuration to Demo (#3589)

Co-authored-by: tomiir <rocchitomas@gmail.com>
reown-com · Jan 22, 2025 · 6932fbf · 6932fbf
1 parent 1fcb490
commit 6932fbf
Show file tree

Hide file tree

Showing 37 changed files with 1,472 additions and 374 deletions.
diff --git a/.changeset/curly-dodos-scream.md b/.changeset/curly-dodos-scream.md
@@ -0,0 +1,23 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-core': patch
+'@reown/appkit-adapter-bitcoin': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-common': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Refactors network switching when trying to use auth connector but active network is not supported by auth connector
diff --git a/.changeset/curly-mangos-stare.md b/.changeset/curly-mangos-stare.md
@@ -0,0 +1,23 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-core': patch
+'@reown/appkit-adapter-bitcoin': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-common': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Refactors connector rendering logics when add/remove adapters for email/social login
diff --git a/apps/builder/components/chain-list.tsx b/apps/builder/components/chain-list.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import type { ChainNamespace } from '@reown/appkit-common'
+import { useAppKitAccount } from '@reown/appkit-core/react'
+
+import { ExclamationMarkIcon } from '@/components/icon/exclamation-mark'
+import { AlertDescription } from '@/components/ui/alert'
+import { Alert } from '@/components/ui/alert'
+import { useAppKitContext } from '@/hooks/use-appkit'
+
+import { RoundOptionItem } from './ui/round-option-item'
+
+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()
+  const handleChainChange = (chainId: ChainNamespace) => {
+    if (enabledChains.includes(chainId)) {
+      if (enabledChains.length > 1) {
+        removeChain(chainId)
+      }
+    } else {
+      addChain(chainId)
+    }
+  }
+
+  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={() => handleChainChange(chain.id)}
+            name={chain.name}
+          />
+        ))}
+      </div>
+      {caipAddress ? (
+        <Alert>
+          <div className="flex items-center gap-3">
+            <ExclamationMarkIcon />
+            <AlertDescription>Customizing the chains available when disconnected</AlertDescription>
+          </div>
+        </Alert>
+      ) : null}
+    </div>
+  )
+}
diff --git a/apps/builder/components/configuration-sections/section-connect-options.tsx b/apps/builder/components/configuration-sections/section-connect-options.tsx
@@ -25,6 +25,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
@@ -61,19 +65,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>
   )
 }
diff --git a/apps/builder/components/configuration-sections/section-wallet-features.tsx b/apps/builder/components/configuration-sections/section-wallet-features.tsx
@@ -3,6 +3,7 @@ import { UniqueIdentifier } from '@dnd-kit/core'
 import { ConstantsUtil, WalletFeature } from '@reown/appkit-core'
 import { useAppKitAccount } from '@reown/appkit-core/react'
 
+import { ExclamationMarkIcon } from '@/components/icon/exclamation-mark'
 import { SortableWalletFeatureList } from '@/components/sortable-list-wallet-features'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { useAppKitContext } from '@/hooks/use-appkit'
@@ -69,12 +70,7 @@ export function SectionWalletFeatures() {
       {!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>
+            <ExclamationMarkIcon />
             <AlertDescription>Connect to a wallet to view feature customization</AlertDescription>
           </div>
         </Alert>

diff --git a/apps/builder/components/connect-method-item/connect-method-item.module.css b/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;
 }
diff --git a/apps/builder/components/icon/exclamation-mark.tsx b/apps/builder/components/icon/exclamation-mark.tsx
@@ -0,0 +1,10 @@
+export function ExclamationMarkIcon() {
+  return (
+    <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>
+  )
+}
diff --git a/apps/builder/components/social-option-item/social-option-item.tsx b/apps/builder/components/social-option-item/social-option-item.tsx
@@ -125,7 +125,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={
             {