Merge branch 'master' into dependabot/npm_and_yarn/ip-1.1.9

js-miniapp-bridge/src/common-bridge.ts

@@ -735,6 +735,22 @@ export class MiniAppBridge {
     });
   }
 
+  /**
+   * Associating miniAppFinishedLoading function to MiniAppBridge object.
+   * @returns Promise resolve with string
+   * Host app can implement an interface miniAppFinishedLoading to perform any operations after the miniapp is loaded.
+   */
+  miniAppFinishedLoading() {
+    return new Promise<string>((resolve, reject) => {
+      return this.executor.exec(
+        'miniAppFinishedLoading',
+        null,
+        success => resolve(success),
+        error => reject(error)
+      );
+    });
+  }
+
   /**
    * This will retrieve the list of products details available for In-App Purchases associated with Mini App in the Platform.
    * @returns List of In-app purchase products
@@ -883,6 +899,23 @@ export class MiniAppBridge {
   clearMiniAppPreferences() {
     return this.preferences.clearMiniAppPreferences();
   }
+
+  /**
+   * This interface will get you the list of all features that is supported by the SDK and Host application
+   * @returns List of features for eg., ["GET_UNIQUE_ID", "GET_USERNAME", "GET_PROFILE_PHOTO", "IS_DARK_MODE"]
+   */
+  getFeatureList() {
+    return new Promise<string[]>((resolve, reject) => {
+      return this.executor.exec(
+        'getFeatureList',
+        null,
+        response => {
+          resolve(JSON.parse(response) as string[]);
+        },
+        error => reject(parseMiniAppError(error))
+      );
+    });
+  }
 }
 
 /**

js-miniapp-sample/src/App.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import ConsoleView from './pages/console-view';
 
 import { makeStyles, ThemeProvider } from '@material-ui/core';
@@ -7,22 +7,67 @@ import { Provider } from 'react-redux';
 import Home from './pages/home';
 import store from './services/store';
 import Theme from './theme';
+import MiniApp from 'js-miniapp-sdk';
 
 const useStyles = makeStyles((theme) => ({
   App: {
     width: '100%',
     textAlign: 'center',
   },
+  toastStyle: {
+    position: 'fixed',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    padding: '10px',
+    backgroundColor: '#444',
+    color: 'white',
+    borderRadius: '5px',
+    zIndex: '9999',
+    textAlign: 'center',
+  },
 }));
 
 function App() {
   const classes = useStyles();
+  const [toastVisible, setToastVisible] = useState(false);
+
+  useEffect(() => {
+    try {
+      if (document.readyState === 'complete') {
+        miniAppDidFinishLoad();
+        console.log('Called Miniapp FinishedLoad()');
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  }, []);
+
+  function miniAppDidFinishLoad() {
+    MiniApp.miniappUtils
+      .miniAppFinishedLoading()
+      .then((response) => {
+        console.log('miniAppFinishedLoading(): ', response);
+        setToastVisible(true);
+        const timer = setTimeout(() => setToastVisible(false), 5000);
+        return () => clearTimeout(timer);
+      })
+      .catch((miniAppError) => {
+        console.log('miniAppFinishedLoading - Error: ', miniAppError);
+      });
+  }
+
   return (
     <Provider store={store}>
       <ThemeProvider theme={Theme}>
         <div className={classes.App}>
           <Home />
           <ConsoleView />
+          {toastVisible && (
+            <div className={classes.toastStyle}>
+              HostApp was notified successfully.
+            </div>
+          )}
         </div>
       </ThemeProvider>
     </Provider>

js-miniapp-sample/src/pages/feature-list.js

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+
+import { makeStyles } from '@material-ui/core';
+import MiniApp from 'js-miniapp-sdk';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Brightness1Icon from '@mui/icons-material/Brightness1';
+
+const useStyles = makeStyles((theme) => ({
+  content: {
+    height: '25%',
+    justifyContent: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    fontSize: 18,
+    color: theme.color.primary,
+    fontWeight: 'bold',
+  },
+  card: {
+    marginTop: '40px',
+  },
+  actions: {
+    justifyContent: 'center',
+    flexDirection: 'column',
+  },
+  button: {
+    marginTop: '20px',
+    width: '80%',
+    maxWidth: 280,
+  },
+  textfield: {
+    width: '80%',
+    maxWidth: 300,
+    '& input': {
+      color: theme.color.primary,
+      lineHeight: '1.5em',
+      fontSize: '1.2em',
+      background: 'white',
+    },
+  },
+  scrollable: {
+    overflowY: 'auto',
+    width: '100%',
+    paddingBottom: 20,
+  },
+}));
+
+function FeatureListComponent() {
+  const classes = useStyles();
+  const [featureList, setFeatureList] = useState();
+  useEffect(() => {
+    try {
+      getFeatureList();
+    } catch (e) {
+      console.log(e);
+    }
+  });
+
+  function getFeatureList() {
+    MiniApp.miniappUtils
+      .getFeatureList()
+      .then((response) => {
+        setFeatureList(response);
+        console.log('getFeatureList SUCCESS: ', response);
+      })
+      .catch((error) => {
+        console.log('getFeatureList ERROR: ', error);
+      });
+  }
+
+  return (
+    <div className={classes.scrollable}>
+      {featureList &&
+        featureList.map((item) => (
+          <ListItem key={item} disablePadding>
+            <ListItemButton>
+              <ListItemIcon>
+                <Brightness1Icon />
+              </ListItemIcon>
+              <ListItemText primary={item} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+    </div>
+  );
+}
+
+export default FeatureListComponent;

js-miniapp-sample/src/routes.js

@@ -23,6 +23,7 @@ import ShareIcon from '@material-ui/icons/Share';
 import StorageIcon from '@material-ui/icons/Storage';
 import VpnKeyIcon from '@material-ui/icons/VpnKey';
 import ArtTrackIcon from '@material-ui/icons/ArtTrack';
+import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
 
 import Ads from './pages/ads';
 import { CloseConfirmAlert } from './pages/app-close-alert';
@@ -47,6 +48,7 @@ import WebLocation from './pages/web-location';
 import WindowActions from './pages/window-actions';
 import CookieManagerComponent from './pages/cookie-manager';
 import { MiniAppPreferenceComponent } from './pages/miniapp-preferences';
+import FeatureListComponent from './pages/feature-list';
 
 //default root location when using ios
 const iosHomeNavLink = { navLink: '/index.html', label: 'Home' };
@@ -117,6 +119,10 @@ const miniAppPreferenceNavLink = {
   navLink: '/miniapp-preference',
   label: 'MiniApp Preference',
 };
+const miniFeatureListNavLink = {
+  navLink: '/miniapp-feature-list',
+  label: 'Feature List',
+};
 
 const navLinks = [
   iosHomeNavLink,
@@ -145,6 +151,7 @@ const navLinks = [
   universalBridgeNavLink,
   colorThemeNavLink,
   cookieManagerNavLink,
+  miniFeatureListNavLink,
 ];
 
 const homeItem = [
@@ -289,6 +296,12 @@ const appItems = [
     navLink: cookieManagerNavLink.navLink,
     element: <CookieManagerComponent />,
   },
+  {
+    icon: <FormatListNumberedIcon />,
+    label: miniFeatureListNavLink.label,
+    navLink: miniFeatureListNavLink.navLink,
+    element: <FeatureListComponent />,
+  },
 ];
 
 const navItems: Object[] = homeItem.concat(

js-miniapp-sdk/CHANGELOG.md

@@ -3,7 +3,9 @@
 ### 1.20.0 (2024-xx-xx)
 - **Feature:** Added new interfaces `set(key: string, value: string)`, `get(key: string)`, `remove(key: string)`, `clearMiniAppPreferences()` which uses the native storage features like Shared Preferences/User defaults to store anything from MiniApp.
 - **Feature:** Updated HostEnvironmentInfo to have `hostBuildType`, `deviceToken` and `pushToken`
+- **Feature:** Added new interface `miniAppFinishedLoading()` which can be used by miniapp to notify the host app that it has finished loading.
 - **Fix:** Few Contacts with special characters is failed to retrieve, its fixed now
+- **Feature:** Added new interface `getFeatureList()` that will return the list if features supported by the Host and MiniApp SDK.
 
 ### 1.19.0 (2023-11-02)
 - **Feature:** Added new interface `getAllCookies()` to get `CookieInfo` which contains `name` and `value` of the cookie

js-miniapp-sdk/README.md

@@ -144,6 +144,8 @@ Here is the example of manifest. You can also see [it](https://github.com/rakute
 - [Send Analytics](#send-analytics)
 - [Get Cookies](#get-cookies)
 - [MiniApp Storage][#miniapp-storage]
+- [MiniApp Finished Loading](#miniapp-finished-loading)
+- [Get Feature list][#get-feature-list]
 
 
 ### Retrieve a unique ID
@@ -1186,6 +1188,32 @@ import MiniApp from 'js-miniapp-sdk';
   MiniApp.miniappUtils.sendAnalytics(analyticsInfo);
 ```
 
+<div id='miniapp-finished-loading'/>
+
+## MiniApp Finished Loading <small style="color:green;font-size: 12px">Available from v1.20.0</small>
+
+<dl>
+<dd>
+
+**API:** [Platform.miniAppFinishedLoading](api/interfaces/miniapputilsprovider.html#miniAppFinishedLoading)
+
+Using the following interface the Miniapp can notify the host app that it has finished loading.
+
+```javascript
+import MiniApp from 'js-miniapp-sdk';
+
+MiniApp.miniappUtils
+  .miniAppFinishedLoading()
+  .then((response) => {
+    console.log(response);
+  })
+  .catch((miniAppError) => {
+    console.log('miniAppFinishedLoading - Error: ', miniAppError);
+  });
+```
+
+</dd>
+
 <div id='get-cookies'/>
 
 ## Get Cookies from host application <small style="color:green;font-size: 12px">Available from v1.19.0</small>
@@ -1308,6 +1336,29 @@ MiniApp.preferences
 
 ```
 
+
+<div id='get-feature-list'/>
+
+## Get feature list <small style="color:green;font-size: 12px">Available from v1.20.0</small>
+
+This interface will help the MiniApps to get the list of features that is supported by the MiniApp native SDK also with the list of other features that is supported by the Host app
+
+```javascript
+import MiniApp from 'js-miniapp-sdk';
+
+MiniApp.miniappUtils
+  .getFeatureList()
+  .then((response) => {
+    // Array of strings/features that is supported
+    // For eg., ["GET_USERNAME", "IS_DARK_MODE", "GET_ALL_COOKIES"]
+    console.log(response);
+  })
+  .catch((error) => {
+    console.log(error);
+  });
+
+```
+
 ## Advanced Usage
 
 <dl>

js-miniapp-sdk/src/modules/utils.ts

@@ -22,6 +22,12 @@ export interface MiniAppUtilsProvider {
    */
   closeMiniApp(withConfirmation: boolean): Promise<string>;
 
+  /**
+   * Miniapp can notify the host app that it has finished loading using this call.
+   * Host app can implement this interface to perform any other actions after the miniapp has loaded.
+   */
+  miniAppFinishedLoading(): Promise<string>;
+
   /**
    * Interface that is used to get the Color theme used in the Host application
    */
@@ -37,13 +43,21 @@ export interface MiniAppUtilsProvider {
    * @param analyticsInfo Analytics info
    */
   sendAnalytics(analytics: MAAnalyticsInfo): Promise<string>;
+
+  /**
+   * Interface to get list of features supported by the SDK and Host
+   */
+  getFeatureList(): Promise<string[]>;
 }
 
 /** @internal */
 export class MiniAppUtils implements MiniAppUtilsProvider {
   closeMiniApp(withConfirmation: boolean): Promise<string> {
     return getBridge().closeMiniApp(withConfirmation);
   }
+  miniAppFinishedLoading(): Promise<string> {
+    return getBridge().miniAppFinishedLoading();
+  }
   setCloseAlert(alertInfo: CloseAlertInfo): Promise<string> {
     return getBridge().setCloseAlert(alertInfo);
   }
@@ -59,4 +73,7 @@ export class MiniAppUtils implements MiniAppUtilsProvider {
     }
     return Promise.reject('sendAnalytics Error');
   }
+  getFeatureList(): Promise<string[]> {
+    return getBridge().getFeatureList();
+  }
 }