Merge branch 'main' into fix/safe-local-storage

reown-com · Dec 17, 2024 · f927c72 · f927c72
2 parents 783902d + 3cf3bc5
commit f927c72
Show file tree

Hide file tree

Showing 57 changed files with 3,418 additions and 1,364 deletions.
diff --git a/.changeset/lovely-dragons-clap.md b/.changeset/lovely-dragons-clap.md
@@ -0,0 +1,22 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit': patch
+'@reown/appkit-core': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': 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
+---
+
+Adds walletConnectProvider flag to inject a UniversalProvider instance to be used by AppKit'
diff --git a/.changeset/old-bugs-exercise.md b/.changeset/old-bugs-exercise.md
@@ -0,0 +1,22 @@
+---
+'@reown/appkit-scaffold-ui': 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-core': 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 connect view's mask image styling with resize observer for dynamic masking
diff --git a/.changeset/silver-rockets-brush.md b/.changeset/silver-rockets-brush.md
@@ -0,0 +1,22 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit': patch
+'@reown/appkit-core': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': 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
+---
+
+Expose a public function to get connect method order with AppKit instance
diff --git a/.changeset/warm-ligers-flow.md b/.changeset/warm-ligers-flow.md
@@ -1,6 +1,5 @@
 ---
 '@reown/appkit-scaffold-ui': patch
-'@apps/builder': patch
 '@reown/appkit-adapter-ethers': patch
 '@reown/appkit-adapter-ethers5': patch
 '@reown/appkit-adapter-solana': patch

diff --git a/apps/builder/app/global-error.tsx b/apps/builder/app/global-error.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import * as Sentry from '@sentry/nextjs'
+import NextError from 'next/error'
+import { useEffect } from 'react'
+
+export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
+  useEffect(() => {
+    Sentry.captureException(error)
+  }, [error])
+
+  return (
+    <html>
+      <body>
+        {/* `NextError` is the default Next.js error page component. Its type
+        definition requires a `statusCode` prop. However, since the App Router
+        does not expose status codes for errors, we simply pass 0 to render a
+        generic error message. */}
+        <NextError statusCode={0} />
+      </body>
+    </html>
+  )
+}
diff --git a/apps/builder/app/globals.css b/apps/builder/app/globals.css
@@ -62,6 +62,9 @@ body {
     --apkt-border-lg: 16px;
 
     --box-shadow-picked-up: 0px 2px 8px 2px hsl(var(--apkt-background-primary) / 0.5);
+
+    /* Page Background */
+    --page-background-image-color: hsl(0, 0%, 87%);
   }
   .dark {
     --apkt-background-primary: 0 0% 13%;
@@ -105,6 +108,9 @@ body {
     --border: 0 0% 14.9%;
     --input: 0 0% 14.9%;
     --ring: 0 0% 83.1%;
+
+    /* Page Background */
+    --page-background-image-color: hsl(0deg 0% 17.25%);
   }
 }
 
@@ -124,4 +130,9 @@ body {
   .ease {
     transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
   }
+  .page-container {
+    background-image: radial-gradient(var(--page-background-image-color) 1px, #ffffff00 1px);
+    background-size: 16px 16px;
+    background-position: -16px -8px;
+  }
 }
diff --git a/apps/builder/app/layout.tsx b/apps/builder/app/layout.tsx
@@ -9,7 +9,7 @@ import { AppKitProvider } from '@/providers/appkit-provider'
 import { headers } from 'next/headers'
 import './globals.css'
 
-const title = 'AppKit | Builder'
+const title = 'AppKit Demo'
 const description = 'The full stack toolkit to build onchain app UX'
 
 export const metadata: Metadata = {
@@ -19,8 +19,37 @@ export const metadata: Metadata = {
     title,
     description,
     locale: 'en_US',
-    type: 'website'
+    type: 'website',
+    images: [
+      {
+        url: '/appkit-demo-open-graph.png',
+        width: 1200,
+        height: 630
+      }
+    ]
+  },
+  twitter: {
+    card: 'summary_large_image',
+    images: [
+      {
+        url: '/appkit-demo-open-graph.png',
+        width: 1200,
+        height: 630
+      }
+    ]
   },
+  creator: 'reown, inc.',
+  keywords: [
+    'appkit',
+    'reown',
+    'demo',
+    'wallet',
+    'connect',
+    'web3',
+    'crypto',
+    'blockchain',
+    'dapp'
+  ],
   icons: {
     icon: [
       {

diff --git a/apps/builder/app/page.tsx b/apps/builder/app/page.tsx
@@ -9,7 +9,7 @@ export default function Page() {
   return (
     <div
       className={cn(
-        'flex flex-col-reverse items-center md:items-start md:flex-row p-4 bg-background gap-4 pt-10 md:pt-4 h-full overflow-auto'
+        'page-container flex flex-col-reverse items-center md:items-start md:flex-row p-4 bg-background gap-4 pt-10 md:pt-4 h-full overflow-auto'
       )}
     >
       <div className="flex max-w-[450px] md:max-w-[340px] w-full bg-transparent md:bg-fg-primary h-none md:h-full text-foreground p-0 md:p-6 flex-col rounded-2xl overflow-none md:overflow-y-auto h-auto pb-20">

diff --git a/apps/builder/components/configuration-sections/section-connect-options.tsx b/apps/builder/components/configuration-sections/section-connect-options.tsx
@@ -27,8 +27,7 @@ const SortableConnectMethodList = dynamic(
 export function SectionConnectOptions() {
   const { config, updateFeatures, updateSocials, updateEnableWallets } = useAppKitContext()
   const collapseWallets = config.features.collapseWallets
-  const connectMethodsOrder =
-    config.features.connectMethodsOrder || ConstantsUtil.DEFAULT_FEATURES.connectMethodsOrder
+  const connectMethodsOrder = config.features.connectMethodsOrder
 
   function toggleCollapseWallets() {
     updateFeatures({ collapseWallets: !collapseWallets })

diff --git a/apps/builder/components/configuration-sections/section-design.tsx b/apps/builder/components/configuration-sections/section-design.tsx
@@ -163,10 +163,9 @@ export function SectionDesign() {
               <Image
                 src="/color-picker-icon.png"
                 alt="Color picker icon"
-                objectFit="cover"
                 width={16}
                 height={16}
-                className="rounded-2xl aspect-square"
+                className="rounded-2xl aspect-square object-cover"
               />
             </button>
             <input

diff --git a/apps/builder/components/configuration-sections/section-wallet-features.tsx b/apps/builder/components/configuration-sections/section-wallet-features.tsx
@@ -4,12 +4,15 @@ import { WalletFeatureName } from '@/lib/types'
 import { ConstantsUtil, WalletFeature } from '@reown/appkit-core'
 import { urlStateUtils } from '@/lib/url-state'
 import { SortableWalletFeatureList } from '@/components/sortable-list-wallet-features'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { useAppKitAccount } from '@reown/appkit-core/react'
 
 const defaultWalletFeaturesOrder = ['onramp', 'swaps', 'receive', 'send']
 
 export function SectionWalletFeatures() {
+  const { caipAddress } = useAppKitAccount()
   const { config, updateFeatures } = useAppKitContext()
-  const connectMethodsOrder = config.features.walletFeaturesOrder || defaultWalletFeaturesOrder
+  const walletFeaturesOrder = config.features.walletFeaturesOrder || defaultWalletFeaturesOrder
 
   function handleNewOrder(items: UniqueIdentifier[]) {
     const titleValueMap = {
@@ -33,15 +36,12 @@ export function SectionWalletFeatures() {
       case 'Swap':
         updateFeatures({ swaps: !config.features.swaps })
         return
-      case 'Receive':
-      case 'Send':
-        return
       default:
         return
     }
   }
 
-  const featureNameMap = connectMethodsOrder.map(name => {
+  const featureNameMap = walletFeaturesOrder.map(name => {
     switch (name) {
       case 'onramp':
         return 'Buy'
@@ -57,11 +57,26 @@ export function SectionWalletFeatures() {
   })
 
   return (
-    <SortableWalletFeatureList
-      items={featureNameMap}
-      onToggleOption={handleToggleOption}
-      handleNewOrder={handleNewOrder}
-      handle={true}
-    />
+    <div className="flex flex-col gap-2">
+      <SortableWalletFeatureList
+        items={featureNameMap}
+        onToggleOption={handleToggleOption}
+        handleNewOrder={handleNewOrder}
+        handle={true}
+      />
+      {!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>Connect to a wallet to view feature customization</AlertDescription>
+          </div>
+        </Alert>
+      ) : null}
+    </div>
   )
 }
diff --git a/apps/builder/components/preview-content.tsx b/apps/builder/components/preview-content.tsx
@@ -4,9 +4,14 @@ import { Button } from '@/components/ui/button'
 import { toast } from 'sonner'
 import { Link1Icon, ResetIcon } from '@radix-ui/react-icons'
 import { useAppKitContext } from '@/hooks/use-appkit'
+import { useAppKitState } from '@reown/appkit/react'
+import { useEffect } from 'react'
+import { useState } from 'react'
 
 export function PreviewContent() {
-  const { isInitialized, resetConfigs } = useAppKitContext()
+  const [shouldRender, setShouldRender] = useState(false)
+  const { initialized } = useAppKitState()
+  const { resetConfigs } = useAppKitContext()
 
   async function handleShare() {
     try {
@@ -17,10 +22,18 @@ export function PreviewContent() {
     }
   }
 
+  useEffect(() => {
+    setShouldRender(initialized)
+  }, [initialized])
+
+  if (!shouldRender) {
+    return null
+  }
+
   return (
     <>
-      <div className="w-full max-w-[400px] py-8 mx-auto flex-grow items-center justify-center flex-1 flex items-center justify-center">
-        {isInitialized ? (
+      <div className="w-full max-w-[400px] py-8 mx-auto flex-grow flex-1 flex items-center justify-center">
+        {shouldRender ? (
           <>
             {/* @ts-ignore */}
             <w3m-modal

diff --git a/apps/builder/components/sidebar-content.tsx b/apps/builder/components/sidebar-content.tsx
@@ -3,7 +3,6 @@
 import * as React from 'react'
 import { buttonVariants } from '@/components/ui/button'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { useAppKitContext } from '@/hooks/use-appkit'
 import { cn } from '@/lib/utils'
 
 import Link from 'next/link'
@@ -14,8 +13,6 @@ import { SectionDesign } from '@/components/configuration-sections/section-desig
 import { BrandingHeader } from '@/components/branding-header'
 
 export function SidebarContent() {
-  const { config } = useAppKitContext()
-  const { isInitialized } = useAppKitContext()
   const [activeTab, setActiveTab] = React.useState('auth')
 
   return (
@@ -44,7 +41,7 @@ export function SidebarContent() {
         </div>
       </div>
 
-      <div className="flex flex-col items-center w-full gap-2 mt-8">
+      <div className="flex flex-col items-center w-full gap-2 mt-8 pb-2">
         <Link
           href="https://docs.reown.com/appkit/overview"
           target="_blank"

diff --git a/apps/builder/components/social-buttons.tsx b/apps/builder/components/social-buttons.tsx
@@ -1,6 +1,5 @@
 import { SortableSocialGrid } from '@/components/sortable-social-grid'
 import { useAppKitContext } from '@/hooks/use-appkit'
-import { urlStateUtils } from '@/lib/url-state'
 import { UniqueIdentifier } from '@dnd-kit/core'
 import { ConstantsUtil, SocialProvider } from '@reown/appkit-core'
 
@@ -10,9 +9,7 @@ export function SocialButtons() {
   const { updateFeatures } = useAppKitContext()
 
   function handleNewOrder(items: UniqueIdentifier[]) {
-    const currentFeatures =
-      urlStateUtils.getStateFromURL()?.features || ConstantsUtil.DEFAULT_FEATURES
-    updateFeatures({ ...currentFeatures, socials: items as SocialProvider[] })
+    updateFeatures({ socials: items as SocialProvider[] })
   }
 
   return (

diff --git a/apps/builder/components/social-option-item/social-option-item.tsx b/apps/builder/components/social-option-item/social-option-item.tsx
@@ -74,8 +74,8 @@ export const SocialOptionItem = React.memo(
       const socials = config.features.socials || []
       const { isDraggingByKey } = useAppKitContext()
       const emailDragging = isDraggingByKey['email']
-      const walletsDragging = isDraggingByKey['wallets']
-      const socialsDragging = isDraggingByKey['socials']
+      const walletsDragging = isDraggingByKey['wallet']
+      const socialsDragging = isDraggingByKey['social']
       const isAnyDragging = emailDragging || walletsDragging || socialsDragging
 
       useEffect(() => {