Skip to content

Commit

Permalink
Points UI (#5866)
Browse files Browse the repository at this point in the history
* Enable P3 color in RN and gradients

* Bump Reanimated, Skia

* WIP: new UI

* Fix Android build

* Android fixes, add placeholder bridge fee labels

* Points UI Data (#5876)

* feat: insert new points data

* feat: claim request

* fix: cleanup smooth pager ids

* Remove unused imports

* Lighten separators in light mode

* Fix extra space when Stack children aren't rendered

Also makes the leaderboard section spacing consistent with the other sections

* Claim flow improvements, card visibility tweaks

* Cache remote card images, minor code cleanup

* i18n, clean up InfoCard placeholders

* Add i18n strings

* Clean up InfoCard, notifications toggle styles

* Add experimental flag, remote flag

* Lower dark mode border opacity

* Claim flow improvements, i18n

* Hide ClaimCard for watched wallets

* Make copy adjustments

* Fix wallet list scroll bug

This wallet list code needs more significant refactoring, but this fixes the issue that often prevents the wallet list from being scrollable

* Clean up light mode styles

* Add claim flow spinner, network list cleanup

* claim (#5887)

* Adjust spinner size, layout

* fix claim

* Add basic claim error state

* Add missing i18n strings

* Catch more error cases, use claim error UI instead of alert

Replaces the "Unable to load wallet" alert with the claim error state, since the !wallet condition catches non-serious errors like Face ID failures

* Speed up wallet switcher, minor code cleanup

* Use more saturated green

* differentiate errors

* Update using default gas limit for bridge quote if it exists

* Update default value in experimental config for ETH_REWARDS

* Clean up Android claim flow styles

* Improve copy

* Improve InfoCard copy, styles

* Adjust InfoCard copy: Rank → Placed

* Add bridge failure error state

* Fix bridge-error Done button press handler

* Clean up loading skeletons

---------

Co-authored-by: Christopher Howard <derhowiedesigns@gmail.com>
Co-authored-by: Bruno Barbieri <1247834+brunobar79@users.noreply.github.com>
Co-authored-by: Bruno Barbieri <brunobar79@gmail.com>
Co-authored-by: jinchung <jin.chung17@gmail.com>
  • Loading branch information
5 people committed Jun 24, 2024
1 parent 06f5a6d commit ae5e687
Show file tree
Hide file tree
Showing 48 changed files with 2,825 additions and 496 deletions.
Binary file modified android/app/src/main/assets/fonts/SF-Pro-Rounded-Black.otf
100755 → 100644
Binary file not shown.
1 change: 1 addition & 0 deletions ios/Podfile
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
platform :ios, '13.0'
source 'https://github.com/CocoaPods/Specs.git'
#use_modular_headers!

pod 'Firebase', :modular_headers => true
Expand Down
10 changes: 5 additions & 5 deletions ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -577,7 +577,7 @@ PODS:
- ReactCommon/turbomodule/core
- react-native-screen-corner-radius (0.2.0):
- React
- react-native-skia (1.3.0):
- react-native-skia (1.3.6):
- RCT-Folly (= 2021.07.22.00)
- React
- React-callinvoker
Expand Down Expand Up @@ -782,7 +782,7 @@ PODS:
- React-Core
- RNReactNativeHapticFeedback (1.11.0):
- React-Core
- RNReanimated (3.11.0):
- RNReanimated (3.13.0-rc.2):
- RCT-Folly (= 2021.07.22.00)
- React-Core
- ReactCommon/turbomodule/core
Expand Down Expand Up @@ -1335,7 +1335,7 @@ SPEC CHECKSUMS:
react-native-restart: 733a51ad137f15b0f8dc34c4082e55af7da00979
react-native-safe-area-context: b8979f5eda6ed5903d4dbc885be3846ea3daa753
react-native-screen-corner-radius: d526152dc1b5816bf298cc7093fcf4af853c17c7
react-native-skia: 44fed982cf3f26f27b11ba22194b1f967ab8f468
react-native-skia: 608b79ca816d62c72992ddb064ea328ca5523db8
react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
react-native-text-input-mask: 07227297075f9653315f43b0424d596423a01736
react-native-udp: 96a517e5a121cfe69f4b05eeeafefe00c623debf
Expand Down Expand Up @@ -1385,7 +1385,7 @@ SPEC CHECKSUMS:
RNOS: 31db6fa4a197d179afbba9e6b4d28d450a7f250b
RNPermissions: 4e3714e18afe7141d000beae3755e5b5fb2f5e05
RNReactNativeHapticFeedback: 653a8c126a0f5e88ce15ffe280b3ff37e1fbb285
RNReanimated: 9d4971e437f38c11fd2c43344ac9d40c330058b1
RNReanimated: d02f98a76bc3cf4d2117d91e715fb4879611bfdc
RNRudderSdk: 805d4b7064714f3295bf5f152d3812cc67f67a93
RNScreens: 6a8a3c6b808aa48dca1780df7b73ea524f602c63
RNSentry: 468d45dc823258945fb1ee04dcd3f252cb57415f
Expand All @@ -1409,6 +1409,6 @@ SPEC CHECKSUMS:
VisionCamera: 1910a51e4c6f6b049650086d343090f267b4c260
Yoga: 8796b55dba14d7004f980b54bcc9833ee45b28ce

PODFILE CHECKSUM: e5362d24eefcd29c7be1cb477c3dbf0e712787ec
PODFILE CHECKSUM: 1ac1ff87560da089d48923d6e23aece3726e8947

COCOAPODS: 1.12.1
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
"@notifee/react-native": "5.6.0",
"@rainbow-me/provider": "0.0.12",
"@rainbow-me/react-native-animated-number": "0.0.2",
"@rainbow-me/swaps": "0.19.0",
"@rainbow-me/swaps": "0.21.0",
"@react-native-async-storage/async-storage": "1.18.2",
"@react-native-camera-roll/camera-roll": "5.7.1",
"@react-native-clipboard/clipboard": "1.13.2",
Expand All @@ -122,7 +122,7 @@
"@rudderstack/rudder-sdk-react-native": "1.12.1",
"@sentry/react-native": "5.22.0",
"@shopify/flash-list": "1.5.0",
"@shopify/react-native-skia": "1.3.0",
"@shopify/react-native-skia": "1.3.6",
"@tanstack/query-async-storage-persister": "4.2.1",
"@tanstack/react-query": "4.2.1",
"@tanstack/react-query-persist-client": "4.2.1",
Expand Down Expand Up @@ -250,7 +250,7 @@
"react-native-quick-md5": "3.0.3",
"react-native-radial-gradient": "rainbow-me/react-native-radial-gradient#b99ab59d27dba70364ef516bd5193c37657ba95c",
"react-native-randombytes": "3.5.3",
"react-native-reanimated": "3.11.0",
"react-native-reanimated": "3.13.0-rc.2",
"react-native-redash": "16.3.0",
"react-native-restart": "0.0.22",
"react-native-safe-area-context": "4.5.3",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,33 @@ index 26961d7..ee5943d 100644
} else if (!global.nativeExtensions) {
const bridgeConfig = global.__fbBatchedBridgeConfig;
invariant(
diff --git a/node_modules/react-native/React/Base/RCTConvert.m b/node_modules/react-native/React/Base/RCTConvert.m
index 8960df9..f387d16 100644
--- a/node_modules/react-native/React/Base/RCTConvert.m
+++ b/node_modules/react-native/React/Base/RCTConvert.m
@@ -888,7 +888,7 @@ + (UIColor *)UIColor:(id)json
if ([json isKindOfClass:[NSArray class]]) {
NSArray *components = [self NSNumberArray:json];
CGFloat alpha = components.count > 3 ? [self CGFloat:components[3]] : 1.0;
- return [UIColor colorWithRed:[self CGFloat:components[0]]
+ return [UIColor colorWithDisplayP3Red:[self CGFloat:components[0]]
green:[self CGFloat:components[1]]
blue:[self CGFloat:components[2]]
alpha:alpha];
@@ -898,7 +898,7 @@ + (UIColor *)UIColor:(id)json
CGFloat r = ((argb >> 16) & 0xFF) / 255.0;
CGFloat g = ((argb >> 8) & 0xFF) / 255.0;
CGFloat b = (argb & 0xFF) / 255.0;
- return [UIColor colorWithRed:r green:g blue:b alpha:a];
+ return [UIColor colorWithDisplayP3Red:r green:g blue:b alpha:a];
} else if ([json isKindOfClass:[NSDictionary class]]) {
NSDictionary *dictionary = json;
id value = nil;
diff --git a/node_modules/react-native/React/Views/RCTView.m b/node_modules/react-native/React/Views/RCTView.m
index 619509f..a9477e5 100644
--- a/node_modules/react-native/React/Views/RCTView.m
+++ b/node_modules/react-native/React/Views/RCTView.m
@@ -831,6 +831,11 @@ static CGFloat RCTDefaultIfNegativeTo(CGFloat defaultValue, CGFloat x)
@@ -831,6 +831,11 @@ - (void)displayLayer:(CALayer *)layer
layer.backgroundColor = backgroundColor;
layer.contents = nil;
layer.needsDisplayOnBoundsChange = NO;
Expand Down
102 changes: 102 additions & 0 deletions patches/react-native-linear-gradient+2.8.3.patch
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
diff --git a/node_modules/react-native-linear-gradient/ios/BVLinearGradientLayer.m b/node_modules/react-native-linear-gradient/ios/BVLinearGradientLayer.m
index bda0a1b..4a3ede4 100644
--- a/node_modules/react-native-linear-gradient/ios/BVLinearGradientLayer.m
+++ b/node_modules/react-native-linear-gradient/ios/BVLinearGradientLayer.m
@@ -3,6 +3,26 @@
#include <math.h>
#import <UIKit/UIKit.h>

+@implementation UIColor (ColorSpace)
+
+- (UIColor *)colorWithCGColorSpace:(CGColorSpaceRef)colorSpace {
+ const CGFloat *components = CGColorGetComponents(self.CGColor);
+ size_t count = CGColorGetNumberOfComponents(self.CGColor);
+ CGFloat newComponents[count];
+
+ for (size_t i = 0; i < count; i++) {
+ newComponents[i] = components[i];
+ }
+
+ CGColorRef colorRef = CGColorCreate(colorSpace, newComponents);
+ UIColor *color = [UIColor colorWithCGColor:colorRef];
+ CGColorRelease(colorRef);
+
+ return color;
+}
+
+@end
+
@implementation BVLinearGradientLayer

- (instancetype)init
@@ -182,59 +202,48 @@ - (void)drawInContext:(CGContextRef)ctx
return;

CGFloat *locations = nil;
-
locations = malloc(sizeof(CGFloat) * self.colors.count);

- for (NSInteger i = 0; i < self.colors.count; i++)
- {
- if (self.locations.count > i)
- {
+ for (NSInteger i = 0; i < self.colors.count; i++) {
+ if (self.locations.count > i) {
locations[i] = self.locations[i].floatValue;
- }
- else
- {
+ } else {
locations[i] = (1.0 / (self.colors.count - 1)) * i;
}
}

- CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
+ CGColorSpaceRef colorSpace = CGColorSpaceCreateWithName(kCGColorSpaceDisplayP3);
NSMutableArray *colors = [[NSMutableArray alloc] initWithCapacity:self.colors.count];
+
for (UIColor *color in self.colors) {
- [colors addObject:(id)color.CGColor];
+ UIColor *p3Color = [color colorWithCGColorSpace:colorSpace];
+ [colors addObject:(__bridge id)p3Color.CGColor];
}

- CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (CFArrayRef)colors, locations);
+ CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)colors, locations);

free(locations);

CGPoint start, end;

- if (_useAngle)
- {
- // Angle is in bearing degrees (North = 0, East = 90)
- // convert it to cartesian (N = 90, E = 0)
+ if (_useAngle) {
float angle = (90 - _angle);
CGPoint relativeStartPoint = [BVLinearGradientLayer getGradientStartPointFromAngle:angle AndSize:size];

- // Get true angleCenter
CGPoint angleCenter = CGPointMake(
_angleCenter.x * size.width,
_angleCenter.y * size.height
);
- // Translate to center on angle center
- // Flip Y coordinate to convert from cartesian
+
start = CGPointMake(
angleCenter.x + relativeStartPoint.x,
angleCenter.y - relativeStartPoint.y
);
- // Reflect across the center to get the end point
end = CGPointMake(
angleCenter.x - relativeStartPoint.x,
angleCenter.y + relativeStartPoint.y
);
- }
- else
- {
+ } else {
start = CGPointMake(self.startPoint.x * size.width, self.startPoint.y * size.height);
end = CGPointMake(self.endPoint.x * size.width, self.endPoint.y * size.height);
}
Binary file modified src/assets/fonts/SF-Pro-Rounded-Black.otf
100755 → 100644
Binary file not shown.
38 changes: 38 additions & 0 deletions src/components/Border.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react';
import { Cover, useColorMode, useForegroundColor } from '@/design-system';
import { ForegroundColor } from '@/design-system/color/palettes';
import { IS_IOS } from '@/env';

export const Border = ({
borderColor = 'separatorTertiary',
borderRadius,
borderWidth = 1,
enableInLightMode,
enableOnAndroid,
}: {
borderColor?: ForegroundColor;
borderRadius: number;
borderWidth?: number;
enableInLightMode?: boolean;
enableOnAndroid?: boolean;
}) => {
const { isDarkMode } = useColorMode();

const color = useForegroundColor(borderColor);

return (
(isDarkMode || enableInLightMode) &&
(IS_IOS || enableOnAndroid) && (
<Cover
style={{
borderColor: color,
borderCurve: 'continuous',
borderRadius,
borderWidth,
overflow: 'hidden',
pointerEvents: 'none',
}}
/>
)
);
};
2 changes: 1 addition & 1 deletion src/components/DappBrowser/control-panel/ControlPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Animated, { SharedValue, runOnJS, useAnimatedStyle, useDerivedValue, useS
import { GestureHandlerV1Button } from '@/__swaps__/screens/Swap/components/GestureHandlerV1Button';
import { THICK_BORDER_WIDTH } from '@/__swaps__/screens/Swap/constants';
import { opacity, opacityWorklet } from '@/__swaps__/utils/swaps';
import { SmoothPager, usePagerNavigation } from '@/components/SmoothPager';
import { SmoothPager, usePagerNavigation } from '@/components/SmoothPager/SmoothPager';
import { TIMING_CONFIGS } from '@/components/animations/animationConfigs';
import { ButtonPressAnimation } from '@/components/animations';
import { ChainImage } from '@/components/coin-icon/ChainImage';
Expand Down
Loading

0 comments on commit ae5e687

Please sign in to comment.