Merge branch 'main' of https://github.com/TERITORI/teritori-dapp into…

… feat/social-feed-update-ai
TERITORI · Jul 14, 2023 · 11e4be5 · 11e4be5
2 parents 1c0e184 + 9391963
commit 11e4be5
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 81 deletions.
diff --git a/App.tsx b/App.tsx
@@ -19,7 +19,6 @@ import { Navigator } from "./packages/components/navigation/Navigator";
 import { DropdownsContextProvider } from "./packages/context/DropdownsProvider";
 import { FeedbacksContextProvider } from "./packages/context/FeedbacksProvider";
 import { SearchBarContextProvider } from "./packages/context/SearchBarProvider";
-import { SidebarContextProvider } from "./packages/context/SidebarProvider";
 import { TNSMetaDataListContextProvider } from "./packages/context/TNSMetaDataListProvider";
 import { TNSContextProvider } from "./packages/context/TNSProvider";
 import { TransactionModalsProvider } from "./packages/context/TransactionModalsProvider";
@@ -62,10 +61,8 @@ export default function App() {
                           <TNSContextProvider>
                             <TNSMetaDataListContextProvider>
                               <MenuProvider>
-                                <SidebarContextProvider>
-                                  <StatusBar style="inverted" />
-                                  <Navigator />
-                                </SidebarContextProvider>
+                                <StatusBar style="inverted" />
+                                <Navigator />
                               </MenuProvider>
                             </TNSMetaDataListContextProvider>
                           </TNSContextProvider>

diff --git a/packages/components/inputs/SearchNSInputContainer.tsx b/packages/components/inputs/SearchNSInputContainer.tsx
@@ -0,0 +1,50 @@
+import React, { FC } from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+
+import { useNameSearch } from "../../hooks/search/useNameSearch";
+import { useSelectedNetworkId } from "../../hooks/useSelectedNetwork";
+import { layout } from "../../utils/style/layout";
+import { AvatarWithName } from "../user/AvatarWithName";
+
+// Used as a wrapper on a TextInput or something like. It allows to search a name in TNS and returns the address.
+export const SearchNSInputContainer: FC<{
+  searchText: string;
+  onPressName: (userId: string) => void;
+  style?: StyleProp<ViewStyle>;
+}> = ({ searchText, onPressName, style, children }) => {
+  const selectedNetworkId = useSelectedNetworkId();
+  const { names } = useNameSearch({
+    networkId: selectedNetworkId,
+    input: searchText,
+    limit: 12,
+  });
+  const hasNames = !!names.length;
+
+  return (
+    <>
+      {children}
+      {hasNames && (
+        <View
+          style={[
+            {
+              flexDirection: "row",
+              flexWrap: "wrap",
+              marginTop: layout.padding_x1_5,
+            },
+            style,
+          ]}
+        >
+          {names.map((n) => (
+            <AvatarWithName
+              key={n}
+              networkId={selectedNetworkId}
+              name={n}
+              onPress={(userId) => onPressName(userId)}
+              style={{ marginRight: layout.padding_x1 }}
+            />
+          ))}
+        </View>
+      )}
+    </>
+  );
+};
diff --git a/packages/components/modals/SendModal.tsx b/packages/components/modals/SendModal.tsx
@@ -36,6 +36,7 @@ import { SVG } from "../SVG";
 import { MaxButton } from "../buttons/MaxButton";
 import { PrimaryButton } from "../buttons/PrimaryButton";
 import { DAOSelector } from "../dao/DAOSelector";
+import { SearchNSInputContainer } from "../inputs/SearchNSInputContainer";
 import { TextInputCustom } from "../inputs/TextInputCustom";
 import { SpacerColumn, SpacerRow } from "../spacer";
 
@@ -64,7 +65,7 @@ export const SendModal: React.FC<SendModalProps> = ({
 }) => {
   const { setToastError, setToastSuccess } = useFeedbacks();
   const selectedWallet = useSelectedWallet();
-  const { control, setValue, handleSubmit } = useForm<TransactionForm>();
+  const { control, setValue, handleSubmit, watch } = useForm<TransactionForm>();
   const [selectedDAOId, setSelectedDAOId] = useState("");
   const makeProposal = useDAOMakeProposal(selectedDAOId);
   const [, daoAddress] = parseUserId(selectedDAOId);
@@ -206,19 +207,27 @@ export const SendModal: React.FC<SendModalProps> = ({
     >
       <FlexRow alignItems="flex-end">
         <FlexCol alignItems="flex-start" width={356}>
-          <TextInputCustom<TransactionForm>
-            height={48}
-            width={320}
-            control={control}
-            variant="labelOutside"
-            label="Receiver"
-            name="toAddress"
-            rules={{ required: true }}
-            placeHolder={`Enter a ${
-              getNetwork(networkId)?.displayName || networkId
-            } address`}
-            defaultValue=""
-          />
+          <SearchNSInputContainer
+            onPressName={(userId) => {
+              const [, userAddress] = parseUserId(userId);
+              setValue("toAddress", userAddress);
+            }}
+            searchText={watch("toAddress")}
+          >
+            <TextInputCustom<TransactionForm>
+              height={48}
+              width={320}
+              control={control}
+              variant="labelOutside"
+              label="Receiver"
+              name="toAddress"
+              rules={{ required: true }}
+              placeHolder={`Enter a ${
+                getNetwork(networkId)?.displayName || networkId
+              } name or address`}
+              defaultValue=""
+            />
+          </SearchNSInputContainer>
         </FlexCol>
         <ContactButton />
       </FlexRow>

diff --git a/packages/components/navigation/BuyTokens.tsx b/packages/components/navigation/BuyTokens.tsx
@@ -1,30 +1,32 @@
 import React from "react";
-import { Linking, TouchableOpacity } from "react-native";
+import { Linking, TextStyle, TouchableOpacity } from "react-native";
 import { CreditCardIcon } from "react-native-heroicons/outline";
 
 import { primaryColor } from "../../utils/style/colors";
-import { fontBold16 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
 import { BrandText } from "../BrandText";
 
-export const BuyTokens: React.FC = () => {
+export const BuyTokens: React.FC<{
+  flexDirection: "row" | "column";
+  textStyle: TextStyle;
+}> = ({ flexDirection, textStyle }) => {
   return (
     <TouchableOpacity
       style={{
         justifyContent: "center",
         alignItems: "center",
         marginBottom: layout.padding_x1,
-        flexDirection: "row",
+        flexDirection,
       }}
       onPress={() => {
         Linking.openURL("https://frontier.osmosis.zone/?from=OSMO&to=TORI");
       }}
     >
       <CreditCardIcon
         color={primaryColor}
-        style={{ marginRight: layout.padding_x1 }}
+        style={{ marginRight: flexDirection === "row" ? layout.padding_x1 : 0 }}
       />
-      <BrandText style={fontBold16}>Buy Tokens</BrandText>
+      <BrandText style={textStyle}>Buy Tokens</BrandText>
     </TouchableOpacity>
   );
 };
diff --git a/packages/components/navigation/Sidebar.tsx b/packages/components/navigation/Sidebar.tsx
@@ -22,6 +22,7 @@ import useSelectedWallet from "../../hooks/useSelectedWallet";
 import { NetworkKind } from "../../networks";
 import { useAppNavigation } from "../../utils/navigation";
 import { neutral17, neutral33 } from "../../utils/style/colors";
+import { fontBold16, fontBold9 } from "../../utils/style/fonts";
 import {
   smallSidebarWidth,
   fullSidebarWidth,
@@ -146,7 +147,10 @@ export const Sidebar: React.FC = () => {
       />
       <View>
         <SidebarSeparator />
-        <BuyTokens />
+        <BuyTokens
+          flexDirection={isSidebarExpanded ? "row" : "column"}
+          textStyle={isSidebarExpanded ? fontBold16 : fontBold9}
+        />
         <SidebarSeparator />
 
         {selectedNetworkKind === NetworkKind.Cosmos &&

diff --git a/packages/components/user/AvatarWithName.tsx b/packages/components/user/AvatarWithName.tsx
@@ -18,7 +18,7 @@ export const AvatarWithName: React.FC<
         userId: string | undefined;
       }
   ) & {
-    style: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>;
     onPress: (userId: string) => void;
   }
 > = (props) => {
@@ -31,7 +31,7 @@ export const AvatarWithName: React.FC<
 export const AvatarWithNameFromName: React.FC<{
   networkId: string | undefined;
   name: string | undefined;
-  style: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
   onPress: (userId: string) => void;
 }> = ({ networkId, name, style, onPress }) => {
   const { nameOwner } = useNSNameOwner(networkId, name);
@@ -47,7 +47,7 @@ export const AvatarWithNameFromName: React.FC<{
 
 export const AvatarWithNameFromUserId: React.FC<{
   userId: string | undefined;
-  style: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
   onPress: (userId: string) => void;
 }> = ({ userId, style, onPress }) => {
   const { primaryAlias } = useNSPrimaryAlias(userId);
@@ -64,7 +64,7 @@ export const AvatarWithNameFromUserId: React.FC<{
 export const AvatarWithNameView: React.FC<{
   name: string | undefined;
   userId: string | undefined;
-  style: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
   onPress: (userId: string) => void;
 }> = ({ name, userId, style, onPress }) => {
   const [, userAddress] = parseUserId(userId);

diff --git a/packages/context/SidebarProvider.tsx b/packages/context/SidebarProvider.tsx
@@ -1,47 +1,33 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useMemo,
-} from "react";
-import { useWindowDimensions } from "react-native";
+import { useEffect, useMemo } from "react";
 import { useSelector } from "react-redux";
 
+import { useIsMobile } from "../hooks/useIsMobile";
 import { getValuesFromId, SEPARATOR } from "../screens/DAppStore/query/util";
 import {
   selectAvailableApps,
   selectCheckedApps,
   setSelectedApps,
 } from "../store/slices/dapps-store";
+import {
+  selectSidebarExpanded,
+  setSidebarExpanded,
+} from "../store/slices/settings";
 import { useAppDispatch } from "../store/store";
 import { SIDEBAR_LIST } from "../utils/sidebar";
 
-interface DefaultValue {
-  isSidebarExpanded: boolean;
-  toggleSidebar: () => void;
-  dynamicSidebar: { [p: string]: any };
-}
-
-const defaultValue: DefaultValue = {
-  isSidebarExpanded: false,
-  toggleSidebar: () => {},
-  dynamicSidebar: {},
-};
-
-const SidebarContext = createContext(defaultValue);
-
-const MOBILE_WIDTH = 768;
-
-export const SidebarContextProvider: React.FC = ({ children }) => {
-  // The entered isSidebarExpanded
-  const [isSidebarExpanded, setIsSidebarExpanded] = useState<boolean>(
-    defaultValue.isSidebarExpanded
-  );
-
+export const useSidebar = () => {
+  const isSidebarExpanded = useSelector(selectSidebarExpanded);
   const selectedApps = useSelector(selectCheckedApps);
   const availableApps = useSelector(selectAvailableApps);
   const dispatch = useAppDispatch();
+  // on mobile sidebar is not expanded on load
+  const isMobile = useIsMobile();
+  useEffect(() => {
+    if (isMobile) {
+      dispatch(setSidebarExpanded(false));
+    }
+  }, [dispatch, isMobile]);
+
   useEffect(() => {
     if (selectedApps.length === 0 && Object.values(availableApps).length > 0) {
       dispatch(
@@ -87,27 +73,14 @@ export const SidebarContextProvider: React.FC = ({ children }) => {
 
     return dynamicAppsSelection;
   }, [availableApps, selectedApps]);
-  const { width: windowWidth } = useWindowDimensions();
 
-  useEffect(() => {
-    setIsSidebarExpanded(
-      windowWidth >= MOBILE_WIDTH ? defaultValue.isSidebarExpanded : false
-    );
-  }, [windowWidth]);
-
-  const toggleSidebar = () => setIsSidebarExpanded(!isSidebarExpanded);
+  const toggleSidebar = () => {
+    dispatch(setSidebarExpanded(!isSidebarExpanded));
+  };
 
-  return (
-    <SidebarContext.Provider
-      value={{
-        isSidebarExpanded,
-        toggleSidebar,
-        dynamicSidebar,
-      }}
-    >
-      {children}
-    </SidebarContext.Provider>
-  );
+  return {
+    isSidebarExpanded,
+    toggleSidebar,
+    dynamicSidebar,
+  };
 };
-
-export const useSidebar = () => useContext(SidebarContext);
diff --git a/packages/store/slices/settings.ts b/packages/store/slices/settings.ts
@@ -10,6 +10,7 @@ interface Settings {
   isAdenaConnected: boolean;
   alreadyVisited: boolean;
   areTestnetsEnabled: boolean;
+  sideBarExpanded: boolean;
 }
 
 const initialState: Settings = {
@@ -20,6 +21,7 @@ const initialState: Settings = {
   isAdenaConnected: false,
   alreadyVisited: false,
   areTestnetsEnabled: false,
+  sideBarExpanded: true,
 };
 
 export const selectSelectedNetworkId = (state: RootState) =>
@@ -37,6 +39,9 @@ export const selectIsAdenaConnected = (state: RootState) =>
 export const selectAreTestnetsEnabled = (state: RootState) =>
   state.settings.areTestnetsEnabled;
 
+export const selectSidebarExpanded = (state: RootState) =>
+  state.settings.sideBarExpanded;
+
 export const selectNFTStorageAPI = (state: RootState) =>
   state.settings.NFTStorageAPI;
 
@@ -59,6 +64,9 @@ const settingsSlice = createSlice({
     setAreTestnetsEnabled: (state, action: PayloadAction<boolean>) => {
       state.areTestnetsEnabled = action.payload;
     },
+    setSidebarExpanded: (state, action: PayloadAction<boolean>) => {
+      state.sideBarExpanded = action.payload;
+    },
     setNFTStorageAPI: (state, action: PayloadAction<string>) => {
       state.NFTStorageAPI = action.payload;
     },
@@ -71,6 +79,7 @@ export const {
   setIsKeplrConnected,
   setIsAdenaConnected,
   setAreTestnetsEnabled,
+  setSidebarExpanded,
   setNFTStorageAPI,
 } = settingsSlice.actions;