Skip to content

Commit 8351447

Browse files
ignaciosantiseignaciosantise
authored
Merge pull request #497 from reown-com/chore/qr-borders
chore: round qr code logo borders
2 parents 79bfff3 + b92831d commit 8351447

File tree

7 files changed

+369
-168
lines changed

7 files changed

+369
-168
lines changed

‎.changeset/eager-walls-tease.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
'@reown/appkit-react-native': patch
3+
'@reown/appkit-ui-react-native': patch
4+
'@reown/appkit-bitcoin-react-native': patch
5+
'@reown/appkit-coinbase-react-native': patch
6+
'@reown/appkit-common-react-native': patch
7+
'@reown/appkit-core-react-native': patch
8+
'@reown/appkit-ethers-react-native': patch
9+
'@reown/appkit-solana-react-native': patch
10+
'@reown/appkit-wagmi-react-native': patch
11+
---
12+
13+
chore: round logo from qr code + added borderWidth 0 to card component

‎packages/appkit/src/modal/w3m-modal/styles.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { StyleSheet } from 'react-native';
33
export default StyleSheet.create({
44
card: {
55
borderBottomLeftRadius: 0,
6-
borderBottomRightRadius: 0
6+
borderBottomRightRadius: 0,
7+
borderWidth: 0
78
}
89
});

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ import styles from './styles';
2020
import { ReownButton } from './components/ReownButton';
2121
import { useWindowDimensions } from 'react-native';
2222

23+
const LOGO_SIZE = 60;
24+
const LOGO_BORDER_RADIUS = 10;
25+
2326
export function ConnectingQrCode() {
2427
const { height, width } = useWindowDimensions();
2528
const windowSize = Math.min(height, width);
@@ -65,7 +68,13 @@ export function ConnectingQrCode() {
6568
flexDirection={isPortrait ? 'column' : 'row'}
6669
padding={['xl', 'xl', 'xs', 'xl']}
6770
>
68-
<QrCode size={qrSize} uri={wcUri} testID="qr-code" />
71+
<QrCode
72+
size={qrSize}
73+
uri={wcUri}
74+
testID="qr-code"
75+
logoBorderRadius={LOGO_BORDER_RADIUS}
76+
logoSize={LOGO_SIZE}
77+
/>
6978
<FlexView alignItems="center" margin="m">
7079
<Text variant="paragraph-500">Scan this QR code with your phone</Text>
7180
{showCopy ? (

‎packages/ui/src/assets/svg/WalletConnect.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import Svg, { ClipPath, Defs, G, Path, type SvgProps } from 'react-native-svg';
22
const SvgWalletConnect = (props: SvgProps) => (
3-
<Svg fill="none" viewBox="0 0 96 67" {...props}>
3+
<Svg fill="none" viewBox="0 0 37 23" {...props}>
44
<Path
55
fill={props.fill ?? '#fff'}
6-
d="M25.32 18.8a32.56 32.56 0 0 1 45.36 0l1.5 1.47c.63.62.63 1.61 0 2.22l-5.15 5.05c-.31.3-.82.3-1.14 0l-2.07-2.03a22.71 22.71 0 0 0-31.64 0l-2.22 2.18c-.31.3-.82.3-1.14 0l-5.15-5.05a1.55 1.55 0 0 1 0-2.22l1.65-1.62Zm56.02 10.44 4.59 4.5c.63.6.63 1.6 0 2.21l-20.7 20.26c-.62.61-1.63.61-2.26 0L48.28 41.83a.4.4 0 0 0-.56 0L33.03 56.21c-.63.61-1.64.61-2.27 0L10.07 35.95a1.55 1.55 0 0 1 0-2.22l4.59-4.5a1.63 1.63 0 0 1 2.27 0L31.6 43.63a.4.4 0 0 0 .57 0l14.69-14.38a1.63 1.63 0 0 1 2.26 0l14.69 14.38a.4.4 0 0 0 .57 0l14.68-14.38a1.63 1.63 0 0 1 2.27 0Z"
6+
d="M26.6428 8.62163L29.8418 5.42265C22.6115 -1.80755 13.6277 -1.80755 6.39746 5.42265L9.59644 8.62163C15.0953 3.12281 21.1477 3.12281 26.6465 8.62163H26.6428Z"
77
/>
88
<Path
9-
stroke="#000"
10-
strokeOpacity=".1"
11-
d="M25.67 19.15a32.06 32.06 0 0 1 44.66 0l1.5 1.48c.43.42.43 1.09 0 1.5l-5.15 5.05a.31.31 0 0 1-.44 0l-2.07-2.03a23.21 23.21 0 0 0-32.34 0l-2.22 2.18a.31.31 0 0 1-.44 0l-5.15-5.05a1.05 1.05 0 0 1 0-1.5l1.65-1.63ZM81 29.6l4.6 4.5c.42.41.42 1.09 0 1.5l-20.7 20.26c-.43.43-1.14.43-1.57 0L48.63 41.47a.9.9 0 0 0-1.26 0L32.68 55.85c-.43.43-1.14.43-1.57 0L10.42 35.6a1.05 1.05 0 0 1 0-1.5l4.59-4.5a1.13 1.13 0 0 1 1.57 0l14.68 14.38a.9.9 0 0 0 1.27 0l-.35-.35.35.35L47.22 29.6a1.13 1.13 0 0 1 1.56 0l14.7 14.38a.9.9 0 0 0 1.26 0L79.42 29.6a1.13 1.13 0 0 1 1.57 0Z"
9+
fill={props.fill ?? '#fff'}
10+
d="M25.5769 16.0749L18.1164 8.61435L10.6558 16.0749L3.19526 8.61435L0 11.8096L10.6558 22.4691L18.1164 15.0086L25.5769 22.4691L36.2328 11.8096L33.0375 8.61435L25.5769 16.0749Z"
1211
/>
1312
</Svg>
1413
);

‎packages/ui/src/composites/wui-qr-code/index.tsx‎

Lines changed: 75 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { memo, useMemo } from 'react';
22
import { View, type StyleProp, type ViewStyle } from 'react-native';
3-
import Svg from 'react-native-svg';
3+
import Svg, { Circle, Line, Rect } from 'react-native-svg';
44
import { Icon } from '../../components/wui-icon';
55
import { Image } from '../../components/wui-image';
66
import { Shimmer } from '../../components/wui-shimmer';
@@ -17,17 +17,32 @@ export interface QrCodeProps {
1717
testID?: string;
1818
arenaClear?: boolean;
1919
style?: StyleProp<ViewStyle>;
20+
logoSize?: number;
21+
logoBorderRadius?: number;
2022
}
2123

22-
export function QrCode_({ size, uri, imageSrc, testID, arenaClear, icon, style }: QrCodeProps) {
24+
export function QrCode_({
25+
size,
26+
uri,
27+
imageSrc,
28+
testID,
29+
arenaClear,
30+
icon,
31+
style,
32+
logoSize,
33+
logoBorderRadius
34+
}: QrCodeProps) {
2335
const Theme = LightTheme;
2436
const containerPadding = Spacing.l;
2537
const qrSize = size - containerPadding * 2;
26-
const logoSize = arenaClear ? 0 : qrSize / 4;
38+
const _logoSize = arenaClear ? 0 : logoSize ?? qrSize / 4;
2739

28-
const dots = useMemo(
29-
() => (uri ? QRCodeUtil.generate(uri, qrSize, logoSize) : []),
30-
[uri, qrSize, logoSize]
40+
const dotColor = Theme['inverse-000'];
41+
const edgeColor = Theme['inverse-100'];
42+
43+
const qrData = useMemo(
44+
() => (uri ? QRCodeUtil.generate(uri, qrSize, _logoSize, logoBorderRadius) : null),
45+
[uri, qrSize, _logoSize, logoBorderRadius]
3146
);
3247

3348
const logoTemplate = () => {
@@ -40,8 +55,12 @@ export function QrCode_({ size, uri, imageSrc, testID, arenaClear, icon, style }
4055
<Image
4156
source={imageSrc}
4257
style={[
43-
styles.icon,
44-
{ height: qrSize / 4, width: qrSize / 4, borderRadius: qrSize / 16 }
58+
{
59+
position: 'absolute' as const,
60+
height: _logoSize,
61+
width: _logoSize,
62+
borderRadius: logoBorderRadius
63+
}
4564
]}
4665
/>
4766
);
@@ -51,14 +70,18 @@ export function QrCode_({ size, uri, imageSrc, testID, arenaClear, icon, style }
5170
<Icon
5271
name={icon ?? 'walletConnect'}
5372
color="accent-100"
54-
height={qrSize / 3.5}
55-
width={qrSize / 3.5}
56-
style={styles.icon}
73+
height={_logoSize}
74+
width={_logoSize}
75+
style={{ position: 'absolute' as const }}
5776
/>
5877
);
5978
};
6079

61-
return uri ? (
80+
if (!uri || !qrData) {
81+
return <Shimmer width={size} height={size} borderRadius={BorderRadius.l} />;
82+
}
83+
84+
return (
6285
<View
6386
style={[
6487
styles.container,
@@ -68,19 +91,55 @@ export function QrCode_({ size, uri, imageSrc, testID, arenaClear, icon, style }
6891
testID={testID}
6992
>
7093
<Svg height={qrSize} width={qrSize}>
71-
{dots}
94+
{/* Render rectangles */}
95+
{qrData.rects.map(rect => (
96+
<Rect
97+
key={`rect_${rect.x}_${rect.y}`}
98+
fill={rect.fillType === 'dot' ? dotColor : edgeColor}
99+
height={rect.size}
100+
rx={rect.size * 0.32}
101+
ry={rect.size * 0.32}
102+
width={rect.size}
103+
x={rect.x}
104+
y={rect.y}
105+
/>
106+
))}
107+
108+
{/* Render circles */}
109+
{qrData.circles.map(circle => (
110+
<Circle
111+
key={`circle_${circle.cx}_${circle.cy}`}
112+
cx={circle.cx}
113+
cy={circle.cy}
114+
fill={dotColor}
115+
r={circle.r}
116+
/>
117+
))}
118+
119+
{/* Render lines */}
120+
{qrData.lines.map(line => (
121+
<Line
122+
key={`line_${line.x1}_${line.y1}_${line.y2}`}
123+
x1={line.x1}
124+
x2={line.x2}
125+
y1={line.y1}
126+
y2={line.y2}
127+
stroke={dotColor}
128+
strokeWidth={line.strokeWidth}
129+
strokeLinecap="round"
130+
/>
131+
))}
72132
</Svg>
73133
{logoTemplate()}
74134
</View>
75-
) : (
76-
<Shimmer width={size} height={size} borderRadius={BorderRadius.l} />
77135
);
78136
}
79137

80138
export const QrCode = memo(QrCode_, (prevProps, nextProps) => {
81139
return (
82140
prevProps.size === nextProps.size &&
83141
prevProps.uri === nextProps.uri &&
84-
prevProps.style === nextProps.style
142+
prevProps.style === nextProps.style &&
143+
prevProps.logoBorderRadius === nextProps.logoBorderRadius
85144
);
86145
});

‎packages/ui/src/composites/wui-qr-code/styles.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,5 @@ export default StyleSheet.create({
88
borderRadius: BorderRadius.l,
99
padding: Spacing.l,
1010
alignSelf: 'center'
11-
},
12-
icon: {
13-
position: 'absolute'
1411
}
1512
});

0 commit comments

Comments
 (0)