chore: improved shimmer + fixed reown logo in qr code landscape

Author: ignaciosantise

packages/appkit/src/partials/w3m-connecting-qrcode/components/ReownButton.tsx

@@ -0,0 +1,20 @@
+import { Linking, type StyleProp, type ViewStyle } from 'react-native';
+import { ConstantsUtil } from '@reown/appkit-common-react-native';
+import { FlexView, Icon, Pressable, Text } from '@reown/appkit-ui-react-native';
+
+interface Props {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ReownButton({ style }: Props) {
+  return (
+    <Pressable onPress={() => Linking.openURL(ConstantsUtil.REOWN_URL)} style={style}>
+      <FlexView alignItems="center" justifyContent="center" flexDirection="row" columnGap="2xs">
+        <Text variant="small-500" color="fg-100">
+          UX by
+        </Text>
+        <Icon name="reown" color="fg-150" width={100} height={30} />
+      </FlexView>
+    </Pressable>
+  );
+}

packages/appkit/src/partials/w3m-connecting-qrcode/index.tsx

@@ -6,11 +6,10 @@ import {
   OptionsController,
   SnackController
 } from '@reown/appkit-core-react-native';
-import { ConstantsUtil } from '@reown/appkit-common-react-native';
-import { FlexView, Link, QrCode, Text, Spacing, Icon } from '@reown/appkit-ui-react-native';
+import { FlexView, Link, QrCode, Text, Spacing } from '@reown/appkit-ui-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
-import { Linking, Pressable } from 'react-native';
+import { ReownButton } from './components/ReownButton';
 
 export function ConnectingQrCode() {
   const { wcUri } = useSnapshot(WcController.state);
@@ -49,10 +48,11 @@ export function ConnectingQrCode() {
       alignItems="center"
       justifyContent="center"
       flexDirection={isPortrait ? 'column' : 'row'}
-      padding={['xl', 'xl', '2xl', 'xl']}
+      padding="xl"
     >
       <QrCode size={qrSize} uri={wcUri} testID="qr-code" />
-      <FlexView alignItems="center" margin={['m', 'm', '3xl', 'm']}>
+      {!isPortrait ? <ReownButton /> : null}
+      <FlexView alignItems="center" margin={['m', 'm', '0', 'm']}>
         <Text variant="paragraph-500">Scan this QR code with your phone</Text>
         {showCopy ? (
           <Link
@@ -65,15 +65,8 @@ export function ConnectingQrCode() {
             Copy link
           </Link>
         ) : null}
+        <ReownButton style={styles.reownButton} />
       </FlexView>
-      <Pressable onPress={() => Linking.openURL(ConstantsUtil.REOWN_URL)}>
-        <FlexView alignItems="center" justifyContent="center" flexDirection="row" columnGap="2xs">
-          <Text variant="small-500" color="fg-100">
-            UX by
-          </Text>
-          <Icon name="reown" color="fg-150" width={100} height={30} />
-        </FlexView>
-      </Pressable>
     </FlexView>
   );
 }

packages/appkit/src/partials/w3m-connecting-qrcode/styles.ts

@@ -4,5 +4,8 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   copyButton: {
     marginTop: Spacing.m
+  },
+  reownButton: {
+    marginTop: Spacing['2xl']
   }
 });

packages/ui/src/components/wui-shimmer/index.tsx

@@ -69,10 +69,11 @@ export const Shimmer = ({
 
   const onLayout = (event: any) => {
     const { width: w, height: h } = event.nativeEvent.layout;
-    if (!measuredWidth) {
+    // Update measurements whenever they change to adapt to dynamic layout/orientation
+    if (measuredWidth == null || Math.abs(w - measuredWidth) > 0.5) {
       setMeasuredWidth(w);
     }
-    if (!measuredHeight) {
+    if (measuredHeight == null || Math.abs(h - measuredHeight) > 0.5) {
       setMeasuredHeight(h);
     }
   };