Insert ReactJS app from local

mobile/App.tsx

@@ -20,17 +20,21 @@ import {SafeAreaView, Text} from 'react-native';
 // }
 
 const App = () => {
-  const uri = 'https://unsafe2.robosats.com'
+  // Webview with local html/js in a single location for andrid/iOS
+  // https://yelotofu.com/react-native-load-local-static-site-inside-webview-2b93eb1c4225
+  const htmlPath = "file:///android_asset/Web.bundle/index.html";
+  const uri = 'https://robosats.onion.moe'
+  const onion = 'http://robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion'
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <WebView
         source={{
-          uri: uri,
+          uri: 'uri',
         }}
         javaScriptEnabled={true}
         domStorageEnabled={true}
         sharedCookiesEnabled={true}
-        originWhitelist={[uri]}
+        originWhitelist={['*']} //originWhitelist={[uri,uri2]}
         scalesPageToFit={true}
         startInLoadingState={true}
         mixedContentMode={"always"}
@@ -43,6 +47,7 @@ const App = () => {
         mediaPlaybackRequiresUserAction={false}
         allowsLinkPreview={false}
         renderLoading={() => <Text>Loading RoboSats</Text>}
+        onError={(syntheticEvent) => <Text>{syntheticEvent}</Text>}
       />
     </SafeAreaView>
   );

mobile/android/app/build.gradle

@@ -133,6 +133,10 @@ android {
 
     compileSdkVersion rootProject.ext.compileSdkVersion
     
+    sourceSets { 
+        main { assets.srcDirs = ['src/main/assets', '../../html'] } 
+    }
+    
     defaultConfig {
         applicationId "com.robosats"
         minSdkVersion rootProject.ext.minSdkVersion

mobile/html/Web.bundle/css/fonts.css

@@ -0,0 +1,252 @@
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-1.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-2.woff2) format('woff2');
+    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-3.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-4.woff2) format('woff2');
+    unicode-range: U+0370-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-5.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-6.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-7.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-8.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-9.woff2) format('woff2');
+    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-10.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-11.woff2) format('woff2');
+    unicode-range: U+0370-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-12.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-13.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-14.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-15.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-16.woff2) format('woff2');
+    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-17.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-18.woff2) format('woff2');
+    unicode-range: U+0370-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-19.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-20.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-21.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-22.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-23.woff2) format('woff2');
+    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-24.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-25.woff2) format('woff2');
+    unicode-range: U+0370-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-26.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-27.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/static/css/fonts/roboto-28.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }

mobile/html/Web.bundle/css/index.css

@@ -0,0 +1,167 @@
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto';
+}
+
+#main {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.appCenter {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%) translate(0,-20px);
+}
+
+.alertUnsafe{
+  position: absolute;
+  width: 100%;
+  z-index: 9999;
+}
+
+.hideAlertButton{
+  position: fixed;
+}
+
+.clickTrough{
+  height: 50px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* No arrows on numeric inputs */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+
+.bottomBar {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 40px;
+}
+
+.amboss{
+  fill:url(#SVGID_1_);
+}
+
+.advancedSwitch{
+  width: 20; 
+  left: 50%;
+  transform: translate(62px, 0px);
+  margin-right: 0;
+  margin-left: auto;
+}
+
+.bottomItem {
+  margin: 0;
+  top: -14px;
+}
+
+.profileNickname {
+  margin: 0;
+  left: -16px;
+}
+
+.newAvatar {
+  border-radius: 50%; 
+  border: 2px solid #555; 
+  filter: drop-shadow(1px 1px 1px #000000);
+  height: 200px;
+  width: 200px;
+}
+
+.profileAvatar {
+  border: 0.5px solid #555; 
+  filter: drop-shadow(0.5px 0.5px 0.5px #000000);
+  left: 35px;
+}
+
+.smallAvatar {
+  border: 0.5px solid #555; 
+  filter: drop-shadow(0.5px 0.5px 0.5px #000000);
+}
+
+.flippedSmallAvatar {
+  transform: scaleX(-1);
+  border: 0.3px solid #555; 
+  filter: drop-shadow(0.5px 0.5px 0.5px #000000);
+}
+
+.phoneFlippedSmallAvatar img{
+  transform: scaleX(-1);
+  border: 1.3px solid #1976d2; 
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%) brightness(150%) contrast(150%)  drop-shadow(0.7px 0.7px 0.7px #000000);
+}
+
+.phoneFlippedSmallAvatar:after {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; bottom: 0; right: 0;
+  border-radius: 50%; 
+  border: 2.4px solid #1976d2; 
+  box-shadow: inset 0px 0px 35px rgb(255, 255, 255);
+}
+
+.bookAvatar {
+  border-radius: 50%; 
+  transform: scaleX(-1);
+  border: 0.3px solid #555; 
+  filter: drop-shadow(0.5px 0.5px 0.5px #000000);
+}
+
+.MuiButton-textInherit {color : '#111111';}
+
+::-webkit-scrollbar
+  {
+    width: 6px;  /* for vertical scrollbars */
+    height: 6px; /* for horizontal scrollbars */
+  }
+  
+  ::-webkit-scrollbar-track
+  {
+    background: rgba(0, 0, 0, 0.1);
+  }
+  
+  ::-webkit-scrollbar-thumb
+  {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  
+@media (max-width: 929px) {
+  .MuiDataGrid-columnHeaders + div {
+    width: auto !important;
+  }
+
+  .appCenter:has(>div.MuiGrid-root:first-child, >div.MuiBox-root:first-child) {
+    overflow-y: scroll;
+    margin-top: 12px;
+    padding-bottom: 25px;
+    height: 100%;
+  }
+}

mobile/html/Web.bundle/css/loader.css

@@ -0,0 +1,330 @@
+
+.loaderCenter{
+    margin:0 auto;
+    position: absolute;
+    left:50%;
+    top:50%;
+    margin-top:-120px;
+    margin-left:-175px;
+    width:350px;
+    height:120px;
+    text-align: center;
+  }
+
+  .loaderSpinner,
+  .loaderSpinner:before,
+  .loaderSpinner:after {
+    border-radius: 50%;
+  }
+  .loaderSpinner {
+    color: #1976d2;
+    font-size: 11px;
+    text-indent: -99999em;
+    margin: 55px auto;
+    position: relative;
+    width: 10em;
+    height: 10em;
+    box-shadow: inset 0 0 0 1em;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+  .loaderSpinner:before,
+  .loaderSpinner:after {
+    position: absolute;
+    content: '';
+  }
+  .loaderSpinner:before {
+    width: 5.2em;
+    height: 10.2em;
+    background: #ffffff;
+    border-radius: 9.2em 0 0 10.2em;
+    top: -0.1em;
+    left: -0.1em;
+    -webkit-transform-origin: 5.1em 5.1em;
+    transform-origin: 5.1em 5.1em;
+    -webkit-animation: load2 2s infinite ease 1.5s;
+    animation: load2 2s infinite ease 1.5s;
+  }
+  .loaderSpinner:after {
+    width: 5.2em;
+    height: 10.2em;
+    background: #ffffff;
+    border-radius: 0 10.2em 10.2em 0;
+    top: -0.1em;
+    left: 4.9em;
+    -webkit-transform-origin: 0.1em 5.1em;
+    transform-origin: 0.1em 5.1em;
+    -webkit-animation: load2 2s infinite ease;
+    animation: load2 2s infinite ease;
+  }
+  @-webkit-keyframes load2 {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes load2 {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+
+.content-slider {
+    width: 100%;
+    height: 180px;
+  }
+  
+  .slider {
+    height: 140px;
+    width: 350px;
+    margin: 40px auto 0;
+    overflow: visible;
+    position: relative;
+  }
+  
+  .mask {
+    overflow: hidden;
+    height: 140px;
+  }
+  
+  .slider ul {
+    margin: 0;
+    padding: 0;
+    position: relative;
+  }
+  
+  .slider li {
+    text-align: center;
+    width: 350px;
+    height: 140px;
+    position: absolute;
+    top: -105px;
+    list-style: none;
+  }
+  
+  .slider .quote {
+    text-align: center;
+    font-size: 20px;
+  }
+  
+  .slider li.anim1 {
+    animation: cycle 12s linear infinite;
+  }
+  
+  .slider li.anim2 {
+    animation: cycle2 12s linear infinite;
+  }
+  
+  .slider li.anim3 {
+    animation: cycle3 12s linear infinite;
+  }
+  
+  .slider li.anim4 {
+    animation: cycle4 12s linear infinite;
+  }
+  
+  .slider li.anim5 {
+    animation: cycle5 12s linear infinite;
+  }
+  
+  .slider:hover li {
+    animation-play-state: paused;
+  }
+  
+  @keyframes cycle {
+    0% {
+      top: 0px;
+    }
+    4% {
+      top: 0px;
+    }
+    16% {
+      top: 0px;
+      opacity: 1;
+      z-index: 0;
+    }
+    20% {
+      top: 105px;
+      opacity: 0;
+      z-index: 0;
+    }
+    21% {
+      top: -105px;
+      opacity: 0;
+      z-index: -1;
+    }
+    50% {
+      top: -105px;
+      opacity: 0;
+      z-index: -1;
+    }
+    92% {
+      top: -105px;
+      opacity: 0;
+      z-index: 0;
+    }
+    96% {
+      top: -105px;
+      opacity: 0;
+    }
+    100% {
+      top: 0px;
+      opacity: 1;
+    }
+  }
+  
+  @keyframes cycle2 {
+    0% {
+      top: -105px;
+      opacity: 0;
+    }
+    16% {
+      top: -105px;
+      opacity: 0;
+    }
+    20% {
+      top: 0px;
+      opacity: 1;
+    }
+    24% {
+      top: 0px;
+      opacity: 1;
+    }
+    36% {
+      top: 0px;
+      opacity: 1;
+      z-index: 0;
+    }
+    40% {
+      top: 105px;
+      opacity: 0;
+      z-index: 0;
+    }
+    41% {
+      top: -105px;
+      opacity: 0;
+      z-index: -1;
+    }
+    100% {
+      top: -105px;
+      opacity: 0;
+      z-index: -1;
+    }
+  }
+  
+  @keyframes cycle3 {
+    0% {
+      top: -105px;
+      opacity: 0;
+    }
+    36% {
+      top: -105px;
+      opacity: 0;
+    }
+    40% {
+      top: 0px;
+      opacity: 1;
+    }
+    44% {
+      top: 0px;
+      opacity: 1;
+    }
+    56% {
+      top: 0px;
+      opacity: 1;
+      z-index: 0;
+    }
+    60% {
+      top: 105px;
+      opacity: 0;
+      z-index: 0;
+    }
+    61% {
+      top: -105px;
+      opacity: 0;
+      z-index: -1;
+    }
+    100% {
+      top: -105px;
+      opacity: 0;
+      z-index: -1;
+    }
+  }
+  
+  @keyframes cycle4 {
+    0% {
+      top: -105px;
+      opacity: 0;
+    }
+    56% {
+      top: -105px;
+      opacity: 0;
+    }
+    60% {
+      top: 0px;
+      opacity: 1;
+    }
+    64% {
+      top: 0px;
+      opacity: 1;
+    }
+    76% {
+      top: 0px;
+      opacity: 1;
+      z-index: 0;
+    }
+    80% {
+      top: 105px;
+      opacity: 0;
+      z-index: 0;
+    }
+    81% {
+      top: -105px;
+      opacity: 0;
+      z-index: -1;
+    }
+    100% {
+      top: -105px;
+      opacity: 0;
+      z-index: -1;
+    }
+  }
+  
+  @keyframes cycle5 {
+    0% {
+      top: -105px;
+      opacity: 0;
+    }
+    76% {
+      top: -105px;
+      opacity: 0;
+    }
+    80% {
+      top: 0px;
+      opacity: 1;
+    }
+    84% {
+      top: 0px;
+      opacity: 1;
+    }
+    96% {
+      top: 0px;
+      opacity: 1;
+      z-index: 0;
+    }
+    100% {
+      top: 105px;
+      opacity: 0;
+      z-index: 0;
+    }
+  }

mobile/html/Web.bundle/index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="A simple and private way to exchange bitcoin for national currencies. Robosats simplifies the peer-to-peer user experience and uses lightning hold invoices to minimize custody and trust requirements. No user registration required.">
+    
+    <title>RoboSats - Simple and Private Bitcoin Exchange</title>
+
+    <link rel="stylesheet" href="css/fonts.css"/>
+    <link rel="stylesheet" type="text/css" href="css/loader.css"/>
+    <link rel="stylesheet" type="text/css" href="css/index.css"/>
+  </head>
+  <body>
+    <noscript>
+      <div>
+        This site requires JavaScript. This message is only visible if you have it disabled. <br/><br/>
+        If you are using TOR browser set the "Security Level" to "Standard". If you keep seeing this message clear cache and storage of TOR browser app and retry.<br/><br/>
+        If the problem persists, ask for support in the RoboSats telegram group<a href="https://t.me/robosats"> (t.me/robosats)</a>
+      </div>
+    </noscript>
+    <div id="main">
+      <div id="app">
+        <div class="loaderCenter">
+          <div class="loaderSpinner"></div>
+          <div class="content-slider">
+            <div class="slider">
+              <div class="mask">
+                <ul>
+                  <li class="anim1">
+                    <div class="quote">Looking for robot parts ...</div>
+                  </li>
+                  <li class="anim2">
+                    <div class="quote">Adding layers to the onion ...</div>
+                  </li>
+                  <li class="anim3">
+                    <div class="quote">Winning at game theory ...</div>
+                  </li>
+                  <li class="anim4">
+                    <div class="quote">Moving Sats at light speed ...</div>
+                  </li>
+                  <li class="anim5">
+                    <div class="quote">Hiding in 2^256 bits of entropy...</div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="js/main.js"></script>
+  </body>
+</html>