fix: wallet icons selectable on connect modal (iOS) (#1726)

* fix: ios selection bug

* chore: apply -webkit only to ios

* chore: changeset

* chore: tweak changeset

---------

Co-authored-by: Daniel Sinclair <d@niel.nyc>

.changeset/yellow-moons-move.md

@@ -0,0 +1,5 @@
+---
+"@rainbow-me/rainbowkit": patch
+---
+
+Fixed a bug that allowed users to hold-press or cursor select wallet icons on iOS, which interrupted the connection experiencce.

packages/rainbowkit/src/components/AsyncImage/AsyncImage.tsx

@@ -1,4 +1,5 @@
 import React, { useReducer } from 'react';
+import { isIOS } from '../../utils/isMobile';
 import { Box, BoxProps } from '../Box/Box';
 import { AsyncImageSrc, useAsyncImage } from './useAsyncImage';
 
@@ -28,6 +29,7 @@ export function AsyncImage({
   width,
   testId,
 }: AsyncImageProps) {
+  const ios = isIOS();
   const src = useAsyncImage(srcProp);
   const isRemoteImage = src && /^http/.test(src);
   const [isRemoteImageLoaded, setRemoteImageLoaded] = useReducer(
@@ -66,6 +68,7 @@ export function AsyncImage({
             })}
         height="full"
         position="absolute"
+        {...(ios ? { WebkitUserSelect: 'none' } : {})}
         style={{
           touchCallout: 'none',
           transition: 'opacity .15s linear',

packages/rainbowkit/src/css/sprinkles.css.ts

@@ -211,6 +211,7 @@ const unresponsiveProperties = defineProperties({
     paddingRight: spacing,
     paddingTop: spacing,
     position: ['absolute', 'fixed', 'relative'],
+    WebkitUserSelect: ['none'],
     right: {
       '0': '0',
     },