fix nft/token sending on mobile (#3624)

* init * fix nft sending * fix balances * fix useravatar * updates * combines send helpers * parse TextEncoder / TextDecoer * fix nft sending * tbd
coral-xyz · Apr 7, 2023 · dc3a6fd · dc3a6fd · vercel · Apr 7, 2023
1 parent 7d51e40
commit dc3a6fd
Show file tree

Hide file tree

Showing 19 changed files with 652 additions and 393 deletions.
diff --git a/packages/app-mobile/eas.json b/packages/app-mobile/eas.json
@@ -59,7 +59,9 @@
   "submit": {
     "production": {
       "ios": {
-        "appName": "Backpack Crypto Wallet"
+        "appName": "Backpack Crypto Wallet",
+        "ascAppId": "6445964121",
+        "appleTeamId": "3BZAP22DU6"
       }
     }
   }

diff --git a/packages/app-mobile/index.js b/packages/app-mobile/index.js
@@ -1,6 +1,7 @@
 import * as SQLite from "expo-sqlite";
 
 import { registerRootComponent } from "expo";
+import { TextEncoder, TextDecoder } from "fast-text-encoding";
 import setGlobalVars from "indexeddbshim/dist/indexeddbshim-noninvasive";
 import "./src/crypto-shim";
 
@@ -12,6 +13,13 @@ if (typeof BigInt === "undefined") {
   global.BigInt = require("big-integer");
 }
 
+// https://github.com/expo/browser-polyfill
+global.TextDecoder = global.TextDecoder || TextDecoder;
+global.TextEncoder = global.TextEncoder || TextEncoder;
+
+console.log("TextDecoder", TextDecoder);
+console.log("TextEncoder", TextEncoder);
+
 setGlobalVars(window, { checkOrigin: false, win: SQLite });
 
 // eslint-disable-next-line

diff --git a/packages/app-mobile/package.json b/packages/app-mobile/package.json
@@ -58,6 +58,7 @@
     "expo-status-bar": "~1.4.4",
     "expo-system-ui": "~2.2.1",
     "expo-updates": "~0.16.4",
+    "fast-text-encoding": "^1.0.6",
     "indexeddbshim": "^11.0.0-beta.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/packages/app-mobile/src/components/BottomDrawerCards.tsx b/packages/app-mobile/src/components/BottomDrawerCards.tsx
@@ -34,7 +34,7 @@ export function Container({
 
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: 16,
+    paddingHorizontal: 0,
   },
 });
 
@@ -179,7 +179,9 @@ export function Error({
       <IconContainer>
         <CrossIcon />
       </IconContainer>
-      <Text style={{ color: theme.custom.colors.fontColor }}>{error}</Text>
+      <Box mb={16}>
+        <Text style={{ color: theme.custom.colors.fontColor }}>{error}</Text>
+      </Box>
       {explorer && connectionUrl && signature ? (
         <SecondaryButton
           label="View Explorer"

diff --git a/packages/app-mobile/src/components/BottomSheetHelpModal.tsx b/packages/app-mobile/src/components/BottomSheetHelpModal.tsx
@@ -5,22 +5,23 @@ import { FlatList, Pressable, StyleSheet } from "react-native";
 
 import * as Linking from "expo-linking";
 
-import { Margin, RoundedContainerGroup } from "~components/index";
 import {
   BACKPACK_LINK,
   DISCORD_INVITE_LINK,
   TWITTER_LINK,
 } from "@coral-xyz/common";
 import { MaterialIcons } from "@expo/vector-icons";
 import { BottomSheetBackdrop, BottomSheetModal } from "@gorhom/bottom-sheet";
+
+import { BetterBottomSheet } from "~components/BottomSheetModal";
+import { DiscordIcon, TwitterIcon } from "~components/Icon";
+import { Margin, RoundedContainerGroup } from "~components/index";
+import { useTheme } from "~hooks/useTheme";
 import {
   IconLaunchDetail,
   SettingsRow,
 } from "~screens/Unlocked/Settings/components/SettingsRow";
 
-import { DiscordIcon, TwitterIcon } from "~components/Icon";
-import { useTheme } from "~hooks/useTheme";
-
 export function HelpModalMenuButton({
   onPress,
 }: {
@@ -57,35 +58,6 @@ export function BottomSheetHelpModal({
   extraOptions?: any[];
 }): JSX.Element {
   const theme = useTheme();
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
-
-  useEffect(() => {
-    function handle() {
-      if (isVisible) {
-        bottomSheetModalRef.current?.present();
-        // Resets visibility since dismissing it is built-in
-        resetVisibility();
-      }
-    }
-
-    handle();
-  }, [isVisible, resetVisibility]);
-
-  const modalHeight = extraOptions.length
-    ? 240 + extraOptions.length * 48
-    : 240;
-  const snapPoints = useMemo(() => [modalHeight], [modalHeight]);
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        pressBehavior="close"
-        appearsOnIndex={0}
-        disappearsOnIndex={-1}
-      />
-    ),
-    []
-  );
 
   const menuOptions = [
     ...extraOptions,
@@ -116,37 +88,29 @@ export function BottomSheetHelpModal({
   ];
 
   return (
-    <BottomSheetModal
-      ref={bottomSheetModalRef}
-      index={0}
-      snapPoints={snapPoints}
-      backdropComponent={renderBackdrop}
-      contentHeight={modalHeight}
-      handleStyle={{
-        marginBottom: 12,
-      }}
-      backgroundStyle={{
-        backgroundColor: theme.custom.colors.background,
-      }}
-    >
-      <Margin horizontal={16}>
-        <RoundedContainerGroup>
-          <FlatList
-            data={menuOptions}
-            scrollEnabled={false}
-            renderItem={({ item }) => {
-              return (
-                <SettingsRow
-                  onPress={item.onPress}
-                  icon={item.icon}
-                  detailIcon={item.detailIcon}
-                  label={item.label}
-                />
-              );
-            }}
-          />
-        </RoundedContainerGroup>
-      </Margin>
-    </BottomSheetModal>
+    <BetterBottomSheet isVisible={isVisible} resetVisibility={resetVisibility}>
+      <Content menuOptions={menuOptions} />
+    </BetterBottomSheet>
+  );
+}
+
+function Content({ menuOptions }: { menuOptions: any[] }): JSX.Element {
+  return (
+    <RoundedContainerGroup>
+      <FlatList
+        data={menuOptions}
+        scrollEnabled={false}
+        renderItem={({ item }) => {
+          return (
+            <SettingsRow
+              onPress={item.onPress}
+              icon={item.icon}
+              detailIcon={item.detailIcon}
+              label={item.label}
+            />
+          );
+        }}
+      />
+    </RoundedContainerGroup>
   );
 }
diff --git a/packages/app-mobile/src/components/BottomSheetModal.tsx b/packages/app-mobile/src/components/BottomSheetModal.tsx
@@ -5,10 +5,15 @@ import { Pressable, StyleSheet } from "react-native";
 
 import { MaterialIcons } from "@expo/vector-icons";
 import {
-  BottomSheetBackdrop,
   BottomSheetModal as _BottomSheetModal,
+  BottomSheetView,
+  // BottomSheetFooter,
+  BottomSheetBackdrop,
+  useBottomSheetDynamicSnapPoints,
 } from "@gorhom/bottom-sheet";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
+import { StyledText } from "~components/index";
 import { useTheme } from "~hooks/useTheme";
 
 export function HelpModalMenuButton({
@@ -28,15 +33,6 @@ export function HelpModalMenuButton({
   );
 }
 
-const styles = StyleSheet.create({
-  button: {
-    position: "absolute",
-    top: 16,
-    right: 32,
-    zIndex: 999,
-  },
-});
-
 export function BottomSheetModal({
   isVisible,
   resetVisibility,
@@ -103,3 +99,109 @@ export function BottomSheetModal({
     </_BottomSheetModal>
   );
 }
+
+export const BetterBottomSheet = ({
+  isVisible,
+  resetVisibility,
+  children,
+}: {
+  isVisible: boolean;
+  resetVisibility: () => void;
+  children: JSX.Element | JSX.Element[];
+}) => {
+  const theme = useTheme();
+  const initialSnapPoints = useMemo(() => ["CONTENT_HEIGHT"], []);
+  const bottomSheetRef = useRef<_BottomSheetModal>(null);
+
+  const {
+    animatedHandleHeight,
+    animatedSnapPoints,
+    animatedContentHeight,
+    handleContentLayout,
+  } = useBottomSheetDynamicSnapPoints(initialSnapPoints);
+
+  useEffect(() => {
+    (function handle() {
+      if (isVisible) {
+        bottomSheetRef.current?.present();
+        // Resets visibility since dismissing it is built-in
+        resetVisibility();
+      }
+    })();
+  }, [isVisible, resetVisibility]);
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        pressBehavior="close"
+        appearsOnIndex={0}
+        disappearsOnIndex={-1}
+      />
+    ),
+    []
+  );
+
+  return (
+    <_BottomSheetModal
+      ref={bottomSheetRef}
+      snapPoints={animatedSnapPoints}
+      backdropComponent={renderBackdrop}
+      handleHeight={animatedHandleHeight}
+      contentHeight={animatedContentHeight}
+      backgroundStyle={{
+        backgroundColor: theme.custom.colors.background,
+      }}
+    >
+      <InnerSheet onLayout={handleContentLayout}>{children}</InnerSheet>
+    </_BottomSheetModal>
+  );
+};
+
+function InnerSheet({
+  children,
+  onLayout,
+  ...props
+}: {
+  children: JSX.Element;
+  onLayout: (data: any) => void;
+}): JSX.Element {
+  const insets = useSafeAreaInsets();
+  const theme = useTheme();
+  return (
+    <BottomSheetView
+      onLayout={onLayout}
+      style={[
+        styles.containerStyle,
+        {
+          paddingBottom: insets.bottom + 12,
+          backgroundColor: theme.custom.colors.background,
+        },
+      ]}
+      {...props}
+    >
+      {children}
+    </BottomSheetView>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    position: "absolute",
+    top: 16,
+    right: 32,
+    zIndex: 999,
+  },
+  containerStyle: {
+    paddingTop: 12,
+    paddingHorizontal: 16,
+  },
+});
+
+export function Header({ text }: { text: string }): JSX.Element {
+  return (
+    <StyledText fontSize={18} textAlign="center">
+      {text}
+    </StyledText>
+  );
+}
diff --git a/packages/app-mobile/src/components/Messages.tsx b/packages/app-mobile/src/components/Messages.tsx
@@ -184,7 +184,7 @@ export function ChatListItem({
       pressTheme
       height={ROW_HEIGHT}
       justifyContent="flex-start"
-      icon={<UserAvatar size={AVATAR_SIZE} imageUrl={image} />}
+      icon={<UserAvatar size={AVATAR_SIZE} uri={image} />}
       onPress={() => {
         if (type === "individual") {
           onPress({

diff --git a/packages/app-mobile/src/components/StyledTextInput.tsx b/packages/app-mobile/src/components/StyledTextInput.tsx
@@ -91,5 +91,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontFamily: "Inter_500Medium",
     fontWeight: "500",
+    width: "100%",
   },
 });
diff --git a/packages/app-mobile/src/components/Unlocked/Balances/TransferWidget.tsx b/packages/app-mobile/src/components/Unlocked/Balances/TransferWidget.tsx
@@ -5,7 +5,7 @@ import { Blockchain } from "@coral-xyz/common";
 // import // SwapProvider, // TODO(peter): turn back on when app store approved
 // enabledBlockchains as enabledBlockchainsAtom,
 // "@coral-xyz/recoil";
-import { XStack } from "@coral-xyz/tamagui";
+import { Box } from "@coral-xyz/tamagui";
 import { MaterialIcons } from "@expo/vector-icons";
 // import { useRecoilValueLoadable } from "recoil";
 
@@ -54,11 +54,20 @@ export function TransferWidget({
   };
 
   return (
-    <XStack space jc="center">
+    <View
+      style={{
+        alignSelf: "center",
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "center",
+      }}
+    >
       {rampEnabled ? (
         <RampButton blockchain={blockchain} address={address} />
       ) : null}
-      <ReceiveButton onPress={onPress} blockchain={blockchain} />
+      <Box mx={8}>
+        <ReceiveButton onPress={onPress} blockchain={blockchain} />
+      </Box>
       <SendButton onPress={onPress} blockchain={blockchain} token={token} />
       {swapEnabled ? (
         <SwapButton
@@ -67,7 +76,7 @@ export function TransferWidget({
         // address={address}
         />
       ) : null}
-    </XStack>
+    </View>
   );
 }