zopassport 0.1.0

package/app/src/styles.css

@@ -0,0 +1,154 @@
+/* Zo Passport Global Styles */
+
+/* Reset and base styles for mobile scrolling */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+  height: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #000;
+  color: #fff;
+  font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-overflow-scrolling: touch;
+}
+
+#root {
+  min-height: 100%;
+  height: auto;
+  overflow-x: hidden;
+  overflow-y: visible;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* Smooth transitions */
+* {
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* Button hover effects */
+button:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+button:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+/* Link hover */
+a:hover {
+  transform: translateY(-2px);
+}
+
+/* Focus styles for accessibility */
+button:focus-visible,
+input:focus-visible,
+a:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.5);
+  outline-offset: 2px;
+}
+
+/* Selection color */
+::selection {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+
+/* Disable text selection on UI elements */
+button,
+.no-select {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Placeholder text */
+::placeholder {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+/* Input autofill styling */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus {
+  -webkit-text-fill-color: #fff;
+  -webkit-box-shadow: 0 0 0px 1000px #1a1a2e inset;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+
+
+
+
+
+
+

package/app/svg-mock.js

@@ -0,0 +1,125 @@
+// Mock for react-native-svg on web
+// Uses standard SVG elements
+
+import React from 'react';
+
+export const Svg = ({ children, width, height, viewBox, style, ...props }) => (
+  <svg 
+    width={width} 
+    height={height} 
+    viewBox={viewBox} 
+    style={style}
+    {...props}
+  >
+    {children}
+  </svg>
+);
+
+export const Circle = ({ cx, cy, r, fill, stroke, strokeWidth, ...props }) => (
+  <circle 
+    cx={cx} 
+    cy={cy} 
+    r={r} 
+    fill={fill} 
+    stroke={stroke} 
+    strokeWidth={strokeWidth}
+    {...props}
+  />
+);
+
+export const Rect = ({ x, y, width, height, fill, stroke, rx, ry, ...props }) => (
+  <rect 
+    x={x} 
+    y={y} 
+    width={width} 
+    height={height} 
+    fill={fill} 
+    stroke={stroke}
+    rx={rx}
+    ry={ry}
+    {...props}
+  />
+);
+
+export const Path = ({ d, fill, stroke, strokeWidth, ...props }) => (
+  <path 
+    d={d} 
+    fill={fill} 
+    stroke={stroke} 
+    strokeWidth={strokeWidth}
+    {...props}
+  />
+);
+
+export const Line = ({ x1, y1, x2, y2, stroke, strokeWidth, ...props }) => (
+  <line 
+    x1={x1} 
+    y1={y1} 
+    x2={x2} 
+    y2={y2} 
+    stroke={stroke} 
+    strokeWidth={strokeWidth}
+    {...props}
+  />
+);
+
+export const Text = ({ x, y, fill, fontSize, fontFamily, textAnchor, children, ...props }) => (
+  <text 
+    x={x} 
+    y={y} 
+    fill={fill} 
+    fontSize={fontSize}
+    fontFamily={fontFamily}
+    textAnchor={textAnchor}
+    {...props}
+  >
+    {children}
+  </text>
+);
+
+export const G = ({ children, transform, ...props }) => (
+  <g transform={transform} {...props}>
+    {children}
+  </g>
+);
+
+export const Defs = ({ children }) => <defs>{children}</defs>;
+
+export const LinearGradient = ({ id, x1, y1, x2, y2, children, ...props }) => (
+  <linearGradient id={id} x1={x1} y1={y1} x2={x2} y2={y2} {...props}>
+    {children}
+  </linearGradient>
+);
+
+export const RadialGradient = ({ id, cx, cy, r, fx, fy, children, ...props }) => (
+  <radialGradient id={id} cx={cx} cy={cy} r={r} fx={fx} fy={fy} {...props}>
+    {children}
+  </radialGradient>
+);
+
+export const Stop = ({ offset, stopColor, stopOpacity, ...props }) => (
+  <stop 
+    offset={offset} 
+    stopColor={stopColor} 
+    stopOpacity={stopOpacity}
+    {...props}
+  />
+);
+
+export const ClipPath = ({ id, children }) => (
+  <clipPath id={id}>{children}</clipPath>
+);
+
+export const Mask = ({ id, children }) => (
+  <mask id={id}>{children}</mask>
+);
+
+export const Use = ({ href, ...props }) => <use href={href} {...props} />;
+
+export default Svg;
+
+
+
+
+
+

package/app/svg-mock.jsx

@@ -0,0 +1,120 @@
+// Mock for react-native-svg on web
+// Uses standard SVG elements
+
+import React from 'react';
+
+export const Svg = ({ children, width, height, viewBox, style, ...props }) => (
+  <svg 
+    width={width} 
+    height={height} 
+    viewBox={viewBox} 
+    style={style}
+    {...props}
+  >
+    {children}
+  </svg>
+);
+
+export const Circle = ({ cx, cy, r, fill, stroke, strokeWidth, ...props }) => (
+  <circle 
+    cx={cx} 
+    cy={cy} 
+    r={r} 
+    fill={fill} 
+    stroke={stroke} 
+    strokeWidth={strokeWidth}
+    {...props}
+  />
+);
+
+export const Rect = ({ x, y, width, height, fill, stroke, rx, ry, ...props }) => (
+  <rect 
+    x={x} 
+    y={y} 
+    width={width} 
+    height={height} 
+    fill={fill} 
+    stroke={stroke}
+    rx={rx}
+    ry={ry}
+    {...props}
+  />
+);
+
+export const Path = ({ d, fill, stroke, strokeWidth, ...props }) => (
+  <path 
+    d={d} 
+    fill={fill} 
+    stroke={stroke} 
+    strokeWidth={strokeWidth}
+    {...props}
+  />
+);
+
+export const Line = ({ x1, y1, x2, y2, stroke, strokeWidth, ...props }) => (
+  <line 
+    x1={x1} 
+    y1={y1} 
+    x2={x2} 
+    y2={y2} 
+    stroke={stroke} 
+    strokeWidth={strokeWidth}
+    {...props}
+  />
+);
+
+export const Text = ({ x, y, fill, fontSize, fontFamily, textAnchor, children, ...props }) => (
+  <text 
+    x={x} 
+    y={y} 
+    fill={fill} 
+    fontSize={fontSize}
+    fontFamily={fontFamily}
+    textAnchor={textAnchor}
+    {...props}
+  >
+    {children}
+  </text>
+);
+
+export const G = ({ children, transform, ...props }) => (
+  <g transform={transform} {...props}>
+    {children}
+  </g>
+);
+
+export const Defs = ({ children }) => <defs>{children}</defs>;
+
+export const LinearGradient = ({ id, x1, y1, x2, y2, children, ...props }) => (
+  <linearGradient id={id} x1={x1} y1={y1} x2={x2} y2={y2} {...props}>
+    {children}
+  </linearGradient>
+);
+
+export const RadialGradient = ({ id, cx, cy, r, fx, fy, children, ...props }) => (
+  <radialGradient id={id} cx={cx} cy={cy} r={r} fx={fx} fy={fy} {...props}>
+    {children}
+  </radialGradient>
+);
+
+export const Stop = ({ offset, stopColor, stopOpacity, ...props }) => (
+  <stop 
+    offset={offset} 
+    stopColor={stopColor} 
+    stopOpacity={stopOpacity}
+    {...props}
+  />
+);
+
+export const ClipPath = ({ id, children }) => (
+  <clipPath id={id}>{children}</clipPath>
+);
+
+export const Mask = ({ id, children }) => (
+  <mask id={id}>{children}</mask>
+);
+
+export const Use = ({ href, ...props }) => <use href={href} {...props} />;
+
+export default Svg;
+

package/app/vite.config.ts

@@ -0,0 +1,70 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+// Check if we're running in development (inside the SDK repo)
+const isDev = process.cwd().includes('zopassport-sdk');
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: [
+      // Mock native-only libraries FIRST (order matters!)
+      {
+        find: /^react-native-reanimated$/,
+        replacement: path.resolve(__dirname, 'reanimated-mock.jsx'),
+      },
+      {
+        find: /^react-native-svg$/,
+        replacement: path.resolve(__dirname, 'svg-mock.jsx'),
+      },
+      // React Native Web (must use absolute path)
+      {
+        find: /^react-native$/,
+        replacement: path.resolve(__dirname, 'node_modules/react-native-web'),
+      },
+      // In development, resolve zopassport to the local source
+      ...(isDev ? [
+        {
+          find: /^zopassport\/react$/,
+          replacement: path.resolve(__dirname, '../src/react.tsx'),
+        },
+        {
+          find: /^zopassport$/,
+          replacement: path.resolve(__dirname, '../src/index.ts'),
+        },
+      ] : []),
+    ],
+    extensions: ['.web.tsx', '.web.ts', '.web.js', '.tsx', '.ts', '.js'],
+  },
+  define: {
+    global: 'window',
+    __DEV__: JSON.stringify(true),
+  },
+  optimizeDeps: {
+    // Force Vite to pre-bundle these
+    include: ['react', 'react-dom', 'axios', 'moment'],
+    // Exclude native libraries from optimization
+    exclude: ['react-native-reanimated', 'react-native-svg'],
+  },
+  server: {
+    port: 3000,
+    open: true,
+    fs: {
+      // Allow serving files from the parent assets folder
+      allow: ['..'],
+    },
+  },
+  // In dev, serve assets from parent SDK folder
+  publicDir: isDev ? path.resolve(__dirname, '../assets') : 'public',
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+    rollupOptions: {
+      external: ['react-native-worklets'],
+    },
+  },
+});
+
+
+

package/assets/ASSETS_MANIFEST.md

@@ -0,0 +1,124 @@
+# Zo Passport SDK - Assets Manifest
+
+All required assets for the complete phone → avatar → passport flow.
+
+## 📂 Directory Structure
+
+```
+assets/
+├── bro.png                         # Male avatar preview (256x256)
+├── bae.png                         # Female avatar preview (256x256)
+├── zo-fallback.png                 # Default fallback avatar
+├── zo-coin.gif                     # Animated $Zo coin
+│
+├── figma-assets/
+│   └── landing-zo-logo.png         # Zo logo (60x60)
+│
+├── videos/
+│   ├── loading-screen-background.mp4   # Landing/onboarding bg video
+│   └── opening-disks.mp4               # Portal animation
+│
+├── images/
+│   └── rank1.jpeg                  # Fallback avatar
+│
+├── cultural-stickers/              # 17 culture icons
+│   ├── Business.png
+│   ├── Design.png
+│   ├── Food.png
+│   ├── Game.png
+│   ├── Health&Fitness.png
+│   ├── Home&Lifestyle.png
+│   ├── Law.png
+│   ├── Literature&Stories.png
+│   ├── Music&Entertainment.png
+│   ├── Nature&Wildlife.png
+│   ├── Photography.png
+│   ├── Science&Technology.png
+│   ├── Spiritual.png
+│   ├── Sport.png
+│   ├── Stories&Journal.png
+│   ├── Television&Cinema.png
+│   └── Travel&Adventure.png
+│
+└── lotties/
+    ├── loader.json                 # Loading animation
+    └── spinner.json                # Button spinner
+```
+
+## 🌐 CDN Assets (Not Bundled)
+
+These are loaded from Zo CDN and don't need to be bundled:
+
+| Asset | URL |
+|-------|-----|
+| Founder Passport BG | `https://proxy.cdn.zo.xyz/gallery/media/images/a1659b07-94f0-4490-9b3c-3366715d9717_20250515053726.png` |
+| Citizen Passport BG | `https://proxy.cdn.zo.xyz/gallery/media/images/bda9da5a-eefe-411d-8d90-667c80024463_20250515053805.png` |
+
+## 📦 Usage
+
+### Copy to Public Folder
+
+```bash
+# Copy all assets to your public folder
+cp -r packages/zopassport/assets/* public/
+```
+
+### Import Paths (After copying to public/)
+
+```tsx
+// In your components
+const videoUrl = '/videos/loading-screen-background.mp4';
+const logoUrl = '/figma-assets/landing-zo-logo.png';
+const broAvatarUrl = '/bro.png';
+const baeAvatarUrl = '/bae.png';
+```
+
+### Or Reference from SDK
+
+```tsx
+import { ZoLanding } from '@zo/passport/react';
+
+<ZoLanding
+  videoUrl="/assets/videos/loading-screen-background.mp4"
+  logoUrl="/assets/figma-assets/landing-zo-logo.png"
+/>
+```
+
+## 📊 File Sizes
+
+| Asset | Size (approx) |
+|-------|---------------|
+| loading-screen-background.mp4 | ~2 MB |
+| opening-disks.mp4 | ~500 KB |
+| Cultural stickers (all) | ~200 KB |
+| Avatar previews | ~50 KB each |
+| Lotties | ~10 KB each |
+
+**Total Bundle**: ~3 MB
+
+## 🎨 Culture Sticker Mapping
+
+| ID | Name | File |
+|----|------|------|
+| `travel` | Travel & Adventure | `Travel&Adventure.png` |
+| `design` | Design | `Design.png` |
+| `tech` | Science & Technology | `Science&Technology.png` |
+| `food` | Food | `Food.png` |
+| `music` | Music & Entertainment | `Music&Entertainment.png` |
+| `photography` | Photography | `Photography.png` |
+| `fitness` | Health & Fitness | `Health&Fitness.png` |
+| `sports` | Sport | `Sport.png` |
+| `literature` | Literature & Stories | `Literature&Stories.png` |
+| `cinema` | Television & Cinema | `Television&Cinema.png` |
+| `spiritual` | Spiritual | `Spiritual.png` |
+| `nature` | Nature & Wildlife | `Nature&Wildlife.png` |
+| `business` | Business | `Business.png` |
+| `law` | Law | `Law.png` |
+| `lifestyle` | Home & Lifestyle | `Home&Lifestyle.png` |
+| `gaming` | Game | `Game.png` |
+| `stories` | Stories & Journal | `Stories&Journal.png` |
+
+---
+
+*Generated: December 2025*
+