tamagui across extension and mobile

.gitignore

@@ -45,3 +45,6 @@ test-ledger/
 .tsbuildinfo
 
 .dev.vars
+.tamagui
+.d.ts
+.d.ts.map

package.json

@@ -62,6 +62,8 @@
     "react-refresh": "0.11.0"
   },
   "resolutions": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "@solana/web3.js": "1.63.1",
     "graphql-zeus": "^5.2.9",
     "json-schema": "^0.4.0",

packages/app-extension/package.json

@@ -12,8 +12,8 @@
     "@coral-xyz/db": "*",
     "@coral-xyz/message-sdk": "*",
     "@coral-xyz/react-common": "*",
-    "@coral-xyz/react-native-core": "*",
     "@coral-xyz/recoil": "*",
+    "@coral-xyz/tamagui": "*",
     "@coral-xyz/themes": "*",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
@@ -50,6 +50,7 @@
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.8",
     "recoil": "^0.7.6",
+    "tamagui": "^1.7.3",
     "web-push": "^3.5.0"
   },
   "scripts": {
@@ -79,7 +80,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "@types/react-native": "~0.70.6",
+    "@types/react-native": "~0.71.3",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "babel-loader": "^9.1.2",
@@ -105,6 +106,7 @@
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
     "swc-loader": "^0.2.3",
+    "tamagui-loader": "^1.7.1",
     "typescript": "~4.9.3",
     "webpack": "^5.75.0",
     "webpack-bundle-analyzer": "^4.7.0",

packages/app-extension/src/app/App.tsx

@@ -81,7 +81,7 @@ function _Router() {
             ...BACKDROP_STYLE,
             background: theme.custom.colors.backgroundBackdrop,
           }}
-         />
+        />
       }
     >
       <Router />

packages/app-extension/src/components/Onboarding/index.tsx

@@ -34,9 +34,10 @@ export const Onboarding = ({
   const [action, setAction] = useState<"onboard" | "recover" | "waiting">(
     "onboard"
   );
+
+  const _ks = useKeyringStoreState();
   const isOnboarded =
-    !isAddingAccount &&
-    useKeyringStoreState() !== KeyringStoreStateEnum.NeedsOnboarding;
+    !isAddingAccount && _ks !== KeyringStoreStateEnum.NeedsOnboarding;
 
   const defaultProps = {
     containerRef,
@@ -74,12 +75,14 @@ export const Onboarding = ({
         </OnboardingProvider>
       ) : null}
       {action === "waiting" ? <WaitingRoom /> : null}
-      {action === "recover" ? <OnboardingProvider>
-        <RecoverAccount
-          onClose={() => setAction("onboard")}
-          {...defaultProps}
+      {action === "recover" ? (
+        <OnboardingProvider>
+          <RecoverAccount
+            onClose={() => setAction("onboard")}
+            {...defaultProps}
           />
-      </OnboardingProvider> : null}
+        </OnboardingProvider>
+      ) : null}
     </OptionsContainer>
   );
 };

packages/app-extension/src/components/Onboarding/pages/CreateOrImportWallet.tsx

@@ -1,5 +1,4 @@
-// @ts-expect-error
-import { PrimaryButton } from "@coral-xyz/react-native-core";
+import { PrimaryButton } from "@coral-xyz/tamagui";
 import { Box } from "@mui/material";
 
 import { SubtextParagraph } from "../../common";

packages/app-extension/src/components/Unlocked/AuthenticatedSync.tsx

@@ -1,5 +1,9 @@
-import { useEffect, Suspense } from "react";
-import type { EnrichedMessage, EnrichedNotification,SubscriptionType  } from "@coral-xyz/common";
+import { Suspense,useEffect } from "react";
+import type {
+  EnrichedMessage,
+  EnrichedNotification,
+  SubscriptionType,
+} from "@coral-xyz/common";
 import { BACKEND_API_URL } from "@coral-xyz/common";
 import { RecoilSync } from "@coral-xyz/db";
 import {
@@ -193,10 +197,15 @@ export const DbRecoilSync = ({ uuid }: { uuid: string }) => {
     };
   }, [uuid]);
 
-  return <Suspense fallback={null}> <NotificationsWrapper uuid={uuid} /> </Suspense>;
+  return (
+    <Suspense fallback={null}>
+      {" "}
+      <NotificationsWrapper uuid={uuid} />{" "}
+    </Suspense>
+  );
 };
 
-function NotificationsWrapper({uuid}: {uuid: string;}) {
+function NotificationsWrapper({ uuid }: { uuid: string }) {
   const _notifications: EnrichedNotification[] = useRecentNotifications({
     limit: 50,
     offset: 0,
@@ -230,7 +239,10 @@ export const useUpdateNotifications = () =>
           })
         );
         set(recentNotifications({ limit: 50, offset: 0, uuid: uuid }), [
-          {...notificationPayload, timestamp: new Date(notificationPayload.timestamp).getTime()},
+          {
+            ...notificationPayload,
+            timestamp: new Date(notificationPayload.timestamp).getTime(),
+          },
           ...(currentNotifications.valueMaybe() ?? []),
         ]);
       }

packages/app-extension/src/components/Unlocked/Balances/TokensWidget/Send.tsx

@@ -1,4 +1,4 @@
-import React, { type ChangeEvent,useEffect, useState } from "react";
+import React, { type ChangeEvent, useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import {
   getHashedName,

packages/app-extension/src/components/common/WithTheme.tsx

@@ -1,8 +1,9 @@
-import type { ReactNode} from "react";
+import type { ReactNode } from "react";
 import { Suspense } from "react";
 import { EXTENSION_HEIGHT, EXTENSION_WIDTH } from "@coral-xyz/common";
 import { WithThemeInner } from "@coral-xyz/react-common";
 import { useDarkMode } from "@coral-xyz/recoil";
+import { config, TamaguiProvider } from "@coral-xyz/tamagui";
 
 export const WithTheme = ({ children }: { children: ReactNode }) => {
   return (
@@ -14,7 +15,15 @@ export const WithTheme = ({ children }: { children: ReactNode }) => {
 
 const WithThemeMode = ({ children }: { children: ReactNode }) => {
   const isDarkMode = useDarkMode();
-  return <WithThemeInner isDarkMode={isDarkMode}>{children}</WithThemeInner>;
+
+  return (
+    <TamaguiProvider
+      config={config}
+      defaultTheme={isDarkMode ? "dark" : "light"}
+    >
+      <WithThemeInner isDarkMode={isDarkMode}>{children}</WithThemeInner>
+    </TamaguiProvider>
+  );
 };
 
 // Used as a suspense fallback when loading the theme from the background.

packages/app-extension/tamagui.config.ts

@@ -0,0 +1,2 @@
+import { config } from "@coral-xyz/tamagui";
+export default config;

packages/app-extension/webpack.config.js

@@ -1,18 +1,17 @@
-const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-const { DuplicatesPlugin } = require("inspectpack/plugin");
-const { ProgressPlugin, ProvidePlugin } = require("webpack");
+const { ProgressPlugin, ProvidePlugin, DefinePlugin } = require("webpack");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const path = require("path");
 const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
 const fs = require("fs");
 
+const NODE_ENV = process.env.NODE_ENV || "development";
 const EXTENSION_NAME =
-  process.env.NODE_ENV === "development" ? "(DEV) Backpack" : "Backpack";
+  NODE_ENV === "development" ? "(DEV) Backpack" : "Backpack";
 
-const isDevelopment = process.env.NODE_ENV === "development";
+const isDevelopment = NODE_ENV === "development";
 const appDirectory = path.resolve(__dirname);
 
 // This is needed for webpack to compile JavaScript.
@@ -69,6 +68,14 @@ const swcLoaderConfiguration = {
   },
 };
 
+const tamaguiLoaderConfiguration = {
+  loader: "tamagui-loader",
+  options: {
+    config: "./tamagui.config.ts",
+    components: ["@coral-xyz/tamagui", "tamagui"],
+  },
+};
+
 const fileExtensions = [
   "eot",
   "gif",
@@ -131,7 +138,7 @@ const {
     };
 
 const options = {
-  mode: process.env.NODE_ENV,
+  mode: NODE_ENV,
   entry: {
     background: "./src/background/index.ts",
     options: "./src/options/index.tsx",
@@ -183,10 +190,16 @@ const options = {
       },
       babelLoaderConfiguration,
       swcLoaderConfiguration,
+      // tamaguiLoaderConfiguration, // NOTE(peter) turned off for now bc it's not working with our webpack conifg. it's just an optimization compiler that we can configure later once i figure it out
     ],
   },
   resolve: {
     alias: {
+      // // NOTE(peter): for whatever reason react is being installed in multiple places and breaking tamagui
+      // // this was the best i could do to ensure it pulls the correct version until i figure out why. this is what's supposed to happen anyway
+      // // if you find yourself here, run `ls node_modules/react` and if the folder exists, this stays, if it doesn't, you can safely remove
+      // react: path.resolve("../../node_modules/react"),
+      // "react-dom": path.resolve("../../node_modules/react-dom"),
       "react-native$": "react-native-web",
     },
     // Add support for web-based extensions so we can share code between mobile/extension
@@ -205,6 +218,17 @@ const options = {
     },
   },
   plugins: [
+    new DefinePlugin({
+      process: {
+        env: {
+          __DEV__: NODE_ENV === "development" ? "true" : "false",
+          IS_STATIC: '""',
+          NODE_ENV: JSON.stringify(NODE_ENV),
+          TAMAGUI_TARGET: JSON.stringify("web"),
+          DEBUG: JSON.stringify(process.env.DEBUG || "0"),
+        },
+      },
+    }),
     new CleanWebpackPlugin(),
     ...plugins,
     new MiniCssExtractPlugin(),
@@ -241,7 +265,7 @@ const options = {
         },
         {
           // use a different icon depending on the NODE_ENV
-          from: `src/anchor-${process.env.NODE_ENV}.png`,
+          from: `src/anchor-${NODE_ENV}.png`,
           to: "anchor.png",
           force: true,
         },

packages/app-extension/webpack.dev.config.js

@@ -2,6 +2,11 @@ const path = require("path");
 const options = require("./webpack.config");
 
 options.resolve.alias = {
+  // NOTE(peter): for whatever reason react is being installed in multiple places and breaking tamagui
+  // this was the best i could do to ensure it pulls the correct version until i figure out why. this is what's supposed to happen anyway
+  // if you find yourself here, run `ls node_modules/react` and if the folder exists, this stays, if it doesn't, you can safely remove
+  react: path.resolve("../../node_modules/react"),
+  "react-dom": path.resolve("../../node_modules/react-dom"),
   "@coral-xyz/chat-sdk": path.resolve(__dirname, "../chat-sdk/src"),
   "@coral-xyz/themes": path.resolve(__dirname, "../themes/src"),
   "@coral-xyz/recoil": path.resolve(__dirname, "../recoil/src"),

packages/app-mobile/babel.config.js

@@ -1,7 +1,25 @@
-module.exports = function (api) {
+process.env.TAMAGUI_TARGET = "native"; // Don't forget to specify your TAMAGUI_TARGET here
+
+module.exports = function(api) {
   api.cache(true);
   return {
     presets: ["babel-preset-expo"],
-    plugins: ["react-native-reanimated/plugin"],
+    plugins: [
+      [
+        "@tamagui/babel-plugin",
+        {
+          // exclude: /node_modules/,
+          components: ["@coral-xyz/tamagui", "tamagui"],
+          config: "./tamagui.config.ts",
+        },
+      ],
+      [
+        "transform-inline-environment-variables",
+        {
+          include: "TAMAGUI_TARGET",
+        },
+      ],
+      "react-native-reanimated/plugin",
+    ],
   };
 };

packages/app-mobile/package.json

@@ -17,11 +17,12 @@
     "@cardinal/payment-manager": "^1.7.9",
     "@cardinal/token-manager": "^1.7.9",
     "@coral-xyz/common": "*",
+    "@coral-xyz/tamagui": "*",
     "@coral-xyz/recoil": "*",
-    "@coral-xyz/react-native-core": "*",
     "@ethersproject/shims": "^5.7.0",
     "@expo/react-native-action-sheet": "^4.0.1",
     "@expo/vector-icons": "^13.0.0",
+    "@floating-ui/react-native": "^0.9.0",
     "@gorhom/bottom-sheet": "^4.4.5",
     "@metaplex-foundation/mpl-token-metadata": "^2.7.0",
     "@project-serum/anchor": "^0.24.2",
@@ -35,7 +36,7 @@
     "expo": "^48.0.4",
     "expo-blur": "~12.2.1",
     "expo-checkbox": "~2.3.1",
-    "expo-clipboard": "~4.1.1",
+    "expo-clipboard": "~4.1.2",
     "expo-constants": "~14.2.1",
     "expo-crypto": "~12.2.1",
     "expo-device": "~5.2.1",
@@ -56,21 +57,23 @@
     "react-native-screens": "~3.20.0",
     "react-native-svg": "13.4.0",
     "react-native-url-polyfill": "^1.3.0",
-    "react-native-web": "~0.18.7",
+    "react-native-web": "~0.18.12",
     "react-native-webview": "11.26.0",
     "react-qr-code": "^2.0.8",
     "react-test-renderer": "^18.2.0",
     "recoil": "^0.7.6",
+    "tamagui": "^1.7.1",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
     "@testing-library/jest-native": "^5.1.2",
     "@types/jest": "^28.1.6",
     "@types/react": "^18.0.28",
-    "@types/react-native": "~0.70.6",
+    "@types/react-native": "~0.71.3",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "@typescript-eslint/parser": "^5.31.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "eslint": "^8.20.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",