fix(space): add invest & withdraw button

napse-invest · Nov 20, 2023 · 5b69ea8 · 5b69ea8
1 parent 5674645
commit 5b69ea8
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 14 deletions.
diff --git a/desktop-app/renderer/pages/spaces/[slug]/advancedCurrencyDialog.tsx b/desktop-app/renderer/pages/spaces/[slug]/advancedCurrencyDialog.tsx
@@ -23,7 +23,7 @@ export default function AdvancedCurrencyDataDialog({
   const currencies: Currency[] = space['wallet']['currencies']
   return (
     <Dialog>
-      <DialogTrigger>{trigger}</DialogTrigger>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
       <DialogContent className="container">
         <DialogHeader>
           <DialogTitle>Currencies</DialogTitle>

diff --git a/desktop-app/renderer/pages/spaces/[slug]/dashbordSkeleton.tsx b/desktop-app/renderer/pages/spaces/[slug]/dashbordSkeleton.tsx
@@ -0,0 +1,3 @@
+export default function DashboardSkeleton(): JSX.Element {
+  return <></>
+}
diff --git a/desktop-app/renderer/pages/spaces/[slug]/index.tsx b/desktop-app/renderer/pages/spaces/[slug]/index.tsx
@@ -28,6 +28,7 @@ import { useSearchParams } from 'next/navigation'
 import { useRouter } from 'next/router'
 import React$1, { useEffect, useState } from 'react'
 import { fakeDashboardData } from './fakeDashboardData'
+import MoneyActionButtons from './moneyActionButtons'
 import WalletBoard from './walletBoard'
 
 type KpiData = {
@@ -110,6 +111,7 @@ export default function Space(): JSX.Element {
 
   if (!space) {
     console.log('No space')
+    console.log(searchParams.get('space'))
     return <></>
   }
 
@@ -122,17 +124,23 @@ export default function Space(): JSX.Element {
         }
       >
         <Tabs defaultValue="dashboard" className="w-full">
-          <TabsList>
-            <TabsTrigger value="dashboard">Dashboard</TabsTrigger>
-            <TabsTrigger value="wallet">Wallet</TabsTrigger>
-            <TabsTrigger value="operations" disabled>
-              Operations
-            </TabsTrigger>
-            <TabsTrigger value="fleets" disabled>
-              Fleets
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent value="dashboard" className="grid grid-cols-3 gap-6">
+          <div className="flex flex-row justify-between">
+            <TabsList>
+              <TabsTrigger value="dashboard">Dashboard</TabsTrigger>
+              <TabsTrigger value="wallet">Wallet</TabsTrigger>
+              <TabsTrigger value="operations" disabled>
+                Operations
+              </TabsTrigger>
+              <TabsTrigger value="fleets" disabled>
+                Fleets
+              </TabsTrigger>
+            </TabsList>
+            <MoneyActionButtons />
+          </div>
+          <TabsContent
+            value="dashboard"
+            className="grid grid-cols-3 gap-6 mt-4"
+          >
             {/* Graph card */}
             <Card className="col-span-2">
               <CardHeader>
@@ -180,7 +188,7 @@ export default function Space(): JSX.Element {
               )}
             </div>
           </TabsContent>
-          <TabsContent value="wallet" className="">
+          <TabsContent value="wallet" className="mt-0">
             <WalletBoard className="" space={space} />
           </TabsContent>
         </Tabs>

diff --git a/desktop-app/renderer/pages/spaces/[slug]/moneyActionButtons.tsx b/desktop-app/renderer/pages/spaces/[slug]/moneyActionButtons.tsx
@@ -0,0 +1,62 @@
+import { Button } from '@/components/ui/button'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from '@/components/ui/tooltip'
+import { useToast } from '@/components/ui/use-toast'
+import {
+  ArrowDownOnSquareIcon,
+  ArrowUpOnSquareIcon
+} from '@heroicons/react/24/outline'
+
+export default function MoneyActionButtons(): JSX.Element {
+  const { toast } = useToast()
+  return (
+    <div className="flex flex-row gap-4">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => {
+                toast({
+                  title: 'Deposit',
+                  description: 'You have deposited money !'
+                })
+              }}
+            >
+              <ArrowUpOnSquareIcon className="w-6 h-6" strokeWidth={1.2} />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Deposit</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => {
+                toast({
+                  title: 'Withdraw',
+                  description: 'You have withdrawn money !'
+                })
+              }}
+            >
+              <ArrowDownOnSquareIcon className="w-6 h-6" strokeWidth={1.2} />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Withdraw</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  )
+}
diff --git a/desktop-app/renderer/tailwind.config.js b/desktop-app/renderer/tailwind.config.js
@@ -25,7 +25,7 @@ const FlipPlugin = plugin(function ({ addUtilities }) {
 const MiscellaneousPlugin = plugin(function ({ addUtilities }) {
   addUtilities({
     '.icon-md': {
-      transform: 'scale(1.5)'
+      transform: 'scale(1.8)'
     },
   })
 })