Create transaction screen and rework addresses screen

package.json

@@ -30,6 +30,7 @@
     "expo-local-authentication": "~12.3.0",
     "expo-secure-store": "~11.3.0",
     "expo-status-bar": "~1.4.0",
+    "expo-web-browser": "~11.0.0",
     "lodash": "^4.17.21",
     "lottie-react-native": "5.1.3",
     "lucide-react-native": "^0.48.0-alpha.5",
@@ -42,6 +43,7 @@
     "react-native-gesture-handler": "~2.5.0",
     "react-native-get-random-values": "~1.8.0",
     "react-native-reanimated": "~2.9.1",
+    "react-native-reanimated-carousel": "^3.0.4",
     "react-native-safe-area-context": "4.3.1",
     "react-native-screens": "~3.15.0",
     "react-native-svg": "12.3.0",

src/components/AddressBadge.tsx

@@ -0,0 +1,86 @@
+/*
+Copyright 2018 - 2022 The Alephium Authors
+This file is part of the alephium project.
+
+The library is free software: you can redistribute it and/or modify
+it under the terms of the GNU Lesser General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+The library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Lesser General Public License for more details.
+
+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 { Star as StarIcon } from 'lucide-react-native'
+import { StyleProp, TextStyle, View, ViewStyle } from 'react-native'
+import styled, { useTheme } from 'styled-components/native'
+
+import { Address } from '../store/addressesSlice'
+
+interface AddressBadgeProps {
+  address: Address | string
+  hideSymbol?: boolean
+  textStyle?: StyleProp<TextStyle>
+  style?: StyleProp<ViewStyle>
+}
+
+const AddressBadge = ({ address, hideSymbol = false, textStyle, style }: AddressBadgeProps) => {
+  const theme = useTheme()
+
+  return (
+    <View style={style}>
+      {typeof address === 'string' ? (
+        <Label numberOfLines={1} ellipsizeMode="middle" style={textStyle}>
+          {address}
+        </Label>
+      ) : (
+        <>
+          {!hideSymbol && (
+            <Symbol>
+              {address.settings.isMain ? (
+                <StarIcon size={16} fill={theme.global.star} />
+              ) : (
+                <Dot color={address.settings.color} />
+              )}
+            </Symbol>
+          )}
+          {address.settings.label ? (
+            <Label numberOfLines={1} style={textStyle}>
+              {address.settings.label}
+            </Label>
+          ) : (
+            <Label numberOfLines={1} ellipsizeMode="middle" style={textStyle}>
+              {address.hash}
+            </Label>
+          )}
+        </>
+      )}
+    </View>
+  )
+}
+
+export default styled(AddressBadge)`
+  flex-direction: row;
+  align-items: center;
+`
+
+const Symbol = styled.View`
+  margin-right: 10px;
+`
+
+const Dot = styled.View<{ color?: string }>`
+  width: 10px;
+  height: 10px;
+  border-radius: 10px;
+  background-color: ${({ color, theme }) => color || theme.font.primary};
+`
+
+const Label = styled.Text`
+  font-weight: 600;
+  flex-shrink: 1;
+`