From 65fd2dc5cb17130fca611dc3bd571b3926687b0a Mon Sep 17 00:00:00 2001 From: carlos-kryha <97608823+carlos-kryha@users.noreply.github.com> Date: Thu, 15 Feb 2024 15:24:02 +0100 Subject: [PATCH] Remove unused code and clear TODOs (#115) ## Description Removed unused code and addressed outdated/irrelevant todos --- README.md | 103 +++------ agoric/contract/src/index.js | 1 - agoric/contract/src/kreadKit.js | 1 - agoric/contract/src/type-guards.js | 8 +- docs/glossary.md | 49 +++-- frontend/.yarnrc.yml | 7 +- .../activity-table/activity-table.tsx | 5 - .../asset-card/character-card-market.tsx | 2 - .../asset-character-filters.tsx | 2 - .../asset-item-filters/asset-item-filters.tsx | 3 - frontend/src/components/checkbox/checkbox.tsx | 18 -- frontend/src/components/checkbox/styles.ts | 36 ---- .../src/components/empty-card/empty-card.tsx | 27 --- frontend/src/components/empty-card/index.ts | 1 - .../input-fields/color-selector.tsx | 2 - frontend/src/components/item-stats/index.ts | 1 - .../src/components/item-stats/item-stats.tsx | 54 ----- frontend/src/components/menu-card/index.ts | 1 - .../src/components/menu-card/menu-card.tsx | 186 ---------------- frontend/src/components/menu-card/styles.ts | 113 ---------- frontend/src/components/menu-item/index.ts | 1 - .../src/components/menu-item/menu-item.tsx | 79 ------- .../components/toast-go-to-wallet/index.ts | 1 - .../components/toast-go-to-wallet/styles.ts | 24 --- .../toast-go-to-wallet/toast-go-to-wallet.tsx | 25 --- frontend/src/components/tooltip/tooltip.tsx | 2 - .../canvas-character-details.tsx | 60 ------ .../canvas/canvas-character-details/styles.ts | 45 ---- .../canvas-item-details.tsx | 73 ------- .../canvas/canvas-item-details/styles.ts | 45 ---- .../character-cards/character-cards.tsx | 2 - .../canvas/item-cards/item-card-info.tsx | 2 - .../canvas/main-mode/main-mode-mobile.tsx | 32 --- .../character-detail-section.tsx | 4 +- .../detail-section-header.tsx | 1 - .../detail-section-segment-details.tsx | 49 ----- .../detail-section-segment-details/index.ts | 1 - .../detail-section-segment-details/styles.ts | 40 ---- .../detail-section-segment-stats.tsx | 51 ----- .../detail-section-segment.tsx | 1 - .../detail-section/item-detail-section.tsx | 1 - frontend/src/context/agoric.tsx | 7 - frontend/src/context/wallet.tsx | 30 +-- .../character-actions.interfaces.ts | 54 ----- .../src/interfaces/item-actions.interfaces.ts | 73 ------- frontend/src/module.d.ts | 1 - frontend/src/navigation/routes.tsx | 4 +- frontend/src/pages/buy/character-buy.tsx | 18 -- .../pages/content-mobile/privacy-mobile.tsx | 1 - frontend/src/pages/content/privacy.tsx | 1 - .../pages/inventory/empty-item-inventory.tsx | 29 --- frontend/src/pages/item/styles.ts | 39 ---- .../src/pages/shop/character-shop-detail.tsx | 99 --------- frontend/src/service/character.ts | 2 - frontend/src/service/character/inventory.ts | 2 - frontend/src/service/character/mint.ts | 2 - frontend/src/service/config.ts | 2 - frontend/src/service/offers.ts | 2 +- .../src/service/storage-node/watch-general.ts | 31 ++- frontend/src/service/util.ts | 100 --------- frontend/src/service/utils/amount.js | 30 --- frontend/src/service/utils/fetch-websocket.js | 201 ------------------ frontend/src/service/utils/vstorage.test.ts | 133 ------------ frontend/src/service/utils/vstorage.ts | 72 ------- frontend/src/setupTests.ts | 5 - frontend/src/util/category.ts | 18 -- 66 files changed, 91 insertions(+), 2024 deletions(-) delete mode 100644 frontend/src/components/checkbox/checkbox.tsx delete mode 100644 frontend/src/components/checkbox/styles.ts delete mode 100644 frontend/src/components/empty-card/empty-card.tsx delete mode 100644 frontend/src/components/empty-card/index.ts delete mode 100644 frontend/src/components/item-stats/index.ts delete mode 100644 frontend/src/components/item-stats/item-stats.tsx delete mode 100644 frontend/src/components/menu-card/index.ts delete mode 100644 frontend/src/components/menu-card/menu-card.tsx delete mode 100644 frontend/src/components/menu-card/styles.ts delete mode 100644 frontend/src/components/menu-item/index.ts delete mode 100644 frontend/src/components/menu-item/menu-item.tsx delete mode 100644 frontend/src/components/toast-go-to-wallet/index.ts delete mode 100644 frontend/src/components/toast-go-to-wallet/styles.ts delete mode 100644 frontend/src/components/toast-go-to-wallet/toast-go-to-wallet.tsx delete mode 100644 frontend/src/containers/canvas/canvas-character-details/canvas-character-details.tsx delete mode 100644 frontend/src/containers/canvas/canvas-character-details/styles.ts delete mode 100644 frontend/src/containers/canvas/canvas-item-details/canvas-item-details.tsx delete mode 100644 frontend/src/containers/canvas/canvas-item-details/styles.ts delete mode 100644 frontend/src/containers/canvas/main-mode/main-mode-mobile.tsx delete mode 100644 frontend/src/containers/detail-section/detail-section-segment-details/detail-section-segment-details.tsx delete mode 100644 frontend/src/containers/detail-section/detail-section-segment-details/index.ts delete mode 100644 frontend/src/containers/detail-section/detail-section-segment-details/styles.ts delete mode 100644 frontend/src/containers/detail-section/detail-section-segment-stats/detail-section-segment-stats.tsx delete mode 100644 frontend/src/interfaces/character-actions.interfaces.ts delete mode 100644 frontend/src/interfaces/item-actions.interfaces.ts delete mode 100644 frontend/src/pages/inventory/empty-item-inventory.tsx delete mode 100644 frontend/src/pages/item/styles.ts delete mode 100644 frontend/src/pages/shop/character-shop-detail.tsx delete mode 100644 frontend/src/service/util.ts delete mode 100644 frontend/src/service/utils/amount.js delete mode 100644 frontend/src/service/utils/fetch-websocket.js delete mode 100644 frontend/src/service/utils/vstorage.test.ts delete mode 100644 frontend/src/service/utils/vstorage.ts delete mode 100644 frontend/src/setupTests.ts delete mode 100644 frontend/src/util/category.ts diff --git a/README.md b/README.md index 76e3b468a..636bd0908 100644 --- a/README.md +++ b/README.md @@ -1,90 +1,41 @@ # Kread -TODO: Give a short introduction of your project. Let this section explain the objectives or the motivation behind this project. +KREAd is a decentralized application deployed on Agoric, an open-source development company launching an interoperable Proof-of-Stake chain and economy. The dApp is imagined, built, and designed by Kryha. The SAGES art and comic is created by Enmanuel Heredia. ## Getting Started -TODO: Guide users through getting your code up and running on their own system. In this section you can talk about: +The KREAd application consists of a set of smart contracts deployed on Agoric and a frontend application to interact with them. The frontend can be accessed at [kread.app](http://kread.app/) and includes a network selector on the bottom left of the landing page to connect to different networks: -1. Installation process -2. Software dependencies -3. Latest releases -4. API references +1. Mainnet: hosts the official KREAd application, you can use it to mint, customize, and view your character as well as sell and buy using the KREAd marketplace. IST is used for payments and transaction fees can be paid in BLD or IST. +2. Emerynet: this network is meant for testing purposes and can be used to try out the application without spending real funds. The functionality is identical to Mainnet although the content may vary. You can use the [emerynet faucet](https://emerynet.faucet.agoric.net/) to get fake IST which can be used to interact with the KREAd contract. +3. Local: the KREAd frontend can also be connected to an Agoric chain running locally, this gives you full control by allowing changes to KREAd's source code. You can find instructions on how run KREAd locally [here](./agoric/README.md) -## Build and Test +## Build and Test Locally -TODO: Describe and show how to build your code and run the tests. +Ensure you are in the agoric folder (`KREAd/agoric/`) otherwise `cd agoric` -## Contribute - -TODO: Explain how other users and developers can contribute to make your code better. - -If you want to learn more about creating good readme files then refer the following [guidelines](https://docs.microsoft.com/en-us/azure/devops/repos/git/create-a-readme?view=azure-devops). You can also seek inspiration from the below readme files: - -- [ASP.NET Core](https://github.com/aspnet/Home) -- [Visual Studio Code](https://github.com/Microsoft/vscode) -- [Chakra Core](https://github.com/Microsoft/ChakraCore) - -## To Run a local AG-Solo + Wallet + frontend - -### Terminal 1 - agoric +1. Start the chain + 1. `make local-testnet` +2. make the committee + 1. `make kread-committee` +3. provision the fee collector wallet + 1. `make provision-fee-collector` +4. start the KREAd contract + 1. `make clean start-kread` +5. start frontend locally + 1. `cd ../frontend` + 2. `yarn & yarn dev` + 3. open http://localhost:5173/ + +To confirm the contract was deployed successfully: -1. `agoric start -v --reset` +- in chain log you should see "CONTRACT INIT SUCCESS" +- after that `agd query vstorage children published` should include "kread" -### Terminal 2 - agoric +If you encounter `Request would exceed mint limit` try `make fund-account` +If you are running a local testnet make sure you select "Local" on the frontend's network selector (shown on the bottom right of the landing & connect-wallet pages) -1. `agoric deploy contract/kread-deploy-contract.js api/kread-deploy-api.js` -2. `agoric open --repl` - -### Terminal 3 - frontend - -1. Remove `type: module` from `package.json` -2. yarn start -3. Remember to put back the `type: module` before commiting your changes - -## Run multiuser - -To run the application for more than one user follow these steps: +## Contribute -0. Install GO! - 1. `brew install go` -1. Run Make in your local agoric-sdk directory - 1. `cd /packages/cosmic-swingset` - 2. `make` -2. Run the chain: - 1. Open a new terminal window - 2. `cd agoric/` - 3. `make chain-reset` and wait until it starts validating blocks -3. Run ag-solo for the first user: - 1. Open a new terminal window - 2. `cd agoric/` - 3. `make solo0-reset` and wait until it prints "Deployed wallet!" -4. Run ag-solo for the second user: - 1. Open a new terminal window - 2. `cd agoric/` - 3. `make solo1-reset` and wait until it prints "Deployed wallet!" -5. Configure wallet and localStorage for the first user: - 1. Open a new terminal window - 2. `cd agoric/` - 3. `make wallet0` and open the url in a new browser tab -6. Configure wallet and localStorage for the second user: - 1. Open a new browser or a new session - 2. `make wallet1` and open the url in the new session or browser -7. Deploy contract and api: - 1. Open `frontend/package.json` and add `"type": "module"` to the configuration - 2. From `agoric/` directory run `make deploy` - 3. After everything is deployed, remove the line you added to `frontend/package.json` -8. On the session with the wallet listening to port 8001: - 1. Navigate to `local.agoric.com` - 2. In the text field type `https://localhost:8001/#accessToken=` where `access_token_value` is the value you get when executing `make wallet1` - 3. Click `save`, then click `open` - 4. Navigate to `local.agoric.com` - 5. In the text field type `https://localhost:8001/` - 6. Click `save`, then click `open` -9. Run frontend: - 1. Open a new terminal window - 2. `cd frontend/` - 3. `yarn start` - 4. Navigate to `localhost:3000` on each session and approve the app in both wallets -10. Enjoy! +Refer to [Contributing](./CONTRIBUTING.md) for guidelines diff --git a/agoric/contract/src/index.js b/agoric/contract/src/index.js index b604ce5fd..86a442c82 100644 --- a/agoric/contract/src/index.js +++ b/agoric/contract/src/index.js @@ -75,7 +75,6 @@ harden(meta); export const prepare = async (zcf, privateArgs, baggage) => { const terms = zcf.getTerms(); - // TODO: move to proposal const assetNames = terms.assetNames; // Setting up the mint capabilities here in the prepare function, as discussed with Turadg diff --git a/agoric/contract/src/kreadKit.js b/agoric/contract/src/kreadKit.js index 8bd4c46b2..e1d1aaa25 100644 --- a/agoric/contract/src/kreadKit.js +++ b/agoric/contract/src/kreadKit.js @@ -395,7 +395,6 @@ export const prepareKreadKit = ( (({ seat: _omitSeat, ...char }) => char)(character), ); - // TODO: consider refactoring what we put in the inventory node inventoryKit.recorder.write( inventorySeat.getAmountAllocated('Item').value.payload, ); diff --git a/agoric/contract/src/type-guards.js b/agoric/contract/src/type-guards.js index 62cf989ad..2b8c85e50 100644 --- a/agoric/contract/src/type-guards.js +++ b/agoric/contract/src/type-guards.js @@ -176,7 +176,6 @@ export const MarketRecorderGuard = M.or( }), asset: M.or(CharacterGuard, ItemGuard), isFirstSale: M.boolean(), - // history: M.arrayOf(HistoryGuard), }), M.string(''), ); @@ -184,7 +183,7 @@ export const MarketRecorderGuard = M.or( export const MarketEntryGuard = M.splitRecord({ id: M.or(M.gte(0), M.string()), seat: M.eref(M.remotable('Seat')), - recorderKit: M.record(), // TODO: figure out how to type recorderkits + recorderKit: M.record(), askingPrice: M.splitRecord({ brand: BrandShape, value: M.nat(), @@ -199,7 +198,6 @@ export const MarketEntryGuard = M.splitRecord({ }), asset: M.or(CharacterGuard, ItemGuard), isFirstSale: M.boolean(), - // history: M.arrayOf(HistoryGuard), }); export const MarketI = M.interface('market', { @@ -230,14 +228,14 @@ export const CharacterEntryGuard = M.splitRecord({ name: M.string(), character: CharacterGuard, inventory: M.eref(M.remotable('Seat')), - inventoryKit: M.record(), // TODO: figure out how to type recorderkits + inventoryKit: M.record(), history: M.arrayOf(HistoryGuard), }); export const CharacterRecorderGuard = M.splitRecord({ name: M.string(), character: CharacterGuard, - inventoryKit: M.record(), // TODO: figure out how to type recorderkits + inventoryKit: M.record(), history: M.arrayOf(HistoryGuard), }); diff --git a/docs/glossary.md b/docs/glossary.md index c664ff0d2..acb10fc46 100644 --- a/docs/glossary.md +++ b/docs/glossary.md @@ -7,16 +7,15 @@ Behaves like a non-fungible token, meaning it's a digital asset that can hold ar See the table and example below for more information about the properties that make up KREAd Character SFTs: -| Character | Description | Type | Example | -|-----------------|---------------------------------------|----------------------------|---------------------------------------------------------------------------------------------------------------------| -| title | TBD | string | 'Bounty Hunter' | -| origin | TBD | string | 'Arma' | -| description | TBD | string | 'A Bounty Hunter from Wildlands.' | -| level | TBD | number | 51 | -| artistMetadata | Link to the artists Instagram account | string (link to IG page) | 'https://www.instagram.com/enmanueljrperez/' | -| image | Link to the character image | string (link to webp file) | 'https://pink-defensive-jay-557.mypinata.cloud/ipfs/Qmc55m7RrzZtB25mM9B2c9BdtXcLDbhSrErWMAa7azCet6/Citizen/images/001.webp' | -| characterTraits | Link to the character traits | string (link to json file) | 'https://pink-defensive-jay-557.mypinata.cloud/ipfs/Qmc55m7RrzZtB25mM9B2c9BdtXcLDbhSrErWMAa7azCet6/Citizen/metadata.json' | - +| Character | Type | Example | +|----------------- |---------------------------- |----------------------------------------------------------------------------------------------------------------------------- | +| title | string | 'Bounty Hunter' | +| origin | string | 'Arma' | +| description | string | 'A Bounty Hunter from Wildlands.' | +| level | number | 51 | +| artistMetadata | string (link to IG page) | 'https://www.instagram.com/enmanueljrperez/' | +| image | string (link to webp file) | 'https://pink-defensive-jay-557.mypinata.cloud/ipfs/Qmc55m7RrzZtB25mM9B2c9BdtXcLDbhSrErWMAa7azCet6/Citizen/images/001.webp' | +| characterTraits | string (link to json file) | 'https://pink-defensive-jay-557.mypinata.cloud/ipfs/Qmc55m7RrzZtB25mM9B2c9BdtXcLDbhSrErWMAa7azCet6/Citizen/metadata.json' | ```js CharacterSFT = { "artistMetadata": "https://instagram.com/enmanueljrperez?igshid=MzRlODBiNWFlZA==", @@ -43,21 +42,21 @@ Semi-fungible token representing items that can be equipped to and from a Charac See the table and example below for more information about the properties that make up KREAd Item SFTs: -| Item | description | type | example | -|----------------|-----------------------------------------------------------------------------------------------------------------------|----------------------------|---------------------------------------------------------------------------------------------------------------------| -| name | TODO | string | 'Bounty Hunter' | -| origin | TODO | string | 'Arma' | -| description | TODO | string | 'A Bounty Hunter from Wildlands.' | -| level | TODO | number | 51 | -| rarity | number value indicating item rarity (higher is more rare) | number (TODO: range) | 18 | -| category | determines which inventory slot and the item can be equipped to, inventories can only hold 1 item of a given category | string | 'background' | -| sense | TODO | number | 0 | -| weight | TODO | number | 0 | -| colors | List of colors present in the item, used for filters | string [] | [] | -| reserves | TODO | number | 0 | -| functional | TODO | boolean | false | -| artistMetadata | Link to the artists Instagram account | string (link to IG page) | 'https://www.instagram.com/enmanueljrperez/' | -| image | Link to the character image | string (link to webp file) | 'pink-defensive-jay-557.mypinata.cloud/ipfs/Qmc55m7RrzZtB25mM9B2c9BdtXcLDbhSrErWMAa7azCet6/Citizen/images/001.webp' | +| Item | type | example | +|---------------- |---------------------------- |--------------------------------------------------------------------------------------------------------------------- | +| name | string | 'Bounty Hunter' | +| origin | string | 'Arma' | +| description | string | 'A Bounty Hunter from Wildlands.' | +| level | number | 51 | +| rarity | number | 18 | +| category | string | 'background' | +| sense | number | 0 | +| weight | number | 0 | +| colors | string [] | [] | +| reserves | number | 0 | +| functional | boolean | false | +| artistMetadata | string (link to IG page) | 'https://www.instagram.com/enmanueljrperez/' | +| image | string (link to webp file) | 'pink-defensive-jay-557.mypinata.cloud/ipfs/Qmc55m7RrzZtB25mM9B2c9BdtXcLDbhSrErWMAa7azCet6/Citizen/images/001.webp' | ```js diff --git a/frontend/.yarnrc.yml b/frontend/.yarnrc.yml index 39d3ceff8..9969174e7 100644 --- a/frontend/.yarnrc.yml +++ b/frontend/.yarnrc.yml @@ -6,10 +6,5 @@ nmHoistingLimits: workspaces nodeLinker: node-modules -# TODO: remove azure dependency -npmScopes: - kryha: - npmRegistryServer: "https://pkgs.dev.azure.com/Kryha-io/_packaging/Kryha-io/npm/registry" - -# using package.json's packageManager instead of yarnPath +# commented in favor of package.json's packageManager property # yarnPath: .yarn/releases/yarn-4.0.0.cjs diff --git a/frontend/src/components/activity-table/activity-table.tsx b/frontend/src/components/activity-table/activity-table.tsx index dcac64748..369111d67 100644 --- a/frontend/src/components/activity-table/activity-table.tsx +++ b/frontend/src/components/activity-table/activity-table.tsx @@ -16,14 +16,11 @@ interface RowProps { event: ActivityEvent; } -// TODO: implement to and from if/when possible const Header: FC = () => { return ( <> {text.item.event} {text.item.price} - {/* {text.item.from} - {text.item.to} */} {text.item.date} ); @@ -38,8 +35,6 @@ const Row: FC = ({ event }) => { {!!event.price && text.param.istPrice && event.price} - {/* {event.from} - {event.to} */} {getDatefromEpoch(Number(event.date))} ); diff --git a/frontend/src/components/asset-card/character-card-market.tsx b/frontend/src/components/asset-card/character-card-market.tsx index 3f1ef05d4..3e4ccda99 100644 --- a/frontend/src/components/asset-card/character-card-market.tsx +++ b/frontend/src/components/asset-card/character-card-market.tsx @@ -87,8 +87,6 @@ export const CharacterCardMarket: FC = ({ characterInMarket, onClick }) = - {/* TODO: figure out if we want to use this label for something */} - {/*extendedCharacter. && {text.general.forSale}*/} ); }; diff --git a/frontend/src/components/asset-character-filters/asset-character-filters.tsx b/frontend/src/components/asset-character-filters/asset-character-filters.tsx index fe52a5a95..a6d34b549 100644 --- a/frontend/src/components/asset-character-filters/asset-character-filters.tsx +++ b/frontend/src/components/asset-character-filters/asset-character-filters.tsx @@ -80,8 +80,6 @@ export const AssetCharacterFilters: FC = ({ section }) => { clear all - {/* TODO: Add checkbox for equip and forsale*/} - {/* setEquippedTo(equippedTo)} />*/} diff --git a/frontend/src/components/asset-item-filters/asset-item-filters.tsx b/frontend/src/components/asset-item-filters/asset-item-filters.tsx index 2c11521a5..72271945c 100644 --- a/frontend/src/components/asset-item-filters/asset-item-filters.tsx +++ b/frontend/src/components/asset-item-filters/asset-item-filters.tsx @@ -93,9 +93,6 @@ export const AssetItemFilters: FC = ({ section }) => { clear all - {/* TODO: Add checkbox for equip and forsale*/} - {/* setForSale(!forSale)} />*/} - {/* setEquippedTo(equippedTo)} />*/} diff --git a/frontend/src/components/checkbox/checkbox.tsx b/frontend/src/components/checkbox/checkbox.tsx deleted file mode 100644 index aa9dfd277..000000000 --- a/frontend/src/components/checkbox/checkbox.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React, { FC } from "react"; -import { ButtonText } from "../atoms"; -import { CheckboxContainer, HiddenCheckbox, StyledCheckbox } from "./styles"; - -interface Props { - checked: boolean; - onChange: () => void; - label: string; -} -export const Checkbox: FC = ({ checked, onChange, label }) => { - return ( - - - - {label} - - ); -}; diff --git a/frontend/src/components/checkbox/styles.ts b/frontend/src/components/checkbox/styles.ts deleted file mode 100644 index 48a150e20..000000000 --- a/frontend/src/components/checkbox/styles.ts +++ /dev/null @@ -1,36 +0,0 @@ -import styled from "@emotion/styled"; -import { color } from "../../design"; - -export const CheckboxContainer = styled.label` - display: flex; - align-items: center; - cursor: pointer; -`; - -export const HiddenCheckbox = styled.input` - position: absolute; - opacity: 0; - cursor: pointer; -`; - -export const StyledCheckbox = styled.div` - width: 20px; - height: 20px; - border: 1px solid ${color.darkGrey}; /* Change the border style to match your design */ - border-radius: 4px; - display: flex; - align-items: center; - justify-content: center; - margin-right: 8px; /* Adjust spacing as needed */ - transition: all 0.2s; - - input:checked { - background-color: ${color.black}; /* Change the background color when checked */ - border-color: ${color.black}; /* Change the border color when checked */ - color: #fff; /* Change the color of the checkmark when checked */ - } - - input:checked { - visibility: visible; /* Show the checkmark icon when checked */ - } -`; diff --git a/frontend/src/components/empty-card/empty-card.tsx b/frontend/src/components/empty-card/empty-card.tsx deleted file mode 100644 index 424d748f7..000000000 --- a/frontend/src/components/empty-card/empty-card.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { FC } from "react"; -import { color } from "../../design"; -import { ButtonText, MenuItemName } from "../atoms"; -import { FadeInOut } from "../fade-in-out"; -import { EmptyItemCard } from "../item-card"; -import { EmptyCardWrapper, InfoContainer, ItemContainer } from "./styles"; - -interface EmptyCardProps { - title: string; - description: string; -} - -export const EmptyCard: FC = ({ title, description }) => { - return ( - - - - - - {title} - {description} - - - - - ); -}; diff --git a/frontend/src/components/empty-card/index.ts b/frontend/src/components/empty-card/index.ts deleted file mode 100644 index 978c55f23..000000000 --- a/frontend/src/components/empty-card/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./empty-card"; diff --git a/frontend/src/components/input-fields/color-selector.tsx b/frontend/src/components/input-fields/color-selector.tsx index 2cba81df2..656ddd073 100644 --- a/frontend/src/components/input-fields/color-selector.tsx +++ b/frontend/src/components/input-fields/color-selector.tsx @@ -8,8 +8,6 @@ import { ButtonContainer, ColorBox, ColorContainer, ColorWrapper } from "./style import { useViewport } from "../../hooks"; import { COLORS } from "../../constants"; -// TODO: get actual colors for app - interface ColorSelectorProps { handleChange: (selected: string) => void; } diff --git a/frontend/src/components/item-stats/index.ts b/frontend/src/components/item-stats/index.ts deleted file mode 100644 index 6881642d3..000000000 --- a/frontend/src/components/item-stats/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./item-stats"; diff --git a/frontend/src/components/item-stats/item-stats.tsx b/frontend/src/components/item-stats/item-stats.tsx deleted file mode 100644 index ca191b30a..000000000 --- a/frontend/src/components/item-stats/item-stats.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { FC } from "react"; -import { text } from "../../assets"; -import { ONE_HUNDRED_PERCENT } from "../../constants"; -import { DetailSectionProgress } from "../../containers/detail-section/detail-section-progress-bar/styles"; -import { color } from "../../design"; - -import { isItemCategory, Item } from "../../interfaces"; -import { Badge, ButtonText, HorizontalDivider, MenuText } from "../atoms"; -import { Footer, Header, LevelContainer, ProgressContainer, StatsContainer, StatsWrapper, Title } from "./styles"; - -interface ItemStatsProps { - item?: Item; - position: "left" | "right"; - area: "top" | "middle" | "bottom"; -} - -export const ItemStats: FC = ({ item, position, area }) => { - if (!item || !isItemCategory(item.category)) return <>; - - return ( - -
- {item.name} -
- - {text.param.categories[item.category]} - - {text.param.id(item.name)} -
-
- - - - {text.item.level} - {item.level} - - - {text.item.effectiveness} - {/* FIXME: wrong property */} - {/* - {item.effectiveness} - */} - - - {text.item.layerComplexity} - {/* FIXME: wrong property */} - {/* - {text.item.layerComplexity} - */} - - - - ); -}; diff --git a/frontend/src/components/menu-card/index.ts b/frontend/src/components/menu-card/index.ts deleted file mode 100644 index 48c85dd3d..000000000 --- a/frontend/src/components/menu-card/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./menu-card"; diff --git a/frontend/src/components/menu-card/menu-card.tsx b/frontend/src/components/menu-card/menu-card.tsx deleted file mode 100644 index dd7b89aec..000000000 --- a/frontend/src/components/menu-card/menu-card.tsx +++ /dev/null @@ -1,186 +0,0 @@ -import { FC, useMemo, useState } from "react"; -import { Item, Category, MakeOfferCallback } from "../../interfaces"; -import { text } from "../../assets"; -import { - ArrowContainer, - ArrowUpRight, - CardActionsContainer, - Close, - Content, - Divider, - InfoContainer, - Menu, - MenuCardWrapper, - MenuContainer, - MenuContent, - MenuHeader, -} from "./styles"; -import { ButtonText, HorizontalDivider, ImageProps, Label, MenuText, Overlay, SecondaryButton } from "../atoms"; -import { MenuItem } from "../menu-item"; -import { useNavigate } from "react-router-dom"; -import { routes } from "../../navigation"; -import { GO_BACK } from "../../constants"; -import { useViewport } from "../../hooks"; -import { ItemDetailSection } from "../../containers/detail-section"; -import { EmptyCard } from "../empty-card"; -import { useEquipItem, useUnequipItem } from "../../service"; -import { FadeInOut } from "../fade-in-out"; -import { NotificationDetail } from "../notification-detail"; -import { NotificationWrapper } from "../notification-detail/styles"; - -interface MenuCardProps { - title: string; - equippedItemProp?: Item; - unequippedItems: Item[]; - category: Category; - imageProps?: ImageProps; -} - -export const MenuCard: FC = ({ title, category, equippedItemProp, unequippedItems, imageProps }) => { - const navigate = useNavigate(); - const { width: viewWidth, height: viewHeight } = useViewport(); - const [selectedName, setSelectedName] = useState(""); - const [intitial, setInitial] = useState(true); - const [showToast, setShowToast] = useState(false); - const [equippedItem, setEquippedItem] = useState(equippedItemProp); - - const equipItem = useEquipItem(); - const unequipItem = useUnequipItem(); - - const handleEquipResult: MakeOfferCallback = { - accepted: setEquippedItem, - }; - - const handleUnequipResult: MakeOfferCallback = { - accepted: () => setEquippedItem(undefined), - }; - - const allItems = useMemo(() => { - if (equippedItem) return [equippedItem, ...unequippedItems]; - return unequippedItems; - }, [equippedItem, unequippedItems]); - - const selectedItem = useMemo(() => allItems?.find((item) => item.name === selectedName), [allItems, selectedName]); - - const equip = (event: React.MouseEvent) => { - event.stopPropagation(); - setShowToast(!showToast); - if (!selectedItem) return; - equipItem.mutate({ item: selectedItem, callback: handleEquipResult }); - }; - - const unequip = (event: React.MouseEvent) => { - event.stopPropagation(); - setShowToast(!showToast); - if (!equippedItem) return; - unequipItem.mutate({ item: equippedItem, callback: handleUnequipResult }); - }; - - const primaryActions = () => { - if (selectedItem?.name === equippedItem?.name) { - return { - text: text.item.unequip, - onClick: (event: React.MouseEvent) => unequip(event), - }; - } else { - return { - text: text.item.equip, - onClick: (event: React.MouseEvent) => equip(event), - }; - } - }; - - const sell = () => { - if (!selectedName) return; - navigate(`${routes.sellItem}/${category}/${selectedName}`); - }; - - const removeInitial = () => { - setInitial(false); - }; - - const isDividerShown = !!equippedItem && !!unequippedItems.length; - - return ( - - - - - {title} - - {/* FIXME: missinf fn */} - {/* */} - - - navigate(GO_BACK)} /> - - - - - - - - {equippedItem ? ( - setSelectedName(equippedItem.name)} - key={equippedItem.name} - isEquipped - onButtonClick={(event: React.MouseEvent) => unequip(event)} - isInitial={intitial} - removeInitial={removeInitial} - /> - ) : ( - - )} - - {isDividerShown && } - - {unequippedItems.map((item) => ( - setSelectedName(item.name)} - key={item.name} - onButtonClick={(event: React.MouseEvent) => equip(event)} - removeInitial={removeInitial} - /> - ))} - - - - - navigate(routes.shop)}> - {text.store.buyMoreAtStore} - - - - - - {selectedItem && ( - setSelectedName(""), - }} - /> - )} - - {selectedItem && } - - - {showToast && } - - setShowToast(false)} - /> - - - - ); -}; diff --git a/frontend/src/components/menu-card/styles.ts b/frontend/src/components/menu-card/styles.ts deleted file mode 100644 index db84079a4..000000000 --- a/frontend/src/components/menu-card/styles.ts +++ /dev/null @@ -1,113 +0,0 @@ -import styled from "@emotion/styled"; -import { ArrowUpRightIcon, CloseIcon } from "../../assets"; -import { DetailSectionWrap } from "../../containers/detail-section/styles"; -import { color, margins } from "../../design"; -import { fadeIn, HeaderHorizontalDivider, HorizontalDivider, Label } from "../atoms"; - -export const Content = styled.div` - padding: 0px ${margins.small}; -`; - -export const ArrowContainer = styled.div` - display: flex; - flex-direction: column; - align-items: flex-start; - padding: ${margins.mini}; - box-sizing: border-box; - border-radius: ${margins.medium}; -`; - -export const Close = styled(CloseIcon)` - width: 12px; - height: 12px; - cursor: pointer; - margin-top: 14px; -`; - -interface MenuProps { - width: number; - height: number; -} - -export const Menu = styled.div` - ${({ width, height }): string => - `min-width: 500px; max-width: ${width * 0.375}px; width: ${width * 0.375}px; max-height: ${height - 80}px;`}; - background: ${color.white}; - border: 1px solid ${color.grey}; - box-sizing: border-box; - border-radius: ${margins.medium}; - box-shadow: none; - overflow-y: scroll; -`; - -export const MenuHeader = styled.div` - display: flex; - flex-direction: column; - padding: ${margins.big} ${margins.big} ${margins.medium} ${margins.big}; -`; - -export const MenuContainer = styled.div` - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: flex-end; -`; - -export const InfoContainer = styled.div` - display: flex; - flex-direction: row; - align-items: flex-start; - padding: 0; - ${Label} { - margin-top: 2px; - } -`; - -export const Divider = styled(HeaderHorizontalDivider)` - transform: rotate(90deg); - width: ${margins.big}; - margin-right: 26px; - margin-left: 12px; -`; - -export const MenuContent = styled.div` - padding: 0px ${margins.medium} 0px ${margins.medium}; - ${HorizontalDivider} { - margin-top: 16px; - margin-bottom: 24px; - } -`; - -export const MenuItemContainer = styled.div` - display: flex; - flex-direction: row; - align-items: center; - padding: ${margins.big} ${margins.medium} ${margins.big} ${margins.mini}; -`; - -export const ArrowUpRight = styled(ArrowUpRightIcon)` - margin: 0 0 0 13px !important; -`; - -export const CardActionsContainer = styled.div` - display: flex; - align-items: center; - flex-direction: column; - gap: 16px; - justify-content: center; - margin-bottom: ${margins.big}; - margin-right: ${margins.large}; - margin-top: ${margins.medium}; - margin-left: ${margins.large}; - box-shadow: none; -`; - -export const MenuCardWrapper = styled.div` - ${DetailSectionWrap} { - position: absolute; - bottom: ${margins.large}; - left: ${margins.large}; - z-index: 1000; - } - animation: ${fadeIn} 0.6s; -`; diff --git a/frontend/src/components/menu-item/index.ts b/frontend/src/components/menu-item/index.ts deleted file mode 100644 index c0d52d9b7..000000000 --- a/frontend/src/components/menu-item/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./menu-item"; diff --git a/frontend/src/components/menu-item/menu-item.tsx b/frontend/src/components/menu-item/menu-item.tsx deleted file mode 100644 index f402f5843..000000000 --- a/frontend/src/components/menu-item/menu-item.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { FC, useState } from "react"; - -import { CharacterItems, isCharacterCategory, isItemCategory, isString } from "../../interfaces"; -import { ImageContainer, Info, InfoContainer, InfoWrapper, InlineDetails, TitleContainer } from "./styles"; -import { BoldLabel, ButtonText, Dash, ImageProps, MenuItemName } from "../atoms"; -import { text } from "../../assets"; -import { color } from "../../design"; -import { BaseCharacter } from "../base-character"; -import { ItemThumbnail } from "../item-thumbnail"; - -// TODO: handle props differently in order to fix confusion between characterImage and image -export interface Data { - characterImage?: string; - image: string | CharacterItems; - name: string; - level: number; - category: string; -} - -interface MenuItemProps { - data: Data; - onClick?: () => void; - onButtonClick?: (event: React.MouseEvent) => void; - isEquipped?: boolean; - isForSale?: boolean; - imageProps?: ImageProps; - isInitial?: boolean; - removeInitial?: () => void; -} - -export const MenuItem: FC = ({ data, imageProps, onClick, isInitial = false, removeInitial, isEquipped, isForSale }) => { - const [selected, setSelected] = useState(false); - - const handleClick = () => { - onClick && onClick(); - removeInitial && removeInitial(); - setSelected(true); - }; - - if (!isItemCategory(data.category) && !isCharacterCategory(data.category)) return <>; - - return ( - setSelected(false)}> - {isString(data.image) ? ( - - ) : ( - - - - )} - - - - - {data.name} - - - {/* FIXME: type mismatch */} - {/* {text.param.categories[data.category]} */} - - {text.param.level(data.level)} - {isEquipped && ( - <> - - {text.general.equipped} - - )} - {isForSale && ( - <> - - {text.general.forSale} - - )} - - - - - ); -}; diff --git a/frontend/src/components/toast-go-to-wallet/index.ts b/frontend/src/components/toast-go-to-wallet/index.ts deleted file mode 100644 index fea0ab880..000000000 --- a/frontend/src/components/toast-go-to-wallet/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./toast-go-to-wallet"; diff --git a/frontend/src/components/toast-go-to-wallet/styles.ts b/frontend/src/components/toast-go-to-wallet/styles.ts deleted file mode 100644 index 4ca636635..000000000 --- a/frontend/src/components/toast-go-to-wallet/styles.ts +++ /dev/null @@ -1,24 +0,0 @@ -import styled from "@emotion/styled"; - -import { color } from "../../design"; -import { Label, PageTitle } from "../atoms"; - -export const PageTitleContainer = styled.div` - display: flex; - flex-direction: row; - align-items: flex-start; - padding: 0px; - ${Label} { - margin-right: 32px; - } - ${PageTitle} { - margin-left: 32px; - } -`; - -export const Divider = styled.div` - border: 0.5px solid ${color.grey}; - transform: rotate(90deg); - width: 41px; - margin-top: 20px; -`; diff --git a/frontend/src/components/toast-go-to-wallet/toast-go-to-wallet.tsx b/frontend/src/components/toast-go-to-wallet/toast-go-to-wallet.tsx deleted file mode 100644 index 9bfd95dbc..000000000 --- a/frontend/src/components/toast-go-to-wallet/toast-go-to-wallet.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { FC } from "react"; -import { text } from "../../assets"; -import { FadeInOut, Overlay, NotificationDetail } from "../../components"; -import { NotificationWrapper } from "../../components/notification-detail/styles"; - -interface ToastGoToWalletProps { - showToast: boolean; - closeAndRedirect: () => void; -} - -export const ToastGoToWallet: FC = ({ showToast, closeAndRedirect }) => { - return ( - - {showToast && } - - - - - ); -}; diff --git a/frontend/src/components/tooltip/tooltip.tsx b/frontend/src/components/tooltip/tooltip.tsx index e87d5c404..4257596d0 100644 --- a/frontend/src/components/tooltip/tooltip.tsx +++ b/frontend/src/components/tooltip/tooltip.tsx @@ -10,8 +10,6 @@ interface TooltipProps { children: React.ReactNode; } -// TODO: Fix position so it doesn't get covered by parent container -// TODO: Make it smart so that if the viewport is smaller it finds a better position to pop export const Tooltip: FC = ({ title, position, content, children }) => { const [active, setActive] = useState(false); const tooltipRef = useRef(null); diff --git a/frontend/src/containers/canvas/canvas-character-details/canvas-character-details.tsx b/frontend/src/containers/canvas/canvas-character-details/canvas-character-details.tsx deleted file mode 100644 index 62411296d..000000000 --- a/frontend/src/containers/canvas/canvas-character-details/canvas-character-details.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { useCharacterBuilder } from "../../../context/character-builder-context"; -import { useGetCharacterByName } from "../../../service"; -import { useViewport } from "../../../hooks"; -import { Badge, ButtonText, ContentLoader, HorizontalDivider, PrimaryButton } from "../../../components"; -import { ButtonClose } from "../../../components/button-close"; -import { DetailSectionHeaderDetails } from "../../detail-section/detail-section-header/styles"; -import { color } from "../../../design"; -import { DetailSectionSegment } from "../../detail-section/detail-section-segment"; -import { text } from "../../../assets"; -import { - DetailSectionSegmentStoryDescription, - DetailSectionSegmentStoryWrap, -} from "../../detail-section/detail-section-segment-story/styles"; -import React from "react"; -import { DetailsActions, DetailsContainer, DetailsHeader, DetailsHeaderTitle, DetailsSectionContent, DetailsWrapper } from "./styles"; -import { DetailSectionSegmentHeader } from "../../detail-section/detail-section-segment-title/styles"; - -export const CanvasCharacterDetails = () => { - const { selectedAsset, setShowDetails } = useCharacterBuilder(); - const [character] = useGetCharacterByName(selectedAsset); - - const { height } = useViewport(); - if (!character) return ; - - return ( - - - - {character.nft.name} - setShowDetails(false)} /> - - - - {character.nft.title} - - - {character.nft.origin} - - - - sell - - - - - - - {/* story */} - - - - {text.util.correctDescriptionString(character.nft.description)} - - - - - - - ); -}; diff --git a/frontend/src/containers/canvas/canvas-character-details/styles.ts b/frontend/src/containers/canvas/canvas-character-details/styles.ts deleted file mode 100644 index a60b8c45d..000000000 --- a/frontend/src/containers/canvas/canvas-character-details/styles.ts +++ /dev/null @@ -1,45 +0,0 @@ -import styled from "@emotion/styled"; -import { disappear, fadeIn } from "../../../components"; -import { color } from "../../../design"; - -export const DetailsWrapper = styled.div` - animation: ${disappear}, ${fadeIn}; - animation-duration: 0.6s, 0.8s; - animation-delay: 0s, 0.6s; - - background-color: ${color.lightGrey}; - display: flex; - flex-flow: column nowrap; - overflow: hidden; -`; - -interface Props { - height: number; -} - -export const DetailsContainer = styled.div` - display: flex; - flex-direction: column; - overflow-y: scroll; - gap: 8px; - padding: 16px; - ${({ height }): string => `height: ${height - 250}px;`}; - ::-webkit-scrollbar { - display: none; -`; - -export const DetailsActions = styled.div` - display: flex; - gap: 8px; - flex: 1 1 auto; - justify-content: flex-end; -`; -export const DetailsHeader = styled.div` - display: flex; - flex-direction: column; -`; -export const DetailsHeaderTitle = styled.div` - display: flex; - justify-content: space-between; -`; -export const DetailsSectionContent = styled.div``; diff --git a/frontend/src/containers/canvas/canvas-item-details/canvas-item-details.tsx b/frontend/src/containers/canvas/canvas-item-details/canvas-item-details.tsx deleted file mode 100644 index 866e317ea..000000000 --- a/frontend/src/containers/canvas/canvas-item-details/canvas-item-details.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { useCharacterBuilder } from "../../../context/character-builder-context"; -import { getRarityString, useGetItemInInventoryByName } from "../../../service"; -import { useViewport } from "../../../hooks"; -import { Badge, ButtonText, ContentLoader, HorizontalDivider, PrimaryButton } from "../../../components"; -import { ButtonClose } from "../../../components/button-close"; -import { DetailSectionHeaderDetails } from "../../detail-section/detail-section-header/styles"; -import { color } from "../../../design"; -import { DetailSectionSegment } from "../../detail-section/detail-section-segment"; -import { text } from "../../../assets"; -import { - DetailSectionSegmentStoryDescription, - DetailSectionSegmentStoryWrap, -} from "../../detail-section/detail-section-segment-story/styles"; -import { ItemDetailSectionSegmentStats } from "../../detail-section/detail-section-segment-stats"; -import React from "react"; -import { DetailsActions, DetailsContainer, DetailsHeader, DetailsHeaderTitle, DetailsSectionContent, DetailsWrapper } from "./styles"; -import { DetailSectionSegmentHeader } from "../../detail-section/detail-section-segment-title/styles"; - -export const CanvasItemDetails = () => { - const { selectedAsset, selectedAssetCategory, setShowDetails } = useCharacterBuilder(); - const item = useGetItemInInventoryByName(selectedAssetCategory, selectedAsset); - - const { height } = useViewport(); - if (!item) return ; - - return ( - - - - {item?.name} - setShowDetails(false)} /> - - - - {item?.category} - - - {getRarityString(item?.rarity)} - - - {item.equippedTo !== "" ? ( - - unequip - - ) : ( - setShowDetails(false)}> - equip - - )} - - sell - - - - - - - {/* story */} - - - {item.description} - - - - {/* stats */} - - - - - - - ); -}; diff --git a/frontend/src/containers/canvas/canvas-item-details/styles.ts b/frontend/src/containers/canvas/canvas-item-details/styles.ts deleted file mode 100644 index a60b8c45d..000000000 --- a/frontend/src/containers/canvas/canvas-item-details/styles.ts +++ /dev/null @@ -1,45 +0,0 @@ -import styled from "@emotion/styled"; -import { disappear, fadeIn } from "../../../components"; -import { color } from "../../../design"; - -export const DetailsWrapper = styled.div` - animation: ${disappear}, ${fadeIn}; - animation-duration: 0.6s, 0.8s; - animation-delay: 0s, 0.6s; - - background-color: ${color.lightGrey}; - display: flex; - flex-flow: column nowrap; - overflow: hidden; -`; - -interface Props { - height: number; -} - -export const DetailsContainer = styled.div` - display: flex; - flex-direction: column; - overflow-y: scroll; - gap: 8px; - padding: 16px; - ${({ height }): string => `height: ${height - 250}px;`}; - ::-webkit-scrollbar { - display: none; -`; - -export const DetailsActions = styled.div` - display: flex; - gap: 8px; - flex: 1 1 auto; - justify-content: flex-end; -`; -export const DetailsHeader = styled.div` - display: flex; - flex-direction: column; -`; -export const DetailsHeaderTitle = styled.div` - display: flex; - justify-content: space-between; -`; -export const DetailsSectionContent = styled.div``; diff --git a/frontend/src/containers/canvas/character-cards/character-cards.tsx b/frontend/src/containers/canvas/character-cards/character-cards.tsx index 9383f5e6e..b79886b24 100644 --- a/frontend/src/containers/canvas/character-cards/character-cards.tsx +++ b/frontend/src/containers/canvas/character-cards/character-cards.tsx @@ -71,8 +71,6 @@ export const CharacterCards: FC = () => { ); }; -// TODO: Add the conditions for swapping items if the item is equipped to the character - interface CharacterInfo { character: ExtendedCharacter; } diff --git a/frontend/src/containers/canvas/item-cards/item-card-info.tsx b/frontend/src/containers/canvas/item-cards/item-card-info.tsx index 6de89f51b..98338ec95 100644 --- a/frontend/src/containers/canvas/item-cards/item-card-info.tsx +++ b/frontend/src/containers/canvas/item-cards/item-card-info.tsx @@ -1,5 +1,3 @@ -// TODO: Add the conditions for swapping items if the item is equipped to the character - import React, { FC } from "react"; import { useCharacterBuilder } from "../../../context/character-builder-context"; import { ItemButtonContainer, ItemInfo, ItemInfoItem, ItemsRow } from "./style"; diff --git a/frontend/src/containers/canvas/main-mode/main-mode-mobile.tsx b/frontend/src/containers/canvas/main-mode/main-mode-mobile.tsx deleted file mode 100644 index 50894f463..000000000 --- a/frontend/src/containers/canvas/main-mode/main-mode-mobile.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { FC } from "react"; -import { useCharacterBuilder } from "../../../context/character-builder-context"; -import { MAIN_MODE } from "../../../constants"; -import { CategoryCards } from "../category-cards/category-cards"; -import styled from "@emotion/styled"; - -export const MainModeMobile: FC = () => { - const { setInteractionMode } = useCharacterBuilder(); - setInteractionMode(MAIN_MODE); - - return ( - - - - - - ); -}; - -export const CategoryWrapper = styled.div` - grid-area: bottom-pane; - position: relative; - width: 100%; - margin: 0; -`; -export const CategoryContainer = styled.div` - flex-direction: row; - height: fit-content; - flex: none; - padding: 0; - border-radius: 0; -`; diff --git a/frontend/src/containers/detail-section/character-detail-section.tsx b/frontend/src/containers/detail-section/character-detail-section.tsx index 27fd293aa..35ffcd61c 100644 --- a/frontend/src/containers/detail-section/character-detail-section.tsx +++ b/frontend/src/containers/detail-section/character-detail-section.tsx @@ -20,7 +20,6 @@ interface CharacterDetailSectionProps { showToast?: () => void; } -// TODO: Make index dynamic export const CharacterDetailSection: FC = ({ character, actions }) => { const { width } = useViewport(); if (!character) return ; @@ -32,11 +31,10 @@ export const CharacterDetailSection: FC = ({ charac {/* story */} - {/* TODO: fetch actual creator image */} = ({ data, actions }) => { return ( diff --git a/frontend/src/containers/detail-section/detail-section-segment-details/detail-section-segment-details.tsx b/frontend/src/containers/detail-section/detail-section-segment-details/detail-section-segment-details.tsx deleted file mode 100644 index 1330e1936..000000000 --- a/frontend/src/containers/detail-section/detail-section-segment-details/detail-section-segment-details.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { FC } from "react"; - -import { text } from "../../../assets"; -import { FlexRow } from "../../../components"; -import { DetailSectionElement } from "../detail-section-element"; -import { DetailSectionBody } from "../detail-section-segment/styles"; -import { DetailSectionSegmentDetailsWrap, DetailSectionSegmentDetailsLink, ArrowUpRight } from "./styles"; - -interface Data { - brand: string; - boardId: string; - artist: string; - metadata: string; -} - -interface DetailSectionSegmentDetailsProps { - data: Data; -} - -// TODO: Adjust flex view for smaller viewports -// TODO: Fix missing brand -export const DetailSectionSegmentDetails: FC = ({ data }) => { - return ( - - - - {/* {truncateAddress(data.brand)} */} - - - - {text.item.boardIdHash} - {data.boardId} - - - - {data.artist} - - - - {/* TODO: redirect to a real place */} - - {text.item.view} - - - - - - ); -}; diff --git a/frontend/src/containers/detail-section/detail-section-segment-details/index.ts b/frontend/src/containers/detail-section/detail-section-segment-details/index.ts deleted file mode 100644 index 06f999c00..000000000 --- a/frontend/src/containers/detail-section/detail-section-segment-details/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./detail-section-segment-details"; diff --git a/frontend/src/containers/detail-section/detail-section-segment-details/styles.ts b/frontend/src/containers/detail-section/detail-section-segment-details/styles.ts deleted file mode 100644 index 050c97fbc..000000000 --- a/frontend/src/containers/detail-section/detail-section-segment-details/styles.ts +++ /dev/null @@ -1,40 +0,0 @@ -import styled from "@emotion/styled"; -import { ArrowUpRightIcon } from "../../../assets"; -import { FlexRow } from "../../../components"; -import { color, margins } from "../../../design"; -import { DetailSectionBody } from "../detail-section-segment/styles"; - -export const DetailSectionSegmentDetailsWrap = styled.div` - ${FlexRow} { - gap: ${margins.mini}; - } - ${DetailSectionBody} { - text-transform: capitalize; - } -`; - -export const ArrowUpRight = styled(ArrowUpRightIcon)` - margin: 0px 0px 0px 13px !important; -`; - -export const DetailSectionSegmentDetailsLink = styled.a` - text-decoration: none; - color: ${color.black}; - font-weight: 500; - font-size: 12px; - line-height: 15px; - &: hover { - color: ${color.darkGrey}; - ${ArrowUpRight} { - path { - stroke: ${color.darkGrey}; - } - } - } - &: focus { - border: 1px solid ${color.darkGrey}; - border-radius: ${margins.medium}; - box-sizing: border-box; - padding: ${margins.mini} ${margins.small} ${margins.mini} ${margins.small}; - } -`; diff --git a/frontend/src/containers/detail-section/detail-section-segment-stats/detail-section-segment-stats.tsx b/frontend/src/containers/detail-section/detail-section-segment-stats/detail-section-segment-stats.tsx deleted file mode 100644 index ad7d48771..000000000 --- a/frontend/src/containers/detail-section/detail-section-segment-stats/detail-section-segment-stats.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { FC } from "react"; - -import { text } from "../../../assets"; -import { FlexColumn, FlexRow } from "../../../components"; - -import { Item } from "../../../interfaces"; -import { DetailSectionColorPalette } from "../detail-section-color-palette"; -import { DetailSectionElement } from "../detail-section-element"; -import { DetailSectionProgressBar } from "../detail-section-progress-bar"; -import { DetailSectionBody, DetailSectionBodyBigBold } from "../detail-section-segment/styles"; -import { DetailSectionSegmentStatsWrap } from "./styles"; - -interface DetailSectionSegmentStatsProps { - item: Item; -} - -// TODO: Use props intead of hardcoded placeholder for image src -export const DetailSectionSegmentStats: FC = ({ item }) => { - return ( - - - - {item.level} - - - {/* FIXME: wrong properties */} - {/* - - - - - */} - - - - - {/* FIXME: wrong property */} - {/* - {item.forged} - - - {item.baseMaterial} - */} - - - - - - - ); -}; diff --git a/frontend/src/containers/detail-section/detail-section-segment/detail-section-segment.tsx b/frontend/src/containers/detail-section/detail-section-segment/detail-section-segment.tsx index 974afdb77..3d2f97f49 100644 --- a/frontend/src/containers/detail-section/detail-section-segment/detail-section-segment.tsx +++ b/frontend/src/containers/detail-section/detail-section-segment/detail-section-segment.tsx @@ -9,7 +9,6 @@ interface DetailSectionSegmentProps { isActivity?: boolean; } -// TODO: Use props intead of hardcoded placeholder for image src export const DetailSectionSegment: FC = ({ children, title, sectionIndex, isActivity = false }) => { return ( diff --git a/frontend/src/containers/detail-section/item-detail-section.tsx b/frontend/src/containers/detail-section/item-detail-section.tsx index 934e906d6..1fbae6b55 100644 --- a/frontend/src/containers/detail-section/item-detail-section.tsx +++ b/frontend/src/containers/detail-section/item-detail-section.tsx @@ -39,7 +39,6 @@ export const ItemDetailSection: FC = ({ item, actions }) {/* story */} - {/* TODO: fetch actual creator image */} diff --git a/frontend/src/context/agoric.tsx b/frontend/src/context/agoric.tsx index 7d06bb588..fc5630fc3 100644 --- a/frontend/src/context/agoric.tsx +++ b/frontend/src/context/agoric.tsx @@ -94,11 +94,6 @@ export const AgoricStateProvider = (props: ProviderProps): React.ReactElement => const { network } = useNetworkConfig(); useEffect(() => { if (isCancelled) return; - // TODO: consider implementing terms agreement - // if (checkTerms && !areLatestTermsAgreed) { - // setIsTermsDialogOpen(true); - // return; - // } let chainStorageWatcher: ChainStorageWatcher; let connection: any; @@ -141,7 +136,6 @@ export const AgoricStateProvider = (props: ProviderProps): React.ReactElement => }; const fetchInstance = async () => { - // TODO: consider typing the result const instances: any[] = await chainStorageWatcher.queryOnce([Kind.Data, "published.agoricNames.instance"]); const instance = instances.filter((instance: string[]) => instance[0] === KREAD_IDENTIFIER); @@ -149,7 +143,6 @@ export const AgoricStateProvider = (props: ProviderProps): React.ReactElement => }; const fetchTokenInfo = async () => { - // TODO: consider typing the result const agoricNameBrands: any[] = await chainStorageWatcher.queryOnce([Kind.Data, "published.agoricNames.brand"]); const payload: TokenInfo = { character: { diff --git a/frontend/src/context/wallet.tsx b/frontend/src/context/wallet.tsx index 6fe699715..0090f840c 100644 --- a/frontend/src/context/wallet.tsx +++ b/frontend/src/context/wallet.tsx @@ -1,7 +1,7 @@ import React, { createContext, useContext, useEffect, useState } from "react"; import { useAgoricState } from "./agoric"; import { IST_IDENTIFIER, SELL_CHARACTER_INVITATION, SELL_ITEM_INVITATION } from "../constants"; -import { watchWalletVstorage } from "../service/storage-node/watch-general"; +import { watchExistingCharacterPaths, watchWalletVstorage } from "../service/storage-node/watch-general"; import { Item, OfferProposal } from "../interfaces"; import { makeAsyncIterableFromNotifier as iterateNotifier } from "@agoric/notifier"; import { AgoricChainStoragePathKind as Kind } from "@agoric/rpc"; @@ -46,32 +46,6 @@ export const WalletContextProvider = (props: ProviderProps): React.ReactElement return; } - // TODO: move watcher to service - const watchExistingCharacterPaths = () => { - assert(chainStorageWatcher, "chainStorageWatcher not initialized"); - const path = "published.kread.character"; - chainStorageWatcher.watchLatest( - [Kind.Children, path], - async (value: any) => { - console.debug("got update", path, value); - if (!value) { - console.warn(`${path} returned undefined`); - return; - } - - const characterNameList = value.map((char: string) => char.substring(10)); - - walletDispatch((prevState) => ({ - ...prevState, - characterNameList, - })); - }, - (log: any) => { - console.error("Error watching kread char market", log); - }, - ); - }; - const updateStateNonVbank = async (purses: any) => { console.count("💾 LOADING PURSE CHANGE 💾"); @@ -148,7 +122,7 @@ export const WalletContextProvider = (props: ProviderProps): React.ReactElement if (!walletState.fetched && chainStorageWatcher) { if (tokenInfo.character.brand && tokenInfo.item.brand) watchWalletVstorage(chainStorageWatcher, walletAddress, updateStateNonVbank, updateStateOffers); - watchExistingCharacterPaths(); + watchExistingCharacterPaths(chainStorageWatcher, walletDispatch); } }, [ pursesNotifier, diff --git a/frontend/src/interfaces/character-actions.interfaces.ts b/frontend/src/interfaces/character-actions.interfaces.ts deleted file mode 100644 index 00f85f441..000000000 --- a/frontend/src/interfaces/character-actions.interfaces.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { ExtendedCharacter } from "./character.interfaces"; - -// TODO: add fetched flag for each array -export type CharacterState = { - characters: ExtendedCharacter[]; - owned: ExtendedCharacter[]; - fetched: boolean; - selected?: ExtendedCharacter; -}; - -interface SetCharacters { - type: "SET_CHARACTERS"; - payload: ExtendedCharacter[]; -} - -interface AddCharacters { - type: "ADD_CHARACTERS"; - payload: ExtendedCharacter[]; -} - -interface SetOwnedCharacters { - type: "SET_OWNED_CHARACTERS"; - payload: ExtendedCharacter[]; -} - -interface AddOwnedCharacters { - type: "ADD_OWNED_CHARACTERS"; - payload: ExtendedCharacter[]; -} - -interface SetSelectedCharacter { - type: "SET_SELECTED_CHARACTER"; - payload: ExtendedCharacter; -} - -interface SetFetched { - type: "SET_FETCHED"; - payload: boolean; -} - -interface Reset { - type: "RESET"; -} - -export type CharacterStateActions = - | Reset - | SetFetched - | SetCharacters - | AddCharacters - | SetOwnedCharacters - | AddOwnedCharacters - | SetSelectedCharacter; - -export type CharacterDispatch = React.Dispatch; diff --git a/frontend/src/interfaces/item-actions.interfaces.ts b/frontend/src/interfaces/item-actions.interfaces.ts deleted file mode 100644 index 6427265e2..000000000 --- a/frontend/src/interfaces/item-actions.interfaces.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { Item, ItemInMarket } from "./item.interfaces"; - -// TODO: add fetched flag for each array -export type ItemState = { - items: Item[]; - owned: Item[]; - equipped: Item[]; - - fetched: boolean; -}; - -interface SetItems { - type: "SET_ITEMS"; - payload: Item[]; -} - -interface AddItems { - type: "ADD_ITEMS"; - payload: Item[]; -} - -interface SetOwnedItems { - type: "SET_OWNED_ITEMS"; - payload: Item[]; -} - -interface AddOwnedItems { - type: "ADD_OWNED_ITEMS"; - payload: Item[]; -} - -interface SetEquippedItems { - type: "SET_EQUIPPED_ITEMS"; - payload: Item[]; -} - -interface SetItemsMarket { - type: "SET_ITEMS_MARKET"; - payload: ItemInMarket[]; -} - -interface AddItemsMarket { - type: "ADD_ITEMS_MARKET"; - payload: ItemInMarket[]; -} - -interface SetFetched { - type: "SET_FETCHED"; - payload: boolean; -} - -interface SetMarketFetched { - type: "SET_MARKET_FETCHED"; - payload: boolean; -} - -interface Reset { - type: "RESET"; -} - -export type ItemStateActions = - | Reset - | SetFetched - | SetItems - | AddItems - | SetOwnedItems - | AddOwnedItems - | SetItemsMarket - | AddItemsMarket - | SetEquippedItems - | SetMarketFetched; - -export type ItemDispatch = React.Dispatch; diff --git a/frontend/src/module.d.ts b/frontend/src/module.d.ts index 37f7e5333..c854a3ac4 100644 --- a/frontend/src/module.d.ts +++ b/frontend/src/module.d.ts @@ -1,4 +1,3 @@ -//TODO: determine if this is still necessary based on latest versions of the packages declare module "@agoric/assert"; declare module "@endo/captp"; declare module "@agoric/ertp"; diff --git a/frontend/src/navigation/routes.tsx b/frontend/src/navigation/routes.tsx index 9f9ab47f8..4e40bba57 100644 --- a/frontend/src/navigation/routes.tsx +++ b/frontend/src/navigation/routes.tsx @@ -10,8 +10,8 @@ import { UseWithContext } from "../context/wrapper"; import { MobileNotAvailable } from "../pages/mobile-not-available"; import { useIsMobile } from "../hooks"; import { breakpoints } from "../design"; -import { OnboardingMobile } from "../pages/onboarding-mobile/onboarding-mobile"; -import { ConnectWalletMobile } from "../pages/connect-wallet-mobile/connect-wallet-mobile"; +import { OnboardingMobile } from "../pages/onboarding-mobile"; +import { ConnectWalletMobile } from "../pages/connect-wallet-mobile"; import { PrivacyMobile } from "../pages/content-mobile"; export const InternalAppWrapper = () => { diff --git a/frontend/src/pages/buy/character-buy.tsx b/frontend/src/pages/buy/character-buy.tsx index 694a03778..0ebf54f24 100644 --- a/frontend/src/pages/buy/character-buy.tsx +++ b/frontend/src/pages/buy/character-buy.tsx @@ -24,11 +24,9 @@ export const CharacterBuy = () => { }, [characterInMarket]); useEffect(() => { - // TODO: handle declining character and error if (boughtCharacter) setIsAwaitingApproval(false); }, [boughtCharacter]); - // TODO: handle offer denied and error const handleSubmit = async () => { if (!id) return; setIsAwaitingApproval(true); @@ -58,19 +56,3 @@ export const CharacterBuy = () => { /> ); }; - -//TODO: Might add this back as a more info -// -// -// -// -// {showToast && } -// -// setShowToast(false)} -// isError -// /> -// -// diff --git a/frontend/src/pages/content-mobile/privacy-mobile.tsx b/frontend/src/pages/content-mobile/privacy-mobile.tsx index b1fccb065..c79707582 100644 --- a/frontend/src/pages/content-mobile/privacy-mobile.tsx +++ b/frontend/src/pages/content-mobile/privacy-mobile.tsx @@ -5,7 +5,6 @@ import { KreadIcon } from "../../components/logo/styles"; import { color } from "../../design"; import { ContentWrapper, GeneralInfo, InfoContainer, KreadContainer, Title } from "./styles"; -// TODO: make content for privacy page export const PrivacyMobile: FC = () => { return ( <> diff --git a/frontend/src/pages/content/privacy.tsx b/frontend/src/pages/content/privacy.tsx index 8293cd676..92f2b577f 100644 --- a/frontend/src/pages/content/privacy.tsx +++ b/frontend/src/pages/content/privacy.tsx @@ -5,7 +5,6 @@ import { KreadIcon } from "../../components/logo/styles"; import { color } from "../../design"; import { ContentWrapper, FooterContainer, GeneralInfo, InfoContainer, KreadContainer, Title } from "./styles"; -// TODO: make content for privacy page export const Privacy: FC = () => { return ( diff --git a/frontend/src/pages/inventory/empty-item-inventory.tsx b/frontend/src/pages/inventory/empty-item-inventory.tsx deleted file mode 100644 index ea25c097c..000000000 --- a/frontend/src/pages/inventory/empty-item-inventory.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { FC } from "react"; -import { text } from "../../assets"; -import { FadeInOut, OverviewEmpty } from "../../components"; -import { EmptyCard } from "../../components/empty-card"; -import { PageContainer } from "../../components/page-container"; -import { OverviewContainer } from "./styles"; - -export const EmptyDetail: FC = () => { - return ( - - - - - - ); -}; - -export const EmptyItemInventory: FC = () => { - return ( - }> - - - ); -}; diff --git a/frontend/src/pages/item/styles.ts b/frontend/src/pages/item/styles.ts deleted file mode 100644 index ec42be28b..000000000 --- a/frontend/src/pages/item/styles.ts +++ /dev/null @@ -1,39 +0,0 @@ -import styled from "@emotion/styled"; -import { CharacterWrapper, ExpandButton } from "../../components/base-character/styles"; -import { Menu } from "../../components/menu-card/styles"; -import { margins } from "../../design"; - -interface ViewProps { - width: number; - height?: number; - position?: string; -} - -/* eslint-disable indent */ -export const ItemWrapper = styled.div` - overflow: hidden; - ${({ height }): string => `max-height: ${height}px;`}; - ${CharacterWrapper} { - left: 10%; - ${({ position }): string => { - switch (position) { - case "hair": - return "top: 0px;"; - case "clothing": - return "top: -120%;"; - default: - return "top: -75%;"; - } - }}; - } - - ${ExpandButton} { - display: none; - } - ${Menu} { - position: absolute; - z-index: 1000; - top: ${margins.big}; - right: ${margins.big}; - } -`; diff --git a/frontend/src/pages/shop/character-shop-detail.tsx b/frontend/src/pages/shop/character-shop-detail.tsx deleted file mode 100644 index 2ceb9f9db..000000000 --- a/frontend/src/pages/shop/character-shop-detail.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { FC, useState } from "react"; - -import { text } from "../../assets"; -import { CharacterShopCard, FadeInOut, LoadMore, Overlay, OverviewEmpty } from "../../components"; -import { useViewport } from "../../hooks"; -import { DetailContainer, ItemContainer, ItemWrapper, LoadMoreWrapper } from "./styles"; -import { CharacterInMarket } from "../../interfaces"; -import { useLocation, useNavigate } from "react-router-dom"; -import { routes } from "../../navigation"; -import { PAGE_SIZE } from "../../constants"; -import { CharacterDetailSection } from "../../containers/detail-section"; - -interface Props { - characters: CharacterInMarket[]; - totalPages: number; - isLoading: boolean; - selectedCategory: string; - selectedSorting: string; - selectedPrice: { min: number; max: number }; - setShowToast: (isShown: boolean) => void; - page: number; - loadMore: () => void; -} - -export const CharactersShopDetail: FC = ({ - characters, - isLoading, - selectedCategory, - selectedSorting, - selectedPrice, - setShowToast, - page, - loadMore, -}) => { - const { height } = useViewport(); - const navigate = useNavigate(); - const location = useLocation(); - const [selectedCharacter, setSelectedCharacter] = useState(); - const [close, setClose] = useState(false); - - const noFilteredCharacters = - (!selectedCategory.length || !selectedSorting.length || !selectedPrice) && (!characters || !characters.length); - - const buy = () => { - if (!selectedCharacter) return; - navigate(`${routes.buyCharacter}/${selectedCharacter.id}`, { state: location }); - }; - - const displayToast = () => { - setShowToast(true); - }; - - return ( - <> - {!characters || !characters.length ? ( - - ) : ( - !noFilteredCharacters && ( - - - {characters.map((character) => ( - - ))} - - - {characters.length >= PAGE_SIZE * page && } - - - ) - )} - - {!!selectedCharacter && ( - - { - setSelectedCharacter(undefined); - setClose(true); - }, - primary: { text: text.item.buy, onClick: buy }, - }} - showToast={displayToast} - /> - - )} - - - - ); -}; diff --git a/frontend/src/service/character.ts b/frontend/src/service/character.ts index 4f773c50b..4cdeab98f 100644 --- a/frontend/src/service/character.ts +++ b/frontend/src/service/character.ts @@ -148,7 +148,6 @@ export const useCharactersMarket = (): [CharacterInMarket[], boolean] => { return [filtered, isLoading]; }; -// TODO: Add error management export const useCreateCharacter = () => { const service = useAgoricState(); const instance = service.contracts.kread.instance; @@ -167,7 +166,6 @@ export const useCreateCharacter = () => { }); }; -// TODO: test after merge with equip/unequip fix export const useSellCharacter = (characterId: number) => { const [service] = useAgoricContext(); const wallet = useWalletState(); diff --git a/frontend/src/service/character/inventory.ts b/frontend/src/service/character/inventory.ts index 9572763b3..742c16f87 100644 --- a/frontend/src/service/character/inventory.ts +++ b/frontend/src/service/character/inventory.ts @@ -3,11 +3,9 @@ import { Character, Item, MakeOfferCallback } from "../../interfaces"; import { urlToCid } from "../../util/other"; import { formOfferResultCallback } from "../../util/contract-callbacks"; -// TODO: Use makeOffer status callback for errors interface UnequipItem { item: any; character: Character; - // FIXME: add agoric types service: { kreadInstance: any; characterBrand: any; diff --git a/frontend/src/service/character/mint.ts b/frontend/src/service/character/mint.ts index 2f3d64e83..0b2897e86 100644 --- a/frontend/src/service/character/mint.ts +++ b/frontend/src/service/character/mint.ts @@ -2,8 +2,6 @@ import { MINTING_COST } from "../../constants"; import { MakeOfferCallback } from "../../interfaces"; import { formOfferResultCallback } from "../../util/contract-callbacks"; -// TODO: Use makeOffer status callback for errors - interface MintCharacter { name: string; service: { diff --git a/frontend/src/service/config.ts b/frontend/src/service/config.ts index 51d25125a..9492cfbf1 100644 --- a/frontend/src/service/config.ts +++ b/frontend/src/service/config.ts @@ -1,5 +1,3 @@ -//TODO: consider deleting if unneeded -export const a = ""; import axios from "axios"; import { QueryClient } from "react-query"; diff --git a/frontend/src/service/offers.ts b/frontend/src/service/offers.ts index f6080d344..66fa999dc 100644 --- a/frontend/src/service/offers.ts +++ b/frontend/src/service/offers.ts @@ -12,7 +12,7 @@ export const useOffers = (filters?: OfferFilters) => { const filtered = offers.filter((offer) => { try { const descriptionCondition = filters.description ? offer.invitationDetails.description === filters.description : true; - const statusCondition = filters.status ? offer.status === filters.status : true; // TODO: handle condition for offers without status + const statusCondition = filters.status ? offer.status === filters.status : true; return descriptionCondition && statusCondition; } catch (error) { diff --git a/frontend/src/service/storage-node/watch-general.ts b/frontend/src/service/storage-node/watch-general.ts index 77e7c5803..2c2915393 100644 --- a/frontend/src/service/storage-node/watch-general.ts +++ b/frontend/src/service/storage-node/watch-general.ts @@ -1,6 +1,7 @@ -import { AgoricChainStoragePathKind as Kind } from "@agoric/rpc"; +import { ChainStorageWatcher, AgoricChainStoragePathKind as Kind } from "@agoric/rpc"; import { AgoricDispatch, TokenInfo } from "../../interfaces"; import { ITEM_IDENTIFIER, IST_IDENTIFIER, CHARACTER_IDENTIFIER } from "../../constants"; +import { WalletContext } from "../../context/wallet"; type WatcherCallback = (value: any) => void; type ErrorHandler = (log: any) => void; @@ -114,3 +115,31 @@ chainStorageWatcher.watchLatest( console.error("Error watching vbank assets", log); },) }; + +export const watchExistingCharacterPaths = ( + chainStorageWatcher: ChainStorageWatcher, + walletDispatch: (value: React.SetStateAction) => void, +) => { + assert(chainStorageWatcher, "chainStorageWatcher not initialized"); + const path = "published.kread.character"; + chainStorageWatcher.watchLatest( + [Kind.Children, path], + async (value: any) => { + console.debug("got update", path, value); + if (!value) { + console.warn(`${path} returned undefined`); + return; + } + + const characterNameList = value.map((char: string) => char.substring(10)); + + walletDispatch((prevState) => ({ + ...prevState, + characterNameList, + })); + }, + (log: any) => { + console.error("Error watching kread char market", log); + }, + ); +}; \ No newline at end of file diff --git a/frontend/src/service/util.ts b/frontend/src/service/util.ts deleted file mode 100644 index d6d2ed9be..000000000 --- a/frontend/src/service/util.ts +++ /dev/null @@ -1,100 +0,0 @@ -import { AmountMath } from "@agoric/ertp"; -import { E } from "@endo/eventual-send"; -import { Character, ExtendedCharacter, Purses, TokenInfo } from "../interfaces"; -import { makeCastingSpec, makeFollower, makeLeader } from "@agoric/casting"; - -//TODO: THIS FILE NOT BEING USED?? -export const formOfferForItem = (purses: Purses, item: any) => ({ - want: { - Item: { - pursePetname: purses.character[0].pursePetname, - value: item, - }, - }, - // give: { - // Price: { - // pursePetname: purses.money[0].pursePetname, - // value: 10, - // }, - // }, -}); -export const formOfferForCharacter = (characterBrand: any, character: any, moneyBrand?: any, price?: bigint) => ({ - want: { - Asset: AmountMath.make(characterBrand, [character]), - }, - // give: { - // Price: AmountMath.make(moneyBrand, price), - // }, -}); - -export const formatIdAsNumber = (obj: { [key: string]: any }) => ({ - ...obj, - id: BigInt(obj.id), -}); - -export const getExtendedCharacter = (name: string, characters: ExtendedCharacter[]): ExtendedCharacter | undefined => { - return characters.find((c) => c.nft.name === name); -}; - -export const getCharacterKeys = ( - characterName: string, - characterPurse: Character[], -): { - ownedCharacterKey: Character; - wantedCharacterKey: Character; -} => { - const ownedCharacterKey = characterPurse.find((character) => character.name === character.name); - - if (!ownedCharacterKey) throw `Could not find character (${characterName}) in wallet`; - - const wantedCharacterKey: Character = { - ...ownedCharacterKey, - keyId: ownedCharacterKey.keyId === 1 ? 2 : 1, - }; - - return { ownedCharacterKey, wantedCharacterKey }; -}; - -export const getTokenInfo = async (kreadFacet: any, board: any): Promise => { - const tokenInfo = await E(kreadFacet).getTokenInfo(); - - const { - character: { issuer: characterIssuer, brand: characterBrand }, - item: { issuer: itemIssuer, brand: itemBrand }, - paymentFT: { issuer: tokenIssuer, brand: tokenBrand }, - } = tokenInfo; - - const [ - CHARACTER_BRAND_BOARD_ID, - CHARACTER_ISSUER_BOARD_ID, - ITEM_BRAND_BOARD_ID, - ITEM_ISSUER_BOARD_ID, - TOKEN_BRAND_BOARD_ID, - TOKEN_ISSUER_BOARD_ID, - ] = await Promise.all([ - E(board).getId(characterBrand), - E(board).getId(characterIssuer), - E(board).getId(itemBrand), - E(board).getId(itemIssuer), - E(board).getId(tokenBrand), - E(board).getId(tokenIssuer), - ]); - - return { - ...tokenInfo, - boardIds: { - characterBoard: { - issuer: CHARACTER_ISSUER_BOARD_ID, - brand: CHARACTER_BRAND_BOARD_ID, - }, - item: { issuer: ITEM_ISSUER_BOARD_ID, brand: ITEM_BRAND_BOARD_ID }, - paymentFT: { issuer: TOKEN_ISSUER_BOARD_ID, brand: TOKEN_BRAND_BOARD_ID }, - }, - }; -}; - -export const setupStorageNodeFollower = (AGORIC_RPC: string, STORAGE_NODE_SPEC: string): any => { - const leader = makeLeader(AGORIC_RPC); - const castingSpec = makeCastingSpec(STORAGE_NODE_SPEC); - return makeFollower(castingSpec, leader); -}; diff --git a/frontend/src/service/utils/amount.js b/frontend/src/service/utils/amount.js deleted file mode 100644 index db6314d96..000000000 --- a/frontend/src/service/utils/amount.js +++ /dev/null @@ -1,30 +0,0 @@ -// @ts-check -import { AssetKind, DisplayInfo, Value } from "@agoric/ertp"; -import { stringifyValue as formatValue, parseAsValue } from "@agoric/ui-components"; - -/** - * @typedef {{ assetKind?: AssetKind } & DisplayInfo} AmountDisplayInfo - */ - -/** - * - * @param {string} value - * @param {AmountDisplayInfo} [displayInfo] - * @returns {Value} - */ -export function makeValue(value, displayInfo) { - const { assetKind = AssetKind.NAT, decimalPlaces = 0 } = displayInfo || {}; - return parseAsValue(value, assetKind, decimalPlaces); -} - -/** - * - * @param {any} value - * @param {AmountDisplayInfo} [displayInfo] - * @returns {string} - * This is borrowed from wallet ui - */ -export function stringifyValue(value, displayInfo) { - const { assetKind = AssetKind.NAT, decimalPlaces = 0 } = displayInfo || {}; - return formatValue(value, assetKind, decimalPlaces, decimalPlaces); -} diff --git a/frontend/src/service/utils/fetch-websocket.js b/frontend/src/service/utils/fetch-websocket.js deleted file mode 100644 index edf1ff030..000000000 --- a/frontend/src/service/utils/fetch-websocket.js +++ /dev/null @@ -1,201 +0,0 @@ -/* eslint-disable */ -/* global process */ -import { CTP_LOG_CONFIG } from "../../constants.ts"; -import dappConstants from "../constants.js"; - -const { API_URL, BRIDGE_URL, CONTRACT_NAME } = dappConstants; - -// === WEB SOCKET - -const endpointToSocket = new Map(); - -function logMsg(obj, direction = "send:") { - const type = obj.type; - switch (type) { - case undefined: - // Skip untyped objects. - // console.log(direction, obj); - return; - case "CTP_CALL": - CTP_LOG_CONFIG.CALL; //&& console.info(direction, type, obj.method && obj.method.body, obj); - return; - case "CTP_RETURN": - CTP_LOG_CONFIG.RETURN; //&& console.info(direction, type, (obj.exception || obj.result).body, obj); - return; - default: - console.info(direction, type, obj); - } -} - -function getWebSocketEndpoint(endpoint) { - // TODO proxy socket. - let url; - if (endpoint === "/api") { - url = new URL(endpoint, API_URL || window.origin); - } else { - url = new URL(endpoint, BRIDGE_URL || window.origin); - } - url.protocol = url.protocol.replace(/^http/, "ws"); - return url; -} - -const walletBridgeId = "walletBridgeIFrame"; -let walletLoaded = false; -const connectSubscriptions = new Set(); -const messageSubscriptions = new Set(); -function createSocket({ onConnect, onDisconnect, onMessage }, endpoint) { - if (endpoint === "/private/wallet-bridge") { - let ifr = document.getElementById(walletBridgeId); - if (!ifr) { - ifr = document.createElement("iframe"); - ifr.id = walletBridgeId; - ifr.setAttribute("width", "0"); - ifr.setAttribute("height", "0"); - ifr.setAttribute("style", "display: none"); - document.body.appendChild(ifr); - window.addEventListener("message", (ev) => { - logMsg(ev.data, "recv"); - if (ev.data && ev.data.type === "walletBridgeLoaded") { - walletLoaded = true; - for (const sub of connectSubscriptions.keys()) { - sub(); - } - connectSubscriptions.clear(); - } else { - const msg = JSON.stringify(ev.data); - for (const sub of messageSubscriptions.keys()) { - sub(msg); - } - } - }); - } - let ifrQ = []; - ifr.src = `${import.meta.env.PUBLIC_URL}/agoric-wallet.html?suggestedDappPetname=${encodeURIComponent(CONTRACT_NAME)}`; - ifr.addEventListener("load", () => { - while (ifrQ && ifrQ.length) { - const obj = ifrQ.shift(); - logMsg(obj); - ifr.contentWindow.postMessage(obj, window.origin); - } - ifrQ = undefined; - }); - if (onMessage) { - messageSubscriptions.add(onMessage); - } - const messageListeners = new Set(); - endpointToSocket.set(endpoint, { - send(msg) { - const obj = JSON.parse(msg); - if (ifrQ) { - ifrQ.push(obj); - } else { - logMsg(obj); - ifr.contentWindow.postMessage(obj, window.origin); - } - }, - close() { - walletLoaded = false; - if (onConnect) { - connectSubscriptions.delete(onConnect); - } - if (onMessage) { - messageSubscriptions.delete(onMessage); - } - for (const sub of messageListeners.keys()) { - messageSubscriptions.delete(sub); - } - const ifr2 = document.getElementById(walletBridgeId); - if (ifr2) { - ifr2.src = ""; - } - - if (onDisconnect) { - onDisconnect(); - } - }, - addEventListener(kind, cb) { - if (kind !== "message") { - throw Error(`Cannot bridge.addEventListener kind ${kind}`); - } - const onmsg = (data) => cb({ data }); - messageListeners.add(onmsg); - messageSubscriptions.add(onmsg); - }, - removeEventListener(kind, cb) { - if (kind !== "message") { - throw Error(`Cannot bridge.removeEventListener kind ${kind}`); - } - messageSubscriptions.delete(cb); - messageListeners.delete(cb); - }, - }); - - if (onConnect) { - if (walletLoaded) { - onConnect(); - } else { - connectSubscriptions.add(onConnect); - } - } - return; - } - - const socket = new WebSocket(getWebSocketEndpoint(endpoint)); - endpointToSocket.set(endpoint, socket); - if (onConnect) { - socket.addEventListener("open", () => onConnect()); - } - if (onDisconnect) { - socket.addEventListener("close", () => onDisconnect()); - } - if (onMessage) { - socket.addEventListener("message", ({ data }) => onMessage(data)); - } -} - -function closeSocket(endpoint) { - const socket = endpointToSocket.get(endpoint); - socket.close(); - endpointToSocket.delete(endpoint); -} - -export function getActiveSocket(endpoint = "/private/wallet-bridge") { - return endpointToSocket.get(endpoint); -} - -export function activateWebSocket(socketListeners = {}, endpoint = "/private/wallet-bridge") { - if (getActiveSocket(endpoint)) return; - createSocket(socketListeners, endpoint); -} - -export function deactivateWebSocket(endpoint = "/private/wallet-bridge") { - if (!getActiveSocket(endpoint)) return; - closeSocket(endpoint); -} - -// === FETCH - -export async function doFetch(req, endpoint = "/private/wallet-bridge") { - // Use the socket directly. - const socket = getActiveSocket(endpoint); - if (!socket) { - throw Error(`Must activate socket before doFetch to ${endpoint}`); - } - - let resolve; - const p = new Promise((res) => { - resolve = res; - }); - socket.send(JSON.stringify(req)); - const expectedResponse = `${req.type}Response`; - function getResponse({ data: msg }) { - const obj = JSON.parse(msg); - logMsg(obj, "recv:"); - if (obj.type === expectedResponse) { - resolve(obj); - socket.removeEventListener("message", getResponse); - } - } - socket.addEventListener("message", getResponse); - return p; -} diff --git a/frontend/src/service/utils/vstorage.test.ts b/frontend/src/service/utils/vstorage.test.ts deleted file mode 100644 index 07c9e0ddd..000000000 --- a/frontend/src/service/utils/vstorage.test.ts +++ /dev/null @@ -1,133 +0,0 @@ -import { abciQuery, getChildren, getChildData, DEFAULT_NODE_URL, CHILDREN_PATH, DATA_PATH } from "./vstorage"; - -const setupFetchMock = (getResponseValue: (path: string) => string) => { - global.fetch = jest.fn((_, { body }) => { - const requestBody = JSON.parse(body); - const { path } = requestBody.params; - const responseValue = getResponseValue(path); - - return Promise.resolve({ - json: () => - Promise.resolve({ - result: { - response: { - value: responseValue, - }, - }, - }), - }); - }) as any; -}; - -describe("abciQuery", () => { - beforeEach(() => { - setupFetchMock(() => btoa(JSON.stringify({ value: "mock data" }))); - }); - - afterEach(() => { - jest.resetAllMocks(); - }); - - it("calls fetch with the correct parameters", async () => { - await abciQuery(`${CHILDREN_PATH}/path`); - - expect(fetch).toHaveBeenCalledWith(DEFAULT_NODE_URL, { - method: "POST", - body: JSON.stringify({ - jsonrpc: "2.0", - id: 1, - method: "abci_query", - params: { path: `${CHILDREN_PATH}/path` }, - }), - }); - }); - - it("returns the expected data", async () => { - const result = await abciQuery(`${CHILDREN_PATH}/path`); - - expect(result).toEqual({ value: "mock data" }); - }); - - it("returns a default value when an error occurs", async () => { - global.fetch = jest.fn(() => Promise.reject("error")) as any; - - const result = await abciQuery(`${CHILDREN_PATH}/path`); - - expect(result).toEqual({ children: [], value: "" }); - }); -}); - -describe("getChildren", () => { - beforeEach(() => { - setupFetchMock((path) => { - let value: any; - - if (path === `${CHILDREN_PATH}/path`) { - value = { children: ["child1", "child2"] }; - } else if (path === `${CHILDREN_PATH}/path.child1`) { - value = { children: ["subchild1", "subchild2"] }; - } else { - value = { children: [] }; - } - - return btoa(JSON.stringify(value)); - }); - }); - - afterEach(() => { - jest.resetAllMocks(); - }); - - it("returns the expected children", async () => { - const children = await getChildren("path"); - - expect(children).toEqual(["path.child1", "path.child2", "path.child1.subchild1", "path.child1.subchild2"]); - }); - - it("returns an empty array if there are no children", async () => { - const children = await getChildren("path/without/children"); - - expect(children).toEqual([]); - }); -}); - -describe("getChildData", () => { - beforeEach(() => { - setupFetchMock((path) => { - let value: any; - - if (path === `${DATA_PATH}/child`) { - value = { - value: JSON.stringify({ - values: [ - JSON.stringify({ body: JSON.stringify({ data: "mock data 1" }) }), - JSON.stringify({ body: JSON.stringify({ data: "mock data 2" }) }), - ], - }), - }; - } else { - value = {}; - } - - return btoa(JSON.stringify(value)); - }); - }); - - afterEach(() => { - jest.resetAllMocks(); - }); - - it("returns the expected child data", async () => { - const data = await getChildData("child"); - - expect(data).toEqual([{ data: "mock data 1" }, { data: "mock data 2" }]); - }); - - it("returns an empty array if there is no value", async () => { - setupFetchMock(() => btoa(JSON.stringify({}))); - - const data = await getChildData("no.data.child"); - - expect(data).toEqual([]); - }); -}); diff --git a/frontend/src/service/utils/vstorage.ts b/frontend/src/service/utils/vstorage.ts deleted file mode 100644 index c86a98e95..000000000 --- a/frontend/src/service/utils/vstorage.ts +++ /dev/null @@ -1,72 +0,0 @@ -export const DEFAULT_NODE_URL = "http://localhost:26657"; -export const CHILDREN_PATH = "/custom/vstorage/children"; -export const DATA_PATH = "/custom/vstorage/data"; - -export type AbciQueryResponse = { - children?: string[]; - value?: string; -}; - -export const abciQuery = async (path: string, nodeUrl: string = DEFAULT_NODE_URL): Promise => { - const options = { - method: "POST", - body: JSON.stringify({ - jsonrpc: "2.0", - id: 1, - method: "abci_query", - params: { path }, - }), - }; - - try { - const result = await fetch(nodeUrl, options); - const data = await result.json(); - - return JSON.parse(atob(data.result.response.value)); - } catch (error) { - console.error(`Error occured at abciQuery(): ${error}`); - - return { children: [], value: "" }; - } -}; - -export const getChildren = async (path: string): Promise => { - const { children } = await abciQuery(`${CHILDREN_PATH}/${path}`); - - if (!children) { - return []; - } - - const allPaths: string[] = []; - - await Promise.all( - children.map(async (key: string) => { - const subPath = path === "" ? key : `${path}.${key}`; - allPaths.push(subPath); - - const subPaths = await getChildren(subPath); - allPaths.push(...subPaths); - }), - ); - - return allPaths; -}; - -export const getChildData = async (child: string): Promise => { - const { value } = await abciQuery(`${DATA_PATH}/${child}`); - - if (!value) { - return []; - } - - const { values } = JSON.parse(value); - const data: string[] = []; - - values.map((v: string) => { - let decoded = JSON.parse(v); - decoded = JSON.parse(decoded.body); - data.push(decoded); - }); - - return data; -}; diff --git a/frontend/src/setupTests.ts b/frontend/src/setupTests.ts deleted file mode 100644 index 1dd407a63..000000000 --- a/frontend/src/setupTests.ts +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import "@testing-library/jest-dom"; diff --git a/frontend/src/util/category.ts b/frontend/src/util/category.ts deleted file mode 100644 index 184f4aabd..000000000 --- a/frontend/src/util/category.ts +++ /dev/null @@ -1,18 +0,0 @@ -export const findItemCategory = (category: string): string => { - switch (category) { - case "background2": - return "background II"; - case "background1": - return "background I"; - case "filter2": - return "filter II"; - case "filter1": - return "filter I"; - case "headpiece": - return "head piece"; - case "airresevoir": - return "air resevoir"; - default: - return category; - } -};