Add token send page

packages/profile/src/components/app.tsx

@@ -4,7 +4,8 @@ import {
   Inventory,
   Collection,
   Asset,
-  Send,
+  SendCollection,
+  SendToken,
   Token,
 } from "@/components/inventory";
 import { Achievements } from "@/components/achievements";
@@ -17,13 +18,23 @@ export function App() {
       <Route element={<Outlet />}>
         <Route path="account/:username" element={<Account />}>
           <Route path="inventory" element={<Inventory />}>
-            <Route path="token/:address" element={<Token />} />
+            <Route path="token/:address" element={<Token />}>
+              <Route
+                path="send"
+                element={<SendToken />}
+              />
+            </Route>
           </Route>
           <Route path="activity" element={<Activity />} />
 
           <Route path="slot/:project" element={<Slot />}>
             <Route path="inventory" element={<Inventory />}>
-              <Route path="token/:address" element={<Token />} />
+              <Route path="token/:address" element={<Token />}>
+                <Route
+                  path="send"
+                  element={<SendToken />}
+                />
+              </Route>
             </Route>
             <Route path="achievements" element={<Achievements />}>
               <Route path=":address" element={<Achievements />} />
@@ -38,11 +49,11 @@ export function App() {
 
       <Route path="collection/:address" element={<Collection />}>
         <Route path=":tokenId" element={<Asset />} />
-        <Route path="send" element={<Send />} />
+        <Route path="send" element={<SendCollection />} />
       </Route>
 
       <Route path="*" element={<div>Page not found</div>} />
-    </Routes>
+    </Routes >
   );
 }
 

packages/profile/src/components/inventory/collection/index.ts

@@ -0,0 +1,4 @@
+export * from "./asset";
+export * from "./collection";
+export * from "./collections";
+export * from "./send";

packages/profile/src/components/inventory/send.tsx → packages/profile/src/components/inventory/collection/send.tsx

@@ -6,7 +6,7 @@ import {
   LayoutHeader,
 } from "@/components/layout";
 
-export function Send() {
+export function SendCollection() {
   const { address } = useParams<{ address: string }>();
   const [searchParams] = useSearchParams();
   const tokenIds = searchParams.getAll("tokenIds");

packages/profile/src/components/inventory/index.tsx

@@ -1,7 +1,5 @@
-export { Asset } from "./asset";
-export { Collection } from "./collection";
-export { Send } from "./send";
-export { Token } from "./token";
+export { Asset, Collection, SendCollection } from "./collection";
+export { Token, SendToken } from "./token";
 
 import { CopyAddress } from "@cartridge/ui-next";
 import {
@@ -11,7 +9,7 @@ import {
 } from "@/components/layout";
 import { Navigation } from "../navigation";
 // import { Collections } from "./collections";
-import { Tokens } from "./tokens";
+import { Tokens } from "./token";
 import { useAccount } from "@/hooks/account";
 import { Outlet, useParams } from "react-router-dom";
 

packages/profile/src/components/inventory/token/index.ts

@@ -0,0 +1,3 @@
+export * from "./send";
+export * from "./token";
+export * from "./tokens";

packages/profile/src/components/inventory/token/send.tsx

@@ -0,0 +1,5 @@
+export function SendToken() {
+  return (
+    <div>Send Token</div>
+  );
+}

packages/profile/src/components/inventory/token.tsx → packages/profile/src/components/inventory/token/token.tsx

@@ -4,7 +4,7 @@ import {
   LayoutContent,
   LayoutFooter,
   LayoutHeader,
-} from "../layout";
+} from "@/components/layout";
 import {
   ArrowIcon,
   Button,
@@ -77,7 +77,7 @@ function Credits() {
       </LayoutContent>
 
       <LayoutFooter>
-        <Button onClick={() => parent.openPurchaseCredits().catch(() => {})}>
+        <Button onClick={() => parent.openPurchaseCredits().catch(() => { })}>
           Purchase
         </Button>
       </LayoutFooter>
@@ -86,8 +86,10 @@ function Credits() {
 }
 
 function ERC20() {
-  const { chainId } = useConnection();
   const { address } = useParams<{ address: string }>();
+  // const [searchParams, setSearchParams] = useSearchParams();
+
+  const { chainId } = useConnection();
   const t = useToken({ tokenAddress: address! });
   const { countervalue } = useCountervalue({
     balance: formatEther(t?.balance.value ?? 0n),
@@ -110,13 +112,12 @@ function ERC20() {
       }
     >
       <LayoutHeader
-        title={`${
-          t.balance === undefined ? (
-            <Skeleton className="h-[20px] w-[120px] rounded" />
-          ) : (
-            t.balance.formatted
-          )
-        } ${t.meta.symbol}`}
+        title={`${t.balance === undefined ? (
+          <Skeleton className="h-[20px] w-[120px] rounded" />
+        ) : (
+          t.balance.formatted
+        )
+          } ${t.meta.symbol}`}
         description={`${countervalue.formatted} ${CurrencyBase.Usd}`}
         icon={
           <img
@@ -159,14 +160,9 @@ function ERC20() {
       </LayoutContent>
 
       <LayoutFooter>
-        <Button
-          className="w-full"
-          onClick={() => {
-            console.log("send");
-          }}
-        >
-          Send
-        </Button>
+        <Link to="send">
+          <Button className="w-full">Send</Button>
+        </Link>
       </LayoutFooter>
     </LayoutContainer>
   );