+
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 (
+
+
+
+ );
+ } 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;