diff --git a/web/src/app/manage/BasicInformation.tsx b/web/src/app/manage/BasicInformation.tsx index e35f66a2..477b3736 100644 --- a/web/src/app/manage/BasicInformation.tsx +++ b/web/src/app/manage/BasicInformation.tsx @@ -78,7 +78,7 @@ export const BasicInformation = ({ invalidText="Text too long." labelText="Investment Objective" maxCount={100} - placeholder="The investment objective of the Fund is to seek to provide investment results that correspond generally to the price and yield performance, before fees and expenses, of the Nasdaq Blockchain Economy Index." + placeholder="The Fund seeks to reflect generally the performance of the price of bitcoin." rows={4} required /> diff --git a/web/src/app/manage/CreateProduct.tsx b/web/src/app/manage/CreateProduct.tsx index 6509bc96..d920a9e5 100644 --- a/web/src/app/manage/CreateProduct.tsx +++ b/web/src/app/manage/CreateProduct.tsx @@ -280,7 +280,7 @@ export const CreateProduct = () => { return (
-
+

Create Product

{ const mockApiData = [ { @@ -12,81 +21,33 @@ export const Manage = () => { name: "iShares Bitcoin Trust", aum: 15941890385, nav: 39.72, - background: - "conic-gradient(from 57.74deg at 50% 50%, #5B0F48 0deg, rgba(91, 15, 72, 0) 360deg)" + backgroundImage: + 'url("https://api.glam.systems/image/EMAbk6kYhQbvtpqWyfvDPVJBvD5isMZvQT5aM4TyCAeG.png")' }, { id: "IETH", name: "iShares Ethereum Trust", aum: 15941890385, nav: 39.72, - background: - "conic-gradient(from 57.74deg at 50% 50%, #1D3F93 0deg, rgba(21, 55, 23, 0) 360deg)" + backgroundImage: + 'url("https://api.glam.systems/image/yurUzfjdrUH2ujsWwQkFsv8eQJiJwgbHQFUZtf5yqoV.png")' }, { id: "ISOL", name: "iShares Solana Trust", aum: 15941890385, nav: 39.72, - background: - "conic-gradient(from 57.74deg at 50% 50%, #A1D3F1 0deg, rgba(91, 55, 11, 0) 360deg)" + backgroundImage: + 'url("https://api.glam.systems/image/GLaMc99QpnP1VKNwwFjNgUk4vhrGKu2JanCKzYRmKAgY.png")' }, { id: "IBNK", name: "iShares Bonk Trust", aum: 15941890385, nav: 39.72, - background: - "conic-gradient(from 57.74deg at 50% 50%, #BBDD33 0deg, rgba(91, 55, 11, 0) 360deg)" + backgroundImage: + 'url("https://api.glam.systems/image/GLam9tx5LoYZHWEb2kKz3GqJW8TJJ4Vd2Q5vp1T2vo1c.png")' } - // { - // id: 'IETH', - // name: 'iShares Ethereum Trust', - // aum: 15941890385, - // nav: 39.72, - // background: - // 'conic-gradient(from 57.74deg at 50% 50%, #1D3F93 0deg, rgba(21, 55, 23, 0) 360deg)', - // }, - // { - // id: 'ISOL', - // name: 'iShares Solana Trust', - // aum: 15941890385, - // nav: 39.72, - // background: - // 'conic-gradient(from 57.74deg at 50% 50%, #A1D3F1 0deg, rgba(91, 55, 11, 0) 360deg)', - // }, - // { - // id: 'IBNK', - // name: 'iShares Bonk Trust', - // aum: 15941890385, - // nav: 39.72, - // background: - // 'conic-gradient(from 57.74deg at 50% 50%, #BBDD33 0deg, rgba(91, 55, 11, 0) 360deg)', - // }, - // { - // id: 'IETH', - // name: 'iShares Ethereum Trust', - // aum: 15941890385, - // nav: 39.72, - // background: - // 'conic-gradient(from 57.74deg at 50% 50%, #1D3F93 0deg, rgba(21, 55, 23, 0) 360deg)', - // }, - // { - // id: 'ISOL', - // name: 'iShares Solana Trust', - // aum: 15941890385, - // nav: 39.72, - // background: - // 'conic-gradient(from 57.74deg at 50% 50%, #A1D3F1 0deg, rgba(91, 55, 11, 0) 360deg)', - // }, - // { - // id: 'IBNK', - // name: 'iShares Bonk Trust', - // aum: 15941890385, - // nav: 39.72, - // background: - // 'conic-gradient(from 57.74deg at 50% 50%, #BBDD33 0deg, rgba(91, 55, 11, 0) 360deg)', - // }, ]; // when clicking on a tile, navigate to the relevant product page @@ -96,7 +57,7 @@ export const Manage = () => { {mockApiData.map((position) => ( @@ -124,7 +85,10 @@ export const Manage = () => { style={{ alignSelf: "end", display: "flex", - background: position.background, + backgroundImage: position.backgroundImage, + backgroundPosition: "center", + backgroundRepeat: "no-repeat", + backgroundSize: "cover", position: "relative", top: "15px", left: "15px" @@ -160,8 +124,11 @@ export const Manage = () => { position: "relative", top: "15px", left: "15px", - background: - "conic-gradient(from 90deg at 50% 50%, #141414 0deg, rgba(20, 20, 20, 0) 360deg)" + backgroundImage: + 'url("https://api.glam.systems/image/11111111111111111111111111111111.png")', + backgroundPosition: "center", + backgroundRepeat: "no-repeat", + backgroundSize: "cover" }} >
diff --git a/web/src/app/products/products-overview.tsx b/web/src/app/products/products-overview.tsx index 102fcb01..5fd30c0d 100644 --- a/web/src/app/products/products-overview.tsx +++ b/web/src/app/products/products-overview.tsx @@ -10,163 +10,140 @@ import { TableRow, TableToolbar, TableToolbarContent, - TableToolbarSearch, -} from '@carbon/react'; + TableToolbarSearch +} from "@carbon/react"; -import { useNavigate } from 'react-router-dom'; +import { PublicKey } from "@solana/web3.js"; + +import { useNavigate } from "react-router-dom"; + +import { + useGlamProgramAccount, + useFundPerfChartData +} from "../glam/glam-data-access"; +import { TextAlignCenter } from "@carbon/icons-react"; export default function ProductsOverview() { - const defaultFund = 'AdXkDnJpFKqZeoUygLvm5dp2b5JGVPz3rEWfGCtB5Kc2'; + const defaultFund = "AdXkDnJpFKqZeoUygLvm5dp2b5JGVPz3rEWfGCtB5Kc2"; const rows = [ { id: defaultFund, - symbol: 'GLAM-A-USDC', - nav: 100, - aum: 100, - '24': 100, - sharpe: 100, - volatility: 100, - track: 100, - status: 'Disabled', - }, - { - id: defaultFund, - symbol: 'GLAM-A-USDC', - nav: 100, - aum: 100, - '24': 100, - sharpe: 100, - volatility: 100, - track: 100, - status: 'Disabled', - }, - { - id: defaultFund, - symbol: 'GLAM-A-USDC', - nav: 100, - aum: 100, - '24': 100, - sharpe: 100, - volatility: 100, - track: 100, - status: 'Disabled', - }, - { - id: defaultFund, - symbol: 'GLAM-A-USDC', - nav: 100, - aum: 100, - '24': 100, - sharpe: 100, - volatility: 100, - track: 100, - status: 'Disabled', - }, - { - id: defaultFund, - symbol: 'GLAM-A-USDC', - nav: 100, - aum: 100, - '24': 100, - sharpe: 100, - volatility: 100, - track: 100, - status: 'Disabled', - }, - { - id: defaultFund, - symbol: 'GLAM-A-USDC', - nav: 100, - aum: 100, - '24': 100, - sharpe: 100, - volatility: 100, - track: 100, - status: 'Disabled', - }, - { - id: defaultFund, - symbol: 'GLAM-A-USDC', - nav: 100, - aum: 100, - '24': 100, - sharpe: 100, - volatility: 100, - track: 100, - status: 'Disabled', - }, - { - id: defaultFund, - symbol: 'GLAM-A-USDC', - nav: 100, - aum: 100, - '24': 100, - sharpe: 100, - volatility: 100, - track: 100, - status: 'Disabled', - }, - { - id: defaultFund, - symbol: 'GLAM-A-USDC', - nav: 100, - aum: 100, - '24': 100, - sharpe: 100, - volatility: 100, - track: 100, - status: 'Disabled', - }, - { - id: defaultFund, - symbol: 'GLAM-A-USDC', - nav: 100, - aum: 100, - '24': 100, - sharpe: 100, - volatility: 100, - track: 100, - status: 'Disabled', - }, + name: "Glam Investment Fund", + symbol: "GBS", + /*nav: 100.1, + aum: 13796.12,*/ + share_classes_len: 1, + assets_len: 3, + fees_management: 1.5, + fees_performance: 10, + inception: 1712189348, + status: "Active" + } ]; const headers = [ { - key: 'symbol', - header: 'Symbol', + key: "", + header: "" }, { - key: 'nav', - header: 'NAV', + key: "name", + header: "Name" }, { - key: 'aum', - header: 'AUM', + key: "symbol", + header: "Symbol" }, + /*{ + key: "nav", + header: "NAV" + }, + { + key: "aum", + header: "AUM" + },*/ { - key: '24', - header: '24', + key: "share_classes_len", + header: "Share Classes" }, { - key: 'sharpe', - header: 'Sharpe', + key: "assets_len", + header: "Assets" }, { - key: 'volatility', - header: 'Volatility', + key: "fees_management", + header: "MGMT (%)" }, { - key: 'track', - header: 'Track', + key: "fees_performance", + header: "PERF (%)" }, { - key: 'status', - header: 'Status', + key: "inception", + header: "Inception" }, + { + key: "status", + header: "Status" + } ]; const navigate = useNavigate(); + class FundModel { + key: PublicKey; + data: any; + + constructor(key: PublicKey, data: any) { + this.key = key; + this.data = data || {}; + } + + getImageUrl() { + const pubkey = + this.data?.shareClasses[0].toBase58() || + "1111111111111111111111111111111111"; + return `https://api.glam.systems/image/${pubkey}.png`; + } + + getManagementFee() { + return this.data?.shareClassesMetadata[0].feeManagement / 1_000_000.0; + } + getPerformanceFee() { + return this.data?.shareClassesMetadata[0].feePerformance / 1_000_000.0; + } + } + + let id = "AdXkDnJpFKqZeoUygLvm5dp2b5JGVPz3rEWfGCtB5Kc2"; + + let fundKey = new PublicKey(defaultFund); + try { + fundKey = new PublicKey(id || defaultFund); + } catch (_e) { + // pass + } + const fundId = fundKey.toString(); + + const { account } = useGlamProgramAccount({ fundKey }); + if (account.isLoading) { + return ""; //spinner + } + + const fundModel = new FundModel(fundKey, account.data); + + function formatNumber(value: number): string { + return new Intl.NumberFormat("en-US").format(value); + } + + function formatDateFromTimestamp(timestampStr: string): string { + const date = new Date(Number(timestampStr) * 1000); + return new Intl.DateTimeFormat("en-US", { + month: "short", + day: "numeric", + year: "numeric" + }).format(date); + } + return (
@@ -176,12 +153,12 @@ export default function ProductsOverview() { getTableProps, getHeaderProps, getRowProps, - getToolbarProps, + getToolbarProps }) => ( - console.log('change')} /> + console.log("change")} /> @@ -200,13 +177,42 @@ export default function ProductsOverview() { navigate(`/products/${row.id}`)} > - {row.cells.map((cell) => ( - {cell.value} - ))} + {row.cells.map((cell) => { + if (cell.info.header === "inception") { + return ( + + {formatDateFromTimestamp(cell.value)} + + ); + } else if (cell.info.header === "aum") { + return ( + + {formatNumber(cell.value)} + + ); + } else if (cell.info.header === "") { + return ( + + Fund + + ); + } else { + return ( + {cell.value} + ); + } + })} ))} @@ -216,7 +222,7 @@ export default function ProductsOverview() { pageSize={10} pageSizes={[10, 20, 30, 40, 50]} totalItems={rows.length} - onChange={() => console.log('change')} + onChange={() => console.log("change")} itemsPerPageText={null} /> diff --git a/web/src/styles.scss b/web/src/styles.scss index a2e85777..00b3e8a8 100644 --- a/web/src/styles.scss +++ b/web/src/styles.scss @@ -75,11 +75,10 @@ body, } .wallet-adapter-button-trigger { - background: conic-gradient( - from 180deg at 50% 50%, - #141414 0deg, - rgba(20, 20, 20, 0) 360deg - ) !important; + background-image: url("https://api.glam.systems/image/11111111111111111111111111111111.png") !important; + background-position: center !important; + background-repeat: no-repeat !important; + background-size: cover !important; border-radius: 0px !important; padding-left: 0px !important; padding-right: 0px !important;