Multichain telegram MiniApp

single-factor-auth-web/sfa-web-ton-telegram-example/.env

@@ -1,5 +1,4 @@
 VITE_SERVER_URL="http://localhost:3000" # server-url
 VITE_W3A_VERIFIER_NAME="" # w3a-verifier-name
 VITE_W3A_CLIENT_ID="" # w3a-client-id from web3auth dashboard
-REACT_APP_SERVER_URL="http://localhost:3000" # server-url
 NODE_ENV="development"

single-factor-auth-web/sfa-web-ton-telegram-example/package.json

@@ -27,17 +27,21 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.10",
     "@vitejs/plugin-react": "^4.3.1",
+    "@web3auth/auth-adapter": "^9.4.0",
     "@web3auth/base": "^9.3.0",
     "@web3auth/base-provider": "^9.3.0",
+    "@web3auth/ethereum-provider": "^9.4.0",
     "@web3auth/single-factor-auth": "^9.2.0",
+    "@web3auth/solana-provider": "^9.4.0",
     "lucide-react": "^0.454.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "source-map-loader": "^4.0.1",
     "tonweb": "^0.0.66",
     "typescript": "^5.0.4",
     "vite": "^5.4.1",
-    "web-vitals": "^3.1.1"
+    "web-vitals": "^3.1.1",
+    "web3": "^4.15.0"
   },
   "devDependencies": {
     "buffer": "^6.0.3",

single-factor-auth-web/sfa-web-ton-telegram-example/src/App.css

@@ -301,17 +301,150 @@ body {
  }
 }
 
+/* Add these styles at the end of your App.css */
+
 .breathing-outline {
-  border: 2px dashed rgba(0, 0, 0, 0.2);
-  border-radius: 8px;
-  animation: breathing 1.5s ease-in-out infinite;
+  position: relative;
+  overflow: hidden;
+  background: var(--card-bg);
+}
+
+.breathing-outline::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 200%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(102, 212, 246, 0.1) 25%,
+    rgba(77, 146, 255, 0.1) 50%,
+    rgba(187, 101, 255, 0.1) 75%,
+    transparent 100%
+  );
+  animation: shimmer 2s infinite linear;
+}
+
+.dark-mode .breathing-outline::before {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(102, 212, 246, 0.05) 25%,
+    rgba(77, 146, 255, 0.05) 50%,
+    rgba(187, 101, 255, 0.05) 75%,
+    transparent 100%
+  );
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(50%);
+  }
 }
 
-@keyframes breathing {
-  0%, 100% {
-    border-color: rgba(0, 0, 0, 0.2);
+.breathing-outline .ellipsed-text,
+.breathing-outline .user-info p {
+  position: relative;
+  overflow: hidden;
+}
+
+.breathing-outline .ellipsed-text::after,
+.breathing-outline .user-info p::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--card-bg);
+  border-radius: 4px;
+}
+
+/* Loading text placeholder styles */
+.loading-placeholder {
+  height: 1em;
+  background: linear-gradient(
+    90deg,
+    var(--border-color) 0%,
+    var(--hover-bg) 50%,
+    var(--border-color) 100%
+  );
+  background-size: 200% 100%;
+  animation: loading 2s infinite linear;
+  border-radius: 4px;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
   }
-  50% {
-    border-color: rgba(0, 0, 0, 0.5);
+  100% {
+    background-position: -200% 0;
   }
 }
+
+.chain-selector {
+  position: relative;
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.chain-selector-button {
+  width: 100%;
+  padding: 12px;
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  color: var(--text-color);
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.chain-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  margin-top: 4px;
+  overflow: hidden;
+  z-index: 10;
+  box-shadow: 0 4px 12px var(--box-shadow);
+}
+
+.chain-option {
+  width: 100%;
+  padding: 12px;
+  background: none;
+  border: none;
+  color: var(--text-color);
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.3s ease;
+}
+
+.chain-option:hover {
+  background-color: var(--hover-bg);
+}
+
+.chain-option.selected {
+  background-color: var(--hover-bg);
+  font-weight: 600;
+}
+
+.error-text {
+  color: #dc2626;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}