@tyrads.com/tyrads-sdk 1.1.15 → 2.0.0-beta.1

package/lib/typescript/module/src/acmo/modules/dashboard/components/offer_info_section.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type ViewStyle } from "react-native";
+interface OfferInfoSectionProps {
+    details: TransformedCampaign;
+    premiumColor?: string;
+    style?: ViewStyle;
+}
+declare const OfferInfoSection: React.FC<OfferInfoSectionProps>;
+export default OfferInfoSection;
+//# sourceMappingURL=offer_info_section.d.ts.map

package/lib/typescript/module/src/acmo/modules/dashboard/components/offer_info_section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"offer_info_section.d.ts","sourceRoot":"","sources":["../../../../../../../../src/acmo/modules/dashboard/components/offer_info_section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+D,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAQ3G,UAAU,qBAAqB;IAC7B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+DrD,CAAC;AAiEF,eAAe,gBAAgB,CAAC"}

package/lib/typescript/module/src/acmo/modules/dashboard/components/premium_header.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface PremiumHeaderSectionProps {
+    showMore?: boolean;
+    premiumColor?: string;
+}
+declare const PremiumHeaderSection: React.FC<PremiumHeaderSectionProps>;
+export default PremiumHeaderSection;
+//# sourceMappingURL=premium_header.d.ts.map

package/lib/typescript/module/src/acmo/modules/dashboard/components/premium_header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"premium_header.d.ts","sourceRoot":"","sources":["../../../../../../../../src/acmo/modules/dashboard/components/premium_header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA4B7D,CAAC;AA0CF,eAAe,oBAAoB,CAAC"}

package/lib/typescript/module/src/acmo/modules/dashboard/components/premium_option_1.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface PremiumOption1Props {
+    data: TransformedCampaign[];
+    premiumColor?: string;
+}
+declare const PremiumOption1: React.FC<PremiumOption1Props>;
+export default PremiumOption1;
+//# sourceMappingURL=premium_option_1.d.ts.map

package/lib/typescript/module/src/acmo/modules/dashboard/components/premium_option_1.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"premium_option_1.d.ts","sourceRoot":"","sources":["../../../../../../../../src/acmo/modules/dashboard/components/premium_option_1.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,UAAU,mBAAmB;IAC3B,IAAI,EAAE,mBAAmB,EAAE,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkEjD,CAAC;AA4EF,eAAe,cAAc,CAAC"}

package/lib/typescript/module/src/acmo/modules/dashboard/components/premium_option_2.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface PremiumOption2Props {
+    data: TransformedCampaign[];
+    premiumColor?: string;
+}
+declare const PremiumOption2: React.FC<PremiumOption2Props>;
+export default PremiumOption2;
+//# sourceMappingURL=premium_option_2.d.ts.map

package/lib/typescript/module/src/acmo/modules/dashboard/components/premium_option_2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"premium_option_2.d.ts","sourceRoot":"","sources":["../../../../../../../../src/acmo/modules/dashboard/components/premium_option_2.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,UAAU,mBAAmB;IAC3B,IAAI,EAAE,mBAAmB,EAAE,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0BjD,CAAC;AAyDF,eAAe,cAAc,CAAC"}

package/lib/typescript/module/src/acmo/modules/dashboard/components/premium_option_3.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface PremiumOption3Props {
+    data: TransformedCampaign[];
+    premiumColor?: string;
+}
+declare const PremiumOption3: React.FC<PremiumOption3Props>;
+export default PremiumOption3;
+//# sourceMappingURL=premium_option_3.d.ts.map

package/lib/typescript/module/src/acmo/modules/dashboard/components/premium_option_3.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"premium_option_3.d.ts","sourceRoot":"","sources":["../../../../../../../../src/acmo/modules/dashboard/components/premium_option_3.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,mBAAmB;IAC3B,IAAI,EAAE,mBAAmB,EAAE,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgCjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/typescript/module/src/acmo/modules/dashboard/components/premium_option_4.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface PremiumOption4Props {
+    data: TransformedCampaign[];
+    premiumColor?: string;
+}
+declare const PremiumOption4: React.FC<PremiumOption4Props>;
+export default PremiumOption4;
+//# sourceMappingURL=premium_option_4.d.ts.map

package/lib/typescript/module/src/acmo/modules/dashboard/components/premium_option_4.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"premium_option_4.d.ts","sourceRoot":"","sources":["../../../../../../../../src/acmo/modules/dashboard/components/premium_option_4.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,UAAU,mBAAmB;IAC3B,IAAI,EAAE,mBAAmB,EAAE,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgBjD,CAAC;AAkJF,eAAe,cAAc,CAAC"}

package/lib/typescript/module/src/acmo/modules/dashboard/repository.d.ts

@@ -0,0 +1,2 @@
+export declare const fetchCampaignsData: (setPremiumColor: (color: string) => void, setCampaigns: (campaigns: TransformedCampaign[]) => void, setError: (error: string) => void, setIsLoading: (loading: boolean) => void) => Promise<void>;
+//# sourceMappingURL=repository.d.ts.map

package/lib/typescript/module/src/acmo/modules/dashboard/repository.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"repository.d.ts","sourceRoot":"","sources":["../../../../../../../src/acmo/modules/dashboard/repository.ts"],"names":[],"mappings":"AAgCA,eAAO,MAAM,kBAAkB,oBAEZ,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,gBAC1B,CAAC,SAAS,EAAE,mBAAmB,EAAE,KAAK,IAAI,YAC9C,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,gBACnB,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,KACvC,OAAO,CAAC,IAAI,CAwDd,CAAC"}

package/lib/typescript/module/src/acmo/modules/dashboard/top_offers.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface TopOffersProps {
+    showMore?: boolean;
+    showMyOffers?: boolean;
+    showMyOffersEmptyView?: boolean;
+    style?: number;
+}
+declare const TopOffers: React.FC<TopOffersProps>;
+export default TopOffers;
+//# sourceMappingURL=top_offers.d.ts.map

package/lib/typescript/module/src/acmo/modules/dashboard/top_offers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"top_offers.d.ts","sourceRoot":"","sources":["../../../../../../../src/acmo/modules/dashboard/top_offers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAgBnD,UAAU,cAAc;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAkFvC,CAAC;AAyBF,eAAe,SAAS,CAAC"}

package/lib/typescript/module/src/i18n.d.ts

@@ -0,0 +1,3 @@
+import i18n from 'i18next';
+export default i18n;
+//# sourceMappingURL=i18n.d.ts.map

package/lib/typescript/module/src/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../../src/i18n.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,SAAS,CAAC;AAkH3B,eAAe,IAAI,CAAC"}

package/lib/typescript/module/src/index.d.ts

@@ -1,3 +1,17 @@
-declare const Tyrads: any;
+declare const Tyrads: {
+    init: (apiKey: string, apiSecret: string) => any;
+    loginUser: (userId: string) => Promise<any>;
+    showOffers: ({ launchMode, route, campaignID, }?: {
+        launchMode?: number;
+        route?: string;
+        campaignID?: number;
+    }) => any;
+    topPremiumOffers: ({ showMore, showMyOffers, showMyOffersEmptyView, viewStyle, }?: {
+        showMore?: boolean;
+        showMyOffers?: boolean;
+        showMyOffersEmptyView?: boolean;
+        viewStyle?: number;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
 export default Tyrads;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAQA,QAAA,MAAM,MAAM,KASP,CAAC;AACN,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AA2BA,QAAA,MAAM,MAAM;mBACK,MAAM,aAAa,MAAM;wBAGd,MAAM;sDAgB7B;QAAE,UAAU,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE;uFAY5D;QACD,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,qBAAqB,CAAC,EAAE,OAAO,CAAC;QAChC,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;CAcF,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tyrads.com/tyrads-sdk",
-  "version": "1.1.15",
+  "version": "2.0.0-beta.1",
   "description": "Tyrads SDK for React Native ",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",
@@ -26,6 +26,7 @@
     "*.podspec",
     "!ios/build",
     "!android/build",
+    "!android/app/build",
     "!android/gradle",
     "!android/gradlew",
     "!android/gradlew.bat",
@@ -68,6 +69,7 @@
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^29.5.5",
+    "@types/numeral": "^2.0.5",
     "@types/react": "^18.2.44",
     "commitlint": "^17.0.2",
     "del-cli": "^5.1.0",
@@ -183,5 +185,14 @@
     "type": "module-legacy",
     "languages": "kotlin-swift",
     "version": "0.40.0"
+  },
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "^2.1.2",
+    "axios": "^1.8.1",
+    "i18next": "^24.2.2",
+    "i18next-http-backend": "^3.0.2",
+    "numeral": "^2.0.6",
+    "react-i18next": "^15.4.1",
+    "react-native-text-ticker": "^1.14.0"
   }
 }

package/readme.md

@@ -22,3 +22,74 @@ import Tyrads from '@tyrads.com/tyrads-sdk';
     Tyrads.showOffers();
 ```
 
+
+</br>
+<details>
+<summary><strong>Launch Mode</strong></summary>
+
+
+</br>
+
+##### Min SDK version required: v1.1.6
+##### Works only for iOS 
+
+</br>
+
+Tyrads SDK provides the ability to open the Offerwall in a webkit view that is embedded in the app to provide a seamless user experience. Also, it provides the ability to open the Offerwall in an external browser (Safari) if Apple's app store policy does not approve the in-app rewards system for the app.
+
+Available launch modes:
+- `launchMode: 3` - opens the Offerwall in an external browser (Safari)
+- `launchMode: 2` - opens the Offerwall in a webkit view that is embedded in the app
+
+```js
+
+// Note: The launchMode parameter is optional, if not specified the default would be opening the Offerwall in an external browser (Safari)
+
+Tyrads.showOffers({ launchMode: 3 });// provide launchMode: 2 to open the Offerwall in a webkit view that is embedded in the app
+
+```
+</details>
+
+
+
+</br>
+<details>
+<summary><strong>Deeplinking Routes</strong></summary>
+
+
+</br>
+
+##### Min SDK version required: v1.1.6
+
+</br>
+
+The Tyrads SDK supports deeplinking to specific sections of the offerwall. When initializing or interacting with the SDK, you can specify a route to open a particular page. For campaign-specific routes, you'll need to provide the campaignID as well.
+
+Available routes and their usage:
+- `campaigns` - opens the Campaigns Page
+- `campaigns-activated` - opens the Activated Campaigns Page
+- `campaign-details` - opens the Campaign Details Page (requires campaignID)
+- `campaign-tickets` - opens the Campaign Tickets Page (requires campaignID)
+
+```js
+
+// Default route (Campaigns Page)
+Tyrads.showOffers();
+
+// Explicitly specifying the Campaigns Page
+Tyrads.showOffers({ route: "campaigns" });
+
+// Activated Campaigns Page
+Tyrads.showOffers({ route: "campaigns-activated" });
+
+// Campaign Details Page (requires campaignID)
+Tyrads.showOffers({ route: "campaign-details", campaignID: "your_campaign_id_here" });
+
+// Campaign Tickets Page (requires campaignID)
+Tyrads.showOffers({ route: "campaign-tickets", campaignID: "your_campaign_id_here" });
+
+```
+</details>
+
+</br></br>
+

package/src/acmo/core/marquee.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, View, StyleSheet, Dimensions, type TextStyle,} from 'react-native';
+
+interface MarqueeTextProps {
+  text: string;
+  speed?: number;
+  repeat?: number;
+  style?: TextStyle;
+}
+
+const MarqueeText: React.FC<MarqueeTextProps> = ({ text, speed = 15, repeat = 100, style }) => {
+  const translateX = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const textWidth = text.length * 4;
+    const screenWidth = Dimensions.get('window').width;
+
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(translateX, {
+          toValue: -textWidth,
+          duration: (textWidth + screenWidth) * speed,
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateX, {
+          toValue: screenWidth,
+          duration: 0,
+          useNativeDriver: true,
+        }),
+      ]),
+      { iterations: repeat }
+    );
+
+    animation.start();
+
+    return () => animation.stop();
+  }, [text, speed, repeat, translateX]);
+
+  return (
+    <View style={styles.container}>
+      <Animated.Text
+        numberOfLines={1}
+        style={[styles.text, style, { transform: [{ translateX }] }]}
+      >
+        {text}
+      </Animated.Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    width: '100%',
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});
+
+export default MarqueeText;

package/src/acmo/core/storage/storage.ts

@@ -0,0 +1,28 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export const saveData = async (key: string, object: any): Promise<void> => {
+  try {
+    const jsonValue: string = JSON.stringify(object);
+    await AsyncStorage.setItem(key, jsonValue);
+  } catch (e: any) {
+    if (e instanceof Error) {
+      console.error('Error saving object:', e.message);
+    } else {
+      console.error('An unknown error occurred while saving.');
+    }
+  }
+};
+
+export const getData = async <T>(key: string): Promise<T | null> => {
+  try {
+    const jsonValue: string | null = await AsyncStorage.getItem(key);
+    return jsonValue != null ? JSON.parse(jsonValue) as T : null;
+  } catch (e: any) {
+    if (e instanceof Error) {
+      console.error('Error getting object:', e.message);
+    } else {
+      console.error('An unknown error occurred while getting.');
+    }
+    return null;
+  }
+};

package/src/acmo/core/types/types.d.ts

@@ -0,0 +1,94 @@
+interface TransformedCampaign {
+  campaignId: number;
+  appId: number;
+  title: string;
+  creativePackName: string;
+  fileUrl: string;
+  points: number;
+  rewards: number;
+  currency: any;
+  thumbnail: string;
+  premium: boolean;
+  sortingScore: number;
+}
+
+interface Campaign {
+  campaignId: number;
+  campaignName: string;
+  campaignDescription: null | string;
+  createdOn: string;
+  sortingScore: number;
+  status: string;
+  expiredOn: null | string;
+  hasPlaytimeEvents: boolean;
+  app: {
+    id: number;
+    title: string;
+    packageName: string;
+    rating: number;
+    shortDescription: string;
+    store: string;
+    storeCategory: string;
+    previewUrl: string;
+    thumbnail: string;
+    confidenceScore: number;
+    securityLabel: string;
+  };
+  currency: {
+    name: string;
+    symbol: string;
+    adUnitName: string;
+    adUnitCurrencyName: string;
+    adUnitCurrencyConversion: number;
+    adUnitCurrencyIcon: string;
+  };
+  campaignPayout: {
+    totalEvents: number;
+    totalPayout: number;
+    totalPlayablePayout: number;
+    totalMicrochargePayout: number;
+    totalPayoutConverted: number;
+    totalPlayablePayoutConverted: number;
+    totalMicrochargePayoutConverted: number;
+  };
+  tracking: {
+    impressionUrl: string;
+    clickUrl: string;
+  };
+  targeting: {
+    os: string;
+    targetingType: string;
+    reward: {
+      rewardDifficulty: string;
+      incentRewardDescription: string;
+    };
+  };
+  creative: {
+    creativeUrl: string;
+    creativePacks: {
+      creativePackId: null | number;
+      creativePackName: string;
+      languageName: string;
+      languageCode: string;
+      creatives: {
+        creativeId: null | number;
+        creativeName: string;
+        callToAction: string;
+        text: string;
+        byteSize: string;
+        fileUrl: string;
+        duration: string;
+        creativeType: {
+          name: string;
+          type: string;
+          width: string;
+          height: string;
+          creativeCategoryType: string;
+        };
+      }[];
+    }[];
+  };
+  isRetryDownload: boolean;
+  capReached: boolean;
+  premium: boolean;
+}

package/src/acmo/modules/dashboard/components/auto_scroller.tsx

@@ -0,0 +1,85 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { View, ScrollView, StyleSheet, Dimensions } from 'react-native';
+
+const { width } = Dimensions.get('window');
+
+interface AutoScrollPagerWithIndicatorsProps {
+  totalPages: number;
+  delayInMillis?: number;
+  premiumColor?: string;
+  content: (index: number) => React.ReactNode;
+}
+
+const AutoScrollPagerWithIndicators: React.FC<AutoScrollPagerWithIndicatorsProps> = ({
+  totalPages,
+  delayInMillis = 5000,
+  premiumColor,
+  content,
+}) => {
+  const [currentPage, setCurrentPage] = useState(0);
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      const nextBanner = (currentPage + 1) % totalPages;
+      setCurrentPage(nextBanner);
+      scrollViewRef.current?.scrollTo({ x: nextBanner * width, animated: true });
+    }, delayInMillis);
+
+    return () => clearInterval(intervalId);
+  }, [currentPage, totalPages, delayInMillis]);
+
+  useEffect(() => {
+    scrollViewRef.current?.scrollTo({ x: currentPage * width, animated: false });
+  }, [currentPage]);
+
+  const renderIndicators = () => {
+    const indicators: React.ReactNode[] = [];
+    for (let i = 0; i < totalPages; i++) {
+      indicators.push(
+        <View
+          key={i}
+          style={[
+            styles.indicator,
+            { backgroundColor: currentPage === i ? (premiumColor|| '#1C90DF') : 'lightgray' },
+          ]}
+        />
+      );
+    }
+    return <View style={styles.indicatorContainer}>{indicators}</View>;
+  };
+
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        ref={scrollViewRef}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={true}
+        scrollEnabled={false}
+        contentContainerStyle={{ width: totalPages * width }}
+      >
+        {Array.from({ length: totalPages }, (_, i) => content(i))}
+      </ScrollView>
+      {renderIndicators()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+  },
+  indicatorContainer: {
+    flexDirection: 'row',
+    marginTop: 10,
+  },
+  indicator: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginHorizontal: 2,
+  },
+});
+
+export default AutoScrollPagerWithIndicators;

package/src/acmo/modules/dashboard/components/custom_card.tsx

@@ -0,0 +1,31 @@
+import React, { type ReactNode } from 'react';
+import { View, StyleSheet, type ViewStyle } from 'react-native';
+
+interface CustomCardProps {
+  children: ReactNode;
+  style?: ViewStyle;
+}
+
+const CustomCard: React.FC<CustomCardProps> = ({ children, style }) => {
+  return <View style={[styles.card, style]}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: 'white',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    borderBottomLeftRadius: 14,
+    borderBottomRightRadius: 14,
+    paddingTop: 6,
+    paddingBottom: 5,
+    shadowColor: '#000',
+    shadowOffset: { width: 4, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 4,
+    alignSelf: 'center',
+  },
+});
+
+export default CustomCard;

package/src/acmo/modules/dashboard/components/my_games_button.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet,} from 'react-native';
+import Tyrads from '../../../..';
+import { useTranslation } from 'react-i18next';
+
+interface MyGamesButtonProps {
+  premiumColor?: string;
+}
+
+const MyGamesButton: React.FC<MyGamesButtonProps> = ({ premiumColor }) => {
+  const { t } = useTranslation();
+  return (
+    <TouchableOpacity
+      style={[styles.button, { backgroundColor: premiumColor || '#1C90DF' }]}
+      onPress={() => Tyrads.showOffers({ route: 'campaigns-activated' })}
+    >
+      <Text style={styles.buttonText}>{t('dashboard.my_games')}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 16,
+    marginBottom: 16,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});
+
+export default MyGamesButton;