Merge pull request #6 from zed-io/@matt/connect-activities

(feat): Implement Activities from database

.github/scripts/tsconfig.json

@@ -9,7 +9,7 @@
     "allowJs": true,
     "checkJs": true,
     "noEmit": true,
-    "strict": true,
+    "strict": true
   },
-  "include": ["*.js", "*.ts"],
+  "include": ["*.js", "*.ts"]
 }

README.md

@@ -1,29 +1,17 @@
-# Valora Mobile App
+# Kolektivo Mobile App
 
-![Checks](https://github.com/valora-inc/wallet/actions/workflows/check.yml/badge.svg)
-![E2E](https://github.com/valora-inc/wallet/actions/workflows/e2e-main.yml/badge.svg)
-![Mobile Tests](https://github.com/valora-inc/wallet/actions/workflows/test.yml/badge.svg)
-[![Codecov](https://img.shields.io/codecov/c/github/valora-inc/wallet)](https://codecov.io/gh/valora-inc/wallet)
-[![GitHub contributors](https://img.shields.io/github/contributors/valora-inc/wallet)](https://github.com/valora-inc/wallet/graphs/contributors)
-[![GitHub commit activity](https://img.shields.io/github/commit-activity/w/valora-inc/wallet)](https://github.com/valora-inc/wallet/graphs/contributors)
-[![GitHub Stars](https://img.shields.io/github/stars/valora-inc/wallet.svg)](https://github.com/valora-inc/wallet/stargazers)
-![GitHub repo size](https://img.shields.io/github/repo-size/valora-inc/wallet)
-[![GitHub](https://img.shields.io/github/license/valora-inc/wallet?color=blue)](https://github.com/valora-inc/wallet/blob/master/LICENSE)
+![Checks](https://github.com/zed-io/kolektivo/actions/workflows/check.yml/badge.svg)
+![E2E](https://github.com/zed-io/kolektivo/actions/workflows/e2e-main.yml/badge.svg)
+![Mobile Tests](https://github.com/zed-io/kolektivo/actions/workflows/test.yml/badge.svg)
+[![Codecov](https://img.shields.io/codecov/c/github/zed-io/kolektivo)](https://codecov.io/gh/zed-io/kolektivo)
+[![GitHub contributors](https://img.shields.io/github/contributors/zed-io/kolektivo)](https://github.com/zed-io/kolektivo/graphs/contributors)
+[![GitHub commit activity](https://img.shields.io/github/commit-activity/w/zed-io/kolektivo)](https://github.com/zed-io/kolektivo/graphs/contributors)
+![GitHub repo size](https://img.shields.io/github/repo-size/zed-io/kolektivo)
+[![GitHub](https://img.shields.io/github/license/zed-io/kolektivo?color=blue)](https://github.com/zed-io/kolektivo/blob/kolektivo/LICENSE)
 
-Valora is a mobile wallet focused on making global peer-to-peer
-payments simple and accessible to anyone. It supports the Celo
-Identity Protocol which allows users to verify their phone number and
-send payments to their contacts.
+## Build Kolektivo Locally
 
-## Integrate with Valora
-
-Connect your Dapp to Valora using [WalletConnect](./docs/connecting-dapps.md).
-
-See also [deeplinks.md](./docs/deeplinks.md) for integrating with Valora using deep links.
-
-## Build Valora Locally
-
-To setup Valora locally, follow [setup instructions](./WALLET.md).
+To setup Kolektivo locally, follow [setup instructions](./WALLET.md).
 
 ## Repo Structure
 
@@ -34,7 +22,3 @@ Code owners can be found in [.github/CODEOWNERS](.github/CODEOWNERS).
 ## Contributing
 
 We welcome contributions in the form of Issues and PRs. Please read [CONTRIBUTING.md](CONTRIBUTING.md) first!
-
-## Community
-
-Have questions or need help? Join our [Discord Community](https://discord.com/invite/J5XMtMkwC4).

src/kolektivo/map/FoodForestDetails.tsx → future/map/FoodForestDetails.tsx

@@ -10,7 +10,7 @@ import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
 import Touchable from 'src/components/Touchable'
 import Directions from 'src/icons/Directions'
 import Phone from 'src/icons/Phone'
-import QRCodeBorderless from 'src/icons/QRCodeBorderless'
+import QRCode from 'src/icons/QRCode'
 import Share from 'src/icons/Share'
 import Times from 'src/icons/Times'
 import VerifiedIcon from 'src/icons/VerifiedIcon'
@@ -141,7 +141,7 @@ const FoodForestDetails = ({ forest, close, action }: Props) => {
           {map(tags, (tag) => (
             <Button
               type={BtnTypes.ONBOARDING_SECONDARY}
-              size={BtnSizes.TINY}
+              size={BtnSizes.SMALL}
               text={`${tag}`}
               // eslint-disable-next-line @typescript-eslint/no-empty-function
               onPress={() => {}}
@@ -151,7 +151,7 @@ const FoodForestDetails = ({ forest, close, action }: Props) => {
         {/* @todo Add Send button */}
         <View style={styles.actionButtons}>
           <TouchableOpacity onPress={action}>
-            <QRCodeBorderless />
+            <QRCode />
           </TouchableOpacity>
         </View>
         {/* @todo Add QR scanning button, this should utilize deep linking */}

jest_setup.ts

@@ -54,6 +54,47 @@ jest.mock('react-native-shake', () => ({
   removeAllListeners: jest.fn(),
 }))
 
+jest.mock('@supabase/supabase-js', () => {
+  return {
+    createClient: jest.fn().mockImplementation(() => {
+      return {
+        from: jest.fn().mockReturnThis(),
+        select: jest.fn().mockImplementation(() => ({
+          eq: jest.fn().mockReturnThis(),
+          in: jest.fn().mockReturnThis(),
+          is: jest.fn().mockReturnThis(),
+          order: jest.fn().mockReturnThis(),
+          gte: jest.fn().mockReturnThis(),
+          lte: jest.fn().mockReturnThis(),
+          data: [
+            {
+              id: 'mockedRoleId',
+              org_users: [{ id: 'mockUserId', status: 'active' }],
+            },
+          ],
+          error: null,
+        })),
+        update: jest.fn().mockImplementation(() => ({
+          eq: jest.fn().mockReturnThis(),
+          in: jest.fn().mockReturnThis(),
+          is: jest.fn().mockReturnThis(),
+          order: jest.fn().mockReturnThis(),
+          gte: jest.fn().mockReturnThis(),
+          lte: jest.fn().mockReturnThis(),
+          select: jest.fn().mockReturnThis(),
+          data: [
+            {
+              id: 'mockedRoleId',
+              org_users: [{ id: 'mockUserId', status: 'active' }],
+            },
+          ],
+          error: null,
+        })),
+      }
+    }),
+  }
+})
+
 jest.mock('@react-native-clipboard/clipboard', () => ({
   setString: jest.fn(),
   getString: jest.fn(),

package.json

@@ -1,13 +1,13 @@
 {
-  "name": "@valora/wallet",
+  "name": "@kolektivo/wallet",
   "version": "1.84.1",
-  "author": "Valora Inc",
+  "author": "Zed Labs Ltd.",
   "license": "Apache-2.0",
   "private": true,
   "engines": {
     "node": "20"
   },
-"scripts": {
+  "scripts": {
     "lint": "eslint --ext=.tsx,.ts src/",
     "format": "prettier --loglevel error --write .",
     "format:check": "prettier --check .",
@@ -112,6 +112,7 @@
     "@segment/analytics-react-native-plugin-firebase": "^0.4.1",
     "@segment/sovran-react-native": "^1.1.1",
     "@sentry/react-native": "^5.22.0",
+    "@supabase/supabase-js": "^2.43.4",
     "@th3rdwave/react-navigation-bottom-sheet": "^0.2.7",
     "@toruslabs/constants": "^13.3.0",
     "@toruslabs/fetch-node-details": "^13.3.0",

src/components/__snapshots__/Avatar.test.tsx.snap

@@ -146,22 +146,12 @@ exports[`Avatar renders correctly with address but no name nor number 1`] = `
       }
     >
       <svg
-        fill="none"
+        fill="hsl(0, 53%, 93%)"
         height="40"
+        style={{}}
         viewBox="0 0 40 40"
         width="40"
-      >
-        <circle
-          cx="20"
-          cy="20"
-          fill="hsl(0, 53%, 93%)"
-          r="20"
-        />
-        <path
-          d="M20 12a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm0 7c2.67 0 8 1.33 8 4v3H12v-3c0-2.67 5.33-4 8-4Zm0 1.9c-2.97 0-6.1 1.46-6.1 2.1v1.1h12.2V25c0-.64-3.13-2.1-6.1-2.1Z"
-          fill="hsl(0, 67%, 24%)"
-        />
-      </svg>
+      />
     </View>
   </View>
   <Text
@@ -229,22 +219,12 @@ exports[`Avatar renders correctly with just number 1`] = `
       }
     >
       <svg
-        fill="none"
+        fill="hsl(0, 53%, 93%)"
         height="40"
+        style={{}}
         viewBox="0 0 40 40"
         width="40"
-      >
-        <circle
-          cx="20"
-          cy="20"
-          fill="hsl(0, 53%, 93%)"
-          r="20"
-        />
-        <path
-          d="M20 12a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm0 7c2.67 0 8 1.33 8 4v3H12v-3c0-2.67 5.33-4 8-4Zm0 1.9c-2.97 0-6.1 1.46-6.1 2.1v1.1h12.2V25c0-.64-3.13-2.1-6.1-2.1Z"
-          fill="hsl(0, 67%, 24%)"
-        />
-      </svg>
+      />
     </View>
   </View>
   <Text

src/components/__snapshots__/ContactCircle.test.tsx.snap

@@ -31,22 +31,12 @@ exports[`ContactCircle when given recipient with only address uses DefaultAvatar
     }
   >
     <svg
-      fill="none"
+      fill="hsl(291, 53%, 93%)"
       height="40"
+      style={{}}
       viewBox="0 0 40 40"
       width="40"
-    >
-      <circle
-        cx="20"
-        cy="20"
-        fill="hsl(291, 53%, 93%)"
-        r="20"
-      />
-      <path
-        d="M20 12a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm0 7c2.67 0 8 1.33 8 4v3H12v-3c0-2.67 5.33-4 8-4Zm0 1.9c-2.97 0-6.1 1.46-6.1 2.1v1.1h12.2V25c0-.64-3.13-2.1-6.1-2.1Z"
-        fill="hsl(291, 67%, 24%)"
-      />
-    </svg>
+    />
   </View>
 </View>
 `;

src/config.ts

@@ -12,7 +12,7 @@ import { ONE_HOUR_IN_MILLIS } from './utils/time'
 export * from 'src/brandingConfig'
 
 // extract secrets from secrets.json
-const keyOrUndefined = (file: any, secretsKey: any, attribute: any) => {
+export const keyOrUndefined = (file: any, secretsKey: any, attribute: any) => {
   if (secretsKey in file) {
     if (attribute in file[secretsKey]) {
       return file[secretsKey][attribute]

src/icons/Directions.tsx

@@ -8,7 +8,7 @@ export interface Props {
   onPress?: () => void
 }
 
-function Directions({ color = colors.greenBrand, size = 24, ...props }: Props) {
+function Directions({ color = colors.primary, size = 24, ...props }: Props) {
   return (
     <Svg
       width={size}

src/icons/Phone.tsx

@@ -7,7 +7,7 @@ export interface Props {
   size?: number
 }
 
-function Phone({ color = colors.greenBrand, size = 24, ...props }: Props) {
+function Phone({ color = colors.primary, size = 24, ...props }: Props) {
   return (
     <Svg
       width={size}

src/icons/VerifiedIcon.tsx

@@ -7,7 +7,7 @@ export interface Props {
   size?: number
 }
 
-export default function VerifiedIcon({ color = colors.greenBrand, size = 22 }: Props) {
+export default function VerifiedIcon({ color = colors.primary, size = 22 }: Props) {
   return (
     <Svg
       width={size}

src/icons/Website.tsx

@@ -7,7 +7,7 @@ export interface Props {
   size?: number
 }
 
-function Website({ color = colors.greenBrand, size = 24, ...props }: Props) {
+function Website({ color = colors.primary, size = 24, ...props }: Props) {
   return (
     <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
       <Path

src/kolektivo/activities/ActivityDetailScreen.tsx

@@ -26,27 +26,32 @@ export const ActivityDetailScreen = ({ route }: Props) => {
   const { t } = useTranslation()
   const { enroll } = useActivityEnrollment()
 
-  const eventDate = formatFeedDate(activity.activityDateTime, i18n)
+  const eventDate = formatFeedDate(new Date().getTime(), i18n)
   const eventTime = useMemo(() => {
-    if (activity.activityEndDateTime) {
-      return `${formatFeedTime(activity.activityDateTime, i18n)} - ${formatFeedTime(activity.activityEndDateTime, i18n)}`
+    if (new Date().getTime()) {
+      return `${formatFeedTime(new Date().getTime(), i18n)} - ${formatFeedTime(new Date().getTime(), i18n)}`
     } else {
-      return formatFeedTime(activity.activityDateTime, i18n)
+      return formatFeedTime(new Date().getTime(), i18n)
     }
   }, [])
 
   return (
     <SafeAreaView style={styles.container} edges={[]}>
       <ScrollView showsVerticalScrollIndicator={false}>
         <View style={[styles.hero]}>
-          <Image source={{ uri: activity.activityImageUri }} style={styles.image} />
+          <Image
+            source={{
+              uri: 'https://images.unsplash.com/photo-1466692476868-aef1dfb1e735?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+            }}
+            style={styles.image}
+          />
           <Text style={styles.heroTitle}>{activity.title}</Text>
         </View>
         <View style={[styles.main]}>
           <Button size={BtnSizes.FULL} text={t('connect')} onPress={() => enroll(activity)} />
           <ActivityDetailListItem
             category="Location"
-            content={activity.activityLocation}
+            content={activity.fullAddress}
             icon={<Pin />}
           />
           <ActivityDetailListItem category="Date" content={eventDate} icon={<Calendar />} />
@@ -57,12 +62,12 @@ export const ActivityDetailScreen = ({ route }: Props) => {
           />
           <ActivityDetailListItem
             category="Host"
-            content={activity.activityHost}
+            content={activity.activityHost.name}
             icon={<AccountCircle color={Colors.black} />}
           />
           <View style={[styles.content]}>
             <Text style={[styles.detailLabel]}>About</Text>
-            <Text style={[styles.detailAbout]}>{activity.activityAbout}</Text>
+            <Text style={[styles.detailAbout]}>{activity.description}</Text>
           </View>
         </View>
       </ScrollView>
@@ -93,7 +98,7 @@ ActivityDetailScreen.navigationOptions = ({
 }: Props) => ({
   ...headerWithBackButton,
   headerTitle: () => (
-    <HeaderTitleWithSubtitle title={activity.title} subTitle={activity.activityHost} />
+    <HeaderTitleWithSubtitle title={activity.title} subTitle={activity.activityHost.name} />
   ),
   gestureEnabled: false,
 })