update demo-banking-ui,

03_source/mobile/.prettierrc

@@ -1,6 +1,7 @@
 {
+  "tabWidth": 2,
   "semi": true,
   "singleQuote": true,
   "trailingComma": "es5",
   "printWidth": 100
-}
+}

03_source/mobile/android/app/capacitor.build.gradle

@@ -9,7 +9,12 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
+    implementation project(':capacitor-barcode-scanner')
+    implementation project(':capacitor-clipboard')
+    implementation project(':capacitor-geolocation')
+    implementation project(':capacitor-google-maps')
     implementation project(':capacitor-preferences')
+    implementation project(':capacitor-share')
 
 }
 

03_source/mobile/android/capacitor.settings.gradle

@@ -2,5 +2,20 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
 
+include ':capacitor-barcode-scanner'
+project(':capacitor-barcode-scanner').projectDir = new File('../node_modules/@capacitor/barcode-scanner/android')
+
+include ':capacitor-clipboard'
+project(':capacitor-clipboard').projectDir = new File('../node_modules/@capacitor/clipboard/android')
+
+include ':capacitor-geolocation'
+project(':capacitor-geolocation').projectDir = new File('../node_modules/@capacitor/geolocation/android')
+
+include ':capacitor-google-maps'
+project(':capacitor-google-maps').projectDir = new File('../node_modules/@capacitor/google-maps/android')
+
 include ':capacitor-preferences'
 project(':capacitor-preferences').projectDir = new File('../node_modules/@capacitor/preferences/android')
+
+include ':capacitor-share'
+project(':capacitor-share').projectDir = new File('../node_modules/@capacitor/share/android')

03_source/mobile/dev.sh

@@ -1,9 +1,9 @@
 #!/usr/bin/env bash
 
 while true; do
-  npm i -D
+  yarn -D
 
-  npm run dev
+  yarn run dev
 
   echo "restarting..."
   sleep 1

03_source/mobile/ios/App/Podfile

@@ -11,7 +11,12 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
+  pod 'CapacitorBarcodeScanner', :path => '../../node_modules/@capacitor/barcode-scanner'
+  pod 'CapacitorClipboard', :path => '../../node_modules/@capacitor/clipboard'
+  pod 'CapacitorGeolocation', :path => '../../node_modules/@capacitor/geolocation'
+  pod 'CapacitorGoogleMaps', :path => '../../node_modules/@capacitor/google-maps'
   pod 'CapacitorPreferences', :path => '../../node_modules/@capacitor/preferences'
+  pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
 end
 
 target 'App' do

03_source/mobile/package.json

@@ -7,24 +7,36 @@
   "private": true,
   "dependencies": {
     "@capacitor/android": "7.0.1",
+    "@capacitor/barcode-scanner": "^2.0.3",
+    "@capacitor/clipboard": "^7.0.1",
     "@capacitor/core": "^7.0.0",
+    "@capacitor/geolocation": "^7.1.2",
+    "@capacitor/google-maps": "^7.0.2",
     "@capacitor/ios": "7.0.1",
     "@capacitor/preferences": "^7.0.0",
+    "@capacitor/share": "^7.0.1",
     "@hookform/resolvers": "^4.1.3",
     "@ionic/react": "^8.5.0",
     "@ionic/react-router": "^8.5.0",
     "@mdx-js/react": "^3.1.0",
+    "@react-hook/window-size": "^3.1.1",
     "@types/leaflet": "^1.9.17",
     "@types/react-redux": "^7.1.34",
     "axios": "^1.9.0",
     "date-fns": "^2.25.0",
     "ionicons": "^7.1.2",
     "leaflet": "^1.9.4",
+    "pigeon-maps": "^0.22.1",
+    "pullstate": "^1",
     "react": "19.0.0",
+    "react-color": "^2.19.3",
+    "react-confetti": "^6.4.0",
     "react-dom": "19.0.0",
     "react-hook-form": "^7.55.0",
     "react-leaflet": "^5.0.0",
     "react-markdown": "^10.1.0",
+    "react-qr-code": "^2.0.15",
+    "react-qr-reader": "^3.0.0-beta-1",
     "react-redux": "^9.2.0",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
@@ -32,12 +44,13 @@
     "react-use": "^17.6.0",
     "reselect": "^4.0.0",
     "sass": "^1.85.1",
-    "swiper": "^9.1.1",
+    "swiper": "^11.2.8",
+    "use-sound": "^5.0.0",
     "zod": "^3.24.2"
   },
   "scripts": {
     "start": "npm run dev",
-    "dev": "vite --host 0.0.0.0 --cors",
+    "dev": "vite --force --host 0.0.0.0 --cors",
     "ionic:serve": "vite",
     "ionic:build": "tsc && vite build",
     "build": "tsc && vite build",
@@ -64,7 +77,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.3.4",
     "lint-staged": "^13.2.0",
-    "prettier": "^2.8.6",
+    "prettier": "^3.5.3",
     "typescript": "^5.8.2",
     "vite": "^6.2.0"
   },

03_source/mobile/public/assets/DemoBankingUi/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/public/assets/DemoDictionaryApp/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/public/assets/DemoQuizApp/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/public/assets/DemoRecipeApp/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/public/assets/DemoShopAppUi/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/public/assets/DemoSlidingProfile/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/public/assets/ScoreBoard/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/public/assets/WeatherDemo/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/public/assets/react-shop/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/src/App.tsx

@@ -64,6 +64,39 @@ import ServiceAgreement from './pages/ServiceAgreement';
 import paths from './paths';
 import PrivacyAgreement from './pages/PrivacyAgreement';
 import AppRoute from './AppRoute';
+//
+// TODO: resume DemoReactShop
+// import DemoReactShop from './pages/DemoReactShop';
+import DemoWeatherApp from './pages/DemoWeatherApp';
+import DemoClubHouse from './pages/DemoClubHouse';
+import DemoScoreBoard from './pages/DemoScoreBoard';
+import DemoQuoteApp from './pages/DemoQuoteApp';
+import DemoQrScanner from './pages/DemoQrScanner';
+// DemoShopAppUi
+import DemoShopAppUi from './pages/DemoShopAppUi';
+// DemoDictionaryApp
+import DemoDictionaryApp from './pages/DemoDictionaryApp';
+// demo-recipe-app
+import DemoRecipeApp from './pages/DemoRecipeApp';
+
+// DemoSlidingProfile
+import DemoSlidingProfile from './pages/DemoSlidingProfile';
+
+// DemoQuizApp
+import DemoQuizApp from './pages/DemoQuizApp';
+import DemoBlogPostUi from './pages/DemoBlogPostUi';
+import DemoReactTravelApp from './pages/DemoReactTravelApp';
+import DemoPinterestFloatingTabBar from './pages/DemoPinterestFloatingTabBar';
+import DemoRestaurantFinder from './pages/DemoRestaurantFinder';
+import DemoReactOverlayHooks from './pages/DemoReactOverlayHooks';
+import DemoReactSwitchTabs from './pages/DemoReactSwitchTabs';
+import DemoReactPollApp from './pages/DemoReactPollApp';
+import DemoReactWhatsAppClone from './pages/DemoReactWhatsAppClone';
+import Demo2FaExample from './pages/Demo2FaExample';
+import DemoAccordionTutorial from './pages/DemoAccordionTutorial';
+import DemoBankingUi from './pages/DemoBankingUi';
+import DemoCapacitorGoogleMapsTutorial from './pages/DemoCapacitorGoogleMapsTutorial';
+import DemoColorTutorial from './pages/DemoColorTutorial';
 
 setupIonicReact();
 
@@ -119,10 +152,100 @@ const IonicApp: React.FC<IonicAppProps> = ({
 
             <AppRoute />
 
-            {/*  */}
             <Route path="/tabs" render={() => <MainTabs />} />
-
+            <Route path={paths.DEMO_WEATHER_APP} render={() => <DemoWeatherApp />} />
             {/*  */}
+            {/*  */}
+            {/*  */}
+            {/*  */}
+            {/*  */}
+            {/*  */}
+            {/*  */}
+            {/*  */}
+            {/*  */}
+
+            <Route path={paths.DEMO_ACCORDION_TUTORIAL} render={() => <DemoAccordionTutorial />} />
+            {/*  */}
+            {/*  */}
+            {/*  */}
+            {/*  */}
+            {/*  */}
+            {/*  */}
+
+            <Route path={paths.DEMO_BANKING_UI} render={() => <DemoBankingUi />} />
+            <Route
+              path={paths.DEMO_CAPACITOR_GOOGLE_MAPS_TUTORIAL}
+              render={() => <DemoCapacitorGoogleMapsTutorial />}
+            />
+
+            <Route path={paths.DEMO_COLOR_TUTORIAL} render={() => <DemoColorTutorial />} />
+
+            {/*
+              <Route path={paths.DEMO_ECOMMERCE_EXAMPLE} render={() => <DemoEcommerceExample />} />
+              <Route path={paths.DEMO_FACEBOOK_CLONE} render={() => <DemoFacebookClone />} />
+              <Route path={paths.DEMO_FAST_FOOD_APP} render={() => <DemoFastFoodApp />} />
+              <Route path={paths.DEMO_FLOATING_TABS} render={() => <DemoFloatingTabs />} />
+              <Route path={paths.DEMO_INSTAGRAM_CLONE} render={() => <DemoInstagramClone />} />
+              <Route path={paths.DEMO_KANBAN_BOARD} render={() => <DemoKanbanBoard />} />
+              <Route path={paths.DEMO_ORDERING_APP} render={() => <DemoOrderingApp />} />
+              <Route path={paths.DEMO_PROFILE_EXAMPLE} render={() => <DemoProfileExample />} />
+              <Route path={paths.DEMO_PULLSTATE_TUTORIAL} render={() => <DemoPullstateTutorial />} />
+              <Route path={paths.DEMO_REACT_ADD_TO_CART} render={() => <DemoReactAddToCart />} />
+              <Route path={paths.DEMO_REACT_CALCULATOR} render={() => <DemoReactCalculator />} />
+              <Route path={paths.DEMO_REACT_DRAWING_CANVAS} render={() => <DemoReactDrawingCanvas />} />
+              <Route path={paths.DEMO_REACT_HOOK_FORM_EXAMPLE} render={() => <DemoReactHookFormExample />} />
+              <Route path={paths.DEMO_REACT_ITEM_LIST} render={() => <DemoReactItemList />} />
+              <Route path={paths.DEMO_REACT_LIFECYCLES} render={() => <DemoReactLifecycles />} />
+              <Route path={paths.DEMO_REACT_LOGIN} render={() => <DemoReactLogin />} />
+              <Route path={paths.DEMO_REACT_MARVEL_APP} render={() => <DemoReactMarvelApp />} />
+              <Route path={paths.DEMO_REACT_MOVIE_APP_WITH_ALGOLIA} render(() => <DemoReactMovieAppWithAlgolia />} />
+              <Route path={paths.DEMO_REACT_NOTES} render={() => <DemoReactNotes />} />
+              <Route path={paths.DEMO_REACT_ONBOARDING_UI} render={() => <DemoReactOnboardingUI />} />
+              <Route path={paths.DEMO_REACT_PROFILE_DASHBOARD_UI} render(() => <DemoReactProfileDashboardUI />} />
+              <Route path={paths.DEMO_REACT_QR_CODE} render={() => <DemoReactQRCode />} />
+              <Route path={paths.DEMO_REACT_QUOTES} render(() => <DemoReactQuotes />} />
+              <Route path={paths.DEMO_REACT_SHOP_UI} render(() => <DemoReactShopUI />} />
+              <Route path={paths.DEMO_REACT_TABS_MENUS_CUSTOM} render(() => <DemoReactTabsMenusCustom />} />
+              <Route path={paths.DEMO_REACT_THEME_SWITCHER} render(() => <DemoReactThemeSwitcher />} />
+              <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render(() => <DemoReactWhatsAppClone />} />
+              <Route path={paths.DEMO_SKELETON_TEXT} render(() => <DemoSkeletonText />} />
+              <Route path={paths.DEMO_STICKY_BOTTOM_SHEET_EXAMPLE} render(() => <DemoStickyBottomSheetExample />} />
+              <Route path={paths.DEMO_STORAGE_EXAMPLE} render(() => <DemoStorageExample />} />
+              <Route path={paths.DEMO_SWIPERJS_TUTORIAL} render(() => <DemoSwiperjsTutorial />} />
+              <Route path={paths.DEMO_WEATHER_APP_UI} render(() => <DemoWeatherAppUI />} />
+               */}
+
+            <Route path={paths.DEMO_2FA_EXAMPLE} render={() => <Demo2FaExample />} />
+
+            {/* have problemx` */}
+            {/* <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render={() => <DemoReactWhatsAppClone />} /> */}
+
+            <Route path={paths.DEMO_REACT_POLL_APP} render={() => <DemoReactPollApp />} />
+
+            <Route path={paths.DEMO_BLOG_POST_UI} render={() => <DemoBlogPostUi />} />
+            <Route path={paths.DEMO_CLUB_HOUSE} render={() => <DemoClubHouse />} />
+            <Route path={paths.DEMO_DICTIONARY_APP} render={() => <DemoDictionaryApp />} />
+            <Route
+              path={paths.DEMO_PINTEREST_FLOATING_TAB_BAR}
+              render={() => <DemoPinterestFloatingTabBar />}
+            />
+            <Route path={paths.DEMO_QR_SCANNER} render={() => <DemoQrScanner />} />
+            <Route path={paths.DEMO_QUIZ_APP} render={() => <DemoQuizApp />} />
+            <Route path={paths.DEMO_QUOTE_APP} render={() => <DemoQuoteApp />} />
+            <Route path={paths.DEMO_REACT_OVERLAY_HOOKS} render={() => <DemoReactOverlayHooks />} />
+            <Route path={paths.DEMO_REACT_POLL_APP} render={() => <DemoReactPollApp />} />
+
+            {/* TODO: resume DemoReactShop */}
+            {/* <Route path={paths.DEMO_REACT_SHOP} render={() => <DemoReactShop />} /> */}
+
+            <Route path={paths.DEMO_REACT_SWITCH_TABS} render={() => <DemoReactSwitchTabs />} />
+            <Route path={paths.DEMO_REACT_TRAVEL_APP} render={() => <DemoReactTravelApp />} />
+            <Route path={paths.DEMO_RECIPE_APP} render={() => <DemoRecipeApp />} />
+            <Route path={paths.DEMO_RESTAURANT_FINDER} render={() => <DemoRestaurantFinder />} />
+            <Route path={paths.DEMO_SCORE_BOARD} render={() => <DemoScoreBoard />} />
+            <Route path={paths.DEMO_SHOP_APP_UI} render={() => <DemoShopAppUi />} />
+            <Route path={paths.DEMO_SLIDING_PROFILE} render={() => <DemoSlidingProfile />} />
+
             <Route path="/account" component={Account} />
             <Route path="/login" component={Login} />
             <Route path="/mylogin" component={MyLogin} />
@@ -131,7 +254,6 @@ const IonicApp: React.FC<IonicAppProps> = ({
             <Route path="/support" component={Support} />
             <Route path="/tutorial" component={Tutorial} />
 
-            {/*  */}
             <Route
               path="/logout"
               render={() => {

03_source/mobile/src/AppRoute.tsx

@@ -7,14 +7,12 @@ import NotImplemented from './pages/NotImplemented';
 import EventDetail from './pages/EventDetail';
 import MemberProfile from './pages/MemberProfile';
 import paths from './paths';
-import Helloworld from './pages/Helloworld';
 import Settings from './pages/Settings';
 import ChangeLanguage from './pages/ChangeLanguage';
 import ServiceAgreement from './pages/ServiceAgreement';
 import PrivacyAgreement from './pages/PrivacyAgreement';
 // import OrderDetails from './pages/OrderDetail';
 import OrderDetail from './pages/OrderDetail';
-import SpeakerDetail from './pages/SpeakerDetail';
 
 const AppRoute: React.FC = () => {
   return (

03_source/mobile/src/TabAppRoute.tsx

@@ -10,6 +10,9 @@ import Favourites from './pages/Favourites';
 import MyProfile from './pages/MyProfile';
 import EventList from './pages/EventList';
 import Helloworld from './pages/Helloworld';
+// import WeatherDemo from './pages/WeatherDemo/Tab1';
+import DemoList from './pages/DemoList';
+// import DemoReactShop from './pages/DemoReactShop';
 
 const TabAppRoute: React.FC = () => {
   return (
@@ -33,6 +36,12 @@ const TabAppRoute: React.FC = () => {
 
       {/*  */}
       <Route path={paths.PROFILE} render={() => <MyProfile />} exact={true} />
+
+      {/*  */}
+      <Route path="/tabs/demo-list" render={() => <DemoList />} exact={true} />
+
+      {/*  */}
+      <Route path="/tabs/helloworld" render={() => <Helloworld />} exact={true} />
     </>
   );
 };

03_source/mobile/src/data/user/user.actions.ts

@@ -15,13 +15,18 @@ import { endpoints } from '../../pages/MyLogin/endpoints';
 
 export const loadUserData = () => async (dispatch: React.Dispatch<any>) => {
   dispatch(setLoading(true));
+
   const data = await getUserData();
   dispatch(setData(data));
+
   dispatch(setLoading(false));
 };
 
 export const setLoading = (isLoading: boolean) =>
-  ({ type: 'set-user-loading', isLoading } as const);
+  ({
+    type: 'set-user-loading',
+    isLoading,
+  } as const);
 
 export const setData = (data: Partial<UserState>) =>
   ({
@@ -30,6 +35,7 @@ export const setData = (data: Partial<UserState>) =>
   } as const);
 
 export const logoutUser = () => async (dispatch: React.Dispatch<any>) => {
+  //
   await setIsLoggedInData(false);
   dispatch(setUsername());
 };
@@ -44,6 +50,8 @@ export const setIsLoggedIn = (loggedIn: boolean) => async (dispatch: React.Dispa
 
 export const setUsername = (username?: string) => async (dispatch: React.Dispatch<any>) => {
   await setUsernameData(username);
+  console.log('setUsername triggered');
+
   return {
     type: 'set-username',
     username,
@@ -52,6 +60,7 @@ export const setUsername = (username?: string) => async (dispatch: React.Dispatc
 
 export const setAccessToken = (token?: string) => async (dispatch: React.Dispatch<any>) => {
   await setAccessTokenData(token);
+
   return {
     type: 'set-access-token',
     token,
@@ -120,5 +129,4 @@ export type UserActions =
   | ActionType<typeof setHasSeenTutorial>
   | ActionType<typeof setDarkMode>
   | ActionType<typeof setAccessToken>
-  // | ActionType<typeof setSession>
   | ActionType<typeof checkUserSession>;

03_source/mobile/src/data/user/user.reducer.ts

@@ -15,11 +15,9 @@ export function userReducer(state: UserState, action: UserActions): UserState {
       return { ...state, darkMode: action.darkMode };
     case 'set-is-loggedin':
       return { ...state, isLoggedin: action.loggedIn };
+    case 'set-access-token':
+      return { ...state, token: action.token };
     case 'check-user-session':
       return { ...state, isSessionValid: action.sessionValid };
-    // case 'set-active-session':
-    //   return { ...state, session: action.session };
-    // case 'set-access-token':
-    //   return { ...state, token: action.token };
   }
 }

03_source/mobile/src/data/user/user.state.ts

@@ -1,9 +1,9 @@
 export interface UserState {
-  isLoggedin: boolean;
-  username?: string;
-  darkMode: boolean;
-  hasSeenTutorial: boolean;
   loading: boolean;
+  username?: string;
+  hasSeenTutorial: boolean;
+  darkMode: boolean;
+  isLoggedin: boolean;
   isSessionValid: boolean;
   session?: any;
   token?: string;

03_source/mobile/src/pages/Demo2FaExample/AppPages/Tab1.jsx

@@ -0,0 +1,96 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+
+import { Geolocation } from '@capacitor/geolocation';
+import { useEffect, useState } from 'react';
+import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
+import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
+import { CurrentWeather } from '../TestComponents/CurrentWeather';
+
+function Tab1() {
+  const router = useIonRouter();
+
+  const [currentWeather, setCurrentWeather] = useState(false);
+
+  useEffect(() => {
+    getCurrentPosition();
+  }, []);
+
+  const getCurrentPosition = async () => {
+    setCurrentWeather(false);
+    const coordinates = await Geolocation.getCurrentPosition();
+    getAddress(coordinates.coords);
+  };
+
+  const getAddress = async (coords) => {
+    const query = `${coords.latitude},${coords.longitude}`;
+    const response = await fetch(
+      `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${query}`
+    );
+
+    const data = await response.json();
+    console.log(data);
+    setCurrentWeather(data);
+  };
+
+  // const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>My Weather</IonTitle>
+
+          <IonButtons slot="end">
+            <IonButton onClick={() => getCurrentPosition()}>
+              <IonIcon icon={refreshOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Dashboard</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonRow className="ion-margin-start ion-margin-end ion-justify-content-center ion-text-center">
+          <IonCol size="12">
+            <h4>Here's your location based weather</h4>
+          </IonCol>
+        </IonRow>
+
+        <div style={{ marginTop: '-1.5rem' }}>
+          {currentWeather ? (
+            <CurrentWeather currentWeather={currentWeather} />
+          ) : (
+            <SkeletonDashboard />
+          )}
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Tab1;

03_source/mobile/src/pages/Demo2FaExample/AppPages/Tab2.jsx

@@ -0,0 +1,81 @@
+import {
+  IonButton,
+  IonCol,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonRow,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { useState } from 'react';
+import { CurrentWeather } from '../TestComponents/CurrentWeather';
+
+function Tab2() {
+  const [search, setSearch] = useState('');
+  const [currentWeather, setCurrentWeather] = useState(false);
+
+  const performSearch = async () => {
+    getAddress(search);
+  };
+
+  const getAddress = async (city) => {
+    const response = await fetch(
+      `https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${city}&aqi=no`
+    );
+    const data = await response.json();
+
+    if (data && data.current && data.location) {
+      setCurrentWeather(data);
+    }
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Search</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Search</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        <IonRow className="ion-justify-content-center ion-margin-top ion-align-items-center">
+          <IonCol size="7">
+            <IonSearchbar
+              placeholder="Try 'London'"
+              animated
+              value={search}
+              onIonChange={(e) => setSearch(e.target.value)}
+            />
+          </IonCol>
+
+          <IonCol size="5">
+            <IonButton
+              expand="block"
+              className="ion-margin-start ion-margin-end"
+              onClick={performSearch}
+            >
+              Search
+            </IonButton>
+          </IonCol>
+        </IonRow>
+
+        <div style={{ marginTop: '-0.8rem' }}>
+          {currentWeather ? (
+            <CurrentWeather currentWeather={currentWeather} />
+          ) : (
+            <h3 className="ion-text-center">Your search result will appear here</h3>
+          )}
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default Tab2;

03_source/mobile/src/pages/Demo2FaExample/TestComponents/CurrentWeather/WeatherProperty.tsx

@@ -0,0 +1,62 @@
+import { IonCardSubtitle, IonCol, IonIcon, IonNote, IonRow } from '@ionic/react';
+import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
+import { useEffect, useState } from 'react';
+
+export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWeather: any }) => {
+  const [property, setProperty] = useState(false);
+
+  const properties = {
+    wind: {
+      isIcon: false,
+      icon: '/assets/WeatherDemo/wind.png',
+      alt: 'wind',
+      label: 'Wind',
+      value: `${currentWeather.current.wind_mph}mph`,
+    },
+    feelsLike: {
+      isIcon: true,
+      icon: thermometerOutline,
+      alt: 'feels like',
+      label: 'Feels like',
+      value: `${currentWeather.current.feelslike_c}°C`,
+    },
+    indexUV: {
+      isIcon: true,
+      icon: sunnyOutline,
+      alt: 'index uv',
+      label: 'Index UV',
+      value: currentWeather.current.uv,
+    },
+    pressure: {
+      isIcon: true,
+      icon: pulseOutline,
+      alt: 'pressure',
+      label: 'Pressure',
+      value: `${currentWeather.current.pressure_mb} mbar`,
+    },
+  };
+
+  useEffect(() => {
+    setProperty(properties[type]);
+  }, [type]);
+
+  return (
+    <IonCol size="6">
+      <IonRow className="ion-justify-content-center ion-align-items-center">
+        <IonCol size="3">
+          {!property.isIcon && (
+            <img alt={property.alt} src={property.icon} height="32" width="32" />
+          )}
+          {property.isIcon && (
+            <IonIcon icon={property.icon} color="medium" style={{ fontSize: '2rem' }} />
+          )}
+        </IonCol>
+
+        <IonCol size="9">
+          <IonCardSubtitle>{property.label}</IonCardSubtitle>
+          <IonNote>{property.value}</IonNote>
+        </IonCol>
+      </IonRow>
+    </IonCol>
+  );
+};

03_source/mobile/src/pages/Demo2FaExample/TestComponents/CurrentWeather/index.tsx

@@ -0,0 +1,48 @@
+import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
+import { WeatherProperty } from './WeatherProperty';
+
+export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
+  <IonGrid>
+    <IonCard>
+      <IonCardContent className="ion-text-center">
+        <IonText color="primary">
+          <h1>
+            {currentWeather.location.region},{' '}
+            <span style={{ color: 'gray' }}>{currentWeather.location.country}</span>
+          </h1>
+        </IonText>
+
+        <div className="ion-margin-top">
+          <img
+            alt="condition"
+            src={currentWeather.current.condition.icon.replace('//', 'https://')}
+          />
+
+          <IonText color="dark">
+            <h1 style={{ fontWeight: 'bold' }}>{currentWeather.current.condition.text}</h1>
+          </IonText>
+
+          <IonText color="medium">
+            <p>{new Date(currentWeather.location.localtime).toDateString()}</p>
+          </IonText>
+        </div>
+
+        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
+          {currentWeather.current.temp_c}&#8451;
+        </IonCardTitle>
+
+        <IonGrid className="ion-margin-top">
+          <IonRow>
+            <WeatherProperty type="wind" currentWeather={currentWeather} />
+            <WeatherProperty type="feelsLike" currentWeather={currentWeather} />
+          </IonRow>
+
+          <IonRow className="ion-margin-top">
+            <WeatherProperty type="indexUV" currentWeather={currentWeather} />
+            <WeatherProperty type="pressure" currentWeather={currentWeather} />
+          </IonRow>
+        </IonGrid>
+      </IonCardContent>
+    </IonCard>
+  </IonGrid>
+);

03_source/mobile/src/pages/Demo2FaExample/TestComponents/SkeletonDashboard/index.tsx

@@ -0,0 +1,117 @@
+import {
+  IonCard,
+  IonCardContent,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCol,
+  IonGrid,
+  IonIcon,
+  IonNote,
+  IonRow,
+  IonSkeletonText,
+  IonText,
+  IonThumbnail,
+} from '@ionic/react';
+import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
+
+export const SkeletonDashboard = () => (
+  <IonGrid>
+    <IonCard>
+      <IonCardContent className="ion-text-center">
+        <IonText color="primary">
+          <h1>
+            <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+          </h1>
+        </IonText>
+
+        <div className="ion-margin-top">
+          <IonThumbnail>
+            <IonSkeletonText animated style={{ width: '2rem', height: '2rem' }} />
+          </IonThumbnail>
+
+          <IonText color="dark">
+            <h1 style={{ fontWeight: 'bold' }}>
+              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+            </h1>
+          </IonText>
+
+          <IonText color="medium">
+            <p>
+              <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+            </p>
+          </IonText>
+        </div>
+
+        <IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
+          <IonSkeletonText animated style={{ height: '3rem', width: '30%', textAlign: 'center' }} />
+        </IonCardTitle>
+
+        <IonGrid className="ion-margin-top">
+          <IonRow>
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Wind</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <IonIcon icon={thermometerOutline} color="medium" style={{ fontSize: '2rem' }} />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Feels like</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className="ion-margin-top">
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <IonIcon icon={sunnyOutline} color="medium" style={{ fontSize: '2rem' }} />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Index UV</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+
+            <IonCol size="6">
+              <IonRow className="ion-justify-content-center ion-align-items-center">
+                <IonCol size="3">
+                  <IonIcon icon={pulseOutline} color="medium" style={{ fontSize: '2rem' }} />
+                </IonCol>
+
+                <IonCol size="9">
+                  <IonCardSubtitle>Pressure</IonCardSubtitle>
+                  <IonNote>
+                    <IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
+                  </IonNote>
+                </IonCol>
+              </IonRow>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonCardContent>
+    </IonCard>
+  </IonGrid>
+);

03_source/mobile/src/pages/Demo2FaExample/components/Keypad.module.scss

@@ -0,0 +1,5 @@
+.keypad {
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+}

03_source/mobile/src/pages/Demo2FaExample/components/Keypad.tsx

@@ -0,0 +1,118 @@
+import { IonRow } from "@ionic/react";
+import styles from "./Keypad.module.scss";
+import KeypadButton from "./KeypadButton";
+
+const Keypad = (props: any): JSX.Element => {
+  const { activeIndex, handleClick, handleRemove, amount, correct } = props;
+
+  const keypadButtons = [
+    [
+      {
+        value: "1",
+        handleClick: () => handleClick(activeIndex, 1),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "2",
+        handleClick: () => handleClick(activeIndex, 2),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "3",
+        handleClick: () => handleClick(activeIndex, 3),
+        small: false,
+        remove: false,
+      },
+    ],
+    [
+      {
+        value: "4",
+        handleClick: () => handleClick(activeIndex, 4),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "5",
+        handleClick: () => handleClick(activeIndex, 5),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "6",
+        handleClick: () => handleClick(activeIndex, 6),
+        small: false,
+        remove: false,
+      },
+    ],
+    [
+      {
+        value: "7",
+        handleClick: () => handleClick(activeIndex, 7),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "8",
+        handleClick: () => handleClick(activeIndex, 8),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "9",
+        handleClick: () => handleClick(activeIndex, 9),
+        small: false,
+        remove: false,
+      },
+    ],
+    [
+      {
+        value: "Resend",
+        handleClick: () => handleClick(activeIndex, 1),
+        small: true,
+        remove: false,
+      },
+      {
+        value: "0",
+        handleClick: () => handleClick(activeIndex, 2),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "",
+        handleClick: () => handleRemove(),
+        small: true,
+        remove: true,
+      },
+    ],
+  ];
+
+  return (
+    <div className={`${styles.keypad}`}>
+      {keypadButtons.map((keypadRow, index) => {
+        const isDisabled = parseInt(activeIndex) === parseInt(amount);
+
+        return (
+          <IonRow key={`keypadRow_${index}`}>
+            {keypadRow.map((button, index2) => {
+              return (
+                <KeypadButton
+                  correct={correct}
+                  isDisabled={isDisabled}
+                  key={`keypadButton_${index2}`}
+                  value={button.value}
+                  handleClick={button.handleClick}
+                  small={button.small}
+                  remove={button.remove}
+                />
+              );
+            })}
+          </IonRow>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Keypad;

03_source/mobile/src/pages/Demo2FaExample/components/KeypadButton.module.scss

@@ -0,0 +1,30 @@
+.logo {
+  height: 4rem;
+  width: auto;
+}
+
+.keypadButton {
+  --background: none;
+  --color: black;
+  font-size: 2rem;
+  font-weight: 700;
+  --outline: none;
+  --border: none;
+  --box-shadow: none;
+  padding: none;
+  margin: none;
+  --background-hover: rgb(245, 245, 245) !important;
+  --background-focused: rgb(245, 245, 245) !important;
+  --background-activated: rgb(245, 245, 245) !important;
+}
+
+.smallKeypadButton {
+  font-size: 1.4rem;
+  margin-top: 1rem;
+}
+
+.keypad {
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+}

03_source/mobile/src/pages/Demo2FaExample/components/KeypadButton.tsx

@@ -0,0 +1,31 @@
+import { IonButton, IonCol, IonIcon } from "@ionic/react";
+import { backspaceOutline } from "ionicons/icons";
+import styles from "./KeypadButton.module.scss";
+
+const KeypadButton = (props: any): JSX.Element => {
+  const {
+    small,
+    value,
+    remove,
+    handleClick,
+    isDisabled = false,
+    correct,
+  } = props;
+
+  return (
+    <IonCol size="4" className={styles.keypadButton}>
+      <IonButton
+        disabled={(!small || correct) && isDisabled}
+        className={`${styles.keypadButton} ${
+          small && styles.smallKeypadButton
+        }`}
+        onClick={handleClick}
+      >
+        {!remove && value}
+        {remove && <IonIcon icon={backspaceOutline} />}
+      </IonButton>
+    </IonCol>
+  );
+};
+
+export default KeypadButton;

03_source/mobile/src/pages/Demo2FaExample/components/KeypadInput.module.scss

@@ -0,0 +1,38 @@
+.keypadInput {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  font-size: 2.5rem;
+  width: 100%;
+  min-height: 2.5rem;
+  background-color: rgb(245, 245, 245);
+  border-radius: 4px;
+  color: rgb(207, 207, 207);
+  transition: 0.2s linear;
+}
+
+.active {
+  background-color: rgba(26, 150, 251, 0.2);
+  border: 0 !important;
+  color: white !important;
+  transition: 0.2s linear;
+}
+
+.filled {
+  color: rgb(151, 151, 151);
+  transition: 0.2s linear;
+}
+
+.incorrect {
+  background-color: rgba(251, 26, 26, 0.2);
+  color: rgb(218, 67, 67);
+  transition: 0.2s linear;
+}
+
+.correct {
+  background-color: rgba(26, 251, 120, 0.2);
+  color: rgb(67, 218, 112);
+  transition: 0.2s linear;
+}

03_source/mobile/src/pages/Demo2FaExample/components/KeypadInput.tsx

@@ -0,0 +1,28 @@
+import { IonCol } from "@ionic/react";
+import styles from "./KeypadInput.module.scss";
+
+const KeypadInput = (props: any): JSX.Element => {
+  const {
+    value,
+    isActive = false,
+    isFilled = false,
+    incorrect,
+    correct,
+  } = props;
+
+  return (
+    <IonCol size="2">
+      <div
+        className={`${styles.keypadInput} ${isActive && styles.active} ${
+          isFilled && styles.filled
+        } ${incorrect && styles.incorrect} ${correct && styles.correct}`}
+        onClick={props.handleChange}
+      >
+        {value}
+        {!isFilled && "0"}
+      </div>
+    </IonCol>
+  );
+};
+
+export default KeypadInput;

03_source/mobile/src/pages/Demo2FaExample/components/KeypadInputs.tsx

@@ -0,0 +1,50 @@
+import { IonRow } from "@ionic/react";
+import { useEffect, useRef } from "react";
+import KeypadInput from "./KeypadInput";
+
+const KeypadInputs = (props: any): JSX.Element => {
+  const { values, activeIndex, incorrect, correct } = props;
+  const keypadRef = useRef<HTMLIonRowElement>(null);
+
+  useEffect(() => {
+    if (incorrect && keypadRef.current) {
+      keypadRef.current.classList.add("incorrect");
+
+      setTimeout(() => {
+        if (keypadRef.current) {
+          keypadRef.current.classList.remove("incorrect");
+        }
+      }, 1000);
+    }
+  }, [incorrect]);
+
+  useEffect(() => {
+    if (correct) {
+      if (keypadRef.current) {
+        keypadRef.current.classList.add("correct");
+      }
+    }
+  }, [correct]);
+
+  return (
+    <IonRow ref={keypadRef} className="ion-justify-content-center">
+      {values.map((value: string, index: number) => {
+        const isActive = parseInt(index.toString()) === parseInt(activeIndex);
+        const isFilled = value !== "" ? true : false;
+
+        return (
+          <KeypadInput
+            correct={correct}
+            incorrect={incorrect}
+            isFilled={isFilled}
+            isActive={isActive}
+            value={value}
+            placeholder="0"
+          />
+        );
+      })}
+    </IonRow>
+  );
+};
+
+export default KeypadInputs;