feat(exchanges): create implemented

desktop-app/renderer/api/exchangeAccounts/exchangeAccount.ts

@@ -3,27 +3,54 @@ import { AxiosResponse } from 'axios'
 import { useSearchParams } from 'next/navigation'
 
 export interface ExchangeAccount {
-  uuid: string
   name: string
-  exchange_name: string
+  description: string
+  exchange: string
   testing: boolean
 }
+export interface RetreivedExchangeAccount extends ExchangeAccount {
+  uuid: string
+}
 
 export async function listExchangeAccount(
   searchParams: ReturnType<typeof useSearchParams>
-): Promise<AxiosResponse<ExchangeAccount[]>> {
+): Promise<AxiosResponse<RetreivedExchangeAccount[]>> {
   const response = await request(searchParams, 'GET', '/api/exchange_account/')
-  return response as AxiosResponse<ExchangeAccount[]>
+  return response as AxiosResponse<RetreivedExchangeAccount[]>
 }
 
 export async function getExchangeAccount(
   searchParams: ReturnType<typeof useSearchParams>,
   id: string
-): Promise<AxiosResponse<ExchangeAccount>> {
+): Promise<AxiosResponse<RetreivedExchangeAccount>> {
   const response = await request(
     searchParams,
     'GET',
     `/api/exchange_account/${id}/`
   )
-  return response as AxiosResponse<ExchangeAccount>
+  return response as AxiosResponse<RetreivedExchangeAccount>
+}
+
+export async function createExchangeAccount(
+  searchParams: ReturnType<typeof useSearchParams>,
+  data: ExchangeAccount
+): Promise<AxiosResponse<RetreivedExchangeAccount>> {
+  const response = await request(
+    searchParams,
+    'POST',
+    '/api/exchange_account/',
+    data
+  )
+  return response as AxiosResponse<RetreivedExchangeAccount>
+}
+
+export async function getPossibleExchanges(
+  searchParams: ReturnType<typeof useSearchParams>
+): Promise<AxiosResponse<string[]>> {
+  const response = await request(
+    searchParams,
+    'GET',
+    '/api/exchange_account/possible_exchanges/'
+  )
+  return response as AxiosResponse<string[]>
 }

desktop-app/renderer/components/custom/headerPopover.tsx

@@ -136,10 +136,11 @@ export default function ServerPopover(): JSX.Element {
             </DialogTrigger>
             <DialogContent className="sm:max-w-[425px]">
               <DialogHeader>
-                <DialogTitle>Add New Server</DialogTitle>
+                <DialogTitle>Add a new Server</DialogTitle>
                 <DialogDescription>
-                  Add a new server will allow you to connect to it. You just
-                  have to provide the server name and the server URL.
+                  Adding a new server will allow you to connect to it. You just
+                  have to provide the server name, the server URL and a valid
+                  API key.
                 </DialogDescription>
               </DialogHeader>
               <div className="grid gap-4 py-4">

desktop-app/renderer/components/custom/panel/infoPanelCard.tsx

@@ -4,24 +4,28 @@ import { ReactNode } from 'react'
 function InfoPanelCard({
   title = '',
   badge = '',
-  category = '',
+  textContent = '',
+  description = '',
   tooltip = '',
   onClick = () => {}
 }: {
-  title: ReactNode
+  title?: ReactNode
   badge?: ReactNode
-  category?: ReactNode
+  textContent: ReactNode
+  description?: ReactNode
   tooltip?: ReactNode
   onClick?: () => void
 }): JSX.Element {
   return (
     <PanelCard
-      title={category}
+      className="h-32 w-80"
+      title={title}
       badge={badge}
+      description={description}
       tooltip={tooltip}
       onClick={onClick}
     >
-      <div className="text-2xl font-bold">{title}</div>
+      <div className="text-2xl font-bold">{textContent}</div>
     </PanelCard>
   )
 }

desktop-app/renderer/components/custom/panel/minimalistPanelCard.tsx

@@ -1,6 +1,6 @@
 import PanelCard from '@/components/custom/panel/panelCard'
 
-function MinimalistPanelCard({
+export default function MinimalistPanelCard({
   title,
   tooltip,
   onClick = () => {}
@@ -15,5 +15,3 @@ function MinimalistPanelCard({
     </PanelCard>
   )
 }
-
-export default MinimalistPanelCard

desktop-app/renderer/components/custom/panel/panelCard.tsx

@@ -7,15 +7,18 @@ import {
 } from '@/components/ui/card'
 import React, { ReactNode } from 'react'
 
+import { Badge } from '@/components/ui/badge'
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger
 } from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
 
 interface CardComponentProps {
   children: React.ReactNode
+  className?: string
   title?: string | React.ReactNode
   badge?: string | React.ReactNode
   description?: string | React.ReactNode
@@ -24,28 +27,33 @@ interface CardComponentProps {
 }
 
 const CardComponent = React.forwardRef<HTMLDivElement, CardComponentProps>(
-  ({ children, title, badge, description, onClick }, ref) => {
+  ({ children, className, title, badge, description, onClick }, ref) => {
     return (
-      <Card className="hover:shadow-sm" onClick={onClick} ref={ref}>
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 p-5">
-          {typeof title === 'string' ? (
+      <Card
+        className={cn(
+          'hover:bg-secondary space-y-2 flex flex-col justify-center',
+          className
+        )}
+        onClick={onClick}
+        ref={ref}
+      >
+        {(title || badge) && (
+          <CardHeader className="flex flex-row items-end justify-between space-y-0 ">
             <CardTitle className="text-sm font-normal">{title}</CardTitle>
-          ) : (
-            title
-          )}
-          {typeof badge === 'string' ? (
-            <div className="text-xs italic">{badge}</div>
-          ) : (
-            badge
-          )}
-        </CardHeader>
-        <CardContent>
+            {badge && (
+              <Badge className="text-xs italic hover:bg-foreground">
+                {badge}
+              </Badge>
+            )}
+          </CardHeader>
+        )}
+        <CardContent
+          className={
+            'flex flex-col items-center' + (title || badge ? '' : ' pt-6')
+          }
+        >
           {children}
-          {typeof description === 'string' ? (
-            <CardDescription>{description}</CardDescription>
-          ) : (
-            description
-          )}
+          {description && <CardDescription>{description}</CardDescription>}
         </CardContent>
       </Card>
     )
@@ -54,13 +62,15 @@ const CardComponent = React.forwardRef<HTMLDivElement, CardComponentProps>(
 
 export default function PanelCard({
   children,
+  className = '',
   title = '',
   badge = '',
   description = '',
   tooltip = '',
   onClick = () => {}
 }: {
   children: ReactNode
+  className?: string
   title?: ReactNode
   badge?: ReactNode
   description?: ReactNode
@@ -70,8 +80,9 @@ export default function PanelCard({
   return tooltip ? (
     <TooltipProvider>
       <Tooltip>
-        <TooltipTrigger asChild>
+        <TooltipTrigger>
           <CardComponent
+            className={className}
             title={title}
             badge={badge}
             onClick={onClick}
@@ -84,6 +95,7 @@ export default function PanelCard({
     </TooltipProvider>
   ) : (
     <CardComponent
+      className={className}
       title={title}
       badge={badge}
       onClick={onClick}

desktop-app/renderer/components/custom/panel/valuePanelCard.tsx

@@ -24,23 +24,21 @@ function formatCurrencyValue(value: number): string {
   }).format(value)
 }
 
-type valuePanelCardProps = {
-  title: string | React.ReactNode
-  badge?: string | React.ReactNode
-  value: number
-  delta?: number
-  tooltip?: string
-  onClick?: () => void
-}
-
 function ValuePanelCard({
   title = '',
   badge = '',
   value = 0,
   delta = 0,
   tooltip = '',
   onClick = () => {}
-}: valuePanelCardProps): JSX.Element {
+}: {
+  title: string | React.ReactNode
+  badge?: string | React.ReactNode
+  value: number
+  delta?: number
+  tooltip?: string
+  onClick?: () => void
+}): JSX.Element {
   return (
     <PanelCard
       title={title}

desktop-app/renderer/components/ui/card.tsx

@@ -94,4 +94,4 @@ CardFooter.propTypes = {
   className: PropTypes.string
 }
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }

desktop-app/renderer/components/ui/select.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import * as React from 'react'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { Check, ChevronDown } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
@@ -111,11 +111,11 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName
 
 export {
   Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
   SelectContent,
-  SelectLabel,
+  SelectGroup,
   SelectItem,
-  SelectSeparator
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
 }

desktop-app/renderer/pages/exchangeAccounts/[slug]/index.tsx

@@ -1,11 +1,58 @@
+import {
+  RetreivedExchangeAccount,
+  getExchangeAccount
+} from '@/api/exchangeAccounts/exchangeAccount'
 import ContextHeader from '@/components/layout/contextHeader'
+import DefaultPageLayout from '@/components/layout/defaultPageLayout'
+import { useSearchParams } from 'next/navigation'
 import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+
+const defaultExchangeAccount: RetreivedExchangeAccount = {
+  uuid: '',
+  name: '',
+  description: '',
+  testing: false,
+  exchange: ''
+}
 
 export default function ExchangeAccount(): JSX.Element {
   const router = useRouter()
+  const searchParams = useSearchParams()
+  const [exchangeAccount, setExchangeAccount] =
+    useState<RetreivedExchangeAccount>(defaultExchangeAccount)
+
+  useEffect(() => {
+    const fetchExchangeAccount = async () => {
+      try {
+        const response = await getExchangeAccount(
+          searchParams,
+          router.query.slug as string
+        )
+        setExchangeAccount(response.data)
+      } catch (error) {
+        console.error(error)
+        setExchangeAccount(defaultExchangeAccount)
+      }
+    }
+    if (searchParams.get('server')) {
+      fetchExchangeAccount()
+    }
+  }, [searchParams, router.query.slug])
+
   return (
     <ContextHeader isBot>
-      <h1>Exchange Account {router.query.slug}</h1>
+      <DefaultPageLayout
+        header={
+          'Exchange Account' +
+          (exchangeAccount.name && ' - ' + exchangeAccount.name)
+        }
+        description={
+          'Here is an overview of your exchange account. An exchange account reprents a connection to an exchange/broker.'
+        }
+      >
+        <div></div>
+      </DefaultPageLayout>
     </ContextHeader>
   )
 }