migrate

.gitignore

@@ -0,0 +1,64 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifacts
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/
+
+# Expo
+.expo/*
+web-build/

App.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+import { NavigationContainer } from "@react-navigation/native";
+
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+
+import { Ionicons } from "@expo/vector-icons";
+
+import HomeScreen from "./screens/Home";
+
+import TransactionScreen from "./screens/Transactions";
+
+import ProfileScreen from "./screens/Profile";
+
+import { TamaguiProvider } from "tamagui";
+
+import config from "./tamagui.config";
+import { Header } from "./components/Header";
+
+const Tab = createBottomTabNavigator();
+
+function App() {
+  return (
+    <TamaguiProvider config={config}>
+      <Header />
+      <NavigationContainer>
+        <Tab.Navigator
+          screenOptions={({ route }) => ({
+            tabBarIcon: ({ focused, color, size }) => {
+              let iconName;
+
+              if (route.name === "Home") {
+                iconName = focused ? "home" : "home-outline";
+              } else if (route.name === "Transactions") {
+                iconName = focused ? "swap-vertical" : "swap-vertical-outline";
+              } else if (route.name === "Profiles") {
+                iconName = focused ? "person-circle" : "person-circle-outline";
+              }
+              return <Ionicons name={iconName as "home" | "home-outline" | "swap-vertical" | "swap-vertical-outline" | "person-circle" | "person-circle-outline"} size={size} color={color} />;
+            },
+            headerShown: false,
+            tabBarActiveTintColor: "#3164FA",
+            tabBarInactiveTintColor: "#7E8492",
+            tabBarStyle: {
+              display: "flex",
+              height: 80,
+            },
+          })}
+        >
+          <Tab.Screen name="Home" component={HomeScreen} />
+          <Tab.Screen name="Transactions" component={TransactionScreen} />
+          <Tab.Screen name="Profiles" component={ProfileScreen} />
+        </Tab.Navigator>
+      </NavigationContainer>
+    </TamaguiProvider>
+  );
+}
+
+export default App;

README.md

@@ -0,0 +1,36 @@
+# TypeScript Example
+
+<p>
+  <!-- iOS -->
+  <img alt="Supports Expo iOS" longdesc="Supports Expo iOS" src="https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff" />
+  <!-- Android -->
+  <img alt="Supports Expo Android" longdesc="Supports Expo Android" src="https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff" />
+  <!-- Web -->
+  <img alt="Supports Expo Web" longdesc="Supports Expo Web" src="https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff" />
+</p>
+
+```sh
+npx create-react-native-app -t with-typescript
+```
+
+TypeScript is a superset of JavaScript which gives you static types and powerful tooling in Visual Studio Code including autocompletion and useful inline warnings for type errors.
+
+## 🚀 How to use
+
+#### Creating a new project
+
+- Install the CLI: `npm i -g expo-cli`
+- Create a project: `npx create-react-native-app -t with-typescript`
+- `cd` into the project
+
+### Adding TypeScript to existing projects
+
+- Create a blank TypeScript config: `touch tsconfig.json`
+- Run `yarn start` or `npm run start` to automatically configure TypeScript
+- Rename files to TypeScript, `.tsx` for React components and `.ts` for plain typescript files
+
+> 💡 You can disable the TypeScript setup in Expo CLI with the environment variable `EXPO_NO_TYPESCRIPT_SETUP=1 expo start`
+
+## 📝 Notes
+
+- [Expo TypeScript guide](https://docs.expo.dev/versions/latest/guides/typescript/)

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

components/AssetItem.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { TouchableOpacity, Image, Text, View } from "react-native";
+
+export function AssetItem({ asset }) {
+    return (
+        <View style={{ flex: 1, width: "100%", backgroundColor: "transparent" }}>
+            <TouchableOpacity>
+                <View style={{ flexDirection: "row", paddingHorizontal: 0, backgroundColor: "transparent", width: "100%" }}>
+                    <View style={{ flex: 1, width: "100%", flexDirection: "row", paddingVertical: 16 }}>
+                        <Image
+                            source={asset.icon}
+                            resizeMode="cover"
+                            style={{ width: 48, height: 48, borderRadius: 24, marginRight: 3 }}
+                        />
+                        <View style={{ flexDirection: "column", justifyContent: "space-between", marginLeft: 6 }}>
+                            <Text style={{ fontSize: 20, fontWeight: "bold", color: "#565f6d" }}>
+                                {asset.name}
+                            </Text>
+                            <View style={{ flexDirection: "row", alignItems: "center", paddingRight: 3 }}>
+                                <Text style={{ fontSize: 14, fontWeight: "600", color: "#989DA8", marginRight: 6 }}>
+                                    {asset.amount}
+                                </Text>
+                                <View style={{ width: 4, height: 4, backgroundColor: "#989DA8", marginRight: 6 }} />
+                                <Text style={{ fontSize: 14, fontWeight: "600", color: "#989DA8" }}>
+                                    ${asset.price}
+                                </Text>
+                            </View>
+                        </View>
+                    </View>
+                    <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginLeft: 6 }}>
+                        <Text style={{ fontSize: 18, fontWeight: "bold", color: "#111111" }}>
+                            ${asset.amount * asset.price}
+                        </Text>
+                    </View>
+                </View>
+            </TouchableOpacity>
+        </View>
+    );
+}

components/AssetSection.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { View, Text } from "react-native";
+import { YGroup, Separator } from "tamagui";
+import { assets } from "../utils/constants";
+import { AssetItem } from "./AssetItem";
+
+export function AssetSection() {
+    return (
+        <View style={{ width: "100%", paddingHorizontal: 8 }}>
+            <Text style={{
+                fontSize: 20,
+                fontWeight: 'bold',
+                color: '#363e4b',
+            }}>Assets</Text>
+            <YGroup
+                alignSelf="center"
+                style={{ width: "100%", marginTop: 8 }}
+                size="$5"
+                separator={<Separator />}
+            >
+                {assets.map((asset) => (
+                    <AssetItem key={asset.key} asset={asset} />
+                ))}
+            </YGroup>
+        </View>
+    );
+}

components/BalanceCard.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { View, Image, Text } from 'react-native';
+import truncateEthereumAddress from '../utils/functions';
+
+export function BalanceCard() {
+    return (
+        <View style={styles.container}>
+            <View style={styles.backgroundContainer}>
+                <Image
+                    style={styles.backgroundImage}
+                    resizeMode="cover"
+                    source={require('./../assets/chart-vector.png')}
+                />
+                <View style={styles.contentContainer}>
+                    <View style={styles.textContainer}>
+                        <Text style={styles.largeText}>56,000.73 USD</Text>
+                        <Text style={styles.mediumText}>
+                            {truncateEthereumAddress('0xA3Db2Cb625bAe87D12AD769C47791a04BA1e5b29')}
+                        </Text>
+                    </View>
+                </View>
+            </View>
+            <View style={styles.infoContainer}>
+                <Text style={styles.infoText}>Polygon</Text>
+            </View>
+        </View>
+    );
+}
+
+const styles = {
+    container: {
+        alignItems: 'center',
+        flex: 1,
+        paddingLeft: 8,
+        paddingRight: 8
+    },
+    backgroundContainer: {
+        backgroundColor: '#3164fa',
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        overflow: 'hidden',
+        flex: 1,
+        width: '100%',
+        position: 'relative',
+    },
+    backgroundImage: {
+        flex: 1,
+        bottom: 0,
+        left: 0,
+        position: 'absolute',
+        zIndex: 20,
+    },
+    contentContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    textContainer: {
+        alignItems: 'center',
+        backgroundColor: 'transparent',
+    },
+    largeText: {
+        fontSize: 32,
+        fontWeight: 'bold',
+        textAlign: 'center',
+        color: 'white',
+    },
+    mediumText: {
+        fontSize: 18,
+        fontWeight: 'medium',
+        textAlign: 'center',
+        color: 'white',
+    },
+    infoContainer: {
+        backgroundColor: '#d2deff',
+        flexDirection: 'row',
+        borderBottomLeftRadius: 8,
+        borderBottomRightRadius: 8,
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        padding: 10,
+    },
+    infoText: {
+        fontSize: 14,
+        fontWeight: 'bold',
+        color: '#3164fa',
+        textAlign: 'center',
+    },
+};

components/BudgetItem.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { TouchableOpacity, Text } from 'react-native';
+import { YGroup, ListItem, YStack, XStack } from 'tamagui';
+import truncateEthereumAddress from '../utils/functions';
+import { BudgetItemSheet } from './BudgetItemSheet';
+import { Ionicons } from '@expo/vector-icons';
+
+export function BudgetItem({ budget, budgetItemSheetRef }) {
+    return (
+        <YGroup.Item style={styles.container}>
+            <TouchableOpacity onPress={() => budgetItemSheetRef.current?.show()}>
+                <ListItem style={styles.listItem}>
+                    <YStack style={styles.textContainer}>
+                        <Text style={styles.title}>{budget.name}</Text>
+                        <Text style={styles.address}>{truncateEthereumAddress(budget.address)}</Text>
+                    </YStack>
+                    <XStack style={styles.amountContainer}>
+                        <Text style={styles.amount}>${budget.amount}</Text>
+                        <Ionicons name="chevron-forward" size={24} color="#E1E2E4" />
+                    </XStack>
+                </ListItem>
+            </TouchableOpacity>
+            <BudgetItemSheet budgetItemSheetRef={budgetItemSheetRef} />
+        </YGroup.Item>
+    );
+}
+
+const styles = {
+    container: {
+        backgroundColor: 'white',
+    },
+    listItem: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingRight: 8,
+        backgroundColor: 'white',
+        borderRadius: 5,
+    },
+    textContainer: {
+        flex: 1,
+        flexDirection: 'column',
+        paddingTop: 2.5,
+        paddingBottom: 5,
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        color: '#565f6d',
+    },
+    address: {
+        fontSize: 14,
+        fontWeight: 600,
+        color: '#3164FA',
+        marginTop: 5,
+    },
+    amountContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: 5,
+    },
+    amount: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        color: '#111111',
+    },
+};