feat(expo): added expo frontend

examples/frontend/expo/.babelrc.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

examples/frontend/expo/.gitignore

@@ -0,0 +1,36 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env
+.env*.local
+
+# typescript
+*.tsbuildinfo

examples/frontend/expo/App.tsx

@@ -0,0 +1,54 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import '@walletconnect/react-native-compat';
+import { Web3Modal, createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi-react-native';
+import * as Linking from 'expo-linking';
+import 'react-native-url-polyfill/auto';
+import { arbitrum, mainnet, polygon } from 'viem/chains';
+import { WagmiConfig } from 'wagmi';
+
+import { JustaNameProvider } from '@justaname.id/react/src'
+import HomeScreen from './screens/Home';
+
+const projectId = process.env.EXPO_PUBLIC_PROJECT_ID ?? ""
+
+const metadata = {
+  name: 'JAN Expo Demo',
+  description: 'JAN Expo Demo',
+  url: 'https://web3modal.com',
+  icons: ['https://avatars.githubusercontent.com/u/37784886'],
+  redirect: {
+    native: Linking.createURL('/'),
+    universal: 'YOUR_APP_UNIVERSAL_LINK.com'
+  }
+}
+
+const chains = [mainnet, polygon, arbitrum]
+
+const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });
+
+createWeb3Modal({
+  projectId,
+  chains,
+  wagmiConfig
+})
+
+export default function App() {
+  const queryClient = new QueryClient();
+
+  const chainId = process.env.EXPO_PUBLIC_CHAIN_ID ? parseInt(process.env.EXPO_PUBLIC_CHAIN_ID) as 1 | 11155111 : undefined;
+
+  return (
+    <WagmiConfig config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <JustaNameProvider
+          // backendUrl={process.env.EXPO_PUBLIC_API_URL} 
+          // backendUrl={"exp://192.168.1.5:8081"}
+          chainId={chainId}>
+          <HomeScreen />
+          <Web3Modal />
+        </JustaNameProvider>
+      </QueryClientProvider>
+    </WagmiConfig>
+  );
+}
+

examples/frontend/expo/app.json

@@ -0,0 +1,39 @@
+{
+  "expo": {
+    "name": "jan-expo-demo-frontend",
+    "slug": "jan-expo-demo-frontend",
+    "scheme": "jan-expo-demo-frontend",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true,
+      "infoPlist": {
+        "LSApplicationQueriesSchemes": [
+          "metamask",
+          "trust",
+          "safe",
+          "rainbow",
+          "uniswap"
+          // Add other wallet schemes names here
+        ]
+      }
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

examples/frontend/expo/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

examples/frontend/expo/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "jan-expo-demo-frontend",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start -c",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@ethersproject/shims": "^5.7.0",
+    "@justaname.id/react": "^0.0.4",
+    "@metamask/sdk-react": "^0.15.0",
+    "@react-native-async-storage/async-storage": "1.21.0",
+    "@react-native-community/netinfo": "11.1.0",
+    "@tanstack/react-query": "^5.28.6",
+    "@walletconnect/react-native-compat": "^2.11.1",
+    "@web3modal/wagmi-react-native": "^1.2.0",
+    "axios": "^1.6.7",
+    "ethers": "^6.11.1",
+    "expo": "~50.0.14",
+    "expo-application": "~5.8.3",
+    "expo-crypto": "~12.8.1",
+    "expo-linking": "~6.2.2",
+    "expo-status-bar": "~1.11.1",
+    "node-libs-expo": "^0.0.3",
+    "qs": "^6.11.2",
+    "react": "18.2.0",
+    "react-native": "0.73.6",
+    "react-native-background-timer": "^2.4.1",
+    "react-native-get-random-values": "~1.8.0",
+    "react-native-modal": "^13.0.1",
+    "react-native-randombytes": "^3.6.1",
+    "react-native-svg": "14.1.0",
+    "react-native-url-polyfill": "^2.0.0",
+    "viem": "1.21.4",
+    "wagmi": "1.4.13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/qs": "^6.9.11",
+    "@types/react": "~18.2.45",
+    "typescript": "^5.1.3"
+  },
+  "private": true
+}

examples/frontend/expo/project.json

@@ -0,0 +1,44 @@
+{
+  "name": "justaname-expo-frontend",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "examples/frontend/expo",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "yarn build",
+        "cwd": "examples/frontend/expo"
+      }
+    },
+    "ios": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "yarn ios",
+        "cwd": "examples/frontend/expo"
+      }
+    },
+    "android": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "yarn android",
+        "cwd": "examples/frontend/expo"
+      }
+    },
+    "serve": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "yarn start",
+        "cwd": "examples/frontend/expo"
+      }
+    },
+    "install": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "yarn",
+        "cwd": "examples/fullstack/expo"
+      }
+    }
+  },
+  "tags": []
+}

examples/frontend/expo/src/screens/Home.tsx → examples/frontend/expo/screens/Home.tsx

@@ -1,17 +1,15 @@
 import "@ethersproject/shims";
+import { useAccountSubnames, useClaimSubname, useIsSubnameAvailable } from '@justaname.id/react/src';
 import '@walletconnect/react-native-compat';
-import 'react-native-url-polyfill/auto';
-import { useAccountSubnames, useClaimSubname, useIsSubnameAvailable } from '@justaname.id/react';
 import { W3mButton } from '@web3modal/wagmi-react-native';
-import { ethers } from "ethers";
 import React, { useState } from 'react';
 import { ActivityIndicator, Button, Keyboard, KeyboardAvoidingView, Platform, StyleSheet, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
+import 'react-native-url-polyfill/auto';
 import { useDebounced } from "../hooks/useDebounced";
 
 
 export default function HomeScreen() {
     const [inputValue, setInputValue] = useState('');
-    const [randomWallet, setRandomWallet] = useState({} as ethers.HDNodeWallet);
     // Wagmi
 
     const {
@@ -22,17 +20,11 @@ export default function HomeScreen() {
     );
 
     const { subnames } = useAccountSubnames();
-    const { isAvailable } = useIsSubnameAvailable({
-        subname: debouncedSubdomain,
+    const { isAvailable, isLoading } = useIsSubnameAvailable({
+        username: debouncedSubdomain,
         ensDomain: process.env.EXPO_PUBLIC_ENS_DOMAIN as string,
     })
     const { claimSubname } = useClaimSubname();
-
-    const handleGenerateWallet = async () => {
-        const wallet = ethers.Wallet.createRandom();
-        setRandomWallet(wallet);
-    }
-
     const handleAddSubdomain = async () => {
         return await claimSubname({
             username: inputValue,
@@ -48,28 +40,28 @@ export default function HomeScreen() {
                     <Text style={styles.text}>JAN WALLET TEST</Text>
                     <Text style={styles.subText}>Connect ur wallet</Text>
                     <W3mButton />
-                    <Text style={[styles.subText, { marginTop: 10 }]}>Or generate random wallet on each click</Text>
-                    <Button
-                        title={"Generate wallet"}
-                        onPress={handleGenerateWallet}
-                    />
-                    <Text style={[styles.subText, { marginTop: 10 }]}>{randomWallet.address ?? "No Generated Wallet"}</Text>
-                    <TextInput
-                        style={[styles.input, {
-                            borderColor: isAvailable
-                                ? 'lightgreen'
-                                : 'red',
-                        }]}
-                        placeholder="Enter your string"
-                        value={inputValue}
-                        onChangeText={setInputValue}
-                    />
+                    <View style={styles.inputContainer}>
+                        <TextInput
+                            style={[styles.input,
+                            {
+                                borderColor:
+                                    isAvailable
+                                        ? 'lightgreen'
+                                        : 'red',
+                            }
+                            ]}
+                            placeholder="Enter your string"
+                            value={inputValue}
+                            onChangeText={setInputValue}
+                        />
+                        <Text style={styles.domainText}>.{process.env.EXPO_PUBLIC_ENS_DOMAIN}</Text>
+                    </View>
                     <Button
                         title="Claim"
                         onPress={handleAddSubdomain}
                         disabled={!isAvailable}
                     />
-                    {debouncedSubdomain.length > 2 &&
+                    {debouncedSubdomain.length > 2 && isLoading &&
                         <ActivityIndicator
                             size="large"
                             color="black"
@@ -93,6 +85,7 @@ const styles = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
+        paddingHorizontal: 20,
     },
     text: {
         fontSize: 24,
@@ -103,6 +96,7 @@ const styles = StyleSheet.create({
         fontSize: 18,
         fontWeight: 'bold',
         marginBottom: 5,
+        marginTop: 20,
     },
     input: {
         height: 40,
@@ -113,4 +107,15 @@ const styles = StyleSheet.create({
         padding: 10,
         marginHorizontal: 20,
     },
+    inputContainer: {
+        position: 'relative',
+        width: '100%',
+    },
+    domainText: {
+        position: 'absolute',
+        right: 28,
+        top: 22,
+        fontSize: 15,
+        color: 'black'
+    }
 });

examples/frontend/expo/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}