Fixed wallet page power up user selection

src/features/shared/suggestion-list/_index.scss

@@ -8,10 +8,6 @@
     z-index: 10;
   }
 
-  .suggestion-list-parent {
-    @apply absolute border border-[--border-color] left-0 top-[calc(100%+0.5rem)] w-full z-[100] rounded-2xl overflow-hidden min-w-[200px] bg-white dark:bg-dark-600-010-light mb-4
-  }
-
   .search-suggestion-list {
 
     .list-body {
@@ -21,19 +17,7 @@
   }
 
   .modal-suggestion-list {
-    width: 100%;
-    box-shadow: $box-shadow;
-    z-index: 9;
-    min-width: 200px;
-    overflow: hidden;
-
-    @include themify(day) {
-      @apply bg-white;
-    }
-
-    @include themify(night) {
-      @apply bg-dark-600-010-light;
-    }
+    @apply w-full border border-[--border-color] rounded-2xl z-10 min-w-[200px] bg-white overflow-hidden;
 
     .list-body {
       max-height: 200px;
@@ -49,11 +33,6 @@
         align-items: center;
         white-space: nowrap;
 
-        &:last-child {
-          border-bottom-left-radius: $border-radius;
-          border-bottom-right-radius: $border-radius;
-        }
-
         @include themify(day) {
           @apply text-gray-warm;
 

src/features/shared/suggestion-list/index.tsx

@@ -185,20 +185,19 @@ export function SuggestionList({
                 opacity: 0,
                 scaleY: 0.85
               }}
-              className="suggestion-list-parent origin-top"
+              className="absolute border border-[--border-color] left-0 top-[calc(100%+0.5rem)] w-full z-[100] rounded-2xl overflow-hidden min-w-[200px] bg-white mb-4 origin-top"
             >
-              {modeItems.map((modeItem, modeKey) => {
-                const _items = modeItem.items;
-                return (
-                  _items.length > 0 && (
+              {modeItems.map(
+                (modeItem, modeKey) =>
+                  modeItem.items.length > 0 && (
                     <div className="search-suggestion-list" key={modeKey}>
                       {modeItem.header && (
                         <div className="bg-gray-100 dark:bg-gray-900 text-sm font-semibold text-gray-600 dark:text-gray-400 p-2">
                           {modeItem.header}
                         </div>
                       )}
                       <div className="list-body">
-                        {_items.map((x: any, i: number) => (
+                        {modeItem.items.map((x: any, i: number) => (
                           <a
                             href="#"
                             key={i}
@@ -215,8 +214,7 @@ export function SuggestionList({
                       </div>
                     </div>
                   )
-                );
-              })}
+              )}
               <div className="search-suggestion-list more-result">
                 <div className="list-body">
                   <a
@@ -249,7 +247,7 @@ export function SuggestionList({
               style={listStyle}
             >
               {header && (
-                <div className="bg-gray-100 dark:bg-gray-700 text-sm font-semibold text-gray-600 px-2 pb-2 pt-12">
+                <div className="bg-gray-100 dark:bg-dark-200 text-xs font-semibold text-gray-600 dark:text-white p-4">
                   {header}
                 </div>
               )}
@@ -258,7 +256,7 @@ export function SuggestionList({
                   <a
                     href="#"
                     key={i}
-                    className="flex pointer items-center px-4 py-3 text-gray-warm hover:bg-blue-dark-sky-040 dark:text-silver dark:hover:text-white dark:bg-dark-200 dark:hover:bg-dark-default duration-300 border-b border-[--border-color] last:border-0"
+                    className="flex gap-2 pointer items-center px-4 py-3 text-gray-warm hover:bg-blue-dark-sky-040 dark:text-silver dark:hover:text-white dark:bg-dark-200 dark:hover:bg-dark-default duration-300 border-b border-[--border-color] last:border-0"
                     onClick={(e: React.MouseEvent) => {
                       e.preventDefault();
                       onSelect?.(x);

src/features/shared/transfer/transfer-step-1-to.tsx

@@ -0,0 +1,89 @@
+import i18next from "i18next";
+import { SuggestionList, UserAvatar } from "@/features/shared";
+import { FormControl, InputGroup } from "@ui/input";
+import { TransferFormText } from "@/features/shared/transfer/transfer-form-text";
+import React, { useContext, useMemo } from "react";
+import { TransferSharedStateContext } from "@/features/shared/transfer/transfer-shared-state";
+import { getTransactionsQuery } from "@/api/queries";
+import { useGlobalStore } from "@/core/global-store";
+
+interface Props {
+  toWarning: string | undefined;
+  toError: Error | null;
+}
+
+export function TransferStep1To({ toWarning, toError }: Props) {
+  const { setTo, to, exchangeWarning } = useContext(TransferSharedStateContext);
+
+  const activeUser = useGlobalStore((s) => s.activeUser);
+
+  const { data: transactions } = getTransactionsQuery(activeUser?.username).useClientQuery();
+  const transactionsFlow = useMemo(
+    () => transactions?.pages.reduce((acc, page) => [...acc, ...page], []) ?? [],
+    [transactions]
+  );
+
+  const recent = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          transactionsFlow
+            .filter(
+              (x) =>
+                (x.type === "transfer" && x.from === activeUser?.username) ||
+                (x.type === "delegate_vesting_shares" && x.delegator === activeUser?.username)
+            )
+            .map((x) =>
+              x.type === "transfer" ? x.to : x.type === "delegate_vesting_shares" ? x.delegatee : ""
+            )
+            .filter((x) => {
+              if (to!.trim() === "") {
+                return true;
+              }
+
+              return x.indexOf(to!) !== -1;
+            })
+            .reverse()
+            .slice(0, 5)
+        ) ?? []
+      ),
+    [activeUser?.username, to, transactionsFlow]
+  );
+
+  return (
+    <>
+      <div className="grid items-center grid-cols-12 mb-4">
+        <div className="col-span-12 sm:col-span-2">
+          <label>{i18next.t("transfer.to")}</label>
+        </div>
+        <div className="col-span-12 sm:col-span-10">
+          <SuggestionList
+            onSelect={(to: string) => setTo(to)}
+            items={recent}
+            renderer={(i) => (
+              <>
+                <UserAvatar username={i} size="medium" />
+                <span style={{ marginLeft: "4px" }}>{i}</span>
+              </>
+            )}
+            header={i18next.t("transfer.recent-transfers")}
+          >
+            <InputGroup prepend="@">
+              <FormControl
+                type="text"
+                autoFocus={to === ""}
+                placeholder={i18next.t("transfer.to-placeholder")}
+                value={to}
+                onChange={(e) => setTo(e.target.value)}
+                className={toError ? "is-invalid" : ""}
+              />
+            </InputGroup>
+          </SuggestionList>
+        </div>
+      </div>
+      {toWarning && <TransferFormText msg={toWarning} type="danger" />}
+      {toError && <TransferFormText msg={i18next.t("transfer.to-not-found")} type="danger" />}
+      {exchangeWarning && <TransferFormText msg={exchangeWarning} type="danger" />}
+    </>
+  );
+}