Skip to content

Commit

Permalink
Feature/add tron staking (#4)
Browse files Browse the repository at this point in the history
* upgrade libs

* Add animation to double encryption modal

* Add staking info on home

* Add debug suffix to android build

Add debug suffix to android build for allowing debug and release builds in the
same device

* upgrade app version
  • Loading branch information
nicolas-meilan authored Feb 25, 2024
1 parent 699daba commit 5271b8f
Show file tree
Hide file tree
Showing 21 changed files with 865 additions and 261 deletions.
6 changes: 4 additions & 2 deletions Gemfile
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,7 @@ source 'https://rubygems.org'
# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
ruby ">= 2.6.10"

gem 'cocoapods', '~> 1.13'
gem 'activesupport', '>= 6.1.7.3', '< 7.1.0'
# Cocoapods 1.15 introduced a bug which break the build. We will remove the upper
# bound in the template on Cocoapods with next React Native release.
gem 'cocoapods', '>= 1.13', '< 1.15'
gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'
5 changes: 3 additions & 2 deletions android/app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,8 @@ android {
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
resConfigs "en", "es"
versionCode 17
versionName "1.5.2"
versionCode 18
versionName "1.6.0"
}
signingConfigs {
release {
Expand All @@ -101,6 +101,7 @@ android {
buildTypes {
debug {
signingConfig signingConfigs.debug
applicationIdSuffix '.debug'
}
release {
// Caution! In production, you need to generate your own keystore file.
Expand Down
425 changes: 205 additions & 220 deletions package-lock.json

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rungecoin",
"version": "1.5.2",
"version": "1.6.0",
"private": true,
"scripts": {
"postinstall": "patch-package",
Expand All @@ -18,10 +18,10 @@
"distribute-production-flow": "eval $(./scripts/parsedEnv.sh) && ./scripts/upload-build-production-flow.sh"
},
"dependencies": {
"@ledgerhq/hw-app-eth": "^6.35.1",
"@ledgerhq/hw-app-trx": "^6.28.1",
"@ledgerhq/react-native-hid": "^6.31.1",
"@ledgerhq/react-native-hw-transport-ble": "^6.32.0",
"@ledgerhq/hw-app-eth": "^6.35.4",
"@ledgerhq/hw-app-trx": "^6.28.3",
"@ledgerhq/react-native-hid": "^6.31.3",
"@ledgerhq/react-native-hw-transport-ble": "^6.32.2",
"@react-native-async-storage/async-storage": "^1.21.0",
"@react-native-clipboard/clipboard": "^1.11.2",
"@react-navigation/native": "^6.1.7",
Expand All @@ -40,7 +40,7 @@
"react": "18.2.0",
"react-content-loader": "^6.2.0",
"react-i18next": "^12.1.5",
"react-native": "0.73.2",
"react-native": "0.73.4",
"react-native-ble-manager": "^10.1.2",
"react-native-ble-plx": "^2.0.3",
"react-native-camera-kit": "^13.0.0",
Expand Down Expand Up @@ -70,9 +70,9 @@
"@babel/plugin-transform-flow-strip-types": "^7.23.3",
"@babel/preset-env": "^7.23.7",
"@babel/runtime": "^7.23.7",
"@react-native/babel-preset": "0.73.19",
"@react-native/babel-preset": "0.73.21",
"@react-native/eslint-config": "0.73.2",
"@react-native/metro-config": "0.73.3",
"@react-native/metro-config": "0.73.5",
"@react-native/typescript-config": "0.73.1",
"@tsconfig/react-native": "^3.0.2",
"@types/jest": "^29.2.1",
Expand Down
217 changes: 217 additions & 0 deletions src/components/Bandwith.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,217 @@
import React, { useEffect } from 'react';
import { ActivityIndicator, LayoutChangeEvent } from 'react-native';

import Animated, {
createAnimatedPropAdapter,
interpolateColor,
processColor,
useAnimatedProps,
useAnimatedStyle,
useSharedValue,
withTiming,
} from 'react-native-reanimated';
import Svg, { Circle } from 'react-native-svg';
import { useTheme } from 'styled-components';
import styled from 'styled-components/native';

import Icon from './Icon';

const ANIMATION_DURATION = 1500;
const CIRCLE_WIDTH = 6;
const CIRCLE_SIZE = 60;
const SEMICIRCLE_DIVISOR = 2.5;
const LOADING_SIZE = 22;
const COMPONENT_HEIGHT = ((CIRCLE_SIZE - CIRCLE_WIDTH) / 2) * (1 + (SEMICIRCLE_DIVISOR / 4));

const BandwithWrapper = styled.View`
height: ${COMPONENT_HEIGHT}px;
width: ${CIRCLE_SIZE}px;
`;

const StyledSvg = styled(Svg)`
transform: rotate(162deg);
height: ${CIRCLE_SIZE}px;
width: ${CIRCLE_SIZE}px;
`;

const StyledIcon = styled(Icon)`
position: absolute;
top: 23px;
left: 6px;
font-size: 30px;
color: ${({ theme }) => theme.colors.disabled};
`;

const StyledLoading = styled(ActivityIndicator)`
position: absolute;
bottom: 0;
left: ${(CIRCLE_SIZE / 2) - (LOADING_SIZE / 2)}px;
`;

const PERCENTAGE_THRESHOLD = {
min: 0.33,
max: 0.66,
};

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

const AnimatedArrow = Animated.createAnimatedComponent(StyledIcon);


type Point2D = {
x: number;
y: number;
};

type BandwithProps = {
percentage?: number;
isLoading?: boolean;
};

const Bandwith = ({
percentage = 0,
isLoading = false,
}: BandwithProps) => {
const theme = useTheme();
const bandwithPercentage = useSharedValue(1);
const arrowSize = useSharedValue<Point2D | null>(null);
const bandwithFromToColor = useSharedValue({
range: [0, 0],
color: [
theme.colors.background.primary,
theme.colors.background.primary,
],
});

const circleSize = CIRCLE_SIZE / 2;
const circleRadius = (CIRCLE_SIZE - CIRCLE_WIDTH) / 2;
const circleLength = circleRadius * 2 * Math.PI;
const semiCircleLength = circleLength / SEMICIRCLE_DIVISOR;

const getBandwithColor = (currentPercentage: number) => {
if (currentPercentage >= PERCENTAGE_THRESHOLD.max) {
return theme.colors.error;
}

if (currentPercentage <= PERCENTAGE_THRESHOLD.min) {
return theme.colors.success;
}

return theme.colors.warning;
};

useEffect(() => {
if (isLoading) return;

const minPercentage = percentage < 0 ? 0 : percentage;
const finalPercentage = Math.abs(1 - (percentage > 1 ? 1 : minPercentage));

bandwithFromToColor.value = {
range: bandwithPercentage.value < finalPercentage
? [bandwithPercentage.value, finalPercentage]
: [finalPercentage, bandwithPercentage.value],
color: [
getBandwithColor(bandwithPercentage.value > finalPercentage ? finalPercentage : bandwithPercentage.value),
getBandwithColor(bandwithPercentage.value > finalPercentage ? bandwithPercentage.value : finalPercentage),
],
};

bandwithPercentage.value = withTiming(
finalPercentage,
{ duration: ANIMATION_DURATION },
);

}, [percentage, isLoading]);

const bandwithColorAdapter = createAnimatedPropAdapter(
(props) => {
if (Object.keys(props).includes('stroke')) {
props.stroke = {
type: 0,
payload: processColor(props.stroke),
};
}
},
['stroke'],
);

const animatedCircleProps = useAnimatedProps(() => ({
strokeDashoffset: semiCircleLength + ((circleLength - semiCircleLength) * bandwithPercentage.value),
stroke: interpolateColor(
bandwithPercentage.value,
bandwithFromToColor.value.range,
bandwithFromToColor.value.color,
),
}), null, bandwithColorAdapter);

const animatedArrowStyle = useAnimatedStyle(() => {
if (!arrowSize.value) return {};

const rotationMultiplicator = 180;
const center: Point2D = {
x: arrowSize.value.x / 2,
y: arrowSize.value.y / 2,
};
const pivot: Point2D = {
x: arrowSize.value.x - 6,
y: arrowSize.value.y / 2,
};


return {
transform: [
{ translateX: pivot.x - center.x },
{ translateY: pivot.y - center.y },
{ rotateZ: `${Math.abs(1 - bandwithPercentage.value) * rotationMultiplicator}deg` },
{ translateX: -(pivot.x - center.x) },
{ translateY: -(pivot.y - center.y) },
],
};
});

const onArrowLayout = (event: LayoutChangeEvent) => {
arrowSize.value = {
x: event.nativeEvent.layout.width,
y: event.nativeEvent.layout.height,
};
};

return (
<BandwithWrapper>
<StyledSvg>
<Circle
strokeLinecap="round"
cx={circleSize}
cy={circleSize}
r={circleRadius}
strokeWidth={CIRCLE_WIDTH}
stroke={theme.colors.background.secondary}
strokeDasharray={circleLength}
strokeDashoffset={semiCircleLength}
/>
<AnimatedCircle
strokeLinecap="round"
fill="none"
cx={circleSize}
cy={circleSize}
r={circleRadius}
strokeWidth={CIRCLE_WIDTH}
strokeDasharray={circleLength}
animatedProps={animatedCircleProps}
/>
</StyledSvg>
{isLoading ? (
<StyledLoading color={theme.colors.disabled} size={LOADING_SIZE} />
) : (
<AnimatedArrow
name="arrow-left-thin"
style={animatedArrowStyle}
onLayout={onArrowLayout}
/>
)}
</BandwithWrapper>

);
};

export default Bandwith;
Loading

0 comments on commit 5271b8f

Please sign in to comment.