Add files via upload

Cryptonomics NFT Native App/app.js

@@ -0,0 +1,33 @@
+import { createStackNavigator } from '@react-navigation/stack'
+import { NavigationContainer, DefaultTheme } from '@react-navigation/native'
+import { useFonts } from 'expo-font'
+import Parent from './screens/parent'
+import Summary from './screens/summary'
+
+const Stack = createStackNavigator()
+const theme = {
+  ...DefaultTheme,
+  colors: {
+    ...DefaultTheme.colors,
+    background: 'transparent'
+  }
+}
+
+const App = () => {
+  const [loaded] = useFonts({
+    'TrashHand': require('./assets/fonts/TrashHand.ttf')
+  })
+
+  if (!loaded) return null
+
+  return (
+    <NavigationContainer theme = { theme }>
+      <Stack.Navigator screenOptions = {{ headerShown: false }}>
+        <Stack.Screen name = 'Parent' component = { Parent } />
+        <Stack.Screen name = 'Summary' component = { Summary } />
+      </Stack.Navigator>
+    </NavigationContainer>
+  )
+}
+
+export default App

Cryptonomics NFT Native App/app.json

@@ -0,0 +1,36 @@
+{
+  "expo": {
+    "name": "cryptonomics",
+    "slug": "cryptonomics",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.dasgupta002.cryptonomics"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "extra": {
+      "eas": {
+        "projectId": "a9f73a36-f765-4b14-813a-68698786d5c0"
+      }
+    }
+  }
+}

Cryptonomics NFT Native App/babel.config.js

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

Cryptonomics NFT Native App/components/biography.js

@@ -0,0 +1,77 @@
+import { useState } from 'react'
+import { StatusBar, View, Image, TouchableOpacity, Text, StyleSheet } from 'react-native'
+import Icon from 'react-native-vector-icons/Entypo'
+import CustomText from './text'
+import Outline from './outline'
+import { Colors, Sizes, Shadows } from '../constants/theme'
+
+const Biography = ({ data, navigation }) => {
+    const [text, setText] = useState(data.description.slice(0, 250))
+    const [show, setShow] = useState(false)
+
+    return (
+        <View>
+            <View style = {{ width: '100%', height: 375 }}>
+                <Image source = { data.image } style = {{ width: '100%', height: '100%' }} resizeMode = 'cover' />
+                <TouchableOpacity style = { styles.icon } onPress = { () => navigation.goBack() }>
+                    <Icon name = 'chevron-left' size = { 25 } color = 'white' />
+                </TouchableOpacity>
+                <View style = { styles.button }>
+                    <Icon name = 'heart' size = { 25 } color = 'red' />
+                </View>
+            </View>
+            <Outline people = { data.bids } date = { data.time } />
+            <View style = {{ padding: Sizes.font }}>
+                <CustomText font = { 20 }>{ data.title }</CustomText>
+                <CustomText font = { 16 }>By { data.creator }</CustomText>
+                <View style = {{ marginTop: Sizes.extraLarge, marginBottom: Sizes.base, alignItems: 'flex-end' }}>
+                    <CustomText font = { 16 }>Description</CustomText>
+                </View>
+                <CustomText font = { 12 }>
+                    { text }
+                    { !show && ' ...' }
+                    <Text onPress = { () => {
+                        if(!show) {
+                            setText(data.description)
+                            setShow(true)
+                        } else {
+                            setText(data.description.slice(0, 250))
+                            setShow(false)
+                        }
+                    }}>
+                        { show ? ' Show Less' : ' Read More' }
+                    </Text>
+                </CustomText>
+                <View style = {{ marginTop: Sizes.extraLarge, marginBottom: Sizes.base, alignItems: 'flex-end' }}>
+                    <CustomText font = { 16 }>Bids</CustomText>
+                </View>
+            </View>
+        </View>  
+    )
+}
+
+const styles = StyleSheet.create({
+    icon: {
+        width: 40, 
+        height: 40,
+        position: 'absolute',
+        top: StatusBar.currentHeight + 12,
+        left: 15,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    button: { 
+        width: 40, 
+        height: 40, 
+        backgroundColor: Colors.white, 
+        borderRadius: Sizes.extraLarge, 
+        position: 'absolute',
+        top: StatusBar.currentHeight + 12,
+        right: 15,
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...Shadows.light
+    }
+})
+
+export default Biography

Cryptonomics NFT Native App/components/card.js

@@ -0,0 +1,53 @@
+import { View, Image, StyleSheet } from 'react-native'
+import { useNavigation } from '@react-navigation/native'
+import Icon from 'react-native-vector-icons/Entypo'
+import Footer from './footer'
+import Outline from './outline'
+import { Colors, Sizes, Shadows } from '../constants/theme'
+
+const Card = ({ data }) => {
+    const navigation = useNavigation()
+
+    return (
+        <View style = { styles.card }>
+            <View style = {{ width: '100%', height: 250 }}>
+                <Image source = { data.image } style = { styles.hero } resizeMode = 'cover' />
+            </View>
+            <View style = { styles.button }>
+                <Icon name = 'heart' size = { 25 } color = 'red' />
+            </View>
+            <Outline people = { data.bids } date = { data.time } />
+            <Footer data = { data } press = { () => navigation.navigate('Summary', { data }) } />
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    card: { 
+        backgroundColor: Colors.white, 
+        borderRadius: Sizes.font, 
+        marginBottom: Sizes.extraLarge, 
+        margin: Sizes.base, 
+        ...Shadows.dark 
+    },
+    hero: {
+        width: '100%',
+        height: '100%',
+        borderTopLeftRadius: Sizes.font,
+        borderTopRightRadius: Sizes.font
+    },
+    button: { 
+        width: 40, 
+        height: 40, 
+        backgroundColor: Colors.white, 
+        position: 'absolute', 
+        top: 10,
+        right: 10,
+        borderRadius: Sizes.extraLarge, 
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...Shadows.light
+    }
+})
+
+export default Card

Cryptonomics NFT Native App/components/footer.js

@@ -0,0 +1,34 @@
+import { View, TouchableOpacity, StyleSheet } from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialIcons'
+import CustomText from './text'
+import { Colors, Sizes } from '../constants/theme'
+
+const Footer = ({ data, press }) => {
+    return (
+        <View style = {{ width: '100%', padding: Sizes.font }}>
+            <CustomText font = { 20 }>{ data.title }</CustomText>
+            <CustomText font = { 14 }>{ data.subtitle }</CustomText>
+            <View style = {{ marginTop: Sizes.font, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                <View style = {{ flexDirection: 'row', alignItems: 'center' }}>
+                    <Icon name = 'money' size = { 20 } />
+                    <CustomText font = { 18 }>{ data.price }</CustomText>
+                </View>
+                <TouchableOpacity style = { styles.block } onPress = { press }>
+                    <CustomText font = { 18 } color = { Colors.white }>Open Bid</CustomText>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    block: { 
+        backgroundColor: Colors.primary, 
+        borderRadius: Sizes.extraLarge, 
+        alignItems: 'center', 
+        padding: Sizes.small, 
+        minWidth: 120 
+    }
+})
+
+export default Footer

Cryptonomics NFT Native App/components/header.js

@@ -0,0 +1,42 @@
+import { View, Image, TextInput, StyleSheet } from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialIcons'
+import CustomText from './text'
+import { Colors, Sizes } from '../constants/theme'
+
+const Header = ({ search }) => {
+    return (
+        <View style = {{ backgroundColor: Colors.primary, padding: Sizes.font }}>
+            <View style = {{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Image source = { require('../assets/images/logo.png') } style = {{ width: 60, height: 60 }} resizeMode = 'contain' />
+                <View>
+                    <Image source = { require('../assets/images/user.png') } style = {{ width: 60, height: 60 }} resizeMode = 'contain' />
+                    <Icon name = 'verified' style = {{ position: 'absolute', bottom: 0, right: 0 }} size = { 20 } color = 'blue' />
+                </View>
+            </View>
+            <View style = {{ marginVertical: Sizes.font }}>
+                <CustomText font = { 15 } color = { Colors.white }>Hola, Tim 🍺.</CustomText>
+                <CustomText font = { 20 } color = { Colors.white }>Find some magic to kick your day.</CustomText>
+            </View>
+            <View style = { styles.search }>
+                <Icon name = 'search' size = { 25 } color = 'white' />
+                <TextInput placeholder = 'Dig your gold.' 
+                           style = {{ flex: 1, fontFamily: 'TrashHand', paddingHorizontal: 5, color: Colors.white }} 
+                           onChangeText = { search } />
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    search: { 
+        flexDirection: 'row', 
+        alignItems: 'center',
+        backgroundColor: Colors.gray,
+        padding: Sizes.font, 
+        width: '100%', 
+        borderRadius: Sizes.font, 
+        marginTop: Sizes.font 
+    }
+})
+
+export default Header

Cryptonomics NFT Native App/components/outline.js

@@ -0,0 +1,50 @@
+import { View, Image, StyleSheet } from 'react-native'
+import CustomText from './text'
+import { Colors, Sizes, Shadows } from '../constants/theme'
+
+const Outline = ({ people, date }) => {
+    return (
+        <View style = { styles.subinfo }>
+            <View style = {{ flexDirection: 'row' }}>
+                {
+                    people.map((item, index) => (
+                        <Image source = { item.image } 
+                               key = { item.id }
+                               style = {{ width: 48, height: 48, marginLeft: index === 0 ? 0 : -Sizes.font }} 
+                               resizeMode = 'contain' />
+                    ))
+                }
+            </View>
+            <View style = { styles.date }>
+                <CustomText font = { 10 }>
+                    Ending in
+                </CustomText>
+                <CustomText font = { 14 }>
+                    { date }
+                </CustomText>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    subinfo: { 
+        width: '100%', 
+        flexDirection: 'row',
+        justifyContent: 'space-between', 
+        paddingHorizontal: Sizes.font, 
+        marginTop: -Sizes.extraLarge,
+    },
+    date: { 
+        paddingHorizontal: Sizes.font, 
+        paddingVertical: Sizes.base, 
+        justifyContent: 'center',
+        alignItems: 'center',
+        elevation: 1,
+        maxWidth: '50%', 
+        backgroundColor: Colors.white,
+        ...Shadows.light 
+    }
+})
+
+export default Outline

Cryptonomics NFT Native App/components/status.js

@@ -0,0 +1,10 @@
+import { StatusBar } from 'react-native'
+import { useIsFocused } from '@react-navigation/native'
+
+const TopBar = (props) => {
+    const isFocused = useIsFocused()
+
+    return isFocused ? <StatusBar animated = { true } { ...props } /> : null
+}
+
+export default TopBar

Cryptonomics NFT Native App/components/text.js

@@ -0,0 +1,12 @@
+import { Text } from 'react-native'
+import { Colors } from '../constants/theme'
+
+const CustomText = ({ font, color, children }) => {
+    if(color === undefined) {
+        color = Colors.primary
+    }
+
+    return <Text style = {{ fontFamily: 'TrashHand', marginLeft: 4, textAlign: 'justify', color: color, fontSize: font }}>{ children }</Text>
+}
+
+export default CustomText