feat: add web rtc initial config

packages/mobile/app/onboarding/camera-scan.tsx

@@ -14,7 +14,7 @@ const CAMERA_ASPECT_RATIO = 4 / 3;
 const SCAN_ICON_WIDTH_RATIO = 0.7;
 
 export default function Welcome() {
-  const { top } = useSafeAreaInsets();
+  const { top, bottom } = useSafeAreaInsets();
   const [autoFocus, setAutoFocus] = useState<FocusMode>("off");
 
   const resetCameraAutoFocus = () => {
@@ -35,12 +35,21 @@ export default function Welcome() {
     Math.min(overlayWidth, cameraWidth) * SCAN_ICON_WIDTH_RATIO;
 
   return (
-    <View style={{ flex: 1, backgroundColor: "rgba(0, 0, 0, 0.7)" }}>
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: "rgba(0, 0, 0, 0.7)",
+      }}
+    >
       <View
         style={{
+          position: "absolute",
           paddingHorizontal: 24,
           paddingTop: 12,
-          backgroundColor: "rgba(0, 0, 0, 1)",
+          marginTop: top,
+          left: 0,
+          right: 0,
+          zIndex: 1000,
         }}
       >
         <RouteHeader>
@@ -73,6 +82,7 @@ export default function Welcome() {
                 width: scannerSize,
                 height: scannerSize,
                 position: "relative",
+                marginBottom: 48,
               }}
             />
           </View>
@@ -83,13 +93,14 @@ export default function Welcome() {
           onBarcodeScanned={({ data }) => {
             console.log(data);
           }}
+          autofocus={autoFocus}
         />
         <View
           style={{
             position: "absolute",
             width: scannerSize,
             height: scannerSize,
-            top: "50%",
+            top: "47.25%",
             left: "50%",
             transform: [
               { translateX: -scannerSize / 2 },
@@ -109,12 +120,28 @@ export default function Welcome() {
           onPress={resetCameraAutoFocus}
         />
       </MaskedView>
-      <Text style={styles.scanText}>Scan your QR Code</Text>
-      <Text style={styles.instructionText}>
-        With your wallet connected, navigate{"\n"}
-        to &apos;Profile&apos; &gt; &apos;Link mobile device&apos; on{"\n"}
-        Osmosis web app.
-      </Text>
+      <View
+        style={{
+          justifyContent: "center",
+          alignItems: "center",
+          paddingBottom: bottom + 12,
+          paddingTop: 32,
+          borderTopStartRadius: 32,
+          borderTopEndRadius: 32,
+          backgroundColor: Colors.osmoverse[1000],
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+        }}
+      >
+        <Text style={styles.scanText}>Scan your QR Code</Text>
+        <Text style={styles.instructionText}>
+          With your wallet connected, navigate{"\n"}
+          to &apos;Profile&apos; &gt; &apos;Link mobile device&apos; on{"\n"}
+          Osmosis web app.
+        </Text>
+      </View>
     </View>
   );
 }

packages/server/src/queries/twitter/twitter.ts

@@ -1,13 +1,9 @@
 import { apiClient } from "@osmosis-labs/utils";
 import { Redis } from "@upstash/redis";
-import { Cache, CacheEntry, cachified } from "cachified";
+import { Cache, cachified } from "cachified";
 
-import {
-  KV_STORE_REST_API_TOKEN,
-  KV_STORE_REST_API_URL,
-  TWITTER_API_ACCESS_TOKEN,
-  TWITTER_API_URL,
-} from "../../env";
+import { TWITTER_API_ACCESS_TOKEN, TWITTER_API_URL } from "../../env";
+import { getRedisClient, redisKvStoreAdapter } from "../../utils";
 
 interface RawUser {
   id: string;
@@ -48,23 +44,6 @@ export interface RichTweet {
   previewImage: string | null;
 }
 
-const DEFAULT_TTL = 1000 * 60 * 60 * 24 * 7;
-
-const kvStoreAdapter = (store: Redis): Cache => ({
-  set: <T>(key: string, value: CacheEntry<T>) => {
-    value.metadata.ttl;
-    return store.set(key, value, {
-      px: value.metadata.ttl ?? DEFAULT_TTL,
-    });
-  },
-  get: <T>(key: string) => {
-    return store.get<T>(key);
-  },
-  delete: (key) => {
-    return store.del(key);
-  },
-});
-
 export class Twitter {
   /**
    * Expire time in milliseconds.
@@ -85,11 +64,8 @@ export class Twitter {
    */
   constructor(cacheExpireTime: number = DEFAULT_TTL) {
     this.cacheExpireTime = cacheExpireTime;
-    this.kvStore = new Redis({
-      url: KV_STORE_REST_API_URL!,
-      token: KV_STORE_REST_API_TOKEN!,
-    });
-    this.cache = kvStoreAdapter(this.kvStore);
+    this.kvStore = getRedisClient();
+    this.cache = redisKvStoreAdapter(this.kvStore);
   }
 
   /**

packages/server/src/utils/index.ts

@@ -1,6 +1,7 @@
 export * from "./cache";
 export * from "./error";
 export * from "./pagination";
+export * from "./redis";
 export * from "./search";
 export * from "./sort";
 export * from "./superjson";

packages/server/src/utils/redis.ts

@@ -0,0 +1,29 @@
+import { Redis } from "@upstash/redis";
+import { Cache, CacheEntry } from "cachified";
+
+import { KV_STORE_REST_API_URL } from "../env";
+import { KV_STORE_REST_API_TOKEN } from "../env";
+
+const DEFAULT_TTL = 1000 * 60 * 60 * 24 * 7;
+
+export function getRedisClient() {
+  return new Redis({
+    url: KV_STORE_REST_API_URL!,
+    token: KV_STORE_REST_API_TOKEN!,
+  });
+}
+
+export const redisKvStoreAdapter = (store: Redis): Cache => ({
+  set: <T>(key: string, value: CacheEntry<T>) => {
+    value.metadata.ttl;
+    return store.set(key, value, {
+      px: value.metadata.ttl ?? DEFAULT_TTL,
+    });
+  },
+  get: <T>(key: string) => {
+    return store.get<T>(key);
+  },
+  delete: (key) => {
+    return store.del(key);
+  },
+});

packages/trpc/package.json

@@ -39,6 +39,7 @@
     "@osmosis-labs/utils": "^1.0.0",
     "@trpc/client": "^10.45.1",
     "@trpc/server": "^10.45.1",
+    "@upstash/ratelimit": "^2.0.5",
     "zod": "^3.22.4"
   },
   "devDependencies": {

packages/trpc/src/api.ts

@@ -1,5 +1,10 @@
 import { SpanStatusCode, trace } from "@opentelemetry/api";
-import { superjson } from "@osmosis-labs/server";
+import {
+  getRedisClient,
+  KV_STORE_REST_API_TOKEN,
+  KV_STORE_REST_API_URL,
+  superjson,
+} from "@osmosis-labs/server";
 import { AssetList, Chain } from "@osmosis-labs/types";
 import { timeout } from "@osmosis-labs/utils";
 import {
@@ -10,8 +15,9 @@ import {
   TRPCClientError,
   TRPCLink,
 } from "@trpc/client";
-import { type AnyRouter, initTRPC } from "@trpc/server";
+import { type AnyRouter, initTRPC, TRPCError } from "@trpc/server";
 import { observable } from "@trpc/server/observable";
+import { Ratelimit } from "@upstash/ratelimit";
 import { ZodError } from "zod";
 
 /**
@@ -21,6 +27,7 @@ type CreateContextOptions = {
   assetLists: AssetList[];
   chainList: Chain[];
   opentelemetryServiceName: string | undefined;
+  req?: Request;
 };
 
 /**
@@ -130,6 +137,62 @@ export const publicProcedure = t.procedure
     return result;
   });
 
+let rateLimiter: Ratelimit | undefined;
+
+const getRateLimiter = () => {
+  if (!rateLimiter && KV_STORE_REST_API_URL && KV_STORE_REST_API_TOKEN) {
+    rateLimiter = new Ratelimit({
+      redis: getRedisClient(),
+      limiter: Ratelimit.slidingWindow(10, "10 s"),
+      analytics: true,
+    });
+  }
+  return rateLimiter;
+};
+
+/**
+ * Our middleware that uses the request's IP address
+ * as the unique identifier for rate limiting.
+ */
+export const rateLimitedProcedure = publicProcedure.use(
+  async ({ ctx, next }) => {
+    // Extract IP from ctx.
+    // "x-forwarded-for" often contains a comma-separated list
+    // of IPs if there are multiple proxies.
+    // For example, "x-forwarded-for: clientIP, proxyIP, ...".
+    // You might adjust logic or parse for a real client IP.
+    const ip = ctx.req?.headers.get("x-forwarded-for");
+
+    const rateLimiter = getRateLimiter();
+
+    if (!ip) {
+      throw new TRPCError({
+        code: "INTERNAL_SERVER_ERROR",
+        message: "IP address not found",
+      });
+    }
+
+    if (!rateLimiter) {
+      throw new TRPCError({
+        code: "INTERNAL_SERVER_ERROR",
+        message: "Rate limiter not configured",
+      });
+    }
+
+    // Rate limit on IP address
+    const { success } = await rateLimiter.limit(ip);
+
+    if (!success) {
+      throw new TRPCError({
+        code: "TOO_MANY_REQUESTS",
+        message: "Too many requests",
+      });
+    }
+
+    return next();
+  }
+);
+
 export const createCallerFactory = t.createCallerFactory;
 
 /**

packages/trpc/src/index.ts

@@ -14,3 +14,4 @@ export * from "./portfolio";
 export * from "./staking";
 export * from "./swap";
 export * from "./transactions";
+export * from "./web-rtc";