Cleanup

alephium · Oct 17, 2022 · 46304df · 46304df
1 parent 7cf6307
commit 46304df
Show file tree

Hide file tree

Showing 25 changed files with 395 additions and 463 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@alephium/sdk": "0.1.0",
+    "@alephium/sdk": "0.2.0-rc.0",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-navigation/bottom-tabs": "^6.3.2",
     "@react-navigation/native": "^6.0.10",

diff --git a/src/components/AddressCard.tsx b/src/components/AddressCard.tsx
@@ -60,8 +60,7 @@ const AddressCard = ({ style, addressHash }: AddressCardProps) => {
           }}
         />
       </Header>
-      {/* Replace ℵ with SVG or use dollar value instead */}
-      <AmountStyled value={BigInt(address.networkData.details.balance)} suffix="ℵ" color={textColor} />
+      <AmountStyled value={BigInt(address.networkData.details.balance)} color={textColor} size={17} />
     </Pressable>
   )
 }

diff --git a/src/components/Amount.tsx b/src/components/Amount.tsx
@@ -17,29 +17,21 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { formatAmountForDisplay } from '@alephium/sdk'
-import { FC, ReactNode } from 'react'
 import { StyleProp, ViewStyle } from 'react-native'
 import styled, { useTheme } from 'styled-components/native'
 
 import { useAppSelector } from '../hooks/redux'
-import { Currency } from '../types/settings'
-import { currencies } from '../utils/currencies'
+import Alef from '../images/icons/Alef'
 import { formatFiatAmountForDisplay } from '../utils/numbers'
 import AppText from './AppText'
 
-interface TokenSymbolProps {
-  color?: string
-  style?: StyleProp<ViewStyle>
-}
-
 interface AmountProps {
-  value?: bigint
+  value?: bigint | number
   fadeDecimals?: boolean
   fullPrecision?: boolean
   prefix?: string
-  suffix?: FC<TokenSymbolProps> | string
-  fiat?: number
-  fiatCurrency?: Currency
+  suffix?: string
+  isFiat?: boolean
   showOnDiscreetMode?: boolean
   color?: string
   size?: number
@@ -48,34 +40,34 @@ interface AmountProps {
 
 const Amount = ({
   value,
-  style,
   fadeDecimals,
   fullPrecision = false,
   prefix,
   suffix = '',
   showOnDiscreetMode = false,
-  fiatCurrency,
-  fiat,
+  isFiat = false,
   color,
-  size
+  size,
+  style
 }: AmountProps) => {
+  const theme = useTheme()
+
   let integralPart = ''
   let fractionalPart = ''
-  let moneySymbol = ''
+  let quantitySymbol = ''
   const discreetMode = useAppSelector((state) => state.settings.discreetMode)
 
   if (!discreetMode || showOnDiscreetMode) {
-    let amount = ''
-
-    if (fiat) {
-      amount = formatFiatAmountForDisplay(fiat)
-    } else if (value !== undefined) {
-      amount = formatAmountForDisplay(value, fullPrecision)
-    }
+    let amount =
+      value !== undefined
+        ? isFiat && typeof value === 'number'
+          ? formatFiatAmountForDisplay(value)
+          : formatAmountForDisplay(value as bigint, fullPrecision)
+        : ''
 
     if (amount) {
       if (fadeDecimals && ['K', 'M', 'B', 'T'].some((char) => amount.endsWith(char))) {
-        moneySymbol = amount.slice(-1)
+        quantitySymbol = amount.slice(-1)
         amount = amount.slice(0, -1)
       }
       const amountParts = amount.split('.')
@@ -85,17 +77,20 @@ const Amount = ({
   }
 
   return (
-    <AppText size={size} style={style}>
+    <AppText style={style}>
       {discreetMode && !showOnDiscreetMode ? (
         '•••'
       ) : integralPart ? (
         <>
           {prefix && <AppText style={{ color }}>{prefix}</AppText>}
           <AppText style={{ color }}>{integralPart}</AppText>
-          <Decimals fadeDecimals={fadeDecimals} color={color}>
-            .{fractionalPart}
-          </Decimals>
-          <Suffix {...{ suffix, moneySymbol, fiatCurrency, color }} />
+          <AppText color={fadeDecimals ? theme.font.secondary : color}>.{fractionalPart} </AppText>
+          {quantitySymbol && <Suffix color={color} bold>{` ${quantitySymbol}`}</Suffix>}
+          {!suffix ? (
+            <Alef size={size} color={color ?? theme.font.secondary} />
+          ) : (
+            <Suffix color={color}>{suffix}</Suffix>
+          )}
         </>
       ) : (
         '-'
@@ -108,54 +103,7 @@ export default styled(Amount)`
   font-weight: 500;
 `
 
-interface SuffixProps {
-  suffix: FC<TokenSymbolProps> | string
-  moneySymbol?: string
-  fiatCurrency?: Currency
-  color?: string
-}
-
-const Suffix = ({ suffix, moneySymbol, fiatCurrency, color }: SuffixProps) => {
-  const theme = useTheme()
-  const TokenSymbol = suffix
-  const _suffix =
-    typeof TokenSymbol === 'function' ? (
-      <TokenSymbol style={{ width: 15, height: 18 }} color={color ?? theme.font.secondary} />
-    ) : (
-      suffix
-    )
-
-  return (
-    <>
-      <Quantifier color={color}> {moneySymbol}</Quantifier>
-      <CurrencySymbol size={1 / 2} color={color}>
-        <> {_suffix || (fiatCurrency ? currencies[fiatCurrency].symbol : '')}</>
-      </CurrencySymbol>
-    </>
-  )
-}
-
-interface DecimalsProps {
-  fadeDecimals?: boolean
-  color?: string
-  children: ReactNode | ReactNode[]
-}
-
-const Decimals = ({ fadeDecimals, color, children }: DecimalsProps) => {
-  const theme = useTheme()
-  return (
-    <AppText color={fadeDecimals ? theme.font.secondary : color} bold={fadeDecimals}>
-      {children}
-    </AppText>
-  )
-}
-
-const Quantifier = styled(AppText)`
-  color: ${({ theme, color }) => color ?? theme.font.secondary};
-  font-weight: bold;
-`
-
-const CurrencySymbol = styled(AppText)`
+const Suffix = styled(AppText)`
   color: ${({ theme, color }) => color ?? theme.font.secondary};
   font-weight: normal;
 `
diff --git a/src/components/AppText.tsx b/src/components/AppText.tsx
@@ -16,21 +16,19 @@ You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
-import styled from 'styled-components/native'
-
-const defaultFontSize = 14
+import styled, { css } from 'styled-components/native'
 
 export interface AppTextProps {
   bold?: boolean
-  leftPadding?: boolean
-  size?: number
   color?: string
 }
 
 export default styled.Text<AppTextProps>`
-  color: ${({ theme }) => theme.font.primary};
-  ${({ bold }) => bold && 'font-weight: bold;'}
-  ${({ leftPadding }) => leftPadding && 'padding-left: 5%;'}
-  ${({ size }) => size !== undefined && `font-size: ${defaultFontSize + size * 2}px;`}
-  ${({ color }) => color && `color: ${color};`}
+  color: ${({ theme, color }) => color ?? theme.font.primary};
+
+  ${({ bold }) =>
+    bold &&
+    css`
+      font-weight: 700;
+    `}
 `
diff --git a/src/components/BalanceSummary.tsx b/src/components/BalanceSummary.tsx
@@ -21,6 +21,7 @@ import styled, { useTheme } from 'styled-components/native'
 
 import { useAppSelector } from '../hooks/redux'
 import { selectAllAddresses } from '../store/addressesSlice'
+import { currencies } from '../utils/currencies'
 import { attoAlphToFiat } from '../utils/numbers'
 import Amount from './Amount'
 
@@ -45,8 +46,8 @@ const BalanceSummary = ({ style }: BalanceSummaryProps) => {
         <ActivityIndicator size="large" color={theme.font.primary} />
       ) : (
         <>
-          <AmountInFiat fiat={balance} fadeDecimals fiatCurrency={currency} />
-          <AmountStyled value={totalBalance} fadeDecimals />
+          <AmountInFiat value={balance} isFiat fadeDecimals suffix={currencies[currency].symbol} />
+          <AmountStyled value={totalBalance} fadeDecimals size={14} />
         </>
       )}
     </View>

diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
@@ -20,39 +20,49 @@ import { ReactElement, useState } from 'react'
 import { Dimensions, LayoutChangeEvent, StyleProp, View, ViewProps } from 'react-native'
 import Animated, { Extrapolate, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
 import RNCarousel from 'react-native-reanimated-carousel'
-import styled, { useTheme } from 'styled-components/native'
+import styled, { css, useTheme } from 'styled-components/native'
 
 interface CarouselProps<T> {
   data: Array<T>
   renderItem: (itemInfo: { item: T }) => ReactElement
   width?: number
-  offsetX?: number
+  padding?: number
   height?: number
+  distance?: number
   onScrollStart?: () => void
   onScrollEnd?: (index: number) => void
 }
 
-function Carousel<T>({ data, renderItem, width, height, offsetX = 0, onScrollStart, onScrollEnd }: CarouselProps<T>) {
+function Carousel<T>({
+  data,
+  renderItem,
+  width,
+  height,
+  padding = 0,
+  distance = 0,
+  onScrollStart,
+  onScrollEnd
+}: CarouselProps<T>) {
   const progressValue = useSharedValue<number>(0)
   const theme = useTheme()
-  const [_width, setWidth] = useState(width ?? Dimensions.get('window').width - offsetX)
+  const [_width, setWidth] = useState(width ?? Dimensions.get('window').width - padding * 2)
 
   const onLayout = (event: LayoutChangeEvent) => {
-    setWidth(width ?? event.nativeEvent.layout.width - offsetX)
+    setWidth(width ?? event.nativeEvent.layout.width - padding * 2)
   }
 
   return (
     <View onLayout={onLayout}>
       <RNCarousel
-        style={{ width: '100%' }}
+        style={{ width: '100%', justifyContent: 'center' }}
         width={_width}
         height={height}
         loop={false}
         onProgressChange={(_, absoluteProgress) => (progressValue.value = absoluteProgress)}
         mode="parallax"
         modeConfig={{
           parallaxScrollingScale: 1,
-          parallaxScrollingOffset: 0
+          parallaxScrollingOffset: distance * -1
         }}
         data={data}
         renderItem={renderItem}
@@ -61,12 +71,12 @@ function Carousel<T>({ data, renderItem, width, height, offsetX = 0, onScrollSta
       />
       {!!progressValue && data.length > 1 && (
         <CarouselPagination>
-          {data.map((hash, index) => (
+          {data.map((_, index) => (
             <CarouselPaginationItem
               backgroundColor={theme.font.primary}
               animValue={progressValue}
               index={index}
-              key={`pagination-${hash}`}
+              key={`pagination-${index}`}
               length={data.length}
             />
           ))}
@@ -113,13 +123,13 @@ const CarouselPaginationItem = ({ animValue, index, length, size = 12, style }:
   }, [animValue, index, length])
 
   return (
-    <Circle style={style} size={size} hasMarginRight={index < length - 1}>
+    <Circle style={style} size={size} isLast={index === length - 1}>
       <Dot style={animStyle} size={size - 3} />
     </Circle>
   )
 }
 
-const Circle = styled.View<{ size: number; hasMarginRight: boolean }>`
+const Circle = styled.View<{ size: number; isLast: boolean }>`
   background-color: ${({ theme }) => theme.font.contrast};
   width: ${({ size }) => size}px;
   height: ${({ size }) => size}px;
@@ -129,7 +139,12 @@ const Circle = styled.View<{ size: number; hasMarginRight: boolean }>`
   overflow: hidden;
   align-items: center;
   justify-content: center;
-  margin-right: ${({ hasMarginRight }) => (hasMarginRight ? '8px' : 0)};
+
+  ${({ isLast }) =>
+    !isLast &&
+    css`
+      margin-right: 8px;
+    `}
 `
 
 const Dot = styled(Animated.View)<{ size: number }>`

diff --git a/src/components/HighlightRow.tsx b/src/components/HighlightRow.tsx
@@ -18,7 +18,7 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 
 import { ReactNode } from 'react'
 import { Pressable, StyleProp, View, ViewStyle } from 'react-native'
-import styled, { css } from 'styled-components/native'
+import styled, { css, useTheme } from 'styled-components/native'
 
 import { BORDER_RADIUS, INPUTS_HEIGHT, INPUTS_PADDING } from '../style/globalStyle'
 import AppText from './AppText'
@@ -41,10 +41,12 @@ export interface HighlightRowProps extends BorderOptions {
 }
 
 const HighlightRow = ({ title, subtitle, children, onPress, style }: HighlightRowProps) => {
+  const theme = useTheme()
+
   const componentContent = title ? (
     <>
       <LeftContent>
-        <AppText isSecondary>{title}</AppText>
+        <AppText color={theme.font.secondary}>{title}</AppText>
         {subtitle && <Subtitle>{subtitle}</Subtitle>}
       </LeftContent>
       <RightContent>{children}</RightContent>