From 6f469579ffcd2b646cfa532dc212b769452ad3dc Mon Sep 17 00:00:00 2001 From: Bartosz Nowak Date: Wed, 23 Aug 2023 21:22:07 +0200 Subject: [PATCH 01/44] initial --- server/k8s/secret.yaml | 18 ++ .../src/components/App/State/OpenOrders.tsx | 2 +- .../src/components/App/State/OrderHistory.tsx | 2 +- .../src/components/App/State/TradeHistory.tsx | 2 +- web/apps/exchange/src/components/Assets.tsx | 2 +- .../components/providers/MarketProvider.tsx | 2 +- web/apps/exchange/src/routes/index.tsx | 4 +- .../processor/public/gfx/arrow_down-dark.svg | 3 + .../processor/public/gfx/arrow_down-light.svg | 3 + .../public/gfx/assets_arrow_down.svg | 3 - .../processor/public/gfx/assets_arrow_up.svg | 7 - .../processor/public/gfx/assets_clock.svg | 7 - .../processor/public/gfx/assets_transfer.svg | 3 - web/apps/processor/public/gfx/bell-dark.svg | 4 + web/apps/processor/public/gfx/bell-light.svg | 4 + web/apps/processor/public/gfx/cancel.svg | 3 - web/apps/processor/public/gfx/deposit.svg | 7 + web/apps/processor/public/gfx/home-dark.svg | 7 + web/apps/processor/public/gfx/home-light.svg | 7 + web/apps/processor/public/gfx/home.svg | 7 - web/apps/processor/public/gfx/logo.svg | 17 -- web/apps/processor/public/gfx/plus.svg | 3 + web/apps/processor/public/gfx/search.svg | 7 +- .../processor/public/gfx/settings-dark.svg | 7 + .../processor/public/gfx/settings-light.svg | 7 + .../processor/public/gfx/side_menu_assets.svg | 6 - .../processor/public/gfx/side_menu_spot.svg | 3 - web/apps/processor/public/gfx/star.svg | 3 - .../processor/public/gfx/transfer-dark.svg | 5 + .../processor/public/gfx/transfer-light.svg | 5 + web/apps/processor/public/gfx/transfer.svg | 7 - web/apps/processor/public/gfx/user.svg | 4 - web/apps/processor/public/gfx/wallet.svg | 4 - .../processor/public/gfx/walletconnect.svg | 1 - web/apps/processor/public/gfx/withdraw.svg | 7 + web/apps/processor/src/components/Account.tsx | 84 ------- web/apps/processor/src/components/App.tsx | 17 -- .../processor/src/components/App/Wealth.tsx | 51 ----- .../src/components/App/Wealth/AssetInfo.tsx | 79 ------- web/apps/processor/src/components/Asset.tsx | 23 -- .../src/components/Asset/Actions.tsx | 205 ------------------ .../src/components/Asset/AssetInfo.tsx | 78 ------- .../Atoms/Buttons/ArrowDownButton.tsx | 38 ++++ .../components/Atoms/Buttons/NewButton.tsx | 15 ++ .../Atoms/Buttons/NotificationsButton.tsx | 32 +++ .../Atoms/Currencies/Currencies.tsx | 27 +++ .../components/Atoms/Currencies/Currency.tsx | 53 +++++ .../src/components/Atoms/Picture.tsx | 24 ++ .../src/components/Atoms/Profile.tsx | 16 ++ .../src/components/Atoms/SearchBar.tsx | 28 +++ web/apps/processor/src/components/Header.tsx | 26 --- .../src/components/Header/WalletButton.tsx | 67 ------ web/apps/processor/src/components/Home.tsx | 17 ++ .../src/components/Home/AccountDashboard.tsx | 49 +++++ .../src/components/Home/CurrenciesModal.tsx | 30 +++ .../src/components/Home/CurrencyDisplay.tsx | 40 ++++ .../components/Home/DepositWithdrawPanel.tsx | 31 +++ .../processor/src/components/Home/Header.tsx | 39 ++++ .../src/components/Home/Transactions.tsx | 48 ++++ .../components/Home/TransactionsElement.tsx | 43 ++++ .../src/components/Inputs/NumberInput.tsx | 128 ----------- .../src/components/Inputs/SearchInput.tsx | 62 ------ web/apps/processor/src/components/Nav.tsx | 67 ++++++ .../src/components/Nav/NavButton.tsx | 24 ++ .../processor/src/components/Navigation.tsx | 25 --- .../src/components/Navigation/NavButton.tsx | 28 --- web/apps/processor/src/components/SideNav.tsx | 118 ++++++++++ .../src/components/SideNav/SideNavButton.tsx | 28 +++ .../processor/src/components/Transfer.tsx | 49 +++++ .../src/components/Transfer/Header.tsx | 38 ++++ .../components/Transfer/TransferElement.tsx | 32 +++ .../src/components/Transfer/Transfers.tsx | 25 +++ web/apps/processor/src/components/Wallet.tsx | 3 + .../components/providers/AssetProvider.tsx | 34 --- .../components/providers/AssetsProvider.tsx | 41 ---- .../src/components/providers/NavProvider.tsx | 9 +- .../providers/SelectedAssetProvider.tsx | 43 ++++ web/apps/processor/src/root.tsx | 152 +++++++------ web/apps/processor/src/routes/index.tsx | 50 +++-- web/apps/processor/tailwind.config.js | 19 ++ web/package.json | 2 +- .../components/providers/AssetsProvider.tsx | 28 ++- .../providers/ColorModeProvider.tsx | 51 +++++ .../providers/ContractAddressProvider.tsx | 2 +- web/packages/types/contract.ts | 2 +- web/packages/utils/formatDate.ts | 18 ++ 86 files changed, 1276 insertions(+), 1145 deletions(-) create mode 100644 server/k8s/secret.yaml create mode 100644 web/apps/processor/public/gfx/arrow_down-dark.svg create mode 100644 web/apps/processor/public/gfx/arrow_down-light.svg delete mode 100644 web/apps/processor/public/gfx/assets_arrow_down.svg delete mode 100644 web/apps/processor/public/gfx/assets_arrow_up.svg delete mode 100644 web/apps/processor/public/gfx/assets_clock.svg delete mode 100644 web/apps/processor/public/gfx/assets_transfer.svg create mode 100644 web/apps/processor/public/gfx/bell-dark.svg create mode 100644 web/apps/processor/public/gfx/bell-light.svg delete mode 100644 web/apps/processor/public/gfx/cancel.svg create mode 100644 web/apps/processor/public/gfx/deposit.svg create mode 100644 web/apps/processor/public/gfx/home-dark.svg create mode 100644 web/apps/processor/public/gfx/home-light.svg delete mode 100644 web/apps/processor/public/gfx/home.svg delete mode 100644 web/apps/processor/public/gfx/logo.svg create mode 100644 web/apps/processor/public/gfx/plus.svg create mode 100644 web/apps/processor/public/gfx/settings-dark.svg create mode 100644 web/apps/processor/public/gfx/settings-light.svg delete mode 100644 web/apps/processor/public/gfx/side_menu_assets.svg delete mode 100644 web/apps/processor/public/gfx/side_menu_spot.svg delete mode 100644 web/apps/processor/public/gfx/star.svg create mode 100644 web/apps/processor/public/gfx/transfer-dark.svg create mode 100644 web/apps/processor/public/gfx/transfer-light.svg delete mode 100644 web/apps/processor/public/gfx/transfer.svg delete mode 100644 web/apps/processor/public/gfx/user.svg delete mode 100644 web/apps/processor/public/gfx/wallet.svg delete mode 100644 web/apps/processor/public/gfx/walletconnect.svg create mode 100644 web/apps/processor/public/gfx/withdraw.svg delete mode 100644 web/apps/processor/src/components/Account.tsx delete mode 100644 web/apps/processor/src/components/App.tsx delete mode 100644 web/apps/processor/src/components/App/Wealth.tsx delete mode 100644 web/apps/processor/src/components/App/Wealth/AssetInfo.tsx delete mode 100644 web/apps/processor/src/components/Asset.tsx delete mode 100644 web/apps/processor/src/components/Asset/Actions.tsx delete mode 100644 web/apps/processor/src/components/Asset/AssetInfo.tsx create mode 100644 web/apps/processor/src/components/Atoms/Buttons/ArrowDownButton.tsx create mode 100644 web/apps/processor/src/components/Atoms/Buttons/NewButton.tsx create mode 100644 web/apps/processor/src/components/Atoms/Buttons/NotificationsButton.tsx create mode 100644 web/apps/processor/src/components/Atoms/Currencies/Currencies.tsx create mode 100644 web/apps/processor/src/components/Atoms/Currencies/Currency.tsx create mode 100644 web/apps/processor/src/components/Atoms/Picture.tsx create mode 100644 web/apps/processor/src/components/Atoms/Profile.tsx create mode 100644 web/apps/processor/src/components/Atoms/SearchBar.tsx delete mode 100644 web/apps/processor/src/components/Header.tsx delete mode 100644 web/apps/processor/src/components/Header/WalletButton.tsx create mode 100644 web/apps/processor/src/components/Home.tsx create mode 100644 web/apps/processor/src/components/Home/AccountDashboard.tsx create mode 100644 web/apps/processor/src/components/Home/CurrenciesModal.tsx create mode 100644 web/apps/processor/src/components/Home/CurrencyDisplay.tsx create mode 100644 web/apps/processor/src/components/Home/DepositWithdrawPanel.tsx create mode 100644 web/apps/processor/src/components/Home/Header.tsx create mode 100644 web/apps/processor/src/components/Home/Transactions.tsx create mode 100644 web/apps/processor/src/components/Home/TransactionsElement.tsx delete mode 100644 web/apps/processor/src/components/Inputs/NumberInput.tsx delete mode 100644 web/apps/processor/src/components/Inputs/SearchInput.tsx create mode 100644 web/apps/processor/src/components/Nav.tsx create mode 100644 web/apps/processor/src/components/Nav/NavButton.tsx delete mode 100644 web/apps/processor/src/components/Navigation.tsx delete mode 100644 web/apps/processor/src/components/Navigation/NavButton.tsx create mode 100644 web/apps/processor/src/components/SideNav.tsx create mode 100644 web/apps/processor/src/components/SideNav/SideNavButton.tsx create mode 100644 web/apps/processor/src/components/Transfer.tsx create mode 100644 web/apps/processor/src/components/Transfer/Header.tsx create mode 100644 web/apps/processor/src/components/Transfer/TransferElement.tsx create mode 100644 web/apps/processor/src/components/Transfer/Transfers.tsx create mode 100644 web/apps/processor/src/components/Wallet.tsx delete mode 100644 web/apps/processor/src/components/providers/AssetProvider.tsx delete mode 100644 web/apps/processor/src/components/providers/AssetsProvider.tsx create mode 100644 web/apps/processor/src/components/providers/SelectedAssetProvider.tsx rename web/{apps/exchange/src => packages}/components/providers/AssetsProvider.tsx (58%) create mode 100644 web/packages/components/providers/ColorModeProvider.tsx create mode 100644 web/packages/utils/formatDate.ts diff --git a/server/k8s/secret.yaml b/server/k8s/secret.yaml new file mode 100644 index 00000000..ce638ba2 --- /dev/null +++ b/server/k8s/secret.yaml @@ -0,0 +1,18 @@ +apiVersion: v1 +kind: Secret +metadata: + name: contract-private-key + namespace: ksox-finance +type: Opaque +stringData: + key: "52a62ae5ac5a76bd6d3e49affb74c4c6504483017cb8dfe036193bd7ca33cdca" + +apiVersion: v1 +kind: Secret +metadata: + name: ws-blockchain-url + namespace: ksox-finance +type: Opaque +stringData: + url: "wss://eth-sepolia.g.alchemy.com/v2/-koG9fJPMpiL7ywoOZyGtWlLZ_JymCb2" + \ No newline at end of file diff --git a/web/apps/exchange/src/components/App/State/OpenOrders.tsx b/web/apps/exchange/src/components/App/State/OpenOrders.tsx index 9251cf32..abcb81ee 100644 --- a/web/apps/exchange/src/components/App/State/OpenOrders.tsx +++ b/web/apps/exchange/src/components/App/State/OpenOrders.tsx @@ -6,7 +6,7 @@ import params from "@packages/utils/params"; import { PrivateOrder } from "@packages/types/order"; import { z } from "zod"; import { Uuid } from "@packages/types/primitives/uuid"; -import { useAssets } from "~/components/providers/AssetsProvider"; +import { useAssets } from "@packages/components/providers/AssetsProvider"; import { Market } from "~/components/providers/MarketProvider"; import { format } from "numerable"; import { formatTemplate } from "@packages/utils/precision"; diff --git a/web/apps/exchange/src/components/App/State/OrderHistory.tsx b/web/apps/exchange/src/components/App/State/OrderHistory.tsx index 9bdf48ad..501731ec 100644 --- a/web/apps/exchange/src/components/App/State/OrderHistory.tsx +++ b/web/apps/exchange/src/components/App/State/OrderHistory.tsx @@ -5,7 +5,7 @@ import { Asset } from "@packages/types/asset"; import { Market } from "~/components/providers/MarketProvider"; import { ev, finv, fmul } from "@packages/types/primitives/fraction"; import { Uuid } from "@packages/types/primitives/uuid"; -import { useAssets } from "~/components/providers/AssetsProvider"; +import { useAssets } from "@packages/components/providers/AssetsProvider"; import { PrivateOrder } from "@packages/types/order"; import { api } from "~/root"; import params from "@packages/utils/params"; diff --git a/web/apps/exchange/src/components/App/State/TradeHistory.tsx b/web/apps/exchange/src/components/App/State/TradeHistory.tsx index b42bacbd..9162ec30 100644 --- a/web/apps/exchange/src/components/App/State/TradeHistory.tsx +++ b/web/apps/exchange/src/components/App/State/TradeHistory.tsx @@ -3,7 +3,7 @@ import { createStore } from "solid-js/store"; import { SessionResponse } from "@packages/components/providers/SessionProvider/models"; import { Asset } from "@packages/types/asset"; import { Market } from "~/components/providers/MarketProvider"; -import { useAssets } from "~/components/providers/AssetsProvider"; +import { useAssets } from "@packages/components/providers/AssetsProvider"; import { Uuid } from "@packages/types/primitives/uuid"; import { format } from "numerable"; import { formatTemplate } from "@packages/utils/precision"; diff --git a/web/apps/exchange/src/components/Assets.tsx b/web/apps/exchange/src/components/Assets.tsx index cbef66d4..9cd94717 100644 --- a/web/apps/exchange/src/components/Assets.tsx +++ b/web/apps/exchange/src/components/Assets.tsx @@ -1,7 +1,7 @@ import { base } from "~/root"; import { joinPaths } from "solid-start/islands/server-router"; import { Index, Match, Switch, createMemo, createSignal } from "solid-js"; -import { useAssets } from "~/components/providers/AssetsProvider"; +import { useAssets } from "@packages/components/providers/AssetsProvider"; import SearchInput from "~/components/Inputs/SearchInput"; import { usePrecision } from "@packages/components/providers/PrecisionProvider"; import { Dynamic } from "solid-js/web"; diff --git a/web/apps/exchange/src/components/providers/MarketProvider.tsx b/web/apps/exchange/src/components/providers/MarketProvider.tsx index 802d2568..0817df20 100644 --- a/web/apps/exchange/src/components/providers/MarketProvider.tsx +++ b/web/apps/exchange/src/components/providers/MarketProvider.tsx @@ -9,7 +9,7 @@ import { import { useParams } from "solid-start"; import { Asset } from "@packages/types/asset"; import { Uuid } from "@packages/types/primitives/uuid"; -import { useAssets } from "~/components/providers/AssetsProvider"; +import { useAssets } from "@packages/components/providers/AssetsProvider"; export type Market = { quote_asset?: Asset; base_asset?: Asset }; diff --git a/web/apps/exchange/src/routes/index.tsx b/web/apps/exchange/src/routes/index.tsx index 8bd4d7fe..e946bf5b 100644 --- a/web/apps/exchange/src/routes/index.tsx +++ b/web/apps/exchange/src/routes/index.tsx @@ -1,4 +1,4 @@ -import { AssetsProvider } from "~/components/providers/AssetsProvider"; +import { AssetsProvider } from "@packages/components/providers/AssetsProvider"; import { MarketProvider } from "~/components/providers/MarketProvider"; import { Outlet } from "solid-start"; import MainMenu from "~/components/MainMenu"; @@ -18,7 +18,7 @@ export default function Index() {
- + diff --git a/web/apps/processor/public/gfx/arrow_down-dark.svg b/web/apps/processor/public/gfx/arrow_down-dark.svg new file mode 100644 index 00000000..f1dc9516 --- /dev/null +++ b/web/apps/processor/public/gfx/arrow_down-dark.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/web/apps/processor/public/gfx/arrow_down-light.svg b/web/apps/processor/public/gfx/arrow_down-light.svg new file mode 100644 index 00000000..868dd28d --- /dev/null +++ b/web/apps/processor/public/gfx/arrow_down-light.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/web/apps/processor/public/gfx/assets_arrow_down.svg b/web/apps/processor/public/gfx/assets_arrow_down.svg deleted file mode 100644 index 4bb56e2c..00000000 --- a/web/apps/processor/public/gfx/assets_arrow_down.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/apps/processor/public/gfx/assets_arrow_up.svg b/web/apps/processor/public/gfx/assets_arrow_up.svg deleted file mode 100644 index ced5b910..00000000 --- a/web/apps/processor/public/gfx/assets_arrow_up.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/web/apps/processor/public/gfx/assets_clock.svg b/web/apps/processor/public/gfx/assets_clock.svg deleted file mode 100644 index 33a23910..00000000 --- a/web/apps/processor/public/gfx/assets_clock.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/web/apps/processor/public/gfx/assets_transfer.svg b/web/apps/processor/public/gfx/assets_transfer.svg deleted file mode 100644 index 2a0ee49d..00000000 --- a/web/apps/processor/public/gfx/assets_transfer.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/apps/processor/public/gfx/bell-dark.svg b/web/apps/processor/public/gfx/bell-dark.svg new file mode 100644 index 00000000..6a1d7558 --- /dev/null +++ b/web/apps/processor/public/gfx/bell-dark.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/web/apps/processor/public/gfx/bell-light.svg b/web/apps/processor/public/gfx/bell-light.svg new file mode 100644 index 00000000..0e5c4d69 --- /dev/null +++ b/web/apps/processor/public/gfx/bell-light.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/web/apps/processor/public/gfx/cancel.svg b/web/apps/processor/public/gfx/cancel.svg deleted file mode 100644 index 0ac1485f..00000000 --- a/web/apps/processor/public/gfx/cancel.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/apps/processor/public/gfx/deposit.svg b/web/apps/processor/public/gfx/deposit.svg new file mode 100644 index 00000000..e540f906 --- /dev/null +++ b/web/apps/processor/public/gfx/deposit.svg @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/web/apps/processor/public/gfx/home-dark.svg b/web/apps/processor/public/gfx/home-dark.svg new file mode 100644 index 00000000..0da772a6 --- /dev/null +++ b/web/apps/processor/public/gfx/home-dark.svg @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/web/apps/processor/public/gfx/home-light.svg b/web/apps/processor/public/gfx/home-light.svg new file mode 100644 index 00000000..5c321bfc --- /dev/null +++ b/web/apps/processor/public/gfx/home-light.svg @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/web/apps/processor/public/gfx/home.svg b/web/apps/processor/public/gfx/home.svg deleted file mode 100644 index be9e9e61..00000000 --- a/web/apps/processor/public/gfx/home.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/web/apps/processor/public/gfx/logo.svg b/web/apps/processor/public/gfx/logo.svg deleted file mode 100644 index 33129d83..00000000 --- a/web/apps/processor/public/gfx/logo.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - diff --git a/web/apps/processor/public/gfx/plus.svg b/web/apps/processor/public/gfx/plus.svg new file mode 100644 index 00000000..f6029f78 --- /dev/null +++ b/web/apps/processor/public/gfx/plus.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/web/apps/processor/public/gfx/search.svg b/web/apps/processor/public/gfx/search.svg index 27f9632e..0de245d9 100644 --- a/web/apps/processor/public/gfx/search.svg +++ b/web/apps/processor/public/gfx/search.svg @@ -1,3 +1,4 @@ - - - + + + \ No newline at end of file diff --git a/web/apps/processor/public/gfx/settings-dark.svg b/web/apps/processor/public/gfx/settings-dark.svg new file mode 100644 index 00000000..1cce825c --- /dev/null +++ b/web/apps/processor/public/gfx/settings-dark.svg @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/web/apps/processor/public/gfx/settings-light.svg b/web/apps/processor/public/gfx/settings-light.svg new file mode 100644 index 00000000..e51081f9 --- /dev/null +++ b/web/apps/processor/public/gfx/settings-light.svg @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/web/apps/processor/public/gfx/side_menu_assets.svg b/web/apps/processor/public/gfx/side_menu_assets.svg deleted file mode 100644 index 36549bbc..00000000 --- a/web/apps/processor/public/gfx/side_menu_assets.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/web/apps/processor/public/gfx/side_menu_spot.svg b/web/apps/processor/public/gfx/side_menu_spot.svg deleted file mode 100644 index 8d3e11a3..00000000 --- a/web/apps/processor/public/gfx/side_menu_spot.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/apps/processor/public/gfx/star.svg b/web/apps/processor/public/gfx/star.svg deleted file mode 100644 index ee8ec3d0..00000000 --- a/web/apps/processor/public/gfx/star.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/apps/processor/public/gfx/transfer-dark.svg b/web/apps/processor/public/gfx/transfer-dark.svg new file mode 100644 index 00000000..f460ad28 --- /dev/null +++ b/web/apps/processor/public/gfx/transfer-dark.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/web/apps/processor/public/gfx/transfer-light.svg b/web/apps/processor/public/gfx/transfer-light.svg new file mode 100644 index 00000000..b589b04c --- /dev/null +++ b/web/apps/processor/public/gfx/transfer-light.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/web/apps/processor/public/gfx/transfer.svg b/web/apps/processor/public/gfx/transfer.svg deleted file mode 100644 index 7bd5b54b..00000000 --- a/web/apps/processor/public/gfx/transfer.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - transfer_fill - \ No newline at end of file diff --git a/web/apps/processor/public/gfx/user.svg b/web/apps/processor/public/gfx/user.svg deleted file mode 100644 index 9ed25f60..00000000 --- a/web/apps/processor/public/gfx/user.svg +++ /dev/null @@ -1,4 +0,0 @@ - - Svg Vector Icons : http://www.onlinewebfonts.com/icon - - \ No newline at end of file diff --git a/web/apps/processor/public/gfx/wallet.svg b/web/apps/processor/public/gfx/wallet.svg deleted file mode 100644 index 457c5bde..00000000 --- a/web/apps/processor/public/gfx/wallet.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/apps/processor/public/gfx/walletconnect.svg b/web/apps/processor/public/gfx/walletconnect.svg deleted file mode 100644 index d90457ad..00000000 --- a/web/apps/processor/public/gfx/walletconnect.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web/apps/processor/public/gfx/withdraw.svg b/web/apps/processor/public/gfx/withdraw.svg new file mode 100644 index 00000000..83cb5efd --- /dev/null +++ b/web/apps/processor/public/gfx/withdraw.svg @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/web/apps/processor/src/components/Account.tsx b/web/apps/processor/src/components/Account.tsx deleted file mode 100644 index 5f65955e..00000000 --- a/web/apps/processor/src/components/Account.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { onMount } from "solid-js"; -import SearchInput from "~/components/Inputs/SearchInput"; -import { createStore } from "solid-js/store"; -import { api } from "~/root"; -import { UserUpdateRequest } from "@packages/types/mod"; -import { useSession } from "@packages/components/providers/SessionProvider"; -import { User } from "@packages/types/user"; - -interface UserData { - name?: string; - email?: string; - phone?: string; -} - -export default function Account() { - const [userData, setUserData] = createStore({}); - const session = useSession(); - - onMount(async () => { - const response = await fetch(`${api}/private/user`, { - method: "GET", - credentials: "same-origin", - }) - .then((r) => r.json()) - .then((r) => User.parse(r)); - - setUserData({ - name: response.name ?? undefined, - email: response.email ?? undefined, - phone: response.phone ?? undefined, - }); - }); - - return ( -
- setUserData({ name: e.target.value })} - /> - setUserData({ email: e.target.value })} - /> - setUserData({ phone: e.target.value })} - /> -
{ - if (session()) { - await fetch(`${api}/private/user`, { - method: "POST", - headers: { - Accept: "application/json", - "Content-Type": "application/json", - }, - credentials: "same-origin", - body: JSON.stringify( - UserUpdateRequest.parse({ - name: userData.name, - email: userData.email, - phone: userData.phone, - }), - (_, v) => (typeof v === "bigint" ? v.toString() : v), - ), - }).then((r) => r.text()); - } - }} - > - Submit -
-
- ); -} diff --git a/web/apps/processor/src/components/App.tsx b/web/apps/processor/src/components/App.tsx deleted file mode 100644 index 8e738013..00000000 --- a/web/apps/processor/src/components/App.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { useSession } from "@packages/components/providers/SessionProvider"; -import { usePrecision } from "@packages/components/providers/PrecisionProvider"; -import { useAssets } from "~/components/providers/AssetsProvider"; -import { Dynamic } from "solid-js/web"; -import CreateWealth from "~/components/App/Wealth"; - -export default function App() { - const assets = useAssets(); - const session = useSession(); - const precision = usePrecision(); - - return ( -
- -
- ); -} diff --git a/web/apps/processor/src/components/App/Wealth.tsx b/web/apps/processor/src/components/App/Wealth.tsx deleted file mode 100644 index d71da6be..00000000 --- a/web/apps/processor/src/components/App/Wealth.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { Index, Show, batch, onMount } from "solid-js"; -import { createStore } from "solid-js/store"; -import { Asset } from "@packages/types/asset"; -import { Uuid } from "@packages/types/primitives/uuid"; -import { AssetInfo } from "~/components/App/Wealth/AssetInfo"; -import { A } from "@solidjs/router"; -import { SessionResponse } from "@packages/components/providers/SessionProvider/models"; - -export default function CreateWealth( - assets: Map, - session: SessionResponse | undefined, - precision: number, -) { - return () => ( - }> - - - ); -} - -export function Wealth(props: { - session?: SessionResponse; - assets?: Map; - precision?: number; -}) { - const [assetsStore, setAssetsStore] = createStore<{ [key: Uuid]: Asset }>({}); - - onMount(async () => { - batch(() => { - props.assets?.forEach((e) => { - setAssetsStore({ [e.id]: e }); - }); - }); - }); - - return ( -
- - {(element) => ( - - - - )} - -
- ); -} diff --git a/web/apps/processor/src/components/App/Wealth/AssetInfo.tsx b/web/apps/processor/src/components/App/Wealth/AssetInfo.tsx deleted file mode 100644 index 96780960..00000000 --- a/web/apps/processor/src/components/App/Wealth/AssetInfo.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { format } from "numerable"; -import { Show, createSignal, onCleanup, onMount } from "solid-js"; -import { joinPaths } from "solid-start/islands/server-router"; -import { api, base } from "~/root"; -import { Asset } from "@packages/types/asset"; -import { ev } from "@packages/types/primitives/fraction"; -import { Valut } from "@packages/types/valut"; -import subscribeEvents from "@packages/utils/subscribeEvents"; -import params from "@packages/utils/params"; -import { formatTemplate } from "@packages/utils/precision"; -import { SessionResponse } from "@packages/components/providers/SessionProvider/models"; -import { Value } from "@packages/types/primitives/value"; - -export default function CreateAssetInfo( - session?: SessionResponse, - asset?: Asset, - precision?: number, -) { - return () => ( - - - - ); -} - -export function AssetInfo(props: { - session?: SessionResponse; - asset?: Asset; - precision?: number; -}) { - const [balance, setBalance] = createSignal(undefined); - - let eventsource: EventSource | undefined; - - onMount(async () => { - if (props.session && props.asset && props.precision) { - const asset = props.asset; - - eventsource = await subscribeEvents( - `${api}/private/balance`, - params({ asset_id: asset.id }), - params({ asset_id: asset.id }), - (data) => { - setBalance(Valut.parse(data).balance); - }, - ); - } - }); - - onCleanup(() => { - eventsource?.close(); - }); - - return ( -
-
- -
-
-
{`${props.asset?.name} (${props.asset?.symbol})`}
-
- {balance()?.Finite - ? format( - ev(balance()?.Finite), - formatTemplate(props.precision ?? 3), - ) - : "---"} -
-
-
- ); -} diff --git a/web/apps/processor/src/components/Asset.tsx b/web/apps/processor/src/components/Asset.tsx deleted file mode 100644 index 68e3d9f3..00000000 --- a/web/apps/processor/src/components/Asset.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { useAsset } from "~/components/providers/AssetProvider"; -import { useSession } from "@packages/components/providers/SessionProvider"; -import { usePrecision } from "@packages/components/providers/PrecisionProvider"; -import CreateAssetInfo from "~/components/Asset/AssetInfo"; -import { Dynamic } from "solid-js/web"; -import CreateActions from "~/components/Asset/Actions"; - -export default function Asset() { - const asset = useAsset(); - const session = useSession(); - const precision = usePrecision(); - - return ( -
-
- -
-
- -
-
- ); -} diff --git a/web/apps/processor/src/components/Asset/Actions.tsx b/web/apps/processor/src/components/Asset/Actions.tsx deleted file mode 100644 index c0c2efba..00000000 --- a/web/apps/processor/src/components/Asset/Actions.tsx +++ /dev/null @@ -1,205 +0,0 @@ -import { Index, Show, createEffect, createSignal } from "solid-js"; -import { joinPaths } from "solid-start/islands/server-router"; -import { api, base } from "~/root"; -import { Asset } from "@packages/types/asset"; -import { Fraction, fFromBigint } from "@packages/types/primitives/fraction"; -import params from "@packages/utils/params"; -import NumberInput from "~/components/Inputs/NumberInput"; -import { MintBurnRequest, TransferRequest } from "@packages/types/mod"; -import SearchInput from "~/components/Inputs/SearchInput"; -import { z } from "zod"; -import { SessionResponse } from "@packages/components/providers/SessionProvider/models"; -import { User } from "@packages/types/user"; - -export const UserRecognitionResult = z.object({ - score: z.number(), - user: User, -}); -export type UserRecognitionResult = z.infer; - -const querySearch = async (input: string) => { - return await fetch(`${api}/public/users/search_user?${params({ input })}`) - .then((r) => r.json()) - .then((r) => z.array(UserRecognitionResult).parse(r)); -}; - -export default function CreateActions( - asset?: Asset, - session?: SessionResponse, - precision?: number, -) { - return () => ( - - - - ); -} - -export function Actions(props: { - session?: SessionResponse; - asset?: Asset; - precision?: number; -}) { - const [amount, setAmount] = createSignal(fFromBigint(0n)); - const [search, setSearch] = createSignal(""); - const [users, setUsers] = createSignal([]); - const [selectedUser, setSelectedUser] = createSignal( - undefined, - ); - - createEffect(async () => { - if (search()) { - setUsers(await querySearch(search())); - } - }); - - return ( - <> -
- { - setAmount(f); - }} - /> -
-
{ - if (props.session) { - await fetch(`${api}/private/burn`, { - method: "POST", - headers: { - Accept: "application/json", - "Content-Type": "application/json", - }, - credentials: "same-origin", - body: JSON.stringify( - MintBurnRequest.parse({ - asset_id: props.asset?.id, - amount: amount(), - }), - (_, v) => (typeof v === "bigint" ? v.toString() : v), - ), - }).then((r) => r.text()); - } - }} - > - Burn -
-
{ - if (props.session) { - await fetch(`${api}/private/mint`, { - method: "POST", - headers: { - Accept: "application/json", - "Content-Type": "application/json", - }, - credentials: "same-origin", - body: JSON.stringify( - MintBurnRequest.parse({ - asset_id: props.asset?.id, - amount: amount(), - }), - (_, v) => (typeof v === "bigint" ? v.toString() : v), - ), - }).then((r) => r.text()); - } - }} - > - Mint -
-
-
{ - if (props.session && selectedUser() != undefined) { - await fetch(`${api}/private/transfer`, { - method: "POST", - headers: { - Accept: "application/json", - "Content-Type": "application/json", - }, - credentials: "same-origin", - body: JSON.stringify( - TransferRequest.parse({ - taker_id: selectedUser()?.id, - asset_id: props.asset?.id, - amount: amount(), - }), - (_, v) => (typeof v === "bigint" ? v.toString() : v), - ), - }).then((r) => r.text()); - } - }} - > - Transfer -
- { - setSearch(f.target.value); - }} - /> -
-
- - {(element) => ( -
{ - setSelectedUser(element().user); - }} - > -
- user -
-
-
id: {element().user.id}
-
- address: {element().user.address} -
-
-
- )} - -
-
-
- - ); -} diff --git a/web/apps/processor/src/components/Asset/AssetInfo.tsx b/web/apps/processor/src/components/Asset/AssetInfo.tsx deleted file mode 100644 index e2b22982..00000000 --- a/web/apps/processor/src/components/Asset/AssetInfo.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { format } from "numerable"; -import { Show, createSignal, onCleanup, onMount } from "solid-js"; -import { joinPaths } from "solid-start/islands/server-router"; -import { api, base } from "~/root"; -import { Asset } from "@packages/types/asset"; -import { ev } from "@packages/types/primitives/fraction"; -import { Valut } from "@packages/types/valut"; -import subscribeEvents from "@packages/utils/subscribeEvents"; -import params from "@packages/utils/params"; -import { formatTemplate } from "@packages/utils/precision"; -import { SessionResponse } from "@packages/components/providers/SessionProvider/models"; -import { Value } from "@packages/types/primitives/value"; - -export default function CreateAssetInfo( - asset?: Asset, - session?: SessionResponse, - precision?: number, -) { - return () => ( - - - - ); -} - -export function AssetInfo(props: { - session?: SessionResponse; - asset?: Asset; - precision?: number; -}) { - const [balance, setBalance] = createSignal(undefined); - - let eventsource: EventSource | undefined; - - onMount(async () => { - if (props.session && props.asset && props.precision) { - const asset = props.asset; - - eventsource = await subscribeEvents( - `${api}/private/balance`, - params({ asset_id: asset.id }), - params({ asset_id: asset.id }), - (data) => { - setBalance(Valut.parse(data).balance); - }, - ); - } - }); - - onCleanup(() => { - eventsource?.close(); - }); - - return ( -
-
- -
-
-
{props.asset?.name}
-
{props.asset?.symbol}
-
-
- {balance()?.Finite - ? format(ev(balance()?.Finite), formatTemplate(props.precision ?? 3)) - : "---"} -
-
- ); -} diff --git a/web/apps/processor/src/components/Atoms/Buttons/ArrowDownButton.tsx b/web/apps/processor/src/components/Atoms/Buttons/ArrowDownButton.tsx new file mode 100644 index 00000000..eebab05f --- /dev/null +++ b/web/apps/processor/src/components/Atoms/Buttons/ArrowDownButton.tsx @@ -0,0 +1,38 @@ +import { Match, Switch } from "solid-js"; +import { joinPaths } from "solid-start/islands/server-router"; +import { base } from "~/root"; +import { + ColorMode, + useColorMode, +} from "@packages/components/providers/ColorModeProvider"; + +export interface IArrowDownButton { + class?: string; +} + +export default function ArrowDownButton(props: IArrowDownButton) { + const colorMode = useColorMode(); + + return ( +
+ + + + + + + + +
+ ); +} diff --git a/web/apps/processor/src/components/Atoms/Buttons/NewButton.tsx b/web/apps/processor/src/components/Atoms/Buttons/NewButton.tsx new file mode 100644 index 00000000..6542d5d6 --- /dev/null +++ b/web/apps/processor/src/components/Atoms/Buttons/NewButton.tsx @@ -0,0 +1,15 @@ +import { joinPaths } from "solid-start/islands/server-router"; +import { base } from "~/root"; + +export default function NewButton(props: { class: string }) { + return ( + + ); +} diff --git a/web/apps/processor/src/components/Atoms/Buttons/NotificationsButton.tsx b/web/apps/processor/src/components/Atoms/Buttons/NotificationsButton.tsx new file mode 100644 index 00000000..5731a319 --- /dev/null +++ b/web/apps/processor/src/components/Atoms/Buttons/NotificationsButton.tsx @@ -0,0 +1,32 @@ +import { Match, Switch } from "solid-js"; +import { joinPaths } from "solid-start/islands/server-router"; +import { base } from "~/root"; +import { + ColorMode, + useColorMode, +} from "@packages/components/providers/ColorModeProvider"; + +export interface INotificationsButton { + highlighted?: boolean; + class?: string; +} + +export default function NotificationsButton(props: INotificationsButton) { + const colorMode = useColorMode(); + + return ( + + ); +} diff --git a/web/apps/processor/src/components/Atoms/Currencies/Currencies.tsx b/web/apps/processor/src/components/Atoms/Currencies/Currencies.tsx new file mode 100644 index 00000000..52207fc9 --- /dev/null +++ b/web/apps/processor/src/components/Atoms/Currencies/Currencies.tsx @@ -0,0 +1,27 @@ +import Currency from "~/components/Atoms/Currencies/Currency"; +import { useAssets } from "@packages/components/providers/AssetsProvider"; +import { useSelectedAsset } from "~/components/providers/SelectedAssetProvider"; +import { Index, createMemo } from "solid-js"; +import { Asset } from "@packages/types/asset"; + +export default function Currencies() { + const assets = useAssets(); + const assetsList = createMemo(() => [...assets().values()]); + const selectedAssets = useSelectedAsset(); + + return ( +
+ + {(element) => ( + { + selectedAssets.setSelectedAsset(element()); + }} + /> + )} + +
+ ); +} diff --git a/web/apps/processor/src/components/Atoms/Currencies/Currency.tsx b/web/apps/processor/src/components/Atoms/Currencies/Currency.tsx new file mode 100644 index 00000000..d395c951 --- /dev/null +++ b/web/apps/processor/src/components/Atoms/Currencies/Currency.tsx @@ -0,0 +1,53 @@ +import Picture from "~/components/Atoms/Picture"; +import { Asset } from "@packages/types/asset"; +import { joinPaths } from "solid-start/islands/server-router"; +import { base } from "~/root"; + +export interface ICurrency { + asset: Asset; + selected: boolean; + onClick?: () => void; +} + +export default function Currency(props: ICurrency) { + return ( +
{ + if (props.onClick) { + props.onClick(); + } + }} + > +
+
+ +
+

+ {props.asset.name} +

+

+ {props.asset.symbol} +

+
+
+
+

+ {0.01} +

+
+
+
+ ); +} diff --git a/web/apps/processor/src/components/Atoms/Picture.tsx b/web/apps/processor/src/components/Atoms/Picture.tsx new file mode 100644 index 00000000..6d40759f --- /dev/null +++ b/web/apps/processor/src/components/Atoms/Picture.tsx @@ -0,0 +1,24 @@ +import { joinPaths } from "solid-start/islands/server-router"; +import { base } from "~/root"; + +export interface IPicture { + src: string; + alt?: string; + size?: number; + class?: string; +} + +export default function Picture(props: IPicture) { + return ( +
+ {props.alt +
+ ); +} diff --git a/web/apps/processor/src/components/Atoms/Profile.tsx b/web/apps/processor/src/components/Atoms/Profile.tsx new file mode 100644 index 00000000..fe39fcca --- /dev/null +++ b/web/apps/processor/src/components/Atoms/Profile.tsx @@ -0,0 +1,16 @@ +import Picture from "~/components/Atoms/Picture"; + +export interface IProfile { + name: string; + img: string; + class?: string; +} + +export default function Profile(props: IProfile) { + return ( +
+ +

{props.name}

+
+ ); +} diff --git a/web/apps/processor/src/components/Atoms/SearchBar.tsx b/web/apps/processor/src/components/Atoms/SearchBar.tsx new file mode 100644 index 00000000..9b34226a --- /dev/null +++ b/web/apps/processor/src/components/Atoms/SearchBar.tsx @@ -0,0 +1,28 @@ +import { createSignal } from "solid-js"; +import { joinPaths } from "solid-start/islands/server-router"; +import { base } from "~/root"; + +export interface ISearchBar { + placeholder?: string; +} + +export default function SearchBar(props: ISearchBar) { + const [query, setQuery] = createSignal(""); + + return ( +
+ Search Icon + setQuery(e.target.value)} + class="flex-grow rounded-r-full px-1 py-1 outline-none bg-r-light-search-bar dark:bg-r-dark-search-bar m-0 p-0 text-[14px]" + placeholder={props.placeholder || "Search"} + /> +
+ ); +} diff --git a/web/apps/processor/src/components/Header.tsx b/web/apps/processor/src/components/Header.tsx deleted file mode 100644 index ffba7095..00000000 --- a/web/apps/processor/src/components/Header.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { A } from "solid-start"; -import { joinPaths } from "solid-start/islands/server-router"; -import { api, base } from "~/root"; -import WalletButton from "~/components/Header/WalletButton"; - -export default function Header() { - return ( -
- -
-
- ksox logo -
-
KSOX PAY
-
- -
- -
-
- ); -} diff --git a/web/apps/processor/src/components/Header/WalletButton.tsx b/web/apps/processor/src/components/Header/WalletButton.tsx deleted file mode 100644 index d6f308bc..00000000 --- a/web/apps/processor/src/components/Header/WalletButton.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { joinPaths } from "solid-start/islands/server-router"; -import { - setSession, - login, - useSession, - logout, -} from "@packages/components/providers/SessionProvider"; -import { - useWallet, - walletClientConnect, -} from "@packages/components/providers/WalletProvider"; -import firstLastChars from "@packages/utils/firstLastChars"; -import { createEffect, untrack } from "solid-js"; - -export default function WalletButton(props: { - base_url: string; - api_url: string; -}) { - const wallet = useWallet(); - const session = useSession(); - - createEffect(async () => { - if (wallet.walletClient && untrack(() => !session())) { - setSession(await login(props.api_url, wallet.walletClient)); - } - }); - - return ( -
{ - if (!wallet.walletClient) { - await walletClientConnect(); - } else if (session()) { - setSession(await logout(props.api_url)); - } else { - setSession(await login(props.api_url, wallet.walletClient)); - } - }} - > - {!session() ? ( - wallet - ) : ( - user - )} -
- {!wallet.walletClient && !session() - ? "CONNECT WALLET" - : !session() - ? "LOGIN" - : firstLastChars(session()?.address ?? "", 6, 6)} -
-
- ); -} diff --git a/web/apps/processor/src/components/Home.tsx b/web/apps/processor/src/components/Home.tsx new file mode 100644 index 00000000..4d67c43d --- /dev/null +++ b/web/apps/processor/src/components/Home.tsx @@ -0,0 +1,17 @@ +import Header from "~/components/Home/Header"; +import AccountDashboard from "~/components/Home/AccountDashboard"; + +export default function Home() { + return ( +
+
+
+
+
+
+ +
+
+
+ ); +} diff --git a/web/apps/processor/src/components/Home/AccountDashboard.tsx b/web/apps/processor/src/components/Home/AccountDashboard.tsx new file mode 100644 index 00000000..9f468fdb --- /dev/null +++ b/web/apps/processor/src/components/Home/AccountDashboard.tsx @@ -0,0 +1,49 @@ +import CurrencyDisplay from "~/components/Home/CurrencyDisplay"; +import DepositWithdrawPanel from "~/components/Home/DepositWithdrawPanel"; +import { ITransaction } from "~/components/Home/TransactionsElement"; +import Transactions from "~/components/Home/Transactions"; + +export default function AccountDashboard() { + const transactionsData: ITransaction[] = [ + { + title: "OpenAI", + img: "gfx/bitcoin_placeholder.png", + date: "17 July", + hour: "18:12", + amount: 24.6, + plus: false, + currency: "BTC", + }, + { + title: "Another Company", + img: "gfx/ethereum_placeholder.png", + date: "16 July", + hour: "09:45", + amount: 50.0, + plus: true, + currency: "ETH", + }, + { + title: "Third Company", + img: "gfx/litecoin_placeholder.png", + date: "15 July", + hour: "14:29", + amount: 10.25, + plus: false, + currency: "LTC", + }, + ]; + + return ( +
+ + +
+

+ Transactions +

+ +
+
+ ); +} diff --git a/web/apps/processor/src/components/Home/CurrenciesModal.tsx b/web/apps/processor/src/components/Home/CurrenciesModal.tsx new file mode 100644 index 00000000..b4a46cb3 --- /dev/null +++ b/web/apps/processor/src/components/Home/CurrenciesModal.tsx @@ -0,0 +1,30 @@ +import { createSignal } from "solid-js"; +import Currencies from "~/components/Atoms/Currencies/Currencies"; + +export default function Modal() { + const [isVisible, setIsVisible] = createSignal(false); + + return ( +
+ {/* Backdrop */} +
+ + {/* Modal */} +
+ {/* Modal content */} +

Currencies

+ +
+
+ ); +} diff --git a/web/apps/processor/src/components/Home/CurrencyDisplay.tsx b/web/apps/processor/src/components/Home/CurrencyDisplay.tsx new file mode 100644 index 00000000..4f76ce42 --- /dev/null +++ b/web/apps/processor/src/components/Home/CurrencyDisplay.tsx @@ -0,0 +1,40 @@ +import { useSelectedAsset } from "~/components/providers/SelectedAssetProvider"; +import { joinPaths } from "solid-start/islands/server-router"; +import Picture from "~/components/Atoms/Picture"; +import { base } from "~/root"; +import ArrowDownButton from "~/components/Atoms/Buttons/ArrowDownButton"; + +export default function CurrencyDisplay() { + const selectedAsset = useSelectedAsset(); + return ( +
+
+
+
+
+

+ {0.001} +

+

+ {selectedAsset.selectedAsset()?.symbol} +

+ +
+

+ {selectedAsset.selectedAsset()?.name} +

+
+ +
+
+
+ ); +} diff --git a/web/apps/processor/src/components/Home/DepositWithdrawPanel.tsx b/web/apps/processor/src/components/Home/DepositWithdrawPanel.tsx new file mode 100644 index 00000000..82fa451f --- /dev/null +++ b/web/apps/processor/src/components/Home/DepositWithdrawPanel.tsx @@ -0,0 +1,31 @@ +import { joinPaths } from "solid-start/islands/server-router"; +import { base } from "~/root"; + +export default function DepositWithdrawPanel() { + return ( +
+
+
+
+ +
+
deposit
+
+
+
+ +
+
withdraw
+
+
+
+ ); +} diff --git a/web/apps/processor/src/components/Home/Header.tsx b/web/apps/processor/src/components/Home/Header.tsx new file mode 100644 index 00000000..11bc0964 --- /dev/null +++ b/web/apps/processor/src/components/Home/Header.tsx @@ -0,0 +1,39 @@ +import NotificationsButton from "~/components/Atoms/Buttons/NotificationsButton"; +import Picture from "~/components/Atoms/Picture"; +import SearchBar from "~/components/Atoms/SearchBar"; +import { + ColorMode, + useColorMode, +} from "@packages/components/providers/ColorModeProvider"; +import NewButton from "~/components/Atoms/Buttons/NewButton"; + +export default function Header(props: { class?: string }) { + const colorMode = useColorMode(); + return ( +
+
{ + const enumValues = Object.values(ColorMode); + colorMode.setColorMode( + enumValues[ + (enumValues.indexOf(colorMode.colorMode()) + 1) % + enumValues.length + ], + ); + }} + > + +
+
+ Home +
+ +
+ +
+
+ ); +} diff --git a/web/apps/processor/src/components/Home/Transactions.tsx b/web/apps/processor/src/components/Home/Transactions.tsx new file mode 100644 index 00000000..b955f1dd --- /dev/null +++ b/web/apps/processor/src/components/Home/Transactions.tsx @@ -0,0 +1,48 @@ +import Transaction, { + ITransaction, +} from "~/components/Home/TransactionsElement"; + +export interface ITransactions { + transactions: ITransaction[]; + noTransactions?: number; +} + +export default function Transactions(props: ITransactions) { + return ( +
+ {props.transactions.length > 0 ? ( + props.transactions.map((transaction, index) => ( + + )) + ) : ( +
+ {props.noTransactions ? ( + Array.from({ length: props.noTransactions }).map((_, index) => ( + + )) + ) : ( +

+ No transactions available. +

+ )} +
+ )} +
+ ); +} diff --git a/web/apps/processor/src/components/Home/TransactionsElement.tsx b/web/apps/processor/src/components/Home/TransactionsElement.tsx new file mode 100644 index 00000000..bf560252 --- /dev/null +++ b/web/apps/processor/src/components/Home/TransactionsElement.tsx @@ -0,0 +1,43 @@ +import Picture from "~/components/Atoms/Picture"; + +export interface ITransaction { + title: string; + img: string; + date: string; // i.e 3 July + hour: string; // i.e 14:29 + amount: number; + plus: boolean; // amount and plus can be combined into amount: string + currency: string; + onClick?: () => void; +} + +export default function Transaction(props: ITransaction) { + return ( +
{})} + > +
+
+ +
+

+ {props.title} +

+

+ {props.date + ", " + props.hour} +

+
+
+
+

+ {(props.plus ? "+" : "-") + props.amount} +

+

+ {props.currency} +

+
+
+
+ ); +} diff --git a/web/apps/processor/src/components/Inputs/NumberInput.tsx b/web/apps/processor/src/components/Inputs/NumberInput.tsx deleted file mode 100644 index 4afad56a..00000000 --- a/web/apps/processor/src/components/Inputs/NumberInput.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import { format } from "numerable"; -import { createMemo, createUniqueId, JSX } from "solid-js"; -import { Fraction } from "@packages/types/primitives/fraction"; -import { formatTemplate } from "@packages/utils/precision"; - -export interface NumberInputComponent { - value?: Fraction; - left?: JSX.Element; - right?: JSX.Element; - class?: JSX.HTMLAttributes["class"]; - disabled?: boolean; - disabledClass?: JSX.HTMLAttributes["class"]; - precision?: number; - onInput?: (f: Fraction) => void; - onChange?: (f: Fraction) => void; -} - -function formatHumanReadable(input: string, precision: number) { - // Remove all non-digit and non-dot characters - let formatted = - precision > 0 - ? input.replace(/[^0-9.]/g, "") - : input.replace(/[^0-9]/g, ""); - formatted = formatted.replace(/(\..*?)\..*/g, "$1").replace(/^0[^.]/, "0"); - - // Truncate decimal part to maxDigits digits - formatted = formatted.replace( - new RegExp("(\\.\\d{0," + precision + "})\\d*"), - "$1", - ); - - // Add commas every third digit before the dot - const dotIndex = formatted.indexOf("."); - if (dotIndex !== -1) { - const integerPart = formatted - .substring(0, dotIndex) - .replace(/\B(?=(\d{3})+(?!\d))/g, ","); - const decimalPart = formatted.substring(dotIndex); - formatted = - integerPart + - decimalPart.replace(/(?<=\.)[^.]+/g, (match) => match.replace(/\./g, "")); - } else { - formatted = formatted.replace(/\B(?=(\d{3})+(?!\d))/g, ","); - } - - // Ensure there are no two commas next to each other - formatted = formatted.replace(/(,)\1+/g, "$1"); - - return formatted; -} - -function humanReadableToBigint(input: string) { - const decimalNumber = input.replace(/,/g, ""); - const index = decimalNumber.indexOf("."); - const decimalPlaces = - index >= 0 ? BigInt(decimalNumber.length - index - 1) : 0n; - return Fraction.parse({ - numer: BigInt(decimalNumber.replace(".", "")), - denom: 10n ** decimalPlaces, - }); -} - -export default function NumberInput(props: NumberInputComponent) { - let inputDOM!: HTMLInputElement; - const valueDOM = createMemo(() => { - return props.value == undefined ? { numer: 0n, denom: 1n } : props.value; - }); - - const id = createUniqueId(); - - return ( -
{ - inputDOM.focus(); - }} - > - -
- { - (e.target as HTMLInputElement).value = formatHumanReadable( - (e.target as HTMLInputElement).value, - props.precision ?? 3, - ); - if (props.onInput != undefined) { - props.onInput( - humanReadableToBigint((e.target as HTMLInputElement).value), - ); - } - }} - onChange={(e) => { - if (props.onChange != undefined) { - props.onChange( - humanReadableToBigint((e.target as HTMLInputElement).value), - ); - } - }} - onFocus={(e) => { - (e.target as HTMLInputElement).select(); - }} - /> -
-
- {props.right} -
-
- ); -} diff --git a/web/apps/processor/src/components/Inputs/SearchInput.tsx b/web/apps/processor/src/components/Inputs/SearchInput.tsx deleted file mode 100644 index 89d4b632..00000000 --- a/web/apps/processor/src/components/Inputs/SearchInput.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { createUniqueId, JSX } from "solid-js"; - -export interface SearchInputComponent { - value?: string; - left?: JSX.Element; - class?: JSX.HTMLAttributes["class"]; - disabled?: boolean; - disabledClass?: JSX.HTMLAttributes["class"]; - onInput?: ( - e: Event & { - currentTarget: HTMLInputElement; - target: HTMLInputElement; - }, - ) => void; - onChange?: ( - e: Event & { - currentTarget: HTMLInputElement; - target: HTMLInputElement; - }, - ) => void; -} - -export default function SearchInput(props: SearchInputComponent) { - let inputDOM!: HTMLInputElement; - - const id = createUniqueId(); - - return ( -
{ - inputDOM.focus(); - }} - > - -
- (props.onInput ? props.onInput(ev) : {})} - onChange={(ev) => (props.onChange ? props.onChange(ev) : {})} - onFocus={(e) => { - (e.target as HTMLInputElement).select(); - }} - /> -
-
- ); -} diff --git a/web/apps/processor/src/components/Nav.tsx b/web/apps/processor/src/components/Nav.tsx new file mode 100644 index 00000000..47ef7675 --- /dev/null +++ b/web/apps/processor/src/components/Nav.tsx @@ -0,0 +1,67 @@ +import { A } from "solid-start"; +import { useNav, Nav } from "~/components/providers/NavProvider"; +import NavButton from "~/components/Nav/NavButton"; +import { + ColorMode, + useColorMode, +} from "@packages/components/providers/ColorModeProvider"; +import { Match, Switch } from "solid-js"; +import { joinPaths } from "solid-start/islands/server-router"; +import { base } from "~/root"; + +export default function SideNavigation() { + const nav = useNav(); + const colorMode = useColorMode(); + return ( +
+ + + + + + + + + + } + /> + + + + + + + + + + + } + /> + +
+ ); +} diff --git a/web/apps/processor/src/components/Nav/NavButton.tsx b/web/apps/processor/src/components/Nav/NavButton.tsx new file mode 100644 index 00000000..45166651 --- /dev/null +++ b/web/apps/processor/src/components/Nav/NavButton.tsx @@ -0,0 +1,24 @@ +import { JSX } from "solid-js"; + +export interface NavButtonProps { + icon: JSX.Element; + name: string; + highlighted?: boolean; +} + +export default function NavButton(props: NavButtonProps) { + return ( +
+
+ {props.icon} +
+
+ {props.name} +
+
+ ); +} diff --git a/web/apps/processor/src/components/Navigation.tsx b/web/apps/processor/src/components/Navigation.tsx deleted file mode 100644 index 4fa2da03..00000000 --- a/web/apps/processor/src/components/Navigation.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { A } from "solid-start"; -import NavButton from "~/components/Navigation/NavButton"; -import { useNav, Nav } from "~/components/providers/NavProvider"; - -export default function Navigation() { - const nav = useNav(); - return ( -
- - - - - - -
- ); -} diff --git a/web/apps/processor/src/components/Navigation/NavButton.tsx b/web/apps/processor/src/components/Navigation/NavButton.tsx deleted file mode 100644 index 843b0df6..00000000 --- a/web/apps/processor/src/components/Navigation/NavButton.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { base } from "~/root"; -import { joinPaths } from "solid-start/islands/server-router"; - -interface NavButtonProps { - imgPath: string; - name: string; - highlighted?: boolean; -} - -export default function NavButton(props: NavButtonProps) { - return ( -
-
- -
-
- {props.name} -
-
- ); -} diff --git a/web/apps/processor/src/components/SideNav.tsx b/web/apps/processor/src/components/SideNav.tsx new file mode 100644 index 00000000..300f13aa --- /dev/null +++ b/web/apps/processor/src/components/SideNav.tsx @@ -0,0 +1,118 @@ +import { A } from "solid-start"; +import { useNav, Nav } from "~/components/providers/NavProvider"; +import SideNavButton from "~/components/SideNav/SideNavButton"; +import { + ColorMode, + useColorMode, +} from "@packages/components/providers/ColorModeProvider"; +import { Match, Switch } from "solid-js"; +import { joinPaths } from "solid-start/islands/server-router"; +import { base } from "~/root"; + +export default function SideNavigation() { + const nav = useNav(); + const colorMode = useColorMode(); + + return ( +
+
+ + + + + + + + + + } + /> + + + + + + + + + + + } + /> + + + + + + + + + + + } + /> + + + + + + + + + + + } + /> + +
+
+ ); +} diff --git a/web/apps/processor/src/components/SideNav/SideNavButton.tsx b/web/apps/processor/src/components/SideNav/SideNavButton.tsx new file mode 100644 index 00000000..6df548d6 --- /dev/null +++ b/web/apps/processor/src/components/SideNav/SideNavButton.tsx @@ -0,0 +1,28 @@ +import { JSX } from "solid-js"; + +export interface SideNavButtonProps { + icon: JSX.Element; + name: string; + highlighted?: boolean; +} + +export default function SideNavButton(props: SideNavButtonProps) { + return ( +
+
{props.icon}
+
+ {props.name} +
+
+ ); +} diff --git a/web/apps/processor/src/components/Transfer.tsx b/web/apps/processor/src/components/Transfer.tsx new file mode 100644 index 00000000..c8997ac1 --- /dev/null +++ b/web/apps/processor/src/components/Transfer.tsx @@ -0,0 +1,49 @@ +import Transfers from "~/components/Transfer/Transfers"; +import Header from "~/components/Transfer/Header"; + +export default function Transfer() { + const transfersMockData = [ + { + name: "Filip Dziurdzia", + text: "You sent 0.0001 BTC", + date: new Date(Date.now()), + img: "gfx/bitcoin_placeholder.png", + }, + { + name: "Filip Dziurdzia", + text: "You sent 0.0001 BTC", + date: new Date(Date.now()), + img: "gfx/bitcoin_placeholder.png", + }, + { + name: "Filip Dziurdzia", + text: "You sent 0.0001 BTC", + date: new Date(Date.now()), + img: "gfx/bitcoin_placeholder.png", + }, + { + name: "Filip Dziurdzia", + text: "You sent 0.0001 BTC", + date: new Date(Date.now()), + img: "gfx/bitcoin_placeholder.png", + }, + { + name: "Filip Dziurdzia", + text: "You sent 0.0001 BTC", + date: new Date(Date.now()), + img: "gfx/bitcoin_placeholder.png", + }, + ]; + return ( +
+
+
+
+
+
+ +
+
+
+ ); +} diff --git a/web/apps/processor/src/components/Transfer/Header.tsx b/web/apps/processor/src/components/Transfer/Header.tsx new file mode 100644 index 00000000..549ca732 --- /dev/null +++ b/web/apps/processor/src/components/Transfer/Header.tsx @@ -0,0 +1,38 @@ +import Picture from "~/components/Atoms/Picture"; +import SearchBar from "~/components/Atoms/SearchBar"; +import { + ColorMode, + useColorMode, +} from "@packages/components/providers/ColorModeProvider"; +import NewButton from "~/components/Atoms/Buttons/NewButton"; + +export default function Header(props: { class?: string }) { + const colorMode = useColorMode(); + return ( +
+
{ + const enumValues = Object.values(ColorMode); + colorMode.setColorMode( + enumValues[ + (enumValues.indexOf(colorMode.colorMode()) + 1) % + enumValues.length + ], + ); + }} + > + +
+
+ Transfer +
+ +
+ +
+
+ ); +} diff --git a/web/apps/processor/src/components/Transfer/TransferElement.tsx b/web/apps/processor/src/components/Transfer/TransferElement.tsx new file mode 100644 index 00000000..eb7b03de --- /dev/null +++ b/web/apps/processor/src/components/Transfer/TransferElement.tsx @@ -0,0 +1,32 @@ +import Picture from "~/components/Atoms/Picture"; +import { formatDate } from "@packages/utils/formatDate"; + +export interface ITransferElement { + name: string; + img: string; + date: Date; // i.e. Aug 21, Apr 11, 2021 + text: string; +} + +export default function TransferElement(props: ITransferElement) { + return ( +
+
+
+ +
+

{props.name}

+

+ {props.text} +

+
+
+
+

+ {formatDate(props.date)} +

+
+
+
+ ); +} diff --git a/web/apps/processor/src/components/Transfer/Transfers.tsx b/web/apps/processor/src/components/Transfer/Transfers.tsx new file mode 100644 index 00000000..8ff692bb --- /dev/null +++ b/web/apps/processor/src/components/Transfer/Transfers.tsx @@ -0,0 +1,25 @@ +import { Index } from "solid-js"; +import TransferElement, { + ITransferElement, +} from "~/components/Transfer/TransferElement"; + +export interface ITransfers { + transfers: ITransferElement[]; +} + +export default function Transfers(props: ITransfers) { + return ( +
+ + {(element) => ( + + )} + +
+ ); +} diff --git a/web/apps/processor/src/components/Wallet.tsx b/web/apps/processor/src/components/Wallet.tsx new file mode 100644 index 00000000..0c424196 --- /dev/null +++ b/web/apps/processor/src/components/Wallet.tsx @@ -0,0 +1,3 @@ +export default function Wallet() { + return
; +} diff --git a/web/apps/processor/src/components/providers/AssetProvider.tsx b/web/apps/processor/src/components/providers/AssetProvider.tsx deleted file mode 100644 index 88d0575f..00000000 --- a/web/apps/processor/src/components/providers/AssetProvider.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { - Accessor, - createContext, - createEffect, - createSignal, - JSX, - useContext, -} from "solid-js"; -import { useParams } from "solid-start"; -import { Asset } from "@packages/types/asset"; -import { Uuid } from "@packages/types/primitives/uuid"; -import { useAssets } from "~/components/providers/AssetsProvider"; - -const [asset, setAsset] = createSignal(undefined); -const AssetContext = createContext>(asset); -export function AssetProvider(props: { children: JSX.Element }) { - const params = useParams<{ assetId?: Uuid }>(); - const assets = useAssets(); - - createEffect(() => { - if (assets && params.assetId) { - setAsset(assets().get(params.assetId)); - } - }); - - return ( - - {props.children} - - ); -} -export function useAsset() { - return useContext>(AssetContext); -} diff --git a/web/apps/processor/src/components/providers/AssetsProvider.tsx b/web/apps/processor/src/components/providers/AssetsProvider.tsx deleted file mode 100644 index 1f553e02..00000000 --- a/web/apps/processor/src/components/providers/AssetsProvider.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { - Accessor, - createContext, - createSignal, - JSX, - onMount, - useContext, -} from "solid-js"; -import { z } from "zod"; -import { api } from "~/root"; -import { Asset } from "@packages/types/asset"; -import { Uuid } from "@packages/types/primitives/uuid"; - -const fetchAssets = async () => { - return await fetch(`${api}/public/assets`) - .then((r) => r.json()) - .then((r) => z.array(Asset).parse(r)) - .then((r) => { - const map = new Map(); - r.forEach((asset) => map.set(asset.id, asset)); - return map; - }); -}; - -const [assets, setAssets] = createSignal>(new Map()); -const AssetsContext = createContext>>(assets); -export function AssetsProvider(props: { children: JSX.Element }) { - onMount(async () => { - const x = await fetchAssets(); - setAssets(x); - }); - - return ( - - {props.children} - - ); -} -export function useAssets() { - return useContext>>(AssetsContext); -} diff --git a/web/apps/processor/src/components/providers/NavProvider.tsx b/web/apps/processor/src/components/providers/NavProvider.tsx index 862d2641..f1a5313d 100644 --- a/web/apps/processor/src/components/providers/NavProvider.tsx +++ b/web/apps/processor/src/components/providers/NavProvider.tsx @@ -7,12 +7,13 @@ import { } from "solid-js"; export enum Nav { - App, - Account, - Asset, + Home, + Transfer, + Settings, + Notifications, } -export const [nav, setNav] = createSignal